@jhits/plugin-newsletter 0.0.4 → 0.0.6

package/src/views/NewsletterManager.tsx

@@ -0,0 +1,240 @@
+/**
+ * Newsletter Manager View
+ * List and manage newsletters
+ */
+
+'use client';
+
+import React, { useState, useEffect } from 'react';
+import { Plus, Mail, Calendar, Trash2, Edit2 } from 'lucide-react';
+import { NewsletterListItem, NewsletterStatus } from '../types/newsletter';
+
+export interface NewsletterManagerViewProps {
+    siteId: string;
+    locale: string;
+}
+
+function getStatusBadgeColor(status: NewsletterStatus) {
+    switch (status) {
+        case 'sent':
+            return 'bg-green-500/10 text-green-600 dark:text-green-400 border-green-500/20';
+        case 'scheduled':
+            return 'bg-blue-500/10 text-blue-600 dark:text-blue-400 border-blue-500/20';
+        case 'draft':
+            return 'bg-neutral-500/10 text-dashboard-text-secondary border-neutral-500/20';
+        case 'archived':
+            return 'bg-gray-500/10 text-gray-600 dark:text-gray-400 border-gray-500/20';
+        default:
+            return 'bg-neutral-500/10 text-dashboard-text-secondary border-neutral-500/20';
+    }
+}
+
+export function NewsletterManagerView({ siteId, locale }: NewsletterManagerViewProps) {
+    const [newsletters, setNewsletters] = useState<NewsletterListItem[]>([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [statusFilter, setStatusFilter] = useState<NewsletterStatus | 'all'>('all');
+
+    // Fetch newsletters
+    useEffect(() => {
+        const fetchNewsletters = async () => {
+            try {
+                setIsLoading(true);
+                const response = await fetch('/api/plugin-newsletter/newsletters', {
+                    credentials: 'include',
+                });
+                if (!response.ok) {
+                    throw new Error('Failed to fetch newsletters');
+                }
+                const data = await response.json();
+                setNewsletters(Array.isArray(data) ? data : []);
+            } catch (error) {
+                console.error('Failed to load newsletters:', error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        fetchNewsletters();
+    }, []);
+
+    // Filter newsletters
+    const filteredNewsletters = statusFilter === 'all'
+        ? newsletters
+        : newsletters.filter(n => n.status === statusFilter);
+
+    // Handle create new newsletter
+    const handleCreate = () => {
+        window.location.href = '/dashboard/newsletter/new';
+    };
+
+    // Handle edit newsletter
+    const handleEdit = (slug: string) => {
+        window.location.href = `/dashboard/newsletter/editor/${slug}`;
+    };
+
+    // Handle delete newsletter
+    const handleDelete = async (slug: string, title: string) => {
+        if (!confirm(`Are you sure you want to delete "${title}"?`)) {
+            return;
+        }
+
+        try {
+            const response = await fetch(`/api/plugin-newsletter/newsletters/${slug}`, {
+                method: 'DELETE',
+                credentials: 'include',
+            });
+
+            if (!response.ok) {
+                throw new Error('Failed to delete newsletter');
+            }
+
+            // Remove from local state
+            setNewsletters(prev => prev.filter(n => n.slug !== slug));
+        } catch (error: any) {
+            console.error('Failed to delete newsletter:', error);
+            alert(error.message || 'Failed to delete newsletter');
+        }
+    };
+
+    // Format date
+    const formatDate = (dateString: string | undefined) => {
+        if (!dateString) return 'N/A';
+        const date = new Date(dateString);
+        return date.toLocaleDateString(locale, {
+            day: 'numeric',
+            month: 'short',
+            year: 'numeric',
+        });
+    };
+
+    return (
+        <div className="h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto">
+            <div className="max-w-7xl mx-auto">
+                {/* Header */}
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
+                    <div>
+                        <h1 className="text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2">
+                            Newsletters
+                        </h1>
+                        <p className="text-sm text-dashboard-text-secondary">
+                            Create and manage your email newsletters
+                        </p>
+                    </div>
+
+                    <div className="flex items-center gap-3">
+                        {/* Status Filter */}
+                        <select
+                            value={statusFilter}
+                            onChange={(e) => setStatusFilter(e.target.value as NewsletterStatus | 'all')}
+                            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"
+                        >
+                            <option value="all">All Status</option>
+                            <option value="draft">Draft</option>
+                            <option value="scheduled">Scheduled</option>
+                            <option value="sent">Sent</option>
+                            <option value="archived">Archived</option>
+                        </select>
+
+                        {/* Create Button */}
+                        <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"
+                        >
+                            <Plus size={14} />
+                            New Newsletter
+                        </button>
+                    </div>
+                </div>
+
+                {/* Newsletters Table */}
+                <div className="bg-dashboard-bg rounded-3xl border border-dashboard-border overflow-hidden">
+                    {isLoading ? (
+                        <div className="flex items-center justify-center py-20">
+                            <div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
+                        </div>
+                    ) : filteredNewsletters.length === 0 ? (
+                        <div className="py-24 text-center">
+                            <Mail size={64} className="mx-auto text-dashboard-text-secondary mb-4" />
+                            <p className="text-dashboard-text-secondary font-serif italic text-lg mb-6">
+                                {statusFilter === 'all' ? 'No newsletters yet.' : `No newsletters found with status "${statusFilter}".`}
+                            </p>
+                            <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"
+                            >
+                                <Plus size={14} />
+                                Create Your First Newsletter
+                            </button>
+                        </div>
+                    ) : (
+                        <div className="overflow-x-auto">
+                            <table className="w-full text-left border-collapse">
+                                <thead>
+                                    <tr className="bg-dashboard-bg text-dashboard-text text-[10px] uppercase tracking-[0.2em] font-black border-b border-dashboard-border">
+                                        <th className="px-8 py-5">Title</th>
+                                        <th className="px-8 py-5">Subject</th>
+                                        <th className="px-8 py-5">Status</th>
+                                        <th className="px-8 py-5 text-right">Updated</th>
+                                        <th className="px-8 py-5 text-right">Actions</th>
+                                    </tr>
+                                </thead>
+                                <tbody className="divide-y divide-dashboard-border">
+                                    {filteredNewsletters.map((newsletter) => (
+                                        <tr
+                                            key={newsletter.id}
+                                            className="hover:bg-dashboard-bg transition-colors group"
+                                        >
+                                            <td className="px-8 py-5">
+                                                <div className="flex items-center gap-4">
+                                                    <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>
+                                            </td>
+                                            <td className="px-8 py-5">
+                                                <span className="text-sm text-dashboard-text-secondary">
+                                                    {newsletter.subject || 'No subject'}
+                                                </span>
+                                            </td>
+                                            <td className="px-8 py-5">
+                                                <span className={`text-[10px] font-black px-3 py-1 rounded-full uppercase border ${getStatusBadgeColor(newsletter.status)}`}>
+                                                    {newsletter.status}
+                                                </span>
+                                            </td>
+                                            <td className="px-8 py-5 text-right text-xs text-dashboard-text-secondary font-medium">
+                                                <div className="flex items-center justify-end gap-2">
+                                                    <Calendar size={14} />
+                                                    {formatDate(newsletter.updatedAt)}
+                                                </div>
+                                            </td>
+                                            <td className="px-8 py-5 text-right">
+                                                <div className="flex items-center justify-end gap-2">
+                                                    <button
+                                                        onClick={() => handleEdit(newsletter.slug)}
+                                                        className="p-2.5 rounded-full text-dashboard-text-secondary hover:text-primary hover:bg-primary/10 transition-colors"
+                                                        title="Edit newsletter"
+                                                    >
+                                                        <Edit2 size={18} />
+                                                    </button>
+                                                    <button
+                                                        onClick={() => handleDelete(newsletter.slug, 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"
+                                                    >
+                                                        <Trash2 size={18} />
+                                                    </button>
+                                                </div>
+                                            </td>
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}

package/src/views/SettingsView.tsx

@@ -105,32 +105,32 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
 
     if (isLoading) {
         return (
-            <div className="h-full w-full bg-dashboard-card text-dashboard-text flex items-center justify-center">
+            <div className="h-full w-full bg-white dark:bg-neutral-900 text-dashboard-text flex items-center justify-center">
                 <div className="text-center">
                     <RefreshCw className="w-8 h-8 animate-spin text-primary mx-auto mb-4" />
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400">Loading settings...</p>
+                    <p className="text-sm text-dashboard-text-secondary">Loading settings...</p>
                 </div>
             </div>
         );
     }
 
     return (
-        <div className="h-full w-full rounded-[2.5rem] bg-dashboard-card text-dashboard-text overflow-y-auto">
-            <div className="max-w-6xl mx-auto p-8">
+        <div className="h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto">
+            <div className="max-w-6xl mx-auto">
                 {/* Header */}
-                <div className="flex items-center justify-between mb-8">
+                <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
                     <div>
-                        <h1 className="text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2">
+                        <h1 className="text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2">
                             Newsletter Settings
                         </h1>
-                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                        <p className="text-sm text-dashboard-text-secondary">
                             Configure welcome emails for new subscribers
                         </p>
                     </div>
                     <button
                         onClick={handleSave}
                         disabled={isSaving}
-                        className={`inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg ${isSaving
+                        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 ${isSaving
                             ? 'bg-neutral-400 text-white cursor-not-allowed'
                             : showSuccess
                                 ? 'bg-green-600 text-white'
@@ -158,11 +158,11 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
 
                 {/* Welcome Email Settings */}
                 <section className="bg-dashboard-sidebar p-8 rounded-3xl border border-dashboard-border mb-8">
-                    <div className="flex items-center gap-2 font-bold text-neutral-950 dark:text-white border-b border-dashboard-border pb-4 mb-6">
+                    <div className="flex items-center gap-2 font-bold text-dashboard-text border-b border-dashboard-border pb-4 mb-6">
                         <Mail size={20} className="text-primary" />
                         Welcome Email Automation
                     </div>
-                    <p className="text-sm text-neutral-500 dark:text-neutral-400 mb-8">
+                    <p className="text-sm text-dashboard-text-secondary mb-8">
                         Configure the welcome email that will be sent automatically when someone subscribes to your newsletter.
                     </p>
 
@@ -172,13 +172,13 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                             <div key={lang} className="bg-dashboard-card p-6 rounded-2xl border border-dashboard-border">
                                 <div className="flex items-center gap-2 mb-6">
                                     <Globe size={16} className="text-primary" />
-                                    <h3 className="text-lg font-black text-neutral-950 dark:text-white uppercase tracking-tight">
+                                    <h3 className="text-lg font-black text-dashboard-text uppercase tracking-tight">
                                         {lang.toUpperCase()} - {lang === 'nl' ? 'Dutch' : lang === 'en' ? 'English' : 'Swedish'}
                                     </h3>
                                 </div>
                                 <div className="space-y-4">
                                     <div>
-                                        <label className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-widest block mb-2">
+                                        <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
                                             Email Subject
                                         </label>
                                         <input
@@ -190,7 +190,7 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                         />
                                     </div>
                                     <div>
-                                        <label className="text-xs font-bold text-neutral-500 dark:text-neutral-400 uppercase tracking-widest block mb-2">
+                                        <label className="text-xs font-bold text-dashboard-text-secondary uppercase tracking-widest block mb-2">
                                             Email Message
                                         </label>
                                         <textarea
@@ -200,7 +200,7 @@ export function SettingsView({ siteId, locale }: SettingsViewProps) {
                                             rows={8}
                                             className="w-full px-4 py-3 bg-dashboard-bg border border-dashboard-border rounded-xl outline-none focus:ring-2 focus:ring-primary transition-colors text-dashboard-text resize-none font-mono text-sm"
                                         />
-                                        <p className="text-[10px] text-neutral-500 dark:text-neutral-400 mt-2">
+                                        <p className="text-[10px] text-dashboard-text-secondary mt-2">
                                             Supports markdown: **bold**, • bullet points, line breaks
                                         </p>
                                     </div>

package/src/views/SubscribersView.tsx

@@ -103,22 +103,22 @@ export function SubscribersView({ siteId, locale }: SubscribersViewProps) {
     };
 
     return (
-        <div className="h-full w-full rounded-[2.5rem] bg-dashboard-card text-dashboard-text overflow-y-auto">
-            <div className="max-w-7xl mx-auto p-8">
+        <div className="h-full w-full rounded-[2.5rem] bg-white dark:bg-neutral-900 p-8 overflow-y-auto">
+            <div className="max-w-7xl mx-auto">
                 {/* Header */}
                 <div className="flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8">
                     <div>
-                        <h1 className="text-3xl font-black text-neutral-950 dark:text-white uppercase tracking-tighter mb-2">
+                        <h1 className="text-3xl font-black text-dashboard-text uppercase tracking-tighter mb-2">
                             Newsletter Subscribers
                         </h1>
-                        <p className="text-sm text-neutral-500 dark:text-neutral-400">
+                        <p className="text-sm text-dashboard-text-secondary">
                             Manage your newsletter subscribers and their preferences
                         </p>
                     </div>
 
                     <div className="flex items-center gap-3">
                         {/* Language Filter */}
-                        <div className="flex items-center bg-dashboard-sidebar border border-dashboard-border rounded-xl px-4 py-2.5 shadow-sm">
+                        <div className="flex items-center bg-dashboard-bg border border-dashboard-border rounded-xl px-4 py-2.5">
                             <Filter size={16} className="text-primary mr-2" />
                             <select
                                 value={filter}
@@ -136,7 +136,7 @@ export function SubscribersView({ siteId, locale }: SubscribersViewProps) {
                         <button
                             onClick={handleCopyEmails}
                             disabled={filteredSubscribers.length === 0}
-                            className="inline-flex items-center gap-2 px-6 py-3 rounded-full text-[10px] font-black uppercase tracking-widest transition-colors shadow-lg disabled:opacity-30 disabled:cursor-not-allowed bg-primary text-white hover:bg-primary/90"
+                            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 disabled:opacity-30 disabled:cursor-not-allowed bg-primary text-white hover:bg-primary/90"
                         >
                             {copyStatus ? (
                                 <>
@@ -155,51 +155,51 @@ export function SubscribersView({ siteId, locale }: SubscribersViewProps) {
 
                 {/* Stats */}
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
-                    <div className="bg-dashboard-sidebar p-6 rounded-3xl border border-dashboard-border">
+                    <div className="bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border">
                         <div className="flex items-center gap-3 mb-2">
                             <Users size={20} className="text-primary" />
-                            <span className="text-[10px] uppercase tracking-widest text-neutral-500 dark:text-neutral-400 font-black">
+                            <span className="text-[10px] uppercase tracking-widest text-dashboard-text-secondary font-black">
                                 Total Subscribers
                             </span>
                         </div>
-                        <p className="text-3xl font-black text-neutral-950 dark:text-white">
+                        <p className="text-3xl font-black text-dashboard-text">
                             {subscribers.length}
                         </p>
                     </div>
-                    <div className="bg-dashboard-sidebar p-6 rounded-3xl border border-dashboard-border">
+                    <div className="bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border">
                         <div className="flex items-center gap-3 mb-2">
                             <Globe size={20} className="text-primary" />
-                            <span className="text-[10px] uppercase tracking-widest text-neutral-500 dark:text-neutral-400 font-black">
+                            <span className="text-[10px] uppercase tracking-widest text-dashboard-text-secondary font-black">
                                 Languages
                             </span>
                         </div>
-                        <p className="text-3xl font-black text-neutral-950 dark:text-white">
+                        <p className="text-3xl font-black text-dashboard-text">
                             {languages.length}
                         </p>
                     </div>
-                    <div className="bg-dashboard-sidebar p-6 rounded-3xl border border-dashboard-border">
+                    <div className="bg-dashboard-bg p-6 rounded-3xl border border-dashboard-border">
                         <div className="flex items-center gap-3 mb-2">
                             <Filter size={20} className="text-primary" />
-                            <span className="text-[10px] uppercase tracking-widest text-neutral-500 dark:text-neutral-400 font-black">
+                            <span className="text-[10px] uppercase tracking-widest text-dashboard-text-secondary font-black">
                                 Filtered
                             </span>
                         </div>
-                        <p className="text-3xl font-black text-neutral-950 dark:text-white">
+                        <p className="text-3xl font-black text-dashboard-text">
                             {filteredSubscribers.length}
                         </p>
                     </div>
                 </div>
 
                 {/* Subscribers Table */}
-                <div className="bg-dashboard-sidebar rounded-3xl border border-dashboard-border shadow-sm overflow-hidden">
+                <div className="bg-dashboard-bg rounded-3xl border border-dashboard-border overflow-hidden">
                     {isLoading ? (
                         <div className="flex items-center justify-center py-20">
                             <div className="w-8 h-8 border-4 border-primary/20 border-t-primary rounded-full animate-spin" />
                         </div>
                     ) : filteredSubscribers.length === 0 ? (
                         <div className="py-24 text-center">
-                            <Users size={64} className="mx-auto text-neutral-300 dark:text-neutral-700 mb-4" />
-                            <p className="text-neutral-500 dark:text-neutral-400 font-serif italic text-lg">
+                            <Users size={64} className="mx-auto text-dashboard-text-secondary mb-4" />
+                            <p className="text-dashboard-text-secondary font-serif italic text-lg">
                                 {filter === 'all' ? 'No subscribers yet.' : `No subscribers found for ${filter.toUpperCase()}.`}
                             </p>
                         </div>
@@ -235,7 +235,7 @@ export function SubscribersView({ siteId, locale }: SubscribersViewProps) {
                                                     {subscriber.language}
                                                 </span>
                                             </td>
-                                            <td className="px-8 py-5 text-right text-xs text-neutral-500 dark:text-neutral-400 font-medium">
+                                            <td className="px-8 py-5 text-right text-xs text-dashboard-text-secondary font-medium">
                                                 <div className="flex items-center justify-end gap-2">
                                                     <Calendar size={14} />
                                                     {formatDate(subscriber.subscribedAt)}
@@ -245,7 +245,7 @@ export function SubscribersView({ siteId, locale }: SubscribersViewProps) {
                                                 <button
                                                     onClick={() => handleDeleteSubscriber(subscriber.email)}
                                                     disabled={deleteStatus === subscriber.email}
-                                                    className="p-2.5 rounded-full text-neutral-400 dark:text-neutral-500 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
+                                                    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 disabled:opacity-50 disabled:cursor-not-allowed"
                                                     title="Remove subscriber"
                                                 >
                                                     {deleteStatus === subscriber.email ? (