fix

comps/custom/Datepicker/components/Input.tsx

@@ -285,11 +285,13 @@ const Input: React.FC<Props> = (e: Props) => {
 
   return (
     <>
+      {disabled ? (
+        <div className={getClassName()}>{inputText}</div>
+      ) : (
         <input
           ref={inputRef}
           type="text"
           className={getClassName()}
-        disabled={disabled}
           readOnly={readOnly}
           placeholder={
             placeholder
@@ -306,7 +308,9 @@ const Input: React.FC<Props> = (e: Props) => {
           onChange={handleInputChange}
           onKeyDown={handleInputKeyDown}
         />
+      )}
 
+      {!disabled && (
         <button
           type="button"
           ref={buttonRef}
@@ -315,6 +319,7 @@ const Input: React.FC<Props> = (e: Props) => {
         >
           {renderToggleIcon(inputText == null || !inputText?.length)}
         </button>
+      )}
     </>
   );
 };

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) => {

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;

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"

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 }}
@@ -201,6 +210,7 @@ export const FieldTypeInput: FC<{
         />
       );
     }
+  }
   return (
     <div className="c-flex c-relative c-flex-1">
       <input

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"
           >

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) => {

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({

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) {

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>

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 = {

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,8 +351,12 @@ 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) => {
+                  if (!disabled) {
                     ev.stopPropagation();
                     ev.preventDefault();
                     local.value = local.value.filter((val) => e?.value !== val);
@@ -363,10 +366,11 @@ export const Typeahead: FC<{
                     if (typeof onChange === "function") {
                       onChange(local.value);
                     }
+                  }
                 }}
               >
                 <div>{e?.tag || e?.label || <>&nbsp;</>}</div>
-                <X size={12} />
+                {!disabled && <X size={12} />}
               </Badge>
             );
           })}

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";

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,8 +157,10 @@ export const SideBar: FC<{
                       typeof menu.value === "string" &&
                       getPathname() !== menu.value
                     ) {
+                      if (!pm.on_load) {
                         navigate(menu.value);
                       }
+                    }
                   }, 500);
                 }
                 local.render();
@@ -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);
                 }

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
+  child: ReactNode;
-}
+};

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;