feat(ui): redesign return and data-quality experiences

frontend/src/pages/DataQualityIssueDetail.tsx

@@ -4,6 +4,8 @@ import { api, ApiError } from "../api/client";
 import type { DataQualityIssueDetail as IssueDetail, EntitySnapshot } from "../api/types";
 import { SeverityBadge, StatusBadge } from "../components/Badge";
 import { useAuth } from "../context/AuthContext";
+import { Icon } from "../components/Icons";
+import { ErrorState, LoadingState, PageHeader, SectionHeading } from "../components/PageChrome";
 
 const MERGE_FIELDS = ["first_name", "last_name", "email", "phone", "postal_code", "city"];
 
@@ -60,7 +62,7 @@ function DuplicateCustomerPanel({ issue, onResolved }: { issue: IssueDetail; onR
 
   return (
     <section className="panel duplicate-compare" aria-labelledby="compare-heading">
-      <h2 id="compare-heading">Compare and merge</h2>
+      <SectionHeading title="Compare and merge" description="Choose the canonical customer and review each conflicting field." />
       {error && <p className="error" role="alert">{error}</p>}
 
       <fieldset>
@@ -100,8 +102,8 @@ function DuplicateCustomerPanel({ issue, onResolved }: { issue: IssueDetail; onR
             const differ = valueA !== valueB;
             return (
               <tr key={field}>
-                <th scope="row">{field.replace(/_/g, " ")}</th>
-                <td>
+                <th scope="row" data-label="Field">{field.replace(/_/g, " ")}{differ ? <span className="difference-mark">Differs</span> : <span className="match-mark">Match</span>}</th>
+                <td data-label={a.public_ref}>
                   {differ ? (
                     <label className="checkbox-label">
                       <input
@@ -116,7 +118,7 @@ function DuplicateCustomerPanel({ issue, onResolved }: { issue: IssueDetail; onR
                     valueA
                   )}
                 </td>
-                <td>
+                <td data-label={b.public_ref}>
                   {differ ? (
                     <label className="checkbox-label">
                       <input
@@ -137,7 +139,7 @@ function DuplicateCustomerPanel({ issue, onResolved }: { issue: IssueDetail; onR
         </tbody>
       </table>
 
-      <p>
+      <p className="merge-preview">
         <strong>{loser.public_ref}</strong> will become a tombstone linked to{" "}
         <strong>{survivor.public_ref}</strong>; its bookings will be rewired to the survivor.
       </p>
@@ -195,21 +197,18 @@ export function DataQualityIssueDetail() {
     }
   }
 
-  if (error) return <p className="error" role="alert">{error}</p>;
-  if (!issue) return <p>Loading issue…</p>;
+  if (error) return <ErrorState message={error} />;
+  if (!issue) return <LoadingState label="Loading issue evidence…" />;
 
   return (
     <div className="page">
-      <p><Link to="/data-quality">← Back to data quality</Link></p>
-      <h1>{issue.public_ref}</h1>
-      <p>
-        <SeverityBadge severity={issue.severity} /> <StatusBadge status={issue.status} />
-      </p>
-      <dl className="detail-grid">
+      <Link className="back-link" to="/data-quality"><Icon name="arrow-left" /> Quality workbench</Link>
+      <PageHeader eyebrow={`Quality / ${issue.rule_type.replace(/_/g, " ")}`} title={issue.public_ref} description="Review persisted evidence and record an audited resolution." actions={<div className="status-stack"><SeverityBadge severity={issue.severity} /><StatusBadge status={issue.status} /></div>} />
+      <section className="record-surface" aria-label="Issue summary"><dl className="detail-grid">
         <div><dt>Rule</dt><dd>{issue.rule_type.replace(/_/g, " ")}</dd></div>
         <div><dt>Entity</dt><dd>{issue.entity_ref}</dd></div>
         <div><dt>Evidence</dt><dd>{String(issue.evidence.summary ?? "")}</dd></div>
-      </dl>
+      </dl></section>
 
       {actionError && <p className="error" role="alert">{actionError}</p>}