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>

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import type { DecisionStep, DecisionStepCreate } from '~/stores/decisions'
+
 const route = useRoute()
 const decisions = useDecisionsStore()
 
@@ -18,26 +20,36 @@ watch(decisionId, async (newId) => {
   }
 })
 
+// --- Status helpers ---
+
 const statusColor = (status: string) => {
   switch (status) {
-    case 'active':
-    case 'in_progress': return 'success'
     case 'draft': return 'warning'
-    case 'completed': return 'info'
+    case 'qualification': return 'info'
+    case 'review': return 'info'
+    case 'voting': return 'primary'
+    case 'executed': return 'success'
     case 'closed': return 'neutral'
     case 'pending': return 'warning'
+    case 'active': return 'success'
+    case 'in_progress': return 'success'
+    case 'completed': return 'info'
     default: return 'neutral'
   }
 }
 
 const statusLabel = (status: string) => {
   switch (status) {
+    case 'draft': return 'Brouillon'
+    case 'qualification': return 'Qualification'
+    case 'review': return 'Revue'
+    case 'voting': return 'En vote'
+    case 'executed': return 'Execute'
+    case 'closed': return 'Clos'
+    case 'pending': return 'En attente'
     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
   }
 }
@@ -47,33 +59,12 @@ const typeLabel = (decisionType: string) => {
     case 'runtime_upgrade': return 'Runtime upgrade'
     case 'document_change': return 'Modification de document'
     case 'mandate_vote': return 'Vote de mandat'
-    case 'custom': return 'Personnalise'
+    case 'parameter_change': return 'Changement de parametre'
+    case 'other': return 'Autre'
     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',
@@ -82,10 +73,121 @@ function formatDate(dateStr: string): string {
   })
 }
 
