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

Reviewed-on: #35
2026-03-09 22:59:44 -05:00
parent 4c1206e26c aa63e4f388
commit cf2a5ba8d3
3 changed files with 179 additions and 62 deletions
--- a/client/src/App.jsx
+++ b/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" />
--- 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,8 +170,12 @@ function DogList() {
              }}
            >
              {/* Avatar */}
+              <Link
+                to={`/dogs/${dog.id}`}
+                style={{ flexShrink: 0, textDecoration: 'none' }}
+              >
                <div style={{
-                width: '80px', height: '80px', flexShrink: 0,
+                  width: '80px', height: '80px',
                  borderRadius: 'var(--radius)',
                  background: 'var(--bg-primary)',
                  border: dog.is_champion
@@ -184,9 +201,13 @@ function DogList() {
                    <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>
-
-              <div style={{ opacity: 0.5, transition: 'var(--transition)' }}>
-                <ArrowRight size={20} color="var(--text-muted)" />
-              </div>
              </Link>
+
+              {/* 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>
+            </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>
  )
 }
--- a/server/routes/dogs.js
+++ b/server/routes/dogs.js
@@ -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' });