const { useState, useEffect, useMemo } = React; const API = 'https://srrmgsgbhjiimttjpgop.supabase.co/functions/v1/admin-api'; let PIN = '0102'; try { PIN = localStorage.getItem('abu_admin_pin') || '0102'; } catch(e) {} // Simplified Icons using SVGs const Icons = { Home: () => , Users: () => , Waitlist: () => , Feedback: () => , Safety: () => , Finance: () => , Reports: () => , Config: () => , System: () => , QA: () => }; const SummaryCard = ({ tabName, summaries }) => { const summary = summaries?.find(s => s.tab_name === tabName); if (!summary) return null; const timeAgo = (date) => { const seconds = Math.floor((new Date() - new Date(date)) / 1000); if (seconds < 60) return 'Just now'; const minutes = Math.floor(seconds / 60); if (minutes < 60) return `${minutes}m ago`; const hours = Math.floor(minutes / 60); if (hours < 24) return `${hours}h ago`; return new Date(date).toLocaleDateString(); }; return (
πŸ’‘
AI Insight

{summary.summary}

πŸš€
Recommendation

{summary.recommendation}

Updated: {timeAgo(summary.generated_at)}
); }; function generateInsights(data) { if (!data) return []; const insights = []; const safeVal = (v) => v || 0; const waitlistCount = safeVal(data.funnel?.waitlist); const signedUpCount = safeVal(data.funnel?.signedUp); if (waitlistCount > signedUpCount * 5) { insights.push({ type: 'opportunity', icon: 'πŸ’‘', title: 'Waitlist conversion opportunity', text: `${waitlistCount} waitlist signups but only ${signedUpCount} converted (${Math.round(signedUpCount/Math.max(1, waitlistCount)*100)}%). Target 10% conversion by sending personalized invites.`, action: 'Go to Waitlist β†’', link: '#/waitlist' }); } const paidUsers = (data.usersList || []).filter(u => u.plan && u.plan !== 'free').length; if (paidUsers === 0 && (data.usersList || []).length > 0) { insights.push({ type: 'critical', icon: 'πŸ’°', title: 'No paying users yet', text: `All ${(data.usersList || []).length} users are on free plan. Revenue = $0. First priority: demonstrate Pro value to convert your most active user.`, action: 'View Users β†’', link: '#/users' }); } const activeUsers = (data.usersList || []).filter(u => u.status === 'active').length; if (activeUsers === 0 && (data.usersList || []).length > 0) { insights.push({ type: 'warning', icon: 'πŸ“‰', title: 'No active users this week', text: `None of your ${(data.usersList || []).length} users were active in the last 7 days. Consider sending a re-engagement WhatsApp message or asking for direct feedback.`, action: 'Send nudge β†’', link: '#/users' }); } const criticalSafety = (data.safety || []).filter(s => s.tier >= 2).length; if (criticalSafety > 0) { insights.push({ type: 'critical', icon: '🚨', title: `${criticalSafety} critical safety event(s) this week`, text: `Tier 2+ distress detected. Parent alerts were sent. Review the events immediately to ensure appropriate follow-up.`, action: 'View Safety β†’', link: '#/safety' }); } const proPrice = 7.99; const familyPrice = 11.99; const avgPrice = (proPrice + familyPrice) / 2; const usersFor1MARR = Math.ceil(1000000 / 12 / avgPrice); insights.push({ type: 'info', icon: '🎯', title: 'Path to $1M ARR', text: `You need ~${usersFor1MARR.toLocaleString()} paying users at avg $${avgPrice.toFixed(2)}/mo. At 15% freeβ†’paid conversion, that's ${Math.ceil(usersFor1MARR/0.15).toLocaleString()} total users to acquire.`, action: 'Growth Simulator β†’', link: '#/finance' }); return insights; } function Dashboard({ data }) { if (!data) return null; const totalUsers = data.users ? data.users.length : 0; const activeUsers = data.users ? data.users.filter(u => u.status === 'active').length : 0; const waitlistTotal = data.funnel ? data.funnel.waitlist : 0; const signedUp = data.funnel ? data.funnel.signedUp : 0; const imported = data.funnel ? data.funnel.imported : 0; const active7d = data.funnel ? data.funnel.active7d : 0; const mrr = data.finance?.revenue?.mrr || 0; const totalCost = data.finance?.totalCost || 0; const usersSparkline = [totalUsers-2 < 0 ? 0 : totalUsers-2, totalUsers-1 < 0 ? 0 : totalUsers-1, totalUsers]; const mrrSparkline = [mrr*0.9, mrr*0.95, mrr]; const activeSparkline = [activeUsers-1 < 0 ? 0 : activeUsers-1, activeUsers, activeUsers]; const insights = generateInsights({ funnel: data.funnel, usersList: data.users, safety: data.safety }); return (
Total Users
{totalUsers}
Active DB
MRR
${mrr.toFixed(2)}
Based on plans
Active Users (7d)
{activeUsers} ({totalUsers ? Math.round((activeUsers/totalUsers)*100) : 0}%)
Has 7d messages
Health Score
{100 - ((data.safety || []).filter(s => s.tier >= 2).length * 5 || 0)}
s.tier >= 2) ? 'bg-red-500 shadow-[0_0_12px_rgba(239,68,68,0.6)]' : 'bg-green-500 shadow-[0_0_12px_rgba(34,197,94,0.6)]'}`}>

Conversion Funnel

{waitlistTotal}
Waitlist
β†’ {waitlistTotal ? Math.round((signedUp/waitlistTotal)*100) : 0}%
{signedUp}
Signed Up
β†’ {signedUp ? Math.round((imported/signedUp)*100) : 0}%
{imported}
Imported
β†’ {imported ? Math.round((active7d/imported)*100) : 0}%
{active7d}
Active

Revenue vs Cost

${mrr.toFixed(2)}
MRR
${totalCost.toFixed(2)}
Cost
Gross Margin: {mrr > 0 ? Math.round(((mrr - totalCost)/mrr)*100) : 0}%

✨ CEO Insights

{(insights || []).map((ins, i) => (
{ins.icon}
{ins.title}
{ins.text}
{ins.action}
 ))} {insights.length === 0 && (
No new insights. You're doing great!
)}
); } const Sparkline = ({ data, color = "#3b82f6" }) => { if (!data || data.length === 0) return null; const min = Math.min(...data); const max = Math.max(...data); const range = max - min || 1; const pts = (data || []).map((d, i) => `${(i / (data.length - 1)) * 40},${20 - ((d - min) / range) * 20}`).join(' '); return ( ); }; function UserDrawer({ user, onClose, isWaitlist }) { const [onboarding, setOnboarding] = useState(false); const [deleting, setDeleting] = useState(false); const [copied, setCopied] = useState(false); const [coupon, setCoupon] = useState(''); const parseDevice = (ua) => { if (!ua) return 'Unknown'; if (ua.includes('iPhone')) return 'iPhone'; if (ua.includes('iPad')) return 'iPad'; if (ua.includes('Android')) return 'Android'; if (ua.includes('Mac OS')) return 'Mac'; if (ua.includes('Windows')) return 'Windows'; return 'Desktop/Other'; }; const handleDelete = async () => { if (!confirm('Are you sure you want to delete this request?')) return; setDeleting(true); try { const res = await fetch(`${API}?action=delete_waitlist`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'x-admin-pin': PIN }, body: JSON.stringify({ id: user.id }) }); if (res.ok) { alert('Deleted successfully'); onClose(); window.location.reload(); } else { alert('Failed to delete'); } } catch(e) { console.error(e); alert('Error during deletion'); } finally { setDeleting(false); } }; const handleOnboard = async () => { setOnboarding(true); try { const email = user.email || `user_${(user.id || 'new').substring(0,8)}@temp.abu-genie.com`; const res = await fetch(`${API}?action=add_user`, { method: 'POST', headers: { 'Content-Type': 'application/json', 'x-admin-pin': PIN }, body: JSON.stringify({ name: user.name || 'New User', email: email, phone: user.phone || '', language: 'he', waitlistId: isWaitlist ? user.id : undefined, coupon: coupon }) }); if (res.ok) { alert('User onboarded successfully! Magic link sent to ' + email + (coupon ? ' with coupon ' + coupon : '')); onClose(); window.location.reload(); } else { alert('Failed to onboard user'); } } catch(e) { console.error(e); alert('Error during onboarding'); } finally { setOnboarding(false); } }; const deviceOS = parseDevice(user.user_agent); const reqDate = new Date(user.created_at); return (

{isWaitlist ? 'Waitlist Registration' : 'User Details'}

{isWaitlist && ( )}
{((user.display_name || user.name || "U")[0]).toUpperCase()}
{user.display_name || user.name || "Unknown"}
{user.parent_email || user.email || user.phone || 'No contact info'}
{isWaitlist && Waiting for Onboarding} {!isWaitlist && {user.status}}
{isWaitlist ? (

Registration Metadata

Contact Info
{user.phone || '-'}
Location
{user.country || 'Unknown'}
Platform & Device
{deviceOS}
Request Date
{reqDate.toLocaleDateString()}

πŸš€ Onboard User

This will automatically provision a new clean workspace for this user, link their phone number to Abu, and dispatch a magic link email.

setCoupon(e.target.value)} placeholder="e.g. NOA20" className="w-full bg-white/5 border border-white/10 rounded-lg px-4 py-2.5 text-sm text-white outline-none focus:border-blue-500 focus:bg-white/10 transition-colors" />
) : (
Current Plan
{user.plan || 'Free'}
Social Graph
{user.nodes || 0} Nodes

User Profile & Metadata

User ID { navigator.clipboard.writeText(user.user_id); setCopied(true); setTimeout(()=>setCopied(false), 2000); }}>{user.user_id} {copied ? 'βœ…' : 'πŸ“‹'}
Auth Email{user.email || 'No email associated'}
Phone (WhatsApp){user.phone || 'No phone mapped'}
Registered{new Date(user.created_at).toLocaleString()}
)}