diff --git a/comps/custom/Datepicker/components/Input.tsx b/comps/custom/Datepicker/components/Input.tsx
index b8df914..1bba05a 100755
--- a/comps/custom/Datepicker/components/Input.tsx
+++ b/comps/custom/Datepicker/components/Input.tsx
@@ -285,36 +285,41 @@ const Input: React.FC<Props> = (e: Props) => {
 
   return (
     <>
-      <input
-        ref={inputRef}
-        type="text"
-        className={getClassName()}
-        disabled={disabled}
-        readOnly={readOnly}
-        placeholder={
-          placeholder
-            ? placeholder
-            : `${displayFormat}${
-                asSingle ? "" : ` ${separator} ${displayFormat}`
-              }`
-        }
-        value={inputText}
-        id={inputId}
-        name={inputName}
-        autoComplete="off"
-        role="presentation"
-        onChange={handleInputChange}
-        onKeyDown={handleInputKeyDown}
-      />
+      {disabled ? (
+        <div className={getClassName()}>{inputText}</div>
+      ) : (
+        <input
+          ref={inputRef}
+          type="text"
+          className={getClassName()}
+          readOnly={readOnly}
+          placeholder={
+            placeholder
+              ? placeholder
+              : `${displayFormat}${
+                  asSingle ? "" : ` ${separator} ${displayFormat}`
+                }`
+          }
+          value={inputText}
+          id={inputId}
+          name={inputName}
+          autoComplete="off"
+          role="presentation"
+          onChange={handleInputChange}
+          onKeyDown={handleInputKeyDown}
+        />
+      )}
 
-      <button
-        type="button"
-        ref={buttonRef}
-        disabled={disabled}
-        className={getToggleClassName()}
-      >
-        {renderToggleIcon(inputText == null || !inputText?.length)}
-      </button>
+      {!disabled && (
+        <button
+          type="button"
+          ref={buttonRef}
+          disabled={disabled}
+          className={getToggleClassName()}
+        >
+          {renderToggleIcon(inputText == null || !inputText?.length)}
+        </button>
+      )}
     </>
   );
 };
