refer ticket

package-lock.json

@@ -113,6 +113,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.26.0.tgz",
       "integrity": "sha512-i1SLeK+DzNnQ3LL/CswPCa/E5u4lh1k6IAEphON8F+cXt0t9euTshDru0q7/IqMa1PMPz5RnHuHscF8/ZJsStg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.26.0",
@@ -2412,6 +2413,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
       "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -2424,6 +2426,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz",
       "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.0"
@@ -3072,6 +3075,7 @@
       "integrity": "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA==",
       "devOptional": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/parser": "^7.20.7",
         "@babel/types": "^7.20.7",
@@ -3173,6 +3177,7 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
       "integrity": "sha512-t4yC+vtgnkYjNSKlFx1jkAhH8LgTo2N/7Qvi83kdEaUtMDiwpbLAktKDaAMlRcJ5eSxZkH74eEGt1ky31d7kfQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.0.2"
@@ -3249,6 +3254,7 @@
       "integrity": "sha512-rBnTWHCdbYM2lh7hjyXqxk70wvon3p2FyaniZuey5TrcGBpfhVp0OxOa6gxr9Q9YhZFKyfbEnxc24ZnVbbUkCA==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.18.1",
         "@typescript-eslint/types": "8.18.1",
@@ -3457,6 +3463,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3812,6 +3819,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001688",
         "electron-to-chromium": "^1.5.73",
@@ -4542,6 +4550,7 @@
       "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==",
       "dev": true,
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.8.0",
         "@eslint-community/regexpp": "^4.12.1",
@@ -5456,6 +5465,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.23.2"
       },
@@ -6786,6 +6796,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.8",
         "picocolors": "^1.1.1",
@@ -6952,6 +6963,7 @@
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
       "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "loose-envify": "^1.4.0",
         "object-assign": "^4.1.1",
@@ -7087,6 +7099,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.0.0.tgz",
       "integrity": "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -7102,6 +7115,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.0.0.tgz",
       "integrity": "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.25.0"
       },
@@ -7324,7 +7338,8 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
       "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/reflect.getprototypeof": {
       "version": "1.0.10",
@@ -7503,6 +7518,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.40.0.tgz",
       "integrity": "sha512-Noe455xmA96nnqH5piFtLobsGbCij7Tu+tb3c1vYjNbTkfzGqXqQXG3wJaYXkRZuQ0vEYN4bhwg7QnIrqB5B+w==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.7"
       },
@@ -8406,6 +8422,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -8569,6 +8586,7 @@
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
       "devOptional": true,
       "license": "Apache-2.0",
+      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -8776,6 +8794,7 @@
       "resolved": "https://registry.npmjs.org/vite/-/vite-6.4.1.tgz",
       "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "esbuild": "^0.25.0",
         "fdir": "^6.4.4",
@@ -8897,6 +8916,7 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -9187,6 +9207,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -9248,6 +9269,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },

src/components/DefaulModal.tsx

@@ -1,4 +1,5 @@
 import { FC, Fragment, ReactNode, useEffect } from 'react'
