M3: implement Data Quality Workbench
Five rule scanners (duplicate customers, missing fields, odometer regression, booking overlap, status conflict) run automatically after seed and via an explicit scan endpoint. Issue defer/reject/merge-customers endpoints with transactional customer merge (booking rewiring, tombstone, audit). Data Quality nav + workbench UI with two-column duplicate comparison and inline (non-native) confirm. Dashboard attention items now link to issues. 35 backend tests passing, ruff clean. Fixed a real false-positive bug in odometer-regression detection found through iteration on seed data, and two TS narrowing errors. Verified end-to-end via browser: S2 merge and S4 overlap scenarios.
This commit is contained in:
NuklearRabbit
@@ -0,0 +1,242 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { Link, useParams } from "react-router-dom";
|
||||
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";
|
||||
|
||||
const MERGE_FIELDS = ["first_name", "last_name", "email", "phone", "postal_code", "city"];
|
||||
|
||||
function DuplicateCustomerPanel({ issue, onResolved }: { issue: IssueDetail; onResolved: () => void }) {
|
||||
const { user } = useAuth();
|
||||
const [survivorRef, setSurvivorRef] = useState(issue.entity_snapshot?.public_ref ?? "");
|
||||
const [fieldChoices, setFieldChoices] = useState<Record<string, "a" | "b">>({});
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [confirming, setConfirming] = useState(false);
|
||||
|
||||
if (!issue.entity_snapshot || !issue.related_snapshots[0]) {
|
||||
return <p className="error">Both customers in this comparison could not be loaded.</p>;
|
||||
}
|
||||
const a: EntitySnapshot = issue.entity_snapshot;
|
||||
const b: EntitySnapshot = issue.related_snapshots[0];
|
||||
|
||||
const survivor = survivorRef === a.public_ref ? a : b;
|
||||
const loser = survivorRef === a.public_ref ? b : a;
|
||||
|
||||
async function handleMerge() {
|
||||
setError(null);
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const overrides: Record<string, string> = {};
|
||||
for (const field of MERGE_FIELDS) {
|
||||
const choice = fieldChoices[field];
|
||||
const chosenSide = choice === "a" ? a : choice === "b" ? b : survivor;
|
||||
if (chosenSide !== survivor && chosenSide[field]) {
|
||||
overrides[field] = String(chosenSide[field]);
|
||||
}
|
||||
}
|
||||
await api.post(`/api/v1/data-quality/issues/${issue.public_ref}/merge-customers`, {
|
||||
survivor_ref: survivor.public_ref,
|
||||
field_overrides: Object.keys(overrides).length > 0 ? overrides : undefined,
|
||||
});
|
||||
onResolved();
|
||||
} catch (err) {
|
||||
setError(err instanceof ApiError ? err.message : "Could not merge these customers.");
|
||||
setConfirming(false);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (user?.role !== "operations_manager") {
|
||||
return (
|
||||
<p className="panel">
|
||||
Merging duplicate customers requires the Operations Manager role. Switch role to resolve
|
||||
this issue.
|
||||
</p>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<section className="panel duplicate-compare" aria-labelledby="compare-heading">
|
||||
<h2 id="compare-heading">Compare and merge</h2>
|
||||
{error && <p className="error" role="alert">{error}</p>}
|
||||
|
||||
<fieldset>
|
||||
<legend>Keep as survivor</legend>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="radio"
|
||||
name="survivor"
|
||||
checked={survivorRef === a.public_ref}
|
||||
onChange={() => setSurvivorRef(a.public_ref)}
|
||||
/>
|
||||
{a.public_ref}
|
||||
</label>
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="radio"
|
||||
name="survivor"
|
||||
checked={survivorRef === b.public_ref}
|
||||
onChange={() => setSurvivorRef(b.public_ref)}
|
||||
/>
|
||||
{b.public_ref}
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<table className="data-table compare-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">Field</th>
|
||||
<th scope="col">{a.public_ref}</th>
|
||||
<th scope="col">{b.public_ref}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{MERGE_FIELDS.map((field) => {
|
||||
const valueA = a[field] ? String(a[field]) : "—";
|
||||
const valueB = b[field] ? String(b[field]) : "—";
|
||||
const differ = valueA !== valueB;
|
||||
return (
|
||||
<tr key={field}>
|
||||
<th scope="row">{field.replace(/_/g, " ")}</th>
|
||||
<td>
|
||||
{differ ? (
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="radio"
|
||||
name={`field-${field}`}
|
||||
checked={(fieldChoices[field] ?? "a") === "a"}
|
||||
onChange={() => setFieldChoices((c) => ({ ...c, [field]: "a" }))}
|
||||
/>
|
||||
{valueA}
|
||||
</label>
|
||||
) : (
|
||||
valueA
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{differ ? (
|
||||
<label className="checkbox-label">
|
||||
<input
|
||||
type="radio"
|
||||
name={`field-${field}`}
|
||||
checked={fieldChoices[field] === "b"}
|
||||
onChange={() => setFieldChoices((c) => ({ ...c, [field]: "b" }))}
|
||||
/>
|
||||
{valueB}
|
||||
</label>
|
||||
) : (
|
||||
valueB
|
||||
)}
|
||||
</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p>
|
||||
<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>
|
||||
|
||||
{!confirming && (
|
||||
<button type="button" onClick={() => setConfirming(true)}>
|
||||
Merge into {survivor.public_ref}
|
||||
</button>
|
||||
)}
|
||||
{confirming && (
|
||||
<div className="confirm-bar" role="alertdialog" aria-label="Confirm merge">
|
||||
<p>
|
||||
Merge {loser.public_ref} into {survivor.public_ref}? This cannot be undone.
|
||||
</p>
|
||||
<button type="button" onClick={handleMerge} disabled={submitting}>
|
||||
{submitting ? "Merging…" : "Yes, merge"}
|
||||
</button>
|
||||
<button type="button" onClick={() => setConfirming(false)} disabled={submitting}>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
|
||||
export function DataQualityIssueDetail() {
|
||||
const { publicRef } = useParams<{ publicRef: string }>();
|
||||
const [issue, setIssue] = useState<IssueDetail | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [actionError, setActionError] = useState<string | null>(null);
|
||||
|
||||
const load = useCallback(() => {
|
||||
if (!publicRef) return;
|
||||
api
|
||||
.get<IssueDetail>(`/api/v1/data-quality/issues/${publicRef}`)
|
||||
.then(setIssue)
|
||||
.catch(() => setError("This issue could not be found."));
|
||||
}, [publicRef]);
|
||||
|
||||
useEffect(() => {
|
||||
setIssue(null);
|
||||
setError(null);
|
||||
load();
|
||||
}, [load]);
|
||||
|
||||
async function handleAction(action: "defer" | "reject") {
|
||||
if (!issue) return;
|
||||
setActionError(null);
|
||||
try {
|
||||
await api.post(`/api/v1/data-quality/issues/${issue.public_ref}/${action}`);
|
||||
load();
|
||||
} catch (err) {
|
||||
setActionError(err instanceof ApiError ? err.message : `Could not ${action} this issue.`);
|
||||
}
|
||||
}
|
||||
|
||||
if (error) return <p className="error" role="alert">{error}</p>;
|
||||
if (!issue) return <p>Loading issue…</p>;
|
||||
|
||||
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">
|
||||
<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>
|
||||
|
||||
{actionError && <p className="error" role="alert">{actionError}</p>}
|
||||
|
||||
{issue.status === "open" && issue.rule_type === "possible_duplicate_customer" && (
|
||||
<DuplicateCustomerPanel issue={issue} onResolved={load} />
|
||||
)}
|
||||
|
||||
{issue.status === "open" && (
|
||||
<section className="panel" aria-labelledby="resolution-heading">
|
||||
<h2 id="resolution-heading">Resolution</h2>
|
||||
{issue.rule_type !== "possible_duplicate_customer" && (
|
||||
<>
|
||||
<p>Evidence for this issue:</p>
|
||||
<pre className="evidence-block">{JSON.stringify(issue.evidence, null, 2)}</pre>
|
||||
</>
|
||||
)}
|
||||
<p>Defer to review later, or reject if this is not a real issue.</p>
|
||||
<div className="resolution-actions">
|
||||
<button type="button" onClick={() => handleAction("defer")}>
|
||||
Defer
|
||||
</button>
|
||||
<button type="button" onClick={() => handleAction("reject")}>
|
||||
Reject
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user