cinqcinqdev-seo 0.1.9 → 0.1.11

package/dist/runtime/pages/admin/pages/[type].vue

@@ -1,108 +1,180 @@
 <script setup>
-import { ref, computed, useRoute, useRuntimeConfig, useAsyncData, useHead, navigateTo, useSupabaseClient } from "#imports";
+import { ref, computed, watch, useRoute, useRuntimeConfig, useAsyncData, useHead, navigateTo, useSupabaseClient } from "#imports";
 const route = useRoute();
 const supabase = useSupabaseClient();
 const config = useRuntimeConfig().public.adminCms;
 const pageType = route.params.type;
 const table = config?.tables?.pages || "pages";
-const typeLabel = computed(() => {
-  return config?.pageTypes?.find((t) => t.id === pageType)?.label || pageType.replace(/_/g, " ");
-});
+const typeLabel = computed(
+  () => config?.pageTypes?.find((t) => t.id === pageType)?.label || pageType.replace(/_/g, " ")
+);
 const { data: pages, refresh } = await useAsyncData(`admin-pages-${pageType}`, async () => {
   const { data } = await supabase.from(table).select("id, title, slug, status, updated_at, seo_config").eq("type", pageType).order("updated_at", { ascending: false });
   return data;
 });
+const toast = ref(null);
+let toastTimer;
+const showToast = (msg, type = "success") => {
+  clearTimeout(toastTimer);
+  toast.value = { msg, type };
+  toastTimer = setTimeout(() => {
+    toast.value = null;
+  }, 3500);
+};
 const isCreating = ref(false);
 const newPageTitle = ref("");
+const createMode = ref("blank");
+const templates = ref([]);
+const selectedTemplateId = ref("");
+watch(isCreating, async (val) => {
+  if (val) {
+    const { data } = await supabase.from("pages_templates").select("id, name").order("created_at", { ascending: false });
+    templates.value = data || [];
+  } else {
+    createMode.value = "blank";
+    selectedTemplateId.value = "";
+    newPageTitle.value = "";
+  }
+});
 const handleCreate = async () => {
-  if (!newPageTitle.value.trim()) return;
+  if (!newPageTitle.value) return;
   const slug = newPageTitle.value.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]/g, "-").replace(/-+/g, "-").replace(/^-|-$/g, "");
-  const { data, error } = await supabase.from(table).insert([{ title: newPageTitle.value, slug, type: pageType, status: "draft", content: [] }]).select();
+  let content = [];
+  if (createMode.value === "template" && selectedTemplateId.value) {
+    const { data: tpl } = await supabase.from("pages_templates").select("content").eq("id", selectedTemplateId.value).single();
+    if (tpl) content = JSON.parse(JSON.stringify(tpl.content));
+  }
+  const { data, error } = await supabase.from(table).insert([{ title: newPageTitle.value, slug, type: pageType, status: "draft", content }]).select();
   if (!error && data) {
     navigateTo(`/admin/editor/${data[0].id}`);
   } else {
-    alert(error?.message || "Error: slug may already be in use.");
+    isCreating.value = false;
+    showToast("Ce slug est d\xE9j\xE0 utilis\xE9. Changez le titre.", "error");
   }
 };
