hammer/todo-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit - Todo app frontend

Browse Source
This commit is contained in:
Hammer
2026-01-28 16:46:44 +00:00
commit 95b816a2e6
15978 changed files with 2514406 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
src/App.css Normal file
View File

@@ -0,0 +1,42 @@
#root {
max-width: 1280px;
margin: 0 auto;
padding: 2rem;
text-align: center;
}
.logo {
height: 6em;
padding: 1.5em;
will-change: filter;
transition: filter 300ms;
}
.logo:hover {
filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
filter: drop-shadow(0 0 2em #61dafbaa);
}
@keyframes logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@media (prefers-reduced-motion: no-preference) {
a:nth-of-type(2) .logo {
animation: logo-spin infinite 20s linear;
}
}
.card {
padding: 2em;
}
.read-the-docs {
color: #888;
}

73
src/App.tsx Normal file
View File

@@ -0,0 +1,73 @@
import { useEffect } from 'react';
import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { useAuthStore } from '@/stores/auth';
import { Layout } from '@/components/Layout';
import { LoginPage } from '@/pages/Login';
import { SetupPage } from '@/pages/Setup';
import { InboxPage } from '@/pages/Inbox';
import { TodayPage } from '@/pages/Today';
import { UpcomingPage } from '@/pages/Upcoming';
import { AdminPage } from '@/pages/Admin';
const queryClient = new QueryClient({
defaultOptions: {
queries: {
staleTime: 1000 * 60 * 5, // 5 minutes
retry: 1,
},
},
});
function AppRoutes() {
const { checkSession, isLoading, isAuthenticated } = useAuthStore();
useEffect(() => {
checkSession();
}, []);
if (isLoading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="text-center">
<div className="animate-spin w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full mx-auto"></div>
<p className="mt-4 text-gray-600">Loading...</p>
</div>
</div>
);
}
return (
<Routes>
{/* Public routes */}
<Route path="/login" element={
isAuthenticated ? <Navigate to="/inbox" replace /> : <LoginPage />
} />
<Route path="/setup" element={<SetupPage />} />
{/* Protected routes */}
<Route element={<Layout />}>
<Route path="/inbox" element={<InboxPage />} />
<Route path="/today" element={<TodayPage />} />
<Route path="/upcoming" element={<UpcomingPage />} />
<Route path="/admin" element={<AdminPage />} />
{/* Redirects */}
<Route path="/" element={<Navigate to="/inbox" replace />} />
</Route>
{/* Catch all */}
<Route path="*" element={<Navigate to="/inbox" replace />} />
</Routes>
);
}
export default function App() {
return (
<QueryClientProvider client={queryClient}>
<BrowserRouter>
<AppRoutes />
</BrowserRouter>
</QueryClientProvider>
);
}

1
src/assets/react.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.0 KiB

182
src/components/AddTask.tsx Normal file
View File

@@ -0,0 +1,182 @@
import { useState, useRef, useEffect } from 'react';
import { Plus, Calendar, Flag, Tag, X } from 'lucide-react';
import type { Priority } from '@/types';
import { cn, getPriorityColor } from '@/lib/utils';
import { useTasksStore } from '@/stores/tasks';
interface AddTaskProps {
projectId?: string;
sectionId?: string;
parentId?: string;
onClose?: () => void;
autoFocus?: boolean;
}
export function AddTask({ projectId, sectionId, parentId, onClose, autoFocus = false }: AddTaskProps) {
const [isExpanded, setIsExpanded] = useState(autoFocus);
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [dueDate, setDueDate] = useState('');
const [priority, setPriority] = useState<Priority>('p4');
const [isSubmitting, setIsSubmitting] = useState(false);
const inputRef = useRef<HTMLInputElement>(null);
const { createTask, projects } = useTasksStore();
useEffect(() => {
if (isExpanded && inputRef.current) {
inputRef.current.focus();
}
}, [isExpanded]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
if (!title.trim() || isSubmitting) return;
setIsSubmitting(true);
try {
await createTask({
title: title.trim(),
description: description.trim() || undefined,
projectId,
sectionId,
parentId,
dueDate: dueDate || undefined,
priority,
});
// Reset form
setTitle('');
setDescription('');
setDueDate('');
setPriority('p4');
if (onClose) {
onClose();
setIsExpanded(false);
}
} catch (error) {
console.error('Failed to create task:', error);
} finally {
setIsSubmitting(false);
}
};
const handleCancel = () => {
setIsExpanded(false);
setTitle('');
setDescription('');
setDueDate('');
setPriority('p4');
onClose?.();
};
if (!isExpanded) {
return (
<button
onClick={() => setIsExpanded(true)}
className="w-full flex items-center gap-2 px-3 py-2 text-sm text-gray-500 hover:text-blue-600 rounded-lg hover:bg-gray-50 transition-colors"
>
<Plus className="w-4 h-4" />
<span>Add task</span>
</button>
);
}
return (
<form onSubmit={handleSubmit} className="border border-gray-200 rounded-lg p-3 bg-white shadow-sm">
{/* Title input */}
<input
ref={inputRef}
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Task name"
className="w-full text-sm font-medium text-gray-900 placeholder-gray-400 border-none outline-none"
/>
{/* Description input */}
<textarea
value={description}
onChange={(e) => setDescription(e.target.value)}
placeholder="Description"
rows={2}
className="w-full mt-2 text-sm text-gray-600 placeholder-gray-400 border-none outline-none resize-none"
/>
{/* Options row */}
<div className="flex items-center gap-2 mt-3 flex-wrap">
{/* Due date */}
<div className="relative">
<input
type="date"
value={dueDate}
onChange={(e) => setDueDate(e.target.value)}
className="absolute inset-0 opacity-0 cursor-pointer"
/>
<button
type="button"
className={cn(
'inline-flex items-center gap-1.5 px-2 py-1 text-xs rounded border transition-colors',
dueDate
? 'border-blue-200 bg-blue-50 text-blue-600'
: 'border-gray-200 text-gray-500 hover:bg-gray-50'
)}
>
<Calendar className="w-3.5 h-3.5" />
{dueDate ? new Date(dueDate).toLocaleDateString() : 'Due date'}
</button>
</div>
{/* Priority selector */}
<select
value={priority}
onChange={(e) => setPriority(e.target.value as Priority)}
className="appearance-none px-2 py-1 text-xs rounded border border-gray-200 bg-white cursor-pointer hover:bg-gray-50"
style={{ color: getPriorityColor(priority) }}
>
<option value="p1">Priority 1</option>
<option value="p2">Priority 2</option>
<option value="p3">Priority 3</option>
<option value="p4">Priority 4</option>
</select>
{/* Project selector (if not in a specific project context) */}
{!projectId && projects.length > 0 && (
<select
className="appearance-none px-2 py-1 text-xs rounded border border-gray-200 bg-white cursor-pointer hover:bg-gray-50 text-gray-600"
>
{projects.map((p) => (
<option key={p.id} value={p.id}>
{p.isInbox ? '📥 Inbox' : p.name}
</option>
))}
</select>
)}
</div>
{/* Action buttons */}
<div className="flex items-center justify-end gap-2 mt-4 pt-3 border-t border-gray-100">
<button
type="button"
onClick={handleCancel}
className="px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 rounded transition-colors"
>
Cancel
</button>
<button
type="submit"
disabled={!title.trim() || isSubmitting}
className={cn(
'px-3 py-1.5 text-sm font-medium rounded transition-colors',
title.trim() && !isSubmitting
? 'bg-blue-600 text-white hover:bg-blue-700'
: 'bg-gray-100 text-gray-400 cursor-not-allowed'
)}
>
{isSubmitting ? 'Adding...' : 'Add task'}
</button>
</div>
</form>
);
}

