Osuwo Odongo John Frederick | Fullstack Engineer · Frontend-Focused · SEO & Security Specialist

1.1 Scope & Scale

• Codebase: 500+ source files (432+ .tsx, 88+ .ts), structured by feature and role.
• Routing: 238+ routes with public landing, authenticated app areas, and role-specific dashboards.
• Build: Vite 6, TypeScript 5.6, strict typing and ESLint across the app.

1.2 Tech Stack

1.3 Product Areas (Multi-tenant, Role-Based)

• Landing & Marketing: Home, About Us, Pricing, Resources, Support, Blog (listing + article pages).
• Distributor: Dashboard, orders, shop orders, routes, cart, products, inventory, price list, returns, analytics, customers.
• Manufacturer: Dashboard, direct orders, distributor orders, modern trade (customers, branches, orders, team), products (GT/MT), pricing, promotions, reports (GT, MT, competitor, product pricing), alerts (visit duration), van sales, user management, tutorial hub, billing.
• Dealer CRM: Dashboard, leads, GARIS/prospects, entities, follow-ups, pipeline, reports, test drives, inventory, customers, accessories, workshop, settings.
• ERP: Dashboard, financial, invoices, procurement, HR, branch views (feature-flagged).
• Sales: Sales Admin (team, map, distributors, settings), Sales Rep (customers, orders), ASM, RSM, HOS (regions map).
• Ops: Placeholder and ops-specific flows.
• Merchandising: Layout, outlets list, outlet detail, task screen.
• Admin: Account management, analytics, attendance, KPI, modern trade, security monitoring (alerts, audit log, notification center), support operations (emergency recovery, support center, system maintenance), system management (data, documentation, license/billing).
• Accounting: Dedicated accounting wrapper and flows.

1.4 Architecture & Patterns

• Code splitting: Lazy-loaded route chunks for Manufacturer, Admin, Accounting, ERP, Dealer CRM, Sales, Ops, RSM, ASM, HOS, Merchandising to keep initial bundle smaller.
• Protected routes: ProtectedRoute checks auth (context + accessToken), OTP verification, and new-user onboarding redirect.
• Role-based redirects: e.g. Dealer CRM default route by role (workshop, inventory, GARIS, dashboard).
• Layouts: Landing (Header + children + Footer), main app layouts per product (Distributor, Manufacturer, Dealer CRM, ERP, Sales, Admin, etc.).
• Error handling: React ErrorBoundary with user-friendly fallback, refresh and go-back actions; dev-only error details.

1.5 Reusable UI & UX

• Components: VirtualTable, PaginationControls, ProductCard, ProductGrid, ProductViewToggle, SearchFilterBar, Calendar, Notes (with filter/form), ActivityTimeLine, SalesPerformanceChart, RoutePlanner, TeamMembersGrid, UserCard, SkeletonComponents, ProgressiveLoader, PDFModal, ThemeToggle.
• Theme: ThemeContext with light/dark/system, persisted in localStorage, respects prefers-color-scheme.
• Design system: Tailwind theme extension (primary palette, custom grays for dark mode).
• Loading: Suspense with shared loading fallback (spinner) for lazy routes.
• OAuth UX: Popup detector for OAuth callback; postMessage to opener; “Connection successful” and auto-close.

1.6 Data & Services

• Services: 69+ modules (auth, orders, products, modern trade, distributors, customers, reports, billing, attendance, ERP, Dealer CRM, etc.) with consistent patterns and env-based API base URL.
• State: Redux slices for orders (direct, shop, modern trade), financial, HR, procurement, navigation; React Query for server state where appropriate.
• Bridges: Order service bridge for cross-module behavior.

1.7 Quality & DX

• Types: Shared types for customers, orders, distributors, KPIs, sidebar preferences, etc.
• Utils: Date formatting, cart helpers, CSV parsing/validation, PDF generation, Google Maps config, toast helpers, WebSocket helpers, retry with backoff.
• Tests: Vitest + React Testing Library; tests for competitor Excel upload, distributor order receive form.