I'll design the enterprise-grade Customers module with all three screens. Let me first update the theme to match the specification, then create the components.
Now let me update the theme to match the specification and create the Customers module:
Now let me create the Customers module components:
Now let me create the full page add customer and the customers page:
I've built the complete enterprise-grade Customers module with three screens:
Screen 1 - Customers List: Features a page header with title/subtitle and "New Customer" button, advanced filter bar with search, division, district, order type, and status filters, four KPI cards (Total Customers, Repeat Customers, New This Month, Avg. Order Value), and a comprehensive data table with pagination.
Screen 2 - Customer Details: Includes a sticky header with back navigation, customer name, tags (Repeat/VIP), and "Create Order" CTA, customer profile card with contact info, KPI summary with lifetime value and order stats, behavior summary metrics, and tabbed sections for Overview, Orders, Payments, Returns, Addresses, and Activity & Notes.
Screen 3 - Add Customer: Both a quick add modal and full page form with fields for name, phone (required), email, division, district, address, and notes.
The design follows the specification with a light gray sidebar (#F1F1F1), white cards with subtle shadows, 12px rounded corners, 8px spacing system, and Inter typography. Navigate to /customers to see the complete module.
Now I'll create the Settings modal with all five sections. Let me create the components:
Now let me update the sidebar to open the Settings modal instead of navigating to a page:
I've created a premium Settings modal experience that matches the enterprise SaaS style requested. The modal opens when clicking "Settings" in the sidebar and features a sticky header with search and close button, a two-column layout with left navigation panel (light gray background) and right content area, all five settings sections (Business Settings, Plan & Subscription, Users & Roles, Delivery Partners, and Integrations), and a footer with save status and action buttons. The modal uses clean cards with subtle borders, Inter typography, 8px spacing system, and 14px rounded corners for a professional look.