feat(frontend): DiagnosesList with qualifier + code formatting

src/components/ClaimDrawer/DiagnosesList.test.tsx

@@ -0,0 +1,188 @@
+// @vitest-environment happy-dom
+// Pure prop-driven component; match the act() convention used by the
+// other ClaimDrawer test files (ClaimDrawerHeader / ClaimDrawerSkeleton /
+// ClaimDrawerError / ValidationPanel / ServiceLinesTable).
+(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { describe, expect, it } from "vitest";
+import { DiagnosesList } from "./DiagnosesList";
+import type { ClaimDetailDiagnosis } from "@/types";
+
+function renderIntoContainer(element: React.ReactElement): {
+  container: HTMLDivElement;
+  unmount: () => void;
+} {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root: Root = createRoot(container);
+  act(() => {
+    root.render(element);
+  });
+  return {
+    container,
+    unmount: () => {
+      act(() => root.unmount());
+      container.remove();
+    },
+  };
+}
+
+function makeDiagnosis(
+  overrides: Partial<ClaimDetailDiagnosis> = {}
+): ClaimDetailDiagnosis {
+  return {
+    code: "E11.9",
+    qualifier: "ABK",
+    ...overrides,
+  };
+}
+
+describe("DiagnosesList", () => {
+  it("test_section_label_includes_count", () => {
+    const diagnoses = [
+      makeDiagnosis({ code: "E11.9" }),
+      makeDiagnosis({ code: "I10", qualifier: null }),
+      makeDiagnosis({ code: "M54.5", qualifier: null }),
+    ];
+
+    const { container, unmount } = renderIntoContainer(
+      <DiagnosesList diagnoses={diagnoses} />
+    );
+
+    const label = container.querySelector('[data-testid="section-label"]');
+    expect(label).not.toBeNull();
+
+    // `uppercase` is applied via Tailwind CSS, so textContent gives the
+    // source-case string "Diagnoses"; assert case-insensitively and
+    // confirm the visual transform via the className sniff below.
+    const text = (label?.textContent ?? "").toLowerCase();
+    expect(text).toContain("diagnoses");
+    expect(text).toContain("(3)");
+
+    // Eyebrow style (uppercase + tracking) — sniff the className.
+    const cls = label?.className ?? "";
+    expect(cls).toContain("uppercase");
+    expect(cls).toContain("tracking-[0.18em]");
+
+    unmount();
+  });
+
+  it("test_empty_state_renders_when_no_diagnoses", () => {
+    const { container, unmount } = renderIntoContainer(
+      <DiagnosesList diagnoses={[]} />
+    );
+
+    const empty = container.querySelector('[data-testid="diagnoses-empty"]');
+    expect(empty).not.toBeNull();
+    expect(empty?.textContent ?? "").toContain("No diagnoses");
+
+    // No list rendered in the empty state.
+    expect(container.querySelector('[data-testid="diagnoses-list"]')).toBeNull();
+    expect(
+      container.querySelectorAll('[data-testid="diagnosis-item"]').length
+    ).toBe(0);
+
+    // Section label still present, but with count "(0)".
+    const label = container.querySelector('[data-testid="section-label"]');
+    expect(label?.textContent ?? "").toContain("(0)");
+
+    unmount();
+  });
+
+  it("test_single_diagnosis_renders_code", () => {
+    const { container, unmount } = renderIntoContainer(
+      <DiagnosesList
+        diagnoses={[makeDiagnosis({ code: "E11.9", qualifier: null })]}
+      />
+    );
+
+    const items = container.querySelectorAll('[data-testid="diagnosis-item"]');
+    expect(items.length).toBe(1);
+    expect(items[0].textContent ?? "").toContain("E11.9");
+
+    unmount();
+  });
+
+  it("test_qualifier_shown_when_present", () => {
+    const { container, unmount } = renderIntoContainer(
+      <DiagnosesList
+        diagnoses={[makeDiagnosis({ code: "E11.9", qualifier: "ABK" })]}
+      />
+    );
+
+    const item = container.querySelector('[data-testid="diagnosis-item"]');
+    expect(item).not.toBeNull();
+
+    const text = item?.textContent ?? "";
+    // Both the qualifier and the code should appear together.
+    expect(text).toContain("ABK");
+    expect(text).toContain("E11.9");
+
+    unmount();
+  });
+
+  it("test_qualifier_absent_does_not_render_garbage", () => {
+    const { container, unmount } = renderIntoContainer(
+      <DiagnosesList
+        diagnoses={[makeDiagnosis({ code: "E11.9", qualifier: null })]}
+      />
+    );
+
+    const item = container.querySelector('[data-testid="diagnosis-item"]');
+    expect(item).not.toBeNull();
+
+    const text = (item?.textContent ?? "").toLowerCase();
+    // No stringified null/undefined.
+    expect(text).not.toContain("undefined");
+    expect(text).not.toContain("null");
+    // No stray separator that would imply a missing qualifier slot.
+    expect(text).not.toContain("·");
+
+    unmount();
+  });
+
+  it("test_description_from_inline_dict_when_available", () => {
+    const { container, unmount } = renderIntoContainer(
+      <DiagnosesList
+        diagnoses={[makeDiagnosis({ code: "E11.9", qualifier: null })]}
+      />
+    );
+
+    const item = container.querySelector('[data-testid="diagnosis-item"]');
+    expect(item).not.toBeNull();
+
+    const text = item?.textContent ?? "";
+    // E11.9 is in the inline ICD-10 dict: "Type 2 diabetes mellitus
+    // without complications". Assert a stable substring.
+    expect(text.toLowerCase()).toContain("type 2 diabetes");
+
+    unmount();
+  });
+
+  it("test_description_absent_for_unknown_code", () => {
+    // A clearly-fake code that's not in the inline dict.
+    const { container, unmount } = renderIntoContainer(
+      <DiagnosesList
+        diagnoses={[
+          makeDiagnosis({ code: "ZZZ.99", qualifier: null }),
+        ]}
+      />
+    );
+
+    const item = container.querySelector('[data-testid="diagnosis-item"]');
+    expect(item).not.toBeNull();
+
+    const text = (item?.textContent ?? "").trim();
+    // Only the code should appear — no description placeholder, no
+    // separator dangling after the code.
+    expect(text).toContain("ZZZ.99");
+    // Should not contain any of the known dict descriptions.
+    expect(text.toLowerCase()).not.toContain("diabetes");
+    expect(text.toLowerCase()).not.toContain("hypertension");
+    expect(text.toLowerCase()).not.toContain("asthma");
+
+    unmount();
+  });
+});

src/components/ClaimDrawer/DiagnosesList.tsx

@@ -0,0 +1,78 @@
+import type { ClaimDetail } from "@/types";
+
+type DiagnosesListProps = {
+  diagnoses: ClaimDetail["diagnoses"];
+};
+
+// Minimal ICD-10 description lookup. Covers the most common codes
+// likely to appear in the test fixtures; the full ICD-10 catalog is
+// ~95k entries and out of scope. Codes not in this map render without
+// a description (the code + qualifier still display).
+const ICD10_DESCRIPTION: Record<string, string> = {
+  "E11.9": "Type 2 diabetes mellitus without complications",
+  "E11.65": "Type 2 diabetes mellitus with hyperglycemia",
+  "I10": "Essential (primary) hypertension",
+  "J45.909": "Unspecified asthma, uncomplicated",
+  "M54.5": "Low back pain",
+  "R51": "Headache",
+  "Z00.00": "General adult medical examination",
+};
+
+function describe(code: string): string | null {
+  return ICD10_DESCRIPTION[code] ?? null;
+}
+
+/**
+ * Diagnoses list for the claim detail drawer (SP4).
+ *
+ * Inline list of mono codes + (when present) qualifier + (when the
+ * code is in our small ICD-10 dictionary) a short human description.
+ * The dictionary is intentionally tiny — the drawer's purpose is to
+ * show what the claim says, not to be an ICD-10 reference.
+ */
+export function DiagnosesList({ diagnoses }: DiagnosesListProps) {
+  return (
+    <section className="flex flex-col gap-3 px-6 py-4">
+      <h3
+        data-testid="section-label"
+        className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)]"
+      >
+        Diagnoses ({diagnoses.length})
+      </h3>
+
+      {diagnoses.length === 0 ? (
+        <p
+          data-testid="diagnoses-empty"
+          className="text-sm text-[color:var(--m-ink-tertiary)]"
+        >
+          No diagnoses
+        </p>
+      ) : (
+        <ul className="flex flex-col gap-2" data-testid="diagnoses-list">
+          {diagnoses.map((d, i) => {
+            const desc = describe(d.code);
+            return (
+              <li
+                key={`${d.code}-${i}`}
+                data-testid="diagnosis-item"
+                className="flex items-baseline gap-2 text-sm"
+              >
+                <span
+                  className="font-mono text-[color:var(--m-ink-primary)]"
+                  style={{ fontFamily: "var(--m-font-mono)" }}
+                >
+                  {d.qualifier ? `${d.qualifier} ${d.code}` : d.code}
+                </span>
+                {desc ? (
+                  <span className="text-[color:var(--m-ink-secondary)]">
+                    {desc}
+                  </span>
+                ) : null}
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </section>
+  );
+}