@burdenoff/microfe-movethewheels 2026.1031.1 → 2026.1031.3

package/dist/pages/ImportExportPage.js

@@ -0,0 +1,435 @@
+import { ArrowDownUp as e } from "../node_modules/lucide-react/dist/esm/icons/arrow-down-up.js";
+import { CircleAlert as t } from "../node_modules/lucide-react/dist/esm/icons/circle-alert.js";
+import { CircleCheckBig as n } from "../node_modules/lucide-react/dist/esm/icons/circle-check-big.js";
+import { Download as r } from "../node_modules/lucide-react/dist/esm/icons/download.js";
+import { FileSpreadsheet as i } from "../node_modules/lucide-react/dist/esm/icons/file-spreadsheet.js";
+import { FileUp as a } from "../node_modules/lucide-react/dist/esm/icons/file-up.js";
+import { Info as o } from "../node_modules/lucide-react/dist/esm/icons/info.js";
+import { LoaderCircle as s } from "../node_modules/lucide-react/dist/esm/icons/loader-circle.js";
+import { ShieldCheck as c } from "../node_modules/lucide-react/dist/esm/icons/shield-check.js";
+import { Upload as l } from "../node_modules/lucide-react/dist/esm/icons/upload.js";
+import { joinPath as u } from "../utils/navigation.js";
+import { useMoveTheWheels as d } from "../providers/MoveTheWheelsProvider.js";
+import { Badge as f, Button as p, Card as m, CardContent as h, CardDescription as g, CardHeader as _, CardTitle as v, Checkbox as ee, Label as y, Select as b, SelectContent as te, SelectItem as ne, SelectTrigger as re, SelectValue as ie, Skeleton as x, Table as S, TableBody as C, TableCell as w, TableHead as T, TableHeader as E, TableRow as D } from "../components/ui.js";
+import { PageLayout as ae } from "../components/PageLayout.js";
+import { useEntityExport as O } from "../hooks/useEntityExport.js";
+import { ExportStatusBanner as k } from "../components/ExportStatusBanner.js";
+import { MTW_IMPORT_ENTITIES as A, MTW_IMPORT_MAX_ROWS as oe, buildCsvTemplate as se, detectImportFormat as ce, importEntity as le, isImportEntityType as j, summariseImport as M } from "../utils/entityImport.js";
+import { useEntityImport as ue, useImportSpec as de } from "../hooks/useEntityImport.js";
+import { useMemo as fe, useRef as pe, useState as N } from "react";
+import { useSearchParams as P } from "react-router";
+import { jsx as F, jsxs as I } from "react/jsx-runtime";
+import { EmphasisPanel as L, PagePurpose as R } from "@burdenoff/fe-libs/ui";
+//#region src/movethewheels/pages/ImportExportPage.tsx
+var z = {
+	CUSTOMER: "customers",
+	VEHICLE: "fleet/vehicles",
+	DRIVER: "fleet/drivers",
+	WAREHOUSE: "inventory/warehouses",
+	CARGO_ITEM: "inventory/products"
+}, me = [
+	{
+		entity: "orders",
+		label: "Orders",
+		noun: "order"
+	},
+	{
+		entity: "customers",
+		label: "Customers",
+		noun: "customer"
+	},
+	{
+		entity: "vehicles",
+		label: "Vehicles",
+		noun: "vehicle"
+	},
+	{
+		entity: "drivers",
+		label: "Drivers",
+		noun: "driver"
+	},
+	{
+		entity: "products",
+		label: "Products",
+		noun: "product"
+	}
+];
+function he(e, t, n) {
+	let r = URL.createObjectURL(new Blob([t], { type: n })), i = document.createElement("a");
+	i.href = r, i.download = e, document.body.appendChild(i), i.click(), i.remove(), URL.revokeObjectURL(r);
+}
+function ge(e) {
+	if (e.allowedValues?.length) return e.allowedValues.join(", ");
+	let t = [e.type.toLowerCase()];
+	return e.maxLength !== null && t.push(`max ${e.maxLength} chars`), e.min !== null && e.max !== null ? t.push(`${e.min} to ${e.max}`) : e.min !== null && t.push(`at least ${e.min}`), t.join(", ");
+}
+function _e({ result: e, noun: r, onOpenList: i }) {
+	let a = e.status === "REJECTED" || e.dryRun && e.failedRows > 0, o = a ? "border-status-error-border bg-status-error-bg-subtle text-status-error-text" : e.status === "PARTIAL" ? "border-status-warning-border bg-status-warning-bg-subtle text-status-warning-text" : "border-status-success-border bg-status-success-bg-subtle text-status-success-text", s = a ? t : n;
+	return /* @__PURE__ */ I("div", {
+		className: "space-y-3",
+		"data-testid": "mtw-import-result",
+		"data-status": e.status,
+		children: [
+			/* @__PURE__ */ I("div", {
+				role: a ? "alert" : "status",
+				className: `flex items-start gap-2 rounded-lg border px-4 py-3 text-sm ${o}`,
+				children: [
+					/* @__PURE__ */ F(s, {
+						size: 18,
+						className: "mt-0.5 shrink-0"
+					}),
+					/* @__PURE__ */ F("span", {
+						className: "flex-1",
+						children: M(e, r)
+					}),
+					e.importedRows > 0 ? /* @__PURE__ */ I("button", {
+						type: "button",
+						className: "font-medium underline underline-offset-2",
+						onClick: i,
+						children: [
+							"View ",
+							r,
+							"s"
+						]
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ I("div", {
+				className: "flex flex-wrap gap-2 text-sm",
+				children: [
+					/* @__PURE__ */ I(f, {
+						variant: "outline",
+						children: ["Rows: ", e.totalRows]
+					}),
+					/* @__PURE__ */ I(f, {
+						variant: "outline",
+						children: ["Valid: ", e.validRows]
+					}),
+					/* @__PURE__ */ I(f, {
+						variant: "outline",
+						children: ["Imported: ", e.importedRows]
+					}),
+					/* @__PURE__ */ I(f, {
+						variant: e.failedRows > 0 ? "destructive" : "outline",
+						children: ["Problems: ", e.failedRows]
+					})
+				]
+			}),
+			e.errors.length > 0 ? /* @__PURE__ */ F("div", {
+				className: "max-h-80 overflow-auto rounded-lg border border-border-default",
+				children: /* @__PURE__ */ I(S, { children: [/* @__PURE__ */ F(E, { children: /* @__PURE__ */ I(D, { children: [
+					/* @__PURE__ */ F(T, {
+						className: "w-20",
+						children: "Row"
+					}),
+					/* @__PURE__ */ F(T, {
+						className: "w-40",
+						children: "Column"
+					}),
+					/* @__PURE__ */ F(T, { children: "Problem" })
+				] }) }), /* @__PURE__ */ F(C, { children: e.errors.map((e, t) => /* @__PURE__ */ I(D, { children: [
+					/* @__PURE__ */ F(w, { children: e.row }),
+					/* @__PURE__ */ F(w, {
+						className: "font-mono text-xs",
+						children: e.field ?? "—"
+					}),
+					/* @__PURE__ */ F(w, { children: e.message })
+				] }, `${e.row}-${e.field ?? ""}-${t}`)) })] })
+			}) : null,
+			e.errorsTruncated ? /* @__PURE__ */ I("p", {
+				className: "text-sm text-text-secondary",
+				children: [
+					"Only the first ",
+					e.errors.length,
+					" problems are listed. Fix these and validate again to see the rest."
+				]
+			}) : null
+		]
+	});
+}
+function ve({ entity: e, label: t, noun: n }) {
+	let { state: i, isExporting: a, startExport: o, dismiss: c } = O(e, n);
+	return /* @__PURE__ */ I("div", {
+		className: "space-y-2 rounded-lg border border-border-default p-4",
+		children: [/* @__PURE__ */ I("div", {
+			className: "flex items-center justify-between gap-3",
+			children: [/* @__PURE__ */ I("div", { children: [/* @__PURE__ */ F("p", {
+				className: "font-medium text-text-primary",
+				children: t
+			}), /* @__PURE__ */ I("p", {
+				className: "text-sm text-text-secondary",
+				children: [
+					"Every ",
+					n,
+					" in this workspace, as CSV"
+				]
+			})] }), /* @__PURE__ */ I(p, {
+				variant: "outline",
+				size: "sm",
+				disabled: a,
+				"aria-label": `Export ${t}`,
+				onClick: o,
+				children: [a ? /* @__PURE__ */ F(s, {
+					size: 14,
+					className: "animate-spin"
+				}) : /* @__PURE__ */ F(r, { size: 14 }), /* @__PURE__ */ F("span", {
+					className: "ml-1",
+					children: a ? "Exporting…" : "Export"
+				})]
+			})]
+		}), /* @__PURE__ */ F(k, {
+			state: i,
+			onDismiss: c
+		})]
+	});
+}
+function B() {
+	let { basePath: n, navigate: S } = d(), { specs: C, isLoading: w, error: T } = de(), { run: E, isRunning: D } = ue(), [O] = P(), [k, M] = N(() => {
+		let e = O.get("entity");
+		return j(e) ? e : "CUSTOMER";
+	}), [B, V] = N(null), [H, ye] = N(!1), [U, W] = N(null), [G, K] = N(null), [q, J] = N(null), Y = pe(null), X = le(k), Z = fe(() => C.find((e) => e.entityType === k) ?? null, [C, k]), Q = () => {
+		W(null), K(null), J(null);
+	}, be = (e) => {
+		j(e) && (M(e), V(null), Q());
+	}, xe = async (e) => {
+		let t = e.target.files?.[0];
+		if (e.target.value = "", Q(), !t) return;
+		let n = ce(t.name, t.type);
+		if (!n) {
+			V(null), K("Choose a .csv or .json file.");
+			return;
+		}
+		V({
+			name: t.name,
+			format: n,
+			content: await t.text()
+		});
+	}, $ = async (e) => {
+		if (B) {
+			K(null), J(e ? "validate" : "import");
+			try {
+				W(await E({
+					entityType: k,
+					format: B.format,
+					content: B.content,
+					dryRun: e,
+					allowPartial: H
+				}));
+			} catch (e) {
+				W(null), K(e instanceof Error ? e.message : "The import could not be completed.");
+			}
+		}
+	}, Se = () => {
+		Z && he(`${X.label.toLowerCase()}-import-template.csv`, se(Z), "text/csv");
+	}, Ce = B !== null && !D && U?.status !== "COMPLETED";
+	return /* @__PURE__ */ I(ae, {
+		title: "Import / Export",
+		subtitle: "Bring master data in from a file, or take a full copy out",
+		icon: /* @__PURE__ */ F(e, { size: 24 }),
+		children: [
+			/* @__PURE__ */ F(R, {
+				icon: /* @__PURE__ */ F(e, { size: 18 }),
+				children: "Onboard or migrate without re-keying: import customers, vehicles, drivers, warehouses or products from CSV or JSON. Every row is checked before anything is saved, so you can fix a file and try again. Export any dataset for accounting, BI tools or backups."
+			}),
+			/* @__PURE__ */ F("input", {
+				ref: Y,
+				type: "file",
+				accept: ".csv,.json,text/csv,application/json",
+				className: "hidden",
+				"data-testid": "mtw-import-file",
+				onChange: (e) => void xe(e)
+			}),
+			/* @__PURE__ */ I("div", {
+				className: "grid grid-cols-1 gap-6 xl:grid-cols-3",
+				children: [/* @__PURE__ */ I(L, {
+					className: "space-y-5 xl:col-span-2",
+					children: [
+						/* @__PURE__ */ I("div", {
+							className: "flex flex-wrap items-center justify-between gap-3",
+							children: [/* @__PURE__ */ I("h2", {
+								className: "flex items-center gap-2 text-base font-semibold text-text-primary",
+								children: [/* @__PURE__ */ F(l, { size: 18 }), " Import data"]
+							}), /* @__PURE__ */ I(f, {
+								variant: "outline",
+								children: [
+									"CSV or JSON · up to ",
+									oe,
+									" rows · 2 MB"
+								]
+							})]
+						}),
+						/* @__PURE__ */ I("div", {
+							className: "grid grid-cols-1 gap-4 md:grid-cols-2",
+							children: [/* @__PURE__ */ I("div", {
+								className: "space-y-2",
+								children: [/* @__PURE__ */ F(y, {
+									htmlFor: "mtw-import-entity",
+									children: "What are you importing?"
+								}), /* @__PURE__ */ I(b, {
+									value: k,
+									onValueChange: be,
+									children: [/* @__PURE__ */ F(re, {
+										id: "mtw-import-entity",
+										"aria-label": "Import type",
+										children: /* @__PURE__ */ F(ie, {})
+									}), /* @__PURE__ */ F(te, { children: A.map((e) => /* @__PURE__ */ F(ne, {
+										value: e.entityType,
+										children: e.label
+									}, e.entityType)) })]
+								})]
+							}), /* @__PURE__ */ I("div", {
+								className: "space-y-2",
+								children: [
+									/* @__PURE__ */ F(y, { children: "File" }),
+									/* @__PURE__ */ I("div", {
+										className: "flex flex-wrap items-center gap-2",
+										children: [/* @__PURE__ */ I(p, {
+											variant: "outline",
+											onClick: () => Y.current?.click(),
+											children: [/* @__PURE__ */ F(a, { size: 16 }), /* @__PURE__ */ F("span", {
+												className: "ml-1",
+												children: B ? "Choose another file" : "Choose file"
+											})]
+										}), /* @__PURE__ */ I(p, {
+											variant: "ghost",
+											disabled: !Z,
+											onClick: Se,
+											"aria-label": `Download ${X.label} CSV template`,
+											children: [/* @__PURE__ */ F(i, { size: 16 }), /* @__PURE__ */ F("span", {
+												className: "ml-1",
+												children: "Template"
+											})]
+										})]
+									}),
+									B ? /* @__PURE__ */ I("p", {
+										className: "text-sm text-text-secondary",
+										"data-testid": "mtw-import-file-name",
+										children: [
+											B.name,
+											" (",
+											B.format,
+											")"
+										]
+									}) : null
+								]
+							})]
+						}),
+						/* @__PURE__ */ I("div", {
+							className: "flex items-start gap-2",
+							children: [/* @__PURE__ */ F(ee, {
+								id: "mtw-import-partial",
+								checked: H,
+								onCheckedChange: (e) => {
+									ye(e === !0), U && !U.dryRun && Q();
+								}
+							}), /* @__PURE__ */ F(y, {
+								htmlFor: "mtw-import-partial",
+								className: "text-sm font-normal leading-snug",
+								children: "Import the valid rows even if some rows have problems. When this is off, a file with any problem imports nothing."
+							})]
+						}),
+						/* @__PURE__ */ I("div", {
+							className: "flex flex-wrap gap-2",
+							children: [/* @__PURE__ */ I(p, {
+								variant: "outline",
+								disabled: !B || D,
+								onClick: () => void $(!0),
+								children: [D && q === "validate" ? /* @__PURE__ */ F(s, {
+									size: 16,
+									className: "animate-spin"
+								}) : /* @__PURE__ */ F(c, { size: 16 }), /* @__PURE__ */ F("span", {
+									className: "ml-1",
+									children: "Validate"
+								})]
+							}), /* @__PURE__ */ I(p, {
+								disabled: !Ce,
+								onClick: () => void $(!1),
+								children: [D && q === "import" ? /* @__PURE__ */ F(s, {
+									size: 16,
+									className: "animate-spin"
+								}) : /* @__PURE__ */ F(l, { size: 16 }), /* @__PURE__ */ I("span", {
+									className: "ml-1",
+									children: ["Import ", X.label.toLowerCase()]
+								})]
+							})]
+						}),
+						G ? /* @__PURE__ */ I("div", {
+							role: "alert",
+							"data-testid": "mtw-import-error",
+							className: "flex items-start gap-2 rounded-lg border border-status-error-border bg-status-error-bg-subtle px-4 py-3 text-sm text-status-error-text",
+							children: [/* @__PURE__ */ F(t, {
+								size: 18,
+								className: "mt-0.5 shrink-0"
+							}), /* @__PURE__ */ F("span", { children: G })]
+						}) : null,
+						U ? /* @__PURE__ */ F(_e, {
+							result: U,
+							noun: X.noun,
+							onOpenList: () => S?.(u(n, z[k]))
+						}) : null
+					]
+				}), /* @__PURE__ */ I(m, { children: [/* @__PURE__ */ I(_, { children: [/* @__PURE__ */ I(v, {
+					className: "flex items-center gap-2 text-base",
+					children: [
+						/* @__PURE__ */ F(o, { size: 18 }),
+						" ",
+						X.label,
+						" columns"
+					]
+				}), /* @__PURE__ */ F(g, { children: "Use these column names as the CSV header or JSON keys. Values are not case-sensitive for lists." })] }), /* @__PURE__ */ F(h, { children: w ? /* @__PURE__ */ I("div", {
+					className: "space-y-2",
+					children: [
+						/* @__PURE__ */ F(x, { className: "h-6 w-full" }),
+						/* @__PURE__ */ F(x, { className: "h-6 w-full" }),
+						/* @__PURE__ */ F(x, { className: "h-6 w-2/3" })
+					]
+				}) : T ? /* @__PURE__ */ F("p", {
+					className: "text-sm text-status-error-text",
+					children: "The column guide could not be loaded. Imports still work."
+				}) : Z ? /* @__PURE__ */ F("ul", {
+					className: "space-y-3",
+					"data-testid": "mtw-import-columns",
+					children: Z.columns.map((e) => /* @__PURE__ */ I("li", {
+						className: "text-sm",
+						children: [
+							/* @__PURE__ */ I("div", {
+								className: "flex flex-wrap items-center gap-2",
+								children: [
+									/* @__PURE__ */ F("code", {
+										className: "font-mono text-text-primary",
+										children: e.name
+									}),
+									e.required ? /* @__PURE__ */ F(f, {
+										variant: "default",
+										children: "required"
+									}) : null,
+									Z.keyColumn === e.name ? /* @__PURE__ */ F(f, {
+										variant: "outline",
+										children: "unique"
+									}) : null
+								]
+							}),
+							/* @__PURE__ */ F("p", {
+								className: "text-text-secondary",
+								children: e.description
+							}),
+							/* @__PURE__ */ F("p", {
+								className: "text-xs text-text-tertiary",
+								children: ge(e)
+							})
+						]
+					}, e.name))
+				}) : null })] })]
+			}),
+			/* @__PURE__ */ I(m, { children: [/* @__PURE__ */ I(_, { children: [/* @__PURE__ */ I(v, {
+				className: "flex items-center gap-2 text-base",
+				children: [/* @__PURE__ */ F(r, { size: 18 }), " Export data"]
+			}), /* @__PURE__ */ F(g, { children: "Exports run in the background and download as a ZIP. Large exports stay available on the Exports page." })] }), /* @__PURE__ */ F(h, {
+				className: "grid grid-cols-1 gap-3 md:grid-cols-2",
+				children: me.map((e) => /* @__PURE__ */ F(ve, { ...e }, e.entity))
+			})] })
+		]
+	});
+}
+//#endregion
+export { B as default };