feature: treatment frontend wired with the newly implemented backend. no mocked data no more.

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

@@ -0,0 +1,56 @@
+'use client';
+
+import { Button } from '@/components/ui/shared/Button';
+import type { PastTreatment } from '@/types/treatment';
+
+interface TreatmentPreviewCardProps {
+  draft: PastTreatment | null;
+  disabled?: boolean;
+  onPreview: () => void;
+}
+
+export function TreatmentPreviewCard({ draft, disabled, onPreview }: TreatmentPreviewCardProps) {
+  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">Treatment preview</h3>
+        <Button type="button" variant="primary" disabled={disabled || !draft} onClick={onPreview}>
+          Preview current draft
+        </Button>
+      </div>
+      {!draft ? (
+        <p className="text-sm text-text-muted">Select an appointment to preview its draft.</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">{draft.title}</p>
+            <span className="text-xs text-text-muted tabular-nums shrink-0 capitalize">{draft.status}</span>
+          </div>
+          <p className="text-xs text-text-secondary">
+            {draft.cases.length} case{draft.cases.length === 1 ? '' : 's'} ·{' '}
+            {draft.cases.reduce((n, c) => n + (c.attachmentMetas?.length ?? 0), 0)} attachment
+            {draft.cases.reduce((n, c) => n + (c.attachmentMetas?.length ?? 0), 0) === 1 ? '' : 's'}
+          </p>
+          <div className="space-y-2">
+            {draft.cases.slice(0, 2).map((c, idx) => (
+              <div
+                key={c.id}
+                className="rounded-[var(--radius-sm)] border border-border/60 px-2.5 py-2 text-xs text-text-secondary"
+              >
+                <span className="text-text-primary font-medium capitalize">
+                  Case {idx + 1}: {c.treatmentType}
+                </span>
+                {c.teeth.length > 0 && (
+                  <span className="ml-1 tabular-nums">· Teeth {[...c.teeth].sort().join(', ')}</span>
+                )}
+              </div>
+            ))}
+            {draft.cases.length > 2 && (
+              <p className="text-xs text-text-muted">+ {draft.cases.length - 2} more case(s)</p>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}