rising-product

byAnju Joseph

# Product Requirements Document — "InvoiceLite" ## 1. Overview InvoiceLite is a simple billing web app for freelancers and small businesses to manage clients, create and send invoices, and track which invoices are paid, unpaid, or overdue. The goal is a fast, clean tool that replaces spreadsheets — not a full accounting suite. ## 2. Target users Freelancers / solo business owners who bill a handful of clients each month. Single-owner account for v1 (one business, one login) — no team members yet. ## 3. Goals Create a professional invoice in under a minute. Always know how much money is outstanding vs. paid. Send an invoice to a client by email with one click. ## 4. Core features (must-have) Account & auth — the owner can sign up, log in, and log out. All data is private to their account. Clients — add, edit, and delete clients; each client has a name, email, and billing address. Client list — a searchable list of all clients. Create invoice — pick a client, add line items (description, quantity, unit price), set an issue date and due date. The app auto-generates a sequential invoice number and calculates subtotal, tax, and total. Tax — apply a default tax rate (configurable in settings) to an invoice. Invoice list — see all invoices with their status (Draft, Sent, Paid, Overdue), client, amount, and due date. Invoice detail — view a single invoice with all line items and totals. Send invoice — mark an invoice as "Sent" and email it to the client (with a link to view it). Mark as paid — mark a sent invoice as "Paid"; overdue = sent + past its due date and not paid. Dashboard — a home screen showing total outstanding, total paid (this month), overdue count, and the most recent invoices. Settings — set the business name, logo, currency, and default tax rate. ## 5. Pages / screens Login / Sign-up Dashboard (home) Clients (list) Client detail / add-edit client Invoices (list) Create / edit invoice Invoice detail Settings ## 6. Data model User — email, passwordHash, businessName, logoUrl, currency, defaultTaxRate. Client — name, email, address, ownerId. Invoice — number, clientId, issueDate, dueDate, status (draft/sent/paid/overdue), taxRate, subtotal, taxAmount, total, ownerId. LineItem — invoiceId, description, quantity, unitPrice, amount. ## 7. Key user flows Bill a client: Dashboard → Create invoice → pick client → add line items → save (Draft) → Send (email) → later Mark as paid. Onboard: Sign up → Settings (business name, currency, tax) → add first client → create first invoice. ## 8. Non-functional requirements Fully responsive (works on phone, tablet, and desktop). All monetary amounts handled as integer minor units (cents) and formatted with the chosen currency. Every page except login/sign-up requires an authenticated session. Invoice numbers are unique and sequential per account. ## 9. Out of scope (v1) Recurring / subscription billing. Online card payments (Stripe checkout). Multiple team members / roles. Multi-currency per invoice. Expense tracking and financial reports beyond the dashboard.

LandingLoginSettingsClientsEmailDashboardInvoicesPaymentSignupInvoice
Landing

Comments (0)

No comments yet. Be the first!

Project Tasks

79
#1

Setup Database Schema

Backlog

Design and implement the database schema for users, clients, invoices, and line items using MariaDB.

AI 80%
Human 20%
High Priority
2 days
Data Engineer
#10

Implement CTASection for Landing

Backlog

As a frontend developer, implement the CTASection for the Landing page. This section includes a motion.div component with animations for opacity and vertical translation, triggered when the section comes into view. It features a call-to-action message encouraging freelancers to start a free trial, with a link to the Signup page. Ensure the animations are smooth and the link is styled according to the design. Page access: Freelancer only.

AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#11

Implement FeaturesSection for Landing

Backlog

As a frontend developer, implement the FeaturesSection for the Landing page. This section displays a grid of feature cards, each with an SVG icon, title, description, and background color. The cards animate into view with motion.div components, using opacity and vertical translation. Ensure the icons and colors match the design specifications. Page access: Freelancer only.

AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#12

Implement Footer for Landing

Backlog

As a frontend developer, implement the Footer for the Landing page. This section includes branding elements, navigation links, and copyright information. Ensure the links to restricted pages like Dashboard and Clients are conditionally shown based on the user's persona (Freelancer only). Page access: Freelancer only.

AI 85%
Human 15%
Medium Priority
0.5 days
Frontend Developer
#13

