UI and better date generation finished

frontend/src/components/LeftSide.tsx

@@ -1,15 +1,27 @@
 import { useEffect, useState } from "react";
 import api from "../utils/api";
+import Grid from "@mui/material/Grid2";
+import {
+  TableRow,
+  TableBody,
+  TableCell,
+  TableHead,
+  Table,
+} from "@mui/material";
 
 const LeftSide = () => {
+  // next prev and sort
   const [users, setUsers] = useState();
   const [params, setParams] = useState({ offset: 0, sortby: "f_name" });
-
+  // reset button
   const [reset, setReset] = useState(true);
 
   // date
   const [date, setDate] = useState({ from: "2021-01-01", to: "2028-01-01" });
-  const [dateToSubmit, setDateToSubmit] = useState({});
+  const [dateToSubmit, setDateToSubmit] = useState({
+    from: "2021-01-01",
+    to: "2028-01-01",
+  });
 
   useEffect(() => {
     async function fetchData() {
@@ -28,13 +40,7 @@ const LeftSide = () => {
     fetchData();
   }, [reset, params, dateToSubmit]);
 
-  const handleButtonClick = () => {
-    // When the button is clicked, update the dateToShow state and trigger a re-render
-    setDateToSubmit(date);
-  };
-
   const viewProjectHours = (user) => {
-    console.log(user);
     async function fetchHours() {
       const resp = await api.get("/getUser", {
         params: { userid: user },
@@ -47,8 +53,8 @@ const LeftSide = () => {
 
   if (!users) return <></>;
   return (
-    <div>
-      <div>
+    <Grid container spacing={2}>
+      <Grid size={5}>
         <label htmlFor="date">From: </label>
         <input
           type="date"
@@ -65,10 +71,10 @@ const LeftSide = () => {
           value={date.to}
           onChange={(event) => setDate({ ...date, to: event.target.value })}
         />
-        <button onClick={handleButtonClick}>Submit Date</button>
-      </div>
-      <div>
-        <h4>Select a sort:</h4>
+        <button onClick={() => setDateToSubmit(date)}>Submit Date</button>
+      </Grid>
+      <Grid size={3}>
+        <span>Select a sort:</span>
         <select
           value={params.sortby}
           onChange={(event) =>
@@ -84,60 +90,68 @@ const LeftSide = () => {
           <option value="date">Date</option>
           <option value="time">Time</option>
         </select>
-      </div>
-      <button
-        onClick={() =>
-          setParams((prevParams) => {
-            return { ...prevParams, offset: prevParams.offset + 10 };
-          })
-        }
-      >
-        Next users
-      </button>
-      <button
-        onClick={() =>
-          setParams((prevParams) => {
-            return { ...prevParams, offset: prevParams.offset - 10 };
-          })
-        }
-      >
-        Prev users
-      </button>
-      <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>
+      </Grid>
+      <Grid size={4}></Grid>
+      <Grid size={4}></Grid>
+      <Grid size={4}>
+        <button
+          onClick={() => {
+            if (!params.offset) return;
+            setParams((prevParams) => {
+              return { ...prevParams, offset: prevParams.offset - 10 };
+            });
+          }}
+        >
+          Prev users
+        </button>
+        <button
+          onClick={() =>
+            setParams((prevParams) => {
+              return { ...prevParams, offset: prevParams.offset + 10 };
+            })
+          }
+        >
+          Next users
+        </button>
+      </Grid>
+      <Table>
+        <TableHead>
+          <TableRow>
+            <TableCell>First Name</TableCell>
+            <TableCell>Last Name</TableCell>
+            <TableCell>Email</TableCell>
+            <TableCell>Project name</TableCell>
+            <TableCell>Date</TableCell>
+            <TableCell>Hours</TableCell>
+          </TableRow>
+        </TableHead>
+        <TableBody>
           {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>
+              <TableRow key={idx}>
+                <TableCell>{post.f_name} </TableCell>
+                <TableCell>{post.l_name} </TableCell>
+                <TableCell>{post.mail} </TableCell>
+                <TableCell>{post.name} </TableCell>
+                <TableCell>{post.date.slice(0, 10)} </TableCell>
+                <TableCell>{post.time} </TableCell>
+                <TableCell>
                   <button onClick={() => viewProjectHours(post.user)}>
                     View Project Hours
                   </button>
-                </td>
-              </tr>
+                </TableCell>
+              </TableRow>
             ))
           ) : (
             <div>No posts found...</div>
           )}
-        </tbody>
-      </table>
-      <button onClick={() => setReset(!reset)}>RESET</button>
-    </div>
+        </TableBody>
+      </Table>
+      <Grid size={5}></Grid>
+      <Grid size={6}>
+        <button onClick={() => setReset(!reset)}>RESET</button>
+      </Grid>
+    </Grid>
   );
 };