Crea un prototipo de una tabla de listado de facturas electrónicas emitidas, con las siguientes especificaciones de UX y UI:
🧾 Tabla principal (vista general): Columnas:
Factura # (número de documento)
Tipo (mostrar como chip/tag de color: ej. Boleta, Factura, Nota de crédito)
Reserva (ID de reserva con prefijo #, opcionalmente clicable)
Cliente (nombre o "Sin datos" como placeholder discreto)
Emisión (fecha de creación, formato corto: DD/MM/AAAA)
Monto Total (CLP, formato moneda)
Estado (mostrar como etiqueta de color: Enviado (verde), Pendiente (amarillo), Cancelado (rojo))
Acciones (icono de descarga con tooltip)
📂 Fila expandible al hacer clic en el número de factura: Mostrar tarjeta con:
Descripción del servicio/reserva: nombre del alojamiento y fechas
Cantidad, Precio Unitario, Impuesto, Total (en tabla)
Datos internos (mostrar en layout de dos columnas):
ID cuenta
ID de documento
ID de reserva
Tipo de documento
Fecha de envío
🔎 Filtros y funcionalidades: Filtros por:
Rango de fechas
Tipo de documento
Estado del documento
Búsqueda por:
Número de factura
ID de reserva
Botón de "Exportar a CSV"
🎨 Estilo visual: Tabla de bordes suaves, columnas espaciadas
Chips de estado y tipo con colores diferenciados
Íconos de acciones con tooltip
Mostrar una vista vacía con ilustración si no hay facturas
He creado un prototipo completo de la tabla de facturas electrónicas con todas las especificaciones solicitadas:
🧾 Tabla principal:
📂 Filas expandibles:
🔎 Filtros y funcionalidades:
🎨 Estilo visual:
La tabla es completamente responsive y utiliza componentes de shadcn/ui para mantener consistencia visual y accesibilidad.
Necesito hacer una pestaña superior tipo switch que diferencia entre "emitidos" y "recibidos". en "recibidos" necesito un boton para "aprobar" o "rechazar" documento
Y en el listado de documentos, en lugar de que tenga un desplegable con el detalle, preferiria un icono que me lleve a un pop de "ver detalle"
He actualizado completamente la tabla de facturas con las nuevas funcionalidades solicitadas:
🔄 Pestañas superiores:
📋 Pestaña "Recibidos":
👁️ Modal de detalles:
🎨 Mejoras de UX:
🔧 Funcionalidades mantenidas:
La interfaz ahora es mucho más intuitiva y permite gestionar tanto documentos emitidos como recibidos de manera eficiente.