From a56c403af4fc0937b6ff21f8b39217a39e36aae6 Mon Sep 17 00:00:00 2001
From: jason <stedwell@gmail.com>
Date: Sun, 8 Mar 2026 23:29:54 -0500
Subject: [PATCH] Redesign: Compact info cards with avatar-style photos

---
 client/src/pages/Dashboard.jsx | 208 +++++++++++++++++++++++++++------
 1 file changed, 173 insertions(+), 35 deletions(-)

diff --git a/client/src/pages/Dashboard.jsx b/client/src/pages/Dashboard.jsx
index b2476fa..6f1da89 100644
--- a/client/src/pages/Dashboard.jsx
+++ b/client/src/pages/Dashboard.jsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
-import { Dog, Activity, Heart, AlertCircle } from 'lucide-react'
+import { Dog, Activity, Heart, Calendar, Hash, ArrowRight } from 'lucide-react'
 import axios from 'axios'
 
 function Dashboard() {
@@ -35,7 +35,7 @@ function Dashboard() {
         activeHeatCycles: heatCyclesRes.data.length
       })
 
-      setRecentDogs(dogs.slice(0, 6))
+      setRecentDogs(dogs.slice(0, 8))
       setLoading(false)
     } catch (error) {
       console.error('Error fetching dashboard data:', error)
@@ -43,65 +43,203 @@ function Dashboard() {
     }
   }
 
+  const calculateAge = (birthDate) => {
+    if (!birthDate) return null
+    const today = new Date()
+    const birth = new Date(birthDate)
+    let years = today.getFullYear() - birth.getFullYear()
+    let months = today.getMonth() - birth.getMonth()
+    
+    if (months < 0) {
+      years--
+      months += 12
+    }
+    
+    if (years === 0) return `${months}mo`
+    if (months === 0) return `${years}y`
+    return `${years}y ${months}mo`
+  }
+
   if (loading) {
     return <div className="container loading">Loading dashboard...</div>
   }
 
   return (
-    <div className="container">
+    <div className="container" style={{ paddingTop: '2rem', paddingBottom: '3rem' }}>
       <h1 style={{ marginBottom: '2rem' }}>Dashboard</h1>
 
-      <div className="grid grid-3" style={{ marginBottom: '3rem' }}>
-        <div className="card" style={{ textAlign: 'center' }}>
-          <Dog size={48} style={{ color: 'var(--primary)', margin: '0 auto 1rem' }} />
-          <h3 style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>{stats.totalDogs}</h3>
-          <p style={{ color: 'var(--text-secondary)' }}>Total Dogs</p>
-          <p style={{ fontSize: '0.875rem', marginTop: '0.5rem' }}>
-            {stats.males} Males • {stats.females} Females
-          </p>
+      {/* Stats Grid */}
+      <div className="grid grid-4" style={{ marginBottom: '3rem' }}>
+        <div className="card stat-card">
+          <div className="stat-icon" style={{ background: 'linear-gradient(135deg, var(--primary), var(--accent))' }}>
+            <Dog size={24} color="white" />
+          </div>
+          <div className="stat-value">{stats.totalDogs}</div>
+          <div className="stat-label">Total Dogs</div>
+          <div style={{ marginTop: '0.75rem', fontSize: '0.875rem', color: 'var(--text-secondary)' }}>
+            {stats.males} ♂ · {stats.females} ♀
+          </div>
         </div>
 
-        <div className="card" style={{ textAlign: 'center' }}>
-          <Activity size={48} style={{ color: 'var(--success)', margin: '0 auto 1rem' }} />
-          <h3 style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>{stats.totalLitters}</h3>
-          <p style={{ color: 'var(--text-secondary)' }}>Total Litters</p>
+        <div className="card stat-card">
+          <div className="stat-icon" style={{ background: 'linear-gradient(135deg, var(--success), #059669)' }}>
+            <Activity size={24} color="white" />
+          </div>
+          <div className="stat-value">{stats.totalLitters}</div>
+          <div className="stat-label">Total Litters</div>
         </div>
 
-        <div className="card" style={{ textAlign: 'center' }}>
-          <Heart size={48} style={{ color: 'var(--danger)', margin: '0 auto 1rem' }} />
-          <h3 style={{ fontSize: '2rem', marginBottom: '0.5rem' }}>{stats.activeHeatCycles}</h3>
-          <p style={{ color: 'var(--text-secondary)' }}>Active Heat Cycles</p>
+        <div className="card stat-card">
+          <div className="stat-icon" style={{ background: 'linear-gradient(135deg, var(--danger), #dc2626)' }}>
+            <Heart size={24} color="white" />
+          </div>
+          <div className="stat-value">{stats.activeHeatCycles}</div>
+          <div className="stat-label">Active Heat Cycles</div>
         </div>
+
+        <Link to="/dogs" className="card stat-card" style={{ textDecoration: 'none', cursor: 'pointer', transition: 'var(--transition)' }}>
+          <div className="stat-icon" style={{ background: 'var(--bg-tertiary)' }}>
+            <ArrowRight size={24} color="var(--primary)" />
+          </div>
+          <div style={{ color: 'var(--text-primary)', fontWeight: 600, fontSize: '1.125rem', marginTop: '0.5rem' }}>View All Dogs</div>
+          <div className="stat-label">Manage Collection</div>
+        </Link>
       </div>
 
+      {/* Recent Dogs Section */}
       <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '1.5rem' }}>
         <h2>Recent Dogs</h2>
