cinqcinqdev-seo 0.1.9 → 0.1.11

package/dist/runtime/components/admin/Sidebar.vue

@@ -0,0 +1,115 @@
+<template>
+  <aside data-admin-cms class="w-[220px] bg-[#0d0d0d] flex-shrink-0 flex flex-col overflow-y-auto">
+
+    <!-- Logo -->
+    <div class="px-5 pt-6 pb-5">
+      <NuxtLink to="/admin" class="flex items-center gap-2.5">
+        <img v-if="branding.logoUrl" :src="branding.logoUrl" class="h-8 w-auto" :alt="branding.name" />
+        <span v-else class="w-8 h-8 bg-[#3d35ff] rounded-lg flex items-center justify-center text-white text-[10px] font-black tracking-tight shrink-0">
+          {{ brandInitials }}
+        </span>
+        <div>
+          <span class="text-white font-black text-sm leading-none block">{{ branding.name }}</span>
+          <span class="text-white/30 text-[9px] font-medium">Admin CMS</span>
+        </div>
+      </NuxtLink>
+    </div>
+
+    <!-- Nav -->
+    <nav class="flex-1 px-3 pb-4 space-y-0.5 overflow-y-auto">
+
+      <!-- Dashboard -->
+      <NuxtLink to="/admin"
+        :class="[
+  'flex items-center gap-2.5 px-3 py-2 rounded-lg text-[11px] font-semibold transition-all',
+  route.path === '/admin' ? 'bg-white text-black' : 'text-white/50 hover:text-white hover:bg-white/[0.08]'
+]">
+        <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"/>
+        </svg>
+        Tableau de bord
+      </NuxtLink>
+
+      <!-- Pages section -->
+      <div v-if="pageTypes.length" class="pt-4 pb-1.5 px-3">
+        <p class="text-[8px] font-black uppercase text-white/20 tracking-[0.15em]">Pages</p>
+      </div>
+
+      <NuxtLink v-for="pt in pageTypes" :key="pt.id" :to="`/admin/pages/${pt.id}`"
+        :class="[
+  'flex items-center gap-2.5 px-3 py-2 rounded-lg text-[11px] font-semibold transition-all',
+  route.path === `/admin/pages/${pt.id}` ? 'bg-white text-black' : 'text-white/50 hover:text-white hover:bg-white/[0.08]'
+]">
+        <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+          v-html="pt.svgPath || defaultIcons[pt.id] || defaultIcons.blog_article">
+        </svg>
+        {{ pt.label }}
+      </NuxtLink>
+
+      <!-- Extra nav sections (e.g. Templates, Messages) -->
+      <template v-if="navSections.length">
+        <div class="pt-4 pb-1.5 px-3">
+          <p class="text-[8px] font-black uppercase text-white/20 tracking-[0.15em]">Contenu</p>
+        </div>
+        <NuxtLink v-for="item in navSections" :key="item.to" :to="item.to"
+          :class="[
+  'flex items-center gap-2.5 px-3 py-2 rounded-lg text-[11px] font-semibold transition-all',
+  route.path.startsWith(item.to) ? 'bg-white text-black' : 'text-white/50 hover:text-white hover:bg-white/[0.08]'
+]">
+          <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"
+            v-html="item.svgPath || defaultNavIcon">
+          </svg>
+          {{ item.label }}
+        </NuxtLink>
+      </template>
+
+    </nav>
+
+    <!-- Bottom -->
+    <div class="px-3 py-4 border-t border-white/[0.06] space-y-0.5">
+      <NuxtLink to="/admin/account"
+        :class="[
+  'flex items-center gap-2.5 px-3 py-2 rounded-lg text-[11px] font-semibold transition-all',
+  route.path === '/admin/account' ? 'bg-white text-black' : 'text-white/50 hover:text-white hover:bg-white/[0.08]'
+]">
+        <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
+        </svg>
+        Mon compte
+      </NuxtLink>
+      <button @click="handleLogout" class="w-full flex items-center gap-2.5 px-3 py-2 rounded-lg text-[11px] font-semibold text-white/30 hover:text-red-400 hover:bg-red-500/5 transition-all">
+        <svg class="w-3.5 h-3.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"/>
+        </svg>
+        Déconnexion
+      </button>
+    </div>
+  </aside>
+</template>
+
+<script setup>
+import { computed, useRoute, useRuntimeConfig, useSupabaseClient, navigateTo } from "#imports";
+const route = useRoute();
+const config = useRuntimeConfig().public.adminCms;
+const branding = computed(() => ({
+  name: config?.branding?.name || "Admin",
+  logoUrl: config?.branding?.logoUrl || ""
+}));
+const brandInitials = computed(() => branding.value.name.substring(0, 2).toUpperCase());
+const pageTypes = computed(() => config?.pageTypes || []);
+const navSections = computed(() => config?.navSections || []);
+const defaultIcons = {
+  landing_page: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>',
+  service_page: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 13.255A23.931 23.931 0 0112 15c-3.183 0-6.22-.62-9-1.745M16 6V4a2 2 0 00-2-2h-4a2 2 0 00-2 2v2m4 6h.01M5 20h14a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>',
+  about_page: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>',
+  product_page: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"/>',
+  blog_article: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>',
+  portfolio_item: '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/>'
+};
+const defaultNavIcon = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"/>';
+const handleLogout = async () => {
+  const supabase = useSupabaseClient();
+  await supabase.auth.signOut();
+  navigateTo(config?.loginRoute || "/");
+};
+</script>

