From 27b61415a6ef9164ac6fb4f3982ff9f9b189289d Mon Sep 17 00:00:00 2001
From: admin-valentin <valentinbvro@gmail.com>
Date: Fri, 31 Jul 2026 17:12:03 +0000
Subject: [PATCH] feat(ui): add NotificationBell component with unread badge

---
 src/components/notification-bell.tsx | 48 ++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/notification-bell.tsx

diff --git a/src/components/notification-bell.tsx b/src/components/notification-bell.tsx
new file mode 100644
index 0000000..809f3b8
--- /dev/null
+++ b/src/components/notification-bell.tsx
@@ -0,0 +1,48 @@
+'use client';
+
+import Link from 'next/link';
+import { useQuery } from '@tanstack/react-query';
+import { apiFetch, type Notification } from '../lib/api';
+
+export function NotificationBell({ tenantId }: { tenantId: string }) {
+  const { data: notifications = [] } = useQuery({
+    queryKey: ['notifications-unread', tenantId],
+    queryFn: () => apiFetch<Notification[]>('/v1/notifications?filter=unread', { tenantId }),
+    enabled: Boolean(tenantId),
+    refetchInterval: 30_000,
+    staleTime: 20_000,
+  });
+
+  const count = notifications.length;
+
+  return (
+    <Link
+      href="/dashboard/settings/notifications"
+      aria-label={count > 0 ? `${count} notificări necitite` : 'Notificări'}
+      className="relative flex h-9 w-9 items-center justify-center rounded-lg text-ink-faint
+        transition-colors hover:bg-paper-sunken hover:text-ink"
+    >
+      <svg
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        className="h-5 w-5"
+        aria-hidden="true"
+      >
+        <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9" />
+        <path d="M13.73 21a2 2 0 01-3.46 0" />
+      </svg>
+      {count > 0 && (
+        <span
+          className="absolute right-1 top-1 flex h-4 min-w-[1rem] items-center justify-center
+            rounded-full bg-signal-danger px-0.5 text-[9px] font-bold leading-none text-paper"
+        >
+          {count > 99 ? '99+' : count}
+        </span>
+      )}
+    </Link>
+  );
+}