permission

src/helpers/permissions.ts

@@ -145,6 +145,19 @@ export enum PermissionEnum {
   TASK_PHASE_UPDATE = "task_phase_update",
   TASK_PHASE_DELETE = "task_phase_delete",
 
+  TICKET_CATEGORIES_CREATE = "ticket_categories_create",
+  TICKET_CATEGORIES_READ = "ticket_categories_read",
+  TICKET_CATEGORIES_UPDATE = "ticket_categories_update",
+  TICKET_CATEGORIES_DELETE = "ticket_categories_delete",
+
+  TICKET_MASTERS_CREATE = "ticket_masters_create",
+  TICKET_MASTERS_READ = "ticket_masters_read",
+  TICKET_MASTERS_UPDATE = "ticket_masters_update",
+  TICKET_MASTERS_DELETE = "ticket_masters_delete",
+
+  VIEW_ALL_WORKSPACES = "view_all_workspaces",
+  VIEW_ALL_PROJECTS = "view_all_projects",
+
   LOGS = "logs",
   MANAGE_SSO_CLIENTS = "manage_sso_clients",
   DMENU = "dmenu",
@@ -153,12 +166,26 @@ export enum PermissionEnum {
   DMAIL = "dmail",
 }
 
-const CRUD_ACTIONS = ["create", "read", "update", "delete"] as const;
+export type CrudAction = "create" | "read" | "update" | "delete";
+
+const CRUD_ACTIONS: readonly CrudAction[] = ["create", "read", "update", "delete"];
 
 export const CONTENT_PERMISSION_RESOURCES = ["blogs", "learnings", "advertisements", "announcements"] as const;
 export const FINANCIAL_PERMISSION_RESOURCES = ["payments", "invoices", "transactions", "discounts", "bank_accounts"] as const;
-export const SUPPORT_PERMISSION_RESOURCES = ["support_plan", "tickets"] as const;
+export const SUPPORT_PERMISSION_RESOURCES = [
-export const TASK_MANAGER_PERMISSION_RESOURCES = ["workspace", "project", "task", "task_phase"] as const;
+  "support_plan",
+  "tickets",
+  "ticket_categories",
+  "ticket_masters",
+] as const;
+export const TASK_MANAGER_PERMISSION_RESOURCES = [
+  "workspace",
+  "project",
+  "task",
+  "task_phase",
+  "view_all_workspaces",
+  "view_all_projects",
+] as const;
 export const USERS_SIDEBAR_PERMISSION_RESOURCES = ["admins"] as const;
 export const PRODUCT_PERMISSION_RESOURCES = ["dmenu", "dkala", "dpage", "dmail"] as const;
 
@@ -180,6 +207,32 @@ export const hasPermission = (
   return CRUD_ACTIONS.some((action) => names.includes(`${resourceOrPermission}_${action}`));
 };
 
+export const hasActionPermission = (
+  permissions: PermissionEntry[] | undefined,
+  resource: string,
+  action: CrudAction,
+): boolean => {
+  const names = getPermissionNames(permissions);
+
+  if (names.includes(resource)) {
+    return true;
+  }
+
+  return names.includes(`${resource}_${action}`);
+};
+
+export const canCreate = (permissions: PermissionEntry[] | undefined, resource: string) =>
+  hasActionPermission(permissions, resource, "create");
+
+export const canRead = (permissions: PermissionEntry[] | undefined, resource: string) =>
+  hasActionPermission(permissions, resource, "read");
+
+export const canUpdate = (permissions: PermissionEntry[] | undefined, resource: string) =>
+  hasActionPermission(permissions, resource, "update");
+
+export const canDelete = (permissions: PermissionEntry[] | undefined, resource: string) =>
+  hasActionPermission(permissions, resource, "delete");
+
 export const hasAnyPermission = (
   permissions: PermissionEntry[] | undefined,
   resources: readonly string[],

src/hooks/usePermissions.ts

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

src/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}>
+                {canCreate('advertisements') && (
-                    <Button
+                    <Link to={Pages.ads.create}>
-                        className='w-[172px]'
+                        <Button
-                    >
+                            className='w-[172px]'
-                        <div className='flex gap-2 items-center'>
+                        >
-                            <Add size={20} color='white' />
+                            <div className='flex gap-2 items-center'>
-                            <div>
+                                <Add size={20} color='white' />
-                                {t('ads.new_ads')}
+                                <div>
+                                    {t('ads.new_ads')}
+                                </div>
                             </div>
-                        </div>
+                        </Button>
-                    </Button>
+                    </Link>
-                </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}>
+                                                        {canUpdate('advertisements') && (
-                                                            <Eye size={20} color='#8C90A3' />
+                                                            <Link to={Pages.ads.update + item.id}>
-                                                        </Link>
+                                                                <Eye size={20} color='#8C90A3' />
-                                                        <Trash onClick={() => handleDelete(item.id)} 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>
+                {canCreate('announcements') && (
-                    <Link to={Pages.announcement.create}>
+                    <div>
-                        <Button
+                        <Link to={Pages.announcement.create}>
-                            className='px-5'
+                            <Button
-                        >
+                                className='px-5'
-                            <div className='flex gap-2'>
+                            >
-                                <Add
+                                <div className='flex gap-2'>
-                                    className='size-5'
+                                    <Add
-                                    color='#fff'
+                                        className='size-5'
-                                />
+                                        color='#fff'
-                                <div>{t('announcement.add_announcement')}</div>
+                                    />
-                            </div>
+                                    <div>{t('announcement.add_announcement')}</div>
-                        </Button>
+                                </div>
-                    </Link>
+                            </Button>
-                </div>
+                        </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}>
+                                                {canUpdate('announcements') && (
-                                                    <Edit
+                                                    <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/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} />
+                                                            {canUpdate('blogs') && (
-                                                            <Trash size={20} color='red' onClick={() => {
+                                                                <UpdateCategory id={item.id} />
-                                                                deleteBlogCategory.mutateAsync(item.id, {
+                                                            )}
-                                                                    onSuccess: () => {
+                                                            {canDelete('blogs') && (
-                                                                        toast('دسته بندی با موفقیت حذف شد', 'success')
+                                                                <Trash size={20} color='red' onClick={() => {
-                                                                        getBlogCategories.refetch()
+                                                                    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'>
+                {canCreate('blogs') && (
-                    <p className='text-md'>{t('blog.add_category')}</p>
+                    <div className='relative bg-white min-h-[calc(100vh-185px)] w-sidebar xl:block hidden py-10 px-5 h-fit rounded-3xl'>
-                    <div className='text-sm flex items-center justify-between mt-4'>
+                        <p className='text-md'>{t('blog.add_category')}</p>
-                        <p>
+                        <div className='text-sm flex items-center justify-between mt-4'>
-                            {t('blog.category_status')}
+                            <p>
-                        </p>
+                                {t('blog.category_status')}
-                        <div className='flex gap-1 text-xs items-center text-description'>
+                            </p>
-                            <div>
+                            <div className='flex gap-1 text-xs items-center text-description'>
-                                {t('ads.deactive')}
+                                <div>
+                                    {t('ads.deactive')}
+                                </div>
+                                <SwitchComponent
+                                    active={formik.values.isActive}
+                                    onChange={(value) => formik.setFieldValue('isActive', value)}
+                                />
                             </div>
-                            <SwitchComponent
+                        </div>
-                                active={formik.values.isActive}
+
-                                onChange={(value) => formik.setFieldValue('isActive', value)}
+                        <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'>
+                        <div className='mt-6'>
-                        <Input
+                            <Textarea
-                            label='عنوان'
+                                label='توضیحات'
-                            {...formik.getFieldProps('title')}
+                                {...formik.getFieldProps('description')}
-                            error_text={formik.touched.title && formik.errors.title ? formik.errors.title : undefined}
+                                error_text={formik.touched.description && formik.errors.description ? formik.errors.description : 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>
-                    </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}>
+                {canCreate('blogs') && (
-                    <Button
+                    <Link to={Pages.blog.create}>
-                        className='w-[172px]'
+                        <Button
-                    >
+                            className='w-[172px]'
-                        <div className='flex gap-2 items-center'>
+                        >
-                            <Add size={20} color='white' />
+                            <div className='flex gap-2 items-center'>
-                            <div>
+                                <Add size={20} color='white' />
-                                {t('blog.new_blog')}
+                                <div>
+                                    {t('blog.new_blog')}
+                                </div>
                             </div>
-                        </div>
+                        </Button>
-                    </Button>
+                    </Link>
-                </Link>
+                )}
             </div>
 
 
@@ -139,19 +143,23 @@ const BlogList: FC = () => {
                                         </Td> */}
                                         <Td text={''}>
                                             <div className='flex gap-2'>
-                                                <Link to={Pages.blog.detail + item.id}>
+                                                {canUpdate('blogs') && (
-                                                    <Eye size={20} color='#8C90A3' />
+                                                    <Link to={Pages.blog.detail + item.id}>
-                                                </Link>
+                                                        <Eye size={20} color='#8C90A3' />
-                                                <TrashWithConfrim
+                                                    </Link>
-                                                    onDelete={() => {
+                                                )}
-                                                        deleteBlog.mutate(item.id, {
+                                                {canDelete('blogs') && (
-                                                            onSuccess: () => {
+                                                    <TrashWithConfrim
-                                                                getBlogs.refetch()
+                                                        onDelete={() => {
-                                                            }
+                                                            deleteBlog.mutate(item.id, {
-                                                        })
+                                                                onSuccess: () => {
-                                                    }}
+                                                                    getBlogs.refetch()
-                                                    isLoading={deleteBlog.isPending}
+                                                                }
-                                                />
+                                                            })
+                                                        }}
+                                                        isLoading={deleteBlog.isPending}
+                                                    />
+                                                )}
                                             </div>
                                         </Td>
                                     </tr>

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}>
+                    {canCreate('bank_accounts') &&
-                        <Button
+                        <Link to={Pages.cardBank.create}>
-                            className='px-5'
+                            <Button
-                        >
+                                className='px-5'
-                            <div className='flex gap-2'>
+                            >
-                                <Add
+                                <div className='flex gap-2'>
-                                    className='size-5'
+                                    <Add
-                                    color='#fff'
+                                        className='size-5'
-                                />
+                                        color='#fff'
-                                <div>{t('cardBank.add_account')}</div>
+                                    />
-                            </div>
+                                    <div>{t('cardBank.add_account')}</div>
-                        </Button>
+                                </div>
-                    </Link>
+                            </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}>
+                                                    {canUpdate('bank_accounts') &&
-                                                        <Eye size={20} color='#8C90A3' />
+                                                        <Link to={Pages.cardBank.detail + item.id}>
-                                                    </Link>
+                                                            <Eye size={20} color='#8C90A3' />
+                                                        </Link>
+                                                    }
                                                 </Td>
                                             </tr>
                                         )

src/pages/criticisms/List.tsx

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

src/pages/customer/List.tsx

@@ -8,11 +8,13 @@ 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("");
@@ -29,17 +31,19 @@ const CustomerList: FC = () => {
     <div className="mt-4">
       <div className="flex w-full justify-between items-center">
         <div>{t("customer.customer_list")}</div>
-        <Link to={Pages.customer.create}>
+        {canCreate("customers") && (
-          <Button className="px-5">
+          <Link to={Pages.customer.create}>
-            <div className="flex gap-2">
+            <Button className="px-5">
-              <Add
+              <div className="flex gap-2">
-                className="size-5"
+                <Add
-                color="#fff"
+                  className="size-5"
-              />
+                  color="#fff"
-              <div>{t("customer.add_cutomer")}</div>
+                />
-            </div>
+                <div>{t("customer.add_cutomer")}</div>
-          </Button>
+              </div>
-        </Link>
+            </Button>
+          </Link>
+        )}
       </div>
 
       <div className="flex justify-end items-center mt-12">
@@ -92,12 +96,14 @@ const CustomerList: FC = () => {
                       </Link>
                     </Td>
                     <Td text={""}>
-                      <Link to={Pages.customer.update + item.id}>
+                      {canUpdate("customers") && (
-                        <Eye
+                        <Link to={Pages.customer.update + item.id}>
-                          size={20}
+                          <Eye
-                          color="#8C90A3"
+                            size={20}
-                        />
+                            color="#8C90A3"
-                      </Link>
+                          />
+                        </Link>
+                      )}
                     </Td>
                     <Td text={""} />
                   </tr>

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}>
+                {canCreate('discounts') &&
-                    <Button
+                    <Link to={Pages.discount.create}>
-                        className='w-[172px]'
+                        <Button
-                    >
+                            className='w-[172px]'
-                        <div className='flex gap-2 items-center'>
+                        >
-                            <Add size={20} color='white' />
+                            <div className='flex gap-2 items-center'>
-                            <div>
+                                <Add size={20} color='white' />
-                                {t('discount.add_new_discount')}
+                                <div>
+                                    {t('discount.add_new_discount')}
+                                </div>
                             </div>
-                        </div>
+                        </Button>
-                    </Button>
+                    </Link>
-                </Link>
+                }
             </div>
 
 
@@ -114,17 +118,21 @@ const DiscountList: FC = () => {
                                                 </Td>
                                                 <Td text={t('')}>
                                                     <div className='flex gap-2 items-center'>
-                                                        <Link
+                                                        {canUpdate('discounts') &&
-                                                            to={Pages.discount.detail + item.id}
+                                                            <Link
-                                                        >
+                                                                to={Pages.discount.detail + item.id}
-                                                            <Edit size={20} color='#888888' />
+                                                            >
-                                                        </Link>
+                                                                <Edit size={20} color='#888888' />
+                                                            </Link>
+                                                        }
 
-                                                        <Trash
+                                                        {canDelete('discounts') &&
-                                                            size={20}
+                                                            <Trash
-                                                            color='#888888'
+                                                                size={20}
-                                                            onClick={() => handleDelete(item.id)}
+                                                                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>
+                {canCreate('services') && (
-                    <Link to={Pages.services.guide + id + '/create'}>
+                    <div>
-                        <Button
+                        <Link to={Pages.services.guide + id + '/create'}>
-                            className='px-5'
+                            <Button
-                        >
+                                className='px-5'
-                            <div className='flex gap-2'>
+                            >
-                                <Add
+                                <div className='flex gap-2'>
-                                    className='size-5'
+                                    <Add
-                                    color='#fff'
+                                        className='size-5'
-                                />
+                                        color='#fff'
-                                <div>{t('guide.submit_guide')}</div>
+                                    />
-                            </div>
+                                    <div>{t('guide.submit_guide')}</div>
-                        </Button>
+                                </div>
-                    </Link>
+                            </Button>
-                </div>
+                        </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}>
+                                                    {canUpdate('services') && (
-                                                        <Eye size={20} color='#8C90A3' />
+                                                        <Link to={Pages.services.guide + id + '/' + item.id}>
-                                                    </Link>
+                                                            <Eye size={20} color='#8C90A3' />
-                                                    <TrashWithConfrim
+                                                        </Link>
-                                                        onDelete={() => deleteGuide.mutate(item.id)}
+                                                    )}
-                                                        isLoading={deleteGuide.isPending}
+                                                    {canDelete('services') && (
-                                                    />
+                                                        <TrashWithConfrim
+                                                            onDelete={() => deleteGuide.mutate(item.id)}
+                                                            isLoading={deleteGuide.isPending}
+                                                        />
+                                                    )}
                                                 </div>
                                             </Td>
                                         </tr>

src/pages/learning/Category.tsx

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

src/pages/learning/List.tsx

@@ -9,11 +9,13 @@ import PageLoading from '../../components/PageLoading'
 import Td from '../../components/Td'
 import { LearningItemType } from './types/LearningTypes'
 import Pagination from '../../components/Pagination'
+import { usePermissions } from '../../hooks/usePermissions'
 const LearningList: FC = () => {
 
     const { t } = useTranslation('global')
     const [page, setPage] = useState<number>(1)
     const getLearning = useGetLearning(page)
+    const { canCreate } = usePermissions()
 
     return (
         <div className='mt-4'>
@@ -21,21 +23,23 @@ const LearningList: FC = () => {
                 <div>
                     {t('learning.list_learning')}
                 </div>
-                <div>
+                {canCreate('learnings') && (
-                    <Link to={Pages.learning.create}>
+                    <div>
-                        <Button
+                        <Link to={Pages.learning.create}>
-                            className='px-5'
+                            <Button
-                        >
+                                className='px-5'
-                            <div className='flex gap-2'>
+                            >
-                                <Add
+                                <div className='flex gap-2'>
-                                    className='size-5'
+                                    <Add
-                                    color='#fff'
+                                        className='size-5'
-                                />
+                                        color='#fff'
-                                <div>{t('learning.submit_learning')}</div>
+                                    />
-                            </div>
+                                    <div>{t('learning.submit_learning')}</div>
-                        </Button>
+                                </div>
-                    </Link>
+                            </Button>
-                </div>
+                        </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/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}>
+                                                        {canUpdate('invoices') &&
-                                                            <Edit size={20} color='#888' />
+                                                            <Link to={Pages.receipts.detail + item.id}>
-                                                        </Link>
+                                                                <Edit size={20} color='#888' />
-                                                        <TrashWithConfrim
+                                                            </Link>
-                                                            onDelete={() => handleDeleteInvoice(item.id)}
+                                                        }
-                                                            isLoading={deleteInvoice.isPending}
+                                                        {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}>
+                {canCreate('reseller') && (
-                    <Button
+                    <Link to={Pages.reseller.create}>
-                        className='w-[172px]'
+                        <Button
-                    >
+                            className='w-[172px]'
-                        <div className='flex gap-2 items-center'>
+                        >
-                            <Add size={20} color='white' />
+                            <div className='flex gap-2 items-center'>
-                            <div>
+                                <Add size={20} color='white' />
-                                {t('reseller.add_new')}
+                                <div>
+                                    {t('reseller.add_new')}
+                                </div>
                             </div>
-                        </div>
+                        </Button>
-                    </Button>
+                    </Link>
-                </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} />
+                                                                    {canUpdate('services') && (
-                                                                    <Trash
+                                                                        <UpdateCategory refetch={() => getCategory.refetch()} id={item.id} />
-                                                                        size={20}
+                                                                    )}
-                                                                        color='#888888'
+                                                                    {canDelete('services') && (
-                                                                        onClick={() => handleDelete(item.id)}
+                                                                        <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>
+                {canCreate('services') && (
-                    <Link to={Pages.services.add}>
+                    <div>
-                        <Button
+                        <Link to={Pages.services.add}>
-                            className='px-5'
+                            <Button
-                        >
+                                className='px-5'
-                            <div className='flex gap-2'>
+                            >
-                                <Add
+                                <div className='flex gap-2'>
-                                    className='size-5'
+                                    <Add
-                                    color='#fff'
+                                        className='size-5'
-                                />
+                                        color='#fff'
-                                <div>{t('service.submit_service')}</div>
+                                    />
-                            </div>
+                                    <div>{t('service.submit_service')}</div>
-                        </Button>
+                                </div>
-                    </Link>
+                            </Button>
-                </div>
+                        </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}>
+                                                            (canCreate('services') &&
-                                                                <Button
+                                                                <Link to={Pages.services.plan + item.id}>
-                                                                    className='h-8 bg-transparent border border-black text-black  text-xs'
+                                                                    <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 className='flex gap-2 items-center'>
-                                                                        <div>{t('service.add_plan')}</div>
+                                                                            <Add size={20} color='black' />
-                                                                    </div>
+                                                                            <div>{t('service.add_plan')}</div>
-                                                                </Button>
+                                                                        </div>
-                                                            </Link>
+                                                                    </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}>
+                                                    {canUpdate('services') && (
-                                                        <Eye size={20} color='#8C90A3' />
+                                                        <Link to={Pages.services.update + item.id}>
-                                                    </Link>
+                                                            <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
+                                                    {canUpdate('services') && (
-                                                        id={item.id}
+                                                        <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>
+                {canCreate('blogs') && (
-                    <Link to={Pages.sliders.create}>
+                    <div>
-                        <Button
+                        <Link to={Pages.sliders.create}>
-                            className='px-5'
+                            <Button
-                        >
+                                className='px-5'
-                            <div className='flex gap-2'>
+                            >
-                                <Add
+                                <div className='flex gap-2'>
-                                    className='size-5'
+                                    <Add
-                                    color='#fff'
+                                        className='size-5'
-                                />
+                                        color='#fff'
-                                <div>{t('slider.submit_slider')}</div>
+                                    />
-                            </div>
+                                    <div>{t('slider.submit_slider')}</div>
-                        </Button>
+                                </div>
-                    </Link>
+                            </Button>
-                </div>
+                        </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}>
+                                                {canUpdate('blogs') && (
-                                                    <Edit
+                                                    <Link to={Pages.sliders.detail + item.id}>
-                                                        className='size-5'
+                                                        <Edit
-                                                        color='#888'
+                                                            className='size-5'
+                                                            color='#888'
+                                                        />
+                                                    </Link>
+                                                )}
+                                                {canDelete('blogs') && (
+                                                    <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
+                                        {canDelete('customers') && (
-                                            onDelete={() => handleDelete(item.id)}
+                                            <TrashWithConfrim
-                                            isLoading={isPending}
+                                                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}>
+                {canCreate('support_plan') &&
-                    <Button
+                    <Link to={Pages.support.create}>
-                        className='w-fit px-6'
+                        <Button
-                    >
+                            className='w-fit px-6'
-                        <div className='flex gap-2 items-center'>
+                        >
-                            <Add size={20} color='white' />
+                            <div className='flex gap-2 items-center'>
-                            <div>
+                                <Add size={20} color='white' />
-                                {t('support.new_plan')}
+                                <div>
+                                    {t('support.new_plan')}
+                                </div>
                             </div>
-                        </div>
+                        </Button>
-                    </Button>
+                    </Link>
-                </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}>
+                                                {canUpdate('support_plan') &&
-                                                    <Edit size={20} color='#8C90A3' />
+                                                    <Link to={Pages.support.detail + item.id}>
-                                                </Link>
+                                                        <Edit size={20} color='#8C90A3' />
-                                                <Delete id={item.id} refetch={refetch} />
+                                                    </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();
@@ -314,48 +316,50 @@ const Column: FC<Props> = ({
         )}
       </Droppable>
 
-      {isAdding ? (
+      {canCreate("task") && (
-        <div className="mt-3 sm:mt-4 xl:mt-5 shrink-0 flex flex-col gap-3">
+        isAdding ? (
-          <input
+          <div className="mt-3 sm:mt-4 xl:mt-5 shrink-0 flex flex-col gap-3">
-            type="text"
+            <input
-            value={title}
+              type="text"
-            onChange={(e) => setTitle(e.target.value)}
+              value={title}
-            onKeyDown={(e) => {
+              onChange={(e) => setTitle(e.target.value)}
-              if (e.key === "Enter") handleCreateTask();
+              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"
+              placeholder={t("taskmanager.task_title")}
-            autoFocus
+              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
+            <div className="flex items-center gap-2">
-              type="button"
+              <button
-              onClick={handleCreateTask}
+                type="button"
-              disabled={!title.trim() || createTask.isPending}
+                onClick={handleCreateTask}
-              className="flex items-center gap-2 bg-black text-white text-[13px] rounded-full px-4 py-2 cursor-pointer disabled:opacity-50"
+                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" />
+                <span>{t("taskmanager.add_task")}</span>
-            </button>
+                <Add size={18} color="white" />
-            <button
+              </button>
-              type="button"
+              <button
-              onClick={resetTaskForm}
+                type="button"
-              className="cursor-pointer"
+                onClick={resetTaskForm}
-              aria-label={t("cancel")}
+                className="cursor-pointer"
-            >
+                aria-label={t("cancel")}
-              <CloseCircle size={22} color="#888888" variant="Bold" />
+              >
-            </button>
+                <CloseCircle size={22} color="#888888" variant="Bold" />
+              </button>
+            </div>
           </div>
-        </div>
+        ) : (
-      ) : (
+          <button
-        <button
+            type="button"
-          type="button"
+            onClick={() => setIsAdding(true)}
-          onClick={() => setIsAdding(true)}
+            className="mt-3 sm:mt-4 xl:mt-5 flex gap-2 items-center shrink-0 cursor-pointer"
-          className="mt-3 sm:mt-4 xl:mt-5 flex gap-2 items-center shrink-0 cursor-pointer"
+          >
-        >
+            <AddCircle size={18} color="#888888" />
-          <AddCircle size={18} color="#888888" />
+            <span className="text-description text-[13px] mt-0.5">{t("taskmanager.add_new_task")}</span>
-          <span className="text-description text-[13px] mt-0.5">{t("taskmanager.add_new_task")}</span>
+          </button>
-        </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
+            {canUpdate("task_phase") && (
-              type="button"
+              <button
-              onClick={() => {
+                type="button"
-                close();
+                onClick={() => {
-                onEdit();
+                  close();
-              }}
+                  onEdit();
-              className="w-full px-4 py-2.5 text-right hover:bg-black/5 transition-colors"
+                }}
-            >
+                className="w-full px-4 py-2.5 text-right hover:bg-black/5 transition-colors"
-              {t("taskmanager.edit_column")}
+              >
-            </button>
+                {t("taskmanager.edit_column")}
-            <button
+              </button>
-              type="button"
+            )}
-              onClick={() => {
+            {canDelete("task_phase") && (
-                close();
+              <button
-                onDelete();
+                type="button"
-              }}
+                onClick={() => {
-              className="w-full px-4 py-2.5 text-right text-red-500 hover:bg-red-50 transition-colors"
+                  close();
-            >
+                  onDelete();
-              {t("taskmanager.delete_column")}
+                }}
-            </button>
+                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-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/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
+        {canUpdate("project") && (
-          type="button"
+          <button
-          onClick={onEdit}
+            type="button"
-          className="w-full px-4 py-2.5 text-right hover:bg-[#F4F5F9] transition-colors"
+            onClick={onEdit}
-        >
+            className="w-full px-4 py-2.5 text-right hover:bg-[#F4F5F9] transition-colors"
-          {t("edit")}
+          >
-        </button>
+            {t("edit")}
-        <button
+          </button>
-          type="button"
+        )}
-          onClick={onDelete}
+        {canDelete("project") && (
-          className="w-full px-4 py-2.5 text-right text-red-500 hover:bg-red-50 transition-colors"
+          <button
-        >
+            type="button"
-          {t("taskmanager.delete_project")}
+            onClick={onDelete}
-        </button>
+            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}>
+        {canCreate("project") && (
-          <Button
+          <Link to={createProjectLink}>
-            onClick={onSettingsClick}
+            <Button
-            className="flex items-center gap-2 whitespace-nowrap px-4"
+              onClick={onSettingsClick}
-          >
+              className="flex items-center gap-2 whitespace-nowrap px-4"
-            <Add
+            >
-              size={18}
+              <Add
-              color="white"
+                size={18}
-            />
+                color="white"
-            <span>{t("taskmanager.new_project")}</span>
+              />
-          </Button>
+              <span>{t("taskmanager.new_project")}</span>
-        </Link>
+            </Button>
+          </Link>
+        )}
       </div>
     </div>
   );

src/pages/taskmanager/workspace/List.tsx

@@ -11,9 +11,11 @@ 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}>
+        {canCreate("workspace") && (
-          <Button className="px-5">
+          <Link to={Pages.taskmanager.createWorkspace}>
-            <div className="flex gap-2">
+            <Button className="px-5">
-              <Add
+              <div className="flex gap-2">
-                className="size-5"
+                <Add
-                color="#fff"
+                  className="size-5"
-              />
+                  color="#fff"
-              <div>{t("taskmanager.new_workspace")}</div>
+                />
-            </div>
+                <div>{t("taskmanager.new_workspace")}</div>
-          </Button>
+              </div>
-        </Link>
+            </Button>
+          </Link>
+        )}
       </div>
 
       {getWorkspaces.isPending ? (
@@ -92,18 +96,22 @@ const WorkspaceList: FC = () => {
                   </Td>
                   <Td text="">
                     <div className="flex items-center gap-2">
-                      <Link to={Pages.taskmanager.updateWorkspace + item.id}>
+                      {canUpdate("workspace") && (
-                        <Edit
+                        <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/ticket/Category.tsx

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

src/pages/ticket/masters/List.tsx

@@ -11,9 +11,11 @@ import { Pages } from "../../../config/Pages";
 import { ErrorType } from "../../../helpers/types";
 import { useDeleteMaster, useGetMasters } from "../hooks/useTicketData";
 import { TicketMasterItemType } from "../types/TicketTypes";
+import { usePermissions } from "../../../hooks/usePermissions";
 
 const TicketMastersList: FC = () => {
   const { t } = useTranslation("global");
+  const { canCreate, canDelete } = usePermissions();
   const getMasters = useGetMasters();
   const deleteMaster = useDeleteMaster();
 
@@ -35,17 +37,19 @@ const TicketMastersList: FC = () => {
       <div className="flex w-full justify-between items-center">
         <div>{t("ticket.masters")}</div>
         <div>
-          <Link to={Pages.ticket.mastersCreate}>
+          {canCreate("ticket_masters") && (
-            <Button className="px-5">
+            <Link to={Pages.ticket.mastersCreate}>
-              <div className="flex gap-2">
+              <Button className="px-5">
-                <Add
+                <div className="flex gap-2">
-                  className="size-5"
+                  <Add
-                  color="#fff"
+                    className="size-5"
-                />
+                    color="#fff"
-                <div>{t("ticket.add_master")}</div>
+                  />
-              </div>
+                  <div>{t("ticket.add_master")}</div>
-            </Button>
+                </div>
-          </Link>
+              </Button>
+            </Link>
+          )}
         </div>
       </div>
 
@@ -74,11 +78,13 @@ const TicketMastersList: FC = () => {
                       {/* <Link to={Pages.ticket.mastersUpdate + item.id}>
                         <Edit size={20} color="#8C90A3" />
                       </Link> */}
-                      <TrashWithConfrim
+                      {canDelete("ticket_masters") && (
-                        onDelete={() => handleDelete(item.id)}
+                        <TrashWithConfrim
-                        isLoading={deleteMaster.isPending}
+                          onDelete={() => handleDelete(item.id)}
-                        color="#8C90A3"
+                          isLoading={deleteMaster.isPending}
-                      />
+                          color="#8C90A3"
+                        />
+                      )}
                     </div>
                   </Td>
                 </tr>

src/pages/users/GroupList.tsx

@@ -7,11 +7,13 @@ import { Pages } from '../../config/Pages'
 import { Add } from 'iconsax-react'
 import Td from '../../components/Td'
 import { GroupItemType } from './types/UserTypes'
+import { usePermissions } from '../../hooks/usePermissions'
 
 const GroupList: FC = () => {
 
     const { t } = useTranslation('global')
     const navigate = useNavigate()
+    const { canCreate } = usePermissions()
     const getGroups = useGetGroups()
 
     return (
@@ -20,20 +22,22 @@ const GroupList: FC = () => {
                 <div>
                     {t('user.groups')}
                 </div>
-                <div>
+                {canCreate('admins') && (
-                    <Button
+                    <div>
-                        className='px-5'
+                        <Button
-                        onClick={() => navigate(Pages.users.groupList)}
+                            className='px-5'
-                    >
+                            onClick={() => navigate(Pages.users.groupList)}
-                        <div className='flex gap-2'>
+                        >
-                            <Add
+                            <div className='flex gap-2'>
-                                className='size-5'
+                                <Add
-                                color='#fff'
+                                    className='size-5'
-                            />
+                                    color='#fff'
-                            <div>{t('user.group_add')}</div>
+                                />
-                        </div>
+                                <div>{t('user.group_add')}</div>
-                    </Button>
+                            </div>
-                </div>
+                        </Button>
+                    </div>
+                )}
             </div>
 
             <div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>

src/pages/users/List.tsx

@@ -13,10 +13,12 @@ import { toast } from '../../components/Toast';
 import { ErrorType } from '../../helpers/types'
 import Pagination from '../../components/Pagination'
 import TrashWithConfrim from '../../components/TrashWithConfrim'
+import { usePermissions } from '../../hooks/usePermissions'
 const UsersList: FC = () => {
 
     const navigate = useNavigate()
     const { t } = useTranslation('global')
+    const { canCreate, canUpdate, canDelete } = usePermissions()
     const [page, setPage] = useState<number>(1)
     const [search, setSearch] = useState<string>('')
     const getUsers = useGetUsers(search, undefined, page)
@@ -40,20 +42,22 @@ const UsersList: FC = () => {
                 <div>
                     {t('user.users_list')}
                 </div>
-                <div>
+                {canCreate('admins') && (
-                    <Button
+                    <div>
-                        className='px-5'
+                        <Button
-                        onClick={() => navigate(Pages.users.create)}
+                            className='px-5'
-                    >
+                            onClick={() => navigate(Pages.users.create)}
-                        <div className='flex gap-2'>
+                        >
-                            <Add
+                            <div className='flex gap-2'>
-                                className='size-5'
+                                <Add
-                                color='#fff'
+                                    className='size-5'
-                            />
+                                    color='#fff'
-                            <div>{t('user.add_user')}</div>
+                                />
-                        </div>
+                                <div>{t('user.add_user')}</div>
-                    </Button>
+                            </div>
-                </div>
+                        </Button>
+                    </div>
+                )}
             </div>
 
             <div className='flex justify-between items-center mt-12'>
@@ -103,16 +107,20 @@ const UsersList: FC = () => {
                                                 </Td>
                                                 <Td text={''}>
                                                     <div className='flex gap-2'>
-                                                        <Link to={Pages.users.detail + item.id}>
+                                                        {canUpdate('admins') && (
-                                                            <Eye size={20} color='#8C90A3' />
+                                                            <Link to={Pages.users.detail + item.id}>
-                                                        </Link>
+                                                                <Eye size={20} color='#8C90A3' />
+                                                            </Link>
+                                                        )}
 
-                                                        <TrashWithConfrim
+                                                        {canDelete('admins') && (
-                                                            size={20}
+                                                            <TrashWithConfrim
-                                                            color='#8C90A3'
+                                                                size={20}
-                                                            onDelete={() => handleDeleteUser(item.id)}
+                                                                color='#8C90A3'
-                                                            isLoading={deleteUser.isPending}
+                                                                onDelete={() => handleDeleteUser(item.id)}
-                                                        />
+                                                                isLoading={deleteUser.isPending}
+                                                            />
+                                                        )}
                                                     </div>
                                                 </Td>
                                                 <Td text={''} />

src/pages/users/RolesList.tsx

@@ -8,11 +8,13 @@ import { Link, useNavigate } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import { useGetRoles } from './hooks/useUserData'
 import { RoleItemType } from './types/UserTypes'
+import { usePermissions } from '../../hooks/usePermissions'
 
 const RolesList: FC = () => {
 
     const navigate = useNavigate()
     const { t } = useTranslation('global')
+    const { canCreate, canUpdate } = usePermissions()
     const [search, setSearch] = useState<string>('')
     const getRoles = useGetRoles(search)
 
@@ -23,20 +25,22 @@ const RolesList: FC = () => {
                 <div>
                     {t('user.roles_list')}
                 </div>
-                <div>
+                {canCreate('admins') && (
-                    <Button
+                    <div>
-                        className='px-5'
+                        <Button
-                        onClick={() => navigate(Pages.users.roleCreate)}
+                            className='px-5'
-                    >
+                            onClick={() => navigate(Pages.users.roleCreate)}
-                        <div className='flex gap-2'>
+                        >
-                            <Add
+                            <div className='flex gap-2'>
-                                className='size-5'
+                                <Add
-                                color='#fff'
+                                    className='size-5'
-                            />
+                                    color='#fff'
-                            <div>{t('user.add_role')}</div>
+                                />
-                        </div>
+                                <div>{t('user.add_role')}</div>
-                    </Button>
+                            </div>
-                </div>
+                        </Button>
+                    </div>
+                )}
             </div>
 
             <div className='flex justify-end items-center mt-12'>
@@ -69,9 +73,11 @@ const RolesList: FC = () => {
                                         <Td text={item.userCount + ''} />
                                         <Td text={item.isAdmin ? t('yes') : t('no')} />
                                         <Td text={''}>
-                                            <Link to={Pages.users.roleUpdate + item.id}>
+                                            {canUpdate('admins') && (
-                                                <Eye size={20} color='#8C90A3' />
+                                                <Link to={Pages.users.roleUpdate + item.id}>
-                                            </Link>
+                                                    <Eye size={20} color='#8C90A3' />
+                                                </Link>
+                                            )}
                                         </Td>
                                     </tr>
                                 )

src/shared/components/SupportSubMenu.tsx

@@ -39,13 +39,13 @@ const SupportSubMenu: FC = () => {
           title={t("submenu.ticket_category")}
           isActive={isActive("/tickets/category")}
           link={Pages.ticket.category}
-          activeName="tickets"
+          activeName="ticket_categories"
         />
         <SubMenuItem
           title={t("submenu.ticket_masters")}
           isActive={isActive("/tickets/masters")}
           link={Pages.ticket.masters}
-          activeName="tickets"
+          activeName="ticket_masters"
         />
       </div>
     </div>