improvement: lab case dispatch UI improved.
This commit is contained in:
@@ -1,5 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useMemo } from 'react';
|
||||
import { useTranslations } from 'next-intl';
|
||||
import { Button } from '@/components/ui/shared/Button';
|
||||
import { Checkbox } from '@/components/ui/shared/Checkbox';
|
||||
@@ -29,6 +30,65 @@ interface LabCasesDispatchPanelProps {
|
||||
onSendLabCase: (labCase: LabCaseDraft) => void;
|
||||
}
|
||||
|
||||
function sentDetailClientIds(labCases: LabCaseDraft[]): Set<string> {
|
||||
const ids = new Set<string>();
|
||||
for (const lc of labCases) {
|
||||
if (!lc.sentAt) continue;
|
||||
for (const id of lc.detailClientIds) ids.add(id);
|
||||
}
|
||||
return ids;
|
||||
}
|
||||
|
||||
function detailInOtherDraftShipment(
|
||||
detailClientId: string,
|
||||
labCases: LabCaseDraft[],
|
||||
activeLabCaseClientId: string,
|
||||
): boolean {
|
||||
return labCases.some(
|
||||
(lc) =>
|
||||
!lc.sentAt &&
|
||||
lc.clientId !== activeLabCaseClientId &&
|
||||
lc.detailClientIds.includes(detailClientId),
|
||||
);
|
||||
}
|
||||
|
||||
/** Lab-dependent details not yet sent to any lab. */
|
||||
function unsentLabDetails(
|
||||
details: TreatmentDetailDraft[],
|
||||
labCases: LabCaseDraft[],
|
||||
labDependentCodes: Set<string>,
|
||||
): TreatmentDetailDraft[] {
|
||||
const sent = sentDetailClientIds(labCases);
|
||||
return details.filter((d) => labDependentCodes.has(d.treatmentType) && !sent.has(d.clientId));
|
||||
}
|
||||
|
||||
/** Unsent lab details not already assigned to another draft shipment. */
|
||||
function detailsAvailableForNewShipment(
|
||||
details: TreatmentDetailDraft[],
|
||||
labCases: LabCaseDraft[],
|
||||
labDependentCodes: Set<string>,
|
||||
): TreatmentDetailDraft[] {
|
||||
return unsentLabDetails(details, labCases, labDependentCodes).filter(
|
||||
(d) => !detailInOtherDraftShipment(d.clientId, labCases, ''),
|
||||
);
|
||||
}
|
||||
|
||||
/** Details the user can pick for the active draft shipment. */
|
||||
function selectableDetailsForDraftShipment(
|
||||
details: TreatmentDetailDraft[],
|
||||
labCases: LabCaseDraft[],
|
||||
labDependentCodes: Set<string>,
|
||||
activeLabCase: LabCaseDraft,
|
||||
): TreatmentDetailDraft[] {
|
||||
const sent = sentDetailClientIds(labCases);
|
||||
return details.filter((d) => {
|
||||
if (!labDependentCodes.has(d.treatmentType)) return false;
|
||||
if (sent.has(d.clientId)) return false;
|
||||
if (activeLabCase.detailClientIds.includes(d.clientId)) return true;
|
||||
return !detailInOtherDraftShipment(d.clientId, labCases, activeLabCase.clientId);
|
||||
});
|
||||
}
|
||||
|
||||
export function LabCasesDispatchPanel({
|
||||
details,
|
||||
labCases,
|
||||
@@ -58,19 +118,37 @@ export function LabCasesDispatchPanel({
|
||||
.map((id) => activeLinkedOrganizations.find((o) => o.id === id))
|
||||
.filter(Boolean) as LinkedOrganizationOption[];
|
||||
|
||||
const labEligibleDetails = details.filter((d) => labDependentCodes.has(d.treatmentType));
|
||||
const labEligibleDetails = useMemo(
|
||||
() => details.filter((d) => labDependentCodes.has(d.treatmentType)),
|
||||
[details, labDependentCodes],
|
||||
);
|
||||
|
||||
const canAddLabShipment = useMemo(
|
||||
() => detailsAvailableForNewShipment(details, labCases, labDependentCodes).length > 0,
|
||||
[details, labCases, labDependentCodes],
|
||||
);
|
||||
|
||||
const activeLabCase =
|
||||
labCases.find((lc) => lc.clientId === activeLabCaseId) ?? labCases[0] ?? null;
|
||||
const sent = Boolean(activeLabCase?.sentAt);
|
||||
|
||||
function detailSummary(d: TreatmentDetailDraft, idx: number) {
|
||||
const activeLabOrgName = activeLabCase?.destinationOrganizationId
|
||||
? orgs.find((o) => o.id === activeLabCase.destinationOrganizationId)?.name
|
||||
: null;
|
||||
|
||||
function detailNumber(d: TreatmentDetailDraft) {
|
||||
const idx = details.findIndex((row) => row.clientId === d.clientId);
|
||||
return idx >= 0 ? idx + 1 : 0;
|
||||
}
|
||||
|
||||
function detailSummary(d: TreatmentDetailDraft) {
|
||||
const typeKey = treatmentTypeLabelKey(d.treatmentType);
|
||||
const typeLabel =
|
||||
d.treatmentType in TREATMENT_TYPE_KEYS
|
||||
? t(typeKey as 'typeEndo')
|
||||
: d.treatmentType;
|
||||
const teeth = d.teeth.length ? d.teeth.join(', ') : t('teethNone');
|
||||
return `${t('detailLabel', { n: idx + 1 })} · ${typeLabel} · ${teeth}`;
|
||||
return `${t('detailLabel', { n: detailNumber(d) })} · ${typeLabel} · ${teeth}`;
|
||||
}
|
||||
|
||||
function updateActiveLabCase(patch: Partial<LabCaseDraft>) {
|
||||
@@ -105,16 +183,6 @@ export function LabCasesDispatchPanel({
|
||||
);
|
||||
}
|
||||
|
||||
function detailAssignedElsewhere(detailClientId: string): boolean {
|
||||
if (!activeLabCase) return false;
|
||||
return labCases.some(
|
||||
(lc) =>
|
||||
!lc.sentAt &&
|
||||
lc.clientId !== activeLabCase.clientId &&
|
||||
lc.detailClientIds.includes(detailClientId),
|
||||
);
|
||||
}
|
||||
|
||||
if (labEligibleDetails.length === 0) {
|
||||
return (
|
||||
<div className="surface-card p-4 space-y-2">
|
||||
@@ -124,6 +192,15 @@ export function LabCasesDispatchPanel({
|
||||
);
|
||||
}
|
||||
|
||||
const includedInActiveShipment = activeLabCase
|
||||
? labEligibleDetails.filter((d) => activeLabCase.detailClientIds.includes(d.clientId))
|
||||
: [];
|
||||
|
||||
const pickableForActiveDraft =
|
||||
activeLabCase && !sent
|
||||
? selectableDetailsForDraftShipment(details, labCases, labDependentCodes, activeLabCase)
|
||||
: [];
|
||||
|
||||
return (
|
||||
<div className="surface-card p-4 space-y-4">
|
||||
<div className="flex flex-wrap items-center justify-between gap-3">
|
||||
@@ -133,14 +210,16 @@ export function LabCasesDispatchPanel({
|
||||
{t('labDispatchSubtitle')} {t('labDispatchSendHint')}
|
||||
</p>
|
||||
</div>
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
disabled={!canEdit || disabled}
|
||||
onClick={onAddLabCase}
|
||||
>
|
||||
{t('addLabShipment')}
|
||||
</Button>
|
||||
{canAddLabShipment && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
disabled={!canEdit || disabled}
|
||||
onClick={onAddLabCase}
|
||||
>
|
||||
{t('addLabShipment')}
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{labCases.length === 0 ? (
|
||||
@@ -182,105 +261,44 @@ export function LabCasesDispatchPanel({
|
||||
|
||||
{activeLabCase && (
|
||||
<div className="space-y-4 border border-border/60 rounded-[var(--radius-md)] p-4 bg-background-secondary/30">
|
||||
<div>
|
||||
<p className="text-xs font-medium text-text-secondary mb-2">{t('includeDetails')}</p>
|
||||
<div className="flex flex-col gap-2">
|
||||
{labEligibleDetails.map((d, idx) => {
|
||||
const assignedElsewhere = detailAssignedElsewhere(d.clientId);
|
||||
const inSentCase = labCases.some(
|
||||
(lc) => lc.sentAt && lc.detailClientIds.includes(d.clientId),
|
||||
);
|
||||
const checked = activeLabCase.detailClientIds.includes(d.clientId);
|
||||
const itemDisabled =
|
||||
disabled || sent || inSentCase || assignedElsewhere;
|
||||
|
||||
return (
|
||||
<Checkbox
|
||||
key={d.clientId}
|
||||
checked={checked || inSentCase}
|
||||
disabled={itemDisabled}
|
||||
onChange={(next) => toggleDetailInActiveLabCase(d.clientId, next)}
|
||||
label={detailSummary(d, idx)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label className="block text-xs font-medium text-text-secondary">
|
||||
{t('labComment')}
|
||||
<textarea
|
||||
value={activeLabCase.labComment}
|
||||
onChange={(e) => updateActiveLabCase({ labComment: e.target.value })}
|
||||
placeholder={t('labCommentPlaceholder')}
|
||||
rows={3}
|
||||
disabled={disabled || sent}
|
||||
className="mt-1.5 w-full rounded-[var(--radius-md)] border border-border bg-background-secondary/90 text-text-primary text-sm px-3 py-2 placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/35 resize-y"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-text-secondary">{t('selectLab')}</p>
|
||||
<SearchBar
|
||||
embedded
|
||||
value={organizationSearch}
|
||||
onChange={onOrganizationSearchChange}
|
||||
placeholder={t('searchOrgsPlaceholder')}
|
||||
/>
|
||||
{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 || sent}
|
||||
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>
|
||||
))}
|
||||
{sent ? (
|
||||
<>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-text-secondary mb-2">
|
||||
{t('labShipmentIncludedDetails')}
|
||||
</p>
|
||||
{includedInActiveShipment.length === 0 ? (
|
||||
<p className="text-xs text-text-muted">{t('labShipmentNoIncludedDetails')}</p>
|
||||
) : (
|
||||
<ul className="space-y-1.5">
|
||||
{includedInActiveShipment.map((d) => (
|
||||
<li
|
||||
key={d.clientId}
|
||||
className="text-sm text-text-primary rounded-[var(--radius-sm)] border border-border/50 bg-background-secondary/50 px-3 py-2"
|
||||
>
|
||||
{detailSummary(d)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<Dropdown
|
||||
value={activeLabCase.destinationOrganizationId ?? ''}
|
||||
onChange={(e) =>
|
||||
updateActiveLabCase({
|
||||
destinationOrganizationId: e.target.value || null,
|
||||
})
|
||||
}
|
||||
disabled={disabled || sent || filteredOrganizations.length === 0}
|
||||
>
|
||||
<option value="">{t('selectLabPlaceholder')}</option>
|
||||
{filteredOrganizations.map((o) => (
|
||||
<option key={o.id} value={o.id}>
|
||||
{o.name}
|
||||
</option>
|
||||
))}
|
||||
</Dropdown>
|
||||
{filteredOrganizations.length === 0 && (
|
||||
<p className="text-xs text-text-muted">{t('noOrgMatch')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 pt-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
disabled={
|
||||
disabled ||
|
||||
sent ||
|
||||
sendBusyId === activeLabCase.clientId ||
|
||||
!activeLabCase.destinationOrganizationId ||
|
||||
activeLabCase.detailClientIds.length === 0
|
||||
}
|
||||
isLoading={sendBusyId === activeLabCase.clientId}
|
||||
onClick={() => onSendLabCase(activeLabCase)}
|
||||
>
|
||||
{t('sendToLab')}
|
||||
</Button>
|
||||
{sent && (
|
||||
{activeLabCase.labComment.trim() ? (
|
||||
<div>
|
||||
<p className="text-xs font-medium text-text-secondary">{t('labComment')}</p>
|
||||
<p className="text-sm text-text-primary mt-1 whitespace-pre-wrap">
|
||||
{activeLabCase.labComment}
|
||||
</p>
|
||||
</div>
|
||||
) : 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,
|
||||
@@ -292,11 +310,110 @@ export function LabCasesDispatchPanel({
|
||||
}}
|
||||
orgs={orgs}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div>
|
||||
<p className="text-xs font-medium text-text-secondary mb-2">
|
||||
{t('includeDetails')}
|
||||
</p>
|
||||
{pickableForActiveDraft.length === 0 ? (
|
||||
<p className="text-xs text-text-muted">{t('labShipmentNoDetailsAvailable')}</p>
|
||||
) : (
|
||||
<div className="flex flex-col gap-2">
|
||||
{pickableForActiveDraft.map((d) => {
|
||||
const checked = activeLabCase.detailClientIds.includes(d.clientId);
|
||||
return (
|
||||
<Checkbox
|
||||
key={d.clientId}
|
||||
checked={checked}
|
||||
disabled={disabled}
|
||||
onChange={(next) => toggleDetailInActiveLabCase(d.clientId, next)}
|
||||
label={detailSummary(d)}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<label className="block text-xs font-medium text-text-secondary">
|
||||
{t('labComment')}
|
||||
<textarea
|
||||
value={activeLabCase.labComment}
|
||||
onChange={(e) => updateActiveLabCase({ labComment: e.target.value })}
|
||||
placeholder={t('labCommentPlaceholder')}
|
||||
rows={3}
|
||||
disabled={disabled}
|
||||
className="mt-1.5 w-full rounded-[var(--radius-md)] border border-border bg-background-secondary/90 text-text-primary text-sm px-3 py-2 placeholder:text-text-muted focus:outline-none focus:ring-2 focus:ring-primary/35 resize-y"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="space-y-2">
|
||||
<p className="text-xs font-medium text-text-secondary">{t('selectLab')}</p>
|
||||
<SearchBar
|
||||
embedded
|
||||
value={organizationSearch}
|
||||
onChange={onOrganizationSearchChange}
|
||||
placeholder={t('searchOrgsPlaceholder')}
|
||||
/>
|
||||
{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>
|
||||
)}
|
||||
<Dropdown
|
||||
value={activeLabCase.destinationOrganizationId ?? ''}
|
||||
onChange={(e) =>
|
||||
updateActiveLabCase({
|
||||
destinationOrganizationId: e.target.value || null,
|
||||
})
|
||||
}
|
||||
disabled={disabled || filteredOrganizations.length === 0}
|
||||
>
|
||||
<option value="">{t('selectLabPlaceholder')}</option>
|
||||
{filteredOrganizations.map((o) => (
|
||||
<option key={o.id} value={o.id}>
|
||||
{o.name}
|
||||
</option>
|
||||
))}
|
||||
</Dropdown>
|
||||
{filteredOrganizations.length === 0 && (
|
||||
<p className="text-xs text-text-muted">{t('noOrgMatch')}</p>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-3 pt-1">
|
||||
<Button
|
||||
type="button"
|
||||
variant="primary"
|
||||
disabled={
|
||||
disabled ||
|
||||
sendBusyId === activeLabCase.clientId ||
|
||||
!activeLabCase.destinationOrganizationId ||
|
||||
activeLabCase.detailClientIds.length === 0
|
||||
}
|
||||
isLoading={sendBusyId === activeLabCase.clientId}
|
||||
onClick={() => onSendLabCase(activeLabCase)}
|
||||
>
|
||||
{t('sendToLab')}
|
||||
</Button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user