Compare commits
20 Commits
feat/aep-t
...
0378f2bd72
| Author | SHA1 | Date | |
|---|---|---|---|
|
0378f2bd72 | ||
|
|
f0696a8fb3 | ||
|
|
03127b1648 | ||
|
|
0099627da4 | ||
|
|
f9960bf8ea | ||
|
|
05bbcc2a02 | ||
|
|
f518318d60 | ||
|
|
0598536244 | ||
|
|
b951fe0b8d | ||
|
|
c8311ce1fb | ||
|
|
142e5cf787 | ||
|
|
606b9f0a47 | ||
|
|
6f7d2450de | ||
|
|
e7c7d302ea | ||
|
|
4ed0a87106 | ||
|
|
825b0ddeb2 | ||
|
|
d345d7f6f9 | ||
|
|
3347b3f859 | ||
|
|
9c4f4b8e87 | ||
|
|
5103942698 |
20
app.vue
20
app.vue
@@ -39,8 +39,21 @@
|
||||
class="nav-tab"
|
||||
:class="{ 'nav-tab--active': route.path === '/agences' }"
|
||||
>
|
||||
Agences Inspirantes
|
||||
<span class="nav-tab-badge">en construction</span>
|
||||
Réseaux AEP
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/trouver-du-taf"
|
||||
class="nav-tab"
|
||||
:class="{ 'nav-tab--active': route.path === '/trouver-du-taf' }"
|
||||
>
|
||||
Jobs
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/codev"
|
||||
class="nav-tab"
|
||||
:class="{ 'nav-tab--active': route.path.startsWith('/codev') }"
|
||||
>
|
||||
Codev
|
||||
</NuxtLink>
|
||||
<NuxtLink
|
||||
to="/rag"
|
||||
@@ -165,8 +178,9 @@
|
||||
@click="hamburgerOpen = false"
|
||||
>
|
||||
<NuxtLink to="/" class="block px-4 py-2.5 text-sm font-medium transition-opacity hover:opacity-70" :style="route.path === '/' ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Écosystème Entraide Architecture</NuxtLink>
|
||||
<NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">Agences Inspirantes</NuxtLink>
|
||||
<NuxtLink to="/agences" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">Réseaux AEP</NuxtLink>
|
||||
<NuxtLink to="/rag" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text);">RAG</NuxtLink>
|
||||
<NuxtLink to="/codev" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" :style="route.path.startsWith('/codev') ? 'color: var(--nav-primary-solid); font-weight: 700;' : 'color: var(--nav-text);'">Codev</NuxtLink>
|
||||
<div style="height: 1px; background: var(--nav-bg-alt); margin: 4px 0;"></div>
|
||||
<NuxtLink to="/a-propos" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">À propos</NuxtLink>
|
||||
<NuxtLink to="/signaler" class="block px-4 py-2.5 text-sm transition-opacity hover:opacity-70" style="color: var(--nav-text-muted);">Signaler</NuxtLink>
|
||||
|
||||
@@ -221,7 +221,12 @@ function updateTileTheme(dark: boolean) {
|
||||
let themeObserver: MutationObserver | null = null
|
||||
|
||||
onMounted(() => {
|
||||
initMap()
|
||||
// Double rAF : laisser le browser calculer la hauteur du conteneur avant Leaflet
|
||||
requestAnimationFrame(() => {
|
||||
requestAnimationFrame(() => {
|
||||
initMap()
|
||||
})
|
||||
})
|
||||
|
||||
// Observer les changements de classe dark sur <html>
|
||||
themeObserver = new MutationObserver(() => {
|
||||
|
||||
@@ -125,8 +125,8 @@
|
||||
<span
|
||||
v-for="fn in orgFonctions(org)"
|
||||
:key="fn"
|
||||
class="px-1.5 py-0.5 rounded text-xs"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
|
||||
class="px-2 py-0.5 rounded-full text-xs font-medium"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text-muted); border: 1px solid var(--nav-bg-alt); letter-spacing: 0.01em;"
|
||||
>{{ fn }}</span>
|
||||
</div>
|
||||
<div v-if="org.localisation_ville" class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">
|
||||
|
||||
244
components/PlatformeTaffCard.vue
Normal file
244
components/PlatformeTaffCard.vue
Normal file
@@ -0,0 +1,244 @@
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="taff-card"
|
||||
:style="`border-left-color: ${tagConfig.accent};`"
|
||||
@click="$emit('open', plateforme)"
|
||||
>
|
||||
<!-- Ligne 1 : tag + badge AO + lien -->
|
||||
<div class="taff-card-top">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<span class="taff-tag" :style="`background: ${tagConfig.bg}; color: ${tagConfig.text};`">
|
||||
{{ tagConfig.emoji }} {{ tagConfig.label }}
|
||||
</span>
|
||||
<span
|
||||
v-if="plateforme.type === 'appel-offre-public'"
|
||||
class="taff-badge-ao"
|
||||
>AO public</span>
|
||||
</div>
|
||||
<a
|
||||
:href="plateforme.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="taff-visit-btn"
|
||||
@click.stop
|
||||
title="Visiter le site"
|
||||
>
|
||||
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
|
||||
<polyline points="15 3 21 3 21 9"/>
|
||||
<line x1="10" y1="14" x2="21" y2="3"/>
|
||||
</svg>
|
||||
Visiter
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Ligne 2 : nom -->
|
||||
<div class="taff-card-name">{{ plateforme.nom }}</div>
|
||||
|
||||
<!-- Ligne 3 : axes (icône + score, compacts) -->
|
||||
<div class="taff-card-axes">
|
||||
<template v-for="axe in AXES" :key="axe.id">
|
||||
<span
|
||||
v-if="plateforme.scoring[axe.id] !== null"
|
||||
class="taff-axe-chip"
|
||||
:style="`background: ${axeScoreBg(plateforme.scoring[axe.id])}; color: ${axeScoreText(plateforme.scoring[axe.id])};`"
|
||||
:title="axe.label"
|
||||
>{{ axe.icon }} {{ plateforme.scoring[axe.id] }}</span>
|
||||
</template>
|
||||
</div>
|
||||
|
||||
<!-- Ligne 4 : description (3 lignes max, lisible) -->
|
||||
<p class="taff-card-desc">{{ plateforme.description_courte }}</p>
|
||||
|
||||
<!-- Ligne 5 : secteurs + coût -->
|
||||
<div class="taff-card-footer">
|
||||
<div class="flex items-center gap-1.5 flex-wrap">
|
||||
<span
|
||||
v-for="s in plateforme.secteurs_servis.slice(0, 3)"
|
||||
:key="s"
|
||||
class="taff-secteur-chip"
|
||||
>{{ SECTEUR_LABELS[s] ?? s }}</span>
|
||||
<span v-if="plateforme.secteurs_servis.length > 3" class="taff-more">+{{ plateforme.secteurs_servis.length - 3 }}</span>
|
||||
</div>
|
||||
<span class="taff-cout">{{ COUT_LABELS[plateforme.cout_entree] ?? plateforme.cout_entree }}</span>
|
||||
</div>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PlateformeTaff } from '~/types/plateforme-taff'
|
||||
|
||||
const props = defineProps<{ plateforme: PlateformeTaff }>()
|
||||
defineEmits<{ open: [p: PlateformeTaff] }>()
|
||||
|
||||
const AXES = [
|
||||
{ id: 'remuneration' as const, icon: '🪙', label: 'Rémunération' },
|
||||
{ id: 'transparence' as const, icon: '🔍', label: 'Transparence' },
|
||||
{ id: 'pratiques' as const, icon: '⚖️', label: 'Pratiques pro' },
|
||||
{ id: 'ecologie' as const, icon: '🌿', label: 'Écologie' },
|
||||
{ id: 'matching' as const, icon: '🎯', label: 'Matching' },
|
||||
]
|
||||
|
||||
const TAG_CONFIG = {
|
||||
'recommande': { emoji: '✅', label: 'Recommandé AEP', accent: '#5a7a4a', bg: 'rgba(90,122,74,0.12)', text: '#3d5534' },
|
||||
'sous-reserve': { emoji: '⚠️', label: 'Sous réserve', accent: '#c4a472', bg: 'rgba(196,164,114,0.15)', text: '#7a5f2a' },
|
||||
'a-eviter': { emoji: '❌', label: 'À éviter', accent: '#a85d3e', bg: 'rgba(168,93,62,0.12)', text: '#7a3322' },
|
||||
}
|
||||
|
||||
const tagConfig = computed(() => TAG_CONFIG[props.plateforme.scoring.tag_global] ?? TAG_CONFIG['sous-reserve'])
|
||||
|
||||
function axeScoreBg(score: string | null) {
|
||||
if (score === '✅') return 'rgba(90,122,74,0.12)'
|
||||
if (score === '⚠️') return 'rgba(196,164,114,0.15)'
|
||||
if (score === '❌') return 'rgba(168,93,62,0.12)'
|
||||
return 'var(--nav-bg-alt)'
|
||||
}
|
||||
function axeScoreText(score: string | null) {
|
||||
if (score === '✅') return '#3d5534'
|
||||
if (score === '⚠️') return '#7a5f2a'
|
||||
if (score === '❌') return '#7a3322'
|
||||
return 'var(--nav-text-muted)'
|
||||
}
|
||||
|
||||
const SECTEUR_LABELS: Record<string, string> = {
|
||||
'renovation': 'Rénovation', 'construction-neuve': 'Neuf', 'urbanisme': 'Urbanisme',
|
||||
'architecture-interieure': 'Archi intérieure', 'paysage': 'Paysage',
|
||||
'mar-conseil': 'MAR/Conseil', 'transversal': 'Transversal',
|
||||
}
|
||||
const COUT_LABELS: Record<string, string> = {
|
||||
'gratuit': 'Gratuit', 'freemium': 'Freemium', 'abonnement': 'Abonnement',
|
||||
'lead-paye': 'Lead payant', 'commission': 'Commission',
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.taff-card {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
border-radius: 12px;
|
||||
border: 1px solid var(--nav-bg-alt);
|
||||
border-left: 4px solid;
|
||||
background: var(--nav-surface);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: box-shadow 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.taff-card:hover { box-shadow: 0 4px 16px rgba(26,34,56,0.1); }
|
||||
.taff-card:focus-visible { outline: 2px solid var(--nav-accent); outline-offset: 2px; }
|
||||
|
||||
.taff-card-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 1rem 0.5rem;
|
||||
}
|
||||
|
||||
.taff-tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.taff-badge-ao {
|
||||
display: inline-flex;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
background: var(--nav-bg-alt);
|
||||
color: var(--nav-text-muted);
|
||||
}
|
||||
|
||||
.taff-visit-btn {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0.375rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
background: var(--nav-bg-alt);
|
||||
color: var(--nav-text);
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.taff-visit-btn:hover { opacity: 0.7; }
|
||||
|
||||
.taff-card-name {
|
||||
padding: 0.25rem 1rem 0.75rem;
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 700;
|
||||
color: var(--nav-text);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.taff-card-axes {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.375rem;
|
||||
padding: 0 1rem 0.875rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.taff-axe-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
padding: 0.25rem 0.625rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.taff-card-desc {
|
||||
padding: 0 1rem 1rem;
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.65;
|
||||
color: var(--nav-text-muted);
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.taff-card-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
border-top: 1px solid var(--nav-bg-alt);
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.taff-secteur-chip {
|
||||
display: inline-block;
|
||||
padding: 0.2rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
background: var(--nav-bg);
|
||||
color: var(--nav-text-muted);
|
||||
border: 1px solid var(--nav-bg-alt);
|
||||
}
|
||||
|
||||
.taff-more {
|
||||
font-size: 0.75rem;
|
||||
color: var(--nav-text-muted);
|
||||
}
|
||||
|
||||
.taff-cout {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--nav-text-muted);
|
||||
white-space: nowrap;
|
||||
}
|
||||
</style>
|
||||
450
components/codev/CodevGraph.vue
Normal file
450
components/codev/CodevGraph.vue
Normal file
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div ref="container" class="codev-graph-wrap">
|
||||
|
||||
<!-- Placeholder si aucune fiche -->
|
||||
<div v-if="fiches.length === 0" class="empty-state">
|
||||
<p class="empty-msg">Encore personne. Sois la premiere fiche !</p>
|
||||
<NuxtLink to="/codev/fiche" class="empty-link">Creer ma fiche →</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- SVG D3 -->
|
||||
<svg v-else ref="svgEl" class="codev-svg">
|
||||
<defs>
|
||||
<marker
|
||||
id="arrow-solution"
|
||||
viewBox="0 0 10 10"
|
||||
refX="18"
|
||||
refY="5"
|
||||
markerWidth="6"
|
||||
markerHeight="6"
|
||||
orient="auto-start-reverse"
|
||||
>
|
||||
<path d="M 0 0 L 10 5 L 0 10 z" fill="#22c55e" />
|
||||
</marker>
|
||||
</defs>
|
||||
</svg>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as d3 from 'd3'
|
||||
import type { CodevFiche, CodevMatch } from '~/types/codev'
|
||||
|
||||
// ── Props / Emits ──────────────────────────────────────────────────────────
|
||||
|
||||
const props = withDefaults(defineProps<{
|
||||
fiches: CodevFiche[]
|
||||
matches?: CodevMatch[]
|
||||
mode?: 'none' | 'solution' | 'alliance' | 'surprise'
|
||||
showLabels?: boolean
|
||||
}>(), {
|
||||
matches: () => [],
|
||||
mode: 'none',
|
||||
showLabels: false,
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'select-fiche': [id: number]
|
||||
}>()
|
||||
|
||||
// ── Refs ───────────────────────────────────────────────────────────────────
|
||||
|
||||
const container = ref<HTMLDivElement | null>(null)
|
||||
const svgEl = ref<SVGSVGElement | null>(null)
|
||||
const width = ref(800)
|
||||
const height = ref(600)
|
||||
|
||||
// ── State interne ──────────────────────────────────────────────────────────
|
||||
|
||||
type SimNode = d3.SimulationNodeDatum & { id: number; nom: string; offre: string; besoin: string }
|
||||
type SimLink = d3.SimulationLinkDatum<SimNode> & { score: number; mode: string }
|
||||
|
||||
let simulation: d3.Simulation<SimNode, SimLink> | null = null
|
||||
let svgRoot: d3.Selection<SVGSVGElement, unknown, null, undefined> | null = null
|
||||
let gLinks: d3.Selection<SVGGElement, unknown, null, undefined> | null = null
|
||||
let gNodes: d3.Selection<SVGGElement, unknown, null, undefined> | null = null
|
||||
|
||||
const isMobile = computed(() => width.value < 600)
|
||||
const nodeRadius = computed(() => isMobile.value ? 22 : 28)
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────────────────
|
||||
|
||||
function truncate(str: string, max = 10): string {
|
||||
if (!str) return ''
|
||||
return str.length > max ? str.slice(0, max - 1) + '…' : str
|
||||
}
|
||||
|
||||
function buildNodes(): SimNode[] {
|
||||
return props.fiches.map(f => ({
|
||||
id: f.id,
|
||||
nom: f.nom,
|
||||
offre: f.offre,
|
||||
besoin: f.besoin,
|
||||
}))
|
||||
}
|
||||
|
||||
function buildLinks(nodes: SimNode[]): SimLink[] {
|
||||
if (!props.matches || props.matches.length === 0) return []
|
||||
const nodeById = new Map(nodes.map(n => [n.id, n]))
|
||||
return props.matches
|
||||
.filter(m => nodeById.has(m.fromId) && nodeById.has(m.toId))
|
||||
.map(m => ({
|
||||
source: nodeById.get(m.fromId)!,
|
||||
target: nodeById.get(m.toId)!,
|
||||
score: m.score,
|
||||
mode: m.mode,
|
||||
}))
|
||||
}
|
||||
|
||||
function linkColor(mode: string): string {
|
||||
if (mode === 'solution') return '#22c55e'
|
||||
if (mode === 'alliance') return '#f97316'
|
||||
if (mode === 'surprise') return '#3b82f6'
|
||||
return '#ccc'
|
||||
}
|
||||
|
||||
// ── Drag handler ───────────────────────────────────────────────────────────
|
||||
|
||||
function makeDrag(sim: d3.Simulation<SimNode, SimLink>): d3.DragBehavior<SVGGElement, SimNode, SimNode> {
|
||||
return d3.drag<SVGGElement, SimNode>()
|
||||
.on('start', (event, d) => {
|
||||
if (!event.active) sim.alphaTarget(0.3).restart()
|
||||
d.fx = d.x
|
||||
d.fy = d.y
|
||||
})
|
||||
.on('drag', (event, d) => {
|
||||
d.fx = event.x
|
||||
d.fy = event.y
|
||||
})
|
||||
.on('end', (event, d) => {
|
||||
if (!event.active) sim.alphaTarget(0)
|
||||
d.fx = null
|
||||
d.fy = null
|
||||
})
|
||||
}
|
||||
|
||||
// ── Initialisation SVG ─────────────────────────────────────────────────────
|
||||
|
||||
function initSvg() {
|
||||
if (!svgEl.value) return
|
||||
|
||||
svgRoot = d3.select(svgEl.value)
|
||||
.attr('width', width.value)
|
||||
.attr('height', height.value)
|
||||
|
||||
svgRoot.selectAll('*').remove()
|
||||
|
||||
gLinks = svgRoot.append('g').attr('class', 'links')
|
||||
gNodes = svgRoot.append('g').attr('class', 'nodes')
|
||||
}
|
||||
|
||||
// ── Rebuild liens (hook pour M4) ───────────────────────────────────────────
|
||||
|
||||
let currentNodes: SimNode[] = []
|
||||
let currentLinks: SimLink[] = []
|
||||
|
||||
function rebuildLinks() {
|
||||
currentLinks = buildLinks(currentNodes)
|
||||
if (!gLinks || !simulation) return
|
||||
|
||||
// .join() moderne D3 pour garantir le re-rendu complet
|
||||
gLinks
|
||||
.selectAll<SVGLineElement, SimLink>('line')
|
||||
.data(currentLinks)
|
||||
.join(
|
||||
enter => enter.append('line'),
|
||||
update => update,
|
||||
exit => exit.remove()
|
||||
)
|
||||
.attr('stroke', d => linkColor(d.mode))
|
||||
.attr('stroke-width', d => 1 + d.score * 3)
|
||||
.attr('stroke-opacity', 0.7)
|
||||
.attr('marker-end', d => d.mode === 'solution' ? 'url(#arrow-solution)' : null)
|
||||
}
|
||||
|
||||
// ── Rendu complet ──────────────────────────────────────────────────────────
|
||||
|
||||
function render() {
|
||||
if (!svgEl.value || props.fiches.length === 0) return
|
||||
|
||||
initSvg()
|
||||
|
||||
currentNodes = buildNodes()
|
||||
currentLinks = buildLinks(currentNodes)
|
||||
|
||||
const r = nodeRadius.value
|
||||
const fontSize = isMobile.value ? 10 : 12
|
||||
|
||||
// Liens
|
||||
gLinks!
|
||||
.selectAll<SVGLineElement, SimLink>('line')
|
||||
.data(currentLinks)
|
||||
.join('line')
|
||||
.attr('stroke', d => linkColor(d.mode))
|
||||
.attr('stroke-width', d => 1 + d.score * 3)
|
||||
.attr('stroke-opacity', 0.7)
|
||||
.attr('marker-end', d => d.mode === 'solution' ? 'url(#arrow-solution)' : null)
|
||||
|
||||
// Noeuds = groupe <g> par personne
|
||||
const nodeGroups = gNodes!
|
||||
.selectAll<SVGGElement, SimNode>('g.node')
|
||||
.data(currentNodes, d => String(d.id))
|
||||
.join('g')
|
||||
.attr('class', 'node')
|
||||
.style('cursor', 'pointer')
|
||||
.call(makeDrag(simulation!) as any)
|
||||
.on('click', (_event, d) => emit('select-fiche', d.id))
|
||||
|
||||
// Cercle principal
|
||||
nodeGroups.append('circle')
|
||||
.attr('r', r)
|
||||
.attr('fill', '#ffffff')
|
||||
.attr('stroke', '#1B4436')
|
||||
.attr('stroke-width', 2)
|
||||
|
||||
// Label nom
|
||||
nodeGroups.append('text')
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('dominant-baseline', 'central')
|
||||
.attr('font-size', fontSize)
|
||||
.attr('font-weight', '700')
|
||||
.attr('fill', '#1a1a2e')
|
||||
.attr('pointer-events', 'none')
|
||||
.text(d => truncate(d.nom, 10))
|
||||
|
||||
// Pastille offre (haut-droite, vert)
|
||||
nodeGroups.append('circle')
|
||||
.attr('r', 6)
|
||||
.attr('cx', r * 0.65)
|
||||
.attr('cy', -r * 0.65)
|
||||
.attr('fill', '#22c55e')
|
||||
.attr('stroke', '#fff')
|
||||
.attr('stroke-width', 1.5)
|
||||
|
||||
// Pastille besoin (bas-droite, bleu)
|
||||
nodeGroups.append('circle')
|
||||
.attr('r', 6)
|
||||
.attr('cx', r * 0.65)
|
||||
.attr('cy', r * 0.65)
|
||||
.attr('fill', '#3b82f6')
|
||||
.attr('stroke', '#fff')
|
||||
.attr('stroke-width', 1.5)
|
||||
|
||||
// Tooltip SVG natif <title>
|
||||
nodeGroups.append('title')
|
||||
.text(d => `${d.nom}\nOffre : ${d.offre}\nBesoin : ${d.besoin}`)
|
||||
|
||||
// Groupe label bulle (affiche si showLabels)
|
||||
const labelGroups = nodeGroups.append('g')
|
||||
.attr('class', 'label-bubble')
|
||||
.attr('visibility', props.showLabels ? 'visible' : 'hidden')
|
||||
|
||||
// Fond bulle besoin (dessous du noeud)
|
||||
labelGroups.append('rect')
|
||||
.attr('class', 'bubble-besoin-bg')
|
||||
.attr('x', -(r + 50))
|
||||
.attr('y', r + 4)
|
||||
.attr('width', 100)
|
||||
.attr('height', 28)
|
||||
.attr('rx', 6)
|
||||
.attr('fill', '#eff6ff')
|
||||
.attr('stroke', '#3b82f6')
|
||||
.attr('stroke-width', 1)
|
||||
|
||||
// Texte besoin
|
||||
labelGroups.append('text')
|
||||
.attr('class', 'bubble-besoin-txt')
|
||||
.attr('x', -(r) + 50)
|
||||
.attr('y', r + 22)
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('font-size', 9)
|
||||
.attr('fill', '#1e40af')
|
||||
.attr('pointer-events', 'none')
|
||||
.text(d => truncate(d.besoin, 18))
|
||||
|
||||
// Fond bulle offre (dessus du noeud)
|
||||
labelGroups.append('rect')
|
||||
.attr('class', 'bubble-offre-bg')
|
||||
.attr('x', -(r + 50))
|
||||
.attr('y', -(r + 32))
|
||||
.attr('width', 100)
|
||||
.attr('height', 28)
|
||||
.attr('rx', 6)
|
||||
.attr('fill', '#f0fdf4')
|
||||
.attr('stroke', '#22c55e')
|
||||
.attr('stroke-width', 1)
|
||||
|
||||
// Texte offre
|
||||
labelGroups.append('text')
|
||||
.attr('class', 'bubble-offre-txt')
|
||||
.attr('x', -(r) + 50)
|
||||
.attr('y', -(r + 14))
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('font-size', 9)
|
||||
.attr('fill', '#166534')
|
||||
.attr('pointer-events', 'none')
|
||||
.text(d => truncate(d.offre, 18))
|
||||
|
||||
// Simulation
|
||||
simulation = d3.forceSimulation<SimNode, SimLink>(currentNodes)
|
||||
.force('link', d3.forceLink<SimNode, SimLink>(currentLinks)
|
||||
.id(d => d.id)
|
||||
.distance(120)
|
||||
.strength(0.3))
|
||||
.force('charge', d3.forceManyBody<SimNode>().strength(-400))
|
||||
.force('center', d3.forceCenter(width.value / 2, height.value / 2))
|
||||
.force('collide', d3.forceCollide<SimNode>().radius(r + 12))
|
||||
.force('x', d3.forceX(width.value / 2).strength(0.05))
|
||||
.force('y', d3.forceY(height.value / 2).strength(0.05))
|
||||
.alphaDecay(0.02)
|
||||
.on('tick', tick)
|
||||
|
||||
// Re-bind drag avec la nouvelle simulation
|
||||
gNodes!.selectAll<SVGGElement, SimNode>('g.node')
|
||||
.call(makeDrag(simulation) as any)
|
||||
}
|
||||
|
||||
function tick() {
|
||||
const r = nodeRadius.value
|
||||
if (!gLinks || !gNodes) return
|
||||
|
||||
gLinks.selectAll<SVGLineElement, SimLink>('line')
|
||||
.attr('x1', d => Math.max(r, Math.min(width.value - r, (d.source as SimNode).x ?? 0)))
|
||||
.attr('y1', d => Math.max(r, Math.min(height.value - r, (d.source as SimNode).y ?? 0)))
|
||||
.attr('x2', d => Math.max(r, Math.min(width.value - r, (d.target as SimNode).x ?? 0)))
|
||||
.attr('y2', d => Math.max(r, Math.min(height.value - r, (d.target as SimNode).y ?? 0)))
|
||||
|
||||
gNodes.selectAll<SVGGElement, SimNode>('g.node')
|
||||
.attr('transform', d => {
|
||||
const x = Math.max(r, Math.min(width.value - r, d.x ?? 0))
|
||||
const y = Math.max(r, Math.min(height.value - r, d.y ?? 0))
|
||||
return `translate(${x},${y})`
|
||||
})
|
||||
}
|
||||
|
||||
// ── Watch matches/mode (hook pour M4) ─────────────────────────────────────
|
||||
|
||||
watch(() => [props.matches, props.mode] as const, () => {
|
||||
if (!simulation) return
|
||||
rebuildLinks()
|
||||
const newForce = d3.forceLink<SimNode, SimLink>(currentLinks)
|
||||
.id(d => String(d.id))
|
||||
.distance(120)
|
||||
.strength(0.5)
|
||||
simulation.force('link', newForce)
|
||||
simulation.alpha(0.8).restart()
|
||||
}, { deep: true })
|
||||
|
||||
// ── Watch showLabels ──────────────────────────────────────────────────────
|
||||
|
||||
watch(() => props.showLabels, (val) => {
|
||||
if (!svgEl.value) return
|
||||
d3.select(svgEl.value).selectAll('.label-bubble').attr('visibility', val ? 'visible' : 'hidden')
|
||||
})
|
||||
|
||||
// ── Watch fiches (re-render si nouvelles fiches) ───────────────────────────
|
||||
|
||||
watch(() => props.fiches, () => {
|
||||
if (simulation) {
|
||||
simulation.stop()
|
||||
simulation = null
|
||||
}
|
||||
render()
|
||||
}, { deep: true })
|
||||
|
||||
// ── ResizeObserver ─────────────────────────────────────────────────────────
|
||||
|
||||
let ro: ResizeObserver | null = null
|
||||
|
||||
onMounted(() => {
|
||||
if (!container.value) return
|
||||
width.value = container.value.clientWidth || 800
|
||||
height.value = container.value.clientHeight || 600
|
||||
|
||||
render()
|
||||
|
||||
ro = new ResizeObserver(() => {
|
||||
if (!container.value) return
|
||||
width.value = container.value.clientWidth || 800
|
||||
height.value = container.value.clientHeight || 600
|
||||
if (svgRoot) {
|
||||
svgRoot.attr('width', width.value).attr('height', height.value)
|
||||
}
|
||||
if (simulation) {
|
||||
simulation.force('center', d3.forceCenter(width.value / 2, height.value / 2))
|
||||
simulation.alpha(0.3).restart()
|
||||
}
|
||||
})
|
||||
ro.observe(container.value!)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
if (simulation) simulation.stop()
|
||||
if (ro) ro.disconnect()
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.codev-graph-wrap {
|
||||
width: 100%;
|
||||
height: 70vh;
|
||||
min-height: 320px;
|
||||
position: relative;
|
||||
background: var(--nav-bg, #fafafa);
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.codev-svg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* ── Etat vide ── */
|
||||
|
||||
.empty-state {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.empty-msg {
|
||||
font-size: 1.125rem;
|
||||
color: var(--nav-text-muted, #6b7280);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty-link {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
color: var(--nav-primary-solid, #1B4436);
|
||||
text-decoration: none;
|
||||
border: 1.5px solid var(--nav-primary-solid, #1B4436);
|
||||
border-radius: 8px;
|
||||
padding: 0.5rem 1.25rem;
|
||||
transition: background 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.empty-link:hover {
|
||||
background: var(--nav-primary-solid, #1B4436);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* ── Mobile ── */
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.codev-graph-wrap {
|
||||
height: 65vh;
|
||||
min-height: 260px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,11 @@
|
||||
export default defineNuxtConfig({
|
||||
modules: ['@nuxtjs/tailwindcss'],
|
||||
css: ['~/assets/css/main.css'],
|
||||
css: [
|
||||
'~/assets/css/main.css',
|
||||
'leaflet/dist/leaflet.css',
|
||||
'leaflet.markercluster/dist/MarkerCluster.css',
|
||||
'leaflet.markercluster/dist/MarkerCluster.Default.css',
|
||||
],
|
||||
|
||||
runtimeConfig: {
|
||||
nocodbUrl: process.env.NOCODB_URL,
|
||||
@@ -14,16 +19,20 @@ export default defineNuxtConfig({
|
||||
redisUrl: process.env.REDIS_URL || 'redis://127.0.0.1:6379',
|
||||
resendApiKey: process.env.RESEND_API_KEY,
|
||||
emailJules: process.env.EMAIL_JULES || 'jules@trans-former.fr',
|
||||
codevTableId: '', // NUXT_CODEV_TABLE_ID
|
||||
codevPassword: 'merci', // NUXT_CODEV_PASSWORD - défaut "merci", overridable
|
||||
codevBaseId: '', // NUXT_CODEV_BASE_ID - base NocoDB (ex: pipilvsi7dibo80)
|
||||
codevAdminPassword: 'admin2026', // NUXT_CODEV_ADMIN_PASSWORD
|
||||
},
|
||||
|
||||
// Leaflet ne fonctionne pas en SSR — forcer le rendu côté client
|
||||
ssr: true,
|
||||
|
||||
vite: {
|
||||
cacheDir: 'C:/Users/jules/AppData/Local/nav-carte-vite-cache',
|
||||
optimizeDeps: {
|
||||
include: ['leaflet', 'leaflet.markercluster'],
|
||||
include: ['leaflet', 'leaflet.markercluster', 'd3'],
|
||||
},
|
||||
// Éviter l'import SSR de Leaflet qui utilise window
|
||||
ssr: {
|
||||
noExternal: [],
|
||||
},
|
||||
|
||||
459
package-lock.json
generated
459
package-lock.json
generated
@@ -10,6 +10,7 @@
|
||||
"@headlessui/vue": "^1.7.23",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
"@types/leaflet.markercluster": "^1.5.6",
|
||||
"d3": "^7.9.0",
|
||||
"ioredis": "^5.3.2",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet.markercluster": "^1.5.3",
|
||||
@@ -5312,6 +5313,416 @@
|
||||
"integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/d3": {
|
||||
"version": "7.9.0",
|
||||
"resolved": "https://registry.npmjs.org/d3/-/d3-7.9.0.tgz",
|
||||
"integrity": "sha512-e1U46jVP+w7Iut8Jt8ri1YsPOvFpg46k+K8TpCb0P+zjCkjkPnV7WzfDJzMHy1LnA+wj5pLT1wjO901gLXeEhA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "3",
|
||||
"d3-axis": "3",
|
||||
"d3-brush": "3",
|
||||
"d3-chord": "3",
|
||||
"d3-color": "3",
|
||||
"d3-contour": "4",
|
||||
"d3-delaunay": "6",
|
||||
"d3-dispatch": "3",
|
||||
"d3-drag": "3",
|
||||
"d3-dsv": "3",
|
||||
"d3-ease": "3",
|
||||
"d3-fetch": "3",
|
||||
"d3-force": "3",
|
||||
"d3-format": "3",
|
||||
"d3-geo": "3",
|
||||
"d3-hierarchy": "3",
|
||||
"d3-interpolate": "3",
|
||||
"d3-path": "3",
|
||||
"d3-polygon": "3",
|
||||
"d3-quadtree": "3",
|
||||
"d3-random": "3",
|
||||
"d3-scale": "4",
|
||||
"d3-scale-chromatic": "3",
|
||||
"d3-selection": "3",
|
||||
"d3-shape": "3",
|
||||
"d3-time": "3",
|
||||
"d3-time-format": "4",
|
||||
"d3-timer": "3",
|
||||
"d3-transition": "3",
|
||||
"d3-zoom": "3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "3.2.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
|
||||
"integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"internmap": "1 - 2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-axis": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-axis/-/d3-axis-3.0.0.tgz",
|
||||
"integrity": "sha512-IH5tgjV4jE/GhHkRV0HiVYPDtvfjHQlQfJHs0usq7M30XcSBvOotpmH1IgkcXsO/5gEQZD43B//fc7SRT5S+xw==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-brush": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-brush/-/d3-brush-3.0.0.tgz",
|
||||
"integrity": "sha512-ALnjWlVYkXsVIGlOsuWH1+3udkYFI48Ljihfnh8FZPF2QS9o+PzGLBslO0PjzVoHLZ2KCVgAM8NVkXPJB2aNnQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-dispatch": "1 - 3",
|
||||
"d3-drag": "2 - 3",
|
||||
"d3-interpolate": "1 - 3",
|
||||
"d3-selection": "3",
|
||||
"d3-transition": "3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-chord": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-chord/-/d3-chord-3.0.1.tgz",
|
||||
"integrity": "sha512-VE5S6TNa+j8msksl7HwjxMHDM2yNK3XCkusIlpX5kwauBfXuyLAtNg9jCp/iHH61tgI4sb6R/EIMWCqEIdjT/g==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-path": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-color": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
|
||||
"integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-contour": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-contour/-/d3-contour-4.0.2.tgz",
|
||||
"integrity": "sha512-4EzFTRIikzs47RGmdxbeUvLWtGedDUNkTcmzoeyg4sP/dvCexO47AaQL7VKy/gul85TOxw+IBgA8US2xwbToNA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "^3.2.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-delaunay": {
|
||||
"version": "6.0.4",
|
||||
"resolved": "https://registry.npmjs.org/d3-delaunay/-/d3-delaunay-6.0.4.tgz",
|
||||
"integrity": "sha512-mdjtIZ1XLAM8bm/hx3WwjfHt6Sggek7qH043O8KEjDXN40xi3vx/6pYSVTwLjEgiXQTbvaouWKynLBiUZ6SK6A==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"delaunator": "5"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-dispatch": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
|
||||
"integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-drag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-drag/-/d3-drag-3.0.0.tgz",
|
||||
"integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-dispatch": "1 - 3",
|
||||
"d3-selection": "3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-dsv": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-dsv/-/d3-dsv-3.0.1.tgz",
|
||||
"integrity": "sha512-UG6OvdI5afDIFP9w4G0mNq50dSOsXHJaRE8arAS5o9ApWnIElp8GZw1Dun8vP8OyHOZ/QJUKUJwxiiCCnUwm+Q==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"commander": "7",
|
||||
"iconv-lite": "0.6",
|
||||
"rw": "1"
|
||||
},
|
||||
"bin": {
|
||||
"csv2json": "bin/dsv2json.js",
|
||||
"csv2tsv": "bin/dsv2dsv.js",
|
||||
"dsv2dsv": "bin/dsv2dsv.js",
|
||||
"dsv2json": "bin/dsv2json.js",
|
||||
"json2csv": "bin/json2dsv.js",
|
||||
"json2dsv": "bin/json2dsv.js",
|
||||
"json2tsv": "bin/json2dsv.js",
|
||||
"tsv2csv": "bin/dsv2dsv.js",
|
||||
"tsv2json": "bin/dsv2json.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-dsv/node_modules/commander": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
|
||||
"integrity": "sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==",
|
||||
"license": "MIT",
|
||||
"engines": {
|
||||
"node": ">= 10"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-ease": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
|
||||
"integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
|
||||
"license": "BSD-3-Clause",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-fetch": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-fetch/-/d3-fetch-3.0.1.tgz",
|
||||
"integrity": "sha512-kpkQIM20n3oLVBKGg6oHrUchHM3xODkTzjMoj7aWQFq5QEM+R6E4WkzT5+tojDY7yjez8KgCBRoj4aEr99Fdqw==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-dsv": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-force": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-force/-/d3-force-3.0.0.tgz",
|
||||
"integrity": "sha512-zxV/SsA+U4yte8051P4ECydjD/S+qeYtnaIyAs9tgHCqfguma/aAQDjo85A9Z6EKhBirHRJHXIgJUlffT4wdLg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-dispatch": "1 - 3",
|
||||
"d3-quadtree": "1 - 3",
|
||||
"d3-timer": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-format": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
|
||||
"integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-geo": {
|
||||
"version": "3.1.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-geo/-/d3-geo-3.1.1.tgz",
|
||||
"integrity": "sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2.5.0 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-hierarchy": {
|
||||
"version": "3.1.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-hierarchy/-/d3-hierarchy-3.1.2.tgz",
|
||||
"integrity": "sha512-FX/9frcub54beBdugHjDCdikxThEqjnR93Qt7PvQTOHxyiNCAlvMrHhclk3cD5VeAaq9fxmfRp+CnWw9rEMBuA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-interpolate": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
|
||||
"integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-path": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
|
||||
"integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-polygon": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-polygon/-/d3-polygon-3.0.1.tgz",
|
||||
"integrity": "sha512-3vbA7vXYwfe1SYhED++fPUQlWSYTTGmFmQiany/gdbiWgU/iEyQzyymwL9SkJjFFuCS4902BSzewVGsHHmHtXg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-quadtree": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-quadtree/-/d3-quadtree-3.0.1.tgz",
|
||||
"integrity": "sha512-04xDrxQTDTCFwP5H6hRhsRcb9xxv2RzkcsygFzmkSIOJy3PeRJP7sNk3VRIbKXcog561P9oU0/rVH6vDROAgUw==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-random": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-random/-/d3-random-3.0.1.tgz",
|
||||
"integrity": "sha512-FXMe9GfxTxqd5D6jFsQ+DJ8BJS4E/fT5mqqdjovykEB2oFbTMDVdg1MGFxfQW+FBOGoB++k8swBrgwSHT1cUXQ==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-scale": {
|
||||
"version": "4.0.2",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
|
||||
"integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2.10.0 - 3",
|
||||
"d3-format": "1 - 3",
|
||||
"d3-interpolate": "1.2.0 - 3",
|
||||
"d3-time": "2.1.1 - 3",
|
||||
"d3-time-format": "2 - 4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-scale-chromatic": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-scale-chromatic/-/d3-scale-chromatic-3.1.0.tgz",
|
||||
"integrity": "sha512-A3s5PWiZ9YCXFye1o246KoscMWqf8BsD9eRiJ3He7C9OBaxKhAd5TFCdEx/7VbKtxxTsu//1mMJFrEt572cEyQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3",
|
||||
"d3-interpolate": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-selection": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
|
||||
"integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-shape": {
|
||||
"version": "3.2.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
|
||||
"integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-path": "^3.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
|
||||
"integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-array": "2 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-time-format": {
|
||||
"version": "4.1.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
|
||||
"integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-time": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-timer": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
|
||||
"integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-transition": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/d3-transition/-/d3-transition-3.0.1.tgz",
|
||||
"integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-color": "1 - 3",
|
||||
"d3-dispatch": "1 - 3",
|
||||
"d3-ease": "1 - 3",
|
||||
"d3-interpolate": "1 - 3",
|
||||
"d3-timer": "1 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"d3-selection": "2 - 3"
|
||||
}
|
||||
},
|
||||
"node_modules/d3-zoom": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/d3-zoom/-/d3-zoom-3.0.0.tgz",
|
||||
"integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"d3-dispatch": "1 - 3",
|
||||
"d3-drag": "2 - 3",
|
||||
"d3-interpolate": "1 - 3",
|
||||
"d3-selection": "2 - 3",
|
||||
"d3-transition": "2 - 3"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/db0": {
|
||||
"version": "0.3.4",
|
||||
"resolved": "https://registry.npmjs.org/db0/-/db0-0.3.4.tgz",
|
||||
@@ -5425,6 +5836,15 @@
|
||||
"integrity": "sha512-7z22QmUWiQ/2d0KkdYmANbRUVABpZ9SNYyH5vx6PZ+nE5bcC0l7uFvEfHlyld/HcGBFTL536ClDt3DEcSlEJAQ==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/delaunator": {
|
||||
"version": "5.1.0",
|
||||
"resolved": "https://registry.npmjs.org/delaunator/-/delaunator-5.1.0.tgz",
|
||||
"integrity": "sha512-AGrQ4QSgssa1NGmWmLPqN5NY2KajF5MqxetNEO+o0n3ZwZZeTmt7bBnvzHWrmkZFxGgr4HdyFgelzgi06otLuQ==",
|
||||
"license": "ISC",
|
||||
"dependencies": {
|
||||
"robust-predicates": "^3.0.2"
|
||||
}
|
||||
},
|
||||
"node_modules/delegates": {
|
||||
"version": "1.0.0",
|
||||
"resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
|
||||
@@ -6480,6 +6900,18 @@
|
||||
"node": ">=16.17.0"
|
||||
}
|
||||
},
|
||||
"node_modules/iconv-lite": {
|
||||
"version": "0.6.3",
|
||||
"resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
|
||||
"integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"safer-buffer": ">= 2.1.2 < 3.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/ieee754": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
|
||||
@@ -6555,6 +6987,15 @@
|
||||
"node": "^14.17.0 || ^16.13.0 || >=18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/internmap": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
|
||||
"integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
|
||||
"license": "ISC",
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
}
|
||||
},
|
||||
"node_modules/ioredis": {
|
||||
"version": "5.10.1",
|
||||
"resolved": "https://registry.npmjs.org/ioredis/-/ioredis-5.10.1.tgz",
|
||||
@@ -9480,6 +9921,12 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/robust-predicates": {
|
||||
"version": "3.0.3",
|
||||
"resolved": "https://registry.npmjs.org/robust-predicates/-/robust-predicates-3.0.3.tgz",
|
||||
"integrity": "sha512-NS3levdsRIUOmiJ8FZWCP7LG3QpJyrs/TE0Zpf1yvZu8cAJJ6QMW92H1c7kWpdIHo8RvmLxN/o2JXTKHp74lUA==",
|
||||
"license": "Unlicense"
|
||||
},
|
||||
"node_modules/rollup": {
|
||||
"version": "4.60.1",
|
||||
"resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.1.tgz",
|
||||
@@ -9595,6 +10042,12 @@
|
||||
"queue-microtask": "^1.2.2"
|
||||
}
|
||||
},
|
||||
"node_modules/rw": {
|
||||
"version": "1.3.3",
|
||||
"resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
|
||||
"integrity": "sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==",
|
||||
"license": "BSD-3-Clause"
|
||||
},
|
||||
"node_modules/safe-buffer": {
|
||||
"version": "5.2.1",
|
||||
"resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
|
||||
@@ -9633,6 +10086,12 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
|
||||
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/sax": {
|
||||
"version": "1.6.0",
|
||||
"resolved": "https://registry.npmjs.org/sax/-/sax-1.6.0.tgz",
|
||||
|
||||
@@ -13,6 +13,7 @@
|
||||
"@headlessui/vue": "^1.7.23",
|
||||
"@types/leaflet": "^1.9.21",
|
||||
"@types/leaflet.markercluster": "^1.5.6",
|
||||
"d3": "^7.9.0",
|
||||
"ioredis": "^5.3.2",
|
||||
"leaflet": "^1.9.4",
|
||||
"leaflet.markercluster": "^1.5.3",
|
||||
|
||||
@@ -1,39 +1,517 @@
|
||||
<template>
|
||||
<div class="flex flex-col items-center justify-center h-full gap-6" style="background: var(--nav-bg);">
|
||||
<div class="text-center max-w-md px-6">
|
||||
<div
|
||||
class="inline-flex items-center justify-center w-14 h-14 rounded-2xl mb-5"
|
||||
style="background: var(--nav-bg-alt);"
|
||||
>
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-muted);">
|
||||
<rect x="3" y="3" width="7" height="7"/>
|
||||
<rect x="14" y="3" width="7" height="7"/>
|
||||
<rect x="14" y="14" width="7" height="7"/>
|
||||
<rect x="3" y="14" width="7" height="7"/>
|
||||
</svg>
|
||||
<div class="flex h-full overflow-hidden" style="background: var(--nav-bg);">
|
||||
|
||||
<!-- ═══════════════════════════════════════ SIDEBAR DESKTOP (>= 1024px) -->
|
||||
<div class="hidden lg:block overflow-y-auto" style="width: 320px; min-width: 320px; flex-shrink: 0; border-right: 1px solid var(--nav-bg-alt); height: 100%;">
|
||||
|
||||
<!-- IntentionBanner s'auto-affiche via Teleport (overlay plein ecran) -->
|
||||
<IntentionBanner />
|
||||
|
||||
<!-- Filtres familles + hashtags -->
|
||||
<HashtagFilter
|
||||
:allHashtags="allHashtags"
|
||||
:selectedHashtags="selectedHashtags"
|
||||
:selectedFamille="selectedFamille"
|
||||
@update:selectedHashtags="selectedHashtags = $event"
|
||||
@update:selectedFamille="selectedFamille = $event"
|
||||
/>
|
||||
|
||||
<!-- Separateur -->
|
||||
<div style="height: 1px; background: var(--nav-bg-alt);"></div>
|
||||
|
||||
<!-- Barre de recherche -->
|
||||
<div class="px-3 py-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
|
||||
<label class="sidebar-search-label" aria-label="Rechercher une structure">
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="sidebar-search-icon">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
<input
|
||||
v-model="search"
|
||||
type="search"
|
||||
placeholder="Rechercher une structure..."
|
||||
class="sidebar-search-input"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<button
|
||||
v-if="search"
|
||||
type="button"
|
||||
class="sidebar-search-clear"
|
||||
aria-label="Effacer"
|
||||
@click.stop="search = ''"
|
||||
>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold mb-3" style="color: var(--nav-text);">Agences Inspirantes</h1>
|
||||
<p class="text-sm leading-relaxed mb-6" style="color: var(--nav-text-muted);">
|
||||
Cette section répertoriera les agences d'architecture qui incarnent une pratique engagée — écologie politique, auto-construction, architectures vernaculaires, sobriété.
|
||||
</p>
|
||||
<p class="text-xs font-semibold uppercase tracking-widest mb-6" style="color: var(--nav-text-muted); opacity: 0.6;">
|
||||
Bientôt disponible
|
||||
</p>
|
||||
<NuxtLink
|
||||
to="/"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-xl text-sm font-semibold transition-all hover:opacity-80"
|
||||
style="background: var(--nav-primary); color: var(--nav-text-on-primary);"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true">
|
||||
<line x1="19" y1="12" x2="5" y2="12"/>
|
||||
<polyline points="12 19 5 12 12 5"/>
|
||||
</svg>
|
||||
Retour à l'écosystème
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Header compteur + reset -->
|
||||
<div class="flex items-center justify-between px-4 py-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
|
||||
<span class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">
|
||||
{{ filtered.length }} structure{{ filtered.length > 1 ? 's' : '' }}
|
||||
</span>
|
||||
<button
|
||||
v-if="hasActiveFilters"
|
||||
@click="resetFilters"
|
||||
class="text-xs underline hover:opacity-70"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>Effacer les filtres</button>
|
||||
</div>
|
||||
|
||||
<!-- Liste fiches (sidebar entiere scroll - pas de scroll interne) -->
|
||||
<div class="px-3 py-2 space-y-1.5">
|
||||
<div v-if="pending" class="flex items-center justify-center py-8" style="color: var(--nav-text-muted);">
|
||||
Chargement...
|
||||
</div>
|
||||
<div v-else-if="filtered.length === 0" class="text-center py-8">
|
||||
<p class="text-xs" style="color: var(--nav-text-muted);">Aucun résultat</p>
|
||||
</div>
|
||||
<div
|
||||
v-for="structure in filtered"
|
||||
:key="structure.id"
|
||||
class="rounded-lg px-3 py-2 cursor-pointer transition-all"
|
||||
:style="selectedId === structure.id
|
||||
? `background: var(--nav-bg-alt); border-left: 3px solid ${familleColor(structure.famille_principale)}; padding-left: 9px;`
|
||||
: 'background: var(--nav-bg); border-left: 3px solid transparent; padding-left: 9px;'"
|
||||
@click="onSelectStructure(structure.id)"
|
||||
@mouseenter="hoveredId = structure.id"
|
||||
@mouseleave="hoveredId = null"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-1.5">
|
||||
<span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ structure.nom }}</span>
|
||||
<span
|
||||
class="shrink-0 w-2.5 h-2.5 rounded-full mt-1"
|
||||
:style="`background: ${familleColor(structure.famille_principale)};`"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">{{ structure.type_principal }} - {{ structure.ville }}</div>
|
||||
<div v-if="structure.hashtags.length" class="mt-1 flex flex-wrap gap-1">
|
||||
<span
|
||||
v-for="tag in structure.hashtags.slice(0, 2)"
|
||||
:key="tag"
|
||||
class="text-xs"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>{{ tag }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- ═══════════════════════════════════════ ZONE CENTRALE (carte) -->
|
||||
<main class="flex-1 flex flex-col overflow-hidden relative">
|
||||
|
||||
<!-- ── VUE DESKTOP : Onglets Métro/Outre-mer ── -->
|
||||
<div class="hidden lg:flex lg:flex-1 lg:flex-col lg:overflow-hidden">
|
||||
<!-- Onglets desktop -->
|
||||
<div class="shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
|
||||
<button
|
||||
class="px-5 py-2 text-sm font-medium transition-colors"
|
||||
:style="desktopMapView === 'metropole'
|
||||
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
|
||||
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
|
||||
@click="desktopMapView = 'metropole'"
|
||||
>Métropolitain</button>
|
||||
<button
|
||||
class="px-5 py-2 text-sm font-medium transition-colors"
|
||||
:style="desktopMapView === 'outremer'
|
||||
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
|
||||
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
|
||||
@click="desktopMapView = 'outremer'"
|
||||
>Outre-mer</button>
|
||||
<button
|
||||
class="px-5 py-2 text-sm font-medium transition-colors"
|
||||
:style="desktopMapView === 'graphe'
|
||||
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
|
||||
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
|
||||
@click="desktopMapView = 'graphe'"
|
||||
>Vue graphique</button>
|
||||
</div>
|
||||
|
||||
<!-- Carte Métropole desktop -->
|
||||
<div v-show="desktopMapView === 'metropole'" class="flex-1 flex flex-col overflow-hidden">
|
||||
<div class="relative flex-1" style="min-height: 200px;">
|
||||
<ClientOnly>
|
||||
<NavMapV2
|
||||
ref="navMapRef"
|
||||
:structures="metropoleStructures"
|
||||
:selectedId="selectedId"
|
||||
@select-structure="onSelectStructure"
|
||||
/>
|
||||
<template #fallback>
|
||||
<div
|
||||
class="w-full h-full flex items-center justify-center"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
|
||||
>
|
||||
Chargement de la carte…
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
<ChatbotPlaceholder
|
||||
@highlightOrgs="() => {}"
|
||||
@applyHashtag="(tag) => { if (!selectedHashtags.includes(tag)) selectedHashtags = [...selectedHashtags, tag] }"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Carte Outre-mer desktop -->
|
||||
<div v-show="desktopMapView === 'outremer'" class="flex-1 overflow-y-auto" style="background: var(--nav-bg);">
|
||||
<ClientOnly>
|
||||
<OutremerMap
|
||||
:orgs="outremerOrgsLegacy"
|
||||
:selectedId="selectedIdLegacyNum"
|
||||
@select-org="() => {}"
|
||||
/>
|
||||
<template #fallback>
|
||||
<div class="flex items-center justify-center h-full text-sm" style="color: var(--nav-text-muted);">
|
||||
Chargement…
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
<!-- Vue graphique desktop -->
|
||||
<div v-show="desktopMapView === 'graphe'" class="flex-1 overflow-hidden flex flex-col">
|
||||
<div class="flex-1 overflow-hidden relative">
|
||||
<ClientOnly>
|
||||
<GraphView
|
||||
:data="bifurcationData"
|
||||
:allHashtags="allHashtags"
|
||||
:active="desktopMapView === 'graphe'"
|
||||
@select-structure="onSelectStructure"
|
||||
/>
|
||||
<template #fallback>
|
||||
<div class="flex items-center justify-center h-full" style="color: var(--nav-text-muted);">
|
||||
Chargement du graphe...
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
<ChatbotPlaceholder
|
||||
@highlightOrgs="() => {}"
|
||||
@applyHashtag="(tag) => { if (!selectedHashtags.includes(tag)) selectedHashtags = [...selectedHashtags, tag] }"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── VUE MOBILE : Onglets Métro/Outre-mer + sheet swipable ── -->
|
||||
<div class="lg:hidden shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
|
||||
<button
|
||||
class="flex-1 py-2 text-sm font-medium transition-colors"
|
||||
:style="mobileMapView === 'metropole'
|
||||
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
|
||||
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
|
||||
@click="mobileMapView = 'metropole'"
|
||||
>Métropolitain</button>
|
||||
<button
|
||||
class="flex-1 py-2 text-sm font-medium transition-colors"
|
||||
:style="mobileMapView === 'outremer'
|
||||
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
|
||||
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
|
||||
@click="mobileMapView = 'outremer'"
|
||||
>Outre-mer</button>
|
||||
</div>
|
||||
|
||||
<div class="lg:hidden flex-1 relative overflow-hidden">
|
||||
<!-- Carte mobile Métropole -->
|
||||
<div v-show="mobileMapView === 'metropole'" class="absolute inset-0">
|
||||
<ClientOnly>
|
||||
<NavMapV2
|
||||
ref="navMapMobileRef"
|
||||
:structures="metropoleStructures"
|
||||
:selectedId="selectedId"
|
||||
@select-structure="onSelectStructureMobile"
|
||||
/>
|
||||
<template #fallback>
|
||||
<div class="w-full h-full flex items-center justify-center" style="background: var(--nav-bg-alt); color: var(--nav-text-muted);">
|
||||
Chargement de la carte…
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
<!-- Carte mobile Outre-mer -->
|
||||
<div v-show="mobileMapView === 'outremer'" class="absolute inset-0 overflow-y-auto" style="background: var(--nav-bg);">
|
||||
<ClientOnly>
|
||||
<OutremerMap
|
||||
:orgs="outremerOrgsLegacy"
|
||||
:selectedId="selectedIdLegacyNum"
|
||||
@select-org="() => {}"
|
||||
/>
|
||||
<template #fallback>
|
||||
<div class="flex items-center justify-center h-48" style="color: var(--nav-text-muted);">
|
||||
Chargement…
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
|
||||
<!-- Bottom sheet swipable -->
|
||||
<ClientOnly>
|
||||
<MobileSheet :resultCount="filtered.length" :pending="pending">
|
||||
<!-- Bandeau intention mobile -->
|
||||
<div class="px-3 py-2" style="background: var(--bifurc-banner-bg, #faf8f5); border-bottom: 1px solid var(--bifurc-banner-border, #e0d8cc);">
|
||||
<p class="text-xs leading-relaxed" style="color: var(--bifurc-banner-text, #2c2416); margin: 0;">
|
||||
120 réseaux, collectifs et agences où des pensées écologiques deviennent des pratiques d'architecture.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Filtres hashtags mobile -->
|
||||
<div class="px-3 py-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
|
||||
<HashtagFilter
|
||||
:allHashtags="allHashtags"
|
||||
:selectedHashtags="selectedHashtags"
|
||||
:selectedFamille="selectedFamille"
|
||||
@update:selectedHashtags="selectedHashtags = $event"
|
||||
@update:selectedFamille="selectedFamille = $event"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Barre recherche mobile -->
|
||||
<div class="px-3 pt-2 pb-2" style="border-bottom: 1px solid var(--nav-bg-alt);">
|
||||
<label class="mobile-search-label" aria-label="Rechercher une structure">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-muted); flex-shrink: 0;">
|
||||
<circle cx="11" cy="11" r="8"/>
|
||||
<line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
<input
|
||||
v-model="search"
|
||||
type="search"
|
||||
placeholder="Rechercher…"
|
||||
class="mobile-search-input"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<button
|
||||
v-if="search"
|
||||
type="button"
|
||||
class="mobile-search-clear"
|
||||
aria-label="Effacer"
|
||||
@click.stop="search = ''"
|
||||
>
|
||||
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</label>
|
||||
<button
|
||||
v-if="hasActiveFilters"
|
||||
@click="resetFilters"
|
||||
class="mt-1 text-xs"
|
||||
style="color: var(--nav-text-muted); text-decoration: underline;"
|
||||
>Effacer les filtres</button>
|
||||
</div>
|
||||
|
||||
<!-- Liste fiches mobile -->
|
||||
<div class="px-3 py-2">
|
||||
<div class="text-xs font-bold uppercase tracking-wide mb-2" style="color: var(--nav-text-muted);">
|
||||
{{ filtered.length }} structure{{ filtered.length > 1 ? 's' : '' }}
|
||||
</div>
|
||||
<div v-if="pending" class="flex items-center justify-center py-8" style="color: var(--nav-text-muted);">
|
||||
Chargement des fiches…
|
||||
</div>
|
||||
<div v-else-if="filtered.length === 0" class="text-center py-8">
|
||||
<p class="text-sm mb-2" style="color: var(--nav-text-muted);">Aucun résultat pour ces filtres.</p>
|
||||
<button @click="resetFilters" class="text-sm underline" style="color: var(--nav-primary-solid);">
|
||||
Effacer les filtres
|
||||
</button>
|
||||
</div>
|
||||
<div class="space-y-2">
|
||||
<div
|
||||
v-for="structure in filtered"
|
||||
:key="structure.id"
|
||||
class="block rounded-lg p-3 transition-all cursor-pointer"
|
||||
:style="selectedId === structure.id
|
||||
? `background: var(--nav-bg-alt); border-left: 3px solid ${familleColor(structure.famille_principale)};`
|
||||
: 'background: var(--nav-surface); border-left: 3px solid transparent;'"
|
||||
@click="onSelectStructureMobile(structure.id)"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<span class="font-semibold text-sm leading-snug" style="color: var(--nav-text);">{{ structure.nom }}</span>
|
||||
<span
|
||||
class="shrink-0 w-2.5 h-2.5 rounded-full mt-1"
|
||||
:style="`background: ${familleColor(structure.famille_principale)};`"
|
||||
/>
|
||||
</div>
|
||||
<div class="mt-0.5 text-xs" style="color: var(--nav-text-muted);">{{ structure.type_principal }} · {{ structure.ville }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MobileSheet>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- ═══════════════════════════════════════ MODAL FICHE V2 (desktop) -->
|
||||
<FicheModalV2
|
||||
v-model="ficheModalOpen"
|
||||
:structureId="ficheModalId"
|
||||
:data="bifurcationData"
|
||||
@update:structureId="ficheModalId = $event"
|
||||
/>
|
||||
|
||||
<!-- ═══════════════════════════════════════ BOUTON CHATBOT FLOTTANT (mobile) -->
|
||||
<button
|
||||
class="lg:hidden fixed bottom-6 right-4 z-[1000] flex items-center gap-2 px-4 rounded-full shadow-lg"
|
||||
style="
|
||||
height: 48px;
|
||||
background: var(--nav-primary);
|
||||
opacity: 0.92;
|
||||
color: var(--nav-text-on-primary);
|
||||
box-shadow: 0 4px 16px rgba(26,34,56,0.25);
|
||||
font-family: var(--nav-font);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
"
|
||||
aria-label="Ouvrir l'assistant Chatbot"
|
||||
@click="chatbotOpen = true"
|
||||
>
|
||||
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
|
||||
</svg>
|
||||
<span>Chatbot</span>
|
||||
</button>
|
||||
|
||||
<!-- ═══════════════════════════════════════ CHATBOT BOTTOM SHEET (mobile) -->
|
||||
<ChatbotSheet
|
||||
:modelValue="chatbotOpen"
|
||||
@update:modelValue="chatbotOpen = $event"
|
||||
@highlightOrgs="() => {}"
|
||||
/>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
useHead({ title: 'Agences Inspirantes — AEP (bientôt disponible)' })
|
||||
import type { ReseauxBifurcationData, StructureV2 } from '~/types/structure-v2'
|
||||
|
||||
// ── Couleurs familles ──────────────────────────────────────────────────────
|
||||
const FAMILLE_COLORS: Record<number, string> = {
|
||||
1: '#a85d3e',
|
||||
2: '#c4a472',
|
||||
3: '#d4a017',
|
||||
4: '#5a7a4a',
|
||||
5: '#3d6a8c',
|
||||
6: '#6b3fa0',
|
||||
}
|
||||
|
||||
function familleColor(f: number): string {
|
||||
return FAMILLE_COLORS[f] ?? '#888'
|
||||
}
|
||||
|
||||
// ── État UI ────────────────────────────────────────────────────────────────
|
||||
const selectedId = ref<string | null>(null)
|
||||
const hoveredId = ref<string | null>(null)
|
||||
const ficheModalOpen = ref(false)
|
||||
const ficheModalId = ref<string | null>(null)
|
||||
const chatbotOpen = ref(false)
|
||||
const mobileMapView = ref<'metropole' | 'outremer'>('metropole')
|
||||
const desktopMapView = ref<'metropole' | 'outremer' | 'graphe'>('metropole')
|
||||
|
||||
// Filtres
|
||||
const search = ref('')
|
||||
const selectedFamille = ref<number | null>(null)
|
||||
const selectedHashtags = ref<string[]>([])
|
||||
|
||||
// Refs cartes
|
||||
const navMapRef = ref<any>(null)
|
||||
const navMapMobileRef = ref<any>(null)
|
||||
|
||||
// ── Données V2 - JSON statique ─────────────────────────────────────────────
|
||||
const bifurcationData = ref<ReseauxBifurcationData | null>(null)
|
||||
const pending = ref(true)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
bifurcationData.value = await $fetch<ReseauxBifurcationData>('/data/reseaux-bifurcation.json')
|
||||
} catch (e) {
|
||||
console.error('Erreur chargement reseaux-bifurcation.json', e)
|
||||
} finally {
|
||||
pending.value = false
|
||||
}
|
||||
})
|
||||
|
||||
const structures = computed<StructureV2[]>(() => bifurcationData.value?.structures ?? [])
|
||||
|
||||
// Tous les hashtags uniques triés
|
||||
const allHashtags = computed<string[]>(() => {
|
||||
const set = new Set<string>()
|
||||
structures.value.forEach(s => s.hashtags.forEach(h => set.add(h)))
|
||||
return Array.from(set).sort()
|
||||
})
|
||||
|
||||
// ── Filtrage ───────────────────────────────────────────────────────────────
|
||||
const filtered = computed<StructureV2[]>(() => {
|
||||
let result = structures.value
|
||||
|
||||
// Filtre texte
|
||||
if (search.value.trim()) {
|
||||
const q = search.value.toLowerCase()
|
||||
result = result.filter(
|
||||
s =>
|
||||
s.nom.toLowerCase().includes(q) ||
|
||||
s.ville.toLowerCase().includes(q) ||
|
||||
s.description_courte.toLowerCase().includes(q) ||
|
||||
s.hashtags.some(h => h.toLowerCase().includes(q))
|
||||
)
|
||||
}
|
||||
|
||||
// Filtre famille - F6 = badge_f6_recherche_politique, pas famille_principale
|
||||
if (selectedFamille.value !== null) {
|
||||
if (selectedFamille.value === 6) {
|
||||
result = result.filter(s => (s.badges as any)?.f6_recherche_politique === true)
|
||||
} else {
|
||||
result = result.filter(
|
||||
s => s.famille_principale === selectedFamille.value ||
|
||||
(s.familles_secondaires ?? []).includes(selectedFamille.value!)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Filtre hashtags (AND logique si plusieurs)
|
||||
if (selectedHashtags.value.length) {
|
||||
result = result.filter(
|
||||
s => selectedHashtags.value.every(h => s.hashtags.includes(h))
|
||||
)
|
||||
}
|
||||
|
||||
return result
|
||||
})
|
||||
|
||||
const hasActiveFilters = computed(
|
||||
() => !!search.value || selectedFamille.value !== null || selectedHashtags.value.length > 0
|
||||
)
|
||||
|
||||
function resetFilters() {
|
||||
search.value = ''
|
||||
selectedFamille.value = null
|
||||
selectedHashtags.value = []
|
||||
}
|
||||
|
||||
// Structures métropole (pays != DOM-TOM, et avec coordonnées)
|
||||
// Pour simplifier : toutes les structures (la carte gère les sans-coords)
|
||||
const metropoleStructures = computed<StructureV2[]>(() => filtered.value)
|
||||
|
||||
// Outre-mer : pas de structures V2 DOM-TOM pour l'instant - garder le composant existant vide
|
||||
// OutremerMap attend le format Org legacy - on passe un tableau vide
|
||||
const outremerOrgsLegacy = computed(() => [])
|
||||
const selectedIdLegacyNum = computed(() => null)
|
||||
|
||||
// ── Sélection ─────────────────────────────────────────────────────────────
|
||||
function onSelectStructure(id: string) {
|
||||
selectedId.value = selectedId.value === id ? null : id
|
||||
if (typeof window !== 'undefined' && window.innerWidth >= 1024) {
|
||||
ficheModalId.value = id
|
||||
ficheModalOpen.value = true
|
||||
}
|
||||
}
|
||||
|
||||
function onSelectStructureMobile(id: string) {
|
||||
selectedId.value = id
|
||||
ficheModalId.value = id
|
||||
ficheModalOpen.value = true
|
||||
}
|
||||
|
||||
useHead({ title: "AEP - Réseaux de bifurcation architecturale" })
|
||||
</script>
|
||||
|
||||
550
pages/codev/carto.vue
Normal file
550
pages/codev/carto.vue
Normal file
@@ -0,0 +1,550 @@
|
||||
<template>
|
||||
<div class="codev-carto">
|
||||
|
||||
<header class="carto-header">
|
||||
<h1>Carto entraide</h1>
|
||||
<p class="carto-subtitle">
|
||||
<template v-if="pending">Chargement...</template>
|
||||
<template v-else>
|
||||
{{ fiches.length }} fiche{{ fiches.length !== 1 ? 's' : '' }} - clique sur un nom pour voir le detail
|
||||
</template>
|
||||
</p>
|
||||
<NuxtLink to="/codev/qr" class="qr-link" title="QR Code">[ QR ]</NuxtLink>
|
||||
</header>
|
||||
|
||||
<div class="codev-tabs">
|
||||
<button :class="{ active: tab === 'carto' }" @click="tab = 'carto'" type="button">Carto</button>
|
||||
<button :class="{ active: tab === 'annuaire' }" @click="tab = 'annuaire'" type="button">Annuaire</button>
|
||||
</div>
|
||||
|
||||
<div v-if="tab === 'carto'">
|
||||
<div class="show-labels-bar">
|
||||
<button
|
||||
type="button"
|
||||
:class="{ active: showLabels }"
|
||||
@click="showLabels = !showLabels"
|
||||
>
|
||||
{{ showLabels ? 'Masquer besoins/offres' : 'Montrer besoins/offres' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ClientOnly>
|
||||
<CodevGraph
|
||||
:fiches="fiches"
|
||||
:matches="matches"
|
||||
:mode="mode"
|
||||
:show-labels="showLabels"
|
||||
@select-fiche="onSelectFiche"
|
||||
/>
|
||||
<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>
|
||||
|
||||
<!-- Boutons matching -->
|
||||
<div class="matching-controls">
|
||||
<button
|
||||
:class="{ active: mode === 'solution' }"
|
||||
style="--mode-color: #22c55e"
|
||||
@click="setMode('solution')"
|
||||
type="button"
|
||||
>
|
||||
Solution
|
||||
<span class="hint">besoin - compétence</span>
|
||||
</button>
|
||||
<button
|
||||
:class="{ active: mode === 'alliance' }"
|
||||
style="--mode-color: #f97316"
|
||||
@click="setMode('alliance')"
|
||||
type="button"
|
||||
>
|
||||
Alliance
|
||||
<span class="hint">besoins partagés</span>
|
||||
</button>
|
||||
<button
|
||||
v-if="mode !== 'none'"
|
||||
class="reset"
|
||||
@click="setMode('none')"
|
||||
type="button"
|
||||
>
|
||||
Effacer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="tab === 'annuaire'" class="annuaire-wrap">
|
||||
|
||||
<div v-if="fiches.length === 0" class="list-empty">
|
||||
Aucune fiche. <NuxtLink to="/codev/fiche">Ajouter la mienne</NuxtLink>
|
||||
</div>
|
||||
|
||||
<div v-else class="annuaire-scroll">
|
||||
<table class="annuaire-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-nom">Prénom</th>
|
||||
<th class="col-besoin">Besoin</th>
|
||||
<th class="col-offre">Ce que j'offre</th>
|
||||
<th v-if="isAdmin" class="col-actions"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="f in fiches" :key="f.id" @click="navigateTo(`/codev/fiche?id=${f.id}`)" class="annuaire-row">
|
||||
<td class="col-nom">{{ f.nom }}</td>
|
||||
<td class="col-besoin">{{ f.besoin }}</td>
|
||||
<td class="col-offre">{{ f.offre }}</td>
|
||||
<td v-if="isAdmin" class="col-actions">
|
||||
<button @click.stop="deleteFiche(f.id)" class="delete-btn" type="button" title="Supprimer">✕</button>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="annuaire-hint">Clique sur une ligne pour modifier la fiche</p>
|
||||
</div>
|
||||
|
||||
<!-- FAB ajouter une fiche -->
|
||||
<NuxtLink to="/codev/fiche" class="fab-add" title="Ajouter ma fiche" aria-label="Ajouter une fiche">
|
||||
+
|
||||
</NuxtLink>
|
||||
|
||||
<Transition name="sheet">
|
||||
<div v-if="selectedFiche" class="bottom-sheet" @click.self="selectedFiche = null">
|
||||
<div class="sheet-content">
|
||||
<div class="sheet-handle"></div>
|
||||
<div class="sheet-name">{{ selectedFiche.nom }}</div>
|
||||
<div class="sheet-section">
|
||||
<span class="sheet-label">Besoin</span>
|
||||
<p class="sheet-text">{{ selectedFiche.besoin }}</p>
|
||||
</div>
|
||||
<div class="sheet-section">
|
||||
<span class="sheet-label">Ce que j'apporte</span>
|
||||
<p class="sheet-text">{{ selectedFiche.offre }}</p>
|
||||
</div>
|
||||
<div class="sheet-tags" v-if="selectedFiche.hashtags.length">
|
||||
<span v-for="t in selectedFiche.hashtags" :key="t" class="sheet-tag">#{{ t }}</span>
|
||||
</div>
|
||||
<NuxtLink :to="`/codev/fiche?id=${selectedFiche.id}`" class="sheet-edit-btn">Modifier cette fiche</NuxtLink>
|
||||
<button class="sheet-close" @click="selectedFiche = null" type="button">Fermer</button>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { CodevFiche, CodevMatch } from '~/types/codev'
|
||||
import { computeMatches } from '~/utils/codev/matching'
|
||||
|
||||
useHead({ title: 'Carto - Co-developpement' })
|
||||
|
||||
const { data, pending, refresh } = await useFetch<{ list: CodevFiche[] }>('/api/codev/fiches')
|
||||
const fiches = computed(() => data.value?.list ?? [])
|
||||
|
||||
const matches = ref<CodevMatch[]>([])
|
||||
const mode = ref<'none' | 'solution' | 'alliance' | 'surprise'>('none')
|
||||
const showLabels = ref(false)
|
||||
const tab = ref<'carto' | 'annuaire'>('carto')
|
||||
const selectedFiche = ref<CodevFiche | null>(null)
|
||||
const isMobileView = typeof window !== 'undefined' ? window.innerWidth < 600 : false
|
||||
|
||||
const isAdmin = ref(false)
|
||||
|
||||
onMounted(async () => {
|
||||
try {
|
||||
const r = await $fetch<{ admin: boolean }>('/api/codev/me')
|
||||
isAdmin.value = r.admin
|
||||
} catch { isAdmin.value = false }
|
||||
})
|
||||
|
||||
const MODE_LABELS: Record<string, string> = {
|
||||
solution: 'Solution',
|
||||
alliance: 'Alliance',
|
||||
surprise: 'Surprise',
|
||||
}
|
||||
|
||||
function setMode(newMode: 'none' | 'solution' | 'alliance' | 'surprise') {
|
||||
mode.value = newMode
|
||||
if (newMode === 'none') {
|
||||
matches.value = []
|
||||
} else {
|
||||
matches.value = computeMatches(fiches.value, newMode)
|
||||
}
|
||||
}
|
||||
|
||||
function onSelectFiche(id: number) {
|
||||
if (isMobileView) {
|
||||
selectedFiche.value = fiches.value.find(f => f.id === id) ?? null
|
||||
} else {
|
||||
navigateTo(`/codev/fiche?id=${id}`)
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteFiche(id: number) {
|
||||
if (!confirm('Supprimer la fiche ?')) return
|
||||
await $fetch(`/api/codev/fiches/${id}`, { method: 'DELETE' })
|
||||
await refresh()
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.codev-carto {
|
||||
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 ── */
|
||||
|
||||
.carto-header {
|
||||
text-align: center;
|
||||
padding-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.carto-header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--nav-text, #1a1a2e);
|
||||
margin: 0 0 0.375rem;
|
||||
}
|
||||
|
||||
.carto-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;
|
||||
}
|
||||
}
|
||||
|
||||
/* ── Toggle besoins/offres ── */
|
||||
|
||||
.show-labels-bar {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.show-labels-bar button {
|
||||
border: 1px solid #d0d4dc;
|
||||
border-radius: 8px;
|
||||
padding: 8px 16px;
|
||||
background: white;
|
||||
font-size: 13px;
|
||||
cursor: pointer;
|
||||
color: #374151;
|
||||
transition: background 0.15s, color 0.15s, border-color 0.15s;
|
||||
}
|
||||
|
||||
.show-labels-bar button.active {
|
||||
background: #1B4436;
|
||||
color: white;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
/* ── FAB ajouter ── */
|
||||
|
||||
.fab-add {
|
||||
position: fixed;
|
||||
bottom: 80px;
|
||||
right: 16px;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border-radius: 50%;
|
||||
background: #1B4436;
|
||||
color: white;
|
||||
font-size: 28px;
|
||||
font-weight: 300;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
|
||||
z-index: 100;
|
||||
transition: transform 0.15s, opacity 0.15s;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.fab-add:hover {
|
||||
transform: scale(1.08);
|
||||
opacity: 0.92;
|
||||
}
|
||||
|
||||
/* ── Tabs ── */
|
||||
|
||||
.codev-tabs { display: flex; gap: 4px; background: #f3f4f6; border-radius: 10px; padding: 4px; }
|
||||
.codev-tabs button { flex: 1; padding: 8px 4px; border: none; border-radius: 7px; background: transparent; font-size: 0.875rem; font-weight: 500; cursor: pointer; color: #6b7280; transition: all 0.15s; }
|
||||
.codev-tabs button.active { background: white; color: #1a1a2e; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.08); }
|
||||
|
||||
/* ── List view ── */
|
||||
|
||||
.list-view { display: flex; flex-direction: column; gap: 12px; padding: 8px 0; }
|
||||
.list-card { background: white; border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
|
||||
.list-card-name { font-weight: 700; font-size: 0.95rem; color: #1a1a2e; }
|
||||
.list-card-text { font-size: 0.875rem; color: #4b5563; margin: 0; line-height: 1.5; }
|
||||
.list-card-link { font-size: 0.8rem; color: #1B4436; text-decoration: none; align-self: flex-end; }
|
||||
.list-empty { text-align: center; color: #6b7280; font-size: 0.9rem; }
|
||||
|
||||
/* ── Bottom sheet ── */
|
||||
|
||||
.bottom-sheet { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 200; display: flex; align-items: flex-end; }
|
||||
.sheet-content { background: white; border-radius: 16px 16px 0 0; padding: 16px 20px 32px; width: 100%; display: flex; flex-direction: column; gap: 12px; max-height: 80vh; overflow-y: auto; }
|
||||
.sheet-handle { width: 36px; height: 4px; background: #d1d5db; border-radius: 2px; align-self: center; margin-bottom: 4px; }
|
||||
.sheet-name { font-size: 1.1rem; font-weight: 700; color: #1a1a2e; }
|
||||
.sheet-section { display: flex; flex-direction: column; gap: 4px; }
|
||||
.sheet-label { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: #6b7280; }
|
||||
.sheet-text { font-size: 0.9rem; color: #374151; margin: 0; line-height: 1.5; }
|
||||
.sheet-tags { display: flex; flex-wrap: wrap; gap: 6px; }
|
||||
.sheet-tag { font-size: 0.75rem; background: #f3f4f6; color: #374151; padding: 2px 8px; border-radius: 12px; }
|
||||
.sheet-edit-btn { display: block; text-align: center; background: #1B4436; color: white; border-radius: 8px; padding: 12px; text-decoration: none; font-weight: 600; }
|
||||
.sheet-close { background: transparent; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px; color: #6b7280; cursor: pointer; font-size: 0.875rem; }
|
||||
.sheet-enter-active, .sheet-leave-active { transition: opacity 0.2s; }
|
||||
.sheet-enter-from, .sheet-leave-to { opacity: 0; }
|
||||
|
||||
/* ── QR link ── */
|
||||
|
||||
.qr-link {
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
text-decoration: none;
|
||||
align-self: flex-end;
|
||||
}
|
||||
.qr-link:hover { color: #6b7280; }
|
||||
|
||||
/* ── Annuaire ── */
|
||||
|
||||
.annuaire-wrap {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.annuaire-scroll {
|
||||
overflow-x: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.annuaire-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
min-width: 480px;
|
||||
}
|
||||
|
||||
.annuaire-table thead tr {
|
||||
background: #f9fafb;
|
||||
border-bottom: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
.annuaire-table th {
|
||||
padding: 10px 14px;
|
||||
text-align: left;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: #6b7280;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.annuaire-table td {
|
||||
padding: 12px 14px;
|
||||
font-size: 0.875rem;
|
||||
color: #374151;
|
||||
vertical-align: top;
|
||||
border-bottom: 1px solid #f3f4f6;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.annuaire-row {
|
||||
cursor: pointer;
|
||||
transition: background 0.12s;
|
||||
}
|
||||
|
||||
.annuaire-row:hover { background: #f9fafb; }
|
||||
.annuaire-row:last-child td { border-bottom: none; }
|
||||
|
||||
.col-nom {
|
||||
position: sticky;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
background: #ffffff;
|
||||
font-weight: 600;
|
||||
color: #1a1a2e !important;
|
||||
white-space: nowrap;
|
||||
min-width: 80px;
|
||||
border-right: 2px solid #e5e7eb;
|
||||
box-shadow: 2px 0 6px rgba(0,0,0,0.06);
|
||||
}
|
||||
|
||||
.annuaire-row:hover .col-nom { background: #f9fafb; }
|
||||
thead tr .col-nom { background: #f9fafb; z-index: 3; }
|
||||
|
||||
.col-besoin { min-width: 200px; max-width: 260px; }
|
||||
.col-offre { min-width: 200px; max-width: 260px; }
|
||||
|
||||
.annuaire-hint {
|
||||
font-size: 0.75rem;
|
||||
color: #9ca3af;
|
||||
text-align: center;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.col-actions { width: 40px; text-align: center; }
|
||||
.delete-btn {
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: #ef4444;
|
||||
font-size: 1rem;
|
||||
padding: 4px 8px;
|
||||
border-radius: 4px;
|
||||
transition: background 0.1s;
|
||||
}
|
||||
.delete-btn:hover { background: #fef2f2; }
|
||||
|
||||
/* ── Mobile ── */
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.codev-carto {
|
||||
padding: 1rem 0.75rem 1.5rem;
|
||||
}
|
||||
|
||||
.carto-header h1 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
383
pages/codev/demo.vue
Normal file
383
pages/codev/demo.vue
Normal file
@@ -0,0 +1,383 @@
|
||||
<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>
|
||||
|
||||
<div class="codev-tabs">
|
||||
<button :class="{ active: tab === 'carto' }" @click="tab = 'carto'" type="button">Carto</button>
|
||||
<button :class="{ active: tab === 'annuaire' }" @click="tab = 'annuaire'" type="button">Annuaire</button>
|
||||
</div>
|
||||
|
||||
<div v-if="tab === 'carto'">
|
||||
<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>
|
||||
|
||||
<!-- Boutons matching -->
|
||||
<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
|
||||
v-if="mode !== 'none'"
|
||||
class="reset"
|
||||
@click="setMode('none')"
|
||||
type="button"
|
||||
>
|
||||
Effacer
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else-if="tab === 'annuaire'" class="annuaire-wrap">
|
||||
<div class="annuaire-scroll">
|
||||
<table class="annuaire-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="col-nom">Prénom</th>
|
||||
<th class="col-besoin">Besoin</th>
|
||||
<th class="col-offre">Ce que j'offre</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr v-for="f in fiches" :key="f.id" class="annuaire-row">
|
||||
<td class="col-nom">{{ f.nom }}</td>
|
||||
<td class="col-besoin">{{ f.besoin }}</td>
|
||||
<td class="col-offre">{{ f.offre }}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { CodevFiche, CodevMatch } from '~/types/codev'
|
||||
import { computeMatches } from '~/utils/codev/matching'
|
||||
|
||||
const tab = ref<'carto' | 'annuaire'>('carto')
|
||||
|
||||
// 10 fiches sans hashtags — textes enrichis pour que scoreDirect discrimine bien les 3 modes :
|
||||
//
|
||||
// Solution (scoreDirect besoinA vs offreB) :
|
||||
// Sami(besoin vendre formation) -> Ines(offre vente formations) ✓
|
||||
// Nael(besoin site web formation) -> Sami(offre developpement web) ✓
|
||||
// Eva(besoin coaching vente) -> Ines(offre vente formations) ✓
|
||||
// Tom(besoin tiers-lieu) -> Zoe(offre facilitation tiers-lieux) ✓
|
||||
//
|
||||
// Alliance (besoins similaires) :
|
||||
// Lea + Maya (coaching, lancer, offre) ✓
|
||||
// Tom + Zoe (tiers-lieu, co-creer) ✓
|
||||
// Sami + Kenji (vendre, formations) ✓
|
||||
//
|
||||
// Surprise (offres similaires) :
|
||||
// Lea + Zoe (facilitation, groupes) ✓
|
||||
// Tom + Roman (architecture) ✓
|
||||
// Ines + Nael (marketing, formations) ✓
|
||||
|
||||
const FICHES_DEMO: CodevFiche[] = [
|
||||
{
|
||||
id: 1, nom: 'Lea',
|
||||
besoin: 'Structurer et lancer mon offre de coaching professionnel cet automne',
|
||||
offre: 'Facilitation de groupes et animation de cercles de parole',
|
||||
hashtags: [],
|
||||
created_at: '2026-05-08T10:00:00Z',
|
||||
},
|
||||
{
|
||||
id: 2, nom: 'Sami',
|
||||
besoin: 'Vendre ma formation en ligne et attirer mes premiers clients',
|
||||
offre: 'Developpement web sur mesure, creation de sites et applications',
|
||||
hashtags: [],
|
||||
created_at: '2026-05-08T10:01:00Z',
|
||||
},
|
||||
{
|
||||
id: 3, nom: 'Ines',
|
||||
besoin: 'Ameliorer la facilitation de mes ateliers collaboratifs',
|
||||
offre: 'Vente de formations en ligne et marketing pour formateurs',
|
||||
hashtags: [],
|
||||
created_at: '2026-05-08T10:02:00Z',
|
||||
},
|
||||
{
|
||||
id: 4, nom: 'Tom',
|
||||
besoin: 'Trouver des associes pour co-creer un tiers-lieu rural',
|
||||
offre: 'Architecture bioclimatique et eco-construction pour tiers-lieux',
|
||||
hashtags: [],
|
||||
created_at: '2026-05-08T10:03:00Z',
|
||||
},
|
||||
{
|
||||
id: 5, nom: 'Maya',
|
||||
besoin: 'Creer et lancer mon offre de coaching en transition professionnelle',
|
||||
offre: 'Accompagnement coaching de carriere et transitions professionnelles',
|
||||
hashtags: [],
|
||||
created_at: '2026-05-08T10:04:00Z',
|
||||
},
|
||||
{
|
||||
id: 6, nom: 'Kenji',
|
||||
besoin: 'Apprendre a vendre mes formations sans pression commerciale',
|
||||
offre: 'Photographie professionnelle et direction artistique editoriale',
|
||||
hashtags: [],
|
||||
created_at: '2026-05-08T10:05:00Z',
|
||||
},
|
||||
{
|
||||
id: 7, nom: 'Zoe',
|
||||
besoin: 'Co-creer un tiers-lieu avec des porteurs de projet alignes',
|
||||
offre: 'Facilitation de collectifs et animation en intelligence collective',
|
||||
hashtags: [],
|
||||
created_at: '2026-05-08T10:06:00Z',
|
||||
},
|
||||
{
|
||||
id: 8, nom: 'Nael',
|
||||
besoin: 'Creer un site web pour presenter et vendre ma formation',
|
||||
offre: 'Strategie marketing digital et lancement de produits en ligne',
|
||||
hashtags: [],
|
||||
created_at: '2026-05-08T10:07:00Z',
|
||||
},
|
||||
{
|
||||
id: 9, nom: 'Eva',
|
||||
besoin: 'Lancer mon coaching avec une page de vente qui convertit',
|
||||
offre: 'Ecriture longue forme, articles de fond et tribunes editoriales',
|
||||
hashtags: [],
|
||||
created_at: '2026-05-08T10:08:00Z',
|
||||
},
|
||||
{
|
||||
id: 10, nom: 'Roman',
|
||||
besoin: 'Ecrire de meilleurs articles pour mon blog et ma newsletter',
|
||||
offre: 'Architecture technique et plans pour renovation energetique',
|
||||
hashtags: [],
|
||||
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, 0.12)
|
||||
}
|
||||
}
|
||||
</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>
|
||||
415
pages/codev/fiche.vue
Normal file
415
pages/codev/fiche.vue
Normal file
@@ -0,0 +1,415 @@
|
||||
<template>
|
||||
<div class="fiche-page">
|
||||
<div class="fiche-inner">
|
||||
|
||||
<!-- En-tête -->
|
||||
<div class="fiche-header">
|
||||
<NuxtLink to="/codev/carto" class="back-link">← Retour à la carte</NuxtLink>
|
||||
<h1>{{ isEdit ? 'Modifier ma fiche' : 'Ma fiche' }}</h1>
|
||||
<p class="fiche-lead">3 lignes pour te présenter. Le reste se passe entre nous.</p>
|
||||
</div>
|
||||
|
||||
<!-- Formulaire -->
|
||||
<form class="fiche-form" @submit.prevent="submit" novalidate>
|
||||
|
||||
<!-- Nom -->
|
||||
<div class="field-group">
|
||||
<label for="nom">
|
||||
Prénom <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
id="nom"
|
||||
v-model="form.nom"
|
||||
type="text"
|
||||
placeholder="Ex : Camille"
|
||||
required
|
||||
minlength="2"
|
||||
maxlength="50"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Besoin -->
|
||||
<div class="field-group">
|
||||
<div class="label-row">
|
||||
<label for="besoin">
|
||||
Mon besoin actuel <span class="required">*</span>
|
||||
</label>
|
||||
<button type="button" class="tooltip-trigger" @click="toggleTip('besoin')" aria-label="C'est quoi un besoin ?">?</button>
|
||||
</div>
|
||||
<details v-if="activeTip === 'besoin'" class="tooltip-block" open>
|
||||
<summary class="sr-only">Aide</summary>
|
||||
<p>Un besoin, c'est ce qui te manque pour avancer. Ca peut etre concret (un coup de main sur un dossier) ou plus large (clarifier ou tu vas). Pas grave si c'est flou - la rencontre IRL aide a le preciser.</p>
|
||||
</details>
|
||||
<textarea
|
||||
id="besoin"
|
||||
v-model="form.besoin"
|
||||
rows="3"
|
||||
placeholder="Ex : J'ai besoin d'aide pour structurer mon offre de prestation"
|
||||
required
|
||||
minlength="5"
|
||||
maxlength="300"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<span class="char-count" :class="{ 'char-warn': form.besoin.length > 260 }">
|
||||
{{ form.besoin.length }}/300
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Offre -->
|
||||
<div class="field-group">
|
||||
<div class="label-row">
|
||||
<label for="offre">
|
||||
Ce que j'offre a la communaute <span class="required">*</span>
|
||||
</label>
|
||||
<button type="button" class="tooltip-trigger" @click="toggleTip('offre')" aria-label="C'est quoi une offre ?">?</button>
|
||||
</div>
|
||||
<details v-if="activeTip === 'offre'" class="tooltip-block" open>
|
||||
<summary class="sr-only">Aide</summary>
|
||||
<p>Une offre, c'est une competence, une experience ou une qualite que tu peux partager. Ce que les autres viennent chercher chez toi naturellement.</p>
|
||||
</details>
|
||||
<textarea
|
||||
id="offre"
|
||||
v-model="form.offre"
|
||||
rows="3"
|
||||
placeholder="Ex : Je peux partager mon expérience en facilitation de groupe"
|
||||
required
|
||||
minlength="5"
|
||||
maxlength="300"
|
||||
:disabled="loading"
|
||||
/>
|
||||
<span class="char-count" :class="{ 'char-warn': form.offre.length > 260 }">
|
||||
{{ form.offre.length }}/300
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Hashtags -->
|
||||
<div class="field-group">
|
||||
<label for="hashtags">
|
||||
Mots-clés
|
||||
<span class="label-hint">(optionnel, 3 max, séparés par des virgules)</span>
|
||||
</label>
|
||||
<input
|
||||
id="hashtags"
|
||||
v-model="form.hashtagsRaw"
|
||||
type="text"
|
||||
placeholder="Ex : business, écriture, écologie"
|
||||
maxlength="120"
|
||||
:disabled="loading"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Erreur serveur -->
|
||||
<div v-if="error" class="server-error" role="alert">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<!-- Bouton -->
|
||||
<button type="submit" class="submit-btn" :disabled="loading">
|
||||
{{ isEdit ? (loading ? 'Modification...' : 'Enregistrer les modifications') : (loading ? 'Envoi en cours...' : 'Ajouter ma fiche') }}
|
||||
</button>
|
||||
|
||||
<NuxtLink to="/codev/carto" class="skip-link">
|
||||
Voir la carte sans créer de fiche →
|
||||
</NuxtLink>
|
||||
|
||||
</form>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const route = useRoute()
|
||||
const editId = computed(() => route.query.id ? Number(route.query.id) : null)
|
||||
const isEdit = computed(() => editId.value !== null)
|
||||
|
||||
const form = ref({ nom: '', besoin: '', offre: '', hashtagsRaw: '' })
|
||||
const error = ref('')
|
||||
const loading = ref(false)
|
||||
const activeTip = ref<'besoin' | 'offre' | null>(null)
|
||||
|
||||
useHead({ title: computed(() => isEdit.value ? 'Modifier ma fiche — Co-développement' : 'Ma fiche — Co-développement') })
|
||||
|
||||
onMounted(async () => {
|
||||
if (!isEdit.value) return
|
||||
try {
|
||||
const fiche = await $fetch<any>(`/api/codev/fiches/${editId.value}`)
|
||||
form.value.nom = fiche.nom
|
||||
form.value.besoin = fiche.besoin
|
||||
form.value.offre = fiche.offre
|
||||
form.value.hashtagsRaw = fiche.hashtags.join(', ')
|
||||
} catch {
|
||||
error.value = 'Impossible de charger la fiche, elle a peut-etre ete supprimee.'
|
||||
}
|
||||
})
|
||||
|
||||
function toggleTip(field: 'besoin' | 'offre') {
|
||||
activeTip.value = activeTip.value === field ? null : field
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
error.value = ''
|
||||
loading.value = true
|
||||
try {
|
||||
const hashtags = form.value.hashtagsRaw
|
||||
.split(',')
|
||||
.map((h) => h.trim().toLowerCase().replace(/^#/, ''))
|
||||
.filter(Boolean)
|
||||
.slice(0, 3)
|
||||
|
||||
const payload = {
|
||||
nom: form.value.nom,
|
||||
besoin: form.value.besoin,
|
||||
offre: form.value.offre,
|
||||
hashtags,
|
||||
}
|
||||
|
||||
if (isEdit.value) {
|
||||
await $fetch(`/api/codev/fiches/${editId.value}`, { method: 'PATCH', body: payload })
|
||||
} else {
|
||||
await $fetch('/api/codev/fiches', { method: 'POST', body: payload })
|
||||
}
|
||||
await navigateTo('/codev/carto')
|
||||
} catch (e: any) {
|
||||
error.value = e?.data?.message || e?.statusMessage || 'Erreur, reessaie'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ── Layout ── */
|
||||
|
||||
.fiche-page {
|
||||
min-height: 100vh;
|
||||
background: var(--nav-bg, #fafafa);
|
||||
padding: 1.5rem 1rem 4rem;
|
||||
}
|
||||
|
||||
.fiche-inner {
|
||||
max-width: 480px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.75rem;
|
||||
}
|
||||
|
||||
/* ── En-tête ── */
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
font-size: 0.875rem;
|
||||
color: var(--nav-text-muted, #6b7280);
|
||||
text-decoration: none;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: var(--nav-primary-solid, #1B4436);
|
||||
}
|
||||
|
||||
.fiche-header h1 {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--nav-text, #1a1a2e);
|
||||
margin: 0 0 0.375rem;
|
||||
}
|
||||
|
||||
.fiche-lead {
|
||||
font-size: 0.9rem;
|
||||
color: var(--nav-text-muted, #6b7280);
|
||||
margin: 0;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
/* ── Formulaire ── */
|
||||
|
||||
.fiche-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
/* ── Champ ── */
|
||||
|
||||
.field-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.375rem;
|
||||
}
|
||||
|
||||
.field-group label {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
color: var(--nav-text, #1a1a2e);
|
||||
}
|
||||
|
||||
.label-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.label-hint {
|
||||
font-weight: 400;
|
||||
font-size: 0.8rem;
|
||||
color: var(--nav-text-muted, #6b7280);
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.required {
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
.field-group input[type="text"],
|
||||
.field-group input[type="password"],
|
||||
.field-group textarea {
|
||||
width: 100%;
|
||||
padding: 0.75rem 0.875rem;
|
||||
border: 1px solid var(--border-color, #d0d4dc);
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
color: var(--nav-text, #1a1a2e);
|
||||
background: var(--nav-surface, #ffffff);
|
||||
font-family: inherit;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.field-group input:focus,
|
||||
.field-group textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--nav-primary-solid, #1B4436);
|
||||
box-shadow: 0 0 0 2px rgba(27, 68, 54, 0.15);
|
||||
}
|
||||
|
||||
.field-group input:disabled,
|
||||
.field-group textarea:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.field-group textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
.char-count {
|
||||
font-size: 0.75rem;
|
||||
color: var(--nav-text-muted, #6b7280);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.char-warn {
|
||||
color: #e67e22;
|
||||
}
|
||||
|
||||
/* ── Tooltip ── */
|
||||
|
||||
.tooltip-trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: var(--nav-surface, #ffffff);
|
||||
border: 1px solid var(--border-color, #d0d4dc);
|
||||
border-radius: 50%;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--nav-text-muted, #6b7280);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
line-height: 1;
|
||||
flex-shrink: 0;
|
||||
transition: border-color 0.15s, color 0.15s;
|
||||
}
|
||||
|
||||
.tooltip-trigger:hover {
|
||||
border-color: var(--nav-primary-solid, #1B4436);
|
||||
color: var(--nav-primary-solid, #1B4436);
|
||||
}
|
||||
|
||||
.tooltip-block {
|
||||
background: var(--nav-surface, #ffffff);
|
||||
border: 1px solid var(--border-color, #d0d4dc);
|
||||
border-radius: 8px;
|
||||
padding: 0.75rem 0.875rem;
|
||||
font-size: 0.85rem;
|
||||
color: var(--nav-text-muted, #6b7280);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.tooltip-block p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* ── Erreur serveur ── */
|
||||
|
||||
.server-error {
|
||||
padding: 0.75rem 0.875rem;
|
||||
background: #fdf0ee;
|
||||
border: 1px solid #e74c3c;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
color: #c0392b;
|
||||
}
|
||||
|
||||
/* ── Bouton ── */
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
background: var(--nav-primary-solid, #1B4436);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: opacity 0.15s;
|
||||
margin-top: 0.25rem;
|
||||
}
|
||||
|
||||
.submit-btn:hover:not(:disabled) {
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
.submit-btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.skip-link {
|
||||
display: block;
|
||||
text-align: center;
|
||||
font-size: 0.825rem;
|
||||
color: var(--nav-text-muted, #9ca3af);
|
||||
text-decoration: none;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
.skip-link:hover { color: var(--nav-text, #1a1a2e); }
|
||||
|
||||
/* ── Responsive ── */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.fiche-page {
|
||||
padding: 1.25rem 1rem 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
217
pages/codev/index.vue
Normal file
217
pages/codev/index.vue
Normal file
@@ -0,0 +1,217 @@
|
||||
<template>
|
||||
<div class="lock-page">
|
||||
<div class="lock-inner">
|
||||
|
||||
<div class="lock-header">
|
||||
<h1>Co-développement</h1>
|
||||
<p class="lock-subtitle">Entraide entre pairs</p>
|
||||
<p class="lock-intro">Cet espace est un cercle. Pour entrer, il y a un mot.</p>
|
||||
</div>
|
||||
|
||||
<form class="lock-form" @submit.prevent="submit" novalidate>
|
||||
|
||||
<div class="field-group">
|
||||
<input
|
||||
id="password"
|
||||
v-model="password"
|
||||
type="password"
|
||||
placeholder="Mot de passe"
|
||||
autocomplete="current-password"
|
||||
required
|
||||
:disabled="loading"
|
||||
class="lock-input"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div v-if="error" class="lock-error" role="alert">
|
||||
{{ error }}
|
||||
</div>
|
||||
|
||||
<button type="submit" class="lock-btn" :disabled="loading || !password">
|
||||
{{ loading ? 'Vérification...' : 'Entrer' }}
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
<div class="lock-footer">
|
||||
<NuxtLink to="/codev/demo" class="demo-link">Voir l'exemple →</NuxtLink>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const password = ref('')
|
||||
const error = ref('')
|
||||
const loading = ref(false)
|
||||
|
||||
useHead({ title: 'Co-développement — Entraide entre pairs' })
|
||||
|
||||
async function submit() {
|
||||
error.value = ''
|
||||
loading.value = true
|
||||
try {
|
||||
await $fetch('/api/codev/auth', {
|
||||
method: 'POST',
|
||||
body: { password: password.value },
|
||||
})
|
||||
await navigateTo('/codev/fiche')
|
||||
} catch (e: any) {
|
||||
error.value = e?.statusMessage || 'Mauvais mot de passe'
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* ── Layout ── */
|
||||
|
||||
.lock-page {
|
||||
min-height: 100vh;
|
||||
background: var(--nav-bg, #fafafa);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1.5rem 1rem;
|
||||
}
|
||||
|
||||
.lock-inner {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
/* ── En-tête ── */
|
||||
|
||||
.lock-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.lock-header h1 {
|
||||
font-size: 1.75rem;
|
||||
font-weight: 700;
|
||||
color: var(--nav-text, #1a1a2e);
|
||||
margin: 0 0 0.375rem;
|
||||
}
|
||||
|
||||
.lock-subtitle {
|
||||
font-size: 1rem;
|
||||
color: var(--nav-text-muted, #6b7280);
|
||||
margin: 0 0 1rem;
|
||||
}
|
||||
|
||||
.lock-intro {
|
||||
font-size: 0.9rem;
|
||||
color: var(--nav-text-muted, #6b7280);
|
||||
line-height: 1.5;
|
||||
margin: 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* ── Formulaire ── */
|
||||
|
||||
.lock-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.875rem;
|
||||
}
|
||||
|
||||
.field-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.lock-input {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
border: 1px solid var(--border-color, #d0d4dc);
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
color: var(--nav-text, #1a1a2e);
|
||||
background: var(--nav-surface, #ffffff);
|
||||
font-family: inherit;
|
||||
text-align: center;
|
||||
letter-spacing: 0.1em;
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.lock-input:focus {
|
||||
outline: none;
|
||||
border-color: var(--nav-primary-solid, #1B4436);
|
||||
box-shadow: 0 0 0 2px rgba(27, 68, 54, 0.15);
|
||||
}
|
||||
|
||||
.lock-input:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Erreur ── */
|
||||
|
||||
.lock-error {
|
||||
padding: 0.625rem 0.875rem;
|
||||
background: #fdf0ee;
|
||||
border: 1px solid #e74c3c;
|
||||
border-radius: 8px;
|
||||
font-size: 0.875rem;
|
||||
color: #c0392b;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ── Bouton ── */
|
||||
|
||||
.lock-btn {
|
||||
width: 100%;
|
||||
padding: 0.875rem 1rem;
|
||||
background: var(--nav-primary-solid, #1B4436);
|
||||
color: #ffffff;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
font-family: inherit;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
|
||||
.lock-btn:hover:not(:disabled) {
|
||||
opacity: 0.88;
|
||||
}
|
||||
|
||||
.lock-btn:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Pied de page ── */
|
||||
|
||||
.lock-footer {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-link {
|
||||
font-size: 0.875rem;
|
||||
color: var(--nav-text-muted, #6b7280);
|
||||
text-decoration: none;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
|
||||
.demo-link:hover {
|
||||
color: var(--nav-primary-solid, #1B4436);
|
||||
}
|
||||
|
||||
/* ── Responsive ── */
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.lock-page {
|
||||
padding: 1.25rem 1rem 2.5rem;
|
||||
align-items: flex-start;
|
||||
padding-top: 3rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
94
pages/codev/qr.vue
Normal file
94
pages/codev/qr.vue
Normal file
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<div class="qr-page">
|
||||
<div class="qr-card">
|
||||
<h1>Co-développement</h1>
|
||||
<p class="qr-subtitle">Scanne pour rejoindre la session</p>
|
||||
|
||||
<img
|
||||
:src="`https://api.qrserver.com/v1/create-qr-code/?size=280x280&data=${encodeURIComponent(APP_URL)}&bgcolor=ffffff&color=1B4436&margin=2`"
|
||||
alt="QR code aep.trans-former.fr/codev"
|
||||
class="qr-img"
|
||||
width="280"
|
||||
height="280"
|
||||
/>
|
||||
|
||||
<p class="qr-url">{{ APP_URL }}</p>
|
||||
<p class="qr-password">Mot de passe : <strong>merci</strong></p>
|
||||
|
||||
<a :href="`https://api.qrserver.com/v1/create-qr-code/?size=600x600&data=${encodeURIComponent(APP_URL)}&bgcolor=ffffff&color=1B4436&margin=2`"
|
||||
download="codev-qr.png"
|
||||
class="qr-download"
|
||||
target="_blank"
|
||||
>
|
||||
Télécharger le QR code
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const APP_URL = 'https://aep.trans-former.fr/codev'
|
||||
useHead({ title: 'QR Code — Co-développement' })
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.qr-page {
|
||||
min-height: 100vh;
|
||||
background: var(--nav-bg, #fafafa);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 2rem 1rem;
|
||||
}
|
||||
.qr-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
padding: 2rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
max-width: 360px;
|
||||
width: 100%;
|
||||
box-shadow: 0 4px 24px rgba(0,0,0,0.08);
|
||||
text-align: center;
|
||||
}
|
||||
.qr-card h1 {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 700;
|
||||
color: #1a1a2e;
|
||||
margin: 0;
|
||||
}
|
||||
.qr-subtitle {
|
||||
font-size: 0.9rem;
|
||||
color: #6b7280;
|
||||
margin: 0;
|
||||
}
|
||||
.qr-img {
|
||||
border-radius: 8px;
|
||||
border: 2px solid #e5e7eb;
|
||||
}
|
||||
.qr-url {
|
||||
font-size: 0.8rem;
|
||||
color: #9ca3af;
|
||||
margin: 0;
|
||||
font-family: monospace;
|
||||
}
|
||||
.qr-password {
|
||||
font-size: 0.95rem;
|
||||
color: #374151;
|
||||
margin: 0;
|
||||
}
|
||||
.qr-download {
|
||||
display: inline-block;
|
||||
padding: 10px 20px;
|
||||
background: #1B4436;
|
||||
color: white;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
transition: opacity 0.15s;
|
||||
}
|
||||
.qr-download:hover { opacity: 0.88; }
|
||||
</style>
|
||||
@@ -40,10 +40,28 @@
|
||||
Mode dev — données seed
|
||||
</div>
|
||||
|
||||
<!-- ── VUE DESKTOP : Métropole pleine largeur + DOM-TOM row en bas ── -->
|
||||
<!-- ── VUE DESKTOP : Onglets Métropole / Outre-mer ── -->
|
||||
<div class="hidden lg:flex lg:flex-1 lg:flex-col lg:overflow-hidden">
|
||||
<!-- Carte Métropole — pleine largeur -->
|
||||
<div class="flex flex-col flex-1 overflow-hidden">
|
||||
<!-- Barre onglets desktop -->
|
||||
<div class="shrink-0 flex" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
|
||||
<button
|
||||
class="px-5 py-2 text-sm font-medium transition-colors"
|
||||
:style="desktopMapView === 'metropole'
|
||||
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
|
||||
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
|
||||
@click="desktopMapView = 'metropole'"
|
||||
>Métropolitain</button>
|
||||
<button
|
||||
class="px-5 py-2 text-sm font-medium transition-colors"
|
||||
:style="desktopMapView === 'outremer'
|
||||
? 'color: var(--nav-text); border-bottom: 2px solid var(--nav-primary-solid);'
|
||||
: 'color: var(--nav-text-muted); border-bottom: 2px solid transparent;'"
|
||||
@click="desktopMapView = 'outremer'"
|
||||
>Outre-mer</button>
|
||||
</div>
|
||||
|
||||
<!-- Carte Métropole desktop -->
|
||||
<div v-show="desktopMapView === 'metropole'" class="flex-1 flex flex-col overflow-hidden">
|
||||
<div class="relative flex-1" style="min-height: 200px;">
|
||||
<ClientOnly>
|
||||
<NavMap
|
||||
@@ -53,38 +71,28 @@
|
||||
@select-org="onSelectOrg"
|
||||
/>
|
||||
<template #fallback>
|
||||
<div
|
||||
class="w-full h-full flex items-center justify-center"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
|
||||
>
|
||||
Chargement de la carte…
|
||||
</div>
|
||||
<div class="w-full h-full flex items-center justify-center" style="background: var(--nav-bg-alt); color: var(--nav-text-muted);">Chargement de la carte…</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
<ChatbotPlaceholder @highlightOrgs="onHighlightOrgs" />
|
||||
</div>
|
||||
|
||||
<!-- Bandeau DOM-TOM — row horizontale pleine largeur, hauteur fixe -->
|
||||
<div
|
||||
class="shrink-0"
|
||||
style="height: 140px; border-top: 1px solid var(--nav-bg-alt);"
|
||||
>
|
||||
<ClientOnly>
|
||||
<OutremerMap
|
||||
:orgs="outremerOrgs"
|
||||
:selectedId="selectedId"
|
||||
@select-org="onSelectOrg"
|
||||
/>
|
||||
<template #fallback>
|
||||
<div
|
||||
class="flex items-center justify-center h-full text-sm"
|
||||
style="color: var(--nav-text-muted);"
|
||||
>
|
||||
Chargement…
|
||||
</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
<!-- Carte Outre-mer desktop -->
|
||||
<div v-show="desktopMapView === 'outremer'" class="flex-1 flex flex-col overflow-hidden">
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<ClientOnly>
|
||||
<OutremerMap
|
||||
:orgs="outremerOrgs"
|
||||
:selectedId="selectedId"
|
||||
@select-org="onSelectOrg"
|
||||
/>
|
||||
<template #fallback>
|
||||
<div class="flex items-center justify-center h-full text-sm" style="color: var(--nav-text-muted);">Chargement…</div>
|
||||
</template>
|
||||
</ClientOnly>
|
||||
</div>
|
||||
<ChatbotPlaceholder @highlightOrgs="onHighlightOrgs" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -330,6 +338,7 @@ const territoireMode = ref<string>(
|
||||
(route.query.mode as string) === 'outremer' ? 'outremer' : 'metropole'
|
||||
)
|
||||
|
||||
const desktopMapView = ref<'metropole' | 'outremer'>('metropole')
|
||||
const selectedId = ref<number | null>(null)
|
||||
const chatbotOpen = ref(false)
|
||||
const ficheModalOpen = ref(false)
|
||||
|
||||
472
pages/trouver-du-taf.vue
Normal file
472
pages/trouver-du-taf.vue
Normal file
@@ -0,0 +1,472 @@
|
||||
<template>
|
||||
<div class="taff-page" style="background: var(--nav-bg); min-height: 100%;">
|
||||
|
||||
<!-- ── Intro ─────────────────────────────────────────────────────── -->
|
||||
<div class="taff-header">
|
||||
<div class="taff-header-inner">
|
||||
<h1 class="taff-title">Trouver du taf en archi</h1>
|
||||
<p class="taff-subtitle">
|
||||
Annuaire critique des plateformes de mise en relation archi ↔ particulier.
|
||||
Évaluées sur 5 axes éthiques — rémunération, transparence, pratiques pro, écologie, qualité du matching.
|
||||
Cible : archi freelance indépendant en France.
|
||||
</p>
|
||||
<div class="taff-stats">
|
||||
<span class="taff-stat" style="color: #3d5534;">
|
||||
<span class="taff-stat-dot" style="background: #5a7a4a;"></span>
|
||||
{{ stats.recommande }} Recommandé{{ stats.recommande > 1 ? 's' : '' }} AEP
|
||||
</span>
|
||||
<span class="taff-stat" style="color: #7a5f2a;">
|
||||
<span class="taff-stat-dot" style="background: #c4a472;"></span>
|
||||
{{ stats.sous_reserve }} Sous réserve
|
||||
</span>
|
||||
<span class="taff-stat" style="color: #7a3322;">
|
||||
<span class="taff-stat-dot" style="background: #a85d3e;"></span>
|
||||
{{ stats.a_eviter }} À éviter
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Filtres ─────────────────────────────────────────────────── -->
|
||||
<div class="taff-filters-bar">
|
||||
<div class="taff-filters-inner">
|
||||
|
||||
<!-- Onglets B2C / AO publics -->
|
||||
<div class="taff-tabs">
|
||||
<button
|
||||
type="button"
|
||||
class="taff-tab"
|
||||
:class="{ 'taff-tab--active': activeTab === 'b2c' }"
|
||||
@click="activeTab = 'b2c'; resetFilters()"
|
||||
>
|
||||
Plateformes B2C
|
||||
<span class="taff-tab-count">{{ b2cCount }}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="taff-tab"
|
||||
:class="{ 'taff-tab--active': activeTab === 'ao' }"
|
||||
@click="activeTab = 'ao'; resetFilters()"
|
||||
>
|
||||
Appels d'offres publics
|
||||
<span class="taff-tab-count">{{ aoCount }}</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filtres tag global -->
|
||||
<div class="taff-filter-group">
|
||||
<button
|
||||
v-for="t in TAG_OPTIONS"
|
||||
:key="t.value"
|
||||
type="button"
|
||||
class="taff-filter-btn"
|
||||
:class="{ 'taff-filter-btn--active': filterTag === t.value }"
|
||||
:style="filterTag === t.value
|
||||
? `background: ${t.bg}; color: ${t.text}; border-color: ${t.accent};`
|
||||
: ''"
|
||||
@click="filterTag = filterTag === t.value ? '' : t.value"
|
||||
>
|
||||
{{ t.emoji }} {{ t.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Filtre secteur (B2C uniquement) -->
|
||||
<div v-if="activeTab === 'b2c'" class="taff-filter-group">
|
||||
<button
|
||||
v-for="s in SECTEUR_OPTIONS"
|
||||
:key="s.value"
|
||||
type="button"
|
||||
class="taff-filter-btn"
|
||||
:class="{ 'taff-filter-btn--active': filterSecteur === s.value }"
|
||||
@click="filterSecteur = filterSecteur === s.value ? '' : s.value"
|
||||
>
|
||||
{{ s.label }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Recherche -->
|
||||
<label class="taff-search">
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="color: var(--nav-text-muted); flex-shrink: 0;">
|
||||
<circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
|
||||
</svg>
|
||||
<input
|
||||
v-model="search"
|
||||
type="search"
|
||||
placeholder="Rechercher..."
|
||||
class="taff-search-input"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<button v-if="search" type="button" @click.stop="search = ''" class="taff-search-clear" aria-label="Effacer">
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</label>
|
||||
|
||||
<!-- Compteur + reset -->
|
||||
<div class="flex items-center gap-3 ml-auto">
|
||||
<span class="text-xs font-bold uppercase tracking-widest" style="color: var(--nav-text-muted);">
|
||||
{{ filtered.length }} résultat{{ filtered.length > 1 ? 's' : '' }}
|
||||
</span>
|
||||
<button
|
||||
v-if="hasFilters"
|
||||
type="button"
|
||||
class="text-xs underline hover:opacity-70"
|
||||
style="color: var(--nav-text-muted);"
|
||||
@click="resetFilters"
|
||||
>Effacer</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Grille ─────────────────────────────────────────────────── -->
|
||||
<div class="taff-grid-wrap">
|
||||
<div v-if="filtered.length === 0" class="taff-empty">
|
||||
<p style="color: var(--nav-text-muted);">Aucune plateforme ne correspond à ces filtres.</p>
|
||||
<button type="button" class="taff-reset-btn" @click="resetFilters">Réinitialiser les filtres</button>
|
||||
</div>
|
||||
<div v-else class="taff-grid">
|
||||
<PlatformeTaffCard
|
||||
v-for="p in filtered"
|
||||
:key="p.id"
|
||||
:plateforme="p"
|
||||
@open="openModal"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- ── Note juridique ────────────────────────────────────────── -->
|
||||
<div class="taff-disclaimer">
|
||||
<p>
|
||||
Évaluations basées sur des données publiques (CGV, Trustpilot, presse spécialisée) collectées en mai 2026.
|
||||
AEP est un méta-annuaire critique, pas un opérateur. Les fiches « À éviter ❌ » sont validées manuellement avant publication.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- ── Modal ─────────────────────────────────────────────────── -->
|
||||
<Teleport to="body">
|
||||
<Transition name="taff-backdrop">
|
||||
<div
|
||||
v-if="modalPlateforme"
|
||||
class="fixed inset-0 z-[10000]"
|
||||
style="background: rgba(26,34,56,0.55);"
|
||||
@click="closeModal"
|
||||
aria-hidden="true"
|
||||
/>
|
||||
</Transition>
|
||||
<Transition name="taff-modal">
|
||||
<div
|
||||
v-if="modalPlateforme"
|
||||
class="fixed z-[10001] top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 flex flex-col"
|
||||
style="width: min(760px, 92vw); max-height: 90vh; background: var(--nav-bg); border-radius: 16px; box-shadow: 0 16px 64px rgba(26,34,56,0.28); overflow: hidden;"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
:aria-label="modalPlateforme.nom"
|
||||
tabindex="-1"
|
||||
@keydown.esc="closeModal"
|
||||
>
|
||||
<!-- Header -->
|
||||
<div class="flex items-center justify-between px-5 py-3 shrink-0" style="background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt);">
|
||||
<div class="flex items-center gap-2 min-w-0">
|
||||
<span
|
||||
class="inline-flex items-center gap-1 px-2.5 py-1 rounded-full text-sm font-semibold shrink-0"
|
||||
:style="`background: ${modalTagConfig.bg}; color: ${modalTagConfig.text};`"
|
||||
>{{ modalTagConfig.emoji }} {{ modalTagConfig.label }}</span>
|
||||
<span class="font-semibold text-base truncate" style="color: var(--nav-text);">{{ modalPlateforme.nom }}</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2 shrink-0 ml-3">
|
||||
<a
|
||||
:href="modalPlateforme.url"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-xs font-medium transition-opacity hover:opacity-70"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text);"
|
||||
>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
|
||||
<path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
|
||||
<polyline points="15 3 21 3 21 9"/>
|
||||
<line x1="10" y1="14" x2="21" y2="3"/>
|
||||
</svg>
|
||||
Visiter
|
||||
</a>
|
||||
<button
|
||||
@click="closeModal"
|
||||
class="w-8 h-8 rounded-lg flex items-center justify-center hover:opacity-70 transition-opacity"
|
||||
style="background: var(--nav-bg-alt); color: var(--nav-text-muted);"
|
||||
aria-label="Fermer"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="overflow-y-auto flex-1 px-5 py-5 space-y-5">
|
||||
|
||||
<!-- Scoring axes -->
|
||||
<div>
|
||||
<div class="modal-label">Évaluation AEP — 5 axes</div>
|
||||
<div class="modal-axes">
|
||||
<div
|
||||
v-for="axe in AXES"
|
||||
:key="axe.id"
|
||||
v-show="modalPlateforme.scoring[axe.id] !== null"
|
||||
class="modal-axe"
|
||||
:style="`background: ${axeScoreBg(modalPlateforme.scoring[axe.id] as string)};`"
|
||||
>
|
||||
<span class="text-xl leading-none">{{ axe.icon }}</span>
|
||||
<div class="flex flex-col">
|
||||
<span class="text-xs font-bold uppercase tracking-wider" style="color: var(--nav-text-muted);">{{ axe.label }}</span>
|
||||
<span class="text-lg leading-none" :style="`color: ${axeScoreText(modalPlateforme.scoring[axe.id] as string)};`">
|
||||
{{ modalPlateforme.scoring[axe.id] }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<p class="mt-3 text-sm leading-relaxed italic rounded-lg px-3 py-2.5" style="color: var(--nav-text-muted); background: var(--nav-bg-alt);">
|
||||
{{ modalPlateforme.scoring.justification_tag }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Description -->
|
||||
<div>
|
||||
<div class="modal-label">Fiche détaillée</div>
|
||||
<div class="space-y-3">
|
||||
<div v-for="section in parsedDescription" :key="section.title">
|
||||
<h5 class="text-sm font-bold mb-1" style="color: var(--nav-text);">{{ section.title }}</h5>
|
||||
<p class="text-sm leading-relaxed" style="color: var(--nav-text-muted);">{{ section.body }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Infos pratiques -->
|
||||
<div>
|
||||
<div class="modal-label">Infos pratiques</div>
|
||||
<div class="modal-meta-grid">
|
||||
<div class="modal-meta-item">
|
||||
<span class="modal-meta-key">Type</span>
|
||||
<span class="modal-meta-val">{{ modalPlateforme.type === 'b2c-mise-en-relation' ? 'Plateforme B2C' : 'Appels d\'offres publics' }}</span>
|
||||
</div>
|
||||
<div class="modal-meta-item">
|
||||
<span class="modal-meta-key">Coût d'entrée</span>
|
||||
<span class="modal-meta-val">{{ coutLabel(modalPlateforme.cout_entree) }}</span>
|
||||
</div>
|
||||
<div class="modal-meta-item">
|
||||
<span class="modal-meta-key">Zone</span>
|
||||
<span class="modal-meta-val">France entière</span>
|
||||
</div>
|
||||
<div class="modal-meta-item">
|
||||
<span class="modal-meta-key">Secteurs</span>
|
||||
<span class="modal-meta-val">{{ modalPlateforme.secteurs_servis.map(s => SECTEUR_LABELS[s] ?? s).join(', ') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer meta -->
|
||||
<div class="flex items-center gap-2 text-xs flex-wrap pb-1" style="color: var(--nav-text-muted);">
|
||||
<span>Fiche créée le {{ modalPlateforme.date_creation_fiche }}</span>
|
||||
<span>·</span>
|
||||
<span>{{ modalPlateforme.source_donnees.length }} source{{ modalPlateforme.source_donnees.length > 1 ? 's' : '' }}</span>
|
||||
<span v-if="modalPlateforme.flag_validation_jules" class="font-semibold" style="color: #7a5f2a;">
|
||||
· ⚠️ En attente de validation avant publication
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { PlateformeTaff } from '~/types/plateforme-taff'
|
||||
|
||||
useHead({
|
||||
title: 'Trouver du taf en archi — AEP',
|
||||
meta: [
|
||||
{ name: 'description', content: "Annuaire critique des plateformes B2C archi–particulier. Évaluations éthiques sur 5 axes : rémunération, transparence, pratiques pro, écologie, matching." }
|
||||
]
|
||||
})
|
||||
|
||||
const { data } = await useAsyncData('plateformes-taff', () =>
|
||||
$fetch<{ meta: any; plateformes: PlateformeTaff[] }>('/data/plateformes-taff.json')
|
||||
)
|
||||
|
||||
const allPlateformes = computed(() => data.value?.plateformes ?? [])
|
||||
const stats = computed(() => data.value?.meta?.repartition ?? { recommande: 0, sous_reserve: 0, a_eviter: 0 })
|
||||
const b2cCount = computed(() => allPlateformes.value.filter(p => p.type === 'b2c-mise-en-relation').length)
|
||||
const aoCount = computed(() => allPlateformes.value.filter(p => p.type === 'appel-offre-public').length)
|
||||
|
||||
// Filtres
|
||||
const activeTab = ref<'b2c' | 'ao'>('b2c')
|
||||
const filterTag = ref('')
|
||||
const filterSecteur = ref('')
|
||||
const search = ref('')
|
||||
const hasFilters = computed(() => !!(filterTag.value || filterSecteur.value || search.value))
|
||||
|
||||
function resetFilters() {
|
||||
filterTag.value = ''
|
||||
filterSecteur.value = ''
|
||||
search.value = ''
|
||||
}
|
||||
|
||||
const filtered = computed(() => {
|
||||
let list = allPlateformes.value.filter(p =>
|
||||
activeTab.value === 'b2c'
|
||||
? p.type === 'b2c-mise-en-relation'
|
||||
: p.type === 'appel-offre-public'
|
||||
)
|
||||
if (filterTag.value)
|
||||
list = list.filter(p => p.scoring.tag_global === filterTag.value)
|
||||
if (filterSecteur.value)
|
||||
list = list.filter(p => (p.secteurs_servis as string[]).includes(filterSecteur.value))
|
||||
if (search.value) {
|
||||
const q = search.value.toLowerCase()
|
||||
list = list.filter(p =>
|
||||
p.nom.toLowerCase().includes(q) ||
|
||||
p.description_courte.toLowerCase().includes(q)
|
||||
)
|
||||
}
|
||||
const ORDER: Record<string, number> = { 'recommande': 0, 'sous-reserve': 1, 'a-eviter': 2 }
|
||||
return [...list].sort((a, b) => (ORDER[a.scoring.tag_global] ?? 9) - (ORDER[b.scoring.tag_global] ?? 9))
|
||||
})
|
||||
|
||||
// Options filtres
|
||||
const TAG_OPTIONS = [
|
||||
{ value: 'recommande', emoji: '✅', label: 'Recommandé', bg: 'rgba(90,122,74,0.12)', text: '#3d5534', accent: '#5a7a4a' },
|
||||
{ value: 'sous-reserve', emoji: '⚠️', label: 'Sous réserve', bg: 'rgba(196,164,114,0.15)', text: '#7a5f2a', accent: '#c4a472' },
|
||||
{ value: 'a-eviter', emoji: '❌', label: 'À éviter', bg: 'rgba(168,93,62,0.12)', text: '#7a3322', accent: '#a85d3e' },
|
||||
]
|
||||
|
||||
const SECTEUR_OPTIONS = [
|
||||
{ value: 'renovation', label: 'Rénovation' },
|
||||
{ value: 'construction-neuve', label: 'Neuf' },
|
||||
{ value: 'architecture-interieure', label: 'Archi intérieure' },
|
||||
{ value: 'mar-conseil', label: 'MAR / Conseil' },
|
||||
{ value: 'urbanisme', label: 'Urbanisme' },
|
||||
{ value: 'paysage', label: 'Paysage' },
|
||||
{ value: 'transversal', label: 'Transversal' },
|
||||
]
|
||||
|
||||
const SECTEUR_LABELS: Record<string, string> = {
|
||||
'renovation': 'Rénovation', 'construction-neuve': 'Neuf',
|
||||
'architecture-interieure': 'Archi intérieure', 'urbanisme': 'Urbanisme',
|
||||
'paysage': 'Paysage', 'mar-conseil': 'MAR / Conseil', 'transversal': 'Transversal',
|
||||
}
|
||||
|
||||
const COUT_LABELS: Record<string, string> = {
|
||||
'gratuit': 'Gratuit', 'freemium': 'Freemium',
|
||||
'abonnement': 'Abonnement', 'lead-paye': 'Lead payant', 'commission': 'Commission',
|
||||
}
|
||||
function coutLabel(c: string) { return COUT_LABELS[c] ?? c }
|
||||
|
||||
// Axes
|
||||
const AXES = [
|
||||
{ id: 'remuneration' as const, icon: '🪙', label: 'Rémunération' },
|
||||
{ id: 'transparence' as const, icon: '🔍', label: 'Transparence' },
|
||||
{ id: 'pratiques' as const, icon: '⚖️', label: 'Pratiques pro' },
|
||||
{ id: 'ecologie' as const, icon: '🌿', label: 'Écologie' },
|
||||
{ id: 'matching' as const, icon: '🎯', label: 'Matching' },
|
||||
]
|
||||
|
||||
function axeScoreBg(score: string) {
|
||||
if (score === '✅') return 'rgba(90,122,74,0.1)'
|
||||
if (score === '⚠️') return 'rgba(196,164,114,0.15)'
|
||||
if (score === '❌') return 'rgba(168,93,62,0.1)'
|
||||
return 'var(--nav-bg-alt)'
|
||||
}
|
||||
function axeScoreText(score: string) {
|
||||
if (score === '✅') return '#3d5534'
|
||||
if (score === '⚠️') return '#7a5f2a'
|
||||
if (score === '❌') return '#7a3322'
|
||||
return 'var(--nav-text-muted)'
|
||||
}
|
||||
|
||||
// Modal
|
||||
const modalPlateforme = ref<PlateformeTaff | null>(null)
|
||||
function openModal(p: PlateformeTaff) { modalPlateforme.value = p }
|
||||
function closeModal() { modalPlateforme.value = null }
|
||||
|
||||
const TAG_CONFIG: Record<string, { emoji: string; label: string; bg: string; text: string }> = {
|
||||
'recommande': { emoji: '✅', label: 'Recommandé AEP', bg: 'rgba(90,122,74,0.12)', text: '#3d5534' },
|
||||
'sous-reserve': { emoji: '⚠️', label: 'Sous réserve', bg: 'rgba(196,164,114,0.15)', text: '#7a5f2a' },
|
||||
'a-eviter': { emoji: '❌', label: 'À éviter', bg: 'rgba(168,93,62,0.12)', text: '#7a3322' },
|
||||
}
|
||||
const modalTagConfig = computed(() =>
|
||||
modalPlateforme.value
|
||||
? (TAG_CONFIG[modalPlateforme.value.scoring.tag_global] ?? TAG_CONFIG['sous-reserve'])
|
||||
: TAG_CONFIG['sous-reserve']
|
||||
)
|
||||
|
||||
// Parse description (format "## Titre\nContenu\n\n## Titre2\nContenu2")
|
||||
const parsedDescription = computed(() => {
|
||||
if (!modalPlateforme.value) return []
|
||||
const raw = modalPlateforme.value.description
|
||||
const sections: { title: string; body: string }[] = []
|
||||
const parts = raw.split(/\n\n## /)
|
||||
parts.forEach((part, i) => {
|
||||
const text = i === 0 ? part.replace(/^## /, '') : part
|
||||
const nl = text.indexOf('\n')
|
||||
if (nl < 0) return
|
||||
sections.push({ title: text.slice(0, nl).trim(), body: text.slice(nl + 1).trim() })
|
||||
})
|
||||
return sections
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.taff-page { max-width: 1280px; margin: 0 auto; padding-bottom: 3rem; }
|
||||
|
||||
.taff-header { padding: 2.5rem 1.5rem 1.5rem; border-bottom: 1px solid var(--nav-bg-alt); }
|
||||
.taff-header-inner { max-width: 680px; }
|
||||
.taff-title { font-size: 1.875rem; font-weight: 800; color: var(--nav-text); margin-bottom: 0.5rem; letter-spacing: -0.02em; }
|
||||
.taff-subtitle { font-size: 0.9375rem; color: var(--nav-text-muted); line-height: 1.6; margin-bottom: 1rem; }
|
||||
.taff-stats { display: flex; gap: 1.25rem; flex-wrap: wrap; }
|
||||
.taff-stat { display: flex; align-items: center; gap: 0.375rem; font-size: 0.8125rem; font-weight: 600; }
|
||||
.taff-stat-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
|
||||
|
||||
.taff-filters-bar { position: sticky; top: 0; z-index: 100; background: var(--nav-surface); border-bottom: 1px solid var(--nav-bg-alt); padding: 0.75rem 1.5rem; box-shadow: 0 2px 8px rgba(26,34,56,0.06); }
|
||||
.taff-filters-inner { display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap; }
|
||||
|
||||
.taff-tabs { display: flex; border-radius: 8px; overflow: hidden; border: 1px solid var(--nav-bg-alt); flex-shrink: 0; }
|
||||
.taff-tab { display: flex; align-items: center; gap: 0.375rem; padding: 0.375rem 0.875rem; font-size: 0.8125rem; font-weight: 500; color: var(--nav-text-muted); background: var(--nav-bg); border: none; cursor: pointer; transition: background 0.15s; }
|
||||
.taff-tab:first-child { border-right: 1px solid var(--nav-bg-alt); }
|
||||
.taff-tab--active { background: var(--nav-primary-solid); color: var(--nav-text-on-primary); }
|
||||
.taff-tab-count { font-size: 0.6875rem; opacity: 0.7; font-weight: 700; }
|
||||
|
||||
.taff-filter-group { display: flex; gap: 0.375rem; flex-wrap: wrap; }
|
||||
.taff-filter-btn { padding: 0.3125rem 0.75rem; border-radius: 9999px; font-size: 0.8125rem; font-weight: 500; border: 1px solid var(--nav-bg-alt); background: var(--nav-bg); color: var(--nav-text-muted); cursor: pointer; transition: all 0.15s; white-space: nowrap; }
|
||||
.taff-filter-btn:hover { background: var(--nav-bg-alt); }
|
||||
.taff-filter-btn--active { font-weight: 600; }
|
||||
|
||||
.taff-search { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.75rem; border-radius: 8px; border: 1px solid var(--nav-bg-alt); background: var(--nav-bg); flex: 1; min-width: 160px; max-width: 240px; }
|
||||
.taff-search-input { flex: 1; background: transparent; border: none; outline: none; font-size: 0.8125rem; color: var(--nav-text); min-width: 0; }
|
||||
.taff-search-input::placeholder { color: var(--nav-text-muted); }
|
||||
.taff-search-clear { color: var(--nav-text-muted); background: none; border: none; cursor: pointer; padding: 0; display: flex; }
|
||||
|
||||
.taff-grid-wrap { padding: 1.5rem; }
|
||||
.taff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
|
||||
.taff-empty { text-align: center; padding: 3rem; }
|
||||
.taff-reset-btn { margin-top: 0.75rem; padding: 0.5rem 1.25rem; border-radius: 8px; background: var(--nav-bg-alt); color: var(--nav-text); font-size: 0.875rem; border: none; cursor: pointer; }
|
||||
.taff-reset-btn:hover { opacity: 0.7; }
|
||||
|
||||
.taff-disclaimer { margin: 0 1.5rem; padding: 0.875rem 1.25rem; border-radius: 10px; font-size: 0.8125rem; line-height: 1.55; color: var(--nav-text-muted); background: var(--nav-bg-alt); }
|
||||
|
||||
/* Modal body helpers */
|
||||
.modal-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--nav-text-muted); margin-bottom: 0.75rem; }
|
||||
.modal-axes { display: flex; flex-wrap: wrap; gap: 0.5rem; }
|
||||
.modal-axe { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.875rem; border-radius: 8px; flex: 1 1 130px; min-width: 130px; }
|
||||
.modal-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
|
||||
.modal-meta-item { display: flex; flex-direction: column; gap: 0.15rem; padding: 0.6rem 0.875rem; border-radius: 8px; background: var(--nav-bg-alt); }
|
||||
.modal-meta-key { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--nav-text-muted); }
|
||||
.modal-meta-val { font-size: 0.875rem; font-weight: 500; color: var(--nav-text); }
|
||||
|
||||
/* Transitions */
|
||||
.taff-backdrop-enter-active, .taff-backdrop-leave-active { transition: opacity 0.2s; }
|
||||
.taff-backdrop-enter-from, .taff-backdrop-leave-to { opacity: 0; }
|
||||
.taff-modal-enter-active, .taff-modal-leave-active { transition: opacity 0.2s, transform 0.2s; }
|
||||
.taff-modal-enter-from, .taff-modal-leave-to { opacity: 0; transform: translate(-50%, calc(-50% + 12px)); }
|
||||
</style>
|
||||
809
public/data/plateformes-taff.json
Normal file
809
public/data/plateformes-taff.json
Normal file
@@ -0,0 +1,809 @@
|
||||
{
|
||||
"meta": {
|
||||
"version": "2026-05-06-T2",
|
||||
"date_generation": "2026-05-06T18:30:00Z",
|
||||
"total": 24,
|
||||
"repartition": {
|
||||
"recommande": 7,
|
||||
"sous_reserve": 14,
|
||||
"a_eviter": 3
|
||||
},
|
||||
"repartition_type": {
|
||||
"b2c": 16,
|
||||
"appel_offre_public": 8
|
||||
}
|
||||
},
|
||||
"plateformes": [
|
||||
{
|
||||
"id": "hemea",
|
||||
"nom": "hemea",
|
||||
"url": "https://www.hemea.com",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nhemea (anciennement Travauxlib, rebaptisé en 2018) est une plateforme B-Corp certifiée depuis 2020, spécialisée rénovation et architecture. Elle gère 5 000+ projets depuis 2015 et dispose de 100+ experts dédiés. Modèle tiers de confiance avec séquestre des paiements.\n\n## Modèle économique\nCommission côté client de 5-10% (mission partielle) à 10-15% (mission complète) du montant HT. Les architectes intègrent le réseau comme prestataires coordonnés par hemea. La commission prélevée côté professionnel n\u0027est pas documentée — CGV introuvables sur le site (404).\n\n## Pour qui\nArchitectes et artisans cherchant un volume régulier de chantiers de rénovation, acceptant de travailler en sous-traitance coordonnée plutôt qu\u0027en relation directe client. Moins adapté aux indépendants souhaitant garder la main sur leur relation commerciale.\n\n## Points forts\nCertification B-Corp et positionnement RSE documenté. Séquestre des paiements protecteur pour les deux parties. Notoriété forte dans l\u0027écosystème rénovation français. Volume de projets significatif (5 000+ depuis 2015).\n\n## Points de vigilance\nLe modèle place l\u0027architecte en sous-traitant, pas en maître d\u0027œuvre autonome. Verbatims Trustpilot signalent une surfacturation liée à la double marge (hemea + artisan). En cas de litige, hemea se repositionne comme \u0027courtier\u0027, pas maître d\u0027œuvre — responsabilité diluée.",
|
||||
"description_courte": "Courtier BTP B-Corp spécialisé rénovation, les architectes intègrent le réseau comme sous-traitants coordonnés. En cas de litige, hemea se repositionne comme simple courtier — responsabilité diluée.",
|
||||
"scoring": {
|
||||
"remuneration": "⚠️",
|
||||
"transparence": "⚠️",
|
||||
"pratiques": "⚠️",
|
||||
"ecologie": "✅",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Modèle tiers de confiance avec commission 5-15% côté client et CGV introuvables — l\u0027architecte est sous-traitant coordonné, pas en relation directe. Opacité sur la rémunération côté professionnel et ambiguïté sur la responsabilité en cas de litige (Trustpilot 4.6/5, 976 avis, verbatims négatifs convergents sur ce point)."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"construction-neuve",
|
||||
"architecture-interieure",
|
||||
"mar-conseil"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "commission",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.hemea.com",
|
||||
"https://fr.trustpilot.com/review/hemea.com"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "travaux-com",
|
||||
"nom": "Travaux.com",
|
||||
"url": "https://www.travaux.com",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nPlateforme généraliste de mise en relation artisans-particuliers, parmi les plus anciennes en France. 63 207 artisans qualifiés référencés et 206 000+ avis clients. Dispose d\u0027une catégorie architecte (/architecte) mais reste dominée par les artisans BTP généralistes.\n\n## Modèle économique\nLead payant pour les professionnels : publication de projet gratuite pour le particulier, accès aux coordonnées payant pour le pro. Tarifs par lead non publiés, variables selon département et secteur. Upselling commercial vers des offres premium documenté.\n\n## Pour qui\nArtisans BTP généralistes en priorité. Pour les architectes, utilité limitée : visibilité réduite dans un catalogue majoritairement orienté artisanat. Potentiellement utile pour des missions rénovation simples en zone rurale avec peu d\u0027alternatives.\n\n## Points forts\nNotoriété grand public et volume de projets importants. Couverture nationale complète. Pas de commission prélevée sur les honoraires — tarification au lead uniquement. Marque reconnue depuis 20+ ans dans le secteur.\n\n## Points de vigilance\nDémarchage commercial agressif et upselling signalés par des professionnels inscrits. Qualité des leads variable. Note Trustpilot 3.9/5 sur 10 311 avis avec 16% de 1 étoile — révélateur de frustration chez les pros. Tarification opaque.",
|
||||
"description_courte": "Plateforme généraliste leads BTP à notoriété grand public. Architectes noyés parmi les artisans, tarification opaque et démarchage commercial agressif signalé par des professionnels inscrits.",
|
||||
"scoring": {
|
||||
"remuneration": "⚠️",
|
||||
"transparence": "⚠️",
|
||||
"pratiques": "⚠️",
|
||||
"ecologie": "❌",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Un ❌ sur l\u0027axe écologie (aucun positionnement ni pédagogie écologique sur une plateforme généraliste BTP) mais les 3 axes critiques restent en ⚠️. Upselling commercial agressif documenté côté pros (Trustpilot 3.9/5, 10 311 avis, 16% de 1 étoile)."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"construction-neuve"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "lead-paye",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.travaux.com/architecte",
|
||||
"https://fr.trustpilot.com/review/travaux.com"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "habitatpresto",
|
||||
"nom": "Habitatpresto",
|
||||
"url": "https://www.habitatpresto.com",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nPlateforme de mise en relation artisans-particuliers fondée en 2005 (21 ans d\u0027expertise). Interface de sélection par département et type de travaux. Équipe commerciale L-V 9h-18h. Couvre essentiellement l\u0027artisanat du bâtiment, avec une présence de profils architecture.\n\n## Modèle économique\nAbonnement mensuel fixe couvrant l\u0027accès illimité aux coordonnées clients. Tarif non publié — personnalisation téléphonique par région et catégorie. Frais de mise en service additionnels. La page /pro/tarifs est accessible mais n\u0027affiche aucun prix.\n\n## Pour qui\nArtisans du bâtiment cherchant des chantiers en volume. Pour les architectes indépendants, l\u0027utilité est très limitée : secteur principalement orienté artisanat, pas architecture de conception ou maîtrise d\u0027œuvre.\n\n## Points forts\nAbonnement à tarif fixe sans surprise par mission. Couverture nationale, présence dans tous les départements. Ancienneté du service (21 ans). Pas de commission par projet — modèle prévisible une fois le prix négocié.\n\n## Points de vigilance\nTarification entièrement opaque : aucun prix publié, devis uniquement par téléphone. Verbatim professionnel Trustpilot sévère : \u0027arnaque, 6 propositions reçues en 6 mois\u0027. Note 4.1/5 mais 22% de 1 étoile. Sortie d\u0027abonnement potentiellement difficile sans test de qualité préalable.",
|
||||
"description_courte": "Abonnement artisans BTP à prix opaque (non publié). Verbatims pros très négatifs : \u0027arnaque, rien en retour en 6 mois.\u0027 Note 4.1/5 mais 22% de 1 étoile — inadapté aux architectes.",
|
||||
"scoring": {
|
||||
"remuneration": "⚠️",
|
||||
"transparence": "❌",
|
||||
"pratiques": "⚠️",
|
||||
"ecologie": "❌",
|
||||
"matching": "❌",
|
||||
"tag_global": "a-eviter",
|
||||
"justification_tag": "Transparence ❌ : aucun prix publié sur la page /pro/tarifs malgré une page dédiée — opacité tarifaire volontaire documentée (scraping T1 + page accessible sans prix). Matching ❌ : verbatim Trustpilot professionnel crédible (\u00276 propositions en 6 mois pour un abonnement coûteux\u0027, 1 732 avis, 22% de 1 étoile). Deux ❌ dont un critique suffisent à justifier \u0027à éviter\u0027."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "abonnement",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.habitatpresto.com/pro/tarifs",
|
||||
"https://fr.trustpilot.com/review/habitatpresto.com"
|
||||
],
|
||||
"flag_validation_jules": true,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "houzz-pro",
|
||||
"nom": "Houzz Pro",
|
||||
"url": "https://www.houzz.fr",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nSolution SaaS tout-en-un pour professionnels de la rénovation et du design : gestion de projets, marketing, profil premium, publicité ciblée, plans 3D, devis, CRM, portail client. Plateforme américaine avec forte adoption internationale. 17 727 avis Trustpilot (4.1/5).\n\n## Modèle économique\nAbonnement mensuel couvrant l\u0027ensemble des fonctionnalités SaaS : portfolio, CRM, leads, publicité ciblée. Tarif estimé à ~250€/mois selon verbatim Trustpilot. Pas de commission sur les honoraires — l\u0027architecte conserve 100% de sa rémunération de mission.\n\n## Pour qui\nArchitectes d\u0027intérieur, architectes confirmés et studios cherchant un outil tout-en-un (portfolio + CRM + leads). Moins adapté aux architectes débutants ou aux profils cherchant uniquement des leads ponctuels sans investissement SaaS.\n\n## Points forts\nOutil SaaS complet (portfolio, CRM, devis, plan 3D intégrés). Forte notoriété internationale, large audience de particuliers. Pas de commission sur les missions — l\u0027architecte conserve 100% de ses honoraires.\n\n## Points de vigilance\nContrat difficile à résilier selon des verbatims Trustpilot : menace de poursuites judiciaires en cas de résiliation signalée. Coût mensuel significatif (~250€/mois estimé). Outil SaaS de gestion avant tout — la génération de leads est un effet secondaire, pas la valeur principale.",
|
||||
"description_courte": "SaaS tout-en-un portfolio+CRM+leads pour architectes confirmés, sans commission sur honoraires. Contrat difficile à résilier — verbatim Trustpilot signale des menaces judiciaires en cas de résiliation anticipée.",
|
||||
"scoring": {
|
||||
"remuneration": "✅",
|
||||
"transparence": "⚠️",
|
||||
"pratiques": "⚠️",
|
||||
"ecologie": "⚠️",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Rémunération ✅ (abonnement fixe, 0% commission sur les honoraires) mais pratiques de résiliation contractuelle problématiques signalées dans les verbatims Trustpilot (17 727 avis, 4.1/5). Trois axes critiques en ⚠️ — outil solide pour le portfolio mais engagement financier et contractuel à évaluer avec soin."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"construction-neuve",
|
||||
"architecture-interieure"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "abonnement",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.houzz.fr/pro",
|
||||
"https://fr.trustpilot.com/review/www.houzz.com"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "hello-archi",
|
||||
"nom": "Hello Archi",
|
||||
"url": "https://hello-archi.com",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nPlateforme de mise en relation complète particuliers-architectes qualifiés, basée à Périgueux. Gère l\u0027intégralité du projet : sélection architecte, échanges, signature de contrat et paiement. Jusqu\u0027à 3 architectes mis en contact par projet. Couvre projets résidentiels et commerciaux, permis de construire inclus.\n\n## Modèle économique\nCommission sur le montant de la mission (taux non public). CGV documentées et accessibles sur /cgu. Pénalité de 100% des honoraires si l\u0027architecte signe un contrat hors plateforme sans le déclarer sous 10 jours. Frais administratifs de 350€ si le client est silencieux 15+ jours.\n\n## Pour qui\nArchitectes souhaitant une mise en relation structurée avec suivi de projet intégré (contrat, paiement). Adapté aux profils acceptant les contraintes contractuelles. Moins adapté aux freelances souhaitant une relation commerciale totalement libre.\n\n## Points forts\nCGV accessibles et détaillées — rare parmi les plateformes B2C du panel. Accompagnement expert tout au long du projet. Couverture nationale complète. Commission uniquement à la contractualisation, pas de frais d\u0027inscription documentés.\n\n## Points de vigilance\nPénalité de 100% des honoraires si contrat hors plateforme non déclaré sous 10 jours — clause très contraignante. Mécanisme de médiation en litige \u0027promis mais pas encore opérationnel\u0027 selon les CGV. Commission exacte non publiée.",
|
||||
"description_courte": "Mise en relation avec CGV claires mais clause contraignante : pénalité 100% des honoraires si contrat signé hors plateforme sans déclaration sous 10 jours. Commission non publiée.",
|
||||
"scoring": {
|
||||
"remuneration": "⚠️",
|
||||
"transparence": "⚠️",
|
||||
"pratiques": "⚠️",
|
||||
"ecologie": "⚠️",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Cinq axes en ⚠️ : commission non publiée, mécanisme de médiation non opérationnel selon les CGV elles-mêmes, et clause de pénalité de 100% des honoraires si contrat hors plateforme non déclaré sous 10 jours — contrainte contractuelle significative sans contrepartie documentée."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"construction-neuve",
|
||||
"architecture-interieure"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "commission",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://hello-archi.com",
|
||||
"https://hello-archi.com/cgu"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "archidvisor",
|
||||
"nom": "Archidvisor",
|
||||
"url": "https://www.archidvisor.com",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nMarketplace archi et design fondée en novembre 2016 à Bordeaux par un architecte de formation. Connecte particuliers et entreprises avec architectes, architectes d\u0027intérieur, décorateurs, paysagistes et maîtres d\u0027œuvre. 2 200+ agences inscrites. Protection juridique MMA incluse. Lauréate des Rencontres des Entrepreneurs.\n\n## Modèle économique\nFreemium : inscription et référencement entièrement gratuits. Commission de 7-9% du montant total uniquement à la contractualisation (no cure no pay). Option abonnement Premium 1 499€/an ou 299€/mois pour visibilité accrue. Aucun frais si aucun projet conclu.\n\n## Pour qui\nArchitectes, architectes d\u0027intérieur, paysagistes et maîtres d\u0027œuvre cherchant une mise en relation sans investissement initial. Particulièrement adapté aux débutants (entrée sans frais) ou aux agences confirmées investissant dans le Premium pour la visibilité.\n\n## Points forts\nModèle no cure no pay — commission uniquement si projet signé. Entrée gratuite sans risque. Fondée par un architecte — compréhension du métier. Protection juridique MMA incluse. Couvre plusieurs profils (archi, déco, paysage).\n\n## Points de vigilance\nArchidvisor obtient une licence illimitée dans le temps pour utiliser photos et plans publiés à des fins marketing. Interdiction de contacter directement les clients hors plateforme. Verbatims Trustpilot signalent des profils avec projets IA et budgets irréalistes (3.9/5, 198 avis).",
|
||||
"description_courte": "Plateforme fondée par un architecte, modèle no cure no pay (commission 7-9% à la signature seulement). Attention : licence illimitée sur vos photos et plans pour usage marketing Archidvisor.",
|
||||
"scoring": {
|
||||
"remuneration": "✅",
|
||||
"transparence": "⚠️",
|
||||
"pratiques": "⚠️",
|
||||
"ecologie": "⚠️",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Rémunération ✅ : commission 7-9% no cure no pay — modèle favorable avec marge \u003e91% conservée. Mais clause de licence illimitée sur photos/plans (CGV vérifiées sur /p/cgu-cgv) et verbatims Trustpilot professionnels mitigés sur la qualité des leads (3.9/5, 198 avis). Quatre axes en ⚠️."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"construction-neuve",
|
||||
"architecture-interieure",
|
||||
"paysage"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "freemium",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://www.archidvisor.com/p/cgu-cgv",
|
||||
"https://www.ooti.co/fr/blogs/networking-plateformes-architecture",
|
||||
"https://fr.trustpilot.com/review/archidvisor.com"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "bam-archi",
|
||||
"nom": "BAM Archi",
|
||||
"url": "https://www.bam.archi",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nService d\u0027accompagnement rénovation et construction à destination des particuliers. Sélection d\u0027architectes et artisans pour les clients via matching personnalisé. ~3 000 projets/an gérés, 6 000 agences référencées. Présence Paris, Marseille, Bordeaux, Lyon. Applications complémentaires : Aglo et Aglo Carbone (RE2020).\n\n## Modèle économique\nModèle économique non documenté publiquement. La grille tarifaire pour les professionnels n\u0027est pas accessible sur le site. Marketplace avec accompagnement client — commission ou frais d\u0027inscription pour les architectes à confirmer directement auprès de BAM.\n\n## Pour qui\nArchitectes confirmés dans les grandes métropoles françaises (Paris, Marseille, Bordeaux, Lyon) cherchant un volume de projets rénovation-construction. Fort intérêt pour les profils maîtrisant les outils RE2020 et bilan carbone.\n\n## Points forts\nIntégration des outils Aglo Carbone (RE2020) — signal positif sur l\u0027engagement environnemental. Accompagnement structuré des projets. Présence métropolitaine dense. Volume de projets significatif (~3 000/an).\n\n## Points de vigilance\nModèle économique entièrement opaque : impossible d\u0027évaluer le coût réel pour l\u0027architecte sans contact direct. 6 000 agences référencées = forte concurrence interne pour chaque lead. Pas de feedback communauté disponible (Trustpilot absent).",
|
||||
"description_courte": "Accompagnement rénovation avec outils RE2020 et Aglo Carbone intégrés. Modèle économique entièrement opaque — coût pour l\u0027architecte impossible à évaluer sans contact direct avec BAM.",
|
||||
"scoring": {
|
||||
"remuneration": "⚠️",
|
||||
"transparence": "⚠️",
|
||||
"pratiques": "⚠️",
|
||||
"ecologie": "✅",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Écologie ✅ : intégration d\u0027Aglo Carbone (RE2020) — effort concret et documenté sur la transition écologique. Mais modèle économique entièrement opaque pour les professionnels (aucune grille tarifaire publique) et absence totale de feedback communauté."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"construction-neuve",
|
||||
"architecture-interieure"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "gratuit",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.bam.archi",
|
||||
"https://www.ooti.co/fr/blogs/networking-plateformes-architecture"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "archibien",
|
||||
"nom": "Archibien",
|
||||
"url": "https://archibien.com",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nPlateforme de courtage mettant des porteurs de projets en relation avec 3 architectes locaux en concurrence simultanée. Fondée ~2016. Qualification préalable du projet (faisabilité, budget). Consultations initiales offertes aux clients. Présente dans les grandes métropoles françaises. Secteurs : neuf, extension, rénovation, commercial.\n\n## Modèle économique\nModèle broker : les clients paient pour les services (consultation, étude de faisabilité). Les architectes semblent payer à la contractualisation ou pour accéder aux projets — grille tarifaire non accessible, CGV introuvables (/cgv → 404). Opacité tarifaire totale côté professionnel.\n\n## Pour qui\nÀ évaluer avec prudence pour les architectes indépendants : le modèle de 3 architectes en concurrence implique un travail préparatoire sans garantie de mission. Adapté uniquement aux agences ayant des ressources commerciales suffisantes pour absorber les pertes sur concours non retenus.\n\n## Points forts\nQualification préalable du projet côté client (faisabilité et budget évalués en amont). Présence dans les grandes métropoles. Pas de feedback négatif public visible — profil Trustpilot non revendiqué (0 avis).\n\n## Points de vigilance\nCGV introuvables (404) : aucune condition contractuelle vérifiable. Modèle \u00273 archis en concurrence\u0027 avec consultations offertes au client : risque de travail de conception non rémunéré, contraire au Code de déontologie. Opacité tarifaire totale.",
|
||||
"description_courte": "Modèle 3 architectes en concurrence avec consultations offertes. CGV introuvables (/cgv → 404) — conditions contractuelles invérifiables, risque de travail non rémunéré non documenté.",
|
||||
"scoring": {
|
||||
"remuneration": "⚠️",
|
||||
"transparence": "❌",
|
||||
"pratiques": "⚠️",
|
||||
"ecologie": "⚠️",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "a-eviter",
|
||||
"justification_tag": "Transparence ❌ : CGV introuvables (/cgv → 404) — aucune condition contractuelle vérifiable publiquement, opacité totale sur les conditions d\u0027utilisation (documenté lors du scraping T1). Modèle de concurrence simultanée entre 3 architectes avec consultations offertes soulève des questions déontologiques. Un axe critique ❌ suffit pour le tag \u0027à éviter\u0027."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"construction-neuve",
|
||||
"architecture-interieure"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "commission",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://archibien.com",
|
||||
"https://www.ooti.co/fr/blogs/networking-plateformes-architecture"
|
||||
],
|
||||
"flag_validation_jules": true,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "archionline",
|
||||
"nom": "Archionline",
|
||||
"url": "https://www.archionline.com",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nPlateforme de mise en relation particuliers-architectes appartenant au groupe Batiweb. Siège à Paris (19 rue d\u0027Hauteville, 75010). Déploiement d\u0027architectes sur site sous 1 semaine. Garantie décennale et protection juridique AXA incluses. 600+ plans de maison disponibles. Active depuis au moins 2017.\n\n## Modèle économique\nCommission de 5-15% sur le montant total des travaux selon la nature de la mission (conception, permis de construire, analyse entreprises). Étude initiale gratuite pour le client. Taux documenté via source tierce (blog Hello Archi, janvier 2025).\n\n## Pour qui\nEn théorie, architectes cherchant des projets résidentiels clés en main. En pratique, les retours Trustpilot très négatifs et les pratiques de démarchage abusif signalées exposent les architectes affiliés à des risques réputationnels significatifs.\n\n## Points forts\nCommission documentée dans une fourchette acceptable (5-15%). Garantie décennale et protection AXA incluses. Couverture nationale. Intégration Groupe Batiweb — synergies avec des médias pro du bâtiment.\n\n## Points de vigilance\nNote Trustpilot de 2.4/5 sur 207 avis — parmi les plus basses du panel. Démarchage abusif signalé : harcèlement téléphonique après dépôt de coordonnées client. Permis de construire non conformes aux PLU documentés. Ces pratiques exposent les architectes affiliés.",
|
||||
"description_courte": "Commission 5-15% documentée mais note Trustpilot 2.4/5 sur 207 avis. Démarchage abusif et permis non conformes aux PLU signalés — risque réputationnel sérieux pour les architectes affiliés.",
|
||||
"scoring": {
|
||||
"remuneration": "✅",
|
||||
"transparence": "⚠️",
|
||||
"pratiques": "❌",
|
||||
"ecologie": "⚠️",
|
||||
"matching": "❌",
|
||||
"tag_global": "a-eviter",
|
||||
"justification_tag": "Pratiques ❌ : démarchage abusif (harcèlement téléphonique) et permis de construire non conformes aux PLU documentés dans les verbatims Trustpilot (2.4/5, 207 avis, sources publiques vérifiables). Matching ❌ convergent avec la note Trustpilot parmi les plus basses du panel. Un axe critique ❌ (Pratiques) suffit pour le tag \u0027à éviter\u0027."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"construction-neuve",
|
||||
"mar-conseil"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "commission",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.archionline.com",
|
||||
"https://blog.hello-archi.com/top-3-plateformes-pour-engager-un-architecte-a-moindre-cout/",
|
||||
"https://fr.trustpilot.com/review/archionline.com"
|
||||
],
|
||||
"flag_validation_jules": true,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "trouver-mon-architecte",
|
||||
"nom": "Trouver-Mon-Architecte",
|
||||
"url": "https://www.trouver-mon-architecte.fr",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nAnnuaire et plateforme de mise en relation, se présentant comme \u0027#1 annuaire d\u0027architectes qualifiés en France\u0027. Service gratuit pour les particuliers. Couverture nationale complète (95 départements). Les particuliers reçoivent 2-3 architectes adaptés sous 24-48h. 1 204 abonnés LinkedIn.\n\n## Modèle économique\nFreemium : gratuit sans engagement pour les particuliers. Abonnement payant pour les architectes inscrits (tarif non publié), incluant des formations professionnelles continues. Pas de commission prélevée sur les honoraires — l\u0027architecte conserve 100% de sa rémunération de mission.\n\n## Pour qui\nArchitectes indépendants souhaitant développer leur activité sans commission par mission. Particulièrement adapté aux profils intéressés par la formation continue intégrée. Couverture nationale utile pour les architectes hors grandes métropoles.\n\n## Points forts\nPas de commission sur les honoraires — abonnement fixe. Formation continue incluse dans l\u0027abonnement (valeur ajoutée différenciante). Note 4.5/5 sur 361 avis Trustpilot. Verbatim archi positif documenté : ~40 demandes, 4 contrats signés.\n\n## Points de vigilance\nTarifs abonnement non publiés — à vérifier avant tout engagement. Taux de conversion estimé à 10% (4 contrats sur 40 demandes selon verbatim) — en dessous du seuil optimal. Veille marchés publics annoncée mais détails peu documentés.",
|
||||
"description_courte": "Abonnement archi incluant formations professionnelles, sans commission sur honoraires. Taux de conversion ~10% selon verbatim (4/40 demandes). Tarifs non publiés à vérifier avant engagement.",
|
||||
"scoring": {
|
||||
"remuneration": "✅",
|
||||
"transparence": "⚠️",
|
||||
"pratiques": "✅",
|
||||
"ecologie": "⚠️",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Rémunération ✅ (0% commission, abonnement fixe) et Pratiques ✅ (formations incluses, pas de mise en concurrence, structure respectueuse du métier). Mais tarifs abonnement non publiés et taux de conversion ~10% (en dessous du seuil ✅ de \u003e20%). Trois axes en ⚠️ — tag sous-réserve."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"construction-neuve",
|
||||
"urbanisme",
|
||||
"mar-conseil"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "freemium",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.trouver-mon-architecte.fr",
|
||||
"https://fr.trustpilot.com/review/trouver-mon-architecte.fr"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "archiliste",
|
||||
"nom": "Archiliste",
|
||||
"url": "https://www.archiliste.fr",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nAnnuaire et plateforme de présentation des architectes de France. 26 660 agences enregistrées. Publication de projets gratuite pour tous les professionnels. Héberge également actualités, ressources formations et événements networking. Secteurs couverts : résidentiel, commercial, intérieur, rénovation, équipements publics.\n\n## Modèle économique\nFreemium : inscription et publication de projets entièrement gratuits. Fonctionnalités avancées (marketing, publicité, portail pro) payantes — tarifs non précisés. Revenu basé sur la visibilité premium et les contacts marketing.\n\n## Pour qui\nArchitectes souhaitant une vitrine portfolio gratuite à l\u0027échelle nationale. Utile pour la présence en ligne sans engagement financier. Moins utile pour la génération directe de leads : plateforme passive sans matching actif.\n\n## Points forts\nInscription et présence de base entièrement gratuites. Large base d\u0027agences (26 660) = crédibilité annuaire. Présence dans les secteurs public et privé. Ressources et événements networking en complément.\n\n## Points de vigilance\nPlateforme annuaire passive : aucun mécanisme de mise en relation active ou de génération de leads qualifiés. 26 660 agences enregistrées signifient une visibilité très diluée sans abonnement premium. Pas de feedback communauté disponible.",
|
||||
"description_courte": "Annuaire national avec présence de base gratuite pour 26 660 agences. Vitrine portfolio sans génération de leads active — utile en complément, pas comme canal de prospection principal.",
|
||||
"scoring": {
|
||||
"remuneration": "✅",
|
||||
"transparence": "⚠️",
|
||||
"pratiques": "✅",
|
||||
"ecologie": "⚠️",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Rémunération ✅ (inscription gratuite, 0% commission) et Pratiques ✅ (annuaire passif respectueux, pas de mise en concurrence). Trois axes en ⚠️ dont Matching — la plateforme est passive et ne génère pas de leads qualifiés. Utile comme présence complémentaire."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"construction-neuve",
|
||||
"architecture-interieure",
|
||||
"transversal"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "freemium",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.archiliste.fr/annuaire"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "architectes-pour-tous",
|
||||
"nom": "Architectes pour tous (CNOA)",
|
||||
"url": "https://www.architectes-pour-tous.fr",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nService officiel du Conseil National de l\u0027Ordre des Architectes (CNOA). Référence l\u0027ensemble des architectes exerçant légalement en France. Recherche par profil (particulier, pro, collectivité), type de projet, proximité géographique. Carte interactive. Intégré aux dispositifs France Rénov\u0027 et MaPrimeRénov\u0027.\n\n## Modèle économique\nTotalement gratuit pour les particuliers et pour les architectes. L\u0027inscription à l\u0027Ordre est une obligation légale — la plateforme n\u0027implique aucun coût supplémentaire. Aucune commission, aucun abonnement, aucun frais caché. Financé par les cotisations ordinales.\n\n## Pour qui\nTous les architectes inscrits à l\u0027Ordre : la présence est automatique. Particulièrement pertinent pour les architectes spécialisés MAR ou rénovation énergétique, directement référencés dans les dispositifs publics d\u0027aide à la rénovation.\n\n## Points forts\nGratuit, institutionnel, référencement automatique pour tout architecte inscrit à l\u0027Ordre. Intégration aux dispositifs publics (France Rénov\u0027, MaPrimeRénov\u0027). Crédibilité institutionnelle maximale. Couverture nationale totale.\n\n## Points de vigilance\nAnnuaire passif institutionnel : ne génère pas de leads directs. Tous les architectes inscrits à l\u0027Ordre y figurent — différenciation nulle. Outil de présence publique minimum, pas un canal de prospection actif.",
|
||||
"description_courte": "Annuaire officiel du Conseil de l\u0027Ordre, gratuit et intégré à France Rénov\u0027 et MaPrimeRénov\u0027. Présence automatique pour tout architecte inscrit — ne génère pas de leads directs.",
|
||||
"scoring": {
|
||||
"remuneration": "✅",
|
||||
"transparence": "✅",
|
||||
"pratiques": "✅",
|
||||
"ecologie": "✅",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "recommande",
|
||||
"justification_tag": "Quatre axes en ✅ : gratuit, institutionnel, intégré aux dispositifs de rénovation énergétique (France Rénov\u0027, MaPrimeRénov\u0027), pratiques respectueuses de l\u0027Ordre. Seul le matching est en ⚠️ du fait de la nature passive de l\u0027annuaire — mais la présence y est obligatoire et sans coût."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"construction-neuve",
|
||||
"urbanisme",
|
||||
"mar-conseil",
|
||||
"transversal"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "gratuit",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.architectes-pour-tous.fr"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "pipcke",
|
||||
"nom": "Pipcke",
|
||||
"url": "https://pipcke.fr",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nPlateforme d\u0027architecture d\u0027intérieur et décoration en ligne. Met en relation clients avec architectes d\u0027intérieur et décorateurs via mood boards, shopping list et conception 3D photoréaliste. 1 000+ espaces transformés. 500+ marques partenaires avec remises négociées. Approche projet par pièce.\n\n## Modèle économique\nForfait par pièce : Essentiel 90€ (1 sem, mood boards + shopping list), Incontournable 155€ (1-2 sem, +3D + révisions), Fantastique 235€ (2-3 sem, 2 designers, 3D illimitées). Revenus complémentaires via partenariats marques mobilier. Tarifs publics et clairement affichés.\n\n## Pour qui\nArchitectes d\u0027intérieur et décorateurs cherchant un flux de projets de petite envergure (pièce unique). Non adapté aux architectes HMONP ou MOE : scope exclusivement déco, sans permis de construire ni maîtrise d\u0027œuvre.\n\n## Points forts\nTarification entièrement publique et transparente — rare dans le panel B2C. Modèle clair sans surprise. Partenariats marques mobilier avec remises clients. Approche structurée par pièce facilitant la gestion du temps professionnel.\n\n## Points de vigilance\nRevenus unitaires faibles (90-235€/pièce) pour 1-3 semaines de travail. Scope exclusivement déco intérieure. Partenariats marques peuvent orienter les recommandations vers des produits sponsors. Pas de feedback communauté disponible.",
|
||||
"description_courte": "Plateforme déco par pièce, tarifs publics et clairs (90-235€). Réservée aux architectes d\u0027intérieur — scope exclusivement déco, revenus unitaires faibles pour 1-3 semaines de travail.",
|
||||
"scoring": {
|
||||
"remuneration": "⚠️",
|
||||
"transparence": "✅",
|
||||
"pratiques": "✅",
|
||||
"ecologie": "⚠️",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Transparence ✅ (tarification publique, claire, affichée) et Pratiques ✅ (pas de concours, scope honnête, modèle sain). Rémunération en ⚠️ car les forfaits 90-235€/pièce génèrent des revenus unitaires faibles pour 1-3 semaines de travail de conception. Scope très limité (déco intérieure uniquement)."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"architecture-interieure"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "abonnement",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://pipcke.fr"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "moncoachdeco",
|
||||
"nom": "MonCoachDéco",
|
||||
"url": "https://moncoachdeco.com",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nMarketplace numérique mettant en relation architectes d\u0027intérieur et décorateurs avec des clients. Inscription de base gratuite. Les professionnels reçoivent des leads projets correspondant à leur localisation et compétences, puis choisissent quels projets accepter.\n\n## Modèle économique\nFreemium : profil de base gratuit. Accès aux coordonnées clients payant (achat à la carte ou abonnement illimité). Options additionnelles : nom de domaine personnalisé, logiciel comptable intégré. Tarifs non publiés sur le site principal.\n\n## Pour qui\nArchitectes d\u0027intérieur et décorateurs souhaitant un flux de leads qualifiés dans leur zone géographique. Non adapté aux architectes HMONP ou MOE : scope exclusivement architecture intérieure et décoration, sans maîtrise d\u0027œuvre ni permis de construire.\n\n## Points forts\nLiberté de sélection : le professionnel choisit les projets qu\u0027il accepte. Inscription sans frais initiale. Ciblage géographique et par compétences. Services additionnels (domaine, comptabilité) intégrés en option.\n\n## Points de vigilance\nTarifs non publiés — impossible d\u0027évaluer le rapport coût/bénéfice avant inscription. Coût par lead potentiellement élevé si le taux de conversion est faible. Pas de feedback communauté disponible — qualité des leads inconnue.",
|
||||
"description_courte": "Leads architectes d\u0027intérieur avec liberté de sélection des projets, inscription gratuite. Tarifs d\u0027accès aux coordonnées non publiés — coût réel impossible à évaluer sans inscription.",
|
||||
"scoring": {
|
||||
"remuneration": "⚠️",
|
||||
"transparence": "⚠️",
|
||||
"pratiques": "✅",
|
||||
"ecologie": "⚠️",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Pratiques ✅ : liberté totale de sélection des projets, pas de mise en concurrence, inscription sans frais initiale. Mais tarifs non publiés (⚠️ Transparence) et absence de feedback communauté rendent impossible l\u0027évaluation du rapport coût/efficacité."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"architecture-interieure"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "freemium",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://moncoachdeco.com/plateforme-decorateur-architecte"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "eldo-pro",
|
||||
"nom": "Eldo / EldoPro",
|
||||
"url": "https://www.eldo.com",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nPlateforme d\u0027avis entre voisins et de mise en relation avec des professionnels qualifiés du bâtiment. 1 200 pros qualifiés en France, 8 000+ projets accompagnés. Présence dans 7 grandes métropoles (Toulouse, Paris, Bordeaux, Marseille, Lyon, Montpellier, Lille). Coordonnées transmises uniquement au professionnel choisi par le client.\n\n## Modèle économique\nLead generation pour EldoPro (artisans individuels) et EldoNetwork (réseaux et marques). Tarifs non publiés. L\u0027architecte paie pour les leads reçus selon un modèle à la demande ou abonnement — conditions exactes à confirmer directement.\n\n## Pour qui\nArtisans BTP généralistes en priorité. Les architectes sont absents de la description principale de la plateforme — leur présence est marginale et non valorisée dans l\u0027offre Eldo.\n\n## Points forts\nSystème d\u0027avis entre voisins = leads avec recommandation sociale. Coordonnées transmises uniquement au professionnel choisi (pas de multi-diffusion massive). Présence métropolitaine dense dans 7 grandes villes.\n\n## Points de vigilance\nArchitectes très peu représentés dans l\u0027offre principale. Modèle orienté artisanat BTP, pas architecture de conception ou maîtrise d\u0027œuvre. Tarifs opaques. Pas de feedback communauté disponible pour évaluer la qualité des leads archi.",
|
||||
"description_courte": "Plateforme leads artisans BTP avec recommandations entre voisins. Architectes absents de l\u0027offre principale — inadapté aux missions de conception ou maîtrise d\u0027œuvre.",
|
||||
"scoring": {
|
||||
"remuneration": "⚠️",
|
||||
"transparence": "⚠️",
|
||||
"pratiques": "⚠️",
|
||||
"ecologie": "⚠️",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Cinq axes en ⚠️ : tarification opaque, architectes marginaux dans l\u0027offre principale, pas de feedback communauté. Seul signal positif : coordonnées transmises uniquement au pro choisi (pas de revente massive). Inadapté comme canal principal pour les architectes."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"transversal"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "lead-paye",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.eldo.com"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "france-renov-annuaire",
|
||||
"nom": "France Rénov\u0027 — Annuaire pro",
|
||||
"url": "https://france-renov.gouv.fr/annuaires-professionnels/artisan-rge-architecte",
|
||||
"type": "b2c-mise-en-relation",
|
||||
"description": "## Présentation\nAnnuaire officiel ANAH permettant aux particuliers de trouver des professionnels RGE et architectes référencés pour travaux de rénovation énergétique. Service public entièrement gratuit. Mécanisme anti-fraude intégré. Référence obligatoire pour les chantiers éligibles MaPrimeRénov\u0027.\n\n## Modèle économique\nTotalement gratuit, financé par l\u0027État (ANAH). Aucune commission ni frais pour les architectes référencés. L\u0027inscription nécessite une certification MAR ou qualification RGE pertinente — elle-même conditionnée à des critères professionnels rigoureux.\n\n## Pour qui\nArchitectes certifiés MAR (Mon Accompagnateur Rénov\u0027) ou travaillant sur des projets de rénovation énergétique performante. Très pertinent pour les profils spécialisés énergie. Peu d\u0027intérêt pour les architectes exclusivement orientés neuf ou décoration.\n\n## Points forts\nService public gratuit adossé aux dispositifs MaPrimeRénov\u0027. Crédibilité institutionnelle maximale. Seuls les pros certifiés RGE/MAR référencés — signal qualité pour les clients. Génère des leads ciblés sur la rénovation énergétique.\n\n## Points de vigilance\nAnnuaire passif — c\u0027est le particulier qui recherche, pas un matching actif. Pertinent uniquement pour les architectes certifiés MAR ou RGE. Génération de leads limitée si peu de communication publique sur le dispositif.",
|
||||
"description_courte": "Annuaire officiel ANAH gratuit pour architectes certifiés MAR ou RGE. Leads ciblés rénovation énergétique via MaPrimeRénov\u0027. Peu pertinent pour les profils non certifiés.",
|
||||
"scoring": {
|
||||
"remuneration": "✅",
|
||||
"transparence": "✅",
|
||||
"pratiques": "✅",
|
||||
"ecologie": "✅",
|
||||
"matching": "⚠️",
|
||||
"tag_global": "recommande",
|
||||
"justification_tag": "Quatre axes en ✅ : service public gratuit (ANAH), institutionnel, intégré MaPrimeRénov\u0027, focalisé rénovation énergétique (MAR, RGE). Seul le matching est en ⚠️ car la plateforme est passive et le volume de leads dépend des campagnes de communication publique sur le dispositif."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"renovation",
|
||||
"mar-conseil"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "gratuit",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://france-renov.gouv.fr/annuaires-professionnels/artisan-rge-architecte"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "boamp",
|
||||
"nom": "BOAMP",
|
||||
"url": "https://www.boamp.fr",
|
||||
"type": "appel-offre-public",
|
||||
"description": "## Présentation\nBulletin Officiel des Annonces des Marchés Publics — référence institutionnelle pour tous les marchés publics formels français et européens. Géré directement par l\u0027État. Publie les avis publics à la concurrence (AAPC), avis de concession et avis d\u0027attribution.\n\n## Modèle économique\nService public entièrement gratuit. Veille personnalisée jusqu\u0027à 10 alertes configurables. Notification quotidienne des nouveaux avis. Accès aux DCE possible. Aucun frais pour les entreprises candidates, quel que soit le volume d\u0027AO consultés.\n\n## Pour qui\nTous les architectes et bureaux d\u0027études souhaitant répondre à des marchés publics de maîtrise d\u0027œuvre. Source primaire officielle — indispensable pour toute démarche sérieuse de réponse aux AO publics. Complémentaire aux agrégateurs spécialisés.\n\n## Points forts\nSource officielle et exhaustive de tous les marchés publics formels. Totalement gratuit. Alertes email personnalisées (10 profils max). Accès aux DCE directement. Référence légale — toute publication y est obligatoire.\n\n## Points de vigilance\nInterface moins ergonomique que les agrégateurs spécialisés (AppelArchi, Instao). Pas de résumés IA ni de filtres avancés par profil archi. Nécessite une veille active ou des alertes précises pour être efficace.",
|
||||
"description_courte": "Source officielle gratuite de tous les marchés publics français. Interface brute — à coupler avec un agrégateur spécialisé (AppelArchi, Instao) pour une veille efficace adaptée aux profils archi.",
|
||||
"scoring": {
|
||||
"remuneration": null,
|
||||
"transparence": "✅",
|
||||
"pratiques": null,
|
||||
"ecologie": null,
|
||||
"matching": "✅",
|
||||
"tag_global": "recommande",
|
||||
"justification_tag": "Scoring simplifié 2 axes (plateforme appels d\u0027offres publics). Source officielle de l\u0027État : transparence totale (✅) et couverture exhaustive de tous les marchés formels (✅ Matching)."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"urbanisme",
|
||||
"mar-conseil",
|
||||
"transversal"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "freemium",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.boamp.fr"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "e-marchespublics",
|
||||
"nom": "E-marchespublics.com",
|
||||
"url": "https://www.e-marchespublics.com",
|
||||
"type": "appel-offre-public",
|
||||
"description": "## Présentation\nPlateforme française d\u0027agrégation marchés publics permettant découverte d\u0027AO et soumission de candidatures électroniques. Agrège BOAMP, JOUE et sources régionales. 991 762 entreprises inscrites. 58,8M documents téléchargés. 600 000+ opportunités annuelles. Réponse dématérialisée sécurisée en 5 minutes.\n\n## Modèle économique\nFreemium : compte gratuit avec recherche, alertes email quotidiennes et dépôt de candidatures. Fonctionnalités avancées payantes (monitoring détaillé, complétion auto formulaires, filtres avancés). Accès complet aux fonctions essentielles sans engagement financier.\n\n## Pour qui\nArchitectes et bureaux d\u0027études souhaitant une veille AO mutualisée et une soumission dématérialisée simplifiée. Marchés MOE et architecture confirmés dans les résultats (ex: Institut Bergonie, Logeal Immobilière).\n\n## Points forts\nAgrégation multi-sources (BOAMP + JOUE + régionaux). Dépôt de candidature dématérialisé intégré. Large base d\u0027entreprises inscrites (991k). Gratuit pour les fonctions essentielles. Marchés MOE archi confirmés.\n\n## Points de vigilance\nFonctionnalités avancées payantes sans tarifs précisés. Volume très large (600k+ AO/an) nécessitant des filtres précis pour isoler les marchés MOE archi pertinents.",
|
||||
"description_courte": "Agrégateur multi-sources marchés publics (BOAMP + JOUE + régionaux) avec soumission dématérialisée gratuite. Marchés MOE archi confirmés — fonctions avancées payantes sans tarifs affichés.",
|
||||
"scoring": {
|
||||
"remuneration": null,
|
||||
"transparence": "✅",
|
||||
"pratiques": null,
|
||||
"ecologie": null,
|
||||
"matching": "✅",
|
||||
"tag_global": "recommande",
|
||||
"justification_tag": "Scoring simplifié 2 axes (plateforme appels d\u0027offres publics). Modèle freemium clair avec accès gratuit documenté (✅ Transparence) et agrégation multi-sources avec marchés MOE archi confirmés (✅ Matching)."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"transversal"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "freemium",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.e-marchespublics.com"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "centrale-des-marches",
|
||||
"nom": "Centrale des Marchés",
|
||||
"url": "https://centraledesmarches.com",
|
||||
"type": "appel-offre-public",
|
||||
"description": "## Présentation\nPlateforme de veille marchés publics et privés lancée en 2021 par Medialex. Agrège BOAMP, JOUE, presse régionale et marchés privés. 16 005 avis actifs, 48 857 acheteurs publics identifiés. 1 515 opportunités listées en catégorie architecture/construction/ingénierie. Formations marchés publics disponibles.\n\n## Modèle économique\nFreemium : alertes email gratuites pour les entreprises candidates. Solutions payantes de dématérialisation pour les acheteurs publics. Tarifs d\u0027abonnement pour les fonctions avancées non précisés sur la homepage.\n\n## Pour qui\nArchitectes souhaitant couvrir à la fois les marchés publics et privés dans une seule interface. La double couverture est un différenciateur intéressant pour les profils cherchant un flux diversifié de projets.\n\n## Points forts\nDouble couverture marchés publics + privés — rare dans le panel. 1 515 opportunités archi/construction. Alertes email gratuites. Formations marchés publics disponibles — valeur ajoutée pour les profils débutants en AO.\n\n## Points de vigilance\nTarifs abonnement pour les fonctions avancées non précisés. Plateforme lancée en 2021 — moins mature que BOAMP ou e-marchespublics. Marchés privés : qualité et fiabilité des données à confirmer.",
|
||||
"description_courte": "Veille marchés publics + privés avec alertes email gratuites. Double couverture différenciante mais tarifs abonnement opaques et plateforme jeune (lancée 2021).",
|
||||
"scoring": {
|
||||
"remuneration": null,
|
||||
"transparence": "⚠️",
|
||||
"pratiques": null,
|
||||
"ecologie": null,
|
||||
"matching": "✅",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Scoring simplifié 2 axes (plateforme appels d\u0027offres publics). Matching ✅ (double couverture public+privé, 1 515 opportunités archi). Transparence ⚠️ : tarifs des fonctions avancées non publiés sur la homepage. Configuration 1✅ + 1⚠️ → sous-réserve."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"transversal"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "freemium",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://centraledesmarches.com"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "appelarchi",
|
||||
"nom": "AppelArchi",
|
||||
"url": "https://appelarchi.fr",
|
||||
"type": "appel-offre-public",
|
||||
"description": "## Présentation\nPlateforme spécialisée pour les professionnels de l\u0027architecture. Agrège BOAMP, JOUE, TED et sources régionales. 300+ opportunités analysées quotidiennement. Filtres avancés par profil archi, suivi des lauréats, résumés IA. Inclut DOM-TOM. Conçue spécifiquement pour les cabinets d\u0027architecture.\n\n## Modèle économique\nAccès conditionnel suggéré par le CTA \u0027accéder à la plateforme\u0027. Modèle exact (gratuit/payant/abonnement) non précisé sur la homepage. Tarification à confirmer après inscription. Présumé abonnement compte tenu de la spécialisation du service.\n\n## Pour qui\nCabinets d\u0027architecture et architectes indépendants souhaitant une veille AO spécialisée avec valeur ajoutée IA. La spécialisation sur le profil archi est un avantage significatif face aux agrégateurs généralistes.\n\n## Points forts\nSeule plateforme du panel 100% dédiée aux marchés archi. Résumés IA des AO. Suivi des lauréats. Filtres avancés par profil. Couverture DOM-TOM. 300+ opportunités analysées quotidiennement.\n\n## Points de vigilance\nTarification entièrement opaque avant inscription — risque d\u0027engagement sans visibilité sur les coûts. Service présumé payant mais aucune information tarifaire publique disponible.",
|
||||
"description_courte": "Plateforme 100% dédiée aux marchés publics archi, résumés IA et suivi des lauréats. Tarification entièrement opaque avant inscription — à tester avant tout engagement financier.",
|
||||
"scoring": {
|
||||
"remuneration": null,
|
||||
"transparence": "⚠️",
|
||||
"pratiques": null,
|
||||
"ecologie": null,
|
||||
"matching": "✅",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Scoring simplifié 2 axes (plateforme appels d\u0027offres publics). Matching ✅ : spécialisation archi complète, résumés IA, suivi lauréats — outil différenciant dans le panel. Transparence ⚠️ : tarification entièrement opaque avant inscription. Configuration 1✅ + 1⚠️ → sous-réserve."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"urbanisme",
|
||||
"mar-conseil",
|
||||
"transversal"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "abonnement",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://appelarchi.fr"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "akkel",
|
||||
"nom": "Akkel",
|
||||
"url": "https://www.akkel.fr",
|
||||
"type": "appel-offre-public",
|
||||
"description": "## Présentation\nPlateforme de veille automatisée pour marchés publics. Recommandations personnalisées basées sur l\u0027activité réelle de l\u0027entreprise, sans configuration initiale manuelle. 46 000+ notices 2024, 12 157 AO actifs, 95 155 notices 2025. Couvre les publications officielles complètes, mises à jour quotidiennement.\n\n## Modèle économique\nTrial gratuit de 21 jours avec accès à toutes les fonctionnalités. Tarifs post-trial non affichés publiquement — à confirmer après la période d\u0027essai. Modèle présumé abonnement.\n\n## Pour qui\nArchitectes et bureaux d\u0027études souhaitant une veille entièrement automatisée sans configuration manuelle complexe. L\u0027algorithme de recommandation personnalisée basé sur l\u0027historique d\u0027activité est un différenciateur pour les profils expérimentés en marchés publics.\n\n## Points forts\nRecommandations personnalisées automatiques (aucune configuration manuelle). Trial 21 jours gratuit avec accès complet. Volume élevé : 95k+ notices 2025. Couverture complète des publications officielles.\n\n## Points de vigilance\nTarifs post-trial non affichés — impossible d\u0027anticiper le coût avant la fin de l\u0027essai. Plateforme moins connue que BOAMP ou e-marchespublics — maturité à confirmer. Trial gratuit peut créer un biais d\u0027engagement.",
|
||||
"description_courte": "Veille marchés publics automatisée avec recommandations personnalisées, trial 21 jours gratuit. Tarifs post-trial opaques — à comparer avec d\u0027autres agrégateurs avant engagement.",
|
||||
"scoring": {
|
||||
"remuneration": null,
|
||||
"transparence": "⚠️",
|
||||
"pratiques": null,
|
||||
"ecologie": null,
|
||||
"matching": "✅",
|
||||
"tag_global": "sous-reserve",
|
||||
"justification_tag": "Scoring simplifié 2 axes (plateforme appels d\u0027offres publics). Matching ✅ : recommandations personnalisées automatiques, 95k+ notices 2025. Transparence ⚠️ : tarifs post-trial non publiés — le trial gratuit ne permet pas d\u0027anticiper le coût réel. Configuration 1✅ + 1⚠️ → sous-réserve."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"transversal"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "freemium",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://r.jina.ai/https://www.akkel.fr"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "marches-publics-gouv",
|
||||
"nom": "Marchés-publics.gouv.fr (PLACE)",
|
||||
"url": "https://www.marches-publics.gouv.fr",
|
||||
"type": "appel-offre-public",
|
||||
"description": "## Présentation\nPlateforme officielle de l\u0027État français pour les marchés publics et leur dématérialisation. Agrège les marchés de l\u0027ensemble des entités publiques françaises. Référence institutionnelle pour la soumission de candidatures. Complémentaire au BOAMP pour la réponse aux AO.\n\n## Modèle économique\nAccès totalement gratuit pour les entreprises candidates. Service public financé par l\u0027État. Aucune contrainte financière pour la consultation des AO ou la soumission de candidatures. Pas d\u0027abonnement, pas de frais de dossier.\n\n## Pour qui\nTous les architectes et bureaux d\u0027études répondant à des marchés publics. Référence institutionnelle incontournable pour la soumission de candidatures dématérialisées — complémentaire à la veille sur BOAMP ou les agrégateurs spécialisés.\n\n## Points forts\nService public officiel, gratuit, institutionnel. Référence légale pour la dématérialisation des candidatures. Couverture de toutes les entités publiques françaises. Complémentaire aux outils de veille.\n\n## Points de vigilance\nURL principale instable (erreur 400 signalée lors du scraping T1). Interface à prendre en main — moins ergonomique que les agrégateurs privés. Outil de soumission avant tout, pas de veille proactive.",
|
||||
"description_courte": "Plateforme officielle gratuite de l\u0027État pour la soumission dématérialisée de candidatures AO. Outil institutionnel de référence — à coupler avec un agrégateur pour la veille proactive.",
|
||||
"scoring": {
|
||||
"remuneration": null,
|
||||
"transparence": "✅",
|
||||
"pratiques": null,
|
||||
"ecologie": null,
|
||||
"matching": "✅",
|
||||
"tag_global": "recommande",
|
||||
"justification_tag": "Scoring simplifié 2 axes (plateforme appels d\u0027offres publics). Service officiel de l\u0027État entièrement gratuit (✅ Transparence) et couverture institutionnelle de toutes les entités publiques françaises (✅ Matching). URL instable signalée en T1 — à surveiller."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"transversal"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "gratuit",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "instao",
|
||||
"nom": "Instao",
|
||||
"url": "https://www.instao.fr",
|
||||
"type": "appel-offre-public",
|
||||
"description": "## Présentation\nPlateforme IA de veille marchés publics français, en beta en 2026. Agrège BOAMP, PLACE, e-marchespublics, Maximilien, Mégalis Bretagne et sources régionales. Catégorie Maîtrise d\u0027œuvre explicitement couverte. Fiches synthétiques par marché, alertes email, téléchargement DCE en 1 clic. Module IA pour rédiger mémoires techniques (DC1, DC2).\n\n## Modèle économique\nPlan Veille Automatisée : 89€ HT/mois, engagement mensuel, 1 utilisateur, 1 activité de veille. Plan PME : prix à l\u0027utilisation, utilisateurs illimités, multi-activités. Plan Entreprise : sur devis. Module Réponse IA : crédits (tarif non affiché). Tarification principale publique et claire.\n\n## Pour qui\nArchitectes indépendants souhaitant une veille MOE automatisée avec aide à la rédaction des mémoires techniques. Le module IA de réponse est un différenciateur fort pour les profils peu habitués aux marchés publics ou manquant de temps pour rédiger les dossiers.\n\n## Points forts\nCatégorie MOE archi explicitement couverte. Module IA aide à la rédaction (mémoires, DC1, DC2) — unique dans le panel. Tarification principale publique (89€/mois). Engagement mensuel sans engagement annuel forcé.\n\n## Points de vigilance\nService en beta (2026) — fiabilité et couverture à confirmer sur la durée. Tarif module Réponse IA non affiché (crédits). 89€/mois représente un investissement significatif pour un indépendant en démarrage.",
|
||||
"description_courte": "Veille marchés publics IA spécialisée MOE avec module rédaction mémoires DC1/DC2. 89€ HT/mois, engagement mensuel. En beta 2026 — prometteuse mais fiabilité à confirmer.",
|
||||
"scoring": {
|
||||
"remuneration": null,
|
||||
"transparence": "✅",
|
||||
"pratiques": null,
|
||||
"ecologie": null,
|
||||
"matching": "✅",
|
||||
"tag_global": "recommande",
|
||||
"justification_tag": "Scoring simplifié 2 axes (plateforme appels d\u0027offres publics). Tarification principale publique (89€/mois affiché sur /pricing, ✅ Transparence) et catégorie MOE explicitement couverte avec module IA rédaction unique dans le panel (✅ Matching). En beta — à surveiller."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"mar-conseil",
|
||||
"transversal"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "abonnement",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://www.instao.fr/pricing"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
},
|
||||
{
|
||||
"id": "francemarches",
|
||||
"nom": "FranceMarchés",
|
||||
"url": "https://www.francemarches.com/appels-offre/maitrise-oeuvre",
|
||||
"type": "appel-offre-public",
|
||||
"description": "## Présentation\nPortail d\u0027appels d\u0027offres publics agrégant les publications de la presse régionale (Ouest-France, Voix du Nord, Est Républicain, Le Dauphiné, La Montagne...) en plus du BOAMP et des sources officielles. 3 016 AO maîtrise d\u0027œuvre en cours au 06/05/2026. 108 000+ abonnés. CGU accessibles sur /cgu.\n\n## Modèle économique\nAccès aux annonces entièrement gratuit. Alertes email gratuites. CGU disponibles et accessibles sur /cgu. Modèle économique basé sur le financement de la presse régionale partenaire. Aucun frais d\u0027inscription ni d\u0027abonnement pour les entreprises candidates.\n\n## Pour qui\nArchitectes cherchant des AO de maîtrise d\u0027œuvre sur tout le territoire, y compris les zones moins couvertes par BOAMP seul. La couverture presse régionale est un complément précieux pour les marchés locaux et régionaux.\n\n## Points forts\nCouverture presse régionale unique dans le panel — accès aux marchés locaux non publiés sur BOAMP uniquement. 3 016 AO MOE actifs confirmés. Entièrement gratuit. 108 000+ abonnés (forte adoption). CGU transparentes et accessibles.\n\n## Points de vigilance\nRésultats MOE très variés (logements, réhabilitation, aménagement urbain, infrastructures) — filtrage nécessaire pour isoler les missions archi résidentielle. Données issues partiellement de la presse régionale — moins uniformes que les sources officielles.",
|
||||
"description_courte": "Portail gratuit agrégeant AO publics via presse régionale + BOAMP. 3 016 AO maîtrise d\u0027œuvre actifs. Couverture régionale unique — filtrage nécessaire parmi des résultats MOE variés.",
|
||||
"scoring": {
|
||||
"remuneration": null,
|
||||
"transparence": "✅",
|
||||
"pratiques": null,
|
||||
"ecologie": null,
|
||||
"matching": "✅",
|
||||
"tag_global": "recommande",
|
||||
"justification_tag": "Scoring simplifié 2 axes (plateforme appels d\u0027offres publics). Accès gratuit avec CGU accessibles sur /cgu (✅ Transparence) et 3 016 AO MOE actifs via couverture presse régionale unique dans le panel (✅ Matching)."
|
||||
},
|
||||
"secteurs_servis": [
|
||||
"transversal"
|
||||
],
|
||||
"zone_geo": "france-entiere",
|
||||
"cout_entree": "freemium",
|
||||
"date_creation_fiche": "2026-05-06",
|
||||
"date_derniere_maj": "2026-05-06",
|
||||
"source_donnees": [
|
||||
"https://www.francemarches.com/appels-offre/maitrise-oeuvre",
|
||||
"https://www.francemarches.com/cgu"
|
||||
],
|
||||
"flag_validation_jules": false,
|
||||
"commentaires": [
|
||||
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
46
server/api/codev/auth.post.ts
Normal file
46
server/api/codev/auth.post.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import { z } from 'zod'
|
||||
|
||||
const AuthSchema = z.object({
|
||||
password: z.string().min(1).max(100),
|
||||
})
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const body = await readBody(event)
|
||||
const parsed = AuthSchema.safeParse(body)
|
||||
|
||||
if (!parsed.success) {
|
||||
throw createError({ statusCode: 422, statusMessage: 'Mot de passe invalide' })
|
||||
}
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const expected = config.codevPassword || 'merci'
|
||||
|
||||
const isAdmin = parsed.data.password.trim().toLowerCase() === (config.codevAdminPassword || 'admin2026').trim().toLowerCase()
|
||||
const isUser = parsed.data.password.trim().toLowerCase() === expected.trim().toLowerCase()
|
||||
|
||||
if (!isAdmin && !isUser) {
|
||||
throw createError({ statusCode: 401, statusMessage: 'Mauvais mot de passe' })
|
||||
}
|
||||
|
||||
// Cookie session (user + admin)
|
||||
setCookie(event, 'codev_session', 'ok', {
|
||||
httpOnly: true,
|
||||
sameSite: 'lax',
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
maxAge: 60 * 60 * 24, // 24h
|
||||
path: '/',
|
||||
})
|
||||
|
||||
// Cookie admin si mot de passe admin
|
||||
if (isAdmin) {
|
||||
setCookie(event, 'codev_admin', 'ok', {
|
||||
httpOnly: true,
|
||||
sameSite: 'lax',
|
||||
secure: process.env.NODE_ENV === 'production',
|
||||
maxAge: 60 * 60 * 24, // 24h
|
||||
path: '/',
|
||||
})
|
||||
}
|
||||
|
||||
return { status: 200, ok: true, admin: isAdmin }
|
||||
})
|
||||
31
server/api/codev/fiches.get.ts
Normal file
31
server/api/codev/fiches.get.ts
Normal file
@@ -0,0 +1,31 @@
|
||||
import type { CodevFiche } from '~/types/codev'
|
||||
|
||||
export default defineEventHandler(async (event): Promise<{ list: CodevFiche[] }> => {
|
||||
const config = useRuntimeConfig()
|
||||
const tableId = config.codevTableId
|
||||
|
||||
if (!tableId) {
|
||||
throw createError({ statusCode: 500, message: 'codevTableId non configuré' })
|
||||
}
|
||||
|
||||
const url = `${config.nocodbUrl}/api/v2/tables/${tableId}/records?sort=created_at&limit=200`
|
||||
|
||||
const data: any = await $fetch(url, {
|
||||
headers: { 'xc-token': config.nocodbToken },
|
||||
}).catch(() => ({ list: [] }))
|
||||
|
||||
// Mapper chaque record NocoDB vers CodevFiche
|
||||
const list: CodevFiche[] = (data?.list ?? []).map((r: any) => ({
|
||||
id: r.Id ?? r.id,
|
||||
nom: r.nom || '',
|
||||
besoin: r.besoin || '',
|
||||
offre: r.offre || '',
|
||||
hashtags: (r.hashtags || '')
|
||||
.split(',')
|
||||
.map((h: string) => h.trim().toLowerCase().replace(/^#/, ''))
|
||||
.filter(Boolean),
|
||||
created_at: r.created_at || r.CreatedAt || new Date().toISOString(),
|
||||
}))
|
||||
|
||||
return { list }
|
||||
})
|
||||
63
server/api/codev/fiches.post.ts
Normal file
63
server/api/codev/fiches.post.ts
Normal file
@@ -0,0 +1,63 @@
|
||||
import { z } from 'zod'
|
||||
|
||||
const FicheSchema = z.object({
|
||||
nom: z.string().min(2).max(50).trim(),
|
||||
besoin: z.string().min(5).max(300).trim(),
|
||||
offre: z.string().min(5).max(300).trim(),
|
||||
hashtags: z.array(z.string().max(30)).max(3).default([]),
|
||||
})
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const body = await readBody(event)
|
||||
const parsed = FicheSchema.safeParse(body)
|
||||
|
||||
if (!parsed.success) {
|
||||
throw createError({
|
||||
statusCode: 422,
|
||||
statusMessage: 'Validation échouée',
|
||||
data: parsed.error.flatten().fieldErrors,
|
||||
})
|
||||
}
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const tableId = config.codevTableId
|
||||
const baseId = config.codevBaseId || 'pipilvsi7dibo80'
|
||||
|
||||
const payload = {
|
||||
nom: parsed.data.nom,
|
||||
besoin: parsed.data.besoin,
|
||||
offre: parsed.data.offre,
|
||||
hashtags: parsed.data.hashtags
|
||||
.map((h) => h.trim().toLowerCase().replace(/^#/, ''))
|
||||
.filter(Boolean)
|
||||
.slice(0, 3)
|
||||
.join(','),
|
||||
created_at: new Date().toISOString(),
|
||||
}
|
||||
|
||||
// NocoDB v1 endpoint pour INSERT (cf. submit/index.post.ts pour le pattern)
|
||||
const insertUrl = `${config.nocodbUrl}/api/v1/db/data/noco/${baseId}/${tableId}`
|
||||
|
||||
let inserted: any
|
||||
try {
|
||||
inserted = await $fetch(insertUrl, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'xc-token': config.nocodbToken,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
} catch (e: any) {
|
||||
console.error('[codev/fiches.post] NocoDB insert error:', e?.message ?? e)
|
||||
throw createError({
|
||||
statusCode: 502,
|
||||
statusMessage: 'Erreur serveur, réessaie',
|
||||
})
|
||||
}
|
||||
|
||||
return {
|
||||
status: 201,
|
||||
id: inserted?.Id ?? inserted?.id ?? null,
|
||||
}
|
||||
})
|
||||
25
server/api/codev/fiches/[id].delete.ts
Normal file
25
server/api/codev/fiches/[id].delete.ts
Normal file
@@ -0,0 +1,25 @@
|
||||
export default defineEventHandler(async (event) => {
|
||||
// Vérif cookie admin
|
||||
const adminCookie = getCookie(event, 'codev_admin')
|
||||
if (adminCookie !== 'ok') {
|
||||
throw createError({ statusCode: 403, statusMessage: 'Accès refusé' })
|
||||
}
|
||||
|
||||
const config = useRuntimeConfig()
|
||||
const tableId = config.codevTableId
|
||||
const id = getRouterParam(event, 'id')
|
||||
|
||||
if (!tableId || !id) {
|
||||
throw createError({ statusCode: 400, message: 'Parametre manquant' })
|
||||
}
|
||||
|
||||
await $fetch(`${config.nocodbUrl}/api/v2/tables/${tableId}/records`, {
|
||||
method: 'DELETE',
|
||||
headers: { 'xc-token': config.nocodbToken, 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ Id: Number(id) }),
|
||||
}).catch(() => {
|
||||
throw createError({ statusCode: 502, statusMessage: 'Erreur suppression' })
|
||||
})
|
||||
|
||||
return { status: 200, ok: true }
|
||||
})
|
||||
34
server/api/codev/fiches/[id].get.ts
Normal file
34
server/api/codev/fiches/[id].get.ts
Normal file
@@ -0,0 +1,34 @@
|
||||
import type { CodevFiche } from '~/types/codev'
|
||||
|
||||
export default defineEventHandler(async (event): Promise<CodevFiche> => {
|
||||
const config = useRuntimeConfig()
|
||||
const tableId = config.codevTableId
|
||||
const baseId = config.codevBaseId || 'pipilvsi7dibo80'
|
||||
const id = getRouterParam(event, 'id')
|
||||
|
||||
if (!tableId || !id) {
|
||||
throw createError({ statusCode: 400, message: 'Parametre manquant' })
|
||||
}
|
||||
|
||||
const url = `${config.nocodbUrl}/api/v1/db/data/noco/${baseId}/${tableId}/${id}`
|
||||
|
||||
const r: any = await $fetch(url, {
|
||||
headers: { 'xc-token': config.nocodbToken },
|
||||
}).catch(() => null)
|
||||
|
||||
if (!r) {
|
||||
throw createError({ statusCode: 404, message: 'Fiche introuvable' })
|
||||
}
|
||||
|
||||
return {
|
||||
id: r.Id ?? r.id,
|
||||
nom: r.nom || '',
|
||||
besoin: r.besoin || '',
|
||||
offre: r.offre || '',
|
||||
hashtags: (r.hashtags || '')
|
||||
.split(',')
|
||||
.map((h: string) => h.trim().toLowerCase().replace(/^#/, ''))
|
||||
.filter(Boolean),
|
||||
created_at: r.created_at || r.CreatedAt || '',
|
||||
}
|
||||
})
|
||||
59
server/api/codev/fiches/[id].patch.ts
Normal file
59
server/api/codev/fiches/[id].patch.ts
Normal file
@@ -0,0 +1,59 @@
|
||||
import { z } from 'zod'
|
||||
|
||||
const PatchSchema = z.object({
|
||||
nom: z.string().min(2).max(50).trim(),
|
||||
besoin: z.string().min(5).max(300).trim(),
|
||||
offre: z.string().min(5).max(300).trim(),
|
||||
hashtags: z.array(z.string().max(30)).max(3).default([]),
|
||||
})
|
||||
|
||||
export default defineEventHandler(async (event) => {
|
||||
const config = useRuntimeConfig()
|
||||
const tableId = config.codevTableId
|
||||
const baseId = config.codevBaseId || 'pipilvsi7dibo80'
|
||||
const id = getRouterParam(event, 'id')
|
||||
const body = await readBody(event)
|
||||
|
||||
if (!tableId || !id) {
|
||||
throw createError({ statusCode: 400, message: 'Parametre manquant' })
|
||||
}
|
||||
|
||||
const parsed = PatchSchema.safeParse(body)
|
||||
if (!parsed.success) {
|
||||
throw createError({
|
||||
statusCode: 422,
|
||||
statusMessage: 'Validation echouee',
|
||||
data: parsed.error.flatten().fieldErrors,
|
||||
})
|
||||
}
|
||||
|
||||
const payload = {
|
||||
nom: parsed.data.nom,
|
||||
besoin: parsed.data.besoin,
|
||||
offre: parsed.data.offre,
|
||||
hashtags: parsed.data.hashtags
|
||||
.map((h) => h.trim().toLowerCase().replace(/^#/, ''))
|
||||
.filter(Boolean)
|
||||
.slice(0, 3)
|
||||
.join(','),
|
||||
}
|
||||
|
||||
// NocoDB v1 PATCH par Id
|
||||
const url = `${config.nocodbUrl}/api/v1/db/data/noco/${baseId}/${tableId}/${id}`
|
||||
|
||||
try {
|
||||
await $fetch(url, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'xc-token': config.nocodbToken,
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(payload),
|
||||
})
|
||||
} catch (e: any) {
|
||||
console.error('[codev/fiches.patch] NocoDB patch error:', e?.message ?? e)
|
||||
throw createError({ statusCode: 502, statusMessage: 'Erreur serveur' })
|
||||
}
|
||||
|
||||
return { status: 200, ok: true }
|
||||
})
|
||||
5
server/api/codev/me.get.ts
Normal file
5
server/api/codev/me.get.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default defineEventHandler((event) => {
|
||||
const admin = getCookie(event, 'codev_admin') === 'ok'
|
||||
const session = getCookie(event, 'codev_session') === 'ok'
|
||||
return { admin, session }
|
||||
})
|
||||
21
server/middleware/codev-auth.ts
Normal file
21
server/middleware/codev-auth.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
// Middleware server Nuxt — protection des routes /codev/fiche et /codev/carto
|
||||
// Laisse passer /codev (lock screen), /codev/demo et toutes les routes /api/*
|
||||
|
||||
export default defineEventHandler((event) => {
|
||||
const url = getRequestURL(event)
|
||||
const path = url.pathname
|
||||
|
||||
// Seulement les routes sous /codev/
|
||||
if (!path.startsWith('/codev/')) return
|
||||
|
||||
// Routes publiques : /codev/demo et /codev/qr (et sous-routes éventuelles)
|
||||
if (path === '/codev/demo' || path.startsWith('/codev/demo/')) return
|
||||
if (path === '/codev/qr' || path.startsWith('/codev/qr/')) return
|
||||
|
||||
// Vérification cookie
|
||||
const session = getCookie(event, 'codev_session')
|
||||
if (session === 'ok') return
|
||||
|
||||
// Non authentifié -> redirect vers /codev (lock screen)
|
||||
return sendRedirect(event, '/codev', 302)
|
||||
})
|
||||
18
types/codev.ts
Normal file
18
types/codev.ts
Normal file
@@ -0,0 +1,18 @@
|
||||
export interface CodevFiche {
|
||||
id: number
|
||||
nom: string
|
||||
besoin: string
|
||||
offre: string
|
||||
hashtags: string[] // parsé depuis CSV NocoDB
|
||||
created_at: string // ISO
|
||||
}
|
||||
|
||||
export interface CodevMatch {
|
||||
fromId: number
|
||||
toId: number
|
||||
score: number // 0-1
|
||||
mode: 'solution' | 'alliance' | 'surprise'
|
||||
// solution : fromId.besoin matche toId.offre (orienté)
|
||||
// alliance : symétrique sur besoin
|
||||
// surprise : symétrique sur offre
|
||||
}
|
||||
106
types/plateforme-taff.ts
Normal file
106
types/plateforme-taff.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
/**
|
||||
* Types V1 — Carte 3 AEP "Trouver du taf en archi"
|
||||
* Source : public/data/plateformes-taff.json
|
||||
* Spec figée : 0 INBOX/PROMPTS/cascade-megaboum/MP-TAFF-app-trouver-du-taf.md
|
||||
*/
|
||||
|
||||
export type AxeScore = "✅" | "⚠️" | "❌";
|
||||
|
||||
export type TagGlobal = "recommande" | "sous-reserve" | "a-eviter";
|
||||
|
||||
export type Secteur =
|
||||
| "renovation"
|
||||
| "construction-neuve"
|
||||
| "urbanisme"
|
||||
| "architecture-interieure"
|
||||
| "paysage"
|
||||
| "mar-conseil"
|
||||
| "transversal";
|
||||
|
||||
export type TypePlateforme =
|
||||
| "b2c-mise-en-relation" // V1 cible (Travaux.com, Habitatpresto, etc.)
|
||||
| "appel-offre-public" // V1 onglet bonus light
|
||||
| "communaute-pro"; // backlog V2 (Welow, etc.)
|
||||
|
||||
export type CoutEntree = "gratuit" | "freemium" | "abonnement" | "lead-paye" | "commission";
|
||||
|
||||
export type ZoneGeo = "france-entiere" | "regional" | string;
|
||||
|
||||
export interface ScoringTaff {
|
||||
// Pour b2c-mise-en-relation : tous les 5 axes sont remplis.
|
||||
// Pour appel-offre-public : seuls transparence + matching sont remplis,
|
||||
// les 3 autres sont null (scoring simplifié décision F du MP).
|
||||
remuneration: AxeScore | null;
|
||||
transparence: AxeScore;
|
||||
pratiques: AxeScore | null;
|
||||
ecologie: AxeScore | null;
|
||||
matching: AxeScore;
|
||||
tag_global: TagGlobal;
|
||||
justification_tag: string; // 1-2 phrases pourquoi ce tag
|
||||
}
|
||||
|
||||
export interface Commentaire {
|
||||
id: string;
|
||||
date: string;
|
||||
auteur_pseudo: string;
|
||||
contenu: string;
|
||||
modere: boolean;
|
||||
}
|
||||
|
||||
export interface PlateformeTaff {
|
||||
id: string; // slug-kebab
|
||||
nom: string;
|
||||
url: string;
|
||||
type: TypePlateforme;
|
||||
description: string; // IA 250 mots (5 sections fixes ≤50 mots)
|
||||
description_courte: string; // IA 30 mots (carte preview)
|
||||
|
||||
scoring: ScoringTaff;
|
||||
|
||||
secteurs_servis: Secteur[];
|
||||
zone_geo: ZoneGeo; // si "regional", précise zones
|
||||
cout_entree: CoutEntree;
|
||||
|
||||
date_creation_fiche: string; // ISO
|
||||
date_derniere_maj: string; // ISO — pour pipeline trimestriel
|
||||
source_donnees: string[]; // URLs scrapées
|
||||
flag_validation_jules: boolean; // true si tag ❌ validé manuellement
|
||||
|
||||
commentaires?: Commentaire[];
|
||||
}
|
||||
|
||||
export interface PlateformesTaffData {
|
||||
meta: {
|
||||
version: string;
|
||||
date_generation: string; // ISO
|
||||
total: number;
|
||||
repartition: {
|
||||
recommande: number;
|
||||
sous_reserve: number;
|
||||
a_eviter: number;
|
||||
};
|
||||
repartition_type: {
|
||||
b2c: number;
|
||||
appel_offre_public: number;
|
||||
};
|
||||
};
|
||||
plateformes: PlateformeTaff[];
|
||||
}
|
||||
|
||||
// ── Helpers ────────────────────────────────────────────────────────────────────
|
||||
|
||||
export const FAMILLES_SECTEUR: { id: Secteur; label: string; color: string }[] = [
|
||||
{ id: "renovation", label: "Rénovation", color: "#5a7a4a" },
|
||||
{ id: "construction-neuve", label: "Construction neuve", color: "#3d6a8c" },
|
||||
{ id: "urbanisme", label: "Urbanisme", color: "#6b3fa0" },
|
||||
{ id: "architecture-interieure", label: "Archi intérieure", color: "#a85d3e" },
|
||||
{ id: "paysage", label: "Paysage", color: "#5a7a4a" },
|
||||
{ id: "mar-conseil", label: "MAR / Conseil", color: "#c4a472" },
|
||||
{ id: "transversal", label: "Transversal", color: "#888888" },
|
||||
];
|
||||
|
||||
export const TAG_LABELS: Record<TagGlobal, { label: string; emoji: string; color: string }> = {
|
||||
"recommande": { label: "Recommandé AEP", emoji: "✅", color: "#5a7a4a" },
|
||||
"sous-reserve": { label: "Sous réserve", emoji: "⚠️", color: "#c4a472" },
|
||||
"a-eviter": { label: "À éviter", emoji: "❌", color: "#a85d3e" },
|
||||
};
|
||||
106
utils/codev/matching.ts
Normal file
106
utils/codev/matching.ts
Normal file
@@ -0,0 +1,106 @@
|
||||
import type { CodevFiche, CodevMatch } from '~/types/codev'
|
||||
|
||||
const STOP_WORDS_FR = new Set([
|
||||
'le', 'la', 'les', 'un', 'une', 'des', 'de', 'du', 'au', 'aux',
|
||||
'et', 'ou', 'mais', 'donc', 'car', 'ni', 'or',
|
||||
'a', 'en', 'pour', 'par', 'sur', 'avec', 'sans', 'dans', 'sous',
|
||||
'je', 'tu', 'il', 'elle', 'on', 'nous', 'vous', 'ils', 'elles',
|
||||
'mon', 'ma', 'mes', 'ton', 'ta', 'tes', 'son', 'sa', 'ses',
|
||||
'notre', 'nos', 'votre', 'vos', 'leur', 'leurs',
|
||||
'ce', 'cet', 'cette', 'ces', 'qui', 'que', 'quoi', 'dont',
|
||||
'est', 'sont', 'etre', 'ai', 'as', 'avoir',
|
||||
'pas', 'plus', 'moins', 'tres', 'aussi', 'bien', 'tout', 'tous',
|
||||
'me', 'te', 'se', 'lui', 'leur', 'y',
|
||||
])
|
||||
|
||||
function tokenize(text: string): Set<string> {
|
||||
if (!text) return new Set()
|
||||
const tokens = text
|
||||
.toLowerCase()
|
||||
.replace(/[.,;:!?()'"\-/]/g, ' ')
|
||||
.split(/\s+/)
|
||||
.filter((t) => t.length >= 3 && !STOP_WORDS_FR.has(t))
|
||||
return new Set(tokens)
|
||||
}
|
||||
|
||||
function jaccard(a: Set<string>, b: Set<string>): number {
|
||||
if (a.size === 0 || b.size === 0) return 0
|
||||
let inter = 0
|
||||
for (const x of a) if (b.has(x)) inter++
|
||||
const union = a.size + b.size - inter
|
||||
return union === 0 ? 0 : inter / union
|
||||
}
|
||||
|
||||
function score(textA: string, hashtagsA: string[], textB: string, hashtagsB: string[]): number {
|
||||
const tagsA = new Set(hashtagsA.map((h) => h.toLowerCase()))
|
||||
const tagsB = new Set(hashtagsB.map((h) => h.toLowerCase()))
|
||||
|
||||
if (tagsA.size > 0 && tagsB.size > 0) {
|
||||
return jaccard(tagsA, tagsB)
|
||||
}
|
||||
return jaccard(tokenize(textA), tokenize(textB))
|
||||
}
|
||||
|
||||
// scoreDirect tokenise TOUJOURS les textes, ignore les hashtags
|
||||
// Utilise pour matchSolution : besoin vs offre doivent etre compares par leur contenu reel
|
||||
function scoreDirect(textA: string, textB: string): number {
|
||||
return jaccard(tokenize(textA), tokenize(textB))
|
||||
}
|
||||
|
||||
export function matchSolution(fiches: CodevFiche[], threshold = 0.18): CodevMatch[] {
|
||||
const matches: CodevMatch[] = []
|
||||
for (const a of fiches) {
|
||||
for (const b of fiches) {
|
||||
if (a.id === b.id) continue
|
||||
// Solution : on compare le TEXTE besoin de A avec le TEXTE offre de B
|
||||
// On ignore les hashtags pour differencier besoin et offre
|
||||
const s = scoreDirect(a.besoin, b.offre)
|
||||
if (s >= threshold) {
|
||||
matches.push({ fromId: a.id, toId: b.id, score: s, mode: 'solution' })
|
||||
}
|
||||
}
|
||||
}
|
||||
return matches
|
||||
}
|
||||
|
||||
export function matchAlliance(fiches: CodevFiche[], threshold = 0.25): CodevMatch[] {
|
||||
const matches: CodevMatch[] = []
|
||||
for (let i = 0; i < fiches.length; i++) {
|
||||
for (let j = i + 1; j < fiches.length; j++) {
|
||||
const a = fiches[i], b = fiches[j]
|
||||
// Alliance : besoins similaires — on compare hashtags si presents, sinon textes
|
||||
const s = score(a.besoin, a.hashtags, b.besoin, b.hashtags)
|
||||
if (s >= threshold) {
|
||||
matches.push({ fromId: a.id, toId: b.id, score: s, mode: 'alliance' })
|
||||
}
|
||||
}
|
||||
}
|
||||
return matches
|
||||
}
|
||||
|
||||
export function matchSurprise(fiches: CodevFiche[], threshold = 0.25): CodevMatch[] {
|
||||
const matches: CodevMatch[] = []
|
||||
for (let i = 0; i < fiches.length; i++) {
|
||||
for (let j = i + 1; j < fiches.length; j++) {
|
||||
const a = fiches[i], b = fiches[j]
|
||||
// Surprise : offres similaires
|
||||
const s = score(a.offre, a.hashtags, b.offre, b.hashtags)
|
||||
if (s >= threshold) {
|
||||
matches.push({ fromId: a.id, toId: b.id, score: s, mode: 'surprise' })
|
||||
}
|
||||
}
|
||||
}
|
||||
return matches
|
||||
}
|
||||
|
||||
export function computeMatches(
|
||||
fiches: CodevFiche[],
|
||||
mode: 'solution' | 'alliance' | 'surprise',
|
||||
threshold?: number,
|
||||
): CodevMatch[] {
|
||||
switch (mode) {
|
||||
case 'solution': return matchSolution(fiches, threshold)
|
||||
case 'alliance': return matchAlliance(fiches, threshold)
|
||||
case 'surprise': return matchSurprise(fiches, threshold)
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user