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

package/src/views/LandingPagesView.tsx

@@ -1,49 +1,172 @@
 import React from 'react'
-import { MousePointerClick, Layers, Percent } from 'lucide-react'
+import { MousePointerClick, Layers, Users, Plus, Pencil, Trash2, ExternalLink, Sparkles } from 'lucide-react'
 import type { ColumnDef } from '@tanstack/react-table'
-import { DataTable } from '@fayz-ai/ui'
+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'
 
-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 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)
 
-  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
+  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: ({ 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])
+    {
+      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-between">
-        <p className="text-sm text-muted-foreground">{t('marketing.landing.subtitle')}</p>
+      <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={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)} />
+        <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.subtitle')} />
+      <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>
   )
 }