decision/frontend/app/pages/decisions/[id].vue

<script setup lang="ts">
const route = useRoute()
const decisions = useDecisionsStore()

const decisionId = computed(() => route.params.id as string)

onMounted(async () => {
  await decisions.fetchById(decisionId.value)
})

onUnmounted(() => {
  decisions.clearCurrent()
})

watch(decisionId, async (newId) => {
  if (newId) {
    await decisions.fetchById(newId)
  }
})

const statusColor = (status: string) => {
  switch (status) {
    case 'active':
    case 'in_progress': return 'success'
    case 'draft': return 'warning'
    case 'completed': return 'info'
    case 'closed': return 'neutral'
    case 'pending': return 'warning'
    default: return 'neutral'
  }
}

const statusLabel = (status: string) => {
  switch (status) {
    case 'active': return 'Actif'
    case 'in_progress': return 'En cours'
    case 'draft': return 'Brouillon'
    case 'completed': return 'Termine'
    case 'closed': return 'Ferme'
    case 'pending': return 'En attente'
    default: return status
  }
}

const typeLabel = (decisionType: string) => {
  switch (decisionType) {
    case 'runtime_upgrade': return 'Runtime upgrade'
    case 'document_change': return 'Modification de document'
    case 'mandate_vote': return 'Vote de mandat'
    case 'custom': return 'Personnalise'
    default: return decisionType
  }
}

const stepTypeLabel = (stepType: string) => {
  switch (stepType) {
    case 'qualification': return 'Qualification'
    case 'review': return 'Revue'
    case 'vote': return 'Vote'
    case 'execution': return 'Execution'
    case 'reporting': return 'Compte rendu'
    default: return stepType
  }
}

const stepTypeIcon = (stepType: string) => {
  switch (stepType) {
    case 'qualification': return 'i-lucide-check-square'
    case 'review': return 'i-lucide-eye'
    case 'vote': return 'i-lucide-vote'
    case 'execution': return 'i-lucide-play'
    case 'reporting': return 'i-lucide-file-text'
    default: return 'i-lucide-circle'
  }
}

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('fr-FR', {
    day: 'numeric',
    month: 'long',
    year: 'numeric',
  })
}

const sortedSteps = computed(() => {
  if (!decisions.current) return []
  return [...decisions.current.steps].sort((a, b) => a.step_order - b.step_order)
})
</script>

