Data dashboard implementation

[TrickkyRicky]

Overview

This PR delivers the full data dashboard implementation across all three user roles (Admin, Nonprofit, Supplier), refactors page components into maintainable hooks and sub-components

---

What Changed

New Chart Components (src/components/charts/)

Five reusable chart components built on Recharts and wired into all three dashboards:

• BarChartComponent.tsx — horizontal and vertical bar charts with pagination support
• LineChartComponent.tsx — time-series line charts
• AreaChartComponent.tsx — area/fill charts
• DonutChart.tsx — donut/pie breakdown charts
• KPICard.tsx — metric summary cards with icon support

---

Analytics API Routes (src/app/api/analytics/)

new endpoints for the dashboards, and they have test cases

Route	Description
/api/analytics/system-health	Total users, approval rate, avg claim time, product status counts
/api/analytics/product-distribution	Product type breakdown + protein sub-type counts
/api/analytics/product-status-trends	AVAILABLE / RESERVED / PENDING counts over time
/api/analytics/supplier-activity	Top suppliers by product count, cadence breakdown
/api/analytics/supplier-metrics	Per-supplier status breakdown, claim speed, monthly timeline
/api/analytics/nonprofit-engagement	Top nonprofits by claims, org type breakdown
/api/analytics/nonprofit-metrics	Per-nonprofit claimed product timeline, type breakdown, upcoming pickups
/api/analytics/claims-over-time	Global claims timeline

---

Admin Dashboard(src/app/admin/)

admin/page.tsx, It has been split into:

Components:

• _components/OverviewTab.tsx — KPI cards + all chart grid
• _components/NonprofitsTab.tsx — Nonprofit approval management
• _components/SuppliersTab.tsx — Supplier listing
• _components/ProductRequestsTab.tsx — Product request table
• _components/TabNav.tsx — Tab navigation bar

Hooks:

• _hooks/useAdminData.ts — Data fetching for suppliers, nonprofits, products, documents
• _hooks/useAdminAnalytics.ts — Analytics data fetching and aggregation
• _hooks/useApproval.ts — Nonprofit approval/rejection logic

Types:

• _types/index.ts — Shared admin types (AnalyticsData, ApprovalMode, AdminNonprofitDocument)

New Confirmation Modal:

• src/components/Admin/ApprovalConfirmationPopup.tsx — Reusable approval/rejection confirmation dialog

---

Nonprofit Dashboard (src/app/nonprofit/)

nonprofit/page.tsx, Its Split into:

Components:

• _components/OverviewTab.tsx — Metrics overview with charts
• _components/AvailableProductsTab.tsx — Browse and claim available products
• _components/ClaimsTab.tsx — View and unclaim existing claims
• _components/TabNav.tsx — Tab navigation

Hooks:

• _hooks/useNonprofitData.ts — Fetches nonprofit, products, and interests data
• _hooks/useNonprofitMetrics.ts — Fetches per-nonprofit analytics
• _hooks/useClaim.ts — Claim and unclaim product logic

Types:

• _types/index.ts — Shared nonprofit types

New Confirmation Modal:

• src/components/Nonprofit/ClaimConfirmationPopup.tsx — Claim/unclaim confirmation dialog

---

Supplier Dashboard (src/app/supplier/)

supplier/page.tsx, Its Split into:

Components:

• _components/OverviewTab.tsx — Supplier metrics with charts
• _components/ProductsTab.tsx — Product listing with pickup info
• _components/ProductDetailsInputs.tsx — Product creation/edit form fields
• _components/TabNav.tsx — Tab navigation

Hooks:

• _hooks/useSupplierData.ts — Fetches supplier and product data
• _hooks/useSupplierMetrics.ts — Fetches per-supplier analytics
• _hooks/useSupplierForm.ts — Product form state and submission logic

Types:

• _types/index.ts — Shared supplier types

---