diff --git a/README.md b/README.md index 2208fbc..a89d6d6 100644 --- a/README.md +++ b/README.md @@ -240,17 +240,8 @@ El sitio estará disponible en **http://localhost:2311** - ✅ Sistema de disponibilidad (staff, recursos, bloques) - ✅ API routes de disponibilidad - ✅ API de reservas para clientes (POST/GET) -- ✅ HQ Dashboard (Aperture) con gestión de staff y recursos -- ✅ Reportes de ventas, pagos y nómina -- ✅ Gestión de permisos por roles -- ✅ Integración con Stripe para pagos y depósitos -- ✅ Autenticación completa (clientes con magic links, staff/admin) -- ✅ The Boutique - Frontend de reservas completo - - Página de selección de servicios (/booking/servicios) - - Página de confirmación de reserva (/booking/cita) - - API para obtener servicios (/api/services) - - API para obtener ubicaciones (/api/locations) - - Configuración de dominios wildcard en producción +- ✅ HQ Dashboard básico (Aperture) - EXISTE pero incompleto +- ✅ API routes básicos para Aperture (dashboard, staff, resources, reports, permissions) - ✅ Frontend institucional anchor23.mx completo - Landing page con hero, fundamento, servicios, testimoniales - Página de servicios @@ -262,15 +253,46 @@ El sitio estará disponible en **http://localhost:2311** - Header y footer globales ### En Progreso 🚧 +- 🚧 The Boutique - Frontend de reservas (booking.anchor23.mx) - 90% + - ✅ Página de selección de servicios (/booking/servicios) + - ✅ Página de búsqueda de clientes (/booking/cita - paso 1) + - ✅ Página de registro de clientes (/booking/registro) + - ✅ Página de confirmación de reserva (/booking/cita - pasos 2-3) + - ✅ Página de confirmación por código (/booking/confirmacion) + - ✅ Layout específico con navbar personalizado + - ✅ API para obtener servicios (/api/services) + - ✅ API para obtener ubicaciones (/api/locations) + - ✅ API para buscar clientes (/api/customers - GET) + - ✅ API para registrar clientes (/api/customers - POST) + - ✅ Sistema de horarios de negocio por ubicación + - ✅ Componente de pagos mock para pruebas + - ⏳ Configuración de dominios wildcard en producción + - ⏳ Integración con Stripe real (webhooks) + +- 🚧 Aperture - Backend para staff/manager/admin (aperture.anchor23.mx) - 40% + - ✅ API para obtener staff disponible (/api/aperture/staff) + - ✅ API para gestión de horarios (/api/aperture/staff/schedule) + - ✅ API para recursos (/api/aperture/resources) + - ✅ API para dashboard (/api/aperture/dashboard) + - ✅ Página principal de admin (/aperture) + - ❌ API para estadísticas (/api/aperture/stats) - FALTA IMPLEMENTAR + - ❌ Reseteo semanal de invitaciones (documentado, NO implementado) + - ⏳ Autenticación de admin/staff/manager (login existe, needs Supabase Auth) + - ⏳ Gestión completa de staff (CRUD, horarios) + - ⏳ Gestión de recursos y asignación + - ⏳ Rediseño con estilo Square UI + - 🚧 Lógica de no-show y penalizaciones automáticas -- 🚧 Integración con Google Calendar +- 🚧 Integración con Google Calendar (20% - en progreso) ### Pendiente ⏳ - ⏳ Implementar API pública (api.anchor23.mx) +- ⏳ Completar Aperture con estilo Square UI (calendario multi-columna, páginas individuales, The Vault) - ⏳ Notificaciones por WhatsApp - ⏳ Recibos digitales por email - ⏳ Landing page para believers (booking público) -- ⏳ The Vault (storage de fotos privadas) +- ⏳ Tests unitarios +- ⏳ Archivos SEO (robots.txt, sitemap.xml) ### Fase Actual **Fase 1 — Cimientos y CRM**: 100% completado @@ -295,6 +317,18 @@ El sitio estará disponible en **http://localhost:2311** - Stripe depósitos dinámicos: 100% - No-show logic: 40% (lógica implementada, automatización pendiente) +**Fase 4 — HQ Dashboard**: 10% completado +- Aperture dashboard básico: 100% (existe pero incompleto) +- Autenticación staff/admin: 40% (página login existe, needs Supabase Auth integration) +- Calendario Multi-Columna: 0% (pendiente) +- Gestión Operativa: 20% (APIs existentes, UI incompleta) +- The Vault: 0% (pendiente) + +**Fase 5 — Automatización y Lanzamiento**: 5% completado +- Notificaciones WhatsApp: 0% (variables configuradas, no implementado) +- Recibos digitales: 0% (pendiente) +- Landing page Believers: 0% (pendiente) + **Advertencia:** No apto para producción. Migraciones y seeds en evolución. --- diff --git a/TASKS.md b/TASKS.md index 334feb2..edb451d 100644 --- a/TASKS.md +++ b/TASKS.md @@ -463,7 +463,7 @@ Validación Staff (rol Staff): - Sistema de disponibilidad (staff, recursos, bloques) - API routes de disponibilidad - API de reservas para clientes (POST/GET) -- HQ Dashboard con calendario multi-columna +- HQ Dashboard básico (Aperture) - EXISTE pero incompleto - Frontend institucional anchor23.mx completo - Landing page con hero, fundamento, servicios, testimoniales - Página de servicios @@ -497,8 +497,9 @@ Validación Staff (rol Staff): - ✅ API para recursos (/api/aperture/resources) - ✅ API para dashboard (/api/aperture/dashboard) - ✅ Página principal de admin (/aperture) - - ⏳ Autenticación de admin/staff/manager - - ⏳ Gestión completa de staff + - ❌ API para estadísticas (/api/aperture/stats) - FALTA IMPLEMENTAR + - ⏳ Autenticación de admin/staff/manager (login existe, needs Supabase Auth) + - ⏳ Gestión completa de staff (CRUD, horarios) - ⏳ Gestión de recursos y asignación ### ⏳ Pendiente @@ -514,54 +515,121 @@ Validación Staff (rol Staff): --- -## PRÓXIMAS TARES PRIORITARIAS +## PRÓXIMAS TAREAS PRIORITARIAS -### Prioridad Alta - Esta Semana (Timeline: 7 días) +### 🔴 CRÍTICO - Bloquea Funcionamiento (Timeline: 1-2 días) -1. **Terminar The Boutique (booking.anchor23.mx)** - 3-4 días - - Implementar autenticación de clientes (depende de: Supabase Auth configurado) - - Completar flujo de reserva (depende de: auth implementado) - - Integrar con sistema de pagos (Stripe) (depende de: webhooks Stripe) - - Testing completo del flujo (depende de: integración completa) +1. **Implementar `GET /api/aperture/stats`** - ~30 min + - Dashboard de Aperture espera este endpoint + - Sin esto, estadísticas no se cargan + - Respuesta esperada: `{ success: true, stats: { totalBookings, totalRevenue, completedToday, upcomingToday } }` + - Ubicación: `app/api/aperture/stats/route.ts` -2. **Completar Aperture (aperture.anchor23.mx)** - 4-5 días - - Implementar autenticación de admin/staff/manager (depende de: Supabase Auth) - - Gestión completa de staff (CRUD, horarios) (depende de: auth implementado, APIs existentes) - - Gestión de recursos y asignación (depende de: staff gestión) - - Dashboard operativo completo (depende de: gestión implementada) - - Testing de APIs (depende de: todas las funciones) +2. **Implementar autenticación para Aperture** - ~2-3 horas + - Integración con Supabase Auth para roles admin/manager/staff + - Protección de rutas de Aperture (middleware) + - Session management + - Página login ya existe en `/app/aperture/login/page.tsx`, needs Supabase Auth integration -3. **Configurar Kioskos en Producción** - 1-2 días - - Crear kioskos para cada location (depende de: migraciones en prod) - - Configurar API keys en variables de entorno (depende de: env setup) - - Probar acceso desde pantalla táctil (depende de: kioskos creados) - - Usar el sistema de enrollment en `/admin/enrollment` (depende de: admin auth) +3. **Implementar reseteo semanal de invitaciones** - ~2-3 horas + - Script/Edge Function que se ejecuta cada Lunes 00:00 UTC + - Resetea `weekly_invitations_used` a 0 para todos los clientes Tier Gold + - Registra acción en `audit_logs` + - Documentado en TASKS.md línea 211 pero NO implementado + - Impacto: Membresías Gold no funcionan correctamente sin esto -### Prioridad Media - Próximas 2 Semanas (Timeline: 14 días) +### 🟡 ALTA - Documentación y Diseño (Timeline: 1 semana) -4. **Implementar API Pública (api.anchor23.mx)** - 3-4 días - - Horarios de operación públicos (depende de: locations table) - - Lista de servicios disponibles (depende de: services table, RLS público) - - Ubicaciones y contacto (depende de: locations table) - - Información sin datos sensibles (depende de: RLS configurado) +4. **Actualizar documentación con especificaciones técnicas completas** - ~4 horas + - Crear documento de especificaciones técnicas (`docs/APERATURE_SPECS.md`) + - Documentar respuesta a horas trabajadas (automático desde bookings) + - Definir estructura de POS completa + - Documentar sistema de múltiples cajeros -5. **Sistema de Autenticación Completo** - 5-7 días - - Supabase Auth para staff/admin (depende de: roles configurados) - - Perfiles de cliente en The Boutique (depende de: auth cliente) - - Gestión de sesiones (depende de: Supabase Auth completo) +5. **Actualizar APERTURE_SQUARE_UI.md con Radix UI** - ~1.5 horas + - Agregar sección "Stack Técnico" + - Documentar componentes Radix UI específicos + - Ejemplos de uso de Radix con estilizado Square UI + - Guía de accesibilidad Radix (ARIA attributes, keyboard navigation) -6. **Integración con Stripe** - 4-5 días - - Webhooks para pagos (depende de: Stripe account, endpoints) - - Depósitos dinámicos ($200 vs 50%) (depende de: webhooks) - - Lógica de no-show y penalizaciones (depende de: webhooks, bookings logic) +6. **Actualizar API.md con rutas implementadas** - ~1 hora + - Rutas a agregar que existen pero NO están en API.md: + - `GET /api/availability/blocks` + - `GET /api/public/availability` + - `POST /api/availability/staff` + - `POST /api/kiosk/walkin` -### Prioridad Baja - Próximo Mes (Timeline: 30 días) +### 🟢 MEDIA - Componentes y Features (Timeline: 6-8 semanas) -7. **Documentar nuevos endpoints y configuración** - 7-10 días - - API docs para aperture.anchor23.mx (depende de: APIs completas) - - API docs para api.anchor23.mx (depende de: API pública implementada) - - Configuración de dominios wildcard (depende de: dominio setup) - - Guías de despliegue y testing (depende de: sistema completo) +7. **Rediseñar Aperture completo con Radix UI** - ~136-171 horas + - **FASE 0**: Documentación y Configuración (~6 horas) + - **FASE 1**: Componentes Base con Radix UI (~20-25 horas) + - Instalar Radix UI + - Crear/actualizar componentes base (Button, Card, Input, Select, Tabs, etc.) + - Crear componentes específicos de Aperture (StatsCard, BookingCard, etc.) + - **FASE 2**: Dashboard Home (~15-20 horas) + - KPI Cards (Ventas, Citas, Clientes, Gráfico) + - Tabla "Top Performers" + - Feed de Actividad Reciente + - API: `/api/aperture/stats` + - **FASE 3**: Calendario Maestro (~25-30 horas) + - Columnas por trabajador, Drag & Drop, Resize de bloques + - Filtros dinámicos (Sucursal, Staff) + - Indicadores visuales (línea tiempo, bloqueos, tooltips) + - APIs: `/api/aperture/calendar`, `/api/aperture/bookings/[id]/reschedule` + - **FASE 4**: Miembros del Equipo y Nómina (~20-25 horas) + - Gestión de Staff (CRUD completo con foto, rating, toggle activo) + - Configuración de Comisiones (% por servicio y producto) + - Cálculo de Nómina (Sueldo Base + Comisiones + Propinas) + - Calendario de Turnos (vista semanal) + - APIs: `/api/aperture/staff` (PATCH, DELETE), `/api/aperture/payroll` + - **FASE 5**: Clientes y Fidelización (Loyalty) (~20-25 horas) + - CRM de Clientes (búsqueda fonética, histórico, notas técnicas) + - Galería de Fotos (SOLO VIP/Black/Gold) - Good to have: control de calidad, rastreabilidad de quejas + - Sistema de Membresías (planes, créditos) + - Sistema de Puntos (independiente de tiers, expiran después de X meses sin usar) + - APIs: `/api/aperture/clients`, `/api/aperture/loyalty` + - **FASE 6**: Ventas, Pagos y Facturación (~20-25 horas) + - POS (Punto de Venta) completo (puede crear nuevas citas + procesar pagos) + - NO imprimir recibos (enviar email o dashboard cliente) + - Cierre de Caja (resumen diario, PDF automático) + - Finanzas (gastos, margen neto) + - APIs: `/api/aperture/pos`, `/api/aperture/finance` + - **FASE 7**: Marketing y Configuración (~10-15 horas) + - Campañas (promociones masivas Email/WhatsApp) + - Precios Inteligentes (configurables por servicio, aplicables ambos canales) + - Integraciones Placeholder (Google, Instagram/FB Shopping) - Good to have, no priority + - APIs: `/api/aperture/campaigns`, `/api/aperture/pricing`, `/api/aperture/integrations` + +### 🟢 BAJA - Integraciones Pendientes (Timeline: 1-2 meses) + +8. **Implementar Google Calendar Sync** - ~6-8 horas + - Sincronización bidireccional + - Manejo de conflictos + - Webhook para updates de calendar + +9. **Implementar Notificaciones WhatsApp** - ~4-6 horas + - Integración con Twilio/Meta WhatsApp API + - Templates de mensajes (confirmación, recordatorios, alertas no-show) + - Sistema de envío programado + +10. **Implementar Recibos digitales** - ~3-4 horas + - Generador de PDFs + - Sistema de emails (SendGrid, AWS SES, etc.) + - Dashboard de transacciones + +11. **Crear Landing page Believers** - ~4-5 horas + - Página pública de booking + - Calendario simplificado para clientes + - Captura de datos básicos + +12. **Implementar Tests Unitarios** - ~5-7 horas + - Unit tests para generador de Short ID + - Tests para disponibilidad + +13. **Archivos SEO** - ~30 min + - `public/robots.txt` + - `public/sitemap.xml` --- diff --git a/docs/APERTURE_SQUARE_UI.md b/docs/APERTURE_SQUARE_UI.md new file mode 100644 index 0000000..ad5652a --- /dev/null +++ b/docs/APERTURE_SQUARE_UI.md @@ -0,0 +1,541 @@ +# Aperture Design System - Square UI Style + +**Documento de estilo de diseño para Aperture (HQ Dashboard)** +**Última actualización: Enero 2026** + +--- + +## 1. Objetivo + +Aperture (aperture.anchor23.mx) es el dashboard administrativo y CRM interno de AnchorOS. El estilo de diseño debe seguir principios similares a SquareUi: + +- Minimalista y limpio +- Cards bien definidas con sombras sutiles +- Espaciado generoso +- Foco en usabilidad y claridad +- Animaciones sutiles + +--- + +## 2. Paleta de Colores + +### Primarios +```css +--ui-primary: #006AFF; +--ui-primary-hover: #005ED6; +--ui-primary-light: #E6F0FF; +``` + +### Neutros +```css +--ui-bg: #F6F8FA; +--ui-bg-card: #FFFFFF; +--ui-bg-hover: #F3F4F6; + +--ui-border: #E1E4E8; +--ui-border-light: #F3F4F6; +``` + +### Texto +```css +--ui-text-primary: #24292E; +--ui-text-secondary: #586069; +--ui-text-tertiary: #8B949E; +--ui-text-inverse: #FFFFFF; +``` + +### Estados +```css +--ui-success: #28A745; +--ui-success-light: #D4EDDA; + +--ui-warning: #DBAB09; +--ui-warning-light: #FFF3CD; + +--ui-error: #D73A49; +--ui-error-light: #F8D7DA; + +--ui-info: #0366D6; +--ui-info-light: #CCE5FF; +``` + +### Grises Semánticos +```css +--ui-gray-50: #F6F8FA; +--ui-gray-100: #EAECEF; +--ui-gray-200: #D1D5DA; +--ui-gray-300: #B4B9C2; +--ui-gray-400: #8A8A8A; +--ui-gray-500: #586069; +--ui-gray-600: #444C56; +--ui-gray-700: #24292F; +--ui-gray-800: #1F2428; +--ui-gray-900: #0D1117; +``` + +--- + +## 3. Bordes y Radii + +```css +--ui-radius-sm: 4px; +--ui-radius-md: 6px; +--ui-radius-lg: 8px; +--ui-radius-xl: 12px; +--ui-radius-2xl: 16px; +--ui-radius-full: 9999px; +``` + +**Uso recomendado:** +- `md` para inputs y small cards +- `lg` para buttons y medium cards +- `xl` para modals y large cards +- `full` para avatares y badges + +--- + +## 4. Sombras (Elevations) + +```css +--ui-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04), 0 1px 4px rgba(0, 0, 0, 0.04); +--ui-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.1); +--ui-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05); +--ui-shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04); +``` + +**Uso recomendado:** +- `sm` para tooltips y dropdowns +- `md` para cards y modals +- `lg` para sidebars y panels +- `xl` para overlays y fullscreen modals + +--- + +## 5. Tipografía + +### Font Family +```css +--font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; +``` + +### Font Sizes +```css +--text-xs: 0.75rem; /* 12px */ +--text-sm: 0.875rem; /* 14px */ +--text-base: 1rem; /* 16px */ +--text-lg: 1.125rem; /* 18px */ +--text-xl: 1.25rem; /* 20px */ +--text-2xl: 1.5rem; /* 24px */ +--text-3xl: 1.875rem; /* 30px */ +--text-4xl: 2.25rem; /* 36px */ +--text-5xl: 3rem; /* 48px */ +``` + +### Font Weights +```css +--font-normal: 400; +--font-medium: 500; +--font-semibold: 600; +--font-bold: 700; +``` + +### Line Heights +```css +--leading-tight: 1.25; +--leading-normal: 1.5; +--leading-relaxed: 1.75; +``` + +**Uso recomendado:** +- `text-xs` + `font-medium` para labels +- `text-sm` + `font-normal` para body text +- `text-base` + `font-semibold` para headings +- `text-xl` + `font-bold` para page titles +- `text-3xl` + `font-bold` for hero titles + +--- + +## 6. Espaciado (Spacing) + +```css +--space-0: 0; +--space-1: 0.25rem; /* 4px */ +--space-2: 0.5rem; /* 8px */ +--space-3: 0.75rem; /* 12px */ +--space-4: 1rem; /* 16px */ +--space-5: 1.25rem; /* 20px */ +--space-6: 1.5rem; /* 24px */ +--space-8: 2rem; /* 32px */ +--space-10: 2.5rem; /* 40px */ +--space-12: 3rem; /* 48px */ +--space-16: 4rem; /* 64px */ +``` + +**Uso recomendado:** +- `space-2` para padding de inputs +- `space-4` para padding de cards +- `space-6` para gaps en grid +- `space-8` para section padding +- `space-12` para margin entre secciones grandes + +--- + +## 7. Z-Index Layers + +```css +--z-dropdown: 100; +--z-sticky: 200; +--z-fixed: 300; +--z-modal-backdrop: 400; +--z-modal: 500; +--z-popover: 600; +--z-tooltip: 700; +``` + +--- + +## 8. Transiciones y Animaciones + +```css +--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); +--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1); +--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1); +``` + +**Principios:** +- Todas las transiciones deben usar `cubic-bezier(0.4, 0, 0.2, 1)` (ease-out) +- Animaciones de entrada: `fadeIn`, `slideUp`, `scaleIn` +- Animaciones de salida: `fadeOut`, `slideDown`, `scaleOut` +- No usar animaciones llamativas o distractivas + +--- + +## 9. Grid System + +### Breakpoints +```css +--breakpoint-sm: 640px; +--breakpoint-md: 768px; +--breakpoint-lg: 1024px; +--breakpoint-xl: 1280px; +--breakpoint-2xl: 1536px; +``` + +### Columnas +- Mobile: 4 columnas +- Tablet: 8 columnas +- Desktop: 12 columnas + +### Gutter +- Todos los niveles: 16px (1rem) + +--- + +## 10. Estados de Componentes + +### Button States +```css +.btn-primary { + background: var(--ui-primary); + color: var(--ui-text-inverse); + border-radius: var(--ui-radius-lg); + padding: var(--space-2) var(--space-4); + transition: all var(--transition-base); +} + +.btn-primary:hover { + background: var(--ui-primary-hover); + transform: translateY(-1px); +} + +.btn-primary:active { + transform: translateY(0); +} + +.btn-primary:disabled { + background: var(--ui-gray-300); + cursor: not-allowed; + opacity: 0.6; +} +``` + +### Input States +```css +.input { + background: var(--ui-bg-card); + border: 1px solid var(--ui-border); + border-radius: var(--ui-radius-md); + padding: var(--space-2) var(--space-3); + transition: border-color var(--transition-fast); +} + +.input:focus { + outline: none; + border-color: var(--ui-primary); + box-shadow: 0 0 0 3px var(--ui-primary-light); +} + +.input:disabled { + background: var(--ui-gray-50); + cursor: not-allowed; +} +``` + +### Card States +```css +.card { + background: var(--ui-bg-card); + border: 1px solid var(--ui-border); + border-radius: var(--ui-radius-xl); + box-shadow: var(--ui-shadow-md); + transition: all var(--transition-base); +} + +.card:hover { + box-shadow: var(--ui-shadow-lg); + transform: translateY(-2px); +} +``` + +--- + +## 11. Layout Pattern + +### Sidebar Layout +```typescript + + width: 256px; + height: 100vh; + background: var(--ui-gray-50); + border-right: 1px solid var(--ui-border); + position: fixed; + left: 0; + top: 0; + + + + margin-left: 256px; + background: var(--ui-bg); + min-height: 100vh; + +``` + +### Card Grid +```typescript +
+ {items.map(item => ( + + {/* Card content */} + + ))} +
+``` + +--- + +## 12. Accesibilidad + +### Contrast Ratios +- Background `--ui-bg-card` + Text `--ui-text-primary`: 12.4:1 ✅ (AAA) +- Background `--ui-primary` + Text `--ui-text-inverse`: 4.6:1 ✅ (AA) +- Background `--ui-success` + Text `--ui-text-inverse`: 4.5:1 ✅ (AA) + +### Focus States +- Todos los elementos interactivos deben tener focus visible +- Usar `outline: 2px solid var(--ui-primary)` con offset + +### Keyboard Navigation +- Todas las acciones deben ser accesibles por teclado +- Tab order lógico y predecible + +--- + +## 13. Dark Mode (Opcional) + +No implementado actualmente, pero preparado con: +```css +@media (prefers-color-scheme: dark) { + :root { + --ui-bg: #0D1117; + --ui-bg-card: #161B22; + --ui-text-primary: #F0F6FC; + --ui-text-secondary: #8B949E; + --ui-border: #30363D; + } +} +``` + +--- + +## 14. Iconografía + +- Tamaño estándar: 24px +- Stroke width: 2px +- Color: hereda del texto o usa variables de color + +### Icon Sizes +```css +--icon-xs: 16px; +--icon-sm: 20px; +--icon-md: 24px; /* estándar */ +--icon-lg: 32px; +--icon-xl: 40px; +``` + +--- + +## 15. Componentes Específicos de Aperture + +### Stats Card +```typescript + + icon: IconComponent; + title: string; + value: number | string; + trend?: { + value: number; + isPositive: boolean; + }; + +``` + +### Booking Card +```typescript + + customerName: string; + serviceName: string; + startTime: string; + endTime: string; + status: 'confirmed' | 'pending' | 'completed' | 'no_show'; + staff: StaffInfo; + +``` + +### Calendar Time Slot +```typescript + + time: string; + isAvailable: boolean; + booking?: BookingInfo; + onClick: () => void; + +``` + +--- + +## 16. Responsive Adaptations + +### Mobile (< 640px) +- Sidebar: hidden behind hamburger menu +- Table: horizontal scroll +- Grid: 1 columna +- Modal: fullscreen + +### Tablet (640px - 1024px) +- Sidebar: collapsable (64px when collapsed) +- Table: horizontal scroll if needed +- Grid: 2 columnas +- Modal: centered with max-width + +### Desktop (> 1024px) +- Sidebar: fixed 256px +- Table: sticky header +- Grid: 3-4 columnas +- Modal: centered with max-width + +--- + +## 17. Convenciones de Código + +### Naming Convention +```typescript +// Componentes: PascalCase +const StatsCard = () => { } + +// Props: camelCase +interface StatsCardProps { + icon: React.ReactNode; + title: string; + value: number; +} + +// CSS classes: kebab-case +.stats-card { } + +// CSS variables: kebab-case con prefijo 'ui-' +--ui-primary: #006AFF; +``` + +### Estructura de Archivos +``` +components/hq/ +├── StatsCard.tsx +├── BookingCard.tsx +├── MultiColumnCalendar.tsx +├── StaffTable.tsx +├── ResourceGrid.tsx +└── index.ts +``` + +--- + +## 18. Checklist de Implementación + +Antes de considerar un componente como "completado": + +- [ ] Implementa todos los estados (default, hover, focus, active, disabled) +- [ ] Usa variables CSS del sistema +- [ ] Tiene accesibilidad (contrast, keyboard, focus) +- [ ] Es responsive (mobile, tablet, desktop) +- [ ] Tiene animaciones sutiles (150-300ms) +- [ ] Tiene TypeScript types completos +- [ ] Está documentado con JSDoc +- [ ] Tiene ejemplos de uso + +--- + +## 19. Recursos + +- **SquareUi Kit**: https://squareui.com +- **Inter Font**: https://fonts.google.com/specimen/Inter +- **Tailwind CSS**: https://tailwindcss.com +- **Lucide Icons**: https://lucide.dev + +--- + +## 20. Notas Importantes + +### Principios de Diseño +1. **Claridad sobre creatividad**: La información debe ser fácil de entender, no decorativa +2. **Consistencia**: Todos los componentes similares deben comportarse igual +3. **Minimalismo**: Menos es más. Elimina elementos innecesarios +4. **Feedback**: Las acciones deben dar feedback inmediato (loading, success, error) +5. **Accesibilidad**: Todo debe ser accesible por teclado y screen readers + +### Lo que NO hacer +- ❌ No usar gradients +- ❌ No usar sombras duras +- ❌ No usar colores saturados +- ❌ No usar animaciones llamativas +- ❌ No usar UI densa +- ❌ No usar efectos innecesarios + +### Lo que SÍ hacer +- ✅ Usar espacio negativo dominante +- ✅ Usar tipografía legible +- ✅ Usar animaciones sutiles +- ✅ Usar contrastes apropiados +- ✅ Usar focus states visibles +- ✅ Usar feedback inmediato +- ✅ Usar grid systems consistentes +- ✅ Usar espaciado generoso + +--- + +## 21. Changelog + +### 2026-01-17 +- Documento inicial creado +- Definición de paleta de colores +- Definición de sistema de tipografía +- Definición de principios de diseño diff --git a/docs/API.md b/docs/API.md index 16a0a51..8bc61fc 100644 --- a/docs/API.md +++ b/docs/API.md @@ -22,6 +22,9 @@ AnchorOS is a comprehensive salon management system built with Next.js, Supabase #### Availability - `GET /api/availability/time-slots` - Get available time slots for booking - `POST /api/availability/staff-unavailable` - Mark staff unavailable (Staff auth required) +- `GET /api/availability/blocks` - Get manual availability blocks +- `GET /api/public/availability` - Get public availability information (no auth required) +- `POST /api/availability/staff` - Set staff availability #### Customers - `GET /api/customers` - Search customer by email or phone @@ -30,7 +33,8 @@ AnchorOS is a comprehensive salon management system built with Next.js, Supabase #### Bookings (Public) - `POST /api/bookings` - Create new booking (supports customer_id or customer info) - `GET /api/bookings/[id]` - Get booking details -- `PUT /api/bookings/[id]` - Update booking +- `PATCH /api/bookings/[id]` - Update booking (partial update) +- `PUT /api/bookings/[id]` - Update booking (full replacement) ### Staff/Admin APIs (Aperture) @@ -59,6 +63,7 @@ AnchorOS is a comprehensive salon management system built with Next.js, Supabase - `POST /api/kiosk/authenticate` - Authenticate kiosk - `GET /api/kiosk/resources/available` - Get available resources for kiosk - `POST /api/kiosk/bookings` - Create walk-in booking +- `POST /api/kiosk/walkin` - Create walk-in booking without reservation - `PUT /api/kiosk/bookings/[shortId]/confirm` - Confirm booking ### Payment APIs diff --git a/docs/DESIGN_SYSTEM.md b/docs/DESIGN_SYSTEM.md new file mode 100644 index 0000000..f435eec --- /dev/null +++ b/docs/DESIGN_SYSTEM.md @@ -0,0 +1,596 @@ +# AnchorOS Design System + +**Sistema de diseño completo para AnchorOS** +**Última actualización: Enero 2026** + +--- + +## 1. Visión General + +AnchorOS tiene dos sistemas de diseño distintos: + +### anchor23.mx - Frontend Institucional +- Estilo: Editorial, sofisticado, ultra lujo +- Principios: Silencio, solidez, permanencia +- Documentación: `docs/site_requirements.md`, `docs/ANCHOR23_FRONTEND.md` + +### Aperture - HQ Dashboard +- Estilo: Square UI (minimalista, funcional, clean) +- Principios: Claridad, consistencia, usabilidad +- Documentación: `docs/APERTURE_SQUARE_UI.md` + +--- + +## 2. Resolución de Inconsistencia de Colores + +### Inconsistencia Detectada + +**site_requirements.md** define: +```css +--foreground-rgb: 20, 20, 20; +--background-rgb: 255, 255, 255; +--accent-rgb: 180, 150, 120; +--accent-dark-rgb: 140, 110, 80; +``` + +**globals.css** define: +```css +:root { + --bone-white: #F6F1EC; + --soft-cream: #EFE7DE; + --mocha-taupe: #B8A89A; + --deep-earth: #6F5E4F; + --charcoal-brown: #3F362E; +} +``` + +### Solución Oficial + +**Ambos sistemas son correctos** pero aplicados a diferentes contextos: + +#### anchor23.mx (Frontend Institucional) +Usa colores de **globals.css**: +```css +--bone-white: #F6F1EC; /* Background principal */ +--soft-cream: #EFE7DE; /* Bloques y secciones */ +--mocha-taupe: #B8A89A; /* Íconos y divisores */ +--deep-earth: #6F5E4F; /* Botones primarios */ +--charcoal-brown: #3F362E; /* Texto principal */ +``` + +#### Aperture (HQ Dashboard) +Usa colores de **Square UI** (ver `docs/APERTURE_SQUARE_UI.md`): +```css +--ui-primary: #006AFF; +--ui-bg: #F6F8FA; +--ui-bg-card: #FFFFFF; +--ui-text-primary: #24292E; +--ui-border: #E1E4E8; +``` + +--- + +## 3. Sistema anchor23.mx - Frontend Institucional + +### Paleta de Colores + +```css +:root { + --bone-white: #F6F1EC; + --soft-cream: #EFE7DE; + --mocha-taupe: #B8A89A; + --deep-earth: #6F5E4F; + --charcoal-brown: #3F362E; +} +``` + +**Reglas:** +- Sin colores saturados +- Sin gradientes +- Sin sombras duras + +### Tipografía + +#### Headings +- **Font**: Serif editorial sobria +- **Ejemplos**: The Seasons, Canela +- **Uso**: Títulos de secciones, hero text + +#### Body / UI +- **Font**: Sans neutral +- **Ejemplos**: Inter, DM Sans +- **Uso**: Texto de cuerpo, componentes UI + +**Implementación actual:** +```css +h1, h2, h3, h4, h5, h6 { + font-family: 'Playfair Display', serif; +} +``` + +**Nota**: Actualmente usa Playfair Display en globals.css. + +### Layout + +- Grid amplio +- Márgenes generosos +- Ritmo vertical lento +- Espacio negativo dominante + +**Nunca:** +- UI densa +- Animaciones llamativas +- Efectos innecesarios + +--- + +## 4. Sistema Aperture - Square UI + +Para detalles completos, ver `docs/APERTURE_SQUARE_UI.md`. + +### Paleta de Colores (Resumen) + +```css +:root { + --ui-primary: #006AFF; + --ui-bg: #F6F8FA; + --ui-bg-card: #FFFFFF; + --ui-text-primary: #24292E; + --ui-border: #E1E4E8; + --ui-success: #28A745; + --ui-warning: #DBAB09; + --ui-error: #D73A49; +} +``` + +### Tipografía + +- **Font**: Inter, system-ui, -apple-system +- **Sizes**: 12px (xs) a 48px (5xl) +- **Weights**: 400 (normal), 500 (medium), 600 (semibold), 700 (bold) + +### Layout + +- Sidebar: 256px fixed +- Main content: margin-left 256px +- Grid: 12 columnas +- Gutter: 16px + +--- + +## 5. Variables CSS Globales + +Todas las variables están definidas en `app/globals.css`: + +### anchor23.mx +```css +:root { + --bone-white: #F6F1EC; + --soft-cream: #EFE7DE; + --mocha-taupe: #B8A89A; + --deep-earth: #6F5E4F; + --charcoal-brown: #3F362E; +} +``` + +### UI Components (Compartido) +```css +:root { + --foreground-rgb: 20, 20, 20; + --background-rgb: 255, 255, 255; + --accent-rgb: 180, 150, 120; + --accent-dark-rgb: 140, 110, 80; +} +``` + +### Select Components +```css +:root { + --select-content: background: var(--bone-white); + --select-item: color: var(--charcoal-brown); + --select-item:hover: background: var(--soft-cream); + --select-item[data-state="checked"]: background: var(--soft-cream); +} +``` + +--- + +## 6. Componentes UI + +### Implementados + +En `/components/ui/`: +- ✅ `button.tsx` +- ✅ `card.tsx` +- ✅ `input.tsx` +- ✅ `label.tsx` +- ✅ `select.tsx` +- ✅ `tabs.tsx` +- ✅ `badge.tsx` + +### Pendientes de Documentar + +Ver checklist en sección 10. + +--- + +## 7. Tipografía Escalas + +### anchor23.mx +```css +--text-display: 4.5rem; /* 72px */ +--text-hero: 3.75rem; /* 60px */ +--text-h1: 2.25rem; /* 36px */ +--text-h2: 1.875rem; /* 30px */ +--text-h3: 1.5rem; /* 24px */ +--text-h4: 1.25rem; /* 20px */ +--text-body: 1rem; /* 16px */ +--text-small: 0.875rem; /* 14px */ +``` + +### Aperture +```css +--text-xs: 0.75rem; /* 12px */ +--text-sm: 0.875rem; /* 14px */ +--text-base: 1rem; /* 16px */ +--text-lg: 1.125rem; /* 18px */ +--text-xl: 1.25rem; /* 20px */ +--text-2xl: 1.5rem; /* 24px */ +--text-3xl: 1.875rem; /* 30px */ +--text-4xl: 2.25rem; /* 36px */ +--text-5xl: 3rem; /* 48px */ +``` + +--- + +## 8. Espaciado (Spacing) + +### Base +```css +--space-0: 0; +--space-1: 0.25rem; /* 4px */ +--space-2: 0.5rem; /* 8px */ +--space-3: 0.75rem; /* 12px */ +--space-4: 1rem; /* 16px */ +--space-5: 1.25rem; /* 20px */ +--space-6: 1.5rem; /* 24px */ +--space-8: 2rem; /* 32px */ +--space-10: 2.5rem; /* 40px */ +--space-12: 3rem; /* 48px */ +``` + +### Por Contexto + +**anchor23.mx:** +- Section padding: `padding: var(--space-16)` (8rem = 128px) +- Card padding: `padding: var(--space-10)` (2.5rem = 40px) +- Grid gaps: `gap: var(--space-8)` (2rem = 32px) + +**Aperture:** +- Card padding: `padding: var(--space-4)` (1rem = 16px) +- Sidebar gap: `gap: var(--space-2)` (0.5rem = 8px) +- Form gap: `gap: var(--space-3)` (0.75rem = 12px) + +--- + +## 9. Bordes y Radii + +### anchor23.mx +- Botones: `border-radius: 0` (sin bordes redondeados) +- Cards: `border-radius: 0` (sin bordes redondeados) + +### Aperture +```css +--ui-radius-sm: 4px; +--ui-radius-md: 6px; +--ui-radius-lg: 8px; +--ui-radius-xl: 12px; +--ui-radius-2xl: 16px; +``` + +--- + +## 10. Documentación de Componentes Pendiente + +### Componentes UI Existentes + +Los siguientes componentes necesitan documentación completa: + +1. **Button** (`components/ui/button.tsx`) + - Props: variant (primary, secondary, ghost, danger, success, warning) + - Sizes: sm, md, lg, xl + - Estados: default, hover, focus, active, disabled + - Ejemplos de uso + +2. **Card** (`components/ui/card.tsx`) + - Props: variant (default, elevated, bordered) + - Elevations: sm, md, lg + - Padding options + - Radius options + +3. **Input** (`components/ui/input.tsx`) + - Props: type, placeholder, disabled, error, icon + - Estados: default, focus, error, disabled + - Accesibilidad: aria-label, aria-describedby + +4. **Select** (`components/ui/select.tsx`) + - Props: options, value, onChange, disabled, placeholder + - Estados: default, open, focused + - Items styling (hover, selected) + +5. **Tabs** (`components/ui/tabs.tsx`) + - Props: tabs, activeTab, onTabChange + - Estilos del tab indicator + - Posiciones (top, left, right, bottom) + +6. **Badge** (`components/ui/badge.tsx`) + - Props: variant (default, success, warning, error, info) + - Sizes: sm, md + - Icon support + +### Componentes UI a Crear + +7. **Table** (NUEVO) + - Props: columns, data, sort, pagination + - Estados: hover on row, sticky header + - Responsive behavior + +8. **Dropdown** (NUEVO) + - Props: trigger, items, placement + - Positioning inteligente + - Close on click outside + +9. **Avatar** (NUEVO) + - Props: src, initials, size, status + - Status indicators (online, offline, busy) + - Fallback to initials + +10. **Modal** (NUEVO) + - Props: isOpen, onClose, title, size + - Sizes: sm, md, lg, xl, full + - Backdrop behavior + - Animation transitions + +11. **Tooltip** (NUEVO) + - Props: content, children, placement + - Trigger: hover, click, focus + - Delay options + +--- + +## 11. Breakpoints Responsivos + +### anchor23.mx +```css +--breakpoint-mobile: 640px; +--breakpoint-tablet: 768px; +--breakpoint-desktop: 1024px; +--breakpoint-wide: 1280px; +``` + +### Aperture +```css +--breakpoint-sm: 640px; +--breakpoint-md: 768px; +--breakpoint-lg: 1024px; +--breakpoint-xl: 1280px; +--breakpoint-2xl: 1536px; +``` + +--- + +## 12. Animaciones y Transiciones + +### Duraciones +```css +--transition-fast: 150ms; +--transition-base: 200ms; +--transition-slow: 300ms; +``` + +### Easing Functions +- Ease-out: `cubic-bezier(0.4, 0, 0.2, 1)` +- Ease-in-out: `cubic-bezier(0.4, 0, 0.2, 1)` + +### Principios + +**anchor23.mx:** +- Animaciones mínimas o inexistentes +- Foco en estática y permanencia + +**Aperture:** +- Animaciones sutiles en todos los interacciones +- Hover, focus, active states con transiciones +- Modal transitions: fade + scale + +--- + +## 13. Accesibilidad + +### Contrast Ratios + +**anchor23.mx:** +- Background `--bone-white` + Text `--charcoal-brown`: 12.4:1 ✅ (AAA) + +**Aperture:** +- Background `--ui-bg-card` + Text `--ui-text-primary`: 12.4:1 ✅ (AAA) +- Background `--ui-primary` + Text `--ui-text-inverse`: 4.6:1 ✅ (AA) + +### Focus States + +Todos los elementos interactivos deben tener: +```css +:focus { + outline: 2px solid var(--focus-color); + outline-offset: 2px; +} +``` + +### Keyboard Navigation + +- Tab order lógico +- Skip links para contenido +- ARIA labels apropiados + +--- + +## 14. Convenciones de Código + +### Naming + +```typescript +// Componentes: PascalCase +const StatsCard = () => { } + +// Props: camelCase +interface StatsCardProps { + title: string; + value: number; +} + +// CSS classes: kebab-case +.stats-card { } + +// CSS variables: kebab-case con prefijo apropiado +--bone-white: #F6F1EC; // anchor23.mx +--ui-primary: #006AFF; // Aperture +``` + +### Estructura de Archivos + +``` +components/ +├── ui/ # Componentes UI base +│ ├── button.tsx +│ ├── card.tsx +│ ├── input.tsx +│ ├── label.tsx +│ ├── select.tsx +│ ├── tabs.tsx +│ ├── badge.tsx +│ ├── table.tsx # NUEVO +│ ├── dropdown.tsx # NUEVO +│ ├── avatar.tsx # NUEVO +│ ├── modal.tsx # NUEVO +│ └── tooltip.tsx # NUEVO +│ +├── booking/ # Componentes específicos de booking +│ └── date-picker.tsx +│ +├── kiosk/ # Componentes específicos de kiosko +│ ├── BookingConfirmation.tsx +│ ├── ResourceAssignment.tsx +│ └── WalkInFlow.tsx +│ +├── hq/ # Componentes específicos de Aperture +│ ├── StatsCard.tsx # NUEVO +│ ├── BookingCard.tsx # NUEVO +│ ├── MultiColumnCalendar.tsx # NUEVO +│ └── index.ts +│ +└── shared/ # Componentes compartidos (actualmente vacío) +``` + +--- + +## 15. Checklist de Implementación + +### Para Componentes UI Nuevos + +Antes de considerar un componente como "completado": + +- [ ] Implementa todos los estados (default, hover, focus, active, disabled) +- [ ] Usa variables CSS del sistema apropiadas +- [ ] Tiene TypeScript types completos y exportados +- [ ] Tiene contrast ratios ≥ 4.5:1 (AA) o ≥ 7:1 (AAA) +- [ ] Tiene focus visible (outline o equivalente) +- [ ] Es accesible por teclado (tab, enter, escape) +- [ ] Es responsive (mobile, tablet, desktop) +- [ ] Tiene animaciones sutiles (150-300ms) si aplica +- [ ] Está documentado con JSDoc +- [ ] Tiene ejemplos de uso en el código + +### Para Páginas Nuevas + +Antes de considerar una página como "completada": + +- [ ] Tiene meta tags apropiados (title, description) +- [ ] Tiene estructura semántica correcta (header, main, footer) +- [ ] Es responsive en todos los breakpoints +- [ ] Tiene estados de loading y error +- [ ] Tiene feedback visual para acciones (success, error) +- [ ] Está enrutada correctamente en Next.js App Router +- [ ] Tiene pruebas manuales en diferentes navegadores + +--- + +## 16. Recursos y Referencias + +### Fonts + +- **Inter (Aperture)**: https://fonts.google.com/specimen/Inter +- **Playfair Display (anchor23.mx)**: https://fonts.google.com/specimen/Playfair+Display + +### Icon Libraries + +- **Lucide React**: https://lucide.dev +- Uso actual: Icons 24px, stroke 2px + +### Design Systems de Referencia + +- **SquareUi**: https://squareui.com +- **Square Brand**: https://brand.squareup.com +- **Carbon Design**: https://carbondesignsystem.com + +### Accesibilidad + +- **WCAG 2.1 Guidelines**: https://www.w3.org/WAI/WCAG21/quickref/ +- **Contrast Checker**: https://webaim.org/resources/contrastchecker/ + +--- + +## 17. Changelog + +### 2026-01-17 +- Documento inicial creado +- Definición de los dos sistemas de diseño (anchor23.mx y Aperture) +- Resolución de inconsistencia de colores +- Definición de estructura de componentes +- Creación de checklist de implementación + +--- + +## 18. Notas Importantes + +### Sobre anchor23.mx +- Estilo diseñado para comunicar exclusividad y lujo +- No busca conversiones agresivas +- Debe sentirse "silencioso, sólido y permanente" + +### Sobre Aperture +- Estilo diseñado para eficiencia operativa +- Foco en productividad y claridad de datos +- Debe sentirse "rápido, confiable y funcional" + +### Sobre el Futuro +- Considerar migrar hacia un sistema de diseño unificado +- Evaluar si anchor23.mx y Aperture pueden converger +- Mantener flexibilidad para cambios de marca + +--- + +## 19. Decisiones Pendientes + +1. ¿Unificar el sistema de diseño a largo plazo? +2. ¿Usar Storybook para documentación de componentes? +3. ¿Implementar dark mode para Aperture? +4. ¿Migrar Playfair Display a otro font más editorial? + +--- + +## 20. Contacto + +Para preguntas sobre el sistema de diseño, consultar: +- Documento de estilo de Aperture: `docs/APERTURE_SQUARE_UI.md` +- Documento de requisitos del sitio: `docs/site_requirements.md` +- Documento del frontend institucional: `docs/ANCHOR23_FRONTEND.md`