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

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

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>