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

apps/Frontend/src/pages/chart-page.tsx

@@ -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>
+  );
+}

apps/Frontend/src/pages/patients-page.tsx

@@ -3,7 +3,19 @@ import { useMutation } from "@tanstack/react-query";
 import { PatientTable } from "@/components/patients/patient-table";
 import { AddPatientModal } from "@/components/patients/add-patient-modal";
 import { Button } from "@/components/ui/button";
-import { Plus, RefreshCw, FilePlus } from "lucide-react";
+import {
+  Plus,
+  RefreshCw,
+  FilePlus,
+  CalendarPlus,
+  History,
+  HeartPulse,
+  FolderOpen,
+  Scan,
+  Camera,
+  NotebookPen,
+  FileCheck2,
+} from "lucide-react";
 import { useToast } from "@/hooks/use-toast";
 import {
   Card,
@@ -408,7 +420,7 @@ export default function PatientsPage() {
                 maxFileSizeMB={20}
               />
 
-              <div className="flex flex-col-2 gap-2 mt-4">
+              <div className="flex flex-wrap gap-2 mt-4">
                 <Button
                   className="w-full h-12 gap-2"
                   disabled={uploadedFiles.length === 0 || isExtracting}
@@ -461,6 +473,47 @@ export default function PatientsPage() {
                   )}
                 </Button>
               </div>
+
+              {/* Patient action buttons */}
+              <div className="mt-5 pt-4 border-t border-gray-200">
+                <p className="text-xs font-medium text-gray-500 uppercase tracking-wider mb-3">
+                  Patient Actions
+                </p>
+                <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
+                  <Button variant="outline" className="h-11 gap-2 text-sm justify-start" disabled>
+                    <CalendarPlus className="h-4 w-4 text-blue-500 flex-shrink-0" />
+                    New Appointment
+                  </Button>
+                  <Button variant="outline" className="h-11 gap-2 text-sm justify-start" disabled>
+                    <History className="h-4 w-4 text-indigo-500 flex-shrink-0" />
+                    Appointment History
+                  </Button>
+                  <Button variant="outline" className="h-11 gap-2 text-sm justify-start" disabled>
+                    <HeartPulse className="h-4 w-4 text-rose-500 flex-shrink-0" />
+                    Medical/Dental History
+                  </Button>
+                  <Button variant="outline" className="h-11 gap-2 text-sm justify-start" disabled>
+                    <FolderOpen className="h-4 w-4 text-yellow-500 flex-shrink-0" />
+                    Documents
+                  </Button>
+                  <Button variant="outline" className="h-11 gap-2 text-sm justify-start" disabled>
+                    <Scan className="h-4 w-4 text-teal-500 flex-shrink-0" />
+                    View Radiographs
+                  </Button>
+                  <Button variant="outline" className="h-11 gap-2 text-sm justify-start" disabled>
+                    <Camera className="h-4 w-4 text-cyan-500 flex-shrink-0" />
+                    Take New Radiographs
+                  </Button>
+                  <Button variant="outline" className="h-11 gap-2 text-sm justify-start" disabled>
+                    <NotebookPen className="h-4 w-4 text-violet-500 flex-shrink-0" />
+                    Clinic Notes
+                  </Button>
+                  <Button variant="outline" className="h-11 gap-2 text-sm justify-start" disabled>
+                    <FileCheck2 className="h-4 w-4 text-orange-500 flex-shrink-0" />
+                    New Claims
+                  </Button>
+                </div>
+              </div>
             </CardContent>
           </Card>
         </div>

apps/Frontend/src/pages/settings-page.tsx

@@ -10,6 +10,7 @@ import { CredentialTable } from "@/components/settings/insuranceCredTable";
 import { useAuth } from "@/hooks/use-auth";
 import { Staff } from "@repo/db/types";
 import { NpiProviderTable } from "@/components/settings/npiProviderTable";
+import { ProgramBridgeTable } from "@/components/settings/program-bridge-table";
 
 export default function SettingsPage() {
   const { toast } = useToast();
@@ -496,6 +497,11 @@ export default function SettingsPage() {
       <div className="mt-6">
         <NpiProviderTable />
       </div>
+
+      {/* Program Bridge Section */}
+      <div className="mt-6">
+        <ProgramBridgeTable />
+      </div>
     </div>
   );
 }