Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for a law office that prioritizes offline functionality. It will offer a comprehensive system for managing client relationships, tracking work done, and handling payment histories, ensuring that all essential information is readily accessible even without internet connectivity.

## CORE FEATURES
1. **Client Dashboard**: An initial interface displaying recent clients, recent work, and deadlines for ongoing processes, allowing quick access to key information.
2. **Client Profiles**: Individual pages for each client, containing personal and contact information, associated work details, and payment history, including debts and payments.
3. **Work History Tracking**: A detailed log of each client's work status, documenting important dates such as document submissions and responses received.
4. **Payment Management**: A system for tracking payments linked to client debts, with a history detailing payment dates and amounts to manage financial records effectively.
5. **Client Relationships**: Functionality to establish relationships between clients (e.g., family ties or business connections), enhancing the relational database of clients.
6. **Offline Functionality**: Ensure the application can function without internet access, storing data locally and syncing when a connection is available.

## 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 sidebar for navigation, a top bar for quick access actions, and a central content area that dynamically displays information based on user selection.

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

## IMPLEMENTATION STEPS
1. **Project Setup**: Initialize a new React project with TypeScript using Create React App. Install Tailwind CSS and configure it for your project.
2. **Component Structure**: Create a folder structure for components, pages, and assets. Implement a sidebar navigation component and a top navigation bar.
3. **Client Dashboard**: Develop the dashboard component to fetch and display recent clients and works. Use mock data to simulate the backend.
4. **Client Profile Pages**: Create a dynamic client profile page that displays all relevant information and histories. Implement routing for navigating to each client’s profile.
5. **Work History and Payment Management**: Build components to log work history and payments, ensuring they are linked to the respective client profiles.
6. **Offline Functionality**: Utilize service workers to enable offline capabilities. Implement local storage for client data and sync with a backend when online.
7. **Testing**: Conduct thorough testing of all components, ensuring they function correctly both online and offline.
8. **Deployment**: Prepare the application for deployment on a suitable platform (e.g., Vercel, Netlify) ensuring it maintains offline functionality.

## USER EXPERIENCE
Users will interact with a straightforward interface, starting from the client dashboard that provides quick access to essential information. They will navigate seamlessly through client profiles, view detailed histories, and manage payments with ease. The offline capabilities ensure that users can continue working without interruption, enhancing productivity and user satisfaction.