-const handleDelete = async (id, title) => {
-  if (!confirm(`Delete "${title}"? This cannot be undone.`)) return;
-  const { error } = await supabase.from(table).delete().eq("id", id);
-  if (error) alert("Error: " + error.message);
-  else await refresh();
+const deleteModal = ref(null);
+const isDeleting = ref(false);
+const confirmDelete = (id, title) => {
+  deleteModal.value = { id, title };
+};
+const handleDelete = async () => {
+  if (!deleteModal.value) return;
+  isDeleting.value = true;
+  const { error } = await supabase.from(table).delete().eq("id", deleteModal.value.id);
+  isDeleting.value = false;
+  if (error) {
+    showToast("Erreur lors de la suppression.", "error");
+  } else {
+    showToast("Page supprim\xE9e.");
+    deleteModal.value = null;
+    await refresh();
+  }
+};
+const templateModal = ref(null);
+const templateName = ref("");
+const isSavingTemplate = ref(false);
+const openTemplateModal = (page) => {
+  templateModal.value = page;
+  templateName.value = page.title;
+};
+const handleTurnIntoTemplate = async () => {
+  if (!templateModal.value || !templateName.value.trim()) return;
+  isSavingTemplate.value = true;
+  const { data: fullPage } = await supabase.from(table).select("content").eq("id", templateModal.value.id).single();
+  const { error } = await supabase.from("pages_templates").insert({
+    name: templateName.value,
+    content: fullPage?.content ?? [],
+    source_page_id: templateModal.value.id
+  });
+  isSavingTemplate.value = false;
+  if (error) {
+    showToast("Erreur : " + error.message, "error");
+  } else {
+    showToast(`Template "${templateName.value}" enregistr\xE9.`);
+    templateModal.value = null;
+    templateName.value = "";
+  }
 };
 useHead({ title: computed(() => `${typeLabel.value} \u2014 Admin`) });
 </script>
 
 <template>
-  <div data-admin-cms>
-    <AdminNavbar />
-    <div class="p-8">
-      <div class="mb-8">
-        <NuxtLink to="/admin" class="text-sm text-gray-500 hover:text-blue-600">← Back to dashboard</NuxtLink>
-        <div class="flex justify-between items-end mt-4">
-          <div>
-            <h1 class="text-3xl font-bold text-gray-900">{{ typeLabel }}</h1>
-            <p class="text-gray-500 mt-1">Manage your content and internal linking.</p>
+  <AdminDashboardLayout>
+    <div class="p-8 max-w-5xl mx-auto">
+
+      <!-- Header -->
+      <div class="mb-8 flex items-center justify-between">
+        <div>
+          <div class="flex items-center gap-2 text-[11px] text-gray-400 mb-2">
+            <NuxtLink to="/admin" class="hover:text-gray-600 transition-colors">Tableau de bord</NuxtLink>
+            <span>/</span>
+            <span class="text-gray-600 font-medium">{{ typeLabel }}</span>
           </div>
-          <button
-            @click="isCreating = true"
-            class="bg-black text-white px-6 py-2.5 rounded-lg font-medium hover:bg-gray-800 transition shadow-lg"
-          >
-            + New page
-          </button>
+          <h1 class="text-2xl font-black text-gray-900">{{ typeLabel }}</h1>
+          <p class="text-sm text-gray-400 mt-1">{{ pages?.length ?? 0 }} page{{ (pages?.length ?? 0) > 1 ? "s" : "" }}</p>
         </div>
+        <button @click="isCreating = true"
+          class="bg-[#3d35ff] text-white px-5 py-2.5 rounded-xl text-sm font-bold hover:bg-[#2f28cc] transition shadow-lg shadow-[#3d35ff]/20 active:scale-95">
+          + Nouvelle page
+        </button>
       </div>
 
-      <div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
-        <div v-if="!pages?.length" class="p-20 text-center">
-          <p class="text-gray-400">No pages created yet in this category.</p>
+      <!-- Table -->
+      <div class="bg-white border border-gray-100 rounded-2xl shadow-sm overflow-hidden">
+        <div v-if="!pages?.length" class="py-24 text-center">
+          <svg class="w-10 h-10 mx-auto text-gray-200 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
+          <p class="text-sm font-semibold text-gray-500">Aucune page dans cette catégorie</p>
+          <p class="text-xs text-gray-400 mt-1">Créez votre première page pour commencer</p>
+          <button @click="isCreating = true" class="mt-5 px-5 py-2 bg-[#3d35ff] text-white rounded-xl text-xs font-bold hover:bg-[#2f28cc] transition">
+            + Créer
+          </button>
         </div>
 
         <table v-else class="w-full text-left">
-          <thead class="bg-gray-50 border-b border-gray-200">
-            <tr>
-              <th class="px-6 py-4 text-xs font-bold text-gray-400 uppercase">Title & URL</th>
-              <th class="px-6 py-4 text-xs font-bold text-gray-400 uppercase">SEO</th>
-              <th class="px-6 py-4 text-xs font-bold text-gray-400 uppercase">Status</th>
-              <th class="px-6 py-4 text-xs font-bold text-gray-400 uppercase text-right">Actions</th>
+          <thead>
+            <tr class="border-b border-gray-100">
+              <th class="px-6 py-3.5 text-[10px] font-black text-gray-400 uppercase tracking-widest">Page</th>
+              <th class="px-6 py-3.5 text-[10px] font-black text-gray-400 uppercase tracking-widest">SEO</th>
+              <th class="px-6 py-3.5 text-[10px] font-black text-gray-400 uppercase tracking-widest">Statut</th>
+              <th class="px-6 py-3.5 text-[10px] font-black text-gray-400 uppercase tracking-widest text-right">Actions</th>
             </tr>
           </thead>
-          <tbody class="divide-y divide-gray-100">
-            <tr v-for="page in pages" :key="page.id" class="hover:bg-gray-50 group transition-colors">
+          <tbody class="divide-y divide-gray-50">
+            <tr v-for="page in pages" :key="page.id" class="group hover:bg-gray-50/60 transition-colors">
               <td class="px-6 py-4">
-                <div class="font-semibold text-gray-800">{{ page.title }}</div>
-                <div class="text-xs text-blue-500 font-mono italic">/{{ page.slug }}</div>
+                <div class="font-bold text-gray-900 text-sm">{{ page.title }}</div>
+                <div class="text-[11px] text-[#3d35ff] font-mono mt-0.5 opacity-70">/{{ page.slug }}</div>
               </td>
               <td class="px-6 py-4">
-                <span v-if="page.seo_config?.meta_title" class="text-green-600 text-xs flex items-center gap-1.5">
-                  <span class="w-2 h-2 bg-green-500 rounded-full"></span> Optimized
+                <span v-if="page.seo_config?.meta_title" class="inline-flex items-center gap-1.5 text-[11px] font-semibold text-green-600">
+                  <span class="w-1.5 h-1.5 bg-green-500 rounded-full"></span> Optimisé
                 </span>
-                <span v-else class="text-amber-500 text-xs flex items-center gap-1.5">
-                  <span class="w-2 h-2 bg-amber-500 rounded-full"></span> Missing meta title
+                <span v-else class="inline-flex items-center gap-1.5 text-[11px] font-semibold text-amber-500">
+                  <span class="w-1.5 h-1.5 bg-amber-400 rounded-full"></span> Incomplet
                 </span>
               </td>
               <td class="px-6 py-4">
                 <span :class="[
-  'px-2 py-1 rounded text-[10px] font-bold uppercase tracking-wider',
-  page.status === 'published' ? 'bg-green-100 text-green-700' : 'bg-gray-100 text-gray-600'
-]">{{ page.status }}</span>
+  'inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-[10px] font-black uppercase tracking-wider',
+  page.status === 'published' ? 'bg-green-50 text-green-700' : 'bg-gray-100 text-gray-500'
+]">
+                  <span :class="['w-1.5 h-1.5 rounded-full', page.status === 'published' ? 'bg-green-500' : 'bg-gray-400']"></span>
+                  {{ page.status === "published" ? "Publi\xE9" : "Brouillon" }}
+                </span>
               </td>
