# irfan-chowdhury/ph-level2-b5-assignment-6-frontend architecture

> Architecture diagram of the GitHub repository irfan-chowdhury/ph-level2-b5-assignment-6-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-06-28). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend
- Repository: https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend

## Overview

1. **Overall shape**
   This is a single-page frontend built with **React + Vite + TypeScript**, styled with **TailwindCSS** and a large set of **Radix/shadcn-style UI primitives**. The app is organized around **role-based experiences** for **User, Agent, and Admin**, with a public marketing/landing area and separate authenticated dashboards.

2. **Entry and application shell**
   The runtime starts in `src/main.tsx`, which mounts the app and applies global providers. `src/App.tsx` and `src/routes/index.tsx` appear to own top-level route composition, while `src/index.css` provides global styling. The app also wraps theme handling through `src/providers/theme.provider.tsx` and `src/context/theme.context.ts`.

3. **Routing and access control**
   Route boundaries are enforced in `src/utils/ProtectedRoute.tsx`, `src/utils/withAuth.tsx`, and `src/utils/generateRoutes.ts`. These utilities gate access by authentication state and role, and likely redirect unauthorized users to `src/pages/Unauthorized.tsx`. This is the key boundary between public pages and dashboard-only pages.

4. **Public-facing pages**
   The public surface includes `Homepage`, `About`, `Features`, `FAQ`, `Pricing`, `Contact`, `Privacy`, `Terms`, `Tours`, `TourDetails`, `Booking`, plus `Login`, `Register`, `Verify`, and payment result pages (`Success`, `Fail`). These pages are mostly routed through a common layout and share a landing-page style UX rather than dashboard chrome.

5. **Role-based dashboard layouts**
   There are distinct layout shells for each role in `src/components/layout` and mirrored dashboard page shells under `src/pages/Dashboard/{Admin,Agent,User}`. Each role has its own **Navbar, Sidebar, and Footer**, which means the UI boundary is not just route-based but also layout-based. This is where the authenticated workspace is visually and functionally separated.

6. **Core wallet domain flows**
   The wallet application centers on **wallet balance and transaction operations**. User pages handle deposit, send money, withdraw money, transaction history, and profile management. Agent pages handle cash-in/cash-out on behalf of users and their own wallet actions. Admin pages manage users, agents, wallets, and transaction oversight. These flows are the main business paths that should dominate any architecture diagram.

7. **State management and server communication**
   The data layer is centered on **Redux Toolkit** with RTK Query-style APIs in `src/redux`. Important API slices include `auth.api.ts`, `walletApi.ts`, `profileApi.ts`, `adminApi.ts`, `dashboardApi.ts`, `booking.api.ts`, `tour.api.ts`, and `division.api.ts`. Requests are built on a custom Axios base layer in `src/redux/axiosBaseQuery.ts` and `src/lib/axios.ts`, with a shared store in `src/redux/store.ts`.

8. **Backend boundary**
   The frontend talks to a backend API configured through `VITE_BASE_URL` in the environment. The README indicates REST endpoints for authentication, wallet actions, transaction history, and admin management. So the architecture boundary is a classic **React client → HTTP API backend** model, with no local persistence layer beyond client state and auth/session handling.

9. **Authentication and role model**
   Auth is handled through Redux-backed APIs plus service wrappers in `src/services/authService.ts`, `src/services/userService.ts`, and `src/services/walleteService.ts`. Role constants live in `src/constants/role.ts`, and login/logout behavior is supported by hooks like `useLogout`. The key architectural concern is role-aware session state that drives both routing and menu visibility.

10. **Reusable UI and form infrastructure**
   Shared interaction pieces live under `src/components/ui` and include dialogs, tables, forms, inputs, selects, sheets, tooltips, and alerts. Higher-level reusable components such as `ProfileForm`, `SingleImageUploader`, `MultipleImageUploader`, and confirmation dialogs support multiple features across pages. This keeps feature pages thin and pushes interaction patterns into reusable modules.

11. **Theme and device responsiveness**
   The app supports dark/light mode via `ModeToggler`, `useTheme`, and the theme provider/context pair. Responsive behavior is also supported through `use-mobile` and mobile-oriented layout components. These are cross-cutting concerns rather than feature-specific code, so they sit beside routing and auth in the architecture.