41
src/components/Layout.tsx Normal file
View File

@@ -0,0 +1,41 @@
import { useEffect } from 'react';
import { Outlet, Navigate } from 'react-router-dom';
import { Sidebar } from './Sidebar';
import { useAuthStore } from '@/stores/auth';
import { useTasksStore } from '@/stores/tasks';
export function Layout() {
const { isAuthenticated, isLoading } = useAuthStore();
const { fetchProjects, fetchLabels } = useTasksStore();
useEffect(() => {
if (isAuthenticated) {
fetchProjects();
fetchLabels();
}
}, [isAuthenticated]);
if (isLoading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="text-center">
<div className="animate-spin w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full mx-auto"></div>
<p className="mt-4 text-gray-600">Loading...</p>
</div>
</div>
);
}
if (!isAuthenticated) {
return <Navigate to="/login" replace />;
}
return (
<div className="flex h-screen bg-white">
<Sidebar />
<main className="flex-1 overflow-y-auto p-8">
<Outlet />
</main>
</div>
);
}

185
src/components/Sidebar.tsx Normal file
View File

@@ -0,0 +1,185 @@
import { useState } from 'react';
import { Link, useLocation, useNavigate } from 'react-router-dom';
import {
Inbox, Calendar, CalendarDays, Plus, ChevronDown, ChevronRight,
Hash, Settings, LogOut, User, FolderPlus, Tag
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { useAuthStore } from '@/stores/auth';
import { useTasksStore } from '@/stores/tasks';
export function Sidebar() {
const location = useLocation();
const navigate = useNavigate();
const { user, logout } = useAuthStore();
const { projects, labels } = useTasksStore();
const [projectsExpanded, setProjectsExpanded] = useState(true);
const [labelsExpanded, setLabelsExpanded] = useState(true);
const handleLogout = async () => {
await logout();
navigate('/login');
};
const inbox = projects.find(p => p.isInbox);
const regularProjects = projects.filter(p => !p.isInbox);
const navItems = [
{ path: '/inbox', icon: Inbox, label: 'Inbox', color: '#3b82f6' },
{ path: '/today', icon: Calendar, label: 'Today', color: '#22c55e' },
{ path: '/upcoming', icon: CalendarDays, label: 'Upcoming', color: '#8b5cf6' },
];
return (
<aside className="w-64 h-screen bg-gray-50 border-r border-gray-200 flex flex-col">
{/* User section */}
<div className="p-4 border-b border-gray-200">
<div className="flex items-center gap-3">
<div className="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-sm font-medium">
{user?.name?.charAt(0).toUpperCase()}
</div>
<div className="flex-1 min-w-0">
<p className="text-sm font-medium text-gray-900 truncate">{user?.name}</p>
<p className="text-xs text-gray-500 truncate">{user?.email}</p>
</div>
</div>
</div>
{/* Navigation */}
<nav className="flex-1 overflow-y-auto p-2">
{/* Main nav items */}
<div className="space-y-1">
{navItems.map((item) => (
<Link
key={item.path}
to={item.path}
className={cn(
'flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors',
location.pathname === item.path
? 'bg-blue-50 text-blue-600'
: 'text-gray-700 hover:bg-gray-100'
)}
>
<item.icon className="w-4 h-4" style={{ color: item.color }} />
<span>{item.label}</span>
</Link>
))}
</div>
{/* Projects section */}
<div className="mt-6">
<button
onClick={() => setProjectsExpanded(!projectsExpanded)}
className="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider hover:text-gray-700"
>
<span>Projects</span>
<div className="flex items-center gap-1">
<Link
to="/projects/new"
className="p-1 hover:bg-gray-200 rounded"
onClick={(e) => e.stopPropagation()}
>
<Plus className="w-3 h-3" />
</Link>
{projectsExpanded ? (
<ChevronDown className="w-3 h-3" />
) : (
<ChevronRight className="w-3 h-3" />
)}
</div>
</button>
{projectsExpanded && (
<div className="mt-1 space-y-1">
{regularProjects.map((project) => (
<Link
key={project.id}
to={`/project/${project.id}`}
className={cn(
'flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors',
location.pathname === `/project/${project.id}`
? 'bg-blue-50 text-blue-600'
: 'text-gray-700 hover:bg-gray-100'
)}
>
<span
className="w-3 h-3 rounded"
style={{ backgroundColor: project.color }}
/>
<span className="truncate">{project.name}</span>
</Link>
))}
</div>
)}
</div>
{/* Labels section */}
<div className="mt-6">
<button
onClick={() => setLabelsExpanded(!labelsExpanded)}
className="w-full flex items-center justify-between px-3 py-2 text-xs font-semibold text-gray-500 uppercase tracking-wider hover:text-gray-700"
>
<span>Labels</span>
<div className="flex items-center gap-1">
<Link
to="/labels/new"
className="p-1 hover:bg-gray-200 rounded"
onClick={(e) => e.stopPropagation()}
>
<Plus className="w-3 h-3" />
</Link>
{labelsExpanded ? (
<ChevronDown className="w-3 h-3" />
) : (
<ChevronRight className="w-3 h-3" />
)}
</div>
</button>
{labelsExpanded && labels.length > 0 && (
<div className="mt-1 space-y-1">
{labels.map((label) => (
<Link
key={label.id}
to={`/label/${label.id}`}
className={cn(
'flex items-center gap-3 px-3 py-2 rounded-lg text-sm transition-colors',
location.pathname === `/label/${label.id}`
? 'bg-blue-50 text-blue-600'
: 'text-gray-700 hover:bg-gray-100'
)}
>
<Tag className="w-3 h-3" style={{ color: label.color }} />
<span className="truncate">{label.name}</span>
{label.taskCount !== undefined && label.taskCount > 0 && (
<span className="ml-auto text-xs text-gray-400">{label.taskCount}</span>
)}
</Link>
))}
</div>
)}
</div>
</nav>
{/* Bottom section */}
<div className="p-2 border-t border-gray-200">
{user?.role === 'admin' && (
<Link
to="/admin"
className="flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100"
>
<Settings className="w-4 h-4" />
<span>Admin</span>
</Link>
)}
<button
onClick={handleLogout}
className="w-full flex items-center gap-3 px-3 py-2 rounded-lg text-sm text-gray-700 hover:bg-gray-100"
>
<LogOut className="w-4 h-4" />
<span>Sign out</span>
</button>
</div>
</aside>
);
}

137
src/components/TaskItem.tsx Normal file
View File

@@ -0,0 +1,137 @@
import { useState } from 'react';
import { Check, Calendar, Flag, ChevronRight, MoreHorizontal } from 'lucide-react';
import type { Task } from '@/types';
import { cn, formatDate, isOverdue, getPriorityColor } from '@/lib/utils';
import { useTasksStore } from '@/stores/tasks';
interface TaskItemProps {
task: Task;
onClick?: () => void;
showProject?: boolean;
}
export function TaskItem({ task, onClick, showProject = false }: TaskItemProps) {
const [isHovered, setIsHovered] = useState(false);
const { toggleComplete } = useTasksStore();
const handleComplete = async (e: React.MouseEvent) => {
e.stopPropagation();
await toggleComplete(task.id);
};
const overdue = !task.isCompleted && isOverdue(task.dueDate);
return (
<div
className={cn(
'group flex items-start gap-3 px-3 py-2 rounded-lg transition-colors cursor-pointer',
'hover:bg-gray-50',
task.isCompleted && 'opacity-60'
)}
onClick={onClick}
onMouseEnter={() => setIsHovered(true)}
onMouseLeave={() => setIsHovered(false)}
>
{/* Checkbox */}
<button
onClick={handleComplete}
className={cn(
'mt-0.5 flex-shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors',
task.isCompleted
? 'bg-gray-400 border-gray-400'
: 'border-gray-300 hover:border-gray-400'
)}
style={{
borderColor: !task.isCompleted ? getPriorityColor(task.priority) : undefined
}}
>
{task.isCompleted && <Check className="w-3 h-3 text-white" />}
</button>
{/* Content */}
<div className="flex-1 min-w-0">
<p className={cn(
'text-sm text-gray-900',
task.isCompleted && 'line-through text-gray-500'
)}>
{task.title}
</p>
{task.description && (
<p className="text-xs text-gray-500 mt-0.5 line-clamp-1">
{task.description}
</p>
)}
{/* Meta info */}
<div className="flex items-center gap-2 mt-1 flex-wrap">
{task.dueDate && (
<span className={cn(
'inline-flex items-center gap-1 text-xs',
overdue ? 'text-red-500' : 'text-gray-500'
)}>
<Calendar className="w-3 h-3" />
{formatDate(task.dueDate)}
{task.dueTime && ` ${task.dueTime}`}
</span>
)}
{showProject && task.project && (
<span className="text-xs text-gray-500 flex items-center gap-1">
<span
className="w-2 h-2 rounded-full"
style={{ backgroundColor: task.project.color }}
/>
{task.project.name}
</span>
)}
{task.taskLabels && task.taskLabels.length > 0 && (
<div className="flex gap-1">
{task.taskLabels.slice(0, 2).map(({ label }) => (
<span
key={label.id}
className="px-1.5 py-0.5 text-xs rounded"
style={{
backgroundColor: `${label.color}20`,
color: label.color,
}}
>
{label.name}
</span>
))}
{task.taskLabels.length > 2 && (
<span className="text-xs text-gray-400">
+{task.taskLabels.length - 2}
</span>
)}
</div>
)}
{task.subtasks && task.subtasks.length > 0 && (
<span className="text-xs text-gray-500 flex items-center gap-1">
<ChevronRight className="w-3 h-3" />
{task.subtasks.filter(s => s.isCompleted).length}/{task.subtasks.length}
</span>
)}
</div>
</div>
{/* Priority flag */}
{task.priority !== 'p4' && (
<Flag
className="w-4 h-4 flex-shrink-0"
style={{ color: getPriorityColor(task.priority) }}
fill={getPriorityColor(task.priority)}
/>
)}
{/* Actions (shown on hover) */}
{isHovered && (
<button className="p-1 text-gray-400 hover:text-gray-600 rounded">
<MoreHorizontal className="w-4 h-4" />
</button>
)}
</div>
);
}

118
src/index.css Normal file
View File

@@ -0,0 +1,118 @@
@import "tailwindcss";
:root {
--color-primary: #3b82f6;
--color-primary-dark: #2563eb;
--color-danger: #ef4444;
--color-success: #22c55e;
--color-warning: #f59e0b;
--priority-1: #ef4444;
--priority-2: #f59e0b;
--priority-3: #3b82f6;
--priority-4: #6b7280;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Custom scrollbar */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background: #d1d5db;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #9ca3af;
}
/* Focus styles */
*:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* Button base */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
font-size: 0.875rem;
font-weight: 500;
border-radius: 0.375rem;
transition: all 0.15s ease;
cursor: pointer;
border: none;
}
.btn-primary {
background: var(--color-primary);
color: white;
}
.btn-primary:hover {
background: var(--color-primary-dark);
}
.btn-secondary {
background: #f3f4f6;
color: #374151;
}
.btn-secondary:hover {
background: #e5e7eb;
}
.btn-danger {
background: var(--color-danger);
color: white;
}
.btn-danger:hover {
background: #dc2626;
}
/* Input base */
.input {
width: 100%;
padding: 0.5rem 0.75rem;
font-size: 0.875rem;
border: 1px solid #d1d5db;
border-radius: 0.375rem;
transition: border-color 0.15s ease;
}
.input:focus {
border-color: var(--color-primary);
outline: none;
}
/* Priority indicators */
.priority-1 { color: var(--priority-1); }
.priority-2 { color: var(--priority-2); }
.priority-3 { color: var(--priority-3); }
.priority-4 { color: var(--priority-4); }
.priority-dot-1 { background: var(--priority-1); }
.priority-dot-2 { background: var(--priority-2); }
.priority-dot-3 { background: var(--priority-3); }
.priority-dot-4 { background: var(--priority-4); }

