Fixed notifications button

src/components/layout/topbar.tsx

@@ -134,7 +134,7 @@ export function Topbar({ onMenuClick }: TopbarProps) {
             >
               <Bell className="h-5 w-5" />
               <span className="absolute -right-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-medium text-primary-foreground">
-                3
+                {unreadCount}
               </span>
             </Button>
           </DropdownMenuTrigger>

src/components/settings/notification-settings.tsx

@@ -1,45 +1,82 @@
 "use client"
 
+import { useEffect, useState } from "react"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Label } from "@/components/ui/label"
 import { Switch } from "@/components/ui/switch"
 import { Button } from "@/components/ui/button"
 import { toast } from "sonner"
 
+interface Preferences {
+  leadAssigned: boolean
+  leadStatus: boolean
+  noteAdded: boolean
+  dailyDigest: boolean
+  weeklyReport: boolean
+}
+
+const defaultPreferences: Preferences = {
+  leadAssigned: true,
+  leadStatus: true,
+  noteAdded: false,
+  dailyDigest: false,
+  weeklyReport: true,
+}
+
 const notifications = [
-  {
-    id: "lead-assigned",
-    title: "Lead Assigned",
-    description: "When a lead is assigned to you",
-    defaultChecked: true,
-  },
-  {
-    id: "lead-status",
-    title: "Status Changes",
-    description: "When a lead's status is updated",
-    defaultChecked: true,
-  },
-  {
-    id: "note-added",
-    title: "Note Added",
-    description: "When a note is added to your lead",
-    defaultChecked: false,
-  },
-  {
-    id: "daily-digest",
-    title: "Daily Digest",
-    description: "Receive a daily summary of lead activity",
-    defaultChecked: false,
-  },
-  {
-    id: "weekly-report",
-    title: "Weekly Report",
-    description: "Receive a weekly performance report",
-    defaultChecked: true,
-  },
+  { id: "leadAssigned", title: "Lead Assigned", description: "When a lead is assigned to you" },
+  { id: "leadStatus", title: "Status Changes", description: "When a lead's status is updated" },
+  { id: "noteAdded", title: "Note Added", description: "When a note is added to your lead" },
+  { id: "dailyDigest", title: "Daily Digest", description: "Receive a daily summary of lead activity" },
+  { id: "weeklyReport", title: "Weekly Report", description: "Receive a weekly performance report" },
 ]
 
 export function NotificationSettings() {
+  const [prefs, setPrefs] = useState<Preferences>(defaultPreferences)
+  const [loading, setLoading] = useState(true)
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    async function load() {
+      try {
+        const res = await fetch("/api/notifications/preferences")
+        if (res.ok) {
+          const data = await res.json()
+          setPrefs(data)
+        }
+      } catch {
+        // ignore
+      } finally {
+        setLoading(false)
+      }
+    }
+    load()
+  }, [])
+
+  async function handleSave() {
+    setSaving(true)
+    try {
+      const res = await fetch("/api/notifications/preferences", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(prefs),
+      })
+      if (res.ok) {
+        toast.success("Notification preferences saved")
+      } else {
+        toast.error("Failed to save preferences")
+      }
+    } catch {
+      toast.error("Failed to save preferences")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  function toggle(key: keyof Preferences) {
+    setPrefs((prev) => ({ ...prev, [key]: !prev[key] }))
+  }
+
   return (
     <Card>
       <CardHeader>
@@ -60,11 +97,18 @@ export function NotificationSettings() {
               </Label>
               <p className="text-sm text-muted-foreground">{n.description}</p>
             </div>
-            <Switch id={n.id} defaultChecked={n.defaultChecked} />
+            <Switch
+              id={n.id}
+              disabled={loading}
+              checked={prefs[n.id as keyof Preferences]}
+              onCheckedChange={() => toggle(n.id as keyof Preferences)}
+            />
           </div>
         ))}
         <div className="flex justify-end pt-4">
-          <Button onClick={() => toast.success("Notification preferences saved")}>Save Preferences</Button>
+          <Button onClick={handleSave} disabled={loading || saving}>
+            {saving ? "Saving..." : "Save Preferences"}
+          </Button>
         </div>
       </CardContent>
     </Card>