create workspace

src/config/Pages.ts

@@ -168,5 +168,6 @@ export const Pages = {
   },
   taskmanager: {
     workspace: "/taskmanager/workspace/",
+    createWorkspace: "/workspace/create",
   },
 };

src/langs/fa.json

@@ -965,5 +965,17 @@
     "days": "روز",
     "id": "شناسه"
   },
-  "cancel": "لغو"
+  "cancel": "لغو",
+  "taskmanager": {
+    "new_workspace": "ساخت فضای کاری جدید",
+    "submit_workspace": "ثبت فضای کاری",
+    "workspacename": "نام",
+    "workspacetype": "نوع",
+    "workspace_description": "توضیحات",
+    "workspace_status": "وضعیت فضای کار",
+    "choose_color": "انتخاب رنگ دلخواه",
+    "users": "کاربران",
+    "select_user": "انتخاب کاربر",
+    "no_users_added": "هنوز کاربری اضافه نکردی"
+  }
 }

src/pages/taskmanager/workspace/Create.tsx

@@ -0,0 +1,48 @@
+import { TickCircle } from "iconsax-react";
+import { useTranslation } from "react-i18next";
+import Button from "../../../components/Button";
+import Input from "../../../components/Input";
+import Select from "../../../components/Select";
+import Textarea from "../../../components/Textarea";
+import CreateWorkspaceSidebar from "./components/CreateWorkspaceSidebar";
+
+const CreateWorkspace = () => {
+  const { t } = useTranslation("global");
+
+  return (
+    <div className="w-full mt-4">
+      <div className="flex w-full justify-between items-center">
+        <div>{t("taskmanager.new_workspace")}</div>
+        <div>
+          <Button className="px-5" isLoading={false}>
+            <div className="flex gap-2">
+              <TickCircle className="size-5" color="#fff" />
+              <div>{t("taskmanager.submit_workspace")}</div>
+            </div>
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex gap-6">
+        <div className="flex-1">
+          <div className="flex-1 mt-10 bg-white py-8 xl:px-10 px-4 rounded-3xl">
+            <div className="text-sm font-bold">اطلاعات</div>
+
+            <div className="mt-8 rowTwoInput">
+              <Input label={t("taskmanager.workspacename")} />
+
+              <Select label={t("taskmanager.workspacetype")} items={[]} />
+            </div>
+            <div className="mt-8">
+              <Textarea label={t("taskmanager.workspace_description")} />
+            </div>
+          </div>
+        </div>
+
+        <CreateWorkspaceSidebar />
+      </div>
+    </div>
+  );
+};
+
+export default CreateWorkspace;

src/pages/taskmanager/workspace/components/CreateWorkspaceSidebar.tsx

