feat: Enhance provider components with detailed documentation and comments

- Added comprehensive comments and JSDoc-style documentation to NotificationProvider, ThemeProvider, UserProvider, and WebsiteThemeProvider for better clarity and maintainability.
- Improved type definitions in index.ts for better code understanding and usage.
- Introduced Docker support with Dockerfiles for various services including AI server, signaling server, and browser-use service.
- Created a docker-compose.yml file to orchestrate multiple services including PostgreSQL, AI, scraper, and frontend.
- Added a startup guide (startup.txt) for setting up the CRM environment on Ubuntu with Docker.
- Included a .dockerignore file to exclude unnecessary files from Docker builds.

src/app/(dashboard)/profile/page.tsx

@@ -1,3 +1,15 @@
+// ───────────────────────────────────────────────
+// Profile Page (/(dashboard)/profile)
+// ───────────────────────────────────────────────
+// Route: /profile
+// Purpose: View and edit the current user's
+//   profile — avatar upload, personal info,
+//   role, join date, and status.
+// Layout: Two-column grid — left card with avatar
+//   + metadata badges, right card with account
+//   details in a 2-column grid.
+// ───────────────────────────────────────────────
+
 "use client"
 
 import { useRef } from "react"
@@ -9,19 +21,31 @@ import { useUser } from "@/providers/user-provider"
 import { Mail, Calendar, Shield, Activity, Camera } from "lucide-react"
 import { toast } from "sonner"
 
+/**
+ * ProfilePage
+ * ───────────
+ * Displays the currently logged-in user's profile.
+ * Allows avatar upload (PNG/JPEG) via a hidden
+ * file input with a hover-triggered camera overlay.
+ *
+ * @returns Profile layout or null if no user.
+ */
 export default function ProfilePage() {
   const { user, updateAvatar } = useUser()
   if (!user) return null
   const fileInputRef = useRef<HTMLInputElement>(null)
 
+  // ── Avatar upload handler ──
   const handleAvatarChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0]
     if (!file) return
+    // Validate file type — only PNG and JPEG accepted
     const validTypes = ["image/png", "image/jpeg"]
     if (!validTypes.includes(file.type)) {
       toast.error("Only PNG and JPEG files are allowed")
       return
     }
+    // Read as data URL, then POST to API
     const reader = new FileReader()
     reader.onload = async () => {
       const dataUrl = reader.result as string
@@ -51,8 +75,10 @@ export default function ProfilePage() {
       <PageHeader title="Profile" description="Your account information" />
 
       <div className="grid gap-6 lg:grid-cols-3">
+        {/* ── Left column: Avatar + quick info ── */}
         <Card className="lg:col-span-1">
           <CardContent className="flex flex-col items-center pt-8">
+            {/* Avatar with hover-to-upload overlay */}
             <div className="relative">
               <Avatar className="h-24 w-24">
                 <AvatarImage src={user.avatar} />
@@ -77,6 +103,7 @@ export default function ProfilePage() {
             <Badge variant="secondary" className="mt-1 capitalize">
               {user.role}
             </Badge>
+            {/* Metadata rows */}
             <div className="mt-6 flex w-full flex-col gap-3 text-sm">
               <div className="flex items-center gap-3 rounded-lg bg-muted/50 px-4 py-3">
                 <Mail className="h-4 w-4 text-muted-foreground" />
@@ -100,6 +127,7 @@ export default function ProfilePage() {
           </CardContent>
         </Card>
 
+        {/* ── Right column: Full account details ── */}
         <div className="lg:col-span-2 space-y-6">
           <Card>
             <CardHeader>