fixes

# Summary

Refactor the React OpenAPI admin framework to support fully customizable field rendering and UI composition.

## Changes

### Admin UI Customization

* Added support for custom:

  * Dashboard component
  * Layout component
  * Login page component
* Introduced `AdminAppProps` and extended `Admin` configuration API.
* Renamed internal dashboard implementation to `DefaultDashboard`.

### Field Component Architecture

* Extracted field rendering into dedicated field components:

  * TextField
  * NumberField
  * BooleanField
  * DateField
  * EnumField
  * RelationField
  * ObjectField
  * FallbackField
  * DateRangeField
  * NumberRangeField
* Added `defaultFieldComponents` registry.
* Refactored `FormField` to resolve components dynamically from a component map instead of hardcoded field type handling.

### Resource Customization

* Added `FieldComponents` support across:

  * Admin
  * ResourceView
  * GenericForm
  * useResource
* Introduced wrapped `FormField` and `GenericForm` components generated from configured field overrides.

### Table Customization

* Added `EnhancedTableComponents`.
* Added support for custom cell renderers per field type.
* Enabled custom rendering for both desktop and mobile table layouts.

### Filter Improvements

* Exported `FilterAutocomplete`.
* Added support for custom date-range and number-range filter components.
* Added filter component extension points.
* Updated filter option label resolution to support `displayFormat`.

### Display Formatting

* Replaced `displayField` usage with `displayFormat`.
* Added template-based display rendering support through `resolveTemplate`.
* Improved relation display configuration handling.

### TypeScript Improvements

* Added TypeScript as a project dependency.
* Removed multiple `@ts-ignore` usages.
* Added strongly typed Axios wrapper methods with generic response support.
* Improved typing across hooks and component interfaces.

### OpenAPI Configuration Validation

* Added validation for enum fields without enum values.
* Added validation for relation resources missing `referenceOptions.enumOption`.
* Improved relation metadata propagation during schema parsing.

### Library Exports

* Exported:

  * Field component types
  * Override types
  * EnhancedTable
  * GenericForm
  * ResourceView
  * Field components and defaults
* Expanded public API surface for consumers extending the framework.

## Benefits

* Enables complete UI customization without modifying framework internals.
* Simplifies creation of custom field types and renderers.
* Improves type safety and developer experience.
* Provides consistent extension points for forms, tables, filters, and admin layouts.
* Makes the framework more suitable for reusable library distribution.

Reviewed-on: #11
Co-authored-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Co-committed-by: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>

.dockerignore

@@ -0,0 +1,40 @@
+# Node modules
+node_modules
+**/node_modules
+
+# Logs
+*.log
+logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Build outputs
+build
+dist
+out
+.next
+.cache
+.parcel-cache
+
+# Environment files
+.env
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# OS files
+.DS_Store
+Thumbs.db
+
+# IDE / Editor folders
+.vscode
+.idea
+*.sublime-workspace
+*.sublime-project
+
+# Temporary files
+*.swp
+*.bak
+*.tmp

.drone.yml

@@ -0,0 +1,140 @@
+---
+kind: pipeline
+type: docker
+name: default
+
+platform:
+  os: linux
+  arch: arm64
+
+workspace:
+  path: /drone/src
+
+volumes:
+  - name: dockersock
+    host:
+      path: /var/run/docker.sock
+
+steps:
+  - name: fetch-tags
+    image: docker:24
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - apk add --no-cache git
+      - git fetch --tags
+      - |
+        # Get latest Git tag and trim newline
+        LATEST_TAG=$(git describe --tags --abbrev=0 2>/dev/null | tr -d '\n')
+        echo "Latest Git tag fetched: $LATEST_TAG"
+
+        # Save to file for downstream steps
+        echo "$LATEST_TAG" > /drone/src/LATEST_TAG.txt
+
+        # Read back for verification
+        IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt | tr -d '\n')
+        echo "Image tag read from file: $IMAGE_TAG"
+
+        # Validate
+        if [ -z "$IMAGE_TAG" ]; then
+          echo "❌ No git tags found! Cannot continue."
+          exit 1
+        fi
+
+  - name: check-remote-image
+    image: docker:24
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt | tr -d '\n')
+
+      - echo "Checking if apps/khata:$IMAGE_TAG exists on remote Docker..."
+      - echo "Existing Docker tags for apps/khata:"
+      - docker images --format "{{.Repository}}:{{.Tag}}" | grep "^apps/khata" || echo "(none)"
+      - |
+        if docker image inspect apps/khata:$IMAGE_TAG > /dev/null 2>&1; then
+          echo "✅ Docker image apps/khata:$IMAGE_TAG already exists — skipping build"
+          exit 78
+        else
+          echo "⚙️ Docker image apps/khata:$IMAGE_TAG not found — proceeding to build..."
+        fi
+
+  - name: build-image
+    image: docker:24
+    environment:
+      API_BASE_URL:
+        from_secret: API_BASE_URL
+      AUTH_BASE_URL:
+        from_secret: AUTH_BASE_URL
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt | tr -d '\n')
+
+      - echo "🔨 Building Docker image apps/khata:$IMAGE_TAG ..."
+      - |
+        docker build --network=host \
+        --build-arg VITE_API_BASE_URL="$API_BASE_URL" \
+        --build-arg VITE_AUTH_BASE_URL="$AUTH_BASE_URL" \
+        -t apps/khata:$IMAGE_TAG \
+        -t apps/khata:latest \
+        /drone/src
+
+  - name: push-image
+    image: docker:24
+    environment:
+      REGISTRY_HOST:
+        from_secret: REGISTRY_HOST
+      REGISTRY_USER:
+        from_secret: REGISTRY_USER
+      REGISTRY_PASS:
+        from_secret: REGISTRY_PASS
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt | tr -d '\n')
+
+      - echo "🔑 Logging into registry $REGISTRY_HOST ..."
+      - echo "$REGISTRY_PASS" | docker login $REGISTRY_HOST -u "$REGISTRY_USER" --password-stdin
+      - echo "🏷️ Tagging images with registry prefix..."
+      - docker tag apps/khata:$IMAGE_TAG $REGISTRY_HOST/apps/khata:$IMAGE_TAG
+      - docker tag apps/khata:$IMAGE_TAG $REGISTRY_HOST/apps/khata:latest
+      - echo "📤 Pushing apps/khata:$IMAGE_TAG ..."
+      - docker push $REGISTRY_HOST/apps/khata:$IMAGE_TAG
+      - echo "📤 Pushing apps/khata:latest ..."
+      - docker push $REGISTRY_HOST/apps/khata:latest
+
+  - name: stop-old
+    image: docker:24
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - echo "🛑 Stopping old container..."
+      - docker rm -f khata || true
+
+  - name: run-container
+    image: docker:24
+    volumes:
+      - name: dockersock
+        path: /var/run/docker.sock
+    commands:
+      - IMAGE_TAG=$(cat /drone/src/LATEST_TAG.txt | tr -d '\n')
+
+      - echo "🚀 Starting container apps/khata:$IMAGE_TAG ..."
+      - |
+        docker run -d \
+          --name khata \
+          -p 3002:3000 \
+          -e NODE_ENV=production \
+          --restart always \
+          apps/khata:$IMAGE_TAG
+
+# Trigger rules
+trigger:
+  event:
+    - tag

CONCEPT.md

@@ -0,0 +1,24 @@
+# Concept Overview
+
+The application is a **metadata‑driven admin UI** built on top of an OpenAPI description. By describing each resource in a small JSON config (type `ResourceConfig`), the UI automatically generates:
+
+1. **Data tables** (with pagination, sorting, and actions) – `EnhancedTable`.
+2. **Dynamic filters** – `FilterBar` creates appropriate filter widgets (autocomplete, number‑range, date‑range) based on field metadata.
+3. **Forms for create/edit** – A generic form component can render inputs for every `ResourceField`, handling relations via the `displayFormat` template.
+4. **Authentication layer** – `react‑auth` supplies a central `AuthProvider`, a `useAuth` hook, and route guarding, ensuring only authenticated users reach the admin pages.
+
+### Core Principles
+- **Declarative configuration**: Adding a new resource is just a JSON entry; no hand‑coded tables or forms.
+- **Template‑based display**: `displayFormat` (e.g. `"{{firstName}} {{lastName}}"`) defines how related objects are shown across the UI, eliminating the need for separate `displayField` props.
+- **Extensible UI**: Consumers can plug custom components (`components` prop) to override cell renderers, filter widgets, or action buttons without altering core logic.
+- **Unified state**: TanStack Query caches server data, while `react‑auth` manages JWTs and user info. Both are provided via React context for easy access.
+- **Responsive design**: The UI automatically switches to a card‑based layout on mobile, preserving functionality with a consistent look.
+
+### Migration Goal for Lovable
+The current repo implements these ideas with a solid foundation but could benefit from:
+- **Improved UI/UX** (e.g., better loading states, richer snackbars, dark‑mode toggle).
+- **More robust error handling** (centralized toast system, retry logic on auth failures).
+- **Enhanced theming** (customizable palette, brand colors).
+- **Accessibility** (ARIA roles, keyboard navigation).
+
+By re‑using the existing `ResourceConfig` schema and `displayFormat` logic, the Lovable implementation can focus on UI polish and advanced handling while keeping the powerful code‑generation approach intact.

DESIGN.md

@@ -0,0 +1,34 @@
+# Design Overview
+
+## React‑Auth
+- **Purpose**: Centralize authentication flows (login, logout, token refresh) for the UI.
+- **Key Concepts**
+  - **AuthProvider** – React context that stores `user`, `accessToken`, and `isAuthenticated`.
+  - **useAuth hook** – Exposes `login`, `logout`, `refreshToken`, and state values.
+  - **Route Guard** – HOC/Component (`ProtectedRoute`) that redirects unauthenticated users to the login page.
+- **UI**: Simple MUI forms, error handling with snackbars, and a loading spinner while the auth request is pending.
+- **Extensibility**: Plug‑in point for additional providers (OAuth, SSO) via a `providers` map.
+
+## React‑OpenAPI
+- **Purpose**: Generate UI components directly from an OpenAPI spec (tables, filters, forms).
+- **Core Modules**
+  - `ResourceConfig` & `ResourceField` – Typed definitions that describe each endpoint and its fields, including `displayFormat` for rendering.
+  - `EnhancedTable` – Data‑grid component that renders rows according to the config, supports relation rendering, sorting, pagination, and custom cell renderers.
+  - `FilterBar` – Dynamically builds filter controls (autocomplete, number‑range, date‑range) based on the same config.
+- **Data Flow**
+  1. Load OpenAPI spec → transform to `ResourceConfig` objects.
+  2. `useQuery` (TanStack) fetches data.
+  3. UI components consume the config to render tables and filter UI without hand‑written column definitions.
+- **Design Goals**
+  - **Zero boilerplate** – Adding a new resource only requires a JSON config.
+  - **Consistency** – All tables share pagination, actions, and styling.
+  - **Extensibility** – Override components via `components` prop.
+
+## src (Root Application)
+- **Entry Point** – `main.tsx` mounts the React app with `BrowserRouter` and wraps it with `AuthProvider`.
+- **Routing** – Routes are defined per‑resource (`/admin/:resource`, `/admin/:resource/edit/:id`). `ProtectedRoute` ensures auth.
+- **State Management** – TanStack Query handles server state; React Context handles auth state.
+- **Theming** – MUI theming with light/dark mode toggle (future enhancement).
+
+---
+These design notes serve as a concise reference for developers preparing a richer UI/UX implementation on the **lovable** platform.

Dockerfile

@@ -0,0 +1,33 @@
+# Stage 1: Build
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json and package-lock.json (or yarn.lock)
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy the rest of the app
+COPY . .
+
+# Build the app
+ARG VITE_API_BASE_URL
+ARG VITE_AUTH_BASE_URL
+RUN VITE_API_BASE_URL=$VITE_API_BASE_URL VITE_AUTH_BASE_URL=$VITE_AUTH_BASE_URL npm run build
+
+# Stage 2: Static file server (BusyBox)
+FROM busybox:latest
+
+WORKDIR /app
+
+# Copy only build frontend files
+COPY --from=builder /app/dist /app
+
+# Expose port
+EXPOSE 3000
+
+# Default command
+CMD ["busybox", "httpd", "-f", "-p", "3000"]

IMPLEMENTATION.md

@@ -0,0 +1,49 @@
+# Implementation Details
+
+## React‑Auth
+- **File Structure**
+  - `src/auth/AuthContext.tsx` – Provides `AuthContext` and `AuthProvider`.
+  - `src/auth/useAuth.ts` – Custom hook returning context values and actions.
+  - `src/auth/ProtectedRoute.tsx` – Wrapper component that checks `isAuthenticated` and redirects.
+  - `src/auth/api.ts` – Thin wrapper around `axios` for login, logout, refresh.
+- **Logic**
+  1. On `login`, POST credentials → store `accessToken` & user info in context and `localStorage`.
+  2. An `axios` interceptor attaches the token to every request.
+  3. `refreshToken` runs on 401 responses; it attempts a silent refresh and updates the context.
+  4. `logout` clears context and storage, navigating back to `/login`.
+- **UI Components**
+  - `LoginForm` – MUI `TextField`s, validation, and submit handling.
+  - `AuthLoading` – Full‑screen spinner displayed while session restoration runs on app boot.
+
+## React‑OpenAPI
+- **Core Files**
+  - `src/react-openapi/types/config.ts` – Already defines `ResourceField` with `displayFormat`.
+  - `src/react-openapi/utils/options.ts` – Helper `resolveTemplate` parses `{{field}}` placeholders using the item data.
+  - `src/react-openapi/components/EnhancedTable.tsx` – Renders a MUI `DataGrid`. Uses `getFormattedDisplayValue` to compute readable labels for relation fields based on `displayFormat`.
+  - `src/react-openapi/components/FilterBar.tsx` – Generates filter inputs; extracts option labels using the same `displayFormat` logic.
+- **Data Fetching**
+  - `useResource(resourceName)` – TanStack `useQuery` hook that builds the endpoint URL from `config.endpoint` and fetches data via the shared Axios instance.
+- **Customization**
+  - `components` prop passed to `EnhancedTable`/`FilterBar` allows overriding cell renderers, filter widgets, and action buttons.
+- **Error Handling**
+  - Centralized error toast (`useToast`) displays API errors.
+  - Table shows “No data” state when an empty array is returned.
+
+## src (Application Core)
+- **src/main.tsx** – Sets up MUI theme, React Router, `AuthProvider`, and `QueryClientProvider`.
+- **src/App.tsx** – Defines routes:
+  ```tsx
+  <Routes>
+    <Route path="/login" element={<LoginForm />} />
+    <Route element={<ProtectedRoute />}>
+      <Route path="/admin/:resource" element={<ResourceList />} />
+      <Route path="/admin/:resource/edit/:id" element={<ResourceForm />} />
+    </Route>
+  </Routes>
+  ```
+- **src/pages/ResourceList.tsx** – Reads `resource` from URL, loads its `ResourceConfig`, calls `useResource`, and renders `EnhancedTable` + `FilterBar`.
+- **src/pages/ResourceForm.tsx** – Dynamically builds a form based on `ResourceField` definitions, using `displayFormat` for default values.
+- **State Management** – TanStack Query caches paginated results; `AuthProvider` ensures all API calls include a valid JWT.
+- **Theming** – `ThemeProvider` toggles light/dark mode via a context hook that persists the preference in `localStorage`.
+
+These implementation notes detail the concrete file layout, data flow, and core logic that power the UI generated from OpenAPI specifications while maintaining authenticated access. They can be directly adapted for the **lovable** platform to provide a richer UI and better handling of auth and data rendering.

REFRACTOR_GUIDE.md

@@ -0,0 +1,172 @@
+# Refactor Guide – Deep Dive into the Khata‑UI Codebase
+
+> This document walks through the entire repository, explains the current architecture, and provides a step‑by‑step refactor plan that will improve maintainability, type safety, and UI/UX while preserving the existing functional behavior.
+
+---
+
+## 1. Repository Layout (high‑level)
+```
+khata-ui/
+├─ react-openapi/          # Core UI generated from OpenAPI configs
+│   ├─ components/         # UI pieces: EnhancedTable, FilterBar, etc.
+│   ├─ types/              # TypeScript interfaces (config, overrides)
+│   └─ utils/              # Helper utilities (options, template resolution)
+├─ src/                    # Application entry point and pages
+│   ├─ auth/               # Authentication context, hooks, and protected routes
+│   ├─ pages/              # Dynamic resources (list, form)
+│   └─ main.tsx            # React root, providers, theming
+├─ public/                 # Static assets (favicon, index.html)
+├─ index.html
+├─ package.json
+└─ tsconfig.json
+```
+
+### Key Concepts
+| Area | Responsibility |
+|------|-----------------|
+| **Auth** | Central JWT handling, `AuthProvider`, `useAuth`, route guarding. |
+| **OpenAPI‑driven UI** | Describes each resource via `ResourceConfig`/`ResourceField`. Generates tables, filters, and forms automatically. |
+| **Data Layer** | TanStack Query (`useQuery`) fetches data; Axios instance carries auth token via interceptor. |
+| **Theming** | MUI theme with light/dark mode toggle (future). |
+| **Extensibility** | `components` prop on `EnhancedTable` / `FilterBar` lets callers inject custom cell renderers, filter widgets, or action buttons. |
+
+---
+
+## 2. Detailed Module Walk‑through
+### 2.1 `react-openapi/types/config.ts`
+```ts
+export interface ResourceField {
+    displayFormat: string;          // <- single source of truth for rendering
+    type: FieldType;
+    label: string;
+    required?: boolean;
+    options?: string[];
+    readOnly?: boolean;
+    schema?: Record<string, ResourceField>;
+    formatter?: (value: any) => string;
+    relation?: string;
+    filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
+    enumOption?: EnumOption;
+    enumLabels?: Record<string, string>;
+}
+```
+- `displayFormat` replaces the legacy `displayField`. It can be a **template string** (`"{{first}} {{last}}"`) or an **array of keys** for concatenation.
+- All UI components now rely exclusively on this field.
+
+### 2.2 `react-openapi/utils/options.ts`
+- `resolveTemplate(format: string, item: any)` – interpolates `{{key}}` placeholders.
+- `getFieldOptions`, `toGridValueOptions` convert enum definitions into MUI‑compatible arrays.
+- **Refactor idea**: Move the `displayFormat` resolution logic from `EnhancedTable`/`FilterBar` into a dedicated helper (`formatDisplay(item, field)`), reducing duplication.
+
+### 2.3 `react-openapi/components/EnhancedTable.tsx`
+- **Core responsibilities**
+  1. Build column definitions from `config.fields`.
+  2. Render each cell via `FieldRenderer`.
+  3. Provide server‑side or client‑side pagination.
+  4. Add a static "Actions" column.
+- **Key functions**
+  - `getFormattedDisplayValue(item, displayFormat?, enumValue?)` – now uses `resolveTemplate` and falls back to generic fields.
+  - `FieldRenderer` – decides how to render a cell based on `field.type`, `field.relation`, custom renderers, and `displayFormat`.
+- **Duplication**: Both `EnhancedTable` and `FilterBar` perform very similar `displayFormat` extraction. Extracting this into a shared utility will shrink the component size and make testing easier.
+
+### 2.4 `react-openapi/components/FilterBar.tsx`
+- Generates filter controls for each **filterable** field.
+- Uses `extractOptions` to populate autocomplete lists, falling back to `displayFormat` for label generation.
+- **Opportunity**: Replace the inline `pull` helper with the shared formatter from `utils/options`.
+
+### 2.5 Authentication (`src/auth`)
+- `AuthContext.tsx` – provides `user`, `accessToken`, `isAuthenticated` plus actions.
+- `useAuth.ts` – thin wrapper exposing the context values.
+- `ProtectedRoute.tsx` – guards routes, redirects to `/login` when unauthenticated.
+- `api.ts` – thin Axios wrapper (`login`, `logout`, `refresh`).
+- **Refactor suggestions**
+  - Consolidate token storage (localStorage ↔ sessionStorage) behind a small `tokenStore` service.
+  - Add automatic token refresh using an interceptor that retries the original request.
+  - Provide a hook (`useAuthorizedQuery`) that injects the auth token into TanStack Query automatically.
+
+### 2.6 Application Core (`src/pages`, `src/main.tsx`)
+- `ResourceList.tsx` – reads `resource` param, loads the related `ResourceConfig` from a central map, fetches data, and renders `EnhancedTable` + `FilterBar`.
+- `ResourceForm.tsx` – builds a dynamic form based on `ResourceField` definitions; uses `displayFormat` for default values on relation fields.
+- `main.tsx` – wraps the app with `AuthProvider`, `QueryClientProvider`, and MUI `ThemeProvider`.
+- **Future work**: Extract the “resource loader” into a hook (`useResourceConfig(resourceName)`) that also validates the config at runtime.
+
+---
+
+## 3. Refactor Roadmap – Step‑by‑Step
+### Phase 1 – Consolidate Formatting Logic
+1. **Create utility** `src/react-openapi/utils/formatDisplay.ts`
+   ```ts
+   export const formatDisplay = (item: any, field: ResourceField, enumValue?: string) => {
+       if (enumValue) return resolveTemplate(enumValue, item);
+       const fmt = field.displayFormat;
+       if (!fmt) return item.name ?? item.title ?? item.label ?? item.id ?? JSON.stringify(item);
+       if (Array.isArray(fmt)) {
+           return fmt.map(k => item[k]).filter(Boolean).join(' ');
+       }
+       return resolveTemplate(fmt, item) || item.id || JSON.stringify(item);
+   };
+   ```
+2. Replace *all* inline calls to `getFormattedDisplayValue` in `EnhancedTable` and `FilterBar` with `formatDisplay`.
+3. Remove `getFormattedDisplayValue` from `EnhancedTable.tsx` (or keep it as a thin wrapper for backward compatibility).
+4. Update imports accordingly.
+5. Run TypeScript check – no errors.
+
+### Phase 2 – Decouple UI from Config Loading
+- Introduce **`configLoader.ts`** under `src/react-openapi/utils` that reads a JSON file (or fetches a remote spec) and produces a `Record<string, ResourceConfig>`.
+- Replace hard‑coded imports in `src/pages/ResourceList.tsx` with a call to `useResourceConfig(resourceName)`.
+- Add runtime validation (e.g., using `zod`) to ensure required fields (`displayFormat`, `type`, `label`) are present; surface errors via a toast.
+
+### Phase 3 – Centralize Error & Loading UI
+- Create `src/components/LoadingSpinner.tsx` and `src/components/ErrorToast.tsx`.
+- Wrap all data‑fetching hooks (`useResource`, `useAuth` actions) with a HOC that automatically displays these components.
+- Migrate the scattered `if (loading) …` checks into the new components.
+
+### Phase 4 – Theming & Dark Mode
+1. Add a `ThemeContext` that stores `mode: 'light' | 'dark'` and persists the preference.
+2. Expose a toggle button (e.g., in the top‑right corner of `App.tsx`).
+3. Update component styles to use theme‑aware colors (via `theme.palette`), ensuring the `Chip` variants already respect the palette.
+
+### Phase 5 – Testing & CI
+- **Unit tests** using `vitest` for:
+  - `formatDisplay` utility (various template & array cases).
+  - `AuthProvider` behavior (login, logout, token refresh).
+- **Component tests** (`@testing-library/react`) for `EnhancedTable` and `FilterBar` verifying that `displayFormat` rendering matches expectations.
+- Add a GitHub Actions workflow that runs `npm run lint && npx tsc --noEmit && vitest run` on each PR.
+
+### Phase 6 – Documentation (the files you will publish)
+- **DESIGN.md** – high‑level architecture (already present).
+- **IMPLEMENTATION.md** – detailed file‑by‑file breakdown (already present).
+- **CONCEPT.md** – why the metadata‑driven approach works (already present).
+- **REFRACTOR_GUIDE.md** – the detailed guide you are reading now (this file).
+- Keep these files in the repo root; they can be exported to the **lovable** platform directly.
+
+---
+
+## 4. Migration Checklist (what to verify after refactor)
+- [ ] All UI components compile with TypeScript (`npx tsc --noEmit`).
+- [ ] No runtime references to `displayField` remain (search `\.displayField`).
+- [ ] `formatDisplay` correctly resolves:
+  - Template strings with multiple placeholders.
+  - Array of keys.
+  - Fallback to generic fields.
+- [ ] Auth flow works (login ➜ token stored ➜ API requests succeed, protected routes guarded).
+- [ ] Pagination works both client‑ and server‑side.
+- [ ] Mobile layout (card view) still renders correctly.
+- [ ] Dark‑mode toggle persists across reloads.
+- [ ] Lint passes (`npm run lint` if configured) and tests pass.
+
+---
+
+## 5. Potential Future Enhancements
+| Feature | Benefit | Rough Implementation |
+|---------|---------|----------------------|
+| **Bulk actions** (delete, export) | Improves admin productivity | Add a toolbar with selection model in `EnhancedTable`. |
+| **Inline editing** | Faster data tweaks | Replace `onEdit` dialog with cell‑level edit mode using MUI `TextField`. |
+| **GraphQL fallback** | Flexibility for back‑ends | Abstract data fetching behind an adapter interface (`useDataProvider`). |
+| **Internationalisation** | Multi‑language UI | Wrap all static strings with `i18n.t()` and provide locale files. |
+| **Performance profiling** | Identify render bottlenecks | Use React Profiler and memoize expensive formatters (`useMemo`). |
+
+---
+
+### Closing Note
+The current codebase already demonstrates a powerful pattern: **declare once, render everywhere**. By consolidating the display logic, adding a small utility layer, and strengthening the authentication and theming foundations, the project will become easier to extend, test, and hand‑off to the **lovable** UI platform while retaining its low‑code advantage.

index.html

@@ -9,6 +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" />
     <title>khata - Aetoskia</title>
   </head>
   <body>

package-lock.json

@@ -28,6 +28,7 @@
       },
       "devDependencies": {
         "@vitejs/plugin-react": "latest",
+        "typescript": "^6.0.3",
         "vite": "latest"
       }
     },
@@ -4103,6 +4104,19 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/typescript": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
+      "dev": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
     "node_modules/unified": {
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",

package.json

@@ -28,6 +28,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-react": "latest",
+    "typescript": "^6.0.3",
     "vite": "latest"
   }
 }

react-auth/authClient.ts

@@ -1,32 +0,0 @@
-import { createApiClient } from "./axios";
-import { tokenStore } from "./token";
-
-// @ts-ignore
-const authApi = createApiClient(import.meta.env.VITE_AUTH_BASE_URL);
-
-export const authClient = {
-  async login(username: string, password: string) {
-    const res = await authApi.post("/login", { username, password });
-    const { access_token } = res.data;
-
-    if (!access_token) {
-      throw new Error("No access token returned");
-    }
-
-    tokenStore.set(access_token);
-    return this.getIdentity();
-  },
-
-  logout() {
-    tokenStore.clear();
-  },
-
-  async getIdentity() {
-    const res = await authApi.get("/me");
-    return res.data;
-  },
-
-  isAuthenticated() {
-    return !!tokenStore.get();
-  },
-};

react-openapi/Admin.tsx

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useAuth, AuthPage } from "../react-auth";
 import { UploadProvider } from "./providers/UploadProvider";
 import AdminLayout from "./components/AdminLayout";
@@ -7,24 +6,25 @@ import ResourceView from "./components/ResourceView";
 import { getAppConfig } from "./config";
 import { initializeApiClients } from "./api/client";
 import { AppConfig } from "./types/config";
+import { FieldComponents } from "./types/overrides";
 import { Box, Typography, Paper, CircularProgress } from "@mui/material";
-import AppTheme from "./shared-theme/AppTheme";
 import {
   Routes,
   Route,
   useNavigate,
   useParams,
-  Navigate,
 } from "react-router-dom";
 
-const queryClient = new QueryClient();
+import { ConfigContext } from "./providers/ConfigContext";
+import ProfileView from "./components/ProfileView";
 
