spine-framework-cortex 0.1.1

package/pages/crm/HealthPage.tsx

@@ -0,0 +1,109 @@
+import { useEffect, useState } from 'react'
+import { apiFetch } from '@core/lib/api'
+
+interface HealthRecord {
+  id: string
+  title: string
+  data: { temperature?: 'green' | 'yellow' | 'red'; churn_risk_score?: number; adoption_score?: number; nps_score?: number; notes?: string }
+  created_at: string
+}
+
+const TEMP_STYLE: Record<string, { bg: string; text: string; dot: string; label: string }> = {
+  green:  { bg: 'bg-green-50',  text: 'text-green-700',  dot: 'bg-green-500',  label: 'Healthy' },
+  yellow: { bg: 'bg-yellow-50', text: 'text-yellow-700', dot: 'bg-yellow-500', label: 'At Risk' },
+  red:    { bg: 'bg-red-50',    text: 'text-red-700',    dot: 'bg-red-500',    label: 'Critical' },
+}
+
+function ScoreBar({ label, value }: { label: string; value?: number }) {
+  if (value == null) return null
+  const pct = Math.min(100, Math.max(0, value))
+  const color = pct >= 70 ? 'bg-green-500' : pct >= 40 ? 'bg-yellow-500' : 'bg-red-500'
+  return (
+    <div className="flex items-center gap-2 text-xs">
+      <span className="w-20 text-slate-500 flex-shrink-0">{label}</span>
+      <div className="flex-1 bg-slate-100 rounded-full h-1.5">
+        <div className={`${color} h-1.5 rounded-full`} style={{ width: `${pct}%` }} />
+      </div>
+      <span className="w-8 text-right text-slate-600 font-medium">{value}</span>
+    </div>
+  )
+}
+
+export default function HealthPage() {
+  const [records, setRecords] = useState<HealthRecord[]>([])
+  const [loading, setLoading] = useState(true)
+  const [filter, setFilter] = useState<'all' | 'green' | 'yellow' | 'red'>('all')
+
+  useEffect(() => {
+    apiFetch('/api/admin-data?action=list&entity=items&type_slug=csm_health&limit=200')
+      .then(r => r.json())
+      .then(json => setRecords(Array.isArray(json?.data) ? json.data : json || []))
+      .catch(() => setRecords([]))
+      .finally(() => setLoading(false))
+  }, [])
+
+  const filtered = filter === 'all' ? records : records.filter(r => r.data?.temperature === filter)
+  const counts = { green: records.filter(r => r.data?.temperature === 'green').length, yellow: records.filter(r => r.data?.temperature === 'yellow').length, red: records.filter(r => r.data?.temperature === 'red').length }
+
+  return (
+    <div className="p-6 space-y-5">
+      <div>
+        <h1 className="text-2xl font-bold text-slate-900">Customer Health</h1>
+        <p className="text-slate-500 text-sm mt-1">CSM health records across accounts</p>
+      </div>
+
+      <div className="grid grid-cols-3 gap-4">
+        {(['green', 'yellow', 'red'] as const).map(temp => {
+          const s = TEMP_STYLE[temp]
+          return (
+            <button
+              key={temp}
+              onClick={() => setFilter(f => f === temp ? 'all' : temp)}
+              className={`${s.bg} rounded-lg p-4 text-left border-2 transition-colors ${filter === temp ? 'border-current' : 'border-transparent'}`}
+            >
+              <div className="flex items-center gap-2 mb-1">
+                <div className={`w-2.5 h-2.5 rounded-full ${s.dot}`} />
+                <span className={`text-xs font-semibold uppercase tracking-wide ${s.text}`}>{s.label}</span>
+              </div>
+              <div className={`text-3xl font-bold ${s.text}`}>{counts[temp]}</div>
+            </button>
+          )
+        })}
+      </div>
+
+      <div className="space-y-3">
+        {loading ? (
+          <div className="text-center py-12 text-slate-400">Loading health records…</div>
+        ) : filtered.length === 0 ? (
+          <div className="text-center py-12 text-slate-400 bg-white rounded-lg border border-slate-200">
+            No health records {filter !== 'all' ? `with ${filter} status` : 'yet'}.
+          </div>
+        ) : filtered.map(record => {
+          const temp = record.data?.temperature || 'green'
+          const s = TEMP_STYLE[temp]
+          return (
+            <div key={record.id} className={`${s.bg} rounded-lg border border-slate-200 p-4`}>
+              <div className="flex items-center justify-between mb-3">
+                <div className="font-semibold text-slate-900">{record.title}</div>
+                <div className={`flex items-center gap-1.5 text-xs font-medium ${s.text}`}>
+                  <div className={`w-2 h-2 rounded-full ${s.dot}`} />
+                  {s.label}
+                </div>
+              </div>
+              <div className="space-y-1.5">
+                <ScoreBar label="Adoption" value={record.data?.adoption_score} />
+                <ScoreBar label="Churn Risk" value={record.data?.churn_risk_score != null ? 100 - record.data.churn_risk_score : undefined} />
+              </div>
+              {record.data?.nps_score != null && (
+                <div className="mt-2 text-xs text-slate-500">NPS: <span className="font-semibold text-slate-700">{record.data.nps_score}</span></div>
+              )}
+              {record.data?.notes && (
+                <div className="mt-2 text-xs text-slate-600 italic">{record.data.notes}</div>
+              )}
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}

package/pages/intelligence/IntelligencePage.tsx

@@ -0,0 +1,314 @@
+import React, { useState, useEffect } from 'react'
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@core/components/ui/card'
+import { Badge } from '@core/components/ui/badge'
+import { Button } from '@core/components/ui/button'
+import { LoadingSpinner } from '@core/components/ui/LoadingSpinner'
+import { useApi } from '@core/hooks/useApi'
+import { apiFetch } from '@core/lib/api'
+import { Brain, TrendingUp, Users, Target, Clock, AlertCircle } from 'lucide-react'
+
+interface FunnelSignal {
+  id: string
+  title: string
+  data: {
+    signal_type: string
+    score_delta: number
+    account_id?: string
+    person_id?: string
+    occurred_at: string
+  }
+  created_at: string
+}
+
+interface Account {
+  id: string
+  display_name: string
+  data: {
+    lead_score?: number
+    lifecycle_stage?: string
+  }
+}
+
+interface Task {
+  id: string
+  title: string
+  data: {
+    task_type: string
+    priority: string
+    account_id?: string
+    person_id?: string
+    description: string
+    due_date?: string
+  }
+  status: string
+}
+
+interface ActivityLog {
+  id: string
+  title: string
+  data: {
+    action: string
+    account_id?: string
+    signal_type?: string
+    score_delta?: number
+    new_score?: number
+    new_stage?: string
+  }
+  created_at: string
+}
+
+export default function IntelligencePage() {
+  const [selectedAccountId, setSelectedAccountId] = useState<string>('')
+  const [accounts, setAccounts] = useState<Account[]>([])
+  const [signals, setSignals] = useState<FunnelSignal[]>([])
+  const [tasks, setTasks] = useState<Task[]>([])
+  const [activities, setActivities] = useState<ActivityLog[]>([])
+  const [loading, setLoading] = useState(true)
+
+  // Fetch accounts with lead scores
+  const { data: accountsData, loading: accountsLoading } = useApi(async () => {
+    const res = await apiFetch('/api/admin-data?action=list&entity=accounts&limit=50')
+    const json = await res.json()
+    return json.data || []
+  })
+
+  // Fetch funnel signals
+  const { data: signalsData, loading: signalsLoading } = useApi(async () => {
+    const res = await apiFetch('/api/admin-data?action=list&entity=items&type_slug=funnel_signal&limit=20')
+    const json = await res.json()
+    return json.data || []
+  })
+
+  // Fetch tasks
+  const { data: tasksData, loading: tasksLoading } = useApi(async () => {
+    const res = await apiFetch('/api/admin-data?action=list&entity=items&type_slug=task&limit=20')
+    const json = await res.json()
+    return json.data || []
+  })
+
+  // Fetch activity logs
+  const { data: activitiesData, loading: activitiesLoading } = useApi(async () => {
+    const res = await apiFetch('/api/admin-data?action=list&entity=items&type_slug=activity_log&limit=20')
+    const json = await res.json()
+    return json.data || []
+  })
+
+  useEffect(() => {
+    if (accountsData) {
+      setAccounts(accountsData.filter((acc: any) => acc.data?.lead_score !== undefined))
+    }
+  }, [accountsData])
+
+  useEffect(() => {
+    if (signalsData) setSignals(signalsData)
+    if (tasksData) setTasks(tasksData)
+    if (activitiesData) setActivities(activitiesData)
+    setLoading(false)
+  }, [signalsData, tasksData, activitiesData])
+
+  const selectedAccount = accounts.find(acc => acc.id === selectedAccountId)
+
+  const getLifecycleStageColor = (stage?: string) => {
+    switch (stage) {
+      case 'product_qualified_lead': return 'bg-green-500'
+      case 'engaged_lead': return 'bg-blue-500'
+      case 'identified_lead': return 'bg-yellow-500'
+      case 'anonymous': return 'bg-gray-500'
+      default: return 'bg-gray-400'
+    }
+  }
+
+  const getSignalTypeColor = (type: string) => {
+    const colors: Record<string, string> = {
+      'docs_view': 'bg-blue-100 text-blue-800',
+      'pricing_visit': 'bg-purple-100 text-purple-800',
+      'portal_account_created': 'bg-green-100 text-green-800',
+      'spine_install_registered': 'bg-orange-100 text-orange-800',
+      'marketplace_app_installed': 'bg-pink-100 text-pink-800'
+    }
+    return colors[type] || 'bg-gray-100 text-gray-800'
+  }
+
+  const getPriorityColor = (priority: string) => {
+    switch (priority) {
+      case 'high': return 'bg-red-100 text-red-800'
+      case 'medium': return 'bg-yellow-100 text-yellow-800'
+      case 'low': return 'bg-green-100 text-green-800'
+      default: return 'bg-gray-100 text-gray-800'
+    }
+  }
+
+  if (loading || accountsLoading || signalsLoading || tasksLoading || activitiesLoading) {
+    return <LoadingSpinner />
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">Cortex Intelligence</h1>
+          <p className="text-muted-foreground">Funnel intelligence and lead scoring insights</p>
+        </div>
+        <Button onClick={() => window.location.reload()}>
+          <Brain className="w-4 h-4 mr-2" />
+          Refresh Data
+        </Button>
+      </div>
+
+      {/* Account Selector */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center">
+            <Users className="w-5 h-5 mr-2" />
+            Account Intelligence
+          </CardTitle>
+          <CardDescription>Select an account to view detailed intelligence</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {accounts.map((account) => (
+              <div
+                key={account.id}
+                className={`p-4 border rounded-lg cursor-pointer transition-colors ${
+                  selectedAccountId === account.id ? 'border-blue-500 bg-blue-50' : 'hover:border-gray-300'
+                }`}
+                onClick={() => setSelectedAccountId(account.id)}
+              >
+                <div className="flex items-center justify-between mb-2">
+                  <h3 className="font-semibold">{account.display_name}</h3>
+                  <Badge className={getLifecycleStageColor(account.data?.lifecycle_stage)}>
+                    {account.data?.lifecycle_stage || 'unknown'}
+                  </Badge>
+                </div>
+                <div className="flex items-center justify-between">
+                  <div className="text-2xl font-bold text-blue-600">
+                    {account.data?.lead_score || 0}
+                  </div>
+                  <div className="text-sm text-gray-500">Lead Score</div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+
+      {selectedAccount && (
+        <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
+          {/* Recent Signals */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <TrendingUp className="w-5 h-5 mr-2" />
+                Recent Funnel Signals
+              </CardTitle>
+              <CardDescription>Latest signals for {selectedAccount?.display_name}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {signals
+                  .filter(signal => signal.data.account_id === selectedAccountId)
+                  .slice(0, 5)
+                  .map((signal) => (
+                    <div key={signal.id} className="flex items-center justify-between p-3 border rounded">
+                      <div className="flex items-center space-x-3">
+                        <Badge className={getSignalTypeColor(signal.data.signal_type)}>
+                          {signal.data.signal_type}
+                        </Badge>
+                        <div>
+                          <div className="font-medium">{signal.title}</div>
+                          <div className="text-sm text-gray-500">
+                            {new Date(signal.data.occurred_at).toLocaleDateString()}
+                          </div>
+                        </div>
+                      </div>
+                      <div className={`font-bold ${
+                        signal.data.score_delta > 0 ? 'text-green-600' : 'text-red-600'
+                      }`}>
+                        {signal.data.score_delta > 0 ? '+' : ''}{signal.data.score_delta}
+                      </div>
+                    </div>
+                  ))}
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Tasks */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center">
+                <Target className="w-5 h-5 mr-2" />
+                Recommended Actions
+              </CardTitle>
+              <CardDescription>Tasks for {selectedAccount?.display_name}</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-3">
+                {tasks
+                  .filter(task => task.data.account_id === selectedAccountId)
+                  .slice(0, 5)
+                  .map((task) => (
+                    <div key={task.id} className="p-3 border rounded">
+                      <div className="flex items-center justify-between mb-2">
+                        <Badge className={getPriorityColor(task.data.priority)}>
+                          {task.data.priority}
+                        </Badge>
+                        {task.data.due_date && (
+                          <div className="flex items-center text-sm text-gray-500">
+                            <Clock className="w-4 h-4 mr-1" />
+                            {new Date(task.data.due_date).toLocaleDateString()}
+                          </div>
+                        )}
+                      </div>
+                      <h4 className="font-medium mb-1">{task.title}</h4>
+                      <p className="text-sm text-gray-600">{task.data.description}</p>
+                    </div>
+                  ))}
+              </div>
+            </CardContent>
+          </Card>
+        </div>
+      )}
+
+      {/* Activity Timeline */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center">
+            <Clock className="w-5 h-5 mr-2" />
+            Activity Timeline
+          </CardTitle>
+          <CardDescription>Recent funnel intelligence activities</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="space-y-3">
+            {activities.slice(0, 10).map((activity) => (
+              <div key={activity.id} className="flex items-start space-x-3 p-3 border rounded">
+                <AlertCircle className="w-5 h-5 mt-0.5 text-blue-500" />
+                <div className="flex-1">
+                  <div className="flex items-center space-x-2 mb-1">
+                    <Badge variant="outline">{activity.data.action}</Badge>
+                    {activity.data.signal_type && (
+                      <Badge className={getSignalTypeColor(activity.data.signal_type)}>
+                        {activity.data.signal_type}
+                      </Badge>
+                    )}
+                  </div>
+                  <p className="text-sm text-gray-600">
+                    {activity.data.new_score !== undefined && (
+                      <>Score updated to {activity.data.new_score}</>
+                    )}
+                    {activity.data.new_stage && (
+                      <> · Stage: {activity.data.new_stage}</>
+                    )}
+                  </p>
+                  <div className="text-xs text-gray-500 mt-1">
+                    {new Date(activity.created_at).toLocaleString()}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}