feat: [NR-NMP-621] Field tabs on Calculate Nutrients made clickable

Author: raarielgrace

frontend/src/components/common/Tabs/Tabs.tsx

@@ -1,14 +1,16 @@
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import MUITabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Box from '@mui/material/Box';
 
 export default function Tabs({
   activeTab,
   tabLabel,
+  onChange,
 }: {
   activeTab: number;
   tabLabel: Array<string>;
+  onChange?: ((event: React.SyntheticEvent, value: any) => void) | undefined;
 }) {
   const [value, setValue] = useState(activeTab);
 
@@ -20,6 +22,7 @@ export default function Tabs({
         <MUITabs
           value={value}
           aria-label="tab"
+          onChange={onChange}
         >
           {tabLabel.map((ele, i) => (
             <Tab

frontend/src/views/CalculateNutrients/CalculateNutrients.tsx

@@ -390,6 +390,7 @@ export default function CalculateNutrients() {
             ? fieldList.map((field) => field.fieldName)
             : ['Field 1']
         }
+        onChange={(_, f) => setActiveField(f)}
       />
       <ButtonGroup
         alignment="end"