egullickson/motovaultpro
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: user export service. bug and UX fixes. Complete minus outstanding email template fixes.

Browse Source
This commit is contained in:
Eric Gullickson
2025-12-26 14:06:03 -06:00
parent 8c13dc0a55
commit fb52ce398b
35 changed files with 1686 additions and 118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
frontend/src/App.tsx
View File

@@ -16,6 +16,7 @@ import { UnitsProvider } from './core/units/UnitsContext';
const VehiclesPage = lazy(() => import('./features/vehicles/pages/VehiclesPage').then(m => ({ default: m.VehiclesPage })));
const VehicleDetailPage = lazy(() => import('./features/vehicles/pages/VehicleDetailPage').then(m => ({ default: m.VehicleDetailPage })));
const SettingsPage = lazy(() => import('./pages/SettingsPage').then(m => ({ default: m.SettingsPage })));
const SecuritySettingsPage = lazy(() => import('./pages/SecuritySettingsPage').then(m => ({ default: m.SecuritySettingsPage })));
const FuelLogsPage = lazy(() => import('./features/fuel-logs/pages/FuelLogsPage').then(m => ({ default: m.FuelLogsPage })));
const DocumentsPage = lazy(() => import('./features/documents/pages/DocumentsPage').then(m => ({ default: m.DocumentsPage })));
const DocumentDetailPage = lazy(() => import('./features/documents/pages/DocumentDetailPage').then(m => ({ default: m.DocumentDetailPage })));
@@ -71,6 +72,7 @@ import { VehicleForm } from './features/vehicles/components/VehicleForm';
import { useOptimisticVehicles } from './features/vehicles/hooks/useOptimisticVehicles';
import { CreateVehicleRequest } from './features/vehicles/types/vehicles.types';
import { MobileSettingsScreen } from './features/settings/mobile/MobileSettingsScreen';
import { SecurityMobileScreen } from './features/settings/mobile/SecurityMobileScreen';
import { useNavigationStore, useUserStore } from './core/store';
import { useDataSync } from './core/hooks/useDataSync';
import { MobileDebugPanel } from './core/debug/MobileDebugPanel';
@@ -641,6 +643,19 @@ function App() {
</MobileErrorBoundary>
</motion.div>
)}
{activeScreen === "Security" && (
<motion.div
key="security"
initial={{opacity:0, y:8}}
animate={{opacity:1, y:0}}
exit={{opacity:0, y:-8}}
transition={{ duration: 0.2, ease: "easeOut" }}
>
<MobileErrorBoundary screenName="Security">
<SecurityMobileScreen />
</MobileErrorBoundary>
</motion.div>
)}
{activeScreen === "Documents" && (
<motion.div
key="documents"
@@ -883,6 +898,7 @@ function App() {
<Route path="/garage/maintenance" element={<MaintenancePage />} />
<Route path="/garage/stations" element={<StationsPage />} />
<Route path="/garage/settings" element={<SettingsPage />} />
<Route path="/garage/settings/security" element={<SecuritySettingsPage />} />
<Route path="/garage/settings/admin/users" element={<AdminUsersPage />} />
<Route path="/garage/settings/admin/catalog" element={<AdminCatalogPage />} />
<Route path="/garage/settings/admin/community-stations" element={<AdminCommunityStationsPage />} />

28
frontend/src/components/Layout.tsx
View File

@@ -5,7 +5,7 @@
import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { Link, useLocation } from 'react-router-dom';
import { Container, Paper, Typography, Box, IconButton, Avatar } from '@mui/material';
import { Container, Paper, Typography, Box, IconButton, Avatar, useTheme } from '@mui/material';
import DirectionsCarRoundedIcon from '@mui/icons-material/DirectionsCarRounded';
import LocalGasStationRoundedIcon from '@mui/icons-material/LocalGasStationRounded';
import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
@@ -28,6 +28,7 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
const { user, logout } = useAuth0();
const { sidebarOpen, toggleSidebar, setSidebarOpen } = useAppStore();
const location = useLocation();
const theme = useTheme();
// Sync theme preference with backend
useThemeSync();
@@ -69,11 +70,13 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
{/* App header */}
<div className="px-5 pt-5 pb-3">
<div className="flex items-center justify-between">
<img
<div className="bg-primary-500 dark:bg-transparent rounded px-2 py-1 inline-flex items-center">
<img
src="/images/logos/motovaultpro-title-slogan.png"
alt="MotoVaultPro"
className="h-6 w-auto"
/>
</div>
<div className="flex items-center gap-2">
<NotificationBell />
<div className="text-xs text-slate-500 dark:text-titanio">v1.0</div>
@@ -125,11 +128,22 @@ export const Layout: React.FC<LayoutProps> = ({ children, mobileMode = false })
gap: 1
}}
>
<img
src="/images/logos/motovaultpro-title-slogan.png"
alt="MotoVaultPro"
style={{ height: 24, width: 'auto', maxWidth: 180 }}
/>
<Box
sx={{
backgroundColor: theme.palette.mode === 'light' ? 'primary.main' : 'transparent',
borderRadius: 1,
px: 1,
py: 0.5,
display: 'inline-flex',
alignItems: 'center'
}}
>
<img
src="/images/logos/motovaultpro-title-slogan.png"
alt="MotoVaultPro"
style={{ height: 24, width: 'auto', maxWidth: 180 }}
/>
</Box>
<IconButton
onClick={toggleSidebar}
size="small"

2
frontend/src/core/store/navigation.ts
View File

@@ -2,7 +2,7 @@ import { create } from 'zustand';
import { persist, createJSONStorage } from 'zustand/middleware';
import { safeStorage } from '../utils/safe-storage';
export type MobileScreen = 'Dashboard' | 'Vehicles' | 'Log Fuel' | 'Stations' | 'Documents' | 'Settings' | 'AdminUsers' | 'AdminCatalog' | 'AdminCommunityStations' | 'AdminEmailTemplates' | 'AdminBackup';
export type MobileScreen = 'Dashboard' | 'Vehicles' | 'Log Fuel' | 'Stations' | 'Documents' | 'Settings' | 'Security' | 'AdminUsers' | 'AdminCatalog' | 'AdminCommunityStations' | 'AdminEmailTemplates' | 'AdminBackup';
export type VehicleSubScreen = 'list' | 'detail' | 'add' | 'edit';
interface NavigationHistory {

103
frontend/src/features/onboarding/components/PreferencesStep.tsx
View File

@@ -3,9 +3,10 @@
*/
import React from 'react';
import { useForm } from 'react-hook-form';
import { useForm, Controller } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { FormControl, Select, MenuItem } from '@mui/material';
import { Button } from '../../../shared-minimal/components/Button';
import { OnboardingPreferences } from '../types/onboarding.types';
@@ -22,7 +23,7 @@ interface PreferencesStepProps {
export const PreferencesStep: React.FC<PreferencesStepProps> = ({ onNext, loading }) => {
const {
register,
control,
handleSubmit,
formState: { errors },
watch,
@@ -88,17 +89,38 @@ export const PreferencesStep: React.FC<PreferencesStepProps> = ({ onNext, loadin
<label className="block text-sm font-medium text-slate-700 mb-2">
Currency
</label>
<select
{...register('currencyCode')}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
style={{ fontSize: '16px' }}
>
<option value="USD">USD - US Dollar</option>
<option value="EUR">EUR - Euro</option>
<option value="GBP">GBP - British Pound</option>
<option value="CAD">CAD - Canadian Dollar</option>
<option value="AUD">AUD - Australian Dollar</option>
</select>
<FormControl fullWidth>
<Controller
name="currencyCode"
control={control}
render={({ field }) => (
<Select
{...field}
displayEmpty
sx={{
minHeight: '44px',
fontSize: '16px',
borderRadius: '8px',
'& .MuiOutlinedInput-notchedOutline': {
borderColor: '#d1d5db',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: '#9ca3af',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: '#7A212A',
},
}}
>
<MenuItem value="USD">USD - US Dollar</MenuItem>
<MenuItem value="EUR">EUR - Euro</MenuItem>
<MenuItem value="GBP">GBP - British Pound</MenuItem>
<MenuItem value="CAD">CAD - Canadian Dollar</MenuItem>
<MenuItem value="AUD">AUD - Australian Dollar</MenuItem>
</Select>
)}
/>
</FormControl>
{errors.currencyCode && (
<p className="mt-1 text-sm text-red-600">{errors.currencyCode.message}</p>
)}
@@ -109,23 +131,44 @@ export const PreferencesStep: React.FC<PreferencesStepProps> = ({ onNext, loadin
<label className="block text-sm font-medium text-slate-700 mb-2">
Time Zone
</label>
<select
{...register('timeZone')}
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-primary-500 min-h-[44px]"
style={{ fontSize: '16px' }}
>
<option value="America/New_York">Eastern Time (ET)</option>
<option value="America/Chicago">Central Time (CT)</option>
<option value="America/Denver">Mountain Time (MT)</option>
<option value="America/Los_Angeles">Pacific Time (PT)</option>
<option value="America/Phoenix">Arizona Time (MST)</option>
<option value="America/Anchorage">Alaska Time (AKT)</option>
<option value="Pacific/Honolulu">Hawaii Time (HST)</option>
<option value="Europe/London">London (GMT/BST)</option>
<option value="Europe/Paris">Paris (CET/CEST)</option>
<option value="Asia/Tokyo">Tokyo (JST)</option>
<option value="Australia/Sydney">Sydney (AEST/AEDT)</option>
</select>
<FormControl fullWidth>
<Controller
name="timeZone"
control={control}
render={({ field }) => (
<Select
{...field}
displayEmpty
sx={{
minHeight: '44px',
fontSize: '16px',
borderRadius: '8px',
'& .MuiOutlinedInput-notchedOutline': {
borderColor: '#d1d5db',
},
'&:hover .MuiOutlinedInput-notchedOutline': {
borderColor: '#9ca3af',
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: '#7A212A',
},
}}
>
<MenuItem value="America/New_York">Eastern Time (ET)</MenuItem>
<MenuItem value="America/Chicago">Central Time (CT)</MenuItem>
<MenuItem value="America/Denver">Mountain Time (MT)</MenuItem>
<MenuItem value="America/Los_Angeles">Pacific Time (PT)</MenuItem>
<MenuItem value="America/Phoenix">Arizona Time (MST)</MenuItem>
<MenuItem value="America/Anchorage">Alaska Time (AKT)</MenuItem>
<MenuItem value="Pacific/Honolulu">Hawaii Time (HST)</MenuItem>
<MenuItem value="Europe/London">London (GMT/BST)</MenuItem>
<MenuItem value="Europe/Paris">Paris (CET/CEST)</MenuItem>
<MenuItem value="Asia/Tokyo">Tokyo (JST)</MenuItem>
<MenuItem value="Australia/Sydney">Sydney (AEST/AEDT)</MenuItem>
</Select>
)}
/>
</FormControl>
{errors.timeZone && (
<p className="mt-1 text-sm text-red-600">{errors.timeZone.message}</p>
)}

16
frontend/src/features/settings/api/export.api.ts Normal file
View File

@@ -0,0 +1,16 @@
/**
* @ai-summary API client for user data export
* @ai-context Downloads user export as tar.gz blob
*/
import { apiClient } from '../../../core/api/client';
export const exportApi = {
downloadUserExport: async (): Promise<Blob> => {
const response = await apiClient.get('/user/export', {
responseType: 'blob',
timeout: 120000, // 2 minute timeout for large exports
});
return response.data;
},
};

11
frontend/src/features/settings/api/security.api.ts Normal file
View File

@@ -0,0 +1,11 @@
/**
* @ai-summary API client for security endpoints
*/
import { apiClient } from '../../../core/api/client';
import { SecurityStatus, PasswordResetResponse } from '../types/security.types';
export const securityApi = {
getSecurityStatus: () => apiClient.get<SecurityStatus>('/auth/security-status'),
requestPasswordReset: () => apiClient.post<PasswordResetResponse>('/auth/request-password-reset'),
};

38
frontend/src/features/settings/hooks/useExportUserData.ts Normal file
View File

@@ -0,0 +1,38 @@
/**
* @ai-summary React Query hook for user data export
* @ai-context Downloads tar.gz archive with all user data
*/
import { useMutation } from '@tanstack/react-query';
import toast from 'react-hot-toast';
import { exportApi } from '../api/export.api';
interface ApiError {
response?: {
data?: {
error?: string;
};
};
message?: string;
}
export const useExportUserData = () => {
return useMutation({
mutationFn: () => exportApi.downloadUserExport(),
onSuccess: (blob) => {
const url = window.URL.createObjectURL(blob);
const link = document.createElement('a');
link.href = url;
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, 19);
link.download = `motovaultpro_export_${timestamp}.tar.gz`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
window.URL.revokeObjectURL(url);
toast.success('Data exported successfully');
},
onError: (error: ApiError) => {
toast.error(error.response?.data?.error || 'Failed to export data');
},
});
};

57
frontend/src/features/settings/hooks/useSecurity.ts Normal file
View File

@@ -0,0 +1,57 @@
/**
* @ai-summary React hooks for security settings management
*/
import { useQuery, useMutation } from '@tanstack/react-query';
import { useAuth0 } from '@auth0/auth0-react';
import { securityApi } from '../api/security.api';
import toast from 'react-hot-toast';
interface ApiError {
response?: {
data?: {
error?: string;
message?: string;
};
};
message?: string;
}
export const useSecurityStatus = () => {
const { isAuthenticated, isLoading } = useAuth0();
return useQuery({
queryKey: ['security-status'],
queryFn: async () => {
const response = await securityApi.getSecurityStatus();
return response.data;
},
enabled: isAuthenticated && !isLoading,
staleTime: 5 * 60 * 1000, // 5 minutes
gcTime: 10 * 60 * 1000, // 10 minutes cache time
retry: (failureCount, error: ApiError) => {
if (error?.response?.data?.error === 'Unauthorized' && failureCount < 3) {
return true;
}
return false;
},
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000),
refetchOnWindowFocus: false,
});
};
export const useRequestPasswordReset = () => {
return useMutation({
mutationFn: () => securityApi.requestPasswordReset(),
onSuccess: (response) => {
toast.success(response.data.message);
},
onError: (error: ApiError) => {
toast.error(
error.response?.data?.message ||
error.response?.data?.error ||
'Failed to send password reset email'
);
},
});
};

67
frontend/src/features/settings/mobile/MobileSettingsScreen.tsx
View File

@@ -4,6 +4,7 @@ import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
import { MobileContainer } from '../../../shared-minimal/components/mobile/MobileContainer';
import { useSettings } from '../hooks/useSettings';
import { useProfile, useUpdateProfile } from '../hooks/useProfile';
import { useExportUserData } from '../hooks/useExportUserData';
import { useAdminAccess } from '../../../core/auth/useAdminAccess';
import { useNavigationStore } from '../../../core/store';
import { DeleteAccountModal } from './DeleteAccountModal';
@@ -32,7 +33,7 @@ const ToggleSwitch: React.FC<ToggleSwitchProps> = ({
<button
onClick={onChange}
className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors ${
enabled ? 'bg-blue-600' : 'bg-gray-200'
enabled ? 'bg-primary-500 dark:bg-primary-600' : 'bg-gray-200 dark:bg-gray-600'
}`}
>
<span
@@ -78,6 +79,7 @@ export const MobileSettingsScreen: React.FC = () => {
const { settings, updateSetting, isLoading, error } = useSettings();
const { data: profile, isLoading: profileLoading } = useProfile();
const updateProfileMutation = useUpdateProfile();
const exportMutation = useExportUserData();
const { isAdmin, loading: adminLoading } = useAdminAccess();
const [showDataExport, setShowDataExport] = useState(false);
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false);
@@ -102,9 +104,8 @@ export const MobileSettingsScreen: React.FC = () => {
};
const handleExportData = () => {
// TODO: Implement data export functionality
console.log('Exporting user data...');
setShowDataExport(false);
exportMutation.mutate();
};
@@ -149,7 +150,7 @@ export const MobileSettingsScreen: React.FC = () => {
<div className="flex items-center justify-center min-h-[400px]">
<div className="text-center">
<div className="text-slate-500 mb-2">Loading settings...</div>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500 mx-auto"></div>
</div>
</div>
</MobileContainer>
@@ -167,7 +168,7 @@ export const MobileSettingsScreen: React.FC = () => {
<p className="text-sm text-slate-600 mb-4">{error}</p>
<button
onClick={() => window.location.reload()}
className="px-4 py-2 bg-blue-600 text-white rounded-lg"
className="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg dark:bg-primary-600 dark:hover:bg-primary-700"
>
Retry
</button>
@@ -198,7 +199,7 @@ export const MobileSettingsScreen: React.FC = () => {
{!isEditingProfile && !profileLoading && (
<button
onClick={handleEditProfile}
className="px-3 py-1.5 bg-blue-100 text-blue-700 rounded-lg text-sm font-medium hover:bg-blue-200 transition-colors"
className="px-3 py-1.5 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
style={{ minHeight: '44px', minWidth: '44px' }}
>
Edit
@@ -208,7 +209,7 @@ export const MobileSettingsScreen: React.FC = () => {
{profileLoading ? (
<div className="flex justify-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
</div>
) : isEditingProfile ? (
<div className="space-y-4">
@@ -235,7 +236,7 @@ export const MobileSettingsScreen: React.FC = () => {
value={editedDisplayName}
onChange={(e) => setEditedDisplayName(e.target.value)}
placeholder="Enter your display name"
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-nero dark:border-silverstone dark:text-avus"
style={{ fontSize: '16px', minHeight: '44px' }}
/>
</div>
@@ -249,7 +250,7 @@ export const MobileSettingsScreen: React.FC = () => {
value={editedNotificationEmail}
onChange={(e) => setEditedNotificationEmail(e.target.value)}
placeholder="Leave blank to use your primary email"
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
className="w-full px-3 py-2 border border-slate-300 rounded-lg focus:ring-2 focus:ring-primary-500 focus:border-primary-500 dark:bg-nero dark:border-silverstone dark:text-avus"
style={{ fontSize: '16px', minHeight: '44px' }}
/>
<p className="text-xs text-slate-500 mt-1">Optional: Use a different email for notifications</p>
@@ -267,7 +268,7 @@ export const MobileSettingsScreen: React.FC = () => {
<button
onClick={handleSaveProfile}
disabled={updateProfileMutation.isPending}
className="flex-1 py-2.5 px-4 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors disabled:opacity-50 flex items-center justify-center"
className="flex-1 py-2.5 px-4 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors disabled:opacity-50 flex items-center justify-center dark:bg-primary-600 dark:hover:bg-primary-700"
style={{ minHeight: '44px' }}
>
{updateProfileMutation.isPending ? (
@@ -288,7 +289,7 @@ export const MobileSettingsScreen: React.FC = () => {
className="w-12 h-12 rounded-full"
/>
) : (
<div className="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center text-white font-semibold">
<div className="w-12 h-12 rounded-full bg-primary-500 flex items-center justify-center text-white font-semibold">
{profile?.displayName?.charAt(0) || user?.name?.charAt(0) || user?.email?.charAt(0)}
</div>
)}
@@ -372,7 +373,7 @@ export const MobileSettingsScreen: React.FC = () => {
</div>
<button
onClick={() => updateSetting('unitSystem', settings.unitSystem === 'imperial' ? 'metric' : 'imperial')}
className="px-4 py-2 bg-blue-100 text-blue-700 rounded-lg text-sm font-medium hover:bg-blue-200 transition-colors"
className="px-4 py-2 bg-gray-100 text-gray-700 rounded-lg text-sm font-medium hover:bg-gray-200 transition-colors dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600"
>
{settings.unitSystem === 'imperial' ? 'Switch to Metric' : 'Switch to Imperial'}
</button>
@@ -388,7 +389,7 @@ export const MobileSettingsScreen: React.FC = () => {
<div className="space-y-3">
<button
onClick={() => setShowDataExport(true)}
className="w-full text-left p-3 bg-blue-50 text-blue-700 rounded-lg font-medium hover:bg-blue-100 transition-colors"
className="w-full text-left p-3 bg-primary-50 text-primary-700 rounded-lg font-medium hover:bg-primary-100 transition-colors dark:bg-primary-900/20 dark:text-primary-300 dark:hover:bg-primary-900/30"
>
Export My Data
</button>
@@ -399,43 +400,60 @@ export const MobileSettingsScreen: React.FC = () => {
</div>
</GlassCard>
{/* Security & Privacy Section */}
<GlassCard padding="md">
<div>
<h2 className="text-lg font-semibold text-slate-800 dark:text-white mb-4">Security & Privacy</h2>
<div className="space-y-3">
<button
onClick={() => navigateToScreen('Security')}
className="w-full text-left p-4 bg-primary-50 text-primary-700 rounded-lg font-medium hover:bg-primary-100 transition-colors active:bg-primary-200 dark:bg-primary-900/20 dark:text-primary-300 dark:hover:bg-primary-900/30"
style={{ minHeight: '44px' }}
>
<div className="font-semibold">Security Settings</div>
<div className="text-sm text-primary-500 mt-1 dark:text-primary-400">Password, passkeys, verification</div>
</button>
</div>
</div>
</GlassCard>
{/* Admin Console Section */}
{!adminLoading && isAdmin && (
<GlassCard padding="md">
<div>
<h2 className="text-lg font-semibold text-blue-600 mb-4">Admin Console</h2>
<h2 className="text-lg font-semibold text-primary-500 mb-4">Admin Console</h2>
<div className="space-y-3">
<button
onClick={() => navigateToScreen('AdminUsers')}
className="w-full text-left p-4 bg-blue-50 text-blue-700 rounded-lg font-medium hover:bg-blue-100 transition-colors active:bg-blue-200"
className="w-full text-left p-4 bg-primary-50 text-primary-700 rounded-lg font-medium hover:bg-primary-100 transition-colors active:bg-primary-200 dark:bg-primary-900/20 dark:text-primary-300 dark:hover:bg-primary-900/30"
style={{ minHeight: '44px' }}
>
<div className="font-semibold">User Management</div>
<div className="text-sm text-blue-600 mt-1">Manage admin users and permissions</div>
<div className="text-sm text-primary-500 mt-1 dark:text-primary-400">Manage admin users and permissions</div>
</button>
<button
onClick={() => navigateToScreen('AdminCatalog')}
className="w-full text-left p-4 bg-blue-50 text-blue-700 rounded-lg font-medium hover:bg-blue-100 transition-colors active:bg-blue-200"
className="w-full text-left p-4 bg-primary-50 text-primary-700 rounded-lg font-medium hover:bg-primary-100 transition-colors active:bg-primary-200 dark:bg-primary-900/20 dark:text-primary-300 dark:hover:bg-primary-900/30"
style={{ minHeight: '44px' }}
>
<div className="font-semibold">Vehicle Catalog</div>
<div className="text-sm text-blue-600 mt-1">Manage makes, models, and engines</div>
<div className="text-sm text-primary-500 mt-1 dark:text-primary-400">Manage makes, models, and engines</div>
</button>
<button
onClick={() => navigateToScreen('AdminEmailTemplates')}
className="w-full text-left p-4 bg-blue-50 text-blue-700 rounded-lg font-medium hover:bg-blue-100 transition-colors active:bg-blue-200"
className="w-full text-left p-4 bg-primary-50 text-primary-700 rounded-lg font-medium hover:bg-primary-100 transition-colors active:bg-primary-200 dark:bg-primary-900/20 dark:text-primary-300 dark:hover:bg-primary-900/30"
style={{ minHeight: '44px' }}
>
<div className="font-semibold">Email Templates</div>
<div className="text-sm text-blue-600 mt-1">Manage notification email templates</div>
<div className="text-sm text-primary-500 mt-1 dark:text-primary-400">Manage notification email templates</div>
</button>
<button
onClick={() => navigateToScreen('AdminBackup')}
className="w-full text-left p-4 bg-blue-50 text-blue-700 rounded-lg font-medium hover:bg-blue-100 transition-colors active:bg-blue-200"
className="w-full text-left p-4 bg-primary-50 text-primary-700 rounded-lg font-medium hover:bg-primary-100 transition-colors active:bg-primary-200 dark:bg-primary-900/20 dark:text-primary-300 dark:hover:bg-primary-900/30"
style={{ minHeight: '44px' }}
>
<div className="font-semibold">Backup & Restore</div>
<div className="text-sm text-blue-600 mt-1">Create backups and restore data</div>
<div className="text-sm text-primary-500 mt-1 dark:text-primary-400">Create backups and restore data</div>
</button>
</div>
</div>
@@ -481,9 +499,10 @@ export const MobileSettingsScreen: React.FC = () => {
</button>
<button
onClick={handleExportData}
className="flex-1 py-2 px-4 bg-blue-600 text-white rounded-lg font-medium hover:bg-blue-700 transition-colors"
disabled={exportMutation.isPending}
className="flex-1 py-2 px-4 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors disabled:opacity-50 dark:bg-primary-600 dark:hover:bg-primary-700"
>
Export
{exportMutation.isPending ? 'Exporting...' : 'Export'}
</button>
</div>
</Modal>

202
frontend/src/features/settings/mobile/SecurityMobileScreen.tsx Normal file
View File

@@ -0,0 +1,202 @@
/**
* @ai-summary Security settings screen for mobile application
*/
import React from 'react';
import { GlassCard } from '../../../shared-minimal/components/mobile/GlassCard';
import { MobileContainer } from '../../../shared-minimal/components/mobile/MobileContainer';
import { useNavigationStore } from '../../../core/store';
import { useSecurityStatus, useRequestPasswordReset } from '../hooks/useSecurity';
export const SecurityMobileScreen: React.FC = () => {
const { goBack } = useNavigationStore();
const { data: securityStatus, isLoading, error } = useSecurityStatus();
const passwordResetMutation = useRequestPasswordReset();
const handlePasswordReset = () => {
passwordResetMutation.mutate();
};
const handleBack = () => {
goBack();
};
if (isLoading) {
return (
<MobileContainer>
<div className="space-y-4 pb-20 p-4">
{/* Header */}
<div className="flex items-center mb-6">
<button
onClick={handleBack}
className="mr-4 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
style={{ minHeight: '44px', minWidth: '44px' }}
>
<svg className="w-6 h-6 text-slate-600 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
</button>
<h1 className="text-2xl font-bold text-slate-800 dark:text-white">Security</h1>
</div>
<GlassCard padding="md">
<div className="flex justify-center py-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary-500"></div>
</div>
</GlassCard>
</div>
</MobileContainer>
);
}
if (error) {
return (
<MobileContainer>
<div className="space-y-4 pb-20 p-4">
{/* Header */}
<div className="flex items-center mb-6">
<button
onClick={handleBack}
className="mr-4 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
style={{ minHeight: '44px', minWidth: '44px' }}
>
<svg className="w-6 h-6 text-slate-600 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
</button>
<h1 className="text-2xl font-bold text-slate-800 dark:text-white">Security</h1>
</div>
<GlassCard padding="md">
<div className="text-center py-8">
<p className="text-red-600 mb-4">Failed to load security settings</p>
<button
onClick={() => window.location.reload()}
className="px-4 py-2 bg-primary-500 hover:bg-primary-600 text-white rounded-lg dark:bg-primary-600 dark:hover:bg-primary-700"
>
Retry
</button>
</div>
</GlassCard>
</div>
</MobileContainer>
);
}
return (
<MobileContainer>
<div className="space-y-4 pb-20 p-4">
{/* Header */}
<div className="flex items-center mb-6">
<button
onClick={handleBack}
className="mr-4 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800"
style={{ minHeight: '44px', minWidth: '44px' }}
>
<svg className="w-6 h-6 text-slate-600 dark:text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
</svg>
</button>
<h1 className="text-2xl font-bold text-slate-800 dark:text-white">Security</h1>
</div>
{/* Email Verification Status */}
<GlassCard padding="md">
<h2 className="text-lg font-semibold text-slate-800 dark:text-white mb-4">Account Verification</h2>
<div className="space-y-4">
<div>
<p className="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Email Address</p>
<p className="text-sm text-slate-800 dark:text-white">{securityStatus?.email || 'Not available'}</p>
</div>
<div className="flex items-center justify-between">
<div>
<p className="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Email Verification</p>
<p className="text-sm text-slate-800 dark:text-white">
{securityStatus?.emailVerified ? 'Verified' : 'Not verified'}
</p>
</div>
<span
className={`px-3 py-1 rounded-full text-xs font-medium ${
securityStatus?.emailVerified
? 'bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300'
: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-300'
}`}
>
{securityStatus?.emailVerified ? 'Verified' : 'Pending'}
</span>
</div>
</div>
</GlassCard>
{/* Password Management */}
<GlassCard padding="md">
<h2 className="text-lg font-semibold text-slate-800 dark:text-white mb-4">Password</h2>
<div className="space-y-4">
<p className="text-sm text-slate-600 dark:text-slate-400">
Click below to receive an email with a link to reset your password.
</p>
<button
onClick={handlePasswordReset}
disabled={passwordResetMutation.isPending}
className="w-full py-3 px-4 bg-primary-500 text-white rounded-lg font-medium hover:bg-primary-600 transition-colors disabled:opacity-50 flex items-center justify-center dark:bg-primary-600 dark:hover:bg-primary-700"
style={{ minHeight: '44px' }}
>
{passwordResetMutation.isPending ? (
<div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div>
) : (
'Reset Password'
)}
</button>
{passwordResetMutation.isSuccess && (
<div className="p-3 bg-green-50 text-green-800 rounded-lg text-sm dark:bg-green-900/20 dark:text-green-300">
Password reset email sent! Please check your inbox.
</div>
)}
</div>
</GlassCard>
{/* Passkeys Information */}
<GlassCard padding="md">
<h2 className="text-lg font-semibold text-slate-800 dark:text-white mb-4">Passkeys</h2>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div>
<p className="text-xs font-medium text-slate-500 dark:text-slate-400 uppercase">Passkey Authentication</p>
<p className="text-sm text-slate-800 dark:text-white">
{securityStatus?.passkeysEnabled ? 'Available' : 'Not available'}
</p>
</div>
<span
className={`px-3 py-1 rounded-full text-xs font-medium ${
securityStatus?.passkeysEnabled
? 'bg-primary-100 text-primary-800 dark:bg-primary-900/30 dark:text-primary-300'
: 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
}`}
>
{securityStatus?.passkeysEnabled ? 'Available' : 'N/A'}
</span>
</div>
<div className="p-3 bg-blue-50 text-blue-800 rounded-lg text-sm dark:bg-blue-900/20 dark:text-blue-300">
<p className="font-medium mb-1">About Passkeys</p>
<p>
Passkeys are a secure, passwordless way to sign in using your device's biometric authentication (fingerprint, face recognition) or PIN.
</p>
<p className="mt-2">
You can register a passkey during the sign-in process. When you see the option to "Create a passkey," follow the prompts to set up passwordless authentication.
</p>
</div>
</div>
</GlassCard>
</div>
</MobileContainer>
);
};
export default SecurityMobileScreen;

15
frontend/src/features/settings/types/security.types.ts Normal file
View File

@@ -0,0 +1,15 @@
/**
* @ai-summary Security types for settings feature
*/
export interface SecurityStatus {
emailVerified: boolean;
email: string;
passkeysEnabled: boolean;
passwordLastChanged: string | null;
}
export interface PasswordResetResponse {
message: string;
success: boolean;
}

4
frontend/src/features/stations/components/Premium93TabContent.tsx
View File

@@ -132,7 +132,7 @@ export const Premium93TabContent: React.FC<Premium93TabContentProps> = ({
variant="outlined"
sx={{
p: 2,
backgroundColor: '#fafafa',
backgroundColor: 'background.default',
borderRadius: 1,
}}
>
@@ -177,7 +177,7 @@ export const Premium93TabContent: React.FC<Premium93TabContentProps> = ({
variant="outlined"
sx={{
p: 2,
backgroundColor: '#fafafa',
backgroundColor: 'background.default',
borderRadius: 1,
}}
>

2
frontend/src/features/stations/components/StationMap.tsx
View File

@@ -338,7 +338,7 @@ export const StationMap: React.FC<StationMapProps> = ({
width: '100%',
borderRadius: 1,
overflow: 'hidden',
backgroundColor: '#e0e0e0'
backgroundColor: 'grey.300'
}}
>
<Box

2
frontend/src/features/stations/components/SubmitFor93Dialog.tsx
View File

@@ -136,7 +136,7 @@ export const SubmitFor93Dialog: React.FC<SubmitFor93DialogProps> = ({
<DialogContent sx={{ display: 'flex', flexDirection: 'column', gap: 2, pt: 2 }}>
{/* Station name for context */}
<Box sx={{ backgroundColor: '#f5f5f5', p: 1.5, borderRadius: 1 }}>
<Box sx={{ backgroundColor: 'action.hover', p: 1.5, borderRadius: 1 }}>
<strong>{station.name}</strong>
<Box sx={{ fontSize: '0.875rem', color: 'text.secondary', mt: 0.5 }}>
{station.address}

6
frontend/src/features/vehicles/components/VehicleImage.tsx
View File

@@ -86,7 +86,7 @@ export const VehicleImage: React.FC<VehicleImageProps> = ({
if (vehicle.imageUrl && !imgError && (blobUrl || isLoading)) {
return (
<Box sx={{ height, borderRadius, overflow: 'hidden', mb: 2, bgcolor: isLoading ? '#F2EAEA' : undefined }}>
<Box sx={{ height, borderRadius, overflow: 'hidden', mb: 2, bgcolor: isLoading ? 'grey.100' : undefined }}>
{blobUrl && (
<img
src={blobUrl}
@@ -105,7 +105,7 @@ export const VehicleImage: React.FC<VehicleImageProps> = ({
<Box sx={{
height,
borderRadius,
bgcolor: '#F2EAEA',
bgcolor: 'grey.100',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
@@ -126,7 +126,7 @@ export const VehicleImage: React.FC<VehicleImageProps> = ({
<Box
sx={{
height,
bgcolor: vehicle.color || '#F2EAEA',
bgcolor: vehicle.color || 'grey.100',
borderRadius,
display: 'flex',
alignItems: 'center',

223
frontend/src/pages/SecuritySettingsPage.tsx Normal file
View File

@@ -0,0 +1,223 @@
/**
* @ai-summary Security settings page for desktop application
*/
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useSecurityStatus, useRequestPasswordReset } from '../features/settings/hooks/useSecurity';
import {
Box,
Typography,
List,
ListItem,
ListItemIcon,
ListItemText,
Divider,
Button as MuiButton,
CircularProgress,
Alert,
Chip,
} from '@mui/material';
import ArrowBackIcon from '@mui/icons-material/ArrowBack';
import LockIcon from '@mui/icons-material/Lock';
import VerifiedUserIcon from '@mui/icons-material/VerifiedUser';
import FingerprintIcon from '@mui/icons-material/Fingerprint';
import EmailIcon from '@mui/icons-material/Email';
import { Card } from '../shared-minimal/components/Card';
export const SecuritySettingsPage: React.FC = () => {
const navigate = useNavigate();
const { data: securityStatus, isLoading, error } = useSecurityStatus();
const passwordResetMutation = useRequestPasswordReset();
const handlePasswordReset = () => {
passwordResetMutation.mutate();
};
const handleBack = () => {
navigate('/garage/settings');
};
if (isLoading) {
return (
<Box sx={{ py: 2 }}>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
<MuiButton
startIcon={<ArrowBackIcon />}
onClick={handleBack}
sx={{ mr: 2 }}
>
Back
</MuiButton>
<Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary' }}>
Security Settings
</Typography>
</Box>
<Box sx={{ display: 'flex', justifyContent: 'center', py: 8 }}>
<CircularProgress />
</Box>
</Box>
);
}
if (error) {
return (
<Box sx={{ py: 2 }}>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
<MuiButton
startIcon={<ArrowBackIcon />}
onClick={handleBack}
sx={{ mr: 2 }}
>
Back
</MuiButton>
<Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary' }}>
Security Settings
</Typography>
</Box>
<Alert severity="error" sx={{ mb: 2 }}>
Failed to load security settings. Please try again.
</Alert>
</Box>
);
}
return (
<Box sx={{ py: 2 }}>
<Box sx={{ display: 'flex', alignItems: 'center', mb: 4 }}>
<MuiButton
startIcon={<ArrowBackIcon />}
onClick={handleBack}
sx={{ mr: 2 }}
>
Back
</MuiButton>
<Typography variant="h4" sx={{ fontWeight: 700, color: 'text.primary' }}>
Security Settings
</Typography>
</Box>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 3 }}>
{/* Email Verification Status */}
<Card>
<Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
Account Verification
</Typography>
<List disablePadding>
<ListItem>
<ListItemIcon>
<EmailIcon />
</ListItemIcon>
<ListItemText
primary="Email Address"
secondary={securityStatus?.email || 'Not available'}
/>
</ListItem>
<Divider />
<ListItem>
<ListItemIcon>
<VerifiedUserIcon color={securityStatus?.emailVerified ? 'success' : 'warning'} />
</ListItemIcon>
<ListItemText
primary="Email Verification"
secondary={
securityStatus?.emailVerified
? 'Your email address has been verified'
: 'Your email address is not verified'
}
/>
<Chip
label={securityStatus?.emailVerified ? 'Verified' : 'Not Verified'}
color={securityStatus?.emailVerified ? 'success' : 'warning'}
size="small"
/>
</ListItem>
</List>
</Card>
{/* Password Management */}
<Card>
<Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
Password
</Typography>
<List disablePadding>
<ListItem>
<ListItemIcon>
<LockIcon />
</ListItemIcon>
<ListItemText
primary="Change Password"
secondary="Receive an email with a link to reset your password"
/>
<MuiButton
variant="contained"
size="small"
onClick={handlePasswordReset}
disabled={passwordResetMutation.isPending}
sx={{
backgroundColor: 'primary.main',
color: 'primary.contrastText',
'&:hover': {
backgroundColor: 'primary.dark'
}
}}
>
{passwordResetMutation.isPending ? (
<CircularProgress size={20} color="inherit" />
) : (
'Reset Password'
)}
</MuiButton>
</ListItem>
</List>
{passwordResetMutation.isSuccess && (
<Alert severity="success" sx={{ mt: 2 }}>
Password reset email sent! Please check your inbox.
</Alert>
)}
</Card>
{/* Passkeys Information */}
<Card>
<Typography variant="h6" sx={{ fontWeight: 600, mb: 3 }}>
Passkeys
</Typography>
<List disablePadding>
<ListItem>
<ListItemIcon>
<FingerprintIcon color={securityStatus?.passkeysEnabled ? 'primary' : 'disabled'} />
</ListItemIcon>
<ListItemText
primary="Passkey Authentication"
secondary={
securityStatus?.passkeysEnabled
? 'Passkeys are available for your account'
: 'Passkeys are not enabled'
}
/>
<Chip
label={securityStatus?.passkeysEnabled ? 'Available' : 'Not Available'}
color={securityStatus?.passkeysEnabled ? 'primary' : 'default'}
size="small"
variant="outlined"
/>
</ListItem>
</List>
<Alert severity="info" sx={{ mt: 2 }}>
<Typography variant="body2">
<strong>About Passkeys:</strong> Passkeys are a secure, passwordless way to sign in using your device's biometric authentication (fingerprint, face recognition) or PIN.
</Typography>
<Typography variant="body2" sx={{ mt: 1 }}>
You can register a passkey during the sign-in process. When you see the option to "Create a passkey," follow the prompts to set up passwordless authentication.
</Typography>
</Alert>
</Card>
</Box>
</Box>
);
};

107
frontend/src/pages/SettingsPage.tsx
View File

@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom';
import { useUnits } from '../core/units/UnitsContext';
import { useAdminAccess } from '../core/auth/useAdminAccess';
import { useProfile, useUpdateProfile } from '../features/settings/hooks/useProfile';
import { useExportUserData } from '../features/settings/hooks/useExportUserData';
import { useTheme } from '../shared-minimal/theme/ThemeContext';
import { DeleteAccountDialog } from '../features/settings/components/DeleteAccountDialog';
import { PendingDeletionBanner } from '../features/settings/components/PendingDeletionBanner';
@@ -56,6 +57,7 @@ export const SettingsPage: React.FC = () => {
const [editedDisplayName, setEditedDisplayName] = useState('');
const [editedNotificationEmail, setEditedNotificationEmail] = useState('');
const [deleteDialogOpen, setDeleteDialogOpen] = useState(false);
const exportMutation = useExportUserData();
// Initialize edit form when profile loads or edit mode starts
React.useEffect(() => {
@@ -120,10 +122,17 @@ export const SettingsPage: React.FC = () => {
</Typography>
{!isEditingProfile && !profileLoading && (
<MuiButton
variant="outlined"
variant="contained"
size="small"
startIcon={<EditIcon />}
onClick={handleEditProfile}
sx={{
backgroundColor: 'primary.main',
color: 'primary.contrastText',
'&:hover': {
backgroundColor: 'primary.dark'
}
}}
>
Edit
</MuiButton>
@@ -246,7 +255,18 @@ export const SettingsPage: React.FC = () => {
secondary="Password, two-factor authentication"
/>
<ListItemSecondaryAction>
<MuiButton variant="outlined" size="small">
<MuiButton
variant="contained"
size="small"
onClick={() => navigate('/garage/settings/security')}
sx={{
backgroundColor: 'primary.main',
color: 'primary.contrastText',
'&:hover': {
backgroundColor: 'primary.dark'
}
}}
>
Manage
</MuiButton>
</ListItemSecondaryAction>
@@ -366,21 +386,20 @@ export const SettingsPage: React.FC = () => {
secondary="Download your vehicle and fuel log data"
/>
<ListItemSecondaryAction>
<MuiButton variant="outlined" size="small">
Export
</MuiButton>
</ListItemSecondaryAction>
</ListItem>
<Divider />
<ListItem>
<ListItemText
primary="Clear Cache"
secondary="Remove cached data to free up space"
sx={{ pl: 7 }}
/>
<ListItemSecondaryAction>
<MuiButton variant="outlined" size="small" color="warning">
Clear
<MuiButton
variant="contained"
size="small"
disabled={exportMutation.isPending}
onClick={() => exportMutation.mutate()}
sx={{
backgroundColor: 'primary.main',
color: 'primary.contrastText',
'&:hover': {
backgroundColor: 'primary.dark'
}
}}
>
{exportMutation.isPending ? 'Exporting...' : 'Export'}
</MuiButton>
</ListItemSecondaryAction>
</ListItem>
@@ -405,9 +424,16 @@ export const SettingsPage: React.FC = () => {
/>
<ListItemSecondaryAction>
<MuiButton
variant="outlined"
variant="contained"
size="small"
onClick={() => navigate('/garage/settings/admin/users')}
sx={{
backgroundColor: 'primary.main',
color: 'primary.contrastText',
'&:hover': {
backgroundColor: 'primary.dark'
}
}}
>
Manage
</MuiButton>
@@ -422,9 +448,16 @@ export const SettingsPage: React.FC = () => {
/>
<ListItemSecondaryAction>
<MuiButton
variant="outlined"
variant="contained"
size="small"
onClick={() => navigate('/garage/settings/admin/catalog')}
sx={{
backgroundColor: 'primary.main',
color: 'primary.contrastText',
'&:hover': {
backgroundColor: 'primary.dark'
}
}}
>
Manage
</MuiButton>
@@ -439,9 +472,16 @@ export const SettingsPage: React.FC = () => {
/>
<ListItemSecondaryAction>
<MuiButton
variant="outlined"
variant="contained"
size="small"
onClick={() => navigate('/garage/settings/admin/email-templates')}
sx={{
backgroundColor: 'primary.main',
color: 'primary.contrastText',
'&:hover': {
backgroundColor: 'primary.dark'
}
}}
>
Manage
</MuiButton>
@@ -456,9 +496,16 @@ export const SettingsPage: React.FC = () => {
/>
<ListItemSecondaryAction>
<MuiButton
variant="outlined"
variant="contained"
size="small"
onClick={() => navigate('/garage/settings/admin/backup')}
sx={{
backgroundColor: 'primary.main',
color: 'primary.contrastText',
'&:hover': {
backgroundColor: 'primary.dark'
}
}}
>
Manage
</MuiButton>
@@ -470,16 +517,22 @@ export const SettingsPage: React.FC = () => {
{/* Account Actions */}
<Card>
<Typography variant="h6" sx={{ fontWeight: 600, mb: 3, color: 'error.main' }}>
<Typography variant="h6" sx={{ fontWeight: 600, mb: 3, color: 'primary.main' }}>
Account Actions
</Typography>
<Box sx={{ display: 'flex', gap: 2 }}>
<MuiButton
variant="contained"
color="error"
<MuiButton
variant="contained"
onClick={handleLogout}
sx={{ borderRadius: '999px' }}
sx={{
borderRadius: '999px',
backgroundColor: 'grey.600',
color: 'common.white',
'&:hover': {
backgroundColor: 'grey.700'
}
}}
>
Sign Out
</MuiButton>

6
frontend/src/shared-minimal/components/Button.tsx
View File

@@ -23,9 +23,9 @@ export const Button: React.FC<ButtonProps> = ({
const baseStyles = 'font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';
const variants = {
primary: 'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500',
secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500',
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
primary: 'bg-primary-500 text-white hover:bg-primary-600 focus:ring-primary-500 dark:bg-primary-600 dark:hover:bg-primary-700',
secondary: 'bg-gray-200 text-gray-900 hover:bg-gray-300 focus:ring-gray-500 dark:bg-gray-700 dark:text-gray-100 dark:hover:bg-gray-600',
danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500 dark:bg-red-700 dark:hover:bg-red-800',
};
const sizes = {