From f43bcec080e74cf42a2c7d3fa016e5c92e751cd9 Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Sun, 3 Mar 2024 22:17:36 -0500
Subject: [PATCH 01/11] cleanup

---
 components/Form/data.tsx       |  7 +++++
 components/Form/formSchemas.ts | 30 ++++++++++++++++++++
 components/Form/index.tsx      | 50 +++-------------------------------
 components/Form/types.ts       |  8 ++++++
 4 files changed, 49 insertions(+), 46 deletions(-)
 create mode 100644 components/Form/formSchemas.ts

diff --git a/components/Form/data.tsx b/components/Form/data.tsx
index e69de29..2a1ab07 100644
--- a/components/Form/data.tsx
+++ b/components/Form/data.tsx
@@ -0,0 +1,7 @@
+export const data = {
+    importNames: ["Import ABC", "Import DEF", "Import GHI"],
+    splitScheduleOptions: ["Yes", "No"],
+    clientOptions: ["Single", "Multiple"],
+    testingCenterOptions: ["testing center 1", "testing center 2", "testing center 3", "testing center 4"],
+    clientsOptions: ["client 1", "client 2", "client 3"],
+};
\ No newline at end of file
diff --git a/components/Form/formSchemas.ts b/components/Form/formSchemas.ts
new file mode 100644
index 0000000..e2070e6
--- /dev/null
+++ b/components/Form/formSchemas.ts
@@ -0,0 +1,30 @@
+import { FormValues } from "./types";
+import * as Yup from "yup";
+
+export const initialValues: FormValues = {
+    importName: '',
+    manifestFile: null,
+    splitSchedule: '',
+    client: '',
+    testingCenter: '',
+    toleranceWindow: false, 
+};
+
+export const validationSchema = Yup.object({
+    importName: Yup.string()
+        .required('Import name is required')
+        .oneOf(["Import ABC", "Import DEF", "Import GHI"], "Invalid Import Name"),
+    manifestFile: Yup.mixed()
+        .required('A file is required')
+        .nullable(), // Allows for null values
+    splitSchedule: Yup.string()
+        .required('This field is required')
+        .oneOf(["Yes", "No"], "Invalid Option"),
+    client: Yup.string()
+        .required('Client selection is required')
+        .oneOf(["Single", "Multiple"], "Invalid Client Type"),
+    testingCenter: Yup.string()
+        .required('Testing center selection is required'), // Assuming a selection is required
+    toleranceWindow: Yup.boolean()
+        .required('Tolerance window selection is required'), // Assuming this is a boolean represented by a toggle
+});
\ No newline at end of file
diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index 366b8db..f789491 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -4,7 +4,7 @@ import React, { useState } from "react";
 
 //Dependencies
 import { Formik, Form } from "formik";
-import * as Yup from "yup";
+
 import axios from "axios";
 
 //Input fields
@@ -15,51 +15,9 @@ import ToggleField from "./ToggleField";
 import StatusField from "./StatusField";
 import ClientField from "./ClientField";
 
-interface FormValues {
-    importName: string;
-    manifestFile: File | null;
-    splitSchedule: string;
-    client: string; 
-    testingCenter: string; 
-    toleranceWindow: boolean;
-}
-
-const initialValues: FormValues = {
-    importName: '',
-    manifestFile: null,
-    splitSchedule: '',
-    client: '',
-    testingCenter: '',
-    toleranceWindow: false, 
-};
-
-const validationSchema = Yup.object({
-    importName: Yup.string()
-        .required('Import name is required')
-        .oneOf(["Import ABC", "Import DEF", "Import GHI"], "Invalid Import Name"),
-    manifestFile: Yup.mixed()
-        .required('A file is required')
-        .nullable(), // Allows for null values, adjust based on your logic for file handling
-    splitSchedule: Yup.string()
-        .required('This field is required')
-        .oneOf(["Yes", "No"], "Invalid Option"),
-    client: Yup.string()
-        .required('Client selection is required')
-        .oneOf(["Single", "Multiple"], "Invalid Client Type"),
-    testingCenter: Yup.string()
-        .required('Testing center selection is required'), // Assuming a selection is required
-    toleranceWindow: Yup.boolean()
-        .required('Tolerance window selection is required'), // Assuming this is a boolean represented by a toggle
-});
-
-
-const data = {
-    importNames: ["Import ABC", "Import DEF", "Import GHI"],
-    splitScheduleOptions: ["Yes", "No"],
-    clientOptions: ["Single", "Multiple"],
-    testingCenterOptions: ["testing center 1", "testing center 2", "testing center 3", "testing center 4"],
-    clientsOptions: ["client 1", "client 2", "client 3"],
-};
+import { FormValues } from "./types";
+import { data } from "./data";
+import { initialValues, validationSchema } from "./formSchemas";
 
 const FormComponent: React.FC = () => {
     const [formSubmitted, setFormSubmitted] = useState(false);
diff --git a/components/Form/types.ts b/components/Form/types.ts
index e69de29..3793f42 100644
--- a/components/Form/types.ts
+++ b/components/Form/types.ts
@@ -0,0 +1,8 @@
+export interface FormValues {
+    importName: string;
+    manifestFile: File | null;
+    splitSchedule: string;
+    client: string; 
+    testingCenter: string; 
+    toleranceWindow: boolean;
+}
\ No newline at end of file

From 4adcee4af774f6048affd580940ed08b96a56d20 Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Sun, 3 Mar 2024 22:34:43 -0500
Subject: [PATCH 02/11] prettier, lint cleanup

---
 app/page.tsx                    |   4 +-
 components/Form/ClientField.tsx |  31 +++--
 components/Form/FileInput.tsx   |  66 +++++------
 components/Form/RadioGroup.tsx  |   9 +-
 components/Form/ToggleField.tsx |  28 ++---
 components/Form/data.tsx        |  12 +-
 components/Form/formSchemas.ts  |  44 +++----
 components/Form/index.tsx       | 199 +++++++++++++-------------------
 components/Form/types.ts        |  14 +--
 9 files changed, 176 insertions(+), 231 deletions(-)

diff --git a/app/page.tsx b/app/page.tsx
index 3726b4b..3f0fcf6 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,6 +1,6 @@
-import { Metadata } from "next"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faXmark } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { Metadata } from "next"
 import Form from "components/Form"
 
 export const metadata: Metadata = {
diff --git a/components/Form/ClientField.tsx b/components/Form/ClientField.tsx
index da2bc68..02ff447 100644
--- a/components/Form/ClientField.tsx
+++ b/components/Form/ClientField.tsx
@@ -1,13 +1,13 @@
+import { faClock } from "@fortawesome/free-regular-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import React from "react"
 import SelectInput from "./SelectInput"
 import { Utils } from "./Utils"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faClock } from "@fortawesome/free-regular-svg-icons"
 
 // Define a type for your props to improve type-checking
 type ClientFieldProps = {
-    testingCenters: string[]
-    clients: string[]
+  testingCenters: string[]
+  clients: string[]
 }
 
 // Destructure the props in the function parameter
@@ -15,20 +15,19 @@ const ClientField: React.FC<ClientFieldProps> = ({ testingCenters, clients }) =>
   return (
     <div className="flex flex-col gap-4">
       {testingCenters.map((testingCenter) => (
-        <div key={Utils.camelize(testingCenter)} className="flex gap-14 items-center">
+        <div key={Utils.camelize(testingCenter)} className="flex items-center gap-14">
           <span>{testingCenter}</span>
-          <div className="flex gap-2 items-center">
+          <div className="flex items-center gap-2">
             <SelectInput name={Utils.camelize(testingCenter)}>
-            <option value="">Select Client</option>
-            {clients.map((option: string) => (
-              <option key={option} value={option}>
-                {option}
-              </option>
-            ))}
-          </SelectInput>
-          <FontAwesomeIcon icon={faClock}/>
-        </div>
-          
+              <option value="">Select Client</option>
+              {clients.map((option: string) => (
+                <option key={option} value={option}>
+                  {option}
+                </option>
+              ))}
+            </SelectInput>
+            <FontAwesomeIcon icon={faClock} />
+          </div>
         </div>
       ))}
     </div>
diff --git a/components/Form/FileInput.tsx b/components/Form/FileInput.tsx
index 25b7a3b..daed5b0 100644
--- a/components/Form/FileInput.tsx
+++ b/components/Form/FileInput.tsx
@@ -1,44 +1,43 @@
-import { useField, useFormikContext } from "formik";
-import React, { useRef } from "react";
-import ErrorMessage from "./ErrorMessage";
-import RequiredAsterisk from "./RequiredAsterisk";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faFile } from "@fortawesome/free-solid-svg-icons";
-
+import { faFile } from "@fortawesome/free-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { useField, useFormikContext } from "formik"
+import React, { useRef } from "react"
+import ErrorMessage from "./ErrorMessage"
+import RequiredAsterisk from "./RequiredAsterisk"
 
 interface FileInputProps {
-  label: string;
-  required?: boolean;
-  name:string;
+  label: string
+  required?: boolean
+  name: string
 }
 
-const FileInput: React.FC<FileInputProps> = ({ label,  ...props }) => {
-  const { required } = props;
-  const [field, meta] = useField(props);
-  const { setFieldValue } = useFormikContext();
-  const fileInputRef = useRef<HTMLInputElement>(null);
+const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
+  const { required } = props
+  const [field, meta] = useField(props)
+  const { setFieldValue } = useFormikContext()
+  const fileInputRef = useRef<HTMLInputElement>(null)
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { files } = event.target;
-    const file = files ? files[0] : null;
-    setFieldValue(props.name, file); // Directly use setFieldValue to update Formik's state
-  };
+    const { files } = event.target
+    const file = files ? files[0] : null
+    setFieldValue(props.name, file) // Directly use setFieldValue to update Formik's state
+  }
 
   const handleClick = () => {
     if (fileInputRef.current) {
-      fileInputRef.current.click();
+      fileInputRef.current.click()
     }
-  };
+  }
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault();
-    event.stopPropagation();
-    const files = event.dataTransfer.files;
+    event.preventDefault()
+    event.stopPropagation()
+    const files = event.dataTransfer.files
     if (files && files.length > 0) {
-      const file = files[0];
-      setFieldValue(props.name, file);
+      const file = files[0]
+      setFieldValue(props.name, file)
     }
-  };
+  }
 
   return (
     <div className="mb-4">
@@ -53,15 +52,10 @@ const FileInput: React.FC<FileInputProps> = ({ label,  ...props }) => {
         </div>
         <button type="button">Upload Manifest</button>
       </div>
-      <input
-        type="file"
-        className="hidden"
-        ref={fileInputRef}
-        onChange={handleChange}
-      />
+      <input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} />
       <ErrorMessage touched={meta.touched} error={meta.error} />
     </div>
-  );
-};
+  )
+}
 
-export default FileInput;
+export default FileInput
diff --git a/components/Form/RadioGroup.tsx b/components/Form/RadioGroup.tsx
index 9886d69..a356049 100644
--- a/components/Form/RadioGroup.tsx
+++ b/components/Form/RadioGroup.tsx
@@ -1,8 +1,8 @@
+import * as RadioGroup from "@radix-ui/react-radio-group"
 import { useField } from "formik"
 import React from "react"
 import ErrorMessage from "./ErrorMessage"
 import RequiredAsterisk from "./RequiredAsterisk"
