@elevasis/ui 2.74.0 → 2.76.0

package/dist/chunk-3QYRZSHP.js

@@ -0,0 +1,854 @@
+import { eqOrgId, sanitizePostgrestValue, useBatchDeleteRows } from './chunk-KB5CAN5D.js';
+import { useSupabase } from './chunk-MKH2KOAO.js';
+import { useTableSort, sortData } from './chunk-2Y6AKWGU.js';
+import { useTableSelection } from './chunk-WDBNW44Z.js';
+import { SubshellPageLayout } from './chunk-6B4ZPBQJ.js';
+import { TableSelectionToolbar, SortableHeader } from './chunk-TUMSNGTX.js';
+import { FilterBar } from './chunk-PDHTXPSF.js';
+import { usePaginationState, PageTitleCaption, StatCard, EmptyState, CustomModal, SubshellContentContainer } from './chunk-K55TU6CC.js';
+import { showApiErrorNotification } from './chunk-KXNRTJAE.js';
+import { useOrganization } from './chunk-DD3CCMCZ.js';
+import { PAGE_SIZE_DEFAULT } from './chunk-5ZK7K7YP.js';
+import { Stack, SimpleGrid, Paper, Select, TextInput, Group, Button, Center, Loader, Table, Checkbox, Text, Badge, Pagination, Title, Anchor, Card, Divider } from '@mantine/core';
+import { IconFileText, IconCircleCheck, IconPencil, IconAlertTriangle, IconEye, IconClick, IconTarget, IconBrain, IconSearch, IconFilterOff, IconExternalLink, IconArrowLeft, IconPercentage, IconChartLine, IconForms } from '@tabler/icons-react';
+import { useState, useMemo } from 'react';
+import { useQuery, useQueryClient, useMutation } from '@tanstack/react-query';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// ../core/src/business/seo/types.ts
+var SEO_PAGE_TYPES = ["location", "use-case", "comparison", "pillar", "cluster"];
+var SEO_PAGE_STATUSES = ["draft", "review", "published", "stale"];
+var SEO_VERTICALS = [
+  "veterinary-clinics",
+  "auto-repair",
+  "home-services",
+  "hvac-contractors",
+  "pest-control",
+  "commercial-cleaning",
+  "med-spas",
+  "hoa-property-management",
+  "security-companies"
+];
+var seoStatsKeys = {
+  all: ["seo-stats"],
+  stats: (orgId) => [...seoStatsKeys.all, "overview", orgId]
+};
+function useSeoStats() {
+  const supabase = useSupabase();
+  const { currentSupabaseOrganizationId } = useOrganization();
+  return useQuery({
+    queryKey: seoStatsKeys.stats(currentSupabaseOrganizationId),
+    queryFn: async () => {
+      if (!currentSupabaseOrganizationId) {
+        return {
+          totalPages: 0,
+          byStatus: { draft: 0, review: 0, published: 0, stale: 0 },
+          byType: { location: 0, pillar: 0, cluster: 0, "use-case": 0, comparison: 0 },
+          byVertical: {}
+        };
+      }
+      const { data: pages, error } = await eqOrgId(
+        supabase.from("acq_seo_pages").select("status, page_type, vertical"),
+        currentSupabaseOrganizationId
+      );
+      if (error) throw error;
+      const items = pages || [];
+      const byStatus = { draft: 0, review: 0, published: 0, stale: 0 };
+      const byType = { location: 0, pillar: 0, cluster: 0, "use-case": 0, comparison: 0 };
+      const byVertical = {};
+      for (const p of items) {
+        if (p.status in byStatus) byStatus[p.status]++;
+        if (p.page_type in byType) byType[p.page_type]++;
+        byVertical[p.vertical] = (byVertical[p.vertical] || 0) + 1;
+      }
+      return {
+        totalPages: items.length,
+        byStatus,
+        byType,
+        byVertical
+      };
+    },
+    enabled: !!currentSupabaseOrganizationId
+  });
+}
+var seoPageKeys = {
+  all: ["seo-pages"],
+  list: (orgId, filters) => [...seoPageKeys.all, "list", orgId, filters],
+  detail: (id) => [...seoPageKeys.all, "detail", id]
+};
+function useSeoPages(filters = {}) {
+  const supabase = useSupabase();
+  const { currentSupabaseOrganizationId } = useOrganization();
+  return useQuery({
+    queryKey: seoPageKeys.list(currentSupabaseOrganizationId, filters),
+    queryFn: async () => {
+      if (!currentSupabaseOrganizationId) return [];
+      let query = eqOrgId(supabase.from("acq_seo_pages").select("*"), currentSupabaseOrganizationId);
+      if (filters.pageType) query = query.eq("page_type", filters.pageType);
+      if (filters.vertical) query = query.eq("vertical", filters.vertical);
+      if (filters.status) query = query.eq("status", filters.status);
+      if (filters.search) {
+        const search = sanitizePostgrestValue(filters.search);
+        query = query.or(`title.ilike.%${search}%,slug.ilike.%${search}%`);
+      }
+      query = query.order("created_at", { ascending: false });
+      const { data, error } = await query;
+      if (error) throw error;
+      return data || [];
+    },
+    enabled: !!currentSupabaseOrganizationId
+  });
+}
+function useSeoPage(id) {
+  const supabase = useSupabase();
+  const { currentSupabaseOrganizationId } = useOrganization();
+  return useQuery({
+    queryKey: [...seoPageKeys.detail(id), currentSupabaseOrganizationId],
+    queryFn: async () => {
+      if (!currentSupabaseOrganizationId || !id) return null;
+      const { data, error } = await eqOrgId(
+        supabase.from("acq_seo_pages").select("*").eq("id", id),
+        currentSupabaseOrganizationId
+      ).single();
+      if (error) {
+        if (error.code === "PGRST116") return null;
+        throw error;
+      }
+      return data;
+    },
+    enabled: !!currentSupabaseOrganizationId && !!id
+  });
+}
+function useUpdateSeoPage() {
+  const supabase = useSupabase();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (params) => {
+      const { data, error } = await supabase.from("acq_seo_pages").update({ ...params.updates, updated_at: (/* @__PURE__ */ new Date()).toISOString() }).eq("id", params.id).select().single();
+      if (error) throw error;
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: seoPageKeys.all });
+      queryClient.invalidateQueries({ queryKey: seoStatsKeys.all });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+function useDeleteSeoPage() {
+  const supabase = useSupabase();
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationFn: async (id) => {
+      const { error } = await supabase.from("acq_seo_pages").delete().eq("id", id);
+      if (error) throw error;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: seoPageKeys.all });
+      queryClient.invalidateQueries({ queryKey: seoStatsKeys.all });
+    },
+    onError: (error) => {
+      showApiErrorNotification(error);
+    }
+  });
+}
+var seoMetricsKeys = {
+  all: ["seo-metrics"],
+  forPage: (orgId, pageId) => [...seoMetricsKeys.all, "page", orgId, pageId],
+  aggregate: (orgId, days) => [...seoMetricsKeys.all, "aggregate", orgId, days]
+};
+function useSeoPageMetrics(pageId, days = 30) {
+  const supabase = useSupabase();
+  const { currentSupabaseOrganizationId } = useOrganization();
+  return useQuery({
+    queryKey: [...seoMetricsKeys.forPage(currentSupabaseOrganizationId, pageId), days],
+    queryFn: async () => {
+      if (!currentSupabaseOrganizationId || !pageId) return [];
+      const since = /* @__PURE__ */ new Date();
+      since.setDate(since.getDate() - days);
+      const { data, error } = await eqOrgId(supabase.from("acq_seo_metrics").select("*"), currentSupabaseOrganizationId).eq("seo_page_id", pageId).gte("period", since.toISOString().split("T")[0]).order("period", { ascending: true });
+      if (error) throw error;
+      return data || [];
+    },
+    enabled: !!currentSupabaseOrganizationId && !!pageId
+  });
+}
+function useSeoAggregateMetrics(days = 30) {
+  const supabase = useSupabase();
+  const { currentSupabaseOrganizationId } = useOrganization();
+  return useQuery({
+    queryKey: seoMetricsKeys.aggregate(currentSupabaseOrganizationId, days),
+    queryFn: async () => {
+      const empty = {
+        totalImpressions: 0,
+        totalClicks: 0,
+        avgCtr: 0,
+        avgPosition: 0,
+        totalCtaClicks: 0,
+        totalFormSubmissions: 0,
+        totalAiCitations: 0
+      };
+      if (!currentSupabaseOrganizationId) return empty;
+      const since = /* @__PURE__ */ new Date();
+      since.setDate(since.getDate() - days);
+      const { data, error } = await eqOrgId(
+        supabase.from("acq_seo_metrics").select("impressions, clicks, ctr, avg_position, cta_clicks, form_submissions, ai_citations"),
+        currentSupabaseOrganizationId
+      ).gte("period", since.toISOString().split("T")[0]);
+      if (error) throw error;
+      if (!data?.length) return empty;
+      let totalImpressions = 0;
+      let totalClicks = 0;
+      let totalCtaClicks = 0;
+      let totalFormSubmissions = 0;
+      let totalAiCitations = 0;
+      let ctrSum = 0;
+      let posSum = 0;
+      let ctrCount = 0;
+      let posCount = 0;
+      for (const row of data) {
+        totalImpressions += row.impressions || 0;
+        totalClicks += row.clicks || 0;
+        totalCtaClicks += row.cta_clicks || 0;
+        totalFormSubmissions += row.form_submissions || 0;
+        if (row.ctr != null) {
+          ctrSum += Number(row.ctr);
+          ctrCount++;
+        }
+        if (row.avg_position != null) {
+          posSum += Number(row.avg_position);
+          posCount++;
+        }
+        if (row.ai_citations) {
+          const c = row.ai_citations;
+          for (const v of Object.values(c)) totalAiCitations += v || 0;
+        }
+      }
+      return {
+        totalImpressions,
+        totalClicks,
+        avgCtr: ctrCount ? ctrSum / ctrCount : 0,
+        avgPosition: posCount ? posSum / posCount : 0,
+        totalCtaClicks,
+        totalFormSubmissions,
+        totalAiCitations
+      };
+    },
+    enabled: !!currentSupabaseOrganizationId
+  });
+}
+
+// src/features/seo/formatters.ts
+function formatDate(dateString) {
+  if (!dateString) return "-";
+  return new Date(dateString).toLocaleDateString("en-US", {
+    month: "short",
+    day: "numeric",
+    year: "numeric"
+  });
+}
+function getStatusColor(status) {
+  switch (status) {
+    case "published":
+      return "green";
+    case "review":
+      return "blue";
+    case "draft":
+      return "gray";
+    case "stale":
+      return "orange";
+    default:
+      return "gray";
+  }
+}
+function getPageTypeColor(pageType) {
+  switch (pageType) {
+    case "pillar":
+      return "violet";
+    case "cluster":
+      return "cyan";
+    case "location":
+      return "teal";
+    case "use-case":
+      return "indigo";
+    case "comparison":
+      return "pink";
+    default:
+      return "gray";
+  }
+}
+function formatVertical(vertical) {
+  return vertical.split("-").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function SeoPagesPage({ websiteBaseUrl, onPageClick }) {
+  const { data: stats, isLoading: statsLoading } = useSeoStats();
+  const { data: metrics, isLoading: metricsLoading } = useSeoAggregateMetrics();
+  const [typeFilter, setTypeFilter] = useState(null);
+  const [verticalFilter, setVerticalFilter] = useState(null);
+  const [statusFilter, setStatusFilter] = useState(null);
+  const [searchQuery, setSearchQuery] = useState("");
+  const filters = {
+    pageType: typeFilter || void 0,
+    vertical: verticalFilter || void 0,
+    status: statusFilter || void 0,
+    search: searchQuery || void 0
+  };
+  const hasActiveFilters = !!typeFilter || !!verticalFilter || !!statusFilter || !!searchQuery;
+  const resetFilters = () => {
+    setTypeFilter(null);
+    setVerticalFilter(null);
+    setStatusFilter(null);
+    setSearchQuery("");
+  };
+  const { data: pages, isLoading: pagesLoading } = useSeoPages(filters);
+  const { sort, toggleSort } = useTableSort("updated");
+  const sortAccessors = useMemo(
+    () => ({
+      title: (p) => p.title,
+      type: (p) => p.page_type,
+      vertical: (p) => p.vertical,
+      status: (p) => p.status,
+      updated: (p) => p.updated_at || ""
+    }),
+    []
+  );
+  const sortedPages = useMemo(() => sortData(pages || [], sort, sortAccessors), [pages, sort, sortAccessors]);
+  const pagination = usePaginationState(
+    PAGE_SIZE_DEFAULT,
+    [typeFilter, verticalFilter, statusFilter, searchQuery],
+    sortedPages.length
+  );
+  const paginatedPages = useMemo(() => {
+    return sortedPages.slice(pagination.offset, pagination.offset + PAGE_SIZE_DEFAULT);
+  }, [sortedPages, pagination.offset]);
+  const selection = useTableSelection(paginatedPages, sortedPages);
+  const batchDeleteMutation = useBatchDeleteRows("acq_seo_pages", [seoPageKeys.all]);
+  const [showBatchDelete, setShowBatchDelete] = useState(false);
+  return /* @__PURE__ */ jsxs(SubshellPageLayout, { children: [
+    /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(PageTitleCaption, { title: "SEO Pages", caption: "Search engine optimization tracking and insights" }) }),
+    /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 2, sm: 4 }, children: [
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconFileText,
+          value: stats?.totalPages || 0,
+          label: "Total Pages",
+          isLoading: statsLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconCircleCheck,
+          value: stats?.byStatus.published || 0,
+          label: "Published",
+          isLoading: statsLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconPencil,
+          value: stats?.byStatus.draft || 0,
+          label: "Drafts",
+          isLoading: statsLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconAlertTriangle,
+          value: stats?.byStatus.stale || 0,
+          label: "Stale",
+          isLoading: statsLoading
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 2, sm: 4 }, children: [
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconEye,
+          value: metrics?.totalImpressions?.toLocaleString() || "0",
+          label: "Impressions (30d)",
+          isLoading: metricsLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconClick,
+          value: metrics?.totalClicks?.toLocaleString() || "0",
+          label: "Clicks (30d)",
+          isLoading: metricsLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconTarget,
+          value: metrics?.totalCtaClicks?.toLocaleString() || "0",
+          label: "CTA Clicks (30d)",
+          isLoading: metricsLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconBrain,
+          value: metrics?.totalAiCitations || 0,
+          label: "AI Citations (30d)",
+          isLoading: metricsLoading
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsxs(
+        FilterBar,
+        {
+          actions: /* @__PURE__ */ jsxs(Group, { gap: "md", children: [
+            hasActiveFilters && /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "subtle",
+                color: "gray",
+                leftSection: /* @__PURE__ */ jsx(IconFilterOff, { size: 16 }),
+                onClick: resetFilters,
+                children: "Reset"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TableSelectionToolbar,
+              {
+                selectedCount: selection.selectedCount,
+                onDelete: () => setShowBatchDelete(true),
+                isDeleting: batchDeleteMutation.isPending
+              }
+            )
+          ] }),
+          children: [
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                placeholder: "All Types",
+                data: SEO_PAGE_TYPES.map((t) => ({ value: t, label: t })),
+                style: { minWidth: 160 },
+                size: "sm",
+                clearable: true,
+                value: typeFilter,
+                onChange: setTypeFilter
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                placeholder: "All Verticals",
+                data: SEO_VERTICALS.map((v) => ({ value: v, label: formatVertical(v) })),
+                style: { minWidth: 200 },
+                size: "sm",
+                clearable: true,
+                value: verticalFilter,
+                onChange: setVerticalFilter
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Select,
+              {
+                placeholder: "All Statuses",
+                data: SEO_PAGE_STATUSES.map((s) => ({ value: s, label: s })),
+                style: { minWidth: 160 },
+                size: "sm",
+                clearable: true,
+                value: statusFilter,
+                onChange: setStatusFilter
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              TextInput,
+              {
+                placeholder: "Search title or slug...",
+                leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
+                style: { minWidth: 250 },
+                size: "sm",
+                value: searchQuery,
+                onChange: (e) => setSearchQuery(e.target.value)
+              }
+            )
+          ]
+        }
+      ),
+      pagesLoading ? /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) : !pages?.length ? /* @__PURE__ */ jsx(EmptyState, { icon: IconFileText, title: "No pages found" }) : /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          /* @__PURE__ */ jsx(Table.Th, { w: 40, children: /* @__PURE__ */ jsx(
+            Checkbox,
+            {
+              checked: selection.isPageAllSelected,
+              indeterminate: selection.isPagePartiallySelected,
+              onChange: selection.togglePage
+            }
+          ) }),
+          /* @__PURE__ */ jsx(SortableHeader, { column: "title", sort, onToggle: toggleSort, children: "Title" }),
+          /* @__PURE__ */ jsx(SortableHeader, { column: "type", sort, onToggle: toggleSort, children: "Type" }),
+          /* @__PURE__ */ jsx(SortableHeader, { column: "vertical", sort, onToggle: toggleSort, children: "Vertical" }),
+          /* @__PURE__ */ jsx(SortableHeader, { column: "status", sort, onToggle: toggleSort, children: "Status" }),
+          /* @__PURE__ */ jsx(SortableHeader, { column: "updated", sort, onToggle: toggleSort, children: "Updated" }),
+          /* @__PURE__ */ jsx(Table.Th, {})
+        ] }) }),
+        /* @__PURE__ */ jsx(Table.Tbody, { children: paginatedPages.map((page) => /* @__PURE__ */ jsxs(Table.Tr, { style: { cursor: "pointer" }, onClick: () => onPageClick(page.id), children: [
+          /* @__PURE__ */ jsx(Table.Td, { onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsx(Checkbox, { checked: selection.isSelected(page.id), onChange: () => selection.toggle(page.id) }) }),
+          /* @__PURE__ */ jsxs(Table.Td, { children: [
+            /* @__PURE__ */ jsx(Text, { fw: 500, size: "sm", children: page.title }),
+            /* @__PURE__ */ jsxs(Text, { size: "xs", c: "dimmed", children: [
+              "/",
+              page.slug
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", color: getPageTypeColor(page.page_type), children: page.page_type }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: formatVertical(page.vertical) }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Badge, { variant: "light", size: "sm", color: getStatusColor(page.status), children: page.status }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDate(page.updated_at) }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: `${websiteBaseUrl}/${page.slug}`,
+              target: "_blank",
+              rel: "noopener noreferrer",
+              style: { color: "var(--mantine-color-blue-5)", display: "inline-flex" },
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx(IconExternalLink, { size: 16 })
+            }
+          ) })
+        ] }, page.id)) })
+      ] }),
+      sortedPages.length > PAGE_SIZE_DEFAULT && /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          value: pagination.page,
+          onChange: pagination.setPage,
+          total: pagination.totalPages(sortedPages.length),
+          size: "sm"
+        }
+      ) })
+    ] }) }),
+    /* @__PURE__ */ jsx(
+      CustomModal,
+      {
+        opened: showBatchDelete,
+        onClose: () => !batchDeleteMutation.isPending && setShowBatchDelete(false),
+        size: "sm",
+        loading: batchDeleteMutation.isPending,
+        children: /* @__PURE__ */ jsxs(Stack, { gap: "md", children: [
+          /* @__PURE__ */ jsxs(Group, { gap: "sm", children: [
+            /* @__PURE__ */ jsx(IconAlertTriangle, { size: 24, color: "var(--color-error)" }),
+            /* @__PURE__ */ jsxs(Title, { order: 4, children: [
+              "Delete ",
+              selection.selectedCount,
+              " Pages"
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+            "Are you sure you want to delete",
+            " ",
+            /* @__PURE__ */ jsx(Text, { span: true, fw: 600, children: selection.selectedCount }),
+            " ",
+            "selected pages?"
+          ] }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: "This action cannot be undone." }),
+          /* @__PURE__ */ jsxs(Group, { justify: "flex-end", mt: "md", children: [
+            /* @__PURE__ */ jsx(Button, { variant: "light", onClick: () => setShowBatchDelete(false), disabled: batchDeleteMutation.isPending, children: "Cancel" }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                color: "red",
+                loading: batchDeleteMutation.isPending,
+                onClick: () => {
+                  batchDeleteMutation.mutate([...selection.selectedIds], {
+                    onSuccess: () => {
+                      setShowBatchDelete(false);
+                      selection.clear();
+                    }
+                  });
+                },
+                children: "Delete"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+function SeoPageDetailPage({ pageId, websiteBaseUrl, onBack, backLabel = "SEO Pages" }) {
+  const { data: page, isLoading } = useSeoPage(pageId);
+  const { data: metricsData, isLoading: metricsLoading } = useSeoPageMetrics(pageId);
+  const metrics = useMemo(() => {
+    if (!metricsData?.length)
+      return {
+        totalImpressions: 0,
+        totalClicks: 0,
+        avgCtr: 0,
+        avgPosition: 0,
+        totalCtaClicks: 0,
+        totalFormSubmissions: 0,
+        totalAiCitations: 0
+      };
+    let totalImpressions = 0;
+    let totalClicks = 0;
+    let totalCtaClicks = 0;
+    let totalFormSubmissions = 0;
+    let totalAiCitations = 0;
+    let ctrSum = 0;
+    let posSum = 0;
+    let ctrCount = 0;
+    let posCount = 0;
+    for (const row of metricsData) {
+      totalImpressions += row.impressions || 0;
+      totalClicks += row.clicks || 0;
+      totalCtaClicks += row.cta_clicks || 0;
+      totalFormSubmissions += row.form_submissions || 0;
+      if (row.ctr != null) {
+        ctrSum += Number(row.ctr);
+        ctrCount++;
+      }
+      if (row.avg_position != null) {
+        posSum += Number(row.avg_position);
+        posCount++;
+      }
+      if (row.ai_citations) {
+        const c = row.ai_citations;
+        for (const v of Object.values(c)) totalAiCitations += v || 0;
+      }
+    }
+    return {
+      totalImpressions,
+      totalClicks,
+      avgCtr: ctrCount ? ctrSum / ctrCount : 0,
+      avgPosition: posCount ? posSum / posCount : 0,
+      totalCtaClicks,
+      totalFormSubmissions,
+      totalAiCitations
+    };
+  }, [metricsData]);
+  if (isLoading) {
+    return /* @__PURE__ */ jsx(SubshellContentContainer, { children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  if (!page) {
+    return /* @__PURE__ */ jsx(SubshellContentContainer, { children: /* @__PURE__ */ jsx(EmptyState, { icon: IconFileText, title: "Page not found" }) });
+  }
+  return /* @__PURE__ */ jsxs(SubshellPageLayout, { children: [
+    /* @__PURE__ */ jsxs(Stack, { children: [
+      /* @__PURE__ */ jsx(
+        PageTitleCaption,
+        {
+          title: page.title,
+          caption: `${formatVertical(page.vertical)} \xB7 ${page.page_type} \xB7 ${page.status}`,
+          rightSection: /* @__PURE__ */ jsx(Button, { variant: "light", leftSection: /* @__PURE__ */ jsx(IconArrowLeft, { size: 16 }), onClick: onBack, size: "sm", children: backLabel })
+        }
+      ),
+      /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
+        /* @__PURE__ */ jsx(Badge, { size: "sm", color: getPageTypeColor(page.page_type), children: page.page_type }),
+        /* @__PURE__ */ jsx(Badge, { size: "sm", color: getStatusColor(page.status), children: page.status }),
+        /* @__PURE__ */ jsx(Anchor, { href: `${websiteBaseUrl}/${page.slug}`, target: "_blank", rel: "noopener noreferrer", size: "sm", children: /* @__PURE__ */ jsxs(Group, { gap: 4, children: [
+          /* @__PURE__ */ jsx(IconExternalLink, { size: 14 }),
+          "View on website"
+        ] }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, children: "Details" }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      /* @__PURE__ */ jsxs(Group, { children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", w: 120, children: "Slug" }),
+        /* @__PURE__ */ jsxs(Text, { size: "sm", children: [
+          "/",
+          page.slug
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", w: 120, children: "Vertical" }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", children: formatVertical(page.vertical) })
+      ] }),
+      page.city && /* @__PURE__ */ jsxs(Group, { children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", w: 120, children: "City" }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", children: page.city })
+      ] }),
+      page.meta_description && /* @__PURE__ */ jsxs(Group, { align: "flex-start", children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", w: 120, children: "Meta Description" }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", style: { flex: 1 }, children: page.meta_description })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", w: 120, children: "Created" }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", children: formatDate(page.created_at) })
+      ] }),
+      /* @__PURE__ */ jsxs(Group, { children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", w: 120, children: "Updated" }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", children: formatDate(page.updated_at) })
+      ] }),
+      page.published_at && /* @__PURE__ */ jsxs(Group, { children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", w: 120, children: "Published" }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", children: formatDate(page.published_at) })
+      ] }),
+      page.refreshed_at && /* @__PURE__ */ jsxs(Group, { children: [
+        /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", w: 120, children: "Last Refreshed" }),
+        /* @__PURE__ */ jsx(Text, { size: "sm", children: formatDate(page.refreshed_at) })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx(Card, { withBorder: true, children: /* @__PURE__ */ jsxs(Stack, { gap: "sm", children: [
+      /* @__PURE__ */ jsx(Title, { order: 3, children: "Performance (30 days)" }),
+      /* @__PURE__ */ jsx(Divider, {}),
+      metricsLoading ? /* @__PURE__ */ jsx(Center, { p: "md", children: /* @__PURE__ */ jsx(Loader, { size: "sm" }) }) : /* @__PURE__ */ jsxs(SimpleGrid, { cols: 3, children: [
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Impressions" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: metrics.totalImpressions.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Clicks" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: metrics.totalClicks.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Avg CTR" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: metrics.avgCtr ? `${(metrics.avgCtr * 100).toFixed(1)}%` : "0%" })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Avg Position" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: metrics.avgPosition ? metrics.avgPosition.toFixed(1) : "-" })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "CTA Clicks" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: metrics.totalCtaClicks.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "Form Submissions" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: metrics.totalFormSubmissions.toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxs(Stack, { gap: 2, children: [
+          /* @__PURE__ */ jsx(Text, { size: "xs", c: "dimmed", children: "AI Citations" }),
+          /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, children: metrics.totalAiCitations })
+        ] })
+      ] })
+    ] }) })
+  ] });
+}
+function SeoMetricsPage() {
+  const { data: metrics, isLoading: metricsLoading } = useSeoAggregateMetrics();
+  const { data: pages, isLoading: pagesLoading } = useSeoPages({ status: "published" });
+  const pagination = usePaginationState(PAGE_SIZE_DEFAULT);
+  const paginatedPages = useMemo(() => {
+    if (!pages) return [];
+    return pages.slice(pagination.offset, pagination.offset + PAGE_SIZE_DEFAULT);
+  }, [pages, pagination.offset]);
+  return /* @__PURE__ */ jsxs(SubshellPageLayout, { children: [
+    /* @__PURE__ */ jsx(Stack, { children: /* @__PURE__ */ jsx(PageTitleCaption, { title: "SEO Metrics", caption: "Search performance and conversion tracking" }) }),
+    /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 2, sm: 4 }, children: [
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconEye,
+          value: metrics?.totalImpressions?.toLocaleString() || "0",
+          label: "Total Impressions",
+          isLoading: metricsLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconClick,
+          value: metrics?.totalClicks?.toLocaleString() || "0",
+          label: "Total Clicks",
+          isLoading: metricsLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconPercentage,
+          value: metrics?.avgCtr ? `${(metrics.avgCtr * 100).toFixed(1)}%` : "0%",
+          label: "Avg CTR",
+          isLoading: metricsLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconChartLine,
+          value: metrics?.avgPosition ? metrics.avgPosition.toFixed(1) : "-",
+          label: "Avg Position",
+          isLoading: metricsLoading
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(SimpleGrid, { cols: { base: 2, sm: 3 }, children: [
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconTarget,
+          value: metrics?.totalCtaClicks?.toLocaleString() || "0",
+          label: "CTA Clicks",
+          isLoading: metricsLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconForms,
+          value: metrics?.totalFormSubmissions?.toLocaleString() || "0",
+          label: "Form Submissions",
+          isLoading: metricsLoading
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        StatCard,
+        {
+          variant: "hero",
+          icon: IconBrain,
+          value: metrics?.totalAiCitations || 0,
+          label: "AI Citations",
+          isLoading: metricsLoading
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(Paper, { children: /* @__PURE__ */ jsxs(Stack, { children: [
+      pagesLoading ? /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) : !pages?.length ? /* @__PURE__ */ jsx(EmptyState, { icon: IconFileText, title: "No published pages yet" }) : /* @__PURE__ */ jsxs(Table, { children: [
+        /* @__PURE__ */ jsx(Table.Thead, { children: /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          /* @__PURE__ */ jsx(Table.Th, { children: "Title" }),
+          /* @__PURE__ */ jsx(Table.Th, { children: "Vertical" }),
+          /* @__PURE__ */ jsx(Table.Th, { children: "Published" }),
+          /* @__PURE__ */ jsx(Table.Th, { children: "Refreshed" })
+        ] }) }),
+        /* @__PURE__ */ jsx(Table.Tbody, { children: paginatedPages.map((page) => /* @__PURE__ */ jsxs(Table.Tr, { children: [
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { fw: 500, size: "sm", children: page.title }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", children: formatVertical(page.vertical) }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDate(page.published_at) }) }),
+          /* @__PURE__ */ jsx(Table.Td, { children: /* @__PURE__ */ jsx(Text, { size: "sm", c: "dimmed", children: formatDate(page.refreshed_at) }) })
+        ] }, page.id)) })
+      ] }),
+      pages && pages.length > PAGE_SIZE_DEFAULT && /* @__PURE__ */ jsx(Group, { justify: "center", children: /* @__PURE__ */ jsx(
+        Pagination,
+        {
+          value: pagination.page,
+          onChange: pagination.setPage,
+          total: pagination.totalPages(pages.length),
+          size: "sm"
+        }
+      ) })
+    ] }) })
+  ] });
+}
+
+export { SEO_PAGE_STATUSES, SEO_PAGE_TYPES, SEO_VERTICALS, SeoMetricsPage, SeoPageDetailPage, SeoPagesPage, formatDate, formatVertical, getPageTypeColor, getStatusColor, seoMetricsKeys, seoPageKeys, seoStatsKeys, useDeleteSeoPage, useSeoAggregateMetrics, useSeoPage, useSeoPageMetrics, useSeoPages, useSeoStats, useUpdateSeoPage };