decision/frontend/app/pages/index.vue

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

const loading = ref(true)

onMounted(async () => {
  try {
    await Promise.all([
      documents.fetchAll(),
      decisions.fetchAll(),
    ])
  } finally {
    loading.value = false
  }
})

const stats = computed(() => [
  {
    label: 'Documents actifs',
    value: documents.activeDocuments.length,
    total: documents.list.length,
    icon: 'i-lucide-book-open',
    color: 'primary' as const,
    to: '/documents',
  },
  {
    label: 'Decisions en cours',
    value: decisions.activeDecisions.length,
    total: decisions.list.length,
    icon: 'i-lucide-scale',
    color: 'success' as const,
    to: '/decisions',
  },
])

const sections = [
  {
    title: 'Documents de reference',
    description: 'Licence G1, engagements forgerons, reglement du comite technique et autres documents fondateurs sous vote permanent.',
    icon: 'i-lucide-book-open',
    to: '/documents',
    color: 'primary' as const,
  },
  {
    title: 'Decisions',
    description: 'Processus de decision collectifs: runtime upgrades, modifications de documents, votes de mandats.',
    icon: 'i-lucide-scale',
    to: '/decisions',
    color: 'success' as const,
  },
  {
    title: 'Mandats',
    description: 'Gestion des mandats du comite technique, des forgerons et autres roles de gouvernance.',
    icon: 'i-lucide-user-check',
    to: '/mandates',
    color: 'warning' as const,
  },
  {
    title: 'Protocoles de vote',
    description: 'Configuration des formules de seuil WoT, criteres Smith et TechComm, parametres de vote nuance.',
    icon: 'i-lucide-settings',
    to: '/protocols',
    color: 'info' as const,
  },
  {
    title: 'Sanctuaire',
    description: 'Archive immuable: documents ancres sur IPFS avec preuve on-chain via system.remark.',
    icon: 'i-lucide-archive',
    to: '/sanctuary',
    color: 'error' as const,
  },
]
</script>

<template>
  <div class="space-y-8">
    <!-- Title -->
    <div>
      <h1 class="text-3xl font-bold text-gray-900 dark:text-white">
        Glibredecision
      </h1>
      <p class="mt-2 text-lg text-gray-600 dark:text-gray-400">
        Decisions collectives pour la communaute Duniter/G1
      </p>
    </div>

    <!-- Stats cards -->
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
      <template v-if="loading">
        <UCard v-for="i in 2" :key="i">
          <div class="space-y-3">
            <USkeleton class="h-4 w-32" />
            <USkeleton class="h-8 w-16" />
            <USkeleton class="h-3 w-24" />
          </div>
        </UCard>
      </template>
      <template v-else>
        <NuxtLink v-for="stat in stats" :key="stat.label" :to="stat.to">
          <UCard class="hover:shadow-md transition-shadow">
            <div class="flex items-center justify-between">
              <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">{{ stat.label }}</p>
                <p class="text-3xl font-bold text-gray-900 dark:text-white mt-1">
                  {{ stat.value }}
                </p>
                <p class="text-xs text-gray-400 mt-1">
                  {{ stat.total }} au total
                </p>
              </div>
              <UIcon :name="stat.icon" class="text-3xl text-gray-400" />
            </div>
          </UCard>
        </NuxtLink>
      </template>
    </div>

    <!-- Section cards -->
    <div>
      <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
        Domaines
      </h2>
      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <NuxtLink v-for="section in sections" :key="section.title" :to="section.to">
          <UCard class="h-full hover:shadow-md transition-shadow">
            <div class="space-y-3">
              <div class="flex items-center gap-3">
                <UIcon :name="section.icon" class="text-2xl text-primary" />
                <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                  {{ section.title }}
                </h3>
              </div>
              <p class="text-sm text-gray-600 dark:text-gray-400">
                {{ section.description }}
              </p>
            </div>
          </UCard>
        </NuxtLink>
      </div>
    </div>

    <!-- Formula explainer -->
    <UCard>
      <div class="space-y-3">
        <div class="flex items-center gap-2">
          <UIcon name="i-lucide-calculator" class="text-xl text-primary" />
          <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
            Formule de seuil WoT
          </h3>
        </div>
        <p class="text-sm text-gray-600 dark:text-gray-400">
          Le seuil d'adoption s'adapte dynamiquement a la participation :
          faible participation = quasi-unanimite requise ; forte participation = majorite simple suffisante.
        </p>
        <code class="block p-3 bg-gray-100 dark:bg-gray-800 rounded text-sm font-mono">
          Seuil = C + B^W + (M + (1-M) * (1 - (T/W)^G)) * max(0, T-C)
        </code>
        <div class="flex flex-wrap gap-4 text-xs text-gray-500">
          <span>C = constante de base</span>
          <span>B = exposant de base</span>
          <span>W = taille WoT</span>
          <span>T = votes totaux</span>
          <span>M = majorite</span>
          <span>G = gradient</span>
        </div>
      </div>
    </UCard>
  </div>
</template>