Data - Copy this React, Tailwind Component to your project
Design a user friendly HR dashboard for a web application using modern UI/UX principles. The dashboard should be structured as follows: Layout Design Top Navigation Bar: Include the user's name, profile picture, current date, and quick action buttons like "Add Employee" and "Generate Report." Main Content Layout: Divide the dashboard into three key sections: Left Panel: Graphs and Metrics: A line chart showing weekly or monthly attendance trends. A pie chart displaying employee distribution by roles or departments. A bar chart comparing evaluations or performance ratings across teams. Center Panel: Task List and Notifications: Display a list of pending approvals for vacations, documents, or evaluations. Notifications about important updates like contract expirations or training deadlines. Use a collapsible task list format with icons for clarity. Right Panel: Announcements and Events: Include a section for upcoming events like birthdays, work anniversaries, or scheduled meetings. Show recent internal news or announcements in a scrolling feed. Features and Functionality Metrics Section: Include key statistics at the top of the dashboard: Total employees. Active vs. absent employees for the day. Number of new hires this month. Pending requests. Interactive Charts: Allow users to hover over charts for detailed metrics. Use color coding for different statuses (e.g., red for absences, green for attendance). Task Panel: Enable checkboxes for marking tasks as complete, with real time updates. Quick Actions: Provide buttons or links for frequent actions like "Add Employee," "Approve Request," or "View Attendance Details." Design Notes Use a clean and modern color palette (e.g., blues, whites, and greys with accent colors for key metrics). The dashboard should be responsive, adjusting seamlessly for desktops, tablets, and mobile devices. Ensure accessibility features like large fonts, high contrast, and keyboard navigation. Deliverables Create a functional mockup or code snippet for the above dashboard, focusing on usability and responsiveness. Use React or a similar modern JavaScript framework if possible. Include sample data to demonstrate the design in action
