[BDMS-538] Add additional required section

src/components/WellShow/Equipment.tsx

@@ -114,10 +114,7 @@ export const EquipmentAccordion = ({
         <Box
           sx={{
             display: 'grid',
-            gridTemplateColumns: {
-              xs: '1fr',
-              lg: 'minmax(0, 1.35fr) minmax(320px, 0.9fr)',
-            },
+            gridTemplateColumns: '1fr',
             gap: 2,
             alignItems: 'start',
           }}
@@ -310,7 +307,7 @@ const DetailRow = ({ label, value }: { label: string; value: string }) => (
   <Box
     sx={{
       display: 'grid',
-      gridTemplateColumns: { xs: '1fr', sm: '110px minmax(0, 1fr)' },
+      gridTemplateColumns: '1fr',
       gap: 0.75,
       alignItems: 'start',
       minWidth: 0,

src/components/WellShow/Notes.tsx

@@ -1,16 +1,24 @@
-import { Box, Paper, Stack, Typography } from '@mui/material'
+import { Box, Paper, Typography } from '@mui/material'
 import { Notes } from '@mui/icons-material'
 import Grid from '@mui/material/Grid2'
 import { IWell } from '@/interfaces/ocotillo'
 import { groupNotesByType } from '@/utils'
 
 export const NotesAccordion = ({ well }: { well?: IWell }) => {
+  const locationNote = well?.current_location?.properties?.notes
+    ?.filter((note) => note.note_type === 'General')
+    .shift()
+
   const allNotes = [
     ...(well?.water_notes ?? []),
     ...(well?.measuring_notes ?? []),
     ...(well?.construction_notes ?? []),
     ...(well?.general_notes ?? []),
-    ...(well?.current_location?.properties?.notes ?? []),
+    // Exclude the specific location "General" note used in the map ("Directions to the site").
+    // This prevents duplicate content between the map and Notes section.
+    ...(well?.current_location?.properties?.notes ?? []).filter(
+      (note) => note.id !== locationNote?.id
+    ),
     ...(well?.sampling_procedure_notes ?? []),
   ]
 
@@ -24,7 +32,9 @@ export const NotesAccordion = ({ well }: { well?: IWell }) => {
 
   return (
     <Paper elevation={2} sx={{ borderRadius: 2, overflow: 'hidden' }}>
-      <Box sx={{ px: 2, py: 1.5, display: 'flex', alignItems: 'center', gap: 1 }}>
+      <Box
+        sx={{ px: 2, py: 1.5, display: 'flex', alignItems: 'center', gap: 1 }}
+      >
         <Notes color="primary" />
         <Typography variant="body1" fontWeight="bold">
           Notes

src/components/card/InteractiveSatelliteMap.tsx

@@ -7,6 +7,7 @@ import {
   CardContent,
   CardHeader,
   Skeleton,
+  Typography,
 } from '@mui/material'
 import { Directions, Map } from '@mui/icons-material'
 import { Layer, MapRef, Source } from 'react-map-gl'
@@ -144,6 +145,10 @@ export const InteractiveSatelliteMapCard = ({ well }: { well: IWell }) => {
       ? `https://www.google.com/maps/dir/?api=1&destination=${lat},${lon}`
       : null
 
+  const locationNote = well.current_location?.properties?.notes
+    ?.filter((note) => note.note_type === 'General')
+    .shift()
+
   return (
     <Card
       elevation={2}
@@ -219,6 +224,21 @@ export const InteractiveSatelliteMapCard = ({ well }: { well: IWell }) => {
             )}
           </MapComponent>
         </Box>
+        {locationNote && (
+          <>
+            <Typography variant="h6" component="div" sx={{ pt: 1 }}>
+              Directions to the site
+            </Typography>
+            <Typography
+              variant="body2"
+              component="div"
+              color="textSecondary"
+              sx={{ pt: 1 }}
+            >
+              {locationNote?.content}
+            </Typography>
+          </>
+        )}
       </CardContent>
     </Card>
   )
@@ -234,8 +254,10 @@ const LoadingCard = () => {
       <CardContent
         sx={{
           display: 'flex',
+          flexDirection: 'column',
           alignItems: 'center',
           justifyContent: 'center',
+          gap: 1,
         }}
       >
         <Skeleton
@@ -244,6 +266,21 @@ const LoadingCard = () => {
           height={MAP_HEIGHT}
           sx={{ borderRadius: '0.5rem' }}
         />
+        <Skeleton
+          variant="rectangular"
+          width={200}
+          height={28}
+          sx={{
+            borderRadius: '0.5rem',
+            alignSelf: 'flex-start',
+          }}
+        />
+        <Skeleton
+          variant="rectangular"
+          width="100%"
+          height={64}
+          sx={{ borderRadius: '0.5rem' }}
+        />
       </CardContent>
     </Card>
   )

src/components/card/RecentWaterLevelObservations.tsx

@@ -46,8 +46,13 @@ export const RecentWaterLevelObservationsCard = ({
     ]
   }, [])
 
+  const measuringNote = well?.measuring_notes?.shift()
+
   return (
-    <Card elevation={2} sx={{ height: '100%', borderRadius: 2, overflow: 'hidden' }}>
+    <Card
+      elevation={2}
+      sx={{ height: '100%', borderRadius: 2, overflow: 'hidden' }}
+    >
       <CardHeader
         title={
           <Stack direction="row" alignItems="center" spacing={1}>
@@ -96,14 +101,32 @@ export const RecentWaterLevelObservationsCard = ({
             }}
           />
         )}
+        {measuringNote && (
+          <>
+            <Typography variant="h6" component="div" sx={{ pt: 1 }}>
+              Measurement Note
+            </Typography>
+            <Typography
+              variant="body2"
+              component="div"
+              color="textSecondary"
+              sx={{ pt: 1 }}
+            >
+              {measuringNote?.content}
+            </Typography>
+          </>
+        )}
       </CardContent>
     </Card>
   )
 }
 
 const LoadingCard = () => {
   return (
-    <Card elevation={2} sx={{ height: '100%', borderRadius: 2, overflow: 'hidden' }}>
+    <Card
+      elevation={2}
+      sx={{ height: '100%', borderRadius: 2, overflow: 'hidden' }}
+    >
       <CardHeader
         title={
           <Stack direction="row" alignItems="center" spacing={1}>

src/pages/ocotillo/thing/well-show.tsx

@@ -1,9 +1,5 @@
 import { useMemo } from 'react'
-import {
-  useDataProvider,
-  useList,
-  useResourceParams,
-} from '@refinedev/core'
+import { useDataProvider, useList, useResourceParams } from '@refinedev/core'
 import { useQuery } from '@tanstack/react-query'
 import { Show, useDataGrid } from '@refinedev/mui'
 import { AppBreadcrumb } from '@/components/AppBreadcrumb'
@@ -308,10 +304,7 @@ export const WellShow = () => {
           {/* Right column: 2 cols */}
           <Grid size={{ xs: 12, md: 4, lg: 3 }}>
             <Stack spacing={2}>
-              <ContactsCard
-                contacts={contacts}
-                isLoading={isDetailsLoading}
-              />
+              <ContactsCard contacts={contacts} isLoading={isDetailsLoading} />
               <OwnerPermissionsCard well={well} isLoading={isDetailsLoading} />
               <ConstructionInfoAccordion well={well} />
               <WellPhysicalPropertiesAccordion well={well} />