@fayz-ai/plugin-inventory 0.1.1 → 0.1.3

package/dist/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React11 = require('react');
+var React2 = require('react');
 var ui = require('@fayz-ai/ui');
 var saas = require('@fayz-ai/saas');
 var core = require('@fayz-ai/core');
@@ -10,7 +10,7 @@ var vanilla = require('zustand/vanilla');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
-var React11__default = /*#__PURE__*/_interopDefault(React11);
+var React2__default = /*#__PURE__*/_interopDefault(React2);
 
 // src/index.ts
 var ctx = saas.createPluginContext("InventoryPage");
@@ -21,339 +21,238 @@ var useInventoryStore = ctx.useStore;
 function DashboardView() {
   return /* @__PURE__ */ jsxRuntime.jsx(ui.DashboardCanvas, { surface: "plugin-home", domain: "inventory", showHeader: false, className: "space-y-6" });
 }
-var useColumns = (currency, t2) => [
-  {
-    accessorKey: "name",
-    header: t2("inventory.productList.product"),
-    enableSorting: true,
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: row.original.name }),
-      row.original.sku && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: row.original.sku })
-    ] })
-  },
-  {
-    accessorKey: "productType",
-    header: t2("inventory.productList.type"),
-    cell: ({ getValue }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium bg-muted text-muted-foreground capitalize", children: getValue() })
-  },
-  {
-    accessorKey: "currentQuantity",
-    header: t2("inventory.productList.stock"),
-    enableSorting: true,
-    meta: { align: "right" },
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-right block ${row.original.currentQuantity <= row.original.minQuantity ? "text-destructive font-medium" : ""}`, children: row.original.currentQuantity })
-  },
-  {
-    accessorKey: "costPrice",
-    header: t2("inventory.productList.cost"),
-    meta: { align: "right" },
-    cell: ({ getValue }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-right block text-muted-foreground", children: saas.formatCurrency(getValue(), currency) })
-  },
-  {
-    id: "value",
-    header: t2("inventory.productList.value"),
-    meta: { align: "right" },
-    cell: ({ row }) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-right block font-medium", children: saas.formatCurrency(row.original.currentQuantity * row.original.costPrice, currency) })
-  }
-];
+var TYPE_DESCRIPTION_KEYS = {
+  ingredient: "inventory.productForm.typeIngredient",
+  sale: "inventory.productForm.typeSale",
+  intermediate: "inventory.productForm.typeIntermediate",
+  asset: "inventory.productForm.typeAsset"
+};
+function buildProductEntity(t2, productTypes, currency) {
+  const typeOptions = productTypes.map((pt) => ({
+    label: pt.label,
+    value: pt.value,
+    description: TYPE_DESCRIPTION_KEYS[pt.value] ? t2(TYPE_DESCRIPTION_KEYS[pt.value]) : void 0
+  }));
+  const typeLabel = (v) => productTypes.find((p) => p.value === v)?.label ?? String(v ?? "");
+  const fields = [
+    // — General Information (form) + Product column (table) —
+    {
+      key: "name",
+      label: t2("inventory.productForm.name"),
+      type: "text",
+      required: true,
+      group: "general",
+      placeholder: t2("inventory.productForm.namePlaceholder"),
+      searchable: true,
+      showInTable: true,
+      sortable: true,
+      renderCell: (_v, row) => /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "font-medium", children: row.name }),
+        row.sku && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground", children: row.sku })
+      ] })
+    },
+    { key: "brand", label: t2("inventory.productForm.brand"), type: "text", group: "general", placeholder: t2("inventory.productForm.brandPlaceholder"), showInTable: false },
+    { key: "sku", label: t2("inventory.productForm.sku"), type: "text", group: "general", placeholder: t2("inventory.productForm.skuPlaceholder"), searchable: true, showInTable: false },
+    { key: "barcode", label: t2("inventory.productForm.barcode"), type: "text", group: "general", placeholder: t2("inventory.productForm.barcodePlaceholder"), searchable: true, showInTable: false },
+    { key: "description", label: t2("inventory.productForm.description"), type: "textarea", group: "general", span: 2, placeholder: t2("inventory.productForm.descriptionPlaceholder"), showInTable: false },
+    // — Classification (form: segmented) + Type column (table: badge) —
+    {
+      key: "productType",
+      label: t2("inventory.productForm.classification"),
+      type: "segmented",
+      group: "classification",
+      span: 2,
+      options: typeOptions,
+      showInTable: true,
+      sortable: false,
+      renderCell: (v) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "inline-flex items-center rounded-full px-2 py-0.5 text-[10px] font-medium bg-muted text-muted-foreground", children: typeLabel(v) })
+    },
+    // — Stock column (list only) — placed before Cost for the desired column order
+    {
+      key: "currentQuantity",
+      label: t2("inventory.productList.stock"),
+      type: "number",
+      showInForm: false,
+      showInTable: true,
+      sortable: true,
+      renderCell: (_v, row) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: `text-right block ${row.currentQuantity <= row.minQuantity ? "text-destructive font-medium" : ""}`, children: row.currentQuantity })
+    },
+    // — Pricing (form) + Cost column (table) —
+    {
+      key: "costPrice",
+      label: t2("inventory.productForm.costPrice"),
+      type: "currency",
+      group: "pricing",
+      currency: currency.code,
+      currencySymbol: currency.symbol,
+      currencyLocale: currency.locale,
+      showInTable: true,
+      sortable: false,
+      renderCell: (v) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-right block text-muted-foreground", children: saas.formatCurrency(Number(v) || 0, currency) })
+    },
+    // — Value column (list only): stock × cost —
+    {
+      key: "value",
+      label: t2("inventory.productList.value"),
+      type: "number",
+      showInForm: false,
+      showInTable: true,
+      sortable: false,
+      renderCell: (_v, row) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-right block font-medium", children: saas.formatCurrency((row.currentQuantity || 0) * (row.costPrice || 0), currency) })
+    },
+    { key: "salePrice", label: t2("inventory.productForm.salePrice"), type: "currency", group: "pricing", currency: currency.code, currencySymbol: currency.symbol, currencyLocale: currency.locale, showInTable: false },
+    {
+      key: "margin",
+      label: t2("inventory.productForm.margin"),
+      type: "computed",
+      group: "pricing",
+      showInTable: false,
+      compute: (vals) => {
+        const cost = Number(vals.costPrice) || 0;
+        const sale = Number(vals.salePrice) || 0;
+        if (sale <= 0 || cost <= 0) return null;
+        const m = (sale - cost) / cost * 100;
+        return { display: `${m.toFixed(1)}%`, tone: m >= 0 ? "positive" : "negative" };
+      }
+    },
+    // — Stock Levels (form only) —
+    { key: "minQuantity", label: t2("inventory.productForm.minQuantity"), type: "number", group: "stock", min: 0, placeholder: "0", hint: t2("inventory.productForm.minQuantityHint"), showInTable: false },
+    { key: "maxQuantity", label: t2("inventory.productForm.maxQuantity"), type: "number", group: "stock", min: 0, placeholder: t2("inventory.productForm.optional"), hint: t2("inventory.productForm.maxQuantityHint"), showInTable: false }
+  ];
+  return {
+    name: t2("inventory.stock.product"),
+    namePlural: t2("inventory.nav.products"),
+    icon: "Package",
+    displayField: "name",
+    fields,
+    fieldGroups: [
+      { id: "general", label: t2("inventory.productForm.generalInfo"), columns: 2, imageSlot: true },
+      { id: "classification", label: t2("inventory.productForm.classification"), description: t2("inventory.productForm.classificationDesc"), columns: 1 },
+      { id: "pricing", label: t2("inventory.productForm.pricing"), columns: 3 },
+      { id: "stock", label: t2("inventory.productForm.stockLevels"), description: t2("inventory.productForm.stockLevelsDesc"), columns: 2 }
+    ],
+    facets: [{ field: "productType", allLabel: t2("crud.list.allFacet") }]
+  };
+}
 function ProductListView({ onNew, onEdit }) {
   const t2 = core.useTranslation();
   const { currency, productTypes } = useInventoryConfig();
   const products = useInventoryStore((s) => s.products);
   const productsTotal = useInventoryStore((s) => s.productsTotal);
-  const productsLoading = useInventoryStore((s) => s.productsLoading);
+  useInventoryStore((s) => s.productsLoading);
   const fetchProducts = useInventoryStore((s) => s.fetchProducts);
-  const [search, setSearch] = React11.useState("");
-  const [typeFilter, setTypeFilter] = React11.useState();
-  React11.useEffect(() => {
-    fetchProducts({ productType: typeFilter, search: search || void 0 });
+  const [search, setSearch] = React2.useState("");
+  const [typeFilter, setTypeFilter] = React2.useState();
+  const [loadedOnce, setLoadedOnce] = React2.useState(false);
+  React2.useEffect(() => {
+    let active = true;
+    Promise.resolve(fetchProducts({ productType: typeFilter, search: search || void 0 })).finally(() => {
+      if (active) setLoadedOnce(true);
+    });
+    return () => {
+      active = false;
+    };
   }, [typeFilter, search]);
-  const columns = useColumns(currency, t2);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ui.SubpageHeader, { title: t2("inventory.productList.title"), subtitle: t2("inventory.productList.subtitle", { count: String(productsTotal) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.ListView,
-      {
-        columns,
-        data: products,
-        loading: productsLoading,
-        searchPlaceholder: t2("inventory.productList.searchPlaceholder"),
-        search,
-        onSearchChange: setSearch,
-        searchDebounce: 0,
-        tags: productTypes.map((t3) => ({ value: t3.value, label: t3.label })),
-        activeTag: typeFilter,
-        onTagChange: setTypeFilter,
-        newLabel: t2("inventory.productList.newProduct"),
-        onNew,
-        onRowClick: (row) => onEdit?.(row.id),
-        emptyIcon: lucideReact.Package,
-        emptyMessage: t2("inventory.productList.empty"),
-        emptyActionLabel: onNew ? t2("inventory.productList.createFirst") : void 0,
-        onEmptyAction: onNew
-      }
-    )
-  ] });
-}
-var TYPE_DESCRIPTION_KEYS = {
-  ingredient: "inventory.productForm.typeIngredient",
-  sale: "inventory.productForm.typeSale",
-  intermediate: "inventory.productForm.typeIntermediate",
-  asset: "inventory.productForm.typeAsset"
-};
-function FormSection({ title, subtitle, children }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "rounded-lg border bg-card shadow-sm", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "px-5 py-3 border-b", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "text-sm font-semibold", children: title }),
-      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: subtitle })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "p-5 space-y-4", children })
-  ] });
+  const entity = React2.useMemo(() => buildProductEntity(t2, productTypes, currency), [t2, productTypes, currency]);
+  const facets = React2.useMemo(() => [{
+    field: "productType",
+    allLabel: t2("crud.list.allFacet"),
+    options: productTypes.map((p) => ({ value: p.value, label: p.label }))
+  }], [productTypes, t2]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    saas.CrudListView,
+    {
+      entityDef: entity,
+      items: loadedOnce ? products : null,
+      total: productsTotal,
+      search,
+      onSearchChange: setSearch,
+      searchPlaceholder: t2("inventory.productList.searchPlaceholder"),
+      facets,
+      activeFilters: { productType: typeFilter },
+      onFacetChange: (_field, value) => setTypeFilter(value),
+      onNew,
+      addLabel: t2("inventory.productList.newProduct"),
+      onRowClick: (row) => onEdit?.(row.id)
+    }
+  );
 }
-function ProductFormView({ editId, onSaved }) {
+function ProductCrudForm({ editId, onSaved }) {
   const t2 = core.useTranslation();
   const { productTypes, currency } = useInventoryConfig();
   const provider = useInventoryProvider();
   const createProduct = useInventoryStore((s) => s.createProduct);
   const isEdit = !!editId;
-  const [loaded, setLoaded] = React11.useState(false);
-  const [name, setName] = React11.useState("");
-  const [sku, setSku] = React11.useState("");
-  const [barcode, setBarcode] = React11.useState("");
-  const [brand, setBrand] = React11.useState("");
-  const [productType, setProductType] = React11.useState(productTypes[0]?.value ?? "ingredient");
-  const [costPrice, setCostPrice] = React11.useState(0);
-  const [salePrice, setSalePrice] = React11.useState(0);
-  const [minQuantity, setMinQuantity] = React11.useState(0);
-  const [maxQuantity, setMaxQuantity] = React11.useState(0);
-  const [description, setDescription] = React11.useState("");
-  const [saving, setSaving] = React11.useState(false);
-  React11.useEffect(() => {
-    if (!editId || loaded) return;
+  const [initialData, setInitialData] = React2__default.default.useState(isEdit ? null : {});
+  const [headerName, setHeaderName] = React2__default.default.useState("");
+  React2__default.default.useEffect(() => {
+    if (!editId) return;
+    let cancelled = false;
     (async () => {
-      const product = await provider.getProductById(editId);
-      if (!product) return;
-      setName(product.name);
-      setSku(product.sku ?? "");
-      setBarcode(product.barcode ?? "");
-      setBrand(product.brand ?? "");
-      setProductType(product.productType);
-      setCostPrice(product.costPrice);
-      setSalePrice(product.salePrice ?? 0);
-      setMinQuantity(product.minQuantity);
-      setMaxQuantity(product.maxQuantity ?? 0);
-      setDescription(product.description ?? "");
-      setLoaded(true);
+      const p = await provider.getProductById(editId);
+      if (cancelled) return;
+      setHeaderName(p?.name ?? "");
+      setInitialData(
+        p ? {
+          name: p.name,
+          brand: p.brand ?? "",
+          sku: p.sku ?? "",
+          barcode: p.barcode ?? "",
+          description: p.description ?? "",
+          productType: p.productType,
+          costPrice: p.costPrice,
+          salePrice: p.salePrice ?? 0,
+          minQuantity: p.minQuantity,
+          maxQuantity: p.maxQuantity ?? 0
+        } : {}
+      );
     })();
+    return () => {
+      cancelled = true;
+    };
   }, [editId]);
-  const fields = { name, sku, barcode, brand, productType, costPrice, salePrice, minQuantity, maxQuantity, description };
-  const ready = !editId || loaded;
-  const snapshot = React11__default.default.useRef(null);
-  React11.useEffect(() => {
-    if (ready && snapshot.current === null) snapshot.current = JSON.stringify(fields);
-  }, [ready]);
-  const dirty = snapshot.current !== null && JSON.stringify(fields) !== snapshot.current;
-  ui.useSaveBar({
-    dirty,
-    saving,
-    onSave: () => {
-      void handleSave();
-    },
-    onDiscard: () => onSaved?.(),
-    saveLabel: t2("inventory.productForm.save")
-  });
-  async function handleSave() {
-    if (!name.trim()) {
+  const entity = React2__default.default.useMemo(() => buildProductEntity(t2, productTypes, currency), [t2, productTypes, currency]);
+  async function save(values) {
+    const name = String(values.name ?? "").trim();
+    if (!name) {
       ui.toast.error(t2("common.formIncomplete"));
-      return;
+      throw new Error("name required");
     }
-    setSaving(true);
-    try {
-      if (isEdit && editId) {
-        await provider.updateProduct(editId, {
-          name,
-          sku: sku || void 0,
-          barcode: barcode || void 0,
-          brand: brand || void 0,
-          productType,
-          costPrice,
-          salePrice: salePrice || void 0,
-          minQuantity,
-          maxQuantity: maxQuantity || void 0,
-          description: description || void 0
-        });
-      } else {
-        await createProduct({
-          name,
-          sku: sku || void 0,
-          barcode: barcode || void 0,
-          brand: brand || void 0,
-          productType,
-          costPrice,
-          salePrice: salePrice || void 0,
-          minQuantity,
-          maxQuantity: maxQuantity || void 0,
-          description: description || void 0
-        });
-      }
-      onSaved?.();
-    } finally {
-      setSaving(false);
+    const payload = {
+      name,
+      sku: values.sku || void 0,
+      barcode: values.barcode || void 0,
+      brand: values.brand || void 0,
+      productType: values.productType ?? productTypes[0]?.value,
+      costPrice: Number(values.costPrice) || 0,
+      salePrice: Number(values.salePrice) || void 0,
+      minQuantity: Number(values.minQuantity) || 0,
+      maxQuantity: Number(values.maxQuantity) || void 0,
+      description: values.description || void 0
+    };
+    if (isEdit && editId) {
+      await provider.updateProduct(editId, payload);
+    } else {
+      await createProduct(payload);
     }
+    onSaved?.();
   }
-  const title = isEdit ? name || t2("inventory.productForm.editProduct") : t2("inventory.productForm.newProduct");
+  const title = isEdit ? headerName || t2("inventory.productForm.editProduct") : t2("inventory.productForm.newProduct");
   const subtitle = isEdit ? void 0 : t2("inventory.productForm.addToCatalog");
-  const margin = salePrice > 0 && costPrice > 0 ? ((salePrice - costPrice) / costPrice * 100).toFixed(1) : null;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-5", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      ui.SubpageHeader,
+    /* @__PURE__ */ jsxRuntime.jsx(ui.SubpageHeader, { title, subtitle, onBack: onSaved, parentLabel: t2("inventory.nav.products") }),
+    initialData && /* @__PURE__ */ jsxRuntime.jsx(
+      saas.CrudFormPage,
       {
-        title,
-        subtitle,
-        onBack: onSaved,
-        parentLabel: t2("inventory.nav.products")
+        entityDef: entity,
+        mode: isEdit ? "edit" : "create",
+        initialData,
+        onSubmit: save,
+        onCancel: () => onSaved?.(),
+        namePlural: t2("inventory.nav.products"),
+        hideBreadcrumb: true
       }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsxs(FormSection, { title: t2("inventory.productForm.generalInfo"), children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-20 h-20 rounded-lg border-2 border-dashed border-muted flex items-center justify-center text-muted-foreground hover:border-primary/30 hover:text-primary/50 transition-colors cursor-pointer", children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ImagePlus, { className: "h-5 w-5" }) }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 grid gap-3 sm:grid-cols-2", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "sm:col-span-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsxs("label", { className: "text-xs font-medium text-muted-foreground", children: [
-              t2("inventory.productForm.name"),
-              " *"
-            ] }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "text",
-                value: name,
-                onChange: (e) => setName(e.target.value),
-                placeholder: t2("inventory.productForm.namePlaceholder"),
-                autoFocus: true,
-                className: "w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-            /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-muted-foreground", children: t2("inventory.productForm.brand") }),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              "input",
-              {
-                type: "text",
-                value: brand,
-                onChange: (e) => setBrand(e.target.value),
-                placeholder: t2("inventory.productForm.brandPlaceholder"),
-                className: "w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-              }
-            )
-          ] })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-3 sm:grid-cols-2", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-muted-foreground", children: t2("inventory.productForm.sku") }),
-          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", value: sku, onChange: (e) => setSku(e.target.value), placeholder: t2("inventory.productForm.skuPlaceholder"), className: "w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" })
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-muted-foreground", children: t2("inventory.productForm.barcode") }),
-          /* @__PURE__ */ jsxRuntime.jsx("input", { type: "text", value: barcode, onChange: (e) => setBarcode(e.target.value), placeholder: t2("inventory.productForm.barcodePlaceholder"), className: "w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring" })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-muted-foreground", children: t2("inventory.productForm.description") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "textarea",
-          {
-            value: description,
-            onChange: (e) => setDescription(e.target.value),
-            rows: 2,
-            placeholder: t2("inventory.productForm.descriptionPlaceholder"),
-            className: "w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring resize-none"
-          }
-        )
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(FormSection, { title: t2("inventory.productForm.classification"), subtitle: t2("inventory.productForm.classificationDesc"), children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-2 sm:grid-cols-2 lg:grid-cols-4", children: productTypes.map((pt) => {
-      const active = productType === pt.value;
-      const descKey = TYPE_DESCRIPTION_KEYS[pt.value];
-      const desc = descKey ? t2(descKey) : "";
-      return /* @__PURE__ */ jsxRuntime.jsxs(
-        "button",
-        {
-          onClick: () => setProductType(pt.value),
-          className: `rounded-lg border-2 p-3 text-left transition-all ${active ? "border-primary bg-primary/5" : "border-transparent bg-muted/20 hover:bg-muted/40"}`,
-          children: [
-            /* @__PURE__ */ jsxRuntime.jsx("p", { className: `text-sm font-medium ${active ? "text-primary" : ""}`, children: pt.label }),
-            desc && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground mt-0.5 leading-tight", children: desc })
-          ]
-        },
-        pt.value
-      );
-    }) }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(FormSection, { title: t2("inventory.productForm.pricing"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.CurrencyInput,
-        {
-          label: t2("inventory.productForm.costPrice"),
-          value: costPrice,
-          onChange: setCostPrice,
-          symbol: currency.symbol,
-          locale: currency.locale,
-          currencyCode: currency.code
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        ui.CurrencyInput,
-        {
-          label: t2("inventory.productForm.salePrice"),
-          value: salePrice,
-          onChange: setSalePrice,
-          symbol: currency.symbol,
-          locale: currency.locale,
-          currencyCode: currency.code
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-muted-foreground", children: t2("inventory.productForm.margin") }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-1 rounded-lg border bg-muted/20 px-3 py-2 text-sm tabular-nums text-right", children: margin !== null ? /* @__PURE__ */ jsxRuntime.jsxs("span", { className: Number(margin) >= 0 ? "text-success" : "text-destructive", children: [
-          margin,
-          "%"
-        ] }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: "\u2014" }) })
-      ] })
-    ] }) }),
-    /* @__PURE__ */ jsxRuntime.jsx(FormSection, { title: t2("inventory.productForm.stockLevels"), subtitle: t2("inventory.productForm.stockLevelsDesc"), children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid gap-4 sm:grid-cols-2 max-w-md", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-muted-foreground", children: t2("inventory.productForm.minQuantity") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "number",
-            min: 0,
-            value: minQuantity,
-            onChange: (e) => setMinQuantity(Number(e.target.value) || 0),
-            placeholder: "0",
-            className: "w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground mt-1", children: t2("inventory.productForm.minQuantityHint") })
-      ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-        /* @__PURE__ */ jsxRuntime.jsx("label", { className: "text-xs font-medium text-muted-foreground", children: t2("inventory.productForm.maxQuantity") }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "input",
-          {
-            type: "number",
-            min: 0,
-            value: maxQuantity,
-            onChange: (e) => setMaxQuantity(Number(e.target.value) || 0),
-            placeholder: t2("inventory.productForm.optional"),
-            className: "w-full mt-1 rounded-input border border-input  bg-card shadow-[inset_0_1px_0_rgb(0_0_0_/0.06)] px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-[10px] text-muted-foreground mt-1", children: t2("inventory.productForm.maxQuantityHint") })
-      ] })
-    ] }) })
+    )
   ] });
 }
 var MOVEMENT_TYPES = [
@@ -441,26 +340,38 @@ function StockMovementView({ defaultType, onSaved, viewMovement }) {
   const fetchProducts = useInventoryStore((s) => s.fetchProducts);
   const fetchLocations = useInventoryStore((s) => s.fetchLocations);
   const createMovement = useInventoryStore((s) => s.createMovement);
-  const [step, setStep] = React11.useState(1);
-  const [positions, setPositions] = React11.useState([]);
-  const [movementType, setMovementType] = React11.useState(defaultType);
-  const [productId, setProductId] = React11.useState("");
-  const [productLabel, setProductLabel] = React11.useState("");
-  const [quantity, setQuantity] = React11.useState(1);
-  const [unitCost, setUnitCost] = React11.useState(0);
-  const [locationId, setLocationId] = React11.useState("");
-  const [destLocationId, setDestLocationId] = React11.useState("");
-  const [reason, setReason] = React11.useState("");
-  const [documentNumber, setDocumentNumber] = React11.useState("");
-  const [notes, setNotes] = React11.useState("");
-  const [batchNumber, setBatchNumber] = React11.useState("");
-  const [expirationDate, setExpirationDate] = React11.useState("");
-  const [saving, setSaving] = React11.useState(false);
-  const [savedMovement, setSavedMovement] = React11.useState(null);
-  React11.useEffect(() => {
+  const [step, setStep] = React2.useState(1);
+  const [positions, setPositions] = React2.useState([]);
+  const [movementType, setMovementType] = React2.useState(defaultType);
+  const [productId, setProductId] = React2.useState("");
+  const [productLabel, setProductLabel] = React2.useState("");
+  const [quantity, setQuantity] = React2.useState(1);
+  const [unitCost, setUnitCost] = React2.useState(0);
+  const [locationId, setLocationId] = React2.useState("");
+  const [destLocationId, setDestLocationId] = React2.useState("");
+  const [reason, setReason] = React2.useState("");
+  const [documentNumber, setDocumentNumber] = React2.useState("");
+  const [notes, setNotes] = React2.useState("");
+  const [batchNumber, setBatchNumber] = React2.useState("");
+  const [expirationDate, setExpirationDate] = React2.useState("");
+  const [saving, setSaving] = React2.useState(false);
+  const [savedMovement, setSavedMovement] = React2.useState(null);
+  React2.useEffect(() => {
     fetchProducts({});
     fetchLocations();
   }, []);
+  const positionByLocation = React2.useMemo(() => {
+    const map = {};
+    for (const pos of positions) {
+      if (pos.stockLocationId) {
+        map[pos.stockLocationId] = (map[pos.stockLocationId] ?? 0) + pos.quantity;
+      }
+    }
+    return map;
+  }, [positions]);
+  const sortedLocations = React2.useMemo(() => {
+    return [...locations].sort((a, b) => (positionByLocation[b.id] ?? 0) - (positionByLocation[a.id] ?? 0));
+  }, [locations, positionByLocation]);
   if (viewMovement) {
     return /* @__PURE__ */ jsxRuntime.jsx(MovementDetail, { movement: viewMovement, currency, onClose: () => onSaved?.() });
   }
@@ -495,18 +406,6 @@ function StockMovementView({ defaultType, onSaved, viewMovement }) {
       setPositions([]);
     }
   }
-  const positionByLocation = React11.useMemo(() => {
-    const map = {};
-    for (const pos of positions) {
-      if (pos.stockLocationId) {
-        map[pos.stockLocationId] = (map[pos.stockLocationId] ?? 0) + pos.quantity;
-      }
-    }
-    return map;
-  }, [positions]);
-  const sortedLocations = React11.useMemo(() => {
-    return [...locations].sort((a, b) => (positionByLocation[b.id] ?? 0) - (positionByLocation[a.id] ?? 0));
-  }, [locations, positionByLocation]);
   const canProceedStep1 = !!productId;
   const canProceedStep2 = quantity > 0 && (!needsReason || reason.trim()) && (!needsDest || destLocationId);
   const title = defaultType === "entry" ? t2("inventory.stock.entry") : defaultType === "exit" ? t2("inventory.stock.exit") : t2("inventory.stock.movement");
@@ -810,11 +709,11 @@ function MovementHistoryView({ onViewDetail } = {}) {
   const movements = useInventoryStore((s) => s.movements);
   const movementsLoading = useInventoryStore((s) => s.movementsLoading);
   const fetchMovements = useInventoryStore((s) => s.fetchMovements);
-  const [search, setSearch] = React11.useState("");
-  React11.useEffect(() => {
+  const [search, setSearch] = React2.useState("");
+  React2.useEffect(() => {
     fetchMovements({ search: search || void 0 });
   }, [search]);
-  const columns = React11.useMemo(() => [
+  const columns = React2.useMemo(() => [
     {
       accessorKey: "movementDate",
       header: t2("inventory.history.columnDate"),
@@ -901,7 +800,7 @@ function RecipesView({ onNew, onView }) {
   const recipes = useInventoryStore((s) => s.recipes);
   const recipesLoading = useInventoryStore((s) => s.recipesLoading);
   const fetchRecipes = useInventoryStore((s) => s.fetchRecipes);
-  React11.useEffect(() => {
+  React2.useEffect(() => {
     fetchRecipes();
   }, []);
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
@@ -973,15 +872,15 @@ function RecipeFormView({ onSaved }) {
   const t2 = core.useTranslation();
   const provider = useInventoryProvider();
   const createRecipe = useInventoryStore((s) => s.createRecipe);
-  const [name, setName] = React11.useState("");
-  const [description, setDescription] = React11.useState("");
-  const [productId, setProductId] = React11.useState("");
-  const [productName, setProductName] = React11.useState("");
-  const [yieldQuantity, setYieldQuantity] = React11.useState(1);
-  const [prepTime, setPrepTime] = React11.useState("");
-  const [instructions, setInstructions] = React11.useState("");
-  const [ingredients, setIngredients] = React11.useState([]);
-  const [saving, setSaving] = React11.useState(false);
+  const [name, setName] = React2.useState("");
+  const [description, setDescription] = React2.useState("");
+  const [productId, setProductId] = React2.useState("");
+  const [productName, setProductName] = React2.useState("");
+  const [yieldQuantity, setYieldQuantity] = React2.useState(1);
+  const [prepTime, setPrepTime] = React2.useState("");
+  const [instructions, setInstructions] = React2.useState("");
+  const [ingredients, setIngredients] = React2.useState([]);
+  const [saving, setSaving] = React2.useState(false);
   function addIngredient() {
     setIngredients([...ingredients, { _id: nextId(), productId: "", productName: "", quantity: 1, unitId: "", unitName: "", notes: "" }]);
   }
@@ -1193,10 +1092,10 @@ function DetailSkeleton() {
 function RecipeDetailView({ recipeId, onBack }) {
   const t2 = core.useTranslation();
   const provider = useInventoryProvider();
-  const [recipe, setRecipe] = React11.useState(null);
-  const [ingredients, setIngredients] = React11.useState([]);
-  const [loading, setLoading] = React11.useState(true);
-  React11.useEffect(() => {
+  const [recipe, setRecipe] = React2.useState(null);
+  const [ingredients, setIngredients] = React2.useState([]);
+  const [loading, setLoading] = React2.useState(true);
+  React2.useEffect(() => {
     setLoading(true);
     Promise.all([
       provider.getRecipeById(recipeId),
@@ -1355,7 +1254,7 @@ var STEPS = [
 ];
 function InventoryOnboarding({ onComplete }) {
   const t2 = core.useTranslation();
-  const [step, setStep] = React11.useState(0);
+  const [step, setStep] = React2.useState(0);
   const current = STEPS[step];
   const isLast = step === STEPS.length - 1;
   const Icon = current.icon;
@@ -1434,7 +1333,7 @@ function InventoryPage({ config, provider, store, registries }) {
     "recipes-detail": 1,
     settings: 1
   }, "dashboard");
-  const [onboardingComplete, setOnboardingComplete] = React11.useState(() => {
+  const [onboardingComplete, setOnboardingComplete] = React2.useState(() => {
     try {
       return localStorage.getItem("saas-core:inventory-onboarded") === "true";
     } catch {
@@ -1444,7 +1343,7 @@ function InventoryPage({ config, provider, store, registries }) {
   const isSettings = view === "settings";
   const isSummary = view === "dashboard" || view === "";
   const nav = buildNav(config, view, navigate, t2);
-  const quickActions = React11.useMemo(() => {
+  const quickActions = React2.useMemo(() => {
     const actions = [
       {
         id: "new-product",
@@ -1490,8 +1389,8 @@ function InventoryPage({ config, provider, store, registries }) {
   }
   const renderView = saas.createViewRouter([
     { id: "products-list", render: () => /* @__PURE__ */ jsxRuntime.jsx(ProductListView, { onNew: () => navigate("products-new"), onEdit: (id) => navigate(`products-edit:${id}`) }) },
-    { id: "products-new", render: () => /* @__PURE__ */ jsxRuntime.jsx(ProductFormView, { onSaved: () => navigate("products-list") }) },
-    { id: "products-edit", render: ({ id }) => /* @__PURE__ */ jsxRuntime.jsx(ProductFormView, { editId: id, onSaved: () => navigate("products-list") }) },
+    { id: "products-new", render: () => /* @__PURE__ */ jsxRuntime.jsx(ProductCrudForm, { onSaved: () => navigate("products-list") }) },
+    { id: "products-edit", render: ({ id }) => /* @__PURE__ */ jsxRuntime.jsx(ProductCrudForm, { editId: id, onSaved: () => navigate("products-list") }) },
     { id: "stock-entry", render: () => /* @__PURE__ */ jsxRuntime.jsx(StockMovementView, { defaultType: "entry", onSaved: () => navigate("stock-history") }) },
     { id: "stock-exit", render: () => /* @__PURE__ */ jsxRuntime.jsx(StockMovementView, { defaultType: "exit", onSaved: () => navigate("stock-history") }) },
     { id: "stock-history", render: () => /* @__PURE__ */ jsxRuntime.jsx(MovementHistoryView, { onViewDetail: (id) => navigate(`stock-detail:${id}`) }) },
@@ -1527,7 +1426,7 @@ function InventoryPage({ config, provider, store, registries }) {
 }
 function useEnsureSummary() {
   const fetchSummary = useInventoryStore((s) => s.fetchSummary);
-  React11.useEffect(() => {
+  React2.useEffect(() => {
     void fetchSummary();
   }, []);
 }
@@ -1888,6 +1787,7 @@ function createSupabaseInventoryProvider() {
       const { core} = getClients();
       let qb = core.from("products").select("*", { count: "exact" });
       if (query.search) qb = qb.ilike("name", `%${query.search}%`);
+      if (query.productType) qb = qb.eq("metadata->>productType", query.productType);
       if (query.isActive !== void 0) qb = qb.eq("is_active", query.isActive);
       if (query.lowStockOnly) qb = qb.lte("stock", 0);
       const page = query.page ?? 1;
@@ -2856,7 +2756,7 @@ function createInventoryPlugin(options) {
   );
   const store = createInventoryStore(provider);
   const dashboardWidgets = createInventoryDashboardWidgets({ config, provider, store });
-  const PageComponent = () => React11__default.default.createElement(InventoryPage, { config, provider, store, registries: inventoryRegistries });
+  const PageComponent = () => React2__default.default.createElement(InventoryPage, { config, provider, store, registries: inventoryRegistries });
   return {
     id: "inventory",
     name: config.labels.pageTitle,
@@ -2919,7 +2819,7 @@ function createInventoryPlugin(options) {
         label: "Inventory",
         icon: "Package",
         component: (() => {
-          const Tab = () => React11__default.default.createElement(InventoryGeneralSettings);
+          const Tab = () => React2__default.default.createElement(InventoryGeneralSettings);
           Tab.displayName = "InventorySettingsTab";
           return Tab;
         })(),