@omersx/bemms 0.0.0-stage → 0.1.0

package/src/components/tickets/ticket-auto-refresh.tsx

@@ -0,0 +1,197 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+
+interface TicketAutoRefreshProps {
+  ticketId: string;
+  initialUpdatedAt?: string | Date | null;
+  initialStatusCode?: string;
+  initialCommentCount?: number;
+  initialAssignedEngineerUserId?: string | null;
+  pollIntervalMs?: number;
+}
+
+/**
+ * Live synchronization component for the ticket detail view.
+ * 
+ * Provides instantaneous updates without full page reload:
+ * 1. Listens for window 'bemms:notification' events dispatched by NotificationBell (SSE & Push).
+ * 2. Directly connects to SSE as a fallback stream for instant pushes.
+ * 3. Fast-polls /api/tickets/[id]/live-sync (default 3.5s) when the tab is visible.
+ * 4. Refreshes immediately when the user switches back to this browser tab.
+ */
+export function TicketAutoRefresh({
+  ticketId,
+  initialUpdatedAt,
+  initialStatusCode,
+  initialCommentCount = 0,
+  initialAssignedEngineerUserId,
+  pollIntervalMs = 3500,
+}: TicketAutoRefreshProps) {
+  const router = useRouter();
+
+  const lastKnownRef = useRef({
+    updatedAt: initialUpdatedAt ? new Date(initialUpdatedAt).toISOString() : '',
+    statusCode: initialStatusCode || '',
+    commentCount: initialCommentCount,
+    assignedEngineerUserId: initialAssignedEngineerUserId || null,
+  });
+
+  const lastRefreshTimestampRef = useRef<number>(Date.now());
+  const isRefreshingRef = useRef<boolean>(false);
+
+  // Sync ref with server props whenever page re-renders
+  useEffect(() => {
+    lastKnownRef.current = {
+      updatedAt: initialUpdatedAt ? new Date(initialUpdatedAt).toISOString() : '',
+      statusCode: initialStatusCode || '',
+      commentCount: initialCommentCount,
+      assignedEngineerUserId: initialAssignedEngineerUserId || null,
+    };
+    isRefreshingRef.current = false;
+  }, [initialUpdatedAt, initialStatusCode, initialCommentCount, initialAssignedEngineerUserId]);
+
+  // Safe throttled refresh
+  const triggerRefresh = () => {
+    const now = Date.now();
+    if (now - lastRefreshTimestampRef.current < 1500) {
+      return;
+    }
+    lastRefreshTimestampRef.current = now;
+    isRefreshingRef.current = true;
+    router.refresh();
+  };
+
+  // 1. Listen for local notification events dispatched from NotificationBell
+  useEffect(() => {
+    const handleNotification = (event: Event) => {
+      const customEvent = event as CustomEvent<any[]>;
+      const notifications = customEvent.detail;
+      if (!Array.isArray(notifications)) return;
+
+      const isForThisTicket = notifications.some(
+        (n) =>
+          (n.relatedEntityType === 'service_ticket' && n.relatedEntityId === ticketId) ||
+          (n.actionUrl && n.actionUrl.includes(`/tickets/${ticketId}`)) ||
+          (n.data && n.data.ticketId === ticketId)
+      );
+
+      if (isForThisTicket) {
+        triggerRefresh();
+      }
+    };
+
+    window.addEventListener('bemms:notification', handleNotification);
+    return () => {
+      window.removeEventListener('bemms:notification', handleNotification);
+    };
+  }, [ticketId]);
+
+  // 2. Resilient SSE direct listener
+  useEffect(() => {
+    let eventSource: EventSource | null = null;
+    let reconnectTimeout: NodeJS.Timeout;
+
+    const connectSSE = () => {
+      try {
+        eventSource = new EventSource('/api/notifications/sse');
+
+        eventSource.onmessage = (event) => {
+          try {
+            const data = JSON.parse(event.data);
+            if (data.type === 'new_notifications' && Array.isArray(data.notifications)) {
+              const matched = data.notifications.some(
+                (n: any) =>
+                  (n.relatedEntityType === 'service_ticket' && n.relatedEntityId === ticketId) ||
+                  (n.actionUrl && n.actionUrl.includes(`/tickets/${ticketId}`))
+              );
+              if (matched) {
+                triggerRefresh();
+              }
+            }
+          } catch {
+            // Ignore parse errors
+          }
+        };
+
+        eventSource.onerror = () => {
+          eventSource?.close();
+          reconnectTimeout = setTimeout(connectSSE, 20000);
+        };
+      } catch {
+        // Ignore SSE connection errors
+      }
+    };
+
+    connectSSE();
+
+    return () => {
+      eventSource?.close();
+      clearTimeout(reconnectTimeout);
+    };
+  }, [ticketId]);
+
+  // 3. Fast live-sync polling (checks updatedAt, statusCode, commentCount)
+  useEffect(() => {
+    let isCancelled = false;
+
+    const checkLiveSync = async () => {
+      // Don't poll if document is hidden or refresh is pending
+      if (document.hidden || isRefreshingRef.current) return;
+
+      try {
+        const res = await fetch(`/api/tickets/${ticketId}/live-sync`, {
+          cache: 'no-store',
+          headers: { 'Cache-Control': 'no-cache' },
+        });
+
+        if (!res.ok || isCancelled) return;
+
+        const data = await res.json();
+        const current = lastKnownRef.current;
+
+        const hasChanged =
+          (data.updatedAt && current.updatedAt && data.updatedAt !== current.updatedAt) ||
+          (data.statusCode && current.statusCode && data.statusCode !== current.statusCode) ||
+          (typeof data.commentCount === 'number' && data.commentCount !== current.commentCount) ||
+          (data.assignedEngineerUserId !== undefined &&
+            data.assignedEngineerUserId !== current.assignedEngineerUserId);
+
+        if (hasChanged) {
+          lastKnownRef.current = {
+            updatedAt: data.updatedAt || current.updatedAt,
+            statusCode: data.statusCode || current.statusCode,
+            commentCount: data.commentCount ?? current.commentCount,
+            assignedEngineerUserId:
+              data.assignedEngineerUserId !== undefined
+                ? data.assignedEngineerUserId
+                : current.assignedEngineerUserId,
+          };
+          triggerRefresh();
+        }
+      } catch {
+        // Silently handle polling network blips
+      }
+    };
+
+    const intervalId = setInterval(checkLiveSync, pollIntervalMs);
+
+    // Refresh immediately when tab gains focus / becomes visible
+    const handleVisibilityChange = () => {
+      if (!document.hidden) {
+        checkLiveSync();
+      }
+    };
+
+    document.addEventListener('visibilitychange', handleVisibilityChange);
+
+    return () => {
+      isCancelled = true;
+      clearInterval(intervalId);
+      document.removeEventListener('visibilitychange', handleVisibilityChange);
+    };
+  }, [ticketId, pollIntervalMs]);
+
+  return null;
+}

