@contentgrowth/content-emailing 0.6.1 → 0.7.1

package/dist/frontend/index.js

@@ -348,7 +348,7 @@ var TemplateManager = ({
     },
     /* @__PURE__ */ React3.createElement("svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, /* @__PURE__ */ React3.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 4v16m8-8H4" })),
     "Create Template"
-  )), error && /* @__PURE__ */ React3.createElement("div", { className: "mb-4 p-3 rounded-lg bg-red-50 text-red-800 border border-red-200" }, error, /* @__PURE__ */ React3.createElement("button", { onClick: () => setError(null), className: "ml-2 underline" }, "Dismiss")), /* @__PURE__ */ React3.createElement("div", { className: "grid grid-cols-4 gap-4 mb-6" }, /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4" }, /* @__PURE__ */ React3.createElement("div", { className: "text-2xl font-bold text-gray-900" }, templates.length), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-gray-500" }, "Total")), /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4" }, /* @__PURE__ */ React3.createElement("div", { className: "text-2xl font-bold text-green-600" }, templates.filter((t) => t.is_active).length), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-gray-500" }, "Active")), /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4" }, /* @__PURE__ */ React3.createElement("div", { className: "text-2xl font-bold text-yellow-600" }, templates.filter((t) => !t.is_active).length), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-gray-500" }, "Inactive")), /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4" }, /* @__PURE__ */ React3.createElement("div", { className: "text-2xl font-bold text-blue-600" }, new Set(templates.map((t) => t.template_type)).size), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-gray-500" }, "Types"))), /* @__PURE__ */ React3.createElement("div", { className: "flex gap-2 mb-6 border-b border-gray-200 pb-3 flex-wrap" }, uniqueTypes.map((type) => /* @__PURE__ */ React3.createElement(
+  )), error && /* @__PURE__ */ React3.createElement("div", { className: "mb-4 p-3 rounded-lg bg-red-50 text-red-800 border border-red-200" }, error, /* @__PURE__ */ React3.createElement("button", { onClick: () => setError(null), className: "ml-2 underline" }, "Dismiss")), /* @__PURE__ */ React3.createElement("div", { className: "flex gap-4 mb-6" }, /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4 flex-1" }, /* @__PURE__ */ React3.createElement("div", { className: "text-2xl font-bold text-gray-900" }, templates.length), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-gray-500" }, "Total")), /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4 flex-1" }, /* @__PURE__ */ React3.createElement("div", { className: "text-2xl font-bold text-green-600" }, templates.filter((t) => t.is_active).length), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-gray-500" }, "Active")), /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4 flex-1" }, /* @__PURE__ */ React3.createElement("div", { className: "text-2xl font-bold text-yellow-600" }, templates.filter((t) => !t.is_active).length), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-gray-500" }, "Inactive")), /* @__PURE__ */ React3.createElement("div", { className: "bg-white rounded-lg border border-gray-200 p-4 flex-1" }, /* @__PURE__ */ React3.createElement("div", { className: "text-2xl font-bold text-blue-600" }, new Set(templates.map((t) => t.template_type)).size), /* @__PURE__ */ React3.createElement("div", { className: "text-sm text-gray-500" }, "Types"))), /* @__PURE__ */ React3.createElement("div", { className: "flex gap-2 mb-6 border-b border-gray-200 pb-3 flex-wrap" }, uniqueTypes.map((type) => /* @__PURE__ */ React3.createElement(
     "button",
     {
       key: type,
@@ -617,7 +617,149 @@ var EmailSettings = ({
     saving ? "Saving..." : "Save Changes"
   )));
 };
+
+// src/frontend/EmailLogsPanel.tsx
+import React5, { useState as useState5, useEffect as useEffect4 } from "react";
+var statusColors = {
+  pending: "bg-yellow-100 text-yellow-800",
+  sent: "bg-green-100 text-green-800",
+  failed: "bg-red-100 text-red-800",
+  bounced: "bg-orange-100 text-orange-800",
+  complained: "bg-purple-100 text-purple-800"
+};
+function EmailLogsPanel({
+  fetchLogs,
+  fetchStats,
+  title = "Email Logs",
+  pageSize = 20,
+  className = ""
+}) {
+  const [logs, setLogs] = useState5([]);
+  const [stats, setStats] = useState5(null);
+  const [loading, setLoading] = useState5(true);
+  const [page, setPage] = useState5(1);
+  const [totalPages, setTotalPages] = useState5(1);
+  const [statusFilter, setStatusFilter] = useState5("");
+  const [emailFilter, setEmailFilter] = useState5("");
+  const [templateFilter, setTemplateFilter] = useState5("");
+  const [showStats, setShowStats] = useState5(false);
+  const [error, setError] = useState5(null);
+  useEffect4(() => {
+    loadLogs();
+  }, [page, statusFilter]);
+  useEffect4(() => {
+    if (fetchStats && showStats) {
+      loadStats();
+    }
+  }, [showStats]);
+  const loadLogs = async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const result = await fetchLogs({
+        page,
+        limit: pageSize,
+        status: statusFilter || void 0,
+        email: emailFilter || void 0,
+        template: templateFilter || void 0
+      });
+      setLogs(result.logs);
+      setTotalPages(Math.ceil(result.total / pageSize));
+    } catch (err) {
+      setError(err.message || "Failed to load logs");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const loadStats = async () => {
+    if (!fetchStats) return;
+    try {
+      const result = await fetchStats(7);
+      setStats(result);
+    } catch (err) {
+      console.error("Failed to load stats:", err);
+    }
+  };
+  const formatDate = (timestamp) => {
+    if (!timestamp) return "-";
+    return new Date(timestamp * 1e3).toLocaleString();
+  };
+  const handleSearch = (e) => {
+    e.preventDefault();
+    setPage(1);
+    loadLogs();
+  };
+  return /* @__PURE__ */ React5.createElement("div", { className: `email-logs-panel ${className}` }, /* @__PURE__ */ React5.createElement("div", { className: "flex justify-between items-center mb-4" }, /* @__PURE__ */ React5.createElement("h2", { className: "text-xl font-semibold text-gray-900" }, title), /* @__PURE__ */ React5.createElement("div", { className: "flex gap-2" }, fetchStats && /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      onClick: () => setShowStats(!showStats),
+      className: "px-3 py-1.5 text-sm border border-gray-300 rounded-md hover:bg-gray-50"
+    },
+    showStats ? "Hide Stats" : "Show Stats"
+  ), /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      onClick: loadLogs,
+      className: "px-3 py-1.5 text-sm bg-blue-600 text-white rounded-md hover:bg-blue-700"
+    },
+    "Refresh"
+  ))), showStats && stats && /* @__PURE__ */ React5.createElement("div", { className: "mb-4 p-4 bg-gray-50 rounded-lg" }, /* @__PURE__ */ React5.createElement("h3", { className: "font-medium text-gray-700 mb-3" }, "Last 7 Days"), /* @__PURE__ */ React5.createElement("div", { className: "grid grid-cols-4 gap-4" }, /* @__PURE__ */ React5.createElement("div", { className: "text-center" }, /* @__PURE__ */ React5.createElement("div", { className: "text-2xl font-bold text-gray-900" }, stats.total), /* @__PURE__ */ React5.createElement("div", { className: "text-sm text-gray-500" }, "Total")), /* @__PURE__ */ React5.createElement("div", { className: "text-center" }, /* @__PURE__ */ React5.createElement("div", { className: "text-2xl font-bold text-green-600" }, stats.sent), /* @__PURE__ */ React5.createElement("div", { className: "text-sm text-gray-500" }, "Sent")), /* @__PURE__ */ React5.createElement("div", { className: "text-center" }, /* @__PURE__ */ React5.createElement("div", { className: "text-2xl font-bold text-red-600" }, stats.failed), /* @__PURE__ */ React5.createElement("div", { className: "text-sm text-gray-500" }, "Failed")), /* @__PURE__ */ React5.createElement("div", { className: "text-center" }, /* @__PURE__ */ React5.createElement("div", { className: "text-2xl font-bold text-yellow-600" }, stats.pending), /* @__PURE__ */ React5.createElement("div", { className: "text-sm text-gray-500" }, "Pending"))), Object.keys(stats.byTemplate).length > 0 && /* @__PURE__ */ React5.createElement("div", { className: "mt-3 pt-3 border-t" }, /* @__PURE__ */ React5.createElement("div", { className: "text-sm text-gray-600" }, /* @__PURE__ */ React5.createElement("strong", null, "By Template:"), " ", Object.entries(stats.byTemplate).map(([template, count]) => /* @__PURE__ */ React5.createElement("span", { key: template, className: "mr-3" }, template, ": ", count))))), /* @__PURE__ */ React5.createElement("form", { onSubmit: handleSearch, className: "mb-4 flex gap-2 flex-wrap" }, /* @__PURE__ */ React5.createElement(
+    "select",
+    {
+      value: statusFilter,
+      onChange: (e) => setStatusFilter(e.target.value),
+      className: "px-3 py-2 border border-gray-300 rounded-md text-sm"
+    },
+    /* @__PURE__ */ React5.createElement("option", { value: "" }, "All Statuses"),
+    /* @__PURE__ */ React5.createElement("option", { value: "sent" }, "Sent"),
+    /* @__PURE__ */ React5.createElement("option", { value: "failed" }, "Failed"),
+    /* @__PURE__ */ React5.createElement("option", { value: "pending" }, "Pending"),
+    /* @__PURE__ */ React5.createElement("option", { value: "bounced" }, "Bounced")
+  ), /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      type: "text",
+      value: emailFilter,
+      onChange: (e) => setEmailFilter(e.target.value),
+      placeholder: "Filter by email...",
+      className: "px-3 py-2 border border-gray-300 rounded-md text-sm"
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    "input",
+    {
+      type: "text",
+      value: templateFilter,
+      onChange: (e) => setTemplateFilter(e.target.value),
+      placeholder: "Filter by template...",
+      className: "px-3 py-2 border border-gray-300 rounded-md text-sm"
+    }
+  ), /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      type: "submit",
+      className: "px-4 py-2 bg-gray-600 text-white rounded-md text-sm hover:bg-gray-700"
+    },
+    "Search"
+  )), error && /* @__PURE__ */ React5.createElement("div", { className: "mb-4 p-3 bg-red-50 text-red-700 rounded-md" }, error), loading ? /* @__PURE__ */ React5.createElement("div", { className: "text-center py-8 text-gray-500" }, "Loading...") : logs.length === 0 ? /* @__PURE__ */ React5.createElement("div", { className: "text-center py-8 text-gray-500" }, "No email logs found") : /* @__PURE__ */ React5.createElement("div", { className: "overflow-x-auto" }, /* @__PURE__ */ React5.createElement("table", { className: "min-w-full divide-y divide-gray-200" }, /* @__PURE__ */ React5.createElement("thead", { className: "bg-gray-50" }, /* @__PURE__ */ React5.createElement("tr", null, /* @__PURE__ */ React5.createElement("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase" }, "Recipient"), /* @__PURE__ */ React5.createElement("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase" }, "Template"), /* @__PURE__ */ React5.createElement("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase" }, "Subject"), /* @__PURE__ */ React5.createElement("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase" }, "Status"), /* @__PURE__ */ React5.createElement("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase" }, "Provider"), /* @__PURE__ */ React5.createElement("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase" }, "Time"))), /* @__PURE__ */ React5.createElement("tbody", { className: "bg-white divide-y divide-gray-200" }, logs.map((log) => /* @__PURE__ */ React5.createElement("tr", { key: log.id, className: log.status === "failed" ? "bg-red-50" : "" }, /* @__PURE__ */ React5.createElement("td", { className: "px-4 py-3 text-sm" }, /* @__PURE__ */ React5.createElement("div", { className: "text-gray-900" }, log.recipientEmail), log.recipientUserId && /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-gray-400" }, "User: ", log.recipientUserId.substring(0, 8), "...")), /* @__PURE__ */ React5.createElement("td", { className: "px-4 py-3 text-sm text-gray-600" }, log.templateId), /* @__PURE__ */ React5.createElement("td", { className: "px-4 py-3 text-sm text-gray-600 max-w-xs truncate", title: log.subject }, log.subject || "-"), /* @__PURE__ */ React5.createElement("td", { className: "px-4 py-3" }, /* @__PURE__ */ React5.createElement("span", { className: `px-2 py-1 text-xs font-medium rounded-full ${statusColors[log.status] || "bg-gray-100 text-gray-800"}` }, log.status), log.errorMessage && /* @__PURE__ */ React5.createElement("div", { className: "text-xs text-red-600 mt-1", title: log.errorMessage }, log.errorMessage.substring(0, 30), "...")), /* @__PURE__ */ React5.createElement("td", { className: "px-4 py-3 text-sm text-gray-600" }, log.provider || "-"), /* @__PURE__ */ React5.createElement("td", { className: "px-4 py-3 text-sm text-gray-500" }, formatDate(log.createdAt))))))), totalPages > 1 && /* @__PURE__ */ React5.createElement("div", { className: "mt-4 flex justify-between items-center" }, /* @__PURE__ */ React5.createElement("div", { className: "text-sm text-gray-500" }, "Page ", page, " of ", totalPages), /* @__PURE__ */ React5.createElement("div", { className: "flex gap-2" }, /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      onClick: () => setPage((p) => Math.max(1, p - 1)),
+      disabled: page <= 1,
+      className: "px-3 py-1.5 border border-gray-300 rounded-md text-sm disabled:opacity-50"
+    },
+    "Previous"
+  ), /* @__PURE__ */ React5.createElement(
+    "button",
+    {
+      onClick: () => setPage((p) => Math.min(totalPages, p + 1)),
+      disabled: page >= totalPages,
+      className: "px-3 py-1.5 border border-gray-300 rounded-md text-sm disabled:opacity-50"
+    },
+    "Next"
+  ))));
+}
 export {
+  EmailLogsPanel,
   EmailSettings,
   TemplateEditor,
   TemplateManager,