@fayz-ai/plugin-marketing 0.9.0-next.1 → 0.9.1

package/src/views/CampaignsView.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { Plus, Trash2 } from 'lucide-react'
-import type { ColumnDef } from '@tanstack/react-table'
-import { Button, DataTable } from '@fayz-ai/ui'
-import { PermissionGate } from '@fayz-ai/saas'
-import { useTranslation } from '@fayz-ai/core'
-import { useMarketingConfig, useMarketingStore } from '../MarketingContext'
-import { formatCurrency, formatNumber, formatPercent } from '../format'
-import { RangeTabs, ChannelCell, StatusBadge } from '../components/MarketingBits'
-import { CampaignComposer } from './CampaignComposer'
-import type { Campaign } from '../types'
-
-export function CampaignsView() {
-  const t = useTranslation()
-  const { conversion, currency } = useMarketingConfig()
-  const campaigns = useMarketingStore((s) => s.campaigns)
-  const deleteCampaign = useMarketingStore((s) => s.deleteCampaign)
-  const [composerOpen, setComposerOpen] = React.useState(false)
-
-  const columns = React.useMemo<ColumnDef<Campaign, any>[]>(() => [
-    { accessorKey: 'name', header: t('marketing.col.campaign'), cell: ({ getValue }) => <span className="font-medium text-foreground">{getValue() as string}</span> },
-    { accessorKey: 'channelId', header: t('marketing.col.channel'), cell: ({ getValue }) => <ChannelCell channelId={getValue() as string} /> },
-    { accessorKey: 'reach', header: t('marketing.col.reach'), cell: ({ getValue }) => <span className="text-muted-foreground">{formatNumber(getValue() as number)}</span> },
-    { accessorKey: 'conversions', header: conversion.labelPlural, cell: ({ getValue }) => <span className="font-medium text-foreground">{formatNumber(getValue() as number)}</span> },
-    { id: 'cvr', accessorFn: (c) => (c.reach > 0 ? (c.conversions / c.reach) * 100 : 0), header: t('marketing.col.cvr'), cell: ({ getValue }) => <span className="text-muted-foreground">{formatPercent(getValue() as number)}</span> },
-    { accessorKey: 'spend', header: t('marketing.col.spend'), cell: ({ getValue }) => { const v = getValue() as number; return <span className="text-muted-foreground">{v > 0 ? formatCurrency(v, currency) : '—'}</span> } },
-    { accessorKey: 'status', header: t('marketing.col.status'), cell: ({ getValue }) => <StatusBadge status={getValue() as Campaign['status']} /> },
-    {
-      id: 'actions', header: '', enableSorting: false,
-      cell: ({ row }) => (
-        <button
-          onClick={(e) => { e.stopPropagation(); void deleteCampaign(row.original.id) }}
-          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
-          title={t('marketing.campaigns.delete')}
-        >
-          <Trash2 className="h-4 w-4" />
-        </button>
-      ),
-    },
-  ], [t, conversion.labelPlural, currency, deleteCampaign])
-
-  return (
-    <div className="mx-auto max-w-6xl space-y-4">
-      <div className="flex items-center justify-between">
-        <p className="text-sm text-muted-foreground">{t('marketing.campaigns.subtitle')}</p>
-        <div className="flex items-center gap-2">
-          <RangeTabs />
-          <PermissionGate feature="marketing" action="create">
-            <Button onClick={() => setComposerOpen(true)}><Plus className="mr-1.5 h-4 w-4" /> {t('marketing.campaigns.new')}</Button>
-          </PermissionGate>
-        </div>
-      </div>
-
-      <DataTable columns={columns} data={campaigns} emptyMessage={t('marketing.campaigns.empty')} />
-
-      <CampaignComposer open={composerOpen} onClose={() => setComposerOpen(false)} />
-    </div>
-  )
-}

