// Main app: routing, role + scenario state, layout, drawer/modal orchestration.
const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
"density": "balanced",
"sidebarStyle": "dark",
"scenario": "busy",
"viewport": "auto"
}/*EDITMODE-END*/;
const {
Sidebar, PageHeader, Drawer, Modal, WidgetCard, Empty,
AgentStrip, BlockersBoard, Priorities, ClientHealth, GoalsTracker, TranscriptRecs, ChurnRisk,
ClientDrawerBody, KPIStrip, FocusBox,
AtRiskAccounts, NextStepsModal, NeglectedAccounts, MyTasks, CreativeLogGaps, AccountWins,
VukasiKPIStrip, ToastProvider,
AgentsRoute, ClientHealthRoute, AtRiskRoute, CreativeLogRoute, PlaceholderRoute,
BlockersRoute, GoalsRoute, TranscriptsRoute, TasksRoute, WinsRoute, NeglectedRoute,
} = window.DC;
function App() {
const [tweaks, setTweak] = useTweaks(TWEAK_DEFAULTS);
const [role, setRole] = useState('owner');
const [view, setView] = useState('overview');
const [collapsed, setCollapsed] = useState(false);
const [drawerSlug, setDrawerSlug] = useState(null);
const [stepsAccount, setStepsAccount] = useState(null);
const [agentExpanded, setAgentExpanded] = useState(null);
// Auto-collapse sidebar on phone widths + when navigating
useEffect(() => {
const mq = window.matchMedia('(max-width: 760px)');
const apply = () => setCollapsed(mq.matches);
apply();
mq.addEventListener('change', apply);
return () => mq.removeEventListener('change', apply);
}, []);
// Cross-component nav events (e.g. drawer "View all → transcripts")
useEffect(() => {
const onNav = (e) => { setView(e.detail); setDrawerSlug(null); if (window.matchMedia('(max-width: 760px)').matches) setCollapsed(true); };
window.addEventListener('dc:nav', onNav);
return () => window.removeEventListener('dc:nav', onNav);
}, []);
const navigate = (v) => {
setView(v);
if (window.matchMedia('(max-width: 760px)').matches) setCollapsed(true);
};
const scenarios = window.DC_DATA.SCENARIOS;
const scenarioKey = tweaks.scenario || 'busy';
const henryData = scenarios[scenarioKey].henry;
const vukasiData = scenarios[scenarioKey].vukasi;
const [blockers, setBlockers] = useState(henryData.data.blockers);
const [priorities, setPriorities] = useState(henryData.data.priorities);
const [prioritiesSource, setPrioritiesSource] = useState('mock');
const [transcriptRecs, setTranscriptRecs] = useState(henryData.data.transcriptRecs);
useEffect(() => {
setBlockers(henryData.data.blockers);
if (prioritiesSource === 'mock') setPriorities(henryData.data.priorities);
setTranscriptRecs(henryData.data.transcriptRecs);
}, [scenarioKey]);
// Fetch real priorities from the FastAPI backend (Henry only).
// Falls back to mock data on any failure so the widget still renders.
useEffect(() => {
if (role !== 'owner') return;
const ctrl = new AbortController();
fetch('https://dashboard-api.digitalcontractors.io/api/priorities', {
credentials: 'include',
signal: ctrl.signal,
})
.then(r => r.ok ? r.json() : Promise.reject(new Error('http ' + r.status)))
.then(d => {
if (Array.isArray(d.priorities) && d.priorities.length > 0) {
setPriorities(d.priorities);
setPrioritiesSource('api');
}
})
.catch(err => {
if (err.name !== 'AbortError') console.warn('priorities fetch failed; using mock', err);
});
return () => ctrl.abort();
}, [role]);
useEffect(() => {
document.body.dataset.density = tweaks.density;
document.body.dataset.viewport = tweaks.viewport;
document.body.dataset.sidebar = tweaks.sidebarStyle;
}, [tweaks.density, tweaks.viewport, tweaks.sidebarStyle]);
useEffect(() => { if (tweaks.viewport === 'phone') setCollapsed(true); }, [tweaks.viewport]);
const onPickClient = (slug) => setDrawerSlug(slug);
const data = role === 'owner' ? henryData.data : vukasiData.data;
const isPhone = tweaks.viewport === 'phone';
const goOverview = () => setView('overview');
// Per-route shells render their own page; only Overview uses the grid layout.
const renderRoute = () => {
if (view === 'overview') return null;
if (role === 'owner') {
if (view === 'agents') return ;
if (view === 'clients') return ;
if (view === 'blockers') return ;
if (view === 'goals') return ;
if (view === 'transcripts') return ;
if (view === 'tasks') return ;
// Owner-elevated TEAM routes — reuse Vukasi routes, read-only.
const vData = vukasiData.data;
if (view === 'team-at-risk') return ;
if (view === 'team-neglected') return ;
if (view === 'team-creative') return ;
if (view === 'team-wins') return ;
} else {
if (view === 'at-risk') return ;
if (view === 'creative') return ;
if (view === 'neglected') return ;
if (view === 'tasks') return ;
if (view === 'wins') return ;
}
return null;
};
const route = renderRoute();
return (
setCollapsed(true)}
sidebarStyle={tweaks.sidebarStyle} />
setTweak('scenario', s)}
onMenuToggle={() => setCollapsed(c => !c)} />
{route ? (
{route}
) : (
{role === 'owner' ? (
{data.kpis &&
}
{data.focus &&
}
setView('blockers')}>
setView('goals')}>
setView('transcripts')}>
) : (
{data.kpis &&
}
setView('tasks')}>
setView('neglected')}>
setView('creative')}>
)}
setDrawerSlug(null)}>
setDrawerSlug(null)} />
setStepsAccount(null)}>
setStepsAccount(null)} />
setTweak('density', v)} />
setTweak('sidebarStyle', v)} />
setTweak('viewport', v)} />
setTweak('scenario', v)} />
{ setRole(v); setView('overview'); }} />
);
}
// Wraps an Overview widget with a "View all →" affordance in its top-right.
function ViewAllShell({ title, onMore, children }) {
return (
{children}
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render();