227 lines
9.1 KiB
HTML
227 lines
9.1 KiB
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 Nóminas</title>
|
|
<link rel="stylesheet" href="css/styles.css">
|
|
</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">
|
|
<span class="icon">👷</span>
|
|
Trabajadores
|
|
</button>
|
|
<button class="menu-btn" data-section="nominas">
|
|
<span class="icon">💰</span>
|
|
Nóminas
|
|
</button>
|
|
<button class="menu-btn" data-section="liquidaciones">
|
|
<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="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>
|
|
|
|
<section id="liquidaciones" class="section">
|
|
<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>
|
|
|
|
<script src="js/app.js"></script>
|
|
</body>
|
|
</html>
|