@burdenoff/microfe-crewfoundry 2026.703.2 → 2026.704.1

package/dist/crewfoundry/pages/CompanyVendorManagementPagePage.js

@@ -1,10 +1,12 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { FormModal as t, useFormModal as n } from "../components/forms/FormModal.js";
-import { Mail as r, Pencil as i, Plus as a, Star as o, Trash2 as s } from "lucide-react";
-import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { AlertDialog as u, AlertDialogAction as d, AlertDialogCancel as f, AlertDialogContent as p, AlertDialogDescription as m, AlertDialogFooter as h, AlertDialogHeader as g, AlertDialogTitle as _, AlertDialogTrigger as v, Badge as y, Button as b, CardContent as x, CardHeader as S, CardTitle as C, GlassCard as w, GradientText as T, IllustratedEmptyState as E, PagePurpose as D } from "@burdenoff/fe-libs/ui";
+import { useState as r } from "react";
+import { Mail as i, Pencil as a, Plus as o, Search as s, Star as c, Trash2 as l } from "lucide-react";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { AlertDialog as ee, AlertDialogAction as f, AlertDialogCancel as p, AlertDialogContent as m, AlertDialogDescription as h, AlertDialogFooter as g, AlertDialogHeader as _, AlertDialogTitle as v, AlertDialogTrigger as y, Badge as b, Button as x, CardContent as S, CardHeader as C, CardTitle as w, GlassCard as T, GradientText as E, IllustratedEmptyState as D, Input as O, PagePurpose as k, Pagination as A, Select as j, SelectContent as M, SelectItem as N, SelectTrigger as P, SelectValue as te } from "@burdenoff/fe-libs/ui";
+import { usePagination as F } from "@burdenoff/fe-libs/shared/hooks";
 //#region src/crewfoundry/pages/CompanyVendorManagementPagePage.tsx
