openapi-spec-reader (#10 )

### Summary of Changes: 1. **Spec-Driven Enums**: - Updated `openapi_loader.ts` to collect all standalone enum schemas (e.g., `FetchRequestStatus`) into the `AppConfig.enums` map. - Implemented `mergeProperties` and `oneOf`/`anyOf` resolution in `openapi_loader.ts` to ensure complex schemas like `FetchRequest` (using `allOf`) and `source` (using `oneOf`) are correctly parsed. 2. **Customizable Labeling**: - Added `enumOption` (template-based) and `enumLabels` (mapping-based) to the config and field types. - Implemented `resolveTemplate` in `utils/options.ts` to handle placeholders like `'{name} {number}'` or plain field names. 3. **UI Integration**: - **`FormField.tsx`**: Updated relation and enum selects to use `getFieldOptions()` for correct key/value pairs and labels. Added value normalization to extract keys from API objects. - **`EnhancedTable.tsx`**: Updated `valueOptions` to use key/value pairs for `singleSelect` and updated `FieldRenderer` to show the human-readable label for enums. - **`FilterBar.tsx`**: Updated `extractOptions` to use spec-driven labels for enum filters. - **`ResourceView.tsx`**: Centralized filter matching logic into a `getDisplayString` helper, ensuring filter comparisons use the same templates as the UI labels. 4. **App Fixes**: - `FetchRequests.tsx` and `FetchRequestDetail.tsx` now derive status and format options from the OpenAPI spec via `useConfig()` instead of using hardcoded arrays. Reviewed-on: #10 Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com> Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
icici not icici_ocr
2026-06-04 17:23:44 +00:00 · 2026-06-03 19:01:38 +05:30 · 2026-05-31 09:28:26 +00:00
13 changed files with 474 additions and 139 deletions
--- a/react-openapi/components/EnhancedTable.tsx
+++ b/react-openapi/components/EnhancedTable.tsx
@@ -31,6 +31,7 @@ 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, resolveTemplate } from '../utils/options';

 interface EnhancedTableProps {
  config: ResourceConfig;
@@ -95,9 +96,8 @@ export default function EnhancedTable({
        };
      }

-      if (muiType === 'singleSelect' && field.options) {
-        // @ts-ignore
-        col.valueOptions = field.options;
+      if (muiType === 'singleSelect') {
+        col.valueOptions = toGridValueOptions(getFieldOptions(field));
      }

      return col;
@@ -274,8 +274,9 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
    );
 }

