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