onSelectTest(result.testName)}
- className={`p-4 rounded-xl border cursor-pointer transition-all flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 ${
- isSelected
- ? 'border-blue-400 bg-blue-50 shadow-sm'
- : 'border-gray-100 bg-white hover:border-blue-200 hover:bg-gray-50'
+ onClick={() => handleClick(result)}
+ className={`p-4 rounded-xl border cursor-pointer transition-all ${
+ result.isAbnormal
+ ? 'border-red-200 bg-red-50/40 hover:border-red-300'
+ : isExpanded
+ ? 'border-blue-400 bg-blue-50 shadow-sm'
+ : 'border-gray-100 bg-white hover:border-blue-200 hover:bg-gray-50'
}`}
+ role="button" tabIndex={0} aria-expanded={isExpanded}
+ onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); handleClick(result); } }}
>
- {/* Left side: Test Info */}
-
-
-
-
+
+
+
+ {getCategoryIcon(result.category)}
+
+
+
{result.testName}
+
+ {new Date(result.date).toLocaleDateString()}
+ ·
+ {result.category}
+
+
+
+
+
+
{result.value}
+ {result.referenceRange?.unit && (
+ {result.referenceRange.unit}
+ )}
- {result.referenceRange?.unit && (
- {result.referenceRange.unit}
- )}
- {result.referenceRange && (
-
- Range: {result.referenceRange.min} - {result.referenceRange.max}
-
- )}
-
-
-
{result.isAbnormal ? (
-
+
) : (
-
+
)}
+
+ {isExpanded ? : }
+
);
})}
+
+ {totalPages > 1 && (
+
+
+ Page {page} of {totalPages}
+
+
+ )}
);
}
diff --git a/src/components/OfflineIndicator.tsx b/src/components/OfflineIndicator.tsx
new file mode 100644
index 00000000..97136b6e
--- /dev/null
+++ b/src/components/OfflineIndicator.tsx
@@ -0,0 +1,86 @@
+import React from 'react';
+import { Wifi, WifiOff, RefreshCw, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { useOffline } from '@/hooks/useOffline';
+import type { SyncStatus } from '@/lib/offline/syncManager';
+
+function getStatusConfig(status: SyncStatus) {
+ switch (status) {
+ case 'syncing':
+ return { bg: 'bg-blue-100', text: 'text-blue-700', icon: RefreshCw, label: 'Syncing...' };
+ case 'success':
+ return { bg: 'bg-green-100', text: 'text-green-700', icon: CheckCircle2, label: 'Synced' };
+ case 'conflict':
+ return { bg: 'bg-yellow-100', text: 'text-yellow-700', icon: AlertTriangle, label: 'Sync conflicts' };
+ case 'error':
+ return { bg: 'bg-red-100', text: 'text-red-700', icon: AlertTriangle, label: 'Sync error' };
+ default:
+ return { bg: 'bg-gray-100', text: 'text-gray-600', icon: Wifi, label: 'Connected' };
+ }
+}
+
+interface OfflineIndicatorProps {
+ showLabel?: boolean;
+ className?: string;
+}
+
+export default function OfflineIndicator({ showLabel = true, className = '' }: OfflineIndicatorProps) {
+ const { isOnline, syncStatus, pendingSyncCount, syncDetails, triggerSync } = useOffline();
+ const statusConfig = getStatusConfig(syncStatus);
+
+ if (isOnline && syncStatus === 'idle' && pendingSyncCount === 0) {
+ // Online and idle - show minimal indicator or nothing
+ return (
+
+
+ {showLabel && Online}
+
+ );
+ }
+
+ return (
+
+ {!isOnline ? (
+
+
+ {showLabel && Offline}
+ {pendingSyncCount > 0 && (
+
+ {pendingSyncCount}
+
+ )}
+
+ ) : syncStatus !== 'idle' ? (
+
+
+ {showLabel && (
+
+ {statusConfig.label}
+ {syncDetails ? `: ${syncDetails}` : ''}
+
+ )}
+ {syncStatus === 'error' || syncStatus === 'conflict' ? (
+
+ ) : null}
+
+ ) : pendingSyncCount > 0 ? (
+
+
+ {showLabel && {pendingSyncCount} pending}
+
+
+ ) : null}
+
+ );
+}
diff --git a/src/components/analytics/DataVisualizationDashboard.tsx b/src/components/analytics/DataVisualizationDashboard.tsx
new file mode 100644
index 00000000..16b50462
--- /dev/null
+++ b/src/components/analytics/DataVisualizationDashboard.tsx
@@ -0,0 +1,548 @@
+/**
+ * Data Visualization Dashboard
+ * Interactive charts and graphs for pet health trends, vaccination schedules,
+ * weight tracking, and geographic vet clinic locations.
+ */
+
+import React, { useState, useMemo, useCallback } from 'react';
+import {
+ LineChart, Line, BarChart, Bar, AreaChart, Area,
+ XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer,
+ PieChart, Pie, Cell, ComposedChart, RadialBarChart, RadialBar,
+} from 'recharts';
+import {
+ Download, Calendar, Weight, Activity, Syringe,
+ MapPin, TrendingUp, Filter, RefreshCw,
+} from 'lucide-react';
+
+// ── Types ──
+
+export interface WeightDataPoint {
+ date: string;
+ weight: number;
+ petName?: string;
+}
+
+export interface VaccinationDataPoint {
+ date: string;
+ vaccine: string;
+ status: 'completed' | 'upcoming' | 'overdue';
+ petName?: string;
+}
+
+export interface HealthMetric {
+ metric: string;
+ value: number;
+ unit: string;
+ normalRange: { min: number; max: number };
+ timestamp: string;
+}
+
+export interface VetLocation {
+ name: string;
+ city: string;
+ region: string;
+ pets: number;
+ rating: number;
+}
+
+export interface DashboardData {
+ weightHistory: WeightDataPoint[];
+ vaccinations: VaccinationDataPoint[];
+ healthMetrics: HealthMetric[];
+ vetLocations: VetLocation[];
+ summary: {
+ totalPets: number;
+ upcomingVaccinations: number;
+ averageWeight: number;
+ abnormalResults: number;
+ };
+}
+
+// ── Time Range Filter ──
+
+type TimeRange = '1M' | '3M' | '6M' | '1Y' | 'ALL';
+
+const TIME_RANGES: { label: string; value: TimeRange }[] = [
+ { label: '1 Month', value: '1M' },
+ { label: '3 Months', value: '3M' },
+ { label: '6 Months', value: '6M' },
+ { label: '1 Year', value: '1Y' },
+ { label: 'All Time', value: 'ALL' },
+];
+
+function filterByTimeRange
(
+ data: T[],
+ range: TimeRange
+): T[] {
+ if (range === 'ALL') return data;
+ const now = Date.now();
+ const msMap: Record = {
+ '1M': 30 * 24 * 60 * 60 * 1000,
+ '3M': 90 * 24 * 60 * 60 * 1000,
+ '6M': 180 * 24 * 60 * 60 * 1000,
+ '1Y': 365 * 24 * 60 * 60 * 1000,
+ ALL: Infinity,
+ };
+ const cutoff = now - (msMap[range] || msMap['1Y']);
+ return data.filter((item) => {
+ const ts = item.date || item.timestamp;
+ return ts ? new Date(ts).getTime() >= cutoff : true;
+ });
+}
+
+// ── Export Utilities ──
+
+function exportToCSV(filename: string, headers: string[], rows: unknown[][]): void {
+ const headerRow = headers.join(',');
+ const dataRows = rows.map((row) => row.map((cell) => JSON.stringify(cell)).join(','));
+ const csv = [headerRow, ...dataRows].join('\n');
+ const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
+ const url = URL.createObjectURL(blob);
+ const link = document.createElement('a');
+ link.href = url;
+ link.download = `${filename}_${new Date().toISOString().slice(0, 10)}.csv`;
+ link.click();
+ URL.revokeObjectURL(url);
+}
+
+// ── Custom Tooltip ──
+
+const CustomTooltip = ({ active, payload, label }: { active?: boolean; payload?: any[]; label?: string }) => {
+ if (!active || !payload?.length) return null;
+ return (
+
+
{label}
+ {payload.map((entry, idx) => (
+
+ {entry.name}: {entry.value}
+
+ ))}
+
+ No weight data available for this period.
+
+ );
+ }
+
+ return (
+
+
+
Weight & Growth Tracking
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ } />
+
+
+
+
+
+ No vaccination data available.
+
+ );
+ }
+
+ return (
+
+
+
Vaccination Schedule
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ No health metrics available.
+
+ );
+ }
+
+ return (
+
+
+
Health Metrics
+
+
+
+ {metrics.map((m) => (
+
+ ))}
+
+
+
+
+
+
+
+ } />
+
+ {
+ const { cx, cy, payload } = props;
+ if (payload.aboveRange) return ;
+ if (payload.belowRange) return ;
+ return ;
+ }}
+ />
+
+
+
+
+ Above range
+ Below range
+ Normal
+
+
+ No geographic data available.
+
+ );
+ }
+
+ return (
+
+
+
Vet Clinic Distribution
+
+
+
+
+
+ `${region} ${(percent * 100).toFixed(0)}%`}
+ >
+ {chartData.map((_, index) => (
+ |
+ ))}
+
+
+
+
+
+
+
+ {cards.map((card) => (
+
+
+
+
+
+
+
{card.label}
+
{card.value}
+
+
+
+ ))}
+
+ {/* Header */}
+
+
+
Data Visualization Dashboard
+
+ Interactive charts for pet health trends and insights
+
+
+
+ {/* Time Range Filter */}
+
+
+ {TIME_RANGES.map((r) => (
+
+ ))}
+
+
+
+
+
+ {/* Summary Cards */}
+
+
+ {/* Charts Grid */}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Quick Actions
+
+
+
+
+
+
+
+
+
+