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

improvement: treatment preview and treatment history components overhauled. draft & completed status for treatment plan completely removed from the flow.

Browse Source
This commit is contained in:
Admin
2026-06-28 21:45:33 +03:30
parent 94b97aa0fa
commit feb0b26ad0
20 changed files with 571 additions and 608 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,39 +1,29 @@
'use client';
import { useTranslations } from 'next-intl';
import { FileText } from 'lucide-react';
import { TreatmentHistoryDetailLine } from '@/components/ui/treatment/TreatmentHistoryDetailLine';
import type { PastTreatment } from '@/types/treatment';
import { CaseSentLabel } from '@/components/ui/treatment/CaseSentLabel';
const TREATMENT_TYPE_KEYS = {
consultation: 'typeConsultation',
filling: 'typeFilling',
endo: 'typeEndo',
visit: 'typeVisit',
hygiene: 'typeHygiene',
} as const;
interface PastTreatmentsPanelProps {
items: PastTreatment[];
loading?: boolean;
onReviewTreatment?: (treatment: PastTreatment) => void;
selectedPreviewId?: string | null;
onSelectTreatment?: (treatment: PastTreatment) => void;
}
export function PastTreatmentsPanel({
items,
loading,
onReviewTreatment,
selectedPreviewId,
onSelectTreatment,
}: PastTreatmentsPanelProps) {
const t = useTranslations('treatment');
const tCommon = useTranslations('common');
return (
<div className="surface-card p-4 space-y-3">
<div>
<h3 className="text-sm font-semibold text-text-primary">{t('historyTitle')}</h3>
<p className="text-[11px] text-text-muted mt-0.5">
{t('historySubtitle')}
</p>
<p className="text-[11px] text-text-muted mt-0.5">{t('historySubtitle')}</p>
</div>
{loading && <p className="text-sm text-text-muted">{t('loadingHistory')}</p>}
@@ -42,95 +32,60 @@ export function PastTreatmentsPanel({
<p className="text-sm text-text-muted">{t('historyEmpty')}</p>
)}
<div className="space-y-3 max-h-[min(420px,50vh)] overflow-y-auto pr-1">
{items.map((treatment) => (
<article
key={treatment.id}
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">
<div className="min-w-0">
<p className="text-sm font-medium text-text-primary truncate">{treatment.title}</p>
<p className="text-[11px] text-text-secondary capitalize mt-0.5">
{t('statusLabel')} {treatment.status}
</p>
</div>
<div className="space-y-1.5 max-h-[min(420px,50vh)] overflow-y-auto pr-1">
{items.map((treatment) => {
const isSelected = selectedPreviewId === treatment.id;
return (
<article
key={treatment.id}
role="button"
tabIndex={0}
onClick={() => onSelectTreatment?.(treatment)}
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
onSelectTreatment?.(treatment);
}
}}
className={`
border rounded-[var(--radius-sm)] px-2 py-1.5 cursor-pointer transition-colors
focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/45
${
isSelected
? 'border-primary bg-primary/5'
: 'border-border/60 bg-background-secondary/30 hover:border-border hover:bg-background-secondary/50'
}
`}
>
<time
className="text-[11px] text-text-muted tabular-nums shrink-0"
className="text-xs font-medium text-text-primary tabular-nums block"
dateTime={treatment.treatmentAt}
>
{new Date(treatment.treatmentAt).toLocaleDateString()}
{new Date(treatment.treatmentAt).toLocaleDateString(undefined, {
year: 'numeric',
month: 'short',
day: 'numeric',
})}
</time>
</div>
<div className="space-y-1.5">
{treatment.details.map((c, idx) => {
const attachments = c.attachmentMetas ?? [];
const typeKey = TREATMENT_TYPE_KEYS[c.treatmentType as keyof typeof TREATMENT_TYPE_KEYS];
const typeLabel = typeKey ? t(typeKey) : c.treatmentType;
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">
{t('historyCaseLabel', { n: idx + 1, type: typeLabel })}
</p>
{c.sentAt && (
<CaseSentLabel
treatmentCase={c}
className="text-[10px] text-text-muted shrink-0 text-right"
/>
)}
{treatment.details.length === 0 ? (
<p className="text-[10px] text-text-muted mt-1">{t('noDetails')}</p>
) : (
<div className="mt-1.5 divide-y divide-border/50 border-t border-border/40 pointer-events-none">
{treatment.details.map((detail, idx) => (
<div key={detail.clientId ?? detail.id} className="py-1.5">
<TreatmentHistoryDetailLine
detail={detail}
detailNumber={idx + 1}
/>
</div>
<p className="text-[11px] text-text-secondary">
{t('teethLabel')} {c.teeth.length ? [...c.teeth].sort().join(', ') : t('teethNone')}
</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">
{t('attachments')}
</p>
{attachments.length === 0 ? (
<p className="text-[11px] text-text-muted">{tCommon('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>
{onReviewTreatment && (
<div className="pt-1 flex justify-end">
<button
type="button"
onClick={() => onReviewTreatment(treatment)}
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"
>
{t('reviewDetails')}
</button>
</div>
)}
</article>
))}
))}
</div>
)}
</article>
);
})}
</div>
</div>
);