Default Component - Copy this React, Tailwind Component to your project

"Genera una interfaz moderna y funcional para la pantalla de Reportes en StockMaster, siguiendo el diseño y las tonalidades de la pantalla de inicio de sesión. Usa un fondo blanco con acentos en azul y degradados en tonos de azul. La interfaz debe ser clara, organizada e intuitiva. 📊 Elementos clave: Gráficos dinámicos: Ventas totales en un periodo seleccionado (gráfico de líneas). Productos más vendidos (gráfico de pastel). Niveles de inventario (gráfico de barras). Tendencias de ventas (comparación de periodos). Filtros avanzados: Selector de rango de fechas. Filtro por categoría de producto. Botón de "Aplicar filtros" que actualiza los datos sin recargar la página. Tabla de datos detallados: Columnas: Fecha de venta, Producto, Cantidad, Precio Unitario, Total. Ordenación y paginación. Opciones de exportación: Botones bien visibles para exportar en PDF y Excel. Antes de exportar en PDF, debe haber una opción de "Vista previa del PDF" donde el usuario pueda ver cómo quedará el documento antes de descargarlo. 📌 Funcionalidad adicional: Vista previa del PDF: Al hacer clic en "Vista previa del PDF", se mostrará una versión generada del reporte dentro de un modal emergente o una nueva ventana. El usuario podrá revisar los gráficos y la tabla antes de confirmar la descarga. Debe incluir un botón de "Descargar PDF" dentro de la vista previa. Interactividad y usabilidad: Diseño responsive para adaptarse a distintos dispositivos. Alerta si no hay datos disponibles. Efectos al pasar el cursor sobre gráficos y botones. Dame la interaz en español