list of workspace

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;