From 7577562cc196bf5ce2b76f8fe26df21dc7c7a39e Mon Sep 17 00:00:00 2001
From: Tyler Adam Martinez <TylerAdamMartinez@outlook.com>
Date: Thu, 11 Jun 2026 09:01:37 -0500
Subject: [PATCH 1/9] chore(well-show): Rm unused import

---
 src/pages/ocotillo/thing/well-show.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/pages/ocotillo/thing/well-show.tsx b/src/pages/ocotillo/thing/well-show.tsx
index c039d512..42439380 100644
--- a/src/pages/ocotillo/thing/well-show.tsx
+++ b/src/pages/ocotillo/thing/well-show.tsx
@@ -3,7 +3,6 @@ import { useDataProvider, useList, useResourceParams } from '@refinedev/core'
 import { captureEvent } from '@/analytics/posthog'
 import { useQuery } from '@tanstack/react-query'
 import { Show, useDataGrid } from '@refinedev/mui'
-import { AppBreadcrumb } from '@/components/AppBreadcrumb'
 import { TransducerObservationWithBlockResponse } from '@/generated/types.gen'
 import {
   IAsset,

From 9837316b1b334ea03b09c8b7a61fa56eb93f00b2 Mon Sep 17 00:00:00 2001
From: Tyler Adam Martinez <TylerAdamMartinez@outlook.com>
Date: Thu, 11 Jun 2026 09:20:55 -0500
Subject: [PATCH 2/9] feat(Attachments): Add support for pdf & plain text types

---
 src/components/WellShow/Attachments.tsx | 120 +++++++++++++++++++++---
 1 file changed, 106 insertions(+), 14 deletions(-)

diff --git a/src/components/WellShow/Attachments.tsx b/src/components/WellShow/Attachments.tsx
index bb4414af..12494249 100644
--- a/src/components/WellShow/Attachments.tsx
+++ b/src/components/WellShow/Attachments.tsx
@@ -8,6 +8,7 @@ import {
   Stack,
   Typography,
   Tooltip,
+  Button,
 } from '@mui/material'
 import { DataGrid, GridColDef } from '@mui/x-data-grid'
 import {
@@ -23,6 +24,15 @@ import type { IAsset } from '@/interfaces/ocotillo'
 
 type ImageViewMode = 'grid' | 'slideshow'
 
+const isImage = (asset: IAsset) => asset.mime_type?.startsWith('image/')
+
+const isPdf = (asset: IAsset) => asset.mime_type === 'application/pdf'
+
+const isText = (asset: IAsset) => asset.mime_type === 'text/plain'
+
+const canPreview = (asset: IAsset) =>
+  Boolean(asset.signed_url) && (isImage(asset) || isPdf(asset) || isText(asset))
+
 export const AttachmentsCard = ({
   assets,
   isLoading,
@@ -33,10 +43,7 @@ export const AttachmentsCard = ({
   const [imageViewMode, setImageViewMode] = useState<ImageViewMode>('grid')
   const [slideshowIndex, setSlideshowIndex] = useState(0)
 
-  const imageAssets = useMemo(
-    () => assets.filter((a: { signed_url?: string }) => a?.signed_url),
-    [assets]
-  )
+  const previewAssets = useMemo(() => assets.filter(canPreview), [assets])
 
   const columns = useMemo<GridColDef<IAsset>[]>(
     () => [
@@ -74,12 +81,44 @@ export const AttachmentsCard = ({
           )
         },
       },
+      {
+        field: 'actions',
+        headerName: 'Actions',
+        width: 180,
+        sortable: false,
+        renderCell: ({ row }) => (
+          <Stack direction="row" spacing={1}>
+            {row.signed_url && (
+              <Button
+                size="small"
+                component="a"
+                href={row.signed_url}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Open
+              </Button>
+            )}
+
+            {row.signed_url && (
+              <Button
+                size="small"
+                component="a"
+                href={row.signed_url}
+                download={row.name}
+              >
+                Download
+              </Button>
+            )}
+          </Stack>
+        ),
+      },
     ],
     []
   )
 
-  const currentImage = imageAssets[slideshowIndex]
-  const hasImages = imageAssets.length > 0
+  const currentAsset = previewAssets[slideshowIndex]
+  const hasAssets = previewAssets.length > 0
 
   return (
     <Paper elevation={2} sx={{ borderRadius: 2, overflow: 'hidden' }}>
@@ -108,7 +147,7 @@ export const AttachmentsCard = ({
         ) : (
           <Stack spacing={3}>
             {/* Images section (above table) with view toggle */}
-            {hasImages && (
+            {hasAssets && (
               <Box>
                 <Stack
                   direction="row"
@@ -146,7 +185,7 @@ export const AttachmentsCard = ({
 
                 {imageViewMode === 'grid' ? (
                   <Masonry columns={3} spacing={2}>
-                    {imageAssets.map((img, idx) => (
+                    {previewAssets.map((img, idx) => (
                       <ButtonBase
                         key={img.id ?? idx}
                         focusRipple
@@ -164,6 +203,7 @@ export const AttachmentsCard = ({
                           textAlign: 'left',
                         }}
                       >
+                        <AssetPreview asset={currentAsset} />
                         <Box
                           component="img"
                           src={img.signed_url}
@@ -191,23 +231,24 @@ export const AttachmentsCard = ({
                       justifyContent: 'center',
                     }}
                   >
+                    <AssetPreview asset={currentAsset} />
                     <Box
                       component="img"
-                      src={currentImage?.signed_url}
-                      alt={currentImage?.name || `Image ${slideshowIndex + 1}`}
+                      src={currentAsset?.signed_url}
+                      alt={currentAsset?.name || `Image ${slideshowIndex + 1}`}
                       sx={{
                         maxWidth: '100%',
                         maxHeight: 400,
                         objectFit: 'contain',
                       }}
                     />
-                    {imageAssets.length > 1 && (
+                    {previewAssets.length > 1 && (
                       <>
                         <IconButton
                           aria-label="Previous image"
                           onClick={() =>
                             setSlideshowIndex((i) =>
-                              i === 0 ? imageAssets.length - 1 : i - 1
+                              i === 0 ? previewAssets.length - 1 : i - 1
                             )
                           }
                           sx={{
@@ -225,7 +266,7 @@ export const AttachmentsCard = ({
                           aria-label="Next image"
                           onClick={() =>
                             setSlideshowIndex((i) =>
-                              i === imageAssets.length - 1 ? 0 : i + 1
+                              i === previewAssets.length - 1 ? 0 : i + 1
                             )
                           }
                           sx={{
@@ -253,7 +294,7 @@ export const AttachmentsCard = ({
                             borderRadius: 1,
                           }}
                         >
-                          {slideshowIndex + 1} / {imageAssets.length}
+                          {slideshowIndex + 1} / {previewAssets.length}
                         </Typography>
                       </>
                     )}
@@ -279,3 +320,54 @@ export const AttachmentsCard = ({
     </Paper>
   )
 }
+
+const AssetPreview = ({ asset }: { asset: IAsset }) => {
+  if (isImage(asset)) {
+    return (
+      <Box
+        component="img"
+        src={asset.signed_url}
+        alt={asset.name}
+        sx={{
+          width: '100%',
+          maxHeight: 400,
+          objectFit: 'contain',
+          display: 'block',
+        }}
+      />
+    )
+  }
+
+  if (isPdf(asset)) {
+    return (
+      <Box
+        component="iframe"
+        src={asset.signed_url}
+        title={asset.name}
+        sx={{
+          width: '100%',
+          height: 500,
+          border: 0,
+        }}
+      />
+    )
+  }
+
+  if (isText(asset)) {
+    return (
+      <Box
+        component="iframe"
+        src={asset.signed_url}
+        title={asset.name}
+        sx={{
+          width: '100%',
+          height: 300,
+          border: 0,
+          bgcolor: 'background.paper',
+        }}
+      />
+    )
+  }
+
+  return <Typography color="text.secondary">Preview not available.</Typography>
+}

From 0fc39bfc36c0644dfd886826cb3315fab6cd0a32 Mon Sep 17 00:00:00 2001
From: Tyler Adam Martinez <TylerAdamMartinez@outlook.com>
Date: Thu, 11 Jun 2026 09:29:59 -0500
Subject: [PATCH 3/9] fix(Attachments): The height will be set by the
 previewViewMode

---
 src/components/WellShow/Attachments.tsx | 91 ++++++++++---------------
 1 file changed, 36 insertions(+), 55 deletions(-)

diff --git a/src/components/WellShow/Attachments.tsx b/src/components/WellShow/Attachments.tsx
index 12494249..c2cbb195 100644
--- a/src/components/WellShow/Attachments.tsx
+++ b/src/components/WellShow/Attachments.tsx
@@ -22,7 +22,7 @@ import { Masonry } from '@mui/lab'
 import { settings } from '@/settings'
 import type { IAsset } from '@/interfaces/ocotillo'
 
-type ImageViewMode = 'grid' | 'slideshow'
+type PreviewViewMode = 'grid' | 'slideshow'
 
 const isImage = (asset: IAsset) => asset.mime_type?.startsWith('image/')
 
@@ -40,7 +40,8 @@ export const AttachmentsCard = ({
   assets: IAsset[]
   isLoading: boolean
 }) => {
-  const [imageViewMode, setImageViewMode] = useState<ImageViewMode>('grid')
+  const [previewViewMode, setPreviewViewMode] =
+    useState<PreviewViewMode>('grid')
   const [slideshowIndex, setSlideshowIndex] = useState(0)
 
   const previewAssets = useMemo(() => assets.filter(canPreview), [assets])
@@ -159,9 +160,9 @@ export const AttachmentsCard = ({
                   <Tooltip title="Grid view">
                     <IconButton
                       size="small"
-                      color={imageViewMode === 'grid' ? 'primary' : 'default'}
-                      onClick={() => setImageViewMode('grid')}
-                      aria-pressed={imageViewMode === 'grid'}
+                      color={previewViewMode === 'grid' ? 'primary' : 'default'}
+                      onClick={() => setPreviewViewMode('grid')}
+                      aria-pressed={previewViewMode === 'grid'}
                     >
                       <GridView />
                     </IconButton>
@@ -170,29 +171,29 @@ export const AttachmentsCard = ({
                     <IconButton
                       size="small"
                       color={
-                        imageViewMode === 'slideshow' ? 'primary' : 'default'
+                        previewViewMode === 'slideshow' ? 'primary' : 'default'
                       }
                       onClick={() => {
-                        setImageViewMode('slideshow')
+                        setPreviewViewMode('slideshow')
                         setSlideshowIndex(0)
                       }}
-                      aria-pressed={imageViewMode === 'slideshow'}
+                      aria-pressed={previewViewMode === 'slideshow'}
                     >
                       <ViewCarousel />
                     </IconButton>
                   </Tooltip>
                 </Stack>
 
-                {imageViewMode === 'grid' ? (
+                {previewViewMode === 'grid' ? (
                   <Masonry columns={3} spacing={2}>
-                    {previewAssets.map((img, idx) => (
+                    {previewAssets.map((asset, idx) => (
                       <ButtonBase
-                        key={img.id ?? idx}
+                        key={asset.id ?? idx}
                         focusRipple
-                        aria-label={`Open ${img.name || `attachment ${idx + 1}`} in slideshow`}
+                        aria-label={`Open ${asset.name || `attachment ${idx + 1}`} in slideshow`}
                         onClick={() => {
                           setSlideshowIndex(idx)
-                          setImageViewMode('slideshow')
+                          setPreviewViewMode('slideshow')
                         }}
                         sx={{
                           display: 'block',
@@ -203,17 +204,7 @@ export const AttachmentsCard = ({
                           textAlign: 'left',
                         }}
                       >
-                        <AssetPreview asset={currentAsset} />
-                        <Box
-                          component="img"
-                          src={img.signed_url}
-                          alt={img.name || `Attachment ${idx + 1}`}
-                          sx={{
-                            width: '100%',
-                            display: 'block',
-                            verticalAlign: 'bottom',
-                          }}
-                        />
+                        <AssetPreview asset={asset} variant="grid" />
                       </ButtonBase>
                     ))}
                   </Masonry>
@@ -231,17 +222,9 @@ export const AttachmentsCard = ({
                       justifyContent: 'center',
                     }}
                   >
-                    <AssetPreview asset={currentAsset} />
-                    <Box
-                      component="img"
-                      src={currentAsset?.signed_url}
-                      alt={currentAsset?.name || `Image ${slideshowIndex + 1}`}
-                      sx={{
-                        maxWidth: '100%',
-                        maxHeight: 400,
-                        objectFit: 'contain',
-                      }}
-                    />
+                    {currentAsset && (
+                      <AssetPreview asset={currentAsset} variant="slideshow" />
+                    )}
                     {previewAssets.length > 1 && (
                       <>
                         <IconButton
@@ -321,7 +304,15 @@ export const AttachmentsCard = ({
   )
 }
 
-const AssetPreview = ({ asset }: { asset: IAsset }) => {
+const AssetPreview = ({
+  asset,
+  variant,
+}: {
+  asset: IAsset
+  variant: 'grid' | 'slideshow'
+}) => {
+  const height = variant === 'grid' ? 220 : 500
+
   if (isImage(asset)) {
     return (
       <Box
@@ -330,30 +321,16 @@ const AssetPreview = ({ asset }: { asset: IAsset }) => {
         alt={asset.name}
         sx={{
           width: '100%',
-          maxHeight: 400,
+          maxHeight: height,
           objectFit: 'contain',
           display: 'block',
+          bgcolor: 'grey.100',
         }}
       />
     )
   }
 
-  if (isPdf(asset)) {
-    return (
-      <Box
-        component="iframe"
-        src={asset.signed_url}
-        title={asset.name}
-        sx={{
-          width: '100%',
-          height: 500,
-          border: 0,
-        }}
-      />
-    )
-  }
-
-  if (isText(asset)) {
+  if (isPdf(asset) || isText(asset)) {
     return (
       <Box
         component="iframe"
@@ -361,7 +338,7 @@ const AssetPreview = ({ asset }: { asset: IAsset }) => {
         title={asset.name}
         sx={{
           width: '100%',
-          height: 300,
+          height,
           border: 0,
           bgcolor: 'background.paper',
         }}
@@ -369,5 +346,9 @@ const AssetPreview = ({ asset }: { asset: IAsset }) => {
     )
   }
 
-  return <Typography color="text.secondary">Preview not available.</Typography>
+  return (
+    <Box sx={{ p: 2 }}>
+      <Typography color="text.secondary">Preview not available.</Typography>
+    </Box>
+  )
 }

From 5cf8fd2f865013b38622b8add99c36330d478d3a Mon Sep 17 00:00:00 2001
From: Tyler Adam Martinez <TylerAdamMartinez@outlook.com>
Date: Fri, 12 Jun 2026 07:46:12 -0500
Subject: [PATCH 4/9] fix(Attachments): Download images now works once clicked

---
 src/components/WellShow/Attachments.tsx | 113 +++++++++++++-----------
 1 file changed, 60 insertions(+), 53 deletions(-)

diff --git a/src/components/WellShow/Attachments.tsx b/src/components/WellShow/Attachments.tsx
index c2cbb195..c0870b05 100644
--- a/src/components/WellShow/Attachments.tsx
+++ b/src/components/WellShow/Attachments.tsx
@@ -8,7 +8,6 @@ import {
   Stack,
   Typography,
   Tooltip,
-  Button,
 } from '@mui/material'
 import { DataGrid, GridColDef } from '@mui/x-data-grid'
 import {
@@ -54,18 +53,40 @@ export const AttachmentsCard = ({
         headerName: 'URL',
         flex: 1,
         minWidth: 200,
-        renderCell: ({ value }) => {
-          const href = typeof value === 'string' ? value : ''
-          if (!href) {
+        renderCell: ({ row, value }) => {
+          const uri = typeof value === 'string' ? value : ''
+          const signedUrl = row.signed_url
+
+          if (!uri) {
             return (
               <Typography variant="body2" color="text.secondary">
                 N/A
               </Typography>
             )
           }
+
+          // Show the URI as plain text when there is no signed URL.
+          // Use the signed URL as the actual href when it is available,
+          if (!signedUrl) {
+            return (
+              <Typography
+                variant="body2"
+                sx={{
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap',
+                  display: 'block',
+                  maxWidth: '100%',
+                }}
+              >
+                {uri}
+              </Typography>
+            )
+          }
+
           return (
             <Link
-              href={href}
+              href={signedUrl}
               target="_blank"
               rel="noopener noreferrer"
               variant="body2"
@@ -77,43 +98,11 @@ export const AttachmentsCard = ({
                 maxWidth: '100%',
               }}
             >
-              {href}
+              {uri}
             </Link>
           )
         },
       },
-      {
-        field: 'actions',
-        headerName: 'Actions',
-        width: 180,
-        sortable: false,
-        renderCell: ({ row }) => (
-          <Stack direction="row" spacing={1}>
-            {row.signed_url && (
-              <Button
-                size="small"
-                component="a"
-                href={row.signed_url}
-                target="_blank"
-                rel="noopener noreferrer"
-              >
-                Open
-              </Button>
-            )}
-
-            {row.signed_url && (
-              <Button
-                size="small"
-                component="a"
-                href={row.signed_url}
-                download={row.name}
-              >
-                Download
-              </Button>
-            )}
-          </Stack>
-        ),
-      },
     ],
     []
   )
@@ -304,6 +293,37 @@ export const AttachmentsCard = ({
   )
 }
 
+const previewStyles = {
+  grid: {
+    image: {
+      width: '100%',
+      display: 'block',
+      verticalAlign: 'bottom',
+    },
+    frame: {
+      width: '100%',
+      height: 220,
+      border: 0,
+      bgcolor: 'background.paper',
+    },
+  },
+  slideshow: {
+    image: {
+      width: '100%',
+      maxWidth: '100%',
+      maxHeight: 400,
+      objectFit: 'contain',
+      display: 'block',
+    },
+    frame: {
+      width: '100%',
+      height: 400,
+      border: 0,
+      bgcolor: 'background.paper',
+    },
+  },
+} as const
+
 const AssetPreview = ({
   asset,
   variant,
@@ -311,21 +331,13 @@ const AssetPreview = ({
   asset: IAsset
   variant: 'grid' | 'slideshow'
 }) => {
-  const height = variant === 'grid' ? 220 : 500
-
   if (isImage(asset)) {
     return (
       <Box
         component="img"
         src={asset.signed_url}
         alt={asset.name}
-        sx={{
-          width: '100%',
-          maxHeight: height,
-          objectFit: 'contain',
-          display: 'block',
-          bgcolor: 'grey.100',
-        }}
+        sx={previewStyles[variant].image}
       />
     )
   }
@@ -336,12 +348,7 @@ const AssetPreview = ({
         component="iframe"
         src={asset.signed_url}
         title={asset.name}
-        sx={{
-          width: '100%',
-          height,
-          border: 0,
-          bgcolor: 'background.paper',
-        }}
+        sx={previewStyles[variant].frame}
       />
     )
   }

From ed70233db635590a6b8f774f3cc57f0719be2d06 Mon Sep 17 00:00:00 2001
From: Tyler Adam Martinez <TylerAdamMartinez@outlook.com>
Date: Fri, 12 Jun 2026 08:13:29 -0500
Subject: [PATCH 5/9] feat(Attachments): Add download button

---
 src/components/WellShow/Attachments.tsx | 64 ++++++++++++++-----------
 1 file changed, 36 insertions(+), 28 deletions(-)

diff --git a/src/components/WellShow/Attachments.tsx b/src/components/WellShow/Attachments.tsx
index c0870b05..c76c578b 100644
--- a/src/components/WellShow/Attachments.tsx
+++ b/src/components/WellShow/Attachments.tsx
@@ -3,11 +3,11 @@ import {
   Box,
   ButtonBase,
   IconButton,
-  Link,
   Paper,
   Stack,
   Typography,
   Tooltip,
+  Button,
 } from '@mui/material'
 import { DataGrid, GridColDef } from '@mui/x-data-grid'
 import {
@@ -53,9 +53,8 @@ export const AttachmentsCard = ({
         headerName: 'URL',
         flex: 1,
         minWidth: 200,
-        renderCell: ({ row, value }) => {
+        renderCell: ({ value }) => {
           const uri = typeof value === 'string' ? value : ''
-          const signedUrl = row.signed_url
 
           if (!uri) {
             return (
@@ -65,31 +64,10 @@ export const AttachmentsCard = ({
             )
           }
 
-          // Show the URI as plain text when there is no signed URL.
-          // Use the signed URL as the actual href when it is available,
-          if (!signedUrl) {
-            return (
-              <Typography
-                variant="body2"
-                sx={{
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
-                  display: 'block',
-                  maxWidth: '100%',
-                }}
-              >
-                {uri}
-              </Typography>
-            )
-          }
-
           return (
-            <Link
-              href={signedUrl}
-              target="_blank"
-              rel="noopener noreferrer"
+            <Typography
               variant="body2"
+              color={uri ? 'text.primary' : 'text.secondary'}
               sx={{
                 overflow: 'hidden',
                 textOverflow: 'ellipsis',
@@ -98,8 +76,38 @@ export const AttachmentsCard = ({
                 maxWidth: '100%',
               }}
             >
-              {uri}
-            </Link>
+              {uri || 'N/A'}
+            </Typography>
+          )
+        },
+      },
+      {
+        field: 'actions',
+        headerName: 'Actions',
+        width: 140,
+        sortable: false,
+        renderCell: ({ row }) => {
+          if (!row.signed_url) {
+            return (
+              <Typography variant="body2" color="text.secondary">
+                N/A
+              </Typography>
+            )
+          }
+
+          // Use the signed URL as a download action.
+          // Files are currently served with a generic binary content type
+          // (application/octet-stream), which browsers typically handle as
+          // downloadable content
+          return (
+            <Button
+              size="small"
+              component="a"
+              href={row.signed_url}
+              download={row.name}
+            >
+              Download
+            </Button>
           )
         },
       },

From 42b10957d64ae9077319779c08fbaa383c916920 Mon Sep 17 00:00:00 2001
From: Tyler Adam Martinez <TylerAdamMartinez@outlook.com>
Date: Fri, 12 Jun 2026 14:06:30 -0500
Subject: [PATCH 6/9] feat(Attachments): Add download button to asset previews

---
 src/components/WellShow/Attachments.tsx | 209 ++++++++++++++----------
 1 file changed, 125 insertions(+), 84 deletions(-)

diff --git a/src/components/WellShow/Attachments.tsx b/src/components/WellShow/Attachments.tsx
index c76c578b..6efbd0ef 100644
--- a/src/components/WellShow/Attachments.tsx
+++ b/src/components/WellShow/Attachments.tsx
@@ -9,7 +9,6 @@ import {
   Tooltip,
   Button,
 } from '@mui/material'
-import { DataGrid, GridColDef } from '@mui/x-data-grid'
 import {
   ChevronLeft,
   ChevronRight,
@@ -18,7 +17,6 @@ import {
   ViewCarousel,
 } from '@mui/icons-material'
 import { Masonry } from '@mui/lab'
-import { settings } from '@/settings'
 import type { IAsset } from '@/interfaces/ocotillo'
 
 type PreviewViewMode = 'grid' | 'slideshow'
@@ -45,75 +43,44 @@ export const AttachmentsCard = ({
 
   const previewAssets = useMemo(() => assets.filter(canPreview), [assets])
 
-  const columns = useMemo<GridColDef<IAsset>[]>(
-    () => [
-      { field: 'name', headerName: 'Name', minWidth: 150 },
-      {
-        field: 'uri',
-        headerName: 'URL',
-        flex: 1,
-        minWidth: 200,
-        renderCell: ({ value }) => {
-          const uri = typeof value === 'string' ? value : ''
+  // const columns = useMemo<GridColDef<IAsset>[]>(
+  //   () => [
+  //     { field: 'name', headerName: 'Name', minWidth: 150 },
+  //     {
+  //       field: 'actions',
+  //       headerName: 'Actions',
+  //       width: 140,
+  //       sortable: false,
+  //       headerAlign: 'right',
+  //       align: 'right',
+  //       renderCell: ({ row }) => {
+  //         if (!row.signed_url) {
+  //           return (
+  //             <Typography variant="body2" color="text.secondary">
+  //               N/A
+  //             </Typography>
+  //           )
+  //         }
 
-          if (!uri) {
-            return (
-              <Typography variant="body2" color="text.secondary">
-                N/A
-              </Typography>
-            )
-          }
-
-          return (
-            <Typography
-              variant="body2"
-              color={uri ? 'text.primary' : 'text.secondary'}
-              sx={{
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                whiteSpace: 'nowrap',
-                display: 'block',
-                maxWidth: '100%',
-              }}
-            >
-              {uri || 'N/A'}
-            </Typography>
-          )
-        },
-      },
-      {
-        field: 'actions',
-        headerName: 'Actions',
-        width: 140,
-        sortable: false,
-        renderCell: ({ row }) => {
-          if (!row.signed_url) {
-            return (
-              <Typography variant="body2" color="text.secondary">
-                N/A
-              </Typography>
-            )
-          }
-
-          // Use the signed URL as a download action.
-          // Files are currently served with a generic binary content type
-          // (application/octet-stream), which browsers typically handle as
-          // downloadable content
-          return (
-            <Button
-              size="small"
-              component="a"
-              href={row.signed_url}
-              download={row.name}
-            >
-              Download
-            </Button>
-          )
-        },
-      },
-    ],
-    []
-  )
+  //         // Use the signed URL as a download action.
+  //         // Files are currently served with a generic binary content type
+  //         // (application/octet-stream), which browsers typically handle as
+  //         // downloadable content
+  //         return (
+  //           <Button
+  //             size="small"
+  //             component="a"
+  //             href={row.signed_url}
+  //             download={row.name}
+  //           >
+  //             Download
+  //           </Button>
+  //         )
+  //       },
+  //     },
+  //   ],
+  //   []
+  // )
 
   const currentAsset = previewAssets[slideshowIndex]
   const hasAssets = previewAssets.length > 0
@@ -201,7 +168,7 @@ export const AttachmentsCard = ({
                           textAlign: 'left',
                         }}
                       >
-                        <AssetPreview asset={asset} variant="grid" />
+                        <AssetPreviewWithOverlay asset={asset} variant="grid" />
                       </ButtonBase>
                     ))}
                   </Masonry>
@@ -220,7 +187,10 @@ export const AttachmentsCard = ({
                     }}
                   >
                     {currentAsset && (
-                      <AssetPreview asset={currentAsset} variant="slideshow" />
+                      <AssetPreviewWithOverlay
+                        asset={currentAsset}
+                        variant="slideshow"
+                      />
                     )}
                     {previewAssets.length > 1 && (
                       <>
@@ -282,18 +252,6 @@ export const AttachmentsCard = ({
                 )}
               </Box>
             )}
-
-            <DataGrid
-              rowHeight={settings.rowHeight}
-              columns={columns}
-              rows={assets}
-              pageSizeOptions={[10, 25, 50]}
-              initialState={{
-                pagination: {
-                  paginationModel: { pageSize: 10, page: 0 },
-                },
-              }}
-            />
           </Stack>
         )}
       </Box>
@@ -367,3 +325,86 @@ const AssetPreview = ({
     </Box>
   )
 }
+
+const AssetPreviewWithOverlay = ({
+  asset,
+  variant,
+}: {
+  asset: IAsset
+  variant: 'grid' | 'slideshow'
+}) => {
+  const isSlideshow = variant === 'slideshow'
+
+  return (
+    <Box
+      sx={{
+        position: 'relative',
+        width: '100%',
+        '&:hover .asset-overlay': {
+          opacity: 1,
+        },
+      }}
+    >
+      <AssetPreview asset={asset} variant={variant} />
+
+      <Box
+        className="asset-overlay"
+        sx={{
+          position: 'absolute',
+          inset: 0,
+          opacity: isSlideshow ? 1 : 0,
+          transition: 'opacity 0.2s ease-in-out',
+          background: isSlideshow
+            ? undefined
+            : 'linear-gradient(to top, rgba(0,0,0,0.65), rgba(0,0,0,0.05))',
+          pointerEvents: 'none',
+        }}
+      />
+
+      <Typography
+        className="asset-overlay"
+        variant="caption"
+        sx={{
+          position: 'absolute',
+          left: 8,
+          bottom: 8,
+          opacity: isSlideshow ? 1 : 0,
+          transition: 'opacity 0.2s ease-in-out',
+          color: isSlideshow ? 'black' : 'white',
+          maxWidth: '70%',
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+        }}
+      >
+        {asset.name}
+      </Typography>
+
+      {asset.signed_url && (
+        <Button
+          variant="outlined"
+          className="asset-overlay"
+          size="small"
+          component="a"
+          href={asset.signed_url}
+          download={asset.name}
+          onClick={(event) => event.stopPropagation()}
+          sx={{
+            position: 'absolute',
+            right: 8,
+            bottom: 8,
+            opacity: isSlideshow ? 1 : 0,
+            transition: 'opacity 0.2s ease-in-out',
+            pointerEvents: 'auto',
+            bgcolor: 'background.paper',
+            '&:hover': {
+              bgcolor: 'background.paper',
+            },
+          }}
+        >
+          Download
+        </Button>
+      )}
+    </Box>
+  )
+}

From 5195ab8522448f36507e45a59ad6fc88bd58bc0f Mon Sep 17 00:00:00 2001
From: Tyler Adam Martinez <TylerAdamMartinez@outlook.com>
Date: Fri, 12 Jun 2026 14:20:13 -0500
Subject: [PATCH 7/9] fix(Attachment): Add signed url refresh

---
 src/components/WellShow/Attachments.tsx | 87 +++++++++++++------------
 src/pages/ocotillo/thing/well-show.tsx  |  1 +
 2 files changed, 46 insertions(+), 42 deletions(-)

diff --git a/src/components/WellShow/Attachments.tsx b/src/components/WellShow/Attachments.tsx
index 6efbd0ef..2ae4bb31 100644
--- a/src/components/WellShow/Attachments.tsx
+++ b/src/components/WellShow/Attachments.tsx
@@ -33,9 +33,11 @@ const canPreview = (asset: IAsset) =>
 export const AttachmentsCard = ({
   assets,
   isLoading,
+  refetchAssets,
 }: {
   assets: IAsset[]
   isLoading: boolean
+  refetchAssets: () => Promise<unknown>
 }) => {
   const [previewViewMode, setPreviewViewMode] =
     useState<PreviewViewMode>('grid')
@@ -43,45 +45,6 @@ export const AttachmentsCard = ({
 
   const previewAssets = useMemo(() => assets.filter(canPreview), [assets])
 
-  // const columns = useMemo<GridColDef<IAsset>[]>(
-  //   () => [
-  //     { field: 'name', headerName: 'Name', minWidth: 150 },
-  //     {
-  //       field: 'actions',
-  //       headerName: 'Actions',
-  //       width: 140,
-  //       sortable: false,
-  //       headerAlign: 'right',
-  //       align: 'right',
-  //       renderCell: ({ row }) => {
-  //         if (!row.signed_url) {
-  //           return (
-  //             <Typography variant="body2" color="text.secondary">
-  //               N/A
-  //             </Typography>
-  //           )
-  //         }
-
-  //         // Use the signed URL as a download action.
-  //         // Files are currently served with a generic binary content type
-  //         // (application/octet-stream), which browsers typically handle as
-  //         // downloadable content
-  //         return (
-  //           <Button
-  //             size="small"
-  //             component="a"
-  //             href={row.signed_url}
-  //             download={row.name}
-  //           >
-  //             Download
-  //           </Button>
-  //         )
-  //       },
-  //     },
-  //   ],
-  //   []
-  // )
-
   const currentAsset = previewAssets[slideshowIndex]
   const hasAssets = previewAssets.length > 0
 
@@ -168,7 +131,11 @@ export const AttachmentsCard = ({
                           textAlign: 'left',
                         }}
                       >
-                        <AssetPreviewWithOverlay asset={asset} variant="grid" />
+                        <AssetPreviewWithOverlay
+                          asset={asset}
+                          variant="grid"
+                          refetchAssets={refetchAssets}
+                        />
                       </ButtonBase>
                     ))}
                   </Masonry>
@@ -190,6 +157,7 @@ export const AttachmentsCard = ({
                       <AssetPreviewWithOverlay
                         asset={currentAsset}
                         variant="slideshow"
+                        refetchAssets={refetchAssets}
                       />
                     )}
                     {previewAssets.length > 1 && (
@@ -329,12 +297,45 @@ const AssetPreview = ({
 const AssetPreviewWithOverlay = ({
   asset,
   variant,
+  refetchAssets,
 }: {
   asset: IAsset
   variant: 'grid' | 'slideshow'
+  refetchAssets: () => Promise<unknown>
 }) => {
   const isSlideshow = variant === 'slideshow'
 
+  const downloadAsset = async (
+    asset: IAsset,
+    refetchAssets: () => Promise<unknown>
+  ) => {
+    let response = await fetch(asset.signed_url)
+
+    if (response.status === 403) {
+      await refetchAssets()
+
+      // This refetch updates React state, but this local asset still has
+      // the old signed URL. User can click again after URLs refresh.
+      return
+    }
+
+    if (!response.ok) {
+      throw new Error('Failed to download asset')
+    }
+
+    const blob = await response.blob()
+    const objectUrl = URL.createObjectURL(blob)
+
+    const link = document.createElement('a')
+    link.href = objectUrl
+    link.download = asset.name || 'download'
+    document.body.appendChild(link)
+    link.click()
+    link.remove()
+
+    URL.revokeObjectURL(objectUrl)
+  }
+
   return (
     <Box
       sx={{
@@ -387,8 +388,10 @@ const AssetPreviewWithOverlay = ({
           size="small"
           component="a"
           href={asset.signed_url}
-          download={asset.name}
-          onClick={(event) => event.stopPropagation()}
+          onClick={(event) => {
+            event.stopPropagation()
+            downloadAsset(asset, refetchAssets)
+          }}
           sx={{
             position: 'absolute',
             right: 8,
diff --git a/src/pages/ocotillo/thing/well-show.tsx b/src/pages/ocotillo/thing/well-show.tsx
index 42439380..d7049681 100644
--- a/src/pages/ocotillo/thing/well-show.tsx
+++ b/src/pages/ocotillo/thing/well-show.tsx
@@ -401,6 +401,7 @@ export const WellShow = () => {
               <AttachmentsCard
                 assets={assets}
                 isLoading={assetQuery.isLoading}
+                refetchAssets={assetQuery.refetch}
               />
               <OSEPODInfoCard pod_id={osepod_id} />
               <USGSInfoCard site_id={usgs_id} />

From 8784a174a6bf47e23455e3cd6d6da1288482aa1a Mon Sep 17 00:00:00 2001
From: Tyler Adam Martinez <TylerAdamMartinez@outlook.com>
Date: Fri, 12 Jun 2026 15:18:02 -0500
Subject: [PATCH 8/9] fix(Attachments): Add refresh if download took longer
 than 15 mins

---
 src/components/WellShow/Attachments.tsx | 52 ++++++++++++++++---------
 1 file changed, 34 insertions(+), 18 deletions(-)

diff --git a/src/components/WellShow/Attachments.tsx b/src/components/WellShow/Attachments.tsx
index 2ae4bb31..eb37836e 100644
--- a/src/components/WellShow/Attachments.tsx
+++ b/src/components/WellShow/Attachments.tsx
@@ -309,31 +309,47 @@ const AssetPreviewWithOverlay = ({
     asset: IAsset,
     refetchAssets: () => Promise<unknown>
   ) => {
-    let response = await fetch(asset.signed_url)
+    const downloadFromUrl = async (url: string, fileName: string) => {
+      const response = await fetch(url)
 
-    if (response.status === 403) {
-      await refetchAssets()
+      if (!response.ok) {
+        throw response
+      }
 
-      // This refetch updates React state, but this local asset still has
-      // the old signed URL. User can click again after URLs refresh.
-      return
-    }
+      const blob = await response.blob()
+      const objectUrl = URL.createObjectURL(blob)
+
+      const link = document.createElement('a')
+      link.href = objectUrl
+      link.download = fileName || 'download'
+      document.body.appendChild(link)
+      link.click()
+      link.remove()
 
-    if (!response.ok) {
-      throw new Error('Failed to download asset')
+      URL.revokeObjectURL(objectUrl)
     }
 
-    const blob = await response.blob()
-    const objectUrl = URL.createObjectURL(blob)
+    try {
+      await downloadFromUrl(asset.signed_url, asset.name)
+    } catch (error) {
+      if (!(error instanceof Response) || error.status !== 403) {
+        throw error
+      }
+
+      const refetchResult = await refetchAssets()
+      const refreshedAssets =
+        refetchResult.data?.data ?? refetchResult.data ?? []
 
-    const link = document.createElement('a')
-    link.href = objectUrl
-    link.download = asset.name || 'download'
-    document.body.appendChild(link)
-    link.click()
-    link.remove()
+      const refreshedAsset = refreshedAssets.find(
+        (item: IAsset) => item.id === asset.id
+      )
 
-    URL.revokeObjectURL(objectUrl)
+      if (!refreshedAsset?.signed_url) {
+        throw new Error('Could not refresh signed URL')
+      }
+
+      await downloadFromUrl(refreshedAsset.signed_url, refreshedAsset.name)
+    }
   }
 
   return (

From 8607ea45a19a5e8396f749a858d028a5792158c7 Mon Sep 17 00:00:00 2001
From: Tyler Adam Martinez <TylerAdamMartinez@outlook.com>
Date: Fri, 12 Jun 2026 15:34:16 -0500
Subject: [PATCH 9/9] fix(Attachments): Add types

---
 src/components/WellShow/Attachments.tsx | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/src/components/WellShow/Attachments.tsx b/src/components/WellShow/Attachments.tsx
index eb37836e..a5fd140f 100644
--- a/src/components/WellShow/Attachments.tsx
+++ b/src/components/WellShow/Attachments.tsx
@@ -18,6 +18,8 @@ import {
 } from '@mui/icons-material'
 import { Masonry } from '@mui/lab'
 import type { IAsset } from '@/interfaces/ocotillo'
+import { QueryObserverResult } from '@tanstack/react-query'
+import { GetListResponse, HttpError } from '@refinedev/core'
 
 type PreviewViewMode = 'grid' | 'slideshow'
 
@@ -37,7 +39,9 @@ export const AttachmentsCard = ({
 }: {
   assets: IAsset[]
   isLoading: boolean
-  refetchAssets: () => Promise<unknown>
+  refetchAssets: () => Promise<
+    QueryObserverResult<GetListResponse<IAsset>, HttpError>
+  >
 }) => {
   const [previewViewMode, setPreviewViewMode] =
     useState<PreviewViewMode>('grid')
@@ -301,13 +305,17 @@ const AssetPreviewWithOverlay = ({
 }: {
   asset: IAsset
   variant: 'grid' | 'slideshow'
-  refetchAssets: () => Promise<unknown>
+  refetchAssets: () => Promise<
+    QueryObserverResult<GetListResponse<IAsset>, HttpError>
+  >
 }) => {
   const isSlideshow = variant === 'slideshow'
 
   const downloadAsset = async (
     asset: IAsset,
-    refetchAssets: () => Promise<unknown>
+    refetchAssets: () => Promise<
+      QueryObserverResult<GetListResponse<IAsset>, HttpError>
+    >
   ) => {
     const downloadFromUrl = async (url: string, fileName: string) => {
       const response = await fetch(url)
@@ -402,8 +410,6 @@ const AssetPreviewWithOverlay = ({
           variant="outlined"
           className="asset-overlay"
           size="small"
-          component="a"
-          href={asset.signed_url}
           onClick={(event) => {
             event.stopPropagation()
             downloadAsset(asset, refetchAssets)