395 lines
16 KiB
TypeScript
395 lines
16 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useMemo, useState, type ReactNode } from 'react';
|
|
import { useLocale, useTranslations } from 'next-intl';
|
|
import { Download, MessageSquare } from 'lucide-react';
|
|
import { Badge } from '@/components/ui/shared/Badge';
|
|
import { Button } from '@/components/ui/shared/Button';
|
|
import { Checkbox } from '@/components/ui/shared/Checkbox';
|
|
import { Input } from '@/components/ui/shared/Input';
|
|
import { CaseToothChartPanel } from '@/components/ui/lab/CaseToothChartPanel';
|
|
import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
|
|
import { LabCaseAttachmentPreview } from '@/components/ui/lab/LabCaseAttachmentPreview';
|
|
import { LabCaseAttachmentsDialog } from '@/components/ui/lab/LabCaseAttachmentsDialog';
|
|
import {
|
|
LabCaseShareQrDialog,
|
|
LabCaseShareQrThumb,
|
|
} from '@/components/ui/lab/LabCaseShareQrDialog';
|
|
import { labTaskStatusVariant } from '@/components/lab/labTaskStatusDisplay';
|
|
import { LabCaseDueDateBadge } from '@/components/lab/LabCaseDueDateBadge';
|
|
import { LabCaseOriginBadge } from '@/components/ui/lab/LabCaseOriginBadge';
|
|
import { formatToothList } from '@/components/treatment/prosthesisTypeDisplay';
|
|
import { ProsthesisStackedTypeLabel } from '@/components/ui/lab/ProsthesisStackedTypeLabel';
|
|
import { prosthesisCatalogApi } from '@/lib/api/prosthesis-catalog';
|
|
import {
|
|
buildCaseConnectedTeeth,
|
|
buildCaseProsthesisRows,
|
|
formatCaseDateTime,
|
|
formatPatientName,
|
|
latestCaseAttachment,
|
|
} from '@/components/lab/caseDetailUtils';
|
|
import { downloadCaseSheetPdf } from '@/components/lab/caseSheetPdf';
|
|
import { ConnectedSelectionBadge } from '@/components/ui/treatment/ConnectedSelectionBadge';
|
|
import { useToast } from '@/lib/hooks/useToast';
|
|
import type { AssignableTaskStaff, LabCaseDetail, LabTaskStatus } from '@/types/cases';
|
|
import type { ProsthesisCatalogEntry } from '@/types/treatment-catalog';
|
|
|
|
function CaseTaskProgressBar({ completed, total }: { completed: number; total: number }) {
|
|
const pct = total > 0 ? Math.round((completed / total) * 100) : 0;
|
|
|
|
return (
|
|
<div className="space-y-1">
|
|
<div className="flex items-center justify-between text-xs text-text-muted">
|
|
<span>
|
|
{completed}/{total}
|
|
</span>
|
|
<span>{pct}%</span>
|
|
</div>
|
|
<div className="h-1.5 rounded-full bg-border overflow-hidden">
|
|
<div
|
|
className="h-full rounded-full bg-primary transition-all duration-300"
|
|
style={{ width: `${pct}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export interface CaseDetailPanelProps {
|
|
labCase: LabCaseDetail;
|
|
locale: string;
|
|
treatmentLabel: (type: string) => string;
|
|
statusOptions: { value: LabTaskStatus; label: string }[];
|
|
loadAttachmentBlob: (caseId: string, attachmentId: string) => Promise<Blob>;
|
|
/** Extra lines below patient mobile (e.g. connection-specific clinic/lab line). */
|
|
headerMetaLines?: ReactNode;
|
|
showCommentsButton?: boolean;
|
|
commentCount?: number;
|
|
onCommentsClick?: () => void;
|
|
canEditImportant?: boolean;
|
|
updatingImportant?: boolean;
|
|
onImportantChange?: (checked: boolean) => void;
|
|
updatingExternalCode?: boolean;
|
|
onExternalCodeChange?: (externalCode: string | null) => void;
|
|
commentsSection?: ReactNode;
|
|
assignableStaff?: AssignableTaskStaff[];
|
|
canAssignTasks?: boolean;
|
|
assigningTaskId?: string | null;
|
|
onAssignTask?: (taskId: string, assigneeUserId: string | null) => void;
|
|
}
|
|
|
|
export function CaseDetailPanel({
|
|
labCase,
|
|
locale,
|
|
treatmentLabel,
|
|
statusOptions,
|
|
loadAttachmentBlob,
|
|
headerMetaLines,
|
|
showCommentsButton = false,
|
|
commentCount = 0,
|
|
onCommentsClick,
|
|
canEditImportant = false,
|
|
updatingImportant = false,
|
|
onImportantChange,
|
|
updatingExternalCode = false,
|
|
onExternalCodeChange,
|
|
commentsSection,
|
|
assignableStaff = [],
|
|
canAssignTasks = false,
|
|
assigningTaskId = null,
|
|
onAssignTask,
|
|
}: CaseDetailPanelProps) {
|
|
const t = useTranslations('cases');
|
|
const tTreatment = useTranslations('treatment');
|
|
const intlLocale = useLocale();
|
|
const toast = useToast();
|
|
const [attachmentsDialogOpen, setAttachmentsDialogOpen] = useState(false);
|
|
const [shareQrDialogOpen, setShareQrDialogOpen] = useState(false);
|
|
const [prosthesisCatalog, setProsthesisCatalog] = useState<ProsthesisCatalogEntry[]>([]);
|
|
const [downloadingPdf, setDownloadingPdf] = useState(false);
|
|
const [externalCodeDraft, setExternalCodeDraft] = useState(labCase.externalCode ?? '');
|
|
|
|
useEffect(() => {
|
|
setExternalCodeDraft(labCase.externalCode ?? '');
|
|
}, [labCase.id, labCase.externalCode]);
|
|
|
|
useEffect(() => {
|
|
void prosthesisCatalogApi
|
|
.list()
|
|
.then((response) => setProsthesisCatalog(response.data))
|
|
.catch(() => {});
|
|
}, []);
|
|
|
|
const prosthesisRows = useMemo(() => buildCaseProsthesisRows(labCase), [labCase]);
|
|
const connectedTeeth = useMemo(() => buildCaseConnectedTeeth(labCase), [labCase]);
|
|
const previewAttachment = useMemo(() => latestCaseAttachment(labCase), [labCase]);
|
|
|
|
async function handleDownloadCaseSheet() {
|
|
setDownloadingPdf(true);
|
|
try {
|
|
await downloadCaseSheetPdf({
|
|
labCase,
|
|
locale: intlLocale,
|
|
prosthesisCatalog,
|
|
labels: {
|
|
title: t('caseSheetTitle'),
|
|
orderNumber: t('caseSheetOrderNumber'),
|
|
orderDate: t('caseSheetOrderDate'),
|
|
dateDue: t('caseSheetDateDue'),
|
|
sender: t('caseSheetSender'),
|
|
recipient: t('caseSheetRecipient'),
|
|
patient: t('caseSheetPatient'),
|
|
patientId: t('caseSheetPatientId'),
|
|
prosthesis: t('caseSheetProsthesis'),
|
|
toothChart: t('caseSheetToothChart'),
|
|
connected: tTreatment('connectedBadge'),
|
|
teeth: t('teethLabel'),
|
|
archUpper: tTreatment('selectedArchUpper'),
|
|
archLower: tTreatment('selectedArchLower'),
|
|
comments: t('caseSheetComments'),
|
|
noComments: t('caseSheetNoComments'),
|
|
},
|
|
});
|
|
} catch {
|
|
toast.showError(t('errorDownloadCaseSheet'));
|
|
} finally {
|
|
setDownloadingPdf(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<header className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between border-b border-border pb-3">
|
|
<div className="min-w-0 flex-1 space-y-1">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<h2 className="text-lg font-semibold text-text-primary">
|
|
{formatPatientName(labCase.patient)}
|
|
</h2>
|
|
<LabCaseDueDateBadge dueDate={labCase.dueDate} locale={locale} />
|
|
<LabCaseOriginBadge origin={labCase.origin} />
|
|
</div>
|
|
{!canEditImportant && labCase.isImportant ? (
|
|
<Badge variant="warning" fixedWidth={false} className="mt-1">
|
|
{t('importantLabel')}
|
|
</Badge>
|
|
) : null}
|
|
<p className="text-sm text-text-muted">
|
|
{t('patientMobile')}: {labCase.patient.mobile}
|
|
</p>
|
|
{headerMetaLines}
|
|
<p className="text-sm text-text-muted">
|
|
{t('sentAt', { date: formatCaseDateTime(labCase.sentAt, locale) })}
|
|
</p>
|
|
<div className="pt-1 max-w-xs">
|
|
<p className="text-sm text-text-muted mb-1">
|
|
{t('taskProgressLabel', {
|
|
completed: labCase.taskProgress.completed,
|
|
total: labCase.taskProgress.total,
|
|
})}
|
|
</p>
|
|
<CaseTaskProgressBar
|
|
completed={labCase.taskProgress.completed}
|
|
total={labCase.taskProgress.total}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex w-full sm:w-auto shrink-0 flex-col items-end gap-2">
|
|
{canEditImportant ? (
|
|
<div className="flex w-full max-w-sm items-center gap-3">
|
|
<Checkbox
|
|
checked={labCase.isImportant ?? false}
|
|
disabled={updatingImportant}
|
|
label={t('markCaseImportant')}
|
|
labelPosition="start"
|
|
className="shrink-0"
|
|
onChange={(checked) => onImportantChange?.(checked)}
|
|
/>
|
|
<div className="min-w-0 flex-1">
|
|
<Input
|
|
value={externalCodeDraft}
|
|
placeholder={t('externalCodePlaceholder')}
|
|
disabled={updatingExternalCode}
|
|
maxLength={64}
|
|
aria-label={t('externalCodePlaceholder')}
|
|
onChange={(e) => setExternalCodeDraft(e.target.value)}
|
|
onBlur={() => {
|
|
const next = externalCodeDraft.trim() || null;
|
|
const prev = labCase.externalCode?.trim() || null;
|
|
if (next === prev) return;
|
|
onExternalCodeChange?.(next);
|
|
}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
) : labCase.externalCode?.trim() ? (
|
|
<p className="text-sm text-text-muted">{labCase.externalCode.trim()}</p>
|
|
) : null}
|
|
<div className="flex w-full sm:w-auto flex-wrap items-center justify-end gap-2">
|
|
{showCommentsButton && onCommentsClick ? (
|
|
<Button type="button" variant="outline" size="sm" onClick={onCommentsClick}>
|
|
<MessageSquare className="h-4 w-4 me-1.5" />
|
|
{commentCount > 0
|
|
? t('commentsCount', { count: commentCount })
|
|
: t('showComments')}
|
|
</Button>
|
|
) : null}
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
size="sm"
|
|
isLoading={downloadingPdf}
|
|
onClick={() => void handleDownloadCaseSheet()}
|
|
>
|
|
<Download className="h-4 w-4 me-1.5" />
|
|
{t('downloadCaseSheet')}
|
|
</Button>
|
|
</div>
|
|
{labCase.shareUrl || (previewAttachment && labCase.attachments.length > 0) ? (
|
|
<div className="flex flex-row items-center gap-2 shrink-0">
|
|
{previewAttachment && labCase.attachments.length > 0 ? (
|
|
<button
|
|
type="button"
|
|
onClick={() => setAttachmentsDialogOpen(true)}
|
|
className="aspect-square w-24 sm:w-32 cursor-pointer rounded-[var(--radius-md)] border border-border/60 overflow-hidden transition-colors hover:border-primary/40 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary"
|
|
title={previewAttachment.fileName}
|
|
aria-label={t('viewAttachments')}
|
|
>
|
|
<LabCaseAttachmentPreview
|
|
caseId={labCase.id}
|
|
attachment={previewAttachment}
|
|
loadBlob={loadAttachmentBlob}
|
|
className="h-full w-full"
|
|
/>
|
|
</button>
|
|
) : null}
|
|
{labCase.shareUrl ? (
|
|
<LabCaseShareQrThumb
|
|
shareUrl={labCase.shareUrl}
|
|
onClick={() => setShareQrDialogOpen(true)}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</header>
|
|
|
|
<CaseToothChartPanel
|
|
details={labCase.detail ? [{ teeth: labCase.detail.teeth }] : []}
|
|
prosthesisRows={prosthesisRows}
|
|
connectedTeeth={connectedTeeth}
|
|
prosthesisCatalog={prosthesisCatalog}
|
|
className="w-full"
|
|
/>
|
|
|
|
{labCase.detail ? (
|
|
<div className="space-y-2">
|
|
<h3 className="text-sm font-medium text-text-primary">{t('treatmentDetails')}</h3>
|
|
<div className="rounded-md bg-background border border-border p-2 text-sm">
|
|
<div className="font-medium">{treatmentLabel(labCase.detail.treatmentType)}</div>
|
|
<div className="flex flex-wrap items-center gap-2 text-text-muted">
|
|
<span>
|
|
{t('teethLabel')}: {labCase.detail.teeth.join(', ') || '—'}
|
|
</span>
|
|
{connectedTeeth.size > 0 ? <ConnectedSelectionBadge /> : null}
|
|
</div>
|
|
{labCase.detail.comment ? (
|
|
<div className="text-text-muted mt-1">{labCase.detail.comment}</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="space-y-3">
|
|
<h3 className="text-sm font-medium text-text-primary">{t('tasksByTooth')}</h3>
|
|
{labCase.tasksByTooth.length === 0 ? (
|
|
<p className="text-sm text-text-muted">{t('noTasks')}</p>
|
|
) : (
|
|
labCase.tasksByTooth.map((group) => (
|
|
<div
|
|
key={`${group.treatmentDetailId}-${group.selectionGroupId ?? ''}-${group.prosthesisTypeCode}`}
|
|
className="rounded-md border border-border p-3 space-y-2"
|
|
>
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<ProsthesisStackedTypeLabel
|
|
className="min-w-0 whitespace-normal break-words text-sm font-medium"
|
|
code={group.prosthesisTypeCode}
|
|
catalog={prosthesisCatalog}
|
|
/>
|
|
<span className="text-sm text-text-secondary">
|
|
{formatToothList(group.teeth, {
|
|
UA: tTreatment('selectedArchUpper'),
|
|
LA: tTreatment('selectedArchLower'),
|
|
})}
|
|
</span>
|
|
{group.connected ? <ConnectedSelectionBadge /> : null}
|
|
</div>
|
|
<ul className="space-y-2">
|
|
{group.tasks.map((task) => (
|
|
<li key={task.id} className="rounded bg-background px-2 py-1.5 text-sm">
|
|
<div className="flex flex-wrap items-center gap-x-2 gap-y-1">
|
|
<span className="min-w-0 flex-1 font-medium text-text-primary">
|
|
{task.stepOrder}. {task.stepLabel}
|
|
</span>
|
|
<span className="text-[11px] text-text-muted shrink-0">
|
|
{task.lastStatusChangedBy
|
|
? t('lastUpdatedBy', { name: task.lastStatusChangedBy.name })
|
|
: t('lastUpdatedUnknown')}
|
|
{task.lastStatusChangedAt
|
|
? ` · ${formatCaseDateTime(task.lastStatusChangedAt, locale)}`
|
|
: ''}
|
|
</span>
|
|
{canAssignTasks && onAssignTask ? (
|
|
<select
|
|
value={task.assignee?.id ?? ''}
|
|
disabled={assigningTaskId === task.id}
|
|
onChange={(e) =>
|
|
onAssignTask(task.id, e.target.value ? e.target.value : null)
|
|
}
|
|
aria-label={t('assigneeLabel')}
|
|
className={`${FORM_SELECT_CLASS} max-w-[9.5rem] rounded-md py-0.5 text-xs`}
|
|
>
|
|
<option value="">{t('assigneeUnassigned')}</option>
|
|
{assignableStaff.map((staff) => (
|
|
<option key={staff.id} value={staff.id}>
|
|
{staff.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
) : null}
|
|
<Badge variant={labTaskStatusVariant(task.status)} fixedWidth={false}>
|
|
{statusOptions.find((opt) => opt.value === task.status)?.label ??
|
|
task.status}
|
|
</Badge>
|
|
</div>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
|
|
{commentsSection}
|
|
|
|
<LabCaseAttachmentsDialog
|
|
open={attachmentsDialogOpen}
|
|
onClose={() => setAttachmentsDialogOpen(false)}
|
|
caseId={labCase.id}
|
|
attachments={labCase.attachments}
|
|
loadBlob={loadAttachmentBlob}
|
|
/>
|
|
|
|
{labCase.shareUrl ? (
|
|
<LabCaseShareQrDialog
|
|
open={shareQrDialogOpen}
|
|
onClose={() => setShareQrDialogOpen(false)}
|
|
shareUrl={labCase.shareUrl}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export { CaseTaskProgressBar };
|