/* ============================================ ADMIN — DASHBOARD ============================================ */ function AdminDashboard({ onNavigate, onPlay }) { const [period, setPeriod] = React.useState('14d'); const [, setTick] = React.useState(0); React.useEffect(() => { const h = () => setTick(t => t + 1); window.addEventListener('dataLoaded', h); return () => window.removeEventListener('dataLoaded', h); }, []); const analytics = window.ANALYTICS || ANALYTICS; const allTracks = window.TRACKS || TRACKS; const allComments = window.COMMENTS || COMMENTS; const allUsers = window.USERS || USERS; // ── Period → slice of playsByDay ───────────────────────── const rawDays = analytics.playsByDay || []; const nDays = period === 'today' ? 1 : period === '7d' ? 7 : period === '14d' ? 14 : rawDays.length; const sparkDays = rawDays.length ? rawDays.slice(-Math.min(nDays, rawDays.length)) : [0]; const prevDays = rawDays.length && nDays < rawDays.length ? rawDays.slice(-Math.min(nDays * 2, rawDays.length), -nDays) : []; // ── Plays ──────────────────────────────────────────────── const sum = arr => arr.reduce((a, b) => a + b, 0); const periodPlays = period === 'all' ? allTracks.reduce((s, t) => s + (t.plays || 0), 0) : sum(sparkDays); const prevPlays = sum(prevDays); const playsDelta = prevPlays ? Math.round(((periodPlays - prevPlays) / prevPlays) * 100) : null; const fmtPlays = n => n >= 1e6 ? `${(n / 1e6).toFixed(2)}M` : n >= 1000 ? `${(n / 1000).toFixed(1)}k` : String(n || 0); // ── Comments (real ISO timestamps) ─────────────────────── const now = Date.now(); const cutoffMs = { today: now - 86400000, '7d': now - 7*86400000, '14d': now - 14*86400000, '30d': now - 30*86400000, all: 0 }[period]; const inPeriod = c => !c.flagged && (period === 'all' || new Date(c.timestamp || 0).getTime() >= cutoffMs); const inPrev = c => !c.flagged && period !== 'all' && new Date(c.timestamp || 0).getTime() >= (cutoffMs - (now - cutoffMs)) && new Date(c.timestamp || 0).getTime() < cutoffMs; const periodComments = allComments.filter(inPeriod); const prevComments = allComments.filter(inPrev); const commentsDelta = prevComments.length ? Math.round(((periodComments.length - prevComments.length) / prevComments.length) * 100) : null; // ── Users ──────────────────────────────────────────────── const totalUsers = allUsers.length || analytics.totalUsers || 0; // ── Avg rating (live) ───────────────────────────────────── const ratedTracks = allTracks.filter(t => t.rating > 0); const avgRating = ratedTracks.length ? (ratedTracks.reduce((s, t) => s + t.rating, 0) / ratedTracks.length).toFixed(1) : (analytics.avgRating || '—'); // ── Top tracks sorted by plays desc ────────────────────── const topTracks = [...allTracks].sort((a, b) => (b.plays || 0) - (a.plays || 0)).slice(0, 6); const maxPlays = Math.max(topTracks[0]?.plays || 1, 1); const periodShortLabel = { today: '24h', '7d': '7d', '14d': '14d', '30d': '30d', all: 'all time' }[period]; // ── Sparkline ───────────────────────────────────────────── const W = 600, H = 180; const maxV = Math.max(...sparkDays, 1); const minV = Math.min(...sparkDays); const rng = maxV - minV || 1; const pts = sparkDays.map((v, i) => [ sparkDays.length > 1 ? (i / (sparkDays.length - 1)) * W : W / 2, H - ((v - minV) / rng) * H * 0.85 - 10, ]); const linePath = pts.map(([x, y], i) => `${i === 0 ? 'M' : 'L'}${x},${y}`).join(' '); const areaPath = `${linePath} L${W},${H} L0,${H} Z`; // ── X-axis date labels ──────────────────────────────────── const dayLabel = daysAgo => { if (daysAgo === 0) return 'Today'; const d = new Date(now - daysAgo * 86400000); return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }); }; const xLabels = (() => { const n = sparkDays.length; if (n <= 1) return ['Today']; return [0, 1, 2, 3, 4].map(i => dayLabel(Math.round(((4 - i) / 4) * (n - 1)))); })(); const PERIODS = [ { k: 'today', label: 'Today' }, { k: '7d', label: '7 days' }, { k: '14d', label: '14 days' }, { k: '30d', label: '30 days' }, { k: 'all', label: 'All time'}, ]; const periodLabel = { today: 'Today', '7d': 'Last 7 days', '14d': 'Last 14 days', '30d': 'Last 30 days', all: 'All time' }[period]; const DeltaBadge = ({ delta, invert }) => { if (delta === null) return
vs prev period
; const up = invert ? delta <= 0 : delta >= 0; return (
{delta >= 0 ? '+' : ''}{delta}%
); }; return (
Admin mode. You're viewing the moderation and analytics dashboard. A Toggle admin
{periodLabel}

Dashboard

{PERIODS.map(p => ( ))}
{/* Stats */}
Plays
{fmtPlays(periodPlays)}
Total users
{totalUsers >= 1000 ? `${(totalUsers / 1000).toFixed(1)}k` : totalUsers}
registered
Comments
{periodComments.length.toLocaleString()}
Avg rating
{avgRating}
{ratedTracks.length} track{ratedTracks.length !== 1 ? 's' : ''} rated
{/* Chart + top tracks */}
Plays · daily

Listening trend · {periodLabel.toLowerCase()}

plays
{[0, 0.25, 0.5, 0.75, 1].map(y => ( ))} {pts.map(([x, y], i) => ( ))}
{xLabels.map((l, i) => {l})}
Top performers

Top tracks · {periodShortLabel}

{topTracks.length === 0 && (
No track data yet
)} {topTracks.map((t, i) => (
{i + 1}
{t.title}
{(t.plays / 1000).toFixed(1)}k plays · ★ {t.rating}
))}
{/* Quick links */}
); } /* ============================================ ADMIN — MODERATION QUEUE ============================================ */ function AdminModeration() { const toast = useToast(); const [items, setItems] = React.useState(() => (window.COMMENTS || COMMENTS).slice()); const [filter, setFilter] = React.useState('flagged'); // Stay in sync with live comment data React.useEffect(() => { const handler = () => setItems((window.COMMENTS || []).slice()); window.addEventListener('dataLoaded', handler); return () => window.removeEventListener('dataLoaded', handler); }, []); const flaggedCount = items.filter(c => c.flagged).length; const reportedCount = items.filter(c => c.reported).length; const visible = filter === 'flagged' ? items.filter(c => c.flagged) : filter === 'reports' ? items.filter(c => c.reported) : items.slice().sort((a, b) => (b.timestamp || b.when || '').localeCompare(a.timestamp || a.when || '')); const action = async (id, kind) => { const comment = items.find(c => c.id === id); if (!comment) return; if (kind === 'approve') { setItems(ix => ix.map(c => c.id === id ? { ...c, flagged: false, reported: false } : c)); window.COMMENTS = (window.COMMENTS || []).map(c => c.id === id ? { ...c, flagged: false, reported: false } : c); try { if (window.firestoreDB && window.firestoreModule) { const { doc, updateDoc } = window.firestoreModule; await updateDoc(doc(window.firestoreDB, 'comments', id), { flagged: false, reported: false }); } toast('Comment approved and unflagged ✓', 'success'); } catch(e) { toast('Approved locally — sync failed', 'warn'); } } else if (kind === 'delete') { setItems(ix => ix.filter(c => c.id !== id)); window.COMMENTS = (window.COMMENTS || []).filter(c => c.id !== id); try { if (window.firestoreDB && window.firestoreModule) { const { doc, deleteDoc } = window.firestoreModule; await deleteDoc(doc(window.firestoreDB, 'comments', id)); } toast('Comment deleted ✓', 'success'); } catch(e) { toast('Deleted locally — sync failed', 'warn'); } } else if (kind === 'ban') { setItems(ix => ix.filter(c => c.id !== id)); window.COMMENTS = (window.COMMENTS || []).filter(c => c.id !== id); const matchedUser = (window.USERS || []).find(u => u.name === comment.user || u.email === comment.user); try { if (window.firestoreDB && window.firestoreModule) { const { doc, deleteDoc, updateDoc } = window.firestoreModule; await deleteDoc(doc(window.firestoreDB, 'comments', id)); if (matchedUser?.id) { await updateDoc(doc(window.firestoreDB, 'users', matchedUser.id), { status: 'banned' }); window.USERS = (window.USERS || []).map(u => u.id === matchedUser.id ? { ...u, status: 'banned' } : u); } } toast(`Comment removed · ${comment.user} banned ✓`, 'success'); } catch(e) { toast('Banned locally — sync failed', 'warn'); } } }; const EMPTY = { flagged: { icon: '✨', title: 'Queue clear', sub: 'Nothing to review. Good vibes only.' }, reports: { icon: '🙌', title: 'No reports', sub: 'No user reports to review.' }, recent: { icon: '💬', title: 'No comments', sub: 'Comments will appear here once users start posting.' }, }; return (
Admin · Moderation queue. Review flagged content from users and the auto-moderator.
{visible.length} items

Moderation

{visible.length === 0 && (
{EMPTY[filter].icon}
{EMPTY[filter].title}
{EMPTY[filter].sub}
)} {visible.map(c => { const track = (window.TRACKS || TRACKS).find(t => t.id === c.trackId); return (
{c.user} {c.flagged && AUTO-FLAGGED} {c.reported && REPORTED} {track && <>· on{track.title}} {c.time && @ {c.time}} {c.when && · {c.when}}
"{c.text}"
{(c.flagged || c.reported) && (
{c.flagReason || (c.flagged ? 'Auto-detected: spam / policy violation' : 'Reported by a user')}
)}
); })}
); } /* ============================================ ADMIN — USERS ============================================ */ function AdminUsers({ user: currentUser }) { const toast = useToast(); const [users, setUsers] = React.useState(() => (window.USERS || USERS).slice()); const [filter, setFilter] = React.useState('all'); const [search, setSearch] = React.useState(''); // Refresh when Firestore data arrives React.useEffect(() => { const handler = () => setUsers((window.USERS || []).slice()); window.addEventListener('dataLoaded', handler); return () => window.removeEventListener('dataLoaded', handler); }, []); const filtered = users.filter(u => { if (filter !== 'all' && u.status !== filter) return false; if (search && !u.name.toLowerCase().includes(search.toLowerCase()) && !(u.email || '').toLowerCase().includes(search.toLowerCase())) return false; return true; }); const setStatus = async (id, status, msg) => { setUsers(us => us.map(u => u.id === id ? { ...u, status } : u)); window.USERS = (window.USERS || []).map(u => u.id === id ? { ...u, status } : u); try { await window.dbHelpers?.updateUser(id, { status }); toast(msg, 'success'); } catch(e) { toast('Updated locally — Firestore write failed', 'warn'); console.error(e); } }; const setRole = async (u, newRole) => { // Only full admin can change roles if (currentUser?.role !== 'admin') return; // Optimistic setUsers(us => us.map(x => x.id === u.id ? { ...x, role: newRole } : x)); window.USERS = (window.USERS || []).map(x => x.id === u.id ? { ...x, role: newRole } : x); try { await window.dbHelpers?.setUserRole(u.email, u.name, newRole); toast( newRole === 'co-admin' ? `${u.name} promoted to Co-admin ✓` : `${u.name} demoted to User ✓`, 'success' ); } catch(e) { toast('Role updated locally — Firestore write failed', 'warn'); console.error(e); } }; const isFullAdmin = currentUser?.role === 'admin'; return (
Admin · Users. Manage accounts, view activity, ban or suspend users. {isFullAdmin && ( · Full admin: can promote/demote roles )}
{users.length} accounts

Users

setSearch(e.target.value)} />
{[ ['all', 'All', users.length], ['active', 'Active', users.filter(u => u.status === 'active').length], ['flagged', 'Flagged', users.filter(u => u.status === 'flagged').length], ['banned', 'Banned', users.filter(u => u.status === 'banned').length], ].map(([k, label, count]) => ( ))}
{filtered.length === 0 && ( )} {filtered.map(u => ( ))}
User Joined Plays Comments Status Actions
No users yet — they'll appear here after signing in.
{u.name}
{u.role === 'co-admin' && ( CO-ADMIN )}
{u.email}
 {u.joined || '—'} {(u.plays || 0).toLocaleString()} {u.comments || 0} {u.status || 'active'}
{/* Role toggle — full admin only */} {isFullAdmin && u.role !== 'admin' && ( u.role === 'co-admin' ? ( ) : ( ) )} {/* Suspend / reinstate — both admin and co-admin can do this */} {u.status !== 'banned' && ( )} {u.status !== 'banned' ? ( ) : ( )}
); } /* ============================================ ADMIN — TRACKS (upload + manage) ============================================ */ function AdminTracks({ user, onPlay }) { const toast = useToast(); const [tracks, setTracks] = React.useState(() => (window.TRACKS || TRACKS).slice()); const [saving, setSaving] = React.useState(false); const savingRef = React.useRef(false); // prevent onSnapshot from reverting mid-save // Refresh from Firestore when snapshot fires — but not while a save is in-flight React.useEffect(() => { const handler = () => { if (!savingRef.current) setTracks((window.TRACKS || []).slice()); }; window.addEventListener('dataLoaded', handler); return () => window.removeEventListener('dataLoaded', handler); }, []); const [form, setForm] = React.useState({ title: '', album: '', duration: '', cardColor: 'violet', author: 'AI', humanName: '', spotify: '', apple: '', artworkUrl: '', audioUrl: '', lyrics: '', }); const [editingId, setEditingId] = React.useState(null); const fileInputImg = React.useRef(null); const fileInputAudio = React.useRef(null); const [artworkFile, setArtworkFile] = React.useState(null); const [audioFile, setAudioFile] = React.useState(null); const update = (k, v) => setForm(f => ({ ...f, [k]: v })); const reset = () => { setForm({ title: '', album: '', duration: '', cardColor: 'violet', author: 'AI', humanName: '', spotify: '', apple: '', artworkUrl: '', audioUrl: '', lyrics: '' }); setArtworkFile(null); setAudioFile(null); setEditingId(null); }; const submit = async () => { if (!form.title.trim()) { toast('Track title is required', 'info'); return; } savingRef.current = true; setSaving(true); const humanLabel = form.humanName.trim() || 'Sasha'; const authorStr = form.author === 'AI' ? 'AI' : `${form.author} · ${humanLabel}`; let lyricsData = []; if (form.lyrics.trim()) { try { lyricsData = JSON.parse(form.lyrics); } catch(e) { toast('Lyrics JSON is invalid — check format', 'warn'); return; } } if (editingId) { const existing = tracks.find(t => t.id === editingId) || {}; const updates = { title: form.title, duration: form.duration || existing.duration || '0:00', author: authorStr, artist: humanLabel, tag: form.author === 'AI' ? 'ai' : form.author === 'Human' ? 'human' : 'human+ai', ...(form.lyrics.trim() ? { lyrics: lyricsData } : {}), }; // Update local component state immediately setTracks(ts => ts.map(t => t.id === editingId ? { ...t, ...updates } : t)); // Update global TRACKS so other screens re-render with new data window.TRACKS = (window.TRACKS || []).map(t => t.id === editingId ? { ...t, ...updates } : t); window.dispatchEvent(new CustomEvent('dataLoaded')); // Persist to Firestore try { await window.dbHelpers?.updateTrack(editingId, updates); toast('Track updated ✓', 'success'); } catch(e) { toast('Saved locally — Firestore write failed', 'warn'); console.error(e); } } else { const newT = { id: 't' + Date.now(), title: form.title, artist: humanLabel, author: authorStr, tag: form.author === 'AI' ? 'ai' : form.author === 'Human' ? 'human' : 'human+ai', plays: 0, likes: 0, rating: 0, ratings: 0, comments: 0, duration: form.duration || '0:00', durationSec: 180, art: Math.floor(Math.random() * 8), releasedDays: 0, lyrics: lyricsData, }; setTracks(ts => [newT, ...ts]); window.TRACKS = [newT, ...(window.TRACKS || [])]; window.dispatchEvent(new CustomEvent('dataLoaded')); // Persist to Firestore (generates a real ID — used after next page load) try { await window.dbHelpers?.addTrack(newT); toast('Track added ✓', 'success'); } catch(e) { toast('Saved locally — Firestore write failed', 'warn'); console.error(e); } // Auto-notification: new track dropped window.dbHelpers?.sendNotification({ title: '🎵 New track just dropped', message: `"${newT.title}" is now available — go check it out!`, type: 'new_track', sentBy: 'System', }).catch(() => {}); } savingRef.current = false; setSaving(false); // Now let any pending snapshot refresh happen setTracks((window.TRACKS || []).slice()); reset(); }; const edit = (t) => { setEditingId(t.id); const authorTag = t.tag === 'ai' ? 'AI' : t.tag === 'human' ? 'Human' : 'Human+AI'; // Extract human name from stored author string e.g. "Human · Sasha" → "Sasha" const parts = (t.author || '').split(' · '); const humanName = parts.length >= 2 ? parts[parts.length - 1] : ''; const lyricsStr = (t.lyrics && t.lyrics.length) ? JSON.stringify(t.lyrics, null, 2) : ''; setForm(f => ({ ...f, title: t.title, duration: t.duration, author: authorTag, humanName, lyrics: lyricsStr })); window.scrollTo({ top: 0, behavior: 'smooth' }); }; const remove = async (id) => { // Optimistic: remove from UI immediately setTracks(ts => ts.filter(t => t.id !== id)); window.TRACKS = (window.TRACKS || []).filter(t => t.id !== id); window.dispatchEvent(new CustomEvent('dataLoaded')); // Persist to Firestore try { await window.dbHelpers?.deleteTrack(id); toast('Track removed ✓', 'success'); } catch(e) { toast('Removed locally — Firestore delete failed', 'warn'); console.error('deleteTrack error:', e); } }; const handleFile = (e, kind) => { const f = e.target.files?.[0]; if (!f) return; if (kind === 'img') setArtworkFile(f); else setAudioFile(f); toast(`${f.name} attached`, 'info'); }; const cardColors = ['violet', 'electric', 'heat', 'lime', 'mono', 'sunset', 'forest', 'midnight']; return (
Admin · Tracks. Upload new tracks, edit metadata, manage the catalog.
{tracks.length} tracks in catalog

Tracks

{/* UPLOAD FORM */}
{editingId ? 'Editing existing track' : 'New upload'}

{editingId ? 'Edit Track' : 'Add New Track'}

{editingId && ( )}
update('title', e.target.value)} />
update('album', e.target.value)} />
update('duration', e.target.value)} />
{cardColors.map(c => ( ))}
update('humanName', e.target.value)} disabled={form.author === 'AI'} style={form.author === 'AI' ? { opacity: 0.35, pointerEvents: 'none' } : {}} />
update('spotify', e.target.value)} />
update('apple', e.target.value)} />