add sonar to form

comps/form/Form.tsx

@@ -1,15 +1,14 @@
 import { Form as FForm } from "@/comps/ui/form";
 import { Toaster } from "@/comps/ui/sonner";
+import { cn } from "@/utils";
 import { useLocal } from "@/utils/use-local";
-import { FC, useEffect, useState } from "react";
+import { AlertTriangle, Check, Loader2 } from "lucide-react";
+import { FC, useEffect } from "react";
 import { createPortal } from "react-dom";
 import { useForm } from "react-hook-form";
 import { toast } from "sonner";
-import { FormHook } from "./utils/utils";
-import { AlertTriangle, Check, Loader2 } from "lucide-react";
-import { cn } from "@/utils";
 import { Skeleton } from "../ui/skeleton";
-import { getPathname } from "../../..";
+import { FormHook } from "./utils/utils";
 
 export const Form: FC<{
   on_init: (arg: { submit: any; reload: any }) => any;
@@ -19,6 +18,7 @@ export const Form: FC<{
   form: FormHook;
   PassProp: any;
   cache: () => any;
+  sonar: "on" | "off";
   layout: "auto" | "1-col" | "2-col";
 }> = ({
   on_init,
@@ -29,6 +29,7 @@ export const Form: FC<{
   on_submit,
   cache,
   layout: _layout,
+  sonar,
 }) => {
   const form_hook = useForm<any>({
     defaultValues: {},
@@ -62,18 +63,20 @@ export const Form: FC<{
   const submit = () => {
     clearTimeout(local.submit_timeout);
     local.submit_timeout = setTimeout(async () => {
-      toast.loading(
+      if (sonar === "on") {
-        <>
+        toast.loading(
-          <Loader2 className="c-h-4 c-w-4 c-animate-spin" />
+          <>
-          Processing ...
+            <Loader2 className="c-h-4 c-w-4 c-animate-spin" />
-        </>,
+            Processing ...
-        {
+          </>,
-          dismissible: true,
+          {
-          className: css`
+            dismissible: true,
-            background: #e4f7ff;
+            className: css`
-          `,
+              background: #e4f7ff;
-        }
+            `,
-      );
+          }
+        );
+      }
       const data = form.hook.getValues();
       form.hook.clearErrors();
       for (const [k, v] of Object.entries(form.validation)) {
@@ -96,39 +99,42 @@ export const Form: FC<{
 
       await res;
       toast.dismiss();
-      setTimeout(() => {
-        toast.dismiss();
 
-        if (Object.keys(form.hook.formState.errors).length > 0) {
+      if (sonar === "on") {
-          toast.error(
+        setTimeout(() => {
-            <div className="c-flex c-text-red-600 c-items-center">
+          toast.dismiss();
-              <AlertTriangle className="c-h-4 c-w-4 c-mr-1" />
+
-              Save Failed, please correct{" "}
+          if (Object.keys(form.hook.formState.errors).length > 0) {
-              {Object.keys(form.hook.formState.errors).length} errors.
+            toast.error(
-            </div>,
+              <div className="c-flex c-text-red-600 c-items-center">
-            {
+                <AlertTriangle className="c-h-4 c-w-4 c-mr-1" />
-              dismissible: true,
+                Save Failed, please correct{" "}
-              className: css`
+                {Object.keys(form.hook.formState.errors).length} errors.
-                background: #ffecec;
+              </div>,
-                border: 2px solid red;
+              {
-              `,
+                dismissible: true,
-            }
+                className: css`
-          );
+                  background: #ffecec;
-        } else {
+                  border: 2px solid red;
-          toast.success(
+                `,
-            <div className="c-flex c-text-blue-700 c-items-center">
+              }
-              <Check className="c-h-4 c-w-4 c-mr-1 " />
+            );
-              Done
+          } else {
-            </div>,
+            toast.success(
-            {
+              <div className="c-flex c-text-blue-700 c-items-center">
-              className: css`
+                <Check className="c-h-4 c-w-4 c-mr-1 " />
-                background: #e4f5ff;
+                Done
-                border: 2px solid blue;
+              </div>,
-              `,
+              {
-            }
+                className: css`
-          );
+                  background: #e4f5ff;
-        }
+                  border: 2px solid blue;
-      }, 100);
+                `,
+              }
+            );
+          }
+        }, 100);
+      }
     }, 300);
   };
 
@@ -163,7 +169,7 @@ export const Form: FC<{
     };
     if (res instanceof Promise) {
       setTimeout(() => {
-        if (!isEditor) {
+        if (!isEditor && sonar === "on") {
           toast.loading(
             <>
               <Loader2 className="c-h-4 c-w-4 c-animate-spin" />