feat(frontend): Add Notifications page and complete RBAC routing

- Add useNotifications hook with queries and mutations
- Create NotificationsPage with list, preferences, and pagination
- Add notifications/index.ts barrel export
- Add rbac/index.ts barrel export (RolesPage already exists)
- Add routes for /dashboard/notifications and /dashboard/rbac/roles

P0 task: Frontend for Notifications module

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/hooks/useNotifications.ts

@@ -0,0 +1,141 @@
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { notificationsApi } from '@/services/api';
+
+// Query keys
+const notificationKeys = {
+  all: ['notifications'] as const,
+  list: (params?: { page?: number; limit?: number; unreadOnly?: boolean }) =>
+    [...notificationKeys.all, 'list', params] as const,
+  unreadCount: () => [...notificationKeys.all, 'unread-count'] as const,
+  preferences: () => [...notificationKeys.all, 'preferences'] as const,
+};
+
+// Types
+export interface Notification {
+  id: string;
+  user_id: string;
+  tenant_id: string;
+  type: 'info' | 'success' | 'warning' | 'error';
+  channel: 'in_app' | 'email' | 'push' | 'sms';
+  title: string;
+  body: string;
+  action_url?: string;
+  action_label?: string;
+  read_at?: string;
+  sent_at: string;
+  created_at: string;
+}
+
+export interface NotificationPreferences {
+  email_enabled: boolean;
+  push_enabled: boolean;
+  in_app_enabled: boolean;
+  sms_enabled: boolean;
+  marketing_enabled: boolean;
+  digest_frequency: 'realtime' | 'daily' | 'weekly' | 'never';
+}
+
+export interface PaginatedNotifications {
+  items: Notification[];
+  total: number;
+  page: number;
+  limit: number;
+  totalPages: number;
+}
+
+// ==================== Queries ====================
+
+export function useNotifications(params?: { page?: number; limit?: number; unreadOnly?: boolean }) {
+  return useQuery({
+    queryKey: notificationKeys.list(params),
+    queryFn: () => notificationsApi.list(params) as Promise<PaginatedNotifications>,
+  });
+}
+
+export function useUnreadCount() {
+  return useQuery({
+    queryKey: notificationKeys.unreadCount(),
+    queryFn: () => notificationsApi.getUnreadCount() as Promise<{ count: number }>,
+    refetchInterval: 30000, // Refetch every 30 seconds
+  });
+}
+
+export function useNotificationPreferences() {
+  return useQuery({
+    queryKey: notificationKeys.preferences(),
+    queryFn: () => notificationsApi.getPreferences() as Promise<NotificationPreferences>,
+  });
+}
+
+// ==================== Mutations ====================
+
+export function useMarkAsRead() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string) => notificationsApi.markAsRead(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: notificationKeys.all });
+    },
+  });
+}
+
+export function useMarkAllAsRead() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: () => notificationsApi.markAllAsRead(),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: notificationKeys.all });
+    },
+  });
+}
+
+export function useUpdatePreferences() {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (preferences: Partial<NotificationPreferences>) =>
+      notificationsApi.updatePreferences(preferences as Record<string, boolean>),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: notificationKeys.preferences() });
+    },
+  });
+}
+
+// ==================== Helper functions ====================
+
+export function getNotificationTypeColor(type: Notification['type']): string {
+  const colors: Record<Notification['type'], string> = {
+    info: 'blue',
+    success: 'green',
+    warning: 'yellow',
+    error: 'red',
+  };
+  return colors[type];
+}
+
+export function getNotificationChannelLabel(channel: Notification['channel']): string {
+  const labels: Record<Notification['channel'], string> = {
+    in_app: 'In-App',
+    email: 'Email',
+    push: 'Push',
+    sms: 'SMS',
+  };
+  return labels[channel];
+}
+
+export function formatNotificationTime(dateString: string): string {
+  const date = new Date(dateString);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMins = Math.floor(diffMs / 60000);
+  const diffHours = Math.floor(diffMs / 3600000);
+  const diffDays = Math.floor(diffMs / 86400000);
+
+  if (diffMins < 1) return 'Just now';
+  if (diffMins < 60) return `${diffMins}m ago`;
+  if (diffHours < 24) return `${diffHours}h ago`;
+  if (diffDays < 7) return `${diffDays}d ago`;
+  return date.toLocaleDateString();
+}