Implement HeroSection for Landing

Backlog

As a frontend developer, implement the HeroSection for the Landing page. This section features a complex animation sequence using motion.div components to simulate the creation, sending, and payment of an invoice. It involves multiple phases and keyframe animations for a document element. Ensure the animations are smooth and responsive. Page access: Freelancer only.

AI 95%
Human 5%
High Priority
2 days
Frontend Developer
#14

Implement HowItWorksSection for Landing

Backlog

As a frontend developer, implement the HowItWorksSection for the Landing page. This section outlines the steps to using the product, with each step represented by a motion.div component that animates into view. Ensure the steps are clearly presented and the animations are consistent with the design. Page access: Freelancer only.

AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#15

Implement Navbar for Landing

Backlog

As a frontend developer, implement the Navbar for the Landing page. This component includes a responsive menu with a toggle button for mobile views. Ensure that links to restricted pages like Dashboard and Clients are conditionally shown based on the user's persona (Freelancer only). Page access: Freelancer only.

AI 85%
Human 15%
High Priority
1 day
Frontend Developer
#16

Implement StatsSection for Landing

Backlog

As a frontend developer, implement the StatsSection for the Landing page. This section displays key statistics about the product using motion.div components for animated entry. Ensure the statistics are accurate and the animations are smooth. Page access: Freelancer only.

AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#29

Implement OutstandingMetric for Dashboard

Backlog

As a frontend developer, implement the OutstandingMetric section using the MetricCard component. It displays the total outstanding amount with an upward trend icon. This section is accessible by Freelancer ONLY. Page access: Freelancer only.

AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#30

Implement PaidMetric for Dashboard

Backlog

As a frontend developer, implement the PaidMetric section using the MetricCard component. It shows the total paid amount with an upward trend icon. This section is accessible by Freelancer ONLY. Page access: Freelancer only.

AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#31

Implement OverdueMetric for Dashboard

Backlog

As a frontend developer, implement the OverdueMetric section using the MetricCard component. It displays the count of overdue invoices with a badge if there are any. This section is accessible by Freelancer ONLY. Page access: Freelancer only.

AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#32

Implement RevenueMetric for Dashboard

Backlog

As a frontend developer, implement the RevenueMetric section using the MetricCard component. It shows the monthly revenue with an upward trend icon. This section is accessible by Freelancer ONLY. Page access: Freelancer only.

AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#33

Implement QuickActionsRow for Dashboard

Backlog

As a frontend developer, implement the QuickActionsRow section which provides quick access buttons for creating invoices, adding clients, and viewing all invoices and clients. This section is accessible by Freelancer ONLY. Page access: Freelancer only.

AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#34

Implement OverdueAlert for Dashboard

Backlog

As a frontend developer, implement the OverdueAlert section which displays an alert if there are overdue invoices, showing the count and earliest due date. It includes a dismiss button and a link to view overdue invoices. This section is accessible by Freelancer ONLY. Page access: Freelancer only.

AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#35

Implement RecentInvoicesTable for Dashboard

Backlog

As a frontend developer, implement the RecentInvoicesTable section which displays a table of recent invoices with mock data. It includes clickable rows that navigate to invoice details and uses status-based styling. This section is accessible by Freelancer ONLY. Page access: Freelancer only.

AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#43

Implement InvoicesSearchBar for Invoices

Backlog

As a frontend developer, implement the InvoicesSearchBar section which includes a search input field with an icon for searching invoices by client or number. This section is accessible by Freelancers only and should be styled according to the provided CSS. Page access: Freelancer only.

AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#44

Implement InvoicesFilterPanel for Invoices

Backlog

As a frontend developer, implement the InvoicesFilterPanel section which includes filter options for invoice status and date range. This section is accessible by Freelancers only and should allow users to select statuses and date ranges, with a reset button to clear filters. Ensure the UI is styled according to the provided CSS. Page access: Freelancer only.

AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#45

Implement InvoicesSortControls for Invoices

Completed in 1h 48m 7s
Done

As a frontend developer, implement the InvoicesSortControls section which includes a dropdown for sorting invoices by various criteria such as client name, amount, due date, status, and issue date. This section is accessible by Freelancers only and should be styled according to the provided CSS. Page access: Freelancer only.