package/dist/runtime/components/admin/Sidebar.vue.d.ts

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

package/dist/runtime/composables/useAdminBranding.d.ts

@@ -0,0 +1,4 @@
+export declare const useAdminBranding: () => {
+    fetchBranding: () => Promise<any>;
+    saveBranding: (brandingData: any) => Promise<any>;
+};

package/dist/runtime/composables/useAdminBranding.js

@@ -0,0 +1,22 @@
+import { useSupabaseClient } from "#imports";
+export const useAdminBranding = () => {
+  const supabase = useSupabaseClient();
+  const fetchBranding = async () => {
+    const { data, error } = await supabase.from("branding").select("*").limit(1).single();
+    if (error && error.code !== "PGRST116") throw error;
+    return data || null;
+  };
+  const saveBranding = async (brandingData) => {
+    const existing = await fetchBranding();
+    if (existing?.id) {
+      const { data, error } = await supabase.from("branding").update(brandingData).eq("id", existing.id).select().single();
+      if (error) throw error;
+      return data;
+    } else {
+      const { data, error } = await supabase.from("branding").insert(brandingData).select().single();
+      if (error) throw error;
+      return data;
+    }
+  };
+  return { fetchBranding, saveBranding };
+};

package/dist/runtime/composables/useAdminContent.d.ts

@@ -0,0 +1,9 @@
+export declare const useAdminContent: () => {
+    fetchContent: () => Promise<any>;
+    getContentByPersona: (personaId: string) => Promise<any>;
+    getContentByStatus: (status: string) => Promise<any>;
+    createContent: (content: any) => Promise<any>;
+    updateContent: (id: string, updates: any) => Promise<any>;
+    deleteContent: (id: string) => Promise<boolean>;
+    publishContent: (id: string) => Promise<any>;
+};

package/dist/runtime/composables/useAdminContent.js

@@ -0,0 +1,46 @@
+import { useSupabaseClient } from "#imports";
+export const useAdminContent = () => {
+  const supabase = useSupabaseClient();
+  const fetchContent = async () => {
+    const { data, error } = await supabase.from("generated_content").select("*").order("created_at", { ascending: false });
+    if (error) throw error;
+    return data || [];
+  };
+  const getContentByPersona = async (personaId) => {
+    const { data, error } = await supabase.from("generated_content").select("*").eq("persona_id", personaId).order("created_at", { ascending: false });
+    if (error) throw error;
+    return data || [];
+  };
+  const getContentByStatus = async (status) => {
+    const { data, error } = await supabase.from("generated_content").select("*").eq("status", status).order("created_at", { ascending: false });
+    if (error) throw error;
+    return data || [];
+  };
+  const createContent = async (content) => {
+    const { data, error } = await supabase.from("generated_content").insert(content).select().single();
+    if (error) throw error;
+    return data;
+  };
+  const updateContent = async (id, updates) => {
+    const { data, error } = await supabase.from("generated_content").update(updates).eq("id", id).select().single();
+    if (error) throw error;
+    return data;
+  };
+  const deleteContent = async (id) => {
+    const { error } = await supabase.from("generated_content").delete().eq("id", id);
+    if (error) throw error;
+    return true;
+  };
+  const publishContent = async (id) => {
+    return updateContent(id, { status: "published", published_at: (/* @__PURE__ */ new Date()).toISOString() });
+  };
+  return {
+    fetchContent,
+    getContentByPersona,
+    getContentByStatus,
+    createContent,
+    updateContent,
+    deleteContent,
+    publishContent
+  };
+};

