@burdenoff/microfe-assethandler 2026.625.1 → 2026.625.2

package/dist/assethandler/pages/TransactionsTransactionDetailPage.js

@@ -1,23 +1,23 @@
 import { useAssetHandlerStore as e } from "../store/assethandlerStore.js";
 import { ArrowLeft as t, Building as n, Calendar as r, CheckCircle2 as i, DollarSign as a, FileText as o, Package as s, Printer as c, User as l, XCircle as u } from "lucide-react";
-import { useParams as d } from "react-router-dom";
-import { Badge as f, Button as p, Card as m, CardContent as h, CardHeader as g, CardTitle as _, GradientText as v, Separator as y } from "@burdenoff/fe-libs/ui";
-import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { useNavigate as d, useParams as f } from "react-router-dom";
+import { Badge as p, Button as m, Card as h, CardContent as g, CardHeader as _, CardTitle as v, EmphasisPanel as y, GradientText as b, IllustratedEmptyState as x, PagePurpose as S, Separator as C } from "@burdenoff/fe-libs/ui";
+import { jsx as w, jsxs as T } from "react/jsx-runtime";
 //#region src/assethandler/pages/TransactionsTransactionDetailPage.tsx
-var S = {
+var E = {
 	pending: "outline",
 	approved: "default",
 	completed: "secondary",
 	rejected: "destructive",
 	cancelled: "outline"
-}, C = {
+}, D = {
 	purchase: "default",
 	lease: "secondary",
 	disposal: "destructive",
 	transfer: "outline",
 	maintenance: "secondary",
 	depreciation: "outline"
-}, w = [
+}, O = [
 	{
 		status: "Created",
 		date: "2026-01-15T10:30:00Z",
@@ -39,243 +39,260 @@ var S = {
 		actor: "Finance System"
 	}
 ];
-function T() {
-	let { transactionId: T } = d(), { transactions: E } = e(), D = E.find((e) => e.id === T) ?? E[0];
-	return D ? /* @__PURE__ */ x("div", {
+function k() {
+	let k = d(), { transactionId: A } = f(), { transactions: j } = e(), M = j.find((e) => e.id === A) ?? j[0];
+	return M ? /* @__PURE__ */ T("div", {
 		className: "space-y-6 p-6 max-w-5xl",
-		children: [/* @__PURE__ */ x("div", {
-			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ x("div", {
-				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ b(p, {
-					variant: "outline",
-					size: "sm",
-					children: /* @__PURE__ */ b(t, { className: "h-4 w-4" })
-				}), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ x("div", {
-					className: "flex items-center gap-2",
+		children: [
+			/* @__PURE__ */ T("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ T("div", {
+					className: "flex items-center gap-3",
+					children: [/* @__PURE__ */ w(m, {
+						variant: "outline",
+						size: "sm",
+						onClick: () => k("/transactions/transaction-list"),
+						children: /* @__PURE__ */ w(t, { className: "h-4 w-4" })
+					}), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ T("div", {
+						className: "flex items-center gap-2",
+						children: [
+							/* @__PURE__ */ w("h1", {
+								className: "text-2xl font-semibold",
+								children: /* @__PURE__ */ w(b, { children: M.id })
+							}),
+							/* @__PURE__ */ w(p, {
+								variant: E[M.status],
+								children: M.status
+							}),
+							/* @__PURE__ */ w(p, {
+								variant: D[M.type],
+								children: M.type
+							})
+						]
+					}), /* @__PURE__ */ w("p", {
+						className: "text-sm text-text-secondary",
+						children: M.description
+					})] })]
+				}), /* @__PURE__ */ T("div", {
+					className: "flex gap-2",
 					children: [
-						/* @__PURE__ */ b("h1", {
-							className: "text-2xl font-semibold",
-							children: /* @__PURE__ */ b(v, { children: D.id })
+						/* @__PURE__ */ T(m, {
+							variant: "outline",
+							size: "sm",
+							children: [/* @__PURE__ */ w(c, { className: "mr-2 h-4 w-4" }), "Print"]
 						}),
-						/* @__PURE__ */ b(f, {
-							variant: S[D.status],
-							children: D.status
+						/* @__PURE__ */ T(m, {
+							variant: "outline",
+							size: "sm",
+							children: [/* @__PURE__ */ w(i, { className: "mr-2 h-4 w-4" }), "Approve"]
 						}),
-						/* @__PURE__ */ b(f, {
-							variant: C[D.type],
-							children: D.type
+						/* @__PURE__ */ T(m, {
+							variant: "destructive",
+							size: "sm",
+							children: [/* @__PURE__ */ w(u, { className: "mr-2 h-4 w-4" }), "Reject"]
 						})
 					]
-				}), /* @__PURE__ */ b("p", {
-					className: "text-sm text-text-secondary",
-					children: D.description
-				})] })]
-			}), /* @__PURE__ */ x("div", {
-				className: "flex gap-2",
+				})]
+			}),
+			/* @__PURE__ */ w(S, { children: "The complete record of a single financial transaction tied to your assets — what it was for, how much, against which budget and asset, and its approval timeline. Use this page to verify, approve or reject a transaction with a full audit trail." }),
+			/* @__PURE__ */ T("div", {
+				className: "grid gap-6 md:grid-cols-2",
 				children: [
-					/* @__PURE__ */ x(p, {
-						variant: "outline",
-						size: "sm",
-						children: [/* @__PURE__ */ b(c, { className: "mr-2 h-4 w-4" }), "Print"]
-					}),
-					/* @__PURE__ */ x(p, {
-						variant: "outline",
-						size: "sm",
-						children: [/* @__PURE__ */ b(i, { className: "mr-2 h-4 w-4" }), "Approve"]
-					}),
-					/* @__PURE__ */ x(p, {
-						variant: "destructive",
-						size: "sm",
-						children: [/* @__PURE__ */ b(u, { className: "mr-2 h-4 w-4" }), "Reject"]
-					})
-				]
-			})]
-		}), /* @__PURE__ */ x("div", {
-			className: "grid gap-6 md:grid-cols-2",
-			children: [
-				/* @__PURE__ */ x(m, { children: [/* @__PURE__ */ b(g, { children: /* @__PURE__ */ x(_, {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ b(o, { className: "h-5 w-5" }), "Transaction Information"]
-				}) }), /* @__PURE__ */ x(h, {
-					className: "space-y-4",
-					children: [
-						/* @__PURE__ */ x("div", {
-							className: "grid grid-cols-2 gap-4",
-							children: [
-								/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-									className: "text-sm text-text-secondary",
-									children: "Transaction ID"
-								}), /* @__PURE__ */ b("p", {
-									className: "font-mono font-medium",
-									children: D.id
-								})] }),
-								/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-									className: "text-sm text-text-secondary",
-									children: "Type"
-								}), /* @__PURE__ */ b(f, {
-									variant: C[D.type],
-									children: D.type
-								})] }),
-								/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+					/* @__PURE__ */ T(h, { children: [/* @__PURE__ */ w(_, { children: /* @__PURE__ */ T(v, {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ w(o, { className: "h-5 w-5" }), "Transaction Information"]
+					}) }), /* @__PURE__ */ T(g, {
+						className: "space-y-4",
+						children: [
+							/* @__PURE__ */ T("div", {
+								className: "grid grid-cols-2 gap-4",
+								children: [
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: "Transaction ID"
+									}), /* @__PURE__ */ w("p", {
+										className: "font-mono font-medium",
+										children: M.id
+									})] }),
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: "Type"
+									}), /* @__PURE__ */ w(p, {
+										variant: D[M.type],
+										children: M.type
+									})] }),
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: "Category"
+									}), /* @__PURE__ */ w("p", {
+										className: "font-medium",
+										children: M.category
+									})] }),
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: "Status"
+									}), /* @__PURE__ */ w(p, {
+										variant: E[M.status],
+										children: M.status
+									})] })
+								]
+							}),
+							/* @__PURE__ */ w(C, {}),
+							/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+								className: "text-sm text-text-secondary",
+								children: "Description"
+							}), /* @__PURE__ */ w("p", {
+								className: "mt-1",
+								children: M.description
+							})] })
+						]
+					})] }),
+					/* @__PURE__ */ T(y, { children: [/* @__PURE__ */ w(_, {
+						className: "px-0 pt-0",
+						children: /* @__PURE__ */ T(v, {
+							className: "flex items-center gap-2",
+							children: [/* @__PURE__ */ w(a, { className: "h-5 w-5" }), "Financial Details"]
+						})
+					}), /* @__PURE__ */ T(g, {
+						className: "space-y-4 px-0 pb-0",
+						children: [
+							/* @__PURE__ */ T("div", {
+								className: "grid grid-cols-2 gap-4",
+								children: [
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: "Amount"
+									}), /* @__PURE__ */ w("p", {
+										className: `text-2xl font-bold ${M.amount < 0 ? "text-status-error-text" : ""}`,
+										children: ((e) => Math.abs(e).toLocaleString("en-US", {
+											style: "currency",
+											currency: "USD"
+										}))(M.amount)
+									})] }),
+									/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: "Currency"
+									}), /* @__PURE__ */ w("p", {
+										className: "font-medium",
+										children: M.currency
+									})] }),
+									M.poNumber && /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: "PO Number"
+									}), /* @__PURE__ */ w("p", {
+										className: "font-mono font-medium",
+										children: M.poNumber
+									})] }),
+									M.invoiceNumber && /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
+										className: "text-sm text-text-secondary",
+										children: "Invoice Number"
+									}), /* @__PURE__ */ w("p", {
+										className: "font-mono font-medium",
+										children: M.invoiceNumber
+									})] })
+								]
+							}),
+							/* @__PURE__ */ w(C, {}),
+							/* @__PURE__ */ T("div", {
+								className: "grid grid-cols-2 gap-4",
+								children: [M.approvedBy && /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 									className: "text-sm text-text-secondary",
-									children: "Category"
-								}), /* @__PURE__ */ b("p", {
-									className: "font-medium",
-									children: D.category
-								})] }),
-								/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+									children: "Approved By"
+								}), /* @__PURE__ */ T("div", {
+									className: "flex items-center gap-1 mt-1",
+									children: [/* @__PURE__ */ w(l, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ w("p", {
+										className: "font-medium",
+										children: M.approvedBy
+									})]
+								})] }), /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 									className: "text-sm text-text-secondary",
-									children: "Status"
-								}), /* @__PURE__ */ b(f, {
-									variant: S[D.status],
-									children: D.status
-								})] })
-							]
-						}),
-						/* @__PURE__ */ b(y, {}),
-						/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-							className: "text-sm text-text-secondary",
-							children: "Description"
-						}), /* @__PURE__ */ b("p", {
-							className: "mt-1",
-							children: D.description
-						})] })
-					]
-				})] }),
-				/* @__PURE__ */ x(m, { children: [/* @__PURE__ */ b(g, { children: /* @__PURE__ */ x(_, {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ b(a, { className: "h-5 w-5" }), "Financial Details"]
-				}) }), /* @__PURE__ */ x(h, {
-					className: "space-y-4",
-					children: [
-						/* @__PURE__ */ x("div", {
+									children: "Date"
+								}), /* @__PURE__ */ T("div", {
+									className: "flex items-center gap-1 mt-1",
+									children: [/* @__PURE__ */ w(r, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ w("p", {
+										className: "font-medium",
+										children: new Date(M.date).toLocaleDateString()
+									})]
+								})] })]
+							})
+						]
+					})] }),
+					/* @__PURE__ */ T(h, { children: [/* @__PURE__ */ w(_, { children: /* @__PURE__ */ T(v, {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ w(s, { className: "h-5 w-5" }), "Related Items"]
+					}) }), /* @__PURE__ */ w(g, {
+						className: "space-y-4",
+						children: /* @__PURE__ */ T("div", {
 							className: "grid grid-cols-2 gap-4",
 							children: [
-								/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+								M.vendor && /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 									className: "text-sm text-text-secondary",
-									children: "Amount"
-								}), /* @__PURE__ */ b("p", {
-									className: `text-2xl font-bold ${D.amount < 0 ? "text-status-error-text" : ""}`,
-									children: ((e) => Math.abs(e).toLocaleString("en-US", {
-										style: "currency",
-										currency: "USD"
-									}))(D.amount)
-								})] }),
-								/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-									className: "text-sm text-text-secondary",
-									children: "Currency"
-								}), /* @__PURE__ */ b("p", {
+									children: "Vendor"
+								}), /* @__PURE__ */ w("p", {
 									className: "font-medium",
-									children: D.currency
+									children: M.vendor
 								})] }),