Task Progress
100%
StagingCompleted
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#46

Implement InvoicesTable for Invoices

Backlog

As a frontend developer, implement the InvoicesTable section which displays a list of invoices with details such as invoice number, client, amount, status, issue date, and due date. This section is accessible by Freelancers only and should include status badges styled according to the provided CSS. Ensure the table is responsive and accessible. Page access: Freelancer only.

AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#47

Implement InvoicesPagination for Invoices

Completed in 52m 31s
Done

As a frontend developer, implement the InvoicesPagination section which includes pagination controls for navigating through pages of invoices. This section is accessible by Freelancers only and should be styled according to the provided CSS. Ensure the pagination is functional and responsive. Page access: Freelancer only.

Task Progress
100%
StagingCompleted
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#2

Implement Auth API

Backlog

Develop authentication API endpoints for sign up, login, and logout using JWT for session management.

Depends on:#1
Waiting for dependencies
AI 70%
Human 30%
High Priority
1.5 days
Backend Developer
#3

Develop Clients API

Backlog

Create API endpoints for adding, editing, deleting, and listing clients, accessible by Freelancer only.

Depends on:#1
Waiting for dependencies
AI 75%
Human 25%
Medium Priority
2 days
Backend Developer
#4

Create Invoices API

Backlog

Implement API endpoints for creating, viewing, sending, and marking invoices as paid, accessible by Freelancer.

Depends on:#1
Waiting for dependencies
AI 80%
Human 20%
High Priority
3 days
Backend Developer
#17

Implement Navbar for Login

Backlog

As a frontend developer, implement the Navbar section for the Login page. This component includes a logo, navigation links to Dashboard, Clients, and Invoices, and authentication links for Log In and Sign Up. The Navbar uses a state hook to toggle the menu open and closed. Ensure that links to restricted pages like Dashboard and Clients are conditionally shown based on the Freelancer persona access. This component may already exist from the Landing page. Page access: Freelancer only.

Depends on:#10
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#77

Setup Recurring Billing Schema

Backlog

Design and implement the database schema for recurring billing, including tables for billing schedules and linking them to clients and invoices.

Depends on:#1
Waiting for dependencies
AI 0%
Human 100%
Medium Priority
2 days
Data Engineer
#5

Integrate Stripe Payments

Backlog

Integrate Stripe API for processing online card payments and updating invoice status to paid.

Depends on:#4
Waiting for dependencies
AI 70%
Human 30%
High Priority
2.5 days
Backend Developer
#6

Setup RBAC Middleware

Backlog

Implement role-based access control middleware to protect routes based on user roles.

Depends on:#2
Waiting for dependencies
AI 60%
Human 40%
Medium Priority
1 day
Backend Developer
#8

QA Authentication Flow

Backlog

Test the authentication flow including sign up, login, and logout for Freelancer.

Depends on:#2
Waiting for dependencies
AI 50%
Human 50%
High Priority
1 day
QA Engineer
#18

Implement LoginHero for Login

Backlog

As a frontend developer, implement the LoginHero section for the Login page. This component displays a welcoming message with a heading 'Welcome Back' and a subheading encouraging secure login to manage invoices and clients. It includes a decorative accent element for visual appeal. This section is accessible to the Freelancer persona only. Page access: Freelancer only.

Depends on:#17
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#19

Implement LoginFormInputs for Login

Backlog

As a frontend developer, implement the LoginFormInputs section for the Login page. This component includes input fields for email and password, with state management for email, password, showPassword, and rememberMe. It features a toggle button to show/hide the password and displays error states for invalid inputs. This section is accessible to the Freelancer persona only. Page access: Freelancer only.

Depends on:#17
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#20

Implement LoginFormActions for Login

Backlog

As a frontend developer, implement the LoginFormActions section for the Login page. This component includes a submit button that displays a loading spinner when processing and a 'Forgot password?' button that triggers a callback. It also displays error messages when login fails. This section is accessible to the Freelancer persona only. Page access: Freelancer only.

Depends on:#17
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#21

Implement LoginSocialAuth for Login

Backlog

