mirror of
https://github.com/temetro/temetro.git
synced 2026-08-21 23:47:14 +00:00
Add Calendar dialog, Prescriptions & Messages pages, note delete confirm
- Appointments: a Calendar button next to Add opens a month-grid dialog (reuses the Calendar primitive + shared ScheduleList); the schedule day is marked and selecting it lists that day's appointments. - Patients sub-nav: new Prescriptions page (mock list + KPIs) with a compact "New prescription" dialog reusing the patient quick-search pattern. - Notes: deleting a note now goes through a reusable ConfirmDialog instead of deleting immediately. - New top-level Messages page: two-pane email-style inbox (list + reading pane with mock reply composer), mirroring the Notes layout. - Sidebar logo bumped from size-9 to size-10. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Khalid Abdi
@@ -0,0 +1,268 @@
|
||||
"use client";
|
||||
|
||||
import { Search } from "lucide-react";
|
||||
import { type FormEvent, type ReactNode, useEffect, useMemo, useState } from "react";
|
||||
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
Dialog,
|
||||
DialogClose,
|
||||
DialogDescription,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogPanel,
|
||||
DialogPopup,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { listPatients, type Patient } from "@/lib/patients";
|
||||
import { notify } from "@/lib/toast";
|
||||
|
||||
export type NewPrescription = {
|
||||
fileNumber: string;
|
||||
name: string;
|
||||
initials: string;
|
||||
medication: string;
|
||||
dose: string;
|
||||
frequency: string;
|
||||
duration: string;
|
||||
};
|
||||
|
||||
const FREQUENCIES = [
|
||||
"Once daily",
|
||||
"Twice daily",
|
||||
"Three times daily",
|
||||
"Every 8 hours",
|
||||
"As needed",
|
||||
];
|
||||
|
||||
const controlClass =
|
||||
"h-9 w-full rounded-3xl border border-transparent bg-input/50 px-3 text-sm text-foreground outline-none transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/30";
|
||||
|
||||
function Field({ label, children }: { label: string; children: ReactNode }) {
|
||||
return (
|
||||
<label className="flex flex-col gap-1.5">
|
||||
<span className="text-muted-foreground text-xs">{label}</span>
|
||||
{children}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
// Compact "New prescription" dialog. The patient is chosen via a quick search by
|
||||
// name or file number (same pattern as the appointment dialog); the rest is the
|
||||
// medication detail. Prescriptions are mock-only, so the new entry is handed back
|
||||
// to the page via onAdd.
|
||||
export function AddPrescriptionDialog({
|
||||
open,
|
||||
onOpenChange,
|
||||
onAdd,
|
||||
}: {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
onAdd: (rx: NewPrescription) => void;
|
||||
}) {
|
||||
const [patients, setPatients] = useState<Patient[]>([]);
|
||||
const [query, setQuery] = useState("");
|
||||
const [selected, setSelected] = useState<Patient | null>(null);
|
||||
const [medication, setMedication] = useState("");
|
||||
const [dose, setDose] = useState("");
|
||||
const [frequency, setFrequency] = useState(FREQUENCIES[0]);
|
||||
const [duration, setDuration] = useState("");
|
||||
|
||||
// Load patients lazily when the dialog opens (for the quick search).
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
let active = true;
|
||||
listPatients()
|
||||
.then((data) => {
|
||||
if (active) setPatients(data);
|
||||
})
|
||||
.catch(() => {
|
||||
/* search just stays empty */
|
||||
});
|
||||
return () => {
|
||||
active = false;
|
||||
};
|
||||
}, [open]);
|
||||
|
||||
const matches = useMemo(() => {
|
||||
const q = query.trim().toLowerCase();
|
||||
if (!q) return [];
|
||||
return patients
|
||||
.filter(
|
||||
(p) => p.name.toLowerCase().includes(q) || p.fileNumber.includes(q),
|
||||
)
|
||||
.slice(0, 6);
|
||||
}, [patients, query]);
|
||||
|
||||
const reset = () => {
|
||||
setQuery("");
|
||||
setSelected(null);
|
||||
setMedication("");
|
||||
setDose("");
|
||||
setFrequency(FREQUENCIES[0]);
|
||||
setDuration("");
|
||||
};
|
||||
|
||||
const submit = (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
if (!selected) {
|
||||
notify.error("Pick a patient", "Search and select a patient first.");
|
||||
return;
|
||||
}
|
||||
if (!medication.trim()) {
|
||||
notify.error("Add a medication", "Enter the medication name.");
|
||||
return;
|
||||
}
|
||||
onAdd({
|
||||
fileNumber: selected.fileNumber,
|
||||
name: selected.name,
|
||||
initials: selected.initials,
|
||||
medication: medication.trim(),
|
||||
dose: dose.trim(),
|
||||
frequency,
|
||||
duration: duration.trim(),
|
||||
});
|
||||
notify.success("Prescription added", `${medication.trim()} for ${selected.name}`);
|
||||
reset();
|
||||
onOpenChange(false);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog
|
||||
onOpenChange={(o) => {
|
||||
onOpenChange(o);
|
||||
if (!o) reset();
|
||||
}}
|
||||
open={open}
|
||||
>
|
||||
<DialogPopup className="sm:max-w-md">
|
||||
<DialogHeader>
|
||||
<DialogTitle>New prescription</DialogTitle>
|
||||
<DialogDescription>
|
||||
Search for a patient by name or file number, then set the medication.
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form className="contents" onSubmit={submit}>
|
||||
<DialogPanel className="flex flex-col gap-4">
|
||||
<Field label="Patient">
|
||||
{selected ? (
|
||||
<div className="flex items-center justify-between gap-2 rounded-2xl border bg-input/30 px-3 py-2">
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="truncate font-medium text-foreground text-sm">
|
||||
{selected.name}
|
||||
</span>
|
||||
<span className="text-muted-foreground text-xs">
|
||||
File #{selected.fileNumber}
|
||||
</span>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSelected(null);
|
||||
setQuery("");
|
||||
}}
|
||||
size="sm"
|
||||
type="button"
|
||||
variant="ghost"
|
||||
>
|
||||
Change
|
||||
</Button>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="relative">
|
||||
<Search className="-translate-y-1/2 absolute top-1/2 left-3 size-4 text-muted-foreground" />
|
||||
<Input
|
||||
autoFocus
|
||||
className="pl-9"
|
||||
onChange={(event) => setQuery(event.target.value)}
|
||||
placeholder="Search name or file number"
|
||||
value={query}
|
||||
/>
|
||||
</div>
|
||||
{query.trim() && (
|
||||
<div className="max-h-56 overflow-y-auto rounded-2xl border bg-popover p-1">
|
||||
{matches.length === 0 ? (
|
||||
<p className="px-2 py-2 text-muted-foreground text-sm">
|
||||
No patients found.
|
||||
</p>
|
||||
) : (
|
||||
matches.map((p) => (
|
||||
<button
|
||||
className="flex w-full items-center justify-between gap-2 rounded-lg px-2 py-1.5 text-left transition-colors hover:bg-accent"
|
||||
key={p.fileNumber}
|
||||
onClick={() => {
|
||||
setSelected(p);
|
||||
setQuery("");
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
<span className="truncate text-foreground text-sm">
|
||||
{p.name}
|
||||
</span>
|
||||
<span className="shrink-0 text-muted-foreground text-xs">
|
||||
#{p.fileNumber}
|
||||
</span>
|
||||
</button>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Field>
|
||||
|
||||
<Field label="Medication">
|
||||
<Input
|
||||
onChange={(event) => setMedication(event.target.value)}
|
||||
placeholder="e.g. Amoxicillin"
|
||||
value={medication}
|
||||
/>
|
||||
</Field>
|
||||
|
||||
<div className="grid grid-cols-2 gap-3">
|
||||
<Field label="Dose">
|
||||
<Input
|
||||
onChange={(event) => setDose(event.target.value)}
|
||||
placeholder="e.g. 500 mg"
|
||||
value={dose}
|
||||
/>
|
||||
</Field>
|
||||
<Field label="Frequency">
|
||||
<select
|
||||
className={controlClass}
|
||||
onChange={(event) => setFrequency(event.target.value)}
|
||||
value={frequency}
|
||||
>
|
||||
{FREQUENCIES.map((f) => (
|
||||
<option key={f} value={f}>
|
||||
{f}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</Field>
|
||||
</div>
|
||||
|
||||
<Field label="Duration">
|
||||
<Input
|
||||
onChange={(event) => setDuration(event.target.value)}
|
||||
placeholder="e.g. 7 days"
|
||||
value={duration}
|
||||
/>
|
||||
</Field>
|
||||
</DialogPanel>
|
||||
|
||||
<DialogFooter>
|
||||
<DialogClose render={<Button type="button" variant="outline" />}>
|
||||
Cancel
|
||||
</DialogClose>
|
||||
<Button disabled={!selected} type="submit">
|
||||
Add prescription
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogPopup>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,249 @@
|
||||
"use client";
|
||||
|
||||
import { CircleCheck, Clock, Pill, Plus } from "lucide-react";
|
||||
import { type ReactNode, useState } from "react";
|
||||
|
||||
import {
|
||||
AddPrescriptionDialog,
|
||||
type NewPrescription,
|
||||
} from "@/components/prescriptions/add-prescription-dialog";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card } from "@/components/ui/card";
|
||||
|
||||
// All figures here are mock/placeholder data — there is no prescriptions backend.
|
||||
// They illustrate the Prescriptions layout.
|
||||
|
||||
type RxStatus = "active" | "completed" | "expired";
|
||||
|
||||
type Prescription = {
|
||||
fileNumber: string;
|
||||
name: string;
|
||||
initials: string;
|
||||
medication: string;
|
||||
dose: string;
|
||||
frequency: string;
|
||||
prescriber: string;
|
||||
date: string;
|
||||
status: RxStatus;
|
||||
};
|
||||
|
||||
const statusVariant: Record<
|
||||
RxStatus,
|
||||
"default" | "secondary" | "destructive" | "outline"
|
||||
> = {
|
||||
active: "default",
|
||||
completed: "outline",
|
||||
expired: "destructive",
|
||||
};
|
||||
|
||||
const statusLabel: Record<RxStatus, string> = {
|
||||
active: "Active",
|
||||
completed: "Completed",
|
||||
expired: "Expired",
|
||||
};
|
||||
|
||||
const kpis = [
|
||||
{ label: "Active", value: "8", icon: Pill },
|
||||
{ label: "Due refill", value: "3", icon: Clock },
|
||||
{ label: "Completed", value: "27", icon: CircleCheck },
|
||||
];
|
||||
|
||||
const initial: Prescription[] = [
|
||||
{
|
||||
fileNumber: "10293",
|
||||
name: "Amina Yusuf",
|
||||
initials: "AY",
|
||||
medication: "Lisinopril",
|
||||
dose: "10 mg",
|
||||
frequency: "Once daily",
|
||||
prescriber: "Dr. Okafor",
|
||||
date: "Jun 5, 2026",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
fileNumber: "10311",
|
||||
name: "Daniel Mensah",
|
||||
initials: "DM",
|
||||
medication: "Metformin",
|
||||
dose: "500 mg",
|
||||
frequency: "Twice daily",
|
||||
prescriber: "Dr. Okafor",
|
||||
date: "Jun 4, 2026",
|
||||
status: "active",
|
||||
},
|
||||
{
|
||||
fileNumber: "10342",
|
||||
name: "Leila Haddad",
|
||||
initials: "LH",
|
||||
medication: "Amoxicillin",
|
||||
dose: "500 mg",
|
||||
frequency: "Three times daily",
|
||||
prescriber: "Dr. Stein",
|
||||
date: "May 28, 2026",
|
||||
status: "completed",
|
||||
},
|
||||
{
|
||||
fileNumber: "10358",
|
||||
name: "Carlos Rivera",
|
||||
initials: "CR",
|
||||
medication: "Atorvastatin",
|
||||
dose: "20 mg",
|
||||
frequency: "Once daily",
|
||||
prescriber: "Dr. Okafor",
|
||||
date: "May 12, 2026",
|
||||
status: "expired",
|
||||
},
|
||||
{
|
||||
fileNumber: "10377",
|
||||
name: "Priya Nair",
|
||||
initials: "PN",
|
||||
medication: "Salbutamol inhaler",
|
||||
dose: "100 mcg",
|
||||
frequency: "As needed",
|
||||
prescriber: "Dr. Stein",
|
||||
date: "Jun 1, 2026",
|
||||
status: "active",
|
||||
},
|
||||
];
|
||||
|
||||
function Kpi({
|
||||
label,
|
||||
value,
|
||||
icon: Icon,
|
||||
}: {
|
||||
label: string;
|
||||
value: string;
|
||||
icon: typeof Pill;
|
||||
}) {
|
||||
return (
|
||||
<Card className="flex-row items-center gap-3 p-4">
|
||||
<div className="flex size-9 items-center justify-center rounded-lg border bg-background text-muted-foreground">
|
||||
<Icon className="size-4" />
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-muted-foreground text-xs">{label}</span>
|
||||
<span className="font-semibold text-foreground text-lg tracking-tight">
|
||||
{value}
|
||||
</span>
|
||||
</div>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
function RxRow({ rx }: { rx: Prescription }) {
|
||||
return (
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<Avatar className="size-8">
|
||||
<AvatarFallback>{rx.initials}</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="flex min-w-0 flex-1 flex-col">
|
||||
<span className="truncate font-medium text-foreground text-sm">
|
||||
{rx.medication}
|
||||
{rx.dose && (
|
||||
<span className="font-normal text-muted-foreground"> · {rx.dose}</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="truncate text-muted-foreground text-xs">
|
||||
{rx.name} · #{rx.fileNumber} · {rx.frequency}
|
||||
</span>
|
||||
</div>
|
||||
<div className="hidden min-w-0 flex-col items-end sm:flex">
|
||||
<span className="truncate text-foreground text-xs">{rx.prescriber}</span>
|
||||
<span className="text-muted-foreground text-xs">{rx.date}</span>
|
||||
</div>
|
||||
<Badge variant={statusVariant[rx.status]}>{statusLabel[rx.status]}</Badge>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function Section({
|
||||
title,
|
||||
description,
|
||||
children,
|
||||
}: {
|
||||
title: string;
|
||||
description?: string;
|
||||
children: ReactNode;
|
||||
}) {
|
||||
return (
|
||||
<section className="flex flex-col gap-3">
|
||||
<div>
|
||||
<h2 className="font-semibold text-lg tracking-tight">{title}</h2>
|
||||
{description && (
|
||||
<p className="text-muted-foreground text-sm">{description}</p>
|
||||
)}
|
||||
</div>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function PrescriptionsView() {
|
||||
const [addOpen, setAddOpen] = useState(false);
|
||||
const [list, setList] = useState<Prescription[]>(initial);
|
||||
|
||||
// Insert a new (mock) prescription at the top of the list, marked active.
|
||||
const addPrescription = (rx: NewPrescription) => {
|
||||
setList((prev) => [
|
||||
{
|
||||
fileNumber: rx.fileNumber,
|
||||
name: rx.name,
|
||||
initials: rx.initials,
|
||||
medication: rx.medication,
|
||||
dose: rx.dose,
|
||||
frequency: rx.frequency,
|
||||
prescriber: "Dr. Okafor",
|
||||
date: new Date().toLocaleDateString("en-US", {
|
||||
month: "short",
|
||||
day: "numeric",
|
||||
year: "numeric",
|
||||
}),
|
||||
status: "active" as const,
|
||||
},
|
||||
...prev,
|
||||
]);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto flex w-full max-w-5xl flex-col gap-10 px-6 py-10">
|
||||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||||
<div>
|
||||
<h1 className="font-semibold text-2xl tracking-tight">Prescriptions</h1>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Medications prescribed across the clinic. Sample data.
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
className="rounded-3xl"
|
||||
onClick={() => setAddOpen(true)}
|
||||
type="button"
|
||||
>
|
||||
<Plus className="size-4" />
|
||||
New prescription
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
|
||||
{kpis.map((k) => (
|
||||
<Kpi key={k.label} {...k} />
|
||||
))}
|
||||
</div>
|
||||
|
||||
<Section description="Most recent first" title="Recent prescriptions">
|
||||
<div className="divide-y divide-border overflow-hidden rounded-2xl border bg-card/30">
|
||||
{list.map((rx) => (
|
||||
<RxRow key={rx.fileNumber + rx.medication + rx.date} rx={rx} />
|
||||
))}
|
||||
</div>
|
||||
</Section>
|
||||
|
||||
<AddPrescriptionDialog
|
||||
onAdd={addPrescription}
|
||||
onOpenChange={setAddOpen}
|
||||
open={addOpen}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user