DaleRuta!empresas

← Documentación

Brief de diseño — Verificación de identidad del repartidor + refresh visual

Documento para pasarle a Claude Design. Incluye: (1) el plan de producto detrás de la verificación de identidad, (2) el inventario completo de pantallas a diseñar (nuevas + redesign de las existentes) y (3) el prompt final, listo para copiar y pegar.

No se implementa nada todavía — esto es el brief para generar los mockups. La implementación (DB, storage, RLS, pantallas reales) es el paso siguiente, después de tener los diseños.

1. Plan de producto: verificación de identidad del repartidor

Qué se pide

El repartidor puede subir, de forma opcional, tres tipos de documento:

  1. DNI — frente y dorso (2 fotos).
  2. Licencia de conducir — frente y dorso (2 fotos).
  3. Certificado de antecedentes penales — un archivo (foto o PDF).

Cuándo se pide

No es parte del registro (no se toca el formulario de registro actual). Después de crear la cuenta, se lo lleva a una pantalla "Verificá tu identidad", con opción de completarla ahora o más tarde. Queda accesible en cualquier momento desde Perfil. Esto prioriza la fricción mínima al arrancar: el repartidor puede usar la app completa sin verificarse, y verse con el opcional cuando quiera.

Por qué importa (el mensaje al repartidor)

Hoy el matching es automático por zona (no hay pantalla donde la empresa "elige" repartidores uno por uno). Por eso el beneficio de verificarse, para el MVP, es: prioridad — los repartidores verificados van a aparecer/notificarse primero cuando varias personas compiten por la misma ruta. Ese es el mensaje que hay que comunicar en la UI ("las empresas pueden priorizar repartidores verificados; si no verificás tu cuenta, podés perderte rutas que te interesan").

Además, ya sumamos —a nivel de dato, todavía sin lógica activa— un campo requiresVerifiedCourier en la publicación de envíos (checkbox "Sólo repartidores verificados" en el form de la empresa). Se construye ahora la UI y el dato, pero queda detrás de un feature flag: no se expone a empresas reales todavía ni se aplica en el matching. Es preparación para poder "prenderlo" sin rehacer diseño.

Estados

Por documento: No subido → En revisión → Verificado | Rechazado (con motivo, permite volver a subir).

A nivel repartidor, dos badges de confianza independientes (no un único "verificado"):

Revisión

Manual, desde el back-office (admin). No hay integración con un proveedor externo de verificación de identidad en esta etapa.

Privacidad

Los documentos son privados: sólo el propio repartidor y el equipo de administración los ven (storage privado + RLS). Nunca se exponen a la empresa ni a otros repartidores — la empresa sólo ve el resultado (badge verificado/no verificado), nunca el documento. Este mensaje de privacidad tiene que estar presente en la pantalla de carga, porque es lo que le da confianza al repartidor para subir un documento sensible como antecedentes penales.

2. Inventario de pantallas

2.1 Mobile — Repartidor (Expo / app oscura)

Existentes — candidatas a refresh visual

No cambia el contenido/campos, pero es buen momento para pulir jerarquía visual, espaciado y feedback de estados (loading/error/vacío). Para cada una, Claude Design puede proponer mejoras de layout, no sólo re-skin.

  1. Login ((auth)/login.tsx)

    • Contenido: nombre de marca + tagline ("Ingresá para ver rutas y entregas"), campo email, campo contraseña, botón "Ingresar", link a "Registrate como repartidor".
    • No existe todavía "olvidé mi contraseña" — no lo agregues, o dejalo como nota de espacio reservado para más adelante.

  2. Registro de repartidor ((auth)/register.tsx)

    • Hoy es un único formulario largo con scroll, dividido en secciones: Tus datos (nombre, teléfono, email, contraseña), Vehículo (chips: Moto/Auto/Utilitario), Zonas (zona base — selector simple; zonas de destino — selector múltiple; radio de cobertura en km), Disponibilidad (chips de días de la semana).
    • Es candidato fuerte a wizard multi-paso (4 pasos: Datos → Vehículo → Zonas → Disponibilidad) con indicador de progreso, para bajar la sensación de formulario largo. Evalualo como propuesta, no como requisito cerrado.
    • Estado de confirmación de email post-registro (pantalla simple: "Revisá tu email").

  3. Rutas disponibles / Home ((courier)/index.tsx)

    • Lista de rutas (origen → destino, cantidad de paquetes, precio por paquete, ventana de retiro/entrega, costo de acceso, botón "Tomar y pagar acceso").
    • Estados: loading, vacío ("No hay rutas por ahora"), error, pull-to-refresh.
    • Nuevo elemento a incorporar: si el repartidor no verificó su identidad, mostrar un banner discreto y no bloqueante arriba de la lista: "Verificá tu identidad para que las empresas te prioricen en más rutas → Verificar". Debe poder cerrarse/no ser invasivo (no es un modal ni bloquea el uso).

  4. Mis rutas ((courier)/mis-rutas.tsx)

    • Lista de rutas tomadas, con estado de pago de acceso (pendiente/pagado), dirección de retiro (oculta hasta pagar), ventanas de horario, fecha de toma.
    • Sólo refresh visual, sin cambios de contenido por la verificación.

  5. Perfil ((courier)/perfil.tsx)

    • Hoy: nombre, teléfono, datos de solo-lectura (vehículo, zona base, zonas destino, radio, disponibilidad, saldo de billetera), botón "Cerrar sesión".
    • Nuevo elemento a incorporar: una sección/card de Verificación arriba de los datos, con los dos badges (Identidad / Antecedentes) y su estado actual, y un CTA que lleva a la pantalla de verificación. Ver diseño de badges en 2.1 (nuevas).

