# nhan-nguyen-huu/hrm-cms-frontend architecture

> Architecture diagram of the GitHub repository nhan-nguyen-huu/hrm-cms-frontend, generated by GitDiagram from its file tree, README and a sample of source files (last updated 2026-09-25). It is an AI-made overview: check details against the source.

- Interactive diagram: https://gitdiagram.com/nhan-nguyen-huu/hrm-cms-frontend
- Repository: https://github.com/nhan-nguyen-huu/hrm-cms-frontend

## Overview

This repository is an HRM/CMS React Router frontend template, with an employee-management dashboard as its evident product workflow. The home route redirects into the dashboard employee-profile route; dashboard and employee-management pages, reusable table/form/filter components, and shared app providers support that experience. The tree documents no backend API, persistence, or deeper page behavior, so those flows are not inferred. The README describes the project as a starter template; unsampled feature wiring is represented only where the tree establishes the subsystem.

Main entry points: [`app/routes.ts`](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/routes.ts) (Route map), [`app/routes/dashboard/employee-mgt/index.tsx`](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/routes/dashboard/employee-mgt/index.tsx) (Employee management), [`app/routes/dashboard/employee-mgt/employee-profile/index.tsx`](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/routes/dashboard/employee-mgt/employee-profile/index.tsx) (Employee profile), [`app/components/ui/button.tsx`](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/ui/button.tsx) (UI primitives)

## Diagram (Mermaid)

```mermaid
flowchart TD

subgraph group_navigation["Routing and layouts"]
  node_routes["Route map<br/>[routes.ts]"]
  node_home["Home redirect<br/>[main.layout.tsx]"]
  node_dashboard_layout["Dashboard layout"]
  node_dashboard_page["Dashboard page<br/>[index.tsx]"]
  node_employee_layout["Employee layout"]
end

subgraph group_employee["Employee management"]
  node_employee_list["Employee management<br/>[index.tsx]"]
  node_employee_profile["Employee profile<br/>[index.tsx]"]
  node_employee_columns["Employee columns<br/>[index.tsx]"]
  node_employee_tags["Employee tags<br/>[employee-info.tsx]"]
  node_status_tag["Account status"]
end

subgraph group_components["Reusable interface"]
  node_table["Custom table<br/>[index.tsx]"]
  node_pagination["Pagination"]
  node_filter["Filter panel<br/>[filter-panel.tsx]"]
  node_forms["Form fields<br/>[form-field.tsx]"]
  node_image_preview["Image preview<br/>[index.tsx]"]
  node_preview_modal["Preview modal"]
  node_preview_state["Preview controls"]
  node_sidebar["App sidebar<br/>[app-sidebar.tsx]"]
  node_base_ui["UI primitives<br/>[button.tsx]"]
end

subgraph group_platform["Application platform"]
  node_root["App root<br/>[root.tsx]"]
  node_providers["App providers<br/>[index.tsx]"]
  node_query["Query provider<br/>[query-provider.tsx]"]
  node_i18n["Internationalization<br/>[i18n-provider.tsx]"]
  node_theme["Theme provider<br/>[theme-provider.tsx]"]
  node_constants["Shared constants<br/>[data.constant.ts]"]
end

node_user(("User"))

node_user -->|"opens route"| node_routes
node_routes -->|"maps home"| node_home
node_routes -->|"maps dashboard"| node_dashboard_layout
node_routes -->|"maps index"| node_dashboard_page
node_routes -->|"maps employee area"| node_employee_layout
node_routes -->|"maps list"| node_employee_list
node_routes -->|"maps profile"| node_employee_profile
node_home -->|"redirects to"| node_employee_profile
node_dashboard_layout -->|"wraps route"| node_dashboard_page
node_employee_layout -->|"wraps route"| node_employee_list
node_employee_layout -->|"wraps route"| node_employee_profile
node_employee_list -->|"renders table"| node_table
node_employee_list -->|"renders filters"| node_filter
node_employee_list -->|"renders controls"| node_pagination
node_employee_list -->|"uses columns"| node_employee_columns
node_employee_profile -->|"renders fields"| node_forms
node_employee_profile -->|"shows images"| node_image_preview
node_employee_columns -->|"renders info"| node_employee_tags
node_employee_columns -->|"renders status"| node_status_tag
node_image_preview -->|"opens modal"| node_preview_modal
node_preview_modal -->|"updates state"| node_preview_state
node_preview_modal -->|"uses controls"| node_base_ui
node_table -->|"uses primitives"| node_base_ui
node_pagination -->|"uses primitives"| node_base_ui
node_forms -->|"uses primitives"| node_base_ui
node_sidebar -->|"uses primitives"| node_base_ui
node_root -->|"wraps app"| node_providers
node_providers -->|"installs provider"| node_query
node_providers -->|"installs provider"| node_i18n
node_providers -->|"installs provider"| node_theme

click node_routes "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/routes.ts"
click node_home "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/layouts/main.layout.tsx"
click node_dashboard_layout "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/layouts/dashboard.layout.tsx"
click node_dashboard_page "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/routes/dashboard/index.tsx"
click node_employee_layout "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/layouts/employee-mgt.layout.tsx"
click node_employee_list "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/routes/dashboard/employee-mgt/index.tsx"
click node_employee_profile "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/routes/dashboard/employee-mgt/employee-profile/index.tsx"
click node_employee_columns "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/helpers/columns/employee-mgt-column/index.tsx"
click node_employee_tags "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/tags/employee-info.tsx"
click node_status_tag "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/tags/employee-account-status.tsx"
click node_table "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/customs/table-custom/index.tsx"
click node_pagination "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/customs/pagination-custom.tsx"
click node_filter "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/common/filter-panel.tsx"
click node_forms "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/forms/form-field.tsx"
click node_image_preview "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/customs/image-custom/index.tsx"
click node_preview_modal "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/customs/image-custom/components/preview-image-modal.tsx"
click node_preview_state "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/hooks/use-preview-image.ts"
click node_sidebar "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/sidebar/app-sidebar.tsx"
click node_base_ui "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/ui/button.tsx"
click node_root "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/root.tsx"
click node_providers "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/providers/index.tsx"
click node_query "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/providers/query-provider.tsx"
click node_i18n "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/providers/i18n-provider.tsx"
click node_theme "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/providers/theme-provider.tsx"
click node_constants "https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/shared/constants/data.constant.ts"

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_routes,node_home,node_dashboard_layout,node_dashboard_page,node_employee_layout,node_user toneBlue
class node_employee_list,node_employee_profile,node_employee_columns,node_employee_tags,node_status_tag toneAmber
class node_table,node_pagination,node_filter,node_forms,node_image_preview,node_preview_modal,node_preview_state,node_sidebar,node_base_ui toneMint
class node_root,node_providers,node_query,node_i18n,node_theme,node_constants toneRose
```

