Neo Encomiendas

Sistema de gestión logística para una empresa de encomiendas y paquetería, rediseñado a partir del sistema legado ("Neo_Encomiendas") con una interfaz moderna y una arquitectura de frontend mantenible.

Este proyecto es solo frontend: no hay backend real. Todos los datos son simulados con un store en memoria (Zustand) que persiste en localStorage, así que podés navegar, crear, editar y eliminar registros y los cambios se mantienen entre recargas del navegador.

Stack

• Next.js 16 (App Router, Turbopack)
• React 19
• TypeScript
• Tailwind CSS v4
• shadcn/ui (componentes tipo "new-york", basados en Radix UI)
• Zustand para el estado global (con persistencia a localStorage)
• @tanstack/react-table para las tablas de datos
• react-hook-form + zod para formularios (donde aplica)
• next-themes para modo claro/oscuro
• sonner para notificaciones toast
• Geist Sans / Geist Mono (paquete geist, tipografías oficiales de Vercel, sin depender de Google Fonts)

Identidad visual

El tema está inspirado en el estilo de Vercel: base neutra en blanco y negro puro (fondo #000 en modo oscuro), tipografía Geist y un único color de acento en azul celeste (oklch(0.588 0.158 241.966), equivalente a sky-600/sky-500) para botones, estados activos, enlaces y foco. Todos los colores viven como variables OKLCH en src/app/globals.css, así que cambiar el acento de marca es cuestión de editar --primary, --ring, --sidebar-primary e --info.

Cómo correrlo

pnpm install
pnpm dev

Abrí http://localhost:3000. Vas a ser redirigido a /login.

Usuario de prueba: cualquier DNI o alias de la nómina de personal simulada funciona con cualquier contraseña de 4+ caracteres (es un login simulado, no hay validación real). Por ejemplo:

• DNI: 41114146
• Contraseña: demo1234

Para producción:

pnpm build
pnpm start

Arquitectura

src/
├── app/                    # Rutas (App Router)
│   ├── login/               # Pantalla de acceso
│   └── (app)/                # Grupo de rutas autenticadas (sidebar + header)
│       ├── panel/             # Tablero principal (kanban de filtros)
│       ├── encomiendas/       # Alta, activas, pendientes, recepción, etc.
│       ├── levantes/
│       ├── cajas/             # Cierre de caja y control
│       ├── crr/               # Contra reembolso
│       ├── clientes/
│       ├── personal/
│       ├── vehiculos/
│       ├── sucursales/
│       ├── rutas/
│       ├── localidades/
│       └── mercadopago/       # Integración simulada
├── components/
│   ├── ui/                  # Primitivas shadcn/ui (button, input, table, dialog, etc.)
│   ├── layout/               # Sidebar, header, guard de autenticación
│   ├── shared/                # DataTable genérica, StatCard, StatusBadge, ConfirmDialog, etc.
│   └── <dominio>/            # Componentes específicos por módulo (encomiendas, clientes, personal...)
├── store/                   # Zustand: auth-store, data-store (CRUD de todas las entidades), ui-store
├── lib/
│   ├── mock/                 # Datos de referencia y generación determinística de datos de prueba
│   ├── format.ts             # Helpers de formato (moneda, fecha)
│   └── utils.ts              # Helper `cn()` de clases
└── types/                   # Modelo de dominio (Encomienda, Cliente, Personal, Vehiculo, etc.)

Decisiones de diseño

• Capa de datos desacoplada: todas las pantallas leen y escriben a través de useDataStore (Zustand). Si en el futuro se conecta un backend real, solo hay que reemplazar las acciones del store por llamadas a una API; los componentes no necesitan cambiar.
• Datos de referencia realistas: sucursales, localidades y grupos de ruta reflejan la operación real capturada del sistema legado (Misiones, Corrientes, Chaco), para que la demo se sienta representativa del negocio.
• Generación determinística: los datos simulados (encomiendas, personal, clientes, cierres de caja) se generan con un PRNG con semilla fija, evitando errores de hidratación entre servidor y cliente.
• Componentes reutilizables: una DataTable genérica (ordenamiento, búsqueda, paginación) y una familia de StatusBadge se reutilizan en más de 15 pantallas distintas.
• Diseño responsivo y con modo oscuro en toda la aplicación, con un sidebar colapsable en desktop y un menú tipo sheet en mobile.

Notas

• No hay integración real con Mercado Pago, correo ni impresión: esas pantallas están simuladas para completar el flujo visual.
• El botón "Reset de datos demo" (si se agrega en el futuro) debería limpiar localStorage y regenerar los datos desde src/lib/mock.