spine-framework-cortex 0.1.1

package/pages/crm/AccountDetailPage.tsx

@@ -0,0 +1,393 @@
+import { useEffect, useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { apiFetch } from '@core/lib/api'
+import { Tabs, TabsList, TabsTrigger, TabsContent } from '@core/components/ui/tabs'
+import { Badge } from '@core/components/ui/badge'
+import { Skeleton } from '@core/components/ui/skeleton'
+import { Button } from '@core/components/ui/button'
+import { ScrollArea } from '@core/components/ui/scroll-area'
+import { Separator } from '@core/components/ui/separator'
+import { ArrowLeft, User, Ticket, Handshake, Activity, Heart, Funnel, TrendingUp, Target, Clock } from 'lucide-react'
+
+interface Account {
+  id: string
+  slug: string
+  display_name?: string
+  created_at: string
+  data?: {
+    segment?: string
+    lifecycle_stage?: string
+    lead_score?: number
+    temperature?: 'cold' | 'warm' | 'hot'
+    last_signal_at?: string
+    ratings?: {
+      anonymous?: { rating: number; raw_score: number }
+      identified?: { rating: number; raw_score: number }
+      engaged?: { rating: number; raw_score: number }
+    }
+    attribution?: {
+      anonymous_first_touch?: { referrer?: string; url?: string; at?: string }
+      identified_first_touch?: { referrer?: string; url?: string; at?: string }
+    }
+    queue?: {
+      pending_opportunity_id?: string
+      primary_opportunity_type?: string
+    }
+  }
+}
+
+interface Person {
+  id: string
+  email: string
+  full_name?: string
+  created_at: string
+}
+
+interface Item {
+  id: string
+  title: string
+  status?: string
+  data?: Record<string, any>
+  created_at: string
+}
+
+function PeopleTab({ accountId }: { accountId: string }) {
+  const [people, setPeople] = useState<Person[]>([])
+  const [loading, setLoading] = useState(true)
+  useEffect(() => {
+    apiFetch(`/api/admin-data?action=list&entity=people&account_id=${accountId}&limit=100`)
+      .then(r => r.json()).then(j => setPeople(Array.isArray(j?.data) ? j.data : Array.isArray(j) ? j : [])).catch(() => setPeople([])).finally(() => setLoading(false))
+  }, [accountId])
+  if (loading) return <div className="p-4 space-y-2">{Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}</div>
+  if (people.length === 0) return <p className="p-6 text-sm text-muted-foreground text-center">No people found.</p>
+  return (
+    <div className="divide-y">
+      {people.map(p => (
+        <div key={p.id} className="flex items-center gap-3 px-4 py-3">
+          <div className="h-8 w-8 rounded-full bg-muted flex items-center justify-center shrink-0">
+            <User className="h-4 w-4 text-muted-foreground" />
+          </div>
+          <div>
+            <p className="text-sm font-medium">{p.full_name || '—'}</p>
+            <p className="text-xs text-muted-foreground">{p.email}</p>
+          </div>
+          <p className="ml-auto text-xs text-muted-foreground">{new Date(p.created_at).toLocaleDateString()}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ItemsTab({ accountId, typeSlug, emptyText }: { accountId: string; typeSlug: string; emptyText: string }) {
+  const navigate = useNavigate()
+  const [items, setItems] = useState<Item[]>([])
+  const [loading, setLoading] = useState(true)
+  useEffect(() => {
+    apiFetch(`/api/admin-data?action=list&entity=items&type_slug=${typeSlug}&account_id=${accountId}&limit=100`)
+      .then(r => r.json()).then(j => setItems(Array.isArray(j?.data) ? j.data : Array.isArray(j) ? j : [])).catch(() => setItems([])).finally(() => setLoading(false))
+  }, [accountId, typeSlug])
+  if (loading) return <div className="p-4 space-y-2">{Array.from({ length: 3 }).map((_, i) => <Skeleton key={i} className="h-10 w-full" />)}</div>
+  if (items.length === 0) return <p className="p-6 text-sm text-muted-foreground text-center">{emptyText}</p>
+  return (
+    <div className="divide-y">
+      {items.map(item => (
+        <div key={item.id}
+          className="flex items-center gap-3 px-4 py-3 hover:bg-accent/50 cursor-pointer transition-colors"
+          onClick={() => typeSlug === 'support_ticket' ? navigate(`/cortex/support/${item.id}`) : typeSlug === 'deal' ? navigate(`/cortex/crm/deals/${item.id}`) : undefined}
+        >
+          <div className="flex-1 min-w-0">
+            <p className="text-sm font-medium truncate">{item.title}</p>
+            <p className="text-xs text-muted-foreground">{new Date(item.created_at).toLocaleDateString()}</p>
+          </div>
+          {item.status && <Badge variant="secondary">{item.status}</Badge>}
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function ActivityTab({ accountId }: { accountId: string }) {
+  const [items, setItems] = useState<Item[]>([])
+  const [loading, setLoading] = useState(true)
+  useEffect(() => {
+    Promise.all([
+      apiFetch(`/api/admin-data?action=list&entity=items&type_slug=marketing_touch&account_id=${accountId}&limit=20`).then(r => r.json()),
+      apiFetch(`/api/admin-data?action=list&entity=items&type_slug=site_visit&account_id=${accountId}&limit=20`).then(r => r.json()),
+      apiFetch(`/api/admin-data?action=list&entity=items&type_slug=support_ticket&account_id=${accountId}&limit=20`).then(r => r.json()),
+    ]).then(([tor, vor, tkr]) => {
+      const touches = tor?.data ?? tor
+      const visits = vor?.data ?? vor
+      const tickets = tkr?.data ?? tkr
+      const all = [...(touches || []), ...(visits || []), ...(tickets || [])]
+        .sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+      setItems(all)
+    }).catch(() => setItems([])).finally(() => setLoading(false))
+  }, [accountId])
+  if (loading) return <div className="p-4 space-y-2">{Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-8 w-full" />)}</div>
+  if (items.length === 0) return <p className="p-6 text-sm text-muted-foreground text-center">No activity yet.</p>
+  return (
+    <div className="divide-y">
+      {items.map(item => (
+        <div key={item.id} className="flex items-center gap-3 px-4 py-3">
+          <Activity className="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+          <div className="flex-1 min-w-0">
+            <p className="text-sm truncate">{item.title}</p>
+          </div>
+          <p className="text-xs text-muted-foreground shrink-0">{new Date(item.created_at).toLocaleDateString()}</p>
+        </div>
+      ))}
+    </div>
+  )
+}
+
+function FunnelTab({ account }: { account: Account }) {
+  const stage = account.data?.lifecycle_stage
+  const score = account.data?.lead_score ?? 0
+  const temp = account.data?.temperature
+  const ratings = account.data?.ratings
+  const attr = account.data?.attribution
+  const queue = account.data?.queue
+
+  return (
+    <div className="p-6 space-y-6">
+      {/* Header Stats */}
+      <div className="grid grid-cols-3 gap-4">
+        <div className="border rounded-lg p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <Target className="h-4 w-4 text-muted-foreground" />
+            <span className="text-xs text-muted-foreground uppercase tracking-wider">Lifecycle Stage</span>
+          </div>
+          {stage ? (
+            <Badge className="capitalize text-sm" variant={stage === 'customer' ? 'default' : 'secondary'}>
+              {stage.replace(/_/g, ' ')}
+            </Badge>
+          ) : (
+            <span className="text-muted-foreground text-sm">Not set</span>
+          )}
+        </div>
+
+        <div className="border rounded-lg p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <TrendingUp className="h-4 w-4 text-muted-foreground" />
+            <span className="text-xs text-muted-foreground uppercase tracking-wider">Lead Score</span>
+          </div>
+          <div className="flex items-center gap-3">
+            <div className="flex-1 h-2 bg-muted rounded-full overflow-hidden">
+              <div 
+                className={`h-full rounded-full ${score >= 70 ? 'bg-green-500' : score >= 40 ? 'bg-yellow-500' : 'bg-gray-400'}`}
+                style={{ width: `${Math.min(score, 100)}%` }}
+              />
+            </div>
+            <span className="font-semibold">{score}</span>
+          </div>
+        </div>
+
+        <div className="border rounded-lg p-4">
+          <div className="flex items-center gap-2 mb-2">
+            <Clock className="h-4 w-4 text-muted-foreground" />
+            <span className="text-xs text-muted-foreground uppercase tracking-wider">Last Signal</span>
+          </div>
+          <span className="text-sm">
+            {account.data?.last_signal_at 
+              ? new Date(account.data.last_signal_at).toLocaleDateString()
+              : 'Never'
+            }
+          </span>
+        </div>
+      </div>
+
+      {/* Temperature Badge */}
+      {temp && (
+        <div className="flex items-center gap-2">
+          <span className="text-sm text-muted-foreground">Temperature:</span>
+          <Badge 
+            variant="outline"
+            className={`capitalize ${
+              temp === 'hot' ? 'border-red-400 text-red-600 bg-red-50' :
+              temp === 'warm' ? 'border-yellow-400 text-yellow-600 bg-yellow-50' :
+              'border-blue-400 text-blue-600 bg-blue-50'
+            }`}
+          >
+            {temp}
+          </Badge>
+        </div>
+      )}
+
+      {/* Queue Status */}
+      {queue?.pending_opportunity_id && (
+        <div className="border rounded-lg p-4 bg-yellow-50 border-yellow-200">
+          <div className="flex items-center gap-2">
+            <Funnel className="h-4 w-4 text-yellow-600" />
+            <span className="font-medium text-sm">Opportunity in Queue</span>
+          </div>
+          <p className="text-xs text-muted-foreground mt-1">
+            Type: {queue.primary_opportunity_type?.replace(/_/g, ' ') || 'Unknown'}
+          </p>
+        </div>
+      )}
+
+      {/* Stage Ratings */}
+      {ratings && (
+        <div className="border rounded-lg p-4">
+          <h3 className="font-medium mb-4">Stage Ratings</h3>
+          <div className="space-y-3">
+            {ratings.anonymous && (
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">Anonymous</span>
+                <div className="flex items-center gap-2">
+                  <div className="flex gap-0.5">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                      <div 
+                        key={i} 
+                        className={`w-2 h-2 rounded-full ${i < ratings.anonymous!.rating ? 'bg-blue-500' : 'bg-gray-200'}`}
+                      />
+                    ))}
+                  </div>
+                  <span className="text-xs font-medium w-12 text-right">{ratings.anonymous.raw_score}</span>
+                </div>
+              </div>
+            )}
+            {ratings.identified && (
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">Identified</span>
+                <div className="flex items-center gap-2">
+                  <div className="flex gap-0.5">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                      <div 
+                        key={i} 
+                        className={`w-2 h-2 rounded-full ${i < ratings.identified!.rating ? 'bg-green-500' : 'bg-gray-200'}`}
+                      />
+                    ))}
+                  </div>
+                  <span className="text-xs font-medium w-12 text-right">{ratings.identified.raw_score}</span>
+                </div>
+              </div>
+            )}
+            {ratings.engaged && (
+              <div className="flex items-center justify-between">
+                <span className="text-sm text-muted-foreground">Engaged</span>
+                <div className="flex items-center gap-2">
+                  <div className="flex gap-0.5">
+                    {Array.from({ length: 5 }).map((_, i) => (
+                      <div 
+                        key={i} 
+                        className={`w-2 h-2 rounded-full ${i < ratings.engaged!.rating ? 'bg-orange-500' : 'bg-gray-200'}`}
+                      />
+                    ))}
+                  </div>
+                  <span className="text-xs font-medium w-12 text-right">{ratings.engaged.raw_score}</span>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Attribution */}
+      {(attr?.anonymous_first_touch || attr?.identified_first_touch) && (
+        <div className="border rounded-lg p-4">
+          <h3 className="font-medium mb-4">Attribution</h3>
+          <div className="space-y-3 text-sm">
+            {attr.anonymous_first_touch && (
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Anonymous First Touch</span>
+                <span className="text-right">
+                  <span className="font-medium">{attr.anonymous_first_touch.referrer || 'Direct'}</span>
+                  <span className="text-xs text-muted-foreground block">
+                    {attr.anonymous_first_touch.at ? new Date(attr.anonymous_first_touch.at).toLocaleDateString() : ''}
+                  </span>
+                </span>
+              </div>
+            )}
+            {attr.identified_first_touch && (
+              <div className="flex justify-between">
+                <span className="text-muted-foreground">Identified First Touch</span>
+                <span className="text-right">
+                  <span className="font-medium">{attr.identified_first_touch.referrer || 'Direct'}</span>
+                  <span className="text-xs text-muted-foreground block">
+                    {attr.identified_first_touch.at ? new Date(attr.identified_first_touch.at).toLocaleDateString() : ''}
+                  </span>
+                </span>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+
+      {/* Empty State */}
+      {!stage && !score && !temp && !ratings && !queue?.pending_opportunity_id && (
+        <div className="text-center py-12 text-muted-foreground">
+          <Funnel className="h-10 w-10 mx-auto mb-3 opacity-30" />
+          <p className="text-sm">No funnel data yet.</p>
+          <p className="text-xs mt-1">Signals will appear here as they are processed.</p>
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default function AccountDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const [account, setAccount] = useState<Account | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    if (!id) return
+    apiFetch(`/api/admin-data?action=get&entity=accounts&id=${id}`)
+      .then(r => r.json()).then(j => setAccount(j?.data ?? j ?? null)).catch(() => setAccount(null)).finally(() => setLoading(false))
+  }, [id])
+
+  if (loading) return <div className="p-6 space-y-4"><Skeleton className="h-8 w-64" /><Skeleton className="h-4 w-48" /></div>
+  if (!account) return <div className="p-6 text-muted-foreground text-sm">Account not found.</div>
+
+  return (
+    <div className="flex flex-col h-full">
+      <div className="px-6 py-4 border-b border-border shrink-0">
+        <Button variant="ghost" size="sm" className="mb-2 -ml-2 gap-1 text-muted-foreground" onClick={() => navigate('/cortex/crm/accounts')}>
+          <ArrowLeft className="h-3.5 w-3.5" /> Accounts
+        </Button>
+        <div className="flex items-center gap-3">
+          <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
+            <span className="text-primary font-bold text-sm">{(account.display_name || account.slug).charAt(0).toUpperCase()}</span>
+          </div>
+          <div>
+            <h1 className="text-xl font-bold">{account.display_name || account.slug}</h1>
+            <p className="text-xs text-muted-foreground font-mono">{account.slug}</p>
+          </div>
+          {account.data?.segment && <Badge variant="secondary" className="ml-2">{account.data.segment}</Badge>}
+        </div>
+      </div>
+
+      <Tabs defaultValue="people" className="flex flex-col flex-1 min-h-0">
+        <div className="px-6 border-b border-border shrink-0">
+          <TabsList className="h-9 bg-transparent p-0 gap-4">
+            {[
+              { value: 'people', label: 'People', icon: User },
+              { value: 'funnel', label: 'Funnel', icon: Funnel },
+              { value: 'tickets', label: 'Tickets', icon: Ticket },
+              { value: 'deals', label: 'Deals', icon: Handshake },
+              { value: 'health', label: 'Health', icon: Heart },
+              { value: 'activity', label: 'Activity', icon: Activity },
+            ].map(tab => (
+              <TabsTrigger key={tab.value} value={tab.value}
+                className="gap-1.5 rounded-none border-b-2 border-transparent data-[state=active]:border-primary data-[state=active]:bg-transparent h-9 px-1">
+                <tab.icon className="h-3.5 w-3.5" />
+                {tab.label}
+              </TabsTrigger>
+            ))}
+          </TabsList>
+        </div>
+
+        <ScrollArea className="flex-1">
+          <TabsContent value="people" className="mt-0"><PeopleTab accountId={id!} /></TabsContent>
+          <TabsContent value="funnel" className="mt-0"><FunnelTab account={account} /></TabsContent>
+          <TabsContent value="tickets" className="mt-0"><ItemsTab accountId={id!} typeSlug="support_ticket" emptyText="No tickets." /></TabsContent>
+          <TabsContent value="deals" className="mt-0"><ItemsTab accountId={id!} typeSlug="deal" emptyText="No deals." /></TabsContent>
+          <TabsContent value="health" className="mt-0"><ItemsTab accountId={id!} typeSlug="csm_health" emptyText="No health records." /></TabsContent>
+          <TabsContent value="activity" className="mt-0"><ActivityTab accountId={id!} /></TabsContent>
+        </ScrollArea>
+      </Tabs>
+    </div>
+  )
+}

package/pages/crm/AccountsPage.tsx

@@ -0,0 +1,164 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { apiFetch } from '@core/lib/api'
+import { Input } from '@core/components/ui/input'
+import { Badge } from '@core/components/ui/badge'
+import { Skeleton } from '@core/components/ui/skeleton'
+import { Button } from '@core/components/ui/button'
+import { Building2, ChevronRight } from 'lucide-react'
+
+interface Account {
+  id: string
+  slug: string
+  display_name?: string
+  created_at: string
+  data?: { 
+    segment?: string
+    status?: string
+    lifecycle_stage?: string
+    lead_score?: number
+    temperature?: 'cold' | 'warm' | 'hot'
+    last_signal_at?: string
+  }
+}
+
+type Filter = 'all'
+
+export default function AccountsPage() {
+  const navigate = useNavigate()
+  const [accounts, setAccounts] = useState<Account[]>([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+  const [filter] = useState<Filter>('all')
+
+  useEffect(() => {
+    apiFetch('/api/admin-data?action=list&entity=accounts&limit=500')
+      .then(r => r.json())
+      .then(json => setAccounts(Array.isArray(json?.data) ? json.data : Array.isArray(json) ? json : []))
+      .catch(() => setAccounts([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const filtered = accounts.filter(a => {
+    const q = search.toLowerCase()
+    return !q || (a.display_name || a.slug || '').toLowerCase().includes(q)
+  })
+
+  return (
+    <div className="p-6 space-y-5">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold">Accounts</h1>
+          <p className="text-muted-foreground text-sm mt-1">{accounts.length} accounts</p>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <Input
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          placeholder="Search accounts…"
+          className="w-72"
+        />
+        <div className="flex gap-1">
+          <Button size="sm" variant={filter === 'all' ? 'default' : 'outline'}>All</Button>
+        </div>
+      </div>
+
+      <div className="border rounded-lg overflow-hidden">
+        {loading ? (
+          <div className="p-4 space-y-3">
+            {Array.from({ length: 5 }).map((_, i) => <Skeleton key={i} className="h-14 w-full" />)}
+          </div>
+        ) : filtered.length === 0 ? (
+          <div className="p-12 text-center text-muted-foreground">
+            <Building2 className="h-10 w-10 mx-auto mb-3 opacity-30" />
+            <p className="text-sm">{search ? 'No accounts match your search.' : 'No accounts yet.'}</p>
+          </div>
+        ) : (
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="text-xs text-muted-foreground uppercase tracking-wider border-b bg-muted/30">
+                <th className="text-left px-5 py-3 font-medium">Account</th>
+                <th className="text-left px-5 py-3 font-medium">Stage</th>
+                <th className="text-left px-5 py-3 font-medium">Score</th>
+                <th className="text-left px-5 py-3 font-medium">Temp</th>
+                <th className="text-right px-5 py-3 font-medium">Last Signal</th>
+                <th className="px-3 py-3" />
+              </tr>
+            </thead>
+            <tbody className="divide-y">
+              {filtered.map(account => (
+                <tr
+                  key={account.id}
+                  onClick={() => navigate(`/cortex/crm/accounts/${account.id}`)}
+                  className="hover:bg-accent/50 cursor-pointer transition-colors"
+                >
+                  <td className="px-5 py-3 font-medium">
+                    {account.display_name || account.slug}
+                    <div className="text-muted-foreground font-mono text-xs">{account.slug}</div>
+                  </td>
+                  <td className="px-5 py-3">
+                    {account.data?.lifecycle_stage ? (
+                      <Badge 
+                        variant={account.data.lifecycle_stage === 'customer' ? 'default' : 'secondary'}
+                        className="capitalize"
+                      >
+                        {account.data.lifecycle_stage.replace(/_/g, ' ')}
+                      </Badge>
+                    ) : (
+                      <span className="text-muted-foreground text-xs">—</span>
+                    )}
+                  </td>
+                  <td className="px-5 py-3">
+                    {account.data?.lead_score !== undefined ? (
+                      <div className="flex items-center gap-2">
+                        <div className="w-16 h-2 bg-muted rounded-full overflow-hidden">
+                          <div 
+                            className={`h-full rounded-full ${
+                              account.data.lead_score >= 70 ? 'bg-green-500' : 
+                              account.data.lead_score >= 40 ? 'bg-yellow-500' : 'bg-gray-400'
+                            }`}
+                            style={{ width: `${Math.min(account.data.lead_score, 100)}%` }}
+                          />
+                        </div>
+                        <span className="text-xs font-medium">{account.data.lead_score}</span>
+                      </div>
+                    ) : (
+                      <span className="text-muted-foreground text-xs">—</span>
+                    )}
+                  </td>
+                  <td className="px-5 py-3">
+                    {account.data?.temperature ? (
+                      <Badge 
+                        variant="outline"
+                        className={`capitalize ${
+                          account.data.temperature === 'hot' ? 'border-red-400 text-red-600' :
+                          account.data.temperature === 'warm' ? 'border-yellow-400 text-yellow-600' :
+                          'border-blue-400 text-blue-600'
+                        }`}
+                      >
+                        {account.data.temperature}
+                      </Badge>
+                    ) : (
+                      <span className="text-muted-foreground text-xs">—</span>
+                    )}
+                  </td>
+                  <td className="px-5 py-3 text-right text-muted-foreground text-xs">
+                    {account.data?.last_signal_at 
+                      ? new Date(account.data.last_signal_at).toLocaleDateString()
+                      : 'Never'
+                    }
+                  </td>
+                  <td className="px-3 py-3">
+                    <ChevronRight className="h-4 w-4 text-muted-foreground/50" />
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  )
+}

package/pages/crm/ActivityPage.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react'
+import { apiFetch } from '@core/lib/api'
+
+interface ActivityItem {
+  id: string
+  title: string
+  data: Record<string, unknown>
+  created_at: string
+  type_slug?: string
+}
+
+const TYPE_LABELS: Record<string, { label: string; color: string }> = {
+  site_visit:      { label: 'Site Visit',      color: 'bg-purple-100 text-purple-700' },
+  marketing_touch: { label: 'Marketing Touch', color: 'bg-yellow-100 text-yellow-700' },
+  deal:            { label: 'Deal',            color: 'bg-blue-100 text-blue-700' },
+  csm_health:      { label: 'Health Check',    color: 'bg-green-100 text-green-700' },
+}
+
+export default function ActivityPage() {
+  const [items, setItems] = useState<ActivityItem[]>([])
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    Promise.all([
+      apiFetch('/api/admin-data?action=list&entity=items&type_slug=site_visit&limit=50').then(r => r.json()),
+      apiFetch('/api/admin-data?action=list&entity=items&type_slug=marketing_touch&limit=50').then(r => r.json()),
+    ])
+      .then(([vr, tr]) => {
+        const visits = vr?.data ?? vr
+        const touches = tr?.data ?? tr
+        const all = [
+          ...(visits || []).map((i: ActivityItem) => ({ ...i, type_slug: 'site_visit' })),
+          ...(touches || []).map((i: ActivityItem) => ({ ...i, type_slug: 'marketing_touch' })),
+        ].sort((a, b) => new Date(b.created_at).getTime() - new Date(a.created_at).getTime())
+        setItems(all)
+      })
+      .catch(() => setItems([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  return (
+    <div className="p-6 space-y-5">
+      <div>
+        <h1 className="text-2xl font-bold">Activity Feed</h1>
+        <p className="text-muted-foreground text-sm mt-1">Site visits and marketing touches</p>
+      </div>
+
+      <div className="border rounded-lg overflow-hidden">
+        {loading ? (
+          <div className="p-8 text-center text-muted-foreground">Loading activity…</div>
+        ) : items.length === 0 ? (
+          <div className="p-8 text-center text-muted-foreground">No activity recorded yet.</div>
+        ) : (
+          <div className="divide-y">
+            {items.map(item => {
+              const typeInfo = TYPE_LABELS[item.type_slug || ''] || { label: item.type_slug || 'Event', color: 'bg-muted text-muted-foreground' }
+              return (
+                <div key={item.id} className="px-5 py-4 flex items-start gap-4">
+                  <span className={`flex-shrink-0 inline-block px-2 py-0.5 rounded text-xs font-medium mt-0.5 ${typeInfo.color}`}>
+                    {typeInfo.label}
+                  </span>
+                  <div className="flex-1 min-w-0">
+                    <div className="text-sm font-medium truncate">{item.title}</div>
+                    {item.type_slug === 'site_visit' && item.data?.url && (
+                      <div className="text-xs text-muted-foreground truncate mt-0.5">{String(item.data.url)}</div>
+                    )}
+                    {item.type_slug === 'marketing_touch' && item.data?.channel && (
+                      <div className="text-xs text-muted-foreground mt-0.5">via {String(item.data.channel)}{item.data?.campaign ? ` · ${item.data.campaign}` : ''}</div>
+                    )}
+                  </div>
+                  <div className="flex-shrink-0 text-xs text-muted-foreground">
+                    {new Date(item.created_at).toLocaleDateString()}
+                  </div>
+                </div>
+              )
+            })}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}