package/src/components/tickets/ticket-badges.tsx

@@ -0,0 +1,43 @@
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+
+const statusConfig: Record<string, { label: string; className: string }> = {
+  new: { label: "New", className: "bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800" },
+  acknowledged: { label: "Acknowledged", className: "bg-sky-100 text-sky-800 border-sky-200 dark:bg-sky-950 dark:text-sky-300 dark:border-sky-800" },
+  in_triage: { label: "Under Assessment", className: "bg-indigo-100 text-indigo-800 border-indigo-200 dark:bg-indigo-950 dark:text-indigo-300 dark:border-indigo-800" },
+  in_progress: { label: "In Progress", className: "bg-violet-100 text-violet-800 border-violet-200 dark:bg-violet-950 dark:text-violet-300 dark:border-violet-800" },
+  waiting_requester: { label: "Info Needed", className: "bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800" },
+  waiting_parts_vendor: { label: "Waiting Parts", className: "bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800" },
+  resolved: { label: "Resolved", className: "bg-green-100 text-green-800 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800" },
+  closed: { label: "Closed", className: "bg-slate-100 text-slate-600 border-slate-200 dark:bg-slate-950 dark:text-slate-300 dark:border-slate-800" },
+  cancelled: { label: "Cancelled", className: "bg-gray-100 text-gray-500 border-gray-200 line-through dark:bg-gray-950 dark:text-gray-400 dark:border-gray-800" },
+}
+
+const priorityConfig: Record<string, { label: string; className: string }> = {
+  p1_critical: { label: "P1 Critical", className: "bg-red-100 text-red-800 border-red-300 font-bold dark:bg-red-950 dark:text-red-300 dark:border-red-800" },
+  p2_high: { label: "P2 High", className: "bg-orange-100 text-orange-800 border-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800" },
+  p3_normal: { label: "P3 Normal", className: "bg-blue-50 text-blue-700 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800" },
+  p4_low: { label: "P4 Low", className: "bg-gray-50 text-gray-600 border-gray-200 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-700" },
+}
+
+const impactConfig: Record<string, { label: string; className: string }> = {
+  device_usable: { label: "Device Usable", className: "bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800" },
+  device_not_usable: { label: "Device Not Usable", className: "bg-orange-50 text-orange-700 border-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800" },
+  patient_care_affected: { label: "Patient Care Affected", className: "bg-red-50 text-red-800 border-red-300 font-bold dark:bg-red-950 dark:text-red-300 dark:border-red-800" },
+}
+
+export function TicketStatusBadge({ status }: { status?: string | null }) {
+  const config = statusConfig[status || ''] || { label: status || 'Unknown', className: 'bg-muted text-muted-foreground' }
+  return <Badge variant="outline" className={cn("font-medium", config.className)}>{config.label}</Badge>
+}
+
+export function TicketPriorityBadge({ priority }: { priority?: string | null }) {
+  const config = priorityConfig[priority || ''] || { label: priority || 'N/A', className: 'bg-muted text-muted-foreground' }
+  return <Badge variant="outline" className={cn("font-medium text-xs", config.className)}>{config.label}</Badge>
+}
+
+export function TicketImpactBadge({ impact }: { impact?: string | null }) {
+  const config = impactConfig[impact || ''] || { label: impact || 'N/A', className: 'bg-muted text-muted-foreground' }
+  return <Badge variant="outline" className={cn("font-medium text-xs", config.className)}>{config.label}</Badge>
+}
+