269
src/lib/api.ts Normal file
View File

@@ -0,0 +1,269 @@
import type {
User, Project, Task, TaskCreate, TaskUpdate,
Label, Comment, Invite, Section
} from '@/types';
const API_BASE = import.meta.env.PROD
? 'https://api.todo.donovankelly.xyz/api'
: '/api';
const AUTH_BASE = import.meta.env.PROD
? 'https://api.todo.donovankelly.xyz'
: '';
class ApiClient {
private token: string | null = null;
setToken(token: string | null) {
this.token = token;
}
private async fetch<T>(
path: string,
options: RequestInit = {}
): Promise<T> {
const headers: HeadersInit = {
'Content-Type': 'application/json',
...options.headers,
};
if (this.token) {
headers['Authorization'] = `Bearer ${this.token}`;
}
const response = await fetch(`${API_BASE}${path}`, {
...options,
headers,
credentials: 'include',
});
if (!response.ok) {
const error = await response.json().catch(() => ({ error: 'Unknown error' }));
throw new Error(error.error || error.details || 'Request failed');
}
return response.json();
}
// Auth
async login(email: string, password: string) {
const response = await fetch(`${AUTH_BASE}/api/auth/sign-in/email`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email, password }),
credentials: 'include',
});
if (!response.ok) {
const error = await response.json().catch(() => ({ message: 'Login failed' }));
throw new Error(error.message || 'Login failed');
}
return response.json();
}
async logout() {
await fetch(`${AUTH_BASE}/api/auth/sign-out`, {
method: 'POST',
credentials: 'include',
});
}
async getSession(): Promise<{ user: User } | null> {
try {
const response = await fetch(`${AUTH_BASE}/api/auth/get-session`, {
credentials: 'include',
});
if (!response.ok) return null;
return response.json();
} catch {
return null;
}
}
// Invite validation (public)
async validateInvite(token: string): Promise<{ email: string; name: string }> {
const response = await fetch(`${AUTH_BASE}/auth/invite/${token}`);
if (!response.ok) {
const error = await response.json().catch(() => ({ error: 'Invalid invite' }));
throw new Error(error.error);
}
return response.json();
}
async acceptInvite(token: string, password: string): Promise<void> {
const response = await fetch(`${AUTH_BASE}/auth/invite/${token}/accept`, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ password }),
});
if (!response.ok) {
const error = await response.json().catch(() => ({ error: 'Failed to accept invite' }));
throw new Error(error.error);
}
}
// Projects
async getProjects(): Promise<Project[]> {
return this.fetch('/projects');
}
async getProject(id: string): Promise<Project> {
return this.fetch(`/projects/${id}`);
}
async createProject(data: { name: string; color?: string; icon?: string }): Promise<Project> {
return this.fetch('/projects', {
method: 'POST',
body: JSON.stringify(data),
});
}
async updateProject(id: string, data: Partial<Project>): Promise<Project> {
return this.fetch(`/projects/${id}`, {
method: 'PATCH',
body: JSON.stringify(data),
});
}
async deleteProject(id: string): Promise<void> {
await this.fetch(`/projects/${id}`, { method: 'DELETE' });
}
// Sections
async createSection(projectId: string, data: { name: string; sortOrder?: number }): Promise<Section> {
return this.fetch(`/projects/${projectId}/sections`, {
method: 'POST',
body: JSON.stringify(data),
});
}
async updateSection(projectId: string, sectionId: string, data: Partial<Section>): Promise<Section> {
return this.fetch(`/projects/${projectId}/sections/${sectionId}`, {
method: 'PATCH',
body: JSON.stringify(data),
});
}
async deleteSection(projectId: string, sectionId: string): Promise<void> {
await this.fetch(`/projects/${projectId}/sections/${sectionId}`, { method: 'DELETE' });
}
// Tasks
async getTasks(params?: {
projectId?: string;
sectionId?: string;
completed?: boolean;
priority?: string;
today?: boolean;
upcoming?: boolean;
overdue?: boolean;
labelId?: string;
includeSubtasks?: boolean;
}): Promise<Task[]> {
const searchParams = new URLSearchParams();
if (params) {
Object.entries(params).forEach(([key, value]) => {
if (value !== undefined) {
searchParams.set(key, String(value));
}
});
}
const query = searchParams.toString();
return this.fetch(`/tasks${query ? `?${query}` : ''}`);
}
async getTask(id: string): Promise<Task> {
return this.fetch(`/tasks/${id}`);
}
async createTask(data: TaskCreate): Promise<Task> {
return this.fetch('/tasks', {
method: 'POST',
body: JSON.stringify(data),
});
}
async updateTask(id: string, data: TaskUpdate): Promise<Task> {
return this.fetch(`/tasks/${id}`, {
method: 'PATCH',
body: JSON.stringify(data),
});
}
async deleteTask(id: string): Promise<void> {
await this.fetch(`/tasks/${id}`, { method: 'DELETE' });
}
// Labels
async getLabels(): Promise<Label[]> {
return this.fetch('/labels');
}
async createLabel(data: { name: string; color?: string }): Promise<Label> {
return this.fetch('/labels', {
method: 'POST',
body: JSON.stringify(data),
});
}
async updateLabel(id: string, data: Partial<Label>): Promise<Label> {
return this.fetch(`/labels/${id}`, {
method: 'PATCH',
body: JSON.stringify(data),
});
}
async deleteLabel(id: string): Promise<void> {
await this.fetch(`/labels/${id}`, { method: 'DELETE' });
}
// Comments
async getComments(taskId: string): Promise<Comment[]> {
return this.fetch(`/comments/task/${taskId}`);
}
async createComment(data: { taskId: string; content: string; attachments?: { name: string; url: string; type: string }[] }): Promise<Comment> {
return this.fetch('/comments', {
method: 'POST',
body: JSON.stringify(data),
});
}
async deleteComment(id: string): Promise<void> {
await this.fetch(`/comments/${id}`, { method: 'DELETE' });
}
// Admin
async getUsers(): Promise<User[]> {
return this.fetch('/admin/users');
}
async updateUserRole(id: string, role: 'admin' | 'user' | 'service'): Promise<void> {
await this.fetch(`/admin/users/${id}/role`, {
method: 'PATCH',
body: JSON.stringify({ role }),
});
}
async deleteUser(id: string): Promise<void> {
await this.fetch(`/admin/users/${id}`, { method: 'DELETE' });
}
async createInvite(data: { email: string; name: string }): Promise<Invite & { setupUrl: string }> {
return this.fetch('/admin/invites', {
method: 'POST',
body: JSON.stringify(data),
});
}
async getInvites(): Promise<Invite[]> {
return this.fetch('/admin/invites');
}
async deleteInvite(id: string): Promise<void> {
await this.fetch(`/admin/invites/${id}`, { method: 'DELETE' });
}
}
export const api = new ApiClient();

