MALIO-DEV/SIRH
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 67 Wiki Activity

feat : ajout de la page de résumé employé

Browse Source
This commit is contained in:
Autin
2026-03-03 08:52:06 +01:00
parent 7a3d01d77f
commit 584cb2ed16
7 changed files with 165 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/layouts/default.vue
View File

@@ -62,13 +62,6 @@
</nav>
<div class="flex flex-col gap-2 items-center p-4">
<button
type="button"
class="w-full rounded-lg px-4 py-2 text-md font-semibold text-white bg-primary-500"
@click="handleLogout"
>
Déconnexion
</button>
<p class="font-bold">v{{ version }}</p>
</div>
</aside>

110
frontend/pages/employees/[id].vue
View File

@@ -13,34 +13,96 @@
<div v-else>
<div class="flex items-center justify-between">
<h1 class="text-4xl font-bold text-primary-500">{{ employee.firstName }} {{ employee.lastName }}</h1>
<NuxtLink
to="/employees"
class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
>
Retour
</NuxtLink>
<div class="text-right">
<p class="font-bold text-[20px]">{{ contractNatureLabel(employee.currentContractNature) }} {{ employee.contract?.weeklyHours ?? '-' }} heures</p>
<p class="text-[18px]">{{ employee.site?.name ?? '-' }}</p>
</div>
</div>
<div class="mt-12 border-b border-primary-500">
<div class="flex justify-center gap-16 text-2xl font-bold">
<button
class="pb-2 border-b-2 flex items-center gap-3"
:class="activeTab === 'contract'
? 'border-primary-500 text-primary-500'
: 'border-transparent text-primary-500/50 hover:text-primary-500'"
@click="activeTab = 'contract'"
>
<Icon name="mdi:magnify" size="24" class="align-self"/>
Suivi contrat
</button>
<button
class="pb-2 border-b-2 flex items-center gap-3"
:class="activeTab === 'leave'
? 'border-primary-500 text-primary-500'
: 'border-transparent text-primary-500/50 hover:text-primary-500'"
@click="activeTab = 'leave'"
>
<Icon name="mdi:magnify" size="24" class="align-self"/>
Congé
</button>
<button
class="pb-2 border-b-2 flex items-center gap-3"
:class="activeTab === 'rtt'
? 'border-primary-500 text-primary-500'
: 'border-transparent text-primary-500/50 hover:text-primary-500'"
@click="activeTab = 'rtt'"
>
<Icon name="mdi:magnify" size="24" class="align-self"/>
RTT
</button>
</div>
</div>
<div class="mt-6 rounded-lg border border-neutral-200 bg-white p-6">
<p class="text-xl font-semibold text-neutral-900">{{ employee.firstName }} {{ employee.lastName }}</p>
<p class="mt-2 text-md text-neutral-700">Site: {{ employee.site?.name ?? '-' }}</p>
<p class="text-md text-neutral-700">Type de contrat: {{
contractNatureLabel(employee.currentContractNature)
}}</p>
<p class="text-md text-neutral-700">Temps de travail: {{ employee.contract?.name ?? '-' }}</p>
</div>
<section v-if="activeTab === 'contract'" class="mt-8">
<div class="overflow-hidden rounded-lg border border-neutral-200 bg-white">
<div class="grid grid-cols-4 border-b border-neutral-200 bg-neutral-50 px-6 py-3 text-md font-semibold text-neutral-700">
<p>Contrat</p>
<p>Heures</p>
<p>Date de début</p>
<p>Date de fin</p>
</div>
<div v-if="contractHistory.length === 0" class="px-6 py-4 text-md text-neutral-600">
Aucun historique de contrat.
</div>
<div v-else>
<div
v-for="item in contractHistory"
:key="`${item.startDate}-${item.endDate ?? 'open'}-${item.contractId ?? item.contractName}`"
class="grid grid-cols-4 border-b border-neutral-100 px-6 py-3 text-md text-primary-500 last:border-b-0"
>
<p>{{ contractNatureLabel(item.contractNature) }}</p>
<p>{{ contractHistoryLabel(item) }}</p>
<p>{{ formatDate(item.startDate) }}</p>
<p>{{ formatDate(item.endDate) }}</p>
</div>
</div>
</div>
<div class="flex justify-center mt-8 gap-12">
<button class="bg-blue-500 text-white rounded-md w-[200px]">Modifier</button>
<button class="bg-primary-500 px-4 py-2 text-white text-md rounded-md flex justify-center items-center gap-2 w-[200px]">
<Icon name="mdi:plus-thick" size="16" />
Ajouter
</button>
</div>
</section>
<section v-else-if="activeTab === 'leave'" class="mt-8">
<!-- Bloc Congé -->
</section>
<section v-else class="mt-8">
<!-- Bloc RTT -->
</section>
</div>
</div>
</template>
<script setup lang="ts">
import type {Employee} from '~/services/dto/employee'
import type {ContractHistoryItem, Employee} from '~/services/dto/employee'
import {getEmployee} from '~/services/employees'
const route = useRoute()
const employee = ref<Employee | null>(null)
const isLoading = ref(false)
const activeTab = ref<'contract' | 'leave' | 'rtt'>('contract')
useHead(() => ({
title: employee.value
@@ -54,6 +116,22 @@ const contractNatureLabel = (value?: 'CDI' | 'CDD' | 'INTERIM') => {
return 'CDI'
}
const contractHistory = computed(() => employee.value?.contractHistory ?? [])
const formatDate = (value?: string | null) => {
if (!value) return 'En cours'
const [year, month, day] = value.split('-')
if (!year || !month || !day) return value
return `${day}/${month}/${year}`
}
const contractHistoryLabel = (item: ContractHistoryItem) => {
if (item.weeklyHours !== null && item.weeklyHours !== undefined) {
return `${item.weeklyHours} heures`
}
return item.contractName ?? '-'
}
onMounted(async () => {
const idParam = Array.isArray(route.params.id) ? route.params.id[0] : route.params.id
const employeeId = Number(idParam)

10
frontend/services/dto/employee.ts
View File

@@ -1,6 +1,15 @@
import type { Site } from './site'
import type { Contract } from './contract'
export type ContractHistoryItem = {
contractId?: number | null
contractName?: string | null
weeklyHours?: number | null
contractNature: 'CDI' | 'CDD' | 'INTERIM'
startDate: string
endDate?: string | null
}
export type Employee = {
id: number
firstName: string
@@ -10,5 +19,6 @@ export type Employee = {
currentContractNature?: 'CDI' | 'CDD' | 'INTERIM'
currentContractStartDate?: string | null
currentContractEndDate?: string | null
contractHistory?: ContractHistoryItem[]
displayOrder?: number
}

3
frontend/tailwind.config.ts
View File

@@ -15,6 +15,9 @@ export default <Partial<Config>>{
},
tertiary: {
500: '#F3F4F8'
},
blue: {
500: '#056CF2'
}
}
}