🏕️ Plan Familiar — Viaje Día del Padre

Dashboard React + Supabase para planificar el viaje familiar.

---

🚀 Setup en 5 pasos

1. Crear proyecto en Supabase

1. Ve a https://supabase.com y crea una cuenta gratuita
2. Clic en New Project → ponle nombre (ej: viaje-familia)
3. Elige región más cercana (South America - São Paulo)
4. Espera que termine de provisionar (~2 min)

2. Ejecutar el schema SQL

1. En tu proyecto Supabase → SQL Editor (panel izquierdo)
2. Clic en New query
3. Copia y pega TODO el contenido de supabase_schema.sql
4. Clic en Run ▶
5. Verás mensaje: "Success. No rows returned"

3. Obtener credenciales

1. En Supabase → Settings → API
2. Copia:
   • Project URL → algo como https://abcdefgh.supabase.co
   • anon public key → cadena larga de caracteres

4. Configurar variables de entorno

# En la carpeta del proyecto:
cp .env.example .env

Edita .env y pega tus credenciales:

REACT_APP_SUPABASE_URL=https://TU_PROYECTO.supabase.co
REACT_APP_SUPABASE_ANON_KEY=tu_anon_key_aqui

5. Instalar y correr

npm install
npm start

¡Abre http://localhost:3000 🎉

---

📁 Estructura del proyecto

src/
├── lib/
│   ├── supabase.js       # Cliente Supabase
│   └── constants.js      # Colores, categorías, helpers
├── hooks/
│   └── useItems.js       # CRUD + Realtime (Supabase)
├── components/
│   ├── Hero.js            # Header con barra de progreso
│   ├── SummaryCards.js    # Tarjetas de resumen
│   ├── AlertsSection.js   # Alertas automáticas
│   ├── ItemsTable.js      # Tabla con filtros y búsqueda
│   ├── ItemModal.js       # Modal crear/editar ítem
│   ├── PersonCards.js     # ¿Quién trae qué?
│   ├── ChartsSection.js   # 4 gráficos con Chart.js
│   └── Checklist.js       # Checklist interactivo
├── App.js                 # Navegación + layout principal
├── index.js
└── index.css

---

✨ Funcionalidades

Feature	Descripción
📊 Dashboard	KPIs, progreso, totales
📋 Tabla	Buscar, filtrar, ordenar por precio
✏️ CRUD	Agregar, editar, eliminar ítems
🔄 Toggle estado	Click para cambiar ✅/⏳/❓
👥 Personas	Vista por responsable
📈 Gráficos	Categorías, personas, estados, top precios
✅ Checklist	Marcar ítems como listos
⚡ Realtime	Sincronización automática entre dispositivos
🚨 Alertas	Ítems sin responsable, pendientes, sin precio

---

🌐 Deploy en Vercel (opcional)

npm install -g vercel
vercel
# Agrega las env vars en el dashboard de Vercel

---

🔧 Personalización

Cambiar fecha/lugar del viaje

Edita src/components/Hero.js → chips de fecha y destino.

Agregar categorías

Edita src/lib/constants.js → array CATEGORIAS y objeto CAT_COLORS.

Habilitar autenticación (producción)

En Supabase → Authentication → habilitar email/password. Luego editar la política RLS en supabase_schema.sql:

-- Cambiar la política pública por una que requiera auth:
DROP POLICY "public_access" ON viaje_items;
CREATE POLICY "auth_access" ON viaje_items
  FOR ALL USING (auth.role() = 'authenticated');