## Summary Add Fetch Request pipeline UI with real-time SSE progress tracking, ambiguity resolution, list page with filtering/retry, and detail page with stepper/event feed. ## Changes ### New files - **`src/FetchRequestDetail.tsx`** (+675 lines) — Full detail page for a single fetch request with: - SSE connection for real-time pipeline progress (`/fetch-requests/:id/events`) - 4-step stepper (Extract → Raw Expense → Enrich → Save) with active/completed/failed/paused states - Granular progress bar (10% Extract, 20% Raw Expense, 50% Enrich, 20% Save) - Progress event feed with auto-scroll and deduplication (only latest `progress` per step, hides `started` when terminal event follows) - Ambiguity resolution cards with candidate selection buttons - Retry support with retry-count progress bar - Failure/success snackbar notifications - Error display for failed fetch requests ### Modified files - **`react-openapi/api/client.ts`** — added `api.patch()` method for PATCH requests - **`react-openapi/hooks/useResource.ts`** — added `usePatch()` mutation hook for partial updates with cache invalidation - **`src/FetchRequests.tsx`** (+347/−73 lines) — Major list page rewrite: - Row-level actions: retry (failed <3 retries), navigate to detail (paused), delete with confirmation dialog - Filter bar: status multi-select, account text filter, file/email source toggle - Account name autocomplete from API - Format dropdown driven by `resourceOverrides` config - Date pickers (changed from `datetime-local` to `date`) - Copy fingerprint button, retry count display, date range column - Row click navigates to detail, sorted by `created_at` desc - `pause` status support in `statusColors` - 409 conflict handling on duplicate fingerprint - `formatApiError()` for 422 validation error display - **`src/features/fetch-requests/fetch-requests.models.ts`** — Added types: - `paused` to `FetchRequestStatus` - `FetchRequestUpdate` interface - `retry_count` to `FetchRequest` interface - `raw_lines`, `txn_blocks`, `txn_dicts`, `txn_dict_count`/`txn_dicts_count` to source types - `PendingAmbiguity`, `AmbiguityCandidate`, `ResolveAmbiguityPayload` - `SSEEvent`, `SSEEventStep`, `SSEEventStatus`, `ProgressMessage` - `FetchRequestFilters` - `formatApiError()` helper for FastAPI 422 error parsing - `RETRY_MAX = 3` constant - **`src/features/fetch-requests/index.ts`** — Barrel exports for all new types, hooks, and helpers - **`src/features/fetch-requests/useFetchRequests.ts`** — Added hooks: - `useUpdateFetchRequest()` — PATCH via `usePatch` - `useFetchRequestAmbiguities(id)` — queries `/fetch-requests/:id/ambiguities` - `useResolveAmbiguity()` — posts to `/ambiguities/:id/resolve` with cache invalidation - **`src/main.jsx`** — Added route `/fetch-requests/:id` → `FetchRequestDetail` ## Key decisions - SSE event stream is the single source of truth for progress; REST is only fallback for page load - Stepper shows granular ratio-based progress counts (e.g. `150/246` for enrich) - `pipeline/failed` SSE event triggers refetch + error snackbar - `load_content` events excluded from event feed entirely - Enrich/Save progress counts come only from SSE (no REST fallback since those phases don't pause) Reviewed-on: #8 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);
|
|
}
|
|
|