package/dist/runtime/composables/useAdminPersonas.d.ts

@@ -0,0 +1,8 @@
+export declare const useAdminPersonas: () => {
+    fetchPersonas: () => Promise<any>;
+    fetchPersonaById: (id: string) => Promise<any>;
+    createPersona: (persona: any) => Promise<any>;
+    updatePersona: (id: string, updates: any) => Promise<any>;
+    deletePersona: (id: string) => Promise<boolean>;
+    archivePersona: (id: string) => Promise<any>;
+};

package/dist/runtime/composables/useAdminPersonas.js

@@ -0,0 +1,31 @@
+import { useSupabaseClient } from "#imports";
+export const useAdminPersonas = () => {
+  const supabase = useSupabaseClient();
+  const fetchPersonas = async () => {
+    const { data, error } = await supabase.from("personas").select("*").eq("is_archived", false).order("created_at", { ascending: false });
+    if (error) throw error;
+    return data || [];
+  };
+  const fetchPersonaById = async (id) => {
+    const { data, error } = await supabase.from("personas").select("*").eq("id", id).single();
+    if (error) throw error;
+    return data;
+  };
+  const createPersona = async (persona) => {
+    const { data, error } = await supabase.from("personas").insert(persona).select().single();
+    if (error) throw error;
+    return data;
+  };
+  const updatePersona = async (id, updates) => {
+    const { data, error } = await supabase.from("personas").update(updates).eq("id", id).select().single();
+    if (error) throw error;
+    return data;
+  };
+  const deletePersona = async (id) => {
+    const { error } = await supabase.from("personas").delete().eq("id", id);
+    if (error) throw error;
+    return true;
+  };
+  const archivePersona = async (id) => updatePersona(id, { is_archived: true });
+  return { fetchPersonas, fetchPersonaById, createPersona, updatePersona, deletePersona, archivePersona };
+};

package/dist/runtime/composables/useAdminProducts.d.ts

@@ -0,0 +1,6 @@
+export declare const useAdminProducts: () => {
+    fetchProducts: () => Promise<any>;
+    createProduct: (product: any) => Promise<any>;
+    updateProduct: (id: string, product: any) => Promise<any>;
+    deleteProduct: (id: string) => Promise<void>;
+};

package/dist/runtime/composables/useAdminProducts.js

@@ -0,0 +1,24 @@
+import { useSupabaseClient } from "#imports";
+export const useAdminProducts = () => {
+  const supabase = useSupabaseClient();
+  const fetchProducts = async () => {
+    const { data, error } = await supabase.from("products").select("*").order("priority", { ascending: false }).order("created_at", { ascending: false });
+    if (error) throw error;
+    return data || [];
+  };
+  const createProduct = async (product) => {
+    const { data, error } = await supabase.from("products").insert([product]).select().single();
+    if (error) throw error;
+    return data;
+  };
+  const updateProduct = async (id, product) => {
+    const { data, error } = await supabase.from("products").update(product).eq("id", id).select().single();
+    if (error) throw error;
+    return data;
+  };
+  const deleteProduct = async (id) => {
+    const { error } = await supabase.from("products").delete().eq("id", id);
+    if (error) throw error;
+  };
+  return { fetchProducts, createProduct, updateProduct, deleteProduct };
+};

package/dist/runtime/composables/useAdminStrategies.d.ts

@@ -0,0 +1,10 @@
+export declare const useAdminStrategies: () => {
+    fetchStrategies: () => Promise<any>;
+    fetchStrategyById: (id: string) => Promise<any>;
+    createStrategy: (strategy: any) => Promise<any>;
+    updateStrategy: (id: string, updates: any) => Promise<any>;
+    deleteStrategy: (id: string) => Promise<boolean>;
+    fetchStrategyContents: (strategyId: string) => Promise<any>;
+    fetchStrategyPersonas: (strategyId: string) => Promise<any>;
+    fetchCompleteStrategy: (strategyId: string) => Promise<any>;
+};

