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

<script setup lang="ts">
/**
 * Decisions — page index.
 *
 * Utilise SectionLayout avec status filters, recherche, tri,
 * et sidebar "Boite a outils" affichant les protocoles de vote.
 */
const decisions = useDecisionsStore()
const protocols = useProtocolsStore()
const auth = useAuthStore()

const activeStatus = ref<string | null>(null)
const searchQuery = ref('')
const sortBy = ref<'date' | 'title' | 'status'>('date')

const sortOptions = [
  { label: 'Date', value: 'date' },
  { label: 'Titre', value: 'title' },
  { label: 'Statut', value: 'status' },
]

onMounted(async () => {
  await Promise.all([
    decisions.fetchAll(),
    protocols.fetchProtocols(),
  ])
})

/** Status filter pills with counts. */
const statuses = computed(() => [
  { id: 'draft', label: 'En prepa', count: decisions.list.filter(d => d.status === 'draft').length },
  { id: 'voting', label: 'En vote', count: decisions.list.filter(d => d.status === 'voting' || d.status === 'qualification' || d.status === 'review').length },
  { id: 'executed', label: 'En vigueur', count: decisions.list.filter(d => d.status === 'executed').length },
  { id: 'closed', label: 'Clos', count: decisions.list.filter(d => d.status === 'closed').length },
])

/** Map for the voting pill — include qualification/review under "En vote". */
const statusGroupMap: Record<string, string[]> = {
  draft: ['draft'],
  voting: ['qualification', 'review', 'voting'],
  executed: ['executed'],
  closed: ['closed'],
}

/** Filtered and sorted decisions. */
const filteredDecisions = computed(() => {
  let list = [...decisions.list]

  // Filter by status group
  if (activeStatus.value && statusGroupMap[activeStatus.value]) {
    const statuses = statusGroupMap[activeStatus.value]
    list = list.filter(d => statuses.includes(d.status))
  }

  // Filter by search query (client-side)
  if (searchQuery.value.trim()) {
    const q = searchQuery.value.toLowerCase()
    list = list.filter(d => d.title.toLowerCase().includes(q))
  }

  // Sort
  switch (sortBy.value) {
    case 'title':
      list.sort((a, b) => a.title.localeCompare(b.title, 'fr'))
      break
    case 'status':
      list.sort((a, b) => a.status.localeCompare(b.status))
      break
    case 'date':
    default:
      list.sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
      break
  }

  return list
})

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 'parameter_change': return 'Param. change'
    case 'other': return 'Autre'
    default: return decisionType
  }
}

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

<template>
  <SectionLayout
    title="Decisions"
    subtitle="Processus de decision collectifs"
    :statuses="statuses"
    :active-status="activeStatus"
    @update:active-status="activeStatus = $event"
  >
    <!-- Search / sort bar -->
    <template #search>
      <UInput
        v-model="searchQuery"
        placeholder="Rechercher une decision..."
        icon="i-lucide-search"
        size="sm"
        class="w-full sm:w-64"
      />
      <USelect
        v-model="sortBy"
        :items="sortOptions"
        size="sm"
        class="w-36"
      />
      <UButton
        v-if="auth.isAuthenticated"
        to="/decisions/new"
        label="Nouvelle"
        icon="i-lucide-plus"
        color="primary"
        size="sm"
      />
    </template>

    <!-- Main content: decision list -->
    <template #default>
      <!-- Error state -->
      <div v-if="decisions.error" class="flex items-center gap-3 p-4 rounded-lg" style="background: var(--mood-surface); border: 1px solid var(--mood-border);">
        <UIcon name="i-lucide-alert-circle" class="text-xl" style="color: var(--mood-error);" />
        <p style="color: var(--mood-text);">{{ decisions.error }}</p>
      </div>

      <!-- Loading state -->
      <div v-else-if="decisions.loading" class="space-y-3">
        <LoadingSkeleton v-for="i in 5" :key="i" :lines="2" card />
      </div>

      <!-- Empty state -->
      <div
        v-else-if="filteredDecisions.length === 0"
        class="text-center py-12"
        style="color: var(--mood-text-muted);"
      >
        <UIcon name="i-lucide-scale" class="text-4xl mb-3 block mx-auto" />
        <p>Aucune decision trouvee</p>
        <p v-if="searchQuery || activeStatus" class="text-sm mt-1">
          Essayez de modifier vos filtres
        </p>
      </div>

      <!-- Decision cards -->
      <div v-else class="space-y-3">
        <div
          v-for="decision in filteredDecisions"
          :key="decision.id"
          class="decision-card"
          @click="navigateTo(`/decisions/${decision.id}`)"
        >
          <div class="decision-card__header">
            <div class="decision-card__title-block">
              <h3 class="decision-card__title">
                {{ decision.title }}
              </h3>
              <p v-if="decision.description" class="decision-card__description">
                {{ decision.description }}
              </p>
            </div>
            <StatusBadge :status="decision.status" type="decision" />
          </div>

          <div class="decision-card__meta">
            <UBadge variant="subtle" color="primary" size="xs">
              {{ typeLabel(decision.decision_type) }}
            </UBadge>
            <span class="decision-card__steps">
              <UIcon name="i-lucide-layers" class="text-xs" />
              {{ decision.steps.length }} etape{{ decision.steps.length !== 1 ? 's' : '' }}
            </span>
            <span class="decision-card__date">
              {{ formatDate(decision.created_at) }}
            </span>
          </div>
        </div>
      </div>
    </template>

    <!-- Toolbox sidebar -->
    <template #toolbox>
      <div class="toolbox-section-title">
        Modalites de vote
      </div>
      <template v-if="protocols.protocols.length > 0">
        <ToolboxVignette
          v-for="protocol in protocols.protocols"
          :key="protocol.id"
          :title="protocol.name"
          :bullets="['Applicable aux decisions', protocol.mode_params || 'Configuration standard']"
          :actions="[
            { label: 'Voir', icon: 'i-lucide-eye', to: `/protocols/${protocol.id}` },
          ]"
        />
      </template>
      <p v-else class="toolbox-empty-text">
        Aucun protocole configure
      </p>
    </template>
  </SectionLayout>
</template>

<style scoped>
.decision-card {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem;
  background: var(--mood-surface);
  border-radius: 16px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

@media (min-width: 640px) {
  .decision-card {
    gap: 0.625rem;
    padding: 1.25rem;
  }
}

.decision-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px var(--mood-shadow);
}

.decision-card:active {
  transform: translateY(0);
}

.decision-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}

.decision-card__title-block {
  flex: 1;
  min-width: 0;
}

.decision-card__title {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--mood-text);
  line-height: 1.3;
}

@media (min-width: 640px) {
  .decision-card__title {
    font-size: 1.0625rem;
  }
}

.decision-card__description {
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 640px) {
  .decision-card__description {
    font-size: 0.875rem;
  }
}

.decision-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}

@media (min-width: 640px) {
  .decision-card__meta {
    gap: 0.5rem;
  }
}

.decision-card__steps {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
}

.decision-card__date {
  font-size: 0.75rem;
  color: var(--mood-text-muted);
  margin-left: auto;
}

@media (min-width: 640px) {
  .decision-card__date {
    font-size: 0.8125rem;
  }
}

.toolbox-section-title {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--mood-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.toolbox-empty-text {
  font-size: 0.8125rem;
  color: var(--mood-text-muted);
}
</style>