Skip to content

Architecture

Project Structure

src/
├── main.jsx                     # Entry point
├── App.jsx                      # Provider wrappers
├── routes.jsx                   # React Router v6
├── assets/styles/               # Global CSS + MUI theme
├── components/
│   ├── common/                  # DataTable, ErrorBoundary, etc.
│   ├── layouts/                 # Header, Sidebar, MainLayout
│   ├── dashboard/               # Charts, StatsCards
│   ├── products/                # ProductForm, ProductList
│   ├── orders/                  # OrderList, OrderDetails
│   ├── payments/                # TransactionList, ChapaConfig
│   ├── settings/                # StoreProfile, PaymentInfo
│   └── reports/                 # SalesReport, ProductPerformance
├── pages/                       # Lazy-loaded page components
│   ├── Dashboard/               # Dashboard, SellerFeaturedProducts, etc.
│   ├── Promotions/              # PromotionsList, CreateOffer, MyOffers
│   └── ...                      # Other feature pages
├── services/                    # 19 service modules
├── store/                       # 8 Redux Toolkit slices
├── hooks/                       # useAuth, useDebounce, useExport, etc.
├── utils/                       # Constants, formatters, helpers
└── test/                        # Integration, accessibility, visual tests

Routing

// src/routes.jsx
const router = createBrowserRouter([
  {
    path: '/',
    element: <ProtectedRoute><MainLayout /></ProtectedRoute>,
    children: [
      { index: true, element: <Dashboard /> },
      { path: 'products', element: <Products /> },
      { path: 'orders', element: <Orders /> },
      { path: 'payments', element: <Payments /> },
      { path: 'reports', element: <Reports /> },
      { path: 'settings', element: <Settings /> },
      { path: 'featured-products', element: <SellerFeaturedProducts /> },
      { path: 'subscription', element: <SellerSubscription /> },
      { path: 'subscription/new', element: <NewSubscription /> },
      { path: 'products/feature', element: <SellerProductSelection /> },
      { path: 'promotions', element: <PromotionsList /> },
      { path: 'promotions/create-offer/:promotionId', element: <CreateOffer /> },
      { path: 'promotions/my-offers', element: <MyOffers /> },
    ],
  },
  {
    path: '/auth',
    element: <AuthLayout />,
    children: [
      { path: 'login', element: <Login /> },
      { path: 'forgot-password', element: <ForgotPassword /> },
      { path: 'reset-password', element: <ResetPassword /> },
    ],
  },
]);
Item Icon Path
Dashboard DashboardIcon /
Products InventoryIcon /products
Orders ReceiptLongIcon /orders
Payments PaymentIcon /payments
Reports AssessmentIcon /reports
Settings SettingsIcon /settings
My Featured Products StarIcon /featured-products
My Subscription LocalPharmacyIcon /subscription
Promotions & Offers CampaignIcon (Offer) /promotions

Payment Callback Routes

Route Component Purpose
/subscription/payment-callback SubscriptionCallback Verify Chapa payment, activate subscription
/products/feature/payment-callback FeaturedProductCallback Verify Chapa payment, activate featured product