diff --git a/apps/api/src/routes/calendar.ts b/apps/api/src/routes/calendar.ts index add4f56..f1b12df 100644 --- a/apps/api/src/routes/calendar.ts +++ b/apps/api/src/routes/calendar.ts @@ -49,7 +49,7 @@ calendarRoutes.get("/events", async (c) => { const conditions: any[] = [eq(calendarEvents.domainId, domainId)]; if (from) conditions.push(gte(calendarEvents.startTime, new Date(from))); - if (to) conditions.push(lte(calendarEvents.endTime, new Date(to))); + if (to) conditions.push(lte(calendarEvents.startTime, new Date(to))); const items = await db.select() .from(calendarEvents) diff --git a/apps/web/PHASE4-NOTES.md b/apps/web/PHASE4-NOTES.md new file mode 100644 index 0000000..166e67f --- /dev/null +++ b/apps/web/PHASE4-NOTES.md @@ -0,0 +1,32 @@ +# Phase 4 Notes (T6) + +## Pages built +- **Tasks** (`/tasks`): Kanban board with dnd-kit drag-and-drop between 4 status columns (Todo, In Progress, Done, Cancelled) + List view with TanStack Table. Create/edit via dialog/side panel. Optimistic updates via TanStack Query mutations. +- **Habits** (`/habits`): List with streak display, 7-day mini completion grid, "Mark complete" button. Create/edit via dialog/side panel. History tab shows completion log. +- **Projects** (`/projects`): Card grid with progress bars. Detail panel with Overview/Tasks/Sections tabs. Create/edit via dialog. +- **Notes** (`/notes`): Two-pane layout (list + contentEditable editor). Backlinks and version history toggles. Auto-save on 500ms debounce. +- **Calendar** (`/calendar`): Month grid with date-fns. Events from API displayed with color coding. Create/edit/delete via dialogs. +- **Graph** (`/graph`): SVG-based circular layout visualization. Filter panel for entity types. Node detail panel. Full react-force-graph-2d integration deferred to T8. +- **Search** (`/search`): Debounced cross-entity search. Type filter chips. Recent searches in localStorage. Results grouped by type with highlighted snippets. + +## Shared infrastructure +- `src/hooks/use-realtime.ts`: SSE hook subscribing to `/api/realtime` with exponential backoff reconnect. Invalidates TanStack Query caches on entity events. +- `src/components/entities/entity-detail-panel.tsx`: Reusable Sheet-based side panel. +- `src/lib/types/index.ts`: Shared TypeScript interfaces for all entities. + +## Packages installed +- @dnd-kit/core, @dnd-kit/sortable, @dnd-kit/utilities +- @tiptap/react, @tiptap/starter-kit, @tiptap/extension-placeholder, @tiptap/extension-mention, @tiptap/extension-task-list, @tiptap/extension-task-item, @tiptap/extension-link, @tiptap/extension-code-block-lowlight, @tiptap/pm, @tiptap/suggestion +- recharts +- react-big-calendar +- react-force-graph-2d +- react-hook-form, @hookform/resolvers +- @tanstack/react-table +- date-fns + +## Notes for T7 +- useApiQuery / useApiMutation patterns in `src/lib/api.ts` are the standard for all data fetching +- EntityDetailPanel in `src/components/entities/` is reusable for any entity +- Forms use controlled state (not react-hook-form yet - T7 can upgrade) +- Calendar and Graph use basic implementations; T8 will formalize with react-big-calendar and react-force-graph-2d +- TipTap is installed but Notes page uses a simple contentEditable for now; T7/T8 can upgrade to full TipTap diff --git a/apps/web/package.json b/apps/web/package.json index 3b84c15..0b88758 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -10,7 +10,11 @@ "typecheck": "tsc --noEmit" }, "dependencies": { + "@dnd-kit/core": "^6.3.1", + "@dnd-kit/sortable": "^10.0.0", + "@dnd-kit/utilities": "^3.2.2", "@github/hotkey": "^3.1.4", + "@hookform/resolvers": "^5.5.7", "@radix-ui/react-accordion": "^1.2.20", "@radix-ui/react-alert-dialog": "^1.1.23", "@radix-ui/react-aspect-ratio": "^1.1.15", @@ -38,12 +42,28 @@ "@radix-ui/react-tooltip": "^1.2.16", "@tanstack/react-query": "^5.62.0", "@tanstack/react-router": "^1.98.0", + "@tanstack/react-table": "^8.21.3", + "@tiptap/extension-code-block-lowlight": "^3.29.2", + "@tiptap/extension-link": "^3.29.2", + "@tiptap/extension-mention": "^3.29.2", + "@tiptap/extension-placeholder": "^3.29.2", + "@tiptap/extension-task-item": "^3.29.2", + "@tiptap/extension-task-list": "^3.29.2", + "@tiptap/pm": "^3.29.2", + "@tiptap/react": "^3.29.2", + "@tiptap/starter-kit": "^3.29.2", + "@tiptap/suggestion": "^3.29.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", + "date-fns": "^4.4.0", "lucide-react": "^1.24.0", "react": "^19.1.0", + "react-big-calendar": "^1.20.0", "react-dom": "^19.1.0", + "react-force-graph-2d": "^1.29.1", + "react-hook-form": "^7.84.0", + "recharts": "^3.10.1", "tailwind-merge": "^3.6.0", "tailwindcss-animate": "^1.0.7", "zod": "^4.4.3", diff --git a/apps/web/src/components/entities/entity-detail-panel.tsx b/apps/web/src/components/entities/entity-detail-panel.tsx new file mode 100644 index 0000000..1a9dda0 --- /dev/null +++ b/apps/web/src/components/entities/entity-detail-panel.tsx @@ -0,0 +1,29 @@ +import { X } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import { Sheet, SheetContent, SheetHeader, SheetTitle } from "@/components/ui/sheet"; + +interface EntityDetailPanelProps { + open: boolean; + onOpenChange: (open: boolean) => void; + title: string; + children: React.ReactNode; +} + +export function EntityDetailPanel({ open, onOpenChange, title, children }: EntityDetailPanelProps) { + return ( + + + + {title} + + + + {children} + + + + ); +} diff --git a/apps/web/src/hooks/use-realtime.ts b/apps/web/src/hooks/use-realtime.ts new file mode 100644 index 0000000..7e85ab3 --- /dev/null +++ b/apps/web/src/hooks/use-realtime.ts @@ -0,0 +1,98 @@ +import { useEffect, useRef, useCallback } from "react"; +import { useQueryClient } from "@tanstack/react-query"; +import type { RealtimeEvent } from "@/lib/types"; + +const API_BASE = "/api"; + +interface UseRealtimeOptions { + workspaceId?: string; + enabled?: boolean; +} + +export function useRealtime(options: UseRealtimeOptions = {}) { + const { workspaceId, enabled = true } = options; + const queryClient = useQueryClient(); + const eventSourceRef = useRef(null); + const reconnectTimeoutRef = useRef>(); + const reconnectAttempts = useRef(0); + + const handleEvent = useCallback( + (event: RealtimeEvent) => { + const entityType = event.type; + const queryKeys: string[][] = []; + + switch (entityType) { + case "task": + queryKeys.push(["tasks"]); + break; + case "habit": + queryKeys.push(["habits"]); + break; + case "project": + queryKeys.push(["projects"]); + break; + case "note": + queryKeys.push(["notes"]); + break; + case "calendar_event": + queryKeys.push(["calendar-events"]); + break; + case "graph_edge": + queryKeys.push(["graph"]); + break; + default: + queryKeys.push([entityType]); + } + + for (const key of queryKeys) { + queryClient.invalidateQueries({ queryKey: key }); + } + }, + [queryClient] + ); + + useEffect(() => { + if (!enabled) return; + + const connect = () => { + const params = new URLSearchParams(); + if (workspaceId) params.set("workspace_id", workspaceId); + + const url = `${API_BASE}/realtime${params.toString() ? "?" + params.toString() : ""}`; + const es = new EventSource(url); + eventSourceRef.current = es; + + es.onopen = () => { + reconnectAttempts.current = 0; + }; + + es.onmessage = (event) => { + try { + const data = JSON.parse(event.data) as RealtimeEvent; + if (data.type === "connected") return; + handleEvent(data); + } catch { + // Ignore malformed messages + } + }; + + es.onerror = () => { + es.close(); + const delay = Math.min(1000 * Math.pow(2, reconnectAttempts.current), 30000); + reconnectAttempts.current++; + reconnectTimeoutRef.current = setTimeout(connect, delay); + }; + }; + + connect(); + + return () => { + if (eventSourceRef.current) { + eventSourceRef.current.close(); + } + if (reconnectTimeoutRef.current) { + clearTimeout(reconnectTimeoutRef.current); + } + }; + }, [workspaceId, enabled, handleEvent]); +} diff --git a/apps/web/src/lib/types/index.ts b/apps/web/src/lib/types/index.ts new file mode 100644 index 0000000..e7d27a6 --- /dev/null +++ b/apps/web/src/lib/types/index.ts @@ -0,0 +1,175 @@ +// Shared types for Project E entities + +export interface Task { + id: string; + title: string; + description: string | null; + status: "todo" | "in_progress" | "done" | "cancelled"; + priority: "low" | "medium" | "high" | "urgent"; + domainId: string; + projectId: string | null; + sectionId: string | null; + parentId: string | null; + dueDate: string | null; + estimatedMinutes: number | null; + order: number; + completedAt: string | null; + createdAt: string; + updatedAt: string; + deletedAt: string | null; + tags: Tag[]; + subtasks?: Task[]; + dependencies?: { id: string; title: string; status: string }[]; + dependents?: { id: string; title: string; status: string }[]; +} + +export interface Habit { + id: string; + name: string; + description: string | null; + domainId: string; + frequency: "daily" | "weekly" | "custom"; + difficulty: "easy" | "medium" | "hard"; + goalPerPeriod: number; + unit: string | null; + reminderTime: string | null; + skipDays: number[]; + moodTracking: boolean; + active: boolean; + streakCount: number; + bestStreak: number; + createdAt: string; + updatedAt: string; + deletedAt: string | null; + tags: Tag[]; + recentCompletions?: HabitCompletion[]; +} + +export interface HabitCompletion { + id: string; + habitId: string; + date: string; + value: number; + mood: number | null; + notes: string | null; + createdAt: string; +} + +export interface Project { + id: string; + name: string; + description: string | null; + domainId: string; + status: "active" | "paused" | "completed" | "archived"; + color: string | null; + icon: string | null; + targetDate: string | null; + createdAt: string; + updatedAt: string; + deletedAt: string | null; + tags: Tag[]; + taskCount: number; + completedCount: number; + progress: number; + sections?: Section[]; + tasks?: Task[]; +} + +export interface Section { + id: string; + name: string; + projectId: string; + kind: "section" | "milestone"; + status: "planned" | "in_progress" | "complete"; + targetDate: string | null; + sortOrder: number; + createdAt: string; + updatedAt: string; +} + +export interface Note { + id: string; + title: string; + content: string | null; + domainId: string; + isPinned: boolean; + isArchived: boolean; + createdAt: string; + updatedAt: string; + deletedAt: string | null; + tags: Tag[]; + backlinks?: Backlink[]; + outgoingLinks?: OutgoingLink[]; +} + +export interface Backlink { + noteId: string; + noteTitle: string; +} + +export interface OutgoingLink { + noteId: string; + noteTitle: string; +} + +export interface CalendarEvent { + id: string; + title: string; + description: string | null; + startTime: string; + endTime: string | null; + allDay: boolean; + color: string | null; + domainId: string; + entityType: string | null; + entityId: string | null; + recurrenceRule: string | null; + createdAt: string; + updatedAt: string; +} + +export interface GraphNode { + id: string; + label: string; + type: string; + color: string; +} + +export interface GraphEdge { + source: string; + target: string; + type: string; +} + +export interface SearchResult { + id: string; + type: string; + title: string; + snippet: string; + score: number; + workspaceId: string; + link: string; +} + +export interface Tag { + id: string; + name: string; + color: string | null; +} + +export interface PaginatedResponse { + items: T[]; + totalItems: number; + totalPages: number; + page: number; + perPage: number; + limit: number; + offset: number; +} + +export interface RealtimeEvent { + type: string; + action: string; + id: string; + workspace_id?: string; +} diff --git a/apps/web/src/routes/_app/calendar.tsx b/apps/web/src/routes/_app/calendar.tsx index b523a32..f734b15 100644 --- a/apps/web/src/routes/_app/calendar.tsx +++ b/apps/web/src/routes/_app/calendar.tsx @@ -1,11 +1,234 @@ +import { useState, useMemo } from "react"; import { createRoute } from "@tanstack/react-router"; import { Route as appRoute } from "../_app"; +import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; +import { api, useApiQuery, useApiMutation } from "@/lib/api"; +import { useRealtime } from "@/hooks/use-realtime"; +import { Calendar as CalendarIcon, ChevronLeft, ChevronRight, Plus, Trash2 } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Badge } from "@/components/ui/badge"; +import { Card, CardContent } from "@/components/ui/card"; +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; +import { Input } from "@/components/ui/input"; +import { Label } from "@/components/ui/label"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"; +import { cn } from "@/lib/utils"; +import type { CalendarEvent, PaginatedResponse } from "@/lib/types"; +import { format, addMonths, subMonths, startOfMonth, endOfMonth, startOfWeek, endOfWeek, eachDayOfInterval, isSameMonth, isSameDay, isToday, parseISO } from "date-fns"; + +function EventForm({ event, onClose }: { event?: CalendarEvent; onClose: () => void }) { + const queryClient = useQueryClient(); + const [title, setTitle] = useState(event?.title || ""); + const [startTime, setStartTime] = useState(event?.startTime ? event.startTime.slice(0, 16) : ""); + const [endTime, setEndTime] = useState(event?.endTime ? event.endTime.slice(0, 16) : ""); + const [allDay, setAllDay] = useState(event?.allDay || false); + const [color, setColor] = useState(event?.color || "#3b82f6"); + + const createMutation = useMutation({ + mutationFn: (data: any) => api.post("/calendar/events", data), + onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["calendar-events"] }); onClose(); }, + }); + + const updateMutation = useMutation({ + mutationFn: (data: any) => api.patch("/calendar/events/" + event!.id, data), + onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["calendar-events"] }); onClose(); }, + }); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (!title.trim()) return; + const data: any = { title: title.trim(), allDay, color }; + if (startTime) data.startTime = new Date(startTime).toISOString(); + if (endTime) data.endTime = new Date(endTime).toISOString(); + if (event) updateMutation.mutate(data); + else createMutation.mutate(data); + }; + + return ( +
+
+ + setTitle(e.target.value)} placeholder="Event title" required /> +
+
+ setAllDay(e.target.checked)} className="rounded" /> + +
+
+
+ + setStartTime(e.target.value)} /> +
+
+ + setEndTime(e.target.value)} /> +
+
+
+ + setColor(e.target.value)} /> +
+
+ + +
+
+ ); +} function CalendarPage() { + const queryClient = useQueryClient(); + const [currentMonth, setCurrentMonth] = useState(new Date()); + const [selectedDate, setSelectedDate] = useState(null); + const [createOpen, setCreateOpen] = useState(false); + const [selectedEvent, setSelectedEvent] = useState(null); + const [eventDetailOpen, setEventDetailOpen] = useState(false); + + useRealtime({ enabled: true }); + + const monthStart = startOfMonth(currentMonth); + const monthEnd = endOfMonth(currentMonth); + const calStart = startOfWeek(monthStart); + const calEnd = endOfWeek(monthEnd); + const days = eachDayOfInterval({ start: calStart, end: calEnd }); + + const { data: eventsData } = useApiQuery<{ items: CalendarEvent[]; totalItems: number }>( + ["calendar-events", currentMonth.toISOString()], + "/calendar/events?from=" + calStart.toISOString() + "&to=" + calEnd.toISOString() + ); + + const events = eventsData?.items || []; + + const deleteMutation = useMutation({ + mutationFn: (id: string) => api.delete("/calendar/events/" + id), + onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["calendar-events"] }); setEventDetailOpen(false); }, + }); + + const dayEvents = useMemo(() => { + const map = new Map(); + for (const event of events) { + const key = new Date(event.startTime).toISOString().slice(0, 10); + if (!map.has(key)) map.set(key, []); + map.get(key)!.push(event); + } + return map; + }, [events]); + return ( -
-

Calendar

-

Coming in T7 — calendar view.

+
+
+

Calendar

+ + + + + + New Event + setCreateOpen(false)} /> + + +
+ + {/* Toolbar */} +
+
+ + + +
+

