Sprint 4 : decisions et mandats -- workflow complet + vote integration

Backend: 7 nouveaux endpoints (advance, assign, revoke, create-vote-session),
services enrichis avec creation de sessions de vote, assignation de mandataire
et revocation. 35 nouveaux tests (104 total). Frontend: store mandates, page
cadrage decisions, detail mandats, composants DecisionWorkflow, DecisionCadrage,
DecisionCard, MandateTimeline, MandateCard. Documentation mise a jour.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

frontend/app/components/decisions/DecisionCadrage.vue

@@ -0,0 +1,123 @@
+<script setup lang="ts">
+/**
+ * Cadrage form component for creating or editing a decision.
+ *
+ * Provides all fields needed for the initial decision setup:
+ * title, description, context, decision type, and voting protocol.
+ */
+import type { DecisionCreate } from '~/stores/decisions'
+
+const props = defineProps<{
+  modelValue: DecisionCreate
+  submitting?: boolean
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: DecisionCreate]
+  'submit': []
+}>()
+
+const decisionTypeOptions = [
+  { label: 'Runtime upgrade', value: 'runtime_upgrade' },
+  { label: 'Modification de document', value: 'document_change' },
+  { label: 'Vote de mandat', value: 'mandate_vote' },
+  { label: 'Changement de parametre', value: 'parameter_change' },
+  { label: 'Autre', value: 'other' },
+]
+
+function updateField<K extends keyof DecisionCreate>(field: K, value: DecisionCreate[K]) {
+  emit('update:modelValue', { ...props.modelValue, [field]: value })
+}
+
+const isValid = computed(() => {
+  return props.modelValue.title?.trim() && props.modelValue.decision_type
+})
+
+function onSubmit() {
+  if (isValid.value) {
+    emit('submit')
+  }
+}
+</script>
+
+<template>
+  <form class="space-y-6" @submit.prevent="onSubmit">
+    <!-- Titre -->
+    <div class="space-y-1">
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+        Titre <span class="text-red-500">*</span>
+      </label>
+      <UInput
+        :model-value="modelValue.title"
+        placeholder="Titre de la decision..."
+        required
+        @update:model-value="updateField('title', $event as string)"
+      />
+    </div>
+
+    <!-- Description -->
+    <div class="space-y-1">
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+        Description <span class="text-red-500">*</span>
+      </label>
+      <UTextarea
+        :model-value="modelValue.description ?? ''"
+        placeholder="Decrivez l'objet de cette decision..."
+        :rows="4"
+        @update:model-value="updateField('description', $event as string)"
+      />
+    </div>
+
+    <!-- Contexte -->
+    <div class="space-y-1">
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+        Contexte
+      </label>
+      <UTextarea
+        :model-value="modelValue.context ?? ''"
+        placeholder="Contexte, motivations, liens utiles..."
+        :rows="3"
+        @update:model-value="updateField('context', $event as string)"
+      />
+    </div>
+
+    <!-- Type de decision -->
+    <div class="space-y-1">
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+        Type de decision <span class="text-red-500">*</span>
+      </label>
+      <USelect
+        :model-value="modelValue.decision_type"
+        :items="decisionTypeOptions"
+        placeholder="Selectionnez un type..."
+        @update:model-value="updateField('decision_type', $event as string)"
+      />
+    </div>
+
+    <!-- Protocole de vote -->
+    <div class="space-y-1">
+      <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+        Protocole de vote
+      </label>
+      <ProtocolsProtocolPicker
+        :model-value="modelValue.voting_protocol_id ?? null"
+        @update:model-value="updateField('voting_protocol_id', $event)"
+      />
+      <p class="text-xs text-gray-500">
+        Optionnel. Peut etre defini ulterieurement pour chaque etape.
+      </p>
+    </div>
+
+    <!-- Submit -->
+    <div class="flex justify-end pt-4 border-t border-gray-200 dark:border-gray-700">
+      <UButton
+        type="submit"
+        label="Creer la decision"
+        icon="i-lucide-plus"
+        color="primary"
+        :loading="submitting"
+        :disabled="!isValid"
+      />
+    </div>
+  </form>
+</template>

