From a4bf218057baf9f0c0215a147630ef7830a00388 Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Mon, 12 Aug 2024 18:47:00 -0700
Subject: [PATCH 01/15] Delete button works

---
 .../FieldsAndSoil/FieldsAndSoil.tsx           | 25 ++++++++++++++++---
 .../FieldsAndSoil/FieldsListComponent.tsx     | 12 ++++++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
index 9fb73ea6..edae6d58 100644
--- a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
+++ b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
@@ -47,7 +47,7 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
   toggleEnabled,
 }) => {
   // Builds field info inside the field form module.
-  const [, setFieldsInfo] = useState(farmDetails);
+  const [, setFarmDetails] = useState(farmDetails);
   const [fieldIndex, setFieldIndex] = useState(farmDetails.Fields.length);
   // Only triggered once, it would show list and persists.
   const [isSubmitted, setSubmitted] = useState<boolean>(farmDetails.Fields.length > 0);
@@ -197,13 +197,28 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
         farmInfo.Fields[fieldIndex].Nutrients.nutrientFertilizers.splice(0, 1);
       }
 
-      setFieldsInfo(farmInfo);
+      setFarmDetails(farmInfo);
       setFieldIndex((prevIndex) => prevIndex + 1);
       setSubmitted(true);
       setFieldAdd(false);
     }, 400);
   };
 
