{metaTitle}

import { ActionIcon, Badge, Button, Card, Group, LoadingOverlay, Menu, SimpleGrid, Stack, Text, Title, } from '@mantine/core'; import { useListState } from '@mantine/hooks'; import { IconBox, IconCategory, IconDeviceFloppy, IconDotsVertical, IconFolderFilled, IconPlus, IconStack, IconStarFilled, IconTrash, } from '@tabler/icons-react'; import { createServerSideHelpers } from '@trpc/react-query/server'; 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 superjson from 'superjson'; 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 { boardRouter } from '~/server/api/routers/board'; import { getServerAuthSession } from '~/server/auth'; import { prisma } from '~/server/db'; import { sleep } from '~/tools/client/time'; import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations'; import { checkForSessionOrAskForLogin } from '~/tools/server/loginBuilder'; import { manageNamespaces } from '~/tools/server/translation-namespaces'; import { api } from '~/utils/api'; const BoardsPage = () => { const { data: sessionData } = useSession(); const { data, refetch } = api.boards.all.useQuery(undefined, { staleTime: 0, cacheTime: 1000 * 60 * 5, // Cache for 5 minutes }); const { mutateAsync } = api.user.makeDefaultDashboard.useMutation({ onSettled: () => { refetch(); }, }); 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); const result = checkForSessionOrAskForLogin(ctx, session, () => true); if (result) { return result; } const helpers = createServerSideHelpers({ router: boardRouter, ctx: { session, cookies: ctx.req.cookies, prisma: prisma, }, transformer: superjson, }); await helpers.all.prefetch(); const translations = await getServerSideTranslations( manageNamespaces, ctx.locale, ctx.req, ctx.res ); return { props: { ...translations, trpcState: helpers.dehydrate(), }, }; }; export default BoardsPage;