-								D.poNumber && /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+								/* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 									className: "text-sm text-text-secondary",
-									children: "PO Number"
-								}), /* @__PURE__ */ b("p", {
-									className: "font-mono font-medium",
-									children: D.poNumber
+									children: "Department"
+								}), /* @__PURE__ */ T("div", {
+									className: "flex items-center gap-1 mt-1",
+									children: [/* @__PURE__ */ w(n, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ w("p", {
+										className: "font-medium",
+										children: M.department
+									})]
 								})] }),
-								D.invoiceNumber && /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
+								M.relatedAsset && /* @__PURE__ */ T("div", { children: [/* @__PURE__ */ w("p", {
 									className: "text-sm text-text-secondary",
-									children: "Invoice Number"
-								}), /* @__PURE__ */ b("p", {
+									children: "Related Asset"
+								}), /* @__PURE__ */ w("p", {
 									className: "font-mono font-medium",
-									children: D.invoiceNumber
+									children: M.relatedAsset
 								})] })
 							]
-						}),
-						/* @__PURE__ */ b(y, {}),
-						/* @__PURE__ */ x("div", {
-							className: "grid grid-cols-2 gap-4",
-							children: [D.approvedBy && /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-								className: "text-sm text-text-secondary",
-								children: "Approved By"
-							}), /* @__PURE__ */ x("div", {
-								className: "flex items-center gap-1 mt-1",
-								children: [/* @__PURE__ */ b(l, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ b("p", {
-									className: "font-medium",
-									children: D.approvedBy
-								})]
-							})] }), /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-								className: "text-sm text-text-secondary",
-								children: "Date"
-							}), /* @__PURE__ */ x("div", {
-								className: "flex items-center gap-1 mt-1",
-								children: [/* @__PURE__ */ b(r, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ b("p", {
-									className: "font-medium",
-									children: new Date(D.date).toLocaleDateString()
-								})]
-							})] })]
 						})
