Admin User v1

frontend/src/pages/admin/AdminCatalogPage.tsx

@@ -0,0 +1,53 @@
+/**
+ * @ai-summary Desktop admin page for vehicle catalog management
+ * @ai-context CRUD operations for makes, models, years, trims, engines
+ */
+
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { Box, Typography, CircularProgress } from '@mui/material';
+import { Card } from '../../shared-minimal/components/Card';
+import { useAdminAccess } from '../../core/auth/useAdminAccess';
+
+export const AdminCatalogPage: React.FC = () => {
+  const { isAdmin, loading } = useAdminAccess();
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (!isAdmin) {
+    return <Navigate to="/garage/settings" replace />;
+  }
+
+  return (
+    <Box sx={{ py: 2 }}>
+      <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary', mb: 4 }}>
+        Vehicle Catalog Management
+      </Typography>
+
+      <Card>
+        <Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
+          Platform Catalog
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Vehicle catalog management interface coming soon.
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
+          Features:
+        </Typography>
+        <ul>
+          <li>Manage vehicle makes</li>
+          <li>Manage vehicle models</li>
+          <li>Manage model years</li>
+          <li>Manage trims</li>
+          <li>Manage engine specifications</li>
+        </ul>
+      </Card>
+    </Box>
+  );
+};

frontend/src/pages/admin/AdminStationsPage.tsx

@@ -0,0 +1,53 @@
+/**
+ * @ai-summary Desktop admin page for gas station management
+ * @ai-context CRUD operations for global station data
+ */
+
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { Box, Typography, CircularProgress } from '@mui/material';
+import { Card } from '../../shared-minimal/components/Card';
+import { useAdminAccess } from '../../core/auth/useAdminAccess';
+
+export const AdminStationsPage: React.FC = () => {
+  const { isAdmin, loading } = useAdminAccess();
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (!isAdmin) {
+    return <Navigate to="/garage/settings" replace />;
+  }
+
+  return (
+    <Box sx={{ py: 2 }}>
+      <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary', mb: 4 }}>
+        Station Management
+      </Typography>
+
+      <Card>
+        <Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
+          Gas Stations
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Station management interface coming soon.
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
+          Features:
+        </Typography>
+        <ul>
+          <li>View all gas stations</li>
+          <li>Create new stations</li>
+          <li>Update station information</li>
+          <li>Delete stations</li>
+          <li>View station usage statistics</li>
+        </ul>
+      </Card>
+    </Box>
+  );
+};

frontend/src/pages/admin/AdminUsersPage.tsx

@@ -0,0 +1,53 @@
+/**
+ * @ai-summary Desktop admin page for user management
+ * @ai-context Manage admin users, revoke, reinstate, and view audit logs
+ */
+
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { Box, Typography, CircularProgress } from '@mui/material';
+import { Card } from '../../shared-minimal/components/Card';
+import { useAdminAccess } from '../../core/auth/useAdminAccess';
+
+export const AdminUsersPage: React.FC = () => {
+  const { isAdmin, loading } = useAdminAccess();
+
+  if (loading) {
+    return (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', minHeight: '50vh' }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (!isAdmin) {
+    return <Navigate to="/garage/settings" replace />;
+  }
+
+  return (
+    <Box sx={{ py: 2 }}>
+      <Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary', mb: 4 }}>
+        User Management
+      </Typography>
+
+      <Card>
+        <Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
+          Admin Users
+        </Typography>
+        <Typography variant="body2" color="text.secondary">
+          Admin user management interface coming soon.
+        </Typography>
+        <Typography variant="body2" color="text.secondary" sx={{ mt: 2 }}>
+          Features:
+        </Typography>
+        <ul>
+          <li>List all admin users</li>
+          <li>Add new admin users</li>
+          <li>Revoke admin access</li>
+          <li>Reinstate revoked admins</li>
+          <li>View audit logs</li>
+        </ul>
+      </Card>
+    </Box>
+  );
+};