{metaTitle}

import { ActionIcon, Badge, Button, Card, Group, LoadingOverlay, Menu, SimpleGrid, Stack, Text, Title, } from '@mantine/core'; import { useListState } from '@mantine/hooks'; import { modals } from '@mantine/modals'; import { IconBox, IconCategory, IconDeviceFloppy, IconDotsVertical, IconFolderFilled, IconPlus, IconStack, IconStarFilled, IconTrash, } 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 { openCreateBoardModal } from '~/components/Manage/Board/create-board.modal'; import { openDeleteBoardModal } from '~/components/Manage/Board/delete-board.modal'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout'; import { getServerAuthSession } from '~/server/auth'; import { sleep } from '~/tools/client/time'; import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations'; import { manageNamespaces } from '~/tools/server/translation-namespaces'; import { api } from '~/utils/api'; const BoardsPage = () => { const context = api.useContext(); const { data: sessionData } = useSession(); const { data } = api.boards.all.useQuery(); const { mutateAsync } = api.user.makeDefaultDashboard.useMutation({ onSettled: () => { void context.boards.invalidate(); }, }); const [deletingDashboards, { append, filter }] = useListState([]); const { t } = useTranslation('manage/boards'); const metaTitle = `${t('metaTitle')} • Homarr`; return ( {metaTitle} {t('pageTitle')} {sessionData?.user.isAdmin && ( )} {data && ( {data.map((board, index) => ( {board.name} } color="pink" variant="light" > {t('cards.badges.fileSystem')} {board.isDefaultForUser && ( } color="yellow" variant="light" > {t('cards.badges.default')} )} {t('cards.statistics.apps')} {board.countApps} {t('cards.statistics.widgets')} {board.countWidgets} {t('cards.statistics.categories')} {board.countCategories} } onClick={async () => { void mutateAsync({ board: board.name, }); }} > {t('cards.menu.setAsDefault')} {sessionData?.user.isAdmin && ( <> { openDeleteBoardModal({ boardName: board.name, onConfirm: async () => { append(board.name); // give user feedback, that it's being deleted await sleep(500); filter((item, _) => item !== board.name); }, }); }} disabled={board.name === 'default'} icon={} color="red" > {t('cards.menu.delete.label')} {board.name === 'default' && ( {t('cards.menu.delete.disabled')} )} )} ))} )} ); }; export const getServerSideProps: GetServerSideProps = async (ctx) => { const session = await getServerAuthSession(ctx); if (!session?.user) { return { notFound: true, }; } const translations = await getServerSideTranslations( manageNamespaces, ctx.locale, ctx.req, ctx.res ); return { props: { ...translations, }, }; }; export default BoardsPage;