Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
The project is a web application designed to manage and visualize call data for the "Não Atendimentos" department of TIM. It will provide users with the ability to filter and analyze call data, focusing on finalization rates and overall call statistics. The application will incorporate a clean and minimalist design to enhance user experience and data comprehension.

## CORE FEATURES
1. **Header with Logo and Title**: Display the TIM logo alongside the title "Não Atendimentos" at the top of the page for branding consistency.
2. **Data Filters**: Implement filters for year/month, employee name, first manager, second manager, organization, start date, and end date, along with text input fields for call ID and phone number to refine search results.
3. **Data Visualization**: Include a bar chart that compares the number of finalized calls against total calls grouped by year/month for quick visual insights.
4. **Responsive Design**: Ensure the application is fully responsive and accessible on various devices, providing a seamless user experience.
5. **Footer Information**: Add a footer stating "Desenvolvimento Equipe CCS - Customer Care Support" to credit the development team.

## DESIGN SPECIFICATIONS
- **Visual Style**: Minimalist - Clean, simple design with plenty of white space to enhance readability and focus on content.
- **Color Mode**: Light theme with dark text on light backgrounds, primarily using RGB(0, 0, 77) for accents.
- **Layout**: A structured layout with a header at the top, followed by the filter section, a main content area for data display and visualization, and a footer at the bottom.
- **Typography**: Use a modern sans-serif font such as Arial or Helvetica for clear readability. Headings should be bold and larger, while body text remains standard size for contrast.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript for building a robust user interface.
- **Styling**: Tailwind CSS for utility-first styling and quick customization.
- **UI Components**: Utilize shadcn/ui for modern UI components to maintain consistency and ease of use.
- **State Management**: Implement React's Context API or Redux if necessary for managing application state across different components.

## IMPLEMENTATION STEPS
1. **Set up React Environment**: Initialize a new React project using Create React App with TypeScript.
2. **Install Dependencies**: Add Tailwind CSS and shadcn/ui to the project for styling and component needs.
3. **Create Header Component**: Design the header to include the TIM logo and application title.
4. **Develop Filter Component**: Implement the filter section with inputs for year/month, employee name, managers, organization, and date range, as well as text fields for call ID and phone number.
5. **Integrate Data Visualization**: Use a charting library (e.g., Chart.js or Recharts) to create the bar chart visualizing finalized calls against total calls.
6. **Set up Data Fetching**: Connect to the BigQuery database to retrieve and display call data based on filter criteria.
7. **Implement Footer**: Add the footer component with the required text.
8. **Ensure Responsiveness**: Test the application on multiple devices to ensure a consistent experience.
9. **Deployment**: Deploy the application using a suitable hosting platform like Vercel or Netlify.

## USER EXPERIENCE
Users will interact with the application through a straightforward interface. They can apply filters to refine call data, view the results in a structured format, and analyze trends through the bar chart. The responsive design will allow seamless access across devices, ensuring that users can manage and visualize data effectively from anywhere.