@burdenoff/microfe-timecampus 2026.626.2 → 2026.703.2

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

@@ -1,110 +1,484 @@
 import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
-import { formatCurrency as t, formatDate as n, getStatusColor as r } from "../../utils/helpers.js";
-import { StatCard as i } from "../../components/StatCard.js";
-import { LoadingSkeleton as a } from "../../components/LoadingSkeleton.js";
-import { useGetExpenseStatsQuery as o, useListExpensesQuery as s } from "../../../generated/wspace-operations.js";
-import { PageLayout as c } from "../../components/PageLayout.js";
-import { EmptyState as l } from "../../components/EmptyState.js";
-import { DollarSign as u, Plus as d, Receipt as f } from "lucide-react";
-import { jsx as p, jsxs as m } from "react/jsx-runtime";
+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 { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/timecampus/pages/expense-tracking/ExpenseTrackingPage.tsx
-function h() {
-	let { workspaceId: h = "" } = e(), { data: g, loading: _, error: v } = s({ variables: { workspaceId: h } }), { data: y, loading: b, error: x } = o({ variables: { workspaceId: h } }), S = g?.expenses ?? [], C = y?.expenseStats;
-	return _ && b ? /* @__PURE__ */ p(c, {
+var h = 25, g = [
+	"Travel",
+	"Meals",
+	"Software",
+	"Hardware",
+	"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() {
+	return (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+}
+var y = {
+	amount: "",
+	category: g[0],
+	description: "",
+	projectId: "",
+	date: v()
+};
+function b() {
+	let { workspaceId: b = "" } = e(), { toasts: _e, addToast: x, dismissToast: ve } = de(), { data: ye, loading: S, error: be, refetch: xe, fetchMore: Se } = ie({
+		variables: {
+			workspaceId: b,
+			limit: h,
+			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({
+			amount: String(e.amount),
+			category: e.category,
+			description: e.description ?? "",
+			projectId: e.projectId ?? "",
+			date: e.date ? e.date.slice(0, 10) : v()
+		}), R(!0);
+	}, Z = () => {
+		R(!1), B(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();
+		try {
+			z ? (await k({ variables: {
+				id: z.id,
+				workspaceId: b,
+				input: {
+					amount: e,
+					category: V.category.trim(),
+					description: V.description.trim() || void 0,
+					projectId: V.projectId.trim() || void 0,
+					date: t
+				}
+			} }), x({
+				title: "Expense updated",
+				variant: "success"
+			})) : (await D({ variables: { input: {
+				workspaceId: b,
+				amount: e,
+				category: V.category.trim(),
+				description: V.description.trim() || void 0,
+				projectId: V.projectId.trim() || void 0,
+				date: t
+			} } }), x({
+				title: "Expense added",
+				variant: "success"
+			})), Z(), await X();
+		} catch {
+			x({
+				title: z ? "Failed to update expense" : "Failed to add expense",
+				variant: "error"
+			});
+		}
+	}, Me = async () => {
+		if (U) try {
+			await j({ variables: {
+				id: U.id,
+				workspaceId: b
+			} }), x({
+				title: "Expense deleted",
+				variant: "success"
+			}), W(null), await X();
+		} catch {
+			x({
+				title: "Failed to delete expense",
+				variant: "error"
+			});
+		}
+	}, Ne = async (e) => {
+		Y(e.id);
+		try {
+			await Ce({ variables: {
+				id: e.id,
+				workspaceId: b
+			} }), x({
+				title: "Submitted for approval",
+				variant: "success"
+			}), await X();
+		} catch {
+			x({
+				title: "Failed to submit expense",
+				variant: "error"
+			});
+		} finally {
+			Y(null);
+		}
+	}, Pe = async (e) => {
+		Y(e.id);
+		try {
+			await we({ variables: {
+				id: e.id,
+				workspaceId: b
+			} }), x({
+				title: "Expense approved",
+				variant: "success"
+			}), await X();
+		} catch {
+			x({
+				title: "Failed to approve expense",
+				variant: "error"
+			});
+		} finally {
+			Y(null);
+		}
+	}, Fe = async () => {
+		if (G) try {
+			await Te({ variables: {
+				id: G.id,
+				workspaceId: b,
+				reason: q.trim() || void 0
+			} }), x({
+				title: "Expense rejected",
+				variant: "success"
+			}), K(null), J(""), await X();
+		} catch {
+			x({
+				title: "Failed to reject expense",
+				variant: "error"
+			});
+		}
+	}, Ie = async () => {
+		L(!0);
+		try {
+			((await Se({
+				variables: {
+					workspaceId: b,
+					limit: h,
+					offset: P.length
+				},
+				updateQuery: (e, { fetchMoreResult: t }) => t ? {
+					...e,
+					expenses: [...e.expenses, ...t.expenses]
+				} : e
+			})).data?.expenses?.length ?? 0) < h && De(!1);
+		} finally {
+			L(!1);
+		}
+	};
+	if (S && w && P.length === 0) return /* @__PURE__ */ p(a, {
 		title: "Expense Tracking",
 		description: "Track and manage work expenses",
-		children: /* @__PURE__ */ p(a, {
+		children: /* @__PURE__ */ p(r, {
 			variant: "list",
 			count: 4
 		})
-	}) : v && x ? /* @__PURE__ */ p(c, {
+	});
+	if (be && T) return /* @__PURE__ */ p(a, {
 		title: "Expense Tracking",
 		description: "Track and manage work expenses",
 		children: /* @__PURE__ */ p("div", {
 			className: "rounded-lg border border-status-error-bg/40 bg-status-error-bg p-4 text-sm text-status-error-text",
 			children: "Failed to load expense data. Please try again later."
 		})
-	}) : /* @__PURE__ */ m(c, {
+	});
+	let $ = /* @__PURE__ */ m("button", {
+		onClick: Ae,
+		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"]
+	});
+	return /* @__PURE__ */ m(a, {
 		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.",
-		actions: /* @__PURE__ */ m("button", {
-			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(d, { className: "h-4 w-4" }), "Add Expense"]
-		}),
-		children: [/* @__PURE__ */ m("div", {
-			className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
-			children: [
-				/* @__PURE__ */ p(i, {
-					featured: !0,
-					title: "Total This Month",
-					value: t(C?.totalAmount ?? 0),
-					icon: /* @__PURE__ */ p(u, { className: "h-5 w-5" })
-				}),
-				/* @__PURE__ */ p(i, {
-					title: "Pending",
-					value: String(C?.pendingCount ?? 0),
-					description: "expenses awaiting approval"
-				}),
-				/* @__PURE__ */ p(i, {
-					title: "Approved",
-					value: String(C?.approvedCount ?? 0),
-					description: "expenses approved"
-				}),
-				/* @__PURE__ */ p(i, {
-					title: "Average",
-					value: t(C?.averageAmount ?? 0),
-					icon: /* @__PURE__ */ p(f, { className: "h-5 w-5" }),
-					description: "per expense"
+		actions: $,
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ p(n, {
+						featured: !0,
+						title: "Total This Month",
+						value: t(F?.totalAmount ?? 0),
+						icon: /* @__PURE__ */ p(u, { className: "h-5 w-5" })
+					}),
+					/* @__PURE__ */ p(n, {
+						title: "Pending",
+						value: String(F?.pendingCount ?? 0),
+						description: "expenses awaiting approval"
+					}),
+					/* @__PURE__ */ p(n, {
+						title: "Approved",
+						value: String(F?.approvedCount ?? 0),
+						description: "expenses approved"
+					}),
+					/* @__PURE__ */ p(n, {
+						title: "Average",
+						value: t(F?.averageAmount ?? 0),
+						icon: /* @__PURE__ */ p(d, { className: "h-5 w-5" }),
+						description: "per expense"
+					})
+				]
+			}),
+			P.length === 0 && !S ? /* @__PURE__ */ p(ce, {
+				illustration: "empty-data",
+				title: "No expenses recorded yet",
+				description: "Add your first expense to track project costs and route them for approval.",
+				action: $
+			}) : /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("div", {
+				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;
+						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", {
+									className: "text-sm font-medium text-text-primary",
+									children: e.description ?? "Untitled expense"
+								}), /* @__PURE__ */ m("p", {
+									className: "text-xs text-text-secondary",
+									children: [
+										e.category,
+										" ·",
+										" ",
+										e.projectId ?? "No project",
+										" ·",
+										" ",
+										ee(e.date)
+									]
+								})] })]
+							}), /* @__PURE__ */ m("div", {
+								className: "flex items-center gap-3",
+								children: [
+									/* @__PURE__ */ p("p", {
+										className: "text-sm font-medium text-text-primary",
+										children: t(e.amount, e.currency)
+									}),
+									/* @__PURE__ */ p(le, {
+										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", {
+												type: "button",
+												disabled: n,
+												onClick: () => Pe(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" })
+											}), /* @__PURE__ */ p("button", {
+												type: "button",
+												disabled: n,
+												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" })
+											})] }),
+											i && /* @__PURE__ */ p("button", {
+												type: "button",
+												disabled: n,
+												onClick: () => Ne(e),
+												title: "Resubmit for approval",
+												className: "rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken disabled:opacity-50",
+												children: /* @__PURE__ */ p(me, { className: "h-4 w-4" })
+											}),
+											/* @__PURE__ */ p("button", {
+												type: "button",
+												onClick: () => je(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" })
+											}),
+											/* @__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" })
+											})
+										]
+									})
+								]
+							})]
+						}, e.id);
+					})
 				})
-			]
-		}), S.length === 0 && !_ ? /* @__PURE__ */ p(l, {
-			illustration: "empty-data",
-			title: "No expenses recorded yet",
-			description: "Add your first expense to track project costs and route them for approval.",
-			action: /* @__PURE__ */ m("button", {
-				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(d, { className: "h-4 w-4" }), "Add Expense"]
-			})
-		}) : /* @__PURE__ */ p("div", {
-			className: "rounded-xl border border-border-seam bg-gloss-card shadow-pop",
-			children: /* @__PURE__ */ p("div", {
-				className: "divide-y divide-border",
-				children: S.map((e) => /* @__PURE__ */ m("div", {
-					className: "flex items-center justify-between p-4 hover:bg-bg-sunken/50 transition-colors",
-					children: [/* @__PURE__ */ m("div", {
-						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ p(f, { className: "h-5 w-5 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", {
-							className: "text-xs text-text-secondary",
-							children: [
-								e.category,
-								" ·",
-								" ",
-								e.projectId ?? "No project",
-								" ·",
-								" ",
-								n(e.date)
-							]
-						})] })]
-					}), /* @__PURE__ */ m("div", {
-						className: "flex items-center gap-3",
-						children: [/* @__PURE__ */ p("p", {
-							className: "text-sm font-medium text-text-primary",
-							children: t(e.amount)
-						}), /* @__PURE__ */ p("span", {
-							className: `inline-flex rounded-full px-2 py-0.5 text-xs font-medium ${r(e.status)}`,
-							children: e.status
-						})]
-					})]
-				}, e.id))
+			}), Ee && P.length >= h && /* @__PURE__ */ p("div", {
+				className: "mt-4 flex justify-center",
+				children: /* @__PURE__ */ p("button", {
+					onClick: Ie,
+					disabled: I,
+					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"
+				})
+			})] }),
+			/* @__PURE__ */ p(s, {
+				open: Oe,
+				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.",
+				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(),
+					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: /* @__PURE__ */ m("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ m("div", {
+							className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+							children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+								className: "block text-sm font-medium text-text-primary",
+								children: "Amount"
+							}), /* @__PURE__ */ p("input", {
+								type: "number",
+								min: 0,
+								step: "0.01",
+								placeholder: "0.00",
+								value: V.amount,
+								onChange: (e) => H({
+									...V,
+									amount: e.target.value
+								}),
+								className: _
+							})] }), /* @__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,
+									category: e.target.value
+								}),
+								className: _,
+								children: g.map((e) => /* @__PURE__ */ p("option", {
+									value: e,
+									children: e
+								}, e))
+							})] })]
+						}),
+						/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+							className: "block text-sm font-medium text-text-primary",
+							children: "Description"
+						}), /* @__PURE__ */ p("input", {
+							type: "text",
+							placeholder: "What was this expense for?",
+							value: V.description,
+							onChange: (e) => H({
+								...V,
+								description: e.target.value
+							}),
+							className: _
+						})] }),
+						/* @__PURE__ */ m("div", {
+							className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+							children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("label", {
+								className: "block text-sm font-medium text-text-primary",
+								children: "Project ID"
+							}), /* @__PURE__ */ p("input", {
+								type: "text",
+								placeholder: "Optional project ID",
+								value: V.projectId,
+								onChange: (e) => H({
+									...V,
+									projectId: e.target.value
+								}),
+								className: _
+							})] }), /* @__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,
+									date: e.target.value
+								}),
+								className: _
+							})] })]
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ p(s, {
+				open: U !== null,
+				onClose: () => W(null),
+				title: "Delete expense?",
+				description: U ? `${t(U.amount, U.currency)} · ${U.category} will be removed.` : void 0,
+				size: "sm",
+				footer: /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("button", {
+					onClick: () => W(null),
+					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,
+					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: /* @__PURE__ */ p("p", {
+					className: "text-sm text-text-secondary",
+					children: "This permanently removes the expense. This action cannot be undone."
+				})
+			}),
+			/* @__PURE__ */ m(s, {
+				open: G !== null,
+				onClose: () => K(null),
+				title: "Reject expense",
+				description: "Let the submitter know why this expense was rejected.",
+				size: "sm",
+				footer: /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p("button", {
+					onClick: () => K(null),
+					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,
+					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: [/* @__PURE__ */ p("label", {
+					className: "block text-sm font-medium text-text-primary",
+					children: "Reason"
+				}), /* @__PURE__ */ p("textarea", {
+					rows: 3,
+					placeholder: "Reason for rejection (optional)",
+					value: q,
+					onChange: (e) => J(e.target.value),
+					className: _
+				})]
+			}),
+			/* @__PURE__ */ p(ue, {
+				toasts: _e,
+				onDismiss: ve
 			})
-		})]
+		]
 	});
 }
 //#endregion
-export { h as ExpenseTrackingPage };
+export { b as ExpenseTrackingPage };
 
 //# sourceMappingURL=ExpenseTrackingPage.js.map