cinqcinqdev-seo 0.1.5 → 0.1.6

package/dist/runtime/pages/admin/editor/[id].vue

@@ -0,0 +1,521 @@
+<script setup>
+import { useAdminSections } from "../../../composables/useAdminSections";
+definePageMeta({ layout: false });
+const route = useRoute();
+const supabase = useSupabaseClient();
+const config = useRuntimeConfig().public.adminCms;
+const table = config?.tables?.pages || "pages";
+const bucket = config?.storageBucket || "site";
+const pageId = route.params.id;
+const CMS_COMPONENTS = useAdminSections();
+const { data: page } = await useAsyncData(`admin-edit-${pageId}`, async () => {
+  const { data } = await supabase.from(table).select("*").eq("id", pageId).single();
+  return data;
+});
+useHead({ title: computed(() => page.value?.title ? `${page.value.title} \u2014 Editor` : "Editor") });
+const isLeftOpen = ref(true);
+const isRightOpen = ref(true);
+const viewMode = ref("structure");
+const selectedBlockIndex = ref(null);
+const selectedFieldGroup = ref("design");
+const isSaving = ref(false);
+const isUploading = ref(false);
+const showAddModal = ref(false);
+const editingLabelIndex = ref(null);
+const editingLang = ref("fr");
+const LANGS = ["fr", "ar", "en"];
+const i18n0 = (fr = "") => ({ fr, ar: "", en: "" });
+const resolveI18nForPreview = (val) => {
+  if (!val || typeof val !== "object" || Array.isArray(val)) return val ?? "";
+  if ("fr" in val || "en" in val || "ar" in val) {
+    return val[editingLang.value] || val.fr || Object.values(val).find((v) => v) || "";
+  }
+  return val;
+};
+const resolvePropsForPreview = (props) => {
+  if (!props) return {};
+  return Object.fromEntries(
+    Object.entries(props).map(([k, v]) => {
+      if (Array.isArray(v)) return [k, v.map(
+        (item) => typeof item === "object" && item ? resolvePropsForPreview(item) : item
+      )];
+      return [k, resolveI18nForPreview(v)];
+    })
+  );
+};
+const getI18nVal = (val, lang) => {
+  if (!val) return "";
+  if (typeof val === "string") return lang === "fr" ? val : "";
+  return val[lang] || "";
+};
+const setI18nVal = (obj, key, lang, value) => {
+  const current = obj[key];
+  const out = { fr: "", ar: "", en: "" };
+  if (typeof current === "string") out.fr = current;
+  else if (current && typeof current === "object") Object.assign(out, current);
+  out[lang] = value;
+  obj[key] = out;
+};
+const getBlockI18n = (fieldName, lang) => {
+  const val = page.value?.content[selectedBlockIndex.value]?.props[fieldName];
+  if (!val) return "";
+  if (typeof val === "string") return lang === "fr" ? val : "";
+  return val[lang] || "";
+};
+const setBlockI18n = (fieldName, lang, value) => {
+  const props = page.value?.content[selectedBlockIndex.value]?.props;
+  if (!props) return;
+  const current = props[fieldName];
+  const out = { fr: "", ar: "", en: "" };
+  if (typeof current === "string") out.fr = current;
+  else if (current && typeof current === "object") Object.assign(out, current);
+  out[lang] = value;
+  props[fieldName] = out;
+};
+const selectedCMSConfig = computed(
+  () => selectedBlockIndex.value !== null ? CMS_COMPONENTS[page.value?.content[selectedBlockIndex.value]?.type] : null
+);
+const visibleFields = computed(() => {
+  const config2 = selectedCMSConfig.value;
+  if (!config2?.fields) return {};
+  if (!config2.groups) return config2.fields;
+  return Object.fromEntries(
+    Object.entries(config2.fields).filter(([, f]) => f.group === selectedFieldGroup.value)
+  );
+});
+watch(selectedBlockIndex, () => {
+  selectedFieldGroup.value = selectedCMSConfig.value?.groups?.[0]?.key ?? "design";
+});
+const moveBlock = (index, dir) => {
+  const newIdx = dir === "up" ? index - 1 : index + 1;
+  if (newIdx < 0 || newIdx >= page.value.content.length) return;
+  const content = [...page.value.content];
+  const item = content.splice(index, 1)[0];
+  content.splice(newIdx, 0, item);
+  page.value.content = content;
+  selectedBlockIndex.value = newIdx;
+};
+const removeBlock = (index) => {
+  if (!confirm("Delete this section?")) return;
+  page.value.content.splice(index, 1);
+  selectedBlockIndex.value = null;
+};
+const addSection = (type) => {
+  const conf = CMS_COMPONENTS[type];
+  page.value.content.push({ type, props: JSON.parse(JSON.stringify(conf.defaultProps)) });
+  showAddModal.value = false;
+  selectedBlockIndex.value = page.value.content.length - 1;
+};
+const fileInput = ref(null);
+let activeUploadTarget = null;
+const triggerUpload = (targetObj, key) => {
+  activeUploadTarget = { obj: targetObj, key };
+  fileInput.value?.click();
+};
+const handleFileUpload = async (event) => {
+  const file = event.target.files?.[0];
+  if (!file || !activeUploadTarget) return;
+  isUploading.value = true;
+  try {
+    const ext = file.name.split(".").pop();
+    const path = `uploads/${Date.now()}-${Math.random().toString(36).substring(7)}.${ext}`;
+    const { error: uploadError } = await supabase.storage.from(bucket).upload(path, file);
+    if (uploadError) throw uploadError;
+    const { data } = supabase.storage.from(bucket).getPublicUrl(path);
+    activeUploadTarget.obj[activeUploadTarget.key] = data.publicUrl;
+  } catch (err) {
+    console.error(err);
+    alert(`Upload error. Make sure the "${bucket}" bucket exists in Supabase.`);
+  } finally {
+    isUploading.value = false;
+    activeUploadTarget = null;
+    if (fileInput.value) fileInput.value.value = "";
+  }
+};
+const tagOptions = [
+  { value: "h1", label: "H1" },
+  { value: "h2", label: "H2" },
+  { value: "h3", label: "H3" },
+  { value: "h4", label: "H4" },
+  { value: "div", label: "DIV" }
+];
+const pageTypeOptions = computed(
+  () => config?.pageTypes?.map((t) => ({ value: t.id, label: t.label })) || []
+);
+const typeUrlPrefixes = {
+  service_page: "/service/",
+  landing_page: "/",
+  page: "/"
+};
+const pageViewUrl = computed(() => {
+  const prefix = typeUrlPrefixes[page.value?.type] ?? "/";
+  return `${prefix}${page.value?.slug ?? ""}`;
+});
+const getSeoI18n = (field, lang) => {
+  const val = page.value?.seo_config?.[field];
+  if (!val) return "";
+  if (typeof val === "string") return lang === "fr" ? val : "";
+  return val[lang] || "";
+};
+const setSeoI18n = (field, lang, value) => {
+  if (!page.value) return;
+  if (!page.value.seo_config) page.value.seo_config = {};
+  const current = page.value.seo_config[field];
+  const out = { fr: "", ar: "", en: "" };
+  if (typeof current === "string") out.fr = current;
+  else if (current && typeof current === "object") Object.assign(out, current);
+  out[lang] = value;
+  page.value.seo_config[field] = out;
+};
+const tagDepth = (tag) => Math.max(0, parseInt(tag.replace("h", "")) - 1) || 0;
+const tagColor = (tag) => ({ h1: "#3d35ff", h2: "#6b63ff", h3: "#aaa", h4: "#ccc" })[tag] ?? "#ddd";
+const seoTree = computed(() => {
+  if (!page.value?.content) return [];
+  const tree = [];
+  page.value.content.forEach((block, bIdx) => {
+    const titleText = resolveI18nForPreview(block.props.title);
+    if (block.props.titleTag && titleText) tree.push({ tag: block.props.titleTag, text: titleText, blockIndex: bIdx });
+    if (block.props.items) {
+      block.props.items.forEach((item) => {
+        const text = resolveI18nForPreview(item.title || item.question || item.name);
+        const tag = item.titleTag || block.props.itemTag;
+        if (text && tag) tree.push({ tag, text, blockIndex: bIdx });
+      });
+    }
+  });
+  return tree;
+});
+const togglePublished = async () => {
+  page.value.status = page.value.status === "published" ? "draft" : "published";
+  await supabase.from(table).update({ status: page.value.status }).eq("id", pageId);
+};
+const savePage = async () => {
+  isSaving.value = true;
+  const { error } = await supabase.from(table).update({
+    content: page.value.content,
+    seo_config: page.value.seo_config,
+    slug: page.value.slug,
+    title: page.value.title,
+    status: page.value.status,
+    type: page.value.type
+  }).eq("id", pageId);
+  isSaving.value = false;
+  if (error) alert("Save error: " + error.message);
+};
+</script>
+
+<template>
+  <div v-if="page" data-admin-cms class="h-screen flex flex-col bg-[#EBEBEF] overflow-hidden font-sans">
+    <input type="file" ref="fileInput" class="hidden" accept="image/*" @change="handleFileUpload" />
+
+    <!-- Top bar -->
+    <header class="h-12 bg-white/80 backdrop-blur-md border-b px-6 flex items-center justify-between z-[60] shrink-0">
+      <div class="flex items-center gap-4">
+        <NuxtLink to="/admin" class="text-gray-400 hover:text-black transition-colors text-lg">←</NuxtLink>
+        <div class="flex gap-1 bg-gray-100 p-1 rounded-md">
+          <button @click="isLeftOpen = !isLeftOpen" :class="['p-1.5 rounded transition-all', isLeftOpen ? 'bg-white shadow-sm text-blue-600' : 'text-gray-400']" title="Structure">
+            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6h16M4 12h10M4 18h16"/></svg>
+          </button>
+          <button @click="isRightOpen = !isRightOpen" :class="['p-1.5 rounded transition-all', isRightOpen ? 'bg-white shadow-sm text-blue-600' : 'text-gray-400']" title="Properties">
+            <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 6h8M12 12h8M12 18h8M4 6h.01M4 12h.01M4 18h.01"/></svg>
+          </button>
+        </div>
+      </div>
+
+      <div class="flex items-center gap-3">
+        <div class="flex bg-gray-100 p-1 rounded-full">
+          <button @click="viewMode = 'structure'" :class="['px-3 py-1 rounded-full text-[8px] font-black uppercase', viewMode === 'structure' ? 'bg-white text-black' : 'text-gray-400']">Structure</button>
+          <button @click="viewMode = 'seo'" :class="['px-3 py-1 rounded-full text-[8px] font-black uppercase', viewMode === 'seo' ? 'bg-white text-black' : 'text-gray-400']">SEO Audit</button>
+        </div>
+        <NuxtLink v-if="page?.slug" :to="pageViewUrl" target="_blank" class="flex items-center gap-1.5 px-4 py-2 rounded-full text-[9px] font-black uppercase border border-gray-200 text-gray-500 hover:border-blue-500 hover:text-blue-500 transition-all">
+          <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
+          View
+        </NuxtLink>
+        <button @click="togglePublished" :class="[
+  'flex items-center gap-1.5 px-4 py-2 rounded-full text-[9px] font-black uppercase border transition-all',
+  page?.status === 'published' ? 'bg-green-50 border-green-200 text-green-600' : 'bg-gray-50 border-gray-200 text-gray-400'
+]">
+          <span :class="['w-1.5 h-1.5 rounded-full', page?.status === 'published' ? 'bg-green-500' : 'bg-gray-300']"></span>
+          {{ page?.status === "published" ? "Published" : "Draft" }}
+        </button>
+        <button @click="savePage" class="bg-blue-600 text-white px-5 py-2 rounded-full text-[9px] font-black uppercase shadow-lg active:scale-95 transition-all">
+          {{ isSaving ? "Saving..." : "Save" }}
+        </button>
+      </div>
+    </header>
+
+    <div class="flex flex-1 overflow-hidden relative">
+
+      <!-- Left sidebar: structure / SEO tree -->
+      <aside :class="['bg-white border-r z-50 transition-all duration-300 overflow-hidden flex flex-col', isLeftOpen ? 'w-64' : 'w-0']">
+        <div class="p-6 w-64 h-full flex flex-col">
+          <div v-if="viewMode === 'structure'" class="flex-1 space-y-2 overflow-y-auto">
+            <h3 class="text-[9px] font-black text-gray-300 uppercase mb-4 tracking-widest">Sections</h3>
+            <div v-for="(block, index) in page.content" :key="index" @click="selectedBlockIndex = index"
+              :class="[
+  'p-3 rounded-xl border-2 transition-all cursor-pointer group flex items-center justify-between gap-2',
+  selectedBlockIndex === index ? 'border-blue-500 bg-blue-50/50 text-blue-600' : 'border-gray-100 bg-gray-50 text-gray-500'
+]">
+              <input v-if="editingLabelIndex === index"
+                :value="block.label || ''"
+                @input="block.label = $event.target.value"
+                @blur="editingLabelIndex = null"
+                @keydown.enter="editingLabelIndex = null"
+                @click.stop
+                class="flex-1 min-w-0 text-[9px] font-black uppercase bg-transparent outline-none border-b border-current"
+                :placeholder="block.type" autofocus
+              />
+              <span v-else class="flex-1 min-w-0 text-[9px] font-black uppercase truncate" @dblclick.stop="editingLabelIndex = index">
+                {{ block.label || block.type }}
+              </span>
+              <div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0 text-xs">
+                <button @click.stop="editingLabelIndex = index" title="Rename">✎</button>
+                <button @click.stop="moveBlock(index, 'up')">↑</button>
+                <button @click.stop="moveBlock(index, 'down')">↓</button>
+                <button @click.stop="removeBlock(index)" class="text-red-400">✕</button>
+              </div>
+            </div>
+            <button @click="showAddModal = true" class="w-full py-3 border-2 border-dashed border-gray-100 rounded-xl text-[9px] font-black text-gray-400 hover:border-blue-500 hover:text-blue-500 transition-all">
+              + ADD SECTION
+            </button>
+          </div>
+
+          <div v-else class="flex-1 overflow-y-auto">
+            <h3 class="text-[9px] font-black text-blue-600 uppercase mb-6 tracking-widest">Heading Hierarchy</h3>
+            <div v-for="(node, nIdx) in seoTree" :key="nIdx"
+              class="mb-2 p-2 rounded border-l-2 bg-gray-50/50 cursor-pointer hover:bg-blue-50/50"
+              :style="{ marginLeft: `${tagDepth(node.tag) * 14}px`, borderColor: tagColor(node.tag) }"
+              @click="selectedBlockIndex = node.blockIndex">
+              <span class="text-[7px] font-black uppercase block" :style="{ color: tagColor(node.tag) }">{{ node.tag }}</span>
+              <span class="text-[10px] font-bold truncate block">{{ node.text }}</span>
+            </div>
+          </div>
+        </div>
+      </aside>
+
+      <!-- Preview: data-admin-preview opts this area out of the admin font
+           so section components inherit the host project's own font stack -->
+      <main data-admin-preview class="flex-1 overflow-y-auto p-4 md:p-10 bg-[#F5F5F7]">
+        <div class="max-w-4xl mx-auto bg-white shadow-2xl rounded-[32px] overflow-hidden min-h-screen border border-black/5">
+          <div v-for="(block, index) in page.content" :key="index" @click="selectedBlockIndex = index"
+            class="relative cursor-pointer" :class="{ 'ring-4 ring-blue-500 ring-inset z-10': selectedBlockIndex === index }">
+            <component :is="resolveComponent(`Sections${block.type}`)" v-bind="resolvePropsForPreview(block.props)" />
+          </div>
+          <div v-if="!page.content.length" class="p-20 text-center text-gray-300 italic text-sm">
+            Empty page — add a section to get started.
+          </div>
+        </div>
+      </main>
+
+      <!-- Right sidebar: field editor + SEO -->
+      <aside :class="['bg-white border-l z-50 transition-all duration-300 overflow-hidden flex flex-col', isRightOpen ? 'w-80' : 'w-0']">
+        <div class="p-6 w-80 h-full overflow-y-auto flex flex-col gap-6">
+
+          <!-- Block field editor -->
+          <div v-if="selectedBlockIndex !== null && selectedCMSConfig">
+            <div class="flex items-center justify-between mb-4">
+              <h2 class="text-[10px] font-black uppercase text-gray-400 tracking-widest">
+                {{ selectedCMSConfig.label }}
+              </h2>
+              <!-- Lang switcher -->
+              <div class="flex gap-1">
+                <button v-for="lang in LANGS" :key="lang" @click="editingLang = lang"
+                  :class="['text-[8px] font-black px-2 py-1 rounded transition-all', editingLang === lang ? 'bg-black text-white' : 'text-gray-400 hover:text-black']">
+                  {{ lang === "ar" ? "\u0639" : lang.toUpperCase() }}
+                </button>
+              </div>
+            </div>
+
+            <!-- Group tabs -->
+            <div v-if="selectedCMSConfig.groups" class="flex gap-1 mb-6 flex-wrap">
+              <button v-for="group in selectedCMSConfig.groups" :key="group.key" @click="selectedFieldGroup = group.key"
+                :class="[
+  'px-3 py-1.5 rounded-full text-[8px] font-black uppercase tracking-widest transition-all',
+  selectedFieldGroup === group.key ? 'bg-black text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
+]">
+                {{ group.label }}
+              </button>
+            </div>
+
+            <!-- Fields -->
+            <div v-for="(field, name) in visibleFields" :key="String(name)" class="mb-5">
+              <label class="text-[8px] font-black uppercase text-gray-400 block mb-2">{{ field.label }}</label>
+
+              <!-- i18n text -->
+              <template v-if="field.i18n">
+                <input v-if="field.type === 'text'"
+                  :value="getBlockI18n(String(name), editingLang)"
+                  @input="setBlockI18n(String(name), editingLang, $event.target.value)"
+                  class="w-full border-b py-2 text-xs font-bold outline-none focus:border-black transition-colors"
+                />
+                <textarea v-else-if="field.type === 'textarea'"
+                  :value="getBlockI18n(String(name), editingLang)"
+                  @input="setBlockI18n(String(name), editingLang, $event.target.value)"
+                  class="w-full bg-gray-50 p-3 text-xs rounded-xl outline-none focus:ring-1 focus:ring-black resize-none" rows="3"
+                />
+              </template>
+
+              <!-- Plain text -->
+              <input v-else-if="field.type === 'text'"
+                v-model="page.content[selectedBlockIndex].props[String(name)]"
+                class="w-full border-b py-2 text-xs font-bold outline-none focus:border-black transition-colors"
+              />
+
+              <!-- Textarea -->
+              <textarea v-else-if="field.type === 'textarea'"
+                v-model="page.content[selectedBlockIndex].props[String(name)]"
+                class="w-full bg-gray-50 p-3 text-xs rounded-xl outline-none focus:ring-1 focus:ring-black resize-none" rows="3"
+              />
+
+              <!-- Color -->
+              <div v-else-if="field.type === 'color'" class="space-y-2">
+                <input v-model="page.content[selectedBlockIndex].props[String(name)]" type="color" class="h-8 w-16 rounded cursor-pointer border border-gray-200" />
+                <input v-model="page.content[selectedBlockIndex].props[String(name)]" class="w-full bg-gray-50 p-2 text-[9px] font-mono rounded-lg outline-none" placeholder="#ffffff" />
+              </div>
+
+              <!-- Image -->
+              <div v-else-if="field.type === 'image'"
+                @click="triggerUpload(page.content[selectedBlockIndex].props, String(name))"
+                class="relative h-24 border-2 border-dashed rounded-xl flex items-center justify-center overflow-hidden cursor-pointer hover:border-blue-400 transition-colors">
+                <img v-if="page.content[selectedBlockIndex].props[String(name)]" :src="page.content[selectedBlockIndex].props[String(name)]" class="w-full h-full object-cover" />
+                <div v-else class="text-center">
+                  <div class="text-[8px] font-black text-gray-300 uppercase">Click to upload</div>
+                  <div v-if="isUploading" class="text-[8px] text-blue-500 mt-1">Uploading...</div>
+                </div>
+              </div>
+
+              <!-- Boolean select -->
+              <select v-else-if="field.type === 'boolean' || field.type === 'select' && field.options?.length"
+                v-model="page.content[selectedBlockIndex].props[String(name)]"
+                class="w-full bg-gray-50 p-2 text-xs rounded-lg outline-none focus:ring-1 focus:ring-black">
+                <option v-for="opt in field.options" :key="String(opt.value)" :value="opt.value">{{ opt.label }}</option>
+              </select>
+
+              <!-- Cards (button group) -->
+              <div v-else-if="field.type === 'cards'" class="flex flex-wrap gap-1">
+                <button v-for="opt in field.options" :key="String(opt.value)"
+                  @click="page.content[selectedBlockIndex].props[String(name)] = opt.value"
+                  :class="[
+  'flex flex-col items-center gap-1 p-2 rounded-lg border-2 transition-all text-[7px] font-black uppercase',
+  page.content[selectedBlockIndex].props[String(name)] === opt.value ? 'border-black bg-black text-white' : 'border-gray-100 hover:border-gray-300'
+]">
+                  <span class="text-xs">{{ opt.icon }}</span>
+                  <span>{{ opt.label }}</span>
+                </button>
+              </div>
+
+              <!-- List of items -->
+              <div v-else-if="field.type === 'list'" class="space-y-3">
+                <div v-for="(item, itemIdx) in page.content[selectedBlockIndex].props[String(name)]" :key="itemIdx"
+                  class="border border-gray-100 rounded-xl p-3 space-y-2">
+                  <div class="flex justify-between items-center mb-2">
+                    <span class="text-[7px] font-black uppercase text-gray-400">Item {{ itemIdx + 1 }}</span>
+                    <button @click="page.content[selectedBlockIndex].props[String(name)].splice(itemIdx, 1)" class="text-red-400 text-xs">✕</button>
+                  </div>
+                  <template v-for="(subField, subKey) in field.itemFields" :key="String(subKey)">
+                    <label class="text-[7px] font-black uppercase text-gray-400 block">{{ subField.label }}</label>
+                    <template v-if="subField.i18n">
+                      <input v-if="subField.type === 'text'"
+                        :value="getI18nVal(item[String(subKey)], editingLang)"
+                        @input="setI18nVal(item, String(subKey), editingLang, $event.target.value)"
+                        class="w-full border-b py-1 text-xs outline-none focus:border-black"
+                      />
+                      <textarea v-else-if="subField.type === 'textarea'"
+                        :value="getI18nVal(item[String(subKey)], editingLang)"
+                        @input="setI18nVal(item, String(subKey), editingLang, $event.target.value)"
+                        class="w-full bg-gray-50 p-2 text-xs rounded-lg outline-none resize-none" rows="2"
+                      />
+                    </template>
+                    <input v-else-if="subField.type === 'text'" v-model="item[String(subKey)]" class="w-full border-b py-1 text-xs outline-none focus:border-black" />
+                    <textarea v-else-if="subField.type === 'textarea'" v-model="item[String(subKey)]" class="w-full bg-gray-50 p-2 text-xs rounded-lg outline-none resize-none" rows="2" />
+                    <div v-else-if="subField.type === 'image'"
+                      @click="triggerUpload(item, String(subKey))"
+                      class="h-16 border-2 border-dashed rounded-lg flex items-center justify-center overflow-hidden cursor-pointer hover:border-blue-400 transition-colors">
+                      <img v-if="item[String(subKey)]" :src="item[String(subKey)]" class="w-full h-full object-cover" />
+                      <span v-else class="text-[7px] font-black text-gray-300 uppercase">Upload</span>
+                    </div>
+                  </template>
+                </div>
+                <button
+                  @click="page.content[selectedBlockIndex].props[String(name)].push(
+  Object.fromEntries(Object.keys(field.itemFields || {}).map((k) => [k, field.itemFields?.[k]?.i18n ? { fr: '', ar: '', en: '' } : '']))
+)"
+                  class="w-full py-2 border-2 border-dashed border-gray-100 rounded-xl text-[8px] font-black text-gray-400 hover:border-blue-500 transition-all">
+                  + Add item
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- SEO panel -->
+          <div class="border-t pt-6">
+            <h2 class="text-[10px] font-black uppercase text-gray-400 tracking-widest mb-4">SEO</h2>
+            <div class="space-y-4">
+              <!-- Page meta -->
+              <div>
+                <label class="text-[8px] font-black uppercase text-gray-400 block mb-1">Page Title</label>
+                <input v-model="page.title" class="w-full border-b py-2 text-xs font-bold outline-none focus:border-black" />
+              </div>
+              <div>
+                <label class="text-[8px] font-black uppercase text-gray-400 block mb-1">Slug</label>
+                <input v-model="page.slug" class="w-full border-b py-2 text-xs font-mono outline-none focus:border-black" />
+              </div>
+              <div>
+                <label class="text-[8px] font-black uppercase text-gray-400 block mb-1">Page Type</label>
+                <select v-model="page.type" class="w-full bg-gray-50 p-2 text-xs rounded-lg outline-none">
+                  <option v-for="opt in pageTypeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
+                </select>
+              </div>
+
+              <!-- i18n SEO fields -->
+              <div class="flex gap-1 mt-4 mb-2">
+                <button v-for="lang in LANGS" :key="lang" @click="editingLang = lang"
+                  :class="['text-[8px] font-black px-2 py-1 rounded transition-all', editingLang === lang ? 'bg-black text-white' : 'text-gray-400 hover:text-black']">
+                  {{ lang === "ar" ? "\u0639" : lang.toUpperCase() }}
+                </button>
+              </div>
+              <div>
+                <label class="text-[8px] font-black uppercase text-gray-400 block mb-1">Meta Title</label>
+                <input
+                  :value="getSeoI18n('meta_title', editingLang)"
+                  @input="setSeoI18n('meta_title', editingLang, $event.target.value)"
+                  class="w-full border-b py-2 text-xs outline-none focus:border-black"
+                />
+              </div>
+              <div>
+                <label class="text-[8px] font-black uppercase text-gray-400 block mb-1">Meta Description</label>
+                <textarea
+                  :value="getSeoI18n('meta_description', editingLang)"
+                  @input="setSeoI18n('meta_description', editingLang, $event.target.value)"
+                  class="w-full bg-gray-50 p-2 text-xs rounded-lg outline-none resize-none" rows="3"
+                />
+              </div>
+              <div>
+                <label class="text-[8px] font-black uppercase text-gray-400 block mb-1">OG Image URL</label>
+                <input v-model="page.seo_config.og_image" class="w-full border-b py-2 text-xs font-mono outline-none focus:border-black" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </aside>
+    </div>
+
+    <!-- Add section modal -->
+    <div v-if="showAddModal" class="fixed inset-0 bg-black/90 backdrop-blur-xl z-[100] flex items-center justify-center p-6" @click.self="showAddModal = false">
+      <div class="bg-white max-w-xl w-full rounded-[32px] p-10 shadow-2xl">
+        <h3 class="text-[10px] font-black uppercase tracking-widest mb-6 text-gray-400">Add Section</h3>
+        <div class="grid grid-cols-3 gap-4">
+          <button v-for="(conf, type) in CMS_COMPONENTS" :key="String(type)" @click="addSection(String(type))"
+            class="flex flex-col items-center gap-2 p-5 border-2 border-gray-100 rounded-[24px] hover:border-black transition-all group">
+            <span class="text-2xl">{{ conf.icon || "\u{1F4E6}" }}</span>
+            <span class="text-[7px] font-black uppercase tracking-widest text-gray-600 group-hover:text-black text-center">{{ conf.label }}</span>
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div v-else class="h-screen flex items-center justify-center text-gray-400">
+    Loading...
+  </div>
+</template>

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

