VOY v3 — Maqueta Definitiva

Login & Registro

Auth card con tabs Login/Registro + selector de rol — como VOY v1 pero mejorado

VOY Servicios para el hogar

Iniciar sesión

Registrarse

Correo electrónico

Contraseña

¿Olvidaste tu contraseña?

Login — Auth Card con tabs (v1 real)

VOY

Iniciar sesión

Registrarse

Nombre completo

Correo electrónico

Contraseña

Confirmar contraseña

¿Qué quieres hacer?

🏠

Busco un servicio

Cliente

🔧

Ofrezco servicios

Profesional

Ciudad

Registro con selector de rol

Cliente — Desktop completo

Topbar + sidebar + main area + mapa + worker detail + chat panel — como VOY v1

Todos 🔧 Gasfitería ⚡ Electricidad 🎨 Pintura

Radio

10 km

Ordenar

Solo disponibles Verificados

8 profesionales encontrados

María Vargas Verificada

🔧 Gasfitería · ⭐ 4.9 (48) · 📍 2.3 km

CañeríasCalefónLlaves

$15k

/hora

Pedro López

⚡ Electricidad · ⭐ 4.7 (32) · 📍 3.1 km

EnchufesTableros

$18k

/hora

Roberto Gómez

🎨 Pintura · ⭐ 4.5 (18) · 📍 5.7 km

$12k

/hora

Leaflet Map · Viña del Mar · 10 km

Perfil

María Vargas

🔧 Gasfitería · ⭐ 4.9 · 📍 Valparaíso

Verificada🥈 Plata

Gasfíter con 10 años de experiencia. Especialista en reparaciones de cañerías, instalación de artefactos y mantención preventiva.

Habilidades

CañeríasCalefónLlavesWCDuchas

Galería

Reseñas (48)

Sergio G.★★★★★

"Excelente trabajo, muy profesional."

Ana L.★★★★★

"Puntual y trabajo impecable."

Cliente — Explorar + Mapa + Worker Detail Panel (layout v1 completo)

Profesional — Desktop completo

Dashboard con stats, gráfico, trabajo activo, calendario 2 columnas — todo v1 + mejoras v2

Bienvenida, María 👋

Lunes 24 de marzo, 2026

● Disponible

$312.000

Ganancias este mes

+18% vs mes anterior

23

Trabajos este mes

+5 vs anterior

4.9 ★

Calificación promedio

187 reseñas

3

Solicitudes nuevas

Trabajo activo● En curso

Reparar llave cocina

Sergio Gómez · 📍 Av. Libertad 1234

Ganancias — Marzo 2026$312.000

Oct

Nov

Dic

Ene

Feb

Mar

$312k

Este mes

$264k

Variación

Solicitudes recientes

Reparar cañería baño

Ana Muñoz · 📍 Concón · Hace 15 min

$25k

Revisión calefón

Pedro Soto · 📍 Reñaca · Hace 2h

$20k

Cotización enviada exitosamente

Worker Dashboard — Stats + Gráfico + Trabajo activo + Solicitudes + Toast

Agenda

Marzo 2026

Marzo 2026

Dom

Lun

Mar

Mié

Jue

Vie

Sáb

23

24

25

26

27

28

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

1

2

3

4

5

Hoy — 24 Mar

10:00 - 12:00

Reparar llave cocina

📍 Av. Libertad · Sergio G.

En curso

15:00 - 17:00

Revisión calefón

📍 Calle Condell · Ana M.

Pendiente

Libre

12:00 - 15:00 · 17:00+

Agenda — Calendario 7 cols con estados (today, has-job) + detalle día

Modales & Paneles

Booking, cotización crear/ver, rating, verificación — todos los modales de v1

Modal Booking — Campos completos (servicio, modalidad, fecha, hora, dirección, precio)

Modal Cotización — Tarifa + materiales + comisión 15% + badge NUEVO pulsante

Modal Rating — Estrellas interactivas + comentario

Panel Admin — Desktop

Dashboard + verificaciones + reclamos + usuarios

Panel de Administración

Vista general del marketplace

1,247

Usuarios

548

Workers

3,241

Servicios

$2.1M

Revenue

$315K

Comisiones

5

Verif. pend.

Verificaciones pendientes5

Carlos Muñoz

🔧 Gasfitería · Enviado hace 2 días

Andrea Soto

🏠 Limpieza · Enviado hace 5 días

Reclamos abiertos3

Ana MuñozAbierto

Mala calidad · $35.000 · 20/03/2026

Admin — Dashboard + verificaciones con acciones + reclamos con reembolso

Features nuevas v2

Todo lo que NO existía en v1 y se agrega para v3

✨ Features nuevas agregadas

Feature	Rol	Detalle
Registro con selector de rol	Todos	Cards "Busco servicio" / "Ofrezco servicios" en el formulario de registro
Solicitud urgente	Cliente	Toggle rojo con notificación inmediata a workers cercanos
Comparador de cotizaciones	Cliente	Vista lado a lado de cotizaciones con "mejor precio" destacado
Timeline booking 5 pasos	Cliente	Confirmada → Pagada → En camino → En curso → Completada
Sistema de reclamos	Cliente + Admin	Mala calidad / No show / Incompleto / Daños + evidencia foto + reembolso admin
Centro de notificaciones	Todos	Lista con filtros (todas/sin leer/cotizaciones/sistema) + dot de no leída
Perfil público profesional	Cliente	Galería, reseñas, bio, skills, nivel, badge verificada
Materiales guardados	Worker	Librería reutilizable de materiales frecuentes en cotizaciones
Sistema de niveles	Worker	Bronce → Plata → Oro con progress bar y rendimiento
Horario semanal configurable	Worker	Lun-Dom con horarios individuales + toggle por día
Radio de cobertura	Worker	Slider 1-50km para definir zona de trabajo
Modo vacaciones	Worker	Toggle que pausa todas las solicitudes temporalmente
Estados UI completos	Todos	Skeleton shimmer, error con retry, vacío con CTA, success con confetti
PDF cotización	Worker + Cliente	Botón descargar PDF en modal de cotización (jsPDF 2.5.1)

