Merge branch 'dev' of github.com:imbus64/TTime into dev

backend/internal/database/db.go

@@ -2,6 +2,7 @@ package database
 
 import (
 	"embed"
+	"errors"
 	"path/filepath"
 	"ttime/internal/types"
 
@@ -30,6 +31,7 @@ type Database interface {
 	GetProject(projectId int) (types.Project, error)
 	GetUserRole(username string, projectname string) (string, error)
 	GetWeeklyReport(username string, projectName string, week int) (types.WeeklyReport, error)
+	SignWeeklyReport(reportId int, projectManagerId int) error
 }
 
 // This struct is a wrapper type that holds the database connection
@@ -270,7 +272,8 @@ func (d *Db) GetWeeklyReport(username string, projectName string, week int) (typ
             admin_time,
             own_work_time,
             study_time,
-            testing_time
+            testing_time,
+			signed_by
         FROM
             weekly_reports
         WHERE
@@ -282,6 +285,34 @@ func (d *Db) GetWeeklyReport(username string, projectName string, week int) (typ
 	return report, err
 }
 
+// SignWeeklyReport signs a weekly report by updating the signed_by field
+// with the provided project manager's ID, but only if the project manager
+// is in the same project as the report
+func (d *Db) SignWeeklyReport(reportId int, projectManagerId int) error {
+	// Retrieve the project ID associated with the report
+	var reportProjectID int
+	err := d.Get(&reportProjectID, "SELECT project_id FROM weekly_reports WHERE report_id = ?", reportId)
+	if err != nil {
+		return err
+	}
+
+	// Retrieve the project ID associated with the project manager
+	var managerProjectID int
+	err = d.Get(&managerProjectID, "SELECT project_id FROM user_roles WHERE user_id = ? AND p_role = 'project_manager'", projectManagerId)
+	if err != nil {
+		return err
+	}
+
+	// Check if the project manager is in the same project as the report
+	if reportProjectID != managerProjectID {
+		return errors.New("project manager doesn't have permission to sign the report")
+	}
+
+	// Update the signed_by field of the specified report
+	_, err = d.Exec("UPDATE weekly_reports SET signed_by = ? WHERE report_id = ?", projectManagerId, reportId)
+	return err
+}
+
 // Reads a directory of migration files and applies them to the database.
 // This will eventually be used on an embedded directory
 func (d *Db) Migrate() error {

backend/internal/database/db_test.go

@@ -1,6 +1,7 @@
 package database
 
 import (
+	"fmt"
 	"testing"
 )
 
@@ -410,3 +411,128 @@ func TestGetWeeklyReport(t *testing.T) {
 	}
 	// Check other fields similarly
 }
+
+func TestSignWeeklyReport(t *testing.T) {
+	db, err := setupState()
+	if err != nil {
+		t.Error("setupState failed:", err)
+	}
+
+	// Add project manager
+	err = db.AddUser("projectManager", "password")
+	if err != nil {
+		t.Error("AddUser failed:", err)
+	}
+
+	// Add a regular user
+	err = db.AddUser("testuser", "password")
+	if err != nil {
+		t.Error("AddUser failed:", err)
+	}
+
+	// Add project
+	err = db.AddProject("testproject", "description", "projectManager")
+	if err != nil {
+		t.Error("AddProject failed:", err)
+	}
+
+	// Add both regular users as members to the project
+	err = db.AddUserToProject("testuser", "testproject", "member")
+	if err != nil {
+		t.Error("AddUserToProject failed:", err)
+	}
+
+	err = db.AddUserToProject("projectManager", "testproject", "project_manager")
+	if err != nil {
+		t.Error("AddUserToProject failed:", err)
+	}
+
+	// Add a weekly report for one of the regular users
+	err = db.AddWeeklyReport("testproject", "testuser", 1, 1, 1, 1, 1, 1, 1)
+	if err != nil {
+		t.Error("AddWeeklyReport failed:", err)
+	}
+
+	// Retrieve the added report
+	report, err := db.GetWeeklyReport("testuser", "testproject", 1)
+	if err != nil {
+		t.Error("GetWeeklyReport failed:", err)
+	}
+
+	// Print project manager's ID
+	projectManagerID, err := db.GetUserId("projectManager")
+	if err != nil {
+		t.Error("GetUserId failed:", err)
+	}
+	fmt.Println("Project Manager's ID:", projectManagerID)
+
+	// Sign the report with the project manager
+	err = db.SignWeeklyReport(report.ReportId, projectManagerID)
+	if err != nil {
+		t.Error("SignWeeklyReport failed:", err)
+	}
+
+	// Retrieve the report again to check if it's signed
+	signedReport, err := db.GetWeeklyReport("testuser", "testproject", 1)
+	if err != nil {
+		t.Error("GetWeeklyReport failed:", err)
+	}
+
+	// Ensure the report is signed by the project manager
+	if *signedReport.SignedBy != projectManagerID {
+		t.Errorf("Expected SignedBy to be %d, got %d", projectManagerID, *signedReport.SignedBy)
+	}
+}
+
+func TestSignWeeklyReportByAnotherProjectManager(t *testing.T) {
+	db, err := setupState()
+	if err != nil {
+		t.Error("setupState failed:", err)
+	}
+
+	// Add project manager
+	err = db.AddUser("projectManager", "password")
+	if err != nil {
+		t.Error("AddUser failed:", err)
+	}
+
+	// Add a regular user
+	err = db.AddUser("testuser", "password")
+	if err != nil {
+		t.Error("AddUser failed:", err)
+	}
+
+	// Add project
+	err = db.AddProject("testproject", "description", "projectManager")
+	if err != nil {
+		t.Error("AddProject failed:", err)
+	}
+
+	// Add the regular user as a member to the project
+	err = db.AddUserToProject("testuser", "testproject", "member")
+	if err != nil {
+		t.Error("AddUserToProject failed:", err)
+	}
+
+	// Add a weekly report for the regular user
+	err = db.AddWeeklyReport("testproject", "testuser", 1, 1, 1, 1, 1, 1, 1)
+	if err != nil {
+		t.Error("AddWeeklyReport failed:", err)
+	}
+
+	// Retrieve the added report
+	report, err := db.GetWeeklyReport("testuser", "testproject", 1)
+	if err != nil {
+		t.Error("GetWeeklyReport failed:", err)
+	}
+
+	anotherManagerID, err := db.GetUserId("projectManager")
+	if err != nil {
+		t.Error("GetUserId failed:", err)
+	}
+
+	err = db.SignWeeklyReport(report.ReportId, anotherManagerID)
+	if err == nil {
+		t.Error("Expected SignWeeklyReport to fail with a project manager who is not in the project, but it didn't")
+	}
+}

backend/internal/handlers/global_state.go

@@ -16,6 +16,7 @@ type GlobalState interface {
 	GetUserProjects(c *fiber.Ctx) error // To get all projects
 	SubmitWeeklyReport(c *fiber.Ctx) error
 	GetWeeklyReport(c *fiber.Ctx) error
+	SignReport(c *fiber.Ctx) error
 	// GetProject(c *fiber.Ctx) error           // To get a specific project
 	// UpdateProject(c *fiber.Ctx) error        // To update a project
 	// DeleteProject(c *fiber.Ctx) error        // To delete a project

backend/internal/handlers/handlers_report_related.go

@@ -37,13 +37,16 @@ func (gs *GState) SubmitWeeklyReport(c *fiber.Ctx) error {
 // Handler for retrieving weekly report
 func (gs *GState) GetWeeklyReport(c *fiber.Ctx) error {
 	// Extract the necessary parameters from the request
+	println("GetWeeklyReport")
 	user := c.Locals("user").(*jwt.Token)
 	claims := user.Claims.(jwt.MapClaims)
 	username := claims["name"].(string)
 
 	// Extract project name and week from query parameters
 	projectName := c.Query("projectName")
+	println(projectName)
 	week := c.Query("week")
+	println(week)
 
 	// Convert week to integer
 	weekInt, err := strconv.Atoi(week)
@@ -60,3 +63,31 @@ func (gs *GState) GetWeeklyReport(c *fiber.Ctx) error {
 	// Return the retrieved weekly report
 	return c.JSON(report)
 }
+
+func (gs *GState) SignReport(c *fiber.Ctx) error {
+	// Extract the necessary parameters from the token
+	user := c.Locals("user").(*jwt.Token)
+	claims := user.Claims.(jwt.MapClaims)
+	managerUsername := claims["name"].(string)
+
+	// Extract the report ID and project manager ID from request parameters
+	reportID, err := strconv.Atoi(c.Params("reportId"))
+	if err != nil {
+		return c.Status(400).SendString("Invalid report ID")
+	}
+
+	// Call the database function to get the project manager ID
+	managerID, err := gs.Db.GetUserId(managerUsername)
+	if err != nil {
+		return c.Status(500).SendString("Failed to get project manager ID")
+	}
+
+	// Call the database function to sign the weekly report
+	err = gs.Db.SignWeeklyReport(reportID, managerID)
+	if err != nil {
+		return c.Status(500).SendString("Failed to sign the weekly report: " + err.Error())
+	}
+
+	// Return success response
+	return c.Status(200).SendString("Weekly report signed successfully")
+}

backend/internal/types/WeeklyReport.go

@@ -41,4 +41,6 @@ type WeeklyReport struct {
 	StudyTime int `json:"studyTime" db:"study_time"`
 	// Total time spent on testing
 	TestingTime int `json:"testingTime" db:"testing_time"`
+	// The project manager who signed it
+	SignedBy *int `json:"signedBy" db:"signed_by"`
 }

backend/main.go

@@ -78,6 +78,7 @@ func main() {
 	server.Post("/api/loginrenew", gs.LoginRenew)
 	server.Delete("/api/userdelete/:username", gs.UserDelete) // Perhaps just use POST to avoid headaches
 	server.Post("/api/project", gs.CreateProject)
+	server.Get("/api/getWeeklyReport", gs.GetWeeklyReport)
 
 	// Announce the port we are listening on and start the server
 	err = server.Listen(fmt.Sprintf(":%d", conf.Port))

frontend/src/API/API.ts

@@ -1,8 +1,13 @@
-import { NewProject, Project } from "../Types/Project";
-import { NewUser, User } from "../Types/Users";
+import {
+  NewWeeklyReport,
+  NewUser,
+  User,
+  Project,
+  NewProject,
+} from "../Types/goTypes";
 
 // This type of pattern should be hard to misuse
-interface APIResponse<T> {
+export interface APIResponse<T> {
   success: boolean;
   message?: string;
   data?: T;
@@ -15,13 +20,32 @@ interface API {
   registerUser(user: NewUser): Promise<APIResponse<User>>;
   /** Remove a user */
   removeUser(username: string, token: string): Promise<APIResponse<User>>;
+  /** Login */
+  login(NewUser: NewUser): Promise<APIResponse<string>>;
+  /** Renew the token */
+  renewToken(token: string): Promise<APIResponse<string>>;
   /** Create a project */
   createProject(
     project: NewProject,
     token: string,
   ): Promise<APIResponse<Project>>;
-  /** Renew the token */
-  renewToken(token: string): Promise<APIResponse<string>>;
+  /** Submit a weekly report */
+  submitWeeklyReport(
+    project: NewWeeklyReport,
+    token: string,
+  ): Promise<APIResponse<NewWeeklyReport>>;
+  /**Gets a weekly report*/
+  getWeeklyReport(
+    username: string,
+    projectName: string,
+    week: string,
+    token: string,
+  ): Promise<APIResponse<NewWeeklyReport>>;
+  /** Gets all the projects of a user*/
+  getUserProjects(
+    username: string,
+    token: string,
+  ): Promise<APIResponse<Project[]>>;
 }
 
 // Export an instance of the API
@@ -37,13 +61,19 @@ export const api: API = {
       });
 
       if (!response.ok) {
-        return { success: false, message: "Failed to register user" };
+        return {
+          success: false,
+          message: "Failed to register user: " + response.status,
+        };
       } else {
-        const data = (await response.json()) as User;
-        return { success: true, data };
+        // const data = (await response.json()) as User; // The API does not currently return the user
+        return { success: true };
       }
     } catch (e) {
-      return { success: false, message: "Failed to register user" };
+      return {
+        success: false,
+        message: "Unknown error while registering user",
+      };
     }
   },
 
@@ -117,4 +147,110 @@ export const api: API = {
       return { success: false, message: "Failed to renew token" };
     }
   },
+
+  async getUserProjects(token: string): Promise<APIResponse<Project[]>> {
+    try {
+      const response = await fetch("/api/getUserProjects", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: "Bearer " + token,
+        },
+      });
+
+      if (!response.ok) {
+        return Promise.resolve({
+          success: false,
+          message: "Failed to get user projects",
+        });
+      } else {
+        const data = (await response.json()) as Project[];
+        return Promise.resolve({ success: true, data });
+      }
+    } catch (e) {
+      return Promise.resolve({
+        success: false,
+        message: "Failed to get user projects",
+      });
+    }
+  },
+
+  async submitWeeklyReport(
+    weeklyReport: NewWeeklyReport,
+    token: string,
+  ): Promise<APIResponse<NewWeeklyReport>> {
+    try {
+      const response = await fetch("/api/submitWeeklyReport", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: "Bearer " + token,
+        },
+        body: JSON.stringify(weeklyReport),
+      });
+
+      if (!response.ok) {
+        return {
+          success: false,
+          message: "Failed to submit weekly report",
+        };
+      }
+
+      const data = (await response.json()) as NewWeeklyReport;
+      return { success: true, data };
+    } catch (e) {
+      return {
+        success: false,
+        message: "Failed to submit weekly report",
+      };
+    }
+  },
+
+  async getWeeklyReport(
+    username: string,
+    projectName: string,
+    week: string,
+    token: string,
+  ): Promise<APIResponse<NewWeeklyReport>> {
+    try {
+      const response = await fetch("/api/getWeeklyReport", {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: "Bearer " + token,
+        },
+        body: JSON.stringify({ username, projectName, week }),
+      });
+
+      if (!response.ok) {
+        return { success: false, message: "Failed to get weekly report" };
+      } else {
+        const data = (await response.json()) as NewWeeklyReport;
+        return { success: true, data };
+      }
+    } catch (e) {
+      return { success: false, message: "Failed to get weekly report" };
+    }
+  },
+
+  async login(NewUser: NewUser): Promise<APIResponse<string>> {
+    try {
+      const response = await fetch("/api/login", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify(NewUser),
+      });
+
+      if (!response.ok) {
+        return { success: false, message: "Failed to login" };
+      } else {
+        const data = (await response.json()) as { token: string }; // Update the type of 'data'
+        return { success: true, data: data.token };
+      }
+    } catch (e) {
+      return Promise.resolve({ success: false, message: "Failed to login" });
+    }
+  },
 };