-import * as RadioGroup from "@radix-ui/react-radio-group"
 
 const RadioGroupField = ({
   name,
@@ -28,12 +28,7 @@ const RadioGroupField = ({
         {label}
       </label>
       <RequiredAsterisk required={required} />
-      <RadioGroup.Root
-        className="flex gap-3"
-        value={field.value}
-        onValueChange={handleChange}
-        aria-label={label}
-      >
+      <RadioGroup.Root className="flex gap-3" value={field.value} onValueChange={handleChange} aria-label={label}>
         {options.map((option) => (
           <div className="flex items-center" key={option}>
             <RadioGroup.Item
diff --git a/components/Form/ToggleField.tsx b/components/Form/ToggleField.tsx
index a387a2e..720eb24 100644
--- a/components/Form/ToggleField.tsx
+++ b/components/Form/ToggleField.tsx
@@ -1,18 +1,18 @@
-import { useField } from "formik";
-import React, { useState } from "react";
-import ErrorMessage from "./ErrorMessage";
-import RequiredAsterisk from "./RequiredAsterisk";
-import * as SwitchPrimitive from "@radix-ui/react-switch";
+import * as SwitchPrimitive from "@radix-ui/react-switch"
+import { useField } from "formik"
+import React, { useState } from "react"
+import ErrorMessage from "./ErrorMessage"
+import RequiredAsterisk from "./RequiredAsterisk"
 
 const ToggleField = ({
   children,
   ...props
 }: {
-  children: React.ReactNode;
+  children: React.ReactNode
 } & React.InputHTMLAttributes<HTMLInputElement>) => {
-  const { required, ...restProps } = props;
-  const [field, meta] = useField({ ...(restProps as { name: string }), type: "checkbox" });
-  const [checked, setChecked] = useState(false);
+  const { required, ...restProps } = props
+  const [field, meta] = useField({ ...(restProps as { name: string }), type: "checkbox" })
+  const [checked, setChecked] = useState(false)
 
   return (
     <div className="">
@@ -24,15 +24,15 @@ const ToggleField = ({
         className="relative h-[25px] w-[42px] cursor-default rounded-full bg-black shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
         checked={checked}
         onCheckedChange={(isChecked) => {
-          setChecked(isChecked);
-          field.onChange({ target: { name: field.name, value: isChecked } });
+          setChecked(isChecked)
+          field.onChange({ target: { name: field.name, value: isChecked } })
         }}
       >
         <SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
       </SwitchPrimitive.Root>
       <ErrorMessage touched={meta.touched} error={meta.error} />
     </div>
-  );
-};
+  )
+}
 
-export default ToggleField;
+export default ToggleField
diff --git a/components/Form/data.tsx b/components/Form/data.tsx
index 2a1ab07..e4d295b 100644
--- a/components/Form/data.tsx
+++ b/components/Form/data.tsx
@@ -1,7 +1,7 @@
 export const data = {
-    importNames: ["Import ABC", "Import DEF", "Import GHI"],
-    splitScheduleOptions: ["Yes", "No"],
-    clientOptions: ["Single", "Multiple"],
-    testingCenterOptions: ["testing center 1", "testing center 2", "testing center 3", "testing center 4"],
-    clientsOptions: ["client 1", "client 2", "client 3"],
-};
\ No newline at end of file
+  importNames: ["Import ABC", "Import DEF", "Import GHI"],
+  splitScheduleOptions: ["Yes", "No"],
+  clientOptions: ["Single", "Multiple"],
+  testingCenterOptions: ["testing center 1", "testing center 2", "testing center 3", "testing center 4"],
+  clientsOptions: ["client 1", "client 2", "client 3"],
+}
diff --git a/components/Form/formSchemas.ts b/components/Form/formSchemas.ts
index e2070e6..38ac1d7 100644
--- a/components/Form/formSchemas.ts
+++ b/components/Form/formSchemas.ts
@@ -1,30 +1,22 @@
-import { FormValues } from "./types";
-import * as Yup from "yup";
+import * as Yup from "yup"
+import { FormValues } from "./types"
 
 export const initialValues: FormValues = {
-    importName: '',
-    manifestFile: null,
-    splitSchedule: '',
-    client: '',
-    testingCenter: '',
-    toleranceWindow: false, 
-};
+  importName: "",
+  manifestFile: null,
+  splitSchedule: "",
+  client: "",
+  testingCenter: "",
+  toleranceWindow: false,
+}
 
 export const validationSchema = Yup.object({
-    importName: Yup.string()
-        .required('Import name is required')
-        .oneOf(["Import ABC", "Import DEF", "Import GHI"], "Invalid Import Name"),
-    manifestFile: Yup.mixed()
-        .required('A file is required')
-        .nullable(), // Allows for null values
-    splitSchedule: Yup.string()
-        .required('This field is required')
-        .oneOf(["Yes", "No"], "Invalid Option"),
-    client: Yup.string()
-        .required('Client selection is required')
-        .oneOf(["Single", "Multiple"], "Invalid Client Type"),
-    testingCenter: Yup.string()
-        .required('Testing center selection is required'), // Assuming a selection is required
-    toleranceWindow: Yup.boolean()
-        .required('Tolerance window selection is required'), // Assuming this is a boolean represented by a toggle
-});
\ No newline at end of file
+  importName: Yup.string()
+    .required("Import name is required")
+    .oneOf(["Import ABC", "Import DEF", "Import GHI"], "Invalid Import Name"),
+  manifestFile: Yup.mixed().required("A file is required").nullable(), // Allows for null values
+  splitSchedule: Yup.string().required("This field is required").oneOf(["Yes", "No"], "Invalid Option"),
+  client: Yup.string().required("Client selection is required").oneOf(["Single", "Multiple"], "Invalid Client Type"),
+  testingCenter: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
+  toleranceWindow: Yup.boolean().required("Tolerance window selection is required"), // Assuming this is a boolean represented by a toggle
+})
diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index f789491..561cabb 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -1,130 +1,95 @@
 "use client"
 
-import React, { useState } from "react";
+import axios from "axios"
+import { Form, Formik } from "formik"
+import React, { useState } from "react"
 
 //Dependencies
-import { Formik, Form } from "formik";
-
-import axios from "axios";
 
 //Input fields
-import SelectInput from "./SelectInput";
-import RadioGroup from "./RadioGroup";
-import FileInput from "./FileInput";
-import ToggleField from "./ToggleField";
-import StatusField from "./StatusField";
-import ClientField from "./ClientField";
+import ClientField from "./ClientField"
+import { data } from "./data"
+import FileInput from "./FileInput"
+import { initialValues, validationSchema } from "./formSchemas"
+import RadioGroup from "./RadioGroup"
+import SelectInput from "./SelectInput"
+import StatusField from "./StatusField"
+import ToggleField from "./ToggleField"
 
-import { FormValues } from "./types";
-import { data } from "./data";
-import { initialValues, validationSchema } from "./formSchemas";
+import { FormValues } from "./types"
 
 const FormComponent: React.FC = () => {
-    const [formSubmitted, setFormSubmitted] = useState(false);
+  const [formSubmitted, setFormSubmitted] = useState(false)
 
-    const submitForm = (values: FormValues) => {
-        return axios.post(
-            `/api/submitForm`,
-            {
-                submissionData: values,
-            },
-            {
-                // options
-                headers: {
-                    "Content-Type": "application/json"
-                }
-            }
-        );
-    };
-    
-    return (
-        <Formik
-        initialValues={initialValues}
-        validationSchema={validationSchema}
-        onSubmit={async (values, { setSubmitting }) => {
-            try {
-                console.log(values);
-                await submitForm(values);
-                setFormSubmitted(true);
-            } catch (error) {
-                console.error("Error submitting form:", error);
-            } finally {
-                setSubmitting(false);
-            }
-        }}
-    >
-        {formik => (
-            <Form>
-                <div className="flex flex-col lg:flex-row gap-4 lg:gap-16">
-                    <div className="flex flex-col grow lg:max-w-[500px]">
-                        <SelectInput
-                            key="importName"
-                            name="importName"
-                            label="Select Import Name:"
-                            required
-                        >
-                            <option value="">Select Import Name:</option>
-                            {data.importNames.map(option => (
-                                <option key={option} value={option}>
-                                    {option}
-                                </option>
-                            ))}
-                        </SelectInput>
-                        <FileInput
-                            label="Select a manifest that you'd like to import"
-                            name="manifestFile"
-                            required
-                        />
-                          <StatusField 
-                          label="Elapse Data Checking:" 
-                          statusLabel="No Elapsed Dates!" 
-                          statusColor="text-green-500"  
-                          />
-                        <ToggleField
-                            key="toleranceWindow"
-                            name="toleranceWindow"
-                            required={true}
-                        >Tolerance Window:</ToggleField>
-                    </div>
-                    <div className="flex flex-col grow lg:max-w-[350px]">
-                        <RadioGroup
-                            key="splitSchedule"
-                            name="splitSchedule"
-                            label="Split schedule using social distancing?"
-                            options={data.splitScheduleOptions}
-                            required={true}
-                        />
-                        <StatusField 
-                          label="Location Checking:" 
-                          statusLabel="All Available!" 
-                          statusColor="text-green-500"  
-                          />
-                        <RadioGroup
-                            key="client"
-                            name="client"
-                            label="Client"
-                            options={data.clientOptions}
-                            required={true}
-                        />
-                        <ClientField
-                            testingCenters={data.testingCenterOptions}
-                            clients={data.clientsOptions}
-                        />
-                    </div>
-                </div>
-                <button
-                    className="mx-auto mt-4"
-                    type="submit"
-                    disabled={formik.isSubmitting}
-                >
-                    Submit
-                </button>
-            </Form>
-        )}
-    </Formik>
-    
+  const submitForm = (values: FormValues) => {
+    return axios.post(
+      `/api/submitForm`,
+      {
+        submissionData: values,
+      },
+      {
+        // options
+        headers: {
+          "Content-Type": "application/json",
+        },
+      }
     )
+  }
+
+  return (
+    <Formik
+      initialValues={initialValues}
+      validationSchema={validationSchema}
+      onSubmit={async (values, { setSubmitting }) => {
+        try {
+          console.log(values)
+          await submitForm(values)
+          setFormSubmitted(true)
+        } catch (error) {
+          console.error("Error submitting form:", error)
+        } finally {
+          setSubmitting(false)
+        }
+      }}
+    >
+      {(formik) => (
+        <Form>
+          <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
+            <div className="flex grow flex-col lg:max-w-[500px]">
+              <SelectInput key="importName" name="importName" label="Select Import Name:" required>
+                <option value="">Select Import Name:</option>
+                {data.importNames.map((option) => (
+                  <option key={option} value={option}>
+                    {option}
+                  </option>
+                ))}
+              </SelectInput>
+              <FileInput label="Select a manifest that you'd like to import" name="manifestFile" required />
+              <StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" />
+              <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
+                Tolerance Window:
+              </ToggleField>
+            </div>
+            <div className="flex grow flex-col lg:max-w-[350px]">
+              <RadioGroup
+                key="splitSchedule"
+                name="splitSchedule"
+                label="Split schedule using social distancing?"
+                options={data.splitScheduleOptions}
+                required={true}
+              />
+              <StatusField label="Location Checking:" statusLabel="All Available!" statusColor="text-green-500" />
+              <RadioGroup key="client" name="client" label="Client" options={data.clientOptions} required={true} />
+              <ClientField testingCenters={data.testingCenterOptions} clients={data.clientsOptions} />
+            </div>
+          </div>
+          <button className="mx-auto mt-4" type="submit" disabled={formik.isSubmitting}>
+            Submit
+          </button>
+        </Form>
+      )}
+    </Formik>
+  )
 }
 
-export default FormComponent;
-
+export default FormComponent
diff --git a/components/Form/types.ts b/components/Form/types.ts
index 3793f42..fea6431 100644
--- a/components/Form/types.ts
+++ b/components/Form/types.ts
@@ -1,8 +1,8 @@
 export interface FormValues {
-    importName: string;
-    manifestFile: File | null;
-    splitSchedule: string;
-    client: string; 
-    testingCenter: string; 
-    toleranceWindow: boolean;
-}
\ No newline at end of file
+  importName: string
+  manifestFile: File | null
+  splitSchedule: string
+  client: string
+  testingCenter: string
+  toleranceWindow: boolean
+}

From 9f250364e4deaefb39f34322bdcb9da226acdfe2 Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Sun, 3 Mar 2024 23:32:46 -0500
Subject: [PATCH 03/11] work in progress

---
 components/Form/FileInput.tsx  | 10 ++--
 components/Form/formSchemas.ts | 10 +++-
 components/Form/index.tsx      | 90 ++++++++++++++++++++--------------
 components/Form/types.ts       | 16 +++---
 4 files changed, 76 insertions(+), 50 deletions(-)

diff --git a/components/Form/FileInput.tsx b/components/Form/FileInput.tsx
index daed5b0..7a79146 100644
--- a/components/Form/FileInput.tsx
+++ b/components/Form/FileInput.tsx
@@ -45,12 +45,12 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
         {label}
         <RequiredAsterisk required={required} />
       </label>
-      <div className="drop-area" onClick={handleClick} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
-        <div>
-          <FontAwesomeIcon icon={faFile} />
-          <h4>Drag & Drop Here or Browse</h4>
+      <div className="border border-grey-500 rounded-md p-4 flex flex-col items-center gap-4" onClick={handleClick} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
+        <div className="border border-grey-500 border-dashed flex flex-col gap-4 items-center justify-center rounded-md py-9 w-full">
+          <FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
+          <h4 className="">Drag & Drop Here or <span className="font-bold">Browse</span></h4>
         </div>
-        <button type="button">Upload Manifest</button>
+        <button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button>
       </div>
       <input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} />
       <ErrorMessage touched={meta.touched} error={meta.error} />
diff --git a/components/Form/formSchemas.ts b/components/Form/formSchemas.ts
index 38ac1d7..367c036 100644
--- a/components/Form/formSchemas.ts
+++ b/components/Form/formSchemas.ts
@@ -6,7 +6,10 @@ export const initialValues: FormValues = {
   manifestFile: null,
   splitSchedule: "",
   client: "",
-  testingCenter: "",
+  testingCenter1: "",
+  testingCenter2: "",
+  testingCenter3: "",
+  testingCenter4: "",
   toleranceWindow: false,
 }
 
@@ -17,6 +20,9 @@ export const validationSchema = Yup.object({
   manifestFile: Yup.mixed().required("A file is required").nullable(), // Allows for null values
   splitSchedule: Yup.string().required("This field is required").oneOf(["Yes", "No"], "Invalid Option"),
   client: Yup.string().required("Client selection is required").oneOf(["Single", "Multiple"], "Invalid Client Type"),
-  testingCenter: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
+  testingCenter1: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
+  testingCenter2: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
+  testingCenter3: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
+  testingCenter4: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
   toleranceWindow: Yup.boolean().required("Tolerance window selection is required"), // Assuming this is a boolean represented by a toggle
 })
diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index 561cabb..e4b5397 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -37,13 +37,14 @@ const FormComponent: React.FC = () => {
   }
 
   return (
+    <>
     <Formik
       initialValues={initialValues}
       validationSchema={validationSchema}
       onSubmit={async (values, { setSubmitting }) => {
+        console.log("Form values:", values); // Log form values on submit
         try {
-          console.log(values)
-          await submitForm(values)
+          //await submitForm(values)
           setFormSubmitted(true)
         } catch (error) {
           console.error("Error submitting form:", error)
@@ -52,43 +53,58 @@ const FormComponent: React.FC = () => {
         }
       }}
     >
-      {(formik) => (
-        <Form>
-          <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
-            <div className="flex grow flex-col lg:max-w-[500px]">
-              <SelectInput key="importName" name="importName" label="Select Import Name:" required>
-                <option value="">Select Import Name:</option>
-                {data.importNames.map((option) => (
-                  <option key={option} value={option}>
-                    {option}
-                  </option>
-                ))}
-              </SelectInput>
-              <FileInput label="Select a manifest that you'd like to import" name="manifestFile" required />
-              <StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" />
-              <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
-                Tolerance Window:
-              </ToggleField>
+      {(formik) => {
+        console.log("Form errors:", formik.errors); // Log form errors on every render
+        console.log("Form values:", formik.values); // Log current form values on every render
+
+        return (
+          <Form>
+            <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
+              <div className="flex grow flex-col lg:max-w-[500px]">
+                <SelectInput key="importName" name="importName" label="Select Import Name:" required>
+                  <option value="">Select Import Name:</option>
+                  {data.importNames.map((option) => (
+                    <option key={option} value={option}>
+                      {option}
+                    </option>
+                  ))}
+                </SelectInput>
+                {/* <FileInput label="Select a manifest that you'd like to import" name="manifestFile" required /> */}
+                <StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" />
+                <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
+                  Tolerance Window:
+                </ToggleField>
+              </div>
+              <div className="flex grow flex-col lg:max-w-[350px]">
+                <RadioGroup
+                  key="splitSchedule"
+                  name="splitSchedule"
+                  label="Split schedule using social distancing?"
+                  options={data.splitScheduleOptions}
+                  required={true}
+                />
+                <StatusField label="Location Checking:" statusLabel="All Available!" statusColor="text-green-500" />
+                <RadioGroup key="client" name="client" label="Client" options={data.clientOptions} required={true} />
+                <ClientField testingCenters={data.testingCenterOptions} clients={data.clientsOptions} />
+              </div>
             </div>
-            <div className="flex grow flex-col lg:max-w-[350px]">
-              <RadioGroup
-                key="splitSchedule"
-                name="splitSchedule"
-                label="Split schedule using social distancing?"
-                options={data.splitScheduleOptions}
-                required={true}
-              />
-              <StatusField label="Location Checking:" statusLabel="All Available!" statusColor="text-green-500" />
-              <RadioGroup key="client" name="client" label="Client" options={data.clientOptions} required={true} />
-              <ClientField testingCenters={data.testingCenterOptions} clients={data.clientsOptions} />
-            </div>
-          </div>
-          <button className="mx-auto mt-4" type="submit" disabled={formik.isSubmitting}>
-            Submit
-          </button>
-        </Form>
-      )}
+            <button
+                className="mx-auto mt-4 flex items-center justify-center rounded-full py-3 px-9 text-center text-md font-bold shadow-xs transition-all bg-blue-950 text-white"
+                type="submit"
+                disabled={formik.isSubmitting}
+            >
+                Continue Import
+                {formik.isSubmitting && <div className="ml-3 h-5 w-5 animate-spin rounded-full border-x-2 border-b-2"></div>}
+            </button>
+          </Form>
+        )
+      }
+        
+      }
     </Formik>
+    {formSubmitted && <div>Success</div>}
+    </>
+    
   )
 }
 
diff --git a/components/Form/types.ts b/components/Form/types.ts
index fea6431..e7d0660 100644
--- a/components/Form/types.ts
+++ b/components/Form/types.ts
@@ -1,8 +1,12 @@
 export interface FormValues {
-  importName: string
-  manifestFile: File | null
-  splitSchedule: string
-  client: string
-  testingCenter: string
-  toleranceWindow: boolean
+  importName: string;
+  manifestFile: File | null;
+  splitSchedule: string;
+  client: string;
+  testingCenter1: string;
+  testingCenter2: string;
+  testingCenter3: string;
+  testingCenter4: string;
+  toleranceWindow: boolean;
 }
+

From 59a7bcc224bebce8f9c91664570484296ffd00a7 Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Mon, 4 Mar 2024 07:53:06 -0500
Subject: [PATCH 04/11] file upload progress

---
 components/Form/FileInput.tsx | 118 +++++++++++++++++++++++++---------
 components/Form/index.tsx     |   2 +-
 2 files changed, 89 insertions(+), 31 deletions(-)

diff --git a/components/Form/FileInput.tsx b/components/Form/FileInput.tsx
index 7a79146..89eeba3 100644
--- a/components/Form/FileInput.tsx
+++ b/components/Form/FileInput.tsx
@@ -1,43 +1,81 @@
-import { faFile } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { useField, useFormikContext } from "formik"
-import React, { useRef } from "react"
-import ErrorMessage from "./ErrorMessage"
-import RequiredAsterisk from "./RequiredAsterisk"
+import { faFile } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { useField, useFormikContext } from "formik";
+import React, { useRef, useState } from "react";
+import ErrorMessage from "./ErrorMessage";
+import RequiredAsterisk from "./RequiredAsterisk";
 
 interface FileInputProps {
-  label: string
-  required?: boolean
-  name: string
+  label: string;
+  required?: boolean;
+  name: string;
 }
 
 const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
-  const { required } = props
-  const [field, meta] = useField(props)
-  const { setFieldValue } = useFormikContext()
-  const fileInputRef = useRef<HTMLInputElement>(null)
+  const { required } = props;
+  const [field, meta] = useField(props);
+  const { setFieldValue } = useFormikContext();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [dragging, setDragging] = useState(false); // State to handle drag styling
+  const [fileInfo, setFileInfo] = useState<{ name: string; size: number } | null>(null); // State to store file info
+  const [uploadProgress, setUploadProgress] = useState(0);
+
+  const simulateUpload = () => {
+    let progress = 0;
+    const interval = setInterval(() => {
+      progress += 10;
+      setUploadProgress(progress);
+      if (progress >= 100) {
+        clearInterval(interval);
+      }
+    }, 20); // Adjust time interval to control speed of the animation
+  };
 
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const { files } = event.target
-    const file = files ? files[0] : null
-    setFieldValue(props.name, file) // Directly use setFieldValue to update Formik's state
-  }
+    const { files } = event.target;
+    const file = files ? files[0] : null;
+    setFieldValue(props.name, file); // Update Formik's state
+    if (file) {
+      setFileInfo({ name: file.name, size: file.size });
+      setUploadProgress(0); // Reset progress
+      simulateUpload(); // Simulate upload process
+    }
+  };
 
   const handleClick = () => {
     if (fileInputRef.current) {
-      fileInputRef.current.click()
+      fileInputRef.current.click();
     }
-  }
+  };
 
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
-    event.preventDefault()
-    event.stopPropagation()
-    const files = event.dataTransfer.files
+    event.preventDefault();
+    event.stopPropagation();
+    setDragging(false); // Reset drag state
+    const files = event.dataTransfer.files;
     if (files && files.length > 0) {
-      const file = files[0]
-      setFieldValue(props.name, file)
+        const file = files[0];
+        if (file) {
+          setFileInfo({ name: file.name, size: file.size });
+          setFieldValue(props.name, file);
+        }
+        setUploadProgress(0); // Reset progress
+        simulateUpload(); // Simulate upload process
     }
