feat: whyrating - initial project from turbostarter boilerplate

apps/web/src/app/[locale]/admin/page.tsx

@@ -0,0 +1,93 @@
+import * as z from "zod";
+
+import { handle } from "@turbostarter/api/utils";
+import { getTranslation } from "@turbostarter/i18n/server";
+import { cn } from "@turbostarter/ui";
+import { buttonVariants } from "@turbostarter/ui-web/button";
+import {
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@turbostarter/ui-web/card";
+import { Icons } from "@turbostarter/ui-web/icons";
+
+import { pathsConfig } from "~/config/paths";
+import { api } from "~/lib/api/server";
+import { getMetadata } from "~/lib/metadata";
+import {
+  DashboardHeader,
+  DashboardHeaderDescription,
+  DashboardHeaderTitle,
+} from "~/modules/common/layout/dashboard/header";
+import { TurboLink } from "~/modules/common/turbo-link";
+
+export const generateMetadata = getMetadata({
+  title: "admin:home.header.title",
+  description: "admin:home.header.description",
+});
+
+export default async function AdminPage() {
+  const { t, i18n } = await getTranslation({ ns: ["common", "admin"] });
+
+  const adminSummarySchema = z.object({
+    users: z.number(),
+    organizations: z.number(),
+    customers: z.number(),
+  });
+
+  const data = await handle(api.admin.summary.$get, {
+    schema: adminSummarySchema,
+  })();
+
+  const cards = ["users", "organizations", "customers"] as const;
+
+  return (
+    <>
+      <DashboardHeader>
+        <div>
+          <DashboardHeaderTitle>
+            {t("admin:home.header.title")}
+          </DashboardHeaderTitle>
+          <DashboardHeaderDescription>
+            {t("admin:home.header.description")}
+          </DashboardHeaderDescription>
+        </div>
+      </DashboardHeader>
+
+      <nav className="@container/stats w-full">
+        <ul className="grid grid-cols-1 gap-4 @lg/stats:grid-cols-2 @2xl/stats:grid-cols-3">
+          {cards.map((key) => (
+            <li key={key}>
+              <TurboLink
+                href={pathsConfig.admin[key].index}
+                className={cn(
+                  buttonVariants({ variant: "outline" }),
+                  "text-muted-foreground h-full w-full flex-col items-start justify-between gap-3 p-0",
+                )}
+              >
+                <CardHeader className="w-full">
+                  <div className="flex w-full items-center justify-between gap-3">
+                    <CardTitle className="text-foreground truncate">
+                      {t(`common:${key}`)}
+                    </CardTitle>
+                    <Icons.ChevronRight className="mt-0.5 size-4" />
+                  </div>
+                  <CardDescription className="whitespace-normal">
+                    {t(`home.summary.${key}`)}
+                  </CardDescription>
+                </CardHeader>
+
+                <CardFooter>
+                  <span className="text-foreground font-mono text-4xl font-bold tracking-tight">
+                    {new Intl.NumberFormat(i18n.language).format(data[key])}
+                  </span>
+                </CardFooter>
+              </TurboLink>
+            </li>
+          ))}
+        </ul>
+      </nav>
+    </>
+  );
+}