MULTI schema handling

react-openapi/src/components/ResourceDetail.tsx

@@ -85,7 +85,7 @@ export function ResourceDetail({ resource, basePath }: ResourceDetailProps) {
               fmt = field.inlineDisplayFormat ?? resource.displayFormat;
             }
             return (
-              <Grid item xs={12} sm={6} md={4} key={field.name}>
+              <Grid size={12} key={field.name}>
                 <DetailFieldRenderer field={field} value={value} displayFormat={fmt} />
               </Grid>
             );

react-openapi/src/components/ResourceForm.tsx

@@ -106,7 +106,7 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
       }
 
       const opts = items.map((item: any) => ({
-        value: item[targetRes.primaryKey],
+        value: resolvePk(item, targetRes.primaryKey),
         label: applyFormat(item, targetRes.displayFormat),
       }));
       console.log(`[loadFkOptions] computed ${opts.length} options for field "${fieldName}"`, opts.slice(0, 3));
@@ -139,9 +139,9 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
             const targetRes = allResources.find((r) => r.name === rel.config.resource);
             if (targetRes) {
               if (Array.isArray(val)) {
-                resolved[rel.fieldName] = val.map((item: any) => item[targetRes.primaryKey]);
+                resolved[rel.fieldName] = val.map((item: any) => resolvePk(item, targetRes.primaryKey));
               } else if (typeof val === "object") {
-                resolved[rel.fieldName] = val[targetRes.primaryKey];
+                resolved[rel.fieldName] = resolvePk(val, targetRes.primaryKey);
               }
             }
             if (!rel.config.prefetch) {
@@ -237,7 +237,7 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
             {resource.orderedFields
               .filter((f) => !(f.name === resource.primaryKey && mode === "edit"))
               .map((field) => (
-                <Grid item xs={12} sm={6} md={4} key={field.name}>
+                <Grid size={12} key={field.name}>
                   <FormFieldRenderer
                     field={field}
                     value={formData[field.name]}
@@ -281,6 +281,11 @@ export function ResourceForm({ resource, basePath, mode }: ResourceFormProps) {
   );
 }
 
+function resolvePk(item: any, pk: string): any {
+  const v = item?.[pk];
+  return v != null ? v : item?.[`_${pk}`];
+}
+
 function applyFormat(obj: any, format: string): string {
   if (!obj || typeof obj !== "object") return String(obj ?? "");
   return format.replace(/\{(\w+)\}/g, (_, key) => String(obj[key] ?? ""));

react-openapi/src/components/ResourceList.tsx

@@ -387,7 +387,7 @@ export function ResourceList({ resource, basePath }: ResourceListProps) {
           {detailRow && (
             <Grid container spacing={2} sx={{ mt: 0.5 }}>
               {visibleColumns.map((col) => (
-                <Grid key={col.name} item xs={12} sm={6}>
+                <Grid key={col.name} size={{ xs: 12, sm: 6 }}>
                   <DetailFieldRenderer
                     field={col}
                     value={detailRow[col.name]}

react-openapi/src/components/fields/ListCellRenderer.tsx

@@ -62,5 +62,9 @@ export function ListCellRenderer({ field, value, displayFormat }: ListCellProps)
     return <Chip label={value ? "Yes" : "No"} size="small" color={value ? "success" : "default"} />;
   }
 
+  if (typeof value === "object") {
+    return <Typography variant="body2">{applyDisplayFormat(value, displayFormat ?? "")}</Typography>;
+  }
+
   return <Typography variant="body2">{String(value)}</Typography>;
 }

react-openapi/src/context/AppProvider.tsx

@@ -27,7 +27,7 @@ export function AppProvider({ specConfiguration, children }: AppProviderProps) {
 
         const spec = await loadSpec(specConfiguration.specUrl);
 
-        const allMessages = validateSpec(spec);
+        const allMessages = validateSpec(spec, specConfiguration);
 
         const errs = allMessages.filter((m) => m.type === "error");
         const warns = allMessages.filter((m) => m.type === "warning");

react-openapi/src/context/useResource.tsx

@@ -50,7 +50,7 @@ interface UseResourceReturn {
   resource: ResourceConfig;
   components: Record<string, React.FC<FilterComponentProps>>;
   list: (params?: Record<string, any>) => Promise<ParsedListResponse>;
-  get: (id: string | number) => Promise<any>;
+  get: (id: string | number, params?: Record<string, any>) => Promise<any>;
   create: (data: any) => Promise<any>;
   update: (id: string | number, data: any) => Promise<any>;
   remove: (id: string | number) => Promise<void>;
@@ -266,16 +266,7 @@ function buildFilterComponent(field: FieldConfig, resourceName: string): React.F
     );
   }
 
-  if (
+  function buildAutocompleteFilter(getDisplayValue: (row: any) => string) {
-    !field.fk &&
-    !field.enumValues &&
-    field.type !== "boolean" &&
-    field.type !== "integer" &&
-    field.type !== "number" &&
-    field.format !== "date" &&
-    field.format !== "date-time" &&
-    !field.refSchema
-  ) {
     const StringAutocompleteFilter: React.FC<FilterComponentProps> = ({ value, onChange, data, labelOverride }) => {
       const { resources, config } = useAppContext();
       const filterMode = config.resourceConfig?.[resourceName]?.filterOptions?.mode ?? "server";
@@ -284,7 +275,12 @@ function buildFilterComponent(field: FieldConfig, resourceName: string): React.F
 
       useEffect(() => {
         if (filterMode === "client" && data) {
-          setOptions(extractDataOptions(data, field.name));
+          const vals = new Set<string>();
+          for (const row of data) {
+            const v = getDisplayValue(row);
+            if (v && v !== "") vals.add(v);
+          }
+          setOptions([...vals].sort());
           fetched.current = true;
         } else if (filterMode === "server" && !fetched.current) {
           const cacheKey = resourceName + ":" + field.name;
@@ -302,11 +298,11 @@ function buildFilterComponent(field: FieldConfig, resourceName: string): React.F
                 const res = await api.get(selfRes.path, { params });
                 let items: any[];
                 if (selfRes.pagination) {
-                  items = res.data.items ?? [];
+                  items = Array.isArray(res.data) ? res.data : (res.data.items ?? []);
                 } else {
                   items = Array.isArray(res.data) ? res.data : [];
                 }
-                const values = [...new Set(items.map((r: any) => String(r[field.name] ?? "")).filter(Boolean))].sort();
+                const values = [...new Set(items.map((r: any) => getDisplayValue(r)).filter(Boolean))].sort();
                 _stringOptionsCache.set(cacheKey, values);
                 setOptions(values);
                 fetched.current = true;
@@ -338,6 +334,23 @@ function buildFilterComponent(field: FieldConfig, resourceName: string): React.F
     return StringAutocompleteFilter;
   }
 
+  const isSimpleField =
+    !field.fk && !field.enumValues &&
+    field.type !== "boolean" && field.type !== "integer" && field.type !== "number" &&
+    field.format !== "date" && field.format !== "date-time";
+
+  if (isSimpleField && !field.refSchema) {
+    return buildAutocompleteFilter((row) => String(row[field.name] ?? ""));
+  }
+
+  if (field.refSchema && field.inlineDisplayFormat) {
+    return buildAutocompleteFilter((row) => {
+      const val = row[field.name];
+      if (val == null || typeof val !== "object") return "";
+      return field.inlineDisplayFormat!.replace(/\{(\w+)\}/g, (_, key) => String(val[key] ?? ""));
+    });
+  }
+
   return ({ value, onChange, labelOverride }) => (
     <StringField
       field={{ ...field, readOnly: false, description: "", label: labelOverride ?? field.label }}
@@ -353,20 +366,11 @@ export function useResource(resourceName: string): UseResourceReturn {
 
   const [state, setState] = useState<ResourceState>({ loading: false, error: null });
 
-  if (!resource) {
+  const rPath = resource?.path;
-    const noop = async () => { throw new Error(`Resource "${resourceName}" not found yet`); };
+  const rPagination = resource?.pagination;
-    return {
+  const rUpdateMethod = resource?.updateMethod;
-      resource: null as unknown as ResourceConfig,
+  const rStreaming = resource?.streaming;
-      components: {},
+  const rFields = resource?.fields;
-      list: noop,
-      get: noop,
-      create: noop,
-      update: noop,
-      remove: noop,
-      loading: false,
-      error: null,
-    };
-  }
 
   const setLoading = useCallback((loading: boolean) => {
     setState((s) => ({ ...s, loading }));
@@ -378,22 +382,26 @@ export function useResource(resourceName: string): UseResourceReturn {
 
   const list = useCallback(
     async (params?: Record<string, any>): Promise<ParsedListResponse> => {
+      if (!rPath) return { items: [] };
       setLoading(true);
       setError(null);
       try {
         const api = getApi();
-        const res = await api.get(resource.path, { params });
+        const res = await api.get(rPath, { params });
         const data = res.data;
 
-        if (resource.pagination) {
+        if (rPagination) {
+          if (Array.isArray(data)) {
+            return { items: data };
+          }
           if (!data || typeof data !== "object" || !Array.isArray(data.items)) {
-            throw new Error(`Expected paginated response { total, items } from ${resource.path}`);
+            throw new Error(`Expected paginated response { total, items } from ${rPath}`);
           }
           return { items: data.items, total: data.total ?? data.items.length };
         }
 
         if (!Array.isArray(data)) {
-          throw new Error(`Expected array response from ${resource.path}`);
+          throw new Error(`Expected array response from ${rPath}`);
         }
         return { items: data };
       } catch (e: any) {
@@ -404,16 +412,17 @@ export function useResource(resourceName: string): UseResourceReturn {
         setLoading(false);
       }
     },
-    [resource.path, resource.pagination, setLoading, setError]
+    [rPath, rPagination, setLoading, setError]
   );
 
   const get = useCallback(
-    async (id: string | number): Promise<any> => {
+    async (id: string | number, params?: Record<string, any>): Promise<any> => {
+      if (!rPath) throw new Error(`Resource "${resourceName}" not found yet`);
       setLoading(true);
       setError(null);
       try {
         const api = getApi();
-        const res = await api.get(`${resource.path}/${id}`);
+        const res = await api.get(`${rPath}/${id}`, { params });
         return res.data;
       } catch (e: any) {
         setError(parseError(e));
@@ -422,16 +431,17 @@ export function useResource(resourceName: string): UseResourceReturn {
         setLoading(false);
       }
     },
-    [resource.path, setLoading, setError]
+    [rPath, setLoading, setError]
   );
 
   const create = useCallback(
     async (data: any): Promise<any> => {
+      if (!rPath) throw new Error(`Resource "${resourceName}" not found yet`);
       setLoading(true);
       setError(null);
       try {
         const api = getApi();
-        const res = await api.post(resource.path, data);
+        const res = await api.post(rPath, data);
         return res.data;
       } catch (e: any) {
         setError(parseError(e));
@@ -440,17 +450,18 @@ export function useResource(resourceName: string): UseResourceReturn {
         setLoading(false);
       }
     },
-    [resource.path, setLoading, setError]
+    [rPath, setLoading, setError]
   );
 
   const update = useCallback(
     async (id: string | number, data: any): Promise<any> => {
+      if (!rPath) throw new Error(`Resource "${resourceName}" not found yet`);
       setLoading(true);
       setError(null);
       try {
         const api = getApi();
-        const method = resource.updateMethod ?? "put";
+        const method = rUpdateMethod ?? "put";
-        const res = await (method === "patch" ? api.patch : api.put)(`${resource.path}/${id}`, data);
+        const res = await (method === "patch" ? api.patch : api.put)(`${rPath}/${id}`, data);
         return res.data;
       } catch (e: any) {
         setError(parseError(e));
@@ -459,16 +470,17 @@ export function useResource(resourceName: string): UseResourceReturn {
         setLoading(false);
       }
     },
-    [resource.path, resource.updateMethod, setLoading, setError]
+    [rPath, rUpdateMethod, setLoading, setError]
   );
 
   const remove = useCallback(
     async (id: string | number): Promise<void> => {
+      if (!rPath) throw new Error(`Resource "${resourceName}" not found yet`);
       setLoading(true);
       setError(null);
       try {
         const api = getApi();
-        await api.delete(`${resource.path}/${id}`);
+        await api.delete(`${rPath}/${id}`);
       } catch (e: any) {
         setError(parseError(e));
         throw e;
@@ -476,17 +488,17 @@ export function useResource(resourceName: string): UseResourceReturn {
         setLoading(false);
       }
     },
-    [resource.path, setLoading, setError]
+    [rPath, setLoading, setError]
   );
 
   const stream = useCallback(
     (handlers: StreamHandlers): StreamSubscription => {
-      if (!resource.streaming) {
+      if (!rPath || !rStreaming) {
         throw new Error(`Resource "${resourceName}" does not support streaming`);
       }
       const api = getApi();
       const baseUrl = (api.defaults.baseURL ?? "").replace(/\/+$/, "");
-      const url = baseUrl + resource.path;
+      const url = baseUrl + rPath;
       const es = new EventSource(url);
 
       es.onopen = () => handlers.onOpen?.();
@@ -504,19 +516,35 @@ export function useResource(resourceName: string): UseResourceReturn {
 
       return { close: () => es.close() };
     },
-    [resource.path, resource.streaming, resourceName]
+    [rPath, rStreaming, resourceName]
   );
 
   const components = useMemo(
     () => {
       const map: Record<string, React.FC<FilterComponentProps>> = {};
-      for (const field of resource.fields) {
+      if (!rFields) return map;
+      for (const field of rFields) {
         map[field.name] = buildFilterComponent(field, resourceName);
       }
       return map;
     },
-    [resource.fields, resourceName]
+    [rFields, resourceName]
   );
 
-  return { resource, components, list, get, create, update, remove, stream: resource.streaming ? stream : undefined, loading: state.loading, error: state.error };
+  if (!resource) {
+    return {
+      resource: null as unknown as ResourceConfig,
+      components,
+      list,
+      get,
+      create,
+      update,
+      remove,
+      stream: undefined,
+      loading: false,
+      error: null,
+    };
+  }
+
+  return { resource, components, list, get, create, update, remove, stream: rStreaming ? stream : undefined, loading: state.loading, error: state.error };
 }

react-openapi/src/hooks/useApi.ts

@@ -1,4 +1,5 @@
 import axios, { AxiosInstance } from "axios";
+import { tokenStore } from "../../../react-auth/token";
 
 let apiClient: AxiosInstance | null = null;
 
@@ -26,7 +27,6 @@ export function initApi(baseUrl: string, getToken?: () => string | null): AxiosI
       if (error.response?.status === 401 && getToken) {
         const currentToken = getToken();
         if (currentToken) {
-          const tokenStore = { clear: () => localStorage.removeItem("token") };
           tokenStore.clear();
         }
       }

react-openapi/src/spec-validator.ts

@@ -1,6 +1,6 @@
-import type { OpenApiSpec, ValidationMessage } from "./types";
+import type { OpenApiSpec, ValidationMessage, SpecConfiguration } from "./types";
 
-export function validateSpec(spec: OpenApiSpec): ValidationMessage[] {
+export function validateSpec(spec: OpenApiSpec, specConfig?: SpecConfiguration): ValidationMessage[] {
   const messages: ValidationMessage[] = [];
   const schemas = (spec.components?.schemas ?? {}) as Record<string, any>;
   const paths = spec.paths ?? {};
@@ -13,7 +13,7 @@ export function validateSpec(spec: OpenApiSpec): ValidationMessage[] {
     messages.push({ type: "error", message: "Missing 'info.title'" });
   }
 
-  if (!spec.servers?.[0]?.url) {
+  if (!spec.servers?.[0]?.url && !specConfig?.baseApiUrl) {
     messages.push({ type: "warning", message: "No 'servers[0].url' defined — provide 'baseApiUrl' in specConfiguration" });
   }
 

react-openapi/src/transformers/field-config.ts

@@ -13,12 +13,15 @@ export function extractFields(schemaName: string, schema: any, schemas: Record<s
     .map(([name, prop]: [string, any]) => {
       const isDirectRef = !!prop.$ref;
       const isItemsRef = prop.type === "array" && !!prop.items?.$ref;
-      const isRef = isDirectRef || isItemsRef;
+      const isOneOf = !!prop.oneOf;
+      const isRef = isDirectRef || isItemsRef || isOneOf;
 
       const refSchemaName = isDirectRef
         ? resolveRef(prop.$ref)
         : isItemsRef
         ? resolveRef(prop.items.$ref)
+        : isOneOf && prop.oneOf[0]?.$ref
+        ? resolveRef(prop.oneOf[0].$ref)
         : undefined;
 
       const refSchema = refSchemaName ? schemas[refSchemaName] : undefined;
@@ -31,7 +34,7 @@ export function extractFields(schemaName: string, schema: any, schemas: Record<s
         name,
         label: prop["x-label"],
         description: prop["x-description"] ?? prop["x-label"] ?? name,
-        type: isRef && refSchema ? "object" : (prop.type ?? "string"),
+        type: isRef && refSchema ? "object" : isOneOf ? "object" : (prop.type ?? "string"),
         format: prop.format,
         order: prop["x-order"],
         hidden: prop["x-hidden"] ?? {},

src/RequireAuth.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth, AuthPage } from "../react-auth";
+
+export function RequireAuth({ children }: { children: React.ReactNode }) {
+  const { currentUser, loading, error, login, register } = useAuth();
+  const navigate = useNavigate();
+  const [mode, setMode] = React.useState<"login" | "register">("login");
+
+  if (currentUser) {
+    return <>{children}</>;
+  }
+
+  return (
+    <AuthPage
+      mode={mode}
+      onBack={() => navigate("/")}
+      onSwitchMode={() => setMode(mode === "login" ? "register" : "login")}
+      login={login}
+      register={register}
+      loading={loading}
+      error={error}
+      currentUser={currentUser}
+    />
+  );
+}

src/features/report/useReport.ts

@@ -12,9 +12,11 @@ export interface ReportParams {
 export function useReport(params: ReportParams) {
   const { get } = useResource("reports");
 
+  const { snapshot_id, ...queryParams } = params;
+
   return useQuery({
     queryKey: ["reports", "read", params],
     queryFn: () =>
-      get(params.snapshot_id ? params.snapshot_id : "latest"),
+      get(snapshot_id ?? "latest", queryParams),
   });
 }

src/main.jsx

@@ -16,6 +16,7 @@ import Dashboard from './Dashboard';
 import FetchRequests from './FetchRequests';
 import FetchRequestDetail from './FetchRequestDetail';
 import ReportSnapshots from './ReportSnapshots';
+import { RequireAuth } from './RequireAuth';
 import { AppProvider, Admin } from '../react-openapi';
 import { Buffer } from 'buffer';
 import process from 'process';
@@ -23,6 +24,7 @@ import { AuthProvider } from "../react-auth";
 import Header from './Header';
 import Footer from './Footer';
 import AppTheme from './shared-theme/AppTheme';
+import { specConfiguration } from './openapi-config';
 
 const queryClient = new QueryClient();
 
@@ -33,14 +35,6 @@ const rootElement = document.getElementById('root');
 const root = createRoot(rootElement);
 
 const AUTH_BASE = import.meta.env.VITE_AUTH_BASE_URL;
-const API_BASE = import.meta.env.VITE_API_BASE_URL;
-
-const specConfig = {
-  specUrl: `${API_BASE}/openapi.yaml`,
-  baseApiUrl: API_BASE,
-  title: 'Khata Admin',
-  getToken: () => localStorage.getItem('token'),
-};
 
 const routerMapping = [
   { path: "/", component: Home, headerTitle: "Home" },
@@ -54,7 +48,7 @@ const routerMapping = [
 
 root.render(
   <QueryClientProvider client={queryClient}>
-  <AppProvider specConfiguration={specConfig}>
+  <AppProvider specConfiguration={specConfiguration}>
     <BrowserRouter>
       <AuthProvider authBaseUrl={AUTH_BASE}>
         <AppTheme>
@@ -71,7 +65,7 @@ root.render(
                   path={path}
                   element={
                     path.startsWith("/admin") ? (
-                      <Component basePath="/admin" />
+                      <RequireAuth><Component basePath="/admin" /></RequireAuth>
                     ) : (
                       <Component />
                     )

src/openapi-config.ts

@@ -0,0 +1,16 @@
+import type { SpecConfiguration } from "../react-openapi";
+// import { tokenStore } from "../react-auth";
+
+const apiBase = import.meta.env.VITE_API_BASE_URL;
+
+export const specConfiguration: SpecConfiguration = {
+  specUrl: `${apiBase}/openapi.json`,
+  baseApiUrl: apiBase,
+  title: "Khata",
+  resourceConfig: {
+    expenses: {
+      filterOptions: { mode: "client" },
+    },
+  },
+  // getToken: () => tokenStore.get(),
+};