@burdenoff/microfe-crewfoundry 2026.626.1 → 2026.703.2

package/dist/crewfoundry/pages/CompanyVendorManagementPagePage.js

@@ -1,102 +1,224 @@
 import { useCrewFoundryStore as e } from "../store/crewfoundryStore.js";
-import { Mail as t, Plus as n, Star as r } from "lucide-react";
-import { jsx as i, jsxs as a } from "react/jsx-runtime";
-import { Badge as o, Button as s, CardContent as c, CardHeader as l, CardTitle as u, GlassCard as d, GradientText as f, IllustratedEmptyState as p, PagePurpose as m } from "@burdenoff/fe-libs/ui";
+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";
 //#region src/crewfoundry/pages/CompanyVendorManagementPagePage.tsx
-function h() {
-	let { vendors: h } = e(), g = h.reduce((e, t) => e + t.contractValue, 0);
-	return /* @__PURE__ */ a("div", {
+var O = [
+	{
+		name: "name",
+		label: "Vendor name",
+		type: "text",
+		required: !0
+	},
+	{
+		name: "category",
+		label: "Category",
+		type: "text",
+		required: !0
+	},
+	{
+		name: "contactPerson",
+		label: "Contact person",
+		type: "text"
+	},
+	{
+		name: "email",
+		label: "Contact email",
+		type: "email"
+	},
+	{
+		name: "phone",
+		label: "Phone",
+		type: "text"
+	},
+	{
+		name: "status",
+		label: "Status",
+		type: "select",
+		options: [
+			{
+				label: "Active",
+				value: "active"
+			},
+			{
+				label: "Inactive",
+				value: "inactive"
+			},
+			{
+				label: "Pending",
+				value: "pending"
+			}
+		]
+	},
+	{
+		name: "contractValue",
+		label: "Contract value (USD)",
+		type: "number"
+	},
+	{
+		name: "rating",
+		label: "Rating (0-5)",
+		type: "number"
+	}
+], k = (e) => ({
+	name: e.name,
+	category: e.category,
+	contactPerson: e.contactPerson,
+	email: e.email,
+	phone: e.phone,
+	status: e.status,
+	contractValue: e.contractValue,
+	rating: e.rating
+}), A = (e, t) => ({
+	id: t?.id ?? crypto.randomUUID(),
+	name: String(e.name ?? ""),
+	category: String(e.category ?? ""),
+	contactPerson: String(e.contactPerson ?? ""),
+	email: String(e.email ?? ""),
+	phone: String(e.phone ?? ""),
+	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 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", {
 		className: "space-y-6 p-6",
-		children: [/* @__PURE__ */ a("div", {
-			className: "flex items-center justify-between",
-			children: [/* @__PURE__ */ a("div", { children: [
-				/* @__PURE__ */ i("h1", {
-					className: "text-2xl font-semibold",
-					children: /* @__PURE__ */ i(f, { children: "Vendor Management" })
-				}),
-				/* @__PURE__ */ a("p", {
-					className: "text-sm text-text-secondary",
-					children: [
-						h.length,
-						" vendors · $",
-						(g / 1e3).toFixed(0),
-						"K total contract value"
-					]
-				}),
-				/* @__PURE__ */ i(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__ */ a(s, {
-				size: "sm",
-				children: [/* @__PURE__ */ i(n, { className: "h-4 w-4 mr-1" }), "Add Vendor"]
-			})]
-		}), /* @__PURE__ */ i("div", {
-			className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
-			children: h.length === 0 ? /* @__PURE__ */ i("div", {
-				className: "col-span-full",
-				children: /* @__PURE__ */ i(p, {
-					illustration: "empty-data",
-					title: "No vendors yet",
-					description: "Add a vendor to start tracking external relationships."
-				})
-			}) : h.map((e, n) => /* @__PURE__ */ a(d, {
-				treatment: n === 0 ? "glass" : "plain",
-				glow: n === 0,
-				children: [/* @__PURE__ */ i(l, { children: /* @__PURE__ */ a("div", {
-					className: "flex items-center justify-between",
-					children: [/* @__PURE__ */ i(u, {
-						className: "text-base",
-						children: e.name
-					}), /* @__PURE__ */ i(o, {
-						variant: e.status === "active" ? "default" : "secondary",
-						className: "text-[10px]",
-						children: e.status
-					})]
-				}) }), /* @__PURE__ */ i(c, { children: /* @__PURE__ */ a("div", {
-					className: "space-y-2",
-					children: [
-						/* @__PURE__ */ i(o, {
-							variant: "outline",
-							className: "text-[10px]",
-							children: e.category
-						}),
-						/* @__PURE__ */ a("div", {
-							className: "grid grid-cols-2 gap-2 mt-2",
-							children: [/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
-								className: "text-xs text-text-secondary",
-								children: "Contact"
-							}), /* @__PURE__ */ i("p", {
-								className: "text-sm",
-								children: e.contactPerson
-							})] }), /* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("p", {
-								className: "text-xs text-text-secondary",
-								children: "Contract Value"
-							}), /* @__PURE__ */ a("p", {
-								className: "text-sm font-medium",
-								children: ["$", e.contractValue.toLocaleString()]
-							})] })]
-						}),
-						/* @__PURE__ */ a("div", {
-							className: "flex items-center justify-between pt-2 border-t mt-2",
-							children: [/* @__PURE__ */ a("div", {
-								className: "flex items-center gap-1 text-xs text-text-secondary",
-								children: [/* @__PURE__ */ i(t, { className: "h-3 w-3" }), e.email]
-							}), /* @__PURE__ */ a("div", {
-								className: "flex items-center gap-1",
-								children: [/* @__PURE__ */ i(r, { className: "h-3 w-3 text-status-warning-text" }), /* @__PURE__ */ i("span", {
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ l("div", { children: [
+					/* @__PURE__ */ c("h1", {
+						className: "text-2xl font-semibold",
+						children: /* @__PURE__ */ c(T, { children: "Vendor Management" })
+					}),
+					/* @__PURE__ */ l("p", {
+						className: "text-sm text-text-secondary",
+						children: [
+							j.length,
+							" vendors · $",
+							(I / 1e3).toFixed(0),
+							"K total contract value"
+						]
+					}),
+					/* @__PURE__ */ c(D, {
+						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, {
+					size: "sm",
+					onClick: () => F.openModal(),
+					children: [/* @__PURE__ */ c(a, { className: "h-4 w-4 mr-1" }), "Add Vendor"]
+				})]
+			}),
+			/* @__PURE__ */ c("div", {
+				className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+				children: j.length === 0 ? /* @__PURE__ */ c("div", {
+					className: "col-span-full",
+					children: /* @__PURE__ */ c(E, {
+						illustration: "empty-data",
+						title: "No vendors yet",
+						description: "Add a vendor to start tracking external relationships."
+					})
+				}) : j.map((e, t) => /* @__PURE__ */ l(w, {
+					treatment: t === 0 ? "glass" : "plain",
+					glow: t === 0,
+					children: [/* @__PURE__ */ c(S, { children: /* @__PURE__ */ l("div", {
+						className: "flex items-center justify-between",
+						children: [/* @__PURE__ */ c(C, {
+							className: "text-base",
+							children: e.name
+						}), /* @__PURE__ */ l("div", {
+							className: "flex items-center gap-1",
+							children: [
+								/* @__PURE__ */ c(y, {
+									variant: e.status === "active" ? "default" : "secondary",
+									className: "text-[10px]",
+									children: e.status
+								}),
+								/* @__PURE__ */ c(b, {
+									variant: "ghost",
+									size: "icon",
+									"aria-label": `Edit ${e.name}`,
+									onClick: () => F.openModal(e),
+									children: /* @__PURE__ */ c(i, { className: "h-4 w-4" })
+								}),
+								/* @__PURE__ */ l(u, { children: [/* @__PURE__ */ c(v, {
+									asChild: !0,
+									children: /* @__PURE__ */ c(b, {
+										variant: "ghost",
+										size: "icon",
+										"aria-label": `Delete ${e.name}`,
+										children: /* @__PURE__ */ c(s, { 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: [
+									"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),
+									children: "Delete"
+								})] })] })] })
+							]
+						})]
+					}) }), /* @__PURE__ */ c(x, { children: /* @__PURE__ */ l("div", {
+						className: "space-y-2",
+						children: [
+							/* @__PURE__ */ c(y, {
+								variant: "outline",
+								className: "text-[10px]",
+								children: e.category
+							}),
+							/* @__PURE__ */ l("div", {
+								className: "grid grid-cols-2 gap-2 mt-2",
+								children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
+									className: "text-xs text-text-secondary",
+									children: "Contact"
+								}), /* @__PURE__ */ c("p", {
 									className: "text-sm",
-									children: e.rating
+									children: e.contactPerson
+								})] }), /* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("p", {
+									className: "text-xs text-text-secondary",
+									children: "Contract Value"
+								}), /* @__PURE__ */ l("p", {
+									className: "text-sm font-medium",
+									children: ["$", e.contractValue.toLocaleString()]
+								})] })]
+							}),
+							/* @__PURE__ */ l("div", {
+								className: "flex items-center justify-between pt-2 border-t mt-2",
+								children: [/* @__PURE__ */ l("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", {
+									className: "flex items-center gap-1",
+									children: [/* @__PURE__ */ c(o, { className: "h-3 w-3 text-status-warning-text" }), /* @__PURE__ */ c("span", {
+										className: "text-sm",
+										children: e.rating
+									})]
 								})]
-							})]
-						})
-					]
-				}) })]
-			}, e.id))
-		})]
+							})
+						]
+					}) })]
+				}, e.id))
+			}),
+			/* @__PURE__ */ c(t, {
+				open: F.open,
+				onOpenChange: F.onOpenChange,
+				title: F.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",
+				onSubmit: async (e) => {
+					F.context ? await N(F.context.id, A(e, F.context)) : await M(A(e));
+				}
+			})
+		]
 	});
 }
 //#endregion
