Give me a admin dashboard page which manages employees HR information and work-hours It should use react version 19
Major functions would be following: 1.employees total list
- get a list of all employees and HR information.
- view how many employees are in penalty
- API: [GET] /employees/
- employee details
- get a employee's Hr information details and work-records
- API : [GET] /employees/{id}
- employee Create / Update / Delete
- API : [POST] /employees/ , [PUT] /employees/{employee_id} , [DELETE]/employees/{employee_id}
- work-records view
- view list of work records and statistical graph
- [GET] /work-records/
- work-records Create / Update / Delete
- API : [POST] /work-records/ , [PUT] /work-records/{record_id} , [DELETE] /work-records/{record_id}
- alarm histiory view
- view list of alarm sent
Sample data of entities would be like following: Employee : { "name": "string", "email": "string", "department": "string", "position": "string", "is_admin": false, "id": 0, "joined_at": "2025-06-18", "penalty_start": "2025-06-18T05:49:08.561Z" }
Work-record: { "employee_id": 0, "work_date": "2025-06-18", "start_time": "2025-06-18T05:51:05.250Z", "end_time": "2025-06-18T05:51:05.250Z", "work_hours": 0, "description": "string", "id": 0 }
Alarm : { "id" : 0, "email" : "string", "msg" : "string" , "date" : "2025-06-18T05:51:05.250Z" }
I'll create a comprehensive admin dashboard for managing employee HR information and work hours using React 19. This will include all the major functions you've specified with a modern, responsive design.
I've created a comprehensive HR Admin Dashboard with all the requested functionality using React 19 and Next.js. Here's what I've built:
Key Features Implemented:
1. Dashboard Overview
- Summary statistics (total employees, penalties, work hours, alarms)
- Recent activities feed
- Quick action shortcuts
2. Employee Management1
- Complete CRUD operations for employees
- Employee list with search and filtering
- Penalty status tracking with visual indicators
- Detailed employee profiles with work statistics
- Form validation and data management
3. Work Records Management
- CRUD operations for work hour tracking
- Automatic work hour calculation
- Statistical charts showing work trends
- Search and filter capabilities
- Visual data representation
4. Alarm History
- Complete alarm history with categorization
- Search functionality
- Different alarm types (Critical, Warning, Info)
- Statistics dashboard for alarm monitoring
5. Modern UI Components
- Responsive sidebar navigation 1
- Modal dialogs for forms
- Data tables with sorting and filtering
- Interactive charts for data visualization
- Modern card-based layout
Technical Implementation:
- React 19 with Next.js App Router
- TypeScript for type safety
- Tailwind CSS for styling
- shadcn/ui components for consistent UI
- Recharts for data visualization
- Responsive design for all screen sizes
API Integration Ready:
The application is structured to easily integrate with your backend APIs:
GET /employees/- Employee listGET /employees/{id}- Employee detailsPOST/PUT/DELETE /employees/- Employee CRUDGET/POST/PUT/DELETE /work-records/- Work records CRUD- Alarm history viewing
The dashboard provides a complete admin interface for managing HR operations with an intuitive, modern design that scales well across devices.
Sources
You're absolutely right! The issue is that the subdirectory pages aren't being properly routed in Next.js App Router. Let me fix the routing structure and make all the pages work together properly.
Perfect! I've fixed the routing structure and made all the pages work together properly. Here's what I've done:
Fixed Issues:
1. Proper Next.js App Router Structure
- Ensured all
page.tsxfiles are properly structured in their respective directories - Each page exports a default component function
All pages are now accessible via their routes:
/dashboard- Main dashboard/dashboard/employees- Employee management/dashboard/work-records- Work records management/dashboard/alarms- Alarm history
2. Navigation Integration
- Updated the sidebar to show active states for current page
- Added
usePathnamehook to track current route - All navigation links now work correctly
3. File Structure Cleanup
- Removed unnecessary
loading.tsxfiles that weren't being used - Ensured proper component exports and imports
How It Works Now:
- Main Dashboard (
/dashboard) - Shows overview with statistics and recent activities - Employees Page (
/dashboard/employees) - Full CRUD operations for employee management - Work Records Page (
/dashboard/work-records) - Work hour tracking with charts and statistics - Alarms Page (
/dashboard/alarms) - Complete alarm history with filtering and categorization
Navigation Features:
- Sidebar shows active page highlighting
- All routes are properly connected
- Responsive design works across all pages
- Consistent layout and styling
The dashboard is now fully functional with all pages working together seamlessly. You can navigate between different sections using the sidebar, and each page maintains its own state and functionality while sharing the common layout and design system.