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>

frontend/src/features/dashboard/components/SummaryCards.tsx

@@ -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>
+  );
+};