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,292 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useTransition } from "react";
|
||||
import { X, ChevronLeft } from "lucide-react";
|
||||
import type { SerializedWidgetMeta } from "@/modules/_core/registry";
|
||||
import { resolveWidgetConfigOptions } from "@/app/d/actions";
|
||||
import { Button } from "@/components/ui/button";
|
||||
|
||||
type Step = "pick" | "configure";
|
||||
|
||||
export function WidgetPicker({
|
||||
onClose,
|
||||
widgetMetas,
|
||||
onAdd,
|
||||
initialWidgetId,
|
||||
initialConfig,
|
||||
}: {
|
||||
onClose: () => void;
|
||||
widgetMetas: SerializedWidgetMeta[];
|
||||
onAdd: (widgetId: string, config: unknown) => void;
|
||||
initialWidgetId?: string;
|
||||
initialConfig?: unknown;
|
||||
}) {
|
||||
const [step, setStep] = useState<Step>(initialWidgetId ? "configure" : "pick");
|
||||
const [selectedId, setSelectedId] = useState<string | null>(initialWidgetId ?? null);
|
||||
const [options, setOptions] = useState<unknown>(null);
|
||||
const [config, setConfig] = useState<unknown>(initialConfig ?? null);
|
||||
const [, startTransition] = useTransition();
|
||||
|
||||
function selectWidget(id: string) {
|
||||
const meta = widgetMetas.find((m) => m.id === id);
|
||||
if (!meta) return;
|
||||
setSelectedId(id);
|
||||
setConfig(meta.defaultConfig);
|
||||
setOptions(null);
|
||||
setStep("configure");
|
||||
startTransition(async () => {
|
||||
const opts = await resolveWidgetConfigOptions(id);
|
||||
setOptions(opts);
|
||||
});
|
||||
}
|
||||
|
||||
function handleAdd() {
|
||||
if (!selectedId) return;
|
||||
onAdd(selectedId, config);
|
||||
}
|
||||
|
||||
const grouped = widgetMetas.reduce<Record<string, SerializedWidgetMeta[]>>((acc, m) => {
|
||||
const cat = m.category ?? "Other";
|
||||
(acc[cat] ??= []).push(m);
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
const selected = widgetMetas.find((m) => m.id === selectedId);
|
||||
|
||||
return (
|
||||
<div
|
||||
className="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
|
||||
onClick={(e) => e.target === e.currentTarget && onClose()}
|
||||
>
|
||||
<div className="relative bg-background rounded-lg shadow-xl w-full max-w-lg mx-4 max-h-[80vh] flex flex-col">
|
||||
{/* Header */}
|
||||
<div className="flex items-center gap-2 px-4 py-3 border-b">
|
||||
{step === "configure" && !initialWidgetId && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setStep("pick")}
|
||||
className="text-muted-foreground hover:text-foreground"
|
||||
>
|
||||
<ChevronLeft className="size-5" />
|
||||
</button>
|
||||
)}
|
||||
<h2 className="font-semibold flex-1 text-sm">
|
||||
{step === "pick" ? "Add widget" : selected ? `Configure: ${selected.title}` : "Configure"}
|
||||
</h2>
|
||||
<button type="button" onClick={onClose} className="text-muted-foreground hover:text-foreground">
|
||||
<X className="size-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto p-4">
|
||||
{step === "pick" && (
|
||||
<div className="space-y-4">
|
||||
{Object.entries(grouped).sort(([a], [b]) => a.localeCompare(b)).map(([cat, items]) => (
|
||||
<div key={cat}>
|
||||
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground mb-2">{cat}</p>
|
||||
<div className="space-y-1">
|
||||
{items.map((meta) => (
|
||||
<button
|
||||
key={meta.id}
|
||||
type="button"
|
||||
onClick={() => selectWidget(meta.id)}
|
||||
className="w-full text-left rounded-md px-3 py-2 hover:bg-accent transition-colors"
|
||||
>
|
||||
<p className="text-sm font-medium">{meta.title}</p>
|
||||
<p className="text-xs text-muted-foreground">{meta.description}</p>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{step === "configure" && selected && (
|
||||
<WidgetConfigurator
|
||||
meta={selected}
|
||||
config={config}
|
||||
options={options}
|
||||
onChange={setConfig}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
{step === "configure" && (
|
||||
<div className="flex justify-end gap-2 px-4 py-3 border-t">
|
||||
<Button variant="outline" size="sm" onClick={onClose}>Cancel</Button>
|
||||
<Button size="sm" onClick={handleAdd}>
|
||||
{initialWidgetId ? "Apply" : "Add widget"}
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// ── Configurator ──────────────────────────────────────────────────────────────
|
||||
|
||||
type FieldOption = { id: string; name: string };
|
||||
|
||||
function WidgetConfigurator({
|
||||
meta,
|
||||
config,
|
||||
options,
|
||||
onChange,
|
||||
}: {
|
||||
meta: SerializedWidgetMeta;
|
||||
config: unknown;
|
||||
options: unknown;
|
||||
onChange: (c: unknown) => void;
|
||||
}) {
|
||||
const cfg = (config ?? meta.defaultConfig) as Record<string, unknown>;
|
||||
const opts = options as Record<string, FieldOption[]> | null | undefined;
|
||||
|
||||
function set(key: string, value: unknown) {
|
||||
onChange({ ...cfg, [key]: value });
|
||||
}
|
||||
|
||||
const entries = Object.entries(cfg);
|
||||
if (entries.length === 0) {
|
||||
return <p className="text-sm text-muted-foreground">No options available.</p>;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{entries.map(([key, value]) => {
|
||||
// "all" | string[] — multi-select with All toggle
|
||||
if (value === "all" || (Array.isArray(value) && (key.endsWith("Ids") || key.endsWith("ids")))) {
|
||||
const optKey = key.replace(/Ids?$/i, "s");
|
||||
const items: FieldOption[] = (opts?.[optKey] as FieldOption[] | undefined) ?? [];
|
||||
const isAll = value === "all";
|
||||
const selected = isAll ? [] : (value as string[]);
|
||||
|
||||
return (
|
||||
<div key={key}>
|
||||
<label className="block text-sm font-medium mb-1 capitalize">
|
||||
{key.replace(/([A-Z])/g, " $1").toLowerCase()}
|
||||
</label>
|
||||
<label className="flex items-center gap-2 text-sm mb-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={isAll}
|
||||
onChange={(e) => set(key, e.target.checked ? "all" : [])}
|
||||
className="accent-primary"
|
||||
/>
|
||||
All
|
||||
</label>
|
||||
{!isAll && (
|
||||
<div className="space-y-1 max-h-40 overflow-y-auto border rounded p-2">
|
||||
{items.length === 0 && (
|
||||
<p className="text-xs text-muted-foreground">None available</p>
|
||||
)}
|
||||
{items.map((item) => (
|
||||
<label key={item.id} className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selected.includes(item.id)}
|
||||
onChange={(e) => {
|
||||
const next = e.target.checked
|
||||
? [...selected, item.id]
|
||||
: selected.filter((id) => id !== item.id);
|
||||
set(key, next);
|
||||
}}
|
||||
className="accent-primary"
|
||||
/>
|
||||
{item.name}
|
||||
</label>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// boolean
|
||||
if (typeof value === "boolean") {
|
||||
return (
|
||||
<label key={key} className="flex items-center gap-2 text-sm">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={value}
|
||||
onChange={(e) => set(key, e.target.checked)}
|
||||
className="accent-primary"
|
||||
/>
|
||||
<span className="capitalize">{key.replace(/([A-Z])/g, " $1").toLowerCase()}</span>
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
// number
|
||||
if (typeof value === "number") {
|
||||
return (
|
||||
<div key={key}>
|
||||
<label className="block text-sm font-medium mb-1 capitalize">
|
||||
{key.replace(/([A-Z])/g, " $1").toLowerCase()}
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
value={value}
|
||||
onChange={(e) => set(key, Number(e.target.value))}
|
||||
className="w-24 rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// string (enum / plain)
|
||||
if (typeof value === "string") {
|
||||
// Detect enum-like: same key appears in options as an array of strings
|
||||
const enumOpts = opts?.[key] as string[] | undefined;
|
||||
if (Array.isArray(enumOpts)) {
|
||||
return (
|
||||
<div key={key}>
|
||||
<label className="block text-sm font-medium mb-1 capitalize">
|
||||
{key.replace(/([A-Z])/g, " $1").toLowerCase()}
|
||||
</label>
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => set(key, e.target.value)}
|
||||
className="rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
{enumOpts.map((opt) => (
|
||||
<option key={opt} value={opt}>{opt}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Hardcoded enum fallback for known fields
|
||||
const knownEnums: Record<string, string[]> = {
|
||||
filter: ["pinned", "all"],
|
||||
};
|
||||
const known = knownEnums[key];
|
||||
if (known) {
|
||||
return (
|
||||
<div key={key}>
|
||||
<label className="block text-sm font-medium mb-1 capitalize">
|
||||
{key.replace(/([A-Z])/g, " $1").toLowerCase()}
|
||||
</label>
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => set(key, e.target.value)}
|
||||
className="rounded-md border border-input bg-background px-3 py-1.5 text-sm shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
|
||||
>
|
||||
{known.map((opt) => (
|
||||
<option key={opt} value={opt}>{opt}</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user