frontend/src/Components/BackButton.tsx

@@ -0,0 +1,18 @@
+import { useNavigate } from "react-router-dom";
+
+function BackButton(): JSX.Element {
+  const navigate = useNavigate();
+  const goBack = (): void => {
+    navigate(-1);
+  };
+  return (
+    <button
+      onClick={goBack}
+      className="inline-block py-1 px-8 font-bold bg-orange-500 text-white border-2 border-black rounded-full cursor-pointer mt-5 mb-5 transition-colors duration-10 hover:bg-orange-600 hover:text-gray-300 font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 4vh;"
+    >
+      Back
+    </button>
+  );
+}
+
+export default BackButton;

frontend/src/Components/BackgroundAnimation.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from "react";
+
+const BackgroundAnimation = (): JSX.Element => {
+  useEffect(() => {
+    const images = [
+      "src/assets/1.jpg",
+      "src/assets/2.jpg",
+      "src/assets/3.jpg",
+      "src/assets/4.jpg",
+    ];
+
+    // Pre-load images
+    for (const i of images) {
+      console.log(i);
+    }
+
+    // Start animation
+    document.body.style.animation = "backgroundTransition 30s infinite";
+  }, []);
+
+  return <></>;
+};
+
+export default BackgroundAnimation;

frontend/src/Components/InputField.tsx

