@fayz-ai/plugin-marketing 0.1.1

package/src/types.ts

@@ -0,0 +1,114 @@
+// ---------------------------------------------------------------------------
+// @fayz-ai/plugin-marketing — domain model for ACQUISITION & CONVERSION
+// analytics. The plugin is vertical-agnostic: each app supplies a
+// `ConversionModel` (what a conversion is + where it's read from) and a set of
+// `AcquisitionChannel`s, and the same analytics engine adapts.
+// ---------------------------------------------------------------------------
+
+export type AcquisitionChannelKind =
+  | 'paid'
+  | 'organic'
+  | 'social'
+  | 'referral'
+  | 'direct'
+  | 'outbound'
+
+export interface AcquisitionChannel {
+  id: string
+  label: string
+  /** lucide-react icon name (resolved in components/icons.ts) */
+  icon: string
+  kind: AcquisitionChannelKind
+}
+
+/** Where attribution reads conversions from (per vertical). */
+export type ConversionSource = 'crm' | 'agenda' | 'orders' | 'custom'
+
+export interface ConversionModel {
+  id: string
+  /** singular noun for one conversion, e.g. 'Won deal' | 'Booking' | 'Order' */
+  label: string
+  labelPlural: string
+  /** label for the monetary value, e.g. 'Pipeline value' | 'Revenue' */
+  valueLabel: string
+  source: ConversionSource
+  /** average monetary value of a single conversion (mock + estimates) */
+  avgValue: number
+}
+
+export type CampaignStatus = 'active' | 'paused' | 'ended' | 'draft'
+
+/** An acquisition campaign running on a channel, with attributed performance. */
+export interface Campaign {
+  id: string
+  name: string
+  channelId: string
+  status: CampaignStatus
+  start: string
+  end?: string
+  spend: number
+  /** visits / sessions / sends reached (NOT raw impressions) */
+  reach: number
+  leads: number
+  conversions: number
+  /** attributed monetary value */
+  value: number
+}
+
+/** Per-channel rollup used by the Channels view + Overview. */
+export interface ChannelPerformance {
+  channelId: string
+  reach: number
+  leads: number
+  conversions: number
+  spend: number
+  value: number
+  /** conversions / reach * 100 */
+  cvr: number
+  /** spend / conversions (0 when no spend) */
+  cpa: number
+}
+
+export interface FunnelStage {
+  id: string
+  label: string
+  count: number
+  color: string
+}
+
+export interface LandingPagePerf {
+  id: string
+  name: string
+  type: 'Funnel' | 'Landing page' | 'Website'
+  visits: number
+  conversions: number
+  /** conversions / visits * 100 */
+  cvr: number
+}
+
+export interface MarketingOverview {
+  conversions: number
+  conversionsPrev: number
+  cvr: number
+  cvrPrev: number
+  spend: number
+  cpa: number
+  value: number
+  topChannelId: string | null
+  /** conversions per channel for the mix bars */
+  channelMix: Array<{ channelId: string; conversions: number }>
+}
+
+export type DateRangeKey = '7d' | '30d' | '90d'
+
+export interface MarketingQuery {
+  range: DateRangeKey
+  /** optionally scope to a single channel (channel detail) */
+  channelId?: string
+}
+
+export const DATE_RANGE_LABELS: Record<DateRangeKey, string> = {
+  '7d': 'Last 7 days',
+  '30d': 'Last 30 days',
+  '90d': 'Last 90 days',
+}

