cinqcinqdev-seo 0.1.8 → 0.1.10

package/dist/runtime/pages/admin/personas/[id].vue

@@ -0,0 +1,170 @@
+<script setup>
+import { ref, onMounted, useHead, useRoute, navigateTo } from "#imports";
+import { useAdminPersonas, useAdminContent } from "#imports";
+const route = useRoute();
+const id = route.params.id;
+useHead({ title: "Persona - Admin" });
+const { fetchPersonaById, updatePersona } = useAdminPersonas();
+const { getContentByPersona } = useAdminContent();
+const persona = ref(null);
+const contents = ref([]);
+const loading = ref(true);
+const editMode = ref(false);
+const saving = ref(false);
+const formData = ref({});
+onMounted(async () => {
+  loading.value = true;
+  try {
+    const [p, c] = await Promise.all([fetchPersonaById(id), getContentByPersona(id)]);
+    persona.value = p;
+    contents.value = c || [];
+    formData.value = { ...p };
+  } catch {
+  } finally {
+    loading.value = false;
+  }
+});
+const saveChanges = async () => {
+  saving.value = true;
+  try {
+    const updated = await updatePersona(id, formData.value);
+    persona.value = updated;
+    editMode.value = false;
+  } catch {
+  } finally {
+    saving.value = false;
+  }
+};
+const getInitials = (name) => name ? name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?";
+const statusClass = {
+  draft: "bg-slate-100 text-slate-600",
+  approved: "bg-blue-100 text-blue-600",
+  published: "bg-emerald-100 text-emerald-600",
+  archived: "bg-amber-100 text-amber-600"
+};
+</script>
+
+<template>
+  <AdminDashboardLayout>
+    <div class="max-w-5xl mx-auto px-6 md:px-10 py-10">
+      <button @click="navigateTo('/admin/personas')" class="flex items-center gap-2 text-slate-500 hover:text-blue-600 font-semibold transition-all mb-8 group">
+        <Icon name="mdi:arrow-left" class="text-xl group-hover:-translate-x-1 transition-transform" />
+        Retour aux Personas
+      </button>
+
+      <div v-if="loading" class="h-64 bg-slate-100 animate-pulse rounded-3xl"></div>
+
+      <div v-else-if="persona">
+        <!-- Hero -->
+        <div class="bg-gradient-to-br from-blue-600 to-blue-800 rounded-3xl p-8 text-white mb-8 relative overflow-hidden">
+          <div class="absolute top-0 right-0 w-64 h-64 bg-white/10 rounded-full blur-3xl -mr-16 -mt-16"></div>
+          <div class="relative z-10 flex flex-col md:flex-row items-start gap-8">
+            <div class="w-24 h-24 bg-white/20 backdrop-blur-xl rounded-2xl flex items-center justify-center border-2 border-white/40 overflow-hidden flex-shrink-0 text-2xl font-black">
+              <img v-if="persona.avatar_url" :src="persona.avatar_url" :alt="persona.name" class="w-full h-full object-cover" />
+              <span v-else>{{ getInitials(persona.name) }}</span>
+            </div>
+            <div class="flex-1">
+              <h1 class="text-4xl font-black mb-1">{{ persona.name }}</h1>
+              <p class="text-blue-100 text-lg mb-4">{{ persona.job_title }}</p>
+              <div class="flex flex-wrap gap-4 text-sm text-blue-100">
+                <span v-if="persona.age"><Icon name="mdi:cake-variant" class="inline mr-1" />{{ persona.age }} ans</span>
+                <span v-if="persona.location"><Icon name="mdi:map-marker" class="inline mr-1" />{{ persona.location }}</span>
+              </div>
+            </div>
+            <div class="flex gap-3">
+              <button @click="editMode = !editMode" class="px-5 py-2.5 bg-white/20 hover:bg-white/30 text-white rounded-xl font-bold text-sm transition-all flex items-center gap-2">
+                <Icon name="mdi:pencil" /> Modifier
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Edit Form -->
+        <div v-if="editMode" class="bg-white rounded-3xl p-8 border border-slate-200 shadow-sm mb-8">
+          <h2 class="text-xl font-bold text-slate-900 mb-6">Modifier le Profil</h2>
+          <div class="grid grid-cols-2 gap-6 mb-6">
+            <div>
+              <label class="block text-xs font-black uppercase text-slate-500 mb-2">Nom</label>
+              <input v-model="formData.name" type="text" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl" />
+            </div>
+            <div>
+              <label class="block text-xs font-black uppercase text-slate-500 mb-2">Profession</label>
+              <input v-model="formData.job_title" type="text" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl" />
+            </div>
+            <div>
+              <label class="block text-xs font-black uppercase text-slate-500 mb-2">Age</label>
+              <input v-model.number="formData.age" type="number" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl" />
+            </div>
+            <div>
+              <label class="block text-xs font-black uppercase text-slate-500 mb-2">Ville</label>
+              <input v-model="formData.location" type="text" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl" />
+            </div>
+          </div>
+          <div class="mb-6">
+            <label class="block text-xs font-black uppercase text-slate-500 mb-2">A propos</label>
+            <textarea v-model="formData.about" rows="3" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl resize-none"></textarea>
+          </div>
+          <div class="flex gap-3">
+            <button @click="saveChanges" :disabled="saving" class="px-8 py-3 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 disabled:opacity-50">{{ saving ? "Enregistrement..." : "Enregistrer" }}</button>
+            <button @click="editMode = false" class="px-8 py-3 bg-slate-100 text-slate-700 font-bold rounded-xl hover:bg-slate-200">Annuler</button>
+          </div>
+        </div>
+
+        <!-- Info Cards -->
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+          <div class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
+            <h3 class="font-black text-slate-900 mb-4 flex items-center gap-2"><Icon name="mdi:account-outline" class="text-blue-600" /> A propos</h3>
+            <p class="text-slate-600 leading-relaxed">{{ persona.about || "Aucune description." }}</p>
+          </div>
+          <div v-if="(persona.core_needs || []).length > 0" class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
+            <h3 class="font-black text-slate-900 mb-4 flex items-center gap-2"><Icon name="mdi:star-outline" class="text-amber-500" /> Besoins Principaux</h3>
+            <div class="flex flex-wrap gap-2">
+              <span v-for="need in persona.core_needs" :key="need" class="px-3 py-1.5 bg-blue-50 text-blue-700 rounded-xl text-sm font-semibold">{{ need }}</span>
+            </div>
+          </div>
+          <div v-if="(persona.goals || []).length > 0" class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
+            <h3 class="font-black text-slate-900 mb-4 flex items-center gap-2"><Icon name="mdi:target" class="text-emerald-500" /> Objectifs</h3>
+            <ul class="space-y-2">
+              <li v-for="goal in persona.goals" :key="goal" class="flex items-start gap-2 text-sm text-slate-600">
+                <Icon name="mdi:check-circle" class="text-emerald-500 mt-0.5 flex-shrink-0" />{{ goal }}
+              </li>
+            </ul>
+          </div>
+          <div v-if="(persona.pain_points || []).length > 0" class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
+            <h3 class="font-black text-slate-900 mb-4 flex items-center gap-2"><Icon name="mdi:lightning-bolt" class="text-red-500" /> Points de Douleur</h3>
+            <ul class="space-y-2">
+              <li v-for="pain in persona.pain_points" :key="pain" class="flex items-start gap-2 text-sm text-slate-600">
+                <Icon name="mdi:close-circle" class="text-red-400 mt-0.5 flex-shrink-0" />{{ pain }}
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <!-- Recent Content -->
+        <div class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
+          <h3 class="font-black text-slate-900 mb-4 flex items-center gap-2">
+            <Icon name="mdi:file-document-multiple-outline" class="text-purple-500" /> Contenus associes ({{ contents.length }})
+          </h3>
+          <div v-if="contents.length === 0" class="text-center py-8 text-slate-300">
+            <Icon name="mdi:file-document-outline" class="text-4xl mb-2" />
+            <p class="text-sm">Aucun contenu pour cette persona</p>
+          </div>
+          <div v-else class="space-y-3">
+            <div v-for="content in contents.slice(0, 5)" :key="content.id" class="flex items-center justify-between p-4 bg-slate-50 rounded-xl">
+              <div class="flex-1 min-w-0">
+                <p class="font-bold text-slate-900 truncate">{{ content.title }}</p>
+                <p class="text-xs text-slate-500">{{ content.platform }} • {{ content.created_at ? new Date(content.created_at).toLocaleDateString("fr-FR") : "" }}</p>
+              </div>
+              <span :class="['px-2 py-1 rounded-lg text-[10px] font-black uppercase', statusClass[content.status] || statusClass.draft]">{{ content.status }}</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="text-center py-20">
+        <Icon name="mdi:account-off" class="text-6xl text-slate-200 mb-4" />
+        <p class="text-slate-400">Persona introuvable.</p>
+      </div>
+    </div>
+  </AdminDashboardLayout>
+</template>