frontend/app/components/decisions/DecisionCard.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+/**
+ * Card component for displaying a decision in a list.
+ *
+ * Shows title, type badge, status badge, step count, and creation date.
+ * Navigates to the decision detail page on click.
+ */
+import type { Decision } from '~/stores/decisions'
+
+const props = defineProps<{
+  decision: Decision
+}>()
+
+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',
+  })
+}
+
+function navigate() {
+  navigateTo(`/decisions/${props.decision.id}`)
+}
+</script>
+
+<template>
+  <UCard
+    class="cursor-pointer hover:ring-2 hover:ring-primary/50 hover:shadow-md transition-all"
+    @click="navigate"
+  >
+    <div class="space-y-3">
+      <div class="flex items-start justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-lucide-scale" class="text-gray-400" />
+          <h3 class="font-semibold text-gray-900 dark:text-white">
+            {{ decision.title }}
+          </h3>
+        </div>
+        <CommonStatusBadge :status="decision.status" type="decision" />
+      </div>
+
+      <p v-if="decision.description" class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
+        {{ decision.description }}
+      </p>
+
+      <div class="flex items-center gap-3 flex-wrap">
+        <UBadge variant="subtle" color="primary" size="xs">
+          {{ typeLabel(decision.decision_type) }}
+        </UBadge>
+        <span class="text-xs text-gray-500">
+          {{ decision.steps.length }} etape(s)
+        </span>
+        <span class="text-xs text-gray-500">
+          {{ formatDate(decision.created_at) }}
+        </span>
+      </div>
+    </div>
+  </UCard>
+</template>

frontend/app/components/decisions/DecisionWorkflow.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+/**
+ * Visual stepper/timeline showing the decision workflow.
+ *
+ * Displays each step with its type icon, status badge, and dates.
+ * The active step is highlighted, completed steps show a checkmark.
+ */
+import type { DecisionStep } from '~/stores/decisions'
+
+const props = defineProps<{
+  steps: DecisionStep[]
+  currentStatus: string
+}>()
+
+const emit = defineEmits<{
+  'create-vote-session': [step: DecisionStep]
+}>()
+
+const sortedSteps = computed(() => {
+  return [...props.steps].sort((a, b) => a.step_order - b.step_order)
+})
+
+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',
+  })
+}
+</script>
+
+<template>
+  <div>
+    <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 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>
+                <CommonStatusBadge :status="step.status" type="decision" />
+              </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 class="text-xs text-gray-500">
+                Cree le {{ formatDate(step.created_at) }}
+              </div>
+
+              <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>
+
+              <!-- Vote session actions -->
+              <div class="flex items-center gap-2 mt-2">
+                <UButton
+                  v-if="step.vote_session_id"
+                  size="xs"
+                  variant="soft"
+                  color="primary"
+                  icon="i-lucide-vote"
+                  label="Voir la session de vote"
+                />
+                <UButton
+                  v-else-if="step.step_type === 'vote' && (step.status === 'active' || step.status === 'pending')"
+                  size="xs"
+                  variant="soft"
+                  color="primary"
+                  icon="i-lucide-plus"
+                  label="Creer une session de vote"
+                  @click.stop="emit('create-vote-session', step)"
+                />
+              </div>
+            </div>
+          </UCard>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

frontend/app/components/mandates/MandateCard.vue