package/src/views/CampaignComposer.tsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import {
+  Modal, ModalContent, ModalHeader, ModalTitle, ModalBody, ModalFooter,
+  Button, Input,
+  Select, SelectTrigger, SelectValue, SelectContent, SelectItem,
+} from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import { useMarketingConfig, useMarketingStore } from '../MarketingContext'
+import type { CampaignStatus } from '../types'
+
+const STATUSES: CampaignStatus[] = ['draft', 'active', 'paused']
+
+export function CampaignComposer({ open, onClose }: { open: boolean; onClose: () => void }) {
+  const t = useTranslation()
+  const { channels } = useMarketingConfig()
+  const saveCampaign = useMarketingStore((s) => s.saveCampaign)
+
+  const [name, setName] = React.useState('')
+  const [channelId, setChannelId] = React.useState(channels[0]?.id ?? '')
+  const [status, setStatus] = React.useState<CampaignStatus>('active')
+  const [spend, setSpend] = React.useState('')
+  const [saving, setSaving] = React.useState(false)
+
+  React.useEffect(() => {
+    if (open) {
+      setName(''); setChannelId(channels[0]?.id ?? ''); setStatus('active'); setSpend('')
+    }
+  }, [open, channels])
+
+  async function handleSave() {
+    if (!name.trim() || !channelId) return
+    setSaving(true)
+    await saveCampaign({
+      name: name.trim(),
+      channelId,
+      status,
+      start: new Date().toISOString(),
+      spend: Number(spend) || 0,
+    })
+    setSaving(false)
+    onClose()
+  }
+
+  return (
+    <Modal open={open} onOpenChange={(o) => { if (!o) onClose() }}>
+      <ModalContent size="md">
+        <ModalHeader>
+          <ModalTitle>{t('marketing.composer.title')}</ModalTitle>
+        </ModalHeader>
+        <ModalBody className="space-y-4">
+          <label className="block space-y-1.5">
+            <span className="text-sm font-medium text-foreground">{t('marketing.composer.name')}</span>
+            <Input value={name} onChange={(e) => setName(e.target.value)} placeholder={t('marketing.composer.namePlaceholder')} />
+          </label>
+
+          <label className="block space-y-1.5">
+            <span className="text-sm font-medium text-foreground">{t('marketing.composer.channel')}</span>
+            <Select value={channelId} onValueChange={setChannelId}>
+              <SelectTrigger><SelectValue placeholder={t('marketing.composer.channelPlaceholder')} /></SelectTrigger>
+              <SelectContent>
+                {channels.map((c) => <SelectItem key={c.id} value={c.id}>{c.label}</SelectItem>)}
+              </SelectContent>
+            </Select>
+          </label>
+
+          <div className="grid grid-cols-2 gap-3">
+            <label className="block space-y-1.5">
+              <span className="text-sm font-medium text-foreground">{t('marketing.composer.status')}</span>
+              <Select value={status} onValueChange={(v) => setStatus(v as CampaignStatus)}>
+                <SelectTrigger><SelectValue /></SelectTrigger>
+                <SelectContent>
+                  {STATUSES.map((s) => <SelectItem key={s} value={s} className="capitalize">{t(`marketing.status.${s}`)}</SelectItem>)}
+                </SelectContent>
+              </Select>
+            </label>
+            <label className="block space-y-1.5">
+              <span className="text-sm font-medium text-foreground">{t('marketing.composer.budget')}</span>
+              <Input type="number" min={0} value={spend} onChange={(e) => setSpend(e.target.value)} placeholder="0" />
+            </label>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant="outline" onClick={onClose}>{t('marketing.composer.cancel')}</Button>
+          <Button onClick={handleSave} disabled={saving || !name.trim()}>{t('marketing.composer.create')}</Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

package/src/views/CampaignsView.tsx

@@ -0,0 +1,56 @@
+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 { 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 />
+          <Button onClick={() => setComposerOpen(true)}><Plus className="mr-1.5 h-4 w-4" /> {t('marketing.campaigns.new')}</Button>
+        </div>
+      </div>
+
+      <DataTable columns={columns} data={campaigns} emptyMessage={t('marketing.campaigns.empty')} />
+
+      <CampaignComposer open={composerOpen} onClose={() => setComposerOpen(false)} />
+    </div>
+  )
+}

package/src/views/ChannelDetailView.tsx

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,46 @@
+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

@@ -0,0 +1,56 @@
+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/LandingPagesView.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { MousePointerClick, Layers, Percent } from 'lucide-react'
+import type { ColumnDef } from '@tanstack/react-table'
+import { DataTable } from '@fayz-ai/ui'
+import { useTranslation } from '@fayz-ai/core'
+import { useMarketingStore } from '../MarketingContext'
+import { formatNumber, formatPercent } from '../format'
+import { KpiCard, RangeTabs } from '../components/MarketingBits'
+import type { LandingPagePerf } from '../types'
+
+const TYPE_STYLE: Record<string, string> = {
+  Funnel: 'bg-indigo-100 text-indigo-700',
+  'Landing page': 'bg-pink-100 text-pink-700',
+  Website: 'bg-sky-100 text-sky-700',
+}
+
+export function LandingPagesView() {
+  const t = useTranslation()
+  const pages = useMarketingStore((s) => s.landingPages)
+
+  const totalVisits = pages.reduce((s, p) => s + p.visits, 0)
+  const totalConv = pages.reduce((s, p) => s + p.conversions, 0)
+  const avgCvr = totalVisits > 0 ? (totalConv / totalVisits) * 100 : 0
+
+  const columns = React.useMemo<ColumnDef<LandingPagePerf, any>[]>(() => [
+    { accessorKey: 'name', header: t('marketing.col.page'), cell: ({ getValue }) => <span className="font-medium text-foreground">{getValue() as string}</span> },
+    { accessorKey: 'type', header: t('marketing.col.type'), cell: ({ getValue }) => { const v = getValue() as string; return <span className={`rounded-full px-2 py-0.5 text-xs font-medium ${TYPE_STYLE[v] ?? 'bg-muted text-muted-foreground'}`}>{v}</span> } },
+    { accessorKey: 'visits', header: t('marketing.col.visits'), cell: ({ getValue }) => <span className="text-muted-foreground">{formatNumber(getValue() as number)}</span> },
+    { accessorKey: 'conversions', header: t('marketing.col.conversions'), 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> },
+  ], [t])
+
+  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.landing.subtitle')}</p>
+        <RangeTabs />
+      </div>
+
+      <div className="grid grid-cols-3 gap-4">
+        <KpiCard icon={MousePointerClick} label={t('marketing.metric.totalVisits')} value={formatNumber(totalVisits)} />
+        <KpiCard icon={Layers} label={t('marketing.metric.pages')} value={String(pages.length)} />
+        <KpiCard icon={Percent} label={t('marketing.metric.avgConversion')} value={formatPercent(avgCvr)} />
+      </div>
+
+      <DataTable columns={columns} data={pages} emptyMessage={t('marketing.landing.subtitle')} />
+    </div>
+  )
+}

