@consilioweb/payload-support 0.5.2 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (85) hide show
  1. package/dist/components/TicketConversation/components/AISummaryPanel.js +76 -0
  2. package/dist/components/TicketConversation/components/ActionPanels.js +118 -0
  3. package/dist/components/TicketConversation/components/ActivityLog.js +23 -0
  4. package/dist/components/TicketConversation/components/ClientBar.js +42 -0
  5. package/dist/components/TicketConversation/components/ClientHistory.js +137 -0
  6. package/dist/components/TicketConversation/components/CodeBlock.js +152 -0
  7. package/dist/components/TicketConversation/components/CodeBlockInserter.js +155 -0
  8. package/dist/components/TicketConversation/components/QuickActions.js +65 -0
  9. package/dist/components/TicketConversation/components/TicketHeader.js +92 -0
  10. package/dist/components/TicketConversation/components/TimeTrackingPanel.js +133 -0
  11. package/dist/components/TicketConversation/config.js +41 -0
  12. package/dist/components/TicketConversation/constants.js +96 -0
  13. package/dist/components/TicketConversation/context.js +11 -0
  14. package/dist/components/TicketConversation/hooks/useAI.js +176 -0
  15. package/dist/components/TicketConversation/hooks/useMessageActions.js +135 -0
  16. package/dist/components/TicketConversation/hooks/useReply.js +187 -0
  17. package/dist/components/TicketConversation/hooks/useTicketActions.js +230 -0
  18. package/dist/components/TicketConversation/hooks/useTimeTracking.js +122 -0
  19. package/dist/components/TicketConversation/hooks/useTranslation.js +70 -0
  20. package/dist/components/TicketConversation/index.js +1123 -0
  21. package/dist/components/TicketConversation/locales/en.json +878 -0
  22. package/dist/components/TicketConversation/locales/fr.json +878 -0
  23. package/dist/components/TicketConversation/types.js +2 -0
  24. package/dist/components/TicketConversation/utils.js +25 -0
  25. package/dist/index.cjs +2 -2
  26. package/dist/index.js +2 -2
  27. package/dist/styles/BillingView.module.scss +311 -0
  28. package/dist/styles/ChatView.module.scss +438 -0
  29. package/dist/styles/CommandPalette.module.scss +160 -0
  30. package/dist/styles/CrmView.module.scss +554 -0
  31. package/dist/styles/EmailTracking.module.scss +238 -0
  32. package/dist/styles/ImportConversation.module.scss +267 -0
  33. package/dist/styles/Layout.module.scss +55 -0
  34. package/dist/styles/Logs.module.scss +164 -0
  35. package/dist/styles/NewTicket.module.scss +143 -0
  36. package/dist/styles/PendingEmails.module.scss +629 -0
  37. package/dist/styles/SupportDashboard.module.scss +649 -0
  38. package/dist/styles/TicketDetail.module.scss +1050 -0
  39. package/dist/styles/TicketInbox.module.scss +296 -0
  40. package/dist/styles/TicketingSettings.module.scss +358 -0
  41. package/dist/styles/TimeDashboard.module.scss +287 -0
  42. package/dist/styles/_tokens.scss +78 -0
  43. package/dist/styles/theme.css +633 -0
  44. package/dist/views/BillingView/client.js +204 -0
  45. package/dist/views/BillingView/index.js +29 -0
  46. package/dist/views/ChatView/client.js +252 -0
  47. package/dist/views/ChatView/index.js +29 -0
  48. package/dist/views/CrmView/client.js +232 -0
  49. package/dist/views/CrmView/index.js +29 -0
  50. package/dist/views/EmailTrackingView/client.js +154 -0
  51. package/dist/views/EmailTrackingView/index.js +29 -0
  52. package/dist/views/ImportConversationView/client.js +204 -0
  53. package/dist/views/ImportConversationView/index.js +29 -0
  54. package/dist/views/LogsView/client.js +148 -0
  55. package/dist/views/LogsView/index.js +27 -0
  56. package/dist/views/NewTicketView/client.js +224 -0
  57. package/dist/views/NewTicketView/index.js +27 -0
  58. package/dist/views/PendingEmailsView/client.js +172 -0
  59. package/dist/views/PendingEmailsView/index.js +29 -0
  60. package/dist/views/SupportDashboardView/client.js +296 -0
  61. package/dist/views/SupportDashboardView/index.js +29 -0
  62. package/dist/views/TicketDetailView/client.js +844 -0
  63. package/dist/views/TicketDetailView/index.js +29 -0
  64. package/dist/views/TicketInboxView/client.js +294 -0
  65. package/dist/views/TicketInboxView/index.js +27 -0
  66. package/dist/{views.css → views/TicketingSettingsView/TicketingSettings.module.scss} +138 -66
  67. package/dist/views/TicketingSettingsView/client.js +728 -0
  68. package/dist/views/TicketingSettingsView/index.js +29 -0
  69. package/dist/views/TimeDashboardView/client.js +164 -0
  70. package/dist/views/TimeDashboardView/index.js +29 -0
  71. package/dist/views/shared/AdminViewHeader.js +67 -0
  72. package/dist/views/shared/ErrorBoundary.js +50 -0
  73. package/dist/views/shared/Skeleton.js +72 -0
  74. package/dist/views/shared/adminTokens.js +32 -0
  75. package/dist/views/shared/config.js +41 -0
  76. package/dist/views/shared/index.js +6 -0
  77. package/package.json +8 -12
  78. package/src/collections/Tickets.ts +1 -1
  79. package/src/components/TicketConversation/index.tsx +21 -2
  80. package/src/plugin.ts +3 -2
  81. package/dist/views.cjs +0 -6172
  82. package/dist/views.d.cts +0 -30
  83. package/dist/views.d.ts +0 -30
  84. package/dist/views.js +0 -6153
  85. package/src/views.ts +0 -16
