npm - @burdenoff/microfe-assethandler - Versions diffs - 2026.625.1 → 2026.625.2 - Mend

@burdenoff/microfe-assethandler 2026.625.1 → 2026.625.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (113) hide show

package/dist/assethandler/pages/PortfolioPortfolioOverviewPage.js CHANGED Viewed

@@ -1,208 +1,210 @@
 import { useAssetHandlerStore as e } from "../store/assethandlerStore.js";
 import { BarChart3 as t, DollarSign as n, Package as r, TrendingDown as i } from "lucide-react";
-import { Badge as a, Card as o, CardContent as s, CardHeader as c, CardTitle as l, GlassCard as u, GradientText as d, Table as f, TableBody as p, TableCell as m, TableHead as h, TableHeader as g, TableRow as _ } from "@burdenoff/fe-libs/ui";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { Badge as a, Card as o, CardContent as s, CardHeader as c, CardTitle as l, GlassCard as u, GradientText as d, PagePurpose as f, Table as p, TableBody as m, TableCell as h, TableHead as g, TableHeader as _, TableRow as v } from "@burdenoff/fe-libs/ui";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
 //#region src/assethandler/pages/PortfolioPortfolioOverviewPage.tsx
-function b() {
-	let { portfolio: b } = e(), x = b.totalValue > 0 ? Math.round((b.totalValue - b.depreciatedValue) / b.totalValue * 100) : 0, S = (e) => e >= 1e6 ? `$${(e / 1e6).toFixed(2)}M` : `$${e.toLocaleString()}`, C = Math.max(...b.byCategory.map((e) => e.value), 1), w = Math.max(...b.depreciationTrend.map((e) => e.value), 1), T = Math.max(...b.acquisitionTrend.map((e) => e.value), 1);
-	return /* @__PURE__ */ y("div", {
+function x() {
+	let { portfolio: x } = e(), S = x.totalValue > 0 ? Math.round((x.totalValue - x.depreciatedValue) / x.totalValue * 100) : 0, C = (e) => e >= 1e6 ? `$${(e / 1e6).toFixed(2)}M` : `$${e.toLocaleString()}`, w = Math.max(...x.byCategory.map((e) => e.value), 1), T = Math.max(...x.depreciationTrend.map((e) => e.value), 1), E = Math.max(...x.acquisitionTrend.map((e) => e.value), 1);
+	return /* @__PURE__ */ b("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("h1", {
+			/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("h1", {
 				className: "text-2xl font-semibold",
-				children: /* @__PURE__ */ v(d, { children: "Portfolio Overview" })
-			}), /* @__PURE__ */ v("p", {
+				children: /* @__PURE__ */ y(d, { children: "Portfolio Overview" })
+			}), /* @__PURE__ */ y("p", {
 				className: "text-sm text-text-secondary",
 				children: "Comprehensive view of your asset portfolio, valuations, and trends."
 			})] }),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ y(f, { children: "The big-picture financial view of everything you own: how many assets you have, what they were worth, what they are worth now after depreciation, and how value is spread across categories and departments. Use it to inform replacement planning, budgeting and audit." }),
+			/* @__PURE__ */ b("div", {
 				className: "grid gap-4 md:grid-cols-4",
 				children: [
-					/* @__PURE__ */ y(u, {
+					/* @__PURE__ */ b(u, {
 						treatment: "metric",
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ y(c, {
+						children: [/* @__PURE__ */ b(c, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ v(l, {
+							children: [/* @__PURE__ */ y(l, {
 								className: "text-sm font-medium",
 								children: "Total Assets"
-							}), /* @__PURE__ */ v(r, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ y(s, { children: [/* @__PURE__ */ v("div", {
+							}), /* @__PURE__ */ y(r, { className: "h-4 w-4 text-text-secondary" })]
+						}), /* @__PURE__ */ b(s, { children: [/* @__PURE__ */ y("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: b.totalAssets.toLocaleString()
-						}), /* @__PURE__ */ v("p", {
+							children: x.totalAssets.toLocaleString()
+						}), /* @__PURE__ */ y("p", {
 							className: "text-xs text-text-secondary",
 							children: "Across all categories"
 						})] })]
 					}),
-					/* @__PURE__ */ y(u, {
-						treatment: "metric",
+					/* @__PURE__ */ b(u, {
+						treatment: "glass",
+						glow: !0,
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ y(c, {
+						children: [/* @__PURE__ */ b(c, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ v(l, {
+							children: [/* @__PURE__ */ y(l, {
 								className: "text-sm font-medium",
 								children: "Total Value"
-							}), /* @__PURE__ */ v(n, { className: "h-4 w-4 text-status-success-text" })]
-						}), /* @__PURE__ */ y(s, { children: [/* @__PURE__ */ v("div", {
+							}), /* @__PURE__ */ y(n, { className: "h-4 w-4 text-status-success-text" })]
+						}), /* @__PURE__ */ b(s, { children: [/* @__PURE__ */ y("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: S(b.totalValue)
-						}), /* @__PURE__ */ v("p", {
+							children: C(x.totalValue)
+						}), /* @__PURE__ */ y("p", {
 							className: "text-xs text-text-secondary",
 							children: "Original purchase value"
 						})] })]
 					}),
-					/* @__PURE__ */ y(u, {
+					/* @__PURE__ */ b(u, {
 						treatment: "metric",
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ y(c, {
+						children: [/* @__PURE__ */ b(c, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ v(l, {
+							children: [/* @__PURE__ */ y(l, {
 								className: "text-sm font-medium",
 								children: "Current Value"
-							}), /* @__PURE__ */ v(i, { className: "h-4 w-4 text-status-warning-text" })]
-						}), /* @__PURE__ */ y(s, { children: [/* @__PURE__ */ v("div", {
+							}), /* @__PURE__ */ y(i, { className: "h-4 w-4 text-status-warning-text" })]
+						}), /* @__PURE__ */ b(s, { children: [/* @__PURE__ */ y("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: S(b.depreciatedValue)
-						}), /* @__PURE__ */ v("p", {
+							children: C(x.depreciatedValue)
+						}), /* @__PURE__ */ y("p", {
 							className: "text-xs text-text-secondary",
 							children: "After depreciation"
 						})] })]
 					}),
-					/* @__PURE__ */ y(u, {
+					/* @__PURE__ */ b(u, {
 						treatment: "metric",
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ y(c, {
+						children: [/* @__PURE__ */ b(c, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ v(l, {
+							children: [/* @__PURE__ */ y(l, {
 								className: "text-sm font-medium",
 								children: "Depreciation"
-							}), /* @__PURE__ */ v(t, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ y(s, { children: [/* @__PURE__ */ y("div", {
+							}), /* @__PURE__ */ y(t, { className: "h-4 w-4 text-text-secondary" })]
+						}), /* @__PURE__ */ b(s, { children: [/* @__PURE__ */ b("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: [x, "%"]
-						}), /* @__PURE__ */ y("p", {
+							children: [S, "%"]
+						}), /* @__PURE__ */ b("p", {
 							className: "text-xs text-text-secondary",
-							children: [S(b.totalValue - b.depreciatedValue), " total loss"]
+							children: [C(x.totalValue - x.depreciatedValue), " total loss"]
 						})] })]
 					})
 				]
 			}),
-			/* @__PURE__ */ y("div", {
+			/* @__PURE__ */ b("div", {
 				className: "grid gap-6 md:grid-cols-2",
 				children: [
-					/* @__PURE__ */ y(o, { children: [/* @__PURE__ */ v(c, { children: /* @__PURE__ */ v(l, { children: "Assets by Category" }) }), /* @__PURE__ */ v(s, {
+					/* @__PURE__ */ b(o, { children: [/* @__PURE__ */ y(c, { children: /* @__PURE__ */ y(l, { children: "Assets by Category" }) }), /* @__PURE__ */ y(s, {
 						className: "space-y-3",
-						children: b.byCategory.map((e) => /* @__PURE__ */ y("div", {
+						children: x.byCategory.map((e) => /* @__PURE__ */ b("div", {
 							className: "space-y-1",
-							children: [/* @__PURE__ */ y("div", {
+							children: [/* @__PURE__ */ b("div", {
 								className: "flex items-center justify-between text-sm",
-								children: [/* @__PURE__ */ v("span", {
+								children: [/* @__PURE__ */ y("span", {
 									className: "font-medium capitalize",
 									children: e.category.replace(/_/g, " ")
-								}), /* @__PURE__ */ y("span", {
+								}), /* @__PURE__ */ b("span", {
 									className: "text-text-secondary",
 									children: [
 										e.count,
 										" assets - ",
-										S(e.value)
+										C(e.value)
 									]
 								})]
-							}), /* @__PURE__ */ v("div", {
+							}), /* @__PURE__ */ y("div", {
 								className: "h-3 bg-bg-sunken rounded overflow-hidden",
-								children: /* @__PURE__ */ v("div", {
+								children: /* @__PURE__ */ y("div", {
 									className: "h-3 bg-action-primary-bg rounded",
-									style: { width: `${Math.round(e.value / C * 100)}%` }
+									style: { width: `${Math.round(e.value / w * 100)}%` }
 								})
 							})]
 						}, e.category))
 					})] }),
-					/* @__PURE__ */ y(o, { children: [/* @__PURE__ */ v(c, { children: /* @__PURE__ */ v(l, { children: "Assets by Department" }) }), /* @__PURE__ */ v(s, { children: /* @__PURE__ */ y(f, { children: [/* @__PURE__ */ v(g, { children: /* @__PURE__ */ y(_, { children: [
-						/* @__PURE__ */ v(h, { children: "Department" }),
-						/* @__PURE__ */ v(h, {
+					/* @__PURE__ */ b(o, { children: [/* @__PURE__ */ y(c, { children: /* @__PURE__ */ y(l, { children: "Assets by Department" }) }), /* @__PURE__ */ y(s, { children: /* @__PURE__ */ b(p, { children: [/* @__PURE__ */ y(_, { children: /* @__PURE__ */ b(v, { children: [
+						/* @__PURE__ */ y(g, { children: "Department" }),
+						/* @__PURE__ */ y(g, {
 							className: "text-right",
 							children: "Count"
 						}),
-						/* @__PURE__ */ v(h, {
+						/* @__PURE__ */ y(g, {
 							className: "text-right",
 							children: "Value"
 						})
-					] }) }), /* @__PURE__ */ v(p, { children: b.byDepartment.map((e) => /* @__PURE__ */ y(_, { children: [
-						/* @__PURE__ */ v(m, {
+					] }) }), /* @__PURE__ */ y(m, { children: x.byDepartment.map((e) => /* @__PURE__ */ b(v, { children: [
+						/* @__PURE__ */ y(h, {
 							className: "font-medium",
 							children: e.department
 						}),
-						/* @__PURE__ */ v(m, {
+						/* @__PURE__ */ y(h, {
 							className: "text-right",
 							children: e.count
 						}),
-						/* @__PURE__ */ v(m, {
+						/* @__PURE__ */ y(h, {
 							className: "text-right",
-							children: S(e.value)
+							children: C(e.value)
 						})
 					] }, e.department)) })] }) })] }),
-					/* @__PURE__ */ y(o, { children: [/* @__PURE__ */ v(c, { children: /* @__PURE__ */ v(l, { children: "Assets by Status" }) }), /* @__PURE__ */ v(s, { children: /* @__PURE__ */ v("div", {
+					/* @__PURE__ */ b(o, { children: [/* @__PURE__ */ y(c, { children: /* @__PURE__ */ y(l, { children: "Assets by Status" }) }), /* @__PURE__ */ y(s, { children: /* @__PURE__ */ y("div", {
 						className: "flex flex-wrap gap-3",
-						children: b.byStatus.map((e) => /* @__PURE__ */ y("div", {
+						children: x.byStatus.map((e) => /* @__PURE__ */ b("div", {
 							className: "flex items-center gap-2 rounded-lg border p-3",
-							children: [/* @__PURE__ */ v(a, {
+							children: [/* @__PURE__ */ y(a, {
 								variant: e.status === "active" ? "default" : e.status === "disposed" ? "destructive" : "secondary",
 								className: "capitalize",
 								children: e.status.replace(/_/g, " ")
-							}), /* @__PURE__ */ v("span", {
+							}), /* @__PURE__ */ y("span", {
 								className: "text-lg font-bold",
 								children: e.count
 							})]
 						}, e.status))
 					}) })] }),
-					/* @__PURE__ */ y(o, { children: [/* @__PURE__ */ v(c, { children: /* @__PURE__ */ v(l, { children: "Depreciation Trend" }) }), /* @__PURE__ */ v(s, {
+					/* @__PURE__ */ b(o, { children: [/* @__PURE__ */ y(c, { children: /* @__PURE__ */ y(l, { children: "Depreciation Trend" }) }), /* @__PURE__ */ y(s, {
 						className: "space-y-2",
-						children: b.depreciationTrend.map((e) => /* @__PURE__ */ y("div", {
+						children: x.depreciationTrend.map((e) => /* @__PURE__ */ b("div", {
 							className: "flex items-center gap-3",
 							children: [
-								/* @__PURE__ */ v("span", {
+								/* @__PURE__ */ y("span", {
 									className: "w-10 text-xs text-text-secondary",
 									children: e.month
 								}),
-								/* @__PURE__ */ v("div", {
+								/* @__PURE__ */ y("div", {
 									className: "flex-1 h-4 bg-bg-sunken rounded overflow-hidden",
-									children: /* @__PURE__ */ v("div", {
+									children: /* @__PURE__ */ y("div", {
 										className: "h-4 bg-status-warning-bg rounded",
-										style: { width: `${Math.round(e.value / w * 100)}%` }
+										style: { width: `${Math.round(e.value / T * 100)}%` }
 									})
 								}),
-								/* @__PURE__ */ v("span", {
+								/* @__PURE__ */ y("span", {
 									className: "text-xs font-medium w-16 text-right",
-									children: S(e.value)
+									children: C(e.value)
 								})
 							]
 						}, e.month))
 					})] }),
-					/* @__PURE__ */ y(o, {
+					/* @__PURE__ */ b(o, {
 						className: "md:col-span-2",
-						children: [/* @__PURE__ */ v(c, { children: /* @__PURE__ */ v(l, { children: "Acquisition Trend" }) }), /* @__PURE__ */ v(s, {
+						children: [/* @__PURE__ */ y(c, { children: /* @__PURE__ */ y(l, { children: "Acquisition Trend" }) }), /* @__PURE__ */ y(s, {
 							className: "space-y-2",
-							children: b.acquisitionTrend.map((e) => /* @__PURE__ */ y("div", {
+							children: x.acquisitionTrend.map((e) => /* @__PURE__ */ b("div", {
 								className: "flex items-center gap-3",
 								children: [
-									/* @__PURE__ */ v("span", {
+									/* @__PURE__ */ y("span", {
 										className: "w-10 text-xs text-text-secondary",
 										children: e.month
 									}),
-									/* @__PURE__ */ v("div", {
+									/* @__PURE__ */ y("div", {
 										className: "flex-1 h-4 bg-bg-sunken rounded overflow-hidden",
-										children: /* @__PURE__ */ v("div", {
+										children: /* @__PURE__ */ y("div", {
 											className: "h-4 bg-status-success-bg rounded",
-											style: { width: `${Math.round(e.value / T * 100)}%` }
+											style: { width: `${Math.round(e.value / E * 100)}%` }
 										})
 									}),
-									/* @__PURE__ */ y("span", {
+									/* @__PURE__ */ b("span", {
 										className: "text-xs w-12 text-right",
 										children: [e.count, " units"]
 									}),
-									/* @__PURE__ */ v("span", {
+									/* @__PURE__ */ y("span", {
 										className: "text-xs font-medium w-16 text-right",
-										children: S(e.value)
+										children: C(e.value)
 									})
 								]
 							}, e.month))
@@ -214,6 +216,6 @@ function b() {
 	});
 }
 //#endregion
-export { b as PortfolioPortfolioOverviewPage };
+export { x as PortfolioPortfolioOverviewPage };
 //# sourceMappingURL=PortfolioPortfolioOverviewPage.js.map

package/dist/assethandler/pages/PortfolioPortfolioOverviewPage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"PortfolioPortfolioOverviewPage.js","names":[],"sources":["../../../src/assethandler/pages/PortfolioPortfolioOverviewPage.tsx"],"sourcesContent":["import {\n Badge,\n Card,\n CardContent,\n CardHeader,\n CardTitle,\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n GradientText,\n GlassCard,\n} from '@burdenoff/fe-libs/ui';\nimport { Package, DollarSign, TrendingDown, BarChart3 } from 'lucide-react';\nimport { useAssetHandlerStore } from '../store/assethandlerStore';\n\nexport function PortfolioPortfolioOverviewPage() {\n const { portfolio } = useAssetHandlerStore();\n\n const depreciationPct =\n portfolio.totalValue > 0\n ? Math.round(\n ((portfolio.totalValue - portfolio.depreciatedValue) / portfolio.totalValue) * 100\n )\n : 0;\n\n const formatCurrency = (val: number) =>\n val >= 1000000 ? `$${(val / 1000000).toFixed(2)}M` : `$${val.toLocaleString()}`;\n\n const maxCategoryValue = Math.max(...portfolio.byCategory.map((c) => c.value), 1);\n const maxDepreciation = Math.max(...portfolio.depreciationTrend.map((d) => d.value), 1);\n const maxAcquisitionValue = Math.max(...portfolio.acquisitionTrend.map((a) => a.value), 1);\n\n return (\n <div className=\"space-y-6 p-6\">\n <div>\n <h1 className=\"text-2xl font-semibold\">\n <GradientText>Portfolio Overview</GradientText>\n </h1>\n <p className=\"text-sm text-text-secondary\">\n Comprehensive view of your asset portfolio, valuations, and trends.\n </p>\n </div>\n\n <div className=\"grid gap-4 md:grid-cols-4\">\n <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle className=\"text-sm font-medium\">Total Assets</CardTitle>\n <Package className=\"h-4 w-4 text-text-secondary\" />\n </CardHeader>\n <CardContent>\n <div className=\"text-2xl font-bold tabular-nums\">\n {portfolio.totalAssets.toLocaleString()}\n </div>\n <p className=\"text-xs text-text-secondary\">Across all categories</p>\n </CardContent>\n </GlassCard>\n <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle className=\"text-sm font-medium\">Total Value</CardTitle>\n <DollarSign className=\"h-4 w-4 text-status-success-text\" />\n </CardHeader>\n <CardContent>\n <div className=\"text-2xl font-bold tabular-nums\">\n {formatCurrency(portfolio.totalValue)}\n </div>\n <p className=\"text-xs text-text-secondary\">Original purchase value</p>\n </CardContent>\n </GlassCard>\n <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle className=\"text-sm font-medium\">Current Value</CardTitle>\n <TrendingDown className=\"h-4 w-4 text-status-warning-text\" />\n </CardHeader>\n <CardContent>\n <div className=\"text-2xl font-bold tabular-nums\">\n {formatCurrency(portfolio.depreciatedValue)}\n </div>\n <p className=\"text-xs text-text-secondary\">After depreciation</p>\n </CardContent>\n </GlassCard>\n <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle className=\"text-sm font-medium\">Depreciation</CardTitle>\n <BarChart3 className=\"h-4 w-4 text-text-secondary\" />\n </CardHeader>\n <CardContent>\n <div className=\"text-2xl font-bold tabular-nums\">{depreciationPct}%</div>\n <p className=\"text-xs text-text-secondary\">\n {formatCurrency(portfolio.totalValue - portfolio.depreciatedValue)} total loss\n </p>\n </CardContent>\n </GlassCard>\n </div>\n\n <div className=\"grid gap-6 md:grid-cols-2\">\n <Card>\n <CardHeader>\n <CardTitle>Assets by Category</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-3\">\n {portfolio.byCategory.map((cat) => (\n <div key={cat.category} className=\"space-y-1\">\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"font-medium capitalize\">{cat.category.replace(/_/g, ' ')}</span>\n <span className=\"text-text-secondary\">\n {cat.count} assets - {formatCurrency(cat.value)}\n </span>\n </div>\n <div className=\"h-3 bg-bg-sunken rounded overflow-hidden\">\n <div\n className=\"h-3 bg-action-primary-bg rounded\"\n style={{ width: `${Math.round((cat.value / maxCategoryValue) * 100)}%` }}\n />\n </div>\n </div>\n ))}\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Assets by Department</CardTitle>\n </CardHeader>\n <CardContent>\n <Table>\n <TableHeader>\n <TableRow>\n <TableHead>Department</TableHead>\n <TableHead className=\"text-right\">Count</TableHead>\n <TableHead className=\"text-right\">Value</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n {portfolio.byDepartment.map((dept) => (\n <TableRow key={dept.department}>\n <TableCell className=\"font-medium\">{dept.department}</TableCell>\n <TableCell className=\"text-right\">{dept.count}</TableCell>\n <TableCell className=\"text-right\">{formatCurrency(dept.value)}</TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Assets by Status</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"flex flex-wrap gap-3\">\n {portfolio.byStatus.map((s) => (\n <div key={s.status} className=\"flex items-center gap-2 rounded-lg border p-3\">\n <Badge\n variant={\n s.status === 'active'\n ? 'default'\n : s.status === 'disposed'\n ? 'destructive'\n : 'secondary'\n }\n className=\"capitalize\"\n >\n {s.status.replace(/_/g, ' ')}\n </Badge>\n <span className=\"text-lg font-bold\">{s.count}</span>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Depreciation Trend</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-2\">\n {portfolio.depreciationTrend.map((d) => (\n <div key={d.month} className=\"flex items-center gap-3\">\n <span className=\"w-10 text-xs text-text-secondary\">{d.month}</span>\n <div className=\"flex-1 h-4 bg-bg-sunken rounded overflow-hidden\">\n <div\n className=\"h-4 bg-status-warning-bg rounded\"\n style={{ width: `${Math.round((d.value / maxDepreciation) * 100)}%` }}\n />\n </div>\n <span className=\"text-xs font-medium w-16 text-right\">\n {formatCurrency(d.value)}\n </span>\n </div>\n ))}\n </CardContent>\n </Card>\n\n <Card className=\"md:col-span-2\">\n <CardHeader>\n <CardTitle>Acquisition Trend</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-2\">\n {portfolio.acquisitionTrend.map((a) => (\n <div key={a.month} className=\"flex items-center gap-3\">\n <span className=\"w-10 text-xs text-text-secondary\">{a.month}</span>\n <div className=\"flex-1 h-4 bg-bg-sunken rounded overflow-hidden\">\n <div\n className=\"h-4 bg-status-success-bg rounded\"\n style={{ width: `${Math.round((a.value / maxAcquisitionValue) * 100)}%` }}\n />\n </div>\n <span className=\"text-xs w-12 text-right\">{a.count} units</span>\n <span className=\"text-xs font-medium w-16 text-right\">\n {formatCurrency(a.value)}\n </span>\n </div>\n ))}\n </CardContent>\n </Card>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}
1	+ {"version":3,"file":"PortfolioPortfolioOverviewPage.js","names":[],"sources":["../../../src/assethandler/pages/PortfolioPortfolioOverviewPage.tsx"],"sourcesContent":["import {\n Badge,\n Card,\n CardContent,\n CardHeader,\n CardTitle,\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n GradientText,\n GlassCard,\n PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { Package, DollarSign, TrendingDown, BarChart3 } from 'lucide-react';\nimport { useAssetHandlerStore } from '../store/assethandlerStore';\n\nexport function PortfolioPortfolioOverviewPage() {\n const { portfolio } = useAssetHandlerStore();\n\n const depreciationPct =\n portfolio.totalValue > 0\n ? Math.round(\n ((portfolio.totalValue - portfolio.depreciatedValue) / portfolio.totalValue) * 100\n )\n : 0;\n\n const formatCurrency = (val: number) =>\n val >= 1000000 ? `$${(val / 1000000).toFixed(2)}M` : `$${val.toLocaleString()}`;\n\n const maxCategoryValue = Math.max(...portfolio.byCategory.map((c) => c.value), 1);\n const maxDepreciation = Math.max(...portfolio.depreciationTrend.map((d) => d.value), 1);\n const maxAcquisitionValue = Math.max(...portfolio.acquisitionTrend.map((a) => a.value), 1);\n\n return (\n <div className=\"space-y-6 p-6\">\n <div>\n <h1 className=\"text-2xl font-semibold\">\n <GradientText>Portfolio Overview</GradientText>\n </h1>\n <p className=\"text-sm text-text-secondary\">\n Comprehensive view of your asset portfolio, valuations, and trends.\n </p>\n </div>\n\n <PagePurpose>\n The big-picture financial view of everything you own: how many assets you have, what they\n were worth, what they are worth now after depreciation, and how value is spread across\n categories and departments. Use it to inform replacement planning, budgeting and audit.\n </PagePurpose>\n\n <div className=\"grid gap-4 md:grid-cols-4\">\n <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle className=\"text-sm font-medium\">Total Assets</CardTitle>\n <Package className=\"h-4 w-4 text-text-secondary\" />\n </CardHeader>\n <CardContent>\n <div className=\"text-2xl font-bold tabular-nums\">\n {portfolio.totalAssets.toLocaleString()}\n </div>\n <p className=\"text-xs text-text-secondary\">Across all categories</p>\n </CardContent>\n </GlassCard>\n <GlassCard treatment=\"glass\" glow className=\"border-border-seam\">\n <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle className=\"text-sm font-medium\">Total Value</CardTitle>\n <DollarSign className=\"h-4 w-4 text-status-success-text\" />\n </CardHeader>\n <CardContent>\n <div className=\"text-2xl font-bold tabular-nums\">\n {formatCurrency(portfolio.totalValue)}\n </div>\n <p className=\"text-xs text-text-secondary\">Original purchase value</p>\n </CardContent>\n </GlassCard>\n <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle className=\"text-sm font-medium\">Current Value</CardTitle>\n <TrendingDown className=\"h-4 w-4 text-status-warning-text\" />\n </CardHeader>\n <CardContent>\n <div className=\"text-2xl font-bold tabular-nums\">\n {formatCurrency(portfolio.depreciatedValue)}\n </div>\n <p className=\"text-xs text-text-secondary\">After depreciation</p>\n </CardContent>\n </GlassCard>\n <GlassCard treatment=\"metric\" className=\"border-border-seam\">\n <CardHeader className=\"flex flex-row items-center justify-between space-y-0 pb-2\">\n <CardTitle className=\"text-sm font-medium\">Depreciation</CardTitle>\n <BarChart3 className=\"h-4 w-4 text-text-secondary\" />\n </CardHeader>\n <CardContent>\n <div className=\"text-2xl font-bold tabular-nums\">{depreciationPct}%</div>\n <p className=\"text-xs text-text-secondary\">\n {formatCurrency(portfolio.totalValue - portfolio.depreciatedValue)} total loss\n </p>\n </CardContent>\n </GlassCard>\n </div>\n\n <div className=\"grid gap-6 md:grid-cols-2\">\n <Card>\n <CardHeader>\n <CardTitle>Assets by Category</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-3\">\n {portfolio.byCategory.map((cat) => (\n <div key={cat.category} className=\"space-y-1\">\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"font-medium capitalize\">{cat.category.replace(/_/g, ' ')}</span>\n <span className=\"text-text-secondary\">\n {cat.count} assets - {formatCurrency(cat.value)}\n </span>\n </div>\n <div className=\"h-3 bg-bg-sunken rounded overflow-hidden\">\n <div\n className=\"h-3 bg-action-primary-bg rounded\"\n style={{ width: `${Math.round((cat.value / maxCategoryValue) * 100)}%` }}\n />\n </div>\n </div>\n ))}\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Assets by Department</CardTitle>\n </CardHeader>\n <CardContent>\n <Table>\n <TableHeader>\n <TableRow>\n <TableHead>Department</TableHead>\n <TableHead className=\"text-right\">Count</TableHead>\n <TableHead className=\"text-right\">Value</TableHead>\n </TableRow>\n </TableHeader>\n <TableBody>\n {portfolio.byDepartment.map((dept) => (\n <TableRow key={dept.department}>\n <TableCell className=\"font-medium\">{dept.department}</TableCell>\n <TableCell className=\"text-right\">{dept.count}</TableCell>\n <TableCell className=\"text-right\">{formatCurrency(dept.value)}</TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Assets by Status</CardTitle>\n </CardHeader>\n <CardContent>\n <div className=\"flex flex-wrap gap-3\">\n {portfolio.byStatus.map((s) => (\n <div key={s.status} className=\"flex items-center gap-2 rounded-lg border p-3\">\n <Badge\n variant={\n s.status === 'active'\n ? 'default'\n : s.status === 'disposed'\n ? 'destructive'\n : 'secondary'\n }\n className=\"capitalize\"\n >\n {s.status.replace(/_/g, ' ')}\n </Badge>\n <span className=\"text-lg font-bold\">{s.count}</span>\n </div>\n ))}\n </div>\n </CardContent>\n </Card>\n\n <Card>\n <CardHeader>\n <CardTitle>Depreciation Trend</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-2\">\n {portfolio.depreciationTrend.map((d) => (\n <div key={d.month} className=\"flex items-center gap-3\">\n <span className=\"w-10 text-xs text-text-secondary\">{d.month}</span>\n <div className=\"flex-1 h-4 bg-bg-sunken rounded overflow-hidden\">\n <div\n className=\"h-4 bg-status-warning-bg rounded\"\n style={{ width: `${Math.round((d.value / maxDepreciation) * 100)}%` }}\n />\n </div>\n <span className=\"text-xs font-medium w-16 text-right\">\n {formatCurrency(d.value)}\n </span>\n </div>\n ))}\n </CardContent>\n </Card>\n\n <Card className=\"md:col-span-2\">\n <CardHeader>\n <CardTitle>Acquisition Trend</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-2\">\n {portfolio.acquisitionTrend.map((a) => (\n <div key={a.month} className=\"flex items-center gap-3\">\n <span className=\"w-10 text-xs text-text-secondary\">{a.month}</span>\n <div className=\"flex-1 h-4 bg-bg-sunken rounded overflow-hidden\">\n <div\n className=\"h-4 bg-status-success-bg rounded\"\n style={{ width: `${Math.round((a.value / maxAcquisitionValue) * 100)}%` }}\n />\n </div>\n <span className=\"text-xs w-12 text-right\">{a.count} units</span>\n <span className=\"text-xs font-medium w-16 text-right\">\n {formatCurrency(a.value)}\n </span>\n </div>\n ))}\n </CardContent>\n </Card>\n </div>\n </div>\n );\n}\n"],"mappings":"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"}

package/dist/assethandler/pages/ProvenancePage.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { useState as e } from "react";
 import { ShieldCheck as t } from "lucide-react";
-import { GradientText as n } from "@burdenoff/fe-libs/ui";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { gql as a } from "@apollo/client";
-import { useMutation as o, useQuery as s } from "@apollo/client/react";
+import { EmphasisPanel as n, GradientText as r, IllustratedEmptyState as i, PagePurpose as a } from "@burdenoff/fe-libs/ui";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { gql as c } from "@apollo/client";
+import { useMutation as l, useQuery as u } from "@apollo/client/react";
 //#region src/assethandler/pages/ProvenancePage.tsx
-var c = a`
+var d = c`
   query AssetHandlerProvenanceRecords {
     provenanceRecords {
       id
@@ -17,96 +17,99 @@ var c = a`
       attestedBy
     }
   }
-`, l = a`
+`, f = c`
   mutation AssetHandlerRecordProvenance($input: RecordProvenanceInput!) {
     recordProvenance(input: $input) {
       id
     }
   }
 `;
-function u() {
-	let [a, u] = e("AST-001"), [d, f] = e("polygon-amoy"), { data: p, loading: m, refetch: h } = s(c, { fetchPolicy: "cache-and-network" }), [g, { loading: _ }] = o(l, { onCompleted: () => {
-		h();
-	} }), v = p?.provenanceRecords ?? [];
-	return /* @__PURE__ */ i("div", {
+function p() {
+	let [c, p] = e("AST-001"), [m, h] = e("polygon-amoy"), { data: g, loading: _, refetch: v } = u(d, { fetchPolicy: "cache-and-network" }), [y, { loading: b }] = l(f, { onCompleted: () => {
+		v();
+	} }), x = g?.provenanceRecords ?? [];
+	return /* @__PURE__ */ s("div", {
 		className: "space-y-4 p-4",
 		children: [
-			/* @__PURE__ */ i("h1", {
+			/* @__PURE__ */ s("h1", {
 				className: "flex items-center gap-2 text-2xl font-semibold",
 				children: [
-					/* @__PURE__ */ r(t, { className: "h-6 w-6" }),
+					/* @__PURE__ */ o(t, { className: "h-6 w-6" }),
 					" ",
-					/* @__PURE__ */ r(n, { children: "Provenance" })
+					/* @__PURE__ */ o(r, { children: "Provenance" })
 				]
 			}),
-			/* @__PURE__ */ r("p", {
-				className: "text-text-secondary",
-				children: "Verify immutable asset provenance and lifecycle attestations."
-			}),
-			/* @__PURE__ */ i("form", {
-				className: "grid gap-3 rounded-lg border p-4 md:grid-cols-3",
+			/* @__PURE__ */ o(a, { children: "Prove an asset's history is tamper-proof. Record cryptographic attestations of key lifecycle events to a blockchain network so ownership, custody and condition can be independently verified later — essential for high-value, regulated or resold assets." }),
+			/* @__PURE__ */ s(n, { children: [/* @__PURE__ */ o("h2", {
+				className: "text-sm font-semibold mb-3",
+				children: "Record an attestation"
+			}), /* @__PURE__ */ s("form", {
+				className: "grid gap-3 md:grid-cols-3",
 				onSubmit: (e) => {
-					e.preventDefault(), g({ variables: { input: {
-						assetId: a,
-						hash: `${a}-${Date.now()}`,
-						chainNetwork: d,
+					e.preventDefault(), y({ variables: { input: {
+						assetId: c,
+						hash: `${c}-${Date.now()}`,
+						chainNetwork: m,
 						metadata: { source: "assethandler-ui" }
 					} } });
 				},
 				children: [
-					/* @__PURE__ */ r("input", {
+					/* @__PURE__ */ o("input", {
 						className: "rounded-md border px-3 py-2",
-						value: a,
-						onChange: (e) => u(e.target.value)
+						value: c,
+						onChange: (e) => p(e.target.value),
+						"aria-label": "Asset ID"
 					}),
-					/* @__PURE__ */ r("input", {
+					/* @__PURE__ */ o("input", {
 						className: "rounded-md border px-3 py-2",
-						value: d,
-						onChange: (e) => f(e.target.value)
+						value: m,
+						onChange: (e) => h(e.target.value),
+						"aria-label": "Chain network"
 					}),
-					/* @__PURE__ */ r("button", {
+					/* @__PURE__ */ o("button", {
 						className: "rounded-md bg-action-primary-bg px-3 py-2 text-action-primary-text",
-						disabled: _,
+						disabled: b,
 						type: "submit",
-						children: _ ? "Recording..." : "Record Attestation"
+						children: b ? "Recording..." : "Record Attestation"
 					})
 				]
-			}),
-			/* @__PURE__ */ i("div", {
+			})] }),
+			/* @__PURE__ */ s("div", {
 				className: "rounded-lg border",
 				children: [
-					/* @__PURE__ */ i("div", {
+					/* @__PURE__ */ s("div", {
 						className: "grid grid-cols-5 gap-3 border-b px-4 py-3 text-xs font-semibold uppercase tracking-wide text-text-secondary",
 						children: [
-							/* @__PURE__ */ r("span", { children: "Asset" }),
-							/* @__PURE__ */ r("span", { children: "Network" }),
-							/* @__PURE__ */ r("span", { children: "Hash" }),
-							/* @__PURE__ */ r("span", { children: "Tx" }),
-							/* @__PURE__ */ r("span", { children: "Attested At" })
+							/* @__PURE__ */ o("span", { children: "Asset" }),
+							/* @__PURE__ */ o("span", { children: "Network" }),
+							/* @__PURE__ */ o("span", { children: "Hash" }),
+							/* @__PURE__ */ o("span", { children: "Tx" }),
+							/* @__PURE__ */ o("span", { children: "Attested At" })
 						]
 					}),
-					m && v.length === 0 ? /* @__PURE__ */ r("div", {
+					_ && x.length === 0 ? /* @__PURE__ */ o("div", {
 						className: "space-y-2 px-4 py-4",
-						children: Array.from({ length: 4 }).map((e, t) => /* @__PURE__ */ r("div", { className: "h-8 rounded-md bg-bg-sunken motion-safe:animate-vc-shimmer" }, t))
+						children: Array.from({ length: 4 }).map((e, t) => /* @__PURE__ */ o("div", { className: "h-8 rounded-md bg-bg-sunken motion-safe:animate-vc-shimmer" }, t))
 					}) : null,
-					!m && v.length === 0 ? /* @__PURE__ */ r("div", {
-						className: "px-4 py-4 text-sm text-text-secondary",
-						children: "No provenance records found."
+					!_ && x.length === 0 ? /* @__PURE__ */ o(i, {
+						illustration: "empty-data",
+						title: "No provenance records yet",
+						description: "Record an attestation above to start an immutable, verifiable history for your assets."
 					}) : null,
-					v.map((e) => /* @__PURE__ */ i("div", {
+					x.map((e) => /* @__PURE__ */ s("div", {
 						className: "grid grid-cols-5 gap-3 border-b px-4 py-3 text-sm last:border-b-0",
 						children: [
-							/* @__PURE__ */ r("span", { children: e.assetId }),
-							/* @__PURE__ */ r("span", { children: e.chainNetwork }),
-							/* @__PURE__ */ r("span", {
+							/* @__PURE__ */ o("span", { children: e.assetId }),
+							/* @__PURE__ */ o("span", { children: e.chainNetwork }),
+							/* @__PURE__ */ o("span", {
 								className: "truncate",
 								children: e.hash
 							}),
-							/* @__PURE__ */ r("span", {
+							/* @__PURE__ */ o("span", {
 								className: "truncate text-text-secondary",
 								children: e.txHash ?? "pending"
 							}),
-							/* @__PURE__ */ r("span", {
+							/* @__PURE__ */ o("span", {
 								className: "text-text-secondary",
 								children: new Date(e.attestedAt).toLocaleString()
 							})
@@ -118,6 +121,6 @@ function u() {
 	});
 }
 //#endregion
-export { u as ProvenancePage };
+export { p as ProvenancePage };
 //# sourceMappingURL=ProvenancePage.js.map

package/dist/assethandler/pages/ProvenancePage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"ProvenancePage.js","names":[],"sources":["../../../src/assethandler/pages/ProvenancePage.tsx"],"sourcesContent":["import { ShieldCheck } from 'lucide-react';\nimport { GradientText, IllustratedEmptyState } from '@burdenoff/fe-libs/ui';\nimport { useState } from 'react';\nimport { gql } from '@apollo/client';\nimport { useMutation, useQuery } from '@apollo/client/react';\n\nconst PROVENANCE_RECORDS_QUERY = gql`\n query AssetHandlerProvenanceRecords {\n provenanceRecords {\n id\n assetId\n hash\n chainNetwork\n txHash\n attestedAt\n attestedBy\n }\n }\n`;\n\nconst RECORD_PROVENANCE_MUTATION = gql`\n mutation AssetHandlerRecordProvenance($input: RecordProvenanceInput!) {\n recordProvenance(input: $input) {\n id\n }\n }\n`;\n\nexport function ProvenancePage() {\n const [assetId, setAssetId] = useState('AST-001');\n const [chainNetwork, setChainNetwork] = useState('polygon-amoy');\n\n const { data, loading, refetch } = useQuery<{\n provenanceRecords: Array<{\n id: string;\n assetId: string;\n hash: string;\n chainNetwork: string;\n txHash: string \| null;\n attestedAt: string;\n attestedBy: string;\n }>;\n }>(PROVENANCE_RECORDS_QUERY, { fetchPolicy: 'cache-and-network' });\n\n const [recordProvenance, { loading: recording }] = useMutation(RECORD_PROVENANCE_MUTATION, {\n onCompleted: () => {\n void refetch();\n },\n });\n\n const records = data?.provenanceRecords ?? [];\n\n return (\n <div className=\"space-y-4 p-4\">\n <h1 className=\"flex items-center gap-2 text-2xl font-semibold\">\n <ShieldCheck className=\"h-6 w-6\" /> <GradientText>Provenance</GradientText>\n </h1>\n <p ~~className=\"text~~-~~text-secondary~~\~~">\~~n ~~Verify~~ ~~immutable~~ ~~asset~~ ~~provenance~~ and ~~lifecycle~~ ~~attestations~~.\n </p>\n <~~form\~~n className=\"~~grid~~ ~~gap~~-3 ~~rounded~~-lg ~~border~~ p-4 md:grid-cols-3\"\n onSubmit={(event) => {\n event.preventDefault();\n const hash = `${assetId}-${Date.now()}`;\n void recordProvenance({\n variables: {\n input: { assetId, hash, chainNetwork, metadata: { source: 'assethandler-ui' } },\n },\n });\n }}\n >\n <input\n className=\"rounded-md border px-3 py-2\"\n value={assetId}\n onChange={(event) => setAssetId(event.target.value)}\n />\n <input\n className=\"rounded-md border px-3 py-2\"\n value={chainNetwork}\n onChange={(event) => setChainNetwork(event.target.value)}\n />\n <button\n className=\"rounded-md bg-action-primary-bg px-3 py-2 text-action-primary-text\"\n disabled={recording}\n type=\"submit\"\n >\n {recording ? 'Recording...' : 'Record Attestation'}\n </button>\n </form>\n <div className=\"rounded-lg border\">\n <div className=\"grid grid-cols-5 gap-3 border-b px-4 py-3 text-xs font-semibold uppercase tracking-wide text-text-secondary\">\n <span>Asset</span>\n <span>Network</span>\n <span>Hash</span>\n <span>Tx</span>\n <span>Attested At</span>\n </div>\n {loading && records.length === 0 ? (\n <div className=\"space-y-2 px-4 py-4\">\n {Array.from({ length: 4 }).map((_, i) => (\n <div key={i} className=\"h-8 rounded-md bg-bg-sunken motion-safe:animate-vc-shimmer\" />\n ))}\n </div>\n ) : null}\n {!loading && records.length === 0 ? (\n <~~div className~~=\"px-~~4 py-4 text-sm text-text-secondary~~\">No provenance records ~~found.</div>\~~n ) : null}\n {records.map((record) => (\n <div\n key={record.id}\n className=\"grid grid-cols-5 gap-3 border-b px-4 py-3 text-sm last:border-b-0\"\n >\n <span>{record.assetId}</span>\n <span>{record.chainNetwork}</span>\n <span className=\"truncate\">{record.hash}</span>\n <span className=\"truncate text-text-secondary\">{record.txHash ?? 'pending'}</span>\n <span className=\"text-text-secondary\">\n {new Date(record.attestedAt).toLocaleString()}\n </span>\n </div>\n ))}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;AAMA,IAAM,IAA2B,CAAG;;;;;;;;;;;;GAc9B,IAA6B,CAAG;;;;;;;AAQtC,SAAgB,IAAiB;CAC/B,IAAM,CAAC,GAAS,KAAc,EAAS,UAAU,EAC3C,CAAC,GAAc,KAAmB,EAAS,eAAe,EAE1D,EAAE,SAAM,YAAS,eAAY,EAUhC,GAA0B,EAAE,aAAa,qBAAqB,CAAC,EAE5D,CAAC,GAAkB,EAAE,SAAS,OAAe,EAAY,GAA4B,EACzF,mBAAmB;AACZ,KAAS;IAEjB,CAAC,EAEI,IAAU,GAAM,qBAAqB,EAAE;AAE7C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,MAAD;IAAI,WAAU;cAAd;KACE,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA;;KAAC,kBAAC,GAAD,EAAA,UAAc,cAAyB,CAAA;KACxE;;GACL,kBAAC,~~KAAD~~;~~IAAG~~,WAAU;~~cAAsB~~;~~IAE/B~~,CAAA~~;GACJ~~,kBAAC,QAAD;IACE,WAAU;IACV,WAAW,MAAU;~~AAGd~~,KAFL,EAAM,gBAAgB,EAEjB,EAAiB,EACpB,WAAW,EACT,OAAO;MAAE;MAAS,MAHT,GAAG,EAAQ,GAAG,KAAK,KAAK;MAGT;MAAc,UAAU,EAAE,QAAQ,mBAAmB;MAAE,EAChF,EACF,CAAC;;~~cATN~~;KAYE,kBAAC,SAAD;MACE,WAAU;MACV,OAAO;MACP,WAAW,MAAU,EAAW,EAAM,OAAO,MAAM;MACnD,CAAA;KACF,kBAAC,SAAD;MACE,WAAU;MACV,OAAO;MACP,WAAW,MAAU,EAAgB,EAAM,OAAO,MAAM;MACxD,CAAA;KACF,kBAAC,UAAD;MACE,WAAU;MACV,UAAU;MACV,MAAK;gBAEJ,IAAY,iBAAiB;MACvB,CAAA;KACJ~~;;GACP~~,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,QAAD,EAAA,UAAM,SAAY,CAAA;OAClB,kBAAC,QAAD,EAAA,UAAM,WAAc,CAAA;OACpB,kBAAC,QAAD,EAAA,UAAM,QAAW,CAAA;OACjB,kBAAC,QAAD,EAAA,UAAM,MAAS,CAAA;OACf,kBAAC,QAAD,EAAA,UAAM,eAAkB,CAAA;OACpB;;KACL,KAAW,EAAQ,WAAW,IAC7B,kBAAC,OAAD;MAAK,WAAU;gBACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,MACjC,kBAAC,OAAD,EAAa,WAAU,8DAA+D,EAA5E,EAA4E,CACtF;MACE,CAAA,GACJ;KACH,CAAC,KAAW,EAAQ,WAAW,IAC9B,kBAAC,~~OAAD~~;~~MAAK~~,~~WAAU~~;~~gBAAwC~~;~~MAAkC~~,CAAA,~~GACvF~~;KACH,EAAQ,KAAK,MACZ,kBAAC,OAAD;MAEE,WAAU;gBAFZ;OAIE,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA;OAC7B,kBAAC,QAAD,EAAA,UAAO,EAAO,cAAoB,CAAA;OAClC,kBAAC,QAAD;QAAM,WAAU;kBAAY,EAAO;QAAY,CAAA;OAC/C,kBAAC,QAAD;QAAM,WAAU;kBAAgC,EAAO,UAAU;QAAiB,CAAA;OAClF,kBAAC,QAAD;QAAM,WAAU;kBACb,IAAI,KAAK,EAAO,WAAW,CAAC,gBAAgB;QACxC,CAAA;OACH;QAVC,EAAO,GAUR,CACN;KACE;;GACF"}
1	+ {"version":3,"file":"ProvenancePage.js","names":[],"sources":["../../../src/assethandler/pages/ProvenancePage.tsx"],"sourcesContent":["import { ShieldCheck } from 'lucide-react';\nimport { GradientText, IllustratedEmptyState, EmphasisPanel, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useState } from 'react';\nimport { gql } from '@apollo/client';\nimport { useMutation, useQuery } from '@apollo/client/react';\n\nconst PROVENANCE_RECORDS_QUERY = gql`\n query AssetHandlerProvenanceRecords {\n provenanceRecords {\n id\n assetId\n hash\n chainNetwork\n txHash\n attestedAt\n attestedBy\n }\n }\n`;\n\nconst RECORD_PROVENANCE_MUTATION = gql`\n mutation AssetHandlerRecordProvenance($input: RecordProvenanceInput!) {\n recordProvenance(input: $input) {\n id\n }\n }\n`;\n\nexport function ProvenancePage() {\n const [assetId, setAssetId] = useState('AST-001');\n const [chainNetwork, setChainNetwork] = useState('polygon-amoy');\n\n const { data, loading, refetch } = useQuery<{\n provenanceRecords: Array<{\n id: string;\n assetId: string;\n hash: string;\n chainNetwork: string;\n txHash: string \| null;\n attestedAt: string;\n attestedBy: string;\n }>;\n }>(PROVENANCE_RECORDS_QUERY, { fetchPolicy: 'cache-and-network' });\n\n const [recordProvenance, { loading: recording }] = useMutation(RECORD_PROVENANCE_MUTATION, {\n onCompleted: () => {\n void refetch();\n },\n });\n\n const records = data?.provenanceRecords ?? [];\n\n return (\n <div className=\"space-y-4 p-4\">\n <h1 className=\"flex items-center gap-2 text-2xl font-semibold\">\n <ShieldCheck className=\"h-6 w-6\" /> <GradientText>Provenance</GradientText>\n </h1>\n <PagePurpose>\n Prove an asset's history is tamper-proof. Record cryptographic attestations of key lifecycle\n events to a blockchain network so ownership, custody and condition can be independently\n verified later — essential for high-value, regulated or resold assets.\n </PagePurpose>\n <EmphasisPanel>\n <h2 className=\"text-sm font-semibold mb-3\">Record an attestation</h2>\n <form\n className=\"grid gap-3 md:grid-cols-3\"\n onSubmit={(event) => {\n event.preventDefault();\n const hash = `${assetId}-${Date.now()}`;\n void recordProvenance({\n variables: {\n input: { assetId, hash, chainNetwork, metadata: { source: 'assethandler-ui' } },\n },\n });\n }}\n >\n <input\n className=\"rounded-md border px-3 py-2\"\n value={assetId}\n onChange={(event) => setAssetId(event.target.value)}\n aria-label=\"Asset ID\"\n />\n <input\n className=\"rounded-md border px-3 py-2\"\n value={chainNetwork}\n onChange={(event) => setChainNetwork(event.target.value)}\n aria-label=\"Chain network\"\n />\n <button\n className=\"rounded-md bg-action-primary-bg px-3 py-2 text-action-primary-text\"\n disabled={recording}\n type=\"submit\"\n >\n {recording ? 'Recording...' : 'Record Attestation'}\n </button>\n </form>\n </EmphasisPanel>\n <div className=\"rounded-lg border\">\n <div className=\"grid grid-cols-5 gap-3 border-b px-4 py-3 text-xs font-semibold uppercase tracking-wide text-text-secondary\">\n <span>Asset</span>\n <span>Network</span>\n <span>Hash</span>\n <span>Tx</span>\n <span>Attested At</span>\n </div>\n {loading && records.length === 0 ? (\n <div className=\"space-y-2 px-4 py-4\">\n {Array.from({ length: 4 }).map((_, i) => (\n <div key={i} className=\"h-8 rounded-md bg-bg-sunken motion-safe:animate-vc-shimmer\" />\n ))}\n </div>\n ) : null}\n {!loading && records.length === 0 ? (\n <IllustratedEmptyState\n illustration=\"empty-data\"\n title=\"No provenance records yet\"\n description=\"Record an attestation above to start an immutable, verifiable history for your assets.\"\n />\n ) : null}\n {records.map((record) => (\n <div\n key={record.id}\n className=\"grid grid-cols-5 gap-3 border-b px-4 py-3 text-sm last:border-b-0\"\n >\n <span>{record.assetId}</span>\n <span>{record.chainNetwork}</span>\n <span className=\"truncate\">{record.hash}</span>\n <span className=\"truncate text-text-secondary\">{record.txHash ?? 'pending'}</span>\n <span className=\"text-text-secondary\">\n {new Date(record.attestedAt).toLocaleString()}\n </span>\n </div>\n ))}\n </div>\n </div>\n );\n}\n"],"mappings":";;;;;;;AAMA,IAAM,IAA2B,CAAG;;;;;;;;;;;;GAc9B,IAA6B,CAAG;;;;;;;AAQtC,SAAgB,IAAiB;CAC/B,IAAM,CAAC,GAAS,KAAc,EAAS,UAAU,EAC3C,CAAC,GAAc,KAAmB,EAAS,eAAe,EAE1D,EAAE,SAAM,YAAS,eAAY,EAUhC,GAA0B,EAAE,aAAa,qBAAqB,CAAC,EAE5D,CAAC,GAAkB,EAAE,SAAS,OAAe,EAAY,GAA4B,EACzF,mBAAmB;AACZ,KAAS;IAEjB,CAAC,EAEI,IAAU,GAAM,qBAAqB,EAAE;AAE7C,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,MAAD;IAAI,WAAU;cAAd;KACE,kBAAC,GAAD,EAAa,WAAU,WAAY,CAAA;;KAAC,kBAAC,GAAD,EAAA,UAAc,cAAyB,CAAA;KACxE;;GACL,kBAAC,GAAD,EAAA,UAAa,+PAIC,CAAA;GACd,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,MAAD;IAAI,WAAU;cAA6B;IAA0B,CAAA,EACrE,kBAAC,QAAD;IACE,WAAU;IACV,WAAW,MAAU;AAGhB,KAFL,EAAM,gBAAgB,EAEjB,EAAiB,EACpB,WAAW,EACT,OAAO;MAAE;MAAS,MAHT,GAAG,EAAQ,GAAG,KAAK,KAAK;MAGT;MAAc,UAAU,EAAE,QAAQ,mBAAmB;MAAE,EAChF,EACF,CAAC;;cATJ;KAYE,kBAAC,SAAD;MACE,WAAU;MACV,OAAO;MACP,WAAW,MAAU,EAAW,EAAM,OAAO,MAAM;MACnD,cAAW;MACX,CAAA;KACF,kBAAC,SAAD;MACE,WAAU;MACV,OAAO;MACP,WAAW,MAAU,EAAgB,EAAM,OAAO,MAAM;MACxD,cAAW;MACX,CAAA;KACF,kBAAC,UAAD;MACE,WAAU;MACV,UAAU;MACV,MAAK;gBAEJ,IAAY,iBAAiB;MACvB,CAAA;KACJ;MACO,EAAA,CAAA;GAChB,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACE,kBAAC,QAAD,EAAA,UAAM,SAAY,CAAA;OAClB,kBAAC,QAAD,EAAA,UAAM,WAAc,CAAA;OACpB,kBAAC,QAAD,EAAA,UAAM,QAAW,CAAA;OACjB,kBAAC,QAAD,EAAA,UAAM,MAAS,CAAA;OACf,kBAAC,QAAD,EAAA,UAAM,eAAkB,CAAA;OACpB;;KACL,KAAW,EAAQ,WAAW,IAC7B,kBAAC,OAAD;MAAK,WAAU;gBACZ,MAAM,KAAK,EAAE,QAAQ,GAAG,CAAC,CAAC,KAAK,GAAG,MACjC,kBAAC,OAAD,EAAa,WAAU,8DAA+D,EAA5E,EAA4E,CACtF;MACE,CAAA,GACJ;KACH,CAAC,KAAW,EAAQ,WAAW,IAC9B,kBAAC,GAAD;MACE,cAAa;MACb,OAAM;MACN,aAAY;MACZ,CAAA,GACA;KACH,EAAQ,KAAK,MACZ,kBAAC,OAAD;MAEE,WAAU;gBAFZ;OAIE,kBAAC,QAAD,EAAA,UAAO,EAAO,SAAe,CAAA;OAC7B,kBAAC,QAAD,EAAA,UAAO,EAAO,cAAoB,CAAA;OAClC,kBAAC,QAAD;QAAM,WAAU;kBAAY,EAAO;QAAY,CAAA;OAC/C,kBAAC,QAAD;QAAM,WAAU;kBAAgC,EAAO,UAAU;QAAiB,CAAA;OAClF,kBAAC,QAAD;QAAM,WAAU;kBACb,IAAI,KAAK,EAAO,WAAW,CAAC,gBAAgB;QACxC,CAAA;OACH;QAVC,EAAO,GAUR,CACN;KACE;;GACF"}