refer ticket

.env

@@ -2,4 +2,4 @@ VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
 VITE_BASE_URL = 'https://api.danakcorp.com'
 
-#VITE_BASE_URL = 'http://192.168.1.107:3500'
+# VITE_BASE_URL = 'http://192.168.99.131:3500'

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/components/Pagination.tsx

@@ -1,64 +1,90 @@
 import React from "react";
 
 interface PaginationProps {
-    currentPage: number;
-    totalPages: number;
-    onPageChange: (page: number) => void;
+  currentPage: number;
+  totalPages: number;
+  onPageChange: (page: number) => void;
+  limit?: number;
+  onLimitChange?: (limit: number) => void;
+  limitOptions?: number[];
 }
 
-const Pagination: React.FC<PaginationProps> = ({
-    currentPage,
-    totalPages,
-    onPageChange,
-}) => {
-    const getPageNumbers = () => {
-        const pageNumbers: (number | string)[] = [];
-        const maxVisiblePages = 5;
+const Pagination: React.FC<PaginationProps> = ({ currentPage, totalPages, onPageChange, limit = 10, onLimitChange, limitOptions = [10, 20, 50] }) => {
+  const handleLimitChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
+    onLimitChange?.(Number(event.target.value));
+    onPageChange(1);
+  };
 
-        if (totalPages <= maxVisiblePages) {
-            // اگر تعداد صفحات کم است، همه را نشان بده
-            for (let i = 1; i <= totalPages; i++) {
-                pageNumbers.push(i);
-            }
-        } else {
-            // همیشه صفحه اول را نشان بده
-            pageNumbers.push(1);
+  const getPageNumbers = () => {
+    const pageNumbers: (number | string)[] = [];
+    const maxVisiblePages = 5;
 
-            if (currentPage <= 3) {
-                // در صفحات اولیه (1, 2, 3)
-                for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
-                    pageNumbers.push(i);
-                }
-                if (totalPages > 5) {
-                    pageNumbers.push("...");
-                }
-                pageNumbers.push(totalPages);
-            } else if (currentPage >= totalPages - 2) {
-                // در صفحات آخر
-                pageNumbers.push("...");
-                for (let i = totalPages - 3; i <= totalPages; i++) {
-                    pageNumbers.push(i);
-                }
-            } else {
-                // در صفحات وسط
-                pageNumbers.push("...");
-                for (let i = currentPage - 1; i <= currentPage + 1; i++) {
-                    pageNumbers.push(i);
-                }
-                pageNumbers.push("...");
-                pageNumbers.push(totalPages);
-            }
+    if (totalPages <= maxVisiblePages) {
+      // اگر تعداد صفحات کم است، همه را نشان بده
+      for (let i = 1; i <= totalPages; i++) {
+        pageNumbers.push(i);
+      }
+    } else {
+      // همیشه صفحه اول را نشان بده
+      pageNumbers.push(1);
+
+      if (currentPage <= 3) {
+        // در صفحات اولیه (1, 2, 3)
+        for (let i = 2; i <= Math.min(4, totalPages - 1); i++) {
+          pageNumbers.push(i);
         }
+        if (totalPages > 5) {
+          pageNumbers.push("...");
+        }
+        pageNumbers.push(totalPages);
+      } else if (currentPage >= totalPages - 2) {
+        // در صفحات آخر
+        pageNumbers.push("...");
+        for (let i = totalPages - 3; i <= totalPages; i++) {
+          pageNumbers.push(i);
+        }
+      } else {
+        // در صفحات وسط
+        pageNumbers.push("...");
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+          pageNumbers.push(i);
+        }
+        pageNumbers.push("...");
+        pageNumbers.push(totalPages);
+      }
+    }
 
-        return pageNumbers;
-    };
+    return pageNumbers;
+  };
 
-    const pageNumbers = getPageNumbers();
+  const pageNumbers = getPageNumbers();
 
-    return (
-        <div className="flex gap-2 text-xs justify-center items-center mt-4">
-            {/* دکمه قبلی */}
-            {/* <button
+  return (
+    <div className="flex flex-wrap gap-4 text-xs justify-center items-center mt-4">
+      {onLimitChange && (
+        <label className="flex items-center gap-2 text-gray-600">
+          <span>تعداد در صفحه</span>
+          <select
+            aria-label="تعداد آیتم در صفحه"
+            className="h-8 rounded-md border border-[#EAECF5] bg-white px-2 outline-none focus:border-primary"
+            value={limit}
+            onChange={handleLimitChange}
+          >
+            {limitOptions.map((option) => (
+              <option
+                key={option}
+                value={option}
+              >
+                {option}
+              </option>
+            ))}
+          </select>
+        </label>
+      )}
+
+      <div className="flex gap-2 items-center">
+        {/* دکمه قبلی */}
+        {/* <button
                 className={`px-3 py-1 rounded-md ${currentPage === 1
                         ? "text-gray-400 cursor-not-allowed"
                         : "text-blue-600 hover:bg-gray-100"
@@ -69,28 +95,28 @@ const Pagination: React.FC<PaginationProps> = ({
                 قبلی
             </button> */}
 
-            {/* شماره صفحات */}
-            {pageNumbers.map((page, index) =>
-                typeof page === "number" ? (
-                    <button
-                        key={`page-${page}`}
-                        className={`size-8 rounded-md ${currentPage === page
-                            ? "bg-primary text-white"
-                            : "text-primary bg-[#EAECF5] hover:bg-gray-100"
-                            }`}
-                        onClick={() => onPageChange(page)}
-                    >
-                        {page}
-                    </button>
-                ) : (
-                    <span key={`ellipsis-${index}`} className="px-3 py-1 text-gray-500">
-                        {page}
-                    </span>
-                )
-            )}
+        {/* شماره صفحات */}
+        {pageNumbers.map((page, index) =>
+          typeof page === "number" ? (
+            <button
+              key={`page-${page}`}
+              className={`size-8 rounded-md ${currentPage === page ? "bg-primary text-white" : "text-primary bg-[#EAECF5] hover:bg-gray-100"}`}
+              onClick={() => onPageChange(page)}
+            >
+              {page}
+            </button>
+          ) : (
+            <span
+              key={`ellipsis-${index}`}
+              className="px-3 py-1 text-gray-500"
+            >
+              {page}
+            </span>
+          ),
+        )}
 
-            {/* دکمه بعدی */}
-            {/* <button
+        {/* دکمه بعدی */}
+        {/* <button
                 className={`px-3 py-1 rounded-md ${currentPage === totalPages
                         ? "text-gray-400 cursor-not-allowed"
                         : "text-blue-600 hover:bg-gray-100"
@@ -100,8 +126,9 @@ const Pagination: React.FC<PaginationProps> = ({
             >
                 بعدی
             </button> */}
-        </div>
-    );
+      </div>
+    </div>
+  );
 };
 
