chore: add refer logic of tickets for super admin

src/pages/ticket/Detail.tsx

@@ -17,6 +17,8 @@ import { ErrorType } from '../../helpers/types'
 import { clx } from '../../helpers/utils'
 import { Pages } from '../../config/Pages'
 import { useMultiUpload } from '../service/hooks/useServiceData'
+import { useGetProfile } from '../profile/hooks/useProfileData'
+import ReferTicket from './components/ReferTicket'
 
 const TicketDetail: FC = () => {
 
@@ -29,6 +31,7 @@ const TicketDetail: FC = () => {
     const multiUpload = useMultiUpload()
     const [isResetFiles, setIsResetFiles] = useState<boolean>(false)
     const closeTicket = useCloseTicket()
+    const getProfile = useGetProfile()
 
     const formik = useFormik<AddMessageTicketType>({
         initialValues: {
@@ -89,7 +92,7 @@ const TicketDetail: FC = () => {
         <div className='mt-4'>
             <div className='flex gap-1'>
                 <div>{t('ticket.ticket_number')}</div>
-                <div>12312</div>
+                <div>{getMessages.data?.data?.ticket?.numericId}</div>
             </div>
             {
                 getMessages.isPending ?
@@ -302,6 +305,11 @@ const TicketDetail: FC = () => {
                                     </div>
                                 </div>
                             </div>
+
+                            {
+                                getProfile.data?.data?.user?.roles[0]?.name === 'super_admin' &&
+                                <ReferTicket refetch={getMessages.refetch} />
+                            }
                         </div>
                     </div>
             }

src/pages/ticket/components/ReferTicket.tsx

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

src/pages/ticket/hooks/useTicketData.ts

@@ -50,3 +50,10 @@ export const useGetCategories = () => {
     queryFn: () => api.getCategories(),
   });
 };
+
+export const useReferTicket = () => {
+  return useMutation({
+    mutationFn: (variables: { id: string; userId: string }) =>
+      api.referTicket(variables.id, variables.userId),
+  });
+};

src/pages/ticket/service/TicketServiec.ts

@@ -37,3 +37,10 @@ export const getCategories = async () => {
   const { data } = await axios.get(`/tickets/categories`);
   return data;
 };
+
+export const referTicket = async (id: string, userId: string) => {
+  const { data } = await axios.post(`/tickets/${id}/refer`, {
+    adminId: userId,
+  });
+  return data;
+};