@@ -0,0 +1,41 @@
+/**
+ * A customizable input field
+ * @param props - Settings for the field
+ * @returns {JSX.Element} The input field
+ * @example
+ * <InputField
+ *   type="text"
+ *   label="Example"
+ *   onChange={(e) => {
+ *     setExample(e.target.value);
+ *   }}
+ *   value={example}
+ * />
+ */
+function InputField(props: {
+  label: string;
+  type: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}): JSX.Element {
+  return (
+    <div className="mb-4">
+      <label
+        className="block text-gray-700 text-sm font-sans font-bold mb-2"
+        htmlFor={props.label}
+      >
+        {props.label}
+      </label>
+      <input
+        className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id={props.label}
+        type={props.type}
+        placeholder={props.label}
+        value={props.value}
+        onChange={props.onChange}
+      />
+    </div>
+  );
+}
+
+export default InputField;

frontend/src/Components/LoginCheck.tsx

@@ -0,0 +1,55 @@
+import { NewUser } from "../Types/goTypes";
+import { api, APIResponse } from "../API/API";
+import { Dispatch, SetStateAction } from "react";
+
+/*
+ * Checks if user is in database with api.login and then sets proper authority level
+ * TODO: change so that it checks for user type (admin, user, pm) somehow instead
+ **/
+function LoginCheck(props: {
+  username: string;
+  password: string;
+  setAuthority: Dispatch<SetStateAction<number>>;
+}): number {
+  const user: NewUser = {
+    username: props.username,
+    password: props.password,
+  };
+  api
+    .login(user)
+    .then((response: APIResponse<string>) => {
+      if (response.success) {
+        if (response.data !== undefined) {
+          const token = response.data;
+          //TODO: change so that it checks for user type (admin, user, pm) instead
+          if (token !== "" && props.username === "admin") {
+            props.setAuthority((prevAuth) => {
+              prevAuth = 1;
+              return prevAuth;
+            });
+          } else if (token !== "" && props.username === "pm") {
+            props.setAuthority((prevAuth) => {
+              prevAuth = 2;
+              return prevAuth;
+            });
+          } else if (token !== "" && props.username === "user") {
+            props.setAuthority((prevAuth) => {
+              prevAuth = 3;
+              return prevAuth;
+            });
+          }
+        } else {
+          console.error("Token was undefined");
+        }
+      } else {
+        console.error("Token could not be fetched");
+      }
+    })
+    .catch((error) => {
+      console.error("An error occurred during login:", error);
+    });
+
+  return 0;
+}
+
+export default LoginCheck;

frontend/src/Components/LoginField.tsx

@@ -0,0 +1,55 @@
+import { Dispatch, FormEventHandler, SetStateAction } from "react";
+import Button from "./Button";
+import InputField from "./InputField";
+
+/**
+ * A login field complete with input fields
+ * and a button for submitting the information
+ * @param props - Settings
+ * @returns {JSX.Element} A login component
+ * @example
+ * <Login
+ *   handleSubmit={handleSubmit}
+ *   setUsername={setUsername}
+ *   setPassword={setPassword}
+ *   username={username}
+ *   password={password}
+ * />
+ */
+function Login(props: {
+  handleSubmit: FormEventHandler<HTMLFormElement>;
+  setUsername: Dispatch<SetStateAction<string>>;
+  setPassword: Dispatch<SetStateAction<string>>;
+  username: string;
+  password: string;
+}): JSX.Element {
+  return (
+    <form className="flex flex-col items-center" onSubmit={props.handleSubmit}>
+      <InputField
+        type="text"
+        label="Username"
+        onChange={(e) => {
+          props.setUsername(e.target.value);
+        }}
+        value={props.username}
+      />
+      <InputField
+        type="password"
+        label="Password"
+        onChange={(e) => {
+          props.setPassword(e.target.value);
+        }}
+        value={props.password}
+      />
+      <Button
+        text="Login"
+        onClick={(): void => {
+          return;
+        }}
+        type={"submit"}
+      />
+    </form>
+  );
+}
+
+export default Login;

