EcometricsTab

frontend/src/components/Locality/LocalityDetails.tsx

@@ -3,6 +3,7 @@ import { useGetLocalityDetailsQuery } from '../../redux/localityReducer'
 import { CircularProgress } from '@mui/material'
 import { DetailView, TabType } from '../DetailView/DetailView'
 import { AgeTab } from './Tabs/AgeTab'
+import { EcometricsTab } from './Tabs/EcometricsTab'
 import { LithologyTab } from './Tabs/LithologyTab'
 import { LocalityTab } from './Tabs/LocalityTab'
 import { TaphonomyTab } from './Tabs/TaphonomyTab'
@@ -31,6 +32,10 @@ export const LocalityDetails = () => {
       title: 'Taphonomy',
       content: <TaphonomyTab />,
     },
+    {
+      title: 'Ecometrics',
+      content: <EcometricsTab />,
+    },
   ]
 
   return <DetailView tabs={tabs} data={data} />

frontend/src/components/Locality/Tabs/EcometricsTab.tsx

@@ -0,0 +1,21 @@
+import { Box } from '@mui/material'
+import { LocalityDetails } from '@/backendTypes'
+import { ArrayFrame } from '../../DetailView/common/FormComponents'
+import { useDetailContext } from '@/components/DetailView/hooks'
+
+export const EcometricsTab = () => {
+  const { textField } = useDetailContext<LocalityDetails>()
+
+  const ecometrics = [
+    ['Estimate of annual precipitation (mm)', textField('estimate_precip')],
+    ['Estimate of mean annual temperature (°C)', textField('estimate_temp')],
+    ['Estimate of net primary productivity (g/m2/yr)', textField('estimate_npp')],
+    ['Woody cover percentage', textField('pers_woody_cover')],
+  ]
+
+  return (
+    <Box>
+      <ArrayFrame array={ecometrics} title="Ecometrics" />
+    </Box>
+  )
+}