-  }
+};
+
+
+  const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    if (!dragging) {
+      setDragging(true);
+    }
+  };
+
+  const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
+    event.preventDefault();
+    setDragging(false);
+  };
 
   return (
     <div className="mb-4">
@@ -45,17 +83,37 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
         {label}
         <RequiredAsterisk required={required} />
       </label>
-      <div className="border border-grey-500 rounded-md p-4 flex flex-col items-center gap-4" onClick={handleClick} onDrop={handleDrop} onDragOver={(e) => e.preventDefault()}>
+      <div
+        className={`border border-grey-500 rounded-md p-4 flex flex-col items-center gap-4 ${dragging ? "bg-blue-100" : "bg-white"} cursor-pointer`}
+        onClick={handleClick}
+        onDrop={handleDrop}
+        onDragOver={handleDragOver}
+        onDragLeave={handleDragLeave}
+      >
         <div className="border border-grey-500 border-dashed flex flex-col gap-4 items-center justify-center rounded-md py-9 w-full">
           <FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
-          <h4 className="">Drag & Drop Here or <span className="font-bold">Browse</span></h4>
+          <h4>Drag & Drop Here or <span className="font-bold">Browse</span></h4>
         </div>
         <button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button>
       </div>
       <input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} />
+      {fileInfo && (
+          <div className="flex gap-4 p-4 items-center">
+            <FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
+            <div className="grow">
+              <div className="flex justify-between text-sm text-slate-500">
+                <p className="text-sm">{fileInfo.name}</p>
+                <p className="text-xs">{Math.round(fileInfo.size / 1024)} KB</p>
+              </div>
+              <div className="w-full bg-gray-200 rounded-full h-1 dark:bg-gray-700">
+                <div className="bg-amber-500 h-1 rounded-full" style={{ width: `${uploadProgress}%` }}></div>
+              </div>
+            </div>
+          </div>
+        )}
       <ErrorMessage touched={meta.touched} error={meta.error} />
     </div>
-  )
-}
+  );
+};
 
-export default FileInput
+export default FileInput;
diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index e4b5397..ac41a0a 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -69,7 +69,7 @@ const FormComponent: React.FC = () => {
                     </option>
                   ))}
                 </SelectInput>
-                {/* <FileInput label="Select a manifest that you'd like to import" name="manifestFile" required /> */}
+                <FileInput label="Select a manifest that you'd like to import" name="manifestFile" required />
                 <StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" />
                 <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
                   Tolerance Window:

From fadaa0fe4ad86340d6ecac058ac2188cf569cff5 Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Mon, 4 Mar 2024 20:50:32 -0500
Subject: [PATCH 05/11] styling

---
 app/page.tsx                         |  2 +-
 components/Form/ErrorMessage.tsx     |  2 +-
 components/Form/FileInput.tsx        | 24 ++++++++++++----
 components/Form/RadioGroup.tsx       | 17 +++++++----
 components/Form/RequiredAsterisk.tsx |  2 +-
 components/Form/SelectInput.tsx      | 13 ++++++---
 components/Form/Separator.tsx        |  9 ++++++
 components/Form/StatusField.tsx      |  8 ++++--
 components/Form/ToggleField.tsx      | 42 ++++++++++++++++++----------
 components/Form/formSchemas.ts       |  4 ---
 components/Form/index.tsx            | 19 +++++++------
 11 files changed, 94 insertions(+), 48 deletions(-)
 create mode 100644 components/Form/Separator.tsx

