From ca8148323348f803f1cf7a843a798359796e61cc Mon Sep 17 00:00:00 2001
From: pdovhomilja <41537049+pdovhomilja@users.noreply.github.com>
Date: Fri, 27 Oct 2023 16:12:05 +0200
Subject: [PATCH] Update - Menu - active menu highlighted

---
 .../(routes)/admin/_components/GptCard.tsx    | 16 ++---
 .../(routes)/components/ModuleMenu.tsx        | 54 +++++---------
 .../components/menu-items/Administration.tsx  | 25 +++++++
 .../components/menu-items/ChatGPT.tsx         | 27 +++----
 .../(routes)/components/menu-items/Crm.tsx    | 10 ++-
 .../components/menu-items/Dashboard.tsx       | 27 +++++++
 .../components/menu-items/Databoxes.tsx       | 27 +++----
 .../components/menu-items/Documents.tsx       | 26 +++----
 .../components/menu-items/Employees.tsx       |  8 ++-
 .../components/menu-items/Invoices.tsx        | 19 +++--
 .../components/menu-items/Projects.tsx        | 19 +++--
 .../components/menu-items/Reports.tsx         | 29 +++-----
 .../components/menu-items/SecondBrain.tsx     |  9 ++-
 .../(routes)/components/ui/MenuItem.tsx       | 72 -------------------
 app/[locale]/(routes)/devmode/page.tsx        |  6 +-
 .../(routes)/projects/dialogs/NewProject.tsx  |  6 +-
 .../(routes)/projects/dialogs/NewTask.tsx     |  2 +-
 17 files changed, 158 insertions(+), 224 deletions(-)
 create mode 100644 app/[locale]/(routes)/components/menu-items/Administration.tsx
 create mode 100644 app/[locale]/(routes)/components/menu-items/Dashboard.tsx
 delete mode 100644 app/[locale]/(routes)/components/ui/MenuItem.tsx

