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?
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
CashFlowChartandSalesByMarketplacePie, 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
typefield (which uses theExpenseTypeenum)[cite: 4].recharts(already installed in the project) to build a<PieChart>with<Pie>and<Cell>components for colors[cite: 4].Files to Modify:
app/routes/dashboard.tsx(aggregate expense data in loader, add component to layout)[cite: 4]app/blocks/dashboard/expense-categories-chart.tsx[cite: 4]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?