-              <td class="px-6 py-4 text-right">
-                <div class="flex justify-end items-center gap-2">
-                  <NuxtLink
-                    :to="`/admin/editor/${page.id}`"
-                    class="bg-gray-100 text-gray-700 px-4 py-2 rounded-md text-sm font-medium hover:bg-black hover:text-white transition"
-                  >
-                    Edit
+              <td class="px-6 py-4">
+                <div class="flex items-center justify-end gap-1">
+                  <NuxtLink :to="`/admin/editor/${page.id}`"
+                    class="px-3 py-1.5 rounded-lg text-[11px] font-bold bg-gray-100 text-gray-600 hover:bg-[#3d35ff] hover:text-white transition-all">
+                    Éditer
                   </NuxtLink>
-                  <button
-                    @click="handleDelete(page.id, page.title)"
-                    class="p-2 text-gray-400 hover:text-red-600 transition-colors"
-                    title="Delete page"
-                  >
-                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                      <path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/>
-                    </svg>
+                  <button @click="openTemplateModal(page)"
+                    class="p-1.5 rounded-lg text-gray-300 hover:text-[#3d35ff] hover:bg-[#3d35ff]/5 transition-all" title="Sauvegarder comme template">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><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>
+                  </button>
+                  <button @click="confirmDelete(page.id, page.title)"
+                    class="p-1.5 rounded-lg text-gray-300 hover:text-red-500 hover:bg-red-50 transition-all" title="Supprimer">
+                    <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>
                   </button>
                 </div>
               </td>
@@ -111,28 +183,140 @@ useHead({ title: computed(() => `${typeLabel.value} \u2014 Admin`) });
         </table>
       </div>
 
