admin/dyolink
0
0
Fork 0
Code Issues 24 Pull Requests 1 Actions Packages Projects 1 Releases Wiki Activity

feature: treatment frontend wired with the newly implemented backend. no mocked data no more.

Browse Source
This commit is contained in:
Admin
2026-05-19 23:43:43 +03:30
parent f743046b38
commit 633c939560
13 changed files with 1199 additions and 528 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
frontend/src/components/ui/treatment/PastTreatmentsPanel.tsx
View File

@@ -2,98 +2,117 @@
import { FileText } from 'lucide-react';
import type { PastTreatment } from '@/types/treatment';
import { CaseSentLabel } from '@/components/ui/treatment/CaseSentLabel';
interface PastTreatmentsPanelProps {
items: PastTreatment[];
loading?: boolean;
selectedTreatmentId?: string | null;
onSelectTreatment?: (treatment: PastTreatment) => void;
onReviewTreatment?: (treatment: PastTreatment) => void;
}
export function PastTreatmentsPanel({
items,
loading,
selectedTreatmentId,
onSelectTreatment,
onReviewTreatment,
}: PastTreatmentsPanelProps) {
return (
<div className="surface-card p-4 space-y-3">
<div>
<h3 className="text-sm font-semibold text-text-primary">Previous treatments</h3>
<p className="text-xs text-text-muted mt-0.5">
Document preview is not implemented yet; file names are listed for context.
<p className="text-[11px] text-text-muted mt-0.5">
Completed treatments for this patient. Each case is listed separately.
</p>
</div>
{loading && <p className="text-sm text-text-muted">Loading history...</p>}
{loading && <p className="text-sm text-text-muted">Loading history…</p>}
{!loading && items.length === 0 && (
<p className="text-sm text-text-muted">No prior treatments for this patient.</p>
)}
<div className="space-y-3 max-h-[min(420px,55vh)] overflow-y-auto pr-1">
<div className="space-y-3 max-h-[min(420px,50vh)] overflow-y-auto pr-1">
{items.map((t) => (
<article
key={t.id}
className={`border rounded-[var(--radius-md)] p-3 ${
selectedTreatmentId === t.id
? 'border-primary/70 bg-primary-soft/35'
: 'border-border/70 bg-background-secondary/40'
}`}
className="border border-border/70 rounded-[var(--radius-md)] p-2.5 bg-background-secondary/40 space-y-2"
>
<div className="flex items-start justify-between gap-2">
<p className="text-sm font-medium text-text-primary">{t.title}</p>
<time className="text-xs text-text-muted tabular-nums shrink-0" dateTime={t.treatmentAt}>
<div className="min-w-0">
<p className="text-sm font-medium text-text-primary truncate">{t.title}</p>
<p className="text-[11px] text-text-secondary capitalize mt-0.5">Status: {t.status}</p>
</div>
<time
className="text-[11px] text-text-muted tabular-nums shrink-0"
dateTime={t.treatmentAt}
>
{new Date(t.treatmentAt).toLocaleDateString()}
</time>
</div>
<p className="text-xs text-text-secondary mt-1">Status: {t.status}</p>
{t.cases.length > 0 && (
<ul className="mt-2 space-y-1.5 text-xs text-text-secondary">
{t.cases.map((c) => (
<li key={c.id}>
<span className="text-text-primary font-medium">Case: </span>
<span className="capitalize">{c.treatmentType}</span>
{' | '}
{c.teeth.length > 0 ? `Teeth ${[...c.teeth].sort().join(', ')}` : 'No teeth tagged'}
{c.notes ? ` — ${c.notes}` : ''}
</li>
))}
</ul>
)}
<div className="space-y-1.5">
{t.cases.map((c, idx) => {
const attachments = c.attachmentMetas ?? [];
return (
<div
key={c.id}
className="border border-border/60 rounded-[var(--radius-sm)] px-2.5 py-2 bg-background-secondary/30 space-y-1"
>
<div className="flex items-center justify-between gap-2">
<p className="text-xs font-medium text-text-primary capitalize">
Case {idx + 1} · {c.treatmentType}
</p>
{c.sentAt && (
<CaseSentLabel
treatmentCase={c}
className="text-[10px] text-text-muted shrink-0 text-right"
/>
)}
</div>
<p className="text-[11px] text-text-secondary">
Teeth: {c.teeth.length ? [...c.teeth].sort().join(', ') : 'None selected'}
</p>
{c.notes?.trim() && (
<p className="text-[11px] text-text-muted line-clamp-2">{c.notes}</p>
)}
<div>
<p className="text-[10px] uppercase tracking-wide text-text-muted mb-1">
Attachments
</p>
{attachments.length === 0 ? (
<p className="text-[11px] text-text-muted">None</p>
) : (
<ul className="space-y-0.5">
{attachments.map((doc) => (
<li
key={doc.id}
className="flex items-center gap-1.5 text-[11px] text-text-secondary"
>
<FileText className="w-3 h-3 shrink-0 icon-flat" aria-hidden />
<span className="truncate">{doc.fileName}</span>
<span className="text-text-muted tabular-nums shrink-0">
{(doc.sizeBytes / 1024).toFixed(1)} KB
</span>
</li>
))}
</ul>
)}
</div>
</div>
);
})}
</div>
{onSelectTreatment && (
<div className="mt-3 pt-2 border-t border-border/50 flex justify-end">
{onReviewTreatment && (
<div className="pt-1 flex justify-end">
<button
type="button"
onClick={() => onSelectTreatment(t)}
onClick={() => onReviewTreatment(t)}
className="text-xs text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 rounded-[var(--radius-sm)] px-1"
>
Review details
</button>
</div>
)}
{t.documents.length > 0 && (
<div className="mt-3 pt-2 border-t border-border/50">
<p className="text-[11px] uppercase tracking-wide text-text-muted mb-1.5">Attachments</p>
<ul className="space-y-1">
{t.documents.map((doc) => (
<li
key={doc.id}
className="flex items-center gap-2 text-xs text-text-secondary"
>
<FileText className="w-3.5 h-3.5 shrink-0 icon-flat" aria-hidden />
<span className="truncate">{doc.fileName}</span>
<span className="text-text-muted tabular-nums shrink-0">
{(doc.sizeBytes / 1024).toFixed(1)} KB
</span>
</li>
))}
</ul>
</div>
)}
</article>
))}
</div>