caja menor y libro diario
This commit is contained in:
@@ -0,0 +1,195 @@
|
||||
// ============ ACCIONES: MENÚ ⋮ Y MODALES (compartido) ============
|
||||
// Requiere que la página tenga:
|
||||
// - variable global NOMBRE_HOJA
|
||||
// - función global cargarMovimientos()
|
||||
// - elemento #opcionesTipo con <option>s para el select de tipo
|
||||
|
||||
let registroEditando = null;
|
||||
let registroBorrando = null;
|
||||
|
||||
// ============ MENÚ ⋮ ============
|
||||
function crearMenuOpciones(mov) {
|
||||
const contenedor = document.createElement("div");
|
||||
contenedor.className = "menu-opciones";
|
||||
contenedor.innerHTML = `
|
||||
<button class="btn-opciones" title="Opciones">⋮</button>
|
||||
<div class="dropdown-opciones">
|
||||
<button class="opcion-editar">✏️ Editar</button>
|
||||
<button class="opcion-borrar">🗑️ Borrar</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
const btnOpciones = contenedor.querySelector(".btn-opciones");
|
||||
const dropdown = contenedor.querySelector(".dropdown-opciones");
|
||||
|
||||
btnOpciones.addEventListener("click", (e) => {
|
||||
e.stopPropagation();
|
||||
// Cerrar otros dropdowns abiertos
|
||||
document.querySelectorAll(".dropdown-opciones.abierto").forEach(d => {
|
||||
if (d !== dropdown) d.classList.remove("abierto");
|
||||
});
|
||||
dropdown.classList.toggle("abierto");
|
||||
});
|
||||
|
||||
contenedor.querySelector(".opcion-editar").addEventListener("click", () => {
|
||||
dropdown.classList.remove("abierto");
|
||||
abrirModalEditar(mov);
|
||||
});
|
||||
|
||||
contenedor.querySelector(".opcion-borrar").addEventListener("click", () => {
|
||||
dropdown.classList.remove("abierto");
|
||||
abrirModalBorrar(mov);
|
||||
});
|
||||
|
||||
return contenedor;
|
||||
}
|
||||
|
||||
// Cerrar dropdowns al hacer clic fuera
|
||||
document.addEventListener("click", () => {
|
||||
document.querySelectorAll(".dropdown-opciones.abierto").forEach(d => d.classList.remove("abierto"));
|
||||
});
|
||||
|
||||
// ============ MODAL EDITAR ============
|
||||
function abrirModalEditar(mov) {
|
||||
registroEditando = mov;
|
||||
document.getElementById("editFecha").value = formatearFechaInput(mov.Fecha);
|
||||
|
||||
// Seleccionar la opción correcta en el select
|
||||
const selectTipo = document.getElementById("editTipo");
|
||||
selectTipo.value = mov.Tipo;
|
||||
|
||||
document.getElementById("editDescripcion").value = mov["Descripción"];
|
||||
document.getElementById("editMonto").value = parseInt(mov.Monto) || 0;
|
||||
document.getElementById("modalEditarFondo").classList.add("abierto");
|
||||
}
|
||||
|
||||
function cerrarModalEditar() {
|
||||
registroEditando = null;
|
||||
document.getElementById("modalEditarFondo").classList.remove("abierto");
|
||||
}
|
||||
|
||||
async function guardarEdicion() {
|
||||
if (!registroEditando) return;
|
||||
|
||||
const datos = {
|
||||
hoja: NOMBRE_HOJA,
|
||||
id: registroEditando.id,
|
||||
datos: {
|
||||
"Fecha": document.getElementById("editFecha").value,
|
||||
"Tipo": document.getElementById("editTipo").value,
|
||||
"Descripción": document.getElementById("editDescripcion").value,
|
||||
"Monto": document.getElementById("editMonto").value
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const respuesta = await fetch("/actualizar", {
|
||||
method: "PUT",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(datos)
|
||||
});
|
||||
const resultado = await respuesta.json();
|
||||
if (resultado.error) {
|
||||
alert("Error: " + resultado.error);
|
||||
return;
|
||||
}
|
||||
cerrarModalEditar();
|
||||
cargarMovimientos();
|
||||
} catch (error) {
|
||||
console.error("Error al actualizar:", error);
|
||||
alert("Error al actualizar el registro");
|
||||
}
|
||||
}
|
||||
|
||||
// ============ MODAL BORRAR ============
|
||||
function abrirModalBorrar(mov) {
|
||||
registroBorrando = mov;
|
||||
document.getElementById("borrarDescripcion").textContent =
|
||||
`"${mov["Descripción"]}" — $${formatearMonto(mov.Monto)}`;
|
||||
document.getElementById("modalBorrarFondo").classList.add("abierto");
|
||||
}
|
||||
|
||||
function cerrarModalBorrar() {
|
||||
registroBorrando = null;
|
||||
document.getElementById("modalBorrarFondo").classList.remove("abierto");
|
||||
}
|
||||
|
||||
async function confirmarBorrar() {
|
||||
if (!registroBorrando) return;
|
||||
|
||||
try {
|
||||
const respuesta = await fetch("/borrar", {
|
||||
method: "DELETE",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ hoja: NOMBRE_HOJA, id: registroBorrando.id })
|
||||
});
|
||||
const resultado = await respuesta.json();
|
||||
if (resultado.error) {
|
||||
alert("Error: " + resultado.error);
|
||||
return;
|
||||
}
|
||||
cerrarModalBorrar();
|
||||
cargarMovimientos();
|
||||
} catch (error) {
|
||||
console.error("Error al borrar:", error);
|
||||
alert("Error al borrar el registro");
|
||||
}
|
||||
}
|
||||
|
||||
// ============ AUXILIAR ============
|
||||
// Convierte fecha al formato YYYY-MM-DD que acepta <input type="date">
|
||||
function formatearFechaInput(fecha) {
|
||||
if (!fecha) return "";
|
||||
const f = new Date(fecha);
|
||||
const yyyy = f.getFullYear();
|
||||
const mm = String(f.getMonth() + 1).padStart(2, "0");
|
||||
const dd = String(f.getDate()).padStart(2, "0");
|
||||
return `${yyyy}-${mm}-${dd}`;
|
||||
}
|
||||
|
||||
// Cerrar modales al hacer clic en el fondo oscuro
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
document.getElementById("modalEditarFondo").addEventListener("click", (e) => {
|
||||
if (e.target.id === "modalEditarFondo") cerrarModalEditar();
|
||||
});
|
||||
document.getElementById("modalBorrarFondo").addEventListener("click", (e) => {
|
||||
if (e.target.id === "modalBorrarFondo") cerrarModalBorrar();
|
||||
});
|
||||
document.getElementById("btnGuardarEdicion").addEventListener("click", guardarEdicion);
|
||||
document.getElementById("btnCancelarEdicion").addEventListener("click", cerrarModalEditar);
|
||||
document.getElementById("btnConfirmarBorrar").addEventListener("click", confirmarBorrar);
|
||||
document.getElementById("btnCancelarBorrar").addEventListener("click", cerrarModalBorrar);
|
||||
|
||||
// Botón de sincronización manual en el nav
|
||||
const btnSync = document.getElementById("btnSync");
|
||||
if (btnSync) btnSync.addEventListener("click", forzarSync);
|
||||
});
|
||||
|
||||
// ============ SINCRONIZACIÓN MANUAL ============
|
||||
async function forzarSync() {
|
||||
const btnSync = document.getElementById("btnSync");
|
||||
btnSync.disabled = true;
|
||||
btnSync.textContent = "⏳";
|
||||
|
||||
try {
|
||||
const respuesta = await fetch("/sincronizar", { method: "POST" });
|
||||
const resultado = await respuesta.json();
|
||||
|
||||
if (resultado.pendientes === 0) {
|
||||
btnSync.textContent = "✅";
|
||||
} else {
|
||||
btnSync.textContent = `⚠️ ${resultado.pendientes}`;
|
||||
}
|
||||
// Recargar la tabla por si hubo cambios de estado
|
||||
cargarMovimientos();
|
||||
} catch (error) {
|
||||
console.error("Error al sincronizar:", error);
|
||||
btnSync.textContent = "❌";
|
||||
}
|
||||
|
||||
// Volver al estado normal después de 2 segundos
|
||||
setTimeout(() => {
|
||||
btnSync.disabled = false;
|
||||
btnSync.textContent = "🔄 Sync";
|
||||
}, 2000);
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>App Luisa - Averías</title>
|
||||
<link rel="stylesheet" href="estilos.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>⚠️ Averías</h1>
|
||||
</header>
|
||||
|
||||
<nav class="nav-menu">
|
||||
<a href="index.html">🏠 Inicio</a>
|
||||
<a href="cajaMenor.html">💰 Caja Menor</a>
|
||||
<a href="libroDiario.html">📒 Libro Diario</a>
|
||||
<a href="transportadoras.html">🚚 Transportadoras</a>
|
||||
<a href="averias.html" class="active">⚠️ Averías</a>
|
||||
<a href="pagosMensuales.html">💳 Pagos Mensuales</a>
|
||||
<a href="https://script.google.com/macros/s/AKfycbxTNLv-ZJoboN1IybWeSXITP_FkQf6APFFbOMCX3mPMOaBBh2ACbpLBeMOHSbutKLAtYA/exec" target="_blank">✅ Confirmación</a>
|
||||
</nav>
|
||||
|
||||
<main class="contenido">
|
||||
<p>Aquí irá el contenido de averías.</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,131 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>App Luisa - Caja Menor</title>
|
||||
<link rel="stylesheet" href="estilos.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>💰 Caja Menor</h1>
|
||||
</header>
|
||||
|
||||
<nav class="nav-menu">
|
||||
<a href="index.html">🏠 Inicio</a>
|
||||
<a href="cajaMenor.html" class="active">💰 Caja Menor</a>
|
||||
<a href="libroDiario.html">📒 Libro Diario</a>
|
||||
<a href="transportadoras.html">🚚 Transportadoras</a>
|
||||
<a href="averias.html">⚠️ Averías</a>
|
||||
<a href="pagosMensuales.html">💳 Pagos Mensuales</a>
|
||||
<a href="https://script.google.com/macros/s/AKfycbxTNLv-ZJoboN1IybWeSXITP_FkQf6APFFbOMCX3mPMOaBBh2ACbpLBeMOHSbutKLAtYA/exec" target="_blank">✅ Confirmación</a>
|
||||
<button class="btn-sync" id="btnSync" title="Sincronizar con Google Sheets">🔄 Sync</button>
|
||||
</nav>
|
||||
|
||||
<main class="contenido">
|
||||
<!-- FORMULARIO -->
|
||||
<div class="formulario-card">
|
||||
<h2>Nuevo Movimiento</h2>
|
||||
<form id="formMovimiento">
|
||||
<div class="form-grupo">
|
||||
<label for="fecha">Fecha</label>
|
||||
<input type="date" id="fecha" required>
|
||||
</div>
|
||||
|
||||
<div class="form-grupo">
|
||||
<label for="tipo">Tipo</label>
|
||||
<select id="tipo" required>
|
||||
<option value="">Seleccionar...</option>
|
||||
<option value="Ingreso">💵 Ingreso</option>
|
||||
<option value="Salida">💸 Salida</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-grupo">
|
||||
<label for="descripcion">Descripción</label>
|
||||
<input type="text" id="descripcion" placeholder="Ej: Pago de papelería" required>
|
||||
</div>
|
||||
|
||||
<div class="form-grupo">
|
||||
<label for="monto">Monto</label>
|
||||
<input type="number" id="monto" placeholder="0" min="0" step="1" required>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-guardar">💾 Guardar</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- TOTAL -->
|
||||
<div class="total-card">
|
||||
<h2>Total en Caja</h2>
|
||||
<p id="totalCaja" class="total-monto">$0.00</p>
|
||||
<p class="total-detalle">Ingresos − Salidas</p>
|
||||
</div>
|
||||
|
||||
<!-- TABLA -->
|
||||
<div class="tabla-card">
|
||||
<h2>📋 Movimientos</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Fecha</th>
|
||||
<th>Tipo</th>
|
||||
<th>Descripción</th>
|
||||
<th>Monto</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tablaMovimientos">
|
||||
<tr><td colspan="5" class="sin-datos">Cargando...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- MODAL EDITAR -->
|
||||
<div class="modal-fondo" id="modalEditarFondo">
|
||||
<div class="modal">
|
||||
<h3>✏️ Editar movimiento</h3>
|
||||
<div class="form-grupo">
|
||||
<label for="editFecha">Fecha</label>
|
||||
<input type="date" id="editFecha">
|
||||
</div>
|
||||
<div class="form-grupo">
|
||||
<label for="editTipo">Tipo</label>
|
||||
<select id="editTipo">
|
||||
<option value="Ingreso">💵 Ingreso</option>
|
||||
<option value="Salida">💸 Salida</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-grupo">
|
||||
<label for="editDescripcion">Descripción</label>
|
||||
<input type="text" id="editDescripcion">
|
||||
</div>
|
||||
<div class="form-grupo">
|
||||
<label for="editMonto">Monto</label>
|
||||
<input type="number" id="editMonto" min="0" step="1">
|
||||
</div>
|
||||
<div class="modal-botones">
|
||||
<button class="btn-cancelar" id="btnCancelarEdicion">Cancelar</button>
|
||||
<button class="btn-confirmar" id="btnGuardarEdicion">Guardar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL BORRAR -->
|
||||
<div class="modal-fondo" id="modalBorrarFondo">
|
||||
<div class="modal">
|
||||
<h3>🗑️ Borrar movimiento</h3>
|
||||
<p class="modal-texto-borrar">¿Seguro que quieres borrar este registro?</p>
|
||||
<p class="modal-texto-borrar" id="borrarDescripcion"></p>
|
||||
<div class="modal-botones">
|
||||
<button class="btn-cancelar" id="btnCancelarBorrar">Cancelar</button>
|
||||
<button class="btn-borrar-confirmar" id="btnConfirmarBorrar">Borrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="acciones.js"></script>
|
||||
<script src="cajaMenor.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,136 @@
|
||||
// ============ CONFIGURACIÓN ============
|
||||
// Mismo servidor: rutas relativas
|
||||
const API_URL = "";
|
||||
const NOMBRE_HOJA = "cajaMenor";
|
||||
|
||||
// ============ CARGAR DATOS AL ABRIR LA PÁGINA ============
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
cargarMovimientos();
|
||||
});
|
||||
|
||||
// ============ LEER DATOS ============
|
||||
async function cargarMovimientos() {
|
||||
const tbody = document.getElementById("tablaMovimientos");
|
||||
|
||||
try {
|
||||
const respuesta = await fetch(`/leer?hoja=${NOMBRE_HOJA}`);
|
||||
const data = await respuesta.json();
|
||||
|
||||
if (data.error) {
|
||||
tbody.innerHTML = `<tr><td colspan="4" class="sin-datos">Error: ${data.error}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
mostrarMovimientos(data.datos);
|
||||
calcularTotal(data.datos);
|
||||
|
||||
} catch (error) {
|
||||
tbody.innerHTML = `<tr><td colspan="4" class="sin-datos">Error al cargar datos</td></tr>`;
|
||||
console.error("Error:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// ============ MOSTRAR EN LA TABLA ============
|
||||
function mostrarMovimientos(movimientos) {
|
||||
const tbody = document.getElementById("tablaMovimientos");
|
||||
|
||||
if (movimientos.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="5" class="sin-datos">No hay movimientos registrados</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = "";
|
||||
|
||||
// Mostrar del más reciente al más antiguo (ya viene ordenado del backend)
|
||||
movimientos.forEach(mov => {
|
||||
const fila = document.createElement("tr");
|
||||
const esIngreso = mov.Tipo === "Ingreso";
|
||||
|
||||
fila.innerHTML = `
|
||||
<td>${formatearFecha(mov.Fecha)}</td>
|
||||
<td><span class="${esIngreso ? 'badge-ingreso' : 'badge-salida'}">${esIngreso ? '💵' : '💸'} ${mov.Tipo}</span></td>
|
||||
<td>${mov["Descripción"]}</td>
|
||||
<td class="${esIngreso ? 'monto-ingreso' : 'monto-salida'}">${esIngreso ? '+' : '-'}$${formatearMonto(mov.Monto)}</td>
|
||||
`;
|
||||
// Menú de opciones (⋮) con modales
|
||||
const celdaOpciones = document.createElement("td");
|
||||
celdaOpciones.appendChild(crearMenuOpciones(mov));
|
||||
fila.appendChild(celdaOpciones);
|
||||
|
||||
tbody.appendChild(fila);
|
||||
});
|
||||
}
|
||||
|
||||
// ============ CALCULAR TOTAL ============
|
||||
function calcularTotal(movimientos) {
|
||||
let total = 0;
|
||||
|
||||
movimientos.forEach(mov => {
|
||||
const monto = parseFloat(mov.Monto) || 0;
|
||||
if (mov.Tipo === "Ingreso") {
|
||||
total += monto;
|
||||
} else {
|
||||
total -= monto;
|
||||
}
|
||||
});
|
||||
|
||||
const totalElement = document.getElementById("totalCaja");
|
||||
totalElement.textContent = `$${formatearMonto(total)}`;
|
||||
totalElement.className = "total-monto " + (total >= 0 ? "positivo" : "negativo");
|
||||
}
|
||||
|
||||
// ============ GUARDAR NUEVO MOVIMIENTO ============
|
||||
document.getElementById("formMovimiento").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const btnGuardar = e.target.querySelector("button");
|
||||
btnGuardar.disabled = true;
|
||||
btnGuardar.textContent = "⏳ Guardando...";
|
||||
|
||||
const datos = {
|
||||
hoja: NOMBRE_HOJA,
|
||||
datos: {
|
||||
"Fecha": document.getElementById("fecha").value,
|
||||
"Tipo": document.getElementById("tipo").value,
|
||||
"Descripción": document.getElementById("descripcion").value,
|
||||
"Monto": document.getElementById("monto").value
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const respuesta = await fetch("/guardar", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(datos)
|
||||
});
|
||||
|
||||
const resultado = await respuesta.json();
|
||||
|
||||
if (resultado.error) {
|
||||
alert("Error: " + resultado.error);
|
||||
}
|
||||
|
||||
// Limpiar formulario y recargar tabla
|
||||
document.getElementById("formMovimiento").reset();
|
||||
cargarMovimientos();
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error al guardar:", error);
|
||||
alert("Error al guardar el registro");
|
||||
}
|
||||
|
||||
btnGuardar.disabled = false;
|
||||
btnGuardar.textContent = "💾 Guardar";
|
||||
});
|
||||
|
||||
// ============ FUNCIONES AUXILIARES ============
|
||||
function formatearFecha(fecha) {
|
||||
if (!fecha) return "";
|
||||
const f = new Date(fecha);
|
||||
return f.toLocaleDateString("es-CO", { day: "2-digit", month: "2-digit", year: "numeric" });
|
||||
}
|
||||
|
||||
function formatearMonto(monto) {
|
||||
const num = parseFloat(monto) || 0;
|
||||
return num.toLocaleString("es-CO", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
|
||||
}
|
||||
@@ -0,0 +1,492 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #f0f2f5;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
header {
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 18px 20px;
|
||||
}
|
||||
|
||||
header h1 {
|
||||
font-size: 1.4rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
header p {
|
||||
font-size: 1.1rem;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.menu-container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
||||
gap: 25px;
|
||||
max-width: 1200px;
|
||||
margin: 40px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.menu-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 40px 20px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: #2c3e50;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
transition: transform 0.3s ease, box-shadow 0.3s ease;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.menu-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 8px 20px rgba(0,0,0,0.15);
|
||||
}
|
||||
|
||||
.menu-icon {
|
||||
font-size: 3rem;
|
||||
}
|
||||
|
||||
.menu-card span {
|
||||
font-size: 1.3rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ============ NAVEGACIÓN ============ */
|
||||
.nav-menu {
|
||||
background: #34495e;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.2);
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-menu a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 16px 24px;
|
||||
font-size: 1rem;
|
||||
font-weight: 500;
|
||||
transition: background 0.3s ease, color 0.3s ease;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
|
||||
.nav-menu a:hover {
|
||||
background: rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.nav-menu a.active {
|
||||
background: #2c3e50;
|
||||
border-bottom: 3px solid #3498db;
|
||||
}
|
||||
|
||||
.contenido {
|
||||
max-width: 1200px;
|
||||
margin: 40px auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
/* ============ FORMULARIO ============ */
|
||||
.formulario-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.formulario-card h2 {
|
||||
margin-bottom: 20px;
|
||||
color: #2c3e50;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.formulario-card form {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 15px;
|
||||
align-items: end;
|
||||
}
|
||||
|
||||
.form-grupo {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.form-grupo label {
|
||||
font-weight: 600;
|
||||
color: #2c3e50;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.form-grupo input,
|
||||
.form-grupo select {
|
||||
padding: 10px 12px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
transition: border-color 0.3s ease;
|
||||
}
|
||||
|
||||
.form-grupo input:focus,
|
||||
.form-grupo select:focus {
|
||||
outline: none;
|
||||
border-color: #3498db;
|
||||
}
|
||||
|
||||
.btn-guardar {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 12px 30px;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-guardar:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
.btn-guardar:disabled {
|
||||
background: #95a5a6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ============ TOTAL ============ */
|
||||
.total-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 25px 30px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.total-card h2 {
|
||||
color: #2c3e50;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.total-monto {
|
||||
font-size: 2.2rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.total-monto.positivo {
|
||||
color: #27ae60;
|
||||
}
|
||||
|
||||
.total-monto.negativo {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
.total-detalle {
|
||||
color: #7f8c8d;
|
||||
font-size: 0.85rem;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
/* ============ TABLA ============ */
|
||||
.tabla-card {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.tabla-card h2 {
|
||||
margin-bottom: 20px;
|
||||
color: #2c3e50;
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.tabla-card table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.tabla-card th {
|
||||
background: #2c3e50;
|
||||
color: white;
|
||||
padding: 12px 15px;
|
||||
text-align: left;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.tabla-card td {
|
||||
padding: 12px 15px;
|
||||
border-bottom: 1px solid #ecf0f1;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.tabla-card tr:hover td {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
|
||||
.sin-datos {
|
||||
text-align: center;
|
||||
color: #95a5a6;
|
||||
padding: 30px !important;
|
||||
}
|
||||
|
||||
/* ============ BADGES ============ */
|
||||
.badge-ingreso {
|
||||
background: #d5f5e3;
|
||||
color: #27ae60;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.badge-salida {
|
||||
background: #fadbd8;
|
||||
color: #e74c3c;
|
||||
padding: 4px 12px;
|
||||
border-radius: 20px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.monto-ingreso {
|
||||
color: #27ae60;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.monto-salida {
|
||||
color: #e74c3c;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ============ IFRAME EMBEBIDO ============ */
|
||||
.contenido-iframe {
|
||||
max-width: 1400px;
|
||||
margin: 20px auto;
|
||||
padding: 0 20px;
|
||||
height: calc(100vh - 140px);
|
||||
}
|
||||
|
||||
.iframe-embebido {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||||
background: white;
|
||||
}
|
||||
|
||||
/* ============ MENÚ DE OPCIONES (⋮) ============ */
|
||||
.menu-opciones {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.btn-opciones {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.2rem;
|
||||
cursor: pointer;
|
||||
padding: 4px 10px;
|
||||
border-radius: 6px;
|
||||
color: #7f8c8d;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-opciones:hover {
|
||||
background: #ecf0f1;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.dropdown-opciones {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.15);
|
||||
min-width: 140px;
|
||||
z-index: 50;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.dropdown-opciones.abierto {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dropdown-opciones button {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 10px 16px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 0.95rem;
|
||||
cursor: pointer;
|
||||
color: #2c3e50;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.dropdown-opciones button:hover {
|
||||
background: #f0f2f5;
|
||||
}
|
||||
|
||||
.dropdown-opciones button.opcion-borrar {
|
||||
color: #e74c3c;
|
||||
}
|
||||
|
||||
/* ============ MODAL ============ */
|
||||
.modal-fondo {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 200;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal-fondo.abierto {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 25px;
|
||||
width: 90%;
|
||||
max-width: 400px;
|
||||
box-shadow: 0 8px 30px rgba(0,0,0,0.25);
|
||||
animation: modalEntra 0.2s ease;
|
||||
}
|
||||
|
||||
@keyframes modalEntra {
|
||||
from { transform: scale(0.9); opacity: 0; }
|
||||
to { transform: scale(1); opacity: 1; }
|
||||
}
|
||||
|
||||
.modal h3 {
|
||||
margin-bottom: 15px;
|
||||
color: #2c3e50;
|
||||
}
|
||||
|
||||
.modal .form-grupo {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.modal-botones {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
justify-content: flex-end;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.btn-cancelar {
|
||||
background: #ecf0f1;
|
||||
color: #2c3e50;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-cancelar:hover {
|
||||
background: #d5dbdb;
|
||||
}
|
||||
|
||||
.btn-confirmar {
|
||||
background: #3498db;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-confirmar:hover {
|
||||
background: #2980b9;
|
||||
}
|
||||
|
||||
.btn-borrar-confirmar {
|
||||
background: #e74c3c;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-borrar-confirmar:hover {
|
||||
background: #c0392b;
|
||||
}
|
||||
|
||||
.modal-texto-borrar {
|
||||
color: #555;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
/* ============ BOTÓN SYNC EN NAV ============ */
|
||||
.btn-sync {
|
||||
background: none;
|
||||
border: 2px solid rgba(255,255,255,0.4);
|
||||
color: white;
|
||||
padding: 8px 16px;
|
||||
margin: 8px;
|
||||
border-radius: 8px;
|
||||
font-size: 0.95rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.btn-sync:hover {
|
||||
background: rgba(255,255,255,0.15);
|
||||
border-color: white;
|
||||
}
|
||||
|
||||
.btn-sync:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-sync.sincronizando {
|
||||
animation: girar 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes girar {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
@@ -0,0 +1,46 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>App Luisa - Inicio</title>
|
||||
<link rel="stylesheet" href="estilos.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>App Luisa</h1>
|
||||
<p>Selecciona una opción del menú</p>
|
||||
</header>
|
||||
|
||||
<nav class="menu-container">
|
||||
<a href="cajaMenor.html" class="menu-card">
|
||||
<div class="menu-icon">💰</div>
|
||||
<span>Caja Menor</span>
|
||||
</a>
|
||||
|
||||
<a href="libroDiario.html" class="menu-card">
|
||||
<div class="menu-icon">📒</div>
|
||||
<span>Libro Diario</span>
|
||||
</a>
|
||||
|
||||
<a href="transportadoras.html" class="menu-card">
|
||||
<div class="menu-icon">🚚</div>
|
||||
<span>Transportadoras</span>
|
||||
</a>
|
||||
|
||||
<a href="averias.html" class="menu-card">
|
||||
<div class="menu-icon">⚠️</div>
|
||||
<span>Averías</span>
|
||||
</a>
|
||||
<a href="https://script.google.com/macros/s/AKfycbxTNLv-ZJoboN1IybWeSXITP_FkQf6APFFbOMCX3mPMOaBBh2ACbpLBeMOHSbutKLAtYA/exec" class="menu-card" target="_blank">
|
||||
<div class="menu-icon">✅</div>
|
||||
<span>Confirmacion</span>
|
||||
</a>
|
||||
</a>
|
||||
<a href="pagosMensuales.html" class="menu-card">
|
||||
<div class="menu-icon">💳</div>
|
||||
<span>Pagos mensuales</span>
|
||||
</a>
|
||||
</nav>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,124 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>App Luisa - Libro Diario</title>
|
||||
<link rel="stylesheet" href="estilos.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>📒 Libro Diario</h1>
|
||||
</header>
|
||||
|
||||
<nav class="nav-menu">
|
||||
<a href="index.html">🏠 Inicio</a>
|
||||
<a href="cajaMenor.html">💰 Caja Menor</a>
|
||||
<a href="libroDiario.html" class="active">📒 Libro Diario</a>
|
||||
<a href="transportadoras.html">🚚 Transportadoras</a>
|
||||
<a href="averias.html">⚠️ Averías</a>
|
||||
<a href="pagosMensuales.html">💳 Pagos Mensuales</a>
|
||||
<a href="https://script.google.com/macros/s/AKfycbxTNLv-ZJoboN1IybWeSXITP_FkQf6APFFbOMCX3mPMOaBBh2ACbpLBeMOHSbutKLAtYA/exec" target="_blank">✅ Confirmación</a>
|
||||
<button class="btn-sync" id="btnSync" title="Sincronizar con Google Sheets">🔄 Sync</button>
|
||||
</nav>
|
||||
|
||||
<main class="contenido">
|
||||
<!-- FORMULARIO -->
|
||||
<div class="formulario-card">
|
||||
<h2>Nuevo Registro</h2>
|
||||
<form id="formMovimiento">
|
||||
<div class="form-grupo">
|
||||
<label for="fecha">Fecha</label>
|
||||
<input type="date" id="fecha" required>
|
||||
</div>
|
||||
|
||||
<div class="form-grupo">
|
||||
<label for="tipo">Destino</label>
|
||||
<select id="tipo" required>
|
||||
<option value="">Seleccionar...</option>
|
||||
<option value="Personal Flor">🌸 Personal Flor</option>
|
||||
<option value="Bodega">📦 Bodega</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-grupo">
|
||||
<label for="descripcion">Descripción</label>
|
||||
<input type="text" id="descripcion" placeholder="Ej: Compra de mercancía" required>
|
||||
</div>
|
||||
|
||||
<div class="form-grupo">
|
||||
<label for="monto">Monto</label>
|
||||
<input type="number" id="monto" placeholder="0" min="0" step="1" required>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-guardar">💾 Guardar</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<!-- TABLA -->
|
||||
<div class="tabla-card">
|
||||
<h2>📋 Registros</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Fecha</th>
|
||||
<th>Destino</th>
|
||||
<th>Descripción</th>
|
||||
<th>Monto</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="tablaMovimientos">
|
||||
<tr><td colspan="5" class="sin-datos">Cargando...</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- MODAL EDITAR -->
|
||||
<div class="modal-fondo" id="modalEditarFondo">
|
||||
<div class="modal">
|
||||
<h3>✏️ Editar registro</h3>
|
||||
<div class="form-grupo">
|
||||
<label for="editFecha">Fecha</label>
|
||||
<input type="date" id="editFecha">
|
||||
</div>
|
||||
<div class="form-grupo">
|
||||
<label for="editTipo">Destino</label>
|
||||
<select id="editTipo">
|
||||
<option value="Personal Flor">🌸 Personal Flor</option>
|
||||
<option value="Bodega">📦 Bodega</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-grupo">
|
||||
<label for="editDescripcion">Descripción</label>
|
||||
<input type="text" id="editDescripcion">
|
||||
</div>
|
||||
<div class="form-grupo">
|
||||
<label for="editMonto">Monto</label>
|
||||
<input type="number" id="editMonto" min="0" step="1">
|
||||
</div>
|
||||
<div class="modal-botones">
|
||||
<button class="btn-cancelar" id="btnCancelarEdicion">Cancelar</button>
|
||||
<button class="btn-confirmar" id="btnGuardarEdicion">Guardar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- MODAL BORRAR -->
|
||||
<div class="modal-fondo" id="modalBorrarFondo">
|
||||
<div class="modal">
|
||||
<h3>🗑️ Borrar registro</h3>
|
||||
<p class="modal-texto-borrar">¿Seguro que quieres borrar este registro?</p>
|
||||
<p class="modal-texto-borrar" id="borrarDescripcion"></p>
|
||||
<div class="modal-botones">
|
||||
<button class="btn-cancelar" id="btnCancelarBorrar">Cancelar</button>
|
||||
<button class="btn-borrar-confirmar" id="btnConfirmarBorrar">Borrar</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="acciones.js"></script>
|
||||
<script src="libroDiario.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,114 @@
|
||||
// ============ CONFIGURACIÓN ============
|
||||
const NOMBRE_HOJA = "libroDiario";
|
||||
|
||||
// ============ CARGAR DATOS AL ABRIR LA PÁGINA ============
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
cargarMovimientos();
|
||||
});
|
||||
|
||||
// ============ LEER DATOS ============
|
||||
async function cargarMovimientos() {
|
||||
const tbody = document.getElementById("tablaMovimientos");
|
||||
|
||||
try {
|
||||
const respuesta = await fetch(`/leer?hoja=${NOMBRE_HOJA}`);
|
||||
const data = await respuesta.json();
|
||||
|
||||
if (data.error) {
|
||||
tbody.innerHTML = `<tr><td colspan="4" class="sin-datos">Error: ${data.error}</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
mostrarMovimientos(data.datos);
|
||||
|
||||
} catch (error) {
|
||||
tbody.innerHTML = `<tr><td colspan="4" class="sin-datos">Error al cargar datos</td></tr>`;
|
||||
console.error("Error:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// ============ MOSTRAR EN LA TABLA ============
|
||||
function mostrarMovimientos(movimientos) {
|
||||
const tbody = document.getElementById("tablaMovimientos");
|
||||
|
||||
if (movimientos.length === 0) {
|
||||
tbody.innerHTML = `<tr><td colspan="5" class="sin-datos">No hay registros</td></tr>`;
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = "";
|
||||
|
||||
movimientos.forEach(mov => {
|
||||
const fila = document.createElement("tr");
|
||||
const esFlor = mov.Tipo === "Personal Flor";
|
||||
|
||||
fila.innerHTML = `
|
||||
<td>${formatearFecha(mov.Fecha)}</td>
|
||||
<td><span class="${esFlor ? 'badge-ingreso' : 'badge-salida'}">${esFlor ? '🌸' : '📦'} ${mov.Tipo}</span></td>
|
||||
<td>${mov["Descripción"]}</td>
|
||||
<td class="monto-salida">$${formatearMonto(mov.Monto)}</td>
|
||||
`;
|
||||
// Menú de opciones (⋮) con modales
|
||||
const celdaOpciones = document.createElement("td");
|
||||
celdaOpciones.appendChild(crearMenuOpciones(mov));
|
||||
fila.appendChild(celdaOpciones);
|
||||
|
||||
tbody.appendChild(fila);
|
||||
});
|
||||
}
|
||||
|
||||
// ============ GUARDAR NUEVO MOVIMIENTO ============
|
||||
document.getElementById("formMovimiento").addEventListener("submit", async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const btnGuardar = e.target.querySelector("button");
|
||||
btnGuardar.disabled = true;
|
||||
btnGuardar.textContent = "⏳ Guardando...";
|
||||
|
||||
const datos = {
|
||||
hoja: NOMBRE_HOJA,
|
||||
datos: {
|
||||
"Fecha": document.getElementById("fecha").value,
|
||||
"Tipo": document.getElementById("tipo").value,
|
||||
"Descripción": document.getElementById("descripcion").value,
|
||||
"Monto": document.getElementById("monto").value
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
const respuesta = await fetch("/guardar", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(datos)
|
||||
});
|
||||
|
||||
const resultado = await respuesta.json();
|
||||
|
||||
if (resultado.error) {
|
||||
alert("Error: " + resultado.error);
|
||||
}
|
||||
|
||||
// Limpiar formulario y recargar tabla
|
||||
document.getElementById("formMovimiento").reset();
|
||||
cargarMovimientos();
|
||||
|
||||
} catch (error) {
|
||||
console.error("Error al guardar:", error);
|
||||
alert("Error al guardar el registro");
|
||||
}
|
||||
|
||||
btnGuardar.disabled = false;
|
||||
btnGuardar.textContent = "💾 Guardar";
|
||||
});
|
||||
|
||||
// ============ FUNCIONES AUXILIARES ============
|
||||
function formatearFecha(fecha) {
|
||||
if (!fecha) return "";
|
||||
const f = new Date(fecha);
|
||||
return f.toLocaleDateString("es-CO", { day: "2-digit", month: "2-digit", year: "numeric" });
|
||||
}
|
||||
|
||||
function formatearMonto(monto) {
|
||||
const num = parseFloat(monto) || 0;
|
||||
return num.toLocaleString("es-CO", { minimumFractionDigits: 0, maximumFractionDigits: 0 });
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>App Luisa - Pagos Mensuales</title>
|
||||
<link rel="stylesheet" href="estilos.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>💳 Pagos Mensuales</h1>
|
||||
</header>
|
||||
|
||||
<nav class="nav-menu">
|
||||
<a href="index.html">🏠 Inicio</a>
|
||||
<a href="cajaMenor.html">💰 Caja Menor</a>
|
||||
<a href="libroDiario.html">📒 Libro Diario</a>
|
||||
<a href="transportadoras.html">🚚 Transportadoras</a>
|
||||
<a href="averias.html">⚠️ Averías</a>
|
||||
<a href="pagosMensuales.html" class="active">💳 Pagos Mensuales</a>
|
||||
<a href="https://script.google.com/macros/s/AKfycbxTNLv-ZJoboN1IybWeSXITP_FkQf6APFFbOMCX3mPMOaBBh2ACbpLBeMOHSbutKLAtYA/exec" target="_blank">✅ Confirmación</a>
|
||||
</nav>
|
||||
|
||||
<main class="contenido">
|
||||
<p>Aquí irá el contenido de pagos mensuales.</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,28 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="es">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>App Luisa - Transportadoras</title>
|
||||
<link rel="stylesheet" href="estilos.css">
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>🚚 Transportadoras</h1>
|
||||
</header>
|
||||
|
||||
<nav class="nav-menu">
|
||||
<a href="index.html">🏠 Inicio</a>
|
||||
<a href="cajaMenor.html">💰 Caja Menor</a>
|
||||
<a href="libroDiario.html">📒 Libro Diario</a>
|
||||
<a href="transportadoras.html" class="active">🚚 Transportadoras</a>
|
||||
<a href="averias.html">⚠️ Averías</a>
|
||||
<a href="pagosMensuales.html">💳 Pagos Mensuales</a>
|
||||
<a href="https://script.google.com/macros/s/AKfycbxTNLv-ZJoboN1IybWeSXITP_FkQf6APFFbOMCX3mPMOaBBh2ACbpLBeMOHSbutKLAtYA/exec" target="_blank">✅ Confirmación</a>
|
||||
</nav>
|
||||
|
||||
<main class="contenido">
|
||||
<p>Aquí irá el contenido de transportadoras.</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user