334 lines
8.4 KiB
Vue
334 lines
8.4 KiB
Vue
<template>
|
|
<div class="eo">
|
|
<div class="eo-card eo-card--hero">
|
|
<div class="eo-card__body">
|
|
<div class="eo-hero">
|
|
<div>
|
|
<p class="eo-eyebrow">Apercu collaborateur</p>
|
|
<h2 class="eo-title">{{ employee.full_name }}</h2>
|
|
<p class="eo-subtitle">
|
|
{{ employee.job_title || "Poste non renseigne" }}
|
|
</p>
|
|
</div>
|
|
|
|
<button
|
|
class="eo-action"
|
|
type="button"
|
|
@click="$emit('view-info-tab')"
|
|
>
|
|
<i class="fas fa-pen"></i>
|
|
Modifier la fiche
|
|
</button>
|
|
</div>
|
|
|
|
<div class="eo-highlights">
|
|
<div class="eo-highlight">
|
|
<span class="eo-highlight__label">Email</span>
|
|
<strong class="eo-highlight__value">{{
|
|
employee.email || "Non renseigne"
|
|
}}</strong>
|
|
</div>
|
|
<div class="eo-highlight">
|
|
<span class="eo-highlight__label">Telephone</span>
|
|
<strong class="eo-highlight__value">{{
|
|
employee.phone || "Non renseigne"
|
|
}}</strong>
|
|
</div>
|
|
<div class="eo-highlight">
|
|
<span class="eo-highlight__label">Statut</span>
|
|
<strong class="eo-highlight__value">{{
|
|
employee.active ? "Actif" : "Inactif"
|
|
}}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="eo-grid mt-3">
|
|
<div class="eo-card">
|
|
<div class="eo-card__header">
|
|
<span class="eo-card__title">Coordonnees</span>
|
|
</div>
|
|
<div class="eo-card__body">
|
|
<div class="eo-list">
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Prenom</span>
|
|
<strong class="eo-list__value">{{
|
|
employee.first_name || "Non renseigne"
|
|
}}</strong>
|
|
</div>
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Nom</span>
|
|
<strong class="eo-list__value">{{
|
|
employee.last_name || "Non renseigne"
|
|
}}</strong>
|
|
</div>
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Email</span>
|
|
<strong class="eo-list__value">{{
|
|
employee.email || "Non renseigne"
|
|
}}</strong>
|
|
</div>
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Telephone</span>
|
|
<strong class="eo-list__value">{{
|
|
employee.phone || "Non renseigne"
|
|
}}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="eo-card">
|
|
<div class="eo-card__header">
|
|
<span class="eo-card__title">Informations d'emploi</span>
|
|
</div>
|
|
<div class="eo-card__body">
|
|
<div class="eo-list">
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Date d'embauche</span>
|
|
<strong class="eo-list__value">{{ formattedHireDate }}</strong>
|
|
</div>
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Poste</span>
|
|
<strong class="eo-list__value">{{
|
|
employee.job_title || "Non renseigne"
|
|
}}</strong>
|
|
</div>
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Salaire</span>
|
|
<strong class="eo-list__value">{{
|
|
employee.salary ? `${employee.salary} EUR` : "Non renseigne"
|
|
}}</strong>
|
|
</div>
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Type</span>
|
|
<strong class="eo-list__value">{{
|
|
employee.thanatopractitioner ? "Thanatopracteur" : "Employe"
|
|
}}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-if="employee.thanatopractitioner" class="eo-card mt-3">
|
|
<div class="eo-card__header">
|
|
<span class="eo-card__title">Certification praticien</span>
|
|
</div>
|
|
<div class="eo-card__body">
|
|
<div class="eo-grid eo-grid--triple">
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Numero de licence</span>
|
|
<strong class="eo-list__value">
|
|
{{
|
|
employee.thanatopractitioner.license_number || "Non renseigne"
|
|
}}
|
|
</strong>
|
|
</div>
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Numero d'autorisation</span>
|
|
<strong class="eo-list__value">
|
|
{{
|
|
employee.thanatopractitioner.authorization_number ||
|
|
"Non renseigne"
|
|
}}
|
|
</strong>
|
|
</div>
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Validite</span>
|
|
<strong class="eo-list__value">
|
|
{{
|
|
formatDate(
|
|
employee.thanatopractitioner.authorization_valid_until
|
|
)
|
|
}}
|
|
</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="eo-card mt-3">
|
|
<div class="eo-card__header">
|
|
<span class="eo-card__title">Informations systeme</span>
|
|
</div>
|
|
<div class="eo-card__body">
|
|
<div class="eo-grid">
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Date de creation</span>
|
|
<strong class="eo-list__value">{{
|
|
formatDate(employee.created_at)
|
|
}}</strong>
|
|
</div>
|
|
<div class="eo-list__item">
|
|
<span class="eo-list__label">Derniere modification</span>
|
|
<strong class="eo-list__value">{{
|
|
formatDate(employee.updated_at)
|
|
}}</strong>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { defineProps, defineEmits } from "vue";
|
|
|
|
defineProps({
|
|
employee: {
|
|
type: Object,
|
|
required: true,
|
|
},
|
|
formattedHireDate: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
employeeId: {
|
|
type: [Number, String],
|
|
required: true,
|
|
},
|
|
});
|
|
|
|
defineEmits(["view-info-tab"]);
|
|
|
|
const formatDate = (dateString) => {
|
|
if (!dateString) return "Non renseignee";
|
|
const date = new Date(dateString);
|
|
return date.toLocaleDateString("fr-FR", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
.eo {
|
|
min-width: 0;
|
|
}
|
|
|
|
.eo-card {
|
|
background: #fff;
|
|
border: 1px solid rgba(131, 146, 171, 0.25);
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
|
|
}
|
|
|
|
.eo-card--hero {
|
|
border-color: rgba(94, 114, 228, 0.2);
|
|
background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
|
|
}
|
|
|
|
.eo-card__header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0.875rem 1.25rem;
|
|
border-bottom: 1px solid #f3f4f6;
|
|
}
|
|
|
|
.eo-card__title,
|
|
.eo-eyebrow {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: #8392ab;
|
|
}
|
|
|
|
.eo-card__body {
|
|
padding: 1.25rem;
|
|
}
|
|
|
|
.eo-hero {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.eo-title {
|
|
margin: 0.3rem 0 0;
|
|
font-size: 1.5rem;
|
|
color: #344767;
|
|
}
|
|
|
|
.eo-subtitle {
|
|
margin: 0.35rem 0 0;
|
|
color: #67748e;
|
|
}
|
|
|
|
.eo-action {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 0.45rem;
|
|
border: 1px solid rgba(94, 114, 228, 0.35);
|
|
border-radius: 0.75rem;
|
|
background: #fff;
|
|
color: #5e72e4;
|
|
padding: 0.65rem 0.9rem;
|
|
font-size: 0.85rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.eo-highlights,
|
|
.eo-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: 1rem;
|
|
}
|
|
|
|
.eo-highlights {
|
|
margin-top: 1.25rem;
|
|
}
|
|
|
|
.eo-grid--triple {
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
}
|
|
|
|
.eo-highlight,
|
|
.eo-list__item {
|
|
padding: 1rem;
|
|
border-radius: 0.85rem;
|
|
background: #f8fafc;
|
|
border: 1px solid #eef2f7;
|
|
}
|
|
|
|
.eo-highlight__label,
|
|
.eo-list__label {
|
|
display: block;
|
|
margin-bottom: 0.35rem;
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: #8392ab;
|
|
}
|
|
|
|
.eo-highlight__value,
|
|
.eo-list__value {
|
|
color: #344767;
|
|
font-size: 0.95rem;
|
|
line-height: 1.45;
|
|
}
|
|
|
|
.eo-list {
|
|
display: grid;
|
|
gap: 1rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.eo-highlights,
|
|
.eo-grid,
|
|
.eo-grid--triple {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
}
|
|
</style>
|