​

RBAC UI/UX Specification by Business Level (L0–L4)

​

🎯 Shared Design Principles

​

🎨 Visual Design System (All Levels)

​

Color Palette

​

Typography

- Heading 1: 24px, Bold (Dashboard titles)
- Heading 2: 20px, SemiBold (Section headers)
- Body Large: 16px, Regular (Cards, buttons)
- Body: 14px, Regular (Table, list)
- Caption: 12px, Regular (Timestamps, hints)

​

Spacing

- Padding Card: 16px
- Gap between cards: 12px
- Bottom Nav height: 64px
- FAB size: 56x56px

​

🧩 L0 — Micro / Solo

​

L0_OWNER Role

​

L0_CASHIER Role

​

L0_VIEWER Role

​

🧩 L1 — SME

​

Key Differences from L0:

• Multi-user dashboard: Lihat aktivitas team
• Department views: Finance, Inventory, HR tabs
• Basic approval: Approval untuk PO, SO
• Audit trail: Log aktivitas per user
• More reports: Laporan per departemen

​

Navigation Structure:

​

🧩 L2 — Enterprise

​

Key Differences from L1:

• Advanced dashboard: KPI per departemen, drill-down analytics
• Approval workflow: Multi-level approval (L1, L2)
• SoD enforcement: UI blocks invalid role combinations
• Advanced reports: Pivot tables, custom reports
• Audit trail: Detailed logging dengan SoD validation
• Multi-branch: Branch selector, consolidation view

​

Navigation Structure:

​

🧩 L3 — Holding

​

Key Differences from L2:

• Entity selector: Switch between entities
• Consolidation dashboard: Group-level KPI
• Intercompany transactions: Track cross-entity flows
• Multi-currency: Currency conversion, FX management
• Group reporting: Consolidated P&L, balance sheet
• Domain isolation: Role access per entity

​

Navigation Structure:

​

🧩 L4 — MNC / Global

​

Key Differences from L3:

• Region selector: Switch between regions/countries
• Executive dashboard: C-level strategic view
• Compliance dashboard: SOX, ISO, GDPR compliance status
• Global reporting: Multi-currency, multi-country consolidation
• SSO integration: Single sign-on, MFA
• Advanced audit: Detailed SoD validation, anomaly detection

​

Navigation Structure:

​

📱 Navigation Patterns by Level

​

L0 Bottom Navigation

┌──────┬──────┬──────┬──────┬──────┐
│  🏠  │  💵  │  📦  │  📊  │  ⚙️  │
│ Home │  POS │ Item │ Rep. │ Set. │
└──────┴──────┴──────┴──────┴──────┘

​

L1 Bottom Navigation (Owner)

┌──────┬──────┬──────┬──────┬──────┬──────┐
│  🏠  │  💰  │  📦  │  👥  │  📊  │  ⚙️  │
│ Dash │ Fin. │ Inv. │  HR  │ Rep. │ Set. │
└──────┴──────┴──────┴──────┴──────┴──────┘

​

L2 Top Navigation (Tabbed)

Dashboard | Finance | Operations | Marketing | Reports | Audit | Settings | Admin

​

L3 Sidebar Navigation

Group Dashboard
├── Entities
├── Finance
├── Consolidation
├── Reports
├── Audit
├── Settings
└── Admin

​

L4 Sidebar Navigation (Advanced)

Executive Dashboard
├── Strategy & KPI
├── Compliance
├── Global Reports
├── Audit & SoD
├── Regional View
├── Settings
└── Admin

​

🧪 Component Library (All Levels)

​

Core Components

// Untuk display KPI
class MetricCard extends StatelessWidget {
  final String title;
  final String value;
  final IconData icon;
  final Color color;
  final String? trend; // "+12%" atau "-5%"
  
  // Tap action → detail page
}

// Grid/List produk
class ProductCard extends StatelessWidget {
  final String name;
  final double price;
  final int stock;
  final String? imageUrl;
  final VoidCallback onTap;
  final VoidCallback? onEdit; // null untuk read-only
}

// List transaksi
class TransactionCard extends StatelessWidget {
  final String invoiceNo;
  final DateTime timestamp;
  final double total;
  final PaymentStatus status;
  final VoidCallback onTap;
}

// Approval queue (L2+)
class ApprovalCard extends StatelessWidget {
  final String docNo;
  final String type; // PO, SO, Payment
  final double amount;
  final DateTime createdAt;
  final String createdBy;
  final VoidCallback onApprove;
  final VoidCallback onReject;
}

​

🔄 Offline-First Strategy (All Levels)

​

Local Database (SQLite/Isar)

// Tables
- products (id, name, price, stock, sync_status)
- transactions (id, invoice_no, total, items, sync_status)
- approvals (id, doc_no, type, status, sync_status) // L2+
- settings (key, value)

