@burdenoff/microfe-bigconsole 2026.805.2 → 2026.812.1

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

@@ -1,54 +1,58 @@
 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)",
-		borderRadius: "8px"
+		display: "flex",
+		flexDirection: "column",
+		gap: "var(--space-controlGap)",
+		minWidth: 0
 	},
 	header: {
 		display: "flex",
+		flexWrap: "wrap",
 		justifyContent: "space-between",
 		alignItems: "center",
-		marginBottom: "16px"
-	},
-	title: {
-		fontSize: "16px",
-		fontWeight: 600,
-		color: "var(--color-text-primary)",
-		margin: 0
+		gap: "var(--space-controlGap)",
+		minWidth: 0
 	},
 	headerActions: {
 		display: "flex",
+		flexWrap: "wrap",
 		gap: "8px",
 		alignItems: "center"
 	},
 	filterSelect: {
-		padding: "6px 12px",
-		fontSize: "13px",
-		border: "1px solid var(--color-border)",
-		borderRadius: "6px",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "0 12px",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-primary)",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-input)",
 		backgroundColor: "var(--color-bg-surface)"
 	},
 	refreshButton: {
-		padding: "6px 12px",
-		fontSize: "13px",
-		backgroundColor: "var(--color-bg-muted)",
-		border: "none",
-		borderRadius: "6px",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "0 12px",
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-primary)",
+		backgroundColor: "var(--color-bg-surface)",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-button)",
 		cursor: "pointer",
 		transition: "background-color 0.15s ease"
 	},
 	table: {
 		width: "100%",
+		minWidth: "520px",
 		borderCollapse: "collapse",
-		fontSize: "13px"
+		fontSize: "var(--font-size-body-sm)"
 	},
 	tableHeader: {
 		backgroundColor: "var(--color-bg-sunken)",
-		borderBottom: "1px solid var(--color-border)"
+		borderBottom: "1px solid var(--color-border-subtle)"
 	},
 	th: {
 		padding: "10px 12px",
@@ -58,7 +62,7 @@ var u = {
 	},
 	td: {
 		padding: "10px 12px",
-		borderBottom: "1px solid var(--color-border)",
+		borderBottom: "1px solid var(--color-border-subtle)",
 		color: "var(--color-text-secondary)"
 	},
 	statusCell: {
@@ -93,26 +97,42 @@ var u = {
 	},
 	emptyState: {
 		textAlign: "center",
-		padding: "32px",
-		color: "var(--color-text-muted)"
+		padding: "var(--space-pagePadding) var(--space-formGap)",
+		color: "var(--color-text-secondary)",
+		backgroundColor: "var(--color-bg-surface)",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-card)"
+	},
+	emptyTitle: {
+		fontSize: "var(--font-size-body-sm)",
+		fontWeight: 600,
+		color: "var(--color-text-primary)",
+		margin: 0
 	},
 	loadMoreButton: {
 		width: "100%",
-		padding: "10px",
+		minHeight: "var(--size-controlHeight-md)",
+		padding: "0 10px",
 		marginTop: "12px",
-		backgroundColor: "var(--color-bg-muted)",
-		border: "none",
-		borderRadius: "6px",
-		fontSize: "13px",
+		backgroundColor: "var(--color-bg-surface)",
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-button)",
+		fontSize: "var(--font-size-body-sm)",
 		color: "var(--color-text-secondary)",
 		cursor: "pointer",
 		transition: "background-color 0.15s ease"
 	},
 	totalCount: {
-		fontSize: "12px",
-		color: "var(--color-text-muted)"
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-secondary)"
+	},
+	tableContainer: {
+		overflowX: "auto",
+		minWidth: 0,
+		border: "1px solid var(--color-border-subtle)",
+		borderRadius: "var(--radius-card)",
+		backgroundColor: "var(--color-bg-surface)"
 	},
-	tableContainer: { overflowX: "auto" },
 	detailRow: { backgroundColor: "var(--color-bg-sunken)" },
 	detailContent: {
 		padding: "12px",
@@ -126,32 +146,48 @@ var u = {
 		background: "none",
 		border: "none",
 		cursor: "pointer",
+		minHeight: "var(--size-controlHeight-md)",
+		minWidth: "var(--size-controlHeight-md)",
 		padding: "4px",
-		fontSize: "14px"
+		fontSize: "var(--font-size-body-sm)",
+		color: "var(--color-text-secondary)"
 	}
 };
