615 lines
24 KiB
TypeScript
615 lines
24 KiB
TypeScript
'use client';
|
|
|
|
import { useEffect, useState } from 'react';
|
|
import { useTranslations } from 'next-intl';
|
|
import { Button } from '@/components/ui/shared/Button';
|
|
import { Checkbox } from '@/components/ui/shared/Checkbox';
|
|
import { isDetailReadyForLabDispatch, isLabCaseCompleted } from '@/components/treatment/treatmentDetailRules';
|
|
import { AppDateInput } from '@/components/ui/shared/AppDateInput';
|
|
import { toDateInputValue } from '@/components/lab/labCaseDueDateDisplay';
|
|
import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
|
|
import { LinkedOrganizationSearchCombobox } from '@/components/ui/treatment/LinkedOrganizationSearchCombobox';
|
|
import { CaseSentLabel } from '@/components/ui/treatment/CaseSentLabel';
|
|
import { DetailLabCaseCommentsSection } from '@/components/ui/treatment/DetailLabCaseCommentsSection';
|
|
import { LabCaseTrackerCard } from '@/components/ui/treatment/LabCaseTrackerCard';
|
|
import { treatmentTypeLabelFromCatalog } from '@/components/shared/treatmentTypeDisplay';
|
|
import { treatmentsApi } from '@/lib/api/treatments';
|
|
import { prosthesisCatalogApi } from '@/lib/api/prosthesis-catalog';
|
|
import { prosthesisTypeColorFromCatalog } from '@/components/treatment/prosthesisTypeDisplay';
|
|
import type { ProsthesisCatalogEntry, TreatmentCatalogEntry } from '@/types/treatment-catalog';
|
|
import type { LabCaseDraft, LinkedOrganizationOption, TreatmentDetailDraft } from '@/types/treatment';
|
|
import type { PatientLabCaseSummary } from '@/types/lab-case-activity';
|
|
|
|
interface LabCasesDispatchPanelProps {
|
|
details: TreatmentDetailDraft[];
|
|
activeDetailId: string;
|
|
labCases: LabCaseDraft[];
|
|
labDependentCodes: Set<string>;
|
|
treatmentCatalog: TreatmentCatalogEntry[];
|
|
labCaseSummary?: PatientLabCaseSummary | null;
|
|
locale: string;
|
|
onLabCaseSummaryChange?: (summary: PatientLabCaseSummary) => void;
|
|
onLabCaseMarkedRead?: (labCaseId: string) => void;
|
|
onLabCaseActivityChange?: () => void;
|
|
activeLabCaseId: string | null;
|
|
onLabCasesChange: (labCases: LabCaseDraft[]) => void;
|
|
disabled: boolean;
|
|
canEdit: boolean;
|
|
orgs: LinkedOrganizationOption[];
|
|
organizationSearch: string;
|
|
onOrganizationSearchChange: (value: string) => void;
|
|
recentOrganizationIds: string[];
|
|
onRecentOrganizationPick: (orgId: string) => void;
|
|
canInviteLab?: boolean;
|
|
onInviteLab?: () => void;
|
|
sendBusyId: string | null;
|
|
onAddLabCase: () => void;
|
|
onSendLabCase: (labCase: LabCaseDraft, comment?: string) => void;
|
|
onCommentError?: (message: string) => void;
|
|
}
|
|
|
|
function sentDetailClientIds(labCases: LabCaseDraft[]): Set<string> {
|
|
const ids = new Set<string>();
|
|
for (const lc of labCases) {
|
|
if (lc.sentAt && lc.detailClientId) ids.add(lc.detailClientId);
|
|
}
|
|
return ids;
|
|
}
|
|
|
|
function prosthesisTeethRows(
|
|
labCase: LabCaseDraft,
|
|
activeDetail: TreatmentDetailDraft,
|
|
detailNumber: number,
|
|
): Array<{ detailClientId: string; tooth: string; detailNumber: number }> {
|
|
if (labCase.detailClientId !== activeDetail.clientId) return [];
|
|
if (activeDetail.treatmentType !== 'prosthesis') return [];
|
|
|
|
return activeDetail.teeth.map((tooth) => ({
|
|
detailClientId: activeDetail.clientId,
|
|
tooth,
|
|
detailNumber,
|
|
}));
|
|
}
|
|
|
|
function isProsthesisMapComplete(
|
|
labCase: LabCaseDraft,
|
|
rows: Array<{ detailClientId: string; tooth: string }>,
|
|
): boolean {
|
|
if (rows.length === 0) return true;
|
|
return rows.every((row) =>
|
|
labCase.toothProsthesis.some(
|
|
(tp) =>
|
|
tp.detailClientId === row.detailClientId &&
|
|
tp.tooth === row.tooth &&
|
|
Boolean(tp.prosthesisTypeCode),
|
|
),
|
|
);
|
|
}
|
|
|
|
export function LabCasesDispatchPanel({
|
|
details,
|
|
activeDetailId,
|
|
labCases,
|
|
labDependentCodes,
|
|
treatmentCatalog,
|
|
labCaseSummary,
|
|
locale,
|
|
onLabCaseSummaryChange,
|
|
onLabCaseMarkedRead,
|
|
onLabCaseActivityChange,
|
|
activeLabCaseId,
|
|
onLabCasesChange,
|
|
disabled,
|
|
canEdit,
|
|
orgs,
|
|
organizationSearch,
|
|
onOrganizationSearchChange,
|
|
recentOrganizationIds,
|
|
onRecentOrganizationPick,
|
|
canInviteLab = false,
|
|
onInviteLab,
|
|
sendBusyId,
|
|
onAddLabCase,
|
|
onSendLabCase,
|
|
onCommentError,
|
|
}: LabCasesDispatchPanelProps) {
|
|
const t = useTranslations('treatment');
|
|
const [prosthesisOptions, setProsthesisOptions] = useState<ProsthesisCatalogEntry[]>([]);
|
|
const [applyAllProsthesis, setApplyAllProsthesis] = useState('');
|
|
const [pendingComment, setPendingComment] = useState('');
|
|
const hasTrackerSummary = Boolean(labCaseSummary && labCaseSummary.labCaseId);
|
|
|
|
const activeLinkedOrganizations = orgs.filter((o) => o.active);
|
|
const recentOrganizations = recentOrganizationIds
|
|
.map((id) => activeLinkedOrganizations.find((o) => o.id === id))
|
|
.filter(Boolean) as LinkedOrganizationOption[];
|
|
|
|
const activeDetail = details.find((d) => d.clientId === activeDetailId) ?? null;
|
|
const isLabDependentDetail = Boolean(
|
|
activeDetail && isDetailReadyForLabDispatch(activeDetail, labDependentCodes),
|
|
);
|
|
|
|
const labCaseForActiveDetail =
|
|
labCases.find((lc) => lc.detailClientId === activeDetailId) ?? null;
|
|
|
|
const activeLabCase =
|
|
labCaseForActiveDetail ??
|
|
(activeLabCaseId ? labCases.find((lc) => lc.clientId === activeLabCaseId) : null);
|
|
|
|
const detailAlreadyInShipment = Boolean(labCaseForActiveDetail);
|
|
const canAddLabShipment =
|
|
!detailAlreadyInShipment && !sentDetailClientIds(labCases).has(activeDetailId);
|
|
|
|
const sent = Boolean(activeLabCase?.sentAt);
|
|
const activeDetailNumber = details.findIndex((d) => d.clientId === activeDetailId) + 1;
|
|
|
|
const activeLabOrgName = activeLabCase?.destinationOrganizationId
|
|
? orgs.find((o) => o.id === activeLabCase.destinationOrganizationId)?.name
|
|
: null;
|
|
|
|
const prosthesisRows = activeLabCase && activeDetail
|
|
? prosthesisTeethRows(activeLabCase, activeDetail, activeDetailNumber)
|
|
: [];
|
|
const prosthesisComplete = activeLabCase
|
|
? isProsthesisMapComplete(activeLabCase, prosthesisRows)
|
|
: true;
|
|
|
|
useEffect(() => {
|
|
if (!activeLabCase?.destinationOrganizationId) {
|
|
setProsthesisOptions([]);
|
|
return;
|
|
}
|
|
|
|
let cancelled = false;
|
|
void prosthesisCatalogApi
|
|
.list(activeLabCase.destinationOrganizationId)
|
|
.then((res) => {
|
|
if (!cancelled) setProsthesisOptions(res.data);
|
|
})
|
|
.catch(() => {
|
|
if (!cancelled) setProsthesisOptions([]);
|
|
});
|
|
|
|
return () => {
|
|
cancelled = true;
|
|
};
|
|
}, [activeLabCase?.destinationOrganizationId]);
|
|
|
|
useEffect(() => {
|
|
setPendingComment('');
|
|
}, [activeLabCase?.clientId]);
|
|
|
|
if (!activeDetail || !isLabDependentDetail) {
|
|
return null;
|
|
}
|
|
|
|
function detailSummary(d: TreatmentDetailDraft) {
|
|
const typeLabel = treatmentTypeLabelFromCatalog(d.treatmentType, treatmentCatalog);
|
|
const teeth = d.teeth.length ? d.teeth.join(', ') : t('teethNone');
|
|
return `${t('detailLabel', { n: activeDetailNumber })} · ${typeLabel} · ${teeth}`;
|
|
}
|
|
|
|
function updateActiveLabCase(patch: Partial<LabCaseDraft>) {
|
|
if (!activeLabCase) return;
|
|
onLabCasesChange(
|
|
labCases.map((lc) => (lc.clientId === activeLabCase.clientId ? { ...lc, ...patch } : lc)),
|
|
);
|
|
}
|
|
|
|
function setToothProsthesis(
|
|
detailClientId: string,
|
|
tooth: string,
|
|
prosthesisTypeCode: string,
|
|
) {
|
|
if (!activeLabCase) return;
|
|
const rest = activeLabCase.toothProsthesis.filter(
|
|
(tp) => !(tp.detailClientId === detailClientId && tp.tooth === tooth),
|
|
);
|
|
const next = prosthesisTypeCode
|
|
? [...rest, { detailClientId, tooth, prosthesisTypeCode }]
|
|
: rest;
|
|
updateActiveLabCase({ toothProsthesis: next });
|
|
}
|
|
|
|
function applyProsthesisToAll(code: string) {
|
|
if (!activeLabCase || !code) return;
|
|
const next = prosthesisRows.map((row) => ({
|
|
detailClientId: row.detailClientId,
|
|
tooth: row.tooth,
|
|
prosthesisTypeCode: code,
|
|
}));
|
|
updateActiveLabCase({ toothProsthesis: next });
|
|
}
|
|
|
|
function toggleAttachmentInActiveLabCase(attachmentId: string, checked: boolean) {
|
|
if (!activeLabCase || sent) return;
|
|
const set = new Set(activeLabCase.attachmentIds);
|
|
if (checked) set.add(attachmentId);
|
|
else set.delete(attachmentId);
|
|
updateActiveLabCase({ attachmentIds: [...set] });
|
|
}
|
|
|
|
function handleSelectOrganization(org: LinkedOrganizationOption) {
|
|
updateActiveLabCase({
|
|
destinationOrganizationId: org.id,
|
|
toothProsthesis: [],
|
|
});
|
|
setApplyAllProsthesis('');
|
|
}
|
|
|
|
const caseFullyComplete = isLabCaseCompleted(activeLabCase?.taskProgress);
|
|
const canEditDueDate = canEdit && !disabled && (!sent || !caseFullyComplete);
|
|
// Comments/progress belong to the shipment context, even when the treatment is opened from history.
|
|
// Do not block commenting just because the treatment editor is read-only.
|
|
const canPostComments = canEdit && !caseFullyComplete;
|
|
const canShowComments = Boolean(activeLabCase?.id);
|
|
const commentsDeferSubmit = Boolean(!sent);
|
|
|
|
async function handleSentDueDateBlur(nextValue: string) {
|
|
if (!activeLabCase?.id || !sent || !canEditDueDate) return;
|
|
const dueDate = nextValue || null;
|
|
if (dueDate === (activeLabCase.dueDate?.slice(0, 10) ?? null)) return;
|
|
try {
|
|
const response = await treatmentsApi.updateLabCaseDueDate(activeLabCase.id, dueDate);
|
|
updateActiveLabCase({
|
|
dueDate: response.data.dueDate,
|
|
taskProgress: response.data.taskProgress ?? activeLabCase.taskProgress,
|
|
});
|
|
} catch (error) {
|
|
onCommentError?.(error instanceof Error ? error.message : t('dueDateUpdateError'));
|
|
}
|
|
}
|
|
|
|
function renderShipmentCardHeader() {
|
|
return (
|
|
<div className="flex flex-col gap-3 border-b border-border/60 pb-3 sm:flex-row sm:items-start sm:justify-between">
|
|
<p className="text-xs font-semibold text-text-primary">{t('labShipmentIncludedDetails')}</p>
|
|
{renderDueDateField()}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function renderDueDateField() {
|
|
if (!activeLabCase) return null;
|
|
const inputValue = toDateInputValue(activeLabCase.dueDate);
|
|
const dueDateInputId = `lab-case-due-date-${activeLabCase.clientId}`;
|
|
|
|
return (
|
|
<div className="shrink-0 sm:text-end">
|
|
<div className="flex items-center gap-2 sm:justify-end">
|
|
<label
|
|
htmlFor={dueDateInputId}
|
|
className="text-xs font-medium text-text-secondary shrink-0"
|
|
>
|
|
{t('dueDateLabel')}{' '}
|
|
<span className="font-normal text-text-muted">({t('dueDateOptional')})</span>
|
|
</label>
|
|
<AppDateInput
|
|
id={dueDateInputId}
|
|
value={inputValue}
|
|
disabled={!canEditDueDate}
|
|
onChange={(next) => {
|
|
updateActiveLabCase({ dueDate: next || null });
|
|
}}
|
|
onBlur={(committed) => {
|
|
if (sent) void handleSentDueDateBlur(committed);
|
|
}}
|
|
className={`${FORM_SELECT_CLASS} w-full max-w-[11rem] rounded-md py-1.5 text-sm`}
|
|
/>
|
|
</div>
|
|
{sent && caseFullyComplete && activeLabCase.dueDate ? (
|
|
<p className="mt-1.5 text-[11px] text-text-muted sm:text-end">{t('dueDateLockedCompleted')}</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function renderIncludedDetailSummary() {
|
|
if (!activeDetail) return null;
|
|
const typeLabel = treatmentTypeLabelFromCatalog(activeDetail.treatmentType, treatmentCatalog);
|
|
|
|
if (activeDetail.treatmentType !== 'prosthesis' || !activeLabCase) {
|
|
return (
|
|
<p className="text-sm text-text-primary rounded-[var(--radius-sm)] border border-border/50 bg-background-secondary/50 px-3 py-2">
|
|
{detailSummary(activeDetail)}
|
|
</p>
|
|
);
|
|
}
|
|
|
|
const byType = new Map<string, string[]>();
|
|
for (const tp of activeLabCase.toothProsthesis) {
|
|
if (tp.detailClientId !== activeDetail.clientId) continue;
|
|
if (!tp.prosthesisTypeCode) continue;
|
|
const list = byType.get(tp.prosthesisTypeCode) ?? [];
|
|
list.push(tp.tooth);
|
|
byType.set(tp.prosthesisTypeCode, list);
|
|
}
|
|
|
|
const uniqueSelected = [...new Set(activeDetail.teeth)];
|
|
const mappedTeeth = new Set<string>();
|
|
for (const teeth of byType.values()) {
|
|
for (const tooth of teeth) mappedTeeth.add(tooth);
|
|
}
|
|
const unmapped = uniqueSelected.filter((t) => !mappedTeeth.has(t));
|
|
|
|
const groups = [...byType.entries()]
|
|
.map(([code, teeth]) => ({
|
|
code,
|
|
teeth: [...new Set(teeth)].sort((a, b) => a.localeCompare(b)),
|
|
label: prosthesisOptions.find((p) => p.code === code)?.label ?? code,
|
|
}))
|
|
.sort((a, b) => a.code.localeCompare(b.code));
|
|
|
|
return (
|
|
<div className="text-sm text-text-primary rounded-[var(--radius-sm)] border border-border/50 bg-background-secondary/50 px-3 py-2 space-y-1">
|
|
<p className="text-text-primary">
|
|
{t('detailLabel', { n: activeDetailNumber })} · {typeLabel}
|
|
</p>
|
|
{groups.map((g) => (
|
|
<p
|
|
key={g.code}
|
|
className="text-[13px]"
|
|
style={{ color: prosthesisTypeColorFromCatalog(g.code, prosthesisOptions) }}
|
|
>
|
|
{g.label}: <span className="text-text-primary">{g.teeth.join(', ')}</span>
|
|
</p>
|
|
))}
|
|
{unmapped.length > 0 ? (
|
|
<p className="text-[13px] text-text-muted">
|
|
{t('prosthesisUnassigned')}: <span className="text-text-primary">{unmapped.join(', ')}</span>
|
|
</p>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const activeDetailAttachments = activeDetail.attachmentMetas ?? [];
|
|
|
|
return (
|
|
<div className="surface-card p-4 space-y-4">
|
|
<div className="flex flex-wrap items-center justify-between gap-3">
|
|
<div>
|
|
<h3 className="text-sm font-semibold text-text-primary">{t('labDispatchTitle')}</h3>
|
|
<p className="text-xs text-text-muted mt-0.5">
|
|
{t('labDispatchSubtitle')} {t('labDispatchSendHint')}
|
|
</p>
|
|
</div>
|
|
{canAddLabShipment && (
|
|
<Button
|
|
type="button"
|
|
variant="primary"
|
|
disabled={!canEdit || disabled}
|
|
onClick={onAddLabCase}
|
|
>
|
|
{t('addLabShipment')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{!detailAlreadyInShipment ? (
|
|
<p className="text-xs text-text-muted">{t('labDispatchEmpty')}</p>
|
|
) : activeLabCase ? (
|
|
<div className="space-y-4 border border-border/60 rounded-[var(--radius-md)] p-3 sm:p-4 bg-background-secondary/30">
|
|
{renderShipmentCardHeader()}
|
|
{sent ? (
|
|
<>
|
|
{renderIncludedDetailSummary()}
|
|
{hasTrackerSummary && labCaseSummary ? (
|
|
<LabCaseTrackerCard
|
|
summary={labCaseSummary}
|
|
locale={locale}
|
|
onSummaryChange={onLabCaseSummaryChange}
|
|
onMarkedRead={onLabCaseMarkedRead}
|
|
/>
|
|
) : null}
|
|
|
|
{canShowComments && activeLabCase?.id ? (
|
|
<DetailLabCaseCommentsSection
|
|
labCaseId={activeLabCase.id}
|
|
canPost={canPostComments}
|
|
onError={onCommentError}
|
|
onMarkRead={onLabCaseMarkedRead}
|
|
onActivityChange={onLabCaseActivityChange}
|
|
/>
|
|
) : null}
|
|
|
|
{activeLabOrgName ? (
|
|
<div>
|
|
<p className="text-xs font-medium text-text-secondary">{t('selectLab')}</p>
|
|
<p className="text-sm text-text-primary mt-1">{activeLabOrgName}</p>
|
|
</div>
|
|
) : null}
|
|
|
|
<CaseSentLabel
|
|
treatmentCase={{
|
|
destinationOrganizationId: activeLabCase.destinationOrganizationId,
|
|
sendToOrganizationIds: activeLabCase.destinationOrganizationId
|
|
? [activeLabCase.destinationOrganizationId]
|
|
: [],
|
|
sentAt: activeLabCase.sentAt ?? null,
|
|
sends: activeLabCase.sends,
|
|
}}
|
|
orgs={orgs}
|
|
/>
|
|
</>
|
|
) : (
|
|
<>
|
|
{renderIncludedDetailSummary()}
|
|
|
|
{!sent && activeDetailAttachments.length > 0 ? (
|
|
<div>
|
|
<p className="text-xs font-medium text-text-secondary mb-2">
|
|
{t('labShipmentAttachments')}
|
|
</p>
|
|
<p className="text-[11px] text-text-muted mb-2">{t('labShipmentAttachmentsHint')}</p>
|
|
<div className="flex flex-col gap-2">
|
|
{activeDetailAttachments.map((att) => (
|
|
<Checkbox
|
|
key={att.id}
|
|
checked={activeLabCase.attachmentIds.includes(att.id)}
|
|
disabled={disabled}
|
|
onChange={(next) => toggleAttachmentInActiveLabCase(att.id, next)}
|
|
label={`${att.fileName} (${(att.sizeBytes / 1024).toFixed(1)} KB)`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
{hasTrackerSummary && labCaseSummary ? (
|
|
<LabCaseTrackerCard
|
|
summary={labCaseSummary}
|
|
locale={locale}
|
|
onSummaryChange={onLabCaseSummaryChange}
|
|
onMarkedRead={onLabCaseMarkedRead}
|
|
/>
|
|
) : null}
|
|
|
|
{canShowComments && activeLabCase?.id ? (
|
|
<DetailLabCaseCommentsSection
|
|
labCaseId={activeLabCase.id}
|
|
canPost={canPostComments}
|
|
deferSubmit={commentsDeferSubmit}
|
|
composerValue={pendingComment}
|
|
onComposerValueChange={setPendingComment}
|
|
onError={onCommentError}
|
|
onMarkRead={onLabCaseMarkedRead}
|
|
onActivityChange={onLabCaseActivityChange}
|
|
/>
|
|
) : null}
|
|
|
|
<div className="space-y-2">
|
|
<p className="text-xs font-medium text-text-secondary">{t('selectLab')}</p>
|
|
<LinkedOrganizationSearchCombobox
|
|
search={organizationSearch}
|
|
onSearchChange={onOrganizationSearchChange}
|
|
organizations={activeLinkedOrganizations}
|
|
selectedOrganizationId={activeLabCase.destinationOrganizationId}
|
|
onSelectOrganization={handleSelectOrganization}
|
|
disabled={disabled}
|
|
canInviteLab={canInviteLab}
|
|
onInviteLab={onInviteLab}
|
|
noPermissionMessage={t('noOrgInvitePermission')}
|
|
/>
|
|
{recentOrganizations.length > 0 && (
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<span className="text-xs text-text-muted">{t('recent')}</span>
|
|
{recentOrganizations.map((o) => (
|
|
<button
|
|
key={o.id}
|
|
type="button"
|
|
disabled={disabled}
|
|
onClick={() => onRecentOrganizationPick(o.id)}
|
|
className="text-xs rounded-[var(--radius-sm)] border border-border/70 px-2 py-1 text-text-secondary hover:text-text-primary hover:border-border focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 disabled:opacity-50"
|
|
>
|
|
{o.name}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{prosthesisRows.length > 0 && activeLabCase.destinationOrganizationId ? (
|
|
<div className="space-y-3 border-t border-border/60 pt-3">
|
|
<p className="text-xs font-medium text-text-secondary">
|
|
{t('prosthesisTypesTitle')}
|
|
</p>
|
|
<label className="block text-xs text-text-muted space-y-1">
|
|
{t('prosthesisApplyAll')}
|
|
<select
|
|
value={applyAllProsthesis}
|
|
disabled={disabled || prosthesisOptions.length === 0}
|
|
onChange={(e) => {
|
|
const code = e.target.value;
|
|
setApplyAllProsthesis(code);
|
|
if (code) applyProsthesisToAll(code);
|
|
}}
|
|
className={`${FORM_SELECT_CLASS} w-full mt-1`}
|
|
>
|
|
<option value="">{t('prosthesisSelectPlaceholder')}</option>
|
|
{prosthesisOptions.map((opt) => (
|
|
<option key={opt.code} value={opt.code}>
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</label>
|
|
<div className="overflow-x-auto overscroll-x-contain">
|
|
<table className="w-full text-sm">
|
|
<thead>
|
|
<tr className="text-left text-xs text-text-muted">
|
|
<th className="pb-2 pr-3 font-medium">{t('prosthesisColTooth')}</th>
|
|
<th className="pb-2 pr-3 font-medium">{t('prosthesisColDetail')}</th>
|
|
<th className="pb-2 font-medium">{t('prosthesisColType')}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{prosthesisRows.map((row) => {
|
|
const current =
|
|
activeLabCase.toothProsthesis.find(
|
|
(tp) =>
|
|
tp.detailClientId === row.detailClientId &&
|
|
tp.tooth === row.tooth,
|
|
)?.prosthesisTypeCode ?? '';
|
|
return (
|
|
<tr key={`${row.detailClientId}-${row.tooth}`} className="border-t border-border/40">
|
|
<td className="py-2 pr-3 text-text-primary">{row.tooth}</td>
|
|
<td className="py-2 pr-3 text-text-secondary">
|
|
{t('detailLabel', { n: row.detailNumber })}
|
|
</td>
|
|
<td className="py-2">
|
|
<select
|
|
value={current}
|
|
disabled={disabled}
|
|
onChange={(e) =>
|
|
setToothProsthesis(
|
|
row.detailClientId,
|
|
row.tooth,
|
|
e.target.value,
|
|
)
|
|
}
|
|
className={`${FORM_SELECT_CLASS} w-full min-w-0 sm:min-w-[160px]`}
|
|
>
|
|
<option value="">{t('prosthesisSelectPlaceholder')}</option>
|
|
{prosthesisOptions.map((opt) => (
|
|
<option key={opt.code} value={opt.code}>
|
|
{opt.label}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
) : null}
|
|
|
|
<div className="flex flex-wrap items-center gap-3 pt-1">
|
|
<Button
|
|
type="button"
|
|
variant="primary"
|
|
className="w-full sm:w-auto"
|
|
disabled={
|
|
disabled ||
|
|
sendBusyId === activeLabCase.clientId ||
|
|
!activeLabCase.destinationOrganizationId ||
|
|
!activeLabCase.detailClientId ||
|
|
!prosthesisComplete
|
|
}
|
|
isLoading={sendBusyId === activeLabCase.clientId}
|
|
onClick={() => onSendLabCase(activeLabCase, pendingComment.trim())}
|
|
>
|
|
{t('sendToLab')}
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|