cinqcinqdev-seo 0.1.8 → 0.1.10

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

@@ -0,0 +1,300 @@
+<script setup>
+import { ref, computed, onMounted, useHead } from "#imports";
+import { useAdminProducts } from "#imports";
+useHead({ title: "Produits - Admin" });
+const { fetchProducts, createProduct, updateProduct, deleteProduct } = useAdminProducts();
+const products = ref([]);
+const loading = ref(true);
+const showModal = ref(false);
+const editingProduct = ref(null);
+const saving = ref(false);
+const featuresText = ref("");
+const defaultForm = () => ({
+  name: "",
+  description: "",
+  short_description: "",
+  type: "product",
+  category: "",
+  price: 0,
+  currency: "EUR",
+  pricing_model: "one-time",
+  is_offer: false,
+  original_price: 0,
+  discount_percentage: 0,
+  features: [],
+  status: "active",
+  stock_quantity: 0,
+  is_unlimited_stock: true
+});
+const formData = ref(defaultForm());
+onMounted(async () => {
+  loading.value = true;
+  try {
+    products.value = await fetchProducts();
+  } catch {
+  } finally {
+    loading.value = false;
+  }
+});
+const activeProducts = computed(() => products.value.filter((p) => p.status === "active").length);
+const offerProducts = computed(() => products.value.filter((p) => p.is_offer).length);
+const totalRevenue = computed(() => products.value.reduce((s, p) => s + (p.revenue_generated || 0), 0).toLocaleString("fr-FR"));
+const openCreate = () => {
+  editingProduct.value = null;
+  formData.value = defaultForm();
+  featuresText.value = "";
+  showModal.value = true;
+};
+const editProduct = (p) => {
+  editingProduct.value = p;
+  formData.value = { ...p };
+  featuresText.value = p.features?.join("\n") || "";
+  showModal.value = true;
+};
+const closeModal = () => {
+  showModal.value = false;
+  editingProduct.value = null;
+};
+const saveProduct = async () => {
+  saving.value = true;
+  try {
+    formData.value.features = featuresText.value.split("\n").map((f) => f.trim()).filter((f) => f);
+    if (editingProduct.value) await updateProduct(editingProduct.value.id, formData.value);
+    else await createProduct(formData.value);
+    products.value = await fetchProducts();
+    closeModal();
+  } catch {
+  } finally {
+    saving.value = false;
+  }
+};
+const duplicateProduct = async (p) => {
+  const d = { ...p };
+  delete d.id;
+  d.name = `${p.name} (Copie)`;
+  d.units_sold = 0;
+  d.revenue_generated = 0;
+  await createProduct(d);
+  products.value = await fetchProducts();
+};
+const handleDelete = async (id) => {
+  if (confirm("Supprimer ce produit ?")) {
+    await deleteProduct(id);
+    products.value = await fetchProducts();
+  }
+};
+const formatPrice = (n) => new Intl.NumberFormat("fr-FR").format(n);
+const statusClass = (s) => ({
+  active: "px-3 py-1 bg-green-100 text-green-700 rounded-lg text-sm font-semibold",
+  inactive: "px-3 py-1 bg-gray-100 text-gray-700 rounded-lg text-sm font-semibold",
+  draft: "px-3 py-1 bg-yellow-100 text-yellow-700 rounded-lg text-sm font-semibold",
+  archived: "px-3 py-1 bg-red-100 text-red-700 rounded-lg text-sm font-semibold"
+})[s] || "px-3 py-1 bg-green-100 text-green-700 rounded-lg text-sm font-semibold";
+const statusLabel = (s) => ({ active: "Actif", inactive: "Inactif", draft: "Brouillon", archived: "Archive" })[s] || s;
+</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">Produits & Offres</h1>
+          <p class="text-slate-500 mt-1">Gerez votre catalogue de produits et services</p>
+        </div>
+        <button @click="openCreate" class="px-6 py-3 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 shadow-lg flex items-center gap-2">
+          <Icon name="mdi:plus" class="inline" />
+          Nouveau Produit
+        </button>
+      </div>
+
+      <div class="grid grid-cols-2 md:grid-cols-4 gap-6 mb-8">
+        <div class="bg-white rounded-2xl p-6 border border-slate-200">
+          <div class="flex items-center justify-between mb-2">
+            <Icon name="mdi:package-variant" class="text-3xl text-blue-600" />
+            <span class="px-3 py-1 bg-blue-100 text-blue-700 text-xs font-bold rounded-full">Total</span>
+          </div>
+          <p class="text-3xl font-black text-slate-900">{{ products.length }}</p>
+          <p class="text-sm text-slate-500">Produits</p>
+        </div>
+        <div class="bg-white rounded-2xl p-6 border border-slate-200">
+          <div class="flex items-center justify-between mb-2">
+            <Icon name="mdi:check-circle" class="text-3xl text-green-600" />
+            <span class="px-3 py-1 bg-green-100 text-green-700 text-xs font-bold rounded-full">Actifs</span>
+          </div>
+          <p class="text-3xl font-black text-slate-900">{{ activeProducts }}</p>
+          <p class="text-sm text-slate-500">En vente</p>
+        </div>
+        <div class="bg-white rounded-2xl p-6 border border-slate-200">
+          <div class="flex items-center justify-between mb-2">
+            <Icon name="mdi:tag-multiple" class="text-3xl text-orange-600" />
+            <span class="px-3 py-1 bg-orange-100 text-orange-700 text-xs font-bold rounded-full">Promos</span>
+          </div>
+          <p class="text-3xl font-black text-slate-900">{{ offerProducts }}</p>
+          <p class="text-sm text-slate-500">Offres actives</p>
+        </div>
+        <div class="bg-white rounded-2xl p-6 border border-slate-200">
+          <div class="flex items-center justify-between mb-2">
+            <Icon name="mdi:cash-multiple" class="text-3xl text-purple-600" />
+            <span class="px-3 py-1 bg-purple-100 text-purple-700 text-xs font-bold rounded-full">Revenue</span>
+          </div>
+          <p class="text-3xl font-black text-slate-900">{{ totalRevenue }}</p>
+          <p class="text-sm text-slate-500">Total</p>
+        </div>
+      </div>
+
+      <div class="bg-white rounded-3xl border border-slate-200 shadow-sm overflow-hidden">
+        <div class="overflow-x-auto">
+          <table class="w-full">
+            <thead>
+              <tr class="bg-slate-50 border-b border-slate-200">
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Produit</th>
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Type</th>
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Prix</th>
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Statut</th>
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Ventes</th>
+                <th class="px-6 py-4 text-left text-xs font-black text-slate-600 uppercase">Actions</th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-slate-200">
+              <tr v-for="product in products" :key="product.id" class="hover:bg-slate-50 transition-colors">
+                <td class="px-6 py-4">
+                  <div class="flex items-center gap-4">
+                    <div class="w-14 h-14 rounded-xl overflow-hidden bg-slate-100 flex items-center justify-center flex-shrink-0">
+                      <img v-if="product.image_url" :src="product.image_url" :alt="product.name" class="w-full h-full object-cover" />
+                      <Icon v-else name="mdi:package-variant" class="text-2xl text-slate-400" />
+                    </div>
+                    <div>
+                      <p class="font-bold text-slate-900">{{ product.name }}</p>
+                      <p class="text-sm text-slate-500 line-clamp-1">{{ product.short_description }}</p>
+                      <span v-if="product.is_offer" class="px-2 py-0.5 bg-orange-100 text-orange-700 text-xs font-bold rounded">-{{ product.discount_percentage }}% OFF</span>
+                    </div>
+                  </div>
+                </td>
+                <td class="px-6 py-4"><span class="px-3 py-1 bg-blue-100 text-blue-700 rounded-lg text-sm font-semibold capitalize">{{ product.type }}</span></td>
+                <td class="px-6 py-4">
+                  <p class="font-bold text-slate-900">{{ formatPrice(product.price) }} {{ product.currency }}</p>
+                  <p v-if="product.is_offer && product.original_price" class="text-sm text-slate-400 line-through">{{ formatPrice(product.original_price) }}</p>
+                  <p v-if="product.pricing_model" class="text-xs text-slate-500">{{ product.pricing_model }}</p>
+                </td>
+                <td class="px-6 py-4"><span :class="statusClass(product.status)">{{ statusLabel(product.status) }}</span></td>
+                <td class="px-6 py-4">
+                  <p class="font-bold text-slate-900">{{ product.units_sold || 0 }} unites</p>
+                  <p class="text-sm text-slate-500">{{ formatPrice(product.revenue_generated || 0) }}</p>
+                </td>
+                <td class="px-6 py-4">
+                  <div class="flex items-center gap-2">
+                    <button @click="editProduct(product)" class="p-2 hover:bg-blue-100 text-blue-600 rounded-lg transition-all"><Icon name="mdi:pencil" class="text-lg" /></button>
+                    <button @click="duplicateProduct(product)" class="p-2 hover:bg-green-100 text-green-600 rounded-lg transition-all"><Icon name="mdi:content-copy" class="text-lg" /></button>
+                    <button @click="handleDelete(product.id)" class="p-2 hover:bg-red-100 text-red-600 rounded-lg transition-all"><Icon name="mdi:delete" class="text-lg" /></button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+        <div v-if="products.length === 0" class="text-center py-16 text-slate-400">
+          <Icon name="mdi:package-variant-closed" class="text-6xl mb-4 mx-auto" />
+          <p class="text-lg font-bold mb-2">Aucun produit</p>
+          <button @click="openCreate" class="px-6 py-3 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 mt-2">
+            <Icon name="mdi:plus" class="inline mr-2" /> Creer mon premier produit
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <Teleport to="body">
+      <div v-if="showModal" class="fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center p-6" @click.self="closeModal">
+        <div class="bg-white rounded-3xl p-8 max-w-4xl w-full max-h-[90vh] overflow-y-auto shadow-2xl">
+          <div class="flex items-center justify-between mb-6">
+            <h3 class="text-2xl font-bold text-slate-900">{{ editingProduct ? "Modifier le Produit" : "Nouveau Produit" }}</h3>
+            <button @click="closeModal" class="p-2 hover:bg-slate-100 rounded-xl transition-colors"><Icon name="mdi:close" class="text-2xl text-slate-400" /></button>
+          </div>
+          <form @submit.prevent="saveProduct" class="space-y-6">
+            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div class="md:col-span-2">
+                <label class="block text-sm font-semibold text-slate-700 mb-2">Nom *</label>
+                <input v-model="formData.name" required class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none" />
+              </div>
+              <div class="md:col-span-2">
+                <label class="block text-sm font-semibold text-slate-700 mb-2">Description courte</label>
+                <input v-model="formData.short_description" maxlength="500" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none" />
+              </div>
+              <div class="md:col-span-2">
+                <label class="block text-sm font-semibold text-slate-700 mb-2">Description complete</label>
+                <textarea v-model="formData.description" rows="3" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none"></textarea>
+              </div>
+              <div>
+                <label class="block text-sm font-semibold text-slate-700 mb-2">Type *</label>
+                <select v-model="formData.type" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none">
+                  <option value="product">Produit</option>
+                  <option value="service">Service</option>
+                  <option value="subscription">Abonnement</option>
+                  <option value="package">Package</option>
+                </select>
+              </div>
+              <div>
+                <label class="block text-sm font-semibold text-slate-700 mb-2">Categorie</label>
+                <input v-model="formData.category" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none" />
+              </div>
+            </div>
+            <div class="border-t pt-6">
+              <h4 class="text-lg font-bold text-slate-900 mb-4">Tarification</h4>
+              <div class="grid grid-cols-3 gap-4">
+                <div>
+                  <label class="block text-sm font-semibold text-slate-700 mb-2">Prix *</label>
+                  <input v-model.number="formData.price" type="number" step="0.01" required class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl focus:border-blue-500 focus:outline-none" />
+                </div>
+                <div>
+                  <label class="block text-sm font-semibold text-slate-700 mb-2">Devise</label>
+                  <select v-model="formData.currency" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl">
+                    <option value="EUR">EUR</option><option value="USD">USD</option><option value="DZD">DZD</option>
+                  </select>
+                </div>
+                <div>
+                  <label class="block text-sm font-semibold text-slate-700 mb-2">Modele</label>
+                  <select v-model="formData.pricing_model" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl">
+                    <option value="one-time">Paiement unique</option>
+                    <option value="monthly">Mensuel</option>
+                    <option value="yearly">Annuel</option>
+                    <option value="custom">Personnalise</option>
+                  </select>
+                </div>
+              </div>
+              <div class="mt-4 p-4 bg-orange-50 rounded-xl border-2 border-orange-200">
+                <label class="flex items-center gap-3 cursor-pointer">
+                  <input v-model="formData.is_offer" type="checkbox" class="w-5 h-5 rounded" />
+                  <span class="font-bold text-slate-900">Offre promotionnelle</span>
+                </label>
+                <div v-if="formData.is_offer" class="grid grid-cols-2 gap-4 mt-4">
+                  <div>
+                    <label class="block text-sm font-semibold text-slate-700 mb-2">Prix original</label>
+                    <input v-model.number="formData.original_price" type="number" step="0.01" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl" />
+                  </div>
+                  <div>
+                    <label class="block text-sm font-semibold text-slate-700 mb-2">Reduction (%)</label>
+                    <input v-model.number="formData.discount_percentage" type="number" min="0" max="100" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl" />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="border-t pt-6">
+              <h4 class="text-lg font-bold text-slate-900 mb-4">Caracteristiques</h4>
+              <textarea v-model="featuresText" rows="4" placeholder="Une par ligne..." class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl"></textarea>
+            </div>
+            <div class="border-t pt-6">
+              <h4 class="text-lg font-bold text-slate-900 mb-4">Statut</h4>
+              <select v-model="formData.status" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl">
+                <option value="active">Actif</option><option value="inactive">Inactif</option>
+                <option value="draft">Brouillon</option><option value="archived">Archive</option>
+              </select>
+            </div>
+            <div class="flex gap-3 pt-4 border-t">
+              <button type="submit" :disabled="saving" class="flex-1 px-6 py-3 bg-blue-600 text-white font-bold rounded-xl hover:bg-blue-700 disabled:opacity-50">{{ saving ? "Enregistrement..." : "Enregistrer" }}</button>
+              <button type="button" @click="closeModal" class="px-6 py-3 bg-slate-100 text-slate-700 font-bold rounded-xl hover:bg-slate-200">Annuler</button>
+            </div>
+          </form>
+        </div>
+      </div>
+    </Teleport>
+  </AdminDashboardLayout>
+</template>

