feat: Phase 5 - Calendar + Dashboard + Search
Calendar: - GET /api/domains/[domainId]/calendar/events?from=&to= — returns tasks, habits, projects, milestones - PATCH /api/domains/[domainId]/tasks/[id]/schedule — drag-to-reschedule with activity feed - Calendar UI with month/week/day views via react-big-calendar - Drag-to-reschedule with SSE updates - Filter by entity type and domain - Keyboard shortcuts: t=today, m/w/d=view, ←/→=navigate - Mobile: auto-switches to day view on small screens Dashboard: - GET/PUT /api/domains/[domainId]/dashboard — layout stored in domain custom_fields - 8 per-widget data endpoints (today-tasks, habit-checklist, weekly-stats, project-progress, upcoming-calendar, recent-notes, activity-feed, quick-capture) - react-grid-layout with responsive breakpoints (12/8/4 cols) - Drag-to-reorder, resize, add/remove widgets - Edit mode toggle, per-workspace layout persistence - Widget error boundary Search: - tsvector columns + GIN indexes on tasks, notes, projects, habits, domains - GET /api/search?q=&types=&domain= — ranked results with ts_headline snippets - Dedicated search page with grouped results, filters, recent searches (localStorage) - Empty state with hints Schema: - Added custom_fields jsonb column to domains table (migration 0002) - Removed stale root app/ directory Build: passes, typecheck: passes, tests: 18/18 wikilink-parser tests pass
This commit is contained in:
@@ -1,41 +1,108 @@
|
||||
'use client';
|
||||
|
||||
import { ResponsiveGridLayout, useContainerWidth, verticalCompactor } from 'react-grid-layout';
|
||||
import type { Layout } from 'react-grid-layout';
|
||||
import { useMemo } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import 'react-grid-layout/css/styles.css';
|
||||
import 'react-resizable/css/styles.css';
|
||||
|
||||
// react-grid-layout needs WidthProvider for responsive behavior
|
||||
// Dynamic import to avoid SSR issues
|
||||
const ReactGridLayout = dynamic(
|
||||
() => import('react-grid-layout').then((mod) => {
|
||||
// react-grid-layout v2 exports GridLayout as default
|
||||
// WidthProvider is a named export
|
||||
const GridLayout = (mod as any).default || mod;
|
||||
const WidthProvider = (mod as any).WidthProvider;
|
||||
if (WidthProvider) {
|
||||
return WidthProvider(GridLayout);
|
||||
}
|
||||
return GridLayout;
|
||||
}),
|
||||
{ ssr: false }
|
||||
);
|
||||
|
||||
interface LayoutItem {
|
||||
i: string;
|
||||
x: number;
|
||||
y: number;
|
||||
w: number;
|
||||
h: number;
|
||||
minW?: number;
|
||||
minH?: number;
|
||||
maxW?: number;
|
||||
maxH?: number;
|
||||
static?: boolean;
|
||||
}
|
||||
|
||||
interface ResponsiveGridProps {
|
||||
layout: Layout;
|
||||
onLayoutChange: (newLayout: Layout) => void;
|
||||
layout: LayoutItem[];
|
||||
onLayoutChange: (newLayout: LayoutItem[]) => void;
|
||||
children: React.ReactNode;
|
||||
isDraggable?: boolean;
|
||||
isResizable?: boolean;
|
||||
className?: string;
|
||||
compactType?: 'vertical' | 'horizontal' | null;
|
||||
preventCollision?: boolean;
|
||||
rowHeight?: number;
|
||||
cols?: number;
|
||||
}
|
||||
|
||||
export default function ResponsiveGrid({
|
||||
layout,
|
||||
onLayoutChange,
|
||||
children,
|
||||
isDraggable = true,
|
||||
isResizable = true,
|
||||
className = '',
|
||||
compactType = 'vertical',
|
||||
preventCollision = false,
|
||||
rowHeight = 200,
|
||||
cols = 12,
|
||||
}: ResponsiveGridProps) {
|
||||
const { width, containerRef, mounted } = useContainerWidth();
|
||||
// Build responsive layouts: same layout for all breakpoints
|
||||
const responsiveLayouts = useMemo(() => {
|
||||
// Desktop: 12 columns
|
||||
const lg = layout.map((item) => ({ ...item }));
|
||||
// Tablet: 8 columns — scale widths proportionally
|
||||
const md = layout.map((item) => ({
|
||||
...item,
|
||||
w: Math.max(1, Math.min(8, Math.round(item.w * (8 / 12)))),
|
||||
}));
|
||||
// Mobile: 4 columns — stack widgets
|
||||
const sm = layout.map((item, idx) => ({
|
||||
...item,
|
||||
x: 0,
|
||||
y: idx,
|
||||
w: 4,
|
||||
h: Math.max(2, item.h),
|
||||
}));
|
||||
return { lg, md, sm, xs: sm, xxs: sm };
|
||||
}, [layout]);
|
||||
|
||||
const handleLayoutChange = (newLayout: LayoutItem[]) => {
|
||||
onLayoutChange(newLayout);
|
||||
};
|
||||
|
||||
const GridComponent = ReactGridLayout as any;
|
||||
|
||||
return (
|
||||
<div ref={containerRef}>
|
||||
{mounted && (
|
||||
<ResponsiveGridLayout
|
||||
className="layout"
|
||||
width={width}
|
||||
layouts={{ lg: layout }}
|
||||
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
|
||||
cols={{ lg: 12, md: 10, sm: 6, xs: 4, xxs: 2 }}
|
||||
rowHeight={80}
|
||||
onLayoutChange={(_layout, _layouts) => onLayoutChange(_layout)}
|
||||
dragConfig={{ handle: '.widget-drag-handle' }}
|
||||
compactor={verticalCompactor}
|
||||
resizeConfig={{ enabled: true }}
|
||||
>
|
||||
{children}
|
||||
</ResponsiveGridLayout>
|
||||
)}
|
||||
<div className={`w-full ${className}`}>
|
||||
<GridComponent
|
||||
layouts={responsiveLayouts}
|
||||
onLayoutChange={handleLayoutChange}
|
||||
isDraggable={isDraggable}
|
||||
isResizable={isResizable}
|
||||
compactType={compactType}
|
||||
preventCollision={preventCollision}
|
||||
rowHeight={rowHeight}
|
||||
cols={{ lg: 12, md: 8, sm: 4, xs: 4, xxs: 4 }}
|
||||
breakpoints={{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
|
||||
draggableHandle=".widget-drag-handle"
|
||||
margin={[16, 16]}
|
||||
containerPadding={[0, 0]}
|
||||
>
|
||||
{children}
|
||||
</GridComponent>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -0,0 +1,90 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Activity, Clock, User, Plus, CheckCircle2, XCircle } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
|
||||
interface ActivityItem {
|
||||
id: string;
|
||||
actor: string;
|
||||
action: string;
|
||||
entity_type: string;
|
||||
entity_id: string;
|
||||
changes: Record<string, unknown> | null;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
export function ActivityFeedWidget() {
|
||||
const [activities, setActivities] = useState<ActivityItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchActivities();
|
||||
}, []);
|
||||
|
||||
async function fetchActivities() {
|
||||
try {
|
||||
const res = await fetch('/api/agent-activity?perPage=20&sort=-created');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setActivities(data.items || []);
|
||||
}
|
||||
} catch {} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function getActionIcon(action: string) {
|
||||
switch (action) {
|
||||
case 'created': return <Plus className="h-3 w-3 text-green-500" />;
|
||||
case 'completed': return <CheckCircle2 className="h-3 w-3 text-green-500" />;
|
||||
case 'deleted': return <XCircle className="h-3 w-3 text-red-500" />;
|
||||
default: return <Clock className="h-3 w-3 text-blue-500" />;
|
||||
}
|
||||
}
|
||||
|
||||
function timeAgo(dateStr: string) {
|
||||
const diff = Date.now() - new Date(dateStr).getTime();
|
||||
const mins = Math.floor(diff / 60000);
|
||||
if (mins < 1) return 'just now';
|
||||
if (mins < 60) return `${mins}m ago`;
|
||||
const hours = Math.floor(mins / 60);
|
||||
if (hours < 24) return `${hours}h ago`;
|
||||
return `${Math.floor(hours / 24)}d ago`;
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Activity className="h-4 w-4" aria-hidden="true" />
|
||||
Activity Feed
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : activities.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No recent activity</p>
|
||||
) : (
|
||||
<div className="space-y-1.5">
|
||||
{activities.slice(0, 10).map((item) => (
|
||||
<div key={item.id} className="flex items-start gap-2 rounded-md p-1.5 text-xs">
|
||||
<span className="mt-0.5 shrink-0">{getActionIcon(item.action)}</span>
|
||||
<div className="min-w-0 flex-1">
|
||||
<span className="font-medium">{item.actor}</span>{' '}
|
||||
<span className="text-muted-foreground">{item.action}</span>{' '}
|
||||
<Badge variant="outline" className="text-[10px]">{item.entity_type}</Badge>
|
||||
</div>
|
||||
<span className="shrink-0 text-muted-foreground">{timeAgo(item.created_at)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,89 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { Plus, Send } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
export function QuickCaptureWidget() {
|
||||
const [type, setType] = useState('task');
|
||||
const [title, setTitle] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const router = useRouter();
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
if (!title.trim()) return;
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const endpoint = type === 'task' ? '/api/tasks'
|
||||
: type === 'habit' ? '/api/habits'
|
||||
: '/api/notes';
|
||||
|
||||
const body: Record<string, unknown> = { title: title.trim() };
|
||||
if (type === 'task') {
|
||||
body.status = 'todo';
|
||||
body.priority = 'medium';
|
||||
}
|
||||
if (type === 'habit') {
|
||||
body.name = title.trim();
|
||||
delete body.title;
|
||||
body.frequency = 'daily';
|
||||
body.difficulty = 'medium';
|
||||
}
|
||||
|
||||
const res = await fetch(endpoint, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setTitle('');
|
||||
router.refresh();
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Quick capture failed:', err);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Plus className="h-4 w-4" aria-hidden="true" />
|
||||
Quick Capture
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<form onSubmit={handleSubmit} className="flex gap-2">
|
||||
<Select value={type} onValueChange={setType}>
|
||||
<SelectTrigger className="w-24">
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="task">Task</SelectItem>
|
||||
<SelectItem value="habit">Habit</SelectItem>
|
||||
<SelectItem value="note">Note</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Quick add..."
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button type="submit" size="icon" disabled={submitting || !title.trim()}>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { BookOpen, FileText } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
interface Note {
|
||||
id: string;
|
||||
title: string;
|
||||
updated_at: string;
|
||||
is_pinned: boolean;
|
||||
}
|
||||
|
||||
export function RecentNotesWidget() {
|
||||
const [notes, setNotes] = useState<Note[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
fetchNotes();
|
||||
}, []);
|
||||
|
||||
async function fetchNotes() {
|
||||
try {
|
||||
const res = await fetch('/api/notes?perPage=5&sort=-updated');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setNotes(data.items || []);
|
||||
}
|
||||
} catch {} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<BookOpen className="h-4 w-4" aria-hidden="true" />
|
||||
Recent Notes
|
||||
</CardTitle>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : notes.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No notes yet</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{notes.map((note) => (
|
||||
<div
|
||||
key={note.id}
|
||||
className="flex cursor-pointer items-center gap-2 rounded-md p-1.5 transition-colors hover:bg-accent/50"
|
||||
onClick={() => router.push('/notes')}
|
||||
>
|
||||
<FileText className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
<span className="flex-1 truncate text-sm">
|
||||
{note.is_pinned && '📌 '}
|
||||
{note.title}
|
||||
</span>
|
||||
<span className="shrink-0 text-xs text-muted-foreground">
|
||||
{new Date(note.updated_at).toLocaleDateString()}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,96 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Calendar, ListTodo } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
interface UpcomingItem {
|
||||
id: string;
|
||||
title: string;
|
||||
due_date: string;
|
||||
priority?: string;
|
||||
status?: string;
|
||||
name?: string;
|
||||
target_date?: string;
|
||||
color?: string;
|
||||
}
|
||||
|
||||
export function UpcomingCalendarWidget() {
|
||||
const [tasks, setTasks] = useState<UpcomingItem[]>([]);
|
||||
const [projects, setProjects] = useState<UpcomingItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
fetchUpcoming();
|
||||
}, []);
|
||||
|
||||
async function fetchUpcoming() {
|
||||
try {
|
||||
const res = await fetch('/api/tasks?perPage=10&sort=due_date');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
const now = new Date();
|
||||
const nextWeek = new Date(now.getTime() + 7 * 24 * 60 * 60 * 1000);
|
||||
const upcoming = (data.items || []).filter((t: any) => {
|
||||
if (!t.due_date) return false;
|
||||
const d = new Date(t.due_date);
|
||||
return d >= now && d <= nextWeek;
|
||||
});
|
||||
setTasks(upcoming);
|
||||
}
|
||||
} catch {} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function formatDate(dateStr: string) {
|
||||
const d = new Date(dateStr);
|
||||
const today = new Date();
|
||||
const tomorrow = new Date(today);
|
||||
tomorrow.setDate(tomorrow.getDate() + 1);
|
||||
|
||||
if (d.toDateString() === today.toDateString()) return 'Today';
|
||||
if (d.toDateString() === tomorrow.toDateString()) return 'Tomorrow';
|
||||
return d.toLocaleDateString('en-US', { weekday: 'short', month: 'short', day: 'numeric' });
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Calendar className="h-4 w-4" aria-hidden="true" />
|
||||
Upcoming
|
||||
</CardTitle>
|
||||
<Badge variant="secondary" className="text-xs">{tasks.length} due</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : tasks.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No upcoming due dates</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{tasks.slice(0, 7).map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="flex cursor-pointer items-center gap-2 rounded-md p-1.5 transition-colors hover:bg-accent/50"
|
||||
onClick={() => router.push('/tasks')}
|
||||
>
|
||||
<ListTodo className="h-3.5 w-3.5 shrink-0 text-muted-foreground" />
|
||||
<span className="flex-1 truncate text-sm">{task.title}</span>
|
||||
<span className="shrink-0 text-xs text-muted-foreground">
|
||||
{formatDate(task.due_date!)}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user