@burdenoff/microfe-timecampus 2026.719.4 → 2026.731.1

package/dist/timecampus/pages/invoicing/InvoicingPage.js

@@ -0,0 +1,595 @@
+import { useTimeCampus as e } from "../../providers/TimeCampusProvider.js";
+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 { useDeleteInvoiceDraftMutation as a, useGenerateInvoiceDraftMutation as o, useGetInvoiceStatsQuery as ee, useListInvoicesQuery as s, useUpdateInvoiceStatusMutation as te } from "../../../generated/wspace-operations.js";
+import { PageLayout as c } from "../../components/PageLayout.js";
+import { StatusBadge as ne } from "../../components/StatusBadge.js";
+import { EmptyState as re } from "../../components/EmptyState.js";
+import { Modal as l } from "../../components/Modal.js";
+import { ToastContainer as ie, useToast as ae } from "../../components/Toast.js";
+import { TimeCampusInvoiceStatus as u } from "../../../generated/wspace-types.js";
+import { useState as d } from "react";
+import { AlertTriangle as oe, CheckCircle2 as se, DollarSign as ce, Download as f, Eye as le, FileText as p, Plus as ue, Send as de, Trash2 as fe } from "lucide-react";
+import { gql as m } from "@apollo/client";
+import { useApolloClient as h } from "@apollo/client/react";
+import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/timecampus/pages/invoicing/InvoicingPage.tsx
+var y = 25, b = "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", pe = m`
+  query TimeCampusInvoicing_GetInvoiceHtml($id: ID!, $workspaceId: ID!) {
+    timeCampusInvoiceHtml(id: $id, workspaceId: $workspaceId)
+  }
+`, me = m`
+  query TimeCampusInvoicing_GetInvoicePdf($id: ID!, $workspaceId: ID!) {
+    timeCampusInvoicePdf(id: $id, workspaceId: $workspaceId)
+  }
+`;
+function x() {
+	return (/* @__PURE__ */ new Date()).toISOString().slice(0, 10);
+}
+function S() {
+	let e = /* @__PURE__ */ new Date();
+	return new Date(e.getFullYear(), e.getMonth(), 1).toISOString().slice(0, 10);
+}
+var C = {
+	clientName: "",
+	clientEmail: "",
+	clientAddress: "",
+	periodStart: S(),
+	periodEnd: x(),
+	taxRatePercent: "0",
+	currency: "USD",
+	dueDate: "",
+	notes: "",
+	projectIds: ""
+};
+function he(e, t) {
+	let n = atob(e), r = new Uint8Array(n.length);
+	for (let e = 0; e < n.length; e++) r[e] = n.charCodeAt(e);
+	let i = new Blob([r], { type: "application/pdf" }), a = URL.createObjectURL(i), o = document.createElement("a");
+	o.href = a, o.download = t, document.body.appendChild(o), o.click(), o.remove(), URL.revokeObjectURL(a);
+}
+function w() {
+	let { workspaceId: m = "" } = e(), { toasts: w, addToast: T, dismissToast: ge } = ae(), E = h(), { data: D, loading: O, error: _e, refetch: ve, fetchMore: ye } = s({
+		variables: {
+			workspaceId: m,
+			pagination: {
+				limit: y,
+				offset: 0
+			}
+		},
+		notifyOnNetworkStatusChange: !0
+	}), { data: be, loading: xe, refetch: Se } = ee({ variables: { workspaceId: m } }), [Ce, { loading: k }] = o(), [A] = te(), [we, { loading: j }] = a(), M = D?.timeCampusInvoices?.items ?? [], Te = D?.timeCampusInvoices?.total ?? 0, N = be?.timeCampusInvoiceStats, [P, F] = d(!1), [Ee, De] = d(!0), [Oe, I] = d(!1), [L, R] = d(C), [z, B] = d(null), [V, H] = d(null), [ke, U] = d(!1), [W, G] = d(null), [K, q] = d(null), [Ae, J] = d(null), Y = async () => {
+		await Promise.all([ve(), Se()]);
+	}, je = () => {
+		R({
+			...C,
+			periodStart: S(),
+			periodEnd: x()
+		}), I(!0);
+	}, X = () => I(!1), Me = async () => {
+		if (!L.clientName.trim() || !L.periodStart || !L.periodEnd) return;
+		let e = Number(L.taxRatePercent || "0") / 100;
+		if (Number.isNaN(e) || e < 0 || e > 1) {
+			T({
+				title: "Tax rate must be between 0 and 100%",
+				variant: "error"
+			});
+			return;
+		}
+		try {
+			await Ce({ variables: { input: {
+				workspaceId: m,
+				clientName: L.clientName.trim(),
+				clientEmail: L.clientEmail.trim() || void 0,
+				clientAddress: L.clientAddress.trim() || void 0,
+				periodStart: new Date(L.periodStart).toISOString(),
+				periodEnd: (/* @__PURE__ */ new Date(new Date(L.periodEnd).getTime() + 864e5 - 1)).toISOString(),
+				taxRate: e,
+				currency: L.currency.trim() || "USD",
+				dueDate: L.dueDate ? new Date(L.dueDate).toISOString() : void 0,
+				notes: L.notes.trim() || void 0,
+				projectIds: L.projectIds.trim() ? L.projectIds.split(",").map((e) => e.trim()).filter(Boolean) : void 0
+			} } }), T({
+				title: "Draft invoice generated",
+				variant: "success"
+			}), X(), await Y();
+		} catch (e) {
+			T({
+				title: e instanceof Error ? e.message : "Failed to generate invoice — check the billing period has un-invoiced billable time",
+				variant: "error"
+			});
+		}
+	}, Z = async (e) => {
+		J(e.id);
+		try {
+			await A({ variables: { input: {
+				id: e.id,
+				workspaceId: m,
+				status: u.Sent
+			} } }), T({
+				title: "Invoice marked as sent",
+				variant: "success"
+			}), await Y();
+		} catch {
+			T({
+				title: "Failed to update invoice status",
+				variant: "error"
+			});
+		} finally {
+			J(null);
+		}
+	}, Ne = async (e) => {
+		J(e.id);
+		try {
+			await A({ variables: { input: {
+				id: e.id,
+				workspaceId: m,
+				status: u.Paid
+			} } }), T({
+				title: "Invoice marked as paid",
+				variant: "success"
+			}), await Y();
+		} catch {
+			T({
+				title: "Failed to update invoice status",
+				variant: "error"
+			});
+		} finally {
+			J(null);
+		}
+	}, Pe = async () => {
+		if (K) try {
+			await we({ variables: {
+				id: K.id,
+				workspaceId: m
+			} }), T({
+				title: "Draft invoice deleted",
+				variant: "success"
+			}), q(null), await Y();
+		} catch {
+			T({
+				title: "Failed to delete invoice",
+				variant: "error"
+			});
+		}
+	}, Fe = async (e) => {
+		B(e), H(null), U(!0);
+		try {
+			let { data: t } = await E.query({
+				query: pe,
+				variables: {
+					id: e.id,
+					workspaceId: m
+				},
+				fetchPolicy: "no-cache"
+			}), n = t?.timeCampusInvoiceHtml;
+			H(n ?? null);
+		} catch {
+			T({
+				title: "Failed to load invoice preview",
+				variant: "error"
+			});
+		} finally {
+			U(!1);
+		}
+	}, Q = async (e) => {
+		G(e.id);
+		try {
+			let { data: t } = await E.query({
+				query: me,
+				variables: {
+					id: e.id,
+					workspaceId: m
+				},
+				fetchPolicy: "no-cache"
+			}), n = t?.timeCampusInvoicePdf;
+			if (!n) throw Error("Empty PDF payload");
+			he(n, `${e.invoiceNumber}.pdf`);
+		} catch {
+			T({
+				title: "Failed to download PDF",
+				variant: "error"
+			});
+		} finally {
+			G(null);
+		}
+	}, Ie = async () => {
+		F(!0);
+		try {
+			((await ye({
+				variables: {
+					workspaceId: m,
+					pagination: {
+						limit: y,
+						offset: M.length
+					}
+				},
+				updateQuery: (e, { fetchMoreResult: t }) => t ? {
+					...e,
+					timeCampusInvoices: {
+						...t.timeCampusInvoices,
+						items: [...e.timeCampusInvoices.items, ...t.timeCampusInvoices.items]
+					}
+				} : e
+			})).data?.timeCampusInvoices?.items?.length ?? 0) < y && De(!1);
+		} finally {
+			F(!1);
+		}
+	};
+	if (O && xe && M.length === 0) return /* @__PURE__ */ _(c, {
+		title: "Invoicing",
+		description: "Bill clients for billable time",
+		children: /* @__PURE__ */ _(i, {
+			variant: "list",
+			count: 4
+		})
+	});
+	if (_e) return /* @__PURE__ */ _(c, {
+		title: "Invoicing",
+		description: "Bill clients for billable time",
+		children: /* @__PURE__ */ _("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 invoices. Please try again later."
+		})
+	});
+	let $ = /* @__PURE__ */ v("button", {
+		onClick: je,
+		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__ */ _(ue, { className: "h-4 w-4" }), "Generate Invoice"]
+	});
+	return /* @__PURE__ */ v(c, {
+		title: "Invoicing",
+		description: "Bill clients for billable time",
+		purpose: "Turn logged, billable hours into a real invoice — pick a client and a billing period, and TimeCampus aggregates every un-invoiced billable time entry by project and task, applying each entry's own rate, into a draft you can review, send, and mark paid.",
+		actions: $,
+		children: [
+			/* @__PURE__ */ v("div", {
+				className: "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4",
+				children: [
+					/* @__PURE__ */ _(r, {
+						featured: !0,
+						title: "Total Invoiced",
+						value: t(N?.totalInvoiced ?? 0),
+						icon: /* @__PURE__ */ _(ce, { className: "h-5 w-5" })
+					}),
+					/* @__PURE__ */ _(r, {
+						title: "Outstanding",
+						value: t(N?.totalOutstanding ?? 0),
+						description: `${N?.sentCount ?? 0} sent, awaiting payment`
+					}),
+					/* @__PURE__ */ _(r, {
+						title: "Paid",
+						value: t(N?.totalPaid ?? 0),
+						description: `${N?.paidCount ?? 0} invoices paid`
+					}),
+					/* @__PURE__ */ _(r, {
+						title: "Drafts",
+						value: String(N?.draftCount ?? 0),
+						icon: /* @__PURE__ */ _(p, { className: "h-5 w-5" }),
+						description: "not yet sent"
+					})
+				]
+			}),
+			M.length === 0 && !O ? /* @__PURE__ */ _(re, {
+				illustration: "empty-data",
+				title: "No invoices yet",
+				description: "Generate a draft invoice from real billable time entries to bill a client.",
+				action: $
+			}) : /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("div", {
+				className: "mt-4 rounded-xl border border-border-seam bg-gloss-card shadow-pop",
+				children: /* @__PURE__ */ _("div", {
+					className: "divide-y divide-border",
+					children: M.map((e) => {
+						let r = Ae === e.id, i = e.status === u.Draft, a = e.status === u.Sent;
+						return /* @__PURE__ */ v("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__ */ v("div", {
+								className: "flex items-center gap-3",
+								children: [/* @__PURE__ */ _(p, { className: "h-5 w-5 shrink-0 text-text-secondary" }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("p", {
+									className: "text-sm font-medium text-text-primary",
+									children: [
+										e.invoiceNumber,
+										" · ",
+										e.clientName
+									]
+								}), /* @__PURE__ */ v("p", {
+									className: "text-xs text-text-secondary",
+									children: [
+										n(e.periodStart),
+										" –",
+										" ",
+										n(e.periodEnd),
+										e.dueDate && /* @__PURE__ */ v(g, { children: [" · Due ", n(e.dueDate)] })
+									]
+								})] })]
+							}), /* @__PURE__ */ v("div", {
+								className: "flex items-center gap-3",
+								children: [
+									/* @__PURE__ */ _("p", {
+										className: "text-sm font-medium text-text-primary",
+										children: t(e.total, e.currency)
+									}),
+									/* @__PURE__ */ _(ne, {
+										label: e.status.toLowerCase(),
+										status: e.status.toLowerCase()
+									}),
+									e.isOverdue && /* @__PURE__ */ v("span", {
+										title: "Past due date",
+										className: "inline-flex items-center gap-1 text-xs font-medium text-status-error-text",
+										children: [/* @__PURE__ */ _(oe, { className: "h-3.5 w-3.5" }), "Overdue"]
+									}),
+									/* @__PURE__ */ v("div", {
+										className: "flex items-center gap-1",
+										children: [
+											/* @__PURE__ */ _("button", {
+												type: "button",
+												onClick: () => void Fe(e),
+												title: "View invoice",
+												className: "rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken",
+												children: /* @__PURE__ */ _(le, { className: "h-4 w-4" })
+											}),
+											/* @__PURE__ */ _("button", {
+												type: "button",
+												disabled: W === e.id,
+												onClick: () => void Q(e),
+												title: "Download PDF",
+												className: "rounded-md p-1.5 text-text-secondary hover:bg-bg-sunken disabled:opacity-50",
+												children: /* @__PURE__ */ _(f, { className: "h-4 w-4" })
+											}),
+											i && /* @__PURE__ */ _("button", {
+												type: "button",
+												disabled: r,
+												onClick: () => Z(e),
+												title: "Mark as sent",
+												className: "rounded-md p-1.5 text-status-info-text hover:bg-status-info-bg disabled:opacity-50",
+												children: /* @__PURE__ */ _(de, { className: "h-4 w-4" })
+											}),
+											a && /* @__PURE__ */ _("button", {
+												type: "button",
+												disabled: r,
+												onClick: () => Ne(e),
+												title: "Mark as paid",
+												className: "rounded-md p-1.5 text-status-success-text hover:bg-status-success-bg disabled:opacity-50",
+												children: /* @__PURE__ */ _(se, { className: "h-4 w-4" })
+											}),
+											i && /* @__PURE__ */ _("button", {
+												type: "button",
+												onClick: () => q(e),
+												title: "Delete draft",
+												className: "rounded-md p-1.5 text-status-error-text hover:bg-status-error-bg",
+												children: /* @__PURE__ */ _(fe, { className: "h-4 w-4" })
+											})
+										]
+									})
+								]
+							})]
+						}, e.id);
+					})
+				})
+			}), Ee && M.length < Te && /* @__PURE__ */ _("div", {
+				className: "mt-4 flex justify-center",
+				children: /* @__PURE__ */ _("button", {
+					onClick: Ie,
+					disabled: P,
+					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: P ? "Loading..." : "Load more"
+				})
+			})] }),
+			/* @__PURE__ */ _(l, {
+				open: Oe,
+				onClose: X,
+				title: "Generate Invoice",
+				description: "Aggregates every billable, un-invoiced time entry in the selected period into a draft invoice.",
+				footer: /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("button", {
+					onClick: X,
+					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__ */ _("button", {
+					onClick: Me,
+					disabled: k || !L.clientName.trim() || !L.periodStart || !L.periodEnd,
+					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: k ? "Generating..." : "Generate Draft"
+				})] }),
+				children: /* @__PURE__ */ v("div", {
+					className: "space-y-4",
+					children: [
+						/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+							className: "block text-sm font-medium text-text-primary",
+							children: "Client name"
+						}), /* @__PURE__ */ _("input", {
+							type: "text",
+							placeholder: "Acme Corp",
+							value: L.clientName,
+							onChange: (e) => R({
+								...L,
+								clientName: e.target.value
+							}),
+							className: b
+						})] }),
+						/* @__PURE__ */ v("div", {
+							className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+							children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+								className: "block text-sm font-medium text-text-primary",
+								children: "Client email"
+							}), /* @__PURE__ */ _("input", {
+								type: "email",
+								placeholder: "billing@acme.com",
+								value: L.clientEmail,
+								onChange: (e) => R({
+									...L,
+									clientEmail: e.target.value
+								}),
+								className: b
+							})] }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+								className: "block text-sm font-medium text-text-primary",
+								children: "Currency"
+							}), /* @__PURE__ */ _("input", {
+								type: "text",
+								placeholder: "USD",
+								value: L.currency,
+								onChange: (e) => R({
+									...L,
+									currency: e.target.value
+								}),
+								className: b
+							})] })]
+						}),
+						/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+							className: "block text-sm font-medium text-text-primary",
+							children: "Client address"
+						}), /* @__PURE__ */ _("input", {
+							type: "text",
+							placeholder: "Optional billing address",
+							value: L.clientAddress,
+							onChange: (e) => R({
+								...L,
+								clientAddress: e.target.value
+							}),
+							className: b
+						})] }),
+						/* @__PURE__ */ v("div", {
+							className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+							children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+								className: "block text-sm font-medium text-text-primary",
+								children: "Billing period start"
+							}), /* @__PURE__ */ _("input", {
+								type: "date",
+								value: L.periodStart,
+								onChange: (e) => R({
+									...L,
+									periodStart: e.target.value
+								}),
+								className: b
+							})] }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+								className: "block text-sm font-medium text-text-primary",
+								children: "Billing period end"
+							}), /* @__PURE__ */ _("input", {
+								type: "date",
+								value: L.periodEnd,
+								onChange: (e) => R({
+									...L,
+									periodEnd: e.target.value
+								}),
+								className: b
+							})] })]
+						}),
+						/* @__PURE__ */ v("div", {
+							className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+							children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+								className: "block text-sm font-medium text-text-primary",
+								children: "Tax rate (%)"
+							}), /* @__PURE__ */ _("input", {
+								type: "number",
+								min: 0,
+								max: 100,
+								step: "0.1",
+								value: L.taxRatePercent,
+								onChange: (e) => R({
+									...L,
+									taxRatePercent: e.target.value
+								}),
+								className: b
+							})] }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+								className: "block text-sm font-medium text-text-primary",
+								children: "Due date"
+							}), /* @__PURE__ */ _("input", {
+								type: "date",
+								value: L.dueDate,
+								onChange: (e) => R({
+									...L,
+									dueDate: e.target.value
+								}),
+								className: b
+							})] })]
+						}),
+						/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+							className: "block text-sm font-medium text-text-primary",
+							children: "Project IDs"
+						}), /* @__PURE__ */ _("input", {
+							type: "text",
+							placeholder: "Optional, comma-separated. Leave blank for all projects.",
+							value: L.projectIds,
+							onChange: (e) => R({
+								...L,
+								projectIds: e.target.value
+							}),
+							className: b
+						})] }),
+						/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+							className: "block text-sm font-medium text-text-primary",
+							children: "Notes"
+						}), /* @__PURE__ */ _("textarea", {
+							rows: 2,
+							placeholder: "Optional notes printed on the invoice",
+							value: L.notes,
+							onChange: (e) => R({
+								...L,
+								notes: e.target.value
+							}),
+							className: b
+						})] })
+					]
+				})
+			}),
+			/* @__PURE__ */ _(l, {
+				open: z !== null,
+				onClose: () => B(null),
+				title: z ? `Invoice ${z.invoiceNumber}` : "Invoice",
+				description: z?.clientName,
+				size: "xl",
+				footer: z && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("button", {
+					onClick: () => B(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: "Close"
+				}), /* @__PURE__ */ v("button", {
+					onClick: () => void Q(z),
+					disabled: W === z.id,
+					className: "inline-flex items-center gap-1.5 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: [/* @__PURE__ */ _(f, { className: "h-4 w-4" }), W === z.id ? "Downloading..." : "Download PDF"]
+				})] }),
+				children: ke ? /* @__PURE__ */ _(i, {
+					variant: "detail",
+					count: 1
+				}) : V ? /* @__PURE__ */ _("iframe", {
+					title: "Invoice preview",
+					srcDoc: V,
+					sandbox: "",
+					className: "h-[60vh] w-full rounded-md border border-border-subtle bg-white"
+				}) : /* @__PURE__ */ _("p", {
+					className: "text-sm text-text-secondary",
+					children: "Failed to load invoice preview."
+				})
+			}),
+			/* @__PURE__ */ _(l, {
+				open: K !== null,
+				onClose: () => q(null),
+				title: "Delete draft invoice?",
+				description: K ? `${K.invoiceNumber} · ${t(K.total, K.currency)} will be removed and its time entries released back to the un-invoiced pool.` : void 0,
+				size: "sm",
+				footer: /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("button", {
+					onClick: () => q(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__ */ _("button", {
+					onClick: Pe,
+					disabled: j,
+					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: j ? "Deleting..." : "Delete"
+				})] }),
+				children: /* @__PURE__ */ _("p", {
+					className: "text-sm text-text-secondary",
+					children: "This permanently removes the draft. This action cannot be undone."
+				})
+			}),
+			/* @__PURE__ */ _(ie, {
+				toasts: w,
+				onDismiss: ge
+			})
+		]
+	});
+}
+//#endregion
+export { w as InvoicingPage };
+
+//# sourceMappingURL=InvoicingPage.js.map