Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This web application is a ride management system designed for service providers to efficiently manage ride requests, users, and invoices. It features a dashboard for overseeing ride statuses and earnings, alongside dedicated pages for rides, invoices, and user management, all while ensuring secure access for system administrators.

## CORE FEATURES
1. **Dashboard**: Displays pending rides, the next upcoming ride, the last 5 completed rides, and a graph of total earnings for the month.
2. **Rides Management**: Lists all ride requests sorted by status (pending, ongoing, complete) with filtering options. Users can change ride statuses and cancel rides.
3. **Invoices Management**: Allows users to create and send invoices linked to completed rides, with automated due dates and customizable recipient information.
4. **User Management**: Displays a list of users created from ride requests, including their details and default pickup locations.
5. **Admin Control**: A separate page for system administrators to manage user access and permissions while ensuring secure login functionality.

## 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.
- **Layout**: 
  - The dashboard will feature a grid layout with cards for each section (pending rides, upcoming rides, completed rides, earnings graph).
  - Rides, invoices, and users pages will use a table format for easy management, with filtering and action buttons prominently displayed.
- **Typography**: 
  - Primary font: Sans-serif (e.g., Arial or Helvetica) for clarity and modernity.
  - Headings: Bold and larger for hierarchy.
  - Body text: Regular weight for readability.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui for reusable UI elements.
- **State Management**: Use React's Context API for managing application state across components.

## IMPLEMENTATION STEPS
1. **Set Up the Project**: Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui.
2. **Create the Dashboard Component**: Implement the dashboard layout with cards and a graph component for displaying earnings.
3. **Develop the Rides Management Page**: Create a table to display ride requests, including functionalities for filtering and changing ride states.
4. **Build the Invoices Page**: Implement a table for invoices, including features for creating and sending invoices based on completed rides.
5. **Set Up User Management Page**: Develop a user list that shows all users created from ride requests, with the ability to view details.
6. **Implement Admin Functionality**: Create an admin page for system user management with login functionality and role-based access control.
7. **Test All Features**: Use dummy data for testing to ensure all functionalities work as intended without backend integration.

## USER EXPERIENCE
Users will be greeted with a clean dashboard overview upon logging in, where they can easily track ride statuses and earnings. They can navigate to the rides, invoices, and user management pages through a sidebar or top navigation menu. Each page will allow for efficient data management, with clear action buttons for creating, editing, and deleting entries, along with confirmation prompts for critical actions like cancellations. The design will ensure a smooth, intuitive experience with responsive layouts for accessibility across devices.