Nuevas — flujo de verificación

  1. Verificá tu identidad (hub) — nueva pantalla, accesible desde Perfil y desde el banner del Home.

    • Encabezado explicando el beneficio en una línea (prioridad para empresas, ver texto en Sección 1).
    • Nota de privacidad breve y visible ("Tus documentos son privados. Sólo los ve nuestro equipo de verificación.").
    • Tres tarjetas de documento, cada una con: título, ícono/ilustración, estado actual (chip: Sin subir / En revisión / Verificado / Rechazado), y si está rechazado el motivo corto + CTA "Volver a subir"; si no está subido, CTA "Subir".
      • Tarjeta 1: DNI (frente y dorso — mostrar 2 slots dentro de la misma tarjeta).
      • Tarjeta 2: Licencia de conducir (frente y dorso — 2 slots).
      • Tarjeta 3: Certificado de antecedentes penales (1 slot; foto o PDF), con copy que aclara que es el más opcional de los tres ("Es opcional, pero suma confianza extra frente a las empresas").
    • Estado global arriba (opcional, si simplifica la lectura): dos badges resumen "Identidad verificada" / "Antecedentes verificados" con su estado.
    • Puede salirse en cualquier momento sin perder lo ya subido (no es un wizard obligatorio).

  2. Subir documento — pantalla (o modal a pantalla completa) reutilizable para cualquiera de los 5 slots (DNI frente, DNI dorso, licencia frente, licencia dorso, antecedentes).

    • Título dinámico según el documento ("Foto del DNI — frente").
    • Zona de captura: botón "Sacar foto" (cámara) y "Elegir de la galería"; para antecedentes penales, además "Subir PDF".
    • Tips breves sobre calidad (buena luz, documento completo dentro del cuadro, sin reflejos) — 2-3 bullets cortos, no un párrafo largo.
    • Preview de la imagen/archivo elegido antes de confirmar, con opción de descartar y volver a intentar.
    • Botón "Enviar para revisión" (confirmar envío) + estado de carga (subiendo…).

  3. Confirmación de envío (puede ser un estado dentro del hub, no necesariamente pantalla aparte) — mensaje corto: "Lo recibimos. Te avisamos cuando esté revisado (normalmente en 24-48 hs)." con botón volver al hub o a Perfil.

2.2 Web — Empresa (Next.js, mismo tema oscuro)

