feature: Preview added for treatments.

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

@@ -6,9 +6,16 @@ import type { PastTreatment } from '@/types/treatment';
 interface PastTreatmentsPanelProps {
   items: PastTreatment[];
   loading?: boolean;
+  selectedTreatmentId?: string | null;
+  onSelectTreatment?: (treatment: PastTreatment) => void;
 }
 
-export function PastTreatmentsPanel({ items, loading }: PastTreatmentsPanelProps) {
+export function PastTreatmentsPanel({
+  items,
+  loading,
+  selectedTreatmentId,
+  onSelectTreatment,
+}: PastTreatmentsPanelProps) {
   return (
     <div className="surface-card p-4 space-y-3">
       <div>
@@ -28,7 +35,11 @@ export function PastTreatmentsPanel({ items, loading }: PastTreatmentsPanelProps
         {items.map((t) => (
           <article
             key={t.id}
-            className="border border-border/70 rounded-[var(--radius-md)] p-3 bg-background-secondary/40"
+            className={`border rounded-[var(--radius-md)] p-3 ${
+              selectedTreatmentId === t.id
+                ? 'border-primary/70 bg-primary-soft/35'
+                : 'border-border/70 bg-background-secondary/40'
+            }`}
           >
             <div className="flex items-start justify-between gap-2">
               <p className="text-sm font-medium text-text-primary">{t.title}</p>
@@ -43,6 +54,8 @@ export function PastTreatmentsPanel({ items, loading }: PastTreatmentsPanelProps
                 {t.records.map((r) => (
                   <li key={r.id}>
                     <span className="text-text-primary font-medium">Record: </span>
+                    <span className="capitalize">{r.treatmentType}</span>
+                    {' | '}
                     {r.teeth.length > 0 ? `Teeth ${[...r.teeth].sort().join(', ')}` : 'No teeth tagged'}
                     {r.notes ? ` — ${r.notes}` : ''}
                   </li>
@@ -50,6 +63,18 @@ export function PastTreatmentsPanel({ items, loading }: PastTreatmentsPanelProps
               </ul>
             )}
 
+            {onSelectTreatment && (
+              <div className="mt-3 pt-2 border-t border-border/50 flex justify-end">
+                <button
+                  type="button"
+                  onClick={() => onSelectTreatment(t)}
+                  className="text-xs text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary/35 rounded-[var(--radius-sm)] px-1"
+                >
+                  Review details
+                </button>
+              </div>
+            )}
+
             {t.documents.length > 0 && (
               <div className="mt-3 pt-2 border-t border-border/50">
                 <p className="text-[11px] uppercase tracking-wide text-text-muted mb-1.5">Attachments</p>