Merge pull request 'feat: delete dogs + PawPrint nav icon' (#35) from feat/dog-delete-nav-icon into master

Reviewed-on: #35

client/src/App.jsx

@@ -1,5 +1,5 @@
 import { BrowserRouter as Router, Routes, Route, Link, useLocation } from 'react-router-dom'
-import { Home, Users, Activity, Heart, FlaskConical, Settings } from 'lucide-react'
+import { Home, PawPrint, Activity, Heart, FlaskConical, Settings } from 'lucide-react'
 import Dashboard from './pages/Dashboard'
 import DogList from './pages/DogList'
 import DogDetail from './pages/DogDetail'
@@ -41,7 +41,7 @@ function AppInner() {
           </div>
           <div className="nav-links">
             <NavLink to="/" icon={Home} label="Dashboard" />
-            <NavLink to="/dogs" icon={Users} label="Dogs" />
+            <NavLink to="/dogs" icon={PawPrint} label="Dogs" />
             <NavLink to="/litters" icon={Activity} label="Litters" />
             <NavLink to="/breeding" icon={Heart} label="Breeding" />
             <NavLink to="/pairing" icon={FlaskConical} label="Pairing" />

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>
   )
 }

server/routes/dogs.js

@@ -1,9 +1,9 @@
 const express = require('express');
-const router = express.Router();
+const router  = express.Router();
 const { getDatabase } = require('../db/init');
 const multer = require('multer');