@@ -0,0 +1,82 @@
+<script setup lang="ts">
+/**
+ * Card component for displaying a mandate in a list.
+ *
+ * Shows title, type badge, status badge, mandatee, date range.
+ * Navigates to the mandate detail page on click.
+ */
+import type { Mandate } from '~/stores/mandates'
+
+const props = defineProps<{
+  mandate: Mandate
+}>()
+
+const typeLabel = (mandateType: string) => {
+  switch (mandateType) {
+    case 'techcomm': return 'Comite technique'
+    case 'smith': return 'Forgeron'
+    case 'custom': return 'Personnalise'
+    default: return mandateType
+  }
+}
+
+function formatDate(dateStr: string | null): string {
+  if (!dateStr) return '-'
+  return new Date(dateStr).toLocaleDateString('fr-FR', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })
+}
+
+function navigate() {
+  navigateTo(`/mandates/${props.mandate.id}`)
+}
+</script>
+
+<template>
+  <UCard
+    class="cursor-pointer hover:ring-2 hover:ring-primary/50 hover:shadow-md transition-all"
+    @click="navigate"
+  >
+    <div class="space-y-3">
+      <div class="flex items-start justify-between">
+        <div class="flex items-center gap-2">
+          <UIcon name="i-lucide-user-check" class="text-gray-400" />
+          <h3 class="font-semibold text-gray-900 dark:text-white">
+            {{ mandate.title }}
+          </h3>
+        </div>
+        <CommonStatusBadge :status="mandate.status" type="mandate" />
+      </div>
+
+      <p v-if="mandate.description" class="text-sm text-gray-600 dark:text-gray-400 line-clamp-2">
+        {{ mandate.description }}
+      </p>
+
+      <div class="flex items-center gap-3 flex-wrap">
+        <UBadge variant="subtle" color="primary" size="xs">
+          {{ typeLabel(mandate.mandate_type) }}
+        </UBadge>
+        <span class="text-xs text-gray-500">
+          {{ mandate.steps.length }} etape(s)
+        </span>
+        <span v-if="mandate.mandatee_id" class="text-xs text-gray-500 flex items-center gap-1">
+          <UIcon name="i-lucide-user" class="text-xs" />
+          {{ mandate.mandatee_id.slice(0, 8) }}...
+        </span>
+      </div>
+
+      <div class="grid grid-cols-2 gap-2 text-xs text-gray-500">
+        <div>
+          <span class="block font-medium">Debut</span>
+          {{ formatDate(mandate.starts_at) }}
+        </div>
+        <div>
+          <span class="block font-medium">Fin</span>
+          {{ formatDate(mandate.ends_at) }}
+        </div>
+      </div>
+    </div>
+  </UCard>
+</template>

frontend/app/components/mandates/MandateTimeline.vue

@@ -0,0 +1,138 @@
+<script setup lang="ts">
+/**
+ * Visual timeline for mandate lifecycle steps.
+ *
+ * Displays each step with its type, status, and visual indicators.
+ * Similar pattern to DecisionWorkflow but with mandate-specific step types.
+ */
+import type { MandateStep } from '~/stores/mandates'
+
+const props = defineProps<{
+  steps: MandateStep[]
+  currentStatus: string
+}>()
+
+const sortedSteps = computed(() => {
+  return [...props.steps].sort((a, b) => a.step_order - b.step_order)
+})
+
+const stepTypeLabel = (stepType: string) => {
+  switch (stepType) {
+    case 'candidacy': return 'Candidature'
+    case 'voting': return 'Vote'
+    case 'active': return 'Actif'
+    case 'reporting': return 'Rapport'
+    case 'completed': return 'Termine'
+    default: return stepType
+  }
+}
+
+const stepTypeIcon = (stepType: string) => {
+  switch (stepType) {
+    case 'candidacy': return 'i-lucide-user-plus'
+    case 'voting': return 'i-lucide-vote'
+    case 'active': return 'i-lucide-shield-check'
+    case 'reporting': return 'i-lucide-file-text'
+    case 'completed': return 'i-lucide-check-circle'
+    default: return 'i-lucide-circle'
+  }
+}
+
+function formatDate(dateStr: string): string {
+  return new Date(dateStr).toLocaleDateString('fr-FR', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
+}
+</script>
+
+<template>
+  <div>
+    <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 ce mandat</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 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-red-500 border-red-500': step.status === 'revoked',
+              '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"
+            />
+            <UIcon
+              v-else-if="step.status === 'revoked'"
+              name="i-lucide-x"
+              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>
+                <CommonStatusBadge :status="step.status" type="mandate" />
+              </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 class="text-xs text-gray-500">
+                Cree le {{ formatDate(step.created_at) }}
+              </div>
+
+              <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>