cinqcinqdev-seo 0.1.8 → 0.1.10

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

@@ -0,0 +1,232 @@
+<script setup>
+import { ref, computed, onMounted, useHead, navigateTo } from "#imports";
+import { useAdminStrategies } from "#imports";
+useHead({ title: "Strategies - Admin" });
+const { fetchStrategies, createStrategy, updateStrategy, deleteStrategy, fetchStrategyContents, fetchStrategyPersonas } = useAdminStrategies();
+const strategies = ref([]);
+const strategyContents = ref({});
+const strategyPersonas = ref({});
+const loading = ref(true);
+const showModal = ref(false);
+const saving = ref(false);
+const editingStrategy = ref(null);
+const defaultForm = () => ({
+  name: "",
+  description: "",
+  objective: "",
+  start_date: "",
+  end_date: "",
+  budget: 0,
+  status: "draft",
+  priority: "Moyenne",
+  completion_percentage: 0
+});
+const formData = ref(defaultForm());
+onMounted(async () => {
+  loading.value = true;
+  try {
+    strategies.value = await fetchStrategies() || [];
+    for (const s of strategies.value) {
+      const [c, p] = await Promise.all([fetchStrategyContents(s.id), fetchStrategyPersonas(s.id)]);
+      strategyContents.value[s.id] = c;
+      strategyPersonas.value[s.id] = p;
+    }
+  } catch {
+  } finally {
+    loading.value = false;
+  }
+});
+const stats = computed(() => [
+  { label: "Total", value: strategies.value.length, icon: "mdi:strategy", bg: "bg-blue-50", color: "text-blue-600" },
+  { label: "Actives", value: strategies.value.filter((s) => s.status === "active").length, icon: "mdi:rocket-launch", bg: "bg-emerald-50", color: "text-emerald-600" },
+  { label: "Completees", value: strategies.value.filter((s) => s.status === "completed").length, icon: "mdi:check-circle", bg: "bg-blue-50", color: "text-blue-600" },
+  { label: "En pause", value: strategies.value.filter((s) => s.status === "paused").length, icon: "mdi:pause-circle", bg: "bg-amber-50", color: "text-amber-600" }
+]);
+const statusClass = (s) => ({
+  draft: "bg-slate-100 text-slate-600",
+  active: "bg-emerald-100 text-emerald-700",
+  paused: "bg-amber-100 text-amber-700",
+  completed: "bg-blue-100 text-blue-700",
+  cancelled: "bg-red-100 text-red-700"
+})[s] || "bg-slate-100 text-slate-600";
+const formatDate = (d) => d ? new Date(d).toLocaleDateString("fr-FR") : "-";
+const formatBudget = (n) => n ? new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR" }).format(n) : "-";
+const openCreate = () => {
+  editingStrategy.value = null;
+  formData.value = defaultForm();
+  showModal.value = true;
+};
+const openEdit = (s) => {
+  editingStrategy.value = s;
+  formData.value = { ...s };
+  showModal.value = true;
+};
+const closeModal = () => {
+  showModal.value = false;
+  editingStrategy.value = null;
+};
+const saveStrategy = async () => {
+  if (!formData.value.name) return;
+  saving.value = true;
+  try {
+    if (editingStrategy.value) await updateStrategy(editingStrategy.value.id, formData.value);
+    else await createStrategy(formData.value);
+    strategies.value = await fetchStrategies();
+    closeModal();
+  } catch {
+    alert("Erreur lors de la sauvegarde");
+  } finally {
+    saving.value = false;
+  }
+};
+const handleDelete = async () => {
+  if (!confirm("Supprimer cette strategie ?")) return;
+  try {
+    await deleteStrategy(editingStrategy.value.id);
+    strategies.value = await fetchStrategies();
+    closeModal();
+  } catch {
+  }
+};
+</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-10">
+        <div>
+          <h1 class="text-4xl font-bold text-slate-900">Strategies <span class="text-blue-600">Marketing</span></h1>
+          <p class="text-slate-500 mt-1">Gerez vos campagnes avec contenus et personas</p>
+        </div>
+        <button @click="openCreate" class="bg-blue-600 text-white px-8 py-4 rounded-2xl font-bold text-sm hover:bg-blue-700 transition-all shadow-xl shadow-blue-200 flex items-center gap-2">
+          <Icon name="mdi:plus-circle" class="text-xl" /> Nouvelle Strategie
+        </button>
+      </div>
+
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-10">
+        <div v-for="stat in stats" :key="stat.label" class="bg-white p-6 rounded-[2rem] border border-slate-100 shadow-sm">
+          <div :class="[stat.bg, 'w-10 h-10 rounded-xl flex items-center justify-center mb-4']">
+            <Icon :name="stat.icon" :class="[stat.color, 'text-xl']" />
+          </div>
+          <p class="text-xs font-semibold text-slate-400 uppercase">{{ stat.label }}</p>
+          <p class="text-2xl font-bold text-slate-900">{{ stat.value }}</p>
+        </div>
+      </div>
+
+      <div class="space-y-6">
+        <div v-for="strategy in strategies" :key="strategy.id" class="bg-white rounded-[2rem] border border-slate-200 shadow-sm overflow-hidden hover:shadow-xl transition-all">
+          <div class="p-6 border-b border-slate-100">
+            <div class="flex items-start justify-between mb-4">
+              <div class="flex-1">
+                <div class="flex items-center gap-3 mb-2">
+                  <h3 class="text-xl font-bold text-slate-900">{{ strategy.name }}</h3>
+                  <span :class="['px-3 py-1 rounded-full text-xs font-semibold', statusClass(strategy.status)]">{{ strategy.status }}</span>
+                </div>
+                <p class="text-sm text-slate-600">{{ strategy.description }}</p>
+              </div>
+              <div class="flex gap-2 ml-4">
+                <button @click="navigateTo(`/admin/strategies/${strategy.id}`)" class="px-5 py-2.5 bg-blue-600 text-white rounded-xl text-sm font-semibold hover:bg-blue-700 transition-all">Gerer</button>
+                <button @click="openEdit(strategy)" class="p-2.5 bg-slate-100 text-slate-600 rounded-xl hover:bg-slate-200 transition-all"><Icon name="mdi:pencil" /></button>
+              </div>
+            </div>
+            <div class="mb-4">
+              <div class="flex justify-between mb-1.5 text-xs">
+                <span class="font-medium text-slate-500">Progression</span>
+                <span class="font-semibold text-blue-600">{{ strategy.completion_percentage || 0 }}%</span>
+              </div>
+              <div class="w-full h-2 bg-slate-100 rounded-full overflow-hidden">
+                <div :style="{ width: `${strategy.completion_percentage || 0}%` }" class="h-full bg-gradient-to-r from-blue-500 to-pink-500 transition-all duration-500"></div>
+              </div>
+            </div>
+            <div class="flex items-center gap-4 text-xs text-slate-500">
+              <span v-if="strategy.start_date">{{ formatDate(strategy.start_date) }}</span>
+              <span v-if="strategy.budget">{{ formatBudget(strategy.budget) }}</span>
+            </div>
+          </div>
+          <div class="grid grid-cols-2 gap-px bg-slate-100">
+            <div class="bg-white p-4 text-center">
+              <p class="text-lg font-bold text-blue-600">{{ strategyContents[strategy.id]?.length || 0 }}</p>
+              <p class="text-xs font-medium text-slate-400">Contenus</p>
+            </div>
+            <div class="bg-white p-4 text-center">
+              <p class="text-lg font-bold text-blue-600">{{ strategyPersonas[strategy.id]?.length || 0 }}</p>
+              <p class="text-xs font-medium text-slate-400">Personas</p>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="!loading && strategies.length === 0" class="text-center py-20 bg-white rounded-3xl border border-slate-200">
+          <Icon name="mdi:strategy" class="text-6xl text-slate-200 mb-4" />
+          <p class="text-slate-400 font-medium mb-4">Aucune strategie. Creez-en une pour commencer!</p>
+          <button @click="openCreate" class="px-6 py-3 bg-blue-600 text-white rounded-xl font-bold">Creer ma premiere strategie</button>
+        </div>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div v-if="showModal" class="fixed inset-0 bg-slate-900/40 backdrop-blur-md z-50 flex items-center justify-center p-6" @click.self="closeModal">
+        <div class="bg-white rounded-[3rem] max-w-3xl w-full max-h-[90vh] overflow-hidden shadow-2xl">
+          <div class="bg-blue-600 p-8 text-white flex justify-between items-center">
+            <h2 class="text-2xl font-bold">{{ editingStrategy ? "Modifier Strategie" : "Nouvelle Strategie" }}</h2>
+            <button @click="closeModal" class="w-12 h-12 bg-white/10 hover:bg-white/20 rounded-2xl flex items-center justify-center">
+              <Icon name="mdi:close" class="text-2xl" />
+            </button>
+          </div>
+          <div class="p-10 overflow-y-auto max-h-[calc(90vh-200px)] space-y-6">
+            <div>
+              <label class="block text-xs font-black uppercase text-slate-400 mb-2">Nom *</label>
+              <input v-model="formData.name" class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl font-medium" placeholder="Ex: Campagne Instagram Q1 2024" />
+            </div>
+            <div>
+              <label class="block text-xs font-black uppercase text-slate-400 mb-2">Description</label>
+              <textarea v-model="formData.description" rows="3" class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl font-medium" placeholder="Decrivez votre strategie..."></textarea>
+            </div>
+            <div>
+              <label class="block text-xs font-black uppercase text-slate-400 mb-2">Objectif</label>
+              <textarea v-model="formData.objective" rows="2" class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl font-medium" placeholder="Quel est l'objectif principal?"></textarea>
+            </div>
+            <div class="grid grid-cols-2 gap-4">
+              <div>
+                <label class="block text-xs font-black uppercase text-slate-400 mb-2">Date debut</label>
+                <input v-model="formData.start_date" type="date" class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl font-bold" />
+              </div>
+              <div>
+                <label class="block text-xs font-black uppercase text-slate-400 mb-2">Date fin</label>
+                <input v-model="formData.end_date" type="date" class="w-full px-6 py-4 bg-slate-50 border-none rounded-2xl font-bold" />
+              </div>
+            </div>
+            <div>
+              <label class="block text-xs font-black uppercase text-slate-400 mb-2">Budget (EUR)</label>
+              <input v-model.number="formData.budget" type="number" step="0.01" class="w-full px-6 py-4 bg-emerald-50 border-none rounded-2xl font-bold text-emerald-900" />
+            </div>
+            <div>
+              <label class="block text-xs font-black uppercase text-slate-400 mb-2">Statut</label>
+              <div class="grid grid-cols-4 gap-2">
+                <button v-for="s in ['draft', 'active', 'paused', 'completed']" :key="s" type="button" @click="formData.status = s"
+                        :class="[formData.status === s ? 'bg-blue-600 text-white' : 'bg-slate-100 text-slate-500']"
+                        class="py-3 rounded-xl text-xs font-black uppercase transition-all">{{ s }}</button>
+              </div>
+            </div>
+            <div>
+              <label class="block text-xs font-black uppercase text-slate-400 mb-2">Priorite</label>
+              <div class="grid grid-cols-4 gap-2">
+                <button v-for="p in ['Basse', 'Moyenne', 'Haute', 'Critique']" :key="p" type="button" @click="formData.priority = p"
+                        :class="[formData.priority === p ? 'bg-slate-900 text-white' : 'bg-slate-100 text-slate-500']"
+                        class="py-3 rounded-xl text-xs font-black uppercase">{{ p }}</button>
+              </div>
+            </div>
+          </div>
+          <div class="p-8 bg-slate-50 border-t flex justify-between">
+            <button v-if="editingStrategy" @click="handleDelete" class="px-6 py-3 bg-red-100 text-red-600 rounded-2xl font-semibold text-sm">Supprimer</button>
+            <div class="flex gap-4 ml-auto">
+              <button @click="closeModal" class="px-8 py-4 rounded-2xl font-medium text-sm text-slate-500 hover:bg-slate-200">Annuler</button>
+              <button @click="saveStrategy" :disabled="saving" class="bg-blue-600 text-white px-10 py-4 rounded-2xl font-semibold text-sm shadow-xl disabled:opacity-50">
+                {{ saving ? "Enregistrement..." : "Enregistrer" }}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </AdminDashboardLayout>
+</template>

