main features working, UI and better date generation left

'

frontend/src/components/LeftSide.tsx

@@ -5,6 +5,8 @@ const LeftSide = () => {
   const [users, setUsers] = useState();
   const [params, setParams] = useState({ offset: 0, sortby: "f_name" });
 
+  const [reset, setReset] = useState(true);
+
   // date
   const [date, setDate] = useState({ from: "2021-01-01", to: "2028-01-01" });
   const [dateToSubmit, setDateToSubmit] = useState({});
@@ -16,15 +18,33 @@ const LeftSide = () => {
       });
       setUsers(resp.data);
     }
+    async function resetData() {
+      await api.get("/reset");
+    }
+    if (!reset) {
+      setReset(true);
+      resetData();
+    }
     fetchData();
-  }, [params, dateToSubmit]);
+  }, [reset, params, dateToSubmit]);
 
   const handleButtonClick = () => {
     // When the button is clicked, update the dateToShow state and trigger a re-render
-    console.log(dateToSubmit);
     setDateToSubmit(date);
   };
 
+  const viewProjectHours = (user) => {
+    console.log(user);
+    async function fetchHours() {
+      const resp = await api.get("/getUser", {
+        params: { userid: user },
+      });
+      const entriesArray = Object.entries(resp.data);
+      alert(entriesArray);
+    }
+    fetchHours();
+  };
+
   if (!users) return <></>;
   return (
     <div>
@@ -83,29 +103,40 @@ const LeftSide = () => {
       >
         Prev users
       </button>
-      <button
-        onClick={() =>
-          setParams((prevParams) => {
-            return { ...prevParams, to: "2028-12-12", from: "2028-01-01" };
-          })
-        }
-      >
-        Filter by date
-      </button>
-      {users.length > 0 && Array.isArray(users) ? (
-        users.map((post, idx) => (
-          <div key={idx}>
-            <span>{post.f_name} </span>
-            <span>{post.l_name} </span>
-            <span>{post.mail} </span>
-            <span>{post.name} </span>
-            <span>{post.date} </span>
-            <span>{post.time} </span>
-          </div>
-        ))
-      ) : (
-        <div>No posts found...</div>
-      )}
+      <table>
+        <thead>
+          <tr>
+            <th>First Name</th>
+            <th>Last Name</th>
+            <th>Email</th>
+            <th>Project name</th>
+            <th>Date</th>
+            <th>Hours</th>
+          </tr>
+        </thead>
+        <tbody>
+          {users.length > 0 && Array.isArray(users) ? (
+            users.map((post, idx) => (
+              <tr key={idx}>
+                <td>{post.f_name} </td>
+                <td>{post.l_name} </td>
+                <td>{post.mail} </td>
+                <td>{post.name} </td>
+                <td>{post.date} </td>
+                <td>{post.time} </td>
+                <td>
+                  <button onClick={() => viewProjectHours(post.user)}>
+                    View Project Hours
+                  </button>
+                </td>
+              </tr>
+            ))
+          ) : (
+            <div>No posts found...</div>
+          )}
+        </tbody>
+      </table>
+      <button onClick={() => setReset(!reset)}>RESET</button>
     </div>
   );
 };