✨ Add management layout

package.json

@@ -21,7 +21,8 @@
     "test": "vitest",
     "test:ui": "vitest --ui",
     "test:run": "vitest run",
-    "test:coverage": "vitest run --coverage"
+    "test:coverage": "vitest run --coverage",
+    "postinstall": "prisma generate"
   },
   "dependencies": {
     "@ctrl/deluge": "^4.1.0",

src/components/layout/admin/main-admin.layout.tsx

@@ -0,0 +1,164 @@
+import {
+  Alert,
+  AppShell,
+  Avatar,
+  Box,
+  Flex,
+  Footer,
+  Group,
+  Header,
+  Menu,
+  NavLink,
+  Navbar,
+  Paper,
+  Text,
+  TextInput,
+  ThemeIcon,
+  UnstyledButton,
+} from '@mantine/core';
+import {
+  IconAdjustmentsAlt,
+  IconAlertTriangle,
+  IconBook2,
+  IconBrandDiscord,
+  IconBrandGithub,
+  IconDashboard,
+  IconGitFork,
+  IconHome,
+  IconLogout,
+  IconMailForward,
+  IconQuestionMark,
+  IconSun,
+  IconUser,
+  IconUserSearch,
+} from '@tabler/icons-react';
+import { signOut } from 'next-auth/react';
+import { useTranslation } from 'next-i18next';
+import Image from 'next/image';
+import Link from 'next/link';
+import { ReactNode } from 'react';
+import { usePackageAttributesStore } from '~/tools/client/zustands/usePackageAttributesStore';
+
+import { Logo } from '../Logo';
+
+interface MainLayoutProps {
+  children: ReactNode;
+}
+
+export const MainLayout = ({ children }: MainLayoutProps) => {
+  const { t } = useTranslation();
+  const { attributes } = usePackageAttributesStore();
+  return (
+    <AppShell
+      styles={{
+        root: {
+          background: '#f1f1f1',
+        },
+      }}
+      navbar={
+        <Navbar width={{ base: 300 }}>
+          <Navbar.Section pt="xs" grow>
+            <NavLink
+              icon={
+                <ThemeIcon size="md" variant="light" color="red">
+                  <IconHome size="1rem" />
+                </ThemeIcon>
+              }
+              label="Home"
+              component={Link}
+              href="/admin/users"
+            />
+            <NavLink
+              label="Users"
+              icon={
+                <ThemeIcon size="md" variant="light" color="red">
+                  <IconUser size="1rem" />
+                </ThemeIcon>
+              }
+            >
+              <NavLink
+                icon={<IconAdjustmentsAlt size="1rem" />}
+                label="Manage"
+                component={Link}
+                href="/admin/users"
+              />
+              <NavLink
+                icon={<IconMailForward size="1rem" />}
+                label="Invites"
+                component={Link}
+                href="/admin/users/invites"
+              />
+            </NavLink>
+            <NavLink
+              label="Help"
+              icon={
+                <ThemeIcon size="md" variant="light" color="red">
+                  <IconQuestionMark size="1rem" />
+                </ThemeIcon>
+              }
+            >
+              <NavLink icon={<IconBook2 size="1rem" />} label="Documentation" />
+              <NavLink icon={<IconBrandGithub size="1rem" />} label="Report an issue / bug" />
+              <NavLink icon={<IconBrandDiscord size="1rem" />} label="Ask a question" />
+              <NavLink icon={<IconGitFork size="1rem" />} label="Contribute" />
+            </NavLink>
+          </Navbar.Section>
+        </Navbar>
+      }
+      header={
+        <Header height={60} p="sm" pt="xs">
+          <Group spacing="xl" position="apart" noWrap>
+            <UnstyledButton component={Link} href="/admin">
+              <Logo />
+            </UnstyledButton>
+            <TextInput radius="xl" w={400} placeholder="Search..." variant="filled" />
+
+            <Group noWrap>
+              <UnstyledButton>
+                <Menu>
+                  <Menu.Target>
+                    <Avatar />
+                  </Menu.Target>
+                  <Menu.Dropdown>
+                    <Menu.Item icon={<IconSun size="1rem" />}>Switch theme</Menu.Item>
+                    <Menu.Item icon={<IconUserSearch size="1rem" />}>View Profile</Menu.Item>
+                    <Menu.Item icon={<IconDashboard size="1rem" />}>Default Dashboard</Menu.Item>
+                    <Menu.Divider />
+                    <Menu.Item
+                      icon={<IconLogout size="1rem" />}
+                      color="red"
+                      onClick={() => signOut()}
+                    >
+                      Logout
+                    </Menu.Item>
+                  </Menu.Dropdown>
+                </Menu>
+              </UnstyledButton>
+            </Group>
+          </Group>
+        </Header>
+      }
+      footer={
+        <Footer height={25}>
+          <Group position="apart" px="md">
+            <Flex gap="md" align="center" columnGap={5}>
+              <Image src="/imgs/logo/logo.svg" width={20} height={20} alt="" />
+              <Text fw="bold" size={15}>
+                Homarr
+              </Text>
+              {attributes.packageVersion && (
+                <Text color="dimmed" size={13}>
+                  {attributes.packageVersion}
+                </Text>
+              )}
+            </Flex>
+          </Group>
+        </Footer>
+      }
+    >
+      <Paper p="xl" mih="100%" withBorder>
+        {children}
+      </Paper>
+    </AppShell>
+  );
+};

src/pages/user/settings.tsx

@@ -0,0 +1,12 @@
+import { Title } from "@mantine/core";
+import { MainLayout } from "~/components/layout/admin/main-admin.layout";
+
+const SettingsPage = () => {
+    return (
+        <MainLayout>
+            <Title>Good morning, Manicraft1001</Title>
+        </MainLayout>
+    )
+}
+
+export default SettingsPage;