@jhits/plugin-newsletter 0.0.14 → 0.0.16

package/dist/views/NewsletterManager.js

@@ -5,10 +5,11 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
-import { Plus, Mail, Calendar, Trash2, Edit2, Settings2, Sparkles, CheckCircle2, Clock, Send, Users } from 'lucide-react';
+import { Plus, Mail, Calendar, Trash2, Edit2, Settings2, Sparkles, CheckCircle2, Clock, Send, Users, Grid, List } from 'lucide-react';
 import { SmtpSettingsModal } from './components/SmtpSettingsModal';
 import { TestEmailModal } from './components/TestEmailModal';
 import { SendNewsletterModal } from './components/SendNewsletterModal';
+import { NewsletterGrid } from './components/NewsletterGrid';
 function getStatusBadgeColor(status) {
     switch (status) {
         case 'sent':
@@ -27,6 +28,8 @@ export function NewsletterManagerView({ siteId, locale }) {
     const [newsletters, setNewsletters] = useState([]);
     const [isLoading, setIsLoading] = useState(true);
     const [statusFilter, setStatusFilter] = useState('all');
+    const [primaryLanguage, setPrimaryLanguage] = useState('en');
+    const [viewMode, setViewMode] = useState('grid');
     const [showSmtpModal, setShowSmtpModal] = useState(false);
     const [showTestEmailModal, setShowTestEmailModal] = useState(false);
     const [showSendModal, setShowSendModal] = useState(false);
@@ -36,12 +39,33 @@ export function NewsletterManagerView({ siteId, locale }) {
     const [welcomeEmailStatus, setWelcomeEmailStatus] = useState('not_configured');
     const [welcomeEmailLastUpdated, setWelcomeEmailLastUpdated] = useState(null);
     const [subscriberCount, setSubscriberCount] = useState(0);
+    // Hover state for language tooltip
+    const [hoveredNewsletter, setHoveredNewsletter] = useState(null);
+    // Fetch primary language from SMTP settings
+    useEffect(() => {
+        const fetchPrimaryLanguage = async () => {
+            try {
+                const response = await fetch('/api/plugin-newsletter/smtp', {
+                    credentials: 'include',
+                });
+                if (response.ok) {
+                    const data = await response.json();
+                    setPrimaryLanguage(data.primaryLanguage || 'en');
+                }
+            }
+            catch (error) {
+                console.error('Failed to fetch SMTP settings:', error);
+            }
+        };
+        fetchPrimaryLanguage();
+    }, []);
     // Fetch newsletters
     useEffect(() => {
         const fetchNewsletters = async () => {
             try {
                 setIsLoading(true);
-                const response = await fetch('/api/plugin-newsletter/newsletters', {
+                const langParam = primaryLanguage ? `?language=${primaryLanguage}` : '';
+                const response = await fetch(`/api/plugin-newsletter/newsletters${langParam}`, {
                     credentials: 'include',
                 });
                 if (!response.ok) {
@@ -58,7 +82,7 @@ export function NewsletterManagerView({ siteId, locale }) {
             }
         };
         fetchNewsletters();
-    }, []);
+    }, [primaryLanguage]);
     // Fetch welcome email status
     useEffect(() => {
         const fetchWelcomeEmailStatus = async () => {
@@ -141,10 +165,6 @@ export function NewsletterManagerView({ siteId, locale }) {
             setShowSmtpModal(true);
             return;
         }
-        if (newsletter.status === 'sent') {
-            alert('This newsletter has already been sent');
-            return;
-        }
         try {
             const response = await fetch(`/api/plugin-newsletter/newsletters/${newsletter.id}/send`, {
                 credentials: 'include',
@@ -201,6 +221,46 @@ export function NewsletterManagerView({ siteId, locale }) {
             year: 'numeric',
         });
     };
+    // Format date with time
+    const formatDateTime = (dateString) => {
+        if (!dateString)
+            return 'Never';
+        const date = new Date(dateString);
+        return date.toLocaleString(locale, {
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    };
+    // Get send history for a specific language
+    const getSendHistoryForLanguage = (sendHistory, language) => {
+        return sendHistory
+            .filter(entry => entry.language === language)
+            .sort((a, b) => new Date(b.sentAt).getTime() - new Date(a.sentAt).getTime());
+    };
+    // Sort languages: those with send history first (most recent first), then by language code
+    const sortLanguages = (langs, sendHistory) => {
+        return [...langs].sort((a, b) => {
+            const aHasHistory = sendHistory.some(h => h.language === a);
+            const bHasHistory = sendHistory.some(h => h.language === b);
+            if (aHasHistory && !bHasHistory)
+                return -1;
+            if (!aHasHistory && bHasHistory)
+                return 1;
+            return a.localeCompare(b);
+        });
+    };
+    // Format last sent info
+    const formatLastSent = (sendHistory) => {
+        if (!sendHistory || sendHistory.length === 0)
+            return null;
+        const lastEntry = sendHistory[sendHistory.length - 1];
+        const langLabel = lastEntry.language.toUpperCase();
+        const dateStr = formatDate(lastEntry.sentAt);
+        return (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-[10px] font-black px-2 py-0.5 rounded bg-green-500/10 text-green-600 dark:text-green-400 border border-green-500/20", children: langLabel }), _jsx("span", { className: "text-xs text-dashboard-text-secondary", children: dateStr }), sendHistory.length > 1 && (_jsxs("span", { className: "text-[10px] text-dashboard-text-secondary", title: "Total sends", children: ["(", sendHistory.length, ")"] }))] }));
+    };
     return (_jsxs(_Fragment, { children: [_jsx("div", { className: "h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto", children: _jsxs("div", { className: "max-w-7xl mx-auto", children: [_jsxs("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", children: [_jsxs("div", { children: [_jsx("h1", { className: "text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2", children: "Newsletters" }), _jsx("p", { className: "text-sm text-dashboard-text-secondary", children: "Create and manage your email newsletters" })] }), _jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("button", { onClick: () => window.location.href = '/dashboard/newsletter/subscribers', className: "inline-flex items-center gap-2 px-4 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border", children: [_jsx(Users, { size: 14 }), "Subscribers"] }), _jsxs("button", { onClick: () => {
                                                 if (smtpStatus === 'not_configured') {
                                                     alert('Please configure SMTP settings first');
@@ -211,7 +271,18 @@ export function NewsletterManagerView({ siteId, locale }) {
                                                 }
                                             }, className: "inline-flex items-center gap-2 px-4 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border", children: [_jsx(Send, { size: 14 }), "Test Email"] }), _jsxs("button", { onClick: () => setShowSmtpModal(true), className: `inline-flex items-center gap-2 px-4 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors ${smtpStatus === 'not_configured'
                                                 ? 'bg-amber-50 border-amber-300 text-amber-700 dark:bg-amber-900/20 dark:border-amber-700 dark:text-amber-400 hover:bg-amber-100 dark:hover:bg-amber-900/40'
-                                                : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'}`, children: [_jsx(Settings2, { size: 14 }), "SMTP", smtpStatus === 'not_configured' && (_jsx("span", { className: "w-2 h-2 rounded-full bg-amber-500" }))] }), _jsxs("select", { value: statusFilter, onChange: (e) => setStatusFilter(e.target.value), className: "bg-dashboard-bg border border-dashboard-border rounded-xl px-4 py-2.5 text-xs font-bold text-dashboard-text outline-none cursor-pointer uppercase tracking-widest", children: [_jsx("option", { value: "all", children: "All Status" }), _jsx("option", { value: "draft", children: "Draft" }), _jsx("option", { value: "scheduled", children: "Scheduled" }), _jsx("option", { value: "sent", children: "Sent" }), _jsx("option", { value: "archived", children: "Archived" })] }), _jsxs("button", { onClick: handleCreate, className: "inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg shadow-primary/20 bg-primary text-white hover:bg-primary/90", children: [_jsx(Plus, { size: 14 }), "New Newsletter"] })] })] }), _jsx("div", { className: "mb-6 p-6 rounded-2xl bg-gradient-to-br from-primary/5 via-primary/10 to-transparent border border-dashboard-border", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-5", children: [_jsx("div", { className: "w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center", children: _jsx(Sparkles, { className: "w-6 h-6 text-primary" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-black text-dashboard-text uppercase tracking-tight mb-1", children: "Welcome Email" }), _jsx("p", { className: "text-xs text-dashboard-text-secondary mb-2", children: "The email sent automatically when someone subscribes" }), _jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [welcomeEmailStatus === 'configured' ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-green-600 dark:text-green-400", children: [_jsx(CheckCircle2, { size: 12 }), "Configured"] })) : (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-amber-600 dark:text-amber-400", children: [_jsx(Clock, { size: 12 }), "Not configured"] })), _jsxs("button", { onClick: () => window.location.href = '/dashboard/newsletter/subscribers', className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-primary hover:underline", children: [_jsx(Users, { size: 12 }), subscriberCount, " subscriber", subscriberCount !== 1 ? 's' : ''] }), welcomeEmailLastUpdated && (_jsxs("span", { className: "text-[10px] text-dashboard-text-secondary", children: ["Last updated: ", new Date(welcomeEmailLastUpdated).toLocaleDateString()] }))] })] })] }), _jsxs("button", { onClick: () => window.location.href = '/dashboard/newsletter/welcome', className: "inline-flex items-center gap-2 px-4 py-2.5 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors bg-primary text-white hover:bg-primary/90", children: [_jsx(Edit2, { size: 14 }), welcomeEmailStatus === 'configured' ? 'Edit' : 'Configure'] })] }) }), _jsx("div", { className: "bg-dashboard-bg rounded-3xl border border-dashboard-border overflow-hidden", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx("div", { className: "w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" }) })) : filteredNewsletters.length === 0 ? (_jsxs("div", { className: "py-24 text-center", children: [_jsx(Mail, { size: 64, className: "mx-auto text-dashboard-text-secondary mb-4" }), _jsx("p", { className: "text-dashboard-text-secondary font-serif italic text-lg mb-6", children: statusFilter === 'all' ? 'No newsletters yet.' : `No newsletters found with status "${statusFilter}".` }), _jsxs("button", { onClick: handleCreate, className: "inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg shadow-primary/20 bg-primary text-white hover:bg-primary/90", children: [_jsx(Plus, { size: 14 }), "Create Your First Newsletter"] })] })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-left border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-dashboard-bg text-dashboard-text text-[10px] uppercase tracking-[0.2em] font-black border-b border-dashboard-border", children: [_jsx("th", { className: "px-8 py-5", children: "Title" }), _jsx("th", { className: "px-8 py-5", children: "Subject" }), _jsx("th", { className: "px-8 py-5", children: "Status" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Updated" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-dashboard-border", children: filteredNewsletters.map((newsletter) => (_jsxs("tr", { className: "hover:bg-dashboard-bg transition-colors group", children: [_jsx("td", { className: "px-8 py-5", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors", children: _jsx(Mail, { size: 18 }) }), _jsx("span", { className: "text-sm font-medium text-dashboard-text tracking-tight", children: newsletter.title })] }) }), _jsx("td", { className: "px-8 py-5", children: _jsx("span", { className: "text-sm text-dashboard-text-secondary", children: newsletter.subject || 'No subject' }) }), _jsx("td", { className: "px-8 py-5", children: _jsx("span", { className: `text-[10px] font-black px-3 py-1 rounded-full uppercase border ${getStatusBadgeColor(newsletter.status)}`, children: newsletter.status }) }), _jsx("td", { className: "px-8 py-5 text-right text-xs text-dashboard-text-secondary font-medium", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Calendar, { size: 14 }), formatDate(newsletter.updatedAt)] }) }), _jsx("td", { className: "px-8 py-5 text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [newsletter.status !== 'sent' && (_jsx("button", { onClick: () => handleSend(newsletter), className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors", title: "Send newsletter", children: _jsx(Send, { size: 18 }) })), _jsx("button", { onClick: () => handleEdit(newsletter.id), className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors", title: "Edit newsletter", children: _jsx(Edit2, { size: 18 }) }), _jsx("button", { onClick: () => handleDelete(newsletter.id, newsletter.title), className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors", title: "Delete newsletter", children: _jsx(Trash2, { size: 18 }) })] }) })] }, newsletter.id))) })] }) })) })] }) }), _jsx(SmtpSettingsModal, { isOpen: showSmtpModal, onClose: () => setShowSmtpModal(false) }), _jsx(TestEmailModal, { isOpen: showTestEmailModal, onClose: () => setShowTestEmailModal(false) }), selectedNewsletter && (_jsx(SendNewsletterModal, { isOpen: showSendModal, onClose: () => {
+                                                : 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'}`, children: [_jsx(Settings2, { size: 14 }), "SMTP", smtpStatus === 'not_configured' && (_jsx("span", { className: "w-2 h-2 rounded-full bg-amber-500" }))] }), _jsxs("select", { value: statusFilter, onChange: (e) => setStatusFilter(e.target.value), className: "bg-dashboard-bg border border-dashboard-border rounded-xl px-4 py-2.5 text-xs font-bold text-dashboard-text outline-none cursor-pointer uppercase tracking-widest", children: [_jsx("option", { value: "all", children: "All Status" }), _jsx("option", { value: "draft", children: "Draft" }), _jsx("option", { value: "scheduled", children: "Scheduled" }), _jsx("option", { value: "sent", children: "Sent" }), _jsx("option", { value: "archived", children: "Archived" })] }), _jsxs("div", { className: "flex items-center bg-dashboard-bg border border-dashboard-border rounded-xl p-1 gap-1", children: [_jsx("button", { onClick: () => setViewMode('grid'), className: `p-2 rounded-lg transition-colors ${viewMode === 'grid'
+                                                        ? 'bg-primary text-white'
+                                                        : 'text-dashboard-text-secondary hover:text-dashboard-text'}`, title: "Grid view", children: _jsx(Grid, { size: 16 }) }), _jsx("button", { onClick: () => setViewMode('list'), className: `p-2 rounded-lg transition-colors ${viewMode === 'list'
+                                                        ? 'bg-primary text-white'
+                                                        : 'text-dashboard-text-secondary hover:text-dashboard-text'}`, title: "List view", children: _jsx(List, { size: 16 }) })] }), _jsxs("button", { onClick: handleCreate, className: "inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg shadow-primary/20 bg-primary text-white hover:bg-primary/90", children: [_jsx(Plus, { size: 14 }), "New Newsletter"] })] })] }), _jsx("div", { className: "mb-6 p-6 rounded-2xl bg-gradient-to-br from-primary/5 via-primary/10 to-transparent border border-dashboard-border", children: _jsxs("div", { className: "flex items-center justify-between", children: [_jsxs("div", { className: "flex items-center gap-5", children: [_jsx("div", { className: "w-12 h-12 rounded-2xl bg-primary/10 flex items-center justify-center", children: _jsx(Sparkles, { className: "w-6 h-6 text-primary" }) }), _jsxs("div", { children: [_jsx("h3", { className: "text-sm font-black text-dashboard-text uppercase tracking-tight mb-1", children: "Welcome Email" }), _jsx("p", { className: "text-xs text-dashboard-text-secondary mb-2", children: "The email sent automatically when someone subscribes" }), _jsxs("div", { className: "flex items-center gap-3 flex-wrap", children: [welcomeEmailStatus === 'configured' ? (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-green-600 dark:text-green-400", children: [_jsx(CheckCircle2, { size: 12 }), "Configured"] })) : (_jsxs("span", { className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-amber-600 dark:text-amber-400", children: [_jsx(Clock, { size: 12 }), "Not configured"] })), _jsxs("button", { onClick: () => window.location.href = '/dashboard/newsletter/subscribers', className: "inline-flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-widest text-primary hover:underline", children: [_jsx(Users, { size: 12 }), subscriberCount, " subscriber", subscriberCount !== 1 ? 's' : ''] }), welcomeEmailLastUpdated && (_jsxs("span", { className: "text-[10px] text-dashboard-text-secondary", children: ["Last updated: ", new Date(welcomeEmailLastUpdated).toLocaleDateString()] }))] })] })] }), _jsxs("button", { onClick: () => window.location.href = '/dashboard/newsletter/welcome', className: "inline-flex items-center gap-2 px-4 py-2.5 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors bg-primary text-white hover:bg-primary/90", children: [_jsx(Edit2, { size: 14 }), welcomeEmailStatus === 'configured' ? 'Edit' : 'Configure'] })] }) }), _jsx("div", { className: "bg-dashboard-bg rounded-3xl border border-dashboard-border overflow-hidden", children: isLoading ? (_jsx("div", { className: "flex items-center justify-center py-20", children: _jsx("div", { className: "w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" }) })) : filteredNewsletters.length === 0 ? (_jsxs("div", { className: "py-24 text-center", children: [_jsx(Mail, { size: 64, className: "mx-auto text-dashboard-text-secondary mb-4" }), _jsx("p", { className: "text-dashboard-text-secondary font-serif italic text-lg mb-6", children: statusFilter === 'all' ? 'No newsletters yet.' : `No newsletters found with status "${statusFilter}".` }), _jsxs("button", { onClick: handleCreate, className: "inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg shadow-primary/20 bg-primary text-white hover:bg-primary/90", children: [_jsx(Plus, { size: 14 }), "Create Your First Newsletter"] })] })) : viewMode === 'grid' ? (_jsx(NewsletterGrid, { newsletters: filteredNewsletters, onEdit: handleEdit, onSend: handleSend, onDelete: handleDelete, formatDateTime: formatDateTime, locale: locale })) : (_jsx("div", { className: "overflow-x-auto", children: _jsxs("table", { className: "w-full text-left border-collapse", children: [_jsx("thead", { children: _jsxs("tr", { className: "bg-dashboard-bg text-dashboard-text text-[10px] uppercase tracking-[0.2em] font-black border-b border-dashboard-border", children: [_jsx("th", { className: "px-8 py-5", children: "Title" }), _jsx("th", { className: "px-8 py-5", children: "Subject" }), _jsx("th", { className: "px-8 py-5", children: "Status" }), _jsx("th", { className: "px-8 py-5", children: "Last Sent" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Updated" }), _jsx("th", { className: "px-8 py-5 text-right", children: "Actions" })] }) }), _jsx("tbody", { className: "divide-y divide-dashboard-border", children: filteredNewsletters.map((newsletter) => (_jsxs("tr", { className: "hover:bg-dashboard-bg transition-colors group", children: [_jsx("td", { className: "px-8 py-5", children: _jsxs("div", { className: "flex items-center gap-4", children: [_jsx("div", { className: "w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary group-hover:bg-primary group-hover:text-white transition-colors", children: _jsx(Mail, { size: 18 }) }), _jsx("div", { className: "relative", children: _jsx("span", { className: "text-sm font-medium text-dashboard-text tracking-tight cursor-pointer hover:text-primary transition-colors", onMouseEnter: (e) => {
+                                                                            const rect = e.currentTarget.getBoundingClientRect();
+                                                                            setHoveredNewsletter({
+                                                                                id: newsletter.id,
+                                                                                x: rect.left + rect.width / 2,
+                                                                                y: rect.bottom + 8
+                                                                            });
+                                                                        }, onMouseLeave: () => setHoveredNewsletter(null), children: newsletter.title }) })] }) }), _jsx("td", { className: "px-8 py-5", children: _jsx("span", { className: "text-sm text-dashboard-text-secondary", children: newsletter.subject || 'No subject' }) }), _jsx("td", { className: "px-8 py-5", children: _jsx("span", { className: `text-[10px] font-black px-3 py-1 rounded-full uppercase border ${getStatusBadgeColor(newsletter.status)}`, children: newsletter.status }) }), _jsx("td", { className: "px-8 py-5", children: formatLastSent(newsletter.sendHistory) || (_jsx("span", { className: "text-xs text-dashboard-text-secondary", children: "Never" })) }), _jsx("td", { className: "px-8 py-5 text-right text-xs text-dashboard-text-secondary font-medium", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx(Calendar, { size: 14 }), formatDate(newsletter.updatedAt)] }) }), _jsx("td", { className: "px-8 py-5 text-right", children: _jsxs("div", { className: "flex items-center justify-end gap-2", children: [_jsx("button", { onClick: () => handleSend(newsletter), className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors", title: newsletter.status === 'sent' ? 'Resend newsletter' : 'Send newsletter', children: _jsx(Send, { size: 18 }) }), _jsx("button", { onClick: () => handleEdit(newsletter.id), className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors", title: "Edit newsletter", children: _jsx(Edit2, { size: 18 }) }), _jsx("button", { onClick: () => handleDelete(newsletter.id, newsletter.title), className: "p-2.5 rounded-full text-dashboard-text-secondary hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors", title: "Delete newsletter", children: _jsx(Trash2, { size: 18 }) })] }) })] }, newsletter.id))) })] }) })) })] }) }), _jsx(SmtpSettingsModal, { isOpen: showSmtpModal, onClose: () => setShowSmtpModal(false) }), _jsx(TestEmailModal, { isOpen: showTestEmailModal, onClose: () => setShowTestEmailModal(false) }), selectedNewsletter && (_jsx(SendNewsletterModal, { isOpen: showSendModal, onClose: () => {
                     setShowSendModal(false);
                     setSelectedNewsletter(null);
                 }, newsletter: {
@@ -220,5 +291,21 @@ export function NewsletterManagerView({ siteId, locale }) {
                     subject: selectedNewsletter.subject,
                     status: selectedNewsletter.status,
                     hasContent: selectedNewsletter.hasContent,
-                }, subscriberCount: subscriberCount }))] }));
+                }, subscriberCount: subscriberCount })), hoveredNewsletter && (() => {
+                const tooltipNewsletter = newsletters.find(n => n.id === hoveredNewsletter.id);
+                if (!tooltipNewsletter?.languages)
+                    return null;
+                const tooltipLanguages = tooltipNewsletter.languages;
+                const tooltipSendHistory = tooltipNewsletter.sendHistory || [];
+                return (_jsxs("div", { className: "fixed z-50 w-72 bg-dashboard-card border border-dashboard-border rounded-xl shadow-2xl p-3 pointer-events-none", style: {
+                        left: hoveredNewsletter.x,
+                        top: hoveredNewsletter.y,
+                        transform: 'translateX(-50%)'
+                    }, children: [_jsx("div", { className: "text-[10px] uppercase tracking-wider text-dashboard-text-secondary font-bold mb-2", children: "Translations & Send History" }), sortLanguages(Object.keys(tooltipLanguages), tooltipSendHistory).map((lang) => {
+                            const data = tooltipLanguages[lang];
+                            const langSendHistory = getSendHistoryForLanguage(tooltipSendHistory, lang);
+                            const lastSend = langSendHistory[0];
+                            return (_jsxs("div", { className: "py-2 border-b border-dashboard-border last:border-0", children: [_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("div", { className: "text-[10px] font-black uppercase text-primary", children: lang }), lastSend && (_jsxs("div", { className: "text-[9px] text-green-600 dark:text-green-400 flex items-center gap-1", children: [_jsx(Send, { size: 10 }), "Sent"] }))] }), _jsx("div", { className: "text-xs text-dashboard-text truncate", children: data?.metadata?.subject || 'No subject' }), lastSend && (_jsxs("div", { className: "text-[9px] text-dashboard-text-secondary mt-1", children: [formatDateTime(lastSend.sentAt), " \u2022 ", lastSend.recipientCount, " recipients"] })), langSendHistory.length > 1 && (_jsxs("div", { className: "text-[9px] text-dashboard-text-secondary mt-0.5", children: ["+ ", langSendHistory.length - 1, " more send(s)"] }))] }, lang));
+                        })] }));
+            })()] }));
 }

package/dist/views/components/NewsletterCard.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Newsletter Card Component
+ * Modern, distinctive card design for newsletters
+ */
+import { NewsletterListItem } from '../../types/newsletter';
+interface NewsletterCardProps {
+    newsletter: NewsletterListItem;
+    onEdit: (id: string) => void;
+    onSend: (newsletter: NewsletterListItem) => void;
+    onDelete: (id: string, title: string) => void;
+    formatDateTime: (dateString: string | undefined) => string;
+    locale: string;
+}
+export declare function NewsletterCard({ newsletter, onEdit, onSend, onDelete, formatDateTime, locale }: NewsletterCardProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=NewsletterCard.d.ts.map

package/dist/views/components/NewsletterCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewsletterCard.d.ts","sourceRoot":"","sources":["../../../src/views/components/NewsletterCard.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAMH,OAAO,EAAE,kBAAkB,EAAoB,MAAM,wBAAwB,CAAC;AAE9E,UAAU,mBAAmB;IACzB,UAAU,EAAE,kBAAkB,CAAC;IAC/B,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,CAAC;IAC3D,MAAM,EAAE,MAAM,CAAC;CAClB;AA4ED,wBAAgB,cAAc,CAAC,EAC3B,UAAU,EACV,MAAM,EACN,MAAM,EACN,QAAQ,EACR,cAAc,EACd,MAAM,EACT,EAAE,mBAAmB,2CA8GrB"}

package/dist/views/components/NewsletterCard.js

@@ -0,0 +1,94 @@
+/**
+ * Newsletter Card Component
+ * Modern, distinctive card design for newsletters
+ */
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Trash2, Edit2, Send } from 'lucide-react';
+function getStatusConfig(status) {
+    switch (status) {
+        case 'sent':
+            return {
+                label: 'Sent',
+                bg: 'bg-green-500',
+                text: 'text-green-600 dark:text-green-400',
+            };
+        case 'scheduled':
+            return {
+                label: 'Scheduled',
+                bg: 'bg-blue-500',
+                text: 'text-blue-600 dark:text-blue-400',
+            };
+        case 'draft':
+            return {
+                label: 'Draft',
+                bg: 'bg-gray-400',
+                text: 'text-gray-500 dark:text-gray-400',
+            };
+        case 'archived':
+            return {
+                label: 'Archived',
+                bg: 'bg-neutral-400',
+                text: 'text-neutral-500 dark:text-neutral-400',
+            };
+        default:
+            return {
+                label: status,
+                bg: 'bg-gray-400',
+                text: 'text-gray-500',
+            };
+    }
+}
+const LANGUAGE_NAMES = {
+    en: 'English',
+    nl: 'Dutch',
+    sv: 'Swedish',
+    de: 'German',
+    fr: 'French',
+    es: 'Spanish',
+    it: 'Italian',
+    pt: 'Portuguese',
+    pl: 'Polish',
+    ru: 'Russian',
+    ja: 'Japanese',
+    zh: 'Chinese',
+    ar: 'Arabic',
+    tr: 'Turkish',
+};
+const LANGUAGE_COUNTRY_CODES = {
+    en: 'gb',
+    nl: 'nl',
+    sv: 'se',
+    de: 'de',
+    fr: 'fr',
+    es: 'es',
+    it: 'it',
+    pt: 'pt',
+    pl: 'pl',
+    ru: 'ru',
+    ja: 'jp',
+    zh: 'cn',
+    ar: 'sa',
+    tr: 'tr',
+};
+const getFlagUrl = (lang, size = 32) => {
+    const countryCode = LANGUAGE_COUNTRY_CODES[lang] || lang;
+    return `https://flagcdn.com/${size}x${Math.round(size * 0.75)}/${countryCode}.png`;
+};
+export function NewsletterCard({ newsletter, onEdit, onSend, onDelete, formatDateTime, locale }) {
+    const statusConfig = getStatusConfig(newsletter.status);
+    const languages = newsletter.availableLanguages || [];
+    const sendHistory = newsletter.sendHistory || [];
+    const sentLanguages = [...new Set(sendHistory.map(h => h.language))];
+    return (_jsxs("div", { className: "group relative bg-white dark:bg-neutral-900 rounded-2xl border border-dashboard-border overflow-hidden hover:border-primary/40 hover:shadow-xl hover:shadow-primary/5 transition-all duration-300", children: [_jsx("div", { className: `h-1.5 ${statusConfig.bg}` }), _jsxs("div", { className: "p-5", children: [_jsxs("div", { className: "flex items-center justify-between mb-4", children: [_jsx("div", { className: "flex items-center gap-2", children: _jsx("span", { className: `text-[10px] font-black uppercase tracking-widest ${statusConfig.text}`, children: statusConfig.label }) }), _jsxs("div", { className: "flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity", children: [_jsx("button", { onClick: () => onSend(newsletter), className: "p-2 rounded-lg text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all", title: newsletter.status === 'sent' ? 'Resend' : 'Send', children: _jsx(Send, { size: 16 }) }), _jsx("button", { onClick: () => onEdit(newsletter.id), className: "p-2 rounded-lg text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all", title: "Edit", children: _jsx(Edit2, { size: 16 }) }), _jsx("button", { onClick: () => onDelete(newsletter.id, newsletter.title), className: "p-2 rounded-lg text-neutral-400 hover:text-red-500 hover:bg-red-50 dark:hover:bg-red-900/20 transition-all", title: "Delete", children: _jsx(Trash2, { size: 16 }) })] })] }), _jsx("h3", { className: "text-lg font-bold text-dashboard-text mb-4 line-clamp-2 group-hover:text-primary transition-colors", children: newsletter.title || 'Untitled Newsletter' }), _jsx("div", { className: "space-y-2", children: languages.map((lang) => {
+                            const hasBeenSent = sentLanguages.includes(lang);
+                            const langHistory = sendHistory.filter(h => h.language === lang);
+                            const lastLangSend = langHistory[0];
+                            const langData = newsletter.languages?.[lang];
+                            const langSubject = langData?.metadata?.subject || newsletter.title;
+                            return (_jsxs("div", { className: `relative group/lang flex items-center justify-between px-3 py-2 rounded-lg border transition-all hover:border-primary/50 ${hasBeenSent ? '' : 'bg-dashboard-bg border-dashboard-border'}`, style: {
+                                    backgroundColor: hasBeenSent ? 'rgba(34, 197, 94, 0.08)' : undefined,
+                                    borderColor: hasBeenSent ? 'rgba(34, 197, 94, 0.3)' : undefined,
+                                }, children: [hasBeenSent && (_jsx("div", { className: "absolute -top-2 -right-2 min-w-[20px] h-5 px-1.5 bg-green-500 rounded-full flex items-center justify-center shadow-sm", children: _jsx("span", { className: "text-[10px] font-bold text-white", children: langHistory.length }) })), _jsx("div", { className: "flex items-center gap-3 flex-1 min-w-0", children: _jsx("img", { src: getFlagUrl(lang, 28), alt: LANGUAGE_NAMES[lang] || lang, className: "w-7 h-5 rounded object-cover shrink-0", loading: "lazy" }) }), _jsx("div", { className: "flex items-center gap-4 text-xs shrink-0", children: hasBeenSent && lastLangSend ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "text-dashboard-text-secondary", children: formatDateTime(lastLangSend.sentAt) }), _jsxs("div", { className: "text-dashboard-text-secondary", children: [lastLangSend.recipientCount, " recipients"] })] })) : (_jsx("span", { className: "text-dashboard-text-secondary", children: "Not sent" })) }), _jsxs("div", { className: "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 px-3 py-2 bg-neutral-900 dark:bg-neutral-800 text-white text-xs rounded-lg opacity-0 group-hover/lang:opacity-100 transition-opacity pointer-events-none z-10 w-64 shadow-lg", children: [_jsx("div", { className: "font-bold mb-1", children: LANGUAGE_NAMES[lang] || lang.toUpperCase() }), _jsx("div", { className: "text-neutral-300 break-words", children: langSubject || 'Untitled' }), _jsx("div", { className: "absolute top-full left-1/2 -translate-x-1/2 -mt-1 w-0 h-0 border-4 border-transparent border-t-neutral-900 dark:border-t-neutral-800" })] })] }, lang));
+                        }) })] })] }));
+}

package/dist/views/components/NewsletterGrid.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Newsletter Grid View Component
+ * Card-based grid layout for newsletters
+ */
+import { NewsletterListItem } from '../../types/newsletter';
+interface NewsletterGridProps {
+    newsletters: NewsletterListItem[];
+    onEdit: (id: string) => void;
+    onSend: (newsletter: NewsletterListItem) => void;
+    onDelete: (id: string, title: string) => void;
+    formatDateTime: (dateString: string | undefined) => string;
+    locale: string;
+}
+export declare function NewsletterGrid({ newsletters, onEdit, onSend, onDelete, formatDateTime, locale }: NewsletterGridProps): import("react/jsx-runtime").JSX.Element | null;
+export {};
+//# sourceMappingURL=NewsletterGrid.d.ts.map

package/dist/views/components/NewsletterGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NewsletterGrid.d.ts","sourceRoot":"","sources":["../../../src/views/components/NewsletterGrid.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAKH,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAG5D,UAAU,mBAAmB;IACzB,WAAW,EAAE,kBAAkB,EAAE,CAAC;IAClC,MAAM,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,MAAM,EAAE,CAAC,UAAU,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9C,cAAc,EAAE,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,KAAK,MAAM,CAAC;IAC3D,MAAM,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,cAAc,CAAC,EAC3B,WAAW,EACX,MAAM,EACN,MAAM,EACN,QAAQ,EACR,cAAc,EACd,MAAM,EACT,EAAE,mBAAmB,kDAoBrB"}

package/dist/views/components/NewsletterGrid.js

@@ -0,0 +1,13 @@
+/**
+ * Newsletter Grid View Component
+ * Card-based grid layout for newsletters
+ */
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { NewsletterCard } from './NewsletterCard';
+export function NewsletterGrid({ newsletters, onEdit, onSend, onDelete, formatDateTime, locale }) {
+    if (newsletters.length === 0) {
+        return null;
+    }
+    return (_jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4", children: newsletters.map((newsletter) => (_jsx(NewsletterCard, { newsletter: newsletter, onEdit: onEdit, onSend: onSend, onDelete: onDelete, formatDateTime: formatDateTime, locale: locale }, newsletter.id))) }));
+}

package/dist/views/components/SendNewsletterModal.js

@@ -82,7 +82,7 @@ export function SendNewsletterModal({ isOpen, onClose, newsletter, subscriberCou
     const canSend = newsletter.hasContent && (sendMode === 'test' || subscriberCount > 0);
     const isAlreadySent = newsletter.status === 'sent';
     const noSubscribersError = sendMode === 'subscribers' && subscriberCount === 0;
-    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: () => !isSending && onClose() }), _jsxs("div", { className: "relative w-full max-w-md mx-4 bg-white dark:bg-neutral-900 rounded-3xl border border-dashboard-border shadow-2xl overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-8 py-6 border-b border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center", children: _jsx(Send, { className: "w-5 h-5 text-primary" }) }), _jsxs("div", { children: [_jsx("h2", { className: "text-xl font-black text-dashboard-text uppercase tracking-tight", children: "Send Newsletter" }), _jsx("p", { className: "text-xs text-dashboard-text-secondary truncate max-w-[200px]", children: newsletter.title })] })] }), _jsx("button", { onClick: () => !isSending && onClose(), disabled: isSending, className: "p-2 rounded-full hover:bg-dashboard-border transition-colors", children: _jsx(X, { size: 20, className: "text-dashboard-text-secondary" }) })] }), _jsxs("div", { className: "p-8", children: [isAlreadySent && (_jsx("div", { className: "mb-4 p-4 rounded-xl bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800", children: _jsxs("div", { className: "flex items-center gap-2 text-amber-700 dark:text-amber-400", children: [_jsx(AlertCircle, { size: 16 }), _jsx("span", { className: "text-xs font-bold uppercase", children: "This newsletter has already been sent" })] }) })), !newsletter.hasContent && (_jsx("div", { className: "mb-4 p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800", children: _jsxs("div", { className: "flex items-center gap-2 text-red-700 dark:text-red-400", children: [_jsx(AlertCircle, { size: 16 }), _jsx("span", { className: "text-xs font-bold uppercase", children: "This newsletter has no content" })] }) })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "Send To" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("button", { onClick: () => setSendMode('subscribers'), className: `flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-xs font-bold uppercase tracking-widest transition-colors ${sendMode === 'subscribers'
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex items-center justify-center", children: [_jsx("div", { className: "absolute inset-0 bg-black/50 backdrop-blur-sm", onClick: () => !isSending && onClose() }), _jsxs("div", { className: "relative w-full max-w-md mx-4 bg-white dark:bg-neutral-900 rounded-3xl border border-dashboard-border shadow-2xl overflow-hidden", children: [_jsxs("div", { className: "flex items-center justify-between px-8 py-6 border-b border-dashboard-border", children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "w-10 h-10 rounded-2xl bg-primary/10 flex items-center justify-center", children: _jsx(Send, { className: "w-5 h-5 text-primary" }) }), _jsxs("div", { children: [_jsxs("h2", { className: "text-xl font-black text-dashboard-text uppercase tracking-tight", children: [isAlreadySent ? 'Resend' : 'Send', " Newsletter"] }), _jsx("p", { className: "text-xs text-dashboard-text-secondary truncate max-w-[200px]", children: newsletter.title })] })] }), _jsx("button", { onClick: () => !isSending && onClose(), disabled: isSending, className: "p-2 rounded-full hover:bg-dashboard-border transition-colors", children: _jsx(X, { size: 20, className: "text-dashboard-text-secondary" }) })] }), _jsxs("div", { className: "p-8", children: [isAlreadySent && (_jsx("div", { className: "mb-4 p-4 rounded-xl bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800", children: _jsxs("div", { className: "flex items-center gap-2 text-blue-700 dark:text-blue-400", children: [_jsx(RefreshCw, { size: 16 }), _jsx("span", { className: "text-xs font-bold uppercase", children: "This newsletter was already sent - sending again" })] }) })), !newsletter.hasContent && (_jsx("div", { className: "mb-4 p-4 rounded-xl bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800", children: _jsxs("div", { className: "flex items-center gap-2 text-red-700 dark:text-red-400", children: [_jsx(AlertCircle, { size: 16 }), _jsx("span", { className: "text-xs font-bold uppercase", children: "This newsletter has no content" })] }) })), _jsxs("div", { className: "space-y-4", children: [_jsxs("div", { children: [_jsx("label", { className: "text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2", children: "Send To" }), _jsxs("div", { className: "flex gap-2", children: [_jsxs("button", { onClick: () => setSendMode('subscribers'), className: `flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-xl text-xs font-bold uppercase tracking-widest transition-colors ${sendMode === 'subscribers'
                                                             ? 'bg-primary text-white'
                                                             : subscriberCount > 0
                                                                 ? 'bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhits/plugin-newsletter",
-  "version": "0.0.14",
+  "version": "0.0.16",
   "description": "Newsletter management and email delivery plugin for the JHITS ecosystem",
   "publishConfig": {
     "access": "public"

package/src/api/handlers/newsletters.ts

@@ -40,8 +40,9 @@ export async function GET_NEWSLETTERS(
         const skip = parseInt(searchParams.get('skip') || '0', 10);
         const sortBy = searchParams.get('sortBy') || 'updatedAt';
         const sortOrder = searchParams.get('sortOrder') || 'desc';
+        const language = searchParams.get('language') || 'en';
 
-        const query: any = {};
+        const query: Record<string, unknown> = {};
         if (status) {
             query['publication.status'] = status;
         }
@@ -55,7 +56,7 @@ export async function GET_NEWSLETTERS(
             ]
         };
 
-        const sort: any = {};
+        const sort: Record<string, 1 | -1> = {};
         sort[sortBy] = sortOrder === 'asc' ? 1 : -1;
 
         const newsletterList = await newsletters
@@ -65,19 +66,39 @@ export async function GET_NEWSLETTERS(
             .skip(skip)
             .toArray();
 
-        const listItems: NewsletterListItem[] = newsletterList.map((newsletter: any) => ({
-            id: newsletter._id?.toString() || newsletter.id,
-            title: newsletter.title,
-            slug: newsletter.slug,
-            status: newsletter.publication?.status || 'draft',
-            subject: newsletter.metadata?.subject || '',
-            scheduledDate: newsletter.publication?.scheduledDate,
-            sentDate: newsletter.publication?.sentDate,
-            authorId: newsletter.publication?.authorId,
-            updatedAt: newsletter.updatedAt || newsletter.createdAt,
-            recipientCount: newsletter.recipientCount,
-            hidden: newsletter.hidden,
-        }));
+        const primaryLanguage = 'en'; // Default primary
+
+        const listItems: NewsletterListItem[] = newsletterList.map((newsletter: Record<string, any>) => {
+            const languages = newsletter.languages || {};
+            const newsletterPrimaryLang = newsletter.metadata?.lang || primaryLanguage;
+            
+            // Get title (from subject) and subject from language-specific content
+            let title = newsletter.metadata?.subject || '';
+            
+            if (languages[language]) {
+                title = languages[language].metadata?.subject || title;
+            } else if (language !== newsletterPrimaryLang && languages[newsletterPrimaryLang]) {
+                // Fall back to primary language
+                title = languages[newsletterPrimaryLang].metadata?.subject || title;
+            }
+            
+            return {
+                id: newsletter._id?.toString() || newsletter.id,
+                title: title || newsletter.title || 'Untitled',
+                slug: newsletter.slug,
+                status: newsletter.publication?.status || 'draft',
+                subject: title,
+                scheduledDate: newsletter.publication?.scheduledDate,
+                sentDate: newsletter.publication?.sentDate,
+                authorId: newsletter.publication?.authorId,
+                updatedAt: newsletter.updatedAt || newsletter.createdAt,
+                recipientCount: newsletter.recipientCount,
+                hidden: newsletter.hidden,
+                sendHistory: newsletter.sendHistory || [],
+                availableLanguages: Object.keys(languages),
+                languages,
+            };
+        });
 
         return NextResponse.json(listItems);
     } catch (error: any) {
@@ -100,6 +121,9 @@ export async function GET_NEWSLETTER(
             return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
         }
 
+        const { searchParams } = new URL(req.url);
+        const language = searchParams.get('language') || 'en';
+
         const dbConnection = await config.getDb();
         const db = dbConnection.db();
         const collectionName = config.collectionName || 'newsletters';
@@ -115,21 +139,39 @@ export async function GET_NEWSLETTER(
             );
         }
 
+        const languages = newsletter.languages || {};
+        const primaryLanguage = newsletter.metadata?.lang || 'en';
+        
+        let blocks = newsletter.blocks || [];
+        let metadata = newsletter.metadata || {
+            subject: '',
+            previewText: '',
+            lang: 'en',
+            recipientFilter: { type: 'all' },
+        };
+        
+        // If requested language has content, use it
+        if (languages[language]) {
+            blocks = languages[language].blocks || [];
+            metadata = { ...metadata, ...languages[language].metadata, lang: language };
+        } else if (language !== primaryLanguage && languages[primaryLanguage]) {
+            // Copy from primary language if exists
+            blocks = languages[primaryLanguage].blocks || [];
+            metadata = { ...metadata, ...languages[primaryLanguage].metadata, lang: language };
+        }
+
         const result: Newsletter = {
             id: newsletter._id?.toString() || newsletter.id,
-            title: newsletter.title,
+            title: metadata.subject || 'Untitled',
             slug: newsletter.slug,
-            blocks: newsletter.blocks || [],
-            metadata: newsletter.metadata || {
-                subject: '',
-                previewText: '',
-                lang: 'en',
-                recipientFilter: { type: 'all' },
-            },
+            blocks,
+            metadata,
             publication: newsletter.publication || {
                 status: 'draft',
                 updatedAt: new Date().toISOString(),
             },
+            languages,
+            sendHistory: newsletter.sendHistory,
             createdAt: newsletter.createdAt || new Date().toISOString(),
             updatedAt: newsletter.updatedAt || new Date().toISOString(),
             version: newsletter.version,
@@ -179,7 +221,7 @@ export async function POST_NEWSLETTER(
         
         // Generate slug for backwards compatibility, but id is primary
         const existingNewsletters = await newsletters.find({}, { projection: { slug: 1 } }).toArray();
-        const existingSlugs = existingNewsletters.map((n: any) => n.slug).filter(Boolean);
+        const existingSlugs = existingNewsletters.map((n: Record<string, any>) => n.slug).filter(Boolean);
         const slug = generateSlugFromTitle(finalTitle, existingSlugs);
 
         const newsletterDocument = {
@@ -230,6 +272,9 @@ export async function PUT_NEWSLETTER(
             return NextResponse.json({ error: 'Unauthorized' }, { status: 401 });
         }
 
+        const { searchParams } = new URL(req.url);
+        const language = searchParams.get('language') || 'en';
+
         const body = await req.json();
         const { title, blocks, metadata, publication } = body;
 
@@ -261,15 +306,36 @@ export async function PUT_NEWSLETTER(
             );
         }
 
-        const updateData: any = {
-            title: finalTitle,
-            blocks: blocks || [],
+        // Preserve existing languages or initialize
+        const existingLanguages = existing.languages || {};
+        
+        // Update the specific language content
+        const updatedLanguages = {
+            ...existingLanguages,
+            [language]: {
+                blocks: blocks || [],
+                metadata: {
+                    subject: metadata.subject.trim(),
+                    previewText: metadata.previewText?.trim() || '',
+                    lang: language,
+                    recipientFilter: metadata.recipientFilter || { type: 'all' },
+                },
+            },
+        };
+
+        // Set primary language if not set
+        const primaryLanguage = existing.metadata?.lang || language;
+
+        const updateData: Record<string, unknown> = {
+            title: finalTitle, // Keep root title for backwards compatibility
+            blocks: blocks || [], // Keep blocks at root for backwards compatibility
             metadata: {
                 subject: metadata.subject.trim(),
                 previewText: metadata.previewText?.trim() || '',
-                lang: metadata.lang || 'en',
+                lang: primaryLanguage,
                 recipientFilter: metadata.recipientFilter || { type: 'all' },
             },
+            languages: updatedLanguages,
             publication: {
                 ...existing.publication,
                 status: publication?.status || existing.publication?.status || 'draft',