package/src/views/ChannelDetailView.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import { Target, Percent, DollarSign, Users } from 'lucide-react'
-import type { ColumnDef } from '@tanstack/react-table'
-import { DataTable, SubpageHeader } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { useMarketingConfig, useMarketingStore, useChannelLookup, useMarketingProvider } from '../MarketingContext'
-import { formatCurrency, formatNumber, formatPercent } from '../format'
-import { KpiCard, StatusBadge } from '../components/MarketingBits'
-import type { Campaign } from '../types'
-
-export function ChannelDetailView({ channelId, onBack }: { channelId: string; onBack: () => void }) {
-  const t = useTranslation()
-  const { conversion, currency, labels } = useMarketingConfig()
-  const range = useMarketingStore((s) => s.range)
-  const channels = useMarketingStore((s) => s.channels)
-  const lookup = useChannelLookup()
-  const provider = useMarketingProvider()
-  const [campaigns, setCampaigns] = React.useState<Campaign[]>([])
-
-  React.useEffect(() => {
-    void provider.listCampaigns({ range, channelId }).then(setCampaigns)
-  }, [provider, range, channelId])
-
-  const perf = channels.find((c) => c.channelId === channelId)
-  const channel = lookup.get(channelId)
-
-  const columns = React.useMemo<ColumnDef<Campaign, any>[]>(() => [
-    { accessorKey: 'name', header: t('marketing.col.campaign'), cell: ({ getValue }) => <span className="font-medium text-foreground">{getValue() as string}</span> },
-    { accessorKey: 'conversions', header: conversion.labelPlural, cell: ({ getValue }) => <span className="text-muted-foreground">{formatNumber(getValue() as number)}</span> },
-    { id: 'cvr', accessorFn: (c) => (c.reach > 0 ? (c.conversions / c.reach) * 100 : 0), header: t('marketing.col.cvr'), cell: ({ getValue }) => <span className="text-muted-foreground">{formatPercent(getValue() as number)}</span> },
-    { accessorKey: 'spend', header: t('marketing.col.spend'), cell: ({ getValue }) => { const v = getValue() as number; return <span className="text-muted-foreground">{v > 0 ? formatCurrency(v, currency) : '—'}</span> } },
-    { accessorKey: 'status', header: t('marketing.col.status'), cell: ({ getValue }) => <StatusBadge status={getValue() as Campaign['status']} /> },
-  ], [t, conversion.labelPlural, currency])
-
-  return (
-    <div className="mx-auto max-w-6xl space-y-6">
-      <SubpageHeader
-        title={channel?.label ?? channelId}
-        subtitle={channel?.kind}
-        onBack={onBack}
-        parentLabel={labels.channels}
-      />
-
-      {perf && (
-        <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
-          <KpiCard icon={Users} label={t('marketing.metric.reach')} value={formatNumber(perf.reach)} />
-          <KpiCard icon={Target} label={conversion.labelPlural} value={formatNumber(perf.conversions)} />
-          <KpiCard icon={Percent} label={t('marketing.metric.cvr')} value={formatPercent(perf.cvr)} />
-          <KpiCard icon={DollarSign} label={t('marketing.col.cpa')} value={perf.cpa > 0 ? formatCurrency(perf.cpa, currency) : '—'} sub={perf.spend > 0 ? `${formatCurrency(perf.spend, currency)} ${t('marketing.metric.spend')}` : '—'} />
-        </div>
-      )}
-
-      <div className="space-y-2">
-        <h2 className="text-sm font-semibold text-foreground">{t('marketing.channels.campaignsOn')}</h2>
-        <DataTable columns={columns} data={campaigns} emptyMessage={t('marketing.channels.noCampaigns')} />
-      </div>
-    </div>
-  )
-}