## Components

### Routing and layouts

- [Route map](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/routes.ts): `app/routes.ts`
- [Home redirect](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/layouts/main.layout.tsx): `app/layouts/main.layout.tsx`
- [Dashboard layout](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/layouts/dashboard.layout.tsx): `app/layouts/dashboard.layout.tsx`
- [Dashboard page](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/routes/dashboard/index.tsx): `app/routes/dashboard/index.tsx`
- [Employee layout](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/layouts/employee-mgt.layout.tsx): `app/layouts/employee-mgt.layout.tsx`

### Employee management

- [Employee management](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/routes/dashboard/employee-mgt/index.tsx): `app/routes/dashboard/employee-mgt/index.tsx`
- [Employee profile](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/routes/dashboard/employee-mgt/employee-profile/index.tsx): `app/routes/dashboard/employee-mgt/employee-profile/index.tsx`
- [Employee columns](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/helpers/columns/employee-mgt-column/index.tsx): `app/helpers/columns/employee-mgt-column/index.tsx`
- [Employee tags](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/tags/employee-info.tsx): `app/components/tags/employee-info.tsx`
- [Account status](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/tags/employee-account-status.tsx): `app/components/tags/employee-account-status.tsx`

### Reusable interface

- [Custom table](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/customs/table-custom/index.tsx): `app/components/customs/table-custom/index.tsx`
- [Pagination](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/customs/pagination-custom.tsx): `app/components/customs/pagination-custom.tsx`
- [Filter panel](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/common/filter-panel.tsx): `app/components/common/filter-panel.tsx`
- [Form fields](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/forms/form-field.tsx): `app/components/forms/form-field.tsx`
- [Image preview](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/customs/image-custom/index.tsx): `app/components/customs/image-custom/index.tsx`
- [Preview modal](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/customs/image-custom/components/preview-image-modal.tsx): `app/components/customs/image-custom/components/preview-image-modal.tsx`
- [Preview controls](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/hooks/use-preview-image.ts): `app/hooks/use-preview-image.ts`
- [App sidebar](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/sidebar/app-sidebar.tsx): `app/components/sidebar/app-sidebar.tsx`
- [UI primitives](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/components/ui/button.tsx): `app/components/ui/button.tsx`

### Application platform

- [App root](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/root.tsx): `app/root.tsx`
- [App providers](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/providers/index.tsx): `app/providers/index.tsx`
- [Query provider](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/providers/query-provider.tsx): `app/providers/query-provider.tsx`
- [Internationalization](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/providers/i18n-provider.tsx): `app/providers/i18n-provider.tsx`
- [Theme provider](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/providers/theme-provider.tsx): `app/providers/theme-provider.tsx`
- [Shared constants](https://github.com/nhan-nguyen-huu/hrm-cms-frontend/blob/master/app/shared/constants/data.constant.ts): `app/shared/constants/data.constant.ts`

### Other components

- **User**

## Connections

- User → Route map: opens route
- Route map → Home redirect: maps home
- Route map → Dashboard layout: maps dashboard
- Route map → Dashboard page: maps index
- Route map → Employee layout: maps employee area
- Route map → Employee management: maps list
- Route map → Employee profile: maps profile
- Home redirect → Employee profile: redirects to
- Dashboard layout → Dashboard page: wraps route
- Employee layout → Employee management: wraps route
- Employee layout → Employee profile: wraps route
- Employee management → Custom table: renders table
- Employee management → Filter panel: renders filters
- Employee management → Pagination: renders controls
- Employee management → Employee columns: uses columns
- Employee profile → Form fields: renders fields
- Employee profile → Image preview: shows images
- Employee columns → Employee tags: renders info
- Employee columns → Account status: renders status
- Image preview → Preview modal: opens modal
- Preview modal → Preview controls: updates state
- Preview modal → UI primitives: uses controls
- Custom table → UI primitives: uses primitives
- Pagination → UI primitives: uses primitives
- Form fields → UI primitives: uses primitives
- App sidebar → UI primitives: uses primitives
- App root → App providers: wraps app
- App providers → Query provider: installs provider
- App providers → Internationalization: installs provider
- App providers → Theme provider: installs provider