Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is designed for the management of employee attendance, allowing users to register check-ins and check-outs seamlessly. It incorporates QR code scanning for quick access and includes a payroll role generator to streamline payment processes.

## CORE FEATURES
1. **Employee Registration**: A form for adding and managing employee details, including personal information and roles.
2. **Check-In/Check-Out System**: A straightforward interface for employees to log their arrival and departure times, including QR code functionality for quick scanning.
3. **Payroll Role Generator**: An automated feature that calculates and generates payroll roles based on attendance data.
4. **User Authentication**: Secure login and user role management to ensure that only authorized personnel can access sensitive information.
5. **Dashboard Overview**: A visual summary of attendance statistics, including total hours worked, tardiness, and other relevant metrics.
6. **Notifications**: Alerts for employees regarding their attendance status and payroll updates.

## DESIGN SPECIFICATIONS
- Visual Style: minimalist - Clean, simple design with plenty of white space, minimal color palette, and focus on typography
- Color Mode: Light theme with dark text on light backgrounds
- Primary Color: #1978E5 (accent for buttons, links, highlights)
- Typography: Use Inter from Google Fonts for headings, Inter for body text and UI elements
- Border Radius: 8px (moderately rounded) for buttons, cards, and inputs
- Layout: The main layout consists of a top navigation bar, a central dashboard area for core functionalities, and side panels for additional navigation and quick access features.

## TECHNICAL REQUIREMENTS
- Framework: React with TypeScript
- Styling: Tailwind CSS
- UI Components: shadcn/ui
- State Management: Redux (optional, based on complexity)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create Components**: Develop reusable components for forms, buttons, and cards, applying the specified design principles.
3. **Implement Authentication**: Set up user authentication with secure login and role management features.
4. **Build Core Features**: 
   - Develop the employee registration form and integrate it with the backend API.
   - Implement the check-in/check-out functionality with QR code scanning capabilities.
   - Create the payroll role generator to calculate and display payroll data.
5. **Design Dashboard**: Create a dashboard that visually represents attendance metrics and allows for easy navigation to other features.
6. **Testing**: Conduct thorough testing for usability and bugs, ensuring all features work as expected.
7. **Deployment**: Deploy the application to a suitable hosting platform and ensure it is responsive across devices.

## USER EXPERIENCE
Users will experience a streamlined interface that allows easy navigation between employee management, attendance logging, and payroll generation. The QR code feature enhances efficiency, while the dashboard provides clear visibility into attendance metrics. Notifications will keep users informed about important updates, ensuring a smooth workflow for both employees and administrators.