70
src/lib/utils.ts Normal file
View File

@@ -0,0 +1,70 @@
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
export function formatDate(date: string | Date | undefined): string {
if (!date) return '';
const d = new Date(date);
const now = new Date();
const today = new Date(now.getFullYear(), now.getMonth(), now.getDate());
const tomorrow = new Date(today);
tomorrow.setDate(tomorrow.getDate() + 1);
const taskDate = new Date(d.getFullYear(), d.getMonth(), d.getDate());
if (taskDate.getTime() === today.getTime()) {
return 'Today';
}
if (taskDate.getTime() === tomorrow.getTime()) {
return 'Tomorrow';
}
const yesterday = new Date(today);
yesterday.setDate(yesterday.getDate() - 1);
if (taskDate.getTime() === yesterday.getTime()) {
return 'Yesterday';
}
// Within this week
const weekFromNow = new Date(today);
weekFromNow.setDate(weekFromNow.getDate() + 7);
if (taskDate > today && taskDate < weekFromNow) {
return d.toLocaleDateString('en-US', { weekday: 'long' });
}
// Same year
if (d.getFullYear() === now.getFullYear()) {
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
}
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
}
export function isOverdue(date: string | Date | undefined): boolean {
if (!date) return false;
const d = new Date(date);
const today = new Date();
today.setHours(0, 0, 0, 0);
return d < today;
}
export function getPriorityColor(priority: string): string {
switch (priority) {
case 'p1': return '#ef4444';
case 'p2': return '#f59e0b';
case 'p3': return '#3b82f6';
default: return '#6b7280';
}
}
export function getPriorityLabel(priority: string): string {
switch (priority) {
case 'p1': return 'Priority 1';
case 'p2': return 'Priority 2';
case 'p3': return 'Priority 3';
default: return 'Priority 4';
}
}

10
src/main.tsx Normal file
View File

@@ -0,0 +1,10 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)

318
src/pages/Admin.tsx Normal file
View File