-      <!-- Create modal -->
-      <div v-if="isCreating" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
-        <div class="bg-white p-8 rounded-2xl max-w-md w-full shadow-2xl">
-          <h3 class="text-xl font-bold mb-4">New {{ typeLabel }}</h3>
-          <input
-            v-model="newPageTitle"
-            type="text"
-            placeholder="e.g. My Premium SEO Service"
-            class="w-full border border-gray-300 p-3 rounded-lg mb-6 focus:ring-2 focus:ring-black outline-none transition"
-            @keyup.enter="handleCreate"
-          />
-          <div class="flex gap-3">
-            <button @click="isCreating = false;
-  newPageTitle = ''" class="flex-1 px-4 py-2 border border-gray-200 rounded-lg hover:bg-gray-50 transition">
-              Cancel
-            </button>
-            <button @click="handleCreate" class="flex-1 px-4 py-2 bg-black text-white rounded-lg hover:bg-gray-800 transition">
-              Create
-            </button>
+      <!-- ── Create modal ───────────────────────────────────── -->
+      <Teleport to="body">
+        <div v-if="isCreating" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+          <div class="bg-white rounded-2xl max-w-md w-full shadow-2xl overflow-hidden">
+            <div class="px-7 pt-7 pb-5 border-b border-gray-100 flex items-start justify-between">
+              <div>
+                <h3 class="text-lg font-black text-gray-900">Nouvelle page</h3>
+                <p class="text-xs text-gray-400 mt-0.5">{{ typeLabel }}</p>
+              </div>
+              <button @click="isCreating = false" class="text-gray-300 hover:text-gray-500 transition-colors mt-0.5">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+              </button>
+            </div>
+
+            <div class="px-7 py-6 space-y-5">
+              <div>
+                <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2 block">Titre</label>
+                <input v-model="newPageTitle" type="text" placeholder="Ex: Création site web"
+                  class="w-full border border-gray-200 p-3 rounded-xl text-sm focus:ring-2 focus:ring-[#3d35ff] outline-none transition" autofocus />
+              </div>
+              <div>
+                <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2 block">Départ</label>
+                <div class="grid grid-cols-2 gap-2">
+                  <button @click="createMode = 'blank'"
+                    :class="[
+  'py-3 rounded-xl border-2 text-xs font-black uppercase tracking-wide transition',
+  createMode === 'blank' ? 'border-[#3d35ff] bg-[#3d35ff]/5 text-[#3d35ff]' : 'border-gray-100 text-gray-400 hover:border-gray-300'
+]">
+                    Page vierge
+                  </button>
+                  <button @click="createMode = 'template'"
+                    :class="[
+  'py-3 rounded-xl border-2 text-xs font-black uppercase tracking-wide transition',
+  createMode === 'template' ? 'border-[#3d35ff] bg-[#3d35ff]/5 text-[#3d35ff]' : 'border-gray-100 text-gray-400 hover:border-gray-300'
+]">
+                    Template
+                  </button>
+                </div>
+              </div>
+              <div v-if="createMode === 'template'">
+                <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2 block">Template</label>
+                <select v-model="selectedTemplateId" class="w-full border border-gray-200 p-3 rounded-xl text-sm outline-none focus:ring-2 focus:ring-[#3d35ff] transition bg-white">
+                  <option value="">— Choisir —</option>
+                  <option v-for="tpl in templates" :key="tpl.id" :value="tpl.id">{{ tpl.name }}</option>
+                </select>
+                <p v-if="!templates.length" class="text-[11px] text-gray-400 mt-1.5">Aucun template disponible.</p>
+              </div>
+            </div>
+
+            <div class="px-7 pb-7 flex gap-3">
+              <button @click="isCreating = false" class="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl text-sm font-semibold hover:bg-gray-50 transition">
+                Annuler
+              </button>
+              <button @click="handleCreate"
+                :disabled="!newPageTitle || createMode === 'template' && !selectedTemplateId"
+                class="flex-1 px-4 py-2.5 bg-[#3d35ff] text-white rounded-xl text-sm font-bold hover:bg-[#2f28cc] transition disabled:opacity-40 disabled:cursor-not-allowed shadow-lg shadow-[#3d35ff]/20">
+                Créer →
+              </button>
+            </div>
           </div>
         </div>
