SIRH/frontend/components/hours/HoursWeekView.vue

<template>
  <div class="bg-white overflow-hidden flex min-h-0 flex-col">
    <div v-if="isWeekLoading" class="p-6 text-md text-neutral-600">Chargement de la semaine...</div>

    <!-- Mobile cards -->
    <div v-else class="overflow-y-auto min-h-0 space-y-3 lg:hidden">
      <div
        v-for="row in weeklySummary?.rows ?? []"
        :key="'m-' + row.employeeId"
        class="rounded-md border border-primary-500 bg-white p-4"
      >
        <div class="mb-3">
          <p class="text-md font-bold text-primary-500 truncate">
            {{ row.firstName }} {{ row.lastName }}
            <span class="font-normal text-neutral-600 text-sm">({{ row.contractName ?? '-' }})</span>
          </p>
          <p class="text-xs text-neutral-500 truncate">
            {{ row.siteName ?? 'Sans site' }}<span v-if="row.contractNature"> — {{ contractNatureLabel(row.contractNature) }}</span>
          </p>
        </div>

        <!-- Daily breakdown -->
        <div class="mb-3 space-y-1">
          <div
            v-for="(daily, i) in row.daily"
            :key="daily.date"
            class="flex items-center justify-between rounded-md px-2 py-1 text-xs"
            :class="daily.hasAbsence ? 'text-white' : 'text-primary-500'"
            :style="getDailyCellStyle(daily)"
            :title="cellTitle(daily)"
          >
            <span class="font-semibold">{{ weekDayHeaders[i]?.label ?? '' }}</span>
            <span v-if="row.trackingMode === 'PRESENCE'">{{ daily.present ?? 0 }}</span>
            <span v-else>J {{ formatMinutes(daily.dayMinutes) }} / N {{ formatMinutes(daily.nightMinutes) }}</span>
          </div>
        </div>

        <!-- Weekly totals -->
        <div class="border-t border-neutral-200 pt-2 grid grid-cols-2 gap-x-4 gap-y-1 text-xs">
          <div class="flex justify-between">
            <span class="text-neutral-500">Total sem.</span>
            <span class="font-bold text-primary-500">{{ row.trackingMode === 'PRESENCE' ? (row.weeklyPresenceCount ?? 0) : formatMinutes(row.weeklyTotalMinutes) }}</span>
          </div>
          <div class="flex justify-between">
            <span class="text-neutral-500">H. supp.</span>
            <span class="font-bold text-primary-500">{{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyOvertimeTotalMinutes ?? 0) }}</span>
          </div>
          <div v-if="row.trackingMode !== 'PRESENCE' && !isInterimContract(row.contractType)" class="flex justify-between">
            <span class="text-neutral-500">+25%</span>
            <span class="font-bold text-primary-500">{{ formatMinutes(row.weeklyOvertime25Minutes ?? 0) }}</span>
          </div>
          <div v-if="row.trackingMode !== 'PRESENCE' && !isInterimContract(row.contractType)" class="flex justify-between">
            <span class="text-neutral-500">+50%</span>
            <span class="font-bold text-primary-500">{{ formatMinutes(row.weeklyOvertime50Minutes ?? 0) }}</span>
          </div>
          <div v-if="row.trackingMode !== 'PRESENCE' && !isInterimContract(row.contractType)" class="flex justify-between">
            <span class="text-neutral-500">Récup.</span>
            <span class="font-bold text-primary-500">{{ formatMinutes(row.weeklyRecoveryMinutes ?? 0) }}</span>
          </div>
          <div v-if="(row.weeklyNightBasketCount ?? 0) > 0" class="flex justify-between">
            <span class="text-neutral-500">Panier nuit</span>
            <span class="font-bold text-primary-500">{{ row.weeklyNightBasketCount }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- Desktop table -->
    <div v-if="!isWeekLoading" class="overflow-y-auto min-h-0 hidden lg:block">
      <div
        class="grid w-full min-w-0 gap-1 border border-black bg-tertiary-500 px-4 py-3 text-sm font-semibold text-black rounded-t-md sticky top-0 z-10"
        :style="{ gridTemplateColumns: weekGridCols }"
      >
        <span>Nom</span>
        <span v-for="day in weekDayHeaders" :key="day.date" class="text-left">{{ day.label }}</span>
        <span>Jour/Nuit <br>sem.</span>
        <span>Total <br>sem.</span>
        <span>Total <br>h. supp.</span>
        <span>+25%</span>
        <span>+50%</span>
        <span>Total <br>récup.</span>
        <span>Panier <br>nuit</span>
      </div>

      <div class="border-x border-b border-primary-500 rounded-b-md">
      <div
        v-for="row in weeklySummary?.rows ?? []"
        :key="row.employeeId"
        class="grid w-full min-w-0 items-center gap-1 border-b border-primary-500 px-4 py-2 text-sm font-bold text-primary-500 last:border-b-0 hover:bg-tertiary-500"
        :style="{ gridTemplateColumns: weekGridCols }"
      >
        <div class="text-neutral-900 min-w-0">
          <p class="font-semibold truncate">
            {{ row.firstName }} {{ row.lastName }}
            <span class="font-normal text-neutral-600">({{ row.contractName ?? '-' }})</span>
          </p>
          <p class="text-[11px] text-neutral-500 truncate inline-flex items-center gap-2">
            <span>{{ row.siteName ?? 'Sans site' }}<span v-if="row.contractNature"> — {{ contractNatureLabel(row.contractNature) }}</span></span>
            <button v-if="isAdmin" type="button" class="flex items-center text-white p-1" :class="row.comment ? 'bg-red-500 hover:bg-red-600' : 'bg-primary-500 hover:bg-secondary-500'" :title="row.comment ?? 'Ajouter un commentaire'" @click="$emit('open-comment', row)">
              <Icon name="mdi:comment-text-outline" size="12"/>
            </button>
          </p>
        </div>

        <div
          v-for="daily in row.daily"
          :key="daily.date"
          class="text-left leading-4 rounded-md px-2 py-1"
          :class="daily.hasAbsence ? 'text-white' : ''"
          :style="getDailyCellStyle(daily)"
          :title="cellTitle(daily)"
        >
          <template v-if="row.trackingMode === 'PRESENCE'">{{ daily.present ?? 0 }}</template>
          <template v-else>
            <div>J {{ formatMinutes(daily.dayMinutes) }}</div>
            <div>N {{ formatMinutes(daily.nightMinutes) }}</div>
          </template>
        </div>

        <div class="font-semibold leading-4">
          <template v-if="row.trackingMode === 'PRESENCE'">-</template>
          <template v-else>
            <div>J {{ formatMinutes(row.weeklyDayMinutes) }}</div>
            <div>N {{ formatMinutes(row.weeklyNightMinutes) }}</div>
          </template>
        </div>
        <div class="font-semibold">
          {{ row.trackingMode === 'PRESENCE' ? (row.weeklyPresenceCount ?? 0) : formatMinutes(row.weeklyTotalMinutes) }}
        </div>
        <div class="font-semibold">
          {{ row.trackingMode === 'PRESENCE' ? '-' : formatMinutes(row.weeklyOvertimeTotalMinutes ?? 0) }}
        </div>
        <div class="font-semibold">
          {{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyOvertime25Minutes ?? 0) }}
        </div>
        <div class="font-semibold">
          {{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyOvertime50Minutes ?? 0) }}
        </div>
        <div class="font-semibold">
          {{ row.trackingMode === 'PRESENCE' || isInterimContract(row.contractType) ? '-' : formatMinutes(row.weeklyRecoveryMinutes ?? 0) }}
        </div>
        <div class="font-semibold">
          {{ (row.weeklyNightBasketCount ?? 0) > 0 ? row.weeklyNightBasketCount : '-' }}
        </div>
      </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { WeeklyWorkHourSummary } from '~/services/dto/work-hour'
