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/components/dashboard/stat-card.tsx

@@ -1,3 +1,7 @@
+// ── Dashboard: Stat Card Component ──
+// Animated metric card with value counter, icon, trend indicator, optional sparkline chart,
+// conversion rate bar, and Spidey-theme hover effects.
+
 "use client"
 
 import { useEffect, useState } from "react"
@@ -19,6 +23,7 @@ interface StatCardProps {
   conversionRate?: number
 }
 
+/** Per-title color configuration for icon backgrounds, text, glow, and sparkline */
 const cardColors: Record<string, { bg: string; text: string; glow: string; accent: string }> = {
   "Total Leads":      { bg: "bg-[#C84B4B]/10",   text: "text-[#C84B4B] dark:text-[#FF1111]",     glow: "via-[rgba(200,75,75,0.25)]",  accent: "#C84B4B" },
   "Open Leads":       { bg: "bg-[#5A8FC4]/10",   text: "text-[#5A8FC4] dark:text-[#1144FF]",     glow: "via-[rgba(90,143,196,0.25)]", accent: "#5A8FC4" },
@@ -28,11 +33,13 @@ const cardColors: Record<string, { bg: string; text: string; glow: string; accen
   "Conversion Rate":  { bg: "bg-[#5A8FC4]/10",   text: "text-[#5A8FC4] dark:text-[#1144FF]",    glow: "via-[rgba(90,143,196,0.25)]", accent: "#5A8FC4" },
 }
 
+/** Compute the nearest round goal above the max value */
 function computeGoal(max: number): number {
   if (max <= 0) return 100
   return Math.ceil(max / 100) * 100 || 100
 }
 
+/** Generate a smooth Catmull-Rom SVG path string from points */
 function smoothPath(points: { x: number; y: number }[]): string {
   if (points.length === 0) return ""
   if (points.length === 1) return `M${points[0].x.toFixed(1)},${points[0].y.toFixed(1)}`
@@ -50,6 +57,9 @@ function smoothPath(points: { x: number; y: number }[]): string {
   return d
 }
 
+/**
+ * StatCard — animated dashboard metric with counting effect, sparkline, and themed decoration.
+ */
 export function StatCard({ title, value, icon: Icon, description, index = 0, trend, sparklineField, monthlyBreakdown, conversionRate }: StatCardProps) {
   const { websiteTheme } = useWebsiteTheme()
   const color = cardColors[title] ?? cardColors["Total Leads"]
@@ -58,6 +68,7 @@ export function StatCard({ title, value, icon: Icon, description, index = 0, tre
   const [display, setDisplay] = useState(0)
   const target = typeof value === "number" ? value : 0
 
+  // ── Animated counter: increments from 0 to target over 1 second ──
   useEffect(() => {
     if (!isNumeric) return
     const duration = 1000
@@ -76,6 +87,7 @@ export function StatCard({ title, value, icon: Icon, description, index = 0, tre
     return () => clearInterval(timer)
   }, [target, isNumeric])
 
+  // ── Build sparkline SVG path and grid lines from monthly breakdown data ──
   function buildSparklineSvg(): { path: string; area: string; goal: number; gridLines: { y: number }[] } {
     if (!monthlyBreakdown || !sparklineField) return { path: "", area: "", goal: 100, gridLines: [] }
     const values = monthlyBreakdown.map((m) => m[sparklineField]).reverse()