@burdenoff/microfe-crewfoundry 2026.704.6 → 2026.704.7

package/dist/crewfoundry/pages/CompanyVendorManagementPagePage.js

@@ -1,13 +1,19 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { formatEnumLabel as t } from "../utils/formatEnumLabel.js";
-import { FormModal as n, useFormModal as r } from "../components/forms/FormModal.js";
-import { useState as i } from "react";
-import { Mail as a, Pencil as o, Plus as s, Search as c, Star as ee, Trash2 as l } from "lucide-react";
-import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { AlertDialog as f, AlertDialogAction as p, AlertDialogCancel as m, AlertDialogContent as h, AlertDialogDescription as g, AlertDialogFooter as _, AlertDialogHeader as v, AlertDialogTitle as y, AlertDialogTrigger as b, Badge as x, Button as S, CardContent as C, CardHeader as w, CardTitle as T, GlassCard as E, GradientText as D, IllustratedEmptyState as O, Input as k, PagePurpose as A, Pagination as j, Select as M, SelectContent as N, SelectItem as P, SelectTrigger as te, SelectValue as F } from "@burdenoff/fe-libs/ui";
-import { usePagination as I } from "@burdenoff/fe-libs/shared/hooks";
+import { StatCard as n } from "../components/viz/StatCard.js";
+import { AvatarStack as r } from "../components/viz/AvatarStack.js";
+import { SegmentedTabs as ee } from "../components/viz/SegmentedTabs.js";
+import "../components/viz/index.js";
+import { FormModal as te, useFormModal as i } from "../components/forms/FormModal.js";
+import { thisQuarterRevenue as a, totalContractValue as o } from "../lib/companyFinance.js";
+import { useState as s } from "react";
+import { Mail as c, MoreHorizontal as l, Pencil as u, Plus as d, Search as f, Star as ne, Trash2 as re } from "lucide-react";
+import { useNavigate as ie } from "react-router-dom";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { AlertDialog as ae, AlertDialogAction as oe, AlertDialogCancel as se, AlertDialogContent as ce, AlertDialogDescription as le, AlertDialogFooter as h, AlertDialogHeader as g, AlertDialogTitle as _, Badge as v, Button as y, CardContent as b, CardHeader as x, CardTitle as S, DropdownMenu as C, DropdownMenuContent as w, DropdownMenuItem as T, DropdownMenuSeparator as E, DropdownMenuTrigger as D, GlassCard as O, GradientText as k, IllustratedEmptyState as A, Input as j, PagePurpose as M, Pagination as N, Select as P, SelectContent as F, SelectItem as I, SelectTrigger as L, SelectValue as R } from "@burdenoff/fe-libs/ui";
+import { usePagination as ue } from "@burdenoff/fe-libs/shared/hooks";
 //#region src/crewfoundry/pages/CompanyVendorManagementPagePage.tsx