import { CONTRACT_TYPES, type ContractType } from '~/services/dto/contract'
import { contractNatureLabel } from '~/utils/contract'

const isInterimContract = (contractType?: ContractType | null) => {
  return contractType === CONTRACT_TYPES.INTERIM
}

const HOLIDAY_BG_COLOR = '#b3e5fc'

const getDailyCellStyle = (daily: {
  hasAbsence?: boolean
  absenceColor?: string | null
  holidayLabel?: string | null
}) => {
  if (daily.hasAbsence) return { backgroundColor: daily.absenceColor || '#dc2626' }
  if (daily.holidayLabel) return { backgroundColor: HOLIDAY_BG_COLOR }
  return undefined
}

const cellTitle = (daily: {
  hasAbsence?: boolean
  absenceLabel?: string | null
  holidayLabel?: string | null
}) => {
  const parts: string[] = []
  if (daily.absenceLabel) parts.push(daily.absenceLabel)
  if (daily.holidayLabel) parts.push(`Férié : ${daily.holidayLabel}`)
  return parts.join(' — ')
}

defineProps<{
  isWeekLoading: boolean
  isAdmin: boolean
  weekGridCols: string
  weeklySummary: WeeklyWorkHourSummary | null
  weekDayHeaders: Array<{ date: string; label: string }>
  formatMinutes: (minutes: number) => string
}>()

defineEmits<{ (e: 'open-comment', row: WeeklyWorkHourSummary['rows'][number]): void }>()
</script>