Implement Phase 2 features for Campaign Command Center
Adds 14 new features across the dashboard: - Deal Risk Scoring (0-100) with risk factors on pipeline deals - Account Health Score with multi-factor analysis on account cards - Next Best Action Engine on Executive Overview - Account Notes with pin/edit/delete in activity overlay and account detail - Stakeholder Contact Map with role, sentiment, email, LinkedIn - Competitive Intelligence Tracker with multi-select competitors and filtering - CSV/Excel Export on accounts, activities, and pipeline pages - Data Quality Dashboard in admin with completeness scoring - Campaign Playbook Templates with 5 default plays and account progress tracking - Goals & District Targets with quarterly tracking and progress bars - Weekly Status Report (printable) and Executive Summary (printable) - Activity Effectiveness Scoring showing pipeline conversion by activity type - Mobile Activity FAB for quick activity logging on mobile - Multi-User Auth (NextAuth + Google OAuth, @broadcom.com domain, role-based) Also adds Phase 2 API route, scoring utilities, sidebar navigation updates, and database schema extensions for notes, contacts, snapshots, playbooks, and district targets. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||
import { useState, useEffect, useRef } from 'react';
|
||||
import Link from 'next/link';
|
||||
|
||||
type Tab = 'import' | 'accounts' | 'pipeline' | 'activities' | 'targets';
|
||||
type Tab = 'import' | 'accounts' | 'pipeline' | 'activities' | 'targets' | 'quality';
|
||||
|
||||
interface Stats {
|
||||
accounts: number;
|
||||
@@ -42,11 +42,14 @@ export default function AdminPage() {
|
||||
</Link>
|
||||
<h1 className="text-lg font-bold">Data Admin</h1>
|
||||
</div>
|
||||
<div className="flex gap-4 text-sm">
|
||||
<div className="flex gap-4 text-sm items-center">
|
||||
<span className="bg-white/10 px-3 py-1 rounded">{stats.accounts} accounts</span>
|
||||
<span className="bg-white/10 px-3 py-1 rounded">{stats.pipeline} deals</span>
|
||||
<span className="bg-white/10 px-3 py-1 rounded">{stats.activities} activities</span>
|
||||
<span className="bg-white/10 px-3 py-1 rounded">{stats.targets} targets</span>
|
||||
<Link href="/admin/goals" className="px-3 py-1 rounded bg-[#0098C7] hover:bg-[#007ba3] text-white font-medium transition">
|
||||
Goals & Progress
|
||||
</Link>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@@ -57,7 +60,7 @@ export default function AdminPage() {
|
||||
)}
|
||||
|
||||
<div className="px-6 pt-4 flex gap-1 border-b border-gray-200 bg-white">
|
||||
{(['import', 'accounts', 'pipeline', 'activities', 'targets'] as Tab[]).map(t => (
|
||||
{(['import', 'accounts', 'pipeline', 'activities', 'targets', 'quality'] as Tab[]).map(t => (
|
||||
<button
|
||||
key={t}
|
||||
onClick={() => setTab(t)}
|
||||
@@ -67,7 +70,7 @@ export default function AdminPage() {
|
||||
: 'text-gray-500 hover:text-gray-800 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{t === 'import' ? 'Import Data' : t}
|
||||
{t === 'import' ? 'Import Data' : t === 'quality' ? 'Data Quality' : t}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
@@ -78,6 +81,7 @@ export default function AdminPage() {
|
||||
{tab === 'pipeline' && <DataTable table="pipeline" onUpdate={refreshStats} showMessage={showMessage} />}
|
||||
{tab === 'activities' && <DataTable table="activities" onUpdate={refreshStats} showMessage={showMessage} />}
|
||||
{tab === 'targets' && <DataTable table="targets" onUpdate={refreshStats} showMessage={showMessage} />}
|
||||
{tab === 'quality' && <DataQualityPanel onNavigate={(t: Tab) => setTab(t)} />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
@@ -246,6 +250,7 @@ const FIELD_OPTIONS: Record<string, string[]> = {
|
||||
Outcome: ['Advanced', 'Follow-up Scheduled', 'Opportunity Created', 'No Decision Yet', 'No Response', 'No Interest', 'Disqualified'],
|
||||
Implementation_Stage: ['Not Started', 'In Progress', 'Live', 'At Risk', 'Stalled'],
|
||||
Health_Status: ['Green', 'Yellow', 'Red'],
|
||||
Competitors: ['Microsoft', 'Okta', 'Google', 'Sailpoint', 'AWS', 'Other'],
|
||||
};
|
||||
|
||||
interface FieldDef { key: string; label: string; required?: boolean; type?: string; options?: string[] }
|
||||
@@ -271,6 +276,7 @@ const TABLE_FIELDS: Record<string, FieldDef[]> = {
|
||||
{ key: 'Anchor_Contract_EAR', label: 'Anchor Contract EAR', type: 'number' },
|
||||
{ key: 'Google_Drive_URL', label: 'Google Drive Link' },
|
||||
{ key: 'Campaign_Artifacts_URL', label: 'Campaign Artifacts Link' },
|
||||
{ key: 'Competitors', label: 'Competitors', options: FIELD_OPTIONS.Competitors },
|
||||
],
|
||||
pipeline: [
|
||||
{ key: 'Opportunity_ID', label: 'Opp ID', required: true },
|
||||
@@ -351,7 +357,28 @@ function RecordForm({ table, record, onSave, onCancel }: {
|
||||
<label className="block text-xs font-medium text-gray-600 mb-1">
|
||||
{f.label} {f.required && <span className="text-red-500">*</span>}
|
||||
</label>
|
||||
{f.options ? (
|
||||
{f.key === 'Competitors' && f.options ? (
|
||||
<div className="flex flex-wrap gap-2 pt-1">
|
||||
{f.options.map(opt => {
|
||||
const selected = (form[f.key] || '').split(',').filter(Boolean);
|
||||
const checked = selected.includes(opt);
|
||||
return (
|
||||
<label key={opt} className="flex items-center gap-1.5 text-sm cursor-pointer">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={checked}
|
||||
onChange={() => {
|
||||
const next = checked ? selected.filter(v => v !== opt) : [...selected, opt];
|
||||
setForm(prev => ({ ...prev, [f.key]: next.join(',') }));
|
||||
}}
|
||||
className="rounded border-gray-300 text-[#0098C7] focus:ring-[#0098C7]/30"
|
||||
/>
|
||||
{opt}
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : f.options ? (
|
||||
<select
|
||||
value={form[f.key] || ''}
|
||||
onChange={e => setForm(prev => ({ ...prev, [f.key]: e.target.value }))}
|
||||
@@ -451,7 +478,7 @@ function DataTable({ table, onUpdate, showMessage }: {
|
||||
|
||||
const allKeys = data.length > 0 ? Object.keys(data[0]) : [];
|
||||
const isAccounts = table === 'accounts';
|
||||
const displayKeys = allKeys.filter(k => k !== 'id' && !(isAccounts && (k === 'Logo_URL' || k === 'Google_Drive_URL' || k === 'Campaign_Artifacts_URL')));
|
||||
const displayKeys = allKeys.filter(k => k !== 'id' && !(isAccounts && (k === 'Logo_URL' || k === 'Google_Drive_URL' || k === 'Campaign_Artifacts_URL' || k === 'Competitors')));
|
||||
const filtered = data.filter(row =>
|
||||
search === '' || Object.values(row).some(v => String(v ?? '').toLowerCase().includes(search.toLowerCase()))
|
||||
);
|
||||
@@ -536,3 +563,168 @@ function DataTable({ table, onUpdate, showMessage }: {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface QualityIssue {
|
||||
type: string;
|
||||
severity: 'high' | 'medium' | 'low';
|
||||
message: string;
|
||||
table: string;
|
||||
record_id: string;
|
||||
}
|
||||
|
||||
interface QualityReport {
|
||||
issues: QualityIssue[];
|
||||
completeness: number;
|
||||
totalAccounts: number;
|
||||
totalPipeline: number;
|
||||
}
|
||||
|
||||
function DataQualityPanel({ onNavigate }: { onNavigate: (tab: Tab) => void }) {
|
||||
const [data, setData] = useState<QualityReport | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
fetch('/api/phase2', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ action: 'quality.report' }),
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(d => { setData(d.data); setLoading(false); })
|
||||
.catch(() => setLoading(false));
|
||||
}, []);
|
||||
|
||||
if (loading) return <div className="text-gray-500 text-sm">Analyzing data quality...</div>;
|
||||
if (!data) return <div className="text-gray-500 text-sm">Unable to load quality report.</div>;
|
||||
|
||||
const highCount = data.issues.filter(i => i.severity === 'high').length;
|
||||
const medCount = data.issues.filter(i => i.severity === 'medium').length;
|
||||
const lowCount = data.issues.filter(i => i.severity === 'low').length;
|
||||
|
||||
const circumference = 2 * Math.PI * 70;
|
||||
const progress = (data.completeness / 100) * circumference;
|
||||
const scoreColor = data.completeness >= 80 ? '#16A34A' : data.completeness >= 60 ? '#F59E0B' : '#EF4444';
|
||||
|
||||
const tableToTab = (table: string): Tab => {
|
||||
if (table === 'accounts') return 'accounts';
|
||||
if (table === 'pipeline') return 'pipeline';
|
||||
if (table === 'activities') return 'activities';
|
||||
return 'accounts';
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="max-w-5xl space-y-6">
|
||||
{/* Summary Row */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-4 gap-4">
|
||||
{/* Completeness Score */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-6 flex flex-col items-center justify-center md:col-span-1">
|
||||
<div className="relative w-40 h-40">
|
||||
<svg viewBox="0 0 160 160" className="w-full h-full -rotate-90">
|
||||
<circle cx="80" cy="80" r="70" fill="none" stroke="#E2E8F0" strokeWidth="10" />
|
||||
<circle
|
||||
cx="80" cy="80" r="70"
|
||||
fill="none"
|
||||
stroke={scoreColor}
|
||||
strokeWidth="10"
|
||||
strokeLinecap="round"
|
||||
strokeDasharray={`${progress} ${circumference}`}
|
||||
/>
|
||||
</svg>
|
||||
<div className="absolute inset-0 flex flex-col items-center justify-center">
|
||||
<span className="text-3xl font-bold" style={{ color: scoreColor }}>{Math.round(data.completeness)}%</span>
|
||||
<span className="text-xs text-gray-500">Completeness</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Issue Counts */}
|
||||
<div className="md:col-span-3 grid grid-cols-3 gap-4">
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-5">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="w-3 h-3 rounded-full bg-red-500" />
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wider">High Severity</span>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-red-600">{highCount}</div>
|
||||
<div className="text-xs text-gray-400 mt-1">issues need attention</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-5">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="w-3 h-3 rounded-full bg-amber-500" />
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wider">Medium Severity</span>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-amber-600">{medCount}</div>
|
||||
<div className="text-xs text-gray-400 mt-1">issues to review</div>
|
||||
</div>
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-5">
|
||||
<div className="flex items-center gap-2 mb-2">
|
||||
<div className="w-3 h-3 rounded-full bg-gray-400" />
|
||||
<span className="text-xs font-medium text-gray-500 uppercase tracking-wider">Low Severity</span>
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-gray-500">{lowCount}</div>
|
||||
<div className="text-xs text-gray-400 mt-1">minor improvements</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Coverage Info */}
|
||||
<div className="bg-white rounded-xl border border-gray-200 p-4 flex items-center gap-6 text-sm">
|
||||
<span className="text-gray-500">Scanned:</span>
|
||||
<span className="font-semibold">{data.totalAccounts} accounts</span>
|
||||
<span className="text-gray-300">|</span>
|
||||
<span className="font-semibold">{data.totalPipeline} pipeline records</span>
|
||||
<span className="text-gray-300">|</span>
|
||||
<span className="font-semibold">{data.issues.length} total issues</span>
|
||||
</div>
|
||||
|
||||
{/* Issues Table */}
|
||||
{data.issues.length > 0 && (
|
||||
<div className="bg-white rounded-xl border border-gray-200 overflow-hidden">
|
||||
<div className="px-5 py-3 border-b border-gray-200 bg-gray-50">
|
||||
<h3 className="text-sm font-bold text-[#1B1D36]">Issues</h3>
|
||||
</div>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead>
|
||||
<tr className="border-b border-gray-200 bg-gray-50">
|
||||
<th className="text-left px-4 py-2 font-semibold text-gray-600 w-24">Severity</th>
|
||||
<th className="text-left px-4 py-2 font-semibold text-gray-600 w-24">Table</th>
|
||||
<th className="text-left px-4 py-2 font-semibold text-gray-600 w-40">Record</th>
|
||||
<th className="text-left px-4 py-2 font-semibold text-gray-600">Issue</th>
|
||||
<th className="px-4 py-2 w-20"></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{(['high', 'medium', 'low'] as const).map(severity =>
|
||||
data.issues
|
||||
.filter(i => i.severity === severity)
|
||||
.map((issue, idx) => (
|
||||
<tr key={`${severity}-${idx}`} className="border-b border-gray-100 hover:bg-gray-50">
|
||||
<td className="px-4 py-2">
|
||||
<span className={`inline-block px-2 py-0.5 rounded-full text-[10px] font-semibold text-white ${
|
||||
severity === 'high' ? 'bg-red-500' : severity === 'medium' ? 'bg-amber-500' : 'bg-gray-400'
|
||||
}`}>
|
||||
{severity}
|
||||
</span>
|
||||
</td>
|
||||
<td className="px-4 py-2 text-gray-600 capitalize">{issue.table}</td>
|
||||
<td className="px-4 py-2 text-gray-700 font-medium truncate max-w-[160px]" title={issue.record_id}>{issue.record_id}</td>
|
||||
<td className="px-4 py-2 text-gray-600">{issue.message}</td>
|
||||
<td className="px-4 py-2">
|
||||
<button
|
||||
onClick={() => onNavigate(tableToTab(issue.table))}
|
||||
className="px-2.5 py-1 text-xs font-medium text-[#0098C7] hover:text-[#007ba3] border border-[#0098C7]/30 rounded-lg hover:bg-[#0098C7]/5 transition"
|
||||
>
|
||||
Fix
|
||||
</button>
|
||||
</td>
|
||||
</tr>
|
||||
))
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user