cinqcinqdev-seo 0.1.9 → 0.1.11

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

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

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

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

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

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

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;