Pages & Routing Architecture Overview

What Are Pages?

Pages in StockEase are route-connected components that represent distinct sections of the application. Each page is responsible for its own data fetching, state management, and layout.

Key Principles

• Route-Based Organization: Each route has a corresponding page component
• Layout Wrapper: Consistent header, sidebar, and footer across pages
• Authentication Gating: Pages check user authentication and roles
• Lazy Loading: Pages are code-split for faster initial load
• Self-Contained: Each page manages its own state and effects

Routing Architecture

Route Configuration in App.tsx

<Routes>
  {/* Public */}
  <Route path="/" element={<HomePage />} />
  <Route path="/login" element={<LoginPage />} />
  
  {/* Protected - All Authenticated Users */}
  <Route path="/user" element={<UserDashboard />} />
  <Route path="/search-product" element={<SearchProductPage />} />
  <Route path="/list-stock" element={<ListStockPage />} />
  
  {/* Admin-Only */}
  <Route path="/admin" element={<AdminDashboard />} />
  <Route path="/add-product" element={<AddProductPage />} />
  <Route path="/delete-product" element={<DeleteProductPage />} />
  <Route path="/product/:productId/edit" element={<ChangeProductDetailsPage />} />
</Routes>

Page Summary Table

Page Categories

Public Pages (No Auth Required)

• HomePage: Entry point, features, login link
• LoginPage: Authentication form

Protected Pages (Login Required)

• UserDashboard: User's own inventory
• SearchProductPage: Search across products
• ListStockPage: Full inventory view

Admin Pages (Admin Role Required)

• AdminDashboard: Admin controls
• AddProductPage: Create products
• DeleteProductPage: Delete products
• ChangeProductDetailsPage: Edit products

Navigation Flow

User visits app
├─ Not logged in
│  ├─ Lands on HomePage
│  └─ Can navigate to LoginPage
│
├─ After login (User role)
│  ├─ Redirected to UserDashboard
│  ├─ Can access SearchProductPage
│  └─ Can access ListStockPage
│
└─ After login (Admin role)
   ├─ Redirected to AdminDashboard
   ├─ Can access all user pages
   └─ Can access admin pages (Add, Edit, Delete)

Typical Page Structure

Every page follows a consistent pattern:

const PageName: React.FC = () => {
  // 1. Authentication check
  // 2. State initialization
  // 3. Data fetching
  // 4. Event handlers
  // 5. Conditional rendering (loading, error)
  // 6. Layout rendering
};

See Page Lifecycle for detailed implementation patterns.

Layout Template

All pages share a consistent layout structure:

┌─────────────────────────────────┐
│         Header                  │
├────────────┬────────────────────┤
│            │                    │
│ Sidebar    │   Page Content     │
│            │                    │
├────────────┴────────────────────┤
│         Footer                  │
└─────────────────────────────────┘

Components like Header, Sidebar, and Footer are shared across all pages for consistency.

Documentation Structure

This documentation is organized into focused topics:

• Overview (this file)

  • Routing architecture, route configuration, page summary

• Page Components

  • Detailed documentation of each page (HomePage, LoginPage, UserDashboard, etc.)

• Page Lifecycle

  • Page component structure, lifecycle hooks, typical patterns

• Authentication & Protection

  • Route protection, role-based access, authentication patterns

• Performance & Optimization

  • Lazy loading, memoization, code splitting, optimization techniques

• Testing Pages

  • Testing strategies, test structure, testing patterns

Quick Reference

Access a Protected Page (Admin Only)

<Route 
  path="/admin" 
  element={<ProtectedRoute component={AdminDashboard} requiredRole="admin" />}
/>

Lazy Load a Page

const AdminDashboard = lazy(() => import('./pages/AdminDashboard'));

<Suspense fallback={<SkeletonLoader />}>
  <AdminDashboard />
</Suspense>

Check Authentication in Component

const { user, isAuthenticated } = useSelector(state => state.auth);

if (!isAuthenticated) {
  return <Navigate to="/login" />;
}

Common Tasks

Add a New Page

1. Create page component in src/pages/
2. Add route in App.tsx
3. Add to navigation (Sidebar, Header)
4. Implement authentication check if protected
5. Create tests in src/__tests__/

Protect a Route

<Route 
  path="/admin" 
  element={
    <ProtectedRoute 
      component={AdminDashboard} 
      requiredRole="admin" 
    />
  }
/>

Add Authentication Check in Page

const AdminDashboard: React.FC = () => {
  const { user, isAuthenticated } = useSelector(state => state.auth);
  
  if (!isAuthenticated || user?.role !== 'admin') {
    return <Navigate to="/login" />;
  }
  
  // Page content...
};

Related Documentation

• Component Architecture - Detailed page components
• Page Lifecycle - Component structure and patterns
• Authentication - Route protection and access control
• Performance - Optimization and lazy loading
• Testing - Testing strategies
• Main Architecture - Overall app architecture

Last Updated: November 2025
Total Pages: 9 main page components
Protected Routes: 6
Public Routes: 2