MGC-JUL-24 | PRISCILLA MAC-GATUS|TASK-TRACKER|WEEK1

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["Ebetsam", "Umair"]
+}

web/src/App.jsx

@@ -1,9 +1,71 @@
-import { TaskList } from './components/domains/task/TaskList/TaskList';
+import { useState } from 'react';
+import TaskList from './components/domains/task/TaskList/TaskList';
+import NewTaskForm from './components/domains/task/NewTask/NewTask.jsx';
 
 function App() {
+  const [TaskListInfo, setTaskListInfo] = useState([
+    {
+      id: 'T1',
+      ProjectTask: 'Rework UI/UX',
+      ProjectStatus: 'Low',
+      date: '12/05/2025',
+      participants: ['Said', ' Rachel'],
+      project: 'Timer App',
+    },
+    {
+      id: 'T2',
+      ProjectTask: 'Dark Mode Toggle',
+      ProjectStatus: 'High',
+      date: '09/03/2025',
+      participants: ['Umair', ' Precious'],
+      project: 'ASA DarkMode Feature',
+    },
+    {
+      id: 'T3',
+      ProjectTask: 'Accessibility Checks',
+      ProjectStatus: 'Medium',
+      date: '15/04/2025',
+      participants: ['Micheal', ' Ricardo'],
+      project: 'Timer App',
+    },
+    {
+      id: 'T4',
+      ProjectTask: 'Notification Integration',
+      ProjectStatus: 'High',
+      date: '11/03/2025',
+      participants: ['Ebetsam', ' Deborah'],
+      project: 'Timer App',
+    },
+  ]);
+
+  const newTask = (
+    taskName,
+    ProjectStatus,
+    deadline,
+    participants,
+    projectName,
+  ) => {
+    setTaskListInfo((prevTaskInfo) => [
+      ...prevTaskInfo,
+      {
+        id: `T${prevTaskInfo.length + 1}`,
+        ProjectTask: taskName,
+        ProjectStatus: ProjectStatus.toLowerCase()
+          .split(' ')
+          .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+          .join(' '),
+        date: deadline,
+        participants: participants.split(','),
+        project: projectName,
+      },
+    ]);
+  };
+
   return (
     <>
-      <TaskList />
+      <TaskList TaskListInfo={TaskListInfo}></TaskList>
+
+      <NewTaskForm onHandleNewTask={newTask}></NewTaskForm>
     </>
   );
 }

web/src/components/Icons/participantIcon.jsx

@@ -0,0 +1,47 @@
+const ParticipantIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <g clipPath="url(#clip0_2106_140)">
+      <path
+        d="M14.1666 17.5V15.8333C14.1666 14.9493 13.8154 14.1014 13.1903 13.4763C12.5652 12.8512 11.7173 12.5 10.8333 12.5H4.16659C3.28253 12.5 2.43468 12.8512 1.80956 13.4763C1.18444 14.1014 0.833252 14.9493 0.833252 15.8333V17.5"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M7.50008 9.16667C9.34103 9.16667 10.8334 7.67428 10.8334 5.83333C10.8334 3.99238 9.34103 2.5 7.50008 2.5C5.65913 2.5 4.16675 3.99238 4.16675 5.83333C4.16675 7.67428 5.65913 9.16667 7.50008 9.16667Z"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M19.1667 17.5V15.8333C19.1662 15.0948 18.9204 14.3773 18.4679 13.7936C18.0154 13.2099 17.3819 12.793 16.6667 12.6083"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.3333 2.60833C14.0503 2.79191 14.6858 3.20891 15.1396 3.79359C15.5935 4.37826 15.8398 5.09735 15.8398 5.8375C15.8398 6.57764 15.5935 7.29673 15.1396 7.8814C14.6858 8.46608 14.0503 8.88308 13.3333 9.06666"
+        stroke="black"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </g>
+    <defs>
+      <clipPath id="clip0_2106_140">
+        <rect width="20" height="20" fill="white" />
+      </clipPath>
+    </defs>
+  </svg>
+);
+
+export default ParticipantIcon;