<template>
  <div class="space-y-6">
    <!-- Back link -->
    <div>
      <UButton
        to="/decisions"
        variant="ghost"
        color="neutral"
        icon="i-lucide-arrow-left"
        label="Retour aux decisions"
        size="sm"
      />
    </div>

    <!-- Loading state -->
    <template v-if="decisions.loading">
      <div class="space-y-4">
        <USkeleton class="h-8 w-96" />
        <USkeleton class="h-4 w-64" />
        <div class="space-y-3 mt-8">
          <USkeleton v-for="i in 4" :key="i" class="h-20 w-full" />
        </div>
      </div>
    </template>

    <!-- Error state -->
    <template v-else-if="decisions.error">
      <UCard>
        <div class="flex items-center gap-3 text-red-500">
          <UIcon name="i-lucide-alert-circle" class="text-xl" />
          <p>{{ decisions.error }}</p>
        </div>
      </UCard>
    </template>

    <!-- Decision detail -->
    <template v-else-if="decisions.current">
      <!-- Header -->
      <div>
        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
          {{ decisions.current.title }}
        </h1>
        <div class="flex items-center gap-3 mt-2">
          <UBadge variant="subtle" color="primary">
            {{ typeLabel(decisions.current.decision_type) }}
          </UBadge>
          <UBadge :color="statusColor(decisions.current.status)" variant="subtle">
            {{ statusLabel(decisions.current.status) }}
          </UBadge>
        </div>
      </div>

      <!-- Description & Context -->
      <UCard v-if="decisions.current.description || decisions.current.context">
        <div class="space-y-4">
          <div v-if="decisions.current.description">
            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-1">Description</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
              {{ decisions.current.description }}
            </p>
          </div>
          <div v-if="decisions.current.context">
            <h3 class="text-sm font-semibold text-gray-500 uppercase tracking-wide mb-1">Contexte</h3>
            <p class="text-sm text-gray-700 dark:text-gray-300 whitespace-pre-wrap">
              {{ decisions.current.context }}
            </p>
          </div>
        </div>
      </UCard>

      <!-- Metadata -->
      <UCard>
        <div class="grid grid-cols-2 md:grid-cols-3 gap-4 text-sm">
          <div>
            <p class="text-gray-500">Cree le</p>
            <p class="font-medium text-gray-900 dark:text-white">
              {{ formatDate(decisions.current.created_at) }}
            </p>
          </div>
          <div>
            <p class="text-gray-500">Mis a jour le</p>
            <p class="font-medium text-gray-900 dark:text-white">
              {{ formatDate(decisions.current.updated_at) }}
            </p>
          </div>
          <div>
            <p class="text-gray-500">Nombre d'etapes</p>
            <p class="font-medium text-gray-900 dark:text-white">
              {{ decisions.current.steps.length }}
            </p>
          </div>
        </div>
      </UCard>

      <!-- Steps timeline -->
      <div>
        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
          Etapes du processus
        </h2>

        <div v-if="sortedSteps.length === 0" class="text-center py-8">
          <UIcon name="i-lucide-list-checks" class="text-4xl text-gray-400 mb-3" />
          <p class="text-gray-500">Aucune etape definie pour cette decision</p>
        </div>

        <div v-else class="relative">
          <!-- Timeline line -->
          <div class="absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200 dark:bg-gray-700" />

          <!-- Steps -->
          <div class="space-y-4">
            <div
              v-for="(step, index) in sortedSteps"
              :key="step.id"
              class="relative pl-12"
            >
              <!-- Timeline dot -->
              <div
                class="absolute left-2 w-5 h-5 rounded-full border-2 flex items-center justify-center"
                :class="{
                  'bg-green-500 border-green-500': step.status === 'completed',
                  'bg-primary border-primary': step.status === 'active' || step.status === 'in_progress',
                  'bg-yellow-400 border-yellow-400': step.status === 'pending',
                  'bg-white dark:bg-gray-900 border-gray-300 dark:border-gray-600': step.status === 'draft',
                }"
              >
                <UIcon
                  v-if="step.status === 'completed'"
                  name="i-lucide-check"
                  class="text-white text-xs"
                />
              </div>

              <UCard>
                <div class="space-y-2">
                  <div class="flex items-center justify-between">
                    <div class="flex items-center gap-2">
                      <UIcon :name="stepTypeIcon(step.step_type)" class="text-gray-500" />
                      <span class="text-sm font-mono text-gray-400">Etape {{ step.step_order }}</span>
                      <UBadge variant="subtle" color="neutral" size="xs">
                        {{ stepTypeLabel(step.step_type) }}
                      </UBadge>
                    </div>
                    <UBadge :color="statusColor(step.status)" variant="subtle" size="xs">
                      {{ statusLabel(step.status) }}
                    </UBadge>
                  </div>

                  <h3 v-if="step.title" class="font-medium text-gray-900 dark:text-white">
                    {{ step.title }}
                  </h3>

                  <p v-if="step.description" class="text-sm text-gray-600 dark:text-gray-400">
                    {{ step.description }}
                  </p>

                  <div v-if="step.outcome" class="flex items-center gap-2 mt-2">
                    <UIcon name="i-lucide-flag" class="text-gray-400" />
                    <span class="text-sm text-gray-600 dark:text-gray-400">
                      Resultat : {{ step.outcome }}
                    </span>
                  </div>

                  <div v-if="step.vote_session_id" class="mt-2">
                    <UButton
                      size="xs"
                      variant="soft"
                      color="primary"
                      icon="i-lucide-vote"
                      label="Voir la session de vote"
                    />
                  </div>
                </div>
              </UCard>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>