From b9f9c07e0128914ba22b8db9392e4603e2bab1a4 Mon Sep 17 00:00:00 2001
From: rizrmd <rizky@avolut.com>
Date: Fri, 14 Jun 2024 08:54:56 -0700
Subject: [PATCH] fix

---
 comps/filter/FilterContent.tsx            |  39 +++-
 comps/filter/FilterField.tsx              | 204 ++++++++++-------
 comps/filter/MasterFilter.tsx             |  43 ++--
 comps/filter/gen/parse-filter.ts          |   0
 comps/filter/utils/filter-modifier.ts     |   1 -
 comps/filter/utils/get-filter.ts          |  31 +++
 comps/filter/utils/types.tsx              |  25 ++-
 comps/form/Form.tsx                       |   4 +-
 comps/form/base/BaseField.tsx             |   4 +-
 comps/form/base/BaseForm.tsx              |  10 +-
 comps/form/field/Field.tsx                |   1 +
 comps/form/field/FieldInput.tsx           |   5 +-
 comps/form/field/table-edit/TableEdit.tsx |  40 +++-
 comps/form/field/type/TypeCheckbox.tsx    |   1 +
 comps/form/field/type/TypeCustom.tsx      |   3 +-
 comps/form/field/type/TypeDropdown.tsx    |   2 +-
 comps/form/field/type/TypeInput.tsx       | 216 ++++++++----------
 comps/form/gen/fields.ts                  |  23 +-
 comps/form/gen/gen-field.ts               | 256 ++++++++++++++++++++++
 comps/form/gen/gen-rel-many.ts            |  18 +-
 comps/form/gen/gen-rel.ts                 |   1 -
 comps/form/gen/on_load_rel.ts             |  14 +-
 comps/form/typings.ts                     |  12 +-
 comps/form/utils/use-field.tsx            |   7 +-
 comps/list/TableList.tsx                  |  86 +++++---
 comps/md/MasterDetail.tsx                 |  14 ++
 comps/md/gen/md-gen.ts                    |  41 ++--
 comps/md/gen/mode-table-list.ts           |   2 +-
 comps/md/gen/tbl-list/on_load.ts          |   6 +-
 comps/md/parts/MDMaster.tsx               |   1 -
 exports.tsx                               |   2 +-
 gen/gen_table_list/gen_table_list.tsx     |   2 +-
 gen/gen_table_list/on_load.ts             |   2 +-
 preset/menu/Layout.tsx                    |   2 +-
 preset/menu/Menu.tsx                      |  25 +--
 35 files changed, 776 insertions(+), 367 deletions(-)
 create mode 100755 comps/filter/gen/parse-filter.ts
 create mode 100755 comps/filter/utils/get-filter.ts
 create mode 100755 comps/form/gen/gen-field.ts

