135 lines
4.6 KiB
TypeScript
135 lines
4.6 KiB
TypeScript
import { notFound } from "next/navigation";
|
|
import { Suspense } from "react";
|
|
import { getCurrentSession } from "@/lib/session";
|
|
import { parseDashboardLayout } from "@/lib/dashboard";
|
|
import { computeDefaultLayout } from "@/lib/dashboard.server";
|
|
import { getWidget, getWidgetMetas } from "@/modules/_core";
|
|
import { getDashboardBySlug } from "@/app/d/actions";
|
|
import { DashboardEditor } from "@/components/dashboard-editor";
|
|
import { EditDashboardButton } from "@/components/edit-dashboard-button";
|
|
import { DashboardSwitcher } from "@/components/dashboard-switcher";
|
|
import { DashboardTab } from "@/components/dashboard-tab";
|
|
import { DashboardGreeting } from "@/components/dashboard-greeting";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
import { auth } from "@/lib/auth";
|
|
import { db } from "@/lib/db";
|
|
import { dashboards } from "@/modules/_core/schema";
|
|
import { asc, eq } from "drizzle-orm";
|
|
import type { DashLayout } from "@/modules/_core/themes";
|
|
|
|
const smColSpan: Record<number, string> = {
|
|
1: "sm:col-span-1",
|
|
2: "sm:col-span-2",
|
|
3: "sm:col-span-3",
|
|
4: "sm:col-span-4",
|
|
5: "sm:col-span-5",
|
|
6: "sm:col-span-6",
|
|
7: "sm:col-span-7",
|
|
8: "sm:col-span-8",
|
|
9: "sm:col-span-9",
|
|
10: "sm:col-span-10",
|
|
11: "sm:col-span-11",
|
|
12: "sm:col-span-12",
|
|
};
|
|
|
|
export default async function DashboardPage({
|
|
params,
|
|
searchParams,
|
|
}: {
|
|
params: Promise<{ slug: string }>;
|
|
searchParams: Promise<{ edit?: string }>;
|
|
}) {
|
|
const { slug } = await params;
|
|
const { edit } = await searchParams;
|
|
const isEditing = edit === "1";
|
|
|
|
const { user, household } = await getCurrentSession();
|
|
const dashboard = await getDashboardBySlug(slug);
|
|
if (!dashboard) notFound();
|
|
|
|
const layout = parseDashboardLayout(dashboard.layout) ?? computeDefaultLayout();
|
|
const widgetMetas = getWidgetMetas();
|
|
|
|
if (isEditing) {
|
|
return (
|
|
<DashboardEditor
|
|
dashboard={{ id: dashboard.id, name: dashboard.name, slug: dashboard.slug }}
|
|
layout={layout}
|
|
widgetMetas={widgetMetas}
|
|
/>
|
|
);
|
|
}
|
|
|
|
// For dashboard tabs sub-header, pull the user's dashboards (small list).
|
|
const session = await auth();
|
|
const userDashboards = session?.user?.id
|
|
? await db
|
|
.select({
|
|
id: dashboards.id,
|
|
name: dashboards.name,
|
|
slug: dashboards.slug,
|
|
isDefault: dashboards.isDefault,
|
|
position: dashboards.position,
|
|
})
|
|
.from(dashboards)
|
|
.where(eq(dashboards.userId, session.user.id))
|
|
.orderBy(asc(dashboards.position), asc(dashboards.createdAt))
|
|
: [];
|
|
|
|
const ctx = { userId: user.id, householdId: household.id };
|
|
const placements = [...layout.widgets].sort((a, b) => a.y - b.y || a.x - b.x);
|
|
const dashLayout = (user.themeDashLayout as DashLayout) ?? "classic";
|
|
const containerCls =
|
|
dashLayout === "glance" ? "max-w-[760px] mx-auto" : dashLayout === "split" ? "" : "";
|
|
const firstName = (user.name ?? "").split(" ")[0] ?? "";
|
|
|
|
return (
|
|
<div className={containerCls}>
|
|
{userDashboards.length >= 1 && (
|
|
<div className="flex items-center gap-1 mb-4 overflow-x-auto">
|
|
{userDashboards.map((d) => (
|
|
<DashboardTab key={d.id} slug={d.slug} name={d.name} />
|
|
))}
|
|
<DashboardSwitcher dashboards={userDashboards} />
|
|
</div>
|
|
)}
|
|
|
|
<div className="mb-6 flex items-end justify-between gap-4 flex-wrap">
|
|
<DashboardGreeting firstName={firstName} />
|
|
<EditDashboardButton />
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4 sm:grid-cols-12">
|
|
{placements.map((placement, i) => {
|
|
const widget = getWidget(placement.widgetId);
|
|
if (!widget) return null;
|
|
const colClass = smColSpan[placement.w] ?? "sm:col-span-12";
|
|
return (
|
|
<div key={i} className={`col-span-1 ${colClass}`}>
|
|
<Card className="h-full">
|
|
<CardHeader>
|
|
<CardTitle>{widget.title}</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Suspense
|
|
fallback={
|
|
<div className="space-y-3">
|
|
<Skeleton className="h-4 w-3/4" />
|
|
<Skeleton className="h-4 w-1/2" />
|
|
<Skeleton className="h-4 w-2/3" />
|
|
</div>
|
|
}
|
|
>
|
|
{widget.render({ config: placement.config, ctx })}
|
|
</Suspense>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|