Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The **Onam Booking Control 2026** is a web application designed for managing bookings and payments for the Onam festival. The application will provide a clean and efficient user interface for staff to create and manage bookings while ensuring secure transactions and administrative oversight.

## CORE FEATURES
1. **User Authentication**: Secure login and session management to ensure only authorized staff can access the application, with features for password resets and user role management.
2. **Booking Management**: Allows staff to create, view, edit, and cancel bookings with real-time validation and feedback to enhance user experience.
3. **Payment Processing**: Integration with payment gateways to manage payments, refunds, and maintain a comprehensive ledger for financial tracking.
4. **Reporting Dashboard**: Visualize key metrics related to bookings, payments, and user activity to assist management in decision-making.
5. **Audit Trail**: A built-in mechanism to log all transactions and modifications made within the application for compliance and review purposes.
6. **Mobile-First Design**: A responsive user interface optimized for mobile use, enabling staff to manage bookings on-the-go.

## 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 sidebar for navigation, a header for branding, and a main content area to display forms and data tables.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Zustand or React Context API for managing global state.

## IMPLEMENTATION STEPS
1. **Setup Project**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Install Tailwind CSS and any other necessary libraries (e.g., Zustand for state management).
3. **Create Folder Structure**: Organize the project into components, pages, and services directories.
4. **Implement Authentication**: Build the authentication module including login, logout, and session management.
5. **Design UI Components**: Develop reusable components for buttons, forms, and cards using Tailwind CSS.
6. **Develop Booking Management Module**: Create components for booking creation, editing, and listing.
7. **Integrate Payment Processing**: Set up payment processing logic and UI for handling transactions.
8. **Build Reporting Dashboard**: Create a dashboard to display key metrics and insights related to bookings and payments.
9. **Implement Audit Logging**: Ensure all actions are logged for compliance and error tracing.
10. **Testing**: Conduct thorough testing to ensure functionality and usability on various devices and screen sizes.
11. **Deployment**: Deploy the application using a suitable platform (e.g., Vercel, Netlify).

## USER EXPERIENCE
The application will provide seamless interactions through a responsive interface. Users will be able to navigate between the dashboard, booking management, and payment sections easily. Important actions like booking creation and payment processing will feature clear feedback mechanisms (like loading indicators) to enhance user engagement and minimize frustration. The mobile-first design will cater to staff needs, ensuring they can perform tasks efficiently even in low connectivity environments.