DaleRuta!empresas

← Documentación

Brief de diseño — Panel de empresa (web)

Documento para pasarle a Claude Design. Mismo objetivo que el brief de mobile (design-brief-repartidor-kyc.md): inventario completo de pantallas + prompt final. A diferencia de mobile, acá no hay funcionalidad nueva — es pulir visualmente lo que ya existe y aplicarle un Design System propio a apps/web, del lado de la empresa (el otro lado de la plataforma, el back-office/admin queda afuera, es otra persona y se aborda aparte).

No se implementa nada todavía — esto es el brief para generar los mockups.

1. Contexto

apps/web es Next.js (App Router), hoy con un CSS global mínimo (app/globals.css) sin ningún sistema de diseño: inputs HTML sin estilizar más allá de bordes/colores básicos, un puñado de clases utilitarias (.card, .field, .btn, .fieldset, etc.) reusadas a mano en cada página. Es funcional pero se nota que es un esqueleto — botones acoplados a un solo color, sin estados hover/focus cuidados, sin jerarquía tipográfica más allá de tamaños sueltos.

Marca: ya resuelta, no es una decisión nueva. Al migrar la app del repartidor eligmos la dirección "amarillo protagonista": #FFE600 como color de acción (botones, CTAs) con texto oscuro #33362E encima, y un azul #3483FA reservado para elementos puramente informativos (nunca para botones). Este brief aplica la misma paleta al panel de empresa, para que ambas plataformas (mobile del repartidor + web de la empresa) se lean como un mismo producto y no como dos apps distintas. Hoy apps/web usa azul (--accent: #3b82f6) como color de acción — ese es justamente el cambio.

2. Inventario de pantallas

2.1 Público / autenticación

  1. Landing (app/page.tsx)

    • Hoy: badge "MVP en construcción", marca, tagline, párrafo descriptivo, 3 tarjetas de acceso directo (Panel de empresa / Publicar envío / Back-office) y una nota de disclaimer técnico.
    • Para el redesign: pensarla como la puerta de entrada real para una empresa de logística que todavía no se registró. Necesita una propuesta de valor concreta (2-3 beneficios: capacidad flexible sin flota fija, pagás sólo por paquete entregado y confirmado, etc. — ver PRD §3) y dos CTAs claros: "Registrar mi empresa" (primario) e "Ingresar" (secundario). Sacar el badge "MVP en construcción" y el link público a "Back-office" — son artefactos internos de desarrollo, no deberían estar en una landing real.
    • SiteNav (header, aparece en todas las páginas públicas): hoy marca + nav de texto (Empresa, Back-office, Docs, Ingresar). Redesign: sacar "Back-office" de la nav pública; dejar "Ingresar" y sumar un botón visualmente distinto para "Registrar empresa" (hoy no está en el header, sólo dentro del login).

  2. Login (app/login/page.tsx)

    • Título "Ingresar", subtítulo "Acceso de empresas", campo email, campo contraseña, error inline, botón submit, link a registro. Estructura simple — el foco del redesign acá es tipografía/spacing/estados de input (focus, error) más que reestructurar contenido.

  3. Registro de empresa (app/register/page.tsx + form.tsx)

    • Campos: email, CUIT, selector de depósito (DepositAddressPicker — ver componente compartido en 2.3), contraseña.
    • Es un formulario más largo de lo que parece porque el selector de depósito tiene su propia interacción en el medio (buscar dirección → elegir resultado → confirmar/corregir zona detectada). Candidato a dividirse visualmente en 2 bloques con más aire — "Datos de la cuenta" (email, CUIT, contraseña) y "Depósito" (el picker) — no necesariamente un wizard de pantallas separadas como en mobile, alcanza con una jerarquía de secciones más clara que hoy.

