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

frontend/src/pages/DataQuality.tsx

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { api } from "../api/client";
 import type { DataQualityIssue } from "../api/types";
 import { SeverityBadge, StatusBadge } from "../components/Badge";
+import { EmptyState, ErrorState, LoadingState, PageHeader } from "../components/PageChrome";
 
 const RULE_TYPES = [
   "possible_duplicate_customer",
@@ -19,6 +20,8 @@ export function DataQuality() {
   const [ruleType, setRuleType] = useState("");
 
   useEffect(() => {
+    setIssues(null);
+    setError(null);
     const params = new URLSearchParams();
     if (status) params.set("status", status);
     if (ruleType) params.set("rule_type", ruleType);
@@ -30,7 +33,7 @@ export function DataQuality() {
 
   return (
     <div className="page">
-      <h1>Data Quality</h1>
+      <PageHeader eyebrow="Assurance / Workbench" title="Data quality" description="Resolve evidence-backed exceptions before they disrupt operations." />
 
       <form className="filters" aria-label="Filter data-quality issues">
         <label>
@@ -56,12 +59,12 @@ export function DataQuality() {
         </label>
       </form>
 
-      {error && <p className="error" role="alert">{error}</p>}
-      {!error && !issues && <p>Loading issues…</p>}
-      {issues && issues.length === 0 && <p>No issues match these filters.</p>}
+      {error && <ErrorState message={error} />}
+      {!error && !issues && <LoadingState label="Loading quality workbench…" />}
+      {issues && issues.length === 0 && <EmptyState icon="check" title="Queue is clear" detail="No issues match the current filters." />}
 
       {issues && issues.length > 0 && (
-        <table className="data-table">
+        <div className="table-shell"><div className="table-meta"><span>{issues.length} issues</span><span>Evidence-backed detection</span></div><table className="data-table">
           <caption className="visually-hidden">Data-quality issues</caption>
           <thead>
             <tr>
@@ -75,21 +78,21 @@ export function DataQuality() {
           <tbody>
             {issues.map((i) => (
               <tr key={i.public_ref}>
-                <th scope="row">
+                <th scope="row" data-label="Reference">
                   <Link to={`/data-quality/${i.public_ref}`}>{i.public_ref}</Link>
                 </th>
-                <td>{i.rule_type.replace(/_/g, " ")}</td>
-                <td>{i.entity_ref}</td>
-                <td>
+                <td data-label="Rule">{i.rule_type.replace(/_/g, " ")}</td>
+                <td data-label="Entity">{i.entity_ref}</td>
+                <td data-label="Severity">
                   <SeverityBadge severity={i.severity} />
                 </td>
-                <td>
+                <td data-label="Status">
                   <StatusBadge status={i.status} />
                 </td>
               </tr>
             ))}
           </tbody>
-        </table>
+        </table></div>
       )}
     </div>
   );