@burdenoff/microfe-timecampus 2026.703.2 → 2026.703.4

package/dist/timecampus/pages/expense-tracking/ExpenseTrackingPage.js

@@ -1,19 +1,24 @@
 import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
-import { formatCurrency as t, formatDate as ee } from "../../utils/helpers.js";
-import { StatCard as n } from "../../components/StatCard.js";
-import { LoadingSkeleton as r } from "../../components/LoadingSkeleton.js";
-import { useApproveExpenseMutation as i, useCreateExpenseMutation as te, useDeleteExpenseMutation as ne, useGetExpenseStatsQuery as re, useListExpensesQuery as ie, useRejectExpenseMutation as ae, useSubmitExpenseForApprovalMutation as oe, useUpdateExpenseMutation as se } from "../../../generated/wspace-operations.js";
-import { PageLayout as a } from "../../components/PageLayout.js";
-import { EmptyState as ce } from "../../components/EmptyState.js";
-import { ExpenseStatus as o } from "../../../generated/wspace-types.js";
-import { Modal as s } from "../../components/Modal.js";
-import { StatusBadge as le } from "../../components/StatusBadge.js";
-import { ToastContainer as ue, useToast as de } from "../../components/Toast.js";
-import { useState as c } from "react";
-import { Check as l, DollarSign as u, Pencil as fe, Plus as pe, Receipt as d, Send as me, Trash2 as he, X as ge } from "lucide-react";
+import { formatCurrency as t, formatDate as n } from "../../utils/helpers.js";
+import { StatCard as r } from "../../components/StatCard.js";
+import { LoadingSkeleton as i } from "../../components/LoadingSkeleton.js";
+import { useApproveExpenseMutation as a, useCreateExpenseMutation as ee, useDeleteExpenseMutation as te, useGetExpenseStatsQuery as ne, useListExpensesQuery as re, useRejectExpenseMutation as ie, useSubmitExpenseForApprovalMutation as ae, useUpdateExpenseMutation as oe } from "../../../generated/wspace-operations.js";
+import { PageLayout as o } from "../../components/PageLayout.js";
+import { EmptyState as se } from "../../components/EmptyState.js";
+import { ExpenseStatus as s } from "../../../generated/wspace-types.js";
+import { Modal as c } from "../../components/Modal.js";
+import { StatusBadge as ce } from "../../components/StatusBadge.js";
+import { ToastContainer as le, useToast as ue } from "../../components/Toast.js";
+import { useState as l } from "react";
+import { Check as de, DollarSign as fe, ExternalLink as pe, MessageSquare as me, Pencil as he, Plus as ge, Receipt as u, Send as _e, Trash2 as ve, Upload as ye, X as be } from "lucide-react";
+import { gql as d } from "@apollo/client";
+import { useApolloClient as xe } from "@apollo/client/react";
 import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
+import { uploadBlobToFiles as Se } from "@burdenoff/fe-libs/storage";
+import { ContextConversationWidget as h } from "@burdenoff/fe-libs/shared";
+import { useRegisterPageConversationContext as g } from "@burdenoff/fe-libs/shared/providers/shell";
 //#region src/timecampus/pages/expense-tracking/ExpenseTrackingPage.tsx
