From 8b23e8a1c15897d2f633b47893a286605ce2257e Mon Sep 17 00:00:00 2001
From: perf3ct <jonfuller2012@gmail.com>
Date: Tue, 15 Jul 2025 15:51:30 +0000
Subject: [PATCH] fix(client): actually have the delete functionality work

---
 frontend/src/pages/DocumentDetailsPage.tsx | 95 ++++++++++++++++++++++
 frontend/src/services/api.ts               |  4 +-
 2 files changed, 97 insertions(+), 2 deletions(-)

diff --git a/frontend/src/pages/DocumentDetailsPage.tsx b/frontend/src/pages/DocumentDetailsPage.tsx
index 28fb5b8..68ab680 100644
--- a/frontend/src/pages/DocumentDetailsPage.tsx
+++ b/frontend/src/pages/DocumentDetailsPage.tsx
@@ -50,6 +50,7 @@ import {
   MoreVert as MoreIcon,
   OpenInFull as ExpandIcon,
   Close as CloseIcon,
+  Delete as DeleteIcon,
 } from '@mui/icons-material';
 import { documentService, OcrResponse, type Document } from '../services/api';
 import DocumentViewer from '../components/DocumentViewer';
@@ -89,6 +90,10 @@ const DocumentDetailsPage: React.FC = () => {
   // Retry functionality state
   const [retryingOcr, setRetryingOcr] = useState<boolean>(false);
   const [retryHistoryModalOpen, setRetryHistoryModalOpen] = useState<boolean>(false);
+  
+  // Delete functionality state
+  const [deleting, setDeleting] = useState<boolean>(false);
+  const [deleteConfirmOpen, setDeleteConfirmOpen] = useState<boolean>(false);
 
   // Retry handlers
   const handleRetryOcr = async () => {
@@ -117,6 +122,29 @@ const DocumentDetailsPage: React.FC = () => {
     setRetryHistoryModalOpen(true);
   };
 
+  // Delete handlers
+  const handleDeleteDocument = async () => {
+    if (!document) return;
+    
+    setDeleting(true);
+    try {
+      await documentService.delete(document.id);
+      // Navigate back to documents page after successful deletion
+      navigate('/documents');
+    } catch (error) {
+      console.error('Failed to delete document:', error);
+      // Show error message to user
+      alert('Failed to delete document. Please try again.');
+    } finally {
+      setDeleting(false);
+      setDeleteConfirmOpen(false);
+    }
+  };
+
+  const handleDeleteClick = () => {
+    setDeleteConfirmOpen(true);
+  };
+
   useEffect(() => {
     if (id) {
       fetchDocumentDetails();
@@ -432,6 +460,27 @@ const DocumentDetailsPage: React.FC = () => {
                     </IconButton>
                   </Tooltip>
                 )}
+                
+                <Tooltip title="Delete Document">
+                  <IconButton
+                    onClick={handleDeleteClick}
+                    disabled={deleting}
+                    sx={{
+                      backgroundColor: theme.palette.action.hover,
+                      backdropFilter: 'blur(10px)',
+                      color: theme.palette.error.main,
+                      '&:hover': {
+                        transform: 'scale(1.05)',
+                        backgroundColor: theme.palette.error.light,
+                      },
+                      '&:disabled': {
+                        opacity: 0.6,
+                      },
+                    }}
+                  >
+                    {deleting ? <CircularProgress size={20} /> : <DeleteIcon />}
+                  </IconButton>
+                </Tooltip>
               </Box>
             </Box>
             
@@ -1394,6 +1443,52 @@ const DocumentDetailsPage: React.FC = () => {
           documentName={document.original_filename}
         />
       )}
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog
+        open={deleteConfirmOpen}
+        onClose={() => setDeleteConfirmOpen(false)}
+        maxWidth="sm"
+        fullWidth
+      >
+        <DialogTitle>
+          <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+            <DeleteIcon color="error" />
+            <Typography variant="h6" sx={{ fontWeight: 600 }}>
+              Delete Document
+            </Typography>
+          </Box>
+        </DialogTitle>
+        <DialogContent>
+          <Alert severity="warning" sx={{ mb: 2 }}>
+            This action cannot be undone.
+          </Alert>
+          <Typography variant="body1">
+            Are you sure you want to delete <strong>{document?.original_filename}</strong>?
+          </Typography>
+          <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}>
+            This will permanently remove the document and all associated data including OCR text, labels, and processing history.
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button 
+            onClick={() => setDeleteConfirmOpen(false)}
+            disabled={deleting}
+          >
+            Cancel
+          </Button>
+          <Button 
+            variant="contained" 
+            color="error"
+            onClick={handleDeleteDocument}
+            disabled={deleting}
+            startIcon={deleting ? <CircularProgress size={16} /> : <DeleteIcon />}
+            sx={{ borderRadius: 2 }}
+          >
+            {deleting ? 'Deleting...' : 'Delete Document'}
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   );
 };
diff --git a/frontend/src/services/api.ts b/frontend/src/services/api.ts
index 46361fe..a64546e 100644
--- a/frontend/src/services/api.ts
+++ b/frontend/src/services/api.ts
@@ -377,8 +377,8 @@ export const documentService = {
   },
 
   bulkDelete: (documentIds: string[]) => {
-    return api.delete('/documents', {
-      data: { document_ids: documentIds }
+    return api.post('/documents/bulk/delete', {
+      document_ids: documentIds
     })
   },