I added functioonality to the notifications

src/components/layout/topbar.tsx

@@ -1,13 +1,13 @@
-"use client"
+"use client";
 
-import { useState, useEffect } from "react"
-import { useRouter } from "next/navigation"
-import { useTheme } from "next-themes"
-import { cn } from "@/lib/utils"
-import { Button } from "@/components/ui/button"
-import { Input } from "@/components/ui/input"
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
-import { useUser } from "@/providers/user-provider"
+import { useState, useEffect } from "react";
+import { useRouter } from "next/navigation";
+import { useTheme } from "next-themes";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { useUser } from "@/providers/user-provider";
+import { useNotifications } from "@/providers/notification-provider";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -15,8 +15,8 @@ import {
   DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
-import { Badge } from "@/components/ui/badge"
+} from "@/components/ui/dropdown-menu";
+import { Badge } from "@/components/ui/badge";
 import {
   Search,
   Bell,
@@ -26,27 +26,53 @@ import {
   LogOut,
   User,
   Settings,
-} from "lucide-react"
+  CheckCheck,
+  Trash2,
+} from "lucide-react";
 
 interface TopbarProps {
-  onMenuClick: () => void
+  onMenuClick: () => void;
 }
 
 export function Topbar({ onMenuClick }: TopbarProps) {
-  const router = useRouter()
-  const { theme, setTheme } = useTheme()
-  const { user, logout } = useUser()
-  const [mounted, setMounted] = useState(false)
-  const [searchOpen, setSearchOpen] = useState(false)
+  const router = useRouter();
+  const { theme, setTheme } = useTheme();
+  const { user, logout } = useUser();
+  const { notifications, unreadCount, markAsRead, markAllAsRead, dismiss } = useNotifications();
+  const [mounted, setMounted] = useState(false);
+  const [searchOpen, setSearchOpen] = useState(false);
 
-  useEffect(() => { setMounted(true) }, [])
-  if (!user) return null
-  const initials = user.name.split(" ").map((n: string) => n[0]).join("").toUpperCase()
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!user) return null;
+
+  function formatTimeAgo(ts: string): string {
+    const diff = Date.now() - new Date(ts).getTime()
+    const mins = Math.floor(diff / 60000)
+    if (mins < 1) return "Just now"
+    if (mins < 60) return `${mins}m ago`
+    const hrs = Math.floor(mins / 60)
+    if (hrs < 24) return `${hrs}h ago`
+    const days = Math.floor(hrs / 24)
+    if (days < 7) return `${days}d ago`
+    return new Date(ts).toLocaleDateString()
+  }
+  const initials = user.name
+    .split(" ")
+    .map((n: string) => n[0])
+    .join("")
+    .toUpperCase();
 
   return (
     <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-background px-4 lg:px-6">
       {/* Mobile menu button */}
-      <Button variant="ghost" size="icon" className="lg:hidden" onClick={onMenuClick}>
+      <Button
+        variant="ghost"
+        size="icon"
+        className="lg:hidden"
+        onClick={onMenuClick}
+      >
         <Menu className="h-5 w-5" />
       </Button>
 
@@ -77,37 +103,87 @@ export function Topbar({ onMenuClick }: TopbarProps) {
           onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
           className="text-muted-foreground"
         >
-          {mounted ? (theme === "dark" ? <Sun className="h-5 w-5" /> : <Moon className="h-5 w-5" />) : <div className="h-5 w-5" />}
+          {mounted ? (
+            theme === "dark" ? (
+              <Sun className="h-5 w-5" />
+            ) : (
+              <Moon className="h-5 w-5" />
+            )
+          ) : (
+            <div className="h-5 w-5" />
+          )}
         </Button>
 
         {/* Notifications */}
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <Button variant="ghost" size="icon" className="relative text-muted-foreground">
+            <Button
+              variant="ghost"
+              size="icon"
+              className="relative text-muted-foreground"
+            >
               <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
-              </span>
+              {unreadCount > 0 && (
+                <span className="absolute -right-0.5 -top-0.5 flex h-4 min-w-4 items-center justify-center rounded-full bg-primary px-1 text-[10px] font-medium text-primary-foreground">
+                  {unreadCount}
+                </span>
+              )}
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-80">
-            <DropdownMenuLabel>Notifications</DropdownMenuLabel>
+            <DropdownMenuLabel className="flex items-center justify-between">
+              <span>Notifications</span>
+              {notifications.length > 0 && (
+                <button
+                  onClick={markAllAsRead}
+                  className="flex items-center gap-1 text-xs text-primary hover:underline"
+                >
+                  <CheckCheck className="h-3 w-3" />
+                  Mark all read
+                </button>
+              )}
+            </DropdownMenuLabel>
             <DropdownMenuSeparator />
-            <div className="space-y-1 p-2">
-              {[
-                { text: "New lead assigned to you", time: "5m ago" },
-                { text: "Lead status updated to Closed", time: "1h ago" },
-                { text: "Note added to Brightwave Studios", time: "3h ago" },
-              ].map((n, i) => (
-                <div key={i} className="flex items-start gap-3 rounded-lg p-2 hover:bg-muted/50">
-                  <div className="h-2 w-2 mt-2 rounded-full bg-primary shrink-0" />
-                  <div className="flex-1 space-y-0.5">
-                    <p className="text-sm">{n.text}</p>
-                    <p className="text-xs text-muted-foreground">{n.time}</p>
+            {notifications.length === 0 ? (
+              <div className="py-6 text-center text-sm text-muted-foreground">
+                No notifications
+              </div>
+            ) : (
+              <div className="max-h-[360px] space-y-1 overflow-y-auto p-2">
+                {notifications.slice(0, 20).map((n) => (
+                  <div
+                    key={n.id}
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => {
+                      if (!n.read) markAsRead(n.id)
+                      if (n.link) router.push(n.link)
+                    }}
+                    className={`flex cursor-pointer items-start gap-3 rounded-lg p-2 transition-colors hover:bg-muted/50 ${!n.read ? "bg-muted/30" : ""}`}
+                  >
+                    <div
+                      className={`mt-2 h-2 w-2 shrink-0 rounded-full ${n.read ? "bg-transparent" : "bg-primary"}`}
+                    />
+                    <div className="flex-1 space-y-0.5">
+                      <p className="text-sm font-medium">{n.title}</p>
+                      <p className="text-xs text-muted-foreground">{n.description}</p>
+                      <p className="text-[10px] text-muted-foreground/60">
+                        {formatTimeAgo(n.timestamp)}
+                      </p>
+                    </div>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation()
+                        dismiss(n.id)
+                      }}
+                      className="mt-1 shrink-0 text-muted-foreground/40 hover:text-destructive"
+                    >
+                      <Trash2 className="h-3 w-3" />
+                    </button>
                   </div>
-                </div>
-              ))}
-            </div>
+                ))}
+              </div>
+            )}
           </DropdownMenuContent>
         </DropdownMenu>
 
@@ -119,7 +195,9 @@ export function Topbar({ onMenuClick }: TopbarProps) {
                 <AvatarImage src={user.avatar} />
                 <AvatarFallback>{initials}</AvatarFallback>
               </Avatar>
-              <span className="hidden text-sm font-medium md:inline-block">{user.name}</span>
+              <span className="hidden text-sm font-medium md:inline-block">
+                {user.name}
+              </span>
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-56">
@@ -127,7 +205,12 @@ export function Topbar({ onMenuClick }: TopbarProps) {
               <div className="flex flex-col space-y-1">
                 <p className="text-sm font-medium">{user.name}</p>
                 <p className="text-xs text-muted-foreground">{user.email}</p>
-                <Badge variant="secondary" className="mt-1 w-fit text-xs capitalize">{user.role}</Badge>
+                <Badge
+                  variant="secondary"
+                  className="mt-1 w-fit text-xs capitalize"
+                >
+                  {user.role}
+                </Badge>
               </div>
             </DropdownMenuLabel>
             <DropdownMenuSeparator />
@@ -148,5 +231,5 @@ export function Topbar({ onMenuClick }: TopbarProps) {
         </DropdownMenu>
       </div>
     </header>
-  )
+  );
 }