-var h = 25, g = [
+var _ = 25, v = [
 	"Travel",
 	"Meals",
 	"Software",
@@ -21,171 +26,230 @@ var h = 25, g = [
 	"Office",
 	"Training",
 	"Other"
-], _ = "mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary";
-function v() {
+], y = "mt-1 w-full rounded-md border border-border-subtle bg-bg-surface px-3 py-2 text-sm text-text-primary placeholder:text-text-secondary", Ce = d`
+  query TimeCampusExpense_GetFileDownloadUrl($id: ID!, $expiresIn: Int) {
+    getFileDownloadUrl(id: $id, expiresIn: $expiresIn)
+  }
+`, we = d`
+  mutation TimeCampusExpense_EnsureFolder($path: String!) {
+    ensureFolderByPath(path: $path) {
+      id
+    }
+  }
+`, Te = 604800;
+function Ee({ expense: e }) {
+	return g({
+		entityType: "TIMECAMPUS_EXPENSE",
+		entityId: e.id,
+		contextTitle: `Expense · ${e.description ?? e.id}`
+	}), /* @__PURE__ */ p(h, { widgetKey: "expense-review" });
+}
+function b() {
 	return (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
 }
-var y = {
+var x = {
 	amount: "",
-	category: g[0],
+	category: v[0],
 	description: "",
 	projectId: "",
-	date: v()
+	date: b(),
+	receiptUrl: ""
 };
-function b() {
-	let { workspaceId: b = "" } = e(), { toasts: _e, addToast: x, dismissToast: ve } = de(), { data: ye, loading: S, error: be, refetch: xe, fetchMore: Se } = ie({
+function S() {
+	let { workspaceId: d = "" } = e(), { toasts: h, addToast: g, dismissToast: S } = ue(), C = xe(), { data: De, loading: w, error: Oe, refetch: T, fetchMore: ke } = re({
 		variables: {
-			workspaceId: b,
-			limit: h,
+			workspaceId: d,
+			limit: _,
 			offset: 0
 		},
 		notifyOnNetworkStatusChange: !0
-	}), { data: C, loading: w, error: T, refetch: E } = re({ variables: { workspaceId: b } }), [D, { loading: O }] = te(), [k, { loading: A }] = se(), [j, { loading: M }] = ne(), [Ce] = oe(), [we] = i(), [Te, { loading: N }] = ae(), P = ye?.expenses ?? [], F = C?.expenseStats, [I, L] = c(!1), [Ee, De] = c(!0), [Oe, R] = c(!1), [z, B] = c(null), [V, H] = c(y), [U, W] = c(null), [G, K] = c(null), [q, J] = c(""), [ke, Y] = c(null), X = async () => {
-		await Promise.all([xe(), E()]);
-	}, Ae = () => {
-		B(null), H({
-			...y,
-			date: v()
-		}), R(!0);
-	}, je = (e) => {
-		B(e), H({
+	}), { data: Ae, loading: je, error: Me, refetch: Ne } = ne({ variables: { workspaceId: d } }), [Pe, { loading: E }] = ee(), [Fe, { loading: D }] = oe(), [Ie, { loading: O }] = te(), [Le] = ae(), [Re] = a(), [ze, { loading: k }] = ie(), A = De?.expenses ?? [], j = Ae?.expenseStats, [M, N] = l(!1), [Be, Ve] = l(!0), [He, P] = l(!1), [F, I] = l(null), [L, R] = l(x), [z, B] = l(!1), [V, H] = l(null), [U, W] = l(null), [G, K] = l(null), [q, J] = l(""), [Ue, Y] = l(null), X = async () => {
+		await Promise.all([T(), Ne()]);
+	}, We = () => {
+		I(null), R({
+			...x,
+			date: b()
+		}), P(!0);
+	}, Ge = (e) => {
+		I(e), R({
 			amount: String(e.amount),
 			category: e.category,
 			description: e.description ?? "",
 			projectId: e.projectId ?? "",
-			date: e.date ? e.date.slice(0, 10) : v()
-		}), R(!0);
+			date: e.date ? e.date.slice(0, 10) : b(),
+			receiptUrl: e.receiptUrl ?? ""
+		}), P(!0);
+	}, Ke = async (e) => {
+		B(!0);
+		try {
+			let { data: t } = await C.mutate({
+				mutation: we,
+				variables: { path: "/TimeCampus/Receipts" }
+			}), n = t?.ensureFolderByPath?.id;
+			if (!n) throw Error("Could not resolve upload folder");
+			let r = await Se({
+				client: C,
+				blob: e,
+				filename: e.name,
+				mimeType: e.type || "application/octet-stream",
+				folderId: n
+			}), { data: i } = await C.query({
+				query: Ce,
+				variables: {
+					id: r.id,
+					expiresIn: Te
+				},
+				fetchPolicy: "no-cache"
+			}), a = i?.getFileDownloadUrl;
+			if (!a) throw Error("No download URL returned");
+			R((e) => ({
+				...e,
+				receiptUrl: a
+			})), g({
+				title: "Receipt attached",
+				variant: "success"
+			});
+		} catch {
+			g({
+				title: "Failed to upload receipt",
+				variant: "error"
+			});
+		} finally {
+			B(!1);
+		}
 	}, Z = () => {
-		R(!1), B(null);
+		P(!1), I(null);
 	}, Q = async () => {
-		let e = Number(V.amount);
-		if (!V.amount || Number.isNaN(e) || !V.category.trim()) return;
-		let t = new Date(V.date).toISOString();
+		let e = Number(L.amount);
+		if (!L.amount || Number.isNaN(e) || !L.category.trim()) return;
+		let t = new Date(L.date).toISOString();
 		try {
-			z ? (await k({ variables: {
-				id: z.id,
-				workspaceId: b,
+			F ? (await Fe({ variables: {
+				id: F.id,
+				workspaceId: d,
 				input: {
 					amount: e,
-					category: V.category.trim(),
-					description: V.description.trim() || void 0,
-					projectId: V.projectId.trim() || void 0,
-					date: t
+					category: L.category.trim(),
+					description: L.description.trim() || void 0,
+					projectId: L.projectId.trim() || void 0,
+					date: t,
+					receiptUrl: L.receiptUrl || void 0
 				}
-			} }), x({
+			} }), g({
 				title: "Expense updated",
 				variant: "success"
-			})) : (await D({ variables: { input: {
-				workspaceId: b,
+			})) : (await Pe({ variables: { input: {
+				workspaceId: d,
 				amount: e,
-				category: V.category.trim(),
-				description: V.description.trim() || void 0,
-				projectId: V.projectId.trim() || void 0,
-				date: t
-			} } }), x({
+				category: L.category.trim(),
+				description: L.description.trim() || void 0,
+				projectId: L.projectId.trim() || void 0,
+				date: t,
+				receiptUrl: L.receiptUrl || void 0
+			} } }), g({
 				title: "Expense added",
 				variant: "success"
 			})), Z(), await X();
 		} catch {
-			x({
-				title: z ? "Failed to update expense" : "Failed to add expense",
+			g({
+				title: F ? "Failed to update expense" : "Failed to add expense",
 				variant: "error"
 			});
 		}
-	}, Me = async () => {
+	}, qe = async () => {
 		if (U) try {
-			await j({ variables: {
+			await Ie({ variables: {
 				id: U.id,
-				workspaceId: b
-			} }), x({
+				workspaceId: d
+			} }), g({
 				title: "Expense deleted",
 				variant: "success"
 			}), W(null), await X();
 		} catch {
-			x({
+			g({
 				title: "Failed to delete expense",
 				variant: "error"
 			});
 		}
-	}, Ne = async (e) => {
+	}, Je = async (e) => {
 		Y(e.id);
 		try {
-			await Ce({ variables: {
+			await Le({ variables: {
 				id: e.id,
-				workspaceId: b
-			} }), x({
+				workspaceId: d
+			} }), g({
 				title: "Submitted for approval",
 				variant: "success"
 			}), await X();
 		} catch {
-			x({
+			g({
 				title: "Failed to submit expense",
 				variant: "error"
 			});
 		} finally {
 			Y(null);
 		}
-	}, Pe = async (e) => {
+	}, Ye = async (e) => {
 		Y(e.id);
 		try {
-			await we({ variables: {
+			await Re({ variables: {
 				id: e.id,
-				workspaceId: b
-			} }), x({
+				workspaceId: d
+			} }), g({
 				title: "Expense approved",
 				variant: "success"
 			}), await X();
 		} catch {
-			x({
+			g({
 				title: "Failed to approve expense",
 				variant: "error"
 			});
 		} finally {
 			Y(null);
 		}
-	}, Fe = async () => {
+	}, Xe = async () => {
 		if (G) try {
-			await Te({ variables: {
+			await ze({ variables: {
 				id: G.id,
-				workspaceId: b,
+				workspaceId: d,
 				reason: q.trim() || void 0
-			} }), x({
+			} }), g({
 				title: "Expense rejected",
 				variant: "success"
 			}), K(null), J(""), await X();
 		} catch {
-			x({
+			g({
 				title: "Failed to reject expense",
 				variant: "error"
 			});
 		}
-	}, Ie = async () => {
-		L(!0);
+	}, Ze = async () => {
+		N(!0);
 		try {
-			((await Se({
+			((await ke({
 				variables: {
-					workspaceId: b,
-					limit: h,
-					offset: P.length
+					workspaceId: d,
+					limit: _,
+					offset: A.length
 				},
 				updateQuery: (e, { fetchMoreResult: t }) => t ? {
 					...e,
 					expenses: [...e.expenses, ...t.expenses]
 				} : e
-			})).data?.expenses?.length ?? 0) < h && De(!1);
+			})).data?.expenses?.length ?? 0) < _ && Ve(!1);
 		} finally {
-			L(!1);
+			N(!1);
 		}
 	};
-	if (S && w && P.length === 0) return /* @__PURE__ */ p(a, {
+	if (w && je && A.length === 0) return /* @__PURE__ */ p(o, {
 		title: "Expense Tracking",
 		description: "Track and manage work expenses",
-		children: /* @__PURE__ */ p(r, {
+		children: /* @__PURE__ */ p(i, {
 			variant: "list",
 			count: 4
 		})
 	});
-	if (be && T) return /* @__PURE__ */ p(a, {
+	if (Oe && Me) return /* @__PURE__ */ p(o, {
 		title: "Expense Tracking",
 		description: "Track and manage work expenses",
 		children: /* @__PURE__ */ p("div", {
@@ -194,11 +258,11 @@ function b() {
 		})
 	});
 	let $ = /* @__PURE__ */ m("button", {
-		onClick: Ae,
+		onClick: We,
 		className: "inline-flex items-center gap-1.5 rounded-md bg-action-primary-bg px-3 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90",
-		children: [/* @__PURE__ */ p(pe, { className: "h-4 w-4" }), "Add Expense"]
+		children: [/* @__PURE__ */ p(ge, { className: "h-4 w-4" }), "Add Expense"]
 	});
-	return /* @__PURE__ */ m(a, {
+	return /* @__PURE__ */ m(o, {
 		title: "Expense Tracking",
 		description: "Track and manage work expenses",
 		purpose: "Capture project-related costs alongside the hours you log — receipts, categories and approvals in one place — so the bill you send a client reflects the full cost of the work, not just time.",
@@ -207,31 +271,31 @@ function b() {
 			/* @__PURE__ */ m("div", {
 				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ p(n, {
+					/* @__PURE__ */ p(r, {
 						featured: !0,
 						title: "Total This Month",
-						value: t(F?.totalAmount ?? 0),
-						icon: /* @__PURE__ */ p(u, { className: "h-5 w-5" })
+						value: t(j?.totalAmount ?? 0),
+						icon: /* @__PURE__ */ p(fe, { className: "h-5 w-5" })
 					}),
-					/* @__PURE__ */ p(n, {
+					/* @__PURE__ */ p(r, {
 						title: "Pending",
-						value: String(F?.pendingCount ?? 0),
+						value: String(j?.pendingCount ?? 0),
 						description: "expenses awaiting approval"
 					}),
-					/* @__PURE__ */ p(n, {
+					/* @__PURE__ */ p(r, {
 						title: "Approved",
-						value: String(F?.approvedCount ?? 0),
+						value: String(j?.approvedCount ?? 0),
 						description: "expenses approved"
 					}),
-					/* @__PURE__ */ p(n, {
+					/* @__PURE__ */ p(r, {
 						title: "Average",
-						value: t(F?.averageAmount ?? 0),
-						icon: /* @__PURE__ */ p(d, { className: "h-5 w-5" }),
+						value: t(j?.averageAmount ?? 0),
+						icon: /* @__PURE__ */ p(u, { className: "h-5 w-5" }),
 						description: "per expense"
 					})
 				]
 			}),
-			P.length === 0 && !S ? /* @__PURE__ */ p(ce, {
+			A.length === 0 && !w ? /* @__PURE__ */ p(se, {
 				illustration: "empty-data",
 				title: "No expenses recorded yet",
 				description: "Add your first expense to track project costs and route them for approval.",
@@ -240,13 +304,13 @@ function b() {
 				className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop",
 				children: /* @__PURE__ */ p("div", {
 					className: "divide-y divide-border",
-					children: P.map((e) => {
-						let n = ke === e.id, r = e.status === o.Pending, i = e.status === o.Rejected;
+					children: A.map((e) => {
+						let r = Ue === e.id, i = e.status === s.Pending, a = e.status === s.Rejected;
 						return /* @__PURE__ */ m("div", {
 							className: "flex flex-col gap-3 p-4 hover:bg-bg-sunken/50 transition-colors sm:flex-row sm:items-center sm:justify-between",
 							children: [/* @__PURE__ */ m("div", {
 								className: "flex items-center gap-3",
-								children: [/* @__PURE__ */ p(d, { className: "h-5 w-5 shrink-0 text-text-secondary" }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
+								children: [/* @__PURE__ */ p(u, { className: "h-5 w-5 shrink-0 text-text-secondary" }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
 									className: "text-sm font-medium text-text-primary",
 									children: e.description ?? "Untitled expense"
 								}), /* @__PURE__ */ m("p", {
@@ -258,7 +322,7 @@ function b() {
 										e.projectId ?? "No project",
 										" ·",
 										" ",
-										ee(e.date)
+										n(e.date)
 									]
 								})] })]
 							}), /* @__PURE__ */ m("div", {
@@ -268,51 +332,58 @@ function b() {
 										className: "text-sm font-medium text-text-primary",
 										children: t(e.amount, e.currency)
 									}),
-									/* @__PURE__ */ p(le, {
+									/* @__PURE__ */ p(ce, {
 										label: e.status.toLowerCase(),
 										status: e.status.toLowerCase()
 									}),
 									/* @__PURE__ */ m("div", {
 										className: "flex items-center gap-1",
 										children: [
-											r && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("button", {
+											i && /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("button", {
 												type: "button",
-												disabled: n,
-												onClick: () => Pe(e),
+												disabled: r,
+												onClick: () => Ye(e),
 												title: "Approve expense",
 												className: "rounded-md p-1.5 text-status-success-text hover:bg-status-success-bg disabled:opacity-50",
-												children: /* @__PURE__ */ p(l, { className: "h-4 w-4" })
+												children: /* @__PURE__ */ p(de, { className: "h-4 w-4" })
 											}), /* @__PURE__ */ p("button", {
 												type: "button",
-												disabled: n,
+												disabled: r,
 												onClick: () => {
 													K(e), J("");
 												},
 												title: "Reject expense",
 												className: "rounded-md p-1.5 text-status-error-text hover:bg-status-error-bg disabled:opacity-50",
-												children: /* @__PURE__ */ p(ge, { className: "h-4 w-4" })
+												children: /* @__PURE__ */ p(be, { className: "h-4 w-4" })
 											})] }),
-											i && /* @__PURE__ */ p("button", {
+											a && /* @__PURE__ */ p("button", {
 												type: "button",
-												disabled: n,
-												onClick: () => Ne(e),
+												disabled: r,
+												onClick: () => Je(e),
 												title: "Resubmit for approval",
 												className: "rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken disabled:opacity-50",
+												children: /* @__PURE__ */ p(_e, { className: "h-4 w-4" })
+											}),
+											/* @__PURE__ */ p("button", {
+												type: "button",
+												onClick: () => H(e),
+												title: "Review expense",
+												className: "rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken",
 												children: /* @__PURE__ */ p(me, { className: "h-4 w-4" })
 											}),
 											/* @__PURE__ */ p("button", {
 												type: "button",
-												onClick: () => je(e),
+												onClick: () => Ge(e),
 												title: "Edit expense",
 												className: "rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken",
-												children: /* @__PURE__ */ p(fe, { className: "h-4 w-4" })
+												children: /* @__PURE__ */ p(he, { className: "h-4 w-4" })
 											}),
 											/* @__PURE__ */ p("button", {
 												type: "button",
 												onClick: () => W(e),
 												title: "Delete expense",
 												className: "rounded-md p-1.5 text-status-error-text hover:bg-status-error-bg",
-												children: /* @__PURE__ */ p(he, { className: "h-4 w-4" })
+												children: /* @__PURE__ */ p(ve, { className: "h-4 w-4" })
 											})
 										]
 									})
@@ -321,29 +392,29 @@ function b() {
 						}, e.id);
 					})
 				})
-			}), Ee && P.length >= h && /* @__PURE__ */ p("div", {
+			}), Be && A.length >= _ && /* @__PURE__ */ p("div", {
 				className: "mt-4 flex justify-center",
 				children: /* @__PURE__ */ p("button", {
-					onClick: Ie,
-					disabled: I,
+					onClick: Ze,
+					disabled: M,
 					className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50 disabled:opacity-50",
-					children: I ? "Loading..." : "Load more"
+					children: M ? "Loading..." : "Load more"
 				})
 			})] }),
-			/* @__PURE__ */ p(s, {
-				open: Oe,
+			/* @__PURE__ */ p(c, {
+				open: He,
 				onClose: Z,
-				title: z ? "Edit Expense" : "Add Expense",
-				description: z ? "Update this expense's details." : "Record a project-related cost to track alongside your logged hours.",
+				title: F ? "Edit Expense" : "Add Expense",
+				description: F ? "Update this expense's details." : "Record a project-related cost to track alongside your logged hours.",
 				footer: /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("button", {
 					onClick: Z,
 					className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50",
 					children: "Cancel"
 				}), /* @__PURE__ */ p("button", {
 					onClick: Q,
-					disabled: O || A || !V.amount || Number.isNaN(Number(V.amount)) || !V.category.trim(),
+					disabled: E || D || !L.amount || Number.isNaN(Number(L.amount)) || !L.category.trim(),
 					className: "rounded-md bg-action-primary-bg px-4 py-2 text-sm font-medium text-action-primary-text hover:bg-action-primary-bg/90 disabled:opacity-50",
-					children: O || A ? "Saving..." : z ? "Save Changes" : "Add Expense"
+					children: E || D ? "Saving..." : F ? "Save Changes" : "Add Expense"
 				})] }),
 				children: /* @__PURE__ */ m("div", {
 					className: "space-y-4",
@@ -358,23 +429,23 @@ function b() {
 								min: 0,
 								step: "0.01",
 								placeholder: "0.00",
-								value: V.amount,
-								onChange: (e) => H({
-									...V,
+								value: L.amount,
+								onChange: (e) => R({
+									...L,
 									amount: e.target.value
 								}),
-								className: _
+								className: y
 							})] }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
 								className: "block text-sm font-medium text-text-primary",
 								children: "Category"
 							}), /* @__PURE__ */ p("select", {
-								value: V.category,
-								onChange: (e) => H({
-									...V,
+								value: L.category,
+								onChange: (e) => R({
+									...L,
 									category: e.target.value
 								}),
-								className: _,
-								children: g.map((e) => /* @__PURE__ */ p("option", {
+								className: y,
+								children: v.map((e) => /* @__PURE__ */ p("option", {
 									value: e,
 									children: e
 								}, e))
@@ -386,12 +457,12 @@ function b() {
 						}), /* @__PURE__ */ p("input", {
 							type: "text",
 							placeholder: "What was this expense for?",
-							value: V.description,
-							onChange: (e) => H({
-								...V,
+							value: L.description,
+							onChange: (e) => R({
+								...L,
 								description: e.target.value
 							}),
-							className: _
+							className: y
 						})] }),
 						/* @__PURE__ */ m("div", {
 							className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
@@ -401,29 +472,65 @@ function b() {
 							}), /* @__PURE__ */ p("input", {
 								type: "text",
 								placeholder: "Optional project ID",
-								value: V.projectId,
-								onChange: (e) => H({
-									...V,
+								value: L.projectId,
+								onChange: (e) => R({
+									...L,
 									projectId: e.target.value
 								}),
-								className: _
+								className: y
 							})] }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
 								className: "block text-sm font-medium text-text-primary",
 								children: "Date"
 							}), /* @__PURE__ */ p("input", {
 								type: "date",
-								value: V.date,
-								onChange: (e) => H({
-									...V,
+								value: L.date,
+								onChange: (e) => R({
+									...L,
 									date: e.target.value
 								}),
-								className: _
+								className: y
 							})] })]
-						})
+						}),
+						/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+							className: "block text-sm font-medium text-text-primary",
+							children: "Receipt"
+						}), /* @__PURE__ */ m("div", {
+							className: "mt-1 flex flex-col gap-2",
+							children: [
+								/* @__PURE__ */ m("label", {
+									className: `inline-flex w-fit cursor-pointer items-center gap-1.5 rounded-md border border-border-subtle px-3 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50 ${z ? "opacity-50" : ""}`,
+									children: [
+										/* @__PURE__ */ p(ye, { className: "h-4 w-4" }),
+										z ? "Uploading..." : "Upload receipt",
+										/* @__PURE__ */ p("input", {
+											type: "file",
+											accept: "image/*,application/pdf",
+											disabled: z,
+											className: "hidden",
+											onChange: (e) => {
+												let t = e.target.files?.[0];
+												e.target.value = "", t && Ke(t);
+											}
+										})
+									]
+								}),
+								L.receiptUrl && /* @__PURE__ */ m("a", {
+									href: L.receiptUrl,
+									target: "_blank",
+									rel: "noopener noreferrer",
+									className: "inline-flex w-fit items-center gap-1.5 text-sm font-medium text-action-primary-text/90 underline decoration-border-subtle underline-offset-2 hover:text-action-primary-text",
+									children: [/* @__PURE__ */ p(pe, { className: "h-3.5 w-3.5" }), "View current receipt"]
+								}),
+								/* @__PURE__ */ p("p", {
+									className: "text-xs text-text-secondary",
+									children: "Attach an image or PDF. Uploading is optional and never blocks saving the expense."
+								})
+							]
+						})] })
 					]
 				})
 			}),
-			/* @__PURE__ */ p(s, {
+			/* @__PURE__ */ p(c, {
 				open: U !== null,
 				onClose: () => W(null),
 				title: "Delete expense?",
@@ -434,17 +541,17 @@ function b() {
 					className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50",
 					children: "Cancel"
 				}), /* @__PURE__ */ p("button", {
-					onClick: Me,
-					disabled: M,
+					onClick: qe,
+					disabled: O,
 					className: "rounded-md bg-status-error-bg px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg/80 disabled:opacity-50",
-					children: M ? "Deleting..." : "Delete"
+					children: O ? "Deleting..." : "Delete"
 				})] }),
 				children: /* @__PURE__ */ p("p", {
 					className: "text-sm text-text-secondary",
 					children: "This permanently removes the expense. This action cannot be undone."
 				})
 			}),
-			/* @__PURE__ */ m(s, {
+			/* @__PURE__ */ m(c, {
 				open: G !== null,
 				onClose: () => K(null),
 				title: "Reject expense",
@@ -455,10 +562,10 @@ function b() {
 					className: "rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-bg-sunken/50",
 					children: "Cancel"
 				}), /* @__PURE__ */ p("button", {
-					onClick: Fe,
-					disabled: N,
+					onClick: Xe,
+					disabled: k,
 					className: "rounded-md bg-status-error-bg px-4 py-2 text-sm font-medium text-status-error-text hover:bg-status-error-bg/80 disabled:opacity-50",
-					children: N ? "Rejecting..." : "Reject Expense"
+					children: k ? "Rejecting..." : "Reject Expense"
 				})] }),
 				children: [/* @__PURE__ */ p("label", {
 					className: "block text-sm font-medium text-text-primary",
@@ -468,17 +575,24 @@ function b() {
 					placeholder: "Reason for rejection (optional)",
 					value: q,
 					onChange: (e) => J(e.target.value),
-					className: _
+					className: y
 				})]
 			}),
-			/* @__PURE__ */ p(ue, {
-				toasts: _e,
-				onDismiss: ve
+			/* @__PURE__ */ p(c, {
+				open: V !== null,
+				onClose: () => H(null),
+				title: "Expense review",
+				description: V ? `Discuss ${V.description ?? "this expense"} with your team.` : void 0,
+				children: V && /* @__PURE__ */ p(Ee, { expense: V })
+			}),
+			/* @__PURE__ */ p(le, {
+				toasts: h,
+				onDismiss: S
 			})
 		]
 	});
 }
 //#endregion
-export { b as ExpenseTrackingPage };
+export { S as ExpenseTrackingPage };
 
 //# sourceMappingURL=ExpenseTrackingPage.js.map