Admin User v1

frontend/src/pages/SettingsPage.tsx

@@ -4,12 +4,14 @@
 
 import React, { useState } from 'react';
 import { useAuth0 } from '@auth0/auth0-react';
+import { useNavigate } from 'react-router-dom';
 import { useUnits } from '../core/units/UnitsContext';
-import { 
-  Box, 
-  Typography, 
-  Switch, 
-  Divider, 
+import { useAdminAccess } from '../core/auth/useAdminAccess';
+import {
+  Box,
+  Typography,
+  Switch,
+  Divider,
   Avatar,
   List,
   ListItem,
@@ -26,11 +28,14 @@ import NotificationsIcon from '@mui/icons-material/Notifications';
 import PaletteIcon from '@mui/icons-material/Palette';
 import SecurityIcon from '@mui/icons-material/Security';
 import StorageIcon from '@mui/icons-material/Storage';
+import AdminPanelSettingsIcon from '@mui/icons-material/AdminPanelSettings';
 import { Card } from '../shared-minimal/components/Card';
 
 export const SettingsPage: React.FC = () => {
   const { user, logout } = useAuth0();
+  const navigate = useNavigate();
   const { unitSystem, setUnitSystem } = useUnits();
+  const { isAdmin, loading: adminLoading } = useAdminAccess();
   const [notifications, setNotifications] = useState(true);
   const [emailUpdates, setEmailUpdates] = useState(false);
   const [darkMode, setDarkMode] = useState(false);
@@ -209,14 +214,14 @@ export const SettingsPage: React.FC = () => {
           <Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
             Data & Storage
           </Typography>
-          
+
           <List disablePadding>
             <ListItem>
               <ListItemIcon>
                 <StorageIcon />
               </ListItemIcon>
-              <ListItemText 
-                primary="Export Data" 
+              <ListItemText
+                primary="Export Data"
                 secondary="Download your vehicle and fuel log data"
               />
               <ListItemSecondaryAction>
@@ -227,8 +232,8 @@ export const SettingsPage: React.FC = () => {
             </ListItem>
             <Divider />
             <ListItem>
-              <ListItemText 
-                primary="Clear Cache" 
+              <ListItemText
+                primary="Clear Cache"
                 secondary="Remove cached data to free up space"
                 sx={{ pl: 7 }}
               />
@@ -241,6 +246,70 @@ export const SettingsPage: React.FC = () => {
           </List>
         </Card>
 
+        {/* Admin Console Section */}
+        {!adminLoading && isAdmin && (
+          <Card>
+            <Typography variant="h6" sx={{ fontWeight: 600, mb: 3, color: 'primary.main' }}>
+              Admin Console
+            </Typography>
+
+            <List disablePadding>
+              <ListItem>
+                <ListItemIcon>
+                  <AdminPanelSettingsIcon />
+                </ListItemIcon>
+                <ListItemText
+                  primary="User Management"
+                  secondary="Manage admin users and permissions"
+                />
+                <ListItemSecondaryAction>
+                  <MuiButton
+                    variant="outlined"
+                    size="small"
+                    onClick={() => navigate('/garage/settings/admin/users')}
+                  >
+                    Manage
+                  </MuiButton>
+                </ListItemSecondaryAction>
+              </ListItem>
+              <Divider />
+              <ListItem>
+                <ListItemText
+                  primary="Vehicle Catalog"
+                  secondary="Manage makes, models, years, trims, and engines"
+                  sx={{ pl: 7 }}
+                />
+                <ListItemSecondaryAction>
+                  <MuiButton
+                    variant="outlined"
+                    size="small"
+                    onClick={() => navigate('/garage/settings/admin/catalog')}
+                  >
+                    Manage
+                  </MuiButton>
+                </ListItemSecondaryAction>
+              </ListItem>
+              <Divider />
+              <ListItem>
+                <ListItemText
+                  primary="Station Management"
+                  secondary="Manage gas station data and locations"
+                  sx={{ pl: 7 }}
+                />
+                <ListItemSecondaryAction>
+                  <MuiButton
+                    variant="outlined"
+                    size="small"
+                    onClick={() => navigate('/garage/settings/admin/stations')}
+                  >
+                    Manage
+                  </MuiButton>
+                </ListItemSecondaryAction>
+              </ListItem>
+            </List>
+          </Card>
+        )}
+
         {/* Account Actions */}
         <Card>
           <Typography variant="h6" sx={{ fontWeight: 600, mb: 3, color: 'error.main' }}>

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