12. **Feature modules and legacy/secondary domain code**
   There is a secondary feature set around **tour/division/admin content management** under `src/components/modules/Admin`, `src/components/modules/Tours`, and related pages like `AddTour`, `AddDivision`, and `AddTourType`. This looks like either a shared template layer or legacy domain code coexisting with the wallet product. For diagramming, treat it as a separate feature area adjacent to the wallet core, not the main business spine.

13. **Deployment/runtime tooling**
   The project is configured for Vite-based frontend builds, with deployment files such as `vercel.json` and `deploy.yml`. The app is therefore a static frontend artifact that depends on an external API service at runtime, rather than a server-rendered or monolithic backend app.

14. **Important diagram takeaway**
   The clearest architecture view is: **public marketing/auth pages → authenticated role-based dashboards → Redux/RTK Query + Axios data layer → remote wallet/admin API**. Around that core are shared UI primitives, theme/responsiveness concerns, and a smaller set of legacy tour-management modules.

Main entry points: [`src/redux/axiosBaseQuery.ts`](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/axiosBaseQuery.ts) (Axios base), [`src/redux/store.ts`](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/store.ts) (Redux store), [`src/pages/Homepage.tsx`](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/pages/Homepage.tsx) (Public pages), [`src/pages/Dashboard/Admin/AdminOverview.tsx`](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/pages/Dashboard/Admin/AdminOverview.tsx) (Admin dashboard)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_group_public["Public surface"]
  node_node_public_pages["Public pages<br/>landing/auth pages<br/>[Homepage.tsx]"]
end

subgraph group_group_dashboards["Role dashboards"]
  node_node_role_layouts["Role layouts<br/>layout shells<br/>[AdminLayout.tsx]"]
  node_node_dashboard_admin["Admin dashboard<br/>role workspace<br/>[AdminOverview.tsx]"]
  node_node_dashboard_agent["Agent dashboard<br/>role workspace<br/>[AgentOverview.tsx]"]
  node_node_dashboard_user["User dashboard<br/>role workspace<br/>[UserOverview.tsx]"]
end

subgraph group_group_data["Data layer"]
  node_node_wallet_api[("Wallet API<br/>rtk query<br/>[walletApi.ts]")]
  node_node_auth_api[("Auth API<br/>rtk query<br/>[auth.api.ts]")]
  node_node_profile_api[("Profile API<br/>rtk query<br/>[profileApi.ts]")]
  node_node_admin_api[("Admin API<br/>rtk query<br/>[adminApi.ts]")]
  node_node_dashboard_api[("Dashboard API<br/>rtk query<br/>[dashboardApi.ts]")]
  node_node_base_query["Axios base<br/>http client<br/>[axiosBaseQuery.ts]"]
  node_node_axios_lib["Axios client<br/>http client<br/>[axios.ts]"]
  node_node_store[("Redux store<br/>state store<br/>[store.ts]")]
  node_node_redux_hooks(("Redux hooks<br/>state hooks<br/>[hook.ts]"))
end

subgraph group_group_shared["Shared shell"]
  node_node_main(("main<br/>entrypoint<br/>[main.tsx]"))
  node_node_app_routes["App routes<br/>router shell<br/>[App.tsx]"]
  node_node_route_defs["Route map<br/>route config<br/>[index.tsx]"]
  node_node_protected{{"Protected route<br/>auth guard<br/>[ProtectedRoute.tsx]"}}
  node_node_with_auth{{"withAuth<br/>auth wrapper<br/>[withAuth.tsx]"}}
  node_node_generate_routes{{"Generate routes<br/>route helper<br/>[generateRoutes.ts]"}}
  node_node_theme_provider["Theme provider<br/>theme state<br/>[theme.provider.tsx]"]
  node_node_theme_context(("Theme context<br/>[theme.context.ts]"))
  node_node_common_layout["Common layout<br/>layout shell<br/>[CommonLayout.tsx]"]
  node_node_reusable_ui["UI primitives<br/>component library<br/>[button.tsx]"]
  node_node_forms_widgets["Form widgets<br/>shared components<br/>[ProfileForm.tsx]"]
end

subgraph group_group_domains["Secondary features"]
  node_node_tour_modules["Tour modules<br/>feature modules<br/>[TourFilters.tsx]"]
end