As a frontend developer, implement the LoginSocialAuth section for the Login page. This component provides social login options with buttons for Google and GitHub authentication, and a prompt to sign up if the user doesn't have an account. This section is accessible to the Freelancer persona only. Page access: Freelancer only.

Depends on:#17
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#22

Implement Footer for Login

Backlog

As a frontend developer, implement the Footer section for the Login page. This component includes branding, product links, and account links. Ensure that links to restricted pages like Dashboard and Clients are conditionally shown based on the Freelancer persona access. This component may already exist from the Landing page. Page access: Freelancer only.

Depends on:#17
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#23

Implement SignupHero for Signup

Backlog

As a frontend developer, implement the SignupHero section for the Signup page. This section features animated text using the motion library, highlighting key value propositions like 'No credit card required' and 'Free 14-day trial'. Ensure animations respect user preferences for reduced motion. Page access: Freelancer only.

Depends on:#17
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#24

Implement SignupFormCard for Signup

Backlog

As a frontend developer, implement the SignupFormCard component for the Signup page. This component wraps the form elements and handles form submission. It should be styled to match the design specifications. Page access: Freelancer only.

Depends on:#17
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
0.5 days
Frontend Developer
#27

Implement SignupTrust for Signup

Backlog

As a frontend developer, implement the SignupTrust section for the Signup page. This section highlights trust pillars with icons and descriptions, using motion for animations on scroll and hover. Page access: Freelancer only.

Depends on:#17
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#28

Implement DashboardHeader for Dashboard

Backlog

As a frontend developer, implement the DashboardHeader section which displays a welcome message with the business name and the current date. It includes an 'Export' button with an SVG icon for exporting the dashboard report. This section is accessible by Freelancer ONLY and depends on the Login page's Navbar implementation. Page access: Freelancer only.

Depends on:#17
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#7

Setup Frontend Routing

Backlog

Implement routing shell for the application, ensuring protected navigation for authenticated users.

Depends on:#6
Waiting for dependencies
AI 70%
Human 30%
Medium Priority
1.5 days
Frontend Developer
#9

QA Invoice Management

Backlog

Test the invoice management flow including creation, sending, and marking as paid.

Depends on:#5#4
Waiting for dependencies
AI 50%
Human 50%
High Priority
1.5 days
QA Engineer
#25

Implement SignupFormInputs for Signup

Backlog

As a frontend developer, implement the SignupFormInputs component for the Signup page. This component includes input fields for email, password, and confirm password, with validation and password strength indicators. It uses state hooks to manage input focus and validation errors. Page access: Freelancer only.

Depends on:#24
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#36

Implement ClientsHeader for Clients

Backlog

As a frontend developer, implement the ClientsHeader section which includes a title, description, and an 'Add Client' button with an SVG icon. The button triggers the onAddClient callback. This section is accessible by Freelancers only and depends on the DashboardHeader from the Dashboard page. Page access: Freelancer only.

Depends on:#28
Waiting for dependencies
AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#42

Implement InvoicesPageHeader for Invoices

Backlog

As a frontend developer, implement the InvoicesPageHeader section which includes a breadcrumb navigation linking to the Dashboard and Invoices pages, a title, subtitle, and a call-to-action button to create a new invoice. This section is accessible by Freelancers only and must conditionally render links based on persona access. Ensure the breadcrumb and CTA button are styled according to the provided CSS. Page access: Freelancer only.

Depends on:#28
Waiting for dependencies
AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#48

Implement SettingsHeader for Settings

Backlog

As a frontend developer, implement the SettingsHeader section which includes a breadcrumb navigation linking back to the Dashboard and a title for the Settings page. This section is accessible by Freelancers only and should ensure that the breadcrumb reflects the current page accurately. Page access: Freelancer only.

Depends on:#28
Waiting for dependencies
AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#26

Implement SignupFormActions for Signup

Backlog

As a frontend developer, implement the SignupFormActions component for the Signup page. This component includes a checkbox for agreeing to terms, error handling, and a submit button with loading state animations. It uses motion for button animations. Page access: Freelancer only.

Depends on:#25
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#37

Implement ClientsSearch for Clients

Backlog

As a frontend developer, implement the ClientsSearch section which includes a search input with a clear button, status filter dropdown, and sort options. The section handles search term changes, status filter changes, and sort changes through respective callbacks. This section is accessible by Freelancers only. Page access: Freelancer only.

