SIRH/frontend/pages/employees/index.vue

<template>
    <div class="flex-col">
        <div class="shrink-0">
            <div class="flex items-center justify-between">
                <h1 class="text-4xl font-bold text-primary-500">Employés</h1>
                <div class="flex items-center gap-3">
                    <button
                        type="button"
                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
                        @click="handleLeaveRecapPrint"
                    >
                        Export récap. congés
                    </button>
                    <button
                        type="button"
                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
                        @click="isSalaryRecapOpen = true"
                    >
                        Export récap. salaire
                    </button>
                    <button
                        type="button"
                        class="flex items-center gap-2 rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
                        @click="openCreate"
                    >
                        + Ajouter un employé
                    </button>
                </div>
            </div>
            <div class="flex gap-3 py-7">
                <div class="w-80">
                    <EmployeeNameFilterInput v-model="employeeFilter"/>
                </div>
                <SiteFilterSelector v-if="sites.length > 0" v-model="selectedSiteIds" :sites="sites"/>
                <select
                    v-model="contractStatusFilter"
                    class="rounded-md border border-primary-500 bg-white px-3 py-2 text-md font-semibold text-primary-500 cursor-pointer"
                >
                    <option value="active">Avec contrat</option>
                    <option value="inactive">Sans contrat</option>
                    <option value="all">Tous</option>
                </select>
            </div>
        </div>

        <div
            v-if="!isLoading && filteredEmployees.length === 0"
            class="rounded-lg border border-neutral-200 bg-white p-6 text-md text-neutral-600"
        >
            Aucun employé pour le moment.
        </div>

        <div v-else class="grid gap-8 [grid-template-columns:repeat(auto-fill,minmax(260px,1fr))]">
            <NuxtLink
                v-for="employee in filteredEmployees"
                :key="employee.id"
                :to="`/employees/${employee.id}`"
                target="_blank"
                rel="noopener noreferrer"
                class="group relative min-h-[328px] overflow-hidden rounded-lg bg-tertiary-500 p-4 transition-all duration-200 hover:shadow-md"
            >
                <div class="flex flex-col items-center gap-7 transition-opacity duration-200 group-hover:opacity-0">
                    <div class="rounded-full bg-primary-500 h-[175px] w-[175px] flex justify-center items-center text-white font-bold text-5xl">{{ employee.initials}}</div>
                    <div class="text-center text-[20px]">
                        <p class="text-primary-500 font-bold">{{ employee.firstName }} {{ employee.lastName }}</p>
                        <p>Nom du poste occupé</p>
                        <p>{{ employee.site?.name ?? '-' }}</p>
                    </div>
                </div>

                <div
                    class="absolute inset-0 flex items-center justify-center bg-primary-500 p-4 text-white opacity-0 transition-opacity duration-200 group-hover:opacity-100">
                    <div class="w-full rounded-md bg-white/15 p-4 text-sm">
                        <p class="text-base font-semibold">{{ employee.lastName }} {{ employee.firstName }}</p>
                        <p><strong>Type:</strong> {{ employee.currentInterimAgencyName ? `${contractNatureLabel(employee.currentContractNature)} (${employee.currentInterimAgencyName})` : contractNatureLabel(employee.currentContractNature) }}</p>
                        <p><strong>Temps de travail:</strong> {{ employee.contract?.name ?? '-' }}</p>
                        <p><strong>Site:</strong> {{ employee.site?.name ?? '-' }}</p>
                        <p><strong>Date d'entrée :</strong> {{ employee.entryDate ? employee.entryDate.split('-').reverse().join('/') : '-' }}</p>
                    </div>
                </div>
            </NuxtLink>
        </div>

        <AppDrawer v-model="isDrawerOpen" :title="drawerTitle">
            <form class="space-y-4" @submit.prevent="handleSubmit">
                <div>
                    <label class="text-md font-semibold text-neutral-700" for="first-name">
                        Prénom <span class="text-red-600">*</span>
                    </label>
                    <input
                        id="first-name"
                        v-model="form.firstName"
                        type="text"
                        :class="firstNameFieldClass"
                    />
                    <p v-if="showFirstNameError" class="mt-1 text-sm text-red-600">
                        Le prénom est obligatoire.
                    </p>
                </div>
                <div>
                    <label class="text-md font-semibold text-neutral-700" for="last-name">
                        Nom <span class="text-red-600">*</span>
                    </label>
                    <input
                        id="last-name"
                        v-model="form.lastName"
                        type="text"
                        :class="lastNameFieldClass"
                    />
                    <p v-if="showLastNameError" class="mt-1 text-sm text-red-600">
                        Le nom est obligatoire.
                    </p>
                </div>
                <div>
                    <label class="text-md font-semibold text-neutral-700" for="site">
                        Site <span class="text-red-600">*</span>
                    </label>
                    <select
                        id="site"
                        v-model="form.siteId"
                        :class="siteFieldClass"
                    >
                        <option value="">Aucun site</option>
                        <option v-for="site in sites" :key="site.id" :value="site.id">
                            {{ site.name }}
                        </option>
                    </select>
                    <p v-if="showSiteError" class="mt-1 text-sm text-red-600">
                        Le site est obligatoire.
                    </p>
                </div>
                <template v-if="!editingEmployee">
                    <div>
                        <label class="text-md font-semibold text-neutral-700" for="contract-nature">
                            Type de contrat <span class="text-red-600">*</span>
                        </label>
                        <select
                            id="contract-nature"
                            v-model="form.contractNature"
                            :class="contractNatureFieldClass"
                        >
                            <option value="CDI">CDI</option>
                            <option value="CDD">CDD</option>
                            <option value="INTERIM">Intérim</option>
                        </select>
                        <p v-if="showContractNatureError" class="mt-1 text-sm text-red-600">
                            Le type de contrat est obligatoire.
                        </p>
                    </div>
                    <div v-if="form.contractNature === 'INTERIM'">
                        <label class="text-md font-semibold text-neutral-700" for="interim-agency">
                            Agence d'intérim
                        </label>
                        <select
                            id="interim-agency"
                            v-model="form.interimAgencyId"
                            class="mt-2 w-full rounded-md border border-neutral-300 bg-white px-3 py-2 text-md text-neutral-900"
                        >
                            <option value="">Aucune</option>
                            <option v-for="agency in interimAgencies" :key="agency.id" :value="agency.id">
                                {{ agency.name }}
                            </option>
                        </select>
                    </div>
                    <div>
                        <label class="text-md font-semibold text-neutral-700" for="contract">
                            Temps de travail <span class="text-red-600">*</span>
                        </label>
                        <select
                            id="contract"
                            v-model="form.contractId"
                            :class="contractFieldClass"
                        >
                            <option value="">Sélectionner un contrat</option>
                            <option v-for="contract in contracts" :key="contract.id" :value="contract.id">
                                {{ contract.name }}
                            </option>
                        </select>
                        <p v-if="showContractError" class="mt-1 text-sm text-red-600">
                            Le temps de travail est obligatoire.
                        </p>
                    </div>
                    <div>
                        <label class="text-md font-semibold text-neutral-700" for="contract-start-date">
                            Début contrat <span class="text-red-600">*</span>
                        </label>
                        <input
                            id="contract-start-date"
                            v-model="form.contractStartDate"
                            type="date"
                            :class="contractStartDateFieldClass"
                        />
                        <p v-if="showContractStartDateError" class="mt-1 text-sm text-red-600">
                            La date de début est obligatoire.
                        </p>
                    </div>
                    <div v-if="showsContractEndDateComputed">
                        <label class="text-md font-semibold text-neutral-700" for="contract-end-date">
                            Fin contrat
                            <span v-if="requiresContractEndDateComputed" class="text-red-600">*</span>
                        </label>
                        <input
                            id="contract-end-date"
                            v-model="form.contractEndDate"
                            type="date"
                            :class="contractEndDateFieldClass"
                        />
                        <p v-if="showContractEndDateError" class="mt-1 text-sm text-red-600">
                            La date de fin est obligatoire pour un CDD ou un Intérim.
                        </p>
                    </div>
                    <div class="rounded-md border border-neutral-200 bg-neutral-50 p-3">
                        <label class="inline-flex items-center gap-2 text-md font-semibold text-neutral-700" for="is-driver">
                            <input
                                id="is-driver"
                                v-model="form.isDriver"
                                type="checkbox"
                                class="h-4 w-4 rounded border-neutral-300 text-primary-500 focus:ring-primary-500"
                            />
                            Chauffeur
                        </label>
                    </div>
                    <WorkDaysHoursInput
                        v-if="requiresSchedule"
                        v-model="form.workDaysHours"
                        :contract-weekly-hours="selectedContract?.weeklyHours ?? null"
                    />
                </template>
                <div class="flex justify-end gap-3 pt-2">
                    <button
                        type="button"
                        class="rounded-lg border border-neutral-200 px-4 py-2 text-md font-semibold text-neutral-700 hover:bg-neutral-100"
                        @click="isDrawerOpen = false"
                    >
                        Annuler
                    </button>
                    <button
                        type="submit"
                        class="rounded-lg bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500"
                        :class="submitButtonClass"
                    >
                        Enregistrer
                    </button>
                </div>
            </form>
        </AppDrawer>

        <SalaryRecapDrawer
            v-model="isSalaryRecapOpen"
            @submit="handleSalaryRecapPrint"
        />
    </div>