@@ -0,0 +1,318 @@
import { useState, useEffect } from 'react';
import { Users, Mail, Plus, Trash2, Copy, Check } from 'lucide-react';
import { api } from '@/lib/api';
import { useAuthStore } from '@/stores/auth';
import type { User, Invite } from '@/types';
import { cn } from '@/lib/utils';
export function AdminPage() {
const { user: currentUser } = useAuthStore();
const [users, setUsers] = useState<User[]>([]);
const [invites, setInvites] = useState<Invite[]>([]);
const [isLoading, setIsLoading] = useState(true);
const [activeTab, setActiveTab] = useState<'users' | 'invites'>('users');
// Invite form
const [showInviteForm, setShowInviteForm] = useState(false);
const [inviteEmail, setInviteEmail] = useState('');
const [inviteName, setInviteName] = useState('');
const [inviteError, setInviteError] = useState('');
const [inviteUrl, setInviteUrl] = useState('');
const [copied, setCopied] = useState(false);
useEffect(() => {
loadData();
}, []);
const loadData = async () => {
setIsLoading(true);
try {
const [usersData, invitesData] = await Promise.all([
api.getUsers(),
api.getInvites(),
]);
setUsers(usersData);
setInvites(invitesData);
} catch (error) {
console.error('Failed to load admin data:', error);
} finally {
setIsLoading(false);
}
};
const handleCreateInvite = async (e: React.FormEvent) => {
e.preventDefault();
setInviteError('');
try {
const result = await api.createInvite({ email: inviteEmail, name: inviteName });
setInviteUrl(result.setupUrl);
setInvites([result, ...invites]);
// Keep form open to show the URL
} catch (error) {
setInviteError(error instanceof Error ? error.message : 'Failed to create invite');
}
};
const handleCopyUrl = () => {
navigator.clipboard.writeText(inviteUrl);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
};
const handleDeleteUser = async (userId: string) => {
if (!confirm('Are you sure you want to delete this user?')) return;
try {
await api.deleteUser(userId);
setUsers(users.filter(u => u.id !== userId));
} catch (error) {
console.error('Failed to delete user:', error);
}
};
const handleDeleteInvite = async (inviteId: string) => {
try {
await api.deleteInvite(inviteId);
setInvites(invites.filter(i => i.id !== inviteId));
} catch (error) {
console.error('Failed to delete invite:', error);
}
};
const resetInviteForm = () => {
setShowInviteForm(false);
setInviteEmail('');
setInviteName('');
setInviteError('');
setInviteUrl('');
};
if (currentUser?.role !== 'admin') {
return (
<div className="text-center py-12">
<p className="text-red-500">Access denied. Admin only.</p>
</div>
);
}
return (
<div className="max-w-4xl mx-auto">
<h1 className="text-2xl font-bold text-gray-900 mb-6">Admin</h1>
{/* Tabs */}
<div className="flex gap-4 border-b border-gray-200 mb-6">
<button
onClick={() => setActiveTab('users')}
className={cn(
'pb-3 px-1 text-sm font-medium border-b-2 transition-colors',
activeTab === 'users'
? 'border-blue-600 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700'
)}
>
<Users className="w-4 h-4 inline mr-2" />
Users ({users.length})
</button>
<button
onClick={() => setActiveTab('invites')}
className={cn(
'pb-3 px-1 text-sm font-medium border-b-2 transition-colors',
activeTab === 'invites'
? 'border-blue-600 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700'
)}
>
<Mail className="w-4 h-4 inline mr-2" />
Invites ({invites.filter(i => i.status === 'pending').length} pending)
</button>
</div>
{isLoading ? (
<div className="text-center py-12 text-gray-500">Loading...</div>
) : activeTab === 'users' ? (
/* Users list */
<div className="bg-white rounded-lg border border-gray-200">
<table className="w-full">
<thead>
<tr className="border-b border-gray-200 text-left text-sm text-gray-500">
<th className="px-4 py-3 font-medium">Name</th>
<th className="px-4 py-3 font-medium">Email</th>
<th className="px-4 py-3 font-medium">Role</th>
<th className="px-4 py-3 font-medium">Joined</th>
<th className="px-4 py-3"></th>
</tr>
</thead>
<tbody>
{users.map((user) => (
<tr key={user.id} className="border-b border-gray-100 last:border-0">
<td className="px-4 py-3 text-sm font-medium text-gray-900">{user.name}</td>
<td className="px-4 py-3 text-sm text-gray-600">{user.email}</td>
<td className="px-4 py-3">
<span className={cn(
'px-2 py-1 text-xs rounded-full',
user.role === 'admin' ? 'bg-purple-100 text-purple-700' :
user.role === 'service' ? 'bg-blue-100 text-blue-700' :
'bg-gray-100 text-gray-700'
)}>
{user.role}
</span>
</td>
<td className="px-4 py-3 text-sm text-gray-500">
{new Date(user.createdAt).toLocaleDateString()}
</td>
<td className="px-4 py-3">
{user.id !== currentUser?.id && user.role !== 'service' && (
<button
onClick={() => handleDeleteUser(user.id)}
className="p-1 text-gray-400 hover:text-red-500"
>
<Trash2 className="w-4 h-4" />
</button>
)}
</td>
</tr>
))}
</tbody>
</table>
</div>
) : (
/* Invites */
<div>
{/* Create invite button/form */}
{!showInviteForm ? (
<button
onClick={() => setShowInviteForm(true)}
className="mb-4 btn btn-primary"
>
<Plus className="w-4 h-4" />
Invite User
</button>
) : (
<div className="mb-6 p-4 bg-gray-50 rounded-lg border border-gray-200">
<h3 className="font-medium text-gray-900 mb-4">Invite New User</h3>
{inviteUrl ? (
<div>
<p className="text-sm text-green-600 mb-2">✓ Invite created! Share this link:</p>
<div className="flex gap-2">
<input
type="text"
value={inviteUrl}
readOnly
className="input flex-1 text-sm bg-white"
/>
<button
onClick={handleCopyUrl}
className="btn btn-secondary"
>
{copied ? <Check className="w-4 h-4" /> : <Copy className="w-4 h-4" />}
</button>
</div>
<button
onClick={resetInviteForm}
className="mt-3 text-sm text-gray-500 hover:text-gray-700"
>
Create another invite
</button>
</div>
) : (
<form onSubmit={handleCreateInvite} className="space-y-4">
{inviteError && (
<p className="text-sm text-red-500">{inviteError}</p>
)}
<div className="grid grid-cols-2 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Name</label>
<input
type="text"
value={inviteName}
onChange={(e) => setInviteName(e.target.value)}
required
className="input"
placeholder="John Doe"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">Email</label>
<input
type="email"
value={inviteEmail}
onChange={(e) => setInviteEmail(e.target.value)}
required
className="input"
placeholder="john@example.com"
/>
</div>
</div>
<div className="flex gap-2">
<button type="submit" className="btn btn-primary">
Send Invite
</button>
<button type="button" onClick={resetInviteForm} className="btn btn-secondary">
Cancel
</button>
</div>
</form>
)}
</div>
)}
{/* Invites list */}
<div className="bg-white rounded-lg border border-gray-200">
<table className="w-full">
<thead>
<tr className="border-b border-gray-200 text-left text-sm text-gray-500">
<th className="px-4 py-3 font-medium">Name</th>
<th className="px-4 py-3 font-medium">Email</th>
<th className="px-4 py-3 font-medium">Status</th>
<th className="px-4 py-3 font-medium">Expires</th>
<th className="px-4 py-3"></th>
</tr>
</thead>
<tbody>
{invites.length === 0 ? (
<tr>
<td colSpan={5} className="px-4 py-8 text-center text-gray-500">
No invites yet
</td>
</tr>
) : (
invites.map((invite) => (
<tr key={invite.id} className="border-b border-gray-100 last:border-0">
<td className="px-4 py-3 text-sm font-medium text-gray-900">{invite.name}</td>
<td className="px-4 py-3 text-sm text-gray-600">{invite.email}</td>
<td className="px-4 py-3">
<span className={cn(
'px-2 py-1 text-xs rounded-full',
invite.status === 'accepted' ? 'bg-green-100 text-green-700' :
invite.status === 'expired' ? 'bg-red-100 text-red-700' :
'bg-yellow-100 text-yellow-700'
)}>
{invite.status}
</span>
</td>
<td className="px-4 py-3 text-sm text-gray-500">
{new Date(invite.expiresAt).toLocaleDateString()}
</td>
<td className="px-4 py-3">
{invite.status === 'pending' && (
<button
onClick={() => handleDeleteInvite(invite.id)}
className="p-1 text-gray-400 hover:text-red-500"
>
<Trash2 className="w-4 h-4" />
</button>
)}
</td>
</tr>
))
)}
</tbody>
</table>
</div>
</div>
)}
</div>
);
}