package/dist/runtime/composables/useAdminStrategies.js

@@ -0,0 +1,57 @@
+import { useSupabaseClient } from "#imports";
+export const useAdminStrategies = () => {
+  const supabase = useSupabaseClient();
+  const fetchStrategies = async () => {
+    const { data, error } = await supabase.from("strategies").select("*").order("created_at", { ascending: false });
+    if (error) throw error;
+    return data || [];
+  };
+  const fetchStrategyById = async (id) => {
+    const { data, error } = await supabase.from("strategies").select("*").eq("id", id).single();
+    if (error) throw error;
+    return data;
+  };
+  const createStrategy = async (strategy) => {
+    const { data, error } = await supabase.from("strategies").insert(strategy).select().single();
+    if (error) throw error;
+    return data;
+  };
+  const updateStrategy = async (id, updates) => {
+    const { data, error } = await supabase.from("strategies").update(updates).eq("id", id).select().single();
+    if (error) throw error;
+    return data;
+  };
+  const deleteStrategy = async (id) => {
+    const { error } = await supabase.from("strategies").delete().eq("id", id);
+    if (error) throw error;
+    return true;
+  };
+  const fetchStrategyContents = async (strategyId) => {
+    const { data, error } = await supabase.from("strategy_contents").select("*, content:generated_content(*)").eq("strategy_id", strategyId).order("position", { ascending: true });
+    if (error) throw error;
+    return data || [];
+  };
+  const fetchStrategyPersonas = async (strategyId) => {
+    const { data, error } = await supabase.from("strategy_personas").select("*, persona:personas(*)").eq("strategy_id", strategyId);
+    if (error) throw error;
+    return data || [];
+  };
+  const fetchCompleteStrategy = async (strategyId) => {
+    const [strategy, contents, personas] = await Promise.all([
+      fetchStrategyById(strategyId),
+      fetchStrategyContents(strategyId),
+      fetchStrategyPersonas(strategyId)
+    ]);
+    return { ...strategy, contents, personas };
+  };
+  return {
+    fetchStrategies,
+    fetchStrategyById,
+    createStrategy,
+    updateStrategy,
+    deleteStrategy,
+    fetchStrategyContents,
+    fetchStrategyPersonas,
+    fetchCompleteStrategy
+  };
+};

package/dist/runtime/composables/useAdminTodos.d.ts

@@ -0,0 +1,10 @@
+export declare const useAdminTodos: () => {
+    fetchTodos: () => Promise<any>;
+    getActiveTodos: () => Promise<any>;
+    getTodosByDateRange: (startDate: Date, endDate: Date) => Promise<any>;
+    createTodo: (todo: any) => Promise<any>;
+    updateTodo: (id: string, updates: any) => Promise<any>;
+    toggleTodo: (id: string) => Promise<any>;
+    deleteTodo: (id: string) => Promise<boolean>;
+    isOverdue: (todo: any) => boolean;
+};

package/dist/runtime/composables/useAdminTodos.js