</template>

<script setup lang="ts">
import type {Contract} from '~/services/dto/contract'
import WorkDaysHoursInput from '~/components/employees/WorkDaysHoursInput.vue'
import { requiresWorkDaysHours } from '~/utils/contract'
import type {Employee} from '~/services/dto/employee'
import type {Site} from '~/services/dto/site'
import {listContracts} from '~/services/contracts'
import {createEmployee, deleteEmployee, listEmployees, updateEmployee} from '~/services/employees'
import {listSites} from '~/services/sites'
import {listInterimAgencies, type InterimAgency} from '~/services/interim-agencies'
import SiteFilterSelector from '~/components/SiteFilterSelector.vue'
import SalaryRecapDrawer from '~/components/SalaryRecapDrawer.vue'
import {contractNatureLabel, isContractNature, requiresContractEndDate, showsContractEndDate} from '~/utils/contract'
import {usePdfPrinter} from '~/composables/usePdfPrinter'

useHead({
    title: 'Employés'
})

const isDrawerOpen = ref(false)
const isSubmitting = ref(false)
const isLoading = ref(false)
const isSalaryRecapOpen = ref(false)
const { printPdf } = usePdfPrinter()
const sitesInitialized = ref(false)
const editingEmployee = ref<Employee | null>(null)
const drawerTitle = computed(() =>
    editingEmployee.value ? 'Modifier un employé' : 'Ajouter un employé'
)