-        <Link to="/dogs" className="btn btn-primary">View All</Link>
+        <Link to="/dogs" className="btn btn-primary">
+          View All
+          <ArrowRight size={16} />
+        </Link>
       </div>
 
       {recentDogs.length === 0 ? (
-        <div className="card" style={{ textAlign: 'center', padding: '3rem' }}>
-          <AlertCircle size={48} style={{ color: 'var(--text-secondary)', margin: '0 auto 1rem' }} />
-          <h3>No dogs registered yet</h3>
-          <p style={{ color: 'var(--text-secondary)', marginBottom: '1.5rem' }}>Start by adding your first dog to the system</p>
-          <Link to="/dogs" className="btn btn-primary">Add Dog</Link>
+        <div className="card" style={{ textAlign: 'center', padding: '4rem 2rem' }}>
+          <Dog size={64} style={{ color: 'var(--text-muted)', margin: '0 auto 1rem', opacity: 0.5 }} />
+          <h3 style={{ marginBottom: '0.5rem' }}>No dogs registered yet</h3>
+          <p style={{ color: 'var(--text-secondary)', marginBottom: '2rem' }}>Start building your kennel management system</p>
+          <Link to="/dogs" className="btn btn-primary">Add Your First Dog</Link>
         </div>
       ) : (
-        <div className="grid grid-3">
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))', gap: '1rem' }}>
           {recentDogs.map(dog => (
-            <Link key={dog.id} to={`/dogs/${dog.id}`} className="card" style={{ textDecoration: 'none', color: 'inherit' }}>
-              <div style={{ aspectRatio: '1', background: 'var(--bg-secondary)', borderRadius: '0.375rem', marginBottom: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+            <Link 
+              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)'
+                e.currentTarget.style.transform = 'translateY(-2px)'
+              }}
+              onMouseLeave={(e) => {
+                e.currentTarget.style.borderColor = 'var(--border)'
+                e.currentTarget.style.transform = 'translateY(0)'
+              }}
+            >
+              {/* Avatar Photo */}
+              <div style={{ 
+                width: '80px',
+                height: '80px',
+                flexShrink: 0,
+                borderRadius: 'var(--radius)',
+                background: 'var(--bg-primary)',
+                border: '2px solid var(--border)',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                overflow: 'hidden'
+              }}>
                 {dog.photo_urls && dog.photo_urls.length > 0 ? (
-                  <img src={dog.photo_urls[0]} alt={dog.name} style={{ width: '100%', height: '100%', objectFit: 'cover', borderRadius: '0.375rem' }} />
+                  <img 
+                    src={dog.photo_urls[0]} 
+                    alt={dog.name} 
+                    style={{ 
+                      width: '100%', 
+                      height: '100%', 
+                      objectFit: 'cover'
+                    }} 
+                  />
                 ) : (
-                  <Dog size={48} style={{ color: 'var(--text-secondary)' }} />
+                  <Dog size={32} style={{ color: 'var(--text-muted)', opacity: 0.5 }} />
                 )}
               </div>
-              <h3>{dog.name}</h3>
-              <p style={{ color: 'var(--text-secondary)', fontSize: '0.875rem' }}>{dog.breed} • {dog.sex}</p>
-              {dog.registration_number && (
-                <p style={{ color: 'var(--text-secondary)', fontSize: '0.75rem', marginTop: '0.25rem' }}>{dog.registration_number}</p>
-              )}
+
+              {/* Info Section */}
+              <div style={{ flex: 1, minWidth: 0 }}>
+                <h3 style={{ 
+                  fontSize: '1.125rem', 
+                  marginBottom: '0.375rem',
+                  overflow: 'hidden',
+                  textOverflow: 'ellipsis',
+                  whiteSpace: 'nowrap'
+                }}>
+                  {dog.name}
+                  <span style={{ 
+                    marginLeft: '0.5rem', 
+                    fontSize: '1rem',
+                    color: dog.sex === 'male' ? 'var(--primary)' : '#ec4899'
+                  }}>
+                    {dog.sex === 'male' ? '♂' : '♀'}
+                  </span>
+                </h3>
+                
+                <div style={{ 
+                  display: 'flex',
+                  flexWrap: 'wrap',
+                  gap: '0.75rem',
+                  fontSize: '0.8125rem',
+                  color: 'var(--text-secondary)',
+                  marginBottom: '0.5rem'
+                }}>
+                  <span>{dog.breed}</span>
+                  {dog.birth_date && (
+                    <>
+                      <span>•</span>
+                      <span style={{ display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
+                        <Calendar size={12} />
+                        {calculateAge(dog.birth_date)}
+                      </span>
+                    </>
+                  )}
+                </div>
+
+                {dog.registration_number && (
+                  <div style={{ 
+                    display: 'inline-flex',
+                    alignItems: 'center',
+                    gap: '0.25rem',
+                    padding: '0.25rem 0.5rem',
+                    background: 'var(--bg-primary)',
+                    border: '1px solid var(--border)',
+                    borderRadius: 'var(--radius-sm)',
+                    fontSize: '0.75rem',
+                    fontFamily: 'monospace',
+                    color: 'var(--text-muted)'
+                  }}>
+                    <Hash size={10} />
+                    {dog.registration_number}
+                  </div>
+                )}
+              </div>
+
+              {/* Arrow Indicator */}
+              <div style={{ 
+                opacity: 0.5,
+                transition: 'var(--transition)'
+              }}>
+                <ArrowRight size={20} color="var(--text-muted)" />
+              </div>
             </Link>
           ))}
         </div>