-function getFormattedDisplayValue(item: any, displayField?: string | string[]) {
+function getFormattedDisplayValue(item: any, displayField?: string | string[], enumValue?: string) {
    if (!item) return "";
+    if (enumValue) return resolveTemplate(enumValue, item);
    if (!displayField) return item.name || item.title || item.label || item.id || JSON.stringify(item);

    if (Array.isArray(displayField)) {
@@ -297,7 +298,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
    // 1. Single Relation
    if (field.relation && value && !Array.isArray(value)) {
        const relationId = typeof value === 'object' ? (value.id || value._id || value.pk) : value;
-        const displayValue = getFormattedDisplayValue(value, field.displayField);
+        const displayValue = getFormattedDisplayValue(value, field.displayField, field.enumOption?.value);
        
        return (
            <Chip 
@@ -316,7 +317,8 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,

    // 2. Multi-Select (Array of relations or simple strings)
    if (field.type === 'array' && Array.isArray(value)) {
-        const tooltipTitle = value.map((item) => getFormattedDisplayValue(item, field.displayField)).join(', ');
+        const enumValue = field.enumOption?.value;
+        const tooltipTitle = value.map((item) => getFormattedDisplayValue(item, field.displayField, enumValue)).join(', ');

        return (
            <Tooltip title={tooltipTitle} arrow placement="top">
@@ -324,7 +326,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
                    {value.map((item, idx) => (
                        <Chip
                            key={idx}
-                            label={getFormattedDisplayValue(item, field.displayField)}
+                            label={getFormattedDisplayValue(item, field.displayField, enumValue)}
                            size="small"
                            variant="filled"
                            sx={{ maxWidth: 120 }}
@@ -344,7 +346,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,

    // 3. Simple Objects
    if (field.type === 'object' && value) {
-        return getFormattedDisplayValue(value, field.displayField) || (isMobile ? 'Object' : JSON.stringify(value));
+        return getFormattedDisplayValue(value, field.displayField, field.enumOption?.value) || (isMobile ? 'Object' : JSON.stringify(value));
    }

    if (field.type === 'number' && typeof value === 'number') {
@@ -379,6 +381,11 @@ 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') {
+      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,6 +11,7 @@ import {
 import DoneIcon from "@mui/icons-material/Done";
 import FilterListIcon from "@mui/icons-material/FilterList";
 import { ResourceField, ResourceMode } from "../types/config";
+import { getFieldOptions, resolveTemplate } from "../utils/options";

 function FilterAutocomplete({
  options,
@@ -110,7 +111,9 @@ function extractOptions(
 ): string[] {
  const values = new Set<string>();

-  if (field.options) return field.options;
+  if (field.type === 'enum') {
+    return getFieldOptions(field).map(o => o.value);
+  }
  if (!data) return [];

  const pull = (item: any): string | null => {
@@ -118,18 +121,18 @@ function extractOptions(
    if (typeof item === "string") return item;
    if (typeof item !== "object") return String(item);

+    if (field.enumOption?.value) return resolveTemplate(field.enumOption.value, item);
+
    const df = field.displayField;
-    if (!df) { debugger; return null; }
+    if (!df) return null;

    if (Array.isArray(df)) {
      const parts = df.map((k) => item[k]).filter((v) => v != null);
      if (parts.length > 0) return parts.join(" ");
-    } else {
+    }
    const v = item[df];
    if (v != null) return String(v);
-    }

-    debugger;
    return null;
  };

--- a/react-openapi/components/ResourceView.tsx
+++ b/react-openapi/components/ResourceView.tsx
@@ -3,6 +3,7 @@ import { Box, Paper, CircularProgress } from '@mui/material';
 import { ResourceConfig } from '../types/config';
 import type { ResourceField } from '../types/config';
 import { useResource } from '../hooks/useResource';
+import { resolveTemplate } from '../utils/options';
 import GenericForm from './GenericForm';
 import EnhancedTable from './EnhancedTable';
 import FilterBar from './FilterBar';
@@ -15,11 +16,16 @@ interface ResourceViewProps {

 import { GridPaginationModel } from '@mui/x-data-grid';

-function getFilterDisplayFields(field: ResourceField): string[] {
-  if (!field.displayField) return [];
-  return (Array.isArray(field.displayField) ? field.displayField : [field.displayField]).filter(
-    (df): df is string => !!df
-  );
+function getDisplayString(item: any, field: ResourceField): string {
+  if (item == null || typeof item !== 'object') return String(item ?? '');
+  if (field.enumOption?.value) return resolveTemplate(field.enumOption.value, item);
+  const df = field.displayField;
+  if (!df) return item.name ?? item.title ?? item.label ?? item.id ?? JSON.stringify(item);
+  if (Array.isArray(df)) {
+    const parts = df.map((k: string) => item[k]).filter((v: any) => v != null);
+    return parts.length > 0 ? parts.join(' ') : '';
+  }
+  return String(item[df] ?? '');
 }

 function applyClientFilters(
@@ -59,18 +65,12 @@ function applyClientFilters(

      if (Array.isArray(filterValue)) {
        if (field.type === "array" && Array.isArray(itemValue)) {
-          return itemValue.some((el: any) => {
-            if (el != null && typeof el === "object") {
-              const dispFields = getFilterDisplayFields(field);
-              return dispFields.some((df) => filterValue.includes(String(el[df])));
-            }
-            return filterValue.includes(String(el));
-          });
+          return itemValue.some((el: any) =>
+            filterValue.includes(getDisplayString(el, field))
+          );
        }
        if (itemValue && typeof itemValue === "object") {
-          const dispFields = getFilterDisplayFields(field);
-          const itemDisplay = dispFields.map((df) => itemValue[df]).filter((v) => v != null).join(" ");
-          return filterValue.includes(itemDisplay);
+          return filterValue.includes(getDisplayString(itemValue, field));
        }
        return filterValue.includes(String(itemValue));
      }
@@ -82,18 +82,13 @@ function applyClientFilters(
      }

      if (field.type === "array" && Array.isArray(itemValue)) {
-        return itemValue.some((el: any) => {
-          if (el != null && typeof el === "object") {
-            const dispFields = getFilterDisplayFields(field);
-            return dispFields.some((df) => String(el[df]) === String(filterValue));
-          }
-          return String(el) === String(filterValue);
-        });
+        return itemValue.some((el: any) =>
+          getDisplayString(el, field) === String(filterValue)
+        );
      }

      if (itemValue && typeof itemValue === "object") {
-        const dispFields = getFilterDisplayFields(field);
-        return dispFields.some((df) => String(itemValue[df]) === String(filterValue));
+        return getDisplayString(itemValue, field) === String(filterValue);
      }

      return String(itemValue) === String(filterValue);
--- a/react-openapi/components/fields/FormField.tsx
+++ b/react-openapi/components/fields/FormField.tsx
@@ -12,6 +12,7 @@ import {
  Divider,
 } from '@mui/material';
 import { ResourceField } from '../../types/config';
+import { getFieldOptions } from '../../utils/options';
 import ImageUploadField from './ImageUploadField';

 interface FormFieldProps {
@@ -73,40 +74,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';

-    // Determine how to display the related item
-    const getOptionLabel = (option: any) => {
-        if (!option) return "";
-        if (field.displayField && option[field.displayField]) return option[field.displayField];
-        // Standard naming fields
-        return option.name || option.title || option.label || option.id || JSON.stringify(option);
-    };
-
-    const getOptionValue = (option: any) => {
-        // Return the whole object to maintain identity
-        return option;
-    };
+    // Normalize value: API returns whole objects on GET, but form uses key strings
+    const normalizedValue = (() => {
+      if (isArrayRelation && Array.isArray(value)) {
+        return value.map((v: any) => (v != null && typeof v === 'object' ? String(v[keyField] ?? '') : String(v)));
+      }
+      if (value != null && typeof value === 'object') {
+        return String(value[keyField] ?? '');
+      }
+      return value ?? (isArrayRelation ? [] : "");
+    })();

    return (
      <FormControl fullWidth>
        <InputLabel shrink>{label}</InputLabel>
        <Select
          multiple={isArrayRelation}
-          value={value || (isArrayRelation ? [] : "")}
+          value={normalizedValue}
          label={label}
          displayEmpty
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled}
          renderValue={(selected: any) => {
            if (isArrayRelation) {
-              return (selected as any[]).map(getOptionLabel).join(', ');
+              return (selected as string[]).map(k => options.find(o => o.key === k)?.value ?? k).join(', ');
            }
-            return getOptionLabel(selected);
+            return options.find(o => o.key === selected)?.value ?? selected;
          }}
        >
-          {relationData.map((option) => (
-            <MenuItem key={option.id || JSON.stringify(option)} value={getOptionValue(option)}>
-              {getOptionLabel(option)}
+          {options.map((opt) => (
+            <MenuItem key={opt.key} value={opt.key}>
+              {opt.value}
            </MenuItem>
          ))}
        </Select>
@@ -148,7 +149,8 @@ export default function FormField({
  }

  // 5. Enum Handling
-  if (field.type === 'enum' && field.options) {
+  if (field.type === 'enum') {
+    const options = getFieldOptions(field);
    return (
      <FormControl fullWidth>
        <InputLabel>{label}</InputLabel>
@@ -158,9 +160,9 @@ export default function FormField({
          onChange={(e) => onChange(e.target.value)}
          disabled={disabled}
        >
-          {field.options.map((opt: string) => (
-            <MenuItem key={opt} value={opt}>
-              {opt}
+          {options.map((opt) => (
+            <MenuItem key={opt.key} value={opt.key}>
+              {opt.value}
            </MenuItem>
          ))}
        </Select>
--- a/react-openapi/types/config.ts
+++ b/react-openapi/types/config.ts
@@ -10,6 +10,16 @@ export type FieldType =
  | 'object'
  | 'array';

+export interface SelectOption {
+  key: string;
+  value: string;
+}
+
+export interface EnumOption {
+  key: string;
+  value: string;
+}
+
 export interface ResourceField {
  type: FieldType;
  label: string;
@@ -19,8 +29,10 @@ export interface ResourceField {
  schema?: Record<string, ResourceField>;
  displayField?: string | string[];
  formatter?: (value: any) => string;
-  relation?: string; // Name of the target resource
+  relation?: string;
  filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
+  enumOption?: EnumOption;
+  enumLabels?: Record<string, string>;
 }

 export type ResourceMode = "server" | "client";
@@ -38,12 +50,14 @@ export interface ResourceConfig {
    mode?: ResourceMode;
    fields?: string[];
  };
+  enumOption?: EnumOption;
 }

 export interface AppConfig {
  baseUrl: string;
  authBaseUrl: string;
  resources: ResourceConfig[];
+  enums: Record<string, string[]>;
  profile?: {
    resource: string;
    extraFields?: Record<string, any>;
--- a/react-openapi/types/overrides.ts
+++ b/react-openapi/types/overrides.ts
@@ -1,13 +1,14 @@
-/**
- * This file contains application-specific overrides and configuration
- * for the generic Admin Panel.
- */
+export interface EnumOption {
+  key: string;
+  value: string;
+}

 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 {
@@ -18,4 +19,5 @@ export interface ResourceOverride {
    mode?: "server" | "client";
    fields?: string[];
  };
+  enumOption?: EnumOption;
 }
--- a/react-openapi/utils/openapi_loader.ts
+++ b/react-openapi/utils/openapi_loader.ts
@@ -36,6 +36,26 @@ function mapOpenApiType(prop: any): FieldType {
 /**
 * Recursively converts OpenAPI schemas to ResourceField map
 */
+function mergeProperties(schema: any): { properties: Record<string, any>; required: string[] } {
+  let properties: Record<string, any> = {};
+  let required: string[] = [];
+
+  if (schema.allOf) {
+    for (const sub of schema.allOf) {
+      const merged = mergeProperties(sub);
+      properties = { ...properties, ...merged.properties };
+      required = [...required, ...merged.required];
+    }
+  }
+  if (schema.properties) {
+    properties = { ...properties, ...schema.properties };
+  }
+  if (schema.required) {
+    required = [...required, ...schema.required];
+  }
+  return { properties, required };
+}
+
 function parseSchemaFields(
  schema: any,
  resourceName: string,
@@ -43,12 +63,19 @@ function parseSchemaFields(
  configuration: Record<string, any> = {}
 ): Record<string, ResourceField> {
  const fields: Record<string, ResourceField> = {};
-  const properties = schema.properties || {};
-  const required = schema.required || [];
+  const { properties, required } = mergeProperties(schema);
  const overrides = configuration[resourceName]?.fields || {};

  for (const [key, prop] of Object.entries(properties) as [string, any]) {
-    const type = mapOpenApiType(prop);
+    // Resolve oneOf/anyOf by merging all branch properties
+    let resolvedProp = prop;
+    if (prop.oneOf || prop.anyOf) {
+      const branches = prop.oneOf || prop.anyOf;
+      const merged = mergeProperties({ allOf: branches });
+      resolvedProp = { ...prop, type: 'object', properties: merged.properties, required: merged.required };
+    }
+
+    const type = mapOpenApiType(resolvedProp);
    const override = overrides[key];

    // Explicitly skip 'id' as it's the primary key and handled elsewhere
@@ -57,12 +84,12 @@ function parseSchemaFields(
    fields[key] = {
      type,
      label:
-        prop.title ||
+        resolvedProp.title ||
        key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, " "),
      required: required.includes(key),
-      options: prop.enum,
+      options: resolvedProp.enum,
      readOnly:
-        prop.readOnly ||
+        resolvedProp.readOnly ||
        key === "created_at" ||
        key === "updated_at",
      ...override,
@@ -71,20 +98,35 @@ function parseSchemaFields(
    // STRICT RELATION DETECTION
    // A field is a relation ONLY if its schema object (or items schema) 
    // exactly matches a schema that is defined as a resource.
-    let targetSchema = prop;
-    if (type === "array" && prop.items) {
-      targetSchema = prop.items;
+    let targetSchema = resolvedProp;
+    if (type === "array" && resolvedProp.items) {
+      targetSchema = resolvedProp.items;
    }

    // Check if this schema object is registered as a resource
    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)
-    if (fields[key].type === "object" && prop.properties && !relation) {
-      fields[key].schema = parseSchemaFields(prop, resourceName, schemaToResourceMap, configuration);
+    if (fields[key].type === "object" && resolvedProp.properties && !relation) {
+      fields[key].schema = parseSchemaFields(resolvedProp, resourceName, schemaToResourceMap, configuration);
    }
  }

@@ -172,6 +214,16 @@ export async function loadConfigFromOpenApi(baseUrl: string, configuration: Reco
    });
  }

+  // Collect standalone enum schemas (e.g. FetchRequestStatus, AccountType, etc.)
+  const enums: Record<string, string[]> = {};
+  if (api.components?.schemas) {
+    for (const [name, schema] of Object.entries(api.components.schemas) as [string, any]) {
+      if (schema.enum) {
+        enums[name] = schema.enum;
+      }
+    }
+  }
+
  // @ts-ignore
  const serverBaseUrl = import.meta.env.VITE_API_BASE_URL || (api.servers?.[0]?.url ?? "")
  // @ts-ignore
@@ -180,6 +232,7 @@ export async function loadConfigFromOpenApi(baseUrl: string, configuration: Reco
    baseUrl: serverBaseUrl,
    authBaseUrl: authBaseUrl,
    resources,
+    enums,
    profile: profileConfiguration,
  };
 }
--- a/react-openapi/utils/options.ts
+++ b/react-openapi/utils/options.ts
@@ -0,0 +1,33 @@
+import { ResourceField, SelectOption } from "../types/config";
+
+export function resolveTemplate(template: string, item: any): string {
+  if (/\{(\w+)\}/.test(template)) {
+    return template.replace(/\{(\w+)\}/g, (_, field: string) => String(item[field] ?? ''));
+  }
+  return String(item[template] ?? '');
+}
+
+export function getFieldOptions(field: ResourceField, relationData?: any[]): SelectOption[] {
+  if (field.type === 'enum') {
+    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: resolveTemplate(enumOption.value, item),
+    }));
+  }
+
+  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
@@ -15,6 +15,7 @@ import {
  StepIcon,
  LinearProgress,
  IconButton,
+  Snackbar,
 } from "@mui/material";
 import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 import ReplayIcon from "@mui/icons-material/Replay";
@@ -22,6 +23,8 @@ 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,
@@ -31,8 +34,9 @@ import {
 import type {
  FetchRequestStatus,
  SSEEvent,
+  ProgressMessage,
 } from "./features/fetch-requests";
-import { RETRY_MAX } 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"> = {
@@ -55,26 +59,78 @@ const statusIcons: Record<FetchRequestStatus, React.ReactNode> = {
  failed: <ErrorIcon sx={{ fontSize: 16 }} />,
 };

-const stepLabels = ["Load Content", "Extract", "Enrich", "Save"];
+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;

-function statusToActiveStep(status: FetchRequestStatus): number {
-  switch (status) {
-    case "pending": return -1;
-    case "processing": return 0;
-    case "paused": return 1;
-    case "raw_expenses_done": return 2;
-    case "enriched_done": return 3;
-    case "completed": return 4;
-    case "failed": return 0;
-    default: return -1;
+  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" }}
+      />
+    );
  }
 }

@@ -97,37 +153,45 @@ export default function FetchRequestDetail() {
  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;

-    if (source?.raw_lines?.length)
-      msgs[0] = `${source.raw_lines.length} raw lines`;
+    const rawLineCount = stepStats.raw_lines ?? (source?.raw_lines?.length ?? 0);
+    if (rawLineCount) msgs[0] = `${rawLineCount}`;

-    const blocks = source?.txn_blocks ?? {};
-    const dicts = source?.txn_dicts ?? [];
-    const blockCount = typeof blocks === "object"
-      ? Object.keys(blocks).length : Array.isArray(blocks) ? blocks.length : 0;
-    if (blockCount || dicts.length) {
-      const parts: string[] = [];
-      if (blockCount) parts.push(`${blockCount} blocks`);
-      if (dicts.length) parts.push(`${dicts.length} dicts`);
-      msgs[1] = parts.join(" · ");
-    }
+    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}`;

-    if (["enriched_done", "completed"].includes((fetchRequest as any)?.status))
-      msgs[2] = "done";
-    if ((fetchRequest as any)?.status === "completed")
-      msgs[3] = (fetchRequest as any)?.completed_at
-        ? new Date((fetchRequest as any).completed_at).toLocaleString() : "done";
+    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]);
-
-  const [sseEvents, setSseEvents] = React.useState<SSEEvent[]>([]);
-  const [sseConnected, setSseConnected] = React.useState(false);
-  const sseRef = React.useRef<EventSource | null>(null);
-  const feedRef = React.useRef<HTMLDivElement>(null);
+  }, [fetchRequest, stepStats, liveParsedCount, txnBlockCount]);

  React.useEffect(() => {
    if (!id || !config?.baseUrl) return;
@@ -141,10 +205,36 @@ export default function FetchRequestDetail() {
      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
      }
@@ -162,12 +252,74 @@ export default function FetchRequestDetail() {
    }
  }, [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 {
-      // handled by react query
+    } catch (err: any) {
+      setFailNotif(formatApiError(err));
    }
  };

@@ -199,7 +351,7 @@ export default function FetchRequestDetail() {
  }

  const req = fetchRequest as any;
-  const activeStep = statusToActiveStep(req.status);
+  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") ?? [];
@@ -249,6 +401,28 @@ export default function FetchRequestDetail() {
          )}
        </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">
@@ -360,12 +534,12 @@ export default function FetchRequestDetail() {
            gap: 1,
          }}
        >
-          {sseEvents.length === 0 ? (
+          {displayEvents.length === 0 ? (
            <Typography variant="body2" color="text.disabled" sx={{ textAlign: "center", py: 2 }}>
              Waiting for events...
            </Typography>
          ) : (
-            sseEvents.map((evt, i) => (
+            displayEvents.map((evt, i) => (
              <Box
                key={i}
                sx={{
@@ -382,9 +556,9 @@ export default function FetchRequestDetail() {
                  <Typography variant="body2" fontWeight={600}>
                    {evt.step.replace(/_/g, " ")}
                  </Typography>
-                  {evt.message && (
+                  {evt.message && formatProgressMessage(evt.message) && (
                    <Typography variant="caption" color="text.secondary">
-                      {evt.message}
+                      {formatProgressMessage(evt.message)}
                    </Typography>
                  )}
                </Box>
@@ -397,32 +571,22 @@ export default function FetchRequestDetail() {
        </Box>
      </Paper>

-      {(hasAmbiguities || req.status === "paused") && (
+      {hasAmbiguities && (
        <Paper sx={{ p: 3, borderRadius: 4, mb: 3 }} variant="outlined">
          <Typography variant="subtitle1" fontWeight={600} gutterBottom>
            Ambiguity Resolution
          </Typography>

-          {ambiguitiesLoading ? (
-            <Box sx={{ display: "flex", alignItems: "center", gap: 1, py: 2 }}>
-              <CircularProgress size={16} />
-              <Typography variant="body2" color="text.secondary">Loading ambiguities...</Typography>
-            </Box>
-          ) : allResolved ? (
+          {allResolved ? (
            <Alert severity="success" sx={{ mb: 2, borderRadius: 2 }}>
              All ambiguities resolved — pipeline will resume on next poll cycle
            </Alert>
-          ) : !hasAmbiguities ? (
-            <Alert severity="info" sx={{ mb: 2, borderRadius: 2 }}>
-              Pipeline paused — no ambiguities found
-            </Alert>
          ) : (
            <Alert severity="warning" sx={{ mb: 2, borderRadius: 2 }}>
              Pipeline paused — resolve ambiguities to continue
            </Alert>
          )}

-          {hasAmbiguities && (
          <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
            {ambiguities.map((ambiguity: any) => {
              const isResolved = ambiguity.status === "resolved";
@@ -494,9 +658,18 @@ export default function FetchRequestDetail() {
              );
            })}
          </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
@@ -55,7 +55,7 @@ import type {
  FileSource,
  EmailSource,
 } from "./features/fetch-requests";
-import { RETRY_MAX } from "./features/fetch-requests";
+import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
 import { useNavigate } from "react-router-dom";
 import { useResourceByName, useConfig } from "../react-openapi";

@@ -129,7 +129,7 @@ export default function FetchRequests() {

  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_ocr"];
+  const formatOptions: string[] = fetchRes?.fields?.source?.schema?.format?.options as string[] ?? [];

  const createMutation = useCreateFetchRequest();
  const updateMutation = useUpdateFetchRequest();
@@ -180,7 +180,7 @@ export default function FetchRequests() {
      if (err?.response?.status === 409) {
        setSnackbar({ message: "Duplicate — same fingerprint already exists", severity: "error" });
      } else {
-        setSnackbar({ message: err?.response?.data?.detail || "Failed to create fetch request", severity: "error" });
+        setSnackbar({ message: formatApiError(err) || "Failed to create fetch request", severity: "error" });
      }
    }
  };
@@ -345,7 +345,7 @@ export default function FetchRequests() {
              input={<OutlinedInput label="Status" />}
              renderValue={(selected) => (selected as string[]).join(", ")}
            >
-              {["pending", "processing", "paused", "raw_expenses_done", "enriched_done", "completed", "failed"].map((s) => (
+              {(config?.enums?.FetchRequestStatus ?? []).map((s: string) => (
                <MenuItem key={s} value={s}>{s.replace(/_/g, " ")}</MenuItem>
              ))}
            </Select>
--- a/src/features/fetch-requests/fetch-requests.models.ts
+++ b/src/features/fetch-requests/fetch-requests.models.ts
@@ -13,6 +13,8 @@ export interface FileSource {
  raw_lines?: string[];
  txn_blocks?: Record<string, any>;
  txn_dicts?: Record<string, any>[];
+  txn_dict_count?: number;
+  txn_dicts_count?: number;
 }

 export interface EmailSource {
@@ -20,6 +22,8 @@ export interface EmailSource {
  from_email?: string;
  subject?: string;
  raw_terms?: string[];
+  txn_dict_count?: number;
+  txn_dicts_count?: number;
 }

 export interface FetchRequestCreate {
@@ -80,10 +84,27 @@ export interface ResolveAmbiguityPayload {
  };
 }

+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: string;
-  status: "started" | "completed" | "paused";
-  message: string;
+  step: SSEEventStep;
+  status: SSEEventStatus;
+  message: ProgressMessage;
 }

 export interface FetchRequestFilters {
@@ -92,4 +113,21 @@ export interface FetchRequestFilters {
  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
@@ -11,8 +11,11 @@ export type {
  AmbiguityCandidate,
  ResolveAmbiguityPayload,
  SSEEvent,
+  SSEEventStep,
+  SSEEventStatus,
+  ProgressMessage,
 } from "./fetch-requests.models";
-export { RETRY_MAX } from "./fetch-requests.models";
+export { RETRY_MAX, formatApiError } from "./fetch-requests.models";
 export {
  useFetchRequestsList,
  useFetchRequest,
--- a/src/openapi-config.ts
+++ b/src/openapi-config.ts
@@ -50,6 +50,18 @@ export const configuration: Record<string, ResourceOverride> = {
      }
    },
  },
+  accounts: {
+    enumOption: {
+      key: 'id',
+      value: '{name} - XXXX{number}'
+    }
+  },
+  tags: {
+    enumOption: {
+      key: 'id',
+      value: '{icon} {name}'
+    }
+  },
 };

 export const profileConfiguration = {