113 lines
4.2 KiB
TypeScript
113 lines
4.2 KiB
TypeScript
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>
|
|
);
|
|
}
|