+import { clx } from '../helpers/utils'
 import HeaderModal from './HeaderModal'
 
 interface Props {
@@ -8,6 +9,8 @@ interface Props {
     isHeader?: boolean,
     title_header?: string,
     width?: number
+    /** Raise above popovers (z-80) when confirm opens from nested panels */
+    elevated?: boolean
 }
 
 const DefaulModal: FC<Props> = (props: Props) => {
@@ -26,7 +29,14 @@ const DefaulModal: FC<Props> = (props: Props) => {
             {
                 props.open && (
                     <Fragment>
-                        <div style={{ maxWidth: props.width }} className='xl:justify-center xl:items-center items-end flex overflow-hidden fixed inset-0 z-[60] h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto'>
+                        <div
+                            style={{ maxWidth: props.width }}
+                            onPointerDown={(e) => e.stopPropagation()}
+                            className={clx(
+                                'xl:justify-center xl:items-center items-end flex overflow-hidden fixed inset-0 h-auto top-0 bottom-0 m-auto outline-none focus:outline-none xl:max-w-xl mx-auto',
+                                props.elevated ? 'z-[100]' : 'z-[60]',
+                            )}
+                        >
                             <div className='relative max-h-[85vh] bottom-0 left-0 flex xl:items-center items-end w-full xl:my-6 xl:p-2'>
                                 <div className='border-0 max-h-[85vh] p-5 lg:min-w-full overflow-y-auto rounded-3xl rounded-b-none xl:rounded-b-3xl relative flex flex-col w-full modalGlass2 outline-none focus:outline-none'>
 
@@ -46,7 +56,14 @@ const DefaulModal: FC<Props> = (props: Props) => {
                             </div>
                         </div>
 
-                        <div onClick={props.close} className='fixed size-full top-0 bottom-0 right-0 modalGlass inset-0 z-50 '></div>
+                        <div
+                            onClick={props.close}
+                            onPointerDown={(e) => e.stopPropagation()}
+                            className={clx(
+                                'fixed size-full top-0 bottom-0 right-0 modalGlass inset-0',
+                                props.elevated ? 'z-[90]' : 'z-50',
+                            )}
+                        />
                     </Fragment>
                 )
             }

src/components/Input.tsx

@@ -1,5 +1,5 @@
 import { SearchNormal } from "iconsax-react";
-import { FC, InputHTMLAttributes, useEffect, useState } from "react";
+import { FC, InputHTMLAttributes, useEffect, useRef, useState } from "react";
 import EyeIcon from "../assets/images/eye.svg";
 import { clx } from "../helpers/utils";
 import Error from "./Error";
@@ -30,6 +30,8 @@ const Input: FC<Props> = (props: Props) => {
 
   const [showPassword, setShowPassword] = useState<boolean>(false);
   const [search, setSearch] = useState<string>("");
+  const onChangeSearchFinalRef = useRef(props.onChangeSearchFinal);
+  onChangeSearchFinalRef.current = props.onChangeSearchFinal;
 
   const inputClass = clx(
     "w-full h-10 text-black block px-4 text-xs rounded-xl border border-border",
@@ -68,13 +70,13 @@ const Input: FC<Props> = (props: Props) => {
   }, [props.value]);
 
   useEffect(() => {
-    if (props.variant === "search" && props.onChangeSearchFinal) {
-      const timeout = setTimeout(() => {
-        props.onChangeSearchFinal?.(search);
-      }, 1000);
-      return () => clearTimeout(timeout);
-    }
-  }, [search, props]);
+    if (props.variant !== "search" || !onChangeSearchFinalRef.current) return;
+
+    const timeout = setTimeout(() => {
+      onChangeSearchFinalRef.current?.(search);
+    }, 1000);
+    return () => clearTimeout(timeout);
+  }, [search, props.variant]);
 
   return (
     <div className="w-full">

src/components/ModalConfrim.tsx

@@ -1,7 +1,8 @@
 import { FC, useState } from 'react'
-import DefaulModal from './DefaulModal'
+import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import Button from './Button'
+import DefaulModal from './DefaulModal'
 import Textarea from './Textarea'
 
 type Props = {
@@ -18,12 +19,13 @@ const ModalConfrim: FC<Props> = (props: Props) => {
     const { t } = useTranslation('global')
     const [description, setDescription] = useState<string>('')
 
-    return (
+    return createPortal(
         <DefaulModal
             open={props.isOpen}
             close={props.close}
             title_header={t('confrim.subject')}
             isHeader
+            elevated
         >
             <div className='mt-6'>
                 <div className='text-sm text-center'>
@@ -60,7 +62,8 @@ const ModalConfrim: FC<Props> = (props: Props) => {
                     />
                 </div>
             </div>
-        </DefaulModal>
+        </DefaulModal>,
+        document.body,
     )
 }
 

src/config/Pages.ts

@@ -36,6 +36,9 @@ export const Pages = {
     create: "/tickets/create",
     detail: "/tickets/messages/",
     category: "/tickets/category",
+    masters: "/tickets/masters",
+    mastersCreate: "/tickets/masters/create",
+    mastersUpdate: "/tickets/masters/update/",
   },
   announcement: {
     list: "/announcement",

src/helpers/permissions.ts

@@ -95,6 +95,21 @@ export enum PermissionEnum {
   BLOGS_UPDATE = "blogs_update",
   BLOGS_DELETE = "blogs_delete",
 
+  BLOG_CATEGORIES_CREATE = "blog_categories_create",
+  BLOG_CATEGORIES_READ = "blog_categories_read",
+  BLOG_CATEGORIES_UPDATE = "blog_categories_update",
+  BLOG_CATEGORIES_DELETE = "blog_categories_delete",
+
+  BLOG_COMMENTS_CREATE = "blog_comments_create",
+  BLOG_COMMENTS_READ = "blog_comments_read",
+  BLOG_COMMENTS_UPDATE = "blog_comments_update",
+  BLOG_COMMENTS_DELETE = "blog_comments_delete",
+
+  SLIDERS_CREATE = "sliders_create",
+  SLIDERS_READ = "sliders_read",
+  SLIDERS_UPDATE = "sliders_update",
+  SLIDERS_DELETE = "sliders_delete",
+
   LEARNINGS_CREATE = "learnings_create",
   LEARNINGS_READ = "learnings_read",
   LEARNINGS_UPDATE = "learnings_update",
@@ -145,6 +160,19 @@ export enum PermissionEnum {
   TASK_PHASE_UPDATE = "task_phase_update",
   TASK_PHASE_DELETE = "task_phase_delete",
 
+  TICKET_CATEGORIES_CREATE = "ticket_categories_create",
+  TICKET_CATEGORIES_READ = "ticket_categories_read",
+  TICKET_CATEGORIES_UPDATE = "ticket_categories_update",
+  TICKET_CATEGORIES_DELETE = "ticket_categories_delete",
+
+  TICKET_MASTERS_CREATE = "ticket_masters_create",
+  TICKET_MASTERS_READ = "ticket_masters_read",
+  TICKET_MASTERS_UPDATE = "ticket_masters_update",
+  TICKET_MASTERS_DELETE = "ticket_masters_delete",
+
+  VIEW_ALL_WORKSPACES = "view_all_workspaces",
+  VIEW_ALL_PROJECTS = "view_all_projects",
+
   LOGS = "logs",
   MANAGE_SSO_CLIENTS = "manage_sso_clients",
   DMENU = "dmenu",
@@ -153,12 +181,34 @@ export enum PermissionEnum {
   DMAIL = "dmail",
 }
 
-const CRUD_ACTIONS = ["create", "read", "update", "delete"] as const;
+export type CrudAction = "create" | "read" | "update" | "delete";
 
-export const CONTENT_PERMISSION_RESOURCES = ["blogs", "learnings", "advertisements", "announcements"] as const;
+const CRUD_ACTIONS: readonly CrudAction[] = ["create", "read", "update", "delete"];
+
+export const CONTENT_PERMISSION_RESOURCES = [
+  "blogs",
+  "blog_categories",
+  "blog_comments",
+  "sliders",
+  "learnings",
+  "advertisements",
+  "announcements",
+] as const;
 export const FINANCIAL_PERMISSION_RESOURCES = ["payments", "invoices", "transactions", "discounts", "bank_accounts"] as const;
-export const SUPPORT_PERMISSION_RESOURCES = ["support_plan", "tickets"] as const;
-export const TASK_MANAGER_PERMISSION_RESOURCES = ["workspace", "project", "task", "task_phase"] as const;
+export const SUPPORT_PERMISSION_RESOURCES = [
+  "support_plan",
+  "tickets",
+  "ticket_categories",
+  "ticket_masters",
+] as const;
+export const TASK_MANAGER_PERMISSION_RESOURCES = [
+  "workspace",
+  "project",
+  "task",
+  "task_phase",
+  "view_all_workspaces",
+  "view_all_projects",
+] as const;
 export const USERS_SIDEBAR_PERMISSION_RESOURCES = ["admins"] as const;
 export const PRODUCT_PERMISSION_RESOURCES = ["dmenu", "dkala", "dpage", "dmail"] as const;
 
@@ -180,6 +230,32 @@ export const hasPermission = (
   return CRUD_ACTIONS.some((action) => names.includes(`${resourceOrPermission}_${action}`));
 };
 
+export const hasActionPermission = (
+  permissions: PermissionEntry[] | undefined,
+  resource: string,
+  action: CrudAction,
+): boolean => {
+  const names = getPermissionNames(permissions);
+
+  if (names.includes(resource)) {
+    return true;
+  }
+
+  return names.includes(`${resource}_${action}`);
+};
+
+export const canCreate = (permissions: PermissionEntry[] | undefined, resource: string) =>
+  hasActionPermission(permissions, resource, "create");
+
+export const canRead = (permissions: PermissionEntry[] | undefined, resource: string) =>
+  hasActionPermission(permissions, resource, "read");
+
+export const canUpdate = (permissions: PermissionEntry[] | undefined, resource: string) =>
+  hasActionPermission(permissions, resource, "update");
+
+export const canDelete = (permissions: PermissionEntry[] | undefined, resource: string) =>
+  hasActionPermission(permissions, resource, "delete");
+
 export const hasAnyPermission = (
   permissions: PermissionEntry[] | undefined,
   resources: readonly string[],

src/hooks/usePermissions.ts

@@ -0,0 +1,28 @@
+import {
+  canCreate,
+  canDelete,
+  canRead,
+  canUpdate,
+  CrudAction,
+  hasActionPermission,
+  hasAnyPermission,
+  hasPermission,
+} from "../helpers/permissions";
+import { useGetAdminPermissions } from "../pages/users/hooks/useUserData";
+
+export const usePermissions = () => {
+  const { data, isPending, isLoading } = useGetAdminPermissions();
+  const permissions = data?.data?.permissions;
+
+  return {
+    permissions,
+    isPending: isPending || isLoading,
+    can: (resource: string, action: CrudAction) => hasActionPermission(permissions, resource, action),
+    canCreate: (resource: string) => canCreate(permissions, resource),
+    canRead: (resource: string) => canRead(permissions, resource),
+    canUpdate: (resource: string) => canUpdate(permissions, resource),
+    canDelete: (resource: string) => canDelete(permissions, resource),
+    has: (resourceOrPermission: string) => hasPermission(permissions, resourceOrPermission),
+    hasAny: (resources: readonly string[]) => hasAnyPermission(permissions, resources),
+  };
+};

src/langs/fa.json

@@ -35,7 +35,16 @@
     "enter_password_step3": "رمز عبور را وارد کنید",
     "enter_your_password": "رمز عبور خود را وارد کنید.",
     "forgot_password": "فراموشی رمز عبور",
-    "login_with_otp": "ورود با رمز عبور یکبار مصرف"
+    "forgot_password_description": "ایمیل خود را وارد کنید تا کد بازیابی برای شما ارسال شود.",
+    "reset_password": "بازیابی رمز عبور",
+    "new_password": "رمز عبور جدید",
+    "confirm_password": "تکرار رمز عبور",
+    "password_mismatch": "رمز عبور و تکرار آن یکسان نیستند",
+    "change_email": "تغییر ایمیل",
+    "resend_code": "ارسال مجدد کد",
+    "back_to_login": "بازگشت به صفحه ورود",
+    "login_with_otp": "ورود با رمز عبور یکبار مصرف",
+    "otp_sent": "رمز یک بار مصرف برای شما ارسال شد"
   },
   "errors": {
     "required": "این فیلد اجباری می باشد",
@@ -134,6 +143,7 @@
     "representative_list": "لیست نمایندگان",
     "ticket_list": "لیست تیکت ها",
     "ticket_category": "دسته بندی تیکت ها",
+    "ticket_masters": "مستر",
     "send_ticket": "ارسال تیکت",
     "category": "دسته بندی",
     "user_list": "لیست کاربران",
@@ -368,7 +378,10 @@
     "column": "ستون",
     "select_workspace_required": "فضای کاری را انتخاب کنید",
     "select_project_required": "پروژه را انتخاب کنید",
-    "select_column_required": "ستون را انتخاب کنید"
+    "select_column_required": "ستون را انتخاب کنید",
+    "masters": "مستر",
+    "add_master": "افزودن مستر",
+    "edit_master": "ویرایش مستر"
   },
   "active": "فعال",
   "inactive": "غیرفعال",
@@ -785,7 +798,10 @@
     "confrim_email": "تایید ایمیل",
     "confrim": "تایید صورتحساب ",
     "link_email": "یک لینک برای تایید ایمیل برای شما ارسال شد.",
-    "email_not_verified": "ایمیل تایید نشده"
+    "email_not_verified": "ایمیل تایید نشده",
+    "resend_email": "ارسال مجدد تایید",
+    "first_name": "نام",
+    "last_name": "نام خانوادگی"
   },
   "email": "ایمیل",
   "customer": {

src/pages/ads/AdsList.tsx

@@ -14,6 +14,7 @@ import moment from 'moment-jalaali'
 import ToggleStatusAds from './components/ToggleStatus'
 import PageLoading from '../../components/PageLoading'
 import Pagination from '../../components/Pagination'
+import { usePermissions } from '../../hooks/usePermissions'
 const AddList: FC = () => {
 
     const { t } = useTranslation('global')
@@ -23,6 +24,7 @@ const AddList: FC = () => {
     const [page, setPage] = useState<number>(1)
     const getAds = useGetAdsList(page, search, isActive, since)
     const deleteAds = useDeleteAds()
+    const { canCreate, canUpdate, canDelete } = usePermissions()
 
     const handleDelete = (id: string) => {
         deleteAds.mutate(id, {
@@ -39,18 +41,20 @@ const AddList: FC = () => {
                     {t('ads.ads')}
                 </div>
 
-                <Link to={Pages.ads.create}>
-                    <Button
-                        className='w-[172px]'
-                    >
-                        <div className='flex gap-2 items-center'>
-                            <Add size={20} color='white' />
-                            <div>
-                                {t('ads.new_ads')}
+                {canCreate('advertisements') && (
+                    <Link to={Pages.ads.create}>
+                        <Button
+                            className='w-[172px]'
+                        >
+                            <div className='flex gap-2 items-center'>
+                                <Add size={20} color='white' />
+                                <div>
+                                    {t('ads.new_ads')}
+                                </div>
                             </div>
-                        </div>
-                    </Button>
-                </Link>
+                        </Button>
+                    </Link>
+                )}
             </div>
             <div className='mt-4'>
                 <div className='flex flex-col xl:flex-row justify-between items-center xl:items-end'>
@@ -130,10 +134,14 @@ const AddList: FC = () => {
                                                 </Td>
                                                 <Td text={''}>
                                                     <div className='flex gap-3'>
-                                                        <Link to={Pages.ads.update + item.id}>
-                                                            <Eye size={20} color='#8C90A3' />
-                                                        </Link>
-                                                        <Trash onClick={() => handleDelete(item.id)} size={20} color='#8C90A3' />
+                                                        {canUpdate('advertisements') && (
+                                                            <Link to={Pages.ads.update + item.id}>
+                                                                <Eye size={20} color='#8C90A3' />
+                                                            </Link>
+                                                        )}
+                                                        {canDelete('advertisements') && (
+                                                            <Trash onClick={() => handleDelete(item.id)} size={20} color='#8C90A3' />
+                                                        )}
                                                     </div>
                                                 </Td>
                                             </tr>

src/pages/annoncement/List.tsx

@@ -11,6 +11,7 @@ import moment from 'moment-jalaali'
 import Pagination from '../../components/Pagination'
 import { toast } from '../../components/Toast';
 import { ErrorType } from '../../helpers/types'
+import { usePermissions } from '../../hooks/usePermissions'
 
 const AnnouncementtList: FC = () => {
 
@@ -18,6 +19,7 @@ const AnnouncementtList: FC = () => {
     const [page, setPage] = useState<number>(1)
     const getAnnoncements = useGetAnnoncements(page, '', '')
     const deleteAnnoncement = useDeleteAnnoncement()
+    const { canCreate, canUpdate, canDelete } = usePermissions()
 
     const handleDelete = (id: string) => {
         deleteAnnoncement.mutate(id, {
@@ -38,21 +40,23 @@ const AnnouncementtList: FC = () => {
                 <div>
                     {t('announcement.announcements')}
                 </div>
-                <div>
-                    <Link to={Pages.announcement.create}>
-                        <Button
-                            className='px-5'
-                        >
-                            <div className='flex gap-2'>
-                                <Add
-                                    className='size-5'
-                                    color='#fff'
-                                />
-                                <div>{t('announcement.add_announcement')}</div>
-                            </div>
-                        </Button>
-                    </Link>
-                </div>
+                {canCreate('announcements') && (
+                    <div>
+                        <Link to={Pages.announcement.create}>
+                            <Button
+                                className='px-5'
+                            >
+                                <div className='flex gap-2'>
+                                    <Add
+                                        className='size-5'
+                                        color='#fff'
+                                    />
+                                    <div>{t('announcement.add_announcement')}</div>
+                                </div>
+                            </Button>
+                        </Link>
+                    </div>
+                )}
             </div>
 
 
@@ -88,17 +92,21 @@ const AnnouncementtList: FC = () => {
                                         <Td text={moment(item.publishAt).format('jYYYY-jMM-jDD')} />
                                         <Td text={''}>
                                             <div className='flex gap-2'>
-                                                <Link to={Pages.announcement.detail + item.id}>
-                                                    <Edit
+                                                {canUpdate('announcements') && (
+                                                    <Link to={Pages.announcement.detail + item.id}>
+                                                        <Edit
+                                                            className='size-5'
+                                                            color='#888'
+                                                        />
+                                                    </Link>
+                                                )}
+                                                {canDelete('announcements') && (
+                                                    <Trash
                                                         className='size-5'
                                                         color='#888'
+                                                        onClick={() => handleDelete(item.id)}
                                                     />
-                                                </Link>
-                                                <Trash
-                                                    className='size-5'
-                                                    color='#888'
-                                                    onClick={() => handleDelete(item.id)}
-                                                />
+                                                )}
                                             </div>
                                         </Td>
                                     </tr>

src/pages/auth/ForgotPassword.tsx

@@ -0,0 +1,50 @@
+import { FC, useState } from 'react'
+import LogoImage from '../../assets/images/logo.svg'
+import LogoSmallImage from '../../assets/images/logo-small.svg'
+import { Link } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+import { useTranslation } from 'react-i18next'
+import ForgotPasswordStep1 from './components/ForgotPasswordStep1'
+import ForgotPasswordStep2 from './components/ForgotPasswordStep2'
+
+const ForgotPassword: FC = () => {
+
+    const { t } = useTranslation('global')
+    const [step, setStep] = useState(1)
+
+    return (
+        <div className='w-full h-full flex justify-center lg:py-[75px] py-4 lg:items-center lg:px-10 px-4'>
+            <div className='flex w-full max-h-[812px] max-w-[1200px] bg-secondary h-full rounded-3xl overflow-hidden'>
+                <div className='flex-1 min-w-[50%] overflow-y-auto  bg-white lg:px-9 px-4 py-7'>
+                    <div className='flex-1 h-full flex flex-col'>
+                        <img src={LogoSmallImage} className='w-8' />
+
+                        <div className='flex flex-1 flex-col h-full justify-center'>
+                            {
+                                step === 1 ?
+                                    <ForgotPasswordStep1 onSuccess={() => setStep(2)} />
+                                    :
+                                    <ForgotPasswordStep2 onBack={() => setStep(1)} />
+                            }
+
+                            <div className='mt-6 flex justify-center gap-2 items-center text-sm'>
+                                <p className='text-description'>
+                                    {t('auth.back_to_login')}
+                                </p>
+                                <Link to={Pages.auth.login}>
+                                    <div>{t('auth.login')}</div>
+                                </Link>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+
+                <div className='flex-1 min-w-[50%] lg:flex hidden justify-center items-center'>
+                    <img src={LogoImage} className='h-20' />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default ForgotPassword

src/pages/auth/components/ForgotPasswordStep1.tsx

@@ -0,0 +1,88 @@
+import { FC } from 'react'
+import Input from '../../../components/Input'
+import { useTranslation } from 'react-i18next'
+import { ForgotPasswordType } from '../types/AuthTypes'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { useAuthStore } from '../store/AuthStore'
+import Error from '../../../components/Error'
+import Button from '../../../components/Button'
+import { useForgotPassword } from '../hooks/useAuthData'
+import { toast } from '../../../components/Toast';
+import { ErrorType } from '../../../helpers/types'
+import { isEmail } from '../../../config/func'
+
+type Props = {
+    onSuccess: () => void
+}
+
+const ForgotPasswordStep1: FC<Props> = ({ onSuccess }) => {
+
+    const { t } = useTranslation('global')
+    const { email, setEmail } = useAuthStore()
+    const forgotPassword = useForgotPassword()
+
+    const formik = useFormik<ForgotPasswordType>({
+        initialValues: {
+            email: email,
+        },
+        validationSchema: Yup.object({
+            email: Yup.string()
+                .required(t('errors.required'))
+                .test('is-email', t('errors.required'), (value) => !!value && isEmail(value)),
+        }),
+        onSubmit(values) {
+            setEmail(values.email)
+            forgotPassword.mutate({ email: values.email }, {
+                onSuccess() {
+                    toast(t('auth.otp_sent'), 'success')
+                    onSuccess()
+                },
+                onError(error: ErrorType) {
+                    toast(error?.response?.data?.error?.message[0], 'error')
+                },
+            })
+        },
+    })
+
+    return (
+        <div>
+            <div className='mt-5'>
+                <h2 className='text-2xl font-bold'>
+                    {t('auth.forgot_password')}
+                </h2>
+                <p className='text-description text-sm mt-2'>
+                    {t('auth.forgot_password_description')}
+                </p>
+            </div>
+
+            <div className='mt-16'>
+                <Input
+                    label={t('auth.email')}
+                    placeholder={t('auth.enter_email')}
+                    type='text'
+                    dir='ltr'
+                    name='email'
+                    onChange={formik.handleChange}
+                    value={formik.values.email}
+                />
+
+                {
+                    formik.touched.email && formik.errors.email &&
+                    <Error
+                        errorText={formik.errors.email}
+                    />
+                }
+            </div>
+
+            <Button
+                label={t('auth.next')}
+                className='mt-8'
+                onClick={() => formik.handleSubmit()}
+                isLoading={forgotPassword.isPending}
+            />
+        </div>
+    )
+}
+
+export default ForgotPasswordStep1

src/pages/auth/components/ForgotPasswordStep2.tsx

@@ -0,0 +1,172 @@
+import { FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import { ResetPasswordType } from '../types/AuthTypes'
+import { useFormik } from 'formik'
+import * as Yup from 'yup'
+import { useAuthStore } from '../store/AuthStore'
+import Button from '../../../components/Button'
+import Input from '../../../components/Input'
+import Error from '../../../components/Error'
+import OTPInput from 'react-otp-input'
+import { useCountDown } from '../../../hooks/useCountDown'
+import { Pages } from '../../../config/Pages'
+import { useForgotPassword, useResetPassword } from '../hooks/useAuthData'
+import { ErrorType } from '../../../helpers/types'
+import { toast } from '../../../components/Toast';
+import { useNavigate } from 'react-router-dom'
+
+type Props = {
+    onBack: () => void
+}
+
+const ForgotPasswordStep2: FC<Props> = ({ onBack }) => {
+
+    const { t } = useTranslation('global')
+    const navigate = useNavigate()
+    const { email } = useAuthStore()
+    const { value, reset } = useCountDown(2, true)
+    const resetPassword = useResetPassword()
+    const forgotPassword = useForgotPassword()
+
+    const formik = useFormik<ResetPasswordType & { confirmPassword: string }>({
+        initialValues: {
+            email: email,
+            code: '',
+            newPassword: '',
+            confirmPassword: '',
+        },
+        validationSchema: Yup.object({
+            code: Yup.string()
+                .required(t('errors.required')),
+            newPassword: Yup.string()
+                .required(t('errors.required')),
+            confirmPassword: Yup.string()
+                .required(t('errors.required'))
+                .oneOf([Yup.ref('newPassword')], t('auth.password_mismatch')),
+        }),
+        onSubmit(values) {
+            resetPassword.mutate({
+                email,
+                code: values.code,
+                newPassword: values.newPassword,
+            }, {
+                onSuccess() {
+                    toast(t('success'), 'success')
+                    navigate(Pages.auth.login)
+                },
+                onError(error: ErrorType) {
+                    toast(error?.response?.data?.error?.message[0], 'error')
+                },
+            })
+        },
+    })
+
+    const handleResend = () => {
+        forgotPassword.mutate({ email }, {
+            onSuccess() {
+                reset()
+                toast(t('auth.otp_sent'), 'success')
+            },
+            onError(error: ErrorType) {
+                toast(error?.response?.data?.error?.message[0], 'error')
+            },
+        })
+    }
+
+    return (
+        <div>
+            <div className='mt-5'>
+                <h2 className='lg:text-2xl font-bold'>
+                    {t('auth.reset_password')}
+                </h2>
+                <p className='text-description flex lg:flex-row flex-col lg:gap-1 gap-2 text-sm lg:mt-2 mt-3'>
+                    <div className='flex gap-1 flex-wrap'>
+                        <div>{t('auth.verfify_code_text_1')}</div>
+                        <div>{email}</div>
+                        <div>{t('auth.verfify_code_text_2')}</div>
+                    </div>
+                    <div onClick={onBack} className='text-black cursor-pointer'>
+                        {t('auth.change_email')}
+                    </div>
+                </p>
+            </div>
+
+            <div className='mt-16'>
+                <div className='text-sm'>
+                    {t('auth.verify_code')}
+                </div>
+                <div className='mt-2 w-full flex justify-center dltr otp'>
+                    <OTPInput
+                        shouldAutoFocus
+                        value={formik.values.code}
+                        numInputs={5}
+                        inputType='tel'
+                        onChange={(otp: string) => formik.setFieldValue('code', otp)}
+                        renderInput={(props) => <input {...props} className='w-full h-[50px] flex-1 mx-2  bg-white border rounded-2.5' />}
+                    />
+                </div>
+
+                {
+                    formik.touched.code && formik.errors.code &&
+                    <div className='text-xs mt-2 text-red-500'>{formik.errors.code}</div>
+                }
+
+                <div className='flex mt-4 justify-between items-center'>
+                    <div
+                        onClick={handleResend}
+                        className='text-xs text-black cursor-pointer'
+                    >
+                        {t('auth.resend_code')}
+                    </div>
+                    <div className='flex gap-1 text-description text-xs'>
+                        <div>{value}</div>
+                        <div>{t('auth.counter_otp')}</div>
+                    </div>
+                </div>
+            </div>
+
+            <div className='mt-6'>
+                <Input
+                    label={t('auth.new_password')}
+                    type='password'
+                    className='text-right'
+                    name='newPassword'
+                    dir='ltr'
+                    onChange={formik.handleChange}
+                    value={formik.values.newPassword}
+                    error_text={formik.touched.newPassword && formik.errors.newPassword ? formik.errors.newPassword : ''}
+                />
+                {
+                    formik.touched.newPassword && formik.errors.newPassword &&
+                    <Error errorText={formik.errors.newPassword} />
+                }
+            </div>
+
+            <div className='mt-4'>
+                <Input
+                    label={t('auth.confirm_password')}
+                    type='password'
+                    className='text-right'
+                    name='confirmPassword'
+                    dir='ltr'
+                    onChange={formik.handleChange}
+                    value={formik.values.confirmPassword}
+                    error_text={formik.touched.confirmPassword && formik.errors.confirmPassword ? formik.errors.confirmPassword : ''}
+                />
+                {
+                    formik.touched.confirmPassword && formik.errors.confirmPassword &&
+                    <Error errorText={formik.errors.confirmPassword} />
+                }
+            </div>
+
+            <Button
+                label={t('auth.reset_password')}
+                className='mt-8'
+                onClick={() => formik.handleSubmit()}
+                isLoading={resetPassword.isPending}
+            />
+        </div>
+    )
+}
+
+export default ForgotPasswordStep2

src/pages/auth/components/LoginStep1.tsx

@@ -69,7 +69,7 @@ const LoginStep1: FC = () => {
                     label={t('auth.mobile_or_email')}
                     placeholder={t('auth.enter_mobile_or_email')}
                     type='text'
-                    className='text-right'
+                    dir='ltr'
                     name='phone_email'
                     onChange={formik.handleChange}
                     value={formik.values.phone_email}

src/pages/auth/components/LoginStep2.tsx

@@ -78,7 +78,13 @@ const LoginStep2: FC = () => {
                         value={formik.values.code}
                         numInputs={5}
                         inputType='tel'
-                        onChange={(otp: string) => formik.setFieldValue('code', otp)}
+                        onChange={(otp: string) => {
+                            formik.setFieldValue('code', otp).then(() => {
+                                if (otp.length === 5 && !otpVerify.isPending) {
+                                    formik.submitForm()
+                                }
+                            })
+                        }}
                         renderInput={(props) => <input {...props} className='w-full h-[50px] flex-1 mx-2  bg-white border rounded-2.5' />}
                     />
                 </div>

src/pages/auth/components/LoginStep3.tsx

@@ -63,6 +63,7 @@ const LoginStep3: FC = () => {
                     type='password'
                     className='text-right'
                     name='password'
+                    dir='ltr'
                     onChange={formik.handleChange}
                     value={formik.values.password}
                     error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}

src/pages/auth/hooks/useAuthData.tsx

@@ -1,6 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import * as api from '../service/AuthService'
-import { CheckHasAccountPhoneType, CheckHasAccountType, LoginWithOtpType, LoginWithPasswordType, OtpVerifyType, RegisterType } from '../types/AuthTypes';
+import { CheckHasAccountPhoneType, CheckHasAccountType, ForgotPasswordType, LoginWithOtpType, LoginWithPasswordType, OtpVerifyType, RegisterType, ResetPasswordType } from '../types/AuthTypes';
 
 export const useLoginWithPassword = () => {
     return useMutation({
@@ -36,4 +36,16 @@ export const useRegister = () => {
     return useMutation({
         mutationFn: (variables: RegisterType) => api.register(variables),
     });
+};
+
+export const useForgotPassword = () => {
+    return useMutation({
+        mutationFn: (variables: ForgotPasswordType) => api.forgotPassword(variables),
+    });
+};
+
+export const useResetPassword = () => {
+    return useMutation({
+        mutationFn: (variables: ResetPasswordType) => api.resetPassword(variables),
+    });
 };

src/pages/auth/service/AuthService.ts

@@ -2,11 +2,13 @@ import axios from "../../../config/axios";
 import {
   CheckHasAccountPhoneType,
   CheckHasAccountType,
+  ForgotPasswordType,
   LoginWithOtpType,
   LoginWithPasswordType,
   OtpVerifyType,
   RefreshTokenType,
   RegisterType,
+  ResetPasswordType,
 } from "../types/AuthTypes";
 
 export const loginWithPassword = async (params: LoginWithPasswordType) => {
@@ -43,3 +45,13 @@ export const refreshToken = async (params: RefreshTokenType) => {
   const { data } = await axios.post(`/auth/refresh`, params);
   return data;
 };
+
+export const forgotPassword = async (params: ForgotPasswordType) => {
+  const { data } = await axios.post(`/auth/forgot-password`, params);
+  return data;
+};
+
+export const resetPassword = async (params: ResetPasswordType) => {
+  const { data } = await axios.post(`/auth/reset-password`, params);
+  return data;
+};

src/pages/auth/types/AuthTypes.ts

@@ -52,3 +52,13 @@ export type RegisterType = {
 export type RefreshTokenType = {
   refreshToken: string;
 };
+
+export type ForgotPasswordType = {
+  email: string;
+};
+
+export type ResetPasswordType = {
+  email: string;
+  code: string;
+  newPassword: string;
+};

src/pages/blog/BlogCategory.tsx

@@ -17,6 +17,7 @@ import UploadBoxDraggble from '../../components/UploadBoxDraggble'
 import { useSingleUpload } from '../service/hooks/useServiceData'
 import { toast } from '../../components/Toast';
 import UpdateCategory from './components/UpdateCategory'
+import { usePermissions } from '../../hooks/usePermissions'
 const BlogCategory: FC = () => {
 
     const { t } = useTranslation('global')
@@ -25,6 +26,7 @@ const BlogCategory: FC = () => {
     const singleUpload = useSingleUpload()
     const createBlogCategory = useCreateBlogCategory()
     const deleteBlogCategory = useDeleteBlogCategory()
+    const { canCreate, canUpdate, canDelete } = usePermissions()
     const formik = useFormik<CreateBlogCategoryType>({
         initialValues: {
             title: '',
@@ -102,15 +104,19 @@ const BlogCategory: FC = () => {
                                                     <Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
                                                     <Td text={t('')}>
                                                         <div className='flex gap-2 items-center'>
-                                                            <UpdateCategory id={item.id} />
-                                                            <Trash size={20} color='red' onClick={() => {
-                                                                deleteBlogCategory.mutateAsync(item.id, {
-                                                                    onSuccess: () => {
-                                                                        toast('دسته بندی با موفقیت حذف شد', 'success')
-                                                                        getBlogCategories.refetch()
-                                                                    }
-                                                                })
-                                                            }} />
+                                                            {canUpdate('blog_categories') && (
+                                                                <UpdateCategory id={item.id} />
+                                                            )}
+                                                            {canDelete('blog_categories') && (
+                                                                <Trash size={20} color='red' onClick={() => {
+                                                                    deleteBlogCategory.mutateAsync(item.id, {
+                                                                        onSuccess: () => {
+                                                                            toast('دسته بندی با موفقیت حذف شد', 'success')
+                                                                            getBlogCategories.refetch()
+                                                                        }
+                                                                    })
+                                                                }} />
+                                                            )}
                                                         </div>
                                                     </Td>
                                                 </tr>
@@ -123,59 +129,61 @@ const BlogCategory: FC = () => {
                         </div>
                     </div>
                 </div>
-                <div className='relative bg-white min-h-[calc(100vh-185px)] w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
-                    <p className='text-md'>{t('blog.add_category')}</p>
-                    <div className='text-sm flex items-center justify-between mt-4'>
-                        <p>
-                            {t('blog.category_status')}
-                        </p>
-                        <div className='flex gap-1 text-xs items-center text-description'>
-                            <div>
-                                {t('ads.deactive')}
+                {canCreate('blog_categories') && (
+                    <div className='relative bg-white min-h-[calc(100vh-185px)] w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
+                        <p className='text-md'>{t('blog.add_category')}</p>
+                        <div className='text-sm flex items-center justify-between mt-4'>
+                            <p>
+                                {t('blog.category_status')}
+                            </p>
+                            <div className='flex gap-1 text-xs items-center text-description'>
+                                <div>
+                                    {t('ads.deactive')}
+                                </div>
+                                <SwitchComponent
+                                    active={formik.values.isActive}
+                                    onChange={(value) => formik.setFieldValue('isActive', value)}
+                                />
                             </div>
-                            <SwitchComponent
-                                active={formik.values.isActive}
-                                onChange={(value) => formik.setFieldValue('isActive', value)}
+                        </div>
+
+                        <div className='mt-6'>
+                            <Input
+                                label='عنوان'
+                                {...formik.getFieldProps('title')}
+                                error_text={formik.touched.title && formik.errors.title ? formik.errors.title : undefined}
                             />
                         </div>
-                    </div>
 
-                    <div className='mt-6'>
-                        <Input
-                            label='عنوان'
-                            {...formik.getFieldProps('title')}
-                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : undefined}
-                        />
-                    </div>
-
-                    <div className='mt-6'>
-                        <Textarea
-                            label='توضیحات'
-                            {...formik.getFieldProps('description')}
-                            error_text={formik.touched.description && formik.errors.description ? formik.errors.description : undefined}
-                        />
-                    </div>
-
-                    <div className='mt-6'>
-                        <UploadBoxDraggble
-                            label='آپلود آیکون'
-                            onChange={(file) => setFile(file[0])}
-                        />
-                    </div>
-
-                    <Button
-                        className='w-[172px] absolute bottom-4 left-4'
-                        onClick={() => formik.handleSubmit()}
-                        isLoading={createBlogCategory.isPending || singleUpload.isPending}
-                    >
-                        <div className='flex gap-2 items-center'>
-                            <TickCircle size={20} color='white' />
-                            <div>
-                                ذخیره
-                            </div>
+                        <div className='mt-6'>
+                            <Textarea
+                                label='توضیحات'
+                                {...formik.getFieldProps('description')}
+                                error_text={formik.touched.description && formik.errors.description ? formik.errors.description : undefined}
+                            />
                         </div>
-                    </Button>
-                </div>
+
+                        <div className='mt-6'>
+                            <UploadBoxDraggble
+                                label='آپلود آیکون'
+                                onChange={(file) => setFile(file[0])}
+                            />
+                        </div>
+
+                        <Button
+                            className='w-[172px] absolute bottom-4 left-4'
+                            onClick={() => formik.handleSubmit()}
+                            isLoading={createBlogCategory.isPending || singleUpload.isPending}
+                        >
+                            <div className='flex gap-2 items-center'>
+                                <TickCircle size={20} color='white' />
+                                <div>
+                                    ذخیره
+                                </div>
+                            </div>
+                        </Button>
+                    </div>
+                )}
             </div>
         </div>
     )

src/pages/blog/BlogList.tsx

@@ -11,6 +11,7 @@ import { BlogItemType } from './types/BlogTypes'
 import moment from 'moment-jalaali'
 import TrashWithConfrim from '../../components/TrashWithConfrim'
 import Pagination from '../../components/Pagination'
+import { usePermissions } from '../../hooks/usePermissions'
 const BlogList: FC = () => {
 
     const { t } = useTranslation('global')
@@ -18,6 +19,7 @@ const BlogList: FC = () => {
     const [search, setSearch] = useState<string>('')
     const getBlogs = useGetBlogs(search, page);
     const deleteBlog = useDeleteBlog()
+    const { canCreate, canUpdate, canDelete } = usePermissions()
 
     return (
         <div className='mt-4 min-h-[500px]'>
@@ -26,18 +28,20 @@ const BlogList: FC = () => {
                     {t('blog.blog')}
                 </div>
 
-                <Link to={Pages.blog.create}>
-                    <Button
-                        className='w-[172px]'
-                    >
-                        <div className='flex gap-2 items-center'>
-                            <Add size={20} color='white' />
-                            <div>
-                                {t('blog.new_blog')}
+                {canCreate('blogs') && (
+                    <Link to={Pages.blog.create}>
+                        <Button
+                            className='w-[172px]'
+                        >
+                            <div className='flex gap-2 items-center'>
+                                <Add size={20} color='white' />
+                                <div>
+                                    {t('blog.new_blog')}
+                                </div>
                             </div>
-                        </div>
-                    </Button>
-                </Link>
+                        </Button>
+                    </Link>
+                )}
             </div>
 
 
@@ -139,19 +143,23 @@ const BlogList: FC = () => {
                                         </Td> */}
                                         <Td text={''}>
                                             <div className='flex gap-2'>
-                                                <Link to={Pages.blog.detail + item.id}>
-                                                    <Eye size={20} color='#8C90A3' />
-                                                </Link>
-                                                <TrashWithConfrim
-                                                    onDelete={() => {
-                                                        deleteBlog.mutate(item.id, {
-                                                            onSuccess: () => {
-                                                                getBlogs.refetch()
-                                                            }
-                                                        })
-                                                    }}
-                                                    isLoading={deleteBlog.isPending}
-                                                />
+                                                {canUpdate('blogs') && (
+                                                    <Link to={Pages.blog.detail + item.id}>
+                                                        <Eye size={20} color='#8C90A3' />
+                                                    </Link>
+                                                )}
+                                                {canDelete('blogs') && (
+                                                    <TrashWithConfrim
+                                                        onDelete={() => {
+                                                            deleteBlog.mutate(item.id, {
+                                                                onSuccess: () => {
+                                                                    getBlogs.refetch()
+                                                                }
+                                                            })
+                                                        }}
+                                                        isLoading={deleteBlog.isPending}
+                                                    />
+                                                )}
                                             </div>
                                         </Td>
                                     </tr>

src/pages/blog/Comments.tsx

@@ -7,8 +7,10 @@ import moment from 'moment-jalaali'
 import { CloseCircle, TickCircle } from 'iconsax-react'
 import { ErrorType } from '../../helpers/types'
 import { toast } from '../../components/Toast';
+import { usePermissions } from '../../hooks/usePermissions'
 const Comments: FC = () => {
     const { t } = useTranslation('global')
+    const { canUpdate } = usePermissions()
     const getBlogComments = useGetBlogComments()
     const changeStatusComment = useChangeStatusComment()
     const handleChangeStatus = (id: string, status: string) => {
@@ -49,7 +51,7 @@ const Comments: FC = () => {
                                 <Td text={moment(item.createdAt).format('jYYYY/jMM/jDD')} />
                                 <Td text=''>
                                     {
-                                        item.status === 'PENDING' &&
+                                        item.status === 'PENDING' && canUpdate('blog_comments') &&
                                         <div className='flex items-center gap-2'>
                                             <TickCircle onClick={() => handleChangeStatus(item.id, 'APPROVED')} color='green' size={20} />
                                             <CloseCircle onClick={() => handleChangeStatus(item.id, 'REJECTED')} color='red' size={20} />

src/pages/cardBank/List.tsx

@@ -8,10 +8,12 @@ import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import Button from '../../components/Button'
 import { Add, Eye } from 'iconsax-react'
+import { usePermissions } from '../../hooks/usePermissions'
 
 const CardBankList: FC = () => {
 
     const { t } = useTranslation('global')
+    const { canCreate, canUpdate } = usePermissions()
     const getCardBanks = useGetCardBanks()
 
     return (
@@ -23,19 +25,21 @@ const CardBankList: FC = () => {
                     {t('cardBank.manage_banks')}
                 </div>
                 <div>
-                    <Link to={Pages.cardBank.create}>
-                        <Button
-                            className='px-5'
-                        >
-                            <div className='flex gap-2'>
-                                <Add
-                                    className='size-5'
-                                    color='#fff'
-                                />
-                                <div>{t('cardBank.add_account')}</div>
-                            </div>
-                        </Button>
-                    </Link>
+                    {canCreate('bank_accounts') &&
+                        <Link to={Pages.cardBank.create}>
+                            <Button
+                                className='px-5'
+                            >
+                                <div className='flex gap-2'>
+                                    <Add
+                                        className='size-5'
+                                        color='#fff'
+                                    />
+                                    <div>{t('cardBank.add_account')}</div>
+                                </div>
+                            </Button>
+                        </Link>
+                    }
                 </div>
             </div>
             {
@@ -63,9 +67,11 @@ const CardBankList: FC = () => {
                                                 <Td text={item.cardNumber} />
                                                 <Td text={item.IBan} />
                                                 <Td text={''}>
-                                                    <Link to={Pages.cardBank.detail + item.id}>
-                                                        <Eye size={20} color='#8C90A3' />
-                                                    </Link>
+                                                    {canUpdate('bank_accounts') &&
+                                                        <Link to={Pages.cardBank.detail + item.id}>
+                                                            <Eye size={20} color='#8C90A3' />
+                                                        </Link>
+                                                    }
                                                 </Td>
                                             </tr>
                                         )

src/pages/criticisms/List.tsx

@@ -9,9 +9,11 @@ import { CriticismsItemTypes } from './types/CriticismsTypes'
 import moment from 'moment-jalaali'
 import ModalConfrim from '../../components/ModalConfrim'
 import Pagination from '../../components/Pagination'
+import { usePermissions } from '../../hooks/usePermissions'
 
 const CriticismsList: FC = () => {
 
+    const { canDelete } = usePermissions()
     const [itemId, setItemId] = useState<string>('')
     const [page, setPage] = useState<number>(1)
     const [openConfrim, setOpenConfrim] = useState(false)
@@ -69,7 +71,9 @@ const CriticismsList: FC = () => {
                                             </Link>
                                         </Td>
                                         <Td text=''>
-                                            <Trash onClick={() => handleDelete(item.id)} size={20} color='#8C90A3' className='cursor-pointer' />
+                                            {canDelete('criticisms') &&
+                                                <Trash onClick={() => handleDelete(item.id)} size={20} color='#8C90A3' className='cursor-pointer' />
+                                            }
                                         </Td>
                                     </tr>
                                 )

src/pages/customer/List.tsx

@@ -8,18 +8,22 @@ import PageLoading from "../../components/PageLoading";
 import Pagination from "../../components/Pagination";
 import Td from "../../components/Td";
 import { Pages } from "../../config/Pages";
+import { usePermissions } from "../../hooks/usePermissions";
 import { useGetCustomers } from "./hooks/useCustomerData";
 import { CustomerItemType } from "./types/CustomerTypes";
 
 const CustomerList: FC = () => {
   const { t } = useTranslation("global");
+  const { canCreate, canUpdate } = usePermissions();
   const [page, setPage] = useState(1);
   const [limit, setLimit] = useState(10);
   const [search, setSearch] = useState("");
   const getCustomers = useGetCustomers(page, limit, false, search);
 
   const handleSearch = (value: string) => {
-    setPage(1);
+    if (value !== search) {
+      setPage(1);
+    }
     setSearch(value);
   };
 
@@ -27,17 +31,19 @@ const CustomerList: FC = () => {
     <div className="mt-4">
       <div className="flex w-full justify-between items-center">
         <div>{t("customer.customer_list")}</div>
-        <Link to={Pages.customer.create}>
-          <Button className="px-5">
-            <div className="flex gap-2">
-              <Add
-                className="size-5"
-                color="#fff"
-              />
-              <div>{t("customer.add_cutomer")}</div>
-            </div>
-          </Button>
-        </Link>
+        {canCreate("customers") && (
+          <Link to={Pages.customer.create}>
+            <Button className="px-5">
+              <div className="flex gap-2">
+                <Add
+                  className="size-5"
+                  color="#fff"
+                />
+                <div>{t("customer.add_cutomer")}</div>
+              </div>
+            </Button>
+          </Link>
+        )}
       </div>
 
       <div className="flex justify-end items-center mt-12">
@@ -90,12 +96,14 @@ const CustomerList: FC = () => {
                       </Link>
                     </Td>
                     <Td text={""}>
-                      <Link to={Pages.customer.update + item.id}>
-                        <Eye
-                          size={20}
-                          color="#8C90A3"
-                        />
-                      </Link>
+                      {canUpdate("customers") && (
+                        <Link to={Pages.customer.update + item.id}>
+                          <Eye
+                            size={20}
+                            color="#8C90A3"
+                          />
+                        </Link>
+                      )}
                     </Td>
                     <Td text={""} />
                   </tr>

src/pages/customer/service/CustomerService.ts

@@ -2,9 +2,7 @@ import axios from "../../../config/axios";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
 export const getCustomers = async (page: number, limit: number, withoutPaginate?: boolean, search?: string) => {
-  const { data } = await axios.get(
-    `/users/customers?page=${page}&limit=${limit}&paginate=${withoutPaginate ? "0" : "1"}&q=${encodeURIComponent(search ?? "")}`,
-  );
+  const { data } = await axios.get(`/users/customers?page=${page}&limit=${limit}&paginate=${withoutPaginate ? "0" : "1"}&q=${encodeURIComponent(search ?? "")}`);
   return data;
 };
 

src/pages/discounts/DiscountsList.tsx

@@ -14,10 +14,12 @@ import PageLoading from '../../components/PageLoading'
 import { NumberFormat } from '../../config/func'
 import { toast } from '../../components/Toast';
 import { ErrorType } from '../../helpers/types'
+import { usePermissions } from '../../hooks/usePermissions'
 
 const DiscountList: FC = () => {
 
     const { t } = useTranslation('global')
+    const { canCreate, canUpdate, canDelete } = usePermissions()
     const [search, setSearch] = useState<string>('')
     const getDiscounts = useGetDiscounts(search)
     const deleteDiscount = useDeleteDiscount()
@@ -40,18 +42,20 @@ const DiscountList: FC = () => {
                     {t('discount.list')}
                 </div>
 
-                <Link to={Pages.discount.create}>
-                    <Button
-                        className='w-[172px]'
-                    >
-                        <div className='flex gap-2 items-center'>
-                            <Add size={20} color='white' />
-                            <div>
-                                {t('discount.add_new_discount')}
+                {canCreate('discounts') &&
+                    <Link to={Pages.discount.create}>
+                        <Button
+                            className='w-[172px]'
+                        >
+                            <div className='flex gap-2 items-center'>
+                                <Add size={20} color='white' />
+                                <div>
+                                    {t('discount.add_new_discount')}
+                                </div>
                             </div>
-                        </div>
-                    </Button>
-                </Link>
+                        </Button>
+                    </Link>
+                }
             </div>
 
 
@@ -114,17 +118,21 @@ const DiscountList: FC = () => {
                                                 </Td>
                                                 <Td text={t('')}>
                                                     <div className='flex gap-2 items-center'>
-                                                        <Link
-                                                            to={Pages.discount.detail + item.id}
-                                                        >
-                                                            <Edit size={20} color='#888888' />
-                                                        </Link>
+                                                        {canUpdate('discounts') &&
+                                                            <Link
+                                                                to={Pages.discount.detail + item.id}
+                                                            >
+                                                                <Edit size={20} color='#888888' />
+                                                            </Link>
+                                                        }
 
-                                                        <Trash
-                                                            size={20}
-                                                            color='#888888'
-                                                            onClick={() => handleDelete(item.id)}
-                                                        />
+                                                        {canDelete('discounts') &&
+                                                            <Trash
+                                                                size={20}
+                                                                color='#888888'
+                                                                onClick={() => handleDelete(item.id)}
+                                                            />
+                                                        }
                                                     </div>
                                                 </Td>
                                             </tr>

src/pages/guide/List.tsx

@@ -12,6 +12,7 @@ import Td from '../../components/Td'
 import StatusWithText from '../../components/StatusWithText'
 import TrashWithConfrim from '../../components/TrashWithConfrim'
 import { useDeleteGuide } from './hooks/useGuideData'
+import { usePermissions } from '../../hooks/usePermissions'
 
 type GuideItem = {
     id: string;
@@ -24,6 +25,7 @@ type GuideItem = {
 
 const List: FC = () => {
     const { t } = useTranslation('global')
+    const { canCreate, canUpdate, canDelete } = usePermissions()
     const { id } = useParams()
     const getGuides = useGetGuides(id || '')
     const deleteGuide = useDeleteGuide(id || '')
@@ -36,21 +38,23 @@ const List: FC = () => {
                 <div>
                     {t('guide.list_guide')}
                 </div>
-                <div>
-                    <Link to={Pages.services.guide + id + '/create'}>
-                        <Button
-                            className='px-5'
-                        >
-                            <div className='flex gap-2'>
-                                <Add
-                                    className='size-5'
-                                    color='#fff'
-                                />
-                                <div>{t('guide.submit_guide')}</div>
-                            </div>
-                        </Button>
-                    </Link>
-                </div>
+                {canCreate('services') && (
+                    <div>
+                        <Link to={Pages.services.guide + id + '/create'}>
+                            <Button
+                                className='px-5'
+                            >
+                                <div className='flex gap-2'>
+                                    <Add
+                                        className='size-5'
+                                        color='#fff'
+                                    />
+                                    <div>{t('guide.submit_guide')}</div>
+                                </div>
+                            </Button>
+                        </Link>
+                    </div>
+                )}
             </div>
 
             {
@@ -85,13 +89,17 @@ const List: FC = () => {
                                             </Td>
                                             <Td text=''>
                                                 <div className='flex items-center gap-2'>
-                                                    <Link to={Pages.services.guide + id + '/' + item.id}>
-                                                        <Eye size={20} color='#8C90A3' />
-                                                    </Link>
-                                                    <TrashWithConfrim
-                                                        onDelete={() => deleteGuide.mutate(item.id)}
-                                                        isLoading={deleteGuide.isPending}
-                                                    />
+                                                    {canUpdate('services') && (
+                                                        <Link to={Pages.services.guide + id + '/' + item.id}>
+                                                            <Eye size={20} color='#8C90A3' />
+                                                        </Link>
+                                                    )}
+                                                    {canDelete('services') && (
+                                                        <TrashWithConfrim
+                                                            onDelete={() => deleteGuide.mutate(item.id)}
+                                                            isLoading={deleteGuide.isPending}
+                                                        />
+                                                    )}
                                                 </div>
                                             </Td>
                                         </tr>

src/pages/learning/Category.tsx

@@ -6,6 +6,7 @@ import Pagination from '../../components/Pagination'
 import { useGetCategory } from './hooks/useLearningData'
 import { CategoryLearningType } from './types/LearningTypes'
 import CreateCategory from './components/CreateCategory'
+import { usePermissions } from '../../hooks/usePermissions'
 
 
 const LearningCategory: FC = () => {
@@ -13,6 +14,7 @@ const LearningCategory: FC = () => {
     const { t } = useTranslation('global')
     const [page, setPage] = useState<number>(1)
     const getCategory = useGetCategory()
+    const { canCreate } = usePermissions()
 
     return (
         <div className='mt-4'>
@@ -65,7 +67,9 @@ const LearningCategory: FC = () => {
                     </div>
                 </div>
 
-                <CreateCategory />
+                {canCreate('learnings') && (
+                    <CreateCategory />
+                )}
             </div>
         </div>
     )

src/pages/learning/List.tsx

@@ -9,11 +9,13 @@ import PageLoading from '../../components/PageLoading'
 import Td from '../../components/Td'
 import { LearningItemType } from './types/LearningTypes'
 import Pagination from '../../components/Pagination'
+import { usePermissions } from '../../hooks/usePermissions'
 const LearningList: FC = () => {
 
     const { t } = useTranslation('global')
     const [page, setPage] = useState<number>(1)
     const getLearning = useGetLearning(page)
+    const { canCreate } = usePermissions()
 
     return (
         <div className='mt-4'>
@@ -21,21 +23,23 @@ const LearningList: FC = () => {
                 <div>
                     {t('learning.list_learning')}
                 </div>
-                <div>
-                    <Link to={Pages.learning.create}>
-                        <Button
-                            className='px-5'
-                        >
-                            <div className='flex gap-2'>
-                                <Add
-                                    className='size-5'
-                                    color='#fff'
-                                />
-                                <div>{t('learning.submit_learning')}</div>
-                            </div>
-                        </Button>
-                    </Link>
-                </div>
+                {canCreate('learnings') && (
+                    <div>
+                        <Link to={Pages.learning.create}>
+                            <Button
+                                className='px-5'
+                            >
+                                <div className='flex gap-2'>
+                                    <Add
+                                        className='size-5'
+                                        color='#fff'
+                                    />
+                                    <div>{t('learning.submit_learning')}</div>
+                                </div>
+                            </Button>
+                        </Link>
+                    </div>
+                )}
             </div>
 
             {

src/pages/payment/List.tsx

@@ -10,10 +10,12 @@ import Pagination from '../../components/Pagination'
 import moment from 'moment-jalaali'
 import Accept from './components/Accept'
 import Reject from './components/Reject'
+import { usePermissions } from '../../hooks/usePermissions'
 
 const PaymentList: FC = () => {
 
     const { t } = useTranslation('global')
+    const { canUpdate } = usePermissions()
     const [page, setPage] = useState<number>(1)
     const [pageGateWay, setPageGateWay] = useState<number>(1)
     const [activeTab, setActiveTab] = useState<PaymentStatusType>('GATEWAY')
@@ -140,7 +142,7 @@ const PaymentList: FC = () => {
                                                                     <Td text={t(`payment.${item.status}`)} />
                                                                     <Td text={''}>
                                                                         {
-                                                                            item.status === 'PENDING' &&
+                                                                            item.status === 'PENDING' && canUpdate('payments') &&
                                                                             <Fragment>
                                                                                 <div className='flex gap-2'>
                                                                                     <Accept

src/pages/profile/Profile.tsx

@@ -1,70 +1,31 @@
-import { FC, useCallback, useEffect, useState } from 'react'
+import { FC, useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import AvatarImage from '../../assets/images/avatar_image.png'
 import Button from '../../components/Button'
 import { DocumentUpload } from 'iconsax-react'
-import Input from '../../components/Input'
-import DatePickerComponent from '../../components/DatePicker'
 import { useGetProfile, useUpdateProfile } from './hooks/useProfileData'
 import Username from './components/Username'
 import { useDropzone } from 'react-dropzone'
-import { toast } from '../../components/Toast';
+import { toast } from '../../components/Toast'
 import { ErrorType } from '../../helpers/types'
 import { UpdateProfileType } from './types/ProfileTypes'
 import PageLoading from '../../components/PageLoading'
-import { useFormik } from 'formik'
-import * as Yup from 'yup'
 import Email from './components/Email'
 import Phone from './components/Phone'
-import { useGetProvines } from '../customer/hooks/useCustomerData'
+import FirstName from './components/FirstName'
+import LastName from './components/LastName'
+import BirthDate from './components/BirthDate'
+import NationalCode from './components/NationalCode'
 import { useSingleUpload } from '../service/hooks/useServiceData'
 
 const Profile: FC = () => {
 
     const { t } = useTranslation('global')
     const [file, setFile] = useState<File>()
-    const getProvines = useGetProvines()
     const getProfile = useGetProfile()
     const singleUpload = useSingleUpload()
     const updateProfile = useUpdateProfile()
 
-    const formik = useFormik<UpdateProfileType>({
-        initialValues: {
-            cityId: '',
-            userAddress: '',
-            postalCode: '',
-        },
-        validationSchema: Yup.object({
-            cityId: Yup.string().required(t('errors.required')),
-            userAddress: Yup.string().required(t('errors.required')),
-            postalCode: Yup.string().required(t('errors.required')),
-        }),
-        onSubmit: (values) => {
-            updateProfile.mutate(values, {
-                onSuccess: () => {
-                    toast(t('success'), 'success')
-                },
-                onError: (error: ErrorType) => {
-                    toast(error.response?.data?.error?.message[0], 'error')
-                }
-            })
-        }
-    })
-
-    useEffect(() => {
-
-        if (getProfile.data) {
-            formik.setValues({
-                cityId: getProfile.data.data.user.city?.id || '',
-                userAddress: getProfile.data.data.user.userAddress || '',
-                postalCode: getProfile.data.data.user.postalCode || '',
-            })
-        }
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [getProfile.data])
-
-
     const onDrop = useCallback((acceptedFiles: File[]) => {
 
         if (acceptedFiles.length > 0) {
@@ -83,12 +44,12 @@ const Profile: FC = () => {
                                 toast(t('profile.image_uploaded_successfully'), 'success')
                             },
                             onError: (error: ErrorType) => {
-                                toast(error.response?.data?.error?.message[0], 'error')
+                                toast(error.response?.data?.error?.message?.[0], 'error')
                             }
                         })
                     },
                     onError: (error: ErrorType) => {
-                        toast(error.response?.data?.error?.message[0], 'error')
+                        toast(error.response?.data?.error?.message?.[0], 'error')
                     }
                 })
             } else {
@@ -107,7 +68,7 @@ const Profile: FC = () => {
             </div>
 
             {
-                getProfile.isPending || getProvines.isPending ?
+                getProfile.isPending ?
                     <PageLoading />
                     :
                     <div className='bg-white rounded-3xl xl:p-6 p-4 mt-8 text-sm'>
@@ -175,87 +136,15 @@ const Profile: FC = () => {
                                 </div>
                             </div>
                             <div className='flex-1'>
-                                <DatePickerComponent
-                                    label={t('profile.date_of_birth')}
-                                    onChange={() => { }}
-                                    placeholder=''
-                                    defaulValue={getProfile.data?.data?.user?.birthDate}
-                                />
-
+                                <FirstName firstName={getProfile.data?.data?.user?.firstName} />
+                                <LastName lastName={getProfile.data?.data?.user?.lastName} />
                                 <div className='xl:mt-7 mt-4'>
-                                    <Input
-                                        label={t('profile.national_code')}
-                                        value={getProfile.data?.data?.user?.nationalCode}
-                                    />
+                                    <BirthDate birthDate={getProfile.data?.data?.user?.birthDate} />
                                 </div>
+                                <NationalCode nationalCode={getProfile.data?.data?.user?.nationalCode} />
                             </div>
                         </div>
 
-                        {/* <div className='mt-8 flex xl:flex-row flex-col xl:gap-0 gap-7'>
-                            <div className='flex-1'>
-                                <div>
-                                    {t('profile.address')}
-                                </div>
-                                <div className='text-description text-xs mt-2'>
-                                    {t('profile.address_live')}
-                                </div>
-                            </div>
-                            <div className='flex-1'>
-                                <div className='rowTwoInput'>
-                                    <Select
-                                        label={t('profile.province')}
-                                        items={getProvines.data?.data?.provinces.map((item: ProvinesItemType) => ({ label: item.name, value: item.id }))}
-                                        onChange={(e) => setProvinesId(e.target.value)}
-                                        className='bg-white border'
-                                        placeholder={t('select')}
-                                        value={provinesId}
-                                    />
-                                    <Select
-                                        label={t('profile.city')}
-                                        items={getCities.data?.data?.cities ? getCities.data?.data?.cities.map((item: ProvinesItemType) => ({ label: item.name, value: item.id })) : []}
-                                        placeholder={t('select')}
-                                        {...formik.getFieldProps('cityId')}
-                                        error_text={formik.touched.cityId && formik.errors.cityId ? formik.errors.cityId : ''}
-                                    />
-                                </div>
-
-                                <div className='xl:mt-7 mt-4'>
-                                    <Input
-                                        label={t('profile.postal_code')}
-                                        {...formik.getFieldProps('postalCode')}
-                                        error_text={formik.touched.postalCode && formik.errors.postalCode ? formik.errors.postalCode : ''}
-                                        value={formik.values.postalCode}
-                                    />
-                                </div>
-                                <div className='xl:mt-7 mt-4'>
-                                    <Textarea
-                                        label={t('profile.address')}
-                                        defaultValue={formik.values.userAddress}
-                                        {...formik.getFieldProps('userAddress')}
-                                        error_text={formik.touched.userAddress && formik.errors.userAddress ? formik.errors.userAddress : ''}
-                                    />
-                                </div>
-
-                                <div className='flex justify-end mt-5'>
-                                    <Button
-                                        className='xl:w-fit px-10'
-                                        onClick={() => formik.handleSubmit()}
-                                        isLoading={updateProfile.isPending}
-                                    >
-                                        <div className='flex gap-2 items-center'>
-                                            <TickCircle size={20} color='white' />
-                                            <div>
-                                                {t('save')}
-                                            </div>
-                                        </div>
-                                    </Button>
-                                </div>
-
-                            </div>
-
-
-                        </div> */}
-
                         <div className='h-20 xl:hidden'></div>
                     </div>
             }
@@ -264,4 +153,4 @@ const Profile: FC = () => {
     )
 }
 
-export default Profile
+export default Profile

src/pages/profile/components/BirthDate.tsx

@@ -0,0 +1,80 @@
+import { FC, useEffect, useState } from 'react'
+import Input from '../../../components/Input'
+import Button from '../../../components/Button'
+import DatePickerComponent from '../../../components/DatePicker'
+import { Edit } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import { useUpdateProfile } from '../hooks/useProfileData'
+import { UpdateProfileType } from '../types/ProfileTypes'
+import { toast } from '../../../components/Toast'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    birthDate: string | null | undefined
+}
+
+const BirthDate: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [value, setValue] = useState<string>(props.birthDate || '')
+    const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
+    const updateProfile = useUpdateProfile()
+
+    useEffect(() => {
+        setValue(props.birthDate || '')
+    }, [props.birthDate])
+
+    const handleSave = () => {
+        const params: UpdateProfileType = { birthDate: value }
+        updateProfile.mutate(params, {
+            onSuccess: () => {
+                toast(t('success'), 'success')
+                setIsReadOnly(true)
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error?.message?.[0], 'error')
+            }
+        })
+    }
+
+    const isDisabled = !value || value === (props.birthDate || '')
+
+    return (
+        <div className='flex items-end xl:gap-6 gap-3'>
+            {
+                isReadOnly ? (
+                    <Input
+                        label={t('profile.date_of_birth')}
+                        value={value}
+                        readOnly
+                    />
+                ) : (
+                    <DatePickerComponent
+                        label={t('profile.date_of_birth')}
+                        onChange={setValue}
+                        placeholder=''
+                        defaulValue={value}
+                    />
+                )
+            }
+            {
+                isReadOnly ? (
+                    <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
+                        <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                        <div>{t('edit')}</div>
+                    </div>
+                ) : (
+                    <Button
+                        label={t('save')}
+                        className='px-4 w-fit'
+                        disabled={isDisabled}
+                        onClick={handleSave}
+                        isLoading={updateProfile.isPending}
+                    />
+                )
+            }
+        </div>
+    )
+}
+
+export default BirthDate

src/pages/profile/components/Email.tsx

@@ -1,14 +1,12 @@
-import { FC, Fragment, useState } from 'react'
+import { FC, Fragment, useEffect, useState } from 'react'
 import Input from '../../../components/Input'
-import { Edit, TickCircle } from 'iconsax-react'
+import { Edit } from 'iconsax-react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../../components/Button'
 import { isEmail } from '../../../config/func'
-import DefaulModal from '../../../components/DefaulModal'
-import OTPInput from 'react-otp-input'
 import { useUpdateEmail } from '../hooks/useProfileData'
 import { ErrorType } from '../../../helpers/types'
-import { toast } from '../../../components/Toast';
+import { toast } from '../../../components/Toast'
 
 type Props = {
     email: string | null,
@@ -20,17 +18,20 @@ const Email: FC<Props> = (props: Props) => {
     const { t } = useTranslation('global')
     const [email, setEmail] = useState<string>(props.email ? props.email : '')
     const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
-    const [showModal, setShowModal] = useState<boolean>(false)
-    const [code, setCode] = useState<string>('')
     const updateEmail = useUpdateEmail()
 
-    const handleShowModal = () => {
-        updateEmail.mutate({ email: email }, {
+    useEffect(() => {
+        setEmail(props.email ? props.email : '')
+    }, [props.email])
+
+    const handleSendVerification = () => {
+        updateEmail.mutate({ email }, {
             onSuccess: () => {
                 toast(t('profile.link_email'), 'success')
+                setIsReadOnly(true)
             },
             onError: (error: ErrorType) => {
-                toast(error.response?.data?.error.message[0], 'error')
+                toast(error.response?.data?.error?.message?.[0], 'error')
             }
         })
     }
@@ -45,17 +46,30 @@ const Email: FC<Props> = (props: Props) => {
                     onChange={(e) => setEmail(e.target.value)}
                 />
                 {
-                    !props.isVerified &&
+                    !props.isVerified && isReadOnly &&
                     <div className='text-[10px] absolute left-24 text-red-400 top-[34px]'>
                         {t('profile.email_not_verified')}
                     </div>
                 }
                 {
                     isReadOnly ?
-                        <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
-                            <Edit className='xl:size-[18px] size-4' color='#0047FF' />
-                            <div>
-                                {t('edit')}
+                        <div className='flex items-center gap-3 relative -top-3'>
+                            {
+                                !props.isVerified && !!email &&
+                                <button
+                                    type='button'
+                                    onClick={handleSendVerification}
+                                    disabled={updateEmail.isPending}
+                                    className='text-[#0047FF] text-xs whitespace-nowrap disabled:opacity-50'
+                                >
+                                    {t('profile.resend_email')}
+                                </button>
+                            }
+                            <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer gap-1 text-[#0047FF] text-xs items-center'>
+                                <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                                <div>
+                                    {t('edit')}
+                                </div>
                             </div>
                         </div>
                         :
@@ -63,65 +77,13 @@ const Email: FC<Props> = (props: Props) => {
                             label={t('save')}
                             className='px-4 w-fit'
                             disabled={!isEmail(email)}
-                            onClick={handleShowModal}
+                            onClick={handleSendVerification}
                             isLoading={updateEmail.isPending}
                         />
                 }
             </div>
-
-            <DefaulModal
-                open={showModal}
-                close={() => setShowModal(false)}
-                isHeader
-                title_header={t('profile.confrim_email')}
-            >
-                <div className='mt-7'>
-                    <div className='text-xs text-center'>
-                        کد تایید به ایمیل {email} ارسال شده است.برای تایید  کد مربوطه را وارد کنید.
-                    </div>
-
-                    <div className='mt-10'>کد تایید</div>
-                    <div className='mt-2 w-full flex justify-center dltr otp'>
-                        <OTPInput
-                            value={code}
-                            onChange={setCode}
-                            shouldAutoFocus
-                            renderInput={(props) =>
-                                <input
-                                    {...props}
-                                    type='tel'
-                                    autoComplete="one-time-code"
-                                    inputMode="numeric"
-                                    className='w-full h-[50px] flex-1 mx-2  bg-white bg-opacity-30 border rounded-2.5' />
-                            }
-                        />
-                    </div>
-
-                    <div className='mt-14 flex justify-end border-t border-border pt-8'>
-                        <div className='flex gap-5'>
-                            <Button
-                                className='bg-white bg-opacity-40 text-description w-[150px] text-xs'
-                                label='لغو'
-                                onClick={() => setShowModal(false)}
-                            />
-                            <Button
-                                className='w-[150px] text-xs'
-                            >
-                                <div className='flex gap-2 items-center'>
-                                    <TickCircle
-                                        size={20}
-                                        color='white'
-                                    />
-                                    <div>{t('wallet.submit_slip')}</div>
-                                </div>
-                            </Button>
-                        </div>
-                    </div>
-                </div>
-
-            </DefaulModal>
         </Fragment>
     )
 }
 
-export default Email
+export default Email

src/pages/profile/components/FirstName.tsx

@@ -0,0 +1,69 @@
+import { FC, useEffect, useState } from 'react'
+import Input from '../../../components/Input'
+import Button from '../../../components/Button'
+import { Edit } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import { useUpdateProfile } from '../hooks/useProfileData'
+import { UpdateProfileType } from '../types/ProfileTypes'
+import { toast } from '../../../components/Toast'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    firstName: string | null | undefined
+}
+
+const FirstName: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [value, setValue] = useState<string>(props.firstName || '')
+    const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
+    const updateProfile = useUpdateProfile()
+
+    useEffect(() => {
+        setValue(props.firstName || '')
+    }, [props.firstName])
+
+    const handleSave = () => {
+        const params: UpdateProfileType = { firstName: value.trim() }
+        updateProfile.mutate(params, {
+            onSuccess: () => {
+                toast(t('success'), 'success')
+                setIsReadOnly(true)
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error?.message?.[0], 'error')
+            }
+        })
+    }
+
+    const isDisabled = value.trim().length < 2 || value.trim() === (props.firstName || '')
+
+    return (
+        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
+            <Input
+                label={t('profile.first_name')}
+                value={value}
+                readOnly={isReadOnly}
+                onChange={(e) => setValue(e.target.value)}
+            />
+            {
+                isReadOnly ? (
+                    <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
+                        <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                        <div>{t('edit')}</div>
+                    </div>
+                ) : (
+                    <Button
+                        label={t('save')}
+                        className='px-4 w-fit'
+                        disabled={isDisabled}
+                        onClick={handleSave}
+                        isLoading={updateProfile.isPending}
+                    />
+                )
+            }
+        </div>
+    )
+}
+
+export default FirstName

src/pages/profile/components/LastName.tsx

@@ -0,0 +1,69 @@
+import { FC, useEffect, useState } from 'react'
+import Input from '../../../components/Input'
+import Button from '../../../components/Button'
+import { Edit } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import { useUpdateProfile } from '../hooks/useProfileData'
+import { UpdateProfileType } from '../types/ProfileTypes'
+import { toast } from '../../../components/Toast'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    lastName: string | null | undefined
+}
+
+const LastName: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [value, setValue] = useState<string>(props.lastName || '')
+    const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
+    const updateProfile = useUpdateProfile()
+
+    useEffect(() => {
+        setValue(props.lastName || '')
+    }, [props.lastName])
+
+    const handleSave = () => {
+        const params: UpdateProfileType = { lastName: value.trim() }
+        updateProfile.mutate(params, {
+            onSuccess: () => {
+                toast(t('success'), 'success')
+                setIsReadOnly(true)
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error?.message?.[0], 'error')
+            }
+        })
+    }
+
+    const isDisabled = value.trim().length < 2 || value.trim() === (props.lastName || '')
+
+    return (
+        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
+            <Input
+                label={t('profile.last_name')}
+                value={value}
+                readOnly={isReadOnly}
+                onChange={(e) => setValue(e.target.value)}
+            />
+            {
+                isReadOnly ? (
+                    <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
+                        <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                        <div>{t('edit')}</div>
+                    </div>
+                ) : (
+                    <Button
+                        label={t('save')}
+                        className='px-4 w-fit'
+                        disabled={isDisabled}
+                        onClick={handleSave}
+                        isLoading={updateProfile.isPending}
+                    />
+                )
+            }
+        </div>
+    )
+}
+
+export default LastName

src/pages/profile/components/NationalCode.tsx

@@ -0,0 +1,74 @@
+import { FC, useEffect, useState } from 'react'
+import Input from '../../../components/Input'
+import Button from '../../../components/Button'
+import { Edit } from 'iconsax-react'
+import { useTranslation } from 'react-i18next'
+import { useUpdateProfile } from '../hooks/useProfileData'
+import { UpdateProfileType } from '../types/ProfileTypes'
+import { toast } from '../../../components/Toast'
+import { ErrorType } from '../../../helpers/types'
+
+type Props = {
+    nationalCode: string | null | undefined
+}
+
+const NationalCode: FC<Props> = (props: Props) => {
+
+    const { t } = useTranslation('global')
+    const [value, setValue] = useState<string>(props.nationalCode || '')
+    const [isReadOnly, setIsReadOnly] = useState<boolean>(true)
+    const updateProfile = useUpdateProfile()
+
+    useEffect(() => {
+        setValue(props.nationalCode || '')
+    }, [props.nationalCode])
+
+    const handleSave = () => {
+        const params: UpdateProfileType = { nationalCode: value }
+        updateProfile.mutate(params, {
+            onSuccess: () => {
+                toast(t('success'), 'success')
+                setIsReadOnly(true)
+            },
+            onError: (error: ErrorType) => {
+                toast(error.response?.data?.error?.message?.[0], 'error')
+            }
+        })
+    }
+
+    const isDisabled = value.length !== 10 || value === (props.nationalCode || '')
+
+    return (
+        <div className='flex items-end xl:gap-6 gap-3 xl:mt-7 mt-4'>
+            <Input
+                label={t('profile.national_code')}
+                value={value}
+                readOnly={isReadOnly}
+                onChange={(e) => {
+                    const next = e.target.value.replace(/\D/g, '').slice(0, 10)
+                    setValue(next)
+                }}
+                inputMode='numeric'
+                maxLength={10}
+            />
+            {
+                isReadOnly ? (
+                    <div onClick={() => setIsReadOnly(false)} className='flex cursor-pointer relative -top-3 gap-1 text-[#0047FF] text-xs items-center'>
+                        <Edit className='xl:size-[18px] size-4' color='#0047FF' />
+                        <div>{t('edit')}</div>
+                    </div>
+                ) : (
+                    <Button
+                        label={t('save')}
+                        className='px-4 w-fit'
+                        disabled={isDisabled}
+                        onClick={handleSave}
+                        isLoading={updateProfile.isPending}
+                    />
+                )
+            }
+        </div>
+    )
+}
+
+export default NationalCode

src/pages/profile/hooks/useProfileData.tsx

@@ -1,4 +1,4 @@
-import { useMutation, useQuery } from '@tanstack/react-query';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import * as api from '../service/ProfileService'
 import { CheckUserNameType, UpdateEmailType, UpdatePhoneType, UpdateProfileType, VerifyPhoneType } from '../types/ProfileTypes';
 
@@ -16,14 +16,22 @@ export const useCheckUserName = () => {
 };
 
 export const useUpdateProfile = () => {
+    const queryClient = useQueryClient();
     return useMutation({
         mutationFn: (variables: UpdateProfileType) => api.updateProfile(variables),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["profile"] });
+        },
     });
 };
 
 export const useUpdateEmail = () => {
+    const queryClient = useQueryClient();
     return useMutation({
         mutationFn: (variables: UpdateEmailType) => api.updateEmail(variables),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["profile"] });
+        },
     });
 };
 
@@ -34,7 +42,11 @@ export const useUpdatePhone = () => {
 };
 
 export const useVerifyPhone = () => {
+    const queryClient = useQueryClient();
     return useMutation({
         mutationFn: (variables: VerifyPhoneType) => api.verifyPhone(variables),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: ["profile"] });
+        },
     });
-};
+};

src/pages/profile/types/ProfileTypes.ts

@@ -7,6 +7,7 @@ export type UpdateProfileType = {
   firstName?: string;
   lastName?: string;
   birthDate?: string;
+  nationalCode?: string;
   userName?: string;
   profilePic?: string;
   cityId?: string;

src/pages/receipts/Create.tsx

@@ -1,480 +1,445 @@
-import { ChangeEvent, FC, Fragment, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Button from '../../components/Button'
-import { Add, TickCircle, TickSquare, Trash } from 'iconsax-react'
-import Select from '../../components/Select'
-import Input from '../../components/Input'
-import { CreateReceiptType, ReceiptCreateItemsType } from './types/ReceiptTypes'
-import { useFormik } from 'formik'
-import * as Yup from 'yup'
-import { toast } from '../../components/Toast';
-import { useGetCustomers } from '../customer/hooks/useCustomerData'
-import { CustomerItemType } from '../customer/types/CustomerTypes'
-import PageLoading from '../../components/PageLoading'
-import { useCreateInvoice } from './hooks/useReceiptData'
-import { useNavigate } from 'react-router-dom'
-import { Pages } from '../../config/Pages'
-import { ErrorType } from '../../helpers/types'
-import { RecurringPeriodEnum } from './enum/ReceipEnum'
-import SwitchComponent from '../../components/Switch'
+import { useFormik } from "formik";
+import { Add, TickCircle, TickSquare, Trash } from "iconsax-react";
+import { ChangeEvent, FC, Fragment, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import * as Yup from "yup";
+import Button from "../../components/Button";
+import Input from "../../components/Input";
+import PageLoading from "../../components/PageLoading";
+import Select from "../../components/Select";
+import SwitchComponent from "../../components/Switch";
+import { toast } from "../../components/Toast";
+import { Pages } from "../../config/Pages";
+import { ErrorType } from "../../helpers/types";
+import { useGetCustomers } from "../customer/hooks/useCustomerData";
+import { CustomerItemType } from "../customer/types/CustomerTypes";
+import { RecurringPeriodEnum } from "./enum/ReceipEnum";
+import { useCreateInvoice } from "./hooks/useReceiptData";
+import { CreateReceiptType, ReceiptCreateItemsType } from "./types/ReceiptTypes";
 const CreateReceipt: FC = () => {
+  const navigate = useNavigate();
+  const { t } = useTranslation("global");
+  const [items, setItems] = useState<ReceiptCreateItemsType[]>([]);
+  const [customer, setCustomer] = useState<CustomerItemType>();
+  const [isRecurring, setIsRecurring] = useState<boolean>(false);
+  const [type, setType] = useState<RecurringPeriodEnum>(RecurringPeriodEnum.WEEKLY);
+  const [maxRecurringCycles, setMaxRecurringCycles] = useState<number>(0);
+  const getCustomers = useGetCustomers(1, 50, true);
+  const createInvoice = useCreateInvoice();
 
-    const navigate = useNavigate()
-    const { t } = useTranslation('global')
-    const [items, setItems] = useState<ReceiptCreateItemsType[]>([])
-    const [customer, setCustomer] = useState<CustomerItemType>()
-    const [isRecurring, setIsRecurring] = useState<boolean>(false)
-    const [type, setType] = useState<RecurringPeriodEnum>(RecurringPeriodEnum.WEEKLY)
-    const [maxRecurringCycles, setMaxRecurringCycles] = useState<number>(0)
-    const getCustomers = useGetCustomers(1, true)
-    const createInvoice = useCreateInvoice()
-
-    const formik = useFormik<ReceiptCreateItemsType>({
-        initialValues: {
-            name: '',
-            count: '',
-            unitPrice: '',
-            discount: ''
+  const formik = useFormik<ReceiptCreateItemsType>({
+    initialValues: {
+      name: "",
+      count: "",
+      unitPrice: "",
+      discount: "",
+    },
+    validationSchema: Yup.object({
+      name: Yup.string().required(t("errors.required")),
+      count: Yup.string().required(t("errors.required")),
+      unitPrice: Yup.string().required(t("errors.required")),
+    }),
+    onSubmit: (values) => {
+      setItems((prev) => [
+        ...prev,
+        {
+          count: +values.count,
+          discount: +values.discount,
+          name: values.name,
+          unitPrice: +values.unitPrice,
         },
-        validationSchema: Yup.object({
-            name: Yup.string().required(t('errors.required')),
-            count: Yup.string().required(t('errors.required')),
-            unitPrice: Yup.string().required(t('errors.required')),
-        }),
-        onSubmit: (values) => {
-            setItems((prev) => [...prev, {
-                count: +values.count,
-                discount: +values.discount,
-                name: values.name,
-                unitPrice: +values.unitPrice
-            }])
-            formik.resetForm()
-        }
-    })
+      ]);
+      formik.resetForm();
+    },
+  });
 
-    const handleChangeCustomer = (e: ChangeEvent<HTMLSelectElement>) => {
-        const value = e.target.value
-        const customer = getCustomers.data?.data?.customers?.find((item: CustomerItemType) => item.id === value)
-        setCustomer(customer)
+  const handleChangeCustomer = (e: ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value;
+    const customer = getCustomers.data?.data?.customers?.find((item: CustomerItemType) => item.id === value);
+    setCustomer(customer);
+  };
+
+  const handleSubmit = () => {
+    if (customer) {
+      const params: CreateReceiptType = {
+        userId: customer?.id,
+        items: items,
+        isRecurring: isRecurring,
+        recurringPeriod: isRecurring ? +type : undefined,
+        maxRecurringCycles: isRecurring ? maxRecurringCycles : undefined,
+      };
+
+      createInvoice.mutate(params, {
+        onSuccess: () => {
+          toast(t("success"), "success");
+          navigate(Pages.receipts.index);
+        },
+        onError(error: ErrorType) {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      });
     }
+  };
 
-    const handleSubmit = () => {
-        if (customer) {
-            const params: CreateReceiptType = {
-                userId: customer?.id,
-                items: items,
-                isRecurring: isRecurring,
-                recurringPeriod: isRecurring ? +type : undefined,
-                maxRecurringCycles: isRecurring ? maxRecurringCycles : undefined
-            }
+  const handleRemove = (index: number) => {
+    setItems((prev) => prev.filter((_, i) => i !== index));
+  };
 
-            createInvoice.mutate(params, {
-                onSuccess: () => {
-                    toast(t('success'), 'success')
-                    navigate(Pages.receipts.index)
-                },
-                onError(error: ErrorType) {
-                    toast(error.response?.data?.error.message[0], 'error')
-                },
-            })
-        }
-    }
+  return (
+    <div className="mt-4">
+      {getCustomers.isPending ? (
+        <PageLoading />
+      ) : (
+        <Fragment>
+          <div className="flex justify-between items-center">
+            <div>{t("receip.add_receip")}</div>
+            <div>
+              <Button
+                className="px-5"
+                onClick={handleSubmit}
+                isLoading={createInvoice.isPending}
+              >
+                <div className="flex gap-2 items-center">
+                  <TickCircle
+                    size={20}
+                    color="white"
+                  />
+                  <div>{t("receip.submit_receip")}</div>
+                </div>
+              </Button>
+            </div>
+          </div>
 
-    const handleRemove = (index: number) => {
-        setItems((prev) => prev.filter((_, i) => i !== index))
-    }
+          <div className="flex gap-6 xl:mt-8 mt-4">
+            <div className="flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl">
+              <div>{t("receip.customer_information")}</div>
 
+              <div className="mt-8">
+                <div className="w-full xl:w-1/2">
+                  <Select
+                    label={t("receip.customer")}
+                    placeholder={t("select")}
+                    items={getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
+                      return {
+                        label: item.firstName + " " + item.lastName,
+                        value: item.id,
+                      };
+                    })}
+                    onChange={handleChangeCustomer}
+                  />
+                </div>
+              </div>
 
-    return (
-        <div className='mt-4'>
-            {
-                getCustomers.isPending ?
-                    <PageLoading />
-                    :
-                    <Fragment>
-                        <div className='flex justify-between items-center'>
-                            <div>
-                                {t('receip.add_receip')}
-                            </div>
-                            <div>
-                                <Button
-                                    className='px-5'
-                                    onClick={handleSubmit}
-                                    isLoading={createInvoice.isPending}
-                                >
-                                    <div className='flex gap-2 items-center'>
-                                        <TickCircle size={20} color='white' />
-                                        <div>
-                                            {t('receip.submit_receip')}
-                                        </div>
-                                    </div>
-                                </Button>
-                            </div>
-                        </div>
+              {customer && (
+                <div className="mt-10 bg-[#F6F7FB] p-8 rounded-3xl text-sm">
+                  <div className="flex justify-between items-center  border-b border-border border-dashed pb-7">
+                    <div className="flex items-center gap-2">
+                      <div className="text-description">{t("receip.type_person")}</div>
+                      <div>{customer.legalUser ? "حقوقی" : "حقیقی"}</div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="text-description">{t("receip.representativeـname")}</div>
+                      <div>{customer.firstName + " " + customer.lastName}</div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="text-description">{t("receip.company_name")}</div>
+                      <div>{customer?.legalUser?.registrationName}</div>
+                    </div>
+                    <div className="flex items-center gap-2">
+                      <div className="text-description">{t("receip.registration_number")}</div>
+                      <div>{customer?.legalUser?.registrationCode}</div>
+                    </div>
+                  </div>
+                  <div className="flex justify-between items-center mt-7">
+                    <div className="flex items-center gap-2 flex-1">
+                      <div className="text-description">{t("receip.tel_company")}</div>
+                      <div>{customer?.realUser?.phone || customer?.legalUser?.phone}</div>
+                    </div>
+                    <div className="flex items-center gap-2 flex-1">
+                      <div className="text-description">{t("receip.national_code")}</div>
+                      <div>{customer.nationalCode}</div>
+                    </div>
+                    <div className="flex items-center gap-2 flex-1">
+                      <div className="text-description">{t("receip.postal_code")}</div>
+                      <div>{customer?.realUser?.address?.postalCode || customer?.legalUser?.address?.postalCode}</div>
+                    </div>
+                  </div>
+                  <div className="flex justify-between items-center mt-7">
+                    <div className="flex items-center gap-2 flex-1">
+                      <div className="text-description">{t("receip.state")}</div>
+                      <div>{customer?.realUser?.address?.city?.province?.name || customer?.legalUser?.address?.city?.province?.name}</div>
+                    </div>
+                    <div className="flex items-center gap-2 flex-1">
+                      <div className="text-description">{t("receip.city")}</div>
+                      <div>{customer?.realUser?.address?.city?.name || customer?.legalUser?.address?.city?.name}</div>
+                    </div>
+                    <div className="flex items-center gap-2 flex-1">
+                      <div className="text-description">{t("receip.address")}</div>
+                      <div>{customer?.realUser?.address?.fullAddress || customer?.legalUser?.address?.fullAddress}</div>
+                    </div>
+                  </div>
+                </div>
+              )}
 
-                        <div className='flex gap-6 xl:mt-8 mt-4'>
-                            <div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
-                                <div>
-                                    {t('receip.customer_information')}
-                                </div>
+              <div className="mt-10">
+                <SwitchComponent
+                  label={t("receip.recurring")}
+                  active={isRecurring}
+                  onChange={(value) => setIsRecurring(value)}
+                />
+              </div>
 
-                                <div className='mt-8'>
-                                    <div className='w-full xl:w-1/2'>
-                                        <Select
-                                            label={t('receip.customer')}
-                                            placeholder={t('select')}
-                                            items={getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
-                                                return {
-                                                    label: item.firstName + ' ' + item.lastName,
-                                                    value: item.id
-                                                }
-                                            })}
-                                            onChange={handleChangeCustomer}
-                                        />
-                                    </div>
-                                </div>
+              {isRecurring && (
+                <div className="mt-10">
+                  <div>{t("receip.select_type")}</div>
 
-                                {
-                                    customer &&
-                                    <div className='mt-10 bg-[#F6F7FB] p-8 rounded-3xl text-sm'>
-                                        <div className='flex justify-between items-center  border-b border-border border-dashed pb-7'>
-                                            <div className='flex items-center gap-2'>
-                                                <div className='text-description'>{t('receip.type_person')}</div>
-                                                <div>{customer.legalUser ? 'حقوقی' : 'حقیقی'}</div>
-                                            </div>
-                                            <div className='flex items-center gap-2'>
-                                                <div className='text-description'>{t('receip.representativeـname')}</div>
-                                                <div>{customer.firstName + ' ' + customer.lastName}</div>
-                                            </div>
-                                            <div className='flex items-center gap-2'>
-                                                <div className='text-description'>{t('receip.company_name')}</div>
-                                                <div>{customer?.legalUser?.registrationName}</div>
-                                            </div>
-                                            <div className='flex items-center gap-2'>
-                                                <div className='text-description'>{t('receip.registration_number')}</div>
-                                                <div>{customer?.legalUser?.registrationCode}</div>
-                                            </div>
-                                        </div>
-                                        <div className='flex justify-between items-center mt-7'>
-                                            <div className='flex items-center gap-2 flex-1'>
-                                                <div className='text-description'>{t('receip.tel_company')}</div>
-                                                <div>{customer?.realUser?.phone || customer?.legalUser?.phone}</div>
-                                            </div>
-                                            <div className='flex items-center gap-2 flex-1'>
-                                                <div className='text-description'>{t('receip.national_code')}</div>
-                                                <div>{customer.nationalCode}</div>
-                                            </div>
-                                            <div className='flex items-center gap-2 flex-1'>
-                                                <div className='text-description'>{t('receip.postal_code')}</div>
-                                                <div>{customer?.realUser?.address?.postalCode || customer?.legalUser?.address?.postalCode}</div>
-                                            </div>
-                                        </div>
-                                        <div className='flex justify-between items-center mt-7'>
-                                            <div className='flex items-center gap-2 flex-1'>
-                                                <div className='text-description'>{t('receip.state')}</div>
-                                                <div>{customer?.realUser?.address?.city?.province?.name || customer?.legalUser?.address?.city?.province?.name}</div>
-                                            </div>
-                                            <div className='flex items-center gap-2 flex-1'>
-                                                <div className='text-description'>{t('receip.city')}</div>
-                                                <div>{customer?.realUser?.address?.city?.name || customer?.legalUser?.address?.city?.name}</div>
-                                            </div>
-                                            <div className='flex items-center gap-2 flex-1'>
-                                                <div className='text-description'>{t('receip.address')}</div>
-                                                <div>{customer?.realUser?.address?.fullAddress || customer?.legalUser?.address?.fullAddress}</div>
-                                            </div>
-                                        </div>
-                                    </div>
-                                }
+                  <div className="mt-4 rowTwoInput">
+                    <Select
+                      label={t("select")}
+                      items={[
+                        { label: t("receip.WEEKLY"), value: RecurringPeriodEnum.WEEKLY.toString() },
+                        { label: t("receip.MONTHLY"), value: RecurringPeriodEnum.MONTHLY.toString() },
+                        { label: t("receip.QUARTERLY"), value: RecurringPeriodEnum.QUARTERLY.toString() },
+                        { label: t("receip.SEMIANNUALLY"), value: RecurringPeriodEnum.SEMIANNUALLY.toString() },
+                        { label: t("receip.ANNUALLY"), value: RecurringPeriodEnum.ANNUALLY.toString() },
+                      ]}
+                      onChange={(e) => setType(e.target.value as unknown as RecurringPeriodEnum)}
+                    />
 
-                                <div className='mt-10'>
-                                    <SwitchComponent
-                                        label={t('receip.recurring')}
-                                        active={isRecurring}
-                                        onChange={(value) => setIsRecurring(value)}
-                                    />
-                                </div>
+                    <Input
+                      label={t("receip.maxRecurringCycles")}
+                      name="maxRecurringCycles"
+                      value={maxRecurringCycles}
+                      onChange={(e) => setMaxRecurringCycles(+e.target.value)}
+                    />
+                  </div>
+                </div>
+              )}
 
-                                {
-                                    isRecurring &&
-                                    <div className='mt-10'>
-                                        <div>
-                                            {t('receip.select_type')}
-                                        </div>
+              <div className="mt-10">
+                <div>{t("receip.receipt_information")}</div>
+              </div>
 
-                                        <div className='mt-4 rowTwoInput'>
-                                            <Select
-                                                label={t('select')}
-                                                items={[
-                                                    { label: t('receip.WEEKLY'), value: RecurringPeriodEnum.WEEKLY.toString() },
-                                                    { label: t('receip.MONTHLY'), value: RecurringPeriodEnum.MONTHLY.toString() },
-                                                    { label: t('receip.QUARTERLY'), value: RecurringPeriodEnum.QUARTERLY.toString() },
-                                                    { label: t('receip.SEMIANNUALLY'), value: RecurringPeriodEnum.SEMIANNUALLY.toString() },
-                                                    { label: t('receip.ANNUALLY'), value: RecurringPeriodEnum.ANNUALLY.toString() }
-                                                ]}
-                                                onChange={(e) => setType(e.target.value as unknown as RecurringPeriodEnum)}
-                                            />
+              <div className="mt-8 border-b border-dashed border-border pb-7 flex items-end justify-between text-xs text-description">
+                <div className="flex flex-col gap-2 items-center">
+                  <div>{t("receip.number")}</div>
+                  <div className="size-10  bg-[#EBEDF5] rounded-xl flex justify-center items-center">{items.length + 1}</div>
+                </div>
 
-                                            <Input
-                                                label={t('receip.maxRecurringCycles')}
-                                                name='maxRecurringCycles'
-                                                value={maxRecurringCycles}
-                                                onChange={(e) => setMaxRecurringCycles(+e.target.value)}
-                                            />
-                                        </div>
-                                    </div>
-                                }
+                <div className="flex flex-col gap-2 items-center">
+                  <div>{t("receip.product_name")}</div>
+                  <Input
+                    className="text-center"
+                    name="name"
+                    value={formik.values.name}
+                    onChange={formik.handleChange}
+                  />
+                </div>
 
-                                <div className='mt-10'>
-                                    <div>{t('receip.receipt_information')}</div>
-                                </div>
+                <div className="flex flex-col gap-2 items-center">
+                  <div>{t("receip.count")}</div>
+                  <Input
+                    type="number"
+                    className="w-16 text-center"
+                    name="count"
+                    value={formik.values.count}
+                    onChange={formik.handleChange}
+                  />
+                </div>
 
-                                <div className='mt-8 border-b border-dashed border-border pb-7 flex items-end justify-between text-xs text-description'>
-                                    <div className='flex flex-col gap-2 items-center'>
-                                        <div>
-                                            {t('receip.number')}
-                                        </div>
-                                        <div className='size-10  bg-[#EBEDF5] rounded-xl flex justify-center items-center'>
-                                            {items.length + 1}
-                                        </div>
-                                    </div>
+                <div className="flex flex-col gap-2 items-center">
+                  <div>{t("receip.unit_amount")}</div>
+                  <Input
+                    className="text-center"
+                    name="unitPrice"
+                    value={formik.values.unitPrice}
+                    onChange={(e) => formik.setFieldValue("unitPrice", e.target.value)}
+                    seprator
+                  />
+                </div>
 
-                                    <div className='flex flex-col gap-2 items-center'>
-                                        <div>
-                                            {t('receip.product_name')}
-                                        </div>
-                                        <Input
-                                            className='text-center'
-                                            name='name'
-                                            value={formik.values.name}
-                                            onChange={formik.handleChange}
-                                        />
-                                    </div>
+                <div className="flex flex-col gap-2 items-center">
+                  <div>{t("receip.discount")}</div>
+                  <Input
+                    type="number"
+                    className="w-16 text-center"
+                    name="discount"
+                    value={formik.values.discount}
+                    onChange={formik.handleChange}
+                  />
+                </div>
 
-                                    <div className='flex flex-col gap-2 items-center'>
-                                        <div>
-                                            {t('receip.count')}
-                                        </div>
-                                        <Input
-                                            type='number'
-                                            className='w-16 text-center'
-                                            name='count'
-                                            value={formik.values.count}
-                                            onChange={formik.handleChange}
-                                        />
-                                    </div>
+                <div className="flex flex-col gap-2 items-center">
+                  <div>{t("receip.total_amount")}</div>
+                  <Input
+                    className="text-center bg-[#EBEDF5]"
+                    readOnly
+                  />
+                </div>
 
-                                    <div className='flex flex-col gap-2 items-center'>
-                                        <div>
-                                            {t('receip.unit_amount')}
-                                        </div>
-                                        <Input
-                                            className='text-center'
-                                            name='unitPrice'
-                                            value={formik.values.unitPrice}
-                                            onChange={(e) => formik.setFieldValue('unitPrice', e.target.value)}
-                                            seprator
-                                        />
-                                    </div>
+                <div
+                  onClick={() => {
+                    if (formik.errors.name || formik.errors.count || formik.errors.unitPrice || formik.errors.discount) {
+                      toast(t("receip.error_empty"), "error");
+                    } else {
+                      formik.handleSubmit();
+                    }
+                  }}
+                  className="size-10 border border-border rounded-xl flex justify-center items-center"
+                >
+                  <Add
+                    size={20}
+                    color="black"
+                  />
+                </div>
+              </div>
 
-                                    <div className='flex flex-col gap-2 items-center'>
-                                        <div>
-                                            {t('receip.discount')}
-                                        </div>
-                                        <Input
-                                            type='number'
-                                            className='w-16 text-center'
-                                            name='discount'
-                                            value={formik.values.discount}
-                                            onChange={formik.handleChange}
-                                        />
-                                    </div>
+              {items.map((item, index: number) => {
+                return (
+                  <div
+                    key={item.name}
+                    className="mt-6 flex items-end justify-between text-xs text-description"
+                  >
+                    <div className="flex flex-col gap-2 items-center">
+                      {index === 0 && <div>{t("receip.number")}</div>}
+                      <div className="size-10  bg-[#EBEDF5] rounded-xl flex justify-center items-center">{index + 1}</div>
+                    </div>
+                    <div className="flex flex-col gap-2 items-center">
+                      {index === 0 && <div>{t("receip.product_name")}</div>}
+                      <Input
+                        className="text-center"
+                        name="name"
+                        readOnly
+                        value={item.name}
+                      />
+                    </div>
 
-                                    <div className='flex flex-col gap-2 items-center'>
-                                        <div>
-                                            {t('receip.total_amount')}
-                                        </div>
-                                        <Input
-                                            className='text-center bg-[#EBEDF5]'
-                                            readOnly
-                                        />
-                                    </div>
+                    <div className="flex flex-col gap-2 items-center">
+                      {index === 0 && <div>{t("receip.count")}</div>}
+                      <Input
+                        type="number"
+                        className="w-16 text-center"
+                        name="count"
+                        readOnly
+                        value={item.count}
+                      />
+                    </div>
 
-                                    <div onClick={() => {
-                                        if (formik.errors.name || formik.errors.count || formik.errors.unitPrice || formik.errors.discount) {
-                                            toast(t('receip.error_empty'), 'error')
-                                        } else {
-                                            formik.handleSubmit()
-                                        }
-                                    }} className='size-10 border border-border rounded-xl flex justify-center items-center'>
-                                        <Add size={20} color='black' />
-                                    </div>
+                    <div className="flex flex-col gap-2 items-center">
+                      {index === 0 && <div>{t("receip.unit_amount")}</div>}
+                      <Input
+                        className="text-center"
+                        name="unitPrice"
+                        readOnly
+                        value={item.unitPrice}
+                        seprator
+                      />
+                    </div>
 
+                    <div className="flex flex-col gap-2 items-center">
+                      {index === 0 && <div>{t("receip.discount")}</div>}
+                      <Input
+                        type="number"
+                        className="w-16 text-center"
+                        name="discount"
+                        readOnly
+                        value={item.discount}
+                      />
+                    </div>
 
-                                </div>
+                    <div className="flex flex-col gap-2 items-center">
+                      {index === 0 && <div>{t("receip.total_amount")}</div>}
+                      <Input
+                        className="text-center bg-[#EBEDF5]"
+                        readOnly
+                        value={((Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0)).toFixed(1)}
+                        seprator
+                      />
+                    </div>
 
-                                {
-                                    items.map((item, index: number) => {
-                                        return (
-                                            <div key={item.name} className='mt-6 flex items-end justify-between text-xs text-description'>
-                                                <div className='flex flex-col gap-2 items-center'>
-                                                    {
-                                                        index === 0 &&
-                                                        <div>
-                                                            {t('receip.number')}
-                                                        </div>
-                                                    }
-                                                    <div className='size-10  bg-[#EBEDF5] rounded-xl flex justify-center items-center'>
-                                                        {index + 1}
-                                                    </div>
-                                                </div>
-                                                <div className='flex flex-col gap-2 items-center'>
-                                                    {
-                                                        index === 0 &&
-                                                        <div>
-                                                            {t('receip.product_name')}
-                                                        </div>
-                                                    }
-                                                    <Input
-                                                        className='text-center'
-                                                        name='name'
-                                                        readOnly
-                                                        value={item.name}
-                                                    />
-                                                </div>
+                    <div
+                      onClick={() => handleRemove(index)}
+                      className="size-10 border border-border rounded-xl flex justify-center items-center"
+                    >
+                      <Trash
+                        size={20}
+                        color="black"
+                      />
+                    </div>
+                  </div>
+                );
+              })}
 
-                                                <div className='flex flex-col gap-2 items-center'>
-                                                    {
-                                                        index === 0 &&
-                                                        <div>
-                                                            {t('receip.count')}
-                                                        </div>
-                                                    }
-                                                    <Input
-                                                        type='number'
-                                                        className='w-16 text-center'
-                                                        name='count'
-                                                        readOnly
-                                                        value={item.count}
-                                                    />
-                                                </div>
+              <div className="mt-8 flex flex-col gap-4 items-end">
+                <div className="xl:w-1/2 h-12 w-full rounded-xl flex px-4 bg-[#EBEDF5] text-sm text-description justify-between items-center">
+                  <div>{t("receip.tax")}</div>
+                  <div className="text-black">
+                    {(
+                      items.reduce(
+                        (acc, item) => acc + (Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0),
+                        0,
+                      ) * 0.1
+                    ).toFixed(1)}
+                  </div>
+                </div>
+                <div className="xl:w-1/2 h-12 w-full rounded-xl flex px-4 bg-[#EBEDF5] text-sm text-description justify-between items-center">
+                  <div>{t("receip.total")}</div>
+                  <div className="text-black">
+                    {(
+                      items.reduce(
+                        (acc, item) => acc + (Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0),
+                        0,
+                      ) * 1.1
+                    ).toFixed(1)}
+                  </div>
+                </div>
+              </div>
+            </div>
 
-                                                <div className='flex flex-col gap-2 items-center'>
-                                                    {
-                                                        index === 0 &&
-                                                        <div>
-                                                            {t('receip.unit_amount')}
-                                                        </div>
-                                                    }
-                                                    <Input
-                                                        className='text-center'
-                                                        name='unitPrice'
-                                                        readOnly
-                                                        value={item.unitPrice}
-                                                        seprator
-                                                    />
-                                                </div>
+            <div className="bg-white w-sidebar 3xl:block hidden py-10 px-5 h-fit rounded-3xl">
+              <div className="text-sm">{t("ticket.title_hint")}</div>
 
-                                                <div className='flex flex-col gap-2 items-center'>
-                                                    {
-                                                        index === 0 &&
-                                                        <div>
-                                                            {t('receip.discount')}
-                                                        </div>
-                                                    }
-                                                    <Input
-                                                        type='number'
-                                                        className='w-16 text-center'
-                                                        name='discount'
-                                                        readOnly
-                                                        value={item.discount}
-                                                    />
-                                                </div>
+              <div className="mt-6">
+                <div className="flex items-start gap-2 border-b pb-5">
+                  <div>
+                    <TickSquare
+                      size={20}
+                      color="black"
+                      variant="Bold"
+                    />
+                  </div>
+                  <div className="text-description text-xs leading-5">سوالات - مشکلاتی که به یک موضوع مربوط میشوند را در یک درخواست پشتیبانی پیگیر باشید و چند درخواست برای یک موضوع باز نکنید.</div>
+                </div>
+                <div className="flex items-start gap-2 mt-6 border-b pb-5">
+                  <div>
+                    <TickSquare
+                      size={20}
+                      color="black"
+                      variant="Bold"
+                    />
+                  </div>
+                  <div className="text-description text-xs leading-5">لطفاً برای بررسی و رفع مشکلات احتمالی صبور باشید بررسی و رفع مشکلات در برخی موارد زمان گیر است.</div>
+                </div>
+                <div className="flex items-start gap-2 mt-6">
+                  <div>
+                    <TickSquare
+                      size={20}
+                      color="black"
+                      variant="Bold"
+                    />
+                  </div>
+                  <div className="text-description text-xs leading-5">
+                    پاسخگویی 24 ساعته تلفنی را تنها از میهن وب هاست می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </Fragment>
+      )}
+    </div>
+  );
+};
 
-                                                <div className='flex flex-col gap-2 items-center'>
-                                                    {
-                                                        index === 0 &&
-                                                        <div>
-                                                            {t('receip.total_amount')}
-                                                        </div>
-                                                    }
-                                                    <Input
-                                                        className='text-center bg-[#EBEDF5]'
-                                                        readOnly
-                                                        value={((Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0)).toFixed(1)}
-                                                        seprator
-                                                    />
-                                                </div>
-
-                                                <div onClick={() => handleRemove(index)} className='size-10 border border-border rounded-xl flex justify-center items-center'>
-                                                    <Trash size={20} color='black' />
-                                                </div>
-                                            </div>
-                                        )
-                                    })
-                                }
-
-
-
-                                <div className='mt-8 flex flex-col gap-4 items-end'>
-                                    <div className='xl:w-1/2 h-12 w-full rounded-xl flex px-4 bg-[#EBEDF5] text-sm text-description justify-between items-center'>
-                                        <div>
-                                            {t('receip.tax')}
-                                        </div>
-                                        <div className='text-black'>
-                                            {((items.reduce((acc, item) => acc + (Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0), 0)) * 0.10).toFixed(1)}
-                                        </div>
-                                    </div>
-                                    <div className='xl:w-1/2 h-12 w-full rounded-xl flex px-4 bg-[#EBEDF5] text-sm text-description justify-between items-center'>
-                                        <div>
-                                            {t('receip.total')}
-                                        </div>
-                                        <div className='text-black'>
-                                            {(
-                                                items.reduce((acc, item) => acc + (Number(item.unitPrice) || 0) * (Number(item.count) || 0) - (Number(item.unitPrice) || 0) * (Number(item.count) || 0) * (Number(item.discount) / 100 || 0), 0) * 1.10
-                                            ).toFixed(1)}
-                                        </div>
-                                    </div>
-                                </div>
-
-                            </div>
-
-                            <div className='bg-white w-sidebar 3xl:block hidden py-10 px-5 h-fit rounded-3xl'>
-                                <div className='text-sm'>
-                                    {t('ticket.title_hint')}
-                                </div>
-
-                                <div className='mt-6'>
-                                    <div className='flex items-start gap-2 border-b pb-5'>
-                                        <div>
-                                            <TickSquare size={20} color='black' variant='Bold' />
-                                        </div>
-                                        <div className='text-description text-xs leading-5'>
-                                            سوالات - مشکلاتی که به یک موضوع مربوط میشوند را در یک درخواست پشتیبانی پیگیر باشید و چند درخواست برای یک موضوع باز نکنید.
-                                        </div>
-                                    </div>
-                                    <div className='flex items-start gap-2 mt-6 border-b pb-5'>
-                                        <div>
-                                            <TickSquare size={20} color='black' variant='Bold' />
-                                        </div>
-                                        <div className='text-description text-xs leading-5'>
-                                            لطفاً برای بررسی و رفع مشکلات احتمالی صبور باشید بررسی و رفع مشکلات در برخی موارد زمان گیر است.
-                                        </div>
-                                    </div>
-                                    <div className='flex items-start gap-2 mt-6'>
-                                        <div>
-                                            <TickSquare size={20} color='black' variant='Bold' />
-                                        </div>
-                                        <div className='text-description text-xs leading-5'>
-                                            پاسخگویی 24 ساعته تلفنی را تنها از میهن وب هاست می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </Fragment>
-            }
-        </div>
-    )
-}
-
-export default CreateReceipt
+export default CreateReceipt;

src/pages/receipts/List.tsx

@@ -17,10 +17,12 @@ import { Pages } from '../../config/Pages'
 import TrashWithConfrim from '../../components/TrashWithConfrim'
 import { ErrorType } from '../../helpers/types'
 import { toast } from '../../components/Toast';
+import { usePermissions } from '../../hooks/usePermissions'
 
 const ReceiptsList: FC = () => {
 
     const { t } = useTranslation('global')
+    const { canUpdate, canDelete } = usePermissions()
     const [page, setPage] = useState<number>(1)
     const [searchParams] = useSearchParams()
     const [activeTab, setActiveTab] = useState<InvoiceStatus>('PENDING')
@@ -177,13 +179,17 @@ const ReceiptsList: FC = () => {
                                                 </Td>
                                                 <Td text={''}>
                                                     <div className='flex gap-2'>
-                                                        <Link to={Pages.receipts.detail + item.id}>
-                                                            <Edit size={20} color='#888' />
-                                                        </Link>
-                                                        <TrashWithConfrim
-                                                            onDelete={() => handleDeleteInvoice(item.id)}
-                                                            isLoading={deleteInvoice.isPending}
-                                                        />
+                                                        {canUpdate('invoices') &&
+                                                            <Link to={Pages.receipts.detail + item.id}>
+                                                                <Edit size={20} color='#888' />
+                                                            </Link>
+                                                        }
+                                                        {canDelete('invoices') &&
+                                                            <TrashWithConfrim
+                                                                onDelete={() => handleDeleteInvoice(item.id)}
+                                                                isLoading={deleteInvoice.isPending}
+                                                            />
+                                                        }
                                                     </div>
                                                 </Td>
                                             </tr>

src/pages/reseller/List.tsx

@@ -8,10 +8,12 @@ import { useGetResellers } from './hooks/useResellerData'
 import PageLoading from '../../components/PageLoading'
 import Td from '../../components/Td'
 import { ResellerItemType } from './types/Types'
+import { usePermissions } from '../../hooks/usePermissions'
 
 const ResellerList: FC = () => {
 
     const { t } = useTranslation('global')
+    const { canCreate } = usePermissions()
     const getReseller = useGetResellers()
 
     return (
@@ -21,18 +23,20 @@ const ResellerList: FC = () => {
                     {t('reseller.list')}
                 </div>
 
-                <Link to={Pages.reseller.create}>
-                    <Button
-                        className='w-[172px]'
-                    >
-                        <div className='flex gap-2 items-center'>
-                            <Add size={20} color='white' />
-                            <div>
-                                {t('reseller.add_new')}
+                {canCreate('reseller') && (
+                    <Link to={Pages.reseller.create}>
+                        <Button
+                            className='w-[172px]'
+                        >
+                            <div className='flex gap-2 items-center'>
+                                <Add size={20} color='white' />
+                                <div>
+                                    {t('reseller.add_new')}
+                                </div>
                             </div>
-                        </div>
-                    </Button>
-                </Link>
+                        </Button>
+                    </Link>
+                )}
             </div>
 
             {

src/pages/service/Category.tsx

@@ -11,11 +11,13 @@ import StatusCategory from './components/StatusCategory'
 import Pagination from '../../components/Pagination'
 import UpdateCategory from './components/UpdateCategory'
 import { Trash } from 'iconsax-react'
+import { usePermissions } from '../../hooks/usePermissions'
 
 
 const Category: FC = () => {
 
     const { t } = useTranslation('global')
+    const { canCreate, canUpdate, canDelete } = usePermissions()
     const [search, setSearch] = useState<string>('')
     const [page, setPage] = useState<number>(1)
     const [isActive, setIsActive] = useState<'active' | 'deactive' | ''>('')
@@ -102,12 +104,16 @@ const Category: FC = () => {
                                                             </Td>
                                                             <Td text={''}>
                                                                 <div className='flex gap-2'>
-                                                                    <UpdateCategory refetch={() => getCategory.refetch()} id={item.id} />
-                                                                    <Trash
-                                                                        size={20}
-                                                                        color='#888888'
-                                                                        onClick={() => handleDelete(item.id)}
-                                                                    />
+                                                                    {canUpdate('services') && (
+                                                                        <UpdateCategory refetch={() => getCategory.refetch()} id={item.id} />
+                                                                    )}
+                                                                    {canDelete('services') && (
+                                                                        <Trash
+                                                                            size={20}
+                                                                            color='#888888'
+                                                                            onClick={() => handleDelete(item.id)}
+                                                                        />
+                                                                    )}
                                                                 </div>
                                                             </Td>
                                                         </tr>
@@ -130,7 +136,7 @@ const Category: FC = () => {
                     </div>
                 </div>
 
-                <CreateCategory />
+                {canCreate('services') && <CreateCategory />}
             </div>
         </div>
     )

src/pages/service/List.tsx

@@ -15,10 +15,12 @@ import Pagination from '../../components/Pagination'
 import ToggleStatusService from './components/ToggleStatusService'
 import CheckBoxComponent from '../../components/CheckBoxComponent'
 import ToggleSliderService from './components/ToggleSliderService'
+import { usePermissions } from '../../hooks/usePermissions'
 
 const ListService: FC = () => {
 
     const { t } = useTranslation('global')
+    const { canCreate, canUpdate } = usePermissions()
     const [category, setCategory] = useState<string>('')
     const [status, setstatus] = useState<'ACTIVE' | 'IN_ACTIVE' | ''>('')
     const [page, setPage] = useState<number>(1)
@@ -33,21 +35,23 @@ const ListService: FC = () => {
                 <div>
                     {t('service.list_service')}
                 </div>
-                <div>
-                    <Link to={Pages.services.add}>
-                        <Button
-                            className='px-5'
-                        >
-                            <div className='flex gap-2'>
-                                <Add
-                                    className='size-5'
-                                    color='#fff'
-                                />
-                                <div>{t('service.submit_service')}</div>
-                            </div>
-                        </Button>
-                    </Link>
-                </div>
+                {canCreate('services') && (
+                    <div>
+                        <Link to={Pages.services.add}>
+                            <Button
+                                className='px-5'
+                            >
+                                <div className='flex gap-2'>
+                                    <Add
+                                        className='size-5'
+                                        color='#fff'
+                                    />
+                                    <div>{t('service.submit_service')}</div>
+                                </div>
+                            </Button>
+                        </Link>
+                    </div>
+                )}
             </div>
 
             <div className='flex justify-between items-center mt-12'>
@@ -134,16 +138,18 @@ const ListService: FC = () => {
                                                 <Td text=''>
                                                     {
                                                         item.subscriptionCount === 0 ?
-                                                            <Link to={Pages.services.plan + item.id}>
-                                                                <Button
-                                                                    className='h-8 bg-transparent border border-black text-black  text-xs'
-                                                                >
-                                                                    <div className='flex gap-2 items-center'>
-                                                                        <Add size={20} color='black' />
-                                                                        <div>{t('service.add_plan')}</div>
-                                                                    </div>
-                                                                </Button>
-                                                            </Link>
+                                                            (canCreate('services') &&
+                                                                <Link to={Pages.services.plan + item.id}>
+                                                                    <Button
+                                                                        className='h-8 bg-transparent border border-black text-black  text-xs'
+                                                                    >
+                                                                        <div className='flex gap-2 items-center'>
+                                                                            <Add size={20} color='black' />
+                                                                            <div>{t('service.add_plan')}</div>
+                                                                        </div>
+                                                                    </Button>
+                                                                </Link>
+                                                            )
                                                             :
                                                             <Link to={Pages.services.plan + item.id} className='flex gap-1 text-sm text-[#0047FF]'>
                                                                 <div>{item.subscriptionCount}</div>
@@ -164,9 +170,11 @@ const ListService: FC = () => {
                                                     />
                                                 </Td>
                                                 <Td text={''}>
-                                                    <Link to={Pages.services.update + item.id}>
-                                                        <Eye size={20} color='#8C90A3' />
-                                                    </Link>
+                                                    {canUpdate('services') && (
+                                                        <Link to={Pages.services.update + item.id}>
+                                                            <Eye size={20} color='#8C90A3' />
+                                                        </Link>
+                                                    )}
                                                 </Td>
                                                 <Td text={''}>
                                                     <Link to={Pages.services.guide + item.id}>

src/pages/service/Plans.tsx

@@ -9,11 +9,13 @@ import { PlanItemType } from './types/ServiceTypes'
 import ToggleStatusPlan from './components/ToggleStatusPlan'
 import EditPlan from './components/EditPlan'
 import { NumberFormat } from '../../config/func'
+import { usePermissions } from '../../hooks/usePermissions'
 
 const Plans: FC = () => {
 
     const { id } = useParams()
     const { t } = useTranslation('global')
+    const { canCreate, canUpdate } = usePermissions()
     const getPlans = useGetPlans(id)
 
     return (
@@ -27,7 +29,7 @@ const Plans: FC = () => {
                             <div>
                                 {t('plan.plans_list') + ' ' + getPlans.data?.data?.service?.name}
                             </div>
-                            <CreatePlan />
+                            {canCreate('services') && <CreatePlan />}
                         </div>
 
                         <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
@@ -54,9 +56,11 @@ const Plans: FC = () => {
                                                     <ToggleStatusPlan defaultActive={item.isActive} id={item.id} />
                                                 </Td>
                                                 <Td text=''>
-                                                    <EditPlan
-                                                        id={item.id}
-                                                    />
+                                                    {canUpdate('services') && (
+                                                        <EditPlan
+                                                            id={item.id}
+                                                        />
+                                                    )}
                                                 </Td>
                                             </tr>
                                         ))

src/pages/slider/List.tsx

@@ -11,11 +11,13 @@ import PageLoading from '../../components/PageLoading'
 import { toast } from '../../components/Toast';
 import { ErrorType } from '../../helpers/types'
 import TrashWithConfrim from '../../components/TrashWithConfrim'
+import { usePermissions } from '../../hooks/usePermissions'
 const SliderList: FC = () => {
 
     const { t } = useTranslation('global')
     const { data: sliders, isPending, refetch } = useGetSliders()
     const deleteSlider = useDeleteSlider()
+    const { canCreate, canUpdate, canDelete } = usePermissions()
 
     const handleDelete = (id: string) => {
         deleteSlider.mutate(id, {
@@ -35,21 +37,23 @@ const SliderList: FC = () => {
                 <div>
                     {t('slider.list_slider')}
                 </div>
-                <div>
-                    <Link to={Pages.sliders.create}>
-                        <Button
-                            className='px-5'
-                        >
-                            <div className='flex gap-2'>
-                                <Add
-                                    className='size-5'
-                                    color='#fff'
-                                />
-                                <div>{t('slider.submit_slider')}</div>
-                            </div>
-                        </Button>
-                    </Link>
-                </div>
+                {canCreate('sliders') && (
+                    <div>
+                        <Link to={Pages.sliders.create}>
+                            <Button
+                                className='px-5'
+                            >
+                                <div className='flex gap-2'>
+                                    <Add
+                                        className='size-5'
+                                        color='#fff'
+                                    />
+                                    <div>{t('slider.submit_slider')}</div>
+                                </div>
+                            </Button>
+                        </Link>
+                    </div>
+                )}
             </div>
 
             {
@@ -80,16 +84,20 @@ const SliderList: FC = () => {
                                         <Td text={item.isActive ? t('slider.active') : t('slider.inactive')} />
                                         <Td text={''}>
                                             <div className='flex gap-2'>
-                                                <Link to={Pages.sliders.detail + item.id}>
-                                                    <Edit
-                                                        className='size-5'
-                                                        color='#888'
+                                                {canUpdate('sliders') && (
+                                                    <Link to={Pages.sliders.detail + item.id}>
+                                                        <Edit
+                                                            className='size-5'
+                                                            color='#888'
+                                                        />
+                                                    </Link>
+                                                )}
+                                                {canDelete('sliders') && (
+                                                    <TrashWithConfrim
+                                                        onDelete={() => handleDelete(item.id)}
+                                                        isLoading={deleteSlider.isPending}
                                                     />
-                                                </Link>
-                                                <TrashWithConfrim
-                                                    onDelete={() => handleDelete(item.id)}
-                                                    isLoading={deleteSlider.isPending}
-                                                />
+                                                )}
                                             </div>
                                         </Td>
                                     </tr>

src/pages/subscriptions/List.tsx

@@ -13,10 +13,12 @@ import { ServiceItemType } from '../service/types/ServiceTypes'
 import TrashWithConfrim from '../../components/TrashWithConfrim'
 import { ErrorType } from '../../helpers/types'
 import { toast } from '../../components/Toast';
+import { usePermissions } from '../../hooks/usePermissions'
 
 const SubscriptionsList: FC = () => {
 
     const { t } = useTranslation('global')
+    const { canDelete } = usePermissions()
     const [page, setPage] = useState<number>(1)
     const [status, setStatus] = useState<string>('')
     const [serviceId, setServiceId] = useState<string>('')
@@ -199,10 +201,12 @@ const SubscriptionsList: FC = () => {
                                         </div>
                                     </Td>
                                     <Td text=''>
-                                        <TrashWithConfrim
-                                            onDelete={() => handleDelete(item.id)}
-                                            isLoading={isPending}
-                                        />
+                                        {canDelete('customers') && (
+                                            <TrashWithConfrim
+                                                onDelete={() => handleDelete(item.id)}
+                                                isLoading={isPending}
+                                            />
+                                        )}
                                     </Td>
                                 </tr>
                             ))}

src/pages/support/List.tsx

@@ -8,9 +8,11 @@ import { Link } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import Delete from './components/Delete'
 import Button from '../../components/Button'
+import { usePermissions } from '../../hooks/usePermissions'
 const SupportList: FC = () => {
 
     const { t } = useTranslation('global')
+    const { canCreate, canUpdate, canDelete } = usePermissions()
     const { data, refetch } = useGetPlans()
 
     return (
@@ -20,18 +22,20 @@ const SupportList: FC = () => {
                     {t('support.plans')}
                 </div>
 
-                <Link to={Pages.support.create}>
-                    <Button
-                        className='w-fit px-6'
-                    >
-                        <div className='flex gap-2 items-center'>
-                            <Add size={20} color='white' />
-                            <div>
-                                {t('support.new_plan')}
+                {canCreate('support_plan') &&
+                    <Link to={Pages.support.create}>
+                        <Button
+                            className='w-fit px-6'
+                        >
+                            <div className='flex gap-2 items-center'>
+                                <Add size={20} color='white' />
+                                <div>
+                                    {t('support.new_plan')}
+                                </div>
                             </div>
-                        </div>
-                    </Button>
-                </Link>
+                        </Button>
+                    </Link>
+                }
             </div>
 
             <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
@@ -65,10 +69,14 @@ const SupportList: FC = () => {
                                         </Td>
                                         <Td text={''}>
                                             <div className='flex items-center gap-2'>
-                                                <Link to={Pages.support.detail + item.id}>
-                                                    <Edit size={20} color='#8C90A3' />
-                                                </Link>
-                                                <Delete id={item.id} refetch={refetch} />
+                                                {canUpdate('support_plan') &&
+                                                    <Link to={Pages.support.detail + item.id}>
+                                                        <Edit size={20} color='#8C90A3' />
+                                                    </Link>
+                                                }
+                                                {canDelete('support_plan') &&
+                                                    <Delete id={item.id} refetch={refetch} />
+                                                }
                                             </div>
                                         </Td>
                                     </tr>

src/pages/taskmanager/components/AddNewColumn.tsx

@@ -8,6 +8,7 @@ import { clx } from "../../../helpers/utils";
 import { useCreateTaskPhase } from "../task-phase/hooks/useTaskPhaseData";
 import type { TaskPhaseItemType } from "../task-phase/types/TaskPhaseTypes";
 import { LABEL_COLOR_OPTIONS } from "./task-detail/labels/constants";
+import { usePermissions } from "../../../hooks/usePermissions";
 
 const DEFAULT_COLUMN_COLOR = "#4F46E5";
 
@@ -19,6 +20,7 @@ type Props = {
 
 const AddNewColumn: FC<Props> = ({ projectId, nextOrder, onColumnCreated }) => {
   const { t } = useTranslation("global");
+  const { canCreate } = usePermissions();
   const colorInputRef = useRef<HTMLInputElement>(null);
   const createTaskPhase = useCreateTaskPhase();
 
@@ -57,6 +59,10 @@ const AddNewColumn: FC<Props> = ({ projectId, nextOrder, onColumnCreated }) => {
     );
   };
 
+  if (!canCreate("task_phase")) {
+    return null;
+  }
+
   if (!isAdding) {
     return (
       <button

src/pages/taskmanager/components/Column.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from "react-i18next";
 import { toast } from '../../../components/Toast';
 import ModalConfrim from "../../../components/ModalConfrim";
 import { ErrorType } from "../../../helpers/types";
+import { usePermissions } from "../../../hooks/usePermissions";
 import { useCreateTask, useGetTasksByTaskPhase } from "../task/hooks/useTaskData";
 import type { TaskItemType } from "../task/types/TaskTypes";
 import { mapTaskItemToTask } from "../task/utils/mapTaskItemToTask";
@@ -37,6 +38,7 @@ const Column: FC<Props> = ({
   onColumnTitleUpdated,
 }) => {
   const { t } = useTranslation("global");
+  const { canCreate } = usePermissions();
   const deleteTaskPhase = useDeleteTaskPhase();
   const updateTaskPhase = useUpdateTaskPhase();
   const createTask = useCreateTask();
@@ -52,7 +54,7 @@ const Column: FC<Props> = ({
     const items = tasksData?.pages.flatMap((page) => page.data?.items ?? []) ?? [];
 
     return [...items]
-      .sort((a, b) => (a.order ?? a.priority ?? 0) - (b.order ?? b.priority ?? 0))
+      .sort((a, b) => (a.priority ?? a.order ?? 0) - (b.priority ?? b.order ?? 0))
       .map((task, index) => mapTaskItemToTask(task as TaskItemType, column.id, index));
   }, [tasksData?.pages, column.id]);
 
@@ -220,8 +222,8 @@ const Column: FC<Props> = ({
   return (
     <div
       ref={columnRef}
-      className={`bg-[#F0F3F7] rounded-xl p-3 sm:p-4 xl:p-6 w-[272px] sm:w-[288px] xl:w-[310px] shrink-0 flex flex-col h-full min-h-0 transition-colors ${
-        isColumnDragOver ? "ring-2 ring-black/30" : ""
+      className={`bg-[#F0F3F7] rounded-xl p-3 sm:p-4 xl:p-6 w-[272px] sm:w-[288px] xl:w-[310px] shrink-0 flex flex-col h-full min-h-0 min-w-0 overflow-hidden transition-colors ${
+        isColumnDragOver ? "ring-2 ring-black/30 ring-inset" : ""
       } ${isDraggingColumn ? "opacity-50" : ""}`}
       onDragOver={handleColumnDragOver}
       onDragLeave={handleColumnDragLeave}
@@ -276,8 +278,8 @@ const Column: FC<Props> = ({
             ref={provided.innerRef}
             {...provided.droppableProps}
             onScroll={handleTasksScroll}
-            className={`mt-3 sm:mt-4 xl:mt-5 flex-1 min-h-[80px] overflow-y-auto overscroll-y-contain rounded-lg transition-colors ${
-              snapshot.isDraggingOver ? "bg-primary/5 ring-2 ring-primary/30" : ""
+            className={`mt-3 sm:mt-4 xl:mt-5 flex-1 min-h-[80px] min-w-0 overflow-y-auto overflow-x-hidden overscroll-y-contain rounded-lg transition-colors ${
+              snapshot.isDraggingOver ? "bg-primary/5 ring-2 ring-primary/30 ring-inset" : ""
             }`}
           >
             {isTasksPending
@@ -294,7 +296,7 @@ const Column: FC<Props> = ({
                         ref={dragProvided.innerRef}
                         {...dragProvided.draggableProps}
                         {...dragProvided.dragHandleProps}
-                        className="mb-3 sm:mb-4"
+                        className="mb-3 sm:mb-4 w-full min-w-0 max-w-full"
                         style={dragProvided.draggableProps.style}
                       >
                         <Task
@@ -314,48 +316,50 @@ const Column: FC<Props> = ({
         )}
       </Droppable>
 
-      {isAdding ? (
-        <div className="mt-3 sm:mt-4 xl:mt-5 shrink-0 flex flex-col gap-3">
-          <input
-            type="text"
-            value={title}
-            onChange={(e) => setTitle(e.target.value)}
-            onKeyDown={(e) => {
-              if (e.key === "Enter") handleCreateTask();
-            }}
-            placeholder={t("taskmanager.task_title")}
-            className="w-full bg-white rounded-lg px-3 py-2.5 text-sm outline-none"
-            autoFocus
-          />
-          <div className="flex items-center gap-2">
-            <button
-              type="button"
-              onClick={handleCreateTask}
-              disabled={!title.trim() || createTask.isPending}
-              className="flex items-center gap-2 bg-black text-white text-[13px] rounded-full px-4 py-2 cursor-pointer disabled:opacity-50"
-            >
-              <span>{t("taskmanager.add_task")}</span>
-              <Add size={18} color="white" />
-            </button>
-            <button
-              type="button"
-              onClick={resetTaskForm}
-              className="cursor-pointer"
-              aria-label={t("cancel")}
-            >
-              <CloseCircle size={22} color="#888888" variant="Bold" />
-            </button>
+      {canCreate("task") && (
+        isAdding ? (
+          <div className="mt-3 sm:mt-4 xl:mt-5 shrink-0 flex flex-col gap-3">
+            <input
+              type="text"
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === "Enter") handleCreateTask();
+              }}
+              placeholder={t("taskmanager.task_title")}
+              className="w-full bg-white rounded-lg px-3 py-2.5 text-sm outline-none"
+              autoFocus
+            />
+            <div className="flex items-center gap-2">
+              <button
+                type="button"
+                onClick={handleCreateTask}
+                disabled={!title.trim() || createTask.isPending}
+                className="flex items-center gap-2 bg-black text-white text-[13px] rounded-full px-4 py-2 cursor-pointer disabled:opacity-50"
+              >
+                <span>{t("taskmanager.add_task")}</span>
+                <Add size={18} color="white" />
+              </button>
+              <button
+                type="button"
+                onClick={resetTaskForm}
+                className="cursor-pointer"
+                aria-label={t("cancel")}
+              >
+                <CloseCircle size={22} color="#888888" variant="Bold" />
+              </button>
+            </div>
           </div>
-        </div>
-      ) : (
-        <button
-          type="button"
-          onClick={() => setIsAdding(true)}
-          className="mt-3 sm:mt-4 xl:mt-5 flex gap-2 items-center shrink-0 cursor-pointer"
-        >
-          <AddCircle size={18} color="#888888" />
-          <span className="text-description text-[13px] mt-0.5">{t("taskmanager.add_new_task")}</span>
-        </button>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setIsAdding(true)}
+            className="mt-3 sm:mt-4 xl:mt-5 flex gap-2 items-center shrink-0 cursor-pointer"
+          >
+            <AddCircle size={18} color="#888888" />
+            <span className="text-description text-[13px] mt-0.5">{t("taskmanager.add_new_task")}</span>
+          </button>
+        )
       )}
     </div>
   );

src/pages/taskmanager/components/ColumnMenu.tsx

@@ -2,6 +2,7 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import { More } from "iconsax-react";
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
+import { usePermissions } from "../../../hooks/usePermissions";
 
 type Props = {
   onEdit: () => void;
@@ -10,6 +11,7 @@ type Props = {
 
 const ColumnMenu: FC<Props> = ({ onEdit, onDelete }) => {
   const { t } = useTranslation("global");
+  const { canUpdate, canDelete } = usePermissions();
 
   return (
     <Popover className="relative">
@@ -26,26 +28,30 @@ const ColumnMenu: FC<Props> = ({ onEdit, onDelete }) => {
             anchor="bottom start"
             className="z-20 mt-1 min-w-[120px] rounded-xl bg-white shadow-md border border-border py-1 text-sm"
           >
-            <button
-              type="button"
-              onClick={() => {
-                close();
-                onEdit();
-              }}
-              className="w-full px-4 py-2.5 text-right hover:bg-black/5 transition-colors"
-            >
-              {t("taskmanager.edit_column")}
-            </button>
-            <button
-              type="button"
-              onClick={() => {
-                close();
-                onDelete();
-              }}
-              className="w-full px-4 py-2.5 text-right text-red-500 hover:bg-red-50 transition-colors"
-            >
-              {t("taskmanager.delete_column")}
-            </button>
+            {canUpdate("task_phase") && (
+              <button
+                type="button"
+                onClick={() => {
+                  close();
+                  onEdit();
+                }}
+                className="w-full px-4 py-2.5 text-right hover:bg-black/5 transition-colors"
+              >
+                {t("taskmanager.edit_column")}
+              </button>
+            )}
+            {canDelete("task_phase") && (
+              <button
+                type="button"
+                onClick={() => {
+                  close();
+                  onDelete();
+                }}
+                className="w-full px-4 py-2.5 text-right text-red-500 hover:bg-red-50 transition-colors"
+              >
+                {t("taskmanager.delete_column")}
+              </button>
+            )}
           </PopoverPanel>
         </>
       )}

src/pages/taskmanager/components/Task.tsx

@@ -33,17 +33,17 @@ const Task: FC<Props> = ({ task, isDragging, onClick }) => {
   return (
     <div
       onClick={handleClick}
-      className={`bg-white rounded-lg p-2 cursor-grab active:cursor-grabbing transition-opacity touch-manipulation ${
+      className={`bg-white rounded-lg p-2 w-full min-w-0 max-w-full overflow-hidden cursor-grab active:cursor-grabbing transition-opacity touch-manipulation ${
         isDragging ? "opacity-40 shadow-lg" : ""
       }`}
     >
       {task.color ? <div className="h-10 rounded-lg" style={{ backgroundColor: task.color }} /> : null}
       {task.tag ? (
-        <div className="bg-[#FF76C2] h-5 px-3 flex items-center mt-2 text-[10px] text-white rounded-md w-fit">
+        <div className="bg-[#FF76C2] h-5 px-3 flex items-center mt-2 text-[10px] text-white rounded-md w-fit max-w-full truncate">
           {task.tag}
         </div>
       ) : null}
-      <div className="font-bold text-xs mt-2">{task.title}</div>
+      <div className="font-bold text-xs mt-2 break-words">{task.title}</div>
       {task.ticketId ? (
         <Link
           to={Pages.ticket.detail + task.ticketId}
@@ -72,7 +72,7 @@ const Task: FC<Props> = ({ task, isDragging, onClick }) => {
       </div>
 
       {task.users?.length ? (
-        <div className="mt-2 flex justify-end">
+        <div className="mt-2 flex justify-end pl-1.5">
           <div className="flex items-center -space-x-1.5 rtl:space-x-reverse">
             {task.users.map((user) => (
               <UserAvatar

src/pages/taskmanager/components/UserAvatar.tsx

@@ -5,11 +5,22 @@ type Props = {
   src?: string | null;
   alt?: string;
   className?: string;
+  showTooltip?: boolean;
 };
 
-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" />
+const UserAvatar: FC<Props> = ({ src, alt = "", className = "size-6", showTooltip = true }) => (
+  <div className={`relative group/avatar ${className} rounded-full overflow-visible shrink-0`}>
+    <div className="size-full rounded-full overflow-hidden bg-[#D0D0D0]">
+      <img src={src || AvatarImage} alt={alt} className="size-full object-cover" />
+    </div>
+    {showTooltip && alt ? (
+      <span
+        role="tooltip"
+        className="pointer-events-none absolute bottom-full left-1/2 z-20 mb-1.5 -translate-x-1/2 whitespace-nowrap rounded-md bg-[#292D32] px-2 py-1 text-[10px] text-white opacity-0 transition-opacity group-hover/avatar:opacity-100"
+      >
+        {alt}
+      </span>
+    ) : null}
   </div>
 );
 

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

@@ -56,7 +56,7 @@ const TaskDetailActionBar: FC<Props> = ({ activeTab, onTabChange, labelsPopover,
 
   return (
     <>
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="flex flex-wrap items-center justify-center sm:justify-start gap-2">
         {TABS.map(({ id, icon: Icon, labelKey }) => {
           const isActive = activeTab === id;
           const hasPopover = POPOVER_TABS.has(id);

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

@@ -28,7 +28,7 @@ const TaskDetailDescription: FC<Props> = ({ value = "", onChange, onSave, isSavi
           onChange={(e) => onChange?.(e.target.value)}
           placeholder={t("taskmanager.task_detail.description_placeholder")}
           rows={5}
-          className="w-full bg-transparent rounded-xl px-4 pt-4 pb-3 text-xs outline-none resize-none placeholder:text-description"
+          className="w-full bg-transparent rounded-xl px-4 pt-4 pb-3 pl-20 text-xs outline-none resize-none placeholder:text-description"
         />
       </div>
     </div>

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

@@ -3,6 +3,7 @@ import { ArrowDown2, CloseCircle, Paintbucket } from "iconsax-react";
 import { type FC } from "react";
 import TrashWithConfrim from "../../../../components/TrashWithConfrim";
 import { clx } from "../../../../helpers/utils";
+import { usePermissions } from "../../../../hooks/usePermissions";
 import type { Column } from "../../types";
 import TaskDetailCoverColorPopover from "./cover/TaskDetailCoverColorPopover";
 
@@ -31,6 +32,7 @@ const TaskDetailHeader: FC<Props> = ({
   onDelete,
   isDeleting,
 }) => {
+  const { canDelete } = usePermissions();
   const selectedColumn = columns.find((column) => column.id === selectedPhaseId);
 
   return (
@@ -99,7 +101,7 @@ const TaskDetailHeader: FC<Props> = ({
           )}
         </Popover>
 
-        {onDelete ? (
+        {onDelete && canDelete("task") ? (
           <div className="size-8 rounded-full bg-white/60 flex items-center justify-center">
             <TrashWithConfrim onDelete={onDelete} isLoading={isDeleting} color="#FF0000" />
           </div>

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

@@ -199,6 +199,7 @@ const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, o
               onTabChange={handleTabChange}
               taskDetail={taskDetail}
               taskId={task.id}
+              projectId={taskDetail?.projectId ?? projectId}
             />
           </div>
 
@@ -209,7 +210,7 @@ const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, o
             isSaving={updateTask.isPending}
           />
 
-          <AttachmentList attachments={taskDetail?.attachments} />
+          <AttachmentList taskId={task.id} attachments={taskDetail?.attachments} />
 
           <CheckLists
             taskId={task.id}

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

@@ -10,8 +10,10 @@ type Props = {
   onClose?: () => void;
 };
 
+const MOBILE_BREAKPOINT = 640;
+
 const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, width = 300, onClose }) => {
-  const [position, setPosition] = useState<{ top: number; left: number } | null>(null);
+  const [position, setPosition] = useState<{ top: number; left: number; width: number } | null>(null);
   const panelRef = useRef<HTMLDivElement>(null);
 
   useLayoutEffect(() => {
@@ -21,12 +23,21 @@ const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, wid
 
       const rect = anchor.getBoundingClientRect();
       const padding = 8;
-      let left = rect.right - width;
-      left = Math.max(padding, Math.min(left, window.innerWidth - width - padding));
+      const isMobile = window.innerWidth < MOBILE_BREAKPOINT;
+      const panelWidth = Math.min(width, window.innerWidth - padding * 2);
+
+      let left: number;
+      if (isMobile) {
+        left = (window.innerWidth - panelWidth) / 2;
+      } else {
+        left = rect.right - panelWidth;
+        left = Math.max(padding, Math.min(left, window.innerWidth - panelWidth - padding));
+      }
 
       setPosition({
         top: rect.bottom + 8,
         left,
+        width: panelWidth,
       });
     };
 
@@ -50,8 +61,10 @@ const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, wid
       onClose();
     };
 
-    document.addEventListener("pointerdown", handlePointerDown);
-    return () => document.removeEventListener("pointerdown", handlePointerDown);
+    // Capture: DefaulModal stops pointerdown propagation on bubble, so outside-click
+    // would never reach a document bubble listener while the modal is open.
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    return () => document.removeEventListener("pointerdown", handlePointerDown, true);
   }, [anchorRef, onClose]);
 
   if (!position) return null;
@@ -59,7 +72,7 @@ const TaskDetailPopoverPanel: FC<Props> = ({ anchorRef, children, className, wid
   return createPortal(
     <div
       ref={panelRef}
-      style={{ top: position.top, left: position.left, width }}
+      style={{ top: position.top, left: position.left, width: position.width }}
       className={clx("fixed z-[80] bg-white/90 backdrop-blur-md rounded-2xl p-4 shadow-lg border border-white/80", className)}
     >
       {children}

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

@@ -1,7 +1,6 @@
 import { type FC, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from '../../../../components/Toast';
-import { useGetUsersInfinite } from "../../../users/hooks/useUserData";
 import TaskDetailAttachmentPopover from "./attachment/TaskDetailAttachmentPopover";
 import TaskDetailDatePopover from "./date/TaskDetailDatePopover";
 import { parseApiDate, toApiDate } from "./date/utils";
@@ -15,9 +14,16 @@ import type { TaskDetailTab } from "./types";
 import TaskDetailUsersPopover from "./users/TaskDetailUsersPopover";
 import TaskDetailTimePopover from "./time/TaskDetailTimePopover";
 import type { TaskUser } from "./users/types";
-import type { UserItemType } from "../../../users/types/UserTypes";
 import type { TaskDetailType } from "../../task/types/TaskTypes";
-import { useCreateCheckListItem, useCreateTaskAttachment, useCreateTaskRemark, useUpdateTask } from "../../task/hooks/useTaskData";
+import {
+  useCreateCheckListItem,
+  useCreateTaskAttachment,
+  useCreateTaskRemark,
+  useDeleteTaskRemark,
+  useUpdateTask,
+} from "../../task/hooks/useTaskData";
+import { useGetProjectUsers } from "../../project/hooks/useProjectData";
+import type { ProjectUserType } from "../../project/types/ProjectTypes";
 import { useSingleUpload } from "../../../service/hooks/useServiceData";
 import { ErrorType } from "../../../../helpers/types";
 
@@ -26,25 +32,20 @@ type Props = {
   onTabChange: (tab: TaskDetailTab) => void;
   taskDetail?: TaskDetailType;
   taskId: string;
+  projectId: string;
 };
 
-const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, taskId }) => {
+const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, taskId, projectId }) => {
   const { t } = useTranslation("global");
   const createTaskRemark = useCreateTaskRemark();
+  const deleteTaskRemark = useDeleteTaskRemark();
   const createCheckListItem = useCreateCheckListItem();
   const createTaskAttachment = useCreateTaskAttachment();
   const singleUpload = useSingleUpload();
   const updateTask = useUpdateTask();
   const isUsersOpen = activeTab === "users";
   const [userSearch, setUserSearch] = useState("");
-  const [debouncedUserSearch, setDebouncedUserSearch] = useState("");
-  const {
-    data: usersData,
-    isPending: isUsersPending,
-    isFetchingNextPage: isFetchingNextUsersPage,
-    fetchNextPage: fetchNextUsersPage,
-    hasNextPage: hasNextUsersPage,
-  } = useGetUsersInfinite(debouncedUserSearch, undefined, isUsersOpen);
+  const { data: usersData, isPending: isUsersPending } = useGetProjectUsers(projectId, isUsersOpen);
   const [labelsView, setLabelsView] = useState<LabelsView>("list");
   const [labels, setLabels] = useState<TaskLabel[]>([]);
   const [selectedLabelIds, setSelectedLabelIds] = useState<Set<string>>(new Set());
@@ -52,14 +53,6 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
   const [startDate, setStartDate] = useState<DateObject | null>(null);
   const [endDate, setEndDate] = useState<DateObject | null>(null);
 
-  useEffect(() => {
-    const timeoutId = window.setTimeout(() => {
-      setDebouncedUserSearch(userSearch.trim());
-    }, 300);
-
-    return () => window.clearTimeout(timeoutId);
-  }, [userSearch]);
-
   useEffect(() => {
     if (!taskDetail) return;
 
@@ -84,16 +77,13 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
   }, [taskDetail]);
 
   const selectedLabels = labels.filter((label) => selectedLabelIds.has(label.id));
-  const users = useMemo((): TaskUser[] => {
+  const projectUsers = useMemo((): TaskUser[] => {
     const apiUsers: TaskUser[] =
-      usersData?.pages.flatMap(
-        (page) =>
-          page.data?.users?.map((user: UserItemType) => ({
-            id: user.id,
-            name: `${user.firstName} ${user.lastName}`.trim(),
-            avatar: user.profilePic,
-          })) ?? [],
-      ) ?? [];
+      usersData?.data?.map((user: ProjectUserType) => ({
+        id: user.id,
+        name: `${user.firstName} ${user.lastName}`.trim(),
+        avatar: user.profilePic,
+      })) ?? [];
     const taskUsers: TaskUser[] =
       taskDetail?.users?.map((user) => ({
         id: user.id,
@@ -116,20 +106,21 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
     });
 
     return Array.from(userMap.values());
-  }, [usersData?.pages, taskDetail?.users]);
+  }, [usersData?.data, taskDetail?.users]);
   const listUsers = useMemo((): TaskUser[] => {
-    return (
-      usersData?.pages.flatMap(
-        (page) =>
-          page.data?.users?.map((user: UserItemType) => ({
-            id: user.id,
-            name: `${user.firstName} ${user.lastName}`.trim(),
-            avatar: user.profilePic,
-          })) ?? [],
-      ) ?? []
-    );
-  }, [usersData?.pages]);
-  const selectedUsers = users.filter((user) => selectedUserIds.has(user.id));
+    const query = userSearch.trim().toLowerCase();
+    const apiUsers: TaskUser[] =
+      usersData?.data?.map((user: ProjectUserType) => ({
+        id: user.id,
+        name: `${user.firstName} ${user.lastName}`.trim(),
+        avatar: user.profilePic,
+      })) ?? [];
+
+    if (!query) return apiUsers;
+
+    return apiUsers.filter((user) => user.name.toLowerCase().includes(query));
+  }, [usersData?.data, userSearch]);
+  const selectedUsers = projectUsers.filter((user) => selectedUserIds.has(user.id));
   const isLabelsOpen = activeTab === "labels";
   const isChecklistOpen = activeTab === "checklist";
   const isAttachmentOpen = activeTab === "attachment";
@@ -224,6 +215,29 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
     );
   };
 
+  const handleDeleteLabel = (id: string) => {
+    const effectiveTaskId = taskId || taskDetail?.id;
+    if (!effectiveTaskId) return;
+
+    deleteTaskRemark.mutate(
+      { id, taskId: effectiveTaskId },
+      {
+        onSuccess: () => {
+          setLabels((prev) => prev.filter((label) => label.id !== id));
+          setSelectedLabelIds((prev) => {
+            const next = new Set(prev);
+            next.delete(id);
+            return next;
+          });
+          toast(t("success"), "success");
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
   const handleChecklistClose = () => {
     if (isChecklistOpen) onTabChange("checklist");
   };
@@ -338,7 +352,9 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
               onViewChange={setLabelsView}
               onToggle={handleLabelToggle}
               onCreate={handleCreate}
+              onDelete={handleDeleteLabel}
               isSubmitting={createTaskRemark.isPending}
+              isDeleting={deleteTaskRemark.isPending}
             />
           ) : null
         }
@@ -350,11 +366,6 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
               onToggle={handleUserToggle}
               isLoading={isUsersPending}
               isSubmitting={updateTask.isPending}
-              hasNextPage={hasNextUsersPage}
-              isFetchingNextPage={isFetchingNextUsersPage}
-              onLoadMore={() => {
-                void fetchNextUsersPage();
-              }}
               search={userSearch}
               onSearchChange={setUserSearch}
             />

src/pages/taskmanager/components/task-detail/attachment/AttachmentItem.tsx

@@ -1,7 +1,9 @@
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
-import { Document, Link2, More } from "iconsax-react";
-import { type FC } from "react";
+import { CloseCircle, Document, Link2, More } from "iconsax-react";
+import { useEffect, useState, type FC } from "react";
+import { createPortal } from "react-dom";
 import { timeAgo } from "../../../../../config/func";
+import { isImageAttachment } from "./isImageAttachment";
 
 type Props = {
   title: string;
@@ -13,41 +15,120 @@ type Props = {
 };
 
 const AttachmentItem: FC<Props> = ({ title, createdAt, type, url, onEdit, onDelete }) => {
+  const [isPreviewOpen, setIsPreviewOpen] = useState(false);
+  const isImage = type === "file" && isImageAttachment(url);
+
+  useEffect(() => {
+    if (!isPreviewOpen) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setIsPreviewOpen(false);
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isPreviewOpen]);
+
   return (
-    <div className="flex items-center justify-between gap-2">
-      <div className="flex items-center gap-2 flex-1 min-w-0">
-        <div className="shrink-0 size-9 bg-white rounded-[10px] flex items-center justify-center">
-          {type === "file" ? <Document size={20} color="#292D32" /> : <Link2 size={20} color="#292D32" />}
+    <>
+      <div className="flex items-center justify-between gap-2">
+        <div className="flex items-center gap-2 flex-1 min-w-0">
+          {isImage && url ? (
+            <button
+              type="button"
+              onClick={() => setIsPreviewOpen(true)}
+              className="shrink-0 size-14 rounded-[10px] overflow-hidden bg-white outline-none"
+            >
+              <img src={url} alt={title} className="size-full object-cover" />
+            </button>
+          ) : (
+            <div className="shrink-0 size-9 bg-white rounded-[10px] flex items-center justify-center">
+              {type === "file" ? <Document size={20} color="#292D32" /> : <Link2 size={20} color="#292D32" />}
+            </div>
+          )}
+
+          <div className="min-w-0">
+            {isImage && url ? (
+              <button
+                type="button"
+                onClick={() => setIsPreviewOpen(true)}
+                className="text-xs font-bold text-[#0047FF] underline truncate block max-w-full text-right outline-none"
+              >
+                {title}
+              </button>
+            ) : url ? (
+              <a href={url} target="_blank" rel="noopener noreferrer" className="text-xs font-bold text-[#0047FF] underline truncate block">
+                {title}
+              </a>
+            ) : (
+              <div className="text-xs font-bold truncate">{title}</div>
+            )}
+            {createdAt && <div className="text-[11px] mt-0.5">{timeAgo(createdAt)}</div>}
+          </div>
         </div>
 
-        <div className="min-w-0">
-          {url ? (
-            <a href={url} target="_blank" rel="noopener noreferrer" className="text-xs font-bold text-[#0047FF] underline truncate block">
-              {title}
-            </a>
-          ) : (
-            <div className="text-xs font-bold truncate">{title}</div>
-          )}
-          {createdAt && <div className="text-[11px] mt-0.5">{timeAgo(createdAt)}</div>}
-        </div>
+        <Popover className="relative shrink-0">
+          <PopoverButton className="size-7 bg-white/60 rounded-[8px] flex items-center justify-center outline-none">
+            <More size={18} color="#292D32" />
+          </PopoverButton>
+
+          <PopoverPanel anchor="bottom end" className="z-[80] mt-1 rounded-[10px] bg-white shadow-md text-right p-3">
+            {({ close }) => (
+              <>
+                <button
+                  type="button"
+                  onClick={() => {
+                    onEdit();
+                    close();
+                  }}
+                  className="w-full text-sm text-right"
+                >
+                  ویرایش
+                </button>
+
+                <button
+                  type="button"
+                  onClick={() => {
+                    onDelete();
+                    close();
+                  }}
+                  className="w-full mt-3 text-sm text-right text-[#FF0000]"
+                >
+                  پاک کردن
+                </button>
+              </>
+            )}
+          </PopoverPanel>
+        </Popover>
       </div>
 
-      <Popover className="relative shrink-0">
-        <PopoverButton className="size-7 bg-white/60 rounded-[8px] flex items-center justify-center outline-none">
-          <More size={18} color="#292D32" />
-        </PopoverButton>
+      {isPreviewOpen &&
+        url &&
+        createPortal(
+          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4" role="dialog" aria-modal="true">
+            <button
+              type="button"
+              aria-label="بستن"
+              className="absolute inset-0 bg-black/70 outline-none"
+              onClick={() => setIsPreviewOpen(false)}
+            />
 
-        <PopoverPanel anchor="bottom end" className="z-[80] mt-1 rounded-[10px] bg-white shadow-md text-right p-3">
-          <button type="button" onClick={onEdit} className="w-full text-sm text-right">
-            ویرایش
-          </button>
+            <div className="relative z-10 max-w-[90vw] max-h-[90vh]">
+              <button
+                type="button"
+                aria-label="بستن"
+                onClick={() => setIsPreviewOpen(false)}
+                className="absolute -top-3 -left-3 size-9 rounded-full bg-white flex items-center justify-center shadow outline-none"
+              >
+                <CloseCircle size={22} color="#292D32" />
+              </button>
 
-          <button type="button" onClick={onDelete} className="w-full mt-3 text-sm text-right text-[#FF0000]">
-            پاک کردن
-          </button>
-        </PopoverPanel>
-      </Popover>
-    </div>
+              <img src={url} alt={title} className="max-w-[90vw] max-h-[90vh] rounded-2xl object-contain bg-white" />
+            </div>
+          </div>,
+          document.body,
+        )}
+    </>
   );
 };
 

src/pages/taskmanager/components/task-detail/attachment/List.tsx

@@ -1,15 +1,28 @@
-import { type FC } from "react";
+import { useState, type FC } from "react";
 import { useTranslation } from "react-i18next";
-import AttachmentItem from "./AttachmentItem";
-import type { TaskAttachment } from "./types";
+import DefaulModal from "../../../../../components/DefaulModal";
+import ModalConfrim from "../../../../../components/ModalConfrim";
+import { toast } from "../../../../../components/Toast";
+import { ErrorType } from "../../../../../helpers/types";
+import { useSingleUpload } from "../../../../service/hooks/useServiceData";
+import { useDeleteTaskAttachment, useUpdateTaskAttachment } from "../../../task/hooks/useTaskData";
 import type { TaskAttachmentType } from "../../../task/types/TaskTypes";
+import AttachmentItem from "./AttachmentItem";
+import TaskDetailAttachmentForm from "./TaskDetailAttachmentForm";
+import type { TaskAttachment } from "./types";
 
 type Props = {
+  taskId: string;
   attachments?: TaskAttachmentType[];
 };
 
-const AttachmentList: FC<Props> = ({ attachments = [] }) => {
+const AttachmentList: FC<Props> = ({ taskId, attachments = [] }) => {
   const { t } = useTranslation("global");
+  const singleUpload = useSingleUpload();
+  const updateTaskAttachment = useUpdateTaskAttachment();
+  const deleteTaskAttachment = useDeleteTaskAttachment();
+  const [deleteItemId, setDeleteItemId] = useState<string | null>(null);
+  const [editItem, setEditItem] = useState<TaskAttachment | null>(null);
 
   const mappedAttachments: TaskAttachment[] = attachments.map((item) => ({
     id: item.id,
@@ -22,6 +35,61 @@ const AttachmentList: FC<Props> = ({ attachments = [] }) => {
   const files = mappedAttachments.filter((item) => item.type === "file");
   const links = mappedAttachments.filter((item) => item.type === "link");
 
+  const handleDelete = () => {
+    if (!deleteItemId) return;
+
+    deleteTaskAttachment.mutate(
+      { id: deleteItemId, taskId },
+      {
+        onSuccess: () => {
+          setDeleteItemId(null);
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  const handleUpdate = async (data: { file?: File; title: string; linkId: string }) => {
+    if (!editItem) return;
+
+    let fileUrl = data.linkId.trim() || editItem.file || "";
+
+    if (data.file) {
+      const formData = new FormData();
+      formData.append("file", data.file);
+
+      try {
+        const uploadResult = await singleUpload.mutateAsync(formData);
+        fileUrl = uploadResult?.data?.url ?? "";
+      } catch (error) {
+        toast((error as ErrorType).response?.data?.error.message[0], "error");
+        return;
+      }
+    }
+
+    if (!fileUrl) return;
+
+    const title = data.title.trim() || data.file?.name || editItem.title;
+    const type = data.file ? "file" : editItem.type;
+
+    updateTaskAttachment.mutate(
+      { id: editItem.id, params: { file: fileUrl, title, type, taskId } },
+      {
+        onSuccess: () => {
+          setEditItem(null);
+          toast(t("success"), "success");
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  const isUpdateSubmitting = singleUpload.isPending || updateTaskAttachment.isPending;
+
   if (mappedAttachments.length === 0) return null;
 
   return (
@@ -40,8 +108,8 @@ const AttachmentList: FC<Props> = ({ attachments = [] }) => {
                 createdAt={item.createdAt}
                 type="file"
                 url={item.file}
-                onEdit={() => {}}
-                onDelete={() => {}}
+                onEdit={() => setEditItem(item)}
+                onDelete={() => setDeleteItemId(item.id)}
               />
             ))}
           </div>
@@ -60,13 +128,38 @@ const AttachmentList: FC<Props> = ({ attachments = [] }) => {
                 createdAt={item.createdAt}
                 type="link"
                 url={item.file}
-                onEdit={() => {}}
-                onDelete={() => {}}
+                onEdit={() => setEditItem(item)}
+                onDelete={() => setDeleteItemId(item.id)}
               />
             ))}
           </div>
         </div>
       )}
+
+      <ModalConfrim
+        isOpen={deleteItemId !== null}
+        close={() => setDeleteItemId(null)}
+        onConfrim={handleDelete}
+        isLoading={deleteTaskAttachment.isPending}
+      />
+
+      <DefaulModal
+        open={editItem !== null}
+        close={() => setEditItem(null)}
+        isHeader
+        title_header={t("edit")}
+        width={420}
+      >
+        {editItem ? (
+          <TaskDetailAttachmentForm
+            initialValues={{ title: editItem.title, fileUrl: editItem.file, type: editItem.type }}
+            onClose={() => setEditItem(null)}
+            onSubmit={handleUpdate}
+            isSubmitting={isUpdateSubmitting}
+            submitLabel={t("save")}
+          />
+        ) : null}
+      </DefaulModal>
     </div>
   );
 };

src/pages/taskmanager/components/task-detail/attachment/TaskDetailAttachmentForm.tsx

@@ -4,22 +4,39 @@ import Button from "../../../../../components/Button";
 import Input from "../../../../../components/Input";
 import Select from "../../../../../components/Select";
 
+type InitialValues = {
+  title: string;
+  fileUrl?: string;
+  type: "file" | "link";
+};
+
 type Props = {
   onClose: () => void;
   onSubmit: (data: { file?: File; title: string; linkId: string }) => void;
   isSubmitting?: boolean;
+  initialValues?: InitialValues;
+  submitLabel?: string;
 };
 
-const TaskDetailAttachmentForm: FC<Props> = ({ onClose, onSubmit, isSubmitting = false }) => {
+const TaskDetailAttachmentForm: FC<Props> = ({
+  onClose,
+  onSubmit,
+  isSubmitting = false,
+  initialValues,
+  submitLabel,
+}) => {
   const { t } = useTranslation("global");
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [file, setFile] = useState<File | null>(null);
-  const [title, setTitle] = useState("");
-  const [linkId, setLinkId] = useState("");
+  const [title, setTitle] = useState(initialValues?.title ?? "");
+  const [linkId, setLinkId] = useState(initialValues?.type === "link" ? (initialValues.fileUrl ?? "") : "");
+  const isEdit = Boolean(initialValues);
 
   const linkItems = [{ value: "", label: t("taskmanager.task_detail.none") }];
 
-  const canSubmit = Boolean(file) || Boolean(title.trim());
+  const canSubmit = isEdit
+    ? Boolean(title.trim()) || Boolean(file)
+    : Boolean(file) || Boolean(title.trim());
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const selected = e.target.files?.[0];
@@ -35,6 +52,12 @@ const TaskDetailAttachmentForm: FC<Props> = ({ onClose, onSubmit, isSubmitting =
     });
   };
 
+  const currentFileLabel = file
+    ? file.name
+    : initialValues?.fileUrl
+      ? initialValues.fileUrl
+      : t("no_select_file");
+
   return (
     <div className="flex flex-col gap-3">
       <h3 className="text-xs font-bold text-center">{t("taskmanager.task_detail.attachment")}</h3>
@@ -43,7 +66,7 @@ const TaskDetailAttachmentForm: FC<Props> = ({ onClose, onSubmit, isSubmitting =
         <button type="button" onClick={() => fileInputRef.current?.click()} className="shrink-0 h-6 rounded-lg text-[11px] px-3 bg-secondary">
           {t("select_file")}
         </button>
-        <span className="text-[11px] text-description truncate">{file ? file.name : t("no_select_file")}</span>
+        <span className="text-[11px] text-description truncate">{currentFileLabel}</span>
         <input ref={fileInputRef} type="file" className="hidden" onChange={handleFileChange} />
       </div>
 
@@ -69,7 +92,7 @@ const TaskDetailAttachmentForm: FC<Props> = ({ onClose, onSubmit, isSubmitting =
           {t("cancel")}
         </Button>
         <Button type="button" onClick={handleSubmit} disabled={!canSubmit || isSubmitting} isLoading={isSubmitting} className="h-8 bg-[#292D32] text-white rounded-xl text-xs disabled:opacity-50 w-[95px]">
-          {t("taskmanager.task_detail.insert")}
+          {submitLabel ?? t("taskmanager.task_detail.insert")}
         </Button>
       </div>
     </div>

src/pages/taskmanager/components/task-detail/attachment/isImageAttachment.ts

@@ -0,0 +1,10 @@
+const IMAGE_EXTENSIONS = new Set(["jpg", "jpeg", "png", "gif", "webp", "bmp", "svg", "avif"]);
+
+export const isImageAttachment = (url?: string): boolean => {
+  if (!url) return false;
+
+  const path = url.split("?")[0].split("#")[0];
+  const extension = path.split(".").pop()?.toLowerCase();
+
+  return !!extension && IMAGE_EXTENSIONS.has(extension);
+};

src/pages/taskmanager/components/task-detail/checklist/ChecklistItem.tsx

@@ -1,17 +1,83 @@
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import { More } from "iconsax-react";
-import { type FC } from "react";
+import { type FC, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import TaskDetailLabelCheckbox from "../labels/TaskDetailLabelCheckbox";
 
 type Props = {
   title: string;
   checked: boolean;
   onToggle: () => void;
-  onEdit: () => void;
+  onSave: (title: string) => void;
   onDelete: () => void;
+  isSaving?: boolean;
 };
 
-const ChecklistItem: FC<Props> = ({ title, checked, onToggle, onEdit, onDelete }) => {
+const ChecklistItem: FC<Props> = ({ title, checked, onToggle, onSave, onDelete, isSaving = false }) => {
+  const { t } = useTranslation("global");
+  const [isEditing, setIsEditing] = useState(false);
+  const [editTitle, setEditTitle] = useState(title);
+
+  useEffect(() => {
+    if (!isEditing) {
+      setEditTitle(title);
+    }
+  }, [title, isEditing]);
+
+  const handleSave = () => {
+    const trimmed = editTitle.trim();
+    if (!trimmed || trimmed === title) {
+      setIsEditing(false);
+      setEditTitle(title);
+      return;
+    }
+    onSave(trimmed);
+    setIsEditing(false);
+  };
+
+  const handleCancel = () => {
+    setIsEditing(false);
+    setEditTitle(title);
+  };
+
+  if (isEditing) {
+    return (
+      <div className="flex gap-1 items-center">
+        <TaskDetailLabelCheckbox checked={checked} onToggle={onToggle} />
+
+        <div className="flex-1 flex gap-2 items-center">
+          <input
+            value={editTitle}
+            onChange={(e) => setEditTitle(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") handleSave();
+              if (e.key === "Escape") handleCancel();
+            }}
+            autoFocus
+            disabled={isSaving}
+            className="flex-1 h-[27px] px-2 text-xs bg-white/50 rounded outline-none"
+          />
+          <button
+            type="button"
+            onClick={handleSave}
+            disabled={!editTitle.trim() || isSaving}
+            className="h-7 px-3 rounded-lg bg-[#292D32] text-white text-[11px] disabled:opacity-50"
+          >
+            {t("save")}
+          </button>
+          <button
+            type="button"
+            onClick={handleCancel}
+            disabled={isSaving}
+            className="h-7 px-3 rounded-lg bg-white/50 text-[#292D32] text-[11px] border border-white disabled:opacity-50"
+          >
+            {t("cancel")}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
   return (
     <div className="flex gap-1 h-[27px] items-center">
       <TaskDetailLabelCheckbox checked={checked} onToggle={onToggle} />
@@ -24,14 +90,32 @@ const ChecklistItem: FC<Props> = ({ title, checked, onToggle, onEdit, onDelete }
             <More size={20} color="#000" />
           </PopoverButton>
 
-          <PopoverPanel anchor="bottom end" className="z-[80] mt-1  rounded-[10px] bg-white shadow-md text-right p-3">
-            <button type="button" onClick={onEdit} className="w-full text-sm text-right">
-              ویرایش
-            </button>
+          <PopoverPanel anchor="bottom end" className="z-[80] mt-1 rounded-[10px] bg-white shadow-md text-right p-3">
+            {({ close }) => (
+              <>
+                <button
+                  type="button"
+                  onClick={() => {
+                    close();
+                    setIsEditing(true);
+                  }}
+                  className="w-full text-sm text-right"
+                >
+                  ویرایش
+                </button>
 
-            <button type="button" onClick={onDelete} className="w-full mt-3 text-sm text-right text-[#FF0000]">
-              پاک کردن
-            </button>
+                <button
+                  type="button"
+                  onClick={() => {
+                    close();
+                    onDelete();
+                  }}
+                  className="w-full mt-3 text-sm text-right text-[#FF0000]"
+                >
+                  پاک کردن
+                </button>
+              </>
+            )}
           </PopoverPanel>
         </Popover>
       </div>

src/pages/taskmanager/components/task-detail/checklist/List.tsx

@@ -2,7 +2,7 @@ import { Edit } from "iconsax-react";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import ModalConfrim from "../../../../../components/ModalConfrim";
-import { toast } from '../../../../../components/Toast';
+import { toast } from "../../../../../components/Toast";
 import ProgressBar from "../../../../../components/ProgressBar";
 import { ErrorType } from "../../../../../helpers/types";
 import { useDeleteCheckListItem, useUpdateCheckListItem } from "../../../task/hooks/useTaskData";
@@ -37,12 +37,23 @@ const CheckLists = ({
   const doneCount = completedCheckListItemCount ?? items.filter((item) => item.checked).length;
   const progress = totalCount > 0 ? Math.round((doneCount / totalCount) * 100) : 0;
 
-  const handleToggle = (id: string, checked: boolean) => {
+  const handleToggle = (id: string, title: string, checked: boolean) => {
     updateCheckListItem.mutate(
-      { id, params: { isDone: !checked }, taskId },
+      { id, params: { title, isDone: !checked, taskId }, taskId },
       {
         onError: (error: ErrorType) => {
-          toast(error.response?.data?.error.message[0], 'error');
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  const handleSave = (id: string, title: string, checked: boolean) => {
+    updateCheckListItem.mutate(
+      { id, params: { title, isDone: checked, taskId }, taskId },
+      {
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
         },
       },
     );
@@ -58,7 +69,7 @@ const CheckLists = ({
           setDeleteItemId(null);
         },
         onError: (error: ErrorType) => {
-          toast(error.response?.data?.error.message[0], 'error');
+          toast(error.response?.data?.error.message[0], "error");
         },
       },
     );
@@ -84,9 +95,10 @@ const CheckLists = ({
             key={item.id}
             title={item.title}
             checked={item.checked}
-            onToggle={() => handleToggle(item.id, item.checked)}
-            onEdit={() => {}}
+            onToggle={() => handleToggle(item.id, item.title, item.checked)}
+            onSave={(title) => handleSave(item.id, title, item.checked)}
             onDelete={() => setDeleteItemId(item.id)}
+            isSaving={updateCheckListItem.isPending}
           />
         ))}
       </div>

src/pages/taskmanager/components/task-detail/comment/CommentAttachments.tsx

@@ -0,0 +1,128 @@
+import { CloseCircle, Document, Paperclip2 } from "iconsax-react";
+import { useEffect, useState, type FC } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { isImageAttachment } from "../attachment/isImageAttachment";
+
+const getFileName = (url: string) => {
+  const path = url.split("?")[0].split("#")[0];
+  return decodeURIComponent(path.split("/").pop() || url);
+};
+
+type Props = {
+  attachments: string[];
+  onRemove?: (index: number) => void;
+};
+
+const CommentAttachments: FC<Props> = ({ attachments, onRemove }) => {
+  const { t } = useTranslation("global");
+  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!previewUrl) return;
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setPreviewUrl(null);
+    };
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [previewUrl]);
+
+  if (attachments.length === 0) return null;
+
+  return (
+    <>
+      <div className="mt-2 flex flex-wrap gap-2">
+        {attachments.map((url, index) => {
+          const isImage = isImageAttachment(url);
+          const title = getFileName(url);
+
+          return (
+            <div
+              key={`${url}-${index}`}
+              className="relative flex items-center gap-2 max-w-full rounded-lg bg-white/60 px-2 py-1.5"
+            >
+              {isImage ? (
+                <button
+                  type="button"
+                  onClick={() => setPreviewUrl(url)}
+                  className="shrink-0 size-8 rounded-md overflow-hidden bg-white outline-none"
+                >
+                  <img src={url} alt={title} className="size-full object-cover" />
+                </button>
+              ) : (
+                <div className="shrink-0 size-8 rounded-md bg-white flex items-center justify-center">
+                  <Document size={16} color="#292D32" />
+                </div>
+              )}
+
+              {isImage ? (
+                <button
+                  type="button"
+                  onClick={() => setPreviewUrl(url)}
+                  className="text-[11px] text-[#0047FF] underline truncate max-w-[140px] outline-none"
+                >
+                  {title}
+                </button>
+              ) : (
+                <a
+                  href={url}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[11px] text-[#0047FF] underline truncate max-w-[140px] flex items-center gap-1"
+                >
+                  <Paperclip2 size={12} color="#0047FF" />
+                  {t("attach")} {index + 1}
+                </a>
+              )}
+
+              {onRemove ? (
+                <button
+                  type="button"
+                  onClick={() => onRemove(index)}
+                  className="shrink-0 outline-none"
+                  aria-label={t("cancel")}
+                >
+                  <CloseCircle size={14} color="#FF0000" />
+                </button>
+              ) : null}
+            </div>
+          );
+        })}
+      </div>
+
+      {previewUrl &&
+        createPortal(
+          <div className="fixed inset-0 z-[100] flex items-center justify-center p-4" role="dialog" aria-modal="true">
+            <button
+              type="button"
+              aria-label={t("cancel")}
+              className="absolute inset-0 bg-black/70 outline-none"
+              onClick={() => setPreviewUrl(null)}
+            />
+
+            <div className="relative z-10 max-w-[90vw] max-h-[90vh]">
+              <button
+                type="button"
+                aria-label={t("cancel")}
+                onClick={() => setPreviewUrl(null)}
+                className="absolute -top-3 -left-3 size-9 rounded-full bg-white flex items-center justify-center shadow outline-none"
+              >
+                <CloseCircle size={22} color="#292D32" />
+              </button>
+
+              <img
+                src={previewUrl}
+                alt={getFileName(previewUrl)}
+                className="max-w-[90vw] max-h-[90vh] rounded-2xl object-contain bg-white"
+              />
+            </div>
+          </div>,
+          document.body,
+        )}
+    </>
+  );
+};
+
+export default CommentAttachments;

src/pages/taskmanager/components/task-detail/comment/CommentItem.tsx

@@ -1,13 +1,15 @@
-import { Edit2 } from "iconsax-react";
+import { CloseCircle, Edit2, Paperclip2 } from "iconsax-react";
 import moment from "moment-jalaali";
-import { type FC, useState } from "react";
+import { type FC, useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "../../../../../components/Toast";
 import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
 import { ErrorType } from "../../../../../helpers/types";
+import { useMultiUpload } from "../../../../service/hooks/useServiceData";
 import { useDeleteTaskComment, useUpdateTaskComment } from "../../../task/hooks/useTaskCommentData";
 import type { TaskCommentType } from "../../../task/types/TaskCommentTypes";
 import UserAvatar from "../../UserAvatar";
+import CommentAttachments from "./CommentAttachments";
 
 type Props = {
   comment: TaskCommentType;
@@ -16,29 +18,86 @@ type Props = {
 
 const CommentItem: FC<Props> = ({ comment, taskId }) => {
   const { t } = useTranslation("global");
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [isEditing, setIsEditing] = useState(false);
   const [content, setContent] = useState(comment.content);
+  const [attachments, setAttachments] = useState<string[]>(comment.attachments ?? []);
+  const [pendingFiles, setPendingFiles] = useState<File[]>([]);
   const updateComment = useUpdateTaskComment();
   const deleteComment = useDeleteTaskComment();
+  const multiUpload = useMultiUpload();
+
+  useEffect(() => {
+    setContent(comment.content);
+    setAttachments(comment.attachments ?? []);
+  }, [comment.content, comment.attachments]);
 
   const authorName = comment.user
     ? `${comment.user.firstName} ${comment.user.lastName}`.trim()
     : t("taskmanager.task_detail.unknown_user");
 
-  const handleSave = () => {
+  const isSubmitting = updateComment.isPending || multiUpload.isPending;
+
+  const handleFilesSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = Array.from(e.target.files ?? []);
+    if (selected.length === 0) return;
+
+    setPendingFiles((prev) => [...prev, ...selected]);
+    e.target.value = "";
+  };
+
+  const handleSave = async () => {
     const trimmedContent = content.trim();
-    if (!trimmedContent || trimmedContent === comment.content) {
+    const originalAttachments = comment.attachments ?? [];
+    const contentUnchanged = trimmedContent === comment.content;
+    const attachmentsUnchanged =
+      pendingFiles.length === 0 &&
+      attachments.length === originalAttachments.length &&
+      attachments.every((url, index) => url === originalAttachments[index]);
+
+    if (contentUnchanged && attachmentsUnchanged) {
       setIsEditing(false);
       setContent(comment.content);
+      setAttachments(originalAttachments);
+      setPendingFiles([]);
       return;
     }
 
+    if (!trimmedContent && attachments.length === 0 && pendingFiles.length === 0) {
+      return;
+    }
+
+    let nextAttachments = [...attachments];
+
+    if (pendingFiles.length > 0) {
+      const formData = new FormData();
+      pendingFiles.forEach((file) => formData.append("files", file));
+
+      try {
+        const uploadResult = await multiUpload.mutateAsync(formData);
+        const uploadedUrls: string[] =
+          uploadResult?.data?.map((item: { url: string }) => item?.url).filter(Boolean) ?? [];
+        nextAttachments = [...nextAttachments, ...uploadedUrls];
+      } catch (error) {
+        toast((error as ErrorType).response?.data?.error.message[0], "error");
+        return;
+      }
+    }
+
     updateComment.mutate(
-      { id: comment.id, params: { content: trimmedContent }, taskId },
+      {
+        id: comment.id,
+        params: {
+          content: trimmedContent,
+          attachments: nextAttachments,
+        },
+        taskId,
+      },
       {
         onSuccess: () => {
           toast(t("success"), "success");
           setIsEditing(false);
+          setPendingFiles([]);
         },
         onError: (error: ErrorType) => {
           toast(error.response?.data?.error.message[0], "error");
@@ -49,6 +108,8 @@ const CommentItem: FC<Props> = ({ comment, taskId }) => {
 
   const handleCancel = () => {
     setContent(comment.content);
+    setAttachments(comment.attachments ?? []);
+    setPendingFiles([]);
     setIsEditing(false);
   };
 
@@ -69,7 +130,7 @@ const CommentItem: FC<Props> = ({ comment, taskId }) => {
   return (
     <div className="bg-white/25 rounded-xl p-3">
       <div className="flex items-start gap-2">
-        <UserAvatar src={comment.user?.profilePic} alt={authorName} className="size-7" />
+        <UserAvatar src={comment.user?.profilePic} alt={authorName} className="size-7" showTooltip={false} />
 
         <div className="flex-1 min-w-0">
           <div className="flex items-center justify-between gap-2">
@@ -88,11 +149,42 @@ const CommentItem: FC<Props> = ({ comment, taskId }) => {
                 className="w-full bg-white/50 rounded-lg px-3 py-2 text-xs outline-none resize-none"
                 autoFocus
               />
-              <div className="flex gap-2 mt-2">
+
+              <CommentAttachments
+                attachments={attachments}
+                onRemove={(index) => setAttachments((prev) => prev.filter((_, i) => i !== index))}
+              />
+
+              {pendingFiles.length > 0 ? (
+                <div className="mt-2 flex flex-wrap gap-2">
+                  {pendingFiles.map((file, index) => (
+                    <div
+                      key={`${file.name}-${file.size}-${index}`}
+                      className="flex items-center gap-1.5 max-w-full rounded-lg bg-white/60 px-2 py-1"
+                    >
+                      <span className="text-[11px] truncate max-w-[160px]">{file.name}</span>
+                      <button
+                        type="button"
+                        onClick={() => setPendingFiles((prev) => prev.filter((_, i) => i !== index))}
+                        disabled={isSubmitting}
+                        className="shrink-0 outline-none disabled:opacity-50"
+                        aria-label={t("cancel")}
+                      >
+                        <CloseCircle size={14} color="#FF0000" />
+                      </button>
+                    </div>
+                  ))}
+                </div>
+              ) : null}
+
+              <div className="flex gap-2 mt-2 items-center">
                 <button
                   type="button"
                   onClick={handleSave}
-                  disabled={updateComment.isPending || !content.trim()}
+                  disabled={
+                    isSubmitting ||
+                    (!content.trim() && attachments.length === 0 && pendingFiles.length === 0)
+                  }
                   className="h-7 px-3 rounded-lg bg-[#292D32] text-white text-[11px] disabled:opacity-50"
                 >
                   {t("save")}
@@ -100,15 +192,34 @@ const CommentItem: FC<Props> = ({ comment, taskId }) => {
                 <button
                   type="button"
                   onClick={handleCancel}
-                  disabled={updateComment.isPending}
+                  disabled={isSubmitting}
                   className="h-7 px-3 rounded-lg bg-white/50 text-[#292D32] text-[11px] border border-white"
                 >
                   {t("cancel")}
                 </button>
+                <button
+                  type="button"
+                  onClick={() => fileInputRef.current?.click()}
+                  disabled={isSubmitting}
+                  className="size-7 rounded-lg bg-white/70 flex items-center justify-center disabled:opacity-50"
+                  aria-label={t("select_file")}
+                >
+                  <Paperclip2 size={16} color="#292D32" />
+                </button>
+                <input
+                  ref={fileInputRef}
+                  type="file"
+                  multiple
+                  className="hidden"
+                  onChange={handleFilesSelected}
+                />
               </div>
             </div>
           ) : (
-            <div className="mt-1 text-xs leading-6 whitespace-pre-line break-words">{comment.content}</div>
+            <>
+              <div className="mt-1 text-xs leading-6 whitespace-pre-line break-words">{comment.content}</div>
+              <CommentAttachments attachments={comment.attachments ?? []} />
+            </>
           )}
         </div>
 

src/pages/taskmanager/components/task-detail/comment/List.tsx

@@ -1,7 +1,9 @@
-import { type FC, useState } from "react";
+import { CloseCircle, Paperclip2 } from "iconsax-react";
+import { type FC, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "../../../../../components/Toast";
 import { ErrorType } from "../../../../../helpers/types";
+import { useMultiUpload } from "../../../../service/hooks/useServiceData";
 import { useCreateTaskComment, useGetTaskComments } from "../../../task/hooks/useTaskCommentData";
 import CommentItem from "./CommentItem";
 
@@ -12,22 +14,59 @@ type Props = {
 
 const CommentList: FC<Props> = ({ taskId, enabled = true }) => {
   const { t } = useTranslation("global");
+  const fileInputRef = useRef<HTMLInputElement>(null);
   const [content, setContent] = useState("");
+  const [files, setFiles] = useState<File[]>([]);
   const getComments = useGetTaskComments(taskId, enabled);
   const createComment = useCreateTaskComment();
+  const multiUpload = useMultiUpload();
 
   const comments = getComments.data?.data ?? [];
+  const trimmedContent = content.trim();
+  const isSubmitting = createComment.isPending || multiUpload.isPending;
+  const isSubmitDisabled = isSubmitting || (trimmedContent.length === 0 && files.length === 0);
 
-  const handleSubmit = () => {
-    const trimmedContent = content.trim();
-    if (!trimmedContent) return;
+  const handleFilesSelected = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selected = Array.from(e.target.files ?? []);
+    if (selected.length === 0) return;
+
+    setFiles((prev) => [...prev, ...selected]);
+    e.target.value = "";
+  };
+
+  const handleRemoveFile = (index: number) => {
+    setFiles((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const handleSubmit = async () => {
+    if (isSubmitDisabled) return;
+
+    let attachments: string[] | undefined;
+
+    if (files.length > 0) {
+      const formData = new FormData();
+      files.forEach((file) => formData.append("files", file));
+
+      try {
+        const uploadResult = await multiUpload.mutateAsync(formData);
+        attachments = uploadResult?.data?.map((item: { url: string }) => item?.url).filter(Boolean);
+      } catch (error) {
+        toast((error as ErrorType).response?.data?.error.message[0], "error");
+        return;
+      }
+    }
 
     createComment.mutate(
-      { content: trimmedContent, taskId },
+      {
+        content: trimmedContent,
+        taskId,
+        ...(attachments?.length ? { attachments } : {}),
+      },
       {
         onSuccess: () => {
           toast(t("success"), "success");
           setContent("");
+          setFiles([]);
         },
         onError: (error: ErrorType) => {
           toast(error.response?.data?.error.message[0], "error");
@@ -41,21 +80,61 @@ const CommentList: FC<Props> = ({ taskId, enabled = true }) => {
       <div className="text-sm font-bold">{t("taskmanager.task_detail.comments")}</div>
 
       <div className="mt-3 relative bg-white/25 rounded-xl">
-        <button
-          type="button"
-          onClick={handleSubmit}
-          disabled={createComment.isPending || !content.trim()}
-          className="absolute top-2 left-2 z-10 h-7 px-2.5 rounded-lg bg-[#292D32] text-white text-[11px] disabled:opacity-50"
-        >
-          {t("taskmanager.task_detail.add_comment")}
-        </button>
+        <div className="absolute top-2 left-2 z-10 flex items-center gap-1.5">
+          <button
+            type="button"
+            onClick={() => fileInputRef.current?.click()}
+            disabled={isSubmitting}
+            className="size-7 rounded-lg bg-white/70 flex items-center justify-center disabled:opacity-50"
+            aria-label={t("select_file")}
+          >
+            <Paperclip2 size={16} color="#292D32" />
+          </button>
+          <button
+            type="button"
+            onClick={handleSubmit}
+            disabled={isSubmitDisabled}
+            className="h-7 px-2.5 rounded-lg bg-[#292D32] text-white text-[11px] disabled:opacity-50"
+          >
+            {t("taskmanager.task_detail.add_comment")}
+          </button>
+        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          className="hidden"
+          onChange={handleFilesSelected}
+        />
         <textarea
           value={content}
           onChange={(e) => setContent(e.target.value)}
           placeholder={t("taskmanager.task_detail.comment_placeholder")}
           rows={3}
-          className="w-full bg-transparent rounded-xl px-4 pt-4 pb-3 text-xs outline-none resize-none placeholder:text-description"
+          className="w-full bg-transparent rounded-xl px-4 pt-4 pb-3 pl-28 text-xs outline-none resize-none placeholder:text-description"
         />
+
+        {files.length > 0 ? (
+          <div className="px-3 pb-3 flex flex-wrap gap-2">
+            {files.map((file, index) => (
+              <div
+                key={`${file.name}-${file.size}-${index}`}
+                className="flex items-center gap-1.5 max-w-full rounded-lg bg-white/60 px-2 py-1"
+              >
+                <span className="text-[11px] truncate max-w-[160px]">{file.name}</span>
+                <button
+                  type="button"
+                  onClick={() => handleRemoveFile(index)}
+                  disabled={isSubmitting}
+                  className="shrink-0 outline-none disabled:opacity-50"
+                  aria-label={t("cancel")}
+                >
+                  <CloseCircle size={14} color="#FF0000" />
+                </button>
+              </div>
+            ))}
+          </div>
+        ) : null}
       </div>
 
       {getComments.isPending ? (
@@ -65,7 +144,11 @@ const CommentList: FC<Props> = ({ taskId, enabled = true }) => {
       ) : (
         <div className="mt-3 flex flex-col gap-2">
           {comments.map((comment) => (
-            <CommentItem key={comment.id} comment={comment} taskId={taskId} />
+            <CommentItem
+              key={comment.id}
+              comment={comment}
+              taskId={taskId}
+            />
           ))}
         </div>
       )}

src/pages/taskmanager/components/task-detail/labels/TaskDetailLabelsList.tsx

@@ -2,6 +2,7 @@ import { AddCircle, Edit } from "iconsax-react";
 import { type FC } from "react";
 import { useTranslation } from "react-i18next";
 import Button from "../../../../../components/Button";
+import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
 import TaskDetailLabelCheckbox from "./TaskDetailLabelCheckbox";
 import type { TaskLabel } from "./types";
 
@@ -10,10 +11,20 @@ type Props = {
   selectedIds: Set<string>;
   onToggle: (id: string) => void;
   onEdit: (label: TaskLabel) => void;
+  onDelete: (id: string) => void;
   onCreateClick: () => void;
+  isDeleting?: boolean;
 };
 
-const TaskDetailLabelsList: FC<Props> = ({ labels, selectedIds, onToggle, onEdit, onCreateClick }) => {
+const TaskDetailLabelsList: FC<Props> = ({
+  labels,
+  selectedIds,
+  onToggle,
+  onEdit,
+  onDelete,
+  onCreateClick,
+  isDeleting = false,
+}) => {
   const { t } = useTranslation("global");
 
   return (
@@ -32,7 +43,8 @@ const TaskDetailLabelsList: FC<Props> = ({ labels, selectedIds, onToggle, onEdit
                 {label.title && <span className="text-xs font-medium truncate">{label.title}</span>}
               </div>
 
-              <Edit onClick={() => onEdit(label)} size={16} color="#0047FF" />
+              <Edit onClick={() => onEdit(label)} size={16} color="#0047FF" className="shrink-0 cursor-pointer" />
+              <TrashWithConfrim onDelete={() => onDelete(label.id)} isLoading={isDeleting} size={16} color="#FF0000" />
             </div>
           );
         })}

src/pages/taskmanager/components/task-detail/labels/TaskDetailLabelsPopover.tsx

@@ -10,7 +10,9 @@ type Props = {
   onViewChange: (view: LabelsView) => void;
   onToggle: (id: string) => void;
   onCreate: (title: string, color: string) => void;
+  onDelete: (id: string) => void;
   isSubmitting?: boolean;
+  isDeleting?: boolean;
 };
 
 const TaskDetailLabelsPopover: FC<Props> = ({
@@ -20,7 +22,9 @@ const TaskDetailLabelsPopover: FC<Props> = ({
   onViewChange,
   onToggle,
   onCreate,
+  onDelete,
   isSubmitting = false,
+  isDeleting = false,
 }) => {
   return (
     <>
@@ -30,7 +34,9 @@ const TaskDetailLabelsPopover: FC<Props> = ({
           selectedIds={selectedIds}
           onToggle={onToggle}
           onEdit={() => undefined}
+          onDelete={onDelete}
           onCreateClick={() => onViewChange("create")}
+          isDeleting={isDeleting}
         />
       ) : (
         <TaskDetailNewLabelForm

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

@@ -72,7 +72,7 @@ const TaskDetailUsersList: FC<Props> = ({
                     onToggle={() => onToggle(user.id)}
                     ariaLabel={user.name}
                   />
-                  <UserAvatar src={user.avatar} alt={user.name} />
+                  <UserAvatar src={user.avatar} alt={user.name} showTooltip={false} />
                   <div className="text-[10px]">{user.name}</div>
                 </div>
               );

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

@@ -3,10 +3,14 @@ import { FC, useRef, useState } from "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 { useGetWorkspaces } from "../../workspace/hooks/useWorkspaceData";
-import { WorkspaceItemType } from "../../workspace/types/WorkspaceTypes";
+import {
+  useGetWorkspaces,
+  useGetWorkspaceUsers,
+} from "../../workspace/hooks/useWorkspaceData";
+import {
+  WorkspaceItemType,
+  WorkspaceUserType,
+} from "../../workspace/types/WorkspaceTypes";
 import WorkspaceColorPicker from "../../workspace/components/WorkspaceColorPicker";
 import UserAvatar from "../../components/UserAvatar";
 
@@ -67,8 +71,8 @@ const CreateProjectSidebar: FC<Props> = ({
   className,
 }) => {
   const { t } = useTranslation("global");
-  const getUsers = useGetUsers("");
   const getWorkspaces = useGetWorkspaces();
+  const getWorkspaceUsers = useGetWorkspaceUsers(workspaceId);
   const [userSelectValue, setUserSelectValue] = useState("");
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -82,19 +86,24 @@ const CreateProjectSidebar: FC<Props> = ({
     value: workspace.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 workspaceUsers: WorkspaceUserType[] = Array.isArray(
+    getWorkspaceUsers.data?.data,
+  )
+    ? getWorkspaceUsers.data.data
+    : (getWorkspaceUsers.data?.data?.users ?? []);
+
+  const userItems = workspaceUsers
+    .filter((user) => !selectedUsers.some((selected) => selected.id === user.id))
+    .map((user) => ({
+      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);
+    const user = workspaceUsers.find((item) => item.id === value);
 
     if (user) {
       onSelectedUsersChange([
@@ -140,14 +149,26 @@ const CreateProjectSidebar: FC<Props> = ({
           placeholder={t("taskmanager.select_workspace")}
           items={workspaceItems}
           value={workspaceId}
-          onChange={(e) => onWorkspaceIdChange(e.target.value)}
+          onChange={(e) => {
+            onWorkspaceIdChange(e.target.value);
+            onSelectedUsersChange([]);
+            setUserSelectValue("");
+          }}
           className="border"
           error_text={workspaceError ?? ""}
         />
       </div>
 
       <div className="mt-8">
-        <Select label={t("taskmanager.users")} placeholder={t("taskmanager.select_user")} items={userItems} value={userSelectValue} onChange={handleUserSelect} className="border" />
+        <Select
+          label={t("taskmanager.users")}
+          placeholder={t("taskmanager.select_user")}
+          items={userItems}
+          value={userSelectValue}
+          onChange={handleUserSelect}
+          className="border"
+          disabled={!workspaceId}
+        />
 
         <div className="mt-3 border border-dashed border-border rounded-xl p-4 flex gap-2 flex-wrap min-h-[52px]">
           {selectedUsers.length === 0 ? (
@@ -155,7 +176,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} />
+                <UserAvatar src={user.profilePic} alt={user.name} showTooltip={false} />
                 <div>{user.name}</div>
                 <CloseCircle variant="Bold" className="size-4 cursor-pointer" color="red" onClick={() => handleRemoveUser(user.id)} />
               </div>

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

@@ -2,6 +2,7 @@ import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import { More } from "iconsax-react";
 import { FC } from "react";
 import { useTranslation } from "react-i18next";
+import { usePermissions } from "../../../../hooks/usePermissions";
 
 type Props = {
   onEdit: () => void;
@@ -10,6 +11,7 @@ type Props = {
 
 const ProjectCardMenu: FC<Props> = ({ onEdit, onDelete }) => {
   const { t } = useTranslation("global");
+  const { canUpdate, canDelete } = usePermissions();
 
   return (
     <Popover className="relative">
@@ -21,20 +23,24 @@ const ProjectCardMenu: FC<Props> = ({ onEdit, onDelete }) => {
         anchor="bottom start"
         className="z-20 mt-1 min-w-[120px] rounded-xl bg-white shadow-md border border-border py-1 text-sm"
       >
-        <button
-          type="button"
-          onClick={onEdit}
-          className="w-full px-4 py-2.5 text-right hover:bg-[#F4F5F9] transition-colors"
-        >
-          {t("edit")}
-        </button>
-        <button
-          type="button"
-          onClick={onDelete}
-          className="w-full px-4 py-2.5 text-right text-red-500 hover:bg-red-50 transition-colors"
-        >
-          {t("taskmanager.delete_project")}
-        </button>
+        {canUpdate("project") && (
+          <button
+            type="button"
+            onClick={onEdit}
+            className="w-full px-4 py-2.5 text-right hover:bg-[#F4F5F9] transition-colors"
+          >
+            {t("edit")}
+          </button>
+        )}
+        {canDelete("project") && (
+          <button
+            type="button"
+            onClick={onDelete}
+            className="w-full px-4 py-2.5 text-right text-red-500 hover:bg-red-50 transition-colors"
+          >
+            {t("taskmanager.delete_project")}
+          </button>
+        )}
       </PopoverPanel>
     </Popover>
   );

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

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { Link, useNavigate } from "react-router-dom";
 import Button from "../../../../components/Button";
 import { Pages } from "../../../../config/Pages";
+import { usePermissions } from "../../../../hooks/usePermissions";
 
 type Props = {
   title: string;
@@ -13,6 +14,7 @@ type Props = {
 
 const ProjectListHeader: FC<Props> = ({ title, workspaceId, onSettingsClick }) => {
   const { t } = useTranslation("global");
+  const { canCreate } = usePermissions();
   const createProjectLink = workspaceId ? `${Pages.taskmanager.createProject}?workspaceId=${workspaceId}` : Pages.taskmanager.createProject;
   const navigate = useNavigate();
   return (
@@ -31,18 +33,20 @@ const ProjectListHeader: FC<Props> = ({ title, workspaceId, onSettingsClick }) =
           <span>برگشت</span>
         </Button>
 
-        <Link to={createProjectLink}>
-          <Button
-            onClick={onSettingsClick}
-            className="flex items-center gap-2 whitespace-nowrap px-4"
-          >
-            <Add
-              size={18}
-              color="white"
-            />
-            <span>{t("taskmanager.new_project")}</span>
-          </Button>
-        </Link>
+        {canCreate("project") && (
+          <Link to={createProjectLink}>
+            <Button
+              onClick={onSettingsClick}
+              className="flex items-center gap-2 whitespace-nowrap px-4"
+            >
+              <Add
+                size={18}
+                color="white"
+              />
+              <span>{t("taskmanager.new_project")}</span>
+            </Button>
+          </Link>
+        )}
       </div>
     </div>
   );

src/pages/taskmanager/project/hooks/useProjectData.ts

@@ -26,6 +26,14 @@ export const useGetProject = (id: string) => {
   });
 };
 
+export const useGetProjectUsers = (id: string, enabled = true) => {
+  return useQuery({
+    queryKey: ["project-users", id],
+    queryFn: () => api.getProjectUsers(id),
+    enabled: !!id && enabled,
+  });
+};
+
 export const useCreateProject = () => {
   const queryClient = useQueryClient();
 
@@ -49,6 +57,9 @@ export const useUpdateProject = () => {
       queryClient.invalidateQueries({
         queryKey: ["project-detail", variables.id],
       });
+      queryClient.invalidateQueries({
+        queryKey: ["project-users", variables.id],
+      });
     },
   });
 };

src/pages/taskmanager/project/service/ProjectService.ts

@@ -1,5 +1,5 @@
 import axios from "../../../../config/axios";
-import { CreateProjectType, GetProjectResponse, UpdateProjectType } from "../types/ProjectTypes";
+import { CreateProjectType, GetProjectResponse, GetProjectUsersResponse, UpdateProjectType } from "../types/ProjectTypes";
 
 export const getProjectsByWorkspace = async (workspaceId: string) => {
   const { data } = await axios.get(`/task-manager/projects/user/workspace/${workspaceId}`);
@@ -16,6 +16,11 @@ export const getProject = async (id: string): Promise<GetProjectResponse> => {
   return data;
 };
 
+export const getProjectUsers = async (id: string): Promise<GetProjectUsersResponse> => {
+  const { data } = await axios.get(`/task-manager/projects/${id}/users`);
+  return data;
+};
+
 export const createProject = async (params: CreateProjectType) => {
   const { data } = await axios.post(`/task-manager/projects`, params);
   return data;

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

@@ -53,3 +53,7 @@ export type ProjectWithPhasesType = {
 export interface GetProjectResponse extends IResponse<ProjectWithPhasesType> {
   statusCode: number;
 }
+
+export interface GetProjectUsersResponse extends IResponse<ProjectUserType[]> {
+  statusCode: number;
+}

src/pages/taskmanager/task/hooks/useTaskData.ts

@@ -6,7 +6,9 @@ import {
   CreateTaskAttachmentType,
   CreateTaskRemarkType,
   CreateTaskType,
+  GetTaskDetailResponse,
   UpdateCheckListItemType,
+  UpdateTaskAttachmentType,
   UpdateTaskType,
 } from "../types/TaskTypes";
 
@@ -117,6 +119,18 @@ export const useCreateTaskRemark = () => {
   });
 };
 
+export const useDeleteTaskRemark = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id }: { id: string; taskId: string }) => api.deleteTaskRemark(id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["project"] });
+    },
+  });
+};
+
 export const useCreateCheckListItem = () => {
   const queryClient = useQueryClient();
 
@@ -124,6 +138,7 @@ export const useCreateCheckListItem = () => {
     mutationFn: (variables: CreateCheckListItemType) => api.createCheckListItem(variables),
     onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
       queryClient.invalidateQueries({ queryKey: ["project"] });
     },
   });
@@ -135,8 +150,45 @@ export const useUpdateCheckListItem = () => {
   return useMutation({
     mutationFn: ({ id, params }: { id: string; params: UpdateCheckListItemType; taskId: string }) =>
       api.updateCheckListItem(id, params),
-    onSuccess: (_data, variables) => {
+    onMutate: async ({ id, params, taskId }) => {
+      await queryClient.cancelQueries({ queryKey: ["task-detail", taskId] });
+
+      const previous = queryClient.getQueryData<GetTaskDetailResponse>(["task-detail", taskId]);
+
+      queryClient.setQueryData<GetTaskDetailResponse>(["task-detail", taskId], (current) => {
+        if (!current?.data?.checkListItems) return current;
+
+        const checkListItems = current.data.checkListItems.map((item) =>
+          item.id === id
+            ? {
+                ...item,
+                ...(params.isDone !== undefined ? { isDone: params.isDone } : {}),
+                ...(params.title !== undefined ? { title: params.title } : {}),
+              }
+            : item,
+        );
+        const completedCheckListItemCount = checkListItems.filter((item) => item.isDone).length;
+
+        return {
+          ...current,
+          data: {
+            ...current.data,
+            checkListItems,
+            completedCheckListItemCount,
+          },
+        };
+      });
+
+      return { previous };
+    },
+    onError: (_error, variables, context) => {
+      if (context?.previous) {
+        queryClient.setQueryData(["task-detail", variables.taskId], context.previous);
+      }
+    },
+    onSettled: (_data, _error, variables) => {
       queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
       queryClient.invalidateQueries({ queryKey: ["project"] });
     },
   });
@@ -149,6 +201,7 @@ export const useDeleteCheckListItem = () => {
     mutationFn: ({ id }: { id: string; taskId: string }) => api.deleteCheckListItem(id),
     onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
       queryClient.invalidateQueries({ queryKey: ["project"] });
     },
   });
@@ -161,6 +214,34 @@ export const useCreateTaskAttachment = () => {
     mutationFn: (variables: CreateTaskAttachmentType) => api.createTaskAttachment(variables),
     onSuccess: (_data, variables) => {
       queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
+      queryClient.invalidateQueries({ queryKey: ["project"] });
+    },
+  });
+};
+
+export const useUpdateTaskAttachment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: UpdateTaskAttachmentType }) =>
+      api.updateTaskAttachment(id, params),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-detail", variables.params.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
+      queryClient.invalidateQueries({ queryKey: ["project"] });
+    },
+  });
+};
+
+export const useDeleteTaskAttachment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id }: { id: string; taskId: string }) => api.deleteTaskAttachment(id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-detail", variables.taskId] });
+      queryClient.invalidateQueries({ queryKey: ["tasks-by-task-phase"] });
       queryClient.invalidateQueries({ queryKey: ["project"] });
     },
   });

src/pages/taskmanager/task/service/TaskService.ts

@@ -11,6 +11,7 @@ import {
   GetTasksByTaskPhaseResponse,
   UpdateCheckListItemResponse,
   UpdateCheckListItemType,
+  UpdateTaskAttachmentType,
   UpdateTaskType,
 } from "../types/TaskTypes";
 
@@ -63,6 +64,11 @@ export const createTaskRemark = async (params: CreateTaskRemarkType): Promise<Cr
   return data;
 };
 
+export const deleteTaskRemark = async (id: string) => {
+  const { data } = await axios.delete(`/task-manager/remarks/${id}`);
+  return data;
+};
+
 export const createCheckListItem = async (params: CreateCheckListItemType): Promise<CreateCheckListItemResponse> => {
   const { data } = await axios.post(`/task-manager/check-list-items`, params);
   return data;
@@ -85,3 +91,13 @@ export const createTaskAttachment = async (params: CreateTaskAttachmentType) =>
   const { data } = await axios.post(`/task-manager/attachments`, params);
   return data;
 };
+
+export const updateTaskAttachment = async (id: string, params: UpdateTaskAttachmentType) => {
+  const { data } = await axios.patch(`/task-manager/attachments/${id}`, params);
+  return data;
+};
+
+export const deleteTaskAttachment = async (id: string) => {
+  const { data } = await axios.delete(`/task-manager/attachments/${id}`);
+  return data;
+};

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

@@ -13,6 +13,7 @@ export type TaskCommentType = {
   taskId: string;
   userId?: string;
   user?: TaskCommentAuthorType;
+  attachments?: string[];
   createdAt: string;
   updatedAt?: string;
 };
@@ -20,10 +21,12 @@ export type TaskCommentType = {
 export type CreateTaskCommentType = {
   content: string;
   taskId: string;
+  attachments?: string[];
 };
 
 export type UpdateTaskCommentType = {
   content: string;
+  attachments?: string[];
 };
 
 export interface GetTaskCommentsResponse extends IResponse<TaskCommentType[]> {

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

@@ -23,9 +23,9 @@ export type TaskItemType = {
   endDate?: string | null;
   tag?: string;
   dateRange?: string;
-  attachments?: number;
-  checklistDone?: number;
-  checklistTotal?: number;
+  attachmentCount?: number;
+  checkListItemCount?: number;
+  completedCheckListItemCount?: number;
   ticketId?: string | null;
   users?: TaskUserType[];
 };
@@ -83,7 +83,9 @@ export interface CreateCheckListItemResponse extends IResponse<{ checkListItem:
 }
 
 export type UpdateCheckListItemType = {
-  isDone: boolean;
+  title?: string;
+  isDone?: boolean;
+  taskId?: string;
 };
 
 export interface UpdateCheckListItemResponse extends IResponse<{ checkListItem: TaskChecklistItemType }> {
@@ -111,6 +113,13 @@ export type CreateTaskAttachmentType = {
   taskId: string;
 };
 
+export type UpdateTaskAttachmentType = {
+  file: string;
+  title: string;
+  type: "file" | "link";
+  taskId: string;
+};
+
 export type TaskDetailType = {
   id: string;
   createdAt: string;

src/pages/taskmanager/task/utils/mapTaskItemToTask.ts

@@ -4,14 +4,14 @@ import type { TaskItemType } from "../types/TaskTypes";
 export const mapTaskItemToTask = (task: TaskItemType, taskPhaseId: string, fallbackOrder: number): Task => ({
   id: task.id,
   columnId: task.taskPhaseId ?? taskPhaseId,
-  order: task.order ?? task.priority ?? fallbackOrder,
+  order: task.priority ?? task.order ?? fallbackOrder,
   title: task.title,
   tag: task.tag ?? "",
   dateRange: task.dateRange ?? "",
   color: task.color || null,
-  attachments: task.attachments ?? 0,
-  checklistDone: task.checklistDone ?? 0,
-  checklistTotal: task.checklistTotal ?? 0,
+  attachments: task.attachmentCount ?? 0,
+  checklistDone: task.completedCheckListItemCount ?? 0,
+  checklistTotal: task.checkListItemCount ?? 0,
   ticketId: task.ticketId ?? null,
   users: task.users ?? [],
 });

src/pages/taskmanager/utils/getPriorityDestinationTaskId.ts

@@ -1,6 +1,5 @@
 import type { TaskItemType } from "../task/types/TaskTypes";
-
-const getTaskSortOrder = (task: TaskItemType) => task.order ?? task.priority ?? 0;
+import { getTaskSortOrder } from "./getTaskSortOrder";
 
 export const getPriorityDestinationTaskId = (
   items: TaskItemType[],
@@ -9,16 +8,19 @@ export const getPriorityDestinationTaskId = (
   removeSource = true,
 ): string | null => {
   const sorted = [...items].sort((a, b) => getTaskSortOrder(a) - getTaskSortOrder(b));
-  const sourceIndex = sorted.findIndex((item) => item.id === sourceId);
 
-  if (removeSource && sourceIndex === destIndex) return null;
-
-  const list = removeSource ? sorted.filter((item) => item.id !== sourceId) : sorted;
-  if (list.length === 0) return null;
-
-  if (destIndex >= list.length) {
-    return list[list.length - 1].id;
+  if (!removeSource) {
+    if (sorted.length === 0) return null;
+    if (destIndex >= sorted.length) return sorted[sorted.length - 1].id;
+    return sorted[destIndex].id;
   }
 
-  return list[destIndex].id;
+  const sourceIndex = sorted.findIndex((item) => item.id === sourceId);
+  if (sourceIndex === -1 || sourceIndex === destIndex) return null;
+
+  // Dest is the task currently at the drop index (مقصد), not after removing source.
+  const destTask = sorted[destIndex];
+  if (!destTask || destTask.id === sourceId) return null;
+
+  return destTask.id;
 };

src/pages/taskmanager/utils/getTaskSortOrder.ts

@@ -0,0 +1,4 @@
+import type { TaskItemType } from "../task/types/TaskTypes";
+
+export const getTaskSortOrder = (task: Pick<TaskItemType, "priority" | "order">) =>
+  task.priority ?? task.order ?? 0;

src/pages/taskmanager/utils/reorderTaskItems.ts

@@ -1,6 +1,5 @@
 import type { TaskItemType } from "../task/types/TaskTypes";
-
-const getTaskSortOrder = (task: TaskItemType) => task.order ?? task.priority ?? 0;
+import { getTaskSortOrder } from "./getTaskSortOrder";
 
 export const reorderTaskItems = (
   tasks: TaskItemType[],

src/pages/taskmanager/workspace.tsx

@@ -115,9 +115,9 @@ const Workspace: FC = () => {
           tag: activeTask.tag,
           dateRange: activeTask.dateRange,
           color: activeTask.color,
-          attachments: activeTask.attachments,
-          checklistDone: activeTask.checklistDone,
-          checklistTotal: activeTask.checklistTotal,
+          attachmentCount: activeTask.attachments,
+          completedCheckListItemCount: activeTask.checklistDone,
+          checkListItemCount: activeTask.checklistTotal,
           ticketId: activeTask.ticketId,
           users: activeTask.users,
         },

src/pages/taskmanager/workspace/List.tsx

@@ -2,18 +2,20 @@ import { Add, Edit, Trash } from "iconsax-react";
 import { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import { toast } from "../../../components/Toast";
 import Button from "../../../components/Button";
 import DeleteNameConfirmModal from "../../../components/DeleteNameConfirmModal";
 import PageLoading from "../../../components/PageLoading";
 import Td from "../../../components/Td";
+import { toast } from "../../../components/Toast";
 import { Pages } from "../../../config/Pages";
 import { ErrorType } from "../../../helpers/types";
 import { useDeleteWorkspace, useGetWorkspaces } from "./hooks/useWorkspaceData";
 import { WorkspaceItemType } from "./types/WorkspaceTypes";
+import { usePermissions } from "../../../hooks/usePermissions";
 
 const WorkspaceList: FC = () => {
   const { t } = useTranslation("global");
+  const { canCreate, canUpdate, canDelete } = usePermissions();
   const getWorkspaces = useGetWorkspaces();
   const deleteWorkspace = useDeleteWorkspace();
   const [deleteTarget, setDeleteTarget] = useState<WorkspaceItemType | null>(null);
@@ -38,17 +40,19 @@ const WorkspaceList: FC = () => {
     <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>
+        {canCreate("workspace") && (
+          <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 ? (
@@ -85,25 +89,29 @@ const WorkspaceList: FC = () => {
                   <Td text="">
                     <Link to={Pages.taskmanager.projectList + item.id}>
                       <Button
-                        label="مدیریت پروژه ها"
+                        label="مشاهده پروژه ها"
                         className="bg-blue-400 w-fit px-3"
                       />
                     </Link>
                   </Td>
                   <Td text="">
                     <div className="flex items-center gap-2">
-                      <Link to={Pages.taskmanager.updateWorkspace + item.id}>
-                        <Edit
+                      {canUpdate("workspace") && (
+                        <Link to={Pages.taskmanager.updateWorkspace + item.id}>
+                          <Edit
+                            size={20}
+                            color="#8C90A3"
+                          />
+                        </Link>
+                      )}
+                      {canDelete("workspace") && (
+                        <Trash
+                          onClick={() => setDeleteTarget(item)}
+                          color="#888"
                           size={20}
-                          color="#8C90A3"
+                          className="cursor-pointer"
                         />
-                      </Link>
-                      <Trash
-                        onClick={() => setDeleteTarget(item)}
-                        color="#888"
-                        size={20}
-                        className="cursor-pointer"
-                      />
+                      )}
                     </div>
                   </Td>
                 </tr>

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

@@ -3,7 +3,7 @@ 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 { useGetAdminsListAll } from "../../../users/hooks/useUserData";
 import { UserItemType } from "../../../users/types/UserTypes";
 import WorkspaceColorPicker from "./WorkspaceColorPicker";
 import UserAvatar from "../../components/UserAvatar";
@@ -32,27 +32,25 @@ const CreateWorkspaceSidebar: FC<Props> = ({
   onSelectedUsersChange,
 }) => {
   const { t } = useTranslation("global");
-  const getUsers = useGetUsers("");
+  const getAdmins = useGetAdminsListAll();
   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 admins: UserItemType[] = getAdmins.data?.data ?? [];
+
+  const userItems = admins
+    .filter(
+      (user) => !selectedUsers.some((selected) => selected.id === user.id),
+    )
+    .map((user) => ({
+      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,
-    );
+    const user = admins.find((item) => item.id === value);
 
     if (user) {
       onSelectedUsersChange([
@@ -113,7 +111,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} />
+              <UserAvatar src={user.profilePic} alt={user.name} showTooltip={false} />
               <div>{user.name}</div>
               <CloseCircle
                 variant="Bold"

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

@@ -20,6 +20,14 @@ export const useGetWorkspaceDetail = (id: string) => {
   });
 };
 
+export const useGetWorkspaceUsers = (id: string) => {
+  return useQuery({
+    queryKey: ["workspace-users", id],
+    queryFn: () => api.getWorkspaceUsers(id),
+    enabled: !!id,
+  });
+};
+
 export const useCreateWorkspace = () => {
   const queryClient = useQueryClient();
 

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

@@ -14,6 +14,11 @@ export const getWorkspaceDetail = async (id: string) => {
   return data;
 };
 
+export const getWorkspaceUsers = async (id: string) => {
+  const { data } = await axios.get(`/task-manager/workspaces/${id}/users`);
+  return data;
+};
+
 export const createWorkspace = async (params: CreateWorkspaceType) => {
   const { data } = await axios.post(`/task-manager/workspaces`, params);
   return data;

src/pages/ticket/Category.tsx

@@ -14,10 +14,12 @@ import { useCreateCategory, useGetCategories } from './hooks/useTicketData'
 import Textarea from '../../components/Textarea'
 import { ErrorType } from '../../helpers/types'
 import { toast } from '../../components/Toast';
+import { usePermissions } from '../../hooks/usePermissions'
 
 const TicketCategory: FC = () => {
 
     const { t } = useTranslation('global')
+    const { canCreate } = usePermissions()
     const getGroups = useGetGroups()
     const createCategory = useCreateCategory()
     const getCategories = useGetCategories()
@@ -100,6 +102,7 @@ const TicketCategory: FC = () => {
                     </div>
                 </div>
 
+                {canCreate('ticket_categories') &&
                 <div className='bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
                     <div className='text-sm'>
                         {t('ticket.add_category')}
@@ -187,6 +190,7 @@ const TicketCategory: FC = () => {
                         </div>
                     </div> */}
                 </div>
+                }
             </div>
         </div>
     )

src/pages/ticket/CreateTicket.tsx

@@ -1,244 +1,237 @@
-import { FC, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Input from '../../components/Input'
-import Select from '../../components/Select'
-import Textarea from '../../components/Textarea'
-import UploadBox from '../../components/UploadBox'
-import Button from '../../components/Button'
-import { TickCircle, TickSquare } from 'iconsax-react'
-import { useCreateTicket, useGetCategories } from './hooks/useTicketData'
-import { useGetProfile } from '../profile/hooks/useProfileData'
-import PageLoading from '../../components/PageLoading'
-import { useFormik } from 'formik'
-import * as Yup from 'yup'
-import { ErrorType } from '../../helpers/types'
-import { useNavigate } from 'react-router-dom'
-import { Pages } from '../../config/Pages'
-import { CreateTicketAdminType } from './types/TicketTypes'
-import { toast } from '../../components/Toast';
-import { useMultiUpload } from '../service/hooks/useServiceData'
-import { useGetCustomers } from '../customer/hooks/useCustomerData'
-import { CustomerItemType } from '../customer/types/CustomerTypes'
+import { useFormik } from "formik";
+import { TickCircle, TickSquare } from "iconsax-react";
+import { FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import * as Yup from "yup";
+import Button from "../../components/Button";
+import Input from "../../components/Input";
+import PageLoading from "../../components/PageLoading";
+import Select from "../../components/Select";
+import Textarea from "../../components/Textarea";
+import { toast } from "../../components/Toast";
+import UploadBox from "../../components/UploadBox";
+import { Pages } from "../../config/Pages";
+import { ErrorType } from "../../helpers/types";
+import { useGetCustomers } from "../customer/hooks/useCustomerData";
+import { CustomerItemType } from "../customer/types/CustomerTypes";
+import { useGetProfile } from "../profile/hooks/useProfileData";
+import { useMultiUpload } from "../service/hooks/useServiceData";
+import { useCreateTicket, useGetCategories } from "./hooks/useTicketData";
+import { CreateTicketAdminType } from "./types/TicketTypes";
 
 const CreateTicket: FC = () => {
-    const { t } = useTranslation('global')
-    const navigate = useNavigate()
-    const [files, setFiles] = useState<File[]>([])
-    const getProfile = useGetProfile()
-    const getCategories = useGetCategories()
-    const multiUpload = useMultiUpload()
-    const createTicket = useCreateTicket()
-    const getCustomers = useGetCustomers(1, true)
+  const { t } = useTranslation("global");
+  const navigate = useNavigate();
+  const [files, setFiles] = useState<File[]>([]);
+  const getProfile = useGetProfile();
+  const getCategories = useGetCategories();
+  const multiUpload = useMultiUpload();
+  const createTicket = useCreateTicket();
+  const getCustomers = useGetCustomers(1, 50, true);
 
+  const formik = useFormik<CreateTicketAdminType>({
+    initialValues: {
+      subject: "",
+      message: "",
+      categoryId: "",
+      priority: "LOW",
+      attachmentUrls: [],
+      userId: "",
+    },
+    validationSchema: Yup.object({
+      subject: Yup.string().required(t("errors.required")),
+      message: Yup.string().required(t("errors.required")),
+      categoryId: Yup.string().required(t("errors.required")),
+      priority: Yup.string().required(t("errors.required")),
+    }),
+    onSubmit: async (values) => {
+      if (files.length > 0) {
+        const images = new FormData();
+        files.forEach((file) => {
+          images.append("files", file);
+        });
+        await multiUpload.mutateAsync(images, {
+          onSuccess: async (data) => {
+            values.attachmentUrls = await data.data.map((item: { url: string }) => item?.url);
+          },
+          onError: (error: ErrorType) => {
+            toast(error.response?.data?.error?.message[0], "error");
+          },
+        });
+      } else {
+        delete values.attachmentUrls;
+      }
 
-    const formik = useFormik<CreateTicketAdminType>({
-        initialValues: {
-            subject: '',
-            message: '',
-            categoryId: '',
-            priority: 'LOW',
-            attachmentUrls: [],
-            userId: ''
+      if (values.danakServiceId === "") {
+        delete values.danakServiceId;
+      }
+
+      createTicket.mutate(values, {
+        onSuccess: (data) => {
+          toast(t("success"), "success");
+          formik.resetForm();
+          navigate(Pages.ticket.detail + data.data?.ticketId);
         },
-        validationSchema: Yup.object({
-            subject: Yup.string().required(t('errors.required')),
-            message: Yup.string().required(t('errors.required')),
-            categoryId: Yup.string().required(t('errors.required')),
-            priority: Yup.string().required(t('errors.required')),
-        }),
-        onSubmit: async (values) => {
-            if (files.length > 0) {
-                const images = new FormData()
-                files.forEach(file => {
-                    images.append('files', file)
-                })
-                await multiUpload.mutateAsync(images, {
-                    onSuccess: async (data) => {
-                        values.attachmentUrls = await data.data.map((item: { url: string }) => item?.url)
-                    },
-                    onError: (error: ErrorType) => {
-                        toast(error.response?.data?.error?.message[0], 'error')
-                    }
-                })
-            } else {
-                delete values.attachmentUrls
-            }
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error?.message[0], "error");
+        },
+      });
+    },
+  });
 
-            if (values.danakServiceId === '') {
-                delete values.danakServiceId
-            }
+  return (
+    <div className="mt-4 pb-12">
+      <div>{t("ticket.new_ticket")}</div>
 
+      {getProfile.isPending || getCategories.isPending ? (
+        <PageLoading />
+      ) : (
+        <div className="flex gap-6 xl:mt-8 mt-4">
+          <div className="flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl">
+            <div>{t("ticket.submit_your_message")}</div>
 
-            createTicket.mutate(values, {
-                onSuccess: (data) => {
-                    toast(t('success'), 'success')
-                    formik.resetForm()
-                    navigate(Pages.ticket.detail + data.data?.ticketId)
-                },
-                onError: (error: ErrorType) => {
-                    toast(error.response?.data?.error?.message[0], 'error')
-                }
-            })
-        }
-    })
-
-
-    return (
-        <div className='mt-4 pb-12'>
-            <div>
-                {t('ticket.new_ticket')}
+            <div className="mt-5">
+              <Select
+                label={t("receip.customer")}
+                placeholder={t("select")}
+                items={getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
+                  return {
+                    label: item.firstName + " " + item.lastName,
+                    value: item.id,
+                  };
+                })}
+                {...formik.getFieldProps("userId")}
+              />
             </div>
 
-            {
-                getProfile.isPending || getCategories.isPending ?
-                    <PageLoading />
-                    :
-                    <div className='flex gap-6 xl:mt-8 mt-4'>
-                        <div className='flex-1 bg-white py-8 xl:px-10 px-4 rounded-3xl'>
-                            <div>
-                                {t('ticket.submit_your_message')}
-                            </div>
+            <div className="mt-6 rowTwoInput">
+              <Input
+                label={t("ticket.subject")}
+                placeholder={t("ticket.enter_your_subject")}
+                name="subject"
+                value={formik.values.subject}
+                onChange={formik.handleChange}
+                error_text={formik.touched.subject && formik.errors.subject ? formik.errors.subject : ""}
+              />
+              <Select
+                label={t("ticket.priority")}
+                items={[
+                  {
+                    label: t("ticket.low"),
+                    value: "LOW",
+                  },
+                  {
+                    label: t("ticket.medium"),
+                    value: "MEDIUM",
+                  },
+                  {
+                    label: t("ticket.high"),
+                    value: "HIGH",
+                  },
+                ]}
+                placeholder={t("select")}
+                className="border"
+                name="priority"
+                value={formik.values.priority}
+                onChange={formik.handleChange}
+                error_text={formik.touched.priority && formik.errors.priority ? formik.errors.priority : ""}
+              />
+            </div>
 
-                            <div className='mt-5'>
-                                <Select
-                                    label={t('receip.customer')}
-                                    placeholder={t('select')}
-                                    items={getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
-                                        return {
-                                            label: item.firstName + ' ' + item.lastName,
-                                            value: item.id
-                                        }
-                                    })}
-                                    {...formik.getFieldProps('userId')}
-                                />
-                            </div>
+            <div className="mt-6 rowTwoInput">
+              <Select
+                label={t("ticket.category")}
+                items={getCategories.data?.data?.ticketCategories?.map((item: { id: string; title: string }) => ({
+                  label: item.title,
+                  value: item.id,
+                }))}
+                placeholder={t("select")}
+                className="border"
+                name="categoryId"
+                value={formik.values.categoryId}
+                onChange={formik.handleChange}
+                error_text={formik.touched.categoryId && formik.errors.categoryId ? formik.errors.categoryId : ""}
+              />
+            </div>
+            <div className="mt-6">
+              <Textarea
+                label={t("description")}
+                placeholder={t("ticket.your_description")}
+                name="message"
+                value={formik.values.message}
+                onChange={formik.handleChange}
+                error_text={formik.touched.message && formik.errors.message ? formik.errors.message : ""}
+              />
+            </div>
 
+            <div className="mt-6">
+              <UploadBox
+                label={t("ticket.attachment")}
+                isMultiple
+                onChange={setFiles}
+              />
+            </div>
 
-                            <div className='mt-6 rowTwoInput'>
-                                <Input
-                                    label={t('ticket.subject')}
-                                    placeholder={t('ticket.enter_your_subject')}
-                                    name='subject'
-                                    value={formik.values.subject}
-                                    onChange={formik.handleChange}
-                                    error_text={formik.touched.subject && formik.errors.subject ? formik.errors.subject : ''}
-                                />
-                                <Select
-                                    label={t('ticket.priority')}
-                                    items={[
-                                        {
-                                            label: t('ticket.low'),
-                                            value: 'LOW'
-                                        },
-                                        {
-                                            label: t('ticket.medium'),
-                                            value: 'MEDIUM'
-                                        },
-                                        {
-                                            label: t('ticket.high'),
-                                            value: 'HIGH'
-                                        }
-                                    ]}
-                                    placeholder={t('select')}
-                                    className='border'
-                                    name='priority'
-                                    value={formik.values.priority}
-                                    onChange={formik.handleChange}
-                                    error_text={formik.touched.priority && formik.errors.priority ? formik.errors.priority : ''}
-                                />
-                            </div>
-
-                            <div className='mt-6 rowTwoInput'>
-
-                                <Select
-                                    label={t('ticket.category')}
-                                    items={getCategories.data?.data?.ticketCategories?.map((item: { id: string, title: string }) => ({
-                                        label: item.title,
-                                        value: item.id
-                                    })
-                                    )}
-                                    placeholder={t('select')}
-                                    className='border'
-                                    name='categoryId'
-                                    value={formik.values.categoryId}
-                                    onChange={formik.handleChange}
-                                    error_text={formik.touched.categoryId && formik.errors.categoryId ? formik.errors.categoryId : ''}
-                                />
-                            </div>
-                            <div className='mt-6'>
-                                <Textarea
-                                    label={t('description')}
-                                    placeholder={t('ticket.your_description')}
-                                    name='message'
-                                    value={formik.values.message}
-                                    onChange={formik.handleChange}
-                                    error_text={formik.touched.message && formik.errors.message ? formik.errors.message : ''}
-                                />
-                            </div>
-
-                            <div className='mt-6'>
-                                <UploadBox
-                                    label={t('ticket.attachment')}
-                                    isMultiple
-                                    onChange={setFiles}
-                                />
-                            </div>
-
-                            <div className='mt-8 flex justify-end'>
-                                <Button
-                                    className='xl:max-w-[100px]'
-                                    onClick={() => formik.handleSubmit()}
-                                    isLoading={createTicket.isPending || multiUpload.isPending}
-                                >
-                                    <div className='flex gap-2 items-center'>
-                                        <TickCircle size={20} color='white' />
-                                        <div>
-                                            {t('ticket.send')}
-                                        </div>
-                                    </div>
-                                </Button>
-                            </div>
-                        </div>
-
-                        <div className='bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
-                            <div className='text-sm'>
-                                {t('ticket.title_hint')}
-                            </div>
-
-                            <div className='mt-6'>
-                                <div className='flex items-start gap-2 border-b pb-5'>
-                                    <div>
-                                        <TickSquare size={20} color='black' variant='Bold' />
-                                    </div>
-                                    <div className='text-description text-xs leading-5'>
-                                        سوالات - مشکلاتی که به یک موضوع مربوط میشوند را در یک درخواست پشتیبانی پیگیر باشید و چند درخواست برای یک موضوع باز نکنید.
-                                    </div>
-                                </div>
-                                <div className='flex items-start gap-2 mt-6 border-b pb-5'>
-                                    <div>
-                                        <TickSquare size={20} color='black' variant='Bold' />
-                                    </div>
-                                    <div className='text-description text-xs leading-5'>
-                                        لطفاً برای بررسی و رفع مشکلات احتمالی صبور باشید بررسی و رفع مشکلات در برخی موارد زمان گیر است.
-                                    </div>
-                                </div>
-                                <div className='flex items-start gap-2 mt-6'>
-                                    <div>
-                                        <TickSquare size={20} color='black' variant='Bold' />
-                                    </div>
-                                    <div className='text-description text-xs leading-5'>
-                                        پاسخگویی 24 ساعته تلفنی را تنها از داناک می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
-                                    </div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-            }
-
+            <div className="mt-8 flex justify-end">
+              <Button
+                className="xl:max-w-[100px]"
+                onClick={() => formik.handleSubmit()}
+                isLoading={createTicket.isPending || multiUpload.isPending}
+              >
+                <div className="flex gap-2 items-center">
+                  <TickCircle
+                    size={20}
+                    color="white"
+                  />
+                  <div>{t("ticket.send")}</div>
+                </div>
+              </Button>
+            </div>
+          </div>
 
+          <div className="bg-white w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl">
+            <div className="text-sm">{t("ticket.title_hint")}</div>
 
+            <div className="mt-6">
+              <div className="flex items-start gap-2 border-b pb-5">
+                <div>
+                  <TickSquare
+                    size={20}
+                    color="black"
+                    variant="Bold"
+                  />
+                </div>
+                <div className="text-description text-xs leading-5">سوالات - مشکلاتی که به یک موضوع مربوط میشوند را در یک درخواست پشتیبانی پیگیر باشید و چند درخواست برای یک موضوع باز نکنید.</div>
+              </div>
+              <div className="flex items-start gap-2 mt-6 border-b pb-5">
+                <div>
+                  <TickSquare
+                    size={20}
+                    color="black"
+                    variant="Bold"
+                  />
+                </div>
+                <div className="text-description text-xs leading-5">لطفاً برای بررسی و رفع مشکلات احتمالی صبور باشید بررسی و رفع مشکلات در برخی موارد زمان گیر است.</div>
+              </div>
+              <div className="flex items-start gap-2 mt-6">
+                <div>
+                  <TickSquare
+                    size={20}
+                    color="black"
+                    variant="Bold"
+                  />
+                </div>
+                <div className="text-description text-xs leading-5">
+                  پاسخگویی 24 ساعته تلفنی را تنها از داناک می توانید انتظار داشته باشید .بخش پشتیبانی در هر ساعتی حتی در روز های تعطیل آماده پیگیری سریع مشکلات کاربران است.
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
-    )
-}
+      )}
+    </div>
+  );
+};
 
-export default CreateTicket
+export default CreateTicket;

src/pages/ticket/Detail.tsx

@@ -4,7 +4,7 @@ import Input from '../../components/Input'
 import Textarea from '../../components/Textarea'
 import UploadBox from '../../components/UploadBox'
 import Button from '../../components/Button'
-import { CloseCircle, InfoCircle, Paperclip2 } from 'iconsax-react'
+import { ArrowRight, CloseCircle, InfoCircle, Paperclip2 } from 'iconsax-react'
 import { useNavigate, useParams } from 'react-router-dom'
 import { useAddMessageTicket, useCloseTicket, useGetMessages } from './hooks/useTicketData'
 import PageLoading from '../../components/PageLoading'
@@ -89,9 +89,19 @@ const TicketDetail: FC = () => {
 
     return (
         <div className='mt-4'>
-            <div className='flex gap-1'>
-                <div>{t('ticket.ticket_number')}</div>
-                <div>{getMessages.data?.data?.ticket?.numericId}</div>
+            <div className='flex justify-between items-center'>
+                <div className='flex gap-1'>
+                    <div>{t('ticket.ticket_number')}</div>
+                    <div>{getMessages.data?.data?.ticket?.numericId}</div>
+                </div>
+                <button
+                    type='button'
+                    onClick={() => navigate(-1)}
+                    className='flex gap-1 items-center px-3 rounded-lg bg-white h-8 border border-border cursor-pointer'
+                >
+                    <ArrowRight size={18} color='black' />
+                    <span className='text-xs'>{t('back')}</span>
+                </button>
             </div>
             {
                 getMessages.isPending ?

src/pages/ticket/TicketList.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState } from 'react'
+import { FC, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Eye, MessageRemove, MessageTick, MessageTime } from 'iconsax-react'
 import Tabs from '../../components/Tabs'
@@ -11,23 +11,63 @@ import { TicketItemType } from './types/TicketTypes'
 import OpenTicket from './components/OpenTicket'
 import Pagination from '../../components/Pagination'
 
+const VALID_STATUSES = ['ANSWERED', 'PENDING', 'CLOSED'] as const
+type TicketStatus = (typeof VALID_STATUSES)[number] | ''
+
 const TicketList: FC = () => {
 
     const { t } = useTranslation('global')
-    const [page, setPage] = useState<number>(1)
-    const [searchParams] = useSearchParams()
-    const [customerId, setCustomerId] = useState<string>('')
-    const [activeTab, setActiveTab] = useState<'ANSWERED' | 'PENDING' | 'CLOSED' | ''>('PENDING')
+    const [searchParams, setSearchParams] = useSearchParams()
+
+    const customerId = searchParams.get('user') ?? ''
+    const statusParam = searchParams.get('status')
+
+    const activeTab: TicketStatus = (() => {
+        if (statusParam && (VALID_STATUSES as readonly string[]).includes(statusParam)) {
+            return statusParam as (typeof VALID_STATUSES)[number]
+        }
+        // Customer deep-link without status → show all statuses for that user
+        if (customerId && !statusParam) return ''
+        return 'PENDING'
+    })()
+
+    const page = Math.max(1, parseInt(searchParams.get('page') || '1', 10) || 1)
     const getTicket = useGetTickets(activeTab, customerId, page)
 
+    // Keep status & page in the URL (replace so back button is not polluted)
     useEffect(() => {
-        const urlCustomerId = searchParams.get('user')
-        if (urlCustomerId) {
-            setCustomerId(urlCustomerId)
-            setActiveTab('')
-        }
-    }, [searchParams])
+        const next = new URLSearchParams(searchParams)
+        let changed = false
 
+        if (!statusParam && !customerId) {
+            next.set('status', 'PENDING')
+            changed = true
+        }
+
+        if (!searchParams.get('page')) {
+            next.set('page', String(page))
+            changed = true
+        }
+
+        if (changed) {
+            setSearchParams(next, { replace: true })
+        }
+    }, [customerId, page, searchParams, setSearchParams, statusParam])
+
+    const updateParams = (updates: { status?: string; page?: number }) => {
+        const next = new URLSearchParams(searchParams)
+
+        if (updates.status !== undefined) {
+            if (updates.status === '') next.delete('status')
+            else next.set('status', updates.status)
+        }
+
+        if (updates.page !== undefined) {
+            next.set('page', String(Math.max(1, updates.page)))
+        }
+
+        setSearchParams(next)
+    }
 
     return (
         <div className='mt-4'>
@@ -75,7 +115,7 @@ const TicketList: FC = () => {
                             value: 'CLOSED'
                         },
                     ]}
-                    onChange={(value) => setActiveTab(value as 'ANSWERED' | 'PENDING' | 'CLOSED')}
+                    onChange={(value) => updateParams({ status: value, page: 1 })}
                 />
             </div>
 
@@ -135,7 +175,7 @@ const TicketList: FC = () => {
 
                 <Pagination
                     currentPage={page}
-                    onPageChange={setPage}
+                    onPageChange={(newPage) => updateParams({ page: newPage })}
                     totalPages={getTicket.data?.data?.pager?.totalPages}
                 />
             </div>
@@ -143,4 +183,4 @@ const TicketList: FC = () => {
     )
 }
 
-export default TicketList
+export default TicketList

src/pages/ticket/components/ReferTicket.tsx

@@ -1,75 +1,73 @@
-import { FC, useState } from 'react'
-import { useGetUsers } from '../../users/hooks/useUserData'
-import { useTranslation } from 'react-i18next'
-import { UserItemType } from '../../users/types/UserTypes'
-import CheckBoxComponent from '../../../components/CheckBoxComponent'
-import { useParams } from 'react-router-dom'
-import { useReferTicket } from '../hooks/useTicketData'
-import Button from '../../../components/Button'
-import { toast } from '../../../components/Toast';
-import { ErrorType } from '../../../helpers/types'
+import { FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import Button from "../../../components/Button";
+import CheckBoxComponent from "../../../components/CheckBoxComponent";
+import { toast } from "../../../components/Toast";
+import { ErrorType } from "../../../helpers/types";
+import { useGetAdminsListAll } from "../../users/hooks/useUserData";
+import { UserItemType } from "../../users/types/UserTypes";
+import { useReferTicket } from "../hooks/useTicketData";
 
 type Props = {
-    refetch: () => void
-}
+  refetch: () => void;
+};
 
 const ReferTicket: FC<Props> = ({ refetch }) => {
+  const { t } = useTranslation("global");
+  const { id } = useParams();
+  const [userId, setUserId] = useState<string>("");
+  const getUsers = useGetAdminsListAll();
+  const referTicket = useReferTicket();
 
-    const { t } = useTranslation('global')
-    const { id } = useParams()
-    const [userId, setUserId] = useState<string>('')
-    const getUsers = useGetUsers('', 'tickets')
-    const referTicket = useReferTicket()
+  const handleReferTicket = () => {
+    referTicket.mutate(
+      { id: id as string, userId },
+      {
+        onSuccess: () => {
+          refetch();
+          toast(t("ticket.refer_ticket_success"), "success");
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
 
-    const handleReferTicket = () => {
-        referTicket.mutate({ id: id as string, userId }, {
-            onSuccess: () => {
-                refetch()
-                toast(t('ticket.refer_ticket_success'), 'success')
-            },
-            onError: (error: ErrorType) => {
-                toast(error.response?.data?.error.message[0], 'error')
-            }
-        })
-    }
+  return (
+    <div className={"bg-white p-6 rounded-3xl mt-8"}>
+      <div className="flex justify-between">
+        <div className="text-sm">{t("ticket.refer_ticket")}</div>
+      </div>
 
-    return (
-        <div className={'bg-white p-6 rounded-3xl mt-8'}>
-            <div className='flex justify-between'>
-                <div className='text-sm'>
-                    {t('ticket.refer_ticket')}
-                </div>
-            </div>
-
-            <div className="mt-4">
-                {
-                    getUsers.data?.data?.users?.map((item: UserItemType) => (
-                        <div key={item.id} className='flex gap-2 items-center'>
-                            <div>
-                                <CheckBoxComponent
-                                    checked={userId === item.id}
-                                    onChange={(e) => setUserId(e.target.checked ? item.id : '')}
-                                />
-                            </div>
-                            <div className='text-xs leading-5'>
-                                {item.firstName + ' ' + item.lastName}
-                            </div>
-                        </div>
-                    ))
-                }
-
-                <div className='flex justify-end mt-4'>
-                    <Button
-                        label={t('ticket.refer_ticket')}
-                        onClick={handleReferTicket}
-                        isLoading={referTicket.isPending}
-                        className='w-fit px-7'
-                    />
-                </div>
+      <div className="mt-4">
+        {getUsers.data?.data?.map((item: UserItemType) => (
+          <div
+            key={item.id}
+            className="flex gap-2 items-center"
+          >
+            <div>
+              <CheckBoxComponent
+                checked={userId === item.id}
+                onChange={(e) => setUserId(e.target.checked ? item.id : "")}
+              />
             </div>
+            <div className="text-xs leading-5">{item.firstName + " " + item.lastName}</div>
+          </div>
+        ))}
 
+        <div className="flex justify-end mt-4">
+          <Button
+            label={t("ticket.refer_ticket")}
+            onClick={handleReferTicket}
+            isLoading={referTicket.isPending}
+            className="w-fit px-7"
+          />
         </div>
-    )
-}
+      </div>
+    </div>
+  );
+};
 
-export default ReferTicket
+export default ReferTicket;

src/pages/ticket/hooks/useTicketData.ts

@@ -4,6 +4,7 @@ import {
   AddMessageTicketType,
   CreateCategoryType,
   CreateTicketAdminType,
+  CreateTicketMasterType,
 } from "../types/TicketTypes";
 
 export const useGetTickets = (
@@ -78,3 +79,53 @@ export const useCreateTicket = () => {
       api.createTicket(variables),
   });
 };
+
+export const useGetMasters = () => {
+  return useQuery({
+    queryKey: ["ticket-masters"],
+    queryFn: () => api.getMasters(),
+  });
+};
+
+export const useGetMasterById = (id: string) => {
+  return useQuery({
+    queryKey: ["ticket-master", id],
+    queryFn: () => api.getMasterById(id),
+    enabled: !!id,
+  });
+};
+
+export const useCreateMaster = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (variables: CreateTicketMasterType) =>
+      api.createMaster(variables),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ticket-masters"] });
+    },
+  });
+};
+
+export const useUpdateMaster = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (variables: { id: string; params: CreateTicketMasterType }) =>
+      api.updateMaster(variables.id, variables.params),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ticket-masters"] });
+    },
+  });
+};
+
+export const useDeleteMaster = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (id: string) => api.deleteMaster(id),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ticket-masters"] });
+    },
+  });
+};

src/pages/ticket/masters/Create.tsx

@@ -0,0 +1,72 @@
+import { useFormik } from "formik";
+import { FC } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import * as Yup from "yup";
+import Button from "../../../components/Button";
+import Select from "../../../components/Select";
+import { toast } from "../../../components/Toast";
+import { Pages } from "../../../config/Pages";
+import { ErrorType } from "../../../helpers/types";
+import { useGetAdminsListAll } from "../../users/hooks/useUserData";
+import { UserItemType } from "../../users/types/UserTypes";
+import { useCreateMaster } from "../hooks/useTicketData";
+import { CreateTicketMasterType } from "../types/TicketTypes";
+
+const CreateTicketMaster: FC = () => {
+  const { t } = useTranslation("global");
+  const navigate = useNavigate();
+  const getAdmins = useGetAdminsListAll();
+  const createMaster = useCreateMaster();
+
+  const formik = useFormik<CreateTicketMasterType>({
+    initialValues: {
+      userId: "",
+    },
+    validationSchema: Yup.object({
+      userId: Yup.string().required(t("errors.required")),
+    }),
+    onSubmit: (values) => {
+      createMaster.mutate(values, {
+        onSuccess: () => {
+          toast(t("success"), "success");
+          navigate(Pages.ticket.masters);
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      });
+    },
+  });
+
+  return (
+    <div className="mt-4">
+      <div>{t("ticket.add_master")}</div>
+
+      <div className="bg-white mt-8 py-8 xl:px-10 px-4 rounded-3xl max-w-xl">
+        <Select
+          label={t("ticket.user")}
+          placeholder={t("select")}
+          className="border"
+          items={getAdmins.data?.data?.map((item: UserItemType) => ({
+            label: `${item.firstName} ${item.lastName}`,
+            value: item.id,
+          }))}
+          {...formik.getFieldProps("userId")}
+          error_text={formik.touched.userId && formik.errors.userId ? formik.errors.userId : ""}
+        />
+
+        <div className="mt-8 flex justify-end">
+          <Button
+            label={t("submit")}
+            className="w-fit px-7"
+            onClick={() => formik.handleSubmit()}
+            isLoading={createMaster.isPending}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default CreateTicketMaster;

src/pages/ticket/masters/List.tsx

@@ -0,0 +1,100 @@
+import { Add } from "iconsax-react";
+import { FC } from "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 { toast } from "../../../components/Toast";
+import TrashWithConfrim from "../../../components/TrashWithConfrim";
+import { Pages } from "../../../config/Pages";
+import { ErrorType } from "../../../helpers/types";
+import { useDeleteMaster, useGetMasters } from "../hooks/useTicketData";
+import { TicketMasterItemType } from "../types/TicketTypes";
+import { usePermissions } from "../../../hooks/usePermissions";
+
+const TicketMastersList: FC = () => {
+  const { t } = useTranslation("global");
+  const { canCreate, canDelete } = usePermissions();
+  const getMasters = useGetMasters();
+  const deleteMaster = useDeleteMaster();
+
+  const handleDelete = (id: string) => {
+    deleteMaster.mutate(id, {
+      onSuccess: () => {
+        toast(t("success"), "success");
+      },
+      onError: (error: ErrorType) => {
+        toast(error.response?.data?.error.message[0], "error");
+      },
+    });
+  };
+
+  const masters: TicketMasterItemType[] = getMasters.data?.data?.masters ?? getMasters.data?.data?.ticketMasters ?? [];
+
+  return (
+    <div className="mt-4">
+      <div className="flex w-full justify-between items-center">
+        <div>{t("ticket.masters")}</div>
+        <div>
+          {canCreate("ticket_masters") && (
+            <Link to={Pages.ticket.mastersCreate}>
+              <Button className="px-5">
+                <div className="flex gap-2">
+                  <Add
+                    className="size-5"
+                    color="#fff"
+                  />
+                  <div>{t("ticket.add_master")}</div>
+                </div>
+              </Button>
+            </Link>
+          )}
+        </div>
+      </div>
+
+      {getMasters.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("ticket.user_name")} />
+                <Td text={t("user.email")} />
+                <Td text={t("ticket.detail")} />
+              </tr>
+            </thead>
+            <tbody>
+              {masters.map((item) => (
+                <tr
+                  key={item.id}
+                  className="tr"
+                >
+                  <Td text={item.user ? `${item.user.firstName} ${item.user.lastName}` : item.userId} />
+                  <Td text={item.user?.email ?? item.user?.phone ?? "-"} />
+                  <Td text="">
+                    <div className="flex items-center gap-3">
+                      {/* <Link to={Pages.ticket.mastersUpdate + item.id}>
+                        <Edit size={20} color="#8C90A3" />
+                      </Link> */}
+                      {canDelete("ticket_masters") && (
+                        <TrashWithConfrim
+                          onDelete={() => handleDelete(item.id)}
+                          isLoading={deleteMaster.isPending}
+                          color="#8C90A3"
+                        />
+                      )}
+                    </div>
+                  </Td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default TicketMastersList;

src/pages/ticket/masters/Update.tsx

@@ -0,0 +1,89 @@
+import { useFormik } from "formik";
+import { FC, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useParams } from "react-router-dom";
+import * as Yup from "yup";
+import Button from "../../../components/Button";
+import PageLoading from "../../../components/PageLoading";
+import Select from "../../../components/Select";
+import { toast } from "../../../components/Toast";
+import { Pages } from "../../../config/Pages";
+import { ErrorType } from "../../../helpers/types";
+import { useGetAdminsListAll } from "../../users/hooks/useUserData";
+import { UserItemType } from "../../users/types/UserTypes";
+import { useGetMasterById, useUpdateMaster } from "../hooks/useTicketData";
+import { CreateTicketMasterType } from "../types/TicketTypes";
+
+const UpdateTicketMaster: FC = () => {
+  const { t } = useTranslation("global");
+  const { id } = useParams();
+  const navigate = useNavigate();
+  const getAdmins = useGetAdminsListAll();
+  const getMaster = useGetMasterById(id ?? "");
+  const updateMaster = useUpdateMaster();
+
+  const formik = useFormik<CreateTicketMasterType>({
+    initialValues: {
+      userId: "",
+    },
+    validationSchema: Yup.object({
+      userId: Yup.string().required(t("errors.required")),
+    }),
+    onSubmit: (values) => {
+      updateMaster.mutate(
+        { id: id as string, params: values },
+        {
+          onSuccess: () => {
+            toast(t("success"), "success");
+            navigate(Pages.ticket.masters);
+          },
+          onError: (error: ErrorType) => {
+            toast(error.response?.data?.error.message[0], "error");
+          },
+        },
+      );
+    },
+  });
+
+  useEffect(() => {
+    const master = getMaster.data?.data?.master ?? getMaster.data?.data?.ticketMaster;
+    if (master?.userId) {
+      formik.setFieldValue("userId", master.userId);
+    }
+  }, [getMaster.data]);
+
+  if (getMaster.isPending) {
+    return <PageLoading />;
+  }
+
+  return (
+    <div className="mt-4">
+      <div>{t("ticket.edit_master")}</div>
+
+      <div className="bg-white mt-8 py-8 xl:px-10 px-4 rounded-3xl max-w-xl">
+        <Select
+          label={t("ticket.user")}
+          placeholder={t("select")}
+          className="border"
+          items={getAdmins.data?.data?.map((item: UserItemType) => ({
+            label: `${item.firstName} ${item.lastName}`,
+            value: item.id,
+          }))}
+          {...formik.getFieldProps("userId")}
+          error_text={formik.touched.userId && formik.errors.userId ? formik.errors.userId : ""}
+        />
+
+        <div className="mt-8 flex justify-end">
+          <Button
+            label={t("submit")}
+            className="w-fit px-7"
+            onClick={() => formik.handleSubmit()}
+            isLoading={updateMaster.isPending}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UpdateTicketMaster;