/* ======================================================================== screens-facebook.jsx — Facebook Page scheduler + calendar ====================================================================== */ let FacebookCalendarScreen = () => (
FACEBOOK CALENDAR

Loading…

); /* ── Facebook news-feed post card ──────────────────────────────────────── */ const FbPostCard = ({ post, onPublish, publishingId, fbAccount }) => { const [expanded, setExpanded] = React.useState(false); const img = post.imageUrl || post.publicUrl; const isPostedSt = ["Posted", "posted", "published", "sent"].includes(String(post.status || "").toLowerCase()); const hashStr = Array.isArray(post.hashtags) ? post.hashtags.map(h => h.startsWith("#") ? h : `#${h}`).join(" ") : (post.hashtags || ""); const captionFull = [post.hook, post.caption, hashStr].filter(Boolean).join("\n\n"); const captionShort = captionFull.length > 180 ? captionFull.slice(0, 180) + "…" : captionFull; const schedAt = post.date ? new Date(`${post.date}T${post.time || "09:00"}:00Z`) : null; const timeLabel = isPostedSt && post.postedAt ? (() => { const d = new Date(post.postedAt); const diff = Math.max(0, Math.floor((Date.now() - d) / 60000)); if (diff < 60) return `${diff}m ago`; if (diff < 1440) return `${Math.floor(diff/60)}h ago`; return d.toLocaleDateString("en-GB", { day: "numeric", month: "short" }); })() : schedAt ? schedAt.toLocaleDateString("en-GB", { day: "numeric", month: "short" }) + " · " + (post.time || "09:00") : "Draft"; return (
{/* FB post header */}
S
SHIFT Performance
{timeLabel} ·
···
{/* Caption */} {captionFull && (
{expanded ? captionFull : captionShort} {captionFull.length > 180 && ( setExpanded(v => !v)} style={{ color: "#B0B3B8", cursor: "pointer", marginLeft: 4, fontSize: 13 }} > {expanded ? " See less" : " See more"} )}
)} {/* Image */} {img && (
)} {/* Status badge */}
{isPostedSt ? "POSTED" : schedAt ? `SCHEDULED · ${timeLabel}` : "DRAFT"} {post.type && {String(post.type).toUpperCase()}}
{/* Engagement (decorative) */}
👍❤️🔥 —
— comments
{/* Action bar */}
{[["👍", "Like"], ["💬", "Comment"], ["↗", "Share"]].map(([ico, label]) => (
{ico}{label}
))}
{/* Publish now button (unposted only) */} {!isPostedSt && (
)}
); }; FacebookCalendarScreen = () => { const initialScheduledQueue = (() => { try { return JSON.parse(localStorage.getItem("boltkit.fbPosts.v1") || "[]"); } catch { return []; } })(); const [queuePosts, setQueuePosts] = React.useState(Array.isArray(initialScheduledQueue) ? initialScheduledQueue : []); const firstScheduled = queuePosts.find(post => post.date)?.date || new Date().toISOString().slice(0, 10); const [visibleMonth, setVisibleMonth] = React.useState(() => { const start = new Date(`${firstScheduled}T12:00:00`); return new Date(start.getFullYear(), start.getMonth(), 1, 12); }); const [selectedDate, setSelectedDate] = React.useState(firstScheduled); const [selectedPost, setSelectedPost] = React.useState(queuePosts[0]?.id || "fb-post-01"); const [time, setTime] = React.useState(queuePosts[0]?.time || "09:00"); const [platforms, setPlatforms] = React.useState(["Facebook"]); const [calendarMode, setCalendarMode] = React.useState("Month"); const [publishingId, setPublishingId] = React.useState(null); const [fbAccount, setFbAccount] = React.useState(null); const [autoDateStatus, setAutoDateStatus] = React.useState(""); const [autopilotState, setAutopilotState] = React.useState("idle"); // idle | pushing | on | error const [feedMode, setFeedMode] = React.useState("All"); // All | Upcoming | Posted const [fbDragPostId, setFbDragPostId] = React.useState(null); const [fbDragOverDate, setFbDragOverDate] = React.useState(null); const [confirmClear, setConfirmClear] = React.useState(false); // Auto-jump ref: navigates visibleMonth to first scheduled post ONCE when posts first load const hasAutoJumpedFB = React.useRef(false); React.useEffect(() => { if (hasAutoJumpedFB.current || !queuePosts.length) return; const first = queuePosts.find(p => p.date && String(p.date).match(/\d{4}-\d{2}-\d{2}/)); if (!first) return; const d = new Date(`${first.date}T12:00:00`); setVisibleMonth(new Date(d.getFullYear(), d.getMonth(), 1, 12)); setSelectedDate(first.date); hasAutoJumpedFB.current = true; }, [queuePosts.length]); React.useEffect(() => { fetch("/api/meta/status").then(r => r.json()).then(d => { if (d.accounts?.[0]) setFbAccount(d.accounts[0]); }).catch(() => {}); }, []); // Reload queue whenever generate screen (or any screen) writes new posts React.useEffect(() => { const reload = () => { try { const posts = JSON.parse(localStorage.getItem("boltkit.fbPosts.v1") || "[]"); setQueuePosts(Array.isArray(posts) ? posts : []); } catch {} }; window.addEventListener("boltkit:saved", reload); const t = setInterval(reload, 10000); return () => { clearInterval(t); window.removeEventListener("boltkit:saved", reload); }; }, []); // Ref to trigger an immediate server reload from outside this effect (e.g. on project switch) const fbLoadTrigger = React.useRef(null); // Load from Supabase on mount — syncs status changes; never removes local posts React.useEffect(() => { let running = false; const loadFromServer = async () => { if (running) return; // prevent overlapping fetches running = true; try { const proj = (() => { try { return JSON.parse(localStorage.getItem("boltkit.currentProject.v1") || "{}"); } catch { return {}; } })(); const ctrl = new AbortController(); const timer = setTimeout(() => ctrl.abort(), 20000); let resp; try { resp = await fetch("/api/supabase-facebook-posts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "load", project: proj }), signal: ctrl.signal, }); } finally { clearTimeout(timer); } const data = await resp.json(); if (!data.ok || !Array.isArray(data.posts)) return; const local = (() => { try { return JSON.parse(localStorage.getItem("boltkit.fbPosts.v1") || "[]"); } catch { return []; } })(); if (!data.posts.length) return; // server empty — keep whatever local has if (!local.length) { // Don't restore from server if the user explicitly cleared within the last 30 min try { const clrAt = parseInt(localStorage.getItem("boltkit.fbCalClearedAt") || "0"); if (clrAt && (Date.now() - clrAt) < 60 * 60 * 1000) return; } catch {} // First load with empty local: populate from server try { localStorage.setItem("boltkit.fbPosts.v1", JSON.stringify(data.posts)); } catch {} setQueuePosts(data.posts); return; } // Status-sync mode: update statuses from server; keep all local posts intact const serverMap = new Map(data.posts.map(p => [p.id, p])); const localIds = new Set(local.map(p => p.id)); let changed = false; const synced = local.map(p => { const sv = serverMap.get(p.id); if (!sv) return p; if (sv.status !== p.status) { changed = true; return { ...p, status: sv.status }; } return p; }); // Add posts from server that local doesn't know about (cross-device sync) const serverOnly = data.posts.filter(p => !localIds.has(p.id)); if (serverOnly.length) { changed = true; synced.push(...serverOnly); } if (changed) { try { localStorage.setItem("boltkit.fbPosts.v1", JSON.stringify(synced)); } catch {} setQueuePosts(synced); } } catch {} finally { running = false; } }; fbLoadTrigger.current = loadFromServer; loadFromServer(); const t = setInterval(loadFromServer, 120000); // refresh from server every 2 min return () => { clearInterval(t); fbLoadTrigger.current = null; }; }, []); // When user switches project — clear this project's local cache and reload from Supabase React.useEffect(() => { const onSwitch = () => { try { localStorage.setItem("boltkit.fbPosts.v1", JSON.stringify([])); } catch {} setQueuePosts([]); setDraftQueue([]); setTimeout(() => fbLoadTrigger.current?.(), 150); }; window.addEventListener("boltkit:project-switched", onSwitch); return () => window.removeEventListener("boltkit:project-switched", onSwitch); }, []); // Count of unscheduled drafts in the generate-screen store const [draftQueue, setDraftQueue] = React.useState(() => { try { return JSON.parse(localStorage.getItem("boltkit.fbDraftPosts.v1") || "[]"); } catch { return []; } }); React.useEffect(() => { const reload = () => { try { setDraftQueue(JSON.parse(localStorage.getItem("boltkit.fbDraftPosts.v1") || "[]")); } catch {} }; window.addEventListener("boltkit:saved", reload); const t = setInterval(reload, 8000); return () => { clearInterval(t); window.removeEventListener("boltkit:saved", reload); }; }, []); const [scheduling, setScheduling] = React.useState(false); const [importPerDay, setImportPerDay] = React.useState(4); // posts/day for the import (1-12) // Calendar block popup (click on an event chip → edit/delete/move) const [calPopup, setCalPopup] = React.useState(null); // { post, x, y } const openCalPopup = (e, post) => { e.stopPropagation(); const rect = e.currentTarget.getBoundingClientRect(); const x = Math.min(rect.left, window.innerWidth - 310); const y = Math.min(rect.bottom + 6, window.innerHeight - 340); setCalPopup({ post: { ...post }, origId: post.id, x, y }); }; const updateCalPopupField = (field, value) => { setCalPopup(prev => prev ? { ...prev, post: { ...prev.post, [field]: value } } : prev); }; const saveCalPopup = () => { if (!calPopup) return; const next = queuePosts.map(p => p.id === calPopup.origId ? { ...p, ...calPopup.post } : p); saveCalendarQueue(next); // Jump calendar to new date if moved if (calPopup.post.date && calPopup.post.date !== calPopup.post.date) { const d = new Date(`${calPopup.post.date}T12:00:00`); setVisibleMonth(new Date(d.getFullYear(), d.getMonth(), 1, 12)); setSelectedDate(calPopup.post.date); } setCalPopup(null); window.BoltKitToast?.({ msg: "Post updated.", type: "success" }); }; const deleteCalPopup = () => { if (!calPopup) return; const next = queuePosts.filter(p => p.id !== calPopup.origId); saveCalendarQueue(next); setCalPopup(null); window.BoltKitToast?.({ msg: "Post removed from calendar.", type: "success" }); }; // Import all generate-screen drafts into the calendar with auto-assigned dates const importDraftsToCalendar = async () => { let drafts = []; try { drafts = JSON.parse(localStorage.getItem("boltkit.fbDraftPosts.v1") || "[]"); } catch {} if (!Array.isArray(drafts) || !drafts.length) { window.BoltKitToast?.({ msg: "No Facebook posts in the generate queue.", type: "error" }); return; } setScheduling(true); try { const ppd = Math.max(1, Math.min(12, importPerDay)); // Distribute times evenly between 08:00 and 20:00 const genTimes = (n) => { if (n <= 1) return ["09:00"]; const START = 8 * 60, END = 20 * 60; return Array.from({ length: n }, (_, i) => { const mins = Math.round(START + (END - START) * i / (n - 1)); return `${String(Math.floor(mins / 60)).padStart(2,"0")}:${String(mins % 60).padStart(2,"0")}`; }); }; const TIMES = genTimes(ppd); const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1); tomorrow.setHours(0, 0, 0, 0); const dKey = (d) => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`; const toSchedule = drafts.map((post, i) => { const d = new Date(tomorrow); d.setDate(d.getDate() + Math.floor(i / ppd)); return { ...post, date: dKey(d), time: TIMES[i % ppd], status: "Scheduled", platforms: ["Facebook"] }; }); let existing = []; try { existing = JSON.parse(localStorage.getItem("boltkit.fbPosts.v1") || "[]"); } catch {} if (!Array.isArray(existing)) existing = []; const ids = new Set(toSchedule.map(p => p.id)); const merged = [...toSchedule, ...existing.filter(p => !ids.has(p.id))]; // Save to localStorage FIRST so the boltkit:saved reload sees the new data try { localStorage.setItem("boltkit.fbPosts.v1", JSON.stringify(merged)); } catch (e) { console.warn("[importDraftsToCalendar] localStorage save failed:", e.message); } // Now update React state and notify other components setQueuePosts(merged); window.dispatchEvent(new Event("boltkit:saved")); // Jump calendar to first imported date const first = new Date(`${toSchedule[0].date}T12:00:00`); setVisibleMonth(new Date(first.getFullYear(), first.getMonth(), 1, 12)); setSelectedDate(toSchedule[0].date); const days = Math.ceil(drafts.length / ppd); window.BoltKitToast?.({ msg: `${toSchedule.length} posts imported · ${ppd}/day across ${days} days.`, type: "success" }); // Push to server in background (non-blocking) try { let proj = {}; try { proj = JSON.parse(localStorage.getItem("boltkit.currentProject.v1") || "{}"); } catch {} await fetch("/api/supabase-facebook-posts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "save", project: proj, posts: merged }), }); } catch (e) { console.warn("[importDraftsToCalendar] server sync failed:", e.message); } } catch (e) { console.error("[importDraftsToCalendar] failed:", e.message); window.BoltKitToast?.({ msg: `Import failed: ${e.message}`, type: "error" }); } finally { setScheduling(false); } }; const postMissedNow = async () => { const now = new Date(); const missed = queuePosts.filter(p => { const at = p.date ? new Date(`${p.date}T${p.time || "09:00"}:00Z`) : null; const st = String(p.status || "").toLowerCase(); return at && at <= now && !["posted", "published", "sent"].includes(st); }); if (!missed.length) return; const base = new Date(); const rescheduled = missed.map((p, i) => { const slot = new Date(base.getTime() + (i + 1) * 10 * 60 * 1000); const d = slot.toISOString().slice(0, 10); const hh = String(slot.getHours()).padStart(2, "0"); const mm = String(slot.getMinutes()).padStart(2, "0"); return { ...p, date: d, time: `${hh}:${mm}`, status: "Scheduled" }; }); const ids = new Set(rescheduled.map(p => p.id)); const next = queuePosts.map(p => ids.has(p.id) ? rescheduled.find(r => r.id === p.id) : p); saveCalendarQueue(next); window.BoltKitToast?.({ msg: `${missed.length} missed post${missed.length !== 1 ? "s" : ""} rescheduled in 10-min intervals.`, type: "success" }); try { let projectData = {}; try { projectData = JSON.parse(localStorage.getItem("boltkit.currentProject.v1") || "{}"); } catch {} await fetch("/api/supabase-facebook-posts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "save", project: projectData, posts: next }), }); } catch {} }; // Nuclear clear — delete EVERYTHING const clearFbSchedule = () => { const kept = []; try { localStorage.setItem("boltkit.fbCalClearedAt", String(Date.now())); } catch {} try { localStorage.setItem("boltkit.fbPosts.v1", JSON.stringify(kept)); } catch {} setQueuePosts(kept); setAutopilotState("idle"); setConfirmClear(false); window.BoltKitToast?.({ msg: "Clearing… please wait.", type: "success" }); const project = (() => { try { return JSON.parse(localStorage.getItem("boltkit.currentProject.v1") || "{}"); } catch { return {}; } })(); const supaDelete = typeof apiJson === "function" ? apiJson("/api/supabase-facebook-posts", { action: "save", project, posts: kept }) .then(() => "ok") .catch(err => { window.BoltKitToast?.({ msg: "DB clear failed — will reload anyway.", type: "error" }); return "error"; }) : Promise.resolve("skip"); Promise.race([supaDelete, new Promise(r => setTimeout(() => r("timeout"), 10000))]).then(result => { window.BoltKitToast?.({ msg: result === "ok" ? "Cleared — reloading." : "Reloading (DB may still clear).", type: "success" }); setTimeout(() => window.location.reload(), 600); }); }; // Auto-date all undated posts starting tomorrow, 4× per day const autoDateAllPosts = () => { const undated = queuePosts.filter(p => !p.date || !String(p.date).match(/\d{4}-\d{2}-\d{2}/)); if (!undated.length) { window.BoltKitToast?.({ msg: "All posts already have dates.", type: "success" }); return; } const TIMES = ["08:00", "12:00", "17:00", "20:00"]; const tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1); tomorrow.setHours(0, 0, 0, 0); const dKey = (d) => `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,"0")}-${String(d.getDate()).padStart(2,"0")}`; const dated = undated.map((post, i) => { const d = new Date(tomorrow); d.setDate(d.getDate() + Math.floor(i / 4)); return { ...post, date: dKey(d), time: TIMES[i % 4], status: "Scheduled" }; }); const ids = new Set(dated.map(p => p.id)); const next = [...dated, ...queuePosts.filter(p => !ids.has(p.id))]; saveCalendarQueue(next); // Jump calendar to first new date const first = new Date(`${dated[0].date}T12:00:00`); setVisibleMonth(new Date(first.getFullYear(), first.getMonth(), 1, 12)); setSelectedDate(dated[0].date); const days = Math.ceil(undated.length / 4); setAutoDateStatus(`${undated.length} posts auto-dated across ${days} days starting ${dated[0].date}.`); window.BoltKitToast?.({ msg: `${undated.length} posts scheduled across ${days} days.`, type: "success" }); }; // Push all posts to Supabase so the server cron can fire them even with the laptop closed const startServerAutopilot = async () => { const scheduled = queuePosts.filter(p => p.date && String(p.date).match(/\d{4}-\d{2}-\d{2}/)); if (!scheduled.length) { window.BoltKitToast?.({ msg: "No dated posts to push. Use Auto-date first.", type: "error" }); return; } setAutopilotState("pushing"); window.BoltKitToast?.({ msg: `Pushing ${scheduled.length} posts to server…`, type: "loading" }); const ctrl = new AbortController(); const autopilotTimer = setTimeout(() => ctrl.abort(), 30000); try { let projectData = {}; try { projectData = JSON.parse(localStorage.getItem("boltkit.currentProject.v1") || "{}"); } catch {} const resp = await fetch("/api/supabase-facebook-posts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "save", project: projectData, posts: queuePosts }), signal: ctrl.signal, }); const data = await resp.json(); if (data.ok) { setAutopilotState("on"); window.BoltKitToast?.({ msg: `${data.count || scheduled.length} posts saved to server. Autopilot running every 15 min — close your laptop.`, type: "success" }); } else { throw new Error(data.error || "Save failed"); } } catch (err) { setAutopilotState("error"); window.BoltKitToast?.({ msg: "Server push failed: " + (err.name === "AbortError" ? "Timed out after 30s" : err.message), type: "error" }); } finally { clearTimeout(autopilotTimer); } }; const publishNow = async (post) => { const raw = queuePosts.find(p => p.id === post.id) || post; const mediaUrl = raw.publicUrl || raw.imageUrl || raw.remoteUrl || post.publicUrl || post.imageUrl; if (!mediaUrl) { window.BoltKitToast?.({ msg: "No image URL — upload the image to Supabase first.", type: "error" }); return; } if (mediaUrl.startsWith("blob:") || mediaUrl.startsWith("data:")) { window.BoltKitToast?.({ msg: "Image is still uploading to Supabase. Wait a moment then try again.", type: "error" }); return; } setPublishingId(post.id); window.BoltKitToast?.({ msg: "Sending to Facebook…", type: "loading" }); try { const rawHashtags = raw.hashtags || post.hashtags || []; const hashtagStr = Array.isArray(rawHashtags) ? rawHashtags.map(h => h.startsWith("#") ? h : `#${h}`).join(" ") : String(rawHashtags); const captionText = [raw.hook || post.hook, raw.caption || post.caption, hashtagStr].filter(Boolean).join("\n\n"); const resp = await fetch("/api/facebook-publish-now", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ mediaUrl, caption: captionText, mediaType: "IMAGE" }), }); const data = await resp.json(); if (data.ok && !data.skipped) { saveCalendarQueue(queuePosts.map(p => p.id === post.id ? { ...p, status: "Posted", postedAt: new Date().toISOString() } : p)); window.BoltKitToast?.({ msg: "Posted to Facebook!", type: "success" }); } else if (data.skipped) { window.BoltKitToast?.({ msg: "Publishing is disabled — set ENABLE_FACEBOOK_PUBLISHING=true in Vercel.", type: "error" }); } else { window.BoltKitToast?.({ msg: data.error || "Publish failed.", type: "error" }); } } catch (err) { window.BoltKitToast?.({ msg: "Publish failed: " + err.message, type: "error" }); } setPublishingId(null); }; const saveCalendarQueue = (next) => { // If adding posts back, clear the "recently cleared" flag so Supabase sync resumes normally if (next.length > 0) { try { localStorage.removeItem("boltkit.fbCalClearedAt"); } catch {} } try { localStorage.setItem("boltkit.fbPosts.v1", JSON.stringify(next)); } catch {} setQueuePosts(next); window.dispatchEvent(new Event("boltkit:saved")); // Push to Supabase in background so posts survive page refreshes const proj = (() => { try { return JSON.parse(localStorage.getItem("boltkit.currentProject.v1") || "{}"); } catch { return {}; } })(); fetch("/api/supabase-facebook-posts", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "save", project: proj, posts: next }), }).catch(() => {}); }; const monthStart = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth(), 1, 12); const monthLabel = monthStart.toLocaleDateString("en-GB", { month: "long", year: "numeric" }); const daysInMonth = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() + 1, 0).getDate(); const gridOffset = (monthStart.getDay() + 6) % 7; const posts = queuePosts.length ? queuePosts.map((post, index) => ({ id: post.id || `fb-scheduled-${index}`, label: post.title || post.mediaName || post.caption || `Facebook post ${index + 1}`, type: post.type || "Post", ready: String(post.status || "").toLowerCase() === "scheduled", date: post.date || "", time: post.time || "09:00", caption: post.caption || "", platforms: post.platforms || ["Facebook"], storyLink: post.storyLink || "", scheduleStarted: post.scheduleStarted, imageUrl: post.publicUrl || post.imageUrl || post.remoteUrl || post.previewUrl || "", publicUrl: post.publicUrl || post.imageUrl || post.remoteUrl || "", })) : []; const platformsAll = [ { name: "Facebook", icon: "facebook", connected: false, note: "Page post + Story" }, { name: "Instagram", icon: "insta", connected: false, note: "Feed, Reels, Stories" }, { name: "TikTok", icon: "tiktok", connected: false, note: "Short vertical video" }, { name: "YouTube", icon: "youtube", connected: false, note: "Shorts" }, { name: "LinkedIn", icon: "linkedin", connected: false, note: "Founder post" }, ]; const now = new Date(); const scheduledAt = (post = {}) => post.date ? new Date(`${post.date}T${post.time || "09:00"}:00Z`) : null; const isPastScheduled = (post = {}) => { const date = scheduledAt(post); const status = String(post.status || "").toLowerCase(); return Boolean(date && date <= now && !["posted", "published", "sent"].includes(status)); }; const platformClass = (platform = "") => `platform-${String(platform).toLowerCase().replace(/[^a-z0-9]+/g, "-")}`; const postStage = (post = {}) => { if (isPastScheduled(post)) return "Missed time"; if (post.scheduleStarted) return "Confirmed"; if (post.date) return post.ready ? "Ready to post" : "Scheduled"; return post.ready ? "Ready" : "Draft"; }; const postStageClass = (post = {}) => `stage-${postStage(post).toLowerCase().replace(/[^a-z0-9]+/g, "-")}`; const eventsByDate = posts.reduce((map, post, index) => { if (!post.date || !String(post.date).match(/\d{4}-\d{2}-\d{2}/)) return map; const key = post.date; const platformList = post.platforms?.length ? post.platforms : ["Facebook"]; map[key] = [...(map[key] || []), ...platformList.map(platform => ({ label: `${platform.slice(0, 2).toUpperCase()} ${index + 1}`, platform, post, status: postStage(post) }))]; return map; }, {}); const selected = posts.find(post => post.id === selectedPost) || posts[0]; React.useEffect(() => { if (!posts.length) return; if (!posts.some(post => post.id === selectedPost)) setSelectedPost(posts[0].id); }, [posts.length, selectedPost]); React.useEffect(() => { if (!selected) return; setTime(selected.time || "09:00"); setPlatforms(selected.platforms?.length ? selected.platforms : ["Facebook"]); }, [selected?.id]); const togglePlatform = (name) => { setPlatforms((current) => current.includes(name) ? current.filter(item => item !== name) : [...current, name]); }; const scheduleSelectedPost = () => { if (!queuePosts.length || !selected?.id) { window.BoltKitToast?.("Import posts first, then schedule them here."); return; } const selectedTime = /^\d{2}:\d{2}$/.test(String(time || "")) ? time : "09:00"; const scheduledAt = new Date(`${selectedDate}T${selectedTime}:00`); if (scheduledAt <= new Date()) { window.BoltKitToast?.("Choose a future date and time."); return; } const next = queuePosts.map((post, index) => { const postId = post.id || `fb-scheduled-${index}`; if (postId !== selected.id) return post; return { ...post, date: selectedDate, time: selectedTime, status: "Scheduled", platforms: platforms.length ? platforms : ["Facebook"], scheduledBy: "Facebook Calendar day planner" }; }); saveCalendarQueue(next); window.BoltKitToast?.("Post scheduled on the Facebook calendar."); }; const dateKey = (date) => { const safe = date instanceof Date && !Number.isNaN(date.getTime()) ? date : new Date(); return `${safe.getFullYear()}-${String(safe.getMonth() + 1).padStart(2, "0")}-${String(safe.getDate()).padStart(2, "0")}`; }; const moveMonth = (delta) => { const next = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth() + delta, 1, 12); setVisibleMonth(next); setSelectedDate(dateKey(next)); }; const moveDay = (delta) => { const next = new Date(`${selectedDate}T12:00:00`); next.setDate(next.getDate() + delta); setSelectedDate(dateKey(next)); setVisibleMonth(new Date(next.getFullYear(), next.getMonth(), 1, 12)); }; const jumpToday = () => { const today = new Date(); const next = new Date(today.getFullYear(), today.getMonth(), today.getDate(), 12); setSelectedDate(dateKey(next)); setVisibleMonth(new Date(next.getFullYear(), next.getMonth(), 1, 12)); }; const jumpNextScheduled = () => { const future = posts .filter(post => post.date) .map(post => ({ post, at: scheduledAt(post) })) .filter(item => item.at && item.at >= new Date()) .sort((a, b) => a.at - b.at)[0]; if (!future) { window.BoltKitToast?.("No future scheduled Facebook posts yet."); return; } const next = dateKey(future.at); setSelectedDate(next); setSelectedPost(future.post.id); setVisibleMonth(new Date(future.at.getFullYear(), future.at.getMonth(), 1, 12)); }; const showFilterHint = () => { const active = platforms.length ? platforms.join(", ") : "no platforms"; window.BoltKitToast?.(`Facebook calendar filtered to ${active}.`); }; const addToCalendarFromHero = () => { const calIds = new Set(queuePosts.map(p => p.id)); const unimported = draftQueue.filter(p => !calIds.has(p.id)); if (unimported.length) { importDraftsToCalendar(); return; } if (queuePosts.length) { scheduleSelectedPost(); return; } window.BoltKitGo?.("fb-generate"); }; const selectedDateEvents = (eventsByDate[selectedDate] || []).sort((a, b) => String(a.post.time || "").localeCompare(String(b.post.time || ""))); // Pull one post from next day (+1) or push last post to next day (-1), rebalancing times on both days const adjustDayCount = (delta) => { const genTimes = (n) => { if (n <= 0) return []; if (n === 1) return ["09:00"]; const S = 8 * 60, E = 20 * 60; return Array.from({ length: n }, (_, i) => { const m = Math.round(S + (E - S) * i / (n - 1)); return `${String(Math.floor(m / 60)).padStart(2,"0")}:${String(m % 60).padStart(2,"0")}`; }); }; const nextD = new Date(`${selectedDate}T12:00:00`); nextD.setDate(nextD.getDate() + 1); const nextDate = dateKey(nextD); const thisPosts = queuePosts.filter(p => p.date === selectedDate).sort((a, b) => String(a.time||"").localeCompare(String(b.time||""))); const nextPosts = queuePosts.filter(p => p.date === nextDate).sort((a, b) => String(a.time||"").localeCompare(String(b.time||""))); const otherPosts = queuePosts.filter(p => p.date !== selectedDate && p.date !== nextDate); if (delta > 0) { if (!nextPosts.length) { window.BoltKitToast?.({ msg: "No posts on the next day to pull from.", type: "error" }); return; } const [pulled, ...remainingNext] = nextPosts; const newThis = [...thisPosts, { ...pulled, date: selectedDate }]; const updated = [ ...otherPosts, ...newThis.map((p, i) => ({ ...p, date: selectedDate, time: genTimes(newThis.length)[i] })), ...remainingNext.map((p, i) => ({ ...p, date: nextDate, time: genTimes(remainingNext.length)[i] })), ]; saveCalendarQueue(updated); window.BoltKitToast?.({ msg: `Pulled 1 post from ${nextDate.slice(5)} · now ${newThis.length} on ${selectedDate.slice(5)}.`, type: "success" }); } else { if (!thisPosts.length) { window.BoltKitToast?.({ msg: "No posts on this day.", type: "error" }); return; } const remainingThis = thisPosts.slice(0, -1); const newNext = [{ ...thisPosts[thisPosts.length - 1], date: nextDate }, ...nextPosts]; const updated = [ ...otherPosts, ...remainingThis.map((p, i) => ({ ...p, date: selectedDate, time: genTimes(remainingThis.length)[i] })), ...newNext.map((p, i) => ({ ...p, date: nextDate, time: genTimes(newNext.length)[i] })), ]; saveCalendarQueue(updated); window.BoltKitToast?.({ msg: `Pushed 1 post to ${nextDate.slice(5)} · now ${remainingThis.length} on ${selectedDate.slice(5)}.`, type: "success" }); } }; const moveFbPostToDate = (postId, newDate) => { const next = queuePosts.map(p => p.id !== postId ? p : { ...p, date: newDate, status: p.status || "Scheduled" }); saveCalendarQueue(next); setSelectedDate(newDate); window.BoltKitToast?.({ msg: `Moved to ${newDate}.`, type: "success" }); }; const missedCount = posts.filter(isPastScheduled).length; const hasStartedSchedule = posts.some(post => post.scheduleStarted && !isPastScheduled(post)); const scheduledCount = posts.filter(post => post.date && String(post.date).match(/\d{4}-\d{2}-\d{2}/)).length; const confirmedCount = posts.filter(post => post.scheduleStarted && !isPastScheduled(post)).length; const readyCount = posts.filter(post => (post.ready || post.scheduleStarted) && !isPastScheduled(post)).length; const draftCount = Math.max(0, posts.length - scheduledCount); const cardState = missedCount ? "missed" : hasStartedSchedule ? "confirmed" : scheduledCount ? "ready" : "draft"; // Feed preview data const isPostedSt = s => ["Posted", "posted", "published", "sent"].includes(String(s || "").toLowerCase()); const feedPosts = posts .filter(p => { if (feedMode === "Posted") return isPostedSt(p.status); if (feedMode === "Upcoming") return !isPostedSt(p.status); return true; }) .sort((a, b) => { const aAt = new Date(`${a.date || "9999-12-31"}T${a.time || "09:00"}:00Z`); const bAt = new Date(`${b.date || "9999-12-31"}T${b.time || "09:00"}:00Z`); return aAt - bAt; }); return (
{/* ── Hero ── */}
FACEBOOK · PAGE CALENDAR

Facebook schedule.

{missedCount ? `${missedCount} missed` : autopilotState === "on" ? "Autopilot on" : scheduledCount ? `${scheduledCount} scheduled` : "Not scheduled"} {scheduledCount} scheduled · {draftCount} unscheduled · {missedCount} missed
{/* MASTER CONTROLS — posts/day + stop/clear/resume */}
{/* Import unscheduled drafts */} {(() => { const calIds = new Set(queuePosts.map(p => p.id)); const unimported = draftQueue.filter(p => !calIds.has(p.id)); return unimported.length > 0 ? ( ) : null; })()} {/* Auto-date undated */} {queuePosts.filter(p => !p.date || !String(p.date).match(/\d{4}-\d{2}-\d{2}/)).length > 0 && ( )} {/* Posts per day */}
POSTS/DAY {importPerDay}
{/* Autopilot status */} {autopilotState === "on" ? ( AUTOPILOT RUNNING ) : scheduledCount > 0 ? ( ) : null}
{/* Stop */} {autopilotState === "on" && ( )} {/* Resume */} {autopilotState !== "on" && scheduledCount > 0 && ( )} {/* Clear */} {!confirmClear ? ( ) : (
Delete all {queuePosts.filter(p => !["posted","published","sent"].includes(String(p.status||"").toLowerCase())).length} posts?
)}
{/* ── Missed posts — critical banner (only one that stays full-width) ── */} {missedCount > 0 && (
{missedCount} post{missedCount !== 1 ? "s" : ""} missed their scheduled time.
)}
{monthLabel}

{calendarMode} calendar

{["Month", "Week", "Day"].map((label) => )}
{["MON", "TUE", "WED", "THU", "FRI", "SAT", "SUN"].map(day => {day})}
{Array.from({ length: 42 }).map((_, index) => { const day = index - gridOffset + 1; const dim = day < 1 || day > daysInMonth; const displayDate = new Date(visibleMonth.getFullYear(), visibleMonth.getMonth(), Math.max(1, Math.min(daysInMonth, day)), 12); const cellDateKey = dateKey(displayDate); const display = dim ? "" : day; const active = cellDateKey === selectedDate && !dim; const events = dim ? [] : (eventsByDate[cellDateKey] || []); return ( ); })}
{/* ── Facebook Feed Preview ───────────────────────────────────── */}
FACEBOOK FEED PREVIEW

How your posts will look on Facebook

{["All", "Upcoming", "Posted"].map(m => ( ))}
{feedPosts.length === 0 ? (

{feedMode === "Posted" ? "No posts published yet." : feedMode === "Upcoming" ? "No upcoming posts scheduled." : "No posts yet — generate some content first."}

) : (
{feedPosts.map(post => ( ))}
)}
{/* Calendar block popup — Edit / Delete / Move */} {calPopup && ( <>
setCalPopup(null)} style={{ position: "fixed", inset: 0, zIndex: 9990 }} />
{/* Header */}
{(calPopup.post.imageUrl || calPopup.post.publicUrl) && ( )}
FACEBOOK POST
{calPopup.post.label || "Untitled"}
{/* Fields */}