@dasidev/dasi-ui 1.0.0

package/src/lib/page.utils.ts

@@ -0,0 +1,865 @@
+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 { ref } from "vue";
+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;
+}