feat(well-show): generate the annual water quality report from well details

src/components/AppShell.tsx

@@ -469,13 +469,15 @@ function AppSidebar() {
   )
 }
 
+const SANDBOX_CHEMISTRY_REPORT = '/ocotillo/chemistry-report'
 const SANDBOX_GEOTHERMAL_GRID = '/geothermal/wells/records-grid'
 const SANDBOX_GEOTHERMAL_INVENTORY = '/geothermal/wells/inventory'
 const SANDBOX_GEOTHERMAL_TEMP_DEPTH = '/geothermal/wells/temp-depth'
 
 function isSandboxPath(pathname: string): boolean {
   return (
     pathname.startsWith('/example') ||
+    pathname.startsWith(SANDBOX_CHEMISTRY_REPORT) ||
     pathname.startsWith(SANDBOX_GEOTHERMAL_GRID) ||
     pathname.startsWith(SANDBOX_GEOTHERMAL_INVENTORY) ||
     pathname.startsWith(SANDBOX_GEOTHERMAL_TEMP_DEPTH)
@@ -516,6 +518,19 @@ function ExampleNavItem() {
                 <Link to="/example/typography">Typography</Link>
               </SidebarMenuSubButton>
             </SidebarMenuSubItem>
+            {/* Gated on the AMP.Staging group via ocotillo.chemistry-report. */}
+            <CanAccess resource="ocotillo.chemistry-report" action="list">
+              <SidebarMenuSubItem>
+                <SidebarMenuSubButton
+                  asChild
+                  isActive={location.pathname.startsWith(
+                    SANDBOX_CHEMISTRY_REPORT
+                  )}
+                >
+                  <Link to={SANDBOX_CHEMISTRY_REPORT}>Chemistry Reports</Link>
+                </SidebarMenuSubButton>
+              </SidebarMenuSubItem>
+            </CanAccess>
             <SidebarMenuSubItem>
               <SidebarMenuSubButton
                 asChild

src/components/Button/ChemistryReportDownload.tsx

@@ -0,0 +1,74 @@
+import { useNotification } from '@refinedev/core'
+import { DownloadIcon } from 'lucide-react'
+import { useState } from 'react'
+import {
+  type ChemistryReportSections,
+  downloadChemistryReport,
+} from '@/components/pdf/chemistry'
+import { Button } from '@/components/ui/button'
+import type { ChemistryResult } from '@/hooks/useChemistryReportData'
+import type { IContact, IWell } from '@/interfaces/ocotillo'
+import type { WaterLevelReading } from '@/utils/chemistryReport'
+
+export const ChemistryReportDownloadButton = ({
+  well,
+  contacts,
+  observations,
+  waterLevels,
+  year,
+  sections,
+  disabled = false,
+}: {
+  well?: IWell
+  contacts: readonly IContact[]
+  observations: readonly ChemistryResult[]
+  waterLevels?: readonly WaterLevelReading[]
+  year: number
+  sections: ChemistryReportSections
+  disabled?: boolean
+}) => {
+  const { open: notify } = useNotification()
+  const [isGenerating, setIsGenerating] = useState(false)
+
+  const handleDownload = async () => {
+    if (!well) return
+
+    try {
+      setIsGenerating(true)
+      const filename = await downloadChemistryReport({
+        well,
+        contacts,
+        observations,
+        waterLevels,
+        year,
+        sections,
+      })
+
+      notify?.({
+        message: 'Chemistry report generated',
+        type: 'success',
+        description: filename,
+      })
+    } catch (error) {
+      console.error(error)
+      notify?.({
+        message: 'Chemistry report generation failed',
+        type: 'error',
+      })
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  return (
+    <Button
+      variant="outline"
+      size="sm"
+      disabled={disabled || !well || isGenerating}
+      onClick={handleDownload}
+    >
+      <DownloadIcon />
+      {isGenerating ? 'Generating…' : 'Download PDF'}
+    </Button>
+  )
+}