2.2 Panel de empresa (autenticado)

  1. Subbar de sección (empresa/layout.tsx)

    • Aparece en todas las pantallas de /empresa/*: nav interna ("Mis envíos" / "Publicar envío"), email de la empresa logueada, "Salir". Hoy es una barra de texto plano — es la navegación principal del panel, así que conviene tratarla con la misma atención que un header real (estado activo de la pestaña actual, etc.).

  2. Configurá tu depósito (empresa/publicaciones/nueva/page.tsx, rama sin depósito)

    • Pantalla interstitial que aparece si la empresa todavía no tiene depósito seteado (hoy no debería pasar en el flujo normal porque el registro ya lo pide, pero el código la contempla como estado real). Mismo DepositAddressPicker que en el registro, en un layout más chico y centrado.

  3. Mis envíos / dashboard (empresa/page.tsx)

    • Header de página: título + CTA "+ Publicar envío".
    • Estado vacío: mensaje + link a crear la primera publicación.
    • Con datos: una tarjeta por publicación, cada una con:
      • Origen (nombre de la zona del depósito).
      • Total $ y cantidad de paquetes (con marca "aprox. ±N" cuando corresponde) + precio por paquete.
      • "Divisible" / "no divisible" (allowsSplit).
      • Editor inline de cantidad — un link "✎ Editar cantidad" que expande inputs (cantidad, checkbox aproximada, margen +/-) con guardar/cancelar, sin salir de la tarjeta.
      • Ventana de retiro (fecha/hora desde–hasta).
      • Badge de estado del Shipment (PUBLISHED, PARTIALLY_ASSIGNED, FULLY_ASSIGNED, COMPLETED, CANCELLED). Hoy sólo tienen color propio PUBLISHED/AVAILABLE (azul), CONFIRMED/COMPLETED (verde) y DISPUTED/CANCELLED (rojo); PARTIALLY_ASSIGNED y FULLY_ASSIGNED caen en un gris genérico — el redesign debería darles su propio tratamiento (p. ej. algo entre el azul de "publicado" y el verde de "completo").
      • Tabla de destinos: área de destino × cantidad de paquetes.

  4. Publicar envío (empresa/publicaciones/nueva/form.tsx)

    • Título + subtítulo explicando el modelo (una publicación = una ruta).
    • Bloque "Ruta": origen (sólo lectura), precio por paquete (fijo, informativo), selector de área de destino (AreaPicker, ver 2.3), cantidad de paquetes + checkbox "cantidad aproximada" que revela un input de margen.
    • Bloque "Resumen del costo" (aparece cuando la cantidad es válida): valor total de la ruta, costo de publicar (5 % con piso de medio paquete) y la fórmula explicada en una línea.
    • Bloque "Ventanas y opciones": 4 inputs de fecha/hora (retiro desde/hasta, entrega desde/hasta) en grilla, checkbox "permite tomar el lote por partes".
    • Nuevo elemento a incorporar (mismo criterio que en mobile: diseñarlo aunque quede oculto detrás de un feature flag): checkbox "Sólo repartidores verificados" dentro de "Ventanas y opciones", 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.").
    • Error inline, botón "Publicar envío".

2.3 Componentes compartidos (se diseñan una vez, se usan en 2+ pantallas)

2.4 Fuera de alcance

3. Sistema visual a respetar

Tema oscuro, mismos tokens que ya definimos para mobile — Claude Design puede refinar tonos pero debe mantenerse en esta familia:

Fondo:          #0b0d12
Superficie/card: #141821
Borde:          #232a36
Primario (CTA): #FFE600  ·  texto sobre primario: #33362E
Informativo:    #3483FA  (nunca para botones — sólo banners/links/estados)
Texto:          #f4f6fb
Texto muted:    #9aa4b2
Éxito:          #22c55e
Peligro:        #ef4444
Advertencia:    #F5A524

Tipografía: sumar Space Grotesk para títulos (mismo criterio que mobile, que ya la cargó vía Google Fonts), cuerpo en la fuente de sistema actual. En Next.js esto se resuelve con next/font/google en vez del <link> que usa el mockup HTML.

Componentes de formulario (inputs, selects, checkboxes, fieldsets) hoy son HTML nativo con estilos mínimos — es donde más se nota la falta de sistema. Vale la pena que el mockup proponga un tratamiento consistente de: estado normal / focus / error / disabled para inputs, y un estilo de botón primario vs. secundario vs. link-button (hoy sólo existe .btn con un color fijo).

4. Tono de copy

Español rioplatense (voseo), directo. La landing puede ser un poco más "de venta" (beneficios concretos, lenguaje persuasivo corto) que el resto del panel, que debe ser utilitario y claro — la empresa que ya se registró quiere resolver rápido, no leer marketing.

5. Qué necesitamos como entregable

Prompt listo para copiar en Claude Design

Estoy diseñando el panel web de empresas de una plataforma de envíos colaborativos en Argentina (marketplace entre empresas de logística y repartidores individuales, tema oscuro). La marca ya está definida: amarillo #FFE600 como color de acción/CTA (con texto oscuro #33362E encima) sobre fondo #0b0d12/#141821, texto claro #f4f6fb, muted #9aa4b2, azul #3483FA reservado sólo para elementos informativos (nunca botones), éxito #22c55e, peligro #ef4444, advertencia #F5A524. Tipografía de títulos: Space Grotesk; cuerpo en la fuente de sistema.

Necesito rediseñar el panel de la empresa (el lado que publica los envíos, no el del repartidor ni el back-office interno):

  1. Landing pública: propuesta de valor para una empresa de logística (capacidad flexible sin flota fija, paga sólo por paquete entregado y confirmado), con dos CTAs (Registrar empresa / Ingresar). Un header con logo + nav simple (Ingresar, sin exponer nada interno).
  2. Login: email + contraseña, simple y prolijo.
  3. Registro de empresa: email, CUIT, contraseña, y un bloque de "Depósito" con un buscador de dirección (tipo autocomplete: escribís, aparece una lista de resultados con la dirección completa y la zona detectada, elegís uno, queda una tarjeta de confirmación con opción de corregir la zona a mano).
  4. Panel interno con nav propia ("Mis envíos" / "Publicar envío" + email
    • salir), y dentro de él:
    • Dashboard "Mis envíos": tarjetas de publicaciones con origen, total y cantidad de paquetes (a veces aproximada), precio por paquete, si es divisible o no, un editor de cantidad inline, ventana de retiro, un badge de estado (5 estados: publicado, parcialmente tomado, totalmente tomado, completado, cancelado — cada uno con su color) y una tabla de destinos con su cantidad de paquetes cada uno. Incluí el estado vacío (sin publicaciones todavía).
    • Publicar envío: formulario con selector de zona de destino (dos niveles: partido/localidad, o CABA con comuna/barrio), cantidad de paquetes con opción "aproximada" (+/- margen), un resumen de costo que aparece dinámicamente (valor total, costo de publicar = 5% con piso mínimo), 4 campos de fecha/hora (ventana de retiro y de entrega), un checkbox "permite tomar el lote por partes" y otro nuevo, "sólo repartidores verificados" (con texto de ayuda corto).

Quiero ver los estados de foco/error de los inputs, el estilo de botón primario (amarillo) vs. secundario/link, y las 5 variantes de color del badge de estado. Tono: español rioplatense, directo, sin jerga. El panel interno podés asumirlo desktop-first; la landing tiene que verse bien en mobile también.