From 537aef94ff04ac5c17c677fd24420fe7b9fb2797 Mon Sep 17 00:00:00 2001
From: Vishesh 'ironeagle' Bangotra <aetoskia@gmail.com>
Date: Tue, 18 Aug 2026 13:01:55 +0530
Subject: [PATCH] resolve relative media URLs against the API base in
 react-openapi

- add resolveMediaUrl() in fields/utils.ts: prefixes /uploads/... and
  other relative paths with the configured baseApiUrl, leaves absolute
  http/data/blob URLs untouched
- use it for every image render: ListCellRenderer, DetailFieldRenderer,
  ImageField form preview, and FileUploadField preview/href (which
  hardcoded /uploads/<value>)
- drop the Expense-side resolveLogoUrl hack and logo pre-normalization;
  the Expenses page now renders logos through the same react-openapi
  path as the admin entity list
---
 .../src/components/fields/DetailFieldRenderer.tsx   |  5 ++++-
 .../src/components/fields/ListCellRenderer.tsx      |  6 +++---
 .../components/fields/renderers/FileUploadField.tsx |  7 +++++--
 .../src/components/fields/renderers/ImageField.tsx  |  5 ++++-
 react-openapi/src/components/fields/utils.ts        | 12 ++++++++++++
 src/Expense/Expense.tsx                             | 13 ++-----------
 src/Expense/types.ts                                |  7 -------
 7 files changed, 30 insertions(+), 25 deletions(-)

diff --git a/react-openapi/src/components/fields/DetailFieldRenderer.tsx b/react-openapi/src/components/fields/DetailFieldRenderer.tsx
index d21d583..423981e 100644
--- a/react-openapi/src/components/fields/DetailFieldRenderer.tsx
+++ b/react-openapi/src/components/fields/DetailFieldRenderer.tsx
@@ -3,6 +3,8 @@ import { Box, Typography, Avatar } from "@mui/material";
 import type { FieldConfig } from "../../types";
 import { ListCellRenderer } from "./ListCellRenderer";
 import { CurrencyField } from "./renderers/CurrencyField";
