attribution diagnostic mockup - AdsMetri

What is the attribution diagnostic?
A separate page in AdsMetri that answers "do we trust the numbers on the dashboard?" — it shows where Shopify, GA4, and Meta agree and disagree, and which dollars are unattributed.

What it does
Seven stacked sections:
1. Source status — three cards (Shopify / GA4 / Meta) with last-sync time, errors, action.
2. Tracking coverage — % of spend on campaigns with an exact UTM match, gap to 95% target, bucket breakdown (Exact UTM / Manual / Estimated / Unmatched).
3. Source comparison — Shopify vs GA4 vs Meta side by side, with deltas vs Shopify as source of truth, plus the standing reconciliation rules.
4. Campaign match quality — every active campaign with its match method, confidence, freshness, and a quick action (View / Edit mapping / Review / Map).
5. Unmatched revenue — Shopify orders the system could not tie back to a Meta campaign, grouped by likely source, with "map" actions.
6. Tracking setup — pixel, CAPI, GA4 ecommerce, UTM template, post-purchase survey checks.
7. Manual mapping drawer — slide-out for fixing a single campaign: confidence selector (Manual / Estimated / Unmatched), notes, save.

How it works
Single self-contained HTML file. Reuses the theme-compact palette and primitives from the real React app (rounded-[6px] cards, rounded-full pills, theme-compact tokens from index.css) so the mockup reads as the same product. Source priority is fixed throughout — Shop is the green source of truth, GA4 amber-ish, Meta blue. Confidence states use the same four colors across all sections (green exact / indigo manual / amber estimated / red unmatched). Fully mobile-responsive — hamburger sidebar, single-column stacking, horizontal-scrolling tables, full-width drawer below 480px.

Built with
HTML · CSS · vanilla JS. Mirrors theme-compact tokens, button/pill/card chrome from the live AdsMetri React UI.