From 6613e8e645c8bbeb2190671de8d6524570e6b0e8 Mon Sep 17 00:00:00 2001
From: Matthias Mair <code@mjmair.com>
Date: Tue, 20 Aug 2024 22:13:29 +0200
Subject: [PATCH] Add home tab and action button

---
 .../Index/Settings/AdminCenter/HomePanel.tsx  | 14 ++++++
 .../Index/Settings/AdminCenter/Index.tsx      | 49 ++++++++++++++-----
 2 files changed, 50 insertions(+), 13 deletions(-)
 create mode 100644 src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx

diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx
new file mode 100644
index 0000000000..d0fd1d0cf4
--- /dev/null
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx
@@ -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>
+  );
+}
diff --git a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
index eda07e388a..0e825d6d02 100644
--- a/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
+++ b/src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx
@@ -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>
   );