+
+ {/* AI audience suggestions (spec §6) */}
+ {suggestions.length > 0 && (
+
);
}
@@ -80,9 +133,247 @@ export default function AudienceSegments() {
function Stat({ icon: Icon, label, value, color }) {
return (
);
}
+
+// ── Sync status + destination menu (spec §8 "export/sync status"; §12 E2) ──────
+const SYNC_DESTINATIONS = ['Meta Custom Audience', 'Google Customer Match', 'LinkedIn Matched Audiences'];
+
+function SyncStatusChip({ audience }) {
+ if (audience.syncStatus === 'synced') {
+ const when = audience.lastSyncedAt
+ ? new Date(audience.lastSyncedAt).toLocaleDateString(undefined, { month: 'short', day: 'numeric' })
+ : '';
+ const short = (audience.syncDestination || '').split(' ')[0];
+ return (
+
+ );
+}
+
+function SyncMenu({ onSync }) {
+ const [open, setOpen] = useState(false);
+ return (
+
+
+ {open && (
+ <>
+
setOpen(false)} />
+
+
Sync to platform
+ {SYNC_DESTINATIONS.map(d => (
+
+ ))}
+
+
+ )}
+
+ );
+}
+
+// ── AI suggestion card (spec §6): reasons visible, one-click create, opt-out aware ──
+function SuggestionCard({ s, onCreate, onCustomize, onDismiss }) {
+ const SIcon = s.icon;
+ const reach = useMemo(() => previewSegment(s.filterDef), [s.filterDef]);
+ return (
+
+
+
+
{SIcon && }
+
+
{s.name}
+ AI · {Math.round(s.confidence * 100)}% match
+
+
+
+
+
+
{s.rationale}
+
+ {/* AI reasons visible (spec §12 E1) */}
+
+ {s.reasons.map((r, i) => (
+ -
+ {r}
+
+ ))}
+
+
+
+
+ {reach.eligible.toLocaleString()} eligible after consent + suppression
+
+
+
+ Create
+ Customize
+
+
+ );
+}
+
+// ── Segment builder modal: filter CRM contacts with a live, opt-out-aware count ──
+function SegmentBuilder({ audience, preset, onClose, onSave }) {
+ const init = audience || preset; // edit an existing audience, or seed a new one from an AI suggestion
+ const [name, setName] = useState(init?.name || '');
+ const [segmentType, setSegmentType] = useState(init?.segmentType || 'crm_stage');
+ const [f, setF] = useState(() => ({ ...DEFAULT_FILTER_DEF, ...(init?.filterDef || {}) }));
+
+ const set = (patch) => setF(prev => ({ ...prev, ...patch }));
+ const toggleZip = (z) => set({ geo: f.geo.includes(z) ? f.geo.filter(x => x !== z) : [...f.geo, z] });
+
+ const preview = useMemo(() => previewSegment(f), [f]);
+ const optOuts = preview.matched - preview.consented;
+
+ return createPortal(
+
+
+
e.stopPropagation()} className="relative w-full max-w-2xl max-h-[90vh] overflow-y-auto rounded-2xl bg-white dark:bg-zinc-900 shadow-2xl border border-zinc-200 dark:border-white/10 animate-in zoom-in-95">
+ {/* Header */}
+
+
+
+
{audience ? 'Edit segment' : 'New segment'}
+
+
+
+
+
+ {/* Name + type */}
+
+
+ setName(e.target.value)} placeholder="e.g. Plano storm — past 30 days"
+ className={inCls} />
+
+
+
+
+
+
+ {/* CRM filters (spec §12 E1) */}
+
+
Filter CRM contacts
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ set({ frequencyCap: e.target.value ? Number(e.target.value) : null })} className={inCls} />
+
+
+
+
+ {/* Geography */}
+
Geography (service-area ZIPs)}>
+
+ {FILTER_OPTIONS.zips.map(z => (
+
+ ))}
+ {f.geo.length > 0 && }
+
+
+
+ {/* Mandatory consent + suppression (spec §6) */}
+
+
Always applied (mandatory)
+
Consent filter — only opted-in contacts are reachable.
+
Suppression list — opt-outs/DNC removed, including for retargeting.
+
No sensitive-attribute targeting — only the CRM fields above can be used.
+
+
+ {/* Live preview (spec §8 / §12 E2: count respects opt-outs + suppressions) */}
+
+
Estimated reach (live)
+
+
+
+
+
+
+
+
+
+
+ {/* Footer */}
+
+ Cancel
+ onSave({ name, segmentType, filterDef: f })}>
+ {audience ? 'Save segment' : 'Create segment'} · {preview.eligible.toLocaleString()} eligible
+
+
+
+
,
+ document.body,
+ );
+}
+
+const inCls = 'w-full rounded-lg border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 px-2.5 py-2 text-sm text-zinc-800 dark:text-zinc-100 focus:outline-none focus:ring-2 focus:ring-amber-500';
+
+function Field({ label, children }) {
+ return (
+
+ );
+}
+
+function FunnelStep({ label, value, highlight }) {
+ return (
+
+
{value.toLocaleString()}
+
{label}
+
+ );
+}
+
+function FunnelArrow({ note }) {
+ return (
+
+ →
+ {note}
+
+ );
+}
diff --git a/src/modules/socialAdsEngine/screens/ComplianceCenter.jsx b/src/modules/socialAdsEngine/screens/ComplianceCenter.jsx
index ed70f22..a25ed3d 100644
--- a/src/modules/socialAdsEngine/screens/ComplianceCenter.jsx
+++ b/src/modules/socialAdsEngine/screens/ComplianceCenter.jsx
@@ -3,13 +3,31 @@
* review-disclosure checks, and an AI audit + conversion-sync log (spec §8, §10.1).
* An unapproved campaign cannot publish and a risky message cannot send.
*/
-import React from 'react';
+import React, { useState, useMemo } from 'react';
import {
ShieldCheck, AlertTriangle, Ban, CheckCircle2, Clock, RefreshCw,
- FileWarning, Wand2, ArrowUpRight,
+ FileWarning, Wand2, ArrowUpRight, FileText, History, ChevronDown, Lock,
+ Megaphone, Image, MessageSquare, Download, Search, ScrollText,
+ Quote, ShieldAlert, Bot,
} from 'lucide-react';
import { useSocialAds } from '../SocialAdsContext.jsx';
+import { PLATFORMS } from '../data/platforms.js';
import { PlatformBadge, Card, SectionHeader, StatusChip, Btn } from '../components/ui.jsx';
+import { toast } from 'sonner';
+
+const fmtDate = (iso) => iso ? new Date(iso).toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' }) : '';
+const fmtDateTime = (iso) => iso ? new Date(iso).toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' }) : '';
+
+const AUDIT_CAT = {
+ campaign: { label: 'Campaign', color: 'text-blue-500', icon: Megaphone },
+ creative: { label: 'Creative', color: 'text-purple-500', icon: Image },
+ consent: { label: 'Consent', color: 'text-emerald-500', icon: FileText },
+ ai: { label: 'AI', color: 'text-amber-500', icon: Wand2 },
+ conversion: { label: 'Conversion', color: 'text-cyan-500', icon: ArrowUpRight },
+ message: { label: 'Message', color: 'text-pink-500', icon: MessageSquare },
+};
+
+const csvCell = (v) => { const s = String(v ?? '').replace(/"/g, '""'); return /[",\n]/.test(s) ? `"${s}"` : s; };
const TYPE_LABEL = {
creative: 'Creative', consent_text: 'Consent text',
@@ -23,12 +41,112 @@ const SYNC_ICON = {
};
export default function ComplianceCenter() {
- const { approvals, resolveApproval, conversionEvents, retryConversion } = useSocialAds();
+ const { approvals, resolveApproval, conversionEvents, retryConversion, leadForms, consentVersions, approveConsentVersion, blockConsentVersion, anomalies, conversations, campaigns, creatives, reviews, setReviewPermission, setReviewDisclosure } = useSocialAds();
const pending = approvals.filter(a => a.status === 'pending');
const blocked = approvals.filter(a => a.status === 'blocked');
const resolved = approvals.filter(a => a.status === 'approved');
+ // ── Unified audit log (spec §12 H2) — derived live from every compliance-
+ // relevant data source so it never drifts from the underlying records.
+ const auditEntries = useMemo(() => {
+ const campById = Object.fromEntries(campaigns.map(c => [c.id, c]));
+ const creById = Object.fromEntries(creatives.map(c => [c.id, c]));
+ const formById = Object.fromEntries(leadForms.map(f => [f.id, f]));
+ const out = [];
+
+ for (const a of approvals) {
+ const cat = a.type === 'consent_text' ? 'consent' : a.type === 'campaign' ? 'campaign' : 'creative';
+ const cre = a.type === 'creative' ? creById[a.refId] : null;
+ const form = a.type === 'consent_text' ? formById[a.refId] : null;
+ const camp = a.type === 'campaign' ? campById[a.refId] : (cre ? campById[cre.campaignId] : form ? campById[form.campaignId] : null);
+ const action = a.status === 'approved' ? 'Approved' : a.status === 'blocked' ? 'Blocked' : 'Submitted for review';
+ out.push({
+ id: `aud_apr_${a.id}`, ts: a.submittedAt, category: cat, action, detail: a.title + (a.flags?.length ? ` — ${a.flags.join('; ')}` : ''),
+ actor: a.reviewer || (a.flags?.length ? 'AI compliance reviewer' : 'system'),
+ platform: camp?.platform || cre?.platform || form?.platform || '', campaignId: camp?.id || '', serviceType: camp?.serviceType || '',
+ });
+ }
+ for (const v of consentVersions) {
+ const form = formById[v.formId];
+ const camp = form ? campById[form.campaignId] : null;
+ out.push({
+ id: `aud_cv_${v.id}`, ts: v.createdAt, category: 'consent', action: `Consent v${v.version} ${v.status}`,
+ detail: `${form?.title || v.formId}: "${v.text.slice(0, 60)}…"`, actor: v.reviewer || 'system',
+ platform: form?.platform || camp?.platform || '', campaignId: camp?.id || '', serviceType: camp?.serviceType || '',
+ });
+ }
+ for (const e of conversionEvents) {
+ out.push({
+ id: `aud_ce_${e.id}`, ts: e.syncedAt || e.submittedAt, category: 'conversion', action: `${e.eventName} · ${e.syncStatus}`,
+ detail: `dedup ${e.dedupKey}${e.value ? ` · $${e.value.toLocaleString()}` : ''}`, actor: 'system',
+ platform: e.platform, campaignId: '', serviceType: '',
+ });
+ }
+ for (const an of anomalies) {
+ const camp = campById[an.campaignId];
+ out.push({
+ id: `aud_an_${an.id}`, ts: an.detectedAt, category: 'ai', action: `Anomaly: ${an.type}${an.status !== 'open' ? ` · ${an.status}` : ''}`,
+ detail: `${camp?.name || an.campaignId} — ${an.metric}`, actor: 'AI anomaly detector',
+ platform: camp?.platform || '', campaignId: an.campaignId, serviceType: camp?.serviceType || '',
+ });
+ }
+ for (const c of conversations.filter(cv => cv.status !== 'new')) {
+ out.push({
+ id: `aud_cv2_${c.id}`, ts: c.receivedAt, category: 'message', action: `${c.classification.type} · ${c.status}`,
+ detail: `${c.author}: "${c.text.slice(0, 50)}…"`, actor: 'AI triage',
+ platform: c.platform, campaignId: '', serviceType: '',
+ });
+ }
+ return out.map(e => ({ ...e, campaignName: campById[e.campaignId]?.name || '' }))
+ .sort((a, b) => String(b.ts).localeCompare(String(a.ts)));
+ }, [approvals, consentVersions, conversionEvents, anomalies, conversations, campaigns, creatives, leadForms]);
+
+ const [auditCat, setAuditCat] = useState('all');
+ const [auditPlatform, setAuditPlatform] = useState('all');
+ const [auditSearch, setAuditSearch] = useState('');
+
+ const filteredAudit = auditEntries.filter(e =>
+ (auditCat === 'all' || e.category === auditCat) &&
+ (auditPlatform === 'all' || e.platform === auditPlatform) &&
+ (!auditSearch || `${e.action} ${e.detail} ${e.actor}`.toLowerCase().includes(auditSearch.toLowerCase())),
+ );
+
+ const exportAudit = () => {
+ const headers = ['Timestamp', 'Category', 'Action', 'Detail', 'Actor', 'Source', 'Campaign', 'Service type'];
+ const lines = [headers.join(',')];
+ for (const e of filteredAudit) {
+ lines.push([e.ts, AUDIT_CAT[e.category]?.label || e.category, e.action, e.detail, e.actor, e.platform, e.campaignName, e.serviceType].map(csvCell).join(','));
+ }
+ const blob = new Blob([lines.join('\n')], { type: 'text/csv;charset=utf-8' });
+ const url = URL.createObjectURL(blob);
+ const a = document.createElement('a');
+ a.href = url; a.download = 'ad-engine-audit-log.csv'; a.click();
+ URL.revokeObjectURL(url);
+ toast.success(`Exported ${filteredAudit.length} audit entries to CSV`);
+ };
+
+ // Reviews used in ads (spec §11 review/testimonial disclosure).
+ const usedReviews = reviews.filter(r => r.usedIn);
+ const campName = (id) => campaigns.find(c => c.id === id)?.name || id;
+
+ // AI quality metrics (spec §8 "AI audit queue", §10 AI quality).
+ const aiMetrics = useMemo(() => {
+ const aiCreatives = creatives.filter(c => c.aiGenerated);
+ const corrections = creatives.reduce((s, c) => s + (c.versions?.length || 0), 0);
+ const blockedResp = approvals.filter(a => a.status === 'blocked').length;
+ const handoffs = conversations.filter(c => c.classification.type === 'complaint' && c.status !== 'new').length;
+ const totalConv = conversations.length || 1;
+ const contained = conversations.filter(c => c.classification.type !== 'complaint').length;
+ const avgRating = reviews.length ? reviews.reduce((s, r) => s + r.rating, 0) / reviews.length : 0;
+ return {
+ aiPending: aiCreatives.filter(c => c.approvalStatus === 'pending').length,
+ containment: contained / totalConv,
+ handoffs, blockedResp, corrections,
+ sentiment: avgRating,
+ };
+ }, [creatives, approvals, conversations, reviews]);
+
return (
@@ -54,6 +172,59 @@ export default function ComplianceCenter() {
: }
+ {/* Consent text versions (spec §8) */}
+
+
+ {leadForms.map(form => {
+ const versions = consentVersions.filter(v => v.formId === form.id);
+ if (versions.length === 0) return null;
+ return ;
+ })}
+
+
+
+ {/* Review/testimonial usage + FTC disclosure (spec §8, §11) */}
+
+
+ {usedReviews.length === 0 &&
No reviews are currently used in ad creative.
}
+ {usedReviews.map(r => {
+ const cleared = r.usagePermission === 'granted' && r.disclosureStatus === 'compliant';
+ return (
+
+
+
+
+
+
{'★'.repeat(r.rating)}
+
used in {campName(r.usedIn)}
+ {cleared
+ ?
Cleared to use
+ :
Creative blocked}
+
+
"{r.text}"
+
+
+ Permission: {r.usagePermission}
+
+
+ FTC disclosure: {r.disclosureStatus}
+
+
+
+
+ {r.usagePermission !== 'granted'
+ ? setReviewPermission(r.id, 'granted')}>Grant permission
+ : setReviewPermission(r.id, 'denied')}>Revoke}
+ {r.disclosureStatus !== 'compliant' && setReviewDisclosure(r.id, 'compliant')}>Add disclosure}
+
+
+
+ );
+ })}
+
Per FTC and platform guidance, testimonials in ads require documented permission and clear disclosure. Unapproved review creative cannot publish.
+
+
{/* Conversion sync log */}
@@ -79,12 +250,29 @@ export default function ComplianceCenter() {
- {/* Recently resolved + AI audit */}
-
+ {/* AI audit & quality (spec §8 "AI audit queue", §10 AI quality) */}
+
+
+
+
+
+
+ All AI copy required human approval — 0 auto-published. {aiMetrics.aiPending > 0 ? `${aiMetrics.aiPending} AI-generated item(s) still awaiting review in the queue above.` : 'No AI items pending.'}
+
+
Recently approved
{resolved.map(a => (
-
+
{a.title}
{TYPE_LABEL[a.type]} · approved by {a.reviewer}
@@ -92,15 +280,153 @@ export default function ComplianceCenter() {
))}
-
-
-
- AI guardrail summary: 2 creatives auto-flagged this week (1 scarcity, 1 price claim), 0 auto-published. All AI copy required human approval.
-
-
+
+ {['all', ...Object.keys(AUDIT_CAT)].map(c => (
+
+ ))}
+
+
+
+
+
+ setAuditSearch(e.target.value)} placeholder="Search audit log…"
+ className="w-full rounded-lg border border-zinc-200 dark:border-white/10 bg-white dark:bg-zinc-900 pl-8 pr-2 py-1.5 text-xs text-zinc-700 dark:text-zinc-200 focus:outline-none focus:ring-2 focus:ring-amber-500" />
+
+
{filteredAudit.length} entries
+
+
+
+
+ | When |
+ Category |
+ Action |
+ Detail |
+ Actor |
+ Source |
+
+
+
+ {filteredAudit.length === 0 && | No audit entries match these filters. |
}
+ {filteredAudit.map(e => {
+ const cat = AUDIT_CAT[e.category] || AUDIT_CAT.campaign;
+ const CIcon = cat.icon;
+ return (
+
+ | {fmtDateTime(e.ts)} |
+
+ {CIcon && }{cat.label}
+ |
+ {e.action} |
+ {e.detail} |
+ {e.actor} |
+ {e.platform ? : —} |
+
+ );
+ })}
+
+
+
+ );
+}
+
+function AiStat({ value, label, color }) {
+ return (
+
+ );
+}
+
+const CONSENT_CHIP = { approved: 'approved', pending: 'pending', superseded: 'merged', blocked: 'blocked' };
+
+function ConsentFormBlock({ form, versions, onApprove, onBlock }) {
+ const [showHistory, setShowHistory] = useState(false);
+ const sorted = [...versions].sort((a, b) => b.version - a.version);
+ const live = sorted.find(v => v.status === 'approved');
+ const pending = sorted.filter(v => v.status === 'pending');
+ const history = sorted.filter(v => v.status === 'superseded' || v.status === 'blocked');
+
+ return (
+
+
+
+ {live &&
Live v{live.version}}
+
+
+ {/* Live version */}
+ {live &&
}
+
+ {/* Pending versions awaiting approval */}
+ {pending.map(v => (
+
+
+
v{v.version} pending approval
+
+ onApprove(v.id)}>Approve
+ onBlock(v.id)}>Block
+
+
+
+
+ ))}
+
+ {/* History */}
+ {history.length > 0 && (
+
+
+ {showHistory && (
+
+ {history.map(v => )}
+
+ )}
+
+ )}
+
+ );
+}
+
+function ConsentVersionView({ v, live, muted }) {
+ return (
+
+
+ v{v.version}
+ · {v.channel}
+ {!live && }
+ {v.reviewer ? `${v.reviewer} · ` : ''}{fmtDate(v.createdAt)}
+
+
"{v.text}"
+
+ Opt-out: {v.optOut}
+ {v.privacyPolicyUrl && Privacy: {v.privacyPolicyUrl}}
+
);
}
diff --git a/src/modules/socialAdsEngine/screens/ConnectedAccounts.jsx b/src/modules/socialAdsEngine/screens/ConnectedAccounts.jsx
index 6325d2f..18f72a5 100644
--- a/src/modules/socialAdsEngine/screens/ConnectedAccounts.jsx
+++ b/src/modules/socialAdsEngine/screens/ConnectedAccounts.jsx
@@ -6,11 +6,13 @@
* which platforms are ingest-only / report-only / full-publish, so nobody assumes
* automation that doesn't exist.
*/
-import React from 'react';
-import { Plug, RefreshCw, Webhook, KeyRound, Clock, AlertTriangle, CheckCircle2 } from 'lucide-react';
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import { Plug, RefreshCw, Webhook, KeyRound, Clock, AlertTriangle, CheckCircle2, AlarmClock, ShieldCheck, ShieldAlert, Upload, Download, X, FileUp } from 'lucide-react';
import { useSocialAds } from '../SocialAdsContext.jsx';
-import { PLATFORMS, CAPABILITY } from '../data/platforms.js';
+import { PLATFORMS, CAPABILITY, getPlatform } from '../data/platforms.js';
import { Card, StatusChip, CapabilityBadge, SectionHeader, Btn } from '../components/ui.jsx';
+import { toast } from 'sonner';
const ALL_CAPS = [
CAPABILITY.INGEST, CAPABILITY.REPORT, CAPABILITY.CONVERSION_SYNC,
@@ -29,12 +31,28 @@ function fmtDate(iso) {
return new Date(iso).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
}
+// Permission/scope status from the granted scopes (spec §8 "permission status").
+function permState(acc) {
+ if (acc?.status === 'connected') return acc.scopes?.length ? 'granted' : 'insufficient';
+ if (acc?.status === 'action_required') return 'insufficient';
+ return 'none';
+}
+const PERM_META = {
+ granted: { icon: ShieldCheck, color: 'text-emerald-600 dark:text-emerald-400', label: 'Granted' },
+ insufficient: { icon: ShieldAlert, color: 'text-amber-600 dark:text-amber-400', label: 'Insufficient' },
+ none: { icon: KeyRound, color: 'text-zinc-400', label: 'Not connected' },
+};
+
export default function ConnectedAccounts() {
- const { accounts, toggleAccount, testWebhook } = useSocialAds();
+ const { accounts, toggleAccount, testWebhook, reconnectAccount, importLeads } = useSocialAds();
const accountByPlatform = Object.fromEntries(accounts.map(a => [a.platform, a]));
+ const [importFor, setImportFor] = useState(null); // account being manually imported into
const connectedCount = accounts.filter(a => a.status === 'connected').length;
+ // Token-expiration / failure alerts (spec §8 MVP, §11, §12 A1 "token failure displays alert").
+ const tokenAlerts = accounts.filter(a => a.tokenStatus === 'expiring' || a.tokenStatus === 'revoked' || a.status === 'action_required');
+
return (
+ {/* Token-expiration / failure alerts (spec §8 MVP, §11, §12 A1) */}
+ {tokenAlerts.length > 0 && (
+
+
+
+ {tokenAlerts.length} account token{tokenAlerts.length > 1 ? 's' : ''} need attention — leads can be lost while a connection is down.
+
+
+ {tokenAlerts.map(a => {
+ const p = getPlatform(a.platform);
+ const PIcon = p?.icon;
+ const reason = a.tokenStatus === 'revoked' ? 'token revoked' : a.tokenStatus === 'expiring' ? `token expiring ${a.tokenExpiresAt}` : 'action required';
+ return (
+
+ {PIcon &&
}
+
{p?.short || a.platform}
+
— {reason}
+
+ setImportFor(a)}>Manual import
+ reconnectAccount(a.id)}>Reconnect
+
+
+ );
+ })}
+
+
+ )}
+
{PLATFORMS.map(p => {
const acc = accountByPlatform[p.id];
@@ -92,6 +138,32 @@ export default function ConnectedAccounts() {
+ {/* Permissions / scopes (spec §8 "permission status", §7 scopes_json) */}
+ {(() => {
+ const perm = permState(acc);
+ const pm = PERM_META[perm];
+ const PermIcon = pm.icon;
+ return (
+
+
+
Permissions
+
{PermIcon && } {pm.label}
+
+ {acc?.scopes?.length > 0 ? (
+
+ {acc.scopes.map(s => (
+ {s}
+ ))}
+
+ ) : (
+
+ {perm === 'none' ? 'No permissions granted — connect to authorize scopes.' : 'Missing required scopes — reconnect to re-grant.'}
+
+ )}
+
+ );
+ })()}
+
{acc?.cautions && (
{p.cautions}
@@ -110,11 +182,141 @@ export default function ConnectedAccounts() {
testWebhook(acc?.id)} disabled={!connected}>
Test lead
+ setImportFor(acc)} disabled={!acc} title="Manually import leads from a CSV">
+ Import
+
);
})}