From 86945378a31f56c3745b8608ff3d4f0a096cedc6 Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Sun, 23 Aug 2026 14:01:36 +0530
Subject: [PATCH] feat(fetch-requests): delete fetch requests from detail page
 and list rows

- Detail page: red Delete button beside Retry (disabled while processing or
  in-flight), confirm dialog, toast feedback, navigates back to the list
- List rows: per-card delete IconButton with stopPropagation, disabled while
  processing; reloads after success
- Backend cascades linked expenses + ambiguities and evicts the expenses
  response cache on delete
---
 src/FetchRequest/FetchRequestCreate.tsx | 46 +++++++++++++++++++++++--
 src/FetchRequest/FetchRequestDetail.tsx | 39 ++++++++++++++++++++-
 2 files changed, 82 insertions(+), 3 deletions(-)

diff --git a/src/FetchRequest/FetchRequestCreate.tsx b/src/FetchRequest/FetchRequestCreate.tsx
index ababafa..13636d7 100644
--- a/src/FetchRequest/FetchRequestCreate.tsx
+++ b/src/FetchRequest/FetchRequestCreate.tsx
@@ -1,22 +1,32 @@
 import React, { useEffect, useMemo, useState } from "react";
 import {
   Box, Container, Typography, Paper, Button, Alert,
-  CircularProgress,
+  CircularProgress, IconButton, Tooltip,
 } from "@mui/material";
 import { useNavigate } from "react-router-dom";
 import ReceiptLongIcon from "@mui/icons-material/ReceiptLong";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { useAppContext, useResource, ListCellRenderer, FormFieldRenderer, getApi, applyDisplayFormat } from "../../react-openapi";
 import type { FieldConfig } from "../../react-openapi";
 import { PageHeader } from "../ui/PageHeader";
 import { EmptyState } from "../ui/EmptyState";
+import { formatApiError } from "../features/fetch-requests";
+import { useToast } from "../ui/Toast";
 
 const CREATE_FIELDS = ["account", "bank", "pipeline", "start_date", "end_date", "source"];
 
 function FetchRequestList() {
   const navigate = useNavigate();
-  const { list, resource } = useResource("fetch-requests");
+  const { list, remove, resource } = useResource("fetch-requests");
   const { resources: allResources } = useAppContext();
   const [rows, setRows] = useState<any[] | null>(null);
+  const [deletingId, setDeletingId] = useState<string | null>(null);
+  const { showToast } = useToast();
+
+  const reload = () => {
+    if (!resource) return;
+    list({ limit: 20 }).then((res) => setRows(res.items ?? []));
+  };
 
   const columns = useMemo(() => {
     if (!resource) return [];
@@ -30,6 +40,26 @@ function FetchRequestList() {
     list({ limit: 20 }).then((res) => setRows(res.items ?? []));
   }, [resource?.name]);
 
+  const handleDelete = async (e: React.MouseEvent, id: string) => {
+    e.stopPropagation();
+    if (
+      !window.confirm(
+        "Delete this fetch request along with all its expenses and ambiguities? This cannot be undone.",
+      )
+    )
+      return;
+    setDeletingId(id);
+    try {
+      await remove(id);
+      showToast("Fetch request deleted");
+      reload();
+    } catch (err: any) {
+      showToast(formatApiError(err), "error");
+    } finally {
+      setDeletingId(null);
+    }
+  };
+
   if (!rows) {
     return (
       <Box sx={{ display: "flex", justifyContent: "center", py: 6 }}>
@@ -82,6 +112,18 @@ function FetchRequestList() {
                   />
                 </Box>
               ))}
+              <Box sx={{ ml: "auto", flexShrink: 0 }}>
+                <Tooltip title="Delete fetch request">
+                  <IconButton
+                    size="small"
+                    color="error"
+                    disabled={deletingId === row.id || row.status === "processing"}
+                    onClick={(e) => handleDelete(e, row.id)}
+                  >
+                    <DeleteOutlineIcon fontSize="small" />
+                  </IconButton>
+                </Tooltip>
+              </Box>
             </Box>
           </Paper>
         );
diff --git a/src/FetchRequest/FetchRequestDetail.tsx b/src/FetchRequest/FetchRequestDetail.tsx
index b05d22d..e56b6fc 100644
--- a/src/FetchRequest/FetchRequestDetail.tsx
+++ b/src/FetchRequest/FetchRequestDetail.tsx
@@ -10,6 +10,7 @@ import {
   CircularProgress,
   Alert,
   Divider,
+  Tooltip,
 } from "@mui/material";
 import ReplayIcon from "@mui/icons-material/Replay";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
@@ -18,6 +19,7 @@ import WarningAmberIcon from "@mui/icons-material/WarningAmber";
 import PlayArrowIcon from "@mui/icons-material/PlayArrow";
 import RemoveCircleOutlineIcon from "@mui/icons-material/RemoveCircleOutline";
 import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
 import { useResource, useItemSse, useAppContext, DetailFieldRenderer, applyDisplayFormat } from "../../react-openapi";
 import { useQuery } from "@tanstack/react-query";
 import { RETRY_MAX, formatApiError } from "../features/fetch-requests";
@@ -85,11 +87,12 @@ function Section({ title, children, action }: { title: string; children: React.R
 export default function FetchRequestDetail() {
   const { id } = useParams<{ id: string }>();
   const navigate = useNavigate();
-  const { get, patch, resource } = useResource("fetch-requests");
+  const { get, patch, remove, resource } = useResource("fetch-requests");
   const { resources: allResources } = useAppContext();
   const [stepStats, setStepStats] = useState<Record<string, number>>({});
   const [liveParsedCount, setLiveParsedCount] = useState<number | undefined>(undefined);
   const [retrying, setRetrying] = useState(false);
+  const [deleting, setDeleting] = useState(false);
   const { showToast } = useToast();
   const feedRef = useRef<HTMLDivElement>(null);
 
@@ -174,6 +177,26 @@ export default function FetchRequestDetail() {
     }
   };
 
+  const handleDelete = async () => {
+    if (!id || !remove || deleting) return;
+    if (
+      !window.confirm(
+        "Delete this fetch request along with all its expenses and ambiguities? This cannot be undone.",
+      )
+    )
+      return;
+    setDeleting(true);
+    try {
+      await remove(id);
+      showToast("Fetch request deleted");
+      navigate("/fetch-requests");
+    } catch (err: any) {
+      showToast(formatApiError(err), "error");
+    } finally {
+      setDeleting(false);
+    }
+  };
+
   const req = fetchRequest as any;
   const retryCount = req?.retry_count ?? 0;
   const isRetryExhausted = retryCount >= RETRY_MAX;
@@ -286,6 +309,20 @@ export default function FetchRequestDetail() {
               Retry
             </Button>
           )}
+          <Tooltip title={status === "processing" ? "Cannot delete while processing" : "Delete fetch request"}>
+            <span>
+              <Button
+                variant="outlined"
+                size="small"
+                color="error"
+                startIcon={<DeleteOutlineIcon />}
+                onClick={handleDelete}
+                disabled={deleting || status === "processing"}
+              >
+                Delete
+              </Button>
+            </span>
+          </Tooltip>
         </Box>
       </Section>