Lovable Prompt Creator - AI Prompt Generator

## APPLICATION OVERVIEW
This project is a web application designed to streamline the user experience for document management. It focuses on allowing users to edit live previews of documents similarly to Word, manage invoice numbering based on the year, and create templates based on categories without redundant design settings for each template.

## CORE FEATURES
1. **Live Document Preview**: Users can edit documents in real-time, allowing for manual input similar to a word processor, enhancing productivity and accuracy.
2. **Dynamic Invoice Numbering**: The application automatically generates invoice numbers that increment based on the current year, ensuring sequential and organized documentation.
3. **Template Management**: Users can create and select templates based on categories (e.g., Sponsoring, Membership Fees) to streamline the document creation process without repetitive customization.
4. **Simplified UI**: The design eliminates unnecessary elements, focusing on essential functionalities and providing a clean, intuitive interface.
5. **Category-based Design Selection**: Users have the ability to apply predefined designs based on the selected category, reducing the need to customize colors and fonts with each new template.

## 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 include a sidebar for navigation, a central workspace for document editing, and a footer for additional actions and information.

## TECHNICAL REQUIREMENTS
- **Framework**: React with TypeScript
- **Styling**: Tailwind CSS
- **UI Components**: shadcn/ui
- **State Management**: Redux (or similar, based on complexity)

## IMPLEMENTATION STEPS
1. **Set up the project**: Initialize a new React project with TypeScript and install Tailwind CSS.
2. **Create the main layout**: Develop a responsive layout with a sidebar for navigation and a main content area for editing documents.
3. **Implement the live document preview feature**: Integrate a rich text editor that allows users to edit documents in real-time.
4. **Develop dynamic invoice numbering**: Create a backend service to handle invoice number generation based on the current year.
5. **Build the template management system**: Allow users to create and manage templates categorized by type, with options to select designs.
6. **Design the UI components**: Utilize shadcn/ui components styled with Tailwind CSS and ensure consistent application of the defined design specifications.
7. **Testing and Debugging**: Conduct thorough testing to ensure functionality, usability, and responsiveness across devices.

## USER EXPERIENCE
The user experience focuses on intuitive interactions, allowing users to seamlessly navigate through document creation and management. Key interactions include quickly selecting a document template from the sidebar, editing content directly in the preview pane, and easily generating invoices with sequential numbers. The minimalist design ensures users can concentrate on their content without distractions, and the responsive layout adapts to various screen sizes for optimal usability.