-var L = [
+var z = [
 	{
 		name: "name",
 		label: "Vendor name",
@@ -64,7 +70,7 @@ var L = [
 		label: "Rating (0-5)",
 		type: "number"
 	}
-], R = (e) => ({
+], B = (e) => ({
 	name: e.name,
 	category: e.category,
 	contactPerson: e.contactPerson,
@@ -73,7 +79,7 @@ var L = [
 	status: e.status,
 	contractValue: e.contractValue,
 	rating: e.rating
-}), z = (e, t) => ({
+}), V = (e, t) => ({
 	id: t?.id ?? crypto.randomUUID(),
 	name: String(e.name ?? ""),
 	category: String(e.category ?? ""),
@@ -83,172 +89,213 @@ var L = [
 	status: e.status || "pending",
 	contractValue: typeof e.contractValue == "number" ? e.contractValue : Number(e.contractValue) || 0,
 	rating: typeof e.rating == "number" ? e.rating : Number(e.rating) || 0
-});
-function B() {
-	let { vendors: B, addVendor: V, updateVendor: H, removeVendor: U } = e(), W = r(), [G, K] = i(""), [q, J] = i("all"), { page: Y, pageSize: X, offset: Z, setPage: Q } = I({ initialPageSize: 12 }), ne = B.reduce((e, t) => e + t.contractValue, 0), $ = B.filter((e) => {
-		let t = `${e.name} ${e.category} ${e.contactPerson} ${e.email}`.toLowerCase().includes(G.toLowerCase()), n = q === "all" || e.status === q;
+}), H = (e) => e >= 1e6 ? `$${(e / 1e6).toFixed(1)}M` : e >= 1e3 ? `$${Math.round(e / 1e3)}k` : `$${Math.round(e)}`;
+function U() {
+	let { vendors: U, clients: W, invoices: de, addVendor: fe, updateVendor: pe, removeVendor: me } = e(), he = ie(), G = i(), [K, ge] = s(""), [q, _e] = s("all"), [J, Y] = s(null), { page: ve, pageSize: X, offset: Z, setPage: Q } = ue({ initialPageSize: 12 }), ye = W.filter((e) => e.status === "active"), be = o(W, U), xe = a(de), $ = U.filter((e) => {
+		let t = `${e.name} ${e.category} ${e.contactPerson} ${e.email}`.toLowerCase().includes(K.toLowerCase()), n = q === "all" || e.status === q;
 		return t && n;
-	}), re = $.slice(Z, Z + X);
-	return /* @__PURE__ */ d("div", {
+	}), Se = $.slice(Z, Z + X);
+	return /* @__PURE__ */ m("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ m("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ d("div", { children: [
-					/* @__PURE__ */ u("h1", {
+				children: [/* @__PURE__ */ m("div", { children: [
+					/* @__PURE__ */ p("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ u(D, { children: "Vendor Management" })
+						children: /* @__PURE__ */ p(k, { children: "Clients & Vendors" })
 					}),
-					/* @__PURE__ */ d("p", {
+					/* @__PURE__ */ m("p", {
 						className: "text-sm text-text-secondary",
 						children: [
-							B.length,
-							" vendors · $",
-							(ne / 1e3).toFixed(0),
-							"K total contract value"
+							W.length,
+							" clients · ",
+							U.length,
+							" vendors"
 						]
 					}),
-					/* @__PURE__ */ u(A, {
+					/* @__PURE__ */ p(M, {
 						className: "mt-1",
 						children: "Track the vendors and suppliers you depend on — contracts, contacts, and status — to manage external relationships in one place."
 					})
-				] }), /* @__PURE__ */ d(S, {
+				] }), /* @__PURE__ */ m(y, {
 					size: "sm",
-					onClick: () => W.openModal(),
-					children: [/* @__PURE__ */ u(s, { className: "h-4 w-4 mr-1" }), "Add Vendor"]
+					onClick: () => G.openModal(),
+					children: [/* @__PURE__ */ p(d, { className: "h-4 w-4 mr-1" }), "Add Vendor"]
 				})]
 			}),
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ p(ee, {
+				"aria-label": "Clients and vendors",
+				variant: "underline",
+				value: "vendors",
+				onChange: (e) => {
+					e === "clients" && he("../company/client-management-page");
+				},
+				tabs: [{
+					id: "clients",
+					label: "Clients",
+					count: W.length
+				}, {
+					id: "vendors",
+					label: "Vendors",
+					count: U.length
+				}]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "grid gap-4 sm:grid-cols-2 xl:grid-cols-4",
+				children: [
+					/* @__PURE__ */ p(n, {
+						label: "Active Clients",
+						value: ye.length
+					}),
+					/* @__PURE__ */ p(n, {
+						label: "Vendors",
+						value: U.length
+					}),
+					/* @__PURE__ */ p(n, {
+						label: "Total Contract Value",
+						value: H(be)
+					}),
+					/* @__PURE__ */ p(n, {
+						label: "This Quarter",
+						value: H(xe)
+					})
+				]
+			}),
+			/* @__PURE__ */ m("div", {
 				className: "flex flex-col gap-2 sm:flex-row sm:items-center",
-				children: [/* @__PURE__ */ d("div", {
+				children: [/* @__PURE__ */ m("div", {
 					className: "relative flex-1",
-					children: [/* @__PURE__ */ u(c, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ u(k, {
+					children: [/* @__PURE__ */ p(f, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ p(j, {
 						placeholder: "Search vendors...",
 						className: "pl-9",
-						value: G,
+						value: K,
 						onChange: (e) => {
-							K(e.target.value), Q(1);
+							ge(e.target.value), Q(1);
 						}
 					})]
-				}), /* @__PURE__ */ d(M, {
+				}), /* @__PURE__ */ m(P, {
 					value: q,
 					onValueChange: (e) => {
-						J(e), Q(1);
+						_e(e), Q(1);
 					},
-					children: [/* @__PURE__ */ u(te, {
+					children: [/* @__PURE__ */ p(L, {
 						className: "w-full sm:w-40",
 						"aria-label": "Filter by status",
-						children: /* @__PURE__ */ u(F, {})
-					}), /* @__PURE__ */ d(N, { children: [
-						/* @__PURE__ */ u(P, {
+						children: /* @__PURE__ */ p(R, {})
+					}), /* @__PURE__ */ m(F, { children: [
+						/* @__PURE__ */ p(I, {
 							value: "all",
 							children: "All statuses"
 						}),
-						/* @__PURE__ */ u(P, {
+						/* @__PURE__ */ p(I, {
 							value: "active",
 							children: "Active"
 						}),
-						/* @__PURE__ */ u(P, {
+						/* @__PURE__ */ p(I, {
 							value: "inactive",
 							children: "Inactive"
 						}),
-						/* @__PURE__ */ u(P, {
+						/* @__PURE__ */ p(I, {
 							value: "pending",
 							children: "Pending"
 						})
 					] })]
 				})]
 			}),
-			/* @__PURE__ */ u("div", {
+			/* @__PURE__ */ p("div", {
 				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-				children: B.length === 0 ? /* @__PURE__ */ u("div", {
+				children: U.length === 0 ? /* @__PURE__ */ p("div", {
 					className: "col-span-full",
-					children: /* @__PURE__ */ u(O, {
+					children: /* @__PURE__ */ p(A, {
 						illustration: "empty-data",
 						title: "No vendors yet",
 						description: "Add a vendor to start tracking external relationships."
 					})
-				}) : $.length === 0 ? /* @__PURE__ */ u("div", {
+				}) : $.length === 0 ? /* @__PURE__ */ p("div", {
 					className: "col-span-full",
-					children: /* @__PURE__ */ u(O, {
+					children: /* @__PURE__ */ p(A, {
 						illustration: "empty-search",
 						title: "No vendors match",
 						description: "Try a different search term or status filter."
 					})
-				}) : re.map((e, n) => /* @__PURE__ */ d(E, {
-					treatment: n === 0 ? "glass" : "plain",
-					glow: n === 0,
-					children: [/* @__PURE__ */ u(w, { children: /* @__PURE__ */ d("div", {
-						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ u(T, {
-							className: "text-base",
-							children: e.name
-						}), /* @__PURE__ */ d("div", {
+				}) : Se.map((e) => /* @__PURE__ */ m(O, {
+					treatment: "glass",
+					children: [/* @__PURE__ */ p(x, { children: /* @__PURE__ */ m("div", {
+						className: "flex items-center justify-between gap-2",
+						children: [/* @__PURE__ */ m("div", {
+							className: "flex min-w-0 items-center gap-3",
+							children: [/* @__PURE__ */ p(r, {
+								people: [{ name: e.name }],
+								size: 36
+							}), /* @__PURE__ */ p(S, {
+								className: "truncate text-base",
+								children: e.name
+							})]
+						}), /* @__PURE__ */ m("div", {
 							className: "flex items-center gap-1",
-							children: [
-								/* @__PURE__ */ u(x, {
-									variant: e.status === "active" ? "default" : "secondary",
-									className: "text-[10px]",
-									children: t(e.status)
-								}),
-								/* @__PURE__ */ u(S, {
+							children: [/* @__PURE__ */ p(v, {
+								variant: e.status === "active" ? "default" : "secondary",
+								className: "text-[10px]",
+								children: t(e.status)
+							}), /* @__PURE__ */ m(C, { children: [/* @__PURE__ */ p(D, {
+								asChild: !0,
+								children: /* @__PURE__ */ p(y, {
 									variant: "ghost",
 									size: "icon",
-									"aria-label": `Edit ${e.name}`,
-									onClick: () => W.openModal(e),
-									children: /* @__PURE__ */ u(o, { className: "h-4 w-4" })
-								}),
-								/* @__PURE__ */ d(f, { children: [/* @__PURE__ */ u(b, {
-									asChild: !0,
-									children: /* @__PURE__ */ u(S, {
-										variant: "ghost",
-										size: "icon",
-										"aria-label": `Delete ${e.name}`,
-										children: /* @__PURE__ */ u(l, { className: "h-4 w-4 text-status-error-text" })
+									className: "h-8 w-8",
+									"aria-label": `More actions for ${e.name}`,
+									children: /* @__PURE__ */ p(l, { className: "h-4 w-4" })
+								})
+							}), /* @__PURE__ */ m(w, {
+								align: "end",
+								children: [
+									/* @__PURE__ */ m(T, {
+										onSelect: () => G.openModal(e),
+										children: [/* @__PURE__ */ p(u, { className: "mr-2 h-4 w-4" }), "Edit"]
+									}),
+									/* @__PURE__ */ p(E, {}),
+									/* @__PURE__ */ m(T, {
+										className: "text-status-error-text",
+										onSelect: () => Y(e),
+										children: [/* @__PURE__ */ p(re, { className: "mr-2 h-4 w-4" }), "Delete"]
 									})
-								}), /* @__PURE__ */ d(h, { children: [/* @__PURE__ */ d(v, { children: [/* @__PURE__ */ u(y, { children: "Delete vendor?" }), /* @__PURE__ */ d(g, { children: [
-									"This removes “",
-									e.name,
-									"” from your vendor directory. This action cannot be undone."
-								] })] }), /* @__PURE__ */ d(_, { children: [/* @__PURE__ */ u(m, { children: "Cancel" }), /* @__PURE__ */ u(p, {
-									onClick: () => void U(e.id),
-									children: "Delete"
-								})] })] })] })
-							]
+								]
+							})] })]
 						})]
-					}) }), /* @__PURE__ */ u(C, { children: /* @__PURE__ */ d("div", {
+					}) }), /* @__PURE__ */ p(b, { children: /* @__PURE__ */ m("div", {
 						className: "space-y-2",
 						children: [
-							/* @__PURE__ */ u(x, {
+							/* @__PURE__ */ p(v, {
 								variant: "outline",
 								className: "text-[10px]",
 								children: e.category
 							}),
-							/* @__PURE__ */ d("div", {
+							/* @__PURE__ */ m("div", {
 								className: "grid grid-cols-2 gap-2 mt-2",
-								children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+								children: [/* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
 									className: "text-xs text-text-secondary",
 									children: "Contact"
-								}), /* @__PURE__ */ u("p", {
+								}), /* @__PURE__ */ p("p", {
 									className: "text-sm",
-									children: e.contactPerson
-								})] }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
+									children: e.contactPerson || "—"
+								})] }), /* @__PURE__ */ m("div", { children: [/* @__PURE__ */ p("p", {
 									className: "text-xs text-text-secondary",
 									children: "Contract Value"
-								}), /* @__PURE__ */ d("p", {
-									className: "text-sm font-medium",
+								}), /* @__PURE__ */ m("p", {
+									className: "text-sm font-medium tabular-nums",
 									children: ["$", e.contractValue.toLocaleString()]
 								})] })]
 							}),
-							/* @__PURE__ */ d("div", {
+							/* @__PURE__ */ m("div", {
 								className: "flex items-center justify-between pt-2 border-t mt-2",
-								children: [/* @__PURE__ */ d("div", {
+								children: [/* @__PURE__ */ m("div", {
 									className: "flex items-center gap-1 text-xs text-text-secondary",
-									children: [/* @__PURE__ */ u(a, { className: "h-3 w-3" }), e.email]
-								}), /* @__PURE__ */ d("div", {
+									children: [/* @__PURE__ */ p(c, { className: "h-3 w-3" }), e.email || "—"]
+								}), /* @__PURE__ */ m("div", {
 									className: "flex items-center gap-1",
-									children: [/* @__PURE__ */ u(ee, { className: "h-3 w-3 text-status-warning-text" }), /* @__PURE__ */ u("span", {
-										className: "text-sm",
+									children: [/* @__PURE__ */ p(ne, { className: "h-3 w-3 text-status-warning-text" }), /* @__PURE__ */ p("span", {
+										className: "text-sm tabular-nums",
 										children: e.rating
 									})]
 								})]
@@ -257,28 +304,40 @@ function B() {
 					}) })]
 				}, e.id))
 			}),
-			$.length > X && /* @__PURE__ */ u(j, {
-				page: Y,
+			$.length > X && /* @__PURE__ */ p(N, {
+				page: ve,
 				pageSize: X,
 				totalItems: $.length,
 				onPageChange: Q
 			}),
-			/* @__PURE__ */ u(n, {
-				open: W.open,
-				onOpenChange: W.onOpenChange,
-				title: W.context ? "Edit vendor" : "Add vendor",
+			/* @__PURE__ */ p(te, {
+				open: G.open,
+				onOpenChange: G.onOpenChange,
+				title: G.context ? "Edit vendor" : "Add vendor",
 				description: "Track the vendor, its contract value, and primary contact.",
-				fields: L,
-				initialValues: W.context ? R(W.context) : void 0,
-				submitLabel: W.context ? "Save changes" : "Add vendor",
+				fields: z,
+				initialValues: G.context ? B(G.context) : void 0,
+				submitLabel: G.context ? "Save changes" : "Add vendor",
 				onSubmit: async (e) => {
-					W.context ? await H(W.context.id, z(e, W.context)) : await V(z(e));
+					G.context ? await pe(G.context.id, V(e, G.context)) : await fe(V(e));
 				}
+			}),
+			/* @__PURE__ */ p(ae, {
+				open: J !== null,
+				onOpenChange: (e) => {
+					e || Y(null);
+				},
+				children: /* @__PURE__ */ m(ce, { children: [/* @__PURE__ */ m(g, { children: [/* @__PURE__ */ p(_, { children: "Delete vendor?" }), /* @__PURE__ */ p(le, { children: J ? `This removes “${J.name}” from your vendor directory. This action cannot be undone.` : "" })] }), /* @__PURE__ */ m(h, { children: [/* @__PURE__ */ p(se, { children: "Cancel" }), /* @__PURE__ */ p(oe, {
+					onClick: (e) => {
+						e.preventDefault(), J && me(J.id), Y(null);
+					},
+					children: "Delete"
+				})] })] })
 			})
 		]
 	});
 }
 //#endregion
-export { B as CompanyVendorManagementPagePage };
+export { U as CompanyVendorManagementPagePage };
 
 //# sourceMappingURL=CompanyVendorManagementPagePage.js.map

package/dist/crewfoundry/pages/CompanyVendorManagementPagePage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CompanyVendorManagementPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/CompanyVendorManagementPagePage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n  Badge,\n  Button,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  Input,\n  PagePurpose,\n  Pagination,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@burdenoff/fe-libs/ui';\nimport { usePagination } from '@burdenoff/fe-libs/shared/hooks';\nimport { Mail, Pencil, Plus, Search, Star, Trash2 } from 'lucide-react';\nimport {\n  FormModal,\n  useFormModal,\n  type FieldConfig,\n  type FormValues,\n} from '../components/forms/FormModal';\nimport { useCrewFoundryStore, type Vendor } from '../store/crewfoundryStore';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\n\nconst VENDOR_FIELDS: FieldConfig[] = [\n  { name: 'name', label: 'Vendor name', type: 'text', required: true },\n  { name: 'category', label: 'Category', type: 'text', required: true },\n  { name: 'contactPerson', label: 'Contact person', type: 'text' },\n  { name: 'email', label: 'Contact email', type: 'email' },\n  { name: 'phone', label: 'Phone', type: 'text' },\n  {\n    name: 'status',\n    label: 'Status',\n    type: 'select',\n    options: [\n      { label: 'Active', value: 'active' },\n      { label: 'Inactive', value: 'inactive' },\n      { label: 'Pending', value: 'pending' },\n    ],\n  },\n  { name: 'contractValue', label: 'Contract value (USD)', type: 'number' },\n  { name: 'rating', label: 'Rating (0-5)', type: 'number' },\n];\n\nconst toInitialValues = (vendor: Vendor): FormValues => ({\n  name: vendor.name,\n  category: vendor.category,\n  contactPerson: vendor.contactPerson,\n  email: vendor.email,\n  phone: vendor.phone,\n  status: vendor.status,\n  contractValue: vendor.contractValue,\n  rating: vendor.rating,\n});\n\nconst valuesToVendor = (values: FormValues, base?: Vendor): Vendor => ({\n  id: base?.id ?? crypto.randomUUID(),\n  name: String(values.name ?? ''),\n  category: String(values.category ?? ''),\n  contactPerson: String(values.contactPerson ?? ''),\n  email: String(values.email ?? ''),\n  phone: String(values.phone ?? ''),\n  status: (values.status as Vendor['status']) || 'pending',\n  contractValue:\n    typeof values.contractValue === 'number'\n      ? values.contractValue\n      : Number(values.contractValue) || 0,\n  rating: typeof values.rating === 'number' ? values.rating : Number(values.rating) || 0,\n});\n\nexport function CompanyVendorManagementPagePage() {\n  const { vendors, addVendor, updateVendor, removeVendor } = useCrewFoundryStore();\n  const modal = useFormModal<Vendor>();\n  const [search, setSearch] = useState('');\n  const [filterStatus, setFilterStatus] = useState<string>('all');\n  const { page, pageSize, offset, setPage } = usePagination({ initialPageSize: 12 });\n  const totalContractValue = vendors.reduce((s, v) => s + v.contractValue, 0);\n\n  const filtered = vendors.filter((v) => {\n    const matchSearch = `${v.name} ${v.category} ${v.contactPerson} ${v.email}`\n      .toLowerCase()\n      .includes(search.toLowerCase());\n    const matchStatus = filterStatus === 'all' || v.status === filterStatus;\n    return matchSearch && matchStatus;\n  });\n  const paged = filtered.slice(offset, offset + pageSize);\n\n  const handleSubmit = async (values: FormValues) => {\n    if (modal.context) {\n      await updateVendor(modal.context.id, valuesToVendor(values, modal.context));\n    } else {\n      await addVendor(valuesToVendor(values));\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">\n            <GradientText>Vendor Management</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">\n            {vendors.length} vendors · ${(totalContractValue / 1000).toFixed(0)}K total contract\n            value\n          </p>\n          <PagePurpose className=\"mt-1\">\n            Track the vendors and suppliers you depend on — contracts, contacts, and status — to\n            manage external relationships in one place.\n          </PagePurpose>\n        </div>\n        <Button size=\"sm\" onClick={() => modal.openModal()}>\n          <Plus className=\"h-4 w-4 mr-1\" />\n          Add Vendor\n        </Button>\n      </div>\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n        <div className=\"relative flex-1\">\n          <Search className=\"absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n          <Input\n            placeholder=\"Search vendors...\"\n            className=\"pl-9\"\n            value={search}\n            onChange={(event) => {\n              setSearch(event.target.value);\n              setPage(1);\n            }}\n          />\n        </div>\n        <Select\n          value={filterStatus}\n          onValueChange={(value) => {\n            setFilterStatus(value);\n            setPage(1);\n          }}\n        >\n          <SelectTrigger className=\"w-full sm:w-40\" aria-label=\"Filter by status\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All statuses</SelectItem>\n            <SelectItem value=\"active\">Active</SelectItem>\n            <SelectItem value=\"inactive\">Inactive</SelectItem>\n            <SelectItem value=\"pending\">Pending</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n      <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n        {vendors.length === 0 ? (\n          <div className=\"col-span-full\">\n            <IllustratedEmptyState\n              illustration=\"empty-data\"\n              title=\"No vendors yet\"\n              description=\"Add a vendor to start tracking external relationships.\"\n            />\n          </div>\n        ) : filtered.length === 0 ? (\n          <div className=\"col-span-full\">\n            <IllustratedEmptyState\n              illustration=\"empty-search\"\n              title=\"No vendors match\"\n              description=\"Try a different search term or status filter.\"\n            />\n          </div>\n        ) : (\n          paged.map((vendor, _idx) => (\n            <GlassCard key={vendor.id} treatment={_idx === 0 ? 'glass' : 'plain'} glow={_idx === 0}>\n              <CardHeader>\n                <div className=\"flex items-center justify-between\">\n                  <CardTitle className=\"text-base\">{vendor.name}</CardTitle>\n                  <div className=\"flex items-center gap-1\">\n                    <Badge\n                      variant={vendor.status === 'active' ? 'default' : 'secondary'}\n                      className=\"text-[10px]\"\n                    >\n                      {formatEnumLabel(vendor.status)}\n                    </Badge>\n                    <Button\n                      variant=\"ghost\"\n                      size=\"icon\"\n                      aria-label={`Edit ${vendor.name}`}\n                      onClick={() => modal.openModal(vendor)}\n                    >\n                      <Pencil className=\"h-4 w-4\" />\n                    </Button>\n                    <AlertDialog>\n                      <AlertDialogTrigger asChild>\n                        <Button variant=\"ghost\" size=\"icon\" aria-label={`Delete ${vendor.name}`}>\n                          <Trash2 className=\"h-4 w-4 text-status-error-text\" />\n                        </Button>\n                      </AlertDialogTrigger>\n                      <AlertDialogContent>\n                        <AlertDialogHeader>\n                          <AlertDialogTitle>Delete vendor?</AlertDialogTitle>\n                          <AlertDialogDescription>\n                            This removes “{vendor.name}” from your vendor directory. This action\n                            cannot be undone.\n                          </AlertDialogDescription>\n                        </AlertDialogHeader>\n                        <AlertDialogFooter>\n                          <AlertDialogCancel>Cancel</AlertDialogCancel>\n                          <AlertDialogAction onClick={() => void removeVendor(vendor.id)}>\n                            Delete\n                          </AlertDialogAction>\n                        </AlertDialogFooter>\n                      </AlertDialogContent>\n                    </AlertDialog>\n                  </div>\n                </div>\n              </CardHeader>\n              <CardContent>\n                <div className=\"space-y-2\">\n                  <Badge variant=\"outline\" className=\"text-[10px]\">\n                    {vendor.category}\n                  </Badge>\n                  <div className=\"grid grid-cols-2 gap-2 mt-2\">\n                    <div>\n                      <p className=\"text-xs text-text-secondary\">Contact</p>\n                      <p className=\"text-sm\">{vendor.contactPerson}</p>\n                    </div>\n                    <div>\n                      <p className=\"text-xs text-text-secondary\">Contract Value</p>\n                      <p className=\"text-sm font-medium\">\n                        ${vendor.contractValue.toLocaleString()}\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center justify-between pt-2 border-t mt-2\">\n                    <div className=\"flex items-center gap-1 text-xs text-text-secondary\">\n                      <Mail className=\"h-3 w-3\" />\n                      {vendor.email}\n                    </div>\n                    <div className=\"flex items-center gap-1\">\n                      <Star className=\"h-3 w-3 text-status-warning-text\" />\n                      <span className=\"text-sm\">{vendor.rating}</span>\n                    </div>\n                  </div>\n                </div>\n              </CardContent>\n            </GlassCard>\n          ))\n        )}\n      </div>\n      {filtered.length > pageSize && (\n        <Pagination\n          page={page}\n          pageSize={pageSize}\n          totalItems={filtered.length}\n          onPageChange={setPage}\n        />\n      )}\n\n      <FormModal\n        open={modal.open}\n        onOpenChange={modal.onOpenChange}\n        title={modal.context ? 'Edit vendor' : 'Add vendor'}\n        description=\"Track the vendor, its contract value, and primary contact.\"\n        fields={VENDOR_FIELDS}\n        initialValues={modal.context ? toInitialValues(modal.context) : undefined}\n        submitLabel={modal.context ? 'Save changes' : 'Add vendor'}\n        onSubmit={handleSubmit}\n      />\n    </div>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"CompanyVendorManagementPagePage.js","names":[],"sources":["../../../src/crewfoundry/pages/CompanyVendorManagementPagePage.tsx"],"sourcesContent":["import { useState } from 'react';\nimport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogTitle,\n  Badge,\n  Button,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  Input,\n  PagePurpose,\n  Pagination,\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@burdenoff/fe-libs/ui';\nimport { usePagination } from '@burdenoff/fe-libs/shared/hooks';\nimport { Mail, MoreHorizontal, Pencil, Plus, Search, Star, Trash2 } from 'lucide-react';\nimport { useNavigate } from 'react-router-dom';\nimport {\n  FormModal,\n  useFormModal,\n  type FieldConfig,\n  type FormValues,\n} from '../components/forms/FormModal';\nimport { useCrewFoundryStore, type Vendor } from '../store/crewfoundryStore';\nimport { formatEnumLabel } from '../utils/formatEnumLabel';\nimport { AvatarStack, SegmentedTabs, StatCard } from '../components/viz';\nimport { totalContractValue, thisQuarterRevenue } from '../lib/companyFinance';\n\nconst VENDOR_FIELDS: FieldConfig[] = [\n  { name: 'name', label: 'Vendor name', type: 'text', required: true },\n  { name: 'category', label: 'Category', type: 'text', required: true },\n  { name: 'contactPerson', label: 'Contact person', type: 'text' },\n  { name: 'email', label: 'Contact email', type: 'email' },\n  { name: 'phone', label: 'Phone', type: 'text' },\n  {\n    name: 'status',\n    label: 'Status',\n    type: 'select',\n    options: [\n      { label: 'Active', value: 'active' },\n      { label: 'Inactive', value: 'inactive' },\n      { label: 'Pending', value: 'pending' },\n    ],\n  },\n  { name: 'contractValue', label: 'Contract value (USD)', type: 'number' },\n  { name: 'rating', label: 'Rating (0-5)', type: 'number' },\n];\n\nconst toInitialValues = (vendor: Vendor): FormValues => ({\n  name: vendor.name,\n  category: vendor.category,\n  contactPerson: vendor.contactPerson,\n  email: vendor.email,\n  phone: vendor.phone,\n  status: vendor.status,\n  contractValue: vendor.contractValue,\n  rating: vendor.rating,\n});\n\nconst valuesToVendor = (values: FormValues, base?: Vendor): Vendor => ({\n  id: base?.id ?? crypto.randomUUID(),\n  name: String(values.name ?? ''),\n  category: String(values.category ?? ''),\n  contactPerson: String(values.contactPerson ?? ''),\n  email: String(values.email ?? ''),\n  phone: String(values.phone ?? ''),\n  status: (values.status as Vendor['status']) || 'pending',\n  contractValue:\n    typeof values.contractValue === 'number'\n      ? values.contractValue\n      : Number(values.contractValue) || 0,\n  rating: typeof values.rating === 'number' ? values.rating : Number(values.rating) || 0,\n});\n\nconst compactMoney = (value: number): string => {\n  if (value >= 1_000_000) {\n    return `$${(value / 1_000_000).toFixed(1)}M`;\n  }\n  if (value >= 1_000) {\n    return `$${Math.round(value / 1_000)}k`;\n  }\n  return `$${Math.round(value)}`;\n};\n\nexport function CompanyVendorManagementPagePage() {\n  const { vendors, clients, invoices, addVendor, updateVendor, removeVendor } =\n    useCrewFoundryStore();\n  const navigate = useNavigate();\n  const modal = useFormModal<Vendor>();\n  const [search, setSearch] = useState('');\n  const [filterStatus, setFilterStatus] = useState<string>('all');\n  const [deleteTarget, setDeleteTarget] = useState<Vendor | null>(null);\n  const { page, pageSize, offset, setPage } = usePagination({ initialPageSize: 12 });\n\n  const activeClients = clients.filter((c) => c.status === 'active');\n  const contractValue = totalContractValue(clients, vendors);\n  const quarterRevenue = thisQuarterRevenue(invoices);\n\n  const filtered = vendors.filter((v) => {\n    const matchSearch = `${v.name} ${v.category} ${v.contactPerson} ${v.email}`\n      .toLowerCase()\n      .includes(search.toLowerCase());\n    const matchStatus = filterStatus === 'all' || v.status === filterStatus;\n    return matchSearch && matchStatus;\n  });\n  const paged = filtered.slice(offset, offset + pageSize);\n\n  const handleSubmit = async (values: FormValues) => {\n    if (modal.context) {\n      await updateVendor(modal.context.id, valuesToVendor(values, modal.context));\n    } else {\n      await addVendor(valuesToVendor(values));\n    }\n  };\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h1 className=\"text-2xl font-semibold\">\n            <GradientText>Clients &amp; Vendors</GradientText>\n          </h1>\n          <p className=\"text-sm text-text-secondary\">\n            {clients.length} clients · {vendors.length} vendors\n          </p>\n          <PagePurpose className=\"mt-1\">\n            Track the vendors and suppliers you depend on — contracts, contacts, and status — to\n            manage external relationships in one place.\n          </PagePurpose>\n        </div>\n        <Button size=\"sm\" onClick={() => modal.openModal()}>\n          <Plus className=\"h-4 w-4 mr-1\" />\n          Add Vendor\n        </Button>\n      </div>\n\n      <SegmentedTabs\n        aria-label=\"Clients and vendors\"\n        variant=\"underline\"\n        value=\"vendors\"\n        onChange={(id) => {\n          if (id === 'clients') {\n            navigate('../company/client-management-page');\n          }\n        }}\n        tabs={[\n          { id: 'clients', label: 'Clients', count: clients.length },\n          { id: 'vendors', label: 'Vendors', count: vendors.length },\n        ]}\n      />\n\n      <div className=\"grid gap-4 sm:grid-cols-2 xl:grid-cols-4\">\n        <StatCard label=\"Active Clients\" value={activeClients.length} />\n        <StatCard label=\"Vendors\" value={vendors.length} />\n        <StatCard label=\"Total Contract Value\" value={compactMoney(contractValue)} />\n        <StatCard label=\"This Quarter\" value={compactMoney(quarterRevenue)} />\n      </div>\n\n      <div className=\"flex flex-col gap-2 sm:flex-row sm:items-center\">\n        <div className=\"relative flex-1\">\n          <Search className=\"absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-text-secondary\" />\n          <Input\n            placeholder=\"Search vendors...\"\n            className=\"pl-9\"\n            value={search}\n            onChange={(event) => {\n              setSearch(event.target.value);\n              setPage(1);\n            }}\n          />\n        </div>\n        <Select\n          value={filterStatus}\n          onValueChange={(value) => {\n            setFilterStatus(value);\n            setPage(1);\n          }}\n        >\n          <SelectTrigger className=\"w-full sm:w-40\" aria-label=\"Filter by status\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectItem value=\"all\">All statuses</SelectItem>\n            <SelectItem value=\"active\">Active</SelectItem>\n            <SelectItem value=\"inactive\">Inactive</SelectItem>\n            <SelectItem value=\"pending\">Pending</SelectItem>\n          </SelectContent>\n        </Select>\n      </div>\n\n      <div className=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n        {vendors.length === 0 ? (\n          <div className=\"col-span-full\">\n            <IllustratedEmptyState\n              illustration=\"empty-data\"\n              title=\"No vendors yet\"\n              description=\"Add a vendor to start tracking external relationships.\"\n            />\n          </div>\n        ) : filtered.length === 0 ? (\n          <div className=\"col-span-full\">\n            <IllustratedEmptyState\n              illustration=\"empty-search\"\n              title=\"No vendors match\"\n              description=\"Try a different search term or status filter.\"\n            />\n          </div>\n        ) : (\n          paged.map((vendor) => (\n            <GlassCard key={vendor.id} treatment=\"glass\">\n              <CardHeader>\n                <div className=\"flex items-center justify-between gap-2\">\n                  <div className=\"flex min-w-0 items-center gap-3\">\n                    <AvatarStack people={[{ name: vendor.name }]} size={36} />\n                    <CardTitle className=\"truncate text-base\">{vendor.name}</CardTitle>\n                  </div>\n                  <div className=\"flex items-center gap-1\">\n                    <Badge\n                      variant={vendor.status === 'active' ? 'default' : 'secondary'}\n                      className=\"text-[10px]\"\n                    >\n                      {formatEnumLabel(vendor.status)}\n                    </Badge>\n                    <DropdownMenu>\n                      <DropdownMenuTrigger asChild>\n                        <Button\n                          variant=\"ghost\"\n                          size=\"icon\"\n                          className=\"h-8 w-8\"\n                          aria-label={`More actions for ${vendor.name}`}\n                        >\n                          <MoreHorizontal className=\"h-4 w-4\" />\n                        </Button>\n                      </DropdownMenuTrigger>\n                      <DropdownMenuContent align=\"end\">\n                        <DropdownMenuItem onSelect={() => modal.openModal(vendor)}>\n                          <Pencil className=\"mr-2 h-4 w-4\" />\n                          Edit\n                        </DropdownMenuItem>\n                        <DropdownMenuSeparator />\n                        <DropdownMenuItem\n                          className=\"text-status-error-text\"\n                          onSelect={() => setDeleteTarget(vendor)}\n                        >\n                          <Trash2 className=\"mr-2 h-4 w-4\" />\n                          Delete\n                        </DropdownMenuItem>\n                      </DropdownMenuContent>\n                    </DropdownMenu>\n                  </div>\n                </div>\n              </CardHeader>\n              <CardContent>\n                <div className=\"space-y-2\">\n                  <Badge variant=\"outline\" className=\"text-[10px]\">\n                    {vendor.category}\n                  </Badge>\n                  <div className=\"grid grid-cols-2 gap-2 mt-2\">\n                    <div>\n                      <p className=\"text-xs text-text-secondary\">Contact</p>\n                      <p className=\"text-sm\">{vendor.contactPerson || '—'}</p>\n                    </div>\n                    <div>\n                      <p className=\"text-xs text-text-secondary\">Contract Value</p>\n                      <p className=\"text-sm font-medium tabular-nums\">\n                        ${vendor.contractValue.toLocaleString()}\n                      </p>\n                    </div>\n                  </div>\n                  <div className=\"flex items-center justify-between pt-2 border-t mt-2\">\n                    <div className=\"flex items-center gap-1 text-xs text-text-secondary\">\n                      <Mail className=\"h-3 w-3\" />\n                      {vendor.email || '—'}\n                    </div>\n                    <div className=\"flex items-center gap-1\">\n                      <Star className=\"h-3 w-3 text-status-warning-text\" />\n                      <span className=\"text-sm tabular-nums\">{vendor.rating}</span>\n                    </div>\n                  </div>\n                </div>\n              </CardContent>\n            </GlassCard>\n          ))\n        )}\n      </div>\n      {filtered.length > pageSize && (\n        <Pagination\n          page={page}\n          pageSize={pageSize}\n          totalItems={filtered.length}\n          onPageChange={setPage}\n        />\n      )}\n\n      <FormModal\n        open={modal.open}\n        onOpenChange={modal.onOpenChange}\n        title={modal.context ? 'Edit vendor' : 'Add vendor'}\n        description=\"Track the vendor, its contract value, and primary contact.\"\n        fields={VENDOR_FIELDS}\n        initialValues={modal.context ? toInitialValues(modal.context) : undefined}\n        submitLabel={modal.context ? 'Save changes' : 'Add vendor'}\n        onSubmit={handleSubmit}\n      />\n\n      <AlertDialog\n        open={deleteTarget !== null}\n        onOpenChange={(open) => {\n          if (!open) {\n            setDeleteTarget(null);\n          }\n        }}\n      >\n        <AlertDialogContent>\n          <AlertDialogHeader>\n            <AlertDialogTitle>Delete vendor?</AlertDialogTitle>\n            <AlertDialogDescription>\n              {deleteTarget\n                ? `This removes “${deleteTarget.name}” from your vendor directory. This action cannot be undone.`\n                : ''}\n            </AlertDialogDescription>\n          </AlertDialogHeader>\n          <AlertDialogFooter>\n            <AlertDialogCancel>Cancel</AlertDialogCancel>\n            <AlertDialogAction\n              onClick={(event) => {\n                event.preventDefault();\n                if (deleteTarget) {\n                  void removeVendor(deleteTarget.id);\n                }\n                setDeleteTarget(null);\n              }}\n            >\n              Delete\n            </AlertDialogAction>\n          </AlertDialogFooter>\n        </AlertDialogContent>\n      </AlertDialog>\n    </div>\n  );\n}\n"],"mappings":"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"}