chore: Bb 317 update loading nmp files in bb

frontend/src/Commons/Forms/FormModule/FormModule.tsx

@@ -55,16 +55,18 @@ const FormModule: FC<FormModuleProps> = ({
         inputModule={InputModule}
         handleFormState={handleFormState}
       />
-      <StyledFormContent isVisible={InputModule.enable}>
-        <InputModuleComponent
-          fertilizersDetails={fertilizersDetails || []}
-          updateFarmDetails={updateFarmDetails}
-          updateFertDetails={updateFertDetails}
-          farmDetails={farmDetails}
-          toggleEnabled={toggleEnabled}
-          handleFormState={handleFormState}
-        />
-      </StyledFormContent>
+      {InputModule.enable && (
+        <StyledFormContent isVisible={InputModule.enable}>
+          <InputModuleComponent
+            fertilizersDetails={fertilizersDetails || []}
+            updateFarmDetails={updateFarmDetails}
+            updateFertDetails={updateFertDetails}
+            farmDetails={farmDetails}
+            toggleEnabled={toggleEnabled}
+            handleFormState={handleFormState}
+          />
+        </StyledFormContent>
+      )}
     </StyledFormContainer>
   );
 };

frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.styles.ts

@@ -38,6 +38,7 @@ const StyledRightView = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  justify-content: center;
   h3 {
     font: ${tokens.typographyBoldSmallBody};
   }

frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrients.tsx

@@ -27,6 +27,7 @@ import {
 } from '@Constants/FertilizersOptions';
 import CustomField from '@Commons/Input/Field/CustomField';
 import FieldDetailInterface from '@Interface/FieldDetailsInterface';
+import getFertilizerOption from '@Utils/getFertID';
 import {
   StyledFieldContainer,
   StyledFieldSelect,
@@ -54,6 +55,11 @@ const initialBalance: MainBalanceInterface[] = [
   },
 ];
 
