chore: add refer logic of tickets for super admin

.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.117:4000'
+# VITE_BASE_URL = 'https://api.danakcorp.com'
+VITE_BASE_URL = 'http://192.168.1.117:4000'

src/langs/fa.json

@@ -263,7 +263,8 @@
     "low": "پایین",
     "medium": "متوسط",
     "high": "بالا",
-    "service": "سرویس"
+    "service": "سرویس",
+    "refer_ticket": "ارجاع تیکت"
   },
   "active": "فعال",
   "inactive": "غیرفعال",

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;
+};

src/pages/users/hooks/useUserData.ts

@@ -32,10 +32,10 @@ export const useCreateUser = () => {
   });
 };
 
-export const useGetUsers = (search: string) => {
+export const useGetUsers = (search: string, permission?: string) => {
   return useQuery({
-    queryKey: ["users", search],
-    queryFn: () => api.getUsers(search),
+    queryKey: ["users", search, permission],
+    queryFn: () => api.getUsers(search, permission),
   });
 };
 

src/pages/users/service/UserService.ts

@@ -25,8 +25,10 @@ export const createUser = async (params: CreateUserType) => {
   return data;
 };
 
-export const getUsers = async (search: string) => {
-  const { data } = await axios.get(`/users/admins?q=${search}`);
+export const getUsers = async (search: string, permission?: string) => {
+  let query = `?q=${search}`;
+  if (permission) query += `&permission=${permission}`;
+  const { data } = await axios.get(`/users/admins${query}`);
   return data;
 };