package/src/views/ChannelsView.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import { ChevronRight } from 'lucide-react'
-import type { ColumnDef } from '@tanstack/react-table'
-import { DataTable } from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { useMarketingConfig, useMarketingStore } from '../MarketingContext'
-import { formatCurrency, formatNumber, formatPercent } from '../format'
-import { RangeTabs, ChannelCell } from '../components/MarketingBits'
-import type { ChannelPerformance } from '../types'
-
-export function ChannelsView({ onOpen }: { onOpen: (channelId: string) => void }) {
-  const t = useTranslation()
-  const { conversion, currency } = useMarketingConfig()
-  const channels = useMarketingStore((s) => s.channels)
-
-  // Default ordering by conversions; DataTable lets the user re-sort any column.
-  const sorted = [...channels].sort((a, b) => b.conversions - a.conversions)
-
-  const columns = React.useMemo<ColumnDef<ChannelPerformance, any>[]>(() => [
-    { accessorKey: 'channelId', header: t('marketing.col.channel'), cell: ({ getValue }) => <ChannelCell channelId={getValue() as string} /> },
-    { accessorKey: 'reach', header: t('marketing.col.reach'), cell: ({ getValue }) => <span className="text-muted-foreground">{formatNumber(getValue() as number)}</span> },
-    { accessorKey: 'leads', header: t('marketing.col.leads'), cell: ({ getValue }) => <span className="text-muted-foreground">{formatNumber(getValue() as number)}</span> },
-    { accessorKey: 'conversions', header: conversion.labelPlural, cell: ({ getValue }) => <span className="font-medium text-foreground">{formatNumber(getValue() as number)}</span> },
-    { accessorKey: 'cvr', header: t('marketing.col.cvr'), cell: ({ getValue }) => <span className="text-muted-foreground">{formatPercent(getValue() as number)}</span> },
-    { accessorKey: 'spend', header: t('marketing.col.spend'), cell: ({ getValue }) => { const v = getValue() as number; return <span className="text-muted-foreground">{v > 0 ? formatCurrency(v, currency) : '—'}</span> } },
-    { accessorKey: 'cpa', header: t('marketing.col.cpa'), cell: ({ getValue }) => { const v = getValue() as number; return <span className="text-muted-foreground">{v > 0 ? formatCurrency(v, currency) : '—'}</span> } },
-    { accessorKey: 'value', header: conversion.valueLabel, cell: ({ getValue }) => <span className="text-muted-foreground">{formatCurrency(getValue() as number, currency)}</span> },
-    { id: 'open', header: '', enableSorting: false, cell: () => <ChevronRight className="h-4 w-4 text-muted-foreground" /> },
-  ], [t, conversion.labelPlural, conversion.valueLabel, currency])
-
-  return (
-    <div className="mx-auto max-w-6xl space-y-4">
-      <div className="flex items-center justify-between">
-        <p className="text-sm text-muted-foreground">{t('marketing.channels.subtitle')}</p>
-        <RangeTabs />
-      </div>
-
-      <DataTable
-        columns={columns}
-        data={sorted}
-        onRowClick={(row) => onOpen(row.channelId)}
-        emptyMessage={t('marketing.channels.subtitle')}
-      />
-    </div>
-  )
-}

package/src/views/FunnelView.tsx

@@ -1,56 +0,0 @@
-import React from 'react'
-import { useTranslation } from '@fayz-ai/core'
-import { useMarketingConfig, useMarketingStore } from '../MarketingContext'
-import { formatNumber, formatPercent } from '../format'
-import { RangeTabs } from '../components/MarketingBits'
-
-export function FunnelView() {
-  const t = useTranslation()
-  const { conversion } = useMarketingConfig()
-  const funnel = useMarketingStore((s) => s.funnel)
-  const max = Math.max(...funnel.map((s) => s.count), 1)
-
-  return (
-    <div className="mx-auto max-w-4xl space-y-4">
-      <div className="flex items-center justify-between">
-        <p className="text-sm text-muted-foreground">
-          {t('marketing.funnel.subtitlePrefix')} {conversion.label.toLowerCase()}
-        </p>
-        <RangeTabs />
-      </div>
-
-      <div className="rounded-card border border-border bg-card p-5">
-        <div className="space-y-3">
-          {funnel.map((stage, i) => {
-            const pct = max > 0 ? Math.max((stage.count / max) * 100, 4) : 0
-            const prev = funnel[i - 1]
-            const stepRate = prev && prev.count > 0 ? (stage.count / prev.count) * 100 : null
-            return (
-              <div key={stage.id}>
-                <div className="mb-1 flex items-center justify-between text-sm">
-                  <span className="font-medium text-foreground">{stage.label}</span>
-                  <span className="text-muted-foreground">
-                    {formatNumber(stage.count)}
-                    {stepRate != null && <span className="ml-2 text-xs">({formatPercent(stepRate, 0)} {t('marketing.funnel.ofPrev')})</span>}
-                  </span>
-                </div>
-                <div className="h-9 overflow-hidden rounded-md bg-muted/40">
-                  <div className="h-full rounded-md" style={{ width: `${pct}%`, backgroundColor: stage.color + '33', borderLeft: `3px solid ${stage.color}` }} />
-                </div>
-              </div>
-            )
-          })}
-        </div>
-
-        <div className="mt-5 border-t border-border pt-4 text-sm">
-          <span className="text-muted-foreground">{t('marketing.funnel.overall')}: </span>
-          <span className="font-semibold text-foreground">
-            {funnel.length > 1 && funnel[0].count > 0
-              ? formatPercent((funnel[funnel.length - 1].count / funnel[0].count) * 100)
-              : '—'}
-          </span>
-        </div>
-      </div>
-    </div>
-  )
-}

