feat(frontend): ValidationPanel with rule-grouped errors + warnings

2026-06-20 11:21:54 -06:00
parent 702104c26d
commit 88da603c9b
2 changed files with 434 additions and 0 deletions
@@ -0,0 +1,187 @@
+import { AlertCircle, AlertTriangle, CheckCircle2 } from "lucide-react";
+import type { ClaimDetail } from "@/types";
+
+type ValidationPanelProps = {
+  validation: ClaimDetail["validation"];
+};
+
+type IssueList = ClaimDetail["validation"]["errors"];
+
+/**
+ * Group issues by their `rule` field, preserving insertion order so the
+ * backend's surface order is respected on screen. Returns an array of
+ * `[rule, issues]` pairs — Maps aren't a great fit for JSX iteration here.
+ */
+function groupByRule(issues: IssueList): Array<[string, IssueList]> {
+  const groups = new Map<string, IssueList>();
+  for (const issue of issues) {
+    const bucket = groups.get(issue.rule);
+    if (bucket) {
+      bucket.push(issue);
+    } else {
+      groups.set(issue.rule, [issue]);
+    }
+  }
+  return Array.from(groups.entries());
+}
+
+/**
+ * One rule-group block: header with rule code + count chip, followed by
+ * the list of messages underneath.
+ */
+function IssueGroup({
+  rule,
+  issues,
+  testId,
+}: {
+  rule: string;
+  issues: IssueList;
+  testId: string;
+}) {
+  const Icon = testId === "validation-errors" ? AlertCircle : AlertTriangle;
+  const iconColor =
+    testId === "validation-errors"
+      ? "text-[color:var(--m-error)]"
+      : "text-[color:var(--m-warning)]";
+
+  return (
+    <div className="flex flex-col gap-1.5">
+      <div className="flex items-center gap-2">
+        <span
+          className="font-mono text-[12px] font-semibold tracking-tight text-[color:var(--m-ink-primary)]"
+          style={{ fontFamily: "var(--m-font-mono)" }}
+        >
+          {rule}
+        </span>
+        <span
+          className="inline-flex items-center rounded-full bg-[color:var(--m-ink-tertiary)]/15 px-1.5 text-[10.5px] font-medium text-[color:var(--m-ink-secondary)] tabular-nums"
+          data-testid={`${testId}-count`}
+        >
+          ({issues.length})
+        </span>
+      </div>
+      <ul className="flex flex-col gap-1.5 pl-1">
+        {issues.map((issue, idx) => (
+          <li
+            key={`${rule}-${idx}`}
+            className="flex items-start gap-2 text-[13px] leading-snug text-[color:var(--m-ink-secondary)]"
+            data-testid={`${testId}-message`}
+          >
+            <Icon
+              className={`mt-0.5 h-3.5 w-3.5 shrink-0 ${iconColor}`}
+              strokeWidth={1.75}
+              aria-hidden
+            />
+            <span>{issue.message}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}
+
+/**
+ * Validation section of the claim detail drawer (SP4).
+ *
+ * Three states:
+ *  - passed && warnings.length === 0  → "All checks passed" pill
+ *  - errors and/or warnings present   → grouped sub-sections
+ *
+ * Issues are grouped by their `rule` field (e.g. R050_diagnosis_present)
+ * with a per-group count, so repeated violations of the same rule don't
+ * drown out other rules. Errors render before warnings so the user sees
+ * blocking issues first.
+ */
+export function ValidationPanel({ validation }: ValidationPanelProps) {
+  const allPassed = validation.passed && validation.warnings.length === 0;
+
+  if (allPassed) {
+    return (
+      <section
+        data-testid="validation-passed"
+        className="flex items-center gap-2 px-6 py-3"
+      >
+        <CheckCircle2
+          className="h-4 w-4 text-[color:var(--m-success)]"
+          strokeWidth={1.75}
+          aria-hidden
+        />
+        <span className="text-[13px] font-medium text-[color:var(--m-ink-primary)]">
+          All checks passed
+        </span>
+      </section>
+    );
+  }
+
+  const errorGroups = groupByRule(validation.errors);
+  const warningGroups = groupByRule(validation.warnings);
+
+  return (
+    <section
+      className="flex flex-col gap-3 px-6 py-4 bg-[color:var(--m-surface)]"
+      data-testid="validation-panel"
+    >
+      <span className="text-[10.5px] font-semibold uppercase tracking-[0.18em] text-[color:var(--m-ink-tertiary)]">
+        Validation
+      </span>
+
+      {validation.errors.length > 0 ? (
+        <div
+          data-testid="validation-errors"
+          data-rule-group="errors"
+          className="flex flex-col gap-2 border-l-2 border-[color:var(--m-error)] bg-[color:var(--m-error-bg)] px-3 py-2.5"
+        >
+          <div className="flex items-center gap-2">
+            <AlertCircle
+              className="h-3.5 w-3.5 text-[color:var(--m-error)]"
+              strokeWidth={1.75}
+              aria-hidden
+            />
+            <span className="text-[10.5px] font-semibold uppercase tracking-[0.14em] text-[color:var(--m-error)]">
+              Errors ({validation.errors.length})
+            </span>
+          </div>
+          <div className="flex flex-col gap-3">
+            {errorGroups.map(([rule, issues]) => (
+              <IssueGroup
+                key={rule}
+                rule={rule}
+                issues={issues}
+                testId="validation-errors"
+              />
+            ))}
+          </div>
+        </div>
+      ) : null}
+
+      {validation.warnings.length > 0 ? (
+        <div
+          data-testid="validation-warnings"
+          data-rule-group="warnings"
+          className="flex flex-col gap-2 border-l-2 border-[color:var(--m-warning)] bg-[color:var(--m-warning-bg)] px-3 py-2.5"
+        >
+          <div className="flex items-center gap-2">
+            <AlertTriangle
+              className="h-3.5 w-3.5 text-[color:var(--m-warning)]"
+              strokeWidth={1.75}
+              aria-hidden
+            />
+            <span className="text-[10.5px] font-semibold uppercase tracking-[0.14em] text-[color:var(--m-warning)]">
+              Warnings ({validation.warnings.length})
+            </span>
+          </div>
+          <div className="flex flex-col gap-3">
+            {warningGroups.map(([rule, issues]) => (
+              <IssueGroup
+                key={rule}
+                rule={rule}
+                issues={issues}
+                testId="validation-warnings"
+              />
+            ))}
+          </div>
+        </div>
+      ) : null}
+    </section>
+  );
+}