I Fixed the notifications

src/components/layout/topbar.tsx

@@ -3,11 +3,11 @@
 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 { useNotifications } from "@/providers/notification-provider";
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -38,7 +38,8 @@ export function Topbar({ onMenuClick }: TopbarProps) {
   const router = useRouter();
   const { theme, setTheme } = useTheme();
   const { user, logout } = useUser();
-  const { notifications, unreadCount, markAsRead, markAllAsRead, dismiss } = useNotifications();
+  const { notifications, unreadCount, markAsRead, markAllAsRead, dismiss } =
+    useNotifications();
   const [mounted, setMounted] = useState(false);
   const [searchOpen, setSearchOpen] = useState(false);
 
@@ -48,15 +49,15 @@ export function Topbar({ onMenuClick }: TopbarProps) {
   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 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(" ")
@@ -66,6 +67,14 @@ export function Topbar({ onMenuClick }: TopbarProps) {
 
   return (
     <header className="sticky top-0 z-20 flex h-16 items-center gap-4 border-b bg-background px-4 lg:px-6">
+      {/* Logo */}
+      <div className="flex items-center gap-2 mr-2 shrink-0">
+        <div className="w-3 h-3 rounded-full bg-[#0d9488]" />
+        <span className="text-[#0d9488] font-bold text-sm tracking-wide">
+          CRM
+        </span>
+      </div>
+
       {/* Mobile menu button */}
       <Button
         variant="ghost"
@@ -123,11 +132,9 @@ export function Topbar({ onMenuClick }: TopbarProps) {
               className="relative text-muted-foreground"
             >
               <Bell className="h-5 w-5" />
-              {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>
-              )}
+              <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>
             </Button>
           </DropdownMenuTrigger>
           <DropdownMenuContent align="end" className="w-80">
@@ -156,8 +163,8 @@ export function Topbar({ onMenuClick }: TopbarProps) {
                     role="button"
                     tabIndex={0}
                     onClick={() => {
-                      if (!n.read) markAsRead(n.id)
-                      if (n.link) router.push(n.link)
+                      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" : ""}`}
                   >
@@ -166,15 +173,17 @@ export function Topbar({ onMenuClick }: TopbarProps) {
                     />
                     <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-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)
+                        e.stopPropagation();
+                        dismiss(n.id);
                       }}
                       className="mt-1 shrink-0 text-muted-foreground/40 hover:text-destructive"
                     >