decision/frontend/app/components/votes/VoteHistory.vue

<script setup lang="ts">
/**
 * Vote history list for a session.
 *
 * Displays a table of all votes cast in a session, sorted by date descending.
 * For nuanced votes, shows the level label and color. Shows Smith/TechComm badges.
 */
import type { Vote } from '~/stores/votes'

const props = defineProps<{
  votes: Vote[]
}>()

/** Nuanced level labels matching VoteNuanced component. */
const nuancedLabels: Record<number, { label: string; color: string }> = {
  0: { label: 'CONTRE', color: 'error' },
  1: { label: 'PAS DU TOUT D\'ACCORD', color: 'warning' },
  2: { label: 'PAS D\'ACCORD', color: 'warning' },
  3: { label: 'NEUTRE', color: 'neutral' },
  4: { label: 'D\'ACCORD', color: 'success' },
  5: { label: 'TOUT A FAIT D\'ACCORD', color: 'success' },
}

/** Sorted votes by date descending. */
const sortedVotes = computed(() => {
  return [...props.votes].sort((a, b) => {
    return new Date(b.created_at).getTime() - new Date(a.created_at).getTime()
  })
})

function truncateAddress(address: string): string {
  if (address.length <= 16) return address
  return `${address.slice(0, 8)}...${address.slice(-6)}`
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('fr-FR', {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

function voteLabel(vote: Vote): string {
  if (vote.nuanced_level !== null && vote.nuanced_level !== undefined) {
    return nuancedLabels[vote.nuanced_level]?.label ?? `Niveau ${vote.nuanced_level}`
  }
  return vote.vote_value === 'pour' ? 'Pour' : 'Contre'
}

function voteColor(vote: Vote): string {
  if (vote.nuanced_level !== null && vote.nuanced_level !== undefined) {
    return nuancedLabels[vote.nuanced_level]?.color ?? 'neutral'
  }
  return vote.vote_value === 'pour' ? 'success' : 'error'
}
</script>

<template>
  <div>
    <div v-if="sortedVotes.length === 0" class="text-center py-8">
      <UIcon name="i-lucide-vote" class="text-4xl text-gray-400 mb-3" />
      <p class="text-gray-500">Aucun vote enregistre</p>
    </div>

    <div v-else class="overflow-x-auto">
      <table class="w-full text-sm">
        <thead>
          <tr class="border-b border-gray-200 dark:border-gray-700">
            <th class="text-left px-4 py-3 font-medium text-gray-500">Votant</th>
            <th class="text-left px-4 py-3 font-medium text-gray-500">Vote</th>
            <th class="text-left px-4 py-3 font-medium text-gray-500">Statut</th>
            <th class="text-left px-4 py-3 font-medium text-gray-500">Date</th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="vote in sortedVotes"
            :key="vote.id"
            class="border-b border-gray-100 dark:border-gray-800"
          >
            <!-- Voter address -->
            <td class="px-4 py-3">
              <span class="font-mono text-xs text-gray-700 dark:text-gray-300">
                {{ truncateAddress(vote.voter_id) }}
              </span>
            </td>

            <!-- Vote value -->
            <td class="px-4 py-3">
              <UBadge :color="(voteColor(vote) as any)" variant="subtle" size="xs">
                {{ voteLabel(vote) }}
              </UBadge>
            </td>

            <!-- Smith / TechComm badges -->
            <td class="px-4 py-3">
              <div class="flex items-center gap-1">
                <UBadge v-if="vote.voter_is_smith" color="info" variant="subtle" size="xs">
                  Smith
                </UBadge>
                <UBadge v-if="vote.voter_is_techcomm" color="purple" variant="subtle" size="xs">
                  TechComm
                </UBadge>
                <span v-if="!vote.voter_is_smith && !vote.voter_is_techcomm" class="text-xs text-gray-400">
                  Membre
                </span>
              </div>
            </td>

            <!-- Date -->
            <td class="px-4 py-3 text-xs text-gray-500">
              {{ formatDate(vote.created_at) }}
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>