From 3177cf37e186423abd8c2d8dd148c51ddc1898ab Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Mon, 5 Feb 2024 15:32:06 +0800
Subject: [PATCH 01/24] cleaned up repair request form

---
 src/components/Button/index.tsx               |  4 +++-
 src/components/FormFields/box-label.tsx       |  2 +-
 src/components/FormFields/field-text-area.tsx |  3 ++-
 .../Forms/create-repair-request.tsx           | 20 +++++++++++++------
 src/components/terms-and-conditions.tsx       | 12 +++++++----
 src/pages/repair-request/index.tsx            | 19 +++++-------------
 6 files changed, 33 insertions(+), 27 deletions(-)

diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
index 615bcebe..220908e9 100644
--- a/src/components/Button/index.tsx
+++ b/src/components/Button/index.tsx
@@ -10,6 +10,7 @@ interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
   textSize?: string;
   hover?: string;
   position?: string;
+  textWeight?: string;
 }
 
 export default function Button({
@@ -22,13 +23,14 @@ export default function Button({
   textSize = "text-lg",
   hover = "hover:bg-primary-800",
   position = "mx-auto",
+  textWeight = "font-normal",
   children,
   ...props
 }: ButtonProps) {
   return (
     <button
       {...props}
-      className={`${color} ${border} ${radius} ${height} ${width} ${textColor} ${textSize} ${hover} ${position}`}
+      className={`${color} ${border} ${radius} ${height} ${width} ${textColor} ${textSize} ${hover} ${position} ${textWeight}`}
     >
       {children}
     </button>
diff --git a/src/components/FormFields/box-label.tsx b/src/components/FormFields/box-label.tsx
index ea846ebe..0a23d4eb 100644
--- a/src/components/FormFields/box-label.tsx
+++ b/src/components/FormFields/box-label.tsx
@@ -15,7 +15,7 @@ export default function Label<T extends FieldValues = FieldValues>({
   ...props
 }: FormProps<T>) {
   return (
-    <label className="absolute -top-2 left-2 flex flex-row items-center gap-0.5 rounded-full bg-white px-1 text-xs font-semibold text-black">
+    <label className="absolute -top-3 left-2 flex flex-row items-center gap-0.5 rounded-full bg-white px-1 text-s font-semibold text-black">
       {label}
       {props.rules?.required ? (
         <span className="text-xs font-semibold text-red-500"> *</span>
diff --git a/src/components/FormFields/field-text-area.tsx b/src/components/FormFields/field-text-area.tsx
index 535e8fd1..7a209557 100644
--- a/src/components/FormFields/field-text-area.tsx
+++ b/src/components/FormFields/field-text-area.tsx
@@ -35,7 +35,8 @@ export default function FieldTextArea<T extends FieldValues = FieldValues>({
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
 
-  const baseStyle = `relative mb-2 flex ${height} ${width} flex-row items-center justify-between rounded-lg border border-grey-300 px-3 shadow hover:shadow-grey-300`;
+  // const baseStyle = `relative mb-2 flex ${height} ${width} flex-row items-center justify-between rounded-lg border border-grey-300 px-3 shadow hover:shadow-grey-300`;
+  const baseStyle = `relative flex ${height} ${width} justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 shadow-sm border border-grey-300 hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
   const textAreaStyle = `overflow-wrap:break-text pt-3 h-full w-full resize-none overflow-y-auto text-sm placeholder:text-gray-500 focus:outline-none focus:ring-0`;
diff --git a/src/components/Forms/create-repair-request.tsx b/src/components/Forms/create-repair-request.tsx
index 93b054f4..7bf6da35 100644
--- a/src/components/Forms/create-repair-request.tsx
+++ b/src/components/Forms/create-repair-request.tsx
@@ -63,7 +63,7 @@ export default function RepairRequestForm({ eventId }: { eventId?: string }) {
       <SingleSelect
         name="itemBrand"
         control={control}
-        placeholder="Select a brand"
+        placeholder="Select a brand..."
         label="Brand"
         rules={{ required: true }}
         options={
@@ -77,7 +77,7 @@ export default function RepairRequestForm({ eventId }: { eventId?: string }) {
       <SingleSelect
         name="itemType"
         control={control}
-        placeholder="Select an item type"
+        placeholder="Select an item type..."
         label="Item Type"
         rules={{ required: true }}
         options={
@@ -92,17 +92,19 @@ export default function RepairRequestForm({ eventId }: { eventId?: string }) {
       <FieldTextArea
         name="description"
         label="Description"
-        placeholder="Enter a description"
+        placeholder="Enter a description..."
         control={control}
         rules={{ required: true }}
       />
+
       <FieldImageUpload multiple name="images" control={control} />
+      <p className="text-center">(psst you can upload multiple images)</p>
       {/* Input field for Event */}
       {!eventId && (
         <SingleSelect
           name="eventId"
           control={control}
-          placeholder="Select an event"
+          placeholder="Select an event..."
           label="Event"
           options={
             eventOptions
@@ -116,12 +118,18 @@ export default function RepairRequestForm({ eventId }: { eventId?: string }) {
       <FieldTextArea
         name="comment"
         label="Additional Comment"
-        placeholder="Enter additional comments"
+        placeholder="Anything else we should know?"
         control={control}
         rules={{ required: false }}
       />
       <TermsAndConditions setValue={setValue} control={control} />
-      <Button type="submit" height="h-9" width="w-full" textSize="text-base">
+      <Button
+        type="submit"
+        height="h-12"
+        width="w-full"
+        textSize="text-lg"
+        textWeight="font-semibold"
+      >
         Submit
       </Button>
     </form>
diff --git a/src/components/terms-and-conditions.tsx b/src/components/terms-and-conditions.tsx
index 234e8861..f75dc6a2 100644
--- a/src/components/terms-and-conditions.tsx
+++ b/src/components/terms-and-conditions.tsx
@@ -45,14 +45,15 @@ export const TermsAndConditions = ({
               ? setValue(field.name, !field.value)
               : handleshowPopupChange()
           }
+          className="accent-primary-600"
         />
 
         <div className="space-x-1.5">
-          <span className="pl-2">I have read and accept the</span>
+          <span className="pl-2 font-medium">I have read and accept the</span>
           <button
             type="button"
             onClick={handleshowPopupChange}
-            className="text-darkAqua-400 hover:text-darkAqua-200"
+            className="text-darkAqua-400 hover:text-darkAqua-200 font-medium"
           >
             house rules
           </button>
@@ -89,13 +90,16 @@ export const TermsAndConditions = ({
                 <Dialog.Panel className="w-auto max-w-5xl transform overflow-hidden rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all">
                   <div className="flex justify-end">
                     <button onClick={handleshowPopupChange}>
-                      <AiFillCloseCircle className="text-2xl" color="teal" />
+                      <AiFillCloseCircle
+                        className="text-2xl w-10 h-10 "
+                        color="teal"
+                      />
                     </button>
                   </div>
 
                   <Dialog.Title
                     as="h3"
-                    className="border-b p-5 text-center text-2xl font-medium leading-6 text-gray-900"
+                    className="border-b pb-5 text-center text-2xl font-medium leading-6 text-gray-900"
                   >
                     House Rules
                   </Dialog.Title>
diff --git a/src/pages/repair-request/index.tsx b/src/pages/repair-request/index.tsx
index 539cb28f..79a782be 100644
--- a/src/pages/repair-request/index.tsx
+++ b/src/pages/repair-request/index.tsx
@@ -1,5 +1,4 @@
 // Page for submitting a repair request
-import Image from "next/image";
 
 import RepairRequestForm from "@/components/Forms/create-repair-request";
 import NavBar from "@/components/NavBar";
@@ -7,27 +6,19 @@ import { NextPageWithLayout } from "@/pages/_app";
 
 const RepairRequest: NextPageWithLayout = () => {
   return (
-    <div className="flex items-center justify-center p-4">
+    <div className="flex items-center justify-center p-4 bg-slate-100">
       <div className="flex w-screen flex-col justify-center gap-4 md:w-3/6 lg:w-4/12">
         {/* Logo of Repair Lab, which links to the main website. */}
 
-        <picture className="flex justify-center">
-          <a href="https://repairlab.myfreesites.net/" target="_blank">
-            <Image
-              src="/images/repair_lab_logo.jpg"
-              alt="Repair Labs Logo"
-              width={80}
-              height={80}
-            />
-          </a>
-        </picture>
-
         {/* Heading of the Page */}
 
-        <h1 className="flex justify-center text-xl font-bold">
+        <h1 className="flex justify-center text-4xl font-bold pt-5 ">
           {" "}
           Submit a Repair Request
         </h1>
+        <h4 className="flex justify-center text-lg font-bold text-primary-500 pb-2">
+          Tell us about your item and what needs fixing
+        </h4>
         <RepairRequestForm />
       </div>
     </div>

From ac77850da66c12a7eb3cb2f350c40ea43a9cd2ce Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Tue, 6 Feb 2024 12:37:02 +0800
Subject: [PATCH 02/24] made checkbox bigger

---
 src/components/terms-and-conditions.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/terms-and-conditions.tsx b/src/components/terms-and-conditions.tsx
index f75dc6a2..5e3c7125 100644
--- a/src/components/terms-and-conditions.tsx
+++ b/src/components/terms-and-conditions.tsx
@@ -45,7 +45,7 @@ export const TermsAndConditions = ({
               ? setValue(field.name, !field.value)
               : handleshowPopupChange()
           }
-          className="accent-primary-600"
+          className="accent-primary-600 w-5 h-5 rounded-xl"
         />
 
         <div className="space-x-1.5">

From c84e0637a49d7ba5ac4f3d29e23561f12349c8f9 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Wed, 14 Feb 2024 09:27:31 +0800
Subject: [PATCH 03/24] edited field components to allow page bg colour, moved
 repairAttemptForm to components, adjusted names to not be conflicting

---
 src/components/EventBox/request-view.tsx     |  25 ++++
 src/components/FormFields/field-input.tsx    |   4 +-
 src/components/FormFields/field-radio.tsx    |   4 +-
 src/components/Forms/repair-attempt-form.tsx | 149 +++++++++++++++++++
 src/components/Forms/repair-request-form.tsx |   2 +-
 src/pages/events/[id]/repair-requests.tsx    |   6 +-
 src/pages/repair-request/[id]/index.tsx      | 133 -----------------
 src/pages/repair-request/index.tsx           |   3 -
 8 files changed, 182 insertions(+), 144 deletions(-)
 create mode 100644 src/components/Forms/repair-attempt-form.tsx

diff --git a/src/components/EventBox/request-view.tsx b/src/components/EventBox/request-view.tsx
index cfec70fc..abbfe2cf 100644
--- a/src/components/EventBox/request-view.tsx
+++ b/src/components/EventBox/request-view.tsx
@@ -1,6 +1,10 @@
+import { useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { FaChevronDown } from "react-icons/fa6";
 
+import RepairAttemptForm from "@/components/Forms/repair-attempt-form";
+// import RepairAttempt from "/repair-request/[id]/index";
+import Modal from "@/components/Modal";
 import { User } from "@/types";
 
 // Contains type of info stored in our event box.
@@ -22,6 +26,10 @@ const RequestView = ({
   itemBrand,
   description
 }: RequestProps) => {
+  const [showRepairRequestModal, setShowRepairRequestModal] = useState(false);
+  function manageModal() {
+    setShowRepairRequestModal(true);
+  }
   return (
     <div className="mx-5 mt-4 rounded-lg bg-slate-200 shadow-lg">
       <Disclosure>
@@ -79,10 +87,27 @@ const RequestView = ({
                     // For future use when linking to issue 198
                     // router.push("")
                     // }
+                    onClick={manageModal}
+                    onKeyDown={manageModal}
                   >
                     Repair
                   </button>
                 </div>
+                <Modal
+                  showModal={showRepairRequestModal}
+                  setShowPopup={setShowRepairRequestModal}
+                  height="h-full"
+                  title="Manage Repair Attempt"
+                >
+                  <div className="text-center">
+                    <div>
+                      <RepairAttemptForm
+                      // setShowModal={setShowRepairRequestModal}
+                      />
+                      {/* <RepairAttempt /> */}
+                    </div>
+                  </div>
+                </Modal>
               </Disclosure.Panel>
             </Transition>
           </>
diff --git a/src/components/FormFields/field-input.tsx b/src/components/FormFields/field-input.tsx
index a668b369..7b26988f 100644
--- a/src/components/FormFields/field-input.tsx
+++ b/src/components/FormFields/field-input.tsx
@@ -40,8 +40,8 @@ export default function FieldInput<T extends FieldValues = FieldValues>({
   ...props
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
-
-  const baseStyle = `relative mb-2 flex h-10 ${width} flex-row items-center justify-between rounded-lg border px-3 shadow hover:shadow-grey-300`;
+  const baseStyle = `relative flex ${width} mb-2 justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 border shadow-sm hover:shadow-grey-300`;
+  // const baseStyle = `relative mb-2 flex h-10 ${width} flex-row items-center justify-between rounded-lg border px-3 shadow hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
   const inputStyle = `mr-1 w-full h-full text-sm placeholder:text-gray-500 focus:outline-none focus:ring-0`;
diff --git a/src/components/FormFields/field-radio.tsx b/src/components/FormFields/field-radio.tsx
index 829c4b23..ce9a0dd9 100644
--- a/src/components/FormFields/field-radio.tsx
+++ b/src/components/FormFields/field-radio.tsx
@@ -31,8 +31,8 @@ export default function FieldRadio<T extends FieldValues = FieldValues>({
   ...props
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
-
-  const baseStyle = `relative mb-2 flex h-10 ${width} flex-row items-center justify-between rounded-lg border px-3 shadow hover:shadow-grey-300`;
+  const baseStyle = `relative flex ${width} mb-2 items-center justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 border shadow-sm hover:shadow-grey-300`;
+  // const baseStyle = `relative mb-2 flex h-10 ${width} flex-row items-center justify-between rounded-lg border px-3 shadow hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
   const radioStyle = `my-auto flex flex-row items-start gap-4 text-xs`;
diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
new file mode 100644
index 00000000..6a417a4b
--- /dev/null
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -0,0 +1,149 @@
+import { Inter } from "next/font/google";
+import { useRouter } from "next/router";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { SubmitHandler, useForm } from "react-hook-form";
+
+import Button from "@/components/Button";
+import FieldInput from "@/components/FormFields/field-input";
+import FieldRadio from "@/components/FormFields/field-radio";
+import FieldTextArea from "@/components/FormFields/field-text-area";
+import Toast from "@/components/Toast";
+import { useUpdateRepairRequest } from "@/hooks/repair-request";
+import { updateRepairRequestSchema } from "@/schema/repair-request";
+import type { GeneralRepairAttempt } from "@/types";
+
+const inter = Inter({ subsets: ["latin"] });
+
+export default function RepairAttempt() {
+  const {
+    query: { id }
+  } = useRouter();
+
+  const { mutate: updateRepairRequest } = useUpdateRepairRequest(id as string);
+
+  const { watch, control, handleSubmit } = useForm<GeneralRepairAttempt>({
+    resolver: zodResolver(updateRepairRequestSchema),
+    defaultValues: {
+      item: "",
+      itemBrand: "",
+      itemMaterial: "",
+      hoursWorked: 1,
+      isRepaired: undefined,
+      isSparePartsNeeded: undefined,
+      spareParts: "",
+      repairComment: ""
+    }
+  });
+
+  const watchIsSparePartsNeeded = watch("isSparePartsNeeded");
+
+  const onSubmit: SubmitHandler<GeneralRepairAttempt> = async (data) => {
+    updateRepairRequest(data);
+  };
+
+  return (
+    <main
+      className={`flex flex-col items-center gap-4 rounded-lg border-2 border-teal-300 bg-slate-100 shadow-md max-[768px]:m-7 md:mx-auto md:my-7 md:w-[768px]  ${inter.className}`}
+    >
+      {/* <h1 className="w-full rounded-t-lg px-5 py-3 text-3xl font-semibold leading-normal  text-grey-950 max-[415px]:text-center max-[415px]:text-lg">
+        General Repair Attempt
+        <p>ID: {id}</p>
+      </h1> */}
+      <h1 className="flex justify-center sm:text-4xl text-2xl font-bold pt-5 ">
+        {" "}
+        General Repair Attempt
+      </h1>
+      <h4 className="flex justify-center sm:text-xl font-bold text-primary-500 pb-2">
+        ID: {id}
+      </h4>
+
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {/* ID, Item */}
+        <div className="m-5 flex flex-wrap gap-2 max-[415px]:m-2">
+          <FieldInput
+            name="item"
+            control={control}
+            rules={{ required: true }}
+          />
+
+          {/* Brand, Material */}
+          <FieldInput
+            name="itemBrand"
+            label="Brand"
+            control={control}
+            rules={{ required: true }}
+            color="bg-white"
+          />
+          <FieldInput
+            name="itemMaterial"
+            label="Material"
+            placeholder="e.g. Wood, Metal, Plastic"
+            control={control}
+            rules={{ required: true }}
+          />
+
+          {/* Time it took, Repaired? */}
+          <FieldInput
+            name="hoursWorked"
+            label="Time it took"
+            placeholder="Time in hours, e.g. 1.5"
+            control={control}
+            rules={{ required: true }}
+          />
+
+          {/* Spare parts needed?, Part(s) needed */}
+          <div className="flex w-full flex-row gap-8 max-[415px]:gap-3">
+            <FieldRadio
+              name="isRepaired"
+              control={control}
+              label="Repaired?"
+              rules={{ required: true }}
+            />
+
+            <FieldRadio
+              name="isSparePartsNeeded"
+              control={control}
+              label="Spare parts needed?"
+              rules={{ required: true }}
+            />
+          </div>
+
+          {watchIsSparePartsNeeded === "true" && (
+            <FieldInput
+              name="spareParts"
+              label="Parts needed"
+              placeholder="e.g. 2x screws"
+              control={control}
+              rules={{
+                required: watchIsSparePartsNeeded === "true" ? true : false
+              }}
+            />
+          )}
+
+          {/* Repair Comment */}
+          <FieldTextArea
+            name="repairComment"
+            label="Repair Comment"
+            placeholder="Describe the repair job in detail"
+            control={control}
+            rules={{ required: true }}
+          />
+        </div>
+
+        {/* Submit */}
+        <div className="my-5 flex flex-row max-[415px]:m-2 m-5">
+          <Button
+            height="h-12"
+            width="w-full"
+            textSize="text-lg"
+            textWeight="font-semibold"
+            onClick={handleSubmit(onSubmit)}
+          >
+            Submit
+          </Button>
+        </div>
+      </form>
+      <Toast />
+    </main>
+  );
+}
diff --git a/src/components/Forms/repair-request-form.tsx b/src/components/Forms/repair-request-form.tsx
index 3ba232fc..dcb7fd72 100644
--- a/src/components/Forms/repair-request-form.tsx
+++ b/src/components/Forms/repair-request-form.tsx
@@ -10,7 +10,7 @@ import FieldTextArea from "@/components/FormFields/field-text-area";
 import { updateRepairRequestSchema } from "@/schema/repair-request";
 import type { GeneralRepairAttempt } from "@/types";
 
-export default function RepairAttemptForm({
+export default function FakeRepairAttemptForm({
   itemBrands,
   itemTypes,
   onSubmit
diff --git a/src/pages/events/[id]/repair-requests.tsx b/src/pages/events/[id]/repair-requests.tsx
index 3776f556..1252f088 100644
--- a/src/pages/events/[id]/repair-requests.tsx
+++ b/src/pages/events/[id]/repair-requests.tsx
@@ -3,7 +3,7 @@ import { useRouter } from "next/router";
 import { CiCirclePlus } from "react-icons/ci";
 
 import Card from "@/components/Cards/card";
-import RepairAttemptForm from "@/components/Forms/create-repair-request";
+import RepairRequestForm from "@/components/Forms/create-repair-request";
 import Header, { HeaderProps } from "@/components/Header";
 import Modal from "@/components/Modal";
 import { Search } from "@/components/Search";
@@ -73,7 +73,7 @@ export default function RepairRequests() {
                       }
                     />
                     <div
-                      className="flex items-center rounded-full bg-primary-500 transition hover:-translate-y-1 hover:cursor-pointer hover:bg-primary-400 w-10 h-10"
+                      className="flex items-center rounded-full bg-primary-500 transition hover:-translate-y-1 hover:cursor-pointer hover:bg-primary-400 w-10 h-10 border-4"
                       role="presentation"
                       onClick={showForm}
                       onKeyDown={showForm}
@@ -118,7 +118,7 @@ export default function RepairRequests() {
                 >
                   <div className="text-center">
                     <div className="max-w-full">
-                      <RepairAttemptForm eventId={eventId as string} />
+                      <RepairRequestForm eventId={eventId as string} />
                     </div>
                   </div>
                 </Modal>
diff --git a/src/pages/repair-request/[id]/index.tsx b/src/pages/repair-request/[id]/index.tsx
index 36a9c272..e69de29b 100644
--- a/src/pages/repair-request/[id]/index.tsx
+++ b/src/pages/repair-request/[id]/index.tsx
@@ -1,133 +0,0 @@
-import { Inter } from "next/font/google";
-import { useRouter } from "next/router";
-import { zodResolver } from "@hookform/resolvers/zod";
-import { SubmitHandler, useForm } from "react-hook-form";
-
-import Button from "@/components/Button";
-import FieldInput from "@/components/FormFields/field-input";
-import FieldRadio from "@/components/FormFields/field-radio";
-import FieldTextArea from "@/components/FormFields/field-text-area";
-import Toast from "@/components/Toast";
-import { useUpdateRepairRequest } from "@/hooks/repair-request";
-import { updateRepairRequestSchema } from "@/schema/repair-request";
-import type { GeneralRepairAttempt } from "@/types";
-
-const inter = Inter({ subsets: ["latin"] });
-
-export default function RepairAttempt() {
-  const {
-    query: { id }
-  } = useRouter();
-
-  const { mutate: updateRepairRequest } = useUpdateRepairRequest(id as string);
-
-  const { watch, control, handleSubmit } = useForm<GeneralRepairAttempt>({
-    resolver: zodResolver(updateRepairRequestSchema),
-    defaultValues: {
-      item: "",
-      itemBrand: "",
-      itemMaterial: "",
-      hoursWorked: 1,
-      isRepaired: undefined,
-      isSparePartsNeeded: undefined,
-      spareParts: "",
-      repairComment: ""
-    }
-  });
-
-  const watchIsSparePartsNeeded = watch("isSparePartsNeeded");
-
-  const onSubmit: SubmitHandler<GeneralRepairAttempt> = async (data) => {
-    updateRepairRequest(data);
-  };
-
-  return (
-    <main
-      className={`flex flex-col items-center gap-4 rounded-lg border-2 border-teal-300 bg-white shadow-md max-[768px]:m-7 md:mx-auto md:my-7 md:w-[768px]  ${inter.className}`}
-    >
-      <h1 className="w-full rounded-t-lg bg-[#d9d9d9] px-5 py-3 text-3xl font-semibold leading-normal  text-grey-950 max-[415px]:text-center max-[415px]:text-lg">
-        General Repair Attempt
-        <p>ID: {id}</p>
-      </h1>
-
-      <form onSubmit={handleSubmit(onSubmit)}>
-        {/* ID, Item */}
-        <div className="m-5 flex flex-wrap gap-2 max-[415px]:m-2">
-          <FieldInput
-            name="item"
-            control={control}
-            rules={{ required: true }}
-          />
-
-          {/* Brand, Material */}
-          <FieldInput
-            name="itemBrand"
-            label="Brand"
-            control={control}
-            rules={{ required: true }}
-          />
-          <FieldInput
-            name="itemMaterial"
-            label="Material"
-            placeholder="e.g. Wood, Metal, Plastic"
-            control={control}
-            rules={{ required: true }}
-          />
-
-          {/* Time it took, Repaired? */}
-          <FieldInput
-            name="hoursWorked"
-            label="Time it took"
-            placeholder="Time in hours, e.g. 1.5"
-            control={control}
-            rules={{ required: true }}
-          />
-
-          {/* Spare parts needed?, Part(s) needed */}
-          <div className="flex w-full flex-row gap-8 max-[415px]:gap-3">
-            <FieldRadio
-              name="isRepaired"
-              control={control}
-              label="Repaired?"
-              rules={{ required: true }}
-            />
-
-            <FieldRadio
-              name="isSparePartsNeeded"
-              control={control}
-              label="Spare parts needed?"
-              rules={{ required: true }}
-            />
-          </div>
-
-          {watchIsSparePartsNeeded === "true" && (
-            <FieldInput
-              name="spareParts"
-              label="Parts needed"
-              placeholder="e.g. 2x screws"
-              control={control}
-              rules={{
-                required: watchIsSparePartsNeeded === "true" ? true : false
-              }}
-            />
-          )}
-
-          {/* Repair Comment */}
-          <FieldTextArea
-            name="repairComment"
-            label="Repair Comment"
-            placeholder="Describe the repair job in detail"
-            control={control}
-            rules={{ required: true }}
-          />
-        </div>
-
-        {/* Submit */}
-        <div className="my-5 flex flex-row">
-          <Button onClick={handleSubmit(onSubmit)}>Submit</Button>
-        </div>
-      </form>
-      <Toast />
-    </main>
-  );
-}
diff --git a/src/pages/repair-request/index.tsx b/src/pages/repair-request/index.tsx
index 79a782be..a85d579e 100644
--- a/src/pages/repair-request/index.tsx
+++ b/src/pages/repair-request/index.tsx
@@ -8,10 +8,7 @@ const RepairRequest: NextPageWithLayout = () => {
   return (
     <div className="flex items-center justify-center p-4 bg-slate-100">
       <div className="flex w-screen flex-col justify-center gap-4 md:w-3/6 lg:w-4/12">
-        {/* Logo of Repair Lab, which links to the main website. */}
-
         {/* Heading of the Page */}
-
         <h1 className="flex justify-center text-4xl font-bold pt-5 ">
           {" "}
           Submit a Repair Request

From d33d5f4ce4ed529fa1d1468d75fac2cff9082875 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Thu, 15 Feb 2024 12:40:11 +0800
Subject: [PATCH 04/24] allowed fields to be prepopulated, added properties to
 components to fit modal, renamed unused repairAttemptForm

---
 src/components/EventBox/request-view.tsx      |  16 +-
 src/components/FormFields/field-input.tsx     |   4 +-
 src/components/FormFields/field-radio.tsx     |   8 +-
 ...-form.tsx => fake-repair-attempt-form.tsx} |   0
 src/components/Forms/repair-attempt-form.tsx  | 137 ++++++++++++------
 src/components/Modal/index.tsx                |   6 +-
 src/hooks/repair-request.ts                   |   2 +-
 src/pages/repairer/events/[id].tsx            |  36 +++--
 8 files changed, 133 insertions(+), 76 deletions(-)
 rename src/components/Forms/{repair-request-form.tsx => fake-repair-attempt-form.tsx} (100%)

diff --git a/src/components/EventBox/request-view.tsx b/src/components/EventBox/request-view.tsx
index abbfe2cf..100b8e4d 100644
--- a/src/components/EventBox/request-view.tsx
+++ b/src/components/EventBox/request-view.tsx
@@ -5,17 +5,17 @@ import { FaChevronDown } from "react-icons/fa6";
 import RepairAttemptForm from "@/components/Forms/repair-attempt-form";
 // import RepairAttempt from "/repair-request/[id]/index";
 import Modal from "@/components/Modal";
-import { User } from "@/types";
+import { RepairRequestResponse, User } from "@/types";
 
 // Contains type of info stored in our event box.
-type RequestProps = {
+export type RequestProps = {
   repairRequestId: string;
   createdBy: User;
   requestDate: string;
   itemType: string;
   itemBrand: string;
   description: string;
-  handleClick?: () => void;
+  repairAttemptProps: RepairRequestResponse;
 };
 
 const RequestView = ({
@@ -24,7 +24,8 @@ const RequestView = ({
   requestDate,
   itemType,
   itemBrand,
-  description
+  description,
+  repairAttemptProps
 }: RequestProps) => {
   const [showRepairRequestModal, setShowRepairRequestModal] = useState(false);
   function manageModal() {
@@ -97,12 +98,15 @@ const RequestView = ({
                   showModal={showRepairRequestModal}
                   setShowPopup={setShowRepairRequestModal}
                   height="h-full"
-                  title="Manage Repair Attempt"
+                  title="Repair Attempt"
+                  width="w-3/4 sm:max-w-3/4 md:max-w-3/4"
+                  crossWidthAndHeight="w-10 h-10"
                 >
                   <div className="text-center">
                     <div>
                       <RepairAttemptForm
-                      // setShowModal={setShowRepairRequestModal}
+                        props={repairAttemptProps}
+                        // setShowModal={setShowRepairRequestModal}
                       />
                       {/* <RepairAttempt /> */}
                     </div>
diff --git a/src/components/FormFields/field-input.tsx b/src/components/FormFields/field-input.tsx
index 7b26988f..caa40c1a 100644
--- a/src/components/FormFields/field-input.tsx
+++ b/src/components/FormFields/field-input.tsx
@@ -17,6 +17,7 @@ export interface FormProps<T extends FieldValues = FieldValues>
   icon?: string;
   type?: string;
   width?: string;
+  height?: string;
 }
 
 /*
@@ -37,10 +38,11 @@ export default function FieldInput<T extends FieldValues = FieldValues>({
   icon,
   type,
   width = "w-full",
+  height = "min-h-10",
   ...props
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
-  const baseStyle = `relative flex ${width} mb-2 justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 border shadow-sm hover:shadow-grey-300`;
+  const baseStyle = `relative flex ${width} ${height} mb-2 justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 border shadow-sm hover:shadow-grey-300`;
   // const baseStyle = `relative mb-2 flex h-10 ${width} flex-row items-center justify-between rounded-lg border px-3 shadow hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
diff --git a/src/components/FormFields/field-radio.tsx b/src/components/FormFields/field-radio.tsx
index ce9a0dd9..54a51999 100644
--- a/src/components/FormFields/field-radio.tsx
+++ b/src/components/FormFields/field-radio.tsx
@@ -13,6 +13,8 @@ export interface FormProps<T extends FieldValues = FieldValues>
   id?: string;
   label?: string;
   width?: string;
+  height?: string;
+  axis?: string;
 }
 
 /*
@@ -28,14 +30,16 @@ export default function FieldRadio<T extends FieldValues = FieldValues>({
   id,
   label,
   width = "w-full",
+  height = "min-h-10",
+  axis = "flex-row",
   ...props
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
-  const baseStyle = `relative flex ${width} mb-2 items-center justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 border shadow-sm hover:shadow-grey-300`;
+  const baseStyle = `relative flex ${width} ${height} mb-2 items-center justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 border shadow-sm hover:shadow-grey-300`;
   // const baseStyle = `relative mb-2 flex h-10 ${width} flex-row items-center justify-between rounded-lg border px-3 shadow hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
-  const radioStyle = `my-auto flex flex-row items-start gap-4 text-xs`;
+  const radioStyle = `my-auto flex ${axis} items-start gap-4 text-xs`;
 
   return (
     <div
diff --git a/src/components/Forms/repair-request-form.tsx b/src/components/Forms/fake-repair-attempt-form.tsx
similarity index 100%
rename from src/components/Forms/repair-request-form.tsx
rename to src/components/Forms/fake-repair-attempt-form.tsx
diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index 6a417a4b..84c2b87f 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -6,32 +6,51 @@ import { SubmitHandler, useForm } from "react-hook-form";
 import Button from "@/components/Button";
 import FieldInput from "@/components/FormFields/field-input";
 import FieldRadio from "@/components/FormFields/field-radio";
+import FieldSingleSelect from "@/components/FormFields/field-single-select";
 import FieldTextArea from "@/components/FormFields/field-text-area";
 import Toast from "@/components/Toast";
+import { ItemType, useItemTypes } from "@/hooks/item-types";
 import { useUpdateRepairRequest } from "@/hooks/repair-request";
 import { updateRepairRequestSchema } from "@/schema/repair-request";
-import type { GeneralRepairAttempt } from "@/types";
+import type { GeneralRepairAttempt, RepairRequestResponse } from "@/types";
+import { formatDate } from "@/utils";
 
 const inter = Inter({ subsets: ["latin"] });
 
-export default function RepairAttempt() {
+export type RepairAttemptProps = {
+  requestDate: string;
+  props: RepairRequestResponse;
+};
+
+export default function RepairAttempt({
+  props
+}: {
+  props: RepairRequestResponse;
+}) {
   const {
     query: { id }
   } = useRouter();
 
   const { mutate: updateRepairRequest } = useUpdateRepairRequest(id as string);
 
+  const { data: itemTypes } = useItemTypes();
+
+  let isSparePartsNeeded;
+  props.spareParts == ""
+    ? (isSparePartsNeeded = "false")
+    : (isSparePartsNeeded = "true");
+
   const { watch, control, handleSubmit } = useForm<GeneralRepairAttempt>({
     resolver: zodResolver(updateRepairRequestSchema),
     defaultValues: {
-      item: "",
-      itemBrand: "",
-      itemMaterial: "",
-      hoursWorked: 1,
+      item: props.itemType,
+      itemBrand: props.itemBrand,
+      itemMaterial: props.itemMaterial,
+      hoursWorked: Number(props.hoursWorked),
       isRepaired: undefined,
-      isSparePartsNeeded: undefined,
-      spareParts: "",
-      repairComment: ""
+      isSparePartsNeeded: isSparePartsNeeded,
+      spareParts: props.spareParts,
+      repairComment: props.repairComment
     }
   });
 
@@ -43,58 +62,78 @@ export default function RepairAttempt() {
 
   return (
     <main
-      className={`flex flex-col items-center gap-4 rounded-lg border-2 border-teal-300 bg-slate-100 shadow-md max-[768px]:m-7 md:mx-auto md:my-7 md:w-[768px]  ${inter.className}`}
+    //  className={`flex flex-col items-center gap-4 rounded-lg border-2 border-teal-300 bg-slate-100 shadow-md max-[768px]:m-7 md:mx-auto md:my-7 md:w-[768px]  ${inter.className}`}
     >
       {/* <h1 className="w-full rounded-t-lg px-5 py-3 text-3xl font-semibold leading-normal  text-grey-950 max-[415px]:text-center max-[415px]:text-lg">
         General Repair Attempt
         <p>ID: {id}</p>
       </h1> */}
-      <h1 className="flex justify-center sm:text-4xl text-2xl font-bold pt-5 ">
+      {/* <h1 className="flex justify-center sm:text-4xl text-2xl font-bold pt-5 ">
         {" "}
         General Repair Attempt
-      </h1>
-      <h4 className="flex justify-center sm:text-xl font-bold text-primary-500 pb-2">
-        ID: {id}
+      </h1> */}
+      <h4 className="flex justify-center text-xl max-[860px]:text-lg max-[640px]:text-base font-bold text-primary-500 pb-2">
+        Repair Request ID: {props.id}
       </h4>
-
+      <h4 className="flex justify-center text-xl max-[860px]:text-lg max-[640px]:text-base font-bold text-primary-500 max-[860px]:pb-0 pb-2">
+        Requested By: {props.createdBy.id} on{" "}
+        {formatDate(String(props.requestDate))}
+      </h4>
+      {/* <h4 className="flex justify-center sm:text-xl font-bold pb-2 pt-5">
+      Item Type: {props.itemType}
+      </h4> */}
       <form onSubmit={handleSubmit(onSubmit)}>
         {/* ID, Item */}
-        <div className="m-5 flex flex-wrap gap-2 max-[415px]:m-2">
-          <FieldInput
-            name="item"
-            control={control}
-            rules={{ required: true }}
-          />
-
-          {/* Brand, Material */}
-          <FieldInput
-            name="itemBrand"
-            label="Brand"
-            control={control}
-            rules={{ required: true }}
-            color="bg-white"
-          />
-          <FieldInput
-            name="itemMaterial"
-            label="Material"
-            placeholder="e.g. Wood, Metal, Plastic"
-            control={control}
-            rules={{ required: true }}
-          />
+        <div className="m-5 flex flex-wrap gap-6 max-[415px]:m-2 max-[860px]:mt-5 mt-10 xl:mx-14">
+          <div className="m-auto flex flex-wrap w-3/4 gap-2 max-[415px]:m-2 mt-2">
+            <FieldSingleSelect
+              name="item"
+              placeholder="eg. Computer, Bike..."
+              control={control}
+              rules={{ required: true }}
+              options={
+                itemTypes
+                  ? itemTypes.map((itemType: ItemType) => {
+                      return { id: itemType.name, text: itemType.name };
+                    })
+                  : []
+              }
+            />
 
-          {/* Time it took, Repaired? */}
-          <FieldInput
-            name="hoursWorked"
-            label="Time it took"
-            placeholder="Time in hours, e.g. 1.5"
-            control={control}
-            rules={{ required: true }}
-          />
+            {/* Brand, Material */}
+            <FieldInput
+              name="itemBrand"
+              label="Brand"
+              placeholder="eg. Alienware..."
+              control={control}
+              rules={{ required: true }}
+            />
+            <FieldInput
+              name="itemMaterial"
+              label="Material"
+              placeholder="e.g. Wood, Metal, Plastic..."
+              control={control}
+              rules={{ required: true }}
+            />
+          </div>
 
           {/* Spare parts needed?, Part(s) needed */}
           <div className="flex w-full flex-row gap-8 max-[415px]:gap-3">
+            {/* Time it took, Repaired? */}
+            <FieldInput
+              name="hoursWorked"
+              label="Hours taken"
+              width="w-full min-w-10"
+              height="min-h-10 max-[852px]:min-h-20"
+              placeholder="Time in hours, e.g. 1.5..."
+              control={control}
+              rules={{ required: true }}
+            />
             <FieldRadio
               name="isRepaired"
+              width="w-full"
+              height="min-h-10 max-[852px]:min-h-20"
+              axis="flex-col sm:flex-row"
               control={control}
               label="Repaired?"
               rules={{ required: true }}
@@ -102,6 +141,8 @@ export default function RepairAttempt() {
 
             <FieldRadio
               name="isSparePartsNeeded"
+              width="w-full"
+              height="min-h-10 max-[852px]:min-h-20"
               control={control}
               label="Spare parts needed?"
               rules={{ required: true }}
@@ -112,7 +153,7 @@ export default function RepairAttempt() {
             <FieldInput
               name="spareParts"
               label="Parts needed"
-              placeholder="e.g. 2x screws"
+              placeholder="e.g. 2x screws..."
               control={control}
               rules={{
                 required: watchIsSparePartsNeeded === "true" ? true : false
@@ -124,14 +165,14 @@ export default function RepairAttempt() {
           <FieldTextArea
             name="repairComment"
             label="Repair Comment"
-            placeholder="Describe the repair job in detail"
+            placeholder="Describe the repair job in detail..."
             control={control}
             rules={{ required: true }}
           />
         </div>
 
         {/* Submit */}
-        <div className="my-5 flex flex-row max-[415px]:m-2 m-5">
+        <div className="my-5 flex flex-row max-[415px]:m-2 m-5 xl:mx-14">
           <Button
             height="h-12"
             width="w-full"
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 53081bb7..1d78714b 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -10,6 +10,7 @@ type ModalProps = {
   width?: string;
   height?: string;
   children?: ReactNode;
+  crossWidthAndHeight?: string;
 };
 
 const Modal = ({
@@ -18,7 +19,8 @@ const Modal = ({
   title,
   width = "w-full sm:max-w-lg md:max-w-2xl",
   height = "h-fit",
-  children
+  children,
+  crossWidthAndHeight = "w-6 h-6",
 }: ModalProps) => {
   return (
     <>
@@ -71,7 +73,7 @@ const Modal = ({
                     onClick={() => setShowPopup(false)}
                     className="absolute right-2 top-2 rounded-lg p-1 hover:bg-gray-50"
                   >
-                    <AiFillCloseCircle className="text-2xl" color="teal" />
+                    <AiFillCloseCircle className={`text-2xl ${crossWidthAndHeight}`} color="teal" />
                   </button>
                 </Dialog.Panel>
               </Transition.Child>
diff --git a/src/hooks/repair-request.ts b/src/hooks/repair-request.ts
index 04448301..5ea82e9d 100644
--- a/src/hooks/repair-request.ts
+++ b/src/hooks/repair-request.ts
@@ -44,7 +44,7 @@ export const useCreateRepairRequest = () => {
   });
 };
 
-export const useUpdateRepairRequest = (id: string | undefined) => {
+export const  useUpdateRepairRequest = (id: string | undefined) => {
   const queryClient = useQueryClient();
 
   const mutationFn = async (data: GeneralRepairAttempt) => {
diff --git a/src/pages/repairer/events/[id].tsx b/src/pages/repairer/events/[id].tsx
index e0a13910..396510d4 100644
--- a/src/pages/repairer/events/[id].tsx
+++ b/src/pages/repairer/events/[id].tsx
@@ -78,26 +78,30 @@ const Home = () => {
                 ) : repairRequests && repairRequests.length > 0 ? (
                   <div>
                     <ul id="repairRequestList">
-                      {repairRequests.map(
-                        ({
-                          id,
-                          createdBy,
-                          requestDate,
-                          itemType,
-                          itemBrand,
-                          description
-                        }: RepairRequestResponse) => (
+                      {repairRequests.map((item: RepairRequestResponse) => (
+                          //   ({
+                          //   id,
+                          //   createdBy,
+                          //   requestDate,
+                          //   itemType,
+                          //   itemBrand,
+                          //   description
+                          // }: RepairRequestResponse) => (
+                        <div key={item.id}>
+
                           <RequestView
-                            key={id}
-                            repairRequestId={id}
-                            requestDate={formatDate(String(requestDate))}
-                            createdBy={createdBy}
-                            itemType={itemType}
-                            itemBrand={itemBrand}
-                            description={description}
+                            repairRequestId={item.id}
+                            requestDate={formatDate(String(item.requestDate))}
+                            createdBy={item.createdBy}
+                            itemType={item.itemType}
+                            itemBrand={item.itemBrand}
+                            description={item.description}
+                            repairAttemptProps={item}
                           />
+                        </div>
                         )
                       )}
+                      
                     </ul>
                   </div>
                 ) : (

From 831dec57d375b579d7185c0c4f2f544c97d7ced8 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Thu, 15 Feb 2024 13:07:55 +0800
Subject: [PATCH 05/24] ran prettier

---
 src/components/Forms/repair-attempt-form.tsx |  3 ++-
 src/components/Modal/index.tsx               |  7 +++++--
 src/hooks/repair-request.ts                  |  2 +-
 src/pages/repairer/events/[id].tsx           | 21 +++++++++-----------
 4 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index 84c2b87f..041496fc 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -62,7 +62,8 @@ export default function RepairAttempt({
 
   return (
     <main
-    //  className={`flex flex-col items-center gap-4 rounded-lg border-2 border-teal-300 bg-slate-100 shadow-md max-[768px]:m-7 md:mx-auto md:my-7 md:w-[768px]  ${inter.className}`}
+      //  className={`flex flex-col items-center gap-4 rounded-lg border-2 border-teal-300 bg-slate-100 shadow-md max-[768px]:m-7 md:mx-auto md:my-7 md:w-[768px]  ${inter.className}`}
+      className={`${inter.className}`}
     >
       {/* <h1 className="w-full rounded-t-lg px-5 py-3 text-3xl font-semibold leading-normal  text-grey-950 max-[415px]:text-center max-[415px]:text-lg">
         General Repair Attempt
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 1d78714b..f19e416b 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -20,7 +20,7 @@ const Modal = ({
   width = "w-full sm:max-w-lg md:max-w-2xl",
   height = "h-fit",
   children,
-  crossWidthAndHeight = "w-6 h-6",
+  crossWidthAndHeight = "w-6 h-6"
 }: ModalProps) => {
   return (
     <>
@@ -73,7 +73,10 @@ const Modal = ({
                     onClick={() => setShowPopup(false)}
                     className="absolute right-2 top-2 rounded-lg p-1 hover:bg-gray-50"
                   >
-                    <AiFillCloseCircle className={`text-2xl ${crossWidthAndHeight}`} color="teal" />
+                    <AiFillCloseCircle
+                      className={`text-2xl ${crossWidthAndHeight}`}
+                      color="teal"
+                    />
                   </button>
                 </Dialog.Panel>
               </Transition.Child>
diff --git a/src/hooks/repair-request.ts b/src/hooks/repair-request.ts
index 5ea82e9d..04448301 100644
--- a/src/hooks/repair-request.ts
+++ b/src/hooks/repair-request.ts
@@ -44,7 +44,7 @@ export const useCreateRepairRequest = () => {
   });
 };
 
-export const  useUpdateRepairRequest = (id: string | undefined) => {
+export const useUpdateRepairRequest = (id: string | undefined) => {
   const queryClient = useQueryClient();
 
   const mutationFn = async (data: GeneralRepairAttempt) => {
diff --git a/src/pages/repairer/events/[id].tsx b/src/pages/repairer/events/[id].tsx
index 396510d4..e21a7442 100644
--- a/src/pages/repairer/events/[id].tsx
+++ b/src/pages/repairer/events/[id].tsx
@@ -79,16 +79,15 @@ const Home = () => {
                   <div>
                     <ul id="repairRequestList">
                       {repairRequests.map((item: RepairRequestResponse) => (
-                          //   ({
-                          //   id,
-                          //   createdBy,
-                          //   requestDate,
-                          //   itemType,
-                          //   itemBrand,
-                          //   description
-                          // }: RepairRequestResponse) => (
+                        //   ({
+                        //   id,
+                        //   createdBy,
+                        //   requestDate,
+                        //   itemType,
+                        //   itemBrand,
+                        //   description
+                        // }: RepairRequestResponse) => (
                         <div key={item.id}>
-
                           <RequestView
                             repairRequestId={item.id}
                             requestDate={formatDate(String(item.requestDate))}
@@ -99,9 +98,7 @@ const Home = () => {
                             repairAttemptProps={item}
                           />
                         </div>
-                        )
-                      )}
-                      
+                      ))}
                     </ul>
                   </div>
                 ) : (

From 603f8c11d5505b25c109b6681d5cc1cf4c03d2fa Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Sat, 17 Feb 2024 15:31:13 +0800
Subject: [PATCH 06/24] added overflow to modal, yPosition to box label and
 size adjustment to modal cross

---
 src/components/EventBox/request-view.tsx     |  4 +-
 src/components/FormFields/box-label.tsx      |  6 +-
 src/components/FormFields/field-radio.tsx    |  4 +-
 src/components/Forms/repair-attempt-form.tsx | 63 +++++++++-----------
 src/components/Modal/index.tsx               | 22 +++----
 5 files changed, 51 insertions(+), 48 deletions(-)

diff --git a/src/components/EventBox/request-view.tsx b/src/components/EventBox/request-view.tsx
index 100b8e4d..8e4b13dc 100644
--- a/src/components/EventBox/request-view.tsx
+++ b/src/components/EventBox/request-view.tsx
@@ -97,9 +97,9 @@ const RequestView = ({
                 <Modal
                   showModal={showRepairRequestModal}
                   setShowPopup={setShowRepairRequestModal}
-                  height="h-full"
+                  height="h-full overflow-auto"
                   title="Repair Attempt"
-                  width="w-3/4 sm:max-w-3/4 md:max-w-3/4"
+                  width="sm:w-3/4 w-[85svw] sm:max-w-3/4 md:max-w-3/4"
                   crossWidthAndHeight="w-10 h-10"
                 >
                   <div className="text-center">
diff --git a/src/components/FormFields/box-label.tsx b/src/components/FormFields/box-label.tsx
index 0a23d4eb..51f43773 100644
--- a/src/components/FormFields/box-label.tsx
+++ b/src/components/FormFields/box-label.tsx
@@ -3,6 +3,7 @@ import { FieldValues, UseControllerProps } from "react-hook-form";
 export interface FormProps<T extends FieldValues = FieldValues>
   extends UseControllerProps<T> {
   label?: string;
+  yPosition?: string;
 }
 
 /*
@@ -12,10 +13,13 @@ Output:
 */
 export default function Label<T extends FieldValues = FieldValues>({
   label,
+  yPosition = "-top-3",
   ...props
 }: FormProps<T>) {
   return (
-    <label className="absolute -top-3 left-2 flex flex-row items-center gap-0.5 rounded-full bg-white px-1 text-s font-semibold text-black">
+    <label
+      className={`absolute ${yPosition} left-2 flex flex-row items-center gap-0.5 rounded-full bg-white px-1 text-s font-semibold text-black`}
+    >
       {label}
       {props.rules?.required ? (
         <span className="text-xs font-semibold text-red-500"> *</span>
diff --git a/src/components/FormFields/field-radio.tsx b/src/components/FormFields/field-radio.tsx
index 54a51999..fe566fac 100644
--- a/src/components/FormFields/field-radio.tsx
+++ b/src/components/FormFields/field-radio.tsx
@@ -15,6 +15,7 @@ export interface FormProps<T extends FieldValues = FieldValues>
   width?: string;
   height?: string;
   axis?: string;
+  labelYPosition?: string;
 }
 
 /*
@@ -32,6 +33,7 @@ export default function FieldRadio<T extends FieldValues = FieldValues>({
   width = "w-full",
   height = "min-h-10",
   axis = "flex-row",
+  labelYPosition = "-top-3",
   ...props
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
@@ -47,7 +49,7 @@ export default function FieldRadio<T extends FieldValues = FieldValues>({
         fieldState.invalid ? `${errorBorderStyle}` : `${normalBorderStyle}`
       }`}
     >
-      <Label label={!label ? props.name : label} {...props} />
+      <Label label={!label ? props.name : label} yPosition={`${labelYPosition}`} {...props} />
       <div className={radioStyle}>
         <label htmlFor={`${props.name}-y`} className="flex gap-1">
           <input
diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index 041496fc..859f0a64 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -1,4 +1,3 @@
-import { Inter } from "next/font/google";
 import { useRouter } from "next/router";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SubmitHandler, useForm } from "react-hook-form";
@@ -15,8 +14,6 @@ import { updateRepairRequestSchema } from "@/schema/repair-request";
 import type { GeneralRepairAttempt, RepairRequestResponse } from "@/types";
 import { formatDate } from "@/utils";
 
-const inter = Inter({ subsets: ["latin"] });
-
 export type RepairAttemptProps = {
   requestDate: string;
   props: RepairRequestResponse;
@@ -62,8 +59,7 @@ export default function RepairAttempt({
 
   return (
     <main
-      //  className={`flex flex-col items-center gap-4 rounded-lg border-2 border-teal-300 bg-slate-100 shadow-md max-[768px]:m-7 md:mx-auto md:my-7 md:w-[768px]  ${inter.className}`}
-      className={`${inter.className}`}
+    //  className={`flex flex-col items-center gap-4 rounded-lg border-2 border-teal-300 bg-slate-100 shadow-md max-[768px]:m-7 md:mx-auto md:my-7 md:w-[768px]  ${inter.className}`}
     >
       {/* <h1 className="w-full rounded-t-lg px-5 py-3 text-3xl font-semibold leading-normal  text-grey-950 max-[415px]:text-center max-[415px]:text-lg">
         General Repair Attempt
@@ -117,33 +113,33 @@ export default function RepairAttempt({
               rules={{ required: true }}
             />
           </div>
-
+          <FieldInput
+            name="hoursWorked"
+            label="Hours taken"
+            width="w-full min-w-20"
+            height="min-h-10"
+            placeholder="Time in hours, e.g. 1.5..."
+            control={control}
+            rules={{ required: true }}
+          />
           {/* Spare parts needed?, Part(s) needed */}
-          <div className="flex w-full flex-row gap-8 max-[415px]:gap-3">
+          <div className="flex w-full flex-row justify-center gap-4 max-[415px]:gap-3">
             {/* Time it took, Repaired? */}
-            <FieldInput
-              name="hoursWorked"
-              label="Hours taken"
-              width="w-full min-w-10"
-              height="min-h-10 max-[852px]:min-h-20"
-              placeholder="Time in hours, e.g. 1.5..."
-              control={control}
-              rules={{ required: true }}
-            />
             <FieldRadio
               name="isRepaired"
-              width="w-full"
-              height="min-h-10 max-[852px]:min-h-20"
+              width="w-[49%]"
+              height="min-h-10 max-[960px]:min-h-20"
               axis="flex-col sm:flex-row"
               control={control}
               label="Repaired?"
               rules={{ required: true }}
             />
-
             <FieldRadio
               name="isSparePartsNeeded"
-              width="w-full"
-              height="min-h-10 max-[852px]:min-h-20"
+              width="w-[49%]"
+              height="min-h-10 max-[960px]:min-h-20"
+              axis="flex-col sm:flex-row"
+              labelYPosition="-top-6 sm:-top-3 max-[450px]:-top-10"
               control={control}
               label="Spare parts needed?"
               rules={{ required: true }}
@@ -170,19 +166,18 @@ export default function RepairAttempt({
             control={control}
             rules={{ required: true }}
           />
-        </div>
-
-        {/* Submit */}
-        <div className="my-5 flex flex-row max-[415px]:m-2 m-5 xl:mx-14">
-          <Button
-            height="h-12"
-            width="w-full"
-            textSize="text-lg"
-            textWeight="font-semibold"
-            onClick={handleSubmit(onSubmit)}
-          >
-            Submit
-          </Button>
+          {/* Submit */}
+          <div className="my-0 w-full">
+            <Button
+              height="h-12"
+              width="w-full"
+              textSize="text-lg"
+              textWeight="font-semibold"
+              onClick={handleSubmit(onSubmit)}
+            >
+              Submit
+            </Button>
+          </div>
         </div>
       </form>
       <Toast />
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index f19e416b..4155d823 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -68,16 +68,18 @@ const Modal = ({
                     ""
                   )}
 
-                  <div>{children}</div>
-                  <button
-                    onClick={() => setShowPopup(false)}
-                    className="absolute right-2 top-2 rounded-lg p-1 hover:bg-gray-50"
-                  >
-                    <AiFillCloseCircle
-                      className={`text-2xl ${crossWidthAndHeight}`}
-                      color="teal"
-                    />
-                  </button>
+                  <div>
+                    {children}
+                    <button
+                      onClick={() => setShowPopup(false)}
+                      className="absolute right-2 top-2 rounded-lg p-1 hover:bg-gray-50"
+                    >
+                      <AiFillCloseCircle
+                        className={`text-2xl ${crossWidthAndHeight}`}
+                        color="teal"
+                      />
+                    </button>
+                  </div>
                 </Dialog.Panel>
               </Transition.Child>
             </div>

From d932c501b1af0236913be3ce146dabfafd72cea1 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Sat, 17 Feb 2024 15:36:22 +0800
Subject: [PATCH 07/24] spare parts is defaulted to nothing instead of no

---
 src/components/Forms/repair-attempt-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index 859f0a64..6b67e7cb 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -34,7 +34,7 @@ export default function RepairAttempt({
 
   let isSparePartsNeeded;
   props.spareParts == ""
-    ? (isSparePartsNeeded = "false")
+    ? (isSparePartsNeeded = "")
     : (isSparePartsNeeded = "true");
 
   const { watch, control, handleSubmit } = useForm<GeneralRepairAttempt>({

From 20aee39bd476c9ca3d4dc84069075003c93a30f4 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Sat, 17 Feb 2024 15:37:32 +0800
Subject: [PATCH 08/24] padding

---
 src/components/Forms/repair-attempt-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index 6b67e7cb..bf5d2f34 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -167,7 +167,7 @@ export default function RepairAttempt({
             rules={{ required: true }}
           />
           {/* Submit */}
-          <div className="my-0 w-full">
+          <div className="mt-2 w-full">
             <Button
               height="h-12"
               width="w-full"

From 1fc72b14129896ef937403bdaf8a3263e142973c Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Sat, 17 Feb 2024 15:44:21 +0800
Subject: [PATCH 09/24] fixed repair attempt submission to use repair id rather
 than event id

---
 src/components/Forms/repair-attempt-form.tsx | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index bf5d2f34..80dea6b6 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -1,4 +1,3 @@
-import { useRouter } from "next/router";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { SubmitHandler, useForm } from "react-hook-form";
 
@@ -24,11 +23,9 @@ export default function RepairAttempt({
 }: {
   props: RepairRequestResponse;
 }) {
-  const {
-    query: { id }
-  } = useRouter();
-
-  const { mutate: updateRepairRequest } = useUpdateRepairRequest(id as string);
+  const { mutate: updateRepairRequest } = useUpdateRepairRequest(
+    props.id as string
+  );
 
   const { data: itemTypes } = useItemTypes();
 

From e4d1c2563206596b0ee5754f844c72956b84afa9 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Mon, 19 Feb 2024 09:39:45 +0800
Subject: [PATCH 10/24] cleaned up repair attempt form

---
 src/components/FormFields/field-radio.tsx    |  6 +++++-
 src/components/Forms/repair-attempt-form.tsx | 20 +-------------------
 2 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/src/components/FormFields/field-radio.tsx b/src/components/FormFields/field-radio.tsx
index fe566fac..00a6c81a 100644
--- a/src/components/FormFields/field-radio.tsx
+++ b/src/components/FormFields/field-radio.tsx
@@ -49,7 +49,11 @@ export default function FieldRadio<T extends FieldValues = FieldValues>({
         fieldState.invalid ? `${errorBorderStyle}` : `${normalBorderStyle}`
       }`}
     >
-      <Label label={!label ? props.name : label} yPosition={`${labelYPosition}`} {...props} />
+      <Label
+        label={!label ? props.name : label}
+        yPosition={`${labelYPosition}`}
+        {...props}
+      />
       <div className={radioStyle}>
         <label htmlFor={`${props.name}-y`} className="flex gap-1">
           <input
diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index 80dea6b6..6115eb01 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -13,11 +13,6 @@ import { updateRepairRequestSchema } from "@/schema/repair-request";
 import type { GeneralRepairAttempt, RepairRequestResponse } from "@/types";
 import { formatDate } from "@/utils";
 
-export type RepairAttemptProps = {
-  requestDate: string;
-  props: RepairRequestResponse;
-};
-
 export default function RepairAttempt({
   props
 }: {
@@ -55,17 +50,7 @@ export default function RepairAttempt({
   };
 
   return (
-    <main
-    //  className={`flex flex-col items-center gap-4 rounded-lg border-2 border-teal-300 bg-slate-100 shadow-md max-[768px]:m-7 md:mx-auto md:my-7 md:w-[768px]  ${inter.className}`}
-    >
-      {/* <h1 className="w-full rounded-t-lg px-5 py-3 text-3xl font-semibold leading-normal  text-grey-950 max-[415px]:text-center max-[415px]:text-lg">
-        General Repair Attempt
-        <p>ID: {id}</p>
-      </h1> */}
-      {/* <h1 className="flex justify-center sm:text-4xl text-2xl font-bold pt-5 ">
-        {" "}
-        General Repair Attempt
-      </h1> */}
+    <main className="sm:mx-10 md:mx-16 mx-5">
       <h4 className="flex justify-center text-xl max-[860px]:text-lg max-[640px]:text-base font-bold text-primary-500 pb-2">
         Repair Request ID: {props.id}
       </h4>
@@ -73,9 +58,6 @@ export default function RepairAttempt({
         Requested By: {props.createdBy.id} on{" "}
         {formatDate(String(props.requestDate))}
       </h4>
-      {/* <h4 className="flex justify-center sm:text-xl font-bold pb-2 pt-5">
-      Item Type: {props.itemType}
-      </h4> */}
       <form onSubmit={handleSubmit(onSubmit)}>
         {/* ID, Item */}
         <div className="m-5 flex flex-wrap gap-6 max-[415px]:m-2 max-[860px]:mt-5 mt-10 xl:mx-14">

From 4901e481da6b618945b70f5b8add03c0fb0285a4 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Wed, 21 Feb 2024 13:25:11 +0800
Subject: [PATCH 11/24] updated looks a bit innit

---
 src/components/EventBox/request-view.tsx     |  2 +-
 src/components/Forms/repair-attempt-form.tsx | 66 +++++++++++---------
 2 files changed, 39 insertions(+), 29 deletions(-)

diff --git a/src/components/EventBox/request-view.tsx b/src/components/EventBox/request-view.tsx
index 8e4b13dc..23dfbd60 100644
--- a/src/components/EventBox/request-view.tsx
+++ b/src/components/EventBox/request-view.tsx
@@ -99,7 +99,7 @@ const RequestView = ({
                   setShowPopup={setShowRepairRequestModal}
                   height="h-full overflow-auto"
                   title="Repair Attempt"
-                  width="sm:w-3/4 w-[85svw] sm:max-w-3/4 md:max-w-3/4"
+                  width="w-[85svw] sm:w-[80svw] sm:max-w-3/4 md:w-3/4 lg:w-2/3"
                   crossWidthAndHeight="w-10 h-10"
                 >
                   <div className="text-center">
diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index 6115eb01..2389ac9d 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -45,12 +45,17 @@ export default function RepairAttempt({
 
   const watchIsSparePartsNeeded = watch("isSparePartsNeeded");
 
+  let textAreaHeight;
+  watchIsSparePartsNeeded == "true"
+    ? (textAreaHeight = "h-36 min-h-36")
+    : (textAreaHeight = "h-[13.5rem]");
+
   const onSubmit: SubmitHandler<GeneralRepairAttempt> = async (data) => {
     updateRepairRequest(data);
   };
 
   return (
-    <main className="sm:mx-10 md:mx-16 mx-5">
+    <main className="sm:mx-10 md:mx-16 mx-5 border-0 border-blue-500 h-fit">
       <h4 className="flex justify-center text-xl max-[860px]:text-lg max-[640px]:text-base font-bold text-primary-500 pb-2">
         Repair Request ID: {props.id}
       </h4>
@@ -58,10 +63,13 @@ export default function RepairAttempt({
         Requested By: {props.createdBy.id} on{" "}
         {formatDate(String(props.requestDate))}
       </h4>
-      <form onSubmit={handleSubmit(onSubmit)}>
+      <form
+        onSubmit={handleSubmit(onSubmit)}
+        className="border-0 border-green-500"
+      >
         {/* ID, Item */}
-        <div className="m-5 flex flex-wrap gap-6 max-[415px]:m-2 max-[860px]:mt-5 mt-10 xl:mx-14">
-          <div className="m-auto flex flex-wrap w-3/4 gap-2 max-[415px]:m-2 mt-2">
+        <div className="m-0 flex flex-col gap-6 sm:m-5 md:mt-5 lg:mt-10 xl:mx-14">
+          <div className="flex flex-col m-auto w-3/4 gap-2 max-[415px]:m-2 mt-2">
             <FieldSingleSelect
               name="item"
               placeholder="eg. Computer, Bike..."
@@ -92,33 +100,34 @@ export default function RepairAttempt({
               rules={{ required: true }}
             />
           </div>
-          <FieldInput
-            name="hoursWorked"
-            label="Hours taken"
-            width="w-full min-w-20"
-            height="min-h-10"
-            placeholder="Time in hours, e.g. 1.5..."
-            control={control}
-            rules={{ required: true }}
-          />
+
           {/* Spare parts needed?, Part(s) needed */}
           <div className="flex w-full flex-row justify-center gap-4 max-[415px]:gap-3">
             {/* Time it took, Repaired? */}
             <FieldRadio
               name="isRepaired"
-              width="w-[49%]"
+              width="w-[33%]"
               height="min-h-10 max-[960px]:min-h-20"
               axis="flex-col sm:flex-row"
               control={control}
               label="Repaired?"
               rules={{ required: true }}
             />
+            <FieldInput
+              name="hoursWorked"
+              label="Hours taken"
+              width="w-[33%]"
+              height="min-h-10"
+              placeholder="Time in hours, e.g. 1.5..."
+              control={control}
+              rules={{ required: true }}
+            />
             <FieldRadio
               name="isSparePartsNeeded"
-              width="w-[49%]"
+              width="w-[33%]"
               height="min-h-10 max-[960px]:min-h-20"
               axis="flex-col sm:flex-row"
-              labelYPosition="-top-6 sm:-top-3 max-[450px]:-top-10"
+              labelYPosition="-top-10 sm:-top-3 max-[450px]:-top-10"
               control={control}
               label="Spare parts needed?"
               rules={{ required: true }}
@@ -142,21 +151,22 @@ export default function RepairAttempt({
             name="repairComment"
             label="Repair Comment"
             placeholder="Describe the repair job in detail..."
+            height={textAreaHeight}
             control={control}
             rules={{ required: true }}
           />
-          {/* Submit */}
-          <div className="mt-2 w-full">
-            <Button
-              height="h-12"
-              width="w-full"
-              textSize="text-lg"
-              textWeight="font-semibold"
-              onClick={handleSubmit(onSubmit)}
-            >
-              Submit
-            </Button>
-          </div>
+        </div>
+        {/* Submit */}
+        <div className="relative bottom-0 border-0 border-red-500 mt-10 w-full">
+          <Button
+            height="h-12"
+            width="w-full"
+            textSize="text-lg"
+            textWeight="font-semibold"
+            onClick={handleSubmit(onSubmit)}
+          >
+            Submit
+          </Button>
         </div>
       </form>
       <Toast />

From cec63c865a1f3e5898bd56bb9b78498fb0b347a0 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Wed, 21 Feb 2024 13:31:29 +0800
Subject: [PATCH 12/24] made form a tad shorter at different heights so the
 cross is always visible

---
 src/components/Forms/repair-attempt-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index 2389ac9d..a3188d67 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -157,7 +157,7 @@ export default function RepairAttempt({
           />
         </div>
         {/* Submit */}
-        <div className="relative bottom-0 border-0 border-red-500 mt-10 w-full">
+        <div className="relative bottom-0 border-0 border-red-500 lg:mt-8 mt-6 w-full">
           <Button
             height="h-12"
             width="w-full"

From 431c634880155468f48e73ec77271e28861f818b Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Sat, 24 Feb 2024 12:06:46 +0800
Subject: [PATCH 13/24] yeye pulled from origin

---
 src/pages/repairer/events/[id].tsx | 37 ++++++++++++------------------
 1 file changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/pages/repairer/events/[id].tsx b/src/pages/repairer/events/[id].tsx
index 91b57857..9e6a1623 100644
--- a/src/pages/repairer/events/[id].tsx
+++ b/src/pages/repairer/events/[id].tsx
@@ -80,28 +80,21 @@ const Home = () => {
                 ) : repairRequests && repairRequests.items.length > 0 ? (
                   <div>
                     <ul id="repairRequestList">
-<<<<<<< HEAD
-                      {repairRequests.map((item: RepairRequestResponse) => (
-                        //   ({
-                        //   id,
-                        //   createdBy,
-                        //   requestDate,
-                        //   itemType,
-                        //   itemBrand,
-                        //   description
-                        // }: RepairRequestResponse) => (
-                        <div key={item.id}>
-=======                   <RequestView
-                            repairRequestId={item.id}
-                            requestDate={formatDate(String(item.requestDate))}
-                            createdBy={item.createdBy}
-                            itemType={item.itemType}
-                            itemBrand={item.itemBrand}
-                            description={item.description}
-                            repairAttemptProps={item}
-                          />
-                        </div>
-                      ))}
+                      {repairRequests.items.map(
+                        (item: RepairRequestResponse) => (
+                          <div key={item.id}>
+                            <RequestView
+                              repairRequestId={item.id}
+                              requestDate={formatDate(String(item.requestDate))}
+                              createdBy={item.createdBy}
+                              itemType={item.itemType}
+                              itemBrand={item.itemBrand}
+                              description={item.description}
+                              repairAttemptProps={item}
+                            />
+                          </div>
+                        )
+                      )}
                     </ul>
                   </div>
                 ) : (

From 5302ec8058480ea86eaf1e4fc50e3f1daee0fae0 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Sat, 24 Feb 2024 12:20:31 +0800
Subject: [PATCH 14/24] changed screated by to display name instead of id

---
 src/components/EventBox/request-view.tsx     | 12 ++----------
 src/components/Forms/repair-attempt-form.tsx |  2 +-
 2 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/src/components/EventBox/request-view.tsx b/src/components/EventBox/request-view.tsx
index 23dfbd60..92c32710 100644
--- a/src/components/EventBox/request-view.tsx
+++ b/src/components/EventBox/request-view.tsx
@@ -43,7 +43,7 @@ const RequestView = ({
             >
               <div className=" flex flex-col text-left py-2">
                 <span className="font-bold">
-                  {repairRequestId}- {createdBy.id}
+                  {repairRequestId}- {createdBy.firstName} {createdBy.lastName}
                 </span>
               </div>
               <FaChevronDown
@@ -84,10 +84,6 @@ const RequestView = ({
                 <div className="flex justify-center mt-1">
                   <button
                     className="bg-primary-700 px-4 py-1 rounded-lg text-white text-md hover:bg-primary-600"
-                    // onClick={() =>
-                    // For future use when linking to issue 198
-                    // router.push("")
-                    // }
                     onClick={manageModal}
                     onKeyDown={manageModal}
                   >
@@ -104,11 +100,7 @@ const RequestView = ({
                 >
                   <div className="text-center">
                     <div>
-                      <RepairAttemptForm
-                        props={repairAttemptProps}
-                        // setShowModal={setShowRepairRequestModal}
-                      />
-                      {/* <RepairAttempt /> */}
+                      <RepairAttemptForm props={repairAttemptProps} />
                     </div>
                   </div>
                 </Modal>
diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index a3188d67..1c9e2b10 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -60,7 +60,7 @@ export default function RepairAttempt({
         Repair Request ID: {props.id}
       </h4>
       <h4 className="flex justify-center text-xl max-[860px]:text-lg max-[640px]:text-base font-bold text-primary-500 max-[860px]:pb-0 pb-2">
-        Requested By: {props.createdBy.id} on{" "}
+        Requested By: {props.createdBy.firstName} {props.createdBy.lastName} on{" "}
         {formatDate(String(props.requestDate))}
       </h4>
       <form

From 652360a42aa5d7f1a4bafd8d3cf3971ccd72729f Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Sat, 24 Feb 2024 12:21:53 +0800
Subject: [PATCH 15/24] deleted redundant 'fake repair attempt form'

---
 .../Forms/fake-repair-attempt-form.tsx        | 161 ------------------
 1 file changed, 161 deletions(-)
 delete mode 100644 src/components/Forms/fake-repair-attempt-form.tsx

diff --git a/src/components/Forms/fake-repair-attempt-form.tsx b/src/components/Forms/fake-repair-attempt-form.tsx
deleted file mode 100644
index dcb7fd72..00000000
--- a/src/components/Forms/fake-repair-attempt-form.tsx
+++ /dev/null
@@ -1,161 +0,0 @@
-import { zodResolver } from "@hookform/resolvers/zod";
-import { Brand, ItemType } from "@prisma/client";
-import { SubmitHandler, useForm } from "react-hook-form";
-
-import Button from "@/components/Button";
-import FieldInput from "@/components/FormFields/field-input";
-import FieldRadio from "@/components/FormFields/field-radio";
-import FieldSingleSelect from "@/components/FormFields/field-single-select";
-import FieldTextArea from "@/components/FormFields/field-text-area";
-import { updateRepairRequestSchema } from "@/schema/repair-request";
-import type { GeneralRepairAttempt } from "@/types";
-
-export default function FakeRepairAttemptForm({
-  itemBrands,
-  itemTypes,
-  onSubmit
-}: {
-  itemBrands?: Brand[];
-  itemTypes?: ItemType[];
-  onSubmit?: SubmitHandler<GeneralRepairAttempt>;
-}) {
-  const { watch, control, handleSubmit } = useForm<GeneralRepairAttempt>({
-    resolver: zodResolver(updateRepairRequestSchema),
-    defaultValues: {
-      item: "",
-      itemBrand: "",
-      itemMaterial: "",
-      hoursWorked: undefined,
-      isRepaired: undefined,
-      isSparePartsNeeded: undefined,
-      spareParts: "",
-      repairComment: ""
-    }
-  });
-
-  let actualItemBrands;
-  itemBrands
-    ? (actualItemBrands = itemBrands.map((type) => ({
-        id: type.name,
-        text: type.name
-      })))
-    : (actualItemBrands = [
-        { id: 0, text: "Alienware" },
-        { id: 1, text: "Giant Bicycles" },
-        { id: 2, text: "Seiko" }
-      ]);
-
-  let actualItemTypes;
-  itemTypes
-    ? (actualItemTypes = itemTypes.map((type) => ({
-        id: type.name,
-        text: type.name
-      })))
-    : (actualItemTypes = [
-        { id: 0, text: "Bike" },
-        { id: 1, text: "Clock" },
-        { id: 2, text: "Computer" }
-      ]);
-
-  const watchIsSparePartsNeeded = watch("isSparePartsNeeded");
-
-  const defaultOnSubmit: SubmitHandler<GeneralRepairAttempt> = async (data) => {
-    // console.log(JSON.stringify(data));
-    const response = await fetch(`/api/repair-request`, {
-      method: "PATCH",
-      headers: {
-        "Content-Type": "application/json"
-      },
-      body: JSON.stringify(data)
-    });
-    if (response.ok) {
-      alert("Data submitted");
-    } else {
-      alert(`Error! ${response.statusText}`);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit(onSubmit ? onSubmit : defaultOnSubmit)}>
-      {/* ID, Item */}
-      <div className="m-5 flex flex-wrap gap-2 max-[415px]:m-2">
-        <FieldSingleSelect
-          name="item"
-          control={control}
-          rules={{ required: true }}
-          options={actualItemTypes}
-        />
-
-        {/* Brand, Material */}
-        <FieldSingleSelect
-          name="itemBrand"
-          label="Brand"
-          control={control}
-          rules={{ required: true }}
-          options={actualItemBrands}
-        />
-        <FieldInput
-          name="itemMaterial"
-          label="Material"
-          placeholder="e.g. Wood, Metal, Plastic"
-          control={control}
-          rules={{ required: true }}
-        />
-
-        {/* Time it took, Repaired? */}
-        <FieldInput
-          name="hoursWorked"
-          label="Time it took"
-          placeholder="Time in hours, e.g. 1.5"
-          control={control}
-          rules={{ required: true }}
-        />
-
-        {/* Spare parts needed?, Part(s) needed */}
-        <div className="flex w-full flex-row gap-8 max-[415px]:gap-3">
-          <FieldRadio
-            name="isRepaired"
-            control={control}
-            label="Repaired?"
-            rules={{ required: true }}
-          />
-
-          <FieldRadio
-            name="isSparePartsNeeded"
-            control={control}
-            label="Spare parts needed?"
-            rules={{ required: true }}
-          />
-        </div>
-
-        {watchIsSparePartsNeeded === "true" && (
-          <FieldInput
-            name="spareParts"
-            label="Parts needed"
-            placeholder="e.g. 2x screws"
-            control={control}
-            rules={{
-              required: watchIsSparePartsNeeded === "true" ? true : false
-            }}
-          />
-        )}
-
-        {/* Job Description */}
-        <FieldTextArea
-          name="repairComment"
-          label="Job Description"
-          placeholder="Describe the repair job in detail"
-          control={control}
-          rules={{ required: true }}
-        />
-      </div>
-
-      {/* Submit */}
-      <div className="my-5 flex flex-row">
-        <Button onClick={handleSubmit(onSubmit ? onSubmit : defaultOnSubmit)}>
-          Submit
-        </Button>
-      </div>
-    </form>
-  );
-}

From 07594c683fd639210cdc0115f275a144f715cfd7 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Sat, 24 Feb 2024 13:31:59 +0800
Subject: [PATCH 16/24] cleaned up some code

---
 src/components/EventBox/request-view.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/EventBox/request-view.tsx b/src/components/EventBox/request-view.tsx
index 92c32710..f97c3184 100644
--- a/src/components/EventBox/request-view.tsx
+++ b/src/components/EventBox/request-view.tsx
@@ -3,7 +3,6 @@ import { Disclosure, Transition } from "@headlessui/react";
 import { FaChevronDown } from "react-icons/fa6";
 
 import RepairAttemptForm from "@/components/Forms/repair-attempt-form";
-// import RepairAttempt from "/repair-request/[id]/index";
 import Modal from "@/components/Modal";
 import { RepairRequestResponse, User } from "@/types";
 

From 6622ed3b5442630a3679fe5282a8d8a5c69e66fe Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Sat, 24 Feb 2024 14:03:27 +0800
Subject: [PATCH 17/24] placed repair comment and parts in a div so submit
 button doesnt move

---
 src/components/Forms/repair-attempt-form.tsx | 41 ++++++++++----------
 1 file changed, 21 insertions(+), 20 deletions(-)

diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index 1c9e2b10..22a1d8c1 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -48,7 +48,7 @@ export default function RepairAttempt({
   let textAreaHeight;
   watchIsSparePartsNeeded == "true"
     ? (textAreaHeight = "h-36 min-h-36")
-    : (textAreaHeight = "h-[13.5rem]");
+    : (textAreaHeight = "h-full");
 
   const onSubmit: SubmitHandler<GeneralRepairAttempt> = async (data) => {
     updateRepairRequest(data);
@@ -133,28 +133,29 @@ export default function RepairAttempt({
               rules={{ required: true }}
             />
           </div>
+          <div className="flex flex-col gap-4 h-56">
+            {watchIsSparePartsNeeded === "true" && (
+              <FieldInput
+                name="spareParts"
+                label="Parts needed"
+                placeholder="e.g. 2x screws..."
+                control={control}
+                rules={{
+                  required: watchIsSparePartsNeeded === "true" ? true : false
+                }}
+              />
+            )}
 
-          {watchIsSparePartsNeeded === "true" && (
-            <FieldInput
-              name="spareParts"
-              label="Parts needed"
-              placeholder="e.g. 2x screws..."
+            {/* Repair Comment */}
+            <FieldTextArea
+              name="repairComment"
+              label="Repair Comment"
+              placeholder="Describe the repair job in detail..."
+              height={textAreaHeight}
               control={control}
-              rules={{
-                required: watchIsSparePartsNeeded === "true" ? true : false
-              }}
+              rules={{ required: true }}
             />
-          )}
-
-          {/* Repair Comment */}
-          <FieldTextArea
-            name="repairComment"
-            label="Repair Comment"
-            placeholder="Describe the repair job in detail..."
-            height={textAreaHeight}
-            control={control}
-            rules={{ required: true }}
-          />
+          </div>
         </div>
         {/* Submit */}
         <div className="relative bottom-0 border-0 border-red-500 lg:mt-8 mt-6 w-full">

From 8f41f880a29394ace06560059c50da7ad2396b53 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Fri, 8 Mar 2024 14:47:04 +0800
Subject: [PATCH 18/24] removed unnecessary comments

---
 src/components/FormFields/field-input.tsx     | 1 -
 src/components/FormFields/field-radio.tsx     | 1 -
 src/components/FormFields/field-text-area.tsx | 1 -
 3 files changed, 3 deletions(-)

diff --git a/src/components/FormFields/field-input.tsx b/src/components/FormFields/field-input.tsx
index 744112f9..b4a4405d 100644
--- a/src/components/FormFields/field-input.tsx
+++ b/src/components/FormFields/field-input.tsx
@@ -44,7 +44,6 @@ export default function FieldInput<T extends FieldValues = FieldValues>({
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
   const baseStyle = `relative flex ${width} ${height} mb-2 justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 border shadow-sm hover:shadow-grey-300`;
-  // const baseStyle = `relative mb-2 flex h-10 ${width} flex-row items-center justify-between rounded-lg border px-3 shadow hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
   const inputStyle = `mr-1 w-full h-full text-sm placeholder:text-gray-500 focus:outline-none focus:ring-0`;
diff --git a/src/components/FormFields/field-radio.tsx b/src/components/FormFields/field-radio.tsx
index 00a6c81a..24ac3ade 100644
--- a/src/components/FormFields/field-radio.tsx
+++ b/src/components/FormFields/field-radio.tsx
@@ -38,7 +38,6 @@ export default function FieldRadio<T extends FieldValues = FieldValues>({
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
   const baseStyle = `relative flex ${width} ${height} mb-2 items-center justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 border shadow-sm hover:shadow-grey-300`;
-  // const baseStyle = `relative mb-2 flex h-10 ${width} flex-row items-center justify-between rounded-lg border px-3 shadow hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
   const radioStyle = `my-auto flex ${axis} items-start gap-4 text-xs`;
diff --git a/src/components/FormFields/field-text-area.tsx b/src/components/FormFields/field-text-area.tsx
index 7a209557..3c29de62 100644
--- a/src/components/FormFields/field-text-area.tsx
+++ b/src/components/FormFields/field-text-area.tsx
@@ -35,7 +35,6 @@ export default function FieldTextArea<T extends FieldValues = FieldValues>({
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
 
-  // const baseStyle = `relative mb-2 flex ${height} ${width} flex-row items-center justify-between rounded-lg border border-grey-300 px-3 shadow hover:shadow-grey-300`;
   const baseStyle = `relative flex ${height} ${width} justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 shadow-sm border border-grey-300 hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;

From bf41bf4801c9721fb839d034e03b9ad128e04404 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Fri, 22 Mar 2024 15:04:54 +0800
Subject: [PATCH 19/24] tiny responsive changes

---
 src/components/EventBox/request-view.tsx | 2 +-
 src/components/Forms/repair              | 0
 src/components/Modal/index.tsx           | 6 +++---
 3 files changed, 4 insertions(+), 4 deletions(-)
 create mode 100644 src/components/Forms/repair

diff --git a/src/components/EventBox/request-view.tsx b/src/components/EventBox/request-view.tsx
index f97c3184..dea70e92 100644
--- a/src/components/EventBox/request-view.tsx
+++ b/src/components/EventBox/request-view.tsx
@@ -94,7 +94,7 @@ const RequestView = ({
                   setShowPopup={setShowRepairRequestModal}
                   height="h-full overflow-auto"
                   title="Repair Attempt"
-                  width="w-[85svw] sm:w-[80svw] sm:max-w-3/4 md:w-3/4 lg:w-2/3"
+                  width="w-full sm:w-full md:w-2/3 lg:w-1/2"
                   crossWidthAndHeight="w-10 h-10"
                 >
                   <div className="text-center">
diff --git a/src/components/Forms/repair b/src/components/Forms/repair
new file mode 100644
index 00000000..e69de29b
diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 4155d823..74d30aee 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -40,7 +40,7 @@ const Modal = ({
             leaveFrom="opacity-100"
             leaveTo="opacity-0"
           >
-            <div className="fixed inset-0 bg-grey-950 opacity-20" />
+            <div className="fixed inset-0 bg-grey-950 opacity-65" />
           </Transition.Child>
 
           <div className="fixed inset-0 h-full overflow-y-auto">
@@ -55,7 +55,7 @@ const Modal = ({
                 leaveTo="opacity-0 scale-95"
               >
                 <Dialog.Panel
-                  className={`${width} ${height}  transform rounded-2xl bg-white p-6 text-left align-middle shadow-xl transition-all`}
+                  className={`${width} ${height}  transform rounded-2xl bg-white sm:p-6 p-0 text-left align-middle shadow-xl transition-all`}
                 >
                   {title ? (
                     <Dialog.Title
@@ -72,7 +72,7 @@ const Modal = ({
                     {children}
                     <button
                       onClick={() => setShowPopup(false)}
-                      className="absolute right-2 top-2 rounded-lg p-1 hover:bg-gray-50"
+                      className="absolute right-2 top-2 rounded-lg sm:p-1 p-0 hover:bg-gray-50"
                     >
                       <AiFillCloseCircle
                         className={`text-2xl ${crossWidthAndHeight}`}

From f0085fe71691f9129fe5c39a4f886785a292586c Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Fri, 22 Mar 2024 15:21:12 +0800
Subject: [PATCH 20/24] ran npm i

---
 package-lock.json | 373 +++++++++++++++++++++++++++-------------------
 1 file changed, 217 insertions(+), 156 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index ddf0434e..92406f8a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3592,10 +3592,26 @@
       "integrity": "sha512-EsBwpc7hBUJWAsNPBmJy4hxWx12v6bshQsldrVmjxJoc3isbxhOrF2IcCpaXxfvq03NwkI7sbsOLXbYuqF/8Ww==",
       "dev": true
     },
+    "node_modules/@esbuild/aix-ppc64": {
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.20.2.tgz",
+      "integrity": "sha512-D+EBOJHXdNZcLJRBkhENNG8Wji2kgc9AZ9KiPr1JuZjsNtyHzrsfLRrY0tk2H2aoFu6RANO1y1iPPUCDYWkb5g==",
+      "cpu": [
+        "ppc64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "aix"
+      ],
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/@esbuild/android-arm": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.7.tgz",
-      "integrity": "sha512-YGSPnndkcLo4PmVl2tKatEn+0mlVMr3yEpOOT0BeMria87PhvoJb5dg5f5Ft9fbCVgtAz4pWMzZVgSEGpDAlww==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.20.2.tgz",
+      "integrity": "sha512-t98Ra6pw2VaDhqNWO2Oph2LXbz/EJcnLmKLGBJwEwXX/JAN83Fym1rU8l0JUWK6HkIbWONCSSatf4sf2NBRx/w==",
       "cpu": [
         "arm"
       ],
@@ -3609,9 +3625,9 @@
       }
     },
     "node_modules/@esbuild/android-arm64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.7.tgz",
-      "integrity": "sha512-YEDcw5IT7hW3sFKZBkCAQaOCJQLONVcD4bOyTXMZz5fr66pTHnAet46XAtbXAkJRfIn2YVhdC6R9g4xa27jQ1w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.20.2.tgz",
+      "integrity": "sha512-mRzjLacRtl/tWU0SvD8lUEwb61yP9cqQo6noDZP/O8VkwafSYwZ4yWy24kan8jE/IMERpYncRt2dw438LP3Xmg==",
       "cpu": [
         "arm64"
       ],
@@ -3625,9 +3641,9 @@
       }
     },
     "node_modules/@esbuild/android-x64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.7.tgz",
-      "integrity": "sha512-jhINx8DEjz68cChFvM72YzrqfwJuFbfvSxZAk4bebpngGfNNRm+zRl4rtT9oAX6N9b6gBcFaJHFew5Blf6CvUw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.20.2.tgz",
+      "integrity": "sha512-btzExgV+/lMGDDa194CcUQm53ncxzeBrWJcncOBxuC6ndBkKxnHdFJn86mCIgTELsooUmwUm9FkhSp5HYu00Rg==",
       "cpu": [
         "x64"
       ],
@@ -3641,9 +3657,9 @@
       }
     },
     "node_modules/@esbuild/darwin-arm64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.7.tgz",
-      "integrity": "sha512-dr81gbmWN//3ZnBIm6YNCl4p3pjnabg1/ZVOgz2fJoUO1a3mq9WQ/1iuEluMs7mCL+Zwv7AY5e3g1hjXqQZ9Iw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.20.2.tgz",
+      "integrity": "sha512-4J6IRT+10J3aJH3l1yzEg9y3wkTDgDk7TSDFX+wKFiWjqWp/iCfLIYzGyasx9l0SAFPT1HwSCR+0w/h1ES/MjA==",
       "cpu": [
         "arm64"
       ],
@@ -3657,9 +3673,9 @@
       }
     },
     "node_modules/@esbuild/darwin-x64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.7.tgz",
-      "integrity": "sha512-Lc0q5HouGlzQEwLkgEKnWcSazqr9l9OdV2HhVasWJzLKeOt0PLhHaUHuzb8s/UIya38DJDoUm74GToZ6Wc7NGQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.20.2.tgz",
+      "integrity": "sha512-tBcXp9KNphnNH0dfhv8KYkZhjc+H3XBkF5DKtswJblV7KlT9EI2+jeA8DgBjp908WEuYll6pF+UStUCfEpdysA==",
       "cpu": [
         "x64"
       ],
@@ -3673,9 +3689,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-arm64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.7.tgz",
-      "integrity": "sha512-+y2YsUr0CxDFF7GWiegWjGtTUF6gac2zFasfFkRJPkMAuMy9O7+2EH550VlqVdpEEchWMynkdhC9ZjtnMiHImQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.20.2.tgz",
+      "integrity": "sha512-d3qI41G4SuLiCGCFGUrKsSeTXyWG6yem1KcGZVS+3FYlYhtNoNgYrWcvkOoaqMhwXSMrZRl69ArHsGJ9mYdbbw==",
       "cpu": [
         "arm64"
       ],
@@ -3689,9 +3705,9 @@
       }
     },
     "node_modules/@esbuild/freebsd-x64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.7.tgz",
-      "integrity": "sha512-CdXOxIbIzPJmJhrpmJTLx+o35NoiKBIgOvmvT+jeSadYiWJn0vFKsl+0bSG/5lwjNHoIDEyMYc/GAPR9jxusTA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.20.2.tgz",
+      "integrity": "sha512-d+DipyvHRuqEeM5zDivKV1KuXn9WeRX6vqSqIDgwIfPQtwMP4jaDsQsDncjTDDsExT4lR/91OLjRo8bmC1e+Cw==",
       "cpu": [
         "x64"
       ],
@@ -3705,9 +3721,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.7.tgz",
-      "integrity": "sha512-Y+SCmWxsJOdQtjcBxoacn/pGW9HDZpwsoof0ttL+2vGcHokFlfqV666JpfLCSP2xLxFpF1lj7T3Ox3sr95YXww==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.20.2.tgz",
+      "integrity": "sha512-VhLPeR8HTMPccbuWWcEUD1Az68TqaTYyj6nfE4QByZIQEQVWBB8vup8PpR7y1QHL3CpcF6xd5WVBU/+SBEvGTg==",
       "cpu": [
         "arm"
       ],
@@ -3721,9 +3737,9 @@
       }
     },
     "node_modules/@esbuild/linux-arm64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.7.tgz",
-      "integrity": "sha512-inHqdOVCkUhHNvuQPT1oCB7cWz9qQ/Cz46xmVe0b7UXcuIJU3166aqSunsqkgSGMtUCWOZw3+KMwI6otINuC9g==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.20.2.tgz",
+      "integrity": "sha512-9pb6rBjGvTFNira2FLIWqDk/uaf42sSyLE8j1rnUpuzsODBq7FvpwHYZxQ/It/8b+QOS1RYfqgGFNLRI+qlq2A==",
       "cpu": [
         "arm64"
       ],
@@ -3737,9 +3753,9 @@
       }
     },
     "node_modules/@esbuild/linux-ia32": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.7.tgz",
-      "integrity": "sha512-2BbiL7nLS5ZO96bxTQkdO0euGZIUQEUXMTrqLxKUmk/Y5pmrWU84f+CMJpM8+EHaBPfFSPnomEaQiG/+Gmh61g==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.20.2.tgz",
+      "integrity": "sha512-o10utieEkNPFDZFQm9CoP7Tvb33UutoJqg3qKf1PWVeeJhJw0Q347PxMvBgVVFgouYLGIhFYG0UGdBumROyiig==",
       "cpu": [
         "ia32"
       ],
@@ -3753,9 +3769,9 @@
       }
     },
     "node_modules/@esbuild/linux-loong64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.7.tgz",
-      "integrity": "sha512-BVFQla72KXv3yyTFCQXF7MORvpTo4uTA8FVFgmwVrqbB/4DsBFWilUm1i2Oq6zN36DOZKSVUTb16jbjedhfSHw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.20.2.tgz",
+      "integrity": "sha512-PR7sp6R/UC4CFVomVINKJ80pMFlfDfMQMYynX7t1tNTeivQ6XdX5r2XovMmha/VjR1YN/HgHWsVcTRIMkymrgQ==",
       "cpu": [
         "loong64"
       ],
@@ -3769,9 +3785,9 @@
       }
     },
     "node_modules/@esbuild/linux-mips64el": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.7.tgz",
-      "integrity": "sha512-DzAYckIaK+pS31Q/rGpvUKu7M+5/t+jI+cdleDgUwbU7KdG2eC3SUbZHlo6Q4P1CfVKZ1lUERRFP8+q0ob9i2w==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.20.2.tgz",
+      "integrity": "sha512-4BlTqeutE/KnOiTG5Y6Sb/Hw6hsBOZapOVF6njAESHInhlQAghVVZL1ZpIctBOoTFbQyGW+LsVYZ8lSSB3wkjA==",
       "cpu": [
         "mips64el"
       ],
@@ -3785,9 +3801,9 @@
       }
     },
     "node_modules/@esbuild/linux-ppc64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.7.tgz",
-      "integrity": "sha512-JQ1p0SmUteNdUaaiRtyS59GkkfTW0Edo+e0O2sihnY4FoZLz5glpWUQEKMSzMhA430ctkylkS7+vn8ziuhUugQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.20.2.tgz",
+      "integrity": "sha512-rD3KsaDprDcfajSKdn25ooz5J5/fWBylaaXkuotBDGnMnDP1Uv5DLAN/45qfnf3JDYyJv/ytGHQaziHUdyzaAg==",
       "cpu": [
         "ppc64"
       ],
@@ -3801,9 +3817,9 @@
       }
     },
     "node_modules/@esbuild/linux-riscv64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.7.tgz",
-      "integrity": "sha512-xGwVJ7eGhkprY/nB7L7MXysHduqjpzUl40+XoYDGC4UPLbnG+gsyS1wQPJ9lFPcxYAaDXbdRXd1ACs9AE9lxuw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.20.2.tgz",
+      "integrity": "sha512-snwmBKacKmwTMmhLlz/3aH1Q9T8v45bKYGE3j26TsaOVtjIag4wLfWSiZykXzXuE1kbCE+zJRmwp+ZbIHinnVg==",
       "cpu": [
         "riscv64"
       ],
@@ -3817,9 +3833,9 @@
       }
     },
     "node_modules/@esbuild/linux-s390x": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.7.tgz",
-      "integrity": "sha512-U8Rhki5PVU0L0nvk+E8FjkV8r4Lh4hVEb9duR6Zl21eIEYEwXz8RScj4LZWA2i3V70V4UHVgiqMpszXvG0Yqhg==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.20.2.tgz",
+      "integrity": "sha512-wcWISOobRWNm3cezm5HOZcYz1sKoHLd8VL1dl309DiixxVFoFe/o8HnwuIwn6sXre88Nwj+VwZUvJf4AFxkyrQ==",
       "cpu": [
         "s390x"
       ],
@@ -3833,9 +3849,9 @@
       }
     },
     "node_modules/@esbuild/linux-x64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.7.tgz",
-      "integrity": "sha512-ZYZopyLhm4mcoZXjFt25itRlocKlcazDVkB4AhioiL9hOWhDldU9n38g62fhOI4Pth6vp+Mrd5rFKxD0/S+7aQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.20.2.tgz",
+      "integrity": "sha512-1MdwI6OOTsfQfek8sLwgyjOXAu+wKhLEoaOLTjbijk6E2WONYpH9ZU2mNtR+lZ2B4uwr+usqGuVfFT9tMtGvGw==",
       "cpu": [
         "x64"
       ],
@@ -3849,9 +3865,9 @@
       }
     },
     "node_modules/@esbuild/netbsd-x64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.7.tgz",
-      "integrity": "sha512-/yfjlsYmT1O3cum3J6cmGG16Fd5tqKMcg5D+sBYLaOQExheAJhqr8xOAEIuLo8JYkevmjM5zFD9rVs3VBcsjtQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-K8/DhBxcVQkzYc43yJXDSyjlFeHQJBiowJ0uVL6Tor3jGQfSGHNNJcWxNbOI8v5k82prYqzPuwkzHt3J1T1iZQ==",
       "cpu": [
         "x64"
       ],
@@ -3865,9 +3881,9 @@
       }
     },
     "node_modules/@esbuild/openbsd-x64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.7.tgz",
-      "integrity": "sha512-MYDFyV0EW1cTP46IgUJ38OnEY5TaXxjoDmwiTXPjezahQgZd+j3T55Ht8/Q9YXBM0+T9HJygrSRGV5QNF/YVDQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.20.2.tgz",
+      "integrity": "sha512-eMpKlV0SThJmmJgiVyN9jTPJ2VBPquf6Kt/nAoo6DgHAoN57K15ZghiHaMvqjCye/uU4X5u3YSMgVBI1h3vKrQ==",
       "cpu": [
         "x64"
       ],
@@ -3881,9 +3897,9 @@
       }
     },
     "node_modules/@esbuild/sunos-x64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.7.tgz",
-      "integrity": "sha512-JcPvgzf2NN/y6X3UUSqP6jSS06V0DZAV/8q0PjsZyGSXsIGcG110XsdmuWiHM+pno7/mJF6fjH5/vhUz/vA9fw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.20.2.tgz",
+      "integrity": "sha512-2UyFtRC6cXLyejf/YEld4Hajo7UHILetzE1vsRcGL3earZEW77JxrFjH4Ez2qaTiEfMgAXxfAZCm1fvM/G/o8w==",
       "cpu": [
         "x64"
       ],
@@ -3897,9 +3913,9 @@
       }
     },
     "node_modules/@esbuild/win32-arm64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.7.tgz",
-      "integrity": "sha512-ZA0KSYti5w5toax5FpmfcAgu3ZNJxYSRm0AW/Dao5up0YV1hDVof1NvwLomjEN+3/GMtaWDI+CIyJOMTRSTdMw==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.20.2.tgz",
+      "integrity": "sha512-GRibxoawM9ZCnDxnP3usoUDO9vUkpAxIIZ6GQI+IlVmr5kP3zUq+l17xELTHMWTWzjxa2guPNyrpq1GWmPvcGQ==",
       "cpu": [
         "arm64"
       ],
@@ -3913,9 +3929,9 @@
       }
     },
     "node_modules/@esbuild/win32-ia32": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.7.tgz",
-      "integrity": "sha512-CTOnijBKc5Jpk6/W9hQMMvJnsSYRYgveN6O75DTACCY18RA2nqka8dTZR+x/JqXCRiKk84+5+bRKXUSbbwsS0A==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.20.2.tgz",
+      "integrity": "sha512-HfLOfn9YWmkSKRQqovpnITazdtquEW8/SoHW7pWpuEeguaZI4QnCRW6b+oZTztdBnZOS2hqJ6im/D5cPzBTTlQ==",
       "cpu": [
         "ia32"
       ],
@@ -3929,9 +3945,9 @@
       }
     },
     "node_modules/@esbuild/win32-x64": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.7.tgz",
-      "integrity": "sha512-gRaP2sk6hc98N734luX4VpF318l3w+ofrtTu9j5L8EQXF+FzQKV6alCOHMVoJJHvVK/mGbwBXfOL1HETQu9IGQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.20.2.tgz",
+      "integrity": "sha512-N49X4lJX27+l9jbLKSqZ6bKNjzQvHaT8IIFUy+YIqmXQdjYCToGWwOItDrfby14c78aDd5NHQl29xingXfCdLQ==",
       "cpu": [
         "x64"
       ],
@@ -5126,9 +5142,9 @@
       }
     },
     "node_modules/@rollup/rollup-android-arm-eabi": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.5.2.tgz",
-      "integrity": "sha512-ee7BudTwwrglFYSc3UnqInDDjCLWHKrFmGNi4aK7jlEyg4CyPa1DCMrZfsN1O13YT76UFEqXz2CoN7BCGpUlJw==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.13.0.tgz",
+      "integrity": "sha512-5ZYPOuaAqEH/W3gYsRkxQATBW3Ii1MfaT4EQstTnLKViLi2gLSQmlmtTpGucNP3sXEpOiI5tdGhjdE111ekyEg==",
       "cpu": [
         "arm"
       ],
@@ -5139,9 +5155,9 @@
       ]
     },
     "node_modules/@rollup/rollup-android-arm64": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.5.2.tgz",
-      "integrity": "sha512-xOuhj9HHtn8128ir8veoQsBbAUBasDbHIBniYTEx02pAmu9EXL+ZjJqngnNEy6ZgZ4h1JwL33GMNu3yJL5Mzow==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.13.0.tgz",
+      "integrity": "sha512-BSbaCmn8ZadK3UAQdlauSvtaJjhlDEjS5hEVVIN3A4bbl3X+otyf/kOJV08bYiRxfejP3DXFzO2jz3G20107+Q==",
       "cpu": [
         "arm64"
       ],
@@ -5152,9 +5168,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-arm64": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.5.2.tgz",
-      "integrity": "sha512-NTGJWoL8bKyqyWFn9/RzSv4hQ4wTbaAv0lHHRwf4OnpiiP4P8W0jiXbm8Nc5BCXKmWAwuvJY82mcIU2TayC20g==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.13.0.tgz",
+      "integrity": "sha512-Ovf2evVaP6sW5Ut0GHyUSOqA6tVKfrTHddtmxGQc1CTQa1Cw3/KMCDEEICZBbyppcwnhMwcDce9ZRxdWRpVd6g==",
       "cpu": [
         "arm64"
       ],
@@ -5165,9 +5181,9 @@
       ]
     },
     "node_modules/@rollup/rollup-darwin-x64": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.5.2.tgz",
-      "integrity": "sha512-hlKqj7bpPvU15sZo4za14u185lpMzdwWLMc9raMqPK4wywt0wR23y1CaVQ4oAFXat3b5/gmRntyfpwWTKl+vvA==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.13.0.tgz",
+      "integrity": "sha512-U+Jcxm89UTK592vZ2J9st9ajRv/hrwHdnvyuJpa5A2ngGSVHypigidkQJP+YiGL6JODiUeMzkqQzbCG3At81Gg==",
       "cpu": [
         "x64"
       ],
@@ -5178,9 +5194,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm-gnueabihf": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.5.2.tgz",
-      "integrity": "sha512-7ZIZx8c3u+pfI0ohQsft/GywrXez0uR6dUP0JhBuCK3sFO5TfdLn/YApnVkvPxuTv3+YKPIZend9Mt7Cz6sS3Q==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.13.0.tgz",
+      "integrity": "sha512-8wZidaUJUTIR5T4vRS22VkSMOVooG0F4N+JSwQXWSRiC6yfEsFMLTYRFHvby5mFFuExHa/yAp9juSphQQJAijQ==",
       "cpu": [
         "arm"
       ],
@@ -5191,9 +5207,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-gnu": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.5.2.tgz",
-      "integrity": "sha512-7Pk/5mO11JW/cH+a8lL/i0ZxmRGrbpYqN0VwO2DHhU+SJWWOH2zE1RAcPaj8KqiwC8DCDIJOSxjV9+9lLb6aeA==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.13.0.tgz",
+      "integrity": "sha512-Iu0Kno1vrD7zHQDxOmvweqLkAzjxEVqNhUIXBsZ8hu8Oak7/5VTPrxOEZXYC1nmrBVJp0ZcL2E7lSuuOVaE3+w==",
       "cpu": [
         "arm64"
       ],
@@ -5204,9 +5220,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-arm64-musl": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.5.2.tgz",
-      "integrity": "sha512-KrRnuG5phJx756e62wxvWH2e+TK84MP2IVuPwfge+GBvWqIUfVzFRn09TKruuQBXzZp52Vyma7FjMDkwlA9xpg==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.13.0.tgz",
+      "integrity": "sha512-C31QrW47llgVyrRjIwiOwsHFcaIwmkKi3PCroQY5aVq4H0A5v/vVVAtFsI1nfBngtoRpeREvZOkIhmRwUKkAdw==",
       "cpu": [
         "arm64"
       ],
@@ -5216,10 +5232,23 @@
         "linux"
       ]
     },
+    "node_modules/@rollup/rollup-linux-riscv64-gnu": {
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.13.0.tgz",
+      "integrity": "sha512-Oq90dtMHvthFOPMl7pt7KmxzX7E71AfyIhh+cPhLY9oko97Zf2C9tt/XJD4RgxhaGeAraAXDtqxvKE1y/j35lA==",
+      "cpu": [
+        "riscv64"
+      ],
+      "dev": true,
+      "optional": true,
+      "os": [
+        "linux"
+      ]
+    },
     "node_modules/@rollup/rollup-linux-x64-gnu": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.5.2.tgz",
-      "integrity": "sha512-My+53GasPa2D2tU5dXiyHYwrELAUouSfkNlZ3bUKpI7btaztO5vpALEs3mvFjM7aKTvEbc7GQckuXeXIDKQ0fg==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.13.0.tgz",
+      "integrity": "sha512-yUD/8wMffnTKuiIsl6xU+4IA8UNhQ/f1sAnQebmE/lyQ8abjsVyDkyRkWop0kdMhKMprpNIhPmYlCxgHrPoXoA==",
       "cpu": [
         "x64"
       ],
@@ -5230,9 +5259,9 @@
       ]
     },
     "node_modules/@rollup/rollup-linux-x64-musl": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.5.2.tgz",
-      "integrity": "sha512-/f0Q6Sc+Vw54Ws6N8fxaEe4R7at3b8pFyv+O/F2VaQ4hODUJcRUcCBJh6zuqtgQQt7w845VTkGLFgWZkP3tUoQ==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.13.0.tgz",
+      "integrity": "sha512-9RyNqoFNdF0vu/qqX63fKotBh43fJQeYC98hCaf89DYQpv+xu0D8QFSOS0biA7cGuqJFOc1bJ+m2rhhsKcw1hw==",
       "cpu": [
         "x64"
       ],
@@ -5243,9 +5272,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-arm64-msvc": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.5.2.tgz",
-      "integrity": "sha512-NCKuuZWLht6zj7s6EIFef4BxCRX1GMr83S2W4HPCA0RnJ4iHE4FS1695q6Ewoa6A9nFjJe1//yUu0kgBU07Edw==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.13.0.tgz",
+      "integrity": "sha512-46ue8ymtm/5PUU6pCvjlic0z82qWkxv54GTJZgHrQUuZnVH+tvvSP0LsozIDsCBFO4VjJ13N68wqrKSeScUKdA==",
       "cpu": [
         "arm64"
       ],
@@ -5256,9 +5285,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-ia32-msvc": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.5.2.tgz",
-      "integrity": "sha512-J5zL3riR4AOyU/J3M/i4k/zZ8eP1yT+nTmAKztCXJtnI36jYH0eepvob22mAQ/kLwfsK2TB6dbyVY1F8c/0H5A==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.13.0.tgz",
+      "integrity": "sha512-P5/MqLdLSlqxbeuJ3YDeX37srC8mCflSyTrUsgbU1c/U9j6l2g2GiIdYaGD9QjdMQPMSgYm7hgg0551wHyIluw==",
       "cpu": [
         "ia32"
       ],
@@ -5269,9 +5298,9 @@
       ]
     },
     "node_modules/@rollup/rollup-win32-x64-msvc": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.5.2.tgz",
-      "integrity": "sha512-pL0RXRHuuGLhvs7ayX/SAHph1hrDPXOM5anyYUQXWJEENxw3nfHkzv8FfVlEVcLyKPAEgDRkd6RKZq2SMqS/yg==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.13.0.tgz",
+      "integrity": "sha512-UKXUQNbO3DOhzLRwHSpa0HnhhCgNODvfoPWv2FCXme8N/ANFfhIPMGuOT+QuKd16+B5yxZ0HdpNlqPvTMS1qfw==",
       "cpu": [
         "x64"
       ],
@@ -6220,8 +6249,7 @@
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
-      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==",
-      "peer": true
+      "integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
     },
     "node_modules/@types/express": {
       "version": "4.17.14",
@@ -8909,9 +8937,9 @@
       }
     },
     "node_modules/esbuild": {
-      "version": "0.19.7",
-      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.19.7.tgz",
-      "integrity": "sha512-6brbTZVqxhqgbpqBR5MzErImcpA0SQdoKOkcWK/U30HtQxnokIpG3TX2r0IJqbFUzqLjhU/zC1S5ndgakObVCQ==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.20.2.tgz",
+      "integrity": "sha512-WdOOppmUNU+IbZ0PaDiTst80zjnrOkyJNHoKupIcVyU8Lvla3Ugx94VzkQ32Ijqd7UhHJy75gNWDMUekcrSJ6g==",
       "dev": true,
       "hasInstallScript": true,
       "bin": {
@@ -8921,28 +8949,29 @@
         "node": ">=12"
       },
       "optionalDependencies": {
-        "@esbuild/android-arm": "0.19.7",
-        "@esbuild/android-arm64": "0.19.7",
-        "@esbuild/android-x64": "0.19.7",
-        "@esbuild/darwin-arm64": "0.19.7",
-        "@esbuild/darwin-x64": "0.19.7",
-        "@esbuild/freebsd-arm64": "0.19.7",
-        "@esbuild/freebsd-x64": "0.19.7",
-        "@esbuild/linux-arm": "0.19.7",
-        "@esbuild/linux-arm64": "0.19.7",
-        "@esbuild/linux-ia32": "0.19.7",
-        "@esbuild/linux-loong64": "0.19.7",
-        "@esbuild/linux-mips64el": "0.19.7",
-        "@esbuild/linux-ppc64": "0.19.7",
-        "@esbuild/linux-riscv64": "0.19.7",
-        "@esbuild/linux-s390x": "0.19.7",
-        "@esbuild/linux-x64": "0.19.7",
-        "@esbuild/netbsd-x64": "0.19.7",
-        "@esbuild/openbsd-x64": "0.19.7",
-        "@esbuild/sunos-x64": "0.19.7",
-        "@esbuild/win32-arm64": "0.19.7",
-        "@esbuild/win32-ia32": "0.19.7",
-        "@esbuild/win32-x64": "0.19.7"
+        "@esbuild/aix-ppc64": "0.20.2",
+        "@esbuild/android-arm": "0.20.2",
+        "@esbuild/android-arm64": "0.20.2",
+        "@esbuild/android-x64": "0.20.2",
+        "@esbuild/darwin-arm64": "0.20.2",
+        "@esbuild/darwin-x64": "0.20.2",
+        "@esbuild/freebsd-arm64": "0.20.2",
+        "@esbuild/freebsd-x64": "0.20.2",
+        "@esbuild/linux-arm": "0.20.2",
+        "@esbuild/linux-arm64": "0.20.2",
+        "@esbuild/linux-ia32": "0.20.2",
+        "@esbuild/linux-loong64": "0.20.2",
+        "@esbuild/linux-mips64el": "0.20.2",
+        "@esbuild/linux-ppc64": "0.20.2",
+        "@esbuild/linux-riscv64": "0.20.2",
+        "@esbuild/linux-s390x": "0.20.2",
+        "@esbuild/linux-x64": "0.20.2",
+        "@esbuild/netbsd-x64": "0.20.2",
+        "@esbuild/openbsd-x64": "0.20.2",
+        "@esbuild/sunos-x64": "0.20.2",
+        "@esbuild/win32-arm64": "0.20.2",
+        "@esbuild/win32-ia32": "0.20.2",
+        "@esbuild/win32-x64": "0.20.2"
       }
     },
     "node_modules/escalade": {
@@ -9742,9 +9771,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.4",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
-      "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -13839,10 +13868,13 @@
       }
     },
     "node_modules/rollup": {
-      "version": "4.5.2",
-      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.5.2.tgz",
-      "integrity": "sha512-CRK1uoROBfkcqrZKyaFcqCcZWNsvJ6yVYZkqTlRocZhO2s5yER6Z3f/QaYtO8RGyloPnmhwgzuPQpNGeK210xQ==",
+      "version": "4.13.0",
+      "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.13.0.tgz",
+      "integrity": "sha512-3YegKemjoQnYKmsBlOHfMLVPPA5xLkQ8MHLLSw/fBrFaVkEayL51DilPpNNLq1exr98F2B1TzrV0FUlN3gWRPg==",
       "dev": true,
+      "dependencies": {
+        "@types/estree": "1.0.5"
+      },
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -13851,18 +13883,19 @@
         "npm": ">=8.0.0"
       },
       "optionalDependencies": {
-        "@rollup/rollup-android-arm-eabi": "4.5.2",
-        "@rollup/rollup-android-arm64": "4.5.2",
-        "@rollup/rollup-darwin-arm64": "4.5.2",
-        "@rollup/rollup-darwin-x64": "4.5.2",
-        "@rollup/rollup-linux-arm-gnueabihf": "4.5.2",
-        "@rollup/rollup-linux-arm64-gnu": "4.5.2",
-        "@rollup/rollup-linux-arm64-musl": "4.5.2",
-        "@rollup/rollup-linux-x64-gnu": "4.5.2",
-        "@rollup/rollup-linux-x64-musl": "4.5.2",
-        "@rollup/rollup-win32-arm64-msvc": "4.5.2",
-        "@rollup/rollup-win32-ia32-msvc": "4.5.2",
-        "@rollup/rollup-win32-x64-msvc": "4.5.2",
+        "@rollup/rollup-android-arm-eabi": "4.13.0",
+        "@rollup/rollup-android-arm64": "4.13.0",
+        "@rollup/rollup-darwin-arm64": "4.13.0",
+        "@rollup/rollup-darwin-x64": "4.13.0",
+        "@rollup/rollup-linux-arm-gnueabihf": "4.13.0",
+        "@rollup/rollup-linux-arm64-gnu": "4.13.0",
+        "@rollup/rollup-linux-arm64-musl": "4.13.0",
+        "@rollup/rollup-linux-riscv64-gnu": "4.13.0",
+        "@rollup/rollup-linux-x64-gnu": "4.13.0",
+        "@rollup/rollup-linux-x64-musl": "4.13.0",
+        "@rollup/rollup-win32-arm64-msvc": "4.13.0",
+        "@rollup/rollup-win32-ia32-msvc": "4.13.0",
+        "@rollup/rollup-win32-x64-msvc": "4.13.0",
         "fsevents": "~2.3.2"
       }
     },
@@ -14247,9 +14280,9 @@
       }
     },
     "node_modules/source-map-js": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
-      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.0.tgz",
+      "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15601,14 +15634,14 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.2.tgz",
-      "integrity": "sha512-6CCq1CAJCNM1ya2ZZA7+jS2KgnhbzvxakmlIjN24cF/PXhRMzpM/z8QgsVJA/Dm5fWUWnVEsmtBoMhmerPxT0g==",
+      "version": "5.2.2",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.2.tgz",
+      "integrity": "sha512-FWZbz0oSdLq5snUI0b6sULbz58iXFXdvkZfZWR/F0ZJuKTSPO7v72QPXt6KqYeMFb0yytNp6kZosxJ96Nr/wDQ==",
       "dev": true,
       "dependencies": {
-        "esbuild": "^0.19.3",
-        "postcss": "^8.4.31",
-        "rollup": "^4.2.0"
+        "esbuild": "^0.20.1",
+        "postcss": "^8.4.36",
+        "rollup": "^4.13.0"
       },
       "bin": {
         "vite": "bin/vite.js"
@@ -15678,6 +15711,34 @@
         "url": "https://opencollective.com/vitest"
       }
     },
+    "node_modules/vite/node_modules/postcss": {
+      "version": "8.4.38",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
+      "integrity": "sha512-Wglpdk03BSfXkHoQa3b/oulrotAkwrlLDRSOb9D0bN86FdRyE9lppSp33aHNPgBa0JKCoB+drFLZkQoRRYae5A==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.7",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.2.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
     "node_modules/vitest": {
       "version": "0.34.6",
       "resolved": "https://registry.npmjs.org/vitest/-/vitest-0.34.6.tgz",

From 5cc3f2fd0b2604f2dc0a0235802a7c0d1fd45431 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Thu, 13 Jun 2024 17:09:26 +0800
Subject: [PATCH 21/24] modal is w-full on mobile, still doesn't take full
 screen as it uses <Dialog>

---
 package-lock.json                             | 145 ++++++++++--------
 src/components/EventBox/request-view.tsx      |  51 +++++-
 src/components/FormFields/field-radio.tsx     |   2 +-
 src/components/FormFields/field-text-area.tsx |   2 +-
 src/components/Forms/repair                   |   0
 src/components/Forms/repair-attempt-form.tsx  |  34 ++--
 src/pages/repair-request/index.tsx            |   2 +-
 7 files changed, 150 insertions(+), 86 deletions(-)
 delete mode 100644 src/components/Forms/repair

diff --git a/package-lock.json b/package-lock.json
index 148cd256..2ca55264 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4470,9 +4470,9 @@
       }
     },
     "node_modules/@next/env": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.0.3.tgz",
-      "integrity": "sha512-7xRqh9nMvP5xrW4/+L0jgRRX+HoNRGnfJpD+5Wq6/13j3dsdzxO3BCXn7D3hMqsDb+vjZnJq+vI7+EtgrYZTeA=="
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.4.tgz",
+      "integrity": "sha512-3EtkY5VDkuV2+lNmKlbkibIJxcO4oIHEhBWne6PaAp+76J9KoSsGvNikp6ivzAT8dhhBMYrm6op2pS1ApG0Hzg=="
     },
     "node_modules/@next/eslint-plugin-next": {
       "version": "14.0.3",
@@ -4484,9 +4484,9 @@
       }
     },
     "node_modules/@next/swc-darwin-arm64": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.0.3.tgz",
-      "integrity": "sha512-64JbSvi3nbbcEtyitNn2LEDS/hcleAFpHdykpcnrstITFlzFgB/bW0ER5/SJJwUPj+ZPY+z3e+1jAfcczRLVGw==",
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.4.tgz",
+      "integrity": "sha512-AH3mO4JlFUqsYcwFUHb1wAKlebHU/Hv2u2kb1pAuRanDZ7pD/A/KPD98RHZmwsJpdHQwfEc/06mgpSzwrJYnNg==",
       "cpu": [
         "arm64"
       ],
@@ -4499,9 +4499,9 @@
       }
     },
     "node_modules/@next/swc-darwin-x64": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.0.3.tgz",
-      "integrity": "sha512-RkTf+KbAD0SgYdVn1XzqE/+sIxYGB7NLMZRn9I4Z24afrhUpVJx6L8hsRnIwxz3ERE2NFURNliPjJ2QNfnWicQ==",
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.4.tgz",
+      "integrity": "sha512-QVadW73sWIO6E2VroyUjuAxhWLZWEpiFqHdZdoQ/AMpN9YWGuHV8t2rChr0ahy+irKX5mlDU7OY68k3n4tAZTg==",
       "cpu": [
         "x64"
       ],
@@ -4514,9 +4514,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-gnu": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.0.3.tgz",
-      "integrity": "sha512-3tBWGgz7M9RKLO6sPWC6c4pAw4geujSwQ7q7Si4d6bo0l6cLs4tmO+lnSwFp1Tm3lxwfMk0SgkJT7EdwYSJvcg==",
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.4.tgz",
+      "integrity": "sha512-KT6GUrb3oyCfcfJ+WliXuJnD6pCpZiosx2X3k66HLR+DMoilRb76LpWPGb4tZprawTtcnyrv75ElD6VncVamUQ==",
       "cpu": [
         "arm64"
       ],
@@ -4529,9 +4529,9 @@
       }
     },
     "node_modules/@next/swc-linux-arm64-musl": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.0.3.tgz",
-      "integrity": "sha512-v0v8Kb8j8T23jvVUWZeA2D8+izWspeyeDGNaT2/mTHWp7+37fiNfL8bmBWiOmeumXkacM/AB0XOUQvEbncSnHA==",
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.4.tgz",
+      "integrity": "sha512-Alv8/XGSs/ytwQcbCHwze1HmiIkIVhDHYLjczSVrf0Wi2MvKn/blt7+S6FJitj3yTlMwMxII1gIJ9WepI4aZ/A==",
       "cpu": [
         "arm64"
       ],
@@ -4544,9 +4544,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-gnu": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.0.3.tgz",
-      "integrity": "sha512-VM1aE1tJKLBwMGtyBR21yy+STfl0MapMQnNrXkxeyLs0GFv/kZqXS5Jw/TQ3TSUnbv0QPDf/X8sDXuMtSgG6eg==",
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.4.tgz",
+      "integrity": "sha512-ze0ShQDBPCqxLImzw4sCdfnB3lRmN3qGMB2GWDRlq5Wqy4G36pxtNOo2usu/Nm9+V2Rh/QQnrRc2l94kYFXO6Q==",
       "cpu": [
         "x64"
       ],
@@ -4559,9 +4559,9 @@
       }
     },
     "node_modules/@next/swc-linux-x64-musl": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.0.3.tgz",
-      "integrity": "sha512-64EnmKy18MYFL5CzLaSuUn561hbO1Gk16jM/KHznYP3iCIfF9e3yULtHaMy0D8zbHfxset9LTOv6cuYKJgcOxg==",
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.4.tgz",
+      "integrity": "sha512-8dwC0UJoc6fC7PX70csdaznVMNr16hQrTDAMPvLPloazlcaWfdPogq+UpZX6Drqb1OBlwowz8iG7WR0Tzk/diQ==",
       "cpu": [
         "x64"
       ],
@@ -4574,9 +4574,9 @@
       }
     },
     "node_modules/@next/swc-win32-arm64-msvc": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.0.3.tgz",
-      "integrity": "sha512-WRDp8QrmsL1bbGtsh5GqQ/KWulmrnMBgbnb+59qNTW1kVi1nG/2ndZLkcbs2GX7NpFLlToLRMWSQXmPzQm4tog==",
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.4.tgz",
+      "integrity": "sha512-jxyg67NbEWkDyvM+O8UDbPAyYRZqGLQDTPwvrBBeOSyVWW/jFQkQKQ70JDqDSYg1ZDdl+E3nkbFbq8xM8E9x8A==",
       "cpu": [
         "arm64"
       ],
@@ -4589,9 +4589,9 @@
       }
     },
     "node_modules/@next/swc-win32-ia32-msvc": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.0.3.tgz",
-      "integrity": "sha512-EKffQeqCrj+t6qFFhIFTRoqb2QwX1mU7iTOvMyLbYw3QtqTw9sMwjykyiMlZlrfm2a4fA84+/aeW+PMg1MjuTg==",
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.4.tgz",
+      "integrity": "sha512-twrmN753hjXRdcrZmZttb/m5xaCBFa48Dt3FbeEItpJArxriYDunWxJn+QFXdJ3hPkm4u7CKxncVvnmgQMY1ag==",
       "cpu": [
         "ia32"
       ],
@@ -4604,9 +4604,9 @@
       }
     },
     "node_modules/@next/swc-win32-x64-msvc": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.0.3.tgz",
-      "integrity": "sha512-ERhKPSJ1vQrPiwrs15Pjz/rvDHZmkmvbf/BjPN/UCOI++ODftT0GtasDPi0j+y6PPJi5HsXw+dpRaXUaw4vjuQ==",
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.4.tgz",
+      "integrity": "sha512-tkLrjBzqFTP8DVrAAQmZelEahfR9OxWpFR++vAI9FBhCiIxtwHwBHC23SBHCTURBtwB4kc/x44imVOnkKGNVGg==",
       "cpu": [
         "x64"
       ],
@@ -5981,11 +5981,17 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="
+    },
     "node_modules/@swc/helpers": {
-      "version": "0.5.2",
-      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
-      "integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
       "dependencies": {
+        "@swc/counter": "^0.1.3",
         "tslib": "^2.4.0"
       }
     },
@@ -7646,11 +7652,11 @@
       }
     },
     "node_modules/braces": {
-      "version": "3.0.2",
-      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz",
-      "integrity": "sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==",
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
       "dependencies": {
-        "fill-range": "^7.0.1"
+        "fill-range": "^7.1.1"
       },
       "engines": {
         "node": ">=8"
@@ -7834,9 +7840,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001564",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz",
-      "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==",
+      "version": "1.0.30001632",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001632.tgz",
+      "integrity": "sha512-udx3o7yHJfUxMLkGohMlVHCvFvWmirKh9JAH/d7WOLPetlH+LTL5cocMZ0t7oZx/mdlOWXti97xLZWc8uURRHg==",
       "funding": [
         {
           "type": "opencollective",
@@ -8735,9 +8741,9 @@
       }
     },
     "node_modules/ejs": {
-      "version": "3.1.9",
-      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.9.tgz",
-      "integrity": "sha512-rC+QVNMJWv+MtPgkt0y+0rVEIdbtxVADApW9JXrUVlzHetgcyczP/E7DJmWJ4fJCZF2cPcBk0laWO9ZHMG3DmQ==",
+      "version": "3.1.10",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.10.tgz",
+      "integrity": "sha512-UeJmFfOrAQS8OJWPZ4qtgHyWExa088/MtK5UEyoJGFH67cDEXkZSviOiKRCZ4Xij0zxI3JECgYs3oKx+AizQBA==",
       "dependencies": {
         "jake": "^10.8.5"
       },
@@ -9716,9 +9722,9 @@
       }
     },
     "node_modules/fill-range": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
-      "integrity": "sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
       "dependencies": {
         "to-regex-range": "^5.0.1"
       },
@@ -11786,17 +11792,17 @@
       "peer": true
     },
     "node_modules/next": {
-      "version": "14.0.3",
-      "resolved": "https://registry.npmjs.org/next/-/next-14.0.3.tgz",
-      "integrity": "sha512-AbYdRNfImBr3XGtvnwOxq8ekVCwbFTv/UJoLwmaX89nk9i051AEY4/HAWzU0YpaTDw8IofUpmuIlvzWF13jxIw==",
+      "version": "14.2.4",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.4.tgz",
+      "integrity": "sha512-R8/V7vugY+822rsQGQCjoLhMuC9oFj9SOi4Cl4b2wjDrseD0LRZ10W7R6Czo4w9ZznVSshKjuIomsRjvm9EKJQ==",
       "dependencies": {
-        "@next/env": "14.0.3",
-        "@swc/helpers": "0.5.2",
+        "@next/env": "14.2.4",
+        "@swc/helpers": "0.5.5",
         "busboy": "1.6.0",
-        "caniuse-lite": "^1.0.30001406",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
         "postcss": "8.4.31",
-        "styled-jsx": "5.1.1",
-        "watchpack": "2.4.0"
+        "styled-jsx": "5.1.1"
       },
       "bin": {
         "next": "dist/bin/next"
@@ -11805,18 +11811,19 @@
         "node": ">=18.17.0"
       },
       "optionalDependencies": {
-        "@next/swc-darwin-arm64": "14.0.3",
-        "@next/swc-darwin-x64": "14.0.3",
-        "@next/swc-linux-arm64-gnu": "14.0.3",
-        "@next/swc-linux-arm64-musl": "14.0.3",
-        "@next/swc-linux-x64-gnu": "14.0.3",
-        "@next/swc-linux-x64-musl": "14.0.3",
-        "@next/swc-win32-arm64-msvc": "14.0.3",
-        "@next/swc-win32-ia32-msvc": "14.0.3",
-        "@next/swc-win32-x64-msvc": "14.0.3"
+        "@next/swc-darwin-arm64": "14.2.4",
+        "@next/swc-darwin-x64": "14.2.4",
+        "@next/swc-linux-arm64-gnu": "14.2.4",
+        "@next/swc-linux-arm64-musl": "14.2.4",
+        "@next/swc-linux-x64-gnu": "14.2.4",
+        "@next/swc-linux-x64-musl": "14.2.4",
+        "@next/swc-win32-arm64-msvc": "14.2.4",
+        "@next/swc-win32-ia32-msvc": "14.2.4",
+        "@next/swc-win32-x64-msvc": "14.2.4"
       },
       "peerDependencies": {
         "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "sass": "^1.3.0"
@@ -11825,6 +11832,9 @@
         "@opentelemetry/api": {
           "optional": true
         },
+        "@playwright/test": {
+          "optional": true
+        },
         "sass": {
           "optional": true
         }
@@ -15670,13 +15680,13 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.2.2",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.2.tgz",
-      "integrity": "sha512-FWZbz0oSdLq5snUI0b6sULbz58iXFXdvkZfZWR/F0ZJuKTSPO7v72QPXt6KqYeMFb0yytNp6kZosxJ96Nr/wDQ==",
+      "version": "5.2.13",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.2.13.tgz",
+      "integrity": "sha512-SSq1noJfY9pR3I1TUENL3rQYDQCFqgD+lM6fTRAM8Nv6Lsg5hDLaXkjETVeBt+7vZBCMoibD+6IWnT2mJ+Zb/A==",
       "dev": true,
       "dependencies": {
         "esbuild": "^0.20.1",
-        "postcss": "^8.4.36",
+        "postcss": "^8.4.38",
         "rollup": "^4.13.0"
       },
       "bin": {
@@ -15878,6 +15888,7 @@
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
       "integrity": "sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==",
+      "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
diff --git a/src/components/EventBox/request-view.tsx b/src/components/EventBox/request-view.tsx
index bf6230be..4e0f2970 100644
--- a/src/components/EventBox/request-view.tsx
+++ b/src/components/EventBox/request-view.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useCallback, useEffect, useState } from "react";
 import { Disclosure, Transition } from "@headlessui/react";
 import { FaChevronDown } from "react-icons/fa6";
 
@@ -27,8 +27,49 @@ const RequestView = ({
   repairAttemptProps
 }: RequestProps) => {
   const [showRepairRequestModal, setShowRepairRequestModal] = useState(false);
-  function manageModal() {
-    setShowRepairRequestModal(true);
+  // function manageModal() {
+  //   setShowRepairRequestModal(true);
+  // }
+
+  const useWindowDimensions = () => {
+    const hasWindow = typeof window !== "undefined";
+
+    const getWindowDimensions = useCallback(() => {
+      const width = hasWindow ? window.innerWidth : null;
+      const height = hasWindow ? window.innerHeight : null;
+      return {
+        width,
+        height
+      };
+    }, [hasWindow]);
+
+    const [windowDimensions, setWindowDimensions] = useState(
+      getWindowDimensions()
+    );
+
+    useEffect(() => {
+      if (hasWindow) {
+        const handleResize = () => {
+          setWindowDimensions(getWindowDimensions());
+        };
+
+        window.addEventListener("resize", handleResize);
+        return () => window.removeEventListener("resize", handleResize);
+      }
+    }, [hasWindow, getWindowDimensions]);
+
+    return windowDimensions;
+  };
+
+  const { height, width } = useWindowDimensions();
+
+  function handleRepairClick() {
+    if (width > 640) {
+      setShowRepairRequestModal(true);
+    } else {
+      // this is for if we want to optionally render a seperate page on mobile view
+      setShowRepairRequestModal(false);
+    }
   }
   return (
     <div className="mx-5 mt-4 rounded-lg bg-slate-200 shadow-lg">
@@ -83,8 +124,8 @@ const RequestView = ({
                 <div className="flex justify-center mt-1">
                   <button
                     className="bg-primary-700 px-4 py-1 rounded-lg text-white text-md hover:bg-primary-600"
-                    onClick={manageModal}
-                    onKeyDown={manageModal}
+                    onClick={handleRepairClick}
+                    // onKeyDown={handleRepairClick}
                   >
                     Repair
                   </button>
diff --git a/src/components/FormFields/field-radio.tsx b/src/components/FormFields/field-radio.tsx
index 24ac3ade..4cdae8da 100644
--- a/src/components/FormFields/field-radio.tsx
+++ b/src/components/FormFields/field-radio.tsx
@@ -40,7 +40,7 @@ export default function FieldRadio<T extends FieldValues = FieldValues>({
   const baseStyle = `relative flex ${width} ${height} mb-2 items-center justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 border shadow-sm hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
-  const radioStyle = `my-auto flex ${axis} items-start gap-4 text-xs`;
+  const radioStyle = `m-auto flex ${axis} items-start gap-4 text-xs justify-center`;
 
   return (
     <div
diff --git a/src/components/FormFields/field-text-area.tsx b/src/components/FormFields/field-text-area.tsx
index 564456ef..91ec3ea8 100644
--- a/src/components/FormFields/field-text-area.tsx
+++ b/src/components/FormFields/field-text-area.tsx
@@ -35,7 +35,7 @@ export default function FieldTextArea<T extends FieldValues = FieldValues>({
 }: FormProps<T>) {
   const { field, fieldState } = useController(props);
 
-  const baseStyle = `relative flex ${height} ${width} justify-between rounded-lg bg-white px-3 py-2.5 text-sm font-medium text-gray-900 shadow-sm border border-grey-300 hover:shadow-grey-300`;
+  const baseStyle = `relative flex ${height} ${width} justify-between rounded-lg bg-white px-3 py-2.5 text-base font-medium text-gray-900 shadow-sm border border-grey-300 hover:shadow-grey-300`;
   const errorBorderStyle = `border-red-500`;
   const normalBorderStyle = `border-grey-300`;
   const textAreaStyle = `overflow-wrap:break-word pt-3 h-full w-full resize-none overflow-y-auto text-base placeholder:text-gray-500 placeholder:font-normal focus:outline-none focus:ring-0`;
diff --git a/src/components/Forms/repair b/src/components/Forms/repair
deleted file mode 100644
index e69de29b..00000000
diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index 22a1d8c1..16f571ad 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -19,7 +19,7 @@ export default function RepairAttempt({
   props: RepairRequestResponse;
 }) {
   const { mutate: updateRepairRequest } = useUpdateRepairRequest(
-    props.id as string
+    props.id.toString()
   );
 
   const { data: itemTypes } = useItemTypes();
@@ -56,10 +56,10 @@ export default function RepairAttempt({
 
   return (
     <main className="sm:mx-10 md:mx-16 mx-5 border-0 border-blue-500 h-fit">
-      <h4 className="flex justify-center text-xl max-[860px]:text-lg max-[640px]:text-base font-bold text-primary-500 pb-2">
+      <h4 className="flex justify-center text-xl max-[860px]:text-lg max-[640px]:text-base font-bold text-primary-500 pb-1">
         Repair Request ID: {props.id}
       </h4>
-      <h4 className="flex justify-center text-xl max-[860px]:text-lg max-[640px]:text-base font-bold text-primary-500 max-[860px]:pb-0 pb-2">
+      <h4 className="flex justify-center text-xl max-[860px]:text-lg max-[640px]:text-base font-bold text-primary-500">
         Requested By: {props.createdBy.firstName} {props.createdBy.lastName} on{" "}
         {formatDate(String(props.requestDate))}
       </h4>
@@ -68,8 +68,8 @@ export default function RepairAttempt({
         className="border-0 border-green-500"
       >
         {/* ID, Item */}
-        <div className="m-0 flex flex-col gap-6 sm:m-5 md:mt-5 lg:mt-10 xl:mx-14">
-          <div className="flex flex-col m-auto w-3/4 gap-2 max-[415px]:m-2 mt-2">
+        <div className="m-0 flex flex-col gap-5 sm:m-5 md:mt-5 lg:mt-10 xl:mx-14">
+          <div className="flex flex-col m-auto w-3/4 gap-2 max-[415px]:m-2">
             <FieldSingleSelect
               name="item"
               placeholder="eg. Computer, Bike..."
@@ -102,11 +102,11 @@ export default function RepairAttempt({
           </div>
 
           {/* Spare parts needed?, Part(s) needed */}
-          <div className="flex w-full flex-row justify-center gap-4 max-[415px]:gap-3">
+          <div className="flex w-full flex-row justify-center gap-3 max-[415px]:gap-3">
             {/* Time it took, Repaired? */}
             <FieldRadio
               name="isRepaired"
-              width="w-[33%]"
+              width="w-[33%] md:w-1/2"
               height="min-h-10 max-[960px]:min-h-20"
               axis="flex-col sm:flex-row"
               control={control}
@@ -116,24 +116,36 @@ export default function RepairAttempt({
             <FieldInput
               name="hoursWorked"
               label="Hours taken"
-              width="w-[33%]"
+              width="w-[33%] md:w-1/2"
               height="min-h-10"
               placeholder="Time in hours, e.g. 1.5..."
               control={control}
               rules={{ required: true }}
             />
+            {/* <FieldRadio
+              name="isSparePartsNeeded"
+              width="md:hidden w-[33%]"
+              height="min-h-10 max-[960px]:min-h-20"
+              axis="flex-col sm:flex-row"
+              labelYPosition="-top-10 sm:-top-3 md:-top-10"
+              control={control}
+              label="Spare parts needed?"
+              rules={{ required: true }}
+            /> */}
+          </div>
+          <div className="flex first-letter:flex flex-row justify-center">
             <FieldRadio
               name="isSparePartsNeeded"
-              width="w-[33%]"
+              width="w-full"
               height="min-h-10 max-[960px]:min-h-20"
               axis="flex-col sm:flex-row"
-              labelYPosition="-top-10 sm:-top-3 max-[450px]:-top-10"
+              labelYPosition="-top-5 sm:-top-3"
               control={control}
               label="Spare parts needed?"
               rules={{ required: true }}
             />
           </div>
-          <div className="flex flex-col gap-4 h-56">
+          <div className="flex flex-col gap-3 h-56">
             {watchIsSparePartsNeeded === "true" && (
               <FieldInput
                 name="spareParts"
diff --git a/src/pages/repair-request/index.tsx b/src/pages/repair-request/index.tsx
index a85d579e..5beaceb8 100644
--- a/src/pages/repair-request/index.tsx
+++ b/src/pages/repair-request/index.tsx
@@ -6,7 +6,7 @@ import { NextPageWithLayout } from "@/pages/_app";
 
 const RepairRequest: NextPageWithLayout = () => {
   return (
-    <div className="flex items-center justify-center p-4 bg-slate-100">
+    <div className="flex items-center justify-center p-4 bg-white">
       <div className="flex w-screen flex-col justify-center gap-4 md:w-3/6 lg:w-4/12">
         {/* Heading of the Page */}
         <h1 className="flex justify-center text-4xl font-bold pt-5 ">

From b3a81a10e9af674cfc56a85cb792f8b3d446e8b4 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Thu, 13 Jun 2024 17:21:13 +0800
Subject: [PATCH 22/24] fixed type errors hopefully

---
 src/components/EventBox/request-view.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/EventBox/request-view.tsx b/src/components/EventBox/request-view.tsx
index 4e0f2970..1e69b6c4 100644
--- a/src/components/EventBox/request-view.tsx
+++ b/src/components/EventBox/request-view.tsx
@@ -64,11 +64,11 @@ const RequestView = ({
   const { height, width } = useWindowDimensions();
 
   function handleRepairClick() {
-    if (width > 640) {
-      setShowRepairRequestModal(true);
-    } else {
+    if (width) {
+      width > 640
+        ? setShowRepairRequestModal(true)
+        : setShowRepairRequestModal(false);
       // this is for if we want to optionally render a seperate page on mobile view
-      setShowRepairRequestModal(false);
     }
   }
   return (

From 8a6ab6e192c542181a2e0cb5166093858ec1c0f4 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Thu, 13 Jun 2024 17:21:40 +0800
Subject: [PATCH 23/24] see prev

---
 src/components/Forms/repair-attempt-form.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Forms/repair-attempt-form.tsx b/src/components/Forms/repair-attempt-form.tsx
index 16f571ad..07291ec1 100644
--- a/src/components/Forms/repair-attempt-form.tsx
+++ b/src/components/Forms/repair-attempt-form.tsx
@@ -19,7 +19,7 @@ export default function RepairAttempt({
   props: RepairRequestResponse;
 }) {
   const { mutate: updateRepairRequest } = useUpdateRepairRequest(
-    props.id.toString()
+    props.id as unknown as string
   );
 
   const { data: itemTypes } = useItemTypes();

From b505da01dcde74ecc5582361c2a24f4c54118358 Mon Sep 17 00:00:00 2001
From: AarifLamat <106091223+AarifLamat@users.noreply.github.com>
Date: Mon, 4 Nov 2024 13:59:06 +0800
Subject: [PATCH 24/24] styling on navbar and landing page

---
 src/components/Modal/index.tsx      |  2 +-
 src/components/NavBar/account.tsx   |  6 +--
 src/components/NavBar/index.tsx     | 14 +++----
 src/components/NavBar/menu-list.tsx |  2 +-
 src/pages/index.tsx                 | 60 +++++++++++------------------
 5 files changed, 35 insertions(+), 49 deletions(-)

diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx
index 74d30aee..fe5a5f49 100644
--- a/src/components/Modal/index.tsx
+++ b/src/components/Modal/index.tsx
@@ -20,7 +20,7 @@ const Modal = ({
   width = "w-full sm:max-w-lg md:max-w-2xl",
   height = "h-fit",
   children,
-  crossWidthAndHeight = "w-6 h-6"
+  crossWidthAndHeight = "w-8 h-8"
 }: ModalProps) => {
   return (
     <>
diff --git a/src/components/NavBar/account.tsx b/src/components/NavBar/account.tsx
index 349e4eaa..5e4808d6 100644
--- a/src/components/NavBar/account.tsx
+++ b/src/components/NavBar/account.tsx
@@ -34,10 +34,10 @@ export default function Account({ isLoggedIn, onSignOut }: Readonly<Props>) {
           <div className="group relative flex flex-col items-center justify-center mx-4">
             <Link
               href="/repair-request"
-              className="flex items-center justify-center px-2 h-[40px] rounded-full bg-primary-700 text-white font-medium outline-none hover:bg-primary-800 transition-all duration-300 ease-in-out"
+              className="flex items-center justify-center px-4 h-12 rounded-full bg-primary-700 text-white font-medium outline-none hover:bg-primary-800 transition-all duration-300 ease-in-out"
             >
               {/* Adaptively visible text */}
-              <span className="hidden truncate md:hidden lg:flex placeholder:w-[160px] text-xs md:text-sm lg:text-sm transition-all duration-300 ease-in-out text-clip">
+              <span className="hidden truncate md:hidden lg:flex placeholder:w-[160px] text-xs md:text-sm lg:text-lg transition-all duration-300 ease-in-out text-clip">
                 New Repair Request +
               </span>
               {/* Icon with conditional visibility and size adjustment. Add onMouseEnter and onMouseLeave */}
@@ -63,7 +63,7 @@ export default function Account({ isLoggedIn, onSignOut }: Readonly<Props>) {
             showModal={ShowConfirmLogOut}
             setShowPopup={setShowConfirmLogOut}
           >
-            <div className="text-center">
+            <div className="flex justify-evenly items-center">
               <ActionButton onClick={onSignOut} label="Yes" />
               <ActionButton onClick={hideConfirmLogOut} label="No" />
             </div>
diff --git a/src/components/NavBar/index.tsx b/src/components/NavBar/index.tsx
index 3073e56d..c01d4da9 100644
--- a/src/components/NavBar/index.tsx
+++ b/src/components/NavBar/index.tsx
@@ -45,18 +45,18 @@ export default function NavBar() {
   }
 
   return (
-    <div className="sticky top-0 z-50 h-[60px] text-lg bg-white">
+    <div className="sticky flex items-center justify-between top-0 z-50 min-h-20 text-lg bg-white border-[1.5px] border-b-grey-300">
       {isLoaded && (
-        <div className="flex justify-between items-center mx-auto px-4">
+        <div className="flex justify-between items-center w-full px-4">
           {/* For larger screen (768px width or above) - horizontal nav bar */}
-          <div className="hidden md:flex items-center">
-            <Link href="/">
+          <div className="hidden md:flex items-center py-2">
+            <Link href="/" className="pr-10">
               <Image
                 src="/images/repair_lab_logo.png"
                 alt="Repair Labs Logo"
                 width={721}
                 height={831}
-                style={{ width: "50px", height: "50px" }}
+                style={{ width: "80px", height: "80px" }}
               />
             </Link>
             <MenuList items={menuItems} />
@@ -78,8 +78,8 @@ export default function NavBar() {
               <Image
                 src="/images/repair_lab_logo.png"
                 alt="Repair Labs Logo"
-                width={50}
-                height={50}
+                width={70}
+                height={70}
               />
             </Link>
           </div>
diff --git a/src/components/NavBar/menu-list.tsx b/src/components/NavBar/menu-list.tsx
index 9e210079..00fc23d2 100644
--- a/src/components/NavBar/menu-list.tsx
+++ b/src/components/NavBar/menu-list.tsx
@@ -17,7 +17,7 @@ export default function MenuList({ items }: Readonly<Props>) {
         {items.map((item) => (
           <Tab
             key={item.item}
-            className={`mx-1 sm:mr-2 md:mr-4 lg:mr-10 px-2 whitespace-nowrap font-medium text-black hover:text-primary-700 ${
+            className={`mx-1 sm:mr-2 md:mr-4 lg:mr-10 px-2 whitespace-nowrap font-medium text-lg text-black hover:text-primary-700 ${
               (router.asPath === "/" && item.path === "/") ||
               (item.path !== "/" && router.asPath.startsWith(item.path))
                 ? "text-primary-700"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 2ddf0465..4fe729b1 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -18,7 +18,7 @@ const Home: NextPageWithLayout = () => {
     <div>
       <div
         id="grid-bg-container"
-        className="relative w-full h-[25rem] sm:h-[30rem] md:h-[35rem] lg:h-[46rem] border-green-500 border-0"
+        className="relative w-full h-[25rem] sm:h-[30rem] md:h-[35rem] lg:h-[40rem] border-green-500 border-0"
       >
         <Image
           src="/images/big_hero_bg.jpg"
@@ -46,7 +46,7 @@ const Home: NextPageWithLayout = () => {
 
       <section
         id="big-green-area"
-        className="relative w-full min-h-[40rem] sm:min-h-[50rem] border-blue-500 border-0 bg-primary-600 bottom-[1px]"
+        className="relative w-full min-h-[40rem] border-blue-500 border-0 bg-primary-600 bottom-[1px]"
       >
         <div id="drill" className="absolute z-10 right-[6%] top-[10%] w-[10%]">
           <Drill />
@@ -60,7 +60,7 @@ const Home: NextPageWithLayout = () => {
 
         <div
           id="gear"
-          className="absolute z-10 -bottom-[40%] lg:-bottom-[50%] md:-bottom-[50%] md:w-1/2 right-[2%] lg:w-[40%] w-2/3 lg:block hidden"
+          className="absolute z-10 -bottom-[40%] lg:-bottom-[50%] md:-bottom-[50%] md:w-1/2 right-[2%] lg:w-[35%] w-2/3 lg:block hidden"
         >
           <Gear />
         </div>
@@ -87,7 +87,7 @@ const Home: NextPageWithLayout = () => {
               </svg>
             </div>
             <div className="sm:flex justify-center hidden">
-              <h3 className="lg:w-1/3 sm:w-2/3 w-full sm:pr-0 sm:pl-0 pr-5 pl-5 text-white pb-20 font-medium text-3xl ">
+              <h3 className="lg:w-1/3 sm:w-2/3 w-full sm:pr-0 sm:pl-0 pr-5 pl-5 italic text-white pb-20 font-medium text-3xl ">
                 It’s a collaborative and learning experience, a little antidote
                 to modern day throw-away mentality.
               </h3>
@@ -168,7 +168,7 @@ const Home: NextPageWithLayout = () => {
         <EmblaCarousel />
       </section>
 
-      <section className="min-h-[25rem] w-full bg-white flex flex-col justify-center">
+      <section className="min-h-[22rem] w-full bg-white flex flex-col justify-center">
         <div className="pb-6 text-center text-5xl font-extrabold text-primary-600">
           Submit item for Repair
         </div>
@@ -184,41 +184,27 @@ const Home: NextPageWithLayout = () => {
         </div>
       </section>
 
-      <section className="grey area relative bg-[#56727E] min-h-[18rem] w-full border-yellow-500 border-0 grid grid-cols-2">
-        <div className="flex justify-center items-center">
-          <div className="oval relative w-[70%] h-44 rounded-[50%] bg-primary-500 flex items-center justify-center col-span-1">
-            <h5 className="absolute z-10 text-white text-center text-2xl lg:text-white font-extrabold md:text-yellow-300 sm:text-red-300 mx-4">
-              Click on the icons to go to our socials!
-            </h5>
-          </div>
+      <section className="relative bg-[#56727E] min-h-[10rem] w-full flex flex-col items-center justify-center sm:flex-row sm:justify-between">
+        <div className="flex flex-col justify-center  text-left ">
+          <h5 className=" text-white text-2xl lg:text-white mx-4">
+            Contact us
+          </h5>
+          <p className="text-white text-bold sm:p-4 text-xl underline break-all w-full">
+            <a href="mailto:repairlab.perth@gmail.com">
+              Email: repairlab.perth@gmail.com
+            </a>
+          </p>
         </div>
-        <div className="col-span-1 border-red-500 border-0 m-auto w-3/4">
-          <div className=" border-blue-500 border-0 ">
-            <div className="flex justify-center w-full">
-              <p className="text-white text-bold sm:p-4 text-xl underline text-center break-all w-full">
-                <a href="mailto:repairlab.perth@gmail.com">
-                  Email: repairlab.perth@gmail.com
-                </a>
-              </p>
-            </div>
-            <div className="flex justify-evenly">
-              <a
-                href="https://www.instagram.com/repair_lab_perth"
-                target="_blank"
-              >
-                <FaInstagram className="fill-white w-[6rem] h-[6rem]" />
-              </a>
-              <a
-                href="https://www.facebook.com/RepairLabPerth/"
-                target="_blank"
-              >
-                <FaFacebook className="fill-white w-[6rem] h-[6rem] " />
-              </a>
-            </div>
-          </div>
+        <div className="flex md:gap-8 sm:pr-10 md:pr-20 justify-end items-center w-1/4">
+          <a href="https://www.instagram.com/repair_lab_perth" target="_blank">
+            <FaInstagram className="fill-white w-[3rem] h-[3rem]" />
+          </a>
+          <a href="https://www.facebook.com/RepairLabPerth/" target="_blank">
+            <FaFacebook className="fill-white w-[3rem] h-[3rem] " />
+          </a>
         </div>
       </section>
-      <div className="copyright bg-[#56727E] w-full h-10 text-white text-center">
+      <div className="flex items-center justify-center bg-[#3E5964] w-full h-10 text-white text-center">
         Copyright © All Rights Reserved
       </div>
     </div>