const employees = ref<Employee[]>([])
const sites = ref<Site[]>([])
const contracts = ref<Contract[]>([])
const interimAgencies = ref<InterimAgency[]>([])
const employeeFilter = ref('')
const contractStatusFilter = ref<'active' | 'inactive' | 'all'>('active')
const selectedSiteIds = ref<number[]>([])

const filteredEmployees = computed<Employee[]>(() => {
    if (selectedSiteIds.value.length === 0) return []

    const filter = employeeFilter.value.trim().toLowerCase()
    return employees.value.filter((employee) => {
        const siteId = employee.site?.id
        if (!siteId || !selectedSiteIds.value.includes(siteId)) return false

        if (contractStatusFilter.value === 'active' && !employee.hasActiveContract) return false
        if (contractStatusFilter.value === 'inactive' && employee.hasActiveContract) return false

        if (!filter) return true
        const firstName = employee.firstName?.toLowerCase() ?? ''
        const lastName = employee.lastName?.toLowerCase() ?? ''
        return firstName.includes(filter) || lastName.includes(filter)
    })
})

const form = reactive({
    firstName: '',
    lastName: '',
    siteId: '' as number | '',
    contractId: '' as number | '',
    contractNature: 'CDI' as 'CDI' | 'CDD' | 'INTERIM',
    contractStartDate: '',
    contractEndDate: '',
    isDriver: false,
    workDaysHours: null as Record<number, number> | null,
    interimAgencyId: '' as number | ''
})

const validationTouched = reactive({
    firstName: false,
    lastName: false,
    siteId: false,
    contractId: false,
    contractNature: false,
    contractStartDate: false,
    contractEndDate: false
})

