46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
import { h, type FunctionComponent } from 'preact'
|
|
import { Table, Th, type onSortByFunction } from './table.tsx'
|
|
import type { Selectable } from 'kysely'
|
|
|
|
import type { User, Role } from '../../../shared/types.db.ts'
|
|
|
|
const UsersTable: FunctionComponent<{
|
|
users: (Selectable<User> & { roles?: Role[] })[]
|
|
onSortBy: onSortByFunction
|
|
}> = ({ users, onSortBy }) => (
|
|
<Table onSortBy={onSortBy}>
|
|
<thead>
|
|
<tr>
|
|
<Th sort='id'>ID</Th>
|
|
<Th sort>Email</Th>
|
|
<Th>Roles</Th>
|
|
<Th sort='emailVerifiedAt'>Email Verified</Th>
|
|
<Th sort='lastLoginAt'>Last Login</Th>
|
|
<Th sort>Login Attempts</Th>
|
|
<Th sort='lastLoginAttemptAt'>Last Login Attempt</Th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{users?.length ? (
|
|
users.map((user) => (
|
|
<tr key={user.id}>
|
|
<td>{user.id}</td>
|
|
<td>{user.email}</td>
|
|
<td>{user.roles?.map((role) => role.name).join(', ')}</td>
|
|
<td>{user.emailVerifiedAt}</td>
|
|
<td>{user.lastLoginAt}</td>
|
|
<td>{user.loginAttempts}</td>
|
|
<td>{user.lastLoginAttemptAt}</td>
|
|
</tr>
|
|
))
|
|
) : (
|
|
<tr>
|
|
<td colSpan={7}>No users found</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</Table>
|
|
)
|
|
|
|
export default UsersTable
|