package/dist/runtime/pages/admin/strategies/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/todos.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/todos.vue

@@ -0,0 +1,251 @@
+<script setup>
+import { ref, computed, onMounted, useHead } from "#imports";
+import { useAdminTodos } from "#imports";
+useHead({ title: "Todos - Admin" });
+const { fetchTodos, toggleTodo: toggleTodoDb, createTodo, updateTodo, deleteTodo } = useAdminTodos();
+const todos = ref([]);
+const loading = ref(true);
+const showModal = ref(false);
+const saving = ref(false);
+const editingTodo = ref(null);
+const formData = ref({ title: "", description: "", priority: "Moyenne", due_date: "" });
+onMounted(async () => {
+  loading.value = true;
+  try {
+    todos.value = await fetchTodos();
+  } catch {
+  } finally {
+    loading.value = false;
+  }
+});
+const stats = computed(() => {
+  const active = todos.value.filter((t) => !t.completed).length;
+  const completed = todos.value.filter((t) => t.completed).length;
+  const overdue = todos.value.filter((t) => isOverdue(t)).length;
+  const total = todos.value.length || 1;
+  return [
+    { label: "Actifs", value: active, icon: "mdi:checkbox-marked-circle", bg: "bg-blue-50", color: "text-blue-600" },
+    { label: "Termines", value: completed, icon: "mdi:check-all", bg: "bg-emerald-50", color: "text-emerald-600" },
+    { label: "En Retard", value: overdue, icon: "mdi:alert-circle", bg: "bg-red-50", color: "text-red-600" },
+    { label: "Progres", value: Math.round(completed / total * 100) + "%", icon: "mdi:chart-arc", bg: "bg-blue-50", color: "text-blue-600" }
+  ];
+});
+const todosByDate = computed(() => {
+  const grouped = {};
+  const today = /* @__PURE__ */ new Date();
+  today.setHours(0, 0, 0, 0);
+  const tomorrow = new Date(today);
+  tomorrow.setDate(tomorrow.getDate() + 1);
+  todos.value.forEach((todo) => {
+    if (!todo.due_date) return;
+    const d = new Date(todo.due_date);
+    d.setHours(0, 0, 0, 0);
+    let label = d < today ? "En Retard" : d.getTime() === today.getTime() ? "Aujourd'hui" : d.getTime() === tomorrow.getTime() ? "Demain" : d.getTime() < today.getTime() + 7 * 864e5 ? "Cette Semaine" : "Plus Tard";
+    if (!grouped[label]) grouped[label] = [];
+    grouped[label].push(todo);
+  });
+  return grouped;
+});
+const todosWithoutDate = computed(
+  () => todos.value.filter((t) => !t.due_date).sort((a, b) => {
+    const o = { Haute: 0, Moyenne: 1, Basse: 2 };
+    return (o[a.priority] ?? 2) - (o[b.priority] ?? 2);
+  })
+);
+const isOverdue = (todo) => {
+  if (!todo.due_date || todo.completed) return false;
+  return new Date(todo.due_date) < /* @__PURE__ */ new Date();
+};
+const formatDueDate = (d) => {
+  const date = new Date(d);
+  const diff = Math.floor((date.getTime() - Date.now()) / 864e5);
+  if (diff < 0) return `Il y a ${Math.abs(diff)}j`;
+  if (diff === 0) return "Aujourd'hui " + date.toLocaleTimeString("fr-FR", { hour: "2-digit", minute: "2-digit" });
+  if (diff === 1) return "Demain";
+  return date.toLocaleDateString("fr-FR", { day: "numeric", month: "short" });
+};
+const getPriorityBorder = (priority, overdue) => {
+  if (overdue) return "border-l-red-600 bg-red-50";
+  if (priority === "Haute") return "border-l-red-500 bg-white";
+  if (priority === "Moyenne") return "border-l-amber-500 bg-white";
+  return "border-l-slate-400 bg-slate-50";
+};
+const getLabelColor = (label) => {
+  if (label.includes("Retard")) return "text-red-700";
+  if (label.includes("Aujourd'hui")) return "text-blue-700";
+  if (label === "Demain") return "text-amber-700";
+  return "text-slate-700";
+};
+const toggleTodo = async (todo) => {
+  try {
+    await toggleTodoDb(todo.id);
+    todos.value = await fetchTodos();
+  } catch {
+  }
+};
+const openCreate = () => {
+  editingTodo.value = null;
+  formData.value = { title: "", description: "", priority: "Moyenne", due_date: "" };
+  showModal.value = true;
+};
+const openEdit = (todo) => {
+  editingTodo.value = todo;
+  let due = "";
+  if (todo.due_date) {
+    const d = new Date(todo.due_date);
+    due = `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, "0")}-${String(d.getDate()).padStart(2, "0")}T${String(d.getHours()).padStart(2, "0")}:${String(d.getMinutes()).padStart(2, "0")}`;
+  }
+  formData.value = { ...todo, due_date: due };
+  showModal.value = true;
+};
+const closeModal = () => {
+  showModal.value = false;
+  editingTodo.value = null;
+};
+const saveTodo = async () => {
+  if (!formData.value.title) return;
+  saving.value = true;
+  try {
+    const data = { ...formData.value };
+    data.due_date = data.due_date ? new Date(data.due_date).toISOString() : null;
+    if (editingTodo.value) await updateTodo(editingTodo.value.id, data);
+    else await createTodo(data);
+    todos.value = await fetchTodos();
+    closeModal();
+  } catch {
+  } finally {
+    saving.value = false;
+  }
+};
+const handleDelete = async (todo) => {
+  if (confirm("Supprimer ?")) {
+    try {
+      await deleteTodo(todo.id);
+      todos.value = await fetchTodos();
+    } catch {
+    }
+  }
+};
+</script>
+
+<template>
+  <AdminDashboardLayout>
+    <div class="max-w-7xl mx-auto px-6 md:px-10 py-10">
+      <div class="flex items-center justify-between mb-8">
+        <div>
+          <h1 class="text-4xl font-bold text-slate-900 mb-1">Todos</h1>
+          <p class="text-slate-500">Gerez vos taches et priorites</p>
+        </div>
+        <button @click="openCreate" class="px-6 py-3 bg-slate-900 text-white rounded-2xl font-bold text-sm hover:bg-slate-800 transition-all flex items-center gap-2">
+          <Icon name="mdi:plus-circle" class="text-xl" />
+          Nouveau Todo
+        </button>
+      </div>
+
+      <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 mb-10">
+        <div v-for="stat in stats" :key="stat.label" class="bg-white rounded-2xl p-6 border border-slate-100 shadow-sm">
+          <div :class="[stat.bg, 'w-10 h-10 rounded-xl flex items-center justify-center mb-4']">
+            <Icon :name="stat.icon" :class="[stat.color, 'text-xl']" />
+          </div>
+          <p class="text-xs font-bold text-slate-400 uppercase">{{ stat.label }}</p>
+          <p class="text-3xl font-black text-slate-900">{{ stat.value }}</p>
+        </div>
+      </div>
+
+      <div v-if="loading" class="text-center py-20 text-slate-400">
+        <Icon name="mdi:loading" class="text-5xl animate-spin" />
+      </div>
+
+      <div v-else class="space-y-8">
+        <div v-for="(group, label) in todosByDate" :key="label">
+          <div class="flex items-center gap-3 mb-3">
+            <h3 :class="['text-sm font-black uppercase tracking-tight', getLabelColor(label)]">{{ label }}</h3>
+            <div class="h-px flex-1 bg-slate-200"></div>
+            <span class="text-xs font-bold text-slate-400">{{ group.length }}</span>
+          </div>
+          <div class="space-y-2">
+            <div v-for="todo in group" :key="todo.id"
+                 :class="['rounded-xl p-3 shadow-sm hover:shadow-md transition-all group border-l-4', getPriorityBorder(todo.priority, isOverdue(todo))]">
+              <div class="flex items-center gap-3">
+                <button @click="toggleTodo(todo)" :class="['w-5 h-5 rounded-lg border-2 transition-all flex-shrink-0', todo.completed ? 'bg-emerald-500 border-emerald-500' : 'bg-white border-slate-200']">
+                  <Icon v-if="todo.completed" name="mdi:check-bold" class="text-white text-xs m-auto" />
+                </button>
+                <div class="flex-1 min-w-0">
+                  <div class="flex items-center gap-2">
+                    <p :class="['text-sm truncate', todo.completed ? 'line-through text-slate-400' : 'text-slate-900 font-bold']">{{ todo.title }}</p>
+                    <span v-if="todo.priority" :class="['text-[9px] font-black px-1.5 py-0.5 rounded-full uppercase flex-shrink-0', todo.priority === 'Haute' ? 'bg-red-100 text-red-700' : todo.priority === 'Moyenne' ? 'bg-amber-100 text-amber-700' : 'bg-slate-100 text-slate-600']">{{ todo.priority }}</span>
+                    <span v-if="isOverdue(todo) && !todo.completed" class="px-1.5 py-0.5 bg-red-600 text-white rounded-full text-[9px] font-black uppercase animate-pulse flex-shrink-0">Retard</span>
+                  </div>
+                  <p v-if="todo.description" class="text-slate-500 text-xs line-clamp-1">{{ todo.description }}</p>
+                  <p v-if="todo.due_date" :class="['text-[10px] mt-0.5', isOverdue(todo) && !todo.completed ? 'text-red-600 font-bold' : 'text-slate-400']">{{ formatDueDate(todo.due_date) }}</p>
+                </div>
+                <div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity flex-shrink-0">
+                  <button @click="openEdit(todo)" class="p-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-600 hover:text-white transition-all"><Icon name="mdi:pencil" class="text-sm" /></button>
+                  <button @click="handleDelete(todo)" class="p-1.5 bg-red-50 text-red-600 rounded-lg hover:bg-red-600 hover:text-white transition-all"><Icon name="mdi:delete" class="text-sm" /></button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="todosWithoutDate.length > 0">
+          <div class="flex items-center gap-3 mb-3">
+            <h3 class="text-sm font-black text-slate-400 uppercase tracking-tight">Sans Date</h3>
+            <div class="h-px flex-1 bg-slate-200"></div>
+            <span class="text-xs font-bold text-slate-400">{{ todosWithoutDate.length }}</span>
+          </div>
+          <div class="space-y-2">
+            <div v-for="todo in todosWithoutDate" :key="todo.id" class="bg-slate-50 rounded-xl p-3 shadow-sm hover:shadow-md transition-all group border-l-4 border-l-slate-300">
+              <div class="flex items-center gap-3">
+                <button @click="toggleTodo(todo)" :class="['w-5 h-5 rounded-lg border-2 transition-all flex-shrink-0', todo.completed ? 'bg-emerald-500 border-emerald-500' : 'bg-white border-slate-200']">
+                  <Icon v-if="todo.completed" name="mdi:check-bold" class="text-white text-xs m-auto" />
+                </button>
+                <div class="flex-1 min-w-0">
+                  <p :class="['text-sm truncate', todo.completed ? 'line-through text-slate-400' : 'text-slate-900 font-bold']">{{ todo.title }}</p>
+                  <p v-if="todo.description" class="text-slate-500 text-xs line-clamp-1">{{ todo.description }}</p>
+                </div>
+                <div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                  <button @click="openEdit(todo)" class="p-1.5 bg-blue-50 text-blue-600 rounded-lg hover:bg-blue-600 hover:text-white transition-all"><Icon name="mdi:pencil" class="text-sm" /></button>
+                  <button @click="handleDelete(todo)" class="p-1.5 bg-red-50 text-red-600 rounded-lg hover:bg-red-600 hover:text-white transition-all"><Icon name="mdi:delete" class="text-sm" /></button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div v-if="todos.length === 0" class="text-center py-20 bg-white rounded-3xl border-2 border-dashed border-slate-200">
+          <Icon name="mdi:clipboard-text-outline" class="text-6xl text-slate-200 mb-4" />
+          <p class="text-xl font-bold text-slate-800">Aucun todo pour le moment</p>
+          <button @click="openCreate" class="text-blue-600 font-black hover:underline mt-2">+ Creer votre premiere tache</button>
+        </div>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div v-if="showModal" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-slate-900/40 backdrop-blur-md">
+        <div class="bg-white rounded-[2rem] w-full max-w-lg overflow-hidden shadow-2xl">
+          <div class="p-5 border-b border-slate-100 bg-slate-50 flex justify-between items-center">
+            <h2 class="text-xl font-black text-slate-900">{{ editingTodo ? "Modifier" : "Nouveau Todo" }}</h2>
+            <button @click="closeModal" class="text-slate-400 hover:text-slate-600"><Icon name="mdi:close" class="text-xl" /></button>
+          </div>
+          <div class="p-5 space-y-4">
+            <input v-model="formData.title" type="text" placeholder="Titre..." class="w-full px-4 py-3 bg-slate-50 rounded-xl border-none focus:ring-2 focus:ring-blue-500 font-bold text-sm" />
+            <textarea v-model="formData.description" rows="2" placeholder="Description..." class="w-full px-4 py-3 bg-slate-50 rounded-xl border-none focus:ring-2 focus:ring-blue-500 font-medium resize-none text-sm"></textarea>
+            <div>
+              <label class="block text-[10px] font-bold text-slate-400 uppercase mb-1.5 ml-1">Echeance</label>
+              <input v-model="formData.due_date" type="datetime-local" class="w-full px-4 py-3 bg-emerald-50 border-2 border-emerald-200 rounded-xl font-bold text-emerald-900 text-sm" />
+            </div>
+            <div class="grid grid-cols-3 gap-1.5 p-1 bg-slate-100 rounded-xl">
+              <button v-for="p in ['Basse', 'Moyenne', 'Haute']" :key="p" @click="formData.priority = p"
+                      :class="formData.priority === p ? 'bg-white shadow-sm text-slate-900' : 'text-slate-400'"
+                      class="py-2 rounded-lg font-black text-[10px] uppercase transition-all">{{ p }}</button>
+            </div>
+            <button @click="saveTodo" :disabled="saving" class="w-full bg-slate-900 text-white font-black py-3 rounded-xl hover:bg-slate-800 transition-all text-sm">
+              {{ saving ? "CHARGEMENT..." : "VALIDER" }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </Teleport>
+  </AdminDashboardLayout>
+</template>

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

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

package/dist/runtime/plugins/admin-font.client.d.ts

@@ -1,7 +1,2 @@
-/**
- * Captures the host project's body font-family BEFORE the admin scope
- * (data-admin-cms) can shadow it, then stores it in --admin-site-font so
- * the section preview area can revert to the correct host font.
- */
 declare const _default: any;
 export default _default;

package/dist/runtime/plugins/admin-font.client.js

@@ -1,3 +1,4 @@
+import { defineNuxtPlugin } from "#imports";
 export default defineNuxtPlugin(() => {
   const bodyFont = window.getComputedStyle(document.body).fontFamily;
   if (bodyFont) {

package/dist/runtime/stores/adminUser.d.ts

@@ -1 +1,29 @@
-export declare const useAdminUserStore: any;
+export declare const useAdminUserStore: import("pinia").StoreDefinition<"adminUser", {
+    userData: Record<string, any> | null;
+    loading: boolean;
+    error: string | null;
+}, {
+    isSubscriptionActive: (state: {
+        userData: Record<string, any> | null;
+        loading: boolean;
+        error: string | null;
+    } & import("pinia").PiniaCustomStateProperties<{
+        userData: Record<string, any> | null;
+        loading: boolean;
+        error: string | null;
+    }>) => any;
+    trialDaysRemaining: (state: {
+        userData: Record<string, any> | null;
+        loading: boolean;
+        error: string | null;
+    } & import("pinia").PiniaCustomStateProperties<{
+        userData: Record<string, any> | null;
+        loading: boolean;
+        error: string | null;
+    }>) => number;
+}, {
+    fetchUserData(userId: string): Promise<void>;
+    signOut(): Promise<void>;
+    clearUserData(): void;
+    updateUserData(data: Record<string, any>): void;
+}>;

package/dist/runtime/stores/adminUser.js

@@ -1,4 +1,6 @@
 import { defineStore } from "pinia";
+import { useRuntimeConfig } from "#imports";
+import { useSupabaseClient } from "#imports";
 export const useAdminUserStore = defineStore("adminUser", {
   state: () => ({
     userData: null,
@@ -24,7 +26,7 @@ export const useAdminUserStore = defineStore("adminUser", {
         const table = config?.tables?.users || "users";
         const { data, error } = await supabase.from(table).select("*").eq("id", userId).single();
         if (error) throw error;
-        this.userData = data;
+        this.userData = data ? { ...data } : null;
       } catch (e) {
         this.error = e.message;
       } finally {
@@ -49,7 +51,7 @@ export const useAdminUserStore = defineStore("adminUser", {
       this.error = null;
     },
     updateUserData(data) {
-      this.userData = data;
+      this.userData = data ? { ...data } : null;
     }
   }
 });

package/dist/types.d.mts

@@ -1,3 +1,3 @@
 export { default } from './module.mjs'
 
-export { type ModuleOptions, type PageTypeConfig, type PlanConfig, type SectionConfig, type SectionFieldConfig } from './module.mjs'
+export { type ModuleOptions, type NavSectionItem, type PageTypeConfig, type PlanConfig, type SectionConfig, type SectionFieldConfig } from './module.mjs'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cinqcinqdev-seo",
-  "version": "0.1.8",
+  "version": "0.1.10",
   "description": "A reusable Nuxt 3 admin CMS module with visual page editor powered by Supabase",
   "license": "MIT",
   "module": "./dist/module.mjs",
@@ -22,16 +22,19 @@
     "release": "npm version patch && npm publish"
   },
   "peerDependencies": {
+    "@nuxt/icon": ">=1.0.0",
     "@nuxtjs/supabase": ">=1.0.0",
-    "@pinia/nuxt": ">=0.5.0",
+    "@pinia/nuxt": ">=0.5.0 || >=0.11.0",
     "nuxt": ">=3.0.0"
   },
   "devDependencies": {
+    "@nuxt/icon": "^1.15.0",
     "@nuxt/kit": "^3.13.0",
     "@nuxt/module-builder": "^1.0.2",
     "@nuxt/schema": "^3.13.0",
     "@nuxtjs/supabase": "^1.4.0",
-    "@pinia/nuxt": "^0.9.0",
+    "@pinia/nuxt": "^0.11.3",
+    "pinia": "^3.0.4",
     "defu": "^6.1.4",
     "nuxt": "^3.13.0",
     "tailwindcss": "^3.4.19",