node_node_main -->|"wraps"| node_node_theme_provider
node_node_main -->|"mounts"| node_node_app_routes
node_node_app_routes -->|"uses"| node_node_route_defs
node_node_route_defs -->|"guards"| node_node_protected
node_node_route_defs -->|"wraps"| node_node_with_auth
node_node_route_defs -->|"builds"| node_node_generate_routes
node_node_protected -.->|"allows"| node_node_public_pages
node_node_protected -->|"permits"| node_node_dashboard_admin
node_node_protected -->|"permits"| node_node_dashboard_agent
node_node_protected -->|"permits"| node_node_dashboard_user
node_node_theme_provider -->|"provides"| node_node_theme_context
node_node_public_pages -->|"renders in"| node_node_common_layout
node_node_dashboard_admin -->|"renders in"| node_node_role_layouts
node_node_dashboard_agent -->|"renders in"| node_node_role_layouts
node_node_dashboard_user -->|"renders in"| node_node_role_layouts
node_node_dashboard_admin -->|"fetches"| node_node_admin_api
node_node_dashboard_admin -->|"fetches"| node_node_dashboard_api
node_node_dashboard_agent -->|"fetches"| node_node_wallet_api
node_node_dashboard_agent -->|"fetches"| node_node_profile_api
node_node_dashboard_user -->|"fetches"| node_node_wallet_api
node_node_dashboard_user -->|"fetches"| node_node_profile_api
node_node_public_pages -->|"fetches"| node_node_auth_api
node_node_public_pages -->|"requests"| node_node_base_query
node_node_wallet_api -->|"uses"| node_node_base_query
node_node_auth_api -->|"uses"| node_node_base_query
node_node_profile_api -->|"uses"| node_node_base_query
node_node_admin_api -->|"uses"| node_node_base_query
node_node_dashboard_api -->|"uses"| node_node_base_query
node_node_base_query -->|"wraps"| node_node_axios_lib
node_node_store -->|"exports"| node_node_redux_hooks
node_node_store -->|"registers"| node_node_auth_api
node_node_store -->|"registers"| node_node_wallet_api
node_node_store -->|"registers"| node_node_profile_api
node_node_store -->|"registers"| node_node_admin_api
node_node_store -->|"registers"| node_node_dashboard_api
node_node_public_pages -->|"uses"| node_node_reusable_ui
node_node_dashboard_user -->|"uses"| node_node_forms_widgets
node_node_dashboard_admin -->|"uses"| node_node_forms_widgets
node_node_tour_modules -->|"uses"| node_node_reusable_ui

click node_node_main "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/main.tsx"
click node_node_app_routes "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/App.tsx"
click node_node_route_defs "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/routes/index.tsx"
click node_node_protected "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/utils/ProtectedRoute.tsx"
click node_node_with_auth "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/utils/withAuth.tsx"
click node_node_generate_routes "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/utils/generateRoutes.ts"
click node_node_theme_provider "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/providers/theme.provider.tsx"
click node_node_theme_context "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/context/theme.context.ts"
click node_node_common_layout "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/components/layout/CommonLayout.tsx"
click node_node_role_layouts "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/components/layout/AdminLayout.tsx"
click node_node_dashboard_admin "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/pages/Dashboard/Admin/AdminOverview.tsx"
click node_node_dashboard_agent "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/pages/Dashboard/Agent/AgentOverview.tsx"
click node_node_dashboard_user "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/pages/Dashboard/User/UserOverview.tsx"
click node_node_public_pages "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/pages/Homepage.tsx"
click node_node_wallet_api "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/walletApi.ts"
click node_node_auth_api "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/features/auth/auth.api.ts"
click node_node_profile_api "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/profileApi.ts"
click node_node_admin_api "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/adminApi.ts"
click node_node_dashboard_api "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/dashboardApi.ts"
click node_node_base_query "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/axiosBaseQuery.ts"
click node_node_axios_lib "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/lib/axios.ts"
click node_node_store "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/store.ts"
click node_node_redux_hooks "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/hook.ts"
click node_node_reusable_ui "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/components/ui/button.tsx"
click node_node_forms_widgets "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/components/ProfileForm.tsx"
click node_node_tour_modules "https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/components/modules/Tours/TourFilters.tsx"

