improvement: treatment UX fully overhauled.

frontend/src/components/ui/treatment/PastTreatmentsPanel.tsx

@@ -1,43 +1,127 @@
 'use client';
 
+import { useMemo, useState } from 'react';
 import { useTranslations } from 'next-intl';
+import { Button } from '@/components/ui/shared/Button';
+import { Checkbox } from '@/components/ui/shared/Checkbox';
+import { FORM_SELECT_CLASS } from '@/components/shared/formSelectStyles';
 import { TreatmentHistoryDetailLine } from '@/components/ui/treatment/TreatmentHistoryDetailLine';
-import type { PastTreatment } from '@/types/treatment';
+import { DetailLabSendBadge } from '@/components/ui/treatment/DetailLabSendBadge';
+import { filterTreatmentHistoryItems } from '@/components/treatment/treatmentHistoryFilters';
+import type { LinkedOrganizationOption, PastTreatment } from '@/types/treatment';
 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
 
 interface PastTreatmentsPanelProps {
   items: PastTreatment[];
+  currentDraft?: PastTreatment | null;
+  patientName?: string;
+  currentAppointmentId?: string | null;
   treatmentCatalog: TreatmentCatalogEntry[];
+  labDependentCodes: Set<string>;
+  orgs?: LinkedOrganizationOption[];
   loading?: boolean;
   selectedPreviewId?: string | null;
   onSelectTreatment?: (treatment: PastTreatment) => void;
 }
 
+function formatHistoryTimestamp(iso: string): string {
+  const date = new Date(iso);
+  return date.toLocaleString(undefined, {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+    year: 'numeric',
+    hour: 'numeric',
+    minute: '2-digit',
+  });
+}
+
 export function PastTreatmentsPanel({
   items,
+  currentDraft = null,
+  patientName,
+  currentAppointmentId,
   treatmentCatalog,
+  labDependentCodes,
+  orgs,
   loading,
   selectedPreviewId,
   onSelectTreatment,
 }: PastTreatmentsPanelProps) {
   const t = useTranslations('treatment');
+  const [notShippedOnly, setNotShippedOnly] = useState(false);
+  const [filterDate, setFilterDate] = useState('');
+
+  const hasActiveFilters = notShippedOnly || Boolean(filterDate);
+
+  const displayedItems = useMemo(
+    () =>
+      filterTreatmentHistoryItems(items, currentDraft, labDependentCodes, {
+        notShippedOnly,
+        date: filterDate,
+      }),
+    [items, currentDraft, labDependentCodes, notShippedOnly, filterDate],
+  );
+
+  function clearFilters() {
+    setNotShippedOnly(false);
+    setFilterDate('');
+  }
+
+  const filterInputClass = `${FORM_SELECT_CLASS} rounded-md px-2 py-1.5 text-xs min-w-[9.5rem]`;
 
   return (
     <div className="surface-card p-4 space-y-3">
       <div>
-        <h3 className="text-sm font-semibold text-text-primary">{t('historyTitle')}</h3>
+        <h3 className="text-sm font-semibold text-text-primary">
+          {patientName ? t('historyPatientScope', { patientName }) : t('historyTitle')}
+        </h3>
         <p className="text-[11px] text-text-muted mt-0.5">{t('historySubtitle')}</p>
       </div>
 
+      <div className="flex flex-wrap items-center gap-x-3 gap-y-2 rounded-[var(--radius-md)] border border-border/60 bg-background-secondary/30 p-2.5">
+        <Checkbox
+          checked={notShippedOnly}
+          onChange={setNotShippedOnly}
+          label={t('historyFilterNotShipped')}
+          className="text-xs [&_span:last-child]:text-xs shrink-0"
+        />
+        <label className="flex items-center gap-1.5 shrink-0">
+          <span className="text-xs font-medium text-text-muted whitespace-nowrap">
+            {t('historyFilterDate')}
+          </span>
+          <input
+            type="date"
+            value={filterDate}
+            onChange={(e) => setFilterDate(e.target.value)}
+            className={filterInputClass}
+          />
+        </label>
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={clearFilters}
+          disabled={!hasActiveFilters}
+          className="shrink-0"
+        >
+          {t('historyClearFilters')}
+        </Button>
+      </div>
+
       {loading && <p className="text-sm text-text-muted">{t('loadingHistory')}</p>}
 
-      {!loading && items.length === 0 && (
-        <p className="text-sm text-text-muted">{t('historyEmpty')}</p>
+      {!loading && displayedItems.length === 0 && (
+        <p className="text-sm text-text-muted">
+          {hasActiveFilters ? t('historyFilterEmpty') : t('historyEmpty')}
+        </p>
       )}
 
-      <div className="space-y-1.5 max-h-[min(420px,50vh)] overflow-y-auto pr-1">
-        {items.map((treatment) => {
+      <div className="space-y-1.5 max-h-[min(420px,50vh)] overflow-y-auto overscroll-y-contain pr-1">
+        {displayedItems.map((treatment) => {
           const isSelected = selectedPreviewId === treatment.id;
+          const isCurrentAppointment =
+            Boolean(currentAppointmentId) && treatment.appointmentId === currentAppointmentId;
+          const isLiveDraft = treatment.id === 'current-draft';
 
           return (
             <article
@@ -61,28 +145,41 @@ export function PastTreatmentsPanel({
                 }
               `}
             >
-              <time
-                className="text-xs font-medium text-text-primary tabular-nums block"
-                dateTime={treatment.treatmentAt}
-              >
-                {new Date(treatment.treatmentAt).toLocaleDateString(undefined, {
-                  year: 'numeric',
-                  month: 'short',
-                  day: 'numeric',
-                })}
-              </time>
+              <div className="flex flex-wrap items-center gap-2">
+                <time
+                  className="text-xs font-medium text-text-primary tabular-nums"
+                  dateTime={treatment.treatmentAt}
+                >
+                  {formatHistoryTimestamp(treatment.treatmentAt)}
+                </time>
+                {isLiveDraft ? (
+                  <span className="text-[10px] font-medium uppercase tracking-wide text-primary">
+                    {t('labAttentionCurrentDraft')}
+                  </span>
+                ) : isCurrentAppointment ? (
+                  <span className="text-[10px] font-medium uppercase tracking-wide text-primary">
+                    {t('historyCurrentAppointment')}
+                  </span>
+                ) : null}
+              </div>
 
               {treatment.details.length === 0 ? (
                 <p className="text-[10px] text-text-muted mt-1">{t('noDetails')}</p>
               ) : (
                 <div className="mt-1.5 divide-y divide-border/50 border-t border-border/40 pointer-events-none">
                   {treatment.details.map((detail, idx) => (
-                    <div key={detail.clientId ?? detail.id} className="py-1.5">
+                    <div key={`${detail.clientId ?? detail.id}-${idx}`} className="py-1.5 space-y-1">
                       <TreatmentHistoryDetailLine
                         detail={detail}
                         detailNumber={idx + 1}
                         treatmentCatalog={treatmentCatalog}
                       />
+                      <DetailLabSendBadge
+                        detail={detail}
+                        labDependentCodes={labDependentCodes}
+                        orgs={orgs}
+                        className="text-[10px] px-1.5 py-0"
+                      />
                     </div>
                   ))}
                 </div>