-const sortedSteps = computed(() => {
-  if (!decisions.current) return []
-  return [...decisions.current.steps].sort((a, b) => a.step_order - b.step_order)
+// --- Terminal state check ---
+
+const terminalStatuses = ['executed', 'closed']
+const isTerminal = computed(() => {
+  if (!decisions.current) return true
+  return terminalStatuses.includes(decisions.current.status)
 })
+
+const isDraft = computed(() => decisions.current?.status === 'draft')
+
+// --- Advance action ---
+
+const advancing = ref(false)
+
+async function handleAdvance() {
+  advancing.value = true
+  try {
+    await decisions.advance(decisionId.value)
+  } catch {
+    // Error handled by store
+  } finally {
+    advancing.value = false
+  }
+}
+
+// --- Create vote session ---
+
+async function handleCreateVoteSession(step: DecisionStep) {
+  try {
+    await decisions.createVoteSession(decisionId.value, step.id)
+  } catch {
+    // Error handled by store
+  }
+}
+
+// --- Edit modal ---
+
+const showEditModal = ref(false)
+const editData = ref({
+  title: '',
+  description: '' as string | null,
+  context: '' as string | null,
+})
+const saving = ref(false)
+
+function openEdit() {
+  if (!decisions.current) return
+  editData.value = {
+    title: decisions.current.title,
+    description: decisions.current.description,
+    context: decisions.current.context,
+  }
+  showEditModal.value = true
+}
+
+async function saveEdit() {
+  saving.value = true
+  try {
+    await decisions.update(decisionId.value, editData.value)
+    showEditModal.value = false
+  } catch {
+    // Error handled by store
+  } finally {
+    saving.value = false
+  }
+}
+
+// --- Delete ---
+
+const showDeleteConfirm = ref(false)
+const deleting = ref(false)
+
+async function handleDelete() {
+  deleting.value = true
+  try {
+    await decisions.delete(decisionId.value)
+    navigateTo('/decisions')
+  } catch {
+    // Error handled by store
+  } finally {
+    deleting.value = false
+    showDeleteConfirm.value = false
+  }
+}
+
+// --- Add step ---
+
+const showAddStep = ref(false)
+const newStep = ref<DecisionStepCreate>({
+  step_type: 'qualification',
+  title: '',
+  description: '',
+})
+const addingStep = ref(false)
+
+const stepTypeOptions = [
+  { label: 'Qualification', value: 'qualification' },
+  { label: 'Revue', value: 'review' },
+  { label: 'Vote', value: 'vote' },
+  { label: 'Execution', value: 'execution' },
+  { label: 'Compte rendu', value: 'reporting' },
+]
+
+async function handleAddStep() {
+  addingStep.value = true
+  try {
+    await decisions.addStep(decisionId.value, newStep.value)
+    showAddStep.value = false
+    newStep.value = { step_type: 'qualification', title: '', description: '' }
+  } catch {
+    // Error handled by store
+  } finally {
+    addingStep.value = false
+  }
+}
 </script>
 
 <template>
@@ -125,18 +227,51 @@ const sortedSteps = computed(() => {
 
     <!-- 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>
+      <!-- Header with actions -->
+      <div class="flex items-start justify-between">
+        <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>
+
+        <!-- Action buttons -->
+        <div class="flex items-center gap-2">
+          <UButton
+            v-if="!isTerminal"
+            icon="i-lucide-fast-forward"
+            label="Avancer la decision"
+            color="primary"
+            variant="soft"
+            size="sm"
+            :loading="advancing"
+            @click="handleAdvance"
+          />
+          <UButton
+            icon="i-lucide-pen-line"
+            label="Modifier"
+            variant="soft"
+            color="neutral"
+            size="sm"
+            @click="openEdit"
+          />
+          <UButton
+            v-if="isDraft"
+            icon="i-lucide-trash-2"
+            label="Supprimer"
+            variant="soft"
+            color="error"
+            size="sm"
+            @click="showDeleteConfirm = true"
+          />
         </div>
       </div>
 
@@ -184,88 +319,146 @@ const sortedSteps = computed(() => {
 
       <!-- 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 class="flex items-center justify-between mb-4">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
+            Etapes du processus
+          </h2>
+          <UButton
+            v-if="!isTerminal"
+            icon="i-lucide-plus"
+            label="Ajouter une etape"
+            variant="soft"
+            color="primary"
+            size="sm"
+            @click="showAddStep = true"
+          />
         </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>
+        <DecisionsDecisionWorkflow
+          :steps="decisions.current.steps"
+          :current-status="decisions.current.status"
+          @create-vote-session="handleCreateVoteSession"
+        />
       </div>
     </template>
+
+    <!-- Edit modal -->
+    <UModal v-model:open="showEditModal">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            Modifier la decision
+          </h3>
+
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Titre</label>
+            <UInput v-model="editData.title" />
+          </div>
+
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
+            <UTextarea v-model="editData.description" :rows="4" />
+          </div>
+
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Contexte</label>
+            <UTextarea v-model="editData.context" :rows="3" />
+          </div>
+
+          <div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
+            <UButton
+              label="Annuler"
+              variant="ghost"
+              color="neutral"
+              @click="showEditModal = false"
+            />
+            <UButton
+              label="Enregistrer"
+              icon="i-lucide-save"
+              color="primary"
+              :loading="saving"
+              :disabled="!editData.title?.trim()"
+              @click="saveEdit"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Delete confirmation modal -->
+    <UModal v-model:open="showDeleteConfirm">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <h3 class="text-lg font-semibold text-red-600">
+            Confirmer la suppression
+          </h3>
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            Etes-vous sur de vouloir supprimer cette decision ? Cette action est irreversible.
+          </p>
+          <div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
+            <UButton
+              label="Annuler"
+              variant="ghost"
+              color="neutral"
+              @click="showDeleteConfirm = false"
+            />
+            <UButton
+              label="Supprimer"
+              icon="i-lucide-trash-2"
+              color="error"
+              :loading="deleting"
+              @click="handleDelete"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Add step modal -->
+    <UModal v-model:open="showAddStep">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            Ajouter une etape
+          </h3>
+
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Type d'etape <span class="text-red-500">*</span>
+            </label>
+            <USelect
+              v-model="newStep.step_type"
+              :items="stepTypeOptions"
+            />
+          </div>
+
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Titre</label>
+            <UInput v-model="newStep.title" placeholder="Titre de l'etape..." />
+          </div>
+
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
+            <UTextarea v-model="newStep.description" :rows="3" placeholder="Description de l'etape..." />
+          </div>
+
+          <div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
+            <UButton
+              label="Annuler"
+              variant="ghost"
+              color="neutral"
+              @click="showAddStep = false"
+            />
+            <UButton
+              label="Ajouter"
+              icon="i-lucide-plus"
+              color="primary"
+              :loading="addingStep"
+              @click="handleAddStep"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
   </div>
 </template>

frontend/app/pages/decisions/index.vue

@@ -9,16 +9,18 @@ const typeOptions = [
   { label: 'Runtime upgrade', value: 'runtime_upgrade' },
   { label: 'Modification de document', value: 'document_change' },
   { label: 'Vote de mandat', value: 'mandate_vote' },
-  { label: 'Personnalise', value: 'custom' },
+  { label: 'Changement de parametre', value: 'parameter_change' },
+  { label: 'Autre', value: 'other' },
 ]
 
 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' },
+  { label: 'Qualification', value: 'qualification' },
+  { label: 'Revue', value: 'review' },
+  { label: 'En vote', value: 'voting' },
+  { label: 'Execute', value: 'executed' },
+  { label: 'Clos', value: 'closed' },
 ]
 
 async function loadDecisions() {
@@ -38,10 +40,11 @@ watch([filterType, filterStatus], () => {
 
 const statusColor = (status: string) => {
   switch (status) {
-    case 'active':
-    case 'in_progress': return 'success'
     case 'draft': return 'warning'
-    case 'completed': return 'info'
+    case 'qualification': return 'info'
+    case 'review': return 'info'
+    case 'voting': return 'primary'
+    case 'executed': return 'success'
     case 'closed': return 'neutral'
     default: return 'neutral'
   }
@@ -49,11 +52,12 @@ const statusColor = (status: string) => {
 
 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 'qualification': return 'Qualification'
+    case 'review': return 'Revue'
+    case 'voting': return 'En vote'
+    case 'executed': return 'Execute'
+    case 'closed': return 'Clos'
     default: return status
   }
 }
@@ -63,7 +67,8 @@ const typeLabel = (decisionType: string) => {
     case 'runtime_upgrade': return 'Runtime upgrade'
     case 'document_change': return 'Modif. document'
     case 'mandate_vote': return 'Vote de mandat'
-    case 'custom': return 'Personnalise'
+    case 'parameter_change': return 'Param. change'
+    case 'other': return 'Autre'
     default: return decisionType
   }
 }
@@ -80,13 +85,21 @@ function formatDate(dateStr: string): string {
 <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 class="flex items-start justify-between">
+      <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>
+      <UButton
+        to="/decisions/new"
+        icon="i-lucide-plus"
+        label="Nouvelle decision"
+        color="primary"
+      />
     </div>
 
     <!-- Filters -->

frontend/app/pages/decisions/new.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { DecisionCreate } from '~/stores/decisions'
+
+const decisions = useDecisionsStore()
+
+const formData = ref<DecisionCreate>({
+  title: '',
+  description: '',
+  context: '',
+  decision_type: 'other',
+  voting_protocol_id: null,
+})
+
+const submitting = ref(false)
+
+async function onSubmit() {
+  submitting.value = true
+  try {
+    const decision = await decisions.create(formData.value)
+    if (decision) {
+      navigateTo(`/decisions/${decision.id}`)
+    }
+  } catch {
+    // Error is handled by the store
+  } finally {
+    submitting.value = false
+  }
+}
+</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>
+
+    <!-- Header -->
+    <div>
+      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+        Nouvelle decision
+      </h1>
+      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+        Cadrage d'un nouveau processus de decision collectif
+      </p>
+    </div>
+
+    <!-- Error -->
+    <UCard v-if="decisions.error">
+      <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>
+
+    <!-- Form -->
+    <UCard>
+      <DecisionsDecisionCadrage
+        v-model="formData"
+        :submitting="submitting"
+        @submit="onSubmit"
+      />
+    </UCard>
+  </div>
+</template>

frontend/app/pages/mandates/[id].vue

@@ -0,0 +1,471 @@
+<script setup lang="ts">
+const route = useRoute()
+const mandates = useMandatesStore()
+
+const mandateId = computed(() => route.params.id as string)
+
+onMounted(async () => {
+  await mandates.fetchById(mandateId.value)
+})
+
+onUnmounted(() => {
+  mandates.clearCurrent()
+})
+
+watch(mandateId, async (newId) => {
+  if (newId) {
+    await mandates.fetchById(newId)
+  }
+})
+
+// --- Status helpers ---
+
+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: 'long',
+    year: 'numeric',
+  })
+}
+
+// --- Terminal state check ---
+
+const terminalStatuses = ['completed', 'revoked']
+const isTerminal = computed(() => {
+  if (!mandates.current) return true
+  return terminalStatuses.includes(mandates.current.status)
+})
+
+const canRevoke = computed(() => {
+  if (!mandates.current) return false
+  return mandates.current.status === 'active'
+})
+
+// --- Advance action ---
+
+const advancing = ref(false)
+
+async function handleAdvance() {
+  advancing.value = true
+  try {
+    await mandates.advance(mandateId.value)
+  } catch {
+    // Error handled by store
+  } finally {
+    advancing.value = false
+  }
+}
+
+// --- Assign mandatee ---
+
+const showAssignModal = ref(false)
+const mandateeAddress = ref('')
+const assigning = ref(false)
+
+async function handleAssign() {
+  if (!mandateeAddress.value.trim()) return
+  assigning.value = true
+  try {
+    await mandates.assignMandatee(mandateId.value, mandateeAddress.value.trim())
+    showAssignModal.value = false
+    mandateeAddress.value = ''
+  } catch {
+    // Error handled by store
+  } finally {
+    assigning.value = false
+  }
+}
+
+// --- Revoke ---
+
+const showRevokeConfirm = ref(false)
+const revoking = ref(false)
+
+async function handleRevoke() {
+  revoking.value = true
+  try {
+    await mandates.revoke(mandateId.value)
+    showRevokeConfirm.value = false
+  } catch {
+    // Error handled by store
+  } finally {
+    revoking.value = false
+  }
+}
+
+// --- Edit modal ---
+
+const showEditModal = ref(false)
+const editData = ref({
+  title: '',
+  description: '' as string | null,
+})
+const saving = ref(false)
+
+function openEdit() {
+  if (!mandates.current) return
+  editData.value = {
+    title: mandates.current.title,
+    description: mandates.current.description,
+  }
+  showEditModal.value = true
+}
+
+async function saveEdit() {
+  saving.value = true
+  try {
+    await mandates.update(mandateId.value, editData.value)
+    showEditModal.value = false
+  } catch {
+    // Error handled by store
+  } finally {
+    saving.value = false
+  }
+}
+
+// --- Delete ---
+
+const showDeleteConfirm = ref(false)
+const deleting = ref(false)
+const isDraft = computed(() => mandates.current?.status === 'draft')
+
+async function handleDelete() {
+  deleting.value = true
+  try {
+    await mandates.delete(mandateId.value)
+    navigateTo('/mandates')
+  } catch {
+    // Error handled by store
+  } finally {
+    deleting.value = false
+    showDeleteConfirm.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <!-- Back link -->
+    <div>
+      <UButton
+        to="/mandates"
+        variant="ghost"
+        color="neutral"
+        icon="i-lucide-arrow-left"
+        label="Retour aux mandats"
+        size="sm"
+      />
+    </div>
+
+    <!-- Loading state -->
+    <template v-if="mandates.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="mandates.error">
+      <UCard>
+        <div class="flex items-center gap-3 text-red-500">
+          <UIcon name="i-lucide-alert-circle" class="text-xl" />
+          <p>{{ mandates.error }}</p>
+        </div>
+      </UCard>
+    </template>
+
+    <!-- Mandate detail -->
+    <template v-else-if="mandates.current">
+      <!-- Header with actions -->
+      <div class="flex items-start justify-between">
+        <div>
+          <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+            {{ mandates.current.title }}
+          </h1>
+          <div class="flex items-center gap-3 mt-2">
+            <UBadge variant="subtle" color="primary">
+              {{ typeLabel(mandates.current.mandate_type) }}
+            </UBadge>
+            <CommonStatusBadge :status="mandates.current.status" type="mandate" />
+          </div>
+        </div>
+
+        <!-- Action buttons -->
+        <div class="flex items-center gap-2">
+          <UButton
+            v-if="!isTerminal"
+            icon="i-lucide-fast-forward"
+            label="Avancer"
+            color="primary"
+            variant="soft"
+            size="sm"
+            :loading="advancing"
+            @click="handleAdvance"
+          />
+          <UButton
+            v-if="!isTerminal && !mandates.current.mandatee_id"
+            icon="i-lucide-user-plus"
+            label="Assigner un mandataire"
+            variant="soft"
+            color="primary"
+            size="sm"
+            @click="showAssignModal = true"
+          />
+          <UButton
+            icon="i-lucide-pen-line"
+            label="Modifier"
+            variant="soft"
+            color="neutral"
+            size="sm"
+            @click="openEdit"
+          />
+          <UButton
+            v-if="canRevoke"
+            icon="i-lucide-shield-off"
+            label="Revoquer"
+            variant="soft"
+            color="error"
+            size="sm"
+            @click="showRevokeConfirm = true"
+          />
+          <UButton
+            v-if="isDraft"
+            icon="i-lucide-trash-2"
+            label="Supprimer"
+            variant="soft"
+            color="error"
+            size="sm"
+            @click="showDeleteConfirm = true"
+          />
+        </div>
+      </div>
+
+      <!-- Description -->
+      <UCard v-if="mandates.current.description">
+        <div>
+          <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">
+            {{ mandates.current.description }}
+          </p>
+        </div>
+      </UCard>
+
+      <!-- Metadata -->
+      <UCard>
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+          <div>
+            <p class="text-gray-500">Mandataire</p>
+            <p class="font-medium text-gray-900 dark:text-white">
+              <template v-if="mandates.current.mandatee_id">
+                <span class="font-mono text-xs">{{ mandates.current.mandatee_id.slice(0, 12) }}...</span>
+              </template>
+              <template v-else>
+                <span class="text-gray-400 italic">Non assigne</span>
+              </template>
+            </p>
+          </div>
+          <div>
+            <p class="text-gray-500">Debut</p>
+            <p class="font-medium text-gray-900 dark:text-white">
+              {{ formatDate(mandates.current.starts_at) }}
+            </p>
+          </div>
+          <div>
+            <p class="text-gray-500">Fin</p>
+            <p class="font-medium text-gray-900 dark:text-white">
+              {{ formatDate(mandates.current.ends_at) }}
+            </p>
+          </div>
+          <div>
+            <p class="text-gray-500">Nombre d'etapes</p>
+            <p class="font-medium text-gray-900 dark:text-white">
+              {{ mandates.current.steps.length }}
+            </p>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Dates metadata -->
+      <UCard>
+        <div class="grid grid-cols-2 gap-4 text-sm">
+          <div>
+            <p class="text-gray-500">Cree le</p>
+            <p class="font-medium text-gray-900 dark:text-white">
+              {{ formatDate(mandates.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(mandates.current.updated_at) }}
+            </p>
+          </div>
+        </div>
+      </UCard>
+
+      <!-- Steps timeline -->
+      <div>
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
+          Etapes du mandat
+        </h2>
+
+        <MandatesMandateTimeline
+          :steps="mandates.current.steps"
+          :current-status="mandates.current.status"
+        />
+      </div>
+    </template>
+
+    <!-- Assign mandatee modal -->
+    <UModal v-model:open="showAssignModal">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            Assigner un mandataire
+          </h3>
+
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Adresse du mandataire <span class="text-red-500">*</span>
+            </label>
+            <UInput
+              v-model="mandateeAddress"
+              placeholder="Adresse Duniter (ex: 5Grw...)
+"
+            />
+            <p class="text-xs text-gray-500">
+              Adresse SS58 du membre de la toile de confiance
+            </p>
+          </div>
+
+          <div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
+            <UButton
+              label="Annuler"
+              variant="ghost"
+              color="neutral"
+              @click="showAssignModal = false"
+            />
+            <UButton
+              label="Assigner"
+              icon="i-lucide-user-plus"
+              color="primary"
+              :loading="assigning"
+              :disabled="!mandateeAddress.trim()"
+              @click="handleAssign"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Revoke confirmation modal -->
+    <UModal v-model:open="showRevokeConfirm">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <h3 class="text-lg font-semibold text-red-600">
+            Confirmer la revocation
+          </h3>
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            Etes-vous sur de vouloir revoquer ce mandat ? Le mandataire perdra ses droits et responsabilites.
+          </p>
+          <div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
+            <UButton
+              label="Annuler"
+              variant="ghost"
+              color="neutral"
+              @click="showRevokeConfirm = false"
+            />
+            <UButton
+              label="Revoquer"
+              icon="i-lucide-shield-off"
+              color="error"
+              :loading="revoking"
+              @click="handleRevoke"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Edit modal -->
+    <UModal v-model:open="showEditModal">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            Modifier le mandat
+          </h3>
+
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Titre</label>
+            <UInput v-model="editData.title" />
+          </div>
+
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
+            <UTextarea v-model="editData.description" :rows="4" />
+          </div>
+
+          <div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
+            <UButton
+              label="Annuler"
+              variant="ghost"
+              color="neutral"
+              @click="showEditModal = false"
+            />
+            <UButton
+              label="Enregistrer"
+              icon="i-lucide-save"
+              color="primary"
+              :loading="saving"
+              :disabled="!editData.title?.trim()"
+              @click="saveEdit"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+
+    <!-- Delete confirmation modal -->
+    <UModal v-model:open="showDeleteConfirm">
+      <template #content>
+        <div class="p-6 space-y-4">
+          <h3 class="text-lg font-semibold text-red-600">
+            Confirmer la suppression
+          </h3>
+          <p class="text-sm text-gray-600 dark:text-gray-400">
+            Etes-vous sur de vouloir supprimer ce mandat ? Cette action est irreversible.
+          </p>
+          <div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
+            <UButton
+              label="Annuler"
+              variant="ghost"
+              color="neutral"
+              @click="showDeleteConfirm = false"
+            />
+            <UButton
+              label="Supprimer"
+              icon="i-lucide-trash-2"
+              color="error"
+              :loading="deleting"
+              @click="handleDelete"
+            />
+          </div>
+        </div>
+      </template>
+    </UModal>
+  </div>
+</template>

frontend/app/pages/mandates/index.vue

@@ -1,37 +1,7 @@
 <script setup lang="ts">
-const { $api } = useApi()
+import type { MandateCreate } from '~/stores/mandates'
 
-interface MandateStep {
-  id: string
-  mandate_id: string
-  step_order: number
-  step_type: string
-  title: string | null
-  description: string | null
-  status: string
-  vote_session_id: string | null
-  outcome: string | null
-  created_at: string
-}
-
-interface Mandate {
-  id: string
-  title: string
-  description: string | null
-  mandate_type: string
-  status: string
-  mandatee_id: string | null
-  decision_id: string | null
-  starts_at: string | null
-  ends_at: string | null
-  created_at: string
-  updated_at: string
-  steps: MandateStep[]
-}
-
-const mandates = ref<Mandate[]>([])
-const loading = ref(true)
-const error = ref<string | null>(null)
+const mandates = useMandatesStore()
 
 const filterType = ref<string | undefined>(undefined)
 const filterStatus = ref<string | undefined>(undefined)
@@ -46,26 +16,19 @@ const typeOptions = [
 const statusOptions = [
   { label: 'Tous les statuts', value: undefined },
   { label: 'Brouillon', value: 'draft' },
+  { label: 'Candidature', value: 'candidacy' },
+  { label: 'En vote', value: 'voting' },
   { label: 'Actif', value: 'active' },
-  { label: 'Expire', value: 'expired' },
+  { label: 'Rapport', value: 'reporting' },
+  { label: 'Termine', value: 'completed' },
   { label: 'Revoque', value: 'revoked' },
 ]
 
 async function loadMandates() {
-  loading.value = true
-  error.value = null
-
-  try {
-    const query: Record<string, string> = {}
-    if (filterType.value) query.mandate_type = filterType.value
-    if (filterStatus.value) query.status = filterStatus.value
-
-    mandates.value = await $api<Mandate[]>('/mandates/', { query })
-  } catch (err: any) {
-    error.value = err?.data?.detail || err?.message || 'Erreur lors du chargement des mandats'
-  } finally {
-    loading.value = false
-  }
+  await mandates.fetchAll({
+    mandate_type: filterType.value,
+    status: filterStatus.value,
+  })
 }
 
 onMounted(() => {
@@ -76,55 +39,57 @@ watch([filterType, filterStatus], () => {
   loadMandates()
 })
 
-const statusColor = (status: string) => {
-  switch (status) {
-    case 'active': return 'success'
-    case 'draft': return 'warning'
-    case 'expired': return 'neutral'
-    case 'revoked': return 'error'
-    default: return 'neutral'
-  }
-}
+// --- Create mandate modal ---
 
-const statusLabel = (status: string) => {
-  switch (status) {
-    case 'active': return 'Actif'
-    case 'draft': return 'Brouillon'
-    case 'expired': return 'Expire'
-    case 'revoked': return 'Revoque'
-    default: return status
-  }
-}
+const showCreateModal = ref(false)
+const mandateTypeOptions = [
+  { label: 'Comite technique', value: 'techcomm' },
+  { label: 'Forgeron', value: 'smith' },
+  { label: 'Personnalise', value: 'custom' },
+]
 
-const typeLabel = (mandateType: string) => {
-  switch (mandateType) {
-    case 'techcomm': return 'Comite technique'
-    case 'smith': return 'Forgeron'
-    case 'custom': return 'Personnalise'
-    default: return mandateType
-  }
-}
+const newMandate = ref<MandateCreate>({
+  title: '',
+  description: '',
+  mandate_type: 'techcomm',
+})
+const creating = ref(false)
 
-function formatDate(dateStr: string | null): string {
-  if (!dateStr) return '-'
-  return new Date(dateStr).toLocaleDateString('fr-FR', {
-    day: 'numeric',
-    month: 'short',
-    year: 'numeric',
-  })
+async function handleCreate() {
+  creating.value = true
+  try {
+    const mandate = await mandates.create(newMandate.value)
+    showCreateModal.value = false
+    newMandate.value = { title: '', description: '', mandate_type: 'techcomm' }
+    if (mandate) {
+      navigateTo(`/mandates/${mandate.id}`)
+    }
+  } catch {
+    // Error handled by store
+  } finally {
+    creating.value = false
+  }
 }
 </script>
 
 <template>
   <div class="space-y-6">
     <!-- Header -->
-    <div>
-      <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
-        Mandats
-      </h1>
-      <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
-        Mandats de gouvernance : comite technique, forgerons et roles specifiques
-      </p>
+    <div class="flex items-start justify-between">
+      <div>
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white">
+          Mandats
+        </h1>
+        <p class="mt-1 text-sm text-gray-600 dark:text-gray-400">
+          Mandats de gouvernance : comite technique, forgerons et roles specifiques
+        </p>
+      </div>
+      <UButton
+        icon="i-lucide-plus"
+        label="Nouveau mandat"
+        color="primary"
+        @click="showCreateModal = true"
+      />
     </div>
 
     <!-- Filters -->
@@ -144,24 +109,24 @@ function formatDate(dateStr: string | null): string {
     </div>
 
     <!-- Loading state -->
-    <template v-if="loading">
+    <template v-if="mandates.loading">
       <div class="space-y-3">
         <USkeleton v-for="i in 4" :key="i" class="h-12 w-full" />
       </div>
     </template>
 
     <!-- Error state -->
-    <template v-else-if="error">
+    <template v-else-if="mandates.error">
       <UCard>
         <div class="flex items-center gap-3 text-red-500">
           <UIcon name="i-lucide-alert-circle" class="text-xl" />
-          <p>{{ error }}</p>
+          <p>{{ mandates.error }}</p>
         </div>
       </UCard>
     </template>
 
     <!-- Empty state -->
-    <template v-else-if="mandates.length === 0">
+    <template v-else-if="mandates.list.length === 0">
       <UCard>
         <div class="text-center py-8">
           <UIcon name="i-lucide-user-check" class="text-4xl text-gray-400 mb-3" />
@@ -173,50 +138,72 @@ function formatDate(dateStr: string | null): string {
     <!-- Mandates list -->
     <template v-else>
       <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-        <UCard
-          v-for="mandate in mandates"
+        <MandatesMandateCard
+          v-for="mandate in mandates.list"
           :key="mandate.id"
-          class="hover:shadow-md transition-shadow"
-        >
-          <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>
-              <UBadge :color="statusColor(mandate.status)" variant="subtle" size="xs">
-                {{ statusLabel(mandate.status) }}
-              </UBadge>
-            </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>
-            </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>
+          :mandate="mandate"
+        />
       </div>
     </template>
+
+    <!-- Create mandate modal -->
+    <UModal v-model:open="showCreateModal">
+      <template #content>
+        <form class="p-6 space-y-4" @submit.prevent="handleCreate">
+          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
+            Nouveau mandat
+          </h3>
+
+          <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
+              v-model="newMandate.title"
+              placeholder="Titre du mandat..."
+              required
+            />
+          </div>
+
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Description
+            </label>
+            <UTextarea
+              v-model="newMandate.description"
+              placeholder="Description du mandat..."
+              :rows="3"
+            />
+          </div>
+
+          <div class="space-y-1">
+            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300">
+              Type de mandat <span class="text-red-500">*</span>
+            </label>
+            <USelect
+              v-model="newMandate.mandate_type"
+              :items="mandateTypeOptions"
+            />
+          </div>
+
+          <div class="flex justify-end gap-2 pt-4 border-t border-gray-200 dark:border-gray-700">
+            <UButton
+              label="Annuler"
+              variant="ghost"
+              color="neutral"
+              @click="showCreateModal = false"
+            />
+            <UButton
+              type="submit"
+              label="Creer"
+              icon="i-lucide-plus"
+              color="primary"
+              :loading="creating"
+              :disabled="!newMandate.title?.trim()"
+            />
+          </div>
+        </form>
+      </template>
+    </UModal>
   </div>
 </template>

frontend/app/stores/decisions.ts

@@ -39,6 +39,20 @@ export interface DecisionCreate {
   voting_protocol_id?: string | null
 }
 
+export interface DecisionUpdate {
+  title?: string
+  description?: string | null
+  context?: string | null
+  decision_type?: string
+  voting_protocol_id?: string | null
+}
+
+export interface DecisionStepCreate {
+  step_type: string
+  title?: string | null
+  description?: string | null
+}
+
 interface DecisionsState {
   list: Decision[]
   current: Decision | null
@@ -59,10 +73,12 @@ export const useDecisionsStore = defineStore('decisions', {
       return (status: string) => state.list.filter(d => d.status === status)
     },
     activeDecisions: (state): Decision[] => {
-      return state.list.filter(d => d.status === 'active' || d.status === 'in_progress')
+      return state.list.filter(d =>
+        d.status === 'qualification' || d.status === 'review' || d.status === 'voting',
+      )
     },
     completedDecisions: (state): Decision[] => {
-      return state.list.filter(d => d.status === 'completed' || d.status === 'closed')
+      return state.list.filter(d => d.status === 'executed' || d.status === 'closed')
     },
   },
 
@@ -128,6 +144,108 @@ export const useDecisionsStore = defineStore('decisions', {
       }
     },
 
+    /**
+     * Update an existing decision.
+     */
+    async update(id: string, data: DecisionUpdate) {
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        const updated = await $api<Decision>(`/decisions/${id}`, {
+          method: 'PUT',
+          body: data,
+        })
+        if (this.current?.id === id) this.current = updated
+        const idx = this.list.findIndex(d => d.id === id)
+        if (idx >= 0) this.list[idx] = updated
+        return updated
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors de la mise a jour de la decision'
+        throw err
+      }
+    },
+
+    /**
+     * Delete a decision.
+     */
+    async delete(id: string) {
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        await $api(`/decisions/${id}`, { method: 'DELETE' })
+        this.list = this.list.filter(d => d.id !== id)
+        if (this.current?.id === id) this.current = null
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors de la suppression de la decision'
+        throw err
+      }
+    },
+
+    /**
+     * Advance the decision to the next step in its workflow.
+     */
+    async advance(id: string) {
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        const updated = await $api<Decision>(`/decisions/${id}/advance`, {
+          method: 'POST',
+        })
+        if (this.current?.id === id) this.current = updated
+        const idx = this.list.findIndex(d => d.id === id)
+        if (idx >= 0) this.list[idx] = updated
+        return updated
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors de l\'avancement de la decision'
+        throw err
+      }
+    },
+
+    /**
+     * Add a step to a decision.
+     */
+    async addStep(id: string, step: DecisionStepCreate) {
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        const newStep = await $api<DecisionStep>(`/decisions/${id}/steps`, {
+          method: 'POST',
+          body: step,
+        })
+        if (this.current?.id === id) {
+          this.current.steps.push(newStep)
+        }
+        return newStep
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors de l\'ajout de l\'etape'
+        throw err
+      }
+    },
+
+    /**
+     * Create a vote session for a specific step.
+     */
+    async createVoteSession(decisionId: string, stepId: string) {
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        const result = await $api<any>(`/decisions/${decisionId}/steps/${stepId}/create-vote-session`, {
+          method: 'POST',
+        })
+        // Refresh decision to get updated step with vote_session_id
+        await this.fetchById(decisionId)
+        return result
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors de la creation de la session de vote'
+        throw err
+      }
+    },
+
     /**
      * Clear the current decision.
      */

frontend/app/stores/mandates.ts

@@ -0,0 +1,279 @@
+/**
+ * Mandates store: governance mandates and their lifecycle steps.
+ *
+ * Maps to the backend /api/v1/mandates endpoints.
+ */
+
+export interface MandateStep {
+  id: string
+  mandate_id: string
+  step_order: number
+  step_type: string
+  title: string | null
+  description: string | null
+  status: string
+  vote_session_id: string | null
+  outcome: string | null
+  created_at: string
+}
+
+export interface Mandate {
+  id: string
+  title: string
+  description: string | null
+  mandate_type: string
+  status: string
+  mandatee_id: string | null
+  decision_id: string | null
+  starts_at: string | null
+  ends_at: string | null
+  created_at: string
+  updated_at: string
+  steps: MandateStep[]
+}
+
+export interface MandateCreate {
+  title: string
+  description?: string | null
+  mandate_type: string
+  decision_id?: string | null
+  starts_at?: string | null
+  ends_at?: string | null
+}
+
+export interface MandateUpdate {
+  title?: string
+  description?: string | null
+  mandate_type?: string
+  starts_at?: string | null
+  ends_at?: string | null
+}
+
+export interface MandateStepCreate {
+  step_type: string
+  title?: string | null
+  description?: string | null
+}
+
+interface MandatesState {
+  list: Mandate[]
+  current: Mandate | null
+  loading: boolean
+  error: string | null
+}
+
+export const useMandatesStore = defineStore('mandates', {
+  state: (): MandatesState => ({
+    list: [],
+    current: null,
+    loading: false,
+    error: null,
+  }),
+
+  getters: {
+    byStatus: (state) => {
+      return (status: string) => state.list.filter(m => m.status === status)
+    },
+    activeMandates: (state): Mandate[] => {
+      return state.list.filter(m => m.status === 'active')
+    },
+    completedMandates: (state): Mandate[] => {
+      return state.list.filter(m => m.status === 'completed')
+    },
+  },
+
+  actions: {
+    /**
+     * Fetch all mandates with optional filters.
+     */
+    async fetchAll(params?: { mandate_type?: string; status?: string }) {
+      this.loading = true
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        const query: Record<string, string> = {}
+        if (params?.mandate_type) query.mandate_type = params.mandate_type
+        if (params?.status) query.status = params.status
+
+        this.list = await $api<Mandate[]>('/mandates/', { query })
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors du chargement des mandats'
+      } finally {
+        this.loading = false
+      }
+    },
+
+    /**
+     * Fetch a single mandate by ID with all its steps.
+     */
+    async fetchById(id: string) {
+      this.loading = true
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        this.current = await $api<Mandate>(`/mandates/${id}`)
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Mandat introuvable'
+      } finally {
+        this.loading = false
+      }
+    },
+
+    /**
+     * Create a new mandate.
+     */
+    async create(payload: MandateCreate) {
+      this.loading = true
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        const mandate = await $api<Mandate>('/mandates/', {
+          method: 'POST',
+          body: payload,
+        })
+        this.list.unshift(mandate)
+        return mandate
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors de la creation du mandat'
+        throw err
+      } finally {
+        this.loading = false
+      }
+    },
+
+    /**
+     * Update an existing mandate.
+     */
+    async update(id: string, data: MandateUpdate) {
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        const updated = await $api<Mandate>(`/mandates/${id}`, {
+          method: 'PUT',
+          body: data,
+        })
+        if (this.current?.id === id) this.current = updated
+        const idx = this.list.findIndex(m => m.id === id)
+        if (idx >= 0) this.list[idx] = updated
+        return updated
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors de la mise a jour du mandat'
+        throw err
+      }
+    },
+
+    /**
+     * Delete a mandate.
+     */
+    async delete(id: string) {
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        await $api(`/mandates/${id}`, { method: 'DELETE' })
+        this.list = this.list.filter(m => m.id !== id)
+        if (this.current?.id === id) this.current = null
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors de la suppression du mandat'
+        throw err
+      }
+    },
+
+    /**
+     * Advance the mandate to the next step in its workflow.
+     */
+    async advance(id: string) {
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        const updated = await $api<Mandate>(`/mandates/${id}/advance`, {
+          method: 'POST',
+        })
+        if (this.current?.id === id) this.current = updated
+        const idx = this.list.findIndex(m => m.id === id)
+        if (idx >= 0) this.list[idx] = updated
+        return updated
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors de l\'avancement du mandat'
+        throw err
+      }
+    },
+
+    /**
+     * Add a step to a mandate.
+     */
+    async addStep(id: string, step: MandateStepCreate) {
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        const newStep = await $api<MandateStep>(`/mandates/${id}/steps`, {
+          method: 'POST',
+          body: step,
+        })
+        if (this.current?.id === id) {
+          this.current.steps.push(newStep)
+        }
+        return newStep
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors de l\'ajout de l\'etape'
+        throw err
+      }
+    },
+
+    /**
+     * Assign a mandatee to the mandate.
+     */
+    async assignMandatee(id: string, mandateeId: string) {
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        const updated = await $api<Mandate>(`/mandates/${id}/assign`, {
+          method: 'POST',
+          body: { mandatee_id: mandateeId },
+        })
+        if (this.current?.id === id) this.current = updated
+        const idx = this.list.findIndex(m => m.id === id)
+        if (idx >= 0) this.list[idx] = updated
+        return updated
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors de l\'assignation du mandataire'
+        throw err
+      }
+    },
+
+    /**
+     * Revoke the mandate.
+     */
+    async revoke(id: string) {
+      this.error = null
+
+      try {
+        const { $api } = useApi()
+        const updated = await $api<Mandate>(`/mandates/${id}/revoke`, {
+          method: 'POST',
+        })
+        if (this.current?.id === id) this.current = updated
+        const idx = this.list.findIndex(m => m.id === id)
+        if (idx >= 0) this.list[idx] = updated
+        return updated
+      } catch (err: any) {
+        this.error = err?.data?.detail || err?.message || 'Erreur lors de la revocation du mandat'
+        throw err
+      }
+    },
+
+    /**
+     * Clear the current mandate.
+     */
+    clearCurrent() {
+      this.current = null
+    },
+  },
+})