@antelopejs/dms-marketing 0.2.2

package/dist/utils/experiment-type.d.ts

@@ -0,0 +1,52 @@
+import { DataType } from "@antelopejs/interface-dms/base/data-types";
+import { z } from "zod";
+declare const experimentSchema: z.ZodObject<{
+    key: z.ZodString;
+    status: z.ZodOptional<z.ZodEnum<["draft", "running", "stopped"]>>;
+    variations: z.ZodEffects<z.ZodEffects<z.ZodArray<z.ZodObject<{
+        key: z.ZodString;
+        weight: z.ZodNumber;
+    }, "strip", z.ZodTypeAny, {
+        key: string;
+        weight: number;
+    }, {
+        key: string;
+        weight: number;
+    }>, "many">, {
+        key: string;
+        weight: number;
+    }[], {
+        key: string;
+        weight: number;
+    }[]>, {
+        key: string;
+        weight: number;
+    }[], {
+        key: string;
+        weight: number;
+    }[]>;
+}, "strip", z.ZodTypeAny, {
+    key: string;
+    variations: {
+        key: string;
+        weight: number;
+    }[];
+    status?: "stopped" | "running" | "draft" | undefined;
+}, {
+    key: string;
+    variations: {
+        key: string;
+        weight: number;
+    }[];
+    status?: "stopped" | "running" | "draft" | undefined;
+}>;
+export type ExperimentInput = z.output<typeof experimentSchema>;
+export declare function parseExperimentInput(raw: unknown): ExperimentInput | null;
+export declare function experimentIssueField(error: unknown): "key" | "variations" | "status" | undefined;
+export declare class ExperimentType extends DataType {
+    readonly options: Record<string, unknown>;
+    constructor(options?: Record<string, unknown>);
+    protected defaultInputComponent(): import("@antelopejs/interface-dms").ComponentInfoSerialized<unknown>;
+    getValidation(): z.ZodEffects<z.ZodUnknown, unknown, unknown>;
+}
+export {};

package/dist/utils/experiment-type.js

@@ -0,0 +1,94 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExperimentType = void 0;
+exports.parseExperimentInput = parseExperimentInput;
+exports.experimentIssueField = experimentIssueField;
+const custom_1 = require("@antelopejs/interface-dms/base/custom");
+const data_types_1 = require("@antelopejs/interface-dms/base/data-types");
+const zod_1 = require("zod");
+const funnels_table_1 = require("@/db/tables/funnels.table");
+const constants_1 = require("@/types/constants");
+const experimentKeySchema = zod_1.z
+    .string()
+    .trim()
+    .min(1)
+    .max(constants_1.MAX_EXPERIMENT_KEY_LENGTH)
+    .regex(/^[a-z0-9][a-z0-9_-]*$/);
+const variationSchema = zod_1.z.object({
+    key: experimentKeySchema,
+    weight: zod_1.z.number().finite().nonnegative(),
+});
+const variationsSchema = zod_1.z
+    .array(variationSchema)
+    .min(constants_1.MIN_EXPERIMENT_VARIATIONS)
+    .max(constants_1.MAX_EXPERIMENT_VARIATIONS)
+    .refine((variations) => new Set(variations.map((v) => v.key)).size === variations.length)
+    .refine((variations) => variations.some((v) => v.weight > 0));
+const experimentSchema = zod_1.z.object({
+    key: experimentKeySchema,
+    status: zod_1.z.enum(funnels_table_1.EXPERIMENT_STATUSES).optional(),
+    variations: variationsSchema,
+});
+function isBlankKey(value) {
+    return typeof value !== "string" || value.trim() === "";
+}
+function parseExperimentInput(raw) {
+    const value = typeof raw === "string" && raw !== "" ? JSON.parse(raw) : raw;
+    if (value === null || value === undefined || value === "") {
+        return null;
+    }
+    const candidate = value;
+    const noArms = !Array.isArray(candidate.variations) || candidate.variations.length === 0;
+    if (isBlankKey(candidate.key) && noArms) {
+        return null;
+    }
+    return experimentSchema.parse(value);
+}
+function experimentIssueField(error) {
+    if (!(error instanceof zod_1.z.ZodError)) {
+        return undefined;
+    }
+    const field = error.issues[0]?.path[0];
+    return field === "key" || field === "variations" || field === "status"
+        ? field
+        : undefined;
+}
+const experimentValueSchema = zod_1.z.unknown().refine((value) => {
+    try {
+        parseExperimentInput(value);
+        return true;
+    }
+    catch {
+        return false;
+    }
+});
+let ExperimentType = class ExperimentType extends data_types_1.DataType {
+    options;
+    constructor(options = {}) {
+        super([], undefined, options);
+        this.options = options;
+    }
+    defaultInputComponent() {
+        return (0, custom_1.CustomComponent)("DmsMarketingExperimentInput")
+            .options(this.options)
+            .serializeSync();
+    }
+    getValidation() {
+        return experimentValueSchema;
+    }
+};
+exports.ExperimentType = ExperimentType;
+exports.ExperimentType = ExperimentType = __decorate([
+    (0, data_types_1.RegisterDataType)("marketing_experiment"),
+    __metadata("design:paramtypes", [Object])
+], ExperimentType);
+//# sourceMappingURL=experiment-type.js.map