55
src/pages/Inbox.tsx Normal file
View File

@@ -0,0 +1,55 @@
import { useEffect } from 'react';
import { Inbox as InboxIcon } from 'lucide-react';
import { useTasksStore } from '@/stores/tasks';
import { TaskItem } from '@/components/TaskItem';
import { AddTask } from '@/components/AddTask';
export function InboxPage() {
const { tasks, projects, isLoading, fetchTasks, setSelectedTask } = useTasksStore();
const inbox = projects.find(p => p.isInbox);
useEffect(() => {
if (inbox) {
fetchTasks({ projectId: inbox.id, completed: false });
}
}, [inbox?.id]);
return (
<div className="max-w-3xl mx-auto">
{/* Header */}
<div className="flex items-center gap-3 mb-6">
<InboxIcon className="w-6 h-6 text-blue-500" />
<h1 className="text-2xl font-bold text-gray-900">Inbox</h1>
</div>
{/* Tasks */}
<div className="space-y-1">
{isLoading ? (
<div className="text-center py-12 text-gray-500">
Loading tasks...
</div>
) : tasks.length === 0 ? (
<div className="text-center py-12">
<InboxIcon className="w-12 h-12 text-gray-300 mx-auto mb-4" />
<p className="text-gray-500">Your inbox is empty</p>
<p className="text-sm text-gray-400 mt-1">Add a task to get started</p>
</div>
) : (
tasks.map((task) => (
<TaskItem
key={task.id}
task={task}
onClick={() => setSelectedTask(task)}
/>
))
)}
</div>
{/* Add task */}
<div className="mt-4">
<AddTask projectId={inbox?.id} />
</div>
</div>
);
}

96
src/pages/Login.tsx Normal file
View File

@@ -0,0 +1,96 @@
import { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useAuthStore } from '@/stores/auth';
export function LoginPage() {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const { login } = useAuthStore();
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError('');
setIsLoading(true);
try {
await login(email, password);
navigate('/inbox');
} catch (err) {
setError(err instanceof Error ? err.message : 'Login failed');
} finally {
setIsLoading(false);
}
};
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
<div className="max-w-md w-full">
{/* Logo/Header */}
<div className="text-center mb-8">
<h1 className="text-3xl font-bold text-gray-900">Todo App</h1>
<p className="mt-2 text-gray-600">Sign in to your account</p>
</div>
{/* Login form */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
<form onSubmit={handleSubmit} className="space-y-6">
{error && (
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
{error}
</div>
)}
<div>
<label htmlFor="email" className="block text-sm font-medium text-gray-700 mb-1">
Email
</label>
<input
id="email"
type="email"
value={email}
onChange={(e) => setEmail(e.target.value)}
required
autoComplete="email"
className="input"
placeholder="you@example.com"
/>
</div>
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
Password
</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
autoComplete="current-password"
className="input"
placeholder="••••••••"
/>
</div>
<button
type="submit"
disabled={isLoading}
className="w-full btn btn-primary py-2.5"
>
{isLoading ? 'Signing in...' : 'Sign in'}
</button>
</form>
</div>
{/* Footer note */}
<p className="mt-6 text-center text-sm text-gray-500">
This app is invite-only. Contact an admin for access.
</p>
</div>
</div>
);
}

152
src/pages/Setup.tsx Normal file
View File

@@ -0,0 +1,152 @@
import { useState, useEffect } from 'react';
import { useSearchParams, useNavigate, Link } from 'react-router-dom';
import { api } from '@/lib/api';
export function SetupPage() {
const [searchParams] = useSearchParams();
const navigate = useNavigate();
const token = searchParams.get('token');
const [inviteData, setInviteData] = useState<{ email: string; name: string } | null>(null);
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [error, setError] = useState('');
const [isLoading, setIsLoading] = useState(true);
const [isSubmitting, setIsSubmitting] = useState(false);
useEffect(() => {
if (!token) {
setError('Invalid invite link');
setIsLoading(false);
return;
}
api.validateInvite(token)
.then(setInviteData)
.catch((err) => setError(err.message))
.finally(() => setIsLoading(false));
}, [token]);
const handleSubmit = async (e: React.FormEvent) => {
e.preventDefault();
setError('');
if (password.length < 8) {
setError('Password must be at least 8 characters');
return;
}
if (password !== confirmPassword) {
setError('Passwords do not match');
return;
}
setIsSubmitting(true);
try {
await api.acceptInvite(token!, password);
navigate('/login?setup=success');
} catch (err) {
setError(err instanceof Error ? err.message : 'Failed to create account');
} finally {
setIsSubmitting(false);
}
};
if (isLoading) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50">
<div className="text-center">
<div className="animate-spin w-8 h-8 border-4 border-blue-600 border-t-transparent rounded-full mx-auto"></div>
<p className="mt-4 text-gray-600">Validating invite...</p>
</div>
</div>
);
}
if (error && !inviteData) {
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
<div className="max-w-md w-full text-center">
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
<div className="text-red-500 text-5xl mb-4">😕</div>
<h1 className="text-xl font-semibold text-gray-900">Invalid Invite</h1>
<p className="mt-2 text-gray-600">{error}</p>
<Link to="/login" className="mt-6 inline-block btn btn-primary">
Go to Login
</Link>
</div>
</div>
</div>
);
}
return (
<div className="min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4">
<div className="max-w-md w-full">
{/* Header */}
<div className="text-center mb-8">
<h1 className="text-3xl font-bold text-gray-900">Welcome!</h1>
<p className="mt-2 text-gray-600">Set up your account to get started</p>
</div>
{/* Setup form */}
<div className="bg-white rounded-xl shadow-sm border border-gray-200 p-8">
<div className="mb-6 p-4 bg-blue-50 rounded-lg">
<p className="text-sm text-blue-800">
<strong>{inviteData?.name}</strong>
</p>
<p className="text-sm text-blue-600">{inviteData?.email}</p>
</div>
<form onSubmit={handleSubmit} className="space-y-6">
{error && (
<div className="p-3 bg-red-50 border border-red-200 rounded-lg text-sm text-red-600">
{error}
</div>
)}
<div>
<label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
Create password
</label>
<input
id="password"
type="password"
value={password}
onChange={(e) => setPassword(e.target.value)}
required
minLength={8}
className="input"
placeholder="At least 8 characters"
/>
</div>
<div>
<label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
Confirm password
</label>
<input
id="confirmPassword"
type="password"
value={confirmPassword}
onChange={(e) => setConfirmPassword(e.target.value)}
required
className="input"
placeholder="Confirm your password"
/>
</div>
<button
type="submit"
disabled={isSubmitting}
className="w-full btn btn-primary py-2.5"
>
{isSubmitting ? 'Creating account...' : 'Create account'}
</button>
</form>
</div>
</div>
</div>
);
}

