Prompt: Excel-like Employee Attendance Tracker with React.js and MUI Objective: Build an Employee Attendance Page in a grid format, where each date is displayed as a cell, and employees can mark their attendance as Present or Absent for each day. The design should resemble a simple Excel sheet with columns for each day and rows for employee attendance. Requirements: Display Calendar Grid: The grid should have columns representing each day of the month (e.g., January 1, 2, 3...). Each row should represent an employee, and each cell will contain an option to mark the attendance as Present or Absent. State Management: Use React's useState to manage attendance for each employee for each day. Each cell should be interactive, allowing the employee to toggle between Present and Absent. UI Components: Material-UI (MUI): Utilize MUI components such as Grid, Button, and Typography for the layout and functionality. Each day’s cell should have two buttons: Mark Present and Mark Absent. The cells should update dynamically based on user interaction. Attendance Feedback: Display a confirmation message or the current status (Present/Absent) when an employee marks their attendance. Optional Enhancements: Persist Attendance Data: Optionally, store the data in local storage or a backend for persistence. Date Navigation: Include options to navigate between different months and track attendance over time.