frontend/src/Components/ProjectListUser.tsx

@@ -0,0 +1,35 @@
+import { Link } from "react-router-dom";
+import { Project } from "../Types/goTypes";
+
+/**
+ * The props for the ProjectsProps component
+ */
+interface ProjectProps {
+  projects: Project[];
+}
+
+/**
+ * A list of projects for users, that links the user to the right project page
+ * thanks to the state property
+ * @param props - The projects to display
+ * @returns {JSX.Element} The project list
+ * @example
+ * const projects = [{ id: 1, name: "Random name" }];
+ * return <ProjectList projects={projects} />;
+ */
+
+export function ProjectListUser(props: ProjectProps): JSX.Element {
+  return (
+    <div>
+      <ul className="font-bold underline text-[30px] cursor-pointer">
+        {props.projects.map((project) => (
+          <Link to="/project" key={project.id} state={project.name}>
+            <li className="pt-5" key={project.id}>
+              {project.name}
+            </li>
+          </Link>
+        ))}
+      </ul>
+    </div>
+  );
+}

frontend/src/Components/Register.tsx

@@ -1,20 +1,58 @@
 import { useState } from "react";
-import { NewUser } from "../Types/Users";
+import { NewUser } from "../Types/goTypes";
 import { api } from "../API/API";
 import Logo from "../assets/Logo.svg";
 import Button from "./Button";
