@questpie/admin 2.0.0 → 3.0.0

package/dist/client/components/history-sidebar.mjs

@@ -0,0 +1,496 @@
+import { useTranslation } from "../i18n/hooks.mjs";
+import { Button } from "./ui/button.mjs";
+import { Badge } from "./ui/badge.mjs";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./ui/sheet.mjs";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs.mjs";
+import { c } from "react/compiler-runtime";
+import { Icon } from "@iconify/react";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/history-sidebar.tsx
+function formatRelativeTime(date) {
+	const diff = (/* @__PURE__ */ new Date()).getTime() - date.getTime();
+	const seconds = Math.floor(diff / 1e3);
+	const minutes = Math.floor(seconds / 60);
+	const hours = Math.floor(minutes / 60);
+	const days = Math.floor(hours / 24);
+	if (days > 0) return `${days}d ago`;
+	if (hours > 0) return `${hours}h ago`;
+	if (minutes > 0) return `${minutes}m ago`;
+	return "just now";
+}
+function getActionConfig(action) {
+	switch (action) {
+		case "create": return {
+			color: "bg-emerald-500",
+			icon: "ph:plus",
+			variant: "success"
+		};
+		case "update": return {
+			color: "bg-blue-500",
+			icon: "ph:pencil-simple",
+			variant: "info"
+		};
+		case "delete": return {
+			color: "bg-red-500",
+			icon: "ph:trash",
+			variant: "error"
+		};
+		case "transition": return {
+			color: "bg-amber-500",
+			icon: "ph:arrows-left-right",
+			variant: "warning"
+		};
+		default: return {
+			color: "bg-gray-500",
+			icon: "ph:clock-counter-clockwise",
+			variant: "default"
+		};
+	}
+}
+function formatChangeValue(value) {
+	if (value === null || value === void 0) return "—";
+	if (typeof value === "boolean") return value ? "true" : "false";
+	if (typeof value === "object") try {
+		const str$1 = JSON.stringify(value, null, 2);
+		return str$1.length > 120 ? `${str$1.slice(0, 120)}…` : str$1;
+	} catch {
+		return String(value);
+	}
+	const str = String(value);
+	return str.length > 120 ? `${str.slice(0, 120)}…` : str;
+}
+function ChangeDiff(t0) {
+	const $ = c(11);
+	const { changes } = t0;
+	const { t } = useTranslation();
+	const entries = Object.entries(changes);
+	const [expanded, setExpanded] = React.useState(false);
+	if (entries.length === 0) return null;
+	const t1 = "mt-2";
+	let t2;
+	if ($[0] !== expanded) {
+		t2 = () => setExpanded(!expanded);
+		$[0] = expanded;
+		$[1] = t2;
+	} else t2 = $[1];
+	const t3 = expanded ? "ph:caret-down" : "ph:caret-right";
+	let t4;
+	if ($[2] !== t3) {
+		t4 = /* @__PURE__ */ jsx(Icon, {
+			icon: t3,
+			className: "size-3"
+		});
+		$[2] = t3;
+		$[3] = t4;
+	} else t4 = $[3];
+	const t5 = expanded ? t("history.hideChanges") : t("history.showChanges", { count: entries.length });
+	let t6;
+	if ($[4] !== t2 || $[5] !== t4 || $[6] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: "text-muted-foreground hover:text-foreground flex cursor-pointer items-center gap-1 text-xs transition-colors",
+			onClick: t2,
+			children: [t4, t5]
+		});
+		$[4] = t2;
+		$[5] = t4;
+		$[6] = t5;
+		$[7] = t6;
+	} else t6 = $[7];
+	const t7 = expanded && /* @__PURE__ */ jsx("div", {
+		className: "mt-1.5 space-y-1.5 text-xs",
+		children: entries.map(_temp)
+	});
+	let t8;
+	if ($[8] !== t6 || $[9] !== t7) {
+		t8 = /* @__PURE__ */ jsxs("div", {
+			className: t1,
+			children: [t6, t7]
+		});
+		$[8] = t6;
+		$[9] = t7;
+		$[10] = t8;
+	} else t8 = $[10];
+	return t8;
+}
+function _temp(t0) {
+	const [field, t1] = t0;
+	const { from, to } = t1;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "bg-muted rounded border px-2 py-1.5",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-foreground font-medium",
+			children: field
+		}), /* @__PURE__ */ jsxs("div", {
+			className: "mt-0.5 flex flex-col gap-0.5",
+			children: [/* @__PURE__ */ jsxs("span", {
+				className: "text-red-600 dark:text-red-400",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "opacity-50",
+					children: "- "
+				}), formatChangeValue(from)]
+			}), /* @__PURE__ */ jsxs("span", {
+				className: "text-emerald-600 dark:text-emerald-400",
+				children: [/* @__PURE__ */ jsx("span", {
+					className: "opacity-50",
+					children: "+ "
+				}), formatChangeValue(to)]
+			})]
+		})]
+	}, field);
+}
+function ActivityTimeline(t0) {
+	const $ = c(11);
+	const { entries, isLoading } = t0;
+	const { t } = useTranslation();
+	if (isLoading) {
+		let t1$1;
+		if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+			t1$1 = /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground flex items-center justify-center py-12",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:spinner-gap",
+					className: "size-5 animate-spin"
+				})
+			});
+			$[0] = t1$1;
+		} else t1$1 = $[0];
+		return t1$1;
+	}
+	if (entries.length === 0) {
+		let t1$1;
+		if ($[1] !== t) {
+			t1$1 = t("history.empty");
+			$[1] = t;
+			$[2] = t1$1;
+		} else t1$1 = $[2];
+		let t2$1;
+		if ($[3] !== t1$1) {
+			t2$1 = /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground py-6 text-center text-sm",
+				children: t1$1
+			});
+			$[3] = t1$1;
+			$[4] = t2$1;
+		} else t2$1 = $[4];
+		return t2$1;
+	}
+	let t1;
+	if ($[5] !== entries) {
+		let t2$1;
+		if ($[7] !== entries.length) {
+			t2$1 = (entry, index) => {
+				const config = getActionConfig(entry.action);
+				const date = new Date(entry.createdAt);
+				const isLast = index === entries.length - 1;
+				return /* @__PURE__ */ jsxs("div", {
+					className: "flex gap-3",
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col items-center",
+						children: [/* @__PURE__ */ jsx("div", { className: `mt-1.5 size-2.5 shrink-0 rounded-full ${config.color}` }), !isLast && /* @__PURE__ */ jsx("div", { className: "bg-border min-h-4 w-px flex-1" })]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "min-w-0 flex-1 pb-4",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "flex items-start justify-between gap-2",
+							children: [/* @__PURE__ */ jsx("p", {
+								className: "text-sm leading-snug",
+								children: entry.title
+							}), /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground shrink-0 text-xs whitespace-nowrap",
+								children: formatRelativeTime(date)
+							})]
+						}), entry.changes && Object.keys(entry.changes).length > 0 && /* @__PURE__ */ jsx(ChangeDiff, { changes: entry.changes })]
+					})]
+				}, entry.id);
+			};
+			$[7] = entries.length;
+			$[8] = t2$1;
+		} else t2$1 = $[8];
+		t1 = entries.map(t2$1);
+		$[5] = entries;
+		$[6] = t1;
+	} else t1 = $[6];
+	let t2;
+	if ($[9] !== t1) {
+		t2 = /* @__PURE__ */ jsx("div", {
+			className: "space-y-0",
+			children: t1
+		});
+		$[9] = t1;
+		$[10] = t2;
+	} else t2 = $[10];
+	return t2;
+}
+function VersionsList(t0) {
+	const $ = c(22);
+	const { versions, isLoading, isReverting, onRevert } = t0;
+	const { t } = useTranslation();
+	let t1;
+	if ($[0] !== versions) {
+		t1 = [...versions].sort(_temp2);
+		$[0] = versions;
+		$[1] = t1;
+	} else t1 = $[1];
+	const sortedVersions = t1;
+	let t2;
+	if ($[2] !== t) {
+		t2 = function operationLabel$1(operation) {
+			switch (operation) {
+				case "create": return t("version.operationCreate");
+				case "delete": return t("version.operationDelete");
+				case "update": return t("version.operationUpdate");
+				default: return operation || t("version.operationUnknown");
+			}
+		};
+		$[2] = t;
+		$[3] = t2;
+	} else t2 = $[3];
+	const operationLabel = t2;
+	const formatDate = _temp3;
+	if (isLoading) {
+		let t3$1;
+		if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+			t3$1 = /* @__PURE__ */ jsx("div", {
+				className: "text-muted-foreground flex items-center justify-center py-12",
+				children: /* @__PURE__ */ jsx(Icon, {
+					icon: "ph:spinner-gap",
+					className: "size-5 animate-spin"
+				})
+			});
+			$[4] = t3$1;
+		} else t3$1 = $[4];
+		return t3$1;
+	}
+	if (sortedVersions.length === 0) {
+		let t3$1;
+		if ($[5] !== t) {
+			t3$1 = t("version.empty");
+			$[5] = t;
+			$[6] = t3$1;
+		} else t3$1 = $[6];
+		let t4$1;
+		if ($[7] !== t3$1) {
+			t4$1 = /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground py-6 text-center text-sm",
+				children: t3$1
+			});
+			$[7] = t3$1;
+			$[8] = t4$1;
+		} else t4$1 = $[8];
+		return t4$1;
+	}
+	let t3;
+	if ($[9] !== isReverting || $[10] !== onRevert || $[11] !== operationLabel || $[12] !== sortedVersions || $[13] !== t) {
+		let t4$1;
+		if ($[15] !== isReverting || $[16] !== onRevert || $[17] !== operationLabel || $[18] !== t) {
+			t4$1 = (version, index) => {
+				const canRevert = typeof version.versionId === "string" || typeof version.versionNumber === "number";
+				return /* @__PURE__ */ jsx("div", {
+					className: "border p-3",
+					children: /* @__PURE__ */ jsxs("div", {
+						className: "flex items-start justify-between gap-3",
+						children: [/* @__PURE__ */ jsxs("div", {
+							className: "min-w-0",
+							children: [
+								/* @__PURE__ */ jsxs("div", {
+									className: "flex items-center gap-2",
+									children: [/* @__PURE__ */ jsx(Badge, {
+										variant: "secondary",
+										children: t("version.label", { number: version.versionNumber ?? "-" })
+									}), /* @__PURE__ */ jsx("span", {
+										className: "text-muted-foreground text-sm",
+										children: operationLabel(version.versionOperation)
+									})]
+								}),
+								/* @__PURE__ */ jsxs("p", {
+									className: "text-muted-foreground mt-1 text-xs",
+									children: [
+										t("version.createdAt"),
+										":",
+										" ",
+										formatDate(version.versionCreatedAt)
+									]
+								}),
+								/* @__PURE__ */ jsxs("p", {
+									className: "text-muted-foreground text-xs",
+									children: [
+										t("version.user"),
+										": ",
+										version.versionUserId || "-"
+									]
+								})
+							]
+						}), onRevert && /* @__PURE__ */ jsx(Button, {
+							variant: "outline",
+							size: "sm",
+							disabled: !canRevert || isReverting,
+							onClick: () => {
+								onRevert(version);
+							},
+							children: t("version.revert")
+						})]
+					})
+				}, version.versionId ?? `${version.versionNumber ?? "unknown"}-${index}`);
+			};
+			$[15] = isReverting;
+			$[16] = onRevert;
+			$[17] = operationLabel;
+			$[18] = t;
+			$[19] = t4$1;
+		} else t4$1 = $[19];
+		t3 = sortedVersions.map(t4$1);
+		$[9] = isReverting;
+		$[10] = onRevert;
+		$[11] = operationLabel;
+		$[12] = sortedVersions;
+		$[13] = t;
+		$[14] = t3;
+	} else t3 = $[14];
+	let t4;
+	if ($[20] !== t3) {
+		t4 = /* @__PURE__ */ jsx("div", {
+			className: "space-y-2",
+			children: t3
+		});
+		$[20] = t3;
+		$[21] = t4;
+	} else t4 = $[21];
+	return t4;
+}
+function _temp3(value) {
+	if (!value) return "-";
+	const date = new Date(value);
+	if (Number.isNaN(date.getTime())) return "-";
+	return date.toLocaleString();
+}
+function _temp2(a, b) {
+	const aNum = a.versionNumber ?? 0;
+	return (b.versionNumber ?? 0) - aNum;
+}
+function HistorySidebar(t0) {
+	const $ = c(27);
+	const { open, onOpenChange, auditEntries, isLoadingAudit: t1, versions, isLoadingVersions: t2, isReverting: t3, onRevert, showVersionsTab: t4 } = t0;
+	const isLoadingAudit = t1 === void 0 ? false : t1;
+	const isLoadingVersions = t2 === void 0 ? false : t2;
+	const isReverting = t3 === void 0 ? false : t3;
+	const showVersionsTab = t4 === void 0 ? false : t4;
+	const { t } = useTranslation();
+	let t5;
+	if ($[0] !== t) {
+		t5 = t("history.title");
+		$[0] = t;
+		$[1] = t5;
+	} else t5 = $[1];
+	let t6;
+	if ($[2] !== t5) {
+		t6 = /* @__PURE__ */ jsx(SheetTitle, { children: t5 });
+		$[2] = t5;
+		$[3] = t6;
+	} else t6 = $[3];
+	let t7;
+	if ($[4] !== t) {
+		t7 = t("history.description");
+		$[4] = t;
+		$[5] = t7;
+	} else t7 = $[5];
+	let t8;
+	if ($[6] !== t7) {
+		t8 = /* @__PURE__ */ jsx(SheetDescription, { children: t7 });
+		$[6] = t7;
+		$[7] = t8;
+	} else t8 = $[7];
+	let t9;
+	if ($[8] !== t6 || $[9] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(SheetHeader, {
+			className: "border-b px-6 py-5",
+			children: [t6, t8]
+		});
+		$[8] = t6;
+		$[9] = t8;
+		$[10] = t9;
+	} else t9 = $[10];
+	let t10;
+	if ($[11] !== auditEntries || $[12] !== isLoadingAudit || $[13] !== isLoadingVersions || $[14] !== isReverting || $[15] !== onRevert || $[16] !== showVersionsTab || $[17] !== t || $[18] !== versions) {
+		t10 = showVersionsTab ? /* @__PURE__ */ jsxs(Tabs, {
+			defaultValue: "activity",
+			className: "flex min-h-0 flex-1 flex-col",
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: "px-6 pt-3",
+					children: /* @__PURE__ */ jsxs(TabsList, {
+						variant: "line",
+						children: [/* @__PURE__ */ jsx(TabsTrigger, {
+							value: "activity",
+							children: t("history.tabActivity")
+						}), /* @__PURE__ */ jsx(TabsTrigger, {
+							value: "versions",
+							children: t("history.tabVersions")
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsx(TabsContent, {
+					value: "activity",
+					className: "flex-1 overflow-y-auto px-6 py-4",
+					children: /* @__PURE__ */ jsx(ActivityTimeline, {
+						entries: auditEntries,
+						isLoading: isLoadingAudit
+					})
+				}),
+				/* @__PURE__ */ jsx(TabsContent, {
+					value: "versions",
+					className: "flex-1 overflow-y-auto px-6 py-4",
+					children: /* @__PURE__ */ jsx(VersionsList, {
+						versions: versions ?? [],
+						isLoading: isLoadingVersions,
+						isReverting,
+						onRevert
+					})
+				})
+			]
+		}) : /* @__PURE__ */ jsx("div", {
+			className: "flex-1 overflow-y-auto px-6 py-4",
+			children: /* @__PURE__ */ jsx(ActivityTimeline, {
+				entries: auditEntries,
+				isLoading: isLoadingAudit
+			})
+		});
+		$[11] = auditEntries;
+		$[12] = isLoadingAudit;
+		$[13] = isLoadingVersions;
+		$[14] = isReverting;
+		$[15] = onRevert;
+		$[16] = showVersionsTab;
+		$[17] = t;
+		$[18] = versions;
+		$[19] = t10;
+	} else t10 = $[19];
+	let t11;
+	if ($[20] !== t10 || $[21] !== t9) {
+		t11 = /* @__PURE__ */ jsxs(SheetContent, {
+			side: "right",
+			className: "qa-history-sidebar flex flex-col p-0 sm:max-w-xl",
+			children: [t9, t10]
+		});
+		$[20] = t10;
+		$[21] = t9;
+		$[22] = t11;
+	} else t11 = $[22];
+	let t12;
+	if ($[23] !== onOpenChange || $[24] !== open || $[25] !== t11) {
+		t12 = /* @__PURE__ */ jsx(Sheet, {
+			open,
+			onOpenChange,
+			children: t11
+		});
+		$[23] = onOpenChange;
+		$[24] = open;
+		$[25] = t11;
+		$[26] = t12;
+	} else t12 = $[26];
+	return t12;
+}
+
+//#endregion
+export { HistorySidebar };