// Sync Queue
- pending_transactions (auto-sync saat online)
- pending_approvals (auto-sync saat online) // L2+
- conflict_resolution (last-write-wins)

​

Sync Indicator

┌─────────────────────────────┐
│ 🌐 Online (hijau)           │
│ 📴 Offline (abu-abu)        │
│ 🔄 Syncing... (kuning)      │
│ ⚠️ Conflict (merah)         │
└─────────────────────────────┘

​

✅ Feature Matrix by Level

​

📱 Mobile Implementation by Role (mstore_mobile)

​

L0 Roles

​

L0_OWNER

• ✅ Dashboard (full metrics)
• ✅ Cashier (POS transactions)
• ✅ Inventory (product CRUD)
• ✅ Reports (all reports)
• ✅ Settings (full configuration)

• dashboard/ - Full dashboard dengan KPI
• cashier/ - POS system
• inventory/ - Product management
• report/ - All reports
• setting/ - Configuration

​

L0_CASHIER

• ✅ Cashier (POS only)
• ✅ Quick Products (favorites)
• ✅ Transaction History (view only)
• ✅ Shift Management (close shift)
• ❌ Settings (disabled)
• ❌ Reports (disabled)

• cashier/ - POS transactions
• transaction_history/ - View only
• shift/ - Shift management

​

L0_VIEWER

• ✅ Dashboard (read-only)
• ✅ Reports (view & export)
• ❌ Cashier (disabled)
• ❌ Inventory (disabled)
• ❌ Settings (disabled)

• dashboard/ - Read-only view
• report/ - View & export

​

L1 Roles

​

L1_OWN-MGR

• ✅ Dashboard (team activity)
• ✅ Finance (full access)
• ✅ Inventory (full access)
• ✅ HR (full access)
• ✅ Reports (all reports)
• ✅ Settings (full)

• dashboard/ - Team dashboard
• approval/ - Approval queue
• inventory/ - Full management
• employee/ - HR management
• report/ - All reports

​

L1_FIN-MGR

• ✅ Dashboard (finance only)
• ✅ Finance (transactions, approval)
• ✅ Reports (finance reports)
• ❌ Inventory (disabled)
• ❌ HR (disabled)

• dashboard/ - Finance metrics
• approval/ - Finance approvals
• report/ - Finance reports

​

L1_CSH (Cashier)

• ✅ Cashier (POS)
• ✅ Quick Products
• ✅ Transaction History
• ✅ Shift Management
• ❌ Reports (disabled)
• ❌ Settings (disabled)

​

L2+ Roles

​

L2_OWN-MGR

• ✅ Dashboard (enterprise KPI)
• ✅ Finance (multi-department)
• ✅ Operations (full)
• ✅ Approval (multi-level)
• ✅ Reports (consolidated)
• ✅ Audit (full access)

​

L2_ADM-SYS

• ✅ Settings (system config)
• ✅ User Management
• ✅ Backup/Restore
• ✅ Audit Logs
• ❌ Business features (disabled)

​

L2_APV-L1/L2 (Approver)

• ✅ Approval Queue (priority)
• ✅ Approval History
• ✅ Reports (approval metrics)
• ❌ Other features (disabled)

​

🔐 Role-Based Access Control Implementation

​

Feature Flag Pattern

// In each feature, implement role-based access:

class CashierPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final userRole = context.read<AuthProvider>().userRole;
    
    // Check if user has access to this feature
    if (!_hasAccess(userRole)) {
      return UnauthorizedPage();
    }
    
    // Show role-specific UI
    return _buildCashierUI(userRole);
  }
  
  bool _hasAccess(String role) {
    const allowedRoles = ['L0_OWNER', 'L0_CASHIER', 'L1_OWN-MGR', 'L1_CSH'];
    return allowedRoles.contains(role);
  }
  
  Widget _buildCashierUI(String role) {
    if (role == 'L0_CASHIER') {
      return _buildCashierOnlyUI(); // Limited UI
    } else if (role == 'L0_OWNER' || role == 'L1_OWN-MGR') {
      return _buildFullCashierUI(); // Full UI with edit options
    }
    return SizedBox.shrink();
  }
}

​

Shared Features

​

🚀 Implementation Roadmap

1. Design Phase:
   • Buat Figma mockup berdasarkan spec ini
   • Design system (colors, typography, components)
   • Prototype interactive flow per level
2. Development Phase:
   • Implement UI components (Flutter)
   • Integrate dengan backend API
   • Implement offline-first logic
   • Role-based UI rendering
3. Testing Phase:
   • User testing dengan stakeholder per level
   • Performance testing (offline mode)
   • Accessibility testing
   • SoD enforcement testing (L2+)

​

📞 Related Documentation