-					]
-				})] }),
-				/* @__PURE__ */ x(m, { children: [/* @__PURE__ */ b(g, { children: /* @__PURE__ */ x(_, {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ b(s, { className: "h-5 w-5" }), "Related Items"]
-				}) }), /* @__PURE__ */ b(h, {
-					className: "space-y-4",
-					children: /* @__PURE__ */ x("div", {
-						className: "grid grid-cols-2 gap-4",
-						children: [
-							D.vendor && /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-								className: "text-sm text-text-secondary",
-								children: "Vendor"
-							}), /* @__PURE__ */ b("p", {
-								className: "font-medium",
-								children: D.vendor
-							})] }),
-							/* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-								className: "text-sm text-text-secondary",
-								children: "Department"
-							}), /* @__PURE__ */ x("div", {
-								className: "flex items-center gap-1 mt-1",
-								children: [/* @__PURE__ */ b(n, { className: "h-4 w-4 text-text-secondary" }), /* @__PURE__ */ b("p", {
-									className: "font-medium",
-									children: D.department
+					})] }),
+					/* @__PURE__ */ T(h, { children: [/* @__PURE__ */ w(_, { children: /* @__PURE__ */ w(v, { children: "Status Timeline" }) }), /* @__PURE__ */ w(g, { children: /* @__PURE__ */ w("div", {
+						className: "space-y-4",
+						children: O.map((e, t) => /* @__PURE__ */ T("div", {
+							className: "flex gap-4",
+							children: [/* @__PURE__ */ T("div", {
+								className: "flex flex-col items-center",
+								children: [/* @__PURE__ */ w("div", { className: `h-3 w-3 rounded-full ${t === O.length - 1 ? "bg-status-success-bg" : "bg-action-primary-bg"}` }), t < O.length - 1 && /* @__PURE__ */ w("div", { className: "w-px flex-1 bg-border" })]
+							}), /* @__PURE__ */ T("div", {
+								className: "pb-4",
+								children: [/* @__PURE__ */ w("p", {
+									className: "font-medium text-sm",
+									children: e.status
+								}), /* @__PURE__ */ T("p", {
+									className: "text-xs text-text-secondary",
+									children: [
+										new Date(e.date).toLocaleString(),
+										" by ",
+										e.actor
+									]
 								})]
-							})] }),
-							D.relatedAsset && /* @__PURE__ */ x("div", { children: [/* @__PURE__ */ b("p", {
-								className: "text-sm text-text-secondary",
-								children: "Related Asset"
-							}), /* @__PURE__ */ b("p", {
-								className: "font-mono font-medium",
-								children: D.relatedAsset
-							})] })
-						]
-					})
-				})] }),
-				/* @__PURE__ */ x(m, { children: [/* @__PURE__ */ b(g, { children: /* @__PURE__ */ b(_, { children: "Status Timeline" }) }), /* @__PURE__ */ b(h, { children: /* @__PURE__ */ b("div", {
-					className: "space-y-4",
-					children: w.map((e, t) => /* @__PURE__ */ x("div", {
-						className: "flex gap-4",
-						children: [/* @__PURE__ */ x("div", {
-							className: "flex flex-col items-center",
-							children: [/* @__PURE__ */ b("div", { className: `h-3 w-3 rounded-full ${t === w.length - 1 ? "bg-status-success-bg" : "bg-action-primary-bg"}` }), t < w.length - 1 && /* @__PURE__ */ b("div", { className: "w-px flex-1 bg-border" })]
-						}), /* @__PURE__ */ x("div", {
-							className: "pb-4",
-							children: [/* @__PURE__ */ b("p", {
-								className: "font-medium text-sm",
-								children: e.status
-							}), /* @__PURE__ */ x("p", {
-								className: "text-xs text-text-secondary",
-								children: [
-									new Date(e.date).toLocaleString(),
-									" by ",
-									e.actor
-								]
 							})]
-						})]
-					}, t))
-				}) })] })
-			]
-		})]
-	}) : /* @__PURE__ */ b("div", {
-		className: "p-6 text-center text-text-secondary",
-		children: "Transaction not found."
+						}, t))
+					}) })] })
+				]
+			})
+		]
+	}) : /* @__PURE__ */ w("div", {
+		className: "p-6",
+		children: /* @__PURE__ */ w(x, {
+			illustration: "empty-search",
+			title: "Transaction not found",
+			description: "This transaction may have been removed. Return to the transaction list to find it.",
+			action: /* @__PURE__ */ w(m, {
+				size: "sm",
+				onClick: () => k("/transactions/transaction-list"),
+				children: "Back to transactions"
+			})
+		})
 	});
 }
 //#endregion
