Lovable Prompt Creator - AI Prompt Generator

# Lovable Prompt for Attendance Tracking Web Application

## APPLICATION OVERVIEW
This application will allow users to manually register attendance hours for members, applying different colors and payment amounts based on the time of registration. It will provide a simple user interface for both administrators and regular users, enabling efficient tracking of attendance and payments with a chat feature for communication.

## CORE FEATURES
1. **Manual Attendance Registration**: Administrators can record attendance hours for each member, with visual feedback based on the time (orange for S/. 2.00 after 8:06 PM, red for S/. 4.00 after 8:21 PM, and green for S/. 10.00 for absences).
2. **Payment Tracking**: Users can see amounts due based on their attendance records and mark payments as completed with a checkbox.
3. **User Authentication**: Users can log in with their email addresses to access their attendance records and payment statuses.
4. **Chat Feature**: A chat interface allowing users to communicate with the administrator for inquiries or assistance.
5. **Reports Generation**: Display attendance records with color-coded payment statuses for easy tracking.
6. **Database Storage**: All attendance data, user information, and payment statuses are stored in a database for persistence.

## 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 header for navigation, a sidebar for admin features, a main content area for attendance records, and a footer for additional information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or Zustand for managing user states and attendance records.

## IMPLEMENTATION STEPS
1. **Set up the Project**: Create a new React app with TypeScript and configure Tailwind CSS for styling.
2. **User Authentication**: Implement user login functionality with email, ensuring user roles (admin vs. regular users) are defined.
3. **Attendance Registration Module**: Build a form for the administrator to input attendance hours and automatically apply the designated color and payment amount.
4. **Payment Tracking**: Create a component where users can view their attendance records, see payment amounts, and check off payments.
5. **Chat Feature**: Integrate a simple chat interface using websockets or a similar technology for real-time communication.
6. **Database Integration**: Set up a backend (Node.js/Express) and connect to a database (e.g., MongoDB or Firebase) to store user and attendance data.
7. **Reporting Feature**: Develop a report view where attendance and payment statuses are displayed with appropriate color coding.

## USER EXPERIENCE
Users will have a straightforward experience, logging in to view their attendance records and payment statuses. Administrators will have access to additional functionalities for recording attendance and managing communications with users. The color-coded system will provide instant visual feedback on payment statuses, while the chat feature ensures that users can easily reach out for help or clarification. The overall design will prioritize simplicity and usability, enhancing user interaction with the application.