-export default Pagination;
+export default Pagination;

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/config/SideBarSubMenu.ts

@@ -3,6 +3,7 @@ export const SideBarItemHasSubMenu = [
   "customers",
   "representatives",
   "users",
+  "taskmanager",
   "content",
   "financial",
   "support",
@@ -44,7 +45,7 @@ export const getSubMenuNameFromPath = (pathname: string): string => {
   }
 
   if (pathname.startsWith("/workspace") || pathname.startsWith("/project") || pathname.startsWith("/taskmanager")) {
-    return "users";
+    return "taskmanager";
   }
 
   const segment = pathname.split("/")[1] ?? "";

src/helpers/permissions.ts

@@ -0,0 +1,278 @@
+export enum PermissionGroupEnum {
+  SERVICES = "services",
+  CUSTOMERS = "customers",
+  USERS = "users",
+  FINANCIAL = "financial",
+  CONTENT = "content",
+  SUPPORT = "support",
+  OTHER = "other",
+  PRODUCTS = "products",
+  REPRESENTATIVES = "representatives",
+  TASK_MANAGER = "task_manager",
+}
+
+export const PERMISSION_GROUP_ORDER: PermissionGroupEnum[] = [
+  PermissionGroupEnum.SERVICES,
+  PermissionGroupEnum.CUSTOMERS,
+  PermissionGroupEnum.USERS,
+  PermissionGroupEnum.FINANCIAL,
+  PermissionGroupEnum.CONTENT,
+  PermissionGroupEnum.SUPPORT,
+  PermissionGroupEnum.OTHER,
+  PermissionGroupEnum.PRODUCTS,
+  PermissionGroupEnum.REPRESENTATIVES,
+  PermissionGroupEnum.TASK_MANAGER,
+];
+
+export enum PermissionEnum {
+  SERVICES_CREATE = "services_create",
+  SERVICES_READ = "services_read",
+  SERVICES_UPDATE = "services_update",
+  SERVICES_DELETE = "services_delete",
+
+  CUSTOMERS_CREATE = "customers_create",
+  CUSTOMERS_READ = "customers_read",
+  CUSTOMERS_UPDATE = "customers_update",
+  CUSTOMERS_DELETE = "customers_delete",
+
+  AGENTS_CREATE = "agents_create",
+  AGENTS_READ = "agents_read",
+  AGENTS_UPDATE = "agents_update",
+  AGENTS_DELETE = "agents_delete",
+
+  DEVELOPERS_CREATE = "developers_create",
+  DEVELOPERS_READ = "developers_read",
+  DEVELOPERS_UPDATE = "developers_update",
+  DEVELOPERS_DELETE = "developers_delete",
+
+  INVOICES_CREATE = "invoices_create",
+  INVOICES_READ = "invoices_read",
+  INVOICES_UPDATE = "invoices_update",
+  INVOICES_DELETE = "invoices_delete",
+
+  TRANSACTIONS_CREATE = "transactions_create",
+  TRANSACTIONS_READ = "transactions_read",
+  TRANSACTIONS_UPDATE = "transactions_update",
+  TRANSACTIONS_DELETE = "transactions_delete",
+
+  DISCOUNTS_CREATE = "discounts_create",
+  DISCOUNTS_READ = "discounts_read",
+  DISCOUNTS_UPDATE = "discounts_update",
+  DISCOUNTS_DELETE = "discounts_delete",
+
+  ADMINS_CREATE = "admins_create",
+  ADMINS_READ = "admins_read",
+  ADMINS_UPDATE = "admins_update",
+  ADMINS_DELETE = "admins_delete",
+
+  TICKETS_CREATE = "tickets_create",
+  TICKETS_READ = "tickets_read",
+  TICKETS_UPDATE = "tickets_update",
+  TICKETS_DELETE = "tickets_delete",
+
+  CRITICISMS_CREATE = "criticisms_create",
+  CRITICISMS_READ = "criticisms_read",
+  CRITICISMS_UPDATE = "criticisms_update",
+  CRITICISMS_DELETE = "criticisms_delete",
+
+  CONTACTS_US_CREATE = "contacts_us_create",
+  CONTACTS_US_READ = "contacts_us_read",
+  CONTACTS_US_UPDATE = "contacts_us_update",
+  CONTACTS_US_DELETE = "contacts_us_delete",
+
+  ADVERTISEMENTS_CREATE = "advertisements_create",
+  ADVERTISEMENTS_READ = "advertisements_read",
+  ADVERTISEMENTS_UPDATE = "advertisements_update",
+  ADVERTISEMENTS_DELETE = "advertisements_delete",
+
+  ANNOUNCEMENTS_CREATE = "announcements_create",
+  ANNOUNCEMENTS_READ = "announcements_read",
+  ANNOUNCEMENTS_UPDATE = "announcements_update",
+  ANNOUNCEMENTS_DELETE = "announcements_delete",
+
+  BLOGS_CREATE = "blogs_create",
+  BLOGS_READ = "blogs_read",
+  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",
+  LEARNINGS_DELETE = "learnings_delete",
+
+  SETTINGS_CREATE = "settings_create",
+  SETTINGS_READ = "settings_read",
+  SETTINGS_UPDATE = "settings_update",
+  SETTINGS_DELETE = "settings_delete",
+
+  BANK_ACCOUNTS_CREATE = "bank_accounts_create",
+  BANK_ACCOUNTS_READ = "bank_accounts_read",
+  BANK_ACCOUNTS_UPDATE = "bank_accounts_update",
+  BANK_ACCOUNTS_DELETE = "bank_accounts_delete",
+
+  PAYMENTS_CREATE = "payments_create",
+  PAYMENTS_READ = "payments_read",
+  PAYMENTS_UPDATE = "payments_update",
+  PAYMENTS_DELETE = "payments_delete",
+
+  SUPPORT_PLAN_CREATE = "support_plan_create",
+  SUPPORT_PLAN_READ = "support_plan_read",
+  SUPPORT_PLAN_UPDATE = "support_plan_update",
+  SUPPORT_PLAN_DELETE = "support_plan_delete",
+
+  RESELLER_CREATE = "reseller_create",
+  RESELLER_READ = "reseller_read",
+  RESELLER_UPDATE = "reseller_update",
+  RESELLER_DELETE = "reseller_delete",
+
+  WORKSPACE_CREATE = "workspace_create",
+  WORKSPACE_READ = "workspace_read",
+  WORKSPACE_UPDATE = "workspace_update",
+  WORKSPACE_DELETE = "workspace_delete",
+
+  PROJECT_CREATE = "project_create",
+  PROJECT_READ = "project_read",
+  PROJECT_UPDATE = "project_update",
+  PROJECT_DELETE = "project_delete",
+
+  TASK_CREATE = "task_create",
+  TASK_READ = "task_read",
+  TASK_UPDATE = "task_update",
+  TASK_DELETE = "task_delete",
+
+  TASK_PHASE_CREATE = "task_phase_create",
+  TASK_PHASE_READ = "task_phase_read",
+  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",
+  DKALA = "dkala",
+  DPAGE = "dpage",
+  DMAIL = "dmail",
+}
+
+export type CrudAction = "create" | "read" | "update" | "delete";
+
+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",
+  "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;
+
+type PermissionEntry = { name: string };
+
+export const getPermissionNames = (permissions: PermissionEntry[] | undefined): string[] =>
+  permissions?.map((permission) => permission.name) ?? [];
+
+export const hasPermission = (
+  permissions: PermissionEntry[] | undefined,
+  resourceOrPermission: string,
+): boolean => {
+  const names = getPermissionNames(permissions);
+
+  if (names.includes(resourceOrPermission)) {
+    return true;
+  }
+
+  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[],
+): boolean => resources.some((resource) => hasPermission(permissions, resource));
+
+export const canAccessMenuItem = (
+  permissions: PermissionEntry[] | undefined,
+  activeName?: string,
+  activeNames?: readonly string[],
+): boolean => {
+  if (activeNames && activeNames.length > 0) {
+    return hasAnyPermission(permissions, activeNames);
+  }
+
+  if (!activeName) {
+    return true;
+  }
+
+  return hasPermission(permissions, activeName);
+};

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": "غیرفعال",
@@ -727,6 +740,18 @@
     "submit_role": "ثبت نقش",
     "title_role": "عنوان نقش",
     "permissions": "دسترسی ها",
+    "permission_groups": {
+      "services": "سرویس‌ها",
+      "customers": "مشتریان",
+      "users": "کاربران",
+      "financial": "مالی",
+      "content": "محتوا",
+      "support": "پشتیبانی",
+      "other": "سایر",
+      "products": "محصولات",
+      "representatives": "نمایندگان",
+      "task_manager": "مدیریت وظایف"
+    },
     "status_role": "وضعیت نقش",
     "error_count_permission": "حداقل به دسترسی رو باید انتخاب کنید",
     "is_admin": "آیا ادمین است؟",
@@ -736,6 +761,7 @@
     "group_add": "ساخت گروه",
     "submit_group": "ثبت گروه",
     "error_count_users": "حداقل یک کاربر باید انتخاب شود",
+    "error_count_roles": "حداقل یک نقش باید انتخاب شود",
     "list_user_group": "لیست گروه های کاربری",
     "groups": "گروه ها",
     "group_name": "نام گروه",
@@ -772,7 +798,10 @@
     "confrim_email": "تایید ایمیل",
     "confrim": "تایید صورتحساب ",
     "link_email": "یک لینک برای تایید ایمیل برای شما ارسال شد.",
-    "email_not_verified": "ایمیل تایید نشده"
+    "email_not_verified": "ایمیل تایید نشده",
+    "resend_email": "ارسال مجدد تایید",
+    "first_name": "نام",
+    "last_name": "نام خانوادگی"
   },
   "email": "ایمیل",
   "customer": {
@@ -1065,7 +1094,14 @@
       "stop_tracking": "پایان",
       "time_history": "سابقه",
       "no_time_entries": "هنوز زمانی ثبت نشده",
-      "tracking_active": "در حال اجرا"
+      "tracking_active": "در حال اجرا",
+      "comments": "کامنت‌ها",
+      "add_comment": "ثبت کامنت",
+      "comment_placeholder": "کامنت خود را بنویسید...",
+      "no_comments": "هنوز کامنتی ثبت نشده",
+      "unknown_user": "کاربر",
+      "related_ticket": "تیکت مرتبط",
+      "view_ticket": "مشاهده تیکت"
     }
   }
 }

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

