diff --git a/comps/filter/FilterField.tsx b/comps/filter/FilterField.tsx
index d39e144..5e36308 100755
--- a/comps/filter/FilterField.tsx
+++ b/comps/filter/FilterField.tsx
@@ -4,7 +4,7 @@ import { FilterFieldType, FilterLocal, filter_window } from "./utils/types";
 import { FieldTypeText } from "../form/field/type/TypeText";
 import { FieldModifier } from "./FieldModifier";
 import { useLocal } from "lib/utils/use-local";
-import { FieldToggle } from "../form/field/type/TypeToggle";
+import { FieldCheckbox } from "../form/field/type/TypeCheckbox";
 
 export const FilterField: FC<{
   filter: FilterLocal;
@@ -42,6 +42,7 @@ export const FilterField: FC<{
             type={type}
           />
         ),
+        opt_get_value: () => { }
       })}
     >
       {(field) => (
@@ -79,7 +80,7 @@ export const FilterField: FC<{
                   suffix: "",
                 }}
               />
-              {filter.modifiers[name] === 'Between' && (
+              {filter.modifiers[name] === 'between' && (
                 <FieldTypeText
                   {...field}
                   prop={{
@@ -93,10 +94,10 @@ export const FilterField: FC<{
             </>
           )}
           {type === "boolean" && (
-            <FieldToggle {...field} />
+            <FieldCheckbox arg={field.arg} field={field.field} fm={field.fm} />
           )}
         </>
       )}
-    </BaseField>
+    </BaseField >
   );
 };
diff --git a/comps/filter/utils/filter-where.ts b/comps/filter/utils/filter-where.ts
index 3feb726..b07d72b 100755
--- a/comps/filter/utils/filter-where.ts
+++ b/comps/filter/utils/filter-where.ts
@@ -5,7 +5,6 @@ export const filterWhere = (filter_name: string) => {
   const pf = filter_window.prasi_filter?.[getPathname()]?.[filter_name];
   const where: any = {};
   const AND: any[] = [];
-
   if (pf) {
     for (const [k, filter] of Object.entries(pf)) {
       for (const [name, value] of Object.entries(filter.data)) {
@@ -82,6 +81,19 @@ export const filterWhere = (filter_name: string) => {
               }
             }
             break;
+          case "options":
+            {
+              if (modifier === "equal") {
+                AND.push({ [name]: { value } });
+              } else if (modifier === "not_equal") {
+                AND.push({ [name]: { NOT: value } });
+              } else if (modifier === "includes") {
+                AND.push({ [name]: { hasEvery: value } });
+              } else if (modifier === "excludes") {
+                AND.push({ [name]: { notIn: value } });
+              }
+            }
+            break;
         }
       }
     }
diff --git a/comps/filter/utils/types.tsx b/comps/filter/utils/types.tsx
index a5d7cd3..9ad873d 100755
--- a/comps/filter/utils/types.tsx
+++ b/comps/filter/utils/types.tsx
@@ -1,7 +1,7 @@
 import { BaseFormLocal } from "../../form/base/types";
 import { GenField } from "../../form/typings";
 
-export type FilterFieldType = "text" | "number" | "boolean" | "date";
+export type FilterFieldType = "text" | "number" | "boolean" | "date" | "options";
 export const default_filter_local = {
   data: {} as any,
   columns: [] as string[],
@@ -29,8 +29,14 @@ export const modifiers = {
   date: {
     between: "Between",
     greater_than: "Greater Than",
-    less_than: "Less Than"
+    less_than: "Less Than",
   },
+  options: {
+    equal: "Equal",
+    not_equal: "Not Equal",
+    includes: "Includes",
+    excludes: "Excludes"
+  }
 };
 export type FilterModifier = typeof modifiers;
 
diff --git a/comps/form/base/types.ts b/comps/form/base/types.ts
index a497059..d4f1dc1 100755
--- a/comps/form/base/types.ts
+++ b/comps/form/base/types.ts
@@ -12,6 +12,7 @@ type CreateFieldArg = {
   prefix?: ReactNode | (() => ReactNode);
   onChange?: (value: any) => void;
   render?: () => void;
+  opt_get_value?: (value: any) => any
 };
 
 export type BaseFormLocal<T> = Omit<typeof default_base_form_local, "data"> & {
diff --git a/comps/form/field/type/TypeCheckbox.tsx b/comps/form/field/type/TypeCheckbox.tsx
index 0530c2d..bb01f76 100755
--- a/comps/form/field/type/TypeCheckbox.tsx
+++ b/comps/form/field/type/TypeCheckbox.tsx
@@ -21,6 +21,8 @@ export const FieldCheckbox: FC<{
     else callback(res);
   }, []);
 
+  console.log('arg', arg);
+
   let value = arg.opt_get_value({
     fm,
     name: field.name,
@@ -36,15 +38,15 @@ export const FieldCheckbox: FC<{
             let isChecked = false;
             try {
               isChecked = value.some((e: any) => e === item[arg.pk]);
-            } catch (ex) {}
+            } catch (ex) { }
 
             return (
               <div
                 onClick={() => {
                   let selected = Array.isArray(value)
                     ? value.map((row) => {
-                        return local.list.find((e) => e.value === row);
-                      })
+                      return local.list.find((e) => e.value === row);
+                    })
                     : [];
                   if (isChecked) {
                     selected = selected.filter(
diff --git a/comps/form/field/type/TypeDropdown.tsx b/comps/form/field/type/TypeDropdown.tsx
index d07b4c7..29783b6 100755
--- a/comps/form/field/type/TypeDropdown.tsx
+++ b/comps/form/field/type/TypeDropdown.tsx
@@ -19,15 +19,14 @@ export const TypeDropdown: FC<{
     options: local.options,
     type: field.type,
   });
-  console.log({ value });
   useEffect(() => {
     if (typeof arg.on_load === "function") {
-      const options = arg.on_load({ mode: "query" });
-      console.log("Masuk");
-      // console.log(options)
+      console.log("masuk")
+      const options = arg.on_load();
+      console.log({options})
       if (options instanceof Promise) {
         options.then((res) => {
-          console.log({ res });
+          console.log({res})
           local.options = res;
           local.loaded = true;
           local.render();
@@ -70,28 +69,30 @@ export const TypeDropdown: FC<{
     );
 
   return (
-    <Typeahead
-      value={value}
-      onSelect={({ search, item }) => {
-        return item?.value || search;
-      }}
-      onChange={(values) => {
-        arg.opt_set_value({
-          fm,
-          name: field.name,
-          type: field.type,
-          options: local.options,
-          selected: values,
-        });
-      }}
-      allowNew={false}
-      autoPopupWidth={true}
-      focusOpen={true}
-      mode={"multi"}
-      placeholder={arg.placeholder}
-      options={() => {
-        return local.options;
-      }}
-    />
+    <>
+      <Typeahead
+        value={value}
+        onSelect={({ search, item }) => {
+          return item?.value || search;
+        }}
+        onChange={(values) => {
+          arg.opt_set_value({
+            fm,
+            name: field.name,
+            type: field.type,
+            options: local.options,
+            selected: values,
+          });
+        }}
+        allowNew={false}
+        autoPopupWidth={true}
+        focusOpen={true}
+        mode={"multi"}
+        placeholder={arg.placeholder}
+        options={() => {
+          return local.options;
+        }}
+      />
+    </>
   );
 };
diff --git a/comps/form/gen/fields.ts b/comps/form/gen/fields.ts
index 5eca809..f418a19 100755
--- a/comps/form/gen/fields.ts
+++ b/comps/form/gen/fields.ts
@@ -4,6 +4,7 @@ import { createItem, parseGenField } from "lib/gen/utils";
 import capitalize from "lodash.capitalize";
 import { ArrowBigDown } from "lucide-react";
 import { on_load_rel } from "./on_load_rel";
+import { createId } from "@paralleldrive/cuid2";
 export type GFCol = {
   name: string;
   type: string;
@@ -68,9 +69,7 @@ export const newField = (
       },
     });
   } else if (["has-many", "has-one"].includes(arg.type) && arg.relation) {
-    if (["has-one"].includes(arg.type)) {
-      console.log(opt.value);
-      const fields = parseGenField(opt.value);
+    const fields = parseGenField(opt.value);
       const res = generateSelect(fields);
       const load = on_load_rel({
         pk: res.pk,
@@ -78,6 +77,7 @@ export const newField = (
         select: res.select,
         pks: {},
       });
+    if (["has-one"].includes(arg.type)) {
       return createItem({
         component: {
           id: "32550d01-42a3-4b15-a04a-2c2d5c3c8e67",
@@ -87,63 +87,48 @@ export const newField = (
             type: "single-option",
             sub_type: "dropdown",
             rel__gen_table: arg.name,
-            // rel__gen_fields: [`[${opt.value.join(",")}]`],
-            opt__on_load: [
-              `\
-            ${load}
-            `,
-            ],
+            opt__on_load: [load],
             child: {
               childs: [],
             },
           },
         },
       });
-      // return {
-      //     name: "item",
-      //     type: "item",
-      //     component: {
-      //       id: "32550d01-42a3-4b15-a04a-2c2d5c3c8e67",
-      //       props: {
-      //         name: {
-      //             mode: "string",
-      //             value: arg.name
-      //         },
-      //         label: {
-      //             mode: "string",
-      //             value: formatName(arg.name)
-      //         },
-      //         type: {
-      //             mode: "string",
-      //             value: "single-option"
-      //         },
-      //         sub_type:  {
-      //             mode: "string",
-      //             value: "dropdown"
-      //         },
-      //         rel__gen_table:  {
-      //             mode: "string",
-      //             value: arg.name
-      //         },
-      //         rel__gen_fields:  {
-      //             mode: "raw",
-      //             value: `${JSON.stringify(opt.val)}`
-      //         }
-      //       },
-      //     },
-      //   };
     } else {
-      
-      const fields = parseGenField(opt.value);
-      const res = generateSelect(fields);
-      const load = on_load_rel({
-        pk: res.pk,
-        table: arg.name,
-        select: res.select,
-        pks: {},
-      });
-      console.log(load)
-      
+      return {
+        id: createId(),
+        name: "item",
+        type: "item",
+        childs: [],
+        edit: null as any,
+        component: {
+          id: "32550d01-42a3-4b15-a04a-2c2d5c3c8e67",
+          props: {
+            name: {
+              type: "string",
+              value: arg.name,
+            },
+            label: {
+              type: "string",
+              value: formatName(arg.name),
+            },
+            sub_type: {
+              type: "string",
+              value: "single-option",
+            },
+            rel__gen_table: {
+              type: "string",
+              value: arg.name,
+            },
+            opt__on_load: {
+              type: "raw",
+              value: `\
+              ${load}
+              `,
+            },
+          },
+        },
+      };
       return createItem({
         component: {
           id: "32550d01-42a3-4b15-a04a-2c2d5c3c8e67",
diff --git a/comps/form/gen/gen-form.ts b/comps/form/gen/gen-form.ts
index ffc0374..72f33fc 100755
--- a/comps/form/gen/gen-form.ts
+++ b/comps/form/gen/gen-form.ts
@@ -4,6 +4,7 @@ import { newField } from "./fields";
 import { generateSelect } from "../../md/gen/md-select";
 import { on_load } from "../../md/gen/tbl-list/on_load";
 import { on_submit } from "../../md/gen/tbl-list/on_submit";
+import { createId } from "@paralleldrive/cuid2";
 
 export const generateForm = async (
   modify: (data: any) => void,
@@ -59,12 +60,17 @@ export const generateForm = async (
       const field = newField(item, { parent_table: table, value });
       childs.push(field);
     }
+    console.log(childs)
     if (commit) {
       item.edit.setProp("body", {
         mode: "jsx",
-        value: createItem({
+        value: {
+          id: createId(),
+          name: "item",
+          type: "item",
           childs: childs,
-        }),
+          edit: null as any,
+        },
       });
       await item.edit.commit();
     } else {
diff --git a/comps/form/gen/on_load_rel.ts b/comps/form/gen/on_load_rel.ts
index 731afcd..8e7b4ec 100755
--- a/comps/form/gen/on_load_rel.ts
+++ b/comps/form/gen/on_load_rel.ts
@@ -27,7 +27,6 @@ export const on_load_rel = ({
         sample[k] = "sample";
       }
     }
-    console.log({cols})
   
     return `\
   (arg: {
diff --git a/gen/utils.ts b/gen/utils.ts
index c431e83..dfacde1 100755
--- a/gen/utils.ts
+++ b/gen/utils.ts
@@ -80,7 +80,7 @@ type SimplifiedItem = {
 
 export const createItem = (arg: SimplifiedItem): any => {
   let component = undefined;
-
+ 
   if (arg.component && arg.component.id) {
     component = { id: arg.component.id, props: {} as any };
 
@@ -91,9 +91,8 @@ export const createItem = (arg: SimplifiedItem): any => {
           if (Array.isArray(v) && v.length === 1) {
             component.props[k] = {
               meta: { type: "text" },
-              type: "string",
+              type: "string", 
               value: v[0],
-              valueBuilt: v[0],
             };
           } else if (Array.isArray(v) && v.length === 2) {
             component.props[k] = {