organizar menu lateral, bases de datos y algunas funciones de trabajaodres y configuracion
This commit is contained in:
+168
-4
@@ -8,12 +8,17 @@
|
||||
</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="trabajadores">
|
||||
<button class="menu-btn active" data-section="seguimiento">
|
||||
<span class="icon">⏰</span>
|
||||
Seguimiento
|
||||
</button>
|
||||
<button class="menu-btn" data-section="trabajadores">
|
||||
<span class="icon">👷</span>
|
||||
Trabajadores
|
||||
</button>
|
||||
@@ -25,24 +30,120 @@
|
||||
<span class="icon">📄</span>
|
||||
Liquidaciones
|
||||
</button>
|
||||
<button class="menu-btn" data-section="historial">
|
||||
<span class="icon">📖</span>
|
||||
Historial
|
||||
</button>
|
||||
</nav>
|
||||
<div class="sidebar-footer">
|
||||
<button class="menu-btn" data-section="configuraciones">
|
||||
<span class="icon">⚙️</span>
|
||||
Configuraciones
|
||||
</button>
|
||||
<button class="menu-btn" data-section="licencia">
|
||||
<span class="icon">🔑</span>
|
||||
Licencia
|
||||
</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="trabajadores" class="section active">
|
||||
<p>Gestión de trabajadores.</p>
|
||||
<section id="seguimiento" class="section active">
|
||||
<p>Seguimiento de nóminas y empleados.</p>
|
||||
</section>
|
||||
|
||||
<section id="trabajadores" class="section">
|
||||
<div class="section-actions">
|
||||
<button id="btn-nuevo-trabajador" class="btn btn-primary">+ Nuevo trabajador</button>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table id="tabla-trabajadores" class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Documento</th>
|
||||
<th>Nombre completo</th>
|
||||
<th>Puesto</th>
|
||||
<th>Salario mensual</th>
|
||||
<th>Estado</th>
|
||||
<th>Acciones</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td colspan="6" class="empty">No hay trabajadores registrados.</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="modal-trabajador" class="modal hidden">
|
||||
<div class="modal-backdrop"></div>
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 id="modal-titulo-trabajador">Nuevo trabajador</h2>
|
||||
<button type="button" class="btn-close" id="btn-cerrar-modal-trabajador">×</button>
|
||||
</div>
|
||||
<form id="form-trabajador">
|
||||
<input type="hidden" id="trabajador-id-original">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="trabajador-id">Documento de identidad</label>
|
||||
<input type="text" id="trabajador-id" name="id" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="trabajador-nombre">Nombre</label>
|
||||
<input type="text" id="trabajador-nombre" name="nombre" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="trabajador-apellidos">Apellidos</label>
|
||||
<input type="text" id="trabajador-apellidos" name="apellidos" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="trabajador-puesto">Puesto</label>
|
||||
<input type="text" id="trabajador-puesto" name="puesto">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="trabajador-salario">Salario mensual</label>
|
||||
<input type="number" id="trabajador-salario" name="salario_mensual" step="0.01" min="0">
|
||||
<label class="checkbox-inline">
|
||||
<input type="checkbox" id="chk-smv">
|
||||
SMV (Salario Mínimo Vigente)
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="trabajador-fecha">Fecha de ingreso</label>
|
||||
<input type="date" id="trabajador-fecha" name="fecha_ingreso">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="trabajador-seguridad">Seguridad social</label>
|
||||
<input type="text" id="trabajador-seguridad" name="seguridad_social">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="trabajador-activo">Estado</label>
|
||||
<select id="trabajador-activo" name="activo">
|
||||
<option value="1">Activo</option>
|
||||
<option value="0">Inactivo</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" id="btn-cancelar-trabajador">Cancelar</button>
|
||||
<button type="submit" class="btn btn-primary">Guardar</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!--N CIERRE DE TRABAJADORES -->
|
||||
|
||||
<section id="nominas" class="section">
|
||||
<p>Gestión de nóminas.</p>
|
||||
</section>
|
||||
@@ -51,9 +152,72 @@
|
||||
<p>Gestión de liquidaciones.</p>
|
||||
</section>
|
||||
|
||||
<!--N INICIO DE CONFIGURACIONES -->
|
||||
<section id="configuraciones" class="section">
|
||||
<div class="config-card">
|
||||
<div class="config-header">
|
||||
<h3>Parámetros de la empresa</h3>
|
||||
<p>Configura los valores generales que se usarán en las nóminas.</p>
|
||||
</div>
|
||||
<form id="form-configuraciones">
|
||||
<div class="form-grid">
|
||||
<div class="form-group">
|
||||
<label for="cfg-nombre-empresa">Nombre de la empresa</label>
|
||||
<input type="text" id="cfg-nombre-empresa" name="nombre_empresa">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cfg-salario-minimo">Salario mínimo</label>
|
||||
<input type="text" id="cfg-salario-minimo" name="salario_minimo" class="pesos-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cfg-auxilio-transporte">Auxilio de transporte</label>
|
||||
<input type="text" id="cfg-auxilio-transporte" name="auxilio_transporte" class="pesos-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cfg-horas-semanales">Horas semanales</label>
|
||||
<input type="number" id="cfg-horas-semanales" name="horas_semanales" step="0.01" min="0">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cfg-horas-mensuales" class="readonly-label">Horas mensuales</label>
|
||||
<input type="text" id="cfg-horas-mensuales" name="horas_mensuales" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cfg-dia-inicio">Día inicio mes</label>
|
||||
<input type="number" id="cfg-dia-inicio" name="dia_inicio_mes" min="1" max="31">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cfg-dia-fin">Día fin mes</label>
|
||||
<input type="number" id="cfg-dia-fin" name="dia_fin_mes" min="1" max="31">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cfg-hora-ordinaria">Valor hora ordinaria</label>
|
||||
<input type="text" id="cfg-hora-ordinaria" name="valor_hora_ordinaria" class="pesos-input">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cfg-hora-extra" class="readonly-label">Valor hora extra</label>
|
||||
<input type="text" id="cfg-hora-extra" name="valor_hora_extra" class="pesos-input" readonly>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="cfg-hora-extra-nocturna" class="readonly-label">Valor hora extra nocturna</label>
|
||||
<input type="text" id="cfg-hora-extra-nocturna" name="valor_hora_extra_nocturna" class="pesos-input" readonly>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-footer">
|
||||
<button type="submit" class="btn btn-primary" id="btn-guardar-configuraciones">Guardar configuraciones</button>
|
||||
<span id="cfg-mensaje" class="mensaje"></span>
|
||||
</div>
|
||||
</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>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user