-const path = require('path');
-const fs = require('fs');
+const path   = require('path');
+const fs     = require('fs');
 
 const storage = multer.diskStorage({
   destination: (req, file, cb) => {
@@ -31,14 +31,14 @@ const upload = multer({
 
 const emptyToNull = (v) => (v === '' || v === undefined) ? null : v;
 
-// ── Shared SELECT columns ─────────────────────────────────────────────
+// ── Shared SELECT columns ────────────────────────────────────────────
 const DOG_COLS = `
   id, name, registration_number, breed, sex, birth_date,
   color, microchip, photo_urls, notes, litter_id, is_active,
   is_champion, created_at, updated_at
 `;
 
-// ── GET all dogs ───────────────────────────────────────────────────
+// ── GET all dogs ─────────────────────────────────────────────────────
 router.get('/', (req, res) => {
   try {
     const db = getDatabase();
@@ -49,7 +49,6 @@ router.get('/', (req, res) => {
       ORDER BY name
     `).all();
 
-    // Also pull sire/dam so list page can compute bloodline status
     const parentStmt = db.prepare(`
       SELECT p.parent_type, d.id, d.name, d.is_champion
       FROM parents p
@@ -71,7 +70,7 @@ router.get('/', (req, res) => {
   }
 });
 
-// ── GET single dog (with parents + offspring) ───────────────────────
+// ── GET single dog (with parents + offspring) ────────────────────────
 router.get('/:id', (req, res) => {
   try {
     const db = getDatabase();
@@ -81,7 +80,6 @@ router.get('/:id', (req, res) => {
 
     dog.photo_urls = dog.photo_urls ? JSON.parse(dog.photo_urls) : [];
 
-    // Parents — include is_champion so frontend can render bloodline badge
     const parents = db.prepare(`
       SELECT p.parent_type, d.id, d.name, d.is_champion
       FROM parents p
@@ -92,7 +90,6 @@ router.get('/:id', (req, res) => {
     dog.sire = parents.find(p => p.parent_type === 'sire') || null;
     dog.dam  = parents.find(p => p.parent_type === 'dam')  || null;
 
-    // Offspring — include is_champion for badge on offspring cards
     dog.offspring = db.prepare(`
       SELECT d.id, d.name, d.sex, d.is_champion
       FROM dogs d
@@ -107,7 +104,7 @@ router.get('/:id', (req, res) => {
   }
 });
 
-// ── POST create dog ────────────────────────────────────────────────
+// ── POST create dog ──────────────────────────────────────────────────
 router.post('/', (req, res) => {
   try {
     const { name, registration_number, breed, sex, birth_date, color,
@@ -138,7 +135,7 @@ router.post('/', (req, res) => {
     );
 
     const dogId = result.lastInsertRowid;
-    console.log(`✓ Dog inserted with ID: ${dogId}`);
+    console.log(`✔ Dog inserted with ID: ${dogId}`);
 
     if (sire_id && sire_id !== '' && sire_id !== null) {
       db.prepare('INSERT INTO parents (dog_id, parent_id, parent_type) VALUES (?, ?, ?)').run(dogId, sire_id, 'sire');
@@ -150,7 +147,7 @@ router.post('/', (req, res) => {
     const dog = db.prepare(`SELECT ${DOG_COLS} FROM dogs WHERE id = ?`).get(dogId);
     dog.photo_urls = [];
 
-    console.log(`✓ Dog created: ${dog.name} (ID: ${dogId})`);
+    console.log(`✔ Dog created: ${dog.name} (ID: ${dogId})`);
     res.status(201).json(dog);
   } catch (error) {
     console.error('Error creating dog:', error);
@@ -158,7 +155,7 @@ router.post('/', (req, res) => {
   }
 });
 
-// ── PUT update dog ────────────────────────────────────────────────
+// ── PUT update dog ───────────────────────────────────────────────────
 router.put('/:id', (req, res) => {
   try {
     const { name, registration_number, breed, sex, birth_date, color,
@@ -186,7 +183,6 @@ router.put('/:id', (req, res) => {
       req.params.id
     );
 
-    // Re-link parents
     db.prepare('DELETE FROM parents WHERE dog_id = ?').run(req.params.id);
     if (sire_id && sire_id !== '' && sire_id !== null) {
       db.prepare('INSERT INTO parents (dog_id, parent_id, parent_type) VALUES (?, ?, ?)').run(req.params.id, sire_id, 'sire');
@@ -198,7 +194,7 @@ router.put('/:id', (req, res) => {
     const dog = db.prepare(`SELECT ${DOG_COLS} FROM dogs WHERE id = ?`).get(req.params.id);
     dog.photo_urls = dog.photo_urls ? JSON.parse(dog.photo_urls) : [];
 
-    console.log(`✓ Dog updated: ${dog.name} (ID: ${req.params.id})`);
+    console.log(`✔ Dog updated: ${dog.name} (ID: ${req.params.id})`);
     res.json(dog);
   } catch (error) {
     console.error('Error updating dog:', error);
@@ -206,20 +202,34 @@ router.put('/:id', (req, res) => {
   }
 });
 
-// ── DELETE dog (soft) ───────────────────────────────────────────────
+// ── DELETE dog (hard delete with cascade) ────────────────────────────
+// Removes: parent relationships (both directions), health records,
+// heat cycles, and the dog record itself.
+// Photo files on disk are NOT removed here — run a gc job if needed.
 router.delete('/:id', (req, res) => {
   try {
     const db = getDatabase();
-    db.prepare('UPDATE dogs SET is_active = 0 WHERE id = ?').run(req.params.id);
-    console.log(`✓ Dog soft-deleted: ID ${req.params.id}`);
-    res.json({ message: 'Dog deleted successfully' });
+    const existing = db.prepare('SELECT id, name FROM dogs WHERE id = ?').get(req.params.id);
+    if (!existing) return res.status(404).json({ error: 'Dog not found' });
+
+    const id = req.params.id;
+
+    // Cascade cleanup
+    db.prepare('DELETE FROM parents       WHERE parent_id = ?').run(id); // remove as parent
+    db.prepare('DELETE FROM parents       WHERE dog_id    = ?').run(id); // remove own parents
+    db.prepare('DELETE FROM health_records WHERE dog_id   = ?').run(id);
+    db.prepare('DELETE FROM heat_cycles   WHERE dog_id    = ?').run(id);
+    db.prepare('DELETE FROM dogs          WHERE id        = ?').run(id);
+
+    console.log(`✔ Dog #${id} (${existing.name}) permanently deleted`);
+    res.json({ success: true, message: `${existing.name} has been deleted` });
   } catch (error) {
     console.error('Error deleting dog:', error);
     res.status(500).json({ error: error.message });
   }
 });
 
-// ── POST upload photo ───────────────────────────────────────────────
+// ── POST upload photo ────────────────────────────────────────────────
 router.post('/:id/photos', upload.single('photo'), (req, res) => {
   try {
     if (!req.file) return res.status(400).json({ error: 'No file uploaded' });