Calendar + Organization Filters

[benmli]

Calendar + Organization Filters

Branch: 06/calendar-organization-filters

Overview

Add filtering functionality to the Admin Dashboard that allows admins to:

1. Filter delivery-based statistics by a selected date range.
2. View dashboard analytics scoped to a specific organization.

Filters operate on client-fetched data and are designed to remain compatible with future backend analytics endpoints.

---

Goals

• Enable date-range filtering for delivery analytics.
• Enable admin-only organization-level dashboard filtering.
• Ensure all statistics and charts update consistently when filters change.

---

Scope

• Organization filtering button is only available to admins.
• Calendar picker affects all delivery-based statistics only (does not affect org metadata, invitations, user lists, etc.).
• Filtering logic happens client-side with existing delivery data.

---

Frontend Scope

1. Date Range (Calendar) Filter

• Add a date range selector button at the top of the dashboard (per Figma).
• Reuse existing CalendarPicker.tsx.
• Store selected date range in dashboard-level state.

Behavior

The selected date range filters:

• Total pounds delivered
• Deliveries completed
• Pounds-by-month chart
• Food types donut chart
• Delivery summary list

Does not affect:

• Organization metadata
• User lists
• Invitations
• Organization selector UI

Filtering should occur client-side using delivery date fields.

---

2. Organization Filter (Admin Only)

• Add a searchable dropdown allowing admins to select a single organization.
• Dropdown appears only in admin dashboard views.
• Selecting an organization:
  • Updates dashboard header (organization name)
  • Scopes delivery analytics to that organization
• Clearing selection returns dashboard to “All Organizations” view.

UI Notes

• Existing SearchBar.tsx may be reused or adapted.
• Dropdown must support:
  • Search by organization name
  • Click-to-select behavior
  • Clear/reset state

Admin Enforcement

• Frontend-only: render dropdown only if user?.role === 'admin'.
• Optional backend-safe enforcement for future analytics endpoints via requireAdmin().

---

3. Data Flow Architecture

• Dashboard page owns:
  • Selected date range
  • Selected organization
  • Delivery dataset
• Filtering logic happens once at the page level.
• All charts and stat cards receive filtered data via props.
• No component should filter independently.

---

4. Temporary In-Memory Dataset (for testing)

Since the backend does not yet have real delivery data, use this temporary dataset for QA (can add more):

const testDeliveries = [
  { id: 1, date: '2026-01-01', organizationId: 'org1', pounds: 50, foodType: 'Vegetables' },
  { id: 2, date: '2026-01-10', organizationId: 'org2', pounds: 30, foodType: 'Canned' },
  { id: 3, date: '2026-01-15', organizationId: 'org1', pounds: 20, foodType: 'Fruit' },
  { id: 4, date: '2026-02-01', organizationId: 'org3', pounds: 40, foodType: 'Grains' },
  { id: 5, date: '2026-02-10', organizationId: 'org2', pounds: 25, foodType: 'Dairy' },
];

This dataset allows QA to test:

• Date range filtering
• Organization scoping
• Combined filters
• Empty results and edge cases

---

Testing Notes

• Use testDeliveries or any existing frontend dataset.

Verify:

• Date range updates all charts consistently.
• Clearing date range restores full dataset.
• Organization selection scopes dashboard correctly.
• Filters can be combined without conflict.
• Admin-only visibility of organization filter works.

---

Acceptance Criteria

• Calendar filter correctly limits delivery-based statistics by date.
• All analytics update in sync when date range changes.
• Organization filter scopes analytics to selected organization.
• Filters work together without conflicts.
• UI matches Figma for calendar placement.