323 lines
17 KiB
HTML
323 lines
17 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<html class="light" lang="es"><head>
|
|
<meta charset="utf-8"/>
|
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
|
<title>Gestión de Puestos de Trabajo | RH Portal</title>
|
|
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
|
<script id="tailwind-config">
|
|
tailwind.config = {
|
|
darkMode: "class",
|
|
theme: {
|
|
extend: {
|
|
colors: {
|
|
"primary": "#137fec",
|
|
"background-light": "#f6f7f8",
|
|
"background-dark": "#101922",
|
|
},
|
|
fontFamily: {
|
|
"display": ["Inter"]
|
|
},
|
|
borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
<style>
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
}
|
|
.material-symbols-outlined {
|
|
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body class="bg-background-light dark:bg-background-dark text-[#111418] dark:text-white font-display">
|
|
<div class="flex h-screen overflow-hidden">
|
|
<!-- Sidebar Navigation -->
|
|
<aside class="w-64 bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 flex flex-col shrink-0">
|
|
<div class="p-6 flex items-center gap-3">
|
|
<div class="size-10 rounded-lg bg-primary flex items-center justify-center text-white">
|
|
<span class="material-symbols-outlined">factory</span>
|
|
</div>
|
|
<div class="flex flex-col">
|
|
<h1 class="text-sm font-bold leading-none">Warehouse System</h1>
|
|
<p class="text-xs text-gray-500 mt-1">Admin Portal</p>
|
|
</div>
|
|
</div>
|
|
<nav class="flex-1 px-4 space-y-1 overflow-y-auto">
|
|
<a class="flex items-center gap-3 px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors" href="#">
|
|
<span class="material-symbols-outlined">dashboard</span>
|
|
<span class="text-sm font-medium">Dashboard</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors" href="#">
|
|
<span class="material-symbols-outlined">inventory_2</span>
|
|
<span class="text-sm font-medium">Inventario</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors" href="#">
|
|
<span class="material-symbols-outlined">precision_manufacturing</span>
|
|
<span class="text-sm font-medium">Producción</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 bg-primary/10 text-primary rounded-lg transition-colors" href="#">
|
|
<span class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1;">groups</span>
|
|
<span class="text-sm font-medium">Recursos Humanos</span>
|
|
</a>
|
|
<a class="flex items-center gap-3 px-3 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors" href="#">
|
|
<span class="material-symbols-outlined">settings</span>
|
|
<span class="text-sm font-medium">Configuración</span>
|
|
</a>
|
|
</nav>
|
|
<div class="p-4 border-t border-gray-200 dark:border-gray-800">
|
|
<div class="flex items-center gap-3 p-2">
|
|
<div class="size-8 rounded-full bg-cover bg-center" data-alt="User profile avatar of admin" style="background-image: url('https://lh3.googleusercontent.com/aida-public/AB6AXuAZE4yg7YhxPnYbTfdwrgMaXbIwT17qinrNA2sczwJTMCecZuuRxWI9crz6h75iNsn4VKTmHSNkkwtpFOx2I72wWVgtbhDUeUX8ngUzF0A_22GqWF9F46TErldseaBQgTwjXDP5wWLyOU8S8Mf64JntceSLjq2U9exTu9Pkhgo6OPG1GkinNVD3rBNsVjwN-xNbtWLt6jYnwVcAkrCqawJsiK_Pf8R3chrYkUJNmzJgn9XSTOtBLUDT6A7K1V_G1jXX6k1jzSdWnFdg')"></div>
|
|
<div class="flex-1 min-w-0">
|
|
<p class="text-xs font-semibold truncate">Marcos Pérez</p>
|
|
<p class="text-[10px] text-gray-500 truncate">HR Manager</p>
|
|
</div>
|
|
<span class="material-symbols-outlined text-gray-400 text-sm">logout</span>
|
|
</div>
|
|
</div>
|
|
</aside>
|
|
<!-- Main Content Area -->
|
|
<main class="flex-1 flex flex-col min-w-0 overflow-hidden">
|
|
<!-- Top Navigation Bar -->
|
|
<header class="h-16 bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 flex items-center justify-between px-8 shrink-0">
|
|
<div class="flex items-center gap-4">
|
|
<div class="flex items-center gap-2">
|
|
<a class="text-xs font-medium text-gray-500 hover:text-primary transition-colors" href="#">INICIO</a>
|
|
<span class="text-xs text-gray-400">/</span>
|
|
<a class="text-xs font-medium text-gray-500 hover:text-primary transition-colors" href="#">RH</a>
|
|
<span class="text-xs text-gray-400">/</span>
|
|
<span class="text-xs font-bold text-gray-900 dark:text-white uppercase tracking-wider">Puestos</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex items-center gap-4">
|
|
<div class="relative">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400 text-sm">search</span>
|
|
<input class="h-9 w-64 bg-gray-100 dark:bg-gray-800 border-none rounded-lg pl-9 text-xs focus:ring-2 focus:ring-primary/50 transition-all" placeholder="Buscar..." type="text"/>
|
|
</div>
|
|
<button class="size-9 flex items-center justify-center rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 relative">
|
|
<span class="material-symbols-outlined text-gray-600 dark:text-gray-400">notifications</span>
|
|
<span class="absolute top-2 right-2 size-2 bg-red-500 rounded-full border-2 border-white dark:border-gray-900"></span>
|
|
</button>
|
|
<div class="h-8 w-px bg-gray-200 dark:bg-gray-800 mx-2"></div>
|
|
<div class="flex items-center gap-2">
|
|
<div class="size-8 rounded-full bg-primary/20 text-primary flex items-center justify-center font-bold text-xs">AD</div>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
<!-- Page Content -->
|
|
<div class="flex-1 overflow-y-auto p-8 bg-background-light dark:bg-background-dark">
|
|
<div class="max-w-6xl mx-auto space-y-6">
|
|
<!-- Page Heading -->
|
|
<div class="flex flex-col md:flex-row md:items-end justify-between gap-4">
|
|
<div class="space-y-1">
|
|
<h2 class="text-3xl font-black text-gray-900 dark:text-white tracking-tight">Puestos de Trabajo</h2>
|
|
<p class="text-gray-500 dark:text-gray-400 text-sm">Administre y organice los roles operativos y administrativos de la planta.</p>
|
|
</div>
|
|
<button class="bg-primary hover:bg-primary/90 text-white px-5 py-2.5 rounded-lg flex items-center gap-2 text-sm font-bold shadow-lg shadow-primary/20 transition-all">
|
|
<span class="material-symbols-outlined text-lg">add_circle</span>
|
|
Nuevo Puesto
|
|
</button>
|
|
</div>
|
|
<!-- Search and Filter Bar -->
|
|
<div class="bg-white dark:bg-gray-900 p-4 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800 flex gap-4">
|
|
<div class="flex-1 relative">
|
|
<span class="material-symbols-outlined absolute left-3 top-1/2 -translate-y-1/2 text-gray-400">search</span>
|
|
<input class="w-full h-11 bg-gray-50 dark:bg-gray-800 border-none rounded-lg pl-10 text-sm focus:ring-2 focus:ring-primary/50" placeholder="Buscar por nombre o departamento..." type="text"/>
|
|
</div>
|
|
<button class="flex items-center gap-2 px-4 py-2 text-gray-600 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 transition-colors">
|
|
<span class="material-symbols-outlined">filter_list</span>
|
|
<span class="text-sm font-medium">Filtros</span>
|
|
</button>
|
|
</div>
|
|
<!-- Data Table Card -->
|
|
<div class="bg-white dark:bg-gray-900 rounded-xl shadow-sm border border-gray-200 dark:border-gray-800 overflow-hidden">
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-50 dark:bg-gray-800/50 border-b border-gray-200 dark:border-gray-800">
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider w-1/4">Nombre del Puesto</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider">Departamento</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider w-1/3">Descripción / Actividades</th>
|
|
<th class="px-6 py-4 text-xs font-bold text-gray-500 uppercase tracking-wider text-right">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="divide-y divide-gray-100 dark:divide-gray-800">
|
|
<!-- Row 1 -->
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors group">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-8 rounded bg-blue-50 dark:bg-blue-900/20 flex items-center justify-center text-blue-600">
|
|
<span class="material-symbols-outlined text-base">supervisor_account</span>
|
|
</div>
|
|
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Supervisor de Almacén</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm">
|
|
<span class="px-2.5 py-1 rounded-full text-[11px] font-bold bg-blue-100 text-blue-700 dark:bg-blue-900/40 dark:text-blue-300">LOGÍSTICA</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-1">Coordinar la recepción de mercancías, gestión de inventarios y despacho...</p>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-2 text-gray-400 hover:text-primary transition-colors" title="Ver Detalle">
|
|
<span class="material-symbols-outlined text-lg">visibility</span>
|
|
</button>
|
|
<button class="p-2 text-gray-400 hover:text-primary transition-colors" title="Editar">
|
|
<span class="material-symbols-outlined text-lg">edit</span>
|
|
</button>
|
|
<button class="p-2 text-gray-400 hover:text-red-500 transition-colors" title="Eliminar">
|
|
<span class="material-symbols-outlined text-lg">delete</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 2 -->
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors group">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-8 rounded bg-green-50 dark:bg-green-900/20 flex items-center justify-center text-green-600">
|
|
<span class="material-symbols-outlined text-base">precision_manufacturing</span>
|
|
</div>
|
|
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Operario de Línea A</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm">
|
|
<span class="px-2.5 py-1 rounded-full text-[11px] font-bold bg-green-100 text-green-700 dark:bg-green-900/40 dark:text-green-300">PRODUCCIÓN</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-1">Operación de maquinaria de ensamblado y control de calidad primario...</p>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-2 text-gray-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-lg">visibility</span>
|
|
</button>
|
|
<button class="p-2 text-gray-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-lg">edit</span>
|
|
</button>
|
|
<button class="p-2 text-gray-400 hover:text-red-500 transition-colors">
|
|
<span class="material-symbols-outlined text-lg">delete</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 3 -->
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors group">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-8 rounded bg-orange-50 dark:bg-orange-900/20 flex items-center justify-center text-orange-600">
|
|
<span class="material-symbols-outlined text-base">forklift</span>
|
|
</div>
|
|
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Montacarguista</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm">
|
|
<span class="px-2.5 py-1 rounded-full text-[11px] font-bold bg-orange-100 text-orange-700 dark:bg-orange-900/40 dark:text-orange-300">ALMACÉN</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-1">Traslado de pallets a zona de racks y carga de camiones de distribución...</p>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-2 text-gray-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-lg">visibility</span>
|
|
</button>
|
|
<button class="p-2 text-gray-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-lg">edit</span>
|
|
</button>
|
|
<button class="p-2 text-gray-400 hover:text-red-500 transition-colors">
|
|
<span class="material-symbols-outlined text-lg">delete</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
<!-- Row 4 -->
|
|
<tr class="hover:bg-gray-50 dark:hover:bg-gray-800/30 transition-colors group">
|
|
<td class="px-6 py-4">
|
|
<div class="flex items-center gap-3">
|
|
<div class="size-8 rounded bg-purple-50 dark:bg-purple-900/20 flex items-center justify-center text-purple-600">
|
|
<span class="material-symbols-outlined text-base">security</span>
|
|
</div>
|
|
<span class="text-sm font-semibold text-gray-900 dark:text-gray-100">Analista de Seguridad</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 text-sm">
|
|
<span class="px-2.5 py-1 rounded-full text-[11px] font-bold bg-purple-100 text-purple-700 dark:bg-purple-900/40 dark:text-purple-300">EHS</span>
|
|
</td>
|
|
<td class="px-6 py-4">
|
|
<p class="text-sm text-gray-500 dark:text-gray-400 line-clamp-1">Monitoreo de protocolos de seguridad e higiene industrial en planta...</p>
|
|
</td>
|
|
<td class="px-6 py-4 text-right">
|
|
<div class="flex items-center justify-end gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
|
|
<button class="p-2 text-gray-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-lg">visibility</span>
|
|
</button>
|
|
<button class="p-2 text-gray-400 hover:text-primary transition-colors">
|
|
<span class="material-symbols-outlined text-lg">edit</span>
|
|
</button>
|
|
<button class="p-2 text-gray-400 hover:text-red-500 transition-colors">
|
|
<span class="material-symbols-outlined text-lg">delete</span>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- Pagination Footer -->
|
|
<div class="px-6 py-4 bg-gray-50 dark:bg-gray-800/50 border-t border-gray-200 dark:border-gray-800 flex items-center justify-between">
|
|
<span class="text-xs text-gray-500 dark:text-gray-400">Mostrando 1 a 4 de 12 puestos</span>
|
|
<div class="flex gap-2">
|
|
<button class="size-8 flex items-center justify-center rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 disabled:opacity-50" disabled="">
|
|
<span class="material-symbols-outlined text-sm">chevron_left</span>
|
|
</button>
|
|
<button class="size-8 flex items-center justify-center rounded bg-primary text-white font-bold text-xs">1</button>
|
|
<button class="size-8 flex items-center justify-center rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 hover:bg-gray-50 transition-colors text-xs font-bold">2</button>
|
|
<button class="size-8 flex items-center justify-center rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 hover:bg-gray-50 transition-colors text-xs font-bold">3</button>
|
|
<button class="size-8 flex items-center justify-center rounded border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-600 dark:text-gray-400 hover:bg-gray-50 transition-colors">
|
|
<span class="material-symbols-outlined text-sm">chevron_right</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Summary Info Cards (Subtle Details) -->
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<div class="bg-white dark:bg-gray-900 p-6 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm flex items-center gap-4">
|
|
<div class="size-12 rounded-full bg-primary/10 flex items-center justify-center text-primary">
|
|
<span class="material-symbols-outlined">work</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-gray-500 font-medium">Total de Puestos</p>
|
|
<p class="text-xl font-black">12 Roles</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-900 p-6 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm flex items-center gap-4">
|
|
<div class="size-12 rounded-full bg-green-500/10 flex items-center justify-center text-green-600">
|
|
<span class="material-symbols-outlined">domain</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-gray-500 font-medium">Departamentos Activos</p>
|
|
<p class="text-xl font-black">5 Áreas</p>
|
|
</div>
|
|
</div>
|
|
<div class="bg-white dark:bg-gray-900 p-6 rounded-xl border border-gray-200 dark:border-gray-800 shadow-sm flex items-center gap-4">
|
|
<div class="size-12 rounded-full bg-amber-500/10 flex items-center justify-center text-amber-600">
|
|
<span class="material-symbols-outlined">history</span>
|
|
</div>
|
|
<div>
|
|
<p class="text-xs text-gray-500 font-medium">Última Actualización</p>
|
|
<p class="text-xl font-black">Hoy, 09:12 AM</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</div>
|
|
</body></html> |