SYSTEM ARCHITECTURE

The Ultimate Customization Guide

Everything you need to know about extending the usmapos framework, from managing brand colors to configuring global translations.

Dynamic Color System

usmapos leverages Tailwind 4 OKLCH syntax for unparalleled color depth and accessibility. The theme adapts globally based on your brand's primary tokens.

components/customization-provider.tsx
const colorSchemes = {
  blue: {
    primary: 'oklch(0.6 0.18 250)', // Vibrant Blue
    secondary: 'oklch(0.9 0.05 250)',
  },
  emerald: {
    primary: 'oklch(0.65 0.2 160)', // Lush Green
    secondary: 'oklch(0.92 0.04 160)',
  }
};

Global i18n & RTL

Fully automated English/Arabic support. The layout intelligently flips all components, sidebars, and spacing when switching to RTL mode.

Adding Translations

Add keys to lib/translations.ts. The framework handles the lookup and provides type-safety for all navigation and UI elements.

RTL logic

We use dir="rtl" on the HTML tag. All components use logical properties (ms-*, me-*) instead of left/right.

Trust & Safety

Granular role management, permission matrices, and detailed audit logging come out-of-the-box.

Roles ManagerPermission ToggleActivity LogsUser MaskingSession Control

Metric Visualization

usmapos ships with an expanded ChartCard that supports Radar, Doughnut, Pie, Area, and Bar charts via react-chartjs-2.

API-Ready Architecture

Centralized async service layer pre-configured for easy transition to real network calls and endpoints.

lib/api/api-service.tsBACKEND API
asyncservice
/** * API Service * ------------ * Centralized backend interface for all data operations. * All methods return Promises and simulate network latency. */ export const apiService = { // ===================== // Data Fetching // ===================== getUsers, getProducts, getKanbanData, getEmails, getEvents, getAuditLogs, getRoles, getDashboardStats, getAnalyticsData, // ===================== // Mutations (Global CRUD) // ===================== createUser, updateUser, deleteUser, createProduct, updateProduct, deleteProduct, createCustomer, updateCustomer, deleteCustomer, createKanbanTask, updateKanbanTask, deleteKanbanTask, sendEmail, deleteEmail, createEvent, updateEvent, deleteEvent, createRole, updateRole, deleteRole };
Documentation Note

All API methods are asynchronous and include simulated network delay to reflect real backend behavior.