@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/lib/page.utils.ts

@@ -1,864 +0,0 @@
-import type { ColumnAction, ColumnRef, CustomBtnConfig, FilterForm, PageConfig, SortBy, ToggleConfig } from "../vueform/config/types";
-import { convertToUtf8, formatMonthYear, formatNumberIntl, getMenuItemByUrl, isValidValue } from "./utils";
-import type { DasiV2FormSchema, FormSchema, FormSchemaHooks } from "../types/form.types";
-import type { Submenu } from "../menu";
-import api from "../api/api";
-import type { AxiosResponse } from "axios";
-import moment from "moment";
-import { useErrorDialog } from "../stores/dialog";
-import { InternalServerError } from "./constants";
-
-/**
- * Dialog
- *
- */
-const errorDialog = useErrorDialog();
-
-// Helper function to process mapped filter values
-function processMappedValue(mappedValue: any, filterItem: any) {
-  if (!mappedValue || typeof mappedValue !== "object") return;
-
-  Object.entries(mappedValue).forEach(([fieldKey, fieldValue]) => {
-    if (typeof fieldValue === "object" && fieldValue !== null) {
-      // Nested object: { field: { gte: "value", lte: "value" } }
-      Object.entries(fieldValue).forEach(([op, val]) => {
-        filterItem[`filters[${fieldKey}][${op}]`] = { type: op, value: String(val) };
-      });
-    } else {
-      // Simple value: { field: "value" }
-      filterItem[`filters[${fieldKey}][eq]`] = { type: "eq", value: String(fieldValue) };
-    }
-  });
-}
-
-/**
- * ----------------------------------
- * Filter & Toggle
- * ----------------------------------
- *
- */
-export interface FilterItem {
-  [key: string]: { type: string; value: string };
-}
-
-export interface ToggleState {
-  checked: boolean;
-  endpoint: string;
-}
-
-interface FilterQueryWithCondition {
-  filterQueryyString: string;
-  conditions: string[];
-}
-
-/**
- * Returns two FilterForm objects:
- * - The first contains filters to display on the page action menu (showOnPageActionMenu === true)
- * - The second contains filters to display on the filter form dialog (showOnPageActionMenu !== true)
- *
- */
-export function getFilterSeparated(filter: FilterForm): [FilterForm, FilterForm] {
-  const pageActionMenuFilter: FilterForm = {};
-  const formDialogFilter: FilterForm = {};
-
-  for (const [key, value] of Object.entries(filter)) {
-    /**
-     * If filter state saved, then get from storage
-     *
-     */
-    if (value.saveSate) {
-      const saveSate = value.stateStorage ?? "session";
-      const storage = saveSate === "local" ? localStorage : sessionStorage;
-      const valueStr = storage.getItem(`dasiv2.filter.${value.stateKey ?? key}`);
-      if (valueStr) {
-        try {
-          const savedValue = JSON.parse(valueStr);
-          if (savedValue) {
-            if (value.filterType === "month|year" && typeof savedValue === "string") {
-              value.nullValue = new Date(savedValue);
-            } else {
-              value.nullValue = savedValue;
-            }
-          }
-        } catch (err) {
-          console.error("Failed get filter state", err);
-        }
-      }
-    }
-
-    if (value.showOnPageActionMenu) pageActionMenuFilter[key] = value;
-    else formDialogFilter[key] = value;
-  }
-
-  return [pageActionMenuFilter, formDialogFilter];
-}
-
-export function genFilterQuery(filterSchema: FilterForm, formData?: any): FilterItem {
-  const filterItem: FilterItem = {};
-  for (const [key, item] of Object.entries(filterSchema || {}) as any[]) {
-    /**
-     * Set the filter item value to default
-     * it not yet set
-     *
-     */
-    const itemValue = formData?.[key] ?? item.default;
-    if (itemValue === undefined || itemValue === null) continue;
-
-    /**
-     * Save state
-     *
-     */
-    if (item.saveSate) {
-      const saveSate = item.stateStorage ?? "session";
-      const valueStr = JSON.stringify(itemValue);
-      if (valueStr) {
-        try {
-          const storage = saveSate === "local" ? localStorage : sessionStorage;
-          storage.setItem(`dasiv2.filter.${item.stateKey ?? key}`, valueStr);
-        } catch (err) {
-          console.error("Failed get filter state", err);
-        }
-      }
-    }
-
-    /**
-     * Set default so when filter dialog opened again
-     * it will set to prev data
-     *
-     */
-    item.default = itemValue;
-
-    if (item.filterType === "month|year") {
-      const d = new Date(String(itemValue));
-      if (item.isStokReal) {
-        filterItem[`month`] = { type: "eq", value: String(d.getMonth() + 1) };
-        filterItem[`year`] = { type: "eq", value: String(d.getFullYear()) };
-      } else {
-        filterItem[`filters[${key}][month]`] = { type: "eq", value: String(d.getMonth() + 1) };
-        filterItem[`filters[${key}][year]`] = { type: "eq", value: String(d.getFullYear()) };
-      }
-    } else if (item.filterType === "custom" && item.mapFilterValue) {
-      const mappedValue = item.mapFilterValue(String(itemValue));
-      processMappedValue(mappedValue, filterItem);
-
-      // Fallback for non-object values
-      if (!mappedValue || typeof mappedValue !== "object") {
-        filterItem[`filters[${key}][custom]`] = { type: "custom", value: String(mappedValue) };
-      }
-    } else {
-      if (item.isRaw) {
-        filterItem[`${key}`] = { type: item.filterType, value: String(itemValue) };
-      } else {
-        filterItem[`filters[${key}][${item.filterType}]`] = { type: item.filterType, value: String(itemValue) };
-      }
-    }
-  }
-  return filterItem;
-}
-
-export function genFilterQueryString(filterItem: FilterItem): FilterQueryWithCondition {
-  const regexForKeyCondition = /\[([^\]]+)\]/;
-  const searchParams = new URLSearchParams();
-  const conditions = [];
-  for (const [key, value] of Object.entries(filterItem)) {
-    const conditionKey = key.match(regexForKeyCondition);
-    if (value.type === "condition") conditions.push(`${key}:${value.value}`);
-    else if (value.type === "asCondition" && conditionKey && conditionKey[1]) {
-      conditions.push(`${conditionKey[1]}:${value.value}`);
-    } else searchParams.append(key, value.value);
-  }
-  return { filterQueryyString: searchParams.toString(), conditions };
-}
-
-export function filterQueryString(filterItem: FilterItem): string {
-  return "";
-  // const searchParams = new URLSearchParams();
-  // Object.entries(filterItem).forEach(([key, value]) => {
-  //   searchParams.append(key, value);
-  // });
-  // return searchParams.toString();
-}
-
-/**
- * Initialize toggle state based on pageConfig
- * Returns the initial toggle state and modified endpoint
- */
-export function initToggleState(pageConfig: PageConfig, baseEndpoint: string): ToggleState {
-  if (!pageConfig.toggleConfig?.show) {
-    return { checked: true, endpoint: baseEndpoint };
-  }
-
-  const toggleConfig = pageConfig.toggleConfig;
-  const defaultChecked = toggleConfig.defaultChecked ?? true;
-
-  let modifiedEndpoint = baseEndpoint;
-
-  if (toggleConfig.onChange) {
-    modifiedEndpoint = toggleConfig.onChange(defaultChecked, baseEndpoint);
-  } else if (toggleConfig.urlSuffixes) {
-    const suffix = defaultChecked ? toggleConfig.urlSuffixes.checked : toggleConfig.urlSuffixes.unchecked;
-    modifiedEndpoint = baseEndpoint + suffix;
-  }
-
-  return {
-    checked: defaultChecked,
-    endpoint: modifiedEndpoint
-  };
-}
-
-/**
- * Apply toggle change and return new endpoint
- */
-export function applyToggleChange(toggleConfig: ToggleConfig, checked: boolean, currentEndpoint: string): string {
-  if (!toggleConfig.show) return currentEndpoint;
-
-  // Get base endpoint by removing existing toggle suffixes
-  let baseEndpoint = currentEndpoint;
-  if (toggleConfig.urlSuffixes) {
-    if (toggleConfig.urlSuffixes.checked && baseEndpoint.endsWith(toggleConfig.urlSuffixes.checked)) {
-      baseEndpoint = baseEndpoint.slice(0, -toggleConfig.urlSuffixes.checked.length);
-    } else if (toggleConfig.urlSuffixes.unchecked && baseEndpoint.endsWith(toggleConfig.urlSuffixes.unchecked)) {
-      baseEndpoint = baseEndpoint.slice(0, -toggleConfig.urlSuffixes.unchecked.length);
-    }
-  }
-
-  // Apply new toggle state
-  if (toggleConfig.onChange) {
-    return toggleConfig.onChange(checked, baseEndpoint);
-  } else if (toggleConfig.urlSuffixes) {
-    const suffix = checked ? toggleConfig.urlSuffixes.checked : toggleConfig.urlSuffixes.unchecked;
-    return baseEndpoint + suffix;
-  }
-
-  return currentEndpoint;
-}
-
-/**
- * ----------------------------------
- * Row renderer
- * ----------------------------------
- *
- */
-
-/**
- * Generic render function for nested object with code/name pattern
- * Example: renderObjectWithCode(item, 'contract', 'contractCode')
- */
-export function renderObjectWithCode(item: any, objectKey: string, codeKey?: string) {
-  if (!item) return "";
-  const obj = item[objectKey];
-  if (!obj) return "";
-  const code = codeKey ? obj[codeKey] : obj.code || obj.no || obj.number || "";
-  const amendment = obj.amendment || obj.amandemen;
-  return `${code}${amendment ? ` / ${amendment.code || amendment.no || amendment.number || ""}` : ""}`;
-}
-
-/**
- * Generic render function for nested object from child field
- */
-export function renderObjectFromChild(jp: any, childField: string, objectKey: string, codeKey?: string) {
-  if (!isValidValue(jp?.[childField])) return "";
-  return renderObjectWithCode(jp?.[childField]?.[0], objectKey, codeKey);
-}
-
-/**
- * Generic render function for date from nested object
- */
-export function renderDateFromChild(jp: any, childField: string, dateField: string, format = "DD/MM/YYYY") {
-  if (!isValidValue(jp?.[childField]) || !jp?.[childField]?.[0]?.[dateField]) return "";
-  return moment(jp?.[childField]?.[0]?.[dateField]).format(format);
-}
-
-/**
- * Generic render function for approval status
- */
-export function renderApprovalStatus(jp: any, prevField: string, nextField: string) {
-  if (!jp) return "";
-  if (!isValidValue(jp[prevField])) return "<b>Belum Disubmit</b>";
-  if (!isValidValue(jp[nextField]) || (isValidValue(jp[prevField]) && jp[prevField][0]?.submitUlang)) {
-    return '<b class="text-orange-500">Menunggu Persetujuan</b>';
-  }
-  return jp[nextField][0]?.disetujui ? '<b class="text-green-500">Disetujui</b>' : `<b class="text-red-500">Tidak Disetujui</b>`;
-}
-
-/**
- * ----------------------------------
- * Page initialization
- * ----------------------------------
- *
- */
-interface BaseInitOptions {
-  tabReactive: any;
-  onRestore: (i: number, item: any) => void;
-  onDelete: (i: number, item: any) => void;
-  onEdit: (i: number, item: any) => void;
-  onCustomBtnClick?: (i: number, item: any, btnId?: string) => void;
-}
-
-interface PageInitOptions extends BaseInitOptions {
-  pageCode: string;
-  endpoint: string;
-  fullPath: string;
-}
-
-interface InitPageReturn {
-  pageConfig: PageConfig;
-  queryString: string;
-  endpoint: string;
-  formSchema: DasiV2FormSchema;
-  formHooks: FormSchemaHooks;
-  menuItem?: Submenu;
-  title: string;
-  columns: ColumnRef[];
-}
-
-interface InitColumnsOptions extends BaseInitOptions {
-  pageInfo: any;
-  pageConfig: PageConfig;
-  formSchema: DasiV2FormSchema;
-  title: string;
-}
-
-export async function initPageConfig(endpoint: string): Promise<PageConfig> {
-  let pageConfig: PageConfig;
-
-  /**
-   * Dynamically import the page config
-   * for the current endpoint,
-   * if not found, use dault page config
-   *
-   */
-  try {
-    const configModule = await import(`../vueform/config/${endpoint}.ts`);
-    pageConfig = configModule.default;
-  } catch (err) {
-    console.log(`No specific config found for ${endpoint}, using defaults`);
-    pageConfig = {};
-  }
-
-  return pageConfig;
-}
-
-export async function initPageSchema(pageCode: string, schemaPath: string): Promise<FormSchema> {
-  let schema: DasiV2FormSchema = {};
-  let hooks: FormSchemaHooks = {};
-
-  /**
-   * Init form schema and table column
-   * from the same schema file
-   *
-   */
-  try {
-    const schemaImported = (await import(`../vueform/schemas/${pageCode}/${schemaPath}.ts`)).default;
-    schema = schemaImported.schema ?? schemaImported;
-    hooks = schemaImported.hooks ?? schemaImported;
-  } catch (err) {
-    /**
-     * @deprecated
-     * all schema should be foldered
-     *
-     */
-    try {
-      const schemaImported = (await import(`../vueform/schemas/${schemaPath}.ts`)).default;
-      schema = schemaImported.schema ?? schemaImported;
-      hooks = schemaImported.hooks ?? schemaImported;
-    } catch (err) {
-      /**
-       * Now page activity can run without schema
-       * for some page that use custom form
-       * or display read only pages
-       *
-       */
-      console.log("Schema not found, read only or custom form page");
-      // throw new Error('Schema not found')
-    }
-  }
-
-  return { schema, hooks };
-}
-
-export function genColumnFromSchema(formSchema: DasiV2FormSchema): ColumnRef[] {
-  const columns: ColumnRef[] = [];
-  let i = 0;
-  for (const [key, item] of Object.entries(formSchema)) {
-    /**
-     * Skip static content
-     *
-     */
-    if ((item as any).showField === false || ["static", "container", "group"].includes((item as any).type)) continue;
-
-    /**
-     * Format {field}Id {field}Ids {field}Code
-     * Used on selector and config data relation
-     *
-     */
-    let newKey = key;
-    if (key.substring(key.length - 2) === "Id") newKey = key.substring(0, key.length - 2);
-    else if (key.substring(key.length - 3) === "Ids") newKey = key.substring(0, key.length - 3);
-    else if (key.substring(key.length - 4) === "Code" && key !== "unitCode") newKey = key.substring(0, key.length - 4);
-    const itemAny = item as any;
-
-    /**
-     * Set item visible or not
-     *
-     */
-    itemAny.showInTable = itemAny.showInTable ?? i < 5;
-
-    columns.push({
-      key: item.key ?? newKey,
-      type: "cell",
-      sortKey: itemAny.sortKey,
-      header: itemAny.cellHeader ?? itemAny.label ?? itemAny.text,
-      description: itemAny.cellDescripton,
-      visible: itemAny.showInTable,
-      cellType: itemAny.cellType ?? itemAny.type,
-      items: itemAny.items,
-      dataSource: itemAny.cellDataSource,
-
-      /**
-       * Number formatting
-       *
-       */
-      mask: itemAny.mask,
-      addons: itemAny.addons,
-
-      /**
-       * Selector props (from BaseSelector.vue)
-       *
-       */
-      showAvatar: itemAny.showAvatar,
-      returnObject: itemAny.returnObject,
-      autoFillOrg: itemAny.autoFillOrg,
-      multiple: itemAny.multiple,
-      params: itemAny.params,
-      condition: itemAny.condition,
-      orderBy: itemAny.orderBy,
-      sort: itemAny.sort,
-      objectKey: itemAny.objectKey,
-      nameField: itemAny.nameField,
-      nameFieldFunc: itemAny.nameFieldFunc,
-      descriptionField: itemAny.descriptionField,
-      descriptionFieldFunc: itemAny.descriptionFieldFunc,
-
-      /**
-       * Date Selector props (from DateSelectorElement.vue)
-       *
-       */
-      pickerType: itemAny.pickerType,
-      range: itemAny.range,
-      displayFormat: itemAny.displayFormat,
-      yearRange: itemAny.yearRange,
-      autoApply: itemAny.autoApply,
-      textInput: itemAny.textInput,
-      startDate: itemAny.startDate,
-      minDate: itemAny.minDate,
-      maxDate: itemAny.maxDate,
-
-      /**
-       * Custom render html
-       *
-       */
-      cellRender: itemAny.cellRender,
-
-      /**
-       * Header and cell align
-       *
-       */
-      textAlign: itemAny.textAlign,
-      headAlign: itemAny.headAlign
-    });
-    i += 1;
-  }
-  return columns;
-}
-
-export function initPageColumns(pageInfo: any, pageConfig: PageConfig, formSchema: DasiV2FormSchema): ColumnRef[] {
-  /**
-   * Columns are auto generated from pageConfig
-   * and fallback to schema
-   *
-   */
-  const columnSchema = pageConfig.columns ?? formSchema ?? {};
-
-  /**
-   * Auto generate columns
-   * columns are auto generated from pageConfig
-   * and fallback to schema
-   *
-   */
-  const columns: ColumnRef[] = [{ key: "id", header: "ID", visible: false, cellType: "text" }];
-  if (Array.isArray(columnSchema)) {
-    columns.push(...columnSchema);
-  } else {
-    columns.push(...genColumnFromSchema(columnSchema));
-  }
-
-  if (pageInfo.isApprovalRequired && !pageConfig.hideApprovalStatus) {
-    columns.push({ key: "status", cellType: "approval_status", header: "Status Approval", sortKey: "status", visible: true });
-  }
-
-  columns.push({ key: "createdAt", cellType: "dasi_v2_datetime", header: "Tanggal Dibuat", sortKey: "created_at" });
-  return columns;
-}
-
-function initColumns(options: InitColumnsOptions) {
-  /**
-   * Auto generate columns
-   *
-   */
-  const columns = initPageColumns(options.pageInfo, options.pageConfig, options.formSchema);
-
-  /**
-   * Add column for row action
-   *
-   */
-  if (options.pageConfig.showActionRow !== false) {
-    let actionRow: ColumnRef = { key: "action" };
-    if (options.pageConfig.actionRowConfig) {
-      actionRow = { ...options.pageConfig.actionRowConfig };
-    }
-
-    actionRow.type = "action";
-    if (typeof actionRow.visible !== "boolean") actionRow.visible = true;
-    if (typeof actionRow.showAction !== "boolean") {
-      actionRow.showAction = options.pageConfig.showActionRowOptions;
-    }
-
-    /**
-     * Row action button
-     *
-     */
-    let customBtnConfig = options.pageConfig.actionRowBtnConfig ? options.pageConfig.actionRowBtnConfig : { show: !!options.pageConfig.showActionRowButton };
-    if (!actionRow.customBtnConfig) actionRow.customBtnConfig = customBtnConfig;
-    if (!actionRow.onCustomBtnClick) actionRow.onCustomBtnClick = options.onCustomBtnClick;
-    if (!actionRow.actions) {
-      actionRow.actions = (i, row) => {
-        const moreActions: ColumnAction[] = [];
-        const pcMoreActions: ColumnAction[] = [];
-        if (options.pageConfig.moreRowActions) {
-          if (typeof options.pageConfig.moreRowActions === "function") {
-            pcMoreActions.push(...options.pageConfig.moreRowActions(i, row));
-          } else {
-            pcMoreActions.push(...options.pageConfig.moreRowActions);
-          }
-        }
-        for (const moreAction of pcMoreActions) {
-          const actionItem = { ...moreAction };
-          if (!actionItem.action) actionItem.action = options.onCustomBtnClick;
-          moreActions.push(actionItem);
-        }
-
-        return options.tabReactive.value === "deleted"
-          ? [
-              {
-                id: "restore",
-                label: `Restore ${options.title}`,
-                icon: "LucideUndo2",
-                action: options.onRestore
-              }
-            ]
-          : (() => {
-              const base = options.pageConfig.hideEditAction
-                ? [...moreActions]
-                : [
-                    {
-                      id: "edit",
-                      label: `Edit ${options.title}`,
-                      icon: "LucideEdit",
-                      action: options.onEdit
-                    },
-                    ...moreActions
-                  ];
-              if (options.pageConfig.hideDeleteAction) return base;
-              return [
-                ...base,
-                {
-                  type: "separator",
-                  action: () => {}
-                },
-                {
-                  id: "delete",
-                  label: `Hapus ${options.title}`,
-                  icon: "LucideTrash2",
-                  action: options.onDelete,
-                  negative: true
-                }
-              ];
-            })();
-      };
-    }
-    columns.push(actionRow);
-  }
-
-  return columns;
-}
-
-export async function initPageActivity(options: PageInitOptions): Promise<InitPageReturn> {
-  /**
-   * Prepare variables
-   * set endpoint without /
-   *
-   */
-  let newEndpoint = options.endpoint.replace(/^\/+/, "");
-  let queryString = "";
-
-  /**
-   * Init page config
-   *
-   */
-  const pageConfig = await initPageConfig(newEndpoint);
-
-  /**
-   * If there is parentField, that mean
-   * this is page for flow, we update status
-   * from child
-   *
-   */
-  if (pageConfig.parentField && pageConfig.nextDataField) {
-    if (!pageConfig.dataTransformer) {
-      pageConfig.dataTransformer = data => {
-        for (const item of data) {
-          item.status = item?.[pageConfig.nextDataField ?? "_"]?.[0]?.status;
-        }
-        return data;
-      };
-    }
-  }
-
-  /**
-   * Retrieve endpoint from pageConfig
-   * and format if endpoint conaints query params
-   *
-   */
-  if (pageConfig.endpoint) {
-    const endpointSplited = pageConfig.endpoint.split("?");
-    newEndpoint = endpointSplited[0].replace(/^\/+/, "");
-    queryString = endpointSplited.length > 1 ? endpointSplited[1] : "";
-  }
-
-  /**
-   * Apply toggle configuration to endpoint if present
-   * This modifies the endpoint based on the default toggle state
-   */
-  const toggleState = initToggleState(pageConfig, `/${newEndpoint}`);
-  newEndpoint = toggleState.endpoint.replace(/^\/+/, "");
-
-  /**
-   * Get page info,
-   * if user allowed to do certain things
-   *
-   */
-  const pageInfoUrl = pageConfig.savePath ?? newEndpoint;
-  const r = await api.get(`${pageInfoUrl}/init`);
-  const pageInfo = r.data.data ?? {};
-
-  /**
-   * Load form schema, default to endpoint
-   * unless specified on page config
-   *
-   */
-  const schemaPath = pageConfig.schema ?? newEndpoint;
-  const schema = await initPageSchema(options.pageCode, schemaPath);
-  const formSchema = schema.schema ?? schema;
-  const formHooks = schema.hooks ?? schema;
-
-  /**
-   * Get menu item from url
-   * and set for title
-   *
-   */
-  const menuItem = getMenuItemByUrl(options.fullPath);
-  let title = String(menuItem?.name ?? "");
-
-  // Fallback title based on endpoint if menu item not found
-  if (!title) {
-    title = "Data";
-  }
-
-  /**
-   * Init table columns
-   *
-   */
-  const columns = initColumns({
-    pageInfo,
-    pageConfig,
-    formSchema,
-    tabReactive: options.tabReactive,
-    title,
-    onRestore: options.onRestore,
-    onDelete: options.onDelete,
-    onEdit: options.onEdit,
-    onCustomBtnClick: options.onCustomBtnClick
-  });
-
-  return {
-    pageConfig,
-    queryString,
-    endpoint: `/${newEndpoint}`,
-    formSchema,
-    formHooks: formHooks as any,
-    menuItem,
-    title,
-    columns
-  };
-}
-
-/**
- * ----------------------------------
- * Get data
- * ----------------------------------
- *
- */
-interface GetPageDataOptions {
-  endpoint: string;
-  tabActive: string;
-  queryParams: string;
-  searchQuery: string;
-  columns: ColumnRef[];
-  sortBy?: SortBy;
-  filterQueryForm: FilterItem;
-  filterQueryPageMenu: FilterItem;
-  pageConfig: PageConfig;
-  pagination: DataPagination;
-}
-
-interface GetPageDataDetailOptions {
-  item: any;
-  endpoint: string;
-  formSchema: DasiV2FormSchema;
-  pageConfig?: PageConfig;
-  includeExtras?: boolean;
-}
-
-interface DataPagination {
-  page: number;
-  limit: number;
-}
-
-export function addStringToUri(uri: string, newStr: string) {
-  if (!newStr) return uri;
-  return `${uri.includes("?") ? "&" : "?"}${newStr}`;
-}
-
-export async function getPageDataDetail(options: GetPageDataDetailOptions): Promise<AxiosResponse<any, any> | null> {
-  if (options.pageConfig?.pageDetailHooks?.onDetailOpen) {
-    try {
-      if (!(await options.pageConfig?.pageDetailHooks?.onDetailOpen(options.formSchema, options.item))) return Promise.resolve(null);
-    } catch (err: any) {
-      errorDialog.open({ title: "Gagal Menampilkan Data Detail", description: err.message ?? InternalServerError });
-    }
-  }
-
-  let detailUri;
-  if (options.pageConfig?.pageDetailHooks?.setEndpoint) {
-    detailUri = await options.pageConfig?.pageDetailHooks?.setEndpoint(options.formSchema, options.item);
-  } else {
-    detailUri = `${options.endpoint}/${options.item.id}`;
-    const queryParams: string[] = [];
-    if (options.pageConfig?.extras && options.includeExtras !== false) {
-      queryParams.push(`extras=${(options.pageConfig.extras ?? []).join(",")}`);
-    }
-    if (options.pageConfig?.conditions) {
-      queryParams.push(`condition=${(options.pageConfig.conditions ?? []).join(",")}`);
-    }
-    detailUri += `?${queryParams.join("&")}`;
-  }
-  const r = await api.get(detailUri);
-  if (options.pageConfig?.dataDetailTransformer) {
-    r.data.data = options.pageConfig?.dataDetailTransformer(r.data.data);
-  }
-
-  if (options.pageConfig?.pageDetailHooks?.onBeforeMount) {
-    try {
-      if (!(await options.pageConfig?.pageDetailHooks?.onBeforeMount(options.formSchema, r.data.data))) return Promise.resolve(null);
-    } catch (err: any) {
-      errorDialog.open({ title: "Gagal Menampilkan Data Detail", description: err.message ?? InternalServerError });
-    }
-  }
-
-  return r;
-}
-
-export async function getPageData(options: GetPageDataOptions): Promise<AxiosResponse<any, any>> {
-  /**
-   * Standard endpoint handling
-   *
-   */
-  const uriArr = options.endpoint.split("?");
-  let baseUri = uriArr[0];
-  if (options.tabActive === "deleted") baseUri += "/deleted";
-
-  /**
-   * Add query params if any
-   *
-   */
-  if (options.queryParams) baseUri += addStringToUri(baseUri, options.queryParams);
-  if (baseUri.endsWith("?") || baseUri.endsWith("&")) baseUri.substring(0, baseUri.length - 1);
-
-  /**
-   * Add search query
-   *
-   */
-  if (options.searchQuery) {
-    baseUri += addStringToUri(baseUri, `search=${options.searchQuery}`);
-    const searchColumns = ["id"];
-    for (const [_, item] of Object.entries(options.columns)) {
-      if (!item.sortKey || !item.visible) continue;
-      searchColumns.push(item.sortKey);
-    }
-    if (searchColumns.length > 0) baseUri += addStringToUri(baseUri, `searchColumns=${searchColumns.join(",")}${options.pageConfig?.searchColumns ? `,${options.pageConfig.searchColumns}` : ""}`);
-  }
-
-  /**
-   * Add pagination
-   *
-   */
-  const pg = options.pagination;
-  baseUri += addStringToUri(baseUri, `limit=${pg.limit}&page=${pg.page}`);
-
-  /**
-   * Add sort by
-   *
-   */
-  if (options.sortBy) baseUri += addStringToUri(baseUri, `orderBy=${options.sortBy.key}&sort=${options.sortBy.by}`);
-
-  /**
-   * Set filter and conditions
-   *
-   */
-  const fcForm = genFilterQueryString(options.filterQueryForm);
-  const fcPage = genFilterQueryString(options.filterQueryPageMenu);
-  if (fcForm.filterQueryyString) baseUri += addStringToUri(baseUri, fcForm.filterQueryyString);
-  if (fcPage.filterQueryyString) baseUri += addStringToUri(baseUri, fcPage.filterQueryyString);
-
-  const cdArr = [];
-  if (fcForm.conditions) cdArr.push(...fcForm.conditions);
-  if (fcPage.conditions) cdArr.push(...fcPage.conditions);
-  if (options.pageConfig.conditions) cdArr.push(...options.pageConfig.conditions);
-  let conditions = [...cdArr];
-  const { searchQuery } = options;
-
-  if (typeof searchQuery === "string" && /^\W$/.test(searchQuery) && convertToUtf8(searchQuery)) {
-    conditions.push(`satuan:${convertToUtf8(searchQuery)}`);
-  }
-
-  if (conditions.length > 0) baseUri += addStringToUri(baseUri, `condition=${conditions.join(",")}`);
-
-  /**
-   * Add extras data relation
-   *
-   */
-  const extrasStr = (options.pageConfig.extras ?? []).join(",");
-  if (extrasStr) baseUri += addStringToUri(baseUri, `extras=${extrasStr}`);
-
-  /**
-   * Get the data from api
-   *
-   */
-  const r = await api.get(baseUri);
-  if (options.pageConfig.dataTransformer) {
-    r.data.data = options.pageConfig.dataTransformer(r.data.data);
-  }
-
-  return r;
-}