decision/frontend/app/pages/decisions/index.vue

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

const filterType = ref<string | undefined>(undefined)
const filterStatus = ref<string | undefined>(undefined)

const typeOptions = [
  { label: 'Tous les types', value: undefined },
  { label: 'Runtime upgrade', value: 'runtime_upgrade' },
  { label: 'Modification de document', value: 'document_change' },
  { label: 'Vote de mandat', value: 'mandate_vote' },
  { label: 'Personnalise', value: 'custom' },
]

const statusOptions = [
  { label: 'Tous les statuts', value: undefined },
  { label: 'Brouillon', value: 'draft' },
  { label: 'En cours', value: 'in_progress' },
  { label: 'Actif', value: 'active' },
  { label: 'Termine', value: 'completed' },
  { label: 'Ferme', value: 'closed' },
]

async function loadDecisions() {
  await decisions.fetchAll({
    decision_type: filterType.value,
    status: filterStatus.value,
  })
}

onMounted(() => {
  loadDecisions()
})

watch([filterType, filterStatus], () => {
  loadDecisions()
})

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'
    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'
    default: return status
  }
}

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

function formatDate(dateStr: string): string {
  return new Date(dateStr).toLocaleDateString('fr-FR', {
    day: 'numeric',
    month: 'short',
    year: 'numeric',
  })
}
</script>

<template>
  <div class="space-y-6">
    <!-- Header -->
    <div>
      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
        Decisions
      </h1>
      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
        Processus de decision collectifs de la communaute
      </p>
    </div>

    <!-- Filters -->
    <div class="flex flex-wrap gap-4">
      <USelect
        v-model="filterType"
        :items="typeOptions"
        placeholder="Type de decision"
        class="w-56"
      />
      <USelect
        v-model="filterStatus"
        :items="statusOptions"
        placeholder="Statut"
        class="w-48"
      />
    </div>

    <!-- Loading state -->
    <template v-if="decisions.loading">
      <div class="space-y-3">
        <USkeleton v-for="i in 5" :key="i" class="h-12 w-full" />
      </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>

    <!-- Empty state -->
    <template v-else-if="decisions.list.length === 0">
      <UCard>
        <div class="text-center py-8">
          <UIcon name="i-lucide-scale" class="text-4xl text-gray-400 mb-3" />
          <p class="text-gray-500">Aucune decision pour le moment</p>
        </div>
      </UCard>
    </template>

    <!-- Decisions table -->
    <template v-else>
      <UCard>
        <div 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 dark:text-gray-400">Titre</th>
                <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Type</th>
                <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Statut</th>
                <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Etapes</th>
                <th class="text-left px-4 py-3 font-medium text-gray-500 dark:text-gray-400">Date</th>
              </tr>
            </thead>
            <tbody>
              <tr
                v-for="decision in decisions.list"
                :key="decision.id"
                class="border-b border-gray-100 dark:border-gray-800 hover:bg-gray-50 dark:hover:bg-gray-800/50 cursor-pointer"
                @click="navigateTo(`/decisions/${decision.id}`)"
              >
                <td class="px-4 py-3">
                  <div class="flex items-center gap-2">
                    <UIcon name="i-lucide-scale" class="text-gray-400" />
                    <div>
                      <span class="font-medium text-gray-900 dark:text-white">{{ decision.title }}</span>
                      <p v-if="decision.description" class="text-xs text-gray-500 mt-0.5 line-clamp-1">
                        {{ decision.description }}
                      </p>
                    </div>
                  </div>
                </td>
                <td class="px-4 py-3">
                  <UBadge variant="subtle" color="primary" size="xs">
                    {{ typeLabel(decision.decision_type) }}
                  </UBadge>
                </td>
                <td class="px-4 py-3">
                  <UBadge :color="statusColor(decision.status)" variant="subtle" size="xs">
                    {{ statusLabel(decision.status) }}
                  </UBadge>
                </td>
                <td class="px-4 py-3 text-gray-600 dark:text-gray-400">
                  {{ decision.steps.length }}
                </td>
                <td class="px-4 py-3 text-gray-500 text-xs">
                  {{ formatDate(decision.created_at) }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </UCard>
    </template>
  </div>
</template>