Lesstime/frontend/components/absence/AbsenceBalanceCards.vue

<template>
    <div>
        <div v-if="balances.length === 0" class="rounded-lg border border-neutral-200 bg-neutral-50 px-4 py-6 text-center text-sm text-neutral-500">
            {{ $t('absences.noBalance') }}
        </div>

        <div v-else class="rounded-xl border border-neutral-200 bg-white p-5 shadow-sm">
            <!-- Primary balance, highlighted -->
            <div v-if="primary" class="flex items-start justify-between">
                <div>
                    <p class="text-sm font-medium text-neutral-500">{{ primary.label }}</p>
                    <p class="mt-1 text-3xl font-bold text-neutral-900">
                        {{ formatNumber(primary.available) }}
                        <span class="text-lg font-normal text-neutral-400">/ {{ formatNumber(acquiredTotal(primary)) }}</span>
                    </p>
                    <p class="text-xs text-neutral-400">{{ $t('absences.remaining') }}</p>
                </div>
                <span
                    class="rounded-full px-2.5 py-1 text-xs font-medium"
                    :style="{ backgroundColor: typeColor(primary.type) + '22', color: typeColor(primary.type) }"
                >
                    {{ primary.period }}
                </span>
            </div>

            <div v-if="primary" class="mt-3 h-2 w-full overflow-hidden rounded-full bg-neutral-100">
                <div
                    class="h-full rounded-full transition-all"
                    :style="{ width: progress(primary) + '%', backgroundColor: typeColor(primary.type) }"
                />
            </div>

            <!-- Acquired (N-1) vs in-progress (N), as on a French payslip -->
            <div v-if="primary && primary.type === 'cp'" class="mt-3 grid grid-cols-2 gap-2">
                <div class="rounded-lg bg-neutral-50 px-3 py-2">
                    <p class="text-xs text-neutral-400">{{ $t('absences.acquiredN1') }}</p>
                    <p class="text-sm font-semibold text-neutral-800">{{ formatNumber(primary.acquired) }}</p>
                </div>
                <div class="rounded-lg bg-neutral-50 px-3 py-2">
                    <p class="text-xs text-neutral-400">{{ $t('absences.acquiringN') }}</p>
                    <p class="text-sm font-semibold text-neutral-800">{{ formatNumber(primary.acquiring) }}</p>
                    <p class="text-[10px] leading-tight text-neutral-400">{{ $t('absences.acquiringHint') }}</p>
                </div>
            </div>

            <div v-if="primary" class="mt-2 flex justify-between text-xs text-neutral-500">
                <span>{{ formatNumber(primary.taken) }} {{ $t('absences.taken') }}</span>
                <span v-if="primary.pending > 0" class="text-amber-600">
                    {{ formatNumber(primary.pending) }} {{ $t('absences.pending') }}
                </span>
            </div>

            <!-- Other balances, compact rows -->
            <div v-if="others.length" class="mt-4 flex flex-col divide-y divide-neutral-100 border-t border-neutral-100 pt-1">
                <div
                    v-for="balance in others"
                    :key="balance.id"
                    class="flex items-center justify-between py-2 text-sm"
                >
                    <span class="flex items-center gap-2 text-neutral-600">
                        <span class="h-2.5 w-2.5 flex-shrink-0 rounded-full" :style="{ backgroundColor: typeColor(balance.type) }" />
                        {{ balance.label }}
                        <span class="text-xs text-neutral-400">{{ balance.period }}</span>
                    </span>
                    <span class="text-neutral-900">
                        <span class="font-semibold">{{ formatNumber(balance.available) }}</span>
                        <span class="text-neutral-400"> / {{ formatNumber(acquiredTotal(balance)) }}</span>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { AbsenceBalance } from '~/services/dto/absence'
import { useAbsenceHelpers } from '~/composables/useAbsenceHelpers'

const props = defineProps<{
    balances: AbsenceBalance[]
}>()

const { typeColor } = useAbsenceHelpers()

// Current paid-leave reference period, mirroring AbsenceBalanceService::periodFor.
const currentCpPeriod = computed<string>(() => {
    const start = useAuthStore().user?.referencePeriodStart ?? '06-01'
    const now = new Date()
    const md = `${String(now.getMonth() + 1).padStart(2, '0')}-${String(now.getDate()).padStart(2, '0')}`
    const startYear = md >= start ? now.getFullYear() : now.getFullYear() - 1
    return `${startYear}-${startYear + 1}`
})

// The current "congés payés" balance is the headline; fall back to any CP, then any balance.
const primary = computed<AbsenceBalance | null>(() => {
    const cps = props.balances.filter(b => b.type === 'cp')
    return cps.find(b => b.period === currentCpPeriod.value) ?? cps[0] ?? props.balances[0] ?? null
})

const others = computed<AbsenceBalance[]>(() =>
    props.balances.filter(b => b.id !== primary.value?.id),
)

function formatNumber(n: number): string {
    return (Math.round(n * 2) / 2).toString()
}

// Total entitlement = acquired (N-1) + in-progress (N); falls back to the
// backend-computed field when present.
function acquiredTotal(balance: AbsenceBalance): number {
    return balance.acquiredTotal ?? balance.acquired + balance.acquiring
}

function progress(balance: AbsenceBalance): number {
    const total = acquiredTotal(balance)
    if (total <= 0) return 0
    return Math.min(100, Math.max(0, (balance.taken / total) * 100))
}
</script>