MVP with new UX

frontend/src/features/vehicles/pages/VehiclesPage.tsx

@@ -1,12 +1,13 @@
 /**
- * @ai-summary Main vehicles page
+ * @ai-summary Main vehicles page with Material Design 3
  */
 
 import React, { useState } from 'react';
+import { Box, Typography, Grid, Button as MuiButton } from '@mui/material';
+import AddIcon from '@mui/icons-material/Add';
 import { useVehicles, useCreateVehicle, useDeleteVehicle } from '../hooks/useVehicles';
 import { VehicleCard } from '../components/VehicleCard';
 import { VehicleForm } from '../components/VehicleForm';
-import { Button } from '../../../shared-minimal/components/Button';
 import { Card } from '../../../shared-minimal/components/Card';
 import { useAppStore } from '../../../core/store';
 import { useNavigate } from 'react-router-dom';
@@ -33,24 +34,45 @@ export const VehiclesPage: React.FC = () => {
 
   if (isLoading) {
     return (
-      <div className="flex items-center justify-center h-64">
-        <div className="text-gray-500">Loading vehicles...</div>
-      </div>
+      <Box sx={{ 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'center', 
+        height: '50vh' 
+      }}>
+        <Typography color="text.secondary">Loading vehicles...</Typography>
+      </Box>
     );
   }
 
   return (
-    <div className="space-y-6">
-      <div className="flex justify-between items-center">
-        <h1 className="text-2xl font-bold text-gray-900">My Vehicles</h1>
+    <Box sx={{ py: 2 }}>
+      <Box sx={{ 
+        display: 'flex', 
+        justifyContent: 'space-between', 
+        alignItems: 'center', 
+        mb: 4 
+      }}>
+        <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary' }}>
+          My Vehicles
+        </Typography>
         {!showForm && (
-          <Button onClick={() => setShowForm(true)}>Add Vehicle</Button>
+          <MuiButton 
+            variant="contained" 
+            startIcon={<AddIcon />}
+            onClick={() => setShowForm(true)}
+            sx={{ borderRadius: '999px' }}
+          >
+            Add Vehicle
+          </MuiButton>
         )}
-      </div>
+      </Box>
 
       {showForm && (
-        <Card>
-          <h2 className="text-lg font-semibold mb-4">Add New Vehicle</h2>
+        <Card className="mb-6">
+          <Typography variant="h6" sx={{ fontWeight: 600, mb: 2 }}>
+            Add New Vehicle
+          </Typography>
           <VehicleForm
             onSubmit={async (data) => {
               await createVehicle.mutateAsync(data);
@@ -64,26 +86,36 @@ export const VehiclesPage: React.FC = () => {
 
       {vehicles?.length === 0 ? (
         <Card>
-          <div className="text-center py-12">
-            <p className="text-gray-500 mb-4">No vehicles added yet</p>
+          <Box sx={{ textAlign: 'center', py: 8 }}>
+            <Typography color="text.secondary" sx={{ mb: 3 }}>
+              No vehicles added yet
+            </Typography>
             {!showForm && (
-              <Button onClick={() => setShowForm(true)}>Add Your First Vehicle</Button>
+              <MuiButton 
+                variant="contained" 
+                startIcon={<AddIcon />}
+                onClick={() => setShowForm(true)}
+                sx={{ borderRadius: '999px' }}
+              >
+                Add Your First Vehicle
+              </MuiButton>
             )}
-          </div>
+          </Box>
         </Card>
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+        <Grid container spacing={3}>
           {vehicles?.map((vehicle) => (
-            <VehicleCard
-              key={vehicle.id}
-              vehicle={vehicle}
-              onEdit={(v) => console.log('Edit', v)}
-              onDelete={handleDelete}
-              onSelect={handleSelectVehicle}
-            />
+            <Grid item xs={12} md={6} lg={4} key={vehicle.id}>
+              <VehicleCard
+                vehicle={vehicle}
+                onEdit={(v) => console.log('Edit', v)}
+                onDelete={handleDelete}
+                onSelect={handleSelectVehicle}
+              />
+            </Grid>
           ))}
-        </div>
+        </Grid>
       )}
-    </div>
+    </Box>
   );
 };