From 40f7241550a34951db51df39b2f9438ed8eae865 Mon Sep 17 00:00:00 2001
From: Imbus <>
Date: Thu, 7 Mar 2024 11:48:34 +0100
Subject: [PATCH] Formatting and typing

---
 frontend/postcss.config.js                    |  2 +-
 frontend/src/Components/BasicWindow.tsx       | 24 +++++----
 frontend/src/Components/Button.tsx            | 24 ++++++---
 frontend/src/Components/Footer.tsx            |  8 +--
 frontend/src/Components/Header.tsx            | 45 ++++++++++------
 .../ProjectManagerPages/PMProjectPage.tsx     | 54 +++++++++++--------
 .../src/Pages/UserPages/UserProjectPage.tsx   | 54 +++++++++++--------
 frontend/src/Pages/YourProjectsPage.tsx       | 46 ++++++++--------
 frontend/tailwind.config.js                   |  8 +--
 9 files changed, 155 insertions(+), 110 deletions(-)

diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index 2e7af2b..2aa7205 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};
diff --git a/frontend/src/Components/BasicWindow.tsx b/frontend/src/Components/BasicWindow.tsx
index 9899fa1..1835d6a 100644
--- a/frontend/src/Components/BasicWindow.tsx
+++ b/frontend/src/Components/BasicWindow.tsx
@@ -1,18 +1,22 @@
-import Header from './Header';
-import Footer from './Footer';
+import Header from "./Header";
+import Footer from "./Footer";
 
