Create Dashboard with Invoice Analytics

[desoga10]

Description

Build a comprehensive dashboard that gives users instant insights into their business performance through visual statistics and charts.

Why This Matters

Users need to quickly understand their business health without manually calculating totals or searching through invoices. A visual dashboard enables data-driven decisions at a glance.

Key Metrics to Display

Summary Cards:

• 💰 Total Revenue (monthly/yearly with % change)
• 📋 Total Invoices (count by status)
• ⏰ Outstanding Payments (overdue amount)
• 📈 Average Invoice Value

Visual Charts:

• Paid vs Unpaid Ratio - Donut chart showing payment status distribution
• Revenue Trends - Line chart showing last 6-12 months
• Recent Activity - Timeline of last 10 invoices
• Top Clients - Horizontal bar chart of top 5 clients by revenue
• Monthly Comparison - Bar chart comparing current vs previous month

Technical Details

Chart Library: Recharts (already available in project)

New Route: /dashboard or make it the home page after login

Data Source: Aggregate from existing invoices table in Supabase

Performance: Consider caching aggregated data for faster loads

Design Considerations

• Responsive grid layout (works on mobile, tablet, desktop)
• Loading skeletons while fetching data
• Empty state for new users with no invoices
• Date range selector (last 30/90 days, year, custom)
• Use existing color scheme for consistency

Acceptance Criteria

• Dashboard route created and accessible
• All metrics calculate and display correctly
• Charts render with real data
• Responsive on all screen sizes
• Loading states implemented
• Empty states for new users
• Data updates when invoices change
• No performance lag when loading

Labels

enhancement, feature, analytics, help wanted

Priority

High - Key feature for user engagement

Estimated Complexity

Medium - Requires data aggregation, multiple chart types, responsive layout