-export { T as TransactionsTransactionDetailPage };
+export { k as TransactionsTransactionDetailPage };
 
 //# sourceMappingURL=TransactionsTransactionDetailPage.js.map

package/dist/assethandler/pages/TransactionsTransactionDetailPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"TransactionsTransactionDetailPage.js","names":[],"sources":["../../../src/assethandler/pages/TransactionsTransactionDetailPage.tsx"],"sourcesContent":["import {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  Separator,\n  GradientText,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  ArrowLeft,\n  Printer,\n  CheckCircle2,\n  XCircle,\n  DollarSign,\n  Calendar,\n  Building,\n  FileText,\n  User,\n  Package,\n} from 'lucide-react';\nimport { useParams } from 'react-router-dom';\nimport { useAssetHandlerStore } from '../store/assethandlerStore';\n\nconst statusColors: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {\n  pending: 'outline',\n  approved: 'default',\n  completed: 'secondary',\n  rejected: 'destructive',\n  cancelled: 'outline',\n};\n\nconst typeColors: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {\n  purchase: 'default',\n  lease: 'secondary',\n  disposal: 'destructive',\n  transfer: 'outline',\n  maintenance: 'secondary',\n  depreciation: 'outline',\n};\n\nconst statusTimeline = [\n  { status: 'Created', date: '2026-01-15T10:30:00Z', actor: 'Procurement System' },\n  { status: 'Pending Approval', date: '2026-01-15T10:30:00Z', actor: 'Auto-routed' },\n  { status: 'Approved', date: '2026-01-16T14:20:00Z', actor: 'Michael Chen' },\n  { status: 'Completed', date: '2026-01-17T09:00:00Z', actor: 'Finance System' },\n];\n\nexport function TransactionsTransactionDetailPage() {\n  const { transactionId } = useParams<{ transactionId: string }>();\n  const { transactions } = useAssetHandlerStore();\n  const transaction = transactions.find((item) => item.id === transactionId) ?? transactions[0];\n\n  if (!transaction) {\n    return <div className=\"p-6 text-center text-text-secondary\">Transaction not found.</div>;\n  }\n\n  const formatAmount = (amount: number) => {\n    return Math.abs(amount).toLocaleString('en-US', { style: 'currency', currency: 'USD' });\n  };\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-5xl\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <Button variant=\"outline\" size=\"sm\">\n            <ArrowLeft className=\"h-4 w-4\" />\n          </Button>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <h1 className=\"text-2xl font-semibold\">\n                <GradientText>{transaction.id}</GradientText>\n              </h1>\n              <Badge variant={statusColors[transaction.status]}>{transaction.status}</Badge>\n              <Badge variant={typeColors[transaction.type]}>{transaction.type}</Badge>\n            </div>\n            <p className=\"text-sm text-text-secondary\">{transaction.description}</p>\n          </div>\n        </div>\n        <div className=\"flex gap-2\">\n          <Button variant=\"outline\" size=\"sm\">\n            <Printer className=\"mr-2 h-4 w-4\" />\n            Print\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            <CheckCircle2 className=\"mr-2 h-4 w-4\" />\n            Approve\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\">\n            <XCircle className=\"mr-2 h-4 w-4\" />\n            Reject\n          </Button>\n        </div>\n      </div>\n\n      <div className=\"grid gap-6 md:grid-cols-2\">\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2\">\n              <FileText className=\"h-5 w-5\" />\n              Transaction Information\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div>\n                <p className=\"text-sm text-text-secondary\">Transaction ID</p>\n                <p className=\"font-mono font-medium\">{transaction.id}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Type</p>\n                <Badge variant={typeColors[transaction.type]}>{transaction.type}</Badge>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Category</p>\n                <p className=\"font-medium\">{transaction.category}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Status</p>\n                <Badge variant={statusColors[transaction.status]}>{transaction.status}</Badge>\n              </div>\n            </div>\n            <Separator />\n            <div>\n              <p className=\"text-sm text-text-secondary\">Description</p>\n              <p className=\"mt-1\">{transaction.description}</p>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2\">\n              <DollarSign className=\"h-5 w-5\" />\n              Financial Details\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div>\n                <p className=\"text-sm text-text-secondary\">Amount</p>\n                <p\n                  className={`text-2xl font-bold ${transaction.amount < 0 ? 'text-status-error-text' : ''}`}\n                >\n                  {formatAmount(transaction.amount)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Currency</p>\n                <p className=\"font-medium\">{transaction.currency}</p>\n              </div>\n              {transaction.poNumber && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">PO Number</p>\n                  <p className=\"font-mono font-medium\">{transaction.poNumber}</p>\n                </div>\n              )}\n              {transaction.invoiceNumber && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">Invoice Number</p>\n                  <p className=\"font-mono font-medium\">{transaction.invoiceNumber}</p>\n                </div>\n              )}\n            </div>\n            <Separator />\n            <div className=\"grid grid-cols-2 gap-4\">\n              {transaction.approvedBy && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">Approved By</p>\n                  <div className=\"flex items-center gap-1 mt-1\">\n                    <User className=\"h-4 w-4 text-text-secondary\" />\n                    <p className=\"font-medium\">{transaction.approvedBy}</p>\n                  </div>\n                </div>\n              )}\n              <div>\n                <p className=\"text-sm text-text-secondary\">Date</p>\n                <div className=\"flex items-center gap-1 mt-1\">\n                  <Calendar className=\"h-4 w-4 text-text-secondary\" />\n                  <p className=\"font-medium\">{new Date(transaction.date).toLocaleDateString()}</p>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2\">\n              <Package className=\"h-5 w-5\" />\n              Related Items\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            <div className=\"grid grid-cols-2 gap-4\">\n              {transaction.vendor && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">Vendor</p>\n                  <p className=\"font-medium\">{transaction.vendor}</p>\n                </div>\n              )}\n              <div>\n                <p className=\"text-sm text-text-secondary\">Department</p>\n                <div className=\"flex items-center gap-1 mt-1\">\n                  <Building className=\"h-4 w-4 text-text-secondary\" />\n                  <p className=\"font-medium\">{transaction.department}</p>\n                </div>\n              </div>\n              {transaction.relatedAsset && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">Related Asset</p>\n                  <p className=\"font-mono font-medium\">{transaction.relatedAsset}</p>\n                </div>\n              )}\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <CardTitle>Status Timeline</CardTitle>\n          </CardHeader>\n          <CardContent>\n            <div className=\"space-y-4\">\n              {statusTimeline.map((entry, i) => (\n                <div key={i} className=\"flex gap-4\">\n                  <div className=\"flex flex-col items-center\">\n                    <div\n                      className={`h-3 w-3 rounded-full ${i === statusTimeline.length - 1 ? 'bg-status-success-bg' : 'bg-action-primary-bg'}`}\n                    />\n                    {i < statusTimeline.length - 1 && <div className=\"w-px flex-1 bg-border\" />}\n                  </div>\n                  <div className=\"pb-4\">\n                    <p className=\"font-medium text-sm\">{entry.status}</p>\n                    <p className=\"text-xs text-text-secondary\">\n                      {new Date(entry.date).toLocaleString()} by {entry.actor}\n                    </p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  );\n}\n"],"mappings":";;;;;;AAyBA,IAAM,IAAoF;CACxF,SAAS;CACT,UAAU;CACV,WAAW;CACX,UAAU;CACV,WAAW;CACZ,EAEK,IAAkF;CACtF,UAAU;CACV,OAAO;CACP,UAAU;CACV,UAAU;CACV,aAAa;CACb,cAAc;CACf,EAEK,IAAiB;CACrB;EAAE,QAAQ;EAAW,MAAM;EAAwB,OAAO;EAAsB;CAChF;EAAE,QAAQ;EAAoB,MAAM;EAAwB,OAAO;EAAe;CAClF;EAAE,QAAQ;EAAY,MAAM;EAAwB,OAAO;EAAgB;CAC3E;EAAE,QAAQ;EAAa,MAAM;EAAwB,OAAO;EAAkB;CAC/E;AAED,SAAgB,IAAoC;CAClD,IAAM,EAAE,qBAAkB,GAAsC,EAC1D,EAAE,oBAAiB,GAAsB,EACzC,IAAc,EAAa,MAAM,MAAS,EAAK,OAAO,EAAc,IAAI,EAAa;AAU3F,QARK,IASH,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,GAAD;KAAQ,SAAQ;KAAU,MAAK;eAC7B,kBAAC,GAAD,EAAW,WAAU,WAAY,CAAA;KAC1B,CAAA,EACT,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,MAAD;OAAI,WAAU;iBACZ,kBAAC,GAAD,EAAA,UAAe,EAAY,IAAkB,CAAA;OAC1C,CAAA;MACL,kBAAC,GAAD;OAAO,SAAS,EAAa,EAAY;iBAAU,EAAY;OAAe,CAAA;MAC9E,kBAAC,GAAD;OAAO,SAAS,EAAW,EAAY;iBAAQ,EAAY;OAAa,CAAA;MACpE;QACN,kBAAC,KAAD;KAAG,WAAU;eAA+B,EAAY;KAAgB,CAAA,CACpE,EAAA,CAAA,CACF;OACN,kBAAC,OAAD;IAAK,WAAU;cAAf;KACE,kBAAC,GAAD;MAAQ,SAAQ;MAAU,MAAK;gBAA/B,CACE,kBAAC,GAAD,EAAS,WAAU,gBAAiB,CAAA,EAAA,QAE7B;;KACT,kBAAC,GAAD;MAAQ,SAAQ;MAAU,MAAK;gBAA/B,CACE,kBAAC,GAAD,EAAc,WAAU,gBAAiB,CAAA,EAAA,UAElC;;KACT,kBAAC,GAAD;MAAQ,SAAQ;MAAc,MAAK;gBAAnC,CACE,kBAAC,GAAD,EAAS,WAAU,gBAAiB,CAAA,EAAA,SAE7B;;KACL;MACF;MAEN,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KAAW,WAAU;eAArB,CACE,kBAAC,GAAD,EAAU,WAAU,WAAY,CAAA,EAAA,0BAEtB;QACD,CAAA,EACb,kBAAC,GAAD;KAAa,WAAU;eAAvB;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAA8B;SAAkB,CAAA,EAC7D,kBAAC,KAAD;SAAG,WAAU;mBAAyB,EAAY;SAAO,CAAA,CACrD,EAAA,CAAA;QACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAA8B;SAAQ,CAAA,EACnD,kBAAC,GAAD;SAAO,SAAS,EAAW,EAAY;mBAAQ,EAAY;SAAa,CAAA,CACpE,EAAA,CAAA;QACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAA8B;SAAY,CAAA,EACvD,kBAAC,KAAD;SAAG,WAAU;mBAAe,EAAY;SAAa,CAAA,CACjD,EAAA,CAAA;QACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAA8B;SAAU,CAAA,EACrD,kBAAC,GAAD;SAAO,SAAS,EAAa,EAAY;mBAAU,EAAY;SAAe,CAAA,CAC1E,EAAA,CAAA;QACF;;MACN,kBAAC,GAAD,EAAa,CAAA;MACb,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;OAAG,WAAU;iBAA8B;OAAe,CAAA,EAC1D,kBAAC,KAAD;OAAG,WAAU;iBAAQ,EAAY;OAAgB,CAAA,CAC7C,EAAA,CAAA;MACM;OACT,EAAA,CAAA;IAEP,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KAAW,WAAU;eAArB,CACE,kBAAC,GAAD,EAAY,WAAU,WAAY,CAAA,EAAA,oBAExB;QACD,CAAA,EACb,kBAAC,GAAD;KAAa,WAAU;eAAvB;MACE,kBAAC,OAAD;OAAK,WAAU;iBAAf;QACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAA8B;SAAU,CAAA,EACrD,kBAAC,KAAD;SACE,WAAW,sBAAsB,EAAY,SAAS,IAAI,2BAA2B;qBArF/E,MACb,KAAK,IAAI,EAAO,CAAC,eAAe,SAAS;UAAE,OAAO;UAAY,UAAU;UAAO,CAAC,EAsF3D,EAAY,OAAO;SAC/B,CAAA,CACA,EAAA,CAAA;QACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAA8B;SAAY,CAAA,EACvD,kBAAC,KAAD;SAAG,WAAU;mBAAe,EAAY;SAAa,CAAA,CACjD,EAAA,CAAA;QACL,EAAY,YACX,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAA8B;SAAa,CAAA,EACxD,kBAAC,KAAD;SAAG,WAAU;mBAAyB,EAAY;SAAa,CAAA,CAC3D,EAAA,CAAA;QAEP,EAAY,iBACX,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;SAAG,WAAU;mBAA8B;SAAkB,CAAA,EAC7D,kBAAC,KAAD;SAAG,WAAU;mBAAyB,EAAY;SAAkB,CAAA,CAChE,EAAA,CAAA;QAEJ;;MACN,kBAAC,GAAD,EAAa,CAAA;MACb,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACG,EAAY,cACX,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAA8B;QAAe,CAAA,EAC1D,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAM,WAAU,+BAAgC,CAAA,EAChD,kBAAC,KAAD;SAAG,WAAU;mBAAe,EAAY;SAAe,CAAA,CACnD;UACF,EAAA,CAAA,EAER,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAA8B;QAAQ,CAAA,EACnD,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAU,WAAU,+BAAgC,CAAA,EACpD,kBAAC,KAAD;SAAG,WAAU;mBAAe,IAAI,KAAK,EAAY,KAAK,CAAC,oBAAoB;SAAK,CAAA,CAC5E;UACF,EAAA,CAAA,CACF;;MACM;OACT,EAAA,CAAA;IAEP,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KAAW,WAAU;eAArB,CACE,kBAAC,GAAD,EAAS,WAAU,WAAY,CAAA,EAAA,gBAErB;QACD,CAAA,EACb,kBAAC,GAAD;KAAa,WAAU;eACrB,kBAAC,OAAD;MAAK,WAAU;gBAAf;OACG,EAAY,UACX,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAA8B;QAAU,CAAA,EACrD,kBAAC,KAAD;QAAG,WAAU;kBAAe,EAAY;QAAW,CAAA,CAC/C,EAAA,CAAA;OAER,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAA8B;QAAc,CAAA,EACzD,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAU,WAAU,+BAAgC,CAAA,EACpD,kBAAC,KAAD;SAAG,WAAU;mBAAe,EAAY;SAAe,CAAA,CACnD;UACF,EAAA,CAAA;OACL,EAAY,gBACX,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAA8B;QAAiB,CAAA,EAC5D,kBAAC,KAAD;QAAG,WAAU;kBAAyB,EAAY;QAAiB,CAAA,CAC/D,EAAA,CAAA;OAEJ;;KACM,CAAA,CACT,EAAA,CAAA;IAEP,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD,EAAA,UAAW,mBAA2B,CAAA,EAC3B,CAAA,EACb,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;KAAK,WAAU;eACZ,EAAe,KAAK,GAAO,MAC1B,kBAAC,OAAD;MAAa,WAAU;gBAAvB,CACE,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD,EACE,WAAW,wBAAwB,MAAM,EAAe,SAAS,IAAI,yBAAyB,0BAC9F,CAAA,EACD,IAAI,EAAe,SAAS,KAAK,kBAAC,OAAD,EAAK,WAAU,yBAA0B,CAAA,CACvE;UACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,KAAD;QAAG,WAAU;kBAAuB,EAAM;QAAW,CAAA,EACrD,kBAAC,KAAD;QAAG,WAAU;kBAAb;SACG,IAAI,KAAK,EAAM,KAAK,CAAC,gBAAgB;SAAC;SAAK,EAAM;SAChD;UACA;SACF;QAbI,EAaJ,CACN;KACE,CAAA,EACM,CAAA,CACT,EAAA,CAAA;IACH;KACF;MA9LC,kBAAC,OAAD;EAAK,WAAU;YAAsC;EAA4B,CAAA"}
+{"version":3,"file":"TransactionsTransactionDetailPage.js","names":[],"sources":["../../../src/assethandler/pages/TransactionsTransactionDetailPage.tsx"],"sourcesContent":["import {\n  Badge,\n  Button,\n  Card,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  Separator,\n  GradientText,\n  EmphasisPanel,\n  PagePurpose,\n  IllustratedEmptyState,\n} from '@burdenoff/fe-libs/ui';\nimport {\n  ArrowLeft,\n  Printer,\n  CheckCircle2,\n  XCircle,\n  DollarSign,\n  Calendar,\n  Building,\n  FileText,\n  User,\n  Package,\n} from 'lucide-react';\nimport { useNavigate, useParams } from 'react-router-dom';\nimport { useAssetHandlerStore } from '../store/assethandlerStore';\n\nconst statusColors: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {\n  pending: 'outline',\n  approved: 'default',\n  completed: 'secondary',\n  rejected: 'destructive',\n  cancelled: 'outline',\n};\n\nconst typeColors: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {\n  purchase: 'default',\n  lease: 'secondary',\n  disposal: 'destructive',\n  transfer: 'outline',\n  maintenance: 'secondary',\n  depreciation: 'outline',\n};\n\nconst statusTimeline = [\n  { status: 'Created', date: '2026-01-15T10:30:00Z', actor: 'Procurement System' },\n  { status: 'Pending Approval', date: '2026-01-15T10:30:00Z', actor: 'Auto-routed' },\n  { status: 'Approved', date: '2026-01-16T14:20:00Z', actor: 'Michael Chen' },\n  { status: 'Completed', date: '2026-01-17T09:00:00Z', actor: 'Finance System' },\n];\n\nexport function TransactionsTransactionDetailPage() {\n  const navigate = useNavigate();\n  const { transactionId } = useParams<{ transactionId: string }>();\n  const { transactions } = useAssetHandlerStore();\n  const transaction = transactions.find((item) => item.id === transactionId) ?? transactions[0];\n\n  if (!transaction) {\n    return (\n      <div className=\"p-6\">\n        <IllustratedEmptyState\n          illustration=\"empty-search\"\n          title=\"Transaction not found\"\n          description=\"This transaction may have been removed. Return to the transaction list to find it.\"\n          action={\n            <Button size=\"sm\" onClick={() => navigate('/transactions/transaction-list')}>\n              Back to transactions\n            </Button>\n          }\n        />\n      </div>\n    );\n  }\n\n  const formatAmount = (amount: number) => {\n    return Math.abs(amount).toLocaleString('en-US', { style: 'currency', currency: 'USD' });\n  };\n\n  return (\n    <div className=\"space-y-6 p-6 max-w-5xl\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-3\">\n          <Button variant=\"outline\" size=\"sm\" onClick={() => navigate('/transactions/transaction-list')}>\n            <ArrowLeft className=\"h-4 w-4\" />\n          </Button>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <h1 className=\"text-2xl font-semibold\">\n                <GradientText>{transaction.id}</GradientText>\n              </h1>\n              <Badge variant={statusColors[transaction.status]}>{transaction.status}</Badge>\n              <Badge variant={typeColors[transaction.type]}>{transaction.type}</Badge>\n            </div>\n            <p className=\"text-sm text-text-secondary\">{transaction.description}</p>\n          </div>\n        </div>\n        <div className=\"flex gap-2\">\n          <Button variant=\"outline\" size=\"sm\">\n            <Printer className=\"mr-2 h-4 w-4\" />\n            Print\n          </Button>\n          <Button variant=\"outline\" size=\"sm\">\n            <CheckCircle2 className=\"mr-2 h-4 w-4\" />\n            Approve\n          </Button>\n          <Button variant=\"destructive\" size=\"sm\">\n            <XCircle className=\"mr-2 h-4 w-4\" />\n            Reject\n          </Button>\n        </div>\n      </div>\n\n      <PagePurpose>\n        The complete record of a single financial transaction tied to your assets — what it was\n        for, how much, against which budget and asset, and its approval timeline. Use this page to\n        verify, approve or reject a transaction with a full audit trail.\n      </PagePurpose>\n\n      <div className=\"grid gap-6 md:grid-cols-2\">\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2\">\n              <FileText className=\"h-5 w-5\" />\n              Transaction Information\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div>\n                <p className=\"text-sm text-text-secondary\">Transaction ID</p>\n                <p className=\"font-mono font-medium\">{transaction.id}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Type</p>\n                <Badge variant={typeColors[transaction.type]}>{transaction.type}</Badge>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Category</p>\n                <p className=\"font-medium\">{transaction.category}</p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Status</p>\n                <Badge variant={statusColors[transaction.status]}>{transaction.status}</Badge>\n              </div>\n            </div>\n            <Separator />\n            <div>\n              <p className=\"text-sm text-text-secondary\">Description</p>\n              <p className=\"mt-1\">{transaction.description}</p>\n            </div>\n          </CardContent>\n        </Card>\n\n        <EmphasisPanel>\n          <CardHeader className=\"px-0 pt-0\">\n            <CardTitle className=\"flex items-center gap-2\">\n              <DollarSign className=\"h-5 w-5\" />\n              Financial Details\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"space-y-4 px-0 pb-0\">\n            <div className=\"grid grid-cols-2 gap-4\">\n              <div>\n                <p className=\"text-sm text-text-secondary\">Amount</p>\n                <p\n                  className={`text-2xl font-bold ${transaction.amount < 0 ? 'text-status-error-text' : ''}`}\n                >\n                  {formatAmount(transaction.amount)}\n                </p>\n              </div>\n              <div>\n                <p className=\"text-sm text-text-secondary\">Currency</p>\n                <p className=\"font-medium\">{transaction.currency}</p>\n              </div>\n              {transaction.poNumber && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">PO Number</p>\n                  <p className=\"font-mono font-medium\">{transaction.poNumber}</p>\n                </div>\n              )}\n              {transaction.invoiceNumber && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">Invoice Number</p>\n                  <p className=\"font-mono font-medium\">{transaction.invoiceNumber}</p>\n                </div>\n              )}\n            </div>\n            <Separator />\n            <div className=\"grid grid-cols-2 gap-4\">\n              {transaction.approvedBy && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">Approved By</p>\n                  <div className=\"flex items-center gap-1 mt-1\">\n                    <User className=\"h-4 w-4 text-text-secondary\" />\n                    <p className=\"font-medium\">{transaction.approvedBy}</p>\n                  </div>\n                </div>\n              )}\n              <div>\n                <p className=\"text-sm text-text-secondary\">Date</p>\n                <div className=\"flex items-center gap-1 mt-1\">\n                  <Calendar className=\"h-4 w-4 text-text-secondary\" />\n                  <p className=\"font-medium\">{new Date(transaction.date).toLocaleDateString()}</p>\n                </div>\n              </div>\n            </div>\n          </CardContent>\n        </EmphasisPanel>\n\n        <Card>\n          <CardHeader>\n            <CardTitle className=\"flex items-center gap-2\">\n              <Package className=\"h-5 w-5\" />\n              Related Items\n            </CardTitle>\n          </CardHeader>\n          <CardContent className=\"space-y-4\">\n            <div className=\"grid grid-cols-2 gap-4\">\n              {transaction.vendor && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">Vendor</p>\n                  <p className=\"font-medium\">{transaction.vendor}</p>\n                </div>\n              )}\n              <div>\n                <p className=\"text-sm text-text-secondary\">Department</p>\n                <div className=\"flex items-center gap-1 mt-1\">\n                  <Building className=\"h-4 w-4 text-text-secondary\" />\n                  <p className=\"font-medium\">{transaction.department}</p>\n                </div>\n              </div>\n              {transaction.relatedAsset && (\n                <div>\n                  <p className=\"text-sm text-text-secondary\">Related Asset</p>\n                  <p className=\"font-mono font-medium\">{transaction.relatedAsset}</p>\n                </div>\n              )}\n            </div>\n          </CardContent>\n        </Card>\n\n        <Card>\n          <CardHeader>\n            <CardTitle>Status Timeline</CardTitle>\n          </CardHeader>\n          <CardContent>\n            <div className=\"space-y-4\">\n              {statusTimeline.map((entry, i) => (\n                <div key={i} className=\"flex gap-4\">\n                  <div className=\"flex flex-col items-center\">\n                    <div\n                      className={`h-3 w-3 rounded-full ${i === statusTimeline.length - 1 ? 'bg-status-success-bg' : 'bg-action-primary-bg'}`}\n                    />\n                    {i < statusTimeline.length - 1 && <div className=\"w-px flex-1 bg-border\" />}\n                  </div>\n                  <div className=\"pb-4\">\n                    <p className=\"font-medium text-sm\">{entry.status}</p>\n                    <p className=\"text-xs text-text-secondary\">\n                      {new Date(entry.date).toLocaleString()} by {entry.actor}\n                    </p>\n                  </div>\n                </div>\n              ))}\n            </div>\n          </CardContent>\n        </Card>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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"}