// MissionChef — Marketing Extras: Social Calendar + Composer, Inbox, Analytics, PostThumb // ─── POST THUMBNAIL ───────────────────────────────────────────────────────── function PostThumb({ post, size = 64 }) { const tones = { warm: ['#E8C49A','#A8743F'], cream: ['#F4EFE2','#C8BFAC'], green: ['#AEC854','#6E8A28'], dark: ['#3A332A','#1B1B17'], orange: ['#F2A65A','#C56A1A'], red: ['#B5475A','#7A2A36'], pink: ['#E8B4B8','#C28A9E'], }; if (!post.media) { return (
); } const [c1, c2] = tones[post.media.tone] || tones.warm; return (
); } window.PostThumb = PostThumb; // ─── SOCIAL TAB ───────────────────────────────────────────────────────────── function SocialTab({ editingPost, setEditingPost }) { const store = useStore(); const [view, setView] = React.useState('calendar'); // calendar | list | drafts if (editingPost) { return setEditingPost(null)} />; } return (
{/* Channels overview */}
{store.channels.map(ch => )}
{/* View toggle */}
{[['calendar','Kalender'],['list','Liste'],['drafts','Entwürfe · ' + store.posts.filter(p => p.status === 'draft').length]].map(([id,label]) => ( ))}
{view === 'calendar' && } {view === 'list' && } {view === 'drafts' && }
); } function ChannelCard({ channel }) { const colors = { instagram: '#E1306C', facebook: '#1877F2', google: '#34A853' }; return (
{channel.handle}
{channel.platform === 'google' ? `${channel.reviews} Bewertungen · ★ ${channel.rating}` : `${fmtINT(channel.followers)} Follower`}
+{channel.growth30d}
30 Tage
); } // ─── SOCIAL CALENDAR ──────────────────────────────────────────────────────── function SocialCalendar({ onEdit }) { const store = useStore(); const [weekOffset, setWeekOffset] = React.useState(0); // Compute week start (Monday) const start = React.useMemo(() => { const d = new Date(); d.setHours(0,0,0,0); const day = d.getDay() || 7; d.setDate(d.getDate() - day + 1 + weekOffset * 7); return d; }, [weekOffset]); const days = Array.from({ length: 7 }, (_, i) => { const d = new Date(start); d.setDate(d.getDate() + i); return d; }); const HOURS = [9, 12, 15, 18, 21]; const postsByDayHour = (date, hour) => { return store.posts.filter(p => { const ts = p.publishedAt || p.scheduledAt; if (!ts) return false; const pd = new Date(ts); return pd.toDateString() === date.toDateString() && pd.getHours() >= hour && pd.getHours() < hour + 3; }); }; return (
{/* Header with week nav */}
{start.toLocaleDateString('de-DE',{day:'2-digit',month:'short'})} – {days[6].toLocaleDateString('de-DE',{day:'2-digit',month:'short',year:'numeric'})}
Best Times: Mi 18:00 · Fr 19:30 · So 11:00
{/* Grid */}
{days.map((d, i) => { const isToday = d.toDateString() === new Date().toDateString(); return (
{d.toLocaleDateString('de-DE',{weekday:'short'})}
{d.getDate()}
); })} {HOURS.map(h => (
{h}:00
{days.map((d, i) => { const cellPosts = postsByDayHour(d, h); return (
{cellPosts.map(p => ( ))}
); })} ))}
); } function SocialList({ onEdit, filter }) { const store = useStore(); const posts = store.posts.filter(p => filter === 'all' || p.status === filter); return (
{posts.map(p => { const ts = p.publishedAt || p.scheduledAt; const d = ts ? new Date(ts) : null; return (
onEdit(p.id)} style={{ display: 'flex', gap: 16, padding: 16, borderBottom: '1px solid var(--mc-rule)', cursor: 'pointer', alignItems: 'flex-start' }}>
{p.channels.map(cid => )} {p.status === 'published' ? 'Veröffentlicht' : p.status === 'scheduled' ? 'Geplant' : 'Entwurf'} {d && {d.toLocaleDateString('de-DE',{weekday:'short',day:'2-digit',month:'2-digit'})} · {d.toLocaleTimeString('de-DE',{hour:'2-digit',minute:'2-digit'})} }
{p.status === 'published' && (
{p.likes} {p.comments} {fmtINT(p.reach)}
)}
{p.text}
); })} {posts.length === 0 &&
Keine Posts in dieser Ansicht.
}
); } // ─── POST COMPOSER ────────────────────────────────────────────────────────── function PostComposer({ id, onClose }) { const store = useStore(); const isNew = id === 'new'; const post = isNew ? null : store.posts.find(p => p.id === id); const [draft, setDraft] = React.useState(() => post || { text: '', channels: ['ch-ig'], media: { type: 'image', tone: 'green' }, status: 'draft', scheduledAt: null, }); const [scheduleDate, setScheduleDate] = React.useState(() => { const d = new Date(); d.setDate(d.getDate() + 1); d.setHours(18, 0, 0, 0); return d.toISOString().slice(0, 16); }); const [aiBusy, setAiBusy] = React.useState(false); const update = (k, v) => setDraft(d => ({ ...d, [k]: v })); const toggleChannel = (cid) => { setDraft(d => ({ ...d, channels: d.channels.includes(cid) ? d.channels.filter(c => c !== cid) : [...d.channels, cid] })); }; const aiGenerate = async () => { setAiBusy(true); await new Promise(r => setTimeout(r, 1100)); const ideas = [ 'Frühling auf dem Teller — Spargel, frische Erbsen, Pecorino. Ab heute auf der Karte. 🌿', 'Pasta-Tag in der Osteria. Frisch ausgerollte Tagliatelle, langsam getrocknet. Heute Abend.', 'Drei neue Weine im Glas — alle aus Süditalien, alle bis 8 € pro Glas. Kommen Sie probieren.', 'Aperitivo unter Olivenbäumen. Die Terrasse hat geöffnet. ☀️', ]; update('text', ideas[Math.floor(Math.random() * ideas.length)]); setAiBusy(false); }; const schedule = () => { const data = { ...draft, status: 'scheduled', scheduledAt: new Date(scheduleDate).toISOString() }; if (isNew) mcApi.post('/posts', data); else mcApi.patch('/posts/' + id, data); onClose(); }; const publishNow = () => { const data = { ...draft, status: 'published', publishedAt: new Date().toISOString(), likes: 0, comments: 0, shares: 0, reach: 0 }; if (isNew) mcApi.post('/posts', data); else mcApi.patch('/posts/' + id, data); onClose(); }; const saveDraft = () => { const data = { ...draft, status: 'draft' }; if (isNew) mcApi.post('/posts', data); else mcApi.patch('/posts/' + id, data); onClose(); }; const TONES = ['warm','cream','green','dark','orange','red','pink']; return (
{/* LEFT */}
{isNew ? 'Neuer Post' : 'Post bearbeiten'}
{/* Channels */}
Kanäle
{store.channels.map(ch => { const active = draft.channels.includes(ch.id); const colors = { instagram: '#E1306C', facebook: '#1877F2', google: '#34A853' }; return ( ); })}
{/* Text */}
Text