From f78c09cfd88463de67b1cf71800bc4cbf8b59b6f Mon Sep 17 00:00:00 2001
From: Remi Guan <remi.guan@outlook.com>
Date: Mon, 30 Dec 2024 20:33:40 +0800
Subject: [PATCH] refactor: Format with prettier

---
 .github/pull_request_template.md              |   9 +-
 README.md                                     |   4 +-
 app/actions/runSyncExtractKeyValue.ts         |   2 +-
 .../ExtractKeyValuePairContainer.tsx          |  56 +++++-----
 app/components/playground/KeyValueInputs.tsx  | 105 ++++++++----------
 .../tutorials/ExtractKeyValuePairTutorial.tsx |  40 +++----
 app/globals.css                               |  19 +---
 test-results.json                             |  11 +-
 tests/README.md                               |  19 +++-
 tests/coreTests.ts                            |  20 ++--
 tsconfig.json                                 |  10 +-
 11 files changed, 145 insertions(+), 150 deletions(-)

diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
index 405c7dcd..4b8dcc7d 100644
--- a/.github/pull_request_template.md
+++ b/.github/pull_request_template.md
@@ -1,10 +1,13 @@
 ## Description
+
 <!-- Provide a brief description of the changes introduced by this PR -->
 
 ## Related Issue
+
 <!-- Link to the related issue (if applicable) using #issue_number -->
 
 ## Type of Change
+
 <!-- Put an `x` in the boxes that apply -->
 
 - [ ] Bug fix (non-breaking change which fixes an issue)
@@ -15,12 +18,15 @@
 - [ ] Performance improvement
 
 ## How Has This Been Tested?
+
 <!-- Describe the tests you ran to verify your changes -->
 
 ## Screenshots (if applicable)
+
 <!-- Add screenshots to help explain your changes -->
 
 ## Checklist
+
 <!-- Put an `x` in the boxes that apply -->
 
 - [ ] My code follows the project's style guidelines
@@ -32,4 +38,5 @@
 - [ ] New and existing unit tests pass locally with my changes
 
 ## Additional Notes
-<!-- Add any additional notes or context about the PR here --> 
+
+<!-- Add any additional notes or context about the PR here -->
diff --git a/README.md b/README.md
index b96cdb1e..7ff0d613 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,12 @@
 # Cambio Website Source
