// SP13 / M13 — Email Studio // Transactional + marketing email management: templates, composer, drip campaigns, // send log, deliverability. Lives inside the CMS admin shell. const EmailStudio = ({ setPage }) => { const [view, setView] = React.useState('dashboard'); const [tplId, setTplId] = React.useState(null); return (
{view === 'dashboard' && } {view === 'templates' && !tplId && } {view === 'templates' && tplId && setTplId(null)}/>} {view === 'campaigns' && } {view === 'log' && } {view === 'audiences' && } {view === 'deliverability' && } {view === 'settings' && }
); }; // ── DATA ───────────────────────────────────────────────────────── const EMAIL_TEMPLATES = [ { id:'verify', name:'Verify your email', kind:'transactional', cat:'Auth', sent24:847, opens:92, status:'live', updated:'2h ago', subject:'Confirm your SolidAtoms email', c:'#7c9bff' }, { id:'reset', name:'Reset password', kind:'transactional', cat:'Auth', sent24:124, opens:96, status:'live', updated:'1d', subject:'Reset your SolidAtoms password', c:'#7c9bff' }, { id:'magic', name:'Magic link login', kind:'transactional', cat:'Auth', sent24:312, opens:98, status:'live', updated:'2d', subject:'Your sign-in link', c:'#7c9bff' }, { id:'mfa', name:'MFA code', kind:'transactional', cat:'Auth', sent24:1041, opens:99, status:'live', updated:'3d', subject:'Your code: {{code}}', c:'#7c9bff' }, { id:'invoice', name:'Invoice paid', kind:'transactional', cat:'Billing', sent24:42, opens:88, status:'live', updated:'1w', subject:'Receipt for {{invoice}}', c:'#fde047' }, { id:'inv-due', name:'Invoice due', kind:'transactional', cat:'Billing', sent24:18, opens:74, status:'live', updated:'1w', subject:'Invoice {{invoice}} is due in 3 days', c:'#fde047' }, { id:'sow', name:'SOW ready to sign', kind:'transactional', cat:'Sales', sent24:6, opens:100, status:'live', updated:'2w', subject:'Your SOW is ready', c:'#a78bfa' }, { id:'kickoff', name:'Project kickoff', kind:'transactional', cat:'Project', sent24:3, opens:100, status:'live', updated:'2w', subject:'Welcome to your SolidAtoms project', c:'#d4ff3a' }, { id:'demo', name:'Demo reminder', kind:'transactional', cat:'Project', sent24:8, opens:87, status:'live', updated:'3w', subject:'Demo tomorrow at {{time}}', c:'#d4ff3a' }, { id:'review', name:'Review requested', kind:'transactional', cat:'Project', sent24:14, opens:78, status:'live', updated:'3w', subject:'{{author}} wants your review', c:'#d4ff3a' }, { id:'atoms', name:'Atoms newsletter #18', kind:'marketing', cat:'Newsletter', sent24:0, scheduled:'Fri 09:00', opens:0, status:'scheduled', updated:'30m ago', subject:'How we rebuilt a 14-year-old monolith', c:'#ff8a3a' }, { id:'atoms17', name:'Atoms newsletter #17', kind:'marketing', cat:'Newsletter', sent24:0, opens:48, sent:3214, status:'sent', updated:'1w', subject:'RAG is dead. Long live agents.', c:'#ff8a3a' }, { id:'welcome', name:'Welcome — new lead', kind:'drip', cat:'Sales', sent24:14, opens:71, status:'live', step:'Step 1 of 4', updated:'4d', subject:'Thanks for the brief, {{name}}', c:'#a78bfa' }, ]; const SEND_EVENTS = [ ['09:42','verify','sarah@northbound.io','delivered','#7ee787'], ['09:41','mfa','jane@ledgerline.io','delivered','#7ee787'], ['09:40','review','bilal@solidatoms.com','opened','#d4ff3a'], ['09:38','demo','jane@ledgerline.io','delivered','#7ee787'], ['09:33','verify','noreply@invalid.test','bounced','#ff5a3a'], ['09:30','reset','amir@solidatoms.com','clicked','#d4ff3a'], ['09:28','invoice','billing@verge.shop','delivered','#7ee787'], ['09:24','magic','hassan@solidatoms.com','opened','#d4ff3a'], ['09:22','sow','contact@atlasdocs.org','delivered','#7ee787'], ['09:20','mfa','jane@ledgerline.io','delivered','#7ee787'], ['09:18','verify','old@bounce.invalid','bounced','#ff5a3a'], ['09:15','demo','team@claro.ai','delivered','#7ee787'], ]; // ── SIDEBAR + TOPBAR ───────────────────────────────────────────── const EmailSidebar = ({ view, setView, setPage, setTplId }) => { const NAV = [ {section:'Workspace', items:[ ['dashboard','◐','Dashboard'], ['log','◌','Send log',null,12], ]}, {section:'Templates', items:[ ['templates','▤','All templates',EMAIL_TEMPLATES.length], ]}, {section:'Campaigns', items:[ ['campaigns','◇','Drip campaigns',3], ['audiences','◍','Audiences',5], ]}, {section:'Admin', items:[ ['deliverability','◔','Deliverability'], ['settings','◯','Settings & DNS'], ]}, ]; return ( ); }; const EmailTopbar = ({ view, tplId }) => { const labels = { dashboard:'Dashboard', templates: tplId ? `Templates / ${tplId}` : 'Templates', campaigns:'Drip campaigns', log:'Send log', audiences:'Audiences', deliverability:'Deliverability', settings:'Settings & DNS', }; return (
Email Studio / {labels[view]}
⌕
); }; // ── DASHBOARD ──────────────────────────────────────────────────── const EmailDashboard = ({ setView, setTplId }) => (

