Skip to content

feat: Add Invoice Analytics Dashboard with Chart.js #91

Description

@adarsh-yadav1

Feature Request: Invoice Analytics Dashboard with Chart.js

Problem
There is currently no visual summary of invoice data — users have no way to quickly understand their billing health (how much is collected, what's overdue, monthly trends).

Solution
Add an Analytics Dashboard page using Chart.js with:

  • Summary cards (total invoices, paid, overdue, total amount, collected)
  • Doughnut chart: status breakdown (Paid / Pending / Overdue / Draft)
  • Bar chart: monthly invoice totals vs collected amount

Acceptance criteria alignment

  • Chart.js is listed in the project's required tech skills
  • Dashboard supports the "end-to-end workflow: create → validate → store → export → pay" visibility goal

Scope

  • src/components/Dashboard/Dashboard.tsx (new)
  • src/components/Dashboard/InvoiceSummaryCards.tsx (new)
  • src/pages/Home.tsx (modified)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions