@omersx/bemms 0.0.0-stage → 0.1.0

package/src/components/departments/my-department-view.tsx

@@ -0,0 +1,333 @@
+'use client';
+
+import { useState, useMemo } from 'react';
+import Link from 'next/link';
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { DeviceStatusBadge } from '@/components/devices/device-badges';
+import { PageHeader } from '@/components/shared/page-header';
+import {
+  Search,
+  Monitor,
+  AlertTriangle,
+  Wrench,
+  CheckCircle,
+  PlusCircle,
+  TicketCheck,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface DeviceItem {
+  id: string;
+  name: string;
+  assetNumber: string;
+  currentStatusCode: string;
+  locationName: string;
+  categoryName: string;
+  manufacturerName: string;
+  activeTickets: {
+    id: string;
+    ticketNumber: string;
+    title: string;
+    statusCode: string;
+  }[];
+}
+
+interface MyDepartmentViewProps {
+  department: {
+    name: string;
+    hospitalName: string;
+  };
+  devices: DeviceItem[];
+  stats: {
+    total: number;
+    operational: number;
+    underMaintenance: number;
+    outOfService: number;
+  };
+}
+
+type StatusFilter = 'all' | 'operational' | 'maintenance' | 'out_of_service';
+
+export function MyDepartmentView({
+  department,
+  devices,
+  stats,
+}: MyDepartmentViewProps) {
+  const [search, setSearch] = useState('');
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>('all');
+
+  const filteredDevices = useMemo(() => {
+    let filtered = devices;
+
+    // Search filter
+    if (search.trim()) {
+      const q = search.toLowerCase();
+      filtered = filtered.filter(
+        (d) =>
+          d.name.toLowerCase().includes(q) ||
+          d.assetNumber.toLowerCase().includes(q) ||
+          d.locationName.toLowerCase().includes(q) ||
+          d.categoryName.toLowerCase().includes(q) ||
+          d.manufacturerName.toLowerCase().includes(q)
+      );
+    }
+
+    // Status filter
+    if (statusFilter === 'operational') {
+      filtered = filtered.filter(
+        (d) => d.currentStatusCode === 'operational'
+      );
+    } else if (statusFilter === 'maintenance') {
+      filtered = filtered.filter((d) =>
+        [
+          'under_repair',
+          'under_maintenance',
+          'waiting_for_parts',
+          'under_investigation',
+        ].includes(d.currentStatusCode)
+      );
+    } else if (statusFilter === 'out_of_service') {
+      filtered = filtered.filter((d) =>
+        ['out_of_service', 'decommissioned'].includes(d.currentStatusCode)
+      );
+    }
+
+    // Sort: unavailable devices first
+    return filtered.sort((a, b) => {
+      const priority: Record<string, number> = {
+        out_of_service: 0,
+        decommissioned: 1,
+        under_repair: 2,
+        under_maintenance: 3,
+        waiting_for_parts: 4,
+        under_investigation: 5,
+        operational: 6,
+      };
+      return (
+        (priority[a.currentStatusCode] ?? 10) -
+        (priority[b.currentStatusCode] ?? 10)
+      );
+    });
+  }, [devices, search, statusFilter]);
+
+  const filters: { key: StatusFilter; label: string; count: number }[] = [
+    { key: 'all', label: 'All', count: stats.total },
+    { key: 'operational', label: 'Available', count: stats.operational },
+    {
+      key: 'maintenance',
+      label: 'Under Maint.',
+      count: stats.underMaintenance,
+    },
+    {
+      key: 'out_of_service',
+      label: 'Out of Service',
+      count: stats.outOfService,
+    },
+  ];
+
+  return (
+    <div className="space-y-6 max-w-3xl mx-auto">
+      <PageHeader
+        title="My Department"
+        description={`${department.name} \u00B7 ${department.hospitalName}`}
+      >
+        <Link href="/tickets/create">
+          <Button size="lg" className="min-h-[44px]">
+            <PlusCircle className="mr-2 h-5 w-5" />
+            Report Problem
+          </Button>
+        </Link>
+      </PageHeader>
+
+      {/* Summary Stats */}
+      <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+        <Card className="shadow-sm">
+          <CardContent className="p-3 text-center">
+            <p className="text-2xl font-bold">{stats.total}</p>
+            <p className="text-xs text-muted-foreground">Total Devices</p>
+          </CardContent>
+        </Card>
+        <Card className="shadow-sm border-green-200 dark:border-green-900 bg-green-50/50 dark:bg-green-950/20">
+          <CardContent className="p-3 text-center">
+            <p className="text-2xl font-bold text-green-700 dark:text-green-400">
+              {stats.operational}
+            </p>
+            <p className="text-xs text-green-600 dark:text-green-500">
+              Available
+            </p>
+          </CardContent>
+        </Card>
+        <Card className="shadow-sm border-amber-200 dark:border-amber-900 bg-amber-50/50 dark:bg-amber-950/20">
+          <CardContent className="p-3 text-center">
+            <p className="text-2xl font-bold text-amber-700 dark:text-amber-400">
+              {stats.underMaintenance}
+            </p>
+            <p className="text-xs text-amber-600 dark:text-amber-500">
+              Maintenance
+            </p>
+          </CardContent>
+        </Card>
+        <Card className="shadow-sm border-red-200 dark:border-red-900 bg-red-50/50 dark:bg-red-950/20">
+          <CardContent className="p-3 text-center">
+            <p className="text-2xl font-bold text-red-700 dark:text-red-400">
+              {stats.outOfService}
+            </p>
+            <p className="text-xs text-red-600 dark:text-red-500">
+              Out of Service
+            </p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Search */}
+      <div className="relative">
+        <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+        <Input
+          placeholder="Search devices by name, asset number, location..."
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="pl-10"
+        />
+      </div>
+
+      {/* Filter Chips */}
+      <div className="flex gap-2 flex-wrap">
+        {filters.map((f) => (
+          <button
+            key={f.key}
+            onClick={() => setStatusFilter(f.key)}
+            className={cn(
+              'text-xs px-3 py-1.5 rounded-full border font-medium transition-colors whitespace-nowrap',
+              statusFilter === f.key
+                ? 'bg-primary text-primary-foreground border-primary'
+                : 'bg-card text-muted-foreground border-border hover:bg-muted'
+            )}
+          >
+            {f.label} ({f.count})
+          </button>
+        ))}
+      </div>
+
+      {/* Device List */}
+      {filteredDevices.length === 0 ? (
+        <div className="text-center py-12 border rounded-lg bg-muted/20">
+          <Monitor className="h-8 w-8 text-muted-foreground mx-auto mb-2" />
+          <p className="text-sm text-muted-foreground">
+            {search
+              ? 'No devices match your search.'
+              : 'No devices in this category.'}
+          </p>
+        </div>
+      ) : (
+        <div className="space-y-3">
+          {filteredDevices.map((device) => (
+            <StaffDeviceCard key={device.id} device={device} />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function StaffDeviceCard({ device }: { device: DeviceItem }) {
+  const isOOS = ['out_of_service', 'decommissioned'].includes(
+    device.currentStatusCode
+  );
+  const isMaint = [
+    'under_repair',
+    'under_maintenance',
+    'waiting_for_parts',
+    'under_investigation',
+  ].includes(device.currentStatusCode);
+  const hasActiveTicket = device.activeTickets.length > 0;
+
+  return (
+    <Card
+      className={cn(
+        'shadow-sm overflow-hidden',
+        isOOS && 'border-red-200 dark:border-red-900',
+        isMaint && 'border-amber-200 dark:border-amber-900'
+      )}
+    >
+      {/* Status Banner for non-operational devices */}
+      {isOOS && (
+        <div className="bg-red-50 dark:bg-red-950/30 px-4 py-2 text-xs font-semibold text-red-700 dark:text-red-300 flex items-center gap-1.5 border-b border-red-200 dark:border-red-900">
+          <AlertTriangle className="w-3.5 h-3.5" />
+          OUT OF SERVICE — Do not use
+        </div>
+      )}
+      {isMaint && (
+        <div className="bg-amber-50 dark:bg-amber-950/30 px-4 py-2 text-xs font-semibold text-amber-700 dark:text-amber-300 flex items-center gap-1.5 border-b border-amber-200 dark:border-amber-900">
+          <Wrench className="w-3.5 h-3.5" />
+          UNDER MAINTENANCE
+        </div>
+      )}
+
+      <CardContent className="p-4">
+        {/* Device Info */}
+        <div className="flex items-start justify-between gap-3">
+          <div className="min-w-0">
+            <h4 className="font-semibold text-sm truncate">{device.name}</h4>
+            <p className="text-xs text-muted-foreground truncate">
+              {device.assetNumber}
+              {device.locationName && ` · ${device.locationName}`}
+            </p>
+            {device.manufacturerName && (
+              <p className="text-xs text-muted-foreground truncate mt-0.5">
+                {device.manufacturerName}
+                {device.categoryName && ` · ${device.categoryName}`}
+              </p>
+            )}
+          </div>
+          <DeviceStatusBadge status={device.currentStatusCode} />
+        </div>
+
+        {/* Active Ticket Alert */}
+        {hasActiveTicket && (
+          <div className="mt-3 space-y-1.5">
+            {device.activeTickets.map((ticket) => (
+              <Link
+                key={ticket.id}
+                href={`/tickets/${ticket.id}`}
+                className="flex items-center gap-2 text-xs bg-amber-50 dark:bg-amber-950/30 rounded-lg px-2.5 py-1.5 border border-amber-200 dark:border-amber-800 text-amber-800 dark:text-amber-200 hover:bg-amber-100 dark:hover:bg-amber-950/50 transition-colors"
+              >
+                <TicketCheck className="w-3.5 h-3.5 shrink-0" />
+                <span className="truncate">
+                  <strong>{ticket.ticketNumber}</strong> — {ticket.title}
+                </span>
+              </Link>
+            ))}
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="mt-3 flex gap-2">
+          {hasActiveTicket ? (
+            <Button asChild variant="outline" size="sm" className="min-h-[36px]">
+              <Link href={`/tickets/${device.activeTickets[0].id}`}>
+                <TicketCheck className="mr-1.5 h-3.5 w-3.5" />
+                View Ticket
+              </Link>
+            </Button>
+          ) : (
+            <Button asChild size="sm" className="min-h-[36px]">
+              <Link href={`/tickets/create?deviceId=${device.id}`}>
+                <PlusCircle className="mr-1.5 h-3.5 w-3.5" />
+                Report Problem
+              </Link>
+            </Button>
+          )}
+          <Button asChild variant="outline" size="sm" className="min-h-[36px]">
+            <Link href={`/devices/${device.id}`}>
+              <Monitor className="mr-1.5 h-3.5 w-3.5" />
+              View Device
+            </Link>
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/src/components/devices/change-status-dialog.tsx

@@ -0,0 +1,146 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import { toast } from "sonner"
+import { Dialog, DialogContent, DialogHeader, DialogTitle, 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 { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { changeDeviceStatus } from "@/lib/actions/devices"
+import { DeviceStatusBadge } from "./device-badges"
+
+interface ChangeStatusDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  deviceId: string;
+  deviceName: string;
+  currentStatus: string;
+  onSuccess: () => void;
+}
+
+export function ChangeStatusDialog({
+  open,
+  onOpenChange,
+  deviceId,
+  deviceName,
+  currentStatus,
+  onSuccess
+}: ChangeStatusDialogProps) {
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+  
+  const [status, setStatus] = useState("")
+  const [reason, setReason] = useState("")
+  const [limitationsNote, setLimitationsNote] = useState("")
+  const [notes, setNotes] = useState("")
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!status || !reason) {
+      toast.error("Please fill in all required fields")
+      return
+    }
+
+    setLoading(true)
+    try {
+      await changeDeviceStatus(deviceId, {
+        newStatusCode: status as any,
+        reason,
+        notes,
+        limitationsNote: status === 'operational_with_limitations' ? limitationsNote : undefined,
+      })
+      toast.success("Device status updated successfully")
+      onSuccess()
+      onOpenChange(false)
+      router.refresh()
+    } catch (error) {
+      console.error(error)
+      toast.error("Failed to update status")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Change Device Status</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="flex items-center gap-2 mb-2">
+              <span className="text-sm font-medium">Current Status:</span>
+              <DeviceStatusBadge status={currentStatus} />
+            </div>
+            
+            <div className="grid gap-2">
+              <Label htmlFor="status">New Status *</Label>
+              <Select value={status} onValueChange={setStatus} required>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select new status" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="operational">Operational</SelectItem>
+                  <SelectItem value="operational_with_limitations">Operational with Limitations</SelectItem>
+                  <SelectItem value="under_maintenance">Under Maintenance</SelectItem>
+                  <SelectItem value="under_repair">Under Repair</SelectItem>
+                  <SelectItem value="waiting_for_parts">Waiting for Parts</SelectItem>
+                  <SelectItem value="awaiting_release">Awaiting Release</SelectItem>
+                  <SelectItem value="out_of_service">Out of Service</SelectItem>
+                  <SelectItem value="standby">Standby</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="reason">Reason for Change *</Label>
+              <Input
+                id="reason"
+                placeholder="Brief reason for status change"
+                value={reason}
+                onChange={(e) => setReason(e.target.value)}
+                required
+              />
+            </div>
+
+            {status === 'operational_with_limitations' && (
+              <div className="grid gap-2">
+                <Label htmlFor="limitations">Limitations Note *</Label>
+                <Textarea
+                  id="limitations"
+                  placeholder="Describe the operational limitations"
+                  value={limitationsNote}
+                  onChange={(e) => setLimitationsNote(e.target.value)}
+                  required
+                />
+              </div>
+            )}
+
+            <div className="grid gap-2">
+              <Label htmlFor="notes">Additional Notes (Optional)</Label>
+              <Textarea
+                id="notes"
+                placeholder="Any other relevant details"
+                value={notes}
+                onChange={(e) => setNotes(e.target.value)}
+              />
+            </div>
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="outline" onClick={() => onOpenChange(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" disabled={loading}>
+              {loading ? "Updating..." : "Update Status"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+

package/src/components/devices/device-action-buttons.tsx

@@ -0,0 +1,125 @@
+"use client"
+
+import * as React from "react"
+import { Button } from "@/components/ui/button"
+import { AlertTriangle, QrCode, Edit, ArrowLeftRight, Activity } from "lucide-react"
+import Link from "next/link"
+import { TransferDeviceDialog } from "./transfer-device-dialog"
+import { ChangeStatusDialog } from "./change-status-dialog"
+import { useRouter } from "next/navigation"
+
+export interface DeviceActionButtonsProps {
+  deviceId: string;
+  deviceName: string;
+  currentHospital: string;
+  currentDepartment: string;
+  currentLocation?: string;
+  currentStatus: string;
+  allowedActions?: string[];
+}
+
+export function DeviceActionButtons({
+  deviceId,
+  deviceName,
+  currentHospital,
+  currentDepartment,
+  currentLocation,
+  currentStatus,
+  allowedActions = ["report_problem", "view_qr", "edit", "transfer", "change_status"],
+}: DeviceActionButtonsProps) {
+  const router = useRouter()
+  const [transferOpen, setTransferOpen] = React.useState(false)
+  const [statusOpen, setStatusOpen] = React.useState(false)
+
+  const canReport = allowedActions.includes("report_problem")
+  const canViewQr = allowedActions.includes("view_qr")
+  const canEdit = allowedActions.includes("edit")
+  const canTransfer = allowedActions.includes("transfer")
+  const canChangeStatus = allowedActions.includes("change_status")
+
+  const handleRefresh = () => {
+    router.refresh()
+  }
+
+  return (
+    <>
+      <div className="flex flex-wrap items-center gap-2">
+        {canReport && (
+          <Link href={`/tickets/create?deviceId=${deviceId}&source=device_profile`}>
+            <Button
+              variant="default"
+              size="sm"
+              className="bg-amber-600 hover:bg-amber-700 text-white font-medium"
+            >
+              <AlertTriangle className="w-4 h-4 mr-1.5" />
+              Report Problem
+            </Button>
+          </Link>
+        )}
+
+        {canViewQr && (
+          <Link href={`/devices/${deviceId}/qr`}>
+            <Button variant="outline" size="sm">
+              <QrCode className="w-4 h-4 mr-1.5" />
+              QR Code
+            </Button>
+          </Link>
+        )}
+
+        {canEdit && (
+          <Link href={`/devices/${deviceId}/edit`}>
+            <Button variant="outline" size="sm">
+              <Edit className="w-4 h-4 mr-1.5" />
+              Edit
+            </Button>
+          </Link>
+        )}
+
+        {canTransfer && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setTransferOpen(true)}
+          >
+            <ArrowLeftRight className="w-4 h-4 mr-1.5" />
+            Transfer
+          </Button>
+        )}
+
+        {canChangeStatus && (
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={() => setStatusOpen(true)}
+          >
+            <Activity className="w-4 h-4 mr-1.5" />
+            Change Status
+          </Button>
+        )}
+      </div>
+
+      {/* Transfer Dialog */}
+      <TransferDeviceDialog
+        open={transferOpen}
+        onOpenChange={setTransferOpen}
+        deviceId={deviceId}
+        deviceName={deviceName}
+        currentHospital={currentHospital}
+        currentDepartment={currentDepartment}
+        currentLocation={currentLocation}
+        onSuccess={handleRefresh}
+      />
+
+      {/* Status Change Dialog */}
+      <ChangeStatusDialog
+        open={statusOpen}
+        onOpenChange={setStatusOpen}
+        deviceId={deviceId}
+        deviceName={deviceName}
+        currentStatus={currentStatus}
+        onSuccess={handleRefresh}
+      />
+    </>
+  )
+}
+

package/src/components/devices/device-availability-banner.tsx

@@ -0,0 +1,59 @@
+import { AlertTriangle, CheckCircle, AlertCircle, Wrench, Clock } from "lucide-react"
+import { cn } from "@/lib/utils"
+
+const bannerConfig: Record<string, { icon: any; bg: string; border: string; text: string; message: string }> = {
+  operational: {
+    icon: CheckCircle, bg: "bg-green-50", border: "border-green-300", text: "text-green-800",
+    message: "This device is operational and available for use.",
+  },
+  operational_with_limitations: {
+    icon: AlertTriangle, bg: "bg-amber-50", border: "border-amber-300", text: "text-amber-800",
+    message: "This device is operational with limitations. Check notes below before use.",
+  },
+  under_maintenance: {
+    icon: Wrench, bg: "bg-blue-50", border: "border-blue-300", text: "text-blue-800",
+    message: "This device is currently under maintenance. Do not use until released by Biomedical Engineering.",
+  },
+  under_repair: {
+    icon: Wrench, bg: "bg-orange-50", border: "border-orange-300", text: "text-orange-800",
+    message: "This device is under repair. Do not use until released by Biomedical Engineering.",
+  },
+  waiting_for_parts: {
+    icon: Clock, bg: "bg-yellow-50", border: "border-yellow-300", text: "text-yellow-800",
+    message: "This device is waiting for parts. Do not use.",
+  },
+  awaiting_release: {
+    icon: Clock, bg: "bg-purple-50", border: "border-purple-300", text: "text-purple-800",
+    message: "This device is awaiting release after maintenance. Do not use until formally released.",
+  },
+  out_of_service: {
+    icon: AlertCircle, bg: "bg-red-50", border: "border-red-300", text: "text-red-800",
+    message: "OUT OF SERVICE — Do not use until released by Biomedical Engineering.",
+  },
+  standby: {
+    icon: Clock, bg: "bg-gray-50", border: "border-gray-300", text: "text-gray-800",
+    message: "This device is on standby.",
+  },
+  decommissioned: {
+    icon: AlertCircle, bg: "bg-slate-100", border: "border-slate-300", text: "text-slate-600",
+    message: "This device has been decommissioned and is no longer in service.",
+  },
+}
+
+export function DeviceAvailabilityBanner({ status, limitationsNote }: { status: string; limitationsNote?: string | null }) {
+  const config = bannerConfig[status] || bannerConfig.operational
+  const Icon = config.icon
+
+  return (
+    <div className={cn("rounded-lg border-2 p-4 flex items-start gap-3", config.bg, config.border)}>
+      <Icon className={cn("w-6 h-6 mt-0.5 flex-shrink-0", config.text)} />
+      <div>
+        <p className={cn("font-semibold text-base", config.text)}>{config.message}</p>
+        {limitationsNote && status === 'operational_with_limitations' && (
+          <p className={cn("mt-1 text-sm", config.text)}>Note: {limitationsNote}</p>
+        )}
+      </div>
+    </div>
+  )
+}
+