improvement: lab case dispatch UI improved.

2026-06-28 18:48:06 +03:30
parent 7b8ed48fa0
commit 94b97aa0fa
4 changed files with 247 additions and 121 deletions
--- a/frontend/messages/en.json
+++ b/frontend/messages/en.json
@@ -467,6 +467,9 @@
    "addLabShipment": "Add lab shipment",
    "labShipmentLabel": "Shipment {n}",
    "includeDetails": "Include treatment details",
+    "labShipmentIncludedDetails": "Included in this shipment",
+    "labShipmentNoIncludedDetails": "No details were included in this shipment.",
+    "labShipmentNoDetailsAvailable": "All lab details are already in other shipments or have been sent.",
    "labDetailLine": "Detail {n} · {type} · {teeth}",
    "noLabDetails": "No lab-dependent treatment details yet. Add a lab type (e.g. endo) in treatment details above.",
    "labDispatchEmpty": "Add a lab shipment to group details and send them to a lab.",
--- a/frontend/messages/fa.json
+++ b/frontend/messages/fa.json
@@ -467,6 +467,9 @@
    "addLabShipment": "افزودن محموله لاب",
    "labShipmentLabel": "محموله {n}",
    "includeDetails": "شامل جزئیات درمان",
+    "labShipmentIncludedDetails": "شامل این محموله",
+    "labShipmentNoIncludedDetails": "جزئیاتی در این محموله گنجانده نشده است.",
+    "labShipmentNoDetailsAvailable": "همه جزئیات لاب در محموله‌های دیگر هستند یا ارسال شده‌اند.",
    "labDetailLine": "جزئیات {n} · {type} · {teeth}",
    "noLabDetails": "هنوز جزئیات وابسته به لاب وجود ندارد. نوع لاب (مثلاً اندو) در جزئیات درمان بالا اضافه کنید.",
    "labDispatchEmpty": "یک محموله لاب اضافه کنید تا جزئیات را گروه‌بندی و ارسال کنید.",
--- a/frontend/messages/nl.json
+++ b/frontend/messages/nl.json
@@ -467,6 +467,9 @@
    "addLabShipment": "Labzending toevoegen",
    "labShipmentLabel": "Zending {n}",
    "includeDetails": "Behandeldetails opnemen",
+    "labShipmentIncludedDetails": "Opgenomen in deze zending",
+    "labShipmentNoIncludedDetails": "Geen details opgenomen in deze zending.",
+    "labShipmentNoDetailsAvailable": "Alle labdetails zitten al in andere zendingen of zijn verzonden.",
    "labDetailLine": "Detail {n} · {type} · {teeth}",
    "noLabDetails": "Nog geen lab-afhankelijke details. Voeg een labtype (bijv. endo) toe in de behandeldetails hierboven.",
    "labDispatchEmpty": "Voeg een labzending toe om details te groeperen en naar een lab te sturen.",
--- a/frontend/src/components/ui/treatment/LabCasesDispatchPanel.tsx
+++ b/frontend/src/components/ui/treatment/LabCasesDispatchPanel.tsx
@@ -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>