Add one-off tasks/appointments feature
- DB: tasks table with scheduled_datetime, reminder_minutes_before, advance_notified, status - API: CRUD routes GET/POST /api/tasks, PATCH/DELETE /api/tasks/<id> - Scheduler: check_task_reminders() fires advance + at-time notifications, tracks advance_notified to prevent double-fire - Bot: handle_task() with add/list/done/cancel/delete actions + datetime resolution helper - AI: task interaction type + examples added to command_parser - Web: task list page with overdue/notified color coding + new task form with datetime-local picker - Nav: replaced Templates with Tasks in bottom nav Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -14,8 +14,7 @@ import {
|
||||
PillIcon,
|
||||
SettingsIcon,
|
||||
LogOutIcon,
|
||||
CopyIcon,
|
||||
|
||||
ClockIcon,
|
||||
SunIcon,
|
||||
MoonIcon,
|
||||
} from '@/components/ui/Icons';
|
||||
@@ -24,7 +23,7 @@ import Link from 'next/link';
|
||||
const navItems = [
|
||||
{ href: '/dashboard', label: 'Today', icon: HomeIcon },
|
||||
{ href: '/dashboard/routines', label: 'Routines', icon: ListIcon },
|
||||
{ href: '/dashboard/templates', label: 'Templates', icon: CopyIcon },
|
||||
{ href: '/dashboard/tasks', label: 'Tasks', icon: ClockIcon },
|
||||
{ href: '/dashboard/history', label: 'History', icon: CalendarIcon },
|
||||
{ href: '/dashboard/stats', label: 'Stats', icon: BarChartIcon },
|
||||
{ href: '/dashboard/medications', label: 'Meds', icon: PillIcon },
|
||||
|
||||
150
synculous-client/src/app/dashboard/tasks/new/page.tsx
Normal file
150
synculous-client/src/app/dashboard/tasks/new/page.tsx
Normal file
@@ -0,0 +1,150 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import api from '@/lib/api';
|
||||
import { ArrowLeftIcon } from '@/components/ui/Icons';
|
||||
|
||||
const REMINDER_OPTIONS = [
|
||||
{ label: 'No reminder', value: 0 },
|
||||
{ label: '5 minutes before', value: 5 },
|
||||
{ label: '10 minutes before', value: 10 },
|
||||
{ label: '15 minutes before', value: 15 },
|
||||
{ label: '30 minutes before', value: 30 },
|
||||
{ label: '1 hour before', value: 60 },
|
||||
];
|
||||
|
||||
function localDatetimeDefault(): string {
|
||||
const now = new Date();
|
||||
now.setMinutes(now.getMinutes() + 60, 0, 0);
|
||||
const pad = (n: number) => String(n).padStart(2, '0');
|
||||
return `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}T${pad(now.getHours())}:${pad(now.getMinutes())}`;
|
||||
}
|
||||
|
||||
export default function NewTaskPage() {
|
||||
const router = useRouter();
|
||||
const [title, setTitle] = useState('');
|
||||
const [description, setDescription] = useState('');
|
||||
const [scheduledDatetime, setScheduledDatetime] = useState(localDatetimeDefault);
|
||||
const [reminderMinutes, setReminderMinutes] = useState(15);
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [error, setError] = useState('');
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!title.trim()) {
|
||||
setError('Title is required.');
|
||||
return;
|
||||
}
|
||||
if (!scheduledDatetime) {
|
||||
setError('Date and time are required.');
|
||||
return;
|
||||
}
|
||||
setIsSubmitting(true);
|
||||
setError('');
|
||||
try {
|
||||
await api.tasks.create({
|
||||
title: title.trim(),
|
||||
description: description.trim() || undefined,
|
||||
scheduled_datetime: scheduledDatetime,
|
||||
reminder_minutes_before: reminderMinutes,
|
||||
});
|
||||
router.push('/dashboard/tasks');
|
||||
} catch (err) {
|
||||
console.error('Failed to create task:', err);
|
||||
setError('Failed to create task. Please try again.');
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
|
||||
<div className="flex items-center gap-3 px-4 py-3">
|
||||
<Link href="/dashboard/tasks" className="p-1 -ml-1 text-gray-500 dark:text-gray-400">
|
||||
<ArrowLeftIcon size={20} />
|
||||
</Link>
|
||||
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">New Task</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<form onSubmit={handleSubmit} className="p-4 space-y-5 max-w-lg mx-auto">
|
||||
{error && (
|
||||
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-3 text-sm text-red-600 dark:text-red-400">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Title <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={title}
|
||||
onChange={e => setTitle(e.target.value)}
|
||||
placeholder="e.g. Doctor appointment"
|
||||
className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm"
|
||||
autoFocus
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Description <span className="text-gray-400 font-normal">(optional)</span>
|
||||
</label>
|
||||
<textarea
|
||||
value={description}
|
||||
onChange={e => setDescription(e.target.value)}
|
||||
placeholder="Add details..."
|
||||
rows={2}
|
||||
className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm resize-none"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl shadow-sm p-4 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Date & Time <span className="text-red-500">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="datetime-local"
|
||||
value={scheduledDatetime}
|
||||
onChange={e => setScheduledDatetime(e.target.value)}
|
||||
className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1">
|
||||
Advance Reminder
|
||||
</label>
|
||||
<select
|
||||
value={reminderMinutes}
|
||||
onChange={e => setReminderMinutes(Number(e.target.value))}
|
||||
className="w-full rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-3 py-2 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-indigo-500 text-sm"
|
||||
>
|
||||
{REMINDER_OPTIONS.map(opt => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500 mt-1">
|
||||
You'll also get a notification exactly at the scheduled time.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={isSubmitting}
|
||||
className="w-full bg-indigo-600 hover:bg-indigo-700 disabled:opacity-60 text-white font-semibold py-3 rounded-xl transition-colors"
|
||||
>
|
||||
{isSubmitting ? 'Saving…' : 'Add Task'}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
217
synculous-client/src/app/dashboard/tasks/page.tsx
Normal file
217
synculous-client/src/app/dashboard/tasks/page.tsx
Normal file
@@ -0,0 +1,217 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import Link from 'next/link';
|
||||
import api, { Task } from '@/lib/api';
|
||||
import { PlusIcon, CheckIcon, XIcon, ClockIcon, TrashIcon } from '@/components/ui/Icons';
|
||||
|
||||
function formatDateTime(dtStr: string): string {
|
||||
try {
|
||||
const dt = new Date(dtStr);
|
||||
const now = new Date();
|
||||
const tomorrow = new Date(now);
|
||||
tomorrow.setDate(now.getDate() + 1);
|
||||
|
||||
const timeStr = dt.toLocaleTimeString([], { hour: 'numeric', minute: '2-digit' });
|
||||
|
||||
if (dt.toDateString() === now.toDateString()) return `Today at ${timeStr}`;
|
||||
if (dt.toDateString() === tomorrow.toDateString()) return `Tomorrow at ${timeStr}`;
|
||||
|
||||
return dt.toLocaleDateString([], { weekday: 'short', month: 'short', day: 'numeric' }) + ` at ${timeStr}`;
|
||||
} catch {
|
||||
return dtStr;
|
||||
}
|
||||
}
|
||||
|
||||
function isPast(dtStr: string): boolean {
|
||||
try {
|
||||
return new Date(dtStr) < new Date();
|
||||
} catch {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
export default function TasksPage() {
|
||||
const router = useRouter();
|
||||
const [tasks, setTasks] = useState<Task[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [showCompleted, setShowCompleted] = useState(false);
|
||||
|
||||
const loadTasks = async (status: string) => {
|
||||
try {
|
||||
const data = await api.tasks.list(status);
|
||||
setTasks(data);
|
||||
} catch (err) {
|
||||
console.error('Failed to load tasks:', err);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadTasks(showCompleted ? 'all' : 'pending');
|
||||
}, [showCompleted]);
|
||||
|
||||
const handleMarkDone = async (task: Task) => {
|
||||
try {
|
||||
await api.tasks.update(task.id, { status: 'completed' });
|
||||
setTasks(prev => prev.filter(t => t.id !== task.id));
|
||||
} catch (err) {
|
||||
console.error('Failed to update task:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = async (task: Task) => {
|
||||
try {
|
||||
await api.tasks.update(task.id, { status: 'cancelled' });
|
||||
setTasks(prev => prev.filter(t => t.id !== task.id));
|
||||
} catch (err) {
|
||||
console.error('Failed to cancel task:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async (task: Task) => {
|
||||
if (!confirm(`Delete "${task.title}"?`)) return;
|
||||
try {
|
||||
await api.tasks.delete(task.id);
|
||||
setTasks(prev => prev.filter(t => t.id !== task.id));
|
||||
} catch (err) {
|
||||
console.error('Failed to delete task:', err);
|
||||
}
|
||||
};
|
||||
|
||||
const activeTasks = tasks.filter(t => t.status === 'pending' || t.status === 'notified');
|
||||
const doneTasks = tasks.filter(t => t.status === 'completed' || t.status === 'cancelled');
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
||||
<header className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 sticky top-0 z-10">
|
||||
<div className="flex items-center justify-between px-4 py-3">
|
||||
<h1 className="text-xl font-bold text-gray-900 dark:text-gray-100">Tasks</h1>
|
||||
<Link
|
||||
href="/dashboard/tasks/new"
|
||||
className="flex items-center gap-1 text-indigo-600 dark:text-indigo-400 font-medium text-sm"
|
||||
>
|
||||
<PlusIcon size={18} />
|
||||
Add Task
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="p-4 space-y-4">
|
||||
{isLoading ? (
|
||||
<div className="flex justify-center py-12">
|
||||
<div className="w-8 h-8 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin" />
|
||||
</div>
|
||||
) : activeTasks.length === 0 ? (
|
||||
<div className="bg-white dark:bg-gray-800 rounded-xl p-8 shadow-sm text-center">
|
||||
<ClockIcon size={40} className="mx-auto mb-3 text-gray-300 dark:text-gray-600" />
|
||||
<p className="text-gray-500 dark:text-gray-400 mb-4">No upcoming tasks</p>
|
||||
<Link
|
||||
href="/dashboard/tasks/new"
|
||||
className="inline-flex items-center gap-2 bg-indigo-600 text-white text-sm font-medium px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors"
|
||||
>
|
||||
<PlusIcon size={16} />
|
||||
Add your first task
|
||||
</Link>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-3">
|
||||
{activeTasks.map(task => (
|
||||
<div
|
||||
key={task.id}
|
||||
className={`bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm border-l-4 ${
|
||||
task.status === 'notified'
|
||||
? 'border-amber-400'
|
||||
: isPast(task.scheduled_datetime)
|
||||
? 'border-red-400'
|
||||
: 'border-indigo-400'
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-gray-900 dark:text-gray-100 truncate">{task.title}</h3>
|
||||
{task.description && (
|
||||
<p className="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{task.description}</p>
|
||||
)}
|
||||
<div className="flex items-center gap-2 mt-1.5">
|
||||
<ClockIcon size={13} className="text-gray-400 flex-shrink-0" />
|
||||
<span className={`text-sm ${isPast(task.scheduled_datetime) && task.status === 'pending' ? 'text-red-500 dark:text-red-400' : 'text-gray-500 dark:text-gray-400'}`}>
|
||||
{formatDateTime(task.scheduled_datetime)}
|
||||
</span>
|
||||
{task.status === 'notified' && (
|
||||
<span className="text-xs bg-amber-100 dark:bg-amber-900/40 text-amber-700 dark:text-amber-400 px-1.5 py-0.5 rounded-full">
|
||||
Notified
|
||||
</span>
|
||||
)}
|
||||
{task.reminder_minutes_before > 0 && (
|
||||
<span className="text-xs text-gray-400 dark:text-gray-500">
|
||||
+{task.reminder_minutes_before}m reminder
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-1 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => handleMarkDone(task)}
|
||||
className="p-2 text-green-600 dark:text-green-400 hover:bg-green-50 dark:hover:bg-green-900/20 rounded-lg transition-colors"
|
||||
title="Mark done"
|
||||
>
|
||||
<CheckIcon size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleCancel(task)}
|
||||
className="p-2 text-gray-400 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
|
||||
title="Cancel"
|
||||
>
|
||||
<XIcon size={18} />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDelete(task)}
|
||||
className="p-2 text-red-400 dark:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg transition-colors"
|
||||
title="Delete"
|
||||
>
|
||||
<TrashIcon size={18} />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Show completed toggle */}
|
||||
{!isLoading && (
|
||||
<button
|
||||
onClick={() => setShowCompleted(!showCompleted)}
|
||||
className="w-full text-sm text-gray-500 dark:text-gray-400 py-2 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
|
||||
>
|
||||
{showCompleted ? 'Hide completed' : `Show completed${doneTasks.length > 0 ? ` (${doneTasks.length})` : ''}`}
|
||||
</button>
|
||||
)}
|
||||
|
||||
{/* Completed tasks */}
|
||||
{showCompleted && doneTasks.length > 0 && (
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-sm font-medium text-gray-500 dark:text-gray-400 px-1">Completed / Cancelled</h2>
|
||||
{doneTasks.map(task => (
|
||||
<div key={task.id} className="bg-white dark:bg-gray-800 rounded-xl p-4 shadow-sm opacity-60 flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-gray-700 dark:text-gray-300 line-through">{task.title}</p>
|
||||
<p className="text-xs text-gray-400 dark:text-gray-500">{formatDateTime(task.scheduled_datetime)}</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => handleDelete(task)}
|
||||
className="p-1.5 text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 rounded-lg"
|
||||
>
|
||||
<TrashIcon size={16} />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,5 +1,18 @@
|
||||
const API_URL = '';
|
||||
|
||||
export interface Task {
|
||||
id: string;
|
||||
user_uuid: string;
|
||||
title: string;
|
||||
description?: string;
|
||||
scheduled_datetime: string;
|
||||
reminder_minutes_before: number;
|
||||
advance_notified: boolean;
|
||||
status: 'pending' | 'notified' | 'completed' | 'cancelled';
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
|
||||
function getToken(): string | null {
|
||||
if (typeof window === 'undefined') return null;
|
||||
return localStorage.getItem('token');
|
||||
@@ -1052,6 +1065,17 @@ export const api = {
|
||||
},
|
||||
},
|
||||
|
||||
tasks: {
|
||||
list: (status = 'pending') =>
|
||||
request<Task[]>(`/api/tasks?status=${status}`, { method: 'GET' }),
|
||||
create: (data: { title: string; description?: string; scheduled_datetime: string; reminder_minutes_before?: number }) =>
|
||||
request<Task>('/api/tasks', { method: 'POST', body: JSON.stringify(data) }),
|
||||
update: (id: string, data: Partial<Pick<Task, 'title' | 'description' | 'scheduled_datetime' | 'reminder_minutes_before' | 'status'>>) =>
|
||||
request<Task>(`/api/tasks/${id}`, { method: 'PATCH', body: JSON.stringify(data) }),
|
||||
delete: (id: string) =>
|
||||
request<{ success: boolean }>(`/api/tasks/${id}`, { method: 'DELETE' }),
|
||||
},
|
||||
|
||||
ai: {
|
||||
generateSteps: (goal: string) =>
|
||||
request<{ steps: { name: string; duration_minutes: number }[] }>(
|
||||
|
||||
Reference in New Issue
Block a user