@jhits/plugin-newsletter 0.0.15 → 0.0.17

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/DomainPromptModal.tsx

@@ -0,0 +1,160 @@
+/**
+ * Domain Prompt Modal Component
+ * Non-technical modal to ask for the website domain when it's missing in dev mode.
+ */
+
+'use client';
+
+import React, { useState } from 'react';
+import { X, Globe, Save, RefreshCw, CheckCircle2, Info } from 'lucide-react';
+
+interface DomainPromptModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSave: (domain: string) => Promise<void>;
+    language: string;
+}
+
+export function DomainPromptModal({ isOpen, onClose, onSave, language }: DomainPromptModalProps) {
+    const [domain, setDomain] = useState('');
+    const [isSaving, setIsSaving] = useState(false);
+    const [isSuccess, setIsSuccess] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const languageNames: Record<string, string> = {
+        en: 'English',
+        nl: 'Dutch',
+        sv: 'Swedish',
+    };
+
+    const handleSave = async () => {
+        if (!domain.trim()) {
+            setError('Please enter a website address');
+            return;
+        }
+
+        // Basic URL validation/cleanup
+        let cleanDomain = domain.trim().toLowerCase();
+        if (cleanDomain.startsWith('http://')) cleanDomain = cleanDomain.replace('http://', '');
+        if (cleanDomain.startsWith('https://')) cleanDomain = cleanDomain.replace('https://', '');
+        if (cleanDomain.endsWith('/')) cleanDomain = cleanDomain.slice(0, -1);
+
+        try {
+            setIsSaving(true);
+            setError(null);
+            await onSave(cleanDomain);
+            setIsSuccess(true);
+            setTimeout(() => {
+                onClose();
+            }, 1500);
+        } catch (err: any) {
+            setError(err.message || 'Failed to save domain configuration');
+        } finally {
+            setIsSaving(false);
+        }
+    };
+
+    if (!isOpen) return null;
+
+    return (
+        <div className="fixed inset-0 z-[60] flex items-center justify-center p-4">
+            {/* Backdrop */}
+            <div 
+                className="absolute inset-0 bg-black/60 backdrop-blur-md"
+                onClick={() => !isSaving && onClose()}
+            />
+            
+            {/* Modal */}
+            <div className="relative w-full max-w-lg bg-white dark:bg-neutral-900 rounded-[2.5rem] border border-dashboard-border shadow-2xl overflow-hidden animate-in fade-in zoom-in duration-300">
+                {/* Header */}
+                <div className="px-10 pt-10 pb-6 text-center">
+                    <div className="w-20 h-20 bg-primary/10 rounded-[2rem] flex items-center justify-center mx-auto mb-6">
+                        <Globe size={40} className="text-primary" />
+                    </div>
+                    <h2 className="text-3xl font-black text-dashboard-text uppercase tracking-tighter leading-none mb-2">
+                        Website Connection<span className="text-primary">.</span>
+                    </h2>
+                    <p className="text-sm text-neutral-500 dark:text-neutral-400 font-medium">
+                        We need to know where your <span className="font-bold text-dashboard-text">{languageNames[language] || language}</span> website is hosted to ensure links work correctly.
+                    </p>
+                </div>
+
+                {/* Content */}
+                <div className="px-10 pb-10 space-y-6">
+                    <div className="bg-blue-50/50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-900/20 rounded-2xl p-4 flex gap-3">
+                        <Info size={18} className="text-blue-500 flex-shrink-0 mt-0.5" />
+                        <p className="text-xs text-blue-700 dark:text-blue-300 leading-relaxed">
+                            Since you are in development mode, we couldn't automatically find the domain for this language. Please provide it below.
+                        </p>
+                    </div>
+
+                    <div>
+                        <label className="text-[10px] font-black text-dashboard-text-secondary uppercase tracking-[0.2em] block mb-3 ml-1">
+                            Your {languageNames[language] || language} Website URL
+                        </label>
+                        <div className="relative group">
+                            <div className="absolute left-4 top-1/2 -translate-y-1/2 text-neutral-400 group-focus-within:text-primary transition-colors font-mono text-sm">
+                                https://
+                            </div>
+                            <input
+                                type="text"
+                                value={domain}
+                                onChange={(e) => {
+                                    setDomain(e.target.value);
+                                    setError(null);
+                                }}
+                                onKeyDown={(e) => e.key === 'Enter' && handleSave()}
+                                placeholder="www.yourwebsite.com"
+                                className="w-full pl-20 pr-6 py-4 bg-dashboard-bg border border-dashboard-border rounded-2xl outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all text-dashboard-text font-medium"
+                                autoFocus
+                            />
+                        </div>
+                        {error && (
+                            <p className="text-[10px] text-red-500 font-bold uppercase tracking-widest mt-3 ml-1">
+                                {error}
+                            </p>
+                        )}
+                    </div>
+
+                    <div className="flex gap-3 pt-2">
+                        <button
+                            onClick={onClose}
+                            disabled={isSaving}
+                            className="flex-1 px-6 py-4 rounded-full text-[10px] font-black uppercase tracking-widest transition-all bg-dashboard-bg border border-dashboard-border text-dashboard-text hover:bg-dashboard-border active:scale-95"
+                        >
+                            Skip for now
+                        </button>
+                        <button
+                            onClick={handleSave}
+                            disabled={isSaving || isSuccess}
+                            className={`flex-[2] inline-flex items-center justify-center gap-2 px-6 py-4 rounded-full text-[10px] font-black uppercase tracking-widest transition-all shadow-lg active:scale-95 ${
+                                isSaving 
+                                    ? 'bg-neutral-400 text-white cursor-not-allowed'
+                                    : isSuccess
+                                        ? 'bg-green-600 text-white'
+                                        : 'bg-primary text-white hover:shadow-primary/20'
+                            }`}
+                        >
+                            {isSaving ? (
+                                <>
+                                    <RefreshCw className="w-4 h-4 animate-spin" />
+                                    Connecting...
+                                </>
+                            ) : isSuccess ? (
+                                <>
+                                    <CheckCircle2 className="w-4 h-4" />
+                                    Saved!
+                                </>
+                            ) : (
+                                <>
+                                    <Save className="w-4 h-4" />
+                                    Link Website
+                                </>
+                            )}
+                        </button>
+                    </div>
+                </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>
+    );
+}