Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to serve as a financial dashboard for a dermatological clinic. The main purpose is to allow users to track and analyze financial performance through key performance indicators (KPIs), including total revenues, expenses, margins, and net cash flow, while providing visual representation through graphs.

## CORE FEATURES
1. **Financial KPIs Overview**: Displays total revenues, total expenses, margin contribution, and net profits before and after investments.
2. **Revenue and Expense Graphs**: Visual representation of revenues and expenses over time, helping users to identify trends and make informed decisions.
3. **Period Filters**: Options for filtering data by month or year to view specific financial performance periods.
4. **User Permissions**: Simple role-based access using Supabase RLS, ensuring users only see their own financial data.
5. **Responsive Design**: Ensures usability across devices with a minimum width of 1024px.
6. **Theme Persistence**: Provides a light/dark theme toggle that persists user preference in localStorage.

## 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 includes a top navigation bar for filtering, a dashboard section displaying KPIs, and a graph section for visual data representation.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript.
- **Styling**: Tailwind CSS.
- **UI Components**: shadcn/ui.
- **State Management**: Utilize React's built-in state management or Context API as needed.

## IMPLEMENTATION STEPS
1. **Project Setup**: Initialize a new React project with TypeScript and install necessary dependencies (React, TypeScript, Tailwind CSS, shadcn/ui).
2. **Configure Vercel Compatibility**: Adjust `vite.config.ts` for proper deployment on Vercel, ensuring SSR or SPA compatibility, and removing any Cloudflare dependencies.
3. **Build the Dashboard Layout**: Create components for the dashboard, including a navigation bar, KPI display, and graph visualization.
4. **Implement Financial Calculations**: Develop functions to calculate total revenues, expenses, margins, and net cash flow based on user input.
5. **Integrate User Permissions**: Set up Supabase for user authentication and role-based access control.
6. **Add Theme Functionality**: Implement a toggle for light/dark themes and persist user selection in localStorage.
7. **Testing and Debugging**: Ensure all features work as intended across different devices and screen sizes, and fix any bugs encountered.
8. **Deployment**: Deploy the application on Vercel and ensure there are no 404 errors, confirming all routing and build processes are functioning correctly.

## USER EXPERIENCE
Users will interact with a clean and organized dashboard where they can easily view their financial data. They can filter the data by month or year, observe trends through graphical representations, and switch between light and dark themes. The minimalist approach will ensure users remain focused on their financial insights without unnecessary distractions. The application will be responsive, providing a seamless experience across various devices.