@burdenoff/microfe-crewfoundry 2026.704.5 → 2026.704.7

package/dist/crewfoundry/pages/HiringJobDetailsPagePage.js

@@ -1,16 +1,20 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { formatEnumLabel as t } from "../utils/formatEnumLabel.js";
-import { FormModal as n } from "../components/forms/FormModal.js";
-import { ConfirmDialog as r } from "../components/forms/ConfirmDialog.js";
-import { getNumber as i, getTags as a, getText as o } from "../components/forms/formValues.js";
-import { useState as s } from "react";
-import { Briefcase as c, Calendar as l, CheckCircle as u, DollarSign as d, MapPin as f, Pencil as p, Share2 as m, Trash2 as h, Users as g } from "lucide-react";
-import { useNavigate as _, useSearchParams as v } from "react-router-dom";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-import { Badge as x, Button as S, Card as C, CardContent as w, CardDescription as T, CardHeader as E, CardTitle as D, GlassCard as O, GradientText as k, IllustratedEmptyState as A, NextSteps as j, PagePurpose as M, ResponsiveTable as N } from "@burdenoff/fe-libs/ui";
-import { useGlobalUi as P } from "@burdenoff/fe-libs/shared/providers/shell";
+import { getInitials as n } from "../components/viz/lib/format.js";
+import { HBarFunnel as r } from "../components/viz/HBarFunnel.js";
+import { RatingStars as i } from "../components/viz/RatingStars.js";
+import "../components/viz/index.js";
+import { FormModal as a } from "../components/forms/FormModal.js";
+import { ConfirmDialog as o } from "../components/forms/ConfirmDialog.js";
+import { getNumber as s, getTags as c, getText as l } from "../components/forms/formValues.js";
+import { useState as u } from "react";
+import { Briefcase as d, Calendar as f, CheckCircle as p, MapPin as m, Pencil as h, Share2 as g, Trash2 as ee, Users as _ } from "lucide-react";
+import { useNavigate as v, useSearchParams as y } from "react-router-dom";
+import { jsx as b, jsxs as x } from "react/jsx-runtime";
+import { Badge as S, Button as C, Card as w, CardContent as T, CardHeader as E, CardTitle as D, GlassCard as O, GradientText as k, IllustratedEmptyState as A, PagePurpose as j, Spinner as M } from "@burdenoff/fe-libs/ui";
+import { useGlobalUi as N } from "@burdenoff/fe-libs/shared/providers/shell";
 //#region src/crewfoundry/pages/HiringJobDetailsPagePage.tsx
