@burdenoff/microfe-crewfoundry 2026.1013.1 → 2026.1029.1

package/dist/crewfoundry/pages/HiringCreateJobPagePage.js

@@ -1,10 +1,11 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { newClientId as t } from "../components/forms/formValues.js";
-import { useMemo as n, useState as r } from "react";
-import { Briefcase as i, ChevronRight as a, Plus as o, Save as s, X as c } from "lucide-react";
-import { useNavigate as l } from "react-router";
+import { localTodayString as n } from "../utils/dateUtils.js";
+import { useMemo as r, useState as i } from "react";
+import { AlertCircle as a, Briefcase as o, ChevronRight as s, Plus as c, Save as l, X as ee } from "lucide-react";
+import { useNavigate as te } from "react-router";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { Button as f, GlassCard as ee, GradientText as p, Input as m, PagePurpose as h, Textarea as g } from "@burdenoff/fe-libs/ui";
+import { Button as f, GlassCard as p, GradientText as m, Input as h, PagePurpose as ne, Textarea as g } from "@burdenoff/fe-libs/ui";
 import { useGlobalUi as _ } from "@burdenoff/fe-libs/shared/providers/shell";
 //#region src/crewfoundry/pages/HiringCreateJobPagePage.tsx
 var v = "flex h-10 w-full rounded-input border border-border-default bg-bg-surface px-3 py-2 text-sm text-text-primary transition-colors duration-200 focus-visible:border-border-focus focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50", y = "text-sm font-medium text-text-primary", b = [
@@ -20,7 +21,7 @@ var v = "flex h-10 w-full rounded-input border border-border-default bg-bg-surfa
 		label: "Contract",
 		value: "contract"
 	}
-], x = [
+], re = [
 	{
 		label: "Entry",
 		value: "entry"
@@ -42,54 +43,117 @@ var v = "flex h-10 w-full rounded-input border border-border-default bg-bg-surfa
 		value: "executive"
 	}
 ];
