Lovable Prompt Creator - AI Prompt Generator

```markdown
## APPLICATION OVERVIEW
The "Dynamic No-Code Dashboard Builder" is a web application designed for e-commerce analytics, allowing users to upload CSV files and create customizable dashboards without the need for coding. It empowers users to visualize important metrics and data trends through an intuitive UI, making data analysis accessible and user-friendly.

## CORE FEATURES
1. **Data Ingestion & Mapping:**
   - Users can upload multiple CSV files (e.g., "Macro KPIs" and "Order Details") with automatic header detection and date column identification.

2. **Dynamic Tab Management:**
   - A sidebar for adding and renaming tabs to organize different dashboard views (e.g., "Forecast Ejecutivo", "Análisis de Producto").

3. **The Widget Builder:**
   - An "Add Widget" button allows users to choose from various widget types (KPI Card, Line Chart, Bar Chart, Data Table) and select data sources and metrics to visualize.

4. **Advanced Computed Fields:**
   - Users can create calculated metrics through a simple formula interface, enabling dynamic metrics like "Proyectado" and "Gross Margin".

5. **Product Breakdown View:**
   - A dynamic table component that groups data by unique columns (e.g., "Product Name") and allows users to select which metrics to display.

## DESIGN SPECIFICATIONS
- **Visual Style:** Minimalist design with a clean and simple aesthetic, utilizing ample white space to enhance readability and focus on typography.
- **Color Mode:** Light theme featuring dark text on light backgrounds, fostering an inviting and easy-to-read interface.
- **Layout:** Employ a grid layout system (Bento grids) that allows users to resize and reposition widgets effortlessly. The sidebar for tab management is fixed on the left, providing easy access to different views.
- **Typography:** Use a modern sans-serif font for headings and body text, ensuring clear hierarchy and readability. Suggested fonts include Inter or Roboto.

## TECHNICAL REQUIREMENTS
- **Framework:** React with TypeScript for type safety and component-based architecture.
- **Styling:** Tailwind CSS for utility-first styling, enabling rapid design implementation.
- **UI Components:** Utilize shadcn/ui library for pre-designed components that align with the minimalist aesthetic.
- **State Management:** Incorporate React Context API or Zustand for managing global application state effectively.

## IMPLEMENTATION STEPS
1. **Set Up Project:**
   - Initialize a new React project with TypeScript and install Tailwind CSS and shadcn/ui components.
  
2. **Create File Upload Component:**
   - Implement a file upload feature with CSV parsing, including header detection and date column selection.

3. **Develop Tab Management System:**
   - Create a sidebar component for adding, renaming, and managing tabs dynamically.

4. **Build Widget Builder Functionality:**
   - Design the widget builder interface, enabling users to select widget types, data sources, metrics, and filters.

5. **Implement Computed Fields Feature:**
   - Develop functionality for users to define and calculate custom metrics using basic math logic.

6. **Design Product Breakdown View:**
   - Create a dynamic table that groups data and allows metric selection, ensuring a responsive design for varying screen sizes.

7. **Persist User Configuration:**
   - Utilize local storage to save user configurations, ensuring that tabs and widget setups remain intact upon page refresh.

## USER EXPERIENCE
Users will experience a seamless flow from uploading data files to building and customizing their dashboards. The intuitive interface allows for easy navigation through tabs, with instant feedback from the widget builder. Users can analyze their e-commerce data by selecting metrics, applying filters, and viewing results in real-time. The clean layout and responsive design ensure a pleasant experience across devices, making data analysis straightforward and effective.
```