Frontend: Build Analytics & Reports Page #502
Description
Description:
Implement a comprehensive analytics page with interactive visualizations, key metrics, and customizable report generation for tracking freight performance, costs, and trends over time.
Page Route: /analytics
Requirements:
- Multiple chart types (line, bar, pie, donut, area, scatter)
- Date range filtering with presets
- Metric comparisons
- Export reports (PDF/CSV)
- Custom report builder
- Real-time data updates
- Responsive charts
Page Sections:
1. Analytics Header
- Page title: "Analytics & Reports"
- Date range picker (presets: Today, Last 7 days, Last 30 days, Last 90 days, Custom)
- Metric selector dropdown (Revenue, Shipments, Performance)
- Export button (PDF, CSV, Excel)
- Refresh data button
- Filter button (additional filters)
2. Key Metrics Cards
Role-based metrics:
For Shippers:
- Total Shipments (with trend %)
- Total Spend (with trend %)
- Average Cost per Shipment
- On-Time Delivery Rate
- Active Carriers
For Carriers:
- Total Revenue (with trend %)
- Completed Jobs
- Average Rating
- Fleet Utilization
- Customer Satisfaction
For Dispatchers:
- System-wide Shipments
- Total Users
- System Uptime
- Revenue Generated
- Issue Resolution Rate
Each card shows: Icon, Metric value, Percentage change, Trend arrow, Mini sparkline chart
3. Charts Section
Chart 1: Revenue/Cost Over Time (Line Chart)
- X-axis: Time (days/weeks/months)
- Y-axis: Amount ($)
- Multiple lines for comparison (current vs previous period)
- Hover tooltips with exact values
- Zoom/pan functionality
Chart 2: Shipment Status Distribution (Donut Chart)
- Segments: Draft, Posted, Assigned, In Transit, Delivered, Cancelled
- Percentage labels
- Click to filter
- Legend with counts
Chart 3: Top Routes (Horizontal Bar Chart)
- Y-axis: Route (Origin → Destination)
- X-axis: Number of shipments
- Top 10 routes
- Color gradient
Chart 4: Carrier Performance (Scatter Plot)
- X-axis: Total Deliveries
- Y-axis: Average Rating
- Bubble size: Revenue
- Color by on-time percentage
- Hover shows carrier name
Chart 5: Cost Breakdown (Pie Chart)
- Segments: Freight, Insurance, Fuel, Other
- Percentage and $ amount labels
Chart 6: Delivery Times Trend (Area Chart)
- X-axis: Time
- Y-axis: Average delivery time (hours)
- Filled area under line
- Target line (SLA)
4. Performance Metrics Table
- Columns: Metric Name, Current Value, Previous Period, Change (%), Trend (sparkline), Target, Status
- Metrics: Average delivery time, Customer satisfaction score, First-time delivery success rate, Late deliveries count, Damaged shipments, Revenue per shipment
5. Custom Report Builder
- Report name input
- Metric selection (multi-select)
- Date range picker
- Group by option (day, week, month)
- Filter options
- Chart type selection
- Preview button
- Save report button
- Schedule report (daily, weekly, monthly email delivery)
- Email recipients input
6. Saved Reports Section
- List of saved reports with: Report name, Created date, Last run date, Schedule (if any)
- Actions: Run Now, Edit, Delete, Duplicate, Share
Components to Create:
/components/analytics/
├── AnalyticsLayout.tsx
├── AnalyticsHeader.tsx
├── MetricCard.tsx (reusable with trend)
├── MetricCardsGrid.tsx
├── RevenueChart.tsx
├── StatusDistributionChart.tsx
├── TopRoutesChart.tsx
├── CarrierPerformanceChart.tsx
├── CostBreakdownChart.tsx
├── DeliveryTimesChart.tsx
├── PerformanceTable.tsx
├── DateRangePicker.tsx (reusable)
├── ChartCard.tsx (wrapper, reusable)
├── ExportMenu.tsx
├── CustomReportBuilder.tsx
├── SavedReportsList.tsx
├── ReportCard.tsx (reusable)
├── ChartTypeSelector.tsx
└── MetricSelector.tsx
/components/shared/
├── SparklineChart.tsx (reusable mini trend)
├── TrendIndicator.tsx (reusable arrow + %)
└── LoadingChart.tsx (skeleton loader)
Technical Requirements:
- Recharts for data visualization
- date-fns for date manipulation
- react-day-picker for date selection
- jsPDF + jspdf-autotable for PDF export
- papaparse for CSV export
- TanStack Query for data fetching
Export Functionality:
- Export to PDF: Include charts as images, tables, and metadata
- Export to CSV: Export raw data from tables and charts
- Export to Excel: Similar to CSV with formatting
- Include date range and filters in export filename
Chart Interactions:
- Hover tooltips with detailed information
- Click to filter/drill down
- Legend toggle (show/hide series)
- Responsive resizing
- Loading states
- Error states with retry
Acceptance Criteria:
- All metric cards display correctly with role-based content
- 6 different chart types implemented and interactive
- All charts responsive and resize properly
- Date range picker functional with presets
- Charts update when date range changes
- Performance table sortable by all columns
- Export to PDF works correctly
- Export to CSV works correctly
- Custom report builder functional
- Can save and load reports
- Scheduled reports UI complete (backend stub ok)
- Loading states for all charts
- Error handling with retry option
- Real-time data updates (60-second polling)
- Responsive design (charts stack on mobile)
- TypeScript: no type errors
- Performance: smooth interactions, no lag
Testing Requirements:
- Test with different date ranges
- Test with large datasets (100+ data points)
- Test export functionality
- Test custom report builder
- Test responsive layouts
- Test with different user roles
- Test chart interactions (hover, click, zoom)