AERC
Adan Enrique Ramirez Cisneros

H R Dashboard - Copy this React, Tailwind Component to your project

Design a Human Resources (HR) dashboard for a web application that serves as the first impression and a key tool for visualizing relevant information to help HR managers make quick decisions. The dashboard should include the following features: 1. Key Metrics Section: Active Employees: Total number of employees registered, with breakdown by department or location. Attendance & Absences: Percentage of attendance for the day or week, employees with recurrent absences or tardiness. Vacation & Leave Requests: Pending approval requests, total vacation days used vs. available. New Hires: Number of employees hired in the current month and current status of job openings and interviews. Birthdays & Anniversaries: List of employees with upcoming birthdays or work anniversaries. 2. Charts and Visualizations: Weekly/Monthly Attendance: Bar or line chart showing attendance trends over the past weeks or months. Employee Turnover: Pie chart showing breakdown of new hires, resignations, and terminations in a given period. Role/Department Distribution: Pie chart or bar chart breaking down the distribution of employees by role, gender, or location. Performance Evaluations: History of average ratings by team or department. 3. Task Panel: Pending Tasks: Pending vacation/leave requests, documents to sign or update, scheduled performance evaluations. Important Alerts: Contracts nearing expiration, reminders for events or training sessions. 4. News and Communication Section: Recent Announcements: Latest internal posts or important team news. Upcoming Events: Key dates such as meetings, training sessions, or team building activities. Quick Notifications: Firebase alerts for important changes (vacancies, approvals). 5. Quick Access Section: Frequent Action Buttons or Cards: Buttons for actions like registering a new employee, approving leave requests, viewing daily attendance, and generating monthly reports. 6. Work Climate Indicators (Optional): Employee Satisfaction: Average satisfaction score based on recent surveys. Wellbeing Trends: Historical survey results or common feedback from employees. 7. Security and Compliance Section: Expired Documents: Contracts, certificates, or legal documents that need renewal. Pending Training: Employees who haven’t completed mandatory courses. Dashboard Layout Example: Top Bar: Displays the user's name, current date, and quick access buttons. Left Section: Key charts (attendance, turnover, performance). Center Section: Task panel for pending tasks and notifications. Right Section: Upcoming events, birthdays, and recent announcements. Please generate the UI layout and code in React with TypeScript, styled using Tailwind CSS or a similar modern CSS framework. Ensure the design is responsive for both desktop and mobile views.

Prompt
Component Preview

About

HRDashboard - Visualize key HR metrics like attendance, new hires, and tasks. Built with React and Tailwind for a responsive design. Download free code!

Share

Last updated 1 month ago