Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application serves as a comprehensive CRM for a barber shop and hair salon, facilitating the management of various services including men’s haircuts, women’s styling, manicures, and pedicures. It will allow for tracking employee performance and earnings, ensuring efficient operations and providing insights into the business's financial status.

## CORE FEATURES
1. **Service Management**: Users can add, edit, or delete services offered by the salon, including detailed descriptions and pricing for haircuts, styling, manicures, and pedicures.
   
2. **Employee Management**: Admins can input and manage details of all employees, including their roles and commission structures based on services rendered.

3. **Earnings Calculation**: The application will automatically calculate the earnings of both the salon and employees based on predefined commission rates, with options to view totals for daily, weekly, or monthly periods.

4. **Appointment Scheduling**: Users will be able to schedule appointments for clients, allowing for better organization and management of time slots.

5. **Client Management**: The app will maintain a database of clients, including contact information and service history, to enhance customer relationship management.

6. **Reporting Dashboard**: A visual dashboard providing insights into earnings, popular services, and employee performance, helping owners make informed business decisions.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space, ensuring ease of use and focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability.
- **Layout**: A straightforward layout structured into a header (navigation), main content area (for features like appointment scheduling, employee management), and a footer (for contact information and links).
- **Typography**: Use sans-serif fonts for clarity and modernity. Headings should be bold and larger to establish a clear hierarchy, while body text should be regular weight for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and component-based architecture.
- **Styling**: Tailwind CSS for utility-first styling approach, ensuring a responsive and mobile-friendly design.
- **UI Components**: Utilizing shadcn/ui for pre-built components that align with the minimalist aesthetic.
- **State Management**: Use React Context API or a state management library like Redux if needed for complex state management.

## IMPLEMENTATION STEPS
1. **Set up the React project** using Create React App with TypeScript template.
2. **Install Tailwind CSS** and configure it for the project.
3. **Create the main components**: Header, Service Management, Employee Management, Appointment Scheduler, Client Management, Reporting Dashboard.
4. **Implement routing** using React Router to navigate between different sections of the app.
5. **Develop the backend API** (if applicable) to handle data storage for services, employees, appointments, and earnings.
6. **Connect the frontend to the backend** to fetch and manage data dynamically.
7. **Style the components** using Tailwind CSS to match the minimalist design requirements.
8. **Test the application** thoroughly for usability and responsiveness across devices.

## USER EXPERIENCE
Users will interact with the application on a clean and organized interface where they can quickly navigate between managing services, scheduling appointments, and viewing employee earnings. The dashboard will provide visual feedback with charts and statistics, allowing salon owners to make quick assessments of their business health. The responsive design will ensure that the application is usable on both desktop and mobile devices, providing flexibility for on-the-go management.