@burdenoff/microfe-crewfoundry 2026.703.2 → 2026.704.2

package/dist/crewfoundry/pages/AnalyticsFinancialAnalyticsPagePage.js

@@ -1,12 +1,13 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { useMemo as t } from "react";
-import { ArrowUp as n, DollarSign as r, FileText as i, Receipt as a, TrendingUp as o, Wallet as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Badge as u, Card as d, CardContent as f, CardDescription as p, CardHeader as m, CardTitle as h, GlassCard as g, GradientText as _, PagePurpose as v, Separator as y } from "@burdenoff/fe-libs/ui";
+import { DollarSign as n, FileText as r, Receipt as i, TrendingUp as a, Wallet as o } from "lucide-react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { Badge as l, Card as u, CardContent as d, CardDescription as f, CardHeader as p, CardTitle as m, GlassCard as h, GradientText as g, IllustratedEmptyState as _, PagePurpose as v, Pagination as y, ResponsiveTable as b, Separator as x } from "@burdenoff/fe-libs/ui";
+import { usePagination as S } from "@burdenoff/fe-libs/shared/hooks";
 //#region src/crewfoundry/pages/AnalyticsFinancialAnalyticsPagePage.tsx
-function b() {
-	let { employees: b, departments: x, payrollRecords: S, invoices: C, projects: w } = e(), T = t(() => {
-		let e = S.reduce((e, t) => {
+function C() {
+	let { employees: C, departments: w, payrollRecords: T, invoices: E, projects: D } = e(), O = t(() => {
+		let e = T.reduce((e, t) => {
 			let n = new Date(t.payDate).toLocaleString("en-US", { month: "short" }), r = e[n] || {
 				gross: 0,
 				net: 0,
@@ -18,179 +19,180 @@ function b() {
 			month: e,
 			...t
 		})).slice(-6);
-	}, [S]), E = t(() => [
-		{
-			category: "Payroll",
-			amount: S.reduce((e, t) => e + t.grossPay, 0),
-			budget: x.reduce((e, t) => e + t.budget * .7, 0),
-			icon: s
-		},
-		{
-			category: "Benefits",
-			amount: S.reduce((e, t) => e + t.deductions * .4, 0),
-			budget: x.reduce((e, t) => e + t.budget * .15, 0),
-			icon: a
-		},
-		{
-			category: "Recruitment",
-			amount: C.reduce((e, t) => e + (t.status === "paid" ? t.amount * .15 : 0), 0),
-			budget: x.reduce((e, t) => e + t.budget * .1, 0),
-			icon: i
-		},
-		{
-			category: "Training",
-			amount: w.reduce((e, t) => e + t.spent * .08, 0),
-			budget: x.reduce((e, t) => e + t.budget * .08, 0),
-			icon: o
-		}
-	], [
-		x,
-		C,
-		S,
-		w
-	]), D = b.reduce((e, t) => e + t.salary, 0), O = Math.round(D / 12), k = C.reduce((e, t) => e + t.amount, 0), A = C.filter((e) => e.status === "paid").reduce((e, t) => e + t.amount, 0), j = w.reduce((e, t) => e + t.budget, 0), M = w.reduce((e, t) => e + t.spent, 0), N = Math.max(1, ...T.map((e) => e.gross)), P = x.map((e) => {
-		let t = b.filter((t) => t.department === e.name), n = t.reduce((e, t) => e + t.salary, 0);
+	}, [T]), k = t(() => {
+		let e = [
+			{
+				category: "Gross Payroll",
+				amount: T.reduce((e, t) => e + t.grossPay, 0),
+				icon: o
+			},
+			{
+				category: "Deductions",
+				amount: T.reduce((e, t) => e + t.deductions, 0),
+				icon: i
+			},
+			{
+				category: "Project Spend",
+				amount: D.reduce((e, t) => e + t.spent, 0),
+				icon: a
+			},
+			{
+				category: "Collected Invoices",
+				amount: E.filter((e) => e.status === "paid").reduce((e, t) => e + t.amount, 0),
+				icon: r
+			}
+		], t = e.reduce((e, t) => e + t.amount, 0) || 1;
+		return e.map((e) => ({
+			...e,
+			percentage: Math.round(e.amount / t * 100)
+		}));
+	}, [
+		E,
+		T,
+		D
+	]), A = C.reduce((e, t) => e + t.salary, 0), j = Math.round(A / 12), M = E.reduce((e, t) => e + t.amount, 0), N = E.filter((e) => e.status === "paid").reduce((e, t) => e + t.amount, 0), P = D.reduce((e, t) => e + t.budget, 0), F = D.reduce((e, t) => e + t.spent, 0), I = Math.max(1, ...O.map((e) => e.gross)), L = P > 0 ? Math.round(F / P * 100) : 0, R = [...w.map((e) => {
+		let t = C.filter((t) => t.department === e.name), n = t.reduce((e, t) => e + t.salary, 0);
 		return {
 			name: e.name,
 			salary: n,
 			budget: e.budget,
 			headcount: t.length
 		};
-	});
-	return /* @__PURE__ */ l("div", {
+	})].sort((e, t) => t.salary - e.salary), z = w.reduce((e, t) => e + t.budget, 0), B = [...E].filter((e) => e.status !== "paid").sort((e, t) => e.dueDate.localeCompare(t.dueDate)), { page: V, pageSize: H, offset: U, setPage: W } = S({ initialPageSize: 6 }), G = B.slice(U, U + H);
+	return /* @__PURE__ */ c("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ s("div", {
 				className: "flex items-center justify-between",
-				children: /* @__PURE__ */ l("div", { children: [
-					/* @__PURE__ */ c("h1", {
+				children: /* @__PURE__ */ c("div", { children: [
+					/* @__PURE__ */ s("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ c(_, { children: "Financial Analytics" })
+						children: /* @__PURE__ */ s(g, { children: "Financial Analytics" })
 					}),
-					/* @__PURE__ */ c("p", {
+					/* @__PURE__ */ s("p", {
 						className: "text-sm text-text-secondary",
 						children: "Workforce financial metrics and cost analysis"
 					}),
-					/* @__PURE__ */ c(v, {
+					/* @__PURE__ */ s(v, {
 						className: "mt-1",
 						children: "Understand the money side of your workforce — payroll, project budgets, and spend trends — so you can plan headcount and control costs with confidence."
 					})
 				] })
 			}),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ c("div", {
 				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-4",
 				children: [
-					/* @__PURE__ */ l(g, {
+					/* @__PURE__ */ c(h, {
 						treatment: "glass",
 						glow: !0,
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ l(m, {
+						children: [/* @__PURE__ */ c(p, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ c(h, {
+							children: [/* @__PURE__ */ s(m, {
 								className: "text-sm font-medium",
 								children: "Monthly Payroll"
-							}), /* @__PURE__ */ c(r, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ l("div", {
+							}), /* @__PURE__ */ s(n, { className: "h-4 w-4 text-text-secondary" })]
+						}), /* @__PURE__ */ c(d, { children: [/* @__PURE__ */ c("div", {
 							className: "text-2xl font-bold tabular-nums",
 							children: [
 								"$",
-								(O / 1e3).toFixed(0),
+								(j / 1e3).toFixed(0),
 								"K"
 							]
-						}), /* @__PURE__ */ l("div", {
-							className: "flex items-center text-xs text-status-warning-text",
-							children: [/* @__PURE__ */ c(n, { className: "h-3 w-3 mr-1" }), "+2.1% from last month"]
+						}), /* @__PURE__ */ s("p", {
+							className: "text-xs text-text-secondary",
+							children: "Annual salary ÷ 12 months"
 						})] })]
 					}),
-					/* @__PURE__ */ l(g, {
+					/* @__PURE__ */ c(h, {
 						treatment: "metric",
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ l(m, {
+						children: [/* @__PURE__ */ c(p, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ c(h, {
+							children: [/* @__PURE__ */ s(m, {
 								className: "text-sm font-medium",
 								children: "Annual Salary Cost"
-							}), /* @__PURE__ */ c(s, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ l("div", {
+							}), /* @__PURE__ */ s(o, { className: "h-4 w-4 text-text-secondary" })]
+						}), /* @__PURE__ */ c(d, { children: [/* @__PURE__ */ c("div", {
 							className: "text-2xl font-bold tabular-nums",
 							children: [
 								"$",
-								(D / 1e6).toFixed(1),
+								(A / 1e6).toFixed(1),
 								"M"
 							]
-						}), /* @__PURE__ */ l("p", {
+						}), /* @__PURE__ */ c("p", {
 							className: "text-xs text-text-secondary",
-							children: [b.length, " employees"]
+							children: [C.length, " employees"]
 						})] })]
 					}),
-					/* @__PURE__ */ l(g, {
+					/* @__PURE__ */ c(h, {
 						treatment: "metric",
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ l(m, {
+						children: [/* @__PURE__ */ c(p, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ c(h, {
+							children: [/* @__PURE__ */ s(m, {
 								className: "text-sm font-medium",
 								children: "Total Invoiced"
-							}), /* @__PURE__ */ c(i, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ l("div", {
+							}), /* @__PURE__ */ s(r, { className: "h-4 w-4 text-text-secondary" })]
+						}), /* @__PURE__ */ c(d, { children: [/* @__PURE__ */ c("div", {
 							className: "text-2xl font-bold tabular-nums",
 							children: [
 								"$",
-								(k / 1e3).toFixed(1),
+								(M / 1e3).toFixed(1),
 								"K"
 							]
-						}), /* @__PURE__ */ l("p", {
+						}), /* @__PURE__ */ c("p", {
 							className: "text-xs text-text-secondary",
 							children: [
 								"$",
-								(A / 1e3).toFixed(1),
+								(N / 1e3).toFixed(1),
 								"K collected"
 							]
 						})] })]
 					}),
-					/* @__PURE__ */ l(g, {
+					/* @__PURE__ */ c(h, {
 						treatment: "metric",
 						className: "border-border-seam",
-						children: [/* @__PURE__ */ l(m, {
+						children: [/* @__PURE__ */ c(p, {
 							className: "flex flex-row items-center justify-between space-y-0 pb-2",
-							children: [/* @__PURE__ */ c(h, {
+							children: [/* @__PURE__ */ s(m, {
 								className: "text-sm font-medium",
 								children: "Project Budget"
-							}), /* @__PURE__ */ c(o, { className: "h-4 w-4 text-text-secondary" })]
-						}), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ l("div", {
+							}), /* @__PURE__ */ s(a, { className: "h-4 w-4 text-text-secondary" })]
+						}), /* @__PURE__ */ c(d, { children: [/* @__PURE__ */ c("div", {
 							className: "text-2xl font-bold tabular-nums",
 							children: [
 								"$",
-								(j / 1e6).toFixed(1),
+								(P / 1e6).toFixed(1),
 								"M"
 							]
-						}), /* @__PURE__ */ l("p", {
+						}), /* @__PURE__ */ c("p", {
 							className: "text-xs text-text-secondary",
-							children: [Math.round(M / j * 100), "% utilized"]
+							children: [L, "% utilized"]
 						})] })]
 					})
 				]
 			}),
-			/* @__PURE__ */ l(d, { children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, { children: "Payroll Trend" }), /* @__PURE__ */ c(p, { children: "Monthly gross payroll over the last 6 months" })] }), /* @__PURE__ */ l(f, {
+			/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ c(p, { children: [/* @__PURE__ */ s(m, { children: "Payroll Trend" }), /* @__PURE__ */ s(f, { children: "Monthly gross payroll over the last 6 months" })] }), /* @__PURE__ */ c(d, {
 				className: "space-y-3",
-				children: [T.map((e) => /* @__PURE__ */ l("div", {
+				children: [O.map((e) => /* @__PURE__ */ c("div", {
 					className: "flex items-center gap-3",
 					children: [
-						/* @__PURE__ */ c("span", {
+						/* @__PURE__ */ s("span", {
 							className: "w-10 text-sm text-text-secondary",
 							children: e.month
 						}),
-						/* @__PURE__ */ l("div", {
+						/* @__PURE__ */ c("div", {
 							className: "flex-1 h-5 bg-bg-sunken rounded overflow-hidden flex",
-							children: [/* @__PURE__ */ c("div", {
+							children: [/* @__PURE__ */ s("div", {
 								className: "h-5 bg-action-primary-bg",
-								style: { width: `${Math.round(e.net / N * 100)}%` }
-							}), /* @__PURE__ */ c("div", {
+								style: { width: `${Math.round(e.net / I * 100)}%` }
+							}), /* @__PURE__ */ s("div", {
 								className: "h-5 bg-action-primary-bg/30",
-								style: { width: `${Math.round(e.deductions / N * 100)}%` }
+								style: { width: `${Math.round(e.deductions / I * 100)}%` }
 							})]
 						}),
-						/* @__PURE__ */ l("span", {
+						/* @__PURE__ */ c("span", {
 							className: "text-sm font-medium w-20 text-right",
 							children: [
 								"$",
@@ -199,163 +201,168 @@ function b() {
 							]
 						})
 					]
-				}, e.month)), /* @__PURE__ */ l("div", {
+				}, e.month)), /* @__PURE__ */ c("div", {
 					className: "flex items-center gap-4 mt-2 text-xs text-text-secondary",
-					children: [/* @__PURE__ */ l("div", {
+					children: [/* @__PURE__ */ c("div", {
 						className: "flex items-center gap-1",
-						children: [/* @__PURE__ */ c("div", { className: "h-3 w-3 bg-action-primary-bg rounded" }), /* @__PURE__ */ c("span", { children: "Net Pay" })]
-					}), /* @__PURE__ */ l("div", {
+						children: [/* @__PURE__ */ s("div", { className: "h-3 w-3 bg-action-primary-bg rounded" }), /* @__PURE__ */ s("span", { children: "Net Pay" })]
+					}), /* @__PURE__ */ c("div", {
 						className: "flex items-center gap-1",
-						children: [/* @__PURE__ */ c("div", { className: "h-3 w-3 bg-action-primary-bg/30 rounded" }), /* @__PURE__ */ c("span", { children: "Deductions" })]
+						children: [/* @__PURE__ */ s("div", { className: "h-3 w-3 bg-action-primary-bg/30 rounded" }), /* @__PURE__ */ s("span", { children: "Deductions" })]
 					})]
 				})]
 			})] }),
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ c("div", {
 				className: "grid gap-4 md:grid-cols-2",
-				children: [/* @__PURE__ */ l(d, { children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, { children: "Budget vs Actual" }), /* @__PURE__ */ c(p, { children: "Monthly expense tracking by category" })] }), /* @__PURE__ */ c(f, {
+				children: [/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ c(p, { children: [/* @__PURE__ */ s(m, { children: "Spend by Category" }), /* @__PURE__ */ s(f, { children: "Share of tracked workforce spend" })] }), /* @__PURE__ */ s(d, {
 					className: "space-y-4",
-					children: E.map((e) => {
-						let t = Math.round(e.amount / e.budget * 100);
-						return /* @__PURE__ */ l("div", {
-							className: "space-y-1",
-							children: [
-								/* @__PURE__ */ l("div", {
-									className: "flex justify-between text-sm",
-									children: [/* @__PURE__ */ c("span", {
-										className: "font-medium",
-										children: e.category
-									}), /* @__PURE__ */ l("span", { children: [
-										"$",
-										(e.amount / 1e3).toFixed(0),
-										"K / $",
-										(e.budget / 1e3).toFixed(0),
-										"K"
-									] })]
-								}),
-								/* @__PURE__ */ c("div", {
-									className: "h-3 bg-bg-sunken rounded overflow-hidden",
-									children: /* @__PURE__ */ c("div", {
-										className: `h-3 rounded ${t > 95 ? "bg-status-error-text" : t > 80 ? "bg-status-warning-text" : "bg-status-success-text"}`,
-										style: { width: `${t}%` }
-									})
-								}),
-								/* @__PURE__ */ l("p", {
-									className: "text-xs text-text-secondary text-right",
-									children: [t, "% utilized"]
+					children: k.map((e) => /* @__PURE__ */ c("div", {
+						className: "space-y-1",
+						children: [
+							/* @__PURE__ */ c("div", {
+								className: "flex justify-between text-sm",
+								children: [/* @__PURE__ */ c("span", {
+									className: "flex items-center gap-2 font-medium",
+									children: [/* @__PURE__ */ s(e.icon, { className: "h-4 w-4 text-text-secondary" }), e.category]
+								}), /* @__PURE__ */ c("span", { children: [
+									"$",
+									(e.amount / 1e3).toFixed(0),
+									"K"
+								] })]
+							}),
+							/* @__PURE__ */ s("div", {
+								className: "h-3 bg-bg-sunken rounded overflow-hidden",
+								children: /* @__PURE__ */ s("div", {
+									className: "h-3 rounded bg-action-primary-bg",
+									style: { width: `${e.percentage}%` }
 								})
-							]
-						}, e.category);
-					})
-				})] }), /* @__PURE__ */ l(d, { children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, { children: "Outstanding Invoices" }), /* @__PURE__ */ c(p, { children: "Invoices requiring attention" })] }), /* @__PURE__ */ c(f, {
+							}),
+							/* @__PURE__ */ c("p", {
+								className: "text-xs text-text-secondary text-right",
+								children: [e.percentage, "% of spend"]
+							})
+						]
+					}, e.category))
+				})] }), /* @__PURE__ */ c(u, { children: [/* @__PURE__ */ c(p, { children: [/* @__PURE__ */ s(m, { children: "Outstanding Invoices" }), /* @__PURE__ */ s(f, { children: "Unpaid invoices requiring attention" })] }), /* @__PURE__ */ c(d, {
 					className: "space-y-3",
-					children: C.map((e) => /* @__PURE__ */ l("div", {
-						className: "flex items-center justify-between rounded border p-3",
-						children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
-							className: "text-sm font-medium",
-							children: e.number
-						}), /* @__PURE__ */ c("p", {
-							className: "text-xs text-text-secondary",
-							children: e.clientName
-						})] }), /* @__PURE__ */ l("div", {
-							className: "text-right",
-							children: [/* @__PURE__ */ l("p", {
-								className: "text-sm font-medium",
-								children: ["$", e.amount.toLocaleString()]
-							}), /* @__PURE__ */ c(u, {
-								variant: e.status === "paid" ? "default" : e.status === "overdue" ? "destructive" : "secondary",
-								className: "text-[10px]",
-								children: e.status
-							})]
-						})]
-					}, e.id))
-				})] })]
-			}),
-			/* @__PURE__ */ l(d, { children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, { children: "Department Cost Analysis" }), /* @__PURE__ */ c(p, { children: "Total salary cost and budget allocation by department" })] }), /* @__PURE__ */ l(f, { children: [
-				/* @__PURE__ */ l("div", {
-					className: "grid grid-cols-5 gap-2 text-xs font-medium text-text-secondary border-b pb-2 mb-2",
 					children: [
-						/* @__PURE__ */ c("span", { children: "Department" }),
-						/* @__PURE__ */ c("span", {
-							className: "text-right",
-							children: "Headcount"
-						}),
-						/* @__PURE__ */ c("span", {
-							className: "text-right",
-							children: "Total Salary"
-						}),
-						/* @__PURE__ */ c("span", {
-							className: "text-right",
-							children: "Dept Budget"
+						B.length === 0 && /* @__PURE__ */ s(_, {
+							illustration: "empty-data",
+							title: "No outstanding invoices",
+							description: "Every invoice has been paid. New unpaid invoices will appear here."
 						}),
-						/* @__PURE__ */ c("span", {
-							className: "text-right",
-							children: "Salary/Budget %"
+						G.map((e) => /* @__PURE__ */ c("div", {
+							className: "flex items-center justify-between rounded border p-3",
+							children: [/* @__PURE__ */ c("div", { children: [/* @__PURE__ */ s("p", {
+								className: "text-sm font-medium",
+								children: e.number
+							}), /* @__PURE__ */ s("p", {
+								className: "text-xs text-text-secondary",
+								children: e.clientName
+							})] }), /* @__PURE__ */ c("div", {
+								className: "text-right",
+								children: [/* @__PURE__ */ c("p", {
+									className: "text-sm font-medium",
+									children: ["$", e.amount.toLocaleString()]
+								}), /* @__PURE__ */ s(l, {
+									variant: e.status === "overdue" ? "destructive" : "secondary",
+									className: "text-[10px]",
+									children: e.status
+								})]
+							})]
+						}, e.id)),
+						B.length > H && /* @__PURE__ */ s(y, {
+							page: V,
+							pageSize: H,
+							totalItems: B.length,
+							onPageChange: W
 						})
 					]
-				}),
-				P.sort((e, t) => t.salary - e.salary).map((e) => /* @__PURE__ */ l("div", {
-					className: "grid grid-cols-5 gap-2 py-2 border-b last:border-0 text-sm",
-					children: [
-						/* @__PURE__ */ c("span", {
-							className: "font-medium",
-							children: e.name
-						}),
-						/* @__PURE__ */ c("span", {
-							className: "text-right",
-							children: e.headcount
-						}),
-						/* @__PURE__ */ l("span", {
-							className: "text-right",
-							children: [
-								"$",
-								(e.salary / 1e3).toFixed(0),
-								"K"
-							]
-						}),
-						/* @__PURE__ */ l("span", {
-							className: "text-right",
-							children: [
-								"$",
-								(e.budget / 1e6).toFixed(1),
-								"M"
-							]
-						}),
-						/* @__PURE__ */ c("span", {
-							className: "text-right",
-							children: /* @__PURE__ */ l(u, {
-								variant: e.salary / e.budget > .5 ? "destructive" : "default",
-								className: "text-[10px]",
-								children: [Math.round(e.salary / e.budget * 100), "%"]
+				})] })]
+			}),
+			/* @__PURE__ */ c(u, { children: [/* @__PURE__ */ c(p, { children: [/* @__PURE__ */ s(m, { children: "Department Cost Analysis" }), /* @__PURE__ */ s(f, { children: "Total salary cost and budget allocation by department" })] }), /* @__PURE__ */ c(d, { children: [
+				/* @__PURE__ */ s(b, {
+					columns: [
+						{
+							key: "name",
+							header: "Department",
+							priority: "primary",
+							cell: (e) => /* @__PURE__ */ s("span", {
+								className: "font-medium",
+								children: e.name
 							})
-						})
-					]
-				}, e.name)),
-				/* @__PURE__ */ c(y, { className: "my-2" }),
-				/* @__PURE__ */ l("div", {
-					className: "grid grid-cols-5 gap-2 text-sm font-bold",
+						},
+						{
+							key: "headcount",
+							header: "Headcount",
+							priority: "secondary",
+							cell: (e) => /* @__PURE__ */ s("span", {
+								className: "md:block md:text-right",
+								children: e.headcount
+							})
+						},
+						{
+							key: "salary",
+							header: "Total Salary",
+							priority: "secondary",
+							cell: (e) => /* @__PURE__ */ c("span", {
+								className: "md:block md:text-right",
+								children: [
+									"$",
+									(e.salary / 1e3).toFixed(0),
+									"K"
+								]
+							})
+						},
+						{
+							key: "budget",
+							header: "Dept Budget",
+							priority: "secondary",
+							cell: (e) => /* @__PURE__ */ c("span", {
+								className: "md:block md:text-right",
+								children: [
+									"$",
+									(e.budget / 1e6).toFixed(1),
+									"M"
+								]
+							})
+						},
+						{
+							key: "ratio",
+							header: "Salary/Budget %",
+							priority: "primary",
+							cell: (e) => {
+								let t = e.budget > 0 ? Math.round(e.salary / e.budget * 100) : 0;
+								return /* @__PURE__ */ s("span", {
+									className: "md:block md:text-right",
+									children: /* @__PURE__ */ c(l, {
+										variant: t > 50 ? "destructive" : "default",
+										className: "text-[10px]",
+										children: [t, "%"]
+									})
+								});
+							}
+						}
+					],
+					data: R,
+					rowKey: (e) => e.name
+				}),
+				/* @__PURE__ */ s(x, { className: "my-3" }),
+				/* @__PURE__ */ c("div", {
+					className: "flex flex-wrap items-center justify-between gap-2 text-sm font-bold",
 					children: [
-						/* @__PURE__ */ c("span", { children: "Total" }),
-						/* @__PURE__ */ c("span", {
-							className: "text-right",
-							children: b.length
-						}),
-						/* @__PURE__ */ l("span", {
-							className: "text-right",
-							children: [
-								"$",
-								(D / 1e6).toFixed(1),
-								"M"
-							]
-						}),
-						/* @__PURE__ */ l("span", {
-							className: "text-right",
-							children: [
-								"$",
-								(x.reduce((e, t) => e + t.budget, 0) / 1e6).toFixed(1),
-								"M"
-							]
-						}),
-						/* @__PURE__ */ c("span", {})
+						/* @__PURE__ */ s("span", { children: "Total" }),
+						/* @__PURE__ */ c("span", { children: [C.length, " employees"] }),
+						/* @__PURE__ */ c("span", { children: [
+							"$",
+							(A / 1e6).toFixed(1),
+							"M salary"
+						] }),
+						/* @__PURE__ */ c("span", { children: [
+							"$",
+							(z / 1e6).toFixed(1),
+							"M budget"
+						] })
 					]
 				})
 			] })] })
@@ -363,6 +370,6 @@ function b() {
 	});
 }
 //#endregion
-export { b as AnalyticsFinancialAnalyticsPagePage };
+export { C as AnalyticsFinancialAnalyticsPagePage };
 
 //# sourceMappingURL=AnalyticsFinancialAnalyticsPagePage.js.map