Guardar en db

2026-08-05 09:26:53 -05:00
parent b6f4aaa7b6
commit 519cd619ec
10 changed files with 1199 additions and 98 deletions
@@ -305,6 +305,7 @@ body {

 .form-group input[type="number"] {
  -moz-appearance: textfield;
+  appearance: textfield;
 }

 .form-group input,
@@ -354,7 +355,6 @@ input[readonly] {
  color: #7f8c8d;
 }

-.form-group input[readonly] + label,
 .form-group label.readonly-label {
  color: #95a5a6;
  cursor: not-allowed;
@@ -8,17 +8,12 @@
 </head>
 <body>
  <div class="app-layout">
-    <!-- // SIDEBAR (MENU LATERAL) -->
    <aside class="sidebar">
      <div class="logo">
        <h2>Sistema de Nóminas</h2>
      </div>
      <nav class="menu">
-        <button class="menu-btn active" data-section="seguimiento">
-          <span class="icon">⏰</span>
-          Seguimiento
-        </button>
-        <button class="menu-btn" data-section="trabajadores">
+        <button class="menu-btn active" data-section="trabajadores">
          <span class="icon">👷</span>
          Trabajadores
        </button>
@@ -46,20 +41,13 @@
        </button>
      </div>
    </aside>
-    <!-- // CIERRE DE SIDEBAR (MENU LATERAL) -->
     
-    <!-- // INICIO DEL MAIN (CONTENIDO) -->
    <main class="main-content">
-      <!--N INICIO DE LOS TRABAJADORES -->
      <header class="top-bar">
        <h1 id="section-title">Trabajadores</h1>
      </header>

-      <section id="seguimiento" class="section active">
-        <p>Seguimiento de nóminas y empleados.</p>
-      </section>
-
-      <section id="trabajadores" class="section">
+      <section id="trabajadores" class="section active">
        <div class="section-actions">
          <button id="btn-nuevo-trabajador" class="btn btn-primary">+ Nuevo trabajador</button>
        </div>
@@ -142,7 +130,6 @@
          </div>
        </div>
      </section>
-      <!--N CIERRE DE TRABAJADORES -->

      <section id="nominas" class="section">
        <p>Gestión de nóminas.</p>
@@ -152,7 +139,6 @@
        <p>Gestión de liquidaciones.</p>
      </section>

-      <!--N INICIO DE CONFIGURACIONES -->
      <section id="configuraciones" class="section">
        <div class="config-card">
          <div class="config-header">
@@ -213,17 +199,15 @@
          </form>
        </div>
      </section>
-      <!--N FIN DE CONFIGURACIONES -->
-
-      <section id="licencia" class="section">
-        <p>Información de licencia.</p>
-      </section>

      <section id="historial" class="section">
        <p>Historial de cambios y movimientos.</p>
      </section>
+
+      <section id="licencia" class="section">
+        <p>Información de licencia.</p>
+      </section>
    </main>
-    <!--// FIN DEL MAIN (CONTENIDO) -->
  </div>

  <script src="js/app.js"></script>
@@ -1,17 +1,15 @@
-//// PASAR DE UN BOTON A OTRO BOTON
 document.addEventListener('DOMContentLoaded', function () {
  const menuButtons = document.querySelectorAll('.menu-btn');
  const sections = document.querySelectorAll('.section');
  const sectionTitle = document.getElementById('section-title');

  const titles = {
-    seguimiento: 'Seguimiento',
    trabajadores: 'Trabajadores',
    nominas: 'Nóminas',
    liquidaciones: 'Liquidaciones',
    configuraciones: 'Configuraciones',
-    licencia: 'Licencia',
-    historial: 'Historial'
+    historial: 'Historial',
+    licencia: 'Licencia'
  };

  menuButtons.forEach(button => {
@@ -28,8 +26,7 @@ document.addEventListener('DOMContentLoaded', function () {
    });
  });

-//// MODULO DE TRABAJADORES
-  const trabajadores = [];
+  let trabajadores = [];
  let editandoId = null;

  const modalTrabajador = document.getElementById('modal-trabajador');
@@ -42,27 +39,7 @@ document.addEventListener('DOMContentLoaded', function () {
  const chkSmv = document.getElementById('chk-smv');
  const inputSalario = document.getElementById('trabajador-salario');

-  let configuracionGlobal = {
-    id: null,
-    nombre_empresa: '',
-    salario_minimo: '',
-    auxilio_transporte: '',
-    horas_semanales: '',
-    horas_mensuales: '',
-    dia_inicio_mes: '',
-    dia_fin_mes: '',
-    tiempo_almuerzo: '',
-    valor_hora_ordinaria: '',
-    valor_hora_extra: '',
-    valor_hora_extra_nocturna: ''
-  };
-
-  function formatearPesos(valor) {
-    const partes = Number(valor).toFixed(2).split('.');
-    const entera = partes[0].replace(/\B(?=(\d{3})+(?!\d))/g, '.');
-    const decimal = ',' + partes[1];
-    return entera + decimal;
-  }
+  let configuracionGlobal = {};

  function formatearPesosSinDecimales(valor) {
    const numero = Number(valor);
@@ -100,7 +77,7 @@ document.addEventListener('DOMContentLoaded', function () {
        <td>${t.id}</td>
        <td>${t.nombre} ${t.apellidos}</td>
        <td>${t.puesto || '-'}</td>
-        <td>${t.salario_mensual ? formatearPesos(Number(t.salario_mensual)) : '-'}</td>
+        <td>${t.salario_mensual ? formatearPesosSinDecimales(Number(t.salario_mensual)) : '-'}</td>
        <td>
          <span class="badge ${t.activo == 1 ? 'badge-active' : 'badge-inactive'}">
            ${t.activo == 1 ? 'Activo' : 'Inactivo'}
@@ -119,7 +96,17 @@ document.addEventListener('DOMContentLoaded', function () {
    });
  }

-  function guardarTrabajador(e) {
+  async function cargarTrabajadores() {
+    try {
+      const resp = await fetch(`${API_URL}/trabajadores`);
+      trabajadores = await resp.json();
+      renderTabla();
+    } catch (err) {
+      console.error('Error cargando trabajadores:', err);
+    }
+  }
+
+  async function guardarTrabajador(e) {
    e.preventDefault();

    const datos = {
@@ -133,22 +120,37 @@ document.addEventListener('DOMContentLoaded', function () {
      activo: document.getElementById('trabajador-activo').value
    };

-    if (editandoId !== null) {
-      const index = trabajadores.findIndex(t => t.id === editandoId);
-      if (index !== -1) {
-        trabajadores[index] = { ...datos, idOriginal: editandoId };
+    try {
+      if (editandoId !== null) {
+        await fetch(`${API_URL}/trabajadores/${editandoId}`, {
+          method: 'PUT',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(datos)
+        });
+      } else {
+        await fetch(`${API_URL}/trabajadores`, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify(datos)
+        });
      }
-    } else {
-      const existe = trabajadores.some(t => t.id === datos.id);
-      if (existe) {
-        alert('Ya existe un trabajador con ese documento de identidad.');
-        return;
-      }
-      trabajadores.push(datos);
+      cerrarModal();
+      await cargarTrabajadores();
+    } catch (err) {
+      alert('Error al guardar trabajador');
+      console.error(err);
    }
+  }

-    cerrarModal();
-    renderTabla();
+  async function eliminarTrabajador(id) {
+    if (!confirm('¿Estás seguro de eliminar este trabajador?')) return;
+    try {
+      await fetch(`${API_URL}/trabajadores/${id}`, { method: 'DELETE' });
+      await cargarTrabajadores();
+    } catch (err) {
+      alert('Error al eliminar trabajador');
+      console.error(err);
+    }
  }

  function cargarEdicion(id) {
@@ -166,16 +168,10 @@ document.addEventListener('DOMContentLoaded', function () {
    document.getElementById('trabajador-seguridad').value = t.seguridad_social;
    document.getElementById('trabajador-activo').value = t.activo;

-    abrirModal('editar');
-  }
+    if (chkSmv) chkSmv.checked = false;
+    if (inputSalario) inputSalario.disabled = false;

-  function eliminarTrabajador(id) {
-    if (!confirm('¿Estás seguro de eliminar este trabajador?')) return;
-    const index = trabajadores.findIndex(t => t.id === id);
-    if (index !== -1) {
-      trabajadores.splice(index, 1);
-      renderTabla();
-    }
+    abrirModal('editar');
  }

  btnNuevoTrabajador.addEventListener('click', () => abrirModal('nuevo'));
@@ -200,11 +196,10 @@ document.addEventListener('DOMContentLoaded', function () {
    });
  }

-  renderTabla();
+  cargarTrabajadores();

  // --- Módulo de Configuraciones ---
  const formConfiguraciones = document.getElementById('form-configuraciones');
-  const btnGuardarConfiguraciones = document.getElementById('btn-guardar-configuraciones');
  const cfgMensaje = document.getElementById('cfg-mensaje');

  const camposPesosSinDecimales = [
@@ -215,9 +210,7 @@ document.addEventListener('DOMContentLoaded', function () {

  const inputHorasSemanales = document.getElementById('cfg-horas-semanales');
  const inputHorasMensuales = document.getElementById('cfg-horas-mensuales');
-  const inputDiaInicio = document.getElementById('cfg-dia-inicio');
-  const inputDiaFin = document.getElementById('cfg-dia-fin');
-  const inputTiempoAlmuerzo = document.getElementById('cfg-tiempo-almuerzo');
+
  const inputHoraOrdinaria = document.getElementById('cfg-hora-ordinaria');
  const inputHoraExtra = document.getElementById('cfg-hora-extra');
  const inputHoraExtraNocturna = document.getElementById('cfg-hora-extra-nocturna');
@@ -245,24 +238,36 @@ document.addEventListener('DOMContentLoaded', function () {
    }
  }

+  async function cargarConfiguracion() {
+    try {
+      const resp = await fetch(`${API_URL}/configuracion`);
+      const data = await resp.json();
+      if (data && Object.keys(data).length > 0) {
+        configuracionGlobal = data;
+        cargarConfiguracionEnFormulario();
+      }
+    } catch (err) {
+      console.error('Error cargando configuración:', err);
+    }
+  }
+
  function cargarConfiguracionEnFormulario() {
-    document.getElementById('cfg-nombre-empresa').value = configuracionGlobal.nombre_empresa;
+    document.getElementById('cfg-nombre-empresa').value = configuracionGlobal.nombre_empresa || '';
    document.getElementById('cfg-salario-minimo').value = configuracionGlobal.salario_minimo ? formatearPesosSinDecimales(configuracionGlobal.salario_minimo) : '';
    document.getElementById('cfg-auxilio-transporte').value = configuracionGlobal.auxilio_transporte ? formatearPesosSinDecimales(configuracionGlobal.auxilio_transporte) : '';
-    document.getElementById('cfg-horas-semanales').value = configuracionGlobal.horas_semanales;
-    document.getElementById('cfg-horas-mensuales').value = configuracionGlobal.horas_mensuales;
-    document.getElementById('cfg-dia-inicio').value = configuracionGlobal.dia_inicio_mes;
-    document.getElementById('cfg-dia-fin').value = configuracionGlobal.dia_fin_mes;
-    document.getElementById('cfg-tiempo-almuerzo').value = configuracionGlobal.tiempo_almuerzo;
+    document.getElementById('cfg-horas-semanales').value = configuracionGlobal.horas_semanales || '';
+    document.getElementById('cfg-horas-mensuales').value = configuracionGlobal.horas_mensuales || '';
+    document.getElementById('cfg-dia-inicio').value = configuracionGlobal.dia_inicio_mes || '';
+    document.getElementById('cfg-dia-fin').value = configuracionGlobal.dia_fin_mes || '';
+    document.getElementById('cfg-tiempo-almuerzo').value = configuracionGlobal.tiempo_almuerzo || '';
    document.getElementById('cfg-hora-ordinaria').value = configuracionGlobal.valor_hora_ordinaria ? formatearPesosSinDecimales(configuracionGlobal.valor_hora_ordinaria) : '';
    calcularCamposDependientes();
  }

-  function guardarConfiguracion(e) {
+  async function guardarConfiguracion(e) {
    e.preventDefault();

-    configuracionGlobal = {
-      id: configuracionGlobal.id || 1,
+    const datos = {
      nombre_empresa: document.getElementById('cfg-nombre-empresa').value.trim(),
      salario_minimo: limpiarFormatoPesos(document.getElementById('cfg-salario-minimo').value),
      auxilio_transporte: limpiarFormatoPesos(document.getElementById('cfg-auxilio-transporte').value),
@@ -276,11 +281,20 @@ document.addEventListener('DOMContentLoaded', function () {
      valor_hora_extra_nocturna: limpiarFormatoPesos(document.getElementById('cfg-hora-extra-nocturna').value)
    };

-    cargarConfiguracionEnFormulario();
-
-    if (cfgMensaje) {
-      cfgMensaje.textContent = 'Configuración guardada correctamente.';
-      setTimeout(() => { cfgMensaje.textContent = ''; }, 3000);
+    try {
+      await fetch(`${API_URL}/configuracion`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(datos)
+      });
+      await cargarConfiguracion();
+      if (cfgMensaje) {
+        cfgMensaje.textContent = 'Configuración guardada correctamente.';
+        setTimeout(() => { cfgMensaje.textContent = ''; }, 3000);
+      }
+    } catch (err) {
+      alert('Error al guardar configuración');
+      console.error(err);
    }
  }

@@ -293,12 +307,12 @@ document.addEventListener('DOMContentLoaded', function () {
    });

    inputHorasSemanales.addEventListener('input', calcularCamposDependientes);
-    inputHoraOrdinaria.addEventListener('blur', function () {
-      aplicarFormatoPesosSinDecimales(this);
+    inputHoraOrdinaria.addEventListener('blur', () => {
+      aplicarFormatoPesosSinDecimales(inputHoraOrdinaria);
      calcularCamposDependientes();
    });

    formConfiguraciones.addEventListener('submit', guardarConfiguracion);
-    cargarConfiguracionEnFormulario();
+    cargarConfiguracion();
  }
 });