diff --git a/app/tasks/page.tsx b/app/tasks/page.tsx new file mode 100644 index 0000000..1493861 --- /dev/null +++ b/app/tasks/page.tsx @@ -0,0 +1,36 @@ +"use client"; +import { useEffect, useState } from "react"; +import { TaskHeader } from "@/components/TaskHeader"; +import { TaskList } from "@/components/TaskList"; +import tasksData from "@/data/taskData.json"; +import { Task } from "@/app/types/tasks"; + +const Tasks = () => { + const [tasks, setTasks] = useState([]); + + useEffect(() => { + setTasks(tasksData); + }, []); + + const todoTasks = tasks.filter((task) => task.status === "todo"); + const inProgressTasks = tasks.filter((task) => task.status === "in-progress"); + + return ( +
+
+ + +
+ +
+ + +
+
+ ); +}; + +export default Tasks; diff --git a/app/test/home.test.tsx b/app/test/home.test.tsx deleted file mode 100644 index 5d1b65c..0000000 --- a/app/test/home.test.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import { render } from "@testing-library/react"; -import { expect, test } from "vitest"; -import Home from "../page"; - -test("renders the homepage correctly", () => { - const { getByText } = render(); - expect(getByText("Hello World!")).toBeDefined(); -}); diff --git a/app/types/task.ts b/app/types/task.ts new file mode 100644 index 0000000..ae67cd7 --- /dev/null +++ b/app/types/task.ts @@ -0,0 +1,8 @@ +export type Task = { + id: number; + title: string; + assignee: string; + dueDate: string; + status: string; + profile?: string; +}; \ No newline at end of file diff --git a/components/TaskCard.tsx b/components/TaskCard.tsx new file mode 100644 index 0000000..7d83dcd --- /dev/null +++ b/components/TaskCard.tsx @@ -0,0 +1,66 @@ +import { Task } from "@/app/types/tasks"; +import { DateFormats, DateUtil } from "@/utils/dateUtil"; +import Image from "next/image"; + +interface TaskCardProps { + task: Task; + className?: string; +} + +const getStatusImagePath = (status: string): string => { + switch (status.toLowerCase()) { + case "in-progress": + return "/assets/InProgressEllipse.svg"; + case "todo": + default: + return "/assets/ToDoEllipse.svg"; + } +}; + +export const TaskCard = ({ task, className }: TaskCardProps) => { + const statusImagePath = getStatusImagePath(task.status); + + const formattedDueDate = new DateUtil(task.dueDate).format( + DateFormats.D_MMM_YYYY + ); + + return ( +
+
+

+ #{task.id} +

+ task-status-icon +

{task.title}

+
+ +
+
+
+ {task.assignee} +
+
+ {formattedDueDate} +
+
+ +
+ assignee-profile +
+
+
+ ); +}; diff --git a/components/TaskHeader.tsx b/components/TaskHeader.tsx new file mode 100644 index 0000000..ac746e7 --- /dev/null +++ b/components/TaskHeader.tsx @@ -0,0 +1,38 @@ +import Image from "next/image"; + +interface TaskSectionProps { + className?: string; + icon?: string; + title: string; + onCreateTask?: () => void; +} + +export const TaskHeader = ({ + className, + icon, + title, + onCreateTask, +}: TaskSectionProps) => { + return ( +
+
+ header-icon +

+ {title} +

+
+ + +
+ ); +}; diff --git a/components/TaskList.tsx b/components/TaskList.tsx new file mode 100644 index 0000000..93959b1 --- /dev/null +++ b/components/TaskList.tsx @@ -0,0 +1,30 @@ +import { Task } from "@/app/types/tasks"; +import { TaskCard } from "./TaskCard"; + +interface TaskListProps { + tasks: Task[]; +} + +export const TaskList = ({ tasks }: TaskListProps) => { + if (tasks.length === 0) { + return ( +
+ No tasks available in this section +
+ ); + } + return ( +
+ {tasks.map((task) => ( + + ))} +
+ ); +}; diff --git a/data/taskData.json b/data/taskData.json new file mode 100644 index 0000000..87a5d3c --- /dev/null +++ b/data/taskData.json @@ -0,0 +1,34 @@ +[ + { + "id": 1, + "title": "Todo Listing", + "assignee": "Vaibhav Singh", + "dueDate": "2023-12-15", + "status": "todo", + "profile": "/assets/user.png" + }, + { + "id": 2, + "title": "Prepare Design Doc", + "assignee": "Random 1", + "dueDate": "2023-12-10", + "status": "todo", + "profile": "/assets/user.png" + }, + { + "id": 3, + "title": "Code Todo Frontend", + "assignee": "Random 2", + "dueDate": "2023-12-10", + "status": "in-progress", + "profile": "/assets/user.png" + }, + { + "id": 4, + "title": "Code Todo Backend", + "assignee": "Random 3", + "dueDate": "2023-12-10", + "status": "in-progress", + "profile": "/assets/user.png" + } +] diff --git a/public/assets/InProgressEllipse.svg b/public/assets/InProgressEllipse.svg new file mode 100644 index 0000000..bc96035 --- /dev/null +++ b/public/assets/InProgressEllipse.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/ToDoEllipse.svg b/public/assets/ToDoEllipse.svg new file mode 100644 index 0000000..880fbb0 --- /dev/null +++ b/public/assets/ToDoEllipse.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/plus.svg b/public/assets/plus.svg new file mode 100644 index 0000000..66f3b0c --- /dev/null +++ b/public/assets/plus.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/user.png b/public/assets/user.png new file mode 100644 index 0000000..44919ba Binary files /dev/null and b/public/assets/user.png differ