Comunidad Bahá'í — PWA

PWA móvil para la Comunidad Bahá'í: centro de comunicados, actividades, materiales de estudio, metas, servicio y tesorería. 10 pantallas siguiendo el diseño del handoff (handoff/Comunidad Bahai/design_handoff_comunidad_bahai).

Stack: Next.js 14 (App Router) · React 18 · TypeScript · Tailwind CSS · Supabase (Auth + Postgres + Realtime + Storage) · @ducanh2912/next-pwa (service worker / installable PWA).

---

Requisitos

• Node.js 18.17+ (recomendado 20 LTS). Si no lo tienes instalado:

  • winget install OpenJS.NodeJS.LTS (Windows)
  • o descarga desde https://nodejs.org

• Una cuenta Supabase gratis (opcional para correr la demo).

---

Arranque rápido

# 1) Instalar dependencias
npm install

# 2) (opcional) Configurar Supabase — la app corre con datos demo si no lo haces
cp .env.example .env.local        # PowerShell: copy .env.example .env.local
# edita .env.local y rellena las dos variables de Supabase

# 3) Servidor de desarrollo
npm run dev
# abre http://localhost:3000

Sin variables de Supabase, todas las pantallas se renderizan con los datos de demostración de lib/seed-data.ts (mismo contenido que el prototipo del handoff). Esto te permite ver y maquetar todo el flujo sin backend.

---

Dos apps en un solo proyecto

URL	Para quién	Datos
/ y subrutas	Miembros — PWA móvil con las 10 pantallas del handoff	Lee Supabase, cae a datos demo si no está configurado
/admin/*	Asamblea Local — panel responsive (laptop + móvil)	Requiere Supabase real. Protegido por middleware con verificación de rol
/login	Puerta única de entrada (Google OAuth + magic link). /admin/login redirige aquí	Recibe enlace por email

Login unificado: hay una sola puerta (/login). Los admins también son miembros, así que tras autenticar aterrizan en la app de comunidad y entran al panel desde un acceso en su perfil (/admin). La vieja URL /admin/login se conserva pero solo redirige a /login.

El acceso a /admin/* se valida en dos capas:

• Middleware (middleware.ts): sin sesión redirige a /login?next=; si está logueado pero el perfil no es admin, lo manda a / (su app de comunidad).
• Server components (requireAdmin, ensureChatTag, ensureTreasuryTag en lib/auth.ts): validan permisos finos en cada página.

Estructura

app/
  layout.tsx                 # raíz: fuentes + metadata PWA
  manifest.ts                # /manifest.webmanifest (Next.js)
  icon.svg                   # favicon
  globals.css                # Tailwind + shell mobile
  (app)/
    layout.tsx               # shell con TabBar
    page.tsx                 # Home
    mensajes/page.tsx        # Casa Universal de Justicia
    chat/page.tsx + chat-screen.tsx   # Secretaría Local (cliente)
    actividades/page.tsx
    calendario/page.tsx
    materiales/page.tsx      # Ruhí + Escritos
    metas/page.tsx           # Stats + barras de progreso
    servicio/page.tsx        # Necesidades + voluntariado
    tesoreria/page.tsx       # Ring SVG + informe
    mas/page.tsx             # Menú secundario

components/
  BahaiStar.tsx              # Estrella de 9 puntas
  GoldHeader.tsx             # Header dorado compartido
  TabBar.tsx                 # Barra inferior con estado activo
  Icons.tsx                  # Iconos stroke 24×24
  home/                      # Tarjetas exclusivas de Home

app/admin/
  login/                     # Magic-link form (público, fuera del shell)
  (panel)/
    layout.tsx               # Shell admin (sidebar + drawer) + requireAdmin()
    page.tsx                 # Dashboard con KPIs y atajos
    mensajes/                # CRUD Mensajes (Casa Universal)
    actividades/             # CRUD Actividades
    calendario/              # CRUD Eventos de calendario
    materiales/              # CRUD Ruhí + Escritos + Oraciones
    metas/                   # CRUD Metas de enseñanza
    servicio/                # CRUD Necesidades + lista de voluntarios
    chat/                    # (requiere can_respond_chat) lista + conversación
    tesoreria/               # (requiere can_manage_treasury) edición completa
    miembros/                # Gestión de roles y tags

app/auth/
  callback/route.ts          # Intercambio de código mágico → sesión
  signout/route.ts           # POST /auth/signout

components/admin/
  AdminShell.tsx             # Layout responsive (sidebar md+ / drawer mobile)
  Sidebar.tsx                # Navegación + tarjeta de sesión
  ui.tsx                     # PageHeader, Card, Button, Field, DataTable, Banner

lib/
  tokens.ts                  # Colores (hex) para usos inline (SVG, gradientes)
  format.ts                  # Fechas y horas en español
  types.ts                   # Tipos compartidos (incluye Profile)
  seed-data.ts               # Datos demo (también se inserta en Supabase)
  data.ts                    # Capa de acceso: Supabase con fallback a seed
  auth.ts                    # requireAdmin / ensureChatTag / ensureTreasuryTag
  supabase/
    client.ts                # createBrowserClient
    server.ts                # createServerClient + cookies
    middleware.ts            # updateSession para middleware.ts

middleware.ts                # Protege /admin/* y refresca sesión

supabase/
  schema.sql                 # Tablas + RLS (perfiles, mensajes, actividades,
                             # calendario, materiales, metas, servicio,
                             # tesorería, chat)
  seed.sql                   # Datos de ejemplo equivalentes a seed-data.ts

scripts/
  generate-icons.ps1         # Regenera los íconos PWA (192/512/maskable)

public/icons/                # Íconos PWA generados (no commiteado por defecto)

---

Configuración de Supabase

1. Crea un proyecto en https://app.supabase.com.
2. Project Settings → API: copia URL y anon public key a .env.local:

여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