@omersx/bemms 0.0.0-stage → 1.0.0

package/src/components/notifications/notification-bell.tsx

@@ -0,0 +1,367 @@
+'use client';
+
+import { useEffect, useState, useCallback, useRef } from 'react';
+import Link from 'next/link';
+import { useRouter } from 'next/navigation';
+import { Bell, CheckCheck, TicketCheck, Wrench, Monitor, AlertTriangle } from 'lucide-react';
+import { playNotificationSound, playUrgentNotificationSound, unlockAudio } from '@/lib/utils/sound';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Popover, PopoverContent, PopoverTrigger,
+} from '@/components/ui/popover';
+import { NavBadge } from '@/components/layout/nav-badge';
+import { NotificationItem } from './notification-item';
+import { getNotifications, markAsRead, markAllAsRead } from '@/lib/actions/notifications';
+
+// ── Toast Component ──────────────────────────────────────────────────────────────
+
+function NotificationToast({
+  notification,
+  onDismiss,
+}: {
+  notification: { title: string; body: string; actionUrl?: string; notificationType?: string };
+  onDismiss: () => void;
+}) {
+  const router = useRouter();
+
+  useEffect(() => {
+    const timer = setTimeout(onDismiss, 8000);
+    return () => clearTimeout(timer);
+  }, [onDismiss]);
+
+  const getIcon = () => {
+    const type = notification.notificationType || '';
+    if (type.startsWith('ticket_')) return <TicketCheck className="h-5 w-5 text-blue-500" />;
+    if (type.startsWith('pm_') || type.startsWith('task_')) return <Wrench className="h-5 w-5 text-purple-500" />;
+    if (type.startsWith('device_')) return <Monitor className="h-5 w-5 text-green-500" />;
+    if (type === 'sla_warning') return <AlertTriangle className="h-5 w-5 text-amber-500" />;
+    return <Bell className="h-5 w-5 text-primary" />;
+  };
+
+  const isCritical = notification.title.includes('🚨') || notification.title.includes('URGENT');
+
+  return (
+    <div
+      className={`fixed top-4 right-4 z-[100] max-w-sm w-full animate-in slide-in-from-top-2 fade-in duration-300 cursor-pointer ${
+        isCritical
+          ? 'bg-red-50 border-red-300 dark:bg-red-950 dark:border-red-800'
+          : 'bg-card border'
+      } rounded-lg shadow-lg p-4`}
+      onClick={() => {
+        if (notification.actionUrl) {
+          router.push(notification.actionUrl);
+        }
+        onDismiss();
+      }}
+      role="alert"
+    >
+      <div className="flex items-start gap-3">
+        <div className="shrink-0 mt-0.5">{getIcon()}</div>
+        <div className="flex-1 min-w-0">
+          <p className={`text-sm font-semibold leading-tight ${isCritical ? 'text-red-800 dark:text-red-200' : ''}`}>
+            {notification.title}
+          </p>
+          <p className="text-xs text-muted-foreground mt-1 line-clamp-2">
+            {notification.body}
+          </p>
+          {notification.actionUrl && (
+            <p className="text-xs text-primary mt-1.5 font-medium">
+              Tap to view →
+            </p>
+          )}
+        </div>
+        <button
+          onClick={(e) => { e.stopPropagation(); onDismiss(); }}
+          className="shrink-0 text-muted-foreground hover:text-foreground text-xs p-1"
+          aria-label="Dismiss"
+        >
+          ✕
+        </button>
+      </div>
+    </div>
+  );
+}
+
+// ── Main Notification Bell ───────────────────────────────────────────────────────
+
+export function NotificationBell() {
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [items, setItems] = useState<any[]>([]);
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [toast, setToast] = useState<{
+    title: string; body: string; actionUrl?: string; notificationType?: string;
+  } | null>(null);
+  const toastQueueRef = useRef<Array<typeof toast>>([]);
+  const showingToastRef = useRef(false);
+
+  // Show next toast from queue
+  const showNextToast = useCallback(() => {
+    if (toastQueueRef.current.length === 0) {
+      showingToastRef.current = false;
+      return;
+    }
+    showingToastRef.current = true;
+    const next = toastQueueRef.current.shift()!;
+    setToast(next);
+  }, []);
+
+  const dismissToast = useCallback(() => {
+    setToast(null);
+    // Small delay before showing next queued toast
+    setTimeout(showNextToast, 300);
+  }, [showNextToast]);
+
+  const queueToast = useCallback((notif: NonNullable<typeof toast>) => {
+    toastQueueRef.current.push(notif);
+    if (!showingToastRef.current) {
+      showNextToast();
+    }
+  }, [showNextToast]);
+
+  // Unlock Web Audio API on first user interaction for mobile device sound support
+  useEffect(() => {
+    const handleFirstInteraction = () => {
+      unlockAudio();
+      document.removeEventListener('click', handleFirstInteraction);
+      document.removeEventListener('touchstart', handleFirstInteraction);
+    };
+    document.addEventListener('click', handleFirstInteraction, { once: true });
+    document.addEventListener('touchstart', handleFirstInteraction, { once: true });
+    return () => {
+      document.removeEventListener('click', handleFirstInteraction);
+      document.removeEventListener('touchstart', handleFirstInteraction);
+    };
+  }, []);
+
+  // SSE connection for real-time unread count + new notification events
+  useEffect(() => {
+    let eventSource: EventSource | null = null;
+
+    const connect = () => {
+      eventSource = new EventSource('/api/notifications/sse');
+
+      eventSource.onmessage = (event) => {
+        try {
+          const data = JSON.parse(event.data);
+
+          if (data.type === 'unread_count') {
+            setUnreadCount(data.count);
+          }
+
+          // Real-time toast for new notifications
+          if (data.type === 'new_notifications' && Array.isArray(data.notifications)) {
+            let hasCritical = false;
+            data.notifications.forEach((notif: any) => {
+              queueToast({
+                title: notif.title,
+                body: notif.body,
+                actionUrl: notif.actionUrl || undefined,
+                notificationType: notif.notificationType,
+              });
+              // Check if any notification is urgent/critical
+              if (notif.title?.includes('🚨') || notif.title?.includes('URGENT')) {
+                hasCritical = true;
+              }
+            });
+
+            // Play notification sound (urgent alarm for critical, chime for normal)
+            if (data.notifications.length > 0) {
+              if (hasCritical) {
+                playUrgentNotificationSound();
+              } else {
+                playNotificationSound();
+              }
+            }
+
+            // Dispatch global event for live page sync (ticket detail, tickets list, etc.)
+            if (typeof window !== 'undefined') {
+              window.dispatchEvent(
+                new CustomEvent('bemms:notification', { detail: data.notifications })
+              );
+            }
+          }
+        } catch (e) {
+          // Ignore parse errors
+        }
+      };
+
+      eventSource.onerror = () => {
+        eventSource?.close();
+        // Reconnect after 30 seconds
+        setTimeout(connect, 30000);
+      };
+    };
+
+    connect();
+
+    // Also listen for service worker push messages for instant toast
+    const handleSWMessage = (event: MessageEvent) => {
+      if (event.data?.type === 'PUSH_RECEIVED') {
+        const notif = event.data.notification;
+        if (notif) {
+          queueToast({
+            title: notif.title,
+            body: notif.body,
+            actionUrl: notif.url || undefined,
+            notificationType: notif.data?.type,
+          });
+          // Bump unread count immediately
+          setUnreadCount((prev) => prev + 1);
+
+          // Play notification sound for push-received notifications
+          const isCritical =
+            notif.data?.priority === 'p1_critical' ||
+            notif.data?.impact === 'patient_care_affected' ||
+            notif.title?.includes('🚨') ||
+            notif.title?.includes('URGENT');
+          if (isCritical) {
+            playUrgentNotificationSound();
+          } else {
+            playNotificationSound();
+          }
+
+          // Dispatch global event for live page sync
+          if (typeof window !== 'undefined') {
+            window.dispatchEvent(
+              new CustomEvent('bemms:notification', { detail: [notif] })
+            );
+          }
+        }
+      }
+    };
+
+    if ('serviceWorker' in navigator) {
+      navigator.serviceWorker.addEventListener('message', handleSWMessage);
+    }
+
+    return () => {
+      eventSource?.close();
+      if ('serviceWorker' in navigator) {
+        navigator.serviceWorker.removeEventListener('message', handleSWMessage);
+      }
+    };
+  }, [queueToast]);
+
+  // Load notifications when popover opens
+  const loadNotifications = useCallback(async () => {
+    if (loading) return;
+    setLoading(true);
+    try {
+      const data = await getNotifications(10, 0);
+      setItems(data);
+    } catch (e) {
+      console.error('Failed to load notifications:', e);
+    } finally {
+      setLoading(false);
+    }
+  }, [loading]);
+
+  useEffect(() => {
+    if (open) {
+      loadNotifications();
+    }
+  }, [open]);
+
+  const handleMarkRead = async (id: string) => {
+    await markAsRead(id);
+    setItems((prev) =>
+      prev.map((item) =>
+        item.id === id ? { ...item, readAt: new Date() } : item
+      )
+    );
+    setUnreadCount((prev) => Math.max(0, prev - 1));
+  };
+
+  const handleMarkAllRead = async () => {
+    await markAllAsRead();
+    setItems((prev) =>
+      prev.map((item) => ({ ...item, readAt: item.readAt || new Date() }))
+    );
+    setUnreadCount(0);
+  };
+
+  return (
+    <>
+      {/* Toast Notification */}
+      {toast && (
+        <NotificationToast notification={toast} onDismiss={dismissToast} />
+      )}
+
+      {/* Bell Button */}
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="ghost" size="icon" className="relative min-h-[44px] min-w-[44px]">
+            <Bell className={`h-5 w-5 ${unreadCount > 0 ? 'animate-pulse' : ''}`} />
+            <NavBadge
+              type="count"
+              value={unreadCount}
+              variant="default"
+              position="icon-corner"
+              maxCount={99}
+              hideWhenZero={true}
+              ariaLabel={`${unreadCount} unread notifications`}
+            />
+            <span className="sr-only">Notifications</span>
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80 md:w-96 p-0" align="end" sideOffset={8}>
+          <div className="flex items-center justify-between px-4 py-3 border-b">
+            <h3 className="font-semibold text-sm">Notifications</h3>
+            {unreadCount > 0 && (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-xs h-7 gap-1"
+                onClick={handleMarkAllRead}
+              >
+                <CheckCheck className="h-3.5 w-3.5" />
+                Mark all read
+              </Button>
+            )}
+          </div>
+
+          <div className="max-h-[400px] overflow-y-auto">
+            {loading && items.length === 0 ? (
+              <div className="py-8 text-center text-sm text-muted-foreground">
+                Loading...
+              </div>
+            ) : items.length === 0 ? (
+              <div className="py-8 text-center">
+                <Bell className="h-8 w-8 mx-auto text-muted-foreground mb-2" />
+                <p className="text-sm text-muted-foreground">No notifications yet</p>
+              </div>
+            ) : (
+              <div className="divide-y">
+                {items.map((item) => (
+                  <NotificationItem
+                    key={item.id}
+                    id={item.id}
+                    notificationType={item.notificationType}
+                    title={item.title}
+                    body={item.body}
+                    actionUrl={item.actionUrl}
+                    readAt={item.readAt}
+                    createdAt={item.createdAt}
+                    onMarkRead={handleMarkRead}
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+
+          <div className="border-t px-4 py-2">
+            <Link
+              href="/notifications"
+              className="text-xs text-primary hover:underline"
+              onClick={() => setOpen(false)}
+            >
+              View all notifications →
+            </Link>
+          </div>
+        </PopoverContent>
+      </Popover>
+    </>
+  );
+}

package/src/components/notifications/notification-item.tsx

@@ -0,0 +1,93 @@
+'use client';
+
+import Link from 'next/link';
+import { formatDistanceToNow } from 'date-fns';
+import { cn } from '@/lib/utils';
+import {
+  TicketCheck, Wrench, Monitor, AlertTriangle,
+  MessageSquare, Clock, ShieldCheck, Bell,
+} from 'lucide-react';
+
+interface NotificationItemProps {
+  id: string;
+  notificationType: string;
+  title: string;
+  body: string;
+  actionUrl?: string | null;
+  readAt?: Date | string | null;
+  createdAt: Date | string;
+  onMarkRead?: (id: string) => void;
+}
+
+const iconMap: Record<string, typeof Bell> = {
+  ticket_assigned: TicketCheck,
+  ticket_updated: TicketCheck,
+  ticket_comment: MessageSquare,
+  pm_due_soon: Clock,
+  pm_overdue: AlertTriangle,
+  calibration_due: Clock,
+  task_review_required: ShieldCheck,
+  task_approved: ShieldCheck,
+  task_rejected: AlertTriangle,
+  device_status_changed: Monitor,
+  sla_warning: AlertTriangle,
+  system_alert: Bell,
+};
+
+const colorMap: Record<string, string> = {
+  ticket_assigned: 'text-blue-500',
+  ticket_updated: 'text-blue-500',
+  ticket_comment: 'text-purple-500',
+  pm_due_soon: 'text-amber-500',
+  pm_overdue: 'text-red-500',
+  calibration_due: 'text-amber-500',
+  task_review_required: 'text-orange-500',
+  task_approved: 'text-green-500',
+  task_rejected: 'text-red-500',
+  device_status_changed: 'text-blue-500',
+  sla_warning: 'text-red-500',
+  system_alert: 'text-gray-500',
+};
+
+export function NotificationItem({
+  id, notificationType, title, body,
+  actionUrl, readAt, createdAt, onMarkRead,
+}: NotificationItemProps) {
+  const Icon = iconMap[notificationType] || Bell;
+  const color = colorMap[notificationType] || 'text-muted-foreground';
+  const isUnread = !readAt;
+  const timeAgo = formatDistanceToNow(new Date(createdAt), { addSuffix: true });
+
+  const content = (
+    <div
+      className={cn(
+        'flex items-start gap-3 p-3 rounded-lg transition-colors min-h-[44px]',
+        isUnread ? 'bg-primary/5 hover:bg-primary/10' : 'hover:bg-muted/50',
+      )}
+      onClick={() => isUnread && onMarkRead?.(id)}
+    >
+      <div className={cn('mt-0.5 shrink-0', color)}>
+        <Icon className="h-5 w-5" />
+      </div>
+      <div className="flex-1 min-w-0">
+        <div className="flex items-start justify-between gap-2">
+          <p className={cn('text-sm line-clamp-1', isUnread && 'font-semibold')}>
+            {title}
+          </p>
+          {isUnread && (
+            <span className="h-2 w-2 rounded-full bg-primary shrink-0 mt-1.5" />
+          )}
+        </div>
+        <p className="text-xs text-muted-foreground line-clamp-2 mt-0.5">{body}</p>
+        <p className="text-[10px] text-muted-foreground mt-1">{timeAgo}</p>
+      </div>
+    </div>
+  );
+
+  if (actionUrl) {
+    return <Link href={actionUrl} className="block">{content}</Link>;
+  }
+
+  return content;
+}
+

package/src/components/notifications/notification-preferences.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Switch } from '@/components/ui/switch';
+import { Label } from '@/components/ui/label';
+import { Button } from '@/components/ui/button';
+import { Bell, TicketCheck, Wrench, Monitor, Settings } from 'lucide-react';
+import { toast } from 'sonner';
+import {
+  getNotificationPreferences,
+  updateNotificationPreferences,
+} from '@/lib/actions/notifications';
+
+export function NotificationPreferences() {
+  const [prefs, setPrefs] = useState({
+    pushEnabled: true,
+    categories: {
+      tickets: true,
+      maintenance: true,
+      devices: true,
+      system: true,
+    },
+  });
+  const [saving, setSaving] = useState(false);
+  const [pushSupported, setPushSupported] = useState(false);
+  const [pushPermission, setPushPermission] = useState<string>('default');
+
+  useEffect(() => {
+    setPushSupported('Notification' in window && 'serviceWorker' in navigator);
+    if ('Notification' in window) {
+      setPushPermission(Notification.permission);
+    }
+
+    getNotificationPreferences().then((p) => {
+      if (p) setPrefs(p);
+    });
+  }, []);
+
+  const handleTogglePush = async (enabled: boolean) => {
+    if (enabled && pushPermission !== 'granted') {
+      const permission = await Notification.requestPermission();
+      setPushPermission(permission);
+      if (permission !== 'granted') {
+        toast.error('Notification permission denied');
+        return;
+      }
+
+      // Subscribe to push
+      try {
+        const reg = await navigator.serviceWorker.ready;
+        const res = await fetch('/api/notifications/vapid-key');
+        const { publicKey } = await res.json();
+
+        if (publicKey) {
+          const subscription = await reg.pushManager.subscribe({
+            userVisibleOnly: true,
+            applicationServerKey: publicKey,
+          });
+
+          await fetch('/api/notifications/subscribe', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify(subscription.toJSON()),
+          });
+        }
+      } catch (err) {
+        console.error('Push subscription failed:', err);
+      }
+    }
+
+    const updated = { ...prefs, pushEnabled: enabled };
+    setPrefs(updated);
+    await savePrefs(updated);
+  };
+
+  const handleToggleCategory = async (category: keyof typeof prefs.categories, enabled: boolean) => {
+    const updated = {
+      ...prefs,
+      categories: { ...prefs.categories, [category]: enabled },
+    };
+    setPrefs(updated);
+    await savePrefs(updated);
+  };
+
+  const savePrefs = async (p: typeof prefs) => {
+    setSaving(true);
+    try {
+      await updateNotificationPreferences(p);
+      toast.success('Preferences saved');
+    } catch (err) {
+      toast.error('Failed to save preferences');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const sendTestNotification = async () => {
+    if (pushPermission !== 'granted') {
+      toast.error('Enable push notifications first');
+      return;
+    }
+
+    const reg = await navigator.serviceWorker.ready;
+    await reg.showNotification('BEMMS Test', {
+      body: 'Push notifications are working!',
+      icon: '/icons/icon-192.png',
+      badge: '/icons/icon-192.png',
+    });
+    toast.success('Test notification sent!');
+  };
+
+  const categories = [
+    { key: 'tickets' as const, label: 'Tickets', desc: 'Assignments, status changes, comments', icon: TicketCheck },
+    { key: 'maintenance' as const, label: 'Maintenance', desc: 'PM reminders, task reviews, approvals', icon: Wrench },
+    { key: 'devices' as const, label: 'Devices', desc: 'Status changes, availability alerts', icon: Monitor },
+    { key: 'system' as const, label: 'System', desc: 'SLA warnings, system alerts', icon: Settings },
+  ];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Bell className="h-5 w-5" />
+          Notification Preferences
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-6">
+        {/* Push Master Toggle */}
+        <div className="flex items-center justify-between p-4 border rounded-lg">
+          <div>
+            <Label className="text-sm font-medium">Push Notifications</Label>
+            <p className="text-xs text-muted-foreground mt-1">
+              {!pushSupported
+                ? 'Not supported in this browser'
+                : pushPermission === 'denied'
+                ? 'Blocked — enable in browser settings'
+                : 'Receive native notifications on this device'}
+            </p>
+          </div>
+          <Switch
+            checked={prefs.pushEnabled}
+            onCheckedChange={handleTogglePush}
+            disabled={!pushSupported || pushPermission === 'denied'}
+          />
+        </div>
+
+        {/* Category Toggles */}
+        <div className="space-y-3">
+          <h4 className="text-sm font-medium text-muted-foreground">Categories</h4>
+          {categories.map((cat) => (
+            <div key={cat.key} className="flex items-center justify-between py-2">
+              <div className="flex items-center gap-3">
+                <cat.icon className="h-4 w-4 text-muted-foreground" />
+                <div>
+                  <Label className="text-sm">{cat.label}</Label>
+                  <p className="text-xs text-muted-foreground">{cat.desc}</p>
+                </div>
+              </div>
+              <Switch
+                checked={prefs.categories[cat.key]}
+                onCheckedChange={(v: boolean) => handleToggleCategory(cat.key, v)}
+              />
+            </div>
+          ))}
+        </div>
+
+        {/* Test Button */}
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={sendTestNotification}
+          className="w-full min-h-[44px]"
+          disabled={!prefs.pushEnabled || pushPermission !== 'granted'}
+        >
+          Send Test Notification
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+