feat: add dashboard with vehicle fleet overview (refs #2)
Implements responsive dashboard showing: - Summary cards (vehicle count, upcoming maintenance, recent fuel logs) - Vehicles needing attention with priority highlighting - Quick action buttons for navigation - Loading skeletons and empty states - Mobile-first responsive layout (320px to 1920px+) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Eric Gullickson
@@ -78,18 +78,7 @@ import { useDataSync } from './core/hooks/useDataSync';
|
|||||||
import { MobileDebugPanel } from './core/debug/MobileDebugPanel';
|
import { MobileDebugPanel } from './core/debug/MobileDebugPanel';
|
||||||
import { MobileErrorBoundary } from './core/error-boundaries/MobileErrorBoundary';
|
import { MobileErrorBoundary } from './core/error-boundaries/MobileErrorBoundary';
|
||||||
import { useLoginNotifications } from './features/notifications/hooks/useLoginNotifications';
|
import { useLoginNotifications } from './features/notifications/hooks/useLoginNotifications';
|
||||||
|
import { DashboardScreen as DashboardFeature } from './features/dashboard';
|
||||||
// Hoisted mobile screen components to stabilize identity and prevent remounts
|
|
||||||
const DashboardScreen: React.FC = () => (
|
|
||||||
<div className="space-y-4">
|
|
||||||
<GlassCard>
|
|
||||||
<div className="text-center py-12">
|
|
||||||
<h2 className="text-lg font-semibold text-slate-800 mb-2">Dashboard</h2>
|
|
||||||
<p className="text-slate-500">Coming soon - Vehicle insights and analytics</p>
|
|
||||||
</div>
|
|
||||||
</GlassCard>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
const LogFuelScreen: React.FC = () => {
|
const LogFuelScreen: React.FC = () => {
|
||||||
const queryClient = useQueryClient();
|
const queryClient = useQueryClient();
|
||||||
@@ -640,7 +629,10 @@ function App() {
|
|||||||
transition={{ duration: 0.2, ease: "easeOut" }}
|
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||||
>
|
>
|
||||||
<MobileErrorBoundary screenName="Dashboard">
|
<MobileErrorBoundary screenName="Dashboard">
|
||||||
<DashboardScreen />
|
<DashboardFeature
|
||||||
|
onNavigate={navigateToScreen}
|
||||||
|
onVehicleClick={handleVehicleSelect}
|
||||||
|
/>
|
||||||
</MobileErrorBoundary>
|
</MobileErrorBoundary>
|
||||||
</motion.div>
|
</motion.div>
|
||||||
)}
|
)}
|
||||||
|
|||||||
125
frontend/src/features/dashboard/components/DashboardScreen.tsx
Normal file
125
frontend/src/features/dashboard/components/DashboardScreen.tsx
Normal file
@@ -0,0 +1,125 @@
|
|||||||
|
/**
|
||||||
|
* @ai-summary Main dashboard screen component showing fleet overview
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { SummaryCards, SummaryCardsSkeleton } from './SummaryCards';
|
||||||
|
import { VehicleAttention, VehicleAttentionSkeleton } from './VehicleAttention';
|
||||||
|
import { QuickActions, QuickActionsSkeleton } from './QuickActions';
|
||||||
|
import { useDashboardSummary, useVehiclesNeedingAttention } from '../hooks/useDashboardData';
|
||||||
|
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
|
||||||
|
|
||||||
|
import { MobileScreen } from '../../../core/store';
|
||||||
|
import { Vehicle } from '../../vehicles/types/vehicles.types';
|
||||||
|
|
||||||
|
interface DashboardScreenProps {
|
||||||
|
onNavigate?: (screen: MobileScreen, metadata?: Record<string, any>) => void;
|
||||||
|
onVehicleClick?: (vehicle: Vehicle) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const DashboardScreen: React.FC<DashboardScreenProps> = ({
|
||||||
|
onNavigate,
|
||||||
|
onVehicleClick
|
||||||
|
}) => {
|
||||||
|
const { data: summary, isLoading: summaryLoading, error: summaryError } = useDashboardSummary();
|
||||||
|
const { data: vehiclesNeedingAttention, isLoading: attentionLoading, error: attentionError } = useVehiclesNeedingAttention();
|
||||||
|
|
||||||
|
// Error state
|
||||||
|
if (summaryError || attentionError) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-4">
|
||||||
|
<GlassCard>
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<div className="text-4xl mb-3">⚠️</div>
|
||||||
|
<h2 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-2">
|
||||||
|
Unable to Load Dashboard
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-500 dark:text-slate-400 mb-4">
|
||||||
|
There was an error loading your dashboard data
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => window.location.reload()}
|
||||||
|
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
|
||||||
|
style={{ minHeight: '44px' }} // Touch target size
|
||||||
|
>
|
||||||
|
Retry
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Loading state
|
||||||
|
if (summaryLoading || attentionLoading || !summary || !vehiclesNeedingAttention) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<SummaryCardsSkeleton />
|
||||||
|
<VehicleAttentionSkeleton />
|
||||||
|
<QuickActionsSkeleton />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Empty state - no vehicles
|
||||||
|
if (summary.totalVehicles === 0) {
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
<GlassCard>
|
||||||
|
<div className="text-center py-12">
|
||||||
|
<div className="text-6xl mb-4">🚗</div>
|
||||||
|
<h2 className="text-xl font-semibold text-slate-800 dark:text-slate-200 mb-3">
|
||||||
|
Welcome to MotoVaultPro
|
||||||
|
</h2>
|
||||||
|
<p className="text-slate-500 dark:text-slate-400 mb-6 max-w-md mx-auto">
|
||||||
|
Get started by adding your first vehicle to track fuel logs, maintenance, and more
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => onNavigate?.('Vehicles')}
|
||||||
|
className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium"
|
||||||
|
style={{ minHeight: '44px' }} // Touch target size
|
||||||
|
>
|
||||||
|
Add Your First Vehicle
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Main dashboard view
|
||||||
|
return (
|
||||||
|
<div className="space-y-6">
|
||||||
|
{/* Summary Cards */}
|
||||||
|
<SummaryCards summary={summary} />
|
||||||
|
|
||||||
|
{/* Vehicles Needing Attention */}
|
||||||
|
{vehiclesNeedingAttention && vehiclesNeedingAttention.length > 0 && (
|
||||||
|
<VehicleAttention
|
||||||
|
vehicles={vehiclesNeedingAttention}
|
||||||
|
onVehicleClick={(vehicleId) => {
|
||||||
|
const vehicle = vehiclesNeedingAttention.find(v => v.id === vehicleId);
|
||||||
|
if (vehicle && onVehicleClick) {
|
||||||
|
onVehicleClick(vehicle);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Quick Actions */}
|
||||||
|
<QuickActions
|
||||||
|
onAddVehicle={() => onNavigate?.('Vehicles')}
|
||||||
|
onLogFuel={() => onNavigate?.('Log Fuel')}
|
||||||
|
onViewMaintenance={() => onNavigate?.('Vehicles')} // Navigate to vehicles then maintenance
|
||||||
|
onViewVehicles={() => onNavigate?.('Vehicles')}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Footer Hint */}
|
||||||
|
<div className="text-center py-4">
|
||||||
|
<p className="text-xs text-slate-400 dark:text-slate-500">
|
||||||
|
Dashboard updates every 2 minutes
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
126
frontend/src/features/dashboard/components/QuickActions.tsx
Normal file
126
frontend/src/features/dashboard/components/QuickActions.tsx
Normal file
@@ -0,0 +1,126 @@
|
|||||||
|
/**
|
||||||
|
* @ai-summary Quick action buttons for common tasks
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
|
||||||
|
|
||||||
|
interface QuickAction {
|
||||||
|
id: string;
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
icon: string;
|
||||||
|
color: string;
|
||||||
|
bgColor: string;
|
||||||
|
onClick: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface QuickActionsProps {
|
||||||
|
onAddVehicle: () => void;
|
||||||
|
onLogFuel: () => void;
|
||||||
|
onViewMaintenance: () => void;
|
||||||
|
onViewVehicles: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const QuickActions: React.FC<QuickActionsProps> = ({
|
||||||
|
onAddVehicle,
|
||||||
|
onLogFuel,
|
||||||
|
onViewMaintenance,
|
||||||
|
onViewVehicles,
|
||||||
|
}) => {
|
||||||
|
const actions: QuickAction[] = [
|
||||||
|
{
|
||||||
|
id: 'add-vehicle',
|
||||||
|
title: 'Add Vehicle',
|
||||||
|
description: 'Register a new vehicle',
|
||||||
|
icon: '🚗',
|
||||||
|
color: 'text-blue-600',
|
||||||
|
bgColor: 'bg-blue-50',
|
||||||
|
onClick: onAddVehicle,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'log-fuel',
|
||||||
|
title: 'Log Fuel',
|
||||||
|
description: 'Record a fuel purchase',
|
||||||
|
icon: '⛽',
|
||||||
|
color: 'text-green-600',
|
||||||
|
bgColor: 'bg-green-50',
|
||||||
|
onClick: onLogFuel,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'view-maintenance',
|
||||||
|
title: 'Maintenance',
|
||||||
|
description: 'View maintenance records',
|
||||||
|
icon: '🔧',
|
||||||
|
color: 'text-orange-600',
|
||||||
|
bgColor: 'bg-orange-50',
|
||||||
|
onClick: onViewMaintenance,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 'view-vehicles',
|
||||||
|
title: 'My Vehicles',
|
||||||
|
description: 'View all vehicles',
|
||||||
|
icon: '📋',
|
||||||
|
color: 'text-purple-600',
|
||||||
|
bgColor: 'bg-purple-50',
|
||||||
|
onClick: onViewVehicles,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GlassCard padding="md">
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200">
|
||||||
|
Quick Actions
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
Common tasks and navigation
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||||
|
{actions.map((action) => (
|
||||||
|
<button
|
||||||
|
key={action.id}
|
||||||
|
onClick={action.onClick}
|
||||||
|
className={`p-4 rounded-2xl ${action.bgColor} dark:bg-opacity-10 border border-transparent hover:border-slate-200 dark:hover:border-slate-700 hover:shadow-md transition-all duration-200 text-left min-h-[100px] sm:min-h-[120px] flex flex-col`}
|
||||||
|
style={{ minHeight: '44px' }} // Ensure touch target size
|
||||||
|
>
|
||||||
|
<div className="text-3xl mb-2">{action.icon}</div>
|
||||||
|
<div className="flex-1">
|
||||||
|
<h4 className={`font-semibold ${action.color} dark:opacity-90 text-sm mb-1`}>
|
||||||
|
{action.title}
|
||||||
|
</h4>
|
||||||
|
<p className="text-xs text-slate-500 dark:text-slate-400 hidden sm:block">
|
||||||
|
{action.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</button>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const QuickActionsSkeleton: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<GlassCard padding="md">
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="h-6 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-32 mb-2" />
|
||||||
|
<div className="h-4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-48" />
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
|
||||||
|
{[1, 2, 3, 4].map((i) => (
|
||||||
|
<div
|
||||||
|
key={i}
|
||||||
|
className="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800 min-h-[100px] sm:min-h-[120px]"
|
||||||
|
>
|
||||||
|
<div className="w-8 h-8 bg-slate-100 dark:bg-slate-700 rounded animate-pulse mb-2" />
|
||||||
|
<div className="h-4 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-20 mb-2" />
|
||||||
|
<div className="h-3 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-full hidden sm:block" />
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
);
|
||||||
|
};
|
||||||
85
frontend/src/features/dashboard/components/SummaryCards.tsx
Normal file
85
frontend/src/features/dashboard/components/SummaryCards.tsx
Normal file
@@ -0,0 +1,85 @@
|
|||||||
|
/**
|
||||||
|
* @ai-summary Summary cards showing key dashboard metrics
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
|
||||||
|
import { DashboardSummary } from '../types';
|
||||||
|
|
||||||
|
interface SummaryCardsProps {
|
||||||
|
summary: DashboardSummary;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const SummaryCards: React.FC<SummaryCardsProps> = ({ summary }) => {
|
||||||
|
const cards = [
|
||||||
|
{
|
||||||
|
title: 'Total Vehicles',
|
||||||
|
value: summary.totalVehicles,
|
||||||
|
icon: '🚗',
|
||||||
|
color: 'text-blue-600',
|
||||||
|
bgColor: 'bg-blue-50',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Upcoming Maintenance',
|
||||||
|
value: summary.upcomingMaintenanceCount,
|
||||||
|
subtitle: 'Next 30 days',
|
||||||
|
icon: '🔧',
|
||||||
|
color: 'text-orange-600',
|
||||||
|
bgColor: 'bg-orange-50',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Recent Fuel Logs',
|
||||||
|
value: summary.recentFuelLogsCount,
|
||||||
|
subtitle: 'Last 7 days',
|
||||||
|
icon: '⛽',
|
||||||
|
color: 'text-green-600',
|
||||||
|
bgColor: 'bg-green-50',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{cards.map((card) => (
|
||||||
|
<GlassCard key={card.title} padding="md">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className={`flex-shrink-0 w-12 h-12 rounded-2xl ${card.bgColor} flex items-center justify-center text-2xl`}>
|
||||||
|
{card.icon}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-400 font-medium mb-1">
|
||||||
|
{card.title}
|
||||||
|
</p>
|
||||||
|
<p className={`text-3xl font-bold ${card.color} dark:opacity-90`}>
|
||||||
|
{card.value}
|
||||||
|
</p>
|
||||||
|
{card.subtitle && (
|
||||||
|
<p className="text-xs text-slate-400 dark:text-slate-500 mt-1">
|
||||||
|
{card.subtitle}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const SummaryCardsSkeleton: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||||
|
{[1, 2, 3].map((i) => (
|
||||||
|
<GlassCard key={i} padding="md">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="flex-shrink-0 w-12 h-12 rounded-2xl bg-slate-100 dark:bg-slate-800 animate-pulse" />
|
||||||
|
<div className="flex-1 min-w-0 space-y-2">
|
||||||
|
<div className="h-4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-24" />
|
||||||
|
<div className="h-8 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-16" />
|
||||||
|
<div className="h-3 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-20" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
131
frontend/src/features/dashboard/components/VehicleAttention.tsx
Normal file
131
frontend/src/features/dashboard/components/VehicleAttention.tsx
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
/**
|
||||||
|
* @ai-summary List of vehicles needing attention (overdue maintenance)
|
||||||
|
*/
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
|
||||||
|
import { VehicleNeedingAttention } from '../types';
|
||||||
|
|
||||||
|
interface VehicleAttentionProps {
|
||||||
|
vehicles: VehicleNeedingAttention[];
|
||||||
|
onVehicleClick?: (vehicleId: string) => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const VehicleAttention: React.FC<VehicleAttentionProps> = ({ vehicles, onVehicleClick }) => {
|
||||||
|
if (vehicles.length === 0) {
|
||||||
|
return (
|
||||||
|
<GlassCard padding="md">
|
||||||
|
<div className="text-center py-8">
|
||||||
|
<div className="text-4xl mb-3">✅</div>
|
||||||
|
<h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200 mb-2">
|
||||||
|
All Caught Up!
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
No vehicles need immediate attention
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const priorityConfig = {
|
||||||
|
high: {
|
||||||
|
color: 'text-red-600',
|
||||||
|
bgColor: 'bg-red-50',
|
||||||
|
borderColor: 'border-red-200',
|
||||||
|
icon: '🚨',
|
||||||
|
},
|
||||||
|
medium: {
|
||||||
|
color: 'text-orange-600',
|
||||||
|
bgColor: 'bg-orange-50',
|
||||||
|
borderColor: 'border-orange-200',
|
||||||
|
icon: '⚠️',
|
||||||
|
},
|
||||||
|
low: {
|
||||||
|
color: 'text-yellow-600',
|
||||||
|
bgColor: 'bg-yellow-50',
|
||||||
|
borderColor: 'border-yellow-200',
|
||||||
|
icon: '⏰',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<GlassCard padding="md">
|
||||||
|
<div className="mb-4">
|
||||||
|
<h3 className="text-lg font-semibold text-slate-800 dark:text-slate-200">
|
||||||
|
Needs Attention
|
||||||
|
</h3>
|
||||||
|
<p className="text-sm text-slate-500 dark:text-slate-400">
|
||||||
|
Vehicles with overdue maintenance
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="space-y-3">
|
||||||
|
{vehicles.map((vehicle) => {
|
||||||
|
const config = priorityConfig[vehicle.priority];
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={vehicle.id}
|
||||||
|
className={`p-4 rounded-2xl border ${config.borderColor} ${config.bgColor} dark:bg-opacity-10 ${
|
||||||
|
onVehicleClick ? 'cursor-pointer hover:shadow-md transition-shadow' : ''
|
||||||
|
}`}
|
||||||
|
onClick={() => onVehicleClick?.(vehicle.id)}
|
||||||
|
role={onVehicleClick ? 'button' : undefined}
|
||||||
|
tabIndex={onVehicleClick ? 0 : undefined}
|
||||||
|
onKeyDown={(e) => {
|
||||||
|
if (onVehicleClick && (e.key === 'Enter' || e.key === ' ')) {
|
||||||
|
e.preventDefault();
|
||||||
|
onVehicleClick(vehicle.id);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="flex-shrink-0 text-2xl">
|
||||||
|
{config.icon}
|
||||||
|
</div>
|
||||||
|
<div className="flex-1 min-w-0">
|
||||||
|
<h4 className={`font-semibold ${config.color} dark:opacity-90 text-base mb-1`}>
|
||||||
|
{vehicle.nickname || `${vehicle.year} ${vehicle.make} ${vehicle.model}`}
|
||||||
|
</h4>
|
||||||
|
<p className="text-sm text-slate-600 dark:text-slate-400">
|
||||||
|
{vehicle.reason}
|
||||||
|
</p>
|
||||||
|
<div className="flex items-center gap-2 mt-2">
|
||||||
|
<span className={`text-xs font-medium px-2 py-1 rounded-full ${config.bgColor} ${config.color} dark:bg-opacity-20`}>
|
||||||
|
{vehicle.priority.toUpperCase()} PRIORITY
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export const VehicleAttentionSkeleton: React.FC = () => {
|
||||||
|
return (
|
||||||
|
<GlassCard padding="md">
|
||||||
|
<div className="mb-4">
|
||||||
|
<div className="h-6 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-32 mb-2" />
|
||||||
|
<div className="h-4 bg-slate-100 dark:bg-slate-800 rounded animate-pulse w-48" />
|
||||||
|
</div>
|
||||||
|
<div className="space-y-3">
|
||||||
|
{[1, 2].map((i) => (
|
||||||
|
<div key={i} className="p-4 rounded-2xl bg-slate-50 dark:bg-slate-800">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<div className="flex-shrink-0 w-6 h-6 bg-slate-100 dark:bg-slate-700 rounded animate-pulse" />
|
||||||
|
<div className="flex-1 space-y-2">
|
||||||
|
<div className="h-5 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-3/4" />
|
||||||
|
<div className="h-4 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-1/2" />
|
||||||
|
<div className="h-6 bg-slate-100 dark:bg-slate-700 rounded animate-pulse w-24 mt-2" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</GlassCard>
|
||||||
|
);
|
||||||
|
};
|
||||||
141
frontend/src/features/dashboard/hooks/useDashboardData.ts
Normal file
141
frontend/src/features/dashboard/hooks/useDashboardData.ts
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
/**
|
||||||
|
* @ai-summary React Query hooks for dashboard data
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { useQuery } from '@tanstack/react-query';
|
||||||
|
import { useAuth0 } from '@auth0/auth0-react';
|
||||||
|
import { vehiclesApi } from '../../vehicles/api/vehicles.api';
|
||||||
|
import { fuelLogsApi } from '../../fuel-logs/api/fuel-logs.api';
|
||||||
|
import { maintenanceApi } from '../../maintenance/api/maintenance.api';
|
||||||
|
import { DashboardSummary, VehicleNeedingAttention } from '../types';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hook to fetch dashboard summary stats
|
||||||
|
*/
|
||||||
|
export const useDashboardSummary = () => {
|
||||||
|
const { isAuthenticated, isLoading: authLoading } = useAuth0();
|
||||||
|
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['dashboard', 'summary'],
|
||||||
|
queryFn: async (): Promise<DashboardSummary> => {
|
||||||
|
// Fetch all required data in parallel
|
||||||
|
const [vehicles, fuelLogs] = await Promise.all([
|
||||||
|
vehiclesApi.getAll(),
|
||||||
|
fuelLogsApi.getUserFuelLogs(),
|
||||||
|
]);
|
||||||
|
|
||||||
|
// Fetch schedules for all vehicles to count upcoming maintenance
|
||||||
|
const allSchedules = await Promise.all(
|
||||||
|
vehicles.map(v => maintenanceApi.getSchedulesByVehicle(v.id))
|
||||||
|
);
|
||||||
|
const flatSchedules = allSchedules.flat();
|
||||||
|
|
||||||
|
// Calculate upcoming maintenance (next 30 days)
|
||||||
|
const thirtyDaysFromNow = new Date();
|
||||||
|
thirtyDaysFromNow.setDate(thirtyDaysFromNow.getDate() + 30);
|
||||||
|
|
||||||
|
const upcomingMaintenance = flatSchedules.filter(schedule => {
|
||||||
|
// Count schedules as upcoming if they have a next due date within 30 days
|
||||||
|
if (!schedule.nextDueDate) return false;
|
||||||
|
const dueDate = new Date(schedule.nextDueDate);
|
||||||
|
return dueDate >= new Date() && dueDate <= thirtyDaysFromNow;
|
||||||
|
});
|
||||||
|
|
||||||
|
// Calculate recent fuel logs (last 7 days)
|
||||||
|
const sevenDaysAgo = new Date();
|
||||||
|
sevenDaysAgo.setDate(sevenDaysAgo.getDate() - 7);
|
||||||
|
|
||||||
|
const recentFuelLogs = fuelLogs.filter(log => {
|
||||||
|
const logDate = new Date(log.dateTime);
|
||||||
|
return logDate >= sevenDaysAgo;
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalVehicles: vehicles.length,
|
||||||
|
upcomingMaintenanceCount: upcomingMaintenance.length,
|
||||||
|
recentFuelLogsCount: recentFuelLogs.length,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
enabled: isAuthenticated && !authLoading,
|
||||||
|
staleTime: 2 * 60 * 1000, // 2 minutes - fresher than other queries for dashboard
|
||||||
|
gcTime: 5 * 60 * 1000, // 5 minutes cache time
|
||||||
|
retry: (failureCount, error: any) => {
|
||||||
|
// Retry 401 errors up to 3 times for mobile auth timing issues
|
||||||
|
if (error?.response?.status === 401 && failureCount < 3) {
|
||||||
|
console.log(`[Mobile Auth] Dashboard retry ${failureCount + 1}/3 for 401 error`);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Hook to fetch vehicles needing attention (overdue maintenance)
|
||||||
|
*/
|
||||||
|
export const useVehiclesNeedingAttention = () => {
|
||||||
|
const { isAuthenticated, isLoading: authLoading } = useAuth0();
|
||||||
|
|
||||||
|
return useQuery({
|
||||||
|
queryKey: ['dashboard', 'vehiclesNeedingAttention'],
|
||||||
|
queryFn: async (): Promise<VehicleNeedingAttention[]> => {
|
||||||
|
// Fetch vehicles
|
||||||
|
const vehicles = await vehiclesApi.getAll();
|
||||||
|
|
||||||
|
const vehiclesNeedingAttention: VehicleNeedingAttention[] = [];
|
||||||
|
const now = new Date();
|
||||||
|
|
||||||
|
// Check each vehicle for overdue maintenance
|
||||||
|
for (const vehicle of vehicles) {
|
||||||
|
const schedules = await maintenanceApi.getSchedulesByVehicle(vehicle.id);
|
||||||
|
|
||||||
|
// Find overdue schedules
|
||||||
|
const overdueSchedules = schedules.filter(schedule => {
|
||||||
|
if (!schedule.nextDueDate) return false;
|
||||||
|
const dueDate = new Date(schedule.nextDueDate);
|
||||||
|
return dueDate < now;
|
||||||
|
});
|
||||||
|
|
||||||
|
if (overdueSchedules.length > 0) {
|
||||||
|
// Calculate priority based on how overdue the maintenance is
|
||||||
|
const mostOverdue = overdueSchedules.reduce((oldest, current) => {
|
||||||
|
const oldestDate = new Date(oldest.nextDueDate!);
|
||||||
|
const currentDate = new Date(current.nextDueDate!);
|
||||||
|
return currentDate < oldestDate ? current : oldest;
|
||||||
|
});
|
||||||
|
|
||||||
|
const daysOverdue = Math.floor((now.getTime() - new Date(mostOverdue.nextDueDate!).getTime()) / (1000 * 60 * 60 * 24));
|
||||||
|
|
||||||
|
let priority: 'high' | 'medium' | 'low' = 'low';
|
||||||
|
if (daysOverdue > 30) {
|
||||||
|
priority = 'high';
|
||||||
|
} else if (daysOverdue > 14) {
|
||||||
|
priority = 'medium';
|
||||||
|
}
|
||||||
|
|
||||||
|
vehiclesNeedingAttention.push({
|
||||||
|
...vehicle,
|
||||||
|
reason: `${overdueSchedules.length} overdue maintenance ${overdueSchedules.length === 1 ? 'item' : 'items'}`,
|
||||||
|
priority,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Sort by priority (high -> medium -> low)
|
||||||
|
const priorityOrder = { high: 0, medium: 1, low: 2 };
|
||||||
|
return vehiclesNeedingAttention.sort((a, b) => priorityOrder[a.priority] - priorityOrder[b.priority]);
|
||||||
|
},
|
||||||
|
enabled: isAuthenticated && !authLoading,
|
||||||
|
staleTime: 2 * 60 * 1000, // 2 minutes
|
||||||
|
gcTime: 5 * 60 * 1000, // 5 minutes cache time
|
||||||
|
retry: (failureCount, error: any) => {
|
||||||
|
if (error?.response?.status === 401 && failureCount < 3) {
|
||||||
|
console.log(`[Mobile Auth] Vehicles attention retry ${failureCount + 1}/3 for 401 error`);
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
|
||||||
|
});
|
||||||
|
};
|
||||||
10
frontend/src/features/dashboard/index.ts
Normal file
10
frontend/src/features/dashboard/index.ts
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
/**
|
||||||
|
* @ai-summary Dashboard feature public exports
|
||||||
|
*/
|
||||||
|
|
||||||
|
export { DashboardScreen } from './components/DashboardScreen';
|
||||||
|
export { SummaryCards, SummaryCardsSkeleton } from './components/SummaryCards';
|
||||||
|
export { VehicleAttention, VehicleAttentionSkeleton } from './components/VehicleAttention';
|
||||||
|
export { QuickActions, QuickActionsSkeleton } from './components/QuickActions';
|
||||||
|
export { useDashboardSummary, useVehiclesNeedingAttention } from './hooks/useDashboardData';
|
||||||
|
export type { DashboardSummary, VehicleNeedingAttention, DashboardData } from './types';
|
||||||
21
frontend/src/features/dashboard/types/index.ts
Normal file
21
frontend/src/features/dashboard/types/index.ts
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
/**
|
||||||
|
* @ai-summary Dashboard feature types
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { Vehicle } from '../../vehicles/types/vehicles.types';
|
||||||
|
|
||||||
|
export interface DashboardSummary {
|
||||||
|
totalVehicles: number;
|
||||||
|
upcomingMaintenanceCount: number;
|
||||||
|
recentFuelLogsCount: number;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface VehicleNeedingAttention extends Vehicle {
|
||||||
|
reason: string;
|
||||||
|
priority: 'high' | 'medium' | 'low';
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface DashboardData {
|
||||||
|
summary: DashboardSummary;
|
||||||
|
vehiclesNeedingAttention: VehicleNeedingAttention[];
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user