Email Studio

{EMAIL_TEMPLATES.length} templates · 2,431 emails sent in the last 24h
{/* Stat row */}
{/* Volume chart */}
● VOLUME · 7 DAYS
14,283 emails sent this week
{[['Delivered','#d4ff3a'],['Bounced','#ff5a3a'],['Complained','#ffb43a']].map(([l,c]) => (
{l}
))}
{['Mon','Tue','Wed','Thu','Fri','Sat','Sun'].map(d => (
{d}
))}
{/* Two-col */}
setView('templates')}> {EMAIL_TEMPLATES.filter(t=>t.kind==='transactional').slice(0,5).map((t,i) => (
{setView('templates'); setTplId(t.id);}} className="clickable" style={{display:'grid',gridTemplateColumns:'30px 1fr 80px 70px 60px',gap:14,padding:'12px 4px',borderBottom: i<4 ? '1px solid var(--line)' : 'none',alignItems:'center'}}> {t.cat.slice(0,2).toUpperCase()}
{t.name}
{t.cat}
{t.sent24.toLocaleString()} {t.opens}% {Icon.arrow()}
))} setView('log')}> {SEND_EVENTS.slice(0,5).map((e,i) => (
{e[0]}
{e[1]} → {e[2]}
{e[3]}
))}
{[ ['Fri 09:00','Atoms newsletter #18','3,214 subs','#ff8a3a'], ['Mon 10:00','Sprint 12 kickoff','5 recipients','#d4ff3a'], ['Wed 14:00','Q2 client update','41 recipients','#a78bfa'], ].map(([t,n,r,c],i) => (
{t}
{n}
{r.toUpperCase()}
))}
setView('deliverability')}>
{[ ['SPF','PASS','#7ee787'], ['DKIM','PASS','#7ee787'], ['DMARC','PASS','#7ee787'], ['REPUTATION','99/100','#d4ff3a'], ].map(([l,v,c]) => (
{l}
{v}
))}
● All systems operational. No domains under throttling.
); const VolumeChart = () => { const days = [1850, 2120, 1980, 2310, 2431, 1620, 1972]; const max = Math.max(...days); return ( {[0,40,80,120].map(y => )} {days.map((v,i) => { const x = 50 + i*100; const h = (v/max) * 130; return ( {v.toLocaleString()} {/* tiny stripe of bounces */} ); })} ); }; // ── TEMPLATE LIBRARY ───────────────────────────────────────────── const TemplateLibrary = ({ onOpen }) => { const [kind, setKind] = React.useState('all'); const [cat, setCat] = React.useState('all'); const kinds = [['all','All'],['transactional','Transactional'],['marketing','Marketing'],['drip','Drip']]; const cats = ['all','Auth','Billing','Sales','Project','Newsletter']; const filtered = EMAIL_TEMPLATES.filter(t => (kind==='all' || t.kind===kind) && (cat==='all' || t.cat===cat) ); return (

Templates

{EMAIL_TEMPLATES.length} templates · {EMAIL_TEMPLATES.filter(t=>t.status==='live').length} live
{/* Filters */}
KIND
{kinds.map(([k,l]) => ( ))}
CATEGORY
{cats.map(c => ( ))}
{filtered.length} OF {EMAIL_TEMPLATES.length}
{/* Grid of preview cards */}
{filtered.map(t => ( ))}
); }; // ── TEMPLATE EDITOR ────────────────────────────────────────────── const TemplateEditor = ({ id, onBack }) => { const t = EMAIL_TEMPLATES.find(x => x.id === id) || EMAIL_TEMPLATES[0]; const [tab, setTab] = React.useState('design'); const [previewMode, setPreviewMode] = React.useState('desktop'); return (
{/* Editor topbar */}
{t.name} · v4 · unsaved
{[['desktop','▭'],['mobile','▯']].map(([m,ic]) => ( ))}
{/* Left: editor controls */} {/* Middle: live preview */}
{/* Right: stats + version history */}
); }; const EmailPreview = ({ t, previewMode }) => { const width = previewMode === 'mobile' ? 360 : 560; return (
INBOX PREVIEW Hassan from SolidAtoms <hi@solidatoms.com>
9:42 AM
{/* Brand bar */}
◉ SolidAtoms

{t.cat === 'Auth' ? 'Verify your email address' : t.cat === 'Billing' ? 'Receipt for your payment' : t.cat === 'Project' ? 'Welcome to your project' : 'A new update from SolidAtoms'}

Hi Jane,

{t.cat === 'Auth' && ( <>

Thanks for signing up to SolidAtoms. To finish setting up your account, please confirm your email address by clicking the button below.

)} {t.cat === 'Billing' && ( <>

This is your receipt for invoice INV-0042, paid on May 1, 2026. A copy is attached for your records.

)} {t.cat === 'Project' && ( <>

Your project kicks off Monday at 10am. Here's where everything lives.

)} {t.cat === 'Newsletter' && ( <>

This week we shipped one essay, one tool, and one case study you might find useful.

)} {t.cat === 'Sales' && ( <>

Your SOW is ready to sign. Take a look — the scope, the timeline, the price are all in there.

)} {/* CTA */}

This link expires in 24 hours. If you didn't sign up for SolidAtoms, you can safely ignore this email.

OR PASTE THIS URL
https://solidatoms.com/verify?t=abc123def456ghi789
{/* Signature */}

— Hassan, founder at SolidAtoms

{/* Footer */}
◉ SolidAtoms Studio

Karachi → Remote · solidatoms.com

); }; // ── CAMPAIGNS (DRIP) ───────────────────────────────────────────── const Campaigns = () => { const campaigns = [ {n:'Welcome — new lead',steps:4,enr:142,conv:38,c:'#a78bfa',active:true,trigger:'contact_form.submitted'}, {n:'Trial → paid (Studio)',steps:5,enr:48,conv:12,c:'#d4ff3a',active:true,trigger:'subscription.trial_started'}, {n:'Onboarding · day 1, 3, 7',steps:3,enr:21,conv:18,c:'#7c9bff',active:true,trigger:'workspace.created'}, ]; return (

Drip campaigns

3 active sequences · 211 contacts enrolled
{campaigns.map((c,ci) => (

{c.n}

{c.trigger} · {c.enr} enrolled · {c.conv} converted
{/* Steps timeline */}
{Array.from({length:c.steps},(_,i)=>i).map((i, ii) => (
STEP {i+1}
{ ci===0 ? ['Thanks for the brief','Why we ask what we ask','Case study you might like','Wanna chat?'][i] : ci===1 ? ['Welcome to Studio','Set up your domain','Connect Stripe','One week left','Last day — upgrade?'][i] : ['Day 1: First steps','Day 3: Invite team','Day 7: Power user tips'][i] }
{ i === 0 ? 'IMMEDIATE' : `WAIT ${[2,3,7][Math.min(i-1,2)]}D` }
{ii*2+1 < c.steps*2-1 && (
→
)} ))}
))}
); }; // ── SEND LOG ───────────────────────────────────────────────────── const SendLog = () => { const filter = ['All','Delivered','Opened','Clicked','Bounced','Complained']; const [active, setActive] = React.useState('All'); return (

Send log

Realtime · every send, every event, every webhook
{filter.map(f => ( ))}
{['Time','Template','To','Subject','Status',''].map(h => (
{h}
))}
{SEND_EVENTS.concat(SEND_EVENTS).map((e,i) => { const tpl = EMAIL_TEMPLATES.find(t => t.id === e[1]) || EMAIL_TEMPLATES[0]; return (
0 ? '1px solid var(--line)' : 'none'}}> {e[0]}
{e[1]}
{e[2]} {tpl.subject} {e[3]} {Icon.arrow()}
); })}
Showing 24 of 2,431 events
); }; // ── AUDIENCES ──────────────────────────────────────────────────── const Audiences = () => { const audiences = [ {n:'Newsletter subscribers',size:3214,growth:'+24 this week',c:'#ff8a3a'}, {n:'Active clients',size:14,growth:'+1 this month',c:'#d4ff3a'}, {n:'Past clients',size:27,growth:'no change',c:'#a78bfa'}, {n:'New leads · last 30d',size:42,growth:'+8 vs prev period',c:'#7c9bff'}, {n:'Tools — paid users',size:218,growth:'+12 this week',c:'#fde047'}, ]; return (

Audiences

5 audiences · 3,515 unique contacts
{audiences.map(a => (
{a.n[0]}
{a.n}
{a.size.toLocaleString()} contacts
{a.growth.toUpperCase()}
))}
); }; // ── DELIVERABILITY ─────────────────────────────────────────────── const Deliverability = () => (

Deliverability

DNS configuration, reputation, and where your mail is actually landing.
{/* DNS */}
● DNS · ALL VERIFIED
{[ ['SPF','TXT','solidatoms.com','v=spf1 include:_spf.resend.com -all','✓ Verified'], ['DKIM','CNAME','resend._domainkey.solidatoms.com','resend._domainkey.resend.com','✓ Verified'], ['DMARC','TXT','_dmarc.solidatoms.com','v=DMARC1; p=quarantine; rua=mailto:dmarc@…','✓ Verified'], ['Return-Path','MX','bounce.solidatoms.com','feedback-smtp.us-east-1.amazonses.com','✓ Verified'], ].map(([n,t,host,val,s],i) => (
{n} {t} {host} {val} {s}
))}
{/* Reputation */}
SENDER REPUTATION
99 / 100
Excellent. You're in the top 1% of senders by domain reputation.
INBOX PLACEMENT · 7 DAYS
{[ ['Gmail','98%','#7ee787'], ['Apple Mail','99%','#7ee787'], ['Outlook 365','94%','#7ee787'], ['Yahoo','91%','#ffb43a'], ].map(([p,v,c]) => (
{p}
{v}
))}
{/* Bounce types */}
BOUNCES & COMPLAINTS · 30 DAYS
{[ ['Hard bounces',18,'0.05%','#ff5a3a'], ['Soft bounces',7,'0.02%','#ffb43a'], ['Complaints',2,'0.01%','#a78bfa'], ['Suppressions',25,'auto-managed','#7c9bff'], ].map(([l,v,p,c]) => (
{l}
{v}
{p}
))}
); // ── SETTINGS ───────────────────────────────────────────────────── const EmailSettings = () => (

Settings & DNS

SENDING DOMAINS
{[ ['solidatoms.com','Primary','✓ Verified','12,283 sent / mo'], ['mail.solidatoms.com','Transactional','✓ Verified','2,431 sent / day'], ['news.solidatoms.com','Marketing','✓ Verified','3,214 subscribers'], ].map(([d,t,s,sent],i)=>(
{d} {t} {s} {sent} ⋯
))}
WEBHOOK ENDPOINTS
{[ ['https://api.solidatoms.com/webhooks/email','all events','99.8% delivered'], ['https://hooks.slack.com/services/T0…','bounce, complaint','100% delivered'], ].map(([u,ev,d],i)=>(
{u} {ev} {d}
))}
SUPPRESSION LIST
1,247 addresses suppressed
Unsubscribes · 1,194 · Bounces · 38 · Complaints · 15
); window.EmailStudio = EmailStudio;