diff --git a/app/[locale]/(routes)/admin/_components/GptCard.tsx b/app/[locale]/(routes)/admin/_components/GptCard.tsx
index 9f8d8bf..c4d5271 100644
--- a/app/[locale]/(routes)/admin/_components/GptCard.tsx
+++ b/app/[locale]/(routes)/admin/_components/GptCard.tsx
@@ -20,15 +20,13 @@ const GptCard = async () => {
       <CardHeader className="text-lg">
         <CardTitle>AI assistant GPT model</CardTitle>
         <CardDescription>
-          <div>
-            actual model:{" "}
-            {
-              //filter in gptModels where status = ACTIVE
-              gptModels
-                .filter((model) => model.status === "ACTIVE")
-                .map((model) => model.model)
-            }
-          </div>
+          actual model:{" "}
+          {
+            //filter in gptModels where status = ACTIVE
+            gptModels
+              .filter((model) => model.status === "ACTIVE")
+              .map((model) => model.model)
+          }
         </CardDescription>
       </CardHeader>
       <CardContent className="space-y-2">
diff --git a/app/[locale]/(routes)/components/ModuleMenu.tsx b/app/[locale]/(routes)/components/ModuleMenu.tsx
index 330df79..75d648e 100644
--- a/app/[locale]/(routes)/components/ModuleMenu.tsx
+++ b/app/[locale]/(routes)/components/ModuleMenu.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import React, { useState } from "react";
-import MenuItem from "./ui/MenuItem";
+import React, { useEffect, useState } from "react";
 
 import ProjectModuleMenu from "./menu-items/Projects";
 import SecondBrainModuleMenu from "./menu-items/SecondBrain";
@@ -13,12 +12,24 @@ import EmployeesModuleMenu from "./menu-items/Employees";
 import DataboxModuleMenu from "./menu-items/Databoxes";
 import CrmModuleMenu from "./menu-items/Crm";
 
+import AdministrationMenu from "./menu-items/Administration";
+import DashboardMenu from "./menu-items/Dashboard";
+
 type Props = {
   modules: any;
 };
 
 const ModuleMenu = ({ modules }: Props) => {
   const [open, setOpen] = useState(true);
+  const [isMounted, setIsMounted] = useState(false);
+
+  useEffect(() => {
+    setIsMounted(true);
+  }, []);
+
+  if (!isMounted) {
+    return null;
+  }
 
   //Console logs
   //console.log(modules, "modules");
@@ -28,7 +39,7 @@ const ModuleMenu = ({ modules }: Props) => {
       <div
         className={` ${
           open ? "w-72" : "w-20 "
-        } bg-dark-purple h-screen p-5  pt-8 relative duration-300`}
+        }  h-screen p-5  pt-8 relative duration-300`}
       >
         <div className="flex gap-x-4 items-center">
           <div
@@ -48,13 +59,8 @@ const ModuleMenu = ({ modules }: Props) => {
             {process.env.NEXT_PUBLIC_APP_NAME}
           </h1>
         </div>
-        <ul className="pt-6">
-          <MenuItem
-            icon="home"
-            open={open}
-            route={"/"}
-            menuItem={"Dashboard"}
-          />
+        <div className="pt-6">
+          <DashboardMenu open={open} />
           {modules.find(
             (menuItem: any) => menuItem.name === "crm" && menuItem.enabled
           ) ? (
@@ -101,32 +107,8 @@ const ModuleMenu = ({ modules }: Props) => {
           ) ? (
             <ChatGPTModuleMenu open={open} />
           ) : null}
-
-          {/*  {modules.map((menuItem: any) => {
-            if (menuItem.enabled === true) {
-              return (
-                <MenuItem
-                  key={menuItem.id}
-                  icon={menuItem.icon}
-                  open={open}
-                  route={menuItem.route}
-                  menuItem={menuItem.menuItem}
-                />
-              );
-            } else {
-              return null;
-            }
-          })} */}
-          <li>
-            {/* Admin menu item is allways enabled */}
-            <MenuItem
-              icon="wrenchScrewdriver"
-              open={open}
-              route={"/admin"}
-              menuItem={"Administrace"}
-            />
-          </li>
-        </ul>
+          <AdministrationMenu open={open} />
+        </div>
       </div>
     </div>
   );
diff --git a/app/[locale]/(routes)/components/menu-items/Administration.tsx b/app/[locale]/(routes)/components/menu-items/Administration.tsx
new file mode 100644
index 0000000..fbe8cfe
--- /dev/null
+++ b/app/[locale]/(routes)/components/menu-items/Administration.tsx
@@ -0,0 +1,25 @@
+import { Wrench } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+type Props = {
+  open: boolean;
+};
+
+const AdministrationMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("admin");
+  return (
+    <div className="flex flex-row items-center mx-auto p-2">
+      <Link
+        href={"/admin"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
+        <Wrench className="w-6" />
+        <span className={open ? "" : "hidden"}>Administration</span>
+      </Link>
+    </div>
+  );
+};
+
+export default AdministrationMenu;
diff --git a/app/[locale]/(routes)/components/menu-items/ChatGPT.tsx b/app/[locale]/(routes)/components/menu-items/ChatGPT.tsx
index 62e09d0..f3e0135 100644
--- a/app/[locale]/(routes)/components/menu-items/ChatGPT.tsx
+++ b/app/[locale]/(routes)/components/menu-items/ChatGPT.tsx
@@ -1,23 +1,9 @@
 "use client";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Bot,
-  FileBarChart,
-  FileCheck,
-  FileText,
-  Lightbulb,
-  ServerIcon,
-  UserIcon,
-} from "lucide-react";
+
+import { Bot } from "lucide-react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
-import { useRouter } from "next/navigation";
 import React from "react";
 
 type Props = {
@@ -25,9 +11,14 @@ type Props = {
 };
 
 const ChatGPTModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("openAi");
   return (
     <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/openAi"} className="flex gap-2 p-2">
+      <Link
+        href={"/openAi"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
         <Bot className="w-6" />
         <span className={open ? "" : "hidden"}>ChatGPT</span>
       </Link>
diff --git a/app/[locale]/(routes)/components/menu-items/Crm.tsx b/app/[locale]/(routes)/components/menu-items/Crm.tsx
index e5d05ec..4246366 100644
--- a/app/[locale]/(routes)/components/menu-items/Crm.tsx
+++ b/app/[locale]/(routes)/components/menu-items/Crm.tsx
@@ -6,7 +6,7 @@ import {
   DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
-import { Coins, UserIcon } from "lucide-react";
+import { Coins } from "lucide-react";
 
 import { useRouter } from "next/navigation";
 import React, { startTransition } from "react";
@@ -33,8 +33,14 @@ const CrmModuleMenu = ({ open }: Props) => {
     });
   }
 
+  const isPath = pathname.includes("crm");
+
   return (
-    <div className="flex flex-row items-center mx-auto p-2">
+    <div
+      className={`flex flex-row items-center mx-auto p-2 ${
+        isPath ? "text-muted-foreground" : null
+      }`}
+    >
       <DropdownMenu>
         <DropdownMenuTrigger
           className={
diff --git a/app/[locale]/(routes)/components/menu-items/Dashboard.tsx b/app/[locale]/(routes)/components/menu-items/Dashboard.tsx
new file mode 100644
index 0000000..31a4985
--- /dev/null
+++ b/app/[locale]/(routes)/components/menu-items/Dashboard.tsx
@@ -0,0 +1,27 @@
+import { Home } from "lucide-react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+import React from "react";
+
+type Props = {
+  open: boolean;
+};
+
+const DashboardMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("nevermind");
+  return (
+    <div className="flex flex-row items-center mx-auto p-2">
+      <Link
+        href={"/"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
+        <Home className="w-6" />
+        <span className={open ? "" : "hidden"}>Dashboard</span>
+      </Link>
+    </div>
+  );
+};
+
+export default DashboardMenu;
diff --git a/app/[locale]/(routes)/components/menu-items/Databoxes.tsx b/app/[locale]/(routes)/components/menu-items/Databoxes.tsx
index 2abc64c..ffadd51 100644
--- a/app/[locale]/(routes)/components/menu-items/Databoxes.tsx
+++ b/app/[locale]/(routes)/components/menu-items/Databoxes.tsx
@@ -1,24 +1,8 @@
 "use client";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  Bot,
-  FileBarChart,
-  FileCheck,
-  FileEdit,
-  FileText,
-  Lightbulb,
-  ServerIcon,
-  UserIcon,
-} from "lucide-react";
+import { FileEdit } from "lucide-react";
 import Link from "next/link";
 
-import { useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import React from "react";
 
 type Props = {
@@ -26,9 +10,14 @@ type Props = {
 };
 
 const DataboxModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("databox");
   return (
     <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/databox"} className="flex gap-2 p-2">
+      <Link
+        href={"/databox"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
         <FileEdit className="w-6" />
         <span className={open ? "" : "hidden"}>Databox</span>
       </Link>
diff --git a/app/[locale]/(routes)/components/menu-items/Documents.tsx b/app/[locale]/(routes)/components/menu-items/Documents.tsx
index 66d9ce9..eeaf365 100644
--- a/app/[locale]/(routes)/components/menu-items/Documents.tsx
+++ b/app/[locale]/(routes)/components/menu-items/Documents.tsx
@@ -1,22 +1,7 @@
-"use client";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  FileBarChart,
-  FileCheck,
-  FileText,
-  Lightbulb,
-  ServerIcon,
-  UserIcon,
-} from "lucide-react";
+import { FileText } from "lucide-react";
 import Link from "next/link";
 
-import { useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import React from "react";
 
 type Props = {
@@ -24,9 +9,14 @@ type Props = {
 };
 
 const DocumentsModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("documents");
   return (
     <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/documents"} className="flex gap-2 p-2">
+      <Link
+        href={"/documents"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
         <FileText className="w-6" />
         <span className={open ? "" : "hidden"}>Documents</span>
       </Link>
diff --git a/app/[locale]/(routes)/components/menu-items/Employees.tsx b/app/[locale]/(routes)/components/menu-items/Employees.tsx
index 9c5b4bc..7c27848 100644
--- a/app/[locale]/(routes)/components/menu-items/Employees.tsx
+++ b/app/[locale]/(routes)/components/menu-items/Employees.tsx
@@ -1,5 +1,6 @@
 import { Users } from "lucide-react";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
 
 import React from "react";
 
@@ -8,9 +9,14 @@ type Props = {
 };
 
 const EmployeesModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("employees");
   return (
     <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/employees"} className="flex gap-2 p-2">
+      <Link
+        href={"/employees"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
         <Users className="w-6" />
         <span className={open ? "" : "hidden"}>Employees</span>
       </Link>
diff --git a/app/[locale]/(routes)/components/menu-items/Invoices.tsx b/app/[locale]/(routes)/components/menu-items/Invoices.tsx
index d793c73..f511821 100644
--- a/app/[locale]/(routes)/components/menu-items/Invoices.tsx
+++ b/app/[locale]/(routes)/components/menu-items/Invoices.tsx
@@ -1,15 +1,7 @@
-"use client";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { FileCheck, Lightbulb, ServerIcon, UserIcon } from "lucide-react";
+import { FileCheck } from "lucide-react";
 import Link from "next/link";
 
-import { useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import React from "react";
 
 type Props = {
@@ -17,9 +9,14 @@ type Props = {
 };
 
 const InvoicesModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("invoice");
   return (
     <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/invoice"} className="flex gap-2 p-2">
+      <Link
+        href={"/invoice"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
         <FileCheck className="w-6" />
         <span className={open ? "" : "hidden"}>Invoices</span>
       </Link>
diff --git a/app/[locale]/(routes)/components/menu-items/Projects.tsx b/app/[locale]/(routes)/components/menu-items/Projects.tsx
index c27a940..6379851 100644
--- a/app/[locale]/(routes)/components/menu-items/Projects.tsx
+++ b/app/[locale]/(routes)/components/menu-items/Projects.tsx
@@ -1,15 +1,7 @@
-"use client";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { ServerIcon, UserIcon } from "lucide-react";
+import { ServerIcon } from "lucide-react";
 import Link from "next/link";
 
-import { useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import React from "react";
 
 type Props = {
@@ -17,9 +9,14 @@ type Props = {
 };
 
 const ProjectModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("projects");
   return (
     <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/projects"} className="flex gap-2 p-2">
+      <Link
+        href={"/projects"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
         <ServerIcon className="w-6" />
         <span className={open ? "" : "hidden"}> Projects</span>
       </Link>
diff --git a/app/[locale]/(routes)/components/menu-items/Reports.tsx b/app/[locale]/(routes)/components/menu-items/Reports.tsx
index 6f02581..a1d26b6 100644
--- a/app/[locale]/(routes)/components/menu-items/Reports.tsx
+++ b/app/[locale]/(routes)/components/menu-items/Reports.tsx
@@ -1,21 +1,7 @@
-"use client";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import {
-  FileBarChart,
-  FileCheck,
-  Lightbulb,
-  ServerIcon,
-  UserIcon,
-} from "lucide-react";
+import { FileBarChart } from "lucide-react";
 import Link from "next/link";
 
-import { useRouter } from "next/navigation";
+import { usePathname } from "next/navigation";
 import React from "react";
 
 type Props = {
@@ -23,10 +9,15 @@ type Props = {
 };
 
 const ReportsModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("reports");
   return (
-    <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/reports"} className="flex gap-2 p-2">
-        <FileBarChart className="w-6" />
+    <div className={`flex flex-row items-center mx-auto p-2`}>
+      <Link
+        href={"/reports"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
+        <FileBarChart className={`w-6 `} />
         <span className={open ? "" : "hidden"}>Reports</span>
       </Link>
     </div>
diff --git a/app/[locale]/(routes)/components/menu-items/SecondBrain.tsx b/app/[locale]/(routes)/components/menu-items/SecondBrain.tsx
index e88b5d2..f5f40ae 100644
--- a/app/[locale]/(routes)/components/menu-items/SecondBrain.tsx
+++ b/app/[locale]/(routes)/components/menu-items/SecondBrain.tsx
@@ -9,7 +9,7 @@ import {
 import { Lightbulb, ServerIcon, UserIcon } from "lucide-react";
 import Link from "next/link";
 
-import { useRouter } from "next/navigation";
+import { usePathname, useRouter } from "next/navigation";
 import React from "react";
 
 type Props = {
@@ -17,9 +17,14 @@ type Props = {
 };
 
 const SecondBrainModuleMenu = ({ open }: Props) => {
+  const pathname = usePathname();
+  const isPath = pathname.includes("secondBrain");
   return (
     <div className="flex flex-row items-center mx-auto p-2">
-      <Link href={"/secondBrain"} className="flex gap-2 p-2">
+      <Link
+        href={"/secondBrain"}
+        className={`flex gap-2 p-2 ${isPath ? "text-muted-foreground" : null}`}
+      >
         <Lightbulb className="w-6" />
         <span className={open ? "" : "hidden"}>Second brain</span>
       </Link>
diff --git a/app/[locale]/(routes)/components/ui/MenuItem.tsx b/app/[locale]/(routes)/components/ui/MenuItem.tsx
deleted file mode 100644
index 8f7293f..0000000
--- a/app/[locale]/(routes)/components/ui/MenuItem.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Inbox, WrenchIcon } from "lucide-react";
-import {
-  ClipboardEditIcon,
-  FileBarChart,
-  FileCheckIcon,
-  FileTextIcon,
-  GraduationCapIcon,
-  Home,
-  LightbulbIcon,
-  Server,
-  Users,
-  UsersIcon,
-} from "lucide-react";
-import Link from "next/link";
-
-function MenuItem({ open, icon, route, menuItem }: any) {
-  let showIcon;
-  switch (icon) {
-    case "home":
-      showIcon = <Home className="w-6" />;
-      break;
-    case "userGroup":
-      showIcon = <Users className="w-6" />;
-      break;
-    case "user":
-      showIcon = <UsersIcon className="w-6" />;
-      break;
-    case "server":
-      showIcon = <Server className="w-6" />;
-      break;
-    case "document":
-      showIcon = <FileTextIcon className="w-6" />;
-      break;
-    case "documentChart":
-      showIcon = <FileBarChart className="w-6" />;
-      break;
-    case "lightBulb":
-      showIcon = <LightbulbIcon className="w-6" />;
-      break;
-    case "documentCheck":
-      showIcon = <FileCheckIcon className="w-6" />;
-      break;
-    case "clipBoardDocument":
-      showIcon = <ClipboardEditIcon className="w-6" />;
-      break;
-    case "academicCap":
-      showIcon = <GraduationCapIcon className="w-6" />;
-      break;
-    case "wrenchScrewdriver":
-      showIcon = <WrenchIcon className="w-6" />;
-      break;
-    case "inboxIcon":
-      showIcon = <Inbox className="w-6" />;
-      break;
-    default:
-      <UsersIcon className="w-8" />;
-  }
-
-  return (
-    <Link
-      href={route}
-      className=" w-full hover:bg-slate-700 hover:text-gray-200 hover:transition hover:duration-150 rounded-md mx-auto"
-    >
-      <div className="flex flex-row items-center mx-auto p-2">
-        <div className="p-2">{showIcon}</div>
-        {open && <div>{menuItem}</div>}
-      </div>
-    </Link>
-  );
-}
-
-export default MenuItem;
diff --git a/app/[locale]/(routes)/devmode/page.tsx b/app/[locale]/(routes)/devmode/page.tsx
index 7ad2e8f..be78373 100644
--- a/app/[locale]/(routes)/devmode/page.tsx
+++ b/app/[locale]/(routes)/devmode/page.tsx
@@ -1,9 +1,13 @@
+/*
+  This route is used to test the different components of the app.
+*/
+
 import MultiSelect from "@/shadcn-examples/MultiSelect";
 import React from "react";
 
 const DevModePage = () => {
   return (
-    <div>
+    <div className="space-y-5">
       <MultiSelect />
     </div>
   );
diff --git a/app/[locale]/(routes)/projects/dialogs/NewProject.tsx b/app/[locale]/(routes)/projects/dialogs/NewProject.tsx
index b3e0d04..71a3d3b 100644
--- a/app/[locale]/(routes)/projects/dialogs/NewProject.tsx
+++ b/app/[locale]/(routes)/projects/dialogs/NewProject.tsx
@@ -37,9 +37,7 @@ import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 
-type Props = {};
-
-const NewProjectDialog = (props: Props) => {
+const NewProjectDialog = () => {
   const [open, setOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -94,7 +92,7 @@ const NewProjectDialog = (props: Props) => {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger>
+      <DialogTrigger asChild>
         <Button className="px-2">New project</Button>
       </DialogTrigger>
       <DialogContent className="">
diff --git a/app/[locale]/(routes)/projects/dialogs/NewTask.tsx b/app/[locale]/(routes)/projects/dialogs/NewTask.tsx
index 05d13e0..eece32b 100644
--- a/app/[locale]/(routes)/projects/dialogs/NewTask.tsx
+++ b/app/[locale]/(routes)/projects/dialogs/NewTask.tsx
@@ -115,7 +115,7 @@ const NewTaskDialog = ({ users, boards }: Props) => {
 
   return (
     <Dialog open={open} onOpenChange={setOpen}>
-      <DialogTrigger>
+      <DialogTrigger asChild>
         <Button className="px-2">Create task</Button>
       </DialogTrigger>
       <DialogContent className="">