@@ -1,134 +1,128 @@
-import { FC, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import Button from '../../components/Button'
-import { Add, Eye } from 'iconsax-react'
-import Select from '../../components/Select'
-import Input from '../../components/Input'
-import Td from '../../components/Td'
-import { Link } from 'react-router-dom'
-import { Pages } from '../../config/Pages'
-import { useGetCustomers } from './hooks/useCustomerData'
-import PageLoading from '../../components/PageLoading'
-import { CustomerItemType } from './types/CustomerTypes'
-import Pagination from '../../components/Pagination'
+import { Add, Eye } from "iconsax-react";
+import { FC, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import Button from "../../components/Button";
+import Input from "../../components/Input";
+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 { t } = useTranslation('global')
-    const [page, setPage] = useState(1)
-    const getCustomers = useGetCustomers(page)
+  const handleSearch = (value: string) => {
+    if (value !== search) {
+      setPage(1);
+    }
+    setSearch(value);
+  };
 
-    return (
-        <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>
-            </div>
+  return (
+    <div className="mt-4">
+      <div className="flex w-full justify-between items-center">
+        <div>{t("customer.customer_list")}</div>
+        {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-between items-center mt-12'>
-                <div className='flex gap-4'>
-                    <Select
-                        className='w-36'
-                        items={[
-                            { label: 'All', value: 'all' },
-                            { label: 'Active', value: 'active' },
-                            { label: 'Inactive', value: 'inactive' },
-                        ]}
-                        placeholder={t('service.category')}
-                    />
-                    <Select
-                        className='w-36'
-                        items={[
-                            { label: 'All', value: 'all' },
-                            { label: 'Active', value: 'active' },
-                            { label: 'Inactive', value: 'inactive' },
-                        ]}
-                        placeholder={t('service.status')}
-                    />
-                </div>
-                <div>
-                    <Input
-                        variant='search'
-                        placeholder={t('service.search')}
-                        className='bg-white border border-border'
-                    />
-                </div>
-            </div>
-
-            {
-                getCustomers.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('customer.name')} />
-                                    <Td text={t('customer.company')} />
-                                    <Td text={t('customer.email')} />
-                                    <Td text={t('customer.active_services')} />
-                                    <Td text={t('customer.factor')} />
-                                    <Td text={t('customer.tickets')} />
-                                    <Td text={t('customer.detail')} />
-                                    <Td text={''} />
-                                </tr>
-                            </thead>
-                            <tbody>
-                                {
-                                    getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
-                                        return (
-                                            <tr key={item.id} className='tr'>
-                                                <Td text={item.firstName + ' ' + item.lastName} />
-                                                <Td text={item?.legalUser?.registrationName} />
-                                                <Td text={item.email ? item.email : ''} />
-                                                <Td text={item.subscriptionsCount} />
-                                                <Td text={''}>
-                                                    <Link to={Pages.receipts.index + `?user=${item.id}`}>
-                                                        <div className='text-[#0047FF]'>{item.invoicesCount} صورت حساب</div>
-                                                    </Link>
-                                                </Td>
-                                                <Td text={''}>
-                                                    <Link to={Pages.ticket.list + `?user=${item.id}`}>
-                                                        <div className='text-[#0047FF]'>{item.ticketsCount} تیکت</div>
-                                                    </Link>
-                                                </Td>
-                                                <Td text={''}>
-                                                    <Link to={Pages.customer.update + item.id}>
-                                                        <Eye size={20} color='#8C90A3' />
-                                                    </Link>
-                                                </Td>
-                                                <Td text={''} />
-                                            </tr>
-                                        )
-                                    })
-                                }
-
-                            </tbody>
-                        </table>
-
-                        <Pagination
-                            totalPages={getCustomers.data?.data?.pager?.totalPages}
-                            currentPage={page}
-                            onPageChange={setPage}
-                        />
-                    </div>
-            }
+      <div className="flex justify-end items-center mt-12">
+        <div>
+          <Input
+            variant="search"
+            placeholder={t("search")}
+            className="bg-white border border-border"
+            onChangeSearchFinal={handleSearch}
+          />
         </div>
-    )
-}
+      </div>
 
