From d3ddd83b38fae4983869e0fcaaf576c1e53e68c5 Mon Sep 17 00:00:00 2001
From: Tyler Adam Martinez <TylerAdamMartinez@outlook.com>
Date: Fri, 26 Jun 2026 13:11:36 -0500
Subject: [PATCH] fix(well-show-pdf-preview): Update breadcrumbs to match the
 well detail page

---
 src/components/AppShell.tsx                   | 24 ++++++++++++++++---
 .../ocotillo/thing/well-show-pdf-preview.tsx  | 11 +--------
 2 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/src/components/AppShell.tsx b/src/components/AppShell.tsx
index 7c0355e0..2c84b52b 100644
--- a/src/components/AppShell.tsx
+++ b/src/components/AppShell.tsx
@@ -1060,8 +1060,8 @@ const NESTED_LIST_BREADCRUMBS: Record<
   { parentLabel: string; parentHref: string; label: string }
 > = {}
 
-// Pattern: /<prefix>/<slug>/show/<id>  or  /<prefix>/<slug>/edit/<id>
-const DETAIL_PATTERN = /\/([a-z0-9-]+)\/(show|edit)\/([^/]+)$/
+// Pattern: /<prefix>/<slug>/show/<id>, /edit/<id>, or /pdf-preview/<id>
+const DETAIL_PATTERN = /\/([a-z0-9-]+)\/(show|edit|pdf-preview)\/([^/]+)$/
 
 function NestedListBreadcrumb({
   parentLabel,
@@ -1092,6 +1092,7 @@ function HeaderBreadcrumb() {
   const nestedList = NESTED_LIST_BREADCRUMBS[location.pathname]
   const routeMatch = location.pathname.match(DETAIL_PATTERN)
   const slug = routeMatch?.[1] ?? ''
+  const action = routeMatch?.[2] ?? ''
   const id = routeMatch?.[3] ?? ''
   const resourceInfo = BREADCRUMB_RESOURCES[slug]
 
@@ -1111,6 +1112,7 @@ function HeaderBreadcrumb() {
   if (!routeMatch || !resourceInfo) return null
 
   const recordLabel = recordName ?? `#${id}`
+  const isPdfPreview = action === 'pdf-preview'
 
   return (
     <nav aria-label="breadcrumb" className="flex items-center gap-1 text-sm shrink-0">
@@ -1121,7 +1123,23 @@ function HeaderBreadcrumb() {
         {resourceInfo.label}
       </Link>
       <ChevronRight className="h-3.5 w-3.5 text-muted-foreground/40 shrink-0" aria-hidden="true" />
-      <span className="text-foreground font-medium">{recordLabel}</span>
+      {isPdfPreview ? (
+        <>
+          <Link
+            to={`/ocotillo/${slug}/show/${id}`}
+            className="text-muted-foreground hover:text-foreground transition-colors no-underline"
+          >
+            {recordLabel}
+          </Link>
+          <ChevronRight
+            className="h-3.5 w-3.5 text-muted-foreground/40 shrink-0"
+            aria-hidden="true"
+          />
+          <span className="text-foreground font-medium">PDF Preview</span>
+        </>
+      ) : (
+        <span className="text-foreground font-medium">{recordLabel}</span>
+      )}
     </nav>
   )
 }
diff --git a/src/pages/ocotillo/thing/well-show-pdf-preview.tsx b/src/pages/ocotillo/thing/well-show-pdf-preview.tsx
index 51d64d4f..3bc4dc00 100644
--- a/src/pages/ocotillo/thing/well-show-pdf-preview.tsx
+++ b/src/pages/ocotillo/thing/well-show-pdf-preview.tsx
@@ -37,7 +37,6 @@ import { getLabelFromOptionalPdfFieldKey } from '@/utils'
 import { useAccessCapabilities, useWellPdfData } from '@/hooks'
 import { IWell } from '@/interfaces/ocotillo'
 import { IHydrographDatasource } from '@/interfaces/st2'
-import { AppBreadcrumb } from '@/components/AppBreadcrumb'
 import {
   ocotilloCardHeaderProps,
   OcotilloHeaderButtons,
@@ -226,15 +225,7 @@ export const WellShowPdfPreview = () => {
       resource="thing-well"
       recordItemId={id}
       goBack={false}
-      breadcrumb={
-        <AppBreadcrumb
-          items={[
-            { label: 'Wells', href: '/ocotillo/well' },
-            { label: 'Show', href: `/ocotillo/well/show/${id}` },
-            { label: 'PDF Preview' },
-          ]}
-        />
-      }
+      breadcrumb={false}
       wrapperProps={{
         elevation: 0,
         sx: {