Add home tab and action button

This commit is contained in:
Matthias Mair 2024-08-20 22:13:29 +02:00
parent a2a53d5d66
commit 6613e8e645
No known key found for this signature in database
GPG Key ID: A593429DDA23B66A
2 changed files with 50 additions and 13 deletions

View File

@ -0,0 +1,14 @@
import { Trans } from '@lingui/macro';
import { Divider, Stack, Title } from '@mantine/core';
export default function HomePanel() {
return (
<Stack gap="xs">
<Title order={5}>
<Trans>Home Status Panel</Trans>
</Title>
<Divider />
</Stack>
);
}

View File

@ -1,6 +1,7 @@
import { Trans, t } from '@lingui/macro'; import { Trans, t } from '@lingui/macro';
import { import {
Divider, Divider,
Flex,
Paper, Paper,
SimpleGrid, SimpleGrid,
Skeleton, Skeleton,
@ -14,6 +15,7 @@ import {
IconDevicesPc, IconDevicesPc,
IconExclamationCircle, IconExclamationCircle,
IconFileUpload, IconFileUpload,
IconHome,
IconList, IconList,
IconListDetails, IconListDetails,
IconPackages, IconPackages,
@ -26,6 +28,7 @@ import {
} from '@tabler/icons-react'; } from '@tabler/icons-react';
import { lazy, useMemo } from 'react'; import { lazy, useMemo } from 'react';
import { ActionButton } from '../../../../components/buttons/ActionButton';
import PermissionDenied from '../../../../components/errors/PermissionDenied'; import PermissionDenied from '../../../../components/errors/PermissionDenied';
import { PlaceholderPill } from '../../../../components/items/Placeholder'; import { PlaceholderPill } from '../../../../components/items/Placeholder';
import { PanelGroup, PanelType } from '../../../../components/nav/PanelGroup'; import { PanelGroup, PanelType } from '../../../../components/nav/PanelGroup';
@ -40,6 +43,8 @@ const ReportTemplatePanel = Loadable(
const LabelTemplatePanel = Loadable(lazy(() => import('./LabelTemplatePanel'))); const LabelTemplatePanel = Loadable(lazy(() => import('./LabelTemplatePanel')));
const HomePanel = Loadable(lazy(() => import('./HomePanel')));
const UserManagementPanel = Loadable( const UserManagementPanel = Loadable(
lazy(() => import('./UserManagementPanel')) lazy(() => import('./UserManagementPanel'))
); );
@ -93,6 +98,12 @@ export default function AdminCenter() {
const adminCenterPanels: PanelType[] = useMemo(() => { const adminCenterPanels: PanelType[] = useMemo(() => {
return [ return [
{
name: 'home',
label: t`Home`,
icon: <IconHome />,
content: <HomePanel />
},
{ {
name: 'user', name: 'user',
label: t`Users`, label: t`Users`,
@ -191,21 +202,33 @@ export default function AdminCenter() {
<Title order={5}> <Title order={5}>
<Trans>Quick Actions</Trans> <Trans>Quick Actions</Trans>
</Title> </Title>
<SimpleGrid cols={3}> <Flex align={'flex-end'}>
<Paper shadow="xs" p="sm" withBorder> <ActionButton
<Text> icon={<IconHome />}
<Trans>Add a new user</Trans> color="blue"
</Text> size="lg"
</Paper> radius="sm"
variant="filled"
tooltip={t`Go to Home`}
onClick={() => console.log('Home')}
/>
<Divider orientation="vertical" mx="md" />
<SimpleGrid cols={3}>
<Paper shadow="xs" p="sm" withBorder>
<Text>
<Trans>Add a new user</Trans>
</Text>
</Paper>
<Paper shadow="xs" p="sm" withBorder> <Paper shadow="xs" p="sm" withBorder>
<PlaceholderPill /> <PlaceholderPill />
</Paper> </Paper>
<Paper shadow="xs" p="sm" withBorder> <Paper shadow="xs" p="sm" withBorder>
<PlaceholderPill /> <PlaceholderPill />
</Paper> </Paper>
</SimpleGrid> </SimpleGrid>
</Flex>
</Stack> </Stack>
); );