spine-framework-cortex 0.1.1

package/pages/crm/ContactDetailPage.tsx

@@ -0,0 +1,184 @@
+import { useEffect, useState } from 'react'
+import { useParams, useNavigate } from 'react-router-dom'
+import { apiFetch } from '@core/lib/api'
+import { Badge } from '@core/components/ui/badge'
+import { Skeleton } from '@core/components/ui/skeleton'
+import { Button } from '@core/components/ui/button'
+import { Separator } from '@core/components/ui/separator'
+import { ArrowLeft, User, Mail, Phone, Building2, Calendar } from 'lucide-react'
+
+interface Person {
+  id: string
+  email?: string
+  full_name?: string
+  phone?: string
+  status?: string
+  avatar_url?: string
+  account_id?: string
+  data?: Record<string, any>
+  is_active?: boolean
+  created_at: string
+  updated_at?: string
+}
+
+interface Account {
+  id: string
+  slug?: string
+  display_name?: string
+}
+
+export default function ContactDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const [person, setPerson] = useState<Person | null>(null)
+  const [account, setAccount] = useState<Account | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (!id) return
+    setLoading(true)
+    apiFetch(`/api/admin-data?action=get&entity=people&id=${id}`)
+      .then(r => r.json())
+      .then(json => {
+        const p = json?.data || json
+        if (!p?.id) throw new Error('Contact not found')
+        setPerson(p)
+        if (p.account_id) {
+          return apiFetch(`/api/admin-data?action=get&entity=accounts&id=${p.account_id}`)
+            .then(r2 => r2.json())
+            .then(aj => setAccount(aj?.data || aj || null))
+        }
+      })
+      .catch(err => setError(err.message || 'Failed to load contact'))
+      .finally(() => setLoading(false))
+  }, [id])
+
+  if (loading) {
+    return (
+      <div className="p-6 space-y-4">
+        <Skeleton className="h-8 w-48" />
+        <Skeleton className="h-64 w-full" />
+      </div>
+    )
+  }
+
+  if (error || !person) {
+    return (
+      <div className="p-6">
+        <Button variant="ghost" size="sm" onClick={() => navigate('/cortex/crm/contacts')}>
+          <ArrowLeft className="h-4 w-4 mr-2" /> Back to Contacts
+        </Button>
+        <div className="mt-8 text-center text-slate-400">{error || 'Contact not found'}</div>
+      </div>
+    )
+  }
+
+  const initials = (person.full_name || '?')
+    .split(' ')
+    .map(w => w[0])
+    .join('')
+    .toUpperCase()
+    .slice(0, 2)
+
+  return (
+    <div className="p-6 space-y-6 max-w-4xl">
+      {/* Header */}
+      <div className="flex items-center gap-3">
+        <Button variant="ghost" size="icon" onClick={() => navigate('/cortex/crm/contacts')}>
+          <ArrowLeft className="h-4 w-4" />
+        </Button>
+        <div className="h-12 w-12 rounded-full bg-blue-100 text-blue-700 flex items-center justify-center text-lg font-semibold shrink-0">
+          {initials}
+        </div>
+        <div className="flex-1 min-w-0">
+          <h1 className="text-2xl font-bold text-slate-900 truncate">{person.full_name || 'Unnamed Contact'}</h1>
+          <p className="text-sm text-slate-500">{person.email || '—'}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          {person.status && (
+            <Badge variant={person.status === 'active' ? 'default' : 'secondary'}>{person.status}</Badge>
+          )}
+          {person.is_active === false && (
+            <Badge variant="destructive">Inactive</Badge>
+          )}
+        </div>
+      </div>
+
+      <Separator />
+
+      {/* Details grid */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        {/* Profile card */}
+        <div className="bg-white rounded-lg border border-slate-200 p-5 space-y-4">
+          <h2 className="text-sm font-semibold text-slate-700 uppercase tracking-wider">Profile</h2>
+
+          <div className="space-y-3">
+            <div className="flex items-center gap-3 text-sm">
+              <User className="h-4 w-4 text-slate-400 shrink-0" />
+              <span className="text-slate-500 w-20">Name</span>
+              <span className="text-slate-900 font-medium">{person.full_name || '—'}</span>
+            </div>
+
+            <div className="flex items-center gap-3 text-sm">
+              <Mail className="h-4 w-4 text-slate-400 shrink-0" />
+              <span className="text-slate-500 w-20">Email</span>
+              <span className="text-slate-900">{person.email || '—'}</span>
+            </div>
+
+            <div className="flex items-center gap-3 text-sm">
+              <Phone className="h-4 w-4 text-slate-400 shrink-0" />
+              <span className="text-slate-500 w-20">Phone</span>
+              <span className="text-slate-900">{person.phone || '—'}</span>
+            </div>
+
+            <div className="flex items-center gap-3 text-sm">
+              <Calendar className="h-4 w-4 text-slate-400 shrink-0" />
+              <span className="text-slate-500 w-20">Joined</span>
+              <span className="text-slate-900">{new Date(person.created_at).toLocaleDateString()}</span>
+            </div>
+          </div>
+        </div>
+
+        {/* Account card */}
+        <div className="bg-white rounded-lg border border-slate-200 p-5 space-y-4">
+          <h2 className="text-sm font-semibold text-slate-700 uppercase tracking-wider">Account</h2>
+
+          {account ? (
+            <div
+              className="flex items-center gap-3 p-3 rounded-md hover:bg-slate-50 cursor-pointer transition-colors"
+              onClick={() => navigate(`/cortex/crm/accounts/${account.id}`)}
+            >
+              <div className="h-9 w-9 rounded-lg bg-slate-100 flex items-center justify-center shrink-0">
+                <Building2 className="h-4 w-4 text-slate-500" />
+              </div>
+              <div>
+                <p className="text-sm font-medium text-slate-900">{account.display_name || account.slug || '—'}</p>
+                {account.slug && <p className="text-xs text-slate-400">{account.slug}</p>}
+              </div>
+            </div>
+          ) : (
+            <p className="text-sm text-slate-400">No account linked</p>
+          )}
+        </div>
+      </div>
+
+      {/* Data section */}
+      {person.data && Object.keys(person.data).length > 0 && (
+        <div className="bg-white rounded-lg border border-slate-200 p-5 space-y-3">
+          <h2 className="text-sm font-semibold text-slate-700 uppercase tracking-wider">Additional Data</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
+            {Object.entries(person.data).map(([key, value]) => (
+              <div key={key} className="text-sm">
+                <span className="text-slate-500">{key.replace(/_/g, ' ')}: </span>
+                <span className="text-slate-900 font-medium">
+                  {typeof value === 'object' ? JSON.stringify(value) : String(value ?? '—')}
+                </span>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/pages/crm/ContactsPage.tsx

@@ -0,0 +1,87 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { apiFetch } from '@core/lib/api'
+
+interface Person {
+  id: string
+  email: string
+  full_name?: string
+  account_id?: string
+  created_at: string
+}
+
+export default function ContactsPage() {
+  const navigate = useNavigate()
+  const [people, setPeople] = useState<Person[]>([])
+  const [loading, setLoading] = useState(true)
+  const [search, setSearch] = useState('')
+
+  useEffect(() => {
+    apiFetch('/api/admin-data?action=list&entity=people&limit=200')
+      .then(r => r.json())
+      .then(json => setPeople(Array.isArray(json?.data) ? json.data : json || []))
+      .catch(() => setPeople([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const filtered = people.filter(p => {
+    const q = search.toLowerCase()
+    return !q || (p.email || '').toLowerCase().includes(q) ||
+      (p.full_name || '').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 text-slate-900">Contacts</h1>
+          <p className="text-slate-500 text-sm mt-1">{people.length} contacts</p>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <input
+          value={search}
+          onChange={e => setSearch(e.target.value)}
+          placeholder="Search contacts…"
+          className="w-72 border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+        />
+      </div>
+
+      <div className="bg-white rounded-lg border border-slate-200">
+        {loading ? (
+          <div className="p-8 text-center text-slate-400">Loading contacts…</div>
+        ) : (
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="text-xs text-slate-500 uppercase tracking-wider border-b border-slate-100">
+                <th className="text-left px-5 py-3 font-medium">Name</th>
+                <th className="text-left px-5 py-3 font-medium">Email</th>
+                <th className="text-right px-5 py-3 font-medium">Joined</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {filtered.length === 0 ? (
+                <tr>
+                  <td colSpan={3} className="px-5 py-12 text-center text-slate-400">
+                    {search ? 'No contacts match your search.' : 'No contacts yet.'}
+                  </td>
+                </tr>
+              ) : filtered.map(person => (
+                <tr key={person.id} className="hover:bg-slate-50 cursor-pointer" onClick={() => navigate(`/cortex/crm/contacts/${person.id}`)}>
+                  <td className="px-5 py-3 font-medium text-slate-900">
+                    {person.full_name || '—'}
+                  </td>
+                  <td className="px-5 py-3 text-slate-600">{person.email}</td>
+                  <td className="px-5 py-3 text-right text-slate-400 text-xs">
+                    {new Date(person.created_at).toLocaleDateString()}
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        )}
+      </div>
+    </div>
+  )
+}

package/pages/crm/DealDetailPage.tsx

@@ -0,0 +1,191 @@
+import { useEffect, useState } from 'react'
+import { useNavigate, useParams } from 'react-router-dom'
+import { apiFetch } from '@core/lib/api'
+
+const STAGES = ['prospecting', 'qualification', 'proposal', 'negotiation', 'closed_won', 'closed_lost']
+const SOURCES = ['inbound', 'outbound', 'referral', 'event', 'paid', 'organic']
+
+interface DealForm {
+  title: string
+  stage: string
+  value: string
+  close_date: string
+  probability: string
+  source: string
+}
+
+const EMPTY: DealForm = { title: '', stage: 'prospecting', value: '', close_date: '', probability: '', source: '' }
+
+export default function DealDetailPage() {
+  const { id } = useParams<{ id: string }>()
+  const navigate = useNavigate()
+  const isNew = !id || id === 'new'
+
+  const [form, setForm] = useState<DealForm>(EMPTY)
+  const [loading, setLoading] = useState(!isNew)
+  const [saving, setSaving] = useState(false)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    if (isNew) return
+    apiFetch(`/api/admin-data?action=get&entity=items&id=${id}`)
+      .then(r => r.json())
+      .then(raw => {
+        const json = raw?.data ?? raw
+        if (json) {
+          setForm({
+            title: json.title || '',
+            stage: json.data?.stage || 'prospecting',
+            value: json.data?.value?.toString() || '',
+            close_date: json.data?.close_date || '',
+            probability: json.data?.probability?.toString() || '',
+            source: json.data?.source || '',
+          })
+        }
+      })
+      .catch(() => setError('Failed to load deal'))
+      .finally(() => setLoading(false))
+  }, [id, isNew])
+
+  const handleSave = async () => {
+    if (!form.title.trim()) { setError('Title is required'); return }
+    setSaving(true)
+    setError(null)
+    try {
+      const payload = {
+        title: form.title.trim(),
+        type_slug: 'deal',
+        data: {
+          stage: form.stage,
+          value: form.value ? Number(form.value) : null,
+          close_date: form.close_date || null,
+          probability: form.probability ? Number(form.probability) : null,
+          source: form.source || null,
+        },
+      }
+      let res: Response
+      if (isNew) {
+        res = await apiFetch('/api/admin-data?action=create&entity=items', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+      } else {
+        res = await apiFetch(`/api/admin-data?action=update&entity=items&id=${id}`, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) })
+      }
+      if (!res.ok) { const e = await res.json(); throw new Error(e?.error || 'Save failed') }
+      const saved = await res.json()
+      navigate(`/crm/deals/${isNew ? saved.id : id}`)
+    } catch (e: any) {
+      setError(e.message)
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDelete = async () => {
+    if (!confirm('Delete this deal?')) return
+    await apiFetch(`/api/admin-data?action=delete&entity=items&id=${id}`, { method: 'POST' })
+    navigate('/cortex/crm/deals')
+  }
+
+  const set = (field: keyof DealForm) => (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) =>
+    setForm(f => ({ ...f, [field]: e.target.value }))
+
+  if (loading) return <div className="p-8 text-center text-slate-400">Loading…</div>
+
+  return (
+    <div className="p-6 max-w-2xl">
+      <div className="flex items-center gap-3 mb-6">
+        <button onClick={() => navigate('/cortex/crm/deals')} className="text-slate-400 hover:text-slate-700 text-sm">
+          ← Deals
+        </button>
+        <h1 className="text-xl font-bold text-slate-900">{isNew ? 'New Deal' : 'Edit Deal'}</h1>
+      </div>
+
+      {error && <div className="mb-4 px-4 py-3 bg-red-50 border border-red-200 text-red-700 rounded-lg text-sm">{error}</div>}
+
+      <div className="bg-white rounded-lg border border-slate-200 divide-y divide-slate-100">
+        <div className="p-5 space-y-4">
+          <h2 className="font-semibold text-slate-700 text-sm">Deal Info</h2>
+          <div>
+            <label className="block text-xs font-medium text-slate-600 mb-1">Title *</label>
+            <input
+              value={form.title}
+              onChange={set('title')}
+              placeholder="Deal name"
+              className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-slate-600 mb-1">Stage</label>
+              <select value={form.stage} onChange={set('stage')} className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                {STAGES.map(s => <option key={s} value={s}>{s.replace('_', ' ')}</option>)}
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-600 mb-1">Source</label>
+              <select value={form.source} onChange={set('source')} className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
+                <option value="">— Select source —</option>
+                {SOURCES.map(s => <option key={s} value={s}>{s}</option>)}
+              </select>
+            </div>
+          </div>
+        </div>
+
+        <div className="p-5 space-y-4">
+          <h2 className="font-semibold text-slate-700 text-sm">Financials</h2>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-xs font-medium text-slate-600 mb-1">Deal Value (USD)</label>
+              <input
+                type="number"
+                value={form.value}
+                onChange={set('value')}
+                placeholder="0"
+                className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-slate-600 mb-1">Probability %</label>
+              <input
+                type="number"
+                value={form.probability}
+                onChange={set('probability')}
+                placeholder="0–100"
+                min="0" max="100"
+                className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+              />
+            </div>
+          </div>
+          <div>
+            <label className="block text-xs font-medium text-slate-600 mb-1">Expected Close Date</label>
+            <input
+              type="date"
+              value={form.close_date}
+              onChange={set('close_date')}
+              className="w-full border border-slate-200 rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
+            />
+          </div>
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between mt-6">
+        {!isNew ? (
+          <button onClick={handleDelete} className="text-sm text-red-600 hover:text-red-700 hover:underline">
+            Delete deal
+          </button>
+        ) : <div />}
+        <div className="flex gap-3">
+          <button onClick={() => navigate('/cortex/crm/deals')} className="px-4 py-2 text-sm text-slate-600 border border-slate-200 rounded-lg hover:bg-slate-50">
+            Cancel
+          </button>
+          <button
+            onClick={handleSave}
+            disabled={saving}
+            className="px-4 py-2 text-sm font-medium bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:opacity-50 transition-colors"
+          >
+            {saving ? 'Saving…' : isNew ? 'Create Deal' : 'Save Changes'}
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}

package/pages/crm/DealsPage.tsx

@@ -0,0 +1,169 @@
+import { useEffect, useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { apiFetch } from '@core/lib/api'
+
+interface Deal {
+  id: string
+  title: string
+  data: { stage?: string; value?: number; close_date?: string; probability?: number; source?: string }
+  created_at: string
+}
+
+const STAGES = ['prospecting', 'qualification', 'proposal', 'negotiation', 'closed_won', 'closed_lost']
+
+const STAGE_STYLE: Record<string, { bg: string; header: string; badge: string }> = {
+  prospecting:    { bg: 'bg-slate-50',   header: 'bg-slate-100',   badge: 'bg-slate-200 text-slate-700' },
+  qualification:  { bg: 'bg-blue-50',    header: 'bg-blue-100',    badge: 'bg-blue-200 text-blue-700' },
+  proposal:       { bg: 'bg-yellow-50',  header: 'bg-yellow-100',  badge: 'bg-yellow-200 text-yellow-700' },
+  negotiation:    { bg: 'bg-orange-50',  header: 'bg-orange-100',  badge: 'bg-orange-200 text-orange-700' },
+  closed_won:     { bg: 'bg-green-50',   header: 'bg-green-100',   badge: 'bg-green-200 text-green-700' },
+  closed_lost:    { bg: 'bg-red-50',     header: 'bg-red-100',     badge: 'bg-red-200 text-red-700' },
+}
+
+function DealCard({ deal, onClick }: { deal: Deal; onClick: () => void }) {
+  return (
+    <div
+      onClick={onClick}
+      className="bg-white border border-slate-200 rounded-lg p-3 cursor-pointer hover:shadow-sm hover:border-blue-300 transition-all"
+    >
+      <div className="font-medium text-slate-900 text-sm mb-1 truncate">{deal.title}</div>
+      {deal.data?.value != null && (
+        <div className="text-green-700 font-semibold text-sm">${deal.data.value.toLocaleString()}</div>
+      )}
+      <div className="flex items-center justify-between mt-2 text-xs text-slate-400">
+        <span>{deal.data?.source || '—'}</span>
+        <span>{deal.data?.close_date || ''}</span>
+      </div>
+    </div>
+  )
+}
+
+export default function DealsPage() {
+  const navigate = useNavigate()
+  const [deals, setDeals] = useState<Deal[]>([])
+  const [loading, setLoading] = useState(true)
+  const [view, setView] = useState<'kanban' | 'list'>('kanban')
+
+  useEffect(() => {
+    apiFetch('/api/admin-data?action=list&entity=items&type_slug=deal&limit=200')
+      .then(r => r.json())
+      .then(json => setDeals(Array.isArray(json?.data) ? json.data : json || []))
+      .catch(() => setDeals([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const byStage = (stage: string) => deals.filter(d => (d.data?.stage || 'prospecting') === stage)
+
+  return (
+    <div className="p-6 space-y-5">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900">Deals</h1>
+          <p className="text-slate-500 text-sm mt-1">{deals.length} deals across {STAGES.length} stages</p>
+        </div>
+        <div className="flex items-center gap-3">
+          <div className="flex bg-slate-100 rounded-lg p-1 text-sm">
+            <button
+              onClick={() => setView('kanban')}
+              className={`px-3 py-1 rounded-md font-medium transition-colors ${view === 'kanban' ? 'bg-white shadow text-slate-900' : 'text-slate-500 hover:text-slate-700'}`}
+            >
+              Kanban
+            </button>
+            <button
+              onClick={() => setView('list')}
+              className={`px-3 py-1 rounded-md font-medium transition-colors ${view === 'list' ? 'bg-white shadow text-slate-900' : 'text-slate-500 hover:text-slate-700'}`}
+            >
+              List
+            </button>
+          </div>
+          <button
+            onClick={() => navigate('/cortex/crm/deals/new')}
+            className="bg-blue-600 text-white text-sm font-medium px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors"
+          >
+            + New Deal
+          </button>
+        </div>
+      </div>
+
+      {loading ? (
+        <div className="text-center py-16 text-slate-400">Loading deals…</div>
+      ) : view === 'kanban' ? (
+        <div className="flex gap-3 overflow-x-auto pb-4">
+          {STAGES.map(stage => {
+            const s = STAGE_STYLE[stage]
+            const stageDeals = byStage(stage)
+            const stageValue = stageDeals.reduce((sum, d) => sum + (d.data?.value || 0), 0)
+            return (
+              <div key={stage} className={`flex-shrink-0 w-56 rounded-xl ${s.bg} flex flex-col`}>
+                <div className={`${s.header} rounded-t-xl px-3 py-2`}>
+                  <div className="font-semibold text-slate-800 text-xs uppercase tracking-wide">
+                    {stage.replace('_', ' ')}
+                  </div>
+                  <div className="text-xs text-slate-500 mt-0.5">
+                    {stageDeals.length} · {stageValue ? `$${(stageValue / 1000).toFixed(0)}k` : '$0'}
+                  </div>
+                </div>
+                <div className="flex-1 p-2 space-y-2 min-h-16">
+                  {stageDeals.map(deal => (
+                    <DealCard
+                      key={deal.id}
+                      deal={deal}
+                      onClick={() => navigate(`/crm/deals/${deal.id}`)}
+                    />
+                  ))}
+                </div>
+              </div>
+            )
+          })}
+        </div>
+      ) : (
+        <div className="bg-white rounded-lg border border-slate-200">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="text-xs text-slate-500 uppercase tracking-wider border-b border-slate-100">
+                <th className="text-left px-5 py-3 font-medium">Deal</th>
+                <th className="text-left px-5 py-3 font-medium">Stage</th>
+                <th className="text-right px-5 py-3 font-medium">Value</th>
+                <th className="text-left px-5 py-3 font-medium">Source</th>
+                <th className="text-right px-5 py-3 font-medium">Close Date</th>
+              </tr>
+            </thead>
+            <tbody className="divide-y divide-slate-100">
+              {deals.length === 0 ? (
+                <tr>
+                  <td colSpan={5} className="px-5 py-12 text-center text-slate-400">
+                    No deals yet.{' '}
+                    <button onClick={() => navigate('/cortex/crm/deals/new')} className="text-blue-600 hover:underline">
+                      Create one →
+                    </button>
+                  </td>
+                </tr>
+              ) : deals.map(deal => {
+                const s = STAGE_STYLE[deal.data?.stage || 'prospecting']
+                return (
+                  <tr
+                    key={deal.id}
+                    onClick={() => navigate(`/crm/deals/${deal.id}`)}
+                    className="hover:bg-slate-50 cursor-pointer"
+                  >
+                    <td className="px-5 py-3 font-medium text-slate-900">{deal.title}</td>
+                    <td className="px-5 py-3">
+                      <span className={`inline-block px-2 py-0.5 rounded text-xs font-medium ${s.badge}`}>
+                        {(deal.data?.stage || 'prospecting').replace('_', ' ')}
+                      </span>
+                    </td>
+                    <td className="px-5 py-3 text-right text-slate-700">
+                      {deal.data?.value ? `$${deal.data.value.toLocaleString()}` : '—'}
+                    </td>
+                    <td className="px-5 py-3 text-slate-500">{deal.data?.source || '—'}</td>
+                    <td className="px-5 py-3 text-right text-slate-500">{deal.data?.close_date || '—'}</td>
+                  </tr>
+                )
+              })}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}