package/dist/runtime/pages/admin/personas/[id].vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: any;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/pages/admin/personas/index.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: any;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/pages/admin/personas/index.vue

@@ -0,0 +1,266 @@
+<script setup>
+import { ref, computed, onMounted, useHead, navigateTo } from "#imports";
+import { useAdminPersonas } from "#imports";
+useHead({ title: "Personas - Admin" });
+const { fetchPersonas, createPersona, updatePersona, deletePersona } = useAdminPersonas();
+const personas = ref([]);
+const loading = ref(true);
+const showModal = ref(false);
+const saving = ref(false);
+const editingPersona = ref(null);
+const currentLayout = ref("table");
+const defaultForm = () => ({
+  name: "",
+  job_title: "",
+  age: null,
+  location: "",
+  about: "",
+  avatar_url: "",
+  core_needs: [],
+  goals: [],
+  pain_points: [],
+  frustrations: [],
+  preferred_channels: [],
+  topics: [],
+  gradient_class: ""
+});
+const formData = ref(defaultForm());
+const coreNeedsText = ref("");
+const goalsText = ref("");
+const painPointsText = ref("");
+const layoutIcon = computed(() => currentLayout.value === "table" ? "mdi:table" : "mdi:view-dashboard-variant-outline");
+const layoutLabel = computed(() => currentLayout.value === "table" ? "Tableau" : "Grille");
+onMounted(async () => {
+  loading.value = true;
+  try {
+    personas.value = await fetchPersonas();
+  } catch {
+  } finally {
+    loading.value = false;
+  }
+});
+const getInitials = (name) => name ? name.split(" ").map((n) => n[0]).join("").toUpperCase().slice(0, 2) : "?";
+const openCreate = () => {
+  editingPersona.value = null;
+  formData.value = defaultForm();
+  coreNeedsText.value = "";
+  goalsText.value = "";
+  painPointsText.value = "";
+  showModal.value = true;
+};
+const openEdit = (persona) => {
+  editingPersona.value = persona;
+  formData.value = { ...defaultForm(), ...persona };
+  coreNeedsText.value = (persona.core_needs || []).join("\n");
+  goalsText.value = (persona.goals || []).join("\n");
+  painPointsText.value = (persona.pain_points || []).join("\n");
+  showModal.value = true;
+};
+const closeModal = () => {
+  showModal.value = false;
+  editingPersona.value = null;
+};
+const savePersona = async () => {
+  if (!formData.value.name) return;
+  saving.value = true;
+  try {
+    const data = {
+      ...formData.value,
+      core_needs: coreNeedsText.value.split("\n").map((s) => s.trim()).filter(Boolean),
+      goals: goalsText.value.split("\n").map((s) => s.trim()).filter(Boolean),
+      pain_points: painPointsText.value.split("\n").map((s) => s.trim()).filter(Boolean)
+    };
+    if (editingPersona.value) await updatePersona(editingPersona.value.id, data);
+    else await createPersona(data);
+    personas.value = await fetchPersonas();
+    closeModal();
+  } catch {
+  } finally {
+    saving.value = false;
+  }
+};
+const handleDelete = async (id) => {
+  if (confirm("Supprimer cette persona ?")) {
+    try {
+      await deletePersona(id);
+      personas.value = await fetchPersonas();
+    } catch {
+    }
+  }
+};
+const viewPersona = (persona) => navigateTo(`/admin/personas/${persona.id}`);
+</script>
+
+<template>
+  <AdminDashboardLayout>
+    <div class="max-w-7xl mx-auto px-6 md:px-10 py-10">
+      <header class="flex flex-col md:flex-row md:items-end justify-between mb-12 gap-6">
+        <div>
+          <h1 class="text-5xl font-black text-slate-900 tracking-tight">User <span class="text-blue-600">Personas</span></h1>
+          <p class="text-lg text-slate-500 mt-2">Creez et gerez vos personas cibles.</p>
+        </div>
+        <div class="flex items-center gap-4">
+          <div class="relative group">
+            <button class="px-5 py-4 bg-white border border-slate-200 rounded-2xl font-bold text-slate-700 flex items-center gap-3 hover:border-blue-300 transition-all shadow-sm">
+              <Icon :name="layoutIcon" class="text-xl text-blue-600" />
+              <span class="text-sm">{{ layoutLabel }}</span>
+              <Icon name="mdi:chevron-down" class="text-slate-300" />
+            </button>
+            <div class="absolute right-0 mt-3 w-48 bg-white border border-slate-100 rounded-2xl shadow-2xl py-2 opacity-0 invisible group-hover:opacity-100 group-hover:visible transition-all z-30">
+              <button @click="currentLayout = 'table'" class="w-full px-4 py-3 text-left hover:bg-blue-50 flex items-center gap-3">
+                <Icon name="mdi:table" class="text-slate-400" />
+                <span :class="currentLayout === 'table' ? 'text-blue-600 font-black' : 'text-slate-600 font-bold'">Tableau</span>
+              </button>
+              <button @click="currentLayout = 'bento'" class="w-full px-4 py-3 text-left hover:bg-emerald-50 flex items-center gap-3">
+                <Icon name="mdi:view-dashboard-variant" class="text-slate-400" />
+                <span :class="currentLayout === 'bento' ? 'text-emerald-600 font-black' : 'text-slate-600 font-bold'">Grille</span>
+              </button>
+            </div>
+          </div>
+          <button @click="openCreate" class="px-8 py-4 bg-slate-900 text-white rounded-2xl font-black text-sm uppercase hover:bg-blue-600 transition-all flex items-center gap-3 shadow-xl">
+            <Icon name="mdi:plus" class="text-xl" /> Nouveau
+          </button>
+        </div>
+      </header>
+
+      <div v-if="loading" class="grid grid-cols-3 gap-6">
+        <div v-for="i in 3" :key="i" class="h-40 bg-slate-100 animate-pulse rounded-3xl"></div>
+      </div>
+
+      <div v-else-if="personas.length === 0" class="bg-white rounded-[3rem] p-20 text-center border-2 border-dashed border-slate-200">
+        <Icon name="mdi:account-question-outline" class="text-6xl text-slate-200 mb-6" />
+        <h3 class="text-2xl font-black text-slate-800">Aucune persona</h3>
+        <p class="text-slate-400 mt-2 mb-8">Creez vos premiers profils comportementaux.</p>
+        <button @click="openCreate" class="px-8 py-3 bg-blue-600 text-white rounded-2xl font-black text-sm uppercase hover:bg-slate-900 transition-all">Creer ma premiere persona</button>
+      </div>
+
+      <div v-else>
+        <!-- Table Layout -->
+        <div v-if="currentLayout === 'table'" class="bg-white rounded-2xl border border-slate-100 shadow-sm overflow-hidden">
+          <table class="w-full">
+            <thead>
+              <tr class="bg-slate-50 border-b border-slate-200">
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Avatar</th>
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Nom</th>
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Profession</th>
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Age</th>
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Ville</th>
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Besoins</th>
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-200">
+              <tr v-for="persona in personas" :key="persona.id" class="hover:bg-slate-50 transition-colors cursor-pointer" @click="viewPersona(persona)">
+                <td class="px-6 py-4">
+                  <div class="w-12 h-12 rounded-xl overflow-hidden bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center text-white font-black">
+                    <img v-if="persona.avatar_url" :src="persona.avatar_url" :alt="persona.name" class="w-full h-full object-cover" />
+                    <span v-else>{{ getInitials(persona.name) }}</span>
+                  </div>
+                </td>
+                <td class="px-6 py-4 font-bold text-slate-900">{{ persona.name }}</td>
+                <td class="px-6 py-4 text-sm text-slate-600">{{ persona.job_title || "-" }}</td>
+                <td class="px-6 py-4 text-sm text-slate-600">{{ persona.age || "-" }}</td>
+                <td class="px-6 py-4 text-sm text-slate-600">{{ persona.location || "-" }}</td>
+                <td class="px-6 py-4">
+                  <div class="flex flex-wrap gap-1">
+                    <span v-for="need in (persona.core_needs || []).slice(0, 2)" :key="need" class="px-2 py-0.5 bg-blue-100 text-blue-700 rounded text-xs font-semibold">{{ need }}</span>
+                    <span v-if="(persona.core_needs || []).length > 2" class="px-2 py-0.5 bg-slate-100 text-slate-600 rounded text-xs font-semibold">+{{ persona.core_needs.length - 2 }}</span>
+                  </div>
+                </td>
+                <td class="px-6 py-4" @click.stop>
+                  <div class="flex items-center gap-2">
+                    <button @click="viewPersona(persona)" class="p-2 hover:bg-blue-100 text-blue-600 rounded-lg"><Icon name="mdi:eye" class="text-lg" /></button>
+                    <button @click="openEdit(persona)" class="p-2 hover:bg-purple-100 text-purple-600 rounded-lg"><Icon name="mdi:pencil" class="text-lg" /></button>
+                    <button @click="handleDelete(persona.id)" class="p-2 hover:bg-red-100 text-red-600 rounded-lg"><Icon name="mdi:delete" class="text-lg" /></button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+
+        <!-- Bento Layout -->
+        <div v-else class="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6">
+          <div v-for="persona in personas" :key="persona.id" class="bg-white rounded-[2rem] border border-slate-100 p-8 shadow-sm hover:shadow-xl hover:scale-[1.02] transition-all cursor-pointer group" @click="viewPersona(persona)">
+            <div class="flex items-center gap-4 mb-6">
+              <div class="w-16 h-16 rounded-2xl shrink-0 overflow-hidden bg-gradient-to-br from-purple-400 to-pink-400 flex items-center justify-center text-white font-black text-xl">
+                <img v-if="persona.avatar_url" :src="persona.avatar_url" class="w-full h-full object-cover" />
+                <span v-else>{{ getInitials(persona.name) }}</span>
+              </div>
+              <div>
+                <h3 class="font-black text-lg text-slate-800 leading-none">{{ persona.name }}</h3>
+                <p class="text-[10px] font-black text-blue-600 uppercase tracking-widest mt-1">{{ persona.job_title }}</p>
+              </div>
+            </div>
+            <div class="p-4 bg-slate-50 rounded-2xl">
+              <p class="text-xs font-black text-slate-400 uppercase mb-2">A propos</p>
+              <p class="text-sm font-bold text-slate-700 line-clamp-2">"{{ persona.about || "Aucune description..." }}"</p>
+            </div>
+            <div class="flex items-center justify-between text-[10px] font-black uppercase text-slate-400 px-1 mt-4">
+              <span class="flex items-center gap-1"><Icon name="mdi:map-marker" /> {{ persona.location || "-" }}</span>
+              <span class="text-blue-600 group-hover:translate-x-1 transition-transform">Details</span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modal -->
+    <Teleport to="body">
+      <div v-if="showModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-4" @click.self="closeModal">
+        <div class="bg-white rounded-3xl max-w-2xl w-full max-h-[90vh] overflow-y-auto shadow-2xl">
+          <div class="p-8">
+            <div class="flex items-center justify-between mb-6">
+              <h2 class="text-2xl font-black text-slate-900">{{ editingPersona ? "Modifier Persona" : "Nouvelle Persona" }}</h2>
+              <button @click="closeModal" class="p-2 hover:bg-slate-100 rounded-xl"><Icon name="mdi:close" class="text-xl text-slate-400" /></button>
+            </div>
+            <div class="space-y-5">
+              <div class="grid grid-cols-2 gap-4">
+                <div>
+                  <label class="block text-xs font-black uppercase text-slate-500 mb-2">Nom *</label>
+                  <input v-model="formData.name" type="text" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none font-bold" />
+                </div>
+                <div>
+                  <label class="block text-xs font-black uppercase text-slate-500 mb-2">Profession</label>
+                  <input v-model="formData.job_title" type="text" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none" />
+                </div>
+                <div>
+                  <label class="block text-xs font-black uppercase text-slate-500 mb-2">Age</label>
+                  <input v-model.number="formData.age" type="number" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none" />
+                </div>
+                <div>
+                  <label class="block text-xs font-black uppercase text-slate-500 mb-2">Ville</label>
+                  <input v-model="formData.location" type="text" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none" />
+                </div>
+              </div>
+              <div>
+                <label class="block text-xs font-black uppercase text-slate-500 mb-2">A propos</label>
+                <textarea v-model="formData.about" rows="3" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none resize-none"></textarea>
+              </div>
+              <div>
+                <label class="block text-xs font-black uppercase text-slate-500 mb-2">URL Avatar</label>
+                <input v-model="formData.avatar_url" type="url" placeholder="https://..." class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none" />
+              </div>
+              <div>
+                <label class="block text-xs font-black uppercase text-slate-500 mb-2">Besoins principaux (un par ligne)</label>
+                <textarea v-model="coreNeedsText" rows="3" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none resize-none text-sm"></textarea>
+              </div>
+              <div>
+                <label class="block text-xs font-black uppercase text-slate-500 mb-2">Objectifs (un par ligne)</label>
+                <textarea v-model="goalsText" rows="3" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none resize-none text-sm"></textarea>
+              </div>
+              <div>
+                <label class="block text-xs font-black uppercase text-slate-500 mb-2">Points de douleur (un par ligne)</label>
+                <textarea v-model="painPointsText" rows="3" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none resize-none text-sm"></textarea>
+              </div>
+              <div class="flex gap-3 pt-4 border-t">
+                <button @click="savePersona" :disabled="saving" class="flex-1 px-6 py-3 bg-blue-600 text-white font-black rounded-xl hover:bg-blue-700 disabled:opacity-50">{{ saving ? "Enregistrement..." : "Enregistrer" }}</button>
+                <button @click="closeModal" class="px-6 py-3 bg-slate-100 text-slate-700 font-bold rounded-xl hover:bg-slate-200">Annuler</button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </AdminDashboardLayout>
+</template>

package/dist/runtime/pages/admin/personas/index.vue.d.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: any;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/pages/admin/products.d.vue.ts

@@ -0,0 +1,3 @@
+declare const __VLS_export: any;
+declare const _default: typeof __VLS_export;
+export default _default;