System Architecture

This section outlines how the ColaSolar Inventory & After-Sales Portal works under the hood. It describes how the parts connect to keep our data secure, synchronized, and running smoothly.

High-Level Concept

The portal consists of three primary layers working together:

[ User Browser ]  <=========>  [ Express API Server ]  <=========>  [ Supabase Database ]
(React, Tailwind,              (Handles requests, secure           (Stores returns, users,
 Lucide-React UI)               logs, and proxy features)           boards, and logs)

1. The User Interface (Frontend): Runs in your web browser. Built using React with a clean visual identity using Talwind CSS for easy, responsive layouts.
2. The Server Layer (Backend): An Express JS server that serves as our secure routing post.
3. The Secure Database (Supabase): A enterprise cloud-scale PostgreSQL database where all solar assets, branch staff records, and motherboard histories are securely kept.

Detailed Component Breakdown

1. Frontend Client (React + TypeScript)

Our frontend manages user experience, local memory, and animations cleanly.

• Dynamic Views: The system dynamically changes what is visible depending on your active role (e.g., Engineers only see repair tools, Managers see access queues, and HQ Admins view global logs).
• Offline Resiliency & State: Leverages browser localStorage variables to handle active simulation profiles and preserve pending forms during minor web dropouts.
• Visual Feedback: Built using styled custom card modules, status indicators, and unified typography.

2. Backend Middleware Router (Express API)

To preserve enterprise safety guidelines and keep credentials hidden from the browser:

• Serves the compiled browser application inside production containers.
• Enforces strict port routing and acts as an intermediate gateway.

3. Database Layer (Supabase PostgreSQL)

Data is structurally organized across several master tables:

• Profiles Table (profiles):
  • Tracks individual employee names, approved statuses, and assigned roles.
  • Links to specific Nigerian branch designations (e.g., ikeja, abuja, portharcourt).
• Aftersales Logs Table (after_sales_logs):
  • The central registry for customer returned solar products.
  • Records serial numbers, initial intake details, and pickup timestamps.
• Motherboard Repairs (mother_board_repairs):
  • Captures engineering motherboard logs, replacement boards used, and detailed defect classifications.
• Action Audits / History:
  • Monitors important administrator events (such as whitelist changes or manual edits) for company compliance checks.

Secure Data Isolation Rules

To enforce strict privacy and audit safety across our regional hubs:

• Role Permissions: Read/write privileges are validated in real-time. For example, a Service Center Engineer cannot modify corporate-wide metrics.
• Branch Boundaries: Branch Managers can view and approve staff members within their own branch, whereas HQ Administrators and Engineering Directors possess global visibility across all 11 locations.