@jhits/plugin-newsletter 0.0.15 → 0.0.16

package/dist/api/handlers/newsletters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"newsletters.d.ts","sourceRoot":"","sources":["../../../src/api/handlers/newsletters.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAkC,MAAM,wBAAwB,CAAC;AAc7F,wBAAsB,eAAe,CACjC,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,mBAAmB,GAC5B,OAAO,CAAC,YAAY,CAAC,CAkEvB;AAED,wBAAsB,cAAc,CAChC,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,mBAAmB,GAC5B,OAAO,CAAC,YAAY,CAAC,CAuEvB;AAED,wBAAsB,eAAe,CACjC,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,mBAAmB,GAC5B,OAAO,CAAC,YAAY,CAAC,CAqEvB;AAED,wBAAsB,cAAc,CAChC,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,mBAAmB,GAC5B,OAAO,CAAC,YAAY,CAAC,CA+FvB;AAED,wBAAsB,iBAAiB,CACnC,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,mBAAmB,GAC5B,OAAO,CAAC,YAAY,CAAC,CA8BvB"}
+{"version":3,"file":"newsletters.d.ts","sourceRoot":"","sources":["../../../src/api/handlers/newsletters.ts"],"names":[],"mappings":"AAAA;;GAEG;AAIH,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAkC,MAAM,wBAAwB,CAAC;AAc7F,wBAAsB,eAAe,CACjC,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,mBAAmB,GAC5B,OAAO,CAAC,YAAY,CAAC,CAsFvB;AAED,wBAAsB,cAAc,CAChC,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,mBAAmB,GAC5B,OAAO,CAAC,YAAY,CAAC,CAuEvB;AAED,wBAAsB,eAAe,CACjC,GAAG,EAAE,WAAW,EAChB,MAAM,EAAE,mBAAmB,GAC5B,OAAO,CAAC,YAAY,CAAC,CAqEvB;AAED,wBAAsB,cAAc,CAChC,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,mBAAmB,GAC5B,OAAO,CAAC,YAAY,CAAC,CA+FvB;AAED,wBAAsB,iBAAiB,CACnC,GAAG,EAAE,WAAW,EAChB,QAAQ,EAAE,MAAM,EAChB,MAAM,EAAE,mBAAmB,GAC5B,OAAO,CAAC,YAAY,CAAC,CA8BvB"}

package/dist/api/handlers/newsletters.js