package/dist/utils/experiment-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"experiment-type.js","sourceRoot":"","sources":["../../src/utils/experiment-type.ts"],"names":[],"mappings":"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"}

package/dist/utils/funnel-steps-type.d.ts

@@ -0,0 +1,42 @@
+import { DataType } from "@antelopejs/interface-dms/base/data-types";
+import { z } from "zod";
+declare const stepSchema: z.ZodObject<{
+    kind: z.ZodEnum<["url", "custom"]>;
+    value: z.ZodString;
+}, "strip", z.ZodTypeAny, {
+    value: string;
+    kind: "custom" | "url";
+}, {
+    value: string;
+    kind: "custom" | "url";
+}>;
+export type FunnelStepInput = z.output<typeof stepSchema>;
+export declare function parseFunnelSteps(raw: unknown): FunnelStepInput[];
+export declare class FunnelStepsType extends DataType {
+    readonly options: Record<string, unknown>;
+    constructor(options?: Record<string, unknown>);
+    protected defaultInputComponent(): import("@antelopejs/interface-dms").ComponentInfoSerialized<unknown>;
+    getValidation(): z.ZodPipeline<z.ZodEffects<z.ZodUnion<[z.ZodString, z.ZodArray<z.ZodObject<{
+        kind: z.ZodEnum<["url", "custom"]>;
+        value: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        value: string;
+        kind: "custom" | "url";
+    }, {
+        value: string;
+        kind: "custom" | "url";
+    }>, "many">]>, any, string | {
+        value: string;
+        kind: "custom" | "url";
+    }[]>, z.ZodArray<z.ZodObject<{
+        kind: z.ZodEnum<["url", "custom"]>;
+        value: z.ZodString;
+    }, "strip", z.ZodTypeAny, {
+        value: string;
+        kind: "custom" | "url";
+    }, {
+        value: string;
+        kind: "custom" | "url";
+    }>, "many">>;
+}
+export {};

package/dist/utils/funnel-steps-type.js

