proposal-ai

Develop authentication routes using JWT for secure user login and session management.

Create API endpoints for proposal creation, retrieval, and management, accessible by all personas.

Create API endpoints for managing document templates, accessible by all personas.

As a frontend developer, implement the FeaturesSection on the Landing page. This section displays a list of features with icons, titles, and descriptions. Each feature uses SVG icons for visual representation. Ensure the layout is responsive and visually appealing. This section is accessible to all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the Footer on the Landing page. This section includes brand information, navigation links, and legal links. Ensure the footer is responsive and includes the correct links to other pages. This section is accessible to all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the HeroSection on the Landing page. This section features a background with animated orbs, a badge, a title with an accent, a subtitle, and action buttons. It also includes trust indicators with icons and statistics. Ensure animations and layout are responsive. This section is accessible to all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the PersonasSection on the Landing page. This section displays different personas with icons, titles, and descriptions. Ensure the layout is responsive and visually appealing. This section is accessible to all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the TemplateCarousel on the Landing page. This section features a carousel of templates with titles, types, previews, colors, and prices. It uses state hooks to manage the flipped state of cards and a ref for scrolling. Ensure the carousel is interactive and responsive. This section is accessible to all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the LoginHero section which includes a welcoming message for users returning to ProposalFlow. This section features a headline and subheadline within a styled 'login-hero' class, and a decorative orb element. Ensure the design aligns with the existing styles and integrates smoothly with the rest of the page. This section is accessible to all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

Create API endpoints for managing documents, including proposals, quotations, invoices, and contracts. Ensure endpoints support creation, retrieval, update, and deletion operations.

Design and implement database models for documents, including proposals, quotations, invoices, and contracts. Ensure models include necessary fields for business, client, project, and pricing details.

Integrate Claude API for AI-generated proposal sections.

Develop functionality to generate and download proposals as premium PDFs.

Implement RBAC to manage access to different pages and actions based on user roles.

As a frontend developer, implement the LoginCredentials section which includes a form for user authentication. This section uses React state hooks to manage email, password, and form validation errors. It features input fields for email and password, a toggle for password visibility, and client-side validation. The form simulates a login process with a loading state and a demo alert for successful login. This section is accessible to all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the LoginSocial section which provides social login options. This section includes buttons for Google and GitHub login, each with corresponding SVG icons. The layout features a divider with text 'Or continue with' to separate the social login options from the main login form. This section is accessible to all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the LoginFooterLinks section which provides navigation links for users who need to register or have forgotten their password. This section includes links styled within a 'login-footer' class, ensuring they are accessible and visually consistent with the rest of the page. This section is accessible to all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the Navbar section for the Dashboard page. This component includes navigation links to various pages such as Landing, Login, Dashboard, Templates, Wizard, Document, and Settings. It features a responsive design with a hamburger menu for mobile views, a scroll effect that changes the navbar style, and conditional rendering of links based on user persona access. Ensure the Navbar integrates with the existing login page components. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a Tech Lead, verify the end-to-end integration between the Proposal frontend implementation and the Proposal backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a Tech Lead, verify the end-to-end integration between the Template frontend implementation and the Template backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

As a Tech Lead, verify the end-to-end integration between the Document frontend implementation and the Document backend API. Ensure data flows correctly, API responses are handled properly in the UI, and all interactions work as expected.

Conduct QA testing for the proposal creation and download workflow.

As a frontend developer, implement the DashboardHeader section for the Dashboard page. This component displays the main title 'Dashboard' and a subtitle describing the page's purpose. It includes a call-to-action button linking to the Wizard page for creating a new proposal. Ensure the design aligns with the overall dashboard theme and is accessible to all personas. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the WelcomeBanner section for the Dashboard page. This component greets the user by name and provides a daily snapshot of their document statistics, including documents created, pending actions, and accepted documents. It also includes a pro tip for using templates. Ensure the design is visually appealing and responsive. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the QuickActionCards section for the Dashboard page. This component provides quick access to actions such as creating a proposal, browsing templates, viewing settings, and downloading recent documents. Each card includes an icon, title, description, and a link to the respective page. Ensure the cards are responsive and accessible to all personas. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the DocumentTabs section for the Dashboard page. This component allows users to switch between different document categories such as All, Proposals, Quotations, Contracts, and Invoices. It uses a tabbed interface with active state management. Ensure the tabs are accessible and responsive. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the DocumentCards section for the Dashboard page. This component displays a list of documents with details such as title, client, date, and status. It includes action buttons for viewing, downloading, duplicating, and deleting documents. Ensure the design is responsive and supports dynamic data rendering. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the DocumentPagination section for the Dashboard page. This component provides pagination controls for navigating through multiple pages of documents. It includes buttons for previous and next page navigation and displays the current page number. Ensure the pagination is responsive and integrates seamlessly with the document list. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the Footer section for the Dashboard page. This component includes branding, a tagline, and links to various pages such as Templates, Create Document, Dashboard, Landing, Login, Register, Privacy Policy, and Terms of Service. Ensure the design is consistent with the rest of the application and responsive. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the TemplatesHero section which includes a search input and document type tabs. The section should allow users to search templates by name or keyword and filter by document type (All, Proposals, Quotations, Invoices, Contracts). The search input should update the searchValue state and trigger the onSearch callback. The document type tabs should update the activeTab state and trigger the onDocumentTypeChange callback. This section is accessible by all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the WizardHeader section for the Wizard page. This section includes a breadcrumb navigation with links to the Dashboard and the current step 'New Proposal'. It features a 3D spinning torus knot using @react-three/fiber and framer-motion for animations. The header displays the current step and total steps dynamically. Ensure that the breadcrumb link to the Dashboard is conditionally shown based on persona access. This section is accessible by all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the SettingsHeader section which includes a breadcrumb navigation and a title with a subtitle. This section is accessible by Agency and Software Company personas and should display the current page as 'Settings'. Ensure the breadcrumb navigation links back to the Home page. This section depends on the Dashboard page implementation. Page access: Agency, Software Company only.

