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
2026-07-29 07:32:47 -04:00
parent 40a26d2672
commit eba1d78fb9
39 changed files with 11525 additions and 768 deletions
@@ -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>
+  );
+}