@@ -0,0 +1,62 @@
+"use strict";
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+var __metadata = (this && this.__metadata) || function (k, v) {
+    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FunnelStepsType = void 0;
+exports.parseFunnelSteps = parseFunnelSteps;
+const custom_1 = require("@antelopejs/interface-dms/base/custom");
+const data_types_1 = require("@antelopejs/interface-dms/base/data-types");
+const zod_1 = require("zod");
+const constants_1 = require("@/types/constants");
+const stepSchema = zod_1.z.object({
+    kind: zod_1.z.enum(["url", "custom"]),
+    value: zod_1.z.string().trim().min(1).max(constants_1.MAX_FUNNEL_STEP_VALUE_LENGTH),
+});
+const funnelStepsSchema = zod_1.z
+    .union([zod_1.z.string(), zod_1.z.array(stepSchema)])
+    .transform((value) => {
+    if (typeof value !== "string") {
+        return value;
+    }
+    if (value === "") {
+        return [];
+    }
+    try {
+        return JSON.parse(value);
+    }
+    catch {
+        return [];
+    }
+})
+    .pipe(zod_1.z.array(stepSchema).min(constants_1.MIN_FUNNEL_STEPS).max(constants_1.MAX_FUNNEL_STEPS));
+function parseFunnelSteps(raw) {
+    return funnelStepsSchema.parse(raw);
+}
+let FunnelStepsType = class FunnelStepsType extends data_types_1.DataType {
+    options;
+    constructor(options = {}) {
+        super([], undefined, options);
+        this.options = options;
+    }
+    defaultInputComponent() {
+        return (0, custom_1.CustomComponent)("DmsMarketingFunnelStepsInput")
+            .options(this.options)
+            .serializeSync();
+    }
+    getValidation() {
+        return funnelStepsSchema;
+    }
+};
+exports.FunnelStepsType = FunnelStepsType;
+exports.FunnelStepsType = FunnelStepsType = __decorate([
+    (0, data_types_1.RegisterDataType)("marketing_funnel_steps"),
+    __metadata("design:paramtypes", [Object])
+], FunnelStepsType);
+//# sourceMappingURL=funnel-steps-type.js.map

package/dist/utils/funnel-steps-type.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"funnel-steps-type.js","sourceRoot":"","sources":["../../src/utils/funnel-steps-type.ts"],"names":[],"mappings":";;;;;;;;;;;;AA2CA,4CAEC;AA7CD,kEAAwE;AACxE,0EAGmD;AACnD,6BAAwB;AACxB,iDAI2B;AAE3B,MAAM,UAAU,GAAG,OAAC,CAAC,MAAM,CAAC;IAC1B,IAAI,EAAE,OAAC,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC;IAC/B,KAAK,EAAE,OAAC,CAAC,MAAM,EAAE,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,wCAA4B,CAAC;CAClE,CAAC,CAAC;AAGH,MAAM,iBAAiB,GAAG,OAAC;KACxB,KAAK,CAAC,CAAC,OAAC,CAAC,MAAM,EAAE,EAAE,OAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;KACxC,SAAS,CAAC,CAAC,KAAK,EAAE,EAAE;IACnB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9B,OAAO,KAAK,CAAC;IACf,CAAC;IACD,IAAI,KAAK,KAAK,EAAE,EAAE,CAAC;QACjB,OAAO,EAAE,CAAC;IACZ,CAAC;IACD,IAAI,CAAC;QACH,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAC3B,CAAC;IAAC,MAAM,CAAC;QACP,OAAO,EAAE,CAAC;IACZ,CAAC;AACH,CAAC,CAAC;KACD,IAAI,CAAC,OAAC,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,4BAAgB,CAAC,CAAC,GAAG,CAAC,4BAAgB,CAAC,CAAC,CAAC;AAUzE,SAAgB,gBAAgB,CAAC,GAAY;IAC3C,OAAO,iBAAiB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;AACtC,CAAC;AAOM,IAAM,eAAe,GAArB,MAAM,eAAgB,SAAQ,qBAAQ;IACf;IAA5B,YAA4B,UAAmC,EAAE;QAC/D,KAAK,CAAC,EAAE,EAAE,SAAS,EAAE,OAAO,CAAC,CAAC;QADJ,YAAO,GAAP,OAAO,CAA8B;IAEjE,CAAC;IAES,qBAAqB;QAC7B,OAAO,IAAA,wBAAe,EAAC,8BAA8B,CAAC;aACnD,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;aACrB,aAAa,EAAE,CAAC;IACrB,CAAC;IAED,aAAa;QACX,OAAO,iBAAiB,CAAC;IAC3B,CAAC;CACF,CAAA;AAdY,0CAAe;0BAAf,eAAe;IAD3B,IAAA,6BAAgB,EAAC,wBAAwB,CAAC;;GAC9B,eAAe,CAc3B"}