+import { resolveMediaUrl } from "./utils";
+import { useAppContext } from "../../context/AppContext";
 
 interface DetailFieldProps {
   field: FieldConfig;
@@ -12,6 +14,7 @@ interface DetailFieldProps {
 }
 
 export function DetailFieldRenderer({ field, value, displayFormat, basePath }: DetailFieldProps) {
+  const { config } = useAppContext();
   if (field.hidden?.detail) return null;
 
   return (
@@ -22,7 +25,7 @@ export function DetailFieldRenderer({ field, value, displayFormat, basePath }: D
       {field.uiType === "currency" ? (
         <CurrencyField value={Number(value)} large />
       ) : field.uiType === "image" ? (
-        <Avatar src={value} variant="rounded" sx={{ width: 120, height: 120 }} />
+        <Avatar src={resolveMediaUrl(value, config.baseApiUrl)} variant="rounded" sx={{ width: 120, height: 120 }} />
       ) : (
         <ListCellRenderer field={field} value={value} displayFormat={displayFormat} basePath={basePath} />
       )}
diff --git a/react-openapi/src/components/fields/ListCellRenderer.tsx b/react-openapi/src/components/fields/ListCellRenderer.tsx
index df08350..598dd16 100644
--- a/react-openapi/src/components/fields/ListCellRenderer.tsx
+++ b/react-openapi/src/components/fields/ListCellRenderer.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
 import { Box, Typography, Chip, Avatar, Dialog, DialogTitle, DialogContent, DialogActions, Button, Grid } from "@mui/material";
 import type { FieldConfig } from "../../types";
-import { applyDisplayFormat } from "./utils";
+import { applyDisplayFormat, resolveMediaUrl } from "./utils";
 import { InlineRefField } from "./renderers/InlineRefField";
 import { CurrencyField } from "./renderers/CurrencyField";
 import { extractFields } from "../../transformers/field-config";
@@ -17,7 +17,7 @@ interface ListCellProps {
 
 export function ListCellRenderer({ field, value, displayFormat, basePath }: ListCellProps) {
   const navigate = useNavigate();
-  const { schemas } = useAppContext();
+  const { schemas, config } = useAppContext();
   const [inlineItem, setInlineItem] = useState<any>(null);
 
   if (value === null || value === undefined) {
@@ -138,7 +138,7 @@ export function ListCellRenderer({ field, value, displayFormat, basePath }: List
   }
 
   if (field.uiType === "image" && value) {
-    return <Avatar src={value} variant="rounded" sx={{ width: 40, height: 40 }} />;
+    return <Avatar src={resolveMediaUrl(value, config.baseApiUrl)} variant="rounded" sx={{ width: 40, height: 40 }} />;
   }
 
   if (field.uiType === "currency" && value != null && !Number.isNaN(Number(value))) {
diff --git a/react-openapi/src/components/fields/renderers/FileUploadField.tsx b/react-openapi/src/components/fields/renderers/FileUploadField.tsx
index 1bfc338..803b9ca 100644
--- a/react-openapi/src/components/fields/renderers/FileUploadField.tsx
+++ b/react-openapi/src/components/fields/renderers/FileUploadField.tsx
@@ -2,6 +2,8 @@ import React from "react";
 import { Box, Typography, Avatar, Chip, Button, FormHelperText } from "@mui/material";
 import type { FieldConfig } from "../../../types";
 import { getApi } from "../../../hooks/useApi";
+import { useAppContext } from "../../../context/AppContext";
+import { resolveMediaUrl } from "../utils";
 
 interface Props {
   field: FieldConfig;
@@ -19,6 +21,7 @@ const acceptMap: Record<string, string> = {
 export function FileUploadField({ field, value, onChange }: Props) {
   const uploadConfig = field.upload!;
   const inputRef = React.useRef<HTMLInputElement>(null);
+  const { config } = useAppContext();
 
   const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
@@ -51,12 +54,12 @@ export function FileUploadField({ field, value, onChange }: Props) {
       </Typography>
       {value ? (
         uploadConfig.type === "image" ? (
-          <Avatar src={`/uploads/${value}`} variant="rounded" sx={{ width: 120, height: 120 }} />
+          <Avatar src={resolveMediaUrl(`/uploads/${value}`, config.baseApiUrl)} variant="rounded" sx={{ width: 120, height: 120 }} />
         ) : (
           <Chip
             label={value}
             component="a"
-            href={`/uploads/${value}`}
+            href={resolveMediaUrl(`/uploads/${value}`, config.baseApiUrl)}
             clickable
             onDelete={handleReplace}
           />
diff --git a/react-openapi/src/components/fields/renderers/ImageField.tsx b/react-openapi/src/components/fields/renderers/ImageField.tsx
index 0292ba0..0f8cb52 100644
--- a/react-openapi/src/components/fields/renderers/ImageField.tsx
+++ b/react-openapi/src/components/fields/renderers/ImageField.tsx
@@ -3,6 +3,8 @@ import { Box, Typography, Avatar, FormHelperText } from "@mui/material";
 import Button from "@mui/material/Button";
 import type { FieldConfig } from "../../../types";
 import { getApi } from "../../../hooks/useApi";
+import { useAppContext } from "../../../context/AppContext";
+import { resolveMediaUrl } from "../utils";
 
 interface Props {
   field: FieldConfig;
@@ -13,6 +15,7 @@ interface Props {
 }
 
 export function ImageField({ field, value, onChange, id, uploadUrl }: Props) {
+  const { config } = useAppContext();
   const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file) return;
@@ -47,7 +50,7 @@ export function ImageField({ field, value, onChange, id, uploadUrl }: Props) {
         {field.label}
       </Typography>
       {value ? (
-        <Avatar src={value} variant="rounded" sx={{ width: 120, height: 120 }} />
+        <Avatar src={resolveMediaUrl(value, config.baseApiUrl)} variant="rounded" sx={{ width: 120, height: 120 }} />
       ) : (
         <Button variant="outlined" component="label" size="small">
           Upload {field.label}
diff --git a/react-openapi/src/components/fields/utils.ts b/react-openapi/src/components/fields/utils.ts
index 52dd2b4..66407a5 100644
--- a/react-openapi/src/components/fields/utils.ts
+++ b/react-openapi/src/components/fields/utils.ts
@@ -9,3 +9,15 @@ export function applyDisplayFormat(item: any, format: string): string {
     return val != null ? String(val) : "";
   });
 }
+
+/**
+ * Resolve a media/image URL against the API base so relative paths
+ * like `/uploads/entity_logos/x.svg` point at the backend origin.
+ * Absolute (http/data/blob) URLs are returned untouched.
+ */
+export function resolveMediaUrl(value: string | null | undefined, baseUrl?: string): string | undefined {
+  if (value == null || value === "") return undefined;
+  if (value.startsWith("http") || value.startsWith("data:") || value.startsWith("blob:")) return value;
+  if (value.startsWith("/") && baseUrl) return `${baseUrl.replace(/\/+$/, "")}${value}`;
+  return value;
+}
diff --git a/src/Expense/Expense.tsx b/src/Expense/Expense.tsx
index c290302..076f4e3 100644
--- a/src/Expense/Expense.tsx
+++ b/src/Expense/Expense.tsx
@@ -14,9 +14,7 @@ import { useResource, useAppContext, formatCurrency } from "../../react-openapi"
 import { PageHeader } from "../ui/PageHeader";
 import { EmptyState } from "../ui/EmptyState";
 import { ExpenseList } from "./ExpenseList";
-import { ExpenseItem, ExpenseFieldConfigs, isExpense, currentMonthKey, monthKey, monthLabel, parseOccurredAt, resolveLogoUrl } from "./types";
-
-const API_BASE = import.meta.env.VITE_API_BASE_URL;
+import { ExpenseItem, ExpenseFieldConfigs, isExpense, currentMonthKey, monthKey, monthLabel, parseOccurredAt } from "./types";
 
 function StatCard({ label, value, hint }: { label: string; value: string; hint?: string }) {
   return (
@@ -77,14 +75,7 @@ export default function Expense() {
     let mounted = true;
     list({ limit: 0 }).then((res) => {
       if (!mounted) return;
-      const rows = (res.items ?? []) as ExpenseItem[];
-      const normalized = rows.map((it) => ({
-        ...it,
-        entity: it.entity
-          ? { ...it.entity, logo: resolveLogoUrl(it.entity.logo, API_BASE) }
-          : it.entity,
-      }));
-      setItems(normalized);
+      setItems((res.items ?? []) as ExpenseItem[]);
     });
     return () => {
       mounted = false;
diff --git a/src/Expense/types.ts b/src/Expense/types.ts
index 1bd3ff9..efe769e 100644
--- a/src/Expense/types.ts
+++ b/src/Expense/types.ts
@@ -29,13 +29,6 @@ export function isExpense(item: ExpenseItem): boolean {
   return (item.amount ?? 0) < 0;
 }
 
-export function resolveLogoUrl(logo?: string, base?: string): string | undefined {
-  if (!logo) return undefined;
-  if (logo.startsWith("http") || logo.startsWith("data:")) return logo;
-  if (logo.startsWith("/") && base) return `${base.replace(/\/+$/, "")}${logo}`;
-  return logo;
-}
-
 export function parseOccurredAt(value?: string): Date {
   const m = value?.match(/^(\d{2})-(\d{2})-(\d{4})$/);
   if (!m) {