749 lines
27 KiB
TypeScript
749 lines
27 KiB
TypeScript
'use client';
|
|
|
|
import { useCallback, useEffect, useMemo, useState } from 'react';
|
|
import { useSearchParams } from 'next/navigation';
|
|
import { useTranslations } from 'next-intl';
|
|
import { getUserFacingError } from '@/components/shared/formatApiError';
|
|
import { useAuth } from '@/lib/hooks/useAuth';
|
|
import { useToast } from '@/lib/hooks/useToast';
|
|
import { canEditCases, canEditTasks } from '@/components/shared/permissions';
|
|
import { CaseDetailPanel, CaseTaskProgressBar } from '@/components/ui/lab/CaseDetailPanel';
|
|
import { CaseCreatePanel } from '@/components/ui/lab/CaseCreatePanel';
|
|
import { LabCaseProsthesisGroupsList } from '@/components/ui/lab/LabCaseProsthesisGroupsList';
|
|
import { LabCaseCommentsPanel } from '@/components/ui/lab/LabCaseCommentsPanel';
|
|
import {
|
|
formatCaseDateTime,
|
|
formatPatientName,
|
|
} from '@/components/lab/caseDetailUtils';
|
|
import { LabCaseDueDateBadge } from '@/components/lab/LabCaseDueDateBadge';
|
|
import { LabCaseOriginBadge } from '@/components/ui/lab/LabCaseOriginBadge';
|
|
import { isLabGeneratedCase } from '@/components/lab/labCaseOrigin';
|
|
import { notificationsApi } from '@/lib/api/notifications';
|
|
import { notifyTabBadgesChanged, tabBadgesChangedEventName } from '@/lib/tabBadgeUtils';
|
|
import { casesApi } from '@/lib/api/cases';
|
|
import { tasksApi } from '@/lib/api/tasks';
|
|
import { prosthesisCatalogApi } from '@/lib/api/prosthesis-catalog';
|
|
import { treatmentCatalogApi } from '@/lib/api/treatment-catalog';
|
|
import { prosthesisJobPathLabel } from '@/components/treatment/prosthesisJobPath';
|
|
import { treatmentTypeLabelFromCatalog } from '@/components/shared/treatmentTypeDisplay';
|
|
import { Badge } from '@/components/ui/shared/Badge';
|
|
import { Button } from '@/components/ui/shared/Button';
|
|
import { MobileDetailBackButton } from '@/components/ui/shared/MobileDetailBackButton';
|
|
import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
|
|
import { SearchBar } from '@/components/ui/shared/SearchBar';
|
|
import { AppDateInput } from '@/components/ui/shared/AppDateInput';
|
|
import type { ProsthesisCatalogEntry, TreatmentCatalogEntry } from '@/types/treatment-catalog';
|
|
import type {
|
|
AssignableTaskStaff,
|
|
CasesFilterOptions,
|
|
LabCaseDetail,
|
|
LabCaseListItem,
|
|
LabTaskStatus,
|
|
PaginatedLabCases,
|
|
} from '@/types/cases';
|
|
|
|
const PAGE_SIZE = 10;
|
|
|
|
export function CasesPage() {
|
|
const t = useTranslations('cases');
|
|
const tProsthesis = useTranslations('prosthesis');
|
|
const tErrors = useTranslations('errors');
|
|
const tCommon = useTranslations('common');
|
|
const { currentOrganization, user } = useAuth();
|
|
const toast = useToast();
|
|
const searchParams = useSearchParams();
|
|
|
|
const [search, setSearch] = useState('');
|
|
const [clinicId, setClinicId] = useState('');
|
|
const [prosthesisTypeCode, setProsthesisTypeCode] = useState('');
|
|
const [sentFrom, setSentFrom] = useState('');
|
|
const [sentTo, setSentTo] = useState('');
|
|
const [page, setPage] = useState(1);
|
|
|
|
const [cases, setCases] = useState<LabCaseListItem[]>([]);
|
|
const [pagination, setPagination] = useState<PaginatedLabCases['pagination']>({
|
|
page: 1,
|
|
limit: PAGE_SIZE,
|
|
total: 0,
|
|
totalPages: 1,
|
|
});
|
|
const [filterOptions, setFilterOptions] = useState<CasesFilterOptions>({
|
|
clinics: [],
|
|
prosthesisTypes: [],
|
|
});
|
|
const [prosthesisCatalog, setProsthesisCatalog] = useState<ProsthesisCatalogEntry[]>([]);
|
|
const [treatmentCatalog, setTreatmentCatalog] = useState<TreatmentCatalogEntry[]>([]);
|
|
|
|
const [selectedCaseId, setSelectedCaseId] = useState<string | null>(null);
|
|
const [mobileDetailOpen, setMobileDetailOpen] = useState(false);
|
|
const [selectedCase, setSelectedCase] = useState<LabCaseDetail | null>(null);
|
|
const [loadingList, setLoadingList] = useState(false);
|
|
const [loadingDetail, setLoadingDetail] = useState(false);
|
|
const [updatingImportant, setUpdatingImportant] = useState(false);
|
|
const [updatingExternalCode, setUpdatingExternalCode] = useState(false);
|
|
const [assignableStaff, setAssignableStaff] = useState<AssignableTaskStaff[]>([]);
|
|
const [assigningTaskId, setAssigningTaskId] = useState<string | null>(null);
|
|
const [commentCount, setCommentCount] = useState(0);
|
|
const [creatingCase, setCreatingCase] = useState(false);
|
|
|
|
const canEdit = canEditCases(currentOrganization);
|
|
const canEditComments = canEditTasks(currentOrganization);
|
|
const locale = user?.language ?? 'en';
|
|
|
|
const prosthesisLabel = useCallback(
|
|
(code: string) =>
|
|
prosthesisJobPathLabel(code, prosthesisCatalog, (key) => tProsthesis(key as never)),
|
|
[prosthesisCatalog, tProsthesis],
|
|
);
|
|
|
|
const treatmentDetailLabel = useCallback(
|
|
(type: string) => treatmentTypeLabelFromCatalog(type, treatmentCatalog),
|
|
[treatmentCatalog],
|
|
);
|
|
|
|
const statusOptions: { value: LabTaskStatus; label: string }[] = useMemo(
|
|
() => [
|
|
{ value: 'IN_PROGRESS', label: t('statusInProgress') },
|
|
{ value: 'COMPLETED', label: t('statusCompleted') },
|
|
],
|
|
[t],
|
|
);
|
|
|
|
const hasActiveFilters = Boolean(
|
|
search.trim() || clinicId || prosthesisTypeCode || sentFrom || sentTo,
|
|
);
|
|
|
|
const loadCases = async (
|
|
params: {
|
|
q: string;
|
|
clinicOrganizationId: string;
|
|
prosthesisTypeCode: string;
|
|
sentFrom: string;
|
|
sentTo: string;
|
|
page: number;
|
|
},
|
|
options?: { silent?: boolean },
|
|
) => {
|
|
const silent = options?.silent ?? false;
|
|
if (!silent) {
|
|
setLoadingList(true);
|
|
toast.setError('');
|
|
}
|
|
try {
|
|
const response = await casesApi.list({
|
|
q: params.q.trim() || undefined,
|
|
clinicOrganizationId: params.clinicOrganizationId || undefined,
|
|
prosthesisTypeCode: params.prosthesisTypeCode || undefined,
|
|
sentFrom: params.sentFrom || undefined,
|
|
sentTo: params.sentTo || undefined,
|
|
page: params.page,
|
|
limit: PAGE_SIZE,
|
|
});
|
|
setCases(response.data.items);
|
|
setPagination(response.data.pagination);
|
|
} catch (error: unknown) {
|
|
if (!silent) {
|
|
toast.showError(getUserFacingError(error, tErrors, t('errorLoadList')));
|
|
}
|
|
} finally {
|
|
if (!silent) setLoadingList(false);
|
|
}
|
|
};
|
|
|
|
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(getUserFacingError(error, tErrors, t('errorLoadDetail')));
|
|
if (!options?.silent) {
|
|
setSelectedCase(null);
|
|
}
|
|
} finally {
|
|
if (!options?.silent) {
|
|
setLoadingDetail(false);
|
|
}
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
void casesApi.listFilterOptions().then((r) => setFilterOptions(r.data)).catch(() => {});
|
|
void prosthesisCatalogApi.list().then((r) => setProsthesisCatalog(r.data)).catch(() => {});
|
|
void treatmentCatalogApi.list().then((r) => setTreatmentCatalog(r.data)).catch(() => {});
|
|
if (canEdit) {
|
|
void casesApi.listAssignableStaff().then((r) => setAssignableStaff(r.data)).catch(() => {});
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only initial fetch
|
|
}, [canEdit]);
|
|
|
|
useEffect(() => {
|
|
const clinicFromUrl = searchParams.get('clinicOrganizationId');
|
|
if (clinicFromUrl) {
|
|
setClinicId(clinicFromUrl);
|
|
}
|
|
}, [searchParams]);
|
|
|
|
useEffect(() => {
|
|
if (loadingList) return;
|
|
|
|
if (cases.length === 0) {
|
|
if (selectedCaseId !== null) {
|
|
setSelectedCaseId(null);
|
|
}
|
|
return;
|
|
}
|
|
|
|
const urlCaseId = searchParams.get('caseId');
|
|
if (urlCaseId && cases.some((item) => item.id === urlCaseId)) {
|
|
if (selectedCaseId !== urlCaseId) {
|
|
setSelectedCaseId(urlCaseId);
|
|
setMobileDetailOpen(true);
|
|
}
|
|
return;
|
|
}
|
|
|
|
if (selectedCaseId && cases.some((item) => item.id === selectedCaseId)) {
|
|
return;
|
|
}
|
|
|
|
setSelectedCaseId(cases[0].id);
|
|
}, [cases, loadingList, searchParams, selectedCaseId]);
|
|
|
|
useEffect(() => {
|
|
const timeout = setTimeout(() => {
|
|
void loadCases({
|
|
q: search,
|
|
clinicOrganizationId: clinicId,
|
|
prosthesisTypeCode,
|
|
sentFrom,
|
|
sentTo,
|
|
page,
|
|
});
|
|
}, search ? 300 : 0);
|
|
return () => clearTimeout(timeout);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- debounced search + filter reload
|
|
}, [search, clinicId, prosthesisTypeCode, sentFrom, sentTo, page]);
|
|
|
|
useEffect(() => {
|
|
const onBadgesChanged = () => {
|
|
void loadCases(
|
|
{
|
|
q: search,
|
|
clinicOrganizationId: clinicId,
|
|
prosthesisTypeCode,
|
|
sentFrom,
|
|
sentTo,
|
|
page,
|
|
},
|
|
{ silent: true },
|
|
);
|
|
if (selectedCaseId) {
|
|
void loadDetail(selectedCaseId, { silent: true });
|
|
}
|
|
};
|
|
window.addEventListener(tabBadgesChangedEventName(), onBadgesChanged);
|
|
return () => window.removeEventListener(tabBadgesChangedEventName(), onBadgesChanged);
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- soft refresh from live inbox socket
|
|
}, [search, clinicId, prosthesisTypeCode, sentFrom, sentTo, page, selectedCaseId]);
|
|
|
|
useEffect(() => {
|
|
if (!selectedCaseId) {
|
|
setMobileDetailOpen(false);
|
|
}
|
|
}, [selectedCaseId]);
|
|
|
|
useEffect(() => {
|
|
if (selectedCaseId) {
|
|
void loadDetail(selectedCaseId);
|
|
void notificationsApi.markCaseRead(selectedCaseId).then(() => {
|
|
notifyTabBadgesChanged();
|
|
setCases((prev) =>
|
|
prev.map((item) =>
|
|
item.id === selectedCaseId ? { ...item, hasUnread: false } : item,
|
|
),
|
|
);
|
|
}).catch(() => undefined);
|
|
void tasksApi
|
|
.listComments(selectedCaseId)
|
|
.then((r) => setCommentCount(r.data.length))
|
|
.catch(() => setCommentCount(0));
|
|
} else {
|
|
setSelectedCase(null);
|
|
setCommentCount(0);
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps -- reload when selection changes
|
|
}, [selectedCaseId]);
|
|
|
|
async function handleAddCase() {
|
|
if (!canEdit || creatingCase) return;
|
|
setCreatingCase(true);
|
|
toast.setError('');
|
|
try {
|
|
const response = await casesApi.create();
|
|
setSelectedCase(response.data);
|
|
setSelectedCaseId(response.data.id);
|
|
setMobileDetailOpen(true);
|
|
setPage(1);
|
|
await loadCases({
|
|
q: search,
|
|
clinicOrganizationId: clinicId,
|
|
prosthesisTypeCode,
|
|
sentFrom,
|
|
sentTo,
|
|
page: 1,
|
|
});
|
|
} catch (error: unknown) {
|
|
toast.showError(getUserFacingError(error, tErrors, t('errorCreateCase')));
|
|
} finally {
|
|
setCreatingCase(false);
|
|
}
|
|
}
|
|
|
|
const isDraftCase = (item: { origin?: string; startedAt?: string | null }) =>
|
|
item.origin === 'LAB_INTERNAL' && !item.startedAt;
|
|
|
|
function scrollToComments() {
|
|
document.getElementById('case-comments')?.scrollIntoView({ behavior: 'smooth' });
|
|
}
|
|
|
|
const loadCaseAttachmentBlob = useCallback(
|
|
(caseId: string, attachmentId: string) => casesApi.getAttachmentFileBlob(caseId, attachmentId),
|
|
[],
|
|
);
|
|
|
|
function clearFilters() {
|
|
setSearch('');
|
|
setClinicId('');
|
|
setProsthesisTypeCode('');
|
|
setSentFrom('');
|
|
setSentTo('');
|
|
setPage(1);
|
|
}
|
|
|
|
async function handleAssignTask(taskId: string, assigneeUserId: string | null) {
|
|
if (!selectedCaseId || !canEdit) return;
|
|
|
|
setAssigningTaskId(taskId);
|
|
toast.setError('');
|
|
try {
|
|
const response = await casesApi.assignTask(selectedCaseId, taskId, assigneeUserId);
|
|
setSelectedCase(response.data);
|
|
notifyTabBadgesChanged();
|
|
} catch (error: unknown) {
|
|
toast.showError(getUserFacingError(error, tErrors, t('errorAssignTask')));
|
|
} finally {
|
|
setAssigningTaskId(null);
|
|
}
|
|
}
|
|
|
|
async function handleCaseImportantToggle(isImportant: boolean) {
|
|
if (!selectedCaseId || !canEdit || !selectedCase) return;
|
|
|
|
const previousCase = selectedCase;
|
|
setSelectedCase({ ...selectedCase, isImportant });
|
|
|
|
setUpdatingImportant(true);
|
|
toast.setError('');
|
|
try {
|
|
const response = await casesApi.setCaseImportant(selectedCaseId, isImportant);
|
|
setSelectedCase(response.data);
|
|
setCases((prev) =>
|
|
prev.map((item) =>
|
|
item.id === selectedCaseId ? { ...item, isImportant: response.data.isImportant } : item,
|
|
),
|
|
);
|
|
notifyTabBadgesChanged();
|
|
} catch (error: unknown) {
|
|
setSelectedCase(previousCase);
|
|
toast.showError(getUserFacingError(error, tErrors, t('errorUpdateTask')));
|
|
} finally {
|
|
setUpdatingImportant(false);
|
|
}
|
|
}
|
|
|
|
async function handleCaseExternalCodeChange(externalCode: string | null) {
|
|
if (!selectedCaseId || !canEdit || !selectedCase) return;
|
|
|
|
const previousCase = selectedCase;
|
|
setSelectedCase({ ...selectedCase, externalCode });
|
|
|
|
setUpdatingExternalCode(true);
|
|
toast.setError('');
|
|
try {
|
|
const response = await casesApi.setCaseExternalCode(selectedCaseId, externalCode);
|
|
setSelectedCase(response.data);
|
|
} catch (error: unknown) {
|
|
setSelectedCase(previousCase);
|
|
toast.showError(getUserFacingError(error, tErrors, t('errorUpdateExternalCode')));
|
|
} finally {
|
|
setUpdatingExternalCode(false);
|
|
}
|
|
}
|
|
|
|
const filterSelectClass = `${FORM_SELECT_CLASS} w-full min-w-0 rounded-md py-1.5 text-xs sm:py-2 sm:text-sm`;
|
|
|
|
return (
|
|
<div className="space-y-4">
|
|
<div>
|
|
<h1 className="text-xl sm:text-2xl font-semibold text-text-primary">{t('title')}</h1>
|
|
<p className="text-sm text-text-muted mt-1">{t('subtitle')}</p>
|
|
</div>
|
|
|
|
<div className="grid gap-4 lg:grid-cols-[minmax(300px,380px)_1fr] lg:items-stretch">
|
|
<section
|
|
className={`rounded-lg border border-border bg-surface p-3 sm:p-4 space-y-3 flex flex-col min-h-0 h-full lg:min-h-[420px] ${
|
|
mobileDetailOpen && selectedCaseId ? 'hidden lg:flex' : 'flex'
|
|
}`}
|
|
>
|
|
{canEdit ? (
|
|
<Button
|
|
type="button"
|
|
size="lg"
|
|
fullWidth
|
|
disabled={creatingCase}
|
|
onClick={() => void handleAddCase()}
|
|
>
|
|
{t('addCase')}
|
|
</Button>
|
|
) : null}
|
|
<SearchBar
|
|
embedded
|
|
value={search}
|
|
onChange={(value) => {
|
|
setSearch(value);
|
|
setPage(1);
|
|
}}
|
|
placeholder={t('searchPlaceholder')}
|
|
/>
|
|
|
|
<div className="grid gap-2 sm:grid-cols-2">
|
|
<label className="space-y-1">
|
|
<span className="text-xs font-medium text-text-muted">{t('filterClinic')}</span>
|
|
<select
|
|
value={clinicId}
|
|
onChange={(e) => {
|
|
setClinicId(e.target.value);
|
|
setPage(1);
|
|
}}
|
|
className={filterSelectClass}
|
|
>
|
|
<option value="">{t('filterClinicAll')}</option>
|
|
{filterOptions.clinics.map((clinic) => (
|
|
<option key={clinic.id} value={clinic.id}>
|
|
{clinic.name}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<label className="space-y-1">
|
|
<span className="text-xs font-medium text-text-muted">{t('filterProsthesisType')}</span>
|
|
<select
|
|
value={prosthesisTypeCode}
|
|
onChange={(e) => {
|
|
setProsthesisTypeCode(e.target.value);
|
|
setPage(1);
|
|
}}
|
|
className={filterSelectClass}
|
|
>
|
|
<option value="">{t('filterProsthesisTypeAll')}</option>
|
|
{filterOptions.prosthesisTypes.map((type) => (
|
|
<option key={type.code} value={type.code}>
|
|
{prosthesisLabel(type.code)}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
|
|
<label className="space-y-1">
|
|
<span className="text-xs font-medium text-text-muted">{t('filterSentFrom')}</span>
|
|
<AppDateInput
|
|
value={sentFrom}
|
|
onChange={(next) => {
|
|
setSentFrom(next);
|
|
setPage(1);
|
|
}}
|
|
className={filterSelectClass}
|
|
/>
|
|
</label>
|
|
|
|
<label className="space-y-1">
|
|
<span className="text-xs font-medium text-text-muted">{t('filterSentTo')}</span>
|
|
<AppDateInput
|
|
value={sentTo}
|
|
onChange={(next) => {
|
|
setSentTo(next);
|
|
setPage(1);
|
|
}}
|
|
className={filterSelectClass}
|
|
/>
|
|
</label>
|
|
</div>
|
|
|
|
{hasActiveFilters ? (
|
|
<Button variant="ghost" size="sm" onClick={clearFilters} className="self-start">
|
|
{t('clearFilters')}
|
|
</Button>
|
|
) : null}
|
|
|
|
<div className="flex-1 min-h-0 overflow-y-auto">
|
|
{loadingList ? (
|
|
<p className="text-sm text-text-muted">{tCommon('loading')}</p>
|
|
) : cases.length === 0 ? (
|
|
<p className="text-sm text-text-muted">{t('emptyList')}</p>
|
|
) : (
|
|
<ul className="space-y-2 pr-1">
|
|
{cases.map((item) => {
|
|
const isActive = item.id === selectedCaseId;
|
|
|
|
return (
|
|
<li key={item.id}>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setSelectedCaseId(item.id);
|
|
setMobileDetailOpen(true);
|
|
}}
|
|
className={`w-full rounded-md border px-3 py-2.5 text-left transition-colors ${
|
|
isActive
|
|
? 'border-primary bg-primary/5'
|
|
: 'border-border hover:border-primary/40'
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-2">
|
|
<div className="flex min-w-0 flex-1 flex-wrap items-center gap-1.5">
|
|
<div className="font-medium text-text-primary">
|
|
{formatPatientName(item.patient)}
|
|
</div>
|
|
<LabCaseDueDateBadge
|
|
dueDate={item.dueDate}
|
|
locale={locale}
|
|
className="text-[10px]"
|
|
/>
|
|
{item.isImportant ? (
|
|
<Badge variant="warning" fixedWidth={false}>
|
|
{t('importantLabel')}
|
|
</Badge>
|
|
) : null}
|
|
<LabCaseOriginBadge origin={item.origin} className="text-[10px]" />
|
|
{isDraftCase(item) ? (
|
|
<Badge variant="default" fixedWidth={false}>
|
|
{t('draftBadge')}
|
|
</Badge>
|
|
) : null}
|
|
</div>
|
|
{item.hasUnread ? (
|
|
<span
|
|
className="h-2 w-2 shrink-0 rounded-full bg-badge-warning-fg"
|
|
aria-label={t('unreadCase')}
|
|
/>
|
|
) : null}
|
|
</div>
|
|
<div className="text-xs text-text-muted mt-0.5">{item.clinic.name}</div>
|
|
<div className="mt-1">
|
|
<LabCaseProsthesisGroupsList
|
|
groups={item.prosthesisGroups}
|
|
prosthesisCatalog={prosthesisCatalog}
|
|
/>
|
|
</div>
|
|
<div className="text-[10px] text-text-muted mt-1">
|
|
{isDraftCase(item)
|
|
? t('draftBadge')
|
|
: formatCaseDateTime(item.startedAt ?? item.sentAt, locale)}
|
|
</div>
|
|
<div className="mt-1.5">
|
|
<CaseTaskProgressBar
|
|
completed={item.taskProgress.completed}
|
|
total={item.taskProgress.total}
|
|
/>
|
|
</div>
|
|
</button>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
|
|
{pagination.totalPages > 1 ? (
|
|
<div className="flex shrink-0 items-center justify-between gap-2 pt-2 border-t border-border">
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={page <= 1 || loadingList}
|
|
onClick={() => setPage((p) => Math.max(1, p - 1))}
|
|
>
|
|
{t('prevPage')}
|
|
</Button>
|
|
<span className="text-xs text-text-muted text-center">
|
|
{t('pageSummary', {
|
|
page: pagination.page,
|
|
totalPages: pagination.totalPages,
|
|
total: pagination.total,
|
|
})}
|
|
</span>
|
|
<Button
|
|
variant="outline"
|
|
size="sm"
|
|
disabled={page >= pagination.totalPages || loadingList}
|
|
onClick={() => setPage((p) => p + 1)}
|
|
>
|
|
{t('nextPage')}
|
|
</Button>
|
|
</div>
|
|
) : null}
|
|
</section>
|
|
|
|
<section
|
|
className={`rounded-lg border border-border bg-surface p-3 sm:p-4 min-h-[320px] lg:min-h-[420px] ${
|
|
selectedCaseId && !mobileDetailOpen ? 'hidden lg:block' : ''
|
|
}`}
|
|
>
|
|
{mobileDetailOpen && selectedCaseId ? (
|
|
<MobileDetailBackButton onClick={() => setMobileDetailOpen(false)} />
|
|
) : null}
|
|
{!selectedCaseId && !loadingList && cases.length === 0 ? (
|
|
<p className="text-sm text-text-muted">{t('emptyList')}</p>
|
|
) : loadingDetail || !selectedCase ? (
|
|
<p className="text-sm text-text-muted">{tCommon('loading')}</p>
|
|
) : isDraftCase(selectedCase) ? (
|
|
<CaseCreatePanel
|
|
key={selectedCase.id}
|
|
labCase={selectedCase}
|
|
canEdit={canEdit}
|
|
onSaved={(detail) => {
|
|
setSelectedCase(detail);
|
|
setCases((prev) =>
|
|
prev.map((item) =>
|
|
item.id === detail.id
|
|
? {
|
|
...item,
|
|
startedAt: detail.startedAt,
|
|
origin: detail.origin,
|
|
dueDate: detail.dueDate,
|
|
clinic: detail.clinic,
|
|
patient: detail.patient,
|
|
}
|
|
: item,
|
|
),
|
|
);
|
|
}}
|
|
onStarted={(detail) => {
|
|
setSelectedCase(detail);
|
|
setCases((prev) =>
|
|
prev.map((item) =>
|
|
item.id === detail.id
|
|
? {
|
|
...item,
|
|
startedAt: detail.startedAt,
|
|
origin: detail.origin,
|
|
dueDate: detail.dueDate,
|
|
clinic: detail.clinic,
|
|
patient: detail.patient,
|
|
prosthesisGroups: item.prosthesisGroups,
|
|
taskProgress: detail.taskProgress,
|
|
}
|
|
: item,
|
|
),
|
|
);
|
|
void loadCases({
|
|
q: search,
|
|
clinicOrganizationId: clinicId,
|
|
prosthesisTypeCode,
|
|
sentFrom,
|
|
sentTo,
|
|
page,
|
|
});
|
|
}}
|
|
onDeleted={() => {
|
|
const remainingOnPage = cases.filter((item) => item.id !== selectedCase.id);
|
|
const nextPage = remainingOnPage.length === 0 && page > 1 ? page - 1 : page;
|
|
setSelectedCaseId(null);
|
|
setSelectedCase(null);
|
|
setMobileDetailOpen(false);
|
|
if (nextPage !== page) {
|
|
setPage(nextPage);
|
|
return;
|
|
}
|
|
void loadCases({
|
|
q: search,
|
|
clinicOrganizationId: clinicId,
|
|
prosthesisTypeCode,
|
|
sentFrom,
|
|
sentTo,
|
|
page: nextPage,
|
|
});
|
|
}}
|
|
onError={toast.showError}
|
|
/>
|
|
) : (
|
|
<CaseDetailPanel
|
|
labCase={selectedCase}
|
|
locale={locale}
|
|
treatmentLabel={treatmentDetailLabel}
|
|
statusOptions={statusOptions}
|
|
loadAttachmentBlob={loadCaseAttachmentBlob}
|
|
showCommentsButton
|
|
commentCount={commentCount}
|
|
onCommentsClick={scrollToComments}
|
|
canEditImportant={canEdit}
|
|
updatingImportant={updatingImportant}
|
|
onImportantChange={(checked) => void handleCaseImportantToggle(checked)}
|
|
updatingExternalCode={updatingExternalCode}
|
|
onExternalCodeChange={(code) => void handleCaseExternalCodeChange(code)}
|
|
assignableStaff={assignableStaff}
|
|
canAssignTasks={canEdit}
|
|
assigningTaskId={assigningTaskId}
|
|
onAssignTask={(taskId, assigneeUserId) =>
|
|
void handleAssignTask(taskId, assigneeUserId)
|
|
}
|
|
headerMetaLines={
|
|
<p className="text-sm text-text-muted">
|
|
{t('fromClinic', { name: selectedCase.clinic.name })}
|
|
</p>
|
|
}
|
|
commentsSection={
|
|
selectedCaseId ? (
|
|
<section id="case-comments" className="scroll-mt-4 border-t border-border pt-4">
|
|
<LabCaseCommentsPanel
|
|
caseId={selectedCaseId}
|
|
viewerSide="LAB"
|
|
canPost={canEditComments}
|
|
canToggleVisibility={canEditComments}
|
|
clinicVisibility={!isLabGeneratedCase(selectedCase.origin)}
|
|
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);
|
|
notifyTabBadgesChanged();
|
|
return r.data;
|
|
}}
|
|
onToggleVisibility={async (commentId, visible) => {
|
|
const r = await tasksApi.setCommentVisibility(commentId, visible);
|
|
return r.data;
|
|
}}
|
|
onError={toast.showError}
|
|
/>
|
|
</section>
|
|
) : null
|
|
}
|
|
/>
|
|
)}
|
|
</section>
|
|
</div>
|
|
|
|
</div>
|
|
);
|
|
}
|