package/src/components/tickets/ticket-card.tsx

@@ -0,0 +1,197 @@
+"use client"
+
+import Link from "next/link"
+import { cn } from "@/lib/utils"
+import { TicketPriorityBadge, TicketStatusBadge } from "./ticket-badges"
+import { WaitingForEngineerBanner } from "./ticket-dispatch-status"
+import { Monitor, MapPin, User, Calendar, Package } from "lucide-react"
+
+export interface TicketItem {
+  id: string
+  ticketNumber: string
+  title: string
+  description?: string | null
+  statusCode: string
+  priorityCode: string
+  reportedImpact?: string | null
+  waitingReason?: string | null
+  waitingDependencyType?: string | null
+  reportedAt?: Date | string | null
+  createdAt?: Date | string | null
+  device?: {
+    id?: string
+    name: string
+    assetNumber?: string | null
+    currentStatusCode?: string | null
+  } | null
+  hospital?: {
+    id?: string
+    name: string
+  } | null
+  department?: {
+    id?: string
+    name: string
+  } | null
+  reportedByUser?: {
+    id?: string
+    fullName?: string | null
+  } | null
+  assignedEngineer?: {
+    id?: string
+    fullName?: string | null
+  } | null
+}
+
+export function getTicketStatusStyle(statusCode: string) {
+  switch (statusCode) {
+    case "new":
+    case "acknowledged":
+    case "in_triage":
+      return {
+        rail: "border-l-rose-500",
+        bg: "bg-rose-50/35 dark:bg-rose-950/20 hover:bg-rose-50/70 dark:hover:bg-rose-950/30",
+        border: "border-rose-200/80 dark:border-rose-900/40",
+        label: "Attention Needed",
+        dot: "bg-rose-500",
+      }
+    case "in_progress":
+      return {
+        rail: "border-l-amber-500",
+        bg: "bg-amber-50/35 dark:bg-amber-950/20 hover:bg-amber-50/70 dark:hover:bg-amber-950/30",
+        border: "border-amber-200/80 dark:border-amber-900/40",
+        label: "In Progress",
+        dot: "bg-amber-500",
+      }
+    case "waiting_parts_vendor":
+    case "waiting_requester":
+      return {
+        rail: "border-l-orange-500",
+        bg: "bg-orange-50/35 dark:bg-orange-950/20 hover:bg-orange-50/70 dark:hover:bg-orange-950/30",
+        border: "border-orange-200/80 dark:border-orange-900/40",
+        label: "Waiting for Parts",
+        dot: "bg-orange-500",
+      }
+    case "resolved":
+      return {
+        rail: "border-l-emerald-500",
+        bg: "bg-emerald-50/35 dark:bg-emerald-950/20 hover:bg-emerald-50/70 dark:hover:bg-emerald-950/30",
+        border: "border-emerald-200/80 dark:border-emerald-900/40",
+        label: "Resolved",
+        dot: "bg-emerald-500",
+      }
+    case "closed":
+      return {
+        rail: "border-l-slate-400 dark:border-l-slate-600",
+        bg: "bg-slate-50/50 dark:bg-slate-900/20 hover:bg-slate-100/50 dark:hover:bg-slate-900/40",
+        border: "border-slate-200/80 dark:border-slate-800/40",
+        label: "Closed",
+        dot: "bg-slate-400",
+      }
+    case "cancelled":
+    default:
+      return {
+        rail: "border-l-zinc-300 dark:border-l-zinc-700",
+        bg: "bg-zinc-50/30 dark:bg-zinc-900/10 hover:bg-zinc-100/40 dark:hover:bg-zinc-900/30",
+        border: "border-zinc-200/80 dark:border-zinc-800/40",
+        label: "Cancelled",
+        dot: "bg-zinc-400",
+      }
+  }
+}
+
+export function TicketCard({ ticket }: { ticket: TicketItem }) {
+  const style = getTicketStatusStyle(ticket.statusCode)
+
+  return (
+    <Link
+      href={`/tickets/${ticket.id}`}
+      className={cn(
+        "group relative flex flex-col justify-between rounded-lg border border-l-4 transition-all duration-200 p-4 shadow-sm hover:shadow-md",
+        style.rail,
+        style.bg,
+        style.border
+      )}
+    >
+      <div>
+        {/* Top Header: Ticket Number & Badges */}
+        <div className="flex items-center justify-between gap-2 mb-2">
+          <span className="font-mono text-xs font-bold text-primary group-hover:underline">
+            {ticket.ticketNumber}
+          </span>
+          <div className="flex items-center gap-1.5 flex-wrap">
+            <TicketPriorityBadge priority={ticket.priorityCode} />
+            <TicketStatusBadge status={ticket.statusCode} />
+          </div>
+        </div>
+
+        {/* Title */}
+        <h3 className="font-semibold text-base text-foreground group-hover:text-primary transition-colors line-clamp-1 mb-2.5">
+          {ticket.title}
+        </h3>
+
+        {/* Device & Location Meta */}
+        <div className="space-y-1.5 text-xs text-muted-foreground mb-3">
+          <div className="flex items-center gap-1.5 truncate">
+            <Monitor className="w-3.5 h-3.5 shrink-0 text-slate-500" />
+            <span className="font-medium text-foreground truncate">
+              {ticket.device?.name || "No linked device"}
+            </span>
+            {ticket.device?.assetNumber && (
+              <span className="font-mono text-[11px] text-muted-foreground shrink-0">
+                ({ticket.device.assetNumber})
+              </span>
+            )}
+          </div>
+
+          {(ticket.hospital?.name || ticket.department?.name) && (
+            <div className="flex items-center gap-1.5 truncate">
+              <MapPin className="w-3.5 h-3.5 shrink-0 text-slate-500" />
+              <span className="truncate">
+                {ticket.hospital?.name ? `${ticket.hospital.name} / ` : ""}
+                {ticket.department?.name || "Unassigned Dept"}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Waiting for Spare Parts Pill */}
+        {ticket.statusCode === "waiting_parts_vendor" && ticket.waitingReason && (
+          <div className="mb-3 rounded bg-orange-100/80 dark:bg-orange-950/60 px-2.5 py-1.5 text-xs text-orange-950 dark:text-orange-200 border border-orange-200 dark:border-orange-800/60 flex items-center gap-1.5">
+            <Package className="w-3.5 h-3.5 shrink-0 text-orange-600 dark:text-orange-400" />
+            <span className="truncate font-medium">On Order: {ticket.waitingReason}</span>
+          </div>
+        )}
+      </div>
+
+      {/* Footer: Assignee & Date */}
+      <div className="flex items-center justify-between text-xs text-muted-foreground pt-3 border-t border-border/50 mt-1">
+        <div className="flex items-center gap-1.5 truncate">
+          <User className="w-3.5 h-3.5 shrink-0 text-slate-400" />
+          <span className="truncate">
+            {ticket.assignedEngineer?.fullName ? (
+              <span className="text-foreground font-medium">
+                {ticket.assignedEngineer.fullName}
+              </span>
+            ) : ["new", "acknowledged", "in_triage"].includes(ticket.statusCode) ? (
+              <WaitingForEngineerBanner
+                compact
+                reportedAt={ticket.reportedAt || ticket.createdAt || new Date()}
+                reportedImpact={ticket.reportedImpact || undefined}
+              />
+            ) : (
+              <span className="text-rose-600 dark:text-rose-400 font-semibold">
+                Unassigned
+              </span>
+            )}
+          </span>
+        </div>
+        <div className="flex items-center gap-1 text-[11px] shrink-0">
+          <Calendar className="w-3 h-3 text-slate-400" />
+          <span>
+            {new Date(ticket.reportedAt || ticket.createdAt || Date.now()).toLocaleDateString()}
+          </span>
+        </div>
+      </div>
+    </Link>
+  )
+}