fix(admin): move ssr:false dynamic charts to client module

Next 16 requires next/dynamic with ssr:false to be invoked inside a
client component. Extract GrowthArea + CountBar into
components/charts/lazy.tsx ('use client') and import from the server
page.

Author: f-amine

apps/admin/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/dev/types/routes.d.ts";
+import "./.next/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

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

@@ -7,40 +7,8 @@ import {
 	CardTitle,
 } from "@starter-saas/ui/components/card";
 import { Building2, CreditCard, TrendingUp, Users } from "lucide-react";
-import dynamic from "next/dynamic";
+import { CountBar, GrowthArea } from "@/components/charts/lazy";
 import { PageHeader } from "@/components/layout/page-header";
-
-// Recharts is ~60kb gz and only runs in the browser — defer it off the
-// critical path so first-byte for admins doesn't ship the chart engine.
-const GrowthArea = dynamic(
-	() =>
-		import("@/components/charts/area-chart").then((m) => ({
-			default: m.GrowthArea,
-		})),
-	{
-		ssr: false,
-		loading: () => <ChartSkeleton />,
-	},
-);
-const CountBar = dynamic(
-	() =>
-		import("@/components/charts/bar-chart").then((m) => ({
-			default: m.CountBar,
-		})),
-	{
-		ssr: false,
-		loading: () => <ChartSkeleton />,
-	},
-);
-
-function ChartSkeleton() {
-	return (
-		<div
-			aria-hidden
-			className="h-[260px] w-full animate-pulse rounded-md bg-muted/40"
-		/>
-	);
-}
 import {
 	fetchAuditByAction,
 	fetchKpis,

apps/admin/src/components/charts/lazy.tsx

@@ -0,0 +1,38 @@
+// Client-side dynamic wrappers for the recharts components. Kept in a
+// dedicated client module so the dynamic-import + ssr:false escape hatch
+// is allowed (next/dynamic with ssr:false can only be called inside a
+// "use client" boundary).
+"use client";
+
+import dynamic from "next/dynamic";
+
+function ChartSkeleton() {
+	return (
+		<div
+			aria-hidden
+			className="h-[260px] w-full animate-pulse rounded-md bg-muted/40"
+		/>
+	);
+}
+
+export const GrowthArea = dynamic(
+	() =>
+		import("@/components/charts/area-chart").then((m) => ({
+			default: m.GrowthArea,
+		})),
+	{
+		ssr: false,
+		loading: () => <ChartSkeleton />,
+	},
+);
+
+export const CountBar = dynamic(
+	() =>
+		import("@/components/charts/bar-chart").then((m) => ({
+			default: m.CountBar,
+		})),
+	{
+		ssr: false,
+		loading: () => <ChartSkeleton />,
+	},
+);