## Summary
Add Fetch Request pipeline UI with real-time SSE progress tracking, ambiguity resolution, enhanced list page with filtering/retry, and detail page with stepper/event feed. Includes new API primitives (`api.patch`, `usePatch` hook) and extensive type definitions for SSE events, ambiguity resolution, and pipeline statuses.
## Changes by file
### `react-openapi/api/client.ts`
- Added `api.patch()` method (delegates to `AxiosInstance.patch`)
### `react-openapi/hooks/useResource.ts`
- Added `usePatch()` mutation hook — sends PATCH `/{endpoint}/{id}` with partial data, invalidates list + detail query caches on success
### `src/FetchRequestDetail.tsx` **(new, +675 lines)**
Full detail page for a single fetch request, composed of:
- **Header** — status chip, account name, source type (File/Email), date range, created/completed timestamps
- **Progress bar** — `LinearProgress` with percentage computed via `computeProgressPercent()`:
- Extract phase: snaps to 10% on first `raw_lines`/`txn_blocks` event
- Raw Expense: ratio of `displayParsedCount` / `txnBlockCount` × 20%
- Enrich: ratio of `stepStats.enrich_count` / `txnDictCount` × 50%
- Save: ratio of `stepStats.save_count` / `txnDictCount` × 20%
- **Retry section** — retry count bar (`retryCount/RETRY_MAX`) + "Retry" button if failed & not exhausted
- **Error/success alerts** — `error_message` display, max-retries info
- **Pipeline Stepper** — 4-step (`Extract` → `Raw Expense` → `Enrich` → `Save`) with custom icons per state: completed (CheckCircle, green), active (CircularProgress, animating), paused (WarningAmber, amber), failed (ErrorIcon, red), inactive (step number, grey). Step count labels shown below each label (e.g. `150/246`, `100/246`)
- **Progress Events feed** — auto-scrolling list of SSE events with deduplication:
- Only latest `progress` event per step (`txn_dicts`, `enrich`, `save_expenses`)
- `started` events hidden when a terminal event (`completed`/`skipped`/`paused`/`failed`) follows
- `load_content` events excluded entirely
- Connection status indicator (green dot / red dot)
- **Ambiguity Resolution** — When pipeline is `paused`, shows ambiguity cards:
- Raw line in monospace code block
- OCR amount/balance (struck through), previous balance
- Candidate buttons with credit/debit coloring (green for positive, red for negative)
- Resolved state shows green alert with chosen values
- "All resolved" vs "Pipeline paused" alerts
- **SSE connection** — `EventSource` to `{baseUrl}/fetch-requests/{id}/events`:
- Tracks `progress`, `completed`, `paused`, `failed` events
- On `paused`: refetch request + ambiguities
- On `failed`: refetch request + show error snackbar from `message.error`
- On `completed`/`resume_extract`: refetch request
- Cleans up on unmount
- **Snackbar** — pipeline failure notification (6s, bottom-center)
### `src/FetchRequests.tsx` **(+347/−73 lines)**
Major enhancement to the list page:
- **New filter bar** (replaces plain list header):
- Status multi-select (pending, processing, paused, raw_expenses_done, enriched_done, completed, failed)
- Account name text filter
- Source type toggle (All / File / Email)
- Refresh button
- **Account autocomplete** — fetches accounts list via `useResourceByName("accounts")`, provides dropdown
- **Format dropdown** — driven by `resourceOverrides` config (`fetchRes.fields.source.schema.format.options`), fallback `["axis", "icici_ocr"]`
- **Date pickers** — changed from `datetime-local` to `date`, capped at today's date
- **Navigation** — on create, navigates to `/fetch-requests/{id}` via `useNavigate`
- **Row actions**: retry (failed, retry_count < 3), navigate to detail (paused), delete with confirmation dialog
- **Copy fingerprint** — icon button copies to clipboard with snackbar confirmation
- **Sorting** — table sorted by `created_at` descending
- **Table columns** — changed from `[Fingerprint, Source, Account, Status, Created, Actions]` to `[ID, Account, Source, Date Range, Status, Retries, Created, Actions]`
- **Retry count display** — shows `retry_count/RETRY_MAX` when >0, otherwise `—`
- **Status tooltip** — shows `error_message` on hover when present
- **Status icons** — new `statusIcons` map: ScheduleIcon (pending), CircularProgress (processing), WarningAmber (paused), HourglassEmpty (raw_expenses_done/enriched_done), CheckCircle (completed), ErrorIcon (failed)
- **Error handling** — 409 conflict detection (duplicate fingerprint), 422 validation via `formatApiError()`
- **`handleRetry`** — PATCH `{status: "pending"}` on failed requests, success/error snackbar
### `src/features/fetch-requests/fetch-requests.models.ts` **(+97 lines)**
New types and helpers:
- Added `"paused"` to `FetchRequestStatus`
- `FileSource`: added `raw_lines`, `txn_blocks`, `txn_dicts`, `txn_dict_count`, `txn_dicts_count`
- `EmailSource`: added `txn_dict_count`, `txn_dicts_count`
- `FetchRequest` added `retry_count`
- **New interfaces**: `FetchRequestUpdate`, `AmbiguityCandidate`, `PendingAmbiguity`, `ResolveAmbiguityPayload`, `FetchRequestFilters`
- **SSE types**:
- `SSEEventStep`: `load_content | raw_lines | txn_blocks | txn_dicts | resume_extract | extract | paused | complete | enrich | save_expenses | pipeline`
- `SSEEventStatus`: `started | completed | skipped | paused | progress | failed`
- `ProgressMessage`: `lines? | blocks? | count? | unit? | raw_ocr_line? | error?`
- `SSEEvent: { step, status, message }`
- **Helpers**: `formatApiError()` — parses FastAPI 422 validation detail arrays (`"Missing: field_name"`), `RETRY_MAX = 3`
### `src/features/fetch-requests/index.ts` **(+13 lines)**
Barrel exports for all new types (`FetchRequestUpdate`, `FetchRequestFilters`, `PendingAmbiguity`, `AmbiguityCandidate`, `ResolveAmbiguityPayload`, `SSEEvent`, `SSEEventStep`, `SSEEventStatus`, `ProgressMessage`), value exports (`RETRY_MAX`, `formatApiError`), and new hooks (`useUpdateFetchRequest`, `useFetchRequestAmbiguities`, `useResolveAmbiguity`)
### `src/features/fetch-requests/useFetchRequests.ts` **(+49 lines)**
Added hooks:
- `useUpdateFetchRequest()` → `usePatch("fetch-requests")`
- `useFetchRequestAmbiguities(fetchRequestId)` → `useQuery` for `GET /fetch-requests/{id}/ambiguities`
- `useResolveAmbiguity()` → `useMutation` for `POST /ambiguities/{id}/resolve` with cache invalidation of both ambiguities and detail queries
### `src/main.jsx` **(+2 lines)**
- Added import for `FetchRequestDetail`
- Added route `{ path: "/fetch-requests/:id", component: FetchRequestDetail, headerTitle: "Fetch Request" }`
Reviewed-on: #9
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
169 lines
5.1 KiB
TypeScript
169 lines
5.1 KiB
TypeScript
import { useQuery, useMutation, useQueryClient, keepPreviousData } from "@tanstack/react-query";
|
|
import { api } from "../api/client";
|
|
import { ResourceConfig } from "../types/config";
|
|
import { ConfigContext } from "../providers/ConfigContext";
|
|
import * as React from "react";
|
|
|
|
export function useResource<T = any>(config: ResourceConfig | undefined) {
|
|
const queryClient = useQueryClient();
|
|
|
|
// Return empty/disabled hooks if config is missing
|
|
const { name = '', endpoint = '', primaryKey = 'id' } = config || {};
|
|
|
|
// --- READ ALL ---
|
|
const useList = (params?: any) =>
|
|
useQuery({
|
|
queryKey: [name, "list", params],
|
|
queryFn: async () => {
|
|
if (!endpoint) return { data: [], total: 0 };
|
|
console.log('params:', params);
|
|
// @ts-ignore
|
|
const res = await api.get<T[]>(endpoint, { params });
|
|
const total = res.headers ? parseInt(res.headers['x-total-count'] || res.headers['X-Total-Count']) : undefined;
|
|
return {
|
|
data: res.data,
|
|
total: isNaN(total as any) ? undefined : total
|
|
};
|
|
},
|
|
enabled: !!endpoint,
|
|
placeholderData: keepPreviousData,
|
|
});
|
|
|
|
// --- READ ONE ---
|
|
const useRead = (id: string, params?: any | null) =>
|
|
useQuery({
|
|
queryKey: [name, "detail", id, params],
|
|
queryFn: async () => {
|
|
if (!id || !endpoint) return null;
|
|
// @ts-ignore
|
|
const res = await api.get<T>(`${endpoint}/${id}`, params ? { params } : undefined);
|
|
return res.data;
|
|
},
|
|
enabled: !!id && !!endpoint,
|
|
});
|
|
|
|
// --- CREATE ---
|
|
const useCreate = () =>
|
|
useMutation({
|
|
mutationFn: async (data: Partial<T>) => {
|
|
if (!endpoint) throw new Error("Endpoint not defined");
|
|
// @ts-ignore
|
|
const res = await api.post<T>(endpoint, data);
|
|
return res.data;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: [name, "list"] });
|
|
},
|
|
});
|
|
|
|
// --- UPDATE ---
|
|
const useUpdate = () =>
|
|
useMutation({
|
|
mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
|
|
if (!endpoint) throw new Error("Endpoint not defined");
|
|
// @ts-ignore
|
|
const res = await api.put<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] });
|
|
},
|
|
});
|
|
|
|
// --- 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({
|
|
mutationFn: async (id: string) => {
|
|
if (!endpoint) throw new Error("Endpoint not defined");
|
|
await api.delete(`${endpoint}/${id}`);
|
|
return id;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: [name, "list"] });
|
|
},
|
|
});
|
|
|
|
// --- HELPERS FOR useQueries ---
|
|
const getListQueryOptions = (params?: any) => ({
|
|
queryKey: [name, "list", params],
|
|
queryFn: async () => {
|
|
if (!endpoint) return { data: [], total: 0 };
|
|
// @ts-ignore
|
|
const res = await api.get<T[]>(endpoint, { params });
|
|
const total = res.headers ? parseInt(res.headers['x-total-count'] || res.headers['X-Total-Count']) : undefined;
|
|
return {
|
|
data: res.data,
|
|
total: isNaN(total as any) ? undefined : total
|
|
};
|
|
},
|
|
enabled: !!endpoint,
|
|
});
|
|
|
|
// --- READ ME ---
|
|
const useMe = () =>
|
|
useQuery({
|
|
queryKey: [name, "me"],
|
|
queryFn: async () => {
|
|
if (!endpoint) return null;
|
|
// @ts-ignore
|
|
const res = await api.get<T>(`${endpoint}/me`);
|
|
return res.data;
|
|
},
|
|
enabled: !!endpoint,
|
|
});
|
|
|
|
// --- UPDATE ME ---
|
|
const useUpdateMe = () =>
|
|
useMutation({
|
|
mutationFn: async (data: Partial<T>) => {
|
|
if (!endpoint) throw new Error("Endpoint not defined");
|
|
// @ts-ignore
|
|
const res = await api.put<T>(`${endpoint}/me`, data);
|
|
return res.data;
|
|
},
|
|
onSuccess: () => {
|
|
queryClient.invalidateQueries({ queryKey: [name, "me"] });
|
|
queryClient.invalidateQueries({ queryKey: [name, "list"] });
|
|
},
|
|
});
|
|
|
|
return {
|
|
useList,
|
|
useRead,
|
|
useMe,
|
|
useCreate,
|
|
useUpdate,
|
|
usePatch,
|
|
useUpdateMe,
|
|
useDelete,
|
|
getListQueryOptions,
|
|
};
|
|
}
|
|
|
|
export function useResourceByName<T = any>(name: string) {
|
|
const config = React.useContext(ConfigContext);
|
|
const resourceConfig = config?.resources.find((r) => r.name === name);
|
|
return useResource<T>(resourceConfig);
|
|
}
|
|
|