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' }}>