@@ -0,0 +1,114 @@
+import { FC, useState } from "react";
+import { CloseCircle } from "iconsax-react";
+import { useTranslation } from "react-i18next";
+import SwitchComponent from "../../../../components/Switch";
+import Select from "../../../../components/Select";
+import { useGetUsers } from "../../../users/hooks/useUserData";
+import { UserItemType } from "../../../users/types/UserTypes";
+import WorkspaceColorPicker from "./WorkspaceColorPicker";
+
+type SelectedUser = {
+  id: string;
+  name: string;
+};
+
+const CreateWorkspaceSidebar: FC = () => {
+  const { t } = useTranslation("global");
+  const getUsers = useGetUsers("");
+
+  const [isActive, setIsActive] = useState(true);
+  const [selectedColor, setSelectedColor] = useState("#A8E6CF");
+  const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
+  const [userSelectValue, setUserSelectValue] = useState("");
+
+  const userItems =
+    getUsers.data?.data?.users
+      ?.filter(
+        (user: UserItemType) =>
+          !selectedUsers.some((selected) => selected.id === user.id),
+      )
+      .map((user: UserItemType) => ({
+        label: `${user.firstName} ${user.lastName}`,
+        value: user.id,
+      })) ?? [];
+
+  const handleUserSelect = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value;
+    if (!value) return;
+
+    const user = getUsers.data?.data?.users?.find(
+      (item: UserItemType) => item.id === value,
+    );
+
+    if (user) {
+      setSelectedUsers((prev) => [
+        ...prev,
+        { id: user.id, name: `${user.firstName} ${user.lastName}` },
+      ]);
+    }
+
+    setUserSelectValue("");
+  };
+
+  const handleRemoveUser = (id: string) => {
+    setSelectedUsers((prev) => prev.filter((user) => user.id !== id));
+  };
+
+  return (
+    <div className="bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl">
+      <div className="text-sm flex items-center justify-between">
+        <div>{t("taskmanager.workspace_status")}</div>
+        <div className="flex gap-2 text-xs items-center text-description">
+          <div>{isActive ? t("slider.active") : t("slider.inactive")}</div>
+          <SwitchComponent active={isActive} onChange={setIsActive} />
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <div className="text-sm">{t("taskmanager.choose_color")}</div>
+        <div className="mt-3">
+          <WorkspaceColorPicker
+            selectedColor={selectedColor}
+            onChange={setSelectedColor}
+          />
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <Select
+          label={t("taskmanager.users")}
+          placeholder={t("taskmanager.select_user")}
+          items={userItems}
+          value={userSelectValue}
+          onChange={handleUserSelect}
+          className="border"
+        />
+
+        <div className="mt-3 border border-dashed border-border rounded-xl p-4 flex gap-2 flex-wrap min-h-[52px]">
+          {selectedUsers.length === 0 ? (
+            <div className="text-description w-full text-center">
+              {t("taskmanager.no_users_added")}
+            </div>
+          ) : (
+            selectedUsers.map((user) => (
+            <div
+              key={user.id}
+              className="bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg"
+            >
+              <div>{user.name}</div>
+              <CloseCircle
+                variant="Bold"
+                className="size-4 cursor-pointer"
+                color="red"
+                onClick={() => handleRemoveUser(user.id)}
+              />
+            </div>
+            ))
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateWorkspaceSidebar;

src/pages/taskmanager/workspace/components/WorkspaceColorPicker.tsx

@@ -0,0 +1,72 @@
+import { FC, useRef } from "react";
+import ColorsImage from "../../../../assets/images/colors.png";
+
+const WORKSPACE_COLORS = [
+  "#FF6B9D",
+  "#F5A623",
+  "#6B7B7E",
+  "#1A1A1A",
+  "#C94C4C",
+  "#F5F5FF",
+  "#A8E6CF",
+] as const;
+
+type Props = {
+  selectedColor: string;
+  onChange: (color: string) => void;
+};
+
+const WorkspaceColorPicker: FC<Props> = ({ selectedColor, onChange }) => {
+  const colorInputRef = useRef<HTMLInputElement>(null);
+  const isCustomColor = !WORKSPACE_COLORS.includes(
+    selectedColor as (typeof WORKSPACE_COLORS)[number],
+  );
+
+  return (
+    <div className="flex gap-2.5 items-center flex-wrap">
+      <button
+        type="button"
+        onClick={() => colorInputRef.current?.click()}
+        className="size-8 rounded-full shrink-0 overflow-hidden"
+        style={{
+          boxShadow: isCustomColor ? "inset 0 0 0 2px #000" : undefined,
+        }}
+      >
+        <img
+          src={ColorsImage}
+          alt=""
+          className="size-full object-cover"
+          draggable={false}
+        />
+      </button>
+
+      {WORKSPACE_COLORS.map((color) => (
+        <button
+          key={color}
+          type="button"
+          onClick={() => onChange(color)}
+          className="size-8 rounded-xl shrink-0"
+          style={{
+            backgroundColor: color,
+            boxShadow:
+              selectedColor === color
+                ? "inset 0 0 0 2px #000"
+                : color === "#F5F5FF"
+                  ? "inset 0 0 0 1px rgba(0,0,0,0.12)"
+                  : undefined,
+          }}
+        />
+      ))}
+
+      <input
+        ref={colorInputRef}
+        type="color"
+        value={isCustomColor ? selectedColor : "#4A90D9"}
+        className="hidden"
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  );
+};
+
+export default WorkspaceColorPicker;

src/router/Main.tsx

@@ -79,6 +79,7 @@ import SupportList from "../pages/support/List";
 import PlanUsers from "../pages/support/PlanUsers";
 import UpdateSupport from "../pages/support/Update";
 import Workspace from "../pages/taskmanager/workspace.tsx";
+import CreateWorkspace from "../pages/taskmanager/workspace/Create.tsx";
 import TicketCategory from "../pages/ticket/Category";
 import CreateTicket from "../pages/ticket/CreateTicket";
 import TicketDetail from "../pages/ticket/Detail";
@@ -106,13 +107,7 @@ const MainRouter: FC = () => {
     <div className="p-4 overflow-hidden">
       {!isWorkspace && <SideBar />}
       <Header />
-      <div
-        className={clx(
-          "flex-1 mt-[68px] xl:mt-[81px]",
-          !isWorkspace && "xl:ms-[269px]",
-          !isWorkspace && hasSubMenu && "xl:ms-[305px]",
-        )}
-      >
+      <div className={clx("flex-1 mt-[68px] xl:mt-[81px]", !isWorkspace && "xl:ms-[269px]", !isWorkspace && hasSubMenu && "xl:ms-[305px]")}>
         <div className={clx(`overflow-auto w-[${window.innerWidth}] h-[calc(100vh-113px)] flex flex-col`)}>
           <div className="flex-1 min-h-0">
             <Routes>
@@ -213,6 +208,7 @@ const MainRouter: FC = () => {
               <Route path={Pages.reseller.withdraw} element={<Withdraw />} />
 
               <Route path={Pages.taskmanager.workspace + ":slug"} element={<Workspace />} />
+              <Route path={Pages.taskmanager.createWorkspace} element={<CreateWorkspace />} />
             </Routes>
           </div>
           <div className="h-20 shrink-0 xl:hidden" />