/* ======================================================================== screens-dashboard.jsx — MVP Command Centre ======================================================================== */ const DashboardScreen = () => { const getCount = (key) => { try { const a = JSON.parse(localStorage.getItem(key) || "[]"); return Array.isArray(a) ? a.length : 0; } catch { return 0; } }; const getScheduledCount = (key) => { try { const a = JSON.parse(localStorage.getItem(key) || "[]"); if (!Array.isArray(a)) return 0; return a.filter(p => p.date && String(p.date).match(/\d{4}-\d{2}-\d{2}/) && !["posted","published","sent"].includes(String(p.status||"").toLowerCase())).length; } catch { return 0; } }; const getNextPost = () => { try { const ig = JSON.parse(localStorage.getItem("boltkit.scheduledPosts.v1") || "[]"); const fb = JSON.parse(localStorage.getItem("boltkit.fbPosts.v1") || "[]"); const all = [...(Array.isArray(ig)?ig:[]), ...(Array.isArray(fb)?fb:[])]; const now = new Date(); const upcoming = all .filter(p => p.date && String(p.date).match(/\d{4}-\d{2}-\d{2}/) && !["posted","published","sent"].includes(String(p.status||"").toLowerCase())) .map(p => ({ ...p, _at: new Date(`${p.date}T${p.time||"09:00"}:00`) })) .filter(p => p._at >= now) .sort((a,b) => a._at - b._at); return upcoming[0] || null; } catch { return null; } }; const proj = typeof currentProject === "function" ? currentProject() : {}; const hasProject = Boolean(proj?.name || proj?.url); const [counts, setCounts] = React.useState(() => ({ igScheduled: getScheduledCount("boltkit.scheduledPosts.v1"), fbScheduled: getScheduledCount("boltkit.fbPosts.v1"), igDrafts: getCount("boltkit.igPosts.v2"), fbDrafts: getCount("boltkit.fbDraftPosts.v1"), nextPost: getNextPost(), })); const [project, setProject] = React.useState(proj); React.useEffect(() => { const refresh = () => setCounts({ igScheduled: getScheduledCount("boltkit.scheduledPosts.v1"), fbScheduled: getScheduledCount("boltkit.fbPosts.v1"), igDrafts: getCount("boltkit.igPosts.v2"), fbDrafts: getCount("boltkit.fbDraftPosts.v1"), nextPost: getNextPost(), }); window.addEventListener("boltkit:saved", refresh); const t = setInterval(refresh, 8000); return () => { clearInterval(t); window.removeEventListener("boltkit:saved", refresh); }; }, []); React.useEffect(() => { const reload = () => setProject(typeof currentProject === "function" ? currentProject() : {}); window.addEventListener("boltkit:project-switched", reload); return () => window.removeEventListener("boltkit:project-switched", reload); }, []); const go = (r) => window.BoltKitGo ? window.BoltKitGo(r) : (window.location.hash = r); const totalScheduled = counts.igScheduled + counts.fbScheduled; const totalDrafts = counts.igDrafts + counts.fbDrafts; // Format next post time const nextLabel = counts.nextPost ? (() => { const d = counts.nextPost._at; const diff = Math.round((d - new Date()) / 60000); if (diff < 60) return `in ${diff}m`; if (diff < 1440) return `in ${Math.floor(diff/60)}h`; return d.toLocaleDateString("en-GB", { weekday: "short", day: "numeric", month: "short" }) + " · " + (counts.nextPost.time || "09:00"); })() : null; const StatChip = ({ label, value, tone, onClick }) => ( ); return (
{/* Header */}
{hasProject ? (project.name || "MY PROJECT") : "DASHBOARD"}

{hasProject ? "WHAT ARE WE\nMAKING?" : "LET'S GET\nSTARTED."}

{hasProject && (

{project.description || project.url || "Generate images, let AI write the captions, then auto-schedule into the calendar."}

)}
{!hasProject ? ( /* ── No project yet ─────────────────────────────────────────── */
Create your first project

Add a project name, description, target audience and tone of voice. Then generate images and auto-schedule them into the calendar.

) : ( <> {/* ── Stats row ────────────────────────────────────────────── */}
go("ig-calendar")} /> go("fb-calendar")} /> go("ig-generate")} /> go("fb-generate")} />
{/* ── Next post ────────────────────────────────────────────── */} {nextLabel && (
NEXT POST {nextLabel.toUpperCase()} · {counts.nextPost.title || counts.nextPost.caption?.slice(0,40) || "Untitled"}
)} {/* ── Primary actions ──────────────────────────────────────── */}
{/* ── Quick actions ─────────────────────────────────────────── */}
Quick actions
{/* ── Flow guide ────────────────────────────────────────────── */}
{[ { n: "1", l: "Generate", s: "Upload images, AI writes captions", r: "ig-generate" }, { n: "2", l: "Approve", s: "Review posts, edit captions", r: "ig-generate" }, { n: "3", l: "Schedule", s: "Auto-schedule 5/day or custom", r: "ig-calendar" }, { n: "4", l: "Auto-post", s: "Posts go live when IG connected", r: "ig-connect" }, ].map((step, i, arr) => ( {i < arr.length - 1 && } ))}
)}
); }; /* ── ProjectDetailScreen — kept for route compat ─────────────────────────── */ const ProjectDetailScreen = () => { const p = typeof currentProject === "function" ? currentProject() : {}; return (

{p.name || "My Project"}

); }; /* Discard unused legacy components */ const _BeginnerHelpPanel = () => null; const _FirstRunChecklist = () => null; Object.assign(window, { DashboardScreen, ProjectDetailScreen });