+import { useNavigate } from "react-router-dom";
+
+function InputField(props: {
+  label: string;
+  type: string;
+  value: string;
+  onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}): JSX.Element {
+  return (
+    <div className="mb-4">
+      <label
+        className="block text-gray-700 text-sm font-sans font-bold mb-2"
+        htmlFor={props.label}
+      >
+        {props.label}
+      </label>
+      <input
+        className="appearance-none border-2 border-black rounded-2xl w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+        id={props.label}
+        type={props.type}
+        placeholder={props.label}
+        value={props.value}
+        onChange={props.onChange}
+      />
+    </div>
+  );
+}
 
 export default function Register(): JSX.Element {
-  const [username, setUsername] = useState("");
-  const [password, setPassword] = useState("");
+  const [username, setUsername] = useState<string>();
+  const [password, setPassword] = useState<string>();
+  const [errMessage, setErrMessage] = useState<string>();
+
+  const nav = useNavigate();
 
   const handleRegister = async (): Promise<void> => {
-    const newUser: NewUser = { userName: username, password };
-    await api.registerUser(newUser); // TODO: Handle errors
+    const newUser: NewUser = {
+      username: username ?? "",
+      password: password ?? "",
+    };
+    const response = await api.registerUser(newUser);
+    if (response.success) {
+      nav("/"); // Instantly navigate to the login page
+    } else {
+      setErrMessage(response.message ?? "Unknown error");
+    }
   };
 
   return (
-    <div className="flex flex-col h-screen w-screen items-center justify-center">
+    <div className="flex flex-col h-fit w-screen items-center justify-center">
       <div className="border-4 border-black bg-white flex flex-col items-center justify-center h-fit w-fit rounded-3xl content-center pl-20 pr-20">
         <form
           className="bg-white rounded px-8 pt-6 pb-8 mb-4 items-center justify-center flex flex-col w-fit h-fit"
@@ -31,6 +69,22 @@ export default function Register(): JSX.Element {
           <h3 className="pb-4 mb-2 text-center font-bold text-[18px]">
             Register New User
           </h3>
+          <InputField
+            label="Username"
+            type="text"
+            value={username}
+            onChange={(e) => {
+              setUsername(e.target.value);
+            }}
+          />
+          <InputField
+            label="Password"
+            type="password"
+            value={password}
+            onChange={(e) => {
+              setPassword(e.target.value);
+            }}
+          />
           <div className="mb-4">
             <label
               className="block text-gray-700 text-sm font-sans font-bold mb-2"
@@ -67,6 +121,7 @@ export default function Register(): JSX.Element {
               }}
             />
           </div>
+          {errMessage && <p className="text-red-500 text-xs">{errMessage}</p>}
           <div className="flex items-center justify-between">
             <Button
               text="Register"

frontend/src/Components/TimeReport.tsx

@@ -1,20 +1,62 @@
-function NewTimeReport(): JSX.Element {
-  const activities = [
-    "Development",
-    "Meeting",
-    "Administration",
-    "Own Work",
-    "Studies",
-    "Testing",
-  ];
+import { useState } from "react";
+import { api } from "../API/API";
+import { useNavigate } from "react-router-dom";
+import Button from "./Button";
+import { NewWeeklyReport } from "../Types/goTypes";
+
+export default function NewTimeReport(): JSX.Element {
+  const [projectName, setProjectName] = useState<string>("projectName"); // TODO: Get from backend
+  const [week, setWeek] = useState<number>(NaN);
+  const [development, setDevelopment] = useState<number>(NaN);
+  const [meeting, setMeeting] = useState<number>(NaN);
+  const [administration, setAdministration] = useState<number>(NaN);
+  const [ownwork, setOwnWork] = useState<number>(NaN);
+  const [studies, setStudies] = useState<number>(NaN);
+  const [testing, setTesting] = useState<number>(NaN);
+
+  const handleNewTimeReport = async (): Promise<void> => {
+    const newTimeReport: NewWeeklyReport = {
+      projectName,
+      week,
+      developmentTime: development,
+      meetingTime: meeting,
+      adminTime: administration,
+      ownWorkTime: ownwork,
+      studyTime: studies,
+      testingTime: testing,
+    };
+    await Promise.resolve();
+    await api.submitWeeklyReport(newTimeReport, "token");
+  };
+
+  const navigate = useNavigate();
+
+  setProjectName("Something Reasonable"); // This should obviously not be used here
 
   return (
     <>
       <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">
+        <form
+          onSubmit={(e) => {
+            if (!week) {
+              alert("Please enter a week number");
+              e.preventDefault();
+              return;
+            }
+            e.preventDefault();
+            void handleNewTimeReport();
+            navigate("/project");
+          }}
+        >
+          <div className="flex flex-col 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"
+              onChange={(e) => {
+                const weekNumber = parseInt(e.target.value.split("-W")[1]);
+                setWeek(weekNumber);
+              }}
               onKeyDown={(event) => {
                 event.preventDefault();
               }}
@@ -25,21 +67,121 @@ function NewTimeReport(): JSX.Element {
             <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">
+                    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>
+                <tr className="h-[10vh]">
+                  <td>Development</td>
                   <td>
                     <input
                       type="number"
                       min="0"
                       className="border-2 border-black rounded-md text-center w-1/2"
+                      value={development}
+                      onChange={(e) => {
+                        setDevelopment(parseInt(e.target.value));
+                      }}
+                      onKeyDown={(event) => {
+                        const keyValue = event.key;
+                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                          event.preventDefault();
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr className="h-[10vh]">
+                  <td>Meeting</td>
+                  <td>
+                    <input
+                      type="number"
+                      min="0"
+                      className="border-2 border-black rounded-md text-center w-1/2"
+                      value={meeting}
+                      onChange={(e) => {
+                        setMeeting(parseInt(e.target.value));
+                      }}
+                      onKeyDown={(event) => {
+                        const keyValue = event.key;
+                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                          event.preventDefault();
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr className="h-[10vh]">
+                  <td>Administration</td>
+                  <td>
+                    <input
+                      type="number"
+                      min="0"
+                      className="border-2 border-black rounded-md text-center w-1/2"
+                      value={administration}
+                      onChange={(e) => {
+                        setAdministration(parseInt(e.target.value));
+                      }}
+                      onKeyDown={(event) => {
+                        const keyValue = event.key;
+                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                          event.preventDefault();
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr className="h-[10vh]">
+                  <td>Own Work</td>
+                  <td>
+                    <input
+                      type="number"
+                      min="0"
+                      className="border-2 border-black rounded-md text-center w-1/2"
+                      value={ownwork}
+                      onChange={(e) => {
+                        setOwnWork(parseInt(e.target.value));
+                      }}
+                      onKeyDown={(event) => {
+                        const keyValue = event.key;
+                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                          event.preventDefault();
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr className="h-[10vh]">
+                  <td>Studies</td>
+                  <td>
+                    <input
+                      type="number"
+                      min="0"
+                      className="border-2 border-black rounded-md text-center w-1/2"
+                      value={studies}
+                      onChange={(e) => {
+                        setStudies(parseInt(e.target.value));
+                      }}
+                      onKeyDown={(event) => {
+                        const keyValue = event.key;
+                        if (!/\d/.test(keyValue) && keyValue !== "Backspace")
+                          event.preventDefault();
+                      }}
+                    />
+                  </td>
+                </tr>
+                <tr className="h-[10vh]">
+                  <td>Testing</td>
+                  <td>
+                    <input
+                      type="number"
+                      min="0"
+                      className="border-2 border-black rounded-md text-center w-1/2"
+                      value={testing}
+                      onChange={(e) => {
+                        setTesting(parseInt(e.target.value));
+                      }}
                       onKeyDown={(event) => {
                         const keyValue = event.key;
                         if (!/\d/.test(keyValue) && keyValue !== "Backspace")
@@ -48,12 +190,18 @@ function NewTimeReport(): JSX.Element {
                     />
                   </td>
                 </tr>
-            ))}
               </tbody>
             </table>
+            <Button
+              text="Submit"
+              onClick={(): void => {
+                return;
+              }}
+              type="submit"
+            />
+          </div>
+        </form>
       </div>
     </>
   );
 }
-
-export default NewTimeReport;

frontend/src/Components/UserListAdmin.tsx

@@ -0,0 +1,35 @@
+import { Link } from "react-router-dom";
+import { User } from "../Types/goTypes";
+
+/**
+ * The props for the UserProps component
+ */
+interface UserProps {
+  users: User[];
+}
+
+/**
+ * A list of users for admin manage users page, that links admin to the right user page
+ * thanks to the state property
+ * @param props - The users to display
+ * @returns {JSX.Element} The user list
+ * @example
+ * const users = [{ id: 1, userName: "Random name" }];
+ * return <UserList users={users} />;
+ */
+
+export function UserListAdmin(props: UserProps): JSX.Element {
+  return (
+    <div>
+      <ul className="font-bold underline text-[30px] cursor-pointer padding">
+        {props.users.map((user) => (
+          <Link to="/admin-view-user" key={user.userId} state={user.username}>
+            <li className="pt-5" key={user.userId}>
+              {user.username}
+            </li>
+          </Link>
+        ))}
+      </ul>
+    </div>
+  );
+}

frontend/src/Pages/AdminPages/AdminAddUser.tsx

@@ -1,18 +1,16 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
+import Register from "../../Components/Register";
 
 function AdminAddUser(): JSX.Element {
-  const content = <></>;
+  const content = (
+    <>
+      <Register />
+    </>
+  );
 
   const buttons = (
     <>
-      <Button
-        text="Finish"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
       <Button
         text="Back"
         onClick={(): void => {

frontend/src/Pages/AdminPages/AdminManageUsers.tsx

@@ -1,25 +1,38 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
+import { UserListAdmin } from "../../Components/UserListAdmin";
+import { User } from "../../Types/Users";
+import { useNavigate } from "react-router-dom";
 
 function AdminManageUsers(): JSX.Element {
-  const content = <></>;
+  //TODO: Change so that it reads users from database
+  const users: User[] = [];
+  for (let i = 1; i <= 20; i++) {
+    users.push({ id: i, userName: "Example User " + i });
+  }
+
+  const navigate = useNavigate();
+
+  const content = (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">Manage Users</h1>
+      <div className="border-4 border-black bg-white flex flex-col items-center h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
+        <UserListAdmin users={users} />
+      </div>
+    </>
+  );
 
   const buttons = (
     <>
       <Button
         text="Add User"
         onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
+          navigate("/admin-add-user");
         }}
         type="button"
       />
+      <BackButton />
     </>
   );
 

frontend/src/Pages/AdminPages/AdminMenuPage.tsx

@@ -6,12 +6,12 @@ function AdminMenuPage(): JSX.Element {
     <>
       <h1 className="font-bold text-[30px] mb-[20px]">Administrator Menu</h1>
       <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
-        <Link to="/admin-users-page">
+        <Link to="/admin-manage-users">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             Manage Users
           </h1>
         </Link>
-        <Link to="/admin-projects-page">
+        <Link to="/admin-manage-projects">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             Manage Projects
           </h1>

frontend/src/Pages/AdminPages/AdminViewUserInfo.tsx

@@ -1,8 +1,17 @@
+import { useLocation } from "react-router-dom";
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
 
 function AdminViewUserInfo(): JSX.Element {
-  const content = <></>;
+  const content = (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">{useLocation().state}</h1>
+      <div className="border-4 border-black bg-white flex flex-col items-center h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
+        <p>Put relevant info on user from database here</p>
+      </div>
+    </>
+  );
 
   const buttons = (
     <>
@@ -13,13 +22,7 @@ function AdminViewUserInfo(): JSX.Element {
         }}
         type="button"
       />
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
+      <BackButton />
     </>
   );
 

frontend/src/Pages/App.tsx

@@ -0,0 +1,20 @@
+import { useState } from "react";
+
+import LoginPage from "./LoginPage";
+import { useNavigate } from "react-router-dom";
+
+function App(): JSX.Element {
+  const navigate = useNavigate();
+  const [authority, setAuthority] = useState(0);
+  if (authority === 1) {
+    navigate("/admin");
+  } else if (authority === 2) {
+    navigate("/pm");
+  } else if (authority === 3) {
+    navigate("/user");
+  }
+
+  return <LoginPage setAuthority={setAuthority} />;
+}
+
+export default App;

frontend/src/Pages/LoginPage.tsx

@@ -1,36 +1,32 @@
-import Button from "../Components/Button";
 import Logo from "/src/assets/Logo.svg";
 import "./LoginPage.css";
-import { useEffect } from "react";
-import { Link } from "react-router-dom";
+import { Dispatch, FormEvent, SetStateAction, useState } from "react";
+import BackgroundAnimation from "../Components/BackgroundAnimation";
+import LoginField from "../Components/LoginField";
+import LoginCheck from "../Components/LoginCheck";
 
-const PreloadBackgroundAnimation = (): JSX.Element => {
-  useEffect(() => {
-    const images = [
-      "src/assets/1.jpg",
-      "src/assets/2.jpg",
-      "src/assets/3.jpg",
-      "src/assets/4.jpg",
-    ];
+function LoginPage(props: {
+  setAuthority: Dispatch<SetStateAction<number>>;
+}): JSX.Element {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
 
-    // Pre-load images
-    for (const i of images) {
-      console.log(i);
+  /* On submit (enter or button click) check if username and password match any user
+   and if so, redirect to correct page */
+  function handleSubmit(event: FormEvent<HTMLFormElement>): void {
+    event.preventDefault();
+    LoginCheck({
+      username: username,
+      password: password,
+      setAuthority: props.setAuthority,
+    });
   }
 
-    // Start animation
-    document.body.style.animation = "backgroundTransition 30s infinite";
-  }, []);
-
-  return <></>;
-};
-
-function LoginPage(): JSX.Element {
   return (
     <>
-      <PreloadBackgroundAnimation />
+      <BackgroundAnimation />
       <div
-        className="flex flex-col h-screen w-screen items-center justify-center"
+        className="flex flex-col h-screen items-center justify-center bg-cover bg-fixed"
         style={{
           animation: "backgroundTransition 30s infinite",
           backgroundSize: "cover",
@@ -51,34 +47,13 @@ function LoginPage(): JSX.Element {
             {" "}
             Please log in to continue{" "}
           </h2>
-          <input
-            className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
-            type="text"
-            placeholder="Username"
+          <LoginField
+            handleSubmit={handleSubmit}
+            setUsername={setUsername}
+            setPassword={setPassword}
+            username={username}
+            password={password}
           />
-          <input
-            className="border-2 border-black mb-3 rounded-lg w-[20vw] p-1"
-            type="password"
-            placeholder="Password"
-          />
-          <Link to="/your-projects">
-            <Button
-              text="Login"
-              onClick={(): void => {
-                return;
-              }}
-              type="button"
-            />
-          </Link>
-          <Link to="/register">
-            <Button
-              text="Register new user"
-              onClick={(): void => {
-                return;
-              }}
-              type="button"
-            />
-          </Link>
         </div>
       </div>
     </>

frontend/src/Pages/ProjectManagerPages/PMChangeRole.tsx

@@ -1,5 +1,6 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
 
 function ChangeRole(): JSX.Element {
   const content = <></>;
@@ -13,13 +14,7 @@ function ChangeRole(): JSX.Element {
         }}
         type="button"
       />
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
+      <BackButton />
     </>
   );
 

frontend/src/Pages/ProjectManagerPages/PMOtherUsersTR.tsx

@@ -1,18 +1,12 @@
 import BasicWindow from "../../Components/BasicWindow";
-import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
 
 function PMOtherUsersTR(): JSX.Element {
   const content = <></>;
 
   const buttons = (
     <>
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
+      <BackButton />
     </>
   );
 

frontend/src/Pages/ProjectManagerPages/PMProjectMembers.tsx

@@ -1,32 +1,32 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
+import { Link } from "react-router-dom";
 
 function PMProjectMembers(): JSX.Element {
   const content = <></>;
 
   const buttons = (
     <>
+      <Link to="/PM-time-activity">
         <Button
           text="Time / Activity"
           onClick={(): void => {
             return;
           }}
-        type="button"
+          type={"button"}
         />
+      </Link>
+      <Link to="/PM-time-role">
         <Button
           text="Time / Role"
           onClick={(): void => {
             return;
           }}
-        type="button"
-      />
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
+          type={"button"}
         />
+      </Link>
+      <BackButton />
     </>
   );
 

frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx

@@ -1,39 +1,36 @@
+import { Link } from "react-router-dom";
 import BasicWindow from "../../Components/BasicWindow";
-import Button from "../../Components/Button";
+import { JSX } from "react/jsx-runtime";
 
 function PMProjectPage(): JSX.Element {
   const content = (
     <>
       <h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
       <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[5vh] p-[30px]">
+        <Link to="/project-page">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             Your Time Reports
           </h1>
+        </Link>
+        <Link to="/new-time-report">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             New Time Report
           </h1>
+        </Link>
+        <Link to="/project-members">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             Statistics
           </h1>
+        </Link>
+        <Link to="/PM-unsigned-reports">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             Unsigned Time Reports
           </h1>
+        </Link>
       </div>
     </>
   );
 
-  const buttons = (
-    <>
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
-    </>
-  );
-
-  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
+  return <BasicWindow username="Admin" content={content} buttons={undefined} />;
 }
 export default PMProjectPage;

frontend/src/Pages/ProjectManagerPages/PMTotalTimeActivity.tsx

@@ -1,6 +1,6 @@
 import BasicWindow from "../../Components/BasicWindow";
-import Button from "../../Components/Button";
 import TimeReport from "../../Components/TimeReport";
+import BackButton from "../../Components/BackButton";
 
 function PMTotalTimeActivity(): JSX.Element {
   const content = (
@@ -14,13 +14,7 @@ function PMTotalTimeActivity(): JSX.Element {
 
   const buttons = (
     <>
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
+      <BackButton />
     </>
   );
 

frontend/src/Pages/ProjectManagerPages/PMTotalTimeRole.tsx

@@ -1,18 +1,12 @@
 import BasicWindow from "../../Components/BasicWindow";
-import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
 
 function PMTotalTimeRole(): JSX.Element {
   const content = <></>;
 
   const buttons = (
     <>
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
+      <BackButton />
     </>
   );
 

frontend/src/Pages/ProjectManagerPages/PMUnsignedReports.tsx

@@ -1,18 +1,12 @@
 import BasicWindow from "../../Components/BasicWindow";
-import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
 
 function PMUnsignedReports(): JSX.Element {
   const content = <></>;
 
   const buttons = (
     <>
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
+      <BackButton />
     </>
   );
 

frontend/src/Pages/ProjectManagerPages/PMViewUnsignedReport.tsx

@@ -1,6 +1,7 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
 import TimeReport from "../../Components/TimeReport";
+import BackButton from "../../Components/BackButton";
 
 function PMViewUnsignedReport(): JSX.Element {
   const content = (
@@ -28,13 +29,7 @@ function PMViewUnsignedReport(): JSX.Element {
         }}
         type="button"
       />
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
+      <BackButton />
     </>
   );
 

frontend/src/Pages/UserPages/UserEditTimeReportPage.tsx

@@ -1,6 +1,7 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
 import NewTimeReport from "../../Components/TimeReport";
+import BackButton from "../../Components/BackButton";
 
 function UserEditTimeReportPage(): JSX.Element {
   const content = (
@@ -19,13 +20,7 @@ function UserEditTimeReportPage(): JSX.Element {
         }}
         type="button"
       />
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
+      <BackButton />
     </>
   );
 

frontend/src/Pages/UserPages/UserNewTimeReportPage.tsx

@@ -13,13 +13,6 @@ function UserNewTimeReportPage(): JSX.Element {
 
   const buttons = (
     <>
-      <Button
-        text="Submit"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
       <Link to="/project">
         <Button
           text="Back"

frontend/src/Pages/UserPages/UserProjectPage.tsx

@@ -1,15 +1,17 @@
-import { Link } from "react-router-dom";
+import { Link, useLocation } from "react-router-dom";
 import BasicWindow from "../../Components/BasicWindow";
-import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
 
 function UserProjectPage(): JSX.Element {
   const content = (
     <>
-      <h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
+      <h1 className="font-bold text-[30px] mb-[20px]">{useLocation().state}</h1>
       <div className="border-4 border-black bg-white flex flex-col items-center justify-center min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
+        <Link to="/project-page">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             Your Time Reports
           </h1>
+        </Link>
         <Link to="/new-time-report">
           <h1 className="font-bold underline text-[30px] cursor-pointer">
             New Time Report
@@ -21,15 +23,7 @@ function UserProjectPage(): JSX.Element {
 
   const buttons = (
     <>
-      <Link to="/your-projects">
-        <Button
-          text="Back"
-          onClick={(): void => {
-            return;
-          }}
-          type="button"
-        />
-      </Link>
+      <BackButton />
     </>
   );
 

frontend/src/Pages/UserPages/UserViewTimeReportsPage.tsx

@@ -1,18 +1,17 @@
 import BasicWindow from "../../Components/BasicWindow";
-import Button from "../../Components/Button";
+import BackButton from "../../Components/BackButton";
 
 function UserViewTimeReportsPage(): JSX.Element {
-  const content = <></>;
+  const content = (
+    <>
+      <h1 className="font-bold text-[30px] mb-[20px]">Your Time Reports</h1>
+      {/* Här kan du inkludera logiken för att visa användarens tidrapporter */}
+    </>
+  );
 
   const buttons = (
     <>
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
+      <BackButton />
     </>
   );
 

frontend/src/Pages/YourProjectsPage.tsx

@@ -1,25 +1,25 @@
-import { Link } from "react-router-dom";
 import BasicWindow from "../Components/BasicWindow";
+import { ProjectListUser } from "../Components/ProjectListUser";
+import { Project } from "../Types/Project";
 
 function YourProjectsPage(): JSX.Element {
+  //TODO: Change so that it reads projects from database
+  const projects: Project[] = [];
+  for (let i = 1; i <= 20; i++) {
+    projects.push({
+      id: i,
+      name: "Example Project " + i,
+      description: "good",
+      created: "now",
+      owner: "me",
+    });
+  }
+
   const content = (
     <>
       <h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
-      <div className="border-4 border-black bg-white flex flex-col items-center justify-between min-h-[65vh] h-fit w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10px] p-[30px]">
-        <Link to="/project">
-          <h1 className="underline text-[24px] cursor-pointer font-bold">
-            ProjectNameExample
-          </h1>
-        </Link>
-        <h1 className="underline text-[24px] cursor-pointer font-bold">
-          ProjectNameExample2
-        </h1>
-        <h1 className="underline text-[24px] cursor-pointer font-bold">
-          ProjectNameExample3
-        </h1>
-        <h1 className="underline text-[24px] cursor-pointer font-bold">
-          ProjectNameExample4
-        </h1>
+      <div className="border-4 border-black bg-white flex flex-col items-center h-[65vh] w-[50vw] rounded-3xl content-center overflow-scroll space-y-[10vh] p-[30px]">
+        <ProjectListUser projects={projects} />
       </div>
     </>
   );

frontend/src/Types/Project.ts

@@ -1,13 +0,0 @@
-export interface Project {
-  id: number;
-  name: string;
-  description: string;
-  owner: string;
-  created: string; // This is a date
-}
-
-export interface NewProject {
-  name: string;
-  description: string;
-  owner: string;
-}

frontend/src/Types/Users.ts

@@ -1,11 +0,0 @@
-// This is how the API responds
-export interface User {
-  id: number;
-  userName: string;
-}
-
-// Used to create a new user
-export interface NewUser {
-  userName: string;
-  password: string;
-}

frontend/src/main.tsx

@@ -2,153 +2,24 @@ import React from "react";
 import ReactDOM from "react-dom/client";
 import "./index.css";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
-import LoginPage from "./Pages/LoginPage.tsx";
-import YourProjectsPage from "./Pages/YourProjectsPage.tsx";
-import UserProjectPage from "./Pages/UserPages/UserProjectPage.tsx";
-import Register from "./Components/Register.tsx";
-import AdminMenuPage from "./Pages/AdminPages/AdminMenuPage.tsx";
-import UserEditTimeReportPage from "./Pages/UserPages/UserEditTimeReportPage.tsx";
-import UserNewTimeReportPage from "./Pages/UserPages/UserNewTimeReportPage.tsx";
-import UserViewTimeReportsPage from "./Pages/UserPages/UserViewTimeReportsPage.tsx";
-import PMChangeRole from "./Pages/ProjectManagerPages/PMChangeRole.tsx";
-import PMOtherUsersTR from "./Pages/ProjectManagerPages/PMOtherUsersTR.tsx";
-import PMProjectMembers from "./Pages/ProjectManagerPages/PMProjectMembers.tsx";
-import PMProjectPage from "./Pages/ProjectManagerPages/PMProjectPage.tsx";
-import PMTotalTimeActivity from "./Pages/ProjectManagerPages/PMTotalTimeActivity.tsx";
-import PMTotalTimeRole from "./Pages/ProjectManagerPages/PMTotalTimeRole.tsx";
-import PMUnsignedReports from "./Pages/ProjectManagerPages/PMUnsignedReports.tsx";
-import PMViewUnsignedReport from "./Pages/ProjectManagerPages/PMViewUnsignedReport.tsx";
-import AdminManageUsers from "./Pages/AdminPages/AdminManageUsers.tsx";
-import AdminViewUserInfo from "./Pages/AdminPages/AdminViewUserInfo.tsx";
-import AdminManageProjects from "./Pages/AdminPages/AdminManageProjects.tsx";
-import AdminAddProject from "./Pages/AdminPages/AdminAddProject.tsx";
-import AdminAddUser from "./Pages/AdminPages/AdminAddUser.tsx";
-import AdminChangeUsername from "./Pages/AdminPages/AdminChangeUsername.tsx";
-import AdminProjectAddMember from "./Pages/AdminPages/AdminProjectAddMember.tsx";
-import AdminProjectChangeUserRole from "./Pages/AdminPages/AdminProjectChangeUserRole.tsx";
-import AdminProjectManageMembers from "./Pages/AdminPages/AdminProjectManageMembers.tsx";
-import AdminProjectStatistics from "./Pages/AdminPages/AdminProjectStatistics.tsx";
-import AdminProjectViewMemberInfo from "./Pages/AdminPages/AdminProjectViewMemberInfo.tsx";
-import AdminProjectPage from "./Pages/AdminPages/AdminProjectPage.tsx";
+import App from "./Pages/App";
+import AdminMenuPage from "./Pages/AdminPages/AdminMenuPage";
+import YourProjectsPage from "./Pages/YourProjectsPage";
 
 // This is where the routes are mounted
 const router = createBrowserRouter([
   {
     path: "/",
-    element: <LoginPage />,
+    element: <App />,
   },
   {
-    path: "/your-projects",
+    path: "/admin",
+    element: <AdminMenuPage />,
+  },
+  {
+    path: "/pm",
     element: <YourProjectsPage />,
   },
-  {
-    path: "/edit-time-report",
-    element: <UserEditTimeReportPage />,
-  },
-  {
-    path: "/new-time-report",
-    element: <UserNewTimeReportPage />,
-  },
-  {
-    path: "/project",
-    element: <UserProjectPage />,
-  },
-  {
-    path: "/register",
-    element: <Register />,
-  },
-  {
-    path: "/admin-menu",
-    element: <AdminMenuPage />,
-  },
-  {
-    path: "/project-page",
-    element: <UserViewTimeReportsPage />,
-  },
-  {
-    path: "/change-role",
-    element: <PMChangeRole />,
-  },
-  {
-    path: "/other-users-time-reports",
-    element: <PMOtherUsersTR />,
-  },
-  {
-    path: "/project-members",
-    element: <PMProjectMembers />,
-  },
-  {
-    path: "/PM-project-page",
-    element: <PMProjectPage />,
-  },
-  {
-    path: "/PM-time-activity",
-    element: <PMTotalTimeActivity />,
-  },
-  {
-    path: "/PM-time-role",
-    element: <PMTotalTimeRole />,
-  },
-  {
-    path: "/PM-unsigned-reports",
-    element: <PMUnsignedReports />,
-  },
-  {
-    path: "/PM-view-unsigned-report",
-    element: <PMViewUnsignedReport />,
-  },
-  {
-    path: "/admin-add-project",
-    element: <AdminAddProject />,
-  },
-  {
-    path: "/admin-add-user",
-    element: <AdminAddUser />,
-  },
-  {
-    path: "/admin-change-username",
-    element: <AdminChangeUsername />,
-  },
-  {
-    path: "/admin-manage-projects",
-    element: <AdminManageProjects />,
-  },
-  {
-    path: "/admin-manage-users",
-    element: <AdminManageUsers />,
-  },
-  {
-    path: "/admin-menu",
-    element: <AdminMenuPage />,
-  },
-  {
-    path: "/admin-project-add-member",
-    element: <AdminProjectAddMember />,
-  },
-  {
-    path: "/admin-project-change-user-role",
-    element: <AdminProjectChangeUserRole />,
-  },
-  {
-    path: "/admin-project-manage-members",
-    element: <AdminProjectManageMembers />,
-  },
-  {
-    path: "/admin-project-page",
-    element: <AdminProjectPage />,
-  },
-  {
-    path: "/admin-project-statistics",
-    element: <AdminProjectStatistics />,
-  },
-  {
-    path: "/admin-project-view-members",
-    element: <AdminProjectViewMemberInfo />,
-  },
-  {
-    path: "/admin-view-user",
-    element: <AdminViewUserInfo />,
-  },
 ]);
 
 // Semi-hacky way to get the root element

testing.py

@@ -21,6 +21,7 @@ registerPath = base_url + "/api/register"
 loginPath = base_url + "/api/login"
 addProjectPath = base_url + "/api/project"
 submitReportPath = base_url + "/api/submitReport"
+getWeeklyReportPath = base_url + "/api/getWeeklyReport"
 
 
 # Posts the username and password to the register endpoint
@@ -74,7 +75,7 @@ def test_submit_report():
     response = requests.post(
         submitReportPath,
         json={
-            "projectName": "report1",
+            "projectName": projectName,
             "week": 1,
             "developmentTime": 10,
             "meetingTime": 5,
@@ -89,9 +90,18 @@ def test_submit_report():
     assert response.status_code == 200, "Submit report failed"
     print("Submit report successful")
 
+def test_get_weekly_report():
+    token = login(username, "always_same").json()["token"]
+    response = requests.get(
+        getWeeklyReportPath,
+        headers={"Authorization": "Bearer " + token},
+        params={"username": username, "projectName": projectName , "week": 1}
+    )
+    print(response.text)
 
 if __name__ == "__main__":
     test_create_user()
     test_login()
     test_add_project()
     test_submit_report()
+    test_get_weekly_report()