Formatting and typing

frontend/postcss.config.js

@@ -3,4 +3,4 @@ export default {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

frontend/src/Components/BasicWindow.tsx

@@ -1,16 +1,20 @@
-import Header from './Header';
+import Header from "./Header";
-import Footer from './Footer';
+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">           
+      <div className="flex flex-col items-center flex-grow">{content}</div>
-        {content}
+      <Footer>{buttons}</Footer>
-      </div>
-      <Footer>
-        {buttons}
-      </Footer>
     </div>
   );
 }

frontend/src/Components/Button.tsx

@@ -1,10 +1,18 @@
-function Button({text, onClick}: {text: string; onClick: () => void;}){
+function Button({
-   return <button 
+  text,
-   onClick={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: string;
-       {text}
+  onClick: () => void;
-      </button>
+}): 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;

frontend/src/Components/Footer.tsx

@@ -1,9 +1,9 @@
-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>

frontend/src/Components/Header.tsx

@@ -1,25 +1,34 @@
-import React, { useState } from 'react';
+import { useState } from "react";
-import { Link } from 'react-router-dom';
+import { Link } from "react-router-dom";
 
-
+function Header({ username }: { username: string }): JSX.Element {
-function Header({ username }: { username: string }) {
   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"
+    <header
-    style={{ backgroundImage: `url('src/assets/1.jpg')` }}>
+      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
         className="relative"
-        onMouseEnter={() => setIsOpen(true)}
+        onMouseEnter={() => {
-        onMouseLeave={() => setIsOpen(false)}
+          setIsOpen(true);
+        }}
+        onMouseLeave={() => {
+          setIsOpen(false);
+        }}
       >
         <button className="mr-4 underline font-bold text-white">
           {username}
@@ -28,14 +37,18 @@ function Header({ username }: { username: string }) {
         {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;
-

frontend/src/Pages/ProjectManagerPages/PMProjectPage.tsx

@@ -1,26 +1,38 @@
 import BasicWindow from "../../Components/BasicWindow";
 import Button from "../../Components/Button";
 
-function PMProjectPage() {
+function PMProjectPage(): JSX.Element {
-  
+  const content = (
-  const content = 
+    <>
-<> 
+      <h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
-  <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]">
-  <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">
-    <h1 className="font-bold underline text-[30px] cursor-pointer">Your Time Reports</h1>
+          Your Time Reports
-    <h1 className="font-bold underline text-[30px] cursor-pointer">New Time Report</h1>
+        </h1>
-    <h1 className="font-bold underline text-[30px] cursor-pointer">Statistics</h1>
+        <h1 className="font-bold underline text-[30px] cursor-pointer">
-    <h1 className="font-bold underline text-[30px] cursor-pointer">Unsigned Time Reports</h1>
+          New Time Report
-  </div>
+        </h1>
-</>
+        <h1 className="font-bold underline text-[30px] cursor-pointer">
-  
+          Statistics
-  const buttons = 
+        </h1>
-  <>
+        <h1 className="font-bold underline text-[30px] cursor-pointer">
-  <Button text="Back" onClick={() => {}}/>
+          Unsigned Time Reports
-  </>
+        </h1>
-
+      </div>
-  return (
+    </>
-    <BasicWindow username="Admin" content={content} buttons={buttons}/>
   );
+
+  const buttons = (
+    <>
+      <Button
+        text="Back"
+        onClick={(): void => {
+          return;
+        }}
+      />
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
 }
 export default PMProjectPage;

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() {
+function UserProjectPage(): JSX.Element {
-  
+  const content = (
-  const content = 
+    <>
-<> 
+      <Link to="/settingsPage">
-<Link to="/settingsPage">
+        <h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
-  <h1 className="font-bold text-[30px] mb-[20px]">ProjectNameExample</h1>
+      </Link>
-</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]">
-  <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">
-    <h1 className="font-bold underline text-[30px] cursor-pointer">Your Time Reports</h1>
+          Your Time Reports
-    <h1 className="font-bold underline text-[30px] cursor-pointer">New Time Report</h1>
+        </h1>
-  </div>
+        <h1 className="font-bold underline text-[30px] cursor-pointer">
-</>
+          New Time Report
-  
+        </h1>
-  const buttons = 
+      </div>
-  <>
+    </>
-  <Link to="/your-projects">
-  <Button text="Back" onClick={() => {}}/>
-  </Link>
-  </>
-
-  return (
-    <BasicWindow username="Admin" content={content} buttons={buttons}/>
   );
+
+  const buttons = (
+    <>
+      <Link to="/your-projects">
+        <Button
+          text="Back"
+          onClick={(): void => {
+            return;
+          }}
+        />
+      </Link>
+    </>
+  );
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
 }
 export default UserProjectPage;

frontend/src/Pages/YourProjectsPage.tsx

@@ -2,26 +2,30 @@ import { Link } from "react-router-dom";
 import BasicWindow from "../Components/BasicWindow";
 
 function YourProjectsPage() {
-  
+  const content = (
-  const content = 
+    <>
-<> 
+      <h1 className="font-bold text-[30px] mb-[20px]">Your Projects</h1>
-  <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]">
-  <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">
-    <Link to="/project">
+          <h1 className="underline text-[24px] cursor-pointer font-bold">
-    <h1 className="underline text-[24px] cursor-pointer font-bold">ProjectNameExample</h1>
+            ProjectNameExample
-    </Link>
+          </h1>
-    <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">
-    <h1 className="underline text-[24px] cursor-pointer font-bold">ProjectNameExample</h1>
+          ProjectNameExample
-  </div>
+        </h1>
-</>
+        <h1 className="underline text-[24px] cursor-pointer font-bold">
-  
+          ProjectNameExample
-  const buttons = 
+        </h1>
-  <>
+        <h1 className="underline text-[24px] cursor-pointer font-bold">
-  </>
+          ProjectNameExample
-
+        </h1>
-  return (
+      </div>
-    <BasicWindow username="Admin" content={content} buttons={buttons}/>
+    </>
   );
+
+  const buttons = <></>;
+
+  return <BasicWindow username="Admin" content={content} buttons={buttons} />;
 }
 export default YourProjectsPage;

frontend/tailwind.config.js

@@ -1,13 +1,9 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  content: [
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
 
   theme: {
     extend: {},
   },
   plugins: [],
-}
+};
-