feat: implement analytics dashboard layout (task 10)

- Add analytics types (AnalyticsSummary, DateRange)
- Create analyticsService for API calls and CSV export
- Implement DateRangeSelector component with presets
- Create StatCard component for summary statistics
- Build responsive AnalyticsPage with:
  - Summary statistics cards (reports, events, users, litter collected)
  - Date range filtering with presets
  - CSV export functionality
  - Loading and error states
  - Responsive grid layout

Requirements: 5.1, 5.5
This commit is contained in:
2025-11-16 18:52:34 +00:00
parent fc2fff5cb1
commit 9f7fc43fb2
8 changed files with 446 additions and 8 deletions

View File

@@ -0,0 +1,51 @@
// Analytics service for API interactions
import { apiClient } from './api';
import type { AnalyticsSummary } from '@/types';
class AnalyticsService {
/**
* Get summary statistics for the analytics dashboard
*/
async getSummary(dateRange?: { start: string; end: string }): Promise<AnalyticsSummary> {
const params = new URLSearchParams();
if (dateRange) {
params.append('startDate', dateRange.start);
params.append('endDate', dateRange.end);
}
const queryString = params.toString();
return apiClient.get<AnalyticsSummary>(`/analytics/summary${queryString ? `?${queryString}` : ''}`);
}
/**
* Export analytics data to CSV
*/
async exportToCSV(dateRange?: { start: string; end: string }): Promise<Blob> {
const params = new URLSearchParams();
if (dateRange) {
params.append('startDate', dateRange.start);
params.append('endDate', dateRange.end);
}
const queryString = params.toString();
const response = await fetch(
`${import.meta.env.VITE_API_BASE_URL || 'http://localhost:3000/api'}/analytics/export${queryString ? `?${queryString}` : ''}`,
{
method: 'GET',
headers: {
'Accept': 'text/csv',
},
}
);
if (!response.ok) {
throw new Error('Failed to export data');
}
return response.blob();
}
}
export const analyticsService = new AnalyticsService();