Existentes — candidatas a refresh visual

  1. Landing (app/page.tsx) — hoy es un esqueleto de accesos directos (Panel de empresa / Publicar envío / Back-office). Ya no necesita leer como "MVP en construcción"; conviene una landing más presentable orientada a la empresa que se está por registrar (propuesta de valor corta + CTA a registro/login).
  2. Login (app/login/page.tsx) — form simple email/password.
  3. Registro de empresa (app/register/page.tsx + form.tsx) — email, CUIT, selector de dirección de depósito (DepositAddressPicker, con mapa/geocoding), contraseña.
  4. Mis envíos / dashboard (app/empresa/page.tsx) — listado de publicaciones con: origen, precio total, cantidad de paquetes (aprox. editable inline), ventana de retiro, estado, tabla de paquetes agrupados por destino.
  5. Publicar envío (app/empresa/publicaciones/nueva/*) — flujo con selector de destino (AreaPicker), cantidad (exacta o aproximada con margen), confirmación de depósito (set-deposit.tsx).
    • Nuevo elemento a incorporar (oculto por feature flag): checkbox "Sólo repartidores verificados" con un texto de ayuda corto ("Sólo van a poder tomar esta ruta repartidores con identidad verificada. Puede reducir la cantidad de repartidores disponibles."). Diseñalo como si estuviera visible — la ocultación es a nivel de código, no cambia el diseño.

No hace falta pantalla nueva del lado empresa para KYC: la empresa nunca ve los documentos, sólo el efecto (badge/prioridad), que hoy no tiene superficie propia más allá del checkbox de arriba.

2.3 Web — Admin / Back-office (nuevas)

Hoy app/admin/page.tsx es un stub que sólo muestra los defaults de PlatformConfig. Conviene pensarlo como el shell de un back-office real (nav lateral o tabs con secciones: Parámetros, Verificaciones, y espacio para Disputas a futuro), aunque sólo se diseñe/implemente la sección de Verificaciones ahora.

  1. Cola de verificaciones — lista de repartidores con documentos pendientes de revisión.

    • Tabs o filtro: Pendientes / Verificados / Rechazados / Todos.
    • Cada fila: nombre del repartidor, teléfono, cantidad de documentos pendientes, fecha del envío más reciente, badge de estado.
    • Click en una fila → detalle.

  2. Detalle de verificación de un repartidor

    • Encabezado con datos del repartidor (nombre, teléfono, email, vehículo, zona base, zonas destino) — sólo lectura, para dar contexto a quien revisa.
    • Los 5 documentos (DNI frente/dorso, licencia frente/dorso, antecedentes), mostrados como imágenes/PDF con zoom, y para cada uno: botones Aprobar / Rechazar, y si rechaza, un campo de texto obligatorio con el motivo (que el repartidor va a ver).
    • Guardar por documento (no hace falta un único submit para los 5 — cada uno se aprueba/rechaza independientemente, porque pueden llegar en momentos distintos).

3. Sistema visual a respetar

Tema oscuro en ambas plataformas, con estos tokens ya en uso (no inventar una paleta nueva; Claude Design puede refinar tonos pero debe mantenerse en esta familia):

Fondo:        #0b0d12
Superficie:   #141821
Superficie alt: #1c2230
Borde:        #283042 (web usa #232a36)
Primario:     #3b82f6 (azul)
Texto:        #f4f6fb
Texto muted:  #9aa4b2
Éxito:        #22c55e
Peligro:      #ef4444

Tipografía: system-ui / sans-serif nativo de cada plataforma, sin fuente custom cargada todavía. Bordes redondeados moderados (8–16px), chips con border-radius pill para tags de estado. Mobile usa react-native-safe-area-context (respetar notch/insets).

Estados de chip/badge sugeridos para documentos:

4. Tono de copy

Español rioplatense, voseo ("subí", "elegí", "revisá"), directo y breve. Sin jerga técnica. Los mensajes de privacidad y de beneficio (prioridad para empresas) tienen que ser cortos — una o dos líneas, no un párrafo de términos y condiciones.

5. Qué necesitamos como entregable

Prompt listo para copiar en Claude Design

Estoy diseñando una app de reparto de paquetes (marketplace entre empresas de logística y repartidores individuales en Argentina, tema oscuro, paleta con azul #3b82f6 como primario sobre fondo #0b0d12/#141821, texto claro #f4f6fb, muted #9aa4b2, éxito #22c55e, peligro #ef4444). Necesito diseñar un flujo nuevo de verificación de identidad opcional para repartidores (suben DNI frente/dorso, licencia de conducir frente/dorso, y opcionalmente un certificado de antecedentes penales; todo revisado manualmente por un admin) más el refresh visual de las pantallas existentes de la app.

Pantallas a diseñar (mobile, app de repartidor, tema oscuro):

  1. Hub "Verificá tu identidad": explica el beneficio (prioridad frente a otros repartidores cuando las empresas buscan gente verificada), aviso de privacidad corto, y 3 tarjetas de documento (DNI, Licencia, Antecedentes) cada una con su estado (Sin subir / En revisión / Verificado / Rechazado con motivo).
  2. Pantalla de carga de un documento: sacar foto o elegir de galería (o PDF para antecedentes), tips breves de calidad, preview antes de confirmar, botón enviar.
  3. Estado de confirmación tras enviar ("Lo recibimos, te avisamos en 24-48hs").
  4. Refresh de Login, Registro (formulario largo con secciones: datos personales, vehículo, zonas de cobertura, disponibilidad — evaluar si conviene volverlo un wizard de pasos), Home/lista de rutas disponibles (agregando un banner opcional "Verificá tu identidad para que te prioricen"), Mis rutas, y Perfil (agregando una sección con 2 badges de verificación: Identidad y Antecedentes).

Pantallas a diseñar (web, panel de empresa y back-office de admin, mismo tema oscuro): 5. Refresh de: landing, login, registro de empresa (con selector de dirección de depósito en mapa), dashboard de "mis envíos" (listado de publicaciones), y el flujo de "publicar envío" — a este último sumarle un checkbox "Sólo repartidores verificados" con texto de ayuda corto. 6. Nueva sección de back-office: cola de verificaciones pendientes (lista de repartidores con documentos por revisar, filtrable por estado) y una vista de detalle por repartidor donde se ve cada documento en grande (con zoom) y botones Aprobar/Rechazar por documento, con campo de motivo obligatorio al rechazar.

Tono: español rioplatense (voseo), directo y breve, sin jerga técnica. Diseño limpio, mobile-first para las pantallas de repartidor, desktop para el back-office. Quiero ver los estados vacío/error/con-datos de las pantallas de listado, y los 4 estados de badge de documento (sin subir, en revisión, verificado, rechazado).