Depends on:#36
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#38

Implement ClientsTable for Clients

Backlog

As a frontend developer, implement the ClientsTable section which displays a list of clients in a table format with sortable columns for name, date added, and last invoice. It includes action buttons for viewing, editing, and deleting clients. This section is accessible by Freelancers only. Page access: Freelancer only.

Depends on:#36
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#39

Implement ClientsCardGrid for Clients

Backlog

As a frontend developer, implement the ClientsCardGrid section which displays clients in a card grid format. Each card shows client details and includes action buttons for viewing, editing, and deleting. This section is accessible by Freelancers only. Page access: Freelancer only.

Depends on:#36
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1.5 days
Frontend Developer
#40

Implement ClientsPagination for Clients

Backlog

As a frontend developer, implement the ClientsPagination section which provides pagination controls for navigating through pages of clients. It includes buttons for previous, next, and specific page numbers, and displays the current range of items. This section is accessible by Freelancers only. Page access: Freelancer only.

Depends on:#36
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#41

Implement ClientsActions for Clients

Backlog

As a frontend developer, implement the ClientsActions section which handles client addition, editing, and deletion through a modal interface. It includes form validation and error handling for client details. This section is accessible by Freelancers only. Page access: Freelancer only.

Depends on:#36
Waiting for dependencies
AI 90%
Human 10%
High Priority
2 days
Frontend Developer
#49

Implement SettingsNav for Settings

Backlog

As a frontend developer, implement the SettingsNav section which provides a navigation menu with links to various settings sections such as Business Settings, Tax Settings, and more. This section uses IntersectionObserver to highlight the active section and includes a mobile toggle for responsive design. It is accessible by Freelancers only. Page access: Freelancer only.

Depends on:#48
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#57

Implement InvoiceHeader for Invoice

Backlog

As a frontend developer, implement the InvoiceHeader section for the Invoice page. This section includes displaying the invoice number, client name, status, issue date, and due date. The status is styled dynamically based on its value (Draft, Sent, Paid, Overdue) using the STATUS_CLASS mapping. Ensure the back link to the Invoices page is functional and conditionally show navigation links based on persona access. This page is accessible by both Client (Payer) and Freelancer. Page access: shared by all personas (Client (Payer), Freelancer).

Depends on:#42
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#50

Implement BusinessSettings for Settings

Backlog

As a frontend developer, implement the BusinessSettings section which allows Freelancers to update their business name, upload a logo, and select a default currency. This section includes form handling with state management for inputs and a success message upon saving changes. Page access: Freelancer only.

Depends on:#49
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#51

Implement TaxSettings for Settings

Backlog

As a frontend developer, implement the TaxSettings section which allows Freelancers to configure a default tax rate for invoices. This section includes a toggle to enable or disable tax and a form to submit changes with a success message. Page access: Freelancer only.

Depends on:#49
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#52

Implement StripeConnectionSettings for Settings

Backlog

As a frontend developer, implement the StripeConnectionSettings section which displays the connection status with Stripe and allows Freelancers to reconnect if disconnected. This section includes a status indicator and a button to simulate reconnection. Page access: Freelancer only.

Depends on:#49
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#53

Implement StripeKeyManagement for Settings

Backlog

As a frontend developer, implement the StripeKeyManagement section which allows Freelancers to manage their Stripe API keys. This section includes tabs for test and live keys, options to show/hide keys, and a copy functionality with a success message. Page access: Freelancer only.

Depends on:#49
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#54

Implement RecurringBillingSettings for Settings

Backlog

As a frontend developer, implement the RecurringBillingSettings section which allows Freelancers to enable recurring invoices and set billing intervals. This section includes toggles for enabling features and a form to save settings with a success message. Page access: Freelancer only.

Depends on:#49
Waiting for dependencies
AI 85%
Human 15%
Medium Priority
1 day
Frontend Developer
#55

Implement AccountSettings for Settings

Backlog

As a frontend developer, implement the AccountSettings section which allows Freelancers to update their email and password. This section includes form handling for email and password changes, with validation and success messages. Page access: Freelancer only.

Depends on:#49
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#56