+interface FormValues extends FertilizerInterface {
+  FieldName: string;
+}
+const initialValues: FormValues = initialFarmDetails.Fields[0].Nutrients[0];
+
 const CalculateNutrientsComponent: FC<InputModuleProps> = ({
   farmDetails,
   fertilizersDetails,
@@ -67,15 +73,14 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
   const [fertBalance, setFertBalance] = useState<AgronomicBalanceInterface>(
     initialBalance[0].agronomic,
   );
-  const initialValues: FertilizerInterface = initialFarmDetails.Fields[0].Nutrients[0];
   const fieldsOption: OptionInterface[] = farmDetails.Fields.map((field) => ({
     value: field.FieldName,
     label: field.FieldName,
   }));
 
   const fertilizerOption: OptionInterface[] = fertilizersDetails.map((fertilizer) => ({
     value: fertilizer.fertilizerId,
-    label: fertilizer.fertilizerId,
+    label: getFertilizerOption(fertilizer.fertilizerId)?.label ?? fertilizer.fertilizerId,
   }));
 
   const isLiquid = fertilizersDetails[selectedIndex]?.fertilizerTypeId.includes('Liquid');
@@ -124,8 +129,8 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
       let fertP = 0;
       let fertK = 0;
 
-      if (field.Nutrients.length > 0) {
-        field.Nutrients.forEach((fertilizer) => {
+      if (field.Nutrients?.nutrientFertilizers?.length > 0) {
+        field.Nutrients.nutrientFertilizers.forEach((fertilizer) => {
           fertN += fertilizer.fertN;
           fertP += fertilizer.fertP2o5;
           fertK += fertilizer.fertK2o;
@@ -160,10 +165,16 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedFieldIndex, farmDetails]);
 
-  const submitCalculationData = (values: FertilizerInterface): void => {
+  const submitCalculationData = (values: FertilizerInterface & { FieldName: string }): void => {
     setTimeout(() => {
+      // Destructure to exclude FieldName
+      // I want to remove FieldName from values, which is needed in initialValues
+      // for form validation
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { FieldName, ...fertValues } = values;
+
       const newFertilizer: FertilizerInterface = {
-        ...values,
+        ...fertValues,
         id: fertilizersDetails[selectedIndex].id,
         fertilizerTypeId: fertilizersDetails[selectedIndex].fertilizerTypeId,
         fertilizerId: fertilizersDetails[selectedIndex].fertilizerId,
@@ -176,10 +187,16 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
       };
 
       const newFarmDetails = { ...farmDetails };
-      newFarmDetails.Fields[selectedFieldIndex].Nutrients.push(newFertilizer);
 
-      calcFieldBalances(farmDetails.Fields[selectedFieldIndex]);
-      updateFarmDetails(farmDetails);
+      // Check is ferts array is null and initilize it if it is
+      const emptyFertsArr: FertilizerInterface[] = [];
+      newFarmDetails.Fields[selectedFieldIndex].Nutrients.nutrientFertilizers =
+        newFarmDetails.Fields[selectedFieldIndex].Nutrients?.nutrientFertilizers ?? emptyFertsArr;
+
+      newFarmDetails.Fields[selectedFieldIndex].Nutrients?.nutrientFertilizers?.push(newFertilizer);
+
+      calcFieldBalances(newFarmDetails.Fields[selectedFieldIndex]);
+      updateFarmDetails(newFarmDetails);
     });
   };
 
@@ -284,7 +301,6 @@ const CalculateNutrientsComponent: FC<InputModuleProps> = ({
         onSubmit={submitCalculationData}
         validate={(values) => {
           StatusValidate(validationSchema, values, handleFormState, CALCULATION_INFORMATION);
-          // calcFieldBalances(farmDetails.Fields[selectedFieldIndex]);
           setFertBalance(
             calcFertBalance(
               fertilizersDetails[selectedIndex],

frontend/src/Commons/Forms/InputModules/CalculateNutrients/CalculateNutrientsList.tsx

@@ -5,6 +5,7 @@ import { faCircleCheck, faTriangleExclamation } from '@fortawesome/free-solid-sv
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import MainBalanceInterface from '@Interface/MainBalanceInterface';
 import FieldDetailInterface from '@Interface/FieldDetailsInterface';
+import getFertilizerOption from '@Utils/getFertID';
 import {
   StyledH3HeaderContainer,
   StyledH3HeaderItem,
@@ -31,7 +32,6 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
     nutrient >= 0 ? faCircleCheck : faTriangleExclamation;
 
   const getResultIconColor = (nutrient: number) => (nutrient >= 0 ? '#42814A' : '#F8BB47');
-
   return (
     <DesktopView>
       <StyledH3HeaderContainer>
@@ -68,56 +68,62 @@ const CalculationList: FC<CalculationListProps> = ({ field, cropBalances, result
       </StyledH4HeaderContainer>
 
       {field.Crops.map((crop: CropsDetailsInterface, index: number) => (
-        <StyledPContainer key={`${crop}`}>
+        // eslint-disable-next-line react/no-array-index-key
+        <StyledPContainer key={`${crop}-${index}`}>
           <StyledPItem width="30%">
             <p>{crop.cropId === '75' ? 'Blueberry' : 'Raspberry'}</p>
           </StyledPItem>
           <StyledPItem width="30%">
             <StyledPItemList>
-              <p>{cropBalances[index].agronomic.N}</p>
-              <p>{cropBalances[index].agronomic.P}</p>
-              <p>{cropBalances[index].agronomic.K}</p>
+              <p>{cropBalances[index]?.agronomic?.N ?? zeroConstant}</p>
+              <p>{cropBalances[index]?.agronomic?.P ?? zeroConstant}</p>
+              <p>{cropBalances[index]?.agronomic?.K ?? zeroConstant}</p>
             </StyledPItemList>
           </StyledPItem>
           <StyledPItem width="30%">
             <StyledPItemList>
-              <p>{cropBalances[index].cropRemoval.N || zeroConstant}</p>
-              <p>{cropBalances[index].cropRemoval.P}</p>
-              <p>{cropBalances[index].cropRemoval.K}</p>
+              <p>{cropBalances[index]?.cropRemoval?.N ?? zeroConstant}</p>
+              <p>{cropBalances[index]?.cropRemoval?.P ?? zeroConstant}</p>
+              <p>{cropBalances[index]?.cropRemoval?.K ?? zeroConstant}</p>
             </StyledPItemList>
           </StyledPItem>
         </StyledPContainer>
       ))}
 
-      {field.Nutrients.length > 0 && (
+      {field.Nutrients?.nutrientFertilizers?.length > 0 && (
         <>
           <StyledH4HeaderItem width="30%">
             <h4>Fertilizer</h4>
           </StyledH4HeaderItem>
-          {field.Nutrients.map((fertilizer: FertilizerInterface, idx: number) => (
-            // Couldn't fix this ESLint rule since we allow for more then one of the same fert to be added
-            // Order is probably never changing without a rerender, which is the problem this rule tries to avoid
-            // eslint-disable-next-line react/no-array-index-key
-            <StyledPContainer key={`${fertilizer.fertilizerId}-${idx}`}>
-              <StyledPItem width="30%">
-                <p>{fertilizer.fertilizerId}</p>
-              </StyledPItem>
-              <StyledPItem width="30%">
-                <StyledPItemList>
-                  <p>{fertilizer.fertN}</p>
-                  <p>{fertilizer.fertP2o5}</p>
-                  <p>{fertilizer.fertK2o}</p>
-                </StyledPItemList>
-              </StyledPItem>
-              <StyledPItem width="30%">
-                <StyledPItemList>
-                  <p>{fertilizer.fertN}</p>
-                  <p>{fertilizer.fertP2o5}</p>
-                  <p>{fertilizer.fertK2o}</p>
-                </StyledPItemList>
-              </StyledPItem>
-            </StyledPContainer>
-          ))}
+          {field.Nutrients?.nutrientFertilizers.map(
+            (fertilizer: FertilizerInterface, idx: number) => (
+              // Couldn't fix this ESLint rule since we allow for more then one of the same fert to be added
+              // Order is probably never changing without a rerender, which is the problem this rule tries to avoid
+              // eslint-disable-next-line react/no-array-index-key
+              <StyledPContainer key={`${fertilizer.fertilizerId}-${idx}`}>
+                <StyledPItem width="30%">
+                  <p>
+                    {getFertilizerOption(fertilizer.fertilizerId.toString())?.label ??
+                      fertilizer.fertilizerId}
+                  </p>
+                </StyledPItem>
+                <StyledPItem width="30%">
+                  <StyledPItemList>
+                    <p>{fertilizer.fertN}</p>
+                    <p>{fertilizer.fertP2o5}</p>
+                    <p>{fertilizer.fertK2o}</p>
+                  </StyledPItemList>
+                </StyledPItem>
+                <StyledPItem width="30%">
+                  <StyledPItemList>
+                    <p>{fertilizer.fertN}</p>
+                    <p>{fertilizer.fertP2o5}</p>
+                    <p>{fertilizer.fertK2o}</p>
+                  </StyledPItemList>
+                </StyledPItem>
+              </StyledPContainer>
+            ),
+          )}
         </>
       )}
       <StyledDivider />

frontend/src/Commons/Forms/InputModules/Crops/CropsList.tsx

@@ -20,14 +20,14 @@ const CropsList: FC<CropsListComponentProps> = ({ field }) => (
         <p key={field.FieldName}>{field.FieldName}</p>
       </StyledListItem>
       <StyledCropsGroup>
-        {field.Crops.map((crop: CropsDetailsInterface) => (
+        {field.Crops.map((crop: CropsDetailsInterface, idx: number) => (
           <StyledListItem
             width="50%"
             key={crop.id}
           >
             <div className="CropsList">
               <h2>Crop</h2>
-              <h2>{crop.id + 1}</h2>
+              <h2>{idx + 1}</h2>
             </div>
             <p key={crop.cropId}>{crop.cropId === '75' ? 'Blueberry' : 'Raspberry'}</p>
           </StyledListItem>

frontend/src/Commons/Forms/InputModules/FarmInformation/FarmInformation.tsx

@@ -39,7 +39,7 @@ const FarmInfoComponent: FC<InputModuleProps> = ({
 }) => {
   const initialValues = {
     FarmName: farmDetails.FarmName,
-    Year: farmDetails.Year,
+    Year: new Date().getFullYear().toString(),
     FarmRegion: farmDetails.FarmRegion,
   };
 

frontend/src/Commons/Forms/InputModules/Fertilizers/Fertilizers.tsx

@@ -22,6 +22,7 @@ import ComponentText from '@Constants/ComponentText';
 import CustomField from '@Commons/Input/Field/CustomField';
 import FertilizerInterface from '@Interface/FertilizerInterface';
 import handleChange from '@Utils/handleChange';
+import dryFertilizerValues from '@Constants/FertilizerValues';
 import FertilizersButtonComponent from './FertilizersButtonComponent';
 import StyledCustomNumberField from './Fertilizers.styles';
 import FertilizersListComponent from './FertilizersListComponent';
@@ -75,28 +76,13 @@ const FertilizersInfo: FC<InputModuleProps> = ({
       tempFertilizerId = `Liquid Fertilizer Custom (${values.customN}-${values.customP2o5}-${values.customK2o})`;
     }
 
-    switch (values.fertilizerId) {
-      case 'Urea (46-0-0)':
-        fertNValue = 46;
-        break;
-      case '15-15-17':
-        fertNValue = 15;
-        fertP2o5Value = 15;
-        fertK20Value = 17;
-        break;
-      case 'Ammonium polyphosphate (10-34-0)':
-        fertNValue = 10;
-        fertP2o5Value = 34;
-        break;
-      case 'Liquid urea (23-0-0)':
-        fertNValue = 23;
-        break;
-      default:
-        fertNValue = values.customN ? values.customN : 0;
-        fertP2o5Value = values.customP2o5 ? values.customP2o5 : 0;
-        fertK20Value = values.customK2o ? values.customK2o : 0;
-        break;
-    }
+    const defaultValues = { N: 0, P: 0, K: 0 };
+    const customValues = { N: values.customN, P: values.customP2o5, K: values.customK2o };
+    const fertValues = dryFertilizerValues[values.fertilizerId] || customValues || defaultValues;
+
+    fertNValue = fertValues.N;
+    fertP2o5Value = fertValues.P;
+    fertK20Value = fertValues.K;
 
     const newFertilizer: FertilizerInterface = {
       id: fertilizersDetails.length,

frontend/src/Commons/Forms/InputModules/Fertilizers/FertilizersListComponent.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { faPencil, faTrash } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import FertilizerInterface from '@Interface/FertilizerInterface';
+import getFertilizerOption from '@Utils/getFertID';
 import {
   StyledFieldInfoList,
   StyledListContainer,
@@ -19,33 +20,33 @@ const FertilizersListComponent: FC<FertilizerProps> = ({ fertilizerDetails }) =>
   const fieldCount = fertilizerDetails.length;
   return (
     <StyledFieldInfoList>
-      {fertilizerDetails.map((nutrient: FertilizerInterface) => (
-        <div key={nutrient.id}>
+      {fertilizerDetails.map((fertilizer: FertilizerInterface) => (
+        <div key={fertilizer.id}>
           <StyledListContainer formNutrients>
             <StyledListItem width="240px">
               <h2>Fertilizer Type</h2>
-              <p>{nutrient.fertilizerTypeId}</p>
+              <p>{fertilizer.fertilizerTypeId}</p>
             </StyledListItem>
-            {nutrient.fertilizerTypeId === 'Dry Fertilizer (Custom)' ||
-            nutrient.fertilizerTypeId === 'Liquid Fertilizer (Custom)' ? (
+            {fertilizer.fertilizerTypeId === 'Dry Fertilizer (Custom)' ||
+            fertilizer.fertilizerTypeId === 'Liquid Fertilizer (Custom)' ? (
               <StyledCustomFertilizerGroup>
                 <StyledListItem width="40%">
                   <h2>N (%)</h2>
-                  <p>{nutrient.customN}</p>
+                  <p>{fertilizer.customN}</p>
                 </StyledListItem>
                 <StyledListItem width="40%">
                   <h2>P2o5 (%)</h2>
-                  <p>{nutrient.customP2o5}</p>
+                  <p>{fertilizer.customP2o5}</p>
                 </StyledListItem>
                 <StyledListItem width="40%">
                   <h2>K2o (%)</h2>
-                  <p>{nutrient.customK2o}</p>
+                  <p>{fertilizer.customK2o}</p>
                 </StyledListItem>
               </StyledCustomFertilizerGroup>
             ) : (
               <StyledListItem width="300px">
                 <h2> Fertilizer Name</h2>
-                <p> {nutrient.fertilizerId}</p>
+                <p>{getFertilizerOption(fertilizer.fertilizerId)?.label}</p>
               </StyledListItem>
             )}
             <StyledFontAwesomeContainer>