fix(management): improve homepage (#4260)

apps/nextjs/src/app/[locale]/manage/_components/hero-banner.tsx

@@ -2,6 +2,7 @@ import { Box, Grid, GridCol, Group, Image, Stack, Title } from "@mantine/core";
 
 import { splitToNChunks } from "@homarr/common";
 import { integrationDefs } from "@homarr/definitions";
+import { getScopedI18n } from "@homarr/translation/server";
 
 import classes from "./hero-banner.module.css";
 
@@ -12,19 +13,20 @@ const icons = Object.values(integrationDefs)
 const countIconGroups = 3;
 const animationDurationInSeconds = icons.length;
 const arrayInChunks = splitToNChunks(icons, countIconGroups);
+const gridSpan = 12 / countIconGroups;
 
-export const HeroBanner = () => {
-  const gridSpan = 12 / countIconGroups;
+export const HeroBanner = async () => {
+  const t = await getScopedI18n("management.page.home");
 
   return (
     <Box className={classes.bannerContainer} p={{ base: "lg", md: "3rem" }} bg="dark.6" pos="relative">
       <Stack gap={0}>
         <Title fz={{ base: "h4", md: "h2" }} c="dimmed">
-          Welcome back to your
+          {t("heroBanner.title")}
         </Title>
         <Group gap="xs" wrap="nowrap">
           <Image src="/logo/logo.png" w={{ base: 32, md: 40 }} h={{ base: 32, md: 40 }} />
-          <Title fz={{ base: "h3", md: "h1" }}>Homarr Board</Title>
+          <Title fz={{ base: "h3", md: "h1" }}>{t("heroBanner.subtitle", { app: "Homarr" })}</Title>
         </Group>
       </Stack>
       <Box visibleFrom="md" className={classes.scrollContainer} w={"30%"} top={0} right={0} pos="absolute">

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

@@ -1,25 +1,16 @@
+import type { Metadata } from "next";
 import Link from "next/link";
 import { Card, Group, SimpleGrid, Space, Stack, Text } from "@mantine/core";
 import { IconArrowRight } from "@tabler/icons-react";
 
 import { api } from "@homarr/api/server";
-import { auth } from "@homarr/auth/next";
-import { isProviderEnabled } from "@homarr/auth/server";
 import { getScopedI18n } from "@homarr/translation/server";
 
 import { DynamicBreadcrumb } from "~/components/navigation/dynamic-breadcrumb";
 import { createMetaTitle } from "~/metadata";
 import { HeroBanner } from "./_components/hero-banner";
 
-interface LinkProps {
-  title: string;
-  subtitle: string;
-  count: number;
-  href: string;
-  hidden?: boolean;
-}
-
-export async function generateMetadata() {
+export async function generateMetadata(): Promise<Metadata> {
   const t = await getScopedI18n("management");
 
   return {
@@ -29,78 +20,32 @@ export async function generateMetadata() {
 
 export default async function ManagementPage() {
   const statistics = await api.home.getStats();
-  const session = await auth();
   const t = await getScopedI18n("management.page.home");
 
-  const links: LinkProps[] = [
-    {
-      count: statistics.countBoards,
-      href: "/manage/boards",
-      subtitle: t("statisticLabel.boards"),
-      title: t("statistic.board"),
-    },
-    {
-      count: statistics.countUsers,
-      href: "/manage/users",
-      subtitle: t("statisticLabel.authentication"),
-      title: t("statistic.user"),
-      hidden: !session?.user.permissions.includes("admin"),
-    },
-    {
-      count: statistics.countInvites,
-      href: "/manage/users/invites",
-      subtitle: t("statisticLabel.authentication"),
-      title: t("statistic.invite"),
-      hidden: !isProviderEnabled("credentials") || !session?.user.permissions.includes("admin"),
-    },
-    {
-      count: statistics.countIntegrations,
-      href: "/manage/integrations",
-      subtitle: t("statisticLabel.resources"),
-      title: t("statistic.integration"),
-    },
-    {
-      count: statistics.countApps,
-      href: "/manage/apps",
-      subtitle: t("statisticLabel.resources"),
-      title: t("statistic.app"),
-      hidden: !session?.user,
-    },
-    {
-      count: statistics.countGroups,
-      href: "/manage/users/groups",
-      subtitle: t("statisticLabel.authorization"),
-      title: t("statistic.group"),
-      hidden: !session?.user.permissions.includes("admin"),
-    },
-  ];
   return (
     <>
       <DynamicBreadcrumb />
       <HeroBanner />
       <Space h="md" />
       <SimpleGrid cols={{ xs: 1, sm: 2, md: 3 }}>
-        {links.map(
-          (link) =>
-            !link.hidden && (
-              <Card component={Link} href={link.href} key={link.href} radius="lg">
-                <Group justify="space-between" wrap="nowrap">
-                  <Group wrap="nowrap">
-                    <Text size="2.4rem" fw="bolder">
-                      {link.count}
-                    </Text>
-                    <Stack gap={0}>
-                      <Text c="red" size="xs">
-                        {link.subtitle}
-                      </Text>
-                      <Text fw="bold">{link.title}</Text>
-                    </Stack>
-                  </Group>
-                  <IconArrowRight />
-                </Group>
-              </Card>
-            ),
-        )}
+        {statistics.map((statistic) => (
+          <Card component={Link} href={statistic.path} key={statistic.path} radius="lg">
+            <Group justify="space-between" wrap="nowrap">
+              <Group wrap="nowrap">
+                <Text size="2.4rem" fw="bolder">
+                  {statistic.count}
+                </Text>
+                <Stack gap={0}>
+                  <Text c="red" size="xs">
+                    {t(`statisticLabel.${statistic.subtitleKey}`)}
+                  </Text>
+                  <Text fw="bold">{t(`statistic.${statistic.titleKey}`)}</Text>
+                </Stack>
+              </Group>
+              <IconArrowRight />
+            </Group>
+          </Card>
+        ))}
       </SimpleGrid>
     </>
   );