import { ActionIcon, Autocomplete, Avatar, Box, Button, Flex, Group, Pagination, Table, Text, Title, } from '@mantine/core'; import { useDebouncedValue } from '@mantine/hooks'; import { openContextModal } from '@mantine/modals'; import { IconPlus, IconTrash } from '@tabler/icons-react'; import Head from 'next/head'; import Link from 'next/link'; import { useState } from 'react'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout'; import { api } from '~/utils/api'; const ManageUsersPage = () => { const [activePage, setActivePage] = useState(0); const [nonDebouncedSearch, setNonDebouncedSearch] = useState(''); const [debouncedSearch] = useDebouncedValue(nonDebouncedSearch, 200); const { data } = api.user.getAll.useQuery({ page: activePage, search: debouncedSearch, }); return ( Users • Homarr Manage users Using users, you have granular control who can access, edit or delete resources on your Homarr instance. user.name).filter((name) => name !== null) as string[]) ?? [] } variant="filled" onChange={(value) => { setNonDebouncedSearch(value); }} /> {data && ( <> {data.users.map((user, index) => ( ))} {debouncedSearch && debouncedSearch.length > 0 && ( )}
User
{user.name} { openContextModal({ modal: 'deleteUserModal', title: Delete user {user.name}, innerProps: { userId: user.id, username: user.name ?? '', }, }); }} color="red" variant="light" >
Your search does not match any entries. Please adjust your filter.
{ setActivePage((prev) => prev + 1); }} onPreviousPage={() => { setActivePage((prev) => prev - 1); }} onChange={(targetPage) => { setActivePage(targetPage - 1); }} /> )} ); }; export default ManageUsersPage;