@omersx/bemms 0.0.0-stage → 1.0.0

package/src/components/devices/device-badges.tsx

@@ -0,0 +1,55 @@
+import { cn } from "@/lib/utils"
+import { Badge } from "@/components/ui/badge"
+
+const statusConfig: Record<string, { label: string; variant: string; className: string }> = {
+  operational: { label: "Operational", variant: "default", className: "bg-green-100 text-green-800 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800" },
+  operational_with_limitations: { label: "Limited Use", variant: "default", className: "bg-amber-100 text-amber-800 border-amber-200 dark:bg-amber-950 dark:text-amber-300 dark:border-amber-800" },
+  under_maintenance: { label: "Under Maintenance", variant: "default", className: "bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-950 dark:text-blue-300 dark:border-blue-800" },
+  under_repair: { label: "Under Repair", variant: "default", className: "bg-orange-100 text-orange-800 border-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800" },
+  waiting_for_parts: { label: "Waiting for Parts", variant: "default", className: "bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800" },
+  awaiting_release: { label: "Awaiting Release", variant: "default", className: "bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-950 dark:text-purple-300 dark:border-purple-800" },
+  out_of_service: { label: "Out of Service", variant: "default", className: "bg-red-100 text-red-800 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800" },
+  standby: { label: "Standby", variant: "default", className: "bg-gray-100 text-gray-800 border-gray-200 dark:bg-gray-800 dark:text-gray-300 dark:border-gray-700" },
+  decommissioned: { label: "Decommissioned", variant: "default", className: "bg-slate-200 text-slate-600 border-slate-300 line-through dark:bg-slate-800 dark:text-slate-400 dark:border-slate-700" },
+}
+
+const criticalityConfig: Record<string, { label: string; className: string }> = {
+  critical: { label: "Critical", className: "bg-red-100 text-red-800 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800" },
+  high: { label: "High", className: "bg-orange-100 text-orange-800 border-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800" },
+  medium: { label: "Medium", className: "bg-yellow-100 text-yellow-800 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800" },
+  low: { label: "Low", className: "bg-green-100 text-green-800 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800" },
+}
+
+const riskConfig: Record<string, { label: string; className: string }> = {
+  class_i: { label: "Class I", className: "bg-green-50 text-green-700 border-green-200 dark:bg-green-950 dark:text-green-300 dark:border-green-800" },
+  class_iia: { label: "Class IIa", className: "bg-yellow-50 text-yellow-700 border-yellow-200 dark:bg-yellow-950 dark:text-yellow-300 dark:border-yellow-800" },
+  class_iib: { label: "Class IIb", className: "bg-orange-50 text-orange-700 border-orange-200 dark:bg-orange-950 dark:text-orange-300 dark:border-orange-800" },
+  class_iii: { label: "Class III", className: "bg-red-50 text-red-700 border-red-200 dark:bg-red-950 dark:text-red-300 dark:border-red-800" },
+}
+
+export function DeviceStatusBadge({ status }: { status?: string | null }) {
+  const config = statusConfig[status || ''] || { label: status || 'Unknown', variant: 'secondary', className: 'bg-muted text-muted-foreground' }
+  return (
+    <Badge variant="outline" className={cn("font-medium", config.className)}>
+      {config.label}
+    </Badge>
+  )
+}
+
+export function CriticalityBadge({ level }: { level?: string | null }) {
+  const config = criticalityConfig[level || ''] || { label: level || '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 RiskClassBadge({ classification }: { classification?: string | null }) {
+  const config = riskConfig[classification || ''] || { label: classification || '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/devices/device-documents-tab.tsx

@@ -0,0 +1,93 @@
+"use client"
+
+import { FileText, Download } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+interface DeviceDocumentsTabProps {
+  documents: any[];
+  deviceId: string;
+}
+
+const formatSize = (bytes: number) => {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
+}
+
+const categoryLabels: Record<string, string> = {
+  user_manual: "User Manual",
+  service_manual: "Service Manual",
+  certificate: "Certificate",
+  calibration_report: "Calibration Report",
+  photo: "Photo",
+  other: "Other"
+}
+
+export function DeviceDocumentsTab({ documents, deviceId }: DeviceDocumentsTabProps) {
+  return (
+    <div className="space-y-4">
+      <div className="flex justify-between items-center">
+        <h3 className="text-lg font-semibold">Device Documents</h3>
+        <Button variant="outline" size="sm" disabled>
+          Upload Document
+        </Button>
+      </div>
+
+      {(!documents || documents.length === 0) ? (
+        <div className="text-center py-12 border rounded-lg bg-muted/20">
+          <FileText className="w-12 h-12 text-muted-foreground mx-auto mb-4 opacity-50" />
+          <h4 className="text-lg font-medium text-foreground">No documents found</h4>
+          <p className="text-muted-foreground text-sm mt-1">Upload manuals, certificates, and other device documentation here.</p>
+        </div>
+      ) : (
+        <div className="border rounded-md">
+          <div className="grid grid-cols-12 gap-4 p-4 border-b bg-muted/50 font-medium text-sm">
+            <div className="col-span-4">File Name</div>
+            <div className="col-span-2">Category</div>
+            <div className="col-span-2">Size</div>
+            <div className="col-span-2">Visibility</div>
+            <div className="col-span-2 text-right">Actions</div>
+          </div>
+          <div className="divide-y">
+            {documents.map((doc) => (
+              <div key={doc.id} className="grid grid-cols-12 gap-4 p-4 items-center text-sm hover:bg-muted/20 transition-colors">
+                <div className="col-span-4 font-medium flex items-center gap-2 truncate">
+                  <FileText className="w-4 h-4 text-muted-foreground flex-shrink-0" />
+                  <span className="truncate">{doc.fileName}</span>
+                </div>
+                <div className="col-span-2">
+                  <Badge variant="secondary" className="font-normal">
+                    {categoryLabels[doc.category] || doc.category}
+                  </Badge>
+                </div>
+                <div className="col-span-2 text-muted-foreground">
+                  {formatSize(doc.fileSize)}
+                </div>
+                <div className="col-span-2">
+                  <Badge variant="outline" className={cn(
+                    "font-normal capitalize",
+                    doc.visibility === 'biomedical_only' ? 'text-purple-700 bg-purple-50 border-purple-200' : 'text-green-700 bg-green-50 border-green-200'
+                  )}>
+                    {doc.visibility.replace('_', ' ')}
+                  </Badge>
+                </div>
+                <div className="col-span-2 text-right">
+                  <Button variant="ghost" size="icon" title="Download">
+                    <Download className="w-4 h-4" />
+                    <span className="sr-only">Download</span>
+                  </Button>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
+

package/src/components/devices/device-maintenance-tab.tsx

@@ -0,0 +1,113 @@
+"use client"
+
+import Link from "next/link"
+import { Wrench } from "lucide-react"
+import { Card } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+
+interface DeviceMaintenanceTabProps {
+  maintenanceTasks: any[];
+  deviceId: string;
+}
+
+const statusColors: Record<string, string> = {
+  draft: "bg-gray-100 text-gray-800 border-gray-200",
+  scheduled: "bg-blue-100 text-blue-800 border-blue-200",
+  assigned: "bg-indigo-100 text-indigo-800 border-indigo-200",
+  in_progress: "bg-yellow-100 text-yellow-800 border-yellow-200",
+  work_complete: "bg-emerald-100 text-emerald-800 border-emerald-200",
+  awaiting_review: "bg-purple-100 text-purple-800 border-purple-200",
+  awaiting_release: "bg-orange-100 text-orange-800 border-orange-200",
+  returned_for_rework: "bg-rose-100 text-rose-800 border-rose-200",
+  closed: "bg-green-100 text-green-800 border-green-200",
+  cancelled: "bg-gray-100 text-gray-800 border-gray-200",
+}
+
+export function DeviceMaintenanceTab({ maintenanceTasks = [], deviceId }: DeviceMaintenanceTabProps) {
+  const total = maintenanceTasks.length
+  const completed = maintenanceTasks.filter(t => (t.statusCode || t.status) === "closed").length
+  const pending = total - completed
+  const overdue = maintenanceTasks.filter(t => t.dueDate && new Date(t.dueDate) < new Date() && (t.statusCode || t.status) !== "closed").length
+
+  return (
+    <div className="space-y-6">
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-4">
+        <Card className="p-4 flex flex-col items-center justify-center text-center">
+          <span className="text-2xl font-bold">{total}</span>
+          <span className="text-sm text-muted-foreground">Total Tasks</span>
+        </Card>
+        <Card className="p-4 flex flex-col items-center justify-center text-center">
+          <span className="text-2xl font-bold text-emerald-600">{completed}</span>
+          <span className="text-sm text-muted-foreground">Completed</span>
+        </Card>
+        <Card className="p-4 flex flex-col items-center justify-center text-center">
+          <span className="text-2xl font-bold text-blue-600">{pending}</span>
+          <span className="text-sm text-muted-foreground">Pending</span>
+        </Card>
+        <Card className="p-4 flex flex-col items-center justify-center text-center">
+          <span className="text-2xl font-bold text-rose-600">{overdue}</span>
+          <span className="text-sm text-muted-foreground">Overdue</span>
+        </Card>
+      </div>
+
+      <div className="space-y-4">
+        <h3 className="text-lg font-semibold">Maintenance History</h3>
+        
+        {maintenanceTasks.length === 0 ? (
+          <div className="text-center py-12 border rounded-lg bg-muted/20">
+            <Wrench className="w-12 h-12 text-muted-foreground mx-auto mb-4 opacity-50" />
+            <h4 className="text-lg font-medium text-foreground">No maintenance records</h4>
+            <p className="text-muted-foreground text-sm mt-1">This device has no recorded maintenance history.</p>
+          </div>
+        ) : (
+          <div className="grid gap-3">
+            {maintenanceTasks.map(task => {
+              const statusKey = task.statusCode || task.status || "draft"
+              const typeLabel = (task.maintenanceType || task.type || "corrective").replace(/_/g, " ")
+              const assigneeName = task.assignedEngineer?.fullName || task.assignedEngineerName || "Unassigned"
+              const completedDate = task.completedAt || task.completedDate
+              const startDate = task.startedAt || task.startDate
+              const dueDate = task.dueDate
+
+              return (
+                <Link key={task.id} href={`/maintenance/tasks/${task.id}`}>
+                  <Card className="p-4 hover:bg-muted/50 transition-colors flex flex-col sm:flex-row sm:items-center justify-between gap-4">
+                    <div className="space-y-1">
+                      <div className="flex items-center gap-2">
+                        <span className="font-mono text-sm text-muted-foreground">#{task.taskNumber}</span>
+                        <span className="font-medium">{task.title}</span>
+                      </div>
+                      <div className="text-sm text-muted-foreground">
+                        Assigned to: {assigneeName}
+                      </div>
+                    </div>
+                    
+                    <div className="flex flex-wrap sm:flex-nowrap items-center gap-2">
+                      <Badge variant="outline" className="capitalize">{typeLabel}</Badge>
+                      <Badge variant="outline" className={cn("capitalize", statusColors[statusKey] || statusColors.draft)}>
+                        {statusKey.replace(/_/g, " ")}
+                      </Badge>
+                      <div className="text-xs text-muted-foreground sm:text-right sm:w-28">
+                        {completedDate ? (
+                          <span>Done: {new Date(completedDate).toLocaleDateString()}</span>
+                        ) : startDate ? (
+                          <span>Started: {new Date(startDate).toLocaleDateString()}</span>
+                        ) : dueDate ? (
+                          <span>Due: {new Date(dueDate).toLocaleDateString()}</span>
+                        ) : (
+                          <span>—</span>
+                        )}
+                      </div>
+                    </div>
+                  </Card>
+                </Link>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+

package/src/components/devices/device-mini-qr.tsx

@@ -0,0 +1,109 @@
+"use client"
+
+import * as React from "react"
+import { QRCodeCanvas } from "qrcode.react"
+import { QrCode, ExternalLink, Copy, Check } from "lucide-react"
+import Link from "next/link"
+import { toast } from "sonner"
+
+interface DeviceMiniQrProps {
+  deviceId: string
+  opaqueReference: string
+  assetNumber?: string
+  deviceName?: string
+}
+
+export function DeviceMiniQr({
+  deviceId,
+  opaqueReference,
+  assetNumber,
+  deviceName,
+}: DeviceMiniQrProps) {
+  const [origin, setOrigin] = React.useState("")
+  const [copied, setCopied] = React.useState(false)
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      setOrigin(window.location.origin)
+    }
+  }, [])
+
+  const scanUrl = `${origin || ""}/scan/${opaqueReference}`
+
+  const handleCopy = async (e: React.MouseEvent) => {
+    e.preventDefault()
+    e.stopPropagation()
+    try {
+      await navigator.clipboard.writeText(scanUrl)
+      setCopied(true)
+      toast.success("Scan link copied to clipboard")
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      toast.error("Failed to copy link")
+    }
+  }
+
+  return (
+    <div className="flex items-center gap-3.5 p-3 rounded-lg border bg-muted/40 hover:bg-muted/60 transition-colors">
+      {/* Mini QR Canvas with clickable link to print page */}
+      <Link
+        href={`/devices/${deviceId}/qr`}
+        className="bg-white p-1.5 rounded-md border shadow-2xs shrink-0 hover:ring-2 hover:ring-primary/40 transition-all cursor-pointer group"
+        title="Click to view & print full label"
+      >
+        <QRCodeCanvas
+          value={scanUrl}
+          size={72}
+          level="M"
+          includeMargin={false}
+        />
+      </Link>
+
+      {/* Info & quick actions */}
+      <div className="flex-1 min-w-0 space-y-1">
+        <div className="flex items-center justify-between gap-1">
+          <div className="flex items-center gap-1.5 text-xs font-semibold text-foreground">
+            <QrCode className="w-3.5 h-3.5 text-primary" />
+            <span>Device QR Label</span>
+          </div>
+          <span className="font-mono text-[11px] text-muted-foreground bg-background px-1.5 py-0.5 rounded border">
+            {opaqueReference}
+          </span>
+        </div>
+
+        <p className="text-[11px] text-muted-foreground leading-tight">
+          Scan to access quick helpdesk &amp; status
+        </p>
+
+        <div className="pt-1 flex items-center gap-3 text-xs">
+          <Link
+            href={`/devices/${deviceId}/qr`}
+            className="text-primary hover:underline font-medium inline-flex items-center gap-1 text-[11px]"
+          >
+            <span>View &amp; Print</span>
+            <ExternalLink className="w-3 h-3" />
+          </Link>
+
+          <button
+            type="button"
+            onClick={handleCopy}
+            className="text-muted-foreground hover:text-foreground inline-flex items-center gap-1 text-[11px] transition-colors"
+          >
+            {copied ? (
+              <>
+                <Check className="w-3 h-3 text-emerald-600" />
+                <span className="text-emerald-600 font-medium">Copied</span>
+              </>
+            ) : (
+              <>
+                <Copy className="w-3 h-3" />
+                <span>Copy Link</span>
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
+

package/src/components/devices/device-qr-card.tsx

@@ -0,0 +1,187 @@
+"use client"
+
+import * as React from "react"
+import { QrCodeDisplay } from "./qr-code-display"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Printer, RefreshCw, QrCode } from "lucide-react"
+import { generateNewQrLabel, recordQrPrint } from "@/lib/actions/qr"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+
+export interface DeviceQrCardProps {
+  device: {
+    id: string;
+    name: string;
+    internalCode: string;
+    assetNumber: string;
+    hospital?: { name?: string } | null;
+    department?: { name?: string } | null;
+  };
+  qrLabel: {
+    id: string;
+    opaqueReference: string;
+    labelStatus: string;
+    printCount?: number | null;
+  } | null;
+}
+
+export function DeviceQrCard({ device, qrLabel }: DeviceQrCardProps) {
+  const router = useRouter()
+  const [isGenerating, setIsGenerating] = React.useState(false)
+
+  // Construct absolute URL for the QR code target
+  const [origin, setOrigin] = React.useState("")
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      setOrigin(window.location.origin)
+    }
+  }, [])
+
+  const scanTargetUrl = qrLabel
+    ? `${origin || ""}/scan/${qrLabel.opaqueReference}`
+    : ""
+
+  const handlePrint = async () => {
+    if (qrLabel?.id) {
+      await recordQrPrint(qrLabel.id)
+    }
+    window.print()
+  }
+
+  const handleRegenerate = async () => {
+    if (!confirm("Are you sure you want to regenerate this QR label? The previous QR code will be revoked.")) {
+      return
+    }
+
+    setIsGenerating(true)
+    try {
+      const res = await generateNewQrLabel(device.id, "User requested label replacement")
+      if (res.success) {
+        toast.success("New QR label generated successfully")
+        router.refresh()
+      } else {
+        toast.error((res as any).error || "Failed to generate QR label")
+      }
+    } catch {
+      toast.error("An unexpected error occurred")
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  return (
+    <div className="grid gap-6 md:grid-cols-2 print:grid-cols-1">
+      {/* 1. Main QR Code & Actions Card */}
+      <Card className="print:hidden">
+        <CardHeader>
+          <CardTitle className="text-base flex items-center gap-2">
+            <QrCode className="w-5 h-5 text-primary" />
+            Active QR Code
+          </CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center gap-5">
+          {qrLabel ? (
+            <>
+              <QrCodeDisplay
+                value={scanTargetUrl || qrLabel.opaqueReference}
+                size={220}
+                assetNumber={device.assetNumber}
+                deviceName={device.name}
+              />
+
+              <div className="flex flex-wrap gap-2 justify-center w-full pt-2 border-t">
+                <Button variant="default" size="sm" onClick={handlePrint} className="gap-1.5">
+                  <Printer className="w-4 h-4" /> Print Label
+                </Button>
+                <Button
+                  variant="outline"
+                  size="sm"
+                  onClick={handleRegenerate}
+                  disabled={isGenerating}
+                  className="gap-1.5"
+                >
+                  <RefreshCw className={`w-4 h-4 ${isGenerating ? "animate-spin" : ""}`} />
+                  Regenerate
+                </Button>
+              </div>
+
+              <div className="text-xs text-muted-foreground space-y-1 text-center">
+                <p>
+                  Opaque Reference: <span className="font-mono font-medium text-foreground">{qrLabel.opaqueReference}</span>
+                </p>
+                <p>Status: <span className="capitalize font-medium text-emerald-600 dark:text-emerald-400">{qrLabel.labelStatus}</span></p>
+                <p>Print Count: {qrLabel.printCount || 0}</p>
+              </div>
+            </>
+          ) : (
+            <div className="text-center py-8">
+              <p className="text-muted-foreground mb-4">No active QR label for this device.</p>
+              <Button onClick={handleRegenerate} disabled={isGenerating}>
+                <RefreshCw className="w-4 h-4 mr-2" /> Generate QR Label
+              </Button>
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* 2. Physical Thermal Label Preview (50mm x 30mm format) */}
+      <Card>
+        <CardHeader className="print:hidden">
+          <CardTitle className="text-base">Thermal Label Preview (50 × 30mm)</CardTitle>
+        </CardHeader>
+        <CardContent className="flex flex-col items-center justify-center p-6">
+          <div
+            id="printable-qr-label"
+            className="w-[280px] border-2 border-slate-900 rounded-lg p-3.5 bg-white text-slate-900 shadow-md flex flex-col justify-between aspect-[5/3]"
+          >
+            <div className="border-b pb-1">
+              <p className="text-[10px] font-semibold uppercase tracking-wider text-slate-500 truncate">
+                {device.hospital?.name || "Biomedical Engineering"}
+              </p>
+              <p className="text-sm font-bold truncate leading-tight mt-0.5">{device.name}</p>
+            </div>
+
+            <div className="flex items-center justify-between gap-2 my-1">
+              <div className="space-y-0.5">
+                <p className="text-[11px] font-mono font-bold tracking-tight">
+                  {device.assetNumber}
+                </p>
+                <p className="text-[9px] text-slate-600 font-mono">
+                  {device.internalCode}
+                </p>
+                <p className="text-[8px] text-slate-500 truncate max-w-[120px]">
+                  {device.department?.name || "General"}
+                </p>
+              </div>
+
+              {qrLabel ? (
+                <div className="p-1 bg-white shrink-0">
+                  <QrCodeDisplay
+                    value={scanTargetUrl || qrLabel.opaqueReference}
+                    size={64}
+                    showDownloadOptions={false}
+                  />
+                </div>
+              ) : (
+                <div className="w-16 h-16 bg-slate-100 flex items-center justify-center rounded text-[10px] text-slate-400">
+                  QR
+                </div>
+              )}
+            </div>
+
+            <div className="border-t pt-1 flex items-center justify-between text-[8px] text-slate-500">
+              <span>Scan to view status or report</span>
+              <span className="font-mono">{qrLabel?.opaqueReference.slice(0, 8)}</span>
+            </div>
+          </div>
+
+          <p className="text-xs text-muted-foreground mt-4 text-center print:hidden">
+            Optimized for 50mm × 30mm thermal label printers (Brother, Zebra, Dymo).
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+