diff --git a/comps/form/Form.tsx b/comps/form/Form.tsx
index d46e86f..97bd6e7 100755
--- a/comps/form/Form.tsx
+++ b/comps/form/Form.tsx
@@ -146,13 +146,11 @@ export const Form: FC<FMProps> = (props) => {
   if (fm.status === "resizing") {
     fm.status = "ready";
   }
-
   return (
     <form
       onSubmit={(e) => {
         e.preventDefault();
         e.stopPropagation();
-        console.log("HALOO");
         fm.submit();
       }}
       ref={(el) => {
diff --git a/comps/form/field/Field.tsx b/comps/form/field/Field.tsx
index 5181f4e..288eaf4 100755
--- a/comps/form/field/Field.tsx
+++ b/comps/form/field/Field.tsx
@@ -8,7 +8,6 @@ import { validate } from "../utils/validate";
 
 export const Field: FC<FieldProp> = (arg) => {
   const showlabel = arg.show_label || "y";
-
   let sub_type: any = arg.sub_type; // tipe field
 
   const { fm } = arg;
diff --git a/comps/form/field/Label.tsx b/comps/form/field/Label.tsx
index e90fdd5..3ede4db 100755
--- a/comps/form/field/Label.tsx
+++ b/comps/form/field/Label.tsx
@@ -17,7 +17,7 @@ export const Label: FC<{ field: FieldLocal; fm: FMLocal }> = ({
       <span className={cx(errors.length > 0 && `c-text-red-600`)}>
         {field.label}
       </span>
-      {field.required && (
+      {field.required && !field.disabled && (
         <span className="c-text-red-600 c-mb-2 c-ml-1">
           <svg
             xmlns="http://www.w3.org/2000/svg"
diff --git a/comps/form/field/type/TypeInput.tsx b/comps/form/field/type/TypeInput.tsx
index e071fa4..796847f 100755
--- a/comps/form/field/type/TypeInput.tsx
+++ b/comps/form/field/type/TypeInput.tsx
@@ -27,7 +27,8 @@ export type PropTypeInput = {
     | "upload"
     | "file"
     | "search"
-    | "password";
+    | "password"
+    | "import";
   placeholder?: string;
   onFocus?: (e: FocusEvent<HTMLDivElement>) => void;
   onBlur?: (e: FocusEvent<HTMLDivElement>) => void;
@@ -102,7 +103,6 @@ export const FieldTypeInput: FC<{
 
   const disabled =
     typeof field.disabled === "function" ? field.disabled() : field.disabled;
-
   switch (type_field) {
     case "toggle":
       return (
@@ -174,6 +174,15 @@ export const FieldTypeInput: FC<{
           on_change={arg.on_change}
         />
       );
+    case "import":
+      return (
+        <FieldUpload
+          field={field}
+          fm={fm}
+          prop={prop}
+          on_change={arg.on_change}
+        />
+      );
     case "money":
       return (
         <>
@@ -182,7 +191,7 @@ export const FieldTypeInput: FC<{
       );
     case "rich-text":
       return <FieldRichText field={field} fm={fm} prop={prop} />;
-    case "date":
+    case "date": {
       return (
         <Datepicker
           value={{ startDate: value, endDate: value }}
@@ -200,6 +209,7 @@ export const FieldTypeInput: FC<{
           }}
         />
       );
+    }
   }
   return (
     <div className="c-flex c-relative c-flex-1">
diff --git a/comps/form/field/type/TypeSingleCheckbox.tsx b/comps/form/field/type/TypeSingleCheckbox.tsx
index 1e5b537..2f70628 100755
--- a/comps/form/field/type/TypeSingleCheckbox.tsx
+++ b/comps/form/field/type/TypeSingleCheckbox.tsx
@@ -10,7 +10,17 @@ export const FieldSingleCheckbox: FC<{
 }> = ({ field, fm, arg }) => {
   const local = useLocal({
     list: [] as any[],
+    change_timeout: null as any,
   });
+  const renderOnChange = () => {
+    local.render();
+    if (field.on_change) {
+      field.on_change({ value: fm.data[field.name], name: field.name, fm });
+    }
+
+    clearTimeout(local.change_timeout);
+    local.change_timeout = setTimeout(fm.render, 300);
+  };
   useEffect(() => {
     const callback = (res: any[]) => {
       if (Array.isArray(res)) {
@@ -39,6 +49,13 @@ export const FieldSingleCheckbox: FC<{
             onClick={() => {
               fm.data[field.name] = !value;
               fm.render();
+              if (field.on_change) {
+                field.on_change({
+                  value: !value,
+                  name: field.name,
+                  fm,
+                });
+              }
             }}
             className="c-flex c-flex-row c-space-x-1 cursor-pointer c-items-center rounded-full p-0.5"
           >
diff --git a/comps/form/field/type/TypeUpload.tsx b/comps/form/field/type/TypeUpload.tsx
index 4c74e98..3052c05 100755
--- a/comps/form/field/type/TypeUpload.tsx
+++ b/comps/form/field/type/TypeUpload.tsx
@@ -74,7 +74,7 @@ export const FieldUpload: FC<{
             try {
               file = event.target.files[0];
             } catch (ex) {}
-            if (prop.model_upload === "import") {
+            if (type_field === "import") {
               const reader = new FileReader();
 
               reader.onload = (e: any) => {
diff --git a/comps/list/TableList.tsx b/comps/list/TableList.tsx
index d77d418..e043588 100755
--- a/comps/list/TableList.tsx
+++ b/comps/list/TableList.tsx
@@ -713,14 +713,14 @@ export const TableList: FC<TableListProp> = ({
           ) : (
             <>
               <div
-                className="w-full h-full overflow-y-auto"
+                className="w-full h-full overflow-y-auto c-flex-col"
                 onScroll={local.paging.scroll}
               >
                 {Array.isArray(data) ? (
                   data.map((e, idx) => {
                     return (
                       <div
-                        className="flex-grow"
+                        className="c-flex-grow"
                         onClick={(ev) => {
                           if (!isEditor && typeof row_click === "function") {
                             row_click({
diff --git a/comps/popup/PopUp.tsx b/comps/popup/PopUp.tsx
index 97d24a6..5128e3b 100755
--- a/comps/popup/PopUp.tsx
+++ b/comps/popup/PopUp.tsx
@@ -74,7 +74,7 @@ export const Popup: FC<PopupProp> = ({
         createPortal(
           <div
             ref={(e) => (local.ref = e)}
-            className="c-w-screen c-h-screen relative c-bg-[#00000017]  c-flex c-flex-row c-items-center c-justify-center"
+            className="c-w-screen c-h-screen relative c-flex c-flex-row c-items-center c-justify-center"
             onClick={(e) => {
               if (local.ref) {
                 if (e.target === local.ref) {
diff --git a/comps/tab/Tab.tsx b/comps/tab/Tab.tsx
index 7cd95c4..b0bf2e6 100755
--- a/comps/tab/Tab.tsx
+++ b/comps/tab/Tab.tsx
@@ -4,16 +4,15 @@ import { FC, ReactNode, useEffect } from "react";
 import { PTLocalInternal, PTProp } from "./utils/typings";
 export const PanelTab: FC<PTProp> = ({ header, body, tab, PassProp, item }) => {
   const local = useLocal<PTLocalInternal>({
-    mode: "",
+    mode: "" as any,
   });
   useEffect(() => {
     local.mode = tab;
     local.render();
-    console.log({local})
   }, [tab])
   const header_list = get(item, "component.props.header.content.childs") || [];
   return (
-    <div className="c-flex c-flex-col c-flex-grow c-h-full">
+    <div className="c-flex c-flex-col c-flex-grow c-h-full c-w-full">
       <PassProp panel_tab={local}>{header}</PassProp>
       <PassProp panel_tab={local}>{body}</PassProp>
     </div>
diff --git a/comps/tab/utils/typings.ts b/comps/tab/utils/typings.ts
index 7f720a1..87a394e 100755
--- a/comps/tab/utils/typings.ts
+++ b/comps/tab/utils/typings.ts
@@ -9,7 +9,7 @@ export type PTProp = {
   tab: "string";
   PassProp: any;
   item: PrasiItem;
-  pt: PTLocalInternal
+  pt: PTLocalInternal;
 };
 
 export type PTLocalInternal = {
diff --git a/comps/ui/typeahead.tsx b/comps/ui/typeahead.tsx
index dec0185..600cfb5 100755
--- a/comps/ui/typeahead.tsx
+++ b/comps/ui/typeahead.tsx
@@ -325,17 +325,16 @@ export const Typeahead: FC<{
   if (!local.open && local.mode === "single" && local.value?.length > 0) {
     const found = options.find((e) => e.value === local.value[0]);
     if (found) {
-      inputval = found.label;
+      inputval = found.tag || found.label;
     } else {
       inputval = local.value[0];
     }
   }
-
   return (
     <div
       className={cx(
         local.mode === "single" ? "c-cursor-pointer" : "c-cursor-text",
-        "c-flex c-relative c-space-x-2 c-flex-wrap c-px-2 c-pb-0 c-items-center c-w-full c-h-full c-flex-1",
+        "c-flex c-relative c-flex-wrap c-px-2 c-pb-0 c-items-center c-w-full c-h-full c-flex-1",
         css`
           padding-top: 0.35rem;
         `,
@@ -352,21 +351,26 @@ export const Typeahead: FC<{
               <Badge
                 key={idx}
                 variant={"outline"}
-                className="c-space-x-1 c-mb-2 c-cursor-pointer hover:c-bg-red-100"
+                className={cx(
+                  "c-space-x-1 c-mr-2 c-mb-2 c-bg-white",
+                  !disabled && " c-cursor-pointer hover:c-bg-red-100"
+                )}
                 onClick={(ev) => {
-                  ev.stopPropagation();
-                  ev.preventDefault();
-                  local.value = local.value.filter((val) => e?.value !== val);
-                  local.render();
-                  input.current?.focus();
+                  if (!disabled) {
+                    ev.stopPropagation();
+                    ev.preventDefault();
+                    local.value = local.value.filter((val) => e?.value !== val);
+                    local.render();
+                    input.current?.focus();
 
-                  if (typeof onChange === "function") {
-                    onChange(local.value);
+                    if (typeof onChange === "function") {
+                      onChange(local.value);
+                    }
                   }
                 }}
               >
                 <div>{e?.tag || e?.label || <>&nbsp;</>}</div>
-                <X size={12} />
+                {!disabled && <X size={12} />}
               </Badge>
             );
           })}
diff --git a/exports.tsx b/exports.tsx
index 68e7331..3b86539 100755
--- a/exports.tsx
+++ b/exports.tsx
@@ -116,6 +116,7 @@ export { Menu, MenuIcon } from "@/preset/menu/Menu";
 export { ShowHidePanel } from "@/comps/custom/ShowHidePanel";
 export { PanelBody } from "@/comps/tab/parts/PanelBody";
 export { PanelHeader } from "@/comps/tab/parts/PanelHead";
+export { PanelTab } from "@/comps/tab/Tab";
 
 /*Popup*/
 export { Popup } from "@/comps/popup/PopUp";
diff --git a/preset/menu/Menu.tsx b/preset/menu/Menu.tsx
index 49ab522..e40934a 100755
--- a/preset/menu/Menu.tsx
+++ b/preset/menu/Menu.tsx
@@ -147,6 +147,7 @@ export const SideBar: FC<{
                     });
                   }
                 }
+
                 local.loading = true;
                 if (typeof menu.value === "string") {
                   local.active = menu.hash;
@@ -156,7 +157,9 @@ export const SideBar: FC<{
                       typeof menu.value === "string" &&
                       getPathname() !== menu.value
                     ) {
-                      navigate(menu.value);
+                      if (!pm.on_load) {
+                        navigate(menu.value);
+                      }
                     }
                   }, 500);
                 }
@@ -166,6 +169,28 @@ export const SideBar: FC<{
                   !Array.isArray(menu.value) &&
                   typeof menu.value === "string"
                 ) {
+                  if (pm.on_load) {
+                    let done = { exec: () => {} };
+                    console.log(preloaded(menu.value));
+                    if (preloaded(menu.value)) {
+                      pm.on_load((exec) => {
+                        if (typeof menu.value === "string")
+                          navigate(menu.value);
+                        exec();
+                      });
+                    } else {
+                      pm.on_load((exec) => {
+                        done.exec = exec;
+                      });
+                      await preload(menu.value);
+                      setTimeout(() => {
+                        done.exec();
+                        if (typeof menu.value === "string")
+                          navigate(menu.value);
+                      }, 500);
+                    }
+                    return;
+                  }
                   await preload(menu.value);
                   navigate(menu.value);
                 }
diff --git a/preset/menu/utils/type-menu.ts b/preset/menu/utils/type-menu.ts
index 571e106..ad1bb7f 100755
--- a/preset/menu/utils/type-menu.ts
+++ b/preset/menu/utils/type-menu.ts
@@ -9,7 +9,8 @@ export type MenuProp = {
   child: ReactNode;
   mode: "full" | "mini";
   item: PrasiItem;
-  style: "navbar" | "sidebar"
+  style: "navbar" | "sidebar";
+  on_load?: (on_done: (exec: () => void) => void) => void;
 };
 export type MenuActive = {
   data: any;
@@ -21,5 +22,5 @@ export type MenuActive = {
 
 export type IMenuItem = {
   data: IMenu[];
-  child: ReactNode
-}
\ No newline at end of file
+  child: ReactNode;
+};
diff --git a/utils/globals.d.ts b/utils/globals.d.ts
index 92e976f..802b622 100755
--- a/utils/globals.d.ts
+++ b/utils/globals.d.ts
@@ -5,5 +5,6 @@ declare var css: any;
 declare var params: any;
 declare var cx: any;
 declare var preload: (urls: string[] | string) => any;
+declare var preloaded: (url: string) => boolean;
 declare var navigate: (link: string) => void;
 declare var siteurl: (path: string) => string;