Made a new component for time reporting

frontend/src/Components/NewTImeReport.tsx

@@ -0,0 +1,60 @@
+function NewTimeReport(): JSX.Element {
+  const activities = [
+    "Development",
+    "Meeting",
+    "Administration",
+    "Own Work",
+    "Studies",
+    "Testing",
+  ];
+
+  return (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">New Time Report</h1>
+      <div className="border-4 border-black bg-white flex flex-col justify-start min-h-[65vh] h-fit w-[50vw] rounded-3xl overflow-scroll space-y-[2vh] p-[30px] items-center">
+        <input
+          className="w-fill h-[5vh] font-sans text-[3vh] pl-[1vw] rounded-full text-center pt-[1vh] pb-[1vh] border-2 border-black"
+          type="week"
+          placeholder="Week"
+          onKeyDown={(event) => {
+            event.preventDefault();
+          }}
+          onPaste={(event) => {
+            event.preventDefault();
+          }}
+        />
+        <table className="w-full text-center divide-y divide-x divide-white text-[30px]">
+          <thead>
+            <tr>
+              <th className="w-1/2 py-2 border-b-2 border-black">Activity</th>
+              <th className="w-1/2 py-2 border-b-2 border-black">
+                Total Time (min)
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-black">
+            {activities.map((activity, index) => (
+              <tr key={index} className="h-[10vh]">
+                <td>{activity}</td>
+                <td>
+                  <input
+                    type="number"
+                    min="0"
+                    className="border-2 border-black rounded-md text-center w-1/2"
+                    onKeyDown={(event) => {
+                      const keyValue = event.key;
+                      if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                        event.preventDefault();
+                    }}
+                  />
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+}
+
+export default NewTimeReport;

frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx

@@ -1,8 +1,13 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
+import NewTimeReport from "../../Components/NewTImeReport";
 
 function UserNewTimeReportPage(): JSX.Element {
-  const content = <></>;
+  const content = (
+    <>
+      <NewTimeReport />
+    </>
+  );
 
   const buttons = (
     <>