109
src/pages/Today.tsx Normal file
View File

@@ -0,0 +1,109 @@
import { useEffect } from 'react';
import { Calendar } from 'lucide-react';
import { useTasksStore } from '@/stores/tasks';
import { TaskItem } from '@/components/TaskItem';
import { AddTask } from '@/components/AddTask';
export function TodayPage() {
const { tasks, isLoading, fetchTasks, setSelectedTask } = useTasksStore();
useEffect(() => {
fetchTasks({ today: true, completed: false });
}, []);
const today = new Date();
const formattedDate = today.toLocaleDateString('en-US', {
weekday: 'long',
month: 'long',
day: 'numeric'
});
// Separate overdue and today's tasks
const overdueTasks = tasks.filter(task => {
if (!task.dueDate) return false;
const dueDate = new Date(task.dueDate);
dueDate.setHours(0, 0, 0, 0);
const todayStart = new Date();
todayStart.setHours(0, 0, 0, 0);
return dueDate < todayStart;
});
const todayTasks = tasks.filter(task => {
if (!task.dueDate) return false;
const dueDate = new Date(task.dueDate);
dueDate.setHours(0, 0, 0, 0);
const todayStart = new Date();
todayStart.setHours(0, 0, 0, 0);
return dueDate.getTime() === todayStart.getTime();
});
return (
<div className="max-w-3xl mx-auto">
{/* Header */}
<div className="flex items-center gap-3 mb-6">
<Calendar className="w-6 h-6 text-green-500" />
<div>
<h1 className="text-2xl font-bold text-gray-900">Today</h1>
<p className="text-sm text-gray-500">{formattedDate}</p>
</div>
</div>
{isLoading ? (
<div className="text-center py-12 text-gray-500">
Loading tasks...
</div>
) : (
<>
{/* Overdue section */}
{overdueTasks.length > 0 && (
<div className="mb-6">
<h2 className="text-sm font-semibold text-red-600 mb-2 flex items-center gap-2">
<span>Overdue</span>
<span className="bg-red-100 text-red-600 px-2 py-0.5 rounded-full text-xs">
{overdueTasks.length}
</span>
</h2>
<div className="space-y-1 bg-red-50 rounded-lg p-2">
{overdueTasks.map((task) => (
<TaskItem
key={task.id}
task={task}
onClick={() => setSelectedTask(task)}
showProject
/>
))}
</div>
</div>
)}
{/* Today's tasks */}
<div>
{todayTasks.length === 0 && overdueTasks.length === 0 ? (
<div className="text-center py-12">
<Calendar className="w-12 h-12 text-gray-300 mx-auto mb-4" />
<p className="text-gray-500">No tasks for today</p>
<p className="text-sm text-gray-400 mt-1">Enjoy your day! 🎉</p>
</div>
) : (
<div className="space-y-1">
{todayTasks.map((task) => (
<TaskItem
key={task.id}
task={task}
onClick={() => setSelectedTask(task)}
showProject
/>
))}
</div>
)}
</div>
</>
)}
{/* Add task */}
<div className="mt-4">
<AddTask />
</div>
</div>
);
}

117
src/pages/Upcoming.tsx Normal file
View File

@@ -0,0 +1,117 @@
import { useEffect, useMemo } from 'react';
import { CalendarDays } from 'lucide-react';
import { useTasksStore } from '@/stores/tasks';
import { TaskItem } from '@/components/TaskItem';
import { AddTask } from '@/components/AddTask';
import { format, addDays, startOfDay, isSameDay } from 'date-fns';
export function UpcomingPage() {
const { tasks, isLoading, fetchTasks, setSelectedTask } = useTasksStore();
useEffect(() => {
fetchTasks({ upcoming: true, completed: false });
}, []);
// Group tasks by date
const groupedTasks = useMemo(() => {
const groups: { date: Date; label: string; tasks: typeof tasks }[] = [];
const today = startOfDay(new Date());
// Create groups for next 7 days
for (let i = 0; i < 7; i++) {
const date = addDays(today, i);
let label: string;
if (i === 0) label = 'Today';
else if (i === 1) label = 'Tomorrow';
else label = format(date, 'EEEE, MMM d');
const dayTasks = tasks.filter(task => {
if (!task.dueDate) return false;
return isSameDay(new Date(task.dueDate), date);
});
groups.push({ date, label, tasks: dayTasks });
}
return groups;
}, [tasks]);
// Tasks without dates
const undatedTasks = tasks.filter(task => !task.dueDate);
return (
<div className="max-w-3xl mx-auto">
{/* Header */}
<div className="flex items-center gap-3 mb-6">
<CalendarDays className="w-6 h-6 text-purple-500" />
<h1 className="text-2xl font-bold text-gray-900">Upcoming</h1>
</div>
{isLoading ? (
<div className="text-center py-12 text-gray-500">
Loading tasks...
</div>
) : (
<div className="space-y-6">
{groupedTasks.map(({ date, label, tasks: dayTasks }) => (
<div key={date.toISOString()}>
<h2 className="text-sm font-semibold text-gray-700 mb-2 sticky top-0 bg-white py-2">
{label}
{dayTasks.length > 0 && (
<span className="ml-2 text-gray-400 font-normal">
{dayTasks.length} task{dayTasks.length !== 1 ? 's' : ''}
</span>
)}
</h2>
{dayTasks.length > 0 ? (
<div className="space-y-1">
{dayTasks.map((task) => (
<TaskItem
key={task.id}
task={task}
onClick={() => setSelectedTask(task)}
showProject
/>
))}
</div>
) : (
<div className="py-4 text-center text-sm text-gray-400 border border-dashed border-gray-200 rounded-lg">
No tasks scheduled
</div>
)}
</div>
))}
{/* Undated tasks */}
{undatedTasks.length > 0 && (
<div>
<h2 className="text-sm font-semibold text-gray-700 mb-2">
No date
<span className="ml-2 text-gray-400 font-normal">
{undatedTasks.length} task{undatedTasks.length !== 1 ? 's' : ''}
</span>
</h2>
<div className="space-y-1">
{undatedTasks.map((task) => (
<TaskItem
key={task.id}
task={task}
onClick={() => setSelectedTask(task)}
showProject
/>
))}
</div>
</div>
)}
</div>
)}
{/* Add task */}
<div className="mt-6">
<AddTask />
</div>
</div>
);
}

90
src/stores/auth.ts Normal file
View File

