T1/Phase 1: scaffold Vite SPA + Hono API + Bun worker
- apps/web: Vite + React 19 + TanStack Router/Query + shadcn/ui - apps/api: Hono + Bun on :3001 with /api/health, /api/auth/*, /mcp stubs - apps/worker: Bun worker stub, DB connection, graceful SIGTERM - apps/web-legacy/: old Next.js code moved aside (preserved for T2-T8 reference) - Dockerfiles: api (Bun), worker (Bun), spa (multi-stage Caddy) - Caddyfile: serves dist + reverse-proxies /api/* + /mcp to api - docker-compose.yml: 4-service target (api, spa, db, worker) - packages/db/src/client.ts: shared Drizzle client for api + worker - db/client.ts: root-level alias for convenience Parent: t_e1cbd87d -> t_24c9c3fd (T0)
This commit is contained in:
Hermes
@@ -0,0 +1,108 @@
|
||||
'use client';
|
||||
|
||||
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: 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) {
|
||||
// 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 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,57 @@
|
||||
'use client';
|
||||
|
||||
import { Calendar } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
|
||||
export function CalendarMiniWidget() {
|
||||
const today = new Date();
|
||||
const daysInMonth = new Date(
|
||||
today.getFullYear(),
|
||||
today.getMonth() + 1,
|
||||
0
|
||||
).getDate();
|
||||
const firstDay = new Date(
|
||||
today.getFullYear(),
|
||||
today.getMonth(),
|
||||
1
|
||||
).getDay();
|
||||
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Calendar className="h-4 w-4" aria-hidden="true" />
|
||||
{today.toLocaleString('default', { month: 'long' })}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="grid grid-cols-7 gap-1 text-center text-xs">
|
||||
{['S', 'M', 'T', 'W', 'T', 'F', 'S'].map((day, i) => (
|
||||
<div key={i} className="font-semibold text-muted-foreground">
|
||||
{day}
|
||||
</div>
|
||||
))}
|
||||
{Array.from({ length: firstDay }).map((_, i) => (
|
||||
<div key={`empty-${i}`} />
|
||||
))}
|
||||
{Array.from({ length: daysInMonth }).map((_, i) => {
|
||||
const day = i + 1;
|
||||
const isToday = day === today.getDate();
|
||||
return (
|
||||
<div
|
||||
key={day}
|
||||
className={`rounded p-1 ${
|
||||
isToday
|
||||
? 'bg-primary text-primary-foreground font-semibold'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{day}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Flame } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Checkbox } from '@/components/ui/checkbox';
|
||||
|
||||
interface Habit {
|
||||
id: string;
|
||||
name: string;
|
||||
current_streak: number;
|
||||
logged_today: boolean;
|
||||
}
|
||||
|
||||
export function HabitChecklistWidget() {
|
||||
const [habits, setHabits] = useState<Habit[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchHabits();
|
||||
}, []);
|
||||
|
||||
async function fetchHabits() {
|
||||
try {
|
||||
const response = await fetch('/api/habits');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setHabits(data.items || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch habits:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleHabit(id: string) {
|
||||
try {
|
||||
await fetch(`/api/habits/${id}/logs`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({}),
|
||||
});
|
||||
fetchHabits();
|
||||
} catch (error) {
|
||||
console.error('Failed to log habit:', error);
|
||||
}
|
||||
}
|
||||
|
||||
const completedCount = habits.filter((h) => h.logged_today).length;
|
||||
|
||||
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">
|
||||
<Flame className="h-4 w-4 text-orange-500" aria-hidden="true" />
|
||||
Habits
|
||||
</CardTitle>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{completedCount}/{habits.length} done
|
||||
</span>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : habits.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No habits tracked</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{habits.slice(0, 5).map((habit) => (
|
||||
<div key={habit.id} className="flex items-center gap-2">
|
||||
<Checkbox
|
||||
id={habit.id}
|
||||
checked={habit.logged_today}
|
||||
onCheckedChange={() => toggleHabit(habit.id)}
|
||||
aria-label={`Mark "${habit.name}" as ${habit.logged_today ? 'incomplete' : 'complete'}`}
|
||||
/>
|
||||
<label
|
||||
htmlFor={habit.id}
|
||||
className="flex-1 text-sm cursor-pointer"
|
||||
>
|
||||
{habit.name}
|
||||
</label>
|
||||
{habit.current_streak > 0 && (
|
||||
<span className="text-xs text-muted-foreground">
|
||||
🔥 {habit.current_streak}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,62 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Flame } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
|
||||
interface Streak {
|
||||
habit: { name: string };
|
||||
streak_current: number;
|
||||
}
|
||||
|
||||
export function HabitStreaksWidget() {
|
||||
const [streaks, setStreaks] = useState<Streak[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStreaks();
|
||||
}, []);
|
||||
|
||||
async function fetchStreaks() {
|
||||
try {
|
||||
const response = await fetch('/api/habits/streaks');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setStreaks(data.streaks || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch streaks:', error);
|
||||
} finally {
|
||||
setLoading(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">
|
||||
<Flame className="h-4 w-4 text-orange-500" aria-hidden="true" />
|
||||
Top Streaks
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : streaks.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No active streaks</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{streaks.slice(0, 5).map((streak, i) => (
|
||||
<div key={i} className="flex items-center justify-between">
|
||||
<span className="text-sm">{streak.habit.name}</span>
|
||||
<span className="text-sm font-semibold">
|
||||
🔥 {streak.streak_current}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { FolderKanban } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
name: string;
|
||||
progress: number;
|
||||
}
|
||||
|
||||
export function ProjectProgressWidget() {
|
||||
const [projects, setProjects] = useState<Project[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchProjects();
|
||||
}, []);
|
||||
|
||||
async function fetchProjects() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
'/api/projects?filter=status%3D%22active%22&perPage=5'
|
||||
);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
const items = data.items || [];
|
||||
// Fetch progress for each project since the list API doesn't include it
|
||||
const withProgress = await Promise.all(
|
||||
items.map(async (p: { id: string; name: string }) => {
|
||||
try {
|
||||
const progRes = await fetch(`/api/projects/${p.id}/progress`);
|
||||
if (progRes.ok) {
|
||||
const progData = await progRes.json();
|
||||
return { ...p, progress: progData.progress ?? 0 };
|
||||
}
|
||||
} catch {}
|
||||
return { ...p, progress: 0 };
|
||||
})
|
||||
);
|
||||
setProjects(withProgress);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch projects:', error);
|
||||
} finally {
|
||||
setLoading(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">
|
||||
<FolderKanban className="h-4 w-4" aria-hidden="true" />
|
||||
Active Projects
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : projects.length === 0 ? (
|
||||
<p className="text-sm text-muted-foreground">No active projects</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{projects.map((project) => (
|
||||
<div key={project.id}>
|
||||
<div className="mb-1 flex items-center justify-between">
|
||||
<span className="text-sm">{project.name}</span>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{project.progress}%
|
||||
</span>
|
||||
</div>
|
||||
<Progress value={project.progress} className="h-2" aria-label={`${project.name} progress: ${project.progress}%`} />
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
'use client';
|
||||
|
||||
import { Plus } from 'lucide-react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
|
||||
export function QuickAddWidget() {
|
||||
const router = useRouter();
|
||||
|
||||
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 Add
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="justify-start"
|
||||
onClick={() => router.push('/tasks?new=true')}
|
||||
>
|
||||
New task
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="justify-start"
|
||||
onClick={() => router.push('/habits?new=true')}
|
||||
>
|
||||
New habit
|
||||
</Button>
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
className="justify-start"
|
||||
onClick={() => router.push('/notes?new=true')}
|
||||
>
|
||||
New note
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,78 @@
|
||||
'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 { toast } from 'sonner';
|
||||
|
||||
export function QuickCaptureWidget() {
|
||||
const [type, setType] = useState('task');
|
||||
const [title, setTitle] = useState('');
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
async function handleSubmit(e: React.FormEvent) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (!title.trim()) return;
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const res = await fetch('/api/quick-capture', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ type, text: title.trim() }),
|
||||
});
|
||||
|
||||
if (res.ok) {
|
||||
setTitle('');
|
||||
toast.success(type.charAt(0).toUpperCase() + type.slice(1) + ' created');
|
||||
} else {
|
||||
const err = await res.json().catch(() => ({ error: 'Unknown error' }));
|
||||
toast.error(err.error || 'Failed to create');
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Quick capture failed:', err);
|
||||
toast.error('Failed to create');
|
||||
} 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>
|
||||
<SelectItem value="project">Project</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input
|
||||
value={title}
|
||||
onChange={(e) => setTitle(e.target.value)}
|
||||
placeholder="Quick add..."
|
||||
className="flex-1"
|
||||
/>
|
||||
<Button type="button" size="icon" disabled={submitting || !title.trim()} onClick={(e) => { e.stopPropagation(); handleSubmit(e); }}>
|
||||
<Send className="h-4 w-4" />
|
||||
</Button>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,22 @@
|
||||
'use client';
|
||||
|
||||
import { Activity } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
|
||||
export function RecentActivityWidget() {
|
||||
return (
|
||||
<Card className="h-full border-0 shadow-none">
|
||||
<CardHeader className="p-0 pb-3">
|
||||
<CardTitle className="flex items-center gap-2 text-base">
|
||||
<Activity className="h-4 w-4" aria-hidden="true" />
|
||||
Recent Activity
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Activity feed coming soon
|
||||
</p>
|
||||
</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,127 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { CheckCircle2, Circle, ListTodo } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Badge } from '@/components/ui/badge';
|
||||
import { useRouter } from 'next/navigation';
|
||||
|
||||
interface Task {
|
||||
id: string;
|
||||
title: string;
|
||||
status: string;
|
||||
priority: string;
|
||||
domain: string;
|
||||
}
|
||||
|
||||
interface Domain { id: string; name: string; color: string; }
|
||||
|
||||
export function TodayTasksWidget() {
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [domainMap, setDomainMap] = useState<Map<string, string>>(new Map());
|
||||
const router = useRouter();
|
||||
|
||||
useEffect(() => {
|
||||
fetchTasks();
|
||||
fetchDomains();
|
||||
}, []);
|
||||
|
||||
async function fetchDomains() {
|
||||
try {
|
||||
const res = await fetch("/api/domains?sort=sort_order");
|
||||
if (res.ok) {
|
||||
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 {}
|
||||
}
|
||||
|
||||
async function fetchTasks() {
|
||||
try {
|
||||
const response = await fetch(
|
||||
'/api/tasks?filter=status!%3D%22done%22&perPage=5&sort=-priority'
|
||||
);
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setTasks(data.items || []);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch tasks:', error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
async function toggleTask(id: string, currentStatus: string) {
|
||||
const newStatus = currentStatus === 'done' ? 'todo' : 'done';
|
||||
try {
|
||||
await fetch(`/api/tasks/${id}`, {
|
||||
method: 'PATCH',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ status: newStatus }),
|
||||
});
|
||||
fetchTasks();
|
||||
} catch (error) {
|
||||
console.error('Failed to toggle task:', error);
|
||||
}
|
||||
}
|
||||
|
||||
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">
|
||||
<ListTodo className="h-4 w-4" aria-hidden="true" />
|
||||
Today's Tasks
|
||||
</CardTitle>
|
||||
<Button variant="ghost" size="sm" className="h-7 text-xs" onClick={() => router.push('/tasks')}>
|
||||
View all
|
||||
</Button>
|
||||
</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 tasks for today</p>
|
||||
) : (
|
||||
<div className="space-y-2">
|
||||
{tasks.map((task) => (
|
||||
<div key={task.id} className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-11 w-11 shrink-0"
|
||||
onClick={() => toggleTask(task.id, task.status)}
|
||||
aria-label={`Mark "${task.title}" as ${task.status === 'done' ? 'incomplete' : 'complete'}`}
|
||||
>
|
||||
{task.status === 'done' ? (
|
||||
<CheckCircle2 className="h-4 w-4 text-green-600" />
|
||||
) : (
|
||||
<Circle className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
<span
|
||||
className={`flex-1 text-sm ${
|
||||
task.status === 'done'
|
||||
? 'line-through text-muted-foreground'
|
||||
: ''
|
||||
}`}
|
||||
>
|
||||
{task.title}
|
||||
</span>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{domainMap.get(task.domain) || task.domain}
|
||||
</Badge>
|
||||
</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>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { BarChart3, TrendingUp } from 'lucide-react';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
|
||||
interface WeeklyStats {
|
||||
taskCompletionRate: number;
|
||||
habitConsistency: number;
|
||||
totalTimeMinutes: number;
|
||||
}
|
||||
|
||||
export function WeeklyStatsWidget() {
|
||||
const [stats, setStats] = useState<WeeklyStats>({
|
||||
taskCompletionRate: 0,
|
||||
habitConsistency: 0,
|
||||
totalTimeMinutes: 0,
|
||||
});
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
async function fetchStats() {
|
||||
try {
|
||||
const response = await fetch('/api/analytics?period=7');
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
setStats(data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch stats:', error);
|
||||
} finally {
|
||||
setLoading(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">
|
||||
<BarChart3 className="h-4 w-4" aria-hidden="true" />
|
||||
This Week
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
{loading ? (
|
||||
<p className="text-sm text-muted-foreground">Loading...</p>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Task completion
|
||||
</span>
|
||||
<div className="flex items-center gap-1">
|
||||
<span className="text-sm font-semibold">
|
||||
{stats.taskCompletionRate}%
|
||||
</span>
|
||||
<TrendingUp className="h-3 w-3 text-green-600" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Habit consistency
|
||||
</span>
|
||||
<span className="text-sm font-semibold">
|
||||
{stats.habitConsistency}%
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-sm text-muted-foreground">
|
||||
Time tracked
|
||||
</span>
|
||||
<span className="text-sm font-semibold">
|
||||
{Math.round(stats.totalTimeMinutes / 60)}h
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user