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
2026-01-01 22:35:48 -06:00
parent 0b16b8307f
commit bcb39b9cda
8 changed files with 644 additions and 13 deletions

View File

@@ -78,18 +78,7 @@ import { useDataSync } from './core/hooks/useDataSync';
import { MobileDebugPanel } from './core/debug/MobileDebugPanel';
import { MobileErrorBoundary } from './core/error-boundaries/MobileErrorBoundary';
import { useLoginNotifications } from './features/notifications/hooks/useLoginNotifications';
// 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>
);
import { DashboardScreen as DashboardFeature } from './features/dashboard';
const LogFuelScreen: React.FC = () => {
const queryClient = useQueryClient();
@@ -640,7 +629,10 @@ function App() {
transition={{ duration: 0.2, ease: "easeOut" }}
>
<MobileErrorBoundary screenName="Dashboard">
<DashboardScreen />
<DashboardFeature
onNavigate={navigateToScreen}
onVehicleClick={handleVehicleSelect}
/>
</MobileErrorBoundary>
</motion.div>
)}