Implement tasks 25, 26 + completion visibility setting

Task 25: Multiple dashboards — dashboards table + migration, /d/[slug] route, root redirect, dashboard tabs in nav with create/rename/delete/ set-default. Task 26: Editable dashboard — react-grid-layout drag/resize editor, widget picker modal with per-widget configurator auto-generated from default config, save/reset server actions with Zod validation. Completion visibility: server-side per-user setting (hours) replaces localStorage timer; queries filter completed items by updatedAt cutoff; Settings page dropdown persists preference via server action. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-06 15:52:59 -05:00
parent 2ad9521ef9
commit d5a8bf9d95
27 changed files with 1646 additions and 237 deletions
@@ -0,0 +1,91 @@
+import { notFound } from "next/navigation";
+import { Suspense } from "react";
+import { getCurrentSession } from "@/lib/session";
+import { parseDashboardLayout, computeDefaultLayout } from "@/lib/dashboard";
+import { getWidget, getWidgetMetas } from "@/modules/_core";
+import { getDashboardBySlug } from "@/app/d/actions";
+import { DashboardEditor } from "@/components/dashboard-editor";
+import { QuickAddFab } from "@/components/quick-add-fab";
+import { EditDashboardButton } from "@/components/edit-dashboard-button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+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}
+      />
+    );
+  }
+
+  const ctx = { userId: user.id, householdId: household.id };
+  const placements = [...layout.widgets].sort((a, b) => a.y - b.y || a.x - b.x);
+
+  return (
+    <div className="p-4 sm:p-6">
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold">{dashboard.name}</h1>
+        <div className="flex items-center gap-2">
+          <QuickAddFab />
+          <EditDashboardButton />
+        </div>
+      </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 className="pb-2">
+                  <CardTitle className="text-base">{widget.title}</CardTitle>
+                </CardHeader>
+                <CardContent>
+                  <Suspense
+                    fallback={
+                      <div className="animate-pulse space-y-2">
+                        <div className="h-3 w-3/4 rounded bg-muted" />
+                        <div className="h-3 w-1/2 rounded bg-muted" />
+                        <div className="h-3 w-2/3 rounded bg-muted" />
+                      </div>
+                    }
+                  >
+                    {widget.render({ config: placement.config, ctx })}
+                  </Suspense>
+                </CardContent>
+              </Card>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}