BayanCore ERP — Low-Fidelity ASCII Prototypes
Document Status: Draft Design Pattern Inspiration: Finlo, Loanza, WindFarm, Time Tracker, Twisty, Crextio, Clerio
This document outlines the structural layout for the BayanCore Liquid Glass interface using ASCII wireframes. It incorporates the "Hub and Spoke" navigation model and the progressive disclosure strategy.
Global Layout Anatomy
Based on the inspiration audit, the core shell of the application consists of:
- Ultra-slim Left Rail: Icons only, for switching between major modules (Accounting, Selling, HR, Buying).
- Two-Zone Layout:
- Top Zone (Glass Header): Contains the sub-module tab bar, global search (Cmd+K), and user controls, floating over a blurred photo/gradient background.
- Bottom Zone (Card Grid): Functional, flat or lightly frosted area containing data cards with consistent spacing (16-24px gaps).
- Persistent AI Sidebar: Right-anchored chat interface.
0. Global Landing Page (Two Variations)
The Global Landing Page is the first screen seen post-login. It aggregates data across all modules into a single "Morning Briefing" or "Command Center".
Variation A: The "Morning Briefing" (Action-Oriented)
Inspiration: Clerio (Card grid), Twisty (Clean lists) Focus: Telling the user exactly what needs their attention right now.
+---+-----------------------------------------------------------------------------------+
| ⌘ | [Glassy Header Area - Blurred Office Photography Background] |
+---+ |
| 🏠| Home Overview [ Good Morning, Ahmed ] |
| | |
| 🛒| [ 🔍 Search anything (Invoices, Employees, Reports)... ] [ 🔔 3 ] [ 🤖 ] [ Av ] |
| +-----------------------------------------------------------------------------------+
| 👥| |
| | +-----------------------------------+ +--------------------------------------+ |
| 📦| | ⚡ Needs Attention Today | | AI Daily Summary | |
| | | | | | |
| ⚙️| | [!] 3 ZATCA Invoices Failed | | [BayanCore AI] | |
| | | Click to resolve formatting | | Overall business health is stable. | |
| | | | | However, Cash Runway dropped by | |
| | | [!] 5 Pending Leave Requests | | 2% due to upcoming tax payments. | |
| | | HR requires your approval | | | |
| | | | | > Show me cashflow projections | |
| | | [!] Vendor Payment Due | | > Draft email to HR manager | |
| | | $12,500 to Al-Rajhi Corp | | | |
| | +-----------------------------------+ +--------------------------------------+ |
| | |
| | +---------------+ +---------------+ +---------------+ +---------------+ |
| | | Cash Balance | | Open AR | | Headcount | | Saudization | |
| | | $4.2M | | $850k | | 142 Active | | 32% (Green) | |
| | | [Line Chart] | | [Bar Chart] | | [+2 this mo] | | (Gauge) | |
| | +---------------+ +---------------+ +---------------+ +---------------+ |
+---+-----------------------------------------------------------------------------------+
Variation B: The "Command Center" (Data-Heavy / Dark Mode)
Inspiration: Dark Concept (Image 1) - High contrast, glowing data lines, topography map. Focus: Executive overview, macro trends, and visual "Wow" factor.
+---+-----------------------------------------------------------------------------------+
| ⌘ | [Deep Slate Background with subtle Cyan/Orange grid lines] |
+---+ |
| 🏠| Global Command [ Executive Overview ] |
| | |
| 🛒| [ 🔍 Cmd+K ... ] [ 🔔 ] [ 🤖 ] [ Av ] |
| +-----------------------------------------------------------------------------------+
| 👥| |
| | +-----------------------------------------------------------------------------+ |
| 📦| | Macro Health (Cash vs Revenue vs Liabilities) | |
| | | | |
| ⚙️| | [====== Glowing Topography / Overlapping Area Charts ======] | |
| | | [ (Cyan: Cash, Orange: Liabilities) ] | |
| | | [==============================================================] | |
| | +-----------------------------------------------------------------------------+ |
| | |
| | +---------------+ +---------------+ +--------------------------------------+ |
| | | Total Revenue | | Net Margin | | AI Risk Analysis | |
| | | $8.4M YTD | | 24% | | | |
| | | (o) Lollipop | | (Semicircle) | | [!] Supply chain delay flagged for | |
| | | (o) Chart | | [ Orange ] | | Vendor Y. Impacts 3 Sales Orders | |
| | | (o) | | | | | |
| | +---------------+ +---------------+ +--------------------------------------+ |
+---+-----------------------------------------------------------------------------------+
1. Accounting Hub (Hero Metrics & KPI Grid)
Inspiration Applied: Loanza (card grid), WindFarm (hero numbers), Clerio (consistent KPI cards with micro-charts).
+---+-----------------------------------------------------------------------------------+
| ⌘ | [Glassy Header Area - Blurred Gradient Background] |
+---+ |
| 📊| Accounting Core [ Dashboard ] [ Receivables ] [ Payables ] [ Bank Recon ] |
| | |
| 🛒| [ 🔍 Search / Cmd+K ... ] [ 🔔 ] [ 🤖 AI ] [ Avatar ] |
| +-----------------------------------------------------------------------------------+
| 👥| |
| | +-----------------------------------+ +--------------------------------------+ |
| 📦| | Hero Metric | | Persistent AI Assistant | |
| | | Cash Runway | | | |
| ⚙️| | $1.2M | | [BayanCore AI] | |
| | | | | Hi, I noticed 3 overdue invoices | |
| | | [===Candlestick / Line Chart===] | | from Supplier X. Should I hold | |
| | | | | their upcoming payments? | |
| | +-----------------------------------+ | | |
| | | [ Hold Payments ] [ Ignore ] | |
| | +---------------+ +---------------+ | | |
| | | Outstanding AR| | Open Payables | | ZATCA Phase 2 compliance check | |
| | | $120,500 | | $45,000 | | passed for the latest batch. | |
| | | [.|||.....] | | [..|||....] | | | |
| | +---------------+ +---------------+ | | |
| | | +--------------------------------+ | |
| | +---------------+ +---------------+ | | Ask me anything... [↗]| | |
| | | ZATCA Reject | | Bank Match | | +--------------------------------+ | |
| | | 12 | | 84.3% | +--------------------------------------+ |
| | | [..|......] | | (Gauge) | |
| | +---------------+ +---------------+ |
| | |
| | [ ⌄ Advanced Accounting (Period Close, Taxes, Masters...) ] |
+---+-----------------------------------------------------------------------------------+
2. Saudi HRMS Hub (Radial Data & Density Maps)
Inspiration Applied: Time tracker (radial clock), Crextio (dot-matrix attendance), Finlo (semicircle gauges).
+---+-----------------------------------------------------------------------------------+
| ⌘ | [Glassy Header Area - Blurred Office Photography Background] |
+---+ |
| 📊| Saudi HRMS [ Dashboard ] [ Employees ] [ Payroll ] [ Leaves ] |
| | |
| 🛒| [ 🔍 Search / Cmd+K ... ] [ 🔔 ] [ 🤖 AI ] [ Avatar ] |
| +-----------------------------------------------------------------------------------+
| 👥| |
| | +-----------------------+ +------------------------+ +----------------------+ |
| 📦| | Shift / Attendance | | Attendance Density | | AI Assistant | |
| | | | | | | | |
| ⚙️| | [ 12 ] | | Employee M T W T F | | Iqama Expiry Alert | |
| | | / \ | | | | 3 employees have | |
| | | [9] [3] | | Ahmed S. [x][x][o][x]| | Iqamas expiring | |
| | | \ / | | Sarah T. [x][x][x][x]| | in 30 days. | |
| | | [ 6 ] | | Omar K. [o][o][x][x]| | | |
| | | (Radial Dial) | | Khalid M. [x][x][x][x]| | [ Start Renewal ] | |
| | +-----------------------+ +------------------------+ | | |
| | | | |
| | +---------------+ +---------------+ +-------------+ | | |
| | | Headcount | | Saudization | | Leave Req. | | | |
| | | 142 | | 32% | | 5 Pending | | | |
| | | [+5 this mo] | | (Semicircle) | | [||.....] | | | |
| | +---------------+ +---------------+ +-------------+ | [ Ask me... ] | |
| | +----------------------+ |
| | [ ⌄ Advanced HR (Recruitment, Appraisals, Setup...) ] |
+---+-----------------------------------------------------------------------------------+
3. Selling & ZATCA Hub (Lollipop Charts & Donut Breakdown)
Inspiration Applied: Twisty (lollipop charts), Fierce (donut chart with legend).
+---+-----------------------------------------------------------------------------------+
| ⌘ | [Glassy Header Area - Blurred Abstract Gradient Background] |
+---+ |
| 📊| Selling & ZATCA [ Dashboard ] [ Sales Orders ] [ Invoices ] [ Customers ] |
| | |
| 🛒| [ 🔍 Search / Cmd+K ... ] [ 🔔 ] [ 🤖 AI ] [ Avatar ] |
| +-----------------------------------------------------------------------------------+
| 👥| |
| | +-----------------------------------+ +--------------------------------------+ |
| 📦| | Daily Revenue (Lollipop) | | Sales by Category (Donut) | |
| | | | | | |
| ⚙️| | (o) | | _----_ | |
| | | | (o) | | / \ Total Month | |
| | | (o) | | | | | $85k | | |
| | | | | (o) | | | \ / | |
| | | | | | | | | `----` | |
| | | S M T W T | | [x] Hardware: $40k | |
| | | | | [x] Software: $25k | |
| | | +15% vs last week | | [x] Services: $20k | |
| | +-----------------------------------+ +--------------------------------------+ |
| | |
| | +---------------+ +---------------+ +--------------------------------------+ |
| | | Open Quotes | | ZATCA Status | | AI Quick Actions | |
| | | 24 | | 100% Cleared | | > Generate Sales Report | |
| | | [||||.....] | | (Semicircle) | | > Draft Follow-up Emails | |
| | +---------------+ +---------------+ +--------------------------------------+ |
| | |
| | [ ⌄ Advanced Selling (Pricing, Promotions, Settings...) ] |
+---+-----------------------------------------------------------------------------------+
Implementation Guidelines for Frontend
- Background Bleed: Use CSS
backdrop-filter: blur(16px)on the top navigation and header area. The background image should be slightly desaturated or darkened to ensure text readability. - Card Anatomy: Every KPI card follows
.label { font-size: 0.75rem; color: muted },.metric { font-size: 2rem; font-weight: bold },.chart { height: 40px; margin-top: auto }. - Compartmentalization: Cards should have a solid or semi-transparent white background (
rgba(255, 255, 255, 0.7)in light mode,rgba(30, 30, 30, 0.7)in dark mode) with a subtle1px solid rgba(255, 255, 255, 0.2)border. No heavy drop shadows; rely on gaps (e.g.,gap-6in Tailwind) for separation. - AI Sidebar: It must share the same horizontal space as the main content grid, not overlay it as a modal. It can be collapsed, but when open, it pushes content to the left.