Estoy creando en un WMS un modulo de reservas, genera un dashboar dummy, en funcion a la primera imagen sera la lista de reservas y al hacer click en alguna necesito que salga el detalle de la reserva desde la derecha, como lo hace Dynamics 365 que va sobreponiendo las paginas a medida que se van revisando ejemplo en la imagen, para los filtro la idea seria que esten para ser desplegados como en Power BI desde la derecha y ahi se encuentre el listado de todos los filtros disponibles ejemplo en imagen, generalo con datos Dummy y si puedes en React Native
Veo que quieres crear un módulo de reservas para WMS con:
- Dashboard principal con lista de reservas (basado en tu "Log de Reservas")
- Panel de detalle que se desliza desde la derecha al hacer clic (estilo Dynamics 365)
- Panel de filtros desplegable desde la derecha (estilo Power BI)
Lamentablemente, React Native no es compatible con este entorno de v0/Vercel, pero puedo crear una versión web en React/Next.js con el mismo patrón de UX que funcionaría perfectamente y podría adaptarse fácilmente a React Native después.
Voy a construir el dashboard con datos dummy basados en tus imágenes.
He creado el dashboard completo del módulo de reservas para tu WMS con las siguientes características:
Funcionalidades implementadas:
- Lista de Reservas - Tabla con todas las columnas de tu imagen: ID Reserva, Fecha Reserva, Fecha Caducidad, Estado, Observaciones, Cantidad Pendiente, Usuario Creador, Descripción SKU, Operador, Centro Dist., Dueño, y Movimiento.
Panel de Detalle (estilo Dynamics 365) - Al hacer clic en cualquier reserva, se desliza un panel desde la derecha con toda la información detallada, incluyendo:
- Información general y SKU
- Cantidades con barra de progreso visual
- Fechas importantes
- Ubicación y asignación
- Información del cliente
- Documentos asociados
Panel de Filtros (estilo Power BI) - Botón "FILTER" que despliega un panel lateral con:
- Filtros por fecha (desde/hasta)
- Búsqueda por ID Reserva
- Filtros desplegables para: Centro Distribución, Dueño, Cliente, Estado, Movimiento, Prioridad, Operador
- KPIs en la parte superior - Tarjetas con métricas clave: Total Reservas, Abiertas, Consumidas, Cerradas, Pendientes, Unidades Totales, Unidades Pendientes.
- Panel inferior de documentos - Similar a tu imagen de referencia, muestra los documentos asociados de la reserva seleccionada.
Los datos dummy están basados en tu imagen del Log de Reservas con información realista de clientes, SKUs y estados.