-var O = [
+var I = [
 	{
 		name: "name",
 		label: "Vendor name",
@@ -61,7 +63,7 @@ var O = [
 		label: "Rating (0-5)",
 		type: "number"
 	}
-], k = (e) => ({
+], L = (e) => ({
 	name: e.name,
 	category: e.category,
 	contactPerson: e.contactPerson,
@@ -70,7 +72,7 @@ var O = [
 	status: e.status,
 	contractValue: e.contractValue,
 	rating: e.rating
-}), A = (e, t) => ({
+}), R = (e, t) => ({
 	id: t?.id ?? crypto.randomUUID(),
 	name: String(e.name ?? ""),
 	category: String(e.category ?? ""),
@@ -81,119 +83,170 @@ var O = [
 	contractValue: typeof e.contractValue == "number" ? e.contractValue : Number(e.contractValue) || 0,
 	rating: typeof e.rating == "number" ? e.rating : Number(e.rating) || 0
 });
-function j() {
-	let { vendors: j, addVendor: M, updateVendor: N, removeVendor: P } = e(), F = n(), I = j.reduce((e, t) => e + t.contractValue, 0);
-	return /* @__PURE__ */ l("div", {
+function z() {
+	let { vendors: z, addVendor: B, updateVendor: V, removeVendor: H } = e(), U = n(), [W, G] = r(""), [K, q] = r("all"), { page: J, pageSize: Y, offset: X, setPage: Z } = F({ initialPageSize: 12 }), Q = z.reduce((e, t) => e + t.contractValue, 0), $ = z.filter((e) => {
+		let t = `${e.name} ${e.category} ${e.contactPerson} ${e.email}`.toLowerCase().includes(W.toLowerCase()), n = K === "all" || e.status === K;
+		return t && n;
+	}), ne = $.slice(X, X + Y);
+	return /* @__PURE__ */ d("div", {
 		className: "space-y-6 p-6",
 		children: [
-			/* @__PURE__ */ l("div", {
+			/* @__PURE__ */ d("div", {
 				className: "flex items-center justify-between",
-				children: [/* @__PURE__ */ l("div", { children: [
-					/* @__PURE__ */ c("h1", {
+				children: [/* @__PURE__ */ d("div", { children: [
+					/* @__PURE__ */ u("h1", {
 						className: "text-2xl font-semibold",
-						children: /* @__PURE__ */ c(T, { children: "Vendor Management" })
+						children: /* @__PURE__ */ u(E, { children: "Vendor Management" })
 					}),
-					/* @__PURE__ */ l("p", {
+					/* @__PURE__ */ d("p", {
 						className: "text-sm text-text-secondary",
 						children: [
-							j.length,
+							z.length,
 							" vendors · $",
-							(I / 1e3).toFixed(0),
+							(Q / 1e3).toFixed(0),
 							"K total contract value"
 						]
 					}),
-					/* @__PURE__ */ c(D, {
+					/* @__PURE__ */ u(k, {
 						className: "mt-1",
 						children: "Track the vendors and suppliers you depend on — contracts, contacts, and status — to manage external relationships in one place."
 					})
-				] }), /* @__PURE__ */ l(b, {
+				] }), /* @__PURE__ */ d(x, {
 					size: "sm",
-					onClick: () => F.openModal(),
-					children: [/* @__PURE__ */ c(a, { className: "h-4 w-4 mr-1" }), "Add Vendor"]
+					onClick: () => U.openModal(),
+					children: [/* @__PURE__ */ u(o, { className: "h-4 w-4 mr-1" }), "Add Vendor"]
 				})]
 			}),
-			/* @__PURE__ */ c("div", {
+			/* @__PURE__ */ d("div", {
+				className: "flex flex-col gap-2 sm:flex-row sm:items-center",
+				children: [/* @__PURE__ */ d("div", {
+					className: "relative flex-1",
+					children: [/* @__PURE__ */ u(s, { className: "absolute top-1/2 left-3 h-4 w-4 -translate-y-1/2 text-text-secondary" }), /* @__PURE__ */ u(O, {
+						placeholder: "Search vendors...",
+						className: "pl-9",
+						value: W,
+						onChange: (e) => {
+							G(e.target.value), Z(1);
+						}
+					})]
+				}), /* @__PURE__ */ d(j, {
+					value: K,
+					onValueChange: (e) => {
+						q(e), Z(1);
+					},
+					children: [/* @__PURE__ */ u(P, {
+						className: "w-full sm:w-40",
+						"aria-label": "Filter by status",
+						children: /* @__PURE__ */ u(te, {})
+					}), /* @__PURE__ */ d(M, { children: [
+						/* @__PURE__ */ u(N, {
+							value: "all",
+							children: "All statuses"
+						}),
+						/* @__PURE__ */ u(N, {
+							value: "active",
+							children: "Active"
+						}),
+						/* @__PURE__ */ u(N, {
+							value: "inactive",
+							children: "Inactive"
+						}),
+						/* @__PURE__ */ u(N, {
+							value: "pending",
+							children: "Pending"
+						})
+					] })]
+				})]
+			}),
+			/* @__PURE__ */ u("div", {
 				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-				children: j.length === 0 ? /* @__PURE__ */ c("div", {
+				children: z.length === 0 ? /* @__PURE__ */ u("div", {
 					className: "col-span-full",
-					children: /* @__PURE__ */ c(E, {
+					children: /* @__PURE__ */ u(D, {
 						illustration: "empty-data",
 						title: "No vendors yet",
 						description: "Add a vendor to start tracking external relationships."
 					})
-				}) : j.map((e, t) => /* @__PURE__ */ l(w, {
+				}) : $.length === 0 ? /* @__PURE__ */ u("div", {
+					className: "col-span-full",
+					children: /* @__PURE__ */ u(D, {
+						illustration: "empty-search",
+						title: "No vendors match",
+						description: "Try a different search term or status filter."
+					})
+				}) : ne.map((e, t) => /* @__PURE__ */ d(T, {
 					treatment: t === 0 ? "glass" : "plain",
 					glow: t === 0,
-					children: [/* @__PURE__ */ c(S, { children: /* @__PURE__ */ l("div", {
+					children: [/* @__PURE__ */ u(C, { children: /* @__PURE__ */ d("div", {
 						className: "flex items-center justify-between",
-						children: [/* @__PURE__ */ c(C, {
+						children: [/* @__PURE__ */ u(w, {
 							className: "text-base",
 							children: e.name
-						}), /* @__PURE__ */ l("div", {
+						}), /* @__PURE__ */ d("div", {
 							className: "flex items-center gap-1",
 							children: [
-								/* @__PURE__ */ c(y, {
+								/* @__PURE__ */ u(b, {
 									variant: e.status === "active" ? "default" : "secondary",
 									className: "text-[10px]",
 									children: e.status
 								}),
-								/* @__PURE__ */ c(b, {
+								/* @__PURE__ */ u(x, {
 									variant: "ghost",
 									size: "icon",
 									"aria-label": `Edit ${e.name}`,
-									onClick: () => F.openModal(e),
-									children: /* @__PURE__ */ c(i, { className: "h-4 w-4" })
+									onClick: () => U.openModal(e),
+									children: /* @__PURE__ */ u(a, { className: "h-4 w-4" })
 								}),
-								/* @__PURE__ */ l(u, { children: [/* @__PURE__ */ c(v, {
+								/* @__PURE__ */ d(ee, { children: [/* @__PURE__ */ u(y, {
 									asChild: !0,
-									children: /* @__PURE__ */ c(b, {
+									children: /* @__PURE__ */ u(x, {
 										variant: "ghost",
 										size: "icon",
 										"aria-label": `Delete ${e.name}`,
-										children: /* @__PURE__ */ c(s, { className: "h-4 w-4 text-status-error-text" })
+										children: /* @__PURE__ */ u(l, { className: "h-4 w-4 text-status-error-text" })
 									})
-								}), /* @__PURE__ */ l(p, { children: [/* @__PURE__ */ l(g, { children: [/* @__PURE__ */ c(_, { children: "Delete vendor?" }), /* @__PURE__ */ l(m, { children: [
+								}), /* @__PURE__ */ d(m, { children: [/* @__PURE__ */ d(_, { children: [/* @__PURE__ */ u(v, { children: "Delete vendor?" }), /* @__PURE__ */ d(h, { children: [
 									"This removes “",
 									e.name,
 									"” from your vendor directory. This action cannot be undone."
-								] })] }), /* @__PURE__ */ l(h, { children: [/* @__PURE__ */ c(f, { children: "Cancel" }), /* @__PURE__ */ c(d, {
-									onClick: () => void P(e.id),
+								] })] }), /* @__PURE__ */ d(g, { children: [/* @__PURE__ */ u(p, { children: "Cancel" }), /* @__PURE__ */ u(f, {
+									onClick: () => void H(e.id),
 									children: "Delete"
 								})] })] })] })
 							]
 						})]
-					}) }), /* @__PURE__ */ c(x, { children: /* @__PURE__ */ l("div", {
+					}) }), /* @__PURE__ */ u(S, { children: /* @__PURE__ */ d("div", {
 						className: "space-y-2",
 						children: [
-							/* @__PURE__ */ c(y, {
+							/* @__PURE__ */ u(b, {
 								variant: "outline",
 								className: "text-[10px]",
 								children: e.category
 							}),
-							/* @__PURE__ */ l("div", {
+							/* @__PURE__ */ d("div", {
 								className: "grid grid-cols-2 gap-2 mt-2",
-								children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
+								children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
 									className: "text-xs text-text-secondary",
 									children: "Contact"
-								}), /* @__PURE__ */ c("p", {
+								}), /* @__PURE__ */ u("p", {
 									className: "text-sm",
 									children: e.contactPerson
-								})] }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
+								})] }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("p", {
 									className: "text-xs text-text-secondary",
 									children: "Contract Value"
-								}), /* @__PURE__ */ l("p", {
+								}), /* @__PURE__ */ d("p", {
 									className: "text-sm font-medium",
 									children: ["$", e.contractValue.toLocaleString()]
 								})] })]
 							}),
-							/* @__PURE__ */ l("div", {
+							/* @__PURE__ */ d("div", {
 								className: "flex items-center justify-between pt-2 border-t mt-2",
-								children: [/* @__PURE__ */ l("div", {
+								children: [/* @__PURE__ */ d("div", {
 									className: "flex items-center gap-1 text-xs text-text-secondary",
-									children: [/* @__PURE__ */ c(r, { className: "h-3 w-3" }), e.email]
-								}), /* @__PURE__ */ l("div", {
+									children: [/* @__PURE__ */ u(i, { className: "h-3 w-3" }), e.email]
+								}), /* @__PURE__ */ d("div", {
 									className: "flex items-center gap-1",
-									children: [/* @__PURE__ */ c(o, { className: "h-3 w-3 text-status-warning-text" }), /* @__PURE__ */ c("span", {
+									children: [/* @__PURE__ */ u(c, { className: "h-3 w-3 text-status-warning-text" }), /* @__PURE__ */ u("span", {
 										className: "text-sm",
 										children: e.rating
 									})]
@@ -203,22 +256,28 @@ function j() {
 					}) })]
 				}, e.id))
 			}),
-			/* @__PURE__ */ c(t, {
-				open: F.open,
-				onOpenChange: F.onOpenChange,
-				title: F.context ? "Edit vendor" : "Add vendor",
+			$.length > Y && /* @__PURE__ */ u(A, {
+				page: J,
+				pageSize: Y,
+				totalItems: $.length,
+				onPageChange: Z
+			}),
+			/* @__PURE__ */ u(t, {
+				open: U.open,
+				onOpenChange: U.onOpenChange,
+				title: U.context ? "Edit vendor" : "Add vendor",
 				description: "Track the vendor, its contract value, and primary contact.",
-				fields: O,
-				initialValues: F.context ? k(F.context) : void 0,
-				submitLabel: F.context ? "Save changes" : "Add vendor",
+				fields: I,
+				initialValues: U.context ? L(U.context) : void 0,
+				submitLabel: U.context ? "Save changes" : "Add vendor",
 				onSubmit: async (e) => {
-					F.context ? await N(F.context.id, A(e, F.context)) : await M(A(e));
+					U.context ? await V(U.context.id, R(e, U.context)) : await B(R(e));
 				}
 			})
 		]
 	});
 }
 //#endregion
-export { j as CompanyVendorManagementPagePage };
+export { z 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 {\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  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { Mail, Pencil, Plus, 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';\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 totalContractValue = vendors.reduce((s, v) => s + v.contractValue, 0);\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\">Track the vendors and suppliers you depend on — contracts, contacts, and status — to manage external relationships in one place.</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=\"grid gap-4 md:grid-cols-2 lg:grid-cols-3\">\n        {vendors.length === 0 ? (\n          <div className=\"col-span-full\">\n            <IllustratedEmptyState illustration=\"empty-data\" title=\"No vendors yet\" description=\"Add a vendor to start tracking external relationships.\" />\n          </div>\n        ) : (\n          vendors.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                    {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 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\">${vendor.contractValue.toLocaleString()}</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      </div>\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  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';\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\">Track the vendors and suppliers you depend on — contracts, contacts, and status — to manage external relationships in one place.</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 illustration=\"empty-data\" title=\"No vendors yet\" description=\"Add a vendor to start tracking external relationships.\" />\n          </div>\n        ) : filtered.length === 0 ? (\n          <div className=\"col-span-full\">\n            <IllustratedEmptyState illustration=\"empty-search\" title=\"No vendors match\" description=\"Try a different search term or status filter.\" />\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                    {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 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\">${vendor.contractValue.toLocaleString()}</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      </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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"}

package/dist/crewfoundry/pages/DashboardAnalyticsPagePage.js

@@ -2,52 +2,43 @@ import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
 import { useMemo as t } from "react";
 import { BarChart3 as n, DollarSign as r, Target as i, TrendingDown as a, TrendingUp as o, Users as s } from "lucide-react";
 import { jsx as c, jsxs as l } from "react/jsx-runtime";
-import { Badge as u, Card as d, CardContent as f, CardDescription as p, CardHeader as m, CardTitle as h, GlassCard as g, GradientText as _, PagePurpose as v } from "@burdenoff/fe-libs/ui";
+import { Badge as u, Card as d, CardContent as f, CardDescription as p, CardHeader as m, CardTitle as h, GlassCard as g, GradientText as _, PagePurpose as v, ResponsiveTable as y } from "@burdenoff/fe-libs/ui";
 //#region src/crewfoundry/pages/DashboardAnalyticsPagePage.tsx
-function y() {
-	let { employees: y, departments: b, jobPostings: x, payrollRecords: S, projects: C } = e(), w = t(() => {
-		let e = [...y].sort((e, t) => e.startDate.localeCompare(t.startDate));
-		return e.slice(-6).map((t, n) => {
-			let r = new Date(t.startDate).toLocaleString("en-US", { month: "short" });
+function b() {
+	let { employees: b, departments: x, jobPostings: S, payrollRecords: C, projects: w } = e(), T = t(() => {
+		if (b.length === 0) return [];
+		let e = (e) => {
+			let t = new Date(e);
+			return `${t.getFullYear()}-${String(t.getMonth()).padStart(2, "0")}`;
+		};
+		return Array.from(new Set(b.map((t) => e(t.startDate)))).sort().slice(-6).map((t) => {
+			let [n, r] = t.split("-").map(Number), i = new Date(n, r + 1, 0).getTime(), a = new Date(n, r, 1).toLocaleString("en-US", {
+				month: "short",
+				year: "2-digit"
+			}), o = b.filter((e) => new Date(e.startDate).getTime() <= i && e.status !== "terminated").length;
 			return {
-				month: r,
-				hires: e.filter((e) => new Date(e.startDate).toLocaleString("en-US", { month: "short" }) === r && e.status === "active").length,
-				attrition: e.filter((e) => new Date(e.startDate).toLocaleString("en-US", { month: "short" }) === r && e.status === "terminated").length,
-				headcount: Math.max(1, e.length - (5 - n))
+				month: a,
+				hires: b.filter((n) => e(n.startDate) === t).length,
+				attrition: b.filter((n) => n.status === "terminated" && e(n.startDate) === t).length,
+				headcount: o
 			};
 		});
-	}, [y]), T = Math.max(1, ...w.map((e) => e.headcount)), E = S.reduce((e, t) => e + t.netPay, 0), D = Math.round(y.reduce((e, t) => e + t.salary, 0) / Math.max(y.length, 1)), O = x.filter((e) => e.status === "active").length, k = y.reduce((e, t) => {
+	}, [b]), E = Math.max(1, ...T.map((e) => e.headcount)), D = C.reduce((e, t) => e + t.netPay, 0), O = Math.round(b.reduce((e, t) => e + t.salary, 0) / Math.max(b.length, 1)), k = S.filter((e) => e.status === "active").length, A = b.reduce((e, t) => {
 		let n = t.type.replace("_", " ");
 		return e[n] = (e[n] || 0) + 1, e;
-	}, {}), A = t(() => {
-		let e = [
-			{
-				category: "Payroll",
-				amount: E
-			},
-			{
-				category: "Recruitment",
-				amount: x.reduce((e, t) => e + t.applicants * 120, 0)
-			},
-			{
-				category: "Project Delivery",
-				amount: C.reduce((e, t) => e + t.spent, 0)
-			},
-			{
-				category: "Department Ops",
-				amount: b.reduce((e, t) => e + t.budget * .03, 0)
-			}
-		], t = e.reduce((e, t) => e + t.amount, 0) || 1;
+	}, {}), j = t(() => {
+		let e = [{
+			category: "Net Payroll",
+			amount: D
+		}, {
+			category: "Project Delivery",
+			amount: w.reduce((e, t) => e + t.spent, 0)
+		}], t = e.reduce((e, t) => e + t.amount, 0) || 1;
 		return e.map((e) => ({
 			...e,
 			percentage: Math.round(e.amount / t * 100)
 		}));
-	}, [
-		b,
-		x,
-		C,
-		E
-	]);
+	}, [w, D]);
 	return /* @__PURE__ */ l("div", {
 		className: "space-y-6 p-6",
 		children: [
@@ -80,7 +71,7 @@ function y() {
 							}), /* @__PURE__ */ c(s, { className: "h-4 w-4 text-text-secondary" })]
 						}), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ c("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: y.length
+							children: b.length
 						}), /* @__PURE__ */ l("div", {
 							className: "flex items-center text-xs text-status-success-text",
 							children: [/* @__PURE__ */ c(o, { className: "mr-1 h-3 w-3" }), "Live workforce count"]
@@ -97,7 +88,7 @@ function y() {
 							}), /* @__PURE__ */ c(r, { className: "h-4 w-4 text-text-secondary" })]
 						}), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ l("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: ["$", D.toLocaleString()]
+							children: ["$", O.toLocaleString()]
 						}), /* @__PURE__ */ l("div", {
 							className: "flex items-center text-xs text-status-success-text",
 							children: [/* @__PURE__ */ c(o, { className: "mr-1 h-3 w-3" }), "Updated from employee records"]
@@ -114,7 +105,7 @@ function y() {
 							}), /* @__PURE__ */ c(a, { className: "h-4 w-4 text-text-secondary" })]
 						}), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ l("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: [Math.round(y.filter((e) => e.status === "terminated").length / Math.max(y.length, 1) * 100), "%"]
+							children: [Math.round(b.filter((e) => e.status === "terminated").length / Math.max(b.length, 1) * 100), "%"]
 						}), /* @__PURE__ */ l("div", {
 							className: "flex items-center text-xs text-status-success-text",
 							children: [/* @__PURE__ */ c(a, { className: "mr-1 h-3 w-3" }), "Calculated from status mix"]
@@ -131,7 +122,7 @@ function y() {
 							}), /* @__PURE__ */ c(i, { className: "h-4 w-4 text-text-secondary" })]
 						}), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ c("div", {
 							className: "text-2xl font-bold tabular-nums",
-							children: O
+							children: k
 						}), /* @__PURE__ */ c("p", {
 							className: "text-xs text-text-secondary",
 							children: "Based on active job postings"
@@ -145,7 +136,7 @@ function y() {
 					className: "col-span-4",
 					children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, { children: "Headcount Trend" }), /* @__PURE__ */ c(p, { children: "Monthly headcount over recent months" })] }), /* @__PURE__ */ c(f, {
 						className: "space-y-3",
-						children: w.map((e, t) => /* @__PURE__ */ l("div", {
+						children: T.map((e, t) => /* @__PURE__ */ l("div", {
 							className: "flex items-center gap-3",
 							children: [
 								/* @__PURE__ */ c("span", {
@@ -156,7 +147,7 @@ function y() {
 									className: "h-4 flex-1 overflow-hidden rounded bg-bg-sunken",
 									children: /* @__PURE__ */ c("div", {
 										className: "h-4 rounded bg-action-primary-bg",
-										style: { width: `${Math.round(e.headcount / T * 100)}%` }
+										style: { width: `${Math.round(e.headcount / E * 100)}%` }
 									})
 								}),
 								/* @__PURE__ */ c("span", {
@@ -182,7 +173,7 @@ function y() {
 					className: "col-span-3",
 					children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, { children: "Employee Types" }), /* @__PURE__ */ c(p, { children: "Distribution by employment type" })] }), /* @__PURE__ */ c(f, {
 						className: "space-y-4",
-						children: Object.entries(k).sort(([, e], [, t]) => t - e).map(([e, t]) => /* @__PURE__ */ l("div", {
+						children: Object.entries(A).sort(([, e], [, t]) => t - e).map(([e, t]) => /* @__PURE__ */ l("div", {
 							className: "flex items-center justify-between",
 							children: [/* @__PURE__ */ l("div", {
 								className: "flex items-center gap-2",
@@ -199,7 +190,7 @@ function y() {
 									className: "text-xs text-text-secondary",
 									children: [
 										"(",
-										Math.round(t / Math.max(y.length, 1) * 100),
+										Math.round(t / Math.max(b.length, 1) * 100),
 										"%)"
 									]
 								})]
@@ -210,7 +201,7 @@ function y() {
 			}),
 			/* @__PURE__ */ l(d, { children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, { children: "Workforce Cost Breakdown" }), /* @__PURE__ */ c(p, { children: "Operational costs by category" })] }), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ c("div", {
 				className: "space-y-3",
-				children: A.map((e) => /* @__PURE__ */ l("div", {
+				children: j.map((e) => /* @__PURE__ */ l("div", {
 					className: "flex items-center gap-4",
 					children: [
 						/* @__PURE__ */ c("span", {
@@ -247,65 +238,70 @@ function y() {
 					className: "font-bold",
 					children: [
 						"$",
-						(A.reduce((e, t) => e + t.amount, 0) / 1e3).toFixed(0),
+						(j.reduce((e, t) => e + t.amount, 0) / 1e3).toFixed(0),
 						"K"
 					]
 				})]
 			})] })] }),
-			/* @__PURE__ */ l(d, { children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, { children: "Department Overview" }), /* @__PURE__ */ c(p, { children: "Key metrics by department" })] }), /* @__PURE__ */ l(f, { children: [/* @__PURE__ */ l("div", {
-				className: "mb-2 grid grid-cols-5 gap-2 border-b pb-2 text-xs font-medium text-text-secondary",
-				children: [
-					/* @__PURE__ */ c("span", { children: "Department" }),
-					/* @__PURE__ */ c("span", { children: "Head" }),
-					/* @__PURE__ */ c("span", {
-						className: "text-right",
-						children: "Employees"
-					}),
-					/* @__PURE__ */ c("span", {
-						className: "text-right",
-						children: "Budget"
-					}),
-					/* @__PURE__ */ c("span", {
-						className: "text-right",
-						children: "Status"
-					})
-				]
-			}), b.map((e) => /* @__PURE__ */ l("div", {
-				className: "grid grid-cols-5 gap-2 border-b py-2 text-sm last:border-0",
-				children: [
-					/* @__PURE__ */ c("span", {
-						className: "font-medium",
-						children: e.name
-					}),
-					/* @__PURE__ */ c("span", {
-						className: "text-text-secondary",
-						children: e.headName
-					}),
-					/* @__PURE__ */ c("span", {
-						className: "text-right",
-						children: e.employeeCount
-					}),
-					/* @__PURE__ */ l("span", {
-						className: "text-right",
-						children: [
-							"$",
-							(e.budget / 1e6).toFixed(1),
-							"M"
-						]
-					}),
-					/* @__PURE__ */ c("div", {
-						className: "text-right",
-						children: /* @__PURE__ */ c(u, {
+			/* @__PURE__ */ l(d, { children: [/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(h, { children: "Department Overview" }), /* @__PURE__ */ c(p, { children: "Key metrics by department" })] }), /* @__PURE__ */ c(f, { children: /* @__PURE__ */ c(y, {
+				columns: [
+					{
+						key: "name",
+						header: "Department",
+						priority: "primary",
+						cell: (e) => /* @__PURE__ */ c("span", {
+							className: "font-medium",
+							children: e.name
+						})
+					},
+					{
+						key: "head",
+						header: "Head",
+						priority: "secondary",
+						cell: (e) => /* @__PURE__ */ c("span", {
+							className: "text-text-secondary",
+							children: e.headName
+						})
+					},
+					{
+						key: "employees",
+						header: "Employees",
+						priority: "secondary",
+						cell: (e) => /* @__PURE__ */ c("span", {
+							className: "md:block md:text-right",
+							children: e.employeeCount
+						})
+					},
+					{
+						key: "budget",
+						header: "Budget",
+						priority: "secondary",
+						cell: (e) => /* @__PURE__ */ l("span", {
+							className: "md:block md:text-right",
+							children: [
+								"$",
+								(e.budget / 1e6).toFixed(1),
+								"M"
+							]
+						})
+					},
+					{
+						key: "status",
+						header: "Status",
+						priority: "primary",
+						cell: (e) => /* @__PURE__ */ c(u, {
 							variant: e.status === "active" ? "default" : "secondary",
 							children: e.status
 						})
-					})
-				]
-			}, e.id))] })] })
+					}
+				],
+				data: x,
+				rowKey: (e) => e.id
+			}) })] })
 		]
 	});
 }
 //#endregion
-export { y as DashboardAnalyticsPagePage };
+export { b as DashboardAnalyticsPagePage };
 
 //# sourceMappingURL=DashboardAnalyticsPagePage.js.map