[BDMS-242 and BDMS-239] Add notes to well details page

src/components/Accordion/WellShow/Equipment.tsx

@@ -48,9 +48,10 @@ export const EquipmentAccordion = ({ id }: { id?: number }) => {
   })
 
   const { dataGridProps: deploymentsDataGridProps } = useDataGrid({
-    resource: `thing/${id}/deployment`,
+    resource: id ? `thing/${id}/deployment` : undefined,
     dataProviderName: 'ocotillo',
     queryOptions: {
+      enabled: Boolean(id),
       cacheTime: 10 * 60 * 1000, // cached data for 10 minutes
       staleTime: 5 * 60 * 1000, // get data fresh for 5 minutes,
     },

src/components/Accordion/WellShow/Notes.tsx

@@ -0,0 +1,71 @@
+import {
+  Accordion,
+  AccordionDetails,
+  AccordionSummary,
+  Stack,
+  Typography,
+} from '@mui/material'
+import { ExpandMore, Notes } from '@mui/icons-material'
+import Grid from '@mui/material/Grid2'
+import { IWell } from '@/interfaces/ocotillo/IThing'
+
+export const NotesAccordion = ({ well }: { well?: IWell }) => {
+  return (
+    <Accordion defaultExpanded elevation={2}>
+      <AccordionSummary
+        expandIcon={<ExpandMore />}
+        // Match the visual height of summaries that contain a CreateButton
+        sx={{
+          minHeight: 36,
+          '& .MuiAccordionSummary-content': {
+            margin: 0,
+            paddingY: 2.75,
+          },
+          '&.Mui-expanded': {
+            minHeight: 36,
+          },
+        }}
+      >
+        <Stack
+          direction="row"
+          alignItems="center"
+          justifyContent="space-between"
+          sx={{ width: '100%' }}
+        >
+          <Stack direction="row" alignItems="center" spacing={1}>
+            <Notes color="primary" />
+            <Typography variant="body1" fontWeight="bold">
+              Notes
+            </Typography>
+          </Stack>
+        </Stack>
+      </AccordionSummary>
+      <AccordionDetails sx={{ p: 3 }}>
+        <Grid container spacing={4}>
+          <Grid size={{ xs: 12 }}>
+            <Typography variant="h6">Water Notes:</Typography>
+            <Typography variant="body1">
+              {well?.water_notes || 'N/A'}
+            </Typography>
+          </Grid>
+          <Grid size={{ xs: 12 }}>
+            <Typography variant="h6">Measuring Notes:</Typography>
+            <Typography variant="body1">
+              {well?.measuring_notes || 'N/A'}
+            </Typography>
+          </Grid>
+          <Grid size={{ xs: 12 }}>
+            <Typography variant="h6">Construction Notes:</Typography>
+            <Typography variant="body1">
+              {well?.well_construction_notes || 'N/A'}
+            </Typography>
+          </Grid>
+          <Grid size={{ xs: 12 }}>
+            <Typography variant="h6">Notes:</Typography>
+            <Typography variant="body1">{well?.notes || 'N/A'}</Typography>
+          </Grid>
+        </Grid>
+      </AccordionDetails>
+    </Accordion>
+  )
+}

src/components/Accordion/WellShow/index.ts

@@ -1,5 +1,6 @@
 export * from './Attachments'
 export * from './AlternateIds'
-export * from './Equipment'
 export * from './Contacts'
+export * from './Equipment'
+export * from './Notes'
 export * from './WellScreens'

src/components/card/CoreWellInfo.tsx

@@ -1,4 +1,5 @@
 import { IWell } from '@/interfaces/ocotillo/IThing'
+import { convertLonLatToUTM, parseWktPoint } from '@/utils'
 import {
   Card,
   CardContent,
@@ -24,6 +25,9 @@ export const CoreWellInfoCard = ({
     return <LoadingCard />
   }
 
+  const { lon, lat } = parseWktPoint(well.current_location)
+  const { easting, northing } = convertLonLatToUTM({ lon, lat })
+
   return (
     <Card elevation={2} sx={{ height: '100%' }}>
       <CardHeader title={<Typography variant="h5">{well?.name}</Typography>} />
@@ -99,37 +103,36 @@ export const CoreWellInfoCard = ({
           <Grid size={{ xs: 12, md: 6 }}>
             <Typography variant="h6">Northing/Easting:</Typography>
             <Typography variant="body1">
-              {`${well?.current_location?.properties?.utm_coordinates?.easting?.toFixed(0) || 'N/A'}, ${well?.current_location?.properties?.utm_coordinates?.northing?.toFixed(0) || 'N/A'}`}
+              {`${easting?.toFixed(0) || 'N/A'}, ${northing?.toFixed(0) || 'N/A'}`}
             </Typography>
           </Grid>
           <Grid size={{ xs: 12, md: 6 }}>
             <Typography variant="h6">Vertical Datum:</Typography>
             <Typography variant="body1">
-              {well?.current_location?.properties?.vertical_datum || 'N/A'}{' '}
+              {well?.current_location?.vertical_datum || 'N/A'}{' '}
             </Typography>
           </Grid>
           <Grid size={{ xs: 12 }}>
             <Typography variant="h6">Latitude/Longitude:</Typography>
             <Typography variant="body1">
-              {well?.current_location?.geometry?.coordinates
-                ? `${well?.current_location?.geometry?.coordinates?.[0]?.toFixed(6)}, ${well?.current_location?.geometry?.coordinates?.[1]?.toFixed(6)}`
+              {well?.current_location?.point
+                ? `${lat?.toFixed(6)}, ${lon?.[1]?.toFixed(6)}`
                 : 'N/A'}
             </Typography>
           </Grid>
           <Grid size={{ xs: 12, md: 6 }}>
             <Typography variant="h6">Elevation:</Typography>
             <Typography variant="body1">
-              {well?.current_location?.properties?.elevation?.toFixed(2) ||
-                'N/A'}
-              {well?.current_location?.properties?.elevation_unit
-                ? ` ${well?.current_location?.properties?.elevation_unit}`
+              {well?.current_location?.elevation?.toFixed(2) || 'N/A'}
+              {well?.current_location?.elevation_unit
+                ? ` ${well?.current_location?.elevation_unit}`
                 : null}
             </Typography>
           </Grid>
           <Grid size={{ xs: 12, md: 6 }}>
             <Typography variant="h6">Elevation Method:</Typography>
             <Typography variant="body1">
-              {well?.current_location?.properties?.elevation_method || 'N/A'}
+              {well?.current_location?.elevation_method || 'N/A'}
             </Typography>
           </Grid>
           <Grid size={{ xs: 12 }}>

src/components/card/InteractiveSatelliteMap.tsx

@@ -12,6 +12,7 @@ import {
 import { Map } from '@mui/icons-material'
 import { Layer, MapRef, Source } from 'react-map-gl'
 import { MapComponent, MapPopup } from '@/components'
+import { parseWktPoint } from '@/utils'
 import { useThingLayers } from '@/hooks'
 import { useGo } from '@refinedev/core'
 
@@ -25,8 +26,7 @@ export const InteractiveSatelliteMapCard = ({ well }: { well: IWell }) => {
   const waterWellsLayer = THING_LAYERS['water-wells']
   const { sourceProps, layerProps } = waterWellsLayer
 
-  const coordinates = well?.current_location?.geometry?.coordinates ?? []
-  const [lon, lat] = coordinates
+  const { lon, lat } = parseWktPoint(well?.current_location)
 
   // Automatically zoom to well coordinates when map loads or well changes
   useEffect(() => {

src/components/form/location/CreateEditLocation.tsx

@@ -25,7 +25,11 @@ import {
   MenuItem,
 } from '@mui/material'
 import wellknown from 'wellknown'
-import { convertUTMToLonLat, convertLonLatToUTM } from '@/utils/UtmToLonLat'
+import {
+  convertUTMToLonLat,
+  convertLonLatToUTM,
+  Datum,
+} from '@/utils/UtmToLonLat'
 import { useElevation } from '@/hooks/useElevation'
 
 /**
@@ -66,7 +70,7 @@ export const CreateEditLocation: React.FC<CreateEditLocationProps> = ({
 
   //Local state for UTM zone/datum/easting/northing/lat/long since only point is sent to backend
   const [utmZone, setUtmZone] = useState(13)
-  const [utmDatum, setUtmDatum] = useState('NAD83')
+  const [utmDatum, setUtmDatum] = useState<Datum>('NAD83')
   const [latitude, setLatitude] = useState('')
   const [longitude, setLongitude] = useState('')
   const [easting, setEasting] = useState('')
@@ -144,18 +148,17 @@ export const CreateEditLocation: React.FC<CreateEditLocationProps> = ({
 
   //handle map click to set lat and long or easting and northing
   const handleMapClick = (e: any) => {
-    const { lng, lat } = e.lngLat
+    const { lng: lon, lat } = e.lngLat
     if (useUTM) {
-      const [easting, northing] = convertLonLatToUTM(
-        lng,
-        lat,
+      const { easting, northing } = convertLonLatToUTM(
+        { lon, lat },
         utmZone,
         utmDatum
       )
       setEasting(easting.toFixed(3))
       setNorthing(northing.toFixed(3))
     } else {
-      setLongitude(lng.toFixed(10))
+      setLongitude(lon.toFixed(10))
       setLatitude(lat.toFixed(10))
     }
   }
@@ -174,9 +177,8 @@ export const CreateEditLocation: React.FC<CreateEditLocationProps> = ({
       setLatitude(lat.toFixed(10))
     } else if (!useUTM && latitude && longitude) {
       // Lat/Long to UTM
-      const [easting, northing] = convertLonLatToUTM(
-        Number(longitude),
-        Number(latitude),
+      const { easting, northing } = convertLonLatToUTM(
+        { lon: Number(longitude), lat: Number(latitude) },
         utmZone,
         utmDatum
       )
@@ -275,7 +277,7 @@ export const CreateEditLocation: React.FC<CreateEditLocationProps> = ({
       <Grid size={{ xs: 12, md: 6 }}>
         <Select
           value={utmDatum}
-          onChange={(e) => setUtmDatum(e.target.value)}
+          onChange={(e) => setUtmDatum(e.target.value as Datum)}
           disabled={!useUTM}
           fullWidth
         >

src/components/form/thing/SelectThingComponent.tsx

@@ -184,7 +184,7 @@ export const SelectThingComponent: React.FC<EntryProps> = ({
         features: newValue.map((item) => ({
           type: 'Feature',
           id: item.id,
-          geometry: item.current_location.geometry,
+          geometry: wellknown.parse(item.current_location.point),
           properties: {
             name: item.name,
             id: item.id,

src/components/pdf/well.tsx

@@ -1,6 +1,6 @@
 import { IAddress, IContact, IWell } from '@/interfaces/ocotillo/IThing'
 import { BaseRecord } from '@refinedev/core'
-import { buildPdfFilename } from '@/utils'
+import { convertLonLatToUTM, parseWktPoint, buildPdfFilename } from '@/utils'
 import {
   Document,
   Page,
@@ -137,6 +137,9 @@ export const WellPDF = ({
     return { primaryContact: primary, secondaryContact: secondary }
   }, [contacts])
 
+  const { lon, lat } = parseWktPoint(well.current_location)
+  const { easting, northing } = convertLonLatToUTM({ lon, lat })
+
   return (
     <Document
       title={filename}
@@ -159,22 +162,22 @@ export const WellPDF = ({
             <View style={styles.cell3}>
               <LineItem
                 title="Easting/Northing"
-                value={`${well?.current_location?.properties?.utm_coordinates?.easting?.toFixed(0)}, ${well?.current_location?.properties?.utm_coordinates?.northing?.toFixed(0)}`}
+                value={`${easting?.toFixed(0)}, ${northing?.toFixed(0)}`}
               />
             </View>
             <View style={styles.cell3}>
               <LineItem
                 title="Vertical Datum"
-                value={well?.current_location?.properties?.vertical_datum}
+                value={well?.current_location?.vertical_datum}
               />
             </View>
             <View style={styles.cell3}></View>
             <View style={styles.cell3}>
               <LineItem
                 title="Latitude/Longitude"
                 value={
-                  well?.current_location?.geometry?.coordinates
-                    ? `${well?.current_location?.geometry?.coordinates?.[0]?.toFixed(6)}, ${well?.current_location?.geometry?.coordinates?.[1]?.toFixed(6)}`
+                  well?.current_location?.point
+                    ? `${lat?.toFixed(6)}, ${lon?.toFixed(6)}`
                     : 'N/A'
                 }
               />
@@ -183,19 +186,18 @@ export const WellPDF = ({
               <LineItem
                 title="Elevation"
                 value={`${
-                  well?.current_location?.properties?.elevation?.toFixed(0) ||
-                  'N/A'
+                  well?.current_location?.elevation?.toFixed(0) || 'N/A'
                 } ${
-                  well?.current_location?.properties?.elevation_unit
-                    ? ` ${well?.current_location?.properties?.elevation_unit}`
+                  well?.current_location?.elevation_unit
+                    ? ` ${well?.current_location?.elevation_unit}`
                     : null
                 }`}
               />
             </View>
             <View style={styles.cell3}>
               <LineItem
                 title="Elevation Method"
-                value={well?.current_location?.properties?.elevation_method}
+                value={well?.current_location?.elevation_method}
               />
             </View>
           </View>
@@ -264,10 +266,6 @@ export const WellPDF = ({
           </View>
         </View>
         <View style={styles.section}>
-          <LineItem
-            title="Measurement Notes"
-            value={(well as unknown as any)?.measurement_notes}
-          />
           <View style={styles.twoByTwoGrid}>
             <View style={styles.cell3}>
               <LineItem
@@ -325,6 +323,9 @@ export const WellPDF = ({
             </View>
             <View style={styles.cell3}></View>
           </View>
+          <LineItem title="Water Notes" value={well?.water_notes} />
+          <LineItem title="Measuring Notes" value={well?.measuring_notes} />
+          <LineItem title="Notes" value={well?.notes} />
         </View>
         {assets.length === 0 && (
           <Text style={styles.pageNote}>