src/pages/dashboard/notifications/NotificationsPage.tsx

@@ -0,0 +1,275 @@
+import { useState } from 'react';
+import { Bell, CheckCheck, ExternalLink, Settings, Mail, Smartphone, MessageSquare } from 'lucide-react';
+import {
+  useNotifications,
+  useUnreadCount,
+  useMarkAsRead,
+  useMarkAllAsRead,
+  useNotificationPreferences,
+  useUpdatePreferences,
+  getNotificationTypeColor,
+  formatNotificationTime,
+  type Notification,
+} from '@/hooks/useNotifications';
+
+function NotificationItem({
+  notification,
+  onMarkAsRead,
+}: {
+  notification: Notification;
+  onMarkAsRead: (id: string) => void;
+}) {
+  const isUnread = !notification.read_at;
+  const typeColor = getNotificationTypeColor(notification.type);
+
+  const colorClasses: Record<string, string> = {
+    blue: 'bg-blue-100 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400',
+    green: 'bg-green-100 text-green-600 dark:bg-green-900/20 dark:text-green-400',
+    yellow: 'bg-yellow-100 text-yellow-600 dark:bg-yellow-900/20 dark:text-yellow-400',
+    red: 'bg-red-100 text-red-600 dark:bg-red-900/20 dark:text-red-400',
+  };
+
+  return (
+    <div
+      className={`flex gap-4 rounded-lg border p-4 transition-colors ${
+        isUnread
+          ? 'border-blue-200 bg-blue-50 dark:border-blue-900 dark:bg-blue-900/10'
+          : 'border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-800'
+      }`}
+    >
+      <div className={`rounded-full p-2 ${colorClasses[typeColor]}`}>
+        <Bell className="h-5 w-5" />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-start justify-between gap-2">
+          <div>
+            <h3 className="font-medium text-gray-900 dark:text-white">{notification.title}</h3>
+            <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">{notification.body}</p>
+          </div>
+          <span className="shrink-0 text-xs text-gray-500 dark:text-gray-400">
+            {formatNotificationTime(notification.sent_at)}
+          </span>
+        </div>
+        <div className="mt-3 flex items-center gap-3">
+          {notification.action_url && (
+            <a
+              href={notification.action_url}
+              className="inline-flex items-center gap-1 text-sm font-medium text-blue-600 hover:text-blue-700 dark:text-blue-400"
+            >
+              {notification.action_label || 'View'}
+              <ExternalLink className="h-3 w-3" />
+            </a>
+          )}
+          {isUnread && (
+            <button
+              onClick={() => onMarkAsRead(notification.id)}
+              className="inline-flex items-center gap-1 text-sm text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
+            >
+              <CheckCheck className="h-4 w-4" />
+              Mark as read
+            </button>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function PreferencesSection() {
+  const { data: preferences, isLoading } = useNotificationPreferences();
+  const updateMutation = useUpdatePreferences();
+
+  const handleToggle = (key: string) => {
+    if (!preferences) return;
+    updateMutation.mutate({
+      [key]: !(preferences as any)[key],
+    });
+  };
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center py-8">
+        <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent" />
+      </div>
+    );
+  }
+
+  const channels = [
+    { key: 'email_enabled', label: 'Email', icon: Mail, description: 'Receive notifications via email' },
+    { key: 'push_enabled', label: 'Push', icon: Smartphone, description: 'Receive browser push notifications' },
+    { key: 'in_app_enabled', label: 'In-App', icon: Bell, description: 'Show notifications in the app' },
+    { key: 'sms_enabled', label: 'SMS', icon: MessageSquare, description: 'Receive SMS notifications' },
+  ];
+
+  return (
+    <div className="space-y-4">
+      {channels.map(({ key, label, icon: Icon, description }) => (
+        <div
+          key={key}
+          className="flex items-center justify-between rounded-lg border border-gray-200 p-4 dark:border-gray-700"
+        >
+          <div className="flex items-center gap-3">
+            <div className="rounded-lg bg-gray-100 p-2 dark:bg-gray-700">
+              <Icon className="h-5 w-5 text-gray-600 dark:text-gray-400" />
+            </div>
+            <div>
+              <p className="font-medium text-gray-900 dark:text-white">{label}</p>
+              <p className="text-sm text-gray-500 dark:text-gray-400">{description}</p>
+            </div>
+          </div>
+          <button
+            onClick={() => handleToggle(key)}
+            className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
+              (preferences as any)?.[key]
+                ? 'bg-blue-600'
+                : 'bg-gray-200 dark:bg-gray-600'
+            }`}
+          >
+            <span
+              className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform ${
+                (preferences as any)?.[key] ? 'translate-x-6' : 'translate-x-1'
+              }`}
+            />
+          </button>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export default function NotificationsPage() {
+  const [activeTab, setActiveTab] = useState<'all' | 'unread' | 'settings'>('all');
+  const [page, setPage] = useState(1);
+
+  const { data: notifications, isLoading } = useNotifications({
+    page,
+    limit: 20,
+    unreadOnly: activeTab === 'unread',
+  });
+  const { data: unreadData } = useUnreadCount();
+  const markAsReadMutation = useMarkAsRead();
+  const markAllAsReadMutation = useMarkAllAsRead();
+
+  const handleMarkAsRead = (id: string) => {
+    markAsReadMutation.mutate(id);
+  };
+
+  const handleMarkAllAsRead = () => {
+    if (window.confirm('Mark all notifications as read?')) {
+      markAllAsReadMutation.mutate();
+    }
+  };
+
+  const tabs = [
+    { id: 'all', label: 'All', count: notifications?.total },
+    { id: 'unread', label: 'Unread', count: unreadData?.count },
+    { id: 'settings', label: 'Settings', icon: Settings },
+  ];
+
+  return (
+    <div className="space-y-6">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900 dark:text-white">Notifications</h1>
+          <p className="text-gray-500 dark:text-gray-400">
+            Stay updated with your latest notifications
+          </p>
+        </div>
+        {activeTab !== 'settings' && (unreadData?.count ?? 0) > 0 && (
+          <button
+            onClick={handleMarkAllAsRead}
+            disabled={markAllAsReadMutation.isPending}
+            className="inline-flex items-center gap-2 rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50 dark:border-gray-600 dark:bg-gray-800 dark:text-gray-300 dark:hover:bg-gray-700"
+          >
+            <CheckCheck className="h-4 w-4" />
+            Mark all as read
+          </button>
+        )}
+      </div>
+
+      {/* Tabs */}
+      <div className="border-b border-gray-200 dark:border-gray-700">
+        <nav className="-mb-px flex gap-6">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              onClick={() => setActiveTab(tab.id as any)}
+              className={`flex items-center gap-2 border-b-2 pb-3 text-sm font-medium transition-colors ${
+                activeTab === tab.id
+                  ? 'border-blue-600 text-blue-600 dark:border-blue-400 dark:text-blue-400'
+                  : 'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'
+              }`}
+            >
+              {tab.icon && <tab.icon className="h-4 w-4" />}
+              {tab.label}
+              {tab.count !== undefined && tab.count > 0 && (
+                <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs dark:bg-gray-700">
+                  {tab.count}
+                </span>
+              )}
+            </button>
+          ))}
+        </nav>
+      </div>
+
+      {/* Content */}
+      {activeTab === 'settings' ? (
+        <div className="rounded-lg border border-gray-200 bg-white p-6 dark:border-gray-700 dark:bg-gray-800">
+          <h2 className="mb-4 text-lg font-semibold text-gray-900 dark:text-white">
+            Notification Preferences
+          </h2>
+          <PreferencesSection />
+        </div>
+      ) : (
+        <div className="space-y-4">
+          {isLoading ? (
+            <div className="flex items-center justify-center py-12">
+              <div className="h-8 w-8 animate-spin rounded-full border-4 border-blue-600 border-t-transparent" />
+            </div>
+          ) : notifications?.items.length ? (
+            <>
+              {notifications.items.map((notification: Notification) => (
+                <NotificationItem
+                  key={notification.id}
+                  notification={notification}
+                  onMarkAsRead={handleMarkAsRead}
+                />
+              ))}
+
+              {/* Pagination */}
+              {notifications.totalPages > 1 && (
+                <div className="flex items-center justify-center gap-2 pt-4">
+                  <button
+                    onClick={() => setPage((p) => Math.max(1, p - 1))}
+                    disabled={page === 1}
+                    className="rounded-lg border border-gray-300 px-3 py-1 text-sm disabled:opacity-50 dark:border-gray-600"
+                  >
+                    Previous
+                  </button>
+                  <span className="text-sm text-gray-500 dark:text-gray-400">
+                    Page {page} of {notifications.totalPages}
+                  </span>
+                  <button
+                    onClick={() => setPage((p) => Math.min(notifications.totalPages, p + 1))}
+                    disabled={page === notifications.totalPages}
+                    className="rounded-lg border border-gray-300 px-3 py-1 text-sm disabled:opacity-50 dark:border-gray-600"
+                  >
+                    Next
+                  </button>
+                </div>
+              )}
+            </>
+          ) : (
+            <div className="flex flex-col items-center justify-center rounded-lg border border-gray-200 bg-white py-12 dark:border-gray-700 dark:bg-gray-800">
+              <Bell className="h-12 w-12 text-gray-300 dark:text-gray-600" />
+              <p className="mt-4 text-gray-500 dark:text-gray-400">
+                {activeTab === 'unread' ? 'No unread notifications' : 'No notifications yet'}
+              </p>
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/dashboard/notifications/index.ts

@@ -0,0 +1 @@
+export { default as NotificationsPage } from './NotificationsPage';

src/pages/dashboard/rbac/index.ts

@@ -0,0 +1 @@
+export { default as RolesPage } from './RolesPage';

src/router/index.tsx

@@ -63,6 +63,12 @@ const MyNetworkPage = lazy(() => import('@/pages/dashboard/mlm').then(m => ({ de
 const NodeDetailPage = lazy(() => import('@/pages/dashboard/mlm').then(m => ({ default: m.NodeDetailPage })));
 const MLMMyEarningsPage = lazy(() => import('@/pages/dashboard/mlm').then(m => ({ default: m.MyEarningsPage })));
 
+// Lazy loaded pages - RBAC
+const RolesPage = lazy(() => import('@/pages/dashboard/rbac').then(m => ({ default: m.RolesPage })));
+
+// Lazy loaded pages - Notifications
+const NotificationsPage = lazy(() => import('@/pages/dashboard/notifications').then(m => ({ default: m.NotificationsPage })));
+
 // Lazy loaded pages - Admin
 const WhatsAppSettings = lazy(() => import('@/pages/admin/WhatsAppSettings').then(m => ({ default: m.WhatsAppSettings })));
 const AnalyticsDashboardPage = lazy(() => import('@/pages/admin/AnalyticsDashboardPage').then(m => ({ default: m.AnalyticsDashboardPage })));
@@ -197,6 +203,12 @@ export function AppRouter() {
         <Route path="mlm/my-network" element={<SuspensePage><MyNetworkPage /></SuspensePage>} />
         <Route path="mlm/nodes/:id" element={<SuspensePage><NodeDetailPage /></SuspensePage>} />
         <Route path="mlm/my-earnings" element={<SuspensePage><MLMMyEarningsPage /></SuspensePage>} />
+
+        {/* RBAC routes */}
+        <Route path="rbac/roles" element={<SuspensePage><RolesPage /></SuspensePage>} />
+
+        {/* Notifications routes */}
+        <Route path="notifications" element={<SuspensePage><NotificationsPage /></SuspensePage>} />
       </Route>
 
       {/* Superadmin routes */}