620 lines
24 KiB
TypeScript
620 lines
24 KiB
TypeScript
import * as React from "react";
|
|
import {
|
|
Box,
|
|
Container,
|
|
Paper,
|
|
Typography,
|
|
Button,
|
|
ToggleButtonGroup,
|
|
ToggleButton,
|
|
Chip,
|
|
IconButton,
|
|
CircularProgress,
|
|
Alert,
|
|
Snackbar,
|
|
Dialog,
|
|
DialogTitle,
|
|
DialogContent,
|
|
DialogContentText,
|
|
DialogActions,
|
|
Tooltip,
|
|
TextField,
|
|
Select,
|
|
MenuItem,
|
|
InputLabel,
|
|
FormControl,
|
|
OutlinedInput,
|
|
Autocomplete,
|
|
} from "@mui/material";
|
|
import DeleteIcon from "@mui/icons-material/Delete";
|
|
import CloudUploadIcon from "@mui/icons-material/CloudUpload";
|
|
import RefreshIcon from "@mui/icons-material/Refresh";
|
|
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
|
|
import ReplayIcon from "@mui/icons-material/Replay";
|
|
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
|
|
import ErrorIcon from "@mui/icons-material/Error";
|
|
import ScheduleIcon from "@mui/icons-material/Schedule";
|
|
import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
|
|
import WarningAmberIcon from "@mui/icons-material/WarningAmber";
|
|
import {
|
|
useUploadFile,
|
|
} from "./features/fetch-requests";
|
|
import type {
|
|
FetchRequest,
|
|
FetchRequestStatus,
|
|
FileSource,
|
|
EmailSource,
|
|
} from "./features/fetch-requests";
|
|
import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { useResource, FormFieldRenderer } from "../react-openapi";
|
|
import type { FieldConfig } from "../react-openapi";
|
|
import { useMutation, useQuery } from "@tanstack/react-query";
|
|
|
|
const statusColors: Record<FetchRequestStatus, "default" | "primary" | "warning" | "info" | "success" | "error"> = {
|
|
pending: "default",
|
|
processing: "info",
|
|
paused: "warning",
|
|
raw_expenses_done: "primary",
|
|
enriched_done: "warning",
|
|
completed: "success",
|
|
failed: "error",
|
|
};
|
|
|
|
const statusIcons: Record<FetchRequestStatus, React.ReactNode> = {
|
|
pending: <ScheduleIcon sx={{ fontSize: 16 }} />,
|
|
processing: <CircularProgress size={14} sx={{ mr: 0.5 }} />,
|
|
paused: <WarningAmberIcon sx={{ fontSize: 16, color: "warning.main" }} />,
|
|
raw_expenses_done: <HourglassEmptyIcon sx={{ fontSize: 16 }} />,
|
|
enriched_done: <HourglassEmptyIcon sx={{ fontSize: 16 }} />,
|
|
completed: <CheckCircleIcon sx={{ fontSize: 16, color: "success.main" }} />,
|
|
failed: <ErrorIcon sx={{ fontSize: 16, color: "error.main" }} />,
|
|
};
|
|
|
|
const STATUS_OPTIONS: FetchRequestStatus[] = [
|
|
"pending",
|
|
"processing",
|
|
"paused",
|
|
"raw_expenses_done",
|
|
"enriched_done",
|
|
"completed",
|
|
"failed",
|
|
];
|
|
|
|
function formatDate(iso: string) {
|
|
const d = new Date(iso);
|
|
return d.toLocaleString();
|
|
}
|
|
|
|
function formatDateRange(start?: string, end?: string) {
|
|
if (!start && !end) return "\u2014";
|
|
const s = start ? new Date(start).toLocaleDateString() : "?";
|
|
const e = end ? new Date(end).toLocaleDateString() : "?";
|
|
return `${s} \u2192 ${e}`;
|
|
}
|
|
|
|
function shortId(fp: string) {
|
|
return fp.length > 8 ? fp.slice(0, 8) + "\u2026" : fp;
|
|
}
|
|
|
|
export default function FetchRequests() {
|
|
const navigate = useNavigate();
|
|
|
|
const [sourceType, setSourceType] = React.useState<"file" | "email">("file");
|
|
const [accountName, setAccountName] = React.useState("");
|
|
const [payorUsername, setPayorUsername] = React.useState("aetos");
|
|
const [format, setFormat] = React.useState("");
|
|
const [file, setFile] = React.useState<File | null>(null);
|
|
const [uploadedPath, setUploadedPath] = React.useState<string | null>(null);
|
|
const [fromEmail, setFromEmail] = React.useState("");
|
|
const [subject, setSubject] = React.useState("");
|
|
const [rawTerms, setRawTerms] = React.useState("");
|
|
const [startDate, setStartDate] = React.useState("");
|
|
const [endDate, setEndDate] = React.useState("");
|
|
const [snackbar, setSnackbar] = React.useState<{ message: string; severity: "success" | "error" } | null>(null);
|
|
const [deleteTarget, setDeleteTarget] = React.useState<FetchRequest | null>(null);
|
|
|
|
const [statusFilter, setStatusFilter] = React.useState<string[]>([]);
|
|
const [accountFilter, setAccountFilter] = React.useState("");
|
|
const [sourceFilter, setSourceFilter] = React.useState<"all" | "file" | "email">("all");
|
|
|
|
const fr = useResource("fetch-requests");
|
|
const { list, create, update, remove, resource: fetchRes } = fr;
|
|
|
|
const { data: listData, isLoading, isFetching, refetch } = useQuery({
|
|
queryKey: ["fetch-requests", "list", { statusFilter, accountFilter, sourceFilter }],
|
|
queryFn: () => list({
|
|
...(statusFilter.length > 0 ? { status: statusFilter.join(",") } : {}),
|
|
...(accountFilter ? { account_name: accountFilter } : {}),
|
|
...(sourceFilter !== "all" ? { source_type: sourceFilter } : {}),
|
|
}),
|
|
});
|
|
|
|
const { list: listAccounts } = useResource("accounts");
|
|
const { data: accountsData } = useQuery({
|
|
queryKey: ["accounts", "list"],
|
|
queryFn: () => listAccounts(),
|
|
});
|
|
const accountOptions: string[] = React.useMemo(() => {
|
|
return (accountsData?.items ?? []).map((a: any) => a.name).filter(Boolean);
|
|
}, [accountsData]);
|
|
|
|
const fields = fetchRes?.orderedFields ?? [];
|
|
const formatField: FieldConfig | undefined = fields.find(f => f.name === "format");
|
|
const formatOptions: string[] = formatField?.enumValues ?? [];
|
|
const startDateField: FieldConfig | undefined = fields.find(f => f.name === "start_date");
|
|
const endDateField: FieldConfig | undefined = fields.find(f => f.name === "end_date");
|
|
const payorUsernameField: FieldConfig | undefined = fields.find(f => f.name === "payor_username");
|
|
|
|
const createMutation = useMutation({
|
|
mutationFn: (data: any) => create(data),
|
|
});
|
|
const updateMutation = useMutation({
|
|
mutationFn: ({ id, data }: { id: string; data: any }) => update(id, data),
|
|
});
|
|
const deleteMutation = useMutation({
|
|
mutationFn: (id: string) => remove(id),
|
|
});
|
|
const uploadMutation = useUploadFile();
|
|
|
|
const requests = listData?.items ?? [];
|
|
|
|
const handleUpload = async () => {
|
|
if (!file) return;
|
|
const result = await uploadMutation.mutateAsync(file);
|
|
if (result?.saved_as) {
|
|
setUploadedPath(result.saved_as);
|
|
if (!format) setFormat(file.name.split(".").pop() || "");
|
|
setSnackbar({ message: `File uploaded: ${result.saved_as}`, severity: "success" });
|
|
}
|
|
};
|
|
|
|
const handleCreate = async () => {
|
|
if (!accountName) return;
|
|
|
|
let source: FileSource | EmailSource;
|
|
|
|
if (sourceType === "file") {
|
|
if (!uploadedPath || !format) return;
|
|
source = { path: uploadedPath, format } as FileSource;
|
|
} else {
|
|
if (!format) return;
|
|
const emailSource: EmailSource = { format };
|
|
if (fromEmail) emailSource.from_email = fromEmail;
|
|
if (subject) emailSource.subject = subject;
|
|
if (rawTerms.trim()) emailSource.raw_terms = rawTerms.split(",").map((s) => s.trim()).filter(Boolean);
|
|
source = emailSource;
|
|
}
|
|
|
|
try {
|
|
const result = await createMutation.mutateAsync({
|
|
source,
|
|
account_name: accountName,
|
|
payor_username: payorUsername,
|
|
...(startDate ? { start_date: new Date(startDate).toISOString() } : {}),
|
|
...(endDate ? { end_date: new Date(endDate).toISOString() } : {}),
|
|
});
|
|
setSnackbar({ message: "Fetch request created", severity: "success" });
|
|
resetForm();
|
|
navigate(`/fetch-requests/${result.id}`);
|
|
} catch (err: any) {
|
|
if (err?.response?.status === 409) {
|
|
setSnackbar({ message: "Duplicate \u2014 same fingerprint already exists", severity: "error" });
|
|
} else {
|
|
setSnackbar({ message: formatApiError(err) || "Failed to create fetch request", severity: "error" });
|
|
}
|
|
}
|
|
};
|
|
|
|
const resetForm = () => {
|
|
setAccountName("");
|
|
setFormat("");
|
|
setFile(null);
|
|
setUploadedPath(null);
|
|
setFromEmail("");
|
|
setSubject("");
|
|
setRawTerms("");
|
|
setStartDate("");
|
|
setEndDate("");
|
|
};
|
|
|
|
const handleRetry = async (req: FetchRequest) => {
|
|
try {
|
|
await updateMutation.mutateAsync({ id: req.id, data: { status: "pending" } });
|
|
setSnackbar({ message: "Retrying fetch request", severity: "success" });
|
|
} catch {
|
|
setSnackbar({ message: "Failed to retry", severity: "error" });
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!deleteTarget) return;
|
|
try {
|
|
await deleteMutation.mutateAsync(deleteTarget.id);
|
|
setSnackbar({ message: "Fetch request deleted", severity: "success" });
|
|
} catch {
|
|
setSnackbar({ message: "Failed to delete", severity: "error" });
|
|
}
|
|
setDeleteTarget(null);
|
|
};
|
|
|
|
const sourceTypeOptions: ("all" | "file" | "email")[] = ["all", "file", "email"];
|
|
|
|
return (
|
|
<Container sx={{ mt: 4, mb: 4 }}>
|
|
<Typography variant="h5" fontWeight="bold" gutterBottom>
|
|
Fetch Request Pipeline
|
|
</Typography>
|
|
|
|
<Paper sx={{ p: 3, mb: 4, borderRadius: 4 }} variant="outlined">
|
|
<Typography variant="subtitle1" fontWeight={600} gutterBottom>
|
|
New Fetch Request
|
|
</Typography>
|
|
|
|
<ToggleButtonGroup
|
|
value={sourceType}
|
|
exclusive
|
|
onChange={(_, val) => val && setSourceType(val)}
|
|
sx={{ mb: 3 }}
|
|
size="small"
|
|
>
|
|
<ToggleButton value="file">File Upload</ToggleButton>
|
|
<ToggleButton value="email">Email Fetch</ToggleButton>
|
|
</ToggleButtonGroup>
|
|
|
|
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
|
{sourceType === "file" ? (
|
|
<>
|
|
<Box sx={{ display: "flex", gap: 2, alignItems: "flex-end" }}>
|
|
<Button variant="outlined" component="label" startIcon={<CloudUploadIcon />}>
|
|
Choose File
|
|
<input type="file" hidden onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
|
|
</Button>
|
|
<Typography variant="body2" sx={{ flex: 1, color: "text.secondary" }}>
|
|
{file ? file.name : "No file selected"}
|
|
</Typography>
|
|
<Button
|
|
variant="contained"
|
|
onClick={handleUpload}
|
|
disabled={!file || uploadMutation.isPending}
|
|
>
|
|
{uploadMutation.isPending ? "Uploading..." : "Upload"}
|
|
</Button>
|
|
</Box>
|
|
{uploadedPath && (
|
|
<Alert severity="success" sx={{ py: 0 }}>
|
|
Uploaded as: {uploadedPath}
|
|
</Alert>
|
|
)}
|
|
{formatField ? (
|
|
<FormFieldRenderer
|
|
field={formatField}
|
|
value={format}
|
|
onChange={setFormat}
|
|
/>
|
|
) : (
|
|
<FormControl size="small">
|
|
<InputLabel>Format</InputLabel>
|
|
<Select value={format} onChange={(e) => setFormat(e.target.value)} label="Format">
|
|
{formatOptions.map((opt) => (
|
|
<MenuItem key={opt} value={opt}>{opt}</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
)}
|
|
</>
|
|
) : (
|
|
<>
|
|
{formatField ? (
|
|
<FormFieldRenderer
|
|
field={formatField}
|
|
value={format}
|
|
onChange={setFormat}
|
|
/>
|
|
) : (
|
|
<FormControl size="small">
|
|
<InputLabel>Format</InputLabel>
|
|
<Select value={format} onChange={(e) => setFormat(e.target.value)} label="Format">
|
|
{formatOptions.map((opt) => (
|
|
<MenuItem key={opt} value={opt}>{opt}</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
)}
|
|
<TextField label="From Email" value={fromEmail} onChange={(e) => setFromEmail(e.target.value)} size="small" />
|
|
<TextField label="Subject" value={subject} onChange={(e) => setSubject(e.target.value)} size="small" />
|
|
<TextField label="Raw Terms" value={rawTerms} onChange={(e) => setRawTerms(e.target.value)} size="small" helperText="Comma-separated search terms" />
|
|
</>
|
|
)}
|
|
|
|
<Autocomplete
|
|
options={accountOptions}
|
|
value={accountName || null}
|
|
onChange={(_, val) => setAccountName(val ?? "")}
|
|
renderInput={(params) => (
|
|
<TextField {...params} label="Account Name" size="small" required />
|
|
)}
|
|
sx={{ "& .MuiOutlinedInput-root": { height: "auto", minHeight: "2.5rem" } }}
|
|
/>
|
|
{payorUsernameField ? (
|
|
<FormFieldRenderer
|
|
field={payorUsernameField}
|
|
value={payorUsername}
|
|
onChange={setPayorUsername}
|
|
/>
|
|
) : (
|
|
<TextField label="Payor Username" value={payorUsername} onChange={(e) => setPayorUsername(e.target.value)} size="small" helperText="Default: aetos" />
|
|
)}
|
|
|
|
<Box sx={{ display: "flex", gap: 2 }}>
|
|
{startDateField ? (
|
|
<Box sx={{ flex: 1 }}>
|
|
<FormFieldRenderer
|
|
field={startDateField}
|
|
value={startDate}
|
|
onChange={setStartDate}
|
|
/>
|
|
</Box>
|
|
) : (
|
|
<TextField
|
|
label="Start Date"
|
|
type="date"
|
|
value={startDate}
|
|
onChange={(e) => setStartDate(e.target.value)}
|
|
size="small"
|
|
InputLabelProps={{ shrink: true }}
|
|
inputProps={{ max: new Date().toISOString().split("T")[0] }}
|
|
sx={{ flex: 1 }}
|
|
/>
|
|
)}
|
|
{endDateField ? (
|
|
<Box sx={{ flex: 1 }}>
|
|
<FormFieldRenderer
|
|
field={endDateField}
|
|
value={endDate}
|
|
onChange={setEndDate}
|
|
/>
|
|
</Box>
|
|
) : (
|
|
<TextField
|
|
label="End Date"
|
|
type="date"
|
|
value={endDate}
|
|
onChange={(e) => setEndDate(e.target.value)}
|
|
size="small"
|
|
InputLabelProps={{ shrink: true }}
|
|
inputProps={{ max: new Date().toISOString().split("T")[0] }}
|
|
sx={{ flex: 1 }}
|
|
/>
|
|
)}
|
|
</Box>
|
|
|
|
<Button
|
|
variant="contained"
|
|
onClick={handleCreate}
|
|
disabled={createMutation.isPending || !accountName || (sourceType === "file" && (!uploadedPath || !format)) || (sourceType === "email" && !format)}
|
|
>
|
|
{createMutation.isPending ? "Creating..." : "Create Fetch Request"}
|
|
</Button>
|
|
</Box>
|
|
</Paper>
|
|
|
|
<Paper sx={{ borderRadius: 4, mb: 2, p: 2 }} variant="outlined">
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
|
|
<FormControl size="small" sx={{ minWidth: 200 }}>
|
|
<InputLabel>Status</InputLabel>
|
|
<Select
|
|
multiple
|
|
value={statusFilter}
|
|
onChange={(e) => setStatusFilter(e.target.value as string[])}
|
|
input={<OutlinedInput label="Status" />}
|
|
renderValue={(selected) => (selected as string[]).join(", ")}
|
|
>
|
|
{STATUS_OPTIONS.map((s: string) => (
|
|
<MenuItem key={s} value={s}>{s.replace(/_/g, " ")}</MenuItem>
|
|
))}
|
|
</Select>
|
|
</FormControl>
|
|
<Autocomplete
|
|
options={accountOptions}
|
|
value={accountFilter || null}
|
|
onChange={(_, val) => setAccountFilter(val ?? "")}
|
|
renderInput={(params) => (
|
|
<TextField {...params} label="Account" size="small" sx={{ minWidth: 160 }} />
|
|
)}
|
|
sx={{ minWidth: 160, "& .MuiOutlinedInput-root": { height: "auto", minHeight: "2.5rem" } }}
|
|
/>
|
|
<ToggleButtonGroup
|
|
value={sourceFilter}
|
|
exclusive
|
|
onChange={(_, val) => val && setSourceFilter(val)}
|
|
size="small"
|
|
>
|
|
{sourceTypeOptions.map((opt) => (
|
|
<ToggleButton key={opt} value={opt}>
|
|
{opt === "all" ? "All" : opt === "file" ? "File" : "Email"}
|
|
</ToggleButton>
|
|
))}
|
|
</ToggleButtonGroup>
|
|
<Box sx={{ flex: 1 }} />
|
|
<IconButton onClick={() => refetch()} disabled={isFetching}>
|
|
<RefreshIcon />
|
|
</IconButton>
|
|
</Box>
|
|
</Paper>
|
|
|
|
{isLoading ? (
|
|
<Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
|
|
<CircularProgress />
|
|
</Box>
|
|
) : requests.length === 0 ? (
|
|
<Box sx={{ p: 4, textAlign: "center", color: "text.secondary" }}>
|
|
No fetch requests yet
|
|
</Box>
|
|
) : (
|
|
<Paper variant="outlined" sx={{ borderRadius: 4 }}>
|
|
<Box sx={{ overflowX: "auto" }}>
|
|
<Box component="table" sx={{ width: "100%", borderCollapse: "collapse" }}>
|
|
<Box component="thead">
|
|
<Box component="tr" sx={{ borderBottom: 1, borderColor: "divider" }}>
|
|
{["ID", "Account", "Source", "Date Range", "Status", "Retries", "Created", "Actions"].map((h) => (
|
|
<Box
|
|
key={h}
|
|
component="th"
|
|
sx={{ px: 2, py: 1.5, textAlign: h === "Actions" ? "right" : "left", fontWeight: 600, fontSize: "0.8rem", color: "text.secondary", whiteSpace: "nowrap" }}
|
|
>
|
|
{h}
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
<Box component="tbody">
|
|
{[...requests]
|
|
.sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
|
|
.map((req: FetchRequest) => (
|
|
<Box
|
|
key={req.id}
|
|
component="tr"
|
|
onClick={() => navigate(`/fetch-requests/${req.id}`)}
|
|
sx={{
|
|
cursor: "pointer",
|
|
borderBottom: 1,
|
|
borderColor: "divider",
|
|
"&:hover": { bgcolor: "action.hover" },
|
|
"&:last-child": { borderBottom: 0 },
|
|
}}
|
|
>
|
|
<Box component="td" sx={{ px: 2, py: 1.5, fontFamily: "monospace", fontSize: "0.8rem" }}>
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
|
|
{shortId(req.fingerprint)}
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
navigator.clipboard.writeText(req.fingerprint);
|
|
setSnackbar({ message: "Copied!", severity: "success" });
|
|
}}
|
|
sx={{ opacity: 0.5, '&:hover': { opacity: 1 } }}
|
|
>
|
|
<ContentCopyIcon sx={{ fontSize: 14 }} />
|
|
</IconButton>
|
|
</Box>
|
|
</Box>
|
|
<Box component="td" sx={{ px: 2, py: 1.5, fontSize: "0.875rem" }}>
|
|
{req.account_name}
|
|
</Box>
|
|
<Box component="td" sx={{ px: 2, py: 1.5 }}>
|
|
<Chip
|
|
label={"path" in req.source ? "File" : "Email"}
|
|
size="small"
|
|
variant="outlined"
|
|
color={"path" in req.source ? "primary" : "secondary"}
|
|
/>
|
|
</Box>
|
|
<Box component="td" sx={{ px: 2, py: 1.5 }}>
|
|
<Typography variant="body2" sx={{ fontSize: "0.8rem", whiteSpace: "nowrap" }}>
|
|
{formatDateRange((req as any).start_date, (req as any).end_date)}
|
|
</Typography>
|
|
</Box>
|
|
<Box component="td" sx={{ px: 2, py: 1.5 }}>
|
|
<Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
|
|
<Tooltip title={req.error_message || req.status.replace(/_/g, " ")}>
|
|
<Chip
|
|
icon={statusIcons[req.status] as any}
|
|
label={req.status.replace(/_/g, " ")}
|
|
color={statusColors[req.status]}
|
|
size="small"
|
|
/>
|
|
</Tooltip>
|
|
</Box>
|
|
</Box>
|
|
<Box component="td" sx={{ px: 2, py: 1.5 }}>
|
|
{(req.retry_count ?? 0) > 0 ? (
|
|
<Typography variant="body2" sx={{ fontSize: "0.8rem" }}>
|
|
{req.retry_count}/{RETRY_MAX}
|
|
</Typography>
|
|
) : (
|
|
<Typography variant="body2" sx={{ fontSize: "0.8rem", color: "text.disabled" }}>
|
|
\u2014
|
|
</Typography>
|
|
)}
|
|
</Box>
|
|
<Box component="td" sx={{ px: 2, py: 1.5, whiteSpace: "nowrap", fontSize: "0.8rem" }}>
|
|
{formatDate(req.created_at)}
|
|
</Box>
|
|
<Box component="td" sx={{ px: 2, py: 1.5 }}>
|
|
<Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
|
|
{req.status === "paused" && (
|
|
<Tooltip title="Resolve ambiguities">
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
navigate(`/fetch-requests/${req.id}`);
|
|
}}
|
|
>
|
|
<WarningAmberIcon fontSize="small" color="warning" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
)}
|
|
{req.status === "failed" && (req.retry_count ?? 0) < RETRY_MAX && (
|
|
<Tooltip title="Retry">
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
handleRetry(req);
|
|
}}
|
|
>
|
|
<ReplayIcon fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
)}
|
|
<Tooltip title="Delete">
|
|
<IconButton
|
|
size="small"
|
|
onClick={(e) => {
|
|
e.stopPropagation();
|
|
setDeleteTarget(req);
|
|
}}
|
|
>
|
|
<DeleteIcon fontSize="small" />
|
|
</IconButton>
|
|
</Tooltip>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
)}
|
|
|
|
<Snackbar
|
|
open={!!snackbar}
|
|
autoHideDuration={4000}
|
|
onClose={() => setSnackbar(null)}
|
|
anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
|
|
>
|
|
{snackbar ? <Alert severity={snackbar.severity} onClose={() => setSnackbar(null)}>{snackbar.message}</Alert> : undefined}
|
|
</Snackbar>
|
|
|
|
<Dialog open={!!deleteTarget} onClose={() => setDeleteTarget(null)}>
|
|
<DialogTitle>Delete Fetch Request?</DialogTitle>
|
|
<DialogContent>
|
|
<DialogContentText>
|
|
This will permanently delete the fetch request and all associated data.
|
|
</DialogContentText>
|
|
</DialogContent>
|
|
<DialogActions>
|
|
<Button onClick={() => setDeleteTarget(null)}>Cancel</Button>
|
|
<Button onClick={handleDelete} color="error" disabled={deleteMutation.isPending}>
|
|
{deleteMutation.isPending ? "Deleting..." : "Delete"}
|
|
</Button>
|
|
</DialogActions>
|
|
</Dialog>
|
|
</Container>
|
|
);
|
|
}
|