Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
Veloxaspedizioni.it is a web application designed for optimizing shipment management performance. It focuses on enhancing loading speeds, efficient data querying, and seamless data exporting, all while maintaining the existing functionalities. The application will streamline the user's experience through improved data handling and real-time updates.

## CORE FEATURES
1. **Optimized Data Querying**: Implement pagination and selective field loading in shipment queries to enhance performance and reduce memory consumption.
2. **Real-time Updates**: Utilize Supabase Realtime functionalities to provide instant updates for wallet balances and shipment statuses, enhancing user experience.
3. **Efficient Data Export**: Introduce an edge function for server-side CSV/Excel exports, allowing users to download large datasets without browser memory issues.
4. **Improved UI/UX with Lazy Loading**: Implement lazy loading of pages and skeleton loading for lists to ensure a smooth user experience during data loading.
5. **Enhanced Caching Mechanism**: Configure React Query's caching settings to ensure efficient data retrieval and minimize unnecessary database queries.
6. **SQL Indexing**: Establish necessary SQL indices to improve database query performance significantly.

## 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 will consist of a header, a sidebar for navigation, and a content area that displays the various functionalities. Responsive design will ensure usability across devices.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Query for data fetching and caching

## IMPLEMENTATION STEPS
1. **Database Optimization**:
   - Execute SQL migrations to create necessary indices on shipment and invoice tables to enhance query performance.
2. **Refactor Data Fetching**:
   - Update the `useShipments` hook to include pagination and selective field loading.
   - Ensure all relevant components are updated to accommodate the new data format.
3. **Implement Realtime Functionality**:
   - Create hooks for wallet and shipment tracking updates using Supabase Realtime.
4. **Setup Server-side Data Export**:
   - Develop an edge function to handle data exports and integrate it with the frontend for user access.
5. **Enhance UI/UX**:
   - Implement lazy loading for page components and skeleton loading for data lists to improve perceived performance.
6. **Configure React Query**:
   - Set up global query configurations for caching and stale times based on data types.

## USER EXPERIENCE
Users will interact with a streamlined interface where they can view their shipments, filter data for better accessibility, and download reports efficiently. The application will provide immediate feedback on actions performed, such as data exports and real-time updates, ensuring a smooth and intuitive experience throughout.

This prompt outlines a comprehensive plan to create a functional web application that meets the user's specifications while focusing on performance and user experience.