@omersx/bemms 0.0.0-stage → 0.1.0

package/src/components/signatures/signature-history.tsx

@@ -0,0 +1,121 @@
+"use client"
+
+import * as React from "react"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+import { Lock, ArrowRight, History } from "lucide-react"
+
+export interface SignatureEventItem {
+  id: string
+  eventType: string
+  actorUserId?: string
+  timestamp: Date | string
+  previousStatus?: string | null
+  newStatus?: string | null
+  reason?: string | null
+  currentEventHash: string
+  previousEventHash?: string | null
+}
+
+export interface SignatureHistoryProps {
+  events: SignatureEventItem[]
+  className?: string
+}
+
+const EVENT_COLORS: Record<string, string> = {
+  created: "bg-blue-100 text-blue-800 border-blue-200 dark:bg-blue-900/30 dark:text-blue-300 dark:border-blue-800",
+  approved: "bg-emerald-100 text-emerald-800 border-emerald-200 dark:bg-emerald-900/30 dark:text-emerald-300 dark:border-emerald-800",
+  rejected: "bg-red-100 text-red-800 border-red-200 dark:bg-red-900/30 dark:text-red-300 dark:border-red-800",
+  amended: "bg-orange-100 text-orange-800 border-orange-200 dark:bg-orange-900/30 dark:text-orange-300 dark:border-orange-800",
+  voided: "bg-rose-100 text-rose-800 border-rose-200 dark:bg-rose-900/30 dark:text-rose-300 dark:border-rose-800",
+  reviewed: "bg-purple-100 text-purple-800 border-purple-200 dark:bg-purple-900/30 dark:text-purple-300 dark:border-purple-800",
+}
+
+const formatTime = (date: Date | string) => {
+  const d = new Date(date)
+  return d.toLocaleString("en-US", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: true,
+  })
+}
+
+function truncateHash(hash: string) {
+  if (!hash || hash.length < 16) return hash
+  return `${hash.substring(0, 8)}...${hash.substring(hash.length - 8)}`
+}
+
+export function SignatureHistory({ events, className }: SignatureHistoryProps) {
+  // Sort from newest to oldest
+  const sortedEvents = [...events].sort((a, b) => {
+    return new Date(b.timestamp).getTime() - new Date(a.timestamp).getTime()
+  })
+
+  if (sortedEvents.length === 0) {
+    return (
+      <div className={cn("text-center py-8 text-muted-foreground", className)}>
+        <History className="mx-auto h-8 w-8 opacity-40 mb-2" />
+        <p className="text-sm">No signature events recorded.</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className={cn("relative space-y-0 ml-3 sm:ml-4 border-l-2 border-muted", className)}>
+      {sortedEvents.map((event, idx) => {
+        const isLast = idx === sortedEvents.length - 1
+        const eventTypeClass = EVENT_COLORS[event.eventType.toLowerCase()] || 
+          "bg-slate-100 text-slate-800 border-slate-200 dark:bg-slate-800 dark:text-slate-300 dark:border-slate-700"
+          
+        return (
+          <div key={event.id} className="relative pl-6 sm:pl-8 pb-8 last:pb-0 group">
+            {/* Timeline Dot */}
+            <div className="absolute -left-[5px] top-1 h-2 w-2 rounded-full bg-border ring-4 ring-background group-hover:bg-primary transition-colors" />
+            
+            <div className="space-y-2">
+              <div className="flex flex-wrap items-center gap-2">
+                <Badge variant="outline" className={cn("capitalize text-[10px] font-semibold tracking-wide", eventTypeClass)}>
+                  {event.eventType}
+                </Badge>
+                <span className="text-xs text-muted-foreground font-medium">
+                  {formatTime(event.timestamp)}
+                </span>
+              </div>
+              
+              {event.previousStatus && event.newStatus && (
+                <div className="flex items-center gap-2 text-sm text-foreground/80">
+                  <span className="capitalize">{event.previousStatus}</span>
+                  <ArrowRight className="h-3 w-3 text-muted-foreground" />
+                  <span className="capitalize font-medium text-foreground">{event.newStatus}</span>
+                </div>
+              )}
+              
+              {event.reason && (
+                <p className="text-sm text-foreground bg-muted/40 p-2.5 rounded-md border border-border/50">
+                  <span className="font-semibold text-xs text-muted-foreground block mb-1 uppercase tracking-wider">Reason</span>
+                  {event.reason}
+                </p>
+              )}
+              
+              <div className="flex items-center gap-1.5 text-[11px] text-muted-foreground/70 font-mono mt-1">
+                <Lock className="h-3 w-3" />
+                <span title={event.currentEventHash}>Hash: {truncateHash(event.currentEventHash)}</span>
+                {event.previousEventHash && (
+                  <span title={event.previousEventHash}>
+                    <ArrowRight className="h-2.5 w-2.5 inline mx-1" /> 
+                    {truncateHash(event.previousEventHash)}
+                  </span>
+                )}
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+

package/src/components/signatures/signature-status-panel.tsx

@@ -0,0 +1,164 @@
+"use client"
+
+import * as React from "react"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { cn } from "@/lib/utils"
+import { CheckCircle2, Clock, Circle, XCircle, PenSquare } from "lucide-react"
+
+export interface SignatureRequirement {
+  purpose: string
+  allowedRoles: string[]
+  required: boolean
+}
+
+export interface CompletedSignature {
+  id: string
+  purpose: string
+  signerName: string
+  signerRole: string
+  signedAt: Date | string
+  status: string
+  contentHash: string
+}
+
+export interface SignatureStatusPanelProps {
+  required: SignatureRequirement[]
+  completed: CompletedSignature[]
+  pending: SignatureRequirement[]
+  canSign: { purpose: string; allowed: boolean; reason?: string }[]
+  onSignClick?: (purpose: string) => void
+  className?: string
+}
+
+const formatPurpose = (purpose: string) => {
+  const map: Record<string, string> = {
+    perform: "Performer Signature",
+    review: "Reviewer Signature",
+    release: "Release Authority",
+    approve: "Approval",
+    reject: "Rejection",
+  }
+  if (map[purpose]) return map[purpose]
+  return purpose.charAt(0).toUpperCase() + purpose.slice(1)
+}
+
+const formatTime = (date: Date | string) => {
+  const d = new Date(date)
+  return d.toLocaleString("en-US", {
+    day: "2-digit",
+    month: "short",
+    year: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  })
+}
+
+export function SignatureStatusPanel({
+  required,
+  completed,
+  pending,
+  canSign,
+  onSignClick,
+  className,
+}: SignatureStatusPanelProps) {
+  // Combine into an ordered list of steps based on the requirements
+  const steps = required.map((req) => {
+    const comp = completed.find((c) => c.purpose === req.purpose)
+    const isPending = pending.some((p) => p.purpose === req.purpose)
+    const signAuth = canSign.find((c) => c.purpose === req.purpose)
+    
+    return {
+      requirement: req,
+      completed: comp,
+      isPending,
+      signAuth,
+    }
+  })
+
+  return (
+    <Card className={cn("overflow-hidden", className)}>
+      <CardHeader className="bg-muted/40 pb-3 pt-4 px-4 border-b">
+        <CardTitle className="text-sm font-semibold flex items-center gap-2">
+          Signature Status
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="p-0">
+        <div className="flex flex-col divide-y">
+          {steps.map((step, idx) => {
+            const purposeLabel = formatPurpose(step.requirement.purpose)
+            
+            if (step.completed) {
+              const isRejected = step.completed.status === 'rejected'
+              return (
+                <div key={idx} className="flex items-start gap-3 p-4 bg-card">
+                  {isRejected ? (
+                    <XCircle className="h-5 w-5 text-destructive shrink-0 mt-0.5" />
+                  ) : (
+                    <CheckCircle2 className="h-5 w-5 text-emerald-500 shrink-0 mt-0.5" />
+                  )}
+                  <div className="min-w-0 flex-1 space-y-1">
+                    <p className="text-sm font-medium text-foreground">
+                      {purposeLabel}
+                    </p>
+                    <p className="text-xs text-muted-foreground truncate">
+                      {step.completed.signerName}, {step.completed.signerRole} • {formatTime(step.completed.signedAt)}
+                    </p>
+                  </div>
+                </div>
+              )
+            }
+            
+            if (step.isPending) {
+              return (
+                <div key={idx} className="flex items-start gap-3 p-4 bg-muted/20">
+                  <Clock className="h-5 w-5 text-amber-500 shrink-0 mt-0.5" />
+                  <div className="min-w-0 flex-1 flex flex-col sm:flex-row sm:items-center justify-between gap-3">
+                    <div className="space-y-1">
+                      <p className="text-sm font-medium text-foreground">
+                        {purposeLabel}
+                      </p>
+                      <p className="text-xs text-muted-foreground">
+                        {step.signAuth?.allowed 
+                          ? "Awaiting your signature" 
+                          : step.signAuth?.reason || "Awaiting review"}
+                      </p>
+                    </div>
+                    {step.signAuth?.allowed && onSignClick && (
+                      <Button 
+                        size="sm" 
+                        onClick={() => onSignClick(step.requirement.purpose)}
+                        className="shrink-0 h-8 gap-1.5"
+                      >
+                        <PenSquare className="h-3.5 w-3.5" />
+                        Sign
+                      </Button>
+                    )}
+                  </div>
+                </div>
+              )
+            }
+            
+            // Not yet required
+            return (
+              <div key={idx} className="flex items-start gap-3 p-4 opacity-60">
+                <Circle className="h-5 w-5 text-muted-foreground shrink-0 mt-0.5" />
+                <div className="min-w-0 flex-1 space-y-1">
+                  <p className="text-sm font-medium text-foreground">
+                    {purposeLabel}
+                  </p>
+                  <p className="text-xs text-muted-foreground">
+                    Not yet required (waiting for previous steps)
+                  </p>
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+

package/src/components/team/department-coverage.tsx

@@ -0,0 +1,141 @@
+'use client';
+
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Building2, Phone, PhoneCall, Wrench, Shield, CheckCircle2 } from 'lucide-react';
+import Link from 'next/link';
+import { EngineerDutyStatus } from '@/lib/db/schema/engineer-profiles';
+
+interface DepartmentCoverageProps {
+  coverage: {
+    id: string;
+    name: string;
+    code: string;
+    deviceCount: number;
+    primaryEngineer: {
+      id: string;
+      fullName: string;
+      jobTitle: string;
+      extension: string | null;
+      mobileNumber: string | null;
+      dutyStatus: EngineerDutyStatus;
+    } | null;
+  }[];
+}
+
+export function DepartmentCoverage({ coverage }: DepartmentCoverageProps) {
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col sm:flex-row sm:items-center justify-between gap-2">
+        <div>
+          <h3 className="text-base font-semibold">Hospital Department Engineering Assignments</h3>
+          <p className="text-xs text-muted-foreground">
+            Each hospital department is assigned a designated biomedical engineer for routine inspections, PM compliance, and rapid fault resolution.
+          </p>
+        </div>
+      </div>
+
+      <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-5">
+        {coverage.map((dept) => {
+          const eng = dept.primaryEngineer;
+
+          return (
+            <Card key={dept.id} className="border-border/70 shadow-sm flex flex-col justify-between hover:border-primary/40 transition-colors">
+              <CardHeader className="pb-3">
+                <div className="flex items-start justify-between gap-2">
+                  <div>
+                    <Badge variant="outline" className="text-[10px] font-mono mb-1">
+                      {dept.code}
+                    </Badge>
+                    <CardTitle className="text-base font-semibold leading-tight">{dept.name}</CardTitle>
+                    <span className="text-xs text-muted-foreground flex items-center gap-1 mt-1">
+                      <Wrench className="w-3 h-3 text-primary" />
+                      {dept.deviceCount} Medical Equipment Assets
+                    </span>
+                  </div>
+                </div>
+              </CardHeader>
+
+              <CardContent className="space-y-3 text-xs flex-1">
+                <div className="p-3 rounded-lg bg-muted/40 border border-border/50 space-y-2">
+                  <span className="text-[11px] font-medium text-muted-foreground uppercase tracking-wider block">
+                    Designated BME Lead
+                  </span>
+
+                  {eng ? (
+                    <div>
+                      <div className="flex items-center justify-between">
+                        <p className="font-semibold text-sm">{eng.fullName}</p>
+                        {eng.dutyStatus === 'on_duty' ? (
+                          <Badge className="bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/30 text-[10px] py-0 px-1.5 font-normal">
+                            🟢 On Duty
+                          </Badge>
+                        ) : eng.dutyStatus === 'on_call' ? (
+                          <Badge className="bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/30 text-[10px] py-0 px-1.5 font-normal">
+                            📞 On Call
+                          </Badge>
+                        ) : (
+                          <Badge variant="outline" className="text-muted-foreground text-[10px] py-0 px-1.5">
+                            ⚪ Off Duty
+                          </Badge>
+                        )}
+                      </div>
+                      <p className="text-[11px] text-muted-foreground mt-0.5">{eng.jobTitle}</p>
+
+                      <div className="flex items-center gap-3 mt-2 text-xs pt-2 border-t border-border/40">
+                        {eng.extension && (
+                          <span className="flex items-center gap-1 font-medium text-foreground">
+                            <PhoneCall className="w-3 h-3 text-primary" />
+                            Ext: {eng.extension}
+                          </span>
+                        )}
+                        {eng.mobileNumber && (
+                          <a
+                            href={`tel:${eng.mobileNumber}`}
+                            className="flex items-center gap-1 text-primary hover:underline font-medium"
+                          >
+                            <Phone className="w-3 h-3" />
+                            {eng.mobileNumber}
+                          </a>
+                        )}
+                      </div>
+                    </div>
+                  ) : (
+                    <p className="text-muted-foreground italic text-xs">General biomedical team pool</p>
+                  )}
+                </div>
+              </CardContent>
+
+              <div className="p-3 pt-0 flex gap-2">
+                <Button asChild variant="outline" size="sm" className="flex-1 text-xs h-8">
+                  <Link href={`/departments/${dept.id}`}>
+                    <Building2 className="w-3 h-3 mr-1" />
+                    View Dept
+                  </Link>
+                </Button>
+
+                {eng?.mobileNumber ? (
+                  <Button asChild size="sm" className="flex-1 text-xs h-8 gap-1.5">
+                    <a href={`tel:${eng.mobileNumber}`}>
+                      <PhoneCall className="w-3 h-3" />
+                      Contact Lead
+                    </a>
+                  </Button>
+                ) : (
+                  <Button asChild size="sm" className="flex-1 text-xs h-8 gap-1.5">
+                    <Link href={`/tickets/new?departmentId=${dept.id}`}>
+                      <Wrench className="w-3 h-3" />
+                      Report Fault
+                    </Link>
+                  </Button>
+                )}
+              </div>
+            </Card>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+

package/src/components/team/edit-engineer-dialog.tsx

@@ -0,0 +1,242 @@
+'use client';
+
+import { useState, useEffect } from 'react';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+} from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import { EngineerTeamMember, updateEngineerProfile } from '@/lib/actions/engineers';
+import { toast } from 'sonner';
+
+interface EditEngineerDialogProps {
+  engineer: EngineerTeamMember | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  onSuccess: () => void;
+}
+
+const ALL_DAYS = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+
+export function EditEngineerDialog({
+  engineer,
+  open,
+  onOpenChange,
+  onSuccess,
+}: EditEngineerDialogProps) {
+  const [jobTitle, setJobTitle] = useState(engineer?.jobTitle || '');
+  const [specialization, setSpecialization] = useState(engineer?.specialization || '');
+  const [extension, setExtension] = useState(engineer?.extension || '');
+  const [mobileNumber, setMobileNumber] = useState(engineer?.mobileNumber || '');
+  const [shiftHours, setShiftHours] = useState(engineer?.shiftHours || '08:00 AM - 04:00 PM');
+  const [workingDays, setWorkingDays] = useState<string[]>(engineer?.workingDays || []);
+  const [onCallDays, setOnCallDays] = useState<string[]>(engineer?.onCallDays || []);
+  const [notes, setNotes] = useState(engineer?.notes || '');
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (engineer) {
+      setJobTitle(engineer.jobTitle || '');
+      setSpecialization(engineer.specialization || '');
+      setExtension(engineer.extension || '');
+      setMobileNumber(engineer.mobileNumber || '');
+      setShiftHours(engineer.shiftHours || '08:00 AM - 04:00 PM');
+      setWorkingDays(engineer.workingDays || []);
+      setOnCallDays(engineer.onCallDays || []);
+      setNotes(engineer.notes || '');
+    }
+  }, [engineer]);
+
+  if (!engineer) return null;
+
+  const toggleWorkingDay = (day: string) => {
+    setWorkingDays((prev) =>
+      prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day]
+    );
+  };
+
+  const toggleOnCallDay = (day: string) => {
+    setOnCallDays((prev) =>
+      prev.includes(day) ? prev.filter((d) => d !== day) : [...prev, day]
+    );
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!engineer) return;
+    setIsSubmitting(true);
+
+    try {
+      const res = await updateEngineerProfile(engineer.id, {
+        jobTitle,
+        specialization,
+        extension,
+        mobileNumber,
+        shiftHours,
+        workingDays,
+        onCallDays,
+        notes,
+      });
+
+      if (res.success) {
+        toast.success(`Updated profile for ${engineer.fullName}`);
+        onOpenChange(false);
+        onSuccess();
+      } else {
+        toast.error(res.error || 'Failed to update engineer profile');
+      }
+    } catch {
+      toast.error('An unexpected error occurred');
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>Edit Engineer Schedule & Info</DialogTitle>
+          <DialogDescription>
+            Update contact info, shift hours, and working days for <strong>{engineer.fullName}</strong>.
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={handleSubmit} className="space-y-4 text-xs">
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label className="text-xs">Job Title</Label>
+              <Input
+                value={jobTitle}
+                onChange={(e) => setJobTitle(e.target.value)}
+                placeholder="e.g. Lead Biomedical Engineer"
+                required
+                className="h-8 text-xs"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Specialization</Label>
+              <Input
+                value={specialization}
+                onChange={(e) => setSpecialization(e.target.value)}
+                placeholder="e.g. Critical Care Systems"
+                className="h-8 text-xs"
+              />
+            </div>
+          </div>
+
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label className="text-xs">Internal Phone Extension</Label>
+              <Input
+                value={extension}
+                onChange={(e) => setExtension(e.target.value)}
+                placeholder="e.g. 201"
+                className="h-8 text-xs font-mono"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label className="text-xs">Direct Mobile Number</Label>
+              <Input
+                value={mobileNumber}
+                onChange={(e) => setMobileNumber(e.target.value)}
+                placeholder="e.g. +249 91 234 5678"
+                className="h-8 text-xs font-mono"
+              />
+            </div>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs">Shift Hours</Label>
+            <Input
+              value={shiftHours}
+              onChange={(e) => setShiftHours(e.target.value)}
+              placeholder="e.g. 08:00 AM - 04:00 PM"
+              className="h-8 text-xs"
+            />
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs font-semibold">Scheduled Working Days (On-Site)</Label>
+            <div className="flex flex-wrap gap-1.5">
+              {ALL_DAYS.map((day) => {
+                const checked = workingDays.includes(day);
+                return (
+                  <button
+                    type="button"
+                    key={day}
+                    onClick={() => toggleWorkingDay(day)}
+                    className={`px-2.5 py-1 rounded text-xs font-medium border transition-colors ${
+                      checked
+                        ? 'bg-primary text-primary-foreground border-primary'
+                        : 'bg-muted/40 text-muted-foreground border-border/70 hover:bg-muted'
+                    }`}
+                  >
+                    {day}
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs font-semibold">Emergency On-Call Days</Label>
+            <div className="flex flex-wrap gap-1.5">
+              {ALL_DAYS.map((day) => {
+                const checked = onCallDays.includes(day);
+                return (
+                  <button
+                    type="button"
+                    key={day}
+                    onClick={() => toggleOnCallDay(day)}
+                    className={`px-2.5 py-1 rounded text-xs font-medium border transition-colors ${
+                      checked
+                        ? 'bg-amber-500 text-white border-amber-600'
+                        : 'bg-muted/40 text-muted-foreground border-border/70 hover:bg-muted'
+                    }`}
+                  >
+                    {day} 📞
+                  </button>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-xs">Clinical Engineering Notes / Certifications</Label>
+            <Textarea
+              value={notes}
+              onChange={(e) => setNotes(e.target.value)}
+              placeholder="e.g. Lead responder for OR 1 & 2. Certified on Dräger anesthesia workstations."
+              rows={2}
+              className="text-xs resize-none"
+            />
+          </div>
+
+          <DialogFooter className="pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => onOpenChange(false)}
+              disabled={isSubmitting}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" size="sm" disabled={isSubmitting}>
+              {isSubmitting ? 'Saving...' : 'Save Changes'}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+