164 lines
8.4 KiB
Vue
164 lines
8.4 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-4xl font-extrabold text-gray-900 dark:text-primary-dt">Seguridad y Salud</h1>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Gestión de información médica, tallas y contactos de emergencia</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Adding text="Agregar Información" />
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card principal -->
|
|
<section class="mt-6 bg-white rounded-lg shadow-sm p-6 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<!-- Perfil -->
|
|
<header class="flex items-start gap-4">
|
|
<div class="flex-shrink-0">
|
|
<div class="w-12 h-12 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="shield" />
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex-1">
|
|
<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 mt-1 dark:text-primary-dt/70">Información de seguridad y salud ocupacional</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Tallas de Ropa -->
|
|
<div class="mt-6">
|
|
<h3 class="text-base font-medium text-gray-800 mb-3 dark:text-primary-dt">Tallas de Ropa</h3>
|
|
|
|
<div class="grid gap-4 grid-cols-1 md:grid-cols-3">
|
|
<div class="rounded-lg border border-gray-100 p-4 flex flex-col dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<span class="text-sm text-gray-500 dark:text-primary-dt/70">Camisa</span>
|
|
<span class="mt-3 text-xl font-bold text-[#2563eb] dark:text-primary-dt">M</span>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-100 p-4 flex flex-col dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<span class="text-sm text-gray-500 dark:text-primary-dt/70">Overol</span>
|
|
<span class="mt-3 text-xl font-bold text-[#2563eb] dark:text-primary-dt">M</span>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-100 p-4 flex flex-col dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<span class="text-sm text-gray-500 dark:text-primary-dt/70">Zapatos</span>
|
|
<span class="mt-3 text-xl font-bold text-[#2563eb] dark:text-primary-dt">25</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Información Médica -->
|
|
<div class="mt-8">
|
|
<h3 class="text-base font-medium text-gray-800 mb-3 flex items-center gap-2 dark:text-primary-dt">
|
|
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="medical_services" />
|
|
Información Médica
|
|
</h3>
|
|
|
|
<div class="grid gap-4 grid-cols-1 md:grid-cols-2">
|
|
<!-- Certificado -->
|
|
<div class="rounded-lg border border-gray-100 p-4 flex items-center justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="flex items-center gap-3">
|
|
<GoogleIcon class="text-gray-400 dark:text-primary-dt text-xl" name="picture_as_pdf" />
|
|
<div>
|
|
<div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Certificado Médico</div>
|
|
<div class="text-xs text-gray-500 mt-1 dark:text-primary-dt/70">certificado_maria_2024.pdf</div>
|
|
</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">Vigente</span>
|
|
</div>
|
|
|
|
<!-- Tipo de sangre -->
|
|
<div class="rounded-lg border border-gray-100 p-4 flex items-center justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div>
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Tipo de Sangre</div>
|
|
<div class="mt-2 text-xl font-bold text-red-600 dark:text-danger-d">O+</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Alergias -->
|
|
<div class="rounded-lg border border-gray-100 p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Alergias</div>
|
|
<div class="text-sm text-gray-500 mt-2 dark:text-primary-dt/70">Polen, mariscos</div>
|
|
</div>
|
|
|
|
<!-- Altura / Peso -->
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="rounded-lg border border-gray-100 p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Altura</div>
|
|
<div class="mt-2 text-lg font-bold text-[#2563eb] dark:text-primary-dt">165 cm</div>
|
|
</div>
|
|
<div class="rounded-lg border border-gray-100 p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">Peso</div>
|
|
<div class="mt-2 text-lg font-bold text-[#2563eb] dark:text-primary-dt">60 kg</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Prescripciones -->
|
|
<div class="rounded-lg border border-gray-100 p-4 col-span-1 md:col-span-2 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Prescripciones</div>
|
|
<div class="text-sm text-gray-500 mt-2 dark:text-primary-dt/70">Antihistamínicos según necesidad</div>
|
|
</div>
|
|
|
|
<!-- Discapacidades -->
|
|
<div class="rounded-lg border border-gray-100 p-4 col-span-1 md:col-span-2 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="text-sm font-semibold text-gray-800 dark:text-primary-dt">Discapacidades</div>
|
|
<div class="text-sm text-gray-500 mt-2 dark:text-primary-dt/70">Ninguna</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Contactos de Emergencia -->
|
|
<div class="mt-8">
|
|
<h3 class="text-base font-medium text-gray-800 mb-3 flex items-center gap-2 dark:text-primary-dt">
|
|
<GoogleIcon class="text-black dark:text-primary-dt text-xl" name="call" />
|
|
Contactos de Emergencia
|
|
</h3>
|
|
|
|
<div class="grid gap-4 grid-cols-1 md:grid-cols-2">
|
|
<div class="rounded-lg border border-gray-100 p-4 flex items-start justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div>
|
|
<div class="font-semibold text-gray-800 dark:text-primary-dt">Juan González</div>
|
|
<div class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">+52 55 1234 5678</div>
|
|
</div>
|
|
<span class="inline-block bg-gray-100 text-gray-700 text-xs px-3 py-1 rounded-full dark:bg-primary/10 dark:text-primary-dt">Esposo</span>
|
|
</div>
|
|
|
|
<div class="rounded-lg border border-gray-100 p-4 flex items-start justify-between dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div>
|
|
<div class="font-semibold text-gray-800 dark:text-primary-dt">Carmen López</div>
|
|
<div class="text-sm text-gray-500 mt-1 dark:text-primary-dt/70">+52 55 8765 4321</div>
|
|
</div>
|
|
<span class="inline-block bg-gray-100 text-gray-700 text-xs px-3 py-1 rounded-full dark:bg-primary/10 dark:text-primary-dt">Madre</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<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-xl"
|
|
name="article"
|
|
/>
|
|
Subir certificado
|
|
</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-xl"
|
|
name="call"
|
|
/>
|
|
Agregar contacto
|
|
</button>
|
|
</div>
|
|
|
|
</section>
|
|
</div>
|
|
</template> |