File Management Dashboard - Copy this Html, Bootstrap Component to your project
Diseña un tablero moderno y elegante para una aplicación web utilizando Bootstrap, con las siguientes características: Vista Principal: Una lista o tabla que muestre todos los archivos cargados en el sistema. Columnas necesarias: Nombre del archivo. Fecha de carga. Usuario que lo cargó. Estado del archivo (e.g., "Borrador", "Publicado"). Acciones disponibles (e.g., "Editar", "Eliminar", "Descargar"). Interacción de Usuario: Botón destacado para "Cargar Nuevo Archivo" en la parte superior del tablero. Acciones para cada fila de la tabla: Archivos en estado "Borrador" deben tener un botón para "Editar" o "Eliminar". Archivos en estado "Publicado" solo permiten "Descargar". Formulario de Carga/Edición: Modal de Bootstrap para cargar nuevos archivos o modificar existentes. Campos requeridos: Campo para seleccionar un archivo del sistema. Campo para asignar un nombre al archivo (editable). Selector para cambiar el estado del archivo ("Borrador", "Publicado"). Botones dentro del modal: "Guardar", "Cancelar". Estilo Moderno: Usa los componentes de Bootstrap 5 para lograr un diseño limpio y funcional. Emplea un esquema de colores que sea profesional (e.g., tonos neutros como gris, azul, y blanco). Agrega iconos de FontAwesome o similar para las acciones (e.g., lápiz para "Editar", papelera para "Eliminar", flecha para "Descargar"). Funcionalidad Adicional: Agrega una barra de búsqueda para filtrar archivos por nombre o usuario. Implementa paginación en la tabla si hay más de 10 archivos. Usa badges de Bootstrap para destacar el estado de los archivos ("Borrador" en amarillo, "Publicado" en verde). Este diseño debe priorizar la usabilidad y accesibilidad, con un enfoque en mantener la interfaz intuitiva para usuarios sin experiencia técnica.
