feat: implement dashboard page and add loading skeletons for all dashboard modules

This commit is contained in:
Michael committed 2026-04-03 07:12:15 +02:00
1 parent b39e010903
commit a4debe992b
8 files changed
+158 -2

No files matched your search

+27
View File
@@ -0,0 +1,27 @@
export default function DashboardLoading() {
return (
<div className="flex flex-col gap-6 animate-pulse">
{/* Header skeleton */}
<div className="flex items-center justify-between">
<div className="h-7 w-48 rounded-lg bg-[var(--bg-elevated)]" />
<div className="h-5 w-32 rounded-lg bg-[var(--bg-elevated)]" />
</div>
{/* KPI cards row */}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4">
{Array.from({ length: 4 }).map((_, i) => (
<div key={i} className="h-28 rounded-2xl bg-[var(--bg-elevated)] border border-[var(--border)]" />
))}
</div>
{/* Main content area */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="h-64 rounded-2xl bg-[var(--bg-elevated)] border border-[var(--border)]" />
<div className="h-64 rounded-2xl bg-[var(--bg-elevated)] border border-[var(--border)]" />
</div>
{/* Bottom tables */}
<div className="h-80 rounded-2xl bg-[var(--bg-elevated)] border border-[var(--border)]" />
</div>
);
}
+8 -1
View File
@@ -1,4 +1,11 @@
import { pgGetDashboardData, type DashboardTopItem, type DashboardSiteStats, type DashboardSiteTop10 } from "@/lib/pg-ff-client";
import { unstable_cache } from "next/cache";
const getCachedDashboardData = unstable_cache(
pgGetDashboardData,
["dashboard-data"],
{ revalidate: 600 } // 10 minutes
);
import { TrendingUp, TrendingDown, Minus, Store, Euro, Users, ShoppingCart, Award, BarChart3 } from "lucide-react";
// ---------------------------------------------------------------------------
@@ -722,7 +729,7 @@ function SectionHeader({ label, sub }: { label: string; sub?: string }) {
export default async function DashboardPage() {
let data;
try {
data = await pgGetDashboardData();
data = await getCachedDashboardData();
} catch (e) {
const msg = e instanceof Error ? e.message : String(e);
console.error("[Dashboard] pgGetDashboardData failed:", e);