Implement dashboard composition (task 20)

- Add default_dashboard_layout jsonb to users + migration 0007 - Create _core/manifest.tsx with core.activity placeholder widget - Register core manifest alongside calendar/lists/notes - Update all three module manifests with real async server-component widget renders (upcoming events, month view, list items, notes) - Add src/lib/dashboard.ts: computeDefaultLayout greedy packer + parseDashboardLayout Zod validator - Build src/app/page.tsx: 12-col CSS Grid, static smColSpan lookup, per-widget Suspense for parallel loading, generic widget.render() dispatch — no widgetId branches - Add tests/e2e/dashboard.spec.ts; all 4 E2E specs pass Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-05-06 13:24:56 -05:00
parent d7069d14a2
commit b4dde92757
11 changed files with 380 additions and 46 deletions
@@ -1,8 +1,88 @@
-export default function Page() {
+import { Suspense } from "react";
+import { eq } from "drizzle-orm";
+import { db } from "@/lib/db";
+import { computeDefaultLayout, parseDashboardLayout } from "@/lib/dashboard";
+import { getCurrentSession } from "@/lib/session";
+import { getWidget } from "@/modules/_core";
+import { users } from "@/modules/_core/schema";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+// Static lookup ensures Tailwind sees all sm:col-span-* classes at build time.
+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() {
+  const { user, household } = await getCurrentSession();
+
+  const [row] = await db
+    .select({ layout: users.defaultDashboardLayout })
+    .from(users)
+    .where(eq(users.id, user.id))
+    .limit(1);
+
+  const layout = parseDashboardLayout(row?.layout) ?? computeDefaultLayout();
+
+  const ctx = { userId: user.id, householdId: household.id };
+
+  // Sort by y then x so document order matches visual order on mobile (single col).
+  const placements = [...layout.widgets].sort((a, b) => a.y - b.y || a.x - b.x);
+
  return (
-    <main className="flex min-h-screen flex-col items-center justify-center p-8">
-      <h1 className="text-4xl font-bold">famapp</h1>
-      <p className="mt-4 text-muted-foreground">Dashboard coming soon</p>
-    </main>
+    <div className="p-4 sm:p-6">
+      <div className="mb-6 flex items-center justify-between">
+        <h1 className="text-2xl font-bold">Dashboard</h1>
+        {/* Quick-add FAB — wired up in task 21 */}
+        <button
+          aria-label="Quick add"
+          className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-md transition-opacity hover:opacity-90"
+        >
+          <span className="text-xl leading-none">+</span>
+        </button>
+      </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>
  );
 }