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