Lovable Prompt Creator - AI Prompt Generator

# APPLICATION OVERVIEW
FreelanceFlow is a full-stack SaaS web application designed to help freelancers efficiently manage their clients, projects, tasks, and payments. It combines a user-friendly interface with powerful functionalities to streamline freelance workflows and enhance productivity.

# CORE FEATURES
1. **User Authentication**: Secure login and signup through Supabase Auth, ensuring that users can only access their own data.
2. **Dashboard**: A central hub displaying summary cards for total clients, active projects, pending tasks, and total earnings, along with charts for earnings trends.
3. **Client Management**: A dedicated module for adding, editing, and deleting clients, with easy navigation to their respective projects.
4. **Project Tracking**: Detailed project pages that include descriptions, statuses, deadlines, and linked clients, along with task lists and payment sections.
5. **Task System**: Functionality to add, edit, and track tasks within projects, including priority levels and completion statuses.
6. **Payments Module**: Manage payments per project, track statuses, and calculate total earnings.

# 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 application will feature a sidebar for navigation, a main dashboard displaying key metrics, and modular sections for clients, projects, tasks, and payments, all designed to be responsive and user-friendly.

# TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: React Context API or similar for managing application state.

# IMPLEMENTATION STEPS
1. **Set Up Project**: Initialize a new Next.js project with TypeScript and install Tailwind CSS and shadcn/ui components.
2. **Configure Supabase**: Set up Supabase project for authentication and database management. Create the necessary tables: users, profiles, clients, projects, tasks, payments.
3. **Implement Authentication**: Create login and signup pages using Supabase Auth and protect the dashboard routes.
4. **Build Dashboard Layout**: Design the main dashboard with sidebar navigation and summary cards using Tailwind CSS and shadcn/ui.
5. **Develop Client Management Module**: Implement functionality for adding, editing, and deleting clients, and link them to their respective projects.
6. **Create Project Tracking Pages**: Develop project pages with task lists and payment sections, ensuring seamless navigation and data display.
7. **Integrate Task System**: Add functionality for managing tasks within projects, including priority settings and completion tracking.
8. **Set Up Payments Module**: Implement payment tracking per project, with functionality to manage payment statuses and earnings calculations.
9. **User Experience Enhancements**: Add loading skeletons, toast notifications, and responsive design adjustments for a smooth user experience.
10. **Testing and Deployment**: Test the application thoroughly and deploy it to a production environment, ensuring all functionalities work correctly.

# USER EXPERIENCE
Users will enjoy a seamless onboarding process with straightforward navigation through the authentication screens. The dashboard will provide a clear overview of all essential metrics at a glance. Users can manage clients, projects, and tasks with intuitive forms and lists, while the payments module simplifies financial tracking. Smooth transitions and responsive design will enhance the overall user experience, making FreelanceFlow an indispensable tool for freelancers.