Implement DangerZone for Settings

Backlog

As a frontend developer, implement the DangerZone section which allows Freelancers to perform irreversible actions such as exporting data and deleting invoices or accounts. This section includes confirmation modals for critical actions and success messages. Page access: Freelancer only.

Depends on:#49
Waiting for dependencies
AI 85%
Human 15%
High Priority
1.5 days
Frontend Developer
#58

Implement InvoiceDetailsSection for Invoice

Backlog

As a frontend developer, implement the InvoiceDetailsSection for the Invoice page. This section displays client billing details including name, email, and address. If the invoice status is 'Draft', an edit button should be available to modify billing details. This page is accessible by both Client (Payer) and Freelancer. Page access: shared by all personas (Client (Payer), Freelancer).

Depends on:#57
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#59

Implement InvoiceItemsTable for Invoice

Backlog

As a frontend developer, implement the InvoiceItemsTable for the Invoice page. This section displays a table of invoice items with columns for description, quantity, unit price, and amount. If the invoice status is 'Draft', action buttons for editing and deleting items should be available. The table also calculates and displays the subtotal. This page is accessible by both Client (Payer) and Freelancer. Page access: shared by all personas (Client (Payer), Freelancer).

Depends on:#57
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#60

Implement InvoiceTotalsPanel for Invoice

Backlog

As a frontend developer, implement the InvoiceTotalsPanel for the Invoice page. This section displays the subtotal, tax amount (if applicable), and total due. The tax amount is shown only if the tax rate is greater than zero. This page is accessible by both Client (Payer) and Freelancer. Page access: shared by all personas (Client (Payer), Freelancer).

Depends on:#57
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
0.5 days
Frontend Developer
#61

Implement InvoicePaymentSection for Invoice

Backlog

As a frontend developer, implement the InvoicePaymentSection for the Invoice page. This section displays payment status and options based on the invoice status. If the invoice is paid, show a confirmation with the paid date. If awaiting payment, display a payment link and QR code for scanning. The copy link functionality should be implemented. This page is accessible by both Client (Payer) and Freelancer. Page access: shared by all personas (Client (Payer), Freelancer).

Depends on:#57
Waiting for dependencies
AI 90%
Human 10%
High Priority
1.5 days
Frontend Developer
#62

Implement InvoiceActionButtons for Invoice

Backlog

As a frontend developer, implement the InvoiceActionButtons for the Invoice page. This section includes buttons for sending the invoice, marking it as paid, downloading as PDF, printing, editing, and deleting. Button availability depends on the invoice status. This page is accessible by both Client (Payer) and Freelancer. Page access: shared by all personas (Client (Payer), Freelancer).

Depends on:#57
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#63

Implement EmailHero for Email

Backlog

As a frontend developer, implement the EmailHero section for the Email page. This section includes a headline with a span for accent styling and a subheading describing the automatic invoice sending feature. It also includes a background div for visual enhancement. This section is accessible by the Client (Payer) persona only and must depend on the Invoice page's InvoiceHeader task to ensure proper integration. Page access: Client (Payer) only.

Depends on:#57
Waiting for dependencies
AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#71

Implement PaymentHeader for Payment

Backlog

As a frontend developer, implement the PaymentHeader section which displays the invoice number, client name, amount due, and due date. This section includes breadcrumb navigation and formats the amount due using the Intl.NumberFormat API. It is accessible by the Client (Payer) persona only. Ensure that the breadcrumb links are conditionally shown based on persona access. Page access: Client (Payer) only.

Depends on:#57
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#64

Implement EmailPreviewCard for Email

Backlog

As a frontend developer, implement the EmailPreviewCard section for the Email page. This section displays a preview of the client's inbox with sender details, subject, and a summary of the invoice. It includes interactive elements like a 'View & Pay Invoice' button with a preventDefault action. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.

Depends on:#63
Waiting for dependencies
AI 90%
Human 10%
High Priority
1 day
Frontend Developer
#65

Implement EmailWorkflow for Email

Backlog

As a frontend developer, implement the EmailWorkflow section for the Email page. This section outlines the steps of the email workflow using a series of icons and descriptions. It maps through a STEPS array to dynamically render each step. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.

Depends on:#63
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#66

