143 lines
7.8 KiB
Vue
143 lines
7.8 KiB
Vue
<script setup>
|
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
|
import Adding from '@Holos/Button/ButtonRh.vue';
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-6 max-w-auto mx-auto">
|
|
<!-- Header -->
|
|
<div class="flex items-start justify-between gap-4">
|
|
<div>
|
|
<h1 class="text-3xl font-extrabold text-gray-900 dark:text-primary-dt">Nómina</h1>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información bancaria y salarios de empleados</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Adding text="Procesar Nómina" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI Cards -->
|
|
<div class="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Nómina Total Mensual</div>
|
|
<div class="mt-4 text-3xl font-bold text-gray-900 dark:text-primary-dt">$125,000</div>
|
|
<div class="mt-1 text-xs text-gray-400 dark:text-primary-dt/70">3 empleados activos</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm flex flex-col justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Último Procesamiento</div>
|
|
<div class="mt-4 text-2xl font-bold text-gray-900 dark:text-primary-dt">31 Enero</div>
|
|
<div class="mt-1 text-sm text-emerald-600 dark:text-success-dt">Procesado exitosamente</div>
|
|
</div>
|
|
|
|
<div class="bg-white rounded-lg border border-gray-100 p-6 shadow-sm flex flex-col justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Próximo Procesamiento</div>
|
|
<div class="mt-4 text-2xl font-bold text-gray-900 dark:text-primary-dt">29 Feb</div>
|
|
<div class="mt-1 text-sm text-amber-600 dark:text-warning-dt">En 5 días</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Employee Payroll Card -->
|
|
<section class="mt-8 bg-white rounded-lg border border-gray-100 shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<header class="flex items-center justify-between">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600 dark:bg-primary/10 dark:text-primary-dt">
|
|
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="account_balance_wallet" />
|
|
</div>
|
|
<div>
|
|
<h2 class="text-xl font-semibold text-gray-800 dark:text-primary-dt">$ María González López</h2>
|
|
<p class="text-sm text-gray-500 dark:text-primary-dt/70">Información bancaria y detalles de nómina</p>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Información Bancaria -->
|
|
<div class="mt-6">
|
|
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
|
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="account_balance" />
|
|
Información Bancaria
|
|
</h3>
|
|
|
|
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-3">
|
|
<div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Banco</div>
|
|
<div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">BBVA Bancomer</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">CLABE</div>
|
|
<div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">012180001234567890</div>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Crédito INFONAVIT</div>
|
|
<div class="mt-2 text-sm text-gray-700 dark:text-primary-dt">5020123456789</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Desglose Salarial -->
|
|
<div class="mt-8">
|
|
<h3 class="text-base font-medium text-gray-800 flex items-center gap-2 dark:text-primary-dt">
|
|
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="payments" />
|
|
Desglose Salarial
|
|
</h3>
|
|
|
|
<div class="mt-4 grid gap-4 grid-cols-1 md:grid-cols-6">
|
|
<div class="md:col-span-1 col-span-2 rounded-lg border border-gray-100 p-4 dark:border-primary/20 dark:bg-primary/5">
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Salario Base</div>
|
|
<div class="mt-2 text-xl font-bold text-[#2563eb] dark:text-primary-dt">$35,000</div>
|
|
</div>
|
|
|
|
<div class="md:col-span-2 col-span-4 rounded-lg border border-gray-100 p-4 bg-emerald-50/40 dark:bg-success-d/10 dark:border-primary/20">
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Bonos</div>
|
|
<div class="mt-2 text-xl font-bold text-emerald-600 dark:text-success-dt">+$8,000</div>
|
|
</div>
|
|
|
|
<div class="md:col-span-2 col-span-4 rounded-lg border border-gray-100 p-4 bg-rose-50/40 dark:bg-danger-d/10 dark:border-primary/20">
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Deducciones</div>
|
|
<div class="mt-2 text-xl font-bold text-rose-600 dark:text-danger-dt">-$2,000</div>
|
|
</div>
|
|
|
|
<div class="md:col-span-1 col-span-2 rounded-lg p-4 border border-gray-100 bg-rose-50/40 flex items-center justify-between dark:bg-primary/5 dark:border-primary/20">
|
|
<div class="text-black dark:text-primary-dt">
|
|
<div class="text-sm dark:text-primary-dt">Total Mensual</div>
|
|
<div class="mt-2 text-xl font-bold dark:text-primary-dt">$45,000</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Último Pago -->
|
|
<div class="mt-8">
|
|
<h3 class="text-base font-medium text-gray-800 dark:text-primary-dt">Último Pago</h3>
|
|
<div class="mt-3 rounded-lg border border-gray-100 p-4 bg-white flex items-center justify-between dark:bg-primary-d dark:border-primary/20">
|
|
<div>
|
|
<div class="text-lg font-semibold text-gray-900 dark:text-primary-dt">$43,000</div>
|
|
<div class="text-xs text-gray-500 dark:text-primary-dt/70">Fecha: 2024-01-31</div>
|
|
</div>
|
|
<span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full dark:bg-success-d dark:text-success-dt">Procesado</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Acciones -->
|
|
<div class="mt-6 border-t border-gray-100 pt-4 flex gap-3 dark:border-primary/20">
|
|
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<GoogleIcon class="text-black dark:text-primary-dt text-lg" name="sync" />
|
|
Actualizar Cuenta
|
|
</button>
|
|
|
|
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<GoogleIcon class="text-black dark:text-primary-dt text-lg" name="calculate" />
|
|
Recalcular Salario
|
|
</button>
|
|
|
|
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-md border border-gray-200 bg-white text-sm text-gray-700 shadow-sm dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<GoogleIcon class="text-black dark:text-primary-dt text-lg" name="history" />
|
|
Historial de Pagos
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template> |