@@ -0,0 +1,55 @@
+import { useSupabaseClient } from "#imports";
+export const useAdminTodos = () => {
+  const supabase = useSupabaseClient();
+  const fetchTodos = async () => {
+    const { data, error } = await supabase.from("todos").select("*").order("created_at", { ascending: false });
+    if (error) throw error;
+    return data || [];
+  };
+  const getActiveTodos = async () => {
+    const { data, error } = await supabase.from("todos").select("*").eq("completed", false).order("due_date", { ascending: true, nullsFirst: false });
+    if (error) throw error;
+    return data || [];
+  };
+  const getTodosByDateRange = async (startDate, endDate) => {
+    const { data, error } = await supabase.from("todos").select("*").gte("due_date", startDate.toISOString()).lte("due_date", endDate.toISOString()).order("due_date", { ascending: true });
+    if (error) throw error;
+    return data || [];
+  };
+  const createTodo = async (todo) => {
+    const { data, error } = await supabase.from("todos").insert(todo).select().single();
+    if (error) throw error;
+    return data;
+  };
+  const updateTodo = async (id, updates) => {
+    const { data, error } = await supabase.from("todos").update(updates).eq("id", id).select().single();
+    if (error) throw error;
+    return data;
+  };
+  const toggleTodo = async (id) => {
+    const { data: current, error: fetchErr } = await supabase.from("todos").select("completed").eq("id", id).single();
+    if (fetchErr) throw fetchErr;
+    const { data, error } = await supabase.from("todos").update({ completed: !current.completed }).eq("id", id).select().single();
+    if (error) throw error;
+    return data;
+  };
+  const deleteTodo = async (id) => {
+    const { error } = await supabase.from("todos").delete().eq("id", id);
+    if (error) throw error;
+    return true;
+  };
+  const isOverdue = (todo) => {
+    if (!todo.due_date || todo.completed) return false;
+    return new Date(todo.due_date) < /* @__PURE__ */ new Date();
+  };
+  return {
+    fetchTodos,
+    getActiveTodos,
+    getTodosByDateRange,
+    createTodo,
+    updateTodo,
+    toggleTodo,
+    deleteTodo,
+    isOverdue
+  };
+};

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

@@ -13,10 +13,10 @@ const truncatedId = computed(() => {
   return id ? `${id.substring(0, 6)}...${id.substring(id.length - 4)}` : "";
 });
 const createdAt = computed(
-  () => user.value?.created_at ? new Date(user.value.created_at).toLocaleDateString(void 0, { dateStyle: "medium" }) : "\u2014"
+  () => user.value?.created_at ? new Date(user.value.created_at).toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" }) : "\u2014"
 );
 const lastSignIn = computed(
-  () => user.value?.last_sign_in_at ? new Date(user.value.last_sign_in_at).toLocaleDateString(void 0, { dateStyle: "medium" }) : "\u2014"
+  () => user.value?.last_sign_in_at ? new Date(user.value.last_sign_in_at).toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" }) : "\u2014"
 );
 const currentPlan = ref("");
 const selectedPlan = ref("");
@@ -48,53 +48,59 @@ const updatePlan = async () => {
       updateSuccess.value = false;
     }, 3e3);
   } catch (e) {
-    updateError.value = e.message || "Error updating plan.";
+    updateError.value = e.message || "Erreur lors de la mise \xE0 jour du plan.";
   } finally {
     isUpdating.value = false;
   }
 };
-useHead({ title: "Account \u2014 Admin" });
+useHead({ title: "Mon Compte \u2014 Admin" });
 </script>
 
 <template>
-  <div data-admin-cms>
-    <AdminNavbar />
-    <div class="max-w-3xl mx-auto p-6 space-y-6">
+  <AdminDashboardLayout>
+    <div class="p-8 max-w-4xl mx-auto space-y-6">
+
+      <!-- Header -->
+      <div class="mb-2">
+        <h1 class="text-2xl font-black text-gray-900">Mon compte</h1>
+        <p class="text-sm text-gray-400 mt-1">Informations de votre profil et gestion du plan.</p>
+      </div>
 
       <!-- Profile card -->
-      <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
-        <div class="bg-black px-6 py-5">
-          <h1 class="text-xl font-bold text-white">Profile</h1>
+      <div class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
+        <div class="px-7 py-5 border-b border-gray-100">
+          <h2 class="text-sm font-black text-gray-900 uppercase tracking-widest text-[11px] text-gray-400">Profil</h2>
         </div>
-        <div class="p-6">
-          <div v-if="!user" class="text-center py-8 text-gray-400">Not logged in.</div>
+        <div class="p-7">
+          <div v-if="!user" class="py-10 text-center text-gray-400 text-sm">Non connecté.</div>
           <div v-else class="space-y-6">
-            <div class="flex items-center gap-4 pb-4 border-b border-gray-100">
-              <div class="w-14 h-14 rounded-full bg-black flex items-center justify-center text-white font-bold text-lg">
+            <div class="flex items-center gap-4 pb-5 border-b border-gray-100">
+              <div class="w-14 h-14 rounded-2xl bg-[#0d0d0d] flex items-center justify-center text-white font-black text-lg shrink-0">
                 {{ userInitials }}
               </div>
               <div>