Implement EmailCustomization for Email

Backlog

As a frontend developer, implement the EmailCustomization section for the Email page. This section features customizable email options with icons and descriptions, rendered from a FEATURES array. It allows users to personalize email subject lines, payment instructions, and more. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.

Depends on:#63
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1.5 days
Frontend Developer
#67

Implement EmailTracking for Email

Backlog

As a frontend developer, implement the EmailTracking section for the Email page. This section provides tracking features for email interactions, including open tracking, click tracking, and bounce detection. It uses a TRACKERS array to render each feature with an icon and description. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.

Depends on:#63
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1.5 days
Frontend Developer
#68

Implement EmailCTA for Email

Backlog

As a frontend developer, implement the EmailCTA section for the Email page. This section includes a call-to-action for users to start using the service, with links to sign up or log in. It features a headline, descriptive text, and two action links. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.

Depends on:#63
Waiting for dependencies
AI 90%
Human 10%
High Priority
0.5 days
Frontend Developer
#69

Implement EmailFAQDelivery for Email

Backlog

As a frontend developer, implement the EmailFAQDelivery section for the Email page. This section provides FAQs related to email delivery and reliability, using a toggleable accordion interface. It uses a useState hook to manage the open state of each FAQ item. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.

Depends on:#63
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#70

Implement EmailFAQCustomization for Email

Backlog

As a frontend developer, implement the EmailFAQCustomization section for the Email page. This section provides FAQs related to email customization and branding, using a toggleable accordion interface. It uses a useState hook to manage the open state of each FAQ item. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.

Depends on:#63
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#72

Implement OrderSummary for Payment

Backlog

As a frontend developer, implement the OrderSummary section which lists line items with descriptions, quantities, and prices. It calculates and displays the subtotal, tax, and total due using the Intl.NumberFormat API. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.

Depends on:#71
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#73

Implement PaymentMethodSelector for Payment

Backlog

As a frontend developer, implement the PaymentMethodSelector section which allows users to select between 'Credit / Debit Card' and 'ACH Bank Transfer' payment methods. Each option includes an icon and description, and the selected method is highlighted. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.

Depends on:#71
Waiting for dependencies
AI 90%
Human 10%
Medium Priority
1 day
Frontend Developer
#75

Implement TrustBadges for Payment

Backlog

As a frontend developer, implement the TrustBadges section which displays security and compliance badges such as 'Powered by Stripe', '256-bit SSL Encryption', 'PCI DSS Compliant', and 'Fraud Protection'. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.

Depends on:#71
Waiting for dependencies
AI 90%
Human 10%
Low Priority
0.5 days
Frontend Developer
#76

Create Recurring Billing API

Backlog

Develop API endpoints to support setting up and managing recurring billing for clients. This includes creating, updating, and deleting recurring billing schedules, and generating invoices automatically based on these schedules.

Depends on:#71
Waiting for dependencies
AI 0%
Human 100%
High Priority
3 days
Backend Developer
#74

Implement CardPaymentForm for Payment

Backlog

As a frontend developer, implement the CardPaymentForm section which includes fields for card number, expiry date, CVC, cardholder name, and billing address. It uses state hooks to manage form inputs and includes basic validation. This section is accessible by the Client (Payer) persona only. Page access: Client (Payer) only.

Depends on:#73
Waiting for dependencies
AI 85%
Human 15%
High Priority
2 days
Frontend Developer
#78

Integrate Recurring Billing

Backlog

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

Depends on:#54#76
Waiting for dependencies
AI 0%
Human 100%
High Priority
1.5 days
Tech Lead
#79

QA Recurring Billing

Backlog

Test the recurring billing flow including setup, automatic invoice generation, and schedule management.

Depends on:#78
Waiting for dependencies
AI 0%
Human 100%
Medium Priority
1 day
QA Engineer
Landing design preview
Email: Open Invoice Link
Invoice: View Details
Invoice: Click Pay
Payment: Enter Card Details
Payment: Complete Checkout
Invoice: View Paid Confirmation
Landing design preview
Email: Open Invoice Link
Invoice: View Details
Invoice: Click Pay
Payment: Enter Card Details
Payment: Complete Checkout
Invoice: View Paid Confirmation