improvement: all demo bugs fixed. give me more baby.
This commit is contained in:
@@ -3,17 +3,17 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { MessageSquare } from 'lucide-react';
|
||||
import { ToastStack } from '@/components/ui/shared/Toast';
|
||||
import { formatApiErrorMessage } from '@/components/shared/formatApiError';
|
||||
import { useAuth } from '@/lib/hooks/useAuth';
|
||||
import { useToast } from '@/lib/hooks/useToast';
|
||||
import { canEditCases, canEditTasks } from '@/components/shared/permissions';
|
||||
import { Badge } from '@/components/ui/shared/Badge';
|
||||
import { CaseDetailPanel, CaseTaskProgressBar } from '@/components/ui/lab/CaseDetailPanel';
|
||||
import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
|
||||
import { CaseToothChartPanel } from '@/components/ui/lab/CaseToothChartPanel';
|
||||
import { LabCaseAttachmentPreview } from '@/components/ui/lab/LabCaseAttachmentPreview';
|
||||
import { labTaskStatusVariant } from '@/components/ui/lab/labTaskStatusDisplay';
|
||||
import {
|
||||
formatCaseDateTime,
|
||||
formatPatientName,
|
||||
} from '@/components/ui/lab/caseDetailUtils';
|
||||
import { casesApi } from '@/lib/api/cases';
|
||||
import { tasksApi } from '@/lib/api/tasks';
|
||||
import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
|
||||
@@ -29,47 +29,11 @@ import type {
|
||||
LabTaskStatus,
|
||||
PaginatedLabCases,
|
||||
} from '@/types/cases';
|
||||
import {
|
||||
formatToothList,
|
||||
prosthesisTypeBadgeStyle,
|
||||
} from '@/components/ui/treatment/prosthesisTypeDisplay';
|
||||
|
||||
const PAGE_SIZE = 20;
|
||||
|
||||
function formatPatientName(patient: { firstName: string; lastName: string }) {
|
||||
return `${patient.firstName} ${patient.lastName}`.trim();
|
||||
}
|
||||
|
||||
function formatDateTime(value: string | null, locale: string) {
|
||||
if (!value) return '—';
|
||||
return new Intl.DateTimeFormat(locale, {
|
||||
dateStyle: 'medium',
|
||||
timeStyle: 'short',
|
||||
}).format(new Date(value));
|
||||
}
|
||||
|
||||
function TaskProgressBar({ 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 default function CasesPage() {
|
||||
const t = useTranslations('cases');
|
||||
const tTreatment = useTranslations('treatment');
|
||||
const tCommon = useTranslations('common');
|
||||
const { currentOrganization, user } = useAuth();
|
||||
const toast = useToast();
|
||||
@@ -99,7 +63,7 @@ export default function CasesPage() {
|
||||
const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
|
||||
const [loadingList, setLoadingList] = useState(false);
|
||||
const [loadingDetail, setLoadingDetail] = useState(false);
|
||||
const [updatingTaskId, setUpdatingTaskId] = useState<string | null>(null);
|
||||
const [updatingImportant, setUpdatingImportant] = useState(false);
|
||||
const [commentCount, setCommentCount] = useState(0);
|
||||
|
||||
const canEdit = canEditCases(currentOrganization);
|
||||
@@ -152,17 +116,23 @@ export default function CasesPage() {
|
||||
}
|
||||
};
|
||||
|
||||
const loadDetail = async (caseId: string) => {
|
||||
setLoadingDetail(true);
|
||||
const loadDetail = async (caseId: string, options?: { silent?: boolean }) => {
|
||||
if (!options?.silent) {
|
||||
setLoadingDetail(true);
|
||||
}
|
||||
toast.setError('');
|
||||
try {
|
||||
const response = await casesApi.getOne(caseId);
|
||||
setSelectedCase(response.data);
|
||||
} catch (error: unknown) {
|
||||
toast.showError(formatApiErrorMessage(error, t('errorLoadDetail')));
|
||||
setSelectedCase(null);
|
||||
if (!options?.silent) {
|
||||
setSelectedCase(null);
|
||||
}
|
||||
} finally {
|
||||
setLoadingDetail(false);
|
||||
if (!options?.silent) {
|
||||
setLoadingDetail(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -217,34 +187,6 @@ export default function CasesPage() {
|
||||
[],
|
||||
);
|
||||
|
||||
const latestCaseAttachment = useMemo(() => {
|
||||
if (!selectedCase?.attachments.length) return null;
|
||||
return [...selectedCase.attachments].sort(
|
||||
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
|
||||
)[0];
|
||||
}, [selectedCase?.attachments]);
|
||||
|
||||
const caseProsthesisRows = useMemo(() => {
|
||||
if (!selectedCase) return [];
|
||||
if (selectedCase.toothProsthesis.length > 0) {
|
||||
const byCode = new Map<string, string[]>();
|
||||
for (const row of selectedCase.toothProsthesis) {
|
||||
const key = row.prosthesisTypeCode;
|
||||
const teeth = byCode.get(key) ?? [];
|
||||
if (!teeth.includes(row.tooth)) teeth.push(row.tooth);
|
||||
byCode.set(key, teeth);
|
||||
}
|
||||
return [...byCode.entries()].map(([prosthesisTypeCode, teeth]) => ({
|
||||
prosthesisTypeCode,
|
||||
teeth,
|
||||
}));
|
||||
}
|
||||
return selectedCase.tasksByTooth.map((g) => ({
|
||||
prosthesisTypeCode: g.prosthesisTypeCode,
|
||||
teeth: g.teeth,
|
||||
}));
|
||||
}, [selectedCase]);
|
||||
|
||||
function clearFilters() {
|
||||
setSearch('');
|
||||
setClinicId('');
|
||||
@@ -254,18 +196,22 @@ export default function CasesPage() {
|
||||
setPage(1);
|
||||
}
|
||||
|
||||
async function handleImportantToggle(taskId: string, isImportant: boolean) {
|
||||
if (!selectedCaseId || !canEdit) return;
|
||||
async function handleCaseImportantToggle(isImportant: boolean) {
|
||||
if (!selectedCaseId || !canEdit || !selectedCase) return;
|
||||
|
||||
setUpdatingTaskId(taskId);
|
||||
const previousCase = selectedCase;
|
||||
setSelectedCase({ ...selectedCase, isImportant });
|
||||
|
||||
setUpdatingImportant(true);
|
||||
toast.setError('');
|
||||
try {
|
||||
await casesApi.setTaskImportant(selectedCaseId, taskId, isImportant);
|
||||
await loadDetail(selectedCaseId);
|
||||
const response = await casesApi.setCaseImportant(selectedCaseId, isImportant);
|
||||
setSelectedCase(response.data);
|
||||
} catch (error: unknown) {
|
||||
setSelectedCase(previousCase);
|
||||
toast.showError(formatApiErrorMessage(error, t('errorUpdateTask')));
|
||||
} finally {
|
||||
setUpdatingTaskId(null);
|
||||
setUpdatingImportant(false);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -391,13 +337,13 @@ export default function CasesPage() {
|
||||
</div>
|
||||
<div className="text-xs text-text-muted mt-0.5">{item.clinic.name}</div>
|
||||
<div className="text-xs text-text-muted mt-1">
|
||||
{formatDateTime(item.sentAt, locale)}
|
||||
{formatCaseDateTime(item.sentAt, locale)}
|
||||
</div>
|
||||
<div className="text-xs text-text-muted mt-1 truncate">
|
||||
{item.treatmentTypes.map(treatmentLabel).join(', ')}
|
||||
</div>
|
||||
<div className="mt-2">
|
||||
<TaskProgressBar
|
||||
<CaseTaskProgressBar
|
||||
completed={item.taskProgress.completed}
|
||||
total={item.taskProgress.total}
|
||||
/>
|
||||
@@ -445,181 +391,53 @@ export default function CasesPage() {
|
||||
) : loadingDetail || !selectedCase ? (
|
||||
<p className="text-sm text-text-muted">{tCommon('loading')}</p>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<header className="space-y-1 border-b border-border pb-3">
|
||||
<div className="flex flex-wrap items-start justify-between gap-2">
|
||||
<h2 className="text-lg font-semibold text-text-primary">
|
||||
{formatPatientName(selectedCase.patient)}
|
||||
</h2>
|
||||
<Button type="button" variant="outline" size="sm" onClick={scrollToComments}>
|
||||
<MessageSquare className="h-4 w-4 me-1.5" />
|
||||
{commentCount > 0
|
||||
? t('commentsCount', { count: commentCount })
|
||||
: t('showComments')}
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-text-muted">
|
||||
{t('patientMobile')}: {selectedCase.patient.mobile}
|
||||
</p>
|
||||
<CaseDetailPanel
|
||||
labCase={selectedCase}
|
||||
locale={locale}
|
||||
treatmentLabel={treatmentLabel}
|
||||
statusOptions={statusOptions}
|
||||
loadAttachmentBlob={loadCaseAttachmentBlob}
|
||||
showCommentsButton
|
||||
commentCount={commentCount}
|
||||
onCommentsClick={scrollToComments}
|
||||
canEditImportant={canEdit}
|
||||
updatingImportant={updatingImportant}
|
||||
onImportantChange={(checked) => void handleCaseImportantToggle(checked)}
|
||||
headerMetaLines={
|
||||
<p className="text-sm text-text-muted">
|
||||
{t('fromClinic', { name: selectedCase.clinic.name })}
|
||||
</p>
|
||||
<p className="text-sm text-text-muted">
|
||||
{t('sentAt', { date: formatDateTime(selectedCase.sentAt, locale) })}
|
||||
</p>
|
||||
<div className="pt-1 max-w-xs">
|
||||
<p className="text-sm text-text-muted mb-1">
|
||||
{t('taskProgressLabel', {
|
||||
completed: selectedCase.taskProgress.completed,
|
||||
total: selectedCase.taskProgress.total,
|
||||
})}
|
||||
</p>
|
||||
<TaskProgressBar
|
||||
completed={selectedCase.taskProgress.completed}
|
||||
total={selectedCase.taskProgress.total}
|
||||
/>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex flex-wrap items-start gap-4">
|
||||
<CaseToothChartPanel
|
||||
details={selectedCase.details}
|
||||
prosthesisRows={caseProsthesisRows}
|
||||
scale={0.5}
|
||||
className="min-w-0 flex-1"
|
||||
/>
|
||||
{latestCaseAttachment && selectedCaseId ? (
|
||||
<div className="shrink-0 space-y-1">
|
||||
<p className="text-xs font-medium text-text-secondary">{t('latestAttachment')}</p>
|
||||
<LabCaseAttachmentPreview
|
||||
}
|
||||
commentsSection={
|
||||
selectedCaseId ? (
|
||||
<section id="case-comments" className="scroll-mt-4 border-t border-border pt-4">
|
||||
<LabCaseCommentsPanel
|
||||
caseId={selectedCaseId}
|
||||
attachment={latestCaseAttachment}
|
||||
loadBlob={loadCaseAttachmentBlob}
|
||||
canPost={canEditComments}
|
||||
canToggleVisibility={canEditComments}
|
||||
loadComments={async () => {
|
||||
const r = await tasksApi.listComments(selectedCaseId);
|
||||
setCommentCount(r.data.length);
|
||||
return r.data;
|
||||
}}
|
||||
onPost={async (body, visibleToClinic) => {
|
||||
const r = await tasksApi.addComment(selectedCaseId, {
|
||||
body,
|
||||
visibleToClinic,
|
||||
});
|
||||
setCommentCount((n) => n + 1);
|
||||
return r.data;
|
||||
}}
|
||||
onToggleVisibility={async (commentId, visible) => {
|
||||
const r = await tasksApi.setCommentVisibility(commentId, visible);
|
||||
return r.data;
|
||||
}}
|
||||
onError={toast.showError}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
{selectedCase.details.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium text-text-primary">{t('treatmentDetails')}</h3>
|
||||
<ul className="space-y-2 text-sm">
|
||||
{selectedCase.details.map((detail) => (
|
||||
<li key={detail.id} className="rounded-md bg-background border border-border p-2">
|
||||
<div className="font-medium">{treatmentLabel(detail.treatmentType)}</div>
|
||||
<div className="text-text-muted">
|
||||
{t('teethLabel')}: {detail.teeth.join(', ') || '—'}
|
||||
</div>
|
||||
{detail.comment ? (
|
||||
<div className="text-text-muted mt-1">{detail.comment}</div>
|
||||
) : null}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-3">
|
||||
<h3 className="text-sm font-medium text-text-primary">{t('tasksByTooth')}</h3>
|
||||
{selectedCase.tasksByTooth.length === 0 ? (
|
||||
<p className="text-sm text-text-muted">{t('noTasks')}</p>
|
||||
) : (
|
||||
selectedCase.tasksByTooth.map((group, groupIndex) => (
|
||||
<div
|
||||
key={`${group.treatmentDetailId}-${group.prosthesisTypeCode}`}
|
||||
className="rounded-md border border-border p-3 space-y-2"
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<Badge
|
||||
truncate
|
||||
title={group.prosthesisTypeLabel}
|
||||
style={prosthesisTypeBadgeStyle(group.prosthesisTypeCode, groupIndex)}
|
||||
>
|
||||
{group.prosthesisTypeLabel}
|
||||
</Badge>
|
||||
<span className="text-sm font-medium text-text-primary">
|
||||
{t('toothGroupTitle', {
|
||||
teeth: formatToothList(group.teeth),
|
||||
prosthesis: group.prosthesisTypeLabel,
|
||||
})}
|
||||
</span>
|
||||
</div>
|
||||
<ul className="space-y-2">
|
||||
{group.tasks.map((task) => (
|
||||
<li
|
||||
key={task.id}
|
||||
className="rounded bg-background p-2 text-sm space-y-1"
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<span className="min-w-0 flex-1">
|
||||
{task.stepOrder}. {task.stepLabel}
|
||||
</span>
|
||||
<Badge variant={labTaskStatusVariant(task.status)} fixedWidth={false}>
|
||||
{statusOptions.find((opt) => opt.value === task.status)?.label ??
|
||||
task.status}
|
||||
</Badge>
|
||||
{canEdit ? (
|
||||
<label className="flex items-center gap-1.5 text-xs cursor-pointer shrink-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={task.isImportant}
|
||||
disabled={updatingTaskId === task.id}
|
||||
onChange={(e) =>
|
||||
void handleImportantToggle(task.id, e.target.checked)
|
||||
}
|
||||
/>
|
||||
{t('importantLabel')}
|
||||
</label>
|
||||
) : task.isImportant ? (
|
||||
<Badge variant="warning" fixedWidth={false}>
|
||||
{t('importantLabel')}
|
||||
</Badge>
|
||||
) : null}
|
||||
</div>
|
||||
<p className="text-[11px] text-text-muted">
|
||||
{task.lastStatusChangedBy
|
||||
? t('lastUpdatedBy', { name: task.lastStatusChangedBy.name })
|
||||
: t('lastUpdatedUnknown')}
|
||||
{task.lastStatusChangedAt
|
||||
? ` · ${formatDateTime(task.lastStatusChangedAt, locale)}`
|
||||
: ''}
|
||||
</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
|
||||
{selectedCaseId ? (
|
||||
<section id="case-comments" className="scroll-mt-4 border-t border-border pt-4">
|
||||
<LabCaseCommentsPanel
|
||||
caseId={selectedCaseId}
|
||||
canPost={canEditComments}
|
||||
canToggleVisibility={canEditComments}
|
||||
loadComments={async () => {
|
||||
const r = await tasksApi.listComments(selectedCaseId);
|
||||
setCommentCount(r.data.length);
|
||||
return r.data;
|
||||
}}
|
||||
onPost={async (body, visibleToClinic) => {
|
||||
const r = await tasksApi.addComment(selectedCaseId, {
|
||||
body,
|
||||
visibleToClinic,
|
||||
});
|
||||
setCommentCount((n) => n + 1);
|
||||
return r.data;
|
||||
}}
|
||||
onToggleVisibility={async (commentId, visible) => {
|
||||
const r = await tasksApi.setCommentVisibility(commentId, visible);
|
||||
return r.data;
|
||||
}}
|
||||
onError={toast.showError}
|
||||
/>
|
||||
</section>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
) : null
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user