@burdenoff/microfe-crewfoundry 2026.703.2 → 2026.704.1

package/dist/crewfoundry/pages/DashboardEnhancedDashboardPagePage.js

@@ -1,182 +1,194 @@
 import { useCrewFoundry as e } from "../providers/CrewFoundryProvider.js";
 import { useCrewFoundryStore as t } from "../store/crewfoundryStore.js";
 import { useMemo as n, useState as r } from "react";
-import { AlertTriangle as i, ArrowUpRight as a, Award as o, Bell as s, Briefcase as c, CheckCircle as l, MapPin as u, Star as d, Users as f, Zap as p } from "lucide-react";
-import { useNavigate as m } from "react-router-dom";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import { Badge as _, Button as v, Card as y, CardContent as b, CardDescription as x, CardHeader as S, CardTitle as C, EmphasisPanel as w, GradientText as T, NextSteps as E, PagePurpose as D, Separator as O } from "@burdenoff/fe-libs/ui";
-import { useGlobalUi as k } from "@burdenoff/fe-libs/shared/providers/shell";
+import { AlertTriangle as i, ArrowUpRight as a, Award as o, Bell as s, Briefcase as c, CheckCircle as l, MapPin as ee, Star as te, Users as u, Zap as d } from "lucide-react";
+import { useNavigate as f } from "react-router-dom";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Badge as h, Button as g, Card as _, CardContent as v, CardDescription as y, CardHeader as b, CardTitle as x, EmphasisPanel as S, GradientText as C, NextSteps as w, PagePurpose as T, ResponsiveTable as E, Separator as D } from "@burdenoff/fe-libs/ui";
+import { useGlobalUi as O } from "@burdenoff/fe-libs/shared/providers/shell";
 //#region src/crewfoundry/pages/DashboardEnhancedDashboardPagePage.tsx
