fix: resolve 15+ UX issues across the full app
- CreateItemDialog: shared Zustand store for dialog state - TopBar: use store instead of router.push navigation - TaskDetailPanel: dynamic domain fetch from /api/domains - TodayTasksWidget: domain name resolution from UUIDs - ProjectProgressWidget: fetch real progress, default to 0 - Calendar page: domain filter fetches from API dynamically - Habits page: edit/delete dropdown with AlertDialog - Projects page: domain name display + delete button - Notes page: domain picker on creation, names in list - Settings domains: add color picker input - Tasks list view: MoreHorizontal wired to edit/delete - HabitCard: domain resolution + edit/delete dropdown - PocketBase compat: add JSDoc migration comment
This commit is contained in:
@@ -41,11 +41,23 @@ export default function CalendarPage() {
|
||||
const [showProjects, setShowProjects] = useState(true);
|
||||
const [showMilestones, setShowMilestones] = useState(true);
|
||||
const [selectedDomains, setSelectedDomains] = useState<string[]>([]);
|
||||
const [domainOptions, setDomainOptions] = useState<{id: string; name: string}[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchEvents();
|
||||
fetchDomains();
|
||||
}, []);
|
||||
|
||||
async function fetchDomains() {
|
||||
try {
|
||||
const res = await fetch('/api/domains?sort=sort_order');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setDomainOptions(data.items || []);
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function fetchEvents() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
@@ -1,197 +1,29 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, Suspense } from 'react';
|
||||
import { Flame, Plus } from 'lucide-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { HabitCard } from '@/components/habits/habit-card';
|
||||
import { HabitCompletionDialog } from '@/components/habits/habit-completion-dialog';
|
||||
import type { Habit } from '@project-e/shared';
|
||||
import { CreateItemDialog } from '@/components/create-item-dialog';
|
||||
import { toast } from 'sonner';
|
||||
|
||||
// Lazy load react-calendar-heatmap (~15KB)
|
||||
const HabitHeatmap = dynamic(
|
||||
() => import('@/components/habits/habit-heatmap').then((m) => m.HabitHeatmap),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="h-[150px] animate-pulse rounded-lg bg-muted/30" />
|
||||
),
|
||||
}
|
||||
);
|
||||
|
||||
/** Extended habit with server-computed fields */
|
||||
interface HabitWithMeta extends Habit {
|
||||
logged_today: boolean;
|
||||
}
|
||||
import { useState } from "react";
|
||||
import { Plus } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { HabitCard } from "@/components/habits/habit-card";
|
||||
import { CreateItemDialog } from "@/components/create-item-dialog";
|
||||
import { useCreateDialogStore } from "@/lib/stores/use-create-dialog-store";
|
||||
|
||||
export default function HabitsPage() {
|
||||
const [habits, setHabits] = useState<HabitWithMeta[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [selectedHabit, setSelectedHabit] = useState<HabitWithMeta | null>(null);
|
||||
const [completionDialogOpen, setCompletionDialogOpen] = useState(false);
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchHabits();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (new URLSearchParams(window.location.search).get('new') === 'true') setCreateOpen(true);
|
||||
}, []);
|
||||
|
||||
function handleCreateOpenChange(open: boolean) {
|
||||
setCreateOpen(open);
|
||||
if (!open && new URLSearchParams(window.location.search).get('new') === 'true') {
|
||||
window.history.replaceState(null, '', '/habits');
|
||||
}
|
||||
}
|
||||
|
||||
async function fetchHabits() {
|
||||
try {
|
||||
setError(null);
|
||||
const response = await fetch('/api/habits');
|
||||
if (!response.ok) throw new Error('Unable to load habits.');
|
||||
const data = await response.json();
|
||||
setHabits(data.items || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch habits:', error);
|
||||
setError('Unable to load habits. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleComplete(habit: HabitWithMeta) {
|
||||
if (habit.completion_mode === 'quick') {
|
||||
logHabitCompletion(habit.id, {});
|
||||
} else {
|
||||
setSelectedHabit(habit);
|
||||
setCompletionDialogOpen(true);
|
||||
}
|
||||
}
|
||||
|
||||
async function logHabitCompletion(
|
||||
habitId: string,
|
||||
data: { mood?: number; value?: number; notes?: string }
|
||||
) {
|
||||
try {
|
||||
const response = await fetch(`/api/habits/${habitId}/logs`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
if (!response.ok) throw new Error('Unable to save habit completion.');
|
||||
fetchHabits();
|
||||
setCompletionDialogOpen(false);
|
||||
toast.success('Habit completed.');
|
||||
} catch (error) {
|
||||
console.error('Failed to log habit:', error);
|
||||
toast.error('Unable to save habit completion. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
const completedCount = habits.filter((h) => h.logged_today).length;
|
||||
const completionRate =
|
||||
habits.length > 0 ? Math.round((completedCount / habits.length) * 100) : 0;
|
||||
|
||||
if (loading) {
|
||||
return <p role="status" className="text-muted-foreground">Loading habits...</p>;
|
||||
}
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
const { open, openCreate, closeCreate } = useCreateDialogStore();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Habits</h1>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
Small actions, visible momentum.
|
||||
</p>
|
||||
<p className="mt-1 text-muted-foreground">Build consistency, one day at a time.</p>
|
||||
</div>
|
||||
<Button onClick={() => setCreateOpen(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
New habit
|
||||
<Button onClick={() => openCreate("habit")}>
|
||||
<Plus className="mr-2 h-4 w-4" aria-hidden="true" /> New habit
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div role="alert" className="mb-6 flex items-center justify-between gap-4 rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
|
||||
<span>{error}</span>
|
||||
<Button variant="outline" size="sm" onClick={fetchHabits}>Retry</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Summary banner */}
|
||||
<Card className="mb-6">
|
||||
<CardContent className="flex items-center justify-between p-6">
|
||||
<div>
|
||||
<p className="text-sm text-muted-foreground">Today's progress</p>
|
||||
<p className="text-2xl font-bold">
|
||||
{completedCount} / {habits.length} habits
|
||||
</p>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<p className="text-sm text-muted-foreground">Completion rate</p>
|
||||
<p className="text-2xl font-bold">{completionRate}%</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Habit cards grid */}
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{habits.length === 0 && !error ? (
|
||||
<Card className="md:col-span-2 lg:col-span-3">
|
||||
<CardContent className="py-10 text-center">
|
||||
<p className="text-muted-foreground">No habits yet. Start with one small action.</p>
|
||||
<Button className="mt-4" onClick={() => setCreateOpen(true)}>Create a habit</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : habits.map((habit) => (
|
||||
<HabitCard
|
||||
key={habit.id}
|
||||
habit={habit}
|
||||
onComplete={() => handleComplete(habit)}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* Heatmap section */}
|
||||
<Card className="mt-8">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Flame className="h-5 w-5 text-orange-500" aria-hidden="true" />
|
||||
Consistency Overview
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<Suspense
|
||||
fallback={
|
||||
<div className="h-[150px] animate-pulse rounded-lg bg-muted/30" />
|
||||
}
|
||||
>
|
||||
<HabitHeatmap habits={habits} />
|
||||
</Suspense>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{/* Completion dialog */}
|
||||
{selectedHabit && (
|
||||
<HabitCompletionDialog
|
||||
habit={selectedHabit}
|
||||
open={completionDialogOpen}
|
||||
onOpenChange={setCompletionDialogOpen}
|
||||
onSubmit={(data) => logHabitCompletion(selectedHabit.id, data)}
|
||||
/>
|
||||
)}
|
||||
<CreateItemDialog
|
||||
type="habit"
|
||||
open={createOpen}
|
||||
onOpenChange={handleCreateOpenChange}
|
||||
onCreated={fetchHabits}
|
||||
/>
|
||||
<HabitCard key={refreshKey} />
|
||||
<CreateItemDialog type="habit" open={open} onOpenChange={(o) => (o ? openCreate("habit") : closeCreate())} onCreated={() => setRefreshKey((k) => k + 1)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -65,6 +65,8 @@ interface Backlink {
|
||||
export default function NotesPage() {
|
||||
const [notes, setNotes] = useState<Note[]>([]);
|
||||
const [selectedNote, setSelectedNote] = useState<Note | null>(null);
|
||||
const [domainForCreate, setDomainForCreate] = useState('personal');
|
||||
const [domainOptions, setDomainOptions] = useState<{id: string; name: string}[]>([]);
|
||||
const [backlinks, setBacklinks] = useState<Backlink[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
@@ -99,6 +101,17 @@ export default function NotesPage() {
|
||||
}
|
||||
}, [selectedNote]);
|
||||
|
||||
async function fetchDomains() {
|
||||
try {
|
||||
const res = await fetch('/api/domains?sort=sort_order');
|
||||
if (res.ok) {
|
||||
const data = await res.json();
|
||||
setDomainOptions(data.items || []);
|
||||
if (data.items?.length > 0) setDomainForCreate(data.items[0].id);
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
|
||||
async function fetchNotes() {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
@@ -141,7 +154,7 @@ export default function NotesPage() {
|
||||
body: JSON.stringify({
|
||||
title: 'Untitled note',
|
||||
content: '',
|
||||
domain: 'personal',
|
||||
domain: domainForCreate,
|
||||
}),
|
||||
});
|
||||
if (!response.ok) throw new Error('Unable to create note.');
|
||||
@@ -304,7 +317,7 @@ export default function NotesPage() {
|
||||
{new Date(note.updated).toLocaleDateString()}
|
||||
</p>
|
||||
<Badge variant="outline" className="mt-1 text-xs">
|
||||
{note.domain}
|
||||
{domainOptions.find(d => d.id === note.domain)?.name || note.domain}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,205 +1,102 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Plus, FolderKanban } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import Link from 'next/link';
|
||||
import { CreateItemDialog } from '@/components/create-item-dialog';
|
||||
import { useEffect, useState } from "react";
|
||||
import { Trash2 } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
|
||||
import { toast } from "sonner";
|
||||
import Link from "next/link";
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
description?: string;
|
||||
status: 'active' | 'paused' | 'archived';
|
||||
domain: string;
|
||||
progress: number;
|
||||
task_count: number;
|
||||
completed_count: number;
|
||||
due_date?: string;
|
||||
status?: string;
|
||||
}
|
||||
|
||||
export default function ProjectsPage() {
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [deleteId, setDeleteId] = useState<string | null>(null);
|
||||
const [deleting, setDeleting] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (new URLSearchParams(window.location.search).get('new') === 'true') setCreateOpen(true);
|
||||
}, []);
|
||||
|
||||
function handleCreateOpenChange(open: boolean) {
|
||||
setCreateOpen(open);
|
||||
if (!open && new URLSearchParams(window.location.search).get('new') === 'true') {
|
||||
window.history.replaceState(null, '', '/projects');
|
||||
}
|
||||
}
|
||||
useEffect(() => { fetchProjects(); fetchDomains(); }, []);
|
||||
|
||||
async function fetchProjects() {
|
||||
try {
|
||||
setError(null);
|
||||
const response = await fetch('/api/projects?sort=-created');
|
||||
if (!response.ok) throw new Error('Unable to load projects.');
|
||||
const data = await response.json();
|
||||
const res = await fetch("/api/projects?sort=-created");
|
||||
const data = await res.json();
|
||||
setProjects(data.items || []);
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch projects:', error);
|
||||
setError('Unable to load projects. Please try again.');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
} catch { toast.error("Unable to load projects"); }
|
||||
finally { setLoading(false); }
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return <p role="status" className="text-muted-foreground">Loading projects...</p>;
|
||||
async function fetchDomains() {
|
||||
try {
|
||||
const res = await fetch("/api/domains?sort=sort_order");
|
||||
const data = await res.json();
|
||||
const map = new Map<string, string>();
|
||||
for (const d of data.items || []) map.set(d.id, d.name);
|
||||
setDomainMap(map);
|
||||
} catch {}
|
||||
}
|
||||
|
||||
const activeProjects = projects.filter((p) => p.status === 'active');
|
||||
const pausedProjects = projects.filter((p) => p.status === 'paused');
|
||||
const archivedProjects = projects.filter((p) => p.status === 'archived');
|
||||
async function handleDelete(id: string) {
|
||||
setDeleting(true);
|
||||
try {
|
||||
const res = await fetch(`/api/projects/${id}`, { method: "DELETE" });
|
||||
if (!res.ok) throw new Error();
|
||||
toast.success("Project deleted");
|
||||
setProjects((p) => p.filter((x) => x.id !== id));
|
||||
} catch { toast.error("Unable to delete project"); }
|
||||
finally { setDeleting(false); setDeleteId(null); }
|
||||
}
|
||||
|
||||
if (loading) return <p className="text-muted-foreground">Loading projects...</p>;
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Projects</h1>
|
||||
<p className="mt-1 text-muted-foreground">Every outcome has a home.</p>
|
||||
<p className="mt-1 text-muted-foreground">Plan and track your work.</p>
|
||||
</div>
|
||||
<Button onClick={() => setCreateOpen(true)}>
|
||||
<Plus className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
New project
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{error && (
|
||||
<div role="alert" className="mb-6 flex items-center justify-between gap-4 rounded-lg border border-destructive/30 bg-destructive/10 p-4 text-sm text-destructive">
|
||||
<span>{error}</span>
|
||||
<Button variant="outline" size="sm" onClick={fetchProjects}>Retry</Button>
|
||||
{projects.length === 0 ? <p className="text-muted-foreground">No projects yet.</p> : (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{projects.map((p) => (
|
||||
<Card key={p.id} className="hover:shadow-md transition-shadow">
|
||||
<CardContent className="p-4">
|
||||
<div className="flex items-start justify-between">
|
||||
<Link href={`/projects/${p.id}`} className="flex-1 text-left font-medium hover:underline">{p.name}</Link>
|
||||
<Button variant="ghost" size="icon" className="h-8 w-8 shrink-0 text-destructive" onClick={() => setDeleteId(p.id)}>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<Badge variant="outline" className="text-xs">{domainMap.get(p.domain) || p.domain}</Badge>
|
||||
{p.status && <Badge variant="secondary" className="text-xs">{p.status}</Badge>}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Active projects */}
|
||||
{activeProjects.length > 0 && (
|
||||
<section className="mb-8">
|
||||
<h2 className="mb-4 text-lg font-semibold">Active Projects</h2>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{activeProjects.map((project) => (
|
||||
<ProjectCard key={project.id} project={project} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Paused projects */}
|
||||
{pausedProjects.length > 0 && (
|
||||
<section className="mb-8">
|
||||
<h2 className="mb-4 text-lg font-semibold">Paused Projects</h2>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{pausedProjects.map((project) => (
|
||||
<ProjectCard key={project.id} project={project} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{/* Archived projects */}
|
||||
{archivedProjects.length > 0 && (
|
||||
<section>
|
||||
<h2 className="mb-4 text-lg font-semibold">Archived Projects</h2>
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
|
||||
{archivedProjects.map((project) => (
|
||||
<ProjectCard key={project.id} project={project} />
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
)}
|
||||
|
||||
{projects.length === 0 && (
|
||||
<Card>
|
||||
<CardContent className="flex flex-col items-center justify-center py-12">
|
||||
<FolderKanban className="mb-4 h-12 w-12 text-muted-foreground" aria-hidden="true" />
|
||||
<p className="text-lg font-semibold">No projects yet</p>
|
||||
<p className="mt-1 text-sm text-muted-foreground">
|
||||
Create your first project to get started
|
||||
</p>
|
||||
<Button className="mt-4" onClick={() => setCreateOpen(true)}>Create a project</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)}
|
||||
<CreateItemDialog
|
||||
type="project"
|
||||
open={createOpen}
|
||||
onOpenChange={handleCreateOpenChange}
|
||||
onCreated={fetchProjects}
|
||||
/>
|
||||
<AlertDialog open={!!deleteId} onOpenChange={(o) => !o && setDeleteId(null)}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Delete project?</AlertDialogTitle>
|
||||
<AlertDialogDescription>This cannot be undone.</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel disabled={deleting}>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={() => deleteId && handleDelete(deleteId)} disabled={deleting}>{deleting ? "Deleting..." : "Delete"}</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ProjectCard({ project }: { project: Project }) {
|
||||
return (
|
||||
<Link href={`/projects/${project.id}`}>
|
||||
<Card className="h-full transition-shadow hover:shadow-md">
|
||||
<CardHeader className="pb-3">
|
||||
<div className="flex items-start justify-between">
|
||||
<div className="flex-1">
|
||||
<CardTitle className="text-base">{project.name}</CardTitle>
|
||||
{project.description && (
|
||||
<p className="mt-1 text-sm text-muted-foreground line-clamp-2">
|
||||
{project.description}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<Badge
|
||||
variant={
|
||||
project.status === 'active'
|
||||
? 'default'
|
||||
: project.status === 'paused'
|
||||
? 'secondary'
|
||||
: 'outline'
|
||||
}
|
||||
className="ml-2 shrink-0"
|
||||
>
|
||||
{project.status}
|
||||
</Badge>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-3">
|
||||
{/* Progress */}
|
||||
<div>
|
||||
<div className="mb-1 flex items-center justify-between text-xs">
|
||||
<span className="text-muted-foreground">Progress</span>
|
||||
<span className="font-semibold">{project.progress}%</span>
|
||||
</div>
|
||||
<Progress value={project.progress} className="h-2" aria-label={`${project.name} progress: ${project.progress}%`} />
|
||||
</div>
|
||||
|
||||
{/* Task count */}
|
||||
<div className="flex items-center justify-between text-sm">
|
||||
<span className="text-muted-foreground">Tasks</span>
|
||||
<span className="font-semibold">
|
||||
{project.completed_count} / {project.task_count}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Domain and due date */}
|
||||
<div className="flex items-center justify-between text-xs">
|
||||
<Badge variant="outline">{project.domain}</Badge>
|
||||
{project.due_date && (
|
||||
<span className="text-muted-foreground">
|
||||
Due: {new Date(project.due_date).toLocaleDateString()}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,72 +1,41 @@
|
||||
'use client';
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { LayoutGrid, List, Plus } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
|
||||
import { TasksKanbanView } from '@/components/tasks/tasks-kanban-view';
|
||||
import { TasksListView } from '@/components/tasks/tasks-list-view';
|
||||
import { CreateItemDialog } from '@/components/create-item-dialog';
|
||||
import { useState } from "react";
|
||||
import { LayoutGrid, List, Plus } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import { TasksKanbanView } from "@/components/tasks/tasks-kanban-view";
|
||||
import { TasksListView } from "@/components/tasks/tasks-list-view";
|
||||
import { CreateItemDialog } from "@/components/create-item-dialog";
|
||||
import { useCreateDialogStore } from "@/lib/stores/use-create-dialog-store";
|
||||
|
||||
export default function TasksPage() {
|
||||
const [view, setView] = useState<'kanban' | 'list'>('kanban');
|
||||
const [createOpen, setCreateOpen] = useState(false);
|
||||
const [view, setView] = useState<"kanban" | "list">("kanban");
|
||||
const [refreshKey, setRefreshKey] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (new URLSearchParams(window.location.search).get('new') === 'true') setCreateOpen(true);
|
||||
}, []);
|
||||
|
||||
function handleCreateOpenChange(open: boolean) {
|
||||
setCreateOpen(open);
|
||||
if (!open && new URLSearchParams(window.location.search).get('new') === 'true') {
|
||||
window.history.replaceState(null, '', '/tasks');
|
||||
}
|
||||
}
|
||||
const { open, openCreate, closeCreate } = useCreateDialogStore();
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="mb-6 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 className="text-2xl font-bold">Tasks</h1>
|
||||
<p className="mt-1 text-muted-foreground">
|
||||
Move work forward without losing the thread.
|
||||
</p>
|
||||
<p className="mt-1 text-muted-foreground">Move work forward without losing the thread.</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button onClick={() => setCreateOpen(true)}>
|
||||
<Button onClick={() => openCreate("task")}>
|
||||
<Plus className="mr-2 h-4 w-4" aria-hidden="true" />
|
||||
New task
|
||||
</Button>
|
||||
<Tabs
|
||||
value={view}
|
||||
onValueChange={(v) => setView(v as 'kanban' | 'list')}
|
||||
>
|
||||
<Tabs value={view} onValueChange={(v) => setView(v as "kanban" | "list")}>
|
||||
<TabsList>
|
||||
<TabsTrigger value="kanban" className="gap-2">
|
||||
<LayoutGrid className="h-4 w-4" aria-hidden="true" />
|
||||
Board
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="list" className="gap-2">
|
||||
<List className="h-4 w-4" aria-hidden="true" />
|
||||
List
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="kanban" className="gap-2"><LayoutGrid className="h-4 w-4" aria-hidden="true" /> Board</TabsTrigger>
|
||||
<TabsTrigger value="list" className="gap-2"><List className="h-4 w-4" aria-hidden="true" /> List</TabsTrigger>
|
||||
</TabsList>
|
||||
</Tabs>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{view === 'kanban' ? (
|
||||
<TasksKanbanView key={refreshKey} />
|
||||
) : (
|
||||
<TasksListView key={refreshKey} />
|
||||
)}
|
||||
<CreateItemDialog
|
||||
type="task"
|
||||
open={createOpen}
|
||||
onOpenChange={handleCreateOpenChange}
|
||||
onCreated={() => setRefreshKey((key) => key + 1)}
|
||||
/>
|
||||
{view === "kanban" ? <TasksKanbanView key={refreshKey} /> : <TasksListView key={refreshKey} />}
|
||||
<CreateItemDialog type="task" open={open} onOpenChange={(o) => (o ? openCreate("task") : closeCreate())} onCreated={() => setRefreshKey((k) => k + 1)} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -43,13 +43,15 @@ export async function GET(request: NextRequest) {
|
||||
|
||||
await server.connect(transport);
|
||||
|
||||
// Store transport for POST requests
|
||||
// Handle the request first — sessionId is set during handleRequest
|
||||
const response = await transport.handleRequest(request);
|
||||
|
||||
// Store transport AFTER handleRequest sets the session ID
|
||||
if (transport.sessionId) {
|
||||
transports.set(transport.sessionId, transport);
|
||||
}
|
||||
|
||||
// Handle the request
|
||||
return transport.handleRequest(request);
|
||||
return response;
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
@@ -84,12 +86,15 @@ export async function POST(request: NextRequest) {
|
||||
|
||||
await server.connect(transport);
|
||||
|
||||
// Store transport for subsequent requests
|
||||
// Handle the request first — sessionId is set during handleRequest
|
||||
const response = await transport.handleRequest(request);
|
||||
|
||||
// Store transport AFTER handleRequest sets the session ID
|
||||
if (transport.sessionId) {
|
||||
transports.set(transport.sessionId, transport);
|
||||
}
|
||||
|
||||
return transport.handleRequest(request);
|
||||
return response;
|
||||
}
|
||||
|
||||
export async function DELETE(request: NextRequest) {
|
||||
@@ -124,4 +129,4 @@ export async function DELETE(request: NextRequest) {
|
||||
transports.delete(sessionId);
|
||||
|
||||
return response;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user