fe integration for notification system with context, components, and API integration

distribution_fe/app/(dashboard)/layout.tsx

@@ -2,6 +2,8 @@ import { SidebarInset, SidebarProvider, SidebarTrigger } from '@/components/ui/s
 import { AppSidebar } from '@/components/layout/app-sidebar'
 import { BottomNav } from '@/components/layout/bottom-nav'
 import { ThemeToggle } from '@/components/layout/theme-toggle'
+import { NotificationBell } from '@/components/layout/notification-bell'
+import { NotificationProvider } from '@/contexts/notification-context'
 import { TopLoader } from '@/components/shared/top-loader'
 
 export default function DashboardLayout({
@@ -10,21 +12,24 @@ export default function DashboardLayout({
   children: React.ReactNode
 }) {
   return (
-    <SidebarProvider>
-      <TopLoader />
-      <AppSidebar />
-      <SidebarInset>
-        <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border px-4">
-          <SidebarTrigger className="-ml-1 hidden md:flex" />
-          <div className="ml-auto">
-            <ThemeToggle />
-          </div>
-        </header>
-        <main className="flex flex-1 flex-col gap-4 p-4 pb-20 md:pb-4">
-          {children}
-        </main>
-      </SidebarInset>
-      <BottomNav />
-    </SidebarProvider>
+    <NotificationProvider>
+      <SidebarProvider>
+        <TopLoader />
+        <AppSidebar />
+        <SidebarInset>
+          <header className="flex h-14 shrink-0 items-center gap-2 border-b border-border px-4">
+            <SidebarTrigger className="-ml-1 hidden md:flex" />
+            <div className="ml-auto flex items-center gap-1">
+              <NotificationBell />
+              <ThemeToggle />
+            </div>
+          </header>
+          <main className="flex flex-1 flex-col gap-4 p-4 pb-20 md:pb-4">
+            {children}
+          </main>
+        </SidebarInset>
+        <BottomNav />
+      </SidebarProvider>
+    </NotificationProvider>
   )
 }