-function A() {
-	let A = m(), { showToast: j } = k(), { currentUser: M } = e(), { employees: N, jobPostings: P, candidates: F, interviews: I, leaveRequests: L, notifications: R, projects: z, announcements: B, updateLeaveRequest: V } = t(), [H, U] = r(null), W = M?.name || [M?.firstName, M?.lastName].filter(Boolean).join(" ") || M?.email || "Manager", G = async (e, t) => {
+function k() {
+	let k = f(), { showToast: A } = O(), { currentUser: j } = e(), { employees: M, jobPostings: N, candidates: P, interviews: F, leaveRequests: I, notifications: L, projects: R, announcements: z, updateLeaveRequest: B, markAllNotificationsRead: V } = t(), [H, U] = r(null), [W, G] = r(!1), K = async () => {
+		G(!0);
+		try {
+			await V(), A("All notifications marked as read", "success");
+		} catch (e) {
+			A(e instanceof Error ? e.message : "Unable to update notifications", "error");
+		} finally {
+			G(!1);
+		}
+	}, q = j?.name || [j?.firstName, j?.lastName].filter(Boolean).join(" ") || j?.email || "Manager", J = async (e, t) => {
 		U(e);
 		try {
-			await V(e, {
+			await B(e, {
 				status: t,
-				approverName: W
-			}), j(t === "approved" ? "Leave approved" : "Leave rejected", "success");
+				approverName: q
+			}), A(t === "approved" ? "Leave approved" : "Leave rejected", "success");
 		} catch (e) {
-			j(e instanceof Error ? e.message : "Unable to update leave request", "error");
+			A(e instanceof Error ? e.message : "Unable to update leave request", "error");
 		} finally {
 			U(null);
 		}
-	}, K = n(() => [
+	}, Y = n(() => [
 		{
-			label: `Post New Job (${P.filter((e) => e.status === "active").length} active)`,
+			label: `Post New Job (${N.filter((e) => e.status === "active").length} active)`,
 			icon: c,
 			color: "text-status-info-text",
 			to: "../../hiring/create-job-page"
 		},
 		{
-			label: `Review Candidates (${F.filter((e) => e.status === "new").length})`,
-			icon: f,
+			label: `Review Candidates (${P.filter((e) => e.status === "new").length})`,
+			icon: u,
 			color: "text-action-primary-bg",
 			to: "../../hiring/candidates-page"
 		},
 		{
-			label: `Approve Leaves (${L.filter((e) => e.status === "pending").length})`,
+			label: `Approve Leaves (${I.filter((e) => e.status === "pending").length})`,
 			icon: l,
 			color: "text-status-success-text",
 			to: "../../hr/leave-management-page"
 		},
 		{
-			label: `Run Payroll (${z.filter((e) => e.status === "active").length} projects)`,
-			icon: p,
+			label: `Run Payroll (${R.filter((e) => e.status === "active").length} projects)`,
+			icon: d,
 			color: "text-status-warning-text",
 			to: "../../hr/payroll-page"
 		}
 	], [
-		F,
 		P,
-		L,
-		z
-	]), q = n(() => [
-		{
-			goal: "Reduce time-to-hire to 25 days",
-			current: Math.max(20, 40 - F.filter((e) => e.status === "hired").length),
-			target: 25,
-			unit: "days"
-		},
-		{
-			goal: "Achieve 95% employee satisfaction",
-			current: Math.round(N.reduce((e, t) => e + t.performanceScore, 0) / Math.max(N.length, 1) * 20),
-			target: 95,
-			unit: "%"
-		},
-		{
-			goal: "Fill 30 open positions by Q2",
-			current: F.filter((e) => e.status === "hired").length,
-			target: 30,
-			unit: "positions"
-		},
-		{
-			goal: "Complete 80% training compliance",
-			current: Math.min(100, 60 + Math.round(N.filter((e) => e.status === "active").length / Math.max(N.length, 1) * 30)),
-			target: 80,
-			unit: "%"
-		}
-	], [F, N]), J = I.filter((e) => e.status === "scheduled"), Y = L.filter((e) => e.status === "pending"), X = R.filter((e) => !e.read), Z = B.filter((e) => e.isPinned), Q = [...N].sort((e, t) => t.performanceScore - e.performanceScore).slice(0, 5), $ = [...N].sort((e, t) => t.startDate.localeCompare(e.startDate)).slice(0, 5), ee = N.reduce((e, t) => (e[t.location] = (e[t.location] || 0) + 1, e), {});
-	return /* @__PURE__ */ g("div", {
+		N,
+		I,
+		R
+	]), X = n(() => {
+		let e = P.filter((e) => e.status === "hired").length, t = M.reduce((e, t) => e + t.performanceScore, 0) / Math.max(M.length, 1), n = Math.round(M.filter((e) => e.status === "active").length / Math.max(M.length, 1) * 100);
+		return [
+			{
+				goal: "Fill 30 open positions",
+				current: e,
+				target: 30,
+				unit: "positions"
+			},
+			{
+				goal: "Reach 90% average performance",
+				current: Math.round(t * 20),
+				target: 90,
+				unit: "%"
+			},
+			{
+				goal: "Keep 95% of workforce active",
+				current: n,
+				target: 95,
+				unit: "%"
+			}
+		];
+	}, [P, M]), Z = F.filter((e) => e.status === "scheduled"), ne = I.filter((e) => e.status === "pending"), Q = L.filter((e) => !e.read), $ = z.filter((e) => e.isPinned), re = [...M].sort((e, t) => t.performanceScore - e.performanceScore).slice(0, 5), ie = [...M].sort((e, t) => t.startDate.localeCompare(e.startDate)).slice(0, 5), ae = M.reduce((e, t) => (e[t.location] = (e[t.location] || 0) + 1, e), {});
+	return /* @__PURE__ */ m("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ m("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ g("div", { children: [
-					/* @__PURE__ */ h("h1", {
+				children: [/* @__PURE__ */ m("div", { children: [
+					/* @__PURE__ */ p("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ h(T, { children: "Enhanced Dashboard" })
+						children: /* @__PURE__ */ p(C, { children: "Enhanced Dashboard" })
 					}),
-					/* @__PURE__ */ h("p", {
+					/* @__PURE__ */ p("p", {
 						className: "text-sm text-text-secondary",
 						children: "Complete workforce command center"
 					}),
-					/* @__PURE__ */ h(D, {
+					/* @__PURE__ */ p(T, {
 						className: "mt-1",
 						children: "A richer, customizable command center for your workforce — see live metrics, activity, and trends tailored to how you run your organization."
 					})
-				] }), /* @__PURE__ */ g("div", {
+				] }), /* @__PURE__ */ m("div", {
 					className: "flex items-center gap-3",
-					children: [/* @__PURE__ */ g("div", {
+					children: [/* @__PURE__ */ m(g, {
+						variant: "ghost",
+						size: "icon",
 						className: "relative",
-						children: [/* @__PURE__ */ h(s, { className: "h-5 w-5 text-text-secondary" }), X.length > 0 && /* @__PURE__ */ h("span", {
-							className: "absolute -top-1 -right-1 h-4 w-4 rounded-full bg-status-error-text text-[10px] text-white flex items-center justify-center",
-							children: X.length
+						disabled: Q.length === 0 || W,
+						"aria-label": Q.length > 0 ? `${Q.length} unread notifications, mark all as read` : "No unread notifications",
+						title: Q.length > 0 ? "Mark all notifications as read" : "No unread notifications",
+						onClick: () => void K(),
+						children: [/* @__PURE__ */ p(s, { className: "h-5 w-5 text-text-secondary" }), Q.length > 0 && /* @__PURE__ */ p("span", {
+							className: "absolute -top-1 -right-1 h-4 w-4 rounded-full bg-status-error-text text-[10px] text-text-inverse flex items-center justify-center",
+							children: Q.length
 						})]
-					}), /* @__PURE__ */ g(v, {
+					}), /* @__PURE__ */ m(g, {
 						size: "sm",
-						onClick: () => A("../../hr/leave-management-page"),
-						children: [/* @__PURE__ */ h(p, { className: "h-4 w-4 mr-1" }), "Quick Actions"]
+						onClick: () => k("../../hr/leave-management-page"),
+						children: [/* @__PURE__ */ p(d, { className: "h-4 w-4 mr-1" }), "Quick Actions"]
 					})]
 				})]
 			}),
-			/* @__PURE__ */ h(E, {
+			/* @__PURE__ */ p(w, {
 				storageKey: "crewfoundry-enhanced-dashboard",
 				steps: [
 					{
 						id: "hiring",
 						label: "Move hiring forward",
 						description: "Review open roles and applicants in your pipeline.",
-						icon: /* @__PURE__ */ h(c, { className: "h-4 w-4" }),
-						onClick: () => A("../../hiring/jobs-page")
+						icon: /* @__PURE__ */ p(c, { className: "h-4 w-4" }),
+						onClick: () => k("../../hiring/jobs-page")
 					},
 					{
 						id: "people",
 						label: "Check on your people",
 						description: "See who is active, on leave, or needs attention.",
-						icon: /* @__PURE__ */ h(f, { className: "h-4 w-4" }),
-						onClick: () => A("../../hr/employees-page")
+						icon: /* @__PURE__ */ p(u, { className: "h-4 w-4" }),
+						onClick: () => k("../../hr/employees-page")
 					},
 					{
 						id: "analytics",
 						label: "Dig into analytics",
 						description: "Explore deeper workforce and hiring trends.",
-						icon: /* @__PURE__ */ h(a, { className: "h-4 w-4" }),
-						onClick: () => A("../../analytics/analytics-page")
+						icon: /* @__PURE__ */ p(a, { className: "h-4 w-4" }),
+						onClick: () => k("../../analytics/analytics-page")
 					}
 				]
 			}),
-			/* @__PURE__ */ h("div", {
+			/* @__PURE__ */ p("div", {
 				className: "grid gap-3 md:grid-cols-4",
-				children: K.map((e) => /* @__PURE__ */ h(y, {
+				children: Y.map((e) => /* @__PURE__ */ p(_, {
 					role: "button",
 					tabIndex: 0,
 					"aria-label": e.label,
 					className: "cursor-pointer hover:shadow-md transition-shadow",
-					onClick: () => A(e.to),
+					onClick: () => k(e.to),
 					onKeyDown: (t) => {
-						(t.key === "Enter" || t.key === " ") && (t.preventDefault(), A(e.to));
+						(t.key === "Enter" || t.key === " ") && (t.preventDefault(), k(e.to));
 					},
-					children: /* @__PURE__ */ g(b, {
+					children: /* @__PURE__ */ m(v, {
 						className: "flex items-center gap-3 p-4",
 						children: [
-							/* @__PURE__ */ h(e.icon, { className: `h-5 w-5 ${e.color}` }),
-							/* @__PURE__ */ h("span", {
+							/* @__PURE__ */ p(e.icon, { className: `h-5 w-5 ${e.color}` }),
+							/* @__PURE__ */ p("span", {
 								className: "text-sm font-medium",
 								children: e.label
 							}),
-							/* @__PURE__ */ h(a, { className: "h-4 w-4 ml-auto text-text-secondary" })
+							/* @__PURE__ */ p(a, { className: "h-4 w-4 ml-auto text-text-secondary" })
 						]
 					})
 				}, e.label))
 			}),
-			Z.length > 0 && /* @__PURE__ */ h(y, {
+			$.length > 0 && /* @__PURE__ */ p(_, {
 				className: "border-status-warning-text/30 bg-status-warning-bg/50",
-				children: /* @__PURE__ */ h(b, {
+				children: /* @__PURE__ */ p(v, {
 					className: "p-4",
-					children: Z.map((e) => /* @__PURE__ */ g("div", {
+					children: $.map((e) => /* @__PURE__ */ m("div", {
 						className: "flex items-start gap-3",
 						children: [
-							/* @__PURE__ */ h(i, { className: "h-4 w-4 text-status-warning-text mt-0.5" }),
-							/* @__PURE__ */ g("div", { children: [
-								/* @__PURE__ */ h("p", {
+							/* @__PURE__ */ p(i, { className: "h-4 w-4 text-status-warning-text mt-0.5" }),
+							/* @__PURE__ */ m("div", { children: [
+								/* @__PURE__ */ p("p", {
 									className: "text-sm font-medium",
 									children: e.title
 								}),
-								/* @__PURE__ */ g("p", {
+								/* @__PURE__ */ m("p", {
 									className: "text-xs text-text-secondary mt-1",
 									children: [e.content.slice(0, 120), "..."]
 								}),
-								/* @__PURE__ */ g("p", {
+								/* @__PURE__ */ m("p", {
 									className: "text-xs text-text-secondary mt-1",
 									children: [
 										"— ",
@@ -186,7 +198,7 @@ function A() {
 									]
 								})
 							] }),
-							/* @__PURE__ */ h(_, {
+							/* @__PURE__ */ p(h, {
 								variant: "outline",
 								className: "ml-auto flex-shrink-0",
 								children: e.priority
@@ -195,30 +207,30 @@ function A() {
 					}, e.id))
 				})
 			}),
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ m("div", {
 				className: "grid gap-4 md:grid-cols-3",
 				children: [
-					/* @__PURE__ */ g(w, { children: [
-						/* @__PURE__ */ h("div", {
+					/* @__PURE__ */ m(S, { children: [
+						/* @__PURE__ */ p("div", {
 							className: "text-base font-semibold",
 							children: "Company Goals"
 						}),
-						/* @__PURE__ */ h("p", {
+						/* @__PURE__ */ p("p", {
 							className: "mb-4 text-sm text-text-secondary",
 							children: "Q1 2026 targets"
 						}),
-						/* @__PURE__ */ h("div", {
+						/* @__PURE__ */ p("div", {
 							className: "space-y-4",
-							children: q.map((e) => {
+							children: X.map((e) => {
 								let t = Math.round(e.current / e.target * 100);
-								return /* @__PURE__ */ g("div", {
+								return /* @__PURE__ */ m("div", {
 									className: "space-y-1",
-									children: [/* @__PURE__ */ g("div", {
+									children: [/* @__PURE__ */ m("div", {
 										className: "flex justify-between text-xs",
-										children: [/* @__PURE__ */ h("span", {
+										children: [/* @__PURE__ */ p("span", {
 											className: "text-text-secondary",
 											children: e.goal
-										}), /* @__PURE__ */ g("span", {
+										}), /* @__PURE__ */ m("span", {
 											className: "font-medium",
 											children: [
 												e.current,
@@ -228,9 +240,9 @@ function A() {
 												e.unit
 											]
 										})]
-									}), /* @__PURE__ */ h("div", {
+									}), /* @__PURE__ */ p("div", {
 										className: "h-2 bg-bg-sunken rounded overflow-hidden",
-										children: /* @__PURE__ */ h("div", {
+										children: /* @__PURE__ */ p("div", {
 											className: `h-2 rounded ${t >= 90 ? "bg-status-success-text" : t >= 70 ? "bg-status-warning-text" : "bg-status-error-text"}`,
 											style: { width: `${Math.min(t, 100)}%` }
 										})
@@ -239,35 +251,35 @@ function A() {
 							})
 						})
 					] }),
-					/* @__PURE__ */ g(y, { children: [/* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h(C, {
+					/* @__PURE__ */ m(_, { children: [/* @__PURE__ */ m(b, { children: [/* @__PURE__ */ p(x, {
 						className: "text-base",
 						children: "Upcoming Interviews"
-					}), /* @__PURE__ */ g(x, { children: [J.length, " scheduled"] })] }), /* @__PURE__ */ h(b, {
+					}), /* @__PURE__ */ m(y, { children: [Z.length, " scheduled"] })] }), /* @__PURE__ */ p(v, {
 						className: "space-y-3",
-						children: J.map((e) => /* @__PURE__ */ g("div", {
+						children: Z.map((e) => /* @__PURE__ */ m("div", {
 							className: "flex items-center gap-3 rounded border p-2",
 							children: [
-								/* @__PURE__ */ g("div", {
+								/* @__PURE__ */ m("div", {
 									className: "flex-1 min-w-0",
-									children: [/* @__PURE__ */ h("p", {
+									children: [/* @__PURE__ */ p("p", {
 										className: "text-sm font-medium truncate",
 										children: e.candidateName
-									}), /* @__PURE__ */ h("p", {
+									}), /* @__PURE__ */ p("p", {
 										className: "text-xs text-text-secondary",
 										children: e.position
 									})]
 								}),
-								/* @__PURE__ */ g("div", {
+								/* @__PURE__ */ m("div", {
 									className: "text-right flex-shrink-0",
-									children: [/* @__PURE__ */ h("p", {
+									children: [/* @__PURE__ */ p("p", {
 										className: "text-xs font-medium",
 										children: e.date
-									}), /* @__PURE__ */ h("p", {
+									}), /* @__PURE__ */ p("p", {
 										className: "text-xs text-text-secondary",
 										children: e.time
 									})]
 								}),
-								/* @__PURE__ */ h(_, {
+								/* @__PURE__ */ p(h, {
 									variant: "outline",
 									className: "text-[10px]",
 									children: e.type
@@ -275,18 +287,18 @@ function A() {
 							]
 						}, e.id))
 					})] }),
-					/* @__PURE__ */ g(y, { children: [/* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h(C, {
+					/* @__PURE__ */ m(_, { children: [/* @__PURE__ */ m(b, { children: [/* @__PURE__ */ p(x, {
 						className: "text-base",
 						children: "Pending Actions"
-					}), /* @__PURE__ */ h(x, { children: "Items requiring your attention" })] }), /* @__PURE__ */ g(b, {
+					}), /* @__PURE__ */ p(y, { children: "Items requiring your attention" })] }), /* @__PURE__ */ m(v, {
 						className: "space-y-3",
 						children: [
-							Y.map((e) => /* @__PURE__ */ g("div", {
+							ne.map((e) => /* @__PURE__ */ m("div", {
 								className: "flex items-center justify-between rounded border p-2",
-								children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("p", {
+								children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
 									className: "text-sm font-medium",
 									children: e.employeeName
-								}), /* @__PURE__ */ g("p", {
+								}), /* @__PURE__ */ m("p", {
 									className: "text-xs text-text-secondary",
 									children: [
 										e.type,
@@ -294,57 +306,57 @@ function A() {
 										e.days,
 										" days"
 									]
-								})] }), /* @__PURE__ */ g("div", {
+								})] }), /* @__PURE__ */ m("div", {
 									className: "flex gap-1",
-									children: [/* @__PURE__ */ h(v, {
+									children: [/* @__PURE__ */ p(g, {
 										size: "sm",
 										variant: "outline",
 										className: "h-7 text-xs",
 										disabled: H === e.id,
-										onClick: () => void G(e.id, "rejected"),
+										onClick: () => void J(e.id, "rejected"),
 										children: "Deny"
-									}), /* @__PURE__ */ h(v, {
+									}), /* @__PURE__ */ p(g, {
 										size: "sm",
 										className: "h-7 text-xs",
 										disabled: H === e.id,
-										onClick: () => void G(e.id, "approved"),
+										onClick: () => void J(e.id, "approved"),
 										children: "Approve"
 									})]
 								})]
 							}, e.id)),
-							/* @__PURE__ */ h(O, {}),
-							/* @__PURE__ */ g("div", {
+							/* @__PURE__ */ p(D, {}),
+							/* @__PURE__ */ m("div", {
 								className: "text-xs text-text-secondary text-center",
-								children: [F.filter((e) => e.status === "new").length, " new applications to review"]
+								children: [P.filter((e) => e.status === "new").length, " new applications to review"]
 							})
 						]
 					})] })
 				]
 			}),
-			/* @__PURE__ */ g("div", {
+			/* @__PURE__ */ m("div", {
 				className: "grid gap-4 md:grid-cols-2",
-				children: [/* @__PURE__ */ g(y, { children: [/* @__PURE__ */ h(S, { children: /* @__PURE__ */ g(C, {
+				children: [/* @__PURE__ */ m(_, { children: [/* @__PURE__ */ p(b, { children: /* @__PURE__ */ m(x, {
 					className: "text-base flex items-center gap-2",
-					children: [/* @__PURE__ */ h(o, { className: "h-4 w-4 text-status-warning-text" }), "Top Performers"]
-				}) }), /* @__PURE__ */ h(b, {
+					children: [/* @__PURE__ */ p(o, { className: "h-4 w-4 text-status-warning-text" }), "Top Performers"]
+				}) }), /* @__PURE__ */ p(v, {
 					className: "space-y-3",
-					children: Q.map((e, t) => /* @__PURE__ */ g("div", {
+					children: re.map((e, t) => /* @__PURE__ */ m("div", {
 						className: "flex items-center gap-3",
 						children: [
-							/* @__PURE__ */ g("span", {
+							/* @__PURE__ */ m("span", {
 								className: "text-sm font-bold text-text-secondary w-5",
 								children: ["#", t + 1]
 							}),
-							/* @__PURE__ */ g("div", {
+							/* @__PURE__ */ m("div", {
 								className: "flex-1",
-								children: [/* @__PURE__ */ g("p", {
+								children: [/* @__PURE__ */ m("p", {
 									className: "text-sm font-medium",
 									children: [
 										e.firstName,
 										" ",
 										e.lastName
 									]
-								}), /* @__PURE__ */ g("p", {
+								}), /* @__PURE__ */ m("p", {
 									className: "text-xs text-text-secondary",
 									children: [
 										e.position,
@@ -353,35 +365,35 @@ function A() {
 									]
 								})]
 							}),
-							/* @__PURE__ */ g("div", {
+							/* @__PURE__ */ m("div", {
 								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ h(d, { className: "h-3 w-3 text-status-warning-text" }), /* @__PURE__ */ h("span", {
+								children: [/* @__PURE__ */ p(te, { className: "h-3 w-3 text-status-warning-text" }), /* @__PURE__ */ p("span", {
 									className: "text-sm font-medium",
 									children: e.performanceScore
 								})]
 							})
 						]
 					}, e.id))
-				})] }), /* @__PURE__ */ g(y, { children: [/* @__PURE__ */ h(S, { children: /* @__PURE__ */ g(C, {
+				})] }), /* @__PURE__ */ m(_, { children: [/* @__PURE__ */ p(b, { children: /* @__PURE__ */ m(x, {
 					className: "text-base flex items-center gap-2",
-					children: [/* @__PURE__ */ h(u, { className: "h-4 w-4" }), "Workforce Locations"]
-				}) }), /* @__PURE__ */ h(b, {
+					children: [/* @__PURE__ */ p(ee, { className: "h-4 w-4" }), "Workforce Locations"]
+				}) }), /* @__PURE__ */ p(v, {
 					className: "space-y-3",
-					children: Object.entries(ee).sort(([, e], [, t]) => t - e).map(([e, t]) => /* @__PURE__ */ g("div", {
+					children: Object.entries(ae).sort(([, e], [, t]) => t - e).map(([e, t]) => /* @__PURE__ */ m("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ h("span", {
+						children: [/* @__PURE__ */ p("span", {
 							className: "text-sm",
 							children: e
-						}), /* @__PURE__ */ g("div", {
+						}), /* @__PURE__ */ m("div", {
 							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ h("span", {
+							children: [/* @__PURE__ */ p("span", {
 								className: "text-sm font-medium",
 								children: t
-							}), /* @__PURE__ */ g("span", {
+							}), /* @__PURE__ */ m("span", {
 								className: "text-xs text-text-secondary",
 								children: [
 									"(",
-									Math.round(t / N.length * 100),
+									Math.round(t / Math.max(M.length, 1) * 100),
 									"%)"
 								]
 							})]
@@ -389,48 +401,69 @@ function A() {
 					}, e))
 				})] })]
 			}),
-			/* @__PURE__ */ g(y, { children: [/* @__PURE__ */ g(S, { children: [/* @__PURE__ */ h(C, { children: "Recent Hires" }), /* @__PURE__ */ h(x, { children: "Newest team members" })] }), /* @__PURE__ */ g(b, { children: [/* @__PURE__ */ g("div", {
-				className: "grid grid-cols-6 gap-2 text-xs font-medium text-text-secondary border-b pb-2 mb-2",
-				children: [
-					/* @__PURE__ */ h("span", { children: "Name" }),
-					/* @__PURE__ */ h("span", { children: "Position" }),
-					/* @__PURE__ */ h("span", { children: "Department" }),
-					/* @__PURE__ */ h("span", { children: "Location" }),
-					/* @__PURE__ */ h("span", { children: "Start Date" }),
-					/* @__PURE__ */ h("span", { children: "Type" })
-				]
-			}), $.map((e) => /* @__PURE__ */ g("div", {
-				className: "grid grid-cols-6 gap-2 py-2 border-b last:border-0 text-sm",
-				children: [
-					/* @__PURE__ */ g("span", {
-						className: "font-medium",
-						children: [
-							e.firstName,
-							" ",
-							e.lastName
-						]
-					}),
-					/* @__PURE__ */ h("span", {
-						className: "text-text-secondary truncate",
-						children: e.position
-					}),
-					/* @__PURE__ */ h("span", { children: e.department }),
-					/* @__PURE__ */ h("span", {
-						className: "text-text-secondary truncate",
-						children: e.location
-					}),
-					/* @__PURE__ */ h("span", { children: e.startDate }),
-					/* @__PURE__ */ h(_, {
-						variant: "outline",
-						className: "w-fit text-[10px]",
-						children: e.type.replace("_", " ")
-					})
-				]
-			}, e.id))] })] })
+			/* @__PURE__ */ m(_, { children: [/* @__PURE__ */ m(b, { children: [/* @__PURE__ */ p(x, { children: "Recent Hires" }), /* @__PURE__ */ p(y, { children: "Newest team members" })] }), /* @__PURE__ */ p(v, { children: /* @__PURE__ */ p(E, {
+				columns: [
+					{
+						key: "name",
+						header: "Name",
+						priority: "primary",
+						cell: (e) => /* @__PURE__ */ m("span", {
+							className: "font-medium",
+							children: [
+								e.firstName,
+								" ",
+								e.lastName
+							]
+						})
+					},
+					{
+						key: "position",
+						header: "Position",
+						priority: "secondary",
+						cell: (e) => /* @__PURE__ */ p("span", {
+							className: "text-text-secondary",
+							children: e.position
+						})
+					},
+					{
+						key: "department",
+						header: "Department",
+						priority: "secondary",
+						cell: (e) => /* @__PURE__ */ p("span", { children: e.department })
+					},
+					{
+						key: "location",
+						header: "Location",
+						priority: "hidden-on-mobile",
+						cell: (e) => /* @__PURE__ */ p("span", {
+							className: "text-text-secondary",
+							children: e.location
+						})
+					},
+					{
+						key: "startDate",
+						header: "Start Date",
+						priority: "secondary",
+						cell: (e) => /* @__PURE__ */ p("span", { children: e.startDate })
+					},
+					{
+						key: "type",
+						header: "Type",
+						priority: "primary",
+						cell: (e) => /* @__PURE__ */ p(h, {
+							variant: "outline",
+							className: "w-fit text-[10px]",
+							children: e.type.replace("_", " ")
+						})
+					}
+				],
+				data: ie,
+				rowKey: (e) => e.id
+			}) })] })
 		]
 	});
 }
 //#endregion
-export { A as DashboardEnhancedDashboardPagePage };
+export { k as DashboardEnhancedDashboardPagePage };
 
 //# sourceMappingURL=DashboardEnhancedDashboardPagePage.js.map