Create a `DistributionTrends` component that helps bank staff visualize item distribution patterns over time. Props: ```typescript interface DistributionTrendsProps { orgId: string itemId?: string // optional: filter to a specific item dateRange: { from: Date, to: Date } } ``` The component should: 1. Fetch data from `GET /api/distributions?orgId=X&itemId=Y&from=Z&to=W` — you'll also build this route. It returns `{ week: string, unitsDistributed: number, distributionCount: number }[]` 2. Render a Recharts `ComposedChart` — bar chart for `unitsDistributed`, line chart on a secondary Y-axis for `distributionCount` 3. Include a filter bar above the chart: date range picker (use react-day-picker), item type select, partner organization select 4. Handle loading state (skeleton), empty state ('No distributions in this period'), and error state 5. All chart elements must have ARIA labels. The chart should be keyboard-navigable. Use server components for the data fetch wrapper; client component only for the interactive filter bar and chart rendering.
No contributions yet.