@omersx/bemms 0.0.0-stage → 0.1.0

package/src/components/devices/quick-add-category-dialog.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Plus, Loader2 } from "lucide-react";
+import { createDeviceCategory } from "@/lib/actions/device-categories";
+
+interface QuickAddCategoryDialogProps {
+  onSuccess?: (newCategory: any) => void;
+  triggerVariant?: "outline" | "ghost" | "default" | "secondary";
+  triggerSize?: "sm" | "default" | "icon";
+  triggerLabel?: string;
+}
+
+export function QuickAddCategoryDialog({
+  onSuccess,
+  triggerVariant = "outline",
+  triggerSize = "sm",
+  triggerLabel = "New Type",
+}: QuickAddCategoryDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+  const [name, setName] = useState("");
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError("Please enter a device type name");
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+
+    // Auto-generate code from name
+    const code = name.trim().toUpperCase().replace(/[^A-Z0-9]/g, "_").slice(0, 15);
+
+    try {
+      const result = await createDeviceCategory({
+        name: name.trim(),
+        code,
+        criticalityLevel: "medium",
+        defaultPmIntervalDays: 180,
+      });
+
+      if (result.success) {
+        if (onSuccess) onSuccess((result as any).data);
+        router.refresh();
+        setOpen(false);
+        setName("");
+      } else {
+        setError((result as any)?.error || "Failed to create device type");
+      }
+    } catch (err: any) {
+      setError(err?.message || "An unexpected error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          type="button"
+          variant={triggerVariant}
+          size={triggerSize}
+          className="h-8 gap-1 text-xs shrink-0"
+        >
+          <Plus className="w-3.5 h-3.5" />
+          {triggerLabel}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[400px]">
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <DialogHeader>
+            <DialogTitle>Add Device Type</DialogTitle>
+          </DialogHeader>
+
+          {error && (
+            <div className="bg-destructive/10 text-destructive text-xs p-2.5 rounded-md border border-destructive/20">
+              {error}
+            </div>
+          )}
+
+          <div>
+            <Label htmlFor="cat-name">Device Type Name *</Label>
+            <Input
+              id="cat-name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+              placeholder="e.g. Blood Gas Analyzer, Autoclave..."
+              className="mt-1"
+              autoFocus
+              required
+            />
+            <p className="text-xs text-muted-foreground mt-1.5">
+              Enter the general type of equipment (e.g. &quot;Infusion Pump&quot;, &quot;Sterilizer&quot;)
+            </p>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0 pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setOpen(false)}
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" size="sm" disabled={loading}>
+              {loading && <Loader2 className="w-3.5 h-3.5 mr-1.5 animate-spin" />}
+              Add Type
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

package/src/components/devices/quick-add-manufacturer-dialog.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Plus, Loader2 } from "lucide-react";
+import { createManufacturer } from "@/lib/actions/manufacturers";
+
+interface QuickAddManufacturerDialogProps {
+  onSuccess?: (newManufacturer: any) => void;
+  triggerVariant?: "outline" | "ghost" | "default" | "secondary";
+  triggerSize?: "sm" | "default" | "icon";
+  triggerLabel?: string;
+}
+
+export function QuickAddManufacturerDialog({
+  onSuccess,
+  triggerVariant = "outline",
+  triggerSize = "sm",
+  triggerLabel = "New Manufacturer",
+}: QuickAddManufacturerDialogProps) {
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const [name, setName] = useState("");
+  const [code, setCode] = useState("");
+  const [country, setCountry] = useState("");
+  const [supportPhone, setSupportPhone] = useState("");
+  const [supportEmail, setSupportEmail] = useState("");
+  const [website, setWebsite] = useState("");
+
+  const handleNameChange = (val: string) => {
+    setName(val);
+    if (!code || code === name.toUpperCase().replace(/[^A-Z0-9]/g, "_").slice(0, 15)) {
+      setCode(val.toUpperCase().replace(/[^A-Z0-9]/g, "_").slice(0, 15));
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!name.trim()) {
+      setError("Manufacturer name is required");
+      return;
+    }
+
+    setLoading(true);
+    setError("");
+
+    try {
+      const result = await createManufacturer({
+        name: name.trim(),
+        code: code.trim() || undefined,
+        country: country.trim() || undefined,
+        supportPhone: supportPhone.trim() || undefined,
+        supportEmail: supportEmail.trim() || undefined,
+        website: website.trim() || undefined,
+      });
+
+      if (result.success) {
+        if (onSuccess) onSuccess((result as any).data);
+        router.refresh();
+        setOpen(false);
+        // Reset form
+        setName("");
+        setCode("");
+        setCountry("");
+        setSupportPhone("");
+        setSupportEmail("");
+        setWebsite("");
+      } else {
+        setError((result as any)?.error || "Failed to create manufacturer");
+      }
+    } catch (err: any) {
+      setError(err?.message || "An unexpected error occurred");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button
+          type="button"
+          variant={triggerVariant}
+          size={triggerSize}
+          className="h-8 gap-1 text-xs shrink-0"
+        >
+          <Plus className="w-3.5 h-3.5" />
+          {triggerLabel}
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[480px]">
+        <form onSubmit={handleSubmit} className="space-y-4">
+          <DialogHeader>
+            <DialogTitle>Add Device Manufacturer</DialogTitle>
+          </DialogHeader>
+
+          {error && (
+            <div className="bg-destructive/10 text-destructive text-xs p-2.5 rounded-md border border-destructive/20">
+              {error}
+            </div>
+          )}
+
+          <div className="grid gap-3">
+            <div>
+              <Label htmlFor="mfr-name" className="text-xs">Manufacturer Name *</Label>
+              <Input
+                id="mfr-name"
+                value={name}
+                onChange={(e) => handleNameChange(e.target.value)}
+                placeholder="e.g. Philips Healthcare"
+                className="mt-1"
+                required
+              />
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label htmlFor="mfr-code" className="text-xs">Short Code</Label>
+                <Input
+                  id="mfr-code"
+                  value={code}
+                  onChange={(e) => setCode(e.target.value)}
+                  placeholder="e.g. PHILIPS"
+                  className="mt-1 font-mono text-xs uppercase"
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="mfr-country" className="text-xs">Country of Origin</Label>
+                <Input
+                  id="mfr-country"
+                  value={country}
+                  onChange={(e) => setCountry(e.target.value)}
+                  placeholder="e.g. Netherlands"
+                  className="mt-1 text-xs"
+                />
+              </div>
+            </div>
+
+            <div className="grid grid-cols-2 gap-3">
+              <div>
+                <Label htmlFor="mfr-phone" className="text-xs">Support Phone</Label>
+                <Input
+                  id="mfr-phone"
+                  value={supportPhone}
+                  onChange={(e) => setSupportPhone(e.target.value)}
+                  placeholder="+1-800-..."
+                  className="mt-1 text-xs"
+                />
+              </div>
+
+              <div>
+                <Label htmlFor="mfr-email" className="text-xs">Support Email</Label>
+                <Input
+                  id="mfr-email"
+                  type="email"
+                  value={supportEmail}
+                  onChange={(e) => setSupportEmail(e.target.value)}
+                  placeholder="support@..."
+                  className="mt-1 text-xs"
+                />
+              </div>
+            </div>
+
+            <div>
+              <Label htmlFor="mfr-web" className="text-xs">Official Website</Label>
+              <Input
+                id="mfr-web"
+                type="url"
+                value={website}
+                onChange={(e) => setWebsite(e.target.value)}
+                placeholder="https://..."
+                className="mt-1 text-xs"
+              />
+            </div>
+          </div>
+
+          <DialogFooter className="gap-2 sm:gap-0 pt-2">
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              onClick={() => setOpen(false)}
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+            <Button type="submit" size="sm" disabled={loading}>
+              {loading && <Loader2 className="w-3.5 h-3.5 mr-1.5 animate-spin" />}
+              Save Manufacturer
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
+

package/src/components/devices/transfer-device-dialog.tsx

@@ -0,0 +1,190 @@
+"use client"
+
+import { useState, useEffect } 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 { getHospitals } from "@/lib/actions/hospitals"
+import { getDepartments } from "@/lib/actions/departments"
+import { transferDeviceLocation } from "@/lib/actions/devices"
+
+interface TransferDeviceDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  deviceId: string;
+  deviceName: string;
+  currentHospital: string;
+  currentDepartment: string;
+  currentLocation?: string;
+  onSuccess: () => void;
+}
+
+export function TransferDeviceDialog({
+  open,
+  onOpenChange,
+  deviceId,
+  deviceName,
+  currentHospital,
+  currentDepartment,
+  currentLocation,
+  onSuccess
+}: TransferDeviceDialogProps) {
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+  const [hospitals, setHospitals] = useState<any[]>([])
+  const [departments, setDepartments] = useState<any[]>([])
+  
+  const [hospitalId, setHospitalId] = useState("")
+  const [departmentId, setDepartmentId] = useState("")
+  const [locationDescription, setLocationDescription] = useState("")
+  const [reason, setReason] = useState("")
+  const [notes, setNotes] = useState("")
+
+  useEffect(() => {
+    if (open) {
+      getHospitals().then(res => {
+        if (res?.success && Array.isArray(res.data)) {
+          setHospitals(res.data)
+        }
+      }).catch(console.error)
+    }
+  }, [open])
+
+  useEffect(() => {
+    if (hospitalId) {
+      getDepartments(hospitalId).then(res => {
+        if (res?.success && Array.isArray(res.data)) {
+          setDepartments(res.data)
+        }
+      }).catch(console.error)
+      setDepartmentId("")
+    }
+  }, [hospitalId])
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!hospitalId || !departmentId || !reason) {
+      toast.error("Please fill in all required fields")
+      return
+    }
+
+    setLoading(true)
+    try {
+      await transferDeviceLocation(deviceId, {
+        destinationHospitalId: hospitalId,
+        destinationDepartmentId: departmentId,
+        exactLocationDescription: locationDescription,
+        transferReason: reason as any,
+        notes
+      })
+      toast.success("Device transferred successfully")
+      onSuccess()
+      onOpenChange(false)
+      router.refresh()
+    } catch (error) {
+      console.error(error)
+      toast.error("Failed to transfer device")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-[500px]">
+        <form onSubmit={handleSubmit}>
+          <DialogHeader>
+            <DialogTitle>Transfer Device Location</DialogTitle>
+          </DialogHeader>
+          <div className="grid gap-4 py-4">
+            <div className="text-sm bg-muted p-3 rounded-md">
+              <p><strong>Device:</strong> {deviceName}</p>
+              <p><strong>Current:</strong> {currentHospital} - {currentDepartment} {currentLocation ? `(${currentLocation})` : ""}</p>
+            </div>
+            
+            <div className="grid gap-2">
+              <Label htmlFor="hospital">Destination Hospital *</Label>
+              <Select value={hospitalId} onValueChange={setHospitalId} required>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select hospital" />
+                </SelectTrigger>
+                <SelectContent>
+                  {hospitals.map(h => (
+                    <SelectItem key={h.id} value={h.id}>{h.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="department">Destination Department *</Label>
+              <Select value={departmentId} onValueChange={setDepartmentId} disabled={!hospitalId} required>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select department" />
+                </SelectTrigger>
+                <SelectContent>
+                  {departments.map(d => (
+                    <SelectItem key={d.id} value={d.id}>{d.name}</SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="location">Location Description</Label>
+              <Input
+                id="location"
+                placeholder="e.g. Room 101, Bed 3"
+                value={locationDescription}
+                onChange={(e) => setLocationDescription(e.target.value)}
+              />
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="reason">Transfer Reason *</Label>
+              <Select value={reason} onValueChange={setReason} required>
+                <SelectTrigger>
+                  <SelectValue placeholder="Select reason" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="relocation">Relocation</SelectItem>
+                  <SelectItem value="temporary_loan">Temporary Loan</SelectItem>
+                  <SelectItem value="department_change">Department Change</SelectItem>
+                  <SelectItem value="correction">Correction</SelectItem>
+                  <SelectItem value="replacement">Replacement</SelectItem>
+                  <SelectItem value="workshop">Workshop</SelectItem>
+                  <SelectItem value="storage">Storage</SelectItem>
+                  <SelectItem value="other">Other</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+
+            <div className="grid gap-2">
+              <Label htmlFor="notes">Notes (Optional)</Label>
+              <Textarea
+                id="notes"
+                placeholder="Additional details about the transfer"
+                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 ? "Transferring..." : "Transfer Device"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  )
+}
+

package/src/components/layout/header.tsx

@@ -0,0 +1,80 @@
+'use client'
+
+import { Search, Activity, LogOut, User, Settings } from 'lucide-react'
+import { signOut } from 'next-auth/react'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import { Avatar, AvatarFallback } from '@/components/ui/avatar'
+import {
+  DropdownMenu, DropdownMenuContent, DropdownMenuItem,
+  DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger
+} from '@/components/ui/dropdown-menu'
+import { NotificationBell } from '@/components/notifications/notification-bell'
+import { ThemeToggle } from '@/components/theme/theme-toggle'
+
+import Link from 'next/link'
+
+export function Header({ user }: { user: { name: string; role: string; email: string } }) {
+  return (
+    <header className="sticky top-0 z-40 flex h-16 items-center gap-4 border-b border-border bg-card/80 backdrop-blur-sm px-4 md:px-6">
+      <div className="flex items-center md:hidden gap-2 text-primary mr-auto">
+        <Activity className="h-6 w-6" />
+        <span className="font-bold tracking-tight text-foreground">BEMMS</span>
+      </div>
+
+      <div className="hidden md:flex items-center flex-1 max-w-md">
+        <div className="relative w-full">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            type="search"
+            placeholder="Search devices, tickets..."
+            className="w-full bg-muted/50 pl-9 md:w-[300px] lg:w-[400px]"
+          />
+        </div>
+      </div>
+
+      <div className="flex items-center gap-2 ml-auto md:ml-0">
+        <ThemeToggle />
+        <NotificationBell />
+
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button variant="ghost" className="relative h-9 w-9 rounded-full">
+              <Avatar className="h-9 w-9">
+                <AvatarFallback className="bg-primary/10 text-primary">
+                  {user.name.substring(0, 2).toUpperCase()}
+                </AvatarFallback>
+              </Avatar>
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent className="w-56" align="end" forceMount>
+            <DropdownMenuLabel className="font-normal">
+              <div className="flex flex-col space-y-1">
+                <p className="text-sm font-medium leading-none">{user.name}</p>
+                <p className="text-xs leading-none text-muted-foreground">{user.email}</p>
+              </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem asChild>
+              <Link href="/profile" className="flex items-center w-full cursor-pointer">
+                <User className="mr-2 h-4 w-4" />
+                <span>My Profile</span>
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuItem asChild>
+              <Link href="/more" className="flex items-center w-full cursor-pointer">
+                <Settings className="mr-2 h-4 w-4" />
+                <span>Menu &amp; Settings</span>
+              </Link>
+            </DropdownMenuItem>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem onClick={() => signOut({ callbackUrl: '/login' })} className="cursor-pointer">
+              <LogOut className="mr-2 h-4 w-4" />
+              <span>Log out</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    </header>
+  )
+}