fix

comps/form/Field.tsx

@@ -38,7 +38,8 @@ export const Field: FC<{
     | "datetime"
     | "money"
     | "slider"
-    | "master-link";
+    | "master-link"
+    | "custom";
   required: "y" | "n";
   options: FieldOptions;
   slider: () => Promise<SliderOptions>;
@@ -76,7 +77,8 @@ export const Field: FC<{
   rel_table,
   rel_query,
 }) => {
-  const value = form?.hook.getValues()[name];
+  const values = form?.hook.getValues();
+  const value = values[name];
   const local = useLocal({
     date: {
       // label: "",
@@ -177,6 +179,15 @@ export const Field: FC<{
             </FormLabel>
             <FormControl>
               <>
+                {type === "custom" && (
+                  <div
+                    className={cx(
+                      "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
+                    )}
+                  >
+                    {custom}
+                  </div>
+                )}
                 {type === "slider" && (
                   <div className="c-flex-1 c-min-h-[40px] c-flex">
                     <div className="c-flex c-flex-col c-items-center">

comps/form/Form.tsx

@@ -1,7 +1,7 @@
 import { Form as FForm } from "@/comps/ui/form";
 import { Toaster } from "@/comps/ui/sonner";
 import { useLocal } from "@/utils/use-local";
-import { FC, useEffect } from "react";
+import { FC, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
@@ -9,6 +9,7 @@ import { FormHook } from "./utils/utils";
 import { AlertTriangle, Check, Loader2 } from "lucide-react";
 import { cn } from "@/utils";
 import { Skeleton } from "../ui/skeleton";
+import { getPathname } from "../../..";
 
 export const Form: FC<{
   on_init: (arg: { submit: any; reload: any }) => any;
@@ -88,41 +89,46 @@ export const Form: FC<{
         }
       }
 
-      await on_submit({
+      const res = on_submit({
         form: data,
         error: form.hook.formState.errors,
       });
-      toast.dismiss();
 
-      if (Object.keys(form.hook.formState.errors).length > 0) {
+      await res;
-        toast.error(
+      toast.dismiss();
-          <div className="c-flex c-text-red-600 c-items-center">
+      setTimeout(() => {
-            <AlertTriangle className="c-h-4 c-w-4 c-mr-1" />
+        toast.dismiss();
-            Save Failed, please correct{" "}
+
-            {Object.keys(form.hook.formState.errors).length} errors.
+        if (Object.keys(form.hook.formState.errors).length > 0) {
-          </div>,
+          toast.error(
-          {
+            <div className="c-flex c-text-red-600 c-items-center">
-            dismissible: true,
+              <AlertTriangle className="c-h-4 c-w-4 c-mr-1" />
-            className: css`
+              Save Failed, please correct{" "}
-              background: #ffecec;
+              {Object.keys(form.hook.formState.errors).length} errors.
-              border: 2px solid red;
+            </div>,
-            `,
+            {
-          }
+              dismissible: true,
-        );
+              className: css`
-      } else {
+                background: #ffecec;
-        toast.success(
+                border: 2px solid red;
-          <div className="c-flex c-text-blue-700 c-items-center">
+              `,
-            <Check className="c-h-4 c-w-4 c-mr-1 " />
+            }
-            Done
+          );
-          </div>,
+        } else {
-          {
+          toast.success(
-            className: css`
+            <div className="c-flex c-text-blue-700 c-items-center">
-              background: #e4f5ff;
+              <Check className="c-h-4 c-w-4 c-mr-1 " />
-              border: 2px solid blue;
+              Done
-            `,
+            </div>,
-          }
+            {
-        );
+              className: css`
-      }
+                background: #e4f5ff;
+                border: 2px solid blue;
+              `,
+            }
+          );
+        }
+      }, 100);
     }, 300);
   };
 
@@ -141,11 +147,13 @@ export const Form: FC<{
         local.render();
       },
     });
+
     const res = on_load();
     const loaded = (values: any) => {
       setTimeout(() => {
         toast.dismiss();
       });
+
       if (!!values) {
         for (const [k, v] of Object.entries(values)) {
           form.hook.setValue(k, v);
@@ -224,7 +232,8 @@ export const Form: FC<{
               } else {
                 local.layout = "2-col";
               }
-              local.render();
+
+              local.render(true);
             }
           }}
           className={cx(

gen/utils.ts

@@ -1,7 +1,7 @@
 import { createId } from "@paralleldrive/cuid2";
 import capitalize from "lodash.capitalize";
 
-export type GFCol = {
+export type GFCol = { 
   name: string;
   type: string;
   is_pk: boolean;