import { ActionIcon, Autocomplete, Avatar, Badge, Box, Button, Flex, Group, Pagination, Table, Text, Title, } from '@mantine/core'; import { useDebouncedValue } from '@mantine/hooks'; import { IconPlus, IconTrash, IconUserDown, IconUserUp } from '@tabler/icons-react'; import { GetServerSideProps } from 'next'; import { useSession } from 'next-auth/react'; import { useTranslation } from 'next-i18next'; import Head from 'next/head'; import Link from 'next/link'; import { useState } from 'react'; import { openRoleChangeModal } from '~/components/Manage/User/change-user-role.modal'; import { openDeleteUserModal } from '~/components/Manage/User/delete-user.modal'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout'; import { getServerAuthSession } from '~/server/auth'; import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations'; import { manageNamespaces } from '~/tools/server/translation-namespaces'; 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.all.useQuery({ page: activePage, search: debouncedSearch, }); const { data: sessionData } = useSession(); const { t } = useTranslation('manage/users'); const metaTitle = `${t('metaTitle')} • Homarr`; return ( {metaTitle} {t('pageTitle')} {t('text')} user.name).filter((name) => name !== null) as string[]) ?? [] } variant="filled" onChange={(value) => { setNonDebouncedSearch(value); }} /> {data && ( <> {data.users.map((user, index) => ( ))} {debouncedSearch && debouncedSearch.length > 0 && ( )}
{t('table.header.user')}
{user.name} {user.isOwner ? ( Owner ) : user.isAdmin ? ( Admin ) : null} {user.isAdmin ? ( { openRoleChangeModal({ ...user, type: 'demote', }); }} > ) : ( { openRoleChangeModal({ ...user, type: 'promote', }); }} > )} { openDeleteUserModal(user); }} color="red" variant="light" >
{t('searchDoesntMatch')}
{ setActivePage((prev) => prev + 1); }} onPreviousPage={() => { setActivePage((prev) => prev - 1); }} onChange={(targetPage) => { setActivePage(targetPage - 1); }} /> )}
); }; export const getServerSideProps: GetServerSideProps = async (ctx) => { const session = await getServerAuthSession(ctx); if (!session?.user.isAdmin) { return { notFound: true, }; } const translations = await getServerSideTranslations( manageNamespaces, ctx.locale, undefined, undefined ); return { props: { ...translations, }, }; }; export default ManageUsersPage;