@@ -0,0 +1,90 @@
import { create } from 'zustand';
import { persist } from 'zustand/middleware';
import type { User } from '@/types';
import { api } from '@/lib/api';
interface AuthState {
user: User | null;
isLoading: boolean;
isAuthenticated: boolean;
// Actions
setUser: (user: User | null) => void;
login: (email: string, password: string) => Promise<void>;
logout: () => Promise<void>;
checkSession: () => Promise<void>;
}
export const useAuthStore = create<AuthState>()(
persist(
(set, get) => ({
user: null,
isLoading: true,
isAuthenticated: false,
setUser: (user) => set({
user,
isAuthenticated: !!user,
isLoading: false,
}),
login: async (email, password) => {
set({ isLoading: true });
try {
await api.login(email, password);
const session = await api.getSession();
if (session?.user) {
set({
user: session.user,
isAuthenticated: true,
isLoading: false,
});
} else {
throw new Error('Failed to get session');
}
} catch (error) {
set({ isLoading: false });
throw error;
}
},
logout: async () => {
try {
await api.logout();
} finally {
set({ user: null, isAuthenticated: false });
}
},
checkSession: async () => {
set({ isLoading: true });
try {
const session = await api.getSession();
if (session?.user) {
set({
user: session.user,
isAuthenticated: true,
isLoading: false,
});
} else {
set({
user: null,
isAuthenticated: false,
isLoading: false,
});
}
} catch {
set({
user: null,
isAuthenticated: false,
isLoading: false,
});
}
},
}),
{
name: 'auth-storage',
partialize: (state) => ({ user: state.user }),
}
)
);

108
src/stores/tasks.ts Normal file
View File

@@ -0,0 +1,108 @@
import { create } from 'zustand';
import type { Task, TaskCreate, TaskUpdate, Project, Label } from '@/types';
import { api } from '@/lib/api';
interface TasksState {
tasks: Task[];
projects: Project[];
labels: Label[];
isLoading: boolean;
// Selected items
selectedTask: Task | null;
activeProjectId: string | null;
activeView: 'inbox' | 'today' | 'upcoming' | 'project' | 'label';
// Actions
fetchTasks: (params?: Parameters<typeof api.getTasks>[0]) => Promise<void>;
fetchProjects: () => Promise<void>;
fetchLabels: () => Promise<void>;
createTask: (data: TaskCreate) => Promise<Task>;
updateTask: (id: string, data: TaskUpdate) => Promise<void>;
deleteTask: (id: string) => Promise<void>;
toggleComplete: (id: string) => Promise<void>;
setSelectedTask: (task: Task | null) => void;
setActiveProject: (projectId: string | null) => void;
setActiveView: (view: TasksState['activeView']) => void;
}
export const useTasksStore = create<TasksState>((set, get) => ({
tasks: [],
projects: [],
labels: [],
isLoading: false,
selectedTask: null,
activeProjectId: null,
activeView: 'inbox',
fetchTasks: async (params) => {
set({ isLoading: true });
try {
const tasks = await api.getTasks(params);
set({ tasks, isLoading: false });
} catch (error) {
console.error('Failed to fetch tasks:', error);
set({ isLoading: false });
}
},
fetchProjects: async () => {
try {
const projects = await api.getProjects();
set({ projects });
} catch (error) {
console.error('Failed to fetch projects:', error);
}
},
fetchLabels: async () => {
try {
const labels = await api.getLabels();
set({ labels });
} catch (error) {
console.error('Failed to fetch labels:', error);
}
},
createTask: async (data) => {
const task = await api.createTask(data);
set((state) => ({ tasks: [task, ...state.tasks] }));
return task;
},
updateTask: async (id, data) => {
const updated = await api.updateTask(id, data);
set((state) => ({
tasks: state.tasks.map((t) => (t.id === id ? { ...t, ...updated } : t)),
selectedTask: state.selectedTask?.id === id
? { ...state.selectedTask, ...updated }
: state.selectedTask,
}));
},
deleteTask: async (id) => {
await api.deleteTask(id);
set((state) => ({
tasks: state.tasks.filter((t) => t.id !== id),
selectedTask: state.selectedTask?.id === id ? null : state.selectedTask,
}));
},
toggleComplete: async (id) => {
const task = get().tasks.find((t) => t.id === id);
if (!task) return;
const updated = await api.updateTask(id, { isCompleted: !task.isCompleted });
set((state) => ({
tasks: state.tasks.map((t) =>
t.id === id ? { ...t, isCompleted: !task.isCompleted, completedAt: updated.completedAt } : t
),
}));
},
setSelectedTask: (task) => set({ selectedTask: task }),
setActiveProject: (projectId) => set({ activeProjectId: projectId }),
setActiveView: (view) => set({ activeView: view }),
}));

171
src/types/index.ts Normal file
View File

@@ -0,0 +1,171 @@
// User types
export interface User {
id: string;
email: string;
name: string;
role: 'admin' | 'user' | 'service';
image?: string;
createdAt: string;
}
// Project types
export interface Project {
id: string;
userId: string;
name: string;
color: string;
icon?: string;
isInbox: boolean;
isFavorite: boolean;
isArchived: boolean;
sortOrder: number;
createdAt: string;
updatedAt: string;
sections?: Section[];
}
// Section types
export interface Section {
id: string;
projectId: string;
name: string;
sortOrder: number;
isCollapsed: boolean;
createdAt: string;
updatedAt: string;
}
// Label types
export interface Label {
id: string;
userId: string;
name: string;
color: string;
isFavorite: boolean;
sortOrder: number;
taskCount?: number;
createdAt: string;
updatedAt: string;
}
// Task types
export type Priority = 'p1' | 'p2' | 'p3' | 'p4';
export interface Task {
id: string;
userId: string;
projectId: string;
sectionId?: string;
parentId?: string;
title: string;
description?: string;
dueDate?: string;
dueTime?: string;
deadline?: string;
recurrence?: string;
priority: Priority;
isCompleted: boolean;
completedAt?: string;
assigneeId?: string;
sortOrder: number;
createdAt: string;
updatedAt: string;
// Relations
project?: { id: string; name: string; color: string };
section?: { id: string; name: string };
parent?: { id: string; title: string };
subtasks?: Task[];
taskLabels?: { label: Label }[];
comments?: Comment[];
reminders?: Reminder[];
assignee?: { id: string; name: string; email?: string };
}
export interface TaskCreate {
title: string;
description?: string;
projectId?: string;
sectionId?: string;
parentId?: string;
dueDate?: string;
dueTime?: string;
deadline?: string;
recurrence?: string;
priority?: Priority;
assigneeId?: string;
labelIds?: string[];
sortOrder?: number;
}
export interface TaskUpdate {
title?: string;
description?: string;
projectId?: string;
sectionId?: string;
dueDate?: string;
dueTime?: string;
deadline?: string;
recurrence?: string;
priority?: Priority;
isCompleted?: boolean;
assigneeId?: string;
labelIds?: string[];
sortOrder?: number;
}
// Comment types
export interface Comment {
id: string;
taskId: string;
userId: string;
content: string;
attachments: { name: string; url: string; type: string }[];
createdAt: string;
updatedAt: string;
user?: { id: string; name: string; image?: string };
}
// Reminder types
export interface Reminder {
id: string;
taskId: string;
userId: string;
triggerAt: string;
relativeMins?: number;
isSent: boolean;
sentAt?: string;
createdAt: string;
}
// Filter types
export interface Filter {
id: string;
userId: string;
name: string;
query: string;
color: string;
isFavorite: boolean;
sortOrder: number;
createdAt: string;
updatedAt: string;
}
// Invite types
export interface Invite {
id: string;
email: string;
name: string;
token: string;
invitedBy?: string;
status: 'pending' | 'accepted' | 'expired';
expiresAt: string;
acceptedAt?: string;
createdAt: string;
inviter?: { name: string; email: string };
}
// API Response types
export interface ApiError {
error: string;
details?: string;
}