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

backend/internal/database/db.go

@@ -2,7 +2,7 @@ package database
 
 import (
 	"embed"
-	"os"
+	"errors"
 	"path/filepath"
 	"ttime/internal/types"
 
@@ -19,7 +19,7 @@ type Database interface {
 	PromoteToAdmin(username string) error
 	GetUserId(username string) (int, error)
 	AddProject(name string, description string, username string) error
-	Migrate(dirname string) error
+	Migrate() error
 	GetProjectId(projectname string) (int, error)
 	AddWeeklyReport(projectName string, userName string, week int, developmentTime int, meetingTime int, adminTime int, ownWorkTime int, studyTime int, testingTime int) error
 	AddUserToProject(username string, projectname string, role string) error
@@ -30,6 +30,8 @@ type Database interface {
 	GetAllProjects() ([]types.Project, error)
 	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
@@ -257,15 +259,74 @@ func (d *Db) GetAllUsersApplication() ([]string, error) {
 	return usernames, nil
 }
 
+func (d *Db) GetWeeklyReport(username string, projectName string, week int) (types.WeeklyReport, error) {
+	var report types.WeeklyReport
+	query := `
+        SELECT
+            report_id,
+            user_id,
+            project_id,
+            week,
+            development_time,
+            meeting_time,
+            admin_time,
+            own_work_time,
+            study_time,
+            testing_time,
+			signed_by
+        FROM
+            weekly_reports
+        WHERE
+            user_id = (SELECT id FROM users WHERE username = ?)
+            AND project_id = (SELECT id FROM projects WHERE name = ?)
+            AND week = ?
+    `
+	err := d.Get(&report, query, username, projectName, week)
+	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(dirname string) error {
+func (d *Db) Migrate() error {
 	// Read the embedded scripts directory
 	files, err := scripts.ReadDir("migrations")
 	if err != nil {
 		return err
 	}
 
+	if len(files) == 0 {
+		println("No migration files found")
+		return nil
+	}
+
 	tr := d.MustBegin()
 
 	// Iterate over each SQL file and execute it
@@ -275,8 +336,7 @@ func (d *Db) Migrate(dirname string) error {
 		}
 
 		// This is perhaps not the most elegant way to do this
-		sqlFile := filepath.Join("migrations", file.Name())
-		sqlBytes, err := os.ReadFile(sqlFile)
+		sqlBytes, err := scripts.ReadFile("migrations/" + file.Name())
 		if err != nil {
 			return err
 		}

backend/internal/database/db_test.go

@@ -1,6 +1,7 @@
 package database
 
 import (
+	"fmt"
 	"testing"
 )
 
@@ -8,7 +9,7 @@ import (
 
 func setupState() (Database, error) {
 	db := DbConnect(":memory:")
-	err := db.Migrate("../../migrations")
+	err := db.Migrate()
 	if err != nil {
 		return nil, err
 	}
@@ -371,3 +372,167 @@ func TestAddProject(t *testing.T) {
 		t.Error("Added project not found")
 	}
 }
+
+func TestGetWeeklyReport(t *testing.T) {
+	db, err := setupState()
+	if err != nil {
+		t.Error("setupState failed:", err)
+	}
+
+	err = db.AddUser("testuser", "password")
+	if err != nil {
+		t.Error("AddUser failed:", err)
+	}
+
+	err = db.AddProject("testproject", "description", "testuser")
+	if err != nil {
+		t.Error("AddProject failed:", err)
+	}
+
+	err = db.AddWeeklyReport("testproject", "testuser", 1, 1, 1, 1, 1, 1, 1)
+	if err != nil {
+		t.Error("AddWeeklyReport failed:", err)
+	}
+
+	report, err := db.GetWeeklyReport("testuser", "testproject", 1)
+	if err != nil {
+		t.Error("GetWeeklyReport failed:", err)
+	}
+
+	// Check if the retrieved report matches the expected values
+	if report.UserId != 1 {
+		t.Errorf("Expected UserId to be 1, got %d", report.UserId)
+	}
+	if report.ProjectId != 1 {
+		t.Errorf("Expected ProjectId to be 1, got %d", report.ProjectId)
+	}
+	if report.Week != 1 {
+		t.Errorf("Expected Week to be 1, got %d", report.Week)
+	}
+	// 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/database/migrations/0010_users.sql

@@ -3,7 +3,7 @@
 -- username is what is used for login
 -- password is the hashed password
 CREATE TABLE IF NOT EXISTS users (
-  id INTEGER PRIMARY KEY,
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
   userId TEXT DEFAULT (HEX(RANDOMBLOB(4))) NOT NULL UNIQUE,
   username VARCHAR(255) NOT NULL UNIQUE,
   password VARCHAR(255) NOT NULL

backend/internal/database/migrations/0020_projects.sql

@@ -1,5 +1,5 @@
 CREATE TABLE IF NOT EXISTS projects (
-  id INTEGER PRIMARY KEY,
+  id INTEGER PRIMARY KEY AUTOINCREMENT,
   name VARCHAR(255) NOT NULL UNIQUE,
   description TEXT NOT NULL,
   owner_user_id INTEGER NOT NULL,

backend/internal/database/migrations/0035_weekly_report.sql

@@ -1,14 +1,16 @@
-CREATE TABLE weekly_reports (
-  user_id INTEGER,
-  project_id INTEGER,
-  week INTEGER,
+CREATE TABLE IF NOT EXISTS weekly_reports (
+  report_id INTEGER PRIMARY KEY AUTOINCREMENT,
+  user_id INTEGER NOT NULL,
+  project_id INTEGER NOT NULL,
+  week INTEGER NOT NULL,
   development_time INTEGER,
   meeting_time INTEGER,
   admin_time INTEGER,
   own_work_time INTEGER,
   study_time INTEGER,
   testing_time INTEGER,
+  signed_by INTEGER,
   FOREIGN KEY (user_id) REFERENCES users(id),
-  FOREIGN KEY (project_id) REFERENCES projects(id)
-  PRIMARY KEY (user_id, project_id, week)
-)
+  FOREIGN KEY (project_id) REFERENCES projects(id),
+  FOREIGN KEY (signed_by) REFERENCES users(id)
+);

backend/internal/handlers/global_state.go

@@ -15,6 +15,8 @@ type GlobalState interface {
 	CreateProject(c *fiber.Ctx) error   // To create a new project
 	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

@@ -1,6 +1,7 @@
 package handlers
 
 import (
+	"strconv"
 	"ttime/internal/types"
 
 	"github.com/gofiber/fiber/v2"
@@ -32,3 +33,61 @@ func (gs *GState) SubmitWeeklyReport(c *fiber.Ctx) error {
 
 	return c.Status(200).SendString("Time report added")
 }
+
+// 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)
+	if err != nil {
+		return c.Status(400).SendString("Invalid week number")
+	}
+
+	// Call the database function to get the weekly report
+	report, err := gs.Db.GetWeeklyReport(username, projectName, weekInt)
+	if err != nil {
+		return c.Status(500).SendString(err.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/handlers/handlers_user_related.go

@@ -22,13 +22,16 @@ import (
 func (gs *GState) Register(c *fiber.Ctx) error {
 	u := new(types.NewUser)
 	if err := c.BodyParser(u); err != nil {
+		println("Error parsing body")
 		return c.Status(400).SendString(err.Error())
 	}
 
+	println("Adding user:", u.Username)
 	if err := gs.Db.AddUser(u.Username, u.Password); err != nil {
 		return c.Status(500).SendString(err.Error())
 	}
 
+	println("User added:", u.Username)
 	return c.Status(200).SendString("User added")
 }
 
@@ -57,9 +60,11 @@ func (gs *GState) Login(c *fiber.Ctx) error {
 	// The body type is identical to a NewUser
 	u := new(types.NewUser)
 	if err := c.BodyParser(u); err != nil {
+		println("Error parsing body")
 		return c.Status(400).SendString(err.Error())
 	}
 
+	println("Username:", u.Username)
 	if !gs.Db.CheckUser(u.Username, u.Password) {
 		println("User not found")
 		return c.SendStatus(fiber.StatusUnauthorized)
@@ -74,13 +79,16 @@ func (gs *GState) Login(c *fiber.Ctx) error {
 
 	// Create token
 	token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
+	println("Token created for user:", u.Username)
 
 	// Generate encoded token and send it as response.
 	t, err := token.SignedString([]byte("secret"))
 	if err != nil {
+		println("Error signing token")
 		return c.SendStatus(fiber.StatusInternalServerError)
 	}
 
+	println("Successfully signed token for user:", u.Username)
 	return c.JSON(fiber.Map{"token": t})
 }
 

backend/internal/types/WeeklyReport.go

@@ -26,19 +26,21 @@ type WeeklyReport struct {
 	// The user id of the user who submitted the report
 	UserId int `json:"userId" db:"user_id"`
 	// The name of the project, as it appears in the database
-	ProjectName string `json:"projectName"`
+	ProjectId int `json:"projectId" db:"project_id"`
 	// The week number
-	Week int `json:"week"`
+	Week int `json:"week" db:"week"`
 	// Total time spent on development
-	DevelopmentTime int `json:"developmentTime"`
+	DevelopmentTime int `json:"developmentTime" db:"development_time"`
 	// Total time spent in meetings
-	MeetingTime int `json:"meetingTime"`
+	MeetingTime int `json:"meetingTime" db:"meeting_time"`
 	// Total time spent on administrative tasks
-	AdminTime int `json:"adminTime"`
+	AdminTime int `json:"adminTime" db:"admin_time"`
 	// Total time spent on personal projects
-	OwnWorkTime int `json:"ownWorkTime"`
+	OwnWorkTime int `json:"ownWorkTime" db:"own_work_time"`
 	// Total time spent on studying
-	StudyTime int `json:"studyTime"`
+	StudyTime int `json:"studyTime" db:"study_time"`
 	// Total time spent on testing
-	TestingTime int `json:"testingTime"`
+	TestingTime int `json:"testingTime" db:"testing_time"`
+	// The project manager who signed it
+	SignedBy *int `json:"signedBy" db:"signed_by"`
 }

backend/main.go

@@ -43,6 +43,11 @@ func main() {
 
 	// Connect to the database
 	db := database.DbConnect(conf.DbPath)
+	// Migrate the database
+	if err = db.Migrate(); err != nil {
+		fmt.Println("Error migrating database: ", err)
+	}
+
 	// Get our global state
 	gs := handlers.NewGlobalState(db)
 	// Create the server
@@ -73,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,59 +1,207 @@
-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">
-        <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();
+        <form
+          onSubmit={(e) => {
+            if (!week) {
+              alert("Please enter a week number");
+              e.preventDefault();
+              return;
+            }
+            e.preventDefault();
+            void handleNewTimeReport();
+            navigate("/project");
           }}
-          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 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();
+              }}
+              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">
+                <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")
+                          event.preventDefault();
+                      }}
+                    />
+                  </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 = (
     <>
-      <Button
-        text="Time / Activity"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
-      <Button
-        text="Time / Role"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
-      <Button
-        text="Back"
-        onClick={(): void => {
-          return;
-        }}
-        type="button"
-      />
+      <Link to="/PM-time-activity">
+        <Button
+          text="Time / Activity"
+          onClick={(): void => {
+            return;
+          }}
+          type={"button"}
+        />
+      </Link>
+      <Link to="/PM-time-role">
+        <Button
+          text="Time / Role"
+          onClick={(): void => {
+            return;
+          }}
+          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]">
-        <h1 className="font-bold underline text-[30px] cursor-pointer">
-          Your Time Reports
-        </h1>
-        <h1 className="font-bold underline text-[30px] cursor-pointer">
-          New Time Report
-        </h1>
-        <h1 className="font-bold underline text-[30px] cursor-pointer">
-          Statistics
-        </h1>
-        <h1 className="font-bold underline text-[30px] cursor-pointer">
-          Unsigned Time Reports
-        </h1>
+        <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]">
-        <h1 className="font-bold underline text-[30px] cursor-pointer">
-          Your Time Reports
-        </h1>
+        <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()