fixing tawkto

app/layout.tsx

@@ -10,8 +10,17 @@ import { Providers } from "./providers";
 import LoadScript from "@/utils/global";
 import { type ReactNode } from "react";
 import LoadTawk from "@/components/ui/tawkto/load-tawk";
+import Script from "next/script";
+import dynamic from "next/dynamic";
 const inter = Inter({ subsets: ["latin"] });
 
+// const Tawkto = dynamic(
+//   () => {
+//     return import("@/components/ui/tawkto/tawkto");
+//   },
+//   { ssr: true }
+// );
+
 export const metadata: Metadata = {
   title: {
     default: siteConfig.name,

app/page.tsx

@@ -1,3 +1,4 @@
+"use client";
 import InstallPrompt from "@/components/install-promp";
 import BannerHumasNew from "@/components/landing/banner-new";
 import BodyLayout from "@/components/landing/BodyLayout";
@@ -5,11 +6,20 @@ import AnalyticDrawer from "@/components/landing/drawer";
 import FooterNew from "@/components/landing/footer-new";
 import HeaderNews from "@/components/landing/HeaderNews";
 import NewsTicker from "@/components/landing/NewsTicker";
+import dynamic from "next/dynamic";
 import { Suspense } from "react";
 
+const TawktoEmbed = dynamic(
+  () => {
+    return import("@/components/ui/tawkto/tawkto");
+  },
+  { ssr: true }
+);
+
 export default function Home() {
   return (
     <>
+      {/* <TawktoEmbed /> */}
       <section className="flex flex-col">
         {/* <InstallPrompt /> */}
         <NewsTicker />

components/main/dashboard/dashboard-container.tsx

@@ -523,7 +523,7 @@ export default function DashboardContainer() {
                                 onClick={() => {
                                   if (list?.totalArticle !== 0) {
                                     setSelectedUnit(child?.userLevelName);
-                                    openModalArticle(list?.totalArticle);
+                                    // openModalArticle(list?.totalArticle);
                                   }
                                 }}
                                 className={`w-[10%] text-start cursor-pointer ${

components/ui/tawkto/load-tawk.tsx

@@ -1,22 +1,28 @@
 "use client";
-import { useEffect } from "react";
+import TawkMessengerReact from "@tawk.to/tawk-messenger-react";
 
 const LoadTawk = () => {
-  useEffect(() => {
+  // useEffect(() => {
-    const script = document.createElement("script");
+  //   const script = document.createElement("script");
-    script.src = "https://embed.tawk.to/5d43069be5ae967ef80df561/default";
+  //   script.src = "https://embed.tawk.to/5d43069be5ae967ef80df561/default";
-    script.async = true;
+  //   script.async = true;
-    script.charset = "UTF-8";
+  //   script.charset = "UTF-8";
-    script.setAttribute("crossorigin", "*");
+  //   script.setAttribute("crossorigin", "*");
 
-    document.body.appendChild(script);
+  //   document.body.appendChild(script);
 
-    return () => {
+  //   return () => {
-      document.body.removeChild(script);
+  //     document.body.removeChild(script);
-    };
+  //   };
-  }, []);
+  // }, []);
 
-  return null;
+  // return null;
+  return (
+    <TawkMessengerReact
+      propertyId="5d43069be5ae967ef80df561"
+      widgetId="default"
+    />
+  );
 };
 
 export default LoadTawk;

components/ui/tawkto/tawkto.js

@@ -0,0 +1,12 @@
+import TawkMessengerReact from "@tawk.to/tawk-messenger-react";
+
+export default function TawktoEmbed() {
+  return (
+    <div className="App">
+      <TawkMessengerReact
+        propertyId="5d43069be5ae967ef80df561"
+        widgetId="default"
+      />
+    </div>
+  );
+}

package-lock.json

@@ -25,6 +25,7 @@
         "@hookform/resolvers": "^3.3.4",
         "@react-aria/ssr": "^3.8.0",
         "@react-aria/visually-hidden": "^3.8.6",
+        "@tawk.to/tawk-messenger-react": "^2.0.2",
         "@types/js-cookie": "^3.0.6",
         "@types/node": "20.5.7",
         "@types/react": "19.1.2",
@@ -1981,39 +1982,6 @@
         "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
       }
     },
-    "node_modules/@heroui/form/node_modules/framer-motion": {
-      "version": "12.7.4",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.7.4.tgz",
-      "integrity": "sha512-jX0bPsTmU0oPZTYz/dVyD0dmOyEOEJvdn0TaZBE5I8g2GvVnnQnW9f65cJnoVfUkY3WZWNXGXnPbVA9YnaIfVA==",
-      "peer": true,
-      "dependencies": {
-        "motion-dom": "^12.7.4",
-        "motion-utils": "^12.7.2",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/is-prop-valid": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@heroui/form/node_modules/tailwindcss": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz",
-      "integrity": "sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==",
-      "peer": true
-    },
     "node_modules/@heroui/input": {
       "version": "2.4.10",
       "resolved": "https://registry.npmjs.org/@heroui/input/-/input-2.4.10.tgz",
@@ -4108,12 +4076,6 @@
         "tailwindcss": "*"
       }
     },
-    "node_modules/@heroui/react/node_modules/tailwindcss": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz",
-      "integrity": "sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==",
-      "peer": true
-    },
     "node_modules/@heroui/shared-icons": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/@heroui/shared-icons/-/shared-icons-2.1.6.tgz",
@@ -4189,33 +4151,6 @@
         "react-dom": ">=18 || >=19.0.0-rc.0"
       }
     },
-    "node_modules/@heroui/snippet/node_modules/@heroui/aria-utils/node_modules/framer-motion": {
-      "version": "12.7.4",
-      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-12.7.4.tgz",
-      "integrity": "sha512-jX0bPsTmU0oPZTYz/dVyD0dmOyEOEJvdn0TaZBE5I8g2GvVnnQnW9f65cJnoVfUkY3WZWNXGXnPbVA9YnaIfVA==",
-      "peer": true,
-      "dependencies": {
-        "motion-dom": "^12.7.4",
-        "motion-utils": "^12.7.2",
-        "tslib": "^2.4.0"
-      },
-      "peerDependencies": {
-        "@emotion/is-prop-valid": "*",
-        "react": "^18.0.0 || ^19.0.0",
-        "react-dom": "^18.0.0 || ^19.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@emotion/is-prop-valid": {
-          "optional": true
-        },
-        "react": {
-          "optional": true
-        },
-        "react-dom": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@heroui/snippet/node_modules/@heroui/button": {
       "version": "2.2.9",
       "resolved": "https://registry.npmjs.org/@heroui/button/-/button-2.2.9.tgz",
@@ -4881,25 +4816,6 @@
         "react": ">=18 || >=19.0.0-rc.0"
       }
     },
-    "node_modules/@heroui/system/node_modules/@heroui/theme": {
-      "version": "2.4.13",
-      "resolved": "https://registry.npmjs.org/@heroui/theme/-/theme-2.4.13.tgz",
-      "integrity": "sha512-W1wm/x3dx9rZXNdyvjQRueK+9ieTpT2icyttGuVEn7NWgzMhpIbEKsAwtTLZGc5zMHJE2cxJQ/jpdCR8HBe0Dw==",
-      "peer": true,
-      "dependencies": {
-        "@heroui/shared-utils": "2.1.7",
-        "clsx": "^1.2.1",
-        "color": "^4.2.3",
-        "color2k": "^2.0.3",
-        "deepmerge": "4.3.1",
-        "flat": "^5.0.2",
-        "tailwind-merge": "2.5.4",
-        "tailwind-variants": "0.3.0"
-      },
-      "peerDependencies": {
-        "tailwindcss": ">=3.4.0"
-      }
-    },
     "node_modules/@heroui/system/node_modules/@react-aria/overlays": {
       "version": "3.26.1",
       "resolved": "https://registry.npmjs.org/@react-aria/overlays/-/overlays-3.26.1.tgz",
@@ -4930,38 +4846,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/@heroui/system/node_modules/tailwind-merge": {
-      "version": "2.5.4",
-      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.4.tgz",
-      "integrity": "sha512-0q8cfZHMu9nuYP/b5Shb7Y7Sh1B7Nnl5GqNr1U+n2p6+mybvRtayrQ+0042Z5byvTA8ihjlP8Odo8/VnHbZu4Q==",
-      "peer": true,
-      "funding": {
-        "type": "github",
-        "url": "https://github.com/sponsors/dcastil"
-      }
-    },
-    "node_modules/@heroui/system/node_modules/tailwind-variants": {
-      "version": "0.3.0",
-      "resolved": "https://registry.npmjs.org/tailwind-variants/-/tailwind-variants-0.3.0.tgz",
-      "integrity": "sha512-ho2k5kn+LB1fT5XdNS3Clb96zieWxbStE9wNLK7D0AV64kdZMaYzAKo0fWl6fXLPY99ffF9oBJnIj5escEl/8A==",
-      "peer": true,
-      "dependencies": {
-        "tailwind-merge": "^2.5.4"
-      },
-      "engines": {
-        "node": ">=16.x",
-        "pnpm": ">=7.x"
-      },
-      "peerDependencies": {
-        "tailwindcss": "*"
-      }
-    },
-    "node_modules/@heroui/system/node_modules/tailwindcss": {
-      "version": "4.1.4",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.4.tgz",
-      "integrity": "sha512-1ZIUqtPITFbv/DxRmDr5/agPqJwF69d24m9qmM1939TJehgY539CtzeZRjbLt5G6fSy/7YqqYsfvoTEw9xUI2A==",
-      "peer": true
-    },
     "node_modules/@heroui/theme": {
       "version": "2.4.5",
       "resolved": "https://registry.npmjs.org/@heroui/theme/-/theme-2.4.5.tgz",
@@ -9473,6 +9357,15 @@
         "url": "https://github.com/sponsors/tannerlinsley"
       }
     },
+    "node_modules/@tawk.to/tawk-messenger-react": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@tawk.to/tawk-messenger-react/-/tawk-messenger-react-2.0.2.tgz",
+      "integrity": "sha512-Nl3JMMIrQiyveSSuP8qYWEu1u+coqz4WCA7TfSjOMDcpyWEiORvOdnMWTsSlhz8rae57HWsCAGLzE507fKtzXA==",
+      "peerDependencies": {
+        "react": "^18.1.0",
+        "react-dom": "^18.1.0"
+      }
+    },
     "node_modules/@trysound/sax": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/@trysound/sax/-/sax-0.2.0.tgz",
@@ -14400,21 +14293,6 @@
         "node": ">=10"
       }
     },
-    "node_modules/motion-dom": {
-      "version": "12.7.4",
-      "resolved": "https://registry.npmjs.org/motion-dom/-/motion-dom-12.7.4.tgz",
-      "integrity": "sha512-1ZUHAoSUMMxP6jPqyxlk9XUfb6NxMsnWPnH2YGhrOhTURLcXWbETi6eemoKb60Pe32NVJYduL4B62VQSO5Jq8Q==",
-      "peer": true,
-      "dependencies": {
-        "motion-utils": "^12.7.2"
-      }
-    },
-    "node_modules/motion-utils": {
-      "version": "12.7.2",
-      "resolved": "https://registry.npmjs.org/motion-utils/-/motion-utils-12.7.2.tgz",
-      "integrity": "sha512-XhZwqctxyJs89oX00zn3OGCuIIpVevbTa+u82usWBC6pSHUd2AoNWiYa7Du8tJxJy9TFbZ82pcn5t7NOm1PHAw==",
-      "peer": true
-    },
     "node_modules/ms": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
@@ -18750,6 +18628,7 @@
       }
     },
     "vendor/ckeditor5": {
+      "name": "ckeditor5-custom-build",
       "version": "0.0.1",
       "license": "SEE LICENSE IN LICENSE.md",
       "dependencies": {

package.json

@@ -26,6 +26,7 @@
     "@hookform/resolvers": "^3.3.4",
     "@react-aria/ssr": "^3.8.0",
     "@react-aria/visually-hidden": "^3.8.6",
+    "@tawk.to/tawk-messenger-react": "^2.0.2",
     "@types/js-cookie": "^3.0.6",
     "@types/node": "20.5.7",
     "@types/react": "19.1.2",

types/tawk.d.ts

@@ -0,0 +1 @@
+declare module "@tawk.to/tawk-messenger-react";