crear un sistema de almacén en forma de tabla: . No. de parte, descripción, No. de parte, cantidad, sistema: (cougar, MI17-V5) Ubicación (Almacén 1, Almacén 2, Almacén de lubricantes, cuarto frio), estante, botón de búsqueda en la parte superior derecha, editar el componente, eliminar, despachar por cantidades con reporte de retiro y a quien lo retiro y quien lo despacho, historial de despacho por componente y que genere una alerta cuando el inventario del componente llegue a 0 y resalte la celda completa del componente de color rojo, con acceso mediante registro de usuario y cerrar sesión en la parte superior derecha y en la parte superior izquierda una imagen del GAP No.4 y un filtro que me agrupe los sistemas
Aquí te presento un ejemplo de cómo podrías implementar el sistema de almacén en forma de tabla utilizando HTML, CSS y JavaScript: **index.html** ```html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Sistema de Almacén</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <img src="gap.png" alt="GAP No.4" style="float: left; margin: 10px;"> <button id="cerrar-sesion">Cerrar Sesión</button> <input type="text" id="filtro" placeholder="Buscar..."> <button id="boton-buscar">Buscar</button> </header> <main> <table id="tabla-almacen"> <thead> <tr> <th>No. de Parte</th> <th>Descripción</th> <th>Cantidad</th> <th>Sistema</th> <th>Ubicación</th> <th>Estante</th> <th>Acciones</th> </tr> </thead> <tbody id="cuerpo-tabla"> <!-- Cuerpo de la tabla se llenará con JavaScript --> </tbody> </table> </main> <script src="script.js"></script> </body> </html> ``` **styles.css** ```css body { font-family: Arial, sans-serif; } header { background-color: #f0f0f0; padding: 10px; border-bottom: 1px solid #ccc; } header img { width: 50px; height: 50px; } #cerrar-sesion { float: right; margin: 10px; } #filtro { width: 200px; height: 30px; padding: 10px; font-size: 16px; } #boton-buscar { background-color: #4CAF50; color: #fff; border: none; padding: 10px 20px; font-size: 16px; cursor: pointer; } #boton-buscar:hover { background-color: #3e8e41; } #tabla-almacen { border-collapse: collapse; width: 100%; } #tabla-almacen th, #tabla-almacen td { border: 1px solid #ddd; padding: 10px; text-align: left; } #tabla-almacen th { background-color: #f0f0f0; } #cuerpo-tabla tr:hover { background-color: #f9f9f9; } .alerta { background-color: #ff0000; color: #fff; padding: 10px; border: 1px solid #ff0000; } ``` **script.js** ```javascript // Variables let usuarios = [ { nombre: "Juan", password: "1234" }, { nombre: "Pedro", password: "5678" } ]; let almacen = [ { noParte: "MI17-V5", descripcion: "Componente 1", cantidad: 10, sistema: "Cougar", ubicacion: "Almacén 1", estante: "Estante 1" }, { noParte: "MI17-V6", descripcion: "Componente 2", cantidad: 20, sistema: "Cougar", ubicacion: "Almacén 2", estante: "Estante 2" }, { noParte: "MI17-V7", descripcion: "Componente 3", cantidad: 30, sistema: "Cougar", ubicacion: "Almacén 3", estante: "Estante 3" } ]; let usuarioActual = null; // Funciones function iniciarSesion(nombre, password) { for (let i = 0; i < usuarios.length; i++) { if (usuarios[i].nombre === nombre && usuarios[i].password === password) { usuarioActual = usuarios[i]; return true; } } return false; } function cerrarSesion() { usuarioActual = null; } function buscarComponente(filtro) { let resultado = []; for (let i = 0; i < almacen.length; i++) { if (almacen[i].noParte.includes(filtro) || almacen[i].descripcion.includes(filtro)) { resultado.push(almacen[i]); } } return resultado; } function agregarComponente() { let noParte = prompt("Ingrese el número de parte:"); let descripcion = prompt("Ingrese la descripción:"); let cantidad = parseInt(prompt("Ingrese la cantidad:")); let sistema = prompt("Ingrese el sistema:"); let ubicacion = prompt("Ingrese la ubicación:"); let estante = prompt("Ingrese el estante:"); almacen.push({ noParte, descripcion, cantidad, sistema, ubicacion, estante }); actualizarTabla(); } function editarComponente(index) { let noParte = prompt("Ingrese el nuevo número de parte (dejar vacío para mantener el actual):"); let descripcion = prompt("Ingrese la nueva descripción (dejar vacío para mantener la actual):"); let cantidad = parseInt(prompt("Ingrese la nueva cantidad (dejar vacío para mantener la actual):")); let sistema = prompt("Ingrese el nuevo sistema (dejar vacío para mantener el actual):"); let ubicacion = prompt("Ingrese la nueva ubicación (dejar vacío para mantener la actual):"); let estante = prompt("Ingrese el nuevo estante (dejar vacío para mantener el actual):"); almacen[index].noParte = noParte || almacen[index].noParte; almacen[index].descripcion = descripcion || almacen[index].descripcion; almacen[index].cantidad = cantidad || almacen[index].cantidad; almacen[index].sistema = sistema || almacen[index].sistema; almacen[index].ubicacion = ubicacion || almacen[index].ubicacion; almacen[index].estante = estante || almacen[index].estante; actualizarTabla(); } function eliminarComponente(index) { almacen.splice(index, 1); actualizarTabla(); } function despacharComponente(index) { let cantidad = parseInt(prompt("Ingrese la cantidad a despachar:")); if (cantidad > almacen[index].cantidad) { alert("No hay suficiente cantidad para despachar."); return; } almacen[index].cantidad -= cantidad; let despachador = prompt("Ingrese el nombre del despachador:"); let reporte = `Componente ${almacen[index].noParte} despachado a ${despachador} en cantidad de ${cantidad}.`; alert(reporte); actualizarTabla(); } function actualizarTabla() { let cuerpoTabla = document.getElementById("cuerpo-tabla"); cuerpoTabla.innerHTML = ""; for (let i = 0; i < almacen.length; i++) { let fila = document.createElement("tr"); let noParte = document.createElement("td"); noParte.textContent = almacen[i].noParte; fila.appendChild(noParte); let descripcion = document.createElement("td"); descripcion.textContent = almacen[i].descripcion; fila.appendChild(descripcion); let cantidad = document.createElement("td"); cantidad.textContent = almacen[i].cantidad; fila.appendChild(cantidad); let sistema = document.createElement("td"); sistema.textContent = almacen[i].sistema; fila.appendChild(sistema); let ubicacion = document.createElement("td"); ubicacion.textContent = almacen[i].ubicacion; fila.appendChild(ubicacion); let estante = document.createElement("td"); estante.textContent = almacen[i].estante; fila.appendChild(estante); let acciones = document.createElement("td"); let editar = document.createElement("button"); editar.textContent = "Editar"; editar.onclick = function() { editarComponente(i); }; acciones.appendChild(editar); let eliminar = document.createElement("button"); eliminar.textContent = "Eliminar"; eliminar.onclick = function() { eliminarComponente(i); }; acciones.appendChild(eliminar); let despachar = document.createElement("button"); despachar.textContent = "Despachar"; despachar.onclick = function() { despacharComponente(i); }; acciones.appendChild(despachar); fila.appendChild(acciones); if (almacen[i].cantidad === 0) { fila.classList.add("alerta"); } cuerpoTabla.appendChild(fila); } } // Eventos document.getElementById("cerrar-sesion").addEventListener("click", cerrarSesion); document.getElementById("filtro").addEventListener("input", function() { let filtro = this.value; let resultado = buscarComponente(filtro); let cuerpoTabla = document.getElementById("cuerpo-tabla"); cuerpoTabla.innerHTML = ""; for (let i = 0; i < resultado.length; i++) { let fila = document.createElement("tr"); let noParte = document.createElement("td"); noParte.textContent = resultado[i].noParte; fila.appendChild(noParte); let descripcion = document.createElement("td"); descripcion.textContent = resultado[i].descripcion; fila.appendChild(descripcion); let cantidad = document.createElement("td"); cantidad.textContent = resultado[i].cantidad; fila.appendChild(cantidad); let sistema = document.createElement("td"); sistema.textContent = resultado[i].sistema; fila.appendChild(sistema); let ubicacion = document.createElement("td"); ubicacion.textContent = resultado[i].ubicacion; fila.appendChild(ubicacion); let estante = document.createElement("td"); estante.textContent = resultado[i].estante; fila.appendChild(estante); let acciones = document.createElement("td"); let editar = document.createElement("button"); editar.textContent = "Editar"; editar.onclick = function() { editarComponente(resultado.indexOf(resultado[i])); }; acciones.appendChild(editar); let eliminar = document.createElement("button"); eliminar.textContent = "Eliminar"; eliminar.onclick = function() { eliminarComponente(resultado.indexOf(resultado[i])); }; acciones.appendChild(eliminar); let despachar = document.createElement("button"); despachar.textContent = "Despachar"; despachar.onclick = function() { despacharComponente(resultado.indexOf(resultado[i])); }; acciones.appendChild(despachar); fila.appendChild(acciones); if (resultado[i].cantidad === 0) { fila.classList.add("alerta"); } cuerpoTabla.appendChild(fila); } }); document.getElementById("boton-buscar").addEventListener("click", function() { let filtro = document.getElementById("filtro").value; let resultado = buscarComponente(filtro); let cuerpoTabla = document.getElementById("cuerpo-tabla"); cuerpoTabla.innerHTML = ""; for (let i = 0; i < resultado.length; i++) { let fila = document.createElement("tr"); let noParte = document.createElement("td"); noParte.textContent = resultado[i].noParte; fila.appendChild(noParte); let descripcion = document.createElement("td"); descripcion.textContent = resultado[i].descripcion; fila.appendChild(descripcion); let cantidad = document.createElement("td"); cantidad.textContent = resultado[i].cantidad; fila.appendChild(cantidad); let sistema = document.createElement("td"); sistema.textContent = resultado[i].sistema; fila.appendChild(sistema); let ubicacion = document.createElement("td"); ubicacion.textContent = resultado[i].ubicacion; fila.appendChild(ubicacion); let estante = document.createElement("td"); estante.textContent = resultado[i].estante; fila.appendChild(estante); let acciones = document.createElement("td"); let editar = document.createElement("button"); editar.textContent = "Editar"; editar.onclick = function() { editarComponente(resultado.indexOf(resultado[i])); }; acciones.appendChild(editar); let eliminar = document.createElement("button"); eliminar.textContent = "Eliminar"; eliminar.onclick = function() { eliminarComponente(resultado.indexOf(resultado[i])); }; acciones.appendChild(eliminar); let despachar = document.createElement("button"); despachar.textContent = "Despachar"; despachar.onclick = function() { despacharComponente(resultado.indexOf(resultado[i])); }; acciones.appendChild(despachar); fila.appendChild(acciones); if (resultado[i].cantidad === 0) { fila.classList.add("alerta"); } cuerpoTabla.appendChild(fila); } }); document.getElementById("boton-buscar").addEventListener("click", function() { actualizarTabla(); }); ``` **Nota:** Este es un ejemplo básico y no incluye validaciones de seguridad ni errores. Debes adaptarlo a tus necesidades y agregar las funcionalidades que requieras. **Nota 2:** El código utiliza la API de JavaScript para interactuar con el DOM y crear la tabla. Si no estás familiarizado con la API de JavaScript, te recomiendo leer la documentación oficial de Mozilla para aprender más sobre ella. **Nota 3:** El código utiliza la función `prompt()` para solicitar al usuario que ingrese información. Si no estás familiarizado con esta función, te recomiendo leer la documentación oficial de Mozilla para aprender más sobre ella. **Nota 4:** El código utiliza la función `alert()` para mostrar mensajes de alerta al usuario. Si no estás familiarizado con esta función, te recomiendo leer la documentación oficial de Mozilla para aprender más sobre ella. **Nota 5:** El código utiliza la función `confirm()` para solicitar al usuario que confirme una acción. Si no estás familiarizado con esta función, te recomiendo leer la documentación oficial de Mozilla para aprender más sobre ella. **Nota 6:** El código utiliza la función `prompt()` para solicitar al usuario que ingrese un