Conduct end-to-end testing for the entire ProposalFlow AI application, ensuring all user flows function correctly and the integration between frontend and backend is seamless.

As a frontend developer, implement the WizardProgress section for the Wizard page. This section visually represents the progress of the wizard using a progress bar and step indicators. It uses framer-motion for animations to smoothly transition the progress bar width and step indicators. The progress is calculated based on the active step state. This section is accessible by all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the WizardStepContainer section for the Wizard page. This section handles the dynamic rendering of different steps in the wizard, allowing users to input business, client, project, and pricing details. It uses React state to manage form data and active steps, and includes 3D elements using @react-three/fiber. This section is accessible by all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the SettingsNav section which includes a navigation menu with tabs for Profile, Business Details, Notifications, Account Security, Billing, and Danger Zone. This section uses state to track the active tab and updates the URL hash on tab click. It is accessible by Agency and Software Company personas. Page access: Agency, Software Company only.

As a frontend developer, implement the ProfileBasicInfo section which allows users to update their display name, email, and bio. This section includes form validation and a save confirmation toast. It is accessible by Agency and Software Company personas. Page access: Agency, Software Company only.

As a frontend developer, implement the ProfileAvatar section which allows users to upload and remove their profile picture. This section uses a file input and displays the uploaded image or initials as a placeholder. It is accessible by Agency and Software Company personas. Page access: Agency, Software Company only.

As a frontend developer, implement the BusinessCompanyInfo section which allows users to update their company name, phone, email, and website. This section includes form validation and a save confirmation toast. It is accessible by Agency and Software Company personas. Page access: Agency, Software Company only.

As a frontend developer, implement the BusinessLogoAndTax section which allows users to upload their business logo and enter their GST number. This section includes a file input for the logo and form validation for the GST number. It is accessible by Agency and Software Company personas. Page access: Agency, Software Company only.

As a frontend developer, implement the BusinessAddress section which allows users to update their business address including street, city, state, postal code, and country. This section includes form validation and a save confirmation toast. It is accessible by Agency and Software Company personas. Page access: Agency, Software Company only.

As a frontend developer, implement the NotificationPrefsSection which allows users to toggle their notification preferences for email and SMS alerts. This section uses state to manage preferences and simulates auto-save. It is accessible by Agency and Software Company personas. Page access: Agency, Software Company only.

As a frontend developer, implement the PasswordChangeForm section which allows users to change their password. This section includes password strength calculation, validation for matching passwords, and a save confirmation toast. It is accessible by Agency and Software Company personas. Page access: Agency, Software Company only.

As a frontend developer, implement the DocumentHeader section which includes a breadcrumb navigation and document identity details. The breadcrumb allows navigation back to the Dashboard and Recent Documents. The document identity displays the title 'Website Redesign Proposal', a badge indicating 'Proposal', and metadata such as the client 'Acme Corp' and creation date 'March 15, 2025'. This section is accessible by all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the WizardActions section for the Wizard page. This section includes navigation buttons to move between steps, save drafts, and generate the final document. It uses React state to manage the current step and draft save status, with framer-motion for button animations. Ensure that the 'Generate Document' button is only active on the final step. This section is accessible by all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the DocumentPreview section which includes interactive features such as zooming and page navigation. Users can zoom in and out of the document (50% to 200%) and navigate between pages (1 to 4). The document content includes sections like 'Executive Summary' and 'Scope of Work'. This section is accessible by all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the DocumentMetadata section which displays key document details in a grid format. Each metadata item includes a label and value, with a copy button for the 'Document ID'. Metadata includes 'Created', 'Last Modified', 'Client Email', and 'Pricing Summary'. This section is accessible by all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the DocumentActionBar section which provides action buttons for 'Download PDF', 'Print', 'Edit / Regenerate', and 'Share'. Each button triggers an alert or action, such as starting a download or opening a print dialog. This section is accessible by all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).

As a frontend developer, implement the DocumentStatusIndicator section which shows the current document status with a badge and provides a delete button. The status can be 'Draft', 'Finalized', 'Sent', or 'Accepted'. A confirmation dialog appears when attempting to delete the document. This section is accessible by all personas: Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company. Page access: shared by all personas (Agency, Architect/Designer, Consultant, Freelancer, Marketing Agency, Software Company).