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

fix: Standardize card/list action buttons and hover states (#51) #52

Merged
egullickson merged 3 commits from issue-51-standardize-action-buttons into main 2026-01-18 18:42:53 +00:00
Conversation 0 Commits 3 Files Changed 4 +203 -85
4 changed files with 203 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 5e045526d6 - Show all commits

259
frontend/src/features/documents/pages/DocumentsPage.tsx
View File

@@ -1,8 +1,18 @@
import React, { useMemo } from 'react';
import { useAuth0 } from '@auth0/auth0-react';
import { useDocumentsList, useDeleteDocument } from '../hooks/useDocuments';
import { Card } from '../../../shared-minimal/components/Card';
import { Button } from '../../../shared-minimal/components/Button';
import {
Card,
CardContent,
Box,
Typography,
IconButton,
Button,
useTheme,
useMediaQuery,
} from '@mui/material';
import VisibilityIcon from '@mui/icons-material/Visibility';
import DeleteIcon from '@mui/icons-material/Delete';
import { useNavigate } from 'react-router-dom';
import { AddDocumentDialog } from '../components/AddDocumentDialog';
import { ExpirationBadge } from '../components/ExpirationBadge';
@@ -17,41 +27,43 @@ export const DocumentsPage: React.FC = () => {
const navigate = useNavigate();
const removeDoc = useDeleteDocument();
const [isAddOpen, setIsAddOpen] = React.useState(false);
const theme = useTheme();
const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
const vehiclesMap = useMemo(() => new Map(vehicles?.map(v => [v.id, v]) || []), [vehicles]);
// Show loading while auth is initializing
if (authLoading) {
return (
<div className="container mx-auto p-4 space-y-4">
<h1 className="text-2xl font-semibold">Documents</h1>
<div className="flex items-center justify-center py-12">
<div className="text-slate-500">Checking authentication...</div>
</div>
</div>
<Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
<Typography variant="h5" fontWeight={600} sx={{ mb: 2 }}>Documents</Typography>
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
<Typography color="text.secondary">Checking authentication...</Typography>
</Box>
</Box>
);
}
// Show login prompt when not authenticated
if (!isAuthenticated) {
return (
<div className="container mx-auto p-4 space-y-4">
<h1 className="text-2xl font-semibold">Documents</h1>
<Card>
<div className="p-8 text-center">
<div className="mb-4">
<svg className="mx-auto w-16 h-16 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
<Typography variant="h5" fontWeight={600} sx={{ mb: 2 }}>Documents</Typography>
<Card variant="outlined">
<CardContent sx={{ p: 4, textAlign: 'center' }}>
<Box sx={{ mb: 2 }}>
<svg style={{ margin: '0 auto', width: 64, height: 64, color: '#94a3b8' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-slate-800 mb-2">Authentication Required</h3>
<p className="text-slate-600 mb-6">Please log in to view your documents</p>
<Button onClick={() => loginWithRedirect()}>
</Box>
<Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Authentication Required</Typography>
<Typography color="text.secondary" sx={{ mb: 3 }}>Please log in to view your documents</Typography>
<Button variant="contained" onClick={() => loginWithRedirect()}>
Login to Continue
</Button>
</div>
</CardContent>
</Card>
</div>
</Box>
);
}
@@ -59,115 +71,198 @@ export const DocumentsPage: React.FC = () => {
const isAuthError = error && (error as any).response?.status === 401;
if (isAuthError) {
return (
<div className="container mx-auto p-4 space-y-4">
<h1 className="text-2xl font-semibold">Documents</h1>
<Card>
<div className="p-8 text-center">
<div className="mb-4">
<svg className="mx-auto w-16 h-16 text-orange-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
<Typography variant="h5" fontWeight={600} sx={{ mb: 2 }}>Documents</Typography>
<Card variant="outlined">
<CardContent sx={{ p: 4, textAlign: 'center' }}>
<Box sx={{ mb: 2 }}>
<svg style={{ margin: '0 auto', width: 64, height: 64, color: '#fb923c' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-slate-800 mb-2">Session Expired</h3>
<p className="text-slate-600 mb-6">Your session has expired. Please log in again to continue.</p>
<Button onClick={() => loginWithRedirect()}>
</Box>
<Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Session Expired</Typography>
<Typography color="text.secondary" sx={{ mb: 3 }}>Your session has expired. Please log in again to continue.</Typography>
<Button variant="contained" onClick={() => loginWithRedirect()}>
Login Again
</Button>
</div>
</CardContent>
</Card>
</div>
</Box>
);
}
return (
<div className="container mx-auto p-4 space-y-4">
<div className="flex items-center justify-between gap-2 flex-wrap">
<h1 className="text-2xl font-semibold">Documents</h1>
<div className="flex gap-2">
<Button onClick={() => setIsAddOpen(true)} className="min-h-[44px]">Add Document</Button>
</div>
</div>
<Box sx={{ maxWidth: 'lg', mx: 'auto', p: 2 }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', gap: 2, flexWrap: 'wrap', mb: 2 }}>
<Typography variant="h5" fontWeight={600}>Documents</Typography>
<Button variant="contained" onClick={() => setIsAddOpen(true)} sx={{ minHeight: 44 }}>
Add Document
</Button>
</Box>
<AddDocumentDialog open={isAddOpen} onClose={() => setIsAddOpen(false)} />
{isLoading && (
<div className="flex items-center justify-center py-12">
<div className="text-slate-500">Loading documents...</div>
</div>
<Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
<Typography color="text.secondary">Loading documents...</Typography>
</Box>
)}
{error && !isAuthError && (
<Card>
<div className="p-8 text-center">
<div className="mb-4">
<svg className="mx-auto w-16 h-16 text-red-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<Card variant="outlined">
<CardContent sx={{ p: 4, textAlign: 'center' }}>
<Box sx={{ mb: 2 }}>
<svg style={{ margin: '0 auto', width: 64, height: 64, color: '#f87171' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-slate-800 mb-2">Error Loading Documents</h3>
<p className="text-slate-600 mb-6">Failed to load documents. Please try again.</p>
<Button onClick={() => window.location.reload()}>
</Box>
<Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>Error Loading Documents</Typography>
<Typography color="text.secondary" sx={{ mb: 3 }}>Failed to load documents. Please try again.</Typography>
<Button variant="contained" onClick={() => window.location.reload()}>
Retry
</Button>
</div>
</CardContent>
</Card>
)}
{!isLoading && !error && data && data.length === 0 && (
<Card>
<div className="p-8 text-center">
<div className="mb-4">
<svg className="mx-auto w-16 h-16 text-slate-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<Card variant="outlined">
<CardContent sx={{ p: 4, textAlign: 'center' }}>
<Box sx={{ mb: 2 }}>
<svg style={{ margin: '0 auto', width: 64, height: 64, color: '#94a3b8' }} fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
</div>
<h3 className="text-lg font-semibold text-slate-800 mb-2">No Documents Yet</h3>
<p className="text-slate-600 mb-6">You haven't added any documents yet. Documents will appear here once you create them.</p>
<Button onClick={() => navigate('/garage/vehicles')}>
</Box>
<Typography variant="h6" fontWeight={600} sx={{ mb: 1 }}>No Documents Yet</Typography>
<Typography color="text.secondary" sx={{ mb: 3 }}>You haven't added any documents yet. Documents will appear here once you create them.</Typography>
<Button variant="contained" onClick={() => navigate('/garage/vehicles')}>
Go to Vehicles
</Button>
</div>
</CardContent>
</Card>
)}
{!isLoading && !error && data && data.length > 0 && (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
<Box
sx={{
display: 'grid',
gap: 2,
gridTemplateColumns: {
xs: '1fr',
md: 'repeat(2, 1fr)',
lg: 'repeat(3, 1fr)',
},
}}
>
{data.map((doc) => {
const vehicle = vehiclesMap.get(doc.vehicleId);
const vehicleLabel = getVehicleLabel(vehicle);
return (
<Card key={doc.id}>
<div className="p-4 space-y-2">
<div className="flex items-center gap-2 flex-wrap">
<span className="font-medium">{doc.title}</span>
<Card
key={doc.id}
variant="outlined"
sx={{
height: '100%',
display: 'flex',
flexDirection: 'column',
'&:hover': {
boxShadow: 3,
},
transition: 'box-shadow 0.2s ease-in-out',
}}
>
<CardContent sx={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexWrap: 'wrap' }}>
<Typography variant="subtitle1" fontWeight={500}>{doc.title}</Typography>
<ExpirationBadge expirationDate={doc.expirationDate} />
</div>
<div className="text-sm text-slate-500">Type: {doc.documentType}</div>
</Box>
<Typography variant="body2" color="text.secondary">Type: {doc.documentType}</Typography>
<DocumentCardMetadata doc={doc} variant="card" />
<div className="text-sm">
<span className="text-slate-500">Vehicle: </span>
<button
<Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
<Typography variant="body2" color="text.secondary">Vehicle:</Typography>
<Typography
component="button"
variant="body2"
onClick={() => navigate(`/garage/vehicles/${doc.vehicleId}`)}
className="text-blue-600 hover:text-blue-800 underline min-h-[44px] inline-flex items-center"
sx={{
color: 'primary.main',
textDecoration: 'underline',
cursor: 'pointer',
background: 'none',
border: 'none',
p: 0,
minHeight: 44,
display: 'inline-flex',
alignItems: 'center',
'&:hover': { color: 'primary.dark' },
}}
>
{vehicleLabel}
</button>
</div>
</Typography>
</Box>
{doc.sharedVehicleIds.length > 0 && (
<div className="text-xs text-slate-500">
<Typography variant="caption" color="text.secondary">
Shared with {doc.sharedVehicleIds.length} other vehicle{doc.sharedVehicleIds.length > 1 ? 's' : ''}
</div>
</Typography>
)}
<div className="flex gap-2 pt-2">
<Button onClick={() => navigate(`/garage/documents/${doc.id}`)}>View Details</Button>
<Button variant="danger" onClick={() => removeDoc.mutate(doc.id)}>Delete</Button>
</div>
</div>
</CardContent>
<Box
sx={{
display: 'flex',
justifyContent: 'flex-end',
gap: isMobile ? 1 : 0.5,
p: 2,
pt: 0,
}}
>
<IconButton
size={isMobile ? 'medium' : 'small'}
onClick={() => navigate(`/garage/documents/${doc.id}`)}
sx={{
color: 'text.secondary',
minWidth: isMobile ? 48 : 'auto',
minHeight: isMobile ? 48 : 'auto',
'&:hover': {
backgroundColor: 'primary.main',
color: 'white',
},
...(isMobile && {
border: '1px solid',
borderColor: 'divider',
borderRadius: 2,
}),
}}
title="View Details"
>
<VisibilityIcon fontSize={isMobile ? 'medium' : 'small'} />
</IconButton>
<IconButton
size={isMobile ? 'medium' : 'small'}
onClick={() => removeDoc.mutate(doc.id)}
sx={{
color: 'error.main',
minWidth: isMobile ? 48 : 'auto',
minHeight: isMobile ? 48 : 'auto',
'&:hover': {
backgroundColor: 'error.main',
color: 'white',
},
...(isMobile && {
border: '1px solid',
borderColor: 'error.main',
borderRadius: 2,
}),
}}
title="Delete"
>
<DeleteIcon fontSize={isMobile ? 'medium' : 'small'} />
</IconButton>
</Box>
</Card>
);
})}
</div>
</Box>
)}
</div>
</Box>
);
};

7
frontend/src/features/fuel-logs/components/FuelLogsList.tsx
View File

@@ -162,7 +162,12 @@ export const FuelLogsList: React.FC<FuelLogsListProps> = ({ logs, onEdit, onDele
flexDirection: isMobile ? 'column' : 'row',
alignItems: isMobile ? 'stretch' : 'center',
gap: isMobile ? 1 : 0,
py: isMobile ? 2 : 1
py: isMobile ? 2 : 1,
'&:hover': {
backgroundColor: 'action.hover',
},
transition: 'background-color 0.2s ease-in-out',
cursor: 'default',
}}
>
<Box sx={{

11
frontend/src/features/maintenance/components/MaintenanceRecordsList.tsx
View File

@@ -86,7 +86,16 @@ export const MaintenanceRecordsList: React.FC<MaintenanceRecordsListProps> = ({
const subtypeCount = record.subtypeCount || record.subtypes?.length || 0;
return (
<Card key={record.id} variant="outlined">
<Card
key={record.id}
variant="outlined"
sx={{
'&:hover': {
boxShadow: 3,
},
transition: 'box-shadow 0.2s ease-in-out',
}}
>
<CardContent>
<Box
sx={{

11
frontend/src/features/maintenance/components/MaintenanceSchedulesList.tsx
View File

@@ -170,7 +170,16 @@ export const MaintenanceSchedulesList: React.FC<MaintenanceSchedulesListProps> =
const reminderDisplay = getReminderDisplay(schedule);
return (
<Card key={schedule.id} variant="outlined">
<Card
key={schedule.id}
variant="outlined"
sx={{
'&:hover': {
boxShadow: 3,
},
transition: 'box-shadow 0.2s ease-in-out',
}}
>
<CardContent>
<Box
sx={{