Paul Bailey
9f7fc43fb2
- 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
40 lines
1.1 KiB
TypeScript
40 lines
1.1 KiB
TypeScript
interface StatCardProps {
|
|
title: string;
|
|
value: number | string;
|
|
icon?: React.ReactNode;
|
|
trend?: {
|
|
value: number;
|
|
isPositive: boolean;
|
|
};
|
|
subtitle?: string;
|
|
}
|
|
|
|
export function StatCard({ title, value, icon, trend, subtitle }: StatCardProps) {
|
|
return (
|
|
<div className="bg-white rounded-lg shadow p-6">
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h3 className="text-sm font-medium text-gray-600">{title}</h3>
|
|
{icon && <div className="text-gray-400">{icon}</div>}
|
|
</div>
|
|
|
|
<div className="flex items-baseline gap-2">
|
|
<p className="text-3xl font-bold text-gray-900">{value}</p>
|
|
|
|
{trend && (
|
|
<span
|
|
className={`text-sm font-medium ${
|
|
trend.isPositive ? 'text-green-600' : 'text-red-600'
|
|
}`}
|
|
>
|
|
{trend.isPositive ? '↑' : '↓'} {Math.abs(trend.value)}%
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{subtitle && (
|
|
<p className="text-sm text-gray-500 mt-1">{subtitle}</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|