package/frontend-vue/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+indent_size = 2
+indent_style = space
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

package/frontend-vue/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "endOfLine": "auto",
+  "htmlWhitespaceSensitivity": "ignore"
+}

package/frontend-vue/app/components/CampaignsView.vue

@@ -0,0 +1,330 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useDmsRoute, useI18n } from '#dms/frontend-module'
+import { useChildId } from '../composables/useChildId'
+import { useLatestRequest } from '../composables/useLatestRequest'
+import {
+  useMarketingApi,
+  type MarketingCampaignEntry,
+  type MarketingCampaigns,
+  type MarketingChannel,
+} from '../composables/useMarketingApi'
+import {
+  MARKETING_PERIOD_PRESETS,
+  ndToPreset,
+  useMarketingPeriod,
+} from '../composables/useMarketingPeriod'
+import { useMarketingWebsites } from '../composables/useMarketingWebsites'
+
+import type { TableColumn } from '@nuxt/ui'
+
+/**
+ * Acquisition surface: the five-channel split of sessions (donut) next to the
+ * UTM campaign table — one row per (source, medium, campaign) triple observed
+ * on new sessions — with UTM terms and contents as top lists below.
+ *
+ * Everything reads the daily rollups through one campaigns fetch; the search
+ * box filters the table server-side because a day's map caps its entries and
+ * the merged table can exceed what one response carries.
+ */
+const PERIOD_SCOPE = 'dms-marketing-campaigns'
+const SEARCH_DEBOUNCE_MS = 300
+
+// The DMS page renderer hands every component its identity; keeping it is what
+// lets dms-ui primitives key their events and persisted state per child.
+const props = withDefaults(
+  defineProps<{ componentId?: string, pageId?: string }>(),
+  { componentId: 'marketing-campaigns', pageId: 'marketing' },
+)
+
+const childId = useChildId(() => props.componentId)
+
+const api = useMarketingApi()
+const { t, te } = useI18n()
+const route = useDmsRoute()
+
+const queryParam = (key: string): string => {
+  const value = route.query[key]
+  return typeof value === 'string' ? value : ''
+}
+
+// Read once: the selector seeds its preset at init and never reactively, so a
+// deep link's window has to be resolved before it renders.
+const initialPreset = ndToPreset(queryParam('period'))
+
+const {
+  websites,
+  items: websiteItems,
+  selectedId,
+  loading: loadingWebsites,
+  failed: websitesFailed,
+  load: loadWebsites,
+  create: createWebsite,
+} = useMarketingWebsites(queryParam('website'))
+
+const period = useMarketingPeriod(PERIOD_SCOPE)
+const search = ref('')
+
+let searchTimer: ReturnType<typeof setTimeout> | null = null
+
+const {
+  data: acquisition,
+  loading: loadingCampaigns,
+  failed: campaignsFailed,
+  settled: campaignsSettled,
+  run: loadCampaigns,
+} = useLatestRequest<MarketingCampaigns>(() =>
+  // Server-side there is no session to authenticate with: the fetch belongs to
+  // the client, like every other read here.
+  selectedId.value && !import.meta.env.SSR
+    ? api.getCampaigns(selectedId.value, period.value, search.value.trim())
+    : null,
+)
+
+// The watcher owns every fetch, including the first: seeding it from onMounted
+// as well would issue the initial request twice on a bare link, and not at all
+// on a link that already names the site the list would have picked — resolving
+// it writes back the same id, which is no change to watch.
+watch([selectedId, period], () => {
+  void loadCampaigns()
+}, { immediate: true })
+
+watch(search, () => {
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+  }
+  searchTimer = setTimeout(() => void loadCampaigns(), SEARCH_DEBOUNCE_MS)
+})
+
+onBeforeUnmount(() => {
+  if (searchTimer) {
+    clearTimeout(searchTimer)
+  }
+})
+
+const loading = computed(
+  () =>
+    loadingWebsites.value
+    || loadingCampaigns.value
+    || (!!selectedId.value && !campaignsSettled.value),
+)
+
+// Two failures, two flags: retrying the campaigns fetch must not clear the
+// one that says the site list itself never loaded.
+const failed = computed(() => websitesFailed.value || campaignsFailed.value)
+
+/** Retry entry point: whichever of the two fetches has nothing to show. */
+function reload() {
+  return websites.value.length === 0 ? loadWebsites() : loadCampaigns()
+}
+
+onMounted(loadWebsites)
+
+// --- Channels ---------------------------------------------------------------
+
+/** Display order mirrors the backend's MARKETING_CHANNELS. */
+const CHANNEL_ORDER: MarketingChannel[] = ['direct', 'organic', 'social', 'referral', 'paid']
+
+/** Known channels localize; a key minted by a future classifier still shows. */
+function channelLabel(channel: string): string {
+  const key = `page.marketing.campaigns.channels.${channel}`
+  return te(key) ? t(key) : channel
+}
+
+const channelRecords = computed(() => {
+  const channels = acquisition.value?.channels ?? {}
+  return CHANNEL_ORDER
+    .map(channel => ({ label: channelLabel(channel), value: channels[channel] ?? 0 }))
+    .filter(record => record.value > 0)
+})
+
+// --- Campaign table ---------------------------------------------------------
+
+const campaignRows = computed(() => acquisition.value?.campaigns ?? [])
+const truncated = computed(() => acquisition.value?.truncated ?? false)
+
+const columns = computed<TableColumn<MarketingCampaignEntry>[]>(() => [
+  { accessorKey: 'source', header: t('page.marketing.campaigns.table.source') },
+  { accessorKey: 'medium', header: t('page.marketing.campaigns.table.medium') },
+  { accessorKey: 'campaign', header: t('page.marketing.campaigns.table.campaign') },
+  {
+    accessorKey: 'sessions',
+    header: t('page.marketing.campaigns.table.sessions'),
+    meta: { class: { th: 'text-right', td: 'text-right' } },
+  },
+])
+
+// --- Referrer / term / content top lists ------------------------------------
+
+const TOP_LIST_LIMIT = 8
+
+function toTopItems(record: Record<string, number> | undefined) {
+  return Object.entries(record ?? {})
+    .sort((a, b) => b[1] - a[1])
+    .slice(0, TOP_LIST_LIMIT)
+    .map(([label, value]) => ({ id: label, title: label, value }))
+}
+
+const topLists = computed(() => [
+  // Referrer domains across all channels — the overview's acquisition card
+  // links here for this detail.
+  {
+    id: 'referrers',
+    title: t('page.marketing.campaigns.top.referrers'),
+    items: toTopItems(acquisition.value?.referrers),
+  },
+  {
+    id: 'terms',
+    title: t('page.marketing.campaigns.top.terms'),
+    items: toTopItems(acquisition.value?.terms),
+  },
+  {
+    id: 'contents',
+    title: t('page.marketing.campaigns.top.contents'),
+    items: toTopItems(acquisition.value?.contents),
+  },
+])
+</script>
+
+<template>
+  <div class="space-y-6 p-6">
+    <div class="flex flex-wrap items-center justify-between gap-4">
+      <div>
+        <h1 class="text-xl font-semibold">{{ t('page.marketing.campaigns.title') }}</h1>
+        <p class="text-sm text-muted">{{ t('page.marketing.campaigns.subtitle') }}</p>
+      </div>
+      <div class="flex items-center gap-3">
+        <USelect
+          v-if="websites.length > 1"
+          v-model="selectedId"
+          :items="websiteItems"
+          class="w-56"
+        />
+        <DmsPeriodSelector
+          :id="PERIOD_SCOPE"
+          :component-id="childId('period')"
+          :page-id="props.pageId"
+          :default-preset="initialPreset"
+          :presets="MARKETING_PERIOD_PRESETS"
+          :comparisons="['none']"
+          :show-range-label="false"
+        />
+        <UButton
+          icon="i-ph-arrow-clockwise"
+          color="neutral"
+          variant="subtle"
+          size="sm"
+          :loading="loading"
+          @click="loadCampaigns"
+        />
+      </div>
+    </div>
+
+    <div v-if="failed" class="flex flex-col items-start gap-3">
+      <UAlert
+        color="error"
+        variant="subtle"
+        icon="i-ph-warning-circle"
+        :title="t('page.marketing.campaigns.error.title')"
+        :description="t('page.marketing.campaigns.error.description')"
+      />
+      <UButton
+        icon="i-ph-arrow-clockwise"
+        :label="t('page.marketing.campaigns.retry')"
+        color="neutral"
+        variant="subtle"
+        size="sm"
+        @click="reload"
+      />
+    </div>
+
+    <DmsMarketingNoWebsiteState
+      v-else-if="!loading && websites.length === 0"
+      icon="i-ph-megaphone"
+      :title="t('page.marketing.campaigns.empty.title')"
+      :description="t('page.marketing.campaigns.empty.description')"
+      @create="createWebsite"
+    />
+
+    <!-- Only before the first answer: a refetch keeps the tables on screen
+    and spins the refresh button instead. -->
+    <USkeleton v-else-if="loading && !acquisition" class="h-96 w-full" />
+
+    <template v-else>
+      <div class="grid gap-4 lg:grid-cols-3">
+        <UCard>
+          <template #header>
+            <div>
+              <p class="font-medium">{{ t('page.marketing.campaigns.channels.title') }}</p>
+              <p class="text-sm text-muted">{{ t('page.marketing.campaigns.channels.subtitle') }}</p>
+            </div>
+          </template>
+          <DmsChart
+            v-if="channelRecords.length > 0"
+            :component-id="childId('channels')"
+            :page-id="props.pageId"
+            type="donut"
+            :static-dataset="channelRecords"
+            height="300px"
+            :show-total="true"
+          />
+          <p v-else class="py-12 text-center text-sm text-muted">
+            {{ t('page.marketing.campaigns.channels.empty') }}
+          </p>
+        </UCard>
+
+        <UCard class="lg:col-span-2">
+          <template #header>
+            <div class="flex flex-wrap items-center justify-between gap-3">
+              <div>
+                <p class="font-medium">{{ t('page.marketing.campaigns.table.title') }}</p>
+                <p class="text-sm text-muted">{{ t('page.marketing.campaigns.table.subtitle') }}</p>
+              </div>
+              <UInput
+                v-model="search"
+                icon="i-ph-magnifying-glass"
+                :placeholder="t('page.marketing.campaigns.table.search_placeholder')"
+                class="w-56"
+              />
+            </div>
+          </template>
+          <UTable :data="campaignRows" :columns="columns">
+            <template #source-cell="{ row }">
+              <span v-if="row.original.source">{{ row.original.source }}</span>
+              <span v-else class="text-muted">—</span>
+            </template>
+            <template #medium-cell="{ row }">
+              <span v-if="row.original.medium">{{ row.original.medium }}</span>
+              <span v-else class="text-muted">—</span>
+            </template>
+            <template #campaign-cell="{ row }">
+              <span v-if="row.original.campaign">{{ row.original.campaign }}</span>
+              <span v-else class="text-muted">—</span>
+            </template>
+            <template #empty>
+              <p class="py-8 text-center text-sm text-muted">
+                {{ t('page.marketing.campaigns.table.empty') }}
+              </p>
+            </template>
+          </UTable>
+          <p v-if="truncated" class="mt-2 text-sm text-muted">
+            {{ t('page.marketing.campaigns.table.truncated') }}
+          </p>
+        </UCard>
+      </div>
+
+      <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
+        <DmsTopListCard
+          v-for="list in topLists"
+          :key="list.id"
+          :component-id="childId(`top-${list.id}`)"
+          :page-id="props.pageId"
+          :title="list.title"
+          :static-items="list.items"
+          :show-delta="false"
+          :empty-label="t('page.marketing.campaigns.top.empty')"
+        />
+      </div>
+    </template>
+  </div>
+</template>