create project

src/config/Pages.ts

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

src/langs/fa.json

@@ -976,6 +976,17 @@
     "choose_color": "انتخاب رنگ دلخواه",
     "users": "کاربران",
     "select_user": "انتخاب کاربر",
-    "no_users_added": "هنوز کاربری اضافه نکردی"
+    "no_users_added": "هنوز کاربری اضافه نکردی",
+    "new_project": "افزودن پروژه",
+    "submit_project": "ثبت پروژه",
+    "project_info": "اطلاعات پروژه",
+    "project_name": "نام پروژه",
+    "project_start_date": "تاریخ شروع پروژه",
+    "employer_name": "نام کارفرما",
+    "project_status": "وضعیت فضای کار",
+    "background": "پس زمینه",
+    "background_image": "تصویر پس زمینه",
+    "upload_background": "تصویر مورد نظر را دراپ کنید",
+    "select_date": "انتخاب تاریخ"
   }
 }

src/pages/taskmanager/project/Create.tsx

@@ -0,0 +1,52 @@
+import { TickCircle } from "iconsax-react";
+import { useTranslation } from "react-i18next";
+import Button from "../../../components/Button";
+import DatePickerComponent from "../../../components/DatePicker";
+import Input from "../../../components/Input";
+import Textarea from "../../../components/Textarea";
+import CreateProjectSidebar from "./components/CreateProjectSidebar";
+
+const CreateProject = () => {
+  const { t } = useTranslation("global");
+
+  return (
+    <div className="w-full mt-4">
+      <div className="flex w-full justify-between items-center">
+        <div>{t("taskmanager.new_project")}</div>
+        <div>
+          <Button className="px-5" isLoading={false}>
+            <div className="flex gap-2">
+              <TickCircle className="size-5" color="#fff" />
+              <div>{t("taskmanager.submit_project")}</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">{t("taskmanager.project_info")}</div>
+
+            <div className="mt-8">
+              <Input label={t("taskmanager.project_name")} />
+            </div>
+
+            <div className="mt-8 rowTwoInput">
+              <DatePickerComponent label={t("taskmanager.project_start_date")} placeholder={t("taskmanager.select_date")} onChange={() => undefined} />
+              <Input label={t("taskmanager.employer_name")} />
+            </div>
+
+            <div className="mt-8">
+              <Textarea label={t("description")} />
+            </div>
+          </div>
+        </div>
+
+        <CreateProjectSidebar />
+      </div>
+    </div>
+  );
+};
+
+export default CreateProject;

src/pages/taskmanager/project/components/CreateProjectSidebar.tsx

@@ -0,0 +1,177 @@
+import { FC, useRef, useState } from "react";
+import { CloseCircle, Gallery } from "iconsax-react";
+import { useTranslation } from "react-i18next";
+import Select from "../../../../components/Select";
+import SwitchComponent from "../../../../components/Switch";
+import { useGetUsers } from "../../../users/hooks/useUserData";
+import { UserItemType } from "../../../users/types/UserTypes";
+import WorkspaceColorPicker from "../../workspace/components/WorkspaceColorPicker";
+
+type SelectedUser = {
+  id: string;
+  name: string;
+};
+
+const BACKGROUND_PRESETS = [
+  "linear-gradient(45deg, #6a11cb, #2575fc)",
+  "linear-gradient(45deg, #ff00cc, #333399)",
+  "linear-gradient(45deg, #ff0000, #ff8c00)",
+  "linear-gradient(45deg, #3f2b96, #a8c0ff)",
+  "linear-gradient(45deg, #7f7fd5, #91eae4)",
+  "linear-gradient(45deg, #2c3e50, #4ca1af)",
+  "linear-gradient(45deg, #1cb5e0, #000851)",
+  "linear-gradient(45deg, #0052d4, #4364f7)",
+] as const;
+
+const CreateProjectSidebar: 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 [selectedBackground, setSelectedBackground] = useState<string>(
+    BACKGROUND_PRESETS[0],
+  );
+  const [backgroundImage, setBackgroundImage] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  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));
+  };
+
+  const handleBackgroundImageChange = (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => {
+    const file = event.target.files?.[0] ?? null;
+    setBackgroundImage(file);
+  };
+
+  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.project_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">
+        <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 className="mt-8">
+        <div className="text-sm mb-3">{t("taskmanager.background")}</div>
+        <div className="grid grid-cols-4 gap-2">
+          {BACKGROUND_PRESETS.map((background) => (
+            <button
+              key={background}
+              type="button"
+              className="h-8 rounded-md border"
+              style={{
+                background,
+                borderColor:
+                  selectedBackground === background ? "#000" : "#E2E8F0",
+              }}
+              onClick={() => setSelectedBackground(background)}
+            />
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-8">
+        <div className="text-sm mb-3">{t("taskmanager.choose_color")}</div>
+        <WorkspaceColorPicker
+          selectedColor={selectedColor}
+          onChange={setSelectedColor}
+        />
+      </div>
+
+      <div className="mt-8">
+        <div className="text-sm mb-3">{t("taskmanager.background_image")}</div>
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          className="w-full min-h-[112px] border border-dashed border-border rounded-xl flex flex-col items-center justify-center text-description px-4"
+        >
+          <Gallery size={26} color="#8C90A3" />
+          <div className="mt-2 text-xs text-center">
+            {backgroundImage
+              ? backgroundImage.name
+              : t("taskmanager.upload_background")}
+          </div>
+        </button>
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          className="hidden"
+          onChange={handleBackgroundImageChange}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default CreateProjectSidebar;

src/router/Main.tsx

@@ -78,6 +78,7 @@ import CreatePlan from "../pages/support/Create";
 import SupportList from "../pages/support/List";
 import PlanUsers from "../pages/support/PlanUsers";
 import UpdateSupport from "../pages/support/Update";
+import CreateProject from "../pages/taskmanager/project/Create.tsx";
 import Workspace from "../pages/taskmanager/workspace.tsx";
 import CreateWorkspace from "../pages/taskmanager/workspace/Create.tsx";
 import TicketCategory from "../pages/ticket/Category";
@@ -209,6 +210,7 @@ const MainRouter: FC = () => {
 
               <Route path={Pages.taskmanager.workspace + ":slug"} element={<Workspace />} />
               <Route path={Pages.taskmanager.createWorkspace} element={<CreateWorkspace />} />
+              <Route path={Pages.taskmanager.createProject} element={<CreateProject />} />
             </Routes>
           </div>
           <div className="h-20 shrink-0 xl:hidden" />