{title}

{subtitle &&

{subtitle}

}
); } function StatCard({ icon: Icon, label, value }) { return (

{label}

{value}

 ); } export default function Familia360App() { const [activeTab, setActiveTab] = useState("home"); const [groceries, setGroceries] = useState(initialGroceries); const [tasks, setTasks] = useState(initialTasks); const [newItem, setNewItem] = useState(""); const [newTask, setNewTask] = useState(""); const totalExpenses = useMemo(() => expenses.reduce((sum, item) => sum + item.amount, 0), []); const completedTasks = tasks.filter((task) => task.done).length; const pendingGroceries = groceries.filter((item) => !item.done).length; const toggleGrocery = (id) => { setGroceries((items) => items.map((item) => (item.id === id ? { ...item, done: !item.done } : item))); }; const addGrocery = () => { if (!newItem.trim()) return; setGroceries((items) => [ ...items, { id: Date.now(), item: newItem.trim(), addedBy: "Andrés", done: false }, ]); setNewItem(""); }; const toggleTask = (id) => { setTasks((items) => items.map((task) => (task.id === id ? { ...task, done: !task.done } : task))); }; const addTask = () => { if (!newTask.trim()) return; setTasks((items) => [ ...items, { id: Date.now(), task: newTask.trim(), assignedTo: "Francisco", points: 5, done: false }, ]); setNewTask(""); }; const tabs = [ { id: "home", label: "Inicio", icon: Home }, { id: "calendar", label: "Calendario", icon: CalendarDays }, { id: "shopping", label: "Compras", icon: ShoppingCart }, { id: "tasks", label: "Tareas", icon: CheckSquare }, { id: "expenses", label: "Gastos", icon: Wallet }, { id: "location", label: "Ubicación", icon: MapPin }, ]; return (
F360

Familia360

Organización, seguridad e IA para la familia

{activeTab === "home" && (

Hace 2 semanas no compran leche.

¿Quieres agregarla automáticamente a la lista del supermercado?

Mañana vence el pago de electricidad.

También puedes activar recordatorios familiares.

Francisco completó 1 de 2 tareas esta semana.

Le faltan 5 puntos para su recompensa.
{familyMembers.map((member) => (

{member.name}

{member.role}

{member.status}
))}
{initialEvents.map((event) => (

{event.title}

{event.time} • {event.type}

))}
{familyMembers.map((member) => (
{member.name} {member.points} pts
))}
)} {activeTab === "calendar" && (
{initialEvents.map((event) => (

{event.title}

{event.time}

{event.type}
))}
)} {activeTab === "shopping" && (
setNewItem(e.target.value)} placeholder="Agregar producto..." className="flex-1 px-4 py-3 rounded-2xl border outline-none focus:ring-2 focus:ring-slate-300" />
{groceries.map((item) => (
))}
)} {activeTab === "tasks" && (
setNewTask(e.target.value)} placeholder="Agregar tarea..." className="flex-1 px-4 py-3 rounded-2xl border outline-none focus:ring-2 focus:ring-slate-300" />
{tasks.map((task) => (
{task.done ? "Completada" : "Pendiente"}
))}

Tareas completadas: {completedTasks}/{tasks.length}

 )} {activeTab === "expenses" && (
${totalExpenses.toLocaleString()}
{expenses.map((expense) => (

{expense.name}

{expense.category}

${expense.amount}

))}
)} {activeTab === "location" && (

Mapa familiar en tiempo real

Aquí se integraría Google Maps, Mapbox o Apple Maps.

{familyMembers.map((member) => (

{member.name}

{member.status}

))}
)}
); }