Build Prompts

Build a single-page HTML dashboard called "Churn Prediction Dashboard" for the the lab. DESIGN: - Light background (#f6f6f7), Bricolage Grotesque font - Topbar: dark (#1a1c1e) with coral accent (#e8594f) - Cards with white background, 1px #dfe3e8 border, 12px radius - Source badges per data field (Recharge = coral, Klaviyo = green, BigQuery = blue) DATA: Fetch from these local API endpoints: - GET /api/subscriptions?resource=subscribers (subscriber list with churn_risk, skipped_charges, payment_method, migration_needed) - GET /api/subscriptions?resource=metrics (MRR, total_subscribers, churn_risk_high, skip_rate) - GET /api/subscriptions?resource=events (payment_failed, charge_skipped, subscription_cancelled events) - GET /api/marketing?resource=flows (Klaviyo flows including winback/dunning) LAYOUT: 1. Stats bar: Active Subscribers, MRR, High Churn Risk count, Skip Rate, Payment Failures (last 7d) 2. Churn Risk Table: show all subscribers sorted by churn_risk (high first), columns: Name, Product, Status, Payment Method, Charges, Skipped, Churn Risk (color-coded badge), Next Charge 3. Risk Factor Breakdown: group and count by risk signals (3+ skips, legacy payment method, paused status, payment failures) 4. Recent Events Timeline: show last 10 events with type badges, subscriber name, date, and detail BADGES: active=green, paused=yellow, cancelled=red, high=red, medium=yellow, low=green, legacy_payment=yellow, shopify_payments=green Include workshop-topbar div and load /nav.js and /workshop.css at the end. No frameworks, vanilla HTML/JS only.Copy

Build a single-page HTML command center called "Payment Reconciliation Command Center" for the the lab. DESIGN: - DARK MODE: background #111, cards #1a1a1a, borders #2a2a2a - Bricolage Grotesque font, coral accent (#e8594f) - Agent suggestion boxes: purple background (#1e1b2e), border (#2d2640), label color #a78bfa, prefix with "✦" - Topbar: black (#000) with "● Payment Recon" logo and green LIVE indicator (pulsing dot) DATA: Fetch from these local API endpoints: - GET /api/erp?resource=unmatchedPayments (list of unmatched payments with sales_order, shopify_order, erp_amount, psp_amount, diff, payment_method, age_days) - GET /api/erp?resource=metrics (total_sales_orders_30d, unmatched_payments, estimated_unmatched_annual, adjust_cost_avg_min) - GET /api/erp?resource=salesOrders (recent orders with payment_matched boolean) - GET /api/ecom?resource=orders (Shopify orders for cross-referencing) LAYOUT: 1. Stats bar (dark cards): Unmatched Payments count, Total Unmatched Value (sum diffs), Est. Annual Gap (5,600,000 SEK), Match Rate %, Oldest Unmatched (max age_days) 2. Action Queue: For each unmatched payment, show a "ticket" card with: - Header: "SO-XXXX → Shopify #XXXXX" + payment_method badge - Meta: amounts (ERP vs PSP), diff in red, age in days - Source badges: "Business Central" (blue) + "Shopify" (green) + PSP name - Agent Suggestion box with specific recommendation based on payment_method: * legacy_payment: "Legacy payment settlement with T+14 delay. Check settlement report for date X. If diff < 2%: auto-match with currency adjustment." * sepa: "SEPA batch payment. Check SEPA mandate status and batch reference. Match against bank statement." * shopify_payments: "Stripe settlement T+2. Compare with Stripe Dashboard payout ID. Diff likely currency-related." - Action buttons: "Auto-Match" (primary coral), "Manual Review" (secondary), "Flag for Audit" (ghost) 3. Recently Matched: table of salesOrders where payment_matched=true, showing SO#, Shopify#, Amount, Payment, Date BADGES: paid=green, pending_review=yellow, failed=red, legacy_payment=yellow, sepa=yellow, shopify_payments=green, posted=green Include workshop-topbar div and load /nav.js and /workshop.css at the end. No frameworks, vanilla HTML/JS only.Copy

Build a single-page HTML [dashboard/command center] called "[NAME]" for the the lab. DESIGN: - [Light: bg #f6f6f7, cards white] / [Dark: bg #111, cards #1a1a1a] - Bricolage Grotesque font, coral accent (#e8594f) - [If command center: add agent suggestion boxes with purple #1e1b2e bg] DATA: Fetch from these local API endpoints: - GET /api/ecom?resource=[products|customers|orders] - GET /api/subscriptions?resource=[subscribers|metrics|events] - GET /api/erp?resource=[salesOrders|unmatchedPayments|adjustCostJobs|metrics] - GET /api/marketing?resource=[flows|campaigns|segments] - GET /api/data?resource=[pipelines|models|kpis] - GET /api/cx?resource=[tickets|metrics] LAYOUT: 1. [Describe stats bar with 4-5 KPIs] 2. [Describe main content: table, action queue, timeline] 3. [Describe secondary section] Include workshop-topbar div and load /nav.js and /workshop.css at the end. No frameworks, vanilla HTML/JS only.Copy