Background
The admin dashboard (/admin) currently shows raw data tables for suppliers, nonprofits, and product requests. There is no visual summary of platform activity — admins have no quick way to understand food distribution trends, claim rates, or nonprofit/supplier engagement at a glance.
What needs to happen
1. Create a Figma mockup of the dashboard charts section
- Design a layout for the charts panel that sits above the existing tables on
/admin
- Include both light and dark mode variants
- Show responsive behavior (stacked on mobile, grid on desktop)
2. Define the data flow for each chart — what data it needs, where it comes from, and whether a new API endpoint is required
Charts to Design(Examples)
| # |
Chart |
Type |
| 1 |
Product Requests by Status |
Pie / Donut |
| 2 |
Food Type Breakdown |
Bar |
| 3 |
Nonprofit Organization Types |
Pie / Donut |
| 4 |
Supplier Cadence Distribution |
Bar |
| 5 |
Top Claiming Nonprofits |
Horizontal Bar |
Figma Design Notes
- Charts panel should use the same card style as the rest of the admin page (
rounded-xl, shadow-lg, bg-white / dark:bg-gray-800)
- Use a 2-column grid for charts on desktop, single column on mobile
- Label each chart clearly; include a legend where applicable
- Keep color palette consistent with the existing slate/blue theme
Acceptance Criteria
Background
The admin dashboard (
/admin) currently shows raw data tables for suppliers, nonprofits, and product requests. There is no visual summary of platform activity — admins have no quick way to understand food distribution trends, claim rates, or nonprofit/supplier engagement at a glance.What needs to happen
1. Create a Figma mockup of the dashboard charts section
/admin2. Define the data flow for each chart — what data it needs, where it comes from, and whether a new API endpoint is required
Charts to Design(Examples)
Figma Design Notes
rounded-xl,shadow-lg,bg-white/dark:bg-gray-800)Acceptance Criteria