@@ -0,0 +1,40 @@
+<script setup>
+const config = useRuntimeConfig().public.adminCms;
+const supabase = useSupabaseClient();
+const pageTypes = config?.pageTypes || [];
+const { data: pageStats } = await useAsyncData("admin-page-stats", async () => {
+  const { data } = await supabase.from("pages").select("type");
+  return data?.reduce((acc, curr) => {
+    acc[curr.type] = (acc[curr.type] || 0) + 1;
+    return acc;
+  }, {}) ?? {};
+});
+useHead({ title: "Dashboard \u2014 Admin" });
+</script>
+
+<template>
+  <div data-admin-cms>
+    <AdminNavbar />
+    <div class="p-8">
+      <h1 class="text-2xl font-bold mb-2">Page Management</h1>
+      <p class="text-gray-500 mb-8">Create and manage your pages by type.</p>
+
+      <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+        <NuxtLink
+          v-for="type in pageTypes"
+          :key="type.id"
+          :to="`/admin/pages/${type.id}`"
+          class="bg-white p-10 rounded-xl shadow-sm hover:shadow-md transition-shadow flex flex-col items-center justify-center border border-gray-100 group"
+        >
+          <span class="text-3xl mb-4">{{ type.icon || "\u{1F4C4}" }}</span>
+          <h3 class="font-semibold text-gray-800 group-hover:text-blue-600 transition-colors text-center">
+            {{ type.label }}
+          </h3>
+          <span class="text-xs text-gray-400 mt-2">
+            {{ pageStats?.[type.id] || 0 }} page(s)
+          </span>
+        </NuxtLink>
+      </div>
+    </div>
+  </div>
+</template>

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

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