@omersx/bemms 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,139 @@
+"use client"
+
+import Link from "next/link"
+import { Ticket, Plus, AlertCircle, Clock, CheckCircle2, User, ChevronRight } from "lucide-react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { TicketStatusBadge, TicketPriorityBadge } from "@/components/tickets/ticket-badges"
+
+interface DeviceTicketsTabProps {
+  tickets: any[]
+  deviceId: string
+  deviceName: string
+}
+
+export function DeviceTicketsTab({ tickets = [], deviceId, deviceName }: DeviceTicketsTabProps) {
+  const total = tickets.length
+  const openCount = tickets.filter(t => !["resolved", "closed", "cancelled"].includes(t.statusCode)).length
+  const inProgressCount = tickets.filter(t => t.statusCode === "in_progress").length
+  const resolvedCount = tickets.filter(t => ["resolved", "closed"].includes(t.statusCode)).length
+
+  return (
+    <div className="space-y-6">
+      {/* 1. Summary Metrics */}
+      <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-xs text-muted-foreground mt-0.5">Total Tickets</span>
+        </Card>
+        <Card className="p-4 flex flex-col items-center justify-center text-center">
+          <span className="text-2xl font-bold text-amber-600">{openCount}</span>
+          <span className="text-xs text-muted-foreground mt-0.5">Open / Active</span>
+        </Card>
+        <Card className="p-4 flex flex-col items-center justify-center text-center">
+          <span className="text-2xl font-bold text-blue-600">{inProgressCount}</span>
+          <span className="text-xs text-muted-foreground mt-0.5">In Progress</span>
+        </Card>
+        <Card className="p-4 flex flex-col items-center justify-center text-center">
+          <span className="text-2xl font-bold text-emerald-600">{resolvedCount}</span>
+          <span className="text-xs text-muted-foreground mt-0.5">Resolved / Closed</span>
+        </Card>
+      </div>
+
+      {/* 2. Ticket History Section Header & Action */}
+      <div className="flex items-center justify-between">
+        <div>
+          <h3 className="text-base font-semibold">Service &amp; Problem History</h3>
+          <p className="text-xs text-muted-foreground">
+            All incident reports and service tickets submitted for this device
+          </p>
+        </div>
+        <Button asChild size="sm" className="gap-1.5">
+          <Link href={`/tickets/create?deviceId=${deviceId}&source=device_profile`}>
+            <Plus className="w-4 h-4" />
+            Report a Problem
+          </Link>
+        </Button>
+      </div>
+
+      {/* 3. Ticket List */}
+      {tickets.length === 0 ? (
+        <div className="text-center py-12 border rounded-lg bg-muted/20 space-y-3">
+          <Ticket className="w-12 h-12 text-muted-foreground mx-auto opacity-40" />
+          <div>
+            <h4 className="text-sm font-medium text-foreground">No Tickets Reported</h4>
+            <p className="text-xs text-muted-foreground max-w-sm mx-auto mt-1">
+              This equipment currently has no reported problems or maintenance tickets in the registry.
+            </p>
+          </div>
+          <Button asChild variant="outline" size="sm" className="mt-2">
+            <Link href={`/tickets/create?deviceId=${deviceId}&source=device_profile`}>
+              <Plus className="w-4 h-4 mr-1.5" />
+              Report First Ticket
+            </Link>
+          </Button>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {tickets.map((ticket) => {
+            const reportedDate = ticket.reportedAt || ticket.createdAt
+            const formattedDate = reportedDate
+              ? new Date(reportedDate).toISOString().replace("T", " ").substring(0, 16)
+              : "Unknown date"
+
+            return (
+              <Link
+                key={ticket.id}
+                href={`/tickets/${ticket.id}`}
+                className="block group"
+              >
+                <Card className="transition-all hover:border-primary/50 hover:shadow-xs">
+                  <CardContent className="p-4 sm:p-5">
+                    <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                      {/* Left: Info */}
+                      <div className="space-y-1.5 flex-1 min-w-0">
+                        <div className="flex items-center gap-2 flex-wrap">
+                          <span className="font-mono text-xs font-semibold text-primary">
+                            {ticket.ticketNumber}
+                          </span>
+                          <TicketPriorityBadge priority={ticket.priorityCode} />
+                          <TicketStatusBadge status={ticket.statusCode} />
+                        </div>
+                        <h4 className="font-medium text-sm text-foreground group-hover:text-primary transition-colors line-clamp-1">
+                          {ticket.title}
+                        </h4>
+                        {ticket.description && (
+                          <p className="text-xs text-muted-foreground line-clamp-2">
+                            {ticket.description}
+                          </p>
+                        )}
+                      </div>
+
+                      {/* Right: Meta & Arrow */}
+                      <div className="flex sm:flex-col items-center sm:items-end justify-between sm:justify-center text-xs text-muted-foreground shrink-0 border-t sm:border-t-0 pt-2 sm:pt-0 gap-1.5">
+                        <div className="flex items-center gap-1">
+                          <Clock className="w-3.5 h-3.5" />
+                          <span suppressHydrationWarning>{formattedDate} UTC</span>
+                        </div>
+                        {ticket.assignedEngineer?.fullName && (
+                          <div className="flex items-center gap-1 text-foreground/80">
+                            <User className="w-3.5 h-3.5 text-muted-foreground" />
+                            <span>{ticket.assignedEngineer.fullName}</span>
+                          </div>
+                        )}
+                        <span className="text-primary group-hover:translate-x-0.5 transition-transform hidden sm:inline-flex items-center gap-0.5 text-xs font-medium">
+                          View details <ChevronRight className="w-3.5 h-3.5" />
+                        </span>
+                      </div>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Link>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+

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

@@ -0,0 +1,124 @@
+import { DeviceStatusBadge } from "./device-badges"
+import { User, Calendar } from "lucide-react"
+
+interface StatusEntry {
+  id: string
+  previousStatusCode?: string | null
+  newStatusCode: string
+  reason?: string | null
+  notes?: string | null
+  effectiveAt: Date | string
+  changedByUser?: { fullName: string } | null
+}
+
+interface LocationEntry {
+  id: string
+  newHospital?: { name: string } | null
+  newDepartment?: { name: string } | null
+  transferReason: string
+  notes?: string | null
+  effectiveAt: Date | string
+  changedByUser?: { fullName: string } | null
+}
+
+export function DeviceStatusTimeline({ entries }: { entries: StatusEntry[] }) {
+  if (!entries || entries.length === 0) {
+    return <p className="text-sm text-muted-foreground py-4">No status history 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 bg-primary border-2 border-background" />
+            <div className="space-y-1">
+              <div className="flex items-center gap-2 flex-wrap">
+                {entry.previousStatusCode && (
+                  <>
+                    <DeviceStatusBadge status={entry.previousStatusCode} />
+                    <span className="text-muted-foreground">→</span>
+                  </>
+                )}
+                <DeviceStatusBadge status={entry.newStatusCode} />
+              </div>
+              {entry.reason && (
+                <p className="text-sm text-foreground">{entry.reason}</p>
+              )}
+              {entry.notes && (
+                <p className="text-xs text-muted-foreground italic">{entry.notes}</p>
+              )}
+              <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.effectiveAt).toLocaleString()}
+                </span>
+                {entry.changedByUser && (
+                  <span className="flex items-center gap-1">
+                    <User className="w-3 h-3" />
+                    {entry.changedByUser.fullName}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+const transferReasonLabels: Record<string, string> = {
+  relocation: "Relocation",
+  temporary_loan: "Temporary Loan",
+  department_change: "Department Change",
+  correction: "Correction",
+  replacement: "Replacement",
+  workshop: "To Workshop",
+  storage: "To Storage",
+  other: "Other",
+}
+
+export function DeviceLocationTimeline({ entries }: { entries: LocationEntry[] }) {
+  if (!entries || entries.length === 0) {
+    return <p className="text-sm text-muted-foreground py-4">No location history 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 bg-blue-500 border-2 border-background" />
+            <div className="space-y-1">
+              <p className="text-sm font-medium">
+                {entry.newHospital?.name || "Unknown Hospital"} — {entry.newDepartment?.name || "Unknown Department"}
+              </p>
+              <p className="text-xs text-muted-foreground">
+                Reason: {transferReasonLabels[entry.transferReason] || entry.transferReason}
+              </p>
+              {entry.notes && (
+                <p className="text-xs text-muted-foreground italic">{entry.notes}</p>
+              )}
+              <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.effectiveAt).toLocaleString()}
+                </span>
+                {entry.changedByUser && (
+                  <span className="flex items-center gap-1">
+                    <User className="w-3 h-3" />
+                    {entry.changedByUser.fullName}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+

package/src/components/devices/qr-camera-scanner.tsx

@@ -0,0 +1,167 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { Camera, CameraOff, QrCode, Loader2 } from "lucide-react"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+import { playQrBeep, unlockAudio } from "@/lib/utils/sound"
+
+export function QrCameraScanner() {
+  const router = useRouter()
+  const [isScanning, setIsScanning] = React.useState(false)
+  const [hasCamera, setHasCamera] = React.useState<boolean | null>(null)
+  const [errorMsg, setErrorMsg] = React.useState<string | null>(null)
+  const scannerRef = React.useRef<any>(null)
+
+  // Handle scanned text
+  const handleScanSuccess = React.useCallback(
+    (decodedText: string) => {
+      // Stop scanner immediately
+      if (scannerRef.current) {
+        scannerRef.current.clear().catch(() => {})
+      }
+      setIsScanning(false)
+
+      // Play beep sound to indicate successful capture (works on native devices)
+      playQrBeep()
+
+      toast.success("QR Code detected!")
+
+      // Process decoded text
+      const cleanText = decodedText.trim()
+
+      // 1. If it's a full URL containing /scan/
+      if (cleanText.includes("/scan/")) {
+        const parts = cleanText.split("/scan/")
+        const code = parts[parts.length - 1].split("?")[0].replace(/\/$/, "")
+        router.push(`/scan/${code}`)
+        return
+      }
+
+      // 2. If it's directly an opaque reference
+      if (cleanText.startsWith("dv_")) {
+        router.push(`/scan/${cleanText}`)
+        return
+      }
+
+      // 3. Fallback: Search by asset number
+      router.push(`/devices?search=${encodeURIComponent(cleanText)}`)
+    },
+    [router]
+  )
+
+  const startScanner = async () => {
+    setErrorMsg(null)
+    setIsScanning(true)
+
+    // Unlock Web Audio on user gesture so beep can play on mobile devices
+    unlockAudio()
+
+    try {
+      const { Html5QrcodeScanner } = await import("html5-qrcode")
+
+      // Small delay to ensure the container div exists
+      setTimeout(() => {
+        try {
+          const scanner = new Html5QrcodeScanner(
+            "bemms-qr-reader",
+            {
+              fps: 10,
+              qrbox: { width: 250, height: 250 },
+              aspectRatio: 1.0,
+              showTorchButtonIfSupported: true,
+            },
+            false
+          )
+
+          scannerRef.current = scanner
+
+          scanner.render(
+            (decodedText) => handleScanSuccess(decodedText),
+            (error) => {
+              // Non-fatal scanning frames error, can be safely ignored
+            }
+          )
+        } catch (err: any) {
+          setErrorMsg(err.message || "Failed to initialize camera")
+          setIsScanning(false)
+        }
+      }, 100)
+    } catch (err: any) {
+      setErrorMsg("Camera scanner library could not be loaded")
+      setIsScanning(false)
+    }
+  }
+
+  const stopScanner = () => {
+    if (scannerRef.current) {
+      scannerRef.current.clear().catch(() => {})
+      scannerRef.current = null
+    }
+    setIsScanning(false)
+  }
+
+  React.useEffect(() => {
+    return () => {
+      if (scannerRef.current) {
+        scannerRef.current.clear().catch(() => {})
+      }
+    }
+  }, [])
+
+  return (
+    <div className="space-y-4">
+      {/* Scanner Viewport Container */}
+      <div className="relative aspect-square max-w-sm mx-auto bg-muted rounded-xl flex flex-col items-center justify-center border-2 border-dashed overflow-hidden">
+        {isScanning ? (
+          <div id="bemms-qr-reader" className="w-full h-full" />
+        ) : (
+          <div className="flex flex-col items-center justify-center p-6 text-center gap-3">
+            <div className="h-16 w-16 rounded-full bg-primary/10 text-primary flex items-center justify-center">
+              <QrCode className="w-8 h-8" />
+            </div>
+            <div className="space-y-1">
+              <p className="font-semibold text-sm">Camera QR Scanner</p>
+              <p className="text-xs text-muted-foreground max-w-xs">
+                Position the BEMMS device QR code within camera view to open the profile.
+              </p>
+            </div>
+
+            {errorMsg && (
+              <p className="text-xs text-destructive font-medium px-2 bg-destructive/10 py-1 rounded">
+                {errorMsg}
+              </p>
+            )}
+
+            <Button
+              type="button"
+              variant="default"
+              onClick={startScanner}
+              className="mt-2 gap-2"
+            >
+              <Camera className="w-4 h-4" />
+              Enable Camera
+            </Button>
+          </div>
+        )}
+      </div>
+
+      {isScanning && (
+        <div className="flex justify-center">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={stopScanner}
+            className="gap-2 text-destructive hover:bg-destructive/10"
+          >
+            <CameraOff className="w-4 h-4" />
+            Stop Camera
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+

package/src/components/devices/qr-code-display.tsx

@@ -0,0 +1,139 @@
+"use client"
+
+import * as React from "react"
+import { QRCodeCanvas, QRCodeSVG } from "qrcode.react"
+import { Button } from "@/components/ui/button"
+import { Download, Copy, Check, QrCode } from "lucide-react"
+import { toast } from "sonner"
+import { cn } from "@/lib/utils"
+
+export interface QrCodeDisplayProps {
+  value: string;
+  size?: number;
+  assetNumber?: string;
+  deviceName?: string;
+  className?: string;
+  showDownloadOptions?: boolean;
+}
+
+export function QrCodeDisplay({
+  value,
+  size = 200,
+  assetNumber = "device",
+  deviceName = "Medical Device",
+  className,
+  showDownloadOptions = true,
+}: QrCodeDisplayProps) {
+  const [copied, setCopied] = React.useState(false)
+  const canvasRef = React.useRef<HTMLDivElement>(null)
+
+  const handleDownloadPng = () => {
+    if (!canvasRef.current) return
+    const canvas = canvasRef.current.querySelector("canvas")
+    if (!canvas) {
+      toast.error("Could not find QR canvas element")
+      return
+    }
+
+    try {
+      // Create full printable resolution image with border & label
+      const padding = 24
+      const textHeight = 48
+      const exportCanvas = document.createElement("canvas")
+      exportCanvas.width = canvas.width + padding * 2
+      exportCanvas.height = canvas.height + padding * 2 + textHeight
+      const ctx = exportCanvas.getContext("2d")
+
+      if (ctx) {
+        // Fill white background
+        ctx.fillStyle = "#ffffff"
+        ctx.fillRect(0, 0, exportCanvas.width, exportCanvas.height)
+
+        // Draw QR
+        ctx.drawImage(canvas, padding, padding)
+
+        // Draw label text
+        ctx.fillStyle = "#0f172a"
+        ctx.font = "bold 14px sans-serif"
+        ctx.textAlign = "center"
+        ctx.fillText(assetNumber, exportCanvas.width / 2, canvas.height + padding + 18)
+
+        ctx.fillStyle = "#64748b"
+        ctx.font = "11px sans-serif"
+        ctx.fillText(deviceName.slice(0, 30), exportCanvas.width / 2, canvas.height + padding + 36)
+
+        const link = document.createElement("a")
+        const safeName = assetNumber.replace(/[^a-zA-Z0-9_-]/g, "_")
+        link.download = `BEMMS_QR_${safeName}.png`
+        link.href = exportCanvas.toDataURL("image/png")
+        link.click()
+        toast.success("QR code image downloaded successfully")
+      }
+    } catch (err: any) {
+      toast.error("Failed to download image: " + err.message)
+    }
+  }
+
+  const handleCopyUrl = async () => {
+    try {
+      await navigator.clipboard.writeText(value)
+      setCopied(true)
+      toast.success("QR URL copied to clipboard")
+      setTimeout(() => setCopied(false), 2000)
+    } catch {
+      toast.error("Failed to copy to clipboard")
+    }
+  }
+
+  return (
+    <div className={cn("flex flex-col items-center gap-4", className)}>
+      <div
+        ref={canvasRef}
+        className="bg-white p-4 rounded-xl shadow-xs border flex items-center justify-center"
+      >
+        <QRCodeCanvas
+          value={value}
+          size={size}
+          level="H"
+          includeMargin={false}
+        />
+      </div>
+
+      {showDownloadOptions && (
+        <div className="flex flex-wrap items-center justify-center gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            onClick={handleDownloadPng}
+            className="gap-1.5"
+          >
+            <Download className="w-4 h-4 text-primary" />
+            <span>Download PNG</span>
+          </Button>
+
+          <Button
+            type="button"
+            variant="ghost"
+            size="sm"
+            onClick={handleCopyUrl}
+            className="gap-1.5"
+          >
+            {copied ? (
+              <>
+                <Check className="w-4 h-4 text-emerald-600" />
+                <span className="text-emerald-600">Copied</span>
+              </>
+            ) : (
+              <>
+                <Copy className="w-4 h-4" />
+                <span>Copy Link</span>
+              </>
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  )
+}
+