Efectos & Animaciones CSS

Todos los efectos que tiene VOY v1 y deben mantenerse en v3

🎨 Catálogo de efectos

Efecto	CSS	Dónde se usa
Card hover elevación	`:hover { box-shadow: var(--sh-lg); transform: translateY(-2px) }`	Todas las cards, stat-cards, worker-cards
Botón primary hover	`:hover { transform: translateY(-1px); box-shadow: var(--sh-blue-lg) }`	Botón principal verde
Input focus ring	`:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light) }`	Todos los inputs y selects
Sidebar link hover	`:hover { background: var(--g50) } :hover i { color: var(--primary) }`	Links del sidebar
Status dot pulse	`@keyframes statusPulse { box-shadow: 0 0 0 4px transparent }`	Dot verde en topbar y worker cards
Badge NUEVO pulse	`@keyframes pulseNew { opacity: 1 → 0.7 }`	Badge indigo en features de cotización
Chart bar transition	`transition: height 0.5s var(--ease)`	Barras del gráfico de ganancias
Chart bar hover	`:hover { background: var(--primary) }`	Barras pasadas se vuelven verdes
Worker detail slide-in	`transform: translateX(0) ← translateX(100%)`	Panel lateral de 420px
Modal overlay fade-in	`background: rgba(0,0,0,0.4) con opacity transition`	Todos los modales
Toast slide-in	`@keyframes toastIn { from translateX(100%) to translateX(0) }`	Notificaciones toast
Request card NEW	`.new { border-color: primary; background: primary-50 } ::before { content: 'NUEVA' }`	Solicitudes nuevas del worker
Calendar today	`.today { background: primary; color: white; font-weight: 700 }`	Día actual en calendario
Calendar has-job dot	`::after { width:4px; height:4px; border-radius:50%; background: success }`	Días con trabajo agendado
Topbar search focus	`:focus-within { border-color: primary; box-shadow: 0 0 0 3px primary-light }`	Barra de búsqueda
Skeleton shimmer	`background-size: 200% 100%; animation: shimmer 1.5s infinite`	Loading states

Modelo de Datos & Checklist

Tablas Airtable + fases de implementación

📊 Tablas Airtable — existentes + nuevas

Tabla	Campos clave
Workers	WorkerId, Name, Email, Category, Rating, Lat/Lng, Verified, Available, Bio, Skills, Gallery, Phone + Schedule, CoverageRadius, VacationMode, Level	MEJORAR
Clients	ClientId, Name, Email, City, Phone, Lat/Lng, MemberSince	OK
Bookings	BookingId, ClientId, WorkerId, Service, Status, Date, Price, Commission + IsUrgent, TimelineStatus	MEJORAR
Requests	ReqId, ClientName, Service, Status, Distance + IsUrgent, Photos	MEJORAR
Quotations	QuoteId, LaborRate, LaborHours, Materials(JSON), Commission, GrandTotal, Status	OK
Messages	ConversationId, From, Text, TimeStr + ImageUrl	MEJORAR
Verifications	VerifId, WorkerName, Status, Documents + Step(1-4)	MEJORAR
Transactions	TxId, Date, ClientName, WorkerName, Gross, Status	OK
Claims	ClaimId, BookingId, ClientId, WorkerId, Type, Description, Photos, Status, AdminNotes, RefundAmount	NUEVO
Notifications	NotifId, UserId, UserType, Type, Title, Body, Read, RelatedId, CreatedAt	NUEVO
SavedMaterials	MatId, WorkerId, Name, UnitPrice, Unit, Category	NUEVO
WorkerSchedule	ScheduleId, WorkerId, DayOfWeek, StartTime, EndTime, IsActive	NUEVO

🎯 Fases de implementación para Hoku

Fase	Features	Prioridad
1	Registro con selector de rol, estados UI (skeleton/error/vacío/success), tabla Notifications, tabla Claims	ALTA
2	Sistema reclamos (admin + cliente), comparador cotizaciones, timeline booking, solicitud urgente	ALTA
3	SavedMaterials, ganancias/niveles, perfil público worker, centro notificaciones mejorado	MEDIA
4	WorkerSchedule, radio cobertura, modo vacaciones, chat con fotos, PDF en cotización view	BAJA

⚠️ Reglas para Hoku

› Stack: Vanilla JS + Airtable — NO migrar a Next.js/Supabase
› Color: Verde #059669 primario — NO azul
› Iconos: FontAwesome 6.5 — NO emojis en la app
› Comisión: 15% como en el código actual
› Layout: Desktop-first con sidebar 260px + responsive a mobile
› Variables CSS: Usar las de variables.css — NO hardcodear colores
› Efectos: Mantener TODOS los 16 efectos CSS catalogados
› Dev panel: No tocar — ya funciona en voy-app-3

🐕 VOY v3 — Maqueta Definitiva

Agendar servicio

Crear Cotización NUEVO

Calificar servicio

✨ Features nuevas agregadas

🎨 Catálogo de efectos

📊 Tablas Airtable — existentes + nuevas

🎯 Fases de implementación para Hoku

⚠️ Reglas para Hoku