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/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>