// ============================================================ // ShieldTech Secret Weapon — System screens // Integrations · End-of-Day Review · Settings · Diagnostics // ============================================================ // ───────────────────────────────────────────────────────────── // GOOGLE / INTEGRATIONS STATUS // ───────────────────────────────────────────────────────────── function ScreenIntegrations({ goto }) { const [taskList, setTaskList] = React.useState('Secret Weapon'); const [calList, setCalList] = React.useState('ShieldTech (primary)'); const [testing, setTesting] = React.useState(false); const [integrations, setIntegrations] = React.useState([]); React.useEffect(() => { window.ShieldTechApi?.request?.('/api/integrations') .then(data => setIntegrations(data.integrations || [])) .catch(error => window.dispatchEvent(new CustomEvent('stw:api-error', { detail: { message: error.message, code: error.code || 'INTEGRATIONS_FAILED' } }))); }, []); const google = integrations.find(item => item.id === 'google-oauth'); const googleReady = google?.state === 'configured'; return (
goto('settings')} label="Settings" center="GOOGLE SYNC"/>
Integrations
The assistant only writes back to Google when these are connected. No fake sync.
{/* Big Google card */}
Google Workspace
{google?.detail || 'Google OAuth configuration required'}
Scopes granted
{['calendar.events', 'tasks', 'profile', 'email'].map(s => ( {s} ))}
window.ShieldTechApi?.connectGoogle?.()}>Reconnect { setTesting(true); try { await window.ShieldTechApi?.testIntegration?.('google-oauth'); } catch (error) { window.dispatchEvent(new CustomEvent('stw:api-error', { detail: { message: error.message, code: error.code || 'INTEGRATION_TEST_FAILED' } })); } finally { setTesting(false); } }}> {testing ? 'Testing…' : 'Test sync'}
{/* Tasks settings */}
Google Tasks
{googleReady ? 'Ready after OAuth connection' : 'Google OAuth not configured or not connected'}
Auto-create a task on every completed mission action. Updates reflect back here.
{/* Calendar settings */}
Google Calendar
{googleReady ? 'Ready after OAuth connection' : 'Google OAuth not configured or not connected'}
{/* Supabase error example */}
window.ShieldTechApi?.hydrateGlobals?.()} />
{/* Sync activity */}
Recent sync activity
{(integrations.length ? integrations : [{ state: 'missing', name: 'Integrations', detail: 'Run setup checks to populate status.' }]).map((row, i) => (
{row.name}: {row.detail}
))}
); } function SelectRow({ label, value, options, onChange }) { const [open, setOpen] = React.useState(false); return (
{open && (
{options.map(o => ( ))}
)}
); } // ───────────────────────────────────────────────────────────── // END-OF-DAY REVIEW // ───────────────────────────────────────────────────────────── function ScreenEod({ goto }) { return (
}/> {/* Hero summary */}
{/* Wins */}
What worked
{[ 'Penn Valley walkthrough confirmed for Thursday', 'Keystone pricing got a same-day reply', 'Wachter onboarding cleared the W2 question', ].map((w, i) => (
{w}
))}
{/* Wasted motion */}
Wasted motion
{[ { t: 'NorthStar Integrators — 5th no-answer', m: 'Recommend: mark dead and re-engage Q3.' }, { t: 'Riverline Property Group — vendor packet sat idle', m: 'Move to nurture, set Jun 5 check-in.' }, ].map((w, i) => (
{w.t}
{w.m}
))}
{/* Lessons */}
Lessons
Leading with the channel partner name shortened decision time on 2 of today’s calls. Keep doing that on camera RFPs.
{/* Lead moves */}
Lead moves today
{[ { name: 'Penn Valley SD', from: 'hot', to: 'warm' }, { name: 'Keystone Electrical', from: 'warm', to: 'warm', same: true, note: 'Stayed warm — pricing accepted' }, { name: 'Wachter', from: 'nurture', to: 'warm' }, { name: 'NorthStar Integrators', from: 'nurture', to: 'dead', pending: true }, ].map((m, i) => (
{m.name}
{m.same ? ( {m.note} ) : ( {m.from} {m.to} {m.pending && needs approval} )}
))}
{/* Tomorrow plan */}
Tomorrow’s first 3 actions
{[ { i: 1, t: 'Walkthrough at Penn Valley SD', sub: 'Thu 10 AM · leave 8:45 AM', kind: 'event' }, { i: 2, t: 'Bayonne Industrial Park walkthrough confirm', sub: 'Thu 8 AM · call to lock 11 AM', kind: 'call' }, { i: 3, t: 'Anixter integrator registration', sub: 'Thu before lunch · Bensalem branch', kind: 'admin' }, ].map(p => (
{p.i}
{p.t}
{p.sub}
))}
window.ShieldTechApi?.request?.('/api/eod').catch(error => window.dispatchEvent(new CustomEvent('stw:api-error', { detail: { message: error.message, code: error.code || 'EOD_FAILED' } })))}>Finish day
); } function EodStat({ label, value, sub, color = C.fg1 }) { return (
{label}
{value}
{sub &&
{sub}
}
); } // ───────────────────────────────────────────────────────────── // SETTINGS // ───────────────────────────────────────────────────────────── function ScreenSettings({ goto }) { const [mode, setMode] = React.useState('Aggressive'); const [callGoal, setCallGoal] = React.useState(12); const [notif, setNotif] = React.useState(true); const [pwa, setPwa] = React.useState(true); const [trades, toggleTrade] = useSelectedTrades(); const [tradeSheet, setTradeSheet] = React.useState(false); const tradeSummary = trades.length === 0 ? 'None selected' : trades.slice(0, 3).map(id => TRADE_BY_ID[id]?.short).filter(Boolean).join(' · ') + (trades.length > 3 ? ` · +${trades.length - 3} more` : ''); return (
} trailing={null}/>
ShieldTech Security LLC · PA · NJ · NY
{/* Mode picker */}
Coaching mode
{[ { id: 'Aggressive', label: 'Aggressive', sub: 'Push 12+ calls and faster follow-ups.', icon: 'flame', color: '#FCA5A5' }, { id: 'Normal', label: 'Normal', sub: 'Balanced call and admin rhythm.', icon: 'target', color: C.blueElectric }, { id: 'Light', label: 'Light', sub: 'Essential follow-ups only.', icon: 'moon', color: C.assistantSoft }, ].map((m, i, arr) => { const on = mode === m.id; return ( ); })}
{/* Daily targets */} {callGoal}
}/> Edit}/> } last/> Edit}/> {trades.length} } onClick={() => setTradeSheet(true)} last/>
Trade selections power the Opportunities command center — they decide which bids match, how they're scored, and how bids are built.
} onClick={() => goto('integrations')}/> } onClick={() => goto('diagnostics')}/> } onClick={() => goto('diagnostics')} last/> }/> } onClick={() => goto('diagnostics')}/> Run} onClick={() => window.ShieldTechApi?.resetData?.().catch(error => window.dispatchEvent(new CustomEvent('stw:api-error', { detail: { message: error.message, code: error.code || 'RESET_FAILED' } })))}/> Export} onClick={async () => { try { const data = await window.ShieldTechApi?.exportData?.(); const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = 'shieldtech-command-center-export.json'; a.click(); URL.revokeObjectURL(url); } catch (error) { window.dispatchEvent(new CustomEvent('stw:api-error', { detail: { message: error.message, code: error.code || 'EXPORT_FAILED' } })); } }} last/>
ShieldTech Secret Weapon · v2.4.1 · production
{tradeSheet && setTradeSheet(false)}/>} ); } // Trade multi-select — the single source of truth for opportunity generation. function TradeSelectSheet({ trades, toggleTrade, onClose }) { const byDiv = { '27': [], '28': [], '—': [] }; TRADE_CATALOG.forEach(t => (byDiv[t.div] || byDiv['—']).push(t)); const groups = [ { label: 'Division 28 · Electronic safety & security', items: byDiv['28'] }, { label: 'Division 27 · Communications', items: byDiv['27'] }, { label: 'Service', items: byDiv['—'] }, ]; return (
e.stopPropagation()} className="slide-up" style={{ width: '100%', maxHeight: '88%', overflowY: 'auto', background: C.card, borderTop: `1px solid ${C.borderStrong}`, borderRadius: '24px 24px 0 0', padding: '8px 18px 24px', boxShadow: '0 -16px 50px rgba(0,0,0,0.5)', }}>
Your trades
{trades.length} selected · drives all opportunity matching
{groups.map(g => (
{g.label}
{g.items.map(t => { const on = trades.includes(t.id); return ( ); })}
))}
Done · {trades.length} trades
); } function SettingsGroup({ label, children }) { return (
{label}
{children}
); } function SettingRow({ icon, tint = C.cardElev, tintIcon = C.fg2, title, detail, right, last, onClick }) { return (
{title}
{detail &&
{detail}
}
{right}
); } // ───────────────────────────────────────────────────────────── // DIAGNOSTICS / HEALTH // ───────────────────────────────────────────────────────────── function ScreenDiagnostics({ goto }) { return (
goto('settings')} label="Settings" center="DIAGNOSTICS"/>
System health
9 ok · 2 warn · 1 error
{DIAGNOSTICS.map(d => )}
window.ShieldTechApi?.hydrateGlobals?.()}>Run all checks
); } function DiagnosticRow({ d }) { const colors = { ok: { fg: '#86EFAC', bg: '#052E16', border: '#166534', icon: 'check' }, warn: { fg: '#FCD34D', bg: '#1A1306', border: '#92400E', icon: 'alertTriangle' }, error: { fg: '#FCA5A5', bg: '#1B0908', border: '#7F1D1D', icon: 'x' }, }; const c = colors[d.status]; return (
{d.label}
{d.detail}
{d.fix && ( )} ); } Object.assign(window, { ScreenIntegrations, ScreenEod, ScreenSettings, ScreenDiagnostics, SettingsGroup, SettingRow, DiagnosticRow, EodStat, SelectRow, });