const isFirstNameValid = computed(() => form.firstName.trim() !== '')
const isLastNameValid = computed(() => form.lastName.trim() !== '')
const isSiteValid = computed(() => form.siteId !== '')
const isContractValid = computed(() => form.contractId !== '')
const isContractNatureValid = computed(() => isContractNature(form.contractNature))
const selectedContract = computed<Contract | null>(() =>
    contracts.value.find((c) => c.id === Number(form.contractId)) ?? null
)
const requiresSchedule = computed(() =>
    !editingEmployee.value && requiresWorkDaysHours(selectedContract.value, form.contractNature)
)
const scheduleTotalMinutes = computed(() => {
    const raw = form.workDaysHours ?? {}
    return Object.values(raw).reduce((s, n) => s + (Number(n) || 0), 0)
})
const isScheduleValid = computed(() => {
    if (!requiresSchedule.value) return true
    const expected = (selectedContract.value?.weeklyHours ?? 0) * 60
    return expected > 0 && scheduleTotalMinutes.value === expected
})
const isContractStartDateValid = computed(() => form.contractStartDate !== '')
const showsContractEndDateComputed = computed(() => showsContractEndDate(form.contractNature))
const requiresContractEndDateComputed = computed(() => requiresContractEndDate(form.contractNature))
const isContractEndDateValid = computed(() => {
    if (!requiresContractEndDateComputed.value) return true
    return form.contractEndDate !== ''
})
const isFormValid = computed(
    () =>
        isFirstNameValid.value &&
        isLastNameValid.value &&
        isSiteValid.value &&
        (editingEmployee.value
            ? true
            : (isContractValid.value &&
                isContractNatureValid.value &&
                isContractStartDateValid.value &&
                isContractEndDateValid.value &&
                isScheduleValid.value))
)

const showFirstNameError = computed(
    () => validationTouched.firstName && !isFirstNameValid.value
)
const showLastNameError = computed(
    () => validationTouched.lastName && !isLastNameValid.value
)
const showSiteError = computed(
    () => validationTouched.siteId && !isSiteValid.value
)
const showContractError = computed(
    () => validationTouched.contractId && !isContractValid.value
)
const showContractNatureError = computed(
    () => !editingEmployee.value && validationTouched.contractNature && !isContractNatureValid.value
)
const showContractStartDateError = computed(
    () => !editingEmployee.value && validationTouched.contractStartDate && !isContractStartDateValid.value
)
const showContractEndDateError = computed(
    () => !editingEmployee.value && validationTouched.contractEndDate && !isContractEndDateValid.value
)

const baseInputClass =
    'mt-2 w-full rounded-md border px-3 py-2 text-base text-neutral-900 focus:border-primary-500 focus:outline-none focus:ring-2 focus:ring-secondary-500/20'
const firstNameFieldClass = computed(() => {
    if (showFirstNameError.value) {
        return `${baseInputClass} border-red-500`
    }
    return `${baseInputClass} border-neutral-300`
})
const lastNameFieldClass = computed(() => {
    if (showLastNameError.value) {
        return `${baseInputClass} border-red-500`
    }
    return `${baseInputClass} border-neutral-300`
})
const siteFieldClass = computed(() => {
    const baseSelectClass =
        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
    if (showSiteError.value) {
        return `${baseSelectClass} border-red-500`
    }
    return `${baseSelectClass} border-neutral-300`
})
const contractFieldClass = computed(() => {
    const baseClass =
        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
    if (showContractError.value) {
        return `${baseClass} border-red-500`
    }
    return `${baseClass} border-neutral-300`
})
const contractNatureFieldClass = computed(() => {
    const baseClass =
        'mt-2 w-full rounded-md border bg-white px-3 py-2 text-md text-neutral-900'
    if (showContractNatureError.value) {
        return `${baseClass} border-red-500`
    }
    return `${baseClass} border-neutral-300`
})
const contractStartDateFieldClass = computed(() => {
    if (showContractStartDateError.value) {
        return `${baseInputClass} border-red-500`
    }
    return `${baseInputClass} border-neutral-300`
})
const contractEndDateFieldClass = computed(() => {
    if (showContractEndDateError.value) {
        return `${baseInputClass} border-red-500`
    }
    return `${baseInputClass} border-neutral-300`
})

const submitButtonClass = computed(() => {
    if (isSubmitting.value || !isFormValid.value) {
        return 'opacity-50 cursor-not-allowed'
    }
    return ''
})

const loadEmployees = async () => {
    isLoading.value = true
    try {
        employees.value = await listEmployees()
    } finally {
        isLoading.value = false
    }
}

const loadSites = async () => {
    sites.value = await listSites()
}

const loadContracts = async () => {
    contracts.value = await listContracts()
}

const loadInterimAgencies = async () => {
    interimAgencies.value = await listInterimAgencies()
}

