improvement: treatment UX fully overhauled.

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

@@ -1,58 +1,56 @@
 'use client';
 
 import { useTranslations } from 'next-intl';
-import { Button } from '@/components/ui/shared/Button';
 import { TreatmentDetailSummaryRow } from '@/components/ui/treatment/TreatmentDetailSummaryRow';
 import type { LinkedOrganizationOption, PastTreatment } from '@/types/treatment';
 import type { TreatmentCatalogEntry } from '@/types/treatment-catalog';
 
 interface TreatmentPreviewCardProps {
   treatment: PastTreatment | null;
+  /** e.g. "Current draft" or a formatted date label while browsing. */
+  heading: string;
   labDependentCodes: Set<string>;
   treatmentCatalog: TreatmentCatalogEntry[];
   orgs?: LinkedOrganizationOption[];
-  openDisabled?: boolean;
-  onOpen: () => void;
 }
 
 export function TreatmentPreviewCard({
   treatment,
+  heading,
   labDependentCodes,
   treatmentCatalog,
   orgs,
-  openDisabled = false,
-  onOpen,
 }: TreatmentPreviewCardProps) {
   const t = useTranslations('treatment');
 
   return (
     <div className="surface-card p-4 space-y-3">
-      <div className="flex items-center justify-between gap-2">
-        <h3 className="text-sm font-semibold text-text-primary">{t('previewTitle')}</h3>
-        <Button type="button" variant="primary" disabled={openDisabled || !treatment} onClick={onOpen}>
-          {t('openTreatment')}
-        </Button>
-      </div>
+      <h3 className="text-sm font-semibold text-text-primary">{heading}</h3>
+
       {!treatment ? (
         <p className="text-sm text-text-muted">{t('selectAppointment')}</p>
       ) : (
         <div className="border border-border/70 rounded-[var(--radius-md)] p-3 bg-background-secondary/40 space-y-2">
-          <div className="flex items-start justify-between gap-2">
-            <p className="text-sm font-medium text-text-primary">{treatment.title}</p>
+          {treatment.id !== 'current-draft' ? (
             <time
-              className="text-xs text-text-muted tabular-nums shrink-0"
+              className="text-xs text-text-muted tabular-nums block"
               dateTime={treatment.treatmentAt}
             >
-              {new Date(treatment.treatmentAt).toLocaleDateString()}
+              {new Date(treatment.treatmentAt).toLocaleDateString(undefined, {
+                weekday: 'short',
+                year: 'numeric',
+                month: 'short',
+                day: 'numeric',
+              })}
             </time>
-          </div>
+          ) : null}
           <div className="space-y-2 max-h-[min(280px,40vh)] overflow-y-auto pr-1">
             {treatment.details.length === 0 ? (
               <p className="text-xs text-text-muted">{t('noDetails')}</p>
             ) : (
               treatment.details.map((detail, idx) => (
                 <TreatmentDetailSummaryRow
-                  key={detail.clientId ?? detail.id}
+                  key={`${detail.clientId ?? detail.id}-${idx}`}
                   detail={detail}
                   detailNumber={idx + 1}
                   labDependentCodes={labDependentCodes}