permission

.env

@@ -1,4 +1,4 @@
 VITE_TOKEN_NAME = 'admin_token'
 VITE_REFRESH_TOKEN_NAME = 'admin_refresh_token'
 VITE_BASE_URL = 'https://api.danakcorp.com'
-# VITE_BASE_URL = 'http://192.168.1.108:4000'
+# VITE_BASE_URL = 'http://192.168.1.117:4000'

src/components/Radio.tsx

@@ -2,8 +2,8 @@ import { FC } from 'react'
 
 type Props = {
     isActive: boolean,
-    value: string,
+    value: string | boolean,
-    onChange: (value: string) => void
+    onChange: (value: string | boolean) => void
 }
 
 const Radio: FC<Props> = (props: Props) => {

src/components/RadioGroup.tsx

@@ -5,10 +5,10 @@ import Radio from './Radio'
 type Props = {
     items: {
         label: string
-        value: string
+        value: string | boolean
     }[]
-    selected: string
+    selected: string | boolean
-    onChange: (value: string) => void
+    onChange: (value: string | boolean) => void
 }
 
 const RadioGroup: FC<Props> = (props: Props) => {

src/pages/discounts/CreateDiscount.tsx

@@ -1,4 +1,4 @@
-import { FC, useState } from 'react'
+import { FC, Fragment, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Input from '../../components/Input'
 import Button from '../../components/Button'
@@ -7,15 +7,13 @@ import { TickCircle } from 'iconsax-react'
 import DatePickerComponent from '../../components/DatePicker'
 import RadioGroup from '../../components/RadioGroup'
 import { useFormik } from 'formik'
-import { CreateDiscountType, DiscountCalculationType, DiscountType } from './types/DiscountTypes'
+import { CreateDiscountType } from './types/DiscountTypes'
 import * as Yup from 'yup'
-import { useGetAllServices, useGetPlans } from '../service/hooks/useServiceData'
+import { useGetAllServices } from '../service/hooks/useServiceData'
-import { PlanItemType, ServiceItemType } from '../service/types/ServiceTypes'
+import { ServiceItemType } from '../service/types/ServiceTypes'
 import CheckBoxComponent from '../../components/CheckBoxComponent'
 import { toast } from 'react-toastify'
 import { useCreateDiscount } from './hooks/useDiscountData'
-import { useGetCustomers } from '../customer/hooks/useCustomerData'
-import { CustomerItemType } from '../customer/types/CustomerTypes'
 import { useNavigate } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
 import { ErrorType } from '../../helpers/types'
@@ -25,55 +23,49 @@ const CreateDiscount: FC = () => {
 
     const navigate = useNavigate()
     const { t } = useTranslation('global')
-    const [serviceId, setServiceId] = useState<string>('')
+    const [serviceId, setServiceId] = useState<string[]>([])
-    const [planId, setPlanId] = useState<string>('')
+    // const [planId, setPlanId] = useState<string>('')
-    const [customerId, setCustomerId] = useState('')
+    // const [customerId, setCustomerId] = useState('')
     const getServices = useGetAllServices('', 1, '', '', undefined, 50)
-    const getPlans = useGetPlans(serviceId)
+    // const getPlans = useGetPlans(serviceId)
-    const getCustomers = useGetCustomers()
+    // const getCustomers = useGetCustomers()
     const createDiscount = useCreateDiscount()
 
     const formik = useFormik<CreateDiscountType>({
         initialValues: {
-            amount: '',
-            calculationType: DiscountCalculationType.FIXED,
             endDate: '',
             startDate: '',
             title: '',
-            type: DiscountType.DIRECT,
+            type: 1,
-            subscriptionPlanIds: [],
+            targetServices: [],
-            userIds: []
+            direct: true,
+            value: 0,
+            isActive: true
         },
         validationSchema: Yup.object({
-            amount: Yup.string().required(t('errors.required')),
+            value: Yup.number().required(t('errors.required')),
-            calculationType: Yup.string().required(t('errors.required')),
             endDate: Yup.string().required(t('errors.required')),
             startDate: Yup.string().required(t('errors.required')),
             title: Yup.string().required(t('errors.required')),
             type: Yup.string().required(t('errors.required')),
         }),
         onSubmit(values) {
-            if (serviceId && planId) {
+            values.targetServices = serviceId
-                values.subscriptionPlanIds = [planId]
+            const params: CreateDiscountType = {
-                values.userIds = [customerId]
+                ...values,
-                const params: CreateDiscountType = {
+                startDate: moment(values.startDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'),
-                    ...values,
+                endDate: moment(values.endDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'),
-                    startDate: moment(values.startDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'),
+                value: +values.value
-                    endDate: moment(values.endDate, 'jYYYY-jMM-jDD').format('YYYY-MM-DD'),
-                    amount: +values.amount
-                }
-                createDiscount.mutate(params, {
-                    onSuccess: () => {
-                        toast.success(t('success'))
-                        navigate(Pages.discount.list)
-                    },
-                    onError: (error: ErrorType) => {
-                        toast.error(error.response?.data?.error?.message[0])
-                    }
-                })
-            } else {
-                toast.error(t('discount.errors_plan'))
             }
+            createDiscount.mutate(params, {
+                onSuccess: () => {
+                    toast.success(t('success'))
+                    navigate(Pages.discount.list)
+                },
+                onError: (error: ErrorType) => {
+                    toast.error(error.response?.data?.error?.message[0])
+                }
+            })
         },
     })
     return (
@@ -103,15 +95,15 @@ const CreateDiscount: FC = () => {
                                 items={[
                                     {
                                         label: t('discount.direct_discount'),
-                                        value: DiscountType.DIRECT
+                                        value: true
                                     },
                                     {
                                         label: t('discount.discount_code'),
-                                        value: DiscountType.CODE
+                                        value: false
                                     }
                                 ]}
-                                onChange={(value) => formik.setFieldValue('type', value)}
+                                onChange={(value) => formik.setFieldValue('direct', value)}
-                                selected={formik.values.type}
+                                selected={formik.values.direct}
                             />
                         </div>
                     </div>
@@ -141,23 +133,23 @@ const CreateDiscount: FC = () => {
                                     items={[
                                         {
                                             label: t('discount.fixed_amount'),
-                                            value: DiscountCalculationType.FIXED
+                                            value: '1'
                                         },
                                         {
                                             label: t('discount.percent'),
-                                            value: DiscountCalculationType.PERCENTAGE
+                                            value: '0'
                                         }
                                     ]}
-                                    onChange={(value) => formik.setFieldValue('calculationType', value)}
+                                    onChange={(value) => formik.setFieldValue('type', value)}
-                                    selected={formik.values.calculationType}
+                                    selected={formik.values.type.toString()}
                                 />
                             </div>
                         </div>
                         <Input
                             label={t('discount.price_or_percent')}
                             placeholder={t('discount.enter_price_or_percent')}
-                            {...formik.getFieldProps('amount')}
+                            {...formik.getFieldProps('value')}
-                            error_text={formik.touched.amount && formik.errors.amount ? formik.errors.amount : ''}
+                            error_text={formik.touched.value && formik.errors.value ? formik.errors.value : ''}
                         />
                     </div>
                     <div className='mt-6 rowTwoInput'>
@@ -190,30 +182,36 @@ const CreateDiscount: FC = () => {
                             />
                         </div>
                     </div>
-                    <p className='mt-10 text-sm'>{t('discount.availabe_service')}</p>
-                    <div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
-                        <Input
-                            variant='search'
-                            placeholder={t('header.search')}
-                        />
-                        {
-                            getServices.data?.data?.services?.map((item: ServiceItemType) => (
-                                <div key={item.id} className='flex gap-2 mt-3 py-2 items-center'>
-                                    <div>
-                                        <CheckBoxComponent
-                                            checked={serviceId === item.id}
-                                            onChange={(e) => setServiceId(e.target.checked ? item.id : '')}
-                                        />
-                                    </div>
-                                    <div className='text-xs leading-5'>
-                                        {item.name}
-                                    </div>
-                                </div>
-                            ))
-                        }
-                    </div>
 
                     {
+                        formik.values.direct &&
+                        <Fragment>
+                            <p className='mt-10 text-sm'>{t('discount.availabe_service')}</p>
+                            <div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
+                                <Input
+                                    variant='search'
+                                    placeholder={t('header.search')}
+                                />
+                                {
+                                    getServices.data?.data?.services?.map((item: ServiceItemType) => (
+                                        <div key={item.id} className='flex gap-2 mt-3 py-2 items-center'>
+                                            <div>
+                                                <CheckBoxComponent
+                                                    checked={serviceId.includes(item.id)}
+                                                    onChange={(e) => setServiceId(e.target.checked ? [...serviceId, item.id] : serviceId.filter(id => id !== item.id))}
+                                                />
+                                            </div>
+                                            <div className='text-xs leading-5'>
+                                                {item.name}
+                                            </div>
+                                        </div>
+                                    ))
+                                }
+                            </div>
+                        </Fragment>
+                    }
+
+                    {/* {
                         getPlans.data &&
                         <div className='p-2 text-sm border border-[##D0D0D0] rounded-lg mt-2'>
                             {
@@ -253,7 +251,7 @@ const CreateDiscount: FC = () => {
                                 ))
                             }
                         </div>
-                    }
+                    } */}
                 </div>
             </div>
         </div>

src/pages/discounts/types/DiscountTypes.ts

@@ -1,12 +1,12 @@
 export type CreateDiscountType = {
   title: string;
-  type: string;
+  type: number;
-  calculationType: DiscountCalculationType;
+  direct: boolean;
-  amount: string | number;
+  value: number;
   startDate: string;
   endDate: string;
-  subscriptionPlanIds: string[];
+  isActive: boolean;
-  userIds: string[];
+  targetServices: string[];
 };
 
 export enum DiscountType {

src/pages/users/RoleCreate.tsx

@@ -112,6 +112,9 @@ const RoleCreate: FC = () => {
                                             )
                                         })
                                     }
+                                    <div className='flex flex-1 min-w-[23%] items-center'></div>
+                                    <div className='flex flex-1 min-w-[23%] items-center'></div>
+                                    <div className='flex flex-1 min-w-[23%] items-center'></div>
                                 </div>
                             </div>
 

src/pages/users/hooks/useUserData.ts

@@ -51,3 +51,10 @@ export const useGetGroups = () => {
     queryFn: () => api.getGroups(),
   });
 };
+
+export const useGetAdminPermissions = () => {
+  return useQuery({
+    queryKey: ["admin-permissions"],
+    queryFn: () => api.getAdminPermissions(),
+  });
+};

src/pages/users/service/UserService.ts

@@ -39,3 +39,8 @@ export const getGroups = async () => {
   const { data } = await axios.get(`/users/user-group`);
   return data;
 };
+
+export const getAdminPermissions = async () => {
+  const { data } = await axios.get(`/users/admin-permissions`);
+  return data;
+};

src/shared/SideBar.tsx

@@ -21,7 +21,6 @@ const SideBar: FC = () => {
     const { t } = useTranslation('global')
     const { openSidebar, setOpenSidebar, hasSubMenu, setSubMenuName, setSubtMenu, subMenuName } = useSharedStore()
     const location = useLocation()
-
     const isActive = (name: string) => {
         return location.pathname.includes(name)
     }
@@ -82,6 +81,7 @@ const SideBar: FC = () => {
                             title={t('sidebar.mainpage')}
                             isActive={isActive('dashboard')}
                             link={Pages.dashboard}
+                            activeName='dashboard'
                         />
                         <SideBarItem
                             icon={<Element3 variant={isActive('services') ? 'Bold' : 'Outline'} color={isActive('services') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
@@ -89,24 +89,28 @@ const SideBar: FC = () => {
                             isActive={isActive('services')}
                             link={Pages.services.list}
                             name='services'
+                            activeName='services'
                         />
                         <SideBarItem
                             icon={<People variant={isActive('customers') ? 'Bold' : 'Outline'} color={isActive('customers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.customers')}
                             isActive={isActive('customers')}
                             link={Pages.customers.list}
+                            activeName='customers'
                         />
                         <SideBarItem
                             icon={<UserSquare variant={isActive('representatives') ? 'Bold' : 'Outline'} color={isActive('representatives') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.representatives')}
                             isActive={isActive('representatives')}
                             link={Pages.representative.list}
+                            activeName='agents'
                         />
                         <SideBarItem
                             icon={<CodeCircle variant={isActive('developers') ? 'Bold' : 'Outline'} color={isActive('developers') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.developers')}
                             isActive={isActive('developers')}
                             link={Pages.developers.list}
+                            activeName='developers'
                         />
 
 
@@ -115,36 +119,42 @@ const SideBar: FC = () => {
                             title={t('sidebar.receipt_list')}
                             isActive={isActive('receipts')}
                             link={Pages.receipts.index}
+                            activeName='invoices'
                         />
                         <SideBarItem
                             icon={<Card variant={isActive('transactions') ? 'Bold' : 'Outline'} color={isActive('transactions') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.transactions')}
                             isActive={isActive('transactions')}
                             link={Pages.transactions}
+                            activeName='transactions'
                         />
                         <SideBarItem
                             icon={<Money3 variant={isActive('payments') ? 'Bold' : 'Outline'} color={isActive('payments') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.payments')}
                             isActive={isActive('payments')}
                             link={Pages.payment.list}
+                            activeName='payments'
                         />
                         <SideBarItem
                             icon={<TicketDiscount variant={isActive('discounts') ? 'Bold' : 'Outline'} color={isActive('discounts') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.discounts')}
                             isActive={isActive('discounts')}
                             link={Pages.discount.list}
+                            activeName='discounts'
                         />
                         <SideBarItem
                             icon={<Code variant={isActive('referral-code') ? 'Bold' : 'Outline'} color={isActive('referral-code') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.code_referral')}
                             isActive={isActive('referral-code')}
                             link={Pages.referralCode.list}
+                            activeName='referralCode'
                         />
                         <SideBarItem
                             icon={<Profile variant={isActive('users') ? 'Bold' : 'Outline'} color={isActive('users') ? 'black' : '#8C90A3'} size={iconSizeSideBar} />}
                             title={t('sidebar.users')}
                             isActive={isActive('users')}
                             link={Pages.users.list}
+                            activeName='admins'
                         />
                     </div>
 
@@ -162,6 +172,7 @@ const SideBar: FC = () => {
                             title={t('sidebar.ticket')}
                             isActive={isActive('tickets')}
                             link={Pages.ticket.list}
+                            activeName='tickets'
                         />
                     </div>
 
@@ -171,6 +182,7 @@ const SideBar: FC = () => {
                             title={t('sidebar.criticisms')}
                             isActive={isActive('criticisms')}
                             link={Pages.criticisms.list}
+                            activeName='criticisms'
                         />
                     </div>
 
@@ -188,6 +200,7 @@ const SideBar: FC = () => {
                             title={t('sidebar.ads')}
                             isActive={isActive('ads')}
                             link={Pages.ads.list}
+                            activeName='advertisements'
                         />
                     </div>
 
@@ -197,6 +210,7 @@ const SideBar: FC = () => {
                             title={t('sidebar.announcement')}
                             isActive={isActive('announcement')}
                             link={Pages.announcement.list}
+                            activeName='announcements'
                         />
                     </div>
 
@@ -206,6 +220,7 @@ const SideBar: FC = () => {
                             title={t('sidebar.blog')}
                             isActive={isActive('blog')}
                             link={Pages.blog.list}
+                            activeName='blogs'
                         />
                     </div>
 
@@ -215,6 +230,7 @@ const SideBar: FC = () => {
                             title={t('sidebar.learning')}
                             isActive={isActive('learning')}
                             link={Pages.learning.list}
+                            activeName='learnings'
                         />
                     </div>
 
@@ -224,6 +240,7 @@ const SideBar: FC = () => {
                             title={t('sidebar.messages')}
                             isActive={isActive('messages')}
                             link={Pages.messages.list}
+                            activeName='contacts_us'
                         />
                     </div>
 
@@ -236,6 +253,7 @@ const SideBar: FC = () => {
                                 title={t('sidebar.card')}
                                 isActive={isActive('card')}
                                 link={Pages.cardBank.list}
+                                activeName='bank_accounts'
                             />
                         </div>
                         <div className='text-xs text-[#8C90A3]'>
@@ -244,6 +262,7 @@ const SideBar: FC = () => {
                                 title={t('sidebar.setting')}
                                 isActive={isActive('setting')}
                                 link={Pages.setting}
+                                activeName='settings'
                             />
                         </div>
                         <div className='text-xs text-[#8C90A3]'>
@@ -253,6 +272,7 @@ const SideBar: FC = () => {
                                 isActive={isActive('logout')}
                                 link={`#`}
                                 isLogout
+                                activeName=''
                             />
                         </div>
                     </div>

src/shared/SideBarItem.tsx

@@ -4,6 +4,7 @@ import { clx } from '../helpers/utils'
 import { Pages } from '../config/Pages'
 import { useSharedStore } from './store/sharedStore'
 import { removeToken, removeRefreshToken } from '../config/func'
+import { useGetAdminPermissions } from '../pages/users/hooks/useUserData'
 
 type Props = {
     icon: ReactNode,
@@ -11,12 +12,14 @@ type Props = {
     isActive: boolean,
     link: string,
     isLogout?: boolean,
-    name?: string
+    name?: string,
+    activeName?: string
 }
 
 const SideBarItem: FC<Props> = (props: Props) => {
 
     const { hasSubMenu, setSubMenuName, setSubtMenu } = useSharedStore()
+    const { data: adminPermissions } = useGetAdminPermissions()
     const handleLogout = () => {
         removeToken()
         removeRefreshToken()
@@ -29,29 +32,31 @@ const SideBarItem: FC<Props> = (props: Props) => {
             setSubtMenu(true)
         }
     }
-
+    if (props.activeName === '' || props.activeName && adminPermissions?.data?.permissions?.some((permission: { name: string }) => permission.name === props.activeName)) {
-    return (
+        return (
-        <Link onClick={props.isLogout ? handleLogout : handleClick} to={props.link} className={clx(
+            <Link onClick={props.isLogout ? handleLogout : handleClick} to={props.link} className={clx(
-            'flex text-xs gap-9 mt-4',
+                'flex text-xs gap-9 mt-4',
-            hasSubMenu && 'flex-col',
+                hasSubMenu && 'flex-col',
-        )}>
-            <div className={clx(
-                'w-1 bg-black h-6',
-                !props.isActive && 'invisible',
-                hasSubMenu && 'hidden',
-            )}></div>
-            <div className={clx(
-                'flex gap-3 items-center',
-                hasSubMenu && 'flex-col text-[10px]',
             )}>
-                {props.icon}
+                <div className={clx(
-                <div className={props.isActive ? 'text-black' : ''}>
+                    'w-1 bg-black h-6',
-                    {props.title}
+                    !props.isActive && 'invisible',
+                    hasSubMenu && 'hidden',
+                )}></div>
+                <div className={clx(
+                    'flex gap-3 items-center',
+                    hasSubMenu && 'flex-col text-[10px]',
+                )}>
+                    {props.icon}
+                    <div className={props.isActive ? 'text-black' : ''}>
+                        {props.title}
+                    </div>
                 </div>
-            </div>
 
-        </Link>
+            </Link>
-    )
+        )
+    }
+    return null
 }
 
 export default SideBarItem