onMounted(async () => {
    await Promise.all([loadEmployees(), loadSites(), loadContracts(), loadInterimAgencies()])
    if (form.contractStartDate === '') {
        form.contractStartDate = new Date().toISOString().slice(0, 10)
    }
})

watch(sites, (nextSites) => {
    const currentSiteIds = nextSites.map((site) => site.id)

    if (!sitesInitialized.value) {
        if (currentSiteIds.length === 0) return
        selectedSiteIds.value = currentSiteIds
        sitesInitialized.value = true
        return
    }

    selectedSiteIds.value = selectedSiteIds.value.filter((siteId) => currentSiteIds.includes(siteId))
}, {immediate: true})

const handleSubmit = async () => {
    if (isSubmitting.value) return
    validationTouched.firstName = true
    validationTouched.lastName = true
    validationTouched.siteId = true
    if (!editingEmployee.value) {
        validationTouched.contractId = true
        validationTouched.contractNature = true
        validationTouched.contractStartDate = true
        validationTouched.contractEndDate = true
    }
    if (!isFormValid.value) return

    isSubmitting.value = true
    try {
        if (editingEmployee.value) {
            await updateEmployee(editingEmployee.value.id, {
                firstName: form.firstName,
                lastName: form.lastName,
                siteId: form.siteId === '' ? null : Number(form.siteId),
                contractId: editingEmployee.value.contract?.id ?? Number(form.contractId)
            })
        } else {
            await createEmployee({
                firstName: form.firstName,
                lastName: form.lastName,
                siteId: form.siteId === '' ? null : Number(form.siteId),
                contractId: Number(form.contractId),
                contractNature: form.contractNature,
                contractStartDate: form.contractStartDate,
                contractEndDate: form.contractEndDate || null,
                isDriverInput: form.isDriver,
                workDaysHoursInput: requiresSchedule.value ? form.workDaysHours : null,
                interimAgencyId: form.contractNature === 'INTERIM' && form.interimAgencyId !== '' ? Number(form.interimAgencyId) : null
            })
        }

        form.firstName = ''
        form.lastName = ''
        form.siteId = ''
        form.contractId = ''
        form.contractNature = 'CDI'
        form.contractStartDate = new Date().toISOString().slice(0, 10)
        form.contractEndDate = ''
        form.isDriver = false
        form.workDaysHours = null
        form.interimAgencyId = ''
        editingEmployee.value = null
        isDrawerOpen.value = false
        await loadEmployees()
    } finally {
        isSubmitting.value = false
    }
}

watch(isDrawerOpen, (isOpen) => {
    if (!isOpen) {
        validationTouched.firstName = false
        validationTouched.lastName = false
        validationTouched.siteId = false
        validationTouched.contractId = false
        validationTouched.contractNature = false
        validationTouched.contractStartDate = false
        validationTouched.contractEndDate = false
    }
})

watch(showsContractEndDateComputed, (shows) => {
    if (!shows) {
        form.contractEndDate = ''
    }
})

watch(() => form.contractNature, (nature) => {
    if (nature !== 'INTERIM') {
        form.interimAgencyId = ''
    }
})

watch(requiresSchedule, (required) => {
    if (!required) {
        form.workDaysHours = null
    }
})

const openEdit = (employee: Employee) => {
    editingEmployee.value = employee
    form.firstName = employee.firstName
    form.lastName = employee.lastName
    form.siteId = employee.site?.id ?? ''
    isDrawerOpen.value = true
}

const openCreate = () => {
    editingEmployee.value = null
    form.firstName = ''
    form.lastName = ''
    form.siteId = ''
    form.contractId = ''
    form.contractNature = 'CDI'
    form.contractStartDate = new Date().toISOString().slice(0, 10)
    form.contractEndDate = ''
    form.isDriver = false
    form.workDaysHours = null
    form.interimAgencyId = ''
    isDrawerOpen.value = true
}

const handleLeaveRecapPrint = async () => {
    await printPdf('/leave-recap/print')
}

const handleSalaryRecapPrint = async (month: string) => {
    await printPdf(`/salary-recap/print?month=${month}`)
    isSalaryRecapOpen.value = false
}

const confirmDelete = async (employee: Employee) => {
    const ok = window.confirm(`Supprimer ${employee.firstName} ${employee.lastName} ?`)
    if (!ok) return

    await deleteEmployee(employee.id)
    await loadEmployees()
}
</script>