new FetchRequest
This commit is contained in:
121
src/FetchRequest/components/AmbiguityResolver.tsx
Normal file
121
src/FetchRequest/components/AmbiguityResolver.tsx
Normal file
@@ -0,0 +1,121 @@
|
||||
import React from "react";
|
||||
import {
|
||||
Box,
|
||||
Paper,
|
||||
Typography,
|
||||
Button,
|
||||
Alert,
|
||||
} from "@mui/material";
|
||||
import CheckCircleIcon from "@mui/icons-material/CheckCircle";
|
||||
import { useFetchRequestAmbiguities, useResolveAmbiguity } from "../../features/fetch-requests";
|
||||
|
||||
interface AmbiguityResolverProps {
|
||||
fetchRequestId: string;
|
||||
}
|
||||
|
||||
export function AmbiguityResolver({ fetchRequestId }: AmbiguityResolverProps) {
|
||||
const { data: ambiguities, refetch } = useFetchRequestAmbiguities(fetchRequestId);
|
||||
const resolveMutation = useResolveAmbiguity();
|
||||
|
||||
const handleResolve = async (ambiguity: any, candidate: { amount: number; balance: number }) => {
|
||||
await resolveMutation.mutateAsync({
|
||||
ambiguityId: ambiguity.id,
|
||||
payload: { chosen: { amount: candidate.amount, balance: candidate.balance } },
|
||||
});
|
||||
refetch();
|
||||
};
|
||||
|
||||
if (!ambiguities || ambiguities.length === 0) return null;
|
||||
|
||||
const allResolved = ambiguities.every((a: any) => a.status === "resolved");
|
||||
|
||||
return (
|
||||
<Paper sx={{ p: 3, borderRadius: 4, mb: 3 }} variant="outlined">
|
||||
<Typography variant="subtitle1" fontWeight={600} gutterBottom>
|
||||
Ambiguity Resolution
|
||||
</Typography>
|
||||
|
||||
{allResolved ? (
|
||||
<Alert severity="success" sx={{ mb: 2, borderRadius: 2 }}>
|
||||
All ambiguities resolved — pipeline will resume on next poll cycle
|
||||
</Alert>
|
||||
) : (
|
||||
<Alert severity="warning" sx={{ mb: 2, borderRadius: 2 }}>
|
||||
Pipeline paused — resolve ambiguities to continue
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
<Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
|
||||
{ambiguities.map((ambiguity: any) => {
|
||||
const isResolved = ambiguity.status === "resolved";
|
||||
return (
|
||||
<Paper
|
||||
key={ambiguity.id}
|
||||
sx={{
|
||||
p: 2,
|
||||
borderRadius: 3,
|
||||
border: 1,
|
||||
borderColor: isResolved ? "success.main" : "divider",
|
||||
opacity: isResolved ? 0.8 : 1,
|
||||
}}
|
||||
variant="outlined"
|
||||
>
|
||||
<Box sx={{ fontFamily: "monospace", fontSize: "0.85rem", mb: 1.5, p: 1, bgcolor: "grey.900", borderRadius: 1, color: "grey.100" }}>
|
||||
{ambiguity.line}
|
||||
</Box>
|
||||
|
||||
<Box sx={{ display: "flex", gap: 3, mb: 1.5, flexWrap: "wrap" }}>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">OCR Amount</Typography>
|
||||
<Typography variant="body2" sx={{ textDecoration: "line-through", color: "text.secondary" }}>
|
||||
₹{ambiguity.ocr_amount}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">OCR Balance</Typography>
|
||||
<Typography variant="body2" sx={{ textDecoration: "line-through", color: "text.secondary" }}>
|
||||
₹{ambiguity.ocr_balance}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="caption" color="text.secondary">Previous Balance</Typography>
|
||||
<Typography variant="body2">₹{ambiguity.prev_balance}</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
{isResolved ? (
|
||||
<Alert severity="success" sx={{ py: 0.5, borderRadius: 2 }} icon={<CheckCircleIcon />}>
|
||||
Resolved: ₹{ambiguity.chosen?.amount} / ₹{ambiguity.chosen?.balance}
|
||||
</Alert>
|
||||
) : (
|
||||
<Box sx={{ display: "flex", gap: 1, flexWrap: "wrap" }}>
|
||||
{ambiguity.candidates.map((candidate: any, ci: number) => {
|
||||
const isCredit = candidate.amount > 0;
|
||||
const isDebit = candidate.amount < 0;
|
||||
const cColor = isCredit ? "success.main" : isDebit ? "error.main" : undefined;
|
||||
return (
|
||||
<Button
|
||||
key={ci}
|
||||
variant="outlined"
|
||||
size="small"
|
||||
onClick={() => handleResolve(ambiguity, candidate)}
|
||||
disabled={resolveMutation.isPending}
|
||||
sx={{
|
||||
borderColor: cColor,
|
||||
color: cColor,
|
||||
"&:hover": cColor ? { borderColor: cColor } : undefined,
|
||||
}}
|
||||
>
|
||||
₹{candidate.amount} / ₹{candidate.balance}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
)}
|
||||
</Paper>
|
||||
);
|
||||
})}
|
||||
</Box>
|
||||
</Paper>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user