-                <p class="font-semibold text-gray-800">{{ user.email }}</p>
-                <p class="text-xs text-gray-400">ID: {{ truncatedId }}</p>
+                <p class="font-bold text-gray-900">{{ user.email }}</p>
+                <p class="text-[11px] text-gray-400 font-mono mt-0.5">{{ truncatedId }}</p>
               </div>
             </div>
             <div class="grid sm:grid-cols-2 gap-4">
-              <div class="bg-gray-50 p-4 rounded-lg">
-                <p class="text-xs text-gray-500 mb-1">Account created</p>
-                <p class="font-medium text-gray-800">{{ createdAt }}</p>
+              <div class="bg-gray-50 rounded-xl p-4">
+                <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1.5">Compte créé le</p>
+                <p class="text-sm font-semibold text-gray-800">{{ createdAt }}</p>
               </div>
-              <div class="bg-gray-50 p-4 rounded-lg">
-                <p class="text-xs text-gray-500 mb-1">Last sign in</p>
-                <p class="font-medium text-gray-800">{{ lastSignIn }}</p>
+              <div class="bg-gray-50 rounded-xl p-4">
+                <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1.5">Dernière connexion</p>
+                <p class="text-sm font-semibold text-gray-800">{{ lastSignIn }}</p>
               </div>
-              <div class="bg-gray-50 p-4 rounded-lg">
-                <p class="text-xs text-gray-500 mb-1">Auth method</p>
-                <p class="font-medium text-gray-800 capitalize">{{ user.app_metadata?.provider || "email" }}</p>
+              <div class="bg-gray-50 rounded-xl p-4">
+                <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1.5">Méthode d'auth</p>
+                <p class="text-sm font-semibold text-gray-800 capitalize">{{ user.app_metadata?.provider || "email" }}</p>
               </div>
-              <div class="bg-gray-50 p-4 rounded-lg">
-                <p class="text-xs text-gray-500 mb-1">Email verified</p>
-                <p :class="['font-medium', user.email_confirmed_at ? 'text-green-600' : 'text-amber-600']">
-                  {{ user.email_confirmed_at ? "\u2713 Verified" : "\u26A0 Not verified" }}
+              <div class="bg-gray-50 rounded-xl p-4">
+                <p class="text-[10px] font-black uppercase tracking-widest text-gray-400 mb-1.5">Email vérifié</p>
+                <p :class="['text-sm font-semibold flex items-center gap-1.5', user.email_confirmed_at ? 'text-green-600' : 'text-amber-500']">
+                  <span :class="['w-1.5 h-1.5 rounded-full', user.email_confirmed_at ? 'bg-green-500' : 'bg-amber-400']"></span>
+                  {{ user.email_confirmed_at ? "V\xE9rifi\xE9" : "Non v\xE9rifi\xE9" }}
                 </p>
               </div>
             </div>
@@ -102,18 +108,19 @@ useHead({ title: "Account \u2014 Admin" });
         </div>
       </div>
 
-      <!-- Plan management (only shown if plans are configured) -->
-      <div v-if="user && plans.length" class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
-        <div class="bg-gradient-to-r from-blue-600 to-violet-600 px-6 py-5">
-          <h2 class="text-xl font-bold text-white">Plan</h2>
+      <!-- Plan management (only if plans are configured) -->
+      <div v-if="user && plans.length" class="bg-white rounded-2xl border border-gray-100 shadow-sm overflow-hidden">
+        <div class="px-7 py-5 border-b border-gray-100">
+          <h2 class="text-[11px] font-black uppercase tracking-widest text-gray-400">Gestion du plan</h2>
         </div>
-        <div class="p-6">
+        <div class="p-7">
           <!-- Feedback -->
-          <div v-if="updateError" class="mb-4 p-3 bg-red-50 border border-red-100 text-red-700 rounded-lg text-sm">
+          <div v-if="updateError" class="mb-5 p-3.5 bg-red-50 border border-red-100 text-red-600 rounded-xl text-sm font-semibold">
             {{ updateError }}
           </div>
