From e44883b5e08c9300877d337c260a7b892564f396 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Mon, 9 Mar 2026 22:58:41 -0500
Subject: [PATCH] feat(dogs): add delete button with confirm modal on DogList

---
 client/src/pages/DogList.jsx | 187 +++++++++++++++++++++++++++--------
 1 file changed, 147 insertions(+), 40 deletions(-)

diff --git a/client/src/pages/DogList.jsx b/client/src/pages/DogList.jsx
index 1815348..ba5f79c 100644
--- a/client/src/pages/DogList.jsx
+++ b/client/src/pages/DogList.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { Link } from 'react-router-dom'
-import { Dog, Plus, Search, Calendar, Hash, ArrowRight } from 'lucide-react'
+import { Link, useNavigate } from 'react-router-dom'
+import { Dog, Plus, Search, Calendar, Hash, ArrowRight, Trash2 } from 'lucide-react'
 import axios from 'axios'
 import DogForm from '../components/DogForm'
 import { ChampionBadge, ChampionBloodlineBadge } from '../components/ChampionBadge'
@@ -12,6 +12,8 @@ function DogList() {
   const [sexFilter, setSexFilter] = useState('all')
   const [loading, setLoading] = useState(true)
   const [showAddModal, setShowAddModal] = useState(false)
+  const [deleteTarget, setDeleteTarget] = useState(null)  // { id, name }
+  const [deleting, setDeleting] = useState(false)
 
   useEffect(() => { fetchDogs() }, [])
   useEffect(() => { filterDogs() }, [dogs, search, sexFilter])
@@ -43,6 +45,21 @@ function DogList() {
 
   const handleSave = () => { fetchDogs() }
 
+  const handleDelete = async () => {
+    if (!deleteTarget) return
+    setDeleting(true)
+    try {
+      await axios.delete(`/api/dogs/${deleteTarget.id}`)
+      setDogs(prev => prev.filter(d => d.id !== deleteTarget.id))
+      setDeleteTarget(null)
+    } catch (err) {
+      console.error('Delete failed:', err)
+      alert('Failed to delete dog. Please try again.')
+    } finally {
+      setDeleting(false)
+    }
+  }
+
   const calculateAge = (birthDate) => {
     if (!birthDate) return null
     const today = new Date()
@@ -55,7 +72,6 @@ function DogList() {
     return `${years}y ${months}mo`
   }
 
-  // A dog has champion blood if sire or dam is a champion
   const hasChampionBlood = (dog) =>
     (dog.sire && dog.sire.is_champion) || (dog.dam && dog.dam.is_champion)
 
@@ -132,18 +148,15 @@ function DogList() {
       ) : (
         <div style={{ display: 'grid', gap: '1rem' }}>
           {filteredDogs.map(dog => (
-            <Link
+            <div
               key={dog.id}
-              to={`/dogs/${dog.id}`}
               className="card"
               style={{
                 padding: '1rem',
-                textDecoration: 'none',
                 display: 'flex',
                 gap: '1rem',
                 alignItems: 'center',
                 transition: 'var(--transition)',
-                cursor: 'pointer'
               }}
               onMouseEnter={(e) => {
                 e.currentTarget.style.borderColor = 'var(--primary)'
@@ -157,36 +170,44 @@ function DogList() {
               }}
             >
               {/* Avatar */}
-              <div style={{
-                width: '80px', height: '80px', flexShrink: 0,
-                borderRadius: 'var(--radius)',
-                background: 'var(--bg-primary)',
-                border: dog.is_champion
-                  ? '2px solid var(--champion-gold)'
-                  : hasChampionBlood(dog)
-                    ? '2px solid var(--bloodline-amber)'
-                    : '2px solid var(--border)',
-                display: 'flex', alignItems: 'center', justifyContent: 'center',
-                overflow: 'hidden',
-                boxShadow: dog.is_champion
-                  ? '0 0 8px var(--champion-glow)'
-                  : hasChampionBlood(dog)
-                    ? '0 0 8px var(--bloodline-glow)'
-                    : 'none'
-              }}>
-                {dog.photo_urls && dog.photo_urls.length > 0 ? (
-                  <img
-                    src={dog.photo_urls[0]}
-                    alt={dog.name}
-                    style={{ width: '100%', height: '100%', objectFit: 'cover' }}
-                  />
-                ) : (
-                  <Dog size={32} style={{ color: 'var(--text-muted)', opacity: 0.5 }} />
-                )}
-              </div>
+              <Link
+                to={`/dogs/${dog.id}`}
+                style={{ flexShrink: 0, textDecoration: 'none' }}
+              >
+                <div style={{
+                  width: '80px', height: '80px',
+                  borderRadius: 'var(--radius)',
+                  background: 'var(--bg-primary)',
+                  border: dog.is_champion
+                    ? '2px solid var(--champion-gold)'
+                    : hasChampionBlood(dog)
+                      ? '2px solid var(--bloodline-amber)'
+                      : '2px solid var(--border)',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center',
+                  overflow: 'hidden',
+                  boxShadow: dog.is_champion
+                    ? '0 0 8px var(--champion-glow)'
+                    : hasChampionBlood(dog)
+                      ? '0 0 8px var(--bloodline-glow)'
+                      : 'none'
+                }}>
+                  {dog.photo_urls && dog.photo_urls.length > 0 ? (
+                    <img
+                      src={dog.photo_urls[0]}
+                      alt={dog.name}
+                      style={{ width: '100%', height: '100%', objectFit: 'cover' }}
+                    />
+                  ) : (
+                    <Dog size={32} style={{ color: 'var(--text-muted)', opacity: 0.5 }} />
+                  )}
+                </div>
+              </Link>
 
-              {/* Info */}
-              <div style={{ flex: 1, minWidth: 0 }}>
+              {/* Info — clicking navigates to detail */}
+              <Link
+                to={`/dogs/${dog.id}`}
+                style={{ flex: 1, minWidth: 0, textDecoration: 'none', color: 'inherit' }}
+              >
                 <h3 style={{
                   fontSize: '1.125rem',
                   marginBottom: '0.25rem',
@@ -238,22 +259,108 @@ function DogList() {
                     {dog.registration_number}
                   </div>
                 )}
-              </div>
+              </Link>
 
-              <div style={{ opacity: 0.5, transition: 'var(--transition)' }}>
-                <ArrowRight size={20} color="var(--text-muted)" />
+              {/* Actions */}
+              <div style={{ display: 'flex', gap: '0.5rem', flexShrink: 0, alignItems: 'center' }}>
+                <Link
+                  to={`/dogs/${dog.id}`}
+                  style={{ opacity: 0.5, transition: 'var(--transition)', color: 'inherit' }}
+                >
+                  <ArrowRight size={20} color="var(--text-muted)" />
+                </Link>
+                <button
+                  className="btn btn-ghost"
+                  title={`Delete ${dog.name}`}
+                  onClick={(e) => { e.stopPropagation(); setDeleteTarget({ id: dog.id, name: dog.name }) }}
+                  style={{
+                    padding: '0.4rem',
+                    color: 'var(--text-muted)',
+                    border: '1px solid transparent',
+                    borderRadius: 'var(--radius-sm)',
+                    display: 'flex', alignItems: 'center',
+                    transition: 'var(--transition)'
+                  }}
+                  onMouseEnter={(e) => {
+                    e.currentTarget.style.color = '#ef4444'
+                    e.currentTarget.style.borderColor = '#ef4444'
+                    e.currentTarget.style.background = 'rgba(239,68,68,0.08)'
+                  }}
+                  onMouseLeave={(e) => {
+                    e.currentTarget.style.color = 'var(--text-muted)'
+                    e.currentTarget.style.borderColor = 'transparent'
+                    e.currentTarget.style.background = 'transparent'
+                  }}
+                >
+                  <Trash2 size={16} />
+                </button>
               </div>
-            </Link>
+            </div>
           ))}
         </div>
       )}
 
+      {/* Add Dog Modal */}
       {showAddModal && (
         <DogForm
           onClose={() => setShowAddModal(false)}
           onSave={handleSave}
         />
       )}
+
+      {/* Delete Confirmation Modal */}
+      {deleteTarget && (
+        <div style={{
+          position: 'fixed', inset: 0,
+          background: 'rgba(0,0,0,0.65)',
+          display: 'flex', alignItems: 'center', justifyContent: 'center',
+          zIndex: 1000,
+          backdropFilter: 'blur(4px)'
+        }}>
+          <div className="card" style={{ maxWidth: 420, width: '90%', padding: '2rem', textAlign: 'center' }}>
+            <div style={{
+              width: 56, height: 56,
+              borderRadius: '50%',
+              background: 'rgba(239,68,68,0.12)',
+              display: 'flex', alignItems: 'center', justifyContent: 'center',
+              margin: '0 auto 1rem'
+            }}>
+              <Trash2 size={26} style={{ color: '#ef4444' }} />
+            </div>
+            <h3 style={{ margin: '0 0 0.5rem', fontSize: '1.25rem' }}>Delete Dog?</h3>
+            <p style={{ color: 'var(--text-secondary)', marginBottom: '1.75rem', lineHeight: 1.6 }}>
+              <strong style={{ color: 'var(--text-primary)' }}>{deleteTarget.name}</strong> will be
+              permanently removed along with all parent relationships, health records,
+              and heat cycles. This cannot be undone.
+            </p>
+            <div style={{ display: 'flex', gap: '0.75rem', justifyContent: 'center' }}>
+              <button
+                className="btn btn-ghost"
+                onClick={() => setDeleteTarget(null)}
+                disabled={deleting}
+                style={{ minWidth: 100 }}
+              >
+                Cancel
+              </button>
+              <button
+                className="btn"
+                onClick={handleDelete}
+                disabled={deleting}
+                style={{
+                  minWidth: 140,
+                  background: '#ef4444',
+                  color: '#fff',
+                  border: '1px solid #ef4444',
+                  display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem'
+                }}
+              >
+                <Trash2 size={15} />
+                {deleting ? 'Deleting…' : 'Yes, Delete'}
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   )
 }