@burdenoff/microfe-proserviceworld 2026.624.1 → 2026.626.1

package/dist/proserviceworld/pages/PaymentsPage.js

@@ -2,21 +2,21 @@ import { useProServiceWorldStore as e } from "../store/proserviceworldStore.js";
 import { useMemo as t, useState as n } from "react";
 import { ArrowDownLeft as r, ArrowUpRight as i, Building2 as a, Clock as o, CreditCard as s, DollarSign as c, Download as l, FileText as u, Plus as d, RotateCcw as f, Search as p, Shield as m, Wallet as h } from "lucide-react";
 import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import { Badge as v, Button as y, Card as b, CardContent as x, CardHeader as S, CardTitle as C, Input as w } from "@burdenoff/fe-libs/ui";
+import { AuroraBackground as v, Badge as y, Button as b, Card as x, CardContent as S, CardHeader as C, CardTitle as w, GlassCard as T, GradientText as E, IllustratedEmptyState as D, Input as O, NextSteps as k, PagePurpose as A } from "@burdenoff/fe-libs/ui";
 //#region src/proserviceworld/pages/PaymentsPage.tsx
-function T() {
-	let { transactions: T, paymentMethods: E, invoices: D } = e(), [O, k] = n("overview"), [A, j] = n(""), [M, N] = n("all"), P = T.filter((e) => e.type === "outgoing" && e.status === "completed").reduce((e, t) => e + t.amount, 0), F = T.filter((e) => e.status === "pending").reduce((e, t) => e + t.amount, 0), I = T.filter((e) => e.status === "completed").reduce((e, t) => e + t.fees, 0), L = T.filter((e) => e.type === "refund" && e.status === "completed").reduce((e, t) => e + t.amount, 0), R = t(() => {
-		let e = [...T];
-		if (M !== "all" && (e = e.filter((e) => e.status === M)), A.trim()) {
-			let t = A.toLowerCase();
+function j() {
+	let { transactions: j, paymentMethods: M, invoices: N } = e(), [P, F] = n("overview"), [I, L] = n(""), [R, z] = n("all"), B = j.filter((e) => e.type === "outgoing" && e.status === "completed").reduce((e, t) => e + t.amount, 0), V = j.filter((e) => e.status === "pending").reduce((e, t) => e + t.amount, 0), H = j.filter((e) => e.status === "completed").reduce((e, t) => e + t.fees, 0), U = j.filter((e) => e.type === "refund" && e.status === "completed").reduce((e, t) => e + t.amount, 0), W = t(() => {
+		let e = [...j];
+		if (R !== "all" && (e = e.filter((e) => e.status === R)), I.trim()) {
+			let t = I.toLowerCase();
 			e = e.filter((e) => e.description.toLowerCase().includes(t) || e.counterparty.toLowerCase().includes(t) || (e.serviceName?.toLowerCase().includes(t) ?? !1));
 		}
 		return e.sort((e, t) => new Date(t.createdAt).getTime() - new Date(e.createdAt).getTime());
 	}, [
-		T,
-		M,
-		A
-	]), z = (e) => e === "outgoing" ? /* @__PURE__ */ g(i, { className: "h-4 w-4 text-red-500" }) : e === "refund" ? /* @__PURE__ */ g(f, { className: "h-4 w-4 text-green-500" }) : /* @__PURE__ */ g(r, { className: "h-4 w-4 text-blue-500" }), B = (e) => /* @__PURE__ */ g(v, {
+		j,
+		R,
+		I
+	]), G = (e) => e === "outgoing" ? /* @__PURE__ */ g(i, { className: "h-4 w-4 text-status-error-text" }) : e === "refund" ? /* @__PURE__ */ g(f, { className: "h-4 w-4 text-status-success-text" }) : /* @__PURE__ */ g(r, { className: "h-4 w-4 text-accent-blue" }), K = (e) => /* @__PURE__ */ g(y, {
 		variant: {
 			completed: "default",
 			pending: "secondary",
@@ -24,25 +24,59 @@ function T() {
 			cancelled: "outline"
 		}[e] ?? "secondary",
 		children: e
-	}), V = (e) => g(e === "card" ? s : e === "bank" ? a : h, { className: "h-5 w-5" });
+	}), q = (e) => g(e === "card" ? s : e === "bank" ? a : h, { className: "h-5 w-5" });
 	return /* @__PURE__ */ _("div", {
-		className: "space-y-6 p-6",
+		className: "space-y-6 p-6 bg-bg-canvas min-h-screen",
 		children: [
 			/* @__PURE__ */ _("div", {
-				className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
-				children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
-					className: "text-2xl font-semibold",
-					children: "Payments"
-				}), /* @__PURE__ */ g("p", {
-					className: "text-sm text-text-secondary",
-					children: "Track transactions, manage payment methods, and view invoices."
-				})] }), /* @__PURE__ */ _(y, {
-					size: "sm",
-					children: [/* @__PURE__ */ g(d, { className: "mr-2 h-4 w-4" }), " Make Payment"]
+				className: "relative overflow-hidden rounded-card -mx-2 px-2 pt-1",
+				children: [/* @__PURE__ */ g(v, { intensity: "subtle" }), /* @__PURE__ */ _("div", {
+					className: "flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between",
+					children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("h1", {
+						className: "text-2xl font-semibold tracking-tight",
+						children: /* @__PURE__ */ g(E, { children: "Payments" })
+					}), /* @__PURE__ */ g("p", {
+						className: "text-sm text-text-secondary",
+						children: "Track transactions, manage payment methods, and view invoices."
+					})] }), /* @__PURE__ */ _(b, {
+						size: "sm",
+						children: [/* @__PURE__ */ g(d, { className: "mr-2 h-4 w-4" }), " Make Payment"]
+					})]
 				})]
 			}),