@@ -29,6 +29,7 @@ export async function GET_NEWSLETTERS(req, config) {
         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 = {};
         if (status) {
             query['publication.status'] = status;
@@ -49,20 +50,36 @@ export async function GET_NEWSLETTERS(req, config) {
             .limit(limit)
             .skip(skip)
             .toArray();
-        const listItems = newsletterList.map((newsletter) => ({
-            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,
-            sendHistory: newsletter.sendHistory || [],
-        }));
+        const primaryLanguage = 'en'; // Default primary
+        const listItems = newsletterList.map((newsletter) => {
+            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) {
@@ -108,7 +125,7 @@ export async function GET_NEWSLETTER(req, idOrSlug, config) {
         }
         const result = {
             id: newsletter._id?.toString() || newsletter.id,
-            title: newsletter.title,
+            title: metadata.subject || 'Untitled',
             slug: newsletter.slug,
             blocks,
             metadata,
@@ -236,7 +253,7 @@ export async function PUT_NEWSLETTER(req, idOrSlug, config) {
         // Set primary language if not set
         const primaryLanguage = existing.metadata?.lang || language;
         const updateData = {
-            title: finalTitle,
+            title: finalTitle, // Keep root title for backwards compatibility
             blocks: blocks || [], // Keep blocks at root for backwards compatibility
             metadata: {
                 subject: metadata.subject.trim(),

package/dist/types/newsletter.d.ts

@@ -128,6 +128,8 @@ export interface NewsletterListItem {
     recipientCount?: number;
     hidden?: boolean;
     sendHistory?: SendHistoryEntry[];
+    availableLanguages?: string[];
+    languages?: NewsletterLanguages;
 }
 /**
  * Newsletter Filter Options

package/dist/types/newsletter.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"newsletter.d.ts","sourceRoot":"","sources":["../../src/types/newsletter.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"newsletter.d.ts","sourceRoot":"","sources":["../../src/types/newsletter.ts"],"names":[],"mappings":"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"}

package/dist/views/NewsletterManager.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NewsletterManager.d.ts","sourceRoot":"","sources":["../../src/views/NewsletterManager.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAWH,MAAM,WAAW,0BAA0B;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAiBD,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,0BAA0B,2CAydnF"}
+{"version":3,"file":"NewsletterManager.d.ts","sourceRoot":"","sources":["../../src/views/NewsletterManager.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAaH,MAAM,WAAW,0BAA0B;IACvC,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE,MAAM,CAAC;CAClB;AAiBD,wBAAgB,qBAAqB,CAAC,EAAE,MAAM,EAAE,MAAM,EAAE,EAAE,0BAA0B,2CAqnBnF"}

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 () => {
@@ -197,6 +221,37 @@ 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)
@@ -216,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", 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("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", 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: () => {
+                                                : '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: {
@@ -225,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jhits/plugin-newsletter",
-  "version": "0.0.15",
+  "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,20 +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,
-            sendHistory: newsletter.sendHistory || [],
-        }));
+        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) {
@@ -142,7 +162,7 @@ export async function GET_NEWSLETTER(
 
         const result: Newsletter = {
             id: newsletter._id?.toString() || newsletter.id,
-            title: newsletter.title,
+            title: metadata.subject || 'Untitled',
             slug: newsletter.slug,
             blocks,
             metadata,
@@ -201,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 = {
@@ -306,8 +326,8 @@ export async function PUT_NEWSLETTER(
         // Set primary language if not set
         const primaryLanguage = existing.metadata?.lang || language;
 
-        const updateData: any = {
-            title: finalTitle,
+        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(),

package/src/types/newsletter.ts

@@ -160,6 +160,8 @@ export interface NewsletterListItem {
     recipientCount?: number;
     hidden?: boolean;
     sendHistory?: SendHistoryEntry[];
+    availableLanguages?: string[];
+    languages?: NewsletterLanguages;
 }
 
 /**

package/src/views/NewsletterManager.tsx

@@ -6,11 +6,13 @@
 'use client';
 
 import React, { 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 { NewsletterListItem, NewsletterStatus, SendHistoryEntry } from '../types/newsletter';
 import { SmtpSettingsModal } from './components/SmtpSettingsModal';
 import { TestEmailModal } from './components/TestEmailModal';
 import { SendNewsletterModal } from './components/SendNewsletterModal';
+import { NewsletterGrid } from './components/NewsletterGrid';
+import { NewsletterCard } from './components/NewsletterCard';
 
 export interface NewsletterManagerViewProps {
     siteId: string;
@@ -36,6 +38,8 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
     const [newsletters, setNewsletters] = useState<NewsletterListItem[]>([]);
     const [isLoading, setIsLoading] = useState(true);
     const [statusFilter, setStatusFilter] = useState<NewsletterStatus | 'all'>('all');
+    const [primaryLanguage, setPrimaryLanguage] = useState<string>('en');
+    const [viewMode, setViewMode] = useState<'grid' | 'list'>('grid');
     const [showSmtpModal, setShowSmtpModal] = useState(false);
     const [showTestEmailModal, setShowTestEmailModal] = useState(false);
     const [showSendModal, setShowSendModal] = useState(false);
@@ -47,12 +51,34 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
     const [welcomeEmailLastUpdated, setWelcomeEmailLastUpdated] = useState<string | null>(null);
     const [subscriberCount, setSubscriberCount] = useState(0);
 
+    // Hover state for language tooltip
+    const [hoveredNewsletter, setHoveredNewsletter] = useState<{ id: string; x: number; y: number } | null>(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) {
@@ -67,7 +93,7 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
             }
         };
         fetchNewsletters();
-    }, []);
+    }, [primaryLanguage]);
 
     // Fetch welcome email status
     useEffect(() => {
@@ -216,6 +242,37 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
         });
     };
 
+    // Format date with time
+    const formatDateTime = (dateString: string | undefined) => {
+        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: SendHistoryEntry[], language: string) => {
+        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: string[], sendHistory: SendHistoryEntry[]) => {
+        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: SendHistoryEntry[] | undefined) => {
         if (!sendHistory || sendHistory.length === 0) return null;
@@ -311,6 +368,32 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
                             <option value="archived">Archived</option>
                         </select>
 
+                        {/* View Toggle */}
+                        <div className="flex items-center bg-dashboard-bg border border-dashboard-border rounded-xl p-1 gap-1">
+                            <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"
+                            >
+                                <Grid size={16} />
+                            </button>
+                            <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"
+                            >
+                                <List size={16} />
+                            </button>
+                        </div>
+
                         {/* Create Button */}
                         <button
                             onClick={handleCreate}
@@ -393,6 +476,15 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
                                 Create Your First Newsletter
                             </button>
                         </div>
+                    ) : viewMode === 'grid' ? (
+                        <NewsletterGrid
+                            newsletters={filteredNewsletters}
+                            onEdit={handleEdit}
+                            onSend={handleSend}
+                            onDelete={handleDelete}
+                            formatDateTime={formatDateTime}
+                            locale={locale}
+                        />
                     ) : (
                         <div className="overflow-x-auto">
                             <table className="w-full text-left border-collapse">
@@ -417,9 +509,22 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
                                                     <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">
                                                         <Mail size={18} />
                                                     </div>
-                                                    <span className="text-sm font-medium text-dashboard-text tracking-tight">
-                                                        {newsletter.title}
-                                                    </span>
+                                                    <div className="relative">
+                                                        <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)}
+                                                        >
+                                                            {newsletter.title}
+                                                        </span>
+                                                    </div>
                                                 </div>
                                             </td>
                                             <td className="px-8 py-5">
@@ -503,6 +608,59 @@ export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewP
                 subscriberCount={subscriberCount}
             />
         )}
+
+        {/* Fixed Language Tooltip */}
+        {hoveredNewsletter && (() => {
+            const tooltipNewsletter = newsletters.find(n => n.id === hoveredNewsletter.id);
+            if (!tooltipNewsletter?.languages) return null;
+            const tooltipLanguages = tooltipNewsletter.languages;
+            const tooltipSendHistory = tooltipNewsletter.sendHistory || [];
+            
+            return (
+                <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%)'
+                    }}
+                >
+                    <div className="text-[10px] uppercase tracking-wider text-dashboard-text-secondary font-bold mb-2">
+                        Translations & Send History
+                    </div>
+                    {sortLanguages(Object.keys(tooltipLanguages), tooltipSendHistory).map((lang: string) => {
+                        const data = tooltipLanguages[lang];
+                        const langSendHistory = getSendHistoryForLanguage(tooltipSendHistory, lang);
+                        const lastSend = langSendHistory[0];
+                        
+                        return (
+                            <div key={lang} className="py-2 border-b border-dashboard-border last:border-0">
+                                <div className="flex items-center justify-between">
+                                    <div className="text-[10px] font-black uppercase text-primary">{lang}</div>
+                                    {lastSend && (
+                                        <div className="text-[9px] text-green-600 dark:text-green-400 flex items-center gap-1">
+                                            <Send size={10} />
+                                            Sent
+                                        </div>
+                                    )}
+                                </div>
+                                <div className="text-xs text-dashboard-text truncate">{data?.metadata?.subject || 'No subject'}</div>
+                                {lastSend && (
+                                    <div className="text-[9px] text-dashboard-text-secondary mt-1">
+                                        {formatDateTime(lastSend.sentAt)} • {lastSend.recipientCount} recipients
+                                    </div>
+                                )}
+                                {langSendHistory.length > 1 && (
+                                    <div className="text-[9px] text-dashboard-text-secondary mt-0.5">
+                                        + {langSendHistory.length - 1} more send(s)
+                                    </div>
+                                )}
+                            </div>
+                        );
+                    })}
+                </div>
+            );
+        })()}
         </>
     );
 }

