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>
This commit is contained in:
ginnoir
co-authored by
Claude Sonnet 4.6
Claude Sonnet 4.6
parent
2ad9521ef9
commit
d5a8bf9d95
@@ -0,0 +1,221 @@
|
||||
"use client";
|
||||
|
||||
import "react-grid-layout/css/styles.css";
|
||||
import "react-resizable/css/styles.css";
|
||||
|
||||
import { useEffect, useState, useTransition } from "react";
|
||||
import { useRouter } from "next/navigation";
|
||||
import { GridLayout } from "react-grid-layout";
|
||||
import type { Layout } from "react-grid-layout";
|
||||
import { GripVertical, Settings2, Trash2, RotateCcw, Plus } from "lucide-react";
|
||||
import type { DashboardLayout, WidgetPlacement } from "@/lib/dashboard";
|
||||
import type { SerializedWidgetMeta } from "@/modules/_core/registry";
|
||||
import { saveDashboardLayout, resetDashboardLayout } from "@/app/d/actions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { WidgetPicker } from "./widget-picker";
|
||||
|
||||
function placementKey(placement: WidgetPlacement, index: number) {
|
||||
return `${placement.widgetId}::${index}`;
|
||||
}
|
||||
|
||||
export function DashboardEditor({
|
||||
dashboard,
|
||||
layout: initialLayout,
|
||||
widgetMetas,
|
||||
}: {
|
||||
dashboard: { id: string; name: string; slug: string };
|
||||
layout: DashboardLayout;
|
||||
widgetMetas: SerializedWidgetMeta[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isPending, startTransition] = useTransition();
|
||||
const [placements, setPlacements] = useState<WidgetPlacement[]>(initialLayout.widgets);
|
||||
const [isDirty, setIsDirty] = useState(false);
|
||||
const [pickerOpen, setPickerOpen] = useState(false);
|
||||
const [configuringIndex, setConfiguringIndex] = useState<number | null>(null);
|
||||
const [containerWidth, setContainerWidth] = useState(1200);
|
||||
|
||||
useEffect(() => {
|
||||
function measure() {
|
||||
const el = document.getElementById("dashboard-editor-grid");
|
||||
if (el) setContainerWidth(el.offsetWidth);
|
||||
}
|
||||
measure();
|
||||
window.addEventListener("resize", measure);
|
||||
return () => window.removeEventListener("resize", measure);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
function onKey(e: KeyboardEvent) {
|
||||
if (e.key === "Escape") handleCancel();
|
||||
}
|
||||
window.addEventListener("keydown", onKey);
|
||||
return () => window.removeEventListener("keydown", onKey);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [dashboard.slug]);
|
||||
|
||||
function handleCancel() {
|
||||
router.push(`/d/${dashboard.slug}`);
|
||||
}
|
||||
|
||||
function handleSave() {
|
||||
startTransition(async () => {
|
||||
await saveDashboardLayout(dashboard.id, { version: 1, widgets: placements });
|
||||
router.push(`/d/${dashboard.slug}`);
|
||||
});
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
startTransition(async () => {
|
||||
await resetDashboardLayout(dashboard.id);
|
||||
router.push(`/d/${dashboard.slug}`);
|
||||
});
|
||||
}
|
||||
|
||||
function handleLayoutChange(items: Layout) {
|
||||
setPlacements((current) =>
|
||||
current.map((p, i) => {
|
||||
const key = placementKey(p, i);
|
||||
const item = items.find((it) => it.i === key);
|
||||
if (!item) return p;
|
||||
return { ...p, x: item.x, y: item.y, w: item.w, h: item.h };
|
||||
}),
|
||||
);
|
||||
setIsDirty(true);
|
||||
}
|
||||
|
||||
function removeWidget(index: number) {
|
||||
setPlacements((current) => current.filter((_, i) => i !== index));
|
||||
setIsDirty(true);
|
||||
}
|
||||
|
||||
function addWidget(widgetId: string, config: unknown) {
|
||||
const meta = widgetMetas.find((m) => m.id === widgetId);
|
||||
if (!meta) return;
|
||||
const maxY = placements.reduce((m, p) => Math.max(m, p.y + p.h), 0);
|
||||
setPlacements((current) => [
|
||||
...current,
|
||||
{ widgetId, config, x: 0, y: maxY, w: meta.defaultSize.w, h: meta.defaultSize.h },
|
||||
]);
|
||||
setIsDirty(true);
|
||||
setPickerOpen(false);
|
||||
}
|
||||
|
||||
function updateConfig(index: number, config: unknown) {
|
||||
setPlacements((current) =>
|
||||
current.map((p, i) => (i === index ? { ...p, config } : p)),
|
||||
);
|
||||
setIsDirty(true);
|
||||
setConfiguringIndex(null);
|
||||
}
|
||||
|
||||
const gridItems: Layout = placements.map((p, i) => ({
|
||||
i: placementKey(p, i),
|
||||
x: p.x, y: p.y, w: p.w, h: p.h,
|
||||
minW: widgetMetas.find((m) => m.id === p.widgetId)?.minSize?.w ?? 2,
|
||||
minH: widgetMetas.find((m) => m.id === p.widgetId)?.minSize?.h ?? 1,
|
||||
maxW: widgetMetas.find((m) => m.id === p.widgetId)?.maxSize?.w ?? 12,
|
||||
}));
|
||||
|
||||
return (
|
||||
<div className="p-4 sm:p-6">
|
||||
<div className="mb-6 flex items-center justify-between gap-4 flex-wrap">
|
||||
<h1 className="text-2xl font-bold">{dashboard.name}</h1>
|
||||
<div className="flex items-center gap-2 flex-wrap">
|
||||
<Button variant="outline" size="sm" onClick={handleReset} disabled={isPending}>
|
||||
<RotateCcw className="size-4 mr-1" />
|
||||
Reset
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setPickerOpen(true)} disabled={isPending}>
|
||||
<Plus className="size-4 mr-1" />
|
||||
Add widget
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={handleCancel} disabled={isPending}>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button size="sm" onClick={handleSave} disabled={!isDirty || isPending}>
|
||||
{isPending ? "Saving…" : "Save"}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="mb-4 text-sm text-muted-foreground">
|
||||
Drag to reorder · resize from the bottom-right corner · ESC to cancel
|
||||
</p>
|
||||
|
||||
<div id="dashboard-editor-grid">
|
||||
<GridLayout
|
||||
layout={gridItems}
|
||||
width={containerWidth}
|
||||
gridConfig={{ cols: 12, rowHeight: 60, margin: [16, 16] as [number, number], containerPadding: [0, 0] as [number, number] }}
|
||||
dragConfig={{ handle: ".drag-handle" }}
|
||||
onLayoutChange={handleLayoutChange}
|
||||
>
|
||||
{placements.map((placement, i) => {
|
||||
const meta = widgetMetas.find((m) => m.id === placement.widgetId);
|
||||
return (
|
||||
<div
|
||||
key={placementKey(placement, i)}
|
||||
className="rounded-lg border bg-card text-card-foreground flex flex-col overflow-hidden"
|
||||
>
|
||||
<div className="drag-handle flex items-center gap-2 px-3 py-2 bg-muted/40 cursor-grab active:cursor-grabbing select-none border-b">
|
||||
<GripVertical className="size-4 text-muted-foreground shrink-0" />
|
||||
<span className="text-sm font-medium truncate flex-1">
|
||||
{meta?.title ?? placement.widgetId}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setConfiguringIndex(i)}
|
||||
className="text-muted-foreground hover:text-foreground transition-colors p-0.5"
|
||||
aria-label="Configure widget"
|
||||
>
|
||||
<Settings2 className="size-4" />
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeWidget(i)}
|
||||
className="text-muted-foreground hover:text-destructive transition-colors p-0.5"
|
||||
aria-label="Remove widget"
|
||||
>
|
||||
<Trash2 className="size-4" />
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 flex items-center justify-center p-4">
|
||||
<p className="text-xs text-muted-foreground">{meta?.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</GridLayout>
|
||||
</div>
|
||||
|
||||
{placements.length === 0 && (
|
||||
<div className="flex flex-col items-center justify-center py-24 gap-4 text-center">
|
||||
<p className="text-muted-foreground">No widgets yet.</p>
|
||||
<Button onClick={() => setPickerOpen(true)}>
|
||||
<Plus className="size-4 mr-1" />
|
||||
Add widget
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{pickerOpen && (
|
||||
<WidgetPicker
|
||||
onClose={() => setPickerOpen(false)}
|
||||
widgetMetas={widgetMetas}
|
||||
onAdd={addWidget}
|
||||
/>
|
||||
)}
|
||||
|
||||
{configuringIndex !== null && (
|
||||
<WidgetPicker
|
||||
onClose={() => setConfiguringIndex(null)}
|
||||
widgetMetas={widgetMetas}
|
||||
onAdd={(_, config) => updateConfig(configuringIndex, config)}
|
||||
initialWidgetId={placements[configuringIndex]?.widgetId}
|
||||
initialConfig={placements[configuringIndex]?.config}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user