{format(currentMonth, "MMMM yyyy")}

+
+ + {/* Calendar grid */} +
+
+ {["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"].map((day) => ( +
+ {day} +
+ ))} +
+
+ {days.map((day) => { + const key = format(day, "yyyy-MM-dd"); + const dayEvts = dayEvents.get(key) || []; + return ( +
setSelectedDate(day)} + > +
+ {format(day, "d")} +
+
+ {dayEvts.slice(0, 3).map((evt) => ( +
{ e.stopPropagation(); setSelectedEvent(evt); setEventDetailOpen(true); }} + > + {evt.title} +
+ ))} + {dayEvts.length > 3 && ( +
+{dayEvts.length - 3} more
+ )} +
+
+ ); + })} +
+
+ + {/* Event detail dialog */} + + + + {selectedEvent?.title || "Event"} + + {selectedEvent && ( +
+
+

Start: {new Date(selectedEvent.startTime).toLocaleString()}

+ {selectedEvent.endTime &&

End: {new Date(selectedEvent.endTime).toLocaleString()}

} + {selectedEvent.description &&

{selectedEvent.description}

} +
+ setEventDetailOpen(false)} /> + + + + + + + Delete Event + Are you sure you want to delete "{selectedEvent.title}"? + + + Cancel + deleteMutation.mutate(selectedEvent.id)} className="bg-destructive text-destructive-foreground">Delete + + + +
+ )} + +
); } diff --git a/apps/web/src/routes/_app/graph.tsx b/apps/web/src/routes/_app/graph.tsx index 67613e5..9933ffc 100644 --- a/apps/web/src/routes/_app/graph.tsx +++ b/apps/web/src/routes/_app/graph.tsx @@ -1,11 +1,195 @@ +import { useState, useRef, useCallback, useEffect } from "react"; import { createRoute } from "@tanstack/react-router"; import { Route as appRoute } from "../_app"; +import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; +import { api, useApiQuery, useApiMutation } from "@/lib/api"; +import { useRealtime } from "@/hooks/use-realtime"; +import { Search, ZoomIn, ZoomOut, RotateCcw, Filter } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Badge } from "@/components/ui/badge"; +import { Card, CardContent } from "@/components/ui/card"; +import { Checkbox } from "@/components/ui/checkbox"; +import { Label } from "@/components/ui/label"; +import { Separator } from "@/components/ui/separator"; +import { ScrollArea } from "@/components/ui/scroll-area"; +import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet"; +import { cn } from "@/lib/utils"; +import type { GraphNode, GraphEdge } from "@/lib/types"; + +const ENTITY_TYPES = ["task", "habit", "project", "note", "section", "tag", "domain"]; +const ENTITY_COLORS: Record = { + task: "#3b82f6", + habit: "#10b981", + project: "#8b5cf6", + note: "#f59e0b", + section: "#ec4899", + tag: "#6b7280", + domain: "#6366f1", +}; function GraphPage() { + const queryClient = useQueryClient(); + const containerRef = useRef(null); + const [search, setSearch] = useState(""); + const [filterOpen, setFilterOpen] = useState(false); + const [enabledTypes, setEnabledTypes] = useState>(new Set(ENTITY_TYPES)); + const [selectedNode, setSelectedNode] = useState(null); + const [detailOpen, setDetailOpen] = useState(false); + + useRealtime({ enabled: true }); + + const { data: nodesData } = useApiQuery<{ items: GraphNode[]; totalItems: number }>( + ["graph", "nodes"], + "/graph/nodes?domain=placeholder" + ); + + const { data: edgesData } = useApiQuery<{ items: GraphEdge[]; totalItems: number }>( + ["graph", "edges"], + "/graph/edges?domain=placeholder" + ); + + const allNodes = nodesData?.items || []; + const allEdges = edgesData?.items || []; + + const filteredNodes = allNodes.filter((n) => enabledTypes.has(n.type)); + const filteredNodeIds = new Set(filteredNodes.map((n) => n.id)); + const filteredEdges = allEdges.filter((e) => filteredNodeIds.has(e.source) && filteredNodeIds.has(e.target)); + + const toggleType = (type: string) => { + const next = new Set(enabledTypes); + if (next.has(type)) next.delete(type); + else next.add(type); + setEnabledTypes(next); + }; + return ( -
-

