feat: add Chart section, colorize sidebar icons, rename nav items, patient action buttons, program bridge

2026-04-28 21:38:35 -04:00
parent 5d0d92d524
commit 371dea54f7
10 changed files with 1913 additions and 45 deletions
@@ -0,0 +1,112 @@
+import { useLocation } from "wouter";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { TeethChart } from "@/components/chart/teeth-chart";
+import { TreatmentPlanTab } from "@/components/chart/treatment-plan-tab";
+import { PrescriptionTab } from "@/components/chart/prescription-tab";
+import { LabManagementTab } from "@/components/chart/lab-management-tab";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { LayoutGrid, ListChecks, Pill, Microscope } from "lucide-react";
+
+const SECTIONS = [
+  { value: "charting",        label: "Charting Map",    icon: LayoutGrid },
+  { value: "treatment-plan",  label: "Treatment Plan",  icon: ListChecks },
+  { value: "prescription",    label: "Prescription",    icon: Pill },
+  { value: "lab-management",  label: "Lab Management",  icon: Microscope },
+] as const;
+
+type Section = (typeof SECTIONS)[number]["value"];
+
+function getSection(location: string): Section {
+  for (const s of SECTIONS) {
+    if (location.includes(s.value)) return s.value;
+  }
+  return "charting";
+}
+
+export default function ChartPage() {
+  const [location, navigate] = useLocation();
+  const activeTab = getSection(location);
+
+  return (
+    <div className="p-4 md:p-6 space-y-4">
+      <div>
+        <h1 className="text-xl font-semibold text-gray-900">Patient Chart</h1>
+        <p className="text-sm text-gray-500 mt-0.5">
+          Charting, treatment planning, prescriptions, and lab orders
+        </p>
+      </div>
+
+      <Tabs value={activeTab} onValueChange={(v) => navigate(`/chart/${v}`)}>
+        <TabsList className="grid w-full grid-cols-2 md:grid-cols-4 h-auto gap-1 bg-gray-100 p-1 rounded-lg">
+          {SECTIONS.map(({ value, label, icon: Icon }) => (
+            <TabsTrigger
+              key={value}
+              value={value}
+              className="flex items-center gap-1.5 text-xs sm:text-sm py-2"
+            >
+              <Icon className="h-3.5 w-3.5 flex-shrink-0" />
+              <span className="hidden sm:inline">{label}</span>
+              <span className="sm:hidden">{label.split(" ")[0]}</span>
+            </TabsTrigger>
+          ))}
+        </TabsList>
+
+        <TabsContent value="charting" className="mt-4">
+          <Card>
+            <CardHeader className="pb-3 pt-4 px-4">
+              <CardTitle className="text-base font-medium flex items-center gap-2">
+                <LayoutGrid className="h-4 w-4 text-primary" />
+                Charting Map
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-4 pb-4">
+              <TeethChart />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="treatment-plan" className="mt-4">
+          <Card>
+            <CardHeader className="pb-3 pt-4 px-4">
+              <CardTitle className="text-base font-medium flex items-center gap-2">
+                <ListChecks className="h-4 w-4 text-primary" />
+                Treatment Plan
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-4 pb-4">
+              <TreatmentPlanTab />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="prescription" className="mt-4">
+          <Card>
+            <CardHeader className="pb-3 pt-4 px-4">
+              <CardTitle className="text-base font-medium flex items-center gap-2">
+                <Pill className="h-4 w-4 text-primary" />
+                Prescription
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-4 pb-4">
+              <PrescriptionTab />
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="lab-management" className="mt-4">
+          <Card>
+            <CardHeader className="pb-3 pt-4 px-4">
+              <CardTitle className="text-base font-medium flex items-center gap-2">
+                <Microscope className="h-4 w-4 text-primary" />
+                Lab Management
+              </CardTitle>
+            </CardHeader>
+            <CardContent className="px-4 pb-4">
+              <LabManagementTab />
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  );
+}