frontend/src/features/documents/pages/DocumentsPage.tsx

@@ -12,10 +12,13 @@ import {
   useMediaQuery,
 } from '@mui/material';
 import VisibilityIcon from '@mui/icons-material/Visibility';
+import EditIcon from '@mui/icons-material/Edit';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useNavigate } from 'react-router-dom';
 import { AddDocumentDialog } from '../components/AddDocumentDialog';
+import { EditDocumentDialog } from '../components/EditDocumentDialog';
 import { ExpirationBadge } from '../components/ExpirationBadge';
+import type { DocumentRecord } from '../types/documents.types';
 import { DocumentCardMetadata } from '../components/DocumentCardMetadata';
 import { useVehicles } from '../../vehicles/hooks/useVehicles';
 import { getVehicleLabel } from '../utils/vehicleLabel';
@@ -27,6 +30,7 @@ export const DocumentsPage: React.FC = () => {
   const navigate = useNavigate();
   const removeDoc = useDeleteDocument();
   const [isAddOpen, setIsAddOpen] = React.useState(false);
+  const [editingDoc, setEditingDoc] = React.useState<DocumentRecord | null>(null);
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
 
@@ -100,6 +104,13 @@ export const DocumentsPage: React.FC = () => {
         </Button>
       </Box>
       <AddDocumentDialog open={isAddOpen} onClose={() => setIsAddOpen(false)} />
+      {editingDoc && (
+        <EditDocumentDialog
+          open={!!editingDoc}
+          onClose={() => setEditingDoc(null)}
+          document={editingDoc}
+        />
+      )}
 
       {isLoading && (
         <Box sx={{ display: 'flex', justifyContent: 'center', py: 6 }}>
@@ -235,6 +246,27 @@ export const DocumentsPage: React.FC = () => {
                   >
                     <VisibilityIcon fontSize={isMobile ? 'medium' : 'small'} />
                   </IconButton>
+                  <IconButton
+                    size={isMobile ? 'medium' : 'small'}
+                    onClick={() => setEditingDoc(doc)}
+                    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="Edit"
+                  >
+                    <EditIcon fontSize={isMobile ? 'medium' : 'small'} />
+                  </IconButton>
                   <IconButton
                     size={isMobile ? 'medium' : 'small'}
                     onClick={() => removeDoc.mutate(doc.id)}