feat(saas): initialize dashboard page + added Stats Card

starterkits/saas/src/app/(app)/_components/page-shell.tsx

@@ -16,10 +16,10 @@ export function AppPageShell({
     const Container = as ?? "main";
 
     return (
-        <Container className="w-full space-y-8 pl-8">
+        <div className="w-full space-y-8 pl-8">
             <PageHeader title={title} description={description} />
-            <div className="space-y-8 pb-8">{children}</div>
-        </Container>
+            <Container className="space-y-8 pb-8">{children}</Container>
+        </div>
     );
 }
 

starterkits/saas/src/app/(app)/admin/dashboard/_components/stats-card.tsx

@@ -0,0 +1,24 @@
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import type { IconProps } from "@/components/ui/icons";
+
+type StatsCardProps = {
+    title: string;
+    value: string;
+    subText: string;
+    Icon: React.ComponentType<IconProps>;
+};
+
+export function StatsCard({ title, value, Icon, subText }: StatsCardProps) {
+    return (
+        <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                <CardTitle className="text-sm font-medium">{title}</CardTitle>
+                <Icon className="h-4 w-4 text-muted-foreground" />
+            </CardHeader>
+            <CardContent>
+                <div className="text-2xl font-bold">{value}</div>
+                <p className="text-xs text-muted-foreground">{subText}</p>
+            </CardContent>
+        </Card>
+    );
+}

starterkits/saas/src/app/(app)/admin/dashboard/_constants/page-config.ts

@@ -0,0 +1,10 @@
+/**
+ * This file contains the page configuration for the users page.
+ * This is used to generate the page title and description.
+ */
+
+export const adminDashConfig = {
+    title: "Admin Dashboard",
+    description:
+        "View insights and analytics to monitor your app's performance and user behavior.",
+} as const;

starterkits/saas/src/app/(app)/admin/dashboard/page.tsx

@@ -1,13 +1,55 @@
-import { getUser } from "@/server/auth";
+import { AppPageShell } from "@/app/(app)/_components/page-shell";
+import { StatsCard } from "@/app/(app)/admin/dashboard/_components/stats-card";
+import { adminDashConfig } from "@/app/(app)/admin/dashboard/_constants/page-config";
+import { buttonVariants } from "@/components/ui/button";
+import { siteUrls } from "@/config/urls";
+import { DollarSignIcon, Users2Icon } from "lucide-react";
+import Link from "next/link";
 
 export default async function AdminDashPage() {
-    const user = await getUser();
-
     return (
-        <div>
-            <h1>Admin Dashboard</h1>
-            <p>Welcome {user?.name}</p>
-            <p>{user?.isNewUser ? "Yes" : "No"}</p>
-        </div>
+        <AppPageShell
+            title={adminDashConfig.title}
+            description={adminDashConfig.description}
+        >
+            <div className="grid w-full gap-8">
+                <p className="font text-sm">
+                    This a simple dashboard with Analytics, to see detailed
+                    Analytics go to{" "}
+                    <Link
+                        href={siteUrls.admin.analytics}
+                        className={buttonVariants({
+                            variant: "link",
+                            className: "px-0 underline",
+                        })}
+                    >
+                        PostHog Dashboard
+                    </Link>
+                </p>
+
+                <div className="grid grid-cols-3 gap-4">
+                    <StatsCard
+                        title="Total Users"
+                        value="1000"
+                        Icon={Users2Icon}
+                        subText="+20.1% from last month"
+                    />
+
+                    <StatsCard
+                        title="Total Revenue"
+                        value="$10,000"
+                        Icon={DollarSignIcon}
+                        subText="+20.1% from last month"
+                    />
+
+                    <StatsCard
+                        title="Total Subscriptions"
+                        value="100"
+                        Icon={DollarSignIcon}
+                        subText="+20.1% from last month"
+                    />
+                </div>
+            </div>
+        </AppPageShell>
     );
 }