Lovable Prompt Creator - AI Prompt Generator

# Lovable Prompt for Web Application Development

## APPLICATION OVERVIEW
This project involves the development of a new "Faturamento" (Billing) tab for an existing dashboard application. The purpose of the new tab is to provide a modern, clean, and professional area for analyzing financial data, allowing users to filter and visualize billing information effectively while maintaining the current design and functionality of the system.

## CORE FEATURES
1. **Page Header**: Displays the title "Faturamento" and the subtitle "Análise financeira por profissional, período e desempenho" using the existing visual standards.
   
2. **Filters Section**: A horizontal filter area at the top allowing users to filter by:
   - Professional (selectable list)
   - Month (dropdown from January to December)
   - Year (dropdown for the years 2023 to 2026)

3. **Executive KPIs**: Four cards summarizing:
   - Total Billing
   - Average per Professional
   - Highest Billing
   - Number of Records
   Each card is designed with a modern look, featuring smooth borders and minimalistic icons.

4. **Main Graph**: A responsive chart (using Recharts) that visualizes billing evolution over time based on selected filters, with the capability to show daily, monthly, or consolidated comparisons.

5. **Top 5 Professionals Ranking**: A card displaying the top five professionals by billing, ordered automatically based on the applied filters, with visual bars representing their earnings.

6. **Detailed Table**: A modern table below the graphs displaying billing records with search, sort, and pagination functionalities. The table will format values in BRL currency and dates in DD/MM/YYYY format.

## 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 layout will consist of a header, filters at the top, followed by KPI cards, a main graph, a ranking section, and a detailed table at the bottom.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Not specified, assume local state management is sufficient for this feature.

## IMPLEMENTATION STEPS
1. **Create the "Faturamento" Tab**: Add a new tab in the existing sidebar menu below the "Financeiro" button.
2. **Implement Header**: Create the header section with the title and subtitle using existing styles.
3. **Design Filters**: Develop a horizontal filter section with:
   - A searchable select dropdown for professionals
   - A month dropdown
   - A year dropdown starting from the latest year available.
4. **Build Executive KPI Cards**: Design and implement the four KPI cards below the filters using the specified styles.
5. **Integrate Main Graph**: Add a responsive graph that updates based on selected filters, using Recharts for visual representation.
6. **Create Top 5 Professionals Ranking**: Design a ranking card that dynamically sorts and displays the top professionals based on the applied filters.
7. **Develop Detailed Table**: Implement a responsive table that shows billing records with the specified functionalities and formats.
8. **Data Handling**: Ensure data normalization, proper formatting in BRL, and standardization of names for analytics consistency.
9. **Enhance User Experience**: Add smooth animations, loading skeletons, elegant transitions, and ensure full responsiveness across devices.

## USER EXPERIENCE
Users will interact seamlessly with the new "Faturamento" tab, utilizing the filters to drill down into financial data. They will see instant updates on KPIs and graphical representations based on their selections, enhancing their ability to make quick and informed decisions. The overall design will emphasize clarity and organization, allowing for rapid comprehension of the financial performance across various dimensions.