From 25099a57b662ed2034c4e4b60d87f485bb0019ad Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 25 Sep 2026 08:18:06 +0200
Subject: [PATCH] fix(checkups): lead a procedure card with what was done

In the procedure history every row carried the kind as its heading and
again as its badge. A procedure now leads with its reason, and the
practice moves to its own line beneath the body site.

Refs #1025
---
 .../__tests__/procedures-section.test.tsx     | 27 +++++++++++++++++++
 src/components/encounters/visit-card.tsx      | 24 ++++++++++++++---
 2 files changed, 47 insertions(+), 4 deletions(-)

diff --git a/src/components/encounters/__tests__/procedures-section.test.tsx b/src/components/encounters/__tests__/procedures-section.test.tsx
index c9e0dc4b5..a7c72b611 100644
--- a/src/components/encounters/__tests__/procedures-section.test.tsx
+++ b/src/components/encounters/__tests__/procedures-section.test.tsx
@@ -142,6 +142,33 @@ describe("<ProceduresSection>", () => {
     expect(html).toContain("2 of 2");
   });
 
+  it("heads a procedure with what was done, and keeps the practice on its own line", () => {
+    const html = render({
+      procedures: [
+        procedure({
+          id: "p1",
+          reason: "Meniscus repair",
+          practitioner: {
+            id: "pr1",
+            name: "Sample clinic",
+            specialty: null,
+            practice: null,
+            location: null,
+            phone: null,
+            note: null,
+            createdAt: "2011-01-01T00:00:00.000Z",
+            updatedAt: "2011-01-01T00:00:00.000Z",
+          },
+        }),
+      ],
+      bodySites: [],
+      total: 1,
+    });
+    expect(html).toMatch(/font-medium">Meniscus repair</);
+    expect(html).toContain("Sample clinic");
+    expect(html.match(/Meniscus repair/g)).toHaveLength(1);
+  });
+
   it("offers every body site as a filter, with All pressed while nothing is filtered", () => {
     const html = render({
       procedures: [
diff --git a/src/components/encounters/visit-card.tsx b/src/components/encounters/visit-card.tsx
index 80a553c42..2377256e9 100644
--- a/src/components/encounters/visit-card.tsx
+++ b/src/components/encounters/visit-card.tsx
@@ -71,9 +71,21 @@ export function VisitCard({
 
   // The practice, or the kind when there is none. A visit with neither is not
   // nameless — the kind always resolves, because it defaults to one.
+  //
+  // A procedure leads with what was done instead: in a surgical history the
+  // operation is the thing being scanned for, and a column of rows headed
+  // "Procedure or surgery" beside a badge saying the same would say nothing.
+  // The practice then moves to its own line, still foreground.
+  const isProcedure = encounter.kind === "PROCEDURE";
+  const procedureHeading = isProcedure ? encounter.reason : null;
   const heading =
+    procedureHeading ??
     encounter.practitioner?.name ??
     encounterKindText(t, encounter.kind as EncounterKind);
+  const reasonLine = procedureHeading ? null : encounter.reason;
+  const practiceLine = procedureHeading
+    ? (encounter.practitioner?.name ?? null)
+    : null;
   // Where on the body, with the side — what the person wrote, so foreground.
   const site = bodySiteText(t, encounter.bodySite, encounter.laterality);
 
@@ -103,10 +115,8 @@ export function VisitCard({
             </Badge>
           </div>
 
-          {encounter.reason ? (
-            <p className="text-foreground line-clamp-1 text-sm">
-              {encounter.reason}
-            </p>
+          {reasonLine ? (
+            <p className="text-foreground line-clamp-1 text-sm">{reasonLine}</p>
           ) : null}
 
           {site ? (
@@ -118,6 +128,12 @@ export function VisitCard({
             </p>
           ) : null}
 
+          {practiceLine ? (
+            <p className="text-foreground line-clamp-1 text-sm">
+              {practiceLine}
+            </p>
+          ) : null}
+
           {isNoteworthy(encounter.status as EncounterStatus) ||
           counts.length ? (
             <div className="flex flex-wrap items-center gap-3">