list of workspace

src/config/Pages.ts

@@ -169,7 +169,9 @@ export const Pages = {
   },
   taskmanager: {
     workspace: "/taskmanager/workspace/",
+    workspaceList: "/workspace/list",
     createWorkspace: "/workspace/create",
+    updateWorkspace: "/workspace/update/",
     createProject: "/project/create",
     projectList: "/project/list",
   },

src/langs/fa.json

@@ -145,6 +145,7 @@
     "access_logs_stats": "آمار لاگ‌ها",
     "access_logs_errors": "لاگ‌های خطا",
     "taskmanager_workspace": "فضای کاری",
+    "taskmanager_workspace_list": "لیست فضاهای کاری",
     "taskmanager_create_workspace": "ساخت فضای کاری جدید",
     "taskmanager_project_list": "لیست پروژه‌ها",
     "taskmanager_create_project": "افزودن پروژه"
@@ -972,6 +973,7 @@
   },
   "cancel": "لغو",
   "taskmanager": {
+    "workspace_list": "لیست فضاهای کاری",
     "new_workspace": "ساخت فضای کاری جدید",
     "submit_workspace": "ثبت فضای کاری",
     "workspacename": "نام",

src/pages/taskmanager/workspace/Create.tsx

@@ -29,7 +29,7 @@ const CreateWorkspace: FC = () => {
     createWorkspace.mutate(values, {
       onSuccess: () => {
         toast.success(t("success"));
-        navigate(Pages.taskmanager.workspace + "dpage");
+        navigate(Pages.taskmanager.workspaceList);
       },
       onError: (error: ErrorType) => {
         toast.error(error.response?.data?.error.message[0]);

src/pages/taskmanager/workspace/List.tsx

@@ -0,0 +1,86 @@
+import { FC } from "react";
+import { Add, Edit } from "iconsax-react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import Button from "../../../components/Button";
+import PageLoading from "../../../components/PageLoading";
+import Td from "../../../components/Td";
+import { Pages } from "../../../config/Pages";
+import { useGetWorkspaces } from "./hooks/useWorkspaceData";
+import { WorkspaceItemType } from "./types/WorkspaceTypes";
+
+const WorkspaceList: FC = () => {
+  const { t } = useTranslation("global");
+  const getWorkspaces = useGetWorkspaces();
+
+  const workspaces: WorkspaceItemType[] =
+    getWorkspaces.data?.data?.workspaces ??
+    getWorkspaces.data?.data ??
+    [];
+
+  return (
+    <div className="mt-4">
+      <div className="flex w-full justify-between items-center">
+        <div>{t("taskmanager.workspace_list")}</div>
+        <Link to={Pages.taskmanager.createWorkspace}>
+          <Button className="px-5">
+            <div className="flex gap-2">
+              <Add className="size-5" color="#fff" />
+              <div>{t("taskmanager.new_workspace")}</div>
+            </div>
+          </Button>
+        </Link>
+      </div>
+
+      {getWorkspaces.isPending ? (
+        <PageLoading />
+      ) : (
+        <div className="relative overflow-x-auto rounded-3xl mt-9 w-full">
+          <table className="w-full text-sm">
+            <thead className="thead">
+              <tr>
+                <Td text={t("taskmanager.workspacename")} />
+                <Td text={t("taskmanager.workspace_description")} />
+                <Td text={t("taskmanager.workspace_status")} />
+                <Td text={t("edit")} />
+              </tr>
+            </thead>
+            <tbody>
+              {workspaces.map((item) => (
+                <tr key={item.id} className="tr">
+                  <Td text="">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className="size-4 rounded-full shrink-0"
+                        style={{ backgroundColor: item.color }}
+                      />
+                      <Link
+                        to={Pages.taskmanager.workspace + item.id}
+                        className="text-[#0047FF] hover:opacity-70 transition-opacity"
+                      >
+                        {item.name}
+                      </Link>
+                    </div>
+                  </Td>
+                  <Td text={item.description ?? ""} />
+                  <Td
+                    text={
+                      item.isActive ? t("slider.active") : t("slider.inactive")
+                    }
+                  />
+                  <Td text="">
+                    <Link to={Pages.taskmanager.updateWorkspace + item.id}>
+                      <Edit size={20} color="#8C90A3" />
+                    </Link>
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default WorkspaceList;

src/pages/taskmanager/workspace/hooks/useWorkspaceData.ts

@@ -1,7 +1,14 @@
-import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import * as api from "../service/WorkspaceService";
 import { CreateWorkspaceType } from "../types/WorkspaceTypes";
 
+export const useGetWorkspaces = () => {
+  return useQuery({
+    queryKey: ["workspaces"],
+    queryFn: api.getWorkspacesByUser,
+  });
+};
+
 export const useCreateWorkspace = () => {
   const queryClient = useQueryClient();
 

src/pages/taskmanager/workspace/service/WorkspaceService.ts

@@ -1,6 +1,11 @@
 import axios from "../../../../config/axios";
 import { CreateWorkspaceType } from "../types/WorkspaceTypes";
 
+export const getWorkspacesByUser = async () => {
+  const { data } = await axios.get(`/task-manager/workspaces/byuser`);
+  return data;
+};
+
 export const createWorkspace = async (params: CreateWorkspaceType) => {
   const { data } = await axios.post(`/task-manager/workspaces`, params);
   return data;

src/pages/taskmanager/workspace/types/WorkspaceTypes.ts

@@ -5,3 +5,13 @@ export type CreateWorkspaceType = {
   isActive: boolean;
   userIds: string[];
 };
+
+export type WorkspaceItemType = {
+  id: string;
+  name: string;
+  description?: string;
+  color: string;
+  isActive: boolean;
+};
+
+export type UpdateWorkspaceType = CreateWorkspaceType;

src/router/Main.tsx

@@ -82,6 +82,7 @@ import CreateProject from "../pages/taskmanager/project/Create.tsx";
 import ProjectList from "../pages/taskmanager/project/List.tsx";
 import Workspace from "../pages/taskmanager/workspace.tsx";
 import CreateWorkspace from "../pages/taskmanager/workspace/Create.tsx";
+import WorkspaceList from "../pages/taskmanager/workspace/List.tsx";
 import TicketCategory from "../pages/ticket/Category";
 import CreateTicket from "../pages/ticket/CreateTicket";
 import TicketDetail from "../pages/ticket/Detail";
@@ -217,6 +218,7 @@ const MainRouter: FC = () => {
               <Route path={Pages.reseller.withdraw} element={<Withdraw />} />
 
               <Route path={Pages.taskmanager.workspace + ":slug"} element={<Workspace />} />
+              <Route path={Pages.taskmanager.workspaceList} element={<WorkspaceList />} />
               <Route path={Pages.taskmanager.createWorkspace} element={<CreateWorkspace />} />
               <Route path={Pages.taskmanager.createProject} element={<CreateProject />} />
               <Route path={Pages.taskmanager.projectList} element={<ProjectList />} />

src/shared/SideBar.tsx

@@ -73,6 +73,8 @@ const SideBar: FC = () => {
     const split = location.pathname.split("/");
     const isTaskManagerRoute =
       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 === Pages.taskmanager.projectList;
@@ -473,14 +475,14 @@ const SideBar: FC = () => {
             <SideBarItem
               icon={
                 <Task
-                  variant={location.pathname.startsWith(Pages.taskmanager.workspace) ? "Bold" : "Outline"}
+                  variant={location.pathname === Pages.taskmanager.workspaceList ? "Bold" : "Outline"}
-                  color={location.pathname.startsWith(Pages.taskmanager.workspace) ? "black" : "#8C90A3"}
+                  color={location.pathname === Pages.taskmanager.workspaceList ? "black" : "#8C90A3"}
                   size={iconSizeSideBar}
                 />
               }
-              title={t("submenu.taskmanager_workspace")}
+              title={t("submenu.taskmanager_workspace_list")}
-              isActive={location.pathname.startsWith(Pages.taskmanager.workspace)}
+              isActive={location.pathname === Pages.taskmanager.workspaceList}
-              link={Pages.taskmanager.workspace + "dpage"}
+              link={Pages.taskmanager.workspaceList}
               name="taskmanager"
               activeName=""
             />

src/shared/components/TaskManagerSubMenu.tsx

@@ -1,4 +1,4 @@
-import { Add, Category, Task } from "iconsax-react";
+import { Task } from "iconsax-react";
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
@@ -9,7 +9,10 @@ const TaskManagerSubMenu: FC = () => {
   const { t } = useTranslation("global");
   const location = useLocation();
 
-  const isWorkspaceActive = location.pathname.startsWith(Pages.taskmanager.workspace);
+  const isWorkspaceListActive = location.pathname === Pages.taskmanager.workspaceList;
+  const isKanbanActive =
+    location.pathname.startsWith(Pages.taskmanager.workspace) &&
+    !isWorkspaceListActive;
   const isCreateWorkspaceActive = location.pathname === Pages.taskmanager.createWorkspace;
   const isProjectListActive = location.pathname === Pages.taskmanager.projectList;
   const isCreateProjectActive = location.pathname === Pages.taskmanager.createProject;
@@ -22,9 +25,14 @@ const TaskManagerSubMenu: FC = () => {
       </div>
 
       <div className="flex flex-col mt-10 gap-4">
+        <SubMenuItem
+          title={t("submenu.taskmanager_workspace_list")}
+          isActive={isWorkspaceListActive}
+          link={Pages.taskmanager.workspaceList}
+        />
         <SubMenuItem
           title={t("submenu.taskmanager_workspace")}
-          isActive={isWorkspaceActive}
+          isActive={isKanbanActive}
           link={Pages.taskmanager.workspace + "dpage"}
         />
         <SubMenuItem