From ac4d8c4c745a034070411da7fea2f6f1f94bf672 Mon Sep 17 00:00:00 2001
From: Gitead <uclach@hotmail.com>
Date: Thu, 2 Jul 2026 13:03:58 -0400
Subject: [PATCH] feat: add lab management layout, barcode generation, and
 dental education page

- Redesign lab management tab with patient search table and action buttons
- Add react-barcode integration: generates CODE128 barcode from patient name with print and download support
- Add Dental Education page and sidebar entry between Cloud Storage and AI Input Agent

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 apps/Frontend/package.json                    |   1 +
 apps/Frontend/src/App.tsx                     |   2 +
 .../src/components/chart/barcode-modal.tsx    | 116 +++++
 .../components/chart/lab-management-tab.tsx   | 414 +++---------------
 .../src/components/layout/sidebar.tsx         |   6 +
 .../src/pages/dental-education-page.tsx       |  27 ++
 package-lock.json                             |  89 ++--
 7 files changed, 241 insertions(+), 414 deletions(-)
 create mode 100644 apps/Frontend/src/components/chart/barcode-modal.tsx
 create mode 100644 apps/Frontend/src/pages/dental-education-page.tsx

diff --git a/apps/Frontend/package.json b/apps/Frontend/package.json
index de13f573..50588ec9 100755
--- a/apps/Frontend/package.json
+++ b/apps/Frontend/package.json
@@ -68,6 +68,7 @@
     "pdfjs-dist": "^3.11.174",
     "postcss": "^8.4.47",
     "react": "^19.1.0",
+    "react-barcode": "^1.6.1",
     "react-contexify": "^6.0.0",
     "react-day-picker": "9.7.0",
     "react-dnd": "^16.0.1",
diff --git a/apps/Frontend/src/App.tsx b/apps/Frontend/src/App.tsx
index 4091a641..ddb34c16 100755
--- a/apps/Frontend/src/App.tsx
+++ b/apps/Frontend/src/App.tsx
@@ -29,6 +29,7 @@ const ReportsPage = lazy(() => import("./pages/reports-page"));
 const CloudStoragePage = lazy(() => import("./pages/cloud-storage-page"));
 const JobMonitorPage = lazy(() => import("./pages/job-monitor-page"));
 const ChartPage = lazy(() => import("./pages/chart-page"));
+const DentalEducationPage = lazy(() => import("./pages/dental-education-page"));
 const AiInputAgentPage = lazy(() => import("./pages/ai-input-agent-page"));
 const DentalShoppingSearchTagPage = lazy(() => import("./pages/dental-shopping-search-tag-page"));
 const DentalShoppingLoginInfoPage = lazy(() => import("./pages/dental-shopping-login-info-page"));
