split tasks and user

src/config/SideBarSubMenu.ts

@@ -3,6 +3,7 @@ export const SideBarItemHasSubMenu = [
   "customers",
   "representatives",
   "users",
+  "taskmanager",
   "content",
   "financial",
   "support",
@@ -44,7 +45,7 @@ export const getSubMenuNameFromPath = (pathname: string): string => {
   }
 
   if (pathname.startsWith("/workspace") || pathname.startsWith("/project") || pathname.startsWith("/taskmanager")) {
-    return "users";
+    return "taskmanager";
   }
 
   const segment = pathname.split("/")[1] ?? "";

src/helpers/permissions.ts

@@ -159,7 +159,7 @@ export const CONTENT_PERMISSION_RESOURCES = ["blogs", "learnings", "advertisemen
 export const FINANCIAL_PERMISSION_RESOURCES = ["payments", "invoices", "transactions", "discounts", "bank_accounts"] as const;
 export const SUPPORT_PERMISSION_RESOURCES = ["support_plan", "tickets"] as const;
 export const TASK_MANAGER_PERMISSION_RESOURCES = ["workspace", "project", "task", "task_phase"] as const;
-export const USERS_SIDEBAR_PERMISSION_RESOURCES = ["admins", ...TASK_MANAGER_PERMISSION_RESOURCES] as const;
+export const USERS_SIDEBAR_PERMISSION_RESOURCES = ["admins"] as const;
 export const PRODUCT_PERMISSION_RESOURCES = ["dmenu", "dkala", "dpage", "dmail"] as const;
 
 type PermissionEntry = { name: string };

src/shared/SideBar.tsx

@@ -9,6 +9,7 @@ import {
   Profile,
   Profile2User,
   Setting2,
+  TickSquare,
   UserOctagon,
   UserTick,
 } from "iconsax-react";
@@ -40,6 +41,7 @@ import ProductsSubMenu from "./components/ProductsSubMenu";
 import ResellerSubMenu from "./components/ResellerSubMenu";
 import ServicesSubMenu from "./components/ServicesSubMenu";
 import SupportSubMenu from "./components/SupportSubMenu";
+import TaskManagerSubMenu from "./components/TaskManagerSubMenu";
 import UsersSubMenu from "./components/UsersSubMenu";
 import SideBarItem from "./SideBarItem";
 import { useSharedStore } from "./store/sharedStore";
@@ -57,6 +59,7 @@ const SideBar: FC = () => {
   const permissions = adminPermissions?.data?.permissions;
 
   const hasProductPermission = hasAnyPermission(permissions, PRODUCT_PERMISSION_RESOURCES);
+  const hasTaskManagerPermission = hasAnyPermission(permissions, TASK_MANAGER_PERMISSION_RESOURCES);
 
   const productsDefaultLink = (() => {
     const permissionNames = permissions?.map((p: { name: string }) => p.name) ?? [];
@@ -67,11 +70,7 @@ const SideBar: FC = () => {
     return Pages.dashboard;
   })();
 
-  const usersDefaultLink = (() => {
+  const usersDefaultLink = Pages.users.list;
-    if (hasPermission(permissions, "admins")) return Pages.users.list;
-    if (hasAnyPermission(permissions, TASK_MANAGER_PERMISSION_RESOURCES)) return Pages.taskmanager.workspaceList;
-    return Pages.users.list;
-  })();
 
   useEffect(() => {
     const groupName = getSubMenuNameFromPath(location.pathname);
@@ -210,6 +209,23 @@ const SideBar: FC = () => {
               activeNames={USERS_SIDEBAR_PERMISSION_RESOURCES}
             />
 
+            {hasTaskManagerPermission && (
+              <SideBarItem
+                icon={
+                  <TickSquare
+                    variant={isGroupActive("taskmanager") ? "Bold" : "Outline"}
+                    color={isGroupActive("taskmanager") ? "black" : "#8C90A3"}
+                    size={iconSizeSideBar}
+                  />
+                }
+                title={t("sidebar.taskmanager")}
+                isActive={isGroupActive("taskmanager")}
+                link={Pages.taskmanager.workspaceList}
+                name="taskmanager"
+                activeNames={TASK_MANAGER_PERMISSION_RESOURCES}
+              />
+            )}
+
             <SideBarItem
               icon={
                 <DocumentLike
@@ -336,6 +352,8 @@ const SideBar: FC = () => {
             <ResellerSubMenu />
           ) : subMenuName === "users" ? (
             <UsersSubMenu />
+          ) : subMenuName === "taskmanager" ? (
+            <TaskManagerSubMenu />
           ) : subMenuName === "content" ? (
             <ContentSubMenu />
           ) : subMenuName === "financial" ? (

src/shared/components/TaskManagerSubMenu.tsx

@@ -0,0 +1,45 @@
+import { TickSquare } from "iconsax-react";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation } from "react-router-dom";
+import { Pages } from "../../config/Pages";
+import { TASK_MANAGER_PERMISSION_RESOURCES } from "../../helpers/permissions";
+import SubMenuItem from "./SubMenuItem";
+
+const TaskManagerSubMenu: FC = () => {
+  const location = useLocation();
+  const { t } = useTranslation("global");
+
+  const isTaskManagerActive =
+    location.pathname.startsWith(Pages.taskmanager.workspace) ||
+    location.pathname === Pages.taskmanager.workspaceList ||
+    location.pathname.startsWith(Pages.taskmanager.updateWorkspace) ||
+    location.pathname === Pages.taskmanager.createWorkspace ||
+    location.pathname === Pages.taskmanager.createProject ||
+    location.pathname.startsWith(Pages.taskmanager.updateProject) ||
+    location.pathname.startsWith(Pages.taskmanager.projectList);
+
+  return (
+    <div className="py-12">
+      <div className="flex gap-3 items-center border-b pb-10 px-6">
+        <TickSquare
+          size={24}
+          color="#000"
+          variant="Bold"
+        />
+        <div className="text-xs">{t("sidebar.taskmanager")}</div>
+      </div>
+
+      <div className="flex flex-col mt-10 gap-4">
+        <SubMenuItem
+          title={t("submenu.taskmanager_workspace_list")}
+          isActive={isTaskManagerActive}
+          link={Pages.taskmanager.workspaceList}
+          activeNames={TASK_MANAGER_PERMISSION_RESOURCES}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default TaskManagerSubMenu;

src/shared/components/UsersSubMenu.tsx

@@ -3,7 +3,6 @@ import { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { Pages } from "../../config/Pages";
-import { TASK_MANAGER_PERMISSION_RESOURCES } from "../../helpers/permissions";
 import SubMenuItem from "./SubMenuItem";
 
 const UsersSubMenu: FC = () => {
@@ -12,15 +11,6 @@ const UsersSubMenu: FC = () => {
 
   const isActive = (name: string) => location.pathname.includes(name);
 
-  const isTaskManagerActive =
-    location.pathname.startsWith(Pages.taskmanager.workspace) ||
-    location.pathname === Pages.taskmanager.workspaceList ||
-    location.pathname.startsWith(Pages.taskmanager.updateWorkspace) ||
-    location.pathname === Pages.taskmanager.createWorkspace ||
-    location.pathname === Pages.taskmanager.createProject ||
-    location.pathname.startsWith(Pages.taskmanager.updateProject) ||
-    location.pathname.startsWith(Pages.taskmanager.projectList);
-
   return (
     <div className="py-12">
       <div className="flex gap-3 items-center border-b pb-10 px-6">
@@ -51,12 +41,6 @@ const UsersSubMenu: FC = () => {
           link={Pages.users.groupList}
           activeName="admins"
         />
-        <SubMenuItem
-          title={t("sidebar.taskmanager")}
-          isActive={isTaskManagerActive}
-          link={Pages.taskmanager.workspaceList}
-          activeNames={TASK_MANAGER_PERMISSION_RESOURCES}
-        />
       </div>
     </div>
   );