# nurulislam17/fin_admin architecture

> Architecture diagram of the GitHub repository nurulislam17/fin_admin, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-11-11). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nurulislam17/fin_admin
- Repository: https://github.com/nurulislam17/fin_admin

## Overview

This is a React frontend for an office-management dashboard: users sign in, enter protected dashboard routes, and manage users, customers, roles, permissions, and profiles. Pages call service modules, which use a shared Axios client to communicate with an API server; authentication state is held in context and persisted in local storage. The README describes only a Vite template, so product capabilities are inferred from the source tree and sampled references. Some links to unsampled pages and services are therefore omitted.

Main entry points: [`src/routes/AppRoutes.jsx`](https://github.com/nurulislam17/fin_admin/blob/master/src/routes/AppRoutes.jsx) (Route table), [`src/services/api.js`](https://github.com/nurulislam17/fin_admin/blob/master/src/services/api.js) (HTTP client), [`src/pages/user/UserList.jsx`](https://github.com/nurulislam17/fin_admin/blob/master/src/pages/user/UserList.jsx) (Office users), [`src/context/AuthContext.jsx`](https://github.com/nurulislam17/fin_admin/blob/master/src/context/AuthContext.jsx) (Auth context)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_app["Application shell"]
  node_app["React app<br/>[App.jsx]"]
  node_routes["Route table<br/>[AppRoutes.jsx]"]
  node_layout["Dashboard layout"]
end

subgraph group_identity["Identity and access"]
  node_authgate["Protected route<br/>[ProtectedRoute.jsx]"]
  node_authstate["Auth context<br/>[AuthContext.jsx]"]
  node_authhook["Auth hook<br/>[useAuth.js]"]
  node_login["Login page<br/>[Login.jsx]"]
  node_profile["Profile page<br/>[ProfileView.jsx]"]
end

subgraph group_operations["Office operations"]
  node_dashboard["Dashboard<br/>[Dashboard.jsx]"]
  node_customers["Customer list<br/>[CustomerList.jsx]"]
  node_customerform["Customer form<br/>[AddModal.jsx]"]
  node_accounts["Account list<br/>[AccountList.jsx]"]
  node_users["Office users<br/>[UserList.jsx]"]
  node_userform["User editor<br/>[OfficeUserAdd.jsx]"]
  node_userdetails["User details"]
end

subgraph group_admin["Administration"]
  node_roles["Roles page<br/>[Roles.jsx]"]
  node_permissions["Permissions page<br/>[Permissions.jsx]"]
  node_manageroles["Role permissions<br/>[ManageRoles.jsx]"]
end

subgraph group_services["API services"]
  node_authservice["Auth service<br/>[authService.js]"]
  node_userservice["User service<br/>[userService.js]"]
  node_customerservice["Customer service<br/>[customerService.js]"]
  node_roleservice["Role service<br/>[roleService.js]"]
  node_permissionservice["Permission service"]
  node_activityservice["Activity service"]
  node_apiclient["HTTP client<br/>[api.js]"]
end

node_user(("Dashboard user"))
node_backend{{"API server"}}

node_user -->|"opens"| node_app
node_app -->|"renders"| node_routes
node_app -->|"provides auth"| node_authstate
node_routes -->|"routes to"| node_login
node_routes -->|"guards routes"| node_authgate
node_routes -->|"wraps pages"| node_layout
node_routes -->|"routes to"| node_dashboard
node_routes -->|"routes to"| node_roles
node_routes -->|"routes to"| node_permissions
node_routes -->|"routes to"| node_manageroles
node_routes -->|"routes to"| node_users
node_routes -->|"routes to"| node_profile
node_routes -->|"routes to"| node_customers
node_routes -->|"routes to"| node_accounts
node_authgate -->|"reads auth"| node_authhook
node_authhook -->|"reads context"| node_authstate
node_login -->|"uses auth"| node_authhook
node_authstate -->|"requests login"| node_authservice
node_profile -->|"reads profile state"| node_authstate
node_dashboard -->|"loads activity"| node_activityservice
node_customers -->|"renders form"| node_customerform
node_customers -->|"loads customers"| node_customerservice
node_customerform -->|"creates customer"| node_customerservice
node_users -->|"manages users"| node_userservice
node_users -->|"loads roles"| node_roleservice
node_users -->|"renders editor"| node_userform
node_users -->|"renders details"| node_userdetails
node_userform -->|"creates user"| node_userservice
node_manageroles -->|"loads roles"| node_roleservice
node_manageroles -->|"loads and saves grants"| node_permissionservice
node_authservice -->|"sends requests"| node_apiclient
node_userservice -->|"sends requests"| node_apiclient
node_customerservice -->|"sends requests"| node_apiclient
node_roleservice -->|"sends requests"| node_apiclient
node_permissionservice -->|"sends requests"| node_apiclient
node_activityservice -->|"sends requests"| node_apiclient
node_apiclient -->|"HTTP requests"| node_backend

click node_app "https://github.com/nurulislam17/fin_admin/blob/master/src/App.jsx"
click node_routes "https://github.com/nurulislam17/fin_admin/blob/master/src/routes/AppRoutes.jsx"
click node_layout "https://github.com/nurulislam17/fin_admin/blob/master/src/components/layout/DashboardLayout.jsx"
click node_authgate "https://github.com/nurulislam17/fin_admin/blob/master/src/components/auth/ProtectedRoute.jsx"
click node_authstate "https://github.com/nurulislam17/fin_admin/blob/master/src/context/AuthContext.jsx"
click node_authhook "https://github.com/nurulislam17/fin_admin/blob/master/src/hooks/useAuth.js"
click node_login "https://github.com/nurulislam17/fin_admin/blob/master/src/pages/auth/Login.jsx"
click node_profile "https://github.com/nurulislam17/fin_admin/blob/master/src/pages/profile/ProfileView.jsx"
click node_dashboard "https://github.com/nurulislam17/fin_admin/blob/master/src/pages/dashboard/Dashboard.jsx"
click node_customers "https://github.com/nurulislam17/fin_admin/blob/master/src/pages/customers/CustomerList.jsx"
click node_customerform "https://github.com/nurulislam17/fin_admin/blob/master/src/components/customer/AddModal.jsx"
click node_accounts "https://github.com/nurulislam17/fin_admin/blob/master/src/pages/accounts/AccountList.jsx"
click node_users "https://github.com/nurulislam17/fin_admin/blob/master/src/pages/user/UserList.jsx"
click node_userform "https://github.com/nurulislam17/fin_admin/blob/master/src/components/user/OfficeUserAdd.jsx"
click node_userdetails "https://github.com/nurulislam17/fin_admin/blob/master/src/components/user/OfficeUserDetailsModal.jsx"
click node_roles "https://github.com/nurulislam17/fin_admin/blob/master/src/pages/roles/Roles.jsx"
click node_permissions "https://github.com/nurulislam17/fin_admin/blob/master/src/pages/permissions/Permissions.jsx"
click node_manageroles "https://github.com/nurulislam17/fin_admin/blob/master/src/pages/permissions/ManageRoles.jsx"
click node_authservice "https://github.com/nurulislam17/fin_admin/blob/master/src/services/authService.js"
click node_userservice "https://github.com/nurulislam17/fin_admin/blob/master/src/services/userService.js"
click node_customerservice "https://github.com/nurulislam17/fin_admin/blob/master/src/services/customerService.js"
click node_roleservice "https://github.com/nurulislam17/fin_admin/blob/master/src/services/roleService.js"
click node_permissionservice "https://github.com/nurulislam17/fin_admin/blob/master/src/services/permissionService.js"
click node_activityservice "https://github.com/nurulislam17/fin_admin/blob/master/src/services/activitylogService.js"
click node_apiclient "https://github.com/nurulislam17/fin_admin/blob/master/src/services/api.js"

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_app,node_routes,node_layout,node_user toneBlue
class node_authgate,node_authstate,node_authhook,node_login,node_profile toneAmber
class node_dashboard,node_customers,node_customerform,node_accounts,node_users,node_userform,node_userdetails,node_backend toneMint
class node_roles,node_permissions,node_manageroles toneRose
class node_authservice,node_userservice,node_customerservice,node_roleservice,node_permissionservice,node_activityservice,node_apiclient toneIndigo
```

## Components

### Application shell

- [React app](https://github.com/nurulislam17/fin_admin/blob/master/src/App.jsx): `src/App.jsx`
- [Route table](https://github.com/nurulislam17/fin_admin/blob/master/src/routes/AppRoutes.jsx): `src/routes/AppRoutes.jsx`
- [Dashboard layout](https://github.com/nurulislam17/fin_admin/blob/master/src/components/layout/DashboardLayout.jsx): `src/components/layout/DashboardLayout.jsx`

### Identity and access

- [Protected route](https://github.com/nurulislam17/fin_admin/blob/master/src/components/auth/ProtectedRoute.jsx): `src/components/auth/ProtectedRoute.jsx`
- [Auth context](https://github.com/nurulislam17/fin_admin/blob/master/src/context/AuthContext.jsx): `src/context/AuthContext.jsx`
- [Auth hook](https://github.com/nurulislam17/fin_admin/blob/master/src/hooks/useAuth.js): `src/hooks/useAuth.js`
- [Login page](https://github.com/nurulislam17/fin_admin/blob/master/src/pages/auth/Login.jsx): `src/pages/auth/Login.jsx`
- [Profile page](https://github.com/nurulislam17/fin_admin/blob/master/src/pages/profile/ProfileView.jsx): `src/pages/profile/ProfileView.jsx`

### Office operations

- [Dashboard](https://github.com/nurulislam17/fin_admin/blob/master/src/pages/dashboard/Dashboard.jsx): `src/pages/dashboard/Dashboard.jsx`
- [Customer list](https://github.com/nurulislam17/fin_admin/blob/master/src/pages/customers/CustomerList.jsx): `src/pages/customers/CustomerList.jsx`
- [Customer form](https://github.com/nurulislam17/fin_admin/blob/master/src/components/customer/AddModal.jsx): `src/components/customer/AddModal.jsx`
- [Account list](https://github.com/nurulislam17/fin_admin/blob/master/src/pages/accounts/AccountList.jsx): `src/pages/accounts/AccountList.jsx`
- [Office users](https://github.com/nurulislam17/fin_admin/blob/master/src/pages/user/UserList.jsx): `src/pages/user/UserList.jsx`
- [User editor](https://github.com/nurulislam17/fin_admin/blob/master/src/components/user/OfficeUserAdd.jsx): `src/components/user/OfficeUserAdd.jsx`
- [User details](https://github.com/nurulislam17/fin_admin/blob/master/src/components/user/OfficeUserDetailsModal.jsx): `src/components/user/OfficeUserDetailsModal.jsx`

### Administration

- [Roles page](https://github.com/nurulislam17/fin_admin/blob/master/src/pages/roles/Roles.jsx): `src/pages/roles/Roles.jsx`
- [Permissions page](https://github.com/nurulislam17/fin_admin/blob/master/src/pages/permissions/Permissions.jsx): `src/pages/permissions/Permissions.jsx`
- [Role permissions](https://github.com/nurulislam17/fin_admin/blob/master/src/pages/permissions/ManageRoles.jsx): `src/pages/permissions/ManageRoles.jsx`

### API services

- [Auth service](https://github.com/nurulislam17/fin_admin/blob/master/src/services/authService.js): `src/services/authService.js`
- [User service](https://github.com/nurulislam17/fin_admin/blob/master/src/services/userService.js): `src/services/userService.js`
- [Customer service](https://github.com/nurulislam17/fin_admin/blob/master/src/services/customerService.js): `src/services/customerService.js`
- [Role service](https://github.com/nurulislam17/fin_admin/blob/master/src/services/roleService.js): `src/services/roleService.js`
- [Permission service](https://github.com/nurulislam17/fin_admin/blob/master/src/services/permissionService.js): `src/services/permissionService.js`
- [Activity service](https://github.com/nurulislam17/fin_admin/blob/master/src/services/activitylogService.js): `src/services/activitylogService.js`
- [HTTP client](https://github.com/nurulislam17/fin_admin/blob/master/src/services/api.js): `src/services/api.js`

### Other components

- **Dashboard user**
- **API server**

## Connections

- Dashboard user → React app: opens
- React app → Route table: renders (evidence: `src/App.jsx`)
- React app → Auth context: provides auth (evidence: `src/App.jsx`)
- Route table → Login page: routes to (evidence: `src/routes/AppRoutes.jsx`)
- Route table → Protected route: guards routes (evidence: `src/routes/AppRoutes.jsx`)
- Route table → Dashboard layout: wraps pages (evidence: `src/routes/AppRoutes.jsx`)
- Route table → Dashboard: routes to (evidence: `src/routes/AppRoutes.jsx`)
- Route table → Roles page: routes to (evidence: `src/routes/AppRoutes.jsx`)
- Route table → Permissions page: routes to (evidence: `src/routes/AppRoutes.jsx`)
- Route table → Role permissions: routes to (evidence: `src/routes/AppRoutes.jsx`)
- Route table → Office users: routes to (evidence: `src/routes/AppRoutes.jsx`)
- Route table → Profile page: routes to (evidence: `src/routes/AppRoutes.jsx`)
- Route table → Customer list: routes to (evidence: `src/routes/AppRoutes.jsx`)
- Route table → Account list: routes to (evidence: `src/routes/AppRoutes.jsx`)
- Protected route → Auth hook: reads auth (evidence: `src/components/auth/ProtectedRoute.jsx`)
- Auth hook → Auth context: reads context (evidence: `src/hooks/useAuth.js`)
- Login page → Auth hook: uses auth (evidence: `src/pages/auth/Login.jsx`)
- Auth context → Auth service: requests login (evidence: `src/context/AuthContext.jsx`)
- Profile page → Auth context: reads profile state (evidence: `src/pages/profile/ProfileView.jsx`)
- Dashboard → Activity service: loads activity (evidence: `src/pages/dashboard/Dashboard.jsx`)
- Customer list → Customer form: renders form (evidence: `src/pages/customers/CustomerList.jsx`)
- Customer list → Customer service: loads customers (evidence: `src/pages/customers/CustomerList.jsx`)
- Customer form → Customer service: creates customer (evidence: `src/components/customer/AddModal.jsx`)
- Office users → User service: manages users (evidence: `src/pages/user/UserList.jsx`)
- Office users → Role service: loads roles (evidence: `src/pages/user/UserList.jsx`)
- Office users → User editor: renders editor (evidence: `src/pages/user/UserList.jsx`)
- Office users → User details: renders details (evidence: `src/pages/user/UserList.jsx`)
- User editor → User service: creates user (evidence: `src/components/user/OfficeUserAdd.jsx`)
- Role permissions → Role service: loads roles (evidence: `src/pages/permissions/ManageRoles.jsx`)
- Role permissions → Permission service: loads and saves grants (evidence: `src/pages/permissions/ManageRoles.jsx`)
- Auth service → HTTP client: sends requests (evidence: `src/services/authService.js`)
- User service → HTTP client: sends requests (evidence: `src/services/userService.js`)
- Customer service → HTTP client: sends requests (evidence: `src/services/customerService.js`)
- Role service → HTTP client: sends requests (evidence: `src/services/roleService.js`)
- Permission service → HTTP client: sends requests (evidence: `src/services/permissionService.js`)
- Activity service → HTTP client: sends requests (evidence: `src/services/activitylogService.js`)
- HTTP client → API server: HTTP requests (evidence: `src/services/api.js`)