fixes for displayFormat

.dockerignore

@@ -1,40 +0,0 @@
-# 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

@@ -1,140 +0,0 @@
----
-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

Dockerfile

@@ -1,33 +0,0 @@
-# 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"]

react-openapi/components/EnhancedTable.tsx

@@ -278,10 +278,19 @@ function MobileCardRow({ row, config, onDelete, onNavigate, navigate, components
     );
 }
 
-function getFormattedDisplayValue(item: any, displayFormat: string) {
+function getFormattedDisplayValue(item: any, displayField?: string | string[], enumValue?: string) {
     if (!item) return "";
+    if (enumValue) return resolveTemplate(enumValue, item);
+    if (!displayField) return item.name || item.title || item.label || item.id || JSON.stringify(item);
 
-    return resolveTemplate(displayFormat, 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);
 }
 
 function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate, isMobile, components }: any) {
@@ -298,7 +307,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
     // 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.displayFormat);
+        const displayValue = getFormattedDisplayValue(value, field.displayField, field.enumOption?.value);
         
         return (
             <Chip 
@@ -318,7 +327,7 @@ 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 enumValue = field.enumOption?.value;
-        const tooltipTitle = value.map((item) => getFormattedDisplayValue(item, field.displayFormat)).join(', ');
+        const tooltipTitle = value.map((item) => getFormattedDisplayValue(item, field.displayField, enumValue)).join(', ');
 
         return (
             <Tooltip title={tooltipTitle} arrow placement="top">
@@ -326,7 +335,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
                     {value.map((item, idx) => (
                         <Chip
                             key={idx}
-                            label={getFormattedDisplayValue(item, field.displayFormat)}
+                            label={getFormattedDisplayValue(item, field.displayField, enumValue)}
                             size="small"
                             variant="filled"
                             sx={{ maxWidth: 120 }}
@@ -346,7 +355,7 @@ function FieldRenderer({ params, field, fieldKey, config, onNavigate, navigate,
 
     // 3. Simple Objects
     if (field.type === 'object' && value) {
-        return getFormattedDisplayValue(value, field.displayFormat) || (isMobile ? 'Object' : JSON.stringify(value));
+        return getFormattedDisplayValue(value, field.displayField, field.enumOption?.value) || (isMobile ? 'Object' : JSON.stringify(value));
     }
 
     if (field.type === 'number' && typeof value === 'number') {

react-openapi/components/FilterBar.tsx

@@ -11,7 +11,7 @@ import {
 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 { FilterBarComponents } from "../types/overrides";
 import { getFieldOptions, resolveTemplate } from "../utils/options";
 
 export function FilterAutocomplete({
@@ -124,7 +124,7 @@ function extractOptions(
 
     if (field.enumOption?.value) return resolveTemplate(field.enumOption.value, item);
 
-    // Use displayFormat if defined
+    // Use displayFormat if defined, otherwise fall back to displayField logic (for backward compatibility)
     if (field.displayFormat) {
       return resolveTemplate(field.displayFormat, item);
     }
@@ -158,22 +158,36 @@ function renderFilterInput(
   value: any,
   onChange: (key: string, val: any) => void,
   components?: FilterBarComponents,
-  fieldComponents?: FieldComponents,
 ) {
+  const CustomInput = components?.filterInputs?.[fieldName];
+  if (CustomInput) {
+    return <CustomInput field={field} value={value} onChange={(val) => onChange("value", val)} options={options} />;
+  }
+
   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)} />;
+    return (
+      <Box sx={{ display: "flex", gap: 1 }}>
+        <TextField type="number" placeholder="Min" size="small" value={rangeVal.min ?? ""}
+          onChange={(e) => onChange("min", e.target.value || undefined)} sx={{ width: 100 }} />
+        <TextField type="number" placeholder="Max" size="small" value={rangeVal.max ?? ""}
+          onChange={(e) => onChange("max", e.target.value || undefined)} sx={{ width: 100 }} />
+      </Box>
+    );
   }
 
   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)} />;
+    return (
+      <Box sx={{ display: "flex", gap: 1 }}>
+        <TextField type="datetime-local" placeholder="From" size="small" value={rangeVal.start ?? ""}
+          onChange={(e) => onChange("start", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
+        <TextField type="datetime-local" placeholder="To" size="small" value={rangeVal.end ?? ""}
+          onChange={(e) => onChange("end", e.target.value || undefined)} InputLabelProps={{ shrink: true }} sx={{ width: 170 }} />
+      </Box>
+    );
   }
 
   const selected = Array.isArray(value) ? value : [];
@@ -197,7 +211,6 @@ export interface FilterBarProps {
   onApply: (values: Record<string, any>) => void;
   onClear: () => void;
   components?: FilterBarComponents;
-  fieldComponents?: FieldComponents;
 }
 
 export default function FilterBar({
@@ -208,7 +221,6 @@ export default function FilterBar({
   onApply,
   onClear,
   components: filterComponents,
-  fieldComponents,
 }: FilterBarProps) {
   const [open, setOpen] = React.useState(false);
   const [draft, setDraft] = React.useState<Record<string, any>>(() => ({ ...appliedValues }));
@@ -286,7 +298,7 @@ export default function FilterBar({
                     {field.label}
                   </Box>
                   {renderFilterInput(fieldName, field, options, raw, (key, val) =>
-                    updateDraft(fieldName, key, val), filterComponents, fieldComponents
+                    updateDraft(fieldName, key, val), filterComponents
                   )}
                 </Box>
               );

react-openapi/components/ResourceView.tsx

@@ -20,8 +20,13 @@ import { GridPaginationModel } from '@mui/x-data-grid';
 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')
+  const df = field.displayField;
+  if (!df) return item.name ?? item.title ?? item.label ?? item.id ?? JSON.stringify(item);
+  if (Array.isArray(df)) {
+    const parts = df.map((k: string) => item[k]).filter((v: any) => v != null);
+    return parts.length > 0 ? parts.join(' ') : '';
+  }
+  return String(item[df] ?? '');
 }
 
 function applyClientFilters(
@@ -114,7 +119,7 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon
   const { useList, useRead, useCreate, useUpdate, useDelete, components } = useResource(config, { fieldComponents });
 
   const queryParams = React.useMemo(() => {
-    if (!isServer) return { limit: 10000 };
+    if (!isServer) return { limit: 10 };
     return {
       skip: paginationModel.page * paginationModel.pageSize,
       limit: paginationModel.pageSize,
@@ -179,7 +184,6 @@ export default function ResourceView({ config, onNavigateToResource, fieldCompon
               appliedValues={appliedFilters}
               onApply={setAppliedFilters}
               onClear={() => setAppliedFilters({})}
-              fieldComponents={components}
             />
           )}
           <EnhancedTable

react-openapi/components/fields/DateRangeField.tsx

@@ -1,30 +0,0 @@
-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

@@ -8,8 +8,6 @@ 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, {
@@ -35,6 +33,4 @@ export const defaultFieldComponents: FieldComponents = {
   image: WrappedImageUploadField,
   relation: RelationField,
   default: FallbackField,
-  dateRange: DateRangeField,
-  numberRange: NumberRangeField,
 };

react-openapi/components/fields/NumberRangeField.tsx

@@ -1,28 +0,0 @@
-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/index.ts

@@ -8,7 +8,5 @@ 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/types/overrides.ts

@@ -52,10 +52,6 @@ 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 {

react-openapi/utils/options.ts

@@ -26,7 +26,7 @@ export function getFieldOptions(field: ResourceField, relationData?: any[]): Sel
     }
 
     return data.map(item => ({
-      key: String(item[enumOption.key]),
+      key: String(item[enumOption.key] ?? ''),
       value: resolveTemplate(enumOption.value, item),
     }));
   }

src/ReportSnapshots.tsx

@@ -4,6 +4,7 @@ import {
   Container,
   Paper,
   Typography,
+  TextField,
   Button,
   IconButton,
   CircularProgress,
@@ -14,6 +15,8 @@ import {
   DialogContent,
   DialogContentText,
   DialogActions,
+  Switch,
+  FormControlLabel,
   Chip,
 } from "@mui/material";
 import DeleteIcon from "@mui/icons-material/Delete";
@@ -122,17 +125,22 @@ export default function ReportSnapshots() {
         </Typography>
 
         <Box sx={{ display: "flex", flexDirection: "column", gap: 2 }}>
-          {ignoreSelfField && components?.FormField && (
+          {ignoreSelfField && components?.FormField ? (
             <components.FormField
               name="ignore_self"
               field={ignoreSelfField}
               value={ignoreSelf}
               onChange={(val: boolean) => setIgnoreSelf(val)}
             />
+          ) : (
+            <FormControlLabel
+              control={<Switch checked={ignoreSelf} onChange={(e) => setIgnoreSelf(e.target.checked)} />}
+              label="Ignore self-transfers"
+            />
           )}
 
           <Box sx={{ display: "flex", gap: 2 }}>
-            {startDateField && components?.datetime && (
+            {startDateField && components?.datetime ? (
               <Box sx={{ flex: 1 }}>
                 <components.datetime
                   name="start_date"
@@ -141,8 +149,18 @@ export default function ReportSnapshots() {
                   onChange={(val: string) => setStartDate(val)}
                 />
               </Box>
+            ) : (
+              <TextField
+                label="Start Date"
+                type="datetime-local"
+                value={startDate}
+                onChange={(e) => setStartDate(e.target.value)}
+                size="small"
+                InputLabelProps={{ shrink: true }}
+                sx={{ flex: 1 }}
+              />
             )}
-            {endDateField && components?.datetime && (
+            {endDateField && components?.datetime ? (
               <Box sx={{ flex: 1 }}>
                 <components.datetime
                   name="end_date"
@@ -151,11 +169,21 @@ export default function ReportSnapshots() {
                   onChange={(val: string) => setEndDate(val)}
                 />
               </Box>
+            ) : (
+              <TextField
+                label="End Date"
+                type="datetime-local"
+                value={endDate}
+                onChange={(e) => setEndDate(e.target.value)}
+                size="small"
+                InputLabelProps={{ shrink: true }}
+                sx={{ flex: 1 }}
+              />
             )}
           </Box>
 
           <Box sx={{ display: "flex", gap: 2 }}>
-            {minAmountField && components?.FormField && (
+            {minAmountField && components?.FormField ? (
               <Box sx={{ flex: 1 }}>
                 <components.FormField
                   name="min_amount"
@@ -164,8 +192,17 @@ export default function ReportSnapshots() {
                   onChange={(val: string) => setMinAmount(val)}
                 />
               </Box>
+            ) : (
+              <TextField
+                label="Min Amount"
+                type="number"
+                value={minAmount}
+                onChange={(e) => setMinAmount(e.target.value)}
+                size="small"
+                sx={{ flex: 1 }}
+              />
             )}
-            {maxAmountField && components?.FormField && (
+            {maxAmountField && components?.FormField ? (
               <Box sx={{ flex: 1 }}>
                 <components.FormField
                   name="max_amount"
@@ -174,6 +211,15 @@ export default function ReportSnapshots() {
                   onChange={(val: string) => setMaxAmount(val)}
                 />
               </Box>
+            ) : (
+              <TextField
+                label="Max Amount"
+                type="number"
+                value={maxAmount}
+                onChange={(e) => setMaxAmount(e.target.value)}
+                size="small"
+                sx={{ flex: 1 }}
+              />
             )}
           </Box>
 

src/openapi-config.ts

@@ -57,12 +57,12 @@ export const configuration: Record<string, ResourceOverride> = {
       format: {
         path: 'source.format',
       },
-      // account: {
-      //   refers: 'accounts',
-      // },
-      // tags: {
-      //   refers: 'tags',
-      // },
+      account: {
+        refers: 'accounts',
+      },
+      tags: {
+        refers: 'tags',
+      },
     },
   },
   accounts: {