-      </div>
+      </Teleport>
+
+      <!-- ── Delete confirmation modal ─────────────────────── -->
+      <Teleport to="body">
+        <div v-if="deleteModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+          <div class="bg-white rounded-2xl max-w-sm w-full shadow-2xl overflow-hidden">
+            <div class="p-7">
+              <div class="w-11 h-11 bg-red-50 rounded-xl flex items-center justify-center mb-4">
+                <svg class="w-5 h-5 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M10.29 3.86L1.82 18a2 2 0 001.71 3h16.94a2 2 0 001.71-3L13.71 3.86a2 2 0 00-3.42 0z"/></svg>
+              </div>
+              <h3 class="text-base font-black text-gray-900 mb-1">Supprimer cette page ?</h3>
+              <p class="text-sm text-gray-500">
+                <span class="font-semibold text-gray-700">« {{ deleteModal.title }} »</span> sera définitivement supprimée. Cette action est irréversible.
+              </p>
+            </div>
+            <div class="px-7 pb-7 flex gap-3">
+              <button @click="deleteModal = null" class="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl text-sm font-semibold hover:bg-gray-50 transition">
+                Annuler
+              </button>
+              <button @click="handleDelete" :disabled="isDeleting"
+                class="flex-1 px-4 py-2.5 bg-red-500 text-white rounded-xl text-sm font-bold hover:bg-red-600 transition disabled:opacity-50">
+                {{ isDeleting ? "Suppression..." : "Supprimer" }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Teleport>
+
+      <!-- ── Save as template modal ─────────────────────────── -->
+      <Teleport to="body">
+        <div v-if="templateModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm flex items-center justify-center p-4 z-50">
+          <div class="bg-white rounded-2xl max-w-sm w-full shadow-2xl overflow-hidden">
+            <div class="px-7 pt-7 pb-5 border-b border-gray-100 flex items-start justify-between">
+              <div>
+                <h3 class="text-base font-black text-gray-900">Sauvegarder comme template</h3>
+                <p class="text-xs text-gray-400 mt-0.5">Ce template sera disponible lors de la création de pages.</p>
+              </div>
+              <button @click="templateModal = null" class="text-gray-300 hover:text-gray-500 transition-colors mt-0.5">
+                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M18 6L6 18M6 6l12 12"/></svg>
+              </button>
+            </div>
+            <div class="px-7 py-6">
+              <label class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2 block">Nom du template</label>
+              <input v-model="templateName" type="text" placeholder="Ex: Landing page service"
+                class="w-full border border-gray-200 p-3 rounded-xl text-sm focus:ring-2 focus:ring-[#3d35ff] outline-none transition" autofocus />
+            </div>
+            <div class="px-7 pb-7 flex gap-3">
+              <button @click="templateModal = null" class="flex-1 px-4 py-2.5 border border-gray-200 rounded-xl text-sm font-semibold hover:bg-gray-50 transition">
+                Annuler
+              </button>
+              <button @click="handleTurnIntoTemplate" :disabled="!templateName.trim() || isSavingTemplate"
+                class="flex-1 px-4 py-2.5 bg-[#3d35ff] text-white rounded-xl text-sm font-bold hover:bg-[#2f28cc] transition disabled:opacity-40 shadow-lg shadow-[#3d35ff]/20">
+                {{ isSavingTemplate ? "Enregistrement..." : "Enregistrer" }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </Teleport>
+
+      <!-- ── Toast ──────────────────────────────────────────── -->
+      <Teleport to="body">
+        <Transition enter-from-class="opacity-0 translate-y-2" leave-to-class="opacity-0 translate-y-2" enter-active-class="transition duration-200" leave-active-class="transition duration-200">
+          <div v-if="toast" :class="[
+  'fixed bottom-6 right-6 z-[100] flex items-center gap-3 px-4 py-3 rounded-xl shadow-xl text-sm font-semibold',
+  toast.type === 'success' ? 'bg-gray-900 text-white' : 'bg-red-500 text-white'
+]">
+            <svg v-if="toast.type === 'success'" class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
+            <svg v-else class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M6 18L18 6M6 6l12 12"/></svg>
+            {{ toast.msg }}
+          </div>
+        </Transition>
+      </Teleport>
+
     </div>
-  </div>
+  </AdminDashboardLayout>
 </template>

package/dist/runtime/pages/admin/personas/[id].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/[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;