@@ -0,0 +1,232 @@
1
+ "use client";
2
+ import { jsxs, jsx } from 'react/jsx-runtime';
3
+ import { useState, useCallback, useEffect } from 'react';
4
+ import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation';
5
+
6
+ const statusLabelKeys = { open: "ticket.status.open", waiting_client: "ticket.status.waiting_client", resolved: "ticket.status.resolved" };
7
+ const statusColors = { open: "#3b82f6", waiting_client: "#f59e0b", resolved: "#22c55e" };
8
+ function formatDuration(minutes) {
9
+ const h = Math.floor(minutes / 60);
10
+ const m = minutes % 60;
11
+ if (h === 0) return `${m}min`;
12
+ if (m === 0) return `${h}h`;
13
+ return `${h}h${m}m`;
14
+ }
15
+ function timeAgo(dateStr) {
16
+ const diff = Date.now() - new Date(dateStr).getTime();
17
+ const days = Math.floor(diff / 864e5);
18
+ if (days === 0) return "Aujourd'hui";
19
+ if (days === 1) return "Hier";
20
+ if (days < 30) return `Il y a ${days}j`;
21
+ return `Il y a ${Math.floor(days / 30)} mois`;
22
+ }
23
+ const CrmClient = () => {
24
+ const { t } = useTranslation();
25
+ const [clients, setClients] = useState([]);
26
+ const [loading, setLoading] = useState(true);
27
+ const [search, setSearch] = useState("");
28
+ const [selectedId, setSelectedId] = useState(null);
29
+ const [detail, setDetail] = useState(null);
30
+ const [detailLoading, setDetailLoading] = useState(false);
31
+ const [showMerge, setShowMerge] = useState(false);
32
+ const [mergeSearch, setMergeSearch] = useState("");
33
+ const [mergeResults, setMergeResults] = useState([]);
34
+ const [merging, setMerging] = useState(false);
35
+ const [mergeSuccess, setMergeSuccess] = useState("");
36
+ const fetchClients = useCallback(async () => {
37
+ try {
38
+ const params = new URLSearchParams({ limit: "100", sort: "company", depth: "0" });
39
+ if (search) params.set("where[company][like]", search);
40
+ const res = await fetch(`/api/support-clients?${params}`);
41
+ if (res.ok) {
42
+ const json = await res.json();
43
+ setClients(json.docs || []);
44
+ }
45
+ } catch {
46
+ }
47
+ setLoading(false);
48
+ }, [search]);
49
+ useEffect(() => {
50
+ const timeout = setTimeout(fetchClients, 300);
51
+ return () => clearTimeout(timeout);
52
+ }, [fetchClients]);
53
+ const fetchDetail = useCallback(async (clientId) => {
54
+ setDetailLoading(true);
55
+ try {
56
+ const [clientRes, ticketsRes, projectsRes, timeRes] = await Promise.all([
57
+ fetch(`/api/support-clients/${clientId}?depth=0`),
58
+ fetch(`/api/tickets?where[client][equals]=${clientId}&sort=-createdAt&limit=20&depth=0`),
59
+ fetch(`/api/projects?where[client][equals]=${clientId}&depth=0`),
60
+ fetch(`/api/time-entries?limit=0&depth=0`)
61
+ ]);
62
+ const client = clientRes.ok ? await clientRes.json() : null;
63
+ const tickets = ticketsRes.ok ? (await ticketsRes.json()).docs || [] : [];
64
+ const projects = projectsRes.ok ? (await projectsRes.json()).docs || [] : [];
65
+ const ticketIds = tickets.map((t2) => t2.id);
66
+ let totalTimeMinutes = 0;
67
+ if (timeRes.ok) {
68
+ const timeData = await timeRes.json();
69
+ totalTimeMinutes = timeData.docs.filter((e) => ticketIds.includes(e.ticket)).reduce((sum, e) => sum + (e.duration || 0), 0);
70
+ }
71
+ const openTickets = tickets.filter((t2) => ["open", "waiting_client"].includes(t2.status)).length;
72
+ const resolvedTickets = tickets.filter((t2) => t2.status === "resolved").length;
73
+ setDetail({ client, tickets, projects, stats: { totalTickets: tickets.length, openTickets, resolvedTickets, totalTimeMinutes, lastActivity: tickets.length > 0 ? tickets[0].createdAt : null } });
74
+ } catch {
75
+ setDetail(null);
76
+ }
77
+ setDetailLoading(false);
78
+ }, []);
79
+ const selectClient = (id) => {
80
+ setSelectedId(id);
81
+ fetchDetail(id);
82
+ setShowMerge(false);
83
+ setMergeSuccess("");
84
+ };
85
+ useEffect(() => {
86
+ if (!mergeSearch || mergeSearch.length < 2) {
87
+ setMergeResults([]);
88
+ return;
89
+ }
90
+ const timer = setTimeout(async () => {
91
+ try {
92
+ const res = await fetch(`/api/support-clients?where[or][0][company][like]=${encodeURIComponent(mergeSearch)}&where[or][1][email][like]=${encodeURIComponent(mergeSearch)}&limit=10&depth=0`);
93
+ if (res.ok) {
94
+ const json = await res.json();
95
+ setMergeResults((json.docs || []).filter((c) => c.id !== selectedId));
96
+ }
97
+ } catch {
98
+ }
99
+ }, 300);
100
+ return () => clearTimeout(timer);
101
+ }, [mergeSearch, selectedId]);
102
+ const handleMerge = async (targetId) => {
103
+ if (!selectedId || !detail) return;
104
+ if (!confirm(`Fusionner ce client dans un autre ? Cette action est irreversible.`)) return;
105
+ setMerging(true);
106
+ try {
107
+ const res = await fetch("/api/support/merge-clients", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ sourceId: selectedId, targetId }) });
108
+ if (res.ok) {
109
+ const data = await res.json();
110
+ setMergeSuccess(data.message);
111
+ setShowMerge(false);
112
+ setSelectedId(targetId);
113
+ fetchDetail(targetId);
114
+ fetchClients();
115
+ } else {
116
+ const err = await res.json().catch(() => ({ error: "Erreur inconnue" }));
117
+ alert(`Erreur : ${err.error}`);
118
+ }
119
+ } catch {
120
+ alert("Erreur reseau");
121
+ }
122
+ setMerging(false);
123
+ };
124
+ const S = {
125
+ page: { padding: "20px 30px", maxWidth: 1200, margin: "0 auto" },
126
+ grid: { display: "grid", gridTemplateColumns: "300px 1fr", gap: 20 },
127
+ sidebar: { borderRight: "1px solid var(--theme-elevation-200)", paddingRight: 16 },
128
+ searchInput: { width: "100%", padding: "8px 12px", borderRadius: 8, border: "1px solid var(--theme-elevation-200)", fontSize: 13, marginBottom: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" },
129
+ clientItem: { padding: "10px 12px", borderRadius: 8, cursor: "pointer", marginBottom: 4, border: "1px solid transparent" },
130
+ clientItemActive: { background: "var(--theme-elevation-50)", borderColor: "var(--theme-elevation-200)" },
131
+ statsGrid: { display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 8, marginBottom: 16 },
132
+ statCard: { padding: "10px 12px", borderRadius: 8, border: "1px solid var(--theme-elevation-150)", textAlign: "center" },
133
+ table: { width: "100%", borderCollapse: "collapse", fontSize: 13 },
134
+ th: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" },
135
+ td: { padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-100)" },
136
+ badge: { padding: "2px 6px", borderRadius: 4, fontSize: 10, fontWeight: 600 }
137
+ };
138
+ return /* @__PURE__ */ jsxs("div", { style: S.page, children: [
139
+ /* @__PURE__ */ jsxs("div", { style: { marginBottom: 20 }, children: [
140
+ /* @__PURE__ */ jsx("h1", { style: { fontSize: 22, fontWeight: 700, margin: 0, color: "var(--theme-text)" }, children: t("crm.title") }),
141
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 13, color: "var(--theme-elevation-500)", marginTop: 4 }, children: t("crm.subtitle") })
142
+ ] }),
143
+ /* @__PURE__ */ jsxs("div", { style: S.grid, children: [
144
+ /* @__PURE__ */ jsxs("div", { style: S.sidebar, children: [
145
+ /* @__PURE__ */ jsx("input", { type: "text", placeholder: t("crm.searchPlaceholder"), value: search, onChange: (e) => setSearch(e.target.value), style: S.searchInput }),
146
+ /* @__PURE__ */ jsx("div", { children: loading ? /* @__PURE__ */ jsx("div", { style: { padding: 20, textAlign: "center", color: "#94a3b8" }, children: t("common.loading") }) : clients.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: 20, textAlign: "center", color: "#94a3b8" }, children: t("crm.noClientFound") }) : clients.map((c) => /* @__PURE__ */ jsxs("div", { onClick: () => selectClient(c.id), style: { ...S.clientItem, ...selectedId === c.id ? S.clientItemActive : {} }, children: [
147
+ /* @__PURE__ */ jsx("div", { style: { fontWeight: 600, fontSize: 13 }, children: c.company }),
148
+ /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "var(--theme-elevation-500)" }, children: [
149
+ c.firstName,
150
+ " ",
151
+ c.lastName
152
+ ] }),
153
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-400)" }, children: c.email })
154
+ ] }, c.id)) })
155
+ ] }),
156
+ /* @__PURE__ */ jsx("div", { children: !selectedId ? /* @__PURE__ */ jsx("div", { style: { padding: 60, textAlign: "center", color: "#94a3b8" }, children: t("crm.selectClient") }) : detailLoading ? /* @__PURE__ */ jsx("div", { style: { padding: 60, textAlign: "center", color: "#94a3b8" }, children: t("common.loading") }) : detail ? /* @__PURE__ */ jsxs("div", { children: [
157
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: 16 }, children: [
158
+ /* @__PURE__ */ jsxs("div", { children: [
159
+ /* @__PURE__ */ jsx("h2", { style: { fontSize: 20, fontWeight: 700, margin: 0 }, children: detail.client.company }),
160
+ /* @__PURE__ */ jsxs("div", { style: { fontSize: 13, color: "var(--theme-elevation-500)" }, children: [
161
+ detail.client.firstName,
162
+ " ",
163
+ detail.client.lastName
164
+ ] }),
165
+ /* @__PURE__ */ jsxs("div", { style: { fontSize: 12, color: "var(--theme-elevation-400)" }, children: [
166
+ detail.client.email,
167
+ " ",
168
+ detail.client.phone && `-- ${detail.client.phone}`
169
+ ] }),
170
+ detail.client.notes && /* @__PURE__ */ jsx("div", { style: { fontSize: 12, color: "var(--theme-elevation-500)", marginTop: 4, fontStyle: "italic" }, children: detail.client.notes })
171
+ ] }),
172
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8 }, children: [
173
+ /* @__PURE__ */ jsx("a", { href: `/admin/collections/support-clients/${detail.client.id}`, style: { padding: "6px 14px", borderRadius: 6, background: "#2563eb", color: "#fff", fontSize: 12, fontWeight: 600, textDecoration: "none" }, children: t("crm.editButton") }),
174
+ /* @__PURE__ */ jsx("button", { onClick: () => {
175
+ setShowMerge(!showMerge);
176
+ setMergeSearch("");
177
+ setMergeResults([]);
178
+ }, style: { padding: "6px 14px", borderRadius: 6, border: "1px solid #d97706", background: "none", color: "#d97706", fontSize: 12, fontWeight: 600, cursor: "pointer" }, children: t("crm.mergeButton") })
179
+ ] })
180
+ ] }),
181
+ mergeSuccess && /* @__PURE__ */ jsx("div", { style: { padding: "8px 14px", borderRadius: 6, background: "#dcfce7", color: "#166534", fontSize: 13, marginBottom: 12 }, children: mergeSuccess }),
182
+ showMerge && /* @__PURE__ */ jsxs("div", { style: { padding: 16, borderRadius: 8, border: "1px solid #fde68a", background: "#fefce8", marginBottom: 16 }, children: [
183
+ /* @__PURE__ */ jsx("h4", { style: { margin: "0 0 8px", fontSize: 14 }, children: t("crm.mergeTitle") }),
184
+ /* @__PURE__ */ jsx("input", { type: "text", value: mergeSearch, onChange: (e) => setMergeSearch(e.target.value), placeholder: t("crm.mergeSearchPlaceholder"), style: S.searchInput }),
185
+ mergeResults.map((c) => /* @__PURE__ */ jsxs("button", { onClick: () => handleMerge(c.id), disabled: merging, style: { display: "block", width: "100%", padding: "8px 12px", border: "1px solid var(--theme-elevation-200)", borderRadius: 6, background: "var(--theme-elevation-0)", cursor: "pointer", textAlign: "left", marginBottom: 4, fontSize: 13 }, children: [
186
+ /* @__PURE__ */ jsx("strong", { children: c.company }),
187
+ " -- ",
188
+ c.firstName,
189
+ " ",
190
+ c.lastName,
191
+ " ",
192
+ /* @__PURE__ */ jsx("span", { style: { color: "var(--theme-elevation-400)", fontSize: 11 }, children: c.email })
193
+ ] }, c.id))
194
+ ] }),
195
+ /* @__PURE__ */ jsx("div", { style: S.statsGrid, children: [
196
+ { label: t("crm.stats.totalTickets"), value: String(detail.stats.totalTickets) },
197
+ { label: t("crm.stats.openTickets"), value: String(detail.stats.openTickets) },
198
+ { label: t("crm.stats.resolvedTickets"), value: String(detail.stats.resolvedTickets) },
199
+ { label: t("crm.stats.timeSpent"), value: formatDuration(detail.stats.totalTimeMinutes) },
200
+ { label: t("crm.stats.lastActivity"), value: detail.stats.lastActivity ? timeAgo(detail.stats.lastActivity) : "-" }
201
+ ].map((stat) => /* @__PURE__ */ jsxs("div", { style: S.statCard, children: [
202
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 11, color: "var(--theme-elevation-500)", marginBottom: 2 }, children: stat.label }),
203
+ /* @__PURE__ */ jsx("div", { style: { fontSize: 18, fontWeight: 700, color: "var(--theme-text)" }, children: stat.value })
204
+ ] }, stat.label)) }),
205
+ /* @__PURE__ */ jsxs("div", { style: { padding: 16, borderRadius: 10, border: "1px solid var(--theme-elevation-150)", marginBottom: 16 }, children: [
206
+ /* @__PURE__ */ jsxs("h3", { style: { fontSize: 14, fontWeight: 700, margin: "0 0 8px" }, children: [
207
+ t("crm.sections.tickets"),
208
+ " (",
209
+ detail.tickets.length,
210
+ ")"
211
+ ] }),
212
+ detail.tickets.length === 0 ? /* @__PURE__ */ jsx("div", { style: { color: "#94a3b8", fontSize: 13 }, children: t("crm.noTickets") }) : /* @__PURE__ */ jsxs("table", { style: S.table, children: [
213
+ /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
214
+ /* @__PURE__ */ jsx("th", { style: S.th, children: t("crm.tableHeaders.number") }),
215
+ /* @__PURE__ */ jsx("th", { style: S.th, children: t("crm.tableHeaders.subject") }),
216
+ /* @__PURE__ */ jsx("th", { style: S.th, children: t("crm.tableHeaders.status") }),
217
+ /* @__PURE__ */ jsx("th", { style: S.th, children: t("crm.tableHeaders.date") })
218
+ ] }) }),
219
+ /* @__PURE__ */ jsx("tbody", { children: detail.tickets.map((tk) => /* @__PURE__ */ jsxs("tr", { children: [
220
+ /* @__PURE__ */ jsx("td", { style: S.td, children: /* @__PURE__ */ jsx("a", { href: `/admin/support/ticket?id=${tk.id}`, style: { color: "#2563eb", fontWeight: 600, textDecoration: "none" }, children: tk.ticketNumber }) }),
221
+ /* @__PURE__ */ jsx("td", { style: S.td, children: tk.subject }),
222
+ /* @__PURE__ */ jsx("td", { style: S.td, children: /* @__PURE__ */ jsx("span", { style: { ...S.badge, background: `${statusColors[tk.status] || "#94a3b8"}20`, color: statusColors[tk.status] || "#94a3b8" }, children: statusLabelKeys[tk.status] ? t(statusLabelKeys[tk.status]) : tk.status }) }),
223
+ /* @__PURE__ */ jsx("td", { style: { ...S.td, fontSize: 12, color: "var(--theme-elevation-400)" }, children: timeAgo(tk.createdAt) })
224
+ ] }, tk.id)) })
225
+ ] })
226
+ ] })
227
+ ] }) : null })
228
+ ] })
229
+ ] });
230
+ };
231
+
232
+ export { CrmClient };
@@ -0,0 +1,29 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { DefaultTemplate } from '@payloadcms/next/templates';
3
+ import { redirect } from 'next/navigation';
4
+ import { AdminErrorBoundary } from '../shared/ErrorBoundary';
5
+ import { CrmClient } from './client';
6
+
7
+ const CrmView = ({ initPageResult }) => {
8
+ const { req, visibleEntities } = initPageResult;
9
+ if (!req.user) {
10
+ redirect("/admin/login");
11
+ }
12
+ return /* @__PURE__ */ jsx(
13
+ DefaultTemplate,
14
+ {
15
+ i18n: req.i18n,
16
+ locale: initPageResult.locale,
17
+ params: {},
18
+ payload: req.payload,
19
+ permissions: initPageResult.permissions,
20
+ searchParams: {},
21
+ user: req.user,
22
+ visibleEntities,
23
+ children: /* @__PURE__ */ jsx(AdminErrorBoundary, { viewName: "CrmView", children: /* @__PURE__ */ jsx(CrmClient, {}) })
24
+ }
25
+ );
26
+ };
27
+ var CrmView_default = CrmView;
28
+
29
+ export { CrmView, CrmView_default as default };
@@ -0,0 +1,154 @@
1
+ "use client";
2
+ import { jsxs, jsx } from 'react/jsx-runtime';
3
+ import React, { useState, useCallback, useEffect } from 'react';
4
+ import { useTranslation } from '../../components/TicketConversation/hooks/useTranslation';
5
+
6
+ const STATUS_CFG = {
7
+ success: { key: "emailTracking.status.success", bg: "#dcfce7", color: "#16a34a" },
8
+ error: { key: "emailTracking.status.error", bg: "#fef2f2", color: "#dc2626" },
9
+ ignored: { key: "emailTracking.status.ignored", bg: "#f3f4f6", color: "#6b7280" }
10
+ };
11
+ function fmtDate(d) {
12
+ return new Date(d).toLocaleDateString("fr-FR", { day: "2-digit", month: "2-digit", year: "2-digit", hour: "2-digit", minute: "2-digit" });
13
+ }
14
+ const EmailTrackingClient = () => {
15
+ const { t } = useTranslation();
16
+ const [logs, setLogs] = useState([]);
17
+ const [stats, setStats] = useState(null);
18
+ const [loading, setLoading] = useState(true);
19
+ const [tab, setTab] = useState("all");
20
+ const [dateRange, setDateRange] = useState(7);
21
+ const [search, setSearch] = useState("");
22
+ const [expandedRow, setExpandedRow] = useState(null);
23
+ const [page, setPage] = useState(1);
24
+ const [hasMore, setHasMore] = useState(false);
25
+ const [totalDocs, setTotalDocs] = useState(0);
26
+ const fetchStats = useCallback(async () => {
27
+ try {
28
+ const r = await fetch(`/api/support/email-stats?days=${dateRange}`);
29
+ if (r.ok) setStats(await r.json());
30
+ } catch (err) {
31
+ console.warn("[support] fetchStats error:", err);
32
+ }
33
+ }, [dateRange]);
34
+ const fetchLogs = useCallback(async () => {
35
+ const cutoff = new Date(Date.now() - dateRange * 864e5).toISOString();
36
+ const where = [`where[createdAt][greater_than]=${cutoff}`];
37
+ if (tab !== "all") where.push(`where[status][equals]=${tab}`);
38
+ if (search.trim()) {
39
+ where.push(`where[or][0][recipientEmail][contains]=${encodeURIComponent(search)}`, `where[or][1][subject][contains]=${encodeURIComponent(search)}`);
40
+ }
41
+ try {
42
+ const r = await fetch(`/api/email-logs?${where.join("&")}&sort=-createdAt&limit=30&page=${page}&depth=0`);
43
+ if (r.ok) {
44
+ const d = await r.json();
45
+ setLogs(d.docs);
46
+ setHasMore(d.hasNextPage);
47
+ setTotalDocs(d.totalDocs);
48
+ }
49
+ } catch (err) {
50
+ console.warn("[support] fetchLogs error:", err);
51
+ }
52
+ setLoading(false);
53
+ }, [dateRange, tab, search, page]);
54
+ useEffect(() => {
55
+ setLoading(true);
56
+ setPage(1);
57
+ }, [dateRange, tab, search]);
58
+ useEffect(() => {
59
+ fetchStats();
60
+ fetchLogs();
61
+ }, [fetchStats, fetchLogs]);
62
+ const S = {
63
+ page: { padding: "20px 30px", maxWidth: 1100, margin: "0 auto" },
64
+ statGrid: { display: "grid", gridTemplateColumns: "repeat(4, 1fr)", gap: 12, marginBottom: 20 },
65
+ statCard: { padding: "12px 16px", borderRadius: 8, border: "1px solid var(--theme-elevation-150)" },
66
+ statLabel: { fontSize: 11, color: "var(--theme-elevation-500)" },
67
+ statValue: { fontSize: 22, fontWeight: 700, color: "var(--theme-text)" },
68
+ filters: { display: "flex", gap: 12, alignItems: "center", marginBottom: 16, flexWrap: "wrap" },
69
+ tab: { padding: "4px 10px", borderRadius: 6, border: "none", background: "none", cursor: "pointer", fontSize: 12, color: "var(--theme-elevation-500)" },
70
+ tabActive: { background: "var(--theme-elevation-100)", fontWeight: 700, color: "var(--theme-text)" },
71
+ dateBtn: { padding: "4px 8px", borderRadius: 4, border: "1px solid var(--theme-elevation-200)", fontSize: 11, cursor: "pointer", background: "var(--theme-elevation-0)", color: "var(--theme-text)" },
72
+ dateBtnActive: { background: "#2563eb", color: "#fff", borderColor: "#2563eb" },
73
+ table: { width: "100%", borderCollapse: "collapse", fontSize: 13 },
74
+ th: { textAlign: "left", padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-200)", fontSize: 11, color: "var(--theme-elevation-500)" },
75
+ td: { padding: "6px 8px", borderBottom: "1px solid var(--theme-elevation-100)" },
76
+ badge: { padding: "2px 6px", borderRadius: 4, fontSize: 11, fontWeight: 600 },
77
+ btn: { padding: "4px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 11, cursor: "pointer", background: "var(--theme-elevation-0)", color: "var(--theme-text)" }
78
+ };
79
+ return /* @__PURE__ */ jsxs("div", { style: S.page, children: [
80
+ /* @__PURE__ */ jsx("h1", { style: { fontSize: 22, fontWeight: 700, marginBottom: 16, color: "var(--theme-text)" }, children: t("emailTracking.title") }),
81
+ /* @__PURE__ */ jsxs("div", { style: S.statGrid, children: [
82
+ /* @__PURE__ */ jsxs("div", { style: S.statCard, children: [
83
+ /* @__PURE__ */ jsx("div", { style: S.statLabel, children: t("emailTracking.stats.emailsSent") }),
84
+ /* @__PURE__ */ jsx("div", { style: S.statValue, children: stats?.total ?? "--" })
85
+ ] }),
86
+ /* @__PURE__ */ jsxs("div", { style: S.statCard, children: [
87
+ /* @__PURE__ */ jsx("div", { style: S.statLabel, children: t("emailTracking.stats.successRate") }),
88
+ /* @__PURE__ */ jsx("div", { style: S.statValue, children: stats ? `${stats.successRate}%` : "--" })
89
+ ] }),
90
+ /* @__PURE__ */ jsxs("div", { style: S.statCard, children: [
91
+ /* @__PURE__ */ jsx("div", { style: S.statLabel, children: t("emailTracking.stats.errors") }),
92
+ /* @__PURE__ */ jsx("div", { style: S.statValue, children: stats?.errors ?? "--" })
93
+ ] }),
94
+ /* @__PURE__ */ jsxs("div", { style: S.statCard, children: [
95
+ /* @__PURE__ */ jsx("div", { style: S.statLabel, children: t("emailTracking.stats.avgTime") }),
96
+ /* @__PURE__ */ jsx("div", { style: S.statValue, children: stats ? `${stats.avgProcessingTime}ms` : "--" })
97
+ ] })
98
+ ] }),
99
+ /* @__PURE__ */ jsxs("div", { style: S.filters, children: [
100
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: ["all", "success", "error", "ignored"].map((st) => /* @__PURE__ */ jsx("button", { style: { ...S.tab, ...tab === st ? S.tabActive : {} }, onClick: () => setTab(st), children: t(`emailTracking.tabs.${st === "error" ? "errors" : st}`) }, st)) }),
101
+ /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 4 }, children: [7, 30, 90].map((v) => /* @__PURE__ */ jsxs("button", { style: { ...S.dateBtn, ...dateRange === v ? S.dateBtnActive : {} }, onClick: () => setDateRange(v), children: [
102
+ v,
103
+ "j"
104
+ ] }, v)) }),
105
+ /* @__PURE__ */ jsx("input", { type: "text", placeholder: t("emailTracking.searchPlaceholder"), value: search, onChange: (e) => setSearch(e.target.value), style: { padding: "6px 10px", borderRadius: 6, border: "1px solid var(--theme-elevation-200)", fontSize: 12, color: "var(--theme-text)", background: "var(--theme-elevation-0)" } })
106
+ ] }),
107
+ loading ? /* @__PURE__ */ jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t("common.loading") }) : logs.length === 0 ? /* @__PURE__ */ jsx("div", { style: { padding: 40, textAlign: "center", color: "#94a3b8" }, children: t("emailTracking.noLogs") }) : /* @__PURE__ */ jsxs("table", { style: S.table, children: [
108
+ /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
109
+ /* @__PURE__ */ jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.date") }),
110
+ /* @__PURE__ */ jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.recipient") }),
111
+ /* @__PURE__ */ jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.subject") }),
112
+ /* @__PURE__ */ jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.ticket") }),
113
+ /* @__PURE__ */ jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.status") }),
114
+ /* @__PURE__ */ jsx("th", { style: S.th, children: t("emailTracking.tableHeaders.action") }),
115
+ /* @__PURE__ */ jsx("th", { style: { ...S.th, textAlign: "right" }, children: t("emailTracking.tableHeaders.time") })
116
+ ] }) }),
117
+ /* @__PURE__ */ jsx("tbody", { children: logs.map((log) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
118
+ /* @__PURE__ */ jsxs("tr", { onClick: () => log.status === "error" && log.errorMessage ? setExpandedRow(expandedRow === log.id ? null : log.id) : null, style: { cursor: log.status === "error" ? "pointer" : "default" }, children: [
119
+ /* @__PURE__ */ jsx("td", { style: { ...S.td, fontSize: 12, whiteSpace: "nowrap" }, children: fmtDate(log.createdAt) }),
120
+ /* @__PURE__ */ jsx("td", { style: { ...S.td, maxWidth: 200, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: log.recipientEmail || "--" }),
121
+ /* @__PURE__ */ jsx("td", { style: { ...S.td, maxWidth: 250, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: log.subject || "--" }),
122
+ /* @__PURE__ */ jsx("td", { style: S.td, children: log.ticketNumber || "--" }),
123
+ /* @__PURE__ */ jsx("td", { style: S.td, children: /* @__PURE__ */ jsx("span", { style: { ...S.badge, background: STATUS_CFG[log.status]?.bg, color: STATUS_CFG[log.status]?.color }, children: STATUS_CFG[log.status]?.key ? t(STATUS_CFG[log.status].key) : log.status }) }),
124
+ /* @__PURE__ */ jsx("td", { style: { ...S.td, fontSize: 12 }, children: log.action || "--" }),
125
+ /* @__PURE__ */ jsx("td", { style: { ...S.td, textAlign: "right" }, children: log.processingTimeMs != null ? /* @__PURE__ */ jsxs("span", { style: { fontFamily: "monospace", fontSize: 12, color: log.processingTimeMs > 2e3 ? "#dc2626" : "#16a34a" }, children: [
126
+ log.processingTimeMs,
127
+ "ms"
128
+ ] }) : "--" })
129
+ ] }),
130
+ expandedRow === log.id && log.errorMessage && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: 7, children: /* @__PURE__ */ jsxs("div", { style: { padding: "8px 12px", background: "#fef2f2", borderRadius: 6, fontSize: 12, color: "#dc2626" }, children: [
131
+ "Erreur",
132
+ log.httpStatus ? ` (HTTP ${log.httpStatus})` : "",
133
+ ": ",
134
+ log.errorMessage
135
+ ] }) }) })
136
+ ] }, log.id)) })
137
+ ] }),
138
+ totalDocs > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "center", gap: 12, marginTop: 16, alignItems: "center" }, children: [
139
+ /* @__PURE__ */ jsx("button", { style: S.btn, onClick: () => setPage((p) => Math.max(1, p - 1)), disabled: page <= 1, children: t("common.previous") }),
140
+ /* @__PURE__ */ jsxs("span", { style: { fontSize: 12, color: "var(--theme-elevation-500)" }, children: [
141
+ t("common.page"),
142
+ " ",
143
+ page,
144
+ " -- ",
145
+ totalDocs,
146
+ " ",
147
+ t("common.results")
148
+ ] }),
149
+ /* @__PURE__ */ jsx("button", { style: S.btn, onClick: () => setPage((p) => p + 1), disabled: !hasMore, children: t("common.next") })
150
+ ] })
151
+ ] });
152
+ };
153
+
154
+ export { EmailTrackingClient };
@@ -0,0 +1,29 @@
1
+ import { jsx } from 'react/jsx-runtime';
2
+ import { DefaultTemplate } from '@payloadcms/next/templates';
3
+ import { redirect } from 'next/navigation';
4
+ import { AdminErrorBoundary } from '../shared/ErrorBoundary';
5
+ import { EmailTrackingClient } from './client';
6
+
7
+ const EmailTrackingView = ({ initPageResult }) => {
8
+ const { req, visibleEntities } = initPageResult;
9
+ if (!req.user) {
10
+ redirect("/admin/login");
11
+ }
12
+ return /* @__PURE__ */ jsx(
13
+ DefaultTemplate,
14
+ {
15
+ i18n: req.i18n,
16
+ locale: initPageResult.locale,
17
+ params: {},
18
+ payload: req.payload,
19
+ permissions: initPageResult.permissions,
20
+ searchParams: {},
21
+ user: req.user,
22
+ visibleEntities,
23
+ children: /* @__PURE__ */ jsx(AdminErrorBoundary, { viewName: "EmailTrackingView", children: /* @__PURE__ */ jsx(EmailTrackingClient, {}) })
24
+ }
25
+ );
26
+ };
27
+ var EmailTrackingView_default = EmailTrackingView;
28
+
29
+ export { EmailTrackingView, EmailTrackingView_default as default };