Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed for a law office that prioritizes offline functionality while enhancing client management. The application allows users to manage client profiles, track work history, and handle payments efficiently, ensuring that all essential information is easily accessible, even without internet connectivity.

## CORE FEATURES
1. **Client Dashboard**: A comprehensive interface displaying a list of clients in a table format, allowing easy access to key client details such as names, identification numbers, and contact information.
2. **Client Profiles**: Individual pages for each client containing personal details, associated work, payment history, and functionality to manage relationships directly related to each client.
3. **Work History Tracking**: A feature that logs work status and important dates for each client, ensuring all activities are documented.
4. **Payment Management**: A system to track client payments, including debts, payment history, and associated financial records.
5. **Client Relationship Management**: A refined approach where relationships are specific to each client, allowing users to create, edit, or delete relationships directly from the client's profile page.
6. **Day/Night Mode**: A toggle feature for users to switch between light and dark themes, with CSS configurations to support both modes.

## 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 consists of a fixed sidebar for navigation, a top bar for quick access actions, and a central content area displaying 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 that includes larger buttons and a top navigation bar for actions.
3. **Client Dashboard**: Develop the client dashboard component that fetches and displays clients in a table format, ensuring that filtering functionality is available for names, identification numbers, and contact details.
4. **Client Profile Pages**: Create a dynamic client profile page displaying all relevant information and histories. Implement routing for navigating to each client's profile, including the ability to manage relationships.
5. **Work History and Payment Management**: Build components for logging work history and payments linked to respective client profiles, ensuring users can track all necessary information.
6. **Day/Night Mode Implementation**: Configure CSS for both light and dark modes, implementing a toggle button in the sidebar for users to switch themes.
7. **Testing**: Conduct thorough testing of all components, ensuring they function correctly and meet user requirements.
8. **Deployment**: Prepare the application for deployment on a suitable platform (e.g., Vercel, Netlify) while ensuring offline functionality is maintained.

## USER EXPERIENCE
Users will interact with a streamlined interface, starting from the client dashboard that provides easy access to essential client information. They will navigate seamlessly through client profiles, manage payments, and track work history with minimal clicks. The application will support offline functionality and provide a responsive design for an optimal user experience.