-var F = [
+var P = [
 	{
 		name: "title",
 		label: "Job Title",
@@ -138,63 +142,63 @@ var F = [
 		label: "Benefits",
 		type: "tags"
 	}
-], I = [
-	{
-		key: "name",
-		header: "Name",
-		priority: "primary",
-		cell: (e) => /* @__PURE__ */ b("span", {
-			className: "font-medium",
-			children: [
-				e.firstName,
-				" ",
-				e.lastName
-			]
-		})
-	},
-	{
-		key: "source",
-		header: "Source",
-		priority: "secondary",
-		cell: (e) => /* @__PURE__ */ y("span", {
-			className: "text-text-secondary",
-			children: e.source
-		})
-	},
-	{
-		key: "experience",
-		header: "Experience",
-		priority: "secondary",
-		cell: (e) => /* @__PURE__ */ b("span", { children: [e.experience, " yrs"] })
-	},
-	{
-		key: "rating",
-		header: "Rating",
-		priority: "secondary",
-		cell: (e) => /* @__PURE__ */ b("span", { children: [e.rating, "/5"] })
-	},
-	{
-		key: "status",
-		header: "Status",
-		priority: "secondary",
-		cell: (e) => /* @__PURE__ */ y(x, {
-			variant: e.status === "hired" ? "default" : "secondary",
-			className: "text-[10px]",
-			children: t(e.status)
-		})
-	}
-];
+], F = {
+	new: "outline",
+	screening: "secondary",
+	interview: "secondary",
+	assessment: "secondary",
+	offer: "default",
+	hired: "default",
+	rejected: "destructive"
+};
+function I({ name: e, size: t = 32 }) {
+	return /* @__PURE__ */ b("span", {
+		className: "inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full border border-border-subtle bg-bg-sunken font-medium text-text-secondary",
+		style: {
+			width: t,
+			height: t,
+			fontSize: Math.round(t * .36)
+		},
+		"aria-hidden": "true",
+		children: n(e)
+	});
+}
 function L() {
-	let L = _(), [R] = v(), { showToast: z } = P(), { jobPostings: B, candidates: V, updateJobPosting: H, removeJobPosting: U } = e(), W = R.get("id"), G = W ? B.find((e) => e.id === W) : B[0], [K, q] = s(!1), [J, Y] = s(!1);
-	if (!G) return /* @__PURE__ */ y("div", {
+	let n = v(), [L] = y(), { showToast: R } = N(), { jobPostings: z, candidates: B, updateJobPosting: V, removeJobPosting: H, initialized: U } = e(), W = L.get("id"), G = W ? z.find((e) => e.id === W) : z[0], [K, q] = u(!1), [J, Y] = u(!1);
+	if (!U && !G) return /* @__PURE__ */ b("div", {
+		className: "flex min-h-[60vh] items-center justify-center p-6",
+		children: /* @__PURE__ */ b(M, { size: "lg" })
+	});
+	if (!G) return /* @__PURE__ */ b("div", {
 		className: "p-6",
-		children: /* @__PURE__ */ y(A, {
+		children: /* @__PURE__ */ b(A, {
 			illustration: "empty-search",
 			title: "No job posting found",
 			description: "This job posting is no longer available."
 		})
 	});
-	let X = V.filter((e) => e.position === G.title), Z = {
+	let X = G.title.trim().toLowerCase(), Z = B.filter((e) => e.position.trim().toLowerCase() === X), Q = (e) => Z.filter((t) => t.status === e).length, $ = Q("interview"), te = [
+		{
+			label: "Applied",
+			value: Z.length
+		},
+		{
+			label: "Screening",
+			value: Q("screening")
+		},
+		{
+			label: "Interview",
+			value: $
+		},
+		{
+			label: "Assessment",
+			value: Q("assessment")
+		},
+		{
+			label: "Offer",
+			value: Q("offer") + Q("hired")
+		}
+	], ne = {
 		title: G.title,
 		department: G.department,
 		location: G.location,
@@ -208,222 +212,221 @@ function L() {
 		requirements: G.requirements,
 		benefits: G.benefits
 	};
-	return /* @__PURE__ */ b("div", {
-		className: "space-y-6 p-6 max-w-4xl",
+	return /* @__PURE__ */ x("div", {
+		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ b("div", {
-				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ b("div", { children: [
-					/* @__PURE__ */ b("div", {
-						className: "flex items-center gap-2 mb-1",
-						children: [/* @__PURE__ */ y("h1", {
-							className: "text-2xl font-semibold",
-							children: /* @__PURE__ */ y(k, { children: G.title })
-						}), /* @__PURE__ */ y(x, {
-							variant: G.status === "active" ? "default" : "secondary",
-							children: t(G.status)
-						})]
-					}),
-					/* @__PURE__ */ b("div", {
-						className: "flex items-center gap-4 text-sm text-text-secondary",
+			/* @__PURE__ */ b(O, {
+				treatment: "glass",
+				glow: !0,
+				className: "border-border-seam",
+				children: /* @__PURE__ */ x(T, {
+					className: "flex flex-col gap-4 p-6 lg:flex-row lg:items-start lg:justify-between",
+					children: [/* @__PURE__ */ x("div", {
+						className: "min-w-0",
 						children: [
-							/* @__PURE__ */ b("span", {
-								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ y(c, { className: "h-3 w-3" }), G.department]
+							/* @__PURE__ */ x("div", {
+								className: "mb-1 flex flex-wrap items-center gap-2",
+								children: [/* @__PURE__ */ b("h1", {
+									className: "text-2xl font-semibold",
+									children: /* @__PURE__ */ b(k, { children: G.title })
+								}), /* @__PURE__ */ b(S, {
+									variant: G.status === "active" ? "default" : "secondary",
+									children: t(G.status)
+								})]
 							}),
-							/* @__PURE__ */ b("span", {
-								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ y(f, { className: "h-3 w-3" }), G.location]
+							/* @__PURE__ */ x("div", {
+								className: "flex flex-wrap items-center gap-x-4 gap-y-1 text-sm text-text-secondary",
+								children: [
+									/* @__PURE__ */ x("span", {
+										className: "flex items-center gap-1",
+										children: [/* @__PURE__ */ b(d, { className: "h-3.5 w-3.5" }), G.department]
+									}),
+									/* @__PURE__ */ x("span", {
+										className: "flex items-center gap-1",
+										children: [/* @__PURE__ */ b(m, { className: "h-3.5 w-3.5" }), G.location]
+									}),
+									/* @__PURE__ */ b("span", { children: t(G.type) })
+								]
 							}),
-							/* @__PURE__ */ b("span", {
-								className: "flex items-center gap-1",
+							/* @__PURE__ */ x("div", {
+								className: "mt-2 flex flex-wrap items-center gap-2 text-xs text-text-secondary",
 								children: [
-									/* @__PURE__ */ y(l, { className: "h-3 w-3" }),
-									"Posted ",
-									G.postedDate
+									/* @__PURE__ */ x(S, {
+										variant: "secondary",
+										className: "text-[10px]",
+										children: [Z.length, " applicants"]
+									}),
+									$ > 0 && /* @__PURE__ */ x(S, {
+										variant: "secondary",
+										className: "text-[10px]",
+										children: [$, " in interview"]
+									}),
+									/* @__PURE__ */ x("span", {
+										className: "flex items-center gap-1",
+										children: [
+											/* @__PURE__ */ b(f, { className: "h-3 w-3" }),
+											"Posted ",
+											G.postedDate
+										]
+									})
 								]
+							}),
+							/* @__PURE__ */ b(j, {
+								className: "mt-3",
+								children: "Everything about this role in one place — review applicants, requirements, and compensation to decide who to interview and keep the posting current."
 							})
 						]
-					}),
-					/* @__PURE__ */ y(M, {
-						className: "mt-2",
-						children: "Everything about this role in one place — review applicants, requirements, and compensation here to decide who to interview and keep the posting current."
-					})
-				] }), /* @__PURE__ */ b("div", {
-					className: "flex gap-2",
+					}), /* @__PURE__ */ x("div", {
+						className: "flex shrink-0 flex-col items-start gap-3 lg:items-end",
+						children: [/* @__PURE__ */ x("div", {
+							className: "text-2xl font-bold tabular-nums text-text-primary",
+							children: [
+								"$",
+								(G.salaryMin / 1e3).toFixed(0),
+								"k – $",
+								(G.salaryMax / 1e3).toFixed(0),
+								"k"
+							]
+						}), /* @__PURE__ */ x("div", {
+							className: "flex flex-wrap gap-2",
+							children: [
+								/* @__PURE__ */ x(C, {
+									variant: "outline",
+									size: "sm",
+									onClick: async () => {
+										try {
+											await navigator.clipboard.writeText(window.location.href), R("Job link copied to clipboard", "success");
+										} catch {
+											R("Could not copy the job link", "error");
+										}
+									},
+									children: [/* @__PURE__ */ b(g, { className: "mr-1 h-4 w-4" }), "Share"]
+								}),
+								/* @__PURE__ */ x(C, {
+									variant: "outline",
+									size: "sm",
+									onClick: () => q(!0),
+									children: [/* @__PURE__ */ b(h, { className: "mr-1 h-4 w-4" }), "Edit"]
+								}),
+								/* @__PURE__ */ b(C, {
+									variant: "destructive",
+									size: "sm",
+									"aria-label": "Delete job posting",
+									onClick: () => Y(!0),
+									children: /* @__PURE__ */ b(ee, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ x(C, {
+									size: "sm",
+									onClick: () => n(`../hiring/applications-page?position=${encodeURIComponent(G.title)}`),
+									children: [/* @__PURE__ */ b(_, { className: "mr-1 h-4 w-4" }), "View Applications"]
+								})
+							]
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ x("div", {
+				className: "grid gap-6 lg:grid-cols-3",
+				children: [/* @__PURE__ */ x("div", {
+					className: "space-y-6 lg:col-span-2",
 					children: [
-						/* @__PURE__ */ b(S, {
-							variant: "outline",
-							size: "sm",
-							onClick: () => z("Sharing job postings is coming soon", "info"),
-							children: [/* @__PURE__ */ y(m, { className: "h-4 w-4 mr-1" }), "Share"]
-						}),
-						/* @__PURE__ */ b(S, {
-							variant: "outline",
-							size: "sm",
-							onClick: () => q(!0),
-							children: [/* @__PURE__ */ y(p, { className: "h-4 w-4 mr-1" }), "Edit Posting"]
-						}),
-						/* @__PURE__ */ y(S, {
-							variant: "destructive",
-							size: "sm",
-							"aria-label": "Delete job posting",
-							onClick: () => Y(!0),
-							children: /* @__PURE__ */ y(h, { className: "h-4 w-4" })
-						})
+						/* @__PURE__ */ x(w, { children: [/* @__PURE__ */ b(E, { children: /* @__PURE__ */ b(D, { children: "Description" }) }), /* @__PURE__ */ b(T, { children: /* @__PURE__ */ b("p", {
+							className: "text-sm leading-relaxed text-text-secondary",
+							children: G.description
+						}) })] }),
+						/* @__PURE__ */ x(w, { children: [/* @__PURE__ */ b(E, { children: /* @__PURE__ */ b(D, { children: "Requirements" }) }), /* @__PURE__ */ b(T, { children: G.requirements.length === 0 ? /* @__PURE__ */ b("p", {
+							className: "text-sm text-text-muted",
+							children: "No requirements listed."
+						}) : /* @__PURE__ */ b("ul", {
+							className: "space-y-2",
+							children: G.requirements.map((e, t) => /* @__PURE__ */ x("li", {
+								className: "flex items-start gap-2 text-sm",
+								children: [/* @__PURE__ */ b(p, { className: "mt-0.5 h-4 w-4 flex-shrink-0 text-status-success-text" }), e]
+							}, t))
+						}) })] }),
+						/* @__PURE__ */ x(w, { children: [/* @__PURE__ */ b(E, { children: /* @__PURE__ */ b(D, { children: "Benefits" }) }), /* @__PURE__ */ b(T, { children: G.benefits.length === 0 ? /* @__PURE__ */ b("p", {
+							className: "text-sm text-text-muted",
+							children: "No benefits listed."
+						}) : /* @__PURE__ */ b("div", {
+							className: "flex flex-wrap gap-2",
+							children: G.benefits.map((e, t) => /* @__PURE__ */ b(S, {
+								variant: "outline",
+								className: "rounded-full px-3 py-1 text-xs",
+								children: e
+							}, t))
+						}) })] })
 					]
-				})]
-			}),
-			/* @__PURE__ */ y(j, {
-				storageKey: "crewfoundry-job-details",
-				steps: [
-					{
-						id: "applicants",
-						label: "Review applicants",
-						description: "Screen the candidates who applied for this role.",
-						icon: /* @__PURE__ */ y(g, { className: "h-4 w-4" }),
-						onClick: () => L("../hiring/applications-page")
-					},
-					{
-						id: "interviews",
-						label: "Schedule interviews",
-						description: "Set up conversations with promising candidates.",
-						icon: /* @__PURE__ */ y(l, { className: "h-4 w-4" }),
-						onClick: () => L("../hiring/interviews-page")
-					},
-					{
-						id: "candidates",
-						label: "Browse your talent pool",
-						description: "Source more candidates that fit this position.",
-						icon: /* @__PURE__ */ y(c, { className: "h-4 w-4" }),
-						onClick: () => L("../hiring/candidates-page")
-					}
-				]
-			}),
-			/* @__PURE__ */ b("div", {
-				className: "grid gap-4 md:grid-cols-4",
-				children: [
-					/* @__PURE__ */ y(O, {
-						treatment: "glass",
-						glow: !0,
-						className: "border-border-seam",
-						children: /* @__PURE__ */ b(w, {
-							className: "p-4 text-center",
+				}), /* @__PURE__ */ x("div", {
+					className: "space-y-6",
+					children: [/* @__PURE__ */ x(w, { children: [/* @__PURE__ */ b(E, { children: /* @__PURE__ */ b(D, { children: "Candidates" }) }), /* @__PURE__ */ b(T, { children: Z.length === 0 ? /* @__PURE__ */ b("p", {
+						className: "text-sm text-text-muted",
+						children: "No applicants matched to this role yet."
+					}) : /* @__PURE__ */ b("ul", {
+						className: "max-h-96 space-y-1 overflow-y-auto pr-1",
+						children: Z.map((e) => /* @__PURE__ */ x("li", {
+							className: "flex items-center gap-2 rounded-[var(--radius-input)] px-2 py-2 hover:bg-bg-sunken",
 							children: [
-								/* @__PURE__ */ y(g, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-								/* @__PURE__ */ y("p", {
-									className: "text-2xl font-bold tabular-nums",
-									children: G.applicants
+								/* @__PURE__ */ b(I, {
+									name: `${e.firstName} ${e.lastName}`,
+									size: 30
 								}),
-								/* @__PURE__ */ y("p", {
-									className: "text-xs text-text-secondary",
-									children: "Applicants"
+								/* @__PURE__ */ x("span", {
+									className: "min-w-0 flex-1 truncate text-sm font-medium text-text-primary",
+									children: [
+										e.firstName,
+										" ",
+										e.lastName
+									]
+								}),
+								/* @__PURE__ */ b(S, {
+									variant: F[e.status],
+									className: "shrink-0 text-[9px]",
+									children: t(e.status)
+								}),
+								/* @__PURE__ */ b(i, {
+									value: e.rating,
+									size: 12,
+									className: "shrink-0"
 								})
 							]
-						})
-					}),
-					/* @__PURE__ */ y(C, { children: /* @__PURE__ */ b(w, {
-						className: "p-4 text-center",
-						children: [
-							/* @__PURE__ */ y(d, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ b("p", {
-								className: "text-lg font-bold",
-								children: [
-									"$",
-									(G.salaryMin / 1e3).toFixed(0),
-									"K-$",
-									(G.salaryMax / 1e3).toFixed(0),
-									"K"
-								]
-							}),
-							/* @__PURE__ */ y("p", {
-								className: "text-xs text-text-secondary",
-								children: "Salary Range"
-							})
-						]
-					}) }),
-					/* @__PURE__ */ y(C, { children: /* @__PURE__ */ b(w, {
-						className: "p-4 text-center",
-						children: [
-							/* @__PURE__ */ y(l, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ y("p", {
-								className: "text-lg font-bold",
-								children: G.deadline
-							}),
-							/* @__PURE__ */ y("p", {
-								className: "text-xs text-text-secondary",
-								children: "Deadline"
-							})
-						]
-					}) }),
-					/* @__PURE__ */ y(C, { children: /* @__PURE__ */ b(w, {
-						className: "p-4 text-center",
-						children: [
-							/* @__PURE__ */ y(u, { className: "h-5 w-5 mx-auto text-text-secondary mb-1" }),
-							/* @__PURE__ */ y("p", {
-								className: "text-lg font-bold",
-								children: t(G.experienceLevel)
-							}),
-							/* @__PURE__ */ y("p", {
-								className: "text-xs text-text-secondary",
-								children: "Level"
-							})
-						]
-					}) })
-				]
-			}),
-			/* @__PURE__ */ b(C, { children: [/* @__PURE__ */ y(E, { children: /* @__PURE__ */ y(D, { children: "Description" }) }), /* @__PURE__ */ y(w, { children: /* @__PURE__ */ y("p", {
-				className: "text-sm text-text-secondary",
-				children: G.description
-			}) })] }),
-			/* @__PURE__ */ b("div", {
-				className: "grid gap-4 md:grid-cols-2",
-				children: [/* @__PURE__ */ b(C, { children: [/* @__PURE__ */ y(E, { children: /* @__PURE__ */ y(D, { children: "Requirements" }) }), /* @__PURE__ */ y(w, { children: /* @__PURE__ */ y("ul", {
-					className: "space-y-2",
-					children: G.requirements.map((e, t) => /* @__PURE__ */ b("li", {
-						className: "flex items-start gap-2 text-sm",
-						children: [/* @__PURE__ */ y(u, { className: "h-4 w-4 text-status-success-text mt-0.5 flex-shrink-0" }), e]
-					}, t))
-				}) })] }), /* @__PURE__ */ b(C, { children: [/* @__PURE__ */ y(E, { children: /* @__PURE__ */ y(D, { children: "Benefits" }) }), /* @__PURE__ */ y(w, { children: /* @__PURE__ */ y("ul", {
-					className: "space-y-2",
-					children: G.benefits.map((e, t) => /* @__PURE__ */ b("li", {
-						className: "flex items-start gap-2 text-sm",
-						children: [/* @__PURE__ */ y(u, { className: "h-4 w-4 text-status-info-text mt-0.5 flex-shrink-0" }), e]
-					}, t))
-				}) })] })]
+						}, e.id))
+					}) })] }), /* @__PURE__ */ x(w, { children: [/* @__PURE__ */ b(E, { children: /* @__PURE__ */ b(D, { children: "Hiring funnel" }) }), /* @__PURE__ */ b(T, { children: Z.length === 0 ? /* @__PURE__ */ b("p", {
+						className: "text-sm text-text-muted",
+						children: "The funnel appears once candidates apply to this role."
+					}) : /* @__PURE__ */ b(r, {
+						stages: te,
+						valueFormatter: (e) => String(e),
+						showConversion: !0
+					}) })] })]
+				})]
 			}),
-			X.length > 0 && /* @__PURE__ */ b(C, { children: [/* @__PURE__ */ b(E, { children: [/* @__PURE__ */ y(D, { children: "Applicants for this Role" }), /* @__PURE__ */ b(T, { children: [X.length, " candidates"] })] }), /* @__PURE__ */ y(w, { children: /* @__PURE__ */ y(N, {
-				data: X,
-				rowKey: (e) => e.id,
-				columns: I
-			}) })] }),
-			/* @__PURE__ */ y(n, {
+			/* @__PURE__ */ b(a, {
 				open: K,
 				onOpenChange: q,
 				title: "Edit Job Posting",
 				description: "Update the role details, compensation, and status.",
-				fields: F,
-				initialValues: Z,
+				fields: P,
+				initialValues: ne,
 				submitLabel: "Save changes",
 				onSubmit: async (e) => {
 					let t = {
-						title: o(e, "title"),
-						department: o(e, "department"),
-						location: o(e, "location"),
+						title: l(e, "title"),
+						department: l(e, "department"),
+						location: l(e, "location"),
 						type: e.type,
 						experienceLevel: e.experienceLevel,
 						status: e.status,
-						salaryMin: i(e, "salaryMin"),
-						salaryMax: i(e, "salaryMax"),
-						deadline: o(e, "deadline"),
-						description: o(e, "description"),
-						requirements: a(e, "requirements"),
-						benefits: a(e, "benefits")
+						salaryMin: s(e, "salaryMin"),
+						salaryMax: s(e, "salaryMax"),
+						deadline: l(e, "deadline"),
+						description: l(e, "description"),
+						requirements: c(e, "requirements"),
+						benefits: c(e, "benefits")
 					};
-					await H(G.id, t), z("Job posting updated", "success");
+					await V(G.id, t), R("Job posting updated", "success");
 				}
 			}),
-			/* @__PURE__ */ y(r, {
+			/* @__PURE__ */ b(o, {
 				open: J,
 				onOpenChange: Y,
 				title: "Delete job posting",
@@ -431,7 +434,7 @@ function L() {
 				confirmLabel: "Delete",
 				destructive: !0,
 				onConfirm: async () => {
-					await U(G.id), z("Job posting deleted", "success"), L("../hiring/jobs-page");
+					await H(G.id), R("Job posting deleted", "success"), n("../hiring/jobs-page");
 				}
 			})
 		]