feat: add Chart section, colorize sidebar icons, rename nav items, patient action buttons, program bridge
This commit is contained in:
Gitead
324
apps/Frontend/src/components/chart/prescription-tab.tsx
Normal file
324
apps/Frontend/src/components/chart/prescription-tab.tsx
Normal file
@@ -0,0 +1,324 @@
|
||||
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, Printer } from "lucide-react";
|
||||
|
||||
interface Prescription {
|
||||
id: number;
|
||||
date: string;
|
||||
medication: string;
|
||||
dosage: string;
|
||||
frequency: string;
|
||||
duration: string;
|
||||
refills: number;
|
||||
route: string;
|
||||
indication: string;
|
||||
instructions: string;
|
||||
prescriber: string;
|
||||
}
|
||||
|
||||
const COMMON_MEDICATIONS = [
|
||||
"Amoxicillin 500mg",
|
||||
"Amoxicillin 875mg",
|
||||
"Clindamycin 300mg",
|
||||
"Clindamycin 150mg",
|
||||
"Metronidazole 500mg",
|
||||
"Azithromycin 250mg",
|
||||
"Ibuprofen 400mg",
|
||||
"Ibuprofen 600mg",
|
||||
"Ibuprofen 800mg",
|
||||
"Acetaminophen 500mg",
|
||||
"Naproxen 500mg",
|
||||
"Hydrocodone/APAP 5-325mg",
|
||||
"Oxycodone 5mg",
|
||||
"Tramadol 50mg",
|
||||
"Dexamethasone 4mg",
|
||||
"Prednisone 20mg",
|
||||
"Chlorhexidine 0.12% Rinse",
|
||||
"Nystatin Oral Suspension",
|
||||
"Fluconazole 150mg",
|
||||
"Benzocaine Topical",
|
||||
];
|
||||
|
||||
const FREQUENCIES = [
|
||||
"Once daily (QD)",
|
||||
"Twice daily (BID)",
|
||||
"Three times daily (TID)",
|
||||
"Four times daily (QID)",
|
||||
"Every 4 hours",
|
||||
"Every 6 hours",
|
||||
"Every 8 hours",
|
||||
"Every 12 hours",
|
||||
"As needed (PRN)",
|
||||
"With food",
|
||||
];
|
||||
|
||||
const ROUTES = ["Oral", "Topical", "Sublingual", "Rinse and spit"];
|
||||
|
||||
let nextId = 1;
|
||||
const newRx = (): Prescription => ({
|
||||
id: nextId++,
|
||||
date: new Date().toISOString().substring(0, 10),
|
||||
medication: "",
|
||||
dosage: "",
|
||||
frequency: "",
|
||||
duration: "",
|
||||
refills: 0,
|
||||
route: "Oral",
|
||||
indication: "",
|
||||
instructions: "",
|
||||
prescriber: "",
|
||||
});
|
||||
|
||||
export function PrescriptionTab() {
|
||||
const [prescriptions, setPrescriptions] = useState<Prescription[]>([]);
|
||||
const [dialogOpen, setDialogOpen] = useState(false);
|
||||
const [editing, setEditing] = useState<Prescription>(newRx());
|
||||
|
||||
const openAdd = () => {
|
||||
setEditing(newRx());
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const openEdit = (rx: Prescription) => {
|
||||
setEditing({ ...rx });
|
||||
setDialogOpen(true);
|
||||
};
|
||||
|
||||
const handleSave = () => {
|
||||
setPrescriptions((prev) => {
|
||||
const idx = prev.findIndex((r) => r.id === editing.id);
|
||||
if (idx >= 0) {
|
||||
const next = [...prev];
|
||||
next[idx] = editing;
|
||||
return next;
|
||||
}
|
||||
return [...prev, editing];
|
||||
});
|
||||
setDialogOpen(false);
|
||||
};
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
setPrescriptions((prev) => prev.filter((r) => r.id !== id));
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-gray-500">
|
||||
{prescriptions.length} prescription{prescriptions.length !== 1 ? "s" : ""}
|
||||
</p>
|
||||
<Button size="sm" onClick={openAdd} className="gap-1.5">
|
||||
<Plus className="h-4 w-4" />
|
||||
New Prescription
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="border rounded-lg overflow-hidden">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow className="bg-gray-50">
|
||||
<TableHead className="w-24">Date</TableHead>
|
||||
<TableHead>Medication</TableHead>
|
||||
<TableHead className="w-32">Frequency</TableHead>
|
||||
<TableHead className="w-24">Duration</TableHead>
|
||||
<TableHead className="w-16 text-center">Refills</TableHead>
|
||||
<TableHead>Prescriber</TableHead>
|
||||
<TableHead className="w-24 text-right">Actions</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{prescriptions.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={7} className="text-center text-gray-400 py-10">
|
||||
No prescriptions yet. Click "New Prescription" to add one.
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
prescriptions.map((rx) => (
|
||||
<TableRow key={rx.id}>
|
||||
<TableCell className="text-sm">{rx.date}</TableCell>
|
||||
<TableCell>
|
||||
<div>
|
||||
<p className="text-sm font-medium">{rx.medication}</p>
|
||||
<p className="text-xs text-gray-400">{rx.dosage} · {rx.route}</p>
|
||||
{rx.instructions && (
|
||||
<p className="text-xs text-gray-400 mt-0.5 truncate max-w-xs">{rx.instructions}</p>
|
||||
)}
|
||||
</div>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-gray-600">{rx.frequency}</TableCell>
|
||||
<TableCell className="text-sm text-gray-600">{rx.duration}</TableCell>
|
||||
<TableCell className="text-center">
|
||||
<Badge variant="secondary" className="text-xs">{rx.refills}</Badge>
|
||||
</TableCell>
|
||||
<TableCell className="text-sm text-gray-600">{rx.prescriber || "—"}</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex justify-end gap-1">
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7" title="Print" onClick={() => window.print()}>
|
||||
<Printer className="h-3.5 w-3.5" />
|
||||
</Button>
|
||||
<Button variant="ghost" size="icon" className="h-7 w-7" onClick={() => openEdit(rx)}>
|
||||
<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(rx.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>New Prescription</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="grid grid-cols-2 gap-3 py-2">
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">Date</Label>
|
||||
<Input
|
||||
type="date"
|
||||
value={editing.date}
|
||||
onChange={(e) => setEditing((d) => ({ ...d, date: e.target.value }))}
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">Route</Label>
|
||||
<Select
|
||||
value={editing.route}
|
||||
onValueChange={(v) => setEditing((d) => ({ ...d, route: v }))}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{ROUTES.map((r) => <SelectItem key={r} value={r}>{r}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1">
|
||||
<Label className="text-xs">Medication</Label>
|
||||
<Select
|
||||
value={editing.medication}
|
||||
onValueChange={(v) => setEditing((d) => ({ ...d, medication: v }))}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
<SelectValue placeholder="Select medication..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{COMMON_MEDICATIONS.map((m) => <SelectItem key={m} value={m}>{m}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">Dosage</Label>
|
||||
<Input
|
||||
placeholder="e.g. 500mg"
|
||||
value={editing.dosage}
|
||||
onChange={(e) => setEditing((d) => ({ ...d, dosage: e.target.value }))}
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">Frequency</Label>
|
||||
<Select
|
||||
value={editing.frequency}
|
||||
onValueChange={(v) => setEditing((d) => ({ ...d, frequency: v }))}
|
||||
>
|
||||
<SelectTrigger className="h-9 text-sm">
|
||||
<SelectValue placeholder="Select..." />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
{FREQUENCIES.map((f) => <SelectItem key={f} value={f}>{f}</SelectItem>)}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">Duration</Label>
|
||||
<Input
|
||||
placeholder="e.g. 7 days"
|
||||
value={editing.duration}
|
||||
onChange={(e) => setEditing((d) => ({ ...d, duration: e.target.value }))}
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<Label className="text-xs">Refills</Label>
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
max="12"
|
||||
value={editing.refills}
|
||||
onChange={(e) => setEditing((d) => ({ ...d, refills: Number(e.target.value) }))}
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1">
|
||||
<Label className="text-xs">Indication</Label>
|
||||
<Input
|
||||
placeholder="Reason for prescription"
|
||||
value={editing.indication}
|
||||
onChange={(e) => setEditing((d) => ({ ...d, indication: e.target.value }))}
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1">
|
||||
<Label className="text-xs">Patient Instructions</Label>
|
||||
<Textarea
|
||||
placeholder="Take with food, avoid alcohol..."
|
||||
value={editing.instructions}
|
||||
onChange={(e) => setEditing((d) => ({ ...d, instructions: e.target.value }))}
|
||||
className="text-sm resize-none"
|
||||
rows={2}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 space-y-1">
|
||||
<Label className="text-xs">Prescriber</Label>
|
||||
<Input
|
||||
placeholder="Provider name"
|
||||
value={editing.prescriber}
|
||||
onChange={(e) => setEditing((d) => ({ ...d, prescriber: e.target.value }))}
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<Button variant="outline" onClick={() => setDialogOpen(false)}>Cancel</Button>
|
||||
<Button onClick={handleSave} disabled={!editing.medication}>Save</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user