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() { /> } /> } /> + } /> } /> } /> } /> 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(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(` + + + + Barcode — ${patientLabel} + + + + ${svgData} +

${patientLabel}

+