@burdenoff/microfe-bigconsole 2026.805.2 → 2026.805.3

package/dist/bigconsole/components/widgets/event-logs/EventLogViewer.js

@@ -1,8 +1,9 @@
 import e, { getEventStatusColor as t, getEventStatusIcon as n, getEventStatusLabel as r } from "../../../hooks/useEventLogs.js";
 import { memo as i, useCallback as a, useState as o } from "react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useI18n as s } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/bigconsole/components/widgets/event-logs/EventLogViewer.tsx
-var u = {
+var d = {
 	container: {
 		padding: "16px",
 		backgroundColor: "var(--color-bg-surface)",
@@ -130,28 +131,28 @@ var u = {
 		fontSize: "14px"
 	}
 };
-function d(e) {
-	let t = new Date(e), n = (/* @__PURE__ */ new Date()).getTime() - t.getTime(), r = Math.floor(n / 6e4), i = Math.floor(r / 60), a = Math.floor(i / 24);
-	return r < 1 ? "Just now" : r < 60 ? `${r}m ago` : i < 24 ? `${i}h ago` : a < 7 ? `${a}d ago` : t.toLocaleDateString();
+function f(e, t) {
+	let n = new Date(e), r = (/* @__PURE__ */ new Date()).getTime() - n.getTime(), i = Math.floor(r / 6e4), a = Math.floor(i / 60), o = Math.floor(a / 24);
+	return i < 1 ? t("bigconsole.widget.eventLog.time.justNow", "Just now") : i < 60 ? t("bigconsole.widget.eventLog.time.minutesAgo", "{{count}}m ago", { count: i }) : a < 24 ? t("bigconsole.widget.eventLog.time.hoursAgo", "{{count}}h ago", { count: a }) : o < 7 ? t("bigconsole.widget.eventLog.time.daysAgo", "{{count}}d ago", { count: o }) : n.toLocaleDateString();
 }
-var f = i(function({ log: e, onRetry: i, retrying: a, expanded: o, onToggleExpand: f }) {
-	let p = e.status === "FAILED";
-	return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ l("tr", { children: [
-		/* @__PURE__ */ c("td", {
-			style: u.td,
-			children: /* @__PURE__ */ c("button", {
-				onClick: f,
-				style: u.expandButton,
+var p = i(function({ log: e, onRetry: i, retrying: a, expanded: o, onToggleExpand: p }) {
+	let { t: m } = s(), h = e.status === "FAILED";
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("tr", { children: [
+		/* @__PURE__ */ l("td", {
+			style: d.td,
+			children: /* @__PURE__ */ l("button", {
+				onClick: p,
+				style: d.expandButton,
 				children: o ? "▼" : "▶"
 			})
 		}),
-		/* @__PURE__ */ c("td", {
-			style: u.td,
-			children: /* @__PURE__ */ l("div", {
-				style: u.statusCell,
-				children: [/* @__PURE__ */ c("span", { children: n(e.status) }), /* @__PURE__ */ c("span", {
+		/* @__PURE__ */ l("td", {
+			style: d.td,
+			children: /* @__PURE__ */ u("div", {
+				style: d.statusCell,
+				children: [/* @__PURE__ */ l("span", { children: n(e.status) }), /* @__PURE__ */ l("span", {
 					style: {
-						...u.statusBadge,
+						...d.statusBadge,
 						backgroundColor: `${t(e.status)}20`,
 						color: t(e.status)
 					},
@@ -159,35 +160,35 @@ var f = i(function({ log: e, onRetry: i, retrying: a, expanded: o, onToggleExpan
 				})]
 			})
 		}),
-		/* @__PURE__ */ l("td", {
-			style: u.td,
-			children: [/* @__PURE__ */ c("div", {
-				style: u.eventName,
+		/* @__PURE__ */ u("td", {
+			style: d.td,
+			children: [/* @__PURE__ */ l("div", {
+				style: d.eventName,
 				children: e.eventName
 			}), e.actionName && /* @__PURE__ */ l("div", {
 				style: {
 					fontSize: "11px",
 					color: "var(--color-text-placeholder)"
 				},
-				children: ["Action: ", e.actionName]
+				children: m("bigconsole.widget.eventLog.actionLabel", "Action: {{action}}", { action: e.actionName ?? "" })
 			})]
 		}),
-		/* @__PURE__ */ c("td", {
-			style: u.td,
-			children: /* @__PURE__ */ c("div", {
-				style: u.timeAgo,
-				children: d(e.createdAt)
+		/* @__PURE__ */ l("td", {
+			style: d.td,
+			children: /* @__PURE__ */ l("div", {
+				style: d.timeAgo,
+				children: f(e.createdAt, m)
 			})
 		}),
-		/* @__PURE__ */ c("td", {
-			style: u.td,
-			children: e.webhookUrl ? /* @__PURE__ */ c("span", {
+		/* @__PURE__ */ l("td", {
+			style: d.td,
+			children: e.webhookUrl ? /* @__PURE__ */ l("span", {
 				style: {
 					fontSize: "12px",
 					color: "var(--color-text-muted)"
 				},
 				children: new URL(e.webhookUrl).hostname
-			}) : /* @__PURE__ */ c("span", {
+			}) : /* @__PURE__ */ l("span", {
 				style: {
 					fontSize: "12px",
 					color: "var(--color-text-placeholder)"
@@ -195,183 +196,183 @@ var f = i(function({ log: e, onRetry: i, retrying: a, expanded: o, onToggleExpan
 				children: "—"
 			})
 		}),
-		/* @__PURE__ */ c("td", {
-			style: u.td,
-			children: p && /* @__PURE__ */ c("button", {
+		/* @__PURE__ */ l("td", {
+			style: d.td,
+			children: h && /* @__PURE__ */ l("button", {
 				onClick: i,
 				disabled: a,
-				style: u.retryButton,
-				children: a ? "..." : "🔄 Retry"
+				style: d.retryButton,
+				children: a ? "..." : `🔄 ${m("bigconsole.widget.eventLog.retry", "Retry")}`
 			})
 		})
-	] }), o && /* @__PURE__ */ c("tr", {
-		style: u.detailRow,
-		children: /* @__PURE__ */ c("td", {
+	] }), o && /* @__PURE__ */ l("tr", {
+		style: d.detailRow,
+		children: /* @__PURE__ */ l("td", {
 			colSpan: 6,
-			style: u.td,
-			children: /* @__PURE__ */ l("div", {
-				style: u.detailContent,
+			style: d.td,
+			children: /* @__PURE__ */ u("div", {
+				style: d.detailContent,
 				children: [
-					/* @__PURE__ */ c("strong", { children: "Payload:" }),
+					/* @__PURE__ */ l("strong", { children: m("bigconsole.widget.eventLog.payload", "Payload:") }),
 					"\n",
 					JSON.stringify(e.payload, null, 2),
-					e.errorMessage && /* @__PURE__ */ l(s, { children: [
+					e.errorMessage && /* @__PURE__ */ u(c, { children: [
 						"\n\n",
-						/* @__PURE__ */ c("strong", {
+						/* @__PURE__ */ l("strong", {
 							style: { color: "var(--color-status-error-text)" },
-							children: "Error:"
+							children: m("bigconsole.widget.eventLog.error", "Error:")
 						}),
 						"\n",
 						e.errorMessage
 					] }),
-					e.responseCode && /* @__PURE__ */ l(s, { children: [
+					e.responseCode && /* @__PURE__ */ u(c, { children: [
 						"\n\n",
-						/* @__PURE__ */ c("strong", { children: "Response Code:" }),
+						/* @__PURE__ */ l("strong", { children: m("bigconsole.widget.eventLog.responseCode", "Response Code:") }),
 						" ",
 						e.responseCode
 					] }),
 					"\n\n",
-					/* @__PURE__ */ c("strong", { children: "Attempts:" }),
+					/* @__PURE__ */ l("strong", { children: m("bigconsole.widget.eventLog.attempts", "Attempts:") }),
 					" ",
 					e.attempts
 				]
 			})
 		})
 	})] });
-}), p = i(function({ dashboardId: t, widgetId: n, maxHeight: r = "400px", onRetrySuccess: i }) {
-	let [d, p] = o(""), [m, h] = o(/* @__PURE__ */ new Set()), [g, _] = o(null), { logs: v, loading: y, totalCount: b, hasMore: x, loadMore: S, retryDelivery: C, refetch: w } = e({
+}), m = i(function({ dashboardId: t, widgetId: n, maxHeight: r = "400px", onRetrySuccess: i }) {
+	let { t: f } = s(), [m, h] = o(""), [g, _] = o(/* @__PURE__ */ new Set()), [v, y] = o(null), { logs: b, loading: x, totalCount: S, hasMore: C, loadMore: w, retryDelivery: T, refetch: E } = e({
 		dashboardId: t,
 		widgetId: n,
-		status: d || void 0
-	}), T = a(async (e) => {
-		_(e.id);
-		let t = await C(e.id);
-		_(null), t && i?.(t);
-	}, [C, i]), E = a((e) => {
-		h((t) => {
+		status: m || void 0
+	}), D = a(async (e) => {
+		y(e.id);
+		let t = await T(e.id);
+		y(null), t && i?.(t);
+	}, [T, i]), O = a((e) => {
+		_((t) => {
 			let n = new Set(t);
 			return n.has(e) ? n.delete(e) : n.add(e), n;
 		});
 	}, []);
-	return /* @__PURE__ */ l("div", {
-		style: u.container,
-		children: [/* @__PURE__ */ l("div", {
-			style: u.header,
-			children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("h3", {
-				style: u.title,
-				children: "Event History"
+	return /* @__PURE__ */ u("div", {
+		style: d.container,
+		children: [/* @__PURE__ */ u("div", {
+			style: d.header,
+			children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("h3", {
+				style: d.title,
+				children: f("bigconsole.widget.eventLog.title", "Event History")
 			}), /* @__PURE__ */ l("span", {
-				style: u.totalCount,
-				children: [b, " events"]
-			})] }), /* @__PURE__ */ l("div", {
-				style: u.headerActions,
-				children: [/* @__PURE__ */ l("select", {
-					value: d,
-					onChange: (e) => p(e.target.value),
-					style: u.filterSelect,
+				style: d.totalCount,
+				children: f("bigconsole.widget.eventLog.eventCount", "{{count}} events", { count: S })
+			})] }), /* @__PURE__ */ u("div", {
+				style: d.headerActions,
+				children: [/* @__PURE__ */ u("select", {
+					value: m,
+					onChange: (e) => h(e.target.value),
+					style: d.filterSelect,
 					children: [
-						/* @__PURE__ */ c("option", {
+						/* @__PURE__ */ l("option", {
 							value: "",
-							children: "All Status"
+							children: f("bigconsole.widget.eventLog.filter.all", "All Status")
 						}),
-						/* @__PURE__ */ c("option", {
+						/* @__PURE__ */ l("option", {
 							value: "DELIVERED",
-							children: "Delivered"
+							children: f("bigconsole.widget.eventLog.filter.delivered", "Delivered")
 						}),
-						/* @__PURE__ */ c("option", {
+						/* @__PURE__ */ l("option", {
 							value: "FAILED",
-							children: "Failed"
+							children: f("bigconsole.widget.eventLog.filter.failed", "Failed")
 						}),
-						/* @__PURE__ */ c("option", {
+						/* @__PURE__ */ l("option", {
 							value: "PENDING",
-							children: "Pending"
+							children: f("bigconsole.widget.eventLog.filter.pending", "Pending")
 						}),
-						/* @__PURE__ */ c("option", {
+						/* @__PURE__ */ l("option", {
 							value: "PROCESSING",
-							children: "Processing"
+							children: f("bigconsole.widget.eventLog.filter.processing", "Processing")
 						}),
-						/* @__PURE__ */ c("option", {
+						/* @__PURE__ */ l("option", {
 							value: "RETRYING",
-							children: "Retrying"
+							children: f("bigconsole.widget.eventLog.filter.retrying", "Retrying")
 						}),
-						/* @__PURE__ */ c("option", {
+						/* @__PURE__ */ l("option", {
 							value: "IGNORED",
-							children: "Ignored"
+							children: f("bigconsole.widget.eventLog.filter.ignored", "Ignored")
 						})
 					]
-				}), /* @__PURE__ */ c("button", {
-					onClick: () => w(),
-					style: u.refreshButton,
-					children: "🔄 Refresh"
+				}), /* @__PURE__ */ u("button", {
+					onClick: () => E(),
+					style: d.refreshButton,
+					children: ["🔄 ", f("bigconsole.widget.eventLog.refresh", "Refresh")]
 				})]
 			})]
-		}), y && v.length === 0 ? /* @__PURE__ */ c("div", {
-			style: u.emptyState,
-			children: "Loading..."
-		}) : v.length === 0 ? /* @__PURE__ */ l("div", {
-			style: u.emptyState,
-			children: [/* @__PURE__ */ c("p", { children: "No events found" }), /* @__PURE__ */ c("p", {
+		}), x && b.length === 0 ? /* @__PURE__ */ l("div", {
+			style: d.emptyState,
+			children: f("bigconsole.widget.eventLog.loading", "Loading...")
+		}) : b.length === 0 ? /* @__PURE__ */ u("div", {
+			style: d.emptyState,
+			children: [/* @__PURE__ */ l("p", { children: f("bigconsole.widget.eventLog.emptyTitle", "No events found") }), /* @__PURE__ */ l("p", {
 				style: {
 					fontSize: "13px",
 					marginTop: "8px"
 				},
-				children: "Events will appear here when actions are triggered."
+				children: f("bigconsole.widget.eventLog.emptyHint", "Events will appear here when actions are triggered.")
 			})]
-		}) : /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
+		}) : /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
 			style: {
-				...u.tableContainer,
+				...d.tableContainer,
 				maxHeight: r,
 				overflowY: "auto"
 			},
-			children: /* @__PURE__ */ l("table", {
-				style: u.table,
-				children: [/* @__PURE__ */ c("thead", {
-					style: u.tableHeader,
-					children: /* @__PURE__ */ l("tr", { children: [
-						/* @__PURE__ */ c("th", { style: {
-							...u.th,
+			children: /* @__PURE__ */ u("table", {
+				style: d.table,
+				children: [/* @__PURE__ */ l("thead", {
+					style: d.tableHeader,
+					children: /* @__PURE__ */ u("tr", { children: [
+						/* @__PURE__ */ l("th", { style: {
+							...d.th,
 							width: "40px"
 						} }),
-						/* @__PURE__ */ c("th", {
-							style: u.th,
-							children: "Status"
+						/* @__PURE__ */ l("th", {
+							style: d.th,
+							children: f("bigconsole.widget.eventLog.column.status", "Status")
 						}),
-						/* @__PURE__ */ c("th", {
-							style: u.th,
-							children: "Event"
+						/* @__PURE__ */ l("th", {
+							style: d.th,
+							children: f("bigconsole.widget.eventLog.column.event", "Event")
 						}),
-						/* @__PURE__ */ c("th", {
-							style: u.th,
-							children: "Time"
+						/* @__PURE__ */ l("th", {
+							style: d.th,
+							children: f("bigconsole.widget.eventLog.column.time", "Time")
 						}),
-						/* @__PURE__ */ c("th", {
-							style: u.th,
-							children: "Webhook"
+						/* @__PURE__ */ l("th", {
+							style: d.th,
+							children: f("bigconsole.widget.eventLog.column.webhook", "Webhook")
 						}),
-						/* @__PURE__ */ c("th", {
+						/* @__PURE__ */ l("th", {
 							style: {
-								...u.th,
+								...d.th,
 								width: "80px"
 							},
-							children: "Action"
+							children: f("bigconsole.widget.eventLog.column.action", "Action")
 						})
 					] })
-				}), /* @__PURE__ */ c("tbody", { children: v.map((e) => /* @__PURE__ */ c(f, {
+				}), /* @__PURE__ */ l("tbody", { children: b.map((e) => /* @__PURE__ */ l(p, {
 					log: e,
-					onRetry: () => T(e),
-					retrying: g === e.id,
-					expanded: m.has(e.id),
-					onToggleExpand: () => E(e.id)
+					onRetry: () => D(e),
+					retrying: v === e.id,
+					expanded: g.has(e.id),
+					onToggleExpand: () => O(e.id)
 				}, e.id)) })]
 			})
-		}), x && /* @__PURE__ */ c("button", {
-			onClick: S,
-			style: u.loadMoreButton,
-			children: "Load More"
+		}), C && /* @__PURE__ */ l("button", {
+			onClick: w,
+			style: d.loadMoreButton,
+			children: f("bigconsole.widget.eventLog.loadMore", "Load More")
 		})] })]
 	});
 });
 //#endregion
-export { p as default };
+export { m as default };
 
 //# sourceMappingURL=EventLogViewer.js.map

package/dist/bigconsole/components/widgets/event-logs/EventLogViewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"EventLogViewer.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/event-logs/EventLogViewer.tsx"],"sourcesContent":["/**\n * EventLogViewer Component (v2.0)\n *\n * Component for viewing event history and managing failed deliveries.\n * Shows event status, allows filtering, and supports retry functionality.\n */\n\nimport React, { memo, useState, useCallback } from 'react';\nimport {\n  useEventLogs,\n  getEventStatusColor,\n  getEventStatusLabel,\n  getEventStatusIcon,\n  type EventStatus,\n  type EventLog,\n} from '../../../hooks/useEventLogs';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface EventLogViewerProps {\n  /** Dashboard ID to filter logs */\n  dashboardId?: string;\n  /** Widget ID to filter logs */\n  widgetId?: string;\n  /** Maximum height of the viewer */\n  maxHeight?: string;\n  /** Callback when retry is successful */\n  onRetrySuccess?: (eventLog: EventLog) => void;\n}\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst styles = {\n  container: {\n    padding: '16px',\n    backgroundColor: 'var(--color-bg-surface)',\n    borderRadius: '8px',\n  } as React.CSSProperties,\n  header: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    marginBottom: '16px',\n  } as React.CSSProperties,\n  title: {\n    fontSize: '16px',\n    fontWeight: 600,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  headerActions: {\n    display: 'flex',\n    gap: '8px',\n    alignItems: 'center',\n  } as React.CSSProperties,\n  filterSelect: {\n    padding: '6px 12px',\n    fontSize: '13px',\n    border: '1px solid var(--color-border)',\n    borderRadius: '6px',\n    backgroundColor: 'var(--color-bg-surface)',\n  } as React.CSSProperties,\n  refreshButton: {\n    padding: '6px 12px',\n    fontSize: '13px',\n    backgroundColor: 'var(--color-bg-muted)',\n    border: 'none',\n    borderRadius: '6px',\n    cursor: 'pointer',\n    transition: 'background-color 0.15s ease',\n  } as React.CSSProperties,\n  table: {\n    width: '100%',\n    borderCollapse: 'collapse',\n    fontSize: '13px',\n  } as React.CSSProperties,\n  tableHeader: {\n    backgroundColor: 'var(--color-bg-sunken)',\n    borderBottom: '1px solid var(--color-border)',\n  } as React.CSSProperties,\n  th: {\n    padding: '10px 12px',\n    textAlign: 'left',\n    fontWeight: 600,\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  td: {\n    padding: '10px 12px',\n    borderBottom: '1px solid var(--color-border)',\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  statusCell: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '6px',\n  } as React.CSSProperties,\n  statusBadge: {\n    padding: '2px 8px',\n    borderRadius: '12px',\n    fontSize: '11px',\n    fontWeight: 500,\n  } as React.CSSProperties,\n  eventName: {\n    fontFamily: 'monospace',\n    fontSize: '12px',\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  timeAgo: {\n    fontSize: '12px',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  retryButton: {\n    padding: '4px 8px',\n    fontSize: '11px',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-action-primary-text)',\n    border: 'none',\n    borderRadius: '4px',\n    cursor: 'pointer',\n    transition: 'opacity 0.15s ease',\n  } as React.CSSProperties,\n  emptyState: {\n    textAlign: 'center',\n    padding: '32px',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  loadMoreButton: {\n    width: '100%',\n    padding: '10px',\n    marginTop: '12px',\n    backgroundColor: 'var(--color-bg-muted)',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '13px',\n    color: 'var(--color-text-secondary)',\n    cursor: 'pointer',\n    transition: 'background-color 0.15s ease',\n  } as React.CSSProperties,\n  totalCount: {\n    fontSize: '12px',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  tableContainer: {\n    overflowX: 'auto',\n  } as React.CSSProperties,\n  detailRow: {\n    backgroundColor: 'var(--color-bg-sunken)',\n  } as React.CSSProperties,\n  detailContent: {\n    padding: '12px',\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    whiteSpace: 'pre-wrap',\n    wordBreak: 'break-all',\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  expandButton: {\n    background: 'none',\n    border: 'none',\n    cursor: 'pointer',\n    padding: '4px',\n    fontSize: '14px',\n  } as React.CSSProperties,\n};\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\nfunction formatTimeAgo(dateString: string): string {\n  const date = new Date(dateString);\n  const now = new Date();\n  const diffMs = now.getTime() - date.getTime();\n  const diffMins = Math.floor(diffMs / 60000);\n  const diffHours = Math.floor(diffMins / 60);\n  const diffDays = Math.floor(diffHours / 24);\n\n  if (diffMins < 1) return 'Just now';\n  if (diffMins < 60) return `${diffMins}m ago`;\n  if (diffHours < 24) return `${diffHours}h ago`;\n  if (diffDays < 7) return `${diffDays}d ago`;\n  return date.toLocaleDateString();\n}\n\n// ============================================================================\n// Event Log Row Component\n// ============================================================================\n\ninterface EventLogRowProps {\n  log: EventLog;\n  onRetry: () => void;\n  retrying?: boolean;\n  expanded?: boolean;\n  onToggleExpand: () => void;\n}\n\nconst EventLogRow: React.FC<EventLogRowProps> = memo(function EventLogRow({\n  log,\n  onRetry,\n  retrying,\n  expanded,\n  onToggleExpand,\n}) {\n  const canRetry = log.status === 'FAILED';\n\n  return (\n    <>\n      <tr>\n        <td style={styles.td}>\n          <button onClick={onToggleExpand} style={styles.expandButton}>\n            {expanded ? '▼' : '▶'}\n          </button>\n        </td>\n        <td style={styles.td}>\n          <div style={styles.statusCell}>\n            <span>{getEventStatusIcon(log.status)}</span>\n            <span\n              style={{\n                ...styles.statusBadge,\n                backgroundColor: `${getEventStatusColor(log.status)}20`,\n                color: getEventStatusColor(log.status),\n              }}\n            >\n              {getEventStatusLabel(log.status)}\n            </span>\n          </div>\n        </td>\n        <td style={styles.td}>\n          <div style={styles.eventName}>{log.eventName}</div>\n          {log.actionName && (\n            <div style={{ fontSize: '11px', color: 'var(--color-text-placeholder)' }}>Action: {log.actionName}</div>\n          )}\n        </td>\n        <td style={styles.td}>\n          <div style={styles.timeAgo}>{formatTimeAgo(log.createdAt)}</div>\n        </td>\n        <td style={styles.td}>\n          {log.webhookUrl ? (\n            <span style={{ fontSize: '12px', color: 'var(--color-text-muted)' }}>\n              {new URL(log.webhookUrl).hostname}\n            </span>\n          ) : (\n            <span style={{ fontSize: '12px', color: 'var(--color-text-placeholder)' }}>—</span>\n          )}\n        </td>\n        <td style={styles.td}>\n          {canRetry && (\n            <button onClick={onRetry} disabled={retrying} style={styles.retryButton}>\n              {retrying ? '...' : '🔄 Retry'}\n            </button>\n          )}\n        </td>\n      </tr>\n      {expanded && (\n        <tr style={styles.detailRow}>\n          <td colSpan={6} style={styles.td}>\n            <div style={styles.detailContent as React.CSSProperties}>\n              <strong>Payload:</strong>\n              {'\\n'}\n              {JSON.stringify(log.payload, null, 2)}\n              {log.errorMessage && (\n                <>\n                  {'\\n\\n'}\n                  <strong style={{ color: 'var(--color-status-error-text)' }}>Error:</strong>\n                  {'\\n'}\n                  {log.errorMessage}\n                </>\n              )}\n              {log.responseCode && (\n                <>\n                  {'\\n\\n'}\n                  <strong>Response Code:</strong> {log.responseCode}\n                </>\n              )}\n              {'\\n\\n'}\n              <strong>Attempts:</strong> {log.attempts}\n            </div>\n          </td>\n        </tr>\n      )}\n    </>\n  );\n});\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport const EventLogViewer: React.FC<EventLogViewerProps> = memo(function EventLogViewer({\n  dashboardId,\n  widgetId,\n  maxHeight = '400px',\n  onRetrySuccess,\n}) {\n  const [statusFilter, setStatusFilter] = useState<EventStatus | ''>('');\n  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());\n  const [retryingId, setRetryingId] = useState<string | null>(null);\n\n  const { logs, loading, totalCount, hasMore, loadMore, retryDelivery, refetch } = useEventLogs({\n    dashboardId,\n    widgetId,\n    status: statusFilter || undefined,\n  });\n\n  const handleRetry = useCallback(\n    async (log: EventLog) => {\n      setRetryingId(log.id);\n      const result = await retryDelivery(log.id);\n      setRetryingId(null);\n      if (result) {\n        onRetrySuccess?.(result);\n      }\n    },\n    [retryDelivery, onRetrySuccess]\n  );\n\n  const handleToggleExpand = useCallback((id: string) => {\n    setExpandedIds((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) {\n        next.delete(id);\n      } else {\n        next.add(id);\n      }\n      return next;\n    });\n  }, []);\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.header}>\n        <div>\n          <h3 style={styles.title}>Event History</h3>\n          <span style={styles.totalCount}>{totalCount} events</span>\n        </div>\n        <div style={styles.headerActions}>\n          <select\n            value={statusFilter}\n            onChange={(e) => setStatusFilter(e.target.value as EventStatus | '')}\n            style={styles.filterSelect}\n          >\n            <option value=\"\">All Status</option>\n            <option value=\"DELIVERED\">Delivered</option>\n            <option value=\"FAILED\">Failed</option>\n            <option value=\"PENDING\">Pending</option>\n            <option value=\"PROCESSING\">Processing</option>\n            <option value=\"RETRYING\">Retrying</option>\n            <option value=\"IGNORED\">Ignored</option>\n          </select>\n          <button onClick={() => refetch()} style={styles.refreshButton}>\n            🔄 Refresh\n          </button>\n        </div>\n      </div>\n\n      {loading && logs.length === 0 ? (\n        <div style={styles.emptyState}>Loading...</div>\n      ) : logs.length === 0 ? (\n        <div style={styles.emptyState}>\n          <p>No events found</p>\n          <p style={{ fontSize: '13px', marginTop: '8px' }}>Events will appear here when actions are triggered.</p>\n        </div>\n      ) : (\n        <>\n          <div style={{ ...styles.tableContainer, maxHeight, overflowY: 'auto' }}>\n            <table style={styles.table}>\n              <thead style={styles.tableHeader}>\n                <tr>\n                  <th style={{ ...styles.th, width: '40px' }}></th>\n                  <th style={styles.th}>Status</th>\n                  <th style={styles.th}>Event</th>\n                  <th style={styles.th}>Time</th>\n                  <th style={styles.th}>Webhook</th>\n                  <th style={{ ...styles.th, width: '80px' }}>Action</th>\n                </tr>\n              </thead>\n              <tbody>\n                {logs.map((log) => (\n                  <EventLogRow\n                    key={log.id}\n                    log={log}\n                    onRetry={() => handleRetry(log)}\n                    retrying={retryingId === log.id}\n                    expanded={expandedIds.has(log.id)}\n                    onToggleExpand={() => handleToggleExpand(log.id)}\n                  />\n                ))}\n              </tbody>\n            </table>\n          </div>\n\n          {hasMore && (\n            <button onClick={loadMore} style={styles.loadMoreButton}>\n              Load More\n            </button>\n          )}\n        </>\n      )}\n    </div>\n  );\n});\n\nexport default EventLogViewer;\n"],"mappings":"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"}
+{"version":3,"file":"EventLogViewer.js","names":[],"sources":["../../../../../src/bigconsole/components/widgets/event-logs/EventLogViewer.tsx"],"sourcesContent":["/**\n * EventLogViewer Component (v2.0)\n *\n * Component for viewing event history and managing failed deliveries.\n * Shows event status, allows filtering, and supports retry functionality.\n */\n\nimport React, { memo, useState, useCallback } from 'react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport {\n  useEventLogs,\n  getEventStatusColor,\n  getEventStatusLabel,\n  getEventStatusIcon,\n  type EventStatus,\n  type EventLog,\n} from '../../../hooks/useEventLogs';\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface EventLogViewerProps {\n  /** Dashboard ID to filter logs */\n  dashboardId?: string;\n  /** Widget ID to filter logs */\n  widgetId?: string;\n  /** Maximum height of the viewer */\n  maxHeight?: string;\n  /** Callback when retry is successful */\n  onRetrySuccess?: (eventLog: EventLog) => void;\n}\n\n// ============================================================================\n// Styles\n// ============================================================================\n\nconst styles = {\n  container: {\n    padding: '16px',\n    backgroundColor: 'var(--color-bg-surface)',\n    borderRadius: '8px',\n  } as React.CSSProperties,\n  header: {\n    display: 'flex',\n    justifyContent: 'space-between',\n    alignItems: 'center',\n    marginBottom: '16px',\n  } as React.CSSProperties,\n  title: {\n    fontSize: '16px',\n    fontWeight: 600,\n    color: 'var(--color-text-primary)',\n    margin: 0,\n  } as React.CSSProperties,\n  headerActions: {\n    display: 'flex',\n    gap: '8px',\n    alignItems: 'center',\n  } as React.CSSProperties,\n  filterSelect: {\n    padding: '6px 12px',\n    fontSize: '13px',\n    border: '1px solid var(--color-border)',\n    borderRadius: '6px',\n    backgroundColor: 'var(--color-bg-surface)',\n  } as React.CSSProperties,\n  refreshButton: {\n    padding: '6px 12px',\n    fontSize: '13px',\n    backgroundColor: 'var(--color-bg-muted)',\n    border: 'none',\n    borderRadius: '6px',\n    cursor: 'pointer',\n    transition: 'background-color 0.15s ease',\n  } as React.CSSProperties,\n  table: {\n    width: '100%',\n    borderCollapse: 'collapse',\n    fontSize: '13px',\n  } as React.CSSProperties,\n  tableHeader: {\n    backgroundColor: 'var(--color-bg-sunken)',\n    borderBottom: '1px solid var(--color-border)',\n  } as React.CSSProperties,\n  th: {\n    padding: '10px 12px',\n    textAlign: 'left',\n    fontWeight: 600,\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  td: {\n    padding: '10px 12px',\n    borderBottom: '1px solid var(--color-border)',\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  statusCell: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '6px',\n  } as React.CSSProperties,\n  statusBadge: {\n    padding: '2px 8px',\n    borderRadius: '12px',\n    fontSize: '11px',\n    fontWeight: 500,\n  } as React.CSSProperties,\n  eventName: {\n    fontFamily: 'monospace',\n    fontSize: '12px',\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  timeAgo: {\n    fontSize: '12px',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  retryButton: {\n    padding: '4px 8px',\n    fontSize: '11px',\n    backgroundColor: 'var(--color-action-primary-bg)',\n    color: 'var(--color-action-primary-text)',\n    border: 'none',\n    borderRadius: '4px',\n    cursor: 'pointer',\n    transition: 'opacity 0.15s ease',\n  } as React.CSSProperties,\n  emptyState: {\n    textAlign: 'center',\n    padding: '32px',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  loadMoreButton: {\n    width: '100%',\n    padding: '10px',\n    marginTop: '12px',\n    backgroundColor: 'var(--color-bg-muted)',\n    border: 'none',\n    borderRadius: '6px',\n    fontSize: '13px',\n    color: 'var(--color-text-secondary)',\n    cursor: 'pointer',\n    transition: 'background-color 0.15s ease',\n  } as React.CSSProperties,\n  totalCount: {\n    fontSize: '12px',\n    color: 'var(--color-text-muted)',\n  } as React.CSSProperties,\n  tableContainer: {\n    overflowX: 'auto',\n  } as React.CSSProperties,\n  detailRow: {\n    backgroundColor: 'var(--color-bg-sunken)',\n  } as React.CSSProperties,\n  detailContent: {\n    padding: '12px',\n    fontSize: '12px',\n    fontFamily: 'monospace',\n    whiteSpace: 'pre-wrap',\n    wordBreak: 'break-all',\n    color: 'var(--color-text-secondary)',\n  } as React.CSSProperties,\n  expandButton: {\n    background: 'none',\n    border: 'none',\n    cursor: 'pointer',\n    padding: '4px',\n    fontSize: '14px',\n  } as React.CSSProperties,\n};\n\n// ============================================================================\n// Helper Functions\n// ============================================================================\n\n/** Translator function shape from useI18n().t. */\ntype EventLogTFunc = (\n  key: string,\n  fallbackOrParams?: string | Record<string, string | number>,\n  params?: Record<string, string | number>\n) => string;\n\nfunction formatTimeAgo(dateString: string, t: EventLogTFunc): string {\n  const date = new Date(dateString);\n  const now = new Date();\n  const diffMs = now.getTime() - date.getTime();\n  const diffMins = Math.floor(diffMs / 60000);\n  const diffHours = Math.floor(diffMins / 60);\n  const diffDays = Math.floor(diffHours / 24);\n\n  if (diffMins < 1) return t('bigconsole.widget.eventLog.time.justNow', 'Just now');\n  if (diffMins < 60) return t('bigconsole.widget.eventLog.time.minutesAgo', '{{count}}m ago', { count: diffMins });\n  if (diffHours < 24) return t('bigconsole.widget.eventLog.time.hoursAgo', '{{count}}h ago', { count: diffHours });\n  if (diffDays < 7) return t('bigconsole.widget.eventLog.time.daysAgo', '{{count}}d ago', { count: diffDays });\n  return date.toLocaleDateString();\n}\n\n// ============================================================================\n// Event Log Row Component\n// ============================================================================\n\ninterface EventLogRowProps {\n  log: EventLog;\n  onRetry: () => void;\n  retrying?: boolean;\n  expanded?: boolean;\n  onToggleExpand: () => void;\n}\n\nconst EventLogRow: React.FC<EventLogRowProps> = memo(function EventLogRow({\n  log,\n  onRetry,\n  retrying,\n  expanded,\n  onToggleExpand,\n}) {\n  const { t } = useI18n();\n  const canRetry = log.status === 'FAILED';\n\n  return (\n    <>\n      <tr>\n        <td style={styles.td}>\n          <button onClick={onToggleExpand} style={styles.expandButton}>\n            {expanded ? '▼' : '▶'}\n          </button>\n        </td>\n        <td style={styles.td}>\n          <div style={styles.statusCell}>\n            <span>{getEventStatusIcon(log.status)}</span>\n            <span\n              style={{\n                ...styles.statusBadge,\n                backgroundColor: `${getEventStatusColor(log.status)}20`,\n                color: getEventStatusColor(log.status),\n              }}\n            >\n              {getEventStatusLabel(log.status)}\n            </span>\n          </div>\n        </td>\n        <td style={styles.td}>\n          <div style={styles.eventName}>{log.eventName}</div>\n          {log.actionName && (\n            <div style={{ fontSize: '11px', color: 'var(--color-text-placeholder)' }}>\n              {t('bigconsole.widget.eventLog.actionLabel', 'Action: {{action}}', { action: log.actionName ?? '' })}\n            </div>\n          )}\n        </td>\n        <td style={styles.td}>\n          <div style={styles.timeAgo}>{formatTimeAgo(log.createdAt, t)}</div>\n        </td>\n        <td style={styles.td}>\n          {log.webhookUrl ? (\n            <span style={{ fontSize: '12px', color: 'var(--color-text-muted)' }}>\n              {new URL(log.webhookUrl).hostname}\n            </span>\n          ) : (\n            <span style={{ fontSize: '12px', color: 'var(--color-text-placeholder)' }}>—</span>\n          )}\n        </td>\n        <td style={styles.td}>\n          {canRetry && (\n            <button onClick={onRetry} disabled={retrying} style={styles.retryButton}>\n              {retrying ? '...' : `🔄 ${t('bigconsole.widget.eventLog.retry', 'Retry')}`}\n            </button>\n          )}\n        </td>\n      </tr>\n      {expanded && (\n        <tr style={styles.detailRow}>\n          <td colSpan={6} style={styles.td}>\n            <div style={styles.detailContent as React.CSSProperties}>\n              <strong>{t('bigconsole.widget.eventLog.payload', 'Payload:')}</strong>\n              {'\\n'}\n              {JSON.stringify(log.payload, null, 2)}\n              {log.errorMessage && (\n                <>\n                  {'\\n\\n'}\n                  <strong style={{ color: 'var(--color-status-error-text)' }}>\n                    {t('bigconsole.widget.eventLog.error', 'Error:')}\n                  </strong>\n                  {'\\n'}\n                  {log.errorMessage}\n                </>\n              )}\n              {log.responseCode && (\n                <>\n                  {'\\n\\n'}\n                  <strong>{t('bigconsole.widget.eventLog.responseCode', 'Response Code:')}</strong> {log.responseCode}\n                </>\n              )}\n              {'\\n\\n'}\n              <strong>{t('bigconsole.widget.eventLog.attempts', 'Attempts:')}</strong> {log.attempts}\n            </div>\n          </td>\n        </tr>\n      )}\n    </>\n  );\n});\n\n// ============================================================================\n// Main Component\n// ============================================================================\n\nexport const EventLogViewer: React.FC<EventLogViewerProps> = memo(function EventLogViewer({\n  dashboardId,\n  widgetId,\n  maxHeight = '400px',\n  onRetrySuccess,\n}) {\n  const { t } = useI18n();\n  const [statusFilter, setStatusFilter] = useState<EventStatus | ''>('');\n  const [expandedIds, setExpandedIds] = useState<Set<string>>(new Set());\n  const [retryingId, setRetryingId] = useState<string | null>(null);\n\n  const { logs, loading, totalCount, hasMore, loadMore, retryDelivery, refetch } = useEventLogs({\n    dashboardId,\n    widgetId,\n    status: statusFilter || undefined,\n  });\n\n  const handleRetry = useCallback(\n    async (log: EventLog) => {\n      setRetryingId(log.id);\n      const result = await retryDelivery(log.id);\n      setRetryingId(null);\n      if (result) {\n        onRetrySuccess?.(result);\n      }\n    },\n    [retryDelivery, onRetrySuccess]\n  );\n\n  const handleToggleExpand = useCallback((id: string) => {\n    setExpandedIds((prev) => {\n      const next = new Set(prev);\n      if (next.has(id)) {\n        next.delete(id);\n      } else {\n        next.add(id);\n      }\n      return next;\n    });\n  }, []);\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.header}>\n        <div>\n          <h3 style={styles.title}>{t('bigconsole.widget.eventLog.title', 'Event History')}</h3>\n          <span style={styles.totalCount}>\n            {t('bigconsole.widget.eventLog.eventCount', '{{count}} events', { count: totalCount })}\n          </span>\n        </div>\n        <div style={styles.headerActions}>\n          <select\n            value={statusFilter}\n            onChange={(e) => setStatusFilter(e.target.value as EventStatus | '')}\n            style={styles.filterSelect}\n          >\n            <option value=\"\">{t('bigconsole.widget.eventLog.filter.all', 'All Status')}</option>\n            <option value=\"DELIVERED\">{t('bigconsole.widget.eventLog.filter.delivered', 'Delivered')}</option>\n            <option value=\"FAILED\">{t('bigconsole.widget.eventLog.filter.failed', 'Failed')}</option>\n            <option value=\"PENDING\">{t('bigconsole.widget.eventLog.filter.pending', 'Pending')}</option>\n            <option value=\"PROCESSING\">{t('bigconsole.widget.eventLog.filter.processing', 'Processing')}</option>\n            <option value=\"RETRYING\">{t('bigconsole.widget.eventLog.filter.retrying', 'Retrying')}</option>\n            <option value=\"IGNORED\">{t('bigconsole.widget.eventLog.filter.ignored', 'Ignored')}</option>\n          </select>\n          <button onClick={() => refetch()} style={styles.refreshButton}>\n            🔄 {t('bigconsole.widget.eventLog.refresh', 'Refresh')}\n          </button>\n        </div>\n      </div>\n\n      {loading && logs.length === 0 ? (\n        <div style={styles.emptyState}>{t('bigconsole.widget.eventLog.loading', 'Loading...')}</div>\n      ) : logs.length === 0 ? (\n        <div style={styles.emptyState}>\n          <p>{t('bigconsole.widget.eventLog.emptyTitle', 'No events found')}</p>\n          <p style={{ fontSize: '13px', marginTop: '8px' }}>\n            {t('bigconsole.widget.eventLog.emptyHint', 'Events will appear here when actions are triggered.')}\n          </p>\n        </div>\n      ) : (\n        <>\n          <div style={{ ...styles.tableContainer, maxHeight, overflowY: 'auto' }}>\n            <table style={styles.table}>\n              <thead style={styles.tableHeader}>\n                <tr>\n                  <th style={{ ...styles.th, width: '40px' }}></th>\n                  <th style={styles.th}>{t('bigconsole.widget.eventLog.column.status', 'Status')}</th>\n                  <th style={styles.th}>{t('bigconsole.widget.eventLog.column.event', 'Event')}</th>\n                  <th style={styles.th}>{t('bigconsole.widget.eventLog.column.time', 'Time')}</th>\n                  <th style={styles.th}>{t('bigconsole.widget.eventLog.column.webhook', 'Webhook')}</th>\n                  <th style={{ ...styles.th, width: '80px' }}>\n                    {t('bigconsole.widget.eventLog.column.action', 'Action')}\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                {logs.map((log) => (\n                  <EventLogRow\n                    key={log.id}\n                    log={log}\n                    onRetry={() => handleRetry(log)}\n                    retrying={retryingId === log.id}\n                    expanded={expandedIds.has(log.id)}\n                    onToggleExpand={() => handleToggleExpand(log.id)}\n                  />\n                ))}\n              </tbody>\n            </table>\n          </div>\n\n          {hasMore && (\n            <button onClick={loadMore} style={styles.loadMoreButton}>\n              {t('bigconsole.widget.eventLog.loadMore', 'Load More')}\n            </button>\n          )}\n        </>\n      )}\n    </div>\n  );\n});\n\nexport default EventLogViewer;\n"],"mappings":"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"}