-// Create a context for the app config
-export const ConfigContext = React.createContext<AppConfig | null>(null);
-
-function Dashboard({ basePath }: { basePath: string }) {
+function DefaultDashboard({ basePath }: { basePath: string }) {
   const config = React.useContext(ConfigContext);
   const navigate = useNavigate();
+
+  const resources = config?.resources || [];
+  const visibleResources = resources.filter((res) => !res.hidden);
+
   return (
     <Box>
       <Typography variant="h4" gutterBottom>
@@ -33,7 +33,6 @@ function Dashboard({ basePath }: { basePath: string }) {
       <Typography variant="body1" sx={{ color: 'text.secondary' }}>
         Select a resource from the sidebar to manage data.
       </Typography>
-
       <Box
         sx={{
           display: "grid",
@@ -42,7 +41,7 @@ function Dashboard({ basePath }: { basePath: string }) {
           mt: 4,
         }}
       >
-        {config?.resources.map((res) => (
+        {visibleResources.map((res) => (
           <Paper
             key={res.name}
             sx={{
@@ -52,7 +51,7 @@ function Dashboard({ basePath }: { basePath: string }) {
                 transition: 'transform 0.2s',
                 '&:hover': { transform: 'translateY(-4px)', boxShadow: 4 }
             }}
-            onClick={() => navigate(`${basePath}/${res.name}`)}
+            onClick={() => navigate(`/admin/${res.name}`)}
           >
             <Typography variant="h6" color="primary">{res.pluralLabel}</Typography>
             <Typography variant="body2" color="text.secondary">Manage {res.pluralLabel.toLowerCase()}</Typography>
@@ -63,19 +62,28 @@ function Dashboard({ basePath }: { basePath: string }) {
   );
 }
 
-import ProfileView from "./components/ProfileView";
+interface AdminAppProps {
+  basePath: string;
+  fieldComponents: FieldComponents;
+  Dashboard?: React.ComponentType<{ basePath: string }>;
+  Layout?: React.ComponentType<AdminLayoutProps>;
+  LoginPage?: React.ComponentType<any>;
+}
 
-function AdminApp({ basePath }: { basePath: string }) {
+function AdminApp({ basePath, fieldComponents, Dashboard = DefaultDashboard, Layout = AdminLayout, LoginPage = AuthPage }: AdminAppProps) {
   const { currentUser, login, logout, loading, error } = useAuth();
   const config = React.useContext(ConfigContext);
   const navigate = useNavigate();
 
+  const resources = config?.resources || [];
+  const visibleResources = resources.filter((res) => !res.hidden);
+
   if (!currentUser) {
     return (
-      <AuthPage
+      <LoginPage
         mode="login"
         login={login}
-        register={async () => {}} // Disable registration for Admin
+        register={async () => {}}
         loading={loading}
         error={error}
         onSwitchMode={() => {}}
@@ -86,70 +94,93 @@ function AdminApp({ basePath }: { basePath: string }) {
   }
 
   return (
-    <AdminLayout
+    <Layout
       username={currentUser.username}
       onLogout={logout}
-      onSelectResource={(name) => navigate(`${basePath}/${name}`)}
-      resources={config?.resources || []}
+      onSelectResource={(name) => navigate(`/admin/${name}`)}
+      resources={visibleResources}
     >
       <Routes>
         <Route path="/" element={<Dashboard basePath={basePath} />} />
         <Route path="/profile" element={<ProfileView />} />
-        <Route path="/:resourceName" element={<ResourceRouteWrapper />} />
-        <Route path="/:resourceName/:id" element={<ResourceRouteWrapper />} />
-        <Route path="/:resourceName/create" element={<ResourceRouteWrapper />} />
-        <Route path="/:resourceName/edit/:id" element={<ResourceRouteWrapper />} />
+        <Route path="/:resourceName" element={<ResourceRouteWrapper fieldComponents={fieldComponents} />} />
+        <Route path="/:resourceName/:id" element={<ResourceRouteWrapper fieldComponents={fieldComponents} />} />
+        <Route path="/:resourceName/create" element={<ResourceRouteWrapper fieldComponents={fieldComponents} />} />
+        <Route path="/:resourceName/edit/:id" element={<ResourceRouteWrapper fieldComponents={fieldComponents} />} />
       </Routes>
-    </AdminLayout>
+    </Layout>
   );
 }
 
-function ResourceRouteWrapper() {
+function ResourceRouteWrapper({ fieldComponents }: { fieldComponents: FieldComponents }) {
   const { resourceName } = useParams();
   const config = React.useContext(ConfigContext);
   const selectedResource = config?.resources.find((r) => r.name === resourceName);
 
   if (!selectedResource) return <Typography>Resource not found</Typography>;
 
-  return <ResourceView config={selectedResource} />;
+  return <ResourceView config={selectedResource} fieldComponents={fieldComponents} />;
 }
 
-export default function Admin({ basePath = "/admin" }: { basePath?: string }) {
-  const [config, setConfig] = React.useState<AppConfig | null>(null);
+interface AdminLayoutProps {
+  children: React.ReactNode;
+  onSelectResource: (resourceName: string | null) => void;
+  onLogout: () => void;
+  username?: string;
+  resources: import("./types/config").ResourceConfig[];
+}
+
+interface AdminProps {
+  basePath?: string;
+  resourceOverrides?: Record<string, any>;
+  profileConfig?: any;
+  fieldComponents: FieldComponents;
+  Dashboard?: React.ComponentType<{ basePath: string }>;
+  Layout?: React.ComponentType<AdminLayoutProps>;
+  LoginPage?: React.ComponentType<any>;
+}
+
+export default function Admin({ basePath = "/admin", resourceOverrides = {}, profileConfig = {}, fieldComponents, Dashboard, Layout, LoginPage }: AdminProps) {
+  const existingConfig = React.useContext(ConfigContext);
+  const [config, setConfig] = React.useState<AppConfig | null>(existingConfig);
 
   React.useEffect(() => {
-    getAppConfig().then((cfg) => {
-      initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
-      setConfig(cfg);
-    });
-  }, []);
+    if (!existingConfig) {
+      getAppConfig(resourceOverrides, profileConfig).then((cfg) => {
+        initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
+        setConfig(cfg);
+      });
+    }
+  }, [resourceOverrides, profileConfig, existingConfig]);
 
   if (!config) {
     return (
-      <AppTheme>
-        <Box
-          sx={{
-            display: "flex",
-            justifyContent: "center",
-            alignItems: "center",
-            height: "100vh",
-          }}
-        >
-          <CircularProgress />
-        </Box>
-      </AppTheme>
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+        }}
+      >
+        <CircularProgress />
+      </Box>
     );
   }
 
+  const content = (
+    <UploadProvider>
+      <AdminApp basePath={basePath} fieldComponents={fieldComponents} Dashboard={Dashboard} Layout={Layout} LoginPage={LoginPage} />
+    </UploadProvider>
+  );
+
+  if (existingConfig) {
+    return content;
+  }
+
   return (
-    <AppTheme>
-      <QueryClientProvider client={queryClient}>
-        <ConfigContext.Provider value={config}>
-          <UploadProvider>
-            <AdminApp basePath={basePath} />
-          </UploadProvider>
-        </ConfigContext.Provider>
-      </QueryClientProvider>
-    </AppTheme>
+    <ConfigContext.Provider value={config}>
+      {content}
+    </ConfigContext.Provider>
   );
 }

react-openapi/api/client.ts

@@ -1,4 +1,5 @@
 import axios, { AxiosInstance } from "axios";
+import type { AxiosResponse } from "axios";
 import { createApiClient } from "../../react-auth";
 
 /**
@@ -7,22 +8,48 @@ import { createApiClient } from "../../react-auth";
 let _api: AxiosInstance | null = null;
 let _auth: AxiosInstance | null = null;
 
+function withParamsSerializer(instance: AxiosInstance): AxiosInstance {
+  instance.defaults.paramsSerializer = {
+    serialize: (params) => {
+      const searchParams = new URLSearchParams();
+
+      Object.entries(params).forEach(([key, value]) => {
+        if (Array.isArray(value)) {
+          value.forEach((v) => {
+            searchParams.append(key, String(v)); // NO []
+          });
+        } else if (value !== undefined && value !== null) {
+          searchParams.append(key, String(value));
+        }
+      });
+
+      return searchParams.toString();
+    },
+  };
+
+  return instance;
+}
+
 export const api = {
-  get: (...args: Parameters<AxiosInstance["get"]>) => {
+  get: <T = any, R = AxiosResponse<T>>(url: string, config?: Parameters<AxiosInstance["get"]>[1]) => {
     if (!_api) throw new Error("API client not initialized");
-    return _api.get(...args);
+    return _api.get<T, R>(url, config);
   },
-  post: (...args: Parameters<AxiosInstance["post"]>) => {
+  post: <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: Parameters<AxiosInstance["post"]>[2]) => {
     if (!_api) throw new Error("API client not initialized");
-    return _api.post(...args);
+    return _api.post<T, R>(url, data, config);
   },
-  put: (...args: Parameters<AxiosInstance["put"]>) => {
+  put: <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: Parameters<AxiosInstance["put"]>[2]) => {
     if (!_api) throw new Error("API client not initialized");
-    return _api.put(...args);
+    return _api.put<T, R>(url, data, config);
   },
-  delete: (...args: Parameters<AxiosInstance["delete"]>) => {
+  delete: <T = any, R = AxiosResponse<T>>(url: string, config?: Parameters<AxiosInstance["delete"]>[1]) => {
     if (!_api) throw new Error("API client not initialized");
-    return _api.delete(...args);
+    return _api.delete<T, R>(url, config);
+  },
+  patch: <T = any, R = AxiosResponse<T>>(url: string, data?: any, config?: Parameters<AxiosInstance["patch"]>[2]) => {
+    if (!_api) throw new Error("API client not initialized");
+    return _api.patch<T, R>(url, data, config);
   },
 };
 
@@ -38,6 +65,6 @@ export const auth = {
 };
 
 export function initializeApiClients(baseUrl: string, authBaseUrl: string) {
-  _api = createApiClient(baseUrl);
-  _auth = createApiClient(authBaseUrl);
+  _api = withParamsSerializer(createApiClient(baseUrl));
+  _auth = withParamsSerializer(createApiClient(authBaseUrl));
 }

react-openapi/components/AdminLayout.tsx

@@ -2,17 +2,12 @@ import * as React from 'react';
 import {
   Box,
   Drawer,
-  AppBar,
-  Toolbar,
   List,
-  Typography,
   Divider,
   ListItem,
   ListItemButton,
   ListItemIcon,
   ListItemText,
-  CssBaseline,
-  Button,
   IconButton,
   Tooltip,
   useMediaQuery,
@@ -20,7 +15,6 @@ import {
 } from '@mui/material';
 import TableViewIcon from '@mui/icons-material/TableView';
 import DashboardIcon from '@mui/icons-material/Dashboard';
-import LogoutIcon from '@mui/icons-material/Logout';
 import MenuIcon from '@mui/icons-material/Menu';
 import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
@@ -41,8 +35,6 @@ interface AdminLayoutProps {
 export default function AdminLayout({
   children,
   onSelectResource,
-  onLogout,
-  username,
   resources,
 }: AdminLayoutProps) {
   const theme = useTheme();
@@ -53,93 +45,141 @@ export default function AdminLayout({
   const [isCollapsed, setIsCollapsed] = React.useState(false);
   const [mobileOpen, setMobileOpen] = React.useState(false);
 
-  const activeResourceName = location.pathname.split('/')[1] || null;
+  const activeResourceName = location.pathname.split('/admin')[1] || null;
 
-  // AUTO-TOGGLE LOGIC
+  // AUTO-TOGGLE LOGIC (unchanged)
   React.useEffect(() => {
     if (isMobile) {
-        setIsCollapsed(false); // Mobile drawer is never "mini"
-        setMobileOpen(false); // Close on navigation
+      setIsCollapsed(false);
+      setMobileOpen(false);
     } else {
-        if (location.pathname === '/' || location.pathname === '') {
-            setIsCollapsed(false);
-        } else {
-            setIsCollapsed(true);
-        }
+      if (location.pathname === '/admin' || location.pathname === '') {
+        setIsCollapsed(false);
+      } else {
+        setIsCollapsed(true);
+      }
     }
   }, [location.pathname, isMobile]);
 
-  const currentWidth = isMobile ? drawerWidth : (isCollapsed ? collapsedWidth : drawerWidth);
+  const currentWidth = isMobile
+    ? drawerWidth
+    : isCollapsed
+    ? collapsedWidth
+    : drawerWidth;
 
   const handleDrawerToggle = () => {
-    setMobileOpen(!mobileOpen);
+    setMobileOpen((prev) => !prev);
   };
 
   const handleSidebarToggle = () => {
-    setIsCollapsed(!isCollapsed);
+    setIsCollapsed((prev) => !prev);
   };
 
   const drawerContent = (
-    <Box sx={{ overflow: 'hidden', display: 'flex', flexDirection: 'column', height: '100%' }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
       {!isMobile && (
         <>
-          <Box sx={{ display: 'flex', justifyContent: isCollapsed ? 'center' : 'flex-end', p: 1 }}>
+          <Box
+            sx={{
+              display: 'flex',
+              justifyContent: isCollapsed ? 'center' : 'flex-end',
+              p: 1,
+            }}
+          >
             <IconButton onClick={handleSidebarToggle}>
-                {isCollapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
+              {isCollapsed ? <ChevronRightIcon /> : <ChevronLeftIcon />}
             </IconButton>
           </Box>
           <Divider />
         </>
       )}
-      {isMobile && <Toolbar />}
+
+      {/* Mobile spacing (replaces Toolbar) */}
+      {isMobile && (
+        <Box sx={{ height: (theme) => theme.spacing(7) }} />
+      )}
 
       <List>
         <ListItem disablePadding>
-          <Tooltip title={(isCollapsed && !isMobile) ? "Dashboard" : ""} placement="right">
+          <Tooltip
+            title={isCollapsed && !isMobile ? 'Dashboard' : ''}
+            placement="right"
+          >
             <ListItemButton
-                selected={location.pathname === '/'}
-                onClick={() => navigate('/')}
-                sx={{
-                    minHeight: 48,
-                    justifyContent: (isCollapsed && !isMobile) ? 'center' : 'initial',
-                    px: 2.5,
-                }}
+              selected={location.pathname === '/admin'}
+              onClick={() => navigate('/admin')}
+              sx={{
+                minHeight: 48,
+                justifyContent:
+                  isCollapsed && !isMobile ? 'center' : 'initial',
+                px: 2.5,
+              }}
             >
-                <ListItemIcon sx={{
-                    minWidth: 0,
-                    mr: (isCollapsed && !isMobile) ? 0 : 3,
-                    justifyContent: 'center',
-                }}>
-                <DashboardIcon color={location.pathname === '/' ? 'primary' : 'inherit'} />
-                </ListItemIcon>
-                {(!isCollapsed || isMobile) && <ListItemText primary="Dashboard" />}
+              <ListItemIcon
+                sx={{
+                  minWidth: 0,
+                  mr: isCollapsed && !isMobile ? 0 : 3,
+                  justifyContent: 'center',
+                }}
+              >
+                <DashboardIcon
+                  color={
+                    location.pathname === '/admin'
+                      ? 'primary'
+                      : 'inherit'
+                  }
+                />
+              </ListItemIcon>
+              {(!isCollapsed || isMobile) && (
+                <ListItemText primary="Dashboard" />
+              )}
             </ListItemButton>
           </Tooltip>
         </ListItem>
       </List>
+
       <Divider />
+
       <List sx={{ flexGrow: 1 }}>
         {resources.map((res) => (
           <ListItem key={res.name} disablePadding>
-            <Tooltip title={(isCollapsed && !isMobile) ? res.pluralLabel : ""} placement="right">
-                <ListItemButton 
+            <Tooltip
+              title={
+                isCollapsed && !isMobile ? res.pluralLabel : ''
+              }
+              placement="right"
+            >
+              <ListItemButton
                 selected={activeResourceName === res.name}
                 onClick={() => onSelectResource(res.name)}
                 sx={{
-                    minHeight: 48,
-                    justifyContent: (isCollapsed && !isMobile) ? 'center' : 'initial',
-                    px: 2.5,
+                  minHeight: 48,
+                  justifyContent:
+                    isCollapsed && !isMobile
+                      ? 'center'
+                      : 'initial',
+                  px: 2.5,
                 }}
-                >
-                <ListItemIcon sx={{
+              >
+                <ListItemIcon
+                  sx={{
                     minWidth: 0,
-                    mr: (isCollapsed && !isMobile) ? 0 : 3,
+                    mr: isCollapsed && !isMobile ? 0 : 3,
                     justifyContent: 'center',
-                }}>
-                    <TableViewIcon color={activeResourceName === res.name ? 'primary' : 'inherit'} />
+                  }}
+                >
+                  <TableViewIcon
+                    color={
+                      activeResourceName === res.name
+                        ? 'primary'
+                        : 'inherit'
+                    }
+                  />
                 </ListItemIcon>
-                {(!isCollapsed || isMobile) && <ListItemText primary={res.pluralLabel} />}
-                </ListItemButton>
+                {(!isCollapsed || isMobile) && (
+                  <ListItemText primary={res.pluralLabel} />
+                )}
+              </ListItemButton>
             </Tooltip>
           </ListItem>
         ))}
@@ -149,51 +189,7 @@ export default function AdminLayout({
 
   return (
     <Box sx={{ display: 'flex' }}>
-      <CssBaseline />
-      <AppBar 
-        position="fixed" 
-        sx={{ 
-            zIndex: (theme) => theme.zIndex.drawer + 1,
-            backdropFilter: 'blur(8px)',
-            backgroundColor: 'rgba(255, 255, 255, 0.8)',
-            color: 'text.primary',
-            boxShadow: 'none',
-            borderBottom: '1px solid',
-            borderColor: 'divider',
-        }}
-      >
-        <Toolbar>
-          {isMobile && (
-            <IconButton
-              color="inherit"
-              aria-label="open drawer"
-              edge="start"
-              onClick={handleDrawerToggle}
-              sx={{ mr: 2 }}
-            >
-              <MenuIcon />
-            </IconButton>
-          )}
-          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1, fontWeight: 'bold' }}>
-            Admin Panel
-          </Typography>
-          <Box sx={{ display: { xs: 'none', sm: 'flex' }, alignItems: 'center', mr: 2 }}>
-            <Button 
-                color="inherit" 
-                onClick={() => navigate('/profile')}
-                sx={{ textTransform: 'none', fontWeight: 500 }}
-            >
-                {username}
-            </Button>
-          </Box>
-          <Tooltip title="Logout">
-            <IconButton color="inherit" onClick={onLogout}>
-                <LogoutIcon />
-            </IconButton>
-          </Tooltip>
-        </Toolbar>
-      </AppBar>
-
+      {/* NAV */}
       <Box
         component="nav"
         sx={{ width: { md: currentWidth }, flexShrink: { md: 0 } }}
@@ -206,7 +202,9 @@ export default function AdminLayout({
             ModalProps={{ keepMounted: true }}
             sx={{
               display: { xs: 'block', md: 'none' },
-              '& .MuiDrawer-paper': { boxSizing: 'border-box', width: drawerWidth },
+              '& .MuiDrawer-paper': {
+                width: drawerWidth,
+              },
             }}
           >
             {drawerContent}
@@ -214,46 +212,52 @@ export default function AdminLayout({
         ) : (
           <Drawer
             variant="permanent"
+            open
             sx={{
               display: { xs: 'none', md: 'block' },
               width: currentWidth,
               flexShrink: 0,
               whiteSpace: 'nowrap',
-              boxSizing: 'border-box',
-              transition: (theme) => theme.transitions.create('width', {
-                easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.enteringScreen,
-              }),
               [`& .MuiDrawer-paper`]: {
                 width: currentWidth,
-                boxSizing: 'border-box',
                 overflowX: 'hidden',
-                transition: (theme) => theme.transitions.create('width', {
-                    easing: theme.transitions.easing.sharp,
-                    duration: theme.transitions.duration.enteringScreen,
-                }),
+                transition: theme.transitions.create('width'),
               },
             }}
-            open
           >
             {drawerContent}
           </Drawer>
         )}
       </Box>
 
+      {/* MAIN */}
       <Box
         component="main"
         sx={{
-            flexGrow: 1, 
-            p: { xs: 2, md: 3 },
-            width: { xs: '100%', md: `calc(100% - ${currentWidth}px)` },
-            transition: (theme) => theme.transitions.create(['margin', 'width'], {
-                easing: theme.transitions.easing.sharp,
-                duration: theme.transitions.duration.enteringScreen,
-            }),
+          flexGrow: 1,
+          p: { xs: 2, md: 3 },
+          width: {
+            xs: '100%',
+            md: `calc(100% - ${currentWidth}px)`,
+          },
         }}
       >
-        <Toolbar />
+        {/* Control row (replaces AppBar) */}
+        {isMobile && (
+          <Box
+            sx={{
+              display: 'flex',
+              alignItems: 'center',
+              mb: 2,
+              height: (theme) => theme.spacing(7),
+            }}
+          >
+            <IconButton onClick={handleDrawerToggle}>
+              <MenuIcon />
+            </IconButton>
+          </Box>
+        )}
+
         {children}
       </Box>
     </Box>

react-openapi/components/EnhancedTable.tsx

@@ -31,6 +31,8 @@ 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 { EnhancedTableComponents } from '../types/overrides';
+import { getFieldOptions, toGridValueOptions, resolveTemplate } from '../utils/options';
 
 interface EnhancedTableProps {
   config: ResourceConfig;
@@ -43,24 +45,34 @@ interface EnhancedTableProps {
   onDelete: (id: string) => void;
   onCreate: () => void;
   onNavigateToResource?: (resourceName: string, id: string) => void;
+  components?: EnhancedTableComponents;
 }
 
 export default function EnhancedTable({
   config,
   data,
   total,
-  paginationModel,
-  onPaginationModelChange,
+  paginationModel: externalPaginationModel,
+  onPaginationModelChange: externalOnPaginationModelChange,
   loading = false,
   onEdit,
   onDelete,
   onCreate,
   onNavigateToResource,
+  components: tableComponents,
 }: EnhancedTableProps) {
   const theme = useTheme();
   const isMobile = useMediaQuery(theme.breakpoints.down('md'));
   const navigate = useNavigate();
 
+  const isServer = config.filterOptions?.mode !== "client";
+  const [internalPaginationModel, setInternalPaginationModel] = React.useState<GridPaginationModel>({
+    page: 0,
+    pageSize: 10,
+  });
+  const paginationModel = isServer ? externalPaginationModel : internalPaginationModel;
+  const onPaginationModelChange = isServer ? externalOnPaginationModelChange : setInternalPaginationModel;
+  
   const columns: GridColDef[] = React.useMemo(() => {
     const cols: GridColDef[] = Object.entries(config.fields).map(([key, field]) => {
       let muiType: 'string' | 'number' | 'boolean' | 'date' | 'dateTime' | 'singleSelect' = 'string';
@@ -76,7 +88,7 @@ export default function EnhancedTable({
         type: muiType,
         flex: 1,
         minWidth: 150,
-        renderCell: (params: GridRenderCellParams) => <FieldRenderer params={params} field={field} fieldKey={key} config={config} onNavigate={onNavigateToResource} navigate={navigate} />
+        renderCell: (params: GridRenderCellParams) => <FieldRenderer params={params} field={field} fieldKey={key} config={config} onNavigate={onNavigateToResource} navigate={navigate} components={tableComponents} />
       };
 
       if (muiType === 'date' || muiType === 'dateTime') {
@@ -87,9 +99,8 @@ export default function EnhancedTable({
         };
       }
 
-      if (muiType === 'singleSelect' && field.options) {
-        // @ts-ignore
-        col.valueOptions = field.options;
+      if (muiType === 'singleSelect') {
+        (col as GridColDef & { valueOptions: any[] }).valueOptions = toGridValueOptions(getFieldOptions(field));
       }
 
       return col;
@@ -104,12 +115,12 @@ export default function EnhancedTable({
         <GridActionsCellItem
           icon={<VisibilityIcon />}
           label="View"
-          onClick={() => navigate(`/${config.name}/${params.id}`)}
+          onClick={() => navigate(`/admin/${config.name}/${params.id}`)}
         />,
         <GridActionsCellItem
           icon={<EditIcon />}
           label="Edit"
-          onClick={() => navigate(`/${config.name}/edit/${params.id}`)}
+          onClick={() => navigate(`/admin/${config.name}/edit/${params.id}`)}
         />,
         <GridActionsCellItem
           icon={<DeleteIcon />}
@@ -122,6 +133,15 @@ export default function EnhancedTable({
     return cols;
   }, [config, onDelete, navigate, onNavigateToResource]);
 
+  const mobilePageSize = 10;
+  const [mobilePage, setMobilePage] = React.useState(0);
+  const mobileTotalPages = Math.ceil(data.length / mobilePageSize) || 1;
+  const mobileData = data.slice(mobilePage * mobilePageSize, (mobilePage + 1) * mobilePageSize);
+
+  React.useEffect(() => {
+    if (mobilePage >= mobileTotalPages) setMobilePage(0);
+  }, [data.length, mobilePage, mobileTotalPages]);
+
   if (isMobile) {
     return (
       <Box>
@@ -132,7 +152,7 @@ export default function EnhancedTable({
           </Button>
         </Box>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          {data.map((row) => (
+          {mobileData.map((row) => (
             <Box key={row[config.primaryKey] || Math.random()}>
               <MobileCardRow 
                 row={row} 
@@ -141,10 +161,22 @@ export default function EnhancedTable({
                 onDelete={onDelete} 
                 onNavigate={onNavigateToResource}
                 navigate={navigate}
+                components={tableComponents}
               />
             </Box>
           ))}
         </Box>
+        <Box sx={{ display: 'flex', justifyContent: 'center', gap: 1, mt: 2, flexWrap: 'wrap' }}>
+          <Button size="small" disabled={mobilePage === 0} onClick={() => setMobilePage(mobilePage - 1)}>
+            Previous
+          </Button>
+          <Typography variant="body2" sx={{ alignSelf: 'center', px: 1 }}>
+            Page {mobilePage + 1} of {mobileTotalPages}
+          </Typography>
+          <Button size="small" disabled={mobilePage >= mobileTotalPages - 1} onClick={() => setMobilePage(mobilePage + 1)}>
+            Next
+          </Button>
+        </Box>
       </Box>
     );
   }
@@ -161,20 +193,18 @@ export default function EnhancedTable({
         rows={data || []}
         columns={columns}
         autoHeight
-        paginationMode={config.pagination ? 'server' : 'client'}
-        rowCount={(() => {
-          if (!config.pagination) return data.length;
-          if (total !== undefined) return total;
-          
-          // Graceful fallback for missing total count
-          const page = paginationModel?.page || 0;
-          const pageSize = paginationModel?.pageSize || 10;
-          if (data.length < pageSize) {
-            return page * pageSize + data.length;
-          }
-          // Enable 'Next' button by pretending there's at least one more page
-          return (page + 2) * pageSize;
-        })()}
+        paginationMode={isServer ? 'server' : 'client'}
+        {...(isServer ? {
+          rowCount: (() => {
+            if (total !== undefined) return total;
+            const page = paginationModel?.page || 0;
+            const pageSize = paginationModel?.pageSize || 10;
+            if (data.length < pageSize) {
+              return page * pageSize + data.length;
+            }
+            return (page + 2) * pageSize;
+          })(),
+        } : {})}
         loading={loading}
         paginationModel={paginationModel || { page: 0, pageSize: 10 }}
         onPaginationModelChange={onPaginationModelChange}
@@ -199,7 +229,7 @@ export default function EnhancedTable({
   );
 }
 
-function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
+function MobileCardRow({ row, config, onDelete, onNavigate, navigate, components }: any) {
     const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
     const open = Boolean(anchorEl);
     const id = row[config.primaryKey];
@@ -222,8 +252,8 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
                         <MoreVertIcon fontSize="small" />
                     </IconButton>
                     <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-                        <MenuItem onClick={() => { handleClose(); navigate(`/${config.name}/${id}`); }}>View</MenuItem>
-                        <MenuItem onClick={() => { handleClose(); navigate(`/${config.name}/edit/${id}`); }}>Edit</MenuItem>
+                        <MenuItem onClick={() => { handleClose(); navigate(`/admin/${config.name}/${id}`); }}>View</MenuItem>
+                        <MenuItem onClick={() => { handleClose(); navigate(`/admin/${config.name}/edit/${id}`); }}>Edit</MenuItem>
                         <MenuItem onClick={() => { handleClose(); onDelete(id); }} sx={{ color: 'error.main' }}>Delete</MenuItem>
                     </Menu>
                 </Box>
@@ -234,44 +264,41 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate }: any) {
                             <Typography variant="caption" color="text.secondary" sx={{ display: 'block' }}>
                                 {field.label}
                             </Typography>
-                            <Typography variant="body2" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
-                                <FieldRenderer params={{ value: row[key], row }} field={field} fieldKey={key} config={config} onNavigate={onNavigate} navigate={navigate} isMobile />
+                            <Typography variant="body2" component="div" sx={{ fontWeight: 500, wordBreak: 'break-all' }}>
+                                <FieldRenderer params={{ value: row[key], row }} field={field} fieldKey={key} config={config} onNavigate={onNavigate} navigate={navigate} isMobile components={components} />
                             </Typography>
                         </Box>
                     ))}
                 </Box>
             </CardContent>
             <CardActions sx={{ justifyContent: 'flex-end', px: 2, pb: 2 }}>
-                 <Button size="small" onClick={() => navigate(`/${config.name}/${id}`)}>View Details</Button>
+                 <Button size="small" onClick={() => navigate(`/admin/${config.name}/${id}`)}>View Details</Button>
             </CardActions>
         </Card>
     );
 }
 
-function getFormattedDisplayValue(item: any, displayField?: string | string[]) {
+function getFormattedDisplayValue(item: any, displayFormat: string) {
     if (!item) return "";
-    if (!displayField) return item.name || item.title || item.label || item.id || JSON.stringify(item);
 
-    if (Array.isArray(displayField)) {
-        return displayField
-            .map(key => item[key])
-            .filter(val => val !== undefined && val !== null)
-            .join(' ');
-    }
-
-    return item[displayField] || item.id || JSON.stringify(item);
+    return resolveTemplate(displayFormat, item);
 }
 
-function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate, isMobile }: any) {
+function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate, isMobile, components }: any) {
     const value = params.value;
     const isPk = fieldKey === config.primaryKey;
 
     if (field.formatter) return field.formatter(value);
 
+    const customRenderer = components?.cellRenderers?.[field.type as string];
+    if (customRenderer) {
+      return React.createElement(customRenderer, { value, row: params.row, field, fieldKey, config, onNavigate, isMobile });
+    }
+
     // 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.displayFormat);
         
         return (
             <Chip 
@@ -290,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.displayFormat)).join(', ');
 
         return (
             <Tooltip title={tooltipTitle} arrow placement="top">
@@ -298,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.displayFormat)}
                             size="small"
                             variant="filled"
                             sx={{ maxWidth: 120 }}
@@ -318,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.displayFormat) || (isMobile ? 'Object' : JSON.stringify(value));
     }
 
     if (field.type === 'number' && typeof value === 'number') {
@@ -351,7 +379,14 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
         );
     }
     
-    if (field.type === 'datetime' || field.type === 'date') return value ? new Date(value).toLocaleString() : '';
+    if (field.type === 'datetime') return value ? new Date(value).toLocaleString() : '';
+        if (field.type === 'date') return value ? new Date(value).toLocaleDateString() : '';
+
+
+    if (field.type === 'enum') {
+      const opt = getFieldOptions(field).find(o => o.key === value);
+      return opt?.value ?? value;
+    }
 
     if (isPk && !isMobile) {
         return (
@@ -359,7 +394,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
                 label={value} 
                 size="small" 
                 color="primary"
-                onClick={(e) => { e.stopPropagation(); navigate(`/${config.name}/${params.row[config.primaryKey]}`); }}
+                onClick={(e) => { e.stopPropagation(); navigate(`/admin/${config.name}/${params.row[config.primaryKey]}`); }}
                 sx={{ cursor: 'pointer', fontWeight: 'bold' }}
             />
         );

react-openapi/components/FilterBar.tsx

@@ -0,0 +1,308 @@
+import * as React from "react";
+import {
+  Box,
+  Button,
+  Chip,
+  Paper,
+  TextField,
+  Autocomplete,
+  Typography,
+} from "@mui/material";
+import DoneIcon from "@mui/icons-material/Done";
+import FilterListIcon from "@mui/icons-material/FilterList";
+import { ResourceField, ResourceMode } from "../types/config";
+import { FilterBarComponents, FieldComponents } from "../types/overrides";
+import { getFieldOptions, resolveTemplate } from "../utils/options";
+
+export function FilterAutocomplete({
+  options,
+  value,
+  label,
+  onChange,
+}: {
+  options: string[];
+  value: string[];
+  label: string;
+  onChange: (val: string[]) => void;
+}) {
+  const listboxRef = React.useRef<HTMLUListElement>(null);
+  const scrollPosRef = React.useRef(0);
+  const [open, setOpen] = React.useState(false);
+  const [frozenValue, setFrozenValue] = React.useState<string[]>(value);
+
+  const toggleDropdown = () => {
+    setOpen(prev => {
+      const next = !prev;
+      setFrozenValue(value);
+      return next;
+    });
+  };
+  const sortedOptions = React.useMemo(() => {
+    const sel = new Set(frozenValue);
+    const picked: string[] = [];
+    const rest: string[] = [];
+    for (const o of options) {
+      if (sel.has(o)) picked.push(o);
+      else rest.push(o);
+    }
+    return [...picked, ...rest];
+  }, [options, frozenValue]);
+
+  return (
+    <Autocomplete
+      multiple
+      freeSolo
+      disableCloseOnSelect
+      open={open}
+      onOpen={toggleDropdown}
+      onClose={toggleDropdown}
+      options={sortedOptions}
+      value={value}
+      getOptionKey={(option) => option}
+      onChange={(_, val) => onChange(val.length > 0 ? val : [])}
+      ListboxProps={{
+        ref: listboxRef,
+        onScroll: (e) => { scrollPosRef.current = (e.target as HTMLUListElement).scrollTop; },
+      }}
+      renderOption={(props, option, { selected }) => {
+        const { key, ...rest } = props;
+        return (
+          <li key={key} {...rest}>
+            {selected ? <DoneIcon sx={{ fontSize: 14, mr: 1, color: 'primary.main' }} /> : <Box sx={{ width: 22, mr: 1 }} />}
+            {option}
+          </li>
+        );
+      }}
+      renderTags={(tagValue, getTagProps) => {
+        const maxChips = 1;
+        return (
+          <>
+            {tagValue.slice(0, maxChips).map((tag, index) => {
+              const { key, ...tagProps } = getTagProps({ index });
+              return <Chip
+                key={key}
+                {...tagProps}
+                label={tag.length > 10 ? `${tag.slice(0, 8)}..` : tag}
+                size="small"
+                onClick={toggleDropdown}
+                sx={{ cursor: 'pointer' }}
+              />;
+            })}
+            {tagValue.length > maxChips && (
+              <Chip
+                label={`+${tagValue.length - maxChips}`}
+                size="small"
+                onClick={toggleDropdown}
+                sx={{ cursor: 'pointer' }}
+              />
+            )}
+          </>
+        );
+      }}
+      renderInput={(params) => <TextField {...params} placeholder={`Add ${label}...`} />}
+      sx={{ '& .MuiOutlinedInput-root': { minHeight: '3rem', py: 0.5 } }}
+    />
+  );
+}
+
+function extractOptions(
+  fieldName: string,
+  field: ResourceField,
+  data: any[]
+): string[] {
+  const values = new Set<string>();
+
+  if (field.type === 'enum') {
+    return getFieldOptions(field).map(o => o.value);
+  }
+  if (!data) return [];
+
+  const pull = (item: any): string | null => {
+    if (item == null) return null;
+    if (typeof item === "string") return item;
+    if (typeof item !== "object") return String(item);
+
+    if (field.enumOption?.value) return resolveTemplate(field.enumOption.value, item);
+
+    // Use displayFormat if defined
+    if (field.displayFormat) {
+      return resolveTemplate(field.displayFormat, item);
+    }
+
+    return null;
+  };
+
+  for (const row of data) {
+    const v = row[fieldName];
+    if (v == null) continue;
+
+    if (Array.isArray(v)) {
+      for (const el of v) {
+        const label = pull(el);
+        if (label) values.add(label);
+      }
+    } else {
+      const label = pull(v);
+      if (label) values.add(label);
+    }
+  }
+
+  // console.log('extracted', fieldName, Array.from(values).sort())
+  return Array.from(values).sort();
+}
+
+function renderFilterInput(
+  fieldName: string,
+  field: ResourceField,
+  options: string[],
+  value: any,
+  onChange: (key: string, val: any) => void,
+  components?: FilterBarComponents,
+  fieldComponents?: FieldComponents,
+) {
+  const filterType = field.filterType;
+
+  if (filterType === "number-range") {
+    const RangeComponent = fieldComponents?.numberRange;
+    if (!RangeComponent) throw new Error(`Number range component not found for field ${fieldName}`);
+    const rangeVal = (value as { min?: string; max?: string }) || {};
+    return <RangeComponent name={fieldName} field={field} value={rangeVal} onChange={(val: any) => onChange("value", val)} />;
+  }
+
+  if (filterType === "date-range") {
+    const RangeComponent = fieldComponents?.dateRange;
+    if (!RangeComponent) throw new Error(`Number range component not found for field ${fieldName}`);
+    const rangeVal = (value as { start?: string; end?: string }) || {};
+    return <RangeComponent name={fieldName} field={field} value={rangeVal} onChange={(val: any) => onChange("value", val)} />;
+  }
+
+  const selected = Array.isArray(value) ? value : [];
+
+  return (
+    <FilterAutocomplete
+      options={options}
+      value={selected}
+      label={field.label}
+      onChange={(val) => onChange("value", val.length > 0 ? val : undefined)}
+    />
+  );
+}
+
+export interface FilterBarProps {
+  fields: Record<string, ResourceField>;
+  filterableFields: string[];
+  mode: ResourceMode;
+  data?: any[];
+  appliedValues: Record<string, any>;
+  onApply: (values: Record<string, any>) => void;
+  onClear: () => void;
+  components?: FilterBarComponents;
+  fieldComponents?: FieldComponents;
+}
+
+export default function FilterBar({
+  fields,
+  filterableFields,
+  data,
+  appliedValues,
+  onApply,
+  onClear,
+  components: filterComponents,
+  fieldComponents,
+}: FilterBarProps) {
+  const [open, setOpen] = React.useState(false);
+  const [draft, setDraft] = React.useState<Record<string, any>>(() => ({ ...appliedValues }));
+
+  React.useEffect(() => {
+    if (!open) setDraft({ ...appliedValues });
+  }, [appliedValues, open]);
+
+  if (!filterableFields || filterableFields.length === 0) return null;
+
+  const activeCount = Object.keys(appliedValues).filter((k) => {
+    const v = appliedValues[k];
+    if (v == null || v === "") return false;
+    if (typeof v === "object" && Object.values(v).every((x) => x == null || x === "")) return false;
+    return true;
+  }).length;
+
+  const handleApply = () => onApply({ ...draft });
+  const handleClear = () => {
+    setDraft({});
+    onClear();
+  };
+
+  const updateDraft = (fieldName: string, key: string, val: any) => {
+    setDraft((prev) => {
+      if (key === "value") {
+        return { ...prev, [fieldName]: val };
+      }
+      const existing = prev[fieldName] || {};
+      return { ...prev, [fieldName]: { ...existing, [key]: val } };
+    });
+  };
+
+  return (
+    <Paper variant="outlined" sx={{ mb: 2, borderRadius: 2, overflow: "hidden" }}>
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          px: 2,
+          py: 1,
+          cursor: "pointer",
+          "&:hover": { bgcolor: "action.hover" },
+        }}
+        onClick={() => setOpen((o) => !o)}
+      >
+        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+          <FilterListIcon fontSize="small" color="action" />
+          <Typography variant="subtitle2" fontWeight={600}>
+            {open ? "Hide Filters" : "Show Filters"}
+          </Typography>
+        </Box>
+        {activeCount > 0 && (
+          <Typography variant="caption" color="primary" fontWeight={600}>
+            {activeCount} active
+          </Typography>
+        )}
+      </Box>
+
+      {open && (
+        <Box sx={{ px: 2, pb: 2, borderTop: "1px solid", borderColor: "divider", pt: 2 }}>
+          <Box sx={{ display: "flex", flexWrap: "wrap", gap: 2, alignItems: "flex-end" }}>
+            {filterableFields.map((fieldName) => {
+              const field = fields[fieldName];
+              if (!field) return null;
+
+                const needsOptions = field.filterType === "autocomplete" || field.filterType === "multiselect";
+              const options = needsOptions ? extractOptions(fieldName, field, data ?? []) : [];
+              const raw = draft[fieldName];
+
+              return (
+                <Box key={fieldName} sx={{ display: "flex", flexDirection: "column", flex: { xs: '0 0 100%', sm: 1 }, minWidth: { sm: 200 } }}>
+                  <Box sx={{ typography: "caption", mb: 0.5, color: "text.secondary" }}>
+                    {field.label}
+                  </Box>
+                  {renderFilterInput(fieldName, field, options, raw, (key, val) =>
+                    updateDraft(fieldName, key, val), filterComponents, fieldComponents
+                  )}
+                </Box>
+              );
+            })}
+          </Box>
+
+          <Box sx={{ mt: 2, display: "flex", gap: 1 }}>
+            <Button variant="contained" onClick={handleApply}>
+              Apply
+            </Button>
+            <Button variant="outlined" onClick={handleClear}>
+              Clear
+            </Button>
+          </Box>
+        </Box>
+      )}
+    </Paper>
+  );
+}

react-openapi/components/GenericForm.tsx

@@ -7,11 +7,12 @@ import {
   CircularProgress,
 } from '@mui/material';
 import { ResourceConfig } from '../types/config';
+import { FieldComponents } from '../types/overrides';
 import { useUpload } from '../providers/UploadProvider';
 import { useQueries } from '@tanstack/react-query';
 import { useResource } from '../hooks/useResource';
 import FormField from './fields/FormField';
-import { ConfigContext } from '../Admin';
+import { ConfigContext } from '../providers/ConfigContext';
 
 interface GenericFormProps {
   config: ResourceConfig;
@@ -21,6 +22,7 @@ interface GenericFormProps {
   loading?: boolean;
   readOnly?: boolean;
   onEditClick?: () => void;
+  fieldComponents: FieldComponents;
 }
 
 export default function GenericForm({
@@ -31,6 +33,7 @@ export default function GenericForm({
   loading: saving,
   readOnly = false,
   onEditClick,
+  fieldComponents,
 }: GenericFormProps) {
   initialData = initialData || {};
   const [formData, setFormData] = React.useState(initialData);
@@ -42,23 +45,30 @@ export default function GenericForm({
     let relations: string[] = [];
     Object.values(fields).forEach(field => {
       if (field.relation) relations.push(field.relation);
+      if (field.refers) relations.push(field.refers);
       if (field.schema) relations = [...relations, ...getRelationFields(field.schema)];
     });
     return Array.from(new Set(relations));
   };
 
-  const allRelations = React.useMemo(() => getRelationFields(config.fields), [config.fields]);
+  const allRelations = React.useMemo(() => {
+    const rels = getRelationFields(config.fields);
+  // console.log('Form resource', config.name, 'relations discovered:', rels);
+    return rels;
+  }, [config.fields]);
 
   // 2. Parallel fetch for all related resource lists
   const queries = useQueries({
     queries: allRelations.map(relName => {
         const relatedRes = appConfig?.resources.find(r => r.name === relName);
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const { getListQueryOptions } = useResource(relatedRes!);
-        return {
-            ...getListQueryOptions(),
-            enabled: !!relatedRes,
+        const { getListQueryOptions } = useResource(relatedRes!, { fieldComponents });
+        const queryOpts = {
+          ...getListQueryOptions(),
+          enabled: !!relatedRes,
         };
+      // console.log('Query for relation', relName, 'resource', relatedRes?.name, 'enabled', !!relatedRes);
+        return queryOpts;
     }),
   });
 
@@ -67,8 +77,12 @@ export default function GenericForm({
   const relationDataMap = React.useMemo(() => {
     const map: Record<string, any[]> = {};
     allRelations.forEach((relName, index) => {
-        map[relName] = queries[index].data || [];
-    });
+      const queryResult = queries[index];
+      const dataArray = queryResult?.data && Array.isArray(queryResult.data) ? queryResult.data : (queryResult?.data?.data ?? []);
+    // console.log('Relation query result for', relName, 'raw:', queryResult?.data);
+     // console.log('Relation data for', relName, ':', dataArray.slice(0, 1));
+       map[relName] = dataArray;
+     });
     return map;
   }, [allRelations, queries]);
 
@@ -116,6 +130,7 @@ export default function GenericForm({
           uploading={uploading}
           baseUrl={appConfig?.baseUrl || ""}
           relationDataMap={relationDataMap}
+          components={fieldComponents}
         />
       ))}
 

react-openapi/components/ProfileView.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { Box, Typography, Paper, CircularProgress, Alert } from '@mui/material';
 import { useResource } from '../hooks/useResource';
 import GenericForm from './GenericForm';
-import { ConfigContext } from '../Admin';
+import { ConfigContext } from '../providers/ConfigContext';
+import { defaultFieldComponents } from './fields/DefaultFieldComponents';
 
 export default function ProfileView() {
   const appConfig = React.useContext(ConfigContext);
@@ -13,7 +14,6 @@ export default function ProfileView() {
     return <Alert severity="error">Profile configuration not found.</Alert>;
   }
 
-  // Create a modified config where only extraFields are editable
   const editableConfig = React.useMemo(() => {
     const newFields = { ...resourceConfig.fields };
     const extraFields = profileConfig.extraFields || [];
@@ -31,13 +31,12 @@ export default function ProfileView() {
     };
   }, [resourceConfig, profileConfig.extraFields]);
 
-  const { useMe, useUpdateMe } = useResource(resourceConfig);
+  const { useMe, useUpdateMe } = useResource(resourceConfig, { fieldComponents: defaultFieldComponents });
   const { data: profile, isLoading, error } = useMe();
   const updateMutation = useUpdateMe();
 
   const handleSave = async (formData: any) => {
     try {
-      // Only send editable fields to prevent accidental overwrites of read-only data
       const extraFields = profileConfig.extraFields || [];
       const dataToSave = Object.keys(formData)
         .filter(key => extraFields.includes(key))
@@ -76,6 +75,7 @@ export default function ProfileView() {
           onSave={handleSave}
           onCancel={() => window.history.back()}
           loading={updateMutation.isPending}
+          fieldComponents={defaultFieldComponents}
         />
       </Paper>
     </Box>

react-openapi/components/ResourceView.tsx

@@ -1,19 +1,98 @@
 import * as React from 'react';
-import { Box, Typography, Paper, CircularProgress } from '@mui/material';
+import { Box, Paper, CircularProgress } from '@mui/material';
 import { ResourceConfig } from '../types/config';
+import type { ResourceField } from '../types/config';
+import { FieldComponents } from '../types/overrides';
 import { useResource } from '../hooks/useResource';
-import GenericForm from './GenericForm';
+import { resolveTemplate } from '../utils/options';
 import EnhancedTable from './EnhancedTable';
-import { useParams, useLocation, useNavigate, Routes, Route } from 'react-router-dom';
+import FilterBar from './FilterBar';
+import { useParams, useLocation, useNavigate } from 'react-router-dom';
 
 interface ResourceViewProps {
   config: ResourceConfig;
   onNavigateToResource?: (resourceName: string, id: string) => void;
+  fieldComponents: FieldComponents;
 }
 
 import { GridPaginationModel } from '@mui/x-data-grid';
 
-export default function ResourceView({ config, onNavigateToResource }: ResourceViewProps) {
+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);
+  if (field.displayFormat) return resolveTemplate(field.displayFormat, item);
+  throw new Error('cannot get display string')
+}
+
+function applyClientFilters(
+  data: any[],
+  filters: Record<string, any>,
+  fields: Record<string, ResourceField>
+): any[] {
+  const entries = Object.entries(filters).filter(([_, v]) => {
+    if (v == null || v === "" || (Array.isArray(v) && v.length === 0)) return false;
+    if (typeof v === "object" && !Array.isArray(v) && Object.values(v).every((x) => x == null || x === "")) return false;
+    return true;
+  });
+
+  if (entries.length === 0) return data;
+
+  return data.filter((item) =>
+    entries.every(([fieldName, filterValue]) => {
+      const field = fields[fieldName];
+      if (!field) return true;
+
+      const itemValue = item[fieldName];
+
+      if (typeof filterValue === "object" && !Array.isArray(filterValue)) {
+        if (field.type === "number") {
+          if (filterValue.min != null && filterValue.min !== "" && Number(itemValue) < Number(filterValue.min)) return false;
+          if (filterValue.max != null && filterValue.max !== "" && Number(itemValue) > Number(filterValue.max)) return false;
+          return true;
+        }
+        if (field.type === "datetime" || field.type === "date") {
+          const itemTime = new Date(itemValue).getTime();
+          if (filterValue.start && new Date(filterValue.start).getTime() > itemTime) return false;
+          if (filterValue.end && new Date(filterValue.end).getTime() < itemTime) return false;
+          return true;
+        }
+        return true;
+      }
+
+      if (Array.isArray(filterValue)) {
+        if (field.type === "array" && Array.isArray(itemValue)) {
+          return itemValue.some((el: any) =>
+            filterValue.includes(getDisplayString(el, field))
+          );
+        }
+        if (itemValue && typeof itemValue === "object") {
+          return filterValue.includes(getDisplayString(itemValue, field));
+        }
+        return filterValue.includes(String(itemValue));
+      }
+
+      if (!filterValue) return true;
+
+      if (field.type === "boolean") {
+        return String(itemValue) === filterValue;
+      }
+
+      if (field.type === "array" && Array.isArray(itemValue)) {
+        return itemValue.some((el: any) =>
+          getDisplayString(el, field) === String(filterValue)
+        );
+      }
+
+      if (itemValue && typeof itemValue === "object") {
+        return getDisplayString(itemValue, field) === String(filterValue);
+      }
+
+      return String(itemValue) === String(filterValue);
+    })
+  );
+}
+
+export default function ResourceView({ config, onNavigateToResource, fieldComponents }: ResourceViewProps) {
   const { id } = useParams();
   const location = useLocation();
   const navigate = useNavigate();
@@ -23,36 +102,46 @@ export default function ResourceView({ config, onNavigateToResource }: ResourceV
   const isView = !!id && !isEdit;
   const isList = !id && !isCreate;
 
+  const isServer = config.filterOptions?.mode !== "client";
+
   const [paginationModel, setPaginationModel] = React.useState<GridPaginationModel>({
     page: 0,
     pageSize: 10,
   });
 
-  const { useList, useRead, useCreate, useUpdate, useDelete } = useResource(config);
+  const [appliedFilters, setAppliedFilters] = React.useState<Record<string, any>>({});
+
+  const { useList, useRead, useCreate, useUpdate, useDelete, components } = useResource(config, { fieldComponents });
 
-  // Determine query parameters based on pagination config
   const queryParams = React.useMemo(() => {
-    if (!config.pagination) return {};
+    if (!isServer) return { limit: 10000 };
     return {
       skip: paginationModel.page * paginationModel.pageSize,
       limit: paginationModel.pageSize,
     };
-  }, [config.pagination, paginationModel]);
+  }, [isServer, paginationModel]);
 
   const listQuery = useList(queryParams);
   const itemQuery = useRead(id || "");
 
-  const paginatedData = listQuery.data || { data: [], total: undefined };
+  const rawData = listQuery.data?.data || [];
+  const totalCount = listQuery.data?.total;
+
+  const filteredData = React.useMemo(
+    () => (isServer ? rawData : applyClientFilters(rawData, appliedFilters, config.fields)),
+    [isServer, rawData, appliedFilters, config.fields]
+  );
+
   const createMutation = useCreate();
   const updateMutation = useUpdate();
   const deleteMutation = useDelete();
 
   const handleEdit = (item: any) => {
-    navigate(`/${config.name}/edit/${item[config.primaryKey]}`);
+    navigate(`/admin/${config.name}/edit/${item[config.primaryKey]}`);
   };
 
   const handleCreate = () => {
-    navigate(`/${config.name}/create`);
+    navigate(`/admin/${config.name}/create`);
   };
 
   const handleSave = async (formData: any) => {
@@ -62,7 +151,7 @@ export default function ResourceView({ config, onNavigateToResource }: ResourceV
       } else {
         await createMutation.mutateAsync(formData);
       }
-      navigate(`/${config.name}`);
+      navigate(`/admin/${config.name}`);
     } catch (err) {
       console.error('Save failed:', err);
     }
@@ -80,29 +169,43 @@ export default function ResourceView({ config, onNavigateToResource }: ResourceV
   return (
     <Box>
       {isList ? (
-        <EnhancedTable
-          config={config}
-          data={paginatedData.data || []}
-          total={paginatedData.total}
-          paginationModel={paginationModel}
-          onPaginationModelChange={setPaginationModel}
-          loading={listQuery.isFetching}
-          onEdit={handleEdit}
-          onDelete={handleDelete}
-          onCreate={handleCreate}
-          onNavigateToResource={(res, id) => navigate(`/${res}/${id}`)}
-        />
+        <Box>
+          {!isServer && config.filterOptions?.fields && config.filterOptions.fields.length > 0 && (
+            <FilterBar
+              fields={config.fields}
+              filterableFields={config.filterOptions.fields}
+              mode={config.filterOptions?.mode || "server"}
+              data={rawData}
+              appliedValues={appliedFilters}
+              onApply={setAppliedFilters}
+              onClear={() => setAppliedFilters({})}
+              fieldComponents={components}
+            />
+          )}
+          <EnhancedTable
+            config={config}
+            data={filteredData}
+            total={isServer ? totalCount : filteredData.length}
+            paginationModel={isServer ? paginationModel : undefined}
+            onPaginationModelChange={isServer ? setPaginationModel : undefined}
+            loading={listQuery.isFetching}
+            onEdit={handleEdit}
+            onDelete={handleDelete}
+            onCreate={handleCreate}
+            onNavigateToResource={(res, id) => navigate(`/admin/${res}/${id}`)}
+          />
+        </Box>
       ) : (
         <Paper sx={{ p: 4 }}>
-          <GenericForm
+          {components && <components.GenericForm
             config={config}
             initialData={isCreate ? null : itemQuery.data}
             onSave={handleSave}
-            onCancel={() => navigate(`/${config.name}`)}
+            onCancel={() => navigate(`/admin/${config.name}`)}
             loading={createMutation.isPending || updateMutation.isPending}
             readOnly={isView}
-            onEditClick={() => navigate(`/${config.name}/edit/${id}`)}
-          />
+            onEditClick={() => navigate(`/admin/${config.name}/edit/${id}`)}
+          />}
         </Paper>
       )}
     </Box>

react-openapi/components/fields/BooleanField.tsx

@@ -0,0 +1,17 @@
+import { FormControlLabel, Checkbox } from '@mui/material';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function BooleanField({ field, value, onChange, disabled }: FieldComponentProps) {
+  return (
+    <FormControlLabel
+      control={
+        <Checkbox
+          checked={!!value}
+          onChange={(e) => onChange(e.target.checked)}
+          disabled={disabled}
+        />
+      }
+      label={field.label}
+    />
+  );
+}

react-openapi/components/fields/DateField.tsx

@@ -0,0 +1,18 @@
+import { TextField as MuiTextField } from '@mui/material';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function DateField({ field, value, onChange, disabled }: FieldComponentProps) {
+  const isDatetime = field.type === 'datetime';
+  return (
+    <MuiTextField
+      fullWidth
+      label={field.label}
+      type={isDatetime ? "datetime-local" : "date"}
+      InputLabelProps={{ shrink: true }}
+      value={value ? new Date(value).toISOString().slice(0, isDatetime ? 16 : 10) : ''}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={disabled}
+      required={field.required}
+    />
+  );
+}

react-openapi/components/fields/DateRangeField.tsx

@@ -0,0 +1,30 @@
+import { Box, TextField as MuiTextField } from '@mui/material';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function DateRangeField({ value, onChange, disabled }: FieldComponentProps) {
+  const rangeVal = (value as { start?: string; end?: string }) || {};
+  return (
+    <Box sx={{ display: "flex", gap: 1 }}>
+      <MuiTextField
+        type="date"
+        placeholder="From"
+        size="small"
+        value={rangeVal.start ?? ""}
+        onChange={(e) => onChange({ ...rangeVal, start: e.target.value || undefined })}
+        InputLabelProps={{ shrink: true }}
+        sx={{ width: 170 }}
+        disabled={disabled}
+      />
+      <MuiTextField
+        type="date"
+        placeholder="To"
+        size="small"
+        value={rangeVal.end ?? ""}
+        onChange={(e) => onChange({ ...rangeVal, end: e.target.value || undefined })}
+        InputLabelProps={{ shrink: true }}
+        sx={{ width: 170 }}
+        disabled={disabled}
+      />
+    </Box>
+  );
+}

react-openapi/components/fields/DefaultFieldComponents.ts

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { FieldComponents, FieldComponentProps } from '../../types/overrides';
+import TextFieldEntry from './TextField';
+import NumberField from './NumberField';
+import BooleanField from './BooleanField';
+import DateField from './DateField';
+import EnumField from './EnumField';
+import RelationField from './RelationField';
+import ImageUploadField from './ImageUploadField';
+import FallbackField from './FallbackField';
+import DateRangeField from './DateRangeField';
+import NumberRangeField from './NumberRangeField';
+
+const WrappedImageUploadField = (props: FieldComponentProps) =>
+  React.createElement(ImageUploadField, {
+    label: props.field.label,
+    value: props.value || '',
+    onUpload: async (file: File) => {
+      const url = await props.uploadFile?.(file);
+      if (url) props.onChange(url);
+    },
+    uploading: props.uploading,
+    baseUrl: props.baseUrl || '',
+    disabled: props.disabled,
+  });
+
+export const defaultFieldComponents: FieldComponents = {
+  string: TextFieldEntry,
+  markdown: TextFieldEntry,
+  number: NumberField,
+  boolean: BooleanField,
+  date: DateField,
+  datetime: DateField,
+  enum: EnumField,
+  image: WrappedImageUploadField,
+  relation: RelationField,
+  default: FallbackField,
+  dateRange: DateRangeField,
+  numberRange: NumberRangeField,
+};

react-openapi/components/fields/EnumField.tsx

@@ -0,0 +1,24 @@
+import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
+import { getFieldOptions } from '../../utils/options';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function EnumField({ field, value, onChange, disabled }: FieldComponentProps) {
+  const options = getFieldOptions(field);
+  return (
+    <FormControl fullWidth>
+      <InputLabel>{field.label}</InputLabel>
+      <Select
+        value={value || ''}
+        label={field.label}
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+      >
+        {options.map((opt) => (
+          <MenuItem key={opt.key} value={opt.key}>
+            {opt.value}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}

react-openapi/components/fields/FallbackField.tsx

@@ -0,0 +1,13 @@
+import { TextField } from '@mui/material';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function FallbackField({ field, value }: FieldComponentProps) {
+  return (
+    <TextField
+      fullWidth
+      label={field.label}
+      value={typeof value === 'object' ? JSON.stringify(value) : value || ''}
+      disabled
+    />
+  );
+}

react-openapi/components/fields/FormField.tsx

@@ -1,29 +1,19 @@
 import * as React from 'react';
-import {
-  TextField,
-  FormControl,
-  InputLabel,
-  Select,
-  MenuItem,
-  FormControlLabel,
-  Checkbox,
-  Typography,
-  Box,
-  Divider,
-} from '@mui/material';
 import { ResourceField } from '../../types/config';
-import ImageUploadField from './ImageUploadField';
+import { FieldComponentProps, FieldComponents } from '../../types/overrides';
+import ObjectField from './ObjectField';
 
-interface FormFieldProps {
+export interface FormFieldProps {
   name: string;
   field: ResourceField;
   value: any;
   onChange: (val: any) => void;
   disabled?: boolean;
-  uploadFile: (file: File) => Promise<string | null>;
-  uploading: boolean;
-  baseUrl: string;
-  relationDataMap?: Record<string, any[]>; // Map of relation name to data array
+  uploadFile?: (file: File) => Promise<string | null>;
+  uploading?: boolean;
+  baseUrl?: string;
+  relationDataMap?: Record<string, any[]>;
+  components: FieldComponents;
 }
 
 export default function FormField({
@@ -36,189 +26,60 @@ export default function FormField({
   uploading,
   baseUrl,
   relationDataMap = {},
+  components,
 }: FormFieldProps) {
-  const label = field.label;
+  const fieldProps: FieldComponentProps = {
+    name,
+    field,
+    value,
+    onChange,
+    disabled,
+    baseUrl,
+    relationDataMap,
+    uploadFile,
+    uploading,
+  };
 
-  // 1. Recursive Rendering for Objects (Not Relations)
+  const childComponents = components;
+
+  // 1. Object (recursive) - requires parent FormField for recursion
   if (field.type === 'object' && field.schema && !field.relation) {
-    return (
-      <Box sx={{ ml: 2, mt: 2, p: 2, borderLeft: '2px solid #e0e0e0' }}>
-        <Typography variant="subtitle2" color="primary" gutterBottom>
-          {label}
-        </Typography>
-        <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
-          {Object.entries(field.schema).map(([subKey, subField]) => (
-            <FormField
-              key={subKey}
-              name={`${name}.${subKey}`}
-              field={subField}
-              value={value?.[subKey]}
-              onChange={(newVal) => {
-                const updated = { ...(value || {}), [subKey]: newVal };
-                onChange(updated);
-              }}
-              disabled={disabled}
-              uploadFile={uploadFile}
-              uploading={uploading}
-              baseUrl={baseUrl}
-              relationDataMap={relationDataMap}
-            />
-          ))}
-        </Box>
-      </Box>
+    const renderChild = (childProps: FieldComponentProps) => (
+      <FormField
+        name={childProps.name}
+        field={childProps.field}
+        value={childProps.value}
+        onChange={childProps.onChange}
+        disabled={childProps.disabled}
+        uploadFile={childProps.uploadFile}
+        uploading={childProps.uploading}
+        baseUrl={childProps.baseUrl}
+        relationDataMap={childProps.relationDataMap}
+        components={components}
+      />
     );
+    return <ObjectField {...fieldProps} renderField={renderChild} />;
   }
 
-  // 2. Relation Handling (Select / Multi-Select)
-  if (field.relation && relationDataMap[field.relation]) {
-    const relationData = relationDataMap[field.relation];
-    const isArrayRelation = field.type === 'array';
-    
-    // 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;
-    };
-
-    return (
-      <FormControl fullWidth>
-        <InputLabel shrink>{label}</InputLabel>
-        <Select
-          multiple={isArrayRelation}
-          value={value || (isArrayRelation ? [] : "")}
-          label={label}
-          displayEmpty
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-          renderValue={(selected: any) => {
-            if (isArrayRelation) {
-              return (selected as any[]).map(getOptionLabel).join(', ');
-            }
-            return getOptionLabel(selected);
-          }}
-        >
-          {relationData.map((option) => (
-            <MenuItem key={option.id || JSON.stringify(option)} value={getOptionValue(option)}>
-              {getOptionLabel(option)}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-    );
-  }
-
-  // 3. Image Handling
+  // 2. Image
   if (field.type === 'image') {
-    return (
-      <ImageUploadField
-        label={label}
-        value={value}
-        onUpload={async (file: any) => {
-          const url = await uploadFile(file);
-          if (url) onChange(url);
-        }}
-        uploading={uploading}
-        baseUrl={baseUrl}
-        disabled={disabled}
-      />
-    );
+    const ImageField = components.image;
+    if (!ImageField) return null;
+    return <ImageField {...fieldProps} />;
   }
 
-  // 4. Boolean Handling
-  if (field.type === 'boolean') {
-    return (
-      <FormControlLabel
-        control={
-          <Checkbox
-            checked={!!value}
-            onChange={(e) => onChange(e.target.checked)}
-            disabled={disabled}
-          />
-        }
-        label={label}
-      />
-    );
+  // 3. Relation
+  if (field.relation && relationDataMap[field.relation]) {
+    const RelationFieldComp = components.relation;
+    if (!RelationFieldComp) return null;
+    return <RelationFieldComp {...fieldProps} />;
   }
 
-  // 5. Enum Handling
-  if (field.type === 'enum' && field.options) {
-    return (
-      <FormControl fullWidth>
-        <InputLabel>{label}</InputLabel>
-        <Select
-          value={value || ''}
-          label={label}
-          onChange={(e) => onChange(e.target.value)}
-          disabled={disabled}
-        >
-          {field.options.map((opt: string) => (
-            <MenuItem key={opt} value={opt}>
-              {opt}
-            </MenuItem>
-          ))}
-        </Select>
-      </FormControl>
-    );
+  // 4. Lookup by field type
+  const Component = components[field.type] || components.default;
+  if (Component) {
+    return <Component {...fieldProps} />;
   }
 
-  // 6. Common Text Fields
-  if (field.type === 'datetime' || field.type === 'date') {
-    return (
-      <TextField
-        fullWidth
-        label={label}
-        type={field.type === 'datetime' ? "datetime-local" : "date"}
-        InputLabelProps={{ shrink: true }}
-        value={value ? new Date(value).toISOString().slice(0, field.type === 'datetime' ? 16 : 10) : ''}
-        onChange={(e) => onChange(e.target.value)}
-        disabled={disabled}
-        required={field.required}
-      />
-    );
-  }
-
-  if (field.type === 'markdown' || field.type === 'string') {
-    return (
-      <TextField
-        fullWidth
-        label={label}
-        value={value || ''}
-        multiline={field.type === 'markdown'}
-        rows={field.type === 'markdown' ? 4 : 1}
-        onChange={(e) => onChange(e.target.value)}
-        disabled={disabled}
-        required={field.required}
-      />
-    );
-  }
-
-  if (field.type === 'number') {
-    return (
-      <TextField
-        fullWidth
-        label={label}
-        type="number"
-        value={value === undefined || value === null ? '' : value}
-        onChange={(e) => onChange(e.target.value === '' ? '' : Number(e.target.value))}
-        disabled={disabled}
-        required={field.required}
-      />
-    );
-  }
-
-  return (
-    <TextField
-      fullWidth
-      label={label}
-      value={typeof value === 'object' ? JSON.stringify(value) : value || ''}
-      disabled
-    />
-  );
+  return null;
 }

react-openapi/components/fields/NumberField.tsx

@@ -0,0 +1,16 @@
+import { TextField as MuiTextField } from '@mui/material';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function NumberField({ field, value, onChange, disabled }: FieldComponentProps) {
+  return (
+    <MuiTextField
+      fullWidth
+      label={field.label}
+      type="number"
+      value={value === undefined || value === null ? '' : value}
+      onChange={(e) => onChange(e.target.value === '' ? '' : Number(e.target.value))}
+      disabled={disabled}
+      required={field.required}
+    />
+  );
+}

react-openapi/components/fields/NumberRangeField.tsx

@@ -0,0 +1,28 @@
+import { Box, TextField as MuiTextField } from '@mui/material';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function NumberRangeField({ value, onChange, disabled }: FieldComponentProps) {
+  const rangeVal = (value as { min?: string; max?: string }) || {};
+  return (
+    <Box sx={{ display: "flex", gap: 1 }}>
+      <MuiTextField
+        type="number"
+        placeholder="Min"
+        size="small"
+        value={rangeVal.min ?? ""}
+        onChange={(e) => onChange({ ...rangeVal, min: e.target.value || undefined })}
+        sx={{ width: 100 }}
+        disabled={disabled}
+      />
+      <MuiTextField
+        type="number"
+        placeholder="Max"
+        size="small"
+        value={rangeVal.max ?? ""}
+        onChange={(e) => onChange({ ...rangeVal, max: e.target.value || undefined })}
+        sx={{ width: 100 }}
+        disabled={disabled}
+      />
+    </Box>
+  );
+}

react-openapi/components/fields/ObjectField.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { Box, Typography } from '@mui/material';
+import { FieldComponentProps } from '../../types/overrides';
+
+export interface ObjectFieldProps extends FieldComponentProps {
+  renderField: (props: FieldComponentProps) => React.ReactNode;
+}
+
+export default function ObjectField({ name, field, value, onChange, disabled, baseUrl, uploadFile, uploading, relationDataMap, renderField }: ObjectFieldProps) {
+  if (!field.schema) return null;
+
+  return (
+    <Box sx={{ ml: 2, mt: 2, p: 2, borderLeft: '2px solid #e0e0e0' }}>
+      <Typography variant="subtitle2" color="primary" gutterBottom>
+        {field.label}
+      </Typography>
+      <Box sx={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
+        {Object.entries(field.schema).map(([subKey, subField]) =>
+          React.cloneElement(
+            renderField({
+              name: `${name}.${subKey}`,
+              field: subField,
+              value: value?.[subKey],
+              onChange: (newVal: any) => {
+                const updated = { ...(value || {}), [subKey]: newVal };
+                onChange(updated);
+              },
+              disabled,
+              baseUrl,
+              uploadFile,
+              uploading,
+              relationDataMap,
+            }) as React.ReactElement,
+            { key: subKey }
+          )
+        )}
+
+
+      </Box>
+    </Box>
+  );
+}

react-openapi/components/fields/RelationField.tsx

@@ -0,0 +1,67 @@
+import { FormControl, InputLabel, Select, MenuItem } from '@mui/material';
+import { getFieldOptions } from '../../utils/options';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function RelationField({ field, value, onChange, disabled, relationDataMap = {} }: FieldComponentProps) {
+// console.log('RelationField render', field.label, 'enumOption:', field.enumOption, 'value prop:', value);
+  const relationName = field.relation ?? (field as any).refers;
+if (!relationName || !relationDataMap[relationName]) {
+    throw new Error(`Relation data for "${relationName}" is missing – cannot render options for field "${field.label}"`);
+}
+
+
+  const relationData = relationDataMap[relationName];
+  const isArrayRelation = field.type === 'array';
+  const options = getFieldOptions(field, relationData);
+// console.log('Options for', field.label, 'keys:', options.map(o=>o.key));
+  if (options.length === 0) {
+    throw new Error(`No selectable options available for field "${field.label}" (relation "${relationName}")`);
+  }
+  const keyField = field.enumOption?.key ?? 'id';
+
+
+  const normalizedValue = (() => {
+    if (isArrayRelation && Array.isArray(value)) {
+      return value.map((v: any) => {
+        if (v != null && typeof v === 'object') {
+          return String(v[keyField] ?? '');
+        }
+        return String(v);
+      });
+    }
+    if (value != null && typeof value === 'object') {
+      return String(value[keyField] ?? '');
+    }
+    // Primitive (number/string) – coerce to string for Select compatibility
+    return value != null ? String(value) : (isArrayRelation ? [] : "");
+  })();
+
+  return (
+    <FormControl fullWidth>
+      <InputLabel shrink>{field.label}</InputLabel>
+      <Select
+        multiple={isArrayRelation}
+        value={normalizedValue}
+        label={field.label}
+        displayEmpty
+        onChange={(e) => onChange(e.target.value)}
+        disabled={disabled}
+        renderValue={(selected: any) => {
+        // console.log('Select renderValue for', field.label, 'selected:', selected);
+          if (isArrayRelation) {
+            return (selected as string[]).map(k => options.find(o => o.key === k)?.value ?? k).join(', ');
+          }
+          const display = options.find(o => o.key === selected)?.value ?? selected;
+        // console.log('Display value for', field.label, ':', display);
+          return display;
+        }}
+      >
+        {options.map((opt) => (
+          <MenuItem key={opt.key} value={opt.key}>
+            {opt.value}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+}

react-openapi/components/fields/TextField.tsx

@@ -0,0 +1,18 @@
+import { TextField as MuiTextField } from '@mui/material';
+import { FieldComponentProps } from '../../types/overrides';
+
+export default function TextField({ field, value, onChange, disabled }: FieldComponentProps) {
+  const isMarkdown = field.type === 'markdown';
+  return (
+    <MuiTextField
+      fullWidth
+      label={field.label}
+      value={value || ''}
+      multiline={isMarkdown}
+      rows={isMarkdown ? 4 : 1}
+      onChange={(e) => onChange(e.target.value)}
+      disabled={disabled}
+      required={field.required}
+    />
+  );
+}

react-openapi/components/fields/index.ts

@@ -0,0 +1,14 @@
+export { default as FormField } from './FormField';
+export { default as ImageUploadField } from './ImageUploadField';
+export { default as TextField } from './TextField';
+export { default as NumberField } from './NumberField';
+export { default as BooleanField } from './BooleanField';
+export { default as DateField } from './DateField';
+export { default as EnumField } from './EnumField';
+export { default as RelationField } from './RelationField';
+export { default as ObjectField } from './ObjectField';
+export { default as FallbackField } from './FallbackField';
+export { default as DateRangeField } from './DateRangeField';
+export { default as NumberRangeField } from './NumberRangeField';
+export { defaultFieldComponents } from './DefaultFieldComponents';
+export type { ObjectFieldProps } from './ObjectField';

react-openapi/config.ts

@@ -1,13 +1,16 @@
 import { AppConfig } from "./types/config";
 import { loadConfigFromOpenApi } from "./utils/openapi_loader";
 
-export async function getAppConfig(): Promise<AppConfig> {
+export async function getAppConfig(
+  resourceOverrides: Record<string, any> = {},
+  profileConfig: any = {}
+): Promise<AppConfig> {
   // @ts-ignore
   const baseUrl = import.meta.env.VITE_API_BASE_URL
 
   // @ts-ignore
   const authBaseUrl = import.meta.env.VITE_AUTH_BASE_URL
-  const config = await loadConfigFromOpenApi(baseUrl);
+  const config = await loadConfigFromOpenApi(baseUrl, resourceOverrides, profileConfig);
 
   // You can still apply overrides here
   return {

react-openapi/hooks/useResource.ts

@@ -1,44 +1,67 @@
-import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import { useQuery, useMutation, useQueryClient, keepPreviousData } from "@tanstack/react-query";
+import * as React from "react";
 import { api } from "../api/client";
 import { ResourceConfig } from "../types/config";
+import { ConfigContext } from "../providers/ConfigContext";
+import { FieldComponents, FieldComponentProps } from "../types/overrides";
+import { defaultFieldComponents } from "../components/fields/DefaultFieldComponents";
+import FormField from "../components/fields/FormField";
+import GenericForm from "../components/GenericForm";
 
-export function useResource<T = any>(config: ResourceConfig) {
+function wrapFormField(merged: FieldComponents) {
+  return (props: Omit<React.ComponentProps<typeof FormField>, 'components'>) =>
+    React.createElement(FormField, { ...props, components: merged });
+}
+
+function wrapGenericForm(merged: FieldComponents) {
+  return (props: Omit<React.ComponentProps<typeof GenericForm>, 'fieldComponents'>) =>
+    React.createElement(GenericForm, { ...props, fieldComponents: merged });
+}
+
+export function useResource<T = any>(config: ResourceConfig | undefined, options?: { fieldComponents: FieldComponents }) {
   const queryClient = useQueryClient();
-  const { name, endpoint, primaryKey } = config;
+
+  const { name = '', endpoint = '', primaryKey = 'id' } = config || {};
+
+  const mergedComponents = React.useMemo(
+    () => options?.fieldComponents ? ({ ...defaultFieldComponents, ...options.fieldComponents }) : undefined,
+    [options?.fieldComponents],
+  );
 
   // --- READ ALL ---
   const useList = (params?: any) =>
     useQuery({
       queryKey: [name, "list", params],
       queryFn: async () => {
-        // @ts-ignore
+        if (!endpoint) return { data: [], total: 0 };
         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 | null) =>
+  const useRead = (id: string, params?: any | null) =>
     useQuery({
-      queryKey: [name, "detail", id],
+      queryKey: [name, "detail", id, params],
       queryFn: async () => {
-        if (!id) return null;
-        // @ts-ignore
-        const res = await api.get<T>(`${endpoint}/${id}`);
+        if (!id || !endpoint) return null;
+        const res = await api.get<T>(`${endpoint}/${id}`, params ? { params } : undefined);
         return res.data;
       },
-      enabled: !!id,
+      enabled: !!id && !!endpoint,
     });
 
   // --- CREATE ---
   const useCreate = () =>
     useMutation({
       mutationFn: async (data: Partial<T>) => {
-        // @ts-ignore
+        if (!endpoint) throw new Error("Endpoint not defined");
         const res = await api.post<T>(endpoint, data);
         return res.data;
       },
@@ -51,22 +74,37 @@ export function useResource<T = any>(config: ResourceConfig) {
   const useUpdate = () =>
     useMutation({
       mutationFn: async ({ id, data }: { id: string; data: Partial<T> }) => {
-        // @ts-ignore
+        if (!endpoint) throw new Error("Endpoint not defined");
         const res = await api.put<T>(`${endpoint}/${id}`, data);
         return res.data;
       },
-      onSuccess: (updatedItem) => {
-        // @ts-ignore
+      onSuccess: (updatedItem: any) => {
         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");
+        const res = await api.patch<T>(`${endpoint}/${id}`, data);
+        return res.data;
+      },
+      onSuccess: (updatedItem: any) => {
+        const listId = updatedItem[primaryKey];
+        queryClient.invalidateQueries({ queryKey: [name, "list"] });
+        queryClient.invalidateQueries({ queryKey: [name, "detail", listId] });
+      },
+    });
+
   // --- DELETE ---
   const useDelete = () =>
     useMutation({
       mutationFn: async (id: string) => {
+        if (!endpoint) throw new Error("Endpoint not defined");
         await api.delete(`${endpoint}/${id}`);
         return id;
       },
@@ -79,7 +117,7 @@ export function useResource<T = any>(config: ResourceConfig) {
   const getListQueryOptions = (params?: any) => ({
     queryKey: [name, "list", params],
     queryFn: async () => {
-      // @ts-ignore
+      if (!endpoint) return { data: [], total: 0 };
       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 {
@@ -87,6 +125,7 @@ export function useResource<T = any>(config: ResourceConfig) {
           total: isNaN(total as any) ? undefined : total
       };
     },
+    enabled: !!endpoint,
   });
 
   // --- READ ME ---
@@ -94,17 +133,18 @@ export function useResource<T = any>(config: ResourceConfig) {
     useQuery({
       queryKey: [name, "me"],
       queryFn: async () => {
-        // @ts-ignore
+        if (!endpoint) return null;
         const res = await api.get<T>(`${endpoint}/me`);
         return res.data;
       },
+      enabled: !!endpoint,
     });
 
   // --- UPDATE ME ---
   const useUpdateMe = () =>
     useMutation({
       mutationFn: async (data: Partial<T>) => {
-        // @ts-ignore
+        if (!endpoint) throw new Error("Endpoint not defined");
         const res = await api.put<T>(`${endpoint}/me`, data);
         return res.data;
       },
@@ -114,14 +154,31 @@ export function useResource<T = any>(config: ResourceConfig) {
       },
     });
 
+  const components = React.useMemo(() => {
+    if (!mergedComponents) return undefined;
+    return {
+      ...mergedComponents,
+      FormField: wrapFormField(mergedComponents),
+      GenericForm: wrapGenericForm(mergedComponents),
+    };
+  }, [mergedComponents]);
+
   return {
     useList,
     useRead,
     useMe,
     useCreate,
     useUpdate,
+    usePatch,
     useUpdateMe,
     useDelete,
     getListQueryOptions,
+    components,
   };
 }
+
+export function useResourceByName<T = any>(name: string, options?: { fieldComponents: FieldComponents }) {
+  const config = React.useContext(ConfigContext);
+  const resourceConfig = config?.resources.find((r) => r.name === name);
+  return useResource<T>(resourceConfig, options);
+}

react-openapi/index.ts

@@ -0,0 +1,13 @@
+export { default as Admin } from "./Admin";
+export { api, auth, initializeApiClients } from "./api/client";
+export { getAppConfig } from "./config";
+export type { AppConfig, ResourceConfig, ResourceField, ResourceMode } from "./types/config";
+export type { FieldComponents, FieldComponentProps, FieldComponent, FieldOverride, ResourceOverride, EnhancedTableComponents, FilterBarComponents, CellRendererProps, CellRenderer } from "./types/overrides";
+export { AppProvider } from "./providers/AppProvider";
+export { ConfigContext, useConfig } from "./providers/ConfigContext";
+export { useResource, useResourceByName } from "./hooks/useResource";
+export { default as FilterBar, FilterAutocomplete } from "./components/FilterBar";
+export { default as EnhancedTable } from "./components/EnhancedTable";
+export { default as GenericForm } from "./components/GenericForm";
+export { default as ResourceView } from "./components/ResourceView";
+export { defaultFieldComponents, FormField, TextField, NumberField, BooleanField, DateField, EnumField, RelationField, ObjectField, ImageUploadField, FallbackField } from "./components/fields";

react-openapi/providers/AppProvider.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConfigContext } from "./ConfigContext";
+import { getAppConfig } from "../config";
+import { initializeApiClients } from "../api/client";
+import { AppConfig } from "../types/config";
+import { Box, CircularProgress } from "@mui/material";
+
+const defaultQueryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 5 * 60 * 1000,
+      retry: 1,
+      refetchOnWindowFocus: false,
+    },
+  },
+});
+
+interface AppProviderProps {
+  children: React.ReactNode;
+  resourceOverrides?: Record<string, any>;
+  profileConfig?: any;
+  queryClient?: QueryClient;
+}
+
+export function AppProvider({
+  children,
+  resourceOverrides = {},
+  profileConfig = {},
+  queryClient = defaultQueryClient,
+}: AppProviderProps) {
+  const [config, setConfig] = React.useState<AppConfig | null>(null);
+  const [loading, setLoading] = React.useState(true);
+
+  React.useEffect(() => {
+    getAppConfig(resourceOverrides, profileConfig)
+      .then((cfg) => {
+        initializeApiClients(cfg.baseUrl, cfg.authBaseUrl);
+        setConfig(cfg);
+        setLoading(false);
+      })
+      .catch((err) => {
+        console.error("Failed to load OpenAPI configuration:", err);
+        setLoading(false);
+      });
+  }, [resourceOverrides, profileConfig]);
+
+  if (loading) {
+    return (
+      <Box
+        sx={{
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          height: "100vh",
+        }}
+      >
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <ConfigContext.Provider value={config}>
+        {children}
+      </ConfigContext.Provider>
+    </QueryClientProvider>
+  );
+}

react-openapi/providers/ConfigContext.tsx

@@ -0,0 +1,12 @@
+import * as React from "react";
+import { AppConfig } from "../types/config";
+
+export const ConfigContext = React.createContext<AppConfig | null>(null);
+
+export function useConfig() {
+  const context = React.useContext(ConfigContext);
+  if (context === undefined) {
+    throw new Error("useConfig must be used within a ConfigProvider");
+  }
+  return context;
+}

react-openapi/shared-theme/AppTheme.tsx

@@ -1,53 +0,0 @@
-import * as React from 'react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import type { ThemeOptions } from '@mui/material/styles';
-import { inputsCustomizations } from './customizations/inputs';
-import { dataDisplayCustomizations } from './customizations/dataDisplay';
-import { feedbackCustomizations } from './customizations/feedback';
-import { navigationCustomizations } from './customizations/navigation';
-import { surfacesCustomizations } from './customizations/surfaces';
-import { colorSchemes, typography, shadows, shape } from './themePrimitives';
-
-interface AppThemeProps {
-  children: React.ReactNode;
-  /**
-   * This is for the docs site. You can ignore it or remove it.
-   */
-  disableCustomTheme?: boolean;
-  themeComponents?: ThemeOptions['components'];
-}
-
-export default function AppTheme(props: AppThemeProps) {
-  const { children, disableCustomTheme, themeComponents } = props;
-  const theme = React.useMemo(() => {
-    return disableCustomTheme
-      ? {}
-      : createTheme({
-          // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
-          cssVariables: {
-            colorSchemeSelector: 'data-mui-color-scheme',
-            cssVarPrefix: 'template',
-          },
-          colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
-          typography,
-          shadows,
-          shape,
-          components: {
-            ...inputsCustomizations,
-            ...dataDisplayCustomizations,
-            ...feedbackCustomizations,
-            ...navigationCustomizations,
-            ...surfacesCustomizations,
-            ...themeComponents,
-          },
-        });
-  }, [disableCustomTheme, themeComponents]);
-  if (disableCustomTheme) {
-    return <React.Fragment>{children}</React.Fragment>;
-  }
-  return (
-    <ThemeProvider theme={theme} disableTransitionOnChange>
-      {children}
-    </ThemeProvider>
-  );
-}

react-openapi/shared-theme/ColorModeIconDropdown.tsx

@@ -1,89 +0,0 @@
-import * as React from 'react';
-import DarkModeIcon from '@mui/icons-material/DarkModeRounded';
-import LightModeIcon from '@mui/icons-material/LightModeRounded';
-import Box from '@mui/material/Box';
-import IconButton, { IconButtonOwnProps } from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import { useColorScheme } from '@mui/material/styles';
-
-export default function ColorModeIconDropdown(props: IconButtonOwnProps) {
-  const { mode, systemMode, setMode } = useColorScheme();
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  const handleMode = (targetMode: 'system' | 'light' | 'dark') => () => {
-    setMode(targetMode);
-    handleClose();
-  };
-  if (!mode) {
-    return (
-      <Box
-        data-screenshot="toggle-mode"
-        sx={(theme) => ({
-          verticalAlign: 'bottom',
-          display: 'inline-flex',
-          width: '2.25rem',
-          height: '2.25rem',
-          borderRadius: (theme.vars || theme).shape.borderRadius,
-          border: '1px solid',
-          borderColor: (theme.vars || theme).palette.divider,
-        })}
-      />
-    );
-  }
-  const resolvedMode = (systemMode || mode) as 'light' | 'dark';
-  const icon = {
-    light: <LightModeIcon />,
-    dark: <DarkModeIcon />,
-  }[resolvedMode];
-  return (
-    <React.Fragment>
-      <IconButton
-        data-screenshot="toggle-mode"
-        onClick={handleClick}
-        disableRipple
-        size="small"
-        aria-controls={open ? 'color-scheme-menu' : undefined}
-        aria-haspopup="true"
-        aria-expanded={open ? 'true' : undefined}
-        {...props}
-      >
-        {icon}
-      </IconButton>
-      <Menu
-        anchorEl={anchorEl}
-        id="account-menu"
-        open={open}
-        onClose={handleClose}
-        onClick={handleClose}
-        slotProps={{
-          paper: {
-            variant: 'outlined',
-            elevation: 0,
-            sx: {
-              my: '4px',
-            },
-          },
-        }}
-        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-      >
-        <MenuItem selected={mode === 'system'} onClick={handleMode('system')}>
-          System
-        </MenuItem>
-        <MenuItem selected={mode === 'light'} onClick={handleMode('light')}>
-          Light
-        </MenuItem>
-        <MenuItem selected={mode === 'dark'} onClick={handleMode('dark')}>
-          Dark
-        </MenuItem>
-      </Menu>
-    </React.Fragment>
-  );
-}

react-openapi/shared-theme/ColorModeSelect.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { useColorScheme } from '@mui/material/styles';
-import MenuItem from '@mui/material/MenuItem';
-import Select, { SelectProps } from '@mui/material/Select';
-
-export default function ColorModeSelect(props: SelectProps) {
-  const { mode, setMode } = useColorScheme();
-  if (!mode) {
-    return null;
-  }
-  return (
-    <Select
-      value={mode}
-      onChange={(event) =>
-        setMode(event.target.value as 'system' | 'light' | 'dark')
-      }
-      SelectDisplayProps={{
-        // @ts-ignore
-        'data-screenshot': 'toggle-mode',
-      }}
-      {...props}
-    >
-      <MenuItem value="system">System</MenuItem>
-      <MenuItem value="light">Light</MenuItem>
-      <MenuItem value="dark">Dark</MenuItem>
-    </Select>
-  );
-}

react-openapi/shared-theme/customizations/dataDisplay.tsx

@@ -1,233 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { typographyClasses } from '@mui/material/Typography';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { chipClasses } from '@mui/material/Chip';
-import { iconButtonClasses } from '@mui/material/IconButton';
-import { gray, red, green } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const dataDisplayCustomizations: Components<Theme> = {
-  MuiList: {
-    styleOverrides: {
-      root: {
-        padding: '8px',
-        display: 'flex',
-        flexDirection: 'column',
-        gap: 0,
-      },
-    },
-  },
-  MuiListItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        [`& .${svgIconClasses.root}`]: {
-          width: '1rem',
-          height: '1rem',
-          color: (theme.vars || theme).palette.text.secondary,
-        },
-        [`& .${typographyClasses.root}`]: {
-          fontWeight: 500,
-        },
-        [`& .${buttonBaseClasses.root}`]: {
-          display: 'flex',
-          gap: 8,
-          padding: '2px 8px',
-          borderRadius: (theme.vars || theme).shape.borderRadius,
-          opacity: 0.7,
-          '&.Mui-selected': {
-            opacity: 1,
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            [`& .${svgIconClasses.root}`]: {
-              color: (theme.vars || theme).palette.text.primary,
-            },
-            '&:focus-visible': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.3),
-            },
-            '&:hover': {
-              backgroundColor: alpha(theme.palette.action.selected, 0.5),
-            },
-          },
-          '&:focus-visible': {
-            backgroundColor: 'transparent',
-          },
-        },
-      }),
-    },
-  },
-  MuiListItemText: {
-    styleOverrides: {
-      primary: ({ theme }) => ({
-        fontSize: theme.typography.body2.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.body2.lineHeight,
-      }),
-      secondary: ({ theme }) => ({
-        fontSize: theme.typography.caption.fontSize,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListSubheader: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        backgroundColor: 'transparent',
-        padding: '4px 8px',
-        fontSize: theme.typography.caption.fontSize,
-        fontWeight: 500,
-        lineHeight: theme.typography.caption.lineHeight,
-      }),
-    },
-  },
-  MuiListItemIcon: {
-    styleOverrides: {
-      root: {
-        minWidth: 0,
-      },
-    },
-  },
-  MuiChip: {
-    defaultProps: {
-      size: 'small',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: '1px solid',
-        borderRadius: '999px',
-        [`& .${chipClasses.label}`]: {
-          fontWeight: 600,
-        },
-        variants: [
-          {
-            props: {
-              color: 'default',
-            },
-            style: {
-              borderColor: gray[200],
-              backgroundColor: gray[100],
-              [`& .${chipClasses.label}`]: {
-                color: gray[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: gray[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: gray[700],
-                backgroundColor: gray[800],
-                [`& .${chipClasses.label}`]: {
-                  color: gray[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: gray[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'success',
-            },
-            style: {
-              borderColor: green[200],
-              backgroundColor: green[50],
-              [`& .${chipClasses.label}`]: {
-                color: green[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: green[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: green[800],
-                backgroundColor: green[900],
-                [`& .${chipClasses.label}`]: {
-                  color: green[300],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: green[300],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'error',
-            },
-            style: {
-              borderColor: red[100],
-              backgroundColor: red[50],
-              [`& .${chipClasses.label}`]: {
-                color: red[500],
-              },
-              [`& .${chipClasses.icon}`]: {
-                color: red[500],
-              },
-              ...theme.applyStyles('dark', {
-                borderColor: red[800],
-                backgroundColor: red[900],
-                [`& .${chipClasses.label}`]: {
-                  color: red[200],
-                },
-                [`& .${chipClasses.icon}`]: {
-                  color: red[300],
-                },
-              }),
-            },
-          },
-          {
-            props: { size: 'small' },
-            style: {
-              maxHeight: 20,
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-              [`& .${svgIconClasses.root}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-          {
-            props: { size: 'medium' },
-            style: {
-              [`& .${chipClasses.label}`]: {
-                fontSize: theme.typography.caption.fontSize,
-              },
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiTablePagination: {
-    styleOverrides: {
-      actions: {
-        display: 'flex',
-        gap: 8,
-        marginRight: 6,
-        [`& .${iconButtonClasses.root}`]: {
-          minWidth: 0,
-          width: 36,
-          height: 36,
-        },
-      },
-    },
-  },
-  MuiIcon: {
-    defaultProps: {
-      fontSize: 'small',
-    },
-    styleOverrides: {
-      root: {
-        variants: [
-          {
-            props: {
-              fontSize: 'small',
-            },
-            style: {
-              fontSize: '1rem',
-            },
-          },
-        ],
-      },
-    },
-  },
-};

react-openapi/shared-theme/customizations/feedback.tsx

@@ -1,46 +0,0 @@
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { gray, orange } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const feedbackCustomizations: Components<Theme> = {
-  MuiAlert: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: 10,
-        backgroundColor: orange[100],
-        color: (theme.vars || theme).palette.text.primary,
-        border: `1px solid ${alpha(orange[300], 0.5)}`,
-        '& .MuiAlert-icon': {
-          color: orange[500],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiDialog: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '& .MuiDialog-paper': {
-          borderRadius: '10px',
-          border: '1px solid',
-          borderColor: (theme.vars || theme).palette.divider,
-        },
-      }),
-    },
-  },
-  MuiLinearProgress: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        height: 8,
-        borderRadius: 8,
-        backgroundColor: gray[200],
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-        }),
-      }),
-    },
-  },
-};

react-openapi/shared-theme/customizations/inputs.tsx

@@ -1,445 +0,0 @@
-import * as React from 'react';
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { outlinedInputClasses } from '@mui/material/OutlinedInput';
-import { svgIconClasses } from '@mui/material/SvgIcon';
-import { toggleButtonGroupClasses } from '@mui/material/ToggleButtonGroup';
-import { toggleButtonClasses } from '@mui/material/ToggleButton';
-import CheckBoxOutlineBlankRoundedIcon from '@mui/icons-material/CheckBoxOutlineBlankRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import RemoveRoundedIcon from '@mui/icons-material/RemoveRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const inputsCustomizations: Components<Theme> = {
-  MuiButtonBase: {
-    defaultProps: {
-      disableTouchRipple: true,
-      disableRipple: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxSizing: 'border-box',
-        transition: 'all 100ms ease-in',
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(theme.palette.primary.main, 0.5)}`,
-          outlineOffset: '2px',
-        },
-      }),
-    },
-  },
-  MuiButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-        textTransform: 'none',
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-              padding: '8px 12px',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem', // 40px
-            },
-          },
-          {
-            props: {
-              color: 'primary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: gray[900],
-              backgroundImage: `linear-gradient(to bottom, ${gray[700]}, ${gray[800]})`,
-              boxShadow: `inset 0 1px 0 ${gray[600]}, inset 0 -1px 0 1px hsl(220, 0%, 0%)`,
-              border: `1px solid ${gray[700]}`,
-              '&:hover': {
-                backgroundImage: 'none',
-                backgroundColor: gray[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: gray[800],
-              },
-              ...theme.applyStyles('dark', {
-                color: 'black',
-                backgroundColor: gray[50],
-                backgroundImage: `linear-gradient(to bottom, ${gray[100]}, ${gray[50]})`,
-                boxShadow: 'inset 0 -1px 0  hsl(220, 30%, 80%)',
-                border: `1px solid ${gray[50]}`,
-                '&:hover': {
-                  backgroundImage: 'none',
-                  backgroundColor: gray[300],
-                  boxShadow: 'none',
-                },
-                '&:active': {
-                  backgroundColor: gray[400],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'contained',
-            },
-            style: {
-              color: 'white',
-              backgroundColor: brand[300],
-              backgroundImage: `linear-gradient(to bottom, ${alpha(brand[400], 0.8)}, ${brand[500]})`,
-              boxShadow: `inset 0 2px 0 ${alpha(brand[200], 0.2)}, inset 0 -2px 0 ${alpha(brand[700], 0.4)}`,
-              border: `1px solid ${brand[500]}`,
-              '&:hover': {
-                backgroundColor: brand[700],
-                boxShadow: 'none',
-              },
-              '&:active': {
-                backgroundColor: brand[700],
-                backgroundImage: 'none',
-              },
-            },
-          },
-          {
-            props: {
-              variant: 'outlined',
-            },
-            style: {
-              color: (theme.vars || theme).palette.text.primary,
-              border: '1px solid',
-              borderColor: gray[200],
-              backgroundColor: alpha(gray[50], 0.3),
-              '&:hover': {
-                backgroundColor: gray[100],
-                borderColor: gray[300],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                backgroundColor: gray[800],
-                borderColor: gray[700],
-
-                '&:hover': {
-                  backgroundColor: gray[900],
-                  borderColor: gray[600],
-                },
-                '&:active': {
-                  backgroundColor: gray[900],
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'outlined',
-            },
-            style: {
-              color: brand[700],
-              border: '1px solid',
-              borderColor: brand[200],
-              backgroundColor: brand[50],
-              '&:hover': {
-                backgroundColor: brand[100],
-                borderColor: brand[400],
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[50],
-                border: '1px solid',
-                borderColor: brand[900],
-                backgroundColor: alpha(brand[900], 0.3),
-                '&:hover': {
-                  borderColor: brand[700],
-                  backgroundColor: alpha(brand[900], 0.6),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              variant: 'text',
-            },
-            style: {
-              color: gray[600],
-              '&:hover': {
-                backgroundColor: gray[100],
-              },
-              '&:active': {
-                backgroundColor: gray[200],
-              },
-              ...theme.applyStyles('dark', {
-                color: gray[50],
-                '&:hover': {
-                  backgroundColor: gray[700],
-                },
-                '&:active': {
-                  backgroundColor: alpha(gray[700], 0.7),
-                },
-              }),
-            },
-          },
-          {
-            props: {
-              color: 'secondary',
-              variant: 'text',
-            },
-            style: {
-              color: brand[700],
-              '&:hover': {
-                backgroundColor: alpha(brand[100], 0.5),
-              },
-              '&:active': {
-                backgroundColor: alpha(brand[200], 0.7),
-              },
-              ...theme.applyStyles('dark', {
-                color: brand[100],
-                '&:hover': {
-                  backgroundColor: alpha(brand[900], 0.5),
-                },
-                '&:active': {
-                  backgroundColor: alpha(brand[900], 0.3),
-                },
-              }),
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiIconButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        boxShadow: 'none',
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-        textTransform: 'none',
-        fontWeight: theme.typography.fontWeightMedium,
-        letterSpacing: 0,
-        color: (theme.vars || theme).palette.text.primary,
-        border: '1px solid ',
-        borderColor: gray[200],
-        backgroundColor: alpha(gray[50], 0.3),
-        '&:hover': {
-          backgroundColor: gray[100],
-          borderColor: gray[300],
-        },
-        '&:active': {
-          backgroundColor: gray[200],
-        },
-        ...theme.applyStyles('dark', {
-          backgroundColor: gray[800],
-          borderColor: gray[700],
-          '&:hover': {
-            backgroundColor: gray[900],
-            borderColor: gray[600],
-          },
-          '&:active': {
-            backgroundColor: gray[900],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              width: '2.25rem',
-              height: '2.25rem',
-              padding: '0.25rem',
-              [`& .${svgIconClasses.root}`]: { fontSize: '1rem' },
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              width: '2.5rem',
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiToggleButtonGroup: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: '10px',
-        boxShadow: `0 4px 16px ${alpha(gray[400], 0.2)}`,
-        [`& .${toggleButtonGroupClasses.selected}`]: {
-          color: brand[500],
-        },
-        ...theme.applyStyles('dark', {
-          [`& .${toggleButtonGroupClasses.selected}`]: {
-            color: '#fff',
-          },
-          boxShadow: `0 4px 16px ${alpha(brand[700], 0.5)}`,
-        }),
-      }),
-    },
-  },
-  MuiToggleButton: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '12px 16px',
-        textTransform: 'none',
-        borderRadius: '10px',
-        fontWeight: 500,
-        ...theme.applyStyles('dark', {
-          color: gray[400],
-          boxShadow: '0 4px 16px rgba(0, 0, 0, 0.5)',
-          [`&.${toggleButtonClasses.selected}`]: {
-            color: brand[300],
-          },
-        }),
-      }),
-    },
-  },
-  MuiCheckbox: {
-    defaultProps: {
-      disableRipple: true,
-      icon: (
-        <CheckBoxOutlineBlankRoundedIcon sx={{ color: 'hsla(210, 0%, 0%, 0.0)' }} />
-      ),
-      checkedIcon: <CheckRoundedIcon sx={{ height: 14, width: 14 }} />,
-      indeterminateIcon: <RemoveRoundedIcon sx={{ height: 14, width: 14 }} />,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        margin: 10,
-        height: 16,
-        width: 16,
-        borderRadius: 5,
-        border: '1px solid ',
-        borderColor: alpha(gray[300], 0.8),
-        boxShadow: '0 0 0 1.5px hsla(210, 0%, 0%, 0.04) inset',
-        backgroundColor: alpha(gray[100], 0.4),
-        transition: 'border-color, background-color, 120ms ease-in',
-        '&:hover': {
-          borderColor: brand[300],
-        },
-        '&.Mui-focusVisible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '2px',
-          borderColor: brand[400],
-        },
-        '&.Mui-checked': {
-          color: 'white',
-          backgroundColor: brand[500],
-          borderColor: brand[500],
-          boxShadow: `none`,
-          '&:hover': {
-            backgroundColor: brand[600],
-          },
-        },
-        ...theme.applyStyles('dark', {
-          borderColor: alpha(gray[700], 0.8),
-          boxShadow: '0 0 0 1.5px hsl(210, 0%, 0%) inset',
-          backgroundColor: alpha(gray[900], 0.8),
-          '&:hover': {
-            borderColor: brand[300],
-          },
-          '&.Mui-focusVisible': {
-            borderColor: brand[400],
-            outline: `3px solid ${alpha(brand[500], 0.5)}`,
-            outlineOffset: '2px',
-          },
-        }),
-      }),
-    },
-  },
-  MuiInputBase: {
-    styleOverrides: {
-      root: {
-        border: 'none',
-      },
-      input: {
-        '&::placeholder': {
-          opacity: 0.7,
-          color: gray[500],
-        },
-      },
-    },
-  },
-  MuiOutlinedInput: {
-    styleOverrides: {
-      input: {
-        padding: 0,
-      },
-      root: ({ theme }) => ({
-        padding: '8px 12px',
-        color: (theme.vars || theme).palette.text.primary,
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-        border: `1px solid ${(theme.vars || theme).palette.divider}`,
-        backgroundColor: (theme.vars || theme).palette.background.default,
-        transition: 'border 120ms ease-in',
-        '&:hover': {
-          borderColor: gray[400],
-        },
-        [`&.${outlinedInputClasses.focused}`]: {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          borderColor: brand[400],
-        },
-        ...theme.applyStyles('dark', {
-          '&:hover': {
-            borderColor: gray[500],
-          },
-        }),
-        variants: [
-          {
-            props: {
-              size: 'small',
-            },
-            style: {
-              height: '2.25rem',
-            },
-          },
-          {
-            props: {
-              size: 'medium',
-            },
-            style: {
-              height: '2.5rem',
-            },
-          },
-        ],
-      }),
-      notchedOutline: {
-        border: 'none',
-      },
-    },
-  },
-  MuiInputAdornment: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: (theme.vars || theme).palette.grey[500],
-        ...theme.applyStyles('dark', {
-          color: (theme.vars || theme).palette.grey[400],
-        }),
-      }),
-    },
-  },
-  MuiFormLabel: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        typography: theme.typography.caption,
-        marginBottom: 8,
-      }),
-    },
-  },
-};

react-openapi/shared-theme/customizations/navigation.tsx

@@ -1,279 +0,0 @@
-import * as React from 'react';
-import { Theme, alpha, Components } from '@mui/material/styles';
-import { SvgIconProps } from '@mui/material/SvgIcon';
-import { buttonBaseClasses } from '@mui/material/ButtonBase';
-import { dividerClasses } from '@mui/material/Divider';
-import { menuItemClasses } from '@mui/material/MenuItem';
-import { selectClasses } from '@mui/material/Select';
-import { tabClasses } from '@mui/material/Tab';
-import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
-import { gray, brand } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const navigationCustomizations: Components<Theme> = {
-  MuiMenuItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-        padding: '6px 8px',
-        [`&.${menuItemClasses.focusVisible}`]: {
-          backgroundColor: 'transparent',
-        },
-        [`&.${menuItemClasses.selected}`]: {
-          [`&.${menuItemClasses.focusVisible}`]: {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-      }),
-    },
-  },
-  MuiMenu: {
-    styleOverrides: {
-      list: {
-        gap: '0px',
-        [`&.${dividerClasses.root}`]: {
-          margin: '0 -8px',
-        },
-      },
-      paper: ({ theme }) => ({
-        marginTop: '4px',
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-        border: `1px solid ${(theme.vars || theme).palette.divider}`,
-        backgroundImage: 'none',
-        background: 'hsl(0, 0%, 100%)',
-        boxShadow:
-          'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-        [`& .${buttonBaseClasses.root}`]: {
-          '&.Mui-selected': {
-            backgroundColor: alpha(theme.palette.action.selected, 0.3),
-          },
-        },
-        ...theme.applyStyles('dark', {
-          background: gray[900],
-          boxShadow:
-            'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-        }),
-      }),
-    },
-  },
-  MuiSelect: {
-    defaultProps: {
-      IconComponent: React.forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => (
-        <UnfoldMoreRoundedIcon fontSize="small" {...props} ref={ref} />
-      )),
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-        border: '1px solid',
-        borderColor: gray[200],
-        backgroundColor: (theme.vars || theme).palette.background.paper,
-        boxShadow: `inset 0 1px 0 1px hsla(220, 0%, 100%, 0.6), inset 0 -1px 0 1px hsla(220, 35%, 90%, 0.5)`,
-        '&:hover': {
-          borderColor: gray[300],
-          backgroundColor: (theme.vars || theme).palette.background.paper,
-          boxShadow: 'none',
-        },
-        [`&.${selectClasses.focused}`]: {
-          outlineOffset: 0,
-          borderColor: gray[400],
-        },
-        '&:before, &:after': {
-          display: 'none',
-        },
-
-        ...theme.applyStyles('dark', {
-          borderRadius: (theme.vars || theme).shape.borderRadius,
-          borderColor: gray[700],
-          backgroundColor: (theme.vars || theme).palette.background.paper,
-          boxShadow: `inset 0 1px 0 1px ${alpha(gray[700], 0.15)}, inset 0 -1px 0 1px hsla(220, 0%, 0%, 0.7)`,
-          '&:hover': {
-            borderColor: alpha(gray[700], 0.7),
-            backgroundColor: (theme.vars || theme).palette.background.paper,
-            boxShadow: 'none',
-          },
-          [`&.${selectClasses.focused}`]: {
-            outlineOffset: 0,
-            borderColor: gray[900],
-          },
-          '&:before, &:after': {
-            display: 'none',
-          },
-        }),
-      }),
-      select: ({ theme }) => ({
-        display: 'flex',
-        alignItems: 'center',
-        ...theme.applyStyles('dark', {
-          display: 'flex',
-          alignItems: 'center',
-          '&:focus-visible': {
-            backgroundColor: gray[900],
-          },
-        }),
-      }),
-    },
-  },
-  MuiLink: {
-    defaultProps: {
-      underline: 'none',
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: (theme.vars || theme).palette.text.primary,
-        fontWeight: 500,
-        position: 'relative',
-        textDecoration: 'none',
-        width: 'fit-content',
-        '&::before': {
-          content: '""',
-          position: 'absolute',
-          width: '100%',
-          height: '1px',
-          bottom: 0,
-          left: 0,
-          backgroundColor: (theme.vars || theme).palette.text.secondary,
-          opacity: 0.3,
-          transition: 'width 0.3s ease, opacity 0.3s ease',
-        },
-        '&:hover::before': {
-          width: 0,
-        },
-        '&:focus-visible': {
-          outline: `3px solid ${alpha(brand[500], 0.5)}`,
-          outlineOffset: '4px',
-          borderRadius: '2px',
-        },
-      }),
-    },
-  },
-  MuiDrawer: {
-    styleOverrides: {
-      paper: ({ theme }) => ({
-        backgroundColor: (theme.vars || theme).palette.background.default,
-      }),
-    },
-  },
-  MuiPaginationItem: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        '&.Mui-selected': {
-          color: 'white',
-          backgroundColor: (theme.vars || theme).palette.grey[900],
-        },
-        ...theme.applyStyles('dark', {
-          '&.Mui-selected': {
-            color: 'black',
-            backgroundColor: (theme.vars || theme).palette.grey[50],
-          },
-        }),
-      }),
-    },
-  },
-  MuiTabs: {
-    styleOverrides: {
-      root: { minHeight: 'fit-content' },
-      indicator: ({ theme }) => ({
-        backgroundColor: (theme.vars || theme).palette.grey[800],
-        ...theme.applyStyles('dark', {
-          backgroundColor: (theme.vars || theme).palette.grey[200],
-        }),
-      }),
-    },
-  },
-  MuiTab: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: '6px 8px',
-        marginBottom: '8px',
-        textTransform: 'none',
-        minWidth: 'fit-content',
-        minHeight: 'fit-content',
-        color: (theme.vars || theme).palette.text.secondary,
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-        border: '1px solid',
-        borderColor: 'transparent',
-        ':hover': {
-          color: (theme.vars || theme).palette.text.primary,
-          backgroundColor: gray[100],
-          borderColor: gray[200],
-        },
-        [`&.${tabClasses.selected}`]: {
-          color: gray[900],
-        },
-        ...theme.applyStyles('dark', {
-          ':hover': {
-            color: (theme.vars || theme).palette.text.primary,
-            backgroundColor: gray[800],
-            borderColor: gray[700],
-          },
-          [`&.${tabClasses.selected}`]: {
-            color: '#fff',
-          },
-        }),
-      }),
-    },
-  },
-  MuiStepConnector: {
-    styleOverrides: {
-      line: ({ theme }) => ({
-        borderTop: '1px solid',
-        borderColor: (theme.vars || theme).palette.divider,
-        flex: 1,
-        borderRadius: '99px',
-      }),
-    },
-  },
-  MuiStepIcon: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        color: 'transparent',
-        border: `1px solid ${gray[400]}`,
-        width: 12,
-        height: 12,
-        borderRadius: '50%',
-        '& text': {
-          display: 'none',
-        },
-        '&.Mui-active': {
-          border: 'none',
-          color: (theme.vars || theme).palette.primary.main,
-        },
-        '&.Mui-completed': {
-          border: 'none',
-          color: (theme.vars || theme).palette.success.main,
-        },
-        ...theme.applyStyles('dark', {
-          border: `1px solid ${gray[700]}`,
-          '&.Mui-active': {
-            border: 'none',
-            color: (theme.vars || theme).palette.primary.light,
-          },
-          '&.Mui-completed': {
-            border: 'none',
-            color: (theme.vars || theme).palette.success.light,
-          },
-        }),
-        variants: [
-          {
-            props: { completed: true },
-            style: {
-              width: 12,
-              height: 12,
-            },
-          },
-        ],
-      }),
-    },
-  },
-  MuiStepLabel: {
-    styleOverrides: {
-      label: ({ theme }) => ({
-        '&.Mui-completed': {
-          opacity: 0.6,
-          ...theme.applyStyles('dark', { opacity: 0.5 }),
-        },
-      }),
-    },
-  },
-};

react-openapi/shared-theme/customizations/surfaces.ts

@@ -1,113 +0,0 @@
-import { alpha, Theme, Components } from '@mui/material/styles';
-import { gray } from '../themePrimitives';
-
-/* eslint-disable import/prefer-default-export */
-export const surfacesCustomizations: Components<Theme> = {
-  MuiAccordion: {
-    defaultProps: {
-      elevation: 0,
-      disableGutters: true,
-    },
-    styleOverrides: {
-      root: ({ theme }) => ({
-        padding: 4,
-        overflow: 'clip',
-        backgroundColor: (theme.vars || theme).palette.background.default,
-        border: '1px solid',
-        borderColor: (theme.vars || theme).palette.divider,
-        ':before': {
-          backgroundColor: 'transparent',
-        },
-        '&:not(:last-of-type)': {
-          borderBottom: 'none',
-        },
-        '&:first-of-type': {
-          borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
-          borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
-        },
-        '&:last-of-type': {
-          borderBottomLeftRadius: (theme.vars || theme).shape.borderRadius,
-          borderBottomRightRadius: (theme.vars || theme).shape.borderRadius,
-        },
-      }),
-    },
-  },
-  MuiAccordionSummary: {
-    styleOverrides: {
-      root: ({ theme }) => ({
-        border: 'none',
-        borderRadius: 8,
-        '&:hover': { backgroundColor: gray[50] },
-        '&:focus-visible': { backgroundColor: 'transparent' },
-        ...theme.applyStyles('dark', {
-          '&:hover': { backgroundColor: gray[800] },
-        }),
-      }),
-    },
-  },
-  MuiAccordionDetails: {
-    styleOverrides: {
-      root: { mb: 20, border: 'none' },
-    },
-  },
-  MuiPaper: {
-    defaultProps: {
-      elevation: 0,
-    },
-  },
-  MuiCard: {
-    styleOverrides: {
-      root: ({ theme }) => {
-        return {
-          padding: 16,
-          gap: 16,
-          transition: 'all 100ms ease',
-          backgroundColor: gray[50],
-          borderRadius: (theme.vars || theme).shape.borderRadius,
-          border: `1px solid ${(theme.vars || theme).palette.divider}`,
-          boxShadow: 'none',
-          ...theme.applyStyles('dark', {
-            backgroundColor: gray[800],
-          }),
-          variants: [
-            {
-              props: {
-                variant: 'outlined',
-              },
-              style: {
-                border: `1px solid ${(theme.vars || theme).palette.divider}`,
-                boxShadow: 'none',
-                background: 'hsl(0, 0%, 100%)',
-                ...theme.applyStyles('dark', {
-                  background: alpha(gray[900], 0.4),
-                }),
-              },
-            },
-          ],
-        };
-      },
-    },
-  },
-  MuiCardContent: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-        '&:last-child': { paddingBottom: 0 },
-      },
-    },
-  },
-  MuiCardHeader: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-  MuiCardActions: {
-    styleOverrides: {
-      root: {
-        padding: 0,
-      },
-    },
-  },
-};

react-openapi/shared-theme/themePrimitives.ts

@@ -1,403 +0,0 @@
-import { createTheme, alpha, PaletteMode, Shadows } from '@mui/material/styles';
-
-declare module '@mui/material/Paper' {
-  interface PaperPropsVariantOverrides {
-    highlighted: true;
-  }
-}
-declare module '@mui/material/styles' {
-  interface ColorRange {
-    50: string;
-    100: string;
-    200: string;
-    300: string;
-    400: string;
-    500: string;
-    600: string;
-    700: string;
-    800: string;
-    900: string;
-  }
-
-  interface PaletteColor extends ColorRange {}
-
-  interface Palette {
-    baseShadow: string;
-  }
-}
-
-const defaultTheme = createTheme();
-
-const customShadows: Shadows = [...defaultTheme.shadows];
-
-export const brand = {
-  50: 'hsl(210, 100%, 95%)',
-  100: 'hsl(210, 100%, 92%)',
-  200: 'hsl(210, 100%, 80%)',
-  300: 'hsl(210, 100%, 65%)',
-  400: 'hsl(210, 98%, 48%)',
-  500: 'hsl(210, 98%, 42%)',
-  600: 'hsl(210, 98%, 55%)',
-  700: 'hsl(210, 100%, 35%)',
-  800: 'hsl(210, 100%, 16%)',
-  900: 'hsl(210, 100%, 21%)',
-};
-
-export const gray = {
-  50: 'hsl(220, 35%, 97%)',
-  100: 'hsl(220, 30%, 94%)',
-  200: 'hsl(220, 20%, 88%)',
-  300: 'hsl(220, 20%, 80%)',
-  400: 'hsl(220, 20%, 65%)',
-  500: 'hsl(220, 20%, 42%)',
-  600: 'hsl(220, 20%, 35%)',
-  700: 'hsl(220, 20%, 25%)',
-  800: 'hsl(220, 30%, 6%)',
-  900: 'hsl(220, 35%, 3%)',
-};
-
-export const green = {
-  50: 'hsl(120, 80%, 98%)',
-  100: 'hsl(120, 75%, 94%)',
-  200: 'hsl(120, 75%, 87%)',
-  300: 'hsl(120, 61%, 77%)',
-  400: 'hsl(120, 44%, 53%)',
-  500: 'hsl(120, 59%, 30%)',
-  600: 'hsl(120, 70%, 25%)',
-  700: 'hsl(120, 75%, 16%)',
-  800: 'hsl(120, 84%, 10%)',
-  900: 'hsl(120, 87%, 6%)',
-};
-
-export const orange = {
-  50: 'hsl(45, 100%, 97%)',
-  100: 'hsl(45, 92%, 90%)',
-  200: 'hsl(45, 94%, 80%)',
-  300: 'hsl(45, 90%, 65%)',
-  400: 'hsl(45, 90%, 40%)',
-  500: 'hsl(45, 90%, 35%)',
-  600: 'hsl(45, 91%, 25%)',
-  700: 'hsl(45, 94%, 20%)',
-  800: 'hsl(45, 95%, 16%)',
-  900: 'hsl(45, 93%, 12%)',
-};
-
-export const red = {
-  50: 'hsl(0, 100%, 97%)',
-  100: 'hsl(0, 92%, 90%)',
-  200: 'hsl(0, 94%, 80%)',
-  300: 'hsl(0, 90%, 65%)',
-  400: 'hsl(0, 90%, 40%)',
-  500: 'hsl(0, 90%, 30%)',
-  600: 'hsl(0, 91%, 25%)',
-  700: 'hsl(0, 94%, 18%)',
-  800: 'hsl(0, 95%, 12%)',
-  900: 'hsl(0, 93%, 6%)',
-};
-
-export const getDesignTokens = (mode: PaletteMode) => {
-  customShadows[1] =
-    mode === 'dark'
-      ? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
-      : 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
-
-  return {
-    palette: {
-      mode,
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[50],
-          light: brand[300],
-          main: brand[400],
-          dark: brand[700],
-        }),
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-        ...(mode === 'dark' && {
-          contrastText: brand[300],
-          light: brand[500],
-          main: brand[700],
-          dark: brand[900],
-        }),
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-        ...(mode === 'dark' && {
-          light: orange[400],
-          main: orange[500],
-          dark: orange[700],
-        }),
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-        ...(mode === 'dark' && {
-          light: red[400],
-          main: red[500],
-          dark: red[700],
-        }),
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-        ...(mode === 'dark' && {
-          light: green[400],
-          main: green[500],
-          dark: green[700],
-        }),
-      },
-      grey: {
-        ...gray,
-      },
-      divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-        ...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-        ...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-        ...(mode === 'dark' && {
-          hover: alpha(gray[600], 0.2),
-          selected: alpha(gray[600], 0.3),
-        }),
-      },
-    },
-    typography: {
-      fontFamily: 'Inter, sans-serif',
-      h1: {
-        fontSize: defaultTheme.typography.pxToRem(48),
-        fontWeight: 600,
-        lineHeight: 1.2,
-        letterSpacing: -0.5,
-      },
-      h2: {
-        fontSize: defaultTheme.typography.pxToRem(36),
-        fontWeight: 600,
-        lineHeight: 1.2,
-      },
-      h3: {
-        fontSize: defaultTheme.typography.pxToRem(30),
-        lineHeight: 1.2,
-      },
-      h4: {
-        fontSize: defaultTheme.typography.pxToRem(24),
-        fontWeight: 600,
-        lineHeight: 1.5,
-      },
-      h5: {
-        fontSize: defaultTheme.typography.pxToRem(20),
-        fontWeight: 600,
-      },
-      h6: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-        fontWeight: 600,
-      },
-      subtitle1: {
-        fontSize: defaultTheme.typography.pxToRem(18),
-      },
-      subtitle2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 500,
-      },
-      body1: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-      },
-      body2: {
-        fontSize: defaultTheme.typography.pxToRem(14),
-        fontWeight: 400,
-      },
-      caption: {
-        fontSize: defaultTheme.typography.pxToRem(12),
-        fontWeight: 400,
-      },
-    },
-    shape: {
-      borderRadius: 8,
-    },
-    shadows: customShadows,
-  };
-};
-
-export const colorSchemes = {
-  light: {
-    palette: {
-      primary: {
-        light: brand[200],
-        main: brand[400],
-        dark: brand[700],
-        contrastText: brand[50],
-      },
-      info: {
-        light: brand[100],
-        main: brand[300],
-        dark: brand[600],
-        contrastText: gray[50],
-      },
-      warning: {
-        light: orange[300],
-        main: orange[400],
-        dark: orange[800],
-      },
-      error: {
-        light: red[300],
-        main: red[400],
-        dark: red[800],
-      },
-      success: {
-        light: green[300],
-        main: green[400],
-        dark: green[800],
-      },
-      grey: {
-        ...gray,
-      },
-      divider: alpha(gray[300], 0.4),
-      background: {
-        default: 'hsl(0, 0%, 99%)',
-        paper: 'hsl(220, 35%, 97%)',
-      },
-      text: {
-        primary: gray[800],
-        secondary: gray[600],
-        warning: orange[400],
-      },
-      action: {
-        hover: alpha(gray[200], 0.2),
-        selected: `${alpha(gray[200], 0.3)}`,
-      },
-      baseShadow:
-        'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px',
-    },
-  },
-  dark: {
-    palette: {
-      primary: {
-        contrastText: brand[50],
-        light: brand[300],
-        main: brand[400],
-        dark: brand[700],
-      },
-      info: {
-        contrastText: brand[300],
-        light: brand[500],
-        main: brand[700],
-        dark: brand[900],
-      },
-      warning: {
-        light: orange[400],
-        main: orange[500],
-        dark: orange[700],
-      },
-      error: {
-        light: red[400],
-        main: red[500],
-        dark: red[700],
-      },
-      success: {
-        light: green[400],
-        main: green[500],
-        dark: green[700],
-      },
-      grey: {
-        ...gray,
-      },
-      divider: alpha(gray[700], 0.6),
-      background: {
-        default: gray[900],
-        paper: 'hsl(220, 30%, 7%)',
-      },
-      text: {
-        primary: 'hsl(0, 0%, 100%)',
-        secondary: gray[400],
-      },
-      action: {
-        hover: alpha(gray[600], 0.2),
-        selected: alpha(gray[600], 0.3),
-      },
-      baseShadow:
-        'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px',
-    },
-  },
-};
-
-export const typography = {
-  fontFamily: 'Inter, sans-serif',
-  h1: {
-    fontSize: defaultTheme.typography.pxToRem(48),
-    fontWeight: 600,
-    lineHeight: 1.2,
-    letterSpacing: -0.5,
-  },
-  h2: {
-    fontSize: defaultTheme.typography.pxToRem(36),
-    fontWeight: 600,
-    lineHeight: 1.2,
-  },
-  h3: {
-    fontSize: defaultTheme.typography.pxToRem(30),
-    lineHeight: 1.2,
-  },
-  h4: {
-    fontSize: defaultTheme.typography.pxToRem(24),
-    fontWeight: 600,
-    lineHeight: 1.5,
-  },
-  h5: {
-    fontSize: defaultTheme.typography.pxToRem(20),
-    fontWeight: 600,
-  },
-  h6: {
-    fontSize: defaultTheme.typography.pxToRem(18),
-    fontWeight: 600,
-  },
-  subtitle1: {
-    fontSize: defaultTheme.typography.pxToRem(18),
-  },
-  subtitle2: {
-    fontSize: defaultTheme.typography.pxToRem(14),
-    fontWeight: 500,
-  },
-  body1: {
-    fontSize: defaultTheme.typography.pxToRem(14),
-  },
-  body2: {
-    fontSize: defaultTheme.typography.pxToRem(14),
-    fontWeight: 400,
-  },
-  caption: {
-    fontSize: defaultTheme.typography.pxToRem(12),
-    fontWeight: 400,
-  },
-};
-
-export const shape = {
-  borderRadius: 8,
-};
-
-// @ts-ignore
-const defaultShadows: Shadows = [
-  'none',
-  'var(--template-palette-baseShadow)',
-  ...defaultTheme.shadows.slice(2),
-];
-export const shadows = defaultShadows;

react-openapi/types/config.ts

@@ -10,18 +10,33 @@ export type FieldType =
   | 'object'
   | 'array';
 
+export interface SelectOption {
+  key: string;
+  value: string;
+}
+
+export interface EnumOption {
+  key: string;
+  value: string;
+}
+
 export interface ResourceField {
+  displayFormat: string;
   type: FieldType;
   label: string;
   required?: boolean;
   options?: string[];
   readOnly?: boolean;
   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";
+
 export interface ResourceConfig {
   name: string;
   label: string;
@@ -30,12 +45,19 @@ export interface ResourceConfig {
   primaryKey: string;
   fields: Record<string, ResourceField>;
   pagination?: boolean;
+  hidden?: boolean;
+  filterOptions?: {
+    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>;

react-openapi/types/overrides.ts

@@ -1,15 +1,89 @@
-/**
- * This file contains application-specific overrides and configuration
- * for the generic Admin Panel.
- */
+import { ResourceField, FieldType } from './config';
+
+export interface EnumOption {
+  key: string;
+  value: string;
+}
 
 export interface FieldOverride {
-  displayField?: string | string[];
+  displayFormat?: string;
   display?: boolean;
   formatter?: (value: any) => string;
+  filterType?: "autocomplete" | "multiselect" | "number-range" | "date-range";
+  enumLabels?: Record<string, string>;
+  // New optional properties to support custom config extensions
+  path?: string;
+  refers?: string;
+  // Added support for overriding the base field type and label
+  type?: FieldType;
+  label?: string;
 }
 
 export interface ResourceOverride {
   fields?: Record<string, FieldOverride>;
   pagination?: boolean;
+  hidden?: boolean;
+  filterOptions?: {
+    mode?: "server" | "client";
+    fields?: string[];
+  };
+  enumOption?: EnumOption;
+  // New optional property for reference‑type resources
+  referenceOptions?: {
+    enumOption?: EnumOption;
+    autoComplete?: boolean;
+    prefetch?: boolean;
+  };
 }
+
+export interface FieldComponentProps {
+  name: string;
+  field: ResourceField;
+  value: any;
+  onChange: (val: any) => void;
+  disabled?: boolean;
+  error?: string;
+  baseUrl?: string;
+  relationDataMap?: Record<string, any[]>;
+  uploadFile?: (file: File) => Promise<string | null>;
+  uploading?: boolean;
+}
+
+export type FieldComponent = React.ComponentType<FieldComponentProps>;
+
+export type FieldComponents = Partial<Record<FieldType, FieldComponent>> & {
+  relation?: FieldComponent;
+  image?: FieldComponent;
+  default?: FieldComponent;
+  dateRange?: FieldComponent;
+  numberRange?: FieldComponent;
+  FormField?: React.ComponentType<any>;
+  GenericForm?: React.ComponentType<any>;
+};
+
+export interface CellRendererProps {
+  value: any;
+  row: any;
+  field: ResourceField;
+  fieldKey: string;
+  config: import('./config').ResourceConfig;
+  onNavigate?: (resourceName: string, id: string) => void;
+  isMobile?: boolean;
+}
+
+export type CellRenderer = React.ComponentType<CellRendererProps>;
+
+export interface EnhancedTableComponents {
+  cellRenderers?: Partial<Record<FieldType, CellRenderer>>;
+}
+
+export interface FilterBarComponents {
+  filterInputs?: Record<string, React.ComponentType<{
+    field: ResourceField;
+    value: any;
+    onChange: (val: any) => void;
+    options: string[];
+  }>>;
+}
+
+export type { FieldType };

react-openapi/utils/openapi_loader.ts

@@ -1,6 +1,5 @@
 import SwaggerParser from "@apidevtools/swagger-parser";
 import { AppConfig, ResourceConfig, ResourceField, FieldType } from "../types/config";
-import { configuration, profileConfiguration } from "../../src/openapi-config";
 
 /**
  * Maps OpenAPI property types to our internal FieldType
@@ -37,18 +36,53 @@ 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,
-  schemaToResourceMap: Map<any, string>
+  schemaToResourceMap: Map<any, string>,
+  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 || {};
+// console.log('inside parseSchemaFields configuration...', configuration['accounts']['referenceOptions'])
 
   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);
+    if (type === 'enum' && (!resolvedProp.enum || resolvedProp.enum.length === 0)) {
+      throw new Error(
+        `OpenAPI schema error: field "${resourceName}.${key}" is type "enum" but has no enum values. ` +
+        `Add an "enum" array with at least one value to the OpenAPI schema definition.`
+      );
+    }
     const override = overrides[key];
 
     // Explicitly skip 'id' as it's the primary key and handled elsewhere
@@ -57,12 +91,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 +105,36 @@ 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].referenceOptions.enumOption;
+      // console.log('if relation configuration...', configuration['accounts']['referenceOptions'])
+        if (explicitEnumOption) {
+          fields[key].enumOption = explicitEnumOption;
+        } else {
+          // No explicit enumOption supplied – this is a configuration error.
+          // We abort loading so the problem is visible immediately.
+          throw new Error(
+            `Missing enumOption for relation "${relation}" on field "${key}". ` +
+            `Define referenceOptions.enumOption in the configuration for resource "${relation}".`
+          );
+        }
+
     }
 
     // Recursively parse nested objects (only if not a relation)
-    if (fields[key].type === "object" && prop.properties && !relation) {
-      fields[key].schema = parseSchemaFields(prop, resourceName, schemaToResourceMap);
+    if (fields[key].type === "object" && resolvedProp.properties && !relation) {
+    // console.log('recursive configuration...', configuration['accounts']['referenceOptions'])
+      fields[key].schema = parseSchemaFields(resolvedProp, resourceName, schemaToResourceMap, configuration);
     }
   }
 
@@ -94,7 +144,8 @@ function parseSchemaFields(
 /**
  * Scans paths to identify resources and their basic configuration
  */
-export async function loadConfigFromOpenApi(baseUrl: string): Promise<AppConfig> {
+export async function loadConfigFromOpenApi(baseUrl: string, configuration: Record<string, any> = {}, profileConfiguration: any = {}): Promise<AppConfig> {
+// console.log('init configuration...', configuration['accounts']['referenceOptions'])
   // Use SwaggerParser to dereference the spec.
   // Dereferencing preserves object identity for $ref targets.
   const api = await SwaggerParser.dereference(
@@ -141,28 +192,47 @@ export async function loadConfigFromOpenApi(baseUrl: string): Promise<AppConfig>
   }
 
   // 2. Generate ResourceConfig for each identified resource
-  for (const [name, info] of Object.entries(resourcePaths)) {
-    const listPath = info.listPath || `/${name}`;
-    const listOp = paths[listPath]?.get;
-    if (!listOp || !info.schemaObj) continue;
+    for (const [name, info] of Object.entries(resourcePaths)) {
+      const listPath = info.listPath || `/${name}`;
+      const listOp = paths[listPath]?.get;
+      // Always create a resource entry even if the list operation or schema is missing.
+      // This enables relation look‑ups for resources that only have overrides (e.g., accounts, tags).
+      // If we lack a schema we fall back to an empty field map.
+      const hasList = !!listOp;
+      const schema = info.schemaObj;
+      const label = name.charAt(0).toUpperCase() + name.slice(1, -1);
+      const pluralLabel = name.charAt(0).toUpperCase() + name.slice(1);
 
-    const schema = info.schemaObj;
-    const label = name.charAt(0).toUpperCase() + name.slice(1, -1);
-    const pluralLabel = name.charAt(0).toUpperCase() + name.slice(1);
+      const fields = schema ? parseSchemaFields(schema, name, schemaToResourceMap, configuration) : {};
 
-    const fields = parseSchemaFields(schema, name, schemaToResourceMap);
+      const resourceOverride = configuration[name] || {};
+      const fo = resourceOverride.filterOptions || {};
 
-    const resourceOverride = configuration[name] || {};
-
-    resources.push({
-      name,
-      label: schema.title || label,
-      pluralLabel: pluralLabel,
-      endpoint: listPath,
-      primaryKey: "id", // Strict default, no heuristics
-      fields,
-      pagination: resourceOverride.pagination,
-    });
+      resources.push({
+        name,
+        label: schema?.title || label,
+        pluralLabel: pluralLabel,
+        endpoint: listPath,
+        primaryKey: "id",
+        fields,
+        pagination: resourceOverride.pagination,
+        hidden: resourceOverride.hidden,
+        filterOptions: {
+          mode: fo.mode || "server",
+          fields: fo.fields,
+        },
+      });
+    // console.log('Loaded resource:', name, 'endpoint:', listPath, 'fields count:', Object.keys(fields).length);
+    }
+  // Collect standalone enum schemas (e.g. FetchRequestStatus, AccountType, etc.)
+  const enums: Record<string, string[]> = {};
+  const apiDoc = api as any;
+  if (apiDoc.components?.schemas) {
+    for (const [name, schema] of Object.entries(apiDoc.components.schemas) as [string, any]) {
+      if (schema.enum) {
+        enums[name] = schema.enum;
+      }
+    }
   }
 
   // @ts-ignore
@@ -173,6 +243,7 @@ export async function loadConfigFromOpenApi(baseUrl: string): Promise<AppConfig>
     baseUrl: serverBaseUrl,
     authBaseUrl: authBaseUrl,
     resources,
+    enums,
     profile: profileConfiguration,
   };
 }

react-openapi/utils/options.ts

@@ -0,0 +1,45 @@
+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[] {
+// console.log('getFieldOptions called for field', field.label, 'type', field.type, 'enumOption', field.enumOption);
+  if (field.type === 'enum') {
+    return (field.options ?? []).map(opt => ({
+      key: opt,
+      value: field.enumLabels?.[opt] ?? opt,
+    }));
+  }
+
+  if (field.relation) {
+    const data = Array.isArray(relationData) ? relationData : [];
+  // console.log('Getting options for relation', field.relation, 'data count:', data.length);
+    if (data.length === 0) {
+      throw new Error(`Relation data for "${field.relation}" is missing or empty – cannot build options for field "${field.label}"`);
+    }
+    const enumOption = field.enumOption;
+    if (!enumOption) {
+      throw new Error(
+        `Missing enumOption for relation "${field.relation}" on field "${field}". ` +
+        `Define referenceOptions.enumOption in the configuration for resource "${field.relation}".`
+      );
+    }
+    const result = data.map(item => ({
+      key: String(item[enumOption.key] ?? item.id ?? item._id),
+      value: resolveTemplate(enumOption.value, item),
+    }));
+  // console.log('Option map for', field.relation, 'first entry:', data[0], 'result key:', result[0]?.key);
+    return result;
+  }
+
+  return [];
+}
+
+export function toGridValueOptions(options: SelectOption[]): { value: string; label: string }[] {
+  return options.map(opt => ({ value: opt.key, label: opt.value }));
+}

src/Dashboard.tsx

@@ -0,0 +1,339 @@
+import * as React from "react";
+import {
+  Box,
+  Container,
+  CircularProgress,
+  Alert,
+  TextField,
+  Paper,
+  Autocomplete,
+  Button
+} from "@mui/material";
+
+import DashboardView from "./components/Dashboard";
+
+import {
+  DashboardState,
+  DashboardStateSetters,
+  DashboardFlow,
+} from "./components/Dashboard";
+
+import { configuration } from "./dashboard-config";
+import {
+  useReport,
+  prepareReport,
+} from "./features/report";
+import { useResourceByName } from "../react-openapi";
+
+function formatSnapshotDate(iso: string) {
+  const d = new Date(iso);
+  return d.toLocaleString(undefined, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
+
+export default function Dashboard() {
+  const [state, setState] = React.useState<DashboardState>({
+    flow: "outflows",
+    periodType: "rolling",
+    selectedPeriodId: null,
+    selectedGroupKey: null,
+    comparison: false,
+  });
+
+  const [appliedPayees, setAppliedPayees] = React.useState<string[]>([]);
+  const [appliedTags, setAppliedTags] = React.useState<string[]>([]);
+
+  const [payeeInput, setPayeeInput] = React.useState<string[]>([]);
+  const [tagsInput, setTagsInput] = React.useState<string[]>([]);
+
+  const [loadedPayees, setLoadedPayees] = React.useState<string[]>([]);
+  const [loadedTags, setLoadedTags] = React.useState<string[]>([]);
+
+  const [selectedSnapshotId, setSelectedSnapshotId] = React.useState<string | null>(null);
+
+  const { data: snapshotsData } = useResourceByName("reports").useList();
+  const snapshotOptions = React.useMemo(() => {
+    const options: { label: string; value: string | null }[] = [
+      { label: "Latest (auto)", value: null },
+    ];
+    if (snapshotsData?.data) {
+      for (const snap of snapshotsData.data) {
+        options.push({
+          label: `Snapshot from ${formatSnapshotDate(snap.created_at)}`,
+          value: snap.snapshot_id,
+        });
+      }
+    }
+    return options;
+  }, [snapshotsData]);
+
+  const selectedSnapshotOption = snapshotOptions.find((o) => o.value === selectedSnapshotId) ?? snapshotOptions[0];
+
+  const report = useReport({
+    snapshot_id: selectedSnapshotId ?? undefined,
+    periods: ["daily", "weekly", "monthly", "all"],
+    flow: state.flow,
+    payee: appliedPayees.length > 0 ? appliedPayees : undefined,
+    tags: appliedTags.length > 0 ? appliedTags : undefined,
+  });
+
+  React.useEffect(() => {
+    if (report.data) {
+      setLoadedPayees(prev => {
+        const pSet = new Set<string>(prev);
+        report.data.buckets.forEach((b: any) => {
+          Object.values(b.periods).forEach((periodArray: any) => {
+            periodArray?.forEach((p: any) => {
+              p.metric?.transactions?.forEach((t: any) => {
+                if (t.payee?.name) pSet.add(t.payee.name);
+              });
+            });
+          });
+        });
+        return Array.from(pSet).sort();
+      });
+
+      setLoadedTags(prev => {
+        const tSet = new Set<string>(prev);
+        report.data.buckets.forEach((b: any) => {
+          Object.values(b.periods).forEach((periodArray: any) => {
+            periodArray?.forEach((p: any) => {
+              p.metric?.transactions?.forEach((t: any) => {
+                t.tags?.forEach((tag: any) => tSet.add(tag.name || tag));
+              });
+            });
+          });
+        });
+        return Array.from(tSet).sort();
+      });
+    }
+  }, [report.data]);
+
+  const toggleFlow =
+    React.useCallback(() => {
+      setState((prev) => ({
+        ...prev,
+
+        flow:
+          prev.flow ===
+          "outflows"
+            ? "inflows"
+            : "outflows",
+
+        selectedGroupKey:
+          null,
+
+        selectedPeriodId:
+          null,
+      }));
+    }, []);
+
+  const setFlow =
+    React.useCallback(
+      (
+        flow: DashboardFlow
+      ) => {
+        setState((prev) => ({
+          ...prev,
+
+          flow,
+
+          selectedGroupKey:
+            null,
+
+          selectedPeriodId:
+            null,
+        }));
+      },
+      []
+    );
+
+  const togglePeriodType =
+    React.useCallback(() => {
+      setState((prev) => ({
+        ...prev,
+
+        periodType:
+          prev.periodType ===
+          "rolling"
+            ? "calendar"
+            : "rolling",
+      }));
+    }, []);
+
+  const toggleComparison =
+    React.useCallback(() => {
+      setState((prev) => ({
+        ...prev,
+
+        comparison:
+          !prev.comparison,
+      }));
+    }, []);
+
+  const setSelectedPeriodId =
+    React.useCallback(
+      (
+        selectedPeriodId: DashboardState["selectedPeriodId"]
+      ) => {
+        setState((prev) => ({
+          ...prev,
+
+          selectedPeriodId,
+        }));
+      },
+      []
+    );
+
+  const setSelectedGroupKey =
+    React.useCallback(
+      (
+        selectedGroupKey: DashboardState["selectedGroupKey"]
+      ) => {
+        setState((prev) => ({
+          ...prev,
+
+          selectedGroupKey,
+        }));
+      },
+      []
+    );
+
+  const stateSetters: DashboardStateSetters =
+    React.useMemo(
+      () => ({
+        toggleFlow,
+
+        setFlow,
+
+        togglePeriodType,
+
+        toggleComparison,
+
+        setSelectedPeriodId,
+
+        setSelectedGroupKey,
+      }),
+      [
+        toggleFlow,
+        setFlow,
+        togglePeriodType,
+        toggleComparison,
+        setSelectedPeriodId,
+        setSelectedGroupKey,
+      ]
+    );
+
+  const isLoading = report.isLoading;
+  const error = report.error;
+
+  if (isLoading && !report.data) {
+    return (
+      <Box sx={{ display: "flex", justifyContent: "center", alignItems: "center", height: "60vh" }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  if (error) {
+    return (
+      <Container sx={{ mt: 4 }}>
+        <Alert severity="error">{String(error)}</Alert>
+      </Container>
+    );
+  }
+
+  if (!report.data) {
+    return null;
+  }
+
+  const data = prepareReport(report.data);
+  return (
+    <Box>
+      <Container>
+        <Paper 
+          sx={{ 
+            mt: 4, 
+            p: 2, 
+            display: "flex", 
+            flexDirection: { xs: "column", sm: "row" },
+            gap: 2, 
+            alignItems: { xs: "stretch", sm: "flex-end" }, 
+            borderRadius: 4,
+            mb: -2 // pull up to be closer to the dashboard container below
+          }} 
+          elevation={0} 
+          variant="outlined"
+        >
+          <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: { sm: 250 } }}>
+            <Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
+              Filter by Payee
+            </Box>
+            <Autocomplete
+              multiple
+              freeSolo
+              options={loadedPayees}
+              value={payeeInput}
+              onChange={(_, val) => setPayeeInput(val as string[])}
+              renderInput={(params) => <TextField {...params} placeholder="Add payees..." />}
+              sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
+            />
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', flex: 1, minWidth: { sm: 250 } }}>
+            <Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
+              Filter by Tags
+            </Box>
+            <Autocomplete
+              multiple
+              freeSolo
+              options={loadedTags}
+              value={tagsInput}
+              onChange={(_, val) => setTagsInput(val as string[])}
+              renderInput={(params) => <TextField {...params} placeholder="Add tags..." />}
+              sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
+            />
+          </Box>
+          <Box sx={{ display: 'flex', flexDirection: 'column', minWidth: { sm: 220 } }}>
+            <Box sx={{ typography: 'caption', mb: 1, color: 'text.secondary' }}>
+              Snapshot
+            </Box>
+            <Autocomplete
+              options={snapshotOptions}
+              value={selectedSnapshotOption}
+              onChange={(_, option) => setSelectedSnapshotId(option?.value ?? null)}
+              getOptionLabel={(o) => o.label}
+              isOptionEqualToValue={(o, v) => o.value === v.value}
+              renderInput={(params) => <TextField {...params} placeholder="Select snapshot..." />}
+              sx={{ '& .MuiOutlinedInput-root': { height: 'auto', minHeight: '2.5rem', py: 0.5 } }}
+            />
+          </Box>
+
+          <Button
+            variant="contained"
+            size="large"
+            onClick={() => {
+              setAppliedPayees(payeeInput);
+              setAppliedTags(tagsInput);
+            }}
+            disabled={isLoading}
+            sx={{ height: 40, borderRadius: 2 }}
+          >
+            Apply
+          </Button>
+        </Paper>
+      </Container>
+      <DashboardView
+        config={configuration}
+        data={data}
+        state={state}
+        stateSetters={stateSetters}
+        isFetching={report.isFetching}
+      />
+    </Box>
+  );
+}

src/FetchRequestDetail.tsx

@@ -0,0 +1,674 @@
+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 {
+  useFetchRequestAmbiguities,
+  useResolveAmbiguity,
+} from "./features/fetch-requests";
+import type {
+  FetchRequestStatus,
+  SSEEvent,
+  ProgressMessage,
+} from "./features/fetch-requests";
+import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
+import { useResourceByName, useConfig, defaultFieldComponents } 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 { useRead, usePatch } = useResourceByName("fetch-requests", { fieldComponents: defaultFieldComponents });
+  const { data: fetchRequest, isLoading, error: fetchError, refetch: refetchRequest } = useRead(id!);
+  const updateMutation = usePatch();
+  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>
+  );
+}

src/FetchRequests.tsx

@@ -0,0 +1,600 @@
+import * as React from "react";
+import {
+  Box,
+  Container,
+  Paper,
+  Typography,
+  Button,
+  ToggleButtonGroup,
+  ToggleButton,
+  Chip,
+  IconButton,
+  CircularProgress,
+  Alert,
+  Snackbar,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Tooltip,
+  TextField,
+  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 {
+  useUploadFile,
+} from "./features/fetch-requests";
+import type {
+  FetchRequest,
+  FetchRequestStatus,
+  FileSource,
+  EmailSource,
+} from "./features/fetch-requests";
+import { RETRY_MAX, formatApiError } from "./features/fetch-requests";
+import { useNavigate } from "react-router-dom";
+import { useResourceByName, useConfig, defaultFieldComponents } from "../react-openapi";
+import type { ResourceField } 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 "\u2014";
+  const s = start ? new Date(start).toLocaleDateString() : "?";
+  const e = end ? new Date(end).toLocaleDateString() : "?";
+  return `${s} \u2192 ${e}`;
+}
+
+function shortId(fp: string) {
+  return fp.length > 8 ? fp.slice(0, 8) + "\u2026" : 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");
+  const [format, setFormat] = React.useState("");
+  const [file, setFile] = React.useState<File | null>(null);
+  const [uploadedPath, setUploadedPath] = React.useState<string | null>(null);
+  const [fromEmail, setFromEmail] = React.useState("");
+  const [subject, setSubject] = React.useState("");
+  const [rawTerms, setRawTerms] = React.useState("");
+  const [startDate, setStartDate] = React.useState("");
+  const [endDate, setEndDate] = React.useState("");
+  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 [accountFilter, setAccountFilter] = React.useState("");
+  const [sourceFilter, setSourceFilter] = React.useState<"all" | "file" | "email">("all");
+
+  const { useList, useCreate, usePatch, useDelete, components } = useResourceByName("fetch-requests", { fieldComponents: defaultFieldComponents });
+  const { data: listData, isLoading, isFetching, refetch } = useList({
+    ...(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 formatField: ResourceField | undefined = fetchRes?.fields?.source?.schema?.format;
+  const formatOptions: string[] = formatField?.options ?? [];
+  const startDateField: ResourceField | undefined = fetchRes?.fields?.start_date;
+  const endDateField: ResourceField | undefined = fetchRes?.fields?.end_date;
+  const payorUsernameField: ResourceField | undefined = fetchRes?.fields?.payor_username;
+
+  const createMutation = useCreate();
+  const updateMutation = usePatch();
+  const deleteMutation = useDelete();
+  const uploadMutation = useUploadFile();
+
+  const requests = listData?.data ?? [];
+
+  const handleUpload = async () => {
+    if (!file) return;
+    const result = await uploadMutation.mutateAsync(file);
+    if (result?.saved_as) {
+      setUploadedPath(result.saved_as);
+      if (!format) setFormat(file.name.split(".").pop() || "");
+      setSnackbar({ message: `File uploaded: ${result.saved_as}`, severity: "success" });
+    }
+  };
+
+  const handleCreate = async () => {
+    if (!accountName) return;
+
+    let source: FileSource | EmailSource;
+
+    if (sourceType === "file") {
+      if (!uploadedPath || !format) return;
+      source = { path: uploadedPath, format } as FileSource;
+    } else {
+      if (!format) return;
+      const emailSource: EmailSource = { format };
+      if (fromEmail) emailSource.from_email = fromEmail;
+      if (subject) emailSource.subject = subject;
+      if (rawTerms.trim()) emailSource.raw_terms = rawTerms.split(",").map((s) => s.trim()).filter(Boolean);
+      source = emailSource;
+    }
+
+    try {
+      const result = await createMutation.mutateAsync({
+        source,
+        account_name: accountName,
+        payor_username: payorUsername,
+        ...(startDate ? { start_date: new Date(startDate).toISOString() } : {}),
+        ...(endDate ? { end_date: new Date(endDate).toISOString() } : {}),
+      });
+      setSnackbar({ message: "Fetch request created", severity: "success" });
+      resetForm();
+      navigate(`/fetch-requests/${result.id}`);
+    } catch (err: any) {
+      if (err?.response?.status === 409) {
+        setSnackbar({ message: "Duplicate \u2014 same fingerprint already exists", severity: "error" });
+      } else {
+        setSnackbar({ message: formatApiError(err) || "Failed to create fetch request", severity: "error" });
+      }
+    }
+  };
+
+  const resetForm = () => {
+    setAccountName("");
+    setFormat("");
+    setFile(null);
+    setUploadedPath(null);
+    setFromEmail("");
+    setSubject("");
+    setRawTerms("");
+    setStartDate("");
+    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 {
+      await deleteMutation.mutateAsync(deleteTarget.id);
+      setSnackbar({ message: "Fetch request deleted", severity: "success" });
+    } catch {
+      setSnackbar({ message: "Failed to delete", severity: "error" });
+    }
+    setDeleteTarget(null);
+  };
+
+  const sourceTypeOptions: ("all" | "file" | "email")[] = ["all", "file", "email"];
+
+  return (
+    <Container sx={{ mt: 4, mb: 4 }}>
+      <Typography variant="h5" fontWeight="bold" gutterBottom>
+        Fetch Request Pipeline
+      </Typography>
+
+      <Paper sx={{ p: 3, mb: 4, borderRadius: 4 }} variant="outlined">
+        <Typography variant="subtitle1" fontWeight={600} gutterBottom>
+          New Fetch Request
+        </Typography>
+
+        <ToggleButtonGroup
+          value={sourceType}
+          exclusive
+          onChange={(_, val) => val && setSourceType(val)}
+          sx={{ mb: 3 }}
+          size="small"
+        >
+          <ToggleButton value="file">File Upload</ToggleButton>
+          <ToggleButton value="email">Email Fetch</ToggleButton>
+        </ToggleButtonGroup>
+
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+          {sourceType === "file" ? (
+            <>
+              <Box sx={{ display: "flex", gap: 2, alignItems: "flex-end" }}>
+                <Button variant="outlined" component="label" startIcon={<CloudUploadIcon />}>
+                  Choose File
+                  <input type="file" hidden onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
+                </Button>
+                <Typography variant="body2" sx={{ flex: 1, color: "text.secondary" }}>
+                  {file ? file.name : "No file selected"}
+                </Typography>
+                <Button
+                  variant="contained"
+                  onClick={handleUpload}
+                  disabled={!file || uploadMutation.isPending}
+                >
+                  {uploadMutation.isPending ? "Uploading..." : "Upload"}
+                </Button>
+              </Box>
+              {uploadedPath && (
+                <Alert severity="success" sx={{ py: 0 }}>
+                  Uploaded as: {uploadedPath}
+                </Alert>
+              )}
+              {formatField && components?.FormField ? (
+                <components.FormField
+                  name="format"
+                  field={formatField}
+                  value={format}
+                  onChange={setFormat}
+                />
+              ) : (
+                <FormControl 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>
+              )}
+            </>
+          ) : (
+            <>
+              {formatField && components?.FormField ? (
+                <components.FormField
+                  name="format"
+                  field={formatField}
+                  value={format}
+                  onChange={setFormat}
+                />
+              ) : (
+                <FormControl 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>
+              )}
+              <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
+            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" } }}
+          />
+          {payorUsernameField && components?.FormField ? (
+            <components.FormField
+              name="payor_username"
+              field={payorUsernameField}
+              value={payorUsername}
+              onChange={setPayorUsername}
+            />
+          ) : (
+            <TextField label="Payor Username" value={payorUsername} onChange={(e) => setPayorUsername(e.target.value)} size="small" helperText="Default: aetos" />
+          )}
+
+          <Box sx={{ display: "flex", gap: 2 }}>
+            {startDateField && components?.date ? (
+              <Box sx={{ flex: 1 }}>
+                <components.date
+                  name="start_date"
+                  field={startDateField}
+                  value={startDate}
+                  onChange={setStartDate}
+                />
+              </Box>
+            ) : (
+              <TextField
+                label="Start Date"
+                type="date"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+                size="small"
+                InputLabelProps={{ shrink: true }}
+                inputProps={{ max: new Date().toISOString().split("T")[0] }}
+                sx={{ flex: 1 }}
+              />
+            )}
+            {endDateField && components?.date ? (
+              <Box sx={{ flex: 1 }}>
+                <components.date
+                  name="end_date"
+                  field={endDateField}
+                  value={endDate}
+                  onChange={setEndDate}
+                />
+              </Box>
+            ) : (
+              <TextField
+                label="End Date"
+                type="date"
+                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>
+
+          <Button
+            variant="contained"
+            onClick={handleCreate}
+            disabled={createMutation.isPending || !accountName || (sourceType === "file" && (!uploadedPath || !format)) || (sourceType === "email" && !format)}
+          >
+            {createMutation.isPending ? "Creating..." : "Create Fetch Request"}
+          </Button>
+        </Box>
+      </Paper>
+
+      <Paper sx={{ borderRadius: 4, mb: 2, p: 2 }} variant="outlined">
+        <Box sx={{ display: "flex", alignItems: "center", gap: 2, flexWrap: "wrap" }}>
+          <FormControl size="small" sx={{ minWidth: 200 }}>
+            <InputLabel>Status</InputLabel>
+            <Select
+              multiple
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value as string[])}
+              input={<OutlinedInput label="Status" />}
+              renderValue={(selected) => (selected as string[]).join(", ")}
+            >
+              {(config?.enums?.FetchRequestStatus ?? []).map((s: string) => (
+                <MenuItem key={s} value={s}>{s.replace(/_/g, " ")}</MenuItem>
+              ))}
+            </Select>
+          </FormControl>
+          <Autocomplete
+            options={accountOptions}
+            value={accountFilter || null}
+            onChange={(_, val) => setAccountFilter(val ?? "")}
+            renderInput={(params) => (
+              <TextField {...params} label="Account" size="small" sx={{ minWidth: 160 }} />
+            )}
+            sx={{ minWidth: 160, "& .MuiOutlinedInput-root": { height: "auto", minHeight: "2.5rem" } }}
+          />
+          <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 }}>
+          <CircularProgress />
+        </Box>
+      ) : requests.length === 0 ? (
+        <Box sx={{ p: 4, textAlign: "center", color: "text.secondary" }}>
+          No fetch requests yet
+        </Box>
+      ) : (
+        <Paper variant="outlined" sx={{ borderRadius: 4 }}>
+          <Box sx={{ overflowX: "auto" }}>
+            <Box component="table" sx={{ width: "100%", borderCollapse: "collapse" }}>
+              <Box component="thead">
+                <Box component="tr" sx={{ borderBottom: 1, borderColor: "divider" }}>
+                  {["ID", "Account", "Source", "Date Range", "Status", "Retries", "Created", "Actions"].map((h) => (
+                    <Box
+                      key={h}
+                      component="th"
+                      sx={{ px: 2, py: 1.5, textAlign: h === "Actions" ? "right" : "left", fontWeight: 600, fontSize: "0.8rem", color: "text.secondary", whiteSpace: "nowrap" }}
+                    >
+                      {h}
+                    </Box>
+                  ))}
+                </Box>
+              </Box>
+              <Box component="tbody">
+                {[...requests]
+                  .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+                  .map((req: FetchRequest) => (
+                  <Box
+                    key={req.id}
+                    component="tr"
+                    onClick={() => navigate(`/fetch-requests/${req.id}`)}
+                    sx={{
+                      cursor: "pointer",
+                      borderBottom: 1,
+                      borderColor: "divider",
+                      "&:hover": { bgcolor: "action.hover" },
+                      "&:last-child": { borderBottom: 0 },
+                    }}
+                  >
+                    <Box component="td" sx={{ px: 2, py: 1.5, fontFamily: "monospace", fontSize: "0.8rem" }}>
+                      <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                        {shortId(req.fingerprint)}
+                        <IconButton
+                          size="small"
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            navigator.clipboard.writeText(req.fingerprint);
+                            setSnackbar({ message: "Copied!", severity: "success" });
+                          }}
+                          sx={{ opacity: 0.5, '&:hover': { opacity: 1 } }}
+                        >
+                          <ContentCopyIcon sx={{ fontSize: 14 }} />
+                        </IconButton>
+                      </Box>
+                    </Box>
+                    <Box component="td" sx={{ px: 2, py: 1.5, fontSize: "0.875rem" }}>
+                      {req.account_name}
+                    </Box>
+                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
+                      <Chip
+                        label={"path" in req.source ? "File" : "Email"}
+                        size="small"
+                        variant="outlined"
+                        color={"path" in req.source ? "primary" : "secondary"}
+                      />
+                    </Box>
+                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
+                      <Typography variant="body2" sx={{ fontSize: "0.8rem", whiteSpace: "nowrap" }}>
+                        {formatDateRange((req as any).start_date, (req as any).end_date)}
+                      </Typography>
+                    </Box>
+                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
+                      <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>
+                    </Box>
+                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
+                      {(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" }}>
+                          \u2014
+                        </Typography>
+                      )}
+                    </Box>
+                    <Box component="td" sx={{ px: 2, py: 1.5, whiteSpace: "nowrap", fontSize: "0.8rem" }}>
+                      {formatDate(req.created_at)}
+                    </Box>
+                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
+                      <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
+                        {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>
+                    </Box>
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+          </Box>
+        </Paper>
+      )}
+
+      <Snackbar
+        open={!!snackbar}
+        autoHideDuration={4000}
+        onClose={() => setSnackbar(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+      >
+        {snackbar ? <Alert severity={snackbar.severity} onClose={() => setSnackbar(null)}>{snackbar.message}</Alert> : undefined}
+      </Snackbar>
+
+      <Dialog open={!!deleteTarget} onClose={() => setDeleteTarget(null)}>
+        <DialogTitle>Delete Fetch Request?</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            This will permanently delete the fetch request and all associated data.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteTarget(null)}>Cancel</Button>
+          <Button onClick={handleDelete} color="error" disabled={deleteMutation.isPending}>
+            {deleteMutation.isPending ? "Deleting..." : "Delete"}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  );
+}

src/Footer.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import Container from '@mui/material/Container';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import {AppBar, Box, Button, IconButton, Toolbar, Tooltip} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import LogoutIcon from "@mui/icons-material/Logout";
+
+function Copyright() {
+  return (
+    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+      <Link color="text.secondary" href="https://www.aetoskia.com/">
+        {'Copyright © Aetoskia Internal Infrastructure — All rights reserved.'}
+      </Link>
+      &nbsp;
+      {new Date().getFullYear()}
+    </Typography>
+  );
+}
+
+export default function Footer() {
+  return (
+    <AppBar
+      position="fixed"
+      color="default"
+      sx={{
+        top: 'auto',
+        bottom: 0,
+        backdropFilter: 'blur(8px)',
+        boxShadow: 'none',
+        borderTop: '1px solid',
+        borderColor: 'divider',
+      }}
+    >
+      <Toolbar>
+        <React.Fragment>
+          <Container
+            sx={{
+              display: 'flex',
+              flexDirection: 'column',
+              alignItems: 'center',
+              gap: { xs: 2, sm: 4 },
+              textAlign: { sm: 'center', md: 'left' },
+            }}
+          >
+            <Copyright />
+          </Container>
+        </React.Fragment>
+      </Toolbar>
+    </AppBar>
+  );
+}

src/Header.tsx

@@ -0,0 +1,165 @@
+import * as React from "react";
+import {
+  useLocation,
+  matchPath
+} from "react-router-dom";
+import {
+  AppBar,
+  Toolbar,
+  Typography,
+  IconButton,
+  Tooltip,
+  Button,
+  Box,
+  useMediaQuery,
+  useTheme,
+} from "@mui/material";
+import MenuIcon from "@mui/icons-material/Menu";
+import LogoutIcon from "@mui/icons-material/Logout";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../react-auth";
+import { ColorModeContext } from "./shared-theme/AppTheme";
+
+interface HeaderProps {
+  routerMapping: {
+    path: string;
+    headerTitle: string;
+  }[];
+  onDrawerToggle?: () => void;
+}
+
+export default function Header({
+  routerMapping,
+  onDrawerToggle,
+}: HeaderProps) {
+  const location = useLocation();
+  const matchedRoute = routerMapping.find((route) =>
+    matchPath({ path: route.path, end: false }, location.pathname)
+  );
+  const headerTitle = matchedRoute?.headerTitle ?? "Khata";
+
+  const navigate = useNavigate();
+  const { currentUser, logout } = useAuth();
+  const { mode, toggleColorMode } = React.useContext(ColorModeContext);
+
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("md"));
+
+  const isAuthenticated = !!currentUser;
+
+  return (
+    <AppBar
+      position="fixed"
+      color="default"
+      sx={{
+        zIndex: (theme) => theme.zIndex.drawer + 1,
+        backdropFilter: "blur(8px)",
+        boxShadow: "none",
+        borderBottom: "1px solid",
+        borderColor: "divider",
+      }}
+    >
+      <Toolbar>
+        {/* MOBILE MENU BUTTON */}
+        {isMobile && onDrawerToggle && (
+          <IconButton
+            color="inherit"
+            edge="start"
+            onClick={onDrawerToggle}
+            sx={{ mr: 2 }}
+          >
+            <MenuIcon />
+          </IconButton>
+        )}
+
+        {/* THEME TOGGLE */}
+        <IconButton onClick={toggleColorMode} color="inherit" sx={{ mr: 2 }}>
+          {mode === 'dark' ? <LightModeIcon /> : <DarkModeIcon />}
+        </IconButton>
+
+        {/* TITLE */}
+        <Typography
+          variant="h6"
+          noWrap
+          sx={{ fontWeight: "bold", cursor: "pointer" }}
+          onClick={() => navigate("/")}
+        >
+          {headerTitle}
+        </Typography>
+
+        <span style={{ flexGrow: 1 }} />
+
+        {/* NAV LINKS */}
+        <Box
+          sx={{
+            display: { xs: "none", md: "flex" },
+            alignItems: "center",
+            mr: 2,
+            gap: 1,
+          }}
+        >
+          {[
+            { label: "Dashboard", path: "/dashboard" },
+            { label: "Fetch", path: "/fetch-requests" },
+            { label: "Reports", path: "/reports" },
+          ].map(({ label, path }) => (
+            <Button
+              key={path}
+              color="inherit"
+              onClick={() => navigate(path)}
+              sx={{ textTransform: "none", fontWeight: 500, px: 1.5 }}
+              size="small"
+            >
+              {label}
+            </Button>
+          ))}
+        </Box>
+
+        {/* AUTH SECTION */}
+        {isAuthenticated ? (
+          <>
+            <Box
+              sx={{
+                display: { xs: "none", sm: "flex" },
+                alignItems: "center",
+                mr: 2,
+              }}
+            >
+              <Button
+                color="inherit"
+                onClick={() => navigate("/admin")}
+                sx={{ textTransform: "none", fontWeight: 500 }}
+              >
+                Admin
+              </Button>
+              <Button
+                color="inherit"
+                onClick={() => navigate("/admin/profile")}
+                sx={{ textTransform: "none", fontWeight: 500 }}
+              >
+                {currentUser.username}
+              </Button>
+            </Box>
+
+            <Tooltip title="Logout">
+              <IconButton color="inherit" onClick={logout}>
+                <LogoutIcon />
+              </IconButton>
+            </Tooltip>
+          </>
+        ) : (
+          <Button
+            color="inherit"
+            variant="outlined"
+            onClick={() => navigate("/admin")}
+            sx={{ textTransform: "none" }}
+          >
+            Login
+          </Button>
+        )}
+      </Toolbar>
+    </AppBar>
+  );
+}

src/Home.tsx

@@ -1,26 +1,247 @@
 import * as React from "react";
+import { Box, Typography, Button, Container, Grid, Paper, Chip } from "@mui/material";
+import { useTheme, alpha } from "@mui/material/styles";
+import { useNavigate } from "react-router-dom";
+import DashboardIcon from "@mui/icons-material/Dashboard";
+import SyncIcon from "@mui/icons-material/Sync";
+import BarChartIcon from "@mui/icons-material/BarChart";
+import SettingsIcon from "@mui/icons-material/Settings";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import { useAuth } from "../react-auth";
+
+interface FeatureCardProps {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  path: string;
+  label?: string;
+  accent: string;
+}
+
+function FeatureCard({ icon, title, description, path, label, accent }: FeatureCardProps) {
+  const navigate = useNavigate();
+  const theme = useTheme();
 
-const Home: React.FC = () => {
   return (
-    <div style={styles.container}>
-      <h1 style={styles.title}>Welcome to Khata</h1>
-    </div>
+    <Paper
+      elevation={0}
+      onClick={() => navigate(path)}
+      sx={{
+        p: 3,
+        borderRadius: 3,
+        border: "1px solid",
+        borderColor: "divider",
+        cursor: "pointer",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        overflow: "hidden",
+        transition: "all 0.25s ease",
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          top: 0,
+          left: 0,
+          right: 0,
+          height: 3,
+          background: accent,
+          opacity: 0,
+          transition: "opacity 0.25s ease",
+        },
+        "&:hover": {
+          transform: "translateY(-4px)",
+          boxShadow: `0 12px 32px ${alpha(theme.palette.common.black, theme.palette.mode === "dark" ? 0.3 : 0.08)}`,
+          borderColor: "transparent",
+          "&::before": { opacity: 1 },
+        },
+      }}
+    >
+      <Box sx={{ display: "flex", alignItems: "center", gap: 1.5, mb: 1.5 }}>
+        <Box
+          sx={{
+            width: 40,
+            height: 40,
+            borderRadius: 2,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            background: alpha(accent, 0.12),
+            color: accent,
+          }}
+        >
+          {icon}
+        </Box>
+        <Typography variant="subtitle1" fontWeight={700}>
+          {title}
+        </Typography>
+      </Box>
+
+      <Typography variant="body2" color="text.secondary" sx={{ flex: 1, lineHeight: 1.6 }}>
+        {description}
+      </Typography>
+
+      {label && (
+        <Chip
+          label={label}
+          size="small"
+          variant="outlined"
+          sx={{ mt: 2, alignSelf: "flex-start", textTransform: "capitalize" }}
+        />
+      )}
+    </Paper>
   );
-};
+}
 
-const styles: { [key: string]: React.CSSProperties } = {
-  container: {
-    height: "100vh",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "#0f172a",
-  },
-  title: {
-    color: "#ffffff",
-    fontSize: "2rem",
-    fontWeight: 600,
-  },
-};
+export default function Home() {
+  const navigate = useNavigate();
+  const theme = useTheme();
+  const { currentUser } = useAuth();
 
-export default Home;
+  const features = [
+    {
+      icon: <DashboardIcon />,
+      title: "Dashboard",
+      description: "Visualise inflows and outflows with interactive charts, drill into categories, and track trends over daily, weekly, and monthly periods.",
+      path: "/dashboard",
+      accent: theme.palette.mode === "dark" ? "#818cf8" : "#6366f1",
+    },
+    {
+      icon: <SyncIcon />,
+      title: "Fetch Requests",
+      description: "Upload bank statements or configure email ingestion to auto-import transactions. Track pipeline status from pending through to completion.",
+      path: "/fetch-requests",
+      accent: theme.palette.mode === "dark" ? "#34d399" : "#10b981",
+    },
+    {
+      icon: <BarChartIcon />,
+      title: "Report Snapshots",
+      description: "Generate cached report snapshots with custom filters — accounts, date ranges, amount bounds — then pin a snapshot on the dashboard for consistent comparisons.",
+      path: "/reports",
+      accent: theme.palette.mode === "dark" ? "#fbbf24" : "#f59e0b",
+    },
+    {
+      icon: <SettingsIcon />,
+      title: "Admin",
+      description: "Full CRUD over accounts, expenses, tags, and payors. Manage your data programmatically through the OpenAPI-driven admin panel.",
+      path: "/admin",
+      accent: theme.palette.mode === "dark" ? "#e879f9" : "#d946ef",
+    },
+  ];
+
+  return (
+    <Box
+      sx={{
+        minHeight: "calc(100vh - 64px)",
+        display: "flex",
+        flexDirection: "column",
+        position: "relative",
+        overflow: "hidden",
+        "&::before": {
+          content: '""',
+          position: "absolute",
+          top: "-15%",
+          left: "-8%",
+          width: "45%",
+          height: "55%",
+          background: "radial-gradient(circle, rgba(99,102,241,0.12) 0%, transparent 70%)",
+          zIndex: 0,
+        },
+        "&::after": {
+          content: '""',
+          position: "absolute",
+          bottom: "-15%",
+          right: "-8%",
+          width: "45%",
+          height: "55%",
+          background: "radial-gradient(circle, rgba(236,72,153,0.1) 0%, transparent 70%)",
+          zIndex: 0,
+        },
+      }}
+    >
+      <Container maxWidth="lg" sx={{ position: "relative", zIndex: 1, flex: 1, display: "flex", flexDirection: "column", justifyContent: "center", py: 6 }}>
+        <Box
+          sx={{
+            textAlign: "center",
+            mb: 6,
+          }}
+        >
+          <Typography
+            variant="h1"
+            sx={{
+              fontWeight: 800,
+              fontSize: { xs: "2.5rem", sm: "3.5rem", md: "5rem" },
+              background: "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)",
+              WebkitBackgroundClip: "text",
+              WebkitTextFillColor: "transparent",
+              letterSpacing: "-0.03em",
+              mb: 2,
+            }}
+          >
+            Welcome to Khata
+          </Typography>
+
+          <Typography
+            variant="h6"
+            color="text.secondary"
+            sx={{
+              maxWidth: 580,
+              mx: "auto",
+              lineHeight: 1.7,
+              fontWeight: 400,
+              fontSize: { xs: "1rem", md: "1.15rem" },
+            }}
+          >
+            Your intelligent, extensible financial ledger. Import transactions, generate reports, and stay on top of your cashflow.
+          </Typography>
+
+          <Box sx={{ mt: 4, display: "flex", gap: 2, justifyContent: "center", flexWrap: "wrap" }}>
+            <Button
+              variant="contained"
+              size="large"
+              endIcon={<ArrowForwardIcon />}
+              onClick={() => navigate("/dashboard")}
+              sx={{
+                px: 4,
+                py: 1.4,
+                borderRadius: "50px",
+                fontWeight: 700,
+                background: "linear-gradient(135deg, #6366f1 0%, #ec4899 100%)",
+                transition: "transform 0.2s ease, box-shadow 0.2s",
+                "&:hover": {
+                  transform: "translateY(-2px)",
+                  boxShadow: `0 8px 24px ${alpha(theme.palette.primary.main, 0.35)}`,
+                },
+              }}
+            >
+              Enter Dashboard
+            </Button>
+            <Button
+              variant="outlined"
+              size="large"
+              onClick={() => navigate("/fetch-requests")}
+              sx={{
+                px: 4,
+                py: 1.4,
+                borderRadius: "50px",
+                fontWeight: 600,
+                borderWidth: 2,
+                "&:hover": { borderWidth: 2 },
+              }}
+            >
+              Import Data
+            </Button>
+          </Box>
+        </Box>
+
+        <Grid container spacing={3}>
+          {features.map((f) => (
+            <Grid key={f.title} size={{ xs: 12, sm: 6, md: 3 }}>
+              <FeatureCard {...f} />
+            </Grid>
+          ))}
+        </Grid>
+      </Container>
+    </Box>
+  );
+}

src/ReportSnapshots.tsx

@@ -0,0 +1,311 @@
+import * as React from "react";
+import {
+  Box,
+  Container,
+  Paper,
+  Typography,
+  Button,
+  IconButton,
+  CircularProgress,
+  Alert,
+  Snackbar,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
+  Chip,
+  TextField,
+} from "@mui/material";
+import DeleteIcon from "@mui/icons-material/Delete";
+import AddCircleIcon from "@mui/icons-material/AddCircle";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import { useResourceByName, useConfig, defaultFieldComponents } from "../react-openapi";
+import type { ResourceField } from "../react-openapi";
+
+interface ReportSnapshotQuery {
+  accounts?: string[];
+  ignore_self?: boolean;
+  start_date?: string;
+  end_date?: string;
+}
+
+interface ReportSnapshot {
+  id: string;
+  snapshot_id: string;
+  created_at: string;
+  query?: ReportSnapshotQuery;
+}
+
+function formatDate(iso: string) {
+  const d = new Date(iso);
+  return d.toLocaleString();
+}
+
+export default function ReportSnapshots() {
+  const [ignoreSelf, setIgnoreSelf] = React.useState(true);
+  const [startDate, setStartDate] = React.useState("");
+  const [endDate, setEndDate] = React.useState("");
+  const [minAmount, setMinAmount] = React.useState("");
+  const [maxAmount, setMaxAmount] = React.useState("");
+  const [snackbar, setSnackbar] = React.useState<{ message: string; severity: "success" | "error" } | null>(null);
+  const [deleteTarget, setDeleteTarget] = React.useState<ReportSnapshot | null>(null);
+  const [createdSnapshotId, setCreatedSnapshotId] = React.useState<string | null>(null);
+
+  const { useList, useCreate, useDelete, components } = useResourceByName("reports", { fieldComponents: defaultFieldComponents });
+
+  const { data: listData, isLoading, isFetching, refetch } = useList();
+  const createMutation = useCreate();
+  const deleteMutation = useDelete();
+
+  const config = useConfig();
+  const reportsRes = config?.resources.find((r: any) => r.name === "reports");
+  const ignoreSelfField: ResourceField | undefined = reportsRes?.fields?.ignore_self;
+  const startDateField: ResourceField | undefined = reportsRes?.fields?.start_date;
+  const endDateField: ResourceField | undefined = reportsRes?.fields?.end_date;
+  const minAmountField: ResourceField | undefined = reportsRes?.fields?.min_amount;
+  const maxAmountField: ResourceField | undefined = reportsRes?.fields?.max_amount;
+
+  const snapshots: ReportSnapshot[] = listData?.data ?? [];
+
+  const handleCreate = async () => {
+    try {
+      const payload: Record<string, any> = {};
+      if (ignoreSelf) payload.ignore_self = true;
+      if (startDate) payload.start_date = new Date(startDate).toISOString();
+      if (endDate) payload.end_date = new Date(endDate).toISOString();
+      if (minAmount) payload.min_amount = parseFloat(minAmount);
+      if (maxAmount) payload.max_amount = parseFloat(maxAmount);
+
+      const result = await createMutation.mutateAsync(payload);
+      const snapshotId = (result as any)?.snapshot_id;
+      if (snapshotId) {
+        setCreatedSnapshotId(snapshotId);
+        setSnackbar({ message: `Snapshot created: ${snapshotId}`, severity: "success" });
+      } else {
+        setSnackbar({ message: "Snapshot created", severity: "success" });
+      }
+      resetForm();
+    } catch (err: any) {
+      setSnackbar({ message: err?.response?.data?.detail || "Failed to create snapshot", severity: "error" });
+    }
+  };
+
+  const resetForm = () => {
+    setIgnoreSelf(true);
+    setStartDate("");
+    setEndDate("");
+    setMinAmount("");
+    setMaxAmount("");
+  };
+
+  const handleDelete = async () => {
+    if (!deleteTarget) return;
+    try {
+      await deleteMutation.mutateAsync(deleteTarget.snapshot_id);
+      setSnackbar({ message: "Snapshot deleted", severity: "success" });
+    } catch {
+      setSnackbar({ message: "Failed to delete snapshot", severity: "error" });
+    }
+    setDeleteTarget(null);
+  };
+
+  return (
+    <Container sx={{ mt: 4, mb: 4 }}>
+      <Typography variant="h5" fontWeight="bold" gutterBottom>
+        Report Snapshots
+      </Typography>
+
+      <Paper sx={{ p: 3, mb: 4, borderRadius: 4 }} variant="outlined">
+        <Typography variant="subtitle1" fontWeight={600} gutterBottom>
+          Generate New Snapshot
+        </Typography>
+
+        <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
+          {ignoreSelfField && components?.FormField && (
+            <components.FormField
+              name="ignore_self"
+              field={ignoreSelfField}
+              value={ignoreSelf}
+              onChange={(val: boolean) => setIgnoreSelf(val)}
+            />
+          )}
+
+            <Box sx={{ display: "flex", gap: 2 }}>
+              <Box sx={{ flex: 1 }}>
+                <TextField
+                  label="Start Date"
+                  type="date"
+                  value={startDate}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setStartDate(e.target.value)}
+                  size="small"
+                  InputLabelProps={{ shrink: true }}
+                  inputProps={{ max: new Date().toISOString().split("T")[0] }}
+                />
+              </Box>
+              <Box sx={{ flex: 1 }}>
+                <TextField
+                  label="End Date"
+                  type="date"
+                  value={endDate}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => setEndDate(e.target.value)}
+                  size="small"
+                  InputLabelProps={{ shrink: true }}
+                  inputProps={{ max: new Date().toISOString().split("T")[0] }}
+                />
+              </Box>
+            </Box>
+
+          <Box sx={{ display: "flex", gap: 2 }}>
+            {minAmountField && components?.FormField && (
+              <Box sx={{ flex: 1 }}>
+                <components.FormField
+                  name="min_amount"
+                  field={minAmountField}
+                  value={minAmount}
+                  onChange={(val: string) => setMinAmount(val)}
+                />
+              </Box>
+            )}
+            {maxAmountField && components?.FormField && (
+              <Box sx={{ flex: 1 }}>
+                <components.FormField
+                  name="max_amount"
+                  field={maxAmountField}
+                  value={maxAmount}
+                  onChange={(val: string) => setMaxAmount(val)}
+                />
+              </Box>
+            )}
+          </Box>
+
+          <Button
+            variant="contained"
+            startIcon={<AddCircleIcon />}
+            onClick={handleCreate}
+            disabled={createMutation.isPending}
+          >
+            {createMutation.isPending ? "Generating..." : "Generate Snapshot"}
+          </Button>
+
+          {createdSnapshotId && (
+            <Alert severity="success" onClose={() => setCreatedSnapshotId(null)}>
+              Snapshot created: <strong>{createdSnapshotId}</strong>. Use it in the Dashboard snapshot selector.
+            </Alert>
+          )}
+        </Box>
+      </Paper>
+
+      <Paper sx={{ borderRadius: 4 }} variant="outlined">
+        <Box sx={{ display: "flex", alignItems: "center", justifyContent: "space-between", p: 2, pb: 0 }}>
+          <Typography variant="subtitle1" fontWeight={600}>
+            Existing Snapshots
+          </Typography>
+          <IconButton onClick={() => refetch()} disabled={isFetching}>
+            <RefreshIcon />
+          </IconButton>
+        </Box>
+
+        {isLoading ? (
+          <Box sx={{ display: "flex", justifyContent: "center", p: 4 }}>
+            <CircularProgress />
+          </Box>
+        ) : snapshots.length === 0 ? (
+          <Box sx={{ p: 4, textAlign: "center", color: "text.secondary" }}>
+            No snapshots yet
+          </Box>
+        ) : (
+          <Box sx={{ overflowX: "auto" }}>
+            <Box component="table" sx={{ width: "100%", borderCollapse: "collapse" }}>
+              <Box component="thead">
+                <Box component="tr" sx={{ borderBottom: 1, borderColor: "divider" }}>
+                  {["Snapshot ID", "Created", "Query", "Actions"].map((h) => (
+                    <Box
+                      key={h}
+                      component="th"
+                      sx={{ px: 2, py: 1.5, textAlign: h === "Actions" ? "right" : "left", fontWeight: 600, fontSize: "0.8rem", color: "text.secondary", whiteSpace: "nowrap" }}
+                    >
+                      {h}
+                    </Box>
+                  ))}
+                </Box>
+              </Box>
+              <Box component="tbody">
+                {snapshots.map((snap: ReportSnapshot) => (
+                  <Box
+                    key={snap.id}
+                    component="tr"
+                    sx={{ borderBottom: 1, borderColor: "divider", "&:last-child": { borderBottom: 0 }, "&:hover": { bgcolor: "action.hover" } }}
+                  >
+                    <Box component="td" sx={{ px: 2, py: 1.5, fontFamily: "monospace", fontSize: "0.8rem" }}>
+                      <Box sx={{ display: "flex", alignItems: "center", gap: 0.5 }}>
+                        {snap.snapshot_id}
+                        <IconButton
+                          size="small"
+                          onClick={() => {
+                            navigator.clipboard.writeText(snap.snapshot_id);
+                            setSnackbar({ message: "Copied!", severity: "success" });
+                          }}
+                          sx={{ opacity: 0.5, '&:hover': { opacity: 1 } }}
+                        >
+                          <ContentCopyIcon sx={{ fontSize: 14 }} />
+                        </IconButton>
+                      </Box>
+                    </Box>
+                    <Box component="td" sx={{ px: 2, py: 1.5, fontSize: "0.875rem" }}>
+                      {formatDate(snap.created_at)}
+                    </Box>
+                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
+                      {snap.query ? (
+                        <Box sx={{ display: "flex", gap: 0.5, flexWrap: "wrap" }}>
+                          {snap.query.accounts && <Chip label={`${snap.query.accounts.length} account(s)`} size="small" variant="outlined" />}
+                          {snap.query.ignore_self && <Chip label="ignore_self" size="small" variant="outlined" />}
+                          {snap.query.start_date && <Chip label="start" size="small" variant="outlined" />}
+                          {snap.query.end_date && <Chip label="end" size="small" variant="outlined" />}
+                        </Box>
+                      ) : (
+                        <Typography variant="body2" color="text.secondary">\u2014</Typography>
+                      )}
+                    </Box>
+                    <Box component="td" sx={{ px: 2, py: 1.5 }}>
+                      <Box sx={{ display: "flex", gap: 0.5, justifyContent: "flex-end" }}>
+                        <IconButton size="small" onClick={() => setDeleteTarget(snap)}>
+                          <DeleteIcon fontSize="small" />
+                        </IconButton>
+                      </Box>
+                    </Box>
+                  </Box>
+                ))}
+              </Box>
+            </Box>
+          </Box>
+        )}
+      </Paper>
+
+      <Snackbar
+        open={!!snackbar}
+        autoHideDuration={4000}
+        onClose={() => setSnackbar(null)}
+        anchorOrigin={{ vertical: "bottom", horizontal: "center" }}
+      >
+        {snackbar ? <Alert severity={snackbar.severity} onClose={() => setSnackbar(null)}>{snackbar.message}</Alert> : undefined}
+      </Snackbar>
+
+      <Dialog open={!!deleteTarget} onClose={() => setDeleteTarget(null)}>
+        <DialogTitle>Delete Snapshot?</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            This will permanently delete the report snapshot.
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={() => setDeleteTarget(null)}>Cancel</Button>
+          <Button onClick={handleDelete} color="error" disabled={deleteMutation.isPending}>
+            {deleteMutation.isPending ? "Deleting..." : "Delete"}
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </Container>
+  );
+}

src/components/Dashboard/Dashboard.models.ts

@@ -0,0 +1,61 @@
+import * as React from "react";
+import {
+  ReportData,
+  GroupKey,
+} from "../../features/report";
+
+export type DashboardFlow = "outflows" | "inflows";
+export type DashboardPeriodType = "rolling" | "calendar";
+export type DashboardSelectedPeriodId = string | null;
+
+export interface DashboardState {
+  flow: DashboardFlow;
+  periodType: DashboardPeriodType;
+  selectedPeriodId: DashboardSelectedPeriodId;
+  selectedGroupKey: GroupKey | null;
+  comparison: boolean;
+}
+
+export interface DashboardStateSetters {
+  setSelectedPeriodId: (id: DashboardSelectedPeriodId) => void;
+  setSelectedGroupKey: (groupKey: GroupKey | null) => void;
+  toggleFlow: () => void;
+  togglePeriodType: () => void;
+  toggleComparison: () => void;
+}
+
+export interface DashboardSection {
+  id: string;
+  title: string;
+  component: React.ComponentType<any>;
+  summary?: string;
+  settings?: Record<string, any>;
+}
+
+export interface DashboardConfig {
+  sections: DashboardSection[];
+}
+
+export interface DashboardViewProps {
+  config: DashboardConfig;
+  data: ReportData;
+  state: DashboardState;
+  stateSetters: DashboardStateSetters;
+  isFetching: boolean;
+}
+
+export interface ColorScheme {
+  primary: string;
+  surface: string;
+  text: string;
+}
+
+export interface ComponentProps extends DashboardSection {
+  reportData: ReportData;
+
+  state: DashboardState;
+  stateSetters: DashboardStateSetters;
+  isFetching: boolean;
+
+  colorScheme: ColorScheme;
+}

src/components/Dashboard/Dashboard.view.tsx

@@ -0,0 +1,105 @@
+import * as React from "react";
+import {
+  Box,
+  Container,
+  Grid,
+  ToggleButton,
+  ToggleButtonGroup,
+  Button
+} from "@mui/material";
+import { useTheme, alpha } from "@mui/material/styles";
+import { DashboardViewProps } from "./Dashboard.models";
+
+export default function DashboardView({
+  config,
+  data,
+  state,
+  stateSetters,
+  isFetching,
+}: DashboardViewProps) {
+  const theme = useTheme();
+
+  const {
+    flow,
+    selectedGroupKey,
+  } = state;
+
+  const colorScheme = flow === "outflows" ? theme.palette.flows.outflows : theme.palette.flows.inflows;
+
+  return (
+    <Container
+      sx={{
+        mt: 4,
+        mb: 4,
+        background: `linear-gradient(180deg, ${alpha(colorScheme.primary, theme.palette.mode === "dark" ? 0.06 : 0.04)} 0%, transparent 100%)`,
+        borderRadius: 4,
+        p: 2,
+        transition: "background 0.3s ease",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          mb: 3,
+        }}
+      >
+        <ToggleButtonGroup
+          value={flow}
+          exclusive
+          onChange={stateSetters.toggleFlow}
+          sx={{
+            borderRadius: 3,
+            overflow: "hidden",
+            "& .MuiToggleButton-root": {
+              px: 3,
+              textTransform: "none",
+              color: "text.secondary",
+            },
+            "&.Mui-selected": {
+              bgcolor: colorScheme.primary,
+              color: "white",
+              borderColor: colorScheme.primary,
+            },
+          }}
+        >
+          <ToggleButton value="outflows">Outflows</ToggleButton>
+          <ToggleButton value="inflows">Inflows</ToggleButton>
+        </ToggleButtonGroup>
+
+        {selectedGroupKey && Object.keys(selectedGroupKey).length > 0 && (
+          <Button
+            size="small"
+            sx={{ mt: 1, textTransform: "none" }}
+            onClick={() => stateSetters.setSelectedGroupKey(null)}
+          >
+            Clear Drill-down
+          </Button>
+        )}
+      </Box>
+
+      <Grid container spacing={4}>
+        {config.sections.map((section) => {
+          const Component = section.component;
+
+          return (
+            <Grid key={section.id} size={12}>
+              <Component
+                {...section}
+
+                reportData={data}
+
+                state={state}
+                stateSetters={stateSetters}
+                isFetching={isFetching}
+
+                colorScheme={colorScheme}
+              />
+            </Grid>
+          );
+        })}
+      </Grid>
+    </Container>
+  );
+}

src/components/Dashboard/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./Dashboard.view";
+export * from "./Dashboard.models";

src/components/HistoryChart/HistoryChart.adapter.ts

@@ -0,0 +1,73 @@
+import { ReportData } from "../../features/report";
+import {
+  mergeBucketPeriods,
+  getAmount,
+  PeriodKey,
+} from "../report.helpers";
+import { ChartDataPoint } from "./HistoryChart.models";
+
+// ─── Tab → PeriodKey ─────────────────────────────────────────
+
+const TAB_TO_KEY: Record<string, PeriodKey> = {
+  Daily: "daily",
+  Weekly: "weekly",
+  Monthly: "monthly",
+  "All Time": "all",
+};
+
+export function tabToKey(tab: string): PeriodKey {
+  return TAB_TO_KEY[tab] ?? "all";
+}
+
+// ─── Comparison ──────────────────────────────────────────────
+
+function attachComparison(
+  points: ChartDataPoint[],
+  key: PeriodKey
+): ChartDataPoint[] {
+  const getCompareIndex = (i: number) => {
+    if (key === "daily") return i - 7;
+    if (key === "weekly") return i - 4;
+    if (key === "monthly") return i - 12;
+    return -1;
+  };
+
+  return points.map((p, i) => {
+    const ci = getCompareIndex(i);
+
+    return {
+      ...p,
+      compare:
+        ci >= 0 && points[ci]
+          ? {
+              id: points[ci].id,
+              label: points[ci].label,
+              amount: points[ci].amount,
+            }
+          : undefined,
+    };
+  });
+}
+
+// ─── Main adapter ────────────────────────────────────────────
+
+export function buildChartData(
+  reportData: ReportData,
+  key: PeriodKey,
+  flow: "outflows" | "inflows",
+  comparison: boolean
+): ChartDataPoint[] {
+  const merged = mergeBucketPeriods(reportData.buckets, key);
+
+  let points: ChartDataPoint[] = merged.map((p) => ({
+    id: p.id,
+    label: p.label,
+    amount: getAmount(p),
+  }));
+
+  if (comparison) {
+    points = attachComparison(points, key);
+  }
+
+  return points;
+}

src/components/HistoryChart/HistoryChart.models.ts

@@ -0,0 +1,10 @@
+export interface _ChartDataPoint {
+  id: string;
+  label: string;
+  amount: number;
+  highlighted?: boolean;
+}
+
+export interface ChartDataPoint extends _ChartDataPoint {
+  compare?: _ChartDataPoint;
+}

src/components/HistoryChart/HistoryChart.props.ts

@@ -0,0 +1,21 @@
+import * as React from "react";
+import { ComponentProps } from "../Dashboard";
+import { ChartDataPoint } from "./HistoryChart.models";
+
+export interface HistoryChartProps extends ComponentProps {
+  settings: {
+    tabs: string[];
+  };
+}
+
+export interface HistoryChartViewProps extends HistoryChartProps {
+  activeTab: string;
+  setActiveTab: (v: string) => void;
+  currentData: ChartDataPoint[];
+  visibleData: ChartDataPoint[];
+  maxAmount: number;
+  visibleCount: number;
+  startIndex: number;
+  setStartIndex: React.Dispatch<React.SetStateAction<number>>;
+  activeDataKey: string;
+}

src/components/HistoryChart/HistoryChart.tsx

@@ -0,0 +1,96 @@
+import * as React from "react";
+import HistoryChartView from "./HistoryChart.view";
+import { buildChartData, tabToKey } from "./HistoryChart.adapter";
+import { HistoryChartProps } from "./HistoryChart.props";
+
+
+export default function HistoryChart(props: HistoryChartProps) {
+  const {
+    settings,
+    reportData,
+    state,
+    stateSetters,
+
+    isFetching,
+  } = props;
+
+  const { flow, comparison, selectedPeriodId } = state;
+  const { setSelectedPeriodId } = stateSetters;
+  const { tabs } = settings;
+
+  const [activeTab, setActiveTab] = React.useState<string>(tabs[0] || "");
+  const [startIndex, setStartIndex] = React.useState(0);
+
+  const activeDataKey = tabToKey(activeTab);
+
+  const currentData = React.useMemo(() => {
+    return buildChartData(reportData, activeDataKey, flow, comparison);
+  }, [reportData, activeDataKey, flow, comparison]);
+
+  const maxAmount =
+    currentData.length > 0
+      ? Math.max(
+          ...currentData.flatMap((d) =>
+            comparison
+              ? [d.amount, ...(d.compare ? [d.compare.amount] : [])]
+              : [d.amount]
+          ),
+          1
+        )
+      : 1;
+
+  const visibleCountMap = {
+    daily: 7,
+    weekly: 6,
+    monthly: 4,
+    all: 4,
+  };
+
+  const visibleCount = visibleCountMap[activeDataKey] ?? 4;
+
+  const total = currentData.length;
+
+  const clampedStartIndex = Math.min(
+    startIndex,
+    Math.max(total - visibleCount, 0)
+  );
+
+  React.useEffect(() => {
+    if (startIndex !== clampedStartIndex) {
+      setStartIndex(clampedStartIndex);
+    }
+  }, [startIndex, clampedStartIndex]);
+
+  const visibleData = currentData.slice(
+    clampedStartIndex,
+    clampedStartIndex + visibleCount
+  );
+
+  React.useEffect(() => {
+    setSelectedPeriodId(null);
+  }, [activeTab]);
+
+  React.useEffect(() => {
+    if (
+      selectedPeriodId &&
+      !visibleData.some((p) => p.id === selectedPeriodId)
+    ) {
+      setSelectedPeriodId(null);
+    }
+  }, [visibleData, selectedPeriodId]);
+
+  return (
+    <HistoryChartView
+      {...props}
+      activeTab={activeTab}
+      setActiveTab={setActiveTab}
+      currentData={currentData}
+      visibleData={visibleData}
+      maxAmount={maxAmount}
+      visibleCount={visibleCount}
+      startIndex={clampedStartIndex}
+      setStartIndex={setStartIndex}
+      activeDataKey={activeDataKey}
+    />
+  );
+}

src/components/HistoryChart/HistoryChart.utils.ts

@@ -0,0 +1,27 @@
+import { ChartDataPoint } from "./HistoryChart.models";
+
+export const formatDisplay = (
+  point: ChartDataPoint,
+  tab: string,
+  comparison: boolean
+) => {
+  const base = point.amount;
+  const cmp = point.compare?.amount ?? 0;
+
+  const formatShort = (val: number) => {
+    if (tab === "monthly" && val >= 100000) {
+      return `${(val / 100000).toFixed(2)}L`;
+    }
+    if (tab === "weekly" && val >= 1000) {
+      return `${(val / 1000).toFixed(1)}K`;
+    }
+    return val.toLocaleString("en-IN");
+  };
+
+  if (!comparison) return `₹ ${formatShort(base)}`;
+
+  const diff = base - cmp;
+  const sign = diff >= 0 ? "+" : "-";
+
+  return `₹ ${formatShort(base)} (${sign}${formatShort(Math.abs(diff))})`;
+};

src/components/HistoryChart/HistoryChart.view.tsx

@@ -0,0 +1,205 @@
+import * as React from "react";
+import {
+  Box,
+  Typography,
+  ToggleButtonGroup,
+  ToggleButton,
+  Paper
+} from "@mui/material";
+import { useTheme, alpha } from "@mui/material/styles";
+import IconButton from "@mui/material/IconButton";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import {
+  HistoryChartViewProps,
+} from "./HistoryChart.props";
+import { formatDisplay } from "./HistoryChart.utils";
+
+export default function HistoryChartView({
+  title,
+  summary,
+  settings,
+
+  state,
+  stateSetters,
+  isFetching,
+
+  colorScheme,
+
+  activeTab,
+  setActiveTab,
+  currentData,
+  visibleData,
+  maxAmount,
+  visibleCount,
+  startIndex,
+  setStartIndex,
+  activeDataKey,
+}: HistoryChartViewProps) {
+
+  const { flow, periodType, selectedPeriodId, comparison } = state;
+  const { togglePeriodType, setSelectedPeriodId, toggleComparison } = stateSetters;
+
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  const total = currentData.length;
+  const maxStartIndex = Math.max(total - visibleCount, 0);
+  const clampedStartIndex = Math.min(startIndex, maxStartIndex);
+
+  const handleTabChange = (_: React.MouseEvent<HTMLElement>, newTab: string | null) => {
+    if (newTab !== null) setActiveTab(newTab);
+  };
+
+  const canGoLeft = clampedStartIndex > 0;
+  const canGoRight = clampedStartIndex < maxStartIndex;
+
+  const handlePrev = () => {
+    if (!canGoLeft) return;
+    setStartIndex((prev) => Math.max(prev - visibleCount, 0));
+  };
+
+  const handleNext = () => {
+    if (!canGoRight) return;
+    setStartIndex((prev) => {
+      const next = prev + visibleCount;
+      return Math.min(next, maxStartIndex);
+    });
+  };
+
+  return (
+    <Paper
+      sx={{
+        p: { xs: 2.5, sm: 4 },
+        borderRadius: 4,
+        width: "100%",
+        boxShadow: "none",
+        border: "1px solid",
+        borderColor: "divider",
+        bgcolor: isDark ? "background.paper" : colorScheme.surface,
+        opacity: isFetching ? 0.6 : 1,
+        transition: "opacity 0.3s ease",
+        pointerEvents: isFetching ? "none" : "auto",
+      }}
+    >
+      <Typography variant="h6" fontWeight={700} gutterBottom>
+        {title}
+      </Typography>
+
+      {summary && (
+        <Typography variant="body2" color="text.secondary" sx={{ mb: 3 }}>
+          {summary}
+        </Typography>
+      )}
+
+      <ToggleButtonGroup value={activeTab} exclusive onChange={handleTabChange} fullWidth sx={{ mb: 4 }}>
+        {settings.tabs.map((tab) => (
+          <ToggleButton key={tab} value={tab}>
+            {tab}
+          </ToggleButton>
+        ))}
+      </ToggleButtonGroup>
+
+      <Box sx={{ display: "flex", justifyContent: "space-between", mb: 3 }}>
+        <ToggleButtonGroup value={periodType} exclusive onChange={togglePeriodType} size="small">
+          <ToggleButton value="rolling">Rolling</ToggleButton>
+          <ToggleButton value="calendar">Calendar</ToggleButton>
+        </ToggleButtonGroup>
+
+        <ToggleButton
+          value="compare"
+          selected={comparison}
+          onChange={toggleComparison}
+          size="small"
+        >
+          Compare
+        </ToggleButton>
+      </Box>
+
+      {currentData.length > 0 ? (
+        <Box sx={{ position: "relative", mt: 4 }}>
+          {canGoLeft && (
+            <IconButton onClick={handlePrev} size="small" sx={{ position: "absolute", left: 0, top: "50%" }}>
+              <ChevronLeftIcon fontSize="small" />
+            </IconButton>
+          )}
+
+          <Box sx={{ display: "flex", alignItems: "flex-end", height: 220, mt: 4 }}>
+            {visibleData.map((point) => {
+              const currentHeight = (point.amount / maxAmount) * 100;
+              const compareHeight = comparison
+                ? ((point.compare?.amount ?? 0) / maxAmount) * 100
+                : 0;
+
+              const isSelected = selectedPeriodId === point.id;
+              const display = formatDisplay(point, activeDataKey, comparison);
+
+              return (
+                <Box
+                  key={point.id}
+                  onClick={() =>
+                    setSelectedPeriodId(isSelected ? null : point.id)
+                  }
+                  sx={{
+                    flex: 1,
+                    display: "flex",
+                    flexDirection: "column",
+                    alignItems: "center",
+                    cursor: "pointer",
+                    height: "100%"
+                  }}
+                >
+                  <Box sx={{ display: "flex", alignItems: "flex-end", gap: 1, height: "100%" }}>
+                    {comparison && (
+                      <Box
+                        sx={{
+                          width: 8,
+                          height: `${compareHeight}%`,
+                          bgcolor: alpha(colorScheme.primary, 0.4),
+                          borderRadius: "4px 4px 0 0"
+                        }}
+                      />
+                    )}
+
+                    <Box
+                      sx={{
+                        width: 12,
+                        height: `${currentHeight}%`,
+                        bgcolor: isSelected ? "warning.main" : colorScheme.primary,
+                        borderRadius: "4px 4px 0 0"
+                      }}
+                    />
+                  </Box>
+
+                  <Typography variant="caption">
+                    {point.label}
+                  </Typography>
+
+                  {comparison && point.compare && (
+                    <Typography variant="caption" color="text.secondary">
+                      {point.compare.label}
+                    </Typography>
+                  )}
+
+                  <Typography variant="caption">
+                    {display}
+                  </Typography>
+                </Box>
+              );
+            })}
+          </Box>
+
+          {canGoRight && (
+            <IconButton onClick={handleNext} size="small" sx={{ position: "absolute", right: 0, top: "50%" }}>
+              <ChevronRightIcon fontSize="small" />
+            </IconButton>
+          )}
+        </Box>
+      ) : (
+        <Box sx={{ height: 200, display: "flex", alignItems: "center", justifyContent: "center" }}>
+          <Typography color="text.secondary">No Data Available</Typography>
+        </Box>
+      )}
+    </Paper>
+  );
+}

src/components/HistoryChart/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./HistoryChart";
+export * from "./HistoryChart.models";

src/components/LatestItems/LatestItems.adapter.ts

@@ -0,0 +1,31 @@
+import { ReportData, GroupKey } from "../../features/report";
+import {
+  formatCurrency,
+  extractFilteredTransactions,
+} from "../report.helpers";
+import { LatestItem } from "./LatestItems.models";
+
+// ─── Main adapter ────────────────────────────────────────────
+
+export function buildLatestItems(
+  reportData: ReportData,
+  selectedPeriodId: string | null | undefined,
+  selectedGroupKey: GroupKey | null | undefined,
+  flow: "outflows" | "inflows"
+): LatestItem[] {
+  const txns = extractFilteredTransactions(reportData, selectedPeriodId, selectedGroupKey);
+
+  return txns
+    .sort(
+      (a, b) =>
+        new Date(b.occurred_at).getTime() -
+        new Date(a.occurred_at).getTime()
+    )
+    .map((t, index) => ({
+      id: index + 1,
+      title: t.payee.name,
+      subtitle: t.tags.map((tag) => tag.name).join(", "),
+      amount: formatCurrency(t.amount),
+      timeAgo: new Date(t.occurred_at).toLocaleDateString("en-IN"),
+    }));
+}

src/components/LatestItems/LatestItems.models.ts

@@ -0,0 +1,7 @@
+export interface LatestItem {
+  id: string | number;
+  title: string;
+  subtitle: string;
+  amount: string;
+  timeAgo: string;
+}

src/components/LatestItems/LatestItems.props.ts

@@ -0,0 +1,10 @@
+import { ComponentProps } from "../Dashboard";
+import { LatestItem } from "./LatestItems.models";
+
+export interface LatestItemsProps extends ComponentProps {}
+
+export interface LatestItemsViewProps extends LatestItemsProps {
+  items: LatestItem[];
+  canExpand: boolean;
+  onExpand: () => void;
+}

src/components/LatestItems/LatestItems.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { buildLatestItems } from "./LatestItems.adapter";
+import LatestItemsView from "./LatestItems.view";
+import { LatestItemsProps } from "./LatestItems.props";
+
+export default function LatestItems(props: LatestItemsProps) {
+  const {
+    reportData,
+    state,
+    stateSetters,
+    isFetching,
+  } = props;
+
+  const { flow, selectedPeriodId, selectedGroupKey } = state;
+  const [visibleCount, setVisibleCount] = React.useState(5);
+
+  // Reset count when flow changes to start clean
+  React.useEffect(() => {
+    setVisibleCount(5);
+  }, [flow]);
+
+  const allItems = React.useMemo(() => {
+    return buildLatestItems(reportData, selectedPeriodId, selectedGroupKey, flow);
+  }, [reportData, selectedPeriodId, selectedGroupKey, flow]);
+
+  const visibleItems = React.useMemo(() => {
+    return allItems.slice(0, visibleCount);
+  }, [allItems, visibleCount]);
+
+  const canExpand = visibleCount < allItems.length;
+
+  return (
+    <LatestItemsView
+      {...props}
+      items={visibleItems}
+      canExpand={canExpand}
+      onExpand={() => setVisibleCount((prev) => prev + 5)}
+    />
+  );
+}

src/components/LatestItems/LatestItems.view.tsx

@@ -0,0 +1,93 @@
+import * as React from "react";
+import {
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemText,
+  Avatar,
+  Typography,
+  Box,
+  IconButton,
+} from "@mui/material";
+import { alpha } from "@mui/material/styles";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import { LatestItemsViewProps } from "./LatestItems.props";
+
+export default function LatestItemsView({
+  items,
+  title,
+  canExpand,
+  onExpand,
+  isFetching,
+  colorScheme,
+}: LatestItemsViewProps) {
+  const accentColor = colorScheme?.primary || "";
+
+  return (
+    <Box sx={{ width: "100%", bgcolor: "background.paper", borderRadius: 4, p: 2, opacity: isFetching ? 0.6 : 1, transition: "opacity 0.3s ease", pointerEvents: isFetching ? "none" : "auto" }}>
+      <Box sx={{ mb: 2, px: 2 }}>
+        <Typography variant="h6" fontWeight="bold">
+          {title}
+        </Typography>
+      </Box>
+
+      <List disablePadding>
+        {items.map((item, index) => (
+          <ListItem
+            key={item.id}
+            sx={{
+              px: { xs: 1, sm: 2 },
+              py: 2,
+              mb: index !== items.length - 1 ? 1 : 0,
+              borderRadius: 3,
+              "&:hover": { bgcolor: "action.hover" },
+            }}
+          >
+            <ListItemAvatar>
+              <Avatar
+                variant="rounded"
+                sx={{
+                  bgcolor: alpha(accentColor, 0.13),
+                  width: 48,
+                  height: 48,
+                  borderRadius: 3,
+                  mr: 2,
+                }}
+              />
+            </ListItemAvatar>
+
+            <ListItemText
+              primary={
+                <Typography variant="subtitle1" fontWeight={600}>
+                  {item.title}
+                </Typography>
+              }
+              secondary={
+                <Typography variant="body2" color="text.secondary">
+                  {item.subtitle}
+                </Typography>
+              }
+            />
+
+            <Box sx={{ textAlign: "right" }}>
+              <Typography variant="subtitle1" fontWeight={700}>
+                {item.amount}
+              </Typography>
+              <Typography variant="caption" color="text.secondary">
+                {item.timeAgo}
+              </Typography>
+            </Box>
+          </ListItem>
+        ))}
+
+        {canExpand && (
+          <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
+            <IconButton size="small" onClick={onExpand}>
+              <ExpandMoreIcon />
+            </IconButton>
+          </Box>
+        )}
+      </List>
+    </Box>
+  );
+}

src/components/LatestItems/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./LatestItems";
+export * from "./LatestItems.models";

src/components/ProgressCard/ProgressCard.props.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from "../Dashboard";
+
+export interface ProgressCardProps extends ComponentProps {
+  settings: {
+    compact: boolean;
+  };
+}
+
+export interface ProgressCardViewProps extends ProgressCardProps {
+  progressAmount: number;
+  totalAmount: number;
+  selected: boolean;
+  onClick: () => void;
+}

src/components/ProgressCard/ProgressCard.view.tsx

@@ -0,0 +1,129 @@
+import * as React from "react";
+import {
+  Box,
+  Typography,
+  Paper,
+  LinearProgress,
+  Divider,
+  linearProgressClasses
+} from "@mui/material";
+import { useTheme, alpha } from "@mui/material/styles";
+import { getPercentage, formatCurrency } from "../report.helpers";
+import { ProgressCardViewProps } from "./ProgressCard.props";
+
+export default function ProgressCardView({
+  title,
+  settings,
+
+  isFetching,
+
+  colorScheme,
+
+  progressAmount,
+  totalAmount,
+  selected,
+  onClick,
+}: ProgressCardViewProps) {
+  const theme = useTheme();
+
+  const percentage = getPercentage(progressAmount, totalAmount);
+  const formattedProgress = formatCurrency(progressAmount);
+  const formattedTotal = formatCurrency(totalAmount);
+
+  return (
+    <Paper
+      elevation={settings.compact ? 2 : 4}
+      onClick={onClick}
+      sx={{
+        width: "100%",
+        p: settings.compact ? { xs: 2.5, md: 3 } : { xs: 3, md: 4 },
+        borderRadius: settings.compact ? 3 : 4,
+        transform: selected ? "scale(1.02)" : "scale(1)",
+        transition: "transform 0.2s ease, box-shadow 0.2s ease",
+        bgcolor: colorScheme.surface,
+        color: colorScheme.text,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: settings.compact ? "flex-start" : "center",
+        justifyContent: "center",
+        position: "relative",
+        overflow: "hidden",
+        border: selected
+          ? `2px solid ${colorScheme.primary}`
+          : "1px solid",
+        borderColor: selected ? colorScheme.primary : "divider",
+        boxShadow: "none",
+        opacity: isFetching ? 0.6 : 1,
+        pointerEvents: isFetching ? "none" : "auto",
+      }}
+    >
+      <Typography
+        variant={settings.compact ? "body2" : "subtitle1"}
+        fontWeight={700}
+        sx={{
+          opacity: 0.95,
+          mb: settings.compact ? 1.5 : 2,
+          width: "100%",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+          letterSpacing: 0.5,
+        }}
+      >
+        {title}
+      </Typography>
+
+      <Box sx={{ mb: settings.compact ? 2 : 3, width: "100%" }}>
+        <Typography
+          variant={settings.compact ? "h5" : "h3"}
+          fontWeight={900}
+          sx={{
+            mb: 0.5,
+            lineHeight: 1.2,
+          }}
+        >
+          {formattedProgress}
+        </Typography>
+
+        <Divider
+          sx={{
+            my: 1,
+            borderColor: "divider",
+            width: "100%",
+          }}
+        />
+
+        <Typography
+          variant={settings.compact ? "caption" : "body2"}
+          sx={{
+            opacity: 0.85,
+            fontWeight: 500,
+            display: "block",
+            color: alpha(colorScheme.text, 0.85),
+          }}
+        >
+          of {formattedTotal}
+        </Typography>
+      </Box>
+
+      <Box sx={{ width: "100%", mt: "auto" }}>
+        <LinearProgress
+          variant="determinate"
+          value={percentage}
+          sx={{
+            height: settings.compact ? 6 : 10,
+            borderRadius: 5,
+            [`&.${linearProgressClasses.colorPrimary}`]: {
+              backgroundColor: alpha(theme.palette.divider, 0.5),
+            },
+            [`& .${linearProgressClasses.bar}`]: {
+              borderRadius: 5,
+              backgroundColor: colorScheme.primary,
+              boxShadow: `0 0 8px ${alpha(colorScheme.primary, 0.4)}`,
+            },
+          }}
+        />
+      </Box>
+    </Paper>
+  );
+}

src/components/ProgressCard/TopPayees.adapter.ts

@@ -0,0 +1,31 @@
+import { GroupKey, ReportData } from "../../features/report";
+import {
+  extractFilteredTransactions,
+  aggregateTransactions,
+} from "../report.helpers";
+
+export interface PayeeItem {
+  name: string;
+  amount: number;
+}
+
+export function extractTopPayees(
+  reportData: ReportData,
+  flow: "outflows" | "inflows",
+  selectedPeriodId?: string | null,
+  selectedGroupKey?: GroupKey | null
+): { items: PayeeItem[]; total: number } {
+  const txns = extractFilteredTransactions(reportData, selectedPeriodId, selectedGroupKey);
+
+  const { items, total } = aggregateTransactions(txns, (txn) => {
+    if (txn.payee && txn.payee.name) {
+      return [txn.payee.name];
+    }
+    return [];
+  });
+
+  return {
+    items,
+    total,
+  };
+}

src/components/ProgressCard/TopPayees.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { Box, Paper, Typography } from "@mui/material";
+import ProgressCardView from "./ProgressCard.view";
+import { extractTopPayees } from "./TopPayees.adapter";
+import { ProgressCardProps } from "./ProgressCard.props";
+
+export default function TopPayees(props: ProgressCardProps) {
+  const {
+    title,
+
+    reportData,
+    state,
+    stateSetters,
+
+    isFetching,
+  } = props
+  const { flow, selectedPeriodId, selectedGroupKey } = state;
+  const { setSelectedGroupKey } = stateSetters;
+
+  const { items, total } = React.useMemo(() => {
+    return extractTopPayees(reportData, flow, selectedPeriodId, selectedGroupKey);
+  }, [reportData, flow, selectedPeriodId, selectedGroupKey]);
+
+  return (
+    <Paper
+      sx={{
+        p: { xs: 2.5, sm: 4 },
+        borderRadius: 4,
+        width: "100%",
+        boxShadow: "none",
+        border: "1px solid",
+        borderColor: "divider",
+        bgcolor: "background.paper",
+        opacity: isFetching ? 0.6 : 1,
+        transition: "opacity 0.3s ease",
+        pointerEvents: isFetching ? "none" : "auto",
+      }}
+    >
+      <Typography variant="h6" fontWeight={700} gutterBottom>
+        {title}
+      </Typography>
+
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: {
+            xs: "1fr",
+            sm: "repeat(2, 1fr)",
+            md: "repeat(4, 1fr)",
+          },
+          gap: 2,
+        }}
+      >
+        {items.map((item) => {
+          const isSelected = !!selectedGroupKey?.payee?.includes(item.name);
+          return (
+            <ProgressCardView
+              {...props}
+              key={item.name}
+              title={item.name}
+              progressAmount={item.amount}
+              totalAmount={total}
+              selected={isSelected}
+              onClick={() => {
+                if (setSelectedGroupKey) {
+                  let newKey = selectedGroupKey ? { ...selectedGroupKey } : {};
+
+                  if (isSelected) {
+                    delete newKey.payee;
+                  } else {
+                    newKey.payee = [item.name];
+                  }
+
+                  setSelectedGroupKey(Object.keys(newKey).length ? newKey : null);
+                }
+              }}
+            />
+          );
+        })}
+      </Box>
+    </Paper>
+  );
+}

src/components/ProgressCard/TopTags.adapter.ts

@@ -0,0 +1,31 @@
+import { ReportData, GroupKey } from "../../features/report";
+import {
+  extractFilteredTransactions,
+  aggregateTransactions,
+} from "../report.helpers";
+
+export interface TagItem {
+  tag: string;
+  amount: number;
+}
+
+export function extractTopTags(
+  reportData: ReportData,
+  flow: "outflows" | "inflows",
+  selectedPeriodId?: string | null,
+  selectedGroupKey?: GroupKey | null
+): { items: TagItem[]; total: number } {
+  const txns = extractFilteredTransactions(reportData, selectedPeriodId, selectedGroupKey);
+
+  const { items, total } = aggregateTransactions(txns, (txn) => {
+    if (txn.tags && txn.tags.length > 0) {
+      return txn.tags.map((t) => (typeof t === "string" ? t : t.name));
+    }
+    return ["Untagged"];
+  });
+
+  return {
+    items: items.map((item) => ({ tag: item.name, amount: item.amount })),
+    total,
+  };
+}

src/components/ProgressCard/TopTags.tsx

@@ -0,0 +1,83 @@
+import * as React from "react";
+import { Box, Paper, Typography } from "@mui/material";
+import ProgressCardView from "./ProgressCard.view";
+import { extractTopTags } from "./TopTags.adapter";
+import { ProgressCardProps } from "./ProgressCard.props";
+
+export default function TopTags(props: ProgressCardProps) {
+  const {
+    title,
+
+    reportData,
+    state,
+    stateSetters,
+
+    isFetching,
+  } = props
+  const { flow, selectedPeriodId, selectedGroupKey } = state;
+  const { setSelectedGroupKey } = stateSetters;
+
+  const { items, total } = React.useMemo(() => {
+    return extractTopTags(reportData, flow, selectedPeriodId, selectedGroupKey);
+  }, [reportData, flow, selectedPeriodId, selectedGroupKey]);
+
+  return (
+    <Paper
+      sx={{
+        p: { xs: 2.5, sm: 4 },
+        borderRadius: 4,
+        width: "100%",
+        boxShadow: "none",
+        border: "1px solid",
+        borderColor: "divider",
+        bgcolor: "background.paper",
+        opacity: isFetching ? 0.6 : 1,
+        transition: "opacity 0.3s ease",
+        pointerEvents: isFetching ? "none" : "auto",
+      }}
+    >
+      <Typography variant="h6" fontWeight={700} gutterBottom>
+        {title}
+      </Typography>
+
+      <Box
+        sx={{
+          display: "grid",
+          gridTemplateColumns: {
+            xs: "1fr",
+            sm: "repeat(2, 1fr)",
+            md: "repeat(4, 1fr)",
+          },
+          gap: 2,
+        }}
+      >
+        {items.map((item) => {
+          const isSelected = !!selectedGroupKey?.tags?.includes(item.tag);
+          return (
+            <ProgressCardView
+              {...props}
+              key={item.tag}
+              title={item.tag}
+              progressAmount={item.amount}
+              totalAmount={total}
+              selected={isSelected}
+              onClick={() => {
+                if (setSelectedGroupKey) {
+                  let newKey = selectedGroupKey ? { ...selectedGroupKey } : {};
+                  
+                  if (isSelected) {
+                    delete newKey.tags;
+                  } else {
+                    newKey.tags = [item.tag];
+                  }
+
+                  setSelectedGroupKey(Object.keys(newKey).length ? newKey : null);
+                }
+              }}
+            />
+          );
+        })}
+      </Box>
+    </Paper>
+  );
+}

src/components/ProgressCard/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./ProgressCard.view";
+export * from "./ProgressCard.props";

src/components/report.helpers.ts

@@ -0,0 +1,230 @@
+import {
+  ReportPeriod,
+  ReportBucket,
+  GroupKey,
+  PeriodType,
+  ReportData,
+  Transaction,
+} from "../features/report";
+
+// ─── Types ────────────────────────────────────────────────────
+
+export type PeriodKey = PeriodType;
+
+export type DecoratedPeriod = ReportPeriod & {
+  id: string;
+  label: string;
+};
+
+// ─── Period helpers ───────────────────────────────────────────
+
+const PREFIX_TO_KEY: Record<string, PeriodKey> = {
+  D: "daily",
+  W: "weekly",
+  M: "monthly",
+  ALL: "all",
+};
+
+/**
+ * Derive the period key from a decorated-period id.
+ * E.g. `"W:2026-04-28_2026-05-04"` → `"weekly"`
+ */
+export function periodIdToKey(periodId: string): PeriodKey {
+  const prefix = periodId.split(":")[0];
+  return PREFIX_TO_KEY[prefix] ?? "all";
+}
+
+// ─── Metric helpers ───────────────────────────────────────────
+
+export function getAmount(period: ReportPeriod): number {
+  return period.metric.sum;
+}
+
+function mergeMetric(a: ReportPeriod["metric"], b: ReportPeriod["metric"]) {
+  const sum = a.sum + b.sum;
+  const count = a.count + b.count;
+
+  return {
+    ...a,
+    sum,
+    count,
+    average: count > 0 ? sum / count : 0,
+    transactions:
+      a.transactions || b.transactions
+        ? [...(a.transactions || []), ...(b.transactions || [])]
+        : undefined,
+  };
+}
+
+/**
+ * Merge periods with the same id across all buckets, summing
+ * their metrics and concatenating transactions.
+ *
+ * Returns sorted by start date ascending.
+ */
+export function mergeBucketPeriods(
+  buckets: ReportBucket[],
+  key: PeriodKey
+): DecoratedPeriod[] {
+  const map = new Map<string, DecoratedPeriod>();
+
+  for (const bucket of buckets) {
+    const periods = (bucket.periods[key] || []) as DecoratedPeriod[];
+
+    for (const p of periods) {
+      const existing = map.get(p.id);
+
+      if (!existing) {
+        map.set(p.id, {
+          ...p,
+          metric: { ...p.metric },
+        });
+      } else {
+        map.set(p.id, {
+          ...existing,
+          metric: mergeMetric(existing.metric, p.metric),
+        });
+      }
+    }
+  }
+
+  return Array.from(map.values()).sort(
+    (a, b) => new Date(a.start).getTime() - new Date(b.start).getTime()
+  );
+}
+
+// ─── Formatting ───────────────────────────────────────────────
+
+export const formatCurrency = (val: number) => {
+  const absVal = Math.abs(val);
+  if (absVal >= 100000) {
+    return `₹ ${(val / 100000).toFixed(2)}L`;
+  }
+  if (absVal >= 1000) {
+    return `₹ ${(val / 1000).toFixed(2)}k`;
+  }
+  return `₹ ${val.toFixed(2)}`;
+};
+
+export const getPercentage = (progressAmount: number, totalAmount: number) => {
+  if (!totalAmount) return 0;
+  return Math.min(100, Math.max(0, (progressAmount / totalAmount) * 100));
+};
+
+// ─── Group filtering ──────────────────────────────────────────
+
+/**
+ * Check if a bucket's group_key matches the selected GroupKey.
+ * Every dimension present in `selected` must exist in the bucket
+ * and contain all the selected values.
+ */
+export function matchesGroupKey(
+  bucket: ReportBucket,
+  selected: GroupKey
+): boolean {
+  for (const [dim, values] of Object.entries(selected)) {
+    const bucketValues = bucket.group_key[dim];
+    if (!bucketValues) return false;
+    if (!(values as string[]).every((v) => bucketValues.includes(v)))
+      return false;
+  }
+  return true;
+}
+
+/**
+ * Return only buckets matching the selected group key,
+ * or all buckets if no selection.
+ */
+export function filterBuckets(
+  buckets: ReportBucket[],
+  selectedGroupKey: GroupKey | null
+): ReportBucket[] {
+  if (!selectedGroupKey) return buckets;
+  return buckets.filter((b) => matchesGroupKey(b, selectedGroupKey));
+}
+
+export function extractFilteredTransactions(
+  reportData: ReportData,
+  selectedPeriodId: string | null | undefined,
+  selectedGroupKey: GroupKey | null | undefined
+): Transaction[] {
+  let txns: Transaction[] = [];
+
+  if (selectedPeriodId) {
+    const key = periodIdToKey(selectedPeriodId);
+    const periods = mergeBucketPeriods(reportData.buckets, key);
+    const selected = periods.find((p) => p.id === selectedPeriodId);
+    txns = selected?.metric.transactions || [];
+  } else {
+    const periods = mergeBucketPeriods(reportData.buckets, "all");
+    if (periods.length > 0) {
+      const period = periods.reduce((latest, p) =>
+        new Date(p.start).getTime() > new Date(latest.start).getTime()
+          ? p
+          : latest
+      , periods[0]);
+      txns = period?.metric.transactions || [];
+    }
+  }
+
+  if (selectedGroupKey) {
+    txns = txns.filter((txn) => {
+      let match = true;
+      if (selectedGroupKey.tags && selectedGroupKey.tags.length > 0) {
+        if (!txn.tags) {
+          match = false;
+        } else {
+          const txnTags = txn.tags.map((t: any) =>
+            typeof t === "string" ? t : t.name
+          );
+          if (
+            !selectedGroupKey.tags.every((selectedTag) =>
+              txnTags.includes(selectedTag)
+            )
+          ) {
+            match = false;
+          }
+        }
+      }
+      if (match && selectedGroupKey.payee && selectedGroupKey.payee.length > 0) {
+        if (!txn.payee || !txn.payee.name) {
+          match = false;
+        } else {
+          if (!selectedGroupKey.payee.includes(txn.payee.name)) {
+            match = false;
+          }
+        }
+      }
+      return match;
+    });
+  }
+
+  return txns;
+}
+
+export function aggregateTransactions(
+  transactions: Transaction[],
+  keyExtractor: (txn: Transaction) => string[],
+  limit = 4
+): { items: { name: string; amount: number }[]; total: number } {
+  const map = new Map<string, number>();
+
+  for (const txn of transactions) {
+    const keys = keyExtractor(txn);
+    for (const key of keys) {
+      map.set(key, (map.get(key) || 0) + txn.amount);
+    }
+  }
+
+  const items = Array.from(map.entries()).map(([name, amount]) => ({
+    name,
+    amount,
+  }));
+
+  items.sort((a, b) => b.amount - a.amount);
+
+  const top = items.slice(0, limit);
+  const total = top.reduce((sum, item) => sum + item.amount, 0);
+
+  return { items: top, total };
+}

src/dashboard-config.ts

@@ -0,0 +1,40 @@
+import HistoryChart from "./components/HistoryChart";
+import LatestItems from "./components/LatestItems";
+import { DashboardConfig } from "./components/Dashboard";
+import TopTags from "./components/ProgressCard/TopTags";
+import TopPayees from "./components/ProgressCard/TopPayees";
+
+export const configuration: DashboardConfig = {
+  sections: [
+    {
+      id: "breakdown",
+      title: "Breakdown",
+      summary: "Interactive chronological tracking",
+      component: HistoryChart,
+      settings: {
+        tabs: ["Weekly", "Monthly"],
+      },
+    },
+    {
+      id: "top-categories",
+      title: 'Top Categories',
+      component: TopTags,
+      settings: {
+        compact: true,
+      },
+    },
+    {
+      id: "top-payees",
+      title: 'Top Payees',
+      component: TopPayees,
+      settings: {
+        compact: true,
+      },
+    },
+    {
+      id: "items",
+      title: 'Recent Transactions',
+      component: LatestItems,
+    },
+  ],
+};

src/features/fetch-requests/fetch-requests.models.ts

@@ -0,0 +1,133 @@
+export type FetchRequestStatus =
+  | "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 {
+  format: string;
+  from_email?: string;
+  subject?: string;
+  raw_terms?: string[];
+  txn_dict_count?: number;
+  txn_dicts_count?: number;
+}
+
+export interface FetchRequestCreate {
+  source: FileSource | EmailSource;
+  account_name: string;
+  payor_username?: string;
+  start_date?: string;
+  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;
+}
+
+export interface UploadResult {
+  original_filename: string;
+  saved_as: string;
+  content_type: string;
+  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;

src/features/fetch-requests/index.ts

@@ -0,0 +1,23 @@
+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 {
+  useUploadFile,
+  useFetchRequestAmbiguities,
+  useResolveAmbiguity,
+} from "./useFetchRequests";

src/features/fetch-requests/useFetchRequests.ts

@@ -0,0 +1,90 @@
+import { useResourceByName } from "../../../react-openapi";
+import { api } from "../../../react-openapi/api/client";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { ResolveAmbiguityPayload } from "./fetch-requests.models";
+
+export function useFetchRequestsList(params?: {
+  status?: string;
+  account_name?: string;
+  source_type?: string;
+}) {
+  const { useList } = useResourceByName("fetch-requests");
+  return useList(params);
+}
+
+export function useFetchRequest(id: string) {
+  const { useRead } = useResourceByName("fetch-requests");
+  return useRead(id);
+}
+
+export function useCreateFetchRequest() {
+  const { useCreate } = useResourceByName("fetch-requests");
+  return useCreate();
+}
+
+export function useUpdateFetchRequest() {
+  const { usePatch } = useResourceByName("fetch-requests");
+  return usePatch();
+}
+
+export function useDeleteFetchRequest() {
+  const { useDelete } = useResourceByName("fetch-requests");
+  return useDelete();
+}
+
+export function useUploadFile() {
+  return useMutation({
+    mutationFn: async (file: File) => {
+      const arrayBuffer = await file.arrayBuffer();
+      const binary = new Uint8Array(arrayBuffer);
+      const res = await api.post("/uploads", binary, {
+        headers: {
+          "Content-Type": file.type,
+          "Content-Disposition": `attachment; filename="${file.name}"`,
+        },
+      });
+      return res.data;
+    },
+  });
+}
+
+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],
+      });
+    },
+  });
+}

src/features/report-snapshots/index.ts

@@ -0,0 +1,4 @@
+export type {
+  ReportSnapshot,
+  ReportQuery,
+} from "./report-snapshots.models";

src/features/report-snapshots/report-snapshots.models.ts

@@ -0,0 +1,15 @@
+export interface ReportQuery {
+  accounts?: string[] | null;
+  ignore_self?: boolean | null;
+  start_date?: string | null;
+  end_date?: string | null;
+  min_amount?: number | null;
+  max_amount?: number | null;
+}
+
+export interface ReportSnapshot {
+  id: string;
+  snapshot_id: string;
+  created_at: string;
+  query?: ReportQuery;
+}

src/features/report-snapshots/useReportSnapshots.ts

@@ -0,0 +1,16 @@
+import { useResourceByName } from "../../../react-openapi";
+
+export function useReportSnapshotsList() {
+  const { useList } = useResourceByName("reports");
+  return useList();
+}
+
+export function useCreateSnapshot() {
+  const { useCreate } = useResourceByName("reports");
+  return useCreate();
+}
+
+export function useDeleteSnapshot() {
+  const { useDelete } = useResourceByName("reports");
+  return useDelete();
+}

src/features/report/index.ts

@@ -0,0 +1,15 @@
+export {
+  useReport
+} from './useReport'
+export type {
+  Transaction,
+  ReportData,
+  ReportBucket,
+  ReportPeriod,
+  ReportQuery,
+  GroupKey,
+  PeriodType,
+} from './report.models'
+export {
+  prepareReport
+} from './report.utils'

src/features/report/report.models.ts

@@ -0,0 +1,112 @@
+export interface Payor {
+  id?: string;
+  name: string;
+  username: string;
+  email: string;
+}
+
+export interface Payee {
+  type: "merchant" | "person" | "transfer" | "other";
+  name: string;
+}
+
+export interface Account {
+  id: string;
+  name: string;
+  number: string;
+  type: "cash" | "bank" | "credit_card" | "wallet" | "other";
+  currency: string;
+  is_active?: boolean;
+}
+
+export interface Tag {
+  id: string;
+  name: string;
+  icon: string;
+  parent_id?: string | null;
+}
+
+export interface Transaction {
+  id: string;
+  payor: Payor;
+  payee: Payee;
+  amount: number;
+  account: Account;
+  tags: Tag[];
+  occurred_at: string;
+  created_at: string;
+}
+
+// -----------------------------
+// Metrics
+// -----------------------------
+
+export interface ReportMetric {
+  sum: number;
+  count: number;
+  average: number;
+  transactions?: Transaction[];
+}
+
+// -----------------------------
+// Period
+// -----------------------------
+
+export type PeriodType = "daily" | "weekly" | "monthly" | "all";
+
+export interface ReportPeriod {
+  start: string;
+  end: string;
+  metric: ReportMetric;
+}
+
+// -----------------------------
+// Group (bucket)
+// -----------------------------
+
+export type GroupKey = {
+  [dimension: string]: string[];
+};
+
+export interface ReportBucket {
+  group_key: GroupKey;
+
+  periods: {
+    daily?: ReportPeriod[];
+    weekly?: ReportPeriod[];
+    monthly?: ReportPeriod[];
+    all?: ReportPeriod[];
+  };
+}
+
+// -----------------------------
+// Report Query
+// -----------------------------
+
+export interface ReportQuery {
+  accounts?: string[] | null;
+  ignore_self?: boolean | null;
+  start_date?: string | null;
+  end_date?: string | null;
+  min_amount?: number | null;
+  max_amount?: number | null;
+}
+
+// -----------------------------
+// Final Report
+// -----------------------------
+
+export interface ReportData {
+  snapshot_id?: string | null;
+
+  flow?: "inflows" | "outflows" | null;
+
+  periods: PeriodType[];
+
+  tags?: string[] | null;
+  payee?: string[] | null;
+
+  buckets: ReportBucket[];
+
+  query: ReportQuery;
+}

src/features/report/report.utils.ts

@@ -0,0 +1,117 @@
+import {
+  ReportData,
+  ReportPeriod,
+  PeriodType,
+} from "./report.models";
+
+/* ---------- ID BUILDING ---------- */
+
+function formatDate(d: Date): string {
+  const y = d.getUTCFullYear();
+  const m = String(d.getUTCMonth() + 1).padStart(2, "0");
+  const day = String(d.getUTCDate()).padStart(2, "0");
+  return `${y}-${m}-${day}`;
+}
+
+function buildPeriodId(
+  type: PeriodType,
+  start: Date,
+  end: Date
+): string {
+  const s = formatDate(start);
+  const e = formatDate(end);
+
+  switch (type) {
+    case "daily":
+      return `D:${s}_${e}`;
+    case "weekly":
+      return `W:${s}_${e}`;
+    case "monthly":
+      return `M:${s}_${e}`;
+    case "all":
+      return `ALL:${s}_${e}`;
+    default:
+      return `${s}_${e}`;
+  }
+}
+
+/* ---------- LABEL BUILDING ---------- */
+
+const dayFmt = new Intl.DateTimeFormat("en-GB", {
+  day: "numeric",
+  month: "short",
+  timeZone: "UTC",
+});
+
+const monthDayFmt = new Intl.DateTimeFormat("en-GB", {
+  month: "short",
+  day: "numeric",
+  timeZone: "UTC",
+});
+
+const monthFmt = new Intl.DateTimeFormat("en-GB", {
+  month: "short",
+  timeZone: "UTC",
+});
+
+const yearFmt = new Intl.DateTimeFormat("en-GB", {
+  year: "numeric",
+  timeZone: "UTC",
+});
+
+function buildLabel(
+  type: PeriodType,
+  start: Date,
+  end: Date
+): string {
+  switch (type) {
+    case "daily":
+      return dayFmt.format(start);
+
+    case "weekly": {
+      const sDay = start.getUTCDate();
+      const m = monthFmt.format(start);
+      return `${sDay} ${m}`;
+    }
+
+    case "monthly":
+      return `${monthFmt.format(start)} ${yearFmt.format(start)}`;
+
+    default:
+      return `${monthDayFmt.format(start)} - ${monthDayFmt.format(end)}`;
+  }
+}
+
+/* ---------- MAIN ---------- */
+
+function decoratePeriods(
+  type: PeriodType,
+  periods: ReportPeriod[]
+): (ReportPeriod & { id: string; label: string })[] {
+  return periods.map((p) => ({
+    ...p,
+    id: buildPeriodId(type, new Date(p.start + "Z"), new Date(p.end + "Z")),
+    label: buildLabel(type, new Date(p.start + "Z"), new Date(p.end + "Z")),
+  }));
+}
+
+export function prepareReport(reportData: ReportData): ReportData {
+  return {
+    ...reportData,
+    buckets: reportData.buckets.map((bucket) => {
+      const newPeriods: typeof bucket.periods = {};
+
+      for (const type of reportData.periods) {
+        const arr = bucket.periods[type];
+        if (arr) {
+          newPeriods[type] = decoratePeriods(type, arr);
+        }
+      }
+
+      return {
+        ...bucket,
+        periods: newPeriods,
+      };
+    }),
+  };
+}

src/features/report/useReport.ts

@@ -0,0 +1,21 @@
+import { useResourceByName } from "../../../react-openapi";
+
+export interface ReportParams {
+  snapshot_id?: string;
+  periods?: ("daily" | "weekly" | "monthly" | "all")[];
+  flow?: "inflows" | "outflows";
+  payee?: string[];
+  tags?: string[];
+}
+
+export function useReport(params: ReportParams) {
+  const { useRead } = useResourceByName("reports");
+
+  return useRead(
+    params.snapshot_id ? params.snapshot_id : "latest",
+    {
+      ...params,
+      periods: params.periods,
+    }
+  );
+}

src/main.jsx

@@ -1,22 +1,78 @@
 import * as React from 'react';
 import { createRoot } from 'react-dom/client';
-import { BrowserRouter, Routes, Route } from "react-router-dom";
+import {
+  BrowserRouter,
+  Routes,
+  Route
+} from "react-router-dom";
+import {
+  Box,
+  CssBaseline,
+  Toolbar
+} from "@mui/material";
 import Home from './Home';
-import Admin from '../react-openapi/Admin';
+import Dashboard from './Dashboard';
+import FetchRequests from './FetchRequests';
+import FetchRequestDetail from './FetchRequestDetail';
+import ReportSnapshots from './ReportSnapshots';
+import { Admin, AppProvider, defaultFieldComponents } from '../react-openapi';
+import { configuration, profileConfiguration } from './openapi-config';
+import { Buffer } from 'buffer';
+import process from 'process';
 import { AuthProvider } from "../react-auth";
+import Header from './Header';
+import Footer from './Footer';
+import AppTheme from './shared-theme/AppTheme';
+
+window.Buffer = Buffer;
+window.process = process;
 
 const rootElement = document.getElementById('root');
 const root = createRoot(rootElement);
+
 const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
 
+const routerMapping = [
+  { path: "/", component: Home, headerTitle: "Home" },
+  { 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" },
+];
+
 root.render(
-  <BrowserRouter>
-    <AuthProvider authBaseUrl={AUTH_BASE}>
-      <Routes>
-        <Route path="/" element={<Home />} />
-        <Route path="/home" element={<Home />} />
-        <Route path="/admin/*" element={<Admin basePath="/admin" />} />
-      </Routes>
-    </AuthProvider>
-  </BrowserRouter>
+  <AppProvider resourceOverrides={configuration} profileConfig={profileConfiguration}>
+    <BrowserRouter>
+      <AuthProvider authBaseUrl={AUTH_BASE}>
+        <AppTheme>
+          <CssBaseline enableColorScheme />
+          <Header routerMapping={routerMapping} />
+
+          <Box sx={{ pb: 8 }}>
+            <Toolbar />
+
+            <Routes>
+              {routerMapping.map(({ path, component: Component }) => (
+                <Route
+                  key={path}
+                  path={path}
+                  element={
+                    path.startsWith("/admin") ? (
+                      <Component basePath="/admin" fieldComponents={{ ...defaultFieldComponents }} />
+                    ) : (
+                      <Component />
+                    )
+                  }
+                />
+              ))}
+            </Routes>
+          </Box>
+
+          <Footer />
+        </AppTheme>
+      </AuthProvider>
+    </BrowserRouter>
+  </AppProvider>
 );

src/openapi-config.ts

@@ -1,22 +1,32 @@
-import { ResourceOverride } from "./types/overrides";
+import { ResourceOverride } from "../react-openapi";
 
 export const configuration: Record<string, ResourceOverride> = {
   expenses: {
+    filterOptions: {
+      mode: "client",
+      fields: ["account", "payee", "tags", "occurred_at", "amount"],
+    },
     fields: {
       payee: {
-        displayField: "name",
+        displayFormat: "{name}",
+        filterType: "autocomplete",
       },
       payor: {
         display: false,
-        displayField: "username",
+        displayFormat: "{username}",
       },
       account: {
-        displayField: "name",
+        displayFormat: "{name}",
+        filterType: "multiselect",
+        refers: "accounts"
       },
       tags: {
-        displayField: ["name", "icon"],
+        displayFormat: "{icon} {name}",
+        filterType: "autocomplete",
+        refers: "tags"
       },
       occurred_at: {
+        filterType: "date-range",
         formatter: (val: string) => {
             const date = new Date(val);
             const day = date.getDate();
@@ -34,11 +44,54 @@ export const configuration: Record<string, ResourceOverride> = {
             return `${day}${suffix(day)} ${month} ${year}`;
         }
       },
+      amount: {
+        filterType: "number-range",
+      },
       created_at: {
         display: false
       }
     },
-    pagination: true,
+  },
+  'fetch-requests': {
+    fields: {
+      format: {
+        path: 'source.format',
+      },
+      start_date: {
+        type: 'date',
+        label: 'Start Date',
+      },
+      end_date: {
+        type: 'date',
+        label: 'End Date',
+      },
+      // account: {
+      //   refers: 'accounts',
+      // },
+      // tags: {
+      //   refers: 'tags',
+      // },
+    },
+  },
+  accounts: {
+    referenceOptions: {
+      enumOption: {
+        key: '_id',
+        value: '{name} - XX{number}',
+      },
+      autoComplete: true,
+      prefetch: true,
+    }
+  },
+  tags: {
+    referenceOptions: {
+      enumOption: {
+        key: '_id',
+        value: '{icon} {name}',
+      },
+      autoComplete: true,
+      prefetch: true,
+    }
   },
 };
 

src/shared-theme/AppTheme.tsx

@@ -1,53 +1,103 @@
-import * as React from 'react';
-import { ThemeProvider, createTheme } from '@mui/material/styles';
-import type { ThemeOptions } from '@mui/material/styles';
-import { inputsCustomizations } from './customizations/inputs';
-import { dataDisplayCustomizations } from './customizations/dataDisplay';
-import { feedbackCustomizations } from './customizations/feedback';
-import { navigationCustomizations } from './customizations/navigation';
-import { surfacesCustomizations } from './customizations/surfaces';
-import { colorSchemes, typography, shadows, shape } from './themePrimitives';
+import * as React from "react";
+import {
+  ThemeProvider,
+  createTheme,
+  CssBaseline,
+  Box,
+} from "@mui/material";
 
-interface AppThemeProps {
+import { getDesignTokens } from "./themePrimitives";
+import { getSemanticColors } from "./themeConfig";
+
+import { inputsCustomizations } from "./customizations/inputs";
+import { dataDisplayCustomizations } from "./customizations/dataDisplay";
+import { feedbackCustomizations } from "./customizations/feedback";
+import { navigationCustomizations } from "./customizations/navigation";
+import { surfacesCustomizations } from "./customizations/surfaces";
+
+export type ColorMode = "light" | "dark";
+
+type ColorModeContextValue = {
+  mode: ColorMode;
+  setMode: (mode: ColorMode) => void;
+  toggleColorMode: () => void;
+};
+
+export const ColorModeContext =
+  React.createContext<ColorModeContextValue>({
+    mode: "light",
+    setMode: () => {},
+    toggleColorMode: () => {},
+  });
+
+type AppThemeProps = {
   children: React.ReactNode;
-  /**
-   * This is for the docs site. You can ignore it or remove it.
-   */
-  disableCustomTheme?: boolean;
-  themeComponents?: ThemeOptions['components'];
-}
+  defaultMode?: ColorMode;
+};
+
+export default function AppTheme({
+  children,
+  defaultMode = "light",
+}: AppThemeProps) {
+  const [mode, setMode] =
+    React.useState<ColorMode>(defaultMode);
+
+  const toggleColorMode = React.useCallback(() => {
+    setMode((prev) =>
+      prev === "light" ? "dark" : "light"
+    );
+  }, []);
+
+  const contextValue = React.useMemo(
+    () => ({
+      mode,
+      setMode,
+      toggleColorMode,
+    }),
+    [mode, toggleColorMode]
+  );
+
+  const semantic = React.useMemo(
+    () => getSemanticColors(mode),
+    [mode]
+  );
+
+  const theme = React.useMemo(
+    () =>
+      createTheme({
+        ...getDesignTokens(mode),
+        semantic,
+
+        components: {
+          ...inputsCustomizations,
+          ...dataDisplayCustomizations,
+          ...feedbackCustomizations,
+          ...navigationCustomizations,
+          ...surfacesCustomizations,
+        },
+      }),
+    [mode, semantic]
+  );
 
-export default function AppTheme(props: AppThemeProps) {
-  const { children, disableCustomTheme, themeComponents } = props;
-  const theme = React.useMemo(() => {
-    return disableCustomTheme
-      ? {}
-      : createTheme({
-          // For more details about CSS variables configuration, see https://mui.com/material-ui/customization/css-theme-variables/configuration/
-          cssVariables: {
-            colorSchemeSelector: 'data-mui-color-scheme',
-            cssVarPrefix: 'template',
-          },
-          colorSchemes, // Recently added in v6 for building light & dark mode app, see https://mui.com/material-ui/customization/palette/#color-schemes
-          typography,
-          shadows,
-          shape,
-          components: {
-            ...inputsCustomizations,
-            ...dataDisplayCustomizations,
-            ...feedbackCustomizations,
-            ...navigationCustomizations,
-            ...surfacesCustomizations,
-            ...themeComponents,
-          },
-        });
-  }, [disableCustomTheme, themeComponents]);
-  if (disableCustomTheme) {
-    return <React.Fragment>{children}</React.Fragment>;
-  }
   return (
-    <ThemeProvider theme={theme} disableTransitionOnChange>
-      {children}
-    </ThemeProvider>
+    <ColorModeContext.Provider value={contextValue}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        <Box
+          sx={{
+            "--bg-page": semantic.surface.page,
+            "--bg-card": semantic.surface.card,
+            "--bg-elevated": semantic.surface.elevated,
+            "--border-default": semantic.border.default,
+            "--border-subtle": semantic.border.subtle,
+            "--text-primary": semantic.text.primary,
+            "--text-secondary": semantic.text.secondary,
+            "--text-muted": semantic.text.muted,
+          }}
+        >
+          {children}
+        </Box>
+      </ThemeProvider>
+    </ColorModeContext.Provider>
   );
 }

src/shared-theme/ColorModeIconDropdown.tsx

@@ -1,89 +0,0 @@
-import * as React from 'react';
-import DarkModeIcon from '@mui/icons-material/DarkModeRounded';
-import LightModeIcon from '@mui/icons-material/LightModeRounded';
-import Box from '@mui/material/Box';
-import IconButton, { IconButtonOwnProps } from '@mui/material/IconButton';
-import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import { useColorScheme } from '@mui/material/styles';
-
-export default function ColorModeIconDropdown(props: IconButtonOwnProps) {
-  const { mode, systemMode, setMode } = useColorScheme();
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const open = Boolean(anchorEl);
-  const handleClick = (event: React.MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-  const handleClose = () => {
-    setAnchorEl(null);
-  };
-  const handleMode = (targetMode: 'system' | 'light' | 'dark') => () => {
-    setMode(targetMode);
-    handleClose();
-  };
-  if (!mode) {
-    return (
-      <Box
-        data-screenshot="toggle-mode"
-        sx={(theme) => ({
-          verticalAlign: 'bottom',
-          display: 'inline-flex',
-          width: '2.25rem',
-          height: '2.25rem',
-          borderRadius: (theme.vars || theme).shape.borderRadius,
-          border: '1px solid',
-          borderColor: (theme.vars || theme).palette.divider,
-        })}
-      />
-    );
-  }
-  const resolvedMode = (systemMode || mode) as 'light' | 'dark';
-  const icon = {
-    light: <LightModeIcon />,
-    dark: <DarkModeIcon />,
-  }[resolvedMode];
-  return (
-    <React.Fragment>
-      <IconButton
-        data-screenshot="toggle-mode"
-        onClick={handleClick}
-        disableRipple
-        size="small"
-        aria-controls={open ? 'color-scheme-menu' : undefined}
-        aria-haspopup="true"
-        aria-expanded={open ? 'true' : undefined}
-        {...props}
-      >
-        {icon}
-      </IconButton>
-      <Menu
-        anchorEl={anchorEl}
-        id="account-menu"
-        open={open}
-        onClose={handleClose}
-        onClick={handleClose}
-        slotProps={{
-          paper: {
-            variant: 'outlined',
-            elevation: 0,
-            sx: {
-              my: '4px',
-            },
-          },
-        }}
-        transformOrigin={{ horizontal: 'right', vertical: 'top' }}
-        anchorOrigin={{ horizontal: 'right', vertical: 'bottom' }}
-      >
-        <MenuItem selected={mode === 'system'} onClick={handleMode('system')}>
-          System
-        </MenuItem>
-        <MenuItem selected={mode === 'light'} onClick={handleMode('light')}>
-          Light
-        </MenuItem>
-        <MenuItem selected={mode === 'dark'} onClick={handleMode('dark')}>
-          Dark
-        </MenuItem>
-      </Menu>
-    </React.Fragment>
-  );
-}

src/shared-theme/ColorModeSelect.tsx

@@ -1,28 +0,0 @@
-import * as React from 'react';
-import { useColorScheme } from '@mui/material/styles';
-import MenuItem from '@mui/material/MenuItem';
-import Select, { SelectProps } from '@mui/material/Select';
-
-export default function ColorModeSelect(props: SelectProps) {
-  const { mode, setMode } = useColorScheme();
-  if (!mode) {
-    return null;
-  }
-  return (
-    <Select
-      value={mode}
-      onChange={(event) =>
-        setMode(event.target.value as 'system' | 'light' | 'dark')
-      }
-      SelectDisplayProps={{
-        // @ts-ignore
-        'data-screenshot': 'toggle-mode',
-      }}
-      {...props}
-    >
-      <MenuItem value="system">System</MenuItem>
-      <MenuItem value="light">Light</MenuItem>
-      <MenuItem value="dark">Dark</MenuItem>
-    </Select>
-  );
-}

src/shared-theme/customizations/feedback.tsx

@@ -14,8 +14,8 @@ export const feedbackCustomizations: Components<Theme> = {
           color: orange[500],
         },
         ...theme.applyStyles('dark', {
-          backgroundColor: `${alpha(orange[900], 0.5)}`,
-          border: `1px solid ${alpha(orange[800], 0.5)}`,
+          backgroundColor: alpha(orange[900], 0.35),
+          border: `1px solid ${alpha(orange[800], 0.3)}`,
         }),
       }),
     },