Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
The Electricity Bill System is a web application designed to streamline the management of electricity bills. It serves three user roles: Admin, Employee, and User, allowing for efficient bill generation, reading input, and status tracking across different consumer categories.

## CORE FEATURES
1. **User Registration and Management**: Admins can register users and add supervisors, ensuring access to all relevant data.
2. **Bill Generation and Computation**: Automatically generate bills based on electricity consumption, including different rates for household, commercial, and industrial users.
3. **Bill Status Tracking**: Users can view their bills by entering their service number, including paid/unpaid status and due dates with fine accumulation.
4. **Reading Input by Employees**: Employees can input electricity readings directly into the system, which are saved in the database for accurate bill computation.
5. **Validation Mechanisms**: Implement strict validations for user input, including regex for names and checks for phone numbers and PIN codes.
6. **Detailed Bill Breakdown**: Each bill will include a breakdown of units consumed, start and end dates, and applicable charges even for zero consumption.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - The application will feature a clean, simple design with ample white space, focusing on clarity and ease of use.
- **Color Mode**: Light theme with dark text on light backgrounds to enhance readability.
- **Layout**: The main layout will be structured with a sidebar for navigation and a central content area for displaying bills and user information, ensuring a responsive design for various screen sizes.
- **Typography**: Use a sans-serif font (e.g., Arial or Roboto) for clean readability, with a hierarchy of headings, subheadings, and body text to guide users through the content.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for type safety and enhanced development experience.
- **Styling**: Tailwind CSS for utility-first styling, allowing for rapid UI development.
- **UI Components**: shadcn/ui for pre-built components that match the minimalist design.
- **State Management**: Use Context API or Redux for managing application state across different user roles.

## IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create User Roles**: Implement role-based access control for Admin, Employee, and User functionalities.
3. **Develop User Registration**: Create forms for user registration and supervisor addition, ensuring proper validations for names (max 32 characters) using regex.
4. **Implement Bill Generation Logic**: Write functions to compute electricity bills based on user inputs and defined rate slabs.
5. **Design User Interface**: Build the main layout, ensuring a minimalist aesthetic, with clear navigation and bill viewing components.
6. **Input Readings**: Create an interface for employees to input and save electricity readings into the database.
7. **Handle State Management**: Set up state management for user sessions and bill tracking across the application.
8. **Testing**: Conduct thorough testing on all features, including validation checks and responsiveness on various devices.

## USER EXPERIENCE
- **User Journey**: Users will navigate to the bill viewing page, enter their unique service number, and see their bill status along with detailed breakdowns. Admins can manage users and mark bills as paid/unpaid, while employees can input readings seamlessly.
- **Feedback Mechanisms**: Implement notifications for successful operations, such as bill generation and user registration, ensuring users are informed of their actions.

This structured prompt outlines a comprehensive approach to building the Electricity Bill System, adhering to user requirements and design principles.
```