-function S({ htmlFor: e, children: t }) {
-	return /* @__PURE__ */ u("label", {
+function x({ htmlFor: e, required: t, children: n }) {
+	return /* @__PURE__ */ d("label", {
 		className: y,
 		htmlFor: e,
-		children: t
+		children: [n, t ? /* @__PURE__ */ u("span", {
+			className: "text-status-error-fg",
+			children: " *"
+		}) : null]
+	});
+}
+function S({ id: e, message: t }) {
+	return /* @__PURE__ */ d("p", {
+		id: e,
+		role: "alert",
+		className: "flex items-center gap-1 text-xs text-status-error-text",
+		children: [/* @__PURE__ */ u(a, {
+			className: "h-3 w-3 shrink-0",
+			"aria-hidden": !0
+		}), /* @__PURE__ */ u("span", { children: t })]
 	});
 }
 function C() {
-	let C = l(), { showToast: w } = _(), T = e((e) => e.addJobPosting), E = e((e) => e.departments), [D, O] = r(""), [k, A] = r(""), [j, te] = r(""), [M, N] = r(""), [P, F] = r("full_time"), [I, L] = r("mid"), [R, z] = r(""), [B, V] = r(""), [H, U] = r(""), [W, G] = r([""]), [K, q] = r([""]), [J, Y] = r(!1), X = n(() => Array.from(new Set(E.map((e) => e.name).filter(Boolean))).sort(), [E]), Z = () => G((e) => [...e, ""]), ne = () => q((e) => [...e, ""]), re = (e, t) => G((n) => n.map((n, r) => r === e ? t : n)), ie = (e, t) => q((n) => n.map((n, r) => r === e ? t : n)), ae = (e) => G((t) => t.filter((t, n) => n !== e)), oe = (e) => q((t) => t.filter((t, n) => n !== e)), Q = async (e) => {
-		if (J) return;
-		if (!D.trim()) {
-			w("Job Title is required", "warning");
+	let a = te(), { showToast: C } = _(), w = e((e) => e.addJobPosting), T = e((e) => e.departments), [E, D] = i(""), [O, k] = i(""), [A, j] = i(""), [M, N] = i(""), [P, ie] = i("full_time"), [F, I] = i("mid"), [L, R] = i(""), [z, B] = i(""), [V, H] = i(""), [U, W] = i([""]), [G, K] = i([""]), [q, J] = i(!1), [Y, X] = i({}), Z = (e) => {
+		X((t) => {
+			if (!(e in t)) return t;
+			let n = { ...t };
+			return delete n[e], n;
+		});
+	}, ae = n(), oe = r(() => Array.from(new Set(T.map((e) => e.name).filter(Boolean))).sort(), [T]), se = () => W((e) => [...e, ""]), ce = () => K((e) => [...e, ""]), le = (e, t) => W((n) => n.map((n, r) => r === e ? t : n)), ue = (e, t) => K((n) => n.map((n, r) => r === e ? t : n)), de = (e) => W((t) => t.filter((t, n) => n !== e)), fe = (e) => K((t) => t.filter((t, n) => n !== e)), Q = async (e) => {
+		if (q) return;
+		let r = (e, t) => {
+			C(t, "warning"), X((n) => ({
+				...n,
+				[e]: t
+			}));
+		};
+		if (!E.trim()) {
+			r("title", "Job Title is required");
+			return;
+		}
+		if (!O.trim()) {
+			r("department", "Department is required");
+			return;
+		}
+		if (V.trim() !== "" && V < n()) {
+			r("deadline", "Application Deadline cannot be a past date");
+			return;
+		}
+		if (e === "active") {
+			if (!A.trim()) {
+				r("location", "Location is required");
+				return;
+			}
+			if (!M.trim()) {
+				r("description", "Description is required");
+				return;
+			}
+		}
+		let i = L.trim() === "" ? 0 : Number(L), o = z.trim() === "" ? 0 : Number(z);
+		if (i < 0) {
+			r("salaryMin", "Salary Min cannot be negative");
+			return;
+		}
+		if (o < 0) {
+			r("salaryMax", "Salary Max cannot be negative");
+			return;
+		}
+		let s = i === 0 && o === 0;
+		if (!s && o === 0 && i > 0) {
+			r("salaryMax", "Provide Salary Max, or leave both empty");
+			return;
+		}
+		if (!s && o > 0 && i === 0) {
+			r("salaryMin", "Provide Salary Min, or leave both empty");
 			return;
 		}
-		if (!k.trim()) {
-			w("Department is required", "warning");
+		if (!s && o > 0 && o < i) {
+			r("salaryMax", "Salary Max cannot be less than Salary Min");
 			return;
 		}
-		let n = (/* @__PURE__ */ new Date()).toISOString().slice(0, 10), r = {
+		X({});
+		let c = {
 			id: t(),
-			title: D.trim(),
-			department: k.trim(),
-			location: j.trim(),
+			title: E.trim(),
+			department: O.trim(),
+			location: A.trim(),
 			type: P,
-			experienceLevel: I,
-			salaryMin: R.trim() === "" ? 0 : Number(R),
-			salaryMax: B.trim() === "" ? 0 : Number(B),
+			experienceLevel: F,
+			salaryMin: i,
+			salaryMax: o,
 			status: e,
 			applicants: 0,
-			postedDate: n,
-			deadline: H.trim() === "" ? n : H,
+			postedDate: n(),
+			deadline: V.trim() === "" ? null : V,
 			description: M.trim(),
-			requirements: W.map((e) => e.trim()).filter(Boolean),
-			benefits: K.map((e) => e.trim()).filter(Boolean)
+			requirements: U.map((e) => e.trim()).filter(Boolean),
+			benefits: G.map((e) => e.trim()).filter(Boolean)
 		};
-		Y(!0);
+		J(!0);
 		try {
-			await T(r), w(e === "draft" ? "Draft saved" : "Job published", "success"), C("../hiring/jobs-page");
+			await w(c), C(e === "draft" ? "Draft saved" : "Job published", "success"), a("../hiring/jobs-page");
 		} catch (e) {
-			w(e instanceof Error ? e.message : "Unable to save job posting", "error");
+			C(e instanceof Error ? e.message : "Unable to save job posting", "error");
 		} finally {
-			Y(!1);
+			J(!1);
 		}
 	}, $ = (e, t, n, r, i, a) => /* @__PURE__ */ d("div", {
 		className: "space-y-2",
 		children: [e.map((e, r) => /* @__PURE__ */ d("div", {
 			className: "relative",
-			children: [/* @__PURE__ */ u(m, {
+			children: [/* @__PURE__ */ u(h, {
 				className: "pr-9",
 				placeholder: a,
 				value: e,
@@ -99,7 +163,7 @@ function C() {
 				"aria-label": `Remove ${i.toLowerCase()} ${r + 1}`,
 				onClick: () => n(r),
 				className: "absolute right-2.5 top-1/2 -translate-y-1/2 rounded-sm p-0.5 text-text-secondary transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:text-text-primary",
-				children: /* @__PURE__ */ u(c, { className: "h-4 w-4" })
+				children: /* @__PURE__ */ u(ee, { className: "h-4 w-4" })
 			})]
 		}, r)), /* @__PURE__ */ d(f, {
 			variant: "link",
@@ -108,7 +172,7 @@ function C() {
 			onClick: r,
 			type: "button",
 			children: [
-				/* @__PURE__ */ u(o, { className: "h-4 w-4 mr-1" }),
+				/* @__PURE__ */ u(c, { className: "h-4 w-4 mr-1" }),
 				"Add ",
 				i
 			]
@@ -124,11 +188,11 @@ function C() {
 				children: [
 					/* @__PURE__ */ u("button", {
 						type: "button",
-						onClick: () => C("../hiring/jobs-page"),
+						onClick: () => a("../hiring/jobs-page"),
 						className: "rounded-sm transition-colors hover:text-text-primary focus-visible:outline-none focus-visible:text-text-primary",
 						children: "Hiring"
 					}),
-					/* @__PURE__ */ u(a, { className: "h-3.5 w-3.5" }),
+					/* @__PURE__ */ u(s, { className: "h-3.5 w-3.5" }),
 					/* @__PURE__ */ u("span", {
 						className: "text-text-primary",
 						children: "Post New Job"
@@ -136,17 +200,17 @@ function C() {
 				]
 			}), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h1", {
 				className: "text-2xl font-semibold",
-				children: /* @__PURE__ */ u(p, { children: "Create Job Posting" })
-			}), /* @__PURE__ */ u(h, {
+				children: /* @__PURE__ */ u(m, { children: "Create Job Posting" })
+			}), /* @__PURE__ */ u(ne, {
 				className: "mt-1",
 				children: "Create a new job posting — define the role, requirements, and compensation here to start attracting and collecting applicants."
 			})] })]
-		}), /* @__PURE__ */ d(ee, {
+		}), /* @__PURE__ */ d(p, {
 			treatment: "glass",
 			className: "max-w-5xl p-6",
 			children: [/* @__PURE__ */ d("div", {
 				className: "mb-6 flex items-center gap-2 text-lg font-semibold text-text-primary",
-				children: [/* @__PURE__ */ u(i, { className: "h-5 w-5" }), "Job details"]
+				children: [/* @__PURE__ */ u(o, { className: "h-5 w-5" }), "Job details"]
 			}), /* @__PURE__ */ d("div", {
 				className: "space-y-5",
 				children: [
@@ -154,25 +218,38 @@ function C() {
 						className: "grid grid-cols-1 gap-5 md:grid-cols-2",
 						children: [/* @__PURE__ */ d("div", {
 							className: "space-y-2",
-							children: [/* @__PURE__ */ u(S, {
-								htmlFor: "job-title",
-								children: "Job Title"
-							}), /* @__PURE__ */ u(m, {
-								id: "job-title",
-								placeholder: "e.g. Senior Frontend Developer",
-								value: D,
-								onChange: (e) => O(e.target.value)
-							})]
+							children: [
+								/* @__PURE__ */ u(x, {
+									htmlFor: "job-title",
+									required: !0,
+									children: "Job Title"
+								}),
+								/* @__PURE__ */ u(h, {
+									id: "job-title",
+									placeholder: "e.g. Senior Frontend Developer",
+									value: E,
+									"aria-invalid": !!Y.title || void 0,
+									"aria-describedby": Y.title ? "job-title-error" : void 0,
+									onChange: (e) => {
+										D(e.target.value), Z("title");
+									}
+								}),
+								Y.title ? /* @__PURE__ */ u(S, {
+									id: "job-title-error",
+									message: Y.title
+								}) : null
+							]
 						}), /* @__PURE__ */ d("div", {
 							className: "space-y-2",
-							children: [/* @__PURE__ */ u(S, {
+							children: [/* @__PURE__ */ u(x, {
 								htmlFor: "job-type",
+								required: !0,
 								children: "Employment Type"
 							}), /* @__PURE__ */ u("select", {
 								id: "job-type",
 								className: v,
 								value: P,
-								onChange: (e) => F(e.target.value),
+								onChange: (e) => ie(e.target.value),
 								children: b.map((e) => /* @__PURE__ */ u("option", {
 									value: e.value,
 									children: e.label
@@ -185,33 +262,43 @@ function C() {
 						children: [/* @__PURE__ */ d("div", {
 							className: "space-y-2",
 							children: [
-								/* @__PURE__ */ u(S, {
+								/* @__PURE__ */ u(x, {
 									htmlFor: "job-department",
+									required: !0,
 									children: "Department"
 								}),
-								/* @__PURE__ */ u(m, {
+								/* @__PURE__ */ u(h, {
 									id: "job-department",
 									list: "crewfoundry-department-options",
 									placeholder: "e.g. Engineering",
-									value: k,
-									onChange: (e) => A(e.target.value)
+									value: O,
+									"aria-invalid": !!Y.department || void 0,
+									"aria-describedby": Y.department ? "job-department-error" : void 0,
+									onChange: (e) => {
+										k(e.target.value), Z("department");
+									}
 								}),
+								Y.department ? /* @__PURE__ */ u(S, {
+									id: "job-department-error",
+									message: Y.department
+								}) : null,
 								/* @__PURE__ */ u("datalist", {
 									id: "crewfoundry-department-options",
-									children: X.map((e) => /* @__PURE__ */ u("option", { value: e }, e))
+									children: oe.map((e) => /* @__PURE__ */ u("option", { value: e }, e))
 								})
 							]
 						}), /* @__PURE__ */ d("div", {
 							className: "space-y-2",
-							children: [/* @__PURE__ */ u(S, {
+							children: [/* @__PURE__ */ u(x, {
 								htmlFor: "job-experience",
+								required: !0,
 								children: "Experience Level"
 							}), /* @__PURE__ */ u("select", {
 								id: "job-experience",
 								className: v,
-								value: I,
-								onChange: (e) => L(e.target.value),
-								children: x.map((e) => /* @__PURE__ */ u("option", {
+								value: F,
+								onChange: (e) => I(e.target.value),
+								children: re.map((e) => /* @__PURE__ */ u("option", {
 									value: e.value,
 									children: e.label
 								}, e.value))
@@ -222,54 +309,88 @@ function C() {
 						className: "grid grid-cols-1 gap-5 md:grid-cols-2",
 						children: [/* @__PURE__ */ d("div", {
 							className: "space-y-2",
-							children: [/* @__PURE__ */ u(S, {
-								htmlFor: "job-location",
-								children: "Location"
-							}), /* @__PURE__ */ u(m, {
-								id: "job-location",
-								placeholder: "e.g. San Francisco, CA",
-								value: j,
-								onChange: (e) => te(e.target.value)
-							})]
+							children: [
+								/* @__PURE__ */ u(x, {
+									htmlFor: "job-location",
+									required: !0,
+									children: "Location"
+								}),
+								/* @__PURE__ */ u(h, {
+									id: "job-location",
+									placeholder: "e.g. San Francisco, CA",
+									value: A,
+									"aria-invalid": !!Y.location || void 0,
+									"aria-describedby": Y.location ? "job-location-error" : void 0,
+									onChange: (e) => {
+										j(e.target.value), Z("location");
+									}
+								}),
+								Y.location ? /* @__PURE__ */ u(S, {
+									id: "job-location-error",
+									message: Y.location
+								}) : null
+							]
 						}), /* @__PURE__ */ d("div", {
 							className: "grid grid-cols-2 gap-4",
 							children: [/* @__PURE__ */ d("div", {
 								className: "space-y-2",
-								children: [/* @__PURE__ */ u(S, {
+								children: [/* @__PURE__ */ u(x, {
 									htmlFor: "job-salary-min",
 									children: "Salary Min"
 								}), /* @__PURE__ */ d("div", {
 									className: "relative",
-									children: [/* @__PURE__ */ u("span", {
-										className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary",
-										children: "$"
-									}), /* @__PURE__ */ u(m, {
-										id: "job-salary-min",
-										type: "number",
-										className: "pl-7",
-										placeholder: "120,000",
-										value: R,
-										onChange: (e) => z(e.target.value)
-									})]
+									children: [
+										/* @__PURE__ */ u("span", {
+											className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary",
+											children: "$"
+										}),
+										/* @__PURE__ */ u(h, {
+											id: "job-salary-min",
+											type: "number",
+											"aria-invalid": !!Y.salaryMin || void 0,
+											"aria-describedby": Y.salaryMin ? "job-salary-min-error" : void 0,
+											className: "pl-7",
+											placeholder: "120,000",
+											value: L,
+											onChange: (e) => {
+												R(e.target.value), Z("salaryMin"), Z("salaryMax");
+											}
+										}),
+										Y.salaryMin ? /* @__PURE__ */ u(S, {
+											id: "job-salary-min-error",
+											message: Y.salaryMin
+										}) : null
+									]
 								})]
 							}), /* @__PURE__ */ d("div", {
 								className: "space-y-2",
-								children: [/* @__PURE__ */ u(S, {
+								children: [/* @__PURE__ */ u(x, {
 									htmlFor: "job-salary-max",
 									children: "Salary Max"
 								}), /* @__PURE__ */ d("div", {
 									className: "relative",
-									children: [/* @__PURE__ */ u("span", {
-										className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary",
-										children: "$"
-									}), /* @__PURE__ */ u(m, {
-										id: "job-salary-max",
-										type: "number",
-										className: "pl-7",
-										placeholder: "180,000",
-										value: B,
-										onChange: (e) => V(e.target.value)
-									})]
+									children: [
+										/* @__PURE__ */ u("span", {
+											className: "pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-text-secondary",
+											children: "$"
+										}),
+										/* @__PURE__ */ u(h, {
+											id: "job-salary-max",
+											type: "number",
+											"aria-invalid": !!Y.salaryMax || void 0,
+											"aria-describedby": Y.salaryMax ? "job-salary-max-error" : void 0,
+											className: "pl-7",
+											placeholder: "180,000",
+											value: z,
+											onChange: (e) => {
+												B(e.target.value), Z("salaryMax"), Z("salaryMin");
+											}
+										}),
+										Y.salaryMax ? /* @__PURE__ */ u(S, {
+											id: "job-salary-max-error",
+											message: Y.salaryMax
+										}) : null
+									]
 								})]
 							})]
 						})]
@@ -278,29 +399,53 @@ function C() {
 						className: "grid grid-cols-1 gap-5 md:grid-cols-2",
 						children: /* @__PURE__ */ d("div", {
 							className: "space-y-2",
-							children: [/* @__PURE__ */ u(S, {
-								htmlFor: "job-deadline",
-								children: "Application Deadline"
-							}), /* @__PURE__ */ u(m, {
-								id: "job-deadline",
-								type: "date",
-								value: H,
-								onChange: (e) => U(e.target.value)
-							})]
+							children: [
+								/* @__PURE__ */ u(x, {
+									htmlFor: "job-deadline",
+									children: "Application Deadline"
+								}),
+								/* @__PURE__ */ u(h, {
+									id: "job-deadline",
+									type: "date",
+									min: ae,
+									value: V,
+									"aria-invalid": !!Y.deadline || void 0,
+									"aria-describedby": Y.deadline ? "job-deadline-error" : void 0,
+									onChange: (e) => {
+										H(e.target.value), Z("deadline");
+									}
+								}),
+								Y.deadline ? /* @__PURE__ */ u(S, {
+									id: "job-deadline-error",
+									message: Y.deadline
+								}) : null
+							]
 						})
 					}),
 					/* @__PURE__ */ d("div", {
 						className: "space-y-2",
-						children: [/* @__PURE__ */ u(S, {
-							htmlFor: "job-description",
-							children: "Description"
-						}), /* @__PURE__ */ u(g, {
-							id: "job-description",
-							placeholder: "Describe the role, responsibilities, and ideal candidate...",
-							rows: 4,
-							value: M,
-							onChange: (e) => N(e.target.value)
-						})]
+						children: [
+							/* @__PURE__ */ u(x, {
+								htmlFor: "job-description",
+								required: !0,
+								children: "Description"
+							}),
+							/* @__PURE__ */ u(g, {
+								id: "job-description",
+								placeholder: "Describe the role, responsibilities, and ideal candidate...",
+								rows: 4,
+								value: M,
+								"aria-invalid": !!Y.description || void 0,
+								"aria-describedby": Y.description ? "job-description-error" : void 0,
+								onChange: (e) => {
+									N(e.target.value), Z("description");
+								}
+							}),
+							Y.description ? /* @__PURE__ */ u(S, {
+								id: "job-description-error",
+								message: Y.description
+							}) : null
+						]
 					}),
 					/* @__PURE__ */ d("div", {
 						className: "grid grid-cols-1 gap-6 border-t border-border-subtle pt-5 md:grid-cols-2",
@@ -312,7 +457,7 @@ function C() {
 							}), /* @__PURE__ */ u("p", {
 								className: "text-xs text-text-secondary",
 								children: "List the key requirements for this role"
-							})] }), $(W, re, ae, Z, "Requirement", "e.g. 5+ years with React")]
+							})] }), $(U, le, de, se, "Requirement", "e.g. 5+ years with React")]
 						}), /* @__PURE__ */ d("div", {
 							className: "space-y-3",
 							children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("div", {
@@ -321,20 +466,20 @@ function C() {
 							}), /* @__PURE__ */ u("p", {
 								className: "text-xs text-text-secondary",
 								children: "What does this position offer?"
-							})] }), $(K, ie, oe, ne, "Benefit", "e.g. Flexible remote work")]
+							})] }), $(G, ue, fe, ce, "Benefit", "e.g. Flexible remote work")]
 						})]
 					}),
 					/* @__PURE__ */ d("div", {
 						className: "flex flex-col-reverse justify-end gap-2 border-t border-border-subtle pt-5 sm:flex-row",
 						children: [/* @__PURE__ */ u(f, {
 							variant: "outline",
-							disabled: J,
+							disabled: q,
 							onClick: () => Q("draft"),
 							children: "Save as Draft"
 						}), /* @__PURE__ */ d(f, {
-							disabled: J,
+							disabled: q,
 							onClick: () => Q("active"),
-							children: [/* @__PURE__ */ u(s, { className: "h-4 w-4 mr-1" }), J ? "Saving…" : "Publish Job"]
+							children: [/* @__PURE__ */ u(l, { className: "h-4 w-4 mr-1" }), q ? "Saving…" : "Publish Job"]
 						})]
 					})
 				]