feat: add management pages (#12)

apps/nextjs/src/app/[locale]/manage/layout.tsx

@@ -0,0 +1,110 @@
+import type { PropsWithChildren } from "react";
+
+import { getScopedI18n } from "@homarr/translation/server";
+import {
+  AppShellMain,
+  IconBook2,
+  IconBrandDiscord,
+  IconBrandDocker,
+  IconBrandGithub,
+  IconGitFork,
+  IconHome,
+  IconInfoSmall,
+  IconLayoutDashboard,
+  IconMailForward,
+  IconQuestionMark,
+  IconTool,
+  IconUser,
+  IconUsers,
+} from "@homarr/ui";
+
+import { MainHeader } from "~/components/layout/header";
+import type { NavigationLink } from "~/components/layout/navigation";
+import { MainNavigation } from "~/components/layout/navigation";
+import { ClientShell } from "~/components/layout/shell";
+
+export default async function ManageLayout({ children }: PropsWithChildren) {
+  const t = await getScopedI18n("management.navbar");
+  const navigationLinks: NavigationLink[] = [
+    {
+      label: t("items.home"),
+      icon: IconHome,
+      href: "/manage",
+    },
+    {
+      icon: IconLayoutDashboard,
+      href: "/manage/boards",
+      label: t("items.boards"),
+    },
+    {
+      icon: IconUser,
+      label: t("items.users.label"),
+      items: [
+        {
+          label: t("items.users.items.manage"),
+          icon: IconUsers,
+          href: "/manage/users",
+        },
+        {
+          label: t("items.users.items.invites"),
+          icon: IconMailForward,
+          href: "/manage/users/invites",
+        },
+      ],
+    },
+    {
+      label: t("items.tools.label"),
+      icon: IconTool,
+      items: [
+        {
+          label: t("items.tools.items.docker"),
+          icon: IconBrandDocker,
+          href: "/manage/tools/docker",
+        },
+      ],
+    },
+    {
+      label: t("items.help.label"),
+      icon: IconQuestionMark,
+      items: [
+        {
+          label: t("items.help.items.documentation"),
+          icon: IconBook2,
+          href: "https://homarr.dev/docs/getting-started/prerequisites",
+          external: true,
+        },
+        {
+          label: t("items.help.items.submitIssue"),
+          icon: IconBrandGithub,
+          href: "https://github.com/ajnart/homarr/issues/new/choose",
+          external: true,
+        },
+        {
+          label: t("items.tools.items.docker"),
+          icon: IconBrandDiscord,
+          href: "https://discord.com/invite/aCsmEV5RgA",
+          external: true,
+        },
+        {
+          label: t("items.help.items.sourceCode"),
+          icon: IconGitFork,
+          href: "https://github.com/ajnart/homarr",
+          external: true,
+        },
+      ],
+    },
+    {
+      label: t("items.about"),
+      icon: IconInfoSmall,
+      href: "/manage/about",
+    },
+  ];
+
+  return (
+    <ClientShell hasNavigation={true}>
+      <MainHeader></MainHeader>
+      <MainNavigation links={navigationLinks}></MainNavigation>
+      <AppShellMain>{children}</AppShellMain>
+    </ClientShell>
+  );
+}

apps/nextjs/src/app/[locale]/manage/page.tsx

@@ -0,0 +1,29 @@
+import { getScopedI18n } from "@homarr/translation/server";
+import { Title } from "@homarr/ui";
+
+export async function generateMetadata() {
+  const t = await getScopedI18n("management");
+  const metaTitle = `${t("metaTitle")} • Homarr`;
+
+  return {
+    title: metaTitle,
+  };
+}
+
+export default async function ManagementPage() {
+  const t = await getScopedI18n("management.title");
+
+  const dateNow = new Date();
+  const timeOfDay =
+    dateNow.getHours() < 10
+      ? "morning"
+      : dateNow.getHours() < 17
+        ? "afternoon"
+        : "evening";
+
+  return (
+    <>
+      <Title>{t(timeOfDay, { username: "admin" })}</Title>
+    </>
+  );
+}

packages/translation/src/lang/en.ts

@@ -58,4 +58,41 @@ export default {
       nothingFound: "Nothing found",
     },
   },
+  management: {
+    metaTitle: "Management",
+    title: {
+      morning: "Good morning, {username}",
+      afternoon: "Good afternoon, {username}",
+      evening: "Good evening, {username}",
+    },
+    navbar: {
+      items: {
+        home: "Home",
+        boards: "Boards",
+        users: {
+          label: "Users",
+          items: {
+            manage: "Manage",
+            invites: "Invites",
+          },
+        },
+        tools: {
+          label: "Tools",
+          items: {
+            docker: "Docker",
+          },
+        },
+        help: {
+          label: "Help",
+          items: {
+            documentation: "Documentation",
+            submitIssue: "Submit an issue",
+            discord: "Community Discord",
+            sourceCode: "Source Code",
+          },
+        },
+        about: "About",
+      },
+    },
+  },
 } as const;