cinqcinqdev-seo 0.1.8 → 0.1.10

package/dist/runtime/pages/admin/content-library.vue

@@ -0,0 +1,359 @@
+<script setup>
+import { ref, computed, onMounted, useHead } from "#imports";
+import { useAdminContent, useAdminPersonas } from "#imports";
+useHead({ title: "Content Library - Admin" });
+const { fetchContent, createContent, updateContent, deleteContent, publishContent } = useAdminContent();
+const { fetchPersonas } = useAdminPersonas();
+const allContents = ref([]);
+const personas = ref([]);
+const loading = ref(true);
+const showModal = ref(false);
+const saving = ref(false);
+const editingContent = ref(null);
+const viewMode = ref("columns");
+const activeTab = ref("Tous");
+const activePlatform = ref("Tous");
+const tabs = ["Tous", "Revision", "Planifies", "Publies", "Archives"];
+const platforms = ["LinkedIn", "Instagram", "Facebook", "Twitter", "Email", "Blog", "Website"];
+const allPlatforms = ["Tous", ...platforms];
+const instagramTypes = ["Story", "Reel", "Carousel", "Post"];
+const defaultForm = () => ({
+  title: "",
+  platform: "LinkedIn",
+  content_type: "Post Social",
+  content: "",
+  persona_id: "",
+  persona: "",
+  status: "draft",
+  scheduled_date: "",
+  instagram_type: "",
+  content_url: ""
+});
+const formData = ref(defaultForm());
+onMounted(async () => {
+  loading.value = true;
+  try {
+    const [c, p] = await Promise.all([fetchContent(), fetchPersonas()]);
+    allContents.value = c || [];
+    personas.value = p || [];
+  } catch {
+  } finally {
+    loading.value = false;
+  }
+});
+const getPlatformConfig = (platform) => {
+  const map = {
+    LinkedIn: { icon: "mdi:linkedin", bg: "bg-blue-50", color: "text-blue-600" },
+    Instagram: { icon: "mdi:instagram", bg: "bg-pink-50", color: "text-pink-600" },
+    Facebook: { icon: "mdi:facebook", bg: "bg-blue-50", color: "text-blue-600" },
+    Twitter: { icon: "mdi:twitter", bg: "bg-sky-50", color: "text-sky-600" },
+    Email: { icon: "mdi:email-outline", bg: "bg-purple-50", color: "text-purple-600" },
+    Blog: { icon: "mdi:newspaper-variant-outline", bg: "bg-emerald-50", color: "text-emerald-600" },
+    Website: { icon: "mdi:web", bg: "bg-blue-50", color: "text-blue-600" }
+  };
+  return map[platform] || { icon: "mdi:dots-horizontal-circle", bg: "bg-slate-50", color: "text-slate-600" };
+};
+const enrichContent = (c) => {
+  const pc = getPlatformConfig(c.platform);
+  const statusMap = {
+    draft: "bg-slate-100 text-slate-500",
+    review: "bg-orange-100 text-orange-600",
+    approved: "bg-blue-100 text-blue-700",
+    published: "bg-emerald-100 text-emerald-700",
+    archived: "bg-gray-100 text-gray-500"
+  };
+  const labelMap = { draft: "Idee", review: "Revision", approved: "Planifie", published: "Publie", archived: "Archive" };
+  return {
+    ...c,
+    platformIcon: pc.icon,
+    platformBg: pc.bg,
+    platformColor: pc.color,
+    statusClass: statusMap[c.status] || statusMap.draft,
+    statusLabel: labelMap[c.status] || c.status,
+    preview: c.content?.substring(0, 150) || "",
+    persona: c.persona || "Generique",
+    date: c.created_at ? new Date(c.created_at).toLocaleDateString("fr-FR") : "",
+    wordCount: c.content ? c.content.split(" ").length : 0
+  };
+};
+const contents = computed(() => {
+  let filtered = allContents.value;
+  if (activeTab.value !== "Tous") {
+    const sm = { Revision: "review", Planifies: "approved", Publies: "published", Archives: "archived" };
+    filtered = filtered.filter((c) => c.status === sm[activeTab.value]);
+  }
+  if (activePlatform.value !== "Tous") filtered = filtered.filter((c) => c.platform === activePlatform.value);
+  return filtered.map(enrichContent);
+});
+const stats = computed(() => [
+  { label: "Total", value: allContents.value.length, icon: "mdi:archive-outline", bg: "bg-slate-100", color: "text-slate-900" },
+  { label: "Publies", value: allContents.value.filter((c) => c.status === "published").length, icon: "mdi:check-decagram", bg: "bg-emerald-50", color: "text-emerald-500" },
+  { label: "Planifies", value: allContents.value.filter((c) => c.status === "approved").length, icon: "mdi:calendar-check", bg: "bg-blue-50", color: "text-blue-500" },
+  { label: "Idees", value: allContents.value.filter((c) => c.status === "draft").length, icon: "mdi:lightbulb-outline", bg: "bg-amber-50", color: "text-amber-500" },
+  { label: "Revision", value: allContents.value.filter((c) => c.status === "review").length, icon: "mdi:pencil-ruler", bg: "bg-orange-50", color: "text-orange-500" }
+]);
+const getContentByPlatform = (platform) => contents.value.filter((c) => c.platform === platform);
+const updatePersonaName = () => {
+  const p = personas.value.find((p2) => p2.id === formData.value.persona_id);
+  formData.value.persona = p ? p.name : "";
+};
+const openCreate = (platform) => {
+  editingContent.value = null;
+  formData.value = { ...defaultForm(), platform: platform || "LinkedIn" };
+  showModal.value = true;
+};
+const openEdit = (content) => {
+  editingContent.value = content;
+  formData.value = {
+    ...content,
+    scheduled_date: content.scheduled_date ? new Date(content.scheduled_date).toISOString().slice(0, 16) : ""
+  };
+  showModal.value = true;
+};
+const closeModal = () => {
+  showModal.value = false;
+  editingContent.value = null;
+};
+const saveContent = async () => {
+  if (!formData.value.title || !formData.value.content) return alert("Titre et contenu requis");
+  saving.value = true;
+  try {
+    const data = { ...formData.value, persona_id: formData.value.persona_id || null };
+    if (data.scheduled_date) data.scheduled_date = new Date(data.scheduled_date).toISOString();
+    editingContent.value ? await updateContent(editingContent.value.id, data) : await createContent(data);
+    allContents.value = await fetchContent();
+    closeModal();
+  } catch (e) {
+    alert("Erreur: " + (e.message || "Inconnue"));
+  } finally {
+    saving.value = false;
+  }
+};
+const handlePublish = async (content) => {
+  if (confirm("Publier ce contenu ?")) {
+    await publishContent(content.id);
+    allContents.value = await fetchContent();
+  }
+};
+const handleDelete = async (content) => {
+  if (confirm("Supprimer ?")) {
+    await deleteContent(content.id);
+    allContents.value = await fetchContent();
+  }
+};
+</script>
+
+<template>
+  <AdminDashboardLayout>
+    <div class="max-w-7xl mx-auto px-6 md:px-10 py-10">
+      <div class="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
+        <div>
+          <h1 class="text-4xl font-black text-slate-900">Content Library</h1>
+          <p class="text-slate-500 mt-1">Gerez votre arsenal de contenus</p>
+        </div>
+        <div class="flex items-center gap-3 bg-white p-2 rounded-2xl border border-slate-200 shadow-sm">
+          <button @click="viewMode = 'columns'" :class="[viewMode === 'columns' ? 'bg-emerald-600 text-white shadow-lg' : 'text-slate-500 hover:bg-slate-50']" class="px-5 py-2.5 rounded-xl text-xs font-black uppercase transition-all flex items-center gap-2">
+            <Icon name="mdi:view-column" /> Colonnes
+          </button>
+          <button @click="viewMode = 'table'" :class="[viewMode === 'table' ? 'bg-slate-900 text-white shadow-lg' : 'text-slate-500 hover:bg-slate-50']" class="px-5 py-2.5 rounded-xl text-xs font-black uppercase transition-all flex items-center gap-2">
+            <Icon name="mdi:table" /> Tableau
+          </button>
+        </div>
+      </div>
+
+      <div class="grid grid-cols-2 lg:grid-cols-5 gap-4 mb-8">
+        <div v-for="stat in stats" :key="stat.label" class="bg-white p-5 rounded-2xl border border-slate-100 shadow-sm">
+          <div :class="[stat.bg, 'w-10 h-10 rounded-xl flex items-center justify-center mb-3']">
+            <Icon :name="stat.icon" :class="[stat.color, 'text-xl']" />
+          </div>
+          <p class="text-[10px] font-black text-slate-400 uppercase tracking-widest">{{ stat.label }}</p>
+          <p class="text-2xl font-black text-slate-900">{{ stat.value }}</p>
+        </div>
+      </div>
+
+      <!-- Columns View -->
+      <div v-if="viewMode === 'columns'" class="overflow-x-auto pb-6">
+        <div class="flex gap-6 min-w-max">
+          <div v-for="platform in platforms" :key="platform" class="flex-shrink-0 w-80">
+            <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm">
+              <div class="p-5 border-b border-slate-100 bg-slate-50">
+                <div class="flex items-center justify-between mb-2">
+                  <div class="flex items-center gap-3">
+                    <div :class="[getPlatformConfig(platform).bg, 'w-10 h-10 rounded-xl flex items-center justify-center']">
+                      <Icon :name="getPlatformConfig(platform).icon" :class="[getPlatformConfig(platform).color, 'text-xl']" />
+                    </div>
+                    <h3 class="font-black text-slate-900">{{ platform }}</h3>
+                  </div>
+                  <span class="px-3 py-1 bg-slate-100 text-slate-600 rounded-full text-xs font-bold">{{ getContentByPlatform(platform).length }}</span>
+                </div>
+                <button @click="openCreate(platform)" class="w-full mt-2 py-2 bg-blue-50 hover:bg-blue-100 text-blue-600 rounded-xl text-xs font-bold transition-all flex items-center justify-center gap-2">
+                  <Icon name="mdi:plus" /> Ajouter
+                </button>
+              </div>
+              <div class="p-4 space-y-3 max-h-96 overflow-y-auto">
+                <div v-for="content in getContentByPlatform(platform)" :key="content.id"
+                     class="bg-white border-2 border-slate-100 rounded-xl p-4 hover:border-blue-300 hover:shadow-md transition-all cursor-pointer group"
+                     @click="openEdit(content)">
+                  <span :class="['px-2 py-1 rounded-lg text-[9px] font-black uppercase', content.statusClass]">{{ content.statusLabel }}</span>
+                  <p class="font-bold text-slate-900 text-sm mt-2 line-clamp-2 group-hover:text-blue-600 transition-colors">{{ content.title }}</p>
+                  <p class="text-xs text-slate-500 line-clamp-2 mt-1">{{ content.preview }}</p>
+                  <div class="flex items-center justify-between text-[10px] text-slate-400 mt-2">
+                    <span>{{ content.persona }}</span>
+                    <span>{{ content.wordCount }} mots</span>
+                  </div>
+                </div>
+                <div v-if="getContentByPlatform(platform).length === 0" class="text-center py-10 text-slate-300">
+                  <Icon name="mdi:inbox" class="text-4xl mb-2" />
+                  <p class="text-xs">Aucun contenu</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Table View -->
+      <div v-else class="space-y-4">
+        <div class="bg-white rounded-2xl p-4 border border-slate-200 shadow-sm space-y-4">
+          <div class="flex flex-wrap items-center justify-between gap-4">
+            <div class="flex gap-2">
+              <button v-for="tab in tabs" :key="tab" @click="activeTab = tab"
+                      :class="[activeTab === tab ? 'bg-slate-900 text-white' : 'text-slate-500 hover:bg-slate-50']"
+                      class="px-4 py-2 rounded-xl text-xs font-black uppercase transition-all">{{ tab }}</button>
+            </div>
+            <button @click="openCreate()" class="bg-blue-600 text-white px-5 py-2 rounded-xl text-xs font-black uppercase hover:bg-blue-700 transition-all flex items-center gap-2">
+              <Icon name="mdi:plus" /> Nouveau
+            </button>
+          </div>
+          <div class="flex gap-2 flex-wrap pt-2 border-t border-slate-100">
+            <button v-for="p in allPlatforms" :key="p" @click="activePlatform = p"
+                    :class="[activePlatform === p ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-600 hover:bg-slate-200']"
+                    class="px-3 py-1.5 rounded-xl text-xs font-bold transition-all">{{ p }}</button>
+          </div>
+        </div>
+
+        <div class="bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm">
+          <table class="w-full text-left">
+            <thead class="bg-slate-50 border-b border-slate-200">
+              <tr>
+                <th class="px-6 py-4 text-[10px] font-black uppercase text-slate-400 tracking-widest">Contenu / Plateforme</th>
+                <th class="px-6 py-4 text-[10px] font-black uppercase text-slate-400 tracking-widest">Statut</th>
+                <th class="px-6 py-4 text-[10px] font-black uppercase text-slate-400 tracking-widest">Persona</th>
+                <th class="px-6 py-4 text-[10px] font-black uppercase text-slate-400 tracking-widest">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-100">
+              <tr v-for="content in contents" :key="content.id" class="hover:bg-slate-50/50 transition-colors group">
+                <td class="px-6 py-4">
+                  <div class="flex items-center gap-4">
+                    <div :class="[content.platformBg, 'w-10 h-10 rounded-xl flex items-center justify-center']">
+                      <Icon :name="content.platformIcon" :class="[content.platformColor, 'text-xl']" />
+                    </div>
+                    <div>
+                      <p class="font-bold text-slate-900">{{ content.title }}</p>
+                      <p class="text-[10px] text-slate-400 uppercase">{{ content.date }} • {{ content.wordCount }} mots</p>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-6 py-4"><span :class="['px-3 py-1 rounded-lg text-[10px] font-black uppercase', content.statusClass]">{{ content.statusLabel }}</span></td>
+                <td class="px-6 py-4"><span class="text-xs font-bold text-slate-600 italic">{{ content.persona }}</span></td>
+                <td class="px-6 py-4">
+                  <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button @click="openEdit(content)" class="p-2 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-600 hover:text-white transition-all"><Icon name="mdi:pencil" /></button>
+                    <button v-if="content.status === 'draft'" @click="handlePublish(content)" class="p-2 bg-emerald-50 text-emerald-600 rounded-lg hover:bg-emerald-600 hover:text-white transition-all"><Icon name="mdi:send" /></button>
+                    <button @click="handleDelete(content)" class="p-2 bg-red-50 text-red-600 rounded-lg hover:bg-red-600 hover:text-white transition-all"><Icon name="mdi:delete" /></button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+          <div v-if="contents.length === 0" class="text-center py-12 text-slate-300">
+            <Icon name="mdi:inbox" class="text-5xl mb-2" />
+            <p class="text-sm">Aucun contenu</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Modal -->
+    <Teleport to="body">
+      <div v-if="showModal" class="fixed inset-0 bg-slate-900/60 backdrop-blur-lg z-50 flex items-center justify-center p-4">
+        <div class="bg-white rounded-[2rem] max-w-4xl w-full max-h-[95vh] overflow-hidden shadow-2xl flex flex-col">
+          <div class="bg-gradient-to-r from-slate-900 to-slate-800 p-8 text-white flex justify-between items-center">
+            <h2 class="text-2xl font-black">{{ editingContent ? "Editer le Contenu" : "Nouveau Contenu" }}</h2>
+            <button @click="closeModal" class="w-12 h-12 bg-white/10 hover:bg-red-500 rounded-2xl flex items-center justify-center transition-all">
+              <Icon name="mdi:close" class="text-2xl" />
+            </button>
+          </div>
+          <div class="p-8 overflow-y-auto space-y-6">
+            <div>
+              <label class="text-xs font-black uppercase text-slate-500 mb-2 block">Titre *</label>
+              <input v-model="formData.title" class="w-full bg-slate-50 border-2 border-slate-200 rounded-xl px-5 py-4 font-bold text-slate-900" placeholder="Titre du contenu" />
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-xs font-black uppercase text-slate-500 mb-2 block">Plateforme</label>
+                <div class="grid grid-cols-3 gap-2">
+                  <button v-for="p in platforms" :key="p" @click="formData.platform = p"
+                          :class="[formData.platform === p ? 'bg-blue-600 text-white scale-105' : 'bg-white border-2 border-slate-200 text-slate-600 hover:border-blue-300']"
+                          class="px-3 py-2 rounded-xl text-xs font-black uppercase transition-all">{{ p }}</button>
+                </div>
+              </div>
+              <div v-if="formData.platform === 'Instagram'">
+                <label class="text-xs font-black uppercase text-slate-500 mb-2 block">Type Instagram</label>
+                <div class="grid grid-cols-2 gap-2">
+                  <button v-for="t in instagramTypes" :key="t" @click="formData.instagram_type = t"
+                          :class="[formData.instagram_type === t ? 'bg-pink-600 text-white' : 'bg-white border-2 border-slate-200 text-pink-600 hover:border-pink-300']"
+                          class="px-3 py-2 rounded-xl text-xs font-black uppercase transition-all">{{ t }}</button>
+                </div>
+              </div>
+            </div>
+            <div>
+              <label class="text-xs font-black uppercase text-slate-500 mb-2 block">Contenu *</label>
+              <textarea v-model="formData.content" rows="8" class="w-full bg-slate-50 border-2 border-slate-200 rounded-xl px-5 py-4 font-medium text-slate-700 resize-none" placeholder="Corps du message..."></textarea>
+              <div class="mt-1 flex justify-between text-xs text-slate-400">
+                <span>{{ formData.content.length }} car.</span>
+                <span>{{ formData.content.split(" ").filter((w) => w).length }} mots</span>
+              </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-xs font-black uppercase text-slate-500 mb-2 block">Persona</label>
+                <select v-model="formData.persona_id" @change="updatePersonaName" class="w-full bg-white border-2 border-slate-200 rounded-xl px-4 py-3 font-bold text-slate-700">
+                  <option value="">Generique</option>
+                  <option v-for="p in personas" :key="p.id" :value="p.id">{{ p.name }}</option>
+                </select>
+              </div>
+              <div>
+                <label class="text-xs font-black uppercase text-slate-500 mb-2 block">Statut</label>
+                <div class="grid grid-cols-2 gap-1.5">
+                  <button v-for="s in [{ v: 'draft', l: 'Idee' }, { v: 'review', l: 'Revision' }, { v: 'approved', l: 'Planifie' }, { v: 'published', l: 'Publie' }, { v: 'archived', l: 'Archive' }]" :key="s.v"
+                          @click="formData.status = s.v"
+                          :class="[formData.status === s.v ? 'bg-blue-600 text-white scale-105' : 'bg-white border-2 border-slate-200 text-slate-600 hover:border-blue-300']"
+                          class="px-3 py-2 rounded-xl text-[10px] font-black uppercase transition-all">{{ s.l }}</button>
+                </div>
+              </div>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="text-xs font-black uppercase text-slate-500 mb-2 block">Date prevue</label>
+                <input v-model="formData.scheduled_date" type="datetime-local" class="w-full bg-white border-2 border-indigo-200 rounded-xl px-4 py-3 font-bold text-indigo-900" />
+              </div>
+              <div>
+                <label class="text-xs font-black uppercase text-slate-500 mb-2 block">URL publie</label>
+                <input v-model="formData.content_url" type="url" placeholder="https://..." class="w-full bg-white border-2 border-cyan-200 rounded-xl px-4 py-3 font-bold text-cyan-900" />
+              </div>
+            </div>
+          </div>
+          <div class="p-6 bg-slate-50 border-t-2 border-slate-200 flex justify-end gap-3">
+            <button @click="closeModal" class="px-8 py-3 rounded-xl font-black text-sm uppercase text-slate-600 bg-white border-2 border-slate-200 hover:bg-slate-100 transition-all">Annuler</button>
+            <button @click="saveContent" :disabled="saving" class="bg-gradient-to-r from-blue-600 to-purple-600 text-white px-12 py-3 rounded-xl font-black text-sm uppercase shadow-xl disabled:opacity-50 flex items-center gap-2">
+              <Icon :name="saving ? 'mdi:loading' : 'mdi:content-save'" :class="{ 'animate-spin': saving }" />
+              {{ saving ? "Enregistrement..." : editingContent ? "Mettre a Jour" : "Creer" }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </AdminDashboardLayout>
+</template>

package/dist/runtime/pages/admin/content-library.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/editor/[id].vue

@@ -1,4 +1,5 @@
 <script setup>
+import { ref, computed, watch, definePageMeta, useRoute, useRuntimeConfig, useAsyncData, useHead, useSupabaseClient, useNuxtApp } from "#imports";
 import { useAdminSections } from "../../../composables/useAdminSections";
 definePageMeta({ layout: false });
 const route = useRoute();
@@ -8,8 +9,10 @@ const table = config?.tables?.pages || "pages";
 const bucket = config?.storageBucket || "site";
 const pageId = route.params.id;
 const CMS_COMPONENTS = useAdminSections();
+const { vueApp } = useNuxtApp();
+const resolveSection = (type) => vueApp.component(`Sections${type}`) || vueApp.component(type) || type;
 const { data: page } = await useAsyncData(`admin-edit-${pageId}`, async () => {
-  const { data } = await supabase.from(table).select("*").eq("id", pageId).single();
+  const { data } = await supabase.from(table).select("*").eq("id", pageId).maybeSingle();
   return data;
 });
 useHead({ title: computed(() => page.value?.title ? `${page.value.title} \u2014 Editor` : "Editor") });
@@ -299,7 +302,7 @@ const savePage = async () => {
         <div class="max-w-4xl mx-auto bg-white shadow-2xl rounded-[32px] overflow-hidden min-h-screen border border-black/5">
           <div v-for="(block, index) in page.content" :key="index" @click="selectedBlockIndex = index"
             class="relative cursor-pointer" :class="{ 'ring-4 ring-blue-500 ring-inset z-10': selectedBlockIndex === index }">
-            <component :is="resolveComponent(`Sections${block.type}`)" v-bind="resolvePropsForPreview(block.props)" />
+            <component :is="resolveSection(block.type)" v-bind="resolvePropsForPreview(block.props)" />
           </div>
           <div v-if="!page.content.length" class="p-20 text-center text-gray-300 italic text-sm">
             Empty page — add a section to get started.

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

@@ -1,40 +1,99 @@
 <script setup>
+import { computed, useHead, useRuntimeConfig, useSupabaseClient } from "#imports";
+useHead({ title: "Tableau de bord \u2014 Admin" });
 const config = useRuntimeConfig().public.adminCms;
 const supabase = useSupabaseClient();
-const pageTypes = config?.pageTypes || [];
-const { data: pageStats } = await useAsyncData("admin-page-stats", async () => {
-  const { data } = await supabase.from("pages").select("type");
-  return data?.reduce((acc, curr) => {
-    acc[curr.type] = (acc[curr.type] || 0) + 1;
+const tables = computed(() => config?.tables || { pages: "pages" });
+const pageTypes = computed(() => {
+  const types = config?.pageTypes || [];
+  return types.map((pt) => ({
+    ...pt,
+    desc: pt.desc || "",
+    svgIcon: pt.svgIcon || ""
+  }));
+});
+const defaultIcons = {
+  landing_page: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M13 10V3L4 14h7v7l9-11h-7z"/>',
+  service_page: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>',
+  about_page: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>',
+  product_page: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>',
+  blog_article: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>',
+  portfolio_item: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>'
+};
+const { data: stats } = await useAsyncData("admin-dashboard-stats", async () => {
+  const pagesTable = tables.value.pages || "pages";
+  const [pagesRes, templatesRes] = await Promise.all([
+    supabase.from(pagesTable).select("type, status"),
+    supabase.from("pages_templates").select("id", { count: "exact", head: true })
+  ]);
+  const pages = pagesRes.data || [];
+  const byType = pages.reduce((acc, p) => {
+    acc[p.type] = (acc[p.type] || 0) + 1;
     return acc;
-  }, {}) ?? {};
+  }, {});
+  const published = pages.filter((p) => p.status === "published").length;
+  const drafts = pages.filter((p) => p.status === "draft").length;
+  return { total: pages.length, published, drafts, byType, templates: templatesRes.count ?? 0 };
 });
-useHead({ title: "Dashboard \u2014 Admin" });
 </script>
 
 <template>
-  <div data-admin-cms>
-    <AdminNavbar />
-    <div class="p-8">
-      <h1 class="text-2xl font-bold mb-2">Page Management</h1>
-      <p class="text-gray-500 mb-8">Create and manage your pages by type.</p>
+  <AdminDashboardLayout>
+    <div class="p-8 max-w-5xl mx-auto">
+
+      <!-- Header -->
+      <div class="mb-8">
+        <h1 class="text-2xl font-black text-gray-900">Tableau de bord</h1>
+        <p class="text-sm text-gray-400 mt-1">Gérez votre contenu et vos pages.</p>
+      </div>
 
-      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+      <!-- Stats row -->
+      <div class="grid grid-cols-4 gap-4 mb-10">
+        <div class="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
+          <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Total pages</p>
+          <p class="text-3xl font-black text-gray-900">{{ stats?.total ?? 0 }}</p>
+        </div>
+        <div class="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
+          <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Publiées</p>
+          <p class="text-3xl font-black text-green-600">{{ stats?.published ?? 0 }}</p>
+        </div>
+        <div class="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
+          <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Brouillons</p>
+          <p class="text-3xl font-black text-amber-500">{{ stats?.drafts ?? 0 }}</p>
+        </div>
+        <div class="bg-white rounded-2xl p-5 border border-gray-100 shadow-sm">
+          <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-2">Templates</p>
+          <p class="text-3xl font-black text-[#3d35ff]">{{ stats?.templates ?? 0 }}</p>
+        </div>
+      </div>
+
+      <!-- Page types grid -->
+      <div class="mb-3 flex items-center justify-between">
+        <h2 class="text-[11px] font-black uppercase tracking-widest text-gray-400">Types de pages</h2>
+      </div>
+      <div class="grid grid-cols-2 md:grid-cols-3 gap-4">
         <NuxtLink
           v-for="type in pageTypes"
           :key="type.id"
           :to="`/admin/pages/${type.id}`"
-          class="bg-white p-10 rounded-xl shadow-sm hover:shadow-md transition-shadow flex flex-col items-center justify-center border border-gray-100 group"
+          class="group bg-white rounded-2xl p-6 border border-gray-100 shadow-sm hover:border-[#3d35ff]/30 hover:shadow-md transition-all"
         >
-          <span class="text-3xl mb-4">{{ type.icon || "\u{1F4C4}" }}</span>
-          <h3 class="font-semibold text-gray-800 group-hover:text-blue-600 transition-colors text-center">
-            {{ type.label }}
-          </h3>
-          <span class="text-xs text-gray-400 mt-2">
-            {{ pageStats?.[type.id] || 0 }} page(s)
-          </span>
+          <div class="flex items-start justify-between mb-4">
+            <div class="w-9 h-9 rounded-xl bg-gray-50 group-hover:bg-[#3d35ff]/10 flex items-center justify-center transition-colors">
+              <svg class="text-gray-400 group-hover:text-[#3d35ff] transition-colors" style="width:18px;height:18px" fill="none" stroke="currentColor" viewBox="0 0 24 24" v-html="type.svgIcon || defaultIcons[type.id] || defaultIcons.blog_article"></svg>
+            </div>
+            <span class="text-[10px] font-black px-2 py-1 rounded-full bg-gray-50 text-gray-400">
+              {{ stats?.byType?.[type.id] ?? 0 }}
+            </span>
+          </div>
+          <h3 class="font-black text-gray-900 text-sm group-hover:text-[#3d35ff] transition-colors">{{ type.label }}</h3>
+          <p class="text-[11px] text-gray-400 mt-1">{{ type.desc }}</p>
+          <div class="mt-4 flex items-center gap-1 text-[10px] font-bold text-[#3d35ff] opacity-0 group-hover:opacity-100 transition-opacity">
+            Gérer <span>→</span>
+          </div>
         </NuxtLink>
       </div>
+
     </div>
-  </div>
+  </AdminDashboardLayout>
 </template>

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

@@ -1,4 +1,5 @@
 <script setup>
+import { ref, computed, useRoute, useRuntimeConfig, useAsyncData, useHead, navigateTo, useSupabaseClient } from "#imports";
 const route = useRoute();
 const supabase = useSupabaseClient();
 const config = useRuntimeConfig().public.adminCms;

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;