@burdenoff/microfe-export 2026.510.111

package/dist/export/pages/ExportTemplatesPage.js

@@ -0,0 +1,343 @@
+import { useExport as e } from "../providers/ExportProvider.js";
+import { useAvailableEntities as t, useCreateExportTemplate as n, useDeleteExportTemplate as r, useExportTemplates as i } from "../hooks/useExportQueries.js";
+import { cn as a } from "../utils/cn.js";
+import { getFormatDisplayName as o } from "../constants/enums.js";
+import { tWithFallback as s } from "../utils/i18n.js";
+import { EmptyState as c, PageLayout as l } from "../components/PageLayout.js";
+import { nativeImpact as u, nativeNotify as d } from "../../utils/nativeBridge.js";
+import { useMemo as f, useState as p } from "react";
+import { ChevronRight as ee, FileBox as m, Loader2 as h, Plus as g, Search as _, Sparkles as v, X as y } from "lucide-react";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { useI18n as S } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/export/pages/ExportTemplatesPage.tsx
+var C = (e, t) => (e.endsWith("/") ? e.slice(0, -1) : e) + (t.startsWith("/") ? t : `/${t}`);
+function w() {
+	let { basePath: w = "/", navigate: T } = e(), { t: E } = S(), D = (e, t, n) => s(E, e, t, n), { data: O, isLoading: k } = i(), { deleteTemplate: A } = r(), { createTemplate: j, isPending: M } = n(), { data: N } = t(), [P, F] = p(""), [te, I] = p(!1), [L, R] = p(""), [z, B] = p(""), [V, H] = p([]), [U, W] = p("CSV"), [G, K] = p(null), [q, J] = p(null), Y = () => {
+		R(""), B(""), H([]), W("CSV"), K(null), I(!0);
+	}, X = async () => {
+		if (!L.trim()) {
+			K(D("export.templates.form.errors.nameRequired", "Template name is required."));
+			return;
+		}
+		if (V.length === 0) {
+			K(D("export.templates.form.errors.entityRequired", "Select at least one entity type."));
+			return;
+		}
+		K(null);
+		try {
+			await j({
+				name: L.trim(),
+				description: z.trim() || void 0,
+				entityTypes: V,
+				format: U
+			}), I(!1);
+		} catch (e) {
+			K(e instanceof Error ? e.message : D("export.templates.form.errors.createFailed", "Failed to create template."));
+		}
+	}, Z = (e) => {
+		H((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]);
+	}, Q = f(() => {
+		if (!P) return O;
+		let e = P.toLowerCase();
+		return O.filter((t) => t.name.toLowerCase().includes(e) || t.entityTypes.some((t) => t.toLowerCase().includes(e)));
+	}, [O, P]), $ = (e) => {
+		T?.(C(w, `templates/${e}`));
+	}, ne = async (e, t) => {
+		e.stopPropagation(), u("medium"), J(t);
+	}, re = async () => {
+		if (q) {
+			try {
+				await A(q), d("success");
+			} catch {
+				d("error");
+			}
+			J(null);
+		}
+	};
+	return /* @__PURE__ */ x(l, {
+		title: D("export.templates.title", "Export Templates"),
+		subtitle: D("export.templates.subtitle", "Reusable export configurations for common data exports"),
+		icon: /* @__PURE__ */ b(m, { size: 24 }),
+		headerActions: /* @__PURE__ */ x("div", {
+			className: "flex flex-wrap items-center gap-2",
+			children: [/* @__PURE__ */ x("button", {
+				onClick: Y,
+				className: "inline-flex items-center gap-2 px-3 py-2 sm:px-4 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium text-sm",
+				children: [/* @__PURE__ */ b(g, { size: 16 }), D("export.templates.actions.newTemplate", "New Template")]
+			}), /* @__PURE__ */ x("button", {
+				onClick: () => T?.(C(w, "new")),
+				className: "inline-flex items-center gap-2 px-3 py-2 sm:px-4 border-2 border-border rounded-lg hover:bg-accent transition-colors font-medium text-sm",
+				children: [/* @__PURE__ */ b(g, { size: 16 }), D("export.templates.actions.newExport", "New Export")]
+			})]
+		}),
+		headerContent: /* @__PURE__ */ x("span", {
+			className: "inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-muted text-muted-foreground",
+			children: [/* @__PURE__ */ b(v, { size: 12 }), D("export.templates.summary.available", "{count} template{suffix} available", {
+				count: Q.length,
+				suffix: Q.length === 1 ? "" : "s"
+			})]
+		}),
+		children: [
+			te && /* @__PURE__ */ x("div", {
+				className: "border-2 border-primary/30 rounded-xl p-6 bg-primary/5 space-y-4",
+				children: [
+					/* @__PURE__ */ x("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ b("h3", {
+							className: "font-semibold text-lg",
+							children: D("export.templates.form.title", "New Template")
+						}), /* @__PURE__ */ b("button", {
+							onClick: () => I(!1),
+							className: "p-1.5 rounded-md hover:bg-accent",
+							children: /* @__PURE__ */ b(y, { size: 16 })
+						})]
+					}),
+					G && /* @__PURE__ */ b("p", {
+						className: "text-sm text-destructive bg-destructive/10 rounded-lg px-3 py-2",
+						children: G
+					}),
+					/* @__PURE__ */ x("div", {
+						className: "grid grid-cols-1 sm:grid-cols-2 gap-4",
+						children: [/* @__PURE__ */ x("div", {
+							className: "space-y-1",
+							children: [/* @__PURE__ */ x("label", {
+								className: "text-sm font-medium",
+								children: [D("export.templates.form.fields.name", "Name"), " *"]
+							}), /* @__PURE__ */ b("input", {
+								type: "text",
+								placeholder: D("export.templates.form.fields.namePlaceholder", "e.g. Weekly Tags Export"),
+								value: L,
+								onChange: (e) => R(e.target.value),
+								className: "w-full px-3 py-2 border-2 border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
+							})]
+						}), /* @__PURE__ */ x("div", {
+							className: "space-y-1",
+							children: [/* @__PURE__ */ x("label", {
+								className: "text-sm font-medium",
+								children: [D("export.templates.form.fields.format", "Format"), " *"]
+							}), /* @__PURE__ */ x("select", {
+								value: U,
+								onChange: (e) => W(e.target.value),
+								className: "w-full px-3 py-2 border-2 border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all",
+								children: [/* @__PURE__ */ b("option", {
+									value: "CSV",
+									children: "CSV"
+								}), /* @__PURE__ */ b("option", {
+									value: "JSON",
+									children: "JSON"
+								})]
+							})]
+						})]
+					}),
+					/* @__PURE__ */ x("div", {
+						className: "space-y-1",
+						children: [/* @__PURE__ */ b("label", {
+							className: "text-sm font-medium",
+							children: D("export.templates.form.fields.description", "Description")
+						}), /* @__PURE__ */ b("input", {
+							type: "text",
+							placeholder: D("export.templates.form.fields.descriptionPlaceholder", "Optional description"),
+							value: z,
+							onChange: (e) => B(e.target.value),
+							className: "w-full px-3 py-2 border-2 border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all"
+						})]
+					}),
+					/* @__PURE__ */ x("div", {
+						className: "space-y-2",
+						children: [/* @__PURE__ */ x("label", {
+							className: "text-sm font-medium",
+							children: [
+								D("export.templates.form.fields.entityTypes", "Entity Types"),
+								" *",
+								" ",
+								/* @__PURE__ */ b("span", {
+									className: "text-muted-foreground font-normal",
+									children: D("export.templates.form.fields.entityTypesHint", "(select at least one)")
+								})
+							]
+						}), /* @__PURE__ */ b("div", {
+							className: "flex flex-wrap gap-2",
+							children: N.map((e) => /* @__PURE__ */ b("button", {
+								type: "button",
+								onClick: () => Z(e.entityType),
+								className: a("px-3 py-1.5 rounded-lg text-sm font-medium border-2 transition-all", V.includes(e.entityType) ? "border-primary bg-primary/10 text-primary" : "border-border bg-background hover:border-primary/50"),
+								children: e.displayName
+							}, e.entityType))
+						})]
+					}),
+					/* @__PURE__ */ x("div", {
+						className: "flex gap-3 pt-2",
+						children: [/* @__PURE__ */ x("button", {
+							onClick: X,
+							disabled: M,
+							className: "inline-flex items-center gap-2 px-5 py-2.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium disabled:opacity-50",
+							children: [M ? /* @__PURE__ */ b(h, {
+								size: 16,
+								className: "animate-spin"
+							}) : /* @__PURE__ */ b(g, { size: 16 }), D("export.templates.form.actions.create", "Create Template")]
+						}), /* @__PURE__ */ b("button", {
+							onClick: () => I(!1),
+							className: "px-5 py-2.5 border-2 border-border rounded-lg hover:bg-accent transition-colors font-medium",
+							children: D("export.templates.form.actions.cancel", "Cancel")
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "relative group",
+				children: [
+					/* @__PURE__ */ b(_, {
+						size: 18,
+						className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground group-focus-within:text-primary transition-colors"
+					}),
+					/* @__PURE__ */ b("input", {
+						type: "text",
+						placeholder: D("export.templates.search.placeholder", "Search templates..."),
+						value: P,
+						onChange: (e) => F(e.target.value),
+						className: "w-full pl-[3.25rem] pr-4 py-2.5 border-2 border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-200"
+					}),
+					P && /* @__PURE__ */ b("button", {
+						onClick: () => F(""),
+						className: "absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent",
+						children: /* @__PURE__ */ b(y, { size: 16 })
+					})
+				]
+			}),
+			k && /* @__PURE__ */ b("div", {
+				className: "grid grid-cols-1 lg:grid-cols-2 gap-4",
+				children: [...[
+					,
+					,
+					,
+					,
+				]].map((e, t) => /* @__PURE__ */ x("div", {
+					className: "border-2 border-border/50 rounded-xl p-5 animate-pulse",
+					children: [
+						/* @__PURE__ */ b("div", { className: "h-5 w-40 bg-muted rounded mb-3" }),
+						/* @__PURE__ */ b("div", { className: "h-3 w-full bg-muted rounded mb-2" }),
+						/* @__PURE__ */ x("div", {
+							className: "flex gap-2 mt-4",
+							children: [/* @__PURE__ */ b("div", { className: "h-5 w-16 bg-muted rounded-full" }), /* @__PURE__ */ b("div", { className: "h-5 w-16 bg-muted rounded-full" })]
+						})
+					]
+				}, t))
+			}),
+			k ? null : Q.length > 0 ? /* @__PURE__ */ b("div", {
+				className: "grid grid-cols-1 lg:grid-cols-2 gap-4",
+				children: Q.map((e, t) => /* @__PURE__ */ x("div", {
+					role: "button",
+					tabIndex: 0,
+					onClick: () => $(e.id),
+					onKeyDown: (t) => {
+						(t.key === "Enter" || t.key === " ") && (t.preventDefault(), $(e.id));
+					},
+					className: a("text-left group cursor-pointer border-2 border-border/50 rounded-xl overflow-hidden", "hover:shadow-md hover:border-primary/30 transition-all duration-200", "animate-in fade-in-0 slide-in-from-bottom-2"),
+					style: { animationDelay: `${t * 50}ms` },
+					children: [/* @__PURE__ */ b("div", {
+						className: "p-4 border-b bg-muted/30",
+						children: /* @__PURE__ */ x("div", {
+							className: "flex items-start justify-between",
+							children: [/* @__PURE__ */ x("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ b("div", {
+									className: "p-2 rounded-lg bg-primary/10",
+									children: /* @__PURE__ */ b(m, {
+										size: 20,
+										className: "text-primary"
+									})
+								}), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("h3", {
+									className: "font-semibold",
+									children: e.name
+								}), /* @__PURE__ */ x("p", {
+									className: "text-xs text-muted-foreground",
+									children: [o(e.format), e.isDefault && /* @__PURE__ */ b("span", {
+										className: "ml-1.5 inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-primary/10 text-primary font-medium",
+										children: D("export.templates.card.default", "Default")
+									})]
+								})] })]
+							}), /* @__PURE__ */ x("div", {
+								className: "flex items-center gap-2",
+								children: [/* @__PURE__ */ b("button", {
+									onClick: (t) => ne(t, e.id),
+									className: "p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors",
+									"aria-label": D("export.templates.card.deleteAriaLabel", "Delete {name}", { name: e.name }),
+									children: /* @__PURE__ */ b(y, { size: 14 })
+								}), /* @__PURE__ */ b(ee, {
+									size: 18,
+									className: "text-muted-foreground group-hover:text-primary transition-colors mt-1"
+								})]
+							})]
+						})
+					}), /* @__PURE__ */ x("div", {
+						className: "p-4",
+						children: [e.description && /* @__PURE__ */ b("p", {
+							className: "text-sm text-muted-foreground mb-3 line-clamp-2",
+							children: e.description
+						}), /* @__PURE__ */ x("div", {
+							className: "flex flex-wrap gap-1.5 overflow-hidden",
+							children: [e.entityTypes.slice(0, 6).map((e) => /* @__PURE__ */ b("span", {
+								className: "inline-flex px-2 py-0.5 rounded text-xs font-medium bg-muted text-muted-foreground max-w-full truncate",
+								children: e
+							}, e)), e.entityTypes.length > 6 && /* @__PURE__ */ b("span", {
+								className: "inline-flex px-2 py-0.5 rounded text-xs font-medium bg-muted text-muted-foreground",
+								children: D("export.templates.card.moreEntities", "+{count} more", { count: e.entityTypes.length - 6 })
+							})]
+						})]
+					})]
+				}, e.id))
+			}) : /* @__PURE__ */ b(c, {
+				icon: b(P ? _ : m, { size: 48 }),
+				title: P ? D("export.templates.empty.filtered.title", "No matching templates") : D("export.templates.empty.title", "No templates yet"),
+				description: P ? D("export.templates.empty.filtered.description", "Try adjusting your search to find what you are looking for.") : D("export.templates.empty.description", "Create a template to save reusable export configurations."),
+				action: P ? /* @__PURE__ */ x("button", {
+					onClick: () => F(""),
+					className: "inline-flex items-center gap-2 px-4 py-2 border-2 border-border rounded-lg hover:bg-accent transition-colors font-medium",
+					children: [/* @__PURE__ */ b(y, { size: 16 }), D("export.templates.empty.filtered.actions.clear", "Clear Search")]
+				}) : /* @__PURE__ */ x("button", {
+					onClick: Y,
+					className: "inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium",
+					children: [/* @__PURE__ */ b(g, { size: 16 }), D("export.templates.empty.actions.newTemplate", "New Template")]
+				})
+			}),
+			q && /* @__PURE__ */ b("div", {
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": "template-list-delete-title",
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4",
+				children: /* @__PURE__ */ x("div", {
+					className: "w-full max-w-md rounded-xl border-2 border-border bg-card p-6 shadow-xl",
+					children: [
+						/* @__PURE__ */ b("h2", {
+							id: "template-list-delete-title",
+							className: "text-lg font-bold",
+							children: D("export.templates.delete.title", "Delete template?")
+						}),
+						/* @__PURE__ */ b("p", {
+							className: "mt-2 text-sm text-muted-foreground",
+							children: D("export.templates.delete.description", "This removes the saved export configuration. Existing export jobs are not deleted.")
+						}),
+						/* @__PURE__ */ x("div", {
+							className: "mt-6 flex flex-col-reverse sm:flex-row sm:justify-end gap-3",
+							children: [/* @__PURE__ */ b("button", {
+								type: "button",
+								onClick: () => J(null),
+								className: "px-4 py-2 rounded-lg border-2 border-border hover:bg-accent transition-colors font-medium",
+								children: D("export.templates.delete.cancel", "Keep Template")
+							}), /* @__PURE__ */ b("button", {
+								type: "button",
+								onClick: re,
+								className: "px-4 py-2 rounded-lg bg-destructive text-destructive-foreground hover:bg-destructive/90 transition-colors font-medium",
+								children: D("export.templates.delete.confirmAction", "Delete Template")
+							})]
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+export { w as ExportTemplatesPage };
+
+//# sourceMappingURL=ExportTemplatesPage.js.map

package/dist/export/pages/ExportTemplatesPage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExportTemplatesPage.js","names":[],"sources":["../../../src/export/pages/ExportTemplatesPage.tsx"],"sourcesContent":["import { useState, useMemo } from \"react\";\nimport {\n  Search,\n  X,\n  FileBox,\n  Plus,\n  ChevronRight,\n  Sparkles,\n  Loader2,\n} from \"lucide-react\";\nimport { useI18n } from \"@burdenoff/fe-libs/shared/providers/shell/I18nProvider\";\nimport { useExport } from \"../providers/ExportProvider\";\nimport {\n  useExportTemplates,\n  useDeleteExportTemplate,\n  useCreateExportTemplate,\n  useAvailableEntities,\n} from \"../hooks/useExportQueries\";\nimport { PageLayout, EmptyState } from \"../components/PageLayout\";\nimport { getFormatDisplayName } from \"../constants/enums\";\nimport { cn } from \"../utils/cn\";\nimport { tWithFallback } from \"../utils/i18n\";\nimport type { ExportFormat } from \"../types\";\nimport { nativeImpact, nativeNotify } from \"../../utils/nativeBridge\";\n\n/**\n * Helper to join paths correctly\n */\nconst joinPath = (base: string, path: string): string => {\n  const cleanBase = base.endsWith(\"/\") ? base.slice(0, -1) : base;\n  const cleanPath = path.startsWith(\"/\") ? path : `/${path}`;\n  return cleanBase + cleanPath;\n};\n\n/**\n * Export Templates Page\n * Template management list for reusable export configurations\n */\nexport function ExportTemplatesPage() {\n  const { basePath = \"/\", navigate } = useExport();\n  const { t } = useI18n();\n  const tr = (\n    key: string,\n    fallback: string,\n    params?: Record<string, string | number>,\n  ) => tWithFallback(t, key, fallback, params);\n  const { data: templates, isLoading } = useExportTemplates();\n  const { deleteTemplate } = useDeleteExportTemplate();\n  const { createTemplate, isPending: creating } = useCreateExportTemplate();\n  const { data: availableEntities } = useAvailableEntities();\n\n  const [searchQuery, setSearchQuery] = useState(\"\");\n  const [showCreateForm, setShowCreateForm] = useState(false);\n  const [newTemplateName, setNewTemplateName] = useState(\"\");\n  const [newTemplateDescription, setNewTemplateDescription] = useState(\"\");\n  const [newTemplateEntityTypes, setNewTemplateEntityTypes] = useState<\n    string[]\n  >([]);\n  const [newTemplateFormat, setNewTemplateFormat] =\n    useState<ExportFormat>(\"CSV\");\n  const [createError, setCreateError] = useState<string | null>(null);\n  const [templatePendingDelete, setTemplatePendingDelete] = useState<\n    string | null\n  >(null);\n\n  const handleOpenCreate = () => {\n    setNewTemplateName(\"\");\n    setNewTemplateDescription(\"\");\n    setNewTemplateEntityTypes([]);\n    setNewTemplateFormat(\"CSV\");\n    setCreateError(null);\n    setShowCreateForm(true);\n  };\n\n  const handleCreateTemplate = async () => {\n    if (!newTemplateName.trim()) {\n      setCreateError(\n        tr(\n          \"export.templates.form.errors.nameRequired\",\n          \"Template name is required.\",\n        ),\n      );\n      return;\n    }\n    if (newTemplateEntityTypes.length === 0) {\n      setCreateError(\n        tr(\n          \"export.templates.form.errors.entityRequired\",\n          \"Select at least one entity type.\",\n        ),\n      );\n      return;\n    }\n    setCreateError(null);\n    try {\n      await createTemplate({\n        name: newTemplateName.trim(),\n        description: newTemplateDescription.trim() || undefined,\n        entityTypes: newTemplateEntityTypes,\n        format: newTemplateFormat,\n      });\n      setShowCreateForm(false);\n    } catch (err) {\n      setCreateError(\n        err instanceof Error\n          ? err.message\n          : tr(\n              \"export.templates.form.errors.createFailed\",\n              \"Failed to create template.\",\n            ),\n      );\n    }\n  };\n\n  const toggleEntity = (entityType: string) => {\n    setNewTemplateEntityTypes((prev) =>\n      prev.includes(entityType)\n        ? prev.filter((e) => e !== entityType)\n        : [...prev, entityType],\n    );\n  };\n\n  // Client-side search filter\n  const filteredTemplates = useMemo(() => {\n    if (!searchQuery) return templates;\n    const q = searchQuery.toLowerCase();\n    return templates.filter(\n      (t) =>\n        t.name.toLowerCase().includes(q) ||\n        t.entityTypes.some((e) => e.toLowerCase().includes(q)),\n    );\n  }, [templates, searchQuery]);\n\n  const handleTemplateClick = (templateId: string) => {\n    navigate?.(joinPath(basePath, `templates/${templateId}`));\n  };\n\n  const handleDeleteTemplate = async (\n    e: React.MouseEvent,\n    templateId: string,\n  ) => {\n    e.stopPropagation();\n    nativeImpact(\"medium\");\n    setTemplatePendingDelete(templateId);\n  };\n\n  const confirmDeleteTemplate = async () => {\n    if (!templatePendingDelete) return;\n    try {\n      await deleteTemplate(templatePendingDelete);\n      nativeNotify(\"success\");\n    } catch {\n      nativeNotify(\"error\");\n    }\n    setTemplatePendingDelete(null);\n  };\n\n  return (\n    <PageLayout\n      title={tr(\"export.templates.title\", \"Export Templates\")}\n      subtitle={tr(\n        \"export.templates.subtitle\",\n        \"Reusable export configurations for common data exports\",\n      )}\n      icon={<FileBox size={24} />}\n      headerActions={\n        <div className=\"flex flex-wrap items-center gap-2\">\n          <button\n            onClick={handleOpenCreate}\n            className=\"inline-flex items-center gap-2 px-3 py-2 sm:px-4 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium text-sm\"\n          >\n            <Plus size={16} />\n            {tr(\"export.templates.actions.newTemplate\", \"New Template\")}\n          </button>\n          <button\n            onClick={() => navigate?.(joinPath(basePath, \"new\"))}\n            className=\"inline-flex items-center gap-2 px-3 py-2 sm:px-4 border-2 border-border rounded-lg hover:bg-accent transition-colors font-medium text-sm\"\n          >\n            <Plus size={16} />\n            {tr(\"export.templates.actions.newExport\", \"New Export\")}\n          </button>\n        </div>\n      }\n      headerContent={\n        <span className=\"inline-flex items-center gap-1.5 px-2.5 py-0.5 rounded-full text-xs font-medium bg-muted text-muted-foreground\">\n          <Sparkles size={12} />\n          {tr(\n            \"export.templates.summary.available\",\n            \"{count} template{suffix} available\",\n            {\n              count: filteredTemplates.length,\n              suffix: filteredTemplates.length !== 1 ? \"s\" : \"\",\n            },\n          )}\n        </span>\n      }\n    >\n      {/* Create Template Form */}\n      {showCreateForm && (\n        <div className=\"border-2 border-primary/30 rounded-xl p-6 bg-primary/5 space-y-4\">\n          <div className=\"flex items-center justify-between\">\n            <h3 className=\"font-semibold text-lg\">\n              {tr(\"export.templates.form.title\", \"New Template\")}\n            </h3>\n            <button\n              onClick={() => setShowCreateForm(false)}\n              className=\"p-1.5 rounded-md hover:bg-accent\"\n            >\n              <X size={16} />\n            </button>\n          </div>\n          {createError && (\n            <p className=\"text-sm text-destructive bg-destructive/10 rounded-lg px-3 py-2\">\n              {createError}\n            </p>\n          )}\n          <div className=\"grid grid-cols-1 sm:grid-cols-2 gap-4\">\n            <div className=\"space-y-1\">\n              <label className=\"text-sm font-medium\">\n                {tr(\"export.templates.form.fields.name\", \"Name\")} *\n              </label>\n              <input\n                type=\"text\"\n                placeholder={tr(\n                  \"export.templates.form.fields.namePlaceholder\",\n                  \"e.g. Weekly Tags Export\",\n                )}\n                value={newTemplateName}\n                onChange={(e) => setNewTemplateName(e.target.value)}\n                className=\"w-full px-3 py-2 border-2 border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all\"\n              />\n            </div>\n            <div className=\"space-y-1\">\n              <label className=\"text-sm font-medium\">\n                {tr(\"export.templates.form.fields.format\", \"Format\")} *\n              </label>\n              <select\n                value={newTemplateFormat}\n                onChange={(e) =>\n                  setNewTemplateFormat(e.target.value as ExportFormat)\n                }\n                className=\"w-full px-3 py-2 border-2 border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all\"\n              >\n                <option value=\"CSV\">CSV</option>\n                <option value=\"JSON\">JSON</option>\n              </select>\n            </div>\n          </div>\n          <div className=\"space-y-1\">\n            <label className=\"text-sm font-medium\">\n              {tr(\"export.templates.form.fields.description\", \"Description\")}\n            </label>\n            <input\n              type=\"text\"\n              placeholder={tr(\n                \"export.templates.form.fields.descriptionPlaceholder\",\n                \"Optional description\",\n              )}\n              value={newTemplateDescription}\n              onChange={(e) => setNewTemplateDescription(e.target.value)}\n              className=\"w-full px-3 py-2 border-2 border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all\"\n            />\n          </div>\n          <div className=\"space-y-2\">\n            <label className=\"text-sm font-medium\">\n              {tr(\"export.templates.form.fields.entityTypes\", \"Entity Types\")} *{\" \"}\n              <span className=\"text-muted-foreground font-normal\">\n                {tr(\n                  \"export.templates.form.fields.entityTypesHint\",\n                  \"(select at least one)\",\n                )}\n              </span>\n            </label>\n            <div className=\"flex flex-wrap gap-2\">\n              {availableEntities.map((entity) => (\n                <button\n                  key={entity.entityType}\n                  type=\"button\"\n                  onClick={() => toggleEntity(entity.entityType)}\n                  className={cn(\n                    \"px-3 py-1.5 rounded-lg text-sm font-medium border-2 transition-all\",\n                    newTemplateEntityTypes.includes(entity.entityType)\n                      ? \"border-primary bg-primary/10 text-primary\"\n                      : \"border-border bg-background hover:border-primary/50\",\n                  )}\n                >\n                  {entity.displayName}\n                </button>\n              ))}\n            </div>\n          </div>\n          <div className=\"flex gap-3 pt-2\">\n            <button\n              onClick={handleCreateTemplate}\n              disabled={creating}\n              className=\"inline-flex items-center gap-2 px-5 py-2.5 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium disabled:opacity-50\"\n            >\n              {creating ? (\n                <Loader2 size={16} className=\"animate-spin\" />\n              ) : (\n                <Plus size={16} />\n              )}\n              {tr(\"export.templates.form.actions.create\", \"Create Template\")}\n            </button>\n            <button\n              onClick={() => setShowCreateForm(false)}\n              className=\"px-5 py-2.5 border-2 border-border rounded-lg hover:bg-accent transition-colors font-medium\"\n            >\n              {tr(\"export.templates.form.actions.cancel\", \"Cancel\")}\n            </button>\n          </div>\n        </div>\n      )}\n      {/* Search */}\n      <div className=\"relative group\">\n        <Search\n          size={18}\n          className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground group-focus-within:text-primary transition-colors\"\n        />\n        <input\n          type=\"text\"\n          placeholder={tr(\n            \"export.templates.search.placeholder\",\n            \"Search templates...\",\n          )}\n          value={searchQuery}\n          onChange={(e) => setSearchQuery(e.target.value)}\n          className=\"w-full pl-[3.25rem] pr-4 py-2.5 border-2 border-border rounded-lg bg-background focus:outline-none focus:ring-2 focus:ring-primary/20 focus:border-primary transition-all duration-200\"\n        />\n        {searchQuery && (\n          <button\n            onClick={() => setSearchQuery(\"\")}\n            className=\"absolute right-3 top-1/2 -translate-y-1/2 p-1 rounded-md text-muted-foreground hover:text-foreground hover:bg-accent\"\n          >\n            <X size={16} />\n          </button>\n        )}\n      </div>\n\n      {/* Loading */}\n      {isLoading && (\n        <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n          {[...Array(4)].map((_, i) => (\n            <div\n              key={i}\n              className=\"border-2 border-border/50 rounded-xl p-5 animate-pulse\"\n            >\n              <div className=\"h-5 w-40 bg-muted rounded mb-3\" />\n              <div className=\"h-3 w-full bg-muted rounded mb-2\" />\n              <div className=\"flex gap-2 mt-4\">\n                <div className=\"h-5 w-16 bg-muted rounded-full\" />\n                <div className=\"h-5 w-16 bg-muted rounded-full\" />\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Templates Grid */}\n      {!isLoading ? (\n        filteredTemplates.length > 0 ? (\n          <div className=\"grid grid-cols-1 lg:grid-cols-2 gap-4\">\n            {filteredTemplates.map((template, index) => (\n              <div\n                key={template.id}\n                role=\"button\"\n                tabIndex={0}\n                onClick={() => handleTemplateClick(template.id)}\n                onKeyDown={(e) => {\n                  if (e.key === \"Enter\" || e.key === \" \") {\n                    e.preventDefault();\n                    handleTemplateClick(template.id);\n                  }\n                }}\n                className={cn(\n                  \"text-left group cursor-pointer border-2 border-border/50 rounded-xl overflow-hidden\",\n                  \"hover:shadow-md hover:border-primary/30 transition-all duration-200\",\n                  \"animate-in fade-in-0 slide-in-from-bottom-2\",\n                )}\n                style={{ animationDelay: `${index * 50}ms` }}\n              >\n                {/* Header */}\n                <div className=\"p-4 border-b bg-muted/30\">\n                  <div className=\"flex items-start justify-between\">\n                    <div className=\"flex items-center gap-3\">\n                      <div className=\"p-2 rounded-lg bg-primary/10\">\n                        <FileBox size={20} className=\"text-primary\" />\n                      </div>\n                      <div>\n                        <h3 className=\"font-semibold\">{template.name}</h3>\n                        <p className=\"text-xs text-muted-foreground\">\n                          {getFormatDisplayName(template.format)}\n                          {template.isDefault && (\n                            <span className=\"ml-1.5 inline-flex items-center px-1.5 py-0.5 rounded text-xs bg-primary/10 text-primary font-medium\">\n                              {tr(\"export.templates.card.default\", \"Default\")}\n                            </span>\n                          )}\n                        </p>\n                      </div>\n                    </div>\n                    <div className=\"flex items-center gap-2\">\n                      <button\n                        onClick={(e) => handleDeleteTemplate(e, template.id)}\n                        className=\"p-1.5 rounded-md text-muted-foreground hover:text-destructive hover:bg-destructive/10 transition-colors\"\n                        aria-label={tr(\n                          \"export.templates.card.deleteAriaLabel\",\n                          \"Delete {name}\",\n                          { name: template.name },\n                        )}\n                      >\n                        <X size={14} />\n                      </button>\n                      <ChevronRight\n                        size={18}\n                        className=\"text-muted-foreground group-hover:text-primary transition-colors mt-1\"\n                      />\n                    </div>\n                  </div>\n                </div>\n\n                {/* Body */}\n                <div className=\"p-4\">\n                  {template.description && (\n                    <p className=\"text-sm text-muted-foreground mb-3 line-clamp-2\">\n                      {template.description}\n                    </p>\n                  )}\n                  <div className=\"flex flex-wrap gap-1.5 overflow-hidden\">\n                    {template.entityTypes.slice(0, 6).map((entity) => (\n                      <span\n                        key={entity}\n                        className=\"inline-flex px-2 py-0.5 rounded text-xs font-medium bg-muted text-muted-foreground max-w-full truncate\"\n                      >\n                        {entity}\n                      </span>\n                    ))}\n                    {template.entityTypes.length > 6 && (\n                      <span className=\"inline-flex px-2 py-0.5 rounded text-xs font-medium bg-muted text-muted-foreground\">\n                        {tr(\n                          \"export.templates.card.moreEntities\",\n                          \"+{count} more\",\n                          {\n                            count: template.entityTypes.length - 6,\n                          },\n                        )}\n                      </span>\n                    )}\n                  </div>\n                </div>\n              </div>\n            ))}\n          </div>\n        ) : (\n          <EmptyState\n            icon={searchQuery ? <Search size={48} /> : <FileBox size={48} />}\n            title={\n              searchQuery\n                ? tr(\n                    \"export.templates.empty.filtered.title\",\n                    \"No matching templates\",\n                  )\n                : tr(\"export.templates.empty.title\", \"No templates yet\")\n            }\n            description={\n              searchQuery\n                ? tr(\n                    \"export.templates.empty.filtered.description\",\n                    \"Try adjusting your search to find what you are looking for.\",\n                  )\n                : tr(\n                    \"export.templates.empty.description\",\n                    \"Create a template to save reusable export configurations.\",\n                  )\n            }\n            action={\n              searchQuery ? (\n                <button\n                  onClick={() => setSearchQuery(\"\")}\n                  className=\"inline-flex items-center gap-2 px-4 py-2 border-2 border-border rounded-lg hover:bg-accent transition-colors font-medium\"\n                >\n                  <X size={16} />\n                  {tr(\n                    \"export.templates.empty.filtered.actions.clear\",\n                    \"Clear Search\",\n                  )}\n                </button>\n              ) : (\n                <button\n                  onClick={handleOpenCreate}\n                  className=\"inline-flex items-center gap-2 px-4 py-2 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium\"\n                >\n                  <Plus size={16} />\n                  {tr(\n                    \"export.templates.empty.actions.newTemplate\",\n                    \"New Template\",\n                  )}\n                </button>\n              )\n            }\n          />\n        )\n      ) : null}\n      {templatePendingDelete && (\n        <div\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-labelledby=\"template-list-delete-title\"\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4\"\n        >\n          <div className=\"w-full max-w-md rounded-xl border-2 border-border bg-card p-6 shadow-xl\">\n            <h2 id=\"template-list-delete-title\" className=\"text-lg font-bold\">\n              {tr(\"export.templates.delete.title\", \"Delete template?\")}\n            </h2>\n            <p className=\"mt-2 text-sm text-muted-foreground\">\n              {tr(\n                \"export.templates.delete.description\",\n                \"This removes the saved export configuration. Existing export jobs are not deleted.\",\n              )}\n            </p>\n            <div className=\"mt-6 flex flex-col-reverse sm:flex-row sm:justify-end gap-3\">\n              <button\n                type=\"button\"\n                onClick={() => setTemplatePendingDelete(null)}\n                className=\"px-4 py-2 rounded-lg border-2 border-border hover:bg-accent transition-colors font-medium\"\n              >\n                {tr(\"export.templates.delete.cancel\", \"Keep Template\")}\n              </button>\n              <button\n                type=\"button\"\n                onClick={confirmDeleteTemplate}\n                className=\"px-4 py-2 rounded-lg bg-destructive text-destructive-foreground hover:bg-destructive/90 transition-colors font-medium\"\n              >\n                {tr(\"export.templates.delete.confirmAction\", \"Delete Template\")}\n              </button>\n            </div>\n          </div>\n        </div>\n      )}\n    </PageLayout>\n  );\n}\n"],"mappings":"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"}

package/dist/export/pages/TemplateDetailPage.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Template Detail Page
+ * View template details and use it to create a new export.
+ * Fetches template from the backend via useExportTemplate hook.
+ */
+export declare function TemplateDetailPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TemplateDetailPage.d.ts.map

package/dist/export/pages/TemplateDetailPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateDetailPage.d.ts","sourceRoot":"","sources":["../../../src/export/pages/TemplateDetailPage.tsx"],"names":[],"mappings":"AAmCA;;;;GAIG;AACH,wBAAgB,kBAAkB,4CAoOjC"}

package/dist/export/pages/TemplateDetailPage.js

@@ -0,0 +1,215 @@
+import { useExport as e } from "../providers/ExportProvider.js";
+import { useDeleteExportTemplate as t, useExportTemplate as n } from "../hooks/useExportQueries.js";
+import { getArchiveFormatDisplayName as r, getFormatDisplayName as i } from "../constants/enums.js";
+import { PageLayout as a, PageSection as o } from "../components/PageLayout.js";
+import { nativeImpact as s, nativeNotify as c } from "../../utils/nativeBridge.js";
+import { useState as l } from "react";
+import { AlertCircle as u, ArrowLeft as d, Clock as f, Download as p, FileBox as m, FileText as h, HardDrive as g, Loader2 as _, Play as v, Trash2 as y } from "lucide-react";
+import { useParams as b } from "react-router-dom";
+import { jsx as x, jsxs as S } from "react/jsx-runtime";
+//#region src/export/pages/TemplateDetailPage.tsx
+var C = (e, t) => (e.endsWith("/") ? e.slice(0, -1) : e) + (t.startsWith("/") ? t : `/${t}`);
+function w() {
+	let { templateId: w } = b(), { basePath: T = "/", navigate: E } = e(), [D, O] = l(!1), { data: k, isLoading: A } = n(w), { deleteTemplate: j, isPending: M } = t();
+	return A ? /* @__PURE__ */ S("div", {
+		className: "flex flex-col items-center justify-center py-20",
+		children: [/* @__PURE__ */ x(_, {
+			size: 48,
+			className: "animate-spin text-primary"
+		}), /* @__PURE__ */ x("span", {
+			className: "mt-6 text-sm font-medium text-muted-foreground",
+			children: "Loading template details..."
+		})]
+	}) : k ? /* @__PURE__ */ S(a, {
+		showHeader: !1,
+		children: [
+			/* @__PURE__ */ x("div", {
+				className: "relative overflow-hidden rounded-xl bg-gradient-to-br from-primary/5 via-primary/3 to-background border border-border/50 p-6 shadow-sm",
+				children: /* @__PURE__ */ S("div", {
+					className: "relative z-10 flex items-center gap-4",
+					children: [/* @__PURE__ */ x("button", {
+						onClick: () => E?.(C(T, "templates")),
+						className: "p-2.5 hover:bg-accent rounded-lg transition-all duration-200",
+						children: /* @__PURE__ */ x(d, { size: 20 })
+					}), /* @__PURE__ */ S("div", {
+						className: "flex items-center gap-3 flex-1",
+						children: [/* @__PURE__ */ x("div", {
+							className: "p-2.5 rounded-lg bg-primary/10",
+							children: /* @__PURE__ */ x(m, {
+								size: 24,
+								className: "text-primary"
+							})
+						}), /* @__PURE__ */ S("div", {
+							className: "flex-1 min-w-0",
+							children: [/* @__PURE__ */ x("h1", {
+								className: "text-xl sm:text-2xl font-bold truncate",
+								children: k.name
+							}), /* @__PURE__ */ x("p", {
+								className: "text-sm text-muted-foreground mt-1",
+								children: k.isDefault ? "Default template" : "Custom template"
+							})]
+						})]
+					})]
+				})
+			}),
+			k.description && /* @__PURE__ */ x("div", {
+				className: "border-2 border-border/50 rounded-xl p-5",
+				children: /* @__PURE__ */ x("p", {
+					className: "text-sm text-muted-foreground",
+					children: k.description
+				})
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4",
+				children: [
+					{
+						icon: /* @__PURE__ */ x(h, { size: 18 }),
+						label: "Format",
+						value: i(k.format)
+					},
+					{
+						icon: /* @__PURE__ */ x(g, { size: 18 }),
+						label: "Archive",
+						value: r("ZIP")
+					},
+					{
+						icon: /* @__PURE__ */ x(p, { size: 18 }),
+						label: "Entity Types",
+						value: `${k.entityTypes.length} type${k.entityTypes.length === 1 ? "" : "s"}`
+					},
+					{
+						icon: /* @__PURE__ */ x(f, { size: 18 }),
+						label: "Last Updated",
+						value: new Date(k.updatedAt).toLocaleDateString()
+					}
+				].map((e) => /* @__PURE__ */ S("div", {
+					className: "border-2 border-border/50 rounded-xl p-4 bg-gradient-to-br from-card/50 to-background",
+					children: [/* @__PURE__ */ S("div", {
+						className: "flex items-center gap-2 text-muted-foreground mb-1",
+						children: [e.icon, /* @__PURE__ */ x("span", {
+							className: "text-xs font-medium",
+							children: e.label
+						})]
+					}), /* @__PURE__ */ x("p", {
+						className: "font-bold text-lg",
+						children: e.value
+					})]
+				}, e.label))
+			}),
+			/* @__PURE__ */ x(o, {
+				title: "Included Entity Types",
+				description: "Data types that will be exported",
+				children: /* @__PURE__ */ x("div", {
+					className: "flex flex-wrap gap-2",
+					children: k.entityTypes.map((e) => /* @__PURE__ */ x("span", {
+						className: "inline-flex items-center gap-2 px-3 py-2 rounded-lg text-sm font-medium border-2 border-border/50 bg-muted/30",
+						children: e
+					}, e))
+				})
+			}),
+			/* @__PURE__ */ S("div", {
+				className: "flex flex-col sm:flex-row gap-3 pt-2",
+				children: [/* @__PURE__ */ S("button", {
+					onClick: () => {
+						E?.(C(T, `new?templateId=${w}`));
+					},
+					className: "flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-all duration-200 hover:scale-105 font-bold shadow-lg",
+					children: [/* @__PURE__ */ x(v, { size: 18 }), "Use Template"]
+				}), !k.isDefault && /* @__PURE__ */ S("button", {
+					onClick: () => O(!0),
+					disabled: M,
+					className: "inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-status-error-bg/50 text-status-error-text rounded-lg hover:bg-status-error-bg-subtle transition-all duration-200 font-medium disabled:opacity-50",
+					children: [M ? /* @__PURE__ */ x(_, {
+						size: 18,
+						className: "animate-spin"
+					}) : /* @__PURE__ */ x(y, { size: 18 }), "Delete Template"]
+				})]
+			}),
+			D && /* @__PURE__ */ x("div", {
+				role: "dialog",
+				"aria-modal": "true",
+				"aria-labelledby": "template-delete-title",
+				className: "fixed inset-0 z-50 flex items-center justify-center bg-background/80 backdrop-blur-sm p-4",
+				children: /* @__PURE__ */ S("div", {
+					className: "w-full max-w-md rounded-xl border-2 border-border bg-card p-6 shadow-xl",
+					children: [
+						/* @__PURE__ */ x("h2", {
+							id: "template-delete-title",
+							className: "text-lg font-bold",
+							children: "Delete template?"
+						}),
+						/* @__PURE__ */ x("p", {
+							className: "mt-2 text-sm text-muted-foreground",
+							children: "This removes the saved export configuration. Existing export jobs are not deleted."
+						}),
+						/* @__PURE__ */ S("div", {
+							className: "mt-6 flex flex-col-reverse sm:flex-row sm:justify-end gap-3",
+							children: [/* @__PURE__ */ x("button", {
+								type: "button",
+								onClick: () => O(!1),
+								className: "px-4 py-2 rounded-lg border-2 border-border hover:bg-accent transition-colors font-medium",
+								children: "Keep Template"
+							}), /* @__PURE__ */ S("button", {
+								type: "button",
+								onClick: async () => {
+									if (w) {
+										s("medium");
+										try {
+											await j(w), c("success"), E?.(C(T, "templates"));
+										} catch {
+											c("error");
+										}
+									}
+								},
+								disabled: M,
+								className: "inline-flex items-center justify-center gap-2 px-4 py-2 rounded-lg bg-destructive text-destructive-foreground hover:bg-destructive/90 transition-colors font-medium disabled:opacity-50",
+								children: [M ? /* @__PURE__ */ x(_, {
+									size: 16,
+									className: "animate-spin"
+								}) : null, "Delete Template"]
+							})]
+						})
+					]
+				})
+			})
+		]
+	}) : /* @__PURE__ */ S(a, {
+		showHeader: !1,
+		children: [/* @__PURE__ */ S("div", {
+			className: "flex items-center gap-3 mb-6",
+			children: [/* @__PURE__ */ x("button", {
+				onClick: () => E?.(C(T, "templates")),
+				className: "p-2.5 hover:bg-accent rounded-lg transition-all duration-200",
+				children: /* @__PURE__ */ x(d, { size: 20 })
+			}), /* @__PURE__ */ x("h1", {
+				className: "text-xl font-bold",
+				children: "Template Not Found"
+			})]
+		}), /* @__PURE__ */ S("div", {
+			className: "border-2 border-border-default rounded-xl bg-status-error-bg-subtle p-12 text-center",
+			children: [
+				/* @__PURE__ */ x(u, {
+					size: 48,
+					className: "text-status-error-text mx-auto mb-4"
+				}),
+				/* @__PURE__ */ x("h3", {
+					className: "text-lg font-bold text-status-error-text mb-2",
+					children: "Template Not Found"
+				}),
+				/* @__PURE__ */ x("p", {
+					className: "text-status-error-text mb-6",
+					children: "The template you are looking for does not exist."
+				}),
+				/* @__PURE__ */ S("button", {
+					onClick: () => E?.(C(T, "templates")),
+					className: "inline-flex items-center gap-2 px-6 py-3 bg-primary text-primary-foreground rounded-lg hover:bg-primary/90 transition-colors font-medium",
+					children: [/* @__PURE__ */ x(d, { size: 18 }), "Back to Templates"]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { w as TemplateDetailPage };
+
+//# sourceMappingURL=TemplateDetailPage.js.map