package/dist/runtime/pages/admin/products.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/strategies/[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/strategies/[id].vue

@@ -0,0 +1,237 @@
+<script setup>
+import { ref, onMounted, useHead, useRoute, navigateTo } from "#imports";
+import { useAdminStrategies, useAdminContent, useAdminPersonas } from "#imports";
+const route = useRoute();
+const id = route.params.id;
+useHead({ title: "Strategie - Admin" });
+const { fetchStrategyById, updateStrategy, fetchStrategyContents, fetchStrategyPersonas } = useAdminStrategies();
+const { fetchContent, createContent } = useAdminContent();
+const { fetchPersonas } = useAdminPersonas();
+const strategy = ref(null);
+const contents = ref([]);
+const linkedPersonas = ref([]);
+const allContents = ref([]);
+const allPersonas = ref([]);
+const loading = ref(true);
+const editMode = ref(false);
+const saving = ref(false);
+const formData = ref({});
+const activeTab = ref("overview");
+onMounted(async () => {
+  loading.value = true;
+  try {
+    const [s, c, p, ac, ap] = await Promise.all([
+      fetchStrategyById(id),
+      fetchStrategyContents(id),
+      fetchStrategyPersonas(id),
+      fetchContent(),
+      fetchPersonas()
+    ]);
+    strategy.value = s;
+    contents.value = c || [];
+    linkedPersonas.value = p || [];
+    allContents.value = ac || [];
+    allPersonas.value = ap || [];
+    formData.value = { ...s };
+  } catch {
+  } finally {
+    loading.value = false;
+  }
+});
+const saveChanges = async () => {
+  saving.value = true;
+  try {
+    const updated = await updateStrategy(id, formData.value);
+    strategy.value = updated;
+    editMode.value = false;
+  } catch {
+  } finally {
+    saving.value = false;
+  }
+};
+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"
+})[s] || "bg-slate-100 text-slate-600";
+const priorityClass = (p) => ({
+  Critique: "bg-red-100 text-red-700",
+  Haute: "bg-orange-100 text-orange-700",
+  Moyenne: "bg-blue-100 text-blue-700",
+  Basse: "bg-slate-100 text-slate-600"
+})[p] || "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 contentStatusClass = {
+  draft: "bg-slate-100 text-slate-500",
+  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-6xl mx-auto px-6 md:px-10 py-10">
+      <NuxtLink to="/admin/strategies" class="inline-flex items-center gap-2 text-blue-600 hover:text-blue-700 mb-8 font-medium">
+        <Icon name="mdi:arrow-left" />
+        Retour aux strategies
+      </NuxtLink>
+
+      <div v-if="loading" class="flex items-center justify-center py-20">
+        <Icon name="mdi:loading" class="text-5xl text-blue-600 animate-spin" />
+      </div>
+
+      <div v-else-if="strategy">
+        <!-- Header -->
+        <div class="bg-white rounded-3xl p-8 border border-slate-200 shadow-sm mb-6">
+          <div class="flex items-start justify-between">
+            <div class="flex-1">
+              <div class="flex items-center gap-3 mb-2">
+                <h1 class="text-3xl font-bold text-slate-900">{{ strategy.name }}</h1>
+                <span :class="['px-3 py-1 rounded-full text-xs font-semibold', statusClass(strategy.status)]">{{ strategy.status }}</span>
+                <span v-if="strategy.priority" :class="['px-3 py-1 rounded-full text-xs font-semibold', priorityClass(strategy.priority)]">{{ strategy.priority }}</span>
+              </div>
+              <p class="text-slate-600 mb-4">{{ strategy.description }}</p>
+              <div class="flex flex-wrap items-center gap-6 text-sm text-slate-500">
+                <span v-if="strategy.start_date">{{ formatDate(strategy.start_date) }} — {{ formatDate(strategy.end_date) }}</span>
+                <span v-if="strategy.budget" class="font-semibold text-emerald-600">{{ formatBudget(strategy.budget) }}</span>
+              </div>
+              <div v-if="strategy.completion_percentage !== void 0" class="mt-4 max-w-sm">
+                <div class="flex justify-between mb-1 text-xs">
+                  <span class="text-slate-500">Progression</span>
+                  <span class="font-semibold text-blue-600">{{ strategy.completion_percentage }}%</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"></div>
+                </div>
+              </div>
+            </div>
+            <button @click="editMode = !editMode" 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>
+
+        <!-- Edit Form -->
+        <div v-if="editMode" class="bg-white rounded-3xl p-8 border border-slate-200 shadow-sm mb-6">
+          <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" 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">Statut</label>
+              <select v-model="formData.status" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl">
+                <option v-for="s in ['draft', 'active', 'paused', 'completed', 'cancelled']" :key="s" :value="s">{{ s }}</option>
+              </select>
+            </div>
+            <div class="col-span-2">
+              <label class="block text-xs font-black uppercase text-slate-500 mb-2">Description</label>
+              <textarea v-model="formData.description" rows="3" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl resize-none"></textarea>
+            </div>
+            <div>
+              <label class="block text-xs font-black uppercase text-slate-500 mb-2">Progression (%)</label>
+              <input v-model.number="formData.completion_percentage" type="number" min="0" max="100" 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">Budget</label>
+              <input v-model.number="formData.budget" type="number" step="0.01" class="w-full px-4 py-3 border-2 border-slate-200 rounded-xl" />
+            </div>
+          </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>
+
+        <!-- Tabs -->
+        <div class="flex gap-2 bg-white p-2 rounded-2xl border border-slate-200 shadow-sm mb-6 inline-flex">
+          <button v-for="tab in [{ v: 'overview', l: 'Apercu' }, { v: 'contents', l: 'Contenus' }, { v: 'personas', l: 'Personas' }]" :key="tab.v"
+                  @click="activeTab = tab.v"
+                  :class="[activeTab === tab.v ? 'bg-blue-600 text-white shadow-lg' : 'text-slate-600 hover:bg-slate-50']"
+                  class="px-5 py-2.5 rounded-xl font-semibold text-sm transition-all">{{ tab.l }}</button>
+        </div>
+
+        <!-- Overview Tab -->
+        <div v-if="activeTab === 'overview'" class="grid grid-cols-2 gap-6">
+          <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:target" class="text-blue-600" /> Objectif</h3>
+            <p class="text-slate-600 leading-relaxed">{{ strategy.objective || "Non defini." }}</p>
+          </div>
+          <div class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm">
+            <h3 class="font-black text-slate-900 mb-4">Statistiques</h3>
+            <div class="space-y-3">
+              <div class="flex justify-between items-center">
+                <span class="text-sm text-slate-500">Contenus</span>
+                <span class="font-bold text-slate-900">{{ contents.length }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-sm text-slate-500">Personas</span>
+                <span class="font-bold text-slate-900">{{ linkedPersonas.length }}</span>
+              </div>
+              <div class="flex justify-between items-center">
+                <span class="text-sm text-slate-500">Publies</span>
+                <span class="font-bold text-emerald-600">{{ contents.filter((c) => c.content?.status === "published").length }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Contents Tab -->
+        <div v-if="activeTab === 'contents'" class="space-y-4">
+          <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+            <div class="p-6 border-b border-slate-100">
+              <h3 class="font-black text-slate-900">Contenus de la Strategie</h3>
+            </div>
+            <div v-if="contents.length === 0" class="text-center py-12 text-slate-300">
+              <Icon name="mdi:file-document-outline" class="text-5xl mb-2" />
+              <p class="text-sm">Aucun contenu lie a cette strategie</p>
+            </div>
+            <div v-else class="divide-y divide-slate-100">
+              <div v-for="item in contents" :key="item.id" class="p-4 hover:bg-slate-50 transition-colors">
+                <div class="flex items-center gap-4">
+                  <div class="flex-1">
+                    <p class="font-bold text-slate-900">{{ item.content?.title || "Sans titre" }}</p>
+                    <p class="text-xs text-slate-500">{{ item.content?.platform }} • Position: {{ item.position }}</p>
+                  </div>
+                  <span :class="['px-2 py-1 rounded-lg text-[10px] font-black uppercase', contentStatusClass[item.content?.status] || contentStatusClass.draft]">{{ item.content?.status }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Personas Tab -->
+        <div v-if="activeTab === 'personas'" class="space-y-4">
+          <div class="bg-white rounded-2xl border border-slate-200 shadow-sm overflow-hidden">
+            <div class="p-6 border-b border-slate-100">
+              <h3 class="font-black text-slate-900">Personas Cibles</h3>
+            </div>
+            <div v-if="linkedPersonas.length === 0" class="text-center py-12 text-slate-300">
+              <Icon name="mdi:account-group" class="text-5xl mb-2" />
+              <p class="text-sm">Aucun persona lie a cette strategie</p>
+            </div>
+            <div v-else class="divide-y divide-slate-100">
+              <div v-for="item in linkedPersonas" :key="item.id" class="p-4 hover:bg-slate-50 transition-colors flex items-center gap-4">
+                <div class="w-12 h-12 bg-gradient-to-br from-purple-400 to-pink-400 rounded-xl flex items-center justify-center text-white font-black">
+                  {{ item.persona?.name ? item.persona.name.charAt(0) : "?" }}
+                </div>
+                <div>
+                  <p class="font-bold text-slate-900">{{ item.persona?.name }}</p>
+                  <p class="text-xs text-slate-500">{{ item.persona?.job_title }}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-else class="text-center py-20">
+        <Icon name="mdi:strategy" class="text-6xl text-slate-200 mb-4" />
+        <p class="text-slate-400">Strategie introuvable.</p>
+      </div>
+    </div>
+  </AdminDashboardLayout>
+</template>

package/dist/runtime/pages/admin/strategies/[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/strategies/index.d.vue.ts

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