From 825b0ddeb270b8917ebdfde47377c3a722e71353 Mon Sep 17 00:00:00 2001
From: Jules Neny <transformationsresilientes@gmail.com>
Date: Wed, 6 May 2026 16:11:34 +0200
Subject: [PATCH] feat(codev): M5 phase 1 - mode demo factice + build local OK

---
 pages/codev/demo.vue | 367 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 367 insertions(+)
 create mode 100644 pages/codev/demo.vue

diff --git a/pages/codev/demo.vue b/pages/codev/demo.vue
new file mode 100644
index 0000000..81047b5
--- /dev/null
+++ b/pages/codev/demo.vue
@@ -0,0 +1,367 @@
+<template>
+  <div class="codev-demo">
+
+    <header class="demo-header">
+      <span class="demo-badge">DEMO</span>
+      <h1>Co-developpement - exemple</h1>
+      <p class="subtitle">10 personnes fictives. Clique sur un mode pour voir les matchs.</p>
+    </header>
+
+    <ClientOnly>
+      <CodevGraph
+        :fiches="fiches"
+        :matches="matches"
+        :mode="mode"
+      />
+      <template #fallback>
+        <div class="graph-fallback">Chargement du graphe...</div>
+      </template>
+    </ClientOnly>
+
+    <!-- Bandeau info mode actif -->
+    <div v-if="mode !== 'none'" class="mode-banner">
+      <span>
+        Mode {{ MODE_LABELS[mode] }} actif -
+        {{ matches.length }} connexion{{ matches.length !== 1 ? 's' : '' }} trouvee{{ matches.length !== 1 ? 's' : '' }}.
+      </span>
+      <button class="banner-clear" @click="setMode('none')" type="button">Effacer</button>
+    </div>
+
+    <!-- 3 boutons matching identiques a carto.vue -->
+    <div class="matching-controls">
+      <button
+        :class="{ active: mode === 'solution' }"
+        style="--mode-color: #22c55e"
+        @click="setMode('solution')"
+        type="button"
+      >
+        Solution
+        <span class="hint">besoin - offre</span>
+      </button>
+      <button
+        :class="{ active: mode === 'alliance' }"
+        style="--mode-color: #f97316"
+        @click="setMode('alliance')"
+        type="button"
+      >
+        Alliance
+        <span class="hint">besoins partages</span>
+      </button>
+      <button
+        :class="{ active: mode === 'surprise' }"
+        style="--mode-color: #3b82f6"
+        @click="setMode('surprise')"
+        type="button"
+      >
+        Surprise
+        <span class="hint">offres partagees</span>
+      </button>
+      <button
+        v-if="mode !== 'none'"
+        class="reset"
+        @click="setMode('none')"
+        type="button"
+      >
+        Effacer
+      </button>
+    </div>
+
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { CodevFiche, CodevMatch } from '~/types/codev'
+import { computeMatches } from '~/utils/codev/matching'
+
+// 10 fiches factices - hashtags alignes pour demontrer les 3 modes :
+//
+// Solution : Lea(besoin coaching) -> Maya(offre coaching)
+//            Sami(besoin formation+vente) -> Ines(offre vente+formation)
+//            Tom(besoin tiers-lieu) -> Zoe(offre facilitation+tiers-lieu)
+//
+// Alliance : Lea + Maya (hashtag coaching commun dans besoins)
+//            Sami + Kenji (hashtag formation+vente dans besoins)
+//            Tom + Zoe (hashtag tiers-lieu dans besoins)
+//
+// Surprise : Lea + Zoe (hashtag facilitation dans offres)
+//            Tom + Roman (hashtag archi dans offres)
+
+const FICHES_DEMO: CodevFiche[] = [
+  {
+    id: 1,
+    nom: 'Lea',
+    besoin: 'Structurer mon offre de coaching pour la lancer en septembre',
+    offre: 'Animation de groupes, facilitation de cercles de parole',
+    hashtags: ['coaching', 'facilitation'],
+    created_at: '2026-05-08T10:00:00Z',
+  },
+  {
+    id: 2,
+    nom: 'Sami',
+    besoin: 'Comprendre comment vendre une formation en ligne',
+    offre: 'Developpement web, sites Astro et Nuxt',
+    hashtags: ['formation', 'vente'],
+    created_at: '2026-05-08T10:01:00Z',
+  },
+  {
+    id: 3,
+    nom: 'Ines',
+    besoin: 'Aide pour la facilitation de mes ateliers ecriture',
+    offre: 'Vente de formations en ligne, marketing direct',
+    hashtags: ['vente', 'formation'],
+    created_at: '2026-05-08T10:02:00Z',
+  },
+  {
+    id: 4,
+    nom: 'Tom',
+    besoin: 'Trouver un associe pour un projet de tiers-lieu',
+    offre: 'Architecture eco-responsable, conception bioclimatique',
+    hashtags: ['tiers-lieu', 'archi'],
+    created_at: '2026-05-08T10:03:00Z',
+  },
+  {
+    id: 5,
+    nom: 'Maya',
+    besoin: 'Structurer mon offre de coaching freelance',
+    offre: 'Coaching de carriere, accompagnement transition pro',
+    hashtags: ['coaching', 'carriere'],
+    created_at: '2026-05-08T10:04:00Z',
+  },
+  {
+    id: 6,
+    nom: 'Kenji',
+    besoin: 'Apprendre a vendre mes formations sans me sentir vendeur',
+    offre: 'Photographie, direction artistique de projets editoriaux',
+    hashtags: ['formation', 'vente'],
+    created_at: '2026-05-08T10:05:00Z',
+  },
+  {
+    id: 7,
+    nom: 'Zoe',
+    besoin: 'Trouver des associes pour mon projet de tiers-lieu rural',
+    offre: 'Animation et facilitation de collectifs, intelligence collective',
+    hashtags: ['tiers-lieu', 'facilitation'],
+    created_at: '2026-05-08T10:06:00Z',
+  },
+  {
+    id: 8,
+    nom: 'Nael',
+    besoin: 'Construire un site web pour ma formation',
+    offre: 'Strategie marketing, lancement de produits digitaux',
+    hashtags: ['web', 'strategie'],
+    created_at: '2026-05-08T10:07:00Z',
+  },
+  {
+    id: 9,
+    nom: 'Eva',
+    besoin: 'Lancer mon offre de coaching avec une page de vente',
+    offre: 'Ecriture longue forme, articles essais et tribunes',
+    hashtags: ['coaching', 'ecriture'],
+    created_at: '2026-05-08T10:08:00Z',
+  },
+  {
+    id: 10,
+    nom: 'Roman',
+    besoin: 'Ameliorer mes articles de blog sur la renovation',
+    offre: 'Architecture, plans techniques pour renovation energetique',
+    hashtags: ['archi', 'reno'],
+    created_at: '2026-05-08T10:09:00Z',
+  },
+]
+
+const fiches = ref(FICHES_DEMO)
+const matches = ref<CodevMatch[]>([])
+const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none')
+
+const MODE_LABELS: Record<string, string> = {
+  solution: 'Solution',
+  alliance: 'Alliance',
+  surprise: 'Surprise',
+}
+
+useHead({ title: 'Demo - Co-developpement' })
+
+function setMode(newMode: typeof mode.value) {
+  mode.value = newMode
+  if (newMode === 'none') {
+    matches.value = []
+  } else {
+    matches.value = computeMatches(fiches.value, newMode)
+  }
+}
+</script>
+
+<style scoped>
+.codev-demo {
+  min-height: 100vh;
+  background: var(--nav-bg, #fafafa);
+  display: flex;
+  flex-direction: column;
+  padding: 1.25rem 1rem 2rem;
+  gap: 1rem;
+  max-width: 100%;
+  box-sizing: border-box;
+}
+
+/* ── En-tete ── */
+
+.demo-header {
+  text-align: center;
+  padding-bottom: 0.5rem;
+}
+
+.demo-badge {
+  display: inline-block;
+  background: #f97316;
+  color: #fff;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  padding: 4px 8px;
+  border-radius: 4px;
+  margin-bottom: 0.5rem;
+}
+
+.demo-header h1 {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--nav-text, #1a1a2e);
+  margin: 0 0 0.375rem;
+}
+
+.subtitle {
+  font-size: 0.9rem;
+  color: var(--nav-text-muted, #6b7280);
+  margin: 0;
+}
+
+/* ── Fallback ── */
+
+.graph-fallback {
+  width: 100%;
+  height: 70vh;
+  min-height: 320px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--nav-text-muted, #6b7280);
+  font-size: 0.9rem;
+  background: var(--nav-bg-alt, #f3f4f6);
+  border-radius: 12px;
+}
+
+/* ── Bandeau mode actif ── */
+
+.mode-banner {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.5rem 0.875rem;
+  background: #f0fdf4;
+  border: 1px solid #bbf7d0;
+  border-radius: 8px;
+  font-size: 0.875rem;
+  color: #166534;
+  flex-wrap: wrap;
+}
+
+.banner-clear {
+  font-size: 0.8rem;
+  font-weight: 600;
+  color: #166534;
+  background: transparent;
+  border: 1px solid #166534;
+  border-radius: 6px;
+  padding: 0.2rem 0.6rem;
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+.banner-clear:hover {
+  background: #166534;
+  color: #fff;
+}
+
+/* ── Boutons matching ── */
+
+.matching-controls {
+  position: sticky;
+  bottom: 0;
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  background: rgba(255, 255, 255, 0.95);
+  backdrop-filter: blur(8px);
+  border-top: 1px solid #e5e7eb;
+  margin: 0 -1rem -2rem;
+}
+
+.matching-controls button {
+  flex: 1;
+  padding: 12px 8px;
+  border: 1px solid #d0d4dc;
+  border-radius: 8px;
+  background: white;
+  font-size: 14px;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  transition: background 0.15s, color 0.15s, border-color 0.15s;
+}
+
+.matching-controls button .hint {
+  font-size: 11px;
+  color: #6b7280;
+  font-weight: normal;
+}
+
+.matching-controls button.active {
+  background: var(--mode-color, #1B4436);
+  color: white;
+  border-color: transparent;
+}
+
+.matching-controls button.active .hint {
+  color: rgba(255, 255, 255, 0.8);
+}
+
+.matching-controls button.reset {
+  flex: 0 0 auto;
+  padding: 12px 16px;
+  background: #f3f4f6;
+  border-color: #d0d4dc;
+  color: #374151;
+  font-size: 13px;
+}
+
+.matching-controls button.reset:hover {
+  background: #e5e7eb;
+}
+
+@media (max-width: 500px) {
+  .matching-controls {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    margin: 0 -0.75rem -1.5rem;
+  }
+
+  .matching-controls button.reset {
+    grid-column: span 2;
+  }
+}
+
+/* ── Mobile ── */
+
+@media (max-width: 600px) {
+  .codev-demo {
+    padding: 1rem 0.75rem 1.5rem;
+  }
+
+  .demo-header h1 {
+    font-size: 1.25rem;
+  }
+}
+</style>