danak/danak-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

user

Browse Source
This commit is contained in:
hamid zarghami
2025-02-19 11:02:18 +03:30
parent cfab845ce3
commit 56b4f99e18
7 changed files with 255 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/users/List.tsx
+56 -54
View File
@@ -1,16 +1,21 @@
import { FC } from 'react'
import { FC, useState } from 'react'
import { useTranslation } from 'react-i18next'
import Button from '../../components/Button'
import { Add, Eye } from 'iconsax-react'
import Select from '../../components/Select'
import Input from '../../components/Input'
import Td from '../../components/Td'
import { Link } from 'react-router-dom'
import { Link, useNavigate } from 'react-router-dom'
import { Pages } from '../../config/Pages'
import { useGetUsers } from './hooks/useUserData'
import { UserItemType } from './types/UserTypes'
import PageLoading from '../../components/PageLoading'
const UsersList: FC = () => {
const navigate = useNavigate()
const { t } = useTranslation('global')
const [search, setSearch] = useState<string>('')
const getUsers = useGetUsers(search)
return (
<div className='mt-4'>
@@ -21,6 +26,7 @@ const UsersList: FC = () => {
<div>
<Button
className='px-5'
onClick={() => navigate(Pages.users.create)}
>
<div className='flex gap-2'>
<Add
@@ -34,66 +40,62 @@ const UsersList: FC = () => {
</div>
<div className='flex justify-between items-center mt-12'>
<div className='flex gap-4'>
<Select
className='w-36'
items={[
{ label: 'All', value: 'all' },
{ label: 'Active', value: 'active' },
{ label: 'Inactive', value: 'inactive' },
]}
placeholder={t('service.category')}
/>
</div>
<div>
<Input
variant='search'
placeholder={t('service.search')}
className='bg-white border border-border'
onChangeSearchFinal={(value) => setSearch(value)}
/>
</div>
</div>
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
<table className='w-full text-sm '>
<thead className='thead'>
<tr>
<Td text={t('user.name')} />
<Td text={t('user.title_job')} />
<Td text={t('user.email')} />
<Td text={t('user.role')} />
<Td text={t('detail')} />
<Td text={''} />
</tr>
</thead>
<tbody>
<tr className='tr'>
<Td text='مهرداد مظفری' />
<Td text={'کارشناس فنی'} />
<Td text={'info@example.com'} />
<Td text={'سطح ۱'} />
<Td text={''}>
<Link to={Pages.ticket.detail + '1'}>
<Eye size={20} color='#8C90A3' />
</Link>
</Td>
<Td text={''} />
</tr>
<tr className='tr'>
<Td text='مهرداد مظفری' />
<Td text={'کارشناس فنی'} />
<Td text={'info@example.com'} />
<Td text={'سطح ۱'} />
<Td text={''}>
<Link to={Pages.ticket.detail + '1'}>
<Eye size={20} color='#8C90A3' />
</Link>
</Td>
<Td text={''} />
</tr>
</tbody>
</table>
</div>
{
getUsers.isPending ?
<PageLoading />
:
<div className='relative overflow-x-auto rounded-3xl mt-9 w-full'>
<table className='w-full text-sm '>
<thead className='thead'>
<tr>
<Td text={t('user.name')} />
<Td text={t('user.email')} />
<Td text={t('user.role')} />
<Td text={t('detail')} />
<Td text={''} />
</tr>
</thead>
<tbody>
{
getUsers.data?.data?.users?.map((item: UserItemType) => {
return (
<tr key={item.id} className='tr'>
<Td text={item.firstName + ' ' + item.lastName} />
<Td text={item.email} />
<Td text={''}>
{
item.roles.map((role) => (
<div key={role.id} className='bg-primary w-fit text-white px-2 py-1 rounded-2xl text-xs'>
{role.name}
</div>
))
}
</Td>
<Td text={''}>
<Link to={Pages.ticket.detail + '1'}>
<Eye size={20} color='#8C90A3' />
</Link>
</Td>
<Td text={''} />
</tr>
)
})
}
</tbody>
</table>
</div>
}
</div>
)
}