[PUI] Add startpage to admin

src/frontend/src/components/nav/PanelGroup.tsx

@@ -46,14 +46,16 @@ export type PanelProps = {
   selectedPanel?: string;
   onPanelChange?: (panel: string) => void;
   collapsible?: boolean;
+  ml?: string;
 };
 
 function BasePanelGroup({
   pageKey,
   panels,
   onPanelChange,
   selectedPanel,
-  collapsible = true
+  collapsible = true,
+  ml = ''
 }: Readonly<PanelProps>): ReactNode {
   const location = useLocation();
   const navigate = useNavigate();
@@ -117,7 +119,7 @@ function BasePanelGroup({
 
   return (
     <Boundary label={`PanelGroup-${pageKey}`}>
-      <Paper p="sm" radius="xs" shadow="xs">
+      <Paper p="sm" radius="xs" shadow="xs" ml={ml}>
         <Tabs value={panel} orientation="vertical" keepMounted={false}>
           <Tabs.List justify="left">
             {panels.map(

src/frontend/src/components/settings/QuickAction.tsx

@@ -0,0 +1,110 @@
+import { Trans, t } from '@lingui/macro';
+import { Carousel } from '@mantine/carousel';
+import {
+  Button,
+  Divider,
+  Flex,
+  Group,
+  Paper,
+  Stack,
+  Text,
+  Title
+} from '@mantine/core';
+import { IconHome } from '@tabler/icons-react';
+
+import { ActionButton } from '../buttons/ActionButton';
+
+interface ActionItem {
+  id: string;
+  title: string;
+  description: string;
+  action: () => void;
+}
+
+function ActionCarousel({ items }: { items: ActionItem[] }) {
+  const slides = items.map((image) => (
+    <Carousel.Slide key={image.id}>
+      <Paper shadow="xs" p="sm" withBorder>
+        <Group>
+          <Stack>
+            <Text>
+              <strong>{image.title}</strong>
+              <br />
+              {image.description}
+            </Text>
+          </Stack>
+          <Button size="sm" variant="light" onClick={image.action}>
+            <Trans>Act</Trans>
+          </Button>
+        </Group>
+      </Paper>
+    </Carousel.Slide>
+  ));
+
+  return (
+    <Carousel
+      height={80}
+      slideSize="40%"
+      align="start"
+      slideGap="md"
+      controlsOffset="xs"
+      controlSize={28}
+      dragFree
+    >
+      {slides}
+    </Carousel>
+  );
+}
+
+export const QuickAction = ({
+  navigate,
+  ml = 'sm'
+}: {
+  navigate?: any;
+  ml?: string;
+}) => {
+  const items = [
+    {
+      id: '1',
+      title: 'Add a new group',
+      description: 'Create a new group to manage your users',
+      action: () => console.log('Add a new group')
+    },
+    {
+      id: '2',
+      title: 'Add a new user',
+      description: 'Create a new user to manage your groups',
+      action: () => console.log('Add a new user')
+    },
+    {
+      id: '3',
+      title: 'Add a new role',
+      description: 'Create a new role to manage your permissions',
+      action: () => console.log('Add a new role')
+    }
+  ];
+  return (
+    <Stack gap={'xs'} ml={ml}>
+      <Title order={5}>
+        <Trans>Quick Actions</Trans>
+      </Title>
+      <Flex align={'flex-end'}>
+        {navigate ? (
+          <>
+            <ActionButton
+              icon={<IconHome />}
+              color="blue"
+              size="lg"
+              radius="sm"
+              variant="filled"
+              tooltip={t`Go to Home`}
+              onClick={() => navigate('home')}
+            />
+            <Divider orientation="vertical" mx="md" />
+          </>
+        ) : null}
+        <ActionCarousel items={items} />
+      </Flex>
+    </Stack>
+  );
+};

src/frontend/src/pages/Index/Settings/AdminCenter/HomePanel.tsx

@@ -0,0 +1,37 @@
+import { Trans, t } from '@lingui/macro';
+import { Alert, Button, Stack, Title } from '@mantine/core';
+import { IconBrandGithub } from '@tabler/icons-react';
+
+import { QuickAction } from '../../../../components/settings/QuickAction';
+
+export default function HomePanel(): JSX.Element {
+  return (
+    <Stack gap="xs">
+      <Alert color="blue" title={t`This is new!`}>
+        <Trans>
+          This is a new feature in PUI previously not available. It provides a
+          centralized location for all administration functionality and is meant
+          to replace Djangos admin view.
+        </Trans>
+        <br />
+        <Trans>Please raise issues for any missing admin functionality.</Trans>
+        <br />
+        <Button
+          color="green"
+          top={'https://github.com/inventree/InvenTree/issues/new'}
+        >
+          <IconBrandGithub /> <Trans>Open an issue</Trans>
+        </Button>
+      </Alert>
+      <QuickAction ml="" />
+      <Title order={5}>
+        <Trans>System status</Trans>
+      </Title>
+      TBD
+      <Title order={5}>
+        <Trans>Security recommodations</Trans>
+      </Title>
+      TBD
+    </Stack>
+  );
+}

src/frontend/src/pages/Index/Settings/AdminCenter/Index.tsx

@@ -1,19 +1,12 @@
-import { Trans, t } from '@lingui/macro';
-import {
-  Divider,
-  Paper,
-  SimpleGrid,
-  Skeleton,
-  Stack,
-  Text,
-  Title
-} from '@mantine/core';
+import { t } from '@lingui/macro';
+import { Divider, Skeleton, Stack } from '@mantine/core';
 import {
   IconCoins,
   IconCpu,
   IconDevicesPc,
   IconExclamationCircle,
   IconFileUpload,
+  IconHome,
   IconList,
   IconListDetails,
   IconPackages,
@@ -25,11 +18,12 @@ import {
   IconUsersGroup
 } from '@tabler/icons-react';
 import { lazy, useMemo } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 import PermissionDenied from '../../../../components/errors/PermissionDenied';
-import { PlaceholderPill } from '../../../../components/items/Placeholder';
 import { PanelGroup, PanelType } from '../../../../components/nav/PanelGroup';
 import { SettingsHeader } from '../../../../components/nav/SettingsHeader';
+import { QuickAction } from '../../../../components/settings/QuickAction';
 import { GlobalSettingList } from '../../../../components/settings/SettingList';
 import { Loadable } from '../../../../functions/loading';
 import { useUserState } from '../../../../states/UserState';
@@ -40,6 +34,8 @@ const ReportTemplatePanel = Loadable(
 
 const LabelTemplatePanel = Loadable(lazy(() => import('./LabelTemplatePanel')));
 
+const HomePanel = Loadable(lazy(() => import('./HomePanel')));
+
 const UserManagementPanel = Loadable(
   lazy(() => import('./UserManagementPanel'))
 );
@@ -94,9 +90,25 @@ const LocationTypesTable = Loadable(
 
 export default function AdminCenter() {
   const user = useUserState();
+  const navigate = useNavigate();
+  const location = useLocation();
+
+  const panel = useMemo(() => {
+    return location.pathname.replace('/settings/admin/', '');
+  }, [location.pathname]);
+  const showQuickAction: boolean = useMemo(() => {
+    return panel !== 'home';
+  }, [panel]);
 
   const adminCenterPanels: PanelType[] = useMemo(() => {
     return [
+      {
+        name: 'home',
+        label: t`Home`,
+        icon: <IconHome />,
+        content: <HomePanel />,
+        showHeadline: false
+      },
       {
         name: 'user',
         label: t`Users`,
@@ -196,29 +208,6 @@ export default function AdminCenter() {
     ];
   }, []);
 
-  const QuickAction = () => (
-    <Stack gap={'xs'} ml={'sm'}>
-      <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>
-
-        <Paper shadow="xs" p="sm" withBorder>
-          <PlaceholderPill />
-        </Paper>
-
-        <Paper shadow="xs" p="sm" withBorder>
-          <PlaceholderPill />
-        </Paper>
-      </SimpleGrid>
-    </Stack>
-  );
-
   if (!user.isLoggedIn()) {
     return <Skeleton />;
   }
@@ -233,11 +222,12 @@ export default function AdminCenter() {
             switch_link="/settings/system"
             switch_text="System Settings"
           />
-          <QuickAction />
+          {showQuickAction ? <QuickAction navigate={navigate} /> : null}
           <PanelGroup
             pageKey="admin-center"
             panels={adminCenterPanels}
             collapsible={true}
+            ml={'sm'}
           />
         </Stack>
       ) : (