Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed for multi-site attendance and payroll management. It allows organizations to efficiently track employee attendance across various locations and manage payroll processes seamlessly. The app focuses on providing a user-friendly interface for both administrators and employees.

## CORE FEATURES
1. **Multi-Site Attendance Tracking**: Allows administrators to monitor employee attendance across different sites, with the ability to generate attendance reports.
2. **Payroll Management**: Streamlines payroll processes, enabling automatic calculations based on attendance, overtime, and deductions.
3. **User Authentication**: Secure login for employees and administrators, ensuring that sensitive information is protected.
4. **Dashboard Overview**: A centralized dashboard displaying key metrics such as attendance statistics, payroll summaries, and alerts.
5. **Employee Profiles**: Each employee has a dedicated profile for storing personal information, attendance records, and payroll history.
6. **Notifications**: Automated notifications for important updates, such as payroll deadlines and attendance discrepancies.

## 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 will consist of a top navigation bar, a sidebar for navigation, and a central content area for displaying dashboards and forms.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (for managing application state efficiently)

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS, shadcn/ui, and Redux for state management.
3. **Create Layout Components**: Build the main layout including the navigation bar, sidebar, and content area.
4. **Develop Core Features**: Implement each core feature, starting with user authentication and then moving to attendance tracking and payroll management.
5. **Integrate State Management**: Use Redux to manage the state across components, especially for user data and attendance records.
6. **Implement Styling**: Utilize Tailwind CSS to style all components according to the design specifications.
7. **Testing**: Conduct unit and integration testing to ensure that all features work smoothly.

## USER EXPERIENCE
Key user interactions include:
- **Login Process**: Users can easily log in to access their profiles and the dashboard.
- **Attendance Submission**: Employees can submit their attendance with a few clicks, and administrators can approve or modify entries.
- **Payroll Overview**: Administrators can view payroll summaries and access detailed reports to ensure accuracy.
- **Notifications**: Users receive real-time notifications for important actions, enhancing engagement and promptness in responses.

This prompt outlines a comprehensive plan for developing a minimalist web application focused on attendance and payroll management, ensuring a streamlined user experience while adhering to the specified design principles.