+  const removeField = (field: FieldDetailInterface) => {
+    const updatedFarmDetails = { ...farmDetails };
+
+    const fieldIndex = updatedFarmDetails.Fields.findIndex(
+      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
+    );
+
+    updatedFarmDetails.Fields.splice(fieldIndex, 1);
+    setFarmDetails(updatedFarmDetails);
+  };
+
+  const editField = (field: FieldDetailInterface) => {
+    console.log(field);
+  };
+
   const addNewField = () => {
     handleFormState(FIELDS_AND_SOIL, undefined, ACTIVE);
     setFieldAdd(true);
@@ -227,7 +242,11 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
     <>
       {isSubmitted && (
         <>
-          <FieldsListComponent farmDetails={farmDetails} />
+          <FieldsListComponent
+            farmDetails={farmDetails}
+            removeField={removeField}
+            editField={editField}
+          />
           {!isFieldAdded && (
             <FieldsButtonComponent
               addNewField={addNewField}
diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
index bf24c63b..609aabc9 100644
--- a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
+++ b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
@@ -18,9 +18,11 @@ import {
 
 interface FieldListProps {
   farmDetails: FarmDetailsInterface;
+  removeField(field: FieldDetailInterface): void;
+  editField(field: FieldDetailInterface): void;
 }
 
-const FieldsListComponent: FC<FieldListProps> = ({ farmDetails }) => {
+const FieldsListComponent: FC<FieldListProps> = ({ farmDetails, removeField, editField }) => {
   const fieldCount = farmDetails.Fields.length;
   // Will put this here for the meantime until I get insights from Product Owner
   const highValue = '25';
@@ -60,8 +62,12 @@ const FieldsListComponent: FC<FieldListProps> = ({ farmDetails }) => {
                 </StyledListItem>
               </StyledCommentContainerDesktop>
               <StyledFontAwesomeContainer>
-                <FontAwesomeIcon icon={faPencil} />
-                <FontAwesomeIcon icon={faTrashCan} />
+                <button onClick={() => editField(field)}>
+                  <FontAwesomeIcon icon={faPencil} />
+                </button>
+                <button onClick={() => removeField(field)}>
+                  <FontAwesomeIcon icon={faTrashCan} />
+                </button>
               </StyledFontAwesomeContainer>
             </StyledListContainer>
 

From 8be8360a0c601c3601f3d4587bb44cdf0375521d Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Mon, 12 Aug 2024 19:36:07 -0700
Subject: [PATCH 02/15] Remove button styles

---
 .../InputModules/FieldsAndSoil/FieldsListComponent.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
index 609aabc9..fe30ffb5 100644
--- a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
+++ b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
@@ -62,10 +62,16 @@ const FieldsListComponent: FC<FieldListProps> = ({ farmDetails, removeField, edi
                 </StyledListItem>
               </StyledCommentContainerDesktop>
               <StyledFontAwesomeContainer>
-                <button onClick={() => editField(field)}>
+                <button
+                  onClick={() => editField(field)}
+                  style={{ border: 'none', background: 'none' }}
+                >
                   <FontAwesomeIcon icon={faPencil} />
                 </button>
-                <button onClick={() => removeField(field)}>
+                <button
+                  onClick={() => removeField(field)}
+                  style={{ border: 'none', background: 'none' }}
+                >
                   <FontAwesomeIcon icon={faTrashCan} />
                 </button>
               </StyledFontAwesomeContainer>

From 913812a5f69b6f85722f40353229b50f1afddf2b Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Mon, 12 Aug 2024 20:25:28 -0700
Subject: [PATCH 03/15] Edit button kind of works

---
 .../FieldsAndSoil/FieldsAndSoil.tsx            | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
index edae6d58..a315cba7 100644
--- a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
+++ b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
@@ -207,22 +207,29 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
   const removeField = (field: FieldDetailInterface) => {
     const updatedFarmDetails = { ...farmDetails };
 
-    const fieldIndex = updatedFarmDetails.Fields.findIndex(
+    const idx = updatedFarmDetails.Fields.findIndex(
       (f) => f.FieldName === field.FieldName && f.Area === field.Area,
     );
 
-    updatedFarmDetails.Fields.splice(fieldIndex, 1);
+    updatedFarmDetails.Fields.splice(idx, 1);
     setFarmDetails(updatedFarmDetails);
   };
 
   const editField = (field: FieldDetailInterface) => {
-    console.log(field);
+    const idx = farmDetails.Fields.findIndex(
+      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
+    );
+
+    setFieldIndex(idx);
+    setFieldAdd(true);
+    handleFormState(FIELDS_AND_SOIL, undefined, ACTIVE);
   };
 
   const addNewField = () => {
     handleFormState(FIELDS_AND_SOIL, undefined, ACTIVE);
     setFieldAdd(true);
   };
+
   const SoilTextArray: string[] = [
     'Different labs use different soil test methods for phosphorus (P) and potassium (K)',
     'Different methods give different values for the same soil sample',
@@ -238,6 +245,7 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
     'The amount of available potassium given from a recent soil test. Generally expressed in ppm or mg/kg.';
   const pH: string =
     "Soil pH is the measure of a soil's acidity or alkalinity. Ranges between 4 and 9 in most soils.";
+
   return (
     <>
       {isSubmitted && (
@@ -260,7 +268,9 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
 
       {(isFieldAdded || !isSubmitted) && (
         <Formik
-          initialValues={initialValues}
+          initialValues={
+            fieldIndex < farmDetails.Fields.length ? farmDetails.Fields[fieldIndex] : initialValues
+          }
           validationSchema={validationSchema}
           onSubmit={addFieldData}
           validate={(values) => {

From 04160fc563a6b0e0209368b014b61df693c02f0d Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Mon, 12 Aug 2024 20:25:37 -0700
Subject: [PATCH 04/15] Delete button for crops

---
 .../Forms/InputModules/Crops/CropsInfo.tsx     | 18 ++++++++++++++++--
 .../InputModules/Crops/CropsList.styles.ts     |  7 +++++++
 .../Forms/InputModules/Crops/CropsList.tsx     | 11 ++++++++++-
 3 files changed, 33 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
index 0ed93fc9..1f157291 100644
--- a/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
@@ -81,7 +81,7 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
   handleFormState,
   toggleEnabled,
 }) => {
-  const [, setCropsInfo] = useState(farmDetails);
+  const [, setFarmDetails] = useState(farmDetails);
   const [cropInitialValues, setInitialFieldValues] = useState(initialValues);
   // Only triggered once, it would show list and persists.
   const [fieldHasCrop, setFieldHasCrop] = useState<boolean>(checkHasCrops(farmDetails.Fields));
@@ -176,13 +176,26 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
 
     setTimeout(() => {
       farmDetails.Fields[fieldIdx].Crops.push(newCrop);
-      setCropsInfo(farmDetails);
+      setFarmDetails(farmDetails);
       showFormHandler(fieldIdx);
       setInitialFieldValues(initialValues);
       setFieldHasCrop(checkHasCrops(farmDetails.Fields));
     }, 400);
   };
 
+  const removeCrop = (field: FieldDetailInterface, crop: CropsDetailsInterface) => {
+    const updatedFarmDetails = { ...farmDetails };
+
+    const fieldIdx = updatedFarmDetails.Fields.findIndex(
+      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
+    );
+
+    const cropIdx = updatedFarmDetails.Fields[fieldIdx].Crops.findIndex((c) => c === crop);
+
+    updatedFarmDetails.Fields[fieldIdx].Crops.splice(cropIdx, 1);
+    setFarmDetails(updatedFarmDetails);
+  };
+
   const submitFarmInfo = () => {
     updateFarmDetails(farmDetails, CROPS_INFORMATION);
   };
@@ -197,6 +210,7 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
           <CropsList
             field={field}
             farmDetails={farmDetails}
+            removeCrop={removeCrop}
           />
 
           <Formik
diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.styles.ts b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.styles.ts
index e6c46435..8ed81514 100644
--- a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.styles.ts
+++ b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.styles.ts
@@ -20,6 +20,13 @@ const StyledListContainer = styled.div`
   gap: 4px;
   align-items: flex-start;
 
+  .CropsList {
+    align-items: flex-start;
+    button {
+      margin-top: 1px;
+    }
+  }
+
   @media (min-width: ${screenSizes.desktop}) {
     flex-direction: row;
     gap: 110px;
diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
index bc11b50b..a0f1f0cf 100644
--- a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
@@ -4,13 +4,16 @@ import FieldDetailInterface from '@Interface/FieldDetailsInterface';
 import CropsDetailsInterface from '@Interface/CropsDetailsInterface';
 import { StyledListItem, StyledCropsGroup } from '../ListComponent.styles';
 import { StyledListContainer, StyledFieldInfoList } from './CropsList.styles';
+import { faTrashCan } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
 interface CropsListComponentProps {
   field: FieldDetailInterface;
   farmDetails: FarmDetailsInterface;
+  removeCrop(field: FieldDetailInterface, crop: CropsDetailsInterface): void;
 }
 
-const CropsList: FC<CropsListComponentProps> = ({ farmDetails, field }) => {
+const CropsList: FC<CropsListComponentProps> = ({ farmDetails, field, removeCrop }) => {
   const fieldIndex = farmDetails.Fields.indexOf(field);
   return (
     <StyledFieldInfoList isFirstChild={fieldIndex === 0}>
@@ -32,6 +35,12 @@ const CropsList: FC<CropsListComponentProps> = ({ farmDetails, field }) => {
               <div className="CropsList">
                 <h2>Crop</h2>
                 <h2>{idx + 1}</h2>
+                <button
+                  onClick={() => removeCrop(field, crop)}
+                  style={{ border: 'none', background: 'none' }}
+                >
+                  <FontAwesomeIcon icon={faTrashCan} />
+                </button>
               </div>
               <p key={crop.cropId}>{crop.cropId === '75' ? 'Blueberry' : 'Raspberry'}</p>
             </StyledListItem>

From 3c891baceffd5ee58ab488d7a0b512271ab96a3f Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Mon, 12 Aug 2024 20:41:32 -0700
Subject: [PATCH 05/15] Fertilizers can be deleted

---
 .../Commons/Forms/InputModules/Crops/CropsList.tsx |  4 ++--
 .../Forms/InputModules/Fertilizers/Fertilizers.tsx | 14 +++++++++++++-
 .../Fertilizers/FertilizersListComponent.tsx       | 13 +++++++++----
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
index a0f1f0cf..7fd9a51a 100644
--- a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
@@ -2,10 +2,10 @@ import { FC } from 'react';
 import FarmDetailsInterface from '@Interface/FarmDetailsInterface';
 import FieldDetailInterface from '@Interface/FieldDetailsInterface';
 import CropsDetailsInterface from '@Interface/CropsDetailsInterface';
-import { StyledListItem, StyledCropsGroup } from '../ListComponent.styles';
-import { StyledListContainer, StyledFieldInfoList } from './CropsList.styles';
 import { faTrashCan } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { StyledListItem, StyledCropsGroup } from '../ListComponent.styles';
+import { StyledListContainer, StyledFieldInfoList } from './CropsList.styles';
 
 interface CropsListComponentProps {
   field: FieldDetailInterface;
diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
index 0b794fbf..3a31fe65 100644
--- a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
@@ -112,10 +112,22 @@ const FertilizersInfo: FC<InputModuleProps> = ({
     setAddButtonClicked(true);
   };
 
+  const removeFert = (fertilizer: FertilizerInterface) => {
+    const updatedFerts = [...fertilizersDetails];
+
+    const fertIdx = fertilizersDetails.findIndex((f) => f === fertilizer);
+
+    updatedFerts.splice(fertIdx, 1);
+    if (updateFertDetails) updateFertDetails([...updatedFerts]);
+  };
+
   return (
     <>
       {fertilizersDetails.length > 0 && (
-        <FertilizersListComponent fertilizerDetails={fertilizersDetails} />
+        <FertilizersListComponent
+          fertilizerDetails={fertilizersDetails}
+          removeFert={removeFert}
+        />
       )}
 
       {!isAddButtonClicked && (
diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
index 4d1a851b..9fec4e0e 100644
--- a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons';
+import { faTrashCan } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import FertilizerInterface from '@Interface/FertilizerInterface';
 import getFertilizerOption from '@Utils/getFertID';
@@ -19,9 +19,10 @@ import {
 
 interface FertilizerProps {
   fertilizerDetails: FertilizerInterface[];
+  removeFert(fertilizer: FertilizerInterface): void;
 }
 
-const FertilizersListComponent: FC<FertilizerProps> = ({ fertilizerDetails }) => {
+const FertilizersListComponent: FC<FertilizerProps> = ({ fertilizerDetails, removeFert }) => {
   const fieldCount = fertilizerDetails.length;
   return (
     <StyledFieldInfoList>
@@ -70,8 +71,12 @@ const FertilizersListComponent: FC<FertilizerProps> = ({ fertilizerDetails }) =>
                 )}
               </DesktopFertilizerGroup>
               <StyledFontAwesomeContainer>
-                <FontAwesomeIcon icon={faPencil} />
-                <FontAwesomeIcon icon={faTrashCan} />
+                <button
+                  onClick={() => removeFert(fertilizer)}
+                  style={{ border: 'none', background: 'none' }}
+                >
+                  <FontAwesomeIcon icon={faTrashCan} />
+                </button>
               </StyledFontAwesomeContainer>
             </FertilizerTypeAndFontAwesomeContainer>
 

From 9442c9ec6f438b309016b952f0b28656c02664e2 Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Mon, 12 Aug 2024 22:02:00 -0700
Subject: [PATCH 06/15] Calculate Nutrients delete button works

---
 .../CalculateNutrients/CalculateNutrients.tsx | 16 ++++++++
 .../CalculateNutrientsList.styles.ts          | 14 ++++++-
 .../CalculateNutrientsList.tsx                | 40 +++++++++++++++++--
 3 files changed, 64 insertions(+), 6 deletions(-)

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx
index 9ab6141c..f12414bd 100644
--- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx
+++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx
@@ -294,6 +294,21 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
     return [];
   };
 
+  const removeFertFromField = (field: FieldDetailInterface, fertilizer: FertilizerInterface) => {
+    const updatedFarmDetails = { ...farmDetails };
+
+    const fieldIdx = updatedFarmDetails.Fields.findIndex(
+      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
+    );
+
+    const fertIdx = updatedFarmDetails.Fields[fieldIdx].Nutrients.nutrientFertilizers.findIndex(
+      (f) => f === fertilizer,
+    );
+
+    updatedFarmDetails.Fields[fieldIdx].Nutrients.nutrientFertilizers.splice(fertIdx, 1);
+    updateFarmDetails(updatedFarmDetails, CALCULATE_NUTRIENTS);
+  };
+
   return (
     <>
       <Formik
@@ -443,6 +458,7 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
                     field={farmDetails.Fields[selectedFieldIndex]}
                     cropBalances={cropBalances}
                     resultBalance={resultBalance}
+                    removeFert={removeFertFromField}
                   />
                 )}
             </StyledFieldContainer>
diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
index ce6ffee0..ee132865 100644
--- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
+++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
@@ -67,11 +67,18 @@ const StyledAgronomic = styled.div`
   width: 100%;
   justify-content: center;
   align-items: center;
-    margin: 28px auto 48px auto;
+  margin: 28px auto 48px auto;
+
+  td {
+    text-align: center;
+  }
 
   @media (min-width: ${screenSizes.desktop}) {
     width: 90%;
-
+    button {
+      display: none;
+    }
+  }
 `;
 
 const StyledRemoval = styled.div`
@@ -126,6 +133,9 @@ const StyledTable = styled.table<TableProps>`
     .cropRemovalCol1 {
       display: none;
     }
+    .delBtnSpacer {
+      display: none;
+    }
   }
 `;
 
diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
index 47878269..d96e5f89 100644
--- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
+++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
@@ -1,7 +1,11 @@
 import { FC } from 'react';
 import CropsDetailsInterface from '@Interface/CropsDetailsInterface';
 import FertilizerInterface from '@Interface/FertilizerInterface';
-import { faCircleCheck, faTriangleExclamation } from '@fortawesome/free-solid-svg-icons';
+import {
+  faCircleCheck,
+  faTrashCan,
+  faTriangleExclamation,
+} from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import MainBalanceInterface from '@Interface/MainBalanceInterface';
 import FieldDetailInterface from '@Interface/FieldDetailsInterface';
@@ -20,11 +24,17 @@ interface CalculationListProps {
   field: FieldDetailInterface;
   cropBalances: MainBalanceInterface[];
   resultBalance: MainBalanceInterface;
+  removeFert(field: FieldDetailInterface, fertilizer: FertilizerInterface): void;
 }
 
 const zeroConstant: number = 0;
 
-const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, resultBalance }) => {
+const CalculationList: FC<CalculationListProps> = ({
+  field,
+  cropBalances,
+  resultBalance,
+  removeFert,
+}) => {
   const getResultsIcon = (nutrient: number) =>
     nutrient >= 0 ? faCircleCheck : faTriangleExclamation;
 
@@ -75,6 +85,9 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                 <td>
                   <p>{cropBalances[index]?.agronomic?.K ?? zeroConstant}</p>
                 </td>
+                <td aria-hidden="true">
+                  <h4 className="delBtnSpacer">&nbsp;</h4>
+                </td>
               </tr>
             ))}
 
@@ -95,7 +108,7 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                     <tr key={`${fertilizer.fertilizerId}-${idx}`}>
                       <td>
                         <p className="col1">
-                          {getFertilizerOption(fertilizer.fertilizerId.toString())?.label ??
+                          {getFertilizerOption(fertilizer.fertilizerId?.toString())?.label ??
                             fertilizer.fertilizerId}
                         </p>
                       </td>
@@ -108,6 +121,14 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                       <td>
                         <p>{fertilizer.fertK2o}</p>
                       </td>
+                      <td>
+                        <button
+                          onClick={() => removeFert(field, fertilizer)}
+                          style={{ border: 'none', background: 'none' }}
+                        >
+                          <FontAwesomeIcon icon={faTrashCan} />
+                        </button>
+                      </td>
                     </tr>
                   ),
                 )}
@@ -208,6 +229,9 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                 <td>
                   <p>{cropBalances[index]?.cropRemoval?.K ?? zeroConstant}</p>
                 </td>
+                <td aria-hidden="true">
+                  <h4>&nbsp;</h4>
+                </td>
               </tr>
             ))}
 
@@ -228,7 +252,7 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                     <tr key={`${fertilizer.fertilizerId}-${idx}`}>
                       <td>
                         <p className="cropRemovalCol1 col1">
-                          {getFertilizerOption(fertilizer.fertilizerId.toString())?.label ??
+                          {getFertilizerOption(fertilizer.fertilizerId?.toString())?.label ??
                             fertilizer.fertilizerId}
                         </p>
                       </td>
@@ -241,6 +265,14 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
                       <td>
                         <p>{fertilizer.fertK2o}</p>
                       </td>
+                      <td>
+                        <button
+                          onClick={() => removeFert(field, fertilizer)}
+                          style={{ border: 'none', background: 'none' }}
+                        >
+                          <FontAwesomeIcon icon={faTrashCan} />
+                        </button>
+                      </td>
                     </tr>
                   ),
                 )}

From 04daeeb853a03828e1996541b9ef14a7851d93b3 Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Mon, 12 Aug 2024 22:08:26 -0700
Subject: [PATCH 07/15] Add button type and aria label

---
 .../CalculateNutrients/CalculateNutrientsList.tsx             | 4 ++++
 frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx   | 2 ++
 .../InputModules/Fertilizers/FertilizersListComponent.tsx     | 2 ++
 .../Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx  | 4 ++++
 4 files changed, 12 insertions(+)

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
index d96e5f89..fbf0e7fe 100644
--- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
+++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
@@ -123,8 +123,10 @@ const CalculationList: FC<CalculationListProps> = ({
                       </td>
                       <td>
                         <button
+                          type="button"
                           onClick={() => removeFert(field, fertilizer)}
                           style={{ border: 'none', background: 'none' }}
+                          aria-label="Delete button"
                         >
                           <FontAwesomeIcon icon={faTrashCan} />
                         </button>
@@ -267,8 +269,10 @@ const CalculationList: FC<CalculationListProps> = ({
                       </td>
                       <td>
                         <button
+                          type="button"
                           onClick={() => removeFert(field, fertilizer)}
                           style={{ border: 'none', background: 'none' }}
+                          aria-label="Delete fertilizer from field"
                         >
                           <FontAwesomeIcon icon={faTrashCan} />
                         </button>
diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
index 7fd9a51a..5ca3fe3f 100644
--- a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
@@ -36,8 +36,10 @@ const CropsList: FC<CropsListComponentProps> = ({ farmDetails, field, removeCrop
                 <h2>Crop</h2>
                 <h2>{idx + 1}</h2>
                 <button
+                  type="button"
                   onClick={() => removeCrop(field, crop)}
                   style={{ border: 'none', background: 'none' }}
+                  aria-label="delete crop"
                 >
                   <FontAwesomeIcon icon={faTrashCan} />
                 </button>
diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
index 9fec4e0e..3760c8e1 100644
--- a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
@@ -72,8 +72,10 @@ const FertilizersListComponent: FC<FertilizerProps> = ({ fertilizerDetails, remo
               </DesktopFertilizerGroup>
               <StyledFontAwesomeContainer>
                 <button
+                  type="button"
                   onClick={() => removeFert(fertilizer)}
                   style={{ border: 'none', background: 'none' }}
+                  aria-label="delete fertilizer"
                 >
                   <FontAwesomeIcon icon={faTrashCan} />
                 </button>
diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
index fe30ffb5..415e03f8 100644
--- a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
+++ b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsListComponent.tsx
@@ -63,14 +63,18 @@ const FieldsListComponent: FC<FieldListProps> = ({ farmDetails, removeField, edi
               </StyledCommentContainerDesktop>
               <StyledFontAwesomeContainer>
                 <button
+                  type="button"
                   onClick={() => editField(field)}
                   style={{ border: 'none', background: 'none' }}
+                  aria-label="edit field"
                 >
                   <FontAwesomeIcon icon={faPencil} />
                 </button>
                 <button
+                  type="button"
                   onClick={() => removeField(field)}
                   style={{ border: 'none', background: 'none' }}
+                  aria-label="delete field"
                 >
                   <FontAwesomeIcon icon={faTrashCan} />
                 </button>

From 7d6910dcfd1a414183d71c1a6bf6591d7fb01031 Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Tue, 13 Aug 2024 17:14:18 -0700
Subject: [PATCH 08/15] Fix Region wrong value

---
 frontend/src/Constants/FarmRegionOptions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/Constants/FarmRegionOptions.ts b/frontend/src/Constants/FarmRegionOptions.ts
index 47b822f7..bcac7e69 100644
--- a/frontend/src/Constants/FarmRegionOptions.ts
+++ b/frontend/src/Constants/FarmRegionOptions.ts
@@ -34,7 +34,7 @@ const FarmRegionOptions: OptionInterface[] = [
     label: 'Fraser Valley, West (Delta to Langley/Maple Ridge)',
   },
   {
-    value: '9',
+    value: '11',
     label: 'Fraser-Fort George',
   },
   {

From c806d2c5223754b1ea7120290a7cb59b5ab090fc Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Tue, 13 Aug 2024 18:01:00 -0700
Subject: [PATCH 09/15] Dont remove data on field edit

---
 .../FieldsAndSoil/FieldsAndSoil.tsx           | 58 +++++--------------
 1 file changed, 15 insertions(+), 43 deletions(-)

diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
index a315cba7..63cd3311 100644
--- a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
+++ b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
@@ -125,6 +125,7 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
       };
 
       const newField: FieldDetailInterface = {
+        ...(farmDetails.Fields[fieldIndex] || initialValues),
         Id: fieldIndex,
         FieldName: values.FieldName,
         Area: values.Area,
@@ -145,57 +146,28 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
           leafTissueP: values.LeafTest.leafTissueP,
           leafTissueK: values.LeafTest.leafTissueK,
         },
-        Nutrients: {
-          nutrientManures: null,
-          nutrientFertilizers: [
-            {
-              id: 0,
-              fertilizerTypeId: '',
-              fertilizerId: '',
-              applUnitId: '',
-              applRate: 0,
-              applDate: '',
-              applMethodId: '',
-              customN: 0,
-              customP2o5: 0,
-              customK2o: 0,
-              fertN: 0,
-              fertP2o5: 0,
-              fertK2o: 0,
-              liquidDensity: 0,
-              liquidDensityUnitId: '',
-            },
-          ],
-          nutrientOthers: [],
-        },
-        Crops: [
-          {
-            id: 0,
-            cropId: '',
-            yield: 0,
-            plantAgeYears: '',
-            numberOfPlantsPerAcre: 0,
-            distanceBtwnPlantsRows: '',
-            willPlantsBePruned: false,
-            whereWillPruningsGo: '',
-            willSawdustBeApplied: false,
-          },
-        ],
       };
+      console.log(newField);
 
       if (values.HasSoilTest === false) newField.SoilTest = noSoilTestVal;
       if (values.HasLeafTest === false) newField.LeafTest = noLeafTestVal;
 
+      if (
+        farmDetails.Fields.find(
+          (f) => f.FieldName === newField.FieldName && f.Area === newField.Area,
+        )
+      )
+        removeField(newField);
       farmInfo.Fields.push(newField);
 
       // splice or pop to remove Crops after getting pushed to array
-      if (farmInfo.Fields[fieldIndex].Crops.length === 1) {
-        // Crops is not optional so this line is needed
-        farmInfo.Fields[fieldIndex].Crops.splice(0, 1);
-      }
-      if (farmInfo.Fields[fieldIndex].Nutrients.nutrientFertilizers.length === 1) {
-        farmInfo.Fields[fieldIndex].Nutrients.nutrientFertilizers.splice(0, 1);
-      }
+      // if (farmInfo.Fields[fieldIndex].Crops.length === 1) {
+      //   // Crops is not optional so this line is needed
+      //   farmInfo.Fields[fieldIndex].Crops.splice(0, 1);
+      // }
+      // if (farmInfo.Fields[fieldIndex].Nutrients.nutrientFertilizers.length === 1) {
+      //   farmInfo.Fields[fieldIndex].Nutrients.nutrientFertilizers.splice(0, 1);
+      // }
 
       setFarmDetails(farmInfo);
       setFieldIndex((prevIndex) => prevIndex + 1);

From aa36aa6d63aec13dfae00f2539aa4a2352797c8b Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Tue, 13 Aug 2024 18:04:58 -0700
Subject: [PATCH 10/15] Lint

---
 .../FieldsAndSoil/FieldsAndSoil.tsx           | 52 +++++++++----------
 1 file changed, 26 insertions(+), 26 deletions(-)

diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
index 63cd3311..0f48996f 100644
--- a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
+++ b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
@@ -102,6 +102,32 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
     }),
   });
 
+  const removeField = (field: FieldDetailInterface) => {
+    const updatedFarmDetails = { ...farmDetails };
+
+    const idx = updatedFarmDetails.Fields.findIndex(
+      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
+    );
+
+    updatedFarmDetails.Fields.splice(idx, 1);
+    setFarmDetails(updatedFarmDetails);
+  };
+
+  const editField = (field: FieldDetailInterface) => {
+    const idx = farmDetails.Fields.findIndex(
+      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
+    );
+
+    setFieldIndex(idx);
+    setFieldAdd(true);
+    handleFormState(FIELDS_AND_SOIL, undefined, ACTIVE);
+  };
+
+  const addNewField = () => {
+    handleFormState(FIELDS_AND_SOIL, undefined, ACTIVE);
+    setFieldAdd(true);
+  };
+
   /**
    *
    * @param values : It's of type FieldDetailInterface, it calls, FieldName, Area, and Comments
@@ -176,32 +202,6 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
     }, 400);
   };
 
-  const removeField = (field: FieldDetailInterface) => {
-    const updatedFarmDetails = { ...farmDetails };
-
-    const idx = updatedFarmDetails.Fields.findIndex(
-      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
-    );
-
-    updatedFarmDetails.Fields.splice(idx, 1);
-    setFarmDetails(updatedFarmDetails);
-  };
-
-  const editField = (field: FieldDetailInterface) => {
-    const idx = farmDetails.Fields.findIndex(
-      (f) => f.FieldName === field.FieldName && f.Area === field.Area,
-    );
-
-    setFieldIndex(idx);
-    setFieldAdd(true);
-    handleFormState(FIELDS_AND_SOIL, undefined, ACTIVE);
-  };
-
-  const addNewField = () => {
-    handleFormState(FIELDS_AND_SOIL, undefined, ACTIVE);
-    setFieldAdd(true);
-  };
-
   const SoilTextArray: string[] = [
     'Different labs use different soil test methods for phosphorus (P) and potassium (K)',
     'Different methods give different values for the same soil sample',

From ede6a6ef91f4882f377b1a73ec1574d637971264 Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Tue, 13 Aug 2024 18:42:17 -0700
Subject: [PATCH 11/15] Update to allow optional crops

---
 .../Forms/InputModules/Crops/CropsInfo.tsx       | 16 ++++++++--------
 .../Forms/InputModules/Crops/CropsList.tsx       |  2 +-
 .../InputModules/FieldsAndSoil/FieldsAndSoil.tsx |  9 +++++++--
 frontend/src/Utils/convertToNMP.ts               |  2 +-
 4 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
index 1f157291..9b29cb27 100644
--- a/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Crops/CropsInfo.tsx
@@ -47,7 +47,7 @@ import CropsButtonGroup from './CropsButtonGroup';
 const checkHasCrops = (Fields: FieldDetailInterface[]) => {
   let hasCrop = false;
   Fields.forEach((field) => {
-    if (field.Crops.length > 0) {
+    if (field.Crops && field.Crops.length > 0) {
       hasCrop = true;
     }
   });
@@ -158,9 +158,9 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
     );
   };
 
-  const addCrop = (values: SubmissionCropsInterface, fieldIdx: number, cropIdx: number): void => {
+  const addCrop = (values: SubmissionCropsInterface, fieldIdx: number): void => {
     const newCrop: CropsDetailsInterface = {
-      id: cropIdx,
+      id: farmDetails.Fields[fieldIdx].Crops?.length ?? 0,
       cropId: values.cropId,
       yield: values.yield,
       plantAgeYears: values.plantAgeYears,
@@ -175,7 +175,7 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
     };
 
     setTimeout(() => {
-      farmDetails.Fields[fieldIdx].Crops.push(newCrop);
+      farmDetails.Fields[fieldIdx].Crops?.push(newCrop);
       setFarmDetails(farmDetails);
       showFormHandler(fieldIdx);
       setInitialFieldValues(initialValues);
@@ -190,9 +190,9 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
       (f) => f.FieldName === field.FieldName && f.Area === field.Area,
     );
 
-    const cropIdx = updatedFarmDetails.Fields[fieldIdx].Crops.findIndex((c) => c === crop);
+    const cropIdx = updatedFarmDetails.Fields[fieldIdx].Crops?.findIndex((c) => c === crop);
 
-    updatedFarmDetails.Fields[fieldIdx].Crops.splice(cropIdx, 1);
+    updatedFarmDetails.Fields[fieldIdx].Crops?.splice(cropIdx ?? 0, 1);
     setFarmDetails(updatedFarmDetails);
   };
 
@@ -217,7 +217,7 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
             initialValues={cropInitialValues}
             validationSchema={validationSchema}
             onSubmit={(values, { resetForm }) => {
-              addCrop(values, index, field.Crops.length);
+              addCrop(values, index);
               resetForm();
             }}
             validate={(values) => {
@@ -346,7 +346,7 @@ const CropsInfoComponent: FC<InputModuleProps> = ({
             }
           </Formik>
 
-          {!hasFieldBeenSelected[index] && field.Crops.length < 2 && (
+          {!hasFieldBeenSelected[index] && (field.Crops?.length ?? 0) < 2 && (
             <StyledNewFieldButtonContainer formCrops>
               <StyledNewFieldButtonController>
                 <Button
diff --git a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
index 5ca3fe3f..15138bfb 100644
--- a/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx
@@ -26,7 +26,7 @@ const CropsList: FC<CropsListComponentProps> = ({ farmDetails, field, removeCrop
           <p key={field.FieldName}>{field.FieldName}</p>
         </StyledListItem>
         <StyledCropsGroup>
-          {field.Crops.map((crop: CropsDetailsInterface, idx: number) => (
+          {field.Crops?.map((crop: CropsDetailsInterface, idx: number) => (
             <StyledListItem
               desktopWidth="160px"
               mobileWidth="121px"
diff --git a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
index 0f48996f..0d3d57cf 100644
--- a/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
+++ b/frontend/src/Commons/Forms/InputModules/FieldsAndSoil/FieldsAndSoil.tsx
@@ -53,13 +53,15 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
   const [isSubmitted, setSubmitted] = useState<boolean>(farmDetails.Fields.length > 0);
   // Would trigger when new field button is clicked.
   const [isFieldAdded, setFieldAdd] = useState<boolean>(false);
+  const [initialValues, setInitialValues] = useState<FieldDetailInterface>(
+    initialFarmDetails.Fields[0],
+  );
 
   const radioOptions = [
     { id: 'true', label: 'Yes', value: true },
     { id: 'false', label: 'No', value: false },
   ];
 
-  const initialValues: FieldDetailInterface = initialFarmDetails.Fields[0];
   const textAreaMaxLength: number = 200;
   const validationSchema = Yup.object().shape({
     FieldName: Yup.string().max(24).required('Required'),
@@ -118,6 +120,8 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
       (f) => f.FieldName === field.FieldName && f.Area === field.Area,
     );
 
+    setInitialValues(field);
+    removeField(field);
     setFieldIndex(idx);
     setFieldAdd(true);
     handleFormState(FIELDS_AND_SOIL, undefined, ACTIVE);
@@ -172,8 +176,8 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
           leafTissueP: values.LeafTest.leafTissueP,
           leafTissueK: values.LeafTest.leafTissueK,
         },
+        Crops: farmDetails.Fields[fieldIndex]?.Crops ?? [],
       };
-      console.log(newField);
 
       if (values.HasSoilTest === false) newField.SoilTest = noSoilTestVal;
       if (values.HasLeafTest === false) newField.LeafTest = noLeafTestVal;
@@ -195,6 +199,7 @@ const FieldsAndSoilComponent: FC<InputModuleProps> = ({
       //   farmInfo.Fields[fieldIndex].Nutrients.nutrientFertilizers.splice(0, 1);
       // }
 
+      setInitialValues(initialValues);
       setFarmDetails(farmInfo);
       setFieldIndex((prevIndex) => prevIndex + 1);
       setSubmitted(true);
diff --git a/frontend/src/Utils/convertToNMP.ts b/frontend/src/Utils/convertToNMP.ts
index ca52be20..738257bc 100644
--- a/frontend/src/Utils/convertToNMP.ts
+++ b/frontend/src/Utils/convertToNMP.ts
@@ -31,7 +31,7 @@ const convertToNMP = (
   prevDetails: NmpInterface,
 ): NmpInterface => {
   const newFields: NmpFieldInterface[] = newDetails.Fields.map((field: FieldDetailInterface) => {
-    const newCrops: NmpCropInterface[] = field.Crops.map((crop: CropsDetailsInterface) => ({
+    const newCrops: NmpCropInterface[] = field.Crops?.map((crop: CropsDetailsInterface) => ({
       ...templateCropNMP,
       id: crop.id,
       cropId: crop.cropId,

From 2a187c5728e4d5bfc6d3de2104d2b1644ff855fe Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Tue, 13 Aug 2024 20:06:11 -0700
Subject: [PATCH 12/15] Minor NExt button fix

---
 .../Forms/InputModules/Fertilizers/Fertilizers.tsx        | 2 ++
 .../Fertilizers/FertilizersButtonComponent.tsx            | 8 ++++++--
 frontend/src/Views/MainPage/MainPage.tsx                  | 4 ++++
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
index 3a31fe65..b83e6890 100644
--- a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
@@ -134,6 +134,8 @@ const FertilizersInfo: FC<InputModuleProps> = ({
         <FertilizersButtonComponent
           addNewFertilizer={addNewFertilizer}
           handleFormState={handleFormState}
+          fertDetails={fertilizersDetails}
+          updateFertDetails={updateFertDetails}
         />
       )}
 
diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx
index 8eca8e03..aa632382 100644
--- a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx
@@ -4,7 +4,6 @@ import CmdOptions from '@Constants/CmdOptions';
 import Button from '@Commons/Button/Button';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlus } from '@fortawesome/free-solid-svg-icons';
-import { COMPLETED } from '@Constants/ModuleStatus';
 import {
   StyledButtonGroupContainer,
   StyledButtonContainer,
@@ -13,15 +12,20 @@ import {
   StyledNewFieldButtonController,
 } from '@Commons/Button/FieldButtonGroup.styles';
 import { FERTILIZERS } from '@Constants/ModuleIDs';
+import FertilizerInterface from '@Interface/FertilizerInterface';
 
 type ButtonComponentProps = {
   addNewFertilizer: () => void;
   handleFormState(cmd: string, toggle?: boolean, status?: string, moveBackModuleID?: string): void;
+  updateFertDetails?(fertDetails: FertilizerInterface[]): void;
+  fertDetails: FertilizerInterface[];
 };
 
 const FertilizersButtonComponent: FC<ButtonComponentProps> = ({
   addNewFertilizer,
   handleFormState,
+  updateFertDetails,
+  fertDetails,
 }) => (
   <StyledButtonGroupContainer>
     <StyledNewFieldButtonContainer>
@@ -60,7 +64,7 @@ const FertilizersButtonComponent: FC<ButtonComponentProps> = ({
           disabled={false}
           text={ComponentText.NEXT}
           handleClick={() => {
-            handleFormState(CmdOptions.FORWARDS, undefined, COMPLETED);
+            if (updateFertDetails) updateFertDetails(fertDetails);
           }}
         />
       </StyledButtonContainer>
diff --git a/frontend/src/Views/MainPage/MainPage.tsx b/frontend/src/Views/MainPage/MainPage.tsx
index f4cd34ba..52dc6843 100644
--- a/frontend/src/Views/MainPage/MainPage.tsx
+++ b/frontend/src/Views/MainPage/MainPage.tsx
@@ -20,6 +20,7 @@ import FormModule from '@Commons/Forms/FormModule/FormModule';
 import { loadFertDetails } from '@Utils/getLocalFertilizers';
 import * as InputModules from '@Commons/Forms/InputModules/index';
 import LocalStorageNames from '@Constants/LocalStorageNames';
+import { FERTILIZERS } from '@Constants/ModuleIDs';
 import { StyledMain, StyledMainContainer } from './MainPage.styles';
 
 const initialFertilizersDetails: FertilizerInterface[] = loadFertDetails();
@@ -177,6 +178,9 @@ const MainPage: FC = () => {
    * */
   const updateFertDetails = (newFerts: FertilizerInterface[]): void => {
     setFertDetails(newFerts);
+    if (formStates[currForm].id === FERTILIZERS)
+      handleFormState(CmdOptions.FORWARDS, undefined, COMPLETED);
+    else handleFormState(FERTILIZERS, true);
   };
 
   const scrollHeader = useCallback(() => {

From 24a3c9a31f686803314cb7f7aeb31d7769f87a87 Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Tue, 13 Aug 2024 21:02:15 -0700
Subject: [PATCH 13/15] Fixed some Fertilizer deletion bug

---
 .../Commons/Forms/FormModule/FormModule.tsx   |  2 +-
 .../InputModules/Fertilizers/Fertilizers.tsx  | 22 ++++++++++++-------
 .../FertilizersButtonComponent.tsx            |  4 ++--
 .../Fertilizers/FertilizersListComponent.tsx  | 12 +++++++---
 frontend/src/Interface/InputModuleProps.tsx   |  2 +-
 frontend/src/Views/MainPage/MainPage.tsx      |  4 +++-
 6 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/frontend/src/Commons/Forms/FormModule/FormModule.tsx b/frontend/src/Commons/Forms/FormModule/FormModule.tsx
index 2ba9c110..22a9fe1a 100644
--- a/frontend/src/Commons/Forms/FormModule/FormModule.tsx
+++ b/frontend/src/Commons/Forms/FormModule/FormModule.tsx
@@ -35,7 +35,7 @@ interface FormModuleProps {
   fertilizersDetails?: FertilizerInterface[];
   toggleEnabled?: boolean;
   updateFarmDetails(farmDetails: FarmDetailsInterface, inputModuleID: string): void;
-  updateFertDetails(nutrientDetails: FertilizerInterface[]): void;
+  updateFertDetails(nutrientDetails: FertilizerInterface[], moveNext?: boolean): void;
   handleFormState(cmd: string, toggle?: boolean, status?: string): void;
 }
 
diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
index b83e6890..9a80a6ba 100644
--- a/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx
@@ -34,6 +34,7 @@ const FertilizersInfo: FC<InputModuleProps> = ({
 }) => {
   const initialFieldValues = initialFarmDetails.Fields[0].Nutrients[0];
   const [isAddButtonClicked, setAddButtonClicked] = useState<boolean>(false);
+  const [fertDetails, setFertDetails] = useState<FertilizerInterface[]>(fertilizersDetails);
 
   const validationSchema = Yup.object().shape({
     fertilizerTypeId: Yup.string().required('Required'),
@@ -85,7 +86,7 @@ const FertilizersInfo: FC<InputModuleProps> = ({
     fertK20Value = fertValues.K;
 
     const newFertilizer: FertilizerInterface = {
-      id: fertilizersDetails.length,
+      id: fertDetails.length,
       fertilizerTypeId: values.fertilizerTypeId,
       fertilizerId: values.fertilizerTypeId.includes('(Custom)')
         ? tempFertilizerId
@@ -104,7 +105,10 @@ const FertilizersInfo: FC<InputModuleProps> = ({
       liquidDensityUnitId: '',
     };
 
-    if (updateFertDetails) updateFertDetails([...fertilizersDetails, newFertilizer]);
+    fertDetails.push(newFertilizer);
+    setFertDetails(fertDetails);
+    if (updateFertDetails) updateFertDetails(fertDetails, false);
+
     setAddButtonClicked(false);
   };
 
@@ -113,19 +117,21 @@ const FertilizersInfo: FC<InputModuleProps> = ({
   };
 
   const removeFert = (fertilizer: FertilizerInterface) => {
-    const updatedFerts = [...fertilizersDetails];
+    const updatedFerts = [...fertDetails];
 
-    const fertIdx = fertilizersDetails.findIndex((f) => f === fertilizer);
+    const fertIdx = fertDetails.findIndex((f) => f === fertilizer);
 
     updatedFerts.splice(fertIdx, 1);
-    if (updateFertDetails) updateFertDetails([...updatedFerts]);
+    setFertDetails([...updatedFerts]);
+    console.log(fertilizersDetails);
+    console.log(fertDetails);
   };
 
   return (
     <>
-      {fertilizersDetails.length > 0 && (
+      {fertDetails.length > 0 && (
         <FertilizersListComponent
-          fertilizerDetails={fertilizersDetails}
+          fertilizerDetails={fertDetails}
           removeFert={removeFert}
         />
       )}
@@ -134,7 +140,7 @@ const FertilizersInfo: FC<InputModuleProps> = ({
         <FertilizersButtonComponent
           addNewFertilizer={addNewFertilizer}
           handleFormState={handleFormState}
-          fertDetails={fertilizersDetails}
+          fertDetails={fertDetails}
           updateFertDetails={updateFertDetails}
         />
       )}
diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx
index aa632382..b22100e9 100644
--- a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersButtonComponent.tsx
@@ -17,7 +17,7 @@ import FertilizerInterface from '@Interface/FertilizerInterface';
 type ButtonComponentProps = {
   addNewFertilizer: () => void;
   handleFormState(cmd: string, toggle?: boolean, status?: string, moveBackModuleID?: string): void;
-  updateFertDetails?(fertDetails: FertilizerInterface[]): void;
+  updateFertDetails?(fertDetails: FertilizerInterface[], moveNext: boolean): void;
   fertDetails: FertilizerInterface[];
 };
 
@@ -64,7 +64,7 @@ const FertilizersButtonComponent: FC<ButtonComponentProps> = ({
           disabled={false}
           text={ComponentText.NEXT}
           handleClick={() => {
-            if (updateFertDetails) updateFertDetails(fertDetails);
+            if (updateFertDetails) updateFertDetails(fertDetails, true);
           }}
         />
       </StyledButtonContainer>
diff --git a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
index dcf8d914..a3dad2f7 100644
--- a/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
+++ b/frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx
@@ -21,7 +21,7 @@ interface FertilizerProps {
   removeFert(fertilizer: FertilizerInterface): void;
 }
 
-const FertilizersListComponent: FC<FertilizerProps> = ({ fertilizerDetails }) => (
+const FertilizersListComponent: FC<FertilizerProps> = ({ fertilizerDetails, removeFert }) => (
   <StyledFieldInfoList>
     {fertilizerDetails.map((fertilizer: FertilizerInterface, index: number) => (
       <div key={fertilizer.id}>
@@ -68,8 +68,14 @@ const FertilizersListComponent: FC<FertilizerProps> = ({ fertilizerDetails }) =>
               )}
             </DesktopFertilizerGroup>
             <StyledFontAwesomeContainer>
-              <FontAwesomeIcon icon={faPencil} />
-              <FontAwesomeIcon icon={faTrashCan} />
+              <button
+                type="button"
+                onClick={() => removeFert(fertilizer)}
+                style={{ border: 'none', background: 'none' }}
+                aria-label="delete fertilizer"
+              >
+                <FontAwesomeIcon icon={faTrashCan} />
+              </button>
             </StyledFontAwesomeContainer>
           </FertilizerTypeAndFontAwesomeContainer>
 
diff --git a/frontend/src/Interface/InputModuleProps.tsx b/frontend/src/Interface/InputModuleProps.tsx
index aa916751..0c33fac0 100644
--- a/frontend/src/Interface/InputModuleProps.tsx
+++ b/frontend/src/Interface/InputModuleProps.tsx
@@ -14,7 +14,7 @@ interface InputModuleProps {
   fertilizersDetails: FertilizerInterface[];
   toggleEnabled?: boolean;
   updateFarmDetails: (farmDetails: FarmDetailsInterface, inputModuleID: string) => void;
-  updateFertDetails?: (fertilizersDetails: FertilizerInterface[]) => void;
+  updateFertDetails?: (fertilizersDetails: FertilizerInterface[], moveNext?: boolean) => void;
   handleFormState(cmd: string, toggle?: boolean, status?: string): void;
 }
 
diff --git a/frontend/src/Views/MainPage/MainPage.tsx b/frontend/src/Views/MainPage/MainPage.tsx
index 52dc6843..9235a939 100644
--- a/frontend/src/Views/MainPage/MainPage.tsx
+++ b/frontend/src/Views/MainPage/MainPage.tsx
@@ -176,8 +176,10 @@ const MainPage: FC = () => {
    * @param     newNutrients => A new 'TempNutrientInterface' object with new data from
    *            from the nutrient module.
    * */
-  const updateFertDetails = (newFerts: FertilizerInterface[]): void => {
+  const updateFertDetails = (newFerts: FertilizerInterface[], moveNext: boolean): void => {
     setFertDetails(newFerts);
+    if (!moveNext) return;
+
     if (formStates[currForm].id === FERTILIZERS)
       handleFormState(CmdOptions.FORWARDS, undefined, COMPLETED);
     else handleFormState(FERTILIZERS, true);

From ae9d83ca1ba01a97958ff3b4df2c304b2b41e73c Mon Sep 17 00:00:00 2001
From: GDamaso <guildamaso@gmail.com>
Date: Tue, 13 Aug 2024 21:28:31 -0700
Subject: [PATCH 14/15] Calc Table styling

---
 .../CalculateNutrients/CalculateNutrientsList.styles.ts     | 6 +++++-
 .../CalculateNutrients/CalculateNutrientsList.tsx           | 3 +++
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
index 0d6852f3..232edd04 100644
--- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
+++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
@@ -12,6 +12,8 @@ const StyledH3Container = styled.div`
   align-items: center;
   justify-content: center;
   width: 70%;
+  margin: 0;
+  padding: 0;
 
   .blankSpace {
     display: none;
@@ -87,7 +89,7 @@ const StyledRemoval = styled.div`
   width: 100%;
   justify-content: center;
   align-items: center;
-  margin: 28px auto 48px auto;
+  margin: 18px auto 48px auto;
 
 
   @media (min-width: ${screenSizes.desktop}) {
@@ -129,6 +131,8 @@ const StyledTable = styled.table<TableProps>`
 
   h4 {
     font: ${tokens.typographyBoldBody};
+    margin: 0;
+    padding: 0;
   }
 
   @media (min-width: ${screenSizes.desktop}) {
diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
index 492d2b60..1e46c97c 100644
--- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
+++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
@@ -304,6 +304,9 @@ const CalculationList: FC<CalculationListProps> = ({
               <td aria-hidden="true">
                 <StyledDivider />
               </td>
+              <td aria-hidden="true">
+                <StyledDivider />
+              </td>
             </tr>
           </tbody>
 

From ec3a7aea1e13592351e7436dbef647b64cc359df Mon Sep 17 00:00:00 2001
From: Kent Caparas <kcaparas1630@gmail.com>
Date: Wed, 14 Aug 2024 08:55:24 -0700
Subject: [PATCH 15/15] calculate nutrients styling fix

---
 .../CalculateNutrients/CalculateNutrientsList.styles.ts   | 8 ++++++--
 .../CalculateNutrients/CalculateNutrientsList.tsx         | 5 ++++-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
index 232edd04..29cff664 100644
--- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
+++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.styles.ts
@@ -112,6 +112,10 @@ const StyledTable = styled.table<TableProps>`
     text-align: center;
   }
 
+  .th-crop {
+    width: 50%;
+  }
+
   tbody tr:nth-of-type(${(props) => (props.twoCrops ? 'even' : 'odd')}) {
     background-color: ${tokens.themeGray30};
   }
@@ -157,7 +161,7 @@ const StyledPBalance = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 11px;
+  gap: 5px;
   p {
     font: ${tokens.typographyRegularSmallBody};
     padding: 0;
@@ -173,7 +177,7 @@ const StyledPBalance = styled.div`
 
 const FontAwesomeContainer = styled.div`
   font-size: 16px;
-  margin-left: -28px;
+  margin-left: -20px;
 
   @media (min-width: ${screenSizes.desktop}) {
     font-size: 24px;
diff --git a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
index 1e46c97c..3075a826 100644
--- a/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
+++ b/frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx
@@ -56,7 +56,7 @@ const CalculationList: FC<CalculationListProps> = ({
         <StyledTable twoCrops={field.Crops.length > 1}>
           <thead>
             <tr>
-              <th>
+              <th className="th-crop">
                 <h4 className="col1">Crop</h4>
               </th>
               <th>
@@ -152,6 +152,9 @@ const CalculationList: FC<CalculationListProps> = ({
               <td aria-hidden="true">
                 <StyledDivider />
               </td>
+              <td aria-hidden="true">
+                <StyledDivider />
+              </td>
             </tr>
           </tbody>