feat(frontend): DiagnosesList with qualifier + code formatting

2026-06-20 11:34:00 -06:00
parent 7f389fe04b
commit 042597217f
2 changed files with 266 additions and 0 deletions
@@ -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>
+  );
+}