@@ -65,6 +66,7 @@ function Router() {
       />
       <ProtectedRoute path="/reports" component={() => <ReportsPage />} />
       <ProtectedRoute path="/cloud-storage" component={() => <CloudStoragePage />} />
+      <ProtectedRoute path="/dental-education" component={() => <DentalEducationPage />} />
       <ProtectedRoute path="/ai-input-agent" component={() => <AiInputAgentPage />} />
       <ProtectedRoute path="/dental-shopping/search-tag" component={() => <DentalShoppingSearchTagPage />} />
       <ProtectedRoute path="/dental-shopping/login-info" component={() => <DentalShoppingLoginInfoPage />} />
diff --git a/apps/Frontend/src/components/chart/barcode-modal.tsx b/apps/Frontend/src/components/chart/barcode-modal.tsx
new file mode 100644
index 00000000..20a70fcf
--- /dev/null
+++ b/apps/Frontend/src/components/chart/barcode-modal.tsx
@@ -0,0 +1,116 @@
+import { useRef } from "react";
+import Barcode from "react-barcode";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Download, Printer } from "lucide-react";
+import { Patient } from "@repo/db/types";
+
+interface BarcodeModalProps {
+  open: boolean;
+  onClose: () => void;
+  patient: Patient;
+}
+
+export function BarcodeModal({ open, onClose, patient }: BarcodeModalProps) {
+  const barcodeRef = useRef<HTMLDivElement>(null);
+
+  const patientLabel = `${patient.firstName ?? ""} ${patient.lastName ?? ""}`.trim();
+  const barcodeValue = patientLabel || "PATIENT";
+
+  const handlePrint = () => {
+    const svg = barcodeRef.current?.querySelector("svg");
+    if (!svg) return;
+
+    const svgData = new XMLSerializer().serializeToString(svg);
+    const printWindow = window.open("", "_blank", "width=400,height=300");
+    if (!printWindow) return;
+
+    printWindow.document.write(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>Barcode — ${patientLabel}</title>
+          <style>
+            body { margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; font-family: sans-serif; }
+            p { margin: 4px 0 0; font-size: 13px; color: #333; }
+          </style>
+        </head>
+        <body>
+          ${svgData}
+          <p>${patientLabel}</p>
+          <script>window.onload = () => { window.print(); window.close(); }<\/script>
+        </body>
+      </html>
+    `);
+    printWindow.document.close();
+  };
+
+  const handleDownload = () => {
+    const svg = barcodeRef.current?.querySelector("svg");
+    if (!svg) return;
+
+    const canvas = document.createElement("canvas");
+    const svgData = new XMLSerializer().serializeToString(svg);
+    const img = new Image();
+    const svgBlob = new Blob([svgData], { type: "image/svg+xml;charset=utf-8" });
+    const url = URL.createObjectURL(svgBlob);
+
+    img.onload = () => {
+      canvas.width = img.width;
+      canvas.height = img.height;
+      const ctx = canvas.getContext("2d")!;
+      ctx.fillStyle = "#ffffff";
+      ctx.fillRect(0, 0, canvas.width, canvas.height);
+      ctx.drawImage(img, 0, 0);
+      URL.revokeObjectURL(url);
+
+      const link = document.createElement("a");
+      link.download = `barcode-${patientLabel.replace(/\s+/g, "-")}.png`;
+      link.href = canvas.toDataURL("image/png");
+      link.click();
+    };
+
+    img.src = url;
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onClose}>
+      <DialogContent className="max-w-sm">
+        <DialogHeader>
+          <DialogTitle>Patient Barcode</DialogTitle>
+        </DialogHeader>
+
+        <div className="flex flex-col items-center gap-3 py-4">
+          <div ref={barcodeRef}>
+            <Barcode
+              value={barcodeValue}
+              format="CODE128"
+              width={2}
+              height={80}
+              displayValue={true}
+              fontSize={13}
+              margin={10}
+            />
+          </div>
+        </div>
+
+        <DialogFooter className="gap-2">
+          <Button variant="outline" onClick={handlePrint} className="gap-2">
+            <Printer className="h-4 w-4" />
+            Print
+          </Button>
+          <Button onClick={handleDownload} className="gap-2">
+            <Download className="h-4 w-4" />
+            Download PNG
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/apps/Frontend/src/components/chart/lab-management-tab.tsx b/apps/Frontend/src/components/chart/lab-management-tab.tsx
index 856c09e7..3637bfb9 100644
--- a/apps/Frontend/src/components/chart/lab-management-tab.tsx
+++ b/apps/Frontend/src/components/chart/lab-management-tab.tsx
@@ -1,364 +1,70 @@
 import { useState } from "react";
 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 { Badge } from "@/components/ui/badge";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "@/components/ui/table";
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogFooter,
-} from "@/components/ui/dialog";
-import { Plus, Pencil, Trash2, Package } from "lucide-react";
-
-type LabStatus = "pending" | "in-lab" | "received" | "delivered" | "cancelled";
-
-interface LabOrder {
-  id: number;
-  orderDate: string;
-  dueDate: string;
-  tooth: string;
-  caseType: string;
-  lab: string;
-  shade: string;
-  status: LabStatus;
-  rush: boolean;
-  notes: string;
-  trackingNumber: string;
-}
-
-const STATUS_COLORS: Record<LabStatus, string> = {
-  pending: "bg-yellow-100 text-yellow-700 border-yellow-200",
-  "in-lab": "bg-blue-100 text-blue-700 border-blue-200",
-  received: "bg-green-100 text-green-700 border-green-200",
-  delivered: "bg-gray-100 text-gray-600 border-gray-200",
-  cancelled: "bg-red-100 text-red-600 border-red-200",
-};
-
-const STATUS_LABELS: Record<LabStatus, string> = {
-  pending: "Pending",
-  "in-lab": "In Lab",
-  received: "Received",
-  delivered: "Delivered",
-  cancelled: "Cancelled",
-};
-
-const CASE_TYPES = [
-  "Crown – PFM",
-  "Crown – All Ceramic",
-  "Crown – Zirconia",
-  "Crown – Gold",
-  "Bridge – PFM",
-  "Bridge – Zirconia",
-  "Implant Crown",
-  "Implant Abutment",
-  "Veneer",
-  "Inlay / Onlay",
-  "Full Denture (Upper)",
-  "Full Denture (Lower)",
-  "Partial Denture",
-  "Night Guard",
-  "Bleaching Tray",
-  "Retainer",
-  "Diagnostic Model",
-  "Other",
-];
-
-const COMMON_LABS = [
-  "Dental Arts Lab",
-  "National Dentex",
-  "Glidewell Dental",
-  "Henry Schein Lab",
-  "Affordable Dentures Lab",
-  "Local Lab",
-];
-
-const SHADES = [
-  "A1", "A2", "A3", "A3.5", "A4",
-  "B1", "B2", "B3", "B4",
-  "C1", "C2", "C3", "C4",
-  "D2", "D3", "D4",
-  "BL1", "BL2", "BL3", "BL4",
-  "Custom",
-];
-
-let nextId = 1;
-const newOrder = (): LabOrder => ({
-  id: nextId++,
-  orderDate: new Date().toISOString().substring(0, 10),
-  dueDate: "",
-  tooth: "",
-  caseType: "",
-  lab: "",
-  shade: "",
-  status: "pending",
-  rush: false,
-  notes: "",
-  trackingNumber: "",
-});
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { PatientTable } from "@/components/patients/patient-table";
+import { BarcodeModal } from "@/components/chart/barcode-modal";
+import { Barcode, FileText } from "lucide-react";
+import { Patient } from "@repo/db/types";
 
 export function LabManagementTab() {
-  const [orders, setOrders] = useState<LabOrder[]>([]);
-  const [dialogOpen, setDialogOpen] = useState(false);
-  const [editing, setEditing] = useState<LabOrder>(newOrder());
-
-  const openAdd = () => {
-    setEditing(newOrder());
-    setDialogOpen(true);
-  };
-
-  const openEdit = (order: LabOrder) => {
-    setEditing({ ...order });
-    setDialogOpen(true);
-  };
-
-  const handleSave = () => {
-    setOrders((prev) => {
-      const idx = prev.findIndex((o) => o.id === editing.id);
-      if (idx >= 0) {
-        const next = [...prev];
-        next[idx] = editing;
-        return next;
-      }
-      return [...prev, editing];
-    });
-    setDialogOpen(false);
-  };
-
-  const handleDelete = (id: number) => {
-    setOrders((prev) => prev.filter((o) => o.id !== id));
-  };
-
-  const pending = orders.filter((o) => o.status === "pending" || o.status === "in-lab").length;
-  const rush = orders.filter((o) => o.rush && o.status !== "delivered" && o.status !== "cancelled").length;
+  const [selectedPatient, setSelectedPatient] = useState<Patient | null>(null);
+  const [barcodeOpen, setBarcodeOpen] = useState(false);
 
   return (
-    <div className="space-y-4">
-      <div className="flex items-center justify-between">
-        <div className="flex gap-4 text-sm text-gray-600">
-          {pending > 0 && <span>Open orders: <strong>{pending}</strong></span>}
-          {rush > 0 && <span className="text-red-600">Rush: <strong>{rush}</strong></span>}
-          {orders.length === 0 && <span>No lab orders yet</span>}
-        </div>
-        <Button size="sm" onClick={openAdd} className="gap-1.5">
-          <Plus className="h-4 w-4" />
-          New Lab Order
-        </Button>
-      </div>
-
-      <div className="border rounded-lg overflow-hidden">
-        <Table>
-          <TableHeader>
-            <TableRow className="bg-gray-50">
-              <TableHead className="w-24">Order Date</TableHead>
-              <TableHead className="w-16">Tooth</TableHead>
-              <TableHead>Case Type</TableHead>
-              <TableHead>Lab</TableHead>
-              <TableHead className="w-16 text-center">Shade</TableHead>
-              <TableHead className="w-24">Due</TableHead>
-              <TableHead className="w-28">Status</TableHead>
-              <TableHead className="w-20 text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {orders.length === 0 ? (
-              <TableRow>
-                <TableCell colSpan={8} className="text-center text-gray-400 py-10">
-                  <div className="flex flex-col items-center gap-2">
-                    <Package className="h-8 w-8 text-gray-300" />
-                    <span>No lab orders yet. Click "New Lab Order" to add one.</span>
-                  </div>
-                </TableCell>
-              </TableRow>
-            ) : (
-              orders.map((order) => (
-                <TableRow key={order.id} className={order.rush ? "bg-red-50/40" : ""}>
-                  <TableCell className="text-sm">{order.orderDate}</TableCell>
-                  <TableCell className="font-mono text-sm">{order.tooth || "—"}</TableCell>
-                  <TableCell>
-                    <div className="flex items-center gap-1.5">
-                      <span className="text-sm font-medium">{order.caseType}</span>
-                      {order.rush && (
-                        <Badge className="text-[10px] bg-red-100 text-red-600 border-red-200 px-1 py-0" variant="outline">
-                          RUSH
-                        </Badge>
-                      )}
-                    </div>
-                    {order.notes && (
-                      <p className="text-xs text-gray-400 truncate max-w-xs mt-0.5">{order.notes}</p>
-                    )}
-                  </TableCell>
-                  <TableCell className="text-sm text-gray-600">{order.lab || "—"}</TableCell>
-                  <TableCell className="text-center text-sm">{order.shade || "—"}</TableCell>
-                  <TableCell className="text-sm text-gray-600">{order.dueDate || "—"}</TableCell>
-                  <TableCell>
-                    <Badge className={`text-xs border ${STATUS_COLORS[order.status]}`} variant="outline">
-                      {STATUS_LABELS[order.status]}
-                    </Badge>
-                  </TableCell>
-                  <TableCell>
-                    <div className="flex justify-end gap-1">
-                      <Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEdit(order)}>
-                        <Pencil className="h-3.5 w-3.5" />
-                      </Button>
-                      <Button variant="ghost" size="icon" className="h-7 w-7 text-red-500 hover:text-red-600 hover:bg-red-50" onClick={() => handleDelete(order.id)}>
-                        <Trash2 className="h-3.5 w-3.5" />
-                      </Button>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              ))
-            )}
-          </TableBody>
-        </Table>
-      </div>
-
-      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent className="max-w-lg">
-          <DialogHeader>
-            <DialogTitle>Lab Order</DialogTitle>
-          </DialogHeader>
-          <div className="grid grid-cols-2 gap-3 py-2">
-            <div className="space-y-1">
-              <Label className="text-xs">Order Date</Label>
-              <Input
-                type="date"
-                value={editing.orderDate}
-                onChange={(e) => setEditing((d) => ({ ...d, orderDate: e.target.value }))}
-                className="h-9 text-sm"
-              />
-            </div>
-            <div className="space-y-1">
-              <Label className="text-xs">Due Date</Label>
-              <Input
-                type="date"
-                value={editing.dueDate}
-                onChange={(e) => setEditing((d) => ({ ...d, dueDate: e.target.value }))}
-                className="h-9 text-sm"
-              />
-            </div>
-            <div className="space-y-1">
-              <Label className="text-xs">Tooth #</Label>
-              <Input
-                placeholder="e.g. 14"
-                value={editing.tooth}
-                onChange={(e) => setEditing((d) => ({ ...d, tooth: e.target.value }))}
-                className="h-9 text-sm"
-              />
-            </div>
-            <div className="space-y-1">
-              <Label className="text-xs">Shade</Label>
-              <Select
-                value={editing.shade}
-                onValueChange={(v) => setEditing((d) => ({ ...d, shade: v }))}
-              >
-                <SelectTrigger className="h-9 text-sm">
-                  <SelectValue placeholder="Select..." />
-                </SelectTrigger>
-                <SelectContent>
-                  {SHADES.map((s) => <SelectItem key={s} value={s}>{s}</SelectItem>)}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="col-span-2 space-y-1">
-              <Label className="text-xs">Case Type</Label>
-              <Select
-                value={editing.caseType}
-                onValueChange={(v) => setEditing((d) => ({ ...d, caseType: v }))}
-              >
-                <SelectTrigger className="h-9 text-sm">
-                  <SelectValue placeholder="Select case type..." />
-                </SelectTrigger>
-                <SelectContent>
-                  {CASE_TYPES.map((c) => <SelectItem key={c} value={c}>{c}</SelectItem>)}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="col-span-2 space-y-1">
-              <Label className="text-xs">Lab</Label>
-              <Select
-                value={editing.lab}
-                onValueChange={(v) => setEditing((d) => ({ ...d, lab: v }))}
-              >
-                <SelectTrigger className="h-9 text-sm">
-                  <SelectValue placeholder="Select lab..." />
-                </SelectTrigger>
-                <SelectContent>
-                  {COMMON_LABS.map((l) => <SelectItem key={l} value={l}>{l}</SelectItem>)}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-1">
-              <Label className="text-xs">Status</Label>
-              <Select
-                value={editing.status}
-                onValueChange={(v) => setEditing((d) => ({ ...d, status: v as LabStatus }))}
-              >
-                <SelectTrigger className="h-9 text-sm">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {(Object.keys(STATUS_LABELS) as LabStatus[]).map((s) => (
-                    <SelectItem key={s} value={s}>{STATUS_LABELS[s]}</SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-            <div className="space-y-1">
-              <Label className="text-xs">Tracking #</Label>
-              <Input
-                placeholder="Optional"
-                value={editing.trackingNumber}
-                onChange={(e) => setEditing((d) => ({ ...d, trackingNumber: e.target.value }))}
-                className="h-9 text-sm"
-              />
-            </div>
-            <div className="col-span-2 flex items-center gap-2">
-              <input
-                type="checkbox"
-                id="rush"
-                checked={editing.rush}
-                onChange={(e) => setEditing((d) => ({ ...d, rush: e.target.checked }))}
-                className="h-4 w-4 rounded border-gray-300"
-              />
-              <Label htmlFor="rush" className="text-sm cursor-pointer text-red-600 font-medium">
-                Rush Order
-              </Label>
-            </div>
-            <div className="col-span-2 space-y-1">
-              <Label className="text-xs">Notes</Label>
-              <Textarea
-                placeholder="Special instructions, shade details..."
-                value={editing.notes}
-                onChange={(e) => setEditing((d) => ({ ...d, notes: e.target.value }))}
-                className="text-sm resize-none"
-                rows={2}
-              />
-            </div>
+    <div className="space-y-6">
+      {/* Action buttons */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Lab Actions</CardTitle>
+          <CardDescription>
+            {selectedPatient
+              ? `Selected patient: ${selectedPatient.firstName} ${selectedPatient.lastName}`
+              : "Select a patient below to get started."}
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex gap-4">
+            <Button
+              variant="outline"
+              className="gap-2"
+              disabled={!selectedPatient}
+              onClick={() => setBarcodeOpen(true)}
+            >
+              <Barcode className="h-4 w-4" />
+              Create a Barcode
+            </Button>
+            <Button variant="outline" className="gap-2" disabled>
+              <FileText className="h-4 w-4" />
+              Lab RX
+            </Button>
           </div>
-          <DialogFooter>
-            <Button variant="outline" onClick={() => setDialogOpen(false)}>Cancel</Button>
-            <Button onClick={handleSave} disabled={!editing.caseType}>Save</Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        </CardContent>
+      </Card>
+
+      {/* Patient search / selection */}
+      <Card>
+        <CardHeader>
+          <CardTitle>Patient Records</CardTitle>
+          <CardDescription>Select a patient by clicking the checkbox.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <PatientTable
+            allowView={true}
+            allowDelete={false}
+            allowCheckbox={true}
+            allowEdit={false}
+            onSelectPatient={setSelectedPatient}
+          />
+        </CardContent>
+      </Card>
+
+      {selectedPatient && (
+        <BarcodeModal
+          open={barcodeOpen}
+          onClose={() => setBarcodeOpen(false)}
+          patient={selectedPatient}
+        />
+      )}
     </div>
   );
 }
diff --git a/apps/Frontend/src/components/layout/sidebar.tsx b/apps/Frontend/src/components/layout/sidebar.tsx
index ba854ad3..d0f4bfe8 100755
--- a/apps/Frontend/src/components/layout/sidebar.tsx
+++ b/apps/Frontend/src/components/layout/sidebar.tsx
@@ -30,6 +30,7 @@ import {
   Building2,
   Timer,
   BookOpen,
+  GraduationCap,
   ShoppingCart,
   Search,
   KeyRound,
@@ -169,6 +170,11 @@ export function Sidebar() {
         path: "/cloud-storage",
         icon: <Cloud className="h-5 w-5 text-sky-500" />,
       },
+      {
+        name: "Dental Education",
+        path: "/dental-education",
+        icon: <GraduationCap className="h-5 w-5 text-lime-600" />,
+      },
       {
         name: "AI Input Agent",
         path: "/ai-input-agent",
diff --git a/apps/Frontend/src/pages/dental-education-page.tsx b/apps/Frontend/src/pages/dental-education-page.tsx
new file mode 100644
index 00000000..6dd7e765
--- /dev/null
+++ b/apps/Frontend/src/pages/dental-education-page.tsx
@@ -0,0 +1,27 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { GraduationCap } from "lucide-react";
+
+export default function DentalEducationPage() {
+  return (
+    <div className="container mx-auto space-y-6">
+      <div>
+        <h1 className="text-3xl font-bold tracking-tight">Dental Education</h1>
+        <p className="text-muted-foreground">Educational resources for dental staff and patients.</p>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <GraduationCap className="h-5 w-5 text-lime-600" />
+            Coming Soon
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-muted-foreground text-sm">
+            Dental education content will be available here.
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  );
+}
diff --git a/package-lock.json b/package-lock.json
index 6d37feb6..6c292e3c 100755
--- a/package-lock.json
+++ b/package-lock.json
@@ -142,6 +142,7 @@
         "pdfjs-dist": "^3.11.174",
         "postcss": "^8.4.47",
         "react": "^19.1.0",
+        "react-barcode": "^1.6.1",
         "react-contexify": "^6.0.0",
         "react-day-picker": "9.7.0",
         "react-dnd": "^16.0.1",
@@ -274,7 +275,6 @@
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -559,7 +559,8 @@
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@cfworker/json-schema/-/json-schema-4.1.1.tgz",
       "integrity": "sha512-gAmrUZSGtKc3AiBL71iNWxDsyUC5uMaKKGdvzYsBoTW/xi42JQHl7eKV2OYzCUqvc+D2RCcf7EXY2iCyFIk6og==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@chevrotain/cst-dts-gen": {
       "version": "10.5.0",
@@ -628,8 +629,7 @@
       "version": "0.3.15",
       "resolved": "https://registry.npmjs.org/@electric-sql/pglite/-/pglite-0.3.15.tgz",
       "integrity": "sha512-Cj++n1Mekf9ETfdc16TlDi+cDDQF0W7EcbyRHYOAeZdsAe8M/FJg18itDTSwyHfar2WIezawM9o0EKaRGVKygQ==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/@electric-sql/pglite-socket": {
       "version": "0.0.20",
@@ -659,7 +659,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -676,7 +675,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -693,7 +691,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -710,7 +707,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -727,7 +723,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -744,7 +739,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -761,7 +755,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -778,7 +771,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -795,7 +787,6 @@
       "cpu": [
         "arm"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -812,7 +803,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -829,7 +819,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -846,7 +835,6 @@
       "cpu": [
         "loong64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -863,7 +851,6 @@
       "cpu": [
         "mips64el"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -880,7 +867,6 @@
       "cpu": [
         "ppc64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -897,7 +883,6 @@
       "cpu": [
         "riscv64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -914,7 +899,6 @@
       "cpu": [
         "s390x"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -931,7 +915,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -948,7 +931,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -965,7 +947,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -982,7 +963,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -999,7 +979,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1016,7 +995,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1033,7 +1011,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1050,7 +1027,6 @@
       "cpu": [
         "arm64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1067,7 +1043,6 @@
       "cpu": [
         "ia32"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -1084,7 +1059,6 @@
       "cpu": [
         "x64"
       ],
-      "dev": true,
       "license": "MIT",
       "optional": true,
       "os": [
@@ -5013,7 +4987,6 @@
       "integrity": "sha512-PQTyIulDkIDro8P+IHbKCsw7U2xxBYflVzW/FgWdCAePD9xGSidgA76/GeJ6lBKoblyhf9pBY763gbrN+1dI8g==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "hoist-non-react-statics": "^3.3.0"
       },
@@ -5066,7 +5039,6 @@
       "resolved": "https://registry.npmjs.org/@types/node/-/node-20.16.11.tgz",
       "integrity": "sha512-y+cTCACu92FyA5fgQSAI8A1H429g7aSK2HsO7K4XYUWc4dY5IUz55JSDIYT6/VsOLfGy8vmvQYC2hfb0iF16Uw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "undici-types": "~6.19.2"
       }
@@ -5131,7 +5103,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.14.tgz",
       "integrity": "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "csstype": "^3.2.2"
       }
@@ -5142,7 +5113,6 @@
       "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^19.2.0"
       }
@@ -5281,7 +5251,6 @@
       "integrity": "sha512-klQbnPAAiGYFyI02+znpBRLyjL4/BrBd0nyWkdC0s/6xFLkXYQ8OoRrSkqacS1ddVxf/LDyODIKbQ5TgKAf/Fg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.56.1",
         "@typescript-eslint/types": "8.56.1",
@@ -5590,7 +5559,6 @@
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -6136,7 +6104,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -7265,8 +7232,7 @@
       "version": "8.6.0",
       "resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
       "integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/embla-carousel-react": {
       "version": "8.6.0",
@@ -7541,7 +7507,6 @@
       "integrity": "sha512-VmQ+sifHUbI/IcSopBCF/HO3YiHQx/AVd3UVyYL6weuwW+HvON9VYn5l6Zl1WZzPWXPNZrSQpxwkkZ/VuvJZzg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -8765,7 +8730,6 @@
       "resolved": "https://registry.npmjs.org/hono/-/hono-4.11.4.tgz",
       "integrity": "sha512-U7tt8JsyrxSRKspfhtLET79pU8K+tInj5QZXs1jSugO1Vq5dFj3kmZsRldo29mTBfcjDRVRXrEZ6LS63Cog9ZA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=16.9.0"
       }
@@ -9139,6 +9103,12 @@
         "js-yaml": "bin/js-yaml.js"
       }
     },
+    "node_modules/jsbarcode": {
+      "version": "3.12.3",
+      "resolved": "https://registry.npmjs.org/jsbarcode/-/jsbarcode-3.12.3.tgz",
+      "integrity": "sha512-CuHU9hC6dPsHF5oVFMo8NW76uQVjH4L22CsP4hW+dNnGywJHC/B0ThA1CTDVLnxKLrrpYdicBLnd2xsgTfRnvg==",
+      "license": "MIT"
+    },
     "node_modules/jsesc": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -9290,6 +9260,7 @@
       "resolved": "https://registry.npmjs.org/langsmith/-/langsmith-0.6.0.tgz",
       "integrity": "sha512-GGaj5IMRfLv2HXXFzGk9diISMYLTpSTh6fzCZGKxWYW/NqEztIFtnXLq6G/RVhzFRmCykLap1fuC67LVKoQLcg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "p-queue": "6.6.2"
       },
@@ -10141,6 +10112,7 @@
       "resolved": "https://registry.npmjs.org/mustache/-/mustache-4.2.0.tgz",
       "integrity": "sha512-71ippSywq5Yb7/tVYyGbkBggbU8H3u5Rz56fH60jGFgr8uHwxs+aSKeqmluIVzM0m0kB7xQjKS6qPfd0b2ZoqQ==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "mustache": "bin/mustache"
       }
@@ -10485,7 +10457,6 @@
       "resolved": "https://registry.npmjs.org/openai/-/openai-6.44.0.tgz",
       "integrity": "sha512-09/gH+8jH0RgUwsgWHAaxsKGRT5zVZ95IaJUnqAWj6XejIBmnFRwq2WUIF37VtDEsmGrtPmvCs5+yBSeZGWvkA==",
       "license": "Apache-2.0",
-      "peer": true,
       "peerDependencies": {
         "ws": "^8.18.0",
         "zod": "^3.25 || ^4.0"
@@ -10563,6 +10534,7 @@
       "resolved": "https://registry.npmjs.org/p-queue/-/p-queue-6.6.2.tgz",
       "integrity": "sha512-RwFpb72c/BhQLEXIZ5K2e+AhgNVmIejGlTgiB9MzZ0e93GRvqZ7uSi0dvRF7/XIXDeNkra2fNHBxTyPDGySpjQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "eventemitter3": "^4.0.4",
         "p-timeout": "^3.2.0"
@@ -10594,6 +10566,7 @@
       "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
       "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "p-finally": "^1.0.0"
       },
@@ -10768,7 +10741,6 @@
       "resolved": "https://registry.npmjs.org/pdfjs-dist/-/pdfjs-dist-3.11.174.tgz",
       "integrity": "sha512-TdTZPf1trZ8/UFu5Cx/GXB7GZM30LT+wWUNfsi6Bq8ePLnb+woNKtDymI2mxZYBpMbonNFqKmiz684DIfnd8dA==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -10801,7 +10773,6 @@
       "resolved": "https://registry.npmjs.org/pg/-/pg-8.18.0.tgz",
       "integrity": "sha512-xqrUDL1b9MbkydY/s+VZ6v+xiMUmOUk7SS9d/1kpyQxoJ6U9AO1oIJyUWVZojbfe5Cc/oluutcgFG4L9RDP1iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "pg-connection-string": "^2.11.0",
         "pg-pool": "^3.11.0",
@@ -10966,7 +10937,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -11196,7 +11166,6 @@
       "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
       "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "prettier": "bin/prettier.cjs"
       },
@@ -11889,11 +11858,23 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz",
       "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-barcode": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/react-barcode/-/react-barcode-1.6.1.tgz",
+      "integrity": "sha512-pc4ftnO5syHa/UjCruEeRsomlhoxKSugIgTA8T4dH0fvc89UMHL+/1Sp25IAphqG44pJkE5hMXhv89iS09jQyw==",
+      "license": "ISC",
+      "dependencies": {
+        "jsbarcode": "^3.8.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": "16 - 19"
+      }
+    },
     "node_modules/react-contexify": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/react-contexify/-/react-contexify-6.0.0.tgz",
@@ -11981,7 +11962,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz",
       "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "scheduler": "^0.27.0"
       },
@@ -11994,7 +11974,6 @@
       "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.71.2.tgz",
       "integrity": "sha512-1CHvcDYzuRUNOflt4MOq3ZM46AronNJtQ1S7tnX6YN4y72qhgiUItpacZUAQ0TyWYci3yz1X+rXaSxiuEm86PA==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=18.0.0"
       },
@@ -12026,7 +12005,6 @@
       "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
       "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/use-sync-external-store": "^0.0.6",
         "use-sync-external-store": "^1.4.0"
@@ -12307,8 +12285,7 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/redux-thunk": {
       "version": "3.1.0",
@@ -13240,7 +13217,6 @@
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
       "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@alloc/quick-lru": "^5.2.0",
         "arg": "^5.0.2",
@@ -13534,7 +13510,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -13812,7 +13787,6 @@
       "integrity": "sha512-5C1sg4USs1lfG0GFb2RLXsdpXqBSEhAaA/0kPL01wxzpMqLILNxIxIOKiILz+cdg/pLnOUxFYOR5yhHU666wbw==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "~0.27.0",
         "get-tsconfig": "^4.7.5"
@@ -13994,7 +13968,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -14285,7 +14258,6 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -14834,7 +14806,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -15073,7 +15044,6 @@
       "resolved": "https://registry.npmjs.org/ws/-/ws-8.19.0.tgz",
       "integrity": "sha512-blAT2mjOEIi0ZzruJfIhb3nps74PRWTCz1IjglWEEpQl5XS/UNama6u2/rjFkDDouqr4L67ry+1aGIALViWjDg==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -15196,7 +15166,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz",
       "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }