setting project in workspacce a project

src/langs/fa.json

@@ -1013,6 +1013,7 @@
     "project_start_date": "تاریخ شروع پروژه",
     "employer_name": "نام کارفرما",
     "project_status": "وضعیت فضای کار",
+    "project_settings": "تنظیمات پروژه",
     "background": "پس زمینه",
     "background_image": "تصویر پس زمینه",
     "upload_background": "تصویر مورد نظر را دراپ کنید",

src/pages/taskmanager/components/HeaderWorkspace.tsx

@@ -4,9 +4,10 @@ import { useNavigate } from "react-router-dom";
 
 type HeaderWorkspaceProps = {
   projectName: string;
+  onSettingsClick?: () => void;
 };
 
-const HeaderWorkspace: FC<HeaderWorkspaceProps> = ({ projectName }) => {
+const HeaderWorkspace: FC<HeaderWorkspaceProps> = ({ projectName, onSettingsClick }) => {
   const navigate = useNavigate();
 
   return (
@@ -34,7 +35,8 @@ const HeaderWorkspace: FC<HeaderWorkspaceProps> = ({ projectName }) => {
         <Setting2
           size={18}
           color="white"
-          className="min-w-[18px]"
+          className="min-w-[18px] cursor-pointer"
+          onClick={onSettingsClick}
         />
       </div>
     </div>

src/pages/taskmanager/components/UserAvatar.tsx

@@ -0,0 +1,16 @@
+import { type FC } from "react";
+import AvatarImage from "../../../assets/images/avatar_image.png";
+
+type Props = {
+  src?: string | null;
+  alt?: string;
+  className?: string;
+};
+
+const UserAvatar: FC<Props> = ({ src, alt = "", className = "size-6" }) => (
+  <div className={`${className} rounded-full overflow-hidden shrink-0 bg-[#D0D0D0]`}>
+    <img src={src || AvatarImage} alt={alt} className="size-full object-cover" />
+  </div>
+);
+
+export default UserAvatar;

src/pages/taskmanager/components/task-detail/TaskDetailMetadataPreview.tsx

@@ -2,7 +2,7 @@ import { Add } from "iconsax-react";
 import { type FC } from "react";
 import type DateObject from "react-date-object";
 import { useTranslation } from "react-i18next";
-import AvatarImage from "../../../../assets/images/avatar_image.png";
+import UserAvatar from "../UserAvatar";
 import { formatDateRange } from "./date/utils";
 import type { TaskLabel } from "./labels/types";
 import type { TaskUser } from "./users/types";
@@ -52,16 +52,7 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
         <div className="text-xs font-medium mb-2">{t("taskmanager.users")}</div>
         <div className="flex items-center gap-2 flex-wrap">
           {selectedUsers.map((user) => (
-            <div
-              key={user.id}
-              className="size-8 rounded-full bg-[#D0D0D0] overflow-hidden shrink-0"
-            >
-              <img
-                src={user.avatar ?? AvatarImage}
-                alt={user.name}
-                className="size-full object-cover"
-              />
-            </div>
+            <UserAvatar key={user.id} src={user.avatar} alt={user.name} className="size-8" />
           ))}
           <button
             type="button"

src/pages/taskmanager/components/task-detail/TaskDetailToolbar.tsx

@@ -91,19 +91,28 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
           page.data?.users?.map((user: UserItemType) => ({
             id: user.id,
             name: `${user.firstName} ${user.lastName}`.trim(),
+            avatar: user.profilePic,
           })) ?? [],
       ) ?? [];
     const taskUsers: TaskUser[] =
       taskDetail?.users?.map((user) => ({
         id: user.id,
         name: `${user.firstName} ${user.lastName}`.trim(),
+        avatar: user.profilePic,
       })) ?? [];
     const userMap = new Map<string, TaskUser>(apiUsers.map((user) => [user.id, user]));
 
     taskUsers.forEach((user) => {
-      if (!userMap.has(user.id)) {
-        userMap.set(user.id, user);
+      const existing = userMap.get(user.id);
+
+      if (existing) {
+        if (!existing.avatar && user.avatar) {
+          userMap.set(user.id, { ...existing, avatar: user.avatar });
         }
+        return;
+      }
+
+      userMap.set(user.id, user);
     });
 
     return Array.from(userMap.values());
@@ -115,6 +124,7 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
           page.data?.users?.map((user: UserItemType) => ({
             id: user.id,
             name: `${user.firstName} ${user.lastName}`.trim(),
+            avatar: user.profilePic,
           })) ?? [],
       ) ?? []
     );

src/pages/taskmanager/components/task-detail/users/TaskDetailUsersList.tsx

@@ -1,6 +1,7 @@
 import { type FC } from "react";
 import { useTranslation } from "react-i18next";
 import Input from "../../../../../components/Input";
+import UserAvatar from "../../UserAvatar";
 import TaskDetailLabelCheckbox from "../labels/TaskDetailLabelCheckbox";
 import type { TaskUser } from "./types";
 
@@ -71,7 +72,7 @@ const TaskDetailUsersList: FC<Props> = ({
                     onToggle={() => onToggle(user.id)}
                     ariaLabel={user.name}
                   />
-                  <div className="size-6 rounded-full bg-gray-400 shrink-0"></div>
+                  <UserAvatar src={user.avatar} alt={user.name} />
                   <div className="text-[10px]">{user.name}</div>
                 </div>
               );

src/pages/taskmanager/project/Create.tsx

@@ -14,7 +14,6 @@ import { Pages } from "../../../config/Pages";
 import { ErrorType } from "../../../helpers/types";
 import { useSingleUpload } from "../../service/hooks/useServiceData";
 import CreateProjectSidebar, {
-  BACKGROUND_PRESETS,
   SelectedUser,
 } from "./components/CreateProjectSidebar";
 import { useCreateProject } from "./hooks/useProjectData";
@@ -30,7 +29,7 @@ const CreateProject: FC = () => {
   const [isActive, setIsActive] = useState(true);
   const [selectedColor, setSelectedColor] = useState("#A8E6CF");
   const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
-  const [selectedBackground, setSelectedBackground] = useState<string>(BACKGROUND_PRESETS[0]);
+  const [selectedBackground, setSelectedBackground] = useState<string | null>(null);
   const [backgroundImage, setBackgroundImage] = useState<File | null>(null);
   const [workspaceId, setWorkspaceId] = useState(searchParams.get("workspaceId") ?? "");
 

src/pages/taskmanager/project/Update.tsx

@@ -15,7 +15,7 @@ import { Pages } from "../../../config/Pages";
 import { ErrorType } from "../../../helpers/types";
 import { useSingleUpload } from "../../service/hooks/useServiceData";
 import CreateProjectSidebar, {
-  BACKGROUND_PRESETS,
+  findMatchingBackgroundPreset,
   SelectedUser,
 } from "./components/CreateProjectSidebar";
 import { useGetProjectDetail, useUpdateProject } from "./hooks/useProjectData";
@@ -32,7 +32,7 @@ const UpdateProject: FC = () => {
   const [isActive, setIsActive] = useState(true);
   const [selectedColor, setSelectedColor] = useState("#A8E6CF");
   const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
-  const [selectedBackground, setSelectedBackground] = useState<string>(BACKGROUND_PRESETS[0]);
+  const [selectedBackground, setSelectedBackground] = useState<string | null>(null);
   const [backgroundImage, setBackgroundImage] = useState<File | null>(null);
   const [workspaceId, setWorkspaceId] = useState("");
   const [existingBackgroundPicture, setExistingBackgroundPicture] = useState("");
@@ -119,7 +119,9 @@ const UpdateProject: FC = () => {
         : "",
     });
     setIsActive(project.isActive);
-    setSelectedColor(project.backgroundColor ?? "#A8E6CF");
+    const backgroundColor = project.backgroundColor ?? "#A8E6CF";
+    setSelectedBackground(findMatchingBackgroundPreset(backgroundColor));
+    setSelectedColor(backgroundColor);
     setWorkspaceId(project.workspaceId);
     setExistingBackgroundPicture(project.backgroundPicture ?? "");
     setStartDateDefault(
@@ -133,6 +135,7 @@ const UpdateProject: FC = () => {
         project.users.map((user) => ({
           id: user.id,
           name: `${user.firstName} ${user.lastName}`,
+          profilePic: user.profilePic,
         })),
       );
     } else if (project.userIds?.length) {

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

@@ -8,10 +8,12 @@ import { UserItemType } from "../../../users/types/UserTypes";
 import { useGetWorkspaces } from "../../workspace/hooks/useWorkspaceData";
 import { WorkspaceItemType } from "../../workspace/types/WorkspaceTypes";
 import WorkspaceColorPicker from "../../workspace/components/WorkspaceColorPicker";
+import UserAvatar from "../../components/UserAvatar";
 
 export type SelectedUser = {
   id: string;
   name: string;
+  profilePic?: string;
 };
 
 export const BACKGROUND_PRESETS = [
@@ -23,6 +25,14 @@ export const BACKGROUND_PRESETS = [
   "linear-gradient(45deg, #2c3e50, #4ca1af)",
 ] as const;
 
+export const getPresetPrimaryColor = (preset: string) =>
+  preset.match(/#[0-9a-fA-F]{6}/)?.[0] ?? "#A8E6CF";
+
+export const findMatchingBackgroundPreset = (color: string) =>
+  BACKGROUND_PRESETS.find(
+    (preset) => getPresetPrimaryColor(preset).toLowerCase() === color.toLowerCase(),
+  ) ?? null;
+
 type Props = {
   isActive: boolean;
   onIsActiveChange: (value: boolean) => void;
@@ -30,13 +40,14 @@ type Props = {
   onColorChange: (color: string) => void;
   selectedUsers: SelectedUser[];
   onSelectedUsersChange: (users: SelectedUser[]) => void;
-  selectedBackground: string;
-  onBackgroundChange: (background: string) => void;
+  selectedBackground: string | null;
+  onBackgroundChange: (background: string | null) => void;
   backgroundImage: File | null;
   onBackgroundImageChange: (file: File | null) => void;
   workspaceId: string;
   onWorkspaceIdChange: (id: string) => void;
   workspaceError?: string;
+  className?: string;
 };
 
 const CreateProjectSidebar: FC<Props> = ({
@@ -53,6 +64,7 @@ const CreateProjectSidebar: FC<Props> = ({
   workspaceId,
   onWorkspaceIdChange,
   workspaceError,
+  className,
 }) => {
   const { t } = useTranslation("global");
   const getUsers = useGetUsers("");
@@ -87,7 +99,11 @@ const CreateProjectSidebar: FC<Props> = ({
     if (user) {
       onSelectedUsersChange([
         ...selectedUsers,
-        { id: user.id, name: `${user.firstName} ${user.lastName}` },
+        {
+          id: user.id,
+          name: `${user.firstName} ${user.lastName}`,
+          profilePic: user.profilePic,
+        },
       ]);
     }
 
@@ -104,7 +120,12 @@ const CreateProjectSidebar: FC<Props> = ({
   };
 
   return (
-    <div className="bg-white mt-10 w-sidebar text-xs hidden 2xl:block h-fit px-5 py-7 rounded-3xl">
+    <div
+      className={
+        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">
@@ -134,6 +155,7 @@ const CreateProjectSidebar: FC<Props> = ({
           ) : (
             selectedUsers.map((user) => (
               <div key={user.id} className="bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg">
+                <UserAvatar src={user.profilePic} alt={user.name} />
                 <div>{user.name}</div>
                 <CloseCircle variant="Bold" className="size-4 cursor-pointer" color="red" onClick={() => handleRemoveUser(user.id)} />
               </div>
@@ -154,7 +176,10 @@ const CreateProjectSidebar: FC<Props> = ({
                 background,
                 borderColor: selectedBackground === background ? "#000" : "#E2E8F0",
               }}
-              onClick={() => onBackgroundChange(background)}
+              onClick={() => {
+                onBackgroundChange(background);
+                onColorChange(getPresetPrimaryColor(background));
+              }}
             />
           ))}
         </div>
@@ -162,7 +187,13 @@ const CreateProjectSidebar: FC<Props> = ({
 
       <div className="mt-8">
         <div className="text-sm mb-3">{t("taskmanager.choose_color")}</div>
-        <WorkspaceColorPicker selectedColor={selectedColor} onChange={onColorChange} />
+        <WorkspaceColorPicker
+          selectedColor={selectedColor}
+          onChange={(color) => {
+            onBackgroundChange(findMatchingBackgroundPreset(color));
+            onColorChange(color);
+          }}
+        />
       </div>
 
       <div className="mt-8">

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

@@ -0,0 +1,192 @@
+import { CloseCircle, TickCircle } from "iconsax-react";
+import { type FC, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useQueryClient } from "@tanstack/react-query";
+import { toast } from "react-toastify";
+import Button from "../../../../components/Button";
+import { ErrorType } from "../../../../helpers/types";
+import { clx } from "../../../../helpers/utils";
+import { useSingleUpload } from "../../../service/hooks/useServiceData";
+import { useUpdateProject } from "../hooks/useProjectData";
+import type { ProjectDetailType } from "../types/ProjectTypes";
+import CreateProjectSidebar, {
+  findMatchingBackgroundPreset,
+  type SelectedUser,
+} from "./CreateProjectSidebar";
+
+type Props = {
+  open: boolean;
+  onClose: () => void;
+  projectId: string;
+  project?: ProjectDetailType;
+};
+
+const ProjectSettingsPanel: FC<Props> = ({ open, onClose, projectId, project }) => {
+  const { t } = useTranslation("global");
+  const queryClient = useQueryClient();
+  const updateProject = useUpdateProject();
+  const singleUpload = useSingleUpload();
+
+  const [isActive, setIsActive] = useState(true);
+  const [selectedColor, setSelectedColor] = useState("#A8E6CF");
+  const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([]);
+  const [selectedBackground, setSelectedBackground] = useState<string | null>(null);
+  const [backgroundImage, setBackgroundImage] = useState<File | null>(null);
+  const [workspaceId, setWorkspaceId] = useState("");
+  const [existingBackgroundPicture, setExistingBackgroundPicture] = useState("");
+
+  useEffect(() => {
+    if (!open) {
+      document.body.style.overflow = "auto";
+      return;
+    }
+
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = "auto";
+    };
+  }, [open]);
+
+  useEffect(() => {
+    if (!open || !project) return;
+
+    const backgroundColor = project.backgroundColor ?? "#A8E6CF";
+    setIsActive(project.isActive);
+    setSelectedBackground(findMatchingBackgroundPreset(backgroundColor));
+    setSelectedColor(backgroundColor);
+    setWorkspaceId(project.workspaceId);
+    setExistingBackgroundPicture(project.backgroundPicture ?? "");
+    setBackgroundImage(null);
+
+    if (project.users?.length) {
+      setSelectedUsers(
+        project.users.map((user) => ({
+          id: user.id,
+          name: `${user.firstName} ${user.lastName}`,
+          profilePic: user.profilePic,
+        })),
+      );
+    } else if (project.userIds?.length) {
+      setSelectedUsers(
+        project.userIds.map((userId) => ({
+          id: userId,
+          name: userId,
+        })),
+      );
+    } else {
+      setSelectedUsers([]);
+    }
+  }, [open, project]);
+
+  const handleSave = async () => {
+    if (!project) return;
+
+    if (!workspaceId) {
+      toast.error(t("taskmanager.select_workspace"));
+      return;
+    }
+
+    let backgroundPicture = existingBackgroundPicture;
+
+    if (backgroundImage) {
+      const formData = new FormData();
+      formData.append("file", backgroundImage);
+
+      try {
+        const uploadResult = await singleUpload.mutateAsync(formData);
+        backgroundPicture = uploadResult?.data?.url ?? "";
+      } catch (error) {
+        const uploadError = error as ErrorType;
+        toast.error(uploadError.response?.data?.error.message[0]);
+        return;
+      }
+    }
+
+    updateProject.mutate(
+      {
+        id: projectId,
+        params: {
+          name: project.name,
+          ownerName: project.ownerName,
+          description: project.description ?? "",
+          startDate: project.startDate,
+          backgroundPicture,
+          backgroundColor: selectedColor,
+          isActive,
+          workspaceId,
+          userIds: selectedUsers.map((user) => user.id),
+        },
+      },
+      {
+        onSuccess: () => {
+          toast.success(t("success"));
+          queryClient.invalidateQueries({ queryKey: ["project", projectId] });
+          queryClient.invalidateQueries({ queryKey: ["project-detail", projectId] });
+          onClose();
+        },
+        onError: (error: ErrorType) => {
+          toast.error(error.response?.data?.error.message[0]);
+        },
+      },
+    );
+  };
+
+  if (!open) return null;
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-[70] bg-black/40"
+        onClick={onClose}
+        aria-hidden
+      />
+
+      <div
+        className={clx(
+          "fixed top-0 bottom-0 left-0 z-[80] w-full max-w-[320px] bg-white shadow-xl flex flex-col transition-transform duration-300 ease-in-out",
+          open ? "translate-x-0" : "-translate-x-full",
+        )}
+      >
+        <div className="flex items-center justify-between px-5 py-4 border-b border-border shrink-0">
+          <div className="text-sm font-bold">{t("taskmanager.project_settings")}</div>
+          <button type="button" onClick={onClose} className="p-1">
+            <CloseCircle size={22} color="#8C90A3" />
+          </button>
+        </div>
+
+        <div className="flex-1 overflow-y-auto px-5 py-6">
+          <CreateProjectSidebar
+            className="w-full text-xs block h-fit p-0 rounded-none"
+            isActive={isActive}
+            onIsActiveChange={setIsActive}
+            selectedColor={selectedColor}
+            onColorChange={setSelectedColor}
+            selectedUsers={selectedUsers}
+            onSelectedUsersChange={setSelectedUsers}
+            selectedBackground={selectedBackground}
+            onBackgroundChange={setSelectedBackground}
+            backgroundImage={backgroundImage}
+            onBackgroundImageChange={setBackgroundImage}
+            workspaceId={workspaceId}
+            onWorkspaceIdChange={setWorkspaceId}
+          />
+        </div>
+
+        <div className="px-5 py-4 border-t border-border shrink-0">
+          <Button
+            className="w-full"
+            isLoading={updateProject.isPending || singleUpload.isPending}
+            onClick={handleSave}
+          >
+            <div className="flex gap-2 justify-center">
+              <TickCircle className="size-5" color="#fff" />
+              <div>{t("submit")}</div>
+            </div>
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default ProjectSettingsPanel;

src/pages/taskmanager/project/types/ProjectTypes.ts

@@ -12,6 +12,7 @@ export type ProjectUserType = {
   id: string;
   firstName: string;
   lastName: string;
+  profilePic?: string;
 };
 
 export type CreateProjectType = {

src/pages/taskmanager/task/types/TaskTypes.ts

@@ -5,6 +5,7 @@ export type CreateTaskType = {
   taskPhaseId: string;
   order: number;
   projectId: string;
+  userIds?: string[];
 };
 
 export type TaskItemType = {
@@ -59,6 +60,7 @@ export type TaskUserType = {
   id: string;
   firstName: string;
   lastName: string;
+  profilePic?: string;
 };
 
 export type TaskChecklistItemType = {

src/pages/taskmanager/workspace.tsx

@@ -10,6 +10,7 @@ import Column from "./components/Column";
 import HeaderWorkspace from "./components/HeaderWorkspace";
 import TaskDetailModal from "./components/task-detail/TaskDetailModal";
 import { useGetProject, useGetProjectDetail } from "./project/hooks/useProjectData";
+import ProjectSettingsPanel from "./project/components/ProjectSettingsPanel";
 import type { ProjectDetailType } from "./project/types/ProjectTypes";
 import { getProjectBackgroundStyle } from "./project/utils/getProjectBackgroundStyle";
 import { useUpdateTaskPhase } from "./task-phase/hooks/useTaskPhaseData";
@@ -37,6 +38,7 @@ const Workspace: FC = () => {
   const [draggedTask, setDraggedTask] = useState<Task | null>(null);
   const [draggedColumnId, setDraggedColumnId] = useState<string | null>(null);
   const [selectedTask, setSelectedTask] = useState<Task | null>(null);
+  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
   useEffect(() => {
     if (!project?.data?.taskPhases) return;
@@ -248,7 +250,10 @@ const Workspace: FC = () => {
         backgroundPicture: projectDetail?.backgroundPicture,
       })}
     >
-      <HeaderWorkspace projectName={project?.data?.name ?? ""} />
+      <HeaderWorkspace
+        projectName={project?.data?.name ?? ""}
+        onSettingsClick={() => setIsSettingsOpen(true)}
+      />
       <div className="flex-1 min-h-0 flex flex-col px-3 sm:px-4 xl:px-8 py-4 xl:py-6">
         <DragDropContext onDragStart={handleTaskDragStart} onDragEnd={handleTaskDragEnd}>
           <div className="flex-1 min-h-0 overflow-x-auto overflow-y-hidden overscroll-x-contain">
@@ -286,6 +291,13 @@ const Workspace: FC = () => {
         onClose={() => setSelectedTask(null)}
         onTaskPhaseChanged={handleTaskPhaseChanged}
       />
+
+      <ProjectSettingsPanel
+        open={isSettingsOpen}
+        onClose={() => setIsSettingsOpen(false)}
+        projectId={projectId}
+        project={projectDetail}
+      />
     </div>
   );
 };

src/pages/taskmanager/workspace/Update.tsx

@@ -89,6 +89,7 @@ const UpdateWorkspace: FC = () => {
         workspace.users.map((user) => ({
           id: user.id,
           name: `${user.firstName} ${user.lastName}`,
+          profilePic: user.profilePic,
         })),
       );
     } else if (workspace.userIds?.length) {

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

@@ -6,10 +6,12 @@ import Select from "../../../../components/Select";
 import { useGetUsers } from "../../../users/hooks/useUserData";
 import { UserItemType } from "../../../users/types/UserTypes";
 import WorkspaceColorPicker from "./WorkspaceColorPicker";
+import UserAvatar from "../../components/UserAvatar";
 
 export type SelectedUser = {
   id: string;
   name: string;
+  profilePic?: string;
 };
 
 type Props = {
@@ -55,7 +57,11 @@ const CreateWorkspaceSidebar: FC<Props> = ({
     if (user) {
       onSelectedUsersChange([
         ...selectedUsers,
-        { id: user.id, name: `${user.firstName} ${user.lastName}` },
+        {
+          id: user.id,
+          name: `${user.firstName} ${user.lastName}`,
+          profilePic: user.profilePic,
+        },
       ]);
     }
 
@@ -107,6 +113,7 @@ const CreateWorkspaceSidebar: FC<Props> = ({
               key={user.id}
               className="bg-[#EBEEF5] flex gap-2 text-xs items-center px-2 py-2 rounded-lg"
             >
+              <UserAvatar src={user.profilePic} alt={user.name} />
               <div>{user.name}</div>
               <CloseCircle
                 variant="Bold"

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

@@ -18,6 +18,7 @@ export type WorkspaceUserType = {
   id: string;
   firstName: string;
   lastName: string;
+  profilePic?: string;
 };
 
 export type WorkspaceDetailType = WorkspaceItemType & {

src/pages/ticket/components/CreateTaskFromTicket.tsx

@@ -1,5 +1,6 @@
 import { FC, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import { CloseCircle } from 'iconsax-react'
 import DefaulModal from '../../../components/DefaulModal'
 import Select from '../../../components/Select'
 import Input from '../../../components/Input'
@@ -11,7 +12,11 @@ import { useGetWorkspaces } from '../../taskmanager/workspace/hooks/useWorkspace
 import { WorkspaceItemType } from '../../taskmanager/workspace/types/WorkspaceTypes'
 import { useGetProjectsByWorkspace, useGetProject } from '../../taskmanager/project/hooks/useProjectData'
 import { ProjectItem, ProjectTaskPhaseType } from '../../taskmanager/project/types/ProjectTypes'
-import { useCreateTask } from '../../taskmanager/task/hooks/useTaskData'
+import { useCreateTask, useUpdateTask } from '../../taskmanager/task/hooks/useTaskData'
+import { useGetUsers } from '../../users/hooks/useUserData'
+import { UserItemType } from '../../users/types/UserTypes'
+import UserAvatar from '../../taskmanager/components/UserAvatar'
+import type { SelectedUser } from '../../taskmanager/project/components/CreateProjectSidebar'
 
 type Props = {
     ticketSubject: string
@@ -24,11 +29,15 @@ const CreateTaskFromTicket: FC<Props> = ({ ticketSubject }) => {
     const [projectId, setProjectId] = useState('')
     const [taskPhaseId, setTaskPhaseId] = useState('')
     const [title, setTitle] = useState('')
+    const [selectedUsers, setSelectedUsers] = useState<SelectedUser[]>([])
+    const [userSelectValue, setUserSelectValue] = useState('')
 
     const getWorkspaces = useGetWorkspaces()
     const getProjects = useGetProjectsByWorkspace(workspaceId)
     const getProject = useGetProject(projectId)
+    const getUsers = useGetUsers('')
     const createTask = useCreateTask()
+    const updateTask = useUpdateTask()
 
     const workspaces: WorkspaceItemType[] =
         getWorkspaces.data?.data?.workspaces ??
@@ -60,6 +69,14 @@ const CreateTaskFromTicket: FC<Props> = ({ ticketSubject }) => {
         value: phase.id,
     }))
 
+    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 selectedPhase = taskPhases.find((phase) => phase.id === taskPhaseId)
 
     const resetForm = () => {
@@ -67,6 +84,32 @@ const CreateTaskFromTicket: FC<Props> = ({ ticketSubject }) => {
         setProjectId('')
         setTaskPhaseId('')
         setTitle('')
+        setSelectedUsers([])
+        setUserSelectValue('')
+    }
+
+    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}`,
+                    profilePic: user.profilePic,
+                },
+            ])
+        }
+
+        setUserSelectValue('')
+    }
+
+    const handleRemoveUser = (id: string) => {
+        setSelectedUsers((prev) => prev.filter((user) => user.id !== id))
     }
 
     const handleClose = () => {
@@ -80,7 +123,7 @@ const CreateTaskFromTicket: FC<Props> = ({ ticketSubject }) => {
         }
     }, [open, ticketSubject])
 
-    const handleCreateTask = () => {
+    const handleCreateTask = async () => {
         const trimmedTitle = title.trim()
 
         if (!workspaceId) {
@@ -103,26 +146,32 @@ const CreateTaskFromTicket: FC<Props> = ({ ticketSubject }) => {
             return
         }
 
-        createTask.mutate(
-            {
+        const userIds = selectedUsers.map((user) => user.id)
+
+        try {
+            const response = await createTask.mutateAsync({
                 title: trimmedTitle,
                 taskPhaseId,
                 order: selectedPhase?.tasks?.length ?? 0,
                 projectId,
-            },
-            {
-                onSuccess: () => {
+                ...(userIds.length ? { userIds } : {}),
+            })
+
+            const taskId = response?.data?.task?.id ?? response?.data?.id
+
+            if (taskId && userIds.length) {
+                await updateTask.mutateAsync({ id: taskId, params: { userIds } })
+            }
+
             toast.success(t('ticket.create_task_success'))
             handleClose()
-                },
-                onError: (error: ErrorType) => {
-                    toast.error(error.response?.data?.error?.message[0])
-                },
-            },
-        )
+        } catch (error) {
+            toast.error((error as ErrorType).response?.data?.error?.message[0])
+        }
     }
 
     const isLoadingOptions = getWorkspaces.isPending || getProjects.isPending || getProject.isPending
+    const isSubmitting = createTask.isPending || updateTask.isPending
 
     return (
         <div className='bg-white p-6 rounded-3xl mt-8'>
@@ -193,11 +242,43 @@ const CreateTaskFromTicket: FC<Props> = ({ ticketSubject }) => {
                                 onChange={(e) => setTitle(e.target.value)}
                             />
 
+                            <div>
+                                <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 text-xs'>
+                                            {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'>
+                                                <UserAvatar src={user.profilePic} alt={user.name} />
+                                                <div>{user.name}</div>
+                                                <CloseCircle
+                                                    variant='Bold'
+                                                    className='size-4 cursor-pointer'
+                                                    color='red'
+                                                    onClick={() => handleRemoveUser(user.id)}
+                                                />
+                                            </div>
+                                        ))
+                                    )}
+                                </div>
+                            </div>
+
                             <div className='flex justify-end'>
                                 <Button
                                     label={t('ticket.create_task')}
                                     onClick={handleCreateTask}
-                                    isLoading={createTask.isPending}
+                                    isLoading={isSubmitting}
                                     className='w-fit px-7'
                                 />
                             </div>