// ============================================================================ // Document fragments — the "mess in" half of the visual. // // Each fragment is a slice of an actual BorderLens product screen, recreated // in CSS so it scales crisply at any size. All data is fictional: // merchant Northbank Ltd // EORI GB744920183000 // order numbers fresh #10xxx range, never the original IDs // AWB / MRN fresh, same character shape // £ amounts same digit-count as originals // // Five fragments, mapped to the five uploaded screens: // ExecutiveSummary — KPI tiles + sidebar // OrderExplorer — order rows with expanded carrier-charge panel // Returns — returns table with expanded inbound/outbound charges // ClaimPack — light-canvas modal listing TCA reclaims // DestinationMarkets— light-canvas grid of country cards // ============================================================================ // ── Common chrome ─────────────────────────────────────────────────────────── function WindowChrome({ active, width }) { return (
localhost:5173
{active}
); } // Small reusable sidebar (compact) for fragments that need it function MiniSidebar({ active }) { const items = [ 'Executive Summary', 'Order Explorer', 'Suppliers', 'Duty & Tax', 'Carrier & Rate Card', 'Uploads', 'Returns', 'Findings', ]; return (
BORDERLENS
Northbank
Historical · validated
{items.map((label) => { const isActive = label === active; return (
{label}
); })}
); } // ── 1. Executive Summary fragment ─────────────────────────────────────────── // KPI tiles top-row (Customs Findings, Data Quality) + Operation Overview tile. function ExecutiveSummary() { return (
{/* Customs Findings card */}
Customs Findings
17 high confidence
94 total open — TCA, RGR, classification, valuation
Review findings →
{/* Operation overview (truncated) */}
Operation Overview — 90 days
{[ ['Customer orders', '843', 'CDS declared'], ['Customer returns','62', 'Unmatched'], ['Stock inbound', '418', 'Unmatched'], ['Trade outbound', '291', 'Unmatched'], ].map(([k, n, tag]) => ( ))}
{k} {n} {tag}
Overdue (>21d, no invoice) 2 ⚠
); } // ── 2. Order Explorer fragment ────────────────────────────────────────────── // Order rows + expanded carrier-charge panel — the most data-dense view. function OrderExplorer() { const rows = [ { id: '#13472', date: '03/05/26', dest: 'US·CT', val: '£1,318', est: '£94', inv: '£94', v: '−£1', vc: 'pos', margin: '74.2%' }, { id: '#13468', date: '02/05/26', dest: 'AU', val: '£1,047', est: '£244', inv: '£202', v: '−£42', vc: 'pos', margin: '65.8%' }, { id: '#13463', date: '02/05/26', dest: 'US·CA', val: '£687', est: '£57', inv: '£57', v: '+£0', vc: 'risk', margin: '70.3%' }, { id: '#13458', date: '02/05/26', dest: 'US·AL', val: '£1,604', est: '—', inv: '—', v: '—', vc: 'pos', margin: '78.4%', pending: true }, { id: '#13451', date: '01/05/26', dest: 'US·NJ', val: '£742', est: '£62', inv: '£62', v: '+£0', vc: 'risk', margin: '69.7%' }, { id: '#13444', date: '30/04/26', dest: 'US·PA', val: '£2,418', est: '£169', inv: '£190', v: '+£21', vc: 'risk', margin: '72.4%' }, { id: '#13438', date: '29/04/26', dest: 'US·CA', val: '£1,074', est: '£93', inv: '£93', v: '−£0', vc: 'pos', margin: '72.8%' }, { id: '#13433', date: '29/04/26', dest: 'US·NY', val: '£3,148', est: '£420', inv: '£618', v: '+£198', vc: 'risk', margin: '70.1%', risk: true }, { id: '#13427', date: '28/04/26', dest: 'US·MA', val: '£546', est: '£36', inv: '—', v: '—', vc: 'pos', margin: '72.6%' }, { id: '#13422', date: '28/04/26', dest: 'US·GA', val: '£2,461', est: '£166', inv: '£341', v: '+£175', vc: 'risk', margin: '73.0%', risk: true }, ]; const visible = rows.slice(0, 7); const expanded = rows[2]; // visually shows expansion under #13463 return (
{['Order','Date','Dest','Value','Est. D&T','Carrier','Δ','Margin'].map((h, i) => ( ))} {visible.map((r, i) => { const isExpanded = i === 2; return ( {isExpanded && ( )} ); })}
= 3 ? 'right' : 'left', fontSize: 7.5, fontWeight: 600, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.08em', borderBottom: '1px solid #1e293b', }}>{h}
{r.id} {r.date} {r.dest} {r.val} {r.est} {r.inv} {r.v} {r.margin}
Carrier Invoice Charges
AWB: 4910827314 Direct Customs: £142 Reclassify
{[ ['Shipping', 'Standard shipping charge', '£18'], ['Customs Duty', 'Import Export Duties', '£57'], ['VAT', 'IMPORT EXPORT TAXES', '£85'], ['Surcharge', 'Fuel Surcharge', '£4'], ['Brokerage', 'Duty Tax Paid', '£8'], ].map((c) => ( ))}
{c[0]} {c[1]} {c[2]}
); } // ── 3. Returns fragment ───────────────────────────────────────────────────── function ReturnsFragment() { const rows = [ { id: '#13218', date: '12 Apr 26', country: 'IE', rev: '£1,742.40', ref: '£1,720.10', net: '−£618.20', customs: '31.1%', sunk: '£648.30', evidence: 'Actual · both legs', awb: '4810239185', status: 'Returned' }, { id: '#12844', date: '08 Mar 26', country: 'US', rev: '£1,082.55', ref: '£1,060.40', net: '−£198.40', customs: '13.4%', sunk: '£221.85', evidence: 'Actual · both legs', awb: '6210478921', status: 'Returned' }, { id: '#11612', date: '22 Feb 26', country: 'US', rev: '£884.20', ref: '£883.40', net: '−£202.10', customs: '15.2%', sunk: '£204.70', evidence: 'Actual · both legs', awb: '1948302174', status: 'Returned' }, { id: '#11501', date: '14 Feb 26', country: 'US', rev: '£2,488.10', ref: '£612.30', net: '+£1,820.40',customs: '0.0%', sunk: '£74.60', evidence: 'Partial · inbound', awb: '7401189264', status: 'Returned', partial: true }, ]; return (
Status {['All','Open','Returned','Closed','Needs matching'].map((t, i) => ( {t} ))} 62 returns
{['Order','Date','Revenue','Refunded','Net','Customs','Sunk','Evidence','Status'].map((h, i) => ( ))} {rows.map((r, i) => ( ))} {/* Expanded inbound/outbound for last row */}
= 2 && i <= 6 ? 'right' : 'left', fontSize: 7.5, fontWeight: 600, color: '#64748b', textTransform: 'uppercase', letterSpacing: '0.08em', borderBottom: '1px solid #1e293b', }}>{h}
{r.id}
{r.date}
{r.country}
 {r.rev} {r.ref} {r.net} {r.customs} {r.sunk}
{r.evidence}
{r.awb}
 {r.status}
