2023-07-29 15:32:17 +02:00
|
|
|
import {
|
|
|
|
|
Box,
|
|
|
|
|
Card,
|
|
|
|
|
Group,
|
|
|
|
|
SimpleGrid,
|
|
|
|
|
Stack,
|
|
|
|
|
Text,
|
|
|
|
|
Title,
|
|
|
|
|
UnstyledButton,
|
|
|
|
|
createStyles,
|
|
|
|
|
} from '@mantine/core';
|
|
|
|
|
import { IconArrowRight } from '@tabler/icons-react';
|
2023-07-29 23:05:47 +02:00
|
|
|
import { useSession } from 'next-auth/react';
|
2023-07-30 15:15:14 +02:00
|
|
|
import Head from 'next/head';
|
2023-07-29 15:32:17 +02:00
|
|
|
import Image from 'next/image';
|
2023-07-30 15:33:43 +02:00
|
|
|
import Link from 'next/link';
|
2023-07-29 15:32:17 +02:00
|
|
|
import { MainLayout } from '~/components/layout/admin/main-admin.layout';
|
2023-07-29 21:58:36 +02:00
|
|
|
import { useScreenLargerThan } from '~/hooks/useScreenLargerThan';
|
2023-07-29 14:49:44 +02:00
|
|
|
|
2023-07-29 14:59:11 +02:00
|
|
|
const ManagementPage = () => {
|
2023-07-29 15:32:17 +02:00
|
|
|
const { classes } = useStyles();
|
2023-07-29 21:58:36 +02:00
|
|
|
const largerThanMd = useScreenLargerThan('md');
|
2023-07-29 23:05:47 +02:00
|
|
|
const { data: sessionData } = useSession();
|
|
|
|
|
|
2023-07-29 15:32:17 +02:00
|
|
|
return (
|
|
|
|
|
<MainLayout>
|
2023-07-30 15:15:14 +02:00
|
|
|
<Head>
|
|
|
|
|
<title>Manage • Homarr</title>
|
|
|
|
|
</Head>
|
2023-07-29 21:58:36 +02:00
|
|
|
<Box className={classes.box} w="100%" mih={150} p="xl" mb={50}>
|
|
|
|
|
<Group position="apart" noWrap>
|
2023-07-29 15:32:17 +02:00
|
|
|
<Stack spacing={15}>
|
|
|
|
|
<Title className={classes.boxTitle} order={2}>
|
2023-07-29 23:05:47 +02:00
|
|
|
Welcome back, {sessionData?.user?.name ?? 'Anonymous'}
|
2023-07-29 15:32:17 +02:00
|
|
|
</Title>
|
2023-07-29 21:58:36 +02:00
|
|
|
<Text>Welcome to Your Application Hub. Organize, Optimize, and Conquer!</Text>
|
2023-07-29 15:32:17 +02:00
|
|
|
</Stack>
|
|
|
|
|
<Box bg="blue" w={100} h="100%" pos="relative">
|
2023-07-29 21:58:36 +02:00
|
|
|
<Box
|
|
|
|
|
pos="absolute"
|
|
|
|
|
bottom={largerThanMd ? -100 : undefined}
|
|
|
|
|
top={largerThanMd ? undefined : -120}
|
|
|
|
|
right={largerThanMd ? 0 : -40}
|
|
|
|
|
>
|
2023-07-29 23:05:47 +02:00
|
|
|
<Image
|
|
|
|
|
src="/imgs/logo/logo.png"
|
|
|
|
|
width={largerThanMd ? 200 : 100}
|
|
|
|
|
height={largerThanMd ? 150 : 60}
|
|
|
|
|
alt=""
|
|
|
|
|
/>
|
2023-07-29 15:32:17 +02:00
|
|
|
</Box>
|
|
|
|
|
</Box>
|
|
|
|
|
</Group>
|
|
|
|
|
</Box>
|
|
|
|
|
|
|
|
|
|
<Text weight="bold" mb="md">
|
|
|
|
|
Quick actions
|
|
|
|
|
</Text>
|
|
|
|
|
<SimpleGrid
|
|
|
|
|
cols={3}
|
|
|
|
|
spacing="xl"
|
|
|
|
|
breakpoints={[
|
|
|
|
|
{ maxWidth: '62rem', cols: 2, spacing: 'lg' },
|
|
|
|
|
{ maxWidth: '48rem', cols: 1, spacing: 'md' },
|
|
|
|
|
]}
|
|
|
|
|
>
|
2023-07-31 21:42:03 +02:00
|
|
|
<UnstyledButton component={Link} href="/manage/boards">
|
2023-07-29 15:32:17 +02:00
|
|
|
<Card className={classes.quickActionCard}>
|
|
|
|
|
<Group spacing={30} noWrap>
|
|
|
|
|
<Stack spacing={0}>
|
2023-07-30 22:44:18 +02:00
|
|
|
<Text weight="bold">Your boards</Text>
|
|
|
|
|
<Text>Show a list of all your dashboards</Text>
|
2023-07-29 15:32:17 +02:00
|
|
|
</Stack>
|
|
|
|
|
<IconArrowRight />
|
|
|
|
|
</Group>
|
|
|
|
|
</Card>
|
|
|
|
|
</UnstyledButton>
|
2023-07-31 21:42:03 +02:00
|
|
|
<UnstyledButton component={Link} href="/manage/users/invites">
|
2023-07-29 15:32:17 +02:00
|
|
|
<Card className={classes.quickActionCard}>
|
|
|
|
|
<Group spacing={30} noWrap>
|
|
|
|
|
<Stack spacing={0}>
|
2023-07-30 22:44:18 +02:00
|
|
|
<Text weight="bold">Invite a new user</Text>
|
|
|
|
|
<Text>Create and send an invitation for registration</Text>
|
2023-07-29 15:32:17 +02:00
|
|
|
</Stack>
|
|
|
|
|
<IconArrowRight />
|
|
|
|
|
</Group>
|
|
|
|
|
</Card>
|
|
|
|
|
</UnstyledButton>
|
2023-07-30 22:57:14 +02:00
|
|
|
<UnstyledButton component={Link} href="/user/preferences">
|
2023-07-29 15:32:17 +02:00
|
|
|
<Card className={classes.quickActionCard}>
|
|
|
|
|
<Group spacing={30} noWrap>
|
|
|
|
|
<Stack spacing={0}>
|
2023-07-30 22:44:18 +02:00
|
|
|
<Text weight="bold">Your preferences</Text>
|
|
|
|
|
<Text>Adjust language, colors and more</Text>
|
2023-07-29 15:32:17 +02:00
|
|
|
</Stack>
|
|
|
|
|
<IconArrowRight />
|
|
|
|
|
</Group>
|
|
|
|
|
</Card>
|
|
|
|
|
</UnstyledButton>
|
2023-07-30 22:44:18 +02:00
|
|
|
<UnstyledButton component={Link} href="/manage/users">
|
2023-07-29 15:32:17 +02:00
|
|
|
<Card className={classes.quickActionCard}>
|
|
|
|
|
<Group spacing={30} noWrap>
|
|
|
|
|
<Stack spacing={0}>
|
2023-07-30 22:44:18 +02:00
|
|
|
<Text weight="bold">Manage users</Text>
|
|
|
|
|
<Text>Delete and manage your users</Text>
|
2023-07-29 15:32:17 +02:00
|
|
|
</Stack>
|
|
|
|
|
<IconArrowRight />
|
|
|
|
|
</Group>
|
|
|
|
|
</Card>
|
|
|
|
|
</UnstyledButton>
|
|
|
|
|
</SimpleGrid>
|
|
|
|
|
</MainLayout>
|
|
|
|
|
);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default ManagementPage;
|
|
|
|
|
|
|
|
|
|
const useStyles = createStyles((theme) => ({
|
|
|
|
|
box: {
|
|
|
|
|
borderRadius: theme.radius.md,
|
2023-07-29 16:19:57 +02:00
|
|
|
backgroundColor:
|
|
|
|
|
theme.colorScheme === 'dark' ? theme.fn.rgba(theme.colors.red[8], 0.1) : theme.colors.red[1],
|
2023-07-29 15:32:17 +02:00
|
|
|
},
|
|
|
|
|
boxTitle: {
|
|
|
|
|
color: theme.colors.red[6],
|
|
|
|
|
},
|
|
|
|
|
quickActionCard: {
|
2023-07-29 16:19:57 +02:00
|
|
|
height: '100%',
|
|
|
|
|
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[6] : theme.colors.gray[2],
|
2023-07-29 15:32:17 +02:00
|
|
|
'&:hover': {
|
2023-07-29 16:19:57 +02:00
|
|
|
backgroundColor: theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[3],
|
2023-07-29 15:32:17 +02:00
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
}));
|