Graph

-

Coming in T7 — knowledge graph.

+
+ {/* Graph canvas area */} +
+ {/* Toolbar */} +
+
+ + setSearch(e.target.value)} + className="pl-8 w-64 bg-background/90 backdrop-blur" + /> +
+ +
+ + {/* Graph visualization */} +
+
+ + {/* Simple force-directed graph visualization */} + {filteredEdges.map((edge, i) => { + const source = filteredNodes.find((n) => n.id === edge.source); + const target = filteredNodes.find((n) => n.id === edge.target); + if (!source || !target) return null; + // Simple circular layout + const srcIdx = filteredNodes.indexOf(source); + const tgtIdx = filteredNodes.indexOf(target); + const total = filteredNodes.length; + const angle1 = (2 * Math.PI * srcIdx) / Math.max(total, 1); + const angle2 = (2 * Math.PI * tgtIdx) / Math.max(total, 1); + const r = 150; + const x1 = 200 + r * Math.cos(angle1); + const y1 = 200 + r * Math.sin(angle1); + const x2 = 200 + r * Math.cos(angle2); + const y2 = 200 + r * Math.sin(angle2); + return ; + })} + {filteredNodes.map((node, i) => { + const total = filteredNodes.length; + const angle = (2 * Math.PI * i) / Math.max(total, 1); + const r = 150; + const x = 200 + r * Math.cos(angle); + const y = 200 + r * Math.sin(angle); + return ( + { setSelectedNode(node); setDetailOpen(true); }} style={{ cursor: "pointer" }}> + + + {node.label.length > 15 ? node.label.slice(0, 15) + "..." : node.label} + + + ); + })} + +

+ {filteredNodes.length} nodes, {filteredEdges.length} edges +

+

+ Full interactive graph with react-force-graph-2d will be available in T8. +

+
+
+
+ + {/* Filter panel */} + + + + Filters + +
+

Entity Types

+ {ENTITY_TYPES.map((type) => ( +
+ toggleType(type)} + /> +
+ + + + {/* Node detail panel */} + + + + {selectedNode?.label || "Node"} + + {selectedNode && ( +
+
+
+ {selectedNode.type} +
+

ID: {selectedNode.id}

+ +

Connected nodes

+
+ {filteredEdges + .filter((e) => e.source === selectedNode.id || e.target === selectedNode.id) + .map((e, i) => { + const connectedId = e.source === selectedNode.id ? e.target : e.source; + const connected = allNodes.find((n) => n.id === connectedId); + return connected ? ( +
+
+ {connected.label} + {e.type} +
+ ) : null; + })} +
+
+ )} + +
); } diff --git a/apps/web/src/routes/_app/habits.tsx b/apps/web/src/routes/_app/habits.tsx index eb40ec0..3b23f5e 100644 --- a/apps/web/src/routes/_app/habits.tsx +++ b/apps/web/src/routes/_app/habits.tsx @@ -1,11 +1,259 @@ +import { useState } from "react"; import { createRoute } from "@tanstack/react-router"; import { Route as appRoute } from "../_app"; +import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query"; +import { api, useApiQuery, useApiMutation } from "@/lib/api"; +import { useRealtime } from "@/hooks/use-realtime"; +import { Plus, Flame, Trash2, Check, Calendar, TrendingUp } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Input } from "@/components/ui/input"; +import { Badge } from "@/components/ui/badge"; +import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; +import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog"; +import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; +import { Label } from "@/components/ui/label"; +import { Textarea } from "@/components/ui/textarea"; +import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog"; +import { EntityDetailPanel } from "@/components/entities/entity-detail-panel"; +import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"; +import { cn } from "@/lib/utils"; +import type { Habit, HabitCompletion, PaginatedResponse } from "@/lib/types"; + +function HabitForm({ habit, onClose }: { habit?: Habit; onClose: () => void }) { + const queryClient = useQueryClient(); + const [name, setName] = useState(habit?.name || ""); + const [description, setDescription] = useState(habit?.description || ""); + const [frequency, setFrequency] = useState(habit?.frequency || "daily"); + const [difficulty, setDifficulty] = useState(habit?.difficulty || "medium"); + const [goalPerPeriod, setGoalPerPeriod] = useState(habit?.goalPerPeriod || 1); + + const createMutation = useMutation({ + mutationFn: (data: any) => api.post("/habits", data), + onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["habits"] }); onClose(); }, + }); + + const updateMutation = useMutation({ + mutationFn: (data: any) => api.patch("/habits/" + habit!.id, data), + onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["habits"] }); onClose(); }, + }); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (!name.trim()) return; + const data = { name: name.trim(), description: description || null, frequency, difficulty, goalPerPeriod }; + if (habit) updateMutation.mutate(data); + else createMutation.mutate(data); + }; + + return ( +
+
+ + setName(e.target.value)} placeholder="Habit name" required /> +
+
+ +