149 lines
7.5 KiB
Vue
149 lines
7.5 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">Información Adicional</h1>
|
|
<p class="mt-1 text-sm text-gray-500 dark:text-primary-dt/70">Deportes, evaluaciones de desempeño y desarrollo profesional</p>
|
|
</div>
|
|
|
|
<div>
|
|
<Adding text="Nueva Evaluació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="description" />
|
|
</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 adicional y evaluación de desempeño</p>
|
|
</div>
|
|
</header>
|
|
|
|
<!-- Deportes -->
|
|
<div class="mt-6">
|
|
<h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
|
|
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="sports_tennis" />
|
|
Deportes que Practica
|
|
</h3>
|
|
<div class="mt-3 flex flex-wrap gap-2">
|
|
<span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Natación</span>
|
|
<span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Yoga</span>
|
|
<span class="inline-block px-3 py-1 bg-blue-50 text-blue-700 rounded-full text-sm dark:bg-primary/10 dark:text-primary-dt">Ciclismo</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Evaluación de Desempeño -->
|
|
<div class="mt-8">
|
|
<h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
|
|
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="star" />
|
|
Evaluación de Desempeño
|
|
</h3>
|
|
|
|
<div class="mt-4 grid grid-cols-1 md:grid-cols-3 gap-4 items-start">
|
|
<!-- Puntuación grande -->
|
|
<div class="md:col-span-2 bg-gradient-to-r from-[#1e40af] to-[#2563eb] text-white rounded-lg p-6 flex flex-col justify-between shadow-sm">
|
|
<div class="flex items-center justify-between">
|
|
<div>
|
|
<div class="text-sm font-semibold">Puntuación General</div>
|
|
</div>
|
|
<div>
|
|
<span class="inline-block bg-emerald-100 text-emerald-700 text-xs px-3 py-1 rounded-full">Excelente</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
<div class="text-4xl font-bold">92/100</div>
|
|
<div class="text-sm opacity-80 mt-1">Evaluado el 2024-01-15</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Archivo evaluación -->
|
|
<div class="rounded-lg border border-gray-100 bg-white 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">Archivo de Evaluación</div>
|
|
<div class="mt-3 flex items-start gap-3">
|
|
<GoogleIcon class="text-gray-400 dark:text-primary-dt text-xl" name="picture_as_pdf" />
|
|
<div>
|
|
<div class="text-sm text-gray-700 dark:text-primary-dt">evaluacion_maria_2024.pdf</div>
|
|
<div class="text-xs text-gray-400 mt-1 dark:text-primary-dt/70">Evaluador: Juan Pérez</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Observaciones -->
|
|
<div class="mt-4 rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Observaciones</div>
|
|
<div class="mt-2 text-sm text-gray-500 dark:text-primary-dt/70">
|
|
Excelente desempeño...
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Objetivos y Progreso -->
|
|
<div class="mt-8">
|
|
<h3 class="text-base font-medium text-gray-800 dark:text-primary-dt flex items-center gap-2">
|
|
<GoogleIcon class="text-gray-600 dark:text-primary-dt text-base" name="track_changes" />
|
|
Objetivos y Progreso
|
|
</h3>
|
|
|
|
<div class="mt-4 space-y-4">
|
|
<!-- Objetivo 1 -->
|
|
<div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="flex justify-between items-center">
|
|
<div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Completar certificación en React Advanced</div>
|
|
<div class="text-sm text-gray-500 dark:text-primary-dt/70">75%</div>
|
|
</div>
|
|
<div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/70">Fecha límite: 2024-03-30</div>
|
|
<div class="mt-3 h-3 rounded-full bg-gray-100 dark:bg-primary/10 overflow-hidden">
|
|
<div class="h-full bg-[#2563eb]" style="width:75%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Objetivo 2 -->
|
|
<div class="rounded-lg border border-gray-100 bg-white p-4 dark:bg-primary-d dark:border-primary/20 dark:text-primary-dt">
|
|
<div class="flex justify-between items-center">
|
|
<div class="font-semibold text-sm text-gray-800 dark:text-primary-dt">Liderar proyecto de refactorización</div>
|
|
<div class="text-sm text-gray-500 dark:text_primary-dt/70">45%</div>
|
|
</div>
|
|
<div class="mt-2 text-xs text-gray-400 dark:text-primary-dt/70">Fecha límite: 2024-04-15</div>
|
|
<div class="mt-3 h-3 rounded-full bg-gray-100 dark:bg-primary/10 overflow-hidden">
|
|
<div class="h-full bg-[#2563eb]" style="width:45%"></div>
|
|
</div>
|
|
</div>
|
|
</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-base" name="file_upload" />
|
|
Subir Evaluación
|
|
</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-base" name="target" />
|
|
Actualizar Objetivos
|
|
</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-base" name="trophy" />
|
|
Actualizar Deportes
|
|
</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template> |