Untitled
unknown
plain_text
9 months ago
127 kB
10
Indexable
import React, { useState, useEffect } from 'react';
import { Home, Plus, TrendingUp, User, Moon, Milk, Droplet, Award, Bell, Mic, ChevronDown, Sparkles, Wifi, CheckCircle, AlertCircle, ArrowLeft, ChevronRight, Activity, Download, Share2, Play, Pause, Edit, LogOut, Shield, HelpCircle, MessageCircle, Star, Maximize2, Users, Heart, Thermometer, Pill, FileText, X, Camera, Image, Calendar, BarChart3, PieChart, LineChart, Zap, Trophy, Target, Flame, Gift, UserPlus, Send, Eye, Clock, MoreVertical } from 'lucide-react';
function ModernBabyTracker() {
const [currentScreen, setCurrentScreen] = useState('home');
const [selectedChild, setSelectedChild] = useState('emma');
const [showVoiceModal, setShowVoiceModal] = useState(false);
const [showChildSelector, setShowChildSelector] = useState(false);
const [showQuickActions, setShowQuickActions] = useState(false);
const [feedingTimerActive, setFeedingTimerActive] = useState(false);
const [feedingTimerSeconds, setFeedingTimerSeconds] = useState(0);
const [currentBreast, setCurrentBreast] = useState('left');
const [leftDuration, setLeftDuration] = useState(0);
const [rightDuration, setRightDuration] = useState(0);
const [feedingType, setFeedingType] = useState('nursing');
const [bottleAmount, setBottleAmount] = useState('');
const [solidFood, setSolidFood] = useState('');
const [selectedFoods, setSelectedFoods] = useState([]);
const [diaperType, setDiaperType] = useState('wet');
const [hasRash, setHasRash] = useState(false);
const [sleepTimerActive, setSleepTimerActive] = useState(false);
const [sleepTimerSeconds, setSleepTimerSeconds] = useState(0);
const [sleepType, setSleepType] = useState('nap');
// Smart predictions state
const [nextFeedingIn, setNextFeedingIn] = useState(90); // minutes
const [nextDiaperIn, setNextDiaperIn] = useState(45); // minutes
const [nextNapIn, setNextNapIn] = useState(120); // minutes
// Health tracking state
const [symptoms, setSymptoms] = useState([]);
const [temperature, setTemperature] = useState('');
const [medications, setMedications] = useState([]);
const [notes, setNotes] = useState('');
// Photo timeline state
const [photos, setPhotos] = useState([
{ id: 1, url: '📸', caption: 'First smile!', timestamp: '7:00 AM', category: 'milestone' },
{ id: 2, url: '📸', caption: 'Breakfast time', timestamp: '8:30 AM', category: 'feeding' },
{ id: 3, url: '📸', caption: 'Tummy time', timestamp: '10:00 AM', category: 'activity' },
]);
const [showPhotoModal, setShowPhotoModal] = useState(false);
const [selectedPhoto, setSelectedPhoto] = useState(null);
// Achievements & Milestones state
const [trackingStreak, setTrackingStreak] = useState(12);
const [totalEntries, setTotalEntries] = useState(247);
const [achievements, setAchievements] = useState([
{ id: 1, name: 'First Week', icon: '🎯', description: 'Track for 7 days', unlocked: true, date: 'Oct 1' },
{ id: 2, name: 'Consistency King', icon: '👑', description: '10 day streak', unlocked: true, date: 'Oct 8' },
{ id: 3, name: 'Century Club', icon: '💯', description: '100 entries logged', unlocked: true, date: 'Oct 5' },
{ id: 4, name: 'Photo Pro', icon: '📸', description: '50 photos uploaded', unlocked: false, progress: 47 },
{ id: 5, name: 'Sleep Champion', icon: '🌙', description: '30 sleep sessions', unlocked: false, progress: 23 },
{ id: 6, name: 'Feed Master', icon: '🍼', description: '200 feedings tracked', unlocked: false, progress: 156 },
]);
const [milestones, setMilestones] = useState([
{ id: 1, name: 'First Smile', category: 'social', completed: true, date: 'Sep 28', age: '3 months', icon: '😊' },
{ id: 2, name: 'Holds Head Up', category: 'physical', completed: true, date: 'Sep 15', age: '2.5 months', icon: '💪' },
{ id: 3, name: 'Tracks Objects', category: 'cognitive', completed: true, date: 'Oct 2', age: '3 months', icon: '👀' },
{ id: 4, name: 'Responds to Name', category: 'social', completed: false, expected: '5 months', icon: '👂' },
{ id: 5, name: 'Sits Without Support', category: 'physical', completed: false, expected: '6 months', icon: '🪑' },
{ id: 6, name: 'First Tooth', category: 'physical', completed: false, expected: '6-8 months', icon: '🦷' },
]);
const [showAchievementNotif, setShowAchievementNotif] = useState(false);
const [newAchievement, setNewAchievement] = useState(null);
// Multi-caregiver state
const [caregivers, setCaregivers] = useState([
{ id: 1, name: 'Sarah Johnson', role: 'Mom', avatar: '👩', color: 'purple', status: 'active', permissions: 'admin', lastActive: 'now' },
{ id: 2, name: 'Mike Johnson', role: 'Dad', avatar: '👨', color: 'blue', status: 'away', permissions: 'admin', lastActive: '2h ago' },
{ id: 3, name: 'Linda Smith', role: 'Grandma', avatar: '👵', color: 'pink', status: 'offline', permissions: 'full', lastActive: 'yesterday' },
{ id: 4, name: 'Maria Garcia', role: 'Nanny', avatar: '👩🦱', color: 'emerald', status: 'active', permissions: 'full', lastActive: '15m ago' },
]);
const [currentCaregiver, setCurrentCaregiver] = useState(caregivers[0]);
const [activityFeed, setActivityFeed] = useState([
{ id: 1, caregiver: 'Sarah Johnson', avatar: '👩', action: 'logged feeding', detail: 'Bottle - 4 oz', time: '10 min ago', color: 'emerald' },
{ id: 2, caregiver: 'Maria Garcia', avatar: '👩🦱', action: 'changed diaper', detail: 'Wet diaper', time: '45 min ago', color: 'amber' },
{ id: 3, caregiver: 'Mike Johnson', avatar: '👨', action: 'started sleep', detail: 'Nap time', time: '2 hours ago', color: 'purple' },
{ id: 4, caregiver: 'Sarah Johnson', avatar: '👩', action: 'added note', detail: 'Seems a bit fussy today', time: '3 hours ago', color: 'blue' },
]);
const [handoffNotes, setHandoffNotes] = useState([
{ id: 1, from: 'Sarah', to: 'Maria', message: 'Emma had a good breakfast. Next feeding around 11 AM.', time: '7:30 AM', read: true },
{ id: 2, from: 'Mike', to: 'Sarah', message: 'She woke up once at 3 AM, fed and back to sleep quickly.', time: '6:00 AM', read: true },
]);
const [showCaregiverModal, setShowCaregiverModal] = useState(false);
const [showHandoffModal, setShowHandoffModal] = useState(false);
const [newHandoffNote, setNewHandoffNote] = useState('');
// Privacy & Export state
const [dataSharing, setDataSharing] = useState({
analytics: false,
marketing: false,
research: false,
thirdParty: false
});
const [exportFormat, setExportFormat] = useState('pdf');
const [showExportModal, setShowExportModal] = useState(false);
useEffect(() => {
let interval;
if (feedingTimerActive) {
interval = setInterval(() => {
setFeedingTimerSeconds(prev => prev + 1);
if (currentBreast === 'left') {
setLeftDuration(prev => prev + 1);
} else {
setRightDuration(prev => prev + 1);
}
}, 1000);
}
return () => clearInterval(interval);
}, [feedingTimerActive, currentBreast]);
useEffect(() => {
let interval;
if (sleepTimerActive) {
interval = setInterval(() => {
setSleepTimerSeconds(prev => prev + 1);
}, 1000);
}
return () => clearInterval(interval);
}, [sleepTimerActive]);
// Countdown timers for predictions
useEffect(() => {
const interval = setInterval(() => {
setNextFeedingIn(prev => Math.max(0, prev - 1));
setNextDiaperIn(prev => Math.max(0, prev - 1));
setNextNapIn(prev => Math.max(0, prev - 1));
}, 60000); // Update every minute
return () => clearInterval(interval);
}, []);
const formatTime = (seconds) => {
const hrs = Math.floor(seconds / 3600);
const mins = Math.floor((seconds % 3600) / 60);
const secs = seconds % 60;
return `${hrs.toString().padStart(2, '0')}:${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
};
const children = [
{ id: 'emma', name: 'Emma Rose', age: '4 months', avatar: '👶', color: 'from-purple-500 to-pink-500' },
{ id: 'noah', name: 'Noah James', age: '2 years', avatar: '🧒', color: 'from-blue-500 to-cyan-500' }
];
const currentChild = children.find(c => c.id === selectedChild);
const toggleFood = (food) => {
if (selectedFoods.includes(food)) {
setSelectedFoods(selectedFoods.filter(f => f !== food));
} else {
setSelectedFoods([...selectedFoods, food]);
}
};
const addCustomFood = () => {
if (solidFood && !selectedFoods.includes(solidFood)) {
setSelectedFoods([...selectedFoods, solidFood]);
setSolidFood('');
}
};
const removeFood = (index) => {
setSelectedFoods(selectedFoods.filter((_, i) => i !== index));
};
const HomeScreen = () => (
<div className="h-full bg-gradient-to-br from-slate-50 via-white to-purple-50/30 flex flex-col overflow-hidden">
<div className="px-6 pt-3 pb-2 flex justify-between items-center">
<div className="text-xs font-semibold text-gray-900">9:41</div>
<div className="flex items-center gap-1.5">
<Wifi size={14} className="text-gray-700" />
</div>
</div>
<div className="px-6 py-6">
<div className="flex items-center justify-between mb-6">
<div>
<p className="text-sm font-medium text-gray-500 mb-1">Good morning</p>
<button
onClick={() => setShowChildSelector(!showChildSelector)}
className="flex items-center gap-2 group"
>
<span className="text-3xl">{currentChild.avatar}</span>
<div className="text-left">
<h1 className="text-2xl font-bold text-gray-900 flex items-center gap-2 group-hover:text-purple-600 transition-colors">
{currentChild.name}
<ChevronDown size={20} className="text-gray-400" />
</h1>
<p className="text-sm text-gray-500">{currentChild.age}</p>
</div>
</button>
</div>
<div className="flex items-center gap-2">
<button
onClick={() => setCurrentScreen('caregivers')}
className="w-10 h-10 rounded-2xl bg-white/80 backdrop-blur-xl border border-gray-200/50 shadow-sm flex items-center justify-center relative"
>
<Users size={18} className="text-gray-700" />
<div className="absolute -top-1 -right-1 w-3 h-3 bg-green-500 rounded-full border-2 border-white"></div>
</button>
<button className="w-10 h-10 rounded-2xl bg-white/80 backdrop-blur-xl border border-gray-200/50 shadow-sm flex items-center justify-center">
<Bell size={18} className="text-gray-700" />
</button>
</div>
</div>
<div className="grid grid-cols-4 gap-3">
<div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-3xl p-4 shadow-lg shadow-purple-500/25 relative overflow-hidden">
<div className="absolute -right-2 -top-2 w-16 h-16 bg-white/10 rounded-full blur-2xl"></div>
<Moon size={20} className="text-white/90 mb-2" />
<p className="text-2xl font-bold text-white mb-0.5">8.2h</p>
<p className="text-xs text-white/70 font-medium">Sleep</p>
</div>
<div className="bg-gradient-to-br from-emerald-400 to-teal-500 rounded-3xl p-4 shadow-lg shadow-emerald-500/25 relative overflow-hidden">
<div className="absolute -right-2 -top-2 w-16 h-16 bg-white/10 rounded-full blur-2xl"></div>
<Milk size={20} className="text-white/90 mb-2" />
<p className="text-2xl font-bold text-white mb-0.5">5</p>
<p className="text-xs text-white/70 font-medium">Feeds</p>
</div>
<div className="bg-gradient-to-br from-amber-400 to-orange-500 rounded-3xl p-4 shadow-lg shadow-amber-500/25 relative overflow-hidden">
<div className="absolute -right-2 -top-2 w-16 h-16 bg-white/10 rounded-full blur-2xl"></div>
<Droplet size={20} className="text-white/90 mb-2" />
<p className="text-2xl font-bold text-white mb-0.5">4</p>
<p className="text-xs text-white/70 font-medium">Diapers</p>
</div>
<div className="bg-gradient-to-br from-pink-400 to-rose-500 rounded-3xl p-4 shadow-lg shadow-pink-500/25 relative overflow-hidden">
<div className="absolute -right-2 -top-2 w-16 h-16 bg-white/10 rounded-full blur-2xl"></div>
<Award size={20} className="text-white/90 mb-2" />
<p className="text-2xl font-bold text-white mb-0.5">2</p>
<p className="text-xs text-white/70 font-medium">New</p>
</div>
</div>
</div>
<div className="px-6 mb-6">
{/* Quick Handoff Note */}
<button
onClick={() => setShowHandoffModal(true)}
className="w-full bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl p-4 shadow-lg flex items-center gap-3 mb-4"
>
<div className="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
<MessageCircle size={20} className="text-white" />
</div>
<div className="flex-1 text-left">
<p className="text-white font-bold text-sm">Leave Handoff Note</p>
<p className="text-white/80 text-xs">Quick message for the next caregiver</p>
</div>
<ChevronRight size={20} className="text-white/80" />
</button>
<div className="relative overflow-hidden rounded-3xl bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500 p-[1px] shadow-2xl shadow-purple-500/40">
<div className="bg-white/95 backdrop-blur-xl rounded-3xl p-5">
<div className="flex items-start justify-between mb-4">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg shadow-purple-500/30">
<Sparkles size={22} className="text-white" />
</div>
<div>
<p className="text-xs font-semibold text-gray-500 uppercase tracking-wide mb-0.5">SmartNap AI</p>
<p className="text-2xl font-bold bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">11:30 AM</p>
</div>
</div>
<div className="text-right">
<div className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-green-500/10 border border-green-500/20 mb-1">
<div className="w-1.5 h-1.5 bg-green-500 rounded-full animate-pulse"></div>
<span className="text-xs font-semibold text-green-700">High</span>
</div>
<p className="text-xs text-gray-500 font-medium">85% confidence</p>
</div>
</div>
</div>
</div>
</div>
<div className="px-6 mb-6">
<div className="flex items-center justify-between mb-3">
<h2 className="text-lg font-bold text-gray-900">Next Up</h2>
<button
onClick={() => {
setNewAchievement({ name: 'Demo Badge', icon: '🎯', description: 'You unlocked this!' });
setShowAchievementNotif(true);
setTimeout(() => setShowAchievementNotif(false), 4000);
}}
className="text-xs font-semibold text-purple-600"
>
View All
</button>
</div>
<div className="grid grid-cols-3 gap-3">
<div className="bg-white rounded-2xl p-4 border-2 border-emerald-100 shadow-sm">
<div className="flex items-center justify-center w-10 h-10 rounded-xl bg-emerald-100 mx-auto mb-2">
<Milk size={18} className="text-emerald-600" />
</div>
<p className="text-xs text-gray-500 text-center mb-1">Feed in</p>
<p className="text-2xl font-bold text-gray-900 text-center">{nextFeedingIn}m</p>
<div className="mt-2 h-1.5 bg-gray-100 rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-emerald-400 to-teal-500 rounded-full transition-all duration-1000"
style={{width: `${Math.max(0, 100 - (nextFeedingIn / 180 * 100))}%`}}
></div>
</div>
</div>
<div className="bg-white rounded-2xl p-4 border-2 border-amber-100 shadow-sm">
<div className="flex items-center justify-center w-10 h-10 rounded-xl bg-amber-100 mx-auto mb-2">
<Droplet size={18} className="text-amber-600" />
</div>
<p className="text-xs text-gray-500 text-center mb-1">Diaper in</p>
<p className="text-2xl font-bold text-gray-900 text-center">{nextDiaperIn}m</p>
<div className="mt-2 h-1.5 bg-gray-100 rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-amber-400 to-orange-500 rounded-full transition-all duration-1000"
style={{width: `${Math.max(0, 100 - (nextDiaperIn / 120 * 100))}%`}}
></div>
</div>
</div>
<div className="bg-white rounded-2xl p-4 border-2 border-purple-100 shadow-sm">
<div className="flex items-center justify-center w-10 h-10 rounded-xl bg-purple-100 mx-auto mb-2">
<Moon size={18} className="text-purple-600" />
</div>
<p className="text-xs text-gray-500 text-center mb-1">Nap in</p>
<p className="text-2xl font-bold text-gray-900 text-center">{nextNapIn}m</p>
<div className="mt-2 h-1.5 bg-gray-100 rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-purple-500 to-purple-600 rounded-full transition-all duration-1000"
style={{width: `${Math.max(0, 100 - (nextNapIn / 180 * 100))}%`}}
></div>
</div>
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto px-6 pb-32">
<div className="flex items-center justify-between mb-4">
<h2 className="text-lg font-bold text-gray-900">Today's Timeline</h2>
<button
onClick={() => setCurrentScreen('photos')}
className="flex items-center gap-1 text-sm font-semibold text-purple-600"
>
<Camera size={16} />
Photos
</button>
</div>
<div className="space-y-3">
<div className="bg-purple-50/80 backdrop-blur-xl rounded-2xl p-4 border border-white/50 shadow-sm">
<div className="flex items-center gap-3 mb-2">
<Moon size={20} className="text-purple-600" />
<div className="flex-1">
<p className="text-xs font-semibold text-gray-500">6:30 AM</p>
<p className="font-bold text-base text-purple-900">Woke up</p>
</div>
<button
onClick={() => setShowPhotoModal(true)}
className="w-8 h-8 rounded-lg bg-white shadow-sm flex items-center justify-center"
>
<Camera size={16} className="text-gray-600" />
</button>
</div>
<div className="flex items-center gap-2 mt-2 pt-2 border-t border-purple-200">
<div className="w-6 h-6 rounded-full bg-purple-200 flex items-center justify-center text-xs">
👨
</div>
<span className="text-xs text-gray-600 font-medium">Logged by Mike</span>
</div>
</div>
<div className="bg-emerald-50/80 backdrop-blur-xl rounded-2xl p-4 border border-white/50 shadow-sm">
<div className="flex items-center gap-3 mb-2">
<Milk size={20} className="text-emerald-600" />
<div className="flex-1">
<p className="text-xs font-semibold text-gray-500">7:00 AM</p>
<p className="font-bold text-base text-emerald-900">Bottle - 4 oz</p>
</div>
<div className="w-12 h-12 rounded-lg bg-gradient-to-br from-emerald-100 to-teal-100 flex items-center justify-center text-2xl">
📸
</div>
</div>
<div className="mt-3 flex gap-2">
<div className="w-16 h-16 rounded-xl bg-gradient-to-br from-emerald-200 to-teal-200 flex items-center justify-center text-3xl shadow-sm cursor-pointer hover:scale-105 transition-transform">
📸
</div>
</div>
<div className="flex items-center gap-2 mt-2 pt-2 border-t border-emerald-200">
<div className="w-6 h-6 rounded-full bg-emerald-200 flex items-center justify-center text-xs">
👩
</div>
<span className="text-xs text-gray-600 font-medium">Logged by Sarah</span>
</div>
</div>
<div className="bg-blue-50/80 backdrop-blur-xl rounded-2xl p-4 border border-white/50 shadow-sm">
<div className="flex items-center gap-3">
<Activity size={20} className="text-blue-600" />
<div className="flex-1">
<p className="text-xs font-semibold text-gray-500">8:15 AM</p>
<p className="font-bold text-base text-blue-900">Tummy time - 10 min</p>
</div>
<button
onClick={() => setShowPhotoModal(true)}
className="w-8 h-8 rounded-lg bg-white shadow-sm flex items-center justify-center"
>
<Camera size={16} className="text-gray-600" />
</button>
</div>
<div className="flex items-center gap-2 mt-2 pt-2 border-t border-blue-200">
<div className="w-6 h-6 rounded-full bg-blue-200 flex items-center justify-center text-xs">
👩🦱
</div>
<span className="text-xs text-gray-600 font-medium">Logged by Maria</span>
</div>
</div>
</div>
</div>
<div className="fixed bottom-24 right-6 flex flex-col-reverse items-end gap-3">
{showQuickActions && (
<div className="flex flex-col gap-2">
<button
onClick={() => {
setCurrentScreen('feeding');
setShowQuickActions(false);
}}
className="flex items-center gap-3 px-4 py-3 rounded-2xl bg-white shadow-xl border border-gray-200"
>
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-emerald-400 to-teal-500 flex items-center justify-center">
<Milk size={18} className="text-white" />
</div>
<span className="font-semibold text-gray-900 text-sm pr-2">Feed</span>
</button>
<button
onClick={() => {
setCurrentScreen('sleep');
setShowQuickActions(false);
}}
className="flex items-center gap-3 px-4 py-3 rounded-2xl bg-white shadow-xl border border-gray-200"
>
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center">
<Moon size={18} className="text-white" />
</div>
<span className="font-semibold text-gray-900 text-sm pr-2">Sleep</span>
</button>
<button
onClick={() => {
setCurrentScreen('diaper');
setShowQuickActions(false);
}}
className="flex items-center gap-3 px-4 py-3 rounded-2xl bg-white shadow-xl border border-gray-200"
>
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center">
<Droplet size={18} className="text-white" />
</div>
<span className="font-semibold text-gray-900 text-sm pr-2">Diaper</span>
</button>
<button
onClick={() => {
setCurrentScreen('health');
setShowQuickActions(false);
}}
className="flex items-center gap-3 px-4 py-3 rounded-2xl bg-white shadow-xl border border-gray-200"
>
<div className="w-10 h-10 rounded-xl bg-gradient-to-br from-red-400 to-pink-500 flex items-center justify-center">
<Heart size={18} className="text-white" />
</div>
<span className="font-semibold text-gray-900 text-sm pr-2">Health</span>
</button>
</div>
)}
<button
onClick={() => setShowVoiceModal(true)}
className="w-14 h-14 rounded-2xl bg-gradient-to-br from-green-400 to-emerald-500 shadow-2xl shadow-green-500/40 flex items-center justify-center hover:scale-110 transition-transform border border-white/20"
>
<Mic size={22} className="text-white" />
</button>
<button
onClick={() => setShowQuickActions(!showQuickActions)}
className="w-16 h-16 rounded-2xl bg-gradient-to-br from-purple-600 via-purple-500 to-pink-500 shadow-2xl shadow-purple-500/40 flex items-center justify-center hover:scale-110 transition-transform border border-white/20"
>
<Plus size={28} className="text-white" />
</button>
</div>
<div className="fixed bottom-0 left-0 right-0 bg-white/80 backdrop-blur-2xl border-t border-gray-200/50">
<div className="max-w-md mx-auto px-6 py-3">
<div className="flex justify-around items-center">
<button className="flex flex-col items-center gap-1 relative">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-purple-500 to-pink-500 flex items-center justify-center shadow-lg shadow-purple-500/30">
<Home size={20} className="text-white" />
</div>
<span className="text-xs font-bold text-purple-600">Home</span>
</button>
<button
onClick={() => setCurrentScreen('photos')}
className="flex flex-col items-center gap-1"
>
<div className="w-11 h-11 rounded-2xl bg-gray-100 flex items-center justify-center">
<Camera size={20} className="text-gray-500" />
</div>
<span className="text-xs font-medium text-gray-500">Photos</span>
</button>
<button
onClick={() => setCurrentScreen('insights')}
className="flex flex-col items-center gap-1"
>
<div className="w-11 h-11 rounded-2xl bg-gray-100 flex items-center justify-center">
<TrendingUp size={20} className="text-gray-500" />
</div>
<span className="text-xs font-medium text-gray-500">Insights</span>
</button>
<button
onClick={() => setCurrentScreen('growth')}
className="flex flex-col items-center gap-1"
>
<div className="w-11 h-11 rounded-2xl bg-gray-100 flex items-center justify-center">
<Award size={20} className="text-gray-500" />
</div>
<span className="text-xs font-medium text-gray-500">Growth</span>
</button>
<button
onClick={() => setCurrentScreen('profile')}
className="flex flex-col items-center gap-1"
>
<div className="w-11 h-11 rounded-2xl bg-gray-100 flex items-center justify-center">
<User size={20} className="text-gray-500" />
</div>
<span className="text-xs font-medium text-gray-500">Profile</span>
</button>
</div>
</div>
</div>
</div>
);
const FeedingScreen = () => (
<div className="h-full bg-gradient-to-br from-emerald-50 via-white to-teal-50 flex flex-col overflow-hidden">
<div className="p-6 border-b border-gray-200 bg-white/80 backdrop-blur-xl">
<button
onClick={() => {
setCurrentScreen('home');
setFeedingTimerActive(false);
setFeedingTimerSeconds(0);
setLeftDuration(0);
setRightDuration(0);
setBottleAmount('');
setSolidFood('');
setSelectedFoods([]);
}}
className="flex items-center gap-2 text-gray-600 mb-4"
>
<ArrowLeft size={20} />
<span className="font-medium">Back</span>
</button>
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-emerald-400 to-teal-500 flex items-center justify-center shadow-lg">
<Milk size={24} className="text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900">Feeding</h1>
<p className="text-sm text-gray-500">{currentChild.name}</p>
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto p-6">
<div className="mb-6">
<p className="text-sm font-semibold text-gray-700 mb-3">Feeding Type</p>
<div className="grid grid-cols-3 gap-3">
<button
onClick={() => setFeedingType('nursing')}
className={`py-4 rounded-2xl font-semibold transition-all ${
feedingType === 'nursing'
? 'bg-gradient-to-br from-emerald-500 to-teal-500 text-white shadow-lg'
: 'bg-white border-2 border-gray-200 text-gray-700'
}`}
>
🤱 Nursing
</button>
<button
onClick={() => setFeedingType('bottle')}
className={`py-4 rounded-2xl font-semibold transition-all ${
feedingType === 'bottle'
? 'bg-gradient-to-br from-emerald-500 to-teal-500 text-white shadow-lg'
: 'bg-white border-2 border-gray-200 text-gray-700'
}`}
>
🍼 Bottle
</button>
<button
onClick={() => setFeedingType('solids')}
className={`py-4 rounded-2xl font-semibold transition-all ${
feedingType === 'solids'
? 'bg-gradient-to-br from-emerald-500 to-teal-500 text-white shadow-lg'
: 'bg-white border-2 border-gray-200 text-gray-700'
}`}
>
🥄 Solids
</button>
</div>
</div>
{feedingType === 'nursing' && (
<div className="space-y-6">
<div className="bg-gradient-to-br from-emerald-500 to-teal-500 rounded-3xl p-8 text-center shadow-2xl shadow-emerald-500/30 relative overflow-hidden">
<div className="absolute -right-12 -top-12 w-40 h-40 bg-white/10 rounded-full blur-3xl"></div>
<div className="relative">
<p className="text-emerald-100 text-sm mb-2">Total Duration</p>
<div className="text-6xl font-bold text-white mb-6 tabular-nums">
{formatTime(feedingTimerSeconds)}
</div>
<div className="flex gap-4 justify-center mb-6">
<button
onClick={() => setCurrentBreast('left')}
className={`flex-1 py-4 rounded-2xl font-bold transition-all ${
currentBreast === 'left'
? 'bg-white text-emerald-600 shadow-lg'
: 'bg-white/20 text-white border-2 border-white/30'
}`}
>
<div className="flex flex-col items-center gap-1">
<span className="text-2xl">👈</span>
<span>Left</span>
<span className="text-sm">{formatTime(leftDuration)}</span>
</div>
</button>
<button
onClick={() => setCurrentBreast('right')}
className={`flex-1 py-4 rounded-2xl font-bold transition-all ${
currentBreast === 'right'
? 'bg-white text-emerald-600 shadow-lg'
: 'bg-white/20 text-white border-2 border-white/30'
}`}
>
<div className="flex flex-col items-center gap-1">
<span className="text-2xl">👉</span>
<span>Right</span>
<span className="text-sm">{formatTime(rightDuration)}</span>
</div>
</button>
</div>
<div className="flex gap-3">
{!feedingTimerActive ? (
<button
onClick={() => setFeedingTimerActive(true)}
className="flex-1 py-4 rounded-2xl bg-white text-emerald-600 font-bold shadow-lg flex items-center justify-center gap-2"
>
<Play size={20} />
Start Timer
</button>
) : (
<>
<button
onClick={() => setFeedingTimerActive(false)}
className="flex-1 py-4 rounded-2xl bg-white/20 border-2 border-white/30 text-white font-bold flex items-center justify-center gap-2"
>
<Pause size={20} />
Pause
</button>
<button
onClick={() => {
setFeedingTimerActive(false);
setFeedingTimerSeconds(0);
setLeftDuration(0);
setRightDuration(0);
setCurrentScreen('home');
}}
className="flex-1 py-4 rounded-2xl bg-white text-emerald-600 font-bold shadow-lg flex items-center justify-center gap-2"
>
<CheckCircle size={20} />
Done
</button>
</>
)}
</div>
</div>
</div>
</div>
)}
{feedingType === 'bottle' && (
<div className="space-y-6">
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200">
<label className="block text-sm font-semibold text-gray-700 mb-3">Amount (oz)</label>
<input
type="number"
value={bottleAmount}
onChange={(e) => setBottleAmount(e.target.value)}
placeholder="4"
className="w-full text-4xl font-bold text-center py-4 rounded-2xl bg-gradient-to-br from-emerald-50 to-teal-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none"
/>
<div className="grid grid-cols-4 gap-2 mt-4">
{[2, 4, 6, 8].map(amount => (
<button
key={amount}
onClick={() => setBottleAmount(amount.toString())}
className="py-3 rounded-xl bg-emerald-50 border border-emerald-200 text-emerald-700 font-semibold"
>
{amount} oz
</button>
))}
</div>
</div>
<button
onClick={() => {
setBottleAmount('');
setCurrentScreen('home');
}}
className="w-full py-5 rounded-3xl bg-gradient-to-r from-emerald-500 to-teal-500 text-white font-bold shadow-2xl shadow-emerald-500/30"
>
Save Feeding
</button>
</div>
)}
{feedingType === 'solids' && (
<div className="space-y-6">
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200">
<label className="block text-sm font-semibold text-gray-700 mb-3">Custom Food</label>
<div className="flex gap-2">
<input
type="text"
value={solidFood}
onChange={(e) => setSolidFood(e.target.value)}
placeholder="e.g., Rice cereal"
className="flex-1 px-4 py-3 rounded-xl bg-gradient-to-br from-emerald-50 to-teal-50 border-2 border-emerald-200 focus:border-emerald-500 outline-none font-medium"
/>
<button
onClick={addCustomFood}
disabled={!solidFood}
className={`px-6 py-3 rounded-xl font-semibold ${
solidFood
? 'bg-emerald-500 text-white'
: 'bg-gray-200 text-gray-400'
}`}
>
Add
</button>
</div>
</div>
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200">
<p className="text-sm font-semibold text-gray-700 mb-3">Common Foods</p>
<div className="grid grid-cols-3 gap-2">
{['🍌 Banana', '🥕 Carrot', '🍚 Rice', '🥑 Avocado', '🍠 Potato', '🍎 Apple'].map(food => (
<button
key={food}
onClick={() => toggleFood(food)}
className={`py-3 rounded-xl text-xs font-medium transition-all ${
selectedFoods.includes(food)
? 'bg-emerald-500 text-white border-2 border-emerald-600 shadow-lg scale-105'
: 'bg-emerald-50 border border-emerald-200 text-gray-700'
}`}
>
{food}
</button>
))}
</div>
</div>
{selectedFoods.length > 0 && (
<div className="bg-white rounded-3xl p-6 border-2 border-emerald-200">
<p className="text-sm font-semibold text-gray-700 mb-3">Selected Foods ({selectedFoods.length})</p>
<div className="flex flex-wrap gap-2">
{selectedFoods.map((food, index) => (
<div
key={index}
className="flex items-center gap-2 px-3 py-2 bg-emerald-100 rounded-full"
>
<span className="text-sm font-medium text-emerald-900">{food}</span>
<button
onClick={() => removeFood(index)}
className="w-5 h-5 rounded-full bg-emerald-500 text-white flex items-center justify-center text-xs font-bold hover:bg-emerald-600"
>
×
</button>
</div>
))}
</div>
</div>
)}
<button
onClick={() => {
setSolidFood('');
setSelectedFoods([]);
setCurrentScreen('home');
}}
className="w-full py-5 rounded-3xl bg-gradient-to-r from-emerald-500 to-teal-500 text-white font-bold shadow-2xl shadow-emerald-500/30"
>
Save Feeding
</button>
</div>
)}
</div>
</div>
);
const SleepScreen = () => (
<div className="h-full bg-gradient-to-br from-purple-50 via-white to-indigo-50 flex flex-col overflow-hidden">
<div className="p-6 border-b border-gray-200 bg-white/80 backdrop-blur-xl">
<button
onClick={() => {
setCurrentScreen('home');
setSleepTimerActive(false);
setSleepTimerSeconds(0);
}}
className="flex items-center gap-2 text-gray-600 mb-4"
>
<ArrowLeft size={20} />
<span className="font-medium">Back</span>
</button>
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-purple-500 to-purple-600 flex items-center justify-center shadow-lg">
<Moon size={24} className="text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900">Sleep Tracking</h1>
<p className="text-sm text-gray-500">{currentChild.name}</p>
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto p-6 pb-32">
<div className="mb-6">
<p className="text-sm font-semibold text-gray-700 mb-3">Sleep Type</p>
<div className="grid grid-cols-2 gap-3">
<button
onClick={() => setSleepType('nap')}
className={`py-4 rounded-2xl font-semibold transition-all ${
sleepType === 'nap'
? 'bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg'
: 'bg-white border-2 border-gray-200 text-gray-700'
}`}
>
☀️ Nap
</button>
<button
onClick={() => setSleepType('night')}
className={`py-4 rounded-2xl font-semibold transition-all ${
sleepType === 'night'
? 'bg-gradient-to-br from-purple-500 to-purple-600 text-white shadow-lg'
: 'bg-white border-2 border-gray-200 text-gray-700'
}`}
>
🌙 Night Sleep
</button>
</div>
</div>
<div className="bg-gradient-to-br from-purple-500 to-indigo-600 rounded-3xl p-8 text-center shadow-2xl shadow-purple-500/30 relative overflow-hidden mb-6">
<div className="absolute -right-12 -top-12 w-40 h-40 bg-white/10 rounded-full blur-3xl"></div>
<div className="relative">
<div className="flex items-center justify-center gap-2 mb-2">
<Moon size={24} className="text-purple-100" />
<p className="text-purple-100 text-sm font-semibold">Sleep Duration</p>
</div>
<div className="text-6xl font-bold text-white mb-6 tabular-nums">
{formatTime(sleepTimerSeconds)}
</div>
<div className="bg-white/10 backdrop-blur-sm rounded-2xl p-4 mb-6">
<div className="flex items-center justify-center gap-8">
<div className="text-center">
<p className="text-purple-100 text-xs mb-1">Started</p>
<p className="text-white font-bold text-lg">
{sleepTimerActive ? new Date(Date.now() - sleepTimerSeconds * 1000).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '--:--'}
</p>
</div>
<div className="w-px h-12 bg-white/20"></div>
<div className="text-center">
<p className="text-purple-100 text-xs mb-1">Type</p>
<p className="text-white font-bold text-lg">
{sleepType === 'nap' ? '☀️ Nap' : '🌙 Night'}
</p>
</div>
</div>
</div>
<div className="flex gap-3">
{!sleepTimerActive ? (
<button
onClick={() => setSleepTimerActive(true)}
className="flex-1 py-4 rounded-2xl bg-white text-purple-600 font-bold shadow-lg flex items-center justify-center gap-2"
>
<Play size={20} />
Start Sleep Timer
</button>
) : (
<>
<button
onClick={() => setSleepTimerActive(false)}
className="flex-1 py-4 rounded-2xl bg-white/20 border-2 border-white/30 text-white font-bold flex items-center justify-center gap-2"
>
<Pause size={20} />
Pause
</button>
<button
onClick={() => {
setSleepTimerActive(false);
setSleepTimerSeconds(0);
setCurrentScreen('home');
}}
className="flex-1 py-4 rounded-2xl bg-white text-purple-600 font-bold shadow-lg flex items-center justify-center gap-2"
>
<CheckCircle size={20} />
Wake Up
</button>
</>
)}
</div>
</div>
</div>
</div>
</div>
);
const DiaperScreen = () => (
<div className="h-full bg-gradient-to-br from-amber-50 via-white to-orange-50 flex flex-col overflow-hidden">
<div className="p-6 border-b border-gray-200 bg-white/80 backdrop-blur-xl">
<button
onClick={() => setCurrentScreen('home')}
className="flex items-center gap-2 text-gray-600 mb-4"
>
<ArrowLeft size={20} />
<span className="font-medium">Back</span>
</button>
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-amber-400 to-orange-500 flex items-center justify-center shadow-lg">
<Droplet size={24} className="text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900">Diaper Change</h1>
<p className="text-sm text-gray-500">{currentChild.name}</p>
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto p-6">
<div className="mb-6">
<p className="text-sm font-semibold text-gray-700 mb-3">Diaper Type</p>
<div className="grid grid-cols-3 gap-3">
<button
onClick={() => setDiaperType('wet')}
className={`py-6 rounded-3xl font-bold transition-all ${
diaperType === 'wet'
? 'bg-gradient-to-br from-blue-400 to-cyan-500 text-white shadow-2xl scale-105'
: 'bg-white border-2 border-gray-200 text-gray-700'
}`}
>
<div className="flex flex-col items-center gap-2">
<span className="text-3xl">💧</span>
<span>Wet</span>
</div>
</button>
<button
onClick={() => setDiaperType('dirty')}
className={`py-6 rounded-3xl font-bold transition-all ${
diaperType === 'dirty'
? 'bg-gradient-to-br from-amber-500 to-orange-600 text-white shadow-2xl scale-105'
: 'bg-white border-2 border-gray-200 text-gray-700'
}`}
>
<div className="flex flex-col items-center gap-2">
<span className="text-3xl">💩</span>
<span>Dirty</span>
</div>
</button>
<button
onClick={() => setDiaperType('both')}
className={`py-6 rounded-3xl font-bold transition-all ${
diaperType === 'both'
? 'bg-gradient-to-br from-purple-500 to-pink-500 text-white shadow-2xl scale-105'
: 'bg-white border-2 border-gray-200 text-gray-700'
}`}
>
<div className="flex flex-col items-center gap-2">
<span className="text-3xl">💧💩</span>
<span>Both</span>
</div>
</button>
</div>
</div>
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200 mb-6">
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className={`w-12 h-12 rounded-2xl ${hasRash ? 'bg-red-100' : 'bg-gray-100'} flex items-center justify-center`}>
<AlertCircle size={24} className={hasRash ? 'text-red-600' : 'text-gray-400'} />
</div>
<div>
<p className="font-bold text-gray-900">Diaper Rash?</p>
<p className="text-sm text-gray-600">Track skin condition</p>
</div>
</div>
<button
onClick={() => setHasRash(!hasRash)}
className={`w-16 h-8 rounded-full transition-all ${
hasRash ? 'bg-red-500' : 'bg-gray-300'
}`}
>
<div className={`w-6 h-6 bg-white rounded-full shadow-lg transition-all ${
hasRash ? 'translate-x-9' : 'translate-x-1'
}`}></div>
</button>
</div>
</div>
<button
onClick={() => setCurrentScreen('home')}
className="w-full py-5 rounded-3xl bg-gradient-to-r from-amber-500 to-orange-500 text-white font-bold shadow-2xl shadow-amber-500/30"
>
Save Diaper Change
</button>
</div>
</div>
);
const HealthScreen = () => {
const commonSymptoms = ['🤒 Fever', '😴 Tired', '😢 Fussy', '🤧 Congestion', '🦷 Teething', '🤮 Vomiting'];
const toggleSymptom = (symptom) => {
if (symptoms.includes(symptom)) {
setSymptoms(symptoms.filter(s => s !== symptom));
} else {
setSymptoms([...symptoms, symptom]);
}
};
return (
<div className="h-full bg-gradient-to-br from-red-50 via-white to-pink-50 flex flex-col overflow-hidden">
<div className="p-6 border-b border-gray-200 bg-white/80 backdrop-blur-xl">
<button
onClick={() => setCurrentScreen('home')}
className="flex items-center gap-2 text-gray-600 mb-4"
>
<ArrowLeft size={20} />
<span className="font-medium">Back</span>
</button>
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-red-400 to-pink-500 flex items-center justify-center shadow-lg">
<Heart size={24} className="text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900">Health Tracker</h1>
<p className="text-sm text-gray-500">{currentChild.name}</p>
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto p-6 pb-32">
{/* Temperature */}
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200 mb-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-red-100 flex items-center justify-center">
<Thermometer size={20} className="text-red-600" />
</div>
<div>
<label className="block text-sm font-semibold text-gray-700">Temperature</label>
<p className="text-xs text-gray-500">°F or °C</p>
</div>
</div>
<div className="flex gap-2">
<input
type="number"
value={temperature}
onChange={(e) => setTemperature(e.target.value)}
placeholder="98.6"
step="0.1"
className="flex-1 text-3xl font-bold text-center py-3 rounded-2xl bg-gradient-to-br from-red-50 to-pink-50 border-2 border-red-200 focus:border-red-500 outline-none"
/>
<div className="flex flex-col gap-2">
<button className="px-4 py-2 rounded-xl bg-red-50 border border-red-200 text-red-700 font-semibold text-sm">
°F
</button>
<button className="px-4 py-2 rounded-xl bg-gray-100 border border-gray-200 text-gray-600 font-semibold text-sm">
°C
</button>
</div>
</div>
{temperature && parseFloat(temperature) > 100.4 && (
<div className="mt-3 p-3 bg-red-100 border border-red-200 rounded-xl flex items-center gap-2">
<AlertCircle size={18} className="text-red-600" />
<p className="text-sm font-semibold text-red-700">Fever detected - consider contacting pediatrician</p>
</div>
)}
</div>
{/* Symptoms */}
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200 mb-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-orange-100 flex items-center justify-center">
<Activity size={20} className="text-orange-600" />
</div>
<p className="text-sm font-semibold text-gray-700">Symptoms</p>
</div>
<div className="grid grid-cols-2 gap-2">
{commonSymptoms.map(symptom => (
<button
key={symptom}
onClick={() => toggleSymptom(symptom)}
className={`py-3 px-4 rounded-xl text-sm font-medium transition-all ${
symptoms.includes(symptom)
? 'bg-red-500 text-white border-2 border-red-600 shadow-lg scale-105'
: 'bg-red-50 border border-red-200 text-gray-700'
}`}
>
{symptom}
</button>
))}
</div>
</div>
{/* Medications */}
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200 mb-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center">
<Pill size={20} className="text-blue-600" />
</div>
<p className="text-sm font-semibold text-gray-700">Medications</p>
</div>
<div className="space-y-3">
<div className="p-4 bg-blue-50 border border-blue-200 rounded-xl">
<div className="flex items-center justify-between mb-2">
<p className="font-semibold text-gray-900">Infant Tylenol</p>
<p className="text-xs text-gray-500">2:30 PM</p>
</div>
<p className="text-sm text-gray-600">1.25 mL (80mg)</p>
</div>
<button className="w-full py-3 rounded-xl border-2 border-dashed border-blue-300 text-blue-600 font-semibold">
+ Add Medication
</button>
</div>
</div>
{/* Notes */}
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200 mb-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-purple-100 flex items-center justify-center">
<FileText size={20} className="text-purple-600" />
</div>
<p className="text-sm font-semibold text-gray-700">Notes</p>
</div>
<textarea
value={notes}
onChange={(e) => setNotes(e.target.value)}
placeholder="Any additional observations or concerns..."
className="w-full px-4 py-3 rounded-xl bg-gradient-to-br from-purple-50 to-pink-50 border-2 border-purple-200 focus:border-purple-500 outline-none font-medium resize-none"
rows={4}
/>
</div>
<button
onClick={() => {
setTemperature('');
setSymptoms([]);
setNotes('');
setCurrentScreen('home');
}}
className="w-full py-5 rounded-3xl bg-gradient-to-r from-red-500 to-pink-500 text-white font-bold shadow-2xl shadow-red-500/30"
>
Save Health Record
</button>
</div>
</div>
);
};
const PhotosScreen = () => {
const [filterCategory, setFilterCategory] = useState('all');
const filteredPhotos = filterCategory === 'all'
? photos
: photos.filter(p => p.category === filterCategory);
return (
<div className="h-full bg-gradient-to-br from-indigo-50 via-white to-purple-50 flex flex-col overflow-hidden">
<div className="p-6 border-b border-gray-200 bg-white/80 backdrop-blur-xl">
<button
onClick={() => setCurrentScreen('home')}
className="flex items-center gap-2 text-gray-600 mb-4"
>
<ArrowLeft size={20} />
<span className="font-medium">Back</span>
</button>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg">
<Image size={24} className="text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900">Photo Memories</h1>
<p className="text-sm text-gray-500">{photos.length} photos today</p>
</div>
</div>
<button
onClick={() => setShowPhotoModal(true)}
className="w-12 h-12 rounded-2xl bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center shadow-lg"
>
<Camera size={20} className="text-white" />
</button>
</div>
</div>
<div className="px-6 py-4 border-b border-gray-200">
<div className="flex gap-2 overflow-x-auto">
<button
onClick={() => setFilterCategory('all')}
className={`px-4 py-2 rounded-full whitespace-nowrap font-semibold text-sm transition-all ${
filterCategory === 'all'
? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg'
: 'bg-gray-100 text-gray-600'
}`}
>
All Photos
</button>
<button
onClick={() => setFilterCategory('milestone')}
className={`px-4 py-2 rounded-full whitespace-nowrap font-semibold text-sm transition-all ${
filterCategory === 'milestone'
? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg'
: 'bg-gray-100 text-gray-600'
}`}
>
🏆 Milestones
</button>
<button
onClick={() => setFilterCategory('feeding')}
className={`px-4 py-2 rounded-full whitespace-nowrap font-semibold text-sm transition-all ${
filterCategory === 'feeding'
? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg'
: 'bg-gray-100 text-gray-600'
}`}
>
🍼 Feeding
</button>
<button
onClick={() => setFilterCategory('activity')}
className={`px-4 py-2 rounded-full whitespace-nowrap font-semibold text-sm transition-all ${
filterCategory === 'activity'
? 'bg-gradient-to-r from-indigo-500 to-purple-600 text-white shadow-lg'
: 'bg-gray-100 text-gray-600'
}`}
>
⚡ Activities
</button>
</div>
</div>
<div className="flex-1 overflow-y-auto p-6 pb-6">
<div className="mb-6">
<div className="flex items-center gap-2 mb-3">
<Calendar size={16} className="text-gray-500" />
<h3 className="text-sm font-bold text-gray-900">Today - October 13</h3>
</div>
<div className="grid grid-cols-3 gap-3">
{filteredPhotos.map(photo => (
<button
key={photo.id}
onClick={() => {
setSelectedPhoto(photo);
setShowPhotoModal(true);
}}
className="aspect-square rounded-2xl bg-gradient-to-br from-indigo-100 to-purple-200 flex flex-col items-center justify-center text-4xl shadow-lg hover:scale-105 transition-transform relative overflow-hidden"
>
<div className="absolute inset-0 bg-gradient-to-t from-black/40 to-transparent"></div>
<span className="relative z-10">{photo.url}</span>
<div className="absolute bottom-2 left-2 right-2 z-10">
<p className="text-xs font-semibold text-white truncate">{photo.caption}</p>
</div>
</button>
))}
<button
onClick={() => setShowPhotoModal(true)}
className="aspect-square rounded-2xl border-2 border-dashed border-indigo-300 bg-indigo-50 flex flex-col items-center justify-center hover:bg-indigo-100 transition-colors"
>
<Camera size={24} className="text-indigo-600 mb-1" />
<span className="text-xs font-semibold text-indigo-600">Add Photo</span>
</button>
</div>
</div>
<div className="bg-gradient-to-br from-purple-500 to-pink-500 rounded-3xl p-6 text-white shadow-2xl">
<div className="flex items-center gap-3 mb-3">
<Sparkles size={24} />
<h3 className="text-lg font-bold">Weekly Recap</h3>
</div>
<p className="text-white/90 mb-3">
You've captured 47 precious moments this week! Your most photographed times are mornings (8-10 AM).
</p>
<button className="px-4 py-2 bg-white/20 rounded-xl font-semibold text-sm backdrop-blur-sm">
Create Video Recap
</button>
</div>
</div>
</div>
);
};
const InsightsScreen = () => (
<div className="h-full bg-gradient-to-br from-blue-50 via-white to-indigo-50 flex flex-col overflow-hidden">
<div className="p-6 border-b border-gray-200 bg-white/80 backdrop-blur-xl">
<button
onClick={() => setCurrentScreen('home')}
className="flex items-center gap-2 text-gray-600 mb-4"
>
<ArrowLeft size={20} />
<span className="font-medium">Back</span>
</button>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg">
<BarChart3 size={24} className="text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900">Analytics</h1>
<p className="text-sm text-gray-500">Advanced insights & trends</p>
</div>
</div>
<button className="px-4 py-2 rounded-xl bg-blue-100 text-blue-700 font-semibold text-sm">
Export PDF
</button>
</div>
</div>
<div className="flex gap-2 px-6 py-3 border-b border-gray-200 overflow-x-auto">
<button className="px-4 py-2 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-500 text-white font-semibold text-sm shadow-lg whitespace-nowrap">
This Week
</button>
<button className="px-4 py-2 rounded-xl bg-gray-100 text-gray-600 font-semibold text-sm whitespace-nowrap">
Last Month
</button>
<button className="px-4 py-2 rounded-xl bg-gray-100 text-gray-600 font-semibold text-sm whitespace-nowrap">
All Time
</button>
</div>
<div className="flex-1 overflow-y-auto px-6 py-6 pb-32">
{/* Key Metrics */}
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="bg-white rounded-3xl p-5 border-2 border-purple-100 shadow-lg">
<div className="flex items-center gap-2 mb-3">
<div className="w-8 h-8 rounded-xl bg-purple-100 flex items-center justify-center">
<Moon size={16} className="text-purple-600" />
</div>
<p className="text-xs font-semibold text-gray-500 uppercase">Avg Sleep</p>
</div>
<p className="text-3xl font-bold text-gray-900 mb-1">8.2 hrs</p>
<div className="flex items-center gap-1 text-green-600">
<TrendingUp size={14} />
<span className="text-xs font-semibold">+12% vs last week</span>
</div>
</div>
<div className="bg-white rounded-3xl p-5 border-2 border-emerald-100 shadow-lg">
<div className="flex items-center gap-2 mb-3">
<div className="w-8 h-8 rounded-xl bg-emerald-100 flex items-center justify-center">
<Milk size={16} className="text-emerald-600" />
</div>
<p className="text-xs font-semibold text-gray-500 uppercase">Daily Feeds</p>
</div>
<p className="text-3xl font-bold text-gray-900 mb-1">6.4</p>
<div className="flex items-center gap-1 text-green-600">
<TrendingUp size={14} />
<span className="text-xs font-semibold">Steady pattern</span>
</div>
</div>
</div>
{/* Sleep Quality Chart */}
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200 shadow-lg mb-6">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-purple-100 flex items-center justify-center">
<LineChart size={20} className="text-purple-600" />
</div>
<div>
<h3 className="text-lg font-bold text-gray-900">Sleep Trend</h3>
<p className="text-xs text-gray-500">Last 7 days</p>
</div>
</div>
</div>
<div className="flex items-end justify-between gap-2 h-32 mb-3">
{[7.2, 7.8, 8.1, 7.5, 8.4, 8.8, 8.2].map((hours, index) => (
<div key={index} className="flex-1 flex flex-col items-center">
<div className="w-full bg-gradient-to-t from-purple-500 to-purple-400 rounded-t-lg transition-all hover:from-purple-600 hover:to-purple-500"
style={{height: `${(hours / 10) * 100}%`}}>
</div>
<p className="text-xs font-semibold text-gray-400 mt-2">
{['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'][index]}
</p>
</div>
))}
</div>
<div className="text-center">
<p className="text-sm text-gray-600">Average: <span className="font-bold text-purple-600">8.0 hours</span></p>
</div>
</div>
{/* Feeding Distribution */}
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200 shadow-lg mb-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-emerald-100 flex items-center justify-center">
<PieChart size={20} className="text-emerald-600" />
</div>
<div>
<h3 className="text-lg font-bold text-gray-900">Feeding Distribution</h3>
<p className="text-xs text-gray-500">This week</p>
</div>
</div>
<div className="space-y-3">
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-gray-700 flex items-center gap-2">
<span className="w-3 h-3 rounded-full bg-emerald-500"></span>
Nursing
</span>
<span className="text-sm font-bold text-emerald-600">65%</span>
</div>
<div className="h-2 bg-gray-100 rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-emerald-400 to-emerald-600 rounded-full" style={{width: '65%'}}></div>
</div>
</div>
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-gray-700 flex items-center gap-2">
<span className="w-3 h-3 rounded-full bg-blue-500"></span>
Bottle
</span>
<span className="text-sm font-bold text-blue-600">30%</span>
</div>
<div className="h-2 bg-gray-100 rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-blue-400 to-blue-600 rounded-full" style={{width: '30%'}}></div>
</div>
</div>
<div>
<div className="flex items-center justify-between mb-2">
<span className="text-sm font-medium text-gray-700 flex items-center gap-2">
<span className="w-3 h-3 rounded-full bg-orange-500"></span>
Solids
</span>
<span className="text-sm font-bold text-orange-600">5%</span>
</div>
<div className="h-2 bg-gray-100 rounded-full overflow-hidden">
<div className="h-full bg-gradient-to-r from-orange-400 to-orange-600 rounded-full" style={{width: '5%'}}></div>
</div>
</div>
</div>
</div>
{/* Correlation Insights */}
<div className="bg-gradient-to-br from-indigo-500 to-purple-600 rounded-3xl p-6 text-white shadow-2xl shadow-indigo-500/30 mb-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
<Zap size={20} className="text-white" />
</div>
<h3 className="text-lg font-bold">Smart Correlations</h3>
</div>
<div className="space-y-3">
<div className="p-4 bg-white/10 backdrop-blur-sm rounded-2xl">
<div className="flex items-center gap-2 mb-2">
<CheckCircle size={16} className="text-green-300" />
<p className="font-bold text-white">Sleep → Mood</p>
</div>
<p className="text-sm text-white/90">
Emma sleeps 45 min longer when fed before 7 PM
</p>
</div>
<div className="p-4 bg-white/10 backdrop-blur-sm rounded-2xl">
<div className="flex items-center gap-2 mb-2">
<CheckCircle size={16} className="text-green-300" />
<p className="font-bold text-white">Activity → Sleep</p>
</div>
<p className="text-sm text-white/90">
Morning tummy time correlates with better afternoon naps
</p>
</div>
<div className="p-4 bg-white/10 backdrop-blur-sm rounded-2xl">
<div className="flex items-center gap-2 mb-2">
<AlertCircle size={16} className="text-yellow-300" />
<p className="font-bold text-white">Pattern Alert</p>
</div>
<p className="text-sm text-white/90">
Fussy periods peak around 6 PM - possible wonder week
</p>
</div>
</div>
</div>
{/* Comparison Week over Week */}
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200 shadow-lg mb-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center">
<Activity size={20} className="text-blue-600" />
</div>
<div>
<h3 className="text-lg font-bold text-gray-900">Week Comparison</h3>
<p className="text-xs text-gray-500">vs Previous Week</p>
</div>
</div>
<div className="space-y-4">
<div className="flex items-center justify-between p-3 bg-purple-50 rounded-xl">
<div className="flex items-center gap-3">
<Moon size={18} className="text-purple-600" />
<span className="font-semibold text-gray-900">Sleep</span>
</div>
<div className="flex items-center gap-2">
<span className="text-lg font-bold text-gray-900">8.2h</span>
<div className="flex items-center gap-1 text-green-600">
<TrendingUp size={14} />
<span className="text-sm font-bold">+0.9h</span>
</div>
</div>
</div>
<div className="flex items-center justify-between p-3 bg-emerald-50 rounded-xl">
<div className="flex items-center gap-3">
<Milk size={18} className="text-emerald-600" />
<span className="font-semibold text-gray-900">Feeding</span>
</div>
<div className="flex items-center gap-2">
<span className="text-lg font-bold text-gray-900">6.4x</span>
<div className="flex items-center gap-1 text-gray-600">
<Activity size={14} />
<span className="text-sm font-bold">±0</span>
</div>
</div>
</div>
<div className="flex items-center justify-between p-3 bg-amber-50 rounded-xl">
<div className="flex items-center gap-3">
<Droplet size={18} className="text-amber-600" />
<span className="font-semibold text-gray-900">Diapers</span>
</div>
<div className="flex items-center gap-2">
<span className="text-lg font-bold text-gray-900">5.1x</span>
<div className="flex items-center gap-1 text-green-600">
<TrendingUp size={14} />
<span className="text-sm font-bold">+0.3</span>
</div>
</div>
</div>
</div>
</div>
{/* Best Times */}
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200 shadow-lg">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-yellow-100 flex items-center justify-center">
<Star size={20} className="text-yellow-600" />
</div>
<div>
<h3 className="text-lg font-bold text-gray-900">Optimal Times</h3>
<p className="text-xs text-gray-500">Based on patterns</p>
</div>
</div>
<div className="space-y-3">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-gray-700">Best nap window</span>
<span className="text-sm font-bold text-purple-600">10:30 AM - 12:00 PM</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-gray-700">Peak feeding time</span>
<span className="text-sm font-bold text-emerald-600">7:00 AM, 11:00 AM, 3:00 PM</span>
</div>
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-gray-700">Most active period</span>
<span className="text-sm font-bold text-blue-600">9:00 AM - 10:30 AM</span>
</div>
</div>
</div>
</div>
<NavBar currentScreen="insights" setCurrentScreen={setCurrentScreen} />
</div>
);
const GrowthScreen = () => (
<div className="h-full bg-gradient-to-br from-green-50 via-white to-emerald-50 flex flex-col overflow-hidden">
<div className="p-6 border-b border-gray-200 bg-white/80 backdrop-blur-xl">
<button
onClick={() => setCurrentScreen('home')}
className="flex items-center gap-2 text-gray-600 mb-4"
>
<ArrowLeft size={20} />
<span className="font-medium">Back</span>
</button>
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center shadow-lg">
<Trophy size={24} className="text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900">Growth & Milestones</h1>
<p className="text-sm text-gray-500">Tracking {currentChild.name}</p>
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto px-6 py-6 pb-32">
{/* Stats Overview */}
<div className="grid grid-cols-2 gap-4 mb-6">
<div className="bg-gradient-to-br from-orange-400 to-red-500 rounded-3xl p-5 text-white shadow-2xl shadow-orange-500/30 relative overflow-hidden">
<div className="absolute -right-4 -top-4 w-24 h-24 bg-white/10 rounded-full blur-2xl"></div>
<div className="relative">
<div className="flex items-center gap-2 mb-2">
<Flame size={20} className="text-white/90" />
<p className="text-xs font-semibold text-white/80 uppercase">Streak</p>
</div>
<p className="text-4xl font-bold mb-1">{trackingStreak}</p>
<p className="text-sm text-white/80">days in a row</p>
</div>
</div>
<div className="bg-gradient-to-br from-purple-500 to-pink-500 rounded-3xl p-5 text-white shadow-2xl shadow-purple-500/30 relative overflow-hidden">
<div className="absolute -right-4 -top-4 w-24 h-24 bg-white/10 rounded-full blur-2xl"></div>
<div className="relative">
<div className="flex items-center gap-2 mb-2">
<Target size={20} className="text-white/90" />
<p className="text-xs font-semibold text-white/80 uppercase">Entries</p>
</div>
<p className="text-4xl font-bold mb-1">{totalEntries}</p>
<p className="text-sm text-white/80">total logged</p>
</div>
</div>
</div>
{/* Achievements Section */}
<div className="mb-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-bold text-gray-900">🏆 Achievements</h2>
<span className="text-sm font-semibold text-green-600">
{achievements.filter(a => a.unlocked).length}/{achievements.length}
</span>
</div>
{/* Unlocked Achievements */}
<div className="grid grid-cols-3 gap-3 mb-4">
{achievements.filter(a => a.unlocked).map(achievement => (
<div
key={achievement.id}
className="bg-gradient-to-br from-yellow-400 to-orange-500 rounded-2xl p-4 shadow-lg relative overflow-hidden"
>
<div className="absolute inset-0 bg-gradient-to-t from-black/20 to-transparent"></div>
<div className="relative text-center">
<div className="text-4xl mb-2">{achievement.icon}</div>
<p className="text-xs font-bold text-white mb-0.5">{achievement.name}</p>
<p className="text-xs text-white/80">{achievement.date}</p>
</div>
</div>
))}
</div>
{/* In Progress Achievements */}
<div className="space-y-3">
{achievements.filter(a => !a.unlocked).map(achievement => (
<div
key={achievement.id}
className="bg-white rounded-2xl p-4 border-2 border-gray-200 shadow-sm"
>
<div className="flex items-center gap-3 mb-3">
<div className="w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center text-2xl grayscale">
{achievement.icon}
</div>
<div className="flex-1">
<p className="font-bold text-gray-900">{achievement.name}</p>
<p className="text-xs text-gray-500">{achievement.description}</p>
</div>
<div className="text-right">
<p className="text-sm font-bold text-gray-900">{achievement.progress}</p>
<p className="text-xs text-gray-500">/{achievement.description.match(/\d+/)[0]}</p>
</div>
</div>
<div className="h-2 bg-gray-100 rounded-full overflow-hidden">
<div
className="h-full bg-gradient-to-r from-green-400 to-emerald-500 rounded-full transition-all"
style={{width: `${(achievement.progress / parseInt(achievement.description.match(/\d+/)[0])) * 100}%`}}
></div>
</div>
</div>
))}
</div>
</div>
{/* Developmental Milestones */}
<div className="mb-6">
<div className="flex items-center justify-between mb-4">
<h2 className="text-xl font-bold text-gray-900">📍 Milestones</h2>
<button
onClick={() => {
setNewAchievement({ name: 'First Steps!', icon: '👣', description: 'Emma took her first steps!' });
setShowAchievementNotif(true);
setTimeout(() => setShowAchievementNotif(false), 4000);
}}
className="px-3 py-1.5 rounded-lg bg-green-100 text-green-700 font-semibold text-sm"
>
+ Add
</button>
</div>
{/* Completed Milestones */}
<div className="mb-4">
<p className="text-sm font-semibold text-gray-700 mb-3">✅ Completed</p>
<div className="space-y-2">
{milestones.filter(m => m.completed).map(milestone => (
<div
key={milestone.id}
className="bg-green-50 border border-green-200 rounded-2xl p-4 flex items-center gap-3"
>
<div className="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center text-2xl">
{milestone.icon}
</div>
<div className="flex-1">
<p className="font-bold text-gray-900">{milestone.name}</p>
<p className="text-xs text-gray-600">{milestone.category} • {milestone.age}</p>
</div>
<div className="text-right">
<CheckCircle className="text-green-600 mb-1" size={20} />
<p className="text-xs text-gray-500">{milestone.date}</p>
</div>
</div>
))}
</div>
</div>
{/* Upcoming Milestones */}
<div>
<p className="text-sm font-semibold text-gray-700 mb-3">🎯 Coming Up</p>
<div className="space-y-2">
{milestones.filter(m => !m.completed).map(milestone => (
<div
key={milestone.id}
className="bg-white border-2 border-gray-200 rounded-2xl p-4 flex items-center gap-3"
>
<div className="w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center text-2xl opacity-50">
{milestone.icon}
</div>
<div className="flex-1">
<p className="font-bold text-gray-900">{milestone.name}</p>
<p className="text-xs text-gray-600">{milestone.category} • Expected: {milestone.expected}</p>
</div>
<button className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center">
<Plus size={16} className="text-gray-600" />
</button>
</div>
))}
</div>
</div>
</div>
{/* Physical Growth */}
<div className="mb-6">
<h2 className="text-xl font-bold text-gray-900 mb-4">📏 Physical Growth</h2>
<div className="grid grid-cols-2 gap-4 mb-4">
<div className="bg-white rounded-3xl p-5 border-2 border-blue-100 shadow-lg">
<div className="flex items-center gap-2 mb-3">
<div className="w-8 h-8 rounded-xl bg-blue-100 flex items-center justify-center">
<Activity size={16} className="text-blue-600" />
</div>
<p className="text-xs font-semibold text-gray-500 uppercase">Weight</p>
</div>
<p className="text-3xl font-bold text-gray-900 mb-1">14.2 lbs</p>
<div className="flex items-center gap-1 text-green-600">
<TrendingUp size={14} />
<span className="text-xs font-semibold">+0.3 lbs</span>
</div>
</div>
<div className="bg-white rounded-3xl p-5 border-2 border-purple-100 shadow-lg">
<div className="flex items-center gap-2 mb-3">
<div className="w-8 h-8 rounded-xl bg-purple-100 flex items-center justify-center">
<Maximize2 size={16} className="text-purple-600" />
</div>
<p className="text-xs font-semibold text-gray-500 uppercase">Height</p>
</div>
<p className="text-3xl font-bold text-gray-900 mb-1">24.5 in</p>
<div className="flex items-center gap-1 text-green-600">
<TrendingUp size={14} />
<span className="text-xs font-semibold">+0.5 in</span>
</div>
</div>
</div>
</div>
{/* Celebration Card */}
<div className="bg-gradient-to-br from-yellow-400 via-orange-500 to-pink-500 rounded-3xl p-6 text-white shadow-2xl relative overflow-hidden">
<div className="absolute -right-8 -top-8 w-32 h-32 bg-white/10 rounded-full blur-3xl"></div>
<div className="relative">
<div className="flex items-center gap-3 mb-3">
<Gift size={28} />
<h3 className="text-xl font-bold">Keep Going!</h3>
</div>
<p className="text-white/90 mb-4">
You're doing amazing! Just 3 more entries to unlock the "Feed Master" badge. 🎉
</p>
<div className="flex gap-2">
<button className="px-4 py-2 bg-white/20 backdrop-blur-sm rounded-xl font-semibold text-sm">
View All Badges
</button>
<button className="px-4 py-2 bg-white text-orange-600 rounded-xl font-semibold text-sm">
Share Progress
</button>
</div>
</div>
</div>
</div>
<NavBar currentScreen="growth" setCurrentScreen={setCurrentScreen} />
</div>
);
const ProfileScreen = () => (
<div className="h-full bg-gradient-to-br from-gray-50 via-white to-slate-50 flex flex-col overflow-hidden">
<div className="p-6 border-b border-gray-200 bg-white/80 backdrop-blur-xl">
<button
onClick={() => setCurrentScreen('home')}
className="flex items-center gap-2 text-gray-600 mb-4"
>
<ArrowLeft size={20} />
<span className="font-medium">Back</span>
</button>
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-gray-700 to-gray-900 flex items-center justify-center shadow-lg">
<User size={24} className="text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900">Profile</h1>
<p className="text-sm text-gray-500">Settings & account</p>
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto px-6 py-6 pb-32">
<div className="bg-gradient-to-br from-purple-500 to-pink-500 rounded-3xl p-6 text-white shadow-2xl mb-6">
<div className="flex items-center gap-4">
<div className="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-xl flex items-center justify-center text-3xl">
👤
</div>
<div className="flex-1">
<p className="text-2xl font-bold">Sarah Johnson</p>
<p className="text-white/80 text-sm">[email protected]</p>
</div>
</div>
</div>
<div className="space-y-3">
<button
onClick={() => setCurrentScreen('caregivers')}
className="w-full flex items-center gap-4 p-4 bg-white rounded-2xl border-2 border-gray-200 shadow-sm"
>
<Users size={20} className="text-blue-600" />
<div className="flex-1 text-left">
<p className="font-bold text-gray-900">Caregivers</p>
<p className="text-sm text-gray-500">{caregivers.filter(c => c.status === 'active').length} active now</p>
</div>
<ChevronRight className="text-gray-400" />
</button>
<button
onClick={() => setCurrentScreen('privacy')}
className="w-full flex items-center gap-4 p-4 bg-white rounded-2xl border-2 border-green-200 shadow-sm"
>
<Shield size={20} className="text-green-600" />
<div className="flex-1 text-left">
<p className="font-bold text-gray-900">Privacy & Data</p>
<p className="text-sm text-gray-500">Your data, your control</p>
</div>
<ChevronRight className="text-gray-400" />
</button>
<button className="w-full flex items-center gap-4 p-4 bg-white rounded-2xl border-2 border-gray-200 shadow-sm">
<Bell size={20} className="text-purple-600" />
<div className="flex-1 text-left">
<p className="font-bold text-gray-900">Notifications</p>
</div>
<ChevronRight className="text-gray-400" />
</button>
</div>
</div>
<NavBar currentScreen="profile" setCurrentScreen={setCurrentScreen} />
</div>
);
const PrivacyScreen = () => (
<div className="h-full bg-gradient-to-br from-green-50 via-white to-emerald-50 flex flex-col overflow-hidden">
<div className="p-6 border-b border-gray-200 bg-white/80 backdrop-blur-xl">
<button
onClick={() => setCurrentScreen('profile')}
className="flex items-center gap-2 text-gray-600 mb-4"
>
<ArrowLeft size={20} />
<span className="font-medium">Back</span>
</button>
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center shadow-lg">
<Shield size={24} className="text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900">Privacy & Data</h1>
<p className="text-sm text-gray-500">Your data belongs to you</p>
</div>
</div>
</div>
<div className="flex-1 overflow-y-auto px-6 py-6 pb-32">
{/* Data Ownership Statement */}
<div className="bg-gradient-to-br from-green-500 to-emerald-600 rounded-3xl p-6 text-white shadow-2xl mb-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-12 h-12 rounded-xl bg-white/20 backdrop-blur-sm flex items-center justify-center">
<CheckCircle size={24} className="text-white" />
</div>
<h3 className="text-xl font-bold">Your Data Promise</h3>
</div>
<div className="space-y-2 text-white/90 text-sm">
<p className="flex items-center gap-2">
<CheckCircle size={16} /> You own 100% of your data
</p>
<p className="flex items-center gap-2">
<CheckCircle size={16} /> We never sell to third parties
</p>
<p className="flex items-center gap-2">
<CheckCircle size={16} /> Export anytime, no restrictions
</p>
<p className="flex items-center gap-2">
<CheckCircle size={16} /> Delete all data on request
</p>
</div>
</div>
{/* Export Data Section */}
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200 shadow-lg mb-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-blue-100 flex items-center justify-center">
<Download size={20} className="text-blue-600" />
</div>
<div>
<h3 className="text-lg font-bold text-gray-900">Export Your Data</h3>
<p className="text-xs text-gray-500">Take your data anywhere</p>
</div>
</div>
<div className="space-y-3 mb-4">
<button
onClick={() => {
setExportFormat('pdf');
setShowExportModal(true);
}}
className="w-full p-4 rounded-xl bg-red-50 border-2 border-red-200 text-left hover:bg-red-100 transition-colors"
>
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-red-100 flex items-center justify-center text-xl">
📄
</div>
<div className="flex-1">
<p className="font-bold text-gray-900">Pediatrician Report (PDF)</p>
<p className="text-xs text-gray-600">Clean report for doctor visits</p>
</div>
<Download size={18} className="text-red-600" />
</div>
</button>
<button
onClick={() => {
setExportFormat('csv');
setShowExportModal(true);
}}
className="w-full p-4 rounded-xl bg-green-50 border-2 border-green-200 text-left hover:bg-green-100 transition-colors"
>
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-green-100 flex items-center justify-center text-xl">
📊
</div>
<div className="flex-1">
<p className="font-bold text-gray-900">Spreadsheet (CSV)</p>
<p className="text-xs text-gray-600">For Excel, Google Sheets</p>
</div>
<Download size={18} className="text-green-600" />
</div>
</button>
<button
onClick={() => {
setExportFormat('json');
setShowExportModal(true);
}}
className="w-full p-4 rounded-xl bg-purple-50 border-2 border-purple-200 text-left hover:bg-purple-100 transition-colors"
>
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-lg bg-purple-100 flex items-center justify-center text-xl">
💾
</div>
<div className="flex-1">
<p className="font-bold text-gray-900">Complete Backup (JSON)</p>
<p className="text-xs text-gray-600">All data with photos</p>
</div>
<Download size={18} className="text-purple-600" />
</div>
</button>
</div>
<p className="text-xs text-gray-500 text-center">
Last exported: Never • Data size: 2.4 MB
</p>
</div>
{/* Data Sharing Controls */}
<div className="bg-white rounded-3xl p-6 border-2 border-gray-200 shadow-lg mb-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-orange-100 flex items-center justify-center">
<Eye size={20} className="text-orange-600" />
</div>
<div>
<h3 className="text-lg font-bold text-gray-900">Data Sharing</h3>
<p className="text-xs text-gray-500">Control who sees your data</p>
</div>
</div>
<div className="space-y-4">
<div className="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
<div>
<p className="font-semibold text-gray-900">Anonymous Analytics</p>
<p className="text-xs text-gray-600">Help improve the app</p>
</div>
<button
onClick={() => setDataSharing({...dataSharing, analytics: !dataSharing.analytics})}
className={`w-12 h-6 rounded-full transition-all ${
dataSharing.analytics ? 'bg-green-500' : 'bg-gray-300'
}`}
>
<div className={`w-5 h-5 bg-white rounded-full shadow-lg transition-all ${
dataSharing.analytics ? 'translate-x-7' : 'translate-x-0.5'
}`}></div>
</button>
</div>
<div className="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
<div>
<p className="font-semibold text-gray-900">Marketing Communications</p>
<p className="text-xs text-gray-600">Tips and product updates</p>
</div>
<button
onClick={() => setDataSharing({...dataSharing, marketing: !dataSharing.marketing})}
className={`w-12 h-6 rounded-full transition-all ${
dataSharing.marketing ? 'bg-green-500' : 'bg-gray-300'
}`}
>
<div className={`w-5 h-5 bg-white rounded-full shadow-lg transition-all ${
dataSharing.marketing ? 'translate-x-7' : 'translate-x-0.5'
}`}></div>
</button>
</div>
<div className="flex items-center justify-between p-3 bg-gray-50 rounded-xl">
<div>
<p className="font-semibold text-gray-900">Research Studies</p>
<p className="text-xs text-gray-600">Contribute to baby science</p>
</div>
<button
onClick={() => setDataSharing({...dataSharing, research: !dataSharing.research})}
className={`w-12 h-6 rounded-full transition-all ${
dataSharing.research ? 'bg-green-500' : 'bg-gray-300'
}`}
>
<div className={`w-5 h-5 bg-white rounded-full shadow-lg transition-all ${
dataSharing.research ? 'translate-x-7' : 'translate-x-0.5'
}`}></div>
</button>
</div>
<div className="flex items-center justify-between p-3 bg-red-50 rounded-xl border border-red-200">
<div>
<p className="font-semibold text-gray-900">Third-Party Sharing</p>
<p className="text-xs text-red-600">⚠️ Always disabled for safety</p>
</div>
<button
disabled
className="w-12 h-6 rounded-full bg-gray-300 opacity-50 cursor-not-allowed"
>
<div className="w-5 h-5 bg-white rounded-full shadow-lg translate-x-0.5"></div>
</button>
</div>
</div>
</div>
{/* Delete Data */}
<div className="bg-white rounded-3xl p-6 border-2 border-red-200 shadow-lg mb-6">
<div className="flex items-center gap-3 mb-4">
<div className="w-10 h-10 rounded-xl bg-red-100 flex items-center justify-center">
<AlertCircle size={20} className="text-red-600" />
</div>
<div>
<h3 className="text-lg font-bold text-gray-900">Delete All Data</h3>
<p className="text-xs text-gray-500">Permanently remove everything</p>
</div>
</div>
<p className="text-sm text-gray-600 mb-4">
This will permanently delete all your baby's data, photos, and records. This action cannot be undone.
</p>
<button className="w-full py-3 rounded-xl bg-red-500 text-white font-bold hover:bg-red-600 transition-colors">
Request Data Deletion
</button>
</div>
{/* Security Info */}
<div className="bg-blue-50 rounded-2xl p-4 border border-blue-200">
<div className="flex items-start gap-3">
<Shield size={20} className="text-blue-600 mt-0.5" />
<div>
<p className="font-semibold text-blue-900 mb-1">Your Data is Secure</p>
<p className="text-xs text-blue-700">
All data is encrypted in transit (TLS 1.3) and at rest (AES-256).
We're HIPAA compliant and undergo regular security audits.
</p>
</div>
</div>
</div>
</div>
</div>
);
const CaregiversScreen = () => (
<div className="h-full bg-gradient-to-br from-blue-50 via-white to-indigo-50 flex flex-col overflow-hidden">
<div className="p-6 border-b border-gray-200 bg-white/80 backdrop-blur-xl">
<button
onClick={() => setCurrentScreen('home')}
className="flex items-center gap-2 text-gray-600 mb-4"
>
<ArrowLeft size={20} />
<span className="font-medium">Back</span>
</button>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg">
<Users size={24} className="text-white" />
</div>
<div>
<h1 className="text-2xl font-bold text-gray-900">Care Team</h1>
<p className="text-sm text-gray-500">{caregivers.length} caregivers</p>
</div>
</div>
<button
onClick={() => setShowCaregiverModal(true)}
className="w-12 h-12 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center shadow-lg"
>
<UserPlus size={20} className="text-white" />
</button>
</div>
</div>
<div className="flex gap-2 px-6 py-3 border-b border-gray-200 overflow-x-auto">
<button className="px-4 py-2 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-500 text-white font-semibold text-sm shadow-lg whitespace-nowrap">
All
</button>
<button className="px-4 py-2 rounded-xl bg-gray-100 text-gray-600 font-semibold text-sm whitespace-nowrap">
Active ({caregivers.filter(c => c.status === 'active').length})
</button>
<button
onClick={() => setShowHandoffModal(true)}
className="px-4 py-2 rounded-xl bg-gray-100 text-gray-600 font-semibold text-sm whitespace-nowrap flex items-center gap-2"
>
<MessageCircle size={14} />
Handoff Notes
</button>
</div>
<div className="flex-1 overflow-y-auto px-6 py-6 pb-32">
{/* Active Caregivers */}
<div className="mb-6">
<h3 className="text-sm font-bold text-gray-900 mb-3">🟢 Active Now</h3>
<div className="space-y-3">
{caregivers.filter(c => c.status === 'active').map(caregiver => (
<div
key={caregiver.id}
className="bg-white rounded-2xl p-4 border-2 border-gray-200 shadow-sm"
>
<div className="flex items-center gap-3">
<div className="relative">
<div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-blue-100 to-indigo-200 flex items-center justify-center text-2xl">
{caregiver.avatar}
</div>
<div className="absolute -bottom-1 -right-1 w-4 h-4 bg-green-500 rounded-full border-2 border-white"></div>
</div>
<div className="flex-1">
<div className="flex items-center gap-2 mb-1">
<p className="font-bold text-gray-900">{caregiver.name}</p>
{caregiver.permissions === 'admin' && (
<span className="px-2 py-0.5 rounded-md bg-purple-100 text-purple-700 text-xs font-semibold">
Admin
</span>
)}
</div>
<p className="text-sm text-gray-600">{caregiver.role}</p>
<p className="text-xs text-green-600 font-medium mt-1">Active now</p>
</div>
<button className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center">
<MessageCircle size={18} className="text-gray-600" />
</button>
</div>
</div>
))}
</div>
</div>
{/* Other Caregivers */}
<div className="mb-6">
<h3 className="text-sm font-bold text-gray-900 mb-3">Team Members</h3>
<div className="space-y-3">
{caregivers.filter(c => c.status !== 'active').map(caregiver => (
<div
key={caregiver.id}
className="bg-white rounded-2xl p-4 border-2 border-gray-200 shadow-sm"
>
<div className="flex items-center gap-3">
<div className="relative">
<div className="w-14 h-14 rounded-2xl bg-gray-100 flex items-center justify-center text-2xl opacity-60">
{caregiver.avatar}
</div>
<div className={`absolute -bottom-1 -right-1 w-4 h-4 rounded-full border-2 border-white ${
caregiver.status === 'away' ? 'bg-yellow-500' : 'bg-gray-400'
}`}></div>
</div>
<div className="flex-1">
<p className="font-bold text-gray-900">{caregiver.name}</p>
<p className="text-sm text-gray-600">{caregiver.role}</p>
<p className="text-xs text-gray-500 mt-1">Last active {caregiver.lastActive}</p>
</div>
<button className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center">
<MoreVertical size={18} className="text-gray-600" />
</button>
</div>
</div>
))}
</div>
</div>
{/* Activity Feed */}
<div className="mb-6">
<div className="flex items-center justify-between mb-3">
<h3 className="text-sm font-bold text-gray-900">📊 Recent Activity</h3>
<button className="text-xs font-semibold text-blue-600">View All</button>
</div>
<div className="space-y-2">
{activityFeed.map(activity => (
<div
key={activity.id}
className="bg-white rounded-xl p-3 border border-gray-200 shadow-sm"
>
<div className="flex items-center gap-3">
<div className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center text-lg">
{activity.avatar}
</div>
<div className="flex-1">
<p className="text-sm">
<span className="font-semibold text-gray-900">{activity.caregiver}</span>
<span className="text-gray-600"> {activity.action}</span>
</p>
<p className="text-xs text-gray-500">{activity.detail}</p>
</div>
<p className="text-xs text-gray-400">{activity.time}</p>
</div>
</div>
))}
</div>
</div>
{/* Info Card */}
<div className="bg-gradient-to-br from-blue-500 to-indigo-600 rounded-3xl p-6 text-white shadow-2xl">
<div className="flex items-center gap-3 mb-3">
<Sparkles size={24} />
<h3 className="text-lg font-bold">Working Together</h3>
</div>
<p className="text-white/90 mb-3">
Your team has logged 247 entries this month. Great collaboration! 🎉
</p>
<button className="px-4 py-2 bg-white/20 backdrop-blur-sm rounded-xl font-semibold text-sm">
View Team Stats
</button>
</div>
</div>
</div>
);
const NavBar = ({ currentScreen, setCurrentScreen }) => (
<div className="bg-white/80 backdrop-blur-2xl border-t border-gray-200/50 px-6 py-3">
<div className="flex justify-around items-center">
<button
onClick={() => setCurrentScreen('home')}
className="flex flex-col items-center gap-1"
>
<div className={`w-11 h-11 rounded-2xl flex items-center justify-center ${
currentScreen === 'home' ? 'bg-gradient-to-br from-purple-500 to-pink-500' : 'bg-gray-100'
}`}>
<Home size={20} className={currentScreen === 'home' ? 'text-white' : 'text-gray-500'} />
</div>
<span className={`text-xs font-medium ${currentScreen === 'home' ? 'text-purple-600 font-bold' : 'text-gray-500'}`}>Home</span>
</button>
<button
onClick={() => setCurrentScreen('photos')}
className="flex flex-col items-center gap-1"
>
<div className={`w-11 h-11 rounded-2xl flex items-center justify-center ${
currentScreen === 'photos' ? 'bg-gradient-to-br from-indigo-500 to-purple-600' : 'bg-gray-100'
}`}>
<Camera size={20} className={currentScreen === 'photos' ? 'text-white' : 'text-gray-500'} />
</div>
<span className={`text-xs font-medium ${currentScreen === 'photos' ? 'text-indigo-600 font-bold' : 'text-gray-500'}`}>Photos</span>
</button>
<button
onClick={() => setCurrentScreen('insights')}
className="flex flex-col items-center gap-1"
>
<div className={`w-11 h-11 rounded-2xl flex items-center justify-center ${
currentScreen === 'insights' ? 'bg-gradient-to-br from-blue-500 to-indigo-500' : 'bg-gray-100'
}`}>
<TrendingUp size={20} className={currentScreen === 'insights' ? 'text-white' : 'text-gray-500'} />
</div>
<span className={`text-xs font-medium ${currentScreen === 'insights' ? 'text-blue-600 font-bold' : 'text-gray-500'}`}>Insights</span>
</button>
<button
onClick={() => setCurrentScreen('growth')}
className="flex flex-col items-center gap-1"
>
<div className={`w-11 h-11 rounded-2xl flex items-center justify-center ${
currentScreen === 'growth' ? 'bg-gradient-to-br from-green-500 to-emerald-500' : 'bg-gray-100'
}`}>
<Award size={20} className={currentScreen === 'growth' ? 'text-white' : 'text-gray-500'} />
</div>
<span className={`text-xs font-medium ${currentScreen === 'growth' ? 'text-green-600 font-bold' : 'text-gray-500'}`}>Growth</span>
</button>
<button
onClick={() => setCurrentScreen('profile')}
className="flex flex-col items-center gap-1"
>
<div className={`w-11 h-11 rounded-2xl flex items-center justify-center ${
currentScreen === 'profile' ? 'bg-gradient-to-br from-gray-700 to-gray-900' : 'bg-gray-100'
}`}>
<User size={20} className={currentScreen === 'profile' ? 'text-white' : 'text-gray-500'} />
</div>
<span className={`text-xs font-medium ${currentScreen === 'profile' ? 'text-gray-900 font-bold' : 'text-gray-500'}`}>Profile</span>
</button>
</div>
</div>
);
return (
<div className="max-w-md mx-auto h-screen bg-white flex flex-col relative shadow-2xl">
{currentScreen === 'home' && <HomeScreen />}
{currentScreen === 'feeding' && <FeedingScreen />}
{currentScreen === 'sleep' && <SleepScreen />}
{currentScreen === 'diaper' && <DiaperScreen />}
{currentScreen === 'health' && <HealthScreen />}
{currentScreen === 'photos' && <PhotosScreen />}
{currentScreen === 'insights' && <InsightsScreen />}
{currentScreen === 'growth' && <GrowthScreen />}
{currentScreen === 'caregivers' && <CaregiversScreen />}
{currentScreen === 'profile' && <ProfileScreen />}
{/* Achievement Notification */}
{showAchievementNotif && newAchievement && (
<div className="fixed top-6 left-0 right-0 z-50 flex justify-center px-6 pointer-events-none">
<div className="bg-gradient-to-br from-yellow-400 via-orange-500 to-pink-500 rounded-3xl p-6 shadow-2xl max-w-sm w-full animate-bounce pointer-events-auto">
<div className="flex items-center gap-4">
<div className="w-16 h-16 rounded-2xl bg-white/20 backdrop-blur-sm flex items-center justify-center text-4xl">
{newAchievement.icon}
</div>
<div className="flex-1">
<p className="text-sm font-semibold text-white/90 mb-1">🎉 Achievement Unlocked!</p>
<p className="text-xl font-bold text-white mb-1">{newAchievement.name}</p>
<p className="text-sm text-white/80">{newAchievement.description}</p>
</div>
<button
onClick={() => setShowAchievementNotif(false)}
className="w-8 h-8 rounded-lg bg-white/20 flex items-center justify-center"
>
<X size={16} className="text-white" />
</button>
</div>
</div>
</div>
)}
{showVoiceModal && (
<div className="fixed inset-0 bg-black/60 backdrop-blur-md z-50 flex items-center justify-center p-6">
<div className="bg-white rounded-3xl p-8 max-w-sm w-full shadow-2xl">
<div className="text-center">
<div className="w-32 h-32 mx-auto mb-6 rounded-full bg-gradient-to-br from-green-400 to-emerald-500 flex items-center justify-center">
<Mic size={48} className="text-white" />
</div>
<h3 className="text-2xl font-bold text-gray-900 mb-2">Listening...</h3>
<p className="text-gray-600 mb-6">Say your command now</p>
<button
onClick={() => setShowVoiceModal(false)}
className="w-full py-4 rounded-2xl bg-gradient-to-r from-red-500 to-red-600 text-white font-bold shadow-lg"
>
Stop Listening
</button>
</div>
</div>
</div>
)}
{showPhotoModal && (
<div className="fixed inset-0 bg-black/60 backdrop-blur-md z-50 flex items-center justify-center p-6">
<div className="bg-white rounded-3xl p-8 max-w-sm w-full shadow-2xl">
<div className="flex items-center justify-between mb-6">
<h3 className="text-2xl font-bold text-gray-900">Add Photo</h3>
<button
onClick={() => setShowPhotoModal(false)}
className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center"
>
<X size={20} className="text-gray-600" />
</button>
</div>
<div className="mb-6">
<div className="aspect-square rounded-2xl bg-gradient-to-br from-indigo-100 to-purple-200 flex flex-col items-center justify-center text-6xl mb-4 border-2 border-dashed border-indigo-300">
<Camera size={48} className="text-indigo-400 mb-2" />
<p className="text-sm font-semibold text-indigo-600">Tap to capture</p>
</div>
<input
type="text"
placeholder="Add a caption..."
className="w-full px-4 py-3 rounded-xl bg-gray-50 border-2 border-gray-200 focus:border-indigo-500 outline-none font-medium"
/>
</div>
<div className="grid grid-cols-3 gap-2 mb-6">
<button className="py-2 px-3 rounded-xl bg-purple-100 text-purple-700 font-semibold text-xs">
🏆 Milestone
</button>
<button className="py-2 px-3 rounded-xl bg-emerald-100 text-emerald-700 font-semibold text-xs">
🍼 Feeding
</button>
<button className="py-2 px-3 rounded-xl bg-blue-100 text-blue-700 font-semibold text-xs">
⚡ Activity
</button>
</div>
<div className="flex gap-3">
<button
onClick={() => setShowPhotoModal(false)}
className="flex-1 py-3 rounded-xl bg-gray-100 text-gray-700 font-bold"
>
Cancel
</button>
<button
onClick={() => {
setShowPhotoModal(false);
}}
className="flex-1 py-3 rounded-xl bg-gradient-to-r from-indigo-500 to-purple-600 text-white font-bold shadow-lg"
>
Save Photo
</button>
</div>
</div>
</div>
)}
{showCaregiverModal && (
<div className="fixed inset-0 bg-black/60 backdrop-blur-md z-50 flex items-center justify-center p-6">
<div className="bg-white rounded-3xl p-8 max-w-sm w-full shadow-2xl">
<div className="flex items-center justify-between mb-6">
<h3 className="text-2xl font-bold text-gray-900">Invite Caregiver</h3>
<button
onClick={() => setShowCaregiverModal(false)}
className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center"
>
<X size={20} className="text-gray-600" />
</button>
</div>
<div className="mb-6 space-y-4">
<div>
<label className="block text-sm font-semibold text-gray-700 mb-2">Email Address</label>
<input
type="email"
placeholder="[email protected]"
className="w-full px-4 py-3 rounded-xl bg-gray-50 border-2 border-gray-200 focus:border-blue-500 outline-none font-medium"
/>
</div>
<div>
<label className="block text-sm font-semibold text-gray-700 mb-2">Role</label>
<select className="w-full px-4 py-3 rounded-xl bg-gray-50 border-2 border-gray-200 focus:border-blue-500 outline-none font-medium">
<option>Mom</option>
<option>Dad</option>
<option>Grandparent</option>
<option>Nanny</option>
<option>Babysitter</option>
<option>Other</option>
</select>
</div>
<div>
<label className="block text-sm font-semibold text-gray-700 mb-2">Permissions</label>
<div className="space-y-2">
<button className="w-full p-3 rounded-xl bg-blue-50 border-2 border-blue-500 text-left">
<p className="font-bold text-gray-900">Full Access</p>
<p className="text-xs text-gray-600">Can add, edit, and delete entries</p>
</button>
<button className="w-full p-3 rounded-xl bg-gray-50 border-2 border-gray-200 text-left">
<p className="font-bold text-gray-900">View Only</p>
<p className="text-xs text-gray-600">Can only view data</p>
</button>
</div>
</div>
</div>
<div className="flex gap-3">
<button
onClick={() => setShowCaregiverModal(false)}
className="flex-1 py-3 rounded-xl bg-gray-100 text-gray-700 font-bold"
>
Cancel
</button>
<button
onClick={() => {
setShowCaregiverModal(false);
}}
className="flex-1 py-3 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-bold shadow-lg"
>
Send Invite
</button>
</div>
</div>
</div>
)}
{showHandoffModal && (
<div className="fixed inset-0 bg-black/60 backdrop-blur-md z-50 flex items-center justify-center p-6">
<div className="bg-white rounded-3xl p-8 max-w-sm w-full shadow-2xl max-h-[80vh] overflow-y-auto">
<div className="flex items-center justify-between mb-6">
<h3 className="text-2xl font-bold text-gray-900">Handoff Notes</h3>
<button
onClick={() => setShowHandoffModal(false)}
className="w-10 h-10 rounded-xl bg-gray-100 flex items-center justify-center"
>
<X size={20} className="text-gray-600" />
</button>
</div>
{/* Previous Handoff Notes */}
<div className="mb-6">
<p className="text-sm font-bold text-gray-700 mb-3">Previous Notes</p>
<div className="space-y-3">
{handoffNotes.map(note => (
<div
key={note.id}
className="p-4 bg-blue-50 border border-blue-200 rounded-xl"
>
<div className="flex items-center justify-between mb-2">
<p className="text-xs font-semibold text-gray-600">
{note.from} → {note.to}
</p>
<p className="text-xs text-gray-500">{note.time}</p>
</div>
<p className="text-sm text-gray-900">{note.message}</p>
</div>
))}
</div>
</div>
{/* New Note */}
<div className="mb-6">
<label className="block text-sm font-bold text-gray-700 mb-2">Leave a Note</label>
<textarea
value={newHandoffNote}
onChange={(e) => setNewHandoffNote(e.target.value)}
placeholder="What should the next caregiver know?"
className="w-full px-4 py-3 rounded-xl bg-gray-50 border-2 border-gray-200 focus:border-blue-500 outline-none font-medium resize-none"
rows={4}
/>
<select className="w-full mt-3 px-4 py-3 rounded-xl bg-gray-50 border-2 border-gray-200 focus:border-blue-500 outline-none font-medium">
<option>Send to: Mike Johnson</option>
<option>Send to: Linda Smith</option>
<option>Send to: Maria Garcia</option>
<option>Send to: Everyone</option>
</select>
</div>
<button
onClick={() => {
setNewHandoffNote('');
setShowHandoffModal(false);
}}
className="w-full py-3 rounded-xl bg-gradient-to-r from-blue-500 to-indigo-600 text-white font-bold shadow-lg flex items-center justify-center gap-2"
>
<Send size={18} />
Send Note
</button>
</div>
</div>
)}
{showChildSelector && (
<div className="fixed inset-0 bg-black/40 backdrop-blur-sm z-50 flex items-end">
<div className="w-full bg-white rounded-t-3xl p-6">
<div className="w-12 h-1.5 bg-gray-300 rounded-full mx-auto mb-6"></div>
<h3 className="text-xl font-bold text-gray-900 mb-6">Switch Child</h3>
<div className="space-y-3 mb-6">
{children.map(child => (
<button
key={child.id}
onClick={() => {
setSelectedChild(child.id);
setShowChildSelector(false);
}}
className={`w-full flex items-center gap-4 p-4 rounded-2xl transition-all ${
child.id === selectedChild
? 'bg-gradient-to-r ' + child.color + ' shadow-lg'
: 'bg-gray-50'
}`}
>
<span className="text-4xl">{child.avatar}</span>
<div className="flex-1 text-left">
<p className={`font-bold text-lg ${child.id === selectedChild ? 'text-white' : 'text-gray-900'}`}>
{child.name}
</p>
<p className={`text-sm ${child.id === selectedChild ? 'text-white/80' : 'text-gray-500'}`}>
{child.age}
</p>
</div>
{child.id === selectedChild && (
<CheckCircle className="text-white" size={24} />
)}
</button>
))}
</div>
<button
onClick={() => setShowChildSelector(false)}
className="w-full py-3 text-center text-gray-600 font-medium"
>
Cancel
</button>
</div>
</div>
)}
</div>
);
}
export default ModernBabyTracker;Editor is loading...
Leave a Comment