From 3d5191aab33893799a7dfaa314f0ba904b2ada14 Mon Sep 17 00:00:00 2001
From: Dwindi Ramadhana <dwindown@DwMacMiniM4.local>
Date: Wed, 31 Dec 2025 18:59:49 +0700
Subject: [PATCH] feat: add Newsletter Campaigns frontend UI

- Add Campaigns list page with table, status badges, search, actions
- Add Campaign editor with title, subject, content fields
- Add preview modal, test email dialog, send confirmation
- Update Marketing index to show hub with Newsletter, Campaigns, Coupons cards
- Add routes in App.tsx
---
 admin-spa/src/App.tsx                         |  72 ++--
 .../src/routes/Marketing/Campaigns/Edit.tsx   | 400 ++++++++++++++++++
 .../src/routes/Marketing/Campaigns/index.tsx  | 293 +++++++++++++
 admin-spa/src/routes/Marketing/index.tsx      |  62 ++-
 4 files changed, 791 insertions(+), 36 deletions(-)
 create mode 100644 admin-spa/src/routes/Marketing/Campaigns/Edit.tsx
 create mode 100644 admin-spa/src/routes/Marketing/Campaigns/index.tsx

diff --git a/admin-spa/src/App.tsx b/admin-spa/src/App.tsx
index 3a164e0..4a2805b 100644
--- a/admin-spa/src/App.tsx
+++ b/admin-spa/src/App.tsx
@@ -101,12 +101,12 @@ function ActiveNavLink({ to, startsWith, end, className, children, childPaths }:
       className={(nav) => {
         // Special case: Dashboard should ONLY match root path "/" or paths starting with "/dashboard"
         const isDashboard = starts === '/dashboard' && (location.pathname === '/' || location.pathname.startsWith('/dashboard'));
-        
+
         // Check if current path matches any child paths (e.g., /coupons under Marketing)
-        const matchesChild = childPaths && Array.isArray(childPaths) 
+        const matchesChild = childPaths && Array.isArray(childPaths)
           ? childPaths.some((childPath: string) => location.pathname.startsWith(childPath))
           : false;
-        
+
         // For dashboard: only active if isDashboard is true
         // For others: active if path starts with their path OR matches a child path
         let activeByPath = false;
@@ -115,7 +115,7 @@ function ActiveNavLink({ to, startsWith, end, className, children, childPaths }:
         } else if (starts) {
           activeByPath = location.pathname.startsWith(starts) || matchesChild;
         }
-        
+
         const mergedActive = nav.isActive || activeByPath;
         if (typeof className === 'function') {
           // Preserve caller pattern: className receives { isActive }
@@ -133,7 +133,7 @@ function Sidebar() {
   const link = "flex items-center gap-2 rounded-md px-3 py-2 hover:bg-accent hover:text-accent-foreground shadow-none hover:shadow-none focus:shadow-none focus:outline-none focus:ring-0";
   const active = "bg-secondary";
   const { main } = useActiveSection();
-  
+
   // Icon mapping
   const iconMap: Record<string, any> = {
     'layout-dashboard': LayoutDashboard,
@@ -145,10 +145,10 @@ function Sidebar() {
     'palette': Palette,
     'settings': SettingsIcon,
   };
-  
+
   // Get navigation tree from backend
   const navTree = (window as any).WNW_NAV_TREE || [];
-  
+
   return (
     <aside className="w-56 flex-shrink-0 p-3 border-r border-border sticky top-16 h-[calc(100vh-64px)] overflow-y-auto bg-background">
       <nav className="flex flex-col gap-1">
@@ -176,7 +176,7 @@ function TopNav({ fullscreen = false }: { fullscreen?: boolean }) {
   const active = "bg-secondary";
   const topClass = fullscreen ? 'top-16' : 'top-[calc(4rem+32px)]';
   const { main } = useActiveSection();
-  
+
   // Icon mapping (same as Sidebar)
   const iconMap: Record<string, any> = {
     'layout-dashboard': LayoutDashboard,
@@ -188,10 +188,10 @@ function TopNav({ fullscreen = false }: { fullscreen?: boolean }) {
     'palette': Palette,
     'settings': SettingsIcon,
   };
-  
+
   // Get navigation tree from backend
   const navTree = (window as any).WNW_NAV_TREE || [];
-  
+
   return (
     <div className={`border-b border-border sticky ${topClass} z-30 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60`}>
       <div className="px-4 h-12 flex flex-nowrap overflow-auto items-center gap-2">
@@ -257,6 +257,8 @@ import AppearanceThankYou from '@/routes/Appearance/ThankYou';
 import AppearanceAccount from '@/routes/Appearance/Account';
 import MarketingIndex from '@/routes/Marketing';
 import NewsletterSubscribers from '@/routes/Marketing/Newsletter';
+import CampaignsList from '@/routes/Marketing/Campaigns';
+import CampaignEdit from '@/routes/Marketing/Campaigns/Edit';
 import MorePage from '@/routes/More';
 
 // Addon Route Component - Dynamically loads addon components
@@ -332,31 +334,31 @@ function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRe
   const lastScrollYRef = React.useRef(0);
   const isStandalone = window.WNW_CONFIG?.standaloneMode ?? false;
   const [isDark, setIsDark] = React.useState(false);
-  
+
   // Detect dark mode
   React.useEffect(() => {
     const checkDarkMode = () => {
       const htmlEl = document.documentElement;
       setIsDark(htmlEl.classList.contains('dark'));
     };
-    
+
     checkDarkMode();
-    
+
     // Watch for theme changes
     const observer = new MutationObserver(checkDarkMode);
     observer.observe(document.documentElement, {
       attributes: true,
       attributeFilter: ['class']
     });
-    
+
     return () => observer.disconnect();
   }, []);
-  
+
   // Notify parent of visibility changes
   React.useEffect(() => {
     onVisibilityChange?.(isVisible);
   }, [isVisible, onVisibilityChange]);
-  
+
   // Fetch store branding on mount
   React.useEffect(() => {
     const fetchBranding = async () => {
@@ -374,7 +376,7 @@ function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRe
     };
     fetchBranding();
   }, []);
-  
+
   // Listen for store settings updates
   React.useEffect(() => {
     const handleStoreUpdate = (event: CustomEvent) => {
@@ -382,25 +384,25 @@ function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRe
       if (event.detail?.store_logo_dark) setStoreLogoDark(event.detail.store_logo_dark);
       if (event.detail?.store_name) setSiteTitle(event.detail.store_name);
     };
-    
+
     window.addEventListener('woonoow:store:updated' as any, handleStoreUpdate);
     return () => window.removeEventListener('woonoow:store:updated' as any, handleStoreUpdate);
   }, []);
-  
+
   // Hide/show header on scroll (mobile only)
   React.useEffect(() => {
     const scrollContainer = scrollContainerRef?.current;
     if (!scrollContainer) return;
-    
+
     const handleScroll = () => {
       const currentScrollY = scrollContainer.scrollTop;
-      
+
       // Only apply on mobile (check window width)
       if (window.innerWidth >= 768) {
         setIsVisible(true);
         return;
       }
-      
+
       if (currentScrollY > lastScrollYRef.current && currentScrollY > 50) {
         // Scrolling down & past threshold
         setIsVisible(false);
@@ -408,17 +410,17 @@ function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRe
         // Scrolling up
         setIsVisible(true);
       }
-      
+
       lastScrollYRef.current = currentScrollY;
     };
 
     scrollContainer.addEventListener('scroll', handleScroll, { passive: true });
-    
+
     return () => {
       scrollContainer.removeEventListener('scroll', handleScroll);
     };
   }, [scrollContainerRef]);
-  
+
   const handleLogout = async () => {
     try {
       await fetch((window.WNW_CONFIG?.restUrl || '') + '/auth/logout', {
@@ -430,15 +432,15 @@ function Header({ onFullscreen, fullscreen, showToggle = true, scrollContainerRe
       console.error('Logout failed:', err);
     }
   };
-  
+
   // Hide header completely on mobile in fullscreen mode (both standalone and wp-admin fullscreen)
   if (fullscreen && typeof window !== 'undefined' && window.innerWidth < 768) {
     return null;
   }
-  
+
   // Choose logo based on theme
   const currentLogo = isDark && storeLogoDark ? storeLogoDark : storeLogo;
-  
+
   return (
     <header className={`h-16 border-b border-border flex items-center px-4 justify-between sticky ${fullscreen ? `top-0` : `top-[32px]`} z-40 bg-background md:bg-background/95 md:backdrop-blur md:supports-[backdrop-filter]:bg-background/60 transition-transform duration-300 ${fullscreen && !isVisible ? '-translate-y-full md:translate-y-0' : 'translate-y-0'}`}>
       <div className="flex items-center gap-3">
@@ -494,7 +496,7 @@ function ShortcutsBinder({ onToggle }: { onToggle: () => void }) {
 // Centralized route controller so we don't duplicate <Routes> in each layout
 function AppRoutes() {
   const addonRoutes = (window as any).WNW_ADDON_ROUTES || [];
-  
+
   return (
     <Routes>
       {/* Dashboard */}
@@ -560,7 +562,7 @@ function AppRoutes() {
       <Route path="/settings/developer" element={<SettingsDeveloper />} />
       <Route path="/settings/modules" element={<SettingsModules />} />
       <Route path="/settings/modules/:moduleId" element={<ModuleSettings />} />
-      
+
       {/* Appearance */}
       <Route path="/appearance" element={<AppearanceIndex />} />
       <Route path="/appearance/general" element={<AppearanceGeneral />} />
@@ -576,6 +578,8 @@ function AppRoutes() {
       {/* Marketing */}
       <Route path="/marketing" element={<MarketingIndex />} />
       <Route path="/marketing/newsletter" element={<NewsletterSubscribers />} />
+      <Route path="/marketing/campaigns" element={<CampaignsList />} />
+      <Route path="/marketing/campaigns/:id" element={<CampaignEdit />} />
 
       {/* Dynamic Addon Routes */}
       {addonRoutes.map((route: any) => (
@@ -597,14 +601,14 @@ function Shell() {
   const isDesktop = useIsDesktop();
   const location = useLocation();
   const scrollContainerRef = React.useRef<HTMLDivElement>(null);
-  
+
   // Check if standalone mode - force fullscreen and hide toggle
   const isStandalone = window.WNW_CONFIG?.standaloneMode ?? false;
   const fullscreen = isStandalone ? true : on;
-  
+
   // Check if current route is dashboard
   const isDashboardRoute = location.pathname === '/' || location.pathname.startsWith('/dashboard');
-  
+
   // Check if current route is More page (no submenu needed)
   const isMorePage = location.pathname === '/more';
 
@@ -740,7 +744,7 @@ export default function App() {
   React.useEffect(() => {
     initializeWindowAPI();
   }, []);
-  
+
   return (
     <QueryClientProvider client={qc}>
       <HashRouter>
diff --git a/admin-spa/src/routes/Marketing/Campaigns/Edit.tsx b/admin-spa/src/routes/Marketing/Campaigns/Edit.tsx
new file mode 100644
index 0000000..afc7ad7
--- /dev/null
+++ b/admin-spa/src/routes/Marketing/Campaigns/Edit.tsx
@@ -0,0 +1,400 @@
+import React, { useState, useEffect } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNavigate, useParams } from 'react-router-dom';
+import { SettingsLayout } from '@/routes/Settings/components/SettingsLayout';
+import { SettingsCard } from '@/routes/Settings/components/SettingsCard';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Textarea } from '@/components/ui/textarea';
+import {
+    ArrowLeft,
+    Send,
+    Eye,
+    TestTube,
+    Save,
+    Loader2,
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { api } from '@/lib/api';
+import { __ } from '@/lib/i18n';
+import {
+    Dialog,
+    DialogContent,
+    DialogHeader,
+    DialogTitle,
+} from '@/components/ui/dialog';
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+interface Campaign {
+    id: number;
+    title: string;
+    subject: string;
+    content: string;
+    status: string;
+    scheduled_at: string | null;
+}
+
+export default function CampaignEdit() {
+    const { id } = useParams<{ id: string }>();
+    const isNew = id === 'new';
+    const navigate = useNavigate();
+    const queryClient = useQueryClient();
+
+    const [title, setTitle] = useState('');
+    const [subject, setSubject] = useState('');
+    const [content, setContent] = useState('');
+    const [showPreview, setShowPreview] = useState(false);
+    const [previewHtml, setPreviewHtml] = useState('');
+    const [showTestDialog, setShowTestDialog] = useState(false);
+    const [testEmail, setTestEmail] = useState('');
+    const [showSendConfirm, setShowSendConfirm] = useState(false);
+    const [isSaving, setIsSaving] = useState(false);
+
+    // Fetch campaign if editing
+    const { data: campaign, isLoading } = useQuery({
+        queryKey: ['campaign', id],
+        queryFn: async () => {
+            const response = await api.get(`/campaigns/${id}`);
+            return response.data as Campaign;
+        },
+        enabled: !isNew && !!id,
+    });
+
+    // Populate form when campaign loads
+    useEffect(() => {
+        if (campaign) {
+            setTitle(campaign.title || '');
+            setSubject(campaign.subject || '');
+            setContent(campaign.content || '');
+        }
+    }, [campaign]);
+
+    // Save mutation
+    const saveMutation = useMutation({
+        mutationFn: async (data: { title: string; subject: string; content: string; status?: string }) => {
+            if (isNew) {
+                return api.post('/campaigns', data);
+            } else {
+                return api.put(`/campaigns/${id}`, data);
+            }
+        },
+        onSuccess: (response) => {
+            queryClient.invalidateQueries({ queryKey: ['campaigns'] });
+            toast.success(isNew ? __('Campaign created') : __('Campaign saved'));
+            if (isNew && response?.data?.id) {
+                navigate(`/marketing/campaigns/${response.data.id}`, { replace: true });
+            }
+        },
+        onError: () => {
+            toast.error(__('Failed to save campaign'));
+        },
+    });
+
+    // Preview mutation
+    const previewMutation = useMutation({
+        mutationFn: async () => {
+            // First save, then preview
+            let campaignId = id;
+            if (isNew || !id) {
+                const saveResponse = await api.post('/campaigns', { title, subject, content, status: 'draft' });
+                campaignId = saveResponse?.data?.id;
+                if (campaignId) {
+                    navigate(`/marketing/campaigns/${campaignId}`, { replace: true });
+                }
+            } else {
+                await api.put(`/campaigns/${id}`, { title, subject, content });
+            }
+
+            const response = await api.get(`/campaigns/${campaignId}/preview`);
+            return response;
+        },
+        onSuccess: (response) => {
+            setPreviewHtml(response?.html || response?.data?.html || '');
+            setShowPreview(true);
+        },
+        onError: () => {
+            toast.error(__('Failed to generate preview'));
+        },
+    });
+
+    // Test email mutation
+    const testMutation = useMutation({
+        mutationFn: async (email: string) => {
+            // First save
+            if (!isNew && id) {
+                await api.put(`/campaigns/${id}`, { title, subject, content });
+            }
+            return api.post(`/campaigns/${id}/test`, { email });
+        },
+        onSuccess: () => {
+            toast.success(__('Test email sent'));
+            setShowTestDialog(false);
+        },
+        onError: () => {
+            toast.error(__('Failed to send test email'));
+        },
+    });
+
+    // Send mutation
+    const sendMutation = useMutation({
+        mutationFn: async () => {
+            // First save
+            await api.put(`/campaigns/${id}`, { title, subject, content });
+            return api.post(`/campaigns/${id}/send`);
+        },
+        onSuccess: (response) => {
+            queryClient.invalidateQueries({ queryKey: ['campaigns'] });
+            queryClient.invalidateQueries({ queryKey: ['campaign', id] });
+            toast.success(response?.message || __('Campaign sent successfully'));
+            setShowSendConfirm(false);
+            navigate('/marketing/campaigns');
+        },
+        onError: (error: any) => {
+            toast.error(error?.response?.data?.error || __('Failed to send campaign'));
+        },
+    });
+
+    const handleSave = async () => {
+        if (!title.trim()) {
+            toast.error(__('Please enter a title'));
+            return;
+        }
+        setIsSaving(true);
+        try {
+            await saveMutation.mutateAsync({ title, subject, content, status: 'draft' });
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    const canSend = !isNew && id && campaign?.status !== 'sent' && campaign?.status !== 'sending';
+
+    if (!isNew && isLoading) {
+        return (
+            <SettingsLayout title={__('Loading...')} description="">
+                <div className="flex items-center justify-center py-12">
+                    <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+                </div>
+            </SettingsLayout>
+        );
+    }
+
+    return (
+        <SettingsLayout
+            title={isNew ? __('New Campaign') : __('Edit Campaign')}
+            description={isNew ? __('Create a new email campaign') : campaign?.title || ''}
+        >
+            {/* Back button */}
+            <div className="mb-6">
+                <Button variant="ghost" onClick={() => navigate('/marketing/campaigns')}>
+                    <ArrowLeft className="mr-2 h-4 w-4" />
+                    {__('Back to Campaigns')}
+                </Button>
+            </div>
+
+            <div className="space-y-6">
+                {/* Campaign Details */}
+                <SettingsCard
+                    title={__('Campaign Details')}
+                    description={__('Basic information about your campaign')}
+                >
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="title">{__('Campaign Title')}</Label>
+                            <Input
+                                id="title"
+                                placeholder={__('e.g., Holiday Sale Announcement')}
+                                value={title}
+                                onChange={(e) => setTitle(e.target.value)}
+                            />
+                            <p className="text-xs text-muted-foreground">
+                                {__('Internal name for this campaign (not shown to subscribers)')}
+                            </p>
+                        </div>
+
+                        <div className="space-y-2">
+                            <Label htmlFor="subject">{__('Email Subject')}</Label>
+                            <Input
+                                id="subject"
+                                placeholder={__('e.g., 🎄 Exclusive Holiday Deals Inside!')}
+                                value={subject}
+                                onChange={(e) => setSubject(e.target.value)}
+                            />
+                            <p className="text-xs text-muted-foreground">
+                                {__('The subject line subscribers will see in their inbox')}
+                            </p>
+                        </div>
+                    </div>
+                </SettingsCard>
+
+                {/* Campaign Content */}
+                <SettingsCard
+                    title={__('Campaign Content')}
+                    description={__('Write your newsletter content. The design template is configured in Settings > Notifications.')}
+                >
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="content">{__('Email Content')}</Label>
+                            <Textarea
+                                id="content"
+                                placeholder={__('Write your newsletter content here...\n\nYou can use:\n- {site_name} - Your store name\n- {current_date} - Today\'s date\n- {subscriber_email} - Subscriber\'s email')}
+                                value={content}
+                                onChange={(e) => setContent(e.target.value)}
+                                className="min-h-[300px] font-mono text-sm"
+                            />
+                            <p className="text-xs text-muted-foreground">
+                                {__('Use HTML for rich formatting. The design wrapper will be applied from your campaign email template.')}
+                            </p>
+                        </div>
+                    </div>
+                </SettingsCard>
+
+                {/* Actions */}
+                <div className="flex flex-col sm:flex-row gap-3 sm:justify-between">
+                    <div className="flex gap-3">
+                        <Button
+                            variant="outline"
+                            onClick={() => previewMutation.mutate()}
+                            disabled={previewMutation.isPending || !title.trim()}
+                        >
+                            {previewMutation.isPending ? (
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            ) : (
+                                <Eye className="mr-2 h-4 w-4" />
+                            )}
+                            {__('Preview')}
+                        </Button>
+
+                        {!isNew && (
+                            <Button
+                                variant="outline"
+                                onClick={() => setShowTestDialog(true)}
+                                disabled={!id}
+                            >
+                                <TestTube className="mr-2 h-4 w-4" />
+                                {__('Send Test')}
+                            </Button>
+                        )}
+                    </div>
+
+                    <div className="flex gap-3">
+                        <Button
+                            variant="outline"
+                            onClick={handleSave}
+                            disabled={isSaving || !title.trim()}
+                        >
+                            {isSaving ? (
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            ) : (
+                                <Save className="mr-2 h-4 w-4" />
+                            )}
+                            {__('Save Draft')}
+                        </Button>
+
+                        {canSend && (
+                            <Button
+                                onClick={() => setShowSendConfirm(true)}
+                                disabled={sendMutation.isPending}
+                            >
+                                {sendMutation.isPending ? (
+                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                ) : (
+                                    <Send className="mr-2 h-4 w-4" />
+                                )}
+                                {__('Send Now')}
+                            </Button>
+                        )}
+                    </div>
+                </div>
+            </div>
+
+            {/* Preview Dialog */}
+            <Dialog open={showPreview} onOpenChange={setShowPreview}>
+                <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+                    <DialogHeader>
+                        <DialogTitle>{__('Email Preview')}</DialogTitle>
+                    </DialogHeader>
+                    <div className="border rounded-lg bg-white p-4">
+                        <div
+                            className="prose max-w-none"
+                            dangerouslySetInnerHTML={{ __html: previewHtml }}
+                        />
+                    </div>
+                </DialogContent>
+            </Dialog>
+
+            {/* Test Email Dialog */}
+            <Dialog open={showTestDialog} onOpenChange={setShowTestDialog}>
+                <DialogContent>
+                    <DialogHeader>
+                        <DialogTitle>{__('Send Test Email')}</DialogTitle>
+                    </DialogHeader>
+                    <div className="space-y-4">
+                        <div className="space-y-2">
+                            <Label htmlFor="test-email">{__('Email Address')}</Label>
+                            <Input
+                                id="test-email"
+                                type="email"
+                                placeholder="your@email.com"
+                                value={testEmail}
+                                onChange={(e) => setTestEmail(e.target.value)}
+                            />
+                        </div>
+                        <div className="flex justify-end gap-3">
+                            <Button variant="outline" onClick={() => setShowTestDialog(false)}>
+                                {__('Cancel')}
+                            </Button>
+                            <Button
+                                onClick={() => testMutation.mutate(testEmail)}
+                                disabled={!testEmail || testMutation.isPending}
+                            >
+                                {testMutation.isPending ? (
+                                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                ) : (
+                                    <Send className="mr-2 h-4 w-4" />
+                                )}
+                                {__('Send Test')}
+                            </Button>
+                        </div>
+                    </div>
+                </DialogContent>
+            </Dialog>
+
+            {/* Send Confirmation Dialog */}
+            <AlertDialog open={showSendConfirm} onOpenChange={setShowSendConfirm}>
+                <AlertDialogContent>
+                    <AlertDialogHeader>
+                        <AlertDialogTitle>{__('Send Campaign')}</AlertDialogTitle>
+                        <AlertDialogDescription>
+                            {__('Are you sure you want to send this campaign to all newsletter subscribers? This action cannot be undone.')}
+                        </AlertDialogDescription>
+                    </AlertDialogHeader>
+                    <AlertDialogFooter>
+                        <AlertDialogCancel>{__('Cancel')}</AlertDialogCancel>
+                        <AlertDialogAction
+                            onClick={() => sendMutation.mutate()}
+                            disabled={sendMutation.isPending}
+                        >
+                            {sendMutation.isPending ? (
+                                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                            ) : (
+                                <Send className="mr-2 h-4 w-4" />
+                            )}
+                            {__('Send to All Subscribers')}
+                        </AlertDialogAction>
+                    </AlertDialogFooter>
+                </AlertDialogContent>
+            </AlertDialog>
+        </SettingsLayout>
+    );
+}
diff --git a/admin-spa/src/routes/Marketing/Campaigns/index.tsx b/admin-spa/src/routes/Marketing/Campaigns/index.tsx
new file mode 100644
index 0000000..f7c025f
--- /dev/null
+++ b/admin-spa/src/routes/Marketing/Campaigns/index.tsx
@@ -0,0 +1,293 @@
+import React, { useState } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { useNavigate } from 'react-router-dom';
+import { SettingsLayout } from '@/routes/Settings/components/SettingsLayout';
+import { SettingsCard } from '@/routes/Settings/components/SettingsCard';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { 
+  Plus, 
+  Search, 
+  Send, 
+  Clock, 
+  CheckCircle2, 
+  AlertCircle,
+  Trash2,
+  Edit,
+  MoreHorizontal,
+  Copy
+} from 'lucide-react';
+import { toast } from 'sonner';
+import { api } from '@/lib/api';
+import { __ } from '@/lib/i18n';
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog";
+
+interface Campaign {
+  id: number;
+  title: string;
+  subject: string;
+  status: 'draft' | 'scheduled' | 'sending' | 'sent' | 'failed';
+  recipient_count: number;
+  sent_count: number;
+  failed_count: number;
+  scheduled_at: string | null;
+  sent_at: string | null;
+  created_at: string;
+}
+
+const statusConfig = {
+  draft: { label: 'Draft', icon: Edit, className: 'bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300' },
+  scheduled: { label: 'Scheduled', icon: Clock, className: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300' },
+  sending: { label: 'Sending', icon: Send, className: 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300' },
+  sent: { label: 'Sent', icon: CheckCircle2, className: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300' },
+  failed: { label: 'Failed', icon: AlertCircle, className: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300' },
+};
+
+export default function CampaignsList() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+  const navigate = useNavigate();
+  const queryClient = useQueryClient();
+
+  const { data, isLoading } = useQuery({
+    queryKey: ['campaigns'],
+    queryFn: async () => {
+      const response = await api.get('/campaigns');
+      return response.data as Campaign[];
+    },
+  });
+
+  const deleteMutation = useMutation({
+    mutationFn: async (id: number) => {
+      await api.del(`/campaigns/${id}`);
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['campaigns'] });
+      toast.success(__('Campaign deleted'));
+      setDeleteId(null);
+    },
+    onError: () => {
+      toast.error(__('Failed to delete campaign'));
+    },
+  });
+
+  const duplicateMutation = useMutation({
+    mutationFn: async (campaign: Campaign) => {
+      const response = await api.post('/campaigns', {
+        title: `${campaign.title} (Copy)`,
+        subject: campaign.subject,
+        content: '', // Would need to fetch full content
+        status: 'draft',
+      });
+      return response;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['campaigns'] });
+      toast.success(__('Campaign duplicated'));
+    },
+    onError: () => {
+      toast.error(__('Failed to duplicate campaign'));
+    },
+  });
+
+  const campaigns = data || [];
+  const filteredCampaigns = campaigns.filter((c) =>
+    c.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
+    c.subject?.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  const formatDate = (dateStr: string | null) => {
+    if (!dateStr) return '-';
+    return new Date(dateStr).toLocaleDateString(undefined, {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  return (
+    <SettingsLayout
+      title={__('Campaigns')}
+      description={__('Create and send email campaigns to your newsletter subscribers')}
+    >
+      <SettingsCard
+        title={__('All Campaigns')}
+        description={`${campaigns.length} ${__('campaigns total')}`}
+      >
+        <div className="space-y-4">
+          {/* Actions Bar */}
+          <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
+            <div className="relative flex-1 max-w-sm">
+              <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none" />
+              <Input
+                placeholder={__('Search campaigns...')}
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                className="!pl-9"
+              />
+            </div>
+            <Button onClick={() => navigate('/marketing/campaigns/new')}>
+              <Plus className="mr-2 h-4 w-4" />
+              {__('New Campaign')}
+            </Button>
+          </div>
+
+          {/* Campaigns Table */}
+          {isLoading ? (
+            <div className="text-center py-8 text-muted-foreground">
+              {__('Loading campaigns...')}
+            </div>
+          ) : filteredCampaigns.length === 0 ? (
+            <div className="text-center py-12 text-muted-foreground">
+              {searchQuery ? __('No campaigns found matching your search') : (
+                <div className="space-y-4">
+                  <Send className="h-12 w-12 mx-auto opacity-50" />
+                  <p>{__('No campaigns yet')}</p>
+                  <Button onClick={() => navigate('/marketing/campaigns/new')}>
+                    <Plus className="mr-2 h-4 w-4" />
+                    {__('Create your first campaign')}
+                  </Button>
+                </div>
+              )}
+            </div>
+          ) : (
+            <div className="border rounded-lg">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead>{__('Title')}</TableHead>
+                    <TableHead>{__('Status')}</TableHead>
+                    <TableHead className="hidden md:table-cell">{__('Recipients')}</TableHead>
+                    <TableHead className="hidden md:table-cell">{__('Date')}</TableHead>
+                    <TableHead className="text-right">{__('Actions')}</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {filteredCampaigns.map((campaign) => {
+                    const status = statusConfig[campaign.status] || statusConfig.draft;
+                    const StatusIcon = status.icon;
+                    
+                    return (
+                      <TableRow key={campaign.id}>
+                        <TableCell>
+                          <div>
+                            <div className="font-medium">{campaign.title}</div>
+                            {campaign.subject && (
+                              <div className="text-sm text-muted-foreground truncate max-w-[200px]">
+                                {campaign.subject}
+                              </div>
+                            )}
+                          </div>
+                        </TableCell>
+                        <TableCell>
+                          <span className={`inline-flex items-center gap-1 px-2 py-1 rounded-full text-xs font-medium ${status.className}`}>
+                            <StatusIcon className="h-3 w-3" />
+                            {__(status.label)}
+                          </span>
+                        </TableCell>
+                        <TableCell className="hidden md:table-cell">
+                          {campaign.status === 'sent' ? (
+                            <span>
+                              {campaign.sent_count}/{campaign.recipient_count}
+                              {campaign.failed_count > 0 && (
+                                <span className="text-red-500 ml-1">
+                                  ({campaign.failed_count} failed)
+                                </span>
+                              )}
+                            </span>
+                          ) : (
+                            '-'
+                          )}
+                        </TableCell>
+                        <TableCell className="hidden md:table-cell text-muted-foreground">
+                          {campaign.sent_at 
+                            ? formatDate(campaign.sent_at)
+                            : campaign.scheduled_at
+                            ? `Scheduled: ${formatDate(campaign.scheduled_at)}`
+                            : formatDate(campaign.created_at)
+                          }
+                        </TableCell>
+                        <TableCell className="text-right">
+                          <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                              <Button variant="ghost" size="sm">
+                                <MoreHorizontal className="h-4 w-4" />
+                              </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent align="end">
+                              <DropdownMenuItem onClick={() => navigate(`/marketing/campaigns/${campaign.id}`)}>
+                                <Edit className="mr-2 h-4 w-4" />
+                                {__('Edit')}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem onClick={() => duplicateMutation.mutate(campaign)}>
+                                <Copy className="mr-2 h-4 w-4" />
+                                {__('Duplicate')}
+                              </DropdownMenuItem>
+                              <DropdownMenuItem 
+                                onClick={() => setDeleteId(campaign.id)}
+                                className="text-red-600"
+                              >
+                                <Trash2 className="mr-2 h-4 w-4" />
+                                {__('Delete')}
+                              </DropdownMenuItem>
+                            </DropdownMenuContent>
+                          </DropdownMenu>
+                        </TableCell>
+                      </TableRow>
+                    );
+                  })}
+                </TableBody>
+              </Table>
+            </div>
+          )}
+        </div>
+      </SettingsCard>
+
+      {/* Delete Confirmation Dialog */}
+      <AlertDialog open={deleteId !== null} onOpenChange={() => setDeleteId(null)}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{__('Delete Campaign')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {__('Are you sure you want to delete this campaign? This action cannot be undone.')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{__('Cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              onClick={() => deleteId && deleteMutation.mutate(deleteId)}
+              className="bg-red-600 hover:bg-red-700"
+            >
+              {__('Delete')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </SettingsLayout>
+  );
+}
diff --git a/admin-spa/src/routes/Marketing/index.tsx b/admin-spa/src/routes/Marketing/index.tsx
index ecef80a..35f9b61 100644
--- a/admin-spa/src/routes/Marketing/index.tsx
+++ b/admin-spa/src/routes/Marketing/index.tsx
@@ -1,5 +1,63 @@
-import { Navigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
+import { SettingsLayout } from '@/routes/Settings/components/SettingsLayout';
+import { Mail, Send, Tag } from 'lucide-react';
+import { __ } from '@/lib/i18n';
+
+interface MarketingCard {
+  title: string;
+  description: string;
+  icon: React.ElementType;
+  to: string;
+}
+
+const cards: MarketingCard[] = [
+  {
+    title: __('Newsletter'),
+    description: __('Manage subscribers and email templates'),
+    icon: Mail,
+    to: '/marketing/newsletter',
+  },
+  {
+    title: __('Campaigns'),
+    description: __('Create and send email campaigns'),
+    icon: Send,
+    to: '/marketing/campaigns',
+  },
+  {
+    title: __('Coupons'),
+    description: __('Discounts, promotions, and coupon codes'),
+    icon: Tag,
+    to: '/marketing/coupons',
+  },
+];
 
 export default function Marketing() {
-  return <Navigate to="/marketing/newsletter" replace />;
+  const navigate = useNavigate();
+
+  return (
+    <SettingsLayout
+      title={__('Marketing')}
+      description={__('Newsletter, campaigns, and promotions')}
+    >
+      <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
+        {cards.map((card) => (
+          <button
+            key={card.to}
+            onClick={() => navigate(card.to)}
+            className="flex items-start gap-4 p-6 rounded-lg border bg-card hover:bg-accent transition-colors text-left"
+          >
+            <div className="flex-shrink-0 w-10 h-10 rounded-lg bg-primary/10 text-primary flex items-center justify-center">
+              <card.icon className="w-5 h-5" />
+            </div>
+            <div className="flex-1 min-w-0">
+              <div className="font-medium">{card.title}</div>
+              <div className="text-sm text-muted-foreground mt-1">
+                {card.description}
+              </div>
+            </div>
+          </button>
+        ))}
+      </div>
+    </SettingsLayout>
+  );
 }