package/src/views/LandingPageComposer.tsx

@@ -1,201 +0,0 @@
-import React from 'react'
-import { Sparkles } from 'lucide-react'
-import {
-  Modal, ModalContent, ModalHeader, ModalTitle, ModalBody, ModalFooter,
-  Button, Input, Badge, SegmentedControl,
-  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
-} from '@fayz-ai/ui'
-import { useTranslation } from '@fayz-ai/core'
-import { useMarketingStore } from '../MarketingContext'
-import type { LandingPage, LandingPageStatus } from '../types'
-
-/** 'Consulta capilar' → 'consulta-capilar' — the shape CRM tag slugs take. */
-function slugify(value: string): string {
-  return value
-    .normalize('NFD').replace(/[\u0300-\u036f]/g, '')
-    .toLowerCase().trim()
-    .replace(/[^a-z0-9:]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-}
-
-export function LandingPageComposer({
-  open, page, onClose,
-}: { open: boolean; page?: LandingPage | null; onClose: () => void }) {
-  const t = useTranslation()
-  const sites = useMarketingStore((s) => s.sites)
-  const leadTags = useMarketingStore((s) => s.leadTags)
-  const saveLandingPage = useMarketingStore((s) => s.saveLandingPage)
-
-  const [siteId, setSiteId] = React.useState('')
-  const [name, setName] = React.useState('')
-  const [route, setRoute] = React.useState('')
-  const [status, setStatus] = React.useState<LandingPageStatus>('live')
-  const [prompt, setPrompt] = React.useState('')
-  const [tags, setTags] = React.useState<string[]>([])
-  const [newTag, setNewTag] = React.useState('')
-  const [saving, setSaving] = React.useState(false)
-
-  React.useEffect(() => {
-    if (!open) return
-    setSiteId(page?.siteId ?? sites[0]?.id ?? '')
-    setName(page?.name ?? '')
-    setRoute(page?.route ?? '')
-    setStatus(page?.status ?? 'live')
-    setPrompt(page?.prompt ?? '')
-    setTags(page?.leadTags ?? [])
-    setNewTag('')
-  }, [open, page, sites])
-
-  const site = sites.find((s) => s.id === siteId)
-  const previewPath = route.trim() ? (route.trim().startsWith('/') ? route.trim() : `/${route.trim()}`) : ''
-
-  // The catalog plus whatever this page already carries: a slug used by a
-  // campaign before anyone curated the vocabulary is still a real tag.
-  const options = React.useMemo(() => {
-    const byslug = new Map(leadTags.map((tag) => [tag.slug, tag.name]))
-    for (const slug of tags) if (!byslug.has(slug)) byslug.set(slug, slug)
-    return [...byslug].map(([slug, label]) => ({ slug, label }))
-  }, [leadTags, tags])
-
-  function toggleTag(slug: string) {
-    setTags((current) => (current.includes(slug) ? current.filter((s) => s !== slug) : [...current, slug]))
-  }
-
-  function addTag() {
-    const slug = slugify(newTag)
-    if (!slug) return
-    setTags((current) => (current.includes(slug) ? current : [...current, slug]))
-    setNewTag('')
-  }
-
-  async function handleSave() {
-    if (!siteId || !name.trim() || !route.trim()) return
-    setSaving(true)
-    try {
-      await saveLandingPage({
-        id: page?.id,
-        siteId,
-        name: name.trim(),
-        route: route.trim(),
-        leadTags: tags,
-        status,
-        prompt: status === 'planned' ? prompt.trim() || undefined : undefined,
-      })
-      onClose()
-    } finally {
-      setSaving(false)
-    }
-  }
-
-  return (
-    <Modal open={open} onOpenChange={(o) => { if (!o) onClose() }}>
-      <ModalContent size="md">
-        <ModalHeader>
-          <ModalTitle>{page ? t('marketing.landing.edit') : t('marketing.landing.new')}</ModalTitle>
-        </ModalHeader>
-        <ModalBody className="space-y-4">
-          <label className="block space-y-1.5">
-            <span className="text-sm font-medium text-foreground">{t('marketing.landing.site')}</span>
-            <Select value={siteId} onValueChange={setSiteId}>
-              <SelectTrigger><SelectValue placeholder={t('marketing.landing.sitePlaceholder')} /></SelectTrigger>
-              <SelectContent>
-                {sites.map((s) => (
-                  <SelectItem key={s.id} value={s.id}>
-                    {s.url ? `${s.name} · ${s.url.replace(/^https?:\/\//, '')}` : s.name}
-                  </SelectItem>
-                ))}
-              </SelectContent>
-            </Select>
-          </label>
-
-          <label className="block space-y-1.5">
-            <span className="text-sm font-medium text-foreground">{t('marketing.landing.name')}</span>
-            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t('marketing.landing.namePlaceholder')} />
-          </label>
-
-          <label className="block space-y-1.5">
-            <span className="text-sm font-medium text-foreground">{t('marketing.landing.route')}</span>
-            <Input value={route} onChange={(e) => setRoute(e.target.value)} placeholder="/lp-capilar" />
-            {site?.url && previewPath ? (
-              <span className="block text-xs text-muted-foreground">
-                {site.url.replace(/\/+$/, '')}{previewPath}
-              </span>
-            ) : null}
-          </label>
-
-          <div className="space-y-1.5">
-            <span className="text-sm font-medium text-foreground">{t('marketing.landing.status')}</span>
-            <SegmentedControl
-              value={status}
-              onChange={(v) => setStatus(v as LandingPageStatus)}
-              options={[
-                { value: 'live', label: t('marketing.landing.statusLive') },
-                { value: 'planned', label: t('marketing.landing.statusPlanned') },
-              ]}
-            />
-          </div>
-
-          {status === 'planned' ? (
-            <div className="space-y-1.5">
-              <div className="flex items-center justify-between gap-2">
-                <span className="text-sm font-medium text-foreground">{t('marketing.landing.prompt')}</span>
-                {site?.editorUrl ? (
-                  <button
-                    type="button"
-                    onClick={() => window.open(site.editorUrl!, '_blank', 'noopener,noreferrer')}
-                    className="inline-flex items-center gap-1 text-xs font-medium text-primary hover:underline"
-                  >
-                    <Sparkles className="h-3.5 w-3.5" /> {t('marketing.landing.buildWithFayz')}
-                  </button>
-                ) : null}
-              </div>
-              <textarea
-                value={prompt}
-                onChange={(e) => setPrompt(e.target.value)}
-                rows={3}
-                placeholder={t('marketing.landing.promptPlaceholder')}
-                className="w-full rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground outline-none focus:ring-2 focus:ring-ring"
-              />
-            </div>
-          ) : null}
-
-          {/* One field, not a chip list plus a form: the catalog and the free
-              slug live in the same box, like any tag picker. */}
-          <div className="space-y-1.5">
-            <span className="text-sm font-medium text-foreground">{t('marketing.landing.leadTag')}</span>
-            <div className="flex flex-wrap items-center gap-1.5 rounded-md border border-border bg-background px-2 py-2 focus-within:ring-2 focus-within:ring-ring">
-              {options.map((opt) => {
-                const active = tags.includes(opt.slug)
-                return (
-                  <Badge
-                    key={opt.slug}
-                    variant={active ? 'default' : 'outline'}
-                    className="cursor-pointer text-xs"
-                    onClick={() => toggleTag(opt.slug)}
-                  >
-                    {opt.label}
-                  </Badge>
-                )
-              })}
-              <input
-                value={newTag}
-                onChange={(e) => setNewTag(e.target.value)}
-                onKeyDown={(e) => { if (e.key === 'Enter') { e.preventDefault(); addTag() } }}
-                onBlur={addTag}
-                placeholder={t('marketing.landing.leadTagPlaceholder')}
-                className="min-w-[8rem] flex-1 border-0 bg-transparent px-1 text-xs text-foreground outline-none placeholder:text-muted-foreground"
-              />
-            </div>
-            <span className="block text-xs text-muted-foreground">{t('marketing.landing.leadTagHint')}</span>
-          </div>
-        </ModalBody>
-        <ModalFooter>
-          <Button variant="outline" onClick={onClose}>{t('marketing.composer.cancel')}</Button>
-          <Button onClick={handleSave} disabled={saving || !siteId || !name.trim() || !route.trim()}>
-            {page ? t('marketing.landing.save') : t('marketing.landing.create')}
-          </Button>
-        </ModalFooter>
-      </ModalContent>
-    </Modal>
-  )
-}