diff --git a/comps/filter/FilterContent.tsx b/comps/filter/FilterContent.tsx
index 3049523..a4e3cd5 100755
--- a/comps/filter/FilterContent.tsx
+++ b/comps/filter/FilterContent.tsx
@@ -28,7 +28,37 @@ export const FilterContent: FC<{
           &.filter-inline {
             display: flex;
             align-items: center;
-            /* Styles specific to topbar */
+
+            .field {
+              padding-top: 0px;
+              align-items: center;
+            }
+            .field > .label {
+              display: none;
+            }
+            .field-inner {
+              min-height: 25px;
+            }
+            .form-inner {
+              align-items: center;
+            }
+            .field-input {
+              margin-top: 0 !important;
+            }
+            .field-outer {
+              margin-top: 3px;
+              margin-bottom: 3px;
+            }
+
+            .search-all {
+              input {
+                width: 150px;
+              }
+            }
+
+            .search-focus {
+              width: 250px !important;
+            }
           }
 
           &.filter-popup {
@@ -39,6 +69,10 @@ export const FilterContent: FC<{
             z-index: 1000;
             /* Styles specific to popup */
           }
+
+          .form-inner {
+            position: relative;
+          }
         `
       )}
     >
@@ -60,8 +94,7 @@ export const FilterContent: FC<{
           );
         }}
       </BaseForm>
-
-     
     </div>
   );
 };
+
diff --git a/comps/filter/FilterField.tsx b/comps/filter/FilterField.tsx
index 771c6f7..e24562e 100755
--- a/comps/filter/FilterField.tsx
+++ b/comps/filter/FilterField.tsx
@@ -30,23 +30,27 @@ export const FilterField: FC<{
     }, 500);
   }, [filter.form?.data[name]]);
 
+  let show_modifier = filter.mode !== "inline";
+
   return (
     <BaseField
       {...filter.form.fieldProps({
         name: name || "",
         label: label || name || "",
         render: internal.render,
-        prefix: () => (
-          <FieldModifier
-            onChange={(modifier) => {
-              filter.modifiers[name] = modifier;
-              filter.render();
-              filter_window.prasiContext.render();
-            }}
-            modifier={filter.modifiers[name]}
-            type={type}
-          />
-        ),
+        prefix: show_modifier
+          ? () => (
+              <FieldModifier
+                onChange={(modifier) => {
+                  filter.modifiers[name] = modifier;
+                  filter.render();
+                  filter_window.prasiContext.render();
+                }}
+                modifier={filter.modifiers[name]}
+                type={type}
+              />
+            )
+          : undefined,
         onLoad() {
           return [{ label: "halo", value: "asda" }];
         },
@@ -55,98 +59,132 @@ export const FilterField: FC<{
           : "typeahead",
       })}
     >
-      {(field) => (
-        <>
-          {type === "text" && (
-            <FieldTypeInput
-              {...field}
-              prop={{
-                type: "input",
-                sub_type: "text",
-                prefix: "",
-                suffix: "",
-              }}
-            />
-          )}
-          {type === "number" && (
-            <>
+      {(field) => {
+        if (type === "search-all") {
+          return (
+            <div className={cx("search-all c-flex items-center")}>
+              <div className="c-pl-2">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="14"
+                  height="14"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <circle cx="11" cy="11" r="8" />
+                  <path d="m21 21-4.3-4.3" />
+                </svg>
+              </div>
               <FieldTypeInput
                 {...field}
-                field={{
-                  ...field.field,
-                  name:
-                    filter.modifiers[name] === "between"
-                      ? name
-                      : `${name}_from`,
-                }}
                 prop={{
                   type: "input",
-                  sub_type: "number",
-                  prefix: "",
-                  suffix: "",
+                  sub_type: "search",
+                  placeholder: "Search...",
+                  onFocus(e) {
+                    e.currentTarget.classList.add("search-focus");
+                  },
+                  onBlur(e) {
+                    e.currentTarget.classList.remove("search-focus");
+                  },
                 }}
               />
-              {filter.modifiers[name] === "between" && (
+            </div>
+          );
+        }
+
+        return (
+          <>
+            {type === "text" && (
+              <FieldTypeInput
+                {...field}
+                prop={{
+                  type: "input",
+                  sub_type: "text",
+                }}
+              />
+            )}
+            {type === "number" && (
+              <>
                 <FieldTypeInput
                   {...field}
-                  field={{ ...field.field, name: `${name}_to` }}
+                  field={{
+                    ...field.field,
+                    name:
+                      filter.modifiers[name] === "between"
+                        ? name
+                        : `${name}_from`,
+                  }}
                   prop={{
                     type: "input",
                     sub_type: "number",
-                    prefix: "",
-                    suffix: "",
                   }}
                 />
-              )}
-            </>
-          )}
-          {type === "date" && (
-            <>
-              <FieldTypeInput
-                {...field}
-                field={{
-                  ...field.field,
-                  name:
-                    filter.modifiers[name] === "between"
-                      ? name
-                      : `${name}_from`,
-                }}
-                prop={{
-                  type: "input",
-                  sub_type: "date",
-                  prefix: "",
-                  suffix: "",
-                }}
-              />
-              {filter.modifiers[name] === "between" && (
+                {filter.modifiers[name] === "between" && (
+                  <FieldTypeInput
+                    {...field}
+                    field={{ ...field.field, name: `${name}_to` }}
+                    prop={{
+                      type: "input",
+                      sub_type: "number",
+                    }}
+                  />
+                )}
+              </>
+            )}
+            {type === "date" && (
+              <>
                 <FieldTypeInput
                   {...field}
-                  field={{ ...field.field, name: `${name}_to` }}
+                  field={{
+                    ...field.field,
+                    name:
+                      filter.modifiers[name] === "between"
+                        ? name
+                        : `${name}_from`,
+                  }}
                   prop={{
                     type: "input",
                     sub_type: "date",
-                    prefix: "",
-                    suffix: "",
                   }}
                 />
-              )}
-            </>
-          )}
-          {type === "boolean" && (
-            <FieldCheckbox arg={field.arg} field={field.field} fm={field.fm} />
-          )}
-          {type === "options" && (
-            <>
-              {singleOptions.includes(filter.modifiers[name]) && (
-                <SingleOption {...field} />
-              )}
-              {multiOptions.includes(filter.modifiers[name]) && (
-                <MultiOption {...field} />
-              )}
-            </>
-          )}
-        </>
-      )}
+                {filter.modifiers[name] === "between" && (
+                  <FieldTypeInput
+                    {...field}
+                    field={{ ...field.field, name: `${name}_to` }}
+                    prop={{
+                      type: "input",
+                      sub_type: "date",
+                    }}
+                  />
+                )}
+              </>
+            )}
+            {type === "boolean" && (
+              <FieldCheckbox
+                arg={field.arg}
+                field={field.field}
+                fm={field.fm}
+              />
+            )}
+            {type === "options" && (
+              <>
+                {singleOptions.includes(filter.modifiers[name]) && (
+                  <SingleOption {...field} />
+                )}
+                {multiOptions.includes(filter.modifiers[name]) && (
+                  <MultiOption {...field} />
+                )}
+              </>
+            )}
+          </>
+        );
+      }}
     </BaseField>
   );
 };
+
diff --git a/comps/filter/MasterFilter.tsx b/comps/filter/MasterFilter.tsx
index 915a264..34c56ba 100755
--- a/comps/filter/MasterFilter.tsx
+++ b/comps/filter/MasterFilter.tsx
@@ -5,6 +5,7 @@ import { GenField } from "../form/typings";
 import { default_filter_local, filter_window } from "./utils/types";
 import { FilterContent } from "./FilterContent";
 import { getPathname } from "lib/utils/pathname";
+import { getFilter } from "./utils/get-filter";
 
 type FilterMode = "regular" | "inline" | "popup";
 
@@ -34,18 +35,25 @@ export const MasterFilter: FC<FilterProps> = ({
 }): ReactNode => {
   const filter = useLocal({ ...default_filter_local });
   filter.name = name;
+  filter.mode = mode;
 
   if (!isEditor) {
-    if (!filter_window.prasi_filter) {
-      filter_window.prasi_filter = {};
-    }
-    const pf = filter_window.prasi_filter;
-    if (pf) {
-      const pathname = getPathname();
-      if (!pf[pathname]) pf[pathname] = {};
-      if (!pf[pathname][name]) pf[pathname][name] = {};
-      pf[pathname][name][_item.id] = filter;
+    const wf = getFilter(name);
+    if (wf) {
+      wf.filter.ref[_item.id] = filter;
+      wf.list.render();
     }
+
+    // if (!filter_window.prasi_filter) {
+    //   filter_window.prasi_filter = {};
+    // }
+    // const pf = filter_window.prasi_filter;
+    // if (pf) {
+    //   const pathname = getPathname();
+    //   if (!pf[pathname]) pf[pathname] = {};
+    //   if (!pf[pathname][name]) pf[pathname][name] = {};
+    //   pf[pathname][name][_item.id] = filter;
+    // }
   }
 
   if (mode === "popup") {
@@ -92,12 +100,15 @@ export const MasterFilter: FC<FilterProps> = ({
   }
 
   return (
-    <FilterContent
-      PassProp={PassProp}
-      _item={_item}
-      child={child}
-      mode={mode}
-      filter={filter}
-    />
+    <>
+      <FilterContent
+        PassProp={PassProp}
+        _item={_item}
+        child={child}
+        mode={mode}
+        filter={filter}
+      />
+    </>
   );
 };
+
diff --git a/comps/filter/gen/parse-filter.ts b/comps/filter/gen/parse-filter.ts
new file mode 100755
index 0000000..e69de29
diff --git a/comps/filter/utils/filter-modifier.ts b/comps/filter/utils/filter-modifier.ts
index 9f3a7fc..d684abb 100755
--- a/comps/filter/utils/filter-modifier.ts
+++ b/comps/filter/utils/filter-modifier.ts
@@ -5,7 +5,6 @@ export const filterModifier = (type: keyof typeof modifiers) => {
     return {
       label: v,
       value: k,
-      checked: true,
     };
   });
 };
diff --git a/comps/filter/utils/get-filter.ts b/comps/filter/utils/get-filter.ts
new file mode 100755
index 0000000..3c2e792
--- /dev/null
+++ b/comps/filter/utils/get-filter.ts
@@ -0,0 +1,31 @@
+import { getPathname } from "../../../..";
+import { filter_window } from "./types";
+
+export const getFilter = (name: string) => {
+  if (!filter_window.prasi_filter) {
+    filter_window.prasi_filter = {};
+  }
+  const pf = filter_window.prasi_filter;
+  if (pf) {
+    const pathname = getPathname();
+    if (!pf[pathname]) pf[pathname] = {};
+    if (!pf[pathname][name])
+      pf[pathname][name] = {
+        filter: {
+          ref: {},
+          render: () => {},
+        },
+        list: {
+          ref: {},
+          render: () => {},
+          reload() {
+            for (const [k, v] of Object.entries(this.ref)) {
+              v.reload();
+            }
+          },
+        },
+      };
+
+    return pf[pathname][name];
+  }
+};
diff --git a/comps/filter/utils/types.tsx b/comps/filter/utils/types.tsx
index 1b4649e..4daab8c 100755
--- a/comps/filter/utils/types.tsx
+++ b/comps/filter/utils/types.tsx
@@ -2,6 +2,7 @@ import { BaseFormLocal } from "../../form/base/types";
 import { GenField } from "../../form/typings";
 
 export type FilterFieldType =
+  | "search-all"
   | "text"
   | "number"
   | "boolean"
@@ -17,9 +18,17 @@ export const default_filter_local = {
   modifiers: {} as Record<string, string>,
   types: {} as Record<string, FilterFieldType>,
   name: "",
+  mode: "",
 };
 
 export const modifiers = {
+  "search-all": {
+    contains: "Contains",
+    starts_with: "Starts With",
+    ends_with: "Ends With",
+    equal: "Equal",
+    not_equal: "Not Equal",
+  },
   text: {
     contains: "Contains",
     starts_with: "Starts With",
@@ -55,8 +64,22 @@ export type FilterModifier = typeof modifiers;
 export type FilterLocal = typeof default_filter_local & { render: () => void };
 
 export const filter_window = window as unknown as {
-  prasi_filter: Record<string, Record<string, Record<string, FilterLocal>>>;
+  prasi_filter: Record<
+    string,
+    Record<
+      string,
+      {
+        filter: {ref: Record<string, FilterLocal>, render: () => void;};
+        list: {
+          ref: Record<string, { reload: () => void }>;
+          reload: () => void;
+          render: () => void;
+        };
+      }
+    >
+  >;
   prasiContext: {
     render: () => void;
   };
 };
+
diff --git a/comps/form/Form.tsx b/comps/form/Form.tsx
index a1642b0..4ecff47 100755
--- a/comps/form/Form.tsx
+++ b/comps/form/Form.tsx
@@ -7,7 +7,7 @@ import { editorFormData } from "./utils/ed-data";
 import { formInit } from "./utils/init";
 import { formReload } from "./utils/reload";
 import { getPathname } from "lib/utils/pathname";
-import { sofDeleteField } from "lib/utils/soft-del-rel";
+import { sofDeleteField as softDeleteField } from "lib/utils/soft-del-rel";
 
 const editorFormWidth = {} as Record<string, { w: number; f: any }>;
 
@@ -60,7 +60,7 @@ export const Form: FC<FMProps> = (props) => {
     // deteksi jika ada softdelete
     if(Array.isArray(props.feature)){
       if(props.feature?.find((e) => e === "soft_delete")){
-        const result = sofDeleteField(props.gen_table, sfd_field)
+        const result = softDeleteField(props.gen_table, sfd_field)
         if (result instanceof Promise) {
           result.then((e) => {
             // simpan fields yang berisi name dan type fields soft delete
diff --git a/comps/form/base/BaseField.tsx b/comps/form/base/BaseField.tsx
index 6729fd1..45fe345 100755
--- a/comps/form/base/BaseField.tsx
+++ b/comps/form/base/BaseField.tsx
@@ -52,11 +52,11 @@ export const BaseField = (prop: {
       )}
     >
       {mode !== "hidden" && <Label field={field} fm={fm} />}
-      <div className="field-inner c-flex c-flex-1 c-flex-col">
+      <div className="field-input c-flex c-flex-1 c-flex-col">
         <div
           className={cx(
             !["toogle", "button", "radio", "checkbox"].includes(arg.sub_type)
-              ? "field-outer c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm"
+              ? "field-outer c-overflow-hidden c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm"
               : "",
             fm.status === "loading"
               ? css`
diff --git a/comps/form/base/BaseForm.tsx b/comps/form/base/BaseForm.tsx
index d184cd3..50e724c 100755
--- a/comps/form/base/BaseForm.tsx
+++ b/comps/form/base/BaseForm.tsx
@@ -97,6 +97,12 @@ export const BaseForm = <T extends Record<string, any>>(
   useEffect(() => {
     form.data = data;
     form.render();
+
+    if (form.internal.width === 0) {
+      setTimeout(() => {
+        form.render();
+      }, 1000);
+    }
   }, [data]);
 
   if (form.status === "init") {
@@ -125,6 +131,7 @@ export const BaseForm = <T extends Record<string, any>>(
       );
     }
   }
+
   return (
     <form
       onSubmit={(e) => {
@@ -151,10 +158,11 @@ export const BaseForm = <T extends Record<string, any>>(
           }
         }}
       >
-        {form.internal.width && (
+        {form.internal.width > 0 && (
           <>{typeof children === "function" ? children(form) : children}</>
         )}
       </div>
     </form>
   );
 };
+
diff --git a/comps/form/field/Field.tsx b/comps/form/field/Field.tsx
index 2b7b8e0..974bbfb 100755
--- a/comps/form/field/Field.tsx
+++ b/comps/form/field/Field.tsx
@@ -52,6 +52,7 @@ export const Field: FC<FieldProp> = (arg) => {
         mode === "vertical" && "c-flex-col c-space-y-1"
       )}
       {...props}
+      ref={typeof arg.field_ref === 'function' ? arg.field_ref : undefined}
     >
       {mode !== "hidden" && showlabel === "y" && (
         <Label field={field} fm={fm} />
diff --git a/comps/form/field/FieldInput.tsx b/comps/form/field/FieldInput.tsx
index 2a31b34..67db835 100755
--- a/comps/form/field/FieldInput.tsx
+++ b/comps/form/field/FieldInput.tsx
@@ -104,7 +104,7 @@ export const FieldInput: FC<{
     <div
       className={cx(
         !["toogle", "button", "radio", "checkbox"].includes(arg.sub_type)
-          ? "field-outer c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm c-bg-white"
+          ? "field-outer c-overflow-hidden c-flex c-flex-1 c-flex-row c-rounded c-border c-text-sm c-bg-white"
           : "",
         fm.status === "loading"
           ? css`
@@ -160,8 +160,6 @@ export const FieldInput: FC<{
                         {
                           type: type_field as any,
                           sub_type: arg.sub_type,
-                          prefix,
-                          suffix,
                         } as PropTypeInput
                       }
                     />
@@ -195,3 +193,4 @@ export const FieldInput: FC<{
     </div>
   );
 };
+
diff --git a/comps/form/field/table-edit/TableEdit.tsx b/comps/form/field/table-edit/TableEdit.tsx
index f76d2ab..45aa33a 100755
--- a/comps/form/field/table-edit/TableEdit.tsx
+++ b/comps/form/field/table-edit/TableEdit.tsx
@@ -1,7 +1,6 @@
 import { TableList } from "lib/comps/list/TableList";
 import { useLocal } from "lib/utils/use-local";
-import { FC, ReactElement, useEffect, useRef } from "react";
-import { BaseForm } from "../../base/BaseForm";
+import { FC, useRef } from "react";
 import { FMLocal } from "../../typings";
 
 export const TableEdit: FC<{
@@ -18,6 +17,7 @@ export const TableEdit: FC<{
   const local = useLocal(
     {
       tbl: null as any,
+      rowHeight: new WeakMap<any, Record<string, HTMLDivElement>>(),
     },
     () => {}
   );
@@ -41,6 +41,7 @@ export const TableEdit: FC<{
             css`
               .rdg {
                 overflow-y: hidden !important;
+                height: var(--rdg-scroll-height) !important;
               }
               .rdg-cell > div {
                 flex-direction: row;
@@ -54,13 +55,13 @@ export const TableEdit: FC<{
               .field-error {
                 display: none;
               }
-              .rdg-cell {
-                min-height: 50px !important;
-              }
               .rdg-header-row {
                 border-top-right-radius: 5px;
                 border-top-left-radius: 5px;
               }
+              .table-list-inner {
+                position: relative !important;
+              }
             `,
             value.length === 0 &&
               (show_header === "n"
@@ -68,13 +69,8 @@ export const TableEdit: FC<{
                     display: none;
                   `
                 : css`
-                    height: 50px;
+                    min-height: 35px;
                   `),
-            value.length > 0 &&
-              css`
-                height: ${50 *
-                (show_header === "n" ? value.length : value.length + 1)}px;
-              `,
             show_header === "n" &&
               css`
                 .rdg-header-row {
@@ -85,7 +81,16 @@ export const TableEdit: FC<{
           ref={ref}
         >
           <TableList
-            row_height={50}
+            row_height={(row) => {
+              const rh = local.rowHeight.get(row);
+              console.log(rh);
+              if (rh) {
+                for (const div of Object.values(rh)) {
+                  if (div.offsetHeight > 50) return div.offsetHeight + 6;
+                }
+              }
+              return 50;
+            }}
             feature={[]}
             child={child}
             PassProp={PassProp}
@@ -125,6 +130,17 @@ export const TableEdit: FC<{
                   }}
                   rows={tbl.data}
                   fm={fm_row}
+                  field_ref={(ref: any) => {
+                    if (ref) {
+                      if (!local.rowHeight.has(props.row)) {
+                        local.rowHeight.set(props.row, {});
+                      }
+                      const rh = local.rowHeight.get(props.row);
+                      if (rh) {
+                        rh[props.column.key] = ref;
+                      }
+                    }
+                  }}
                   ext_fm={{
                     change: () => {},
                     remove: () => {
diff --git a/comps/form/field/type/TypeCheckbox.tsx b/comps/form/field/type/TypeCheckbox.tsx
index 09044c7..010890f 100755
--- a/comps/form/field/type/TypeCheckbox.tsx
+++ b/comps/form/field/type/TypeCheckbox.tsx
@@ -8,6 +8,7 @@ export const FieldCheckbox: FC<{
   fm: FMLocal;
   arg: FieldProp;
 }> = ({ field, fm, arg }) => {
+  // console.log({field, fm, arg})
   const local = useLocal({
     list: [] as any[],
   });
diff --git a/comps/form/field/type/TypeCustom.tsx b/comps/form/field/type/TypeCustom.tsx
index f6223cf..1e52662 100755
--- a/comps/form/field/type/TypeCustom.tsx
+++ b/comps/form/field/type/TypeCustom.tsx
@@ -1,7 +1,6 @@
+import { useLocal } from "@/utils/use-local";
 import { FC, isValidElement } from "react";
 import { FMLocal, FieldLocal } from "../../typings";
-import { useLocal } from "@/utils/use-local";
-import { FieldTypeInput } from "./TypeInput";
 
 export const TypeCustom: FC<{ field: FieldLocal; fm: FMLocal }> = ({
   field,
diff --git a/comps/form/field/type/TypeDropdown.tsx b/comps/form/field/type/TypeDropdown.tsx
index 47a2d1b..5c0efc3 100755
--- a/comps/form/field/type/TypeDropdown.tsx
+++ b/comps/form/field/type/TypeDropdown.tsx
@@ -117,7 +117,7 @@ export const TypeDropdown: FC<{
             selected: values,
           });
         }}
-        allowNew={false}
+        allowNew={true}
         autoPopupWidth={true}
         focusOpen={true}
         mode={"multi"}
diff --git a/comps/form/field/type/TypeInput.tsx b/comps/form/field/type/TypeInput.tsx
index f9c9a38..a6347be 100755
--- a/comps/form/field/type/TypeInput.tsx
+++ b/comps/form/field/type/TypeInput.tsx
@@ -1,14 +1,13 @@
 import { AutoHeightTextarea } from "@/comps/custom/AutoHeightTextarea";
 import { useLocal } from "@/utils/use-local";
 import parser from "any-date-parser";
-import { FC } from "react";
+import Datepicker from "lib/comps/custom/Datepicker";
+import { EyeIcon, EyeOff } from "lucide-react";
+import { FC, FocusEvent, MouseEvent } from "react";
 import { FMLocal, FieldLocal, FieldProp } from "../../typings";
 import { FieldMoney } from "./TypeMoney";
 import { FieldRichText } from "./TypeRichText";
 import { FieldUpload } from "./TypeUpload";
-import day from "dayjs";
-import { EyeIcon, EyeOff } from "lucide-react";
-import Datepicker from "lib/comps/custom/Datepicker";
 
 export type PropTypeInput = {
   type: "input";
@@ -25,9 +24,11 @@ export type PropTypeInput = {
     | "rich-text"
     | "upload"
     | "file"
+    | "search"
     | "password";
-  suffix: string;
-  prefix: string;
+  placeholder?: string;
+  onFocus?: (e: FocusEvent<HTMLDivElement>) => void;
+  onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
 };
 
 const parse = parser.exportAsFunctionAny("en-US");
@@ -91,9 +92,9 @@ export const FieldTypeInput: FC<{
     input.change_timeout = setTimeout(fm.render, 300);
   };
 
-  return (
-    <>
-      {type_field === "textarea" ? (
+  switch (type_field) {
+    case "textarea":
+      return (
         <AutoHeightTextarea
           onChange={(ev) => {
             fm.data[field.name] = ev.currentTarget.value;
@@ -113,128 +114,84 @@ export const FieldTypeInput: FC<{
             field.render();
           }}
         />
-      ) : type_field === "upload" ? (
-        <>
-          <FieldUpload field={field} fm={fm} prop={prop} />
-          {/* <input
-            type="file"
-            id="avatar"
-            name="avatar"
-            accept="image/png, image/jpeg"
-            onChange={async (event: any) => {
-              let file = null;
-              try {
-                file = event.target.files[0];
-              } catch (ex) {}
-              const formData = new FormData();
-              formData.append("file", file);
-              const response = await fetch(
-                "https://prasi.avolut.com/_proxy/https%3A%2F%2Feam.avolut.com%2F_upload",
-                {
-                  method: "POST",
-                  body: formData,
-                }
-              );
-
-              if (response.ok) {
-                const contentType: any = response.headers.get("content-type");
-                let result;
-                if (contentType.includes("application/json")) {
-                  result = await response.json();
-                } else if (contentType.includes("text/plain")) {
-                  result = await response.text();
-                } else {
-                  result = await response.blob();
-                }
-                if (Array.isArray(result)) {
-                  fm.data[field.name] = get(result, "[0]");
-                  fm.render();
-                } else {
-                  alert("Error upload");
-                }
-              } else {
-              }
-            }}
-          /> */}
-        </>
-      ) : type_field === "money" ? (
-        <>
-          <FieldMoney field={field} fm={fm} prop={prop} arg={arg} />
-        </>
-      ) : type_field === "rich-text" ? (
-        <>
-          <FieldRichText field={field} fm={fm} prop={prop} />
-        </>
-      ) : type_field === "date" ? (
-        <>
-          <Datepicker
-            value={{ startDate: value, endDate: value }}
-            displayFormat="DD MMM YYYY"
-            asSingle={true}
-            useRange={false}
-            onChange={(value) => {
-              fm.data[field.name] = value?.startDate
-                ? new Date(value?.startDate)
-                : null;
-              renderOnChange();
-            }}
-          />
-        </>
-      ) : (
-        <div className="c-flex c-relative c-flex-1">
-          <input
-            type={type_field}
-            tabIndex={0}
-            onChange={(ev) => {
-              if (["date", "datetime", "datetime-local"].includes(type_field)) {
-                let result = null;
-                try {
-                  result = new Date(ev.currentTarget.value);
-                } catch (ex) {}
-                fm.data[field.name] = result;
-              } else {
-                fm.data[field.name] = ev.currentTarget.value;
-              }
-              renderOnChange();
-            }}
-            placeholder={arg.placeholder || ""}
-            value={value}
-            disabled={field.disabled}
-            className="c-flex-1 c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
-            spellCheck={false}
-            onFocus={() => {
-              field.focused = true;
-              display = "";
-              field.render();
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" && fm.status === "ready") fm.submit();
-            }}
-            onBlur={() => {
-              field.focused = false;
-              field.render();
-            }}
-          />
-          {arg.sub_type === "password" && (
-            <div
-              className="c-absolute c-right-0 c-h-full c-flex c-items-center c-cursor-pointer"
-              onClick={() => {
-                input.show_pass = !input.show_pass;
-                input.render();
-              }}
-            >
-              <div className="">
-                {input.show_pass ? (
-                  <EyeIcon className="c-h-4" />
-                ) : (
-                  <EyeOff className="c-h-4" />
-                )}
-              </div>
-            </div>
-          )}
+      );
+    case "upload":
+      return <FieldUpload field={field} fm={fm} prop={prop} />;
+    case "money":
+      return <FieldMoney field={field} fm={fm} prop={prop} arg={arg} />;
+    case "rich-text":
+      return <FieldRichText field={field} fm={fm} prop={prop} />;
+    case "date":
+      return (
+        <Datepicker
+          value={{ startDate: value, endDate: value }}
+          displayFormat="DD MMM YYYY"
+          asSingle={true}
+          useRange={false}
+          onChange={(value) => {
+            fm.data[field.name] = value?.startDate
+              ? new Date(value?.startDate)
+              : null;
+            renderOnChange();
+          }}
+        />
+      );
+  }
+  return (
+    <div className="c-flex c-relative c-flex-1">
+      <input
+        type={type_field}
+        tabIndex={0}
+        onChange={(ev) => {
+          if (["date", "datetime", "datetime-local"].includes(type_field)) {
+            let result = null;
+            try {
+              result = new Date(ev.currentTarget.value);
+            } catch (ex) {}
+            fm.data[field.name] = result;
+          } else {
+            fm.data[field.name] = ev.currentTarget.value;
+          }
+          renderOnChange();
+        }}
+        placeholder={prop.placeholder || arg.placeholder || ""}
+        value={value}
+        disabled={field.disabled}
+        className="c-flex-1 c-transition-all c-bg-transparent c-outline-none c-px-2 c-text-sm c-w-full"
+        spellCheck={false}
+        onFocus={(e) => {
+          field.focused = true;
+          display = "";
+          field.render();
+          prop.onFocus?.(e);
+        }}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && fm.status === "ready") fm.submit();
+        }}
+        onBlur={(e) => {
+          field.focused = false;
+          field.render();
+          prop.onBlur?.(e);
+        }}
+      />
+      {arg.sub_type === "password" && (
+        <div
+          className="c-absolute c-right-0 c-h-full c-flex c-items-center c-cursor-pointer"
+          onClick={() => {
+            input.show_pass = !input.show_pass;
+            input.render();
+          }}
+        >
+          <div className="">
+            {input.show_pass ? (
+              <EyeIcon className="c-h-4" />
+            ) : (
+              <EyeOff className="c-h-4" />
+            )}
+          </div>
         </div>
       )}
-    </>
+    </div>
   );
 };
 const isTimeString = (time: any) => {
@@ -242,3 +199,4 @@ const isTimeString = (time: any) => {
   const timePattern = /^([01]\d|2[0-3]):([0-5]\d)(:[0-5]\d)?$/;
   return timePattern.test(time);
 };
+
diff --git a/comps/form/gen/fields.ts b/comps/form/gen/fields.ts
index 83ba6b6..8d374fb 100755
--- a/comps/form/gen/fields.ts
+++ b/comps/form/gen/fields.ts
@@ -8,6 +8,7 @@ import { get_value } from "./get-value";
 import { on_load_rel } from "./on_load_rel";
 import { set_value } from "./set-value";
 import { createId } from "@paralleldrive/cuid2";
+import get from "lodash.get";
 export type GFCol = {
   name: string;
   type: string;
@@ -166,17 +167,21 @@ export const newField = async (
         rel: fields,
       });
 
+      if (!result.on_load) {
+        result.on_load = `() => { return []; }`;
+      }
       let child: any = { childs: [] };
-      let rel__gen_fields: any = undefined;
-      let sub_type = "checkbox";
-      if (arg.relation?.fields?.length > 1) {
+      const relation = arg.relation?.fields.filter((e) => get(e, "name") !== opt.parent_table) || [];
+      let rel__gen_fields: any = JSON.stringify(
+        relation.map((e) => {
+          const v = (e as any).value;
+          return v;
+        })
+      );
+      let sub_type = "typeahead";
+
+      if (arg.relation?.fields?.length > 2) {
         sub_type = "table-edit";
-        rel__gen_fields = JSON.stringify(
-          arg.relation?.fields.map((e) => {
-            const v = (e as any).value;
-            return v;
-          })
-        );
         child = createItem({
           childs: await generateRelation(
             {
diff --git a/comps/form/gen/gen-field.ts b/comps/form/gen/gen-field.ts
new file mode 100755
index 0000000..6ee77eb
--- /dev/null
+++ b/comps/form/gen/gen-field.ts
@@ -0,0 +1,256 @@
+import { generateSelect } from "lib/comps/md/gen/md-select";
+import { parseGenField } from "lib/gen/utils";
+import { on_load_rel } from "./on_load_rel";
+import { gen_rel_many, getColumn } from "./gen-rel-many";
+import get from "lodash.get";
+
+export const generateField = async (
+  data: any,
+  item: PrasiItem,
+  commit: boolean
+) => {
+  let fieldType = getString(data.sub_type.value) as string;
+  let table = getString(data.rel__gen_table.value) as string;
+  const raw_fields = JSON.parse(data.rel__gen_fields.value) as (
+    | string
+    | { value: string; checked: string[] }
+  )[];
+  if (["checkbox", "button"].includes(fieldType)) {
+    const fields = parseGenField(raw_fields);
+    const res = generateSelect(fields);
+    const master = fields.find(
+      (e: any) => e.type === "has-one" && e.name !== table
+    ) as any;
+    const pk = fields.find((e: any) => get(e, "is_pk")) as any;
+    const pk_master = master.relation.fields.find((e: any) => get(e, "is_pk"));
+    console.log(getColumn(res));
+    const load = on_load_rel({
+      pk: generateSelect(parseGenField(master.value.checked)).pk,
+      table: master?.name,
+      select: generateSelect(parseGenField(master.value.checked)).select,
+      pks: {},
+      type: fieldType,
+    } as any);
+    const result = {
+      opt__on_load: load,
+      opt__get_value: `\
+        (arg: {
+          options: { label: string; value: string; item?: string }[];
+          fm: FMLocal;
+          name: string;
+          type: string;
+        }) => {
+          const { options, fm, name, type } = arg;
+          if (isEditor) {
+            return fm.data[name];
+          }
+          let result = null;
+          result = fm.data[name];
+          switch (type) {
+            case "single-option":
+              try {
+                const data = fm.data[name];
+                if (typeof data === "object") {
+                  if (typeof data?.connect?.id === "string") {
+                    result = data.connect.id;
+                  }else if (typeof data?.id === "string") {
+                    result = data.id;
+                  }
+                }
+              } catch (ex) { }
+              break;
+            case "multi-option":
+              const selected = [];
+              const data = fm.data[name];
+              if (Array.isArray(data) && data.length) {
+                data.map((e) => {
+                  try {
+                    if (typeof e === "object") {
+                      if (typeof e["${master.name}"].connect?.${pk_master.name} === "string") {
+                        selected.push(e["${master.name}"].connect.${pk_master.name});
+                      } else if (typeof e["${master.name}"]?.${pk_master.name} === "string") {
+                        selected.push(e["${master.name}"].${pk_master.name});
+                      }
+                    }
+                  } catch (ex) { }
+                })
+              }
+              return selected;
+              break;
+          }
+          return result;
+        }
+        `,
+      opt__set_value: `\
+        (arg: {
+          selected: any[];
+          options: { label: string; value: string; item?: string }[];
+          fm: FMLocal;
+          name: string;
+          type: string;
+        }) => {
+          const { selected, options, fm, name, type } = arg;
+          switch (type) {
+            case "single-option":
+              fm.data[name] = {
+                connect: {
+                  id: selected[0],
+                },
+              };
+              break;
+            case "multi-option":
+              let parent = {} as any;
+              const fields = parseGenField(fm.props.gen_fields);
+              const res = generateSelect(fields);
+              try {
+                parent = {
+                  [fm.props.gen_table]: {
+                    connect: {
+                      [res.pk]: fm.data.id || null,
+                    },
+                  },
+                };
+              } catch (e) {}
+              fm.data[name] = selected.map((e) => {
+                return {
+                  ${master.name}: {
+                    connect: {
+                      id: e,
+                    },
+                  },
+                  ...parent,
+                };
+              });
+              break;
+            default:
+              fm.data[name] = selected.map((e) => e);
+          }
+          fm.render();
+        }
+        `,
+      opt__label: `\
+        (row: { value: string; label: string; data?: any }) => {
+          const cols = ${JSON.stringify(
+            getColumn(generateSelect(parseGenField(master.value.checked)))
+          )};
+          
+          if (isEditor) {
+            return row.label;
+          }
+          const result = [];
+          if (!!row.data && !row.label && !Array.isArray(row.data)) {
+            if(cols.length > 0){
+              cols.map((e) => {
+                if (row.data[e]) {
+                  result.push(row.data[e]);
+                }
+              });
+              return result.join(" - ");
+            } else {
+              const fields = parseGenField(rel__gen_fields);
+              return fields
+                .filter((e) => !e.is_pk)
+                .map((e) => row.data[e.name])
+                .filter((e) => e)
+                .join(" - ");
+            }
+          }
+          return row.label;
+        }
+        `,
+    } as any;
+    Object.keys(result).map((e) => {
+      item.edit.setProp(e, {
+        mode: "raw",
+        value: result[e],
+      });
+    });
+    await item.edit.commit();
+    // console.log("halo", {fieldType, table, fields, res, load});
+    // console.log({
+    //     table_parent: table,
+    //     arg: fields.find(
+    //       (e: any) => e.type === "has-one"  && e.name !== table
+    //     ),
+    //     rel: fields.filter(
+    //       (e: any) => e.type !== "has-many"
+    //     ),
+    //   })
+    // const result = gen_rel_many({
+    //   table_parent: table,
+    //   arg: fields.find(
+    //     (e: any) => e.type === "has-one"  && e.name !== table
+    //   ),
+    //   rel: fields.filter(
+    //     (e: any) => e.type !== "has-many"
+    //   ),
+    // });
+  } else if (["table-edit"].includes(fieldType)) {
+    const result = {
+      opt__on_load: "() => { return []; }",
+      opt__get_value: `\
+        (arg: {
+            options: { label: string; value: string; item?: string }[];
+            fm: FMLocal;
+            name: string;
+            type: string;
+          }) => {
+            const { options, fm, name, type } = arg;
+            if (isEditor) {
+              return fm.data[name];
+            }
+            let result = null;
+            result = fm.data[name];
+            switch (type) {
+              case "single-option":
+                try {
+                  const data = fm.data[name];
+                  if (typeof data === "object") {
+                    if (typeof data?.connect?.id === "string") {
+                      result = data.connect.id;
+                    }else if (typeof data?.id === "string") {
+                      result = data.id;
+                    }
+                  }
+                } catch (ex) { }
+                break;
+            }
+            return result;
+        }
+          `,
+      opt__set_value: `\
+        (arg: {
+            selected: any[];
+            options: { label: string; value: string; item?: string }[];
+            fm: FMLocal;
+            name: string;
+            type: string;
+          }) => {
+            
+            fm.render();
+        }
+        `,
+      opt__label: `\
+        (row: { value: string; label: string; item?: any }) => {
+            return row.label;
+        }
+        `,
+    } as any;
+    Object.keys(result).map((e) => {
+      item.edit.setProp(e, {
+        mode: "raw",
+        value: result[e],
+      });
+    });
+    await item.edit.commit();
+  }
+};
+export const getString = (data: string) => {
+  let result = null;
+  try {
+    result = eval(data);
+  } catch (e) {
+    result = data;
+  }
+  return result;
+};
diff --git a/comps/form/gen/gen-rel-many.ts b/comps/form/gen/gen-rel-many.ts
index ae56542..4b9b309 100755
--- a/comps/form/gen/gen-rel-many.ts
+++ b/comps/form/gen/gen-rel-many.ts
@@ -116,12 +116,7 @@ export const gen_rel_many = (prop: {
       fm.render();
     }
     `;
-    const cols = [];
-    for (const [k, v] of Object.entries(select.select) as any) {
-      if (k !== select.pk && typeof v !== "object") {
-        cols.push(k);
-      }
-    }
+    const cols = getColumn(select) || [];
     const get_label = `\
     (row: { value: string; label: string; data?: any }) => {
       const cols = ${JSON.stringify(cols)};
@@ -161,7 +156,6 @@ export const gen_rel_many = (prop: {
   }
   `;
 
-  
     result.get_value = `\
   (arg: {
     options: { label: string; value: string; item?: string }[];
@@ -207,3 +201,13 @@ export const gen_rel_many = (prop: {
   }
   return result;
 };
+export const getColumn = (data: any) => {
+  const cols = [];
+
+  for (const [k, v] of Object.entries(data.select) as any) {
+    if (k !== data.pk && typeof v !== "object") {
+      cols.push(k);
+    }
+  }
+  return cols;
+};
diff --git a/comps/form/gen/gen-rel.ts b/comps/form/gen/gen-rel.ts
index ff103aa..8329c42 100755
--- a/comps/form/gen/gen-rel.ts
+++ b/comps/form/gen/gen-rel.ts
@@ -38,7 +38,6 @@ export const generateRelation = async (
       return result;
     }
   } else {
-    console.log(item.edit.props);
   }
 };
 
diff --git a/comps/form/gen/on_load_rel.ts b/comps/form/gen/on_load_rel.ts
index f793bc1..ada5ad6 100755
--- a/comps/form/gen/on_load_rel.ts
+++ b/comps/form/gen/on_load_rel.ts
@@ -1,13 +1,17 @@
+import { isEmptyString } from "lib/utils/is-empty-string";
+
 export const on_load_rel = ({
   pk,
   table,
   select,
   pks,
+  type
 }: {
   pk: string;
   table: string;
   select: any;
   pks: Record<string, string>;
+  type?: string;
 }) => {
   const sample = {
     label: "sample",
@@ -34,15 +38,15 @@ export const on_load_rel = ({
     if (arg.mode === 'count') {
       return await db.${table}.count();
     }
-
-    const fields = parseGenField(rel__gen_fields);
-    const res = generateSelect(fields);
+    ${!isEmptyString(type) && ["checkbox", "typeahead", "button"].includes(type as any) ? `` : `const fields = parseGenField(rel__gen_fields);
+    const res = generateSelect(fields);`}
+    
 
     const items = await db.${table}.findMany({
-      select: {
+      ${!isEmptyString(type) && ["checkbox", "typeahead", "button"].includes(type as any) ? `` : `select: {
         ...${JSON.stringify(select)}, 
         ...(res?.select || {}) 
-      },
+      },`}
       orderBy: arg.orderBy || {
         ${pk}: "desc"
       },
diff --git a/comps/form/typings.ts b/comps/form/typings.ts
index 374edac..c5bd04a 100755
--- a/comps/form/typings.ts
+++ b/comps/form/typings.ts
@@ -1,5 +1,5 @@
 import { GFCol } from "@/gen/utils";
-import { ReactNode } from "react";
+import { MutableRefObject, ReactNode } from "react";
 import { editorFormData } from "./utils/ed-data";
 
 export type FMProps = {
@@ -49,6 +49,7 @@ export type FieldProp = {
   fm: FMLocal;
   type: FieldType | (() => FieldType);
   required: ("y" | "n") | (() => "y" | "n");
+  field_ref?: (ref: any) => void;
   required_msg: (name: string) => string;
   on_change: (arg: { value: any }) => void | Promise<void>;
   PassProp: any;
@@ -72,7 +73,7 @@ export type FieldProp = {
     name: string;
     type: string;
   }) => any;
-  tbl_show_header?: "y" | "n"
+  tbl_show_header?: "y" | "n";
   opt_set_value: (arg: {
     selected: string[];
     options: { label: string; value: string; item?: string }[];
@@ -157,7 +158,11 @@ export type FieldInternal<T extends FieldProp["type"]> = {
   options: {
     on_load?: () => Promise<{ value: string; label: string }[]>;
   };
-  on_change?: (arg: { value: any, name: string, fm: FMLocal }) => void | Promise<void>;
+  on_change?: (arg: {
+    value: any;
+    name: string;
+    fm: FMLocal;
+  }) => void | Promise<void>;
   prop?: any;
 };
 export type FieldLocal = FieldInternal<any> & {
@@ -249,3 +254,4 @@ export const FieldTypeCustom = `type CustomField =
   { field: "text", type: "text" | "password" | "number" | "date" | "datetime" }
 | { field: "relation", type: "has-many" | "has-one" }
 `;
+
diff --git a/comps/form/utils/use-field.tsx b/comps/form/utils/use-field.tsx
index 5c29c0b..2733244 100755
--- a/comps/form/utils/use-field.tsx
+++ b/comps/form/utils/use-field.tsx
@@ -1,5 +1,5 @@
 import { useLocal } from "@/utils/use-local";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { FieldInternal, FieldProp } from "../typings";
 
 export const useField = (
@@ -14,8 +14,11 @@ export const useField = (
       return <arg.PassProp>{arg.child}</arg.PassProp>;
     },
     input: {},
+    ref: null as any,
   } as any);
-
+  const ref = useRef(null as any)
+  field.ref = ref;
+  
   const name = typeof arg.name === "string" ? arg.name : arg.name();
   const label = typeof arg.label === "string" ? arg.label : arg.label();
   const required =
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index 26c5be0..a291f69 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -10,6 +10,7 @@ import {
   MouseEvent,
   ReactElement,
   ReactNode,
+  useCallback,
   useEffect,
 } from "react";
 import DataGrid, {
@@ -25,6 +26,8 @@ import { filterWhere } from "../filter/utils/filter-where";
 import { Skeleton } from "../ui/skeleton";
 import "./TableList.css";
 import { sortTree } from "./utils/sort-tree";
+import { getFilter } from "../filter/utils/get-filter";
+import { callback } from "chart.js/dist/helpers/helpers.core";
 
 type OnRowClick = (arg: {
   row: any;
@@ -55,7 +58,7 @@ type TableListProp = {
   feature?: Array<any>;
   filter_name: string;
   render_row?: (child: any, data: any) => ReactNode;
-  row_height?: number;
+  row_height?: number | ((row: any) => number);
   render_col?: (arg: {
     props: RenderCellProps<any, unknown>;
     tbl: any;
@@ -76,6 +79,7 @@ const selectCellClassname = css`
     margin: 0;
   }
 `;
+
 export const TableList: FC<TableListProp> = ({
   name,
   on_load,
@@ -90,7 +94,6 @@ export const TableList: FC<TableListProp> = ({
   id_parent,
   feature,
   filter_name,
-  render_row,
   row_height: rowHeight,
   render_col,
   show_header,
@@ -200,6 +203,52 @@ export const TableList: FC<TableListProp> = ({
     },
   });
 
+  const reload = useCallback(() => {
+    if (typeof on_load === "function") {
+      local.status = "loading";
+      local.render();
+
+      const orderBy = local.sort.orderBy || undefined;
+      const load_args: any = {
+        async reload() {},
+        where,
+        orderBy,
+        paging: {
+          take: local.paging.take > 0 ? local.paging.take : undefined,
+          skip: local.paging.skip,
+        },
+      };
+      if (id_parent) {
+        load_args.paging = {};
+      }
+      const result = on_load({ ...load_args, mode: "query" });
+      const callback = (data: any[]) => {
+        if (local.paging.skip === 0) {
+          local.data = data;
+        } else {
+          local.data = [...local.data, ...data];
+        }
+        local.status = "ready";
+        local.render();
+      };
+      if (result instanceof Promise) result.then(callback);
+      else callback(result);
+    }
+  }, [
+    on_load,
+    local.sort.orderBy,
+    where,
+    local.paging.take,
+    local.paging.skip,
+  ]);
+
+  if (filter_name) {
+    const f = getFilter(filter_name);
+    if (f) {
+      f.list.ref[_item.id] = { reload };
+    }
+  }
+
   // code ini digunakan untuk mengambil nama dari pk yang akan digunakan sebagai key untuk id
   const pk = local.pk?.name || "id";
   useEffect(() => {
@@ -210,34 +259,7 @@ export const TableList: FC<TableListProp> = ({
     (async () => {
       on_init(local);
       if (local.status === "reload" && typeof on_load === "function") {
-        local.status = "loading";
-        local.render();
-
-        const orderBy = local.sort.orderBy || undefined;
-        const load_args: any = {
-          async reload() {},
-          where,
-          orderBy,
-          paging: {
-            take: local.paging.take > 0 ? local.paging.take : undefined,
-            skip: local.paging.skip,
-          },
-        };
-        if (id_parent) {
-          load_args.paging = {};
-        }
-        const result = on_load({ ...load_args, mode: "query" });
-        const callback = (data: any[]) => {
-          if (local.paging.skip === 0) {
-            local.data = data;
-          } else {
-            local.data = [...local.data, ...data];
-          }
-          local.status = "ready";
-          local.render();
-        };
-        if (result instanceof Promise) result.then(callback);
-        else callback(result);
+        reload();
       }
     })();
   }, [local.status, on_load, local.sort.orderBy]);
@@ -258,7 +280,7 @@ export const TableList: FC<TableListProp> = ({
       sub_name = "tbl-col";
       break;
     case "list":
-      sub_name = "md-list";
+      sub_name = "list-row";
       break;
   }
 
@@ -646,7 +668,7 @@ export const TableList: FC<TableListProp> = ({
                 {data.map((e, idx) => {
                   return (
                     <div
-                      className="flex-grow hover:c-bg-[#e2f1ff]"
+                      className="flex-grow"
                       onClick={(ev) => {
                         if (!isEditor && typeof row_click === "function") {
                           row_click({
diff --git a/comps/md/MasterDetail.tsx b/comps/md/MasterDetail.tsx
index f180663..ef99b7e 100755
--- a/comps/md/MasterDetail.tsx
+++ b/comps/md/MasterDetail.tsx
@@ -12,6 +12,12 @@ import {
 import { MDLocalInternal, MDProps } from "./utils/typings";
 import { mdRenderLoop } from "./utils/md-render-loop";
 import { parseGenField } from "lib/gen/utils";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
+import get from "lodash.get";
+const w = window as unknown as {
+  generating_prasi_md: Record<string, true>;
+};
 
 export const MasterDetail: FC<MDProps> = (arg) => {
   const {
@@ -95,6 +101,14 @@ export const MasterDetail: FC<MDProps> = (arg) => {
       }
     }
   }
+
+  if (get(w, "generating_prasi_md.master_detail"))
+    return (
+      <div className="c-relative c-p-4 c-w-full c-bg-white c-rounded-lg c-overflow-hidden c-h-full c-shadow c-flex c-justify-center c-items-center">
+        <Loader2 className="c-h-4 c-w-4 c-animate-spin" />
+        Loading Master Detail...
+      </div>
+    );
   return (
     <div
       className={cx(
diff --git a/comps/md/gen/md-gen.ts b/comps/md/gen/md-gen.ts
index 8575fac..a9507eb 100755
--- a/comps/md/gen/md-gen.ts
+++ b/comps/md/gen/md-gen.ts
@@ -7,33 +7,20 @@ const w = window as unknown as {
   generating_prasi_md: Record<string, true>;
 };
 
-export const generateMasterDetail: GenFn<{ item: PrasiItem, table: string, fields: any }> = async (
-  modify,
-  data,
-  arg
-) => {
-  const {item} = arg;
-  // loading generate MD
-  w.generating_prasi_md = {
-    master_detail: true,  
-  };
-
+export const generateMasterDetail: GenFn<{
+  item: PrasiItem;
+  table: string;
+  fields: any;
+}> = async (modify, data, arg) => {
+  const { item } = arg;
+  // w.generating_prasi_md = {
+  //   master_detail: true,
+  // };
+  // const result: any = {};
+  // modify(result);
   await generateList(arg, data, false);
-  await generateMDForm(arg, data, false)
-  // const childs = item.edit.childs[0].edit.childs;
-
-  // const master = childs.find(
-  //   (e) => e.component?.id === "c68415ca-dac5-44fe-aeb6-936caf8cc491"
-  // );
-
-  // if (master) {
-  //   master.edit.setProp("on_init", {
-  //     mode: "raw",
-  //     value: `async (text: string) => {
-  //     }`,
-  //   });
-
-  //  
-  // }
+  await generateMDForm(arg, data, false);
   await item.edit.commit();
+  // delete w.generating_prasi_md["master_detail"];
+  // modify({});
 };
diff --git a/comps/md/gen/mode-table-list.ts b/comps/md/gen/mode-table-list.ts
index 9941726..f434a00 100755
--- a/comps/md/gen/mode-table-list.ts
+++ b/comps/md/gen/mode-table-list.ts
@@ -5,7 +5,7 @@ export const modeTableList = (mode: string) => {
       sub_name = "tbl-col";
       break;
     case "list":
-      sub_name = "md-list";
+      sub_name = "list-row";
       break;
   }
   return sub_name;
diff --git a/comps/md/gen/tbl-list/on_load.ts b/comps/md/gen/tbl-list/on_load.ts
index c663d78..7d1bab2 100755
--- a/comps/md/gen/tbl-list/on_load.ts
+++ b/comps/md/gen/tbl-list/on_load.ts
@@ -23,8 +23,8 @@ export const on_load = ({
         });
       const field = fields.find((e) => e.name === k);
       sample[k] = val;
-      if(field){
-        if(field.type === "has-many"){
+      if (field) {
+        if (field.type === "has-many") {
           sample[k] = [val];
         }
       }
@@ -74,7 +74,7 @@ export const on_load = ({
     orderBy?: Record<string, "asc" | "desc">;
     paging: { take: number; skip: number };
     mode: 'count' | 'query';
-    where?: any
+    where?: Record<string, any>;
   }
   `;
 };
diff --git a/comps/md/parts/MDMaster.tsx b/comps/md/parts/MDMaster.tsx
index e35ffcc..2351096 100755
--- a/comps/md/parts/MDMaster.tsx
+++ b/comps/md/parts/MDMaster.tsx
@@ -16,7 +16,6 @@ export const MDRenderMaster: FC<{
     let md = on_init();
     md.header.breadcrumb = breadcrumb();
     md.header.render();
-
     if (md) {
       let width = 0;
       let min_width = 0;
diff --git a/exports.tsx b/exports.tsx
index 9b95d44..e750311 100755
--- a/exports.tsx
+++ b/exports.tsx
@@ -75,7 +75,7 @@ export { password } from "@/utils/password";
 export { generateTableList } from "@/comps/md/gen/gen-table-list";
 export { generateForm } from "@/comps/form/gen/gen-form";
 export { generateSelect } from "@/comps/md/gen/md-select";
-
+export {generateField} from "@/comps/form/gen/gen-field";
 /** Session */
 export {
   registerSession,
diff --git a/gen/gen_table_list/gen_table_list.tsx b/gen/gen_table_list/gen_table_list.tsx
index 1039847..927115d 100755
--- a/gen/gen_table_list/gen_table_list.tsx
+++ b/gen/gen_table_list/gen_table_list.tsx
@@ -59,7 +59,7 @@ export const gen_table_list = async (
           sub_name = "tbl-col";
           break;
         case "list":
-          sub_name = "md-list";
+          sub_name = "list-row";
           break;
       }
 
diff --git a/gen/gen_table_list/on_load.ts b/gen/gen_table_list/on_load.ts
index 76ace3b..2fddcab 100755
--- a/gen/gen_table_list/on_load.ts
+++ b/gen/gen_table_list/on_load.ts
@@ -51,7 +51,7 @@ type TableOnLoad = {
   orderBy?: Record<string, "asc" | "desc">;
   paging: { take: number; skip: number };
   mode: 'count' | 'query';
-  where?: any
+  where?: Record<string, any>;
 }
 `;
 };
diff --git a/preset/menu/Layout.tsx b/preset/menu/Layout.tsx
index 6b942ca..2676cd5 100755
--- a/preset/menu/Layout.tsx
+++ b/preset/menu/Layout.tsx
@@ -75,7 +75,7 @@ export const Layout: FC<LYTChild> = (props) => {
     }
   }
 
-  if (!w.user) return props.blank_layout;
+  if (!w.user && !isEditor) return props.blank_layout;
 
   return <>{props.default_layout}</>;
 };
diff --git a/preset/menu/Menu.tsx b/preset/menu/Menu.tsx
index 9a804a8..a57a58e 100755
--- a/preset/menu/Menu.tsx
+++ b/preset/menu/Menu.tsx
@@ -16,12 +16,11 @@ export const Menu: FC<MenuProp> = (props) => {
     cache: false,
     active: null as any,
     mode: "full" as "full" | "mini",
-    
   });
-  useEffect(( )=>{
+  useEffect(() => {
     local.mode = props.mode;
     local.render();
-  }, [props.mode])
+  }, [props.mode]);
   if (!local.open.length && !local.cache) {
     const result = findChildMenu(menu, (e: any) => e[2] === pathname);
     if (Array.isArray(result)) {
@@ -31,9 +30,6 @@ export const Menu: FC<MenuProp> = (props) => {
       local.render();
     }
   }
-
-  const styles = props.style;
-  const PassProp = props.PassProp;
   return (
     <div
       className={cx(
@@ -41,16 +37,13 @@ export const Menu: FC<MenuProp> = (props) => {
         "c-h-full c-w-full c-flex c-flex-col c-flex-grow c-px-3 c-py-4 c-overflow-y-auto  c-rounded "
       )}
     >
-      <div className="c-px-2 c-py-2" onClick={async () => {
-        const item = props.item;
-        // item.edit.setProp("mode", props.mode === "mini" ? "full": "mini");
-        // await item.edit.commit();
-        local.mode = local.mode === "mini" ? "full": "mini";
-        local.render();
-      }}>
-        {/* {icon.hamburger} */}
-      </div>
-      <SideBar data={menu} local={local} pm={props} depth={0} mode={local.mode}/>
+      <SideBar
+        data={menu}
+        local={local}
+        pm={props}
+        depth={0}
+        mode={local.mode}
+      />
     </div>
   );
 };