@omersx/bemms 0.0.0-stage → 1.0.0

package/src/components/tickets/ticket-dispatch-status.tsx

@@ -0,0 +1,184 @@
+'use client';
+
+import { Clock, UserCheck, Zap } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface WaitingForEngineerBannerProps {
+  /** When the ticket was reported */
+  reportedAt: Date | string;
+  /** The ticket's reported impact level */
+  reportedImpact?: string;
+  /** Whether to show in compact mode (for card lists) */
+  compact?: boolean;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+function getWaitingDuration(reportedAt: Date | string): string {
+  const now = Date.now();
+  const reported = new Date(reportedAt).getTime();
+  const diffMs = now - reported;
+  const minutes = Math.floor(diffMs / (1000 * 60));
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+
+  if (days > 0) return `${days}d ${hours % 24}h`;
+  if (hours > 0) return `${hours}h ${minutes % 60}m`;
+  if (minutes > 0) return `${minutes}m`;
+  return 'just now';
+}
+
+/**
+ * Visual indicator that a ticket is waiting for an engineer to accept it.
+ * Used on ticket cards and ticket detail pages.
+ */
+export function WaitingForEngineerBanner({
+  reportedAt,
+  reportedImpact,
+  compact = false,
+  className,
+  children,
+}: WaitingForEngineerBannerProps) {
+  const waitDuration = getWaitingDuration(reportedAt);
+  const isCritical = reportedImpact === 'patient_care_affected';
+  const isUrgent = reportedImpact === 'device_not_usable' || isCritical;
+
+  if (compact) {
+    return (
+      <div
+        className={cn(
+          'flex items-center gap-1.5 text-xs font-medium',
+          isCritical
+            ? 'text-red-600 dark:text-red-400'
+            : isUrgent
+            ? 'text-amber-600 dark:text-amber-400'
+            : 'text-blue-600 dark:text-blue-400',
+          className,
+        )}
+      >
+        <Clock className="w-3 h-3 animate-pulse" />
+        <span>Waiting for engineer · {waitDuration}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        'rounded-lg border p-4',
+        isCritical
+          ? 'bg-red-50 border-red-300 dark:bg-red-950/30 dark:border-red-800'
+          : isUrgent
+          ? 'bg-amber-50 border-amber-300 dark:bg-amber-950/30 dark:border-amber-800'
+          : 'bg-blue-50 border-blue-200 dark:bg-blue-950/30 dark:border-blue-800',
+        className,
+      )}
+    >
+      <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
+        <div className="flex items-start gap-3 flex-1 min-w-0">
+          <div
+            className={cn(
+              'p-2 rounded-lg shrink-0 mt-0.5 sm:mt-0',
+              isCritical
+                ? 'bg-red-100 dark:bg-red-900/50'
+                : isUrgent
+                ? 'bg-amber-100 dark:bg-amber-900/50'
+                : 'bg-blue-100 dark:bg-blue-900/50',
+            )}
+          >
+            {isCritical ? (
+              <Zap className="w-5 h-5 text-red-600 dark:text-red-400" />
+            ) : (
+              <Clock className="w-5 h-5 text-amber-600 dark:text-amber-400 animate-pulse" />
+            )}
+          </div>
+          <div className="flex-1 min-w-0">
+            <h4
+              className={cn(
+                'font-semibold text-sm',
+                isCritical
+                  ? 'text-red-800 dark:text-red-200'
+                  : isUrgent
+                  ? 'text-amber-800 dark:text-amber-200'
+                  : 'text-blue-800 dark:text-blue-200',
+              )}
+            >
+              {isCritical
+                ? '🚨 URGENT — Waiting for engineer to accept'
+                : '⏳ Waiting for engineer to accept'}
+            </h4>
+            <p
+              className={cn(
+                'text-xs mt-1',
+                isCritical
+                  ? 'text-red-700 dark:text-red-300'
+                  : isUrgent
+                  ? 'text-amber-700 dark:text-amber-300'
+                  : 'text-blue-700 dark:text-blue-300',
+              )}
+            >
+              No engineer has accepted this ticket yet. Waiting for {waitDuration}.
+              {isCritical && ' This ticket affects patient care and requires immediate attention.'}
+            </p>
+          </div>
+        </div>
+        {children && (
+          <div className="shrink-0 self-end sm:self-center pl-10 sm:pl-0">
+            {children}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
+// ── Accepted by Engineer Banner ──────────────────────────────────────────────────
+
+interface AcceptedByEngineerBannerProps {
+  engineerName: string;
+  acceptedAt: Date | string;
+  compact?: boolean;
+  className?: string;
+}
+
+/**
+ * Shows that a ticket has been accepted by an engineer.
+ * Used on the staff ticket view to reassure the reporter.
+ */
+export function AcceptedByEngineerBanner({
+  engineerName,
+  acceptedAt,
+  compact = false,
+  className,
+}: AcceptedByEngineerBannerProps) {
+  const acceptedDate = new Date(acceptedAt);
+  const timeStr = acceptedDate.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  const dateStr = acceptedDate.toLocaleDateString([], { month: 'short', day: 'numeric' });
+
+  if (compact) {
+    return (
+      <div className={cn('flex items-center gap-1.5 text-xs font-medium text-green-600 dark:text-green-400', className)}>
+        <UserCheck className="w-3 h-3" />
+        <span>Accepted by {engineerName}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn('rounded-lg border bg-green-50 border-green-200 dark:bg-green-950/30 dark:border-green-800 p-4', className)}>
+      <div className="flex items-start gap-3">
+        <div className="p-2 rounded-lg bg-green-100 dark:bg-green-900/50 shrink-0">
+          <UserCheck className="w-5 h-5 text-green-600 dark:text-green-400" />
+        </div>
+        <div className="flex-1 min-w-0">
+          <h4 className="font-semibold text-sm text-green-800 dark:text-green-200">
+            ✅ Engineer {engineerName} accepted this ticket
+          </h4>
+          <p className="text-xs text-green-700 dark:text-green-300 mt-1">
+            Accepted on {dateStr} at {timeStr}. Your reported issue is being investigated.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+
+/**
+ * Auto-refreshes the tickets list view when new ticket notifications arrive,
+ * or periodically when the tab is visible.
+ */
+export function TicketListAutoRefresh({ pollIntervalMs = 10000 }: { pollIntervalMs?: number }) {
+  const router = useRouter();
+  const lastRefreshRef = useRef(Date.now());
+
+  const triggerRefresh = () => {
+    const now = Date.now();
+    if (now - lastRefreshRef.current < 3000) return;
+    lastRefreshRef.current = now;
+    router.refresh();
+  };
+
+  useEffect(() => {
+    // 1. Listen for global notification event from NotificationBell
+    const handleNotification = (event: Event) => {
+      const customEvent = event as CustomEvent<any[]>;
+      const notifs = customEvent.detail;
+      if (!Array.isArray(notifs)) return;
+
+      const hasTicketEvent = notifs.some(
+        (n) =>
+          n.relatedEntityType === 'service_ticket' ||
+          (n.notificationType && n.notificationType.startsWith('ticket_'))
+      );
+
+      if (hasTicketEvent) {
+        triggerRefresh();
+      }
+    };
+
+    window.addEventListener('bemms:notification', handleNotification);
+
+    // 2. Periodic refresh when tab is visible
+    const interval = setInterval(() => {
+      if (!document.hidden) {
+        triggerRefresh();
+      }
+    }, pollIntervalMs);
+
+    return () => {
+      window.removeEventListener('bemms:notification', handleNotification);
+      clearInterval(interval);
+    };
+  }, [router, pollIntervalMs]);
+
+  return null;
+}

package/src/components/tickets/ticket-reporter-profile.tsx

@@ -0,0 +1,235 @@
+'use client';
+
+import { useState } from 'react';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import {
+  User,
+  Phone,
+  Mail,
+  Building2,
+  Stethoscope,
+  IdCard,
+  MapPin,
+  ExternalLink,
+  ShieldCheck,
+} from 'lucide-react';
+
+interface ReporterInfo {
+  id?: string;
+  fullName?: string | null;
+  email?: string | null;
+  phone?: string | null;
+  jobTitle?: string | null;
+  employeeIdentifier?: string | null;
+  departmentName?: string | null;
+  hospitalName?: string | null;
+  reportedLocationCorrection?: string | null;
+  requesterContactName?: string | null;
+  requesterContactPhone?: string | null;
+}
+
+interface TicketReporterProfileProps {
+  reporter: ReporterInfo;
+  isBiomedOrAdmin?: boolean;
+}
+
+export function TicketReporterProfile({
+  reporter,
+  isBiomedOrAdmin = false,
+}: TicketReporterProfileProps) {
+  const [open, setOpen] = useState(false);
+
+  const name = reporter.fullName || reporter.requesterContactName || 'Unknown Reporter';
+  const jobTitle = reporter.jobTitle || 'Department Clinical Staff';
+  const phone = reporter.requesterContactPhone || reporter.phone;
+  const extension = reporter.employeeIdentifier;
+  const department = reporter.departmentName || 'Hospital Department';
+  const hospital = reporter.hospitalName || 'Hospital';
+
+  const initials = name
+    .split(' ')
+    .map((n) => n[0])
+    .join('')
+    .substring(0, 2)
+    .toUpperCase();
+
+  return (
+    <div className="space-y-3">
+      {/* ── Reporter Summary Card in Sidebar ──────────────────────────── */}
+      <div className="p-3.5 rounded-xl border bg-muted/20 space-y-3">
+        <div className="flex items-start gap-3">
+          <Avatar className="h-10 w-10 shrink-0 border">
+            <AvatarFallback className="bg-primary/10 text-primary font-bold text-xs">
+              {initials}
+            </AvatarFallback>
+          </Avatar>
+          <div className="min-w-0 flex-1">
+            <p className="font-bold text-sm text-foreground truncate">{name}</p>
+            <p className="text-xs text-muted-foreground flex items-center gap-1 mt-0.5 truncate">
+              <Stethoscope className="w-3 h-3 text-primary shrink-0" />
+              <span>{jobTitle}</span>
+            </p>
+            <p className="text-[11px] text-muted-foreground truncate mt-0.5">
+              {department}
+            </p>
+          </div>
+        </div>
+
+        {/* Quick Call & Email actions */}
+        <div className="space-y-1.5 pt-2 border-t text-xs">
+          {phone && (
+            <a
+              href={`tel:${phone}`}
+              className="flex items-center gap-2 p-1 rounded-md hover:bg-muted text-primary font-medium transition"
+            >
+              <Phone className="w-3.5 h-3.5 text-green-600 shrink-0" />
+              <span className="truncate">{phone}</span>
+            </a>
+          )}
+
+          {extension && (
+            <div className="flex items-center gap-2 p-1 text-muted-foreground">
+              <IdCard className="w-3.5 h-3.5 shrink-0" />
+              <span className="truncate">{extension}</span>
+            </div>
+          )}
+
+          {reporter.email && (
+            <a
+              href={`mailto:${reporter.email}`}
+              className="flex items-center gap-2 p-1 rounded-md hover:bg-muted text-primary font-medium transition"
+            >
+              <Mail className="w-3.5 h-3.5 text-blue-600 shrink-0" />
+              <span className="truncate">{reporter.email}</span>
+            </a>
+          )}
+        </div>
+
+        {/* Dialog Trigger to view full reporter details */}
+        <Dialog open={open} onOpenChange={setOpen}>
+          <DialogTrigger asChild>
+            <Button
+              variant="outline"
+              size="sm"
+              className="w-full text-xs h-8 gap-1.5 bg-card mt-1"
+            >
+              <User className="w-3.5 h-3.5" />
+              View Full Reporter Info
+            </Button>
+          </DialogTrigger>
+
+          <DialogContent className="max-w-md">
+            <DialogHeader>
+              <DialogTitle className="flex items-center gap-2 text-base">
+                <User className="w-4 h-4 text-primary" />
+                Department Reporter Information
+              </DialogTitle>
+            </DialogHeader>
+
+            <div className="space-y-4 pt-2">
+              {/* Header profile */}
+              <div className="flex items-center gap-3.5 p-3 rounded-xl bg-muted/30 border">
+                <Avatar className="h-12 w-12 border shadow-sm">
+                  <AvatarFallback className="bg-primary text-primary-foreground font-bold text-base">
+                    {initials}
+                  </AvatarFallback>
+                </Avatar>
+                <div className="min-w-0 flex-1">
+                  <h4 className="font-bold text-base text-foreground">{name}</h4>
+                  <p className="text-xs text-muted-foreground flex items-center gap-1 font-medium mt-0.5">
+                    <Stethoscope className="w-3.5 h-3.5 text-primary" />
+                    {jobTitle}
+                  </p>
+                </div>
+              </div>
+
+              {/* Detail fields */}
+              <div className="grid grid-cols-2 gap-3 text-xs">
+                <div className="p-3 rounded-xl border bg-card space-y-1">
+                  <span className="text-[10px] text-muted-foreground font-semibold uppercase">
+                    Department
+                  </span>
+                  <p className="font-semibold text-foreground">{department}</p>
+                </div>
+
+                <div className="p-3 rounded-xl border bg-card space-y-1">
+                  <span className="text-[10px] text-muted-foreground font-semibold uppercase">
+                    Hospital
+                  </span>
+                  <p className="font-semibold text-foreground">{hospital}</p>
+                </div>
+
+                <div className="p-3 rounded-xl border bg-card space-y-1">
+                  <span className="text-[10px] text-muted-foreground font-semibold uppercase">
+                    Contact Phone
+                  </span>
+                  <p className="font-medium text-foreground">
+                    {phone ? (
+                      <a href={`tel:${phone}`} className="text-primary hover:underline">
+                        {phone}
+                      </a>
+                    ) : (
+                      'Not provided'
+                    )}
+                  </p>
+                </div>
+
+                <div className="p-3 rounded-xl border bg-card space-y-1">
+                  <span className="text-[10px] text-muted-foreground font-semibold uppercase">
+                    Hospital Extension / Ward
+                  </span>
+                  <p className="font-medium text-foreground">{extension || 'Not provided'}</p>
+                </div>
+              </div>
+
+              {reporter.email && (
+                <div className="p-3 rounded-xl border bg-card text-xs space-y-1">
+                  <span className="text-[10px] text-muted-foreground font-semibold uppercase">
+                    Official Email
+                  </span>
+                  <p className="font-medium text-foreground">
+                    <a href={`mailto:${reporter.email}`} className="text-primary hover:underline">
+                      {reporter.email}
+                    </a>
+                  </p>
+                </div>
+              )}
+
+              {reporter.reportedLocationCorrection && (
+                <div className="p-3 rounded-xl border bg-amber-50/50 dark:bg-amber-950/20 border-amber-200 dark:border-amber-800 text-xs space-y-1">
+                  <span className="text-[10px] text-amber-800 dark:text-amber-300 font-semibold uppercase flex items-center gap-1">
+                    <MapPin className="w-3 h-3" /> Reported Room / Bed Location
+                  </span>
+                  <p className="font-medium text-amber-950 dark:text-amber-100">
+                    {reporter.reportedLocationCorrection}
+                  </p>
+                </div>
+              )}
+
+              {/* Direct call action */}
+              {phone && (
+                <div className="pt-2">
+                  <Button asChild className="w-full gap-2">
+                    <a href={`tel:${phone}`}>
+                      <Phone className="w-4 h-4" />
+                      Call Reporter Now ({phone})
+                    </a>
+                  </Button>
+                </div>
+              )}
+            </div>
+          </DialogContent>
+        </Dialog>
+      </div>
+    </div>
+  );
+}

package/src/components/tickets/ticket-signatures-panel.tsx

@@ -0,0 +1,32 @@
+"use client"
+
+import { SignatureTimeline } from "@/components/maintenance/signature-card"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { ShieldCheck } from "lucide-react"
+
+interface TicketSignaturesPanelProps {
+  signatures: any[]
+}
+
+export function TicketSignaturesPanel({ signatures = [] }: TicketSignaturesPanelProps) {
+  if (!signatures || signatures.length === 0) {
+    return null
+  }
+
+  return (
+    <Card className="border-indigo-100 dark:border-indigo-950/60 bg-gradient-to-b from-indigo-50/20 to-transparent">
+      <CardHeader className="pb-3 border-b border-border/50">
+        <div className="flex items-center gap-2">
+          <ShieldCheck className="w-5 h-5 text-indigo-600 dark:text-indigo-400" />
+          <CardTitle className="text-base font-semibold">
+            Electronic Signatures ({signatures.length})
+          </CardTitle>
+        </div>
+      </CardHeader>
+      <CardContent className="pt-4">
+        <SignatureTimeline signatures={signatures} />
+      </CardContent>
+    </Card>
+  )
+}
+

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

@@ -0,0 +1,131 @@
+import { TicketStatusBadge, TicketPriorityBadge } from "./ticket-badges"
+import { DeviceStatusBadge } from "@/components/devices/device-badges"
+import { User, Calendar } from "lucide-react"
+
+const eventTypeLabels: Record<string, string> = {
+  created: "Ticket Created",
+  acknowledged: "Acknowledged",
+  triaged: "Triaged",
+  assigned: "Assigned to Engineer",
+  reassigned: "Reassigned",
+  accepted: "Accepted by Engineer",
+  status_changed: "Status Changed",
+  priority_changed: "Priority Changed",
+  waiting_for_info: "Waiting for Information",
+  info_received: "Information Received",
+  maintenance_task_linked: "Maintenance Task Linked",
+  resolved: "Resolved",
+  closed: "Closed",
+  cancelled: "Cancelled",
+  reopened: "Reopened",
+}
+
+function getEventDotClass(eventType: string): string {
+  switch (eventType) {
+    case 'status_changed':
+      // Amber/Orange for status updates
+      return 'bg-amber-500 ring-4 ring-amber-100 dark:ring-amber-950/60'
+    case 'waiting_for_info':
+      return 'bg-yellow-500 ring-4 ring-yellow-100 dark:ring-yellow-950/60'
+    case 'reopened':
+      return 'bg-orange-500 ring-4 ring-orange-100 dark:ring-orange-950/60'
+    case 'resolved':
+      return 'bg-emerald-500 ring-4 ring-emerald-100 dark:ring-emerald-950/60'
+    case 'closed':
+      return 'bg-slate-600 ring-4 ring-slate-100 dark:ring-slate-800'
+    case 'cancelled':
+      return 'bg-rose-400 ring-4 ring-rose-100 dark:ring-rose-950/60'
+    case 'created':
+      return 'bg-blue-500 ring-4 ring-blue-100 dark:ring-blue-950/60'
+    case 'acknowledged':
+    case 'triaged':
+      return 'bg-sky-500 ring-4 ring-sky-100 dark:ring-sky-950/60'
+    case 'assigned':
+    case 'reassigned':
+      return 'bg-violet-500 ring-4 ring-violet-100 dark:ring-violet-950/60'
+    case 'accepted':
+      return 'bg-indigo-500 ring-4 ring-indigo-100 dark:ring-indigo-950/60'
+    default:
+      return 'bg-amber-500 ring-4 ring-amber-100 dark:ring-amber-950/60'
+  }
+}
+
+interface TimelineEntry {
+  id: string
+  eventType: string
+  previousValueJsonb?: any
+  newValueJsonb?: any
+  reason?: string | null
+  visibility: string
+  actor?: { fullName: string } | null
+  createdAt: Date | string
+}
+
+export function TicketTimeline({ entries }: { entries: TimelineEntry[] }) {
+  if (!entries || entries.length === 0) {
+    return <p className="text-sm text-muted-foreground py-4">No timeline events recorded.</p>
+  }
+
+  return (
+    <div className="relative">
+      <div className="absolute left-4 top-0 bottom-0 w-px bg-border" />
+      <div className="space-y-6">
+        {entries.map((entry) => (
+          <div key={entry.id} className="relative pl-10">
+            <div
+              className={`absolute left-2.5 top-1.5 w-3 h-3 rounded-full border-2 border-background ${getEventDotClass(
+                entry.eventType
+              )}`}
+            />
+            <div className="space-y-1">
+              <div className="flex items-center gap-2 flex-wrap">
+                <span className="font-medium text-sm">
+                  {eventTypeLabels[entry.eventType] || entry.eventType}
+                </span>
+                {entry.visibility === 'internal' && (
+                  <span className="text-xs bg-amber-100 text-amber-700 px-1.5 py-0.5 rounded font-medium">
+                    Internal
+                  </span>
+                )}
+              </div>
+              {entry.reason && (
+                <p className="text-sm text-foreground">{entry.reason}</p>
+              )}
+              {entry.newValueJsonb && typeof entry.newValueJsonb === 'object' && (
+                <div className="flex items-center gap-1.5 flex-wrap pt-0.5">
+                  {entry.newValueJsonb.statusCode && (
+                    <TicketStatusBadge status={entry.newValueJsonb.statusCode} />
+                  )}
+                  {entry.newValueJsonb.deviceStatusCode && (
+                    <DeviceStatusBadge status={entry.newValueJsonb.deviceStatusCode} />
+                  )}
+                  {entry.newValueJsonb.priorityCode && (
+                    <TicketPriorityBadge priority={entry.newValueJsonb.priorityCode} />
+                  )}
+                  {entry.newValueJsonb.partName && (
+                    <span className="text-xs bg-amber-100 dark:bg-amber-950/60 text-amber-800 dark:text-amber-200 border border-amber-300 dark:border-amber-800 px-2 py-0.5 rounded font-medium inline-flex items-center gap-1">
+                      📦 {entry.newValueJsonb.partName}
+                    </span>
+                  )}
+                </div>
+              )}
+              <div className="flex items-center gap-4 text-xs text-muted-foreground">
+                <span className="flex items-center gap-1">
+                  <Calendar className="w-3 h-3" />
+                  {new Date(entry.createdAt).toLocaleString()}
+                </span>
+                {entry.actor && (
+                  <span className="flex items-center gap-1">
+                    <User className="w-3 h-3" />
+                    {entry.actor.fullName}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+