feat(pets): add birthdate-based age system with birthday support

- introduce central pet age utilities (calculate, format, birthday check) - replace static pet.age with dynamic birthDate logic - display growing age correctly in pet detail view - prepare foundation for birthday highlights and notifications - fix duplicate imports and ensure stable build
feat(ui): finalize form controls, button states and select styling
2025-12-25 11:15:47 +01:00 · 2025-12-24 23:08:21 +01:00
4 changed files with 262 additions and 132 deletions
@@ -124,6 +124,11 @@ body {
    transform: translateY(0);
  }
 }
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

 .postcard {
  background: var(--color-surface);
@@ -175,11 +180,11 @@ body {
  padding: var(--space-lg) var(--space-md) var(--space-md);
 }

-.feed-header p,
+/*.feed-header p,
 .explore-header p {
  color: var(--color-text-secondary);
  margin: 0.25rem 0 0;
-}
+}*/
 .post-list {
  display: flex;
  flex-direction: column;
@@ -479,7 +484,7 @@ body {
  align-items: center;
  gap: 0.4rem;
  padding: 0.8rem 1.2rem;
-  border-radius: var(--radius-lg);
+  border-radius: 12px;
  background: var(--color-primary);
  color: white;
  font-weight: 600;
@@ -499,7 +504,7 @@ body {
  justify-content: center;
  align-items: center;
  padding: 0.8rem 1.2rem;
-  border-radius: var(--radius-lg);
+  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text-main);
  border: 1px solid var(--color-border);
@@ -507,13 +512,32 @@ body {
  cursor: pointer;
 }
 .button-danger {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.4rem;
+
+  padding: 0.8rem 1.2rem;
+  border-radius: 12px; /* 🔴 gleiche Rundung wie grün */
+
  background: #c62828;
  color: white;
+  font-weight: 600;
+
  border: none;
+  cursor: pointer;
+  text-decoration: none;
+
+  box-shadow: var(--shadow-sm);
+  transition: box-shadow 0.2s ease, transform 0.15s ease;
 }

 .button-danger:hover {
  background: #b71c1c;
+  box-shadow: var(--shadow-md);
+}
+.button-danger:active {
+  transform: scale(0.98);
 }
 .badge {
  display: inline-block;
@@ -638,3 +662,62 @@ h1, h2, h3 {
  background: var(--color-border);
  margin: var(--space-lg) 0;
 }
+button:disabled,
+.button-primary:disabled,
+.button-secondary:disabled,
+.button-danger:disabled {
+  opacity: 0.55;
+  cursor: not-allowed;
+  box-shadow: none;
+  transform: none;
+}
+.button-primary.is-loading,
+.button-secondary.is-loading,
+.button-danger.is-loading {
+  position: relative;
+  pointer-events: none;
+  color: transparent; /* Text ausblenden */
+}
+.button-primary.is-loading::after,
+.button-secondary.is-loading::after,
+.button-danger.is-loading::after {
+  content: '';
+  width: 16px;
+  height: 16px;
+  border: 2px solid rgba(255, 255, 255, 0.4);
+  border-top-color: white;
+  border-radius: 50%;
+  position: absolute;
+  animation: spin 0.8s linear infinite;
+}
+select {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+
+  width: 100%;
+  padding: 0.7rem 2.4rem 0.7rem 0.9rem;
+  border-radius: var(--radius-lg);
+  border: 1px solid var(--color-border);
+  background-color: var(--color-surface);
+  color: var(--color-text-main);
+  font-size: 0.9rem;
+  line-height: 1.3;
+
+  box-shadow: var(--shadow-sm);
+  cursor: pointer;
+
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Cpath fill='%235f6f66' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 0.9rem center;
+}
+select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px rgba(46, 125, 50, 0.15);
+}
+select:disabled {
+  background-color: var(--color-primary-soft);
+  color: var(--color-text-muted);
+  cursor: not-allowed;
+}
@@ -0,0 +1,34 @@
+export function calculatePetAge(birthDate: string) {
+  const today = new Date();
+  const birth = new Date(birthDate);
+
+  let age = today.getFullYear() - birth.getFullYear();
+  const hasHadBirthdayThisYear =
+    today.getMonth() > birth.getMonth() ||
+    (today.getMonth() === birth.getMonth() &&
+      today.getDate() >= birth.getDate());
+
+  if (!hasHadBirthdayThisYear) {
+    age -= 1;
+  }
+
+  return age < 0 ? 0 : age;
+}
+
+export function isBirthdayToday(birthDate: string) {
+  const today = new Date();
+  const birth = new Date(birthDate);
+
+  return (
+    today.getDate() === birth.getDate() &&
+    today.getMonth() === birth.getMonth()
+  );
+}
+
+export function formatPetAge(birthDate: string) {
+  const age = calculatePetAge(birthDate);
+
+  if (age === 0) return 'unter 1 Jahr';
+  if (age === 1) return '1 Jahr';
+  return `${age} Jahre`;
+}
@@ -2,6 +2,9 @@

 import { useParams } from 'next/navigation';
 import PostCard from '@/app/components/PostCard/PostCard';
+import {calculatePetAge, formatPetAge, isBirthdayToday,} from '@/app/lib/petAge';
+
+

 type Pet = {
  id: number;
@@ -94,9 +97,10 @@ export default function PetDetailPage() {
          <h1>{pet.name}</h1>

          <span className="pet-detail-meta">
-            {pet.type} · {pet.breed}
-            {pet.age && ` · ${pet.age}`}
-          </span>
+  {pet.type} · {pet.breed}
+  {pet.birthDate && ` · ${formatPetAge(pet.birthDate)}`}
+</span>
+

          <span className="pet-detail-owner">
            Betreut von {pet.owner}
@@ -2,37 +2,43 @@

 import { useState } from 'react';
 import Link from 'next/link';
+import { useRouter } from 'next/navigation';
 import { dogBreeds, catBreeds } from '@/app/data/breeds';

 type PetType = 'Hund' | 'Katze' | '';

 export default function NewPetPage() {
+  const router = useRouter();
+
+  // Pflichtfelder
  const [name, setName] = useState('');
  const [type, setType] = useState<PetType>('');
  const [breed, setBreed] = useState('');
-  const [breedSearch, setBreedSearch] = useState('');
+
+  // Erweiterte Felder
+  const [birthDate, setBirthDate] = useState('');
+  const [ageFallback, setAgeFallback] = useState('');
+  const [gender, setGender] = useState<'Männlich' | 'Weiblich' | 'Unbekannt'>(
+    'Unbekannt'
+  );
  const [bio, setBio] = useState('');
+  const [visibility, setVisibility] = useState<'public' | 'followers'>(
+    'public'
+  );
+
+  // UX States
  const [error, setError] = useState('');
  const [success, setSuccess] = useState('');

-  const breeds =
-    type === 'Hund'
-      ? dogBreeds
-      : type === 'Katze'
-      ? catBreeds
-      : [];
+  const breeds = type === 'Hund' ? dogBreeds : catBreeds;

-  const filteredBreeds = breeds.filter((b) =>
-    b.toLowerCase().includes(breedSearch.toLowerCase())
-  );
-
-  function handleSubmit(event: React.FormEvent) {
-    event.preventDefault();
+  function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
    setError('');
    setSuccess('');

    if (!name.trim()) {
-      setError('Bitte gib einen Namen für dein Haustier ein.');
+      setError('Bitte gib einen Namen für dein Tier an.');
      return;
    }

@@ -42,120 +48,80 @@ export default function NewPetPage() {
    }

    if (!breed) {
-      setError('Bitte wähle eine Rasse aus.');
+      setError('Bitte wähle eine Rasse oder „Mix“ aus.');
      return;
    }

-    const newPetPayload = {
+    const petPayload = {
      name,
      type,
      breed,
-      bio: bio || null,
-      createdAt: new Date().toISOString(),
+      birthDate: birthDate || null,
+      ageFallback: birthDate ? null : ageFallback || null,
+      gender,
+      bio,
+      visibility,
    };

-    console.log('Neues Haustier (Mock):', newPetPayload);
+    console.log('NEW PET:', petPayload);

-    setSuccess('Haustier wurde technisch angelegt ✅');
-    setName('');
-    setType('');
-    setBreed('');
-    setBreedSearch('');
-    setBio('');
+    setSuccess('Haustier wurde erfolgreich angelegt.');
+    setTimeout(() => {
+      router.push('/pets');
+    }, 800);
+  }
+
+  function handleCancel() {
+    router.back();
  }

  return (
-    <section
-      style={{
-        maxWidth: '600px',
-        margin: '0 auto',
-        display: 'grid',
-        gap: '1.5rem',
-      }}
-    >
-      <header>
-        <h1 style={{ marginBottom: '0.5rem' }}>Haustier hinzufügen</h1>
-        <p style={{ margin: 0, color: '#555' }}>
-          Lege ein neues Haustier für dein Profil an.
-        </p>
+    <section className="pets-page">
+      <header className="pets-header">
+        <h1>Haustier hinzufügen</h1>
+        <p>Lege ein neues Tier für dein Profil an.</p>
      </header>

-      <form
-        onSubmit={handleSubmit}
-        style={{
-          border: '1px solid #e5e5e5',
-          borderRadius: '16px',
-          padding: '1rem',
-          display: 'grid',
-          gap: '1rem',
-          backgroundColor: 'white',
-        }}
-      >
+      <form className="pet-form" onSubmit={handleSubmit}>
        {/* Name */}
-        <div style={{ display: 'grid', gap: '0.4rem' }}>
-          <strong>Name</strong>
+        <div className="form-group">
+          <label>
+            Name <span className="required">*</span>
+          </label>
          <input
            value={name}
            onChange={(e) => setName(e.target.value)}
            placeholder="z. B. Luna"
-            style={{
-              padding: '0.7rem',
-              borderRadius: '10px',
-              border: '1px solid #ccc',
-            }}
          />
        </div>

-        {/* Art */}
-        <div style={{ display: 'grid', gap: '0.4rem' }}>
-          <strong>Tier-Art</strong>
+        {/* Tier-Art */}
+        <div className="form-group">
+          <label>
+            Tier-Art <span className="required">*</span>
+          </label>
          <select
            value={type}
            onChange={(e) => {
              setType(e.target.value as PetType);
              setBreed('');
-              setBreedSearch('');
-            }}
-            style={{
-              padding: '0.6rem',
-              borderRadius: '10px',
-              border: '1px solid #ccc',
-              maxWidth: '220px',
            }}
          >
            <option value="">Bitte auswählen</option>
-            <option value="Katze">Katze</option>
            <option value="Hund">Hund</option>
+            <option value="Katze">Katze</option>
          </select>
        </div>

        {/* Rasse */}
        {type && (
-          <div style={{ display: 'grid', gap: '0.5rem' }}>
-            <strong>Rasse</strong>
-
-            <input
-              placeholder="Rasse suchen …"
-              value={breedSearch}
-              onChange={(e) => setBreedSearch(e.target.value)}
-              style={{
-                padding: '0.6rem',
-                borderRadius: '10px',
-                border: '1px solid #ccc',
-              }}
-            />
-
-            <select
-              value={breed}
-              onChange={(e) => setBreed(e.target.value)}
-              size={Math.min(filteredBreeds.length, 6)}
-              style={{
-                padding: '0.6rem',
-                borderRadius: '10px',
-                border: '1px solid #ccc',
-              }}
-            >
-              {filteredBreeds.map((b) => (
+          <div className="form-group">
+            <label>
+              Rasse <span className="required">*</span>
+            </label>
+            <select value={breed} onChange={(e) => setBreed(e.target.value)}>
+              <option value="">Bitte auswählen</option>
+              {breeds.map((b) => (
                <option key={b} value={b}>
                  {b}
                </option>
@@ -164,51 +130,94 @@ export default function NewPetPage() {
          </div>
        )}

+        {/* Geburtsdatum */}
+        <div className="form-group">
+          <label>Geburtsdatum (optional)</label>
+          <input
+            type="date"
+            value={birthDate}
+            onChange={(e) => {
+              setBirthDate(e.target.value);
+              if (e.target.value) setAgeFallback('');
+            }}
+          />
+          <small>
+            Wenn bekannt – das Alter wird automatisch berechnet.
+          </small>
+        </div>
+
+        {/* Fallback Alter */}
+        {!birthDate && (
+          <div className="form-group">
+            <label>Alter (geschätzt)</label>
+            <input
+              type="number"
+              min={0}
+              max={30}
+              value={ageFallback}
+              onChange={(e) => setAgeFallback(e.target.value)}
+              placeholder="z. B. 3"
+            />
+            <small>Optional – eine grobe Angabe reicht.</small>
+          </div>
+        )}
+
+        {/* Geschlecht */}
+        <div className="form-group">
+          <label>Geschlecht</label>
+          <select
+            value={gender}
+            onChange={(e) =>
+              setGender(e.target.value as 'Männlich' | 'Weiblich' | 'Unbekannt')
+            }
+          >
+            <option value="Unbekannt">Unbekannt</option>
+            <option value="Männlich">Männlich</option>
+            <option value="Weiblich">Weiblich</option>
+          </select>
+        </div>
+
        {/* Bio */}
-        <div style={{ display: 'grid', gap: '0.4rem' }}>
-          <strong>Kurzbeschreibung (optional)</strong>
+        <div className="form-group">
+          <label>Kurzbeschreibung</label>
          <textarea
+            rows={3}
            value={bio}
            onChange={(e) => setBio(e.target.value)}
-            placeholder="Alter, Charakter, Besonderheiten …"
-            rows={3}
-            style={{
-              padding: '0.8rem',
-              borderRadius: '12px',
-              border: '1px solid #ccc',
-            }}
+            placeholder="Charakter, Besonderheiten, Alter …"
          />
        </div>

+        {/* Sichtbarkeit */}
+        <div className="form-group">
+          <label>Sichtbarkeit</label>
+          <select
+            value={visibility}
+            onChange={(e) =>
+              setVisibility(e.target.value as 'public' | 'followers')
+            }
+          >
+            <option value="public">Öffentlich</option>
+            <option value="followers">Nur für Abonnenten</option>
+          </select>
+        </div>
+
        {/* Meldungen */}
-        {error && (
-          <div style={{ background: '#f8d7da', padding: '0.7rem' }}>
-            {error}
-          </div>
-        )}
-        {success && (
-          <div style={{ background: '#d1e7dd', padding: '0.7rem' }}>
-            {success}
-          </div>
-        )}
+        {error && <div className="form-error">{error}</div>}
+        {success && <div className="form-success">{success}</div>}

        {/* Aktionen */}
-        <div style={{ display: 'flex', gap: '0.8rem' }}>
-          <button
-            type="submit"
-            style={{
-              padding: '0.8rem 1.2rem',
-              borderRadius: '12px',
-              border: 'none',
-              backgroundColor: '#2E7D32',
-              color: 'white',
-              fontWeight: 700,
-            }}
-          >
+        <div className="form-actions">
+          <button type="submit" className="button-primary">
            Haustier speichern
          </button>
-
-          <Link href="/pets">Abbrechen</Link>
+          <button
+            type="button"
+            className="button-danger"
+            onClick={handleCancel}
+          >
+            Abbrechen
+          </button>
        </div>
      </form>
    </section>