crud user admin

src/config/Pages.ts

@@ -66,6 +66,7 @@ export const Pages = {
   users: {
     list: "/users/list",
     create: "/users/create",
+    detail: "/users/detail/",
     roleList: "/users/roles-all",
     roleCreate: "/users/roles-add",
     groupAdd: "/users/group-add",

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'}>
+                                                    <div className='flex gap-2'>
-                                                        <Eye size={20} color='#8C90A3' />
+                                                        <Link to={Pages.users.detail + item.id}>
-                                                    </Link>
+                                                            <Eye size={20} color='#8C90A3' />
+                                                        </Link>
+
+                                                        <Trash
+                                                            size={20}
+                                                            color='#8C90A3'
+                                                            onClick={() => handleDeleteUser(item.id)}
+                                                        />
+                                                    </div>
                                                 </Td>
                                                 <Td text={''} />
                                             </tr>

src/pages/users/Update.tsx

@@ -0,0 +1,199 @@
+import { FC, useEffect, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import Button from '../../components/Button'
+import { TickCircle } from 'iconsax-react'
+import Input from '../../components/Input'
+import Select from '../../components/Select'
+import UploadBoxDraggble from '../../components/UploadBoxDraggble'
+import { useFormik } from 'formik'
+import { CreateUserType, RoleItemType } from './types/UserTypes'
+import * as Yup from 'yup'
+import { useSingleUpload } from '../service/hooks/useServiceData'
+import { useGetRoles, useGetUserDetail, useUpdateUser } from './hooks/useUserData'
+import { toast } from 'react-toastify'
+import { ErrorType } from '../../helpers/types'
+import { useNavigate, useParams } from 'react-router-dom'
+import { Pages } from '../../config/Pages'
+
+const UpdateUser: FC = () => {
+    const { id } = useParams()
+    const navigate = useNavigate()
+    const { t } = useTranslation('global')
+    const [file, setFile] = useState<File>()
+    const getRoles = useGetRoles('')
+    const singleUpload = useSingleUpload()
+    const updateUser = useUpdateUser()
+    const { data: userDetail } = useGetUserDetail(id || '')
+
+    const handleUpdateUser = (values: CreateUserType) => {
+        updateUser.mutate({ id: id || '', params: values }, {
+            onSuccess: () => {
+                toast.success(t('success'))
+                navigate(Pages.users.list)
+            },
+            onError: (error: ErrorType) => {
+                toast.error(error.response?.data?.error?.message[0])
+            }
+        })
+    }
+
+    const formik = useFormik<CreateUserType>({
+        initialValues: {
+            email: '',
+            firstName: '',
+            lastName: '',
+            password: '',
+            repeatPassword: '',
+            phone: '',
+            profilePic: '',
+            roleId: ''
+        },
+        validationSchema: Yup.object({
+            email: Yup.string().email('Invalid email').required(t('errors.required')),
+            firstName: Yup.string().required(t('errors.required')),
+            lastName: Yup.string().required(t('errors.required')),
+            phone: Yup.string().required(t('errors.required')),
+            roleId: Yup.string().required(t('errors.required')),
+        }),
+        onSubmit: async (values) => {
+            if (values.password === '') {
+                values.password = undefined
+                values.repeatPassword = undefined
+            }
+            if (file) {
+                const formData = new FormData()
+                formData.append('file', file)
+                await singleUpload.mutateAsync(formData, {
+                    onSuccess: (data) => {
+                        values.profilePic = data?.data?.url
+                        handleUpdateUser(values)
+                    },
+                    onError: (error: ErrorType) => {
+                        toast.error(error.response?.data?.error?.message[0])
+                    }
+                })
+            } else {
+                values.profilePic = undefined
+                handleUpdateUser(values)
+            }
+        }
+    })
+
+    useEffect(() => {
+        if (userDetail?.data) {
+            formik.setValues(userDetail?.data?.admin)
+            formik.setFieldValue('roleId', userDetail?.data?.admin?.roles?.[0]?.id)
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [userDetail])
+
+    return (
+        <div className='mt-4'>
+            <div className='flex justify-between items-center'>
+                <div>
+                    {t('service.cateory_services')}
+                </div>
+                <Button
+                    className='w-fit px-8'
+                    onClick={() => formik.handleSubmit()}
+                    isLoading={updateUser.isPending || singleUpload.isPending}
+                >
+                    <div className='flex gap-2'>
+                        <TickCircle
+                            className='size-5'
+                            color='white'
+                        />
+                        <div className='text-sm'>
+                            {t('user.submit_user')}
+                        </div>
+                    </div>
+                </Button>
+            </div>
+
+            <div className='flex gap-6 mt-9'>
+                <div className='flex-1  bg-white py-10 xl:px-10 px-5 rounded-3xl'>
+                    <div>
+                        {t('user.info_user')}
+                    </div>
+
+                    <div className='rowTwoInput mt-8'>
+                        <Input
+                            label={t('user.name')}
+                            {...formik.getFieldProps('firstName')}
+                            error_text={formik.touched.firstName && formik.errors.firstName ? formik.errors.firstName : ''}
+                        />
+                        <Input
+                            label={t('user.family')}
+                            {...formik.getFieldProps('lastName')}
+                            error_text={formik.touched.lastName && formik.errors.lastName ? formik.errors.lastName : ''}
+                        />
+                    </div>
+                    <div className='rowTwoInput mt-8'>
+                        {/* <Input
+                            label={t('user.title_job')}
+                        /> */}
+                        <Select
+                            label={t('user.role')}
+                            placeholder={t('select')}
+                            items={getRoles.data?.data?.roles?.map((item: RoleItemType) => {
+                                return {
+                                    label: item.name,
+                                    value: item.id
+                                }
+                            })}
+                            {...formik.getFieldProps('roleId')}
+                            error_text={formik.touched.roleId && formik.errors.roleId ? formik.errors.roleId : ''}
+                        />
+                    </div>
+
+                    <div className='rowTwoInput mt-8'>
+                        <Input
+                            label={t('user.email')}
+                            {...formik.getFieldProps('email')}
+                            error_text={formik.touched.email && formik.errors.email ? formik.errors.email : ''}
+                        />
+                        <Input
+                            label={t('user.phone_number')}
+                            {...formik.getFieldProps('phone')}
+                            error_text={formik.touched.phone && formik.errors.phone ? formik.errors.phone : ''}
+                        />
+                    </div>
+
+                </div>
+
+                <div className='bg-white p-8 w-sidebar hidden xl:block rounded-3xl overflow-hidden relative'>
+                    <Input
+                        label={t('user.password')}
+                        {...formik.getFieldProps('password')}
+                        error_text={formik.touched.password && formik.errors.password ? formik.errors.password : ''}
+                        type='password'
+                    />
+
+                    <div className='mt-8'>
+                        <Input
+                            label={t('user.reapeat_password')}
+                            {...formik.getFieldProps('repeatPassword')}
+                            error_text={formik.touched.repeatPassword && formik.errors.repeatPassword ? formik.errors.repeatPassword : ''}
+                            type='password'
+                        />
+                    </div>
+
+                    <div className='mt-8'>
+                        <div className='text-sm'>
+                            {t('user.image')}
+                        </div>
+                        <div className='mt-2'>
+                            <UploadBoxDraggble
+                                label={t('user.image')}
+                                onChange={(file) => setFile(file[0])}
+                            />
+                        </div>
+                    </div>
+                </div>
+            </div>
+
+        </div>
+    )
+}
+
+export default UpdateUser

src/pages/users/hooks/useUserData.ts

@@ -39,6 +39,26 @@ export const useGetUsers = (search: string, permission?: string) => {
   });
 };
 
+export const useGetUserDetail = (id: string) => {
+  return useQuery({
+    queryKey: ["user-detail", id],
+    queryFn: () => api.getUserDetail(id),
+  });
+};
+
+export const useUpdateUser = () => {
+  return useMutation({
+    mutationFn: ({ id, params }: { id: string; params: CreateUserType }) =>
+      api.updateUser(id, params),
+  });
+};
+
+export const useDeleteUser = () => {
+  return useMutation({
+    mutationFn: (id: string) => api.deleteUser(id),
+  });
+};
+
 export const useCreateGroup = () => {
   return useMutation({
     mutationFn: (variables: CreateGroupType) => api.createGroup(variables),

src/pages/users/service/UserService.ts

@@ -32,6 +32,21 @@ export const getUsers = async (search: string, permission?: string) => {
   return data;
 };
 
+export const getUserDetail = async (id: string) => {
+  const { data } = await axios.get(`/users/admins/${id}`);
+  return data;
+};
+
+export const updateUser = async (id: string, params: CreateUserType) => {
+  const { data } = await axios.patch(`/users/admins/${id}`, params);
+  return data;
+};
+
+export const deleteUser = async (id: string) => {
+  const { data } = await axios.delete(`/users/admins/${id}`);
+  return data;
+};
+
 export const createGroup = async (params: CreateGroupType) => {
   const { data } = await axios.post(`/users/user-group`, params);
   return data;

src/pages/users/types/UserTypes.ts

@@ -16,8 +16,8 @@ export type CreateUserType = {
   phone: string;
   firstName: string;
   lastName: string;
-  password: string;
+  password?: string;
-  repeatPassword: string;
+  repeatPassword?: string;
   email: string;
   roleId: string;
   profilePic?: string;

src/router/Main.tsx

@@ -60,6 +60,7 @@ import UpdateCustomer from '../pages/customer/Update'
 import UpdateBlog from '../pages/blog/Update'
 import Update from '../pages/annoncement/Update'
 import UpdateDiscount from '../pages/discounts/UpdateDiscount'
+import UpdateUser from '../pages/users/Update'
 const MainRouter: FC = () => {
 
     const { hasSubMenu } = useSharedStore()
@@ -123,6 +124,7 @@ const MainRouter: FC = () => {
                             <Route path={Pages.messages.detail + ':id'} element={<MessageDetail />} />
                             <Route path={Pages.users.list} element={<UsersList />} />
                             <Route path={Pages.users.create} element={<CreateUser />} />
+                            <Route path={Pages.users.detail + ':id'} element={<UpdateUser />} />
                             <Route path={Pages.users.roleList} element={<RolesList />} />
                             <Route path={Pages.users.roleCreate} element={<RoleCreate />} />
                             <Route path={Pages.users.groupAdd} element={<GroupCreate />} />