Me a report based on this template first you need to reference all the tables and figures like in next paahraphs check
Generated Prompt
## APPLICATION OVERVIEW This project is a web application designed to generate reports based on a predefined template. Users will be able to input data, and the application will format the report according to specific guidelines, including proper alignment, spacing, and indexing. ## CORE FEATURES 1. **Template Selection**: Users can select from various report templates to start their report creation process. 2. **Data Input**: A user-friendly interface for inputting tables, figures, and text that will be included in the report. 3. **Formatting Options**: Automatic formatting features that apply the specified spacing, alignment, and numbering to headings and subheadings. 4. **Index Generation**: The application will create and update an index based on the content of the report. 5. **Preview Functionality**: Users can preview the formatted report before finalizing it. 6. **Export Options**: Ability to export the completed report in PDF format, maintaining all formatting as specified. ## 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 feature a sidebar for navigation, a content area for report editing, and a preview section to view changes in real-time. ## TECHNICAL REQUIREMENTS - **Framework**: React with TypeScript - **Styling**: Tailwind CSS - **UI Components**: shadcn/ui - **State Management**: Redux for state management across the application ## IMPLEMENTATION STEPS 1. **Set up the React project**: Initialize a new React application using Create React App with TypeScript. 2. **Install dependencies**: Add Tailwind CSS and necessary UI libraries (shadcn/ui). 3. **Create the main layout**: Develop a sidebar for navigation and a central content area using Tailwind CSS for responsive design. 4. **Develop the template selection feature**: Implement a component for users to choose their report template. 5. **Implement data input forms**: Create forms for users to input tables, figures, and text, ensuring the correct alignment and spacing. 6. **Format the report**: Write functions to automatically format the report, including applying styles to headings, subheadings, and generating the index. 7. **Preview functionality**: Develop a live preview feature to show users their report as they edit. 8. **Export feature**: Implement the functionality to export the report as a PDF, ensuring all formatting is maintained. ## USER EXPERIENCE Users will have a seamless experience starting from selecting a report template to inputting their data. The interface will guide them through each step, with real-time previews to ensure their report matches the required specifications. The minimalist design will keep users focused on the task at hand, minimizing distractions and enhancing productivity.
Loved by thousands of makers from
From early prototypes to real products, they started here.







































Generate optimized prompts for your vibe coding projects
Generate prompt
Enter a brief description of the app you want to build and get an optimized prompt
Review and use your prompt
Review (and edit if necessary) the generated prompt, then copy it or open it directly in your chosen platform
Get inspired with new ideas
Get AI-generated suggestions to expand your product with features that will surprise your users
Frequently Asked Questions
Everything you need to know about creating better prompts for your Lovable projects
Still have questions?
Can't find what you're looking for? We're here to help!