package/src/views/LandingPagesView.tsx

@@ -1,172 +0,0 @@
-import React from 'react'
-import { MousePointerClick, Layers, Users, Plus, Pencil, Trash2, ExternalLink, Sparkles } from 'lucide-react'
-import type { ColumnDef } from '@tanstack/react-table'
-import { Button, DataTable } from '@fayz-ai/ui'
-import { PermissionGate } from '@fayz-ai/saas'
-import { useTranslation } from '@fayz-ai/core'
-import { useMarketingStore } from '../MarketingContext'
-import { formatNumber, formatPercent } from '../format'
-import { KpiCard, RangeTabs } from '../components/MarketingBits'
-import { LandingPageComposer } from './LandingPageComposer'
-import type { LandingPagePerf } from '../types'
-
-export function LandingPagesView() {
-  const t = useTranslation()
-  const pages = useMarketingStore((s) => s.landingPages)
-  const deleteLandingPage = useMarketingStore((s) => s.deleteLandingPage)
-  const [editing, setEditing] = React.useState<LandingPagePerf | null>(null)
-  const [composerOpen, setComposerOpen] = React.useState(false)
-
-  // Visits are only known for pages whose host reports them; a page with an
-  // unknown count must not drag the total down to a wrong number.
-  const measured = pages.filter((p) => p.visits !== null)
-  const totalVisits = measured.reduce((s, p) => s + (p.visits ?? 0), 0)
-  const totalLeads = pages.reduce((s, p) => s + p.conversions, 0)
-
-  function openNew() {
-    setEditing(null)
-    setComposerOpen(true)
-  }
-
-  function openEdit(page: LandingPagePerf) {
-    setEditing(page)
-    setComposerOpen(true)
-  }
-
-  const columns = React.useMemo<ColumnDef<LandingPagePerf, any>[]>(() => [
-    {
-      accessorKey: 'name',
-      header: t('marketing.col.page'),
-      cell: ({ row }) => (
-        <div className="min-w-0">
-          <span className="flex items-center gap-1.5 truncate font-medium text-foreground">
-            {row.original.name}
-            {row.original.status === 'planned' ? (
-              <span className="rounded-full bg-amber-100 px-2 py-0.5 text-[10px] font-semibold text-amber-800">
-                {t('marketing.landing.statusPlanned')}
-              </span>
-            ) : null}
-          </span>
-          <span className="block truncate text-xs text-muted-foreground">{row.original.siteName}</span>
-        </div>
-      ),
-    },
-    {
-      accessorKey: 'route',
-      header: t('marketing.col.route'),
-      cell: ({ row }) => (
-        <a
-          href={row.original.url}
-          target="_blank"
-          rel="noreferrer"
-          onClick={(e) => e.stopPropagation()}
-          className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground hover:underline"
-        >
-          {row.original.route}
-          <ExternalLink className="h-3 w-3" />
-        </a>
-      ),
-    },
-    {
-      accessorKey: 'leadTags',
-      header: t('marketing.col.leadTag'),
-      cell: ({ getValue }) => {
-        const tags = (getValue() as string[]) ?? []
-        if (!tags.length) return <span className="text-muted-foreground">—</span>
-        return (
-          <div className="flex flex-wrap gap-1">
-            {tags.map((tag) => (
-              <span key={tag} className="rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">{tag}</span>
-            ))}
-          </div>
-        )
-      },
-    },
-    {
-      accessorKey: 'visits',
-      header: t('marketing.col.visits'),
-      cell: ({ getValue }) => {
-        const visits = getValue() as number | null
-        return visits === null
-          ? <span className="text-muted-foreground" title={t('marketing.landing.visitsPending')}>—</span>
-          : <span className="text-muted-foreground">{formatNumber(visits)}</span>
-      },
-    },
-    {
-      accessorKey: 'conversions',
-      header: t('marketing.col.leads'),
-      cell: ({ getValue }) => <span className="font-medium text-foreground">{formatNumber(getValue() as number)}</span>,
-    },
-    {
-      accessorKey: 'cvr',
-      header: t('marketing.col.cvr'),
-      cell: ({ getValue }) => {
-        const cvr = getValue() as number | null
-        return cvr === null
-          ? <span className="text-muted-foreground">—</span>
-          : <span className="text-muted-foreground">{formatPercent(cvr)}</span>
-      },
-    },
-    {
-      id: 'actions', header: '', enableSorting: false,
-      cell: ({ row }) => (
-        <div className="flex items-center justify-end gap-1">
-          {row.original.status === 'planned' && row.original.editorUrl ? (
-            <button
-              onClick={(e) => { e.stopPropagation(); window.open(row.original.editorUrl!, '_blank', 'noopener,noreferrer') }}
-              className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-              title={t('marketing.landing.buildWithFayz')}
-            >
-              <Sparkles className="h-4 w-4" />
-            </button>
-          ) : null}
-          <button
-            onClick={(e) => { e.stopPropagation(); openEdit(row.original) }}
-            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
-            title={t('marketing.landing.edit')}
-          >
-            <Pencil className="h-4 w-4" />
-          </button>
-          <button
-            onClick={(e) => { e.stopPropagation(); void deleteLandingPage(row.original.id) }}
-            className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-destructive/10 hover:text-destructive"
-            title={t('marketing.landing.delete')}
-          >
-            <Trash2 className="h-4 w-4" />
-          </button>
-        </div>
-      ),
-    },
-  ], [t, deleteLandingPage])
-
-  return (
-    <div className="mx-auto max-w-6xl space-y-4">
-      <div className="flex items-center justify-end gap-2">
-        <RangeTabs />
-        <PermissionGate feature="marketing" action="create">
-          <Button onClick={openNew}>
-            <Plus className="mr-1.5 h-4 w-4" /> {t('marketing.landing.new')}
-          </Button>
-        </PermissionGate>
-      </div>
-
-      <div className="grid grid-cols-3 gap-4">
-        <KpiCard icon={Layers} label={t('marketing.metric.pages')} value={String(pages.length)} />
-        <KpiCard
-          icon={MousePointerClick}
-          label={t('marketing.metric.totalVisits')}
-          value={measured.length > 0 ? formatNumber(totalVisits) : '—'}
-        />
-        <KpiCard icon={Users} label={t('marketing.metric.leads')} value={formatNumber(totalLeads)} />
-      </div>
-
-      <DataTable columns={columns} data={pages} emptyMessage={t('marketing.landing.empty')} />
-
-      {measured.length < pages.length ? (
-        <p className="text-xs text-muted-foreground">{t('marketing.landing.visitsPending')}</p>
-      ) : null}
-
-      <LandingPageComposer open={composerOpen} page={editing} onClose={() => { setComposerOpen(false); setEditing(null) }} />
-    </div>
-  )
-}

package/src/views/OverviewView.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import { DashboardCanvas } from '@fayz-ai/ui'
-import { useMarketingStore } from '../MarketingContext'
-import type { DateRangeKey } from '../types'
-
-/**
- * Marketing overview. KPIs, channel mix and the campaigns table are registered
- * dashboard widgets (see ./dashboardWidgets) rendered through DashboardCanvas —
- * the same widgets also surface on the global app home. The sticky range control
- * drives the marketing store's range, which refetches all widgets' data.
- */
-export function OverviewView() {
-  const setRange = useMarketingStore((s) => s.setRange)
-  const range = useMarketingStore((s) => s.range)
-  return (
-    <DashboardCanvas
-      surface="plugin-home"
-      domain="marketing"
-      showHeader={false}
-      className="mx-auto max-w-6xl space-y-6"
-      range={{ default: range, onChange: (r) => void setRange(r as DateRangeKey) }}
-    />
-  )
-}