+
 For Dev setup, please refer to this [Notion Page](https://www.notion.so/goldpiggy/TS-JS-Dev-Setup-ada0f7cdf74c424c8767ed692150cc88?pvs=4). You may need to request access, and you will only receive access if appropriate.
 
 ## Quick setup
+
 - checkout a dev branch
 - copy .env from 1password
 - `npm install` for dependency
 - `npm run dev` for local development and testing
 - open `http://localhost:3000` in your browser
-- 
\ No newline at end of file
+-
diff --git a/app/actions/runSyncExtractKeyValue.ts b/app/actions/runSyncExtractKeyValue.ts
index 5f0183e7..aa8918a6 100644
--- a/app/actions/runSyncExtractKeyValue.ts
+++ b/app/actions/runSyncExtractKeyValue.ts
@@ -20,7 +20,7 @@ export const runSyncExtractKeyValue = async ({
     file_type: 'pdf',
     extract_args: {
       extract_instruction: extractInstruction,
-    }
+    },
   };
 
   const config = {
diff --git a/app/components/playground/ExtractKeyValuePairContainer.tsx b/app/components/playground/ExtractKeyValuePairContainer.tsx
index 6dda3a1b..7841644d 100644
--- a/app/components/playground/ExtractKeyValuePairContainer.tsx
+++ b/app/components/playground/ExtractKeyValuePairContainer.tsx
@@ -16,7 +16,7 @@ import ExtractKeyValuePairTutorial from '../tutorials/ExtractKeyValuePairTutoria
 
 const downloadExtractedData = (formattedData: string, file?: PlaygroundFile['file']) => {
   if (!formattedData) return;
-  
+
   const fileName = file instanceof File ? file.name : 'extracted_data';
   const blob = new Blob([formattedData], { type: 'application/json' });
   const url = URL.createObjectURL(blob);
@@ -33,7 +33,8 @@ const downloadExtractedData = (formattedData: string, file?: PlaygroundFile['fil
 const ExtractKeyValuePairContainer = () => {
   const [hideResult, setHideResult] = useState(false);
   const { apiURL, isProduction } = useProductionContext();
-  const { selectedFileIndex, files, updateFileAtIndex, token, userId, clientId, addFilesFormData } = usePlaygroundStore();
+  const { selectedFileIndex, files, updateFileAtIndex, token, userId, clientId, addFilesFormData } =
+    usePlaygroundStore();
 
   const selectedFile = useMemo(() => {
     if (selectedFileIndex !== null && files.length > 0) {
@@ -44,7 +45,10 @@ const ExtractKeyValuePairContainer = () => {
   useEffect(() => {
     if (!selectedFile) return;
 
-    if (selectedFile.extractKeyValueState === ExtractState.EXTRACTING || selectedFile.extractKeyValueState === ExtractState.UPLOADING) {
+    if (
+      selectedFile.extractKeyValueState === ExtractState.EXTRACTING ||
+      selectedFile.extractKeyValueState === ExtractState.UPLOADING
+    ) {
       toast.loading('Extracting data...', { id: 'key-value-extracting-toast' });
     } else {
       toast.dismiss('key-value-extracting-toast');
@@ -53,7 +57,9 @@ const ExtractKeyValuePairContainer = () => {
 
   const handleSuccess = async (response: any) => {
     if (!response.data) {
-      toast.error(`${selectedFile?.file instanceof File ? selectedFile.file.name : 'File'}: Received undefined result. Please try again.`);
+      toast.error(
+        `${selectedFile?.file instanceof File ? selectedFile.file.name : 'File'}: Received undefined result. Please try again.`
+      );
       updateFileAtIndex(selectedFileIndex, 'extractKeyValueState', ExtractState.READY);
       return;
     }
@@ -104,8 +110,8 @@ const ExtractKeyValuePairContainer = () => {
 
       const jobParams: JobParams = {
         vqaProcessorArgs: {
-          vqaExtractInstruction: extractInstruction
-        }
+          vqaExtractInstruction: extractInstruction,
+        },
       };
 
       // Upload file and get presigned url and metadata
@@ -116,7 +122,7 @@ const ExtractKeyValuePairContainer = () => {
         file: file as File,
         process_type: ProcessType.EXTRACT_KEY_VALUE,
         extractArgs: {
-          extractInstruction
+          extractInstruction,
         },
         addFilesFormData,
       });
@@ -153,7 +159,6 @@ const ExtractKeyValuePairContainer = () => {
       // Run the async job based on environment
       const runJob = isProduction ? runAsyncRequestJob : runPreprodAsyncRequestJob;
       await runJob(jobConfig);
-
     } catch (error) {
       toast.error('Extraction failed. Please try again.');
       console.error(error);
@@ -173,38 +178,26 @@ const ExtractKeyValuePairContainer = () => {
         <ExtractKeyValuePairTutorial />
         {fileUrl && (hideResult || !selectedFile?.extractKeyValueResult) && (
           <div>
-            <DocumentViewer 
+            <DocumentViewer
               fileType={selectedFile?.file instanceof File ? selectedFile.file.type : 'pdf'}
               fileUrl={fileUrl}
             />
             {selectedFile?.extractKeyValueResult && (
               <div className="absolute bottom-4 left-4">
-                <Button 
-                  label="Back to Result"
-                  labelIcon={ArrowLeft}
-                  onClick={() => setHideResult(false)} 
-                />
+                <Button label="Back to Result" labelIcon={ArrowLeft} onClick={() => setHideResult(false)} />
               </div>
             )}
           </div>
         )}
         {!hideResult && selectedFile?.extractKeyValueResult && (
           <div className="pb-24">
-            <CodeBlock 
-              language="json" 
-              code={selectedFile?.extractKeyValueResult}
-              aria-label="Extraction Result"
-            />
+            <CodeBlock language="json" code={selectedFile?.extractKeyValueResult} aria-label="Extraction Result" />
             <div className="absolute bottom-4 left-4 flex gap-2 w-fit">
-              <Button 
-                label="Back to File"
-                labelIcon={ArrowLeft}
-                onClick={() => setHideResult(true)} 
-              />
-              <Button 
-                label="Download" 
-                labelIcon={Download} 
-                onClick={() => downloadExtractedData(selectedFile?.extractKeyValueResult, selectedFile?.file)} 
+              <Button label="Back to File" labelIcon={ArrowLeft} onClick={() => setHideResult(true)} />
+              <Button
+                label="Download"
+                labelIcon={Download}
+                onClick={() => downloadExtractedData(selectedFile?.extractKeyValueResult, selectedFile?.file)}
               />
             </div>
           </div>
@@ -213,9 +206,12 @@ const ExtractKeyValuePairContainer = () => {
       <div className="h-[calc(100%-1rem)] min-w-60 max-w-72 w-[18vw] p-4 rounded-2xl shadow-[0px_0px_4px_2px_rgba(0,_0,_0,_0.1)] absolute top-4 right-0">
         <div className="w-full max-h-full overflow-hidden flex flex-col gap-4">
           <div className="flex flex-col gap-2">
-            <KeyValueInputs 
+            <KeyValueInputs
               onSubmit={onSubmit}
-              isLoading={selectedFile?.extractKeyValueState === ExtractState.EXTRACTING || selectedFile?.extractKeyValueState === ExtractState.UPLOADING}
+              isLoading={
+                selectedFile?.extractKeyValueState === ExtractState.EXTRACTING ||
+                selectedFile?.extractKeyValueState === ExtractState.UPLOADING
+              }
             />
           </div>
         </div>
diff --git a/app/components/playground/KeyValueInputs.tsx b/app/components/playground/KeyValueInputs.tsx
index da970864..688d2f2c 100644
--- a/app/components/playground/KeyValueInputs.tsx
+++ b/app/components/playground/KeyValueInputs.tsx
@@ -24,11 +24,7 @@ interface KeyValueInputsProps {
 
 const AddButton = ({ onClick }: { onClick?: () => void }) => {
   return (
-    <button 
-      className="border hover:bg-gray-100 p-1 rounded" 
-      onClick={onClick}
-      aria-label="Add Key-Value Pair"
-    >
+    <button className="border hover:bg-gray-100 p-1 rounded" onClick={onClick} aria-label="Add Key-Value Pair">
       <BiPlus size={12} />
     </button>
   );
@@ -36,37 +32,21 @@ const AddButton = ({ onClick }: { onClick?: () => void }) => {
 
 const RemoveButton = ({ onClick }: { onClick?: () => void }) => {
   return (
-    <button 
-      className="border hover:bg-gray-100 p-1 rounded" 
-      onClick={onClick}
-      aria-label="Remove Key-Value Pair"
-    >
+    <button className="border hover:bg-gray-100 p-1 rounded" onClick={onClick} aria-label="Remove Key-Value Pair">
       <BiMinus size={12} />
     </button>
   );
 };
 
-const ExpandButton = ({ active, onClick }: { active: boolean, onClick: () => void }) => {
+const ExpandButton = ({ active, onClick }: { active: boolean; onClick: () => void }) => {
   return (
-    <button 
-      className="hover:bg-gray-100 p-1 rounded -mt-1" 
-      onClick={onClick} 
-      aria-label="Expand Key Description"
-    >
+    <button className="hover:bg-gray-100 p-1 rounded -mt-1" onClick={onClick} aria-label="Expand Key Description">
       <BiCaretRight className={`transition-all duration-300 ${active ? 'rotate-90' : ''}`} />
     </button>
   );
 };
 
-const Input = ({
-  id,
-  errors,
-  register,
-  onAdd,
-  onRemove,
-  canRemove = true,
-  onInputChange,
-}: InputProps) => {
+const Input = ({ id, errors, register, onAdd, onRemove, canRemove = true, onInputChange }: InputProps) => {
   const [descriptionExpanded, setDescriptionExpanded] = useState(false);
   return (
     <div className="flex min-h-12">
@@ -75,7 +55,12 @@ const Input = ({
         {canRemove && <RemoveButton onClick={onRemove} />}
       </div>
       <div className="flex flex-col items-center">
-        <ExpandButton onClick={() => {setDescriptionExpanded(!descriptionExpanded)}} active={descriptionExpanded} />
+        <ExpandButton
+          onClick={() => {
+            setDescriptionExpanded(!descriptionExpanded);
+          }}
+          active={descriptionExpanded}
+        />
         <div className="w-0.5 bg-cambio-gray transition-all duration-300 h-4/5"></div>
       </div>
       <div className="w-full relative flex flex-col gap-1 justify-center">
@@ -83,7 +68,7 @@ const Input = ({
           id={`${id}-key`}
           {...register(`${id}-key`, {
             required: true,
-            onChange: () => setTimeout(onInputChange, 0)
+            onChange: () => setTimeout(onInputChange, 0),
           })}
           placeholder="Key Name"
           type="text"
@@ -106,11 +91,13 @@ const Input = ({
             {errors[`${id}-key`]?.message?.toString() || 'Key name is required'}
           </span>
         )}
-        <div className={`transition-all duration-300 ${descriptionExpanded ? 'opacity-100 max-h-24' : 'opacity-0 max-h-0 overflow-hidden'}`}>
+        <div
+          className={`transition-all duration-300 ${descriptionExpanded ? 'opacity-100 max-h-24' : 'opacity-0 max-h-0 overflow-hidden'}`}
+        >
           <textarea
             id={`${id}-description`}
             {...register(`${id}-description`, {
-              onChange: () => setTimeout(onInputChange, 0)
+              onChange: () => setTimeout(onInputChange, 0),
             })}
             placeholder="(Optional) Define keys to enhance AnyParser's accuracy"
             rows={2}
@@ -148,7 +135,7 @@ export default function KeyValueInputs({ onSubmit, isLoading = false }: KeyValue
     reset,
     formState: { errors },
   } = useForm<FieldValues>({
-    shouldUnregister: true
+    shouldUnregister: true,
   });
   const [inputs, setInputs] = useState<string[]>([uuidv4()]);
   const [prevFileIndex, setPrevFileIndex] = useState<number | null>(null);
@@ -157,16 +144,16 @@ export default function KeyValueInputs({ onSubmit, isLoading = false }: KeyValue
   useEffect(() => {
     if (selectedFileIndex === null) return;
     if (selectedFileIndex === prevFileIndex) return; // Skip if same file
-    
+
     setPrevFileIndex(selectedFileIndex);
     const file = files[selectedFileIndex];
     const savedInputs = file?.keyValueInputs || [{ key: '', description: '' }];
-    
+
     // Clear existing form data
     reset();
-    
+
     // Clear existing inputs
-    inputs.forEach(uuid => {
+    inputs.forEach((uuid) => {
       unregister(`${uuid}-key`);
       unregister(`${uuid}-description`);
     });
@@ -187,11 +174,11 @@ export default function KeyValueInputs({ onSubmit, isLoading = false }: KeyValue
   // Save to store whenever inputs change
   const saveToStore = () => {
     if (selectedFileIndex === null) return;
-    
+
     const formValues = getValues();
-    const savedInputs = inputs.map(uuid => ({
+    const savedInputs = inputs.map((uuid) => ({
       key: formValues[`${uuid}-key`] || '',
-      description: formValues[`${uuid}-description`] || ''
+      description: formValues[`${uuid}-description`] || '',
     }));
 
     updateFileAtIndex(selectedFileIndex, 'keyValueInputs', savedInputs);
@@ -200,7 +187,7 @@ export default function KeyValueInputs({ onSubmit, isLoading = false }: KeyValue
   const addInput = () => {
     if (inputs.length < 10) {
       const newUuid = uuidv4();
-      setInputs(prev => [...prev, newUuid]);
+      setInputs((prev) => [...prev, newUuid]);
       toast.success('New input added');
       // Save after adding new input
       setTimeout(saveToStore, 0);
@@ -212,37 +199,37 @@ export default function KeyValueInputs({ onSubmit, isLoading = false }: KeyValue
   const removeInput = (uuid: string) => {
     const position = inputs.indexOf(uuid);
     if (position === -1) return;
-    
+
     // Save the form values before removing
     const formValues = getValues();
     const keyValue = formValues[`${uuid}-key`] || '';
     const descriptionValue = formValues[`${uuid}-description`] || '';
-    
+
     // Unregister the form fields
     unregister(`${uuid}-key`);
     unregister(`${uuid}-description`);
-    
+
     const removedData = {
       uuid,
       position,
       values: {
         key: keyValue,
-        description: descriptionValue
-      }
+        description: descriptionValue,
+      },
     };
-    
-    setInputs(currentInputs => {
-      const newInputs = currentInputs.filter(id => id !== uuid);
+
+    setInputs((currentInputs) => {
+      const newInputs = currentInputs.filter((id) => id !== uuid);
       // Save after removing input
       setTimeout(() => {
         saveToStore();
       }, 0);
       return newInputs;
     });
-    
+
     // Dismiss any existing undo toasts
     toast.dismiss('undo-toast');
-    
+
     toast.success(
       (t) => (
         <div className="flex items-center gap-2">
@@ -251,14 +238,14 @@ export default function KeyValueInputs({ onSubmit, isLoading = false }: KeyValue
             className="text-blue-500 hover:text-blue-700 font-medium cursor-pointer"
             onClick={(e) => {
               e.stopPropagation();
-              
+
               if (removedData) {
                 const insertPosition = Math.min(removedData.position, inputs.length);
-                setInputs(currentInputs => {
+                setInputs((currentInputs) => {
                   const newInputs = [
                     ...currentInputs.slice(0, insertPosition),
                     removedData.uuid,
-                    ...currentInputs.slice(insertPosition)
+                    ...currentInputs.slice(insertPosition),
                   ];
                   setTimeout(() => {
                     setValue(`${removedData.uuid}-key`, removedData.values.key);
@@ -267,7 +254,7 @@ export default function KeyValueInputs({ onSubmit, isLoading = false }: KeyValue
                   }, 0);
                   return newInputs;
                 });
-                
+
                 toast.dismiss(t.id);
                 toast.success('Remove undone');
               }
@@ -277,9 +264,9 @@ export default function KeyValueInputs({ onSubmit, isLoading = false }: KeyValue
           </button>
         </div>
       ),
-      { 
+      {
         duration: 5000,
-        id: 'undo-toast'
+        id: 'undo-toast',
       }
     );
   };
@@ -287,11 +274,11 @@ export default function KeyValueInputs({ onSubmit, isLoading = false }: KeyValue
   const getExtractInstructions = () => {
     const extractInstruction: Record<string, string> = {};
     const formValues = getValues();
-    
-    inputs.forEach(uuid => {
+
+    inputs.forEach((uuid) => {
       const keyValue = formValues[`${uuid}-key`];
       const description = formValues[`${uuid}-description`] || '';
-      
+
       if (keyValue) {
         extractInstruction[keyValue] = description || keyValue;
       }
@@ -309,7 +296,7 @@ export default function KeyValueInputs({ onSubmit, isLoading = false }: KeyValue
     <div className="flex flex-col gap-4">
       <Button
         id="extract-key-value-btn"
-        label={isLoading ? "Extracting..." : "Extract Key-Value"}
+        label={isLoading ? 'Extracting...' : 'Extract Key-Value'}
         onClick={handleSubmit(extractButtonClickHandler)}
         disabled={isLoading}
         aria-label="Extract Key-Value Pairs"
@@ -318,7 +305,7 @@ export default function KeyValueInputs({ onSubmit, isLoading = false }: KeyValue
       <div className="h-[calc(80vh-240px)] overscroll-contain overflow-y-auto">
         <div className="flex flex-col gap-2 p-2">
           {inputs.map((uuid) => (
-            <Input 
+            <Input
               key={uuid}
               id={uuid}
               register={register}
diff --git a/app/components/tutorials/ExtractKeyValuePairTutorial.tsx b/app/components/tutorials/ExtractKeyValuePairTutorial.tsx
index 2d28ae83..0ee2801c 100644
--- a/app/components/tutorials/ExtractKeyValuePairTutorial.tsx
+++ b/app/components/tutorials/ExtractKeyValuePairTutorial.tsx
@@ -28,26 +28,26 @@ const ExtractKeyValuePairTutorial = () => {
   }
 
   return (
-        <Joyride 
-          continuous
-          steps={steps} 
-          floaterProps={{
-              autoOpen: true,
-          }}
-          styles={{
-            options: {
-              primaryColor: 'var(--cambio-gray)',
-            },
-          }}
-          disableOverlay 
-          disableScrolling
-          callback={({ status }) => {
-            if (['finished', 'skipped'].includes(status)) {
-              handleTourEnd();
-            }
-          }}
-        />
+    <Joyride
+      continuous
+      steps={steps}
+      floaterProps={{
+        autoOpen: true,
+      }}
+      styles={{
+        options: {
+          primaryColor: 'var(--cambio-gray)',
+        },
+      }}
+      disableOverlay
+      disableScrolling
+      callback={({ status }) => {
+        if (['finished', 'skipped'].includes(status)) {
+          handleTourEnd();
+        }
+      }}
+    />
   );
 };
 
-export default ExtractKeyValuePairTutorial;
\ No newline at end of file
+export default ExtractKeyValuePairTutorial;
diff --git a/app/globals.css b/app/globals.css
index aa7572f0..8eeb84a9 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -6,14 +6,13 @@
   /* colors */
   --red: #ff5470;
   --cambio-blue: #d2ecf9;
-  --cambio-blue-0: #00A6FB;
-  --cambio-blue-1:#0582CA;
+  --cambio-blue-0: #00a6fb;
+  --cambio-blue-1: #0582ca;
   --cambio-blue-2: #006494;
-  --cambio-blue-3:#003554;
+  --cambio-blue-3: #003554;
   --cambio-blue-4: #051923;
   --cambio-gray: #313131;
-  --cambio-primary: #D1A3A4;
-
+  --cambio-primary: #d1a3a4;
 }
 
 html,
@@ -82,7 +81,8 @@ th {
   background-color: #ccc;
 }
 
-.mapped-table th, .mapped-table td{
+.mapped-table th,
+.mapped-table td {
   background-color: #ffffff;
 }
 .mapped-table {
@@ -125,8 +125,6 @@ th {
   z-index: 1;
 }
 
-
-
 .border-none td {
   border: 1px solid #ddd;
 }
@@ -200,8 +198,3 @@ th {
   scrollbar-width: thin;
   scrollbar-color: #888 #f1f1f1;
 }
-
-
-
-
-
diff --git a/test-results.json b/test-results.json
index b0af6e64..51d89aa6 100644
--- a/test-results.json
+++ b/test-results.json
@@ -15,10 +15,7 @@
     },
     "preserveOutput": "always",
     "reporter": [
-      [
-        "list",
-        null
-      ],
+      ["list", null],
       [
         "json",
         {
@@ -41,9 +38,7 @@
         "name": "chromium",
         "testDir": "/Users/joseortiz/Coding/CambioML/CambioML.github.io/tests",
         "testIgnore": [],
-        "testMatch": [
-          "**/*.@(spec|test).?(c|m)[jt]s?(x)"
-        ],
+        "testMatch": ["**/*.@(spec|test).?(c|m)[jt]s?(x)"],
         "timeout": 30000
       }
     ],
@@ -554,4 +549,4 @@
     "unexpected": 0,
     "flaky": 0
   }
-}
\ No newline at end of file
+}
diff --git a/tests/README.md b/tests/README.md
index 22c48529..4722597c 100644
--- a/tests/README.md
+++ b/tests/README.md
@@ -1,28 +1,33 @@
 # Testing
+
 Overview of running tests for frontend. These should be run before submitting any pull request.
 
 These tests are written using the [`playwright`](https://playwright.dev/) framework.
 
 ## Test Files Overview
+
 - `coreTests.ts` - file containing the main shared tests that are used in the `spec.ts` files.
 - `existingUserTest.spec.ts` - runs through a full suite of user tests for an existing test user profile.
 - `newUserTest.spec.ts` - runs through a full suite of user tests for a new user profile. After running the tests, the user is deleted from the Auth0.
 - `data` - folder containing the data files used in the tests.
   - `testData.ts` - file containing the some ground truth data used in the tests.
 - `helpers`
-    - `auth0Management.ts` - file containing the helper functions for interacting with the Auth0 Management API. Used to delete the new user profile after running the tests.
-    - `similarity.ts` - file containing the helper functions for calculating the similarity between two strings.
+  - `auth0Management.ts` - file containing the helper functions for interacting with the Auth0 Management API. Used to delete the new user profile after running the tests.
+  - `similarity.ts` - file containing the helper functions for calculating the similarity between two strings.
 - `test-results` - folder containing the test results in the `junit` format.
 
-
 ## Setup
+
 1. Install the required packages into your test environment by running the following commands:
+
 ```bash
 npm install
 ```
+
 This will install the `devDependencies` listed in the `package.json` file, which includes the `playwright` framework, and other required packages.
 
 2. In order to run the new user tests, you'll need some Auth0 credentials. Add a `.env` file in the `tests` folder with the following content:
+
 ```bash
 AUTH0_DOMAIN=dev-********.us.auth0.com
 AUTH0_CLIENT_ID=y********
@@ -31,6 +36,7 @@ AUTH0_SANDBOX_CLIENT_ID=********
 ```
 
 ## Husky Pre-commit Hook
+
 Husky is used to run the tests before committing the code. It should be set up to run the tests before committing the code.
 
 You can read more about it [here](https://typicode.github.io/husky/get-started.html).
@@ -40,25 +46,30 @@ This pre-commit hook is configured in `.husky/pre-commit`. As you can see, it ch
 > ⚠️ **WARNING**: Make sure you are running the local server via `npm run dev` before running the tests.
 
 ## Running Tests
+
 1. Make sure you are in the root folder.
 2. Run the following command:
+
 ```bash
 npx playwright test
 ```
 
 If you just want to run an individual test file, you can run the following command:
+
 ```bash
 npx playwright test tests/<test_name>.ts
 ```
 
 For example, if you want to run `existingUsertest`, you can run the following command:
+
 ```bash
 npx playwright test tests/existingUsertest.spec.ts
 ```
 
 ## Test Results
+
 The test output will be displayed in the terminal.
 
 Test results are saved to the `test-results` folder in the root directory. In the `html-report` folder, you can find the test report in html format. On failure, this report will be automatically opened in the browser.
 
-If there are any failed tests, screenshots of the failed parts are also saved in the `test-results` folder.
\ No newline at end of file
+If there are any failed tests, screenshots of the failed parts are also saved in the `test-results` folder.
diff --git a/tests/coreTests.ts b/tests/coreTests.ts
index c902c347..b3b50e9f 100644
--- a/tests/coreTests.ts
+++ b/tests/coreTests.ts
@@ -160,22 +160,26 @@ async function extractKeyValuePair(page: Page, file: TestFile, testFilename: str
   // Fill in the key-value input fields
   const firstInputKey = await page.waitForSelector('input[id^="input-"][id$="-key"][aria-label="Key Name Input"]');
   await firstInputKey?.fill('Total Amount');
-  
+
   // Optional: Add description for better extraction
-  const firstInputDesc = await page.waitForSelector('textarea[id^="input-"][id$="-description"][aria-label="Key Description"]');
+  const firstInputDesc = await page.waitForSelector(
+    'textarea[id^="input-"][id$="-description"][aria-label="Key Description"]'
+  );
   await firstInputDesc?.fill('The total monetary value or sum');
 
   // Add another key-value pair using the add button
   await page.click('button[aria-label="Add Key-Value Pair"]');
-  const secondInputKey = await page.waitForSelector('input[id^="input-"][id$="-key"][aria-label="Key Name Input"]:nth-of-type(2)');
+  const secondInputKey = await page.waitForSelector(
+    'input[id^="input-"][id$="-key"][aria-label="Key Name Input"]:nth-of-type(2)'
+  );
   await secondInputKey?.fill('Date');
-  
+
   // Extract key-value pairs
   await page.click('button[aria-label="Extract Key-Value Pairs"]');
-  
+
   // Wait for the result container
   await page.waitForSelector('#raw-extract-result[aria-label="Extraction Result"]');
-  
+
   const rawExtractResult = await page.textContent('#raw-extract-result');
   expect(rawExtractResult).not.toBeNull();
 
@@ -196,9 +200,9 @@ async function extractKeyValuePair(page: Page, file: TestFile, testFilename: str
   // we'll verify that the extraction produced valid JSON with key-value pairs
   expect(typeof parsedResult).toBe('object');
   expect(parsedResult).not.toBeNull();
-  
+
   // Log the extracted key-value pairs for debugging
   console.log('Key-Value Extraction Result:', JSON.stringify(parsedResult, null, 2));
 }
-  
+
 export { login, signup, uploadFile, extractFileWithPII, extractFileWithoutPii, extractKeyValuePair };
diff --git a/tsconfig.json b/tsconfig.json
index c5f78d18..e06a4454 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -16,13 +16,13 @@
     "incremental": true,
     "plugins": [
       {
-        "name": "next",
-      },
+        "name": "next"
+      }
     ],
     "paths": {
-      "@/*": ["./*"],
-    },
+      "@/*": ["./*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }