diff --git a/app/src/admin/NewsletterPanel.jsx b/app/src/admin/NewsletterPanel.jsx
new file mode 100644
index 0000000..5ddd630
--- /dev/null
+++ b/app/src/admin/NewsletterPanel.jsx
@@ -0,0 +1,42 @@
+import { useState, useEffect } from 'react';
+import { useToast, inputStyle, pillBtn } from '../../teknav-ui.jsx';
+import { adminApi } from '../lib/admin-api.js';
+import { BRAND } from './Shared.jsx';
+
+function NewsletterPanel() {
+  const toast = useToast();
+  const [campaigns, setCampaigns] = useState([]);
+  const [subscribers, setSubscribers] = useState([]);
+  const [subject, setSubject] = useState('');
+  const [bodyHtml, setBodyHtml] = useState('');
+  const load = () => Promise.all([adminApi.listNewsletterCampaigns(), adminApi.listNewsletterSubscribers()]).then(([c, s]) => { setCampaigns(c); setSubscribers(s); });
+  useEffect(() => { load().catch(() => {}); }, []);
+  const create = async (e) => {
+    e.preventDefault();
+    await adminApi.createNewsletterCampaign({ subject, bodyHtml });
+    setSubject('');
+    setBodyHtml('');
+    toast('کمپین خبرنامه ذخیره شد');
+    load();
+  };
+  const send = async (id) => { await adminApi.sendNewsletterCampaign(id); toast('کمپین ارسال شد'); load(); };
+  return (
+    <div style={{ display: 'grid', gap: 18, direction: 'rtl' }}>
+      <div style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: 16 }}>مشترکان واقعی API: {subscribers.length.toLocaleString('fa-IR')}</div>
+      <form onSubmit={create} style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: 16, display: 'grid', gap: 10 }}>
+        <input value={subject} onChange={e => setSubject(e.target.value)} placeholder="موضوع کمپین" style={inputStyle} dir="rtl" />
+        <textarea value={bodyHtml} onChange={e => setBodyHtml(e.target.value)} placeholder="HTML خبرنامه" style={{ ...inputStyle, minHeight: 140 }} dir="rtl" />
+        <button style={{ ...pillBtn, background: BRAND.primary, color: '#fff', justifySelf: 'start' }}>ذخیره کمپین</button>
+      </form>
+      {campaigns.map(c => (
+        <div key={c.id} style={{ background: '#fff', border: '1px solid #E4DDD2', borderRadius: 12, padding: 16 }}>
+          <div style={{ fontWeight: 900, color: BRAND.ink }}>{c.subject}</div>
+          <div style={{ fontSize: 12, color: '#5F6B6D', margin: '6px 0 12px' }}>{c.sentAt ? `ارسال‌شده به ${c.recipientCount}` : 'آماده ارسال'}</div>
+          {!c.sentAt && <button onClick={() => send(c.id)} style={{ ...pillBtn, background: BRAND.primary, color: '#fff' }}>ارسال</button>}
+        </div>
+      ))}
+    </div>
+  );
+}
+
+export { NewsletterPanel };