-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) {
+	try {
+		return new URL(e).hostname;
+	} catch {
+		return e;
+	}
+}
+function p(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,
-				children: o ? "▼" : "▶"
+var m = i(function({ log: e, onRetry: i, retrying: a, expanded: o, onToggleExpand: m }) {
+	let { t: h } = s(), g = e.status === "FAILED";
+	return /* @__PURE__ */ u(c, { children: [/* @__PURE__ */ u("tr", { children: [
+		/* @__PURE__ */ l("td", {
+			style: d.td,
+			children: /* @__PURE__ */ l("button", {
+				type: "button",
+				onClick: m,
+				"aria-expanded": o,
+				"aria-label": o ? "Hide event payload" : "Show event payload",
+				style: d.expandButton,
+				children: /* @__PURE__ */ l("span", {
+					"aria-hidden": "true",
+					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,219 +195,236 @@ 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)"
+					color: "var(--color-text-muted)"
 				},
-				children: ["Action: ", e.actionName]
+				children: h("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: p(e.createdAt, h)
 			})
 		}),
-		/* @__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", {
+				children: f(e.webhookUrl)
+			}) : /* @__PURE__ */ l("span", {
 				style: {
-					fontSize: "12px",
-					color: "var(--color-text-placeholder)"
+					fontSize: "var(--font-size-body-sm)",
+					color: "var(--color-text-muted)"
 				},
 				children: "—"
 			})
 		}),
-		/* @__PURE__ */ c("td", {
-			style: u.td,
-			children: p && /* @__PURE__ */ c("button", {
+		/* @__PURE__ */ l("td", {
+			style: d.td,
+			children: g && /* @__PURE__ */ l("button", {
+				type: "button",
 				onClick: i,
 				disabled: a,
-				style: u.retryButton,
-				children: a ? "..." : "🔄 Retry"
+				style: d.retryButton,
+				children: a ? h("bigconsole.widget.eventLog.retrying", "Retrying…") : h("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: h("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: h("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: h("bigconsole.widget.eventLog.responseCode", "Response Code:") }),
 						" ",
 						e.responseCode
 					] }),
 					"\n\n",
-					/* @__PURE__ */ c("strong", { children: "Attempts:" }),
+					/* @__PURE__ */ l("strong", { children: h("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({
+}), h = i(function({ dashboardId: t, widgetId: n, maxHeight: r = "400px", onRetrySuccess: i }) {
+	let { t: f } = s(), [p, 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: p || 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"
-			}), /* @__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,
-					children: [
-						/* @__PURE__ */ c("option", {
-							value: "",
-							children: "All Status"
-						}),
-						/* @__PURE__ */ c("option", {
-							value: "DELIVERED",
-							children: "Delivered"
-						}),
-						/* @__PURE__ */ c("option", {
-							value: "FAILED",
-							children: "Failed"
-						}),
-						/* @__PURE__ */ c("option", {
-							value: "PENDING",
-							children: "Pending"
-						}),
-						/* @__PURE__ */ c("option", {
-							value: "PROCESSING",
-							children: "Processing"
-						}),
-						/* @__PURE__ */ c("option", {
-							value: "RETRYING",
-							children: "Retrying"
-						}),
-						/* @__PURE__ */ c("option", {
-							value: "IGNORED",
-							children: "Ignored"
-						})
-					]
-				}), /* @__PURE__ */ c("button", {
-					onClick: () => w(),
-					style: u.refreshButton,
-					children: "🔄 Refresh"
-				})]
+	return /* @__PURE__ */ u("div", {
+		style: d.container,
+		"data-testid": "event-log-viewer",
+		children: [/* @__PURE__ */ u("div", {
+			style: d.header,
+			children: [/* @__PURE__ */ l("div", { children: /* @__PURE__ */ l("span", {
+				style: d.totalCount,
+				children: f("bigconsole.widget.eventLog.eventCount", "{{count}} events", { count: S })
+			}) }), /* @__PURE__ */ u("div", {
+				style: d.headerActions,
+				children: [
+					/* @__PURE__ */ l("label", {
+						htmlFor: "event-log-status-filter",
+						className: "sr-only",
+						children: "Filter events by status"
+					}),
+					/* @__PURE__ */ u("select", {
+						id: "event-log-status-filter",
+						value: p,
+						onChange: (e) => h(e.target.value),
+						style: d.filterSelect,
+						children: [
+							/* @__PURE__ */ l("option", {
+								value: "",
+								children: f("bigconsole.widget.eventLog.filter.all", "All Status")
+							}),
+							/* @__PURE__ */ l("option", {
+								value: "DELIVERED",
+								children: f("bigconsole.widget.eventLog.filter.delivered", "Delivered")
+							}),
+							/* @__PURE__ */ l("option", {
+								value: "FAILED",
+								children: f("bigconsole.widget.eventLog.filter.failed", "Failed")
+							}),
+							/* @__PURE__ */ l("option", {
+								value: "PENDING",
+								children: f("bigconsole.widget.eventLog.filter.pending", "Pending")
+							}),
+							/* @__PURE__ */ l("option", {
+								value: "PROCESSING",
+								children: f("bigconsole.widget.eventLog.filter.processing", "Processing")
+							}),
+							/* @__PURE__ */ l("option", {
+								value: "RETRYING",
+								children: f("bigconsole.widget.eventLog.filter.retrying", "Retrying")
+							}),
+							/* @__PURE__ */ l("option", {
+								value: "IGNORED",
+								children: f("bigconsole.widget.eventLog.filter.ignored", "Ignored")
+							})
+						]
+					}),
+					/* @__PURE__ */ l("button", {
+						type: "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,
+			role: "status",
+			children: /* @__PURE__ */ l("p", {
+				style: d.emptyTitle,
+				children: f("bigconsole.widget.eventLog.loading", "Loading...")
+			})
+		}) : b.length === 0 ? /* @__PURE__ */ u("div", {
+			style: d.emptyState,
+			role: "status",
+			children: [/* @__PURE__ */ l("p", {
+				style: d.emptyTitle,
+				children: f("bigconsole.widget.eventLog.emptyTitle", "No events found")
+			}), /* @__PURE__ */ l("p", {
 				style: {
-					fontSize: "13px",
+					fontSize: "var(--font-size-body-sm)",
 					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(m, {
 					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 { h as default };
 
 //# sourceMappingURL=EventLogViewer.js.map