// Approvals, Media Library, Link in Bio function ApprovalsPage() { const hub = window.useClearCast(); const [filter, setFilter] = React.useState("pending"); const [activeId, setActiveId] = React.useState(null); const [note, setNote] = React.useState(""); const [comment, setComment] = React.useState(""); const [channelFilter, setChannelFilter] = React.useState("all"); const [authorFilter, setAuthorFilter] = React.useState("all"); const posts = hub.data.posts || []; const media = hub.data.media || []; const reviewable = posts.filter((post) => ["needs_approval", "scheduled", "rejected", "changes_requested", "blocked", "failed"].includes(post.status)); const counts = { pending: reviewable.filter((post) => post.status === "needs_approval" || post.status === "changes_requested").length, approved: reviewable.filter((post) => post.status === "scheduled").length, rejected: reviewable.filter((post) => ["rejected", "blocked", "failed"].includes(post.status)).length, all: reviewable.length }; const authors = [...new Set(reviewable.map((post) => post.author || post.createdBy || post.owner || "Emma").filter(Boolean))]; const filtered = reviewable.filter((post) => { if (filter === "pending") return post.status === "needs_approval" || post.status === "changes_requested"; if (filter === "approved") return post.status === "scheduled"; if (filter === "rejected") return ["rejected", "blocked", "failed"].includes(post.status); return true; }).filter((post) => channelFilter === "all" || (post.platforms || []).includes(channelFilter)) .filter((post) => authorFilter === "all" || (post.author || post.createdBy || post.owner || "Emma") === authorFilter); const cur = filtered.find((post) => post.id === activeId) || filtered[0] || reviewable[0]; React.useEffect(() => { if (cur && activeId !== cur.id) setActiveId(cur.id); }, [cur?.id]); const statusLabel = (status) => ({ needs_approval: "Pending", scheduled: "Approved", rejected: "Rejected", blocked: "Blocked", failed: "Failed", changes_requested: "Changes requested", draft: "Draft", published: "Published" }[status] || status); const statusPill = (status) => status === "scheduled" ? "green" : ["rejected", "blocked", "failed"].includes(status) ? "danger" : "warn"; const assetFor = (post) => media.find((asset) => (post.media || []).includes(asset.id) || (post.media || []).includes(asset.url) || (post.media || []).includes(asset.fileName)); const previewAsset = cur ? assetFor(cur) : null; const history = [...(cur?.approvalHistory || []), ...(cur?.activityHistory || [])].sort((a, b) => String(b.createdAt).localeCompare(String(a.createdAt))); const comments = cur?.approvalComments || []; const reviewers = cur?.approvers?.length ? cur.approvers : [ { name: "Maya Chen", role: "Reviewer", status: cur?.status === "scheduled" ? "approved" : "pending" }, { name: "Jordan Ellis", role: "Approver", status: cur?.status === "scheduled" ? "approved" : "pending" } ]; const publishAttempts = cur?.publishAttempts || []; const latestAttempt = publishAttempts[0]; const canPublish = cur && cur.status === "scheduled"; const canRetry = cur && ["failed", "blocked"].includes(cur.status); const runAction = async (action) => { if (!cur) return; try { await hub.actions.approvalAction(cur.id, action, note); setNote(""); setActiveId(cur.id); } catch (error) { hub.toast(error.message || "Action failed"); } }; const addComment = async () => { if (!cur || !comment.trim()) { hub.toast("Write a comment first"); return; } try { await hub.actions.approvalComment(cur.id, comment); setComment(""); setActiveId(cur.id); } catch (error) { hub.toast(error.message || "Could not add comment"); } }; const runPublish = async (retry = false) => { if (!cur) return; try { await hub.actions.publishPost(cur.id, retry); setActiveId(cur.id); } catch (error) { setActiveId(cur.id); } }; return (
{filtered.map((post, i) => { const isActive = post.id === cur?.id; const pColor = post.status === "rejected" ? "var(--danger)" : post.status === "scheduled" ? "var(--accent)" : "var(--warn)"; const asset = assetFor(post); return (
setActiveId(post.id)} style={{ width: "100%", textAlign: "left", display: "grid", gridTemplateColumns: "auto 48px 1fr auto auto", gap: 14, alignItems: "center", padding: "16px 20px", borderBottom: i < filtered.length - 1 ? "1px solid var(--border)" : "none", background: isActive ? "var(--card-2)" : "transparent", borderLeft: isActive ? "2px solid var(--accent)" : "2px solid transparent", }}>
{asset?.type === "image" && }
{post.approvers?.[0]?.name || "Maya Chen"} · {post.date} · {post.time}
{post.caption}
{[1, 2].map(j => (
1 ? -10 : 0 }}> {j === 1 ? "EW" : "JE"}
))}
{statusLabel(post.status)}
); })} {!filtered.length &&
No posts match this approval view.
}
{cur ?

Preview

{statusLabel(cur.status)}
{previewAsset?.type === "image" ? {previewAsset.name} :
{previewAsset?.name || "No media attached"}
}
{cur.caption}
{cur.caption.length} / 2,200 chars {cur.date} · {cur.time}

Reviewers

{reviewers.filter((r) => r.status === "approved").length} / {reviewers.length} approved
{reviewers.map((r, index) => (
{r.name.split(" ").map(w => w[0]).join("")}
{r.name}
{r.role}
{r.status}
))}

Publishing Queue

{statusLabel(cur.status)}
Queue state{cur.publishState || cur.status}
Attempts{publishAttempts.length}
Last run{cur.lastPublishAttemptAt ? new Date(cur.lastPublishAttemptAt).toLocaleString() : "Not run"}
{cur.lastPublishError &&
{cur.lastPublishError}
} {latestAttempt && (
Latest attempt
{latestAttempt.platforms?.length || 0} channels{latestAttempt.status}
)}

Comments

{comments.map((item) => (
{item.author?.split(" ").map(w => w[0]).join("").slice(0, 2) || "EW"}
{item.author} · {new Date(item.createdAt).toLocaleString()}
{item.text}
))} {!comments.length &&
No review comments yet.
}
setComment(event.target.value)} placeholder="Leave a comment…"/>

History

{history.map((item) => (
{item.action.replace("_", " ")}
{item.note}
{item.actor} · {new Date(item.createdAt).toLocaleString()}
))} {!history.length &&
No approval history yet.
}