-          <div v-if="updateSuccess" class="mb-4 p-3 bg-green-50 border border-green-100 text-green-700 rounded-lg text-sm">
-            Plan updated successfully.
+          <div v-if="updateSuccess" class="mb-5 p-3.5 bg-green-50 border border-green-100 text-green-600 rounded-xl text-sm font-semibold flex items-center gap-2">
+            <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
+            Plan mis à jour avec succès.
           </div>
 
           <!-- Plan cards -->
@@ -123,33 +130,34 @@ useHead({ title: "Account \u2014 Admin" });
               :key="plan.value"
               @click="selectedPlan = plan.value"
               :class="[
-  'relative border-2 rounded-xl p-5 cursor-pointer transition-all',
-  selectedPlan === plan.value ? 'border-blue-500 bg-blue-50' : currentPlan === plan.value ? 'border-green-500 bg-green-50' : 'border-gray-200 hover:border-blue-300'
+  'relative border-2 rounded-2xl p-5 cursor-pointer transition-all',
+  selectedPlan === plan.value ? 'border-[#3d35ff] bg-[#3d35ff]/5' : currentPlan === plan.value ? 'border-green-500 bg-green-50' : 'border-gray-100 hover:border-[#3d35ff]/30 hover:shadow-md'
 ]"
             >
-              <div v-if="currentPlan === plan.value" class="absolute -top-2 -right-2 bg-green-500 text-white text-[9px] font-black px-2 py-0.5 rounded-full uppercase">Current</div>
-              <div v-else-if="plan.popular" class="absolute -top-2 -right-2 bg-orange-500 text-white text-[9px] font-black px-2 py-0.5 rounded-full uppercase">Popular</div>
-              <h3 class="font-bold text-gray-900 mb-1">{{ plan.title }}</h3>
-              <p v-if="plan.subtitle" class="text-xs text-gray-500 mb-3">{{ plan.subtitle }}</p>
-              <p class="text-xl font-bold text-gray-900 mb-3">{{ plan.price }}</p>
-              <ul class="space-y-1">
-                <li v-for="feature in plan.features" :key="feature" class="text-xs text-gray-600 flex items-start gap-1.5">
-                  <span class="text-green-500 mt-0.5">✓</span> {{ feature }}
+              <div v-if="currentPlan === plan.value" class="absolute -top-2 -right-2 bg-green-500 text-white text-[9px] font-black px-2 py-0.5 rounded-full uppercase">Actuel</div>
+              <div v-else-if="plan.popular" class="absolute -top-2 -right-2 bg-[#3d35ff] text-white text-[9px] font-black px-2 py-0.5 rounded-full uppercase">Populaire</div>
+              <h3 class="font-black text-gray-900 mb-1">{{ plan.title }}</h3>
+              <p v-if="plan.subtitle" class="text-[11px] text-gray-400 mb-3">{{ plan.subtitle }}</p>
+              <p class="text-xl font-black text-gray-900 mb-4">{{ plan.price }}</p>
+              <ul class="space-y-1.5">
+                <li v-for="feature in plan.features" :key="feature" class="text-[11px] text-gray-600 flex items-start gap-1.5">
+                  <svg class="w-3 h-3 text-green-500 mt-0.5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M5 13l4 4L19 7"/></svg>
+                  {{ feature }}
                 </li>
               </ul>
             </div>
           </div>
 
           <!-- Update button -->
-          <div v-if="selectedPlan && selectedPlan !== currentPlan" class="mt-6 text-center">
+          <div v-if="selectedPlan && selectedPlan !== currentPlan" class="mt-6">
             <button @click="updatePlan" :disabled="isUpdating"
-              class="bg-blue-600 text-white px-8 py-3 rounded-lg font-medium hover:bg-blue-700 transition disabled:opacity-50">
-              {{ isUpdating ? "Updating..." : `Switch to ${plans.find((p) => p.value === selectedPlan)?.title}` }}
+              class="px-6 py-2.5 bg-[#3d35ff] text-white rounded-xl text-sm font-bold hover:bg-[#2f28cc] transition disabled:opacity-50 shadow-lg shadow-[#3d35ff]/20">
+              {{ isUpdating ? "Mise \xE0 jour..." : `Changer pour ${plans.find((p) => p.value === selectedPlan)?.title}` }}
             </button>
           </div>
         </div>
       </div>
 
     </div>
-  </div>
+  </AdminDashboardLayout>
 </template>

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

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