-export { h as CompanyVendorManagementPagePage };
+export { j 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  Badge,\n  Button,\n  CardContent,\n  CardHeader,\n  CardTitle,\n  GlassCard,\n  GradientText,\n  IllustratedEmptyState,\n  PagePurpose,\n} from '@burdenoff/fe-libs/ui';\nimport { DollarSign, Mail, Phone, Plus, Star } from 'lucide-react';\nimport { useCrewFoundryStore } from '../store/crewfoundryStore';\n\nexport function CompanyVendorManagementPagePage() {\n  const { vendors } = useCrewFoundryStore();\n  const totalContractValue = vendors.reduce((s, v) => s + v.contractValue, 0);\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\">\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                <Badge\n                  variant={vendor.status === 'active' ? 'default' : 'secondary'}\n                  className=\"text-[10px]\"\n                >\n                  {vendor.status}\n                </Badge>\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    </div>\n  );\n}\n"],"mappings":";;;;;AAcA,SAAgB,IAAkC;CAChD,IAAM,EAAE,eAAY,GAAqB,EACnC,IAAqB,EAAQ,QAAQ,GAAG,MAAM,IAAI,EAAE,eAAe,EAAE;AAE3E,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf,CACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD,EAAA,UAAA;IACE,kBAAC,MAAD;KAAI,WAAU;eACZ,kBAAC,GAAD,EAAA,UAAc,qBAAgC,CAAA;KAC3C,CAAA;IACL,kBAAC,KAAD;KAAG,WAAU;eAAb;MACG,EAAQ;MAAO;OAAc,IAAqB,KAAM,QAAQ,EAAE;MAAC;MAElE;;IACJ,kBAAC,GAAD;KAAa,WAAU;eAAO;KAA8I,CAAA;IACxK,EAAA,CAAA,EACN,kBAAC,GAAD;IAAQ,MAAK;cAAb,CACE,kBAAC,GAAD,EAAM,WAAU,gBAAiB,CAAA,EAAA,aAE1B;MACL;MACN,kBAAC,OAAD;GAAK,WAAU;aACZ,EAAQ,WAAW,IAClB,kBAAC,OAAD;IAAK,WAAU;cACb,kBAAC,GAAD;KAAuB,cAAa;KAAa,OAAM;KAAiB,aAAY;KAA2D,CAAA;IAC3I,CAAA,GAEN,EAAQ,KAAK,GAAQ,MACrB,kBAAC,GAAD;IAA2B,WAAW,MAAS,IAAI,UAAU;IAAS,MAAM,MAAS;cAArF,CACE,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAW,WAAU;gBAAa,EAAO;MAAiB,CAAA,EAC1D,kBAAC,GAAD;MACE,SAAS,EAAO,WAAW,WAAW,YAAY;MAClD,WAAU;gBAET,EAAO;MACF,CAAA,CACJ;QACK,CAAA,EACb,kBAAC,GAAD,EAAA,UACE,kBAAC,OAAD;KAAK,WAAU;eAAf;MACE,kBAAC,GAAD;OAAO,SAAQ;OAAU,WAAU;iBAChC,EAAO;OACF,CAAA;MACR,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAA8B;QAAW,CAAA,EACtD,kBAAC,KAAD;QAAG,WAAU;kBAAW,EAAO;QAAkB,CAAA,CAC7C,EAAA,CAAA,EACN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,KAAD;QAAG,WAAU;kBAA8B;QAAkB,CAAA,EAC7D,kBAAC,KAAD;QAAG,WAAU;kBAAb,CAAmC,KAAE,EAAO,cAAc,gBAAgB,CAAK;UAC3E,EAAA,CAAA,CACF;;MACN,kBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAM,WAAU,WAAY,CAAA,EAC3B,EAAO,MACJ;WACN,kBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,kBAAC,GAAD,EAAM,WAAU,oCAAqC,CAAA,EACrD,kBAAC,QAAD;SAAM,WAAU;mBAAW,EAAO;SAAc,CAAA,CAC5C;UACF;;MACF;QACM,CAAA,CACJ;MAvCI,EAAO,GAuCX,CACZ;GACE,CAAA,CACF"}
+{"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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"}