feature: a minor refactor in folder structure done.

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

@@ -0,0 +1,77 @@
+'use client';
+
+import { FileText } from 'lucide-react';
+import type { PastTreatment } from '@/types/treatment';
+
+interface PastTreatmentsPanelProps {
+  items: PastTreatment[];
+  loading?: boolean;
+}
+
+export function PastTreatmentsPanel({ items, loading }: PastTreatmentsPanelProps) {
+  return (
+    <div className="surface-card p-4 space-y-3">
+      <div>
+        <h3 className="text-sm font-semibold text-text-primary">Previous treatments</h3>
+        <p className="text-xs text-text-muted mt-0.5">
+          Document preview is not implemented yet; file names are listed for context.
+        </p>
+      </div>
+
+      {loading && <p className="text-sm text-text-muted">Loading history...</p>}
+
+      {!loading && items.length === 0 && (
+        <p className="text-sm text-text-muted">No prior treatments for this patient.</p>
+      )}
+
+      <div className="space-y-3 max-h-[min(420px,55vh)] overflow-y-auto pr-1">
+        {items.map((t) => (
+          <article
+            key={t.id}
+            className="border border-border/70 rounded-[var(--radius-md)] p-3 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>
+              <time className="text-xs text-text-muted tabular-nums shrink-0" dateTime={t.treatmentAt}>
+                {new Date(t.treatmentAt).toLocaleDateString()}
+              </time>
+            </div>
+            <p className="text-xs text-text-secondary mt-1">Status: {t.status}</p>
+
+            {t.records.length > 0 && (
+              <ul className="mt-2 space-y-1.5 text-xs text-text-secondary">
+                {t.records.map((r) => (
+                  <li key={r.id}>
+                    <span className="text-text-primary font-medium">Record: </span>
+                    {r.teeth.length > 0 ? `Teeth ${[...r.teeth].sort().join(', ')}` : 'No teeth tagged'}
+                    {r.notes ? ` — ${r.notes}` : ''}
+                  </li>
+                ))}
+              </ul>
+            )}
+
+            {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>
+                <ul className="space-y-1">
+                  {t.documents.map((doc) => (
+                    <li
+                      key={doc.id}
+                      className="flex items-center gap-2 text-xs text-text-secondary"
+                    >
+                      <FileText className="w-3.5 h-3.5 shrink-0 icon-flat" aria-hidden />
+                      <span className="truncate">{doc.fileName}</span>
+                      <span className="text-text-muted tabular-nums shrink-0">
+                        {(doc.sizeBytes / 1024).toFixed(1)} KB
+                      </span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            )}
+          </article>
+        ))}
+      </div>
+    </div>
+  );
+}