added favicon

ignoreSelf default true
copy ids
2026-05-24 16:02:36 +05:30 · 2026-05-24 15:58:14 +05:30 · 2026-05-24 15:57:32 +05:30 · 2026-05-24 14:51:59 +05:30 · 2026-05-24 14:48:23 +05:30 · 2026-05-24 14:39:35 +05:30
17 changed files with 103 additions and 1242 deletions
--- a/index.html
+++ b/index.html
@@ -9,7 +9,7 @@
      rel="stylesheet"
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap"
    />
-    <link rel="icon" type="image/png" href="/favicon.png" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.png" />
    <title>khata - Aetoskia</title>
  </head>
  <body>
--- a/react-openapi/api/client.ts
+++ b/react-openapi/api/client.ts
@@ -46,10 +46,6 @@ export const api = {
    if (!_api) throw new Error("API client not initialized");
    return _api.delete(...args);
  },
  patch: (...args: Parameters<AxiosInstance["patch"]>) => {
    if (!_api) throw new Error("API client not initialized");
    return _api.patch(...args);
  },
 };
 export const auth = {
--- a/react-openapi/components/EnhancedTable.tsx
+++ b/react-openapi/components/EnhancedTable.tsx
@@ -31,7 +31,6 @@ import VisibilityIcon from '@mui/icons-material/Visibility';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { useNavigate } from 'react-router-dom';
 import { ResourceConfig } from '../types/config';
 import { getFieldOptions, toGridValueOptions } from '../utils/options';
 interface EnhancedTableProps {
  config: ResourceConfig;
@@ -97,7 +96,8 @@ export default function EnhancedTable({
      }
      if (muiType === 'singleSelect' && field.options) {
-        col.valueOptions = toGridValueOptions(getFieldOptions(field));
+        // @ts-ignore
        col.valueOptions = field.options;
      }
      return col;
@@ -379,11 +379,6 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
    if (field.type === 'datetime' || field.type === 'date') return value ? new Date(value).toLocaleString() : '';
    if (field.type === 'enum' && field.options) {
      const opt = getFieldOptions(field).find(o => o.key === value);
      return opt?.value ?? value;
    }
    if (isPk && !isMobile) {
        return (
            <Chip 
--- a/react-openapi/components/FilterBar.tsx
+++ b/react-openapi/components/FilterBar.tsx
@@ -11,7 +11,6 @@ import {
 import DoneIcon from "@mui/icons-material/Done";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import { ResourceField, ResourceMode } from "../types/config";
 import { getFieldOptions } from "../utils/options";
 function FilterAutocomplete({
  options,
@@ -111,9 +110,7 @@ function extractOptions(
 ): string[] {
  const values = new Set<string>();
-  if (field.type === 'enum' && field.options) {
+  if (field.options) return field.options;
    return getFieldOptions(field).map(o => o.key);
  }
  if (!data) return [];
  const pull = (item: any): string | null => {
--- a/react-openapi/components/fields/FormField.tsx
+++ b/react-openapi/components/fields/FormField.tsx
@@ -12,7 +12,6 @@ import {
  Divider,
 } from '@mui/material';
 import { ResourceField } from '../../types/config';
 import { getFieldOptions } from '../../utils/options';
 import ImageUploadField from './ImageUploadField';
 interface FormFieldProps {
@@ -74,40 +73,40 @@ export default function FormField({
  if (field.relation && relationDataMap[field.relation]) {
    const relationData = relationDataMap[field.relation].data;
    const isArrayRelation = field.type === 'array';
    const options = getFieldOptions(field, relationData);
    const keyField = field.enumOption?.key ?? 'id';
-    // Normalize value: API returns whole objects on GET, but form uses key strings
+    // Determine how to display the related item
-    const normalizedValue = (() => {
+    const getOptionLabel = (option: any) => {
-      if (isArrayRelation && Array.isArray(value)) {
+        if (!option) return "";
-        return value.map((v: any) => (v != null && typeof v === 'object' ? String(v[keyField] ?? '') : String(v)));
+        if (field.displayField && option[field.displayField]) return option[field.displayField];
-      }
+        // Standard naming fields
-      if (value != null && typeof value === 'object') {
+        return option.name || option.title || option.label || option.id || JSON.stringify(option);
-        return String(value[keyField] ?? '');
+    };
-      }
+
-      return value ?? (isArrayRelation ? [] : "");
+    const getOptionValue = (option: any) => {
-    })();
+        // Return the whole object to maintain identity
        return option;
    };
    return (
      <FormControl fullWidth>
        <InputLabel shrink>{label}</InputLabel>
        <Select
          multiple={isArrayRelation}
-          value={normalizedValue}
+          value={value || (isArrayRelation ? [] : "")}
          label={label}
          displayEmpty
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled}
          renderValue={(selected: any) => {
            if (isArrayRelation) {
-              return (selected as string[]).map(k => options.find(o => o.key === k)?.value ?? k).join(', ');
+              return (selected as any[]).map(getOptionLabel).join(', ');
            }
-            return options.find(o => o.key === selected)?.value ?? selected;
+            return getOptionLabel(selected);
          }}
        >
-          {options.map((opt) => (
+          {relationData.map((option) => (
-            <MenuItem key={opt.key} value={opt.key}>
+            <MenuItem key={option.id || JSON.stringify(option)} value={getOptionValue(option)}>
-              {opt.value}
+              {getOptionLabel(option)}
            </MenuItem>
          ))}
        </Select>
@@ -150,7 +149,6 @@ export default function FormField({
  // 5. Enum Handling
  if (field.type === 'enum' && field.options) {
    const options = getFieldOptions(field);
    return (
      <FormControl fullWidth>
        <InputLabel>{label}</InputLabel>
@@ -160,9 +158,9 @@ export default function FormField({
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled}
        >
-          {options.map((opt) => (
+          {field.options.map((opt: string) => (
-            <MenuItem key={opt.key} value={opt.key}>
+            <MenuItem key={opt} value={opt}>
-              {opt.value}
+              {opt}
            </MenuItem>
          ))}
        </Select>
--- a/react-openapi/hooks/useResource.ts
+++ b/react-openapi/hooks/useResource.ts
@@ -73,23 +73,6 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
      },
    });
  // --- PATCH ---
  const usePatch = () =>
    useMutation({
      mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
        if (!endpoint) throw new Error("Endpoint not defined");
        // @ts-ignore
        const res = await api.patch<T>(`${endpoint}/${id}`, data);
        return res.data;
      },
      onSuccess: (updatedItem) => {
        // @ts-ignore
        const id = updatedItem[primaryKey];
        queryClient.invalidateQueries({ queryKey: [name, "list"] });
        queryClient.invalidateQueries({ queryKey: [name, "detail", id] });
      },
    });
  // --- DELETE ---
  const useDelete = () =>
    useMutation({
@@ -153,7 +136,6 @@ export function useResource<T = any>(config: ResourceConfig | undefined) {
    useMe,
    useCreate,
    useUpdate,
    usePatch,
    useUpdateMe,
    useDelete,
    getListQueryOptions,
--- a/react-openapi/types/config.ts
+++ b/react-openapi/types/config.ts
@@ -10,16 +10,6 @@ export type FieldType =
  | 'object'
  | 'array';
 export interface SelectOption {
  key: string;
  value: string;
 }
 export interface EnumOption {
  key: string;
  value: string | string[];
 }
 export interface ResourceField {
  type: FieldType;
  label: string;
@@ -29,10 +19,8 @@ export interface ResourceField {
  schema?: Record<string, ResourceField>;
  displayField?: string | string[];
  formatter?: (value: any) => string;
-  relation?: string;
+  relation?: string; // Name of the target resource
  filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
  enumOption?: EnumOption;
  enumLabels?: Record<string, string>;
 }
 export type ResourceMode = "server" | "client";
@@ -50,7 +38,6 @@ export interface ResourceConfig {
    mode?: ResourceMode;
    fields?: string[];
  };
  enumOption?: EnumOption;
 }
 export interface AppConfig {
--- a/react-openapi/types/overrides.ts
+++ b/react-openapi/types/overrides.ts
@@ -1,14 +1,13 @@
-export interface EnumOption {
+/**
-  key: string;
+ * This file contains application-specific overrides and configuration
-  value: string | string[];
+ * for the generic Admin Panel.
-}
+ */
 export interface FieldOverride {
  displayField?: string | string[];
  display?: boolean;
  formatter?: (value: any) => string;
  filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
  enumLabels?: Record<string, string>;
 }
 export interface ResourceOverride {
@@ -19,5 +18,4 @@ export interface ResourceOverride {
    mode?: "server" | "client";
    fields?: string[];
  };
  enumOption?: EnumOption;
 }
--- a/react-openapi/utils/openapi_loader.ts
+++ b/react-openapi/utils/openapi_loader.ts
@@ -80,21 +80,6 @@ function parseSchemaFields(
    const relation = schemaToResourceMap.get(targetSchema);
    if (relation) {
      fields[key].relation = relation;
      // Propagate enumOption from target resource config, or derive from target schema
      const explicitEnumOption = configuration[relation]?.enumOption;
      if (explicitEnumOption) {
        fields[key].enumOption = explicitEnumOption;
      } else {
        const targetProps = targetSchema.properties || {};
        const valueField = Object.entries(targetProps).find(
          ([name, p]: [string, any]) => name !== 'id' && p.type === 'string'
        )?.[0];
        fields[key].enumOption = {
          key: 'id',
          value: valueField ?? 'id',
        };
      }
    }
    // Recursively parse nested objects (only if not a relation)
--- a/react-openapi/utils/options.ts
+++ b/react-openapi/utils/options.ts
@@ -1,28 +0,0 @@
 import { ResourceField, SelectOption } from "../types/config";
 export function getFieldOptions(field: ResourceField, relationData?: any[]): SelectOption[] {
  if (field.type === 'enum' && field.options) {
    return field.options.map(opt => ({
      key: opt,
      value: field.enumLabels?.[opt] ?? opt,
    }));
  }
  if (field.relation) {
    const data = relationData ?? [];
    const enumOption = field.enumOption ?? { key: 'id', value: 'name' };
    return data.map(item => ({
      key: String(item[enumOption.key] ?? ''),
      value: Array.isArray(enumOption.value)
        ? enumOption.value.map(k => item[k]).filter(v => v != null).join(' ')
        : String(item[enumOption.value] ?? ''),
    }));
  }
  return [];
 }
 export function toGridValueOptions(options: SelectOption[]): { value: string; label: string }[] {
  return options.map(opt => ({ value: opt.key, label: opt.value }));
 }
--- a/src/FetchRequestDetail.tsx
+++ b/src/FetchRequestDetail.tsx
@@ -1,675 +0,0 @@
 import * as React from "react";
 import { useParams, useNavigate } from "react-router-dom";
 import {
  Box,
  Container,
  Paper,
  Typography,
  Button,
  Chip,
  CircularProgress,
  Alert,
  Stepper,
  Step,
  StepLabel,
  StepIcon,
  LinearProgress,
  IconButton,
  Snackbar,
 } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import ReplayIcon from "@mui/icons-material/Replay";
 import CheckCircleIcon from "@mui/icons-material/CheckCircle";
 import ErrorIcon from "@mui/icons-material/Error";
 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 {
  useFetchRequest,
  useUpdateFetchRequest,
  useFetchRequestAmbiguities,
  useResolveAmbiguity,
 } from "./features/fetch-requests";
 import type {
  FetchRequestStatus,
  SSEEvent,
  ProgressMessage,
 } from "./features/fetch-requests";
 import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
 import { useConfig } from "../react-openapi";
 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: <PlayArrowIcon sx={{ fontSize: 16 }} />,
  processing: <CircularProgress size={14} />,
  paused: <WarningAmberIcon sx={{ fontSize: 16 }} />,
  raw_expenses_done: <CheckCircleIcon sx={{ fontSize: 16 }} />,
  enriched_done: <CheckCircleIcon sx={{ fontSize: 16 }} />,
  completed: <CheckCircleIcon sx={{ fontSize: 16 }} />,
  failed: <ErrorIcon sx={{ fontSize: 16 }} />,
 };
 function computeProgressPercent(
  status: FetchRequestStatus,
  liveCount: number,
  seenSteps: Set<string>,
  stepStats: Record<string, number>,
  txnBlockCount: number,
  txnDictCount: number,
 ): number {
  if (status === "pending") return 0;
  if (status === "completed") return 100;
  let pct = 0;
  if (seenSteps.has("raw_lines") || seenSteps.has("txn_blocks")) pct += 10;
  if (txnBlockCount > 0) {
    const current = Math.max(liveCount, stepStats.txn_dicts ?? 0);
    pct += Math.min(1, current / txnBlockCount) * 20;
  }
  if (txnDictCount > 0) {
    pct += Math.min(1, (stepStats.enrich_count ?? 0) / txnDictCount) * 50;
    pct += Math.min(1, (stepStats.save_count ?? 0) / txnDictCount) * 20;
  }
  return Math.round(Math.min(100, pct));
 }
 const stepLabels = ["Extract", "Raw Expense", "Enrich", "Save"];
 function computeActiveStep(status: FetchRequestStatus, seenSteps: Set<string>): number {
  if (status === "completed") return stepLabels.length;
  if (seenSteps.has("save_expenses/completed") || seenSteps.has("complete/completed")) return stepLabels.length;
  if (seenSteps.has("save_expenses") || seenSteps.has("complete")) return 3;
  if (seenSteps.has("enrich/completed")) return 3;
  if (seenSteps.has("enrich")) return 2;
  if (seenSteps.has("txn_dicts/completed") || status === "raw_expenses_done") return 2;
  if (seenSteps.has("txn_dicts")) return 1;
  if (seenSteps.has("txn_blocks/completed")) return 1;
  if (seenSteps.has("raw_lines") || seenSteps.has("txn_blocks")) return 0;
  if (status === "processing" || status === "paused") return 0;
  return -1;
 }
 function formatProgressMessage(msg: ProgressMessage): string {
  if (msg.lines !== undefined) return `${msg.lines} lines`;
  if (msg.blocks !== undefined) return `${msg.blocks} blocks`;
  if (msg.count !== undefined && msg.unit) return `${msg.count} ${msg.unit}`;
  if (msg.count !== undefined) return `${msg.count} items`;
  if (msg.raw_ocr_line) return `"${msg.raw_ocr_line.slice(0, 60)}${msg.raw_ocr_line.length > 60 ? "…" : ""}"`;
  if (msg.error) return msg.error.slice(0, 80);
  return "";
 }
 function sseIcon(status: SSEEvent["status"]) {
  switch (status) {
    case "started": return <CircularProgress size={14} />;
    case "completed": return <CheckCircleIcon sx={{ fontSize: 16, color: "success.main" }} />;
    case "failed": return <ErrorIcon sx={{ fontSize: 16, color: "error.main" }} />;
    case "skipped": return <RemoveCircleOutlineIcon sx={{ fontSize: 16, color: "text.disabled" }} />;
    case "paused": return <WarningAmberIcon sx={{ fontSize: 16, color: "warning.main" }} />;
    case "progress": return (
      <FiberManualRecordIcon
        sx={{ fontSize: 14, color: "info.main" }}
      />
    );
  }
 }
 function isMathValid(candidate: { amount: number; balance: number }, prevBalance: number) {
  return (
    candidate.balance === prevBalance + candidate.amount ||
    candidate.balance === prevBalance - candidate.amount ||
    Math.abs(candidate.balance - (prevBalance + candidate.amount)) < 0.01 ||
    Math.abs(candidate.balance - (prevBalance - candidate.amount)) < 0.01
  );
 }
 export default function FetchRequestDetail() {
  const { id } = useParams<{ id: string }>();
  const navigate = useNavigate();
  const config = useConfig();
  const { data: fetchRequest, isLoading, error: fetchError, refetch: refetchRequest } = useFetchRequest(id!);
  const updateMutation = useUpdateFetchRequest();
  const resolveMutation = useResolveAmbiguity();
  const { data: ambiguities, refetch: refetchAmbiguities } = useFetchRequestAmbiguities(id!);
  const [sseEvents, setSseEvents] = React.useState<SSEEvent[]>([]);
  const [sseConnected, setSseConnected] = React.useState(false);
  const [liveParsedCount, setLiveParsedCount] = React.useState<number | undefined>(undefined);
  const [stepStats, setStepStats] = React.useState<Record<string, number>>({});
  const [failNotif, setFailNotif] = React.useState<string | null>(null);
  const sseRef = React.useRef<EventSource | null>(null);
  const feedRef = React.useRef<HTMLDivElement>(null);
  const txnBlockCount = React.useMemo(() => {
    const blocks = (fetchRequest as any)?.source?.txn_blocks;
    if (!blocks) return 0;
    return Object.values(blocks).reduce(
      (sum: number, list: any) => sum + (Array.isArray(list) ? list.length : 0),
      0,
    );
  }, [fetchRequest]);
  const stepMessages = React.useMemo(() => {
    const msgs: Record<number, string> = {};
    const source = (fetchRequest as any)?.source;
    const rawLineCount = stepStats.raw_lines ?? (source?.raw_lines?.length ?? 0);
    if (rawLineCount) msgs[0] = `${rawLineCount}`;
    const sourceDictCount = source?.txn_dict_count ?? source?.txn_dicts_count ?? 0;
    const dictLive = liveParsedCount ?? stepStats.txn_dicts ?? 0;
    const dictCurrent = Math.max(dictLive, sourceDictCount);
    if (dictCurrent && txnBlockCount) msgs[1] = `${dictCurrent}/${txnBlockCount}`;
    else if (dictCurrent) msgs[1] = `${dictCurrent}`;
    const txnDictDenom = stepStats.txn_dicts ?? sourceDictCount;
    if (stepStats.enrich_count && txnDictDenom) msgs[2] = `${stepStats.enrich_count}/${txnDictDenom}`;
    else if (stepStats.enrich_count) msgs[2] = `${stepStats.enrich_count}`;
    if (stepStats.save_count && txnDictDenom) msgs[3] = `${stepStats.save_count}/${txnDictDenom}`;
    else if (stepStats.save_count) msgs[3] = `${stepStats.save_count}`;
    return msgs;
  }, [fetchRequest, stepStats, liveParsedCount, txnBlockCount]);
  React.useEffect(() => {
    if (!id || !config?.baseUrl) return;
    const url = `${config.baseUrl}/fetch-requests/${id}/events`;
    const es = new EventSource(url);
    sseRef.current = es;
    es.onopen = () => setSseConnected(true);
    es.onerror = () => setSseConnected(false);
    es.onmessage = (event) => {
      try {
        const parsed: SSEEvent = JSON.parse(event.data);
        setSseEvents((prev) => [...prev, parsed]);
        if (parsed.status === "progress" && parsed.message.count !== undefined) {
          if (parsed.step === "txn_dicts") setLiveParsedCount(parsed.message.count);
          if (parsed.step === "enrich") setStepStats((prev) => ({ ...prev, enrich_count: parsed.message.count! }));
          if (parsed.step === "save_expenses") setStepStats((prev) => ({ ...prev, save_count: parsed.message.count! }));
        }
        if (parsed.status === "completed" && parsed.message.count !== undefined) {
          const stats: Record<string, number> = {};
          if (parsed.step === "raw_lines" && parsed.message.lines !== undefined) stats.raw_lines = parsed.message.lines;
          if (parsed.step === "txn_blocks" && parsed.message.blocks !== undefined) stats.txn_blocks = parsed.message.blocks;
          if (parsed.step === "txn_dicts") stats.txn_dicts = parsed.message.count;
          if (parsed.step === "enrich") stats.enrich_count = parsed.message.count;
          if (parsed.step === "save_expenses") stats.save_count = parsed.message.count;
          if (Object.keys(stats).length) {
            setStepStats((prev) => ({ ...prev, ...stats }));
          }
        }
        if (parsed.status === "paused") {
          refetchRequest();
          refetchAmbiguities();
        }
        if (parsed.status === "failed") {
          setFailNotif(parsed.message.error || "Fetch request failed");
          refetchRequest();
        }
        if (parsed.status === "completed" || parsed.step === "resume_extract") {
          refetchRequest();
        }
      } catch {
        // ignore malformed events
      }
    };
    return () => {
      es.close();
      sseRef.current = null;
    };
  }, [id, config?.baseUrl]);
  React.useEffect(() => {
    if (feedRef.current) {
      feedRef.current.scrollTop = feedRef.current.scrollHeight;
    }
  }, [sseEvents]);
  const displayEvents = React.useMemo(() => {
    const progressSteps = new Set(["txn_dicts", "enrich", "save_expenses"]);
    const lastProgressIdx: Record<string, number> = {};
    for (let i = sseEvents.length - 1; i >= 0; i--) {
      const e = sseEvents[i];
      if (progressSteps.has(e.step) && e.status === "progress" && lastProgressIdx[e.step] === undefined) {
        lastProgressIdx[e.step] = i;
      }
    }
    const terminalStatuses = new Set(["completed", "skipped", "paused", "failed"]);
    return sseEvents.filter((e, i) => {
      if (progressSteps.has(e.step) && e.status === "progress") return i === lastProgressIdx[e.step];
      if (e.status === "started") {
        return !sseEvents.slice(i + 1).some(
          (later) => later.step === e.step && terminalStatuses.has(later.status),
        );
      }
      return true;
    });
  }, [sseEvents]);
  const seenSteps = React.useMemo(() => {
    const steps = new Set<string>();
    for (const evt of sseEvents) {
      steps.add(evt.step);
      if (evt.status === "completed") steps.add(`${evt.step}/completed`);
      if (evt.status === "failed") steps.add(`${evt.step}/failed`);
      if (evt.status === "started") steps.add(`${evt.step}/started`);
      if (evt.status === "progress") steps.add(`${evt.step}/progress`);
    }
    return steps;
  }, [sseEvents]);
  const displayParsedCount = React.useMemo(() => {
    if (liveParsedCount && liveParsedCount > 0) return liveParsedCount;
    const source = (fetchRequest as any)?.source;
    const persistedCount = source?.txn_dict_count ?? source?.txn_dicts_count ?? 0;
    if (persistedCount > 0) return persistedCount;
    const dicts = source?.txn_dicts;
    if (Array.isArray(dicts) && dicts.length > 0) return dicts.length;
    return 0;
  }, [liveParsedCount, fetchRequest]);
  const txnDictCount = React.useMemo(() => {
    const source = (fetchRequest as any)?.source;
    if (stepStats.txn_dicts && stepStats.txn_dicts > 0) return stepStats.txn_dicts;
    return source?.txn_dict_count ?? source?.txn_dicts_count ?? 0;
  }, [fetchRequest, stepStats]);
  const progressPercent = React.useMemo(
    () => computeProgressPercent(
      (fetchRequest as any)?.status as FetchRequestStatus ?? "pending",
      displayParsedCount,
      seenSteps,
      stepStats,
      txnBlockCount,
      txnDictCount,
    ),
    [fetchRequest, displayParsedCount, seenSteps, stepStats, txnBlockCount, txnDictCount],
  );
  const handleRetry = async () => {
    if (!id) return;
    try {
      await updateMutation.mutateAsync({ id, data: { status: "pending" } });
    } catch (err: any) {
      setFailNotif(formatApiError(err));
    }
  };
  const handleResolve = async (ambiguity: any, candidate: { amount: number; balance: number }) => {
    await resolveMutation.mutateAsync({
      ambiguityId: ambiguity.id,
      payload: { chosen: { amount: candidate.amount, balance: candidate.balance } },
    });
    refetchAmbiguities();
  };
  if (isLoading) {
    return (
      <Box sx={{ display: "flex", justifyContent: "center", p: 8 }}>
        <CircularProgress />
      </Box>
    );
  }
  if (fetchError || !fetchRequest) {
    return (
      <Container sx={{ mt: 4 }}>
        <Button startIcon={<ArrowBackIcon />} onClick={() => navigate("/fetch-requests")} sx={{ mb: 2 }}>
          Back
        </Button>
        <Alert severity="error">Failed to load fetch request</Alert>
      </Container>
    );
  }
  const req = fetchRequest as any;
  const activeStep = computeActiveStep(req.status as FetchRequestStatus, seenSteps);
  const retryCount = req.retry_count ?? 0;
  const isRetryExhausted = retryCount >= RETRY_MAX;
  const pendingAmbiguities = ambiguities?.filter((a: any) => a.status === "pending") ?? [];
  const resolvedAmbiguities = ambiguities?.filter((a: any) => a.status === "resolved") ?? [];
  const hasAmbiguities = ambiguities && ambiguities.length > 0;
  const allResolved = hasAmbiguities && pendingAmbiguities.length === 0;
  const ambiguitiesLoading = !ambiguities;
  return (
    <Container sx={{ mt: 4, mb: 4 }}>
      <Button startIcon={<ArrowBackIcon />} onClick={() => navigate("/fetch-requests")} sx={{ mb: 2 }}>
        Back to Fetch Requests
      </Button>
      <Paper sx={{ p: 3, borderRadius: 4, mb: 3 }} variant="outlined">
        <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 2, flexWrap: "wrap" }}>
          <Chip
            icon={statusIcons[req.status as FetchRequestStatus] as any}
            label={req.status.replace(/_/g, " ")}
            color={statusColors[req.status as FetchRequestStatus]}
          />
          <Typography variant="h6" fontWeight={600}>{req.account_name}</Typography>
          <Chip
            label={"path" in req.source ? "File" : "Email"}
            size="small"
            variant="outlined"
            color={"path" in req.source ? "primary" : "secondary"}
          />
        </Box>
        <Box sx={{ display: "flex", gap: 4, flexWrap: "wrap", mb: 2 }}>
          <Box>
            <Typography variant="caption" color="text.secondary">Date Range</Typography>
            <Typography variant="body2">
              {(req as any).start_date ? new Date((req as any).start_date).toLocaleDateString() : "?"} → {(req as any).end_date ? new Date((req as any).end_date).toLocaleDateString() : "?"}
            </Typography>
          </Box>
          <Box>
            <Typography variant="caption" color="text.secondary">Created</Typography>
            <Typography variant="body2">{new Date(req.created_at).toLocaleString()}</Typography>
          </Box>
          {req.completed_at && (
            <Box>
              <Typography variant="caption" color="text.secondary">Completed</Typography>
              <Typography variant="body2">{new Date(req.completed_at).toLocaleString()}</Typography>
            </Box>
          )}
        </Box>
        <Box sx={{ mb: 2 }}>
          <Box sx={{ display: "flex", alignItems: "center", gap: 2, mb: 0.5 }}>
            <Typography variant="caption" color="text.secondary">
              Overall Progress
            </Typography>
            {["processing", "paused"].includes(req.status) && displayParsedCount > 0 && (
              <Typography variant="caption" fontWeight={600} color="info.main">
                Validated: {displayParsedCount} transactions
              </Typography>
            )}
          </Box>
          <LinearProgress
            variant="determinate"
            value={progressPercent}
            color={req.status === "failed" ? "error" : req.status === "completed" ? "success" : "primary"}
            sx={{ borderRadius: 1, height: 8, transition: "width 0.3s ease" }}
          />
          <Typography variant="caption" color="text.secondary" sx={{ mt: 0.25, display: "block" }}>
            {progressPercent}%
          </Typography>
        </Box>
        <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
          <Box sx={{ flex: 1, maxWidth: 300 }}>
            <Typography variant="caption" color="text.secondary">
              Retries: {retryCount}/{RETRY_MAX}
            </Typography>
            <LinearProgress
              variant="determinate"
              value={(retryCount / RETRY_MAX) * 100}
              color={isRetryExhausted ? "error" : "primary"}
              sx={{ mt: 0.5, borderRadius: 1, height: 6 }}
            />
          </Box>
          {req.status === "failed" && !isRetryExhausted && (
            <Button
              variant="outlined"
              size="small"
              startIcon={<ReplayIcon />}
              onClick={handleRetry}
              disabled={updateMutation.isPending}
            >
              Retry
            </Button>
          )}
        </Box>
      </Paper>
      {req.status === "failed" && req.error_message && (
        <Alert severity="error" sx={{ mb: 3, borderRadius: 2 }}>
          {req.error_message}
        </Alert>
      )}
      {isRetryExhausted && req.status === "failed" && (
        <Alert severity="info" sx={{ mb: 3, borderRadius: 2 }}>
          Max retries reached — no further retry attempts will be made.
        </Alert>
      )}
      <Paper sx={{ p: 3, borderRadius: 4, mb: 3 }} variant="outlined">
        <Typography variant="subtitle1" fontWeight={600} gutterBottom>
          Pipeline Progress
        </Typography>
        <Stepper activeStep={activeStep} alternativeLabel>
          {stepLabels.map((label, index) => {
            const isCompleted = index < activeStep;
            const isActive = index === activeStep;
            const isPaused = req.status === "paused" && isActive;
            const isFailed = req.status === "failed" && isActive;
            let icon: React.ReactNode;
            if (isCompleted) {
              icon = <CheckCircleIcon sx={{ color: "success.main" }} />;
            } else if (isFailed) {
              icon = <ErrorIcon sx={{ color: "error.main" }} />;
            } else if (isPaused) {
              icon = <WarningAmberIcon sx={{ color: "warning.main" }} />;
            } else if (isActive) {
              icon = <CircularProgress size={20} />;
            } else {
              icon = <Typography variant="caption" color="text.disabled">{index + 1}</Typography>;
            }
            const stepMsg = stepMessages[index];
            return (
              <Step key={label}>
                <StepLabel
                  StepIconComponent={() => <Box sx={{ display: "flex", alignItems: "center" }}>{icon}</Box>}
                >
                  <Typography variant="body2" fontWeight={600}>{label}</Typography>
                  {stepMsg && (
                    <Typography variant="caption" color="text.secondary" sx={{ display: "block", lineHeight: 1.2 }}>
                      {stepMsg}
                    </Typography>
                  )}
                </StepLabel>
              </Step>
            );
          })}
        </Stepper>
      </Paper>
      <Paper sx={{ borderRadius: 4, mb: 3 }} variant="outlined">
        <Box sx={{ display: "flex", alignItems: "center", gap: 1, p: 2, pb: 0 }}>
          <Typography variant="subtitle1" fontWeight={600} sx={{ flex: 1 }}>
            Progress Events
          </Typography>
          <Box
            sx={{
              width: 10,
              height: 10,
              borderRadius: "50%",
              bgcolor: sseConnected ? "success.main" : "error.main",
              flexShrink: 0,
            }}
          />
          <Typography variant="caption" color="text.secondary">
            {sseConnected ? "Connected" : "Disconnected"}
          </Typography>
        </Box>
        <Box
          ref={feedRef}
          sx={{
            maxHeight: 300,
            overflowY: "auto",
            p: 2,
            display: "flex",
            flexDirection: "column",
            gap: 1,
          }}
        >
          {displayEvents.length === 0 ? (
            <Typography variant="body2" color="text.disabled" sx={{ textAlign: "center", py: 2 }}>
              Waiting for events...
            </Typography>
          ) : (
            displayEvents.map((evt, i) => (
              <Box
                key={i}
                sx={{
                  display: "flex",
                  alignItems: "center",
                  gap: 1.5,
                  p: 1,
                  borderRadius: 2,
                  bgcolor: "action.hover",
                }}
              >
                {sseIcon(evt.status)}
                <Box sx={{ flex: 1 }}>
                  <Typography variant="body2" fontWeight={600}>
                    {evt.step.replace(/_/g, " ")}
                  </Typography>
                  {evt.message && formatProgressMessage(evt.message) && (
                    <Typography variant="caption" color="text.secondary">
                      {formatProgressMessage(evt.message)}
                    </Typography>
                  )}
                </Box>
                <Typography variant="caption" color="text.disabled">
                  {new Date().toLocaleTimeString()}
                </Typography>
              </Box>
            ))
          )}
        </Box>
      </Paper>
      {hasAmbiguities && (
        <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>
    )}
    <Snackbar
      open={!!failNotif}
      autoHideDuration={6000}
      onClose={() => setFailNotif(null)}
      anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
    >
      <Alert severity="error" onClose={() => setFailNotif(null)} sx={{ borderRadius: 2 }}>
        {failNotif}
      </Alert>
    </Snackbar>
    </Container>
  );
 }
--- a/src/FetchRequests.tsx
+++ b/src/FetchRequests.tsx
@@ -24,28 +24,14 @@ import {
  DialogContent,
  DialogContentText,
  DialogActions,
  Tooltip,
  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 {
  useFetchRequestsList,
  useCreateFetchRequest,
  useUpdateFetchRequest,
  useDeleteFetchRequest,
  useUploadFile,
 } from "./features/fetch-requests";
@@ -55,49 +41,22 @@ import type {
  FileSource,
  EmailSource,
 } from "./features/fetch-requests";
 import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
 import { useNavigate } from "react-router-dom";
 import { useResourceByName, useConfig } from "../react-openapi";
 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" }} />,
 };
 function formatDate(iso: string) {
  const d = new Date(iso);
  return d.toLocaleString();
 }
 function formatDateRange(start?: string, end?: string) {
  if (!start && !end) return "—";
  const s = start ? new Date(start).toLocaleDateString() : "?";
  const e = end ? new Date(end).toLocaleDateString() : "?";
  return `${s} → ${e}`;
 }
 function shortId(fp: string) {
  return fp.length > 8 ? fp.slice(0, 8) + "…" : 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");
@@ -112,27 +71,8 @@ export default function FetchRequests() {
  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 { data: listData, isLoading, isFetching, refetch } = useFetchRequestsList();
  const [accountFilter, setAccountFilter] = React.useState("");
  const [sourceFilter, setSourceFilter] = React.useState<"all" | "file" | "email">("all");
  const { data: listData, isLoading, isFetching, refetch } = useFetchRequestsList({
    ...(statusFilter.length > 0 ? { status: statusFilter.join(",") } : {}),
    ...(accountFilter ? { account_name: accountFilter } : {}),
    ...(sourceFilter !== "all" ? { source_type: sourceFilter } : {}),
  });
  const { useList: useAccountsList } = useResourceByName("accounts");
  const { data: accountsData } = useAccountsList();
  const accountOptions: string[] = React.useMemo(() => {
    return (accountsData?.data ?? []).map((a: any) => a.name).filter(Boolean);
  }, [accountsData]);
  const config = useConfig();
  const fetchRes = config?.resources.find((r: any) => r.name === "fetch-requests");
  const formatOptions: string[] = (fetchRes?.fields?.source?.schema?.format?.options as string[]) ?? ["axis", "icici"];
  const createMutation = useCreateFetchRequest();
  const updateMutation = useUpdateFetchRequest();
  const deleteMutation = useDeleteFetchRequest();
  const uploadMutation = useUploadFile();
@@ -166,7 +106,7 @@ export default function FetchRequests() {
    }
    try {
-      const result = await createMutation.mutateAsync({
+      await createMutation.mutateAsync({
        source,
        account_name: accountName,
        payor_username: payorUsername,
@@ -175,13 +115,8 @@ export default function FetchRequests() {
      });
      setSnackbar({ message: "Fetch request created", severity: "success" });
      resetForm();
      navigate(`/fetch-requests/${result.id}`);
    } catch (err: any) {
-      if (err?.response?.status === 409) {
+      setSnackbar({ message: err?.response?.data?.detail || "Failed to create fetch request", severity: "error" });
        setSnackbar({ message: "Duplicate — same fingerprint already exists", severity: "error" });
      } else {
        setSnackbar({ message: formatApiError(err) || "Failed to create fetch request", severity: "error" });
      }
    }
  };
@@ -197,15 +132,6 @@ export default function FetchRequests() {
    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 {
@@ -217,8 +143,6 @@ export default function FetchRequests() {
    setDeleteTarget(null);
  };
  const sourceTypeOptions: ("all" | "file" | "email")[] = ["all", "file", "email"];
  return (
    <Container sx={{ mt: 4, mb: 4 }}>
      <Typography variant="h5" fontWeight="bold" gutterBottom>
@@ -265,61 +189,37 @@ export default function FetchRequests() {
                  Uploaded as: {uploadedPath}
                </Alert>
              )}
-              <FormControl size="small">
+              <TextField label="Format (csv, pdf, ...)" value={format} onChange={(e) => setFormat(e.target.value)} 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>
            </>
          ) : (
            <>
-              <FormControl size="small">
+              <TextField label="Format" value={format} onChange={(e) => setFormat(e.target.value)} size="small" helperText="e.g. email, pdf, csv" />
                <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
+          <TextField label="Account Name" value={accountName} onChange={(e) => setAccountName(e.target.value)} size="small" required />
            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" } }}
          />
          <TextField label="Payor Username" value={payorUsername} onChange={(e) => setPayorUsername(e.target.value)} size="small" helperText="Default: aetos" />
          <Box sx={{ display: "flex", gap: 2 }}>
            <TextField
              label="Start Date"
-              type="date"
+              type="datetime-local"
              value={startDate}
              onChange={(e) => setStartDate(e.target.value)}
              size="small"
              InputLabelProps={{ shrink: true }}
              inputProps={{ max: new Date().toISOString().split("T")[0] }}
              sx={{ flex: 1 }}
            />
            <TextField
              label="End Date"
-              type="date"
+              type="datetime-local"
              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>
@@ -334,47 +234,15 @@ export default function FetchRequests() {
        </Box>
      </Paper>
-      <Paper sx={{ borderRadius: 4, mb: 2, p: 2 }} variant="outlined">
+      <Paper sx={{ borderRadius: 4 }} variant="outlined">
-        <Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
+        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, pb: 0 }}>
-          <FormControl size="small" sx={{ minWidth: 200 }}>
+          <Typography variant="subtitle1" fontWeight={600}>
-            <InputLabel>Status</InputLabel>
+            Fetch Requests
-            <Select
+          </Typography>
              multiple
              value={statusFilter}
              onChange={(e) => setStatusFilter(e.target.value as string[])}
              input={<OutlinedInput label="Status" />}
              renderValue={(selected) => (selected as string[]).join(", ")}
            >
              {["pending", "processing", "paused", "raw_expenses_done", "enriched_done", "completed", "failed"].map((s) => (
                <MenuItem key={s} value={s}>{s.replace(/_/g, " ")}</MenuItem>
              ))}
            </Select>
          </FormControl>
          <TextField
            label="Account"
            value={accountFilter}
            onChange={(e) => setAccountFilter(e.target.value)}
            size="small"
            sx={{ minWidth: 160 }}
          />
          <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 }}>
@@ -385,37 +253,27 @@ export default function FetchRequests() {
            No fetch requests yet
          </Box>
        ) : (
-        <TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 4 }}>
+          <TableContainer>
            <Table size="small">
              <TableHead>
                <TableRow>
-                <TableCell>ID</TableCell>
+                  <TableCell>Fingerprint</TableCell>
                <TableCell>Account</TableCell>
                  <TableCell>Source</TableCell>
-                <TableCell>Date Range</TableCell>
+                  <TableCell>Account</TableCell>
                  <TableCell>Status</TableCell>
                <TableCell>Retries</TableCell>
                  <TableCell>Created</TableCell>
                  <TableCell align="right">Actions</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
-              {[...requests]
+                {requests.map((req: FetchRequest) => (
-                .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+                  <TableRow key={req.id}>
                .map((req: FetchRequest) => (
                <TableRow
                  key={req.id}
                  hover
                  onClick={() => navigate(`/fetch-requests/${req.id}`)}
                  sx={{ cursor: "pointer", "&:last-child td": { border: 0 } }}
                >
                    <TableCell sx={{ fontFamily: "monospace", fontSize: "0.8rem" }}>
                      <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
-                      {shortId(req.fingerprint)}
+                        {req.fingerprint}
                        <IconButton
                          size="small"
-                        onClick={(e) => {
+                          onClick={() => {
                          e.stopPropagation();
                            navigator.clipboard.writeText(req.fingerprint);
                            setSnackbar({ message: "Copied!", severity: "success" });
                          }}
@@ -425,86 +283,22 @@ export default function FetchRequests() {
                        </IconButton>
                      </Box>
                    </TableCell>
                    <TableCell>
                      {"path" in req.source ? "File" : "Email"}
                    </TableCell>
                    <TableCell>{req.account_name}</TableCell>
                    <TableCell>
                      <Chip
                      label={"path" in req.source ? "File" : "Email"}
                      size="small"
                      variant="outlined"
                      color={"path" in req.source ? "primary" : "secondary"}
                    />
                  </TableCell>
                  <TableCell>
                    <Typography variant="body2" sx={{ fontSize: "0.8rem", whiteSpace: "nowrap" }}>
                      {formatDateRange((req as any).start_date, (req as any).end_date)}
                    </Typography>
                  </TableCell>
                  <TableCell>
                    <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>
                  </TableCell>
                  <TableCell>
                    {(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" }}>
                        —
                      </Typography>
                    )}
                  </TableCell>
                  <TableCell sx={{ whiteSpace: "nowrap", fontSize: "0.8rem" }}>
                    {formatDate(req.created_at)}
                    </TableCell>
                    <TableCell>{formatDate(req.created_at)}</TableCell>
                    <TableCell align="right">
-                    <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
+                      <IconButton size="small" onClick={() => setDeleteTarget(req)}>
                      {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>
                    </TableCell>
                  </TableRow>
                ))}
@@ -512,6 +306,7 @@ export default function FetchRequests() {
            </Table>
          </TableContainer>
        )}
      </Paper>
      <Snackbar
        open={!!snackbar}
--- a/src/features/fetch-requests/fetch-requests.models.ts
+++ b/src/features/fetch-requests/fetch-requests.models.ts
@@ -1,20 +1,8 @@
-export type FetchRequestStatus =
+export type FetchRequestStatus = "pending" | "processing" | "raw_expenses_done" | "enriched_done" | "completed" | "failed";
  | "pending"
  | "processing"
  | "paused"
  | "raw_expenses_done"
  | "enriched_done"
  | "completed"
  | "failed";
 export interface FileSource {
  path: string;
  format: string;
  raw_lines?: string[];
  txn_blocks?: Record<string, any>;
  txn_dicts?: Record<string, any>[];
  txn_dict_count?: number;
  txn_dicts_count?: number;
 }
 export interface EmailSource {
@@ -22,8 +10,6 @@ export interface EmailSource {
  from_email?: string;
  subject?: string;
  raw_terms?: string[];
  txn_dict_count?: number;
  txn_dicts_count?: number;
 }
 export interface FetchRequestCreate {
@@ -34,18 +20,12 @@ export interface FetchRequestCreate {
  end_date?: string;
 }
 export interface FetchRequestUpdate {
  status?: FetchRequestStatus;
  error_message?: string | null;
 }
 export interface FetchRequest extends FetchRequestCreate {
  id: string;
  status: FetchRequestStatus;
  fingerprint: string;
  completed_at?: string | null;
  error_message?: string | null;
  retry_count?: number;
  created_at: string;
 }
@@ -56,78 +36,3 @@ export interface UploadResult {
  url: string;
  absolute_path: string;
 }
 export interface AmbiguityCandidate {
  amount: number;
  balance: number;
 }
 export interface PendingAmbiguity {
  id: string;
  fetch_request: string;
  step_index?: number;
  line: string;
  ocr_amount: number;
  ocr_balance: number;
  prev_balance: number;
  candidates: AmbiguityCandidate[];
  chosen?: AmbiguityCandidate | null;
  resolved_at?: string | null;
  status: "pending" | "resolved";
  created_at: string;
 }
 export interface ResolveAmbiguityPayload {
  chosen: {
    amount: number;
    balance: number;
  };
 }
 export type SSEEventStep =
  | "load_content" | "raw_lines" | "txn_blocks" | "txn_dicts"
  | "resume_extract" | "extract" | "paused" | "complete" | "enrich"
  | "save_expenses" | "pipeline";
 export type SSEEventStatus =
  | "started" | "completed" | "skipped" | "paused" | "progress" | "failed";
 export interface ProgressMessage {
  lines?: number;
  blocks?: number;
  count?: number;
  unit?: string;
  raw_ocr_line?: string;
  error?: string;
 }
 export interface SSEEvent {
  step: SSEEventStep;
  status: SSEEventStatus;
  message: ProgressMessage;
 }
 export interface FetchRequestFilters {
  status?: FetchRequestStatus[];
  account_name?: string;
  source_type?: "file" | "email";
 }
 export function formatApiError(err: any): string {
  if (!err?.response) return err?.message || "Request failed";
  const data = err.response.data;
  const status = err.response.status;
  if (status === 422 && Array.isArray(data?.detail)) {
    return data.detail.map((d: any) => {
      const field = d.loc?.filter((s: string) => s !== "body").pop() || "field";
      if (d.type === "value_error.missing") return `Missing: ${field}`;
      return `${field}: ${d.msg}`;
    }).join("; ");
  }
  if (typeof data?.detail === "string") return data.detail;
  return `Request failed (${status})`;
 }
 export const RETRY_MAX = 3;
--- a/src/features/fetch-requests/index.ts
+++ b/src/features/fetch-requests/index.ts
@@ -1,28 +1,15 @@
 export type {
  FetchRequest,
  FetchRequestCreate,
  FetchRequestUpdate,
  FetchRequestStatus,
  FetchRequestFilters,
  FileSource,
  EmailSource,
  UploadResult,
  PendingAmbiguity,
  AmbiguityCandidate,
  ResolveAmbiguityPayload,
  SSEEvent,
  SSEEventStep,
  SSEEventStatus,
  ProgressMessage,
 } from "./fetch-requests.models";
 export { RETRY_MAX, formatApiError } from "./fetch-requests.models";
 export {
  useFetchRequestsList,
  useFetchRequest,
  useCreateFetchRequest,
  useUpdateFetchRequest,
  useDeleteFetchRequest,
  useUploadFile,
  useFetchRequestAmbiguities,
  useResolveAmbiguity,
 } from "./useFetchRequests";
--- a/src/features/fetch-requests/useFetchRequests.ts
+++ b/src/features/fetch-requests/useFetchRequests.ts
@@ -1,7 +1,6 @@
 import { useResourceByName } from "../../../react-openapi";
 import { api } from "../../../react-openapi/api/client";
-import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation } from "@tanstack/react-query";
 import type { ResolveAmbiguityPayload } from "./fetch-requests.models";
 export function useFetchRequestsList(params?: {
  status?: string;
@@ -22,11 +21,6 @@ export function useCreateFetchRequest() {
  return useCreate();
 }
 export function useUpdateFetchRequest() {
  const { usePatch } = useResourceByName("fetch-requests");
  return usePatch();
 }
 export function useDeleteFetchRequest() {
  const { useDelete } = useResourceByName("fetch-requests");
  return useDelete();
@@ -47,44 +41,3 @@ export function useUploadFile() {
    },
  });
 }
 export function useFetchRequestAmbiguities(fetchRequestId: string) {
  return useQuery({
    queryKey: ["fetch-requests", fetchRequestId, "ambiguities"],
    queryFn: async () => {
      const res = await api.get(
        `/fetch-requests/${fetchRequestId}/ambiguities`
      );
      return res.data;
    },
    enabled: !!fetchRequestId,
  });
 }
 export function useResolveAmbiguity() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: async ({
      ambiguityId,
      payload,
    }: {
      ambiguityId: string;
      payload: ResolveAmbiguityPayload;
    }) => {
      const res = await api.post(
        `/ambiguities/${ambiguityId}/resolve`,
        payload
      );
      return res.data;
    },
    onSuccess: (data: any) => {
      queryClient.invalidateQueries({
        queryKey: ["fetch-requests", data.fetch_request, "ambiguities"],
      });
      queryClient.invalidateQueries({
        queryKey: ["fetch-requests", "detail", data.fetch_request],
      });
    },
  });
 }
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -13,7 +13,6 @@ import {
 import Home from './Home';
 import Dashboard from './Dashboard';
 import FetchRequests from './FetchRequests';
 import FetchRequestDetail from './FetchRequestDetail';
 import ReportSnapshots from './ReportSnapshots';
 import { Admin, AppProvider } from '../react-openapi';
 import { configuration, profileConfiguration } from './openapi-config';
@@ -37,7 +36,6 @@ const routerMapping = [
  { path: "/home", component: Home, headerTitle: "Home" },
  { path: "/dashboard", component: Dashboard, headerTitle: "Dashboard" },
  { path: "/fetch-requests", component: FetchRequests, headerTitle: "Fetch Requests" },
  { path: "/fetch-requests/:id", component: FetchRequestDetail, headerTitle: "Fetch Request" },
  { path: "/reports", component: ReportSnapshots, headerTitle: "Reports" },
  { path: "/admin/*", component: Admin, headerTitle: "Admin" },
 ];
--- a/src/openapi-config.ts
+++ b/src/openapi-config.ts
@@ -50,18 +50,6 @@ export const configuration: Record<string, ResourceOverride> = {
      }
    },
  },
  accounts: {
    enumOption: {
      key: 'id',
      value: ['name', 'number']
    }
  },
  tags: {
    enumOption: {
      key: 'id',
      value: ['icon', 'name']
    }
  },
 };
 export const profileConfiguration = {
Author	SHA1	Message	Date
Vishesh 'ironeagle' Bangotra	d8c6c3cdb3	added favicon	2026-05-24 16:02:36 +05:30
Vishesh 'ironeagle' Bangotra	8f57bd1745	ignoreSelf default true	2026-05-24 15:58:14 +05:30
Vishesh 'ironeagle' Bangotra	44c42892d8	copy ids	2026-05-24 15:57:32 +05:30
Vishesh 'ironeagle' Bangotra	7de8914283	mobile view 1 filter per line fix	2026-05-24 14:51:59 +05:30
Vishesh 'ironeagle' Bangotra	d767cf0a23	toggleDropdown for chip to open and close, limiting tag chars	2026-05-24 14:48:23 +05:30
Vishesh 'ironeagle' Bangotra	6fe70496c0	clicking on ships open dropdown not expand chips	2026-05-24 14:39:35 +05:30
Vishesh 'ironeagle' Bangotra	fa32ab17de	sorted options only when selecting again	2026-05-24 14:35:39 +05:30
Vishesh 'ironeagle' Bangotra	a8f5789c03	smarter multiselect	2026-05-24 14:21:07 +05:30
Vishesh 'ironeagle' Bangotra	e1b8f4e0c3	Admin filter fixes	2026-05-24 14:09:41 +05:30
Vishesh 'ironeagle' Bangotra	6fc24001a7	Snapshot Selector fixes	2026-05-24 14:06:20 +05:30
Vishesh 'ironeagle' Bangotra	6803fb6b56	multi auto complete	2026-05-24 13:58:00 +05:30
Vishesh 'ironeagle' Bangotra	4a3428ed8f	fixes for mobile view broken	2026-05-24 13:52:34 +05:30
Vishesh 'ironeagle' Bangotra	170769c317	fixes	2026-05-24 01:36:08 +05:30
Vishesh 'ironeagle' Bangotra	653c8caecf	fixes	2026-05-24 01:34:52 +05:30
Vishesh 'ironeagle' Bangotra	a3970d6a7b	filter in config and fixes	2026-05-24 01:21:51 +05:30
Vishesh 'ironeagle' Bangotra	7ab5ce74b3	filter in admin	2026-05-24 00:59:33 +05:30
Vishesh 'ironeagle' Bangotra	3a72985efb	home changes for new routes	2026-05-23 22:18:18 +05:30
Vishesh 'ironeagle' Bangotra	220c84776f	fetch requests and reports routes	2026-05-23 21:48:39 +05:30
Vishesh 'ironeagle' Bangotra	cccb4604fd	fixes for latest openapi spec changes	2026-05-23 17:22:30 +05:30