ABC
📱 SCREEN 1: Payment Authorization Before Charging Frame: 390px width Spacing: 24px outer padding Card radius: 12px Vertical spacing: 16px between sections TOP BAR ← Back Start Charging Indiranagar Fast Charger – 60kW Divider line CARD 1: Charger Details [White Card] Charger ID BLR-IND-0067 Connector CCS2 Tariff ₹18 / kWh Idle Fee ₹5 / min (after 10 mins) Divider Estimated Cost (30 min) ₹250 – ₹350 CARD 2: Payment Method Payment Method UPI – ronit@okaxis Change → Divider Pre-Authorization Amount ₹500 CARD 3: Authorization Status (Most Important Card) Authorization Summary Transaction ID TXN_ATH_9837421 Session ID SES_BL_9837421 Status: 🟡 Authorizing... Below that small helper text: “Charging will begin only after successful authorization.” BUTTON (Full Width) [Primary Button] Authorizing... (Disabled state) Variant states: State 1: 🟡 Authorizing... (spinner) State 2: 🟢 Authorization Successful Button: Start Charging State 3: 🔴 Authorization Failed Button: Retry Payment This screen communicates: Payment gatekeeping before energy delivery. 📱 SCREEN 2: Charging Completion & Billing Frame: Same 390px TOP BAR Charging Summary Session ID: SES_BL_9837421 Divider CARD 1: Session Details Charger ID BLR-IND-0067 Energy Consumed 14.8 kWh Duration 42 minutes Start Time 10:42 AM End Time 11:24 AM CARD 2: Billing Breakdown Energy Charges (14.8 × ₹18) ₹266.40 Idle Fee ₹10.00 Divider Subtotal ₹276.40 GST (18%) ₹49.75 Divider Bold Total ₹326.15 CARD 3: Payment Adjustment Pre-Authorized ₹500 Final Charged ₹326.15 Refund Initiated ₹173.85 Status 🟢 Refund Processing Refund ETA Within 24 hours BUTTONS Download GST Invoice View Transaction Details This screen shows: Transparent billing + refund lifecycle. 🖥 SCREEN 3: Finance & Reconciliation Dashboard Frame: 1440px desktop Use 12-column grid Top padding: 32px Card padding: 24px HEADER Payment & Settlement Control Dashboard Date: 12 Feb 2026 Role: Finance Admin Subtext (small): Automated 3-way reconciliation with variance tracking. ROW 1: KPI CARDS (6 Cards in One Row) Card 1 Total Sessions 33,842 +2.1% vs yesterday Card 2 Payment Success 99.2% Card 3 Revenue Today ₹1.24 Cr Card 4 Reconciliation Break 0.37% Card 5 Refund >24h 42 Card 6 Exposure Value ₹1.8L ROW 2: 3-Way Reconciliation Table Title: Daily Closure Status Source Transactions Amount Status CMS 33,842 ₹1.24 Cr Matched Payment Gateway 33,810 ₹1.23 Cr 32 Pending Bank 33,804 ₹1.23 Cr 38 Unmatched Below table: Unmatched Transactions: 38 Variance %: 0.37% Button → View Exceptions ROW 3: Exception Breakdown Title: Exception Categorization PG Timeout – 12 Bank Delay – 8 Session Abort – 9 Chargeback – 4 Partner Variance – 5 You can show this as simple horizontal bars. ROW 4: Partner Settlement Snapshot Partner Sessions Payable Variance Status CPO_01 4,320 ₹18.4L 0.12% Cleared CPO_02 2,980 ₹11.1L 0.08% Pending Button → Download Settlement Statement Visual Hierarchy Tips Headers → 18–20px Subheaders → 14–16px Body → 13–14px Numbers slightly bold KPI numbers should visually dominate. Extra Optional Power Move Add small label on dashboard: “Last Reconciliation Run: 11:45 PM | Status: Completed” That signals automation maturity.