);
}
function W_RecentNotices({ api, overview }) {
/* 2026-05-19 — computes real notices from /dashboard/overview:
- Outdated plugin versions (plugin_version !== latest_plugin_version)
- Failed plugin operations (event_type === 'failed' in recent_activity)
- Offline sites (last_connected_at > 7 days ago)
No backend changes needed — derives from data already in context.
When the notices/alerts system ships, this becomes a real /notices fetch. */
if (!overview) {
return
Loading…
;
}
const notices = [];
const fmtSiteShort = (url) => {
if (!url) return '—';
try { return new URL(url).hostname; } catch (e) { return url.replace(/^https?:\/\//, ''); }
};
/* Outdated plugin versions */
const latest = overview.stats?.latest_plugin_version;
(overview.sites || []).forEach(s => {
if (latest && s.plugin_version && s.plugin_version !== latest) {
notices.push({
sev: 'warn',
t: `Plugin update available — v${latest} (currently v${s.plugin_version})`,
site: fmtSiteShort(s.site_url),
ago: 'now',
});
}
});
/* Offline sites — last connected > 7 days ago (also flagged by is_online: false) */
(overview.sites || []).forEach(s => {
if (s.is_online === false && s.last_connected_at) {
const days = Math.floor((Date.now() - new Date(s.last_connected_at).getTime()) / (1000*60*60*24));
notices.push({
sev: 'critical',
t: `Site offline — no plugin check-in for ${days} day${days===1?'':'s'}`,
site: fmtSiteShort(s.site_url),
ago: `${days}d`,
});
}
});
/* Failed operations from recent_activity */
(overview.recent_activity || []).forEach(a => {
if (a.event === 'failed') {
notices.push({
sev: 'critical',
t: `Operation failed — ${a.title}`,
site: fmtSiteShort(a.site_url),
ago: a.at ? Math.floor((Date.now() - new Date(a.at).getTime()) / 60000) + 'm' : '—',
});
}
});
/* Cap to 5 most-relevant notices */
const shown = notices.slice(0, 5);
if (shown.length === 0) {
return (
🎉 All clear — no notices right now.
Plugin updates, failed operations, and offline sites will appear here.
);
}
return (
{shown.map((n, i) => (
{n.sev.toUpperCase().slice(0,4)}
{n.t}
{n.site} · {n.ago} ago
))}
);
}
function W_UpcomingWork({ overview }) {
/* 2026-05-19 — Uses /dashboard/overview.upcoming_work (server v1.10.8+)
which returns pending_operations.{pending,claimed} for this account.
Falls back to legacy filter on recent_activity for older server versions. */
if (!overview) {
return
);
}
/* ── DASHBOARD SHELL ────────────────────────────────────────────── */
function Dashboard({ s, api }) {
const r = window.WPSBD.ROLES[s.role];
const userTier = ROLE_TIER[s.role];
const isSA = s.role === 'sa';
const [tab, setTab] = useState(() => localStorage.getItem('wpsbd-dash-tab') || 'overview');
const [editing, setEditing] = useState(false);
const [layout, setLayout] = useState(() => {
const saved = localStorage.getItem(`wpsbd-dash-layout-${s.role}`);
if (saved) try { return JSON.parse(saved); } catch {}
return DEFAULT_LAYOUT[s.role] || DEFAULT_LAYOUT.customer;
});
/* per-widget viz preference */
const [vizPrefs, setVizPrefs] = useState(() => {
const saved = localStorage.getItem('wpsbd-dash-viz');
if (saved) try { return JSON.parse(saved); } catch {}
return { 'stats-chart':'area', 'seo-snapshot':'list', 'scan-volume':'bar' };
});
useEffect(() => { localStorage.setItem('wpsbd-dash-tab', tab); }, [tab]);
useEffect(() => { localStorage.setItem(`wpsbd-dash-layout-${s.role}`, JSON.stringify(layout)); }, [layout, s.role]);
useEffect(() => { localStorage.setItem('wpsbd-dash-viz', JSON.stringify(vizPrefs)); }, [vizPrefs]);
/* 2026-05-19 — fetch real account dashboard data (replaces hardcoded acme.co
placeholders in widget renderers). Refreshes every 60s. */
const [overview, setOverview] = useState(null);
const [overviewErr, setOverviewErr] = useState(null);
useEffect(() => {
let cancelled = false;
function fetchOverview() {
const RAILWAY = (window.WPSBD && window.WPSBD.railwayUrl)
|| 'https://wpsitebeam-railway-api-production.up.railway.app';
const token = (window.WPSB && window.WPSB.getToken && window.WPSB.getToken()) || window.currentToken;
if (!token) { setOverviewErr('No token'); return; }
fetch(`${RAILWAY}/dashboard/overview`, {
headers: { 'Authorization': 'Bearer ' + token },
})
.then(r => r.json().then(b => ({ ok: r.ok, status: r.status, body: b })))
.then(({ ok, status, body }) => {
if (cancelled) return;
if (!ok) { setOverviewErr(`HTTP ${status}: ${body.error || ''}`); return; }
setOverview(body);
setOverviewErr(null);
})
.catch(e => { if (!cancelled) setOverviewErr(e.message); });
}
fetchOverview();
const id = setInterval(fetchOverview, 60_000);
return () => { cancelled = true; clearInterval(id); };
}, []);
/* Derived stat values — fall back to "—" when data hasn't loaded */
const sitesCount = overview?.stats?.sites_count ?? null;
const sitesOnline = overview?.stats?.sites_online ?? null;
const latestVersion = overview?.stats?.latest_plugin_version ?? null;
const outdatedCount = overview?.stats?.outdated_count ?? null;
const openIssues = overview?.stats?.open_issues_count ?? null;
/* Available widgets to add: at-or-below user's tier (SA gets all),
filtered to current panel, excluding ones already in layout. */
const addable = useMemo(() => WIDGETS.filter(w =>
w.panel === tab &&
!layout.includes(w.id) &&
(isSA || w.tier <= userTier)
), [tab, layout, userTier, isSA]);
/* Active widgets for this tab, in user's order */
const activeWidgets = layout
.map(id => WIDGETS.find(w => w.id === id))
.filter(w => w && w.panel === tab && (isSA || w.tier <= userTier));
const removeWidget = id => setLayout(L => L.filter(x => x !== id));
const addWidget = id => setLayout(L => [...L, id]);
const resetLayout = () => setLayout(DEFAULT_LAYOUT[s.role] || DEFAULT_LAYOUT.customer);
/* Stat cards stay above the tabs — they're cross-panel */
return (
}
/>
{/* Top stat strip — same on every tab. 2026-05-19: wired to real
per-account data from /dashboard/overview. Falls back to "—"
while loading or if the fetch fails. */}