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
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>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user