[Improvement] [FE + BE] Tasks Table Edits

[jessieh9]

Currently, our tasks page looks like this:

1. Fetch the tasks information from the database instead of hardcoded data.

2. Edit the table to be able to show some of the "Status" column. You can edit the spacing and so on (I think there is a formatDate function already created in the ProjectCard.jsx component).

3. Make the columns filter box a bit smaller for the webpage.
   

4. The current add task form looks like this:
   

   • You can edit the task form to be a bit bigger so that clicking on the x button is easier to trigger
   • Implement a select for the members using the "UsersInProjects" table
   • Post the information into the database and ensure the newly added task is displayed.

Also, really great job on the tasks page before, looks really nice!

Figma Link: https://www.figma.com/team_invite/redeem/m7USct7pyXUSdm1R6BbS9B