-export default CustomerList
+      {getCustomers.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("customer.name")} />
+                <Td text={t("customer.company")} />
+                <Td text={t("customer.email")} />
+                <Td text={t("customer.active_services")} />
+                <Td text={t("customer.factor")} />
+                <Td text={t("customer.tickets")} />
+                <Td text={t("customer.detail")} />
+                <Td text={""} />
+              </tr>
+            </thead>
+            <tbody>
+              {getCustomers.data?.data?.customers?.map((item: CustomerItemType) => {
+                return (
+                  <tr
+                    key={item.id}
+                    className="tr"
+                  >
+                    <Td text={item.firstName + " " + item.lastName} />
+                    <Td text={item?.legalUser?.registrationName} />
+                    <Td text={item.email ? item.email : ""} />
+                    <Td text={item.subscriptionsCount} />
+                    <Td text={""}>
+                      <Link to={Pages.receipts.index + `?user=${item.id}`}>
+                        <div className="text-[#0047FF]">{item.invoicesCount} صورت حساب</div>
+                      </Link>
+                    </Td>
+                    <Td text={""}>
+                      <Link to={Pages.ticket.list + `?user=${item.id}`}>
+                        <div className="text-[#0047FF]">{item.ticketsCount} تیکت</div>
+                      </Link>
+                    </Td>
+                    <Td text={""}>
+                      {canUpdate("customers") && (
+                        <Link to={Pages.customer.update + item.id}>
+                          <Eye
+                            size={20}
+                            color="#8C90A3"
+                          />
+                        </Link>
+                      )}
+                    </Td>
+                    <Td text={""} />
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+
+          <Pagination
+            totalPages={getCustomers.data?.data?.pager?.totalPages}
+            currentPage={page}
+            onPageChange={setPage}
+            limit={limit}
+            onLimitChange={setLimit}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CustomerList;

src/pages/customer/Update.tsx

@@ -62,40 +62,33 @@ const UpdateCustomer: FC = () => {
             profilePic: ''
         },
         validationSchema: Yup.object({
-            phone: Yup.string().required(t('errors.required')),
-            firstName: Yup.string().required(t('errors.required')),
-            lastName: Yup.string().required(t('errors.required')),
-            email: Yup.string().email(t('errors.email')).required(t('errors.required')),
-            birthDate: Yup.string().required(t('errors.required')),
-            nationalCode: Yup.string().required(t('errors.required')),
-            economicCode: Yup.string().required(t('errors.required')),
-            registrationName: Yup.string().required(t('errors.required')),
-            registrationCode: Yup.string().required(t('errors.required')),
-            nationalIdentity: Yup.string().required(t('errors.required')),
-            postalCode: Yup.string().required(t('errors.required')),
-            address: Yup.string().required(t('errors.required')),
-            cityId: Yup.string().required(t('errors.required')),
+            email: Yup.string().test(
+                'email',
+                t('errors.email'),
+                (value) => !value || Yup.string().email().isValidSync(value)
+            ),
         }),
         onSubmit: async (values) => {
-            values.cityId = +values.cityId
-            if (values.password === '') values.password = undefined
+            const payload: Partial<CreateCustomerType> = Object.fromEntries(
+                Object.entries(values).filter(([, value]) => value !== '' && value !== undefined && value !== null)
+            ) as Partial<CreateCustomerType>
+
+            if (payload.cityId !== undefined) payload.cityId = +payload.cityId
+
             if (file) {
                 const formData = new FormData()
                 formData.append('file', file)
                 await singleUpload.mutateAsync(formData, {
                     onSuccess: (data) => {
-                        values.profilePic = data?.data?.url
+                        payload.profilePic = data?.data?.url
                     },
                     onError: (error: ErrorType) => {
                         toast(error.response?.data?.error?.message[0], 'error')
                     }
                 })
-
-                handleUpdateCustomer(values)
-            } else {
-                values.profilePic = undefined
-                handleUpdateCustomer(values)
             }
+
+            handleUpdateCustomer(payload as CreateCustomerType)
         }
     })
 

src/pages/customer/hooks/useCustomerData.ts

@@ -1,11 +1,11 @@
-import * as api from "../service/CustomerService";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/CustomerService";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
-export const useGetCustomers = (page: number, withoutPaginate?: boolean) => {
+export const useGetCustomers = (page: number, limit: number, withoutPaginate?: boolean, search?: string) => {
   return useQuery({
-    queryKey: ["customers", page],
-    queryFn: () => api.getCustomers(page, withoutPaginate),
+    queryKey: ["customers", page, limit, withoutPaginate, search],
+    queryFn: () => api.getCustomers(page, limit, withoutPaginate, search),
   });
 };
 
@@ -27,8 +27,7 @@ export const useGetCities = (provincesId: string) => {
 export const useCreateCustomer = () => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: (variables: CreateCustomerType) =>
-      api.createCustomer(variables),
+    mutationFn: (variables: CreateCustomerType) => api.createCustomer(variables),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: ["customers"],
@@ -48,8 +47,7 @@ export const useGetCustomerDetail = (id?: string) => {
 export const useUpdateCustomer = (id: string) => {
   const queryClient = useQueryClient();
   return useMutation({
-    mutationFn: (variables: CreateCustomerType) =>
-      api.updateCustomer(id, variables),
+    mutationFn: (variables: CreateCustomerType) => api.updateCustomer(id, variables),
     onSuccess: () => {
       queryClient.invalidateQueries({
         queryKey: ["customers"],

src/pages/customer/service/CustomerService.ts

@@ -1,10 +1,8 @@
 import axios from "../../../config/axios";
 import { CreateCustomerType } from "../types/CustomerTypes";
 
-export const getCustomers = async (page: number, withoutPaginate?: boolean) => {
-  const { data } = await axios.get(
-    `/users/customers?page=${page}&paginate=${withoutPaginate ? "0" : "1"}`
-  );
+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 ?? "")}`);
   return data;
 };
 
@@ -28,10 +26,7 @@ export const getDetailCustomer = async (id: string) => {
   return data;
 };
 
-export const updateCustomer = async (
-  id: string,
-  params: CreateCustomerType
-) => {
+export const updateCustomer = async (id: string, params: CreateCustomerType) => {
   const { data } = await axios.patch(`/users/customers/${id}`, params);
   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/home/components/ItemDashboard.tsx

@@ -1,37 +1,32 @@
-import { FC, ReactNode } from 'react'
-import { Link } from 'react-router-dom'
+import { FC, ReactNode } from "react";
 
 type Props = {
-    title: string
-    icon: ReactNode,
-    color: string,
-    count: number,
-    description: string,
-    to?: string
-}
+  title: string;
+  icon: ReactNode;
+  color: string;
+  count: number;
+  description: string;
+  to?: string;
+};
 
 const ItemDashboard: FC<Props> = (props: Props) => {
+  return (
+    <div className="p-6 min-w-[40%] xl:min-w-[15%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl">
+      <div className="size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center">{props.icon}</div>
+      <div className="mt-5">{props.title}</div>
 
-    return (
-        <Link to={props.to ? props.to : ''} className='p-6 min-w-[40%] xl:min-w-[15%] flex flex-col items-center xl:items-start flex-1 h-[178px] bg-white rounded-3xl'>
-            <div className='size-10 rounded-full bg-[#EEF0F7] flex justify-center items-center'>
-                {props.icon}
-            </div>
-            <div className='mt-5'>
-                {props.title}
-            </div>
+      <div className="mt-5 text-xs text-description flex gap-1.5 items-center">
+        <div
+          style={{ background: props.color }}
+          className="size-1.5 rounded-full"
+        ></div>
+        <div className="flex gap-0.5">
+          <div>{props.count}</div>
+          <div className="whitespace-nowrap">{props.description}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
 
-            <div className='mt-5 text-xs text-description flex gap-1.5 items-center'>
-                <div style={{ background: props.color }} className='size-1.5 rounded-full'></div>
-                <div className='flex gap-0.5'>
-                    <div>{props.count}</div>
-                    <div className='whitespace-nowrap'>
-                        {props.description}
-                    </div>
-                </div>
-            </div>
-        </Link>
-    )
-}
-
-export default ItemDashboard
+export default ItemDashboard;

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

@@ -1,6 +1,10 @@
 import { AttachCircle, Calendar, TickSquare } from "iconsax-react";
 import { useEffect, useRef, type FC } from "react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Pages } from "../../../config/Pages";
 import type { Task as TaskType } from "../types";
+import UserAvatar from "./UserAvatar";
 
 type Props = {
   task: TaskType;
@@ -9,6 +13,7 @@ type Props = {
 };
 
 const Task: FC<Props> = ({ task, isDragging, onClick }) => {
+  const { t } = useTranslation("global");
   const suppressClickRef = useRef(false);
 
   useEffect(() => {
@@ -28,15 +33,26 @@ 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}
-      <div className="bg-[#FF76C2] h-5 px-3 flex items-center mt-2 text-[10px] text-white rounded-md w-fit">
-        {task.tag}
-      </div>
-      <div className="font-bold text-xs mt-2">{task.title}</div>
+      {task.tag ? (
+        <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 break-words">{task.title}</div>
+      {task.ticketId ? (
+        <Link
+          to={Pages.ticket.detail + task.ticketId}
+          onClick={(e) => e.stopPropagation()}
+          className="mt-2 inline-flex items-center text-[10px] text-primary hover:underline"
+        >
+          {t("taskmanager.task_detail.related_ticket")}
+        </Link>
+      ) : null}
       <div className="mt-2 flex flex-wrap items-center gap-x-3 gap-y-1.5 text-xs">
         <div className="flex items-center gap-1 text-[10px] min-w-0">
           <Calendar size={16} color="#292D32" className="shrink-0" />
@@ -55,9 +71,20 @@ const Task: FC<Props> = ({ task, isDragging, onClick }) => {
         </div>
       </div>
 
-      <div className="mt-2 flex justify-end">
-        <div className="size-6 bg-gray-200 rounded-full"></div>
-      </div>
+      {task.users?.length ? (
+        <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
+                key={user.id}
+                src={user.profilePic}
+                alt={`${user.firstName} ${user.lastName}`}
+                className="size-6 ring-2 ring-white"
+              />
+            ))}
+          </div>
+        </div>
+      ) : null}
     </div>
   );
 };

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-10 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/TaskDetailMetadataPreview.tsx

@@ -1,7 +1,9 @@
 import { Add } from "iconsax-react";
 import { type FC } from "react";
+import { Link } from "react-router-dom";
 import type DateObject from "react-date-object";
 import { useTranslation } from "react-i18next";
+import { Pages } from "../../../../config/Pages";
 import UserAvatar from "../UserAvatar";
 import { formatDateRange } from "./date/utils";
 import type { TaskLabel } from "./labels/types";
@@ -12,11 +14,12 @@ type Props = {
   selectedUsers: TaskUser[];
   startDate: DateObject | null;
   endDate: DateObject | null;
+  ticketId?: string | null;
   onAddLabel?: () => void;
   onAddUser?: () => void;
 };
 
-const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, startDate, endDate, onAddLabel, onAddUser }) => {
+const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, startDate, endDate, ticketId, onAddLabel, onAddUser }) => {
   const { t } = useTranslation("global");
   const dateLabel = formatDateRange(startDate, endDate);
 
@@ -76,6 +79,18 @@ const TaskDetailMetadataPreview: FC<Props> = ({ selectedLabels, selectedUsers, s
           </span>
         ) : null}
       </div>
+
+      {ticketId ? (
+        <div className="col-span-2 sm:col-span-1 min-w-0">
+          <div className="text-xs font-medium mb-2">{t("taskmanager.task_detail.related_ticket")}</div>
+          <Link
+            to={Pages.ticket.detail + ticketId}
+            className="inline-flex items-center min-h-7 px-3 py-1 rounded-lg text-xs font-medium bg-[#E8E8E8] text-primary hover:underline whitespace-nowrap"
+          >
+            {t("taskmanager.task_detail.view_ticket")}
+          </Link>
+        </div>
+      ) : null}
     </div>
   );
 };

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

@@ -10,6 +10,7 @@ import type { TaskDetailType } from "../../task/types/TaskTypes";
 import type { Column, Task } from "../../types";
 import AttachmentList from "./attachment/List";
 import CheckLists from "./checklist/List";
+import CommentList from "./comment/List";
 import TimeList from "./time/List";
 import TaskDetailCoverColorBar from "./cover/TaskDetailCoverColorBar";
 import TaskDetailDescription from "./TaskDetailDescription";
@@ -198,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>
 
@@ -208,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}
@@ -218,6 +220,8 @@ const TaskDetailModal: FC<Props> = ({ open, task, columns, projectId, onClose, o
           />
 
           <TimeList times={getTaskTimes.data?.data} />
+
+          <CommentList taskId={task.id} enabled={open && !!task.id} />
         </>
       )}
     </DefaulModal>

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}
             />
@@ -397,6 +408,7 @@ const TaskDetailToolbar: FC<Props> = ({ activeTab, onTabChange, taskDetail, task
         selectedUsers={selectedUsers}
         startDate={startDate}
         endDate={endDate}
+        ticketId={taskDetail?.ticketId}
         onAddLabel={handleAddLabelClick}
         onAddUser={handleAddUserClick}
       />

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

@@ -1,10 +1,11 @@
 import { Edit } from "iconsax-react";
+import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import { toast } from '../../../../../components/Toast';
+import ModalConfrim from "../../../../../components/ModalConfrim";
+import { toast } from "../../../../../components/Toast";
 import ProgressBar from "../../../../../components/ProgressBar";
-import TrashWithConfrim from "../../../../../components/TrashWithConfrim";
 import { ErrorType } from "../../../../../helpers/types";
-import { useUpdateCheckListItem } from "../../../task/hooks/useTaskData";
+import { useDeleteCheckListItem, useUpdateCheckListItem } from "../../../task/hooks/useTaskData";
 import type { TaskChecklistItemType } from "../../../task/types/TaskTypes";
 import ChecklistItem from "./ChecklistItem";
 
@@ -23,6 +24,8 @@ const CheckLists = ({
 }: Props) => {
   const { t } = useTranslation("global");
   const updateCheckListItem = useUpdateCheckListItem();
+  const deleteCheckListItem = useDeleteCheckListItem();
+  const [deleteItemId, setDeleteItemId] = useState<string | null>(null);
 
   const items = checkListItems.map((item) => ({
     id: item.id,
@@ -34,12 +37,39 @@ 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");
+        },
+      },
+    );
+  };
+
+  const handleDelete = () => {
+    if (!deleteItemId) return;
+
+    deleteCheckListItem.mutate(
+      { id: deleteItemId, taskId },
+      {
+        onSuccess: () => {
+          setDeleteItemId(null);
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
         },
       },
     );
@@ -52,7 +82,6 @@ const CheckLists = ({
       <div className="flex gap-2 items-center">
         <div className="text-sm font-bold mt-px">{t("taskmanager.task_detail.checklist")}</div>
         <Edit size={20} color="#0047FF" />
-        <TrashWithConfrim onDelete={() => {}} color="#FF0000" />
       </div>
 
       <div className="mt-4 flex gap-2 items-center">
@@ -66,12 +95,20 @@ const CheckLists = ({
             key={item.id}
             title={item.title}
             checked={item.checked}
-            onToggle={() => handleToggle(item.id, item.checked)}
-            onEdit={() => {}}
-            onDelete={() => {}}
+            onToggle={() => handleToggle(item.id, item.title, item.checked)}
+            onSave={(title) => handleSave(item.id, title, item.checked)}
+            onDelete={() => setDeleteItemId(item.id)}
+            isSaving={updateCheckListItem.isPending}
           />
         ))}
       </div>
+
+      <ModalConfrim
+        isOpen={deleteItemId !== null}
+        close={() => setDeleteItemId(null)}
+        onConfrim={handleDelete}
+        isLoading={deleteCheckListItem.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

@@ -0,0 +1,239 @@
+import { CloseCircle, Edit2, Paperclip2 } from "iconsax-react";
+import moment from "moment-jalaali";
+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;
+  taskId: string;
+};
+
+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 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();
+    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,
+          attachments: nextAttachments,
+        },
+        taskId,
+      },
+      {
+        onSuccess: () => {
+          toast(t("success"), "success");
+          setIsEditing(false);
+          setPendingFiles([]);
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  const handleCancel = () => {
+    setContent(comment.content);
+    setAttachments(comment.attachments ?? []);
+    setPendingFiles([]);
+    setIsEditing(false);
+  };
+
+  const handleDelete = () => {
+    deleteComment.mutate(
+      { id: comment.id, taskId },
+      {
+        onSuccess: () => {
+          toast(t("success"), "success");
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  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" showTooltip={false} />
+
+        <div className="flex-1 min-w-0">
+          <div className="flex items-center justify-between gap-2">
+            <div className="text-xs font-medium truncate">{authorName}</div>
+            <div className="text-[10px] text-description shrink-0">
+              {moment(comment.createdAt).format("jYYYY/jMM/jDD HH:mm")}
+            </div>
+          </div>
+
+          {isEditing ? (
+            <div className="mt-2">
+              <textarea
+                value={content}
+                onChange={(e) => setContent(e.target.value)}
+                rows={3}
+                className="w-full bg-white/50 rounded-lg px-3 py-2 text-xs outline-none resize-none"
+                autoFocus
+              />
+
+              <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={
+                    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")}
+                </button>
+                <button
+                  type="button"
+                  onClick={handleCancel}
+                  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>
+              <CommentAttachments attachments={comment.attachments ?? []} />
+            </>
+          )}
+        </div>
+
+        {!isEditing ? (
+          <div className="flex items-center gap-1 shrink-0">
+            <button type="button" onClick={() => setIsEditing(true)} className="cursor-pointer">
+              <Edit2 size={16} color="#0047FF" />
+            </button>
+            <TrashWithConfrim onDelete={handleDelete} isLoading={deleteComment.isPending} size={16} color="#FF0000" />
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+};
+
+export default CommentItem;

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

@@ -0,0 +1,159 @@
+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";
+
+type Props = {
+  taskId: string;
+  enabled?: boolean;
+};
+
+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 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,
+        ...(attachments?.length ? { attachments } : {}),
+      },
+      {
+        onSuccess: () => {
+          toast(t("success"), "success");
+          setContent("");
+          setFiles([]);
+        },
+        onError: (error: ErrorType) => {
+          toast(error.response?.data?.error.message[0], "error");
+        },
+      },
+    );
+  };
+
+  return (
+    <div className="mt-6">
+      <div className="text-sm font-bold">{t("taskmanager.task_detail.comments")}</div>
+
+      <div className="mt-3 relative bg-white/25 rounded-xl">
+        <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 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 ? (
+        <div className="mt-3 text-[10px] text-description text-center py-2">{t("loading")}</div>
+      ) : comments.length === 0 ? (
+        <div className="mt-3 text-[10px] text-description">{t("taskmanager.task_detail.no_comments")}</div>
+      ) : (
+        <div className="mt-3 flex flex-col gap-2">
+          {comments.map((comment) => (
+            <CommentItem
+              key={comment.id}
+              comment={comment}
+              taskId={taskId}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default CommentList;

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/useTaskCommentData.ts

@@ -0,0 +1,45 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import * as api from "../service/TaskCommentService";
+import { CreateTaskCommentType, UpdateTaskCommentType } from "../types/TaskCommentTypes";
+
+export const useGetTaskComments = (taskId: string, enabled = true) => {
+  return useQuery({
+    queryKey: ["task-comments", taskId],
+    queryFn: () => api.getTaskComments(taskId),
+    enabled: !!taskId && enabled,
+  });
+};
+
+export const useCreateTaskComment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: (variables: CreateTaskCommentType) => api.createTaskComment(variables),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-comments", variables.taskId] });
+    },
+  });
+};
+
+export const useUpdateTaskComment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: UpdateTaskCommentType; taskId: string }) =>
+      api.updateTaskComment(id, params),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-comments", variables.taskId] });
+    },
+  });
+};
+
+export const useDeleteTaskComment = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    mutationFn: ({ id }: { id: string; taskId: string }) => api.deleteTaskComment(id),
+    onSuccess: (_data, variables) => {
+      queryClient.invalidateQueries({ queryKey: ["task-comments", variables.taskId] });
+    },
+  });
+};

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,58 @@ export const useUpdateCheckListItem = () => {
   return useMutation({
     mutationFn: ({ id, params }: { id: string; params: UpdateCheckListItemType; taskId: string }) =>
       api.updateCheckListItem(id, params),
+    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"] });
+    },
+  });
+};
+
+export const useDeleteCheckListItem = () => {
+  const queryClient = useQueryClient();
+
+  return useMutation({
+    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"] });
     },
   });
@@ -149,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/TaskCommentService.ts

@@ -0,0 +1,31 @@
+import axios from "../../../../config/axios";
+import {
+  CreateTaskCommentResponse,
+  CreateTaskCommentType,
+  GetTaskCommentsResponse,
+  UpdateTaskCommentResponse,
+  UpdateTaskCommentType,
+} from "../types/TaskCommentTypes";
+
+export const getTaskComments = async (taskId: string): Promise<GetTaskCommentsResponse> => {
+  const { data } = await axios.get(`/task-manager/comments/task/${taskId}`);
+  return data;
+};
+
+export const createTaskComment = async (params: CreateTaskCommentType): Promise<CreateTaskCommentResponse> => {
+  const { data } = await axios.post(`/task-manager/comments`, params);
+  return data;
+};
+
+export const updateTaskComment = async (
+  id: string,
+  params: UpdateTaskCommentType,
+): Promise<UpdateTaskCommentResponse> => {
+  const { data } = await axios.patch(`/task-manager/comments/${id}`, params);
+  return data;
+};
+
+export const deleteTaskComment = async (id: string) => {
+  const { data } = await axios.delete(`/task-manager/comments/${id}`);
+  return data;
+};

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;
@@ -76,7 +82,22 @@ export const updateCheckListItem = async (
   return data;
 };
 
+export const deleteCheckListItem = async (id: string) => {
+  const { data } = await axios.delete(`/task-manager/check-list-items/${id}`);
+  return data;
+};
+
 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

@@ -0,0 +1,42 @@
+import { IResponse } from "../../../../types/response.types";
+
+export type TaskCommentAuthorType = {
+  id: string;
+  firstName: string;
+  lastName: string;
+  profilePic?: string | null;
+};
+
+export type TaskCommentType = {
+  id: string;
+  content: string;
+  taskId: string;
+  userId?: string;
+  user?: TaskCommentAuthorType;
+  attachments?: string[];
+  createdAt: string;
+  updatedAt?: string;
+};
+
+export type CreateTaskCommentType = {
+  content: string;
+  taskId: string;
+  attachments?: string[];
+};
+
+export type UpdateTaskCommentType = {
+  content: string;
+  attachments?: string[];
+};
+
+export interface GetTaskCommentsResponse extends IResponse<TaskCommentType[]> {
+  statusCode: number;
+}
+
+export interface CreateTaskCommentResponse extends IResponse<TaskCommentType> {
+  statusCode: number;
+}
+
+export interface UpdateTaskCommentResponse extends IResponse<TaskCommentType> {
+  statusCode: number;
+}

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

@@ -6,6 +6,7 @@ export type CreateTaskType = {
   order: number;
   projectId: string;
   userIds?: string[];
+  ticketId?: string;
 };
 
 export type TaskItemType = {
@@ -22,9 +23,11 @@ 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[];
 };
 
 export type TaskPhaseTasksPagerType = {
@@ -80,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 }> {
@@ -108,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;
@@ -127,6 +139,7 @@ export type TaskDetailType = {
   checkListItemCount?: number;
   completedCheckListItemCount?: number;
   attachments?: TaskAttachmentType[];
+  ticketId?: string | null;
 };
 
 export type ChangeTaskPhaseType = {

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

@@ -4,12 +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/types.ts

@@ -1,3 +1,5 @@
+import type { TaskUserType } from "./task/types/TaskTypes";
+
 export type Column = {
   id: string;
   title: string;
@@ -16,6 +18,8 @@ export type Task = {
   attachments: number;
   checklistDone: number;
   checklistTotal: number;
+  ticketId?: string | null;
+  users?: TaskUserType[];
 };
 
 export type WorkspaceData = {

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,11 @@ 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,
         },
         index,
       ),

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"