package/src/views/OverviewView.tsx

@@ -0,0 +1,24 @@
+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) }}
+    />
+  )
+}

package/src/views/SettingsView.tsx

@@ -0,0 +1,72 @@
+import React from 'react'
+import { useTranslation } from '@fayz-ai/core'
+import { SettingsGroup, ToggleRow, SelectRow } from '@fayz-ai/saas'
+import { useMarketingConfig } from '../MarketingContext'
+
+const SOURCE_OPTIONS = [
+  { value: 'crm', label: 'CRM' },
+  { value: 'agenda', label: 'Agenda' },
+  { value: 'orders', label: 'Orders' },
+  { value: 'custom', label: 'Custom' },
+]
+
+export function SettingsView() {
+  const t = useTranslation()
+  const { conversion, channels } = useMarketingConfig()
+
+  // Local UI state — mock toggles (no backend yet), mirrors other plugins' settings.
+  const [source, setSource] = React.useState(conversion.source)
+  const [trackValue, setTrackValue] = React.useState(true)
+  const [autoSync, setAutoSync] = React.useState(true)
+  const [assisted, setAssisted] = React.useState(false)
+  const [tracked, setTracked] = React.useState<Record<string, boolean>>(
+    () => Object.fromEntries(channels.map((c) => [c.id, true])),
+  )
+
+  return (
+    <div className="space-y-4">
+      <SettingsGroup title={t('marketing.settings.conversionModel')} description={t('marketing.settings.conversionModelDesc')}>
+        <SelectRow
+          label={t('marketing.settings.attributedFrom')}
+          description={conversion.label}
+          value={source}
+          options={SOURCE_OPTIONS}
+          onChange={(v) => setSource(v as typeof source)}
+        />
+        <ToggleRow
+          label={t('marketing.settings.trackValue')}
+          description={t('marketing.settings.trackValueDesc')}
+          checked={trackValue}
+          onChange={setTrackValue}
+        />
+      </SettingsGroup>
+
+      <SettingsGroup title={t('marketing.settings.channels')} description={t('marketing.settings.channelsDesc')}>
+        {channels.map((c) => (
+          <ToggleRow
+            key={c.id}
+            label={c.label}
+            description={t('marketing.settings.channelTrackDesc')}
+            checked={tracked[c.id] ?? true}
+            onChange={(v) => setTracked((prev) => ({ ...prev, [c.id]: v }))}
+          />
+        ))}
+      </SettingsGroup>
+
+      <SettingsGroup title={t('marketing.settings.attribution')} description={t('marketing.settings.attributionDesc')}>
+        <ToggleRow
+          label={t('marketing.settings.autoSync')}
+          description={t('marketing.settings.autoSyncDesc')}
+          checked={autoSync}
+          onChange={setAutoSync}
+        />
+        <ToggleRow
+          label={t('marketing.settings.assisted')}
+          description={t('marketing.settings.assistedDesc')}
+          checked={assisted}
+          onChange={setAssisted}
+        />
+      </SettingsGroup>
+    </div>
+  )
+}