+			/* @__PURE__ */ g(A, {
+				icon: /* @__PURE__ */ g(c, { className: "h-4 w-4" }),
+				children: "Your money, end to end. See what you have spent, what is pending, and what has been refunded; search and reconcile individual transactions; manage the cards and bank accounts you pay with; and download invoices for your records."
+			}),
+			/* @__PURE__ */ g(k, {
+				storageKey: "proserviceworld-payments",
+				steps: [
+					{
+						id: "transactions",
+						label: "Review your transactions",
+						description: "Search and filter every payment, fee, and refund.",
+						icon: /* @__PURE__ */ g(p, { className: "h-4 w-4" }),
+						onClick: () => F("transactions")
+					},
+					{
+						id: "methods",
+						label: "Manage payment methods",
+						description: "Add or set a default card, bank, or wallet.",
+						icon: /* @__PURE__ */ g(s, { className: "h-4 w-4" }),
+						onClick: () => F("methods"),
+						done: M.length > 0
+					},
+					{
+						id: "invoices",
+						label: "Check your invoices",
+						description: "View and download invoices you create or receive.",
+						icon: /* @__PURE__ */ g(u, { className: "h-4 w-4" }),
+						onClick: () => F("invoices")
+					}
+				]
+			}),
 			/* @__PURE__ */ g("div", {
-				className: "flex gap-1 border-b",
+				className: "flex flex-wrap gap-1 border-b border-border-seam",
 				children: [
 					{
 						key: "overview",
@@ -61,304 +95,319 @@ function T() {
 						label: "Invoices"
 					}
 				].map(({ key: e, label: t }) => /* @__PURE__ */ g("button", {
-					onClick: () => k(e),
-					className: `border-b-2 px-4 py-2 text-sm font-medium transition-colors ${O === e ? "border-primary text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
+					onClick: () => F(e),
+					"aria-pressed": P === e,
+					className: `border-b-2 px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-border-focus ${P === e ? "border-action-primary-bg text-text-primary" : "border-transparent text-text-secondary hover:text-text-primary"}`,
 					children: t
 				}, e))
 			}),
-			O === "overview" && /* @__PURE__ */ _("div", {
+			P === "overview" && /* @__PURE__ */ _("div", {
 				className: "space-y-6",
 				children: [/* @__PURE__ */ _("div", {
 					className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-4",
 					children: [
-						/* @__PURE__ */ g(b, { children: /* @__PURE__ */ g(x, {
-							className: "pt-4",
+						/* @__PURE__ */ g(T, {
+							treatment: "glass",
+							glow: !0,
+							className: "border-border-seam",
 							children: /* @__PURE__ */ _("div", {
 								className: "flex items-center gap-3",
 								children: [/* @__PURE__ */ g("div", {
-									className: "rounded-lg bg-red-100 p-2 dark:bg-red-950",
-									children: /* @__PURE__ */ g(i, { className: "h-5 w-5 text-red-600" })
+									className: "rounded-lg bg-status-error-bg-subtle p-2",
+									children: /* @__PURE__ */ g(i, { className: "h-5 w-5 text-status-error-text" })
 								}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("p", {
-									className: "text-2xl font-bold",
-									children: ["$", P.toLocaleString()]
+									className: "text-2xl font-bold tabular-nums",
+									children: ["$", B.toLocaleString()]
 								}), /* @__PURE__ */ g("p", {
 									className: "text-xs text-text-secondary",
 									children: "Total Spent"
 								})] })]
 							})
-						}) }),
-						/* @__PURE__ */ g(b, { children: /* @__PURE__ */ g(x, {
-							className: "pt-4",
+						}),
+						/* @__PURE__ */ g(T, {
+							treatment: "metric",
+							className: "border-border-seam",
 							children: /* @__PURE__ */ _("div", {
 								className: "flex items-center gap-3",
 								children: [/* @__PURE__ */ g("div", {
-									className: "rounded-lg bg-yellow-100 p-2 dark:bg-yellow-950",
-									children: /* @__PURE__ */ g(o, { className: "h-5 w-5 text-yellow-600" })
+									className: "rounded-lg bg-status-warning-bg-subtle p-2",
+									children: /* @__PURE__ */ g(o, { className: "h-5 w-5 text-status-warning-text" })
 								}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("p", {
-									className: "text-2xl font-bold",
-									children: ["$", F.toLocaleString()]
+									className: "text-2xl font-bold tabular-nums",
+									children: ["$", V.toLocaleString()]
 								}), /* @__PURE__ */ g("p", {
 									className: "text-xs text-text-secondary",
 									children: "Pending"
 								})] })]
 							})
-						}) }),
-						/* @__PURE__ */ g(b, { children: /* @__PURE__ */ g(x, {
-							className: "pt-4",
+						}),
+						/* @__PURE__ */ g(T, {
+							treatment: "metric",
+							className: "border-border-seam",
 							children: /* @__PURE__ */ _("div", {
 								className: "flex items-center gap-3",
 								children: [/* @__PURE__ */ g("div", {
-									className: "rounded-lg bg-blue-100 p-2 dark:bg-blue-950",
-									children: /* @__PURE__ */ g(c, { className: "h-5 w-5 text-blue-600" })
+									className: "rounded-lg bg-status-info-bg-subtle p-2",
+									children: /* @__PURE__ */ g(c, { className: "h-5 w-5 text-accent-blue" })
 								}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("p", {
-									className: "text-2xl font-bold",
-									children: ["$", I.toLocaleString()]
+									className: "text-2xl font-bold tabular-nums",
+									children: ["$", H.toLocaleString()]
 								}), /* @__PURE__ */ g("p", {
 									className: "text-xs text-text-secondary",
 									children: "Total Fees"
 								})] })]
 							})
-						}) }),
-						/* @__PURE__ */ g(b, { children: /* @__PURE__ */ g(x, {
-							className: "pt-4",
+						}),
+						/* @__PURE__ */ g(T, {
+							treatment: "metric",
+							className: "border-border-seam",
 							children: /* @__PURE__ */ _("div", {
 								className: "flex items-center gap-3",
 								children: [/* @__PURE__ */ g("div", {
-									className: "rounded-lg bg-green-100 p-2 dark:bg-green-950",
-									children: /* @__PURE__ */ g(f, { className: "h-5 w-5 text-green-600" })
+									className: "rounded-lg bg-status-success-bg-subtle p-2",
+									children: /* @__PURE__ */ g(f, { className: "h-5 w-5 text-status-success-text" })
 								}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("p", {
-									className: "text-2xl font-bold",
-									children: ["$", L.toLocaleString()]
+									className: "text-2xl font-bold tabular-nums",
+									children: ["$", U.toLocaleString()]
 								}), /* @__PURE__ */ g("p", {
 									className: "text-xs text-text-secondary",
 									children: "Refunded"
 								})] })]
 							})
-						}) })
+						})
 					]
-				}), /* @__PURE__ */ _(b, { children: [/* @__PURE__ */ g(S, { children: /* @__PURE__ */ _("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ g(C, {
-						className: "text-base",
-						children: "Recent Transactions"
-					}), /* @__PURE__ */ g(y, {
-						variant: "outline",
-						size: "sm",
-						onClick: () => k("transactions"),
-						children: "View All"
-					})]
-				}) }), /* @__PURE__ */ g(x, { children: /* @__PURE__ */ g("div", {
-					className: "space-y-3",
-					children: T.slice(0, 5).map((e) => /* @__PURE__ */ _("div", {
-						className: "flex items-center justify-between rounded-lg border p-3",
-						children: [/* @__PURE__ */ _("div", {
-							className: "flex items-center gap-3",
-							children: [z(e.type), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-								className: "text-sm font-medium",
-								children: e.description
-							}), /* @__PURE__ */ _("p", {
-								className: "text-xs text-text-secondary",
-								children: [
-									e.counterparty,
-									" - ",
-									e.createdAt
-								]
-							})] })]
-						}), /* @__PURE__ */ _("div", {
-							className: "text-right",
-							children: [/* @__PURE__ */ _("p", {
-								className: `text-sm font-bold ${e.type === "refund" ? "text-green-600" : ""}`,
-								children: [
-									e.type === "refund" ? "+" : "-",
-									"$",
-									e.amount.toLocaleString()
-								]
-							}), B(e.status)]
+				}), /* @__PURE__ */ _(x, {
+					className: "border-border-seam",
+					children: [/* @__PURE__ */ g(C, { children: /* @__PURE__ */ _("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ g(w, {
+							className: "text-base",
+							children: "Recent Transactions"
+						}), /* @__PURE__ */ g(b, {
+							variant: "outline",
+							size: "sm",
+							onClick: () => F("transactions"),
+							children: "View All"
 						})]
-					}, e.id))
-				}) })] })]
+					}) }), /* @__PURE__ */ g(S, { children: /* @__PURE__ */ g("div", {
+						className: "space-y-3",
+						children: j.slice(0, 5).map((e) => /* @__PURE__ */ _("div", {
+							className: "flex items-center justify-between rounded-lg border border-border-seam p-3 transition-shadow hover:shadow-pop",
+							children: [/* @__PURE__ */ _("div", {
+								className: "flex items-center gap-3",
+								children: [G(e.type), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+									className: "text-sm font-medium",
+									children: e.description
+								}), /* @__PURE__ */ _("p", {
+									className: "text-xs text-text-secondary",
+									children: [
+										e.counterparty,
+										" - ",
+										e.createdAt
+									]
+								})] })]
+							}), /* @__PURE__ */ _("div", {
+								className: "text-right",
+								children: [/* @__PURE__ */ _("p", {
+									className: `text-sm font-bold tabular-nums ${e.type === "refund" ? "text-status-success-text" : ""}`,
+									children: [
+										e.type === "refund" ? "+" : "-",
+										"$",
+										e.amount.toLocaleString()
+									]
+								}), K(e.status)]
+							})]
+						}, e.id))
+					}) })]
+				})]
 			}),
-			O === "transactions" && /* @__PURE__ */ _("div", {
+			P === "transactions" && /* @__PURE__ */ _("div", {
 				className: "space-y-4",
 				children: [/* @__PURE__ */ _("div", {
 					className: "flex flex-col gap-4 sm:flex-row sm:items-center",
 					children: [/* @__PURE__ */ _("div", {
 						className: "relative flex-1",
-						children: [/* @__PURE__ */ g(p, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ g(w, {
+						children: [/* @__PURE__ */ g(p, { className: "absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ g(O, {
 							placeholder: "Search transactions...",
-							value: A,
-							onChange: (e) => j(e.target.value),
+							value: I,
+							onChange: (e) => L(e.target.value),
 							className: "pl-10"
 						})]
 					}), /* @__PURE__ */ g("div", {
-						className: "flex gap-2",
+						className: "flex flex-wrap gap-2",
 						children: [
 							"all",
 							"completed",
 							"pending",
 							"failed"
-						].map((e) => /* @__PURE__ */ g(y, {
-							variant: M === e ? "default" : "outline",
+						].map((e) => /* @__PURE__ */ g(b, {
+							variant: R === e ? "default" : "outline",
 							size: "sm",
-							onClick: () => N(e),
+							onClick: () => z(e),
 							children: e === "all" ? "All" : e.charAt(0).toUpperCase() + e.slice(1)
 						}, e))
 					})]
-				}), /* @__PURE__ */ g(b, { children: /* @__PURE__ */ g(x, {
-					className: "pt-4",
-					children: /* @__PURE__ */ g("div", {
-						className: "overflow-x-auto",
-						children: /* @__PURE__ */ _("table", {
-							className: "w-full text-sm",
-							children: [/* @__PURE__ */ g("thead", { children: /* @__PURE__ */ _("tr", {
-								className: "border-b text-left text-text-secondary",
-								children: [
-									/* @__PURE__ */ g("th", {
-										className: "p-3",
-										children: "Type"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3",
-										children: "Description"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3",
-										children: "Counterparty"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3",
-										children: "Method"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3 text-right",
-										children: "Amount"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3 text-right",
-										children: "Fees"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3 text-right",
-										children: "Net"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3",
-										children: "Status"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3",
-										children: "Date"
-									})
-								]
-							}) }), /* @__PURE__ */ g("tbody", { children: R.map((e) => /* @__PURE__ */ _("tr", {
-								className: "border-b hover:bg-bg-sunken/50",
-								children: [
-									/* @__PURE__ */ g("td", {
-										className: "p-3",
-										children: z(e.type)
-									}),
-									/* @__PURE__ */ g("td", {
-										className: "p-3 font-medium",
-										children: e.description
-									}),
-									/* @__PURE__ */ g("td", {
-										className: "p-3",
-										children: e.counterparty
-									}),
-									/* @__PURE__ */ g("td", {
-										className: "p-3",
-										children: /* @__PURE__ */ g(v, {
-											variant: "outline",
-											children: e.method.replace("_", " ")
+				}), /* @__PURE__ */ g(x, {
+					className: "border-border-seam",
+					children: /* @__PURE__ */ g(S, {
+						className: "pt-4",
+						children: W.length === 0 ? /* @__PURE__ */ g(D, {
+							illustration: "empty-search",
+							title: "No transactions found",
+							description: "No transactions match your current filters."
+						}) : /* @__PURE__ */ g("div", {
+							className: "overflow-x-auto",
+							children: /* @__PURE__ */ _("table", {
+								className: "w-full text-sm",
+								children: [/* @__PURE__ */ g("thead", { children: /* @__PURE__ */ _("tr", {
+									className: "border-b border-border-seam text-left text-text-secondary",
+									children: [
+										/* @__PURE__ */ g("th", {
+											className: "p-3 font-medium",
+											children: "Type"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 font-medium",
+											children: "Description"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 font-medium",
+											children: "Counterparty"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 font-medium",
+											children: "Method"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 text-right font-medium",
+											children: "Amount"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 text-right font-medium",
+											children: "Fees"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 text-right font-medium",
+											children: "Net"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 font-medium",
+											children: "Status"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 font-medium",
+											children: "Date"
+										})
+									]
+								}) }), /* @__PURE__ */ g("tbody", { children: W.map((e) => /* @__PURE__ */ _("tr", {
+									className: "border-b border-border-seam transition-colors hover:bg-bg-sunken/50",
+									children: [
+										/* @__PURE__ */ g("td", {
+											className: "p-3",
+											children: G(e.type)
+										}),
+										/* @__PURE__ */ g("td", {
+											className: "p-3 font-medium",
+											children: e.description
+										}),
+										/* @__PURE__ */ g("td", {
+											className: "p-3",
+											children: e.counterparty
+										}),
+										/* @__PURE__ */ g("td", {
+											className: "p-3",
+											children: /* @__PURE__ */ g(y, {
+												variant: "outline",
+												children: e.method.replace("_", " ")
+											})
+										}),
+										/* @__PURE__ */ _("td", {
+											className: `p-3 text-right font-medium tabular-nums ${e.type === "refund" ? "text-status-success-text" : ""}`,
+											children: [
+												e.type === "refund" ? "+" : "-",
+												"$",
+												e.amount.toLocaleString()
+											]
+										}),
+										/* @__PURE__ */ _("td", {
+											className: "p-3 text-right text-text-secondary tabular-nums",
+											children: ["$", e.fees]
+										}),
+										/* @__PURE__ */ _("td", {
+											className: "p-3 text-right tabular-nums",
+											children: ["$", e.netAmount.toLocaleString()]
+										}),
+										/* @__PURE__ */ g("td", {
+											className: "p-3",
+											children: K(e.status)
+										}),
+										/* @__PURE__ */ g("td", {
+											className: "p-3 text-text-secondary",
+											children: e.createdAt
 										})
-									}),
-									/* @__PURE__ */ _("td", {
-										className: `p-3 text-right font-medium ${e.type === "refund" ? "text-green-600" : ""}`,
-										children: [
-											e.type === "refund" ? "+" : "-",
-											"$",
-											e.amount.toLocaleString()
-										]
-									}),
-									/* @__PURE__ */ _("td", {
-										className: "p-3 text-right text-text-secondary",
-										children: ["$", e.fees]
-									}),
-									/* @__PURE__ */ _("td", {
-										className: "p-3 text-right",
-										children: ["$", e.netAmount.toLocaleString()]
-									}),
-									/* @__PURE__ */ g("td", {
-										className: "p-3",
-										children: B(e.status)
-									}),
-									/* @__PURE__ */ g("td", {
-										className: "p-3 text-text-secondary",
-										children: e.createdAt
-									})
-								]
-							}, e.id)) })]
+									]
+								}, e.id)) })]
+							})
 						})
 					})
-				}) })]
+				})]
 			}),
-			O === "methods" && /* @__PURE__ */ g("div", {
+			P === "methods" && /* @__PURE__ */ g("div", {
 				className: "space-y-4",
 				children: /* @__PURE__ */ _("div", {
 					className: "grid gap-4 sm:grid-cols-2 lg:grid-cols-3",
-					children: [E.map((e) => /* @__PURE__ */ g(b, {
-						className: e.isDefault ? "border-primary" : "",
-						children: /* @__PURE__ */ _(x, {
-							className: "pt-6",
-							children: [
-								/* @__PURE__ */ _("div", {
-									className: "flex items-start justify-between",
-									children: [/* @__PURE__ */ _("div", {
-										className: "flex items-center gap-3",
-										children: [/* @__PURE__ */ g("div", {
-											className: "rounded-lg border p-2",
-											children: V(e.type)
-										}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
-											className: "font-medium",
-											children: e.name
-										}), /* @__PURE__ */ g("p", {
-											className: "text-sm text-text-secondary",
-											children: e.details
-										})] })]
-									}), e.isDefault && /* @__PURE__ */ g(v, { children: "Default" })]
-								}),
-								/* @__PURE__ */ _("div", {
-									className: "mt-4 flex items-center gap-4 text-sm",
-									children: [e.isVerified ? /* @__PURE__ */ _("span", {
-										className: "flex items-center gap-1 text-green-600",
-										children: [/* @__PURE__ */ g(m, { className: "h-4 w-4" }), " Verified"]
-									}) : /* @__PURE__ */ _("span", {
-										className: "flex items-center gap-1 text-yellow-600",
-										children: [/* @__PURE__ */ g(o, { className: "h-4 w-4" }), " Unverified"]
-									}), e.lastUsed && /* @__PURE__ */ _("span", {
-										className: "text-text-secondary",
-										children: ["Last used: ", e.lastUsed]
-									})]
-								}),
-								/* @__PURE__ */ _("div", {
-									className: "mt-4 flex gap-2",
-									children: [!e.isDefault && /* @__PURE__ */ g(y, {
-										variant: "outline",
-										size: "sm",
-										className: "flex-1",
-										children: "Set Default"
-									}), /* @__PURE__ */ g(y, {
-										variant: "outline",
-										size: "sm",
-										className: "flex-1",
-										children: "Remove"
-									})]
-								})
-							]
-						})
-					}, e.id)), /* @__PURE__ */ g(b, {
-						className: "flex items-center justify-center border-dashed",
-						children: /* @__PURE__ */ _(x, {
+					children: [M.map((e) => /* @__PURE__ */ _(T, {
+						treatment: "glass",
+						glow: e.isDefault,
+						className: `border-border-seam ${e.isDefault, ""}`,
+						children: [
+							/* @__PURE__ */ _("div", {
+								className: "flex items-start justify-between",
+								children: [/* @__PURE__ */ _("div", {
+									className: "flex items-center gap-3",
+									children: [/* @__PURE__ */ g("div", {
+										className: "rounded-lg border border-border-seam p-2 text-text-primary",
+										children: q(e.type)
+									}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("p", {
+										className: "font-medium",
+										children: e.name
+									}), /* @__PURE__ */ g("p", {
+										className: "text-sm text-text-secondary",
+										children: e.details
+									})] })]
+								}), e.isDefault && /* @__PURE__ */ g(y, { children: "Default" })]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "mt-4 flex items-center gap-4 text-sm",
+								children: [e.isVerified ? /* @__PURE__ */ _("span", {
+									className: "flex items-center gap-1 text-status-success-text",
+									children: [/* @__PURE__ */ g(m, { className: "h-4 w-4" }), " Verified"]
+								}) : /* @__PURE__ */ _("span", {
+									className: "flex items-center gap-1 text-status-warning-text",
+									children: [/* @__PURE__ */ g(o, { className: "h-4 w-4" }), " Unverified"]
+								}), e.lastUsed && /* @__PURE__ */ _("span", {
+									className: "text-text-secondary",
+									children: ["Last used: ", e.lastUsed]
+								})]
+							}),
+							/* @__PURE__ */ _("div", {
+								className: "mt-4 flex gap-2",
+								children: [!e.isDefault && /* @__PURE__ */ g(b, {
+									variant: "outline",
+									size: "sm",
+									className: "flex-1",
+									children: "Set Default"
+								}), /* @__PURE__ */ g(b, {
+									variant: "outline",
+									size: "sm",
+									className: "flex-1",
+									children: "Remove"
+								})]
+							})
+						]
+					}, e.id)), /* @__PURE__ */ g(x, {
+						className: "flex items-center justify-center border-dashed border-border-seam transition-shadow hover:shadow-pop",
+						children: /* @__PURE__ */ _(S, {
 							className: "py-8 text-center",
 							children: [
 								/* @__PURE__ */ g(d, { className: "mx-auto h-8 w-8 text-text-secondary" }),
@@ -375,105 +424,114 @@ function T() {
 					})]
 				})
 			}),
-			O === "invoices" && /* @__PURE__ */ g("div", {
+			P === "invoices" && /* @__PURE__ */ g("div", {
 				className: "space-y-4",
-				children: /* @__PURE__ */ g(b, { children: /* @__PURE__ */ g(x, {
-					className: "pt-4",
-					children: /* @__PURE__ */ g("div", {
-						className: "overflow-x-auto",
-						children: /* @__PURE__ */ _("table", {
-							className: "w-full text-sm",
-							children: [/* @__PURE__ */ g("thead", { children: /* @__PURE__ */ _("tr", {
-								className: "border-b text-left text-text-secondary",
-								children: [
-									/* @__PURE__ */ g("th", {
-										className: "p-3",
-										children: "Invoice #"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3",
-										children: "Description"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3",
-										children: "Client"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3 text-right",
-										children: "Amount"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3",
-										children: "Status"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3",
-										children: "Due Date"
-									}),
-									/* @__PURE__ */ g("th", {
-										className: "p-3 text-right",
-										children: "Actions"
-									})
-								]
-							}) }), /* @__PURE__ */ g("tbody", { children: D.map((e) => /* @__PURE__ */ _("tr", {
-								className: "border-b hover:bg-bg-sunken/50",
-								children: [
-									/* @__PURE__ */ g("td", {
-										className: "p-3 font-medium",
-										children: e.number
-									}),
-									/* @__PURE__ */ g("td", {
-										className: "p-3",
-										children: e.description
-									}),
-									/* @__PURE__ */ g("td", {
-										className: "p-3",
-										children: e.clientName
-									}),
-									/* @__PURE__ */ _("td", {
-										className: "p-3 text-right font-medium",
-										children: ["$", e.amount.toLocaleString()]
-									}),
-									/* @__PURE__ */ g("td", {
-										className: "p-3",
-										children: /* @__PURE__ */ g(v, {
-											variant: {
-												paid: "default",
-												pending: "secondary",
-												overdue: "destructive"
-											}[e.status] ?? "secondary",
-											children: e.status
+				children: /* @__PURE__ */ g(x, {
+					className: "border-border-seam",
+					children: /* @__PURE__ */ g(S, {
+						className: "pt-4",
+						children: N.length === 0 ? /* @__PURE__ */ g(D, {
+							illustration: "empty-files",
+							title: "No invoices yet",
+							description: "Invoices you create or receive will appear here."
+						}) : /* @__PURE__ */ g("div", {
+							className: "overflow-x-auto",
+							children: /* @__PURE__ */ _("table", {
+								className: "w-full text-sm",
+								children: [/* @__PURE__ */ g("thead", { children: /* @__PURE__ */ _("tr", {
+									className: "border-b border-border-seam text-left text-text-secondary",
+									children: [
+										/* @__PURE__ */ g("th", {
+											className: "p-3 font-medium",
+											children: "Invoice #"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 font-medium",
+											children: "Description"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 font-medium",
+											children: "Client"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 text-right font-medium",
+											children: "Amount"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 font-medium",
+											children: "Status"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 font-medium",
+											children: "Due Date"
+										}),
+										/* @__PURE__ */ g("th", {
+											className: "p-3 text-right font-medium",
+											children: "Actions"
 										})
-									}),
-									/* @__PURE__ */ g("td", {
-										className: "p-3 text-text-secondary",
-										children: e.dueDate
-									}),
-									/* @__PURE__ */ g("td", {
-										className: "p-3 text-right",
-										children: /* @__PURE__ */ _("div", {
-											className: "flex justify-end gap-1",
-											children: [/* @__PURE__ */ g(y, {
-												variant: "outline",
-												size: "sm",
-												children: /* @__PURE__ */ g(u, { className: "h-3 w-3" })
-											}), /* @__PURE__ */ g(y, {
-												variant: "outline",
-												size: "sm",
-												children: /* @__PURE__ */ g(l, { className: "h-3 w-3" })
-											})]
+									]
+								}) }), /* @__PURE__ */ g("tbody", { children: N.map((e) => /* @__PURE__ */ _("tr", {
+									className: "border-b border-border-seam transition-colors hover:bg-bg-sunken/50",
+									children: [
+										/* @__PURE__ */ g("td", {
+											className: "p-3 font-medium",
+											children: e.number
+										}),
+										/* @__PURE__ */ g("td", {
+											className: "p-3",
+											children: e.description
+										}),
+										/* @__PURE__ */ g("td", {
+											className: "p-3",
+											children: e.clientName
+										}),
+										/* @__PURE__ */ _("td", {
+											className: "p-3 text-right font-medium tabular-nums",
+											children: ["$", e.amount.toLocaleString()]
+										}),
+										/* @__PURE__ */ g("td", {
+											className: "p-3",
+											children: /* @__PURE__ */ g(y, {
+												variant: {
+													paid: "default",
+													pending: "secondary",
+													overdue: "destructive"
+												}[e.status] ?? "secondary",
+												children: e.status
+											})
+										}),
+										/* @__PURE__ */ g("td", {
+											className: "p-3 text-text-secondary",
+											children: e.dueDate
+										}),
+										/* @__PURE__ */ g("td", {
+											className: "p-3 text-right",
+											children: /* @__PURE__ */ _("div", {
+												className: "flex justify-end gap-1",
+												children: [/* @__PURE__ */ g(b, {
+													variant: "outline",
+													size: "sm",
+													"aria-label": "View invoice",
+													children: /* @__PURE__ */ g(u, { className: "h-3 w-3" })
+												}), /* @__PURE__ */ g(b, {
+													variant: "outline",
+													size: "sm",
+													"aria-label": "Download invoice",
+													children: /* @__PURE__ */ g(l, { className: "h-3 w-3" })
+												})]
+											})
 										})
-									})
-								]
-							}, e.id)) })]
+									]
+								}, e.id)) })]
+							})
 						})
 					})
-				}) })
+				})
 			})
 		]
 	});
 }
 //#endregion
-export { T as PaymentsPage };
+export { j as PaymentsPage };
 
 //# sourceMappingURL=PaymentsPage.js.map