@omersx/bemms 0.0.0-stage → 1.0.0

package/src/app/(dashboard)/departments/new/page.tsx

@@ -0,0 +1,330 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { createDepartment } from "@/lib/actions/departments"
+import { getOrganizations } from "@/lib/actions/organizations"
+import { getHospitals } from "@/lib/actions/hospitals"
+import { getUsers } from "@/lib/actions/users"
+import { PageHeader } from "@/components/shared/page-header"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { ArrowLeft, Building2, Loader2, Check } from "lucide-react"
+import Link from "next/link"
+import { toast } from "sonner"
+
+const DEPARTMENT_TYPES = [
+  { value: "Clinical", label: "Clinical" },
+  { value: "Surgical", label: "Surgical" },
+  { value: "Intensive Care", label: "Intensive Care (ICU)" },
+  { value: "Emergency", label: "Emergency" },
+  { value: "Diagnostic & Imaging", label: "Diagnostic & Imaging" },
+  { value: "Laboratory", label: "Laboratory" },
+  { value: "Pharmacy", label: "Pharmacy" },
+  { value: "Biomedical Engineering", label: "Biomedical Engineering" },
+  { value: "Support Services", label: "Support Services" },
+  { value: "Administration", label: "Administration" },
+  { value: "Other", label: "Other" },
+]
+
+export default function NewDepartmentPage() {
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+  const [organizations, setOrganizations] = useState<any[]>([])
+  const [hospitals, setHospitals] = useState<any[]>([])
+  const [users, setUsers] = useState<any[]>([])
+  
+  const [organizationId, setOrganizationId] = useState("")
+  const [hospitalId, setHospitalId] = useState("")
+  const [name, setName] = useState("")
+  const [code, setCode] = useState("")
+  const [departmentType, setDepartmentType] = useState("")
+  const [managerUserId, setManagerUserId] = useState<string>("none")
+
+  // Load organizations and users on mount
+  useEffect(() => {
+    async function loadInitialData() {
+      try {
+        const [orgRes, usersRes] = await Promise.all([
+          getOrganizations(),
+          getUsers(),
+        ])
+        if (orgRes?.success && Array.isArray(orgRes.data)) {
+          setOrganizations(orgRes.data)
+          // If only one org, auto-select it
+          if (orgRes.data.length === 1) {
+            setOrganizationId(orgRes.data[0].id)
+          }
+        }
+        if (usersRes?.success && Array.isArray(usersRes.data)) {
+          setUsers(usersRes.data)
+        }
+      } catch (err) {
+        console.error("Failed to load initial data:", err)
+      }
+    }
+    loadInitialData()
+  }, [])
+
+  // Load hospitals when organization is selected
+  useEffect(() => {
+    async function loadHospitals() {
+      if (organizationId) {
+        try {
+          const res = await getHospitals(organizationId)
+          if (res?.success && Array.isArray(res.data)) {
+            setHospitals(res.data)
+            // If only one hospital, auto-select it
+            if (res.data.length === 1) {
+              setHospitalId(res.data[0].id)
+            } else {
+              setHospitalId("")
+            }
+          }
+        } catch (err) {
+          console.error("Failed to load hospitals:", err)
+        }
+      } else {
+        setHospitals([])
+        setHospitalId("")
+      }
+    }
+    loadHospitals()
+  }, [organizationId])
+
+  // Auto-generate code from department name if code is empty
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const val = e.target.value
+    setName(val)
+    if (!code || code === name.slice(0, 4).toUpperCase()) {
+      setCode(val.replace(/[^a-zA-Z0-9]/g, "").slice(0, 6).toUpperCase())
+    }
+  }
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+
+    if (!organizationId) {
+      toast.error("Please select an organization")
+      return
+    }
+    if (!hospitalId) {
+      toast.error("Please select a hospital")
+      return
+    }
+    if (!name.trim()) {
+      toast.error("Please enter a department name")
+      return
+    }
+    if (!code.trim()) {
+      toast.error("Please enter a department code")
+      return
+    }
+
+    setLoading(true)
+    try {
+      const res = await createDepartment({
+        organizationId,
+        hospitalId,
+        name: name.trim(),
+        code: code.trim().toUpperCase(),
+        departmentType: departmentType || undefined,
+        managerUserId: managerUserId === "none" ? undefined : managerUserId,
+        status: "active",
+      })
+
+      if (res.success) {
+        toast.success("Department created successfully!")
+        router.push("/departments")
+        router.refresh()
+      } else {
+        toast.error((res as any).error || "Failed to create department")
+      }
+    } catch (err: any) {
+      toast.error(err.message || "An unexpected error occurred")
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="space-y-6 max-w-2xl mx-auto pb-12">
+      <div className="flex items-center gap-2">
+        <Link
+          href="/departments"
+          className="inline-flex items-center text-sm text-muted-foreground hover:text-foreground transition-colors"
+        >
+          <ArrowLeft className="w-4 h-4 mr-1.5" />
+          Back to Departments
+        </Link>
+      </div>
+
+      <PageHeader
+        title="Add Department"
+        description="Create a new clinical or operational hospital department"
+      />
+
+      <Card className="shadow-xs border">
+        <CardHeader className="pb-4">
+          <CardTitle className="text-base flex items-center gap-2">
+            <Building2 className="w-5 h-5 text-primary" />
+            Department Details
+          </CardTitle>
+          <CardDescription>
+            Specify the organization, hospital location, and operational category for the department.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-5">
+            {/* Organization Select */}
+            <div className="space-y-2">
+              <Label htmlFor="organization">
+                Organization <span className="text-destructive">*</span>
+              </Label>
+              <Select value={organizationId} onValueChange={setOrganizationId}>
+                <SelectTrigger id="organization">
+                  <SelectValue placeholder="Select Organization" />
+                </SelectTrigger>
+                <SelectContent>
+                  {organizations.map((org) => (
+                    <SelectItem key={org.id} value={org.id}>
+                      {org.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Hospital Select (cascading) */}
+            <div className="space-y-2">
+              <Label htmlFor="hospital">
+                Hospital <span className="text-destructive">*</span>
+              </Label>
+              <Select
+                value={hospitalId}
+                onValueChange={setHospitalId}
+                disabled={!organizationId || hospitals.length === 0}
+              >
+                <SelectTrigger id="hospital">
+                  <SelectValue
+                    placeholder={
+                      !organizationId
+                        ? "Select an organization first"
+                        : hospitals.length === 0
+                        ? "No hospitals available"
+                        : "Select Hospital"
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {hospitals.map((h) => (
+                    <SelectItem key={h.id} value={h.id}>
+                      {h.name}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Department Name */}
+            <div className="space-y-2">
+              <Label htmlFor="name">
+                Department Name <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                id="name"
+                value={name}
+                onChange={handleNameChange}
+                placeholder="e.g. Intensive Care Unit, Cardiology, Radiology"
+                required
+              />
+            </div>
+
+            {/* Department Code */}
+            <div className="space-y-2">
+              <Label htmlFor="code">
+                Department Code <span className="text-destructive">*</span>
+              </Label>
+              <Input
+                id="code"
+                value={code}
+                onChange={(e) => setCode(e.target.value.toUpperCase())}
+                placeholder="e.g. ICU, CARD, RAD"
+                className="font-mono uppercase"
+                maxLength={20}
+                required
+              />
+              <p className="text-xs text-muted-foreground">
+                Short unique identifier for asset codes and reporting (2-20 characters).
+              </p>
+            </div>
+
+            {/* Department Type */}
+            <div className="space-y-2">
+              <Label htmlFor="type">Department Type</Label>
+              <Select value={departmentType} onValueChange={setDepartmentType}>
+                <SelectTrigger id="type">
+                  <SelectValue placeholder="Select Department Type (optional)" />
+                </SelectTrigger>
+                <SelectContent>
+                  {DEPARTMENT_TYPES.map((type) => (
+                    <SelectItem key={type.value} value={type.value}>
+                      {type.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+
+            {/* Department Manager */}
+            <div className="space-y-2">
+              <Label htmlFor="manager">Department Manager (Head of Department)</Label>
+              <Select value={managerUserId} onValueChange={setManagerUserId}>
+                <SelectTrigger id="manager">
+                  <SelectValue placeholder="Assign a Department Manager (optional)" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="none">-- No Manager (Unassigned) --</SelectItem>
+                  {users.map((u) => (
+                    <SelectItem key={u.id} value={u.id}>
+                      {u.fullName || u.email} ({u.email})
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+              <p className="text-xs text-muted-foreground">
+                Optional. You can assign or change the department manager anytime later.
+              </p>
+            </div>
+
+            {/* Form Actions */}
+            <div className="flex items-center justify-end gap-3 pt-4 border-t">
+              <Link href="/departments">
+                <Button type="button" variant="outline" disabled={loading}>
+                  Cancel
+                </Button>
+              </Link>
+              <Button type="submit" disabled={loading} className="gap-2">
+                {loading ? (
+                  <>
+                    <Loader2 className="w-4 h-4 animate-spin" />
+                    Creating...
+                  </>
+                ) : (
+                  <>
+                    <Check className="w-4 h-4" />
+                    Create Department
+                  </>
+                )}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+

package/src/app/(dashboard)/departments/page.tsx

@@ -0,0 +1,52 @@
+import { auth } from '@/lib/auth';
+import { redirect } from 'next/navigation';
+import { getDepartmentsOverview } from '@/lib/actions/departments';
+import { PageHeader } from '@/components/shared/page-header';
+import { DepartmentCardsView } from '@/components/departments/department-cards-view';
+import { Button } from '@/components/ui/button';
+import { Plus, QrCode } from 'lucide-react';
+import Link from 'next/link';
+import { hasRole } from '@/lib/auth/rbac';
+
+export const dynamic = 'force-dynamic';
+
+export default async function DepartmentsPage() {
+  const session = await auth();
+  if (!session?.user) redirect('/login');
+
+  const user = session.user as { roles?: string[] };
+  const isAdmin = hasRole(user.roles || [], 'SYS_ADMIN', 'ORG_ADMIN', 'HOSP_ADMIN');
+
+  const result = await getDepartmentsOverview();
+  const departments = result.success && result.data ? result.data.departments : [];
+  const hospitals = result.success && result.data ? result.data.hospitals : [];
+
+  return (
+    <div className="space-y-6 max-w-7xl mx-auto">
+      <PageHeader
+        title="Departments"
+        description="Browse clinical departments, equipment health, and device allocations"
+      >
+        <div className="flex gap-2">
+          <Button asChild variant="outline" className="min-h-[44px]">
+            <Link href="/scan">
+              <QrCode className="w-4 h-4 mr-2" />
+              Scan QR
+            </Link>
+          </Button>
+          {isAdmin && (
+            <Button asChild className="min-h-[44px]">
+              <Link href="/departments/new">
+                <Plus className="w-4 h-4 mr-2" />
+                Add Department
+              </Link>
+            </Button>
+          )}
+        </div>
+      </PageHeader>
+
+      <DepartmentCardsView departments={departments} hospitals={hospitals} />
+    </div>
+  );
+}
+

package/src/app/(dashboard)/devices/[id]/edit/page.tsx

@@ -0,0 +1,131 @@
+"use client"
+
+import { updateDevice } from "@/lib/actions/devices"
+import { getDeviceById } from "@/lib/actions/devices"
+import { PageHeader } from "@/components/shared/page-header"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { useRouter } from "next/navigation"
+import { useState, useEffect, use } from "react"
+
+export default function EditDevicePage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params)
+  const router = useRouter()
+  const [loading, setLoading] = useState(false)
+  const [error, setError] = useState("")
+  const [device, setDevice] = useState<any>(null)
+
+  useEffect(() => {
+    async function load() {
+      const res = await getDeviceById(id)
+      if (res?.success && res.data) setDevice(res.data)
+    }
+    load()
+  }, [id])
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault()
+    setLoading(true)
+    setError("")
+    const fd = new FormData(e.currentTarget)
+    const data: any = {}
+    fd.forEach((v, k) => { if (v) data[k] = v })
+
+    const result = await updateDevice(id, data)
+    if (result?.success) {
+      router.push(`/devices/${id}`)
+    } else {
+      setError((result as any)?.error || "Failed to update device")
+    }
+    setLoading(false)
+  }
+
+  if (!device) return <div className="p-8 text-center text-muted-foreground">Loading...</div>
+
+  return (
+    <div className="space-y-6">
+      <PageHeader title={`Edit: ${device.name}`} description={`${device.internalCode}`} />
+      {error && <div className="bg-destructive/10 text-destructive p-3 rounded-md text-sm">{error}</div>}
+
+      <form onSubmit={handleSubmit}>
+        <div className="grid gap-6 md:grid-cols-2">
+          <Card>
+            <CardHeader><CardTitle>Device Identity</CardTitle></CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <Label htmlFor="name">Device Name</Label>
+                <Input id="name" name="name" defaultValue={device.name} />
+              </div>
+              <div>
+                <Label htmlFor="assetNumber">Asset Number</Label>
+                <Input id="assetNumber" name="assetNumber" defaultValue={device.assetNumber} />
+              </div>
+              <div>
+                <Label htmlFor="serialNumber">Serial Number</Label>
+                <Input id="serialNumber" name="serialNumber" defaultValue={device.serialNumber || ""} />
+              </div>
+              <div>
+                <Label htmlFor="modelNameFree">Model Name</Label>
+                <Input id="modelNameFree" name="modelNameFree" defaultValue={device.modelNameFree || ""} />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader><CardTitle>Classification</CardTitle></CardHeader>
+            <CardContent className="space-y-4">
+              <div>
+                <Label htmlFor="criticalityLevel">Criticality Level</Label>
+                <select id="criticalityLevel" name="criticalityLevel" defaultValue={device.criticalityLevel || "medium"}
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
+                  <option value="critical">Critical</option>
+                  <option value="high">High</option>
+                  <option value="medium">Medium</option>
+                  <option value="low">Low</option>
+                </select>
+              </div>
+              <div>
+                <Label htmlFor="riskClassification">Risk Classification</Label>
+                <select id="riskClassification" name="riskClassification" defaultValue={device.riskClassification || ""}
+                  className="w-full rounded-md border border-input bg-background px-3 py-2 text-sm">
+                  <option value="">Select...</option>
+                  <option value="class_i">Class I</option>
+                  <option value="class_iia">Class IIa</option>
+                  <option value="class_iib">Class IIb</option>
+                  <option value="class_iii">Class III</option>
+                </select>
+              </div>
+              <div>
+                <Label htmlFor="exactLocationDescription">Exact Location</Label>
+                <Input id="exactLocationDescription" name="exactLocationDescription" defaultValue={device.exactLocationDescription || ""} />
+              </div>
+            </CardContent>
+          </Card>
+
+          <Card className="md:col-span-2">
+            <CardHeader><CardTitle>Warranty</CardTitle></CardHeader>
+            <CardContent className="grid gap-4 md:grid-cols-3">
+              <div>
+                <Label htmlFor="warrantyStartDate">Warranty Start</Label>
+                <Input id="warrantyStartDate" name="warrantyStartDate" type="date" defaultValue={device.warrantyStartDate || ""} />
+              </div>
+              <div>
+                <Label htmlFor="warrantyEndDate">Warranty End</Label>
+                <Input id="warrantyEndDate" name="warrantyEndDate" type="date" defaultValue={device.warrantyEndDate || ""} />
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+
+        <div className="flex justify-end gap-3 mt-6">
+          <Button type="button" variant="outline" onClick={() => router.back()}>Cancel</Button>
+          <Button type="submit" disabled={loading}>
+            {loading ? "Saving..." : "Save Changes"}
+          </Button>
+        </div>
+      </form>
+    </div>
+  )
+}