today and upcoming tasks

web/app/(pages)/tasks/today/page.tsx

@@ -0,0 +1,15 @@
+import { TaskRoute } from "@/components/routes/task/TaskRoute"
+import { currentUser } from "@clerk/nextjs/server"
+import { notFound } from "next/navigation"
+import { get } from "ronin"
+
+export default async function TodayTasksPage() {
+	const user = await currentUser()
+	const flag = await get.featureFlag.with.name("TASK")
+
+	if (!user?.emailAddresses.some(email => flag?.emails.includes(email.emailAddress))) {
+		notFound()
+	}
+
+	return <TaskRoute filter="today" />
+}

web/app/(pages)/tasks/upcoming/page.tsx

@@ -0,0 +1,15 @@
+import { TaskRoute } from "@/components/routes/task/TaskRoute"
+import { currentUser } from "@clerk/nextjs/server"
+import { notFound } from "next/navigation"
+import { get } from "ronin"
+
+export default async function UpcomingTasksPage() {
+	const user = await currentUser()
+	const flag = await get.featureFlag.with.name("TASK")
+
+	if (!user?.emailAddresses.some(email => flag?.emails.includes(email.emailAddress))) {
+		notFound()
+	}
+
+	return <TaskRoute filter="upcoming" />
+}

web/components/custom/sidebar/partial/task-section.tsx

@@ -1,17 +1,22 @@
 import Link from "next/link"
 import { usePathname } from "next/navigation"
 import { cn } from "@/lib/utils"
-import { ListOfTasks } from "@/lib/schema/tasks"
+import { ListOfTasks, Task } from "@/lib/schema/tasks"
 import { LaIcon } from "../../la-icon"
 import { useEffect, useState } from "react"
 import { useAuth, useUser } from "@clerk/nextjs"
 import { getFeatureFlag } from "@/app/actions"
+import { isToday, isFuture } from "date-fns"
+import { useAccount } from "@/lib/providers/jazz-provider"
 
 export const TaskSection: React.FC<{ pathname: string }> = ({ pathname }) => {
-	const me = { root: { tasks: [{ id: "1", title: "Test Task" }] } }
+	const { me } = useAccount({ root: { tasks: [] } })
 
-	const taskCount = me?.root.tasks?.length || 0
-	const isActive = pathname === "/tasks"
+	const taskCount = me?.root?.tasks?.length || 0
+	const todayTasks =
+		me?.root?.tasks?.filter(task => task?.status !== "done" && task?.dueDate && isToday(task.dueDate)) || []
+	const upcomingTasks =
+		me?.root?.tasks?.filter(task => task?.status !== "done" && task?.dueDate && isFuture(task.dueDate)) || []
 
 	const [isFetching, setIsFetching] = useState(false)
 	const [isFeatureActive, setIsFeatureActive] = useState(false)
@@ -53,7 +58,19 @@ export const TaskSection: React.FC<{ pathname: string }> = ({ pathname }) => {
 
 	return (
 		<div className="group/tasks flex flex-col gap-px py-2">
-			<TaskSectionHeader taskCount={taskCount} isActive={isActive} />
+			<TaskSectionHeader title="Tasks" href="/tasks" count={taskCount} isActive={pathname === "/tasks"} />
+			<TaskSectionHeader
+				title="Today"
+				href="/tasks/today"
+				count={todayTasks.length}
+				isActive={pathname === "/tasks/today"}
+			/>
+			<TaskSectionHeader
+				title="Upcoming"
+				href="/tasks/upcoming"
+				count={upcomingTasks.length}
+				isActive={pathname === "/tasks/upcoming"}
+			/>
 			{isFetching ? (
 				<div className="py-2 text-center text-gray-500">Fetching tasks...</div>
 			) : (
@@ -64,11 +81,13 @@ export const TaskSection: React.FC<{ pathname: string }> = ({ pathname }) => {
 }
 
 interface TaskSectionHeaderProps {
-	taskCount: number
+	title: string
+	href: string
+	count: number
 	isActive: boolean
 }
 
-const TaskSectionHeader: React.FC<TaskSectionHeaderProps> = ({ taskCount, isActive }) => (
+const TaskSectionHeader: React.FC<TaskSectionHeaderProps> = ({ title, href, count, isActive }) => (
 	<div
 		className={cn(
 			"flex min-h-[30px] items-center gap-px rounded-md",
@@ -76,74 +95,23 @@ const TaskSectionHeader: React.FC<TaskSectionHeaderProps> = ({ taskCount, isActi
 		)}
 	>
 		<Link
-			href="/tasks"
+			href={href}
 			className="flex flex-1 items-center justify-start rounded-md px-2 py-1 focus-visible:outline-none focus-visible:ring-0"
 		>
 			<p className="text-xs">
-				Tasks
-				{taskCount > 0 && <span className="text-muted-foreground ml-1">{taskCount}</span>}
+				{title}
+				{count > 0 && <span className="text-muted-foreground ml-1">{count}</span>}
 			</p>
 		</Link>
 	</div>
-	// <div
-	// 	className={cn(
-	// 		"flex min-h-[30px] items-center gap-px rounded-md",
-	// 		isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
-	// 	)}
-	// >
-	// 	<Button
-	// 		variant="ghost"
-	// 		className="size-6 flex-1 items-center justify-start rounded-md px-2 py-1 focus-visible:outline-none focus-visible:ring-0"
-	// 	>
-	// 		<p className="flex items-center text-xs font-medium">
-	// 			Tasks
-	// 			{taskCount > 0 && <span className="text-muted-foreground ml-1">{taskCount}</span>}
-	// 		</p>
-	// 	</Button>
-	// </div>
 )
 
 interface ListProps {
-	tasks: ListOfTasks
+	tasks: (Task | null)[] | undefined
 }
 
 const List: React.FC<ListProps> = ({ tasks }) => {
-	const pathname = usePathname()
-
 	return (
-		<div className="flex flex-col gap-px">
-			<ListItem label="All Tasks" href="/tasks" count={tasks.length} isActive={pathname === "/tasks"} />
-		</div>
+		<div>{tasks?.filter((task): task is Task => task !== null).map(task => <div key={task.id}>{task.title}</div>)}</div>
 	)
 }
-
-interface ListItemProps {
-	label: string
-	href: string
-	count: number
-	isActive: boolean
-}
-
-const ListItem: React.FC<ListItemProps> = ({ label, href, count, isActive }) => (
-	<div className="group/reorder-task relative">
-		<div className="group/task-link relative flex min-w-0 flex-1">
-			<Link
-				// TODO: update links
-				href="/tasks"
-				className="relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium"
-				// className={cn(
-				// 	"relative flex h-8 w-full items-center gap-2 rounded-md p-1.5 font-medium",
-				// 	isActive ? "bg-accent text-accent-foreground" : "hover:bg-accent hover:text-accent-foreground"
-				// )}
-			>
-				<div className="flex max-w-full flex-1 items-center gap-1.5 truncate text-sm">
-					<LaIcon name="BookCheck" className="opacity-60" />
-					<p className={cn("truncate opacity-95 group-hover/task-link:opacity-100")}>{label}</p>
-				</div>
-			</Link>
-			{count > 0 && (
-				<span className="absolute right-2 top-1/2 z-[1] -translate-y-1/2 rounded p-1 text-sm">{count}</span>
-			)}
-		</div>
-	</div>
-)

web/components/routes/task/TaskForm.tsx

@@ -1,4 +1,126 @@
-"use client"
+// import { useState, useEffect, useRef } from "react"
+// import { motion, AnimatePresence } from "framer-motion"
+// import { ListOfTasks, Task } from "@/lib/schema/tasks"
+// import { Input } from "@/components/ui/input"
+// import { Button } from "@/components/ui/button"
+// import { useAccount } from "@/lib/providers/jazz-provider"
+// import { LaIcon } from "@/components/custom/la-icon"
+// import { Checkbox } from "@/components/ui/checkbox"
+// import { format } from "date-fns"
+// import { DatePicker } from "@/components/ui/date-picker"
+
+// interface TaskFormProps {
+// 	filter?: "today" | "upcoming"
+// }
+
+// export const TaskForm: React.FC<TaskFormProps> = ({ filter }) => {
+// 	const [title, setTitle] = useState("")
+// 	const [dueDate, setDueDate] = useState<Date | undefined>(filter === "today" ? new Date() : undefined)
+// 	const [inputVisible, setInputVisible] = useState(false)
+// 	const { me } = useAccount({ root: {} })
+// 	const inputRef = useRef<HTMLInputElement>(null)
+
+// 	const handleSubmit = (e: React.FormEvent) => {
+// 		e.preventDefault()
+// 		if (title.trim() && (filter !== "upcoming" || dueDate)) {
+// 			if (me?.root?.tasks === undefined) {
+// 				if (!me) return
+// 				me.root.tasks = ListOfTasks.create([], { owner: me })
+// 			}
+
+// 			const newTask = Task.create(
+// 				{
+// 					title,
+// 					description: "",
+// 					status: "todo",
+// 					createdAt: new Date(),
+// 					updatedAt: new Date(),
+// 					dueDate: dueDate || null
+// 				},
+// 				{ owner: me._owner }
+// 			)
+// 			me.root.tasks?.push(newTask)
+// 			resetForm()
+// 		}
+// 	}
+
+// 	const resetForm = () => {
+// 		setTitle("")
+// 		setDueDate(filter === "today" ? new Date() : undefined)
+// 		setInputVisible(false)
+// 	}
+
+// 	const handleKeyDown = (e: React.KeyboardEvent) => {
+// 		if (e.key === "Escape") {
+// 			resetForm()
+// 		} else if (e.key === "Backspace" && title.trim() === "") {
+// 			resetForm()
+// 		}
+// 	}
+
+// 	useEffect(() => {
+// 		if (inputVisible && inputRef.current) {
+// 			inputRef.current.focus()
+// 		}
+// 	}, [inputVisible])
+
+// 	const formattedDate = dueDate ? format(dueDate, "EEE, MMMM do, yyyy") : "Select a date"
+
+// 	return (
+// 		<div className="flex items-center space-x-2">
+// 			<AnimatePresence mode="wait">
+// 				{!inputVisible ? (
+// 					<motion.div
+// 						key="add-button"
+// 						initial={{ opacity: 0, width: 0 }}
+// 						animate={{ opacity: 1, width: "auto" }}
+// 						exit={{ opacity: 0, width: 0 }}
+// 						transition={{ duration: 0.3 }}
+// 					>
+// 						<Button
+// 							className="flex flex-row items-center gap-1"
+// 							onClick={() => setInputVisible(true)}
+// 							variant="outline"
+// 						>
+// 							<LaIcon name="Plus" />
+// 							Add task
+// 						</Button>
+// 					</motion.div>
+// 				) : (
+// 					<motion.form
+// 						key="input-form"
+// 						initial={{ width: 0, opacity: 0 }}
+// 						animate={{ width: "100%", opacity: 1 }}
+// 						exit={{ width: 0, opacity: 0 }}
+// 						transition={{ duration: 0.3 }}
+// 						onSubmit={handleSubmit}
+// 						className="bg-result flex w-full items-center justify-between rounded-lg p-2 px-3"
+// 					>
+// 						<div className="flex flex-row items-center gap-3">
+// 							<Checkbox checked={false} onCheckedChange={() => {}} />
+// 							<Input
+// 								autoFocus
+// 								ref={inputRef}
+// 								value={title}
+// 								className="flex-grow border-none bg-transparent p-0 focus-visible:ring-0"
+// 								onChange={e => setTitle(e.target.value)}
+// 								onKeyDown={handleKeyDown}
+// 								placeholder="Task title"
+// 							/>
+// 						</div>
+// 						<div className="flex items-center space-x-2">
+// 							{filter === "upcoming" && (
+// 								<DatePicker date={dueDate} onDateChange={(date: Date | undefined) => setDueDate(date)} />
+// 							)}
+// 							<span className="text-muted-foreground text-xs">{formattedDate}</span>
+// 						</div>
+// 					</motion.form>
+// 				)}
+// 			</AnimatePresence>
+// 		</div>
+// 	)
+// }
+
 import { useState, useEffect, useRef } from "react"
 import { motion, AnimatePresence } from "framer-motion"
 import { ListOfTasks, Task } from "@/lib/schema/tasks"
@@ -8,18 +130,22 @@ import { useAccount } from "@/lib/providers/jazz-provider"
 import { LaIcon } from "@/components/custom/la-icon"
 import { Checkbox } from "@/components/ui/checkbox"
 import { format } from "date-fns"
+import { DatePicker } from "@/components/ui/date-picker"
 
-interface TaskFormProps {}
+interface TaskFormProps {
+	filter?: "today" | "upcoming" | undefined
+}
 
-export const TaskForm: React.FC<TaskFormProps> = ({}) => {
+export const TaskForm: React.FC<TaskFormProps> = ({ filter }) => {
 	const [title, setTitle] = useState("")
+	const [dueDate, setDueDate] = useState<Date | undefined>(filter === "today" ? new Date() : undefined)
 	const [inputVisible, setInputVisible] = useState(false)
 	const { me } = useAccount({ root: {} })
 	const inputRef = useRef<HTMLInputElement>(null)
 
 	const handleSubmit = (e: React.FormEvent) => {
 		e.preventDefault()
-		if (title.trim()) {
+		if (title.trim() && (filter === "today" || (filter === "upcoming" && dueDate))) {
 			if (me?.root?.tasks === undefined) {
 				if (!me) return
 				me.root.tasks = ListOfTasks.create([], { owner: me })
@@ -31,7 +157,8 @@ export const TaskForm: React.FC<TaskFormProps> = ({}) => {
 					description: "",
 					status: "todo",
 					createdAt: new Date(),
-					updatedAt: new Date()
+					updatedAt: new Date(),
+					dueDate: dueDate || (filter === "today" ? new Date() : null)
 				},
 				{ owner: me._owner }
 			)
@@ -42,6 +169,7 @@ export const TaskForm: React.FC<TaskFormProps> = ({}) => {
 
 	const resetForm = () => {
 		setTitle("")
+		setDueDate(filter === "today" ? new Date() : undefined)
 		setInputVisible(false)
 	}
 
@@ -59,55 +187,60 @@ export const TaskForm: React.FC<TaskFormProps> = ({}) => {
 		}
 	}, [inputVisible])
 
-	const formattedDate = format(new Date(), "EEE, MMMM do, yyyy")
+	const formattedDate = dueDate ? format(dueDate, "EEE, MMMM do, yyyy") : "Select a date"
 
 	return (
 		<div className="flex items-center space-x-2">
 			<AnimatePresence mode="wait">
-				{!inputVisible ? (
-					<motion.div
-						key="add-button"
-						initial={{ opacity: 0, width: 0 }}
-						animate={{ opacity: 1, width: "auto" }}
-						exit={{ opacity: 0, width: 0 }}
-						transition={{ duration: 0.3 }}
-					>
-						<Button
-							className="flex flex-row items-center gap-1"
-							onClick={() => setInputVisible(true)}
-							variant="outline"
+				{filter ? (
+					!inputVisible ? (
+						<motion.div
+							key="add-button"
+							initial={{ opacity: 0, width: 0 }}
+							animate={{ opacity: 1, width: "auto" }}
+							exit={{ opacity: 0, width: 0 }}
+							transition={{ duration: 0.3 }}
 						>
-							<LaIcon name="Plus" />
-							Add task
-						</Button>
-					</motion.div>
-				) : (
-					<motion.form
-						key="input-form"
-						initial={{ width: 0, opacity: 0 }}
-						animate={{ width: "100%", opacity: 1 }}
-						exit={{ width: 0, opacity: 0 }}
-						transition={{ duration: 0.3 }}
-						onSubmit={handleSubmit}
-						className="bg-result flex w-full items-center justify-between rounded-lg p-2 px-3"
-					>
-						<div className="flex flex-row items-center gap-3">
-							<Checkbox checked={false} onCheckedChange={() => {}} />
-							<Input
-								autoFocus
-								ref={inputRef}
-								value={title}
-								className="flex-grow border-none bg-transparent p-0 focus-visible:ring-0"
-								onChange={e => setTitle(e.target.value)}
-								onKeyDown={handleKeyDown}
-								// placeholder="Task title"
-							/>
-						</div>
-						<div className="flex items-center space-x-2">
-							<span className="text-muted-foreground text-xs">{formattedDate}</span>
-						</div>
-					</motion.form>
-				)}
+							<Button
+								className="flex flex-row items-center gap-1"
+								onClick={() => setInputVisible(true)}
+								variant="outline"
+							>
+								<LaIcon name="Plus" />
+								Add task
+							</Button>
+						</motion.div>
+					) : (
+						<motion.form
+							key="input-form"
+							initial={{ width: 0, opacity: 0 }}
+							animate={{ width: "100%", opacity: 1 }}
+							exit={{ width: 0, opacity: 0 }}
+							transition={{ duration: 0.3 }}
+							onSubmit={handleSubmit}
+							className="bg-result flex w-full items-center justify-between rounded-lg p-2 px-3"
+						>
+							<div className="flex flex-row items-center gap-3">
+								<Checkbox checked={false} onCheckedChange={() => {}} />
+								<Input
+									autoFocus
+									ref={inputRef}
+									value={title}
+									className="flex-grow border-none bg-transparent p-0 focus-visible:ring-0"
+									onChange={e => setTitle(e.target.value)}
+									onKeyDown={handleKeyDown}
+									placeholder="Task title"
+								/>
+							</div>
+							<div className="flex items-center space-x-2">
+								{filter === "upcoming" && (
+									<DatePicker date={dueDate} onDateChange={(date: Date | undefined) => setDueDate(date)} />
+								)}
+								<span className="text-muted-foreground text-xs">{formattedDate}</span>
+							</div>
+						</motion.form>
+					)
+				) : null}
 			</AnimatePresence>
 		</div>
 	)

web/components/routes/task/TaskItem.tsx

@@ -1,24 +1,78 @@
 import { Task } from "@/lib/schema/tasks"
 import { Checkbox } from "@/components/ui/checkbox"
 import { format } from "date-fns"
+import { useState, useRef, useEffect } from "react"
+import { Input } from "@/components/ui/input"
 
 interface TaskItemProps {
 	task: Task
 	onUpdateTask: (taskId: string, updates: Partial<Task>) => void
+	onDeleteTask: (taskId: string) => void
 }
 
-export const TaskItem: React.FC<TaskItemProps> = ({ task, onUpdateTask }) => {
+export const TaskItem: React.FC<TaskItemProps> = ({ task, onUpdateTask, onDeleteTask }) => {
+	const [isEditing, setIsEditing] = useState(false)
+	const [editedTitle, setEditedTitle] = useState(task.title)
+	const inputRef = useRef<HTMLInputElement>(null)
+
+	useEffect(() => {
+		if (isEditing && inputRef.current) {
+			inputRef.current.focus()
+		}
+	}, [isEditing])
+
 	const statusChange = (checked: boolean) => {
-		onUpdateTask(task.id, { status: checked ? "done" : "todo" })
+		if (checked) {
+			onDeleteTask(task.id)
+		} else {
+			onUpdateTask(task.id, { status: "todo" })
+		}
+	}
+
+	const clickTitle = () => {
+		setIsEditing(true)
+	}
+
+	const titleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		setEditedTitle(e.target.value)
+	}
+
+	const titleBlur = () => {
+		setIsEditing(false)
+		if (editedTitle.trim() !== task.title) {
+			onUpdateTask(task.id, { title: editedTitle.trim() })
+		}
+	}
+
+	const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+		if (e.key === "Enter") {
+			titleBlur()
+		}
 	}
 
 	const formattedDate = format(new Date(task.createdAt), "EEE, MMMM do, yyyy")
 
 	return (
 		<li className="bg-result transitiion-opacity flex items-center justify-between rounded-lg p-2 px-3 hover:opacity-60">
-			<div className="flex flex-row items-center gap-3">
+			<div className="flex flex-grow flex-row items-center gap-3">
 				<Checkbox checked={task.status === "done"} onCheckedChange={statusChange} />
-				<p className={task.status === "done" ? "text-foreground line-through" : ""}>{task.title}</p>
+				{isEditing ? (
+					<input
+						ref={inputRef}
+						value={editedTitle}
+						onChange={titleChange}
+						onBlur={titleBlur}
+						onKeyDown={handleKeyDown}
+						className="flex-grow border-none bg-transparent p-0 shadow-none outline-none focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
+					/>
+				) : (
+					<p
+						className={task.status === "done" ? "text-foreground flex-grow line-through" : "flex-grow"}
+						onClick={clickTitle}
+					>
+						{task.title}
+					</p>
+				)}
 			</div>
 			<span className="text-muted-foreground text-xs">{formattedDate}</span>
 		</li>

web/components/routes/task/TaskList.tsx

@@ -1,20 +1,21 @@
 import React from "react"
-import { ListOfTasks, Task } from "@/lib/schema/tasks"
+import { Task } from "@/lib/schema/tasks"
 import { TaskItem } from "./TaskItem"
 
 interface TaskListProps {
-	tasks?: ListOfTasks
+	tasks: Task[]
 	onUpdateTask: (taskId: string, updates: Partial<Task>) => void
+	onDeleteTask: (taskId: string) => void
 }
 
-export const TaskList: React.FC<TaskListProps> = ({ tasks, onUpdateTask }) => {
+export const TaskList: React.FC<TaskListProps> = ({ tasks, onUpdateTask, onDeleteTask }) => {
 	return (
 		<ul className="flex flex-col gap-y-2">
 			{tasks?.map(
 				task =>
 					task?.id && (
 						<li key={task.id}>
-							<TaskItem task={task} onUpdateTask={onUpdateTask} />
+							<TaskItem task={task} onUpdateTask={onUpdateTask} onDeleteTask={onDeleteTask} />
 						</li>
 					)
 			)}

web/components/routes/task/TaskRoute.tsx

@@ -5,11 +5,28 @@ import { Task } from "@/lib/schema/tasks"
 import { TaskList } from "./TaskList"
 import { TaskForm } from "./TaskForm"
 import { LaIcon } from "@/components/custom/la-icon"
+import { isToday, isFuture } from "date-fns"
+import { useTaskActions } from "./new-task-actions"
+import { ID } from "jazz-tools"
 
-export const TaskRoute: React.FC = () => {
+interface TaskRouteProps {
+	filter?: "today" | "upcoming"
+}
+
+export const TaskRoute: React.FC<TaskRouteProps> = ({ filter }) => {
 	const { me } = useAccount({ root: { tasks: [] } })
 	const tasks = me?.root.tasks
-	console.log(tasks, "tasks here")
+	const { deleteTask } = useTaskActions()
+
+	const filteredTasks = tasks?.filter(task => {
+		if (!task) return false
+		if (filter === "today") {
+			return task.status !== "done" && task.dueDate && isToday(task.dueDate)
+		} else if (filter === "upcoming") {
+			return task.status !== "done" && task.dueDate && isFuture(task.dueDate)
+		}
+		return true
+	})
 
 	const updateTask = (taskId: string, updates: Partial<Task>) => {
 		if (me?.root?.tasks) {
@@ -20,14 +37,26 @@ export const TaskRoute: React.FC = () => {
 		}
 	}
 
+	const onDeleteTask = (taskId: string) => {
+		if (me) {
+			deleteTask(me, taskId as ID<Task>)
+		}
+	}
+
 	return (
 		<div className="flex flex-col space-y-4 p-4">
 			<div className="flex flex-row items-center gap-1">
 				<LaIcon name="ListTodo" className="size-6" />
-				<h1 className="text-xl font-bold">Current Tasks</h1>
+				<h1 className="text-xl font-bold">
+					{filter === "today" ? "Today's Tasks" : filter === "upcoming" ? "Upcoming Tasks" : "All Tasks"}
+				</h1>
 			</div>
-			<TaskForm />
-			<TaskList tasks={tasks} onUpdateTask={updateTask} />
+			<TaskForm filter={filter} />
+			<TaskList
+				tasks={filteredTasks?.filter((task): task is Task => task !== null) || []}
+				onUpdateTask={updateTask}
+				onDeleteTask={onDeleteTask}
+			/>
 		</div>
 	)
 }

web/components/routes/task/TodayTaskRoute.tsx

@@ -0,0 +1,15 @@
+import { TaskRoute } from "@/components/routes/task/TaskRoute"
+import { currentUser } from "@clerk/nextjs/server"
+import { notFound } from "next/navigation"
+import { get } from "ronin"
+
+export default async function TodayTasksPage() {
+	const user = await currentUser()
+	const flag = await get.featureFlag.with.name("TASK")
+
+	if (!user?.emailAddresses.some(email => flag?.emails.includes(email.emailAddress))) {
+		notFound()
+	}
+
+	return <TaskRoute filter="today" />
+}

web/components/routes/task/UpcomingTaskRoute.tsx

@@ -0,0 +1,15 @@
+import { TaskRoute } from "@/components/routes/task/TaskRoute"
+import { currentUser } from "@clerk/nextjs/server"
+import { notFound } from "next/navigation"
+import { get } from "ronin"
+
+export default async function UpcomingTasksPage() {
+	const user = await currentUser()
+	const flag = await get.featureFlag.with.name("TASK")
+
+	if (!user?.emailAddresses.some(email => flag?.emails.includes(email.emailAddress))) {
+		notFound()
+	}
+
+	return <TaskRoute filter="upcoming" />
+}

web/components/routes/task/new-task-actions.ts

@@ -0,0 +1,62 @@
+import { useCallback } from "react"
+import { toast } from "sonner"
+import { LaAccount } from "@/lib/schema"
+import { Task, ListOfTasks } from "@/lib/schema/tasks"
+import { ID } from "jazz-tools"
+
+export const useTaskActions = () => {
+	const newTask = useCallback((me: LaAccount): Task | null => {
+		if (!me.root) {
+			console.error("User root is not initialized")
+			return null
+		}
+
+		if (!me.root.tasks) {
+			me.root.tasks = ListOfTasks.create([], { owner: me })
+		}
+
+		const newTask = Task.create(
+			{
+				title: "",
+				description: "",
+				status: "todo",
+				createdAt: new Date(),
+				updatedAt: new Date()
+			},
+			{ owner: me._owner }
+		)
+
+		me.root.tasks.push(newTask)
+		return newTask
+	}, [])
+
+	const deleteTask = useCallback((me: LaAccount, taskId: ID<Task>): void => {
+		if (!me.root?.tasks) return
+
+		const index = me.root.tasks.findIndex(item => item?.id === taskId)
+		if (index === -1) {
+			toast.error("Task not found")
+			return
+		}
+
+		const task = me.root.tasks[index]
+		if (!task) {
+			toast.error("Task data is invalid")
+			return
+		}
+
+		try {
+			me.root.tasks.splice(index, 1)
+
+			toast.success("Task deleted", {
+				position: "bottom-right",
+				description: `${task.title} has been deleted.`
+			})
+		} catch (error) {
+			console.error("Failed to delete task", error)
+			toast.error("Failed to delete task")
+		}
+	}, [])
+
+	return { newTask, deleteTask }
+}

web/components/ui/date-picker.tsx

@@ -0,0 +1,32 @@
+import * as React from "react"
+import { format } from "date-fns"
+import { Calendar as CalendarIcon } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Calendar } from "@/components/ui/calendar"
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
+
+interface DatePickerProps {
+	date: Date | undefined
+	onDateChange: (date: Date | undefined) => void
+	className?: string
+}
+
+export function DatePicker({ date, onDateChange, className }: DatePickerProps) {
+	return (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button
+					variant={"outline"}
+					className={cn("w-[240px] justify-start text-left font-normal", !date && "text-muted-foreground", className)}
+				>
+					<CalendarIcon className="mr-2 h-4 w-4" />
+					{date ? format(date, "PPP") : <span>Pick a date</span>}
+				</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-auto p-0" align="start">
+				<Calendar mode="single" selected={date} onSelect={onDateChange} initialFocus />
+			</PopoverContent>
+		</Popover>
+	)
+}

web/lib/schema/tasks.ts

@@ -6,6 +6,7 @@ export class Task extends CoMap {
 	status = co.literal("todo", "in_progress", "done")
 	createdAt = co.encoded(Encoders.Date)
 	updatedAt = co.encoded(Encoders.Date)
+	dueDate = co.optional.encoded(Encoders.Date)
 }
 
 export class ListOfTasks extends CoList.Of(co.ref(Task)) {}