attribution diagnostic — separating the data-quality view from the dashboard

the profit-aware dashboard mockup ended up trying to do two things at once — show campaign performance, and also flag when meta's numbers disagreed with shopify and ga4. the disagreement flags kept eating room on the cards. so i pulled all of that into a second page.

attribution is a diagnostic page, not a second dashboard. seven sections, top to bottom: source health → coverage → side-by-side numbers → per-campaign match quality → unmatched orders → tracking setup → a slide-out drawer to fix one campaign at a time. the dashboard tells you what to do with the money. attribution tells you whether to believe the numbers behind that decision.

three things i kept getting wrong and had to redo:

first round, the styling drifted from the rest of the app — rounded-sm buttons, the wrong pill shape. checked the actual react pages and the existing creative page uses rounded-[6px] cards with rounded-full pills, so the mockup got pulled onto that grid instead of made-up radii.

second round, sections 3, 5, 6, and 7 all wrapped to one character per line on mobile. i was fixing them one at a time until it was obvious the bug had to live one level above — a grid template column expression was clamping content. one css-class fix covered all four sections.

third round, the manual-mapping drawer let you pick "exact utm" as a confidence level, which is wrong — exact-utm is system-detected, not user-asserted. the drawer now only offers manual / estimated / unmatched, with a short helper line saying so.

the file is self-contained and reuses the theme-compact tokens from index.css, so the mockup reads as the same product, not a separate site. mobile responsive down to 480px: hamburger sidebar, single-column stacking, horizontal-scrolling tables, full-width drawer.

next: review with the human, then decide whether attribution becomes its own react page or stays a "things to fix" doc that the dashboard links to.