crud user admin

src/pages/users/List.tsx

@@ -1,14 +1,16 @@
 import { FC, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from '../../components/Button'
-import { Add, Eye } from 'iconsax-react'
+import { Add, Eye, Trash } from 'iconsax-react'
 import Input from '../../components/Input'
 import Td from '../../components/Td'
 import { Link, useNavigate } from 'react-router-dom'
 import { Pages } from '../../config/Pages'
-import { useGetUsers } from './hooks/useUserData'
+import { useDeleteUser, useGetUsers } from './hooks/useUserData'
 import { UserItemType } from './types/UserTypes'
 import PageLoading from '../../components/PageLoading'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
 
 const UsersList: FC = () => {
 
@@ -16,6 +18,19 @@ const UsersList: FC = () => {
     const { t } = useTranslation('global')
     const [search, setSearch] = useState<string>('')
     const getUsers = useGetUsers(search)
+    const deleteUser = useDeleteUser()
+
+    const handleDeleteUser = (id: string) => {
+        deleteUser.mutate(id, {
+            onSuccess: () => {
+                toast.success(t('success'))
+                getUsers.refetch()
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error?.message[0])
+            }
+        })
+    }
 
     return (
         <div className='mt-4'>
@@ -83,9 +98,17 @@ const UsersList: FC = () => {
                                                     }
                                                 </Td>
                                                 <Td text={''}>
-                                                    <Link to={Pages.ticket.detail + '1'}>
-                                                        <Eye size={20} color='#8C90A3' />
-                                                    </Link>
+                                                    <div className='flex gap-2'>
+                                                        <Link to={Pages.users.detail + item.id}>
+                                                            <Eye size={20} color='#8C90A3' />
+                                                        </Link>
+
+                                                        <Trash
+                                                            size={20}
+                                                            color='#8C90A3'
+                                                            onClick={() => handleDeleteUser(item.id)}
+                                                        />
+                                                    </div>
                                                 </Td>
                                                 <Td text={''} />
                                             </tr>