89 lines
3.4 KiB
TypeScript
89 lines
3.4 KiB
TypeScript
import { useState, type FC } from 'react'
|
||
import { Link } from 'react-router-dom'
|
||
import { useGetUsers } from './hooks/useUserData'
|
||
import Table from '@/components/Table'
|
||
import PresignedImage from '@/components/PresignedImage'
|
||
import moment from 'moment-jalaali'
|
||
import Button from '@/components/Button'
|
||
import { AddSquare, Edit } from 'iconsax-react'
|
||
import { Paths } from '@/config/Paths'
|
||
|
||
const UsersList: FC = () => {
|
||
const [page, setPage] = useState<number>(1)
|
||
const { data } = useGetUsers(page)
|
||
|
||
return (
|
||
<div className='mt-5'>
|
||
<div className='flex justify-between items-center'>
|
||
<h1 className='text-lg font-light'>کاربران</h1>
|
||
<Link to={Paths.users.create}>
|
||
<Button className='w-fit px-6'>
|
||
<div className='flex gap-1.5'>
|
||
<AddSquare size={18} color='black' />
|
||
<div className='text-[13px] font-light'>ساخت مشتری</div>
|
||
</div>
|
||
</Button>
|
||
</Link>
|
||
</div>
|
||
|
||
<Table
|
||
columns={[
|
||
{
|
||
key: 'avatarUrl',
|
||
title: 'آواتار',
|
||
render: (item) => item.avatarUrl
|
||
? <PresignedImage src={item.avatarUrl} className='w-10 h-10 rounded-full object-cover' alt='' />
|
||
: '-',
|
||
},
|
||
{
|
||
key: 'fullName',
|
||
title: 'نام و نام خانوادگی',
|
||
render: (item) => {
|
||
if (item.firstName)
|
||
return (
|
||
<div>{item.firstName + ' ' + item.lastName}</div>
|
||
)
|
||
else return (
|
||
<div>{item.phone}</div>
|
||
)
|
||
}
|
||
},
|
||
{
|
||
key: 'phone',
|
||
title: 'موبایل'
|
||
},
|
||
{
|
||
key: 'createdAt',
|
||
title: 'تاریخ ثبت نام',
|
||
render: (item) => {
|
||
return (
|
||
<div>{moment(item.createdAt).format('jYYYY-jMM-jDD')}</div>
|
||
)
|
||
}
|
||
},
|
||
{
|
||
key: 'actions',
|
||
title: 'عملیات',
|
||
render: (item) => (
|
||
<Link
|
||
to={`${Paths.users.update}${item.id}`}
|
||
className="inline-block p-1 hover:opacity-70"
|
||
aria-label="ویرایش"
|
||
>
|
||
<Edit size={20} color="#0037FF" />
|
||
</Link>
|
||
),
|
||
},
|
||
]}
|
||
data={data?.data}
|
||
pagination={{
|
||
currentPage: page,
|
||
onPageChange: setPage,
|
||
totalPages: data?.meta?.totalPages as number
|
||
}}
|
||
/>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default UsersList |