package/src/views/components/NewsletterCard.tsx

@@ -0,0 +1,212 @@
+/**
+ * Newsletter Card Component
+ * Modern, distinctive card design for newsletters
+ */
+
+'use client';
+
+import React from 'react';
+import { Trash2, Edit2, Send, Check } from 'lucide-react';
+import { NewsletterListItem, NewsletterStatus } 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;
+}
+
+function getStatusConfig(status: NewsletterStatus) {
+    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: Record<string, string> = {
+    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: Record<string, string> = {
+    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: string, size: number = 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 
+}: NewsletterCardProps) {
+    const statusConfig = getStatusConfig(newsletter.status);
+    const languages = newsletter.availableLanguages || [];
+    const sendHistory = newsletter.sendHistory || [];
+
+    const sentLanguages = [...new Set(sendHistory.map(h => h.language))];
+
+    return (
+        <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">
+            <div className={`h-1.5 ${statusConfig.bg}`} />
+            
+            <div className="p-5">
+                <div className="flex items-center justify-between mb-4">
+                    <div className="flex items-center gap-2">
+                        <span className={`text-[10px] font-black uppercase tracking-widest ${statusConfig.text}`}>
+                            {statusConfig.label}
+                        </span>
+                    </div>
+                    
+                    <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                        <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'}
+                        >
+                            <Send size={16} />
+                        </button>
+                        <button
+                            onClick={() => onEdit(newsletter.id)}
+                            className="p-2 rounded-lg text-neutral-400 hover:text-primary hover:bg-primary/10 transition-all"
+                            title="Edit"
+                        >
+                            <Edit2 size={16} />
+                        </button>
+                        <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"
+                        >
+                            <Trash2 size={16} />
+                        </button>
+                    </div>
+                </div>
+
+                <h3 className="text-lg font-bold text-dashboard-text mb-4 line-clamp-2 group-hover:text-primary transition-colors">
+                    {newsletter.title || 'Untitled Newsletter'}
+                </h3>
+
+                <div className="space-y-2">
+                    {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 (
+                            <div 
+                                key={lang}
+                                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,
+                                }}
+                            >
+                                {hasBeenSent && (
+                                    <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">
+                                        <span className="text-[10px] font-bold text-white">{langHistory.length}</span>
+                                    </div>
+                                )}
+                                
+                                <div className="flex items-center gap-3 flex-1 min-w-0">
+                                    <img 
+                                        src={getFlagUrl(lang, 28)} 
+                                        alt={LANGUAGE_NAMES[lang] || lang}
+                                        className="w-7 h-5 rounded object-cover shrink-0"
+                                        loading="lazy"
+                                    />
+                                </div>
+                                
+                                <div className="flex items-center gap-4 text-xs shrink-0">
+                                    {hasBeenSent && lastLangSend ? (
+                                        <>
+                                            <div className="text-dashboard-text-secondary">
+                                                {formatDateTime(lastLangSend.sentAt)}
+                                            </div>
+                                            <div className="text-dashboard-text-secondary">
+                                                {lastLangSend.recipientCount} recipients
+                                            </div>
+                                        </>
+                                    ) : (
+                                        <span className="text-dashboard-text-secondary">Not sent</span>
+                                    )}
+                                </div>
+
+                                {/* Hover tooltip with subject */}
+                                <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">
+                                    <div className="font-bold mb-1">{LANGUAGE_NAMES[lang] || lang.toUpperCase()}</div>
+                                    <div className="text-neutral-300 break-words">{langSubject || 'Untitled'}</div>
+                                    <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" />
+                                </div>
+                            </div>
+                        );
+                    })}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/views/components/NewsletterGrid.tsx

@@ -0,0 +1,48 @@
+/**
+ * Newsletter Grid View Component
+ * Card-based grid layout for newsletters
+ */
+
+'use client';
+
+import React from 'react';
+import { NewsletterListItem } from '../../types/newsletter';
+import { NewsletterCard } from './NewsletterCard';
+
+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 function NewsletterGrid({ 
+    newsletters, 
+    onEdit, 
+    onSend, 
+    onDelete, 
+    formatDateTime,
+    locale 
+}: NewsletterGridProps) {
+    if (newsletters.length === 0) {
+        return null;
+    }
+
+    return (
+        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+            {newsletters.map((newsletter) => (
+                <NewsletterCard
+                    key={newsletter.id}
+                    newsletter={newsletter}
+                    onEdit={onEdit}
+                    onSend={onSend}
+                    onDelete={onDelete}
+                    formatDateTime={formatDateTime}
+                    locale={locale}
+                />
+            ))}
+        </div>
+    );
+}