Inbound Charges AWB 7401189264
{[ ['Shipping', 'Standard shipping charge', '£21.40'], ['Surcharge', 'Fuel Surcharge', '£6.85'], ['Surcharge', 'Emergency Situation', '£0.62'], ].map((c, j) => (
{c[0]} {c[1]} {c[2]}
))}
Inbound Summary
{[ ['Shipping','£21'], ['Duty','£0.00'], ['Surcharges','£7.47'], ['Billed weight','3.20 kg'], ].map((c, j) => (
{c[0]} {c[1]}
))}
); } // ── 4. Claim Pack — light canvas modal ────────────────────────────────────── function ClaimPack() { const claims = [ { name: 'MILANO TESSILE SRL', hs: '610910', mrn: '26GB471BCA8', date: '2024-09-12', value: '£1,184.00', duty: '£108.00', reclaim: '£108.00', deadline: '2027-09-12' }, { name: 'PIETRO SARTI LDA', hs: '620640', mrn: '26GBE2D518C', date: '2024-11-04', value: '£612.00', duty: '£56.00', reclaim: '£56.00', deadline: '2027-11-04' }, { name: 'NORMANDIE TEXTILE SAS',hs: '611780', mrn: '26GBE91FA37', date: '2025-01-22', value: '£927.00', duty: '£84.00', reclaim: '£84.00', deadline: '2028-01-22' }, ]; return (
Claim Pack
07 May 2026 · 3 claims · £248.00
Download CSV
Merchant
Northbank Ltd
EORI: GB744920183000
{claims.map((c, i) => (
{i + 1} {c.name} · HS {c.hs} · TCA
MRN{c.mrn} Declared value{c.value} Duty paid{c.duty} Reclaim amount {c.reclaim} Ready Deadline{c.deadline}
))}
); } // ── 5. Destination Markets — light canvas grid ────────────────────────────── function DestinationMarkets() { const cards = [ { code: 'US', name: 'United States', rev: '£382,750', pct: '0.4%', margin: '73.9%', sub1: ['Customs %', '11.3% actual / 12.0% duty rate'], ioss: true }, { code: 'DK', name: 'Denmark', rev: '£3,514', pct: '0.3%', margin: '69.0%', sub1: ['Customs %', '40.1% actual / 12.0% duty rate'], ioss: true }, { code: 'HK', name: 'Hong Kong', rev: '£8,348', pct: '0.8%', margin: '70.3%', sub1: ['Promo mix', '5.2% discount'], ioss: false }, { code: 'AT', name: 'Austria', rev: '£5,442', pct: '0.5%', margin: '69.1%', sub1: ['Customs %', '35.6% actual / 12.0% duty rate'], ioss: true }, ]; return (
HS Code Analysis Destination Markets
22 destinations · £998,142 total international revenue · all time
{cards.map((c) => (
{c.ioss && (
! IOSS
)}
{c.code}
{c.name}
Revenue {c.rev} ({c.pct}) True margin {c.margin} ● Live {c.sub1[0]} {c.sub1[1]}
))}
); } // Public component map — exported under the legacy names so hero.jsx keeps working. window.CarrierInvoice = OrderExplorer; // dense invoice → order explorer window.CdsDeclaration = ClaimPack; // CDS doc → claim pack (light) window.ShopifyExport = ReturnsFragment; // shopify CSV → returns window.Spreadsheet = ExecutiveSummary; // spreadsheet → exec summary window.EmailFragment = DestinationMarkets; // email pdf → destination markets // Also export under their real names window.ExecutiveSummary = ExecutiveSummary; window.OrderExplorer = OrderExplorer; window.ReturnsFragment = ReturnsFragment; window.ClaimPack = ClaimPack; window.DestinationMarkets = DestinationMarkets;