How nhan-nguyen-huu/hrm-cms-frontend works
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: routes.ts Route map · employee-mgt/index.tsx Employee management · employee-profile/index.tsx Employee profile · button.tsx UI primitives
Components 26
Routing and layouts
- Route map
app/routes.ts - Home redirect
app/layouts/main.layout.tsx - Dashboard layout
app/layouts/dashboard.layout.tsx - Dashboard page
app/routes/dashboard/index.tsx - Employee layout
app/layouts/employee-mgt.layout.tsx
Employee management
- Employee management
app/routes/dashboard/employee-mgt/index.tsx - Employee profile
app/routes/dashboard/employee-mgt/employee-profile/index.tsx - Employee columns
app/helpers/columns/employee-mgt-column/index.tsx - Employee tags
app/components/tags/employee-info.tsx - Account status
app/components/tags/employee-account-status.tsx
Reusable interface
- Custom table
app/components/customs/table-custom/index.tsx - Pagination
app/components/customs/pagination-custom.tsx - Filter panel
app/components/common/filter-panel.tsx - Form fields
app/components/forms/form-field.tsx - Image preview
app/components/customs/image-custom/index.tsx - Preview modal
app/components/customs/image-custom/components/preview-image-modal.tsx - Preview controls
app/hooks/use-preview-image.ts - App sidebar
app/components/sidebar/app-sidebar.tsx - UI primitives
app/components/ui/button.tsx
Application platform
- App root
app/root.tsx - App providers
app/providers/index.tsx - Query provider
app/providers/query-provider.tsx - Internationalization
app/providers/i18n-provider.tsx - Theme provider
app/providers/theme-provider.tsx - Shared constants
app/shared/constants/data.constant.ts
Other components
- User
Connections 30
- 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