[FEATURE] Add Expense Categories Breakdown Chart to Dashboard #175

name: 💡 Feature Request
about: Suggest an idea or enhancement for FlipTrack
title: "[FEATURE] Add Expense Categories Breakdown Chart to Dashboard"
labels: enhancement, ECSoC'26
assignees: ""

💡 Feature Description

Add an Expense Categories Breakdown chart (donut/pie chart or horizontal bar chart) to the Dashboard that visually shows the distribution of expenses by type[cite: 4]. Each category should be color-coded and show the percentage and dollar amount[cite: 4].

Problem Statement

The Dashboard currently shows revenue/expense data in CashFlowChart and SalesByMarketplacePie, but there is no dedicated chart visualizing how expenses break down by category (Shipping, Marketplace Fees, Bot Fees, Supplies, Other)[cite: 4]. This makes it hard for resellers to quickly identify where their money is going[cite: 4].

Proposed Solution

The Dashboard loader already fetches all expenses, so they just need to be grouped by the type field (which uses the ExpenseType enum)[cite: 4].

• Use recharts (already installed in the project) to build a <PieChart> with <Pie> and <Cell> components for colors[cite: 4].
• Place the new chart in the dashboard grid alongside existing charts[cite: 4].
• Use the existing CSS variable color palette for category colors[cite: 4].

Files to Modify:

• app/routes/dashboard.tsx (aggregate expense data in loader, add component to layout)[cite: 4]
• New: app/blocks/dashboard/expense-categories-chart.tsx[cite: 4]
• New: app/blocks/dashboard/expense-categories-chart.module.css[cite: 4]

Alternative Approaches

A horizontal bar chart could also work, but a donut/pie chart matches the existing UI patterns used for marketplace sales[cite: 4].

Mockups / Wireframes

N/A

Additional Context

N/A

Are You Willing to Contribute?

• Yes, I'd like to work on this!
• I'd like to help, but I need guidance
• No, I'm just suggesting