classDef toneNeutral fill:#f8fafc,stroke:#334155,stroke-width:1.5px,color:#0f172a
classDef toneBlue fill:#dbeafe,stroke:#2563eb,stroke-width:1.5px,color:#172554
classDef toneAmber fill:#fef3c7,stroke:#d97706,stroke-width:1.5px,color:#78350f
classDef toneMint fill:#dcfce7,stroke:#16a34a,stroke-width:1.5px,color:#14532d
classDef toneRose fill:#ffe4e6,stroke:#e11d48,stroke-width:1.5px,color:#881337
classDef toneIndigo fill:#e0e7ff,stroke:#4f46e5,stroke-width:1.5px,color:#312e81
classDef toneTeal fill:#ccfbf1,stroke:#0f766e,stroke-width:1.5px,color:#134e4a
class node_node_public_pages toneBlue
class node_node_role_layouts,node_node_dashboard_admin,node_node_dashboard_agent,node_node_dashboard_user toneAmber
class node_node_wallet_api,node_node_auth_api,node_node_profile_api,node_node_admin_api,node_node_dashboard_api,node_node_base_query,node_node_axios_lib,node_node_store,node_node_redux_hooks toneMint
class node_node_main,node_node_app_routes,node_node_route_defs,node_node_protected,node_node_with_auth,node_node_generate_routes,node_node_theme_provider,node_node_theme_context,node_node_common_layout,node_node_reusable_ui,node_node_forms_widgets toneRose
class node_node_tour_modules toneIndigo
```

## Components

### Public surface

Landing, auth, and public content routes.

- [Public pages](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/pages/Homepage.tsx): landing/auth pages · Homepage, marketing pages, auth pages, and payment result pages. · `src/pages/Homepage.tsx`

### Role dashboards

Authenticated workspaces split by user role.

- [Role layouts](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/components/layout/AdminLayout.tsx): layout shells · Admin, agent, and user dashboard layout shells. · `src/components/layout/AdminLayout.tsx`
- [Admin dashboard](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/pages/Dashboard/Admin/AdminOverview.tsx): role workspace · Admin overview, users, agents, wallets, and transactions. · `src/pages/Dashboard/Admin/AdminOverview.tsx`
- [Agent dashboard](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/pages/Dashboard/Agent/AgentOverview.tsx): role workspace · Agent cash-in, cash-out, overview, and transactions. · `src/pages/Dashboard/Agent/AgentOverview.tsx`
- [User dashboard](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/pages/Dashboard/User/UserOverview.tsx): role workspace · User deposit, send, withdraw, history, and profile flows. · `src/pages/Dashboard/User/UserOverview.tsx`

### Data layer

Redux, API slices, axios base, and service wrappers.

- [Wallet API](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/walletApi.ts): rtk query · Wallet and transaction endpoints for the main business flow. · `src/redux/walletApi.ts`
- [Auth API](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/features/auth/auth.api.ts): rtk query · Authentication and session-related endpoints. · `src/redux/features/auth/auth.api.ts`
- [Profile API](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/profileApi.ts): rtk query · Profile retrieval and updates. · `src/redux/profileApi.ts`
- [Admin API](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/adminApi.ts): rtk query · Admin management endpoints for users, agents, and oversight. · `src/redux/adminApi.ts`
- [Dashboard API](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/dashboardApi.ts): rtk query · Dashboard summary and role-specific aggregates. · `src/redux/dashboardApi.ts`
- [Axios base](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/axiosBaseQuery.ts): http client · Custom base query backed by Axios. · `src/redux/axiosBaseQuery.ts`
- [Axios client](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/lib/axios.ts): http client · Shared Axios configuration and instance helpers. · `src/lib/axios.ts`
- [Redux store](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/store.ts): state store · Central Redux Toolkit store and middleware setup. · `src/redux/store.ts`
- [Redux hooks](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/redux/hook.ts): state hooks · Typed hooks for dispatch and selector usage. · `src/redux/hook.ts`

### Shared shell

Cross-cutting layout, theme, and reusable UI.

- [main](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/main.tsx): entrypoint · Bootstraps the React app and mounts global providers. · `src/main.tsx`
- [App routes](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/App.tsx): router shell · Top-level app composition and route wiring. · `src/App.tsx`
- [Route map](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/routes/index.tsx): route config · Central route definitions and composition. · `src/routes/index.tsx`
- [Protected route](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/utils/ProtectedRoute.tsx): auth guard · Role- and auth-based route gating. · `src/utils/ProtectedRoute.tsx`
- [withAuth](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/utils/withAuth.tsx): auth wrapper · Higher-order auth/role wrapper for pages and routes. · `src/utils/withAuth.tsx`
- [Generate routes](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/utils/generateRoutes.ts): route helper · Builds route structures from role and auth state. · `src/utils/generateRoutes.ts`
- [Theme provider](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/providers/theme.provider.tsx): theme state · Provides light/dark theme context to the app. · `src/providers/theme.provider.tsx`
- [Theme context](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/context/theme.context.ts): context · Theme state and related context wiring. · `src/context/theme.context.ts`
- [Common layout](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/components/layout/CommonLayout.tsx): layout shell · Shared public-facing layout chrome. · `src/components/layout/CommonLayout.tsx`
- [UI primitives](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/components/ui/button.tsx): component library · Shared dialog, table, form, input, and navigation primitives. · `src/components/ui/button.tsx`
- [Form widgets](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/components/ProfileForm.tsx): shared components · Reusable profile forms, uploaders, and confirmation dialogs. · `src/components/ProfileForm.tsx`

### Secondary features

Tour and division content-management modules.

- [Tour modules](https://github.com/irfan-chowdhury/ph-level2-b5-assignment-6-frontend/blob/main/src/components/modules/Tours/TourFilters.tsx): feature modules · Tour and division management modules used by secondary content flows. · `src/components/modules/Tours/TourFilters.tsx`

## Connections

- main → Theme provider: wraps · The app bootstraps global theme handling.
- main → App routes: mounts · Main mounts the application shell and routing.
- App routes → Route map: uses · App composition is driven by route definitions.
- Route map → Protected route: guards · Protected routes enforce auth and role access.
- Route map → withAuth: wraps · Route entries are wrapped with auth helpers.
- Route map → Generate routes: builds · Dynamic route structures are generated from shared helpers.
- Protected route → Public pages: allows · Public pages remain accessible without dashboard auth.
- Protected route → Admin dashboard: permits · Admin workspace is behind role checks.
- Protected route → Agent dashboard: permits · Agent workspace is behind role checks.
- Protected route → User dashboard: permits · User workspace is behind role checks.
- Theme provider → Theme context: provides · Provider supplies theme state through context.
- Public pages → Common layout: renders in · Public pages share common marketing/auth layout.
- Admin dashboard → Role layouts: renders in · Admin workspace uses its role shell.
- Agent dashboard → Role layouts: renders in · Agent workspace uses its role shell.
- User dashboard → Role layouts: renders in · User workspace uses its role shell.
- Admin dashboard → Admin API: fetches · Admin screens consume admin management endpoints.
- Admin dashboard → Dashboard API: fetches · Admin screens also use dashboard aggregates.
- Agent dashboard → Wallet API: fetches · Agent cash flows depend on wallet actions.
- Agent dashboard → Profile API: fetches · Agent profile views and edits use profile data.
- User dashboard → Wallet API: fetches · User money movement depends on wallet endpoints.
- User dashboard → Profile API: fetches · User profile pages use profile data.
- Public pages → Auth API: fetches · Login, register, and verify pages use auth endpoints.
- Public pages → Axios base: requests · Public and authenticated pages call the shared HTTP layer.
- Wallet API → Axios base: uses · Wallet data operations run through the base query.
- Auth API → Axios base: uses · Auth requests run through the shared HTTP layer.
- Profile API → Axios base: uses · Profile requests run through the shared HTTP layer.
- Admin API → Axios base: uses · Admin requests run through the shared HTTP layer.
- Dashboard API → Axios base: uses · Dashboard queries use the shared HTTP layer.
- Axios base → Axios client: wraps · Axios configuration powers the custom base query.
- Redux store → Redux hooks: exports · Typed hooks are built around the shared store.
- Redux store → Auth API: registers · Auth API slice is part of the store.
- Redux store → Wallet API: registers · Wallet API slice is part of the store.
- Redux store → Profile API: registers · Profile API slice is part of the store.
- Redux store → Admin API: registers · Admin API slice is part of the store.
- Redux store → Dashboard API: registers · Dashboard API slice is part of the store.
- Public pages → UI primitives: uses · Public pages are composed from shared primitives.
- User dashboard → Form widgets: uses · User forms and upload flows rely on reusable widgets.
- Admin dashboard → Form widgets: uses · Admin forms and dialogs reuse shared widgets.
- Tour modules → UI primitives: uses · Tour management UI is built on the shared primitive library.