-function BasicWindow({ username, content, buttons }: { username: string, content: React.ReactNode, buttons:React.ReactNode }) {
+function BasicWindow({
+  username,
+  content,
+  buttons,
+}: {
+  username: string;
+  content: React.ReactNode;
+  buttons: React.ReactNode;
+}): JSX.Element {
   return (
     <div className="font-sans flex flex-col h-screen bg-white border-2 border-black overflow-auto pt-[110px]">
       <Header username={username} />
-      <div className="flex flex-col items-center flex-grow">           
-        {content}
-      </div>
-      <Footer>
-        {buttons}
-      </Footer>
+      <div className="flex flex-col items-center flex-grow">{content}</div>
+      <Footer>{buttons}</Footer>
     </div>
   );
 }
 
-export default BasicWindow;
\ No newline at end of file
+export default BasicWindow;
diff --git a/frontend/src/Components/Button.tsx b/frontend/src/Components/Button.tsx
index a00f5e1..cf6a887 100644
--- a/frontend/src/Components/Button.tsx
+++ b/frontend/src/Components/Button.tsx
@@ -1,10 +1,18 @@
-function Button({text, onClick}: {text: string; onClick: () => void;}){
-   return <button 
-   onClick={onClick} 
-   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;"
-   >
-       {text}
-      </button>
+function Button({
+  text,
+  onClick,
+}: {
+  text: string;
+  onClick: () => void;
+}): JSX.Element {
+  return (
+    <button
+      onClick={onClick}
+      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;"
+    >
+      {text}
+    </button>
+  );
 }
 
-export default Button;
\ No newline at end of file
+export default Button;
diff --git a/frontend/src/Components/Footer.tsx b/frontend/src/Components/Footer.tsx
index f1c7e29..a3b7469 100644
--- a/frontend/src/Components/Footer.tsx
+++ b/frontend/src/Components/Footer.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
+import React from "react";
 
-function Footer({ children }: { children: React.ReactNode }) {
+function Footer({ children }: { children: React.ReactNode }): JSX.Element {
   return (
     <footer className="bg-white">
-     <div className="flex justify-end items-center h-16 space-x-6 pr-6">
+      <div className="flex justify-end items-center h-16 space-x-6 pr-6">
         {children}
       </div>
     </footer>
   );
 }
 
-export default Footer;
\ No newline at end of file
+export default Footer;
diff --git a/frontend/src/Components/Header.tsx b/frontend/src/Components/Header.tsx
index fde1fbf..5c642b8 100644
--- a/frontend/src/Components/Header.tsx
+++ b/frontend/src/Components/Header.tsx
@@ -1,41 +1,54 @@
-import React, { useState } from 'react';
-import { Link } from 'react-router-dom';
+import { useState } from "react";
+import { Link } from "react-router-dom";
 
-
-function Header({ username }: { username: string }) {
+function Header({ username }: { username: string }): JSX.Element {
   const [isOpen, setIsOpen] = useState(false);
 
-  const handleLogout = () => {
+  const handleLogout = (): void => {
     // Add any logout logic here
   };
 
   return (
-    <header className="fixed top-0 left-0 right-0 border-[1.75px] border-black text-black p-3 pl-5 flex items-center justify-between bg-cover"
-    style={{ backgroundImage: `url('src/assets/1.jpg')` }}>
+    <header
+      className="fixed top-0 left-0 right-0 border-[1.75px] border-black text-black p-3 pl-5 flex items-center justify-between bg-cover"
+      style={{ backgroundImage: `url('src/assets/1.jpg')` }}
+    >
       <Link to="/your-projects">
-      <img src="/src/assets/TTIMElogo.png" alt="TTIME Logo" className="w-11 h-14 cursor-pointer" />
+        <img
+          src="/src/assets/TTIMElogo.png"
+          alt="TTIME Logo"
+          className="w-11 h-14 cursor-pointer"
+        />
       </Link>
-  
-      <div 
+
+      <div
         className="relative"
-        onMouseEnter={() => setIsOpen(true)}
-        onMouseLeave={() => setIsOpen(false)}
+        onMouseEnter={() => {
+          setIsOpen(true);
+        }}
+        onMouseLeave={() => {
+          setIsOpen(false);
+        }}
       >
         <button className="mr-4 underline font-bold text-white">
           {username}
         </button>
-  
+
         {isOpen && (
           <div className="absolute right-0 bg-white border rounded shadow-lg">
             <Link to="/">
-            <button onClick={handleLogout} className="block px-2 py-1 text-black hover:bg-gray-200">Logout</button>
+              <button
+                onClick={handleLogout}
+                className="block px-2 py-1 text-black hover:bg-gray-200"
+              >
+                Logout
+              </button>
             </Link>
           </div>
         )}
       </div>
     </header>
   );
-        }
+}
 
 export default Header;
-
diff --git a/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx b/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx
index 80f35ad..009a5bd 100644
--- a/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx
+++ b/frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx
@@ -1,26 +1,38 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
 
-function PMProjectPage() {
-  
-  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>
-  </div>
-</>
-  
-  const buttons = 
-  <>
-  <Button text="Back" onClick={() => {}}/>
-  </>
-
-  return (
-    <BasicWindow username="Admin" content={content} buttons={buttons}/>
+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>
+      </div>
+    </>
   );
+
+  const buttons = (
+    <>
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
 }
-export default PMProjectPage;
\ No newline at end of file
+export default PMProjectPage;
diff --git a/frontend/src/Pages/UserPages/UserProjectPage.tsx b/frontend/src/Pages/UserPages/UserProjectPage.tsx
index 6387bf2..52c34ed 100644
--- a/frontend/src/Pages/UserPages/UserProjectPage.tsx
+++ b/frontend/src/Pages/UserPages/UserProjectPage.tsx
@@ -2,28 +2,36 @@ import { Link } from "react-router-dom";
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
 
-function UserProjectPage() {
-  
-  const content = 
-<> 
-<Link to="/settingsPage">
-  <h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
-</Link>
-  <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>
-    <h1 className="font-bold underline text-[30px] cursor-pointer">New Time Report</h1>
-  </div>
-</>
-  
-  const buttons = 
-  <>
-  <Link to="/your-projects">
-  <Button text="Back" onClick={() => {}}/>
-  </Link>
-  </>
-
-  return (
-    <BasicWindow username="Admin" content={content} buttons={buttons}/>
+function UserProjectPage(): JSX.Element {
+  const content = (
+    <>
+      <Link to="/settingsPage">
+        <h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
+      </Link>
+      <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>
+        <h1 className="font-bold underline text-[30px] cursor-pointer">
+          New Time Report
+        </h1>
+      </div>
+    </>
   );
+
+  const buttons = (
+    <>
+      <Link to="/your-projects">
+        <Button
+          text="Back"
+          onClick={(): void => {
+            return;
+          }}
+        />
+      </Link>
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
 }
-export default UserProjectPage;
\ No newline at end of file
+export default UserProjectPage;
diff --git a/frontend/src/Pages/YourProjectsPage.tsx b/frontend/src/Pages/YourProjectsPage.tsx
index 4c09f26..b580a1b 100644
--- a/frontend/src/Pages/YourProjectsPage.tsx
+++ b/frontend/src/Pages/YourProjectsPage.tsx
@@ -2,26 +2,30 @@ import { Link } from "react-router-dom";
 import BasicWindow from "../Components/BasicWindow";
 
 function YourProjectsPage() {
-  
-  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">ProjectNameExample</h1>
-    <h1 className="underline text-[24px] cursor-pointer font-bold">ProjectNameExample</h1>
-    <h1 className="underline text-[24px] cursor-pointer font-bold">ProjectNameExample</h1>
-  </div>
-</>
-  
-  const buttons = 
-  <>
-  </>
-
-  return (
-    <BasicWindow username="Admin" content={content} buttons={buttons}/>
+  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">
+          ProjectNameExample
+        </h1>
+        <h1 className="underline text-[24px] cursor-pointer font-bold">
+          ProjectNameExample
+        </h1>
+        <h1 className="underline text-[24px] cursor-pointer font-bold">
+          ProjectNameExample
+        </h1>
+      </div>
+    </>
   );
+
+  const buttons = <></>;
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
 }
-export default YourProjectsPage;
\ No newline at end of file
+export default YourProjectsPage;
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index ac21ae1..a379d27 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,13 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
 
   theme: {
     extend: {},
   },
   plugins: [],
-}
-
+};