- 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
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
// 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();
|