diff --git a/app/page.tsx b/app/page.tsx
index 3f0fcf6..a2c83d2 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -17,7 +17,7 @@ export default function Web() {
             <FontAwesomeIcon icon={faXmark} className="h-6 w-6" />
           </div>
           {/* Title */}
-          <div className="flex justify-center">
+          <div className="flex justify-center mb-12">
             <h1 className="border-grey-300 w-fit border-b pb-4 text-3xl text-indigo-900">Document Upload</h1>
           </div>
           {/* Form layout */}
diff --git a/components/Form/ErrorMessage.tsx b/components/Form/ErrorMessage.tsx
index 4b3534d..7d36578 100644
--- a/components/Form/ErrorMessage.tsx
+++ b/components/Form/ErrorMessage.tsx
@@ -2,7 +2,7 @@ import React from "react"
 
 const ErrorMessage = ({ touched, error }: { touched: boolean; error?: string }) => {
   if (touched && error) {
-    return <p className="mt-1">{error}</p>
+    return <p className="text-xs">{error}</p>
   }
   return null
 }
diff --git a/components/Form/FileInput.tsx b/components/Form/FileInput.tsx
index 89eeba3..712c27a 100644
--- a/components/Form/FileInput.tsx
+++ b/components/Form/FileInput.tsx
@@ -4,6 +4,7 @@ import { useField, useFormikContext } from "formik";
 import React, { useRef, useState } from "react";
 import ErrorMessage from "./ErrorMessage";
 import RequiredAsterisk from "./RequiredAsterisk";
+import Separator from "./Separator";
 
 interface FileInputProps {
   label: string;
@@ -78,11 +79,17 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
   };
 
   return (
-    <div className="mb-4">
-      <label className="text-md" htmlFor={props.name}>
-        {label}
-        <RequiredAsterisk required={required} />
-      </label>
+    <div className="flex flex-col gap-4">
+      {/* Title */}
+      <div className="flex flex-col gap-4">
+        <Separator/>
+        <label className="text-md" htmlFor={props.name}>
+          {label}
+          <RequiredAsterisk required={required} />
+        </label>  
+      </div>
+             
+      {/* File drop area */}
       <div
         className={`border border-grey-500 rounded-md p-4 flex flex-col items-center gap-4 ${dragging ? "bg-blue-100" : "bg-white"} cursor-pointer`}
         onClick={handleClick}
@@ -96,9 +103,13 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
         </div>
         <button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button>
       </div>
+
+      {/* Hidden input */}
       <input type="file" className="hidden" ref={fileInputRef} onChange={handleChange} />
+
+      {/* File info */}
       {fileInfo && (
-          <div className="flex gap-4 p-4 items-center">
+          <div className="flex gap-4 p-4 items-center border-t border-grey-500">
             <FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
             <div className="grow">
               <div className="flex justify-between text-sm text-slate-500">
@@ -111,6 +122,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
             </div>
           </div>
         )}
+
       <ErrorMessage touched={meta.touched} error={meta.error} />
     </div>
   );
diff --git a/components/Form/RadioGroup.tsx b/components/Form/RadioGroup.tsx
index a356049..5fecb8c 100644
--- a/components/Form/RadioGroup.tsx
+++ b/components/Form/RadioGroup.tsx
@@ -3,6 +3,7 @@ import { useField } from "formik"
 import React from "react"
 import ErrorMessage from "./ErrorMessage"
 import RequiredAsterisk from "./RequiredAsterisk"
+import Separator from "./Separator"
 
 const RadioGroupField = ({
   name,
@@ -23,11 +24,15 @@ const RadioGroupField = ({
   }
 
   return (
-    <div className="mb-4">
-      <label className="text-md" htmlFor={label}>
-        {label}
-      </label>
-      <RequiredAsterisk required={required} />
+    <div className="flex flex-col gap-3">
+      <div className="flex flex-col gap-4">
+        <Separator/>
+        <label className="text-md" htmlFor={label}>
+          {label}
+          <RequiredAsterisk required={required} />
+        </label>
+      </div>
+      
       <RadioGroup.Root className="flex gap-3" value={field.value} onValueChange={handleChange} aria-label={label}>
         {options.map((option) => (
           <div className="flex items-center" key={option}>
@@ -36,7 +41,7 @@ const RadioGroupField = ({
               value={option}
               id={`${name}-${option}`}
             >
-              <RadioGroup.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-violet-400 after:content-['']" />
+              <RadioGroup.Indicator className="relative flex h-full w-full items-center justify-center after:block after:h-[11px] after:w-[11px] after:rounded-[50%] after:bg-blue-950 after:content-['']" />
             </RadioGroup.Item>
             <label className="pl-[15px] text-[15px] leading-none" htmlFor={`${name}-${option}`}>
               {option}
diff --git a/components/Form/RequiredAsterisk.tsx b/components/Form/RequiredAsterisk.tsx
index 2fb2585..cc5e2b1 100644
--- a/components/Form/RequiredAsterisk.tsx
+++ b/components/Form/RequiredAsterisk.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 
 const RequiredAsterisk = ({ required }: { required?: boolean }) => {
-  return required ? <span className="text-sm"> *</span> : null
+  return required ? <span className="text-red-500	text-xs"> *</span> : null
 }
 
 export default RequiredAsterisk
diff --git a/components/Form/SelectInput.tsx b/components/Form/SelectInput.tsx
index 0aece61..678388e 100644
--- a/components/Form/SelectInput.tsx
+++ b/components/Form/SelectInput.tsx
@@ -8,15 +8,20 @@ const SelectInput = ({ label, ...props }: { label?: string; name: string; [x: st
   const [field, meta] = useField(restProps)
 
   return (
-    <div className="">
+    <div className="flex flex-col gap-3">
       {label && (
         <label className="text-md" htmlFor={props.id || props.name}>
           {label}
+          <RequiredAsterisk required={required} />
         </label>
       )}
-      <RequiredAsterisk required={required} />
-      <select className="h-10 w-full rounded-lg border px-3 text-base shadow-sm" {...field} {...restProps} />
-      <ErrorMessage touched={meta.touched} error={meta.error} />
+
+      <div className="flex flex-col">
+        <select className="h-10 w-full rounded-lg border border-grey-500 px-4 text-sm" {...field} {...restProps} />
+        <ErrorMessage touched={meta.touched} error={meta.error} />
+      </div>
+      
+      
     </div>
   )
 }
diff --git a/components/Form/Separator.tsx b/components/Form/Separator.tsx
new file mode 100644
index 0000000..c18519e
--- /dev/null
+++ b/components/Form/Separator.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+
+const Separator = () => {
+  return (
+    <hr className='w-[285px]'/>
+  )
+}
+
+export default Separator
diff --git a/components/Form/StatusField.tsx b/components/Form/StatusField.tsx
index 793e457..7634ff6 100644
--- a/components/Form/StatusField.tsx
+++ b/components/Form/StatusField.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import Separator from "./Separator"
 
 const StatusField = ({
   label,
@@ -10,8 +11,11 @@ const StatusField = ({
   statusColor: string
 }) => {
   return (
-    <div>
-      <h4>{label}</h4>
+    <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-4">
+        <Separator/>
+        <h4>{label}</h4>
+      </div>
       <span className={statusColor}>{statusLabel}</span>
     </div>
   )
diff --git a/components/Form/ToggleField.tsx b/components/Form/ToggleField.tsx
index 720eb24..f6f9aac 100644
--- a/components/Form/ToggleField.tsx
+++ b/components/Form/ToggleField.tsx
@@ -3,6 +3,9 @@ import { useField } from "formik"
 import React, { useState } from "react"
 import ErrorMessage from "./ErrorMessage"
 import RequiredAsterisk from "./RequiredAsterisk"
+import Separator from "./Separator"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faClock } from "@fortawesome/free-regular-svg-icons"
 
 const ToggleField = ({
   children,
@@ -15,21 +18,30 @@ const ToggleField = ({
   const [checked, setChecked] = useState(false)
 
   return (
-    <div className="">
-      <label className="flex items-center gap-2">
-        {children}
-        <RequiredAsterisk required={required} />
-      </label>
-      <SwitchPrimitive.Root
-        className="relative h-[25px] w-[42px] cursor-default rounded-full bg-black shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
-        checked={checked}
-        onCheckedChange={(isChecked) => {
-          setChecked(isChecked)
-          field.onChange({ target: { name: field.name, value: isChecked } })
-        }}
-      >
-        <SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
-      </SwitchPrimitive.Root>
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4">
+        <Separator/>
+        <label className="flex items-center gap-2">
+          {children}
+          <RequiredAsterisk required={required} />
+        </label>
+      </div>
+      <div className="flex gap-3 itens-center">
+        <SwitchPrimitive.Root
+          className="relative h-[25px] w-[42px] cursor-default rounded-full bg-blue-950 shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+          checked={checked}
+          onCheckedChange={(isChecked) => {
+            setChecked(isChecked)
+            field.onChange({ target: { name: field.name, value: isChecked } })
+          }}
+        >
+          <SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+        </SwitchPrimitive.Root>
+        <span>Toggle ON</span>
+        <span>|</span>
+        <span className="flex gap-2 items-center"><FontAwesomeIcon icon={faClock} />Select Tolerance Level</span>
+      </div>
+      
       <ErrorMessage touched={meta.touched} error={meta.error} />
     </div>
   )
diff --git a/components/Form/formSchemas.ts b/components/Form/formSchemas.ts
index 367c036..b942160 100644
--- a/components/Form/formSchemas.ts
+++ b/components/Form/formSchemas.ts
@@ -20,9 +20,5 @@ export const validationSchema = Yup.object({
   manifestFile: Yup.mixed().required("A file is required").nullable(), // Allows for null values
   splitSchedule: Yup.string().required("This field is required").oneOf(["Yes", "No"], "Invalid Option"),
   client: Yup.string().required("Client selection is required").oneOf(["Single", "Multiple"], "Invalid Client Type"),
-  testingCenter1: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
-  testingCenter2: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
-  testingCenter3: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
-  testingCenter4: Yup.string().required("Testing center selection is required"), // Assuming a selection is required
   toleranceWindow: Yup.boolean().required("Tolerance window selection is required"), // Assuming this is a boolean represented by a toggle
 })
diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index ac41a0a..0db6a5e 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -19,7 +19,7 @@ import ToggleField from "./ToggleField"
 import { FormValues } from "./types"
 
 const FormComponent: React.FC = () => {
-  const [formSubmitted, setFormSubmitted] = useState(false)
+  const [formSubmitted, setFormSubmitted] = useState(false);
 
   const submitForm = (values: FormValues) => {
     return axios.post(
@@ -60,8 +60,8 @@ const FormComponent: React.FC = () => {
         return (
           <Form>
             <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
-              <div className="flex grow flex-col lg:max-w-[500px]">
-                <SelectInput key="importName" name="importName" label="Select Import Name:" required>
+              <div className="flex w-full flex-col lg:w-[500px] gap-5">
+                <SelectInput key="importName" name="importName" required>
                   <option value="">Select Import Name:</option>
                   {data.importNames.map((option) => (
                     <option key={option} value={option}>
@@ -69,13 +69,16 @@ const FormComponent: React.FC = () => {
                     </option>
                   ))}
                 </SelectInput>
+              
                 <FileInput label="Select a manifest that you'd like to import" name="manifestFile" required />
+                
                 <StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" />
-                <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
-                  Tolerance Window:
-                </ToggleField>
+                  <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
+                    Tolerance Window:
+                  </ToggleField>
+                
               </div>
-              <div className="flex grow flex-col lg:max-w-[350px]">
+              <div className="flex w-full flex-col gap-5 lg:w-[350px]">
                 <RadioGroup
                   key="splitSchedule"
                   name="splitSchedule"
@@ -96,13 +99,13 @@ const FormComponent: React.FC = () => {
                 Continue Import
                 {formik.isSubmitting && <div className="ml-3 h-5 w-5 animate-spin rounded-full border-x-2 border-b-2"></div>}
             </button>
+            {formSubmitted && <div className="text-center text-green-500">Success</div>}
           </Form>
         )
       }
         
       }
     </Formik>
-    {formSubmitted && <div>Success</div>}
     </>
     
   )

From 1e0594a488381d3c4d7584e35d937e02e9e624f1 Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Mon, 4 Mar 2024 23:33:49 -0500
Subject: [PATCH 06/11] styling

---
 app/layout.tsx                   |   1 +
 app/page.tsx                     |  18 +--
 components/Form/ClientField.tsx  |   2 +-
 components/Form/ErrorMessage.tsx |   2 +-
 components/Form/FileInput.tsx    |   4 +-
 components/Form/RadioGroup.tsx   |   6 +-
 components/Form/StatusField.tsx  |   4 +-
 components/Form/ToggleField.tsx  |  15 ++-
 components/Form/data.tsx         |   4 +-
 components/Form/index.tsx        | 183 +++++++++++++++++++------------
 styles/global.css                |   5 +
 11 files changed, 145 insertions(+), 99 deletions(-)
 create mode 100644 styles/global.css

diff --git a/app/layout.tsx b/app/layout.tsx
index 8acd5b9..27b5590 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,4 +1,5 @@
 import "styles/tailwind.css"
+import "styles/global.css"
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
diff --git a/app/page.tsx b/app/page.tsx
index a2c83d2..29872af 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,29 +1,21 @@
-import { faXmark } from "@fortawesome/free-solid-svg-icons"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { Metadata } from "next"
 import Form from "components/Form"
+import Head from "next/head"
 
 export const metadata: Metadata = {
   title: "Form Components",
 }
 
 export default function Web() {
+  
   return (
     <>
+      <Head>
+        <link href="https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap" rel="stylesheet" />
+      </Head>
       <section className="flex min-h-full grow items-center justify-center bg-slate-200 p-4">
         <div className="max-w-screen-lg grow rounded-3xl bg-white p-8">
-          {/* Close button */}
-          <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-950	text-white">
-            <FontAwesomeIcon icon={faXmark} className="h-6 w-6" />
-          </div>
-          {/* Title */}
-          <div className="flex justify-center mb-12">
-            <h1 className="border-grey-300 w-fit border-b pb-4 text-3xl text-indigo-900">Document Upload</h1>
-          </div>
-          {/* Form layout */}
-          <div className="flex gap-14">
             <Form />
-          </div>
         </div>
       </section>
     </>
diff --git a/components/Form/ClientField.tsx b/components/Form/ClientField.tsx
index 02ff447..6af2e4c 100644
--- a/components/Form/ClientField.tsx
+++ b/components/Form/ClientField.tsx
@@ -13,7 +13,7 @@ type ClientFieldProps = {
 // Destructure the props in the function parameter
 const ClientField: React.FC<ClientFieldProps> = ({ testingCenters, clients }) => {
   return (
-    <div className="flex flex-col gap-4">
+    <div className="flex flex-col gap-4 text-sm leading-tight">
       {testingCenters.map((testingCenter) => (
         <div key={Utils.camelize(testingCenter)} className="flex items-center gap-14">
           <span>{testingCenter}</span>
diff --git a/components/Form/ErrorMessage.tsx b/components/Form/ErrorMessage.tsx
index 7d36578..55a8928 100644
--- a/components/Form/ErrorMessage.tsx
+++ b/components/Form/ErrorMessage.tsx
@@ -2,7 +2,7 @@ import React from "react"
 
 const ErrorMessage = ({ touched, error }: { touched: boolean; error?: string }) => {
   if (touched && error) {
-    return <p className="text-xs">{error}</p>
+    return <p className="text-xs text-red-500">{error}</p>
   }
   return null
 }
diff --git a/components/Form/FileInput.tsx b/components/Form/FileInput.tsx
index 712c27a..acad4a4 100644
--- a/components/Form/FileInput.tsx
+++ b/components/Form/FileInput.tsx
@@ -83,7 +83,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
       {/* Title */}
       <div className="flex flex-col gap-4">
         <Separator/>
-        <label className="text-md" htmlFor={props.name}>
+        <label className="font-bold text-sm leading-tight text-indigo-900" htmlFor={props.name}>
           {label}
           <RequiredAsterisk required={required} />
         </label>  
@@ -99,7 +99,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
       >
         <div className="border border-grey-500 border-dashed flex flex-col gap-4 items-center justify-center rounded-md py-9 w-full">
           <FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
-          <h4>Drag & Drop Here or <span className="font-bold">Browse</span></h4>
+          <h4 className="text-sm leading-tight">Drag & Drop Here or <span className="font-bold">Browse</span></h4>
         </div>
         <button type="button" className="text-white px-12 py-2 rounded-md bg-blue-950 w-fit">Upload Manifest</button>
       </div>
diff --git a/components/Form/RadioGroup.tsx b/components/Form/RadioGroup.tsx
index 5fecb8c..7a10ae0 100644
--- a/components/Form/RadioGroup.tsx
+++ b/components/Form/RadioGroup.tsx
@@ -8,11 +8,13 @@ import Separator from "./Separator"
 const RadioGroupField = ({
   name,
   label,
+  separator,
   options,
   ...props
 }: {
   name: string
   label: string
+  separator?: boolean
   options: string[]
   [x: string]: any // Allow any other props
 }) => {
@@ -26,8 +28,8 @@ const RadioGroupField = ({
   return (
     <div className="flex flex-col gap-3">
       <div className="flex flex-col gap-4">
-        <Separator/>
-        <label className="text-md" htmlFor={label}>
+        {separator && <Separator/>}
+        <label className="font-bold text-sm leading-tight text-indigo-900" htmlFor={label}>
           {label}
           <RequiredAsterisk required={required} />
         </label>
diff --git a/components/Form/StatusField.tsx b/components/Form/StatusField.tsx
index 7634ff6..ea553f7 100644
--- a/components/Form/StatusField.tsx
+++ b/components/Form/StatusField.tsx
@@ -14,9 +14,9 @@ const StatusField = ({
     <div className="flex flex-col gap-2">
       <div className="flex flex-col gap-4">
         <Separator/>
-        <h4>{label}</h4>
+        <h4 className="font-bold text-sm leading-tight text-indigo-900">{label}</h4>
       </div>
-      <span className={statusColor}>{statusLabel}</span>
+      <span className={`text-sm leading-tight ${statusColor}`}>{statusLabel}</span>
     </div>
   )
 }
diff --git a/components/Form/ToggleField.tsx b/components/Form/ToggleField.tsx
index f6f9aac..eb17e8e 100644
--- a/components/Form/ToggleField.tsx
+++ b/components/Form/ToggleField.tsx
@@ -21,25 +21,28 @@ const ToggleField = ({
     <div className="flex flex-col gap-4">
       <div className="flex flex-col gap-4">
         <Separator/>
-        <label className="flex items-center gap-2">
+        <label className="flex items-center gap-2 font-bold text-sm leading-tight text-indigo-900">
           {children}
           <RequiredAsterisk required={required} />
         </label>
       </div>
       <div className="flex gap-3 itens-center">
         <SwitchPrimitive.Root
-          className="relative h-[25px] w-[42px] cursor-default rounded-full bg-blue-950 shadow-[0_2px_10px] outline-none focus:shadow-[0_0_0_2px] focus:shadow-black"
+          className="relative h-[25px] w-[42px] cursor-default rounded-full bg-indigo-900 outline-none"
           checked={checked}
           onCheckedChange={(isChecked) => {
             setChecked(isChecked)
             field.onChange({ target: { name: field.name, value: isChecked } })
           }}
         >
-          <SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white shadow-[0_2px_2px] shadow-black transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
+          <SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
         </SwitchPrimitive.Root>
-        <span>Toggle ON</span>
-        <span>|</span>
-        <span className="flex gap-2 items-center"><FontAwesomeIcon icon={faClock} />Select Tolerance Level</span>
+        <div className="flex gap-4 items-center text-sm leading-tight">
+          <span>Toggle ON</span>
+          <span>|</span>
+          <span className="flex gap-2 items-center"><FontAwesomeIcon icon={faClock} />Select Tolerance Level</span>
+        </div>
+        
       </div>
       
       <ErrorMessage touched={meta.touched} error={meta.error} />
diff --git a/components/Form/data.tsx b/components/Form/data.tsx
index e4d295b..065a446 100644
--- a/components/Form/data.tsx
+++ b/components/Form/data.tsx
@@ -2,6 +2,6 @@ export const data = {
   importNames: ["Import ABC", "Import DEF", "Import GHI"],
   splitScheduleOptions: ["Yes", "No"],
   clientOptions: ["Single", "Multiple"],
-  testingCenterOptions: ["testing center 1", "testing center 2", "testing center 3", "testing center 4"],
-  clientsOptions: ["client 1", "client 2", "client 3"],
+  testingCenterOptions: ["Testing Center 1", "Testing Center 2", "Testing Center 3", "Testing Center 4"],
+  clientsOptions: ["Client 1", "Client 2", "Client 3"],
 }
diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index 0db6a5e..69b4722 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -1,7 +1,7 @@
 "use client"
 
 import axios from "axios"
-import { Form, Formik } from "formik"
+import { Form, Formik, useFormikContext } from "formik"
 import React, { useState } from "react"
 
 //Dependencies
@@ -17,6 +17,24 @@ import StatusField from "./StatusField"
 import ToggleField from "./ToggleField"
 
 import { FormValues } from "./types"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faXmark } from "@fortawesome/free-solid-svg-icons"
+
+{/* Close button */}
+const CloseButton: React.FC = () => {
+  const { resetForm,setFieldValue } = useFormikContext();
+  const handleReset = () => {
+    resetForm();
+    setFieldValue("manifestFile", "");
+  }
+  
+  return (
+    <button className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-950	text-white" onClick={() => handleReset()}>
+      <FontAwesomeIcon icon={faXmark} className="h-6 w-6" />
+    </button>
+  )
+};
+
 
 const FormComponent: React.FC = () => {
   const [formSubmitted, setFormSubmitted] = useState(false);
@@ -38,76 +56,101 @@ const FormComponent: React.FC = () => {
 
   return (
     <>
-    <Formik
-      initialValues={initialValues}
-      validationSchema={validationSchema}
-      onSubmit={async (values, { setSubmitting }) => {
-        console.log("Form values:", values); // Log form values on submit
-        try {
-          //await submitForm(values)
-          setFormSubmitted(true)
-        } catch (error) {
-          console.error("Error submitting form:", error)
-        } finally {
-          setSubmitting(false)
-        }
-      }}
-    >
-      {(formik) => {
-        console.log("Form errors:", formik.errors); // Log form errors on every render
-        console.log("Form values:", formik.values); // Log current form values on every render
-
-        return (
-          <Form>
-            <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
-              <div className="flex w-full flex-col lg:w-[500px] gap-5">
-                <SelectInput key="importName" name="importName" required>
-                  <option value="">Select Import Name:</option>
-                  {data.importNames.map((option) => (
-                    <option key={option} value={option}>
-                      {option}
-                    </option>
-                  ))}
-                </SelectInput>
-              
-                <FileInput label="Select a manifest that you'd like to import" name="manifestFile" required />
-                
-                <StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" />
-                  <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
-                    Tolerance Window:
-                  </ToggleField>
-                
-              </div>
-              <div className="flex w-full flex-col gap-5 lg:w-[350px]">
-                <RadioGroup
-                  key="splitSchedule"
-                  name="splitSchedule"
-                  label="Split schedule using social distancing?"
-                  options={data.splitScheduleOptions}
-                  required={true}
-                />
-                <StatusField label="Location Checking:" statusLabel="All Available!" statusColor="text-green-500" />
-                <RadioGroup key="client" name="client" label="Client" options={data.clientOptions} required={true} />
-                <ClientField testingCenters={data.testingCenterOptions} clients={data.clientsOptions} />
-              </div>
-            </div>
-            <button
-                className="mx-auto mt-4 flex items-center justify-center rounded-full py-3 px-9 text-center text-md font-bold shadow-xs transition-all bg-blue-950 text-white"
-                type="submit"
-                disabled={formik.isSubmitting}
-            >
-                Continue Import
-                {formik.isSubmitting && <div className="ml-3 h-5 w-5 animate-spin rounded-full border-x-2 border-b-2"></div>}
-            </button>
-            {formSubmitted && <div className="text-center text-green-500">Success</div>}
-          </Form>
-        )
-      }
-        
-      }
-    </Formik>
-    </>
     
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={async (values, { setSubmitting }) => {
+          //console.log("Form values:", values); // Log form values on submit
+          try {
+            //await submitForm(values)
+            setFormSubmitted(true)
+          } catch (error) {
+            console.error("Error submitting form:", error)
+          } finally {
+            setSubmitting(false)
+          }
+        }}
+      >
+        {(formik) => {
+          //console.log("Form errors:", formik.errors); // Log form errors on every render
+          //console.log("Form values:", formik.values); // Log current form values on every render
+
+          return (
+            <Form>
+              <CloseButton />
+              {/* Title */}
+              <div className="flex justify-center mb-12">
+                <h1 className="border-grey-300 w-fit border-b pb-4 font-bold text-3xl text-indigo-900">Document Upload</h1>
+              </div>
+              
+              <div className="flex flex-col gap-12">
+
+                {/* Form layout */}
+                <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
+                  {/* Left Column */}
+                  <div className="flex w-full flex-col lg:w-[500px] gap-5">
+                    <SelectInput key="importName" name="importName" required>
+                      <option value="">Select Import Name:</option>
+                      {data.importNames.map((option) => (
+                        <option key={option} value={option}>
+                          {option}
+                        </option>
+                      ))}
+                    </SelectInput>
+                  
+                    <FileInput label="Select a manifest that you'd like to import" name="manifestFile" required />
+                    
+                    <StatusField label="Elapse Data Checking:" statusLabel="No Elapsed Dates!" statusColor="text-green-500" />
+                      <ToggleField key="toleranceWindow" name="toleranceWindow" required={true}>
+                        Tolerance Window:
+                      </ToggleField>
+                    
+                  </div>
+                  {/* Right Column */}
+                  <div className="flex w-full flex-col gap-5 lg:w-[350px]">
+                    <RadioGroup
+                      key="splitSchedule"
+                      name="splitSchedule"
+                      label="Split schedule using social distancing?"
+                      options={data.splitScheduleOptions}
+                      required={true}
+                    />
+                    <StatusField label="Location Checking:" statusLabel="All Available!" statusColor="text-green-500" />
+                    <RadioGroup key="client" name="client" label="Client" options={data.clientOptions} required={true} separator />
+                    <ClientField testingCenters={data.testingCenterOptions} clients={data.clientsOptions} />
+                  </div>
+                </div>
+
+                {/* Form Footer */}
+                <div className="flex flex-col gap-6">
+                  <p className="text-lg leading-tight text-center">Data in the import file is correct. Please press Continue to import.</p>
+                  <div className="flex gap-6 justify-center">
+                    <button
+                        className="flex items-center justify-center rounded-md py-3 px-9 text-center text-sm font-bold transition-all bg-blue-950 text-white min-w-[240px]"
+                        type="submit"
+                        disabled={formik.isSubmitting}
+                    >
+                        Continue Import
+                        {formik.isSubmitting && <div className="ml-3 h-5 w-5 animate-spin rounded-full border-x-2 border-b-2"></div>}
+                    </button>
+                    <button
+                        className="flex items-center justify-center rounded-md py-3 px-9 text-center text-sm font-bold transition-all border-2 border-amber-500 text-amber-500 min-w-[240px]"
+                    >
+                        Cancel
+                    </button>
+                  </div>
+                  
+                  {formSubmitted && <div className="text-center text-green-500">Success</div>}
+                </div>
+              </div>
+
+            </Form>
+          )
+        }
+        }
+      </Formik>
+    </>
   )
 }
 
diff --git a/styles/global.css b/styles/global.css
new file mode 100644
index 0000000..622f7c1
--- /dev/null
+++ b/styles/global.css
@@ -0,0 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;700&display=swap');
+
+body {
+    font-family: 'Raleway', sans-serif;
+  }
\ No newline at end of file

From 8faa5354a8cc870c1fa6176359254ffa792cda4e Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Tue, 5 Mar 2024 17:42:30 -0500
Subject: [PATCH 07/11] Cleanup, comments, e2e

---
 components/Button/Button.stories.tsx |  31 --------
 components/Button/Button.tsx         |  47 ------------
 components/Form/Button.tsx           |  50 +++++++++++++
 components/Form/ClientField.tsx      |  19 ++++-
 components/Form/ErrorMessage.tsx     |   8 ++-
 components/Form/FileInput.tsx        |  24 ++++++-
 components/Form/RadioGroup.tsx       |  36 ++++++++--
 components/Form/SelectInput.tsx      |   1 +
 components/Form/StatusField.tsx      |  25 ++++---
 components/Form/ToggleField.tsx      |  33 +++++++--
 components/Form/index.tsx            | 102 +++++++++++++--------------
 components/Tooltip/Tooltip.tsx       |  75 --------------------
 e2e/form.spec.ts                     |  68 ++++++++++++++++++
 e2e/testFile.txt                     |   1 +
 14 files changed, 288 insertions(+), 232 deletions(-)
 delete mode 100644 components/Button/Button.stories.tsx
 delete mode 100644 components/Button/Button.tsx
 create mode 100644 components/Form/Button.tsx
 delete mode 100644 components/Tooltip/Tooltip.tsx
 create mode 100644 e2e/form.spec.ts
 create mode 100644 e2e/testFile.txt

diff --git a/components/Button/Button.stories.tsx b/components/Button/Button.stories.tsx
deleted file mode 100644
index ad992c7..0000000
--- a/components/Button/Button.stories.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Button } from "./Button"
-
-const meta: Meta<typeof Button> = {
-  title: "Button",
-  component: Button,
-  args: {
-    intent: "primary",
-    underline: false,
-    children: "Button",
-    size: "lg",
-  },
-  argTypes: {
-    intent: {
-      options: ["primary", "secondary"],
-      control: { type: "select" },
-    },
-    size: {
-      options: ["sm", "lg"],
-      control: { type: "select" },
-    },
-  },
-}
-
-type Story = StoryObj<typeof Button>
-
-export const Default: Story = {
-  render: (args) => <Button {...args} />,
-}
-
-export default meta
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
deleted file mode 100644
index 10b9811..0000000
--- a/components/Button/Button.tsx
+++ /dev/null
@@ -1,47 +0,0 @@
-import { cva, type VariantProps } from "class-variance-authority"
-
-import { twMerge } from "tailwind-merge"
-
-const button = cva(
-  [
-    "justify-center",
-    "inline-flex",
-    "items-center",
-    "rounded-xl",
-    "text-center",
-    "border",
-    "border-blue-400",
-    "transition-colors",
-    "delay-50",
-  ],
-  {
-    variants: {
-      intent: {
-        primary: ["bg-blue-400", "text-white", "hover:enabled:bg-blue-700"],
-        secondary: ["bg-transparent", "text-blue-400", "hover:enabled:bg-blue-400", "hover:enabled:text-white"],
-      },
-      size: {
-        sm: ["min-w-20", "h-full", "min-h-10", "text-sm", "py-1.5", "px-4"],
-        lg: ["min-w-32", "h-full", "min-h-12", "text-lg", "py-2.5", "px-6"],
-      },
-      underline: { true: ["underline"], false: [] },
-    },
-    defaultVariants: {
-      intent: "primary",
-      size: "lg",
-    },
-  }
-)
-
-export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLAnchorElement>, VariantProps<typeof button> {
-  underline?: boolean
-  href: string
-}
-
-export function Button({ className, intent, size, underline, ...props }: ButtonProps) {
-  return (
-    <a className={twMerge(button({ intent, size, className, underline }))} {...props}>
-      {props.children}
-    </a>
-  )
-}
diff --git a/components/Form/Button.tsx b/components/Form/Button.tsx
new file mode 100644
index 0000000..1aa9bdd
--- /dev/null
+++ b/components/Form/Button.tsx
@@ -0,0 +1,50 @@
+/**
+ * Button component that supports primary and secondary variants, as well as size customization.
+ * Utilizes 'class-variance-authority' for managing class variants and 'tailwind-merge' for class merging.
+ */
+
+import React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { twMerge } from 'tailwind-merge';
+
+/** 
+ * Configure base and variant classes using 'class-variance-authority'
+  * Variants:
+  * - 'primary': Blue background with white text, changes on hover.
+  * - 'secondary': Transparent background with amber border and text, changes on hover.
+  * Sizes:
+  * - 'sm': Small size button.
+  * - 'lg': Large size button (default).
+*/
+
+const button = cva(
+  "flex items-center justify-center rounded-md py-3 px-9 text-center text-sm font-bold transition-all md:min-w-[240px]",
+  {
+    variants: {
+      variant: {
+        primary: ["bg-blue-950 text-white", "hover:enabled:bg-blue-700"],
+        secondary: ["border-2 border-amber-500 text-amber-500", "hover:enabled:bg-amber-500 hover:enabled:text-white"],
+      },
+      size: {
+        sm: ["py-2 px-4", "text-xs"],
+        lg: ["py-3 px-9", "text-sm"], 
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "lg",
+    },
+  }
+);
+
+// ButtonProps extends standard button attributes with variant and size customization options.
+export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof button> {}
+
+// Button component: Renders a button with customizable variants, sizes, and additional passed props.
+export const Button: React.FC<ButtonProps> = ({ className, variant, size, ...props }) => {
+  return (
+    <button className={twMerge(button({ variant, size }), className)} {...props}>
+      {props.children}
+    </button>
+  );
+};
diff --git a/components/Form/ClientField.tsx b/components/Form/ClientField.tsx
index 6af2e4c..2614492 100644
--- a/components/Form/ClientField.tsx
+++ b/components/Form/ClientField.tsx
@@ -1,21 +1,34 @@
+/**
+ * ClientField Component
+ * 
+ * Renders a list of testing centers with associated client selection inputs.
+ * Each testing center allows for the selection of a client from a provided list.
+ */
+
 import { faClock } from "@fortawesome/free-regular-svg-icons"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import React from "react"
 import SelectInput from "./SelectInput"
 import { Utils } from "./Utils"
 
-// Define a type for your props to improve type-checking
+/**
+ * Props for ClientField component.
+ * 
+ * @param testingCenters Array of testing center names to be displayed.
+ * @param clients Array of client names available for selection.
+ */
+
 type ClientFieldProps = {
   testingCenters: string[]
   clients: string[]
 }
 
-// Destructure the props in the function parameter
 const ClientField: React.FC<ClientFieldProps> = ({ testingCenters, clients }) => {
   return (
     <div className="flex flex-col gap-4 text-sm leading-tight">
+      {/* Render a selection input for each testing center, allowing a client to be chosen for each. */}
       {testingCenters.map((testingCenter) => (
-        <div key={Utils.camelize(testingCenter)} className="flex items-center gap-14">
+        <div key={Utils.camelize(testingCenter)} className="flex items-center gap-4 md:gap-14">
           <span>{testingCenter}</span>
           <div className="flex items-center gap-2">
             <SelectInput name={Utils.camelize(testingCenter)}>
diff --git a/components/Form/ErrorMessage.tsx b/components/Form/ErrorMessage.tsx
index 55a8928..acf10f6 100644
--- a/components/Form/ErrorMessage.tsx
+++ b/components/Form/ErrorMessage.tsx
@@ -1,8 +1,14 @@
+/**
+ * ErrorMessage Component
+ *
+ * Displays an error message if a form field has been touched and an error exists.
+ */
+
 import React from "react"
 
 const ErrorMessage = ({ touched, error }: { touched: boolean; error?: string }) => {
   if (touched && error) {
-    return <p className="text-xs text-red-500">{error}</p>
+    return <p className="text-xs text-red-500" role="alert">{error}</p>
   }
   return null
 }
diff --git a/components/Form/FileInput.tsx b/components/Form/FileInput.tsx
index acad4a4..796c4c4 100644
--- a/components/Form/FileInput.tsx
+++ b/components/Form/FileInput.tsx
@@ -1,3 +1,10 @@
+/**
+ * FileInput Component
+ *
+ * Renders a file input with drag-and-drop support. Displays the selected file's name and size,
+ * and simulates file upload progress. Integrates with Formik for form state management.
+ */
+
 import { faFile } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useField, useFormikContext } from "formik";
@@ -17,10 +24,17 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
   const [field, meta] = useField(props);
   const { setFieldValue } = useFormikContext();
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const [dragging, setDragging] = useState(false); // State to handle drag styling
-  const [fileInfo, setFileInfo] = useState<{ name: string; size: number } | null>(null); // State to store file info
+
+  // State to manage drag-over styling
+  const [dragging, setDragging] = useState(false);
+
+  // State to store information about the selected file
+  const [fileInfo, setFileInfo] = useState<{ name: string; size: number } | null>(null);
+
+  // State to simulate and display upload progress
   const [uploadProgress, setUploadProgress] = useState(0);
 
+  // Simulates file upload progress
   const simulateUpload = () => {
     let progress = 0;
     const interval = setInterval(() => {
@@ -32,6 +46,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
     }, 20); // Adjust time interval to control speed of the animation
   };
 
+  // Handles file selection via input change event
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const { files } = event.target;
     const file = files ? files[0] : null;
@@ -43,12 +58,14 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
     }
   };
 
+  // Opens the file input dialog
   const handleClick = () => {
     if (fileInputRef.current) {
       fileInputRef.current.click();
     }
   };
 
+  // Handles file drop
   const handleDrop = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     event.stopPropagation();
@@ -65,7 +82,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
     }
 };
 
-
+// Manages drag-over state for styling
   const handleDragOver = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     if (!dragging) {
@@ -73,6 +90,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
     }
   };
 
+  // Resets dragging state when dragging leaves the drop area
   const handleDragLeave = (event: React.DragEvent<HTMLDivElement>) => {
     event.preventDefault();
     setDragging(false);
diff --git a/components/Form/RadioGroup.tsx b/components/Form/RadioGroup.tsx
index 7a10ae0..d077c79 100644
--- a/components/Form/RadioGroup.tsx
+++ b/components/Form/RadioGroup.tsx
@@ -1,3 +1,10 @@
+/**
+ * RadioGroupField Component
+ *
+ * Renders a group of radio buttons using Radix UI with Formik integration.
+ * Supports custom options, labels, and an optional separator.
+ */
+
 import * as RadioGroup from "@radix-ui/react-radio-group"
 import { useField } from "formik"
 import React from "react"
@@ -5,22 +12,37 @@ import ErrorMessage from "./ErrorMessage"
 import RequiredAsterisk from "./RequiredAsterisk"
 import Separator from "./Separator"
 
-const RadioGroupField = ({
+/**
+ * Props for RadioGroupField.
+ *
+ * @param name The name attribute for the radio group, used for form submission.
+ * @param label Display label for the radio group.
+ * @param separator Optional boolean to render a visual separator above the radio group.
+ * @param options Array of option strings that the radio group will display.
+ * @param props Additional props passed to the radio group, including `required`.
+ */
+
+interface RadioGroupFieldProps {
+  name: string;
+  label: string;
+  separator?: boolean;
+  options: string[];
+  [key: string]: any; // This allows for additional props not explicitly defined in the interface.
+}
+
+const RadioGroupField: React.FC<RadioGroupFieldProps> = ({
   name,
   label,
   separator,
   options,
   ...props
-}: {
-  name: string
-  label: string
-  separator?: boolean
-  options: string[]
-  [x: string]: any // Allow any other props
 }) => {
   const { required, ...restProps } = props
+
+  // State and helpers from Formik for managing radio group value
   const [field, meta, helpers] = useField({ ...restProps, name })
 
+  // Handles radio option change, updating Formik's state
   const handleChange = (value: string) => {
     helpers.setValue(value)
   }
diff --git a/components/Form/SelectInput.tsx b/components/Form/SelectInput.tsx
index 678388e..2207115 100644
--- a/components/Form/SelectInput.tsx
+++ b/components/Form/SelectInput.tsx
@@ -4,6 +4,7 @@ import ErrorMessage from "./ErrorMessage"
 import RequiredAsterisk from "./RequiredAsterisk"
 
 const SelectInput = ({ label, ...props }: { label?: string; name: string; [x: string]: any }) => {
+  // Since `useField` only needs `name`, and optionally `type` and `value`, we destruct those from props
   const { required, ...restProps } = props
   const [field, meta] = useField(restProps)
 
diff --git a/components/Form/StatusField.tsx b/components/Form/StatusField.tsx
index ea553f7..378480a 100644
--- a/components/Form/StatusField.tsx
+++ b/components/Form/StatusField.tsx
@@ -1,21 +1,28 @@
+/**
+ * StatusField Component
+ * 
+ * Displays a status label with a customizable color. This component is typically used
+ * to indicate the status of a process or entity (e.g., success, error) within the application.
+ * Includes a visual separator and supports dynamic text and color customization through props.
+ */
+
 import React from "react"
 import Separator from "./Separator"
 
-const StatusField = ({
-  label,
-  statusLabel,
-  statusColor,
-}: {
-  label: string
-  statusLabel: string
-  statusColor: string
-}) => {
+interface StatusFieldProps {
+  label: string;
+  statusLabel: string;
+  statusColor: string;
+}
+
+const StatusField: React.FC<StatusFieldProps> = ({ label, statusLabel, statusColor }) => {
   return (
     <div className="flex flex-col gap-2">
       <div className="flex flex-col gap-4">
         <Separator/>
         <h4 className="font-bold text-sm leading-tight text-indigo-900">{label}</h4>
       </div>
+      {/* Dynamically styled based on status */}
       <span className={`text-sm leading-tight ${statusColor}`}>{statusLabel}</span>
     </div>
   )
diff --git a/components/Form/ToggleField.tsx b/components/Form/ToggleField.tsx
index eb17e8e..282c411 100644
--- a/components/Form/ToggleField.tsx
+++ b/components/Form/ToggleField.tsx
@@ -1,3 +1,10 @@
+/**
+ * ToggleField Component
+ *
+ * Renders a toggle switch using Radix UI, integrated with Formik for form state management.
+ * Supports custom child content and displays an error message if validation fails.
+ */
+
 import * as SwitchPrimitive from "@radix-ui/react-switch"
 import { useField } from "formik"
 import React, { useState } from "react"
@@ -7,6 +14,14 @@ import Separator from "./Separator"
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { faClock } from "@fortawesome/free-regular-svg-icons"
 
+/**
+ * Props for ToggleField.
+ *
+ * @param children ReactNode - The content to be displayed alongside the toggle switch.
+ * @extends React.InputHTMLAttributes<HTMLInputElement> - Inherits standard input attributes.
+ */
+
+
 const ToggleField = ({
   children,
   ...props
@@ -14,9 +29,20 @@ const ToggleField = ({
   children: React.ReactNode
 } & React.InputHTMLAttributes<HTMLInputElement>) => {
   const { required, ...restProps } = props
+
+  // Formik hook for managing form state and validation
   const [field, meta] = useField({ ...(restProps as { name: string }), type: "checkbox" })
+
+  // Local state to manage the checked status of the switch
   const [checked, setChecked] = useState(false)
 
+  // Handles checked state change, updates Formik's state accordingly
+  const handleCheckedChange = (isChecked: boolean) => {
+    setChecked(isChecked);
+    field.onChange({ target: { name: field.name, value: isChecked } });
+  };
+
+
   return (
     <div className="flex flex-col gap-4">
       <div className="flex flex-col gap-4">
@@ -30,14 +56,11 @@ const ToggleField = ({
         <SwitchPrimitive.Root
           className="relative h-[25px] w-[42px] cursor-default rounded-full bg-indigo-900 outline-none"
           checked={checked}
-          onCheckedChange={(isChecked) => {
-            setChecked(isChecked)
-            field.onChange({ target: { name: field.name, value: isChecked } })
-          }}
+          onCheckedChange={(isChecked) => handleCheckedChange(isChecked)}
         >
           <SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
         </SwitchPrimitive.Root>
-        <div className="flex gap-4 items-center text-sm leading-tight">
+        <div className="flex gap-2 md:gap-4 items-center text-xs md:text-sm leading-tight">
           <span>Toggle ON</span>
           <span>|</span>
           <span className="flex gap-2 items-center"><FontAwesomeIcon icon={faClock} />Select Tolerance Level</span>
diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index 69b4722..e90bbe2 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -1,45 +1,43 @@
 "use client"
 
-import axios from "axios"
-import { Form, Formik, useFormikContext } from "formik"
-import React, { useState } from "react"
+// React and Formik imports
+import React, { useState } from "react";
+import { Form, Formik } from "formik";
+import axios from "axios";
 
-//Dependencies
+// UI components and utilities
+import { Button } from "./Button";
+import ClientField from "./ClientField";
+import FileInput from "./FileInput";
+import RadioGroup from "./RadioGroup";
+import SelectInput from "./SelectInput";
+import StatusField from "./StatusField";
+import ToggleField from "./ToggleField";
 
-//Input fields
-import ClientField from "./ClientField"
-import { data } from "./data"
-import FileInput from "./FileInput"
-import { initialValues, validationSchema } from "./formSchemas"
-import RadioGroup from "./RadioGroup"
-import SelectInput from "./SelectInput"
-import StatusField from "./StatusField"
-import ToggleField from "./ToggleField"
+// Data and schema and types
+import { FormValues } from "./types";
+import { data } from "./data";
+import { initialValues, validationSchema } from "./formSchemas";
 
-import { FormValues } from "./types"
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
-import { faXmark } from "@fortawesome/free-solid-svg-icons"
-
-{/* Close button */}
-const CloseButton: React.FC = () => {
-  const { resetForm,setFieldValue } = useFormikContext();
-  const handleReset = () => {
-    resetForm();
-    setFieldValue("manifestFile", "");
-  }
-  
-  return (
-    <button className="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-950	text-white" onClick={() => handleReset()}>
-      <FontAwesomeIcon icon={faXmark} className="h-6 w-6" />
-    </button>
-  )
-};
+// Icons
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faXmark } from "@fortawesome/free-solid-svg-icons";
 
+/**
+ * FormComponent: Main form component for document upload.
+ * 
+ * This component handles the document upload form, including input fields for document details,
+ * file upload, and form submission. It uses Formik for form state management and validation,
+ * and Axios for submission to a backend endpoint.
+ */
 
 const FormComponent: React.FC = () => {
+  // State to track if the form has been successfully submitted
   const [formSubmitted, setFormSubmitted] = useState(false);
 
+  // Function to handle form submission
   const submitForm = (values: FormValues) => {
+    //TODO implement form submission
     return axios.post(
       `/api/submitForm`,
       {
@@ -56,7 +54,7 @@ const FormComponent: React.FC = () => {
 
   return (
     <>
-    
+      {/* Formik setup for handling form state, validation, and submission */}
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}
@@ -78,15 +76,18 @@ const FormComponent: React.FC = () => {
 
           return (
             <Form>
-              <CloseButton />
-              {/* Title */}
+              {/* Close button - allows resetting the form to initial state */}
+              <button type="button" className="hidden md:flex h-10 w-10 items-center justify-center rounded-lg bg-blue-950	text-white" onClick={() => formik.resetForm()}>
+                <FontAwesomeIcon icon={faXmark} className="h-6 w-6" />
+              </button>
+              {/* Title - provides context for the form's purpose */}
               <div className="flex justify-center mb-12">
                 <h1 className="border-grey-300 w-fit border-b pb-4 font-bold text-3xl text-indigo-900">Document Upload</h1>
               </div>
               
               <div className="flex flex-col gap-12">
 
-                {/* Form layout */}
+                {/* Form layout - organizes the form fields into logical sections */}
                 <div className="flex flex-col gap-4 lg:flex-row lg:gap-16">
                   {/* Left Column */}
                   <div className="flex w-full flex-col lg:w-[500px] gap-5">
@@ -122,26 +123,25 @@ const FormComponent: React.FC = () => {
                   </div>
                 </div>
 
-                {/* Form Footer */}
+                {/* Form Footer - contains actions for form submission and cancellation */}
                 <div className="flex flex-col gap-6">
                   <p className="text-lg leading-tight text-center">Data in the import file is correct. Please press Continue to import.</p>
                   <div className="flex gap-6 justify-center">
-                    <button
-                        className="flex items-center justify-center rounded-md py-3 px-9 text-center text-sm font-bold transition-all bg-blue-950 text-white min-w-[240px]"
-                        type="submit"
-                        disabled={formik.isSubmitting}
-                    >
-                        Continue Import
-                        {formik.isSubmitting && <div className="ml-3 h-5 w-5 animate-spin rounded-full border-x-2 border-b-2"></div>}
-                    </button>
-                    <button
-                        className="flex items-center justify-center rounded-md py-3 px-9 text-center text-sm font-bold transition-all border-2 border-amber-500 text-amber-500 min-w-[240px]"
-                    >
-                        Cancel
-                    </button>
+                  <Button 
+                  variant="primary"
+                  type="submit"
+                  disabled={formik.isSubmitting} >
+                    Continue Import
+                  </Button>
+                  <Button 
+                  variant="secondary" 
+                  type="button"
+                  onClick={() => formik.resetForm()}>
+                    Cancel
+                  </Button>
                   </div>
-                  
-                  {formSubmitted && <div className="text-center text-green-500">Success</div>}
+                  {/* Success message - Display a success message if the form has been submitted successfully */}
+                  {formSubmitted && <div className="sucess-message text-center text-green-500">Success</div>}
                 </div>
               </div>
 
diff --git a/components/Tooltip/Tooltip.tsx b/components/Tooltip/Tooltip.tsx
deleted file mode 100644
index 62fd481..0000000
--- a/components/Tooltip/Tooltip.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-"use client"
-
-import * as RadixTooltip from "@radix-ui/react-tooltip"
-import { cva, VariantProps } from "class-variance-authority"
-import React from "react"
-import { twMerge } from "tailwind-merge"
-
-const tooltipContent = cva([], {
-  variants: {
-    intent: {
-      primary: ["rounded-0.5md", "bg-zinc-700", "font-open-sans", "text-white"],
-    },
-    size: {
-      md: ["px-4", "py-2.5", "text-2xs"],
-    },
-  },
-  defaultVariants: {
-    intent: "primary",
-    size: "md",
-  },
-})
-
-const tooltipArrow = cva([], {
-  variants: {
-    intent: {
-      primary: ["fill-zinc-700"],
-    },
-    size: {
-      md: ["w-4", "h-2"],
-    },
-  },
-  defaultVariants: {
-    intent: "primary",
-    size: "md",
-  },
-})
-
-export interface TooltipProps extends VariantProps<typeof tooltipContent>, RadixTooltip.TooltipProps {
-  explainer: React.ReactElement | string
-  children: React.ReactElement
-  className?: string
-  withArrow?: boolean
-  side?: "top" | "right" | "bottom" | "left"
-}
-
-export function Tooltip({
-  children,
-  explainer,
-  open,
-  defaultOpen,
-  onOpenChange,
-  intent,
-  size,
-  side = "top",
-  className,
-  withArrow,
-}: TooltipProps) {
-  return (
-    <RadixTooltip.Provider>
-      <RadixTooltip.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} delayDuration={200}>
-        <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>
-        <RadixTooltip.Portal>
-          <RadixTooltip.Content
-            side={side}
-            sideOffset={5}
-            className={twMerge(tooltipContent({ intent, size, className }))}
-          >
-            {explainer}
-            {withArrow ? <RadixTooltip.Arrow className={twMerge(tooltipArrow({ intent, size, className }))} /> : null}
-          </RadixTooltip.Content>
-        </RadixTooltip.Portal>
-      </RadixTooltip.Root>
-    </RadixTooltip.Provider>
-  )
-}
diff --git a/e2e/form.spec.ts b/e2e/form.spec.ts
new file mode 100644
index 0000000..2cdbd49
--- /dev/null
+++ b/e2e/form.spec.ts
@@ -0,0 +1,68 @@
+//TODO Install playwright
+
+import { expect, test } from "@playwright/test"
+
+//Form load and initial state validation
+test("form loads correctly with initial state", async ({ page }) => {
+    await page.goto("/"); //Home URL
+  
+    // Check if specific fields are present and empty
+    await expect(page.locator('input[name="importName"]')).toBeEmpty();
+    await expect(page.locator('input[name="manifestFile"]')).toBeEmpty();
+
+    await expect(page.locator('input[name="toleranceWindow"]')).not.toBeChecked();
+    // Verify that no option is selected initially for "splitSchedule"
+    await expect(page.locator('input[name="splitSchedule"]:checked')).toHaveCount(0);
+
+    // Verify that no option is selected initially for "client"
+    await expect(page.locator('input[name="client"]:checked')).toHaveCount(0);
+  
+    // Check for the presence of the submit button and that it's initially disabled
+    const submitButton = page.locator('button', { hasText: 'Continue Import' });
+    await expect(submitButton).toBeDisabled();
+  });
+
+  //File upload validation
+  test("handles file upload correctly", async ({ page }) => {
+    await page.goto("/");
+  
+    // Simulate file upload
+    await page.setInputFiles('input[type="file"]', '/e2e/testFile.txt');
+  
+    // Check if the file name is displayed correctly
+    await expect(page.locator('.file-info')).toHaveText(/testFile.txt/);
+  
+    // Optionally, check for the upload progress bar to reach 100%
+    await expect(page.locator('.upload-progress')).toHaveCSS('width', '100%');
+  });
+
+  //Toggle and submit interactions
+  test("toggles a switch and submits the form", async ({ page }) => {
+    await page.goto("/");
+  
+    // Toggle a switch
+    await page.locator('input[name="toleranceWindow"]').click();
+    await expect(page.locator('input[name="toleranceWindow"]')).toBeChecked();
+  
+    // Fill in other required fields
+    // Select an option from "importName" dropdown
+    await page.locator('select[name="importName"]').selectOption({ label: "Import ABC" });
+
+    // Upload a file for "manifestFile"
+    await page.locator('input[name="manifestFile"]').setInputFiles('/e2e/testFile.txt');
+
+    // Select an option for "splitSchedule"
+    await page.locator('input[name="splitSchedule"][value="Yes"]').click();
+
+    // Select an option for "client"
+    await page.locator('input[name="client"][value="Single"]').click();
+
+    // Enable and click the submit button
+    const submitButton = page.locator('button', { hasText: 'Continue Import' });
+    await expect(submitButton).toBeEnabled();
+    await submitButton.click();
+  
+    // Verify submission was successful
+    await expect(page.locator('.success-message')).toHaveText(/Success/);
+  });
+
diff --git a/e2e/testFile.txt b/e2e/testFile.txt
new file mode 100644
index 0000000..e4d7d11
--- /dev/null
+++ b/e2e/testFile.txt
@@ -0,0 +1 @@
+File to be used to test the file upload field
\ No newline at end of file

From e0fc37b8c0a2ec7c00a3d1a051efdb3a3736f5bf Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Tue, 5 Mar 2024 17:49:08 -0500
Subject: [PATCH 08/11] disable submit initially

---
 components/Form/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index e90bbe2..7a9ba91 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -130,7 +130,7 @@ const FormComponent: React.FC = () => {
                   <Button 
                   variant="primary"
                   type="submit"
-                  disabled={formik.isSubmitting} >
+                  disabled={!formik.isValid || !formik.dirty || formik.isSubmitting} >
                     Continue Import
                   </Button>
                   <Button 

From 8c33e14fbc615c161e879778a249a7a8c9a22a6c Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Tue, 5 Mar 2024 19:01:40 -0500
Subject: [PATCH 09/11] read me

---
 README.md | 324 ++++++------------------------------------------------
 1 file changed, 34 insertions(+), 290 deletions(-)

diff --git a/README.md b/README.md
index 31ad3fb..baf0774 100644
--- a/README.md
+++ b/README.md
@@ -1,322 +1,66 @@
-<img align="right" width="360px" height="410px" src="./.github/assets/project-logo-vertical.png">
+# Document Upload App with Next.js
 
-# Next.js Enterprise Boilerplate </br>  [![GitHub Actions Workflow Status][check-workflow-badge]][check-workflow-badge-link] [![GitHub License][github-license-badge]][github-license-badge-link] [![GitHub contributors][github-contributors-badge]][github-contributors-badge-link] [![Discord][discord-badge]][discord-badge-link] [![Blazity][made-by-blazity-badge]][made-by-blazity-badge-link]
-
-Welcome to the _Next.js Enterprise Boilerplate_, an open-source template for enterprise projects! It's loaded with features that'll help you build a high-performance, maintainable, and enjoyable app. We've done all the heavy lifting for you, so sit back, relax, and get ready to conquer the world with your incredible app! 🌍
-
-> [!NOTE]
-> **Blazity** is a group of Next.js/Headless experts. Contact us at [contact@blazity.com](https://blazity.com) if you’d like to talk about your project or just to have a chat with us
+This project is built on the robust foundation of the Next.js Enterprise Boilerplate by Blazity, tailored for a document upload application. It demonstrates advanced usage of Next.js, Formik for form management, Tailwind CSS for styling, and includes comprehensive testing with Jest and Playwright. This README guides you through the project setup, features, and deployment.
 
 ## Features
 
-With this template, you get all the awesomeness you need:
+- **Next.js**: Leveraging the latest features of Next.js for SSR and static generation.
+- **Tailwind CSS**: Utilizing Tailwind for rapid and responsive UI development.
+- **Formik**: Streamlined form handling with validation and custom input components.
+- **Playwright**: End-to-end testing to ensure reliability and functionality.
+- **Radix UI**: Utilizing Radix UI for accessible and customizable components.
+- **Tailwind Merge**: Efficiently managing Tailwind CSS classes.
+- **TypeScript**: Ensuring type safety and developer productivity.
 
-- 🏎️ **[Next.js](https://nextjs.org/)** - Fast by default, with config optimized for performance (with **App Directory**)
-- 💅 **[Tailwind CSS](https://tailwindcss.com/)** - A utility-first CSS framework for rapid UI development
-- ✨ **[ESlint](https://eslint.org/)** and **[Prettier](https://prettier.io/)** - For clean, consistent, and error-free code
-- 🛠️ **[Extremely strict TypeScript](https://www.typescriptlang.org/)** - With [`ts-reset`](https://github.com/total-typescript/ts-reset) library for ultimate type safety
-- 🚀 **[GitHub Actions](https://github.com/features/actions)** - Pre-configured actions for smooth workflows, including Bundle Size and performance stats
-- 💯 **Perfect Lighthouse score** - Because performance matters
-- **[Bundle analyzer plugin](https://www.npmjs.com/package/@next/bundle-analyzer)** - Keep an eye on your bundle size
-- **[Jest](https://jestjs.io/)** and **[React Testing Library](https://testing-library.com/react)** - For rock-solid unit and integration tests
-- **[Playwright](https://playwright.dev/)** - Write end-to-end tests like a pro
-- **[Storybook](https://storybook.js.org/)** - Create, test, and showcase your components
-- **Smoke Testing** and **Acceptance Tests** - For confidence in your deployments
-- **[Conventional commits git hook](https://www.conventionalcommits.org/)** - Keep your commit history neat and tidy
-- **[Observability](https://opentelemetry.io/)** - Open Telemetry integration for seamless monitoring
-- **[Absolute imports](https://nextjs.org/docs/advanced-features/module-path-aliases)** - No more spaghetti imports
-- **[Health checks](https://kubernetes.io/docs/tasks/configure-pod-container/configure-liveness-readiness-startup-probes/)** - Kubernetes-compatible for robust deployments
-- **[Radix UI](https://www.radix-ui.com/)** - Headless UI components for endless customization
-- **[CVA](http://cva.style/)** - Create a consistent, reusable, and atomic design system
-- **[Renovate BOT](https://www.whitesourcesoftware.com/free-developer-tools/renovate)** - Auto-updating dependencies, so you can focus on coding
-- **[Patch-package](https://www.npmjs.com/package/patch-package)** - Fix external dependencies without losing your mind
-- **Components coupling and cohesion graph** - A tool for managing component relationships
-- **[Automated ChatGPT Code Reviews](https://openai.com/chatgpt)** - **Stay on the cutting edge with AI-powered code reviews!**
-- **[Semantic Release](https://github.com/semantic-release/semantic-release)** - for automatic changelog
-- **[T3 Env](https://env.t3.gg/)** - Manage your environment variables with ease
+## Getting Started
 
-## Table of Contents
+To run this project locally, follow these steps:
 
-- [Next.js Enterprise Boilerplate](#nextjs-enterprise-boilerplate)
-  - [Features](#features)
-  - [Table of Contents](#table-of-contents)
-  - [Getting Started](#-getting-started)
-  - [Deployment](#-deployment)
-  - [Scripts Overview](#-scripts-overview)
-  - [Coupling Graph](#-coupling-graph)
-  - [Testing](#-testing)
-    - [Running Tests](#running-tests)
-    - [Acceptance Tests](#acceptance-tests)
-    - [Smoke Testing](#smoke-testing)
-  - [Styling and Design System](#-styling-and-design-system)
-    - [CVA - A New Approach to Variants](#cva---a-new-approach-to-variants)
-  - [State Management](#-state-management)
-    - [Zustand](#zustand)
-    - [Jotai](#jotai)
-    - [Recoil](#recoil)
-  - [ChatGPT Code Review](#-chatgpt-code-review)
-  - [Environment Variables handling](#-environment-variables-handling)
-  - [Contribution](#-contribution)
-  - [Support](#support)
-  - [License](#-license)
-  - [Contributors](#contributors)
-
-## 🎯 Getting Started
-
-To get started with this boilerplate, follow these steps:
-
-1. Fork & clone repository:
+1. Clone the repository:
 
 ```bash
-## Don't forget to ⭐ star and fork it first :)
-git clone https://github.com/<your_username)/next-enterprise.git
+git clone https://github.com/vasquezjesus2710/next-enterprise
+cd next-enterprise
 ```
 
-2. Install the dependencies:
+2. Install Dependencies
 
 ```bash
-yarn install --frozen-lockfile
+yarn install
 ```
-
-3. Run the development server:
+3. Start the development server
 
 ```bash
 yarn dev
 ```
 
-4. Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+Visit [http://localhost:3000](http://localhost:3000) to view the application.
 
-5. This project uses a git hook to enforce [conventional commits](https://github.com/qoomon/git-conventional-commits). To install the git hook, run the following command in the root directory of the project:
 
-```sh
-brew install pre-commit
-pre-commit install -t commit-msg
-```
 
-## 🚀 Deployment
+## Project Structure
 
-Easily deploy your Next.js app with [Vercel](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=github&utm_campaign=next-enterprise) by clicking the button below:
+- **components/**: Reusable UI components, including custom Formik inputs.
+- **pages/**: Application pages and the API endpoint for form submission.
+- **public/**: Static assets like images and fonts.
+- **styles/**: Global styles and Tailwind configuration.
+- **tests/**: Jest unit tests and Playwright end-to-end tests.
+- **utils/**: Utility functions and helpers.
 
-[![Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/Blazity/next-enterprise)
+**Testing**
 
-## 📃 Scripts Overview
+This project includes both unit and integration tests with Jest and end-to-end tests with Playwright:
 
-The following scripts are available in the `package.json`:
-
-- `dev`: Starts the development server with colorized output
-- `build`: Builds the app for production
-- `start`: Starts the production server
-- `lint`: Lints the code using ESLint
-- `lint:fix`: Automatically fixes linting errors
-- `prettier`: Checks the code for proper formatting
-- `prettier:fix`: Automatically fixes formatting issues
-- `analyze`: Analyzes the bundle sizes for Client, Server and Edge environments
-- `storybook`: Starts the Storybook server
-- `build-storybook`: Builds the Storybook for deployment
-- `test`: Runs unit and integration tests
-- `e2e:headless`: Runs end-to-end tests in headless mode
-- `e2e:ui`: Runs end-to-end tests with UI
-- `format`: Formats the code with Prettier
-- `postinstall`: Applies patches to external dependencies
-- `preinstall`: Ensures the project is installed with Yarn
-- `coupling-graph`: **Generates a coupling and cohesion graph for the components**
-
-## 🔗 Coupling Graph
-
-The `coupling-graph` script is a useful tool that helps visualize the coupling and connections between your project's internal modules. It's built using the [Madge](https://github.com/pahen/madge) library. To generate the graph, simply run the following command:
+- Run unit and integration tests:
+`yarn test`
 
+- Run end-to-end tests:
 ```bash
-yarn coupling-graph
+yarn e2e:headless # For headless testing
+yarn e2e:ui # For UI testing
 ```
 
-This will create a `graph.svg` file, which contains a graphical representation of the connections between your components. You can open the file with any SVG-compatible viewer.
 
-![graph](https://user-images.githubusercontent.com/28964599/233662744-3ba89713-8466-49cd-9be7-e6fb38191f58.png)
+## Acknowledgments
 
-## 🧪 Testing
-
-This boilerplate comes with various testing setups to ensure your application's reliability and robustness.
-
-### Running Tests
-
-- **Unit and integration tests**: Run Jest tests using `yarn test`
-- **End-to-end tests (headless mode)**: Run Playwright tests in headless mode with `yarn e2e:headless`
-- **End-to-end tests (UI mode)**: Run Playwright tests with UI using `yarn e2e:ui`
-
-<img width="1392" alt="image" src="https://user-images.githubusercontent.com/28964599/233666655-93b7d08b-2fd8-406a-b43c-44d4d96cf387.png">
-
-### Acceptance Tests
-
-To write acceptance tests, we leverage Storybook's [`play` function](https://storybook.js.org/docs/react/writing-stories/play-function#writing-stories-with-the-play-function). This allows you to interact with your components and test various user flows within Storybook.
-
-```ts
-/*
- * See https://storybook.js.org/docs/react/writing-stories/play-function#working-with-the-canvas
- * to learn more about using the canvasElement to query the DOM
- */
-export const FilledForm: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement)
-
-    const emailInput = canvas.getByLabelText("email", {
-      selector: "input",
-    })
-
-    await userEvent.type(emailInput, "example-email@email.com", {
-      delay: 100,
-    })
-
-    const passwordInput = canvas.getByLabelText("password", {
-      selector: "input",
-    })
-
-    await userEvent.type(passwordInput, "ExamplePassword", {
-      delay: 100,
-    })
-    // See https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args to learn how to setup logging in the Actions panel
-    const submitButton = canvas.getByRole("button")
-
-    await userEvent.click(submitButton)
-  },
-}
-```
-
-### Smoke Testing
-
-In this boilerplate, we use Storybook's out-of-the-box support for smoke testing to verify that components render correctly without any errors. Just run `yarn test-storybook` to perform smoke testing. Remember to write stories in JSX or TSX format only. Smoke testing and a lot of other functionalities dont work well with MDX stories.
-
-## 🎨 Styling and Design System
-
-This boilerplate uses Tailwind CSS for styling and CVA for creating a powerful, easy-to-use design system. If you want to learn more about the setup, check out this fantastic video by Vercel:
-
-[![Styling and Design System](https://img.youtube.com/vi/T-Zv73yZ_QI/0.jpg)](https://www.youtube.com/watch?v=T-Zv73yZ_QI&ab_channel=Vercel)
-
-### CVA - A New Approach to Variants
-
-While CSS-in-TS libraries such as [Stitches](https://stitches.dev/) and [Vanilla Extract](https://vanilla-extract.style/) are great for building type-safe UI components, they might not be the perfect fit for everyone. You may prefer more control over your stylesheets, need to use a framework like Tailwind CSS, or simply enjoy writing your own CSS.
-
-Creating variants using traditional CSS can be a tedious task, requiring you to manually match classes to props and add types. CVA is here to take that pain away, allowing you to focus on the enjoyable aspects of UI development. By providing an easy and type-safe way to create variants, CVA simplifies the process and helps you create powerful design systems without compromising on the flexibility and control of CSS.
-
-## 💾 State Management
-
-While this boilerplate doesn't include a specific state management library, we believe it's essential for you to choose the one that best suits your project's needs. Here are some libraries we recommend for state management:
-
-### Zustand
-
-[Zustand](https://github.com/pmndrs/zustand) is a small, fast, and scalable state management library. It's designed to be simple and intuitive, making it a great choice for small to medium-sized projects. It's also optimized for bundle size, ensuring minimal impact on your app's performance.
-
-### Jotai
-
-[Jotai](https://github.com/pmndrs/jotai) is an atom-based state management library for React that focuses on providing a minimal and straightforward API. Its atom-based approach allows you to manage your state in a granular way while still being highly optimized for bundle size.
-
-### Recoil
-
-[Recoil](https://recoiljs.org/) is a state management library developed by Facebook, specifically designed for React applications. By utilizing atoms and selectors, Recoil allows you to efficiently manage state and derived state. Its key benefit is the ability to update components only when the state they're subscribed to changes, reducing unnecessary re-renders and keeping your application fast and efficient. Recoil also offers great developer experience with built-in debugging tools.
-
-Choose the library that best fits your requirements and project structure to ensure an efficient state management solution for your application.
-
-## 🤖 ChatGPT Code Review
-
-We've integrated the innovative [ChatGPT Code Review](https://github.com/anc95/ChatGPT-CodeReview) for AI-powered, automated code reviews. This feature provides real-time feedback on your code, helping improve code quality and catch potential issues.
-
-To use ChatGPT Code Review, add an `OPENAI_API_KEY` environment variable with an appropriate key from the OpenAI platform. For setup details, refer to the [Using GitHub Actions](https://github.com/anc95/ChatGPT-CodeReview#using-github-actions) section in the documentation.
-
-![image](https://user-images.githubusercontent.com/28964599/233685071-e1371edf-6359-41c3-a989-335d6ee09cb7.png)
-
-## 💻 Environment Variables handling
-
-[T3 Env](https://env.t3.gg/) is a library that provides environmental variables checking at build time, type validation and transforming. It ensures that your application is using the correct environment variables and their values are of the expected type. You’ll never again struggle with runtime errors caused by incorrect environment variable usage.
-
-Config file is located at `env.mjs`. Simply set your client and server variables and import `env` from any file in your project.
-
-```ts
-export const env = createEnv({
-  server: {
-    // Server variables
-    SECRET_KEY: z.string(),
-  },
-  client: {
-    // Client variables
-    API_URL: z.string().url(),
-  },
-  runtimeEnv: {
-    // Assign runtime variables
-    SECRET_KEY: process.env.SECRET_KEY,
-    API_URL: process.env.NEXT_PUBLIC_API_URL,
-  },
-})
-```
-
-If the required environment variables are not set, you'll get an error message:
-
-```sh
-  ❌ Invalid environment variables: { SECRET_KEY: [ 'Required' ] }
-```
-
-## 🤝 Contribution
-
-Contributions are always welcome! To contribute, please follow these steps:
-
-1. Fork the repository.
-2. Create a new branch with a descriptive name.
-3. Make your changes, and commit them using the [Conventional Commits](https://www.conventionalcommits.org/) format.
-4. Push your changes to the forked repository.
-5. Create a pull request, and we'll review your changes.
-
-## Support
-
-If you're looking for help or simply want to share your thoughts about the project, we encourage you to join our Discord community. Here's the link: [https://blazity.com/discord](https://blazity.com/discord). It's a space where we exchange ideas and help one another. Everyone's input is appreciated, and we look forward to welcoming you.
-
-<br />
-<a href="https://discord.gg/fyWtyNKmfX" style="width: 100%; display: flex; justify-content: center;">
-  <img src="https://discordapp.com/api/guilds/1111676875782234175/widget.png?style=banner2" alt="Blazity Discord Banner"/>
-</a>
-<br />
-
-
-## 📜 License
-
-This project is licensed under the MIT License. For more information, see the [LICENSE](./LICENSE) file.
-
-## Contributors
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tbody>
-    <tr>
-      <td align="center" valign="top" width="14.28%"><a href="https://bstefanski.com/"><img src="https://avatars.githubusercontent.com/u/28964599?v=4?s=100" width="100px;" alt="Bart Stefanski"/><br /><sub><b>Bart Stefanski</b></sub></a><br /><a href="https://github.com/Blazity/next-enterprise/commits?author=bmstefanski" title="Code">💻</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://github.com/jjablonski-it"><img src="https://avatars.githubusercontent.com/u/51968772?v=4?s=100" width="100px;" alt="Jakub Jabłoński"/><br /><sub><b>Jakub Jabłoński</b></sub></a><br /><a href="#infra-jjablonski-it" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></td>
-      <td align="center" valign="top" width="14.28%"><a href="https://neg4n.dev/"><img src="https://avatars.githubusercontent.com/u/57688858?v=4?s=100" width="100px;" alt="Igor Klepacki"/><br /><sub><b>Igor Klepacki</b></sub></a><br /><a href="https://github.com/Blazity/next-enterprise/commits?author=neg4n" title="Documentation">📖</a></td>
-    </tr>
-  </tbody>
-  <tfoot>
-    <tr>
-      <td align="center" size="13px" colspan="7">
-        <img src="https://raw.githubusercontent.com/all-contributors/all-contributors-cli/1b8533af435da9854653492b1327a23a4dbd0a10/assets/logo-small.svg">
-          <a href="https://all-contributors.js.org/docs/en/bot/usage">Add your contributions</a>
-        </img>
-      </td>
-    </tr>
-  </tfoot>
-</table>
-
-<!-- markdownlint-restore -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-<!-- Badges and links -->
-
-[check-workflow-badge]: https://img.shields.io/github/actions/workflow/status/blazity/next-enterprise/check.yml?label=check
-[github-license-badge]: https://img.shields.io/github/license/blazity/next-enterprise?link=https%3A%2F%2Fgithub.com%2FBlazity%2Fnext-enterprise%2Fblob%2Fmain%2FLICENSE
-[github-contributors-badge]: https://img.shields.io/github/contributors/blazity/next-enterprise?link=https%3A%2F%2Fgithub.com%2FBlazity%2Fnext-enterprise%2Fgraphs%2Fcontributors
-[discord-badge]: https://img.shields.io/discord/1111676875782234175?color=7b8dcd&link=https%3A%2F%2Fblazity.com%2Fdiscord
-[made-by-blazity-badge]: https://img.shields.io/badge/made_by-Blazity-blue?color=FF782B&link=https://blazity.com/
-
-[check-workflow-badge-link]: https://github.com/Blazity/next-enterprise/actions/workflows/check.yml
-[github-license-badge-link]: https://github.com/Blazity/next-enterprise/blob/main/LICENSE
-[github-contributors-badge-link]: https://github.com/Blazity/next-enterprise/graphs/contributors
-[discord-badge-link]: https://blazity.com/discord
-[made-by-blazity-badge-link]: https://blazity.com/?utm_source=nextenterprise&utm_medium=github
+Built on the [Next.js Enterprise Boilerplate](https://github.com/Blazity/next-enterprise) by Blazity.
\ No newline at end of file

From c9dd083eaea3fd69824dbdd00cd8f73322a56dbe Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Tue, 5 Mar 2024 21:32:42 -0500
Subject: [PATCH 10/11] e2e tests

---
 components/Form/FileInput.tsx   |  2 +-
 components/Form/ToggleField.tsx |  3 +--
 components/Form/formSchemas.ts  |  2 +-
 components/Form/index.tsx       |  2 +-
 e2e/example.spec.ts             |  7 -------
 e2e/form.spec.ts                | 23 +++++++++++------------
 6 files changed, 15 insertions(+), 24 deletions(-)
 delete mode 100644 e2e/example.spec.ts

diff --git a/components/Form/FileInput.tsx b/components/Form/FileInput.tsx
index 796c4c4..29a058d 100644
--- a/components/Form/FileInput.tsx
+++ b/components/Form/FileInput.tsx
@@ -127,7 +127,7 @@ const FileInput: React.FC<FileInputProps> = ({ label, ...props }) => {
 
       {/* File info */}
       {fileInfo && (
-          <div className="flex gap-4 p-4 items-center border-t border-grey-500">
+          <div className="file-info flex gap-4 p-4 items-center border-t border-grey-500">
             <FontAwesomeIcon icon={faFile} className="text-amber-500 h-5 w-5" />
             <div className="grow">
               <div className="flex justify-between text-sm text-slate-500">
diff --git a/components/Form/ToggleField.tsx b/components/Form/ToggleField.tsx
index 282c411..bd8836a 100644
--- a/components/Form/ToggleField.tsx
+++ b/components/Form/ToggleField.tsx
@@ -54,8 +54,7 @@ const ToggleField = ({
       </div>
       <div className="flex gap-3 itens-center">
         <SwitchPrimitive.Root
-          className="relative h-[25px] w-[42px] cursor-default rounded-full bg-indigo-900 outline-none"
-          checked={checked}
+          className="toggle-switch relative h-[25px] w-[42px] cursor-default rounded-full bg-indigo-900 outline-none"
           onCheckedChange={(isChecked) => handleCheckedChange(isChecked)}
         >
           <SwitchPrimitive.Thumb className="block h-[21px] w-[21px] translate-x-0.5 rounded-full bg-white transition-transform duration-100 will-change-transform data-[state=checked]:translate-x-[19px]" />
diff --git a/components/Form/formSchemas.ts b/components/Form/formSchemas.ts
index b942160..1a14a5d 100644
--- a/components/Form/formSchemas.ts
+++ b/components/Form/formSchemas.ts
@@ -10,7 +10,7 @@ export const initialValues: FormValues = {
   testingCenter2: "",
   testingCenter3: "",
   testingCenter4: "",
-  toleranceWindow: false,
+  toleranceWindow: false
 }
 
 export const validationSchema = Yup.object({
diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index 7a9ba91..3a6a0e2 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -141,7 +141,7 @@ const FormComponent: React.FC = () => {
                   </Button>
                   </div>
                   {/* Success message - Display a success message if the form has been submitted successfully */}
-                  {formSubmitted && <div className="sucess-message text-center text-green-500">Success</div>}
+                  {formSubmitted && <div className="success-message text-center text-green-500">Success</div>}
                 </div>
               </div>
 
diff --git a/e2e/example.spec.ts b/e2e/example.spec.ts
deleted file mode 100644
index de18990..0000000
--- a/e2e/example.spec.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-import { expect, test } from "@playwright/test"
-
-test("has title", async ({ page }) => {
-  await page.goto("./")
-
-  await expect(page).toHaveTitle(/Next.js Enterprise Boilerplate/)
-})
diff --git a/e2e/form.spec.ts b/e2e/form.spec.ts
index 2cdbd49..795a7c5 100644
--- a/e2e/form.spec.ts
+++ b/e2e/form.spec.ts
@@ -6,11 +6,12 @@ import { expect, test } from "@playwright/test"
 test("form loads correctly with initial state", async ({ page }) => {
     await page.goto("/"); //Home URL
   
-    // Check if specific fields are present and empty
-    await expect(page.locator('input[name="importName"]')).toBeEmpty();
-    await expect(page.locator('input[name="manifestFile"]')).toBeEmpty();
+    // Check if specific fields are present and the default selected option is the placeholder value
+    await expect(page.locator('select[name="importName"] option').first()).toHaveText('Select Import Name:');
+    
+    // Check if the file upload field indicates that no file is selected
+    await expect(page.locator('.file-info')).not.toBeVisible();
 
-    await expect(page.locator('input[name="toleranceWindow"]')).not.toBeChecked();
     // Verify that no option is selected initially for "splitSchedule"
     await expect(page.locator('input[name="splitSchedule"]:checked')).toHaveCount(0);
 
@@ -31,9 +32,6 @@ test("form loads correctly with initial state", async ({ page }) => {
   
     // Check if the file name is displayed correctly
     await expect(page.locator('.file-info')).toHaveText(/testFile.txt/);
-  
-    // Optionally, check for the upload progress bar to reach 100%
-    await expect(page.locator('.upload-progress')).toHaveCSS('width', '100%');
   });
 
   //Toggle and submit interactions
@@ -41,21 +39,22 @@ test("form loads correctly with initial state", async ({ page }) => {
     await page.goto("/");
   
     // Toggle a switch
-    await page.locator('input[name="toleranceWindow"]').click();
-    await expect(page.locator('input[name="toleranceWindow"]')).toBeChecked();
+    await page.locator('.toggle-switch').click();
+    // Wait for the 'aria-checked' attribute to become 'true'
+    await expect(page.locator('.toggle-switch')).toHaveAttribute('aria-checked', 'true', { timeout: 5000 });
   
     // Fill in other required fields
     // Select an option from "importName" dropdown
     await page.locator('select[name="importName"]').selectOption({ label: "Import ABC" });
 
     // Upload a file for "manifestFile"
-    await page.locator('input[name="manifestFile"]').setInputFiles('/e2e/testFile.txt');
+    await page.locator('input[type="file"]').setInputFiles('/e2e/testFile.txt');
 
     // Select an option for "splitSchedule"
-    await page.locator('input[name="splitSchedule"][value="Yes"]').click();
+    await page.locator('button[role="radio"][value="Yes"]').click();
 
     // Select an option for "client"
-    await page.locator('input[name="client"][value="Single"]').click();
+    await page.locator('button[role="radio"][value="Single"]').click();
 
     // Enable and click the submit button
     const submitButton = page.locator('button', { hasText: 'Continue Import' });

From 8609733cba83df9706247658d924d1f125c58abc Mon Sep 17 00:00:00 2001
From: Jesus Vasquez <jesus.wmr@gmail.com>
Date: Tue, 5 Mar 2024 21:38:22 -0500
Subject: [PATCH 11/11] button text on mobile

---
 components/Form/Button.tsx | 2 +-
 components/Form/index.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Form/Button.tsx b/components/Form/Button.tsx
index 1aa9bdd..449b75f 100644
--- a/components/Form/Button.tsx
+++ b/components/Form/Button.tsx
@@ -18,7 +18,7 @@ import { twMerge } from 'tailwind-merge';
 */
 
 const button = cva(
-  "flex items-center justify-center rounded-md py-3 px-9 text-center text-sm font-bold transition-all md:min-w-[240px]",
+  "flex items-center justify-center rounded-md py-3 px-4 md:px-9 text-center text-xs md:text-sm font-bold transition-all md:min-w-[240px]",
   {
     variants: {
       variant: {
diff --git a/components/Form/index.tsx b/components/Form/index.tsx
index 3a6a0e2..471b9b6 100644
--- a/components/Form/index.tsx
+++ b/components/Form/index.tsx
@@ -126,7 +126,7 @@ const FormComponent: React.FC = () => {
                 {/* Form Footer - contains actions for form submission and cancellation */}
                 <div className="flex flex-col gap-6">
                   <p className="text-lg leading-tight text-center">Data in the import file is correct. Please press Continue to import.</p>
-                  <div className="flex gap-6 justify-center">
+                  <div className="flex gap-3 mdgap-6 justify-center">
                   <Button 
                   variant="primary"
                   type="submit"