diff --git a/app/components/ScheduledTasks.tsx b/app/components/ScheduledTasks.tsx new file mode 100644 index 0000000..aef217e --- /dev/null +++ b/app/components/ScheduledTasks.tsx @@ -0,0 +1,89 @@ +import React, { useState } from 'react'; +import { Task } from '../types/task'; + +interface ScheduledTasksProps { + tasks: Task[]; + onTaskClick: (task: Task) => void; + onDeleteTask: (task: Task) => void; +} + +// Ensure scheduledFor is treated as a Date when it exists +const ensureDateType = (date: Date | undefined): Date | undefined => { + if (!date) return undefined; + return date instanceof Date ? date : new Date(date); +}; + +const ScheduledTasks: React.FC = ({ + tasks, + onTaskClick, + onDeleteTask, +}) => { + const [isOpen, setIsOpen] = useState(true); + + const scheduledTasks = tasks.filter(task => + task.status === 'todo' && + task.scheduledFor && + ensureDateType(task.scheduledFor)! > new Date() + ); + + if (scheduledTasks.length === 0) return null; + + return ( +
+
setIsOpen(!isOpen)} + > + + + +

Scheduled Tasks

+ + ({scheduledTasks.length}) + +
+
+
+ {scheduledTasks.map((task) => ( +
onTaskClick(task)} + > +
+
+

{task.title}

+
+ Scheduled for: {ensureDateType(task.scheduledFor)!.toLocaleString()} +
+
+ +
+
+ ))} +
+
+
+ ); +}; + +export default ScheduledTasks; \ No newline at end of file diff --git a/app/components/TaskForm.tsx b/app/components/TaskForm.tsx index ce984b8..686980a 100644 --- a/app/components/TaskForm.tsx +++ b/app/components/TaskForm.tsx @@ -15,6 +15,7 @@ const TaskForm: React.FC = ({ onSubmit, onCancel, lists }) => { const [description, setDescription] = useState(''); const [priority, setPriority] = useState<'low' | 'medium' | 'high'>('medium'); const [dueDate, setDueDate] = useState(''); + const [scheduledFor, setScheduledFor] = useState(''); const [assignee, setAssignee] = useState(''); const [assignees, setAssignees] = useState([]); const [tag, setTag] = useState(''); @@ -50,6 +51,7 @@ const TaskForm: React.FC = ({ onSubmit, onCancel, lists }) => { priority, status: 'todo', dueDate: dueDate ? new Date(dueDate) : undefined, + scheduledFor: scheduledFor ? new Date(scheduledFor) : undefined, assignees, tags, subtasks, @@ -173,6 +175,18 @@ const TaskForm: React.FC = ({ onSubmit, onCancel, lists }) => { className="w-full px-3 py-2 bg-[#333333] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500" /> + +
+ + setScheduledFor(e.target.value)} + className="w-full px-3 py-2 bg-[#333333] rounded-md text-white focus:outline-none focus:ring-2 focus:ring-indigo-500" + /> +
diff --git a/app/components/TaskList.tsx b/app/components/TaskList.tsx index 0b8bf73..2c6cf31 100644 --- a/app/components/TaskList.tsx +++ b/app/components/TaskList.tsx @@ -4,6 +4,7 @@ import React from 'react'; import { Droppable } from '@hello-pangea/dnd'; import { Task } from '../types/task'; import { TaskCard } from './TaskCard'; +import ScheduledTasks from './ScheduledTasks'; interface TaskListProps { droppableId: string; @@ -25,26 +26,33 @@ export const TaskList: React.FC = ({ listId }) => { return ( - - {(provided) => ( -
- {tasks.map((task, index) => ( - onTaskClick(task)} - onDelete={() => onDeleteTask(task)} - /> - ))} - {provided.placeholder} -
- )} -
+
+ + {(provided) => ( +
+ {tasks.map((task, index) => ( + onTaskClick(task)} + onDelete={() => onDeleteTask(task)} + /> + ))} + {provided.placeholder} +
+ )} +
+ +
); }; diff --git a/app/types/task.ts b/app/types/task.ts index d1fd913..4ba0423 100644 --- a/app/types/task.ts +++ b/app/types/task.ts @@ -5,6 +5,7 @@ export interface Task { priority: 'low' | 'medium' | 'high'; status: 'todo' | 'in-progress' | 'done'; dueDate?: Date; + scheduledFor?: Date; assignees?: string[]; tags?: string[]; dependsOn?: string[];