@feedmepos/mf-inventory-portal 1.2.65 → 1.2.66-dev.2

package/dist/RecipeView-CxdmHDdY.js

@@ -0,0 +1,1690 @@
+import { defineComponent as J, ref as N, onMounted as Fe, resolveComponent as R, openBlock as k, createElementBlock as A, Fragment as oe, createElementVNode as y, toDisplayString as z, createVNode as V, createCommentVNode as E, computed as S, unref as s, normalizeClass as _e, withCtx as K, h as O, createBlock as D, renderList as se, watch as Ce, isRef as fe, normalizeStyle as Ie, Teleport as Re, normalizeProps as Ae, guardReactiveProps as Se } from "vue";
+import { a as Y, c as ue, S as $e, F as ie, w as Ee, x as Te, j as ve, u as Ue } from "./app-ClBmHSAd.js";
+import { useDialog as me, useSnackbar as ce, components as ee, useProxiedModel as ye, useBreakpoints as Pe } from "@feedmepos/ui-library";
+import { i as De, _ as Ge } from "./is-linked-ingredient-error-fJ2TJb3z.js";
+import { F as M } from "./form-mode.enum-BKiNVH6A.js";
+import { _ as he } from "./IngredientBindedItem.vue_vue_type_script_setup_true_lang-BRQ82pXx.js";
+import { defineStore as Me, storeToRefs as ze } from "pinia";
+import { D as be, R as te } from "./row-action.enum-BcW_L_nE.js";
+import { c as Ne } from "./component-DpCUABT3.js";
+import { a as j, c as Ve } from "./number-BrjYTvCG.js";
+import { useI18n as Q, useCoreStore as Ke } from "@feedmepos/mf-common";
+import { u as Le, _ as Oe } from "./SingleColumnLayout.vue_vue_type_script_setup_true_lang-mvRR4CrP.js";
+import { b as ke, c as pe, I as je, A as re, U as xe, R as Ye } from "./rules-Cls3M_gA.js";
+import { _ as qe } from "./InventoryBindingForm.vue_vue_type_script_setup_true_lang-DP6TMTY3.js";
+import { a as ae } from "./FmMultiselectDialog-uzanqsJE.js";
+import { d as Be } from "./defineDeepModel-BaqD0Vf4.js";
+import { L as He, P as We, D as Je } from "./app-DiX-EfV6.js";
+import { _ as Qe, c as Xe, d as Ze } from "./FmUnitInput.vue_vue_type_script_setup_true_lang-Bvr1CV0g.js";
+import { u as en } from "./FmMultiselectDialog-CaqfXI51.js";
+import { u as nn } from "./vue-i18n-B7BiaQqD.js";
+import { F as tn, u as on } from "./feature-BJaM6Q_V.js";
+import { _ as ln } from "./FmCustomAttribute.vue_vue_type_script_setup_true_lang-D-IWRjRD.js";
+import { _ as sn, F as ge } from "./TableActionableRow.vue_vue_type_script_setup_true_lang-Ca_eYa8-.js";
+import { b as an, d as rn } from "./xlsx.util-CsyLStS7.js";
+import { f as dn } from "./date2-B04oAq4m.js";
+import { _ as un } from "./FmInventoryTableToolbar.vue_vue_type_script_setup_true_lang-B3KzU-nc.js";
+const mn = {
+  key: 0,
+  class: "flex flex-col items-center w-full h-full gap-24"
+}, cn = { key: 1 }, pn = { key: 0 }, fn = /* @__PURE__ */ J({
+  __name: "DeleteDialog",
+  props: {
+    type: {},
+    data: {},
+    message: {},
+    bindedItems: {}
+  },
+  setup(f) {
+    const B = f, b = N(B.bindedItems || []), d = N(!1);
+    Fe(() => {
+      m();
+    });
+    async function m() {
+      var l, _;
+      !d.value && ((l = B.data) != null && l._id) && (d.value = !0, b.value = await Y().getAffectedMenu((_ = B.data) == null ? void 0 : _._id), d.value = !1);
+    }
+    return (l, _) => {
+      const t = R("FmSpacer"), n = R("FmCircularProgress");
+      return k(), A(oe, null, [
+        y("p", null, z(l.message), 1),
+        d.value ? (k(), A("div", mn, [
+          V(t),
+          y("div", null, [
+            V(n, { size: "xl" })
+          ]),
+          _[0] || (_[0] = y("div", { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary pl-8" }, "Loading...", -1)),
+          V(t)
+        ])) : (k(), A("div", cn, [
+          _[2] || (_[2] = y("br", null, null, -1)),
+          b.value.length > 0 ? (k(), A("div", pn, [
+            _[1] || (_[1] = y("p", { class: "fm-typo-en-body-lg-600" }, "Affected menu items:", -1)),
+            V(he, {
+              name: "Menu",
+              bindings: b.value
+            }, null, 8, ["bindings"])
+          ])) : E("", !0)
+        ]))
+      ], 64);
+    };
+  }
+}), de = Me("recipeForm", function() {
+  const B = me(), b = ce(), d = Y(), m = N(!1), l = N();
+  function _() {
+    const e = {
+      recipe: {},
+      mode: M.CREATE,
+      show: !0,
+      "onUpdate:show"(i) {
+        l.value.show = i;
+      }
+    };
+    l.value = e;
+  }
+  async function t(e) {
+    const i = {
+      recipe: ue(e),
+      mode: M.UPDATE,
+      show: !0,
+      "onUpdate:show"(r) {
+        l.value.show = r;
+      }
+    };
+    l.value = i;
+  }
+  async function n(e) {
+    m.value = !0;
+    try {
+      await d.deleteRecipe(e), b.open({
+        title: "Success",
+        message: `Deleted ${e.name}`,
+        type: "success"
+      });
+    } catch (i) {
+      i instanceof $e && De(i) ? B.open({
+        title: "Cannot delete recipe",
+        contentComponent: Ge,
+        contentComponentProps: {
+          subject: (e == null ? void 0 : e.name) ?? "",
+          items: i.errorResponse.message
+        },
+        secondaryActions: {
+          text: "Close",
+          close: !0
+        }
+      }) : console.log("unable to delete recipe", i), b.open({
+        title: `Cannot delete ${e == null ? void 0 : e.name}`,
+        message: "Please try again.",
+        type: "error"
+      }), console.error("failed to delete recipe", i);
+    } finally {
+      m.value = !1;
+    }
+  }
+  function o(e) {
+    B.open({
+      title: `Delete ${(e == null ? void 0 : e.name) ?? "recipe"}?`,
+      closeButton: !1,
+      primaryActions: {
+        text: "Delete",
+        close: !0,
+        variant: "destructive"
+      },
+      secondaryActions: {
+        text: "Cancel",
+        close: !0
+      },
+      contentComponent: fn,
+      contentComponentProps: {
+        type: "menu",
+        data: e,
+        message: "You may not be able to delete this recipe if it is linked in any of the inventory modules."
+      }
+    }).onPrimary(() => n(e));
+  }
+  return {
+    createRecipe: _,
+    updateRecipe: t,
+    deleteRecipe: o,
+    recipeDialogProps: l,
+    recipeViewLoading: m
+  };
+});
+function vn() {
+  const { updateRecipe: f, deleteRecipe: B } = de(), b = Y(), { t: d } = Q();
+  async function m(n, o) {
+    const e = ue(o);
+    if (n === te.Edit) {
+      await f(e);
+      return;
+    }
+    if (n === te.Delete) {
+      await B(e);
+      return;
+    }
+  }
+  function l(n, o) {
+    const e = n.filter((g) => g.type === ie.enum.SKU), i = n.filter(
+      (g) => g.type === ie.enum.SKU_GROUP
+    ), r = n.filter((g) => g.type === ie.enum.RECIPE);
+    return [
+      ...e.map((g) => ({ ...g, recipeIds: [...o] })),
+      ...i.map((g) => ({ ...g, isGroup: !0, recipeIds: [...o] })),
+      ...r.filter((g) => b.recipeById[g.id] && !o.has(g.id)).flatMap(
+        (g) => l(b.recipeById[g.id].contains, /* @__PURE__ */ new Set([...o, g.id]))
+      )
+    ];
+  }
+  const _ = [
+    {
+      accessorKey: "recipe",
+      header: () => d("inventory.recipe.name"),
+      size: 400
+    },
+    {
+      accessorKey: "ingredients",
+      header: () => d("inventory.recipe.ingredients"),
+      size: "auto"
+    },
+    {
+      id: "action",
+      header: "",
+      cell(n) {
+        return Ne(
+          [be[te.Edit], be[te.Delete]],
+          (o) => {
+            m(o, n.row.original.original);
+          }
+        );
+      },
+      enableSorting: !1,
+      size: 40,
+      meta: {
+        cellClass: "",
+        headerClass: ""
+      }
+    }
+  ];
+  function t(n) {
+    const o = Y();
+    return n.map((e) => ({
+      recipe: e.name,
+      ingredients: l(e.contains, /* @__PURE__ */ new Set([e._id])).map((i) => {
+        var g, v, a, u, x, C;
+        if (i.isGroup) {
+          const I = o.skuGroupById[i.id];
+          return i.recipeIds.slice(1).length ? `(${(g = o.recipeById[i.recipeIds.at(-1) ?? ""]) == null ? void 0 : g.name}) ${I.name} (x ${j(i.amount)})` : `${I.name} (x${j(i.amount)})`;
+        }
+        const r = o.skuById[i.id];
+        return r ? i.recipeIds.slice(1).length ? `(${(v = o.recipeById[i.recipeIds.at(-1) ?? ""]) == null ? void 0 : v.name}) ${r.name} (${j(i.amount)}${((a = i.measurement) == null ? void 0 : a.abbrev) ?? ((u = r == null ? void 0 : r.unit) == null ? void 0 : u.abbrev)})` : `${r.name} (${j(i.amount)}${((x = i.measurement) == null ? void 0 : x.abbrev) ?? ((C = r == null ? void 0 : r.unit) == null ? void 0 : C.abbrev)})` : null;
+      }).filter((i) => i).join(", "),
+      original: e
+    }));
+  }
+  return { columnDefs: _, formatRowData: t };
+}
+function yn() {
+  const f = Y(), B = me();
+  async function b(l, _, t, n = []) {
+    var v, a;
+    const o = l.filter((u) => u.type === "SKU"), e = l.filter((u) => u.type !== "SKU"), i = /* @__PURE__ */ new Set();
+    if (t)
+      for (const u of f.skus)
+        !n.some((C) => C === u._id) && u._id !== t && !((a = (v = u.convert) == null ? void 0 : v.inventoryBindings) != null && a.some((C) => C.id === t)) || i.add(u._id);
+    const r = f.skus.map((u) => ({
+      label: u.name,
+      sublabel: `${u.code}${i.has(u._id) ? " (Cannot bind, will cause recursive binding)" : ""}`,
+      value: u,
+      disabled: i.has(u._id)
+    })), g = r.filter(
+      (u) => o.find((x) => x.id === u.value._id) && !i.has(u.value._id)
+    ).map((u) => u.value);
+    B.open({
+      title: "Select ingredients",
+      contentComponent: ae,
+      contentComponentProps: {
+        items: r,
+        modelValue: g,
+        virtualScroll: !0
+      },
+      primaryActions: {
+        text: "Confirm",
+        close: !0
+      },
+      secondaryActions: {
+        text: "Close",
+        close: !0,
+        variant: "tertiary"
+      }
+    }).onPrimary((u) => {
+      const x = [
+        ...e,
+        ...l.filter((C) => u.find((I) => I._id === C.id)),
+        ...u.filter((C) => !l.find((I) => I.id === C._id)).map((C) => ({
+          type: "SKU",
+          id: C._id,
+          amount: {
+            amount: 1,
+            precision: 0
+          }
+        }))
+      ];
+      _(x);
+    });
+  }
+  async function d(l, _, t = []) {
+    var g;
+    const n = l.filter((v) => v.type === "RECIPE"), o = l.filter((v) => v.type !== "RECIPE"), e = /* @__PURE__ */ new Set();
+    if (t.length)
+      for (const v of f.recipes) {
+        const a = ((g = f.recipeBindingFlattenCache[v._id]) == null ? void 0 : g.inventoryBindings) ?? [], u = a.some(
+          (I) => I.bindingPaths.some((G) => t.some((H) => H === G.id))
+        ), x = a.some(
+          (I) => "success" in I && t.includes(I.ingredient._id)
+        );
+        (t.some((I) => I === v._id) || u || x) && e.add(v._id);
+      }
+    const i = f.recipes.filter((v) => !t.includes(v._id)).map((v) => ({
+      label: v.name,
+      sublabel: e.has(v._id) ? "(Cannot bind, will cause recursive binding)" : `${v.contains.length} inventory bindings`,
+      value: v,
+      disabled: e.has(v._id)
+    })), r = i.filter(
+      (v) => n.find((a) => a.id === v.value._id) && !e.has(v.value._id)
+    ).map((v) => v.value);
+    B.open({
+      title: "Select recipes",
+      contentComponent: ae,
+      contentComponentProps: {
+        items: i,
+        modelValue: r,
+        virtualScroll: !0
+      },
+      primaryActions: {
+        text: "Confirm",
+        close: !0
+      },
+      secondaryActions: {
+        text: "Close",
+        close: !0,
+        variant: "tertiary"
+      }
+    }).onPrimary((v) => {
+      const a = [
+        ...l.filter((u) => v.find((x) => x._id === u.id)),
+        ...v.filter((u) => !l.find((x) => x.id === u._id)).map((u) => ({
+          type: "RECIPE",
+          id: u._id,
+          amount: {
+            amount: 1,
+            precision: 0
+          }
+        })),
+        ...o
+      ];
+      _(a);
+    });
+  }
+  async function m(l, _, t = []) {
+    const n = l.filter((r) => r.type === "SKU_GROUP"), o = l.filter((r) => r.type !== "SKU_GROUP"), e = f.skuGroups.filter((r) => !t.includes(r._id)).map((r) => ({
+      label: r.name,
+      value: r
+    })), i = e.filter((r) => n.find((g) => g.id === r.value._id)).map((r) => r.value);
+    B.open({
+      title: "Select ingredient group",
+      contentComponent: ae,
+      contentComponentProps: {
+        items: e,
+        modelValue: i,
+        virtualScroll: !0
+      },
+      primaryActions: {
+        text: "Confirm",
+        close: !0
+      },
+      secondaryActions: {
+        text: "Close",
+        close: !0,
+        variant: "tertiary"
+      }
+    }).onPrimary((r) => {
+      const g = [
+        ...l.filter((v) => r.find((a) => a._id === v.id)),
+        ...r.filter((v) => !l.find((a) => a.id === v._id)).map((v) => ({
+          type: "SKU_GROUP",
+          id: v._id,
+          amount: {
+            amount: 1,
+            precision: 0
+          }
+        })),
+        ...o
+      ];
+      _(g);
+    });
+  }
+  return {
+    promptIngredientsBinding: b,
+    promptRecipesBinding: d,
+    promptIngredientGroupsBinding: m
+  };
+}
+const bn = { class: "flex flex-col" }, gn = { class: "flex flex-col gap-4" }, we = /* @__PURE__ */ J({
+  __name: "InventoryBindingRule",
+  props: {
+    disabled: { type: Boolean },
+    modelValue: {},
+    minCount: {},
+    maxCount: {}
+  },
+  emits: ["update:modelValue"],
+  setup(f, { emit: B }) {
+    const b = f, d = B, { t: m } = Q(), l = Ke(), _ = S(() => {
+      var i;
+      const o = /* @__PURE__ */ new Map(), e = l.restaurants.value.map((r) => r.customAttributes ?? {});
+      for (const r of e)
+        for (const [g, v] of Object.entries(r))
+          o.has(g) || o.set(g, /* @__PURE__ */ new Set()), v && ((i = o.get(g)) == null || i.add(v));
+      return o;
+    }), t = S(() => [
+      ...[..._.value.entries()].map(([e, i]) => ({
+        type: "string",
+        key: e,
+        entity: "restaurant",
+        values: [...i]
+      }))
+    ]), n = S({
+      get() {
+        return b.modelValue ? He.build(b.modelValue) : null;
+      },
+      set(o) {
+        d("update:modelValue", o ? We.build(o) : null);
+      }
+    });
+    return (o, e) => {
+      const i = R("FmLabel"), r = R("FmFormGroup");
+      return k(), A("div", bn, [
+        y("div", gn, [
+          V(i, {
+            label: s(m)("inventory.ingredientGroup.form.rules.title"),
+            required: o.minCount != null && o.minCount > 0
+          }, null, 8, ["label", "required"]),
+          V(s(Je), {
+            modelValue: n.value,
+            "onUpdate:modelValue": e[0] || (e[0] = (g) => n.value = g),
+            attributes: t.value
+          }, null, 8, ["modelValue", "attributes"])
+        ]),
+        V(r, {
+          "model-value": n.value,
+          rules: [
+            (g) => {
+              const v = g ? 1 : 0;
+              return b.minCount !== void 0 && v < b.minCount ? s(m)("inventory.ingredientGroup.form.rules.validation.minCount", {
+                count: b.minCount
+              }) : b.maxCount !== void 0 && v > b.maxCount ? s(m)("inventory.ingredientGroup.form.rules.validation.maxCount", {
+                count: b.maxCount
+              }) : !0;
+            }
+          ]
+        }, null, 8, ["model-value", "rules"])
+      ]);
+    };
+  }
+}), _n = { class: "border-1 mx-3 my-1 rounded-md" }, hn = { class: "flex flex-col w-full border-b border-fm-color-neutral-gray-100" }, Vn = {
+  class: "flex items-center",
+  style: { "min-height": "48px" }
+}, kn = { class: "flex-1 fm-typo-en-body-md-400 py-8 px-12" }, xn = { class: "flex flex-col" }, Bn = { class: "line-clamp-1" }, wn = { class: "w-[200px]" }, Fn = {
+  key: 0,
+  class: "w-[52px]"
+}, Cn = {
+  key: 1,
+  class: "w-[52px]"
+}, In = {
+  key: 0,
+  class: "flex gap-4 text-fm-color-system-error-400 fm-typo-en-body-sm-400 px-8"
+}, Rn = { class: "px-12 pb-4" }, An = /* @__PURE__ */ J({
+  __name: "InventoryRecipeBindingV2Field",
+  props: {
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    modelValue: {},
+    displayName: {},
+    showError: { type: Boolean },
+    showSettingsButton: { type: Boolean }
+  },
+  emits: ["update:modelValue", "delete", "settings"],
+  setup(f, { emit: B }) {
+    const { t: b } = Q(), d = Be("modelValue");
+    function m(l) {
+      const _ = +l;
+      l.length > 0 && isFinite(_) ? d.amount = Ve(_) : d.amount = { amount: 0, precision: 0 };
+    }
+    return (l, _) => {
+      const t = R("FmTooltip"), n = R("FmTextField"), o = R("FmButton"), e = R("FmIcon"), i = R("FmFormGroup");
+      return k(), A("div", _n, [
+        V(i, {
+          class: _e(["mb-2"]),
+          disabled: l.disabled,
+          modelValue: +s(j)(s(d).amount),
+          rules: [s(ke)(0), s(pe)(-1)]
+        }, {
+          default: K(({ invalid: r }) => [
+            y("div", hn, [
+              y("div", Vn, [
+                y("div", kn, [
+                  y("div", xn, [
+                    V(t, {
+                      zIndex: 51,
+                      variant: "plain",
+                      placement: "top",
+                      content: l.displayName
+                    }, {
+                      default: K(() => [
+                        y("span", Bn, z(l.displayName), 1)
+                      ]),
+                      _: 1
+                    }, 8, ["content"])
+                  ])
+                ]),
+                y("div", wn, [
+                  V(n, {
+                    class: "w-full",
+                    disabled: l.disabled,
+                    modelValue: +s(j)(s(d).amount),
+                    "onUpdate:modelValue": _[0] || (_[0] = (g) => m(g)),
+                    invalid: r
+                  }, null, 8, ["disabled", "modelValue", "invalid"])
+                ]),
+                l.showSettingsButton ? (k(), A("div", Fn, [
+                  V(o, {
+                    disabled: l.disabled,
+                    type: "button",
+                    variant: "tertiary",
+                    icon: "settings",
+                    onClick: () => {
+                    }
+                  }, null, 8, ["disabled"])
+                ])) : E("", !0),
+                l.readonly ? E("", !0) : (k(), A("div", Cn, [
+                  V(o, {
+                    disabled: l.disabled,
+                    type: "button",
+                    variant: "plain",
+                    icon: "delete",
+                    "icon-color": "#000000",
+                    onClick: () => {
+                    }
+                  }, null, 8, ["disabled"])
+                ]))
+              ]),
+              l.showError ? (k(), A("div", In, [
+                V(e, {
+                  name: "error",
+                  color: "system-error-300",
+                  size: "sm"
+                }),
+                y("div", null, z(s(b)("inventory.inventoryBindings.circularError")), 1)
+              ])) : E("", !0)
+            ])
+          ]),
+          _: 1
+        }, 8, ["disabled", "modelValue", "rules"]),
+        y("div", Rn, [
+          V(we, {
+            modelValue: s(d).rules,
+            "onUpdate:modelValue": _[1] || (_[1] = (r) => s(d).rules = r),
+            disabled: l.disabled
+          }, null, 8, ["modelValue", "disabled"])
+        ])
+      ]);
+    };
+  }
+});
+function Sn(f) {
+  const B = en(), { t: b } = nn(), d = Y(), m = S(() => [
+    {
+      id: "delete",
+      header: "",
+      cell(t) {
+        const n = t.row.original;
+        return O(
+          "div",
+          { class: "w-full flex justify-end" },
+          O(ee.FmButton, {
+            class: "delete-button",
+            key: n._id,
+            type: "button",
+            icon: "delete",
+            variant: "tertiary",
+            size: "md",
+            disabled: f.disabled ?? !1,
+            onClick: () => {
+              f.bindingAlternatives = f.bindingAlternatives.filter(
+                (o) => o._id !== n._id
+              );
+            }
+          })
+        );
+      },
+      enableSorting: !1,
+      size: 40,
+      meta: {
+        cellClass: "",
+        headerClass: ""
+      }
+    },
+    {
+      id: "alternative",
+      header: () => b("inventory.inventoryBindings.alternativeTable.ingredient"),
+      accessorFn: (t) => {
+        var n, o;
+        return `${((n = d.skuById[t._id]) == null ? void 0 : n.name) ?? ""} (${((o = d.skuById[t._id]) == null ? void 0 : o.code) ?? ""})`;
+      },
+      cell: ({ row: t }) => {
+        const n = d.skuById[t.original._id];
+        return O(
+          "div",
+          {
+            class: "w-full flex flex-col"
+          },
+          [
+            O("div", { class: "fm-typo-en-body-lg-400 line-clamp-1" }, n.name),
+            O(
+              "div",
+              { class: "fm-typo-en-body-md-400 line-clamp-1 text-fm-color-typo-secondary" },
+              n.code
+            )
+          ]
+        );
+      },
+      size: "auto",
+      enableSorting: !1
+    },
+    {
+      id: "unit",
+      header: () => b("inventory.inventoryBindings.alternativeTable.unit"),
+      accessorFn: (t) => {
+        const n = d.skuById[t._id];
+        return n.unit.measurements.computeFirst(
+          (o) => o.id === t.trackingMeasurement ? o.name : null
+        ) ?? n.unit.name;
+      },
+      enableSorting: !1
+    },
+    {
+      id: "unitOption",
+      header: () => b("inventory.inventoryBindings.alternativeTable.unit"),
+      accessorKey: "trackingMeasurement",
+      cell(t) {
+        const n = d.skuById[t.row.original._id];
+        if (!n) return null;
+        const o = [
+          {
+            label: n.unit.name,
+            sublabel: n.unit.abbrev,
+            value: null
+          },
+          ...n.unit.measurements.map((e) => ({
+            label: `${e.name} (${e.abbrev})`,
+            sublabel: b("inventory.inventoryBindings.alternativeTable.measurementOption"),
+            value: e.id
+          }))
+        ].filter((e) => !e.label.toLowerCase().includes("inactive"));
+        return O(ee.FmSelect, {
+          modelValue: t.row.original.trackingMeasurement ?? null,
+          items: o,
+          disabled: f.disabled ?? !1,
+          "onUpdate:modelValue": (e) => {
+            f.bindingAlternatives = f.bindingAlternatives.map((i) => i._id === t.row.original._id ? { ...i, trackingMeasurement: e } : i);
+          }
+        });
+      },
+      enableSorting: !1
+    },
+    {
+      id: "priority",
+      header: () => b("inventory.inventoryBindings.alternativeTable.priority"),
+      accessorKey: "priority",
+      enableSorting: !0,
+      cell(t) {
+        const n = t.row.original;
+        return O(ee.FmTextField, {
+          modelValue: n.priority ?? t.row.index + 1,
+          rules: [
+            je(),
+            re(1),
+            xe(
+              f.bindingAlternatives.filter((o) => o._id !== n._id).map((o) => {
+                const e = d.skuById[o._id];
+                return {
+                  label: e == null ? void 0 : e.name,
+                  value: o.priority
+                };
+              })
+            )
+          ],
+          "onUpdate:modelValue": (o) => {
+            const e = Number(o);
+            isNaN(e) || (f.bindingAlternatives = f.bindingAlternatives.map((i) => i._id === t.row.original._id ? { ...i, priority: e } : i));
+          }
+        });
+      }
+    },
+    {
+      id: "default",
+      header: () => "",
+      accessorKey: "default",
+      cell(t) {
+        const n = d.skuById[t.row.original._id];
+        return n ? O(ee.FmCheckbox, {
+          modelValue: t.row.original.default ?? !1,
+          value: n._id,
+          disabled: f.disabled ?? !1,
+          "onUpdate:modelValue": () => {
+            f.bindingAlternatives = f.bindingAlternatives.map((o) => o._id === t.row.original._id ? { ...o, default: !0 } : { ...o, default: !1 });
+          }
+        }) : null;
+      },
+      enableSorting: !1,
+      size: 40,
+      meta: {
+        cellClass: "",
+        headerClass: ""
+      }
+    },
+    {
+      id: "move",
+      header: "",
+      cell(t) {
+        const n = t.row.original;
+        return O("div", { class: "w-full flex justify-end" }, [
+          O(ee.FmButton, {
+            key: n._id,
+            type: "button",
+            icon: "keyboard_arrow_up",
+            variant: "tertiary",
+            size: "md",
+            disabled: f.disabled ?? !1,
+            onClick: () => {
+              const o = [...f.bindingAlternatives], e = o.findIndex((i) => i._id === n._id);
+              if (e > 0) {
+                const i = o[e - 1];
+                o[e - 1] = n, o[e] = i;
+              }
+              f.bindingAlternatives = [...o];
+            }
+          }),
+          O(ee.FmButton, {
+            key: n._id,
+            type: "button",
+            icon: "keyboard_arrow_down",
+            variant: "tertiary",
+            size: "md",
+            disabled: f.disabled ?? !1,
+            onClick: () => {
+              const o = [...f.bindingAlternatives], e = o.findIndex((i) => i._id === n._id);
+              if (e < o.length - 1) {
+                const i = o[e + 1];
+                o[e + 1] = n, o[e] = i;
+              }
+              f.bindingAlternatives = [...o];
+            }
+          })
+        ]);
+      },
+      enableSorting: !1,
+      size: 40,
+      meta: {
+        cellClass: "",
+        headerClass: ""
+      }
+    }
+  ]);
+  return {
+    get columnDefs() {
+      return m.value;
+    },
+    promptAddIngredient: async (_) => {
+      const t = [];
+      for (const e of d.skus)
+        _.includes(e._id) || t.push({
+          label: e.name,
+          sublabel: e.code,
+          value: e._id,
+          disabled: _.includes(e._id)
+        });
+      const n = (f.bindingAlternatives ?? []).map((e) => e._id), o = await B.multiSelect(t, n, (e) => {
+        var r, g, v, a, u, x;
+        const i = (r = f.bindingAlternatives) == null ? void 0 : r.findIndex((C) => C._id === e);
+        return {
+          _id: e,
+          trackingMeasurement: typeof i != "number" || i == -1 ? (g = d.skuById[e]) == null ? void 0 : g.trackingMeasurement : (a = (v = f.bindingAlternatives) == null ? void 0 : v[i]) == null ? void 0 : a.trackingMeasurement,
+          priority: ((x = (u = f.bindingAlternatives) == null ? void 0 : u[i]) == null ? void 0 : x.priority) ?? f.bindingAlternatives.length,
+          default: !1
+        };
+      });
+      f.bindingAlternatives = o ?? f.bindingAlternatives;
+    },
+    columnVisibility: {
+      delete: !0,
+      unit: !1,
+      unitOption: !0,
+      default: !1,
+      // previous demo: sort priority by moving sku element in the array,
+      // new demo: sort priority using priority field.
+      // can reenable if this use case is requested to be restored
+      move: !1
+    }
+  };
+}
+const $n = { class: "flex flex-col gap-16" }, En = { class: "flex flex-col" }, Tn = { class: "flex justify-between items-center px-2" }, Un = /* @__PURE__ */ J({
+  __name: "InventoryBindingAlternative",
+  props: {
+    disabled: { type: Boolean },
+    modelValue: {},
+    filterIngredientIds: {}
+  },
+  emits: ["update:modelValue"],
+  setup(f, { emit: B }) {
+    const b = f, d = B, { t: m } = Q(), l = Sn({
+      get disabled() {
+        return b.disabled ?? !1;
+      },
+      get bindingAlternatives() {
+        return b.modelValue ?? [];
+      },
+      set bindingAlternatives(n) {
+        d("update:modelValue", n);
+      }
+    }), _ = (n) => n && n.some((o) => b.filterIngredientIds.includes(o._id)) ? "Contains invalid ingredient" : !0, t = (n) => n && n.length > 5 ? m("inventory.binding.alternative.maximumExceeded", { max: 5 }) : !0;
+    return (n, o) => {
+      var v;
+      const e = R("FmLabel"), i = R("FmButton"), r = R("FmFormGroup"), g = R("FmTable");
+      return k(), A("div", $n, [
+        y("div", En, [
+          y("div", Tn, [
+            V(e, {
+              label: s(m)("inventory.alternatives")
+            }, null, 8, ["label"]),
+            V(i, {
+              disabled: n.disabled,
+              "prepend-icon": "link",
+              variant: "primary",
+              class: "border-1 rounded-lg border-fm-color-primary",
+              onClick: o[0] || (o[0] = (a) => s(l).promptAddIngredient(n.filterIngredientIds)),
+              size: "md"
+            }, null, 8, ["disabled"])
+          ]),
+          V(r, {
+            "model-value": n.modelValue,
+            rules: [_, t]
+          }, null, 8, ["model-value", "rules"])
+        ]),
+        V(g, {
+          "row-data": n.modelValue ?? [],
+          "column-defs": s(l).columnDefs,
+          "page-size": ((v = n.modelValue) == null ? void 0 : v.length) || 0,
+          "shrink-at": 9999,
+          "column-visibility": s(l).columnVisibility,
+          "hide-footer": ""
+        }, null, 8, ["row-data", "column-defs", "page-size", "column-visibility"])
+      ]);
+    };
+  }
+}), Pn = { class: "border-1 mx-3 my-1 rounded-md" }, Dn = { class: "flex flex-col border-b border-fm-color-neutral-gray-100" }, Gn = {
+  class: "flex items-center w-full",
+  style: { "min-height": "48px" }
+}, Mn = { class: "flex-1 fm-typo-en-body-md-400 py-8 px-12" }, zn = { class: "line-clamp-1 w-full" }, Nn = { class: "w-[150px]" }, Kn = {
+  key: 0,
+  class: "w-[52px]"
+}, Ln = { class: "flex flex-col px-12 pb-4" }, On = /* @__PURE__ */ J({
+  __name: "InventorySkuBindingV2Field",
+  props: {
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    modelValue: {},
+    displayName: {},
+    unit: {},
+    showError: { type: Boolean },
+    ableToConfigureAlternative: { type: Boolean },
+    ableToApplyRules: { type: Boolean }
+  },
+  emits: ["update:modelValue", "delete", "settings"],
+  setup(f, { emit: B }) {
+    const b = B, { t: d } = Q(), m = Be("modelValue");
+    function l(t) {
+      t && (m.amount = t.amount, m.measurement = t.measurement);
+    }
+    function _() {
+      return {
+        modelValue: {
+          amount: m.amount,
+          measurement: m.measurement
+        },
+        amountAsString: tn.toFormatString({
+          value: m.amount
+        })
+      };
+    }
+    return (t, n) => {
+      const o = R("FmTooltip"), e = R("FmButton"), i = R("FmFormGroup");
+      return k(), A("div", Pn, [
+        y("div", Dn, [
+          y("div", Gn, [
+            y("div", Mn, [
+              V(o, {
+                zIndex: 51,
+                variant: "plain",
+                placement: "top",
+                content: t.displayName
+              }, {
+                default: K(() => [
+                  y("span", zn, z(t.displayName), 1)
+                ]),
+                _: 1
+              }, 8, ["content"])
+            ]),
+            y("div", Nn, [
+              V(Qe, {
+                "model-value": { amount: s(m).amount, measurement: s(m).measurement },
+                "onUpdate:modelValue": l,
+                unit: t.unit,
+                placement: "bottom",
+                "convert-amount-on-change-unit": "",
+                disabled: t.readonly
+              }, null, 8, ["model-value", "unit", "disabled"])
+            ]),
+            t.readonly ? E("", !0) : (k(), A("div", Kn, [
+              V(e, {
+                disabled: t.disabled,
+                type: "button",
+                variant: "tertiary",
+                icon: "delete",
+                onClick: n[0] || (n[0] = () => b("delete", s(m).id))
+              }, null, 8, ["disabled"])
+            ]))
+          ]),
+          y("div", Ln, [
+            V(i, {
+              modelValue: s(m).amount,
+              rules: [s(pe)(0)]
+            }, null, 8, ["modelValue", "rules"]),
+            V(i, {
+              modelValue: _(),
+              rules: [
+                s(Xe)(),
+                s(Ze)(t.unit),
+                () => t.showError ? s(d)("inventory.inventoryBindings.invalidWarning") : !0
+              ]
+            }, null, 8, ["modelValue", "rules"])
+          ]),
+          t.ableToApplyRules ? (k(), D(we, {
+            key: 0,
+            modelValue: s(m).rules,
+            "onUpdate:modelValue": n[1] || (n[1] = (r) => s(m).rules = r),
+            disabled: t.disabled
+          }, null, 8, ["modelValue", "disabled"])) : E("", !0),
+          t.ableToConfigureAlternative ? (k(), D(Un, {
+            key: 1,
+            modelValue: s(m).alternatives,
+            "onUpdate:modelValue": n[2] || (n[2] = (r) => s(m).alternatives = r),
+            disabled: t.disabled,
+            filterIngredientIds: [s(m).id]
+          }, null, 8, ["modelValue", "disabled", "filterIngredientIds"])) : E("", !0)
+        ])
+      ]);
+    };
+  }
+});
+exports.FfCalculator;
+const jn = { class: "flex flex-col gap-24" }, Yn = {
+  key: 0,
+  class: "flex flex-col gap-16"
+}, qn = { class: "flex items-center" }, Hn = { class: "flex-1 fm-typo-en-title-sm-600" }, Wn = { class: "flex flex-col" }, Jn = { class: "flex py-8 px-12 border-b border-fm-color-neutral-gray-200 bg-fm-color-neutral-gray-100 h-[44px] items-center" }, Qn = { class: "fm-typo-en-body-md-600 text-fm-color-typo-secondary" }, Xn = {
+  key: 0,
+  class: "w-[52px]"
+}, Zn = {
+  key: 1,
+  class: "w-[52px]"
+}, et = {
+  key: 1,
+  class: "flex flex-col gap-16"
+}, nt = { class: "flex items-center" }, tt = { class: "flex-1 fm-typo-en-title-sm-600" }, ot = { class: "flex flex-col" }, it = { class: "flex py-8 px-12 border-b border-fm-color-neutral-gray-200 bg-fm-color-neutral-gray-100 h-[44px] items-center" }, lt = { class: "fm-typo-en-body-md-600 text-fm-color-typo-secondary" }, st = { class: "flex flex-col w-full border-b border-fm-color-neutral-gray-100" }, at = {
+  key: 0,
+  class: "flex gap-4 text-fm-color-system-error-400 fm-typo-en-body-sm-400"
+}, rt = {
+  class: "flex items-center",
+  style: { "min-height": "48px" }
+}, dt = { class: "flex-1 fm-typo-en-body-md-400 py-8 px-12" }, ut = { class: "flex flex-col" }, mt = { class: "w-[200px]" }, ct = {
+  key: 0,
+  class: "w-[52px]"
+}, pt = { class: "flex flex-col gap-16" }, ft = { class: "flex items-center" }, vt = { class: "flex-1 fm-typo-en-title-sm-600" }, yt = { class: "flex flex-col" }, bt = { class: "flex py-8 px-12 border-b border-fm-color-neutral-gray-200 bg-fm-color-neutral-gray-100 h-[44px] items-center" }, gt = { class: "flex-1 fm-typo-en-body-md-600 text-fm-color-typo-secondary" }, _t = { class: "fm-typo-en-body-md-600 text-fm-color-typo-secondary w-[150px] px-16" }, ht = {
+  key: 0,
+  class: "w-[52px]"
+}, Vt = /* @__PURE__ */ J({
+  __name: "InventoryBindingFormV2",
+  props: {
+    id: {},
+    modelValue: { default: () => [] },
+    excludeBindingId: {},
+    rules: { default: () => [] },
+    iframeMode: { type: Boolean },
+    disabled: { type: Boolean },
+    readonly: { type: Boolean },
+    recipeBindingConfig: { default: () => ({ enabled: !0, ableToApplyRules: !1 }) },
+    skuBindingConfig: { default: () => ({
+      enabled: !0,
+      ableToApplyRules: !1,
+      ableToConfigureAlternative: !1
+    }) },
+    enableIngredientGroup: { type: Boolean }
+  },
+  emits: ["update:modelValue", "click:pick-inventory-bindings"],
+  setup(f, { emit: B }) {
+    const { t: b } = Q(), d = Y(), m = S(() => d.recipeById), l = S(() => d.skuById), _ = S(() => d.skuGroupById), t = f, n = B, o = S(() => Ee({
+      parentId: t.id,
+      bindings: t.modelValue,
+      recipes: d.recipes.map((F) => F._id === t.id ? {
+        ...F,
+        contains: t.modelValue
+      } : F),
+      skus: d.skus.map((F) => F._id === t.id ? {
+        ...F,
+        convert: {
+          inventoryBindings: t.modelValue
+        }
+      } : F),
+      skuGroups: d.skuGroups
+    }).inventoryBindings.filter((F) => "error" in F && F.error).map((F) => F).filter((F) => F.reason === Te.enum.circularDependency)), e = S(
+      () => new Set(o.value.map((p) => {
+        var w;
+        return (w = p.bindingPaths[0]) == null ? void 0 : w.id;
+      }))
+    ), i = S(() => t.modelValue.filter((p) => p.type === "RECIPE")), { promptIngredientsBinding: r, promptRecipesBinding: g, promptIngredientGroupsBinding: v } = yn();
+    async function a() {
+      if (t.iframeMode) {
+        n("click:pick-inventory-bindings", "RECIPE");
+        return;
+      }
+      g(
+        t.modelValue,
+        (p) => n("update:modelValue", p),
+        t.id ? [t.id] : []
+      );
+    }
+    const u = S(() => t.modelValue.filter((p) => p.type === "SKU_GROUP"));
+    async function x() {
+      v(
+        t.modelValue,
+        (p) => n("update:modelValue", p),
+        t.id ? [t.id] : []
+      );
+    }
+    function C(p, w, F) {
+      const T = +w;
+      let q = F;
+      w.length > 0 && isFinite(T) ? q = F.map((P) => (P.id !== p || (P.amount = Ve(T)), P)) : q = F.map((P) => (P.id !== p || (P.amount = { amount: 0, precision: 0 }), P)), n("update:modelValue", q);
+    }
+    const I = S(() => t.modelValue.filter((p) => p.type === "SKU") ?? []);
+    async function G() {
+      if (t.iframeMode) {
+        n("click:pick-inventory-bindings", "SKU");
+        return;
+      }
+      r(
+        t.modelValue,
+        (p) => n("update:modelValue", p),
+        t.excludeBindingId,
+        t.id ? [t.id] : []
+      );
+    }
+    function H(p) {
+      const w = t.modelValue.map((F) => F.id === p.id ? p : F);
+      n("update:modelValue", w);
+    }
+    function c(p) {
+      const w = t.modelValue.filter((F) => F.id !== p);
+      n("update:modelValue", w);
+    }
+    function h(p) {
+      var F, T;
+      if (p.type !== ie.enum.SKU)
+        throw new Error("Non-SKU binding does not have unit");
+      if (!((F = l.value[p.id]) == null ? void 0 : F.unit))
+        throw new Error(`Cannot find ingredient: ${p.id}`);
+      return (T = l.value[p.id]) == null ? void 0 : T.unit;
+    }
+    return (p, w) => {
+      var U, X, L;
+      const F = R("FmFormGroup"), T = R("FmButton"), q = R("FmIcon"), P = R("FmTextField");
+      return k(), A("div", jn, [
+        V(F, {
+          disabled: p.disabled,
+          "model-value": p.modelValue,
+          rules: [
+            ...p.rules,
+            () => o.value.length ? "There is a binding error in your configuration" : !0
+          ]
+        }, {
+          label: K(() => w[4] || (w[4] = [
+            y("div", { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, " Define the inventory bindings for this recipe or ingredient. ", -1)
+          ])),
+          _: 1
+        }, 8, ["disabled", "model-value", "rules"]),
+        ((U = p.recipeBindingConfig) == null ? void 0 : U.enabled) !== !1 ? (k(), A("div", Yn, [
+          y("div", qn, [
+            y("div", Hn, z(s(b)("inventory.inventoryBindings.recipe")), 1),
+            p.readonly ? E("", !0) : (k(), D(T, {
+              key: 0,
+              variant: "secondary",
+              "text-color": "primary",
+              "border-color": "primary",
+              label: s(b)("inventory.inventoryBindings.linkRecipe"),
+              "prepend-icon": "link",
+              onClick: a
+            }, null, 8, ["label"]))
+          ]),
+          y("div", Wn, [
+            y("div", Jn, [
+              y("div", Qn, z(s(b)("inventory.inventoryBindings.recipe")), 1),
+              w[5] || (w[5] = y("div", { class: "w-[200px]" }, null, -1)),
+              p.recipeBindingConfig.ableToApplyRules ? (k(), A("div", Xn)) : E("", !0),
+              p.readonly ? E("", !0) : (k(), A("div", Zn))
+            ]),
+            (k(!0), A(oe, null, se(i.value, ($) => {
+              var Z;
+              return k(), D(An, {
+                key: $.id,
+                "model-value": $,
+                "display-name": (Z = m.value[$.id]) == null ? void 0 : Z.name,
+                "show-error": e.value.has($.id),
+                "show-settings-button": (p.recipeBindingConfig.ableToApplyRules && !p.readonly) === !0,
+                readonly: p.readonly,
+                disabled: p.disabled,
+                "onUpdate:modelValue": w[0] || (w[0] = (W) => H(W)),
+                onDelete: w[1] || (w[1] = (W) => c(W))
+              }, null, 8, ["model-value", "display-name", "show-error", "show-settings-button", "readonly", "disabled"]);
+            }), 128))
+          ])
+        ])) : E("", !0),
+        p.enableIngredientGroup ? (k(), A("div", et, [
+          y("div", nt, [
+            y("div", tt, z(s(b)("inventory.inventoryBindings.ingredientGroup")), 1),
+            p.readonly ? E("", !0) : (k(), D(T, {
+              key: 0,
+              variant: "secondary",
+              "text-color": "primary",
+              "border-color": "primary",
+              label: s(b)("inventory.inventoryBindings.linkIngredientGroup"),
+              "prepend-icon": "link",
+              onClick: x
+            }, null, 8, ["label"]))
+          ]),
+          y("div", ot, [
+            y("div", it, [
+              y("div", lt, z(s(b)("inventory.inventoryBindings.ingredientGroup")), 1),
+              w[6] || (w[6] = y("div", { class: "w-[200px]" }, null, -1)),
+              w[7] || (w[7] = y("div", { class: "w-[52px]" }, null, -1))
+            ]),
+            (k(!0), A(oe, null, se(u.value, ($) => (k(), D(F, {
+              key: $.id,
+              disabled: p.disabled,
+              modelValue: +s(j)($.amount ?? { amount: 1, precision: 0 }),
+              rules: [s(ke)(0), s(pe)(0)]
+            }, {
+              default: K(({ invalid: Z }) => {
+                var W;
+                return [
+                  y("div", st, [
+                    e.value.has($.id) ? (k(), A("div", at, [
+                      V(q, {
+                        name: "error",
+                        color: "system-error-300",
+                        size: "sm"
+                      }),
+                      y("div", null, z(s(b)("inventory.inventoryBindings.circularError")), 1)
+                    ])) : E("", !0),
+                    y("div", rt, [
+                      y("div", dt, [
+                        y("div", ut, z((W = _.value[$.id]) == null ? void 0 : W.name), 1)
+                      ]),
+                      y("div", mt, [
+                        V(P, {
+                          class: "w-full",
+                          disabled: p.disabled,
+                          modelValue: +s(j)($.amount ?? { amount: 1, precision: 0 }),
+                          "onUpdate:modelValue": (ne) => C($.id, ne, p.modelValue),
+                          invalid: Z
+                        }, null, 8, ["disabled", "modelValue", "onUpdate:modelValue", "invalid"])
+                      ]),
+                      p.readonly ? E("", !0) : (k(), A("div", ct, [
+                        V(T, {
+                          disabled: p.disabled,
+                          type: "button",
+                          variant: "plain",
+                          icon: "delete",
+                          "icon-color": "#000000",
+                          onClick: (ne) => c($.id)
+                        }, null, 8, ["disabled", "onClick"])
+                      ]))
+                    ])
+                  ])
+                ];
+              }),
+              _: 2
+            }, 1032, ["disabled", "modelValue", "rules"]))), 128))
+          ])
+        ])) : E("", !0),
+        y("div", pt, [
+          y("div", ft, [
+            y("div", vt, z(s(b)("inventory.inventoryBindings.ingredient")), 1),
+            p.readonly ? E("", !0) : (k(), D(T, {
+              key: 0,
+              variant: "secondary",
+              "text-color": "primary",
+              "border-color": "primary",
+              label: s(b)("inventory.inventoryBindings.linkIngredient"),
+              "prepend-icon": "link",
+              onClick: G
+            }, null, 8, ["label"]))
+          ]),
+          y("div", yt, [
+            y("div", bt, [
+              y("div", gt, z(s(b)("inventory.inventoryBindings.ingredient")), 1),
+              y("div", _t, z(s(b)("inventory.inventoryBindings.amount")), 1),
+              w[8] || (w[8] = y("div", { class: "w-[52px]" }, null, -1)),
+              (X = p.skuBindingConfig) != null && X.ableToApplyRules || (L = p.skuBindingConfig) != null && L.ableToConfigureAlternative ? (k(), A("div", ht)) : E("", !0)
+            ]),
+            (k(!0), A(oe, null, se(I.value, ($) => {
+              var Z, W, ne;
+              return k(), D(On, {
+                key: $.id,
+                "model-value": $,
+                "display-name": (Z = l.value[$.id]) == null ? void 0 : Z.name,
+                unit: h($),
+                "show-error": e.value.has($.id),
+                "able-to-apply-rules": ((W = p.skuBindingConfig) == null ? void 0 : W.ableToApplyRules) === !0,
+                "able-to-configure-alternative": ((ne = p.skuBindingConfig) == null ? void 0 : ne.ableToConfigureAlternative) === !0,
+                readonly: p.readonly,
+                disabled: p.disabled,
+                "onUpdate:modelValue": w[2] || (w[2] = (le) => H(le)),
+                onDelete: w[3] || (w[3] = (le) => c(le))
+              }, null, 8, ["model-value", "display-name", "unit", "show-error", "able-to-apply-rules", "able-to-configure-alternative", "readonly", "disabled"]);
+            }), 128))
+          ])
+        ])
+      ]);
+    };
+  }
+}), kt = { class: "flex flex-col gap-40" }, xt = {
+  key: 0,
+  class: "flex flex-col gap-16"
+}, Bt = {
+  key: 0,
+  class: "col-span-2 mt-16 border-1 border-fm-color-neutral-gray-200 fm-corner-radius-lg flex flex-col p-16 gap-16"
+}, wt = {
+  key: 0,
+  class: "flex flex-col items-center w-full h-full gap-24"
+}, Ft = { key: 1 }, Ct = { class: "mt-32" }, It = /* @__PURE__ */ J({
+  __name: "RecipeForm",
+  props: {
+    mode: {},
+    modelValue: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue", "click:submit"],
+  setup(f, { expose: B, emit: b }) {
+    var H;
+    const d = f, m = b, l = on(), { t: _ } = Q(), t = S({
+      get() {
+        var c;
+        return ((c = d.modelValue) == null ? void 0 : c.name) ?? "";
+      },
+      set(c) {
+        const h = d.modelValue ?? {};
+        h.name = c, m("update:modelValue", h);
+      }
+    }), n = S({
+      get() {
+        var c;
+        return ((c = d.modelValue) == null ? void 0 : c.contains) ?? [];
+      },
+      set(c) {
+        const h = d.modelValue ?? {};
+        h.contains = c, m("update:modelValue", h);
+      }
+    }), o = S({
+      get() {
+        var c;
+        return ((c = d.modelValue) == null ? void 0 : c.customAttributes) ?? {};
+      },
+      set(c) {
+        const h = d.modelValue ? {
+          ...d.modelValue
+        } : {};
+        h.customAttributes = c, m("update:modelValue", h);
+      }
+    }), e = S({
+      get() {
+        var c;
+        return ((c = d.modelValue) == null ? void 0 : c.version) ?? null;
+      },
+      set(c) {
+        const h = d.modelValue ? { ...d.modelValue } : {};
+        h.version = c, m("update:modelValue", h);
+      }
+    }), i = S({
+      get() {
+        return e.value === "v2";
+      },
+      set(c) {
+        e.value = c ? "v2" : null;
+      }
+    });
+    function r() {
+      m("click:submit");
+    }
+    const g = N();
+    B({
+      validateInputs: () => {
+        var c, h;
+        (h = (c = g.value) == null ? void 0 : c.validateInputs) == null || h.call(c);
+      },
+      resetInputsValidation: () => {
+        var c, h;
+        (h = (c = g.value) == null ? void 0 : c.resetInputsValidation) == null || h.call(c);
+      },
+      resetInputs: () => {
+        var c, h;
+        (h = (c = g.value) == null ? void 0 : c.resetInputs) == null || h.call(c);
+      }
+    });
+    const v = Y(), a = N([]), u = N(!1), x = N(!1);
+    Ce(u, async (c) => {
+      C(c);
+    });
+    async function C(c) {
+      var h, p;
+      c && !x.value && ((h = d.modelValue) != null && h._id) && (x.value = !0, a.value = await v.getAffectedMenu((p = d.modelValue) == null ? void 0 : p._id).delayed(500), x.value = !1);
+    }
+    const I = S(
+      () => v.recipes.map((c) => ({ label: c.name, value: c.name }))
+    ), G = N((H = d.modelValue) == null ? void 0 : H.name);
+    return (c, h) => {
+      const p = R("FmTextField"), w = R("FmSwitch"), F = R("FmCard"), T = R("FmSpacer"), q = R("FmCircularProgress"), P = R("FmForm");
+      return k(), D(P, {
+        ref_key: "formRef",
+        ref: g,
+        onValidationSuccess: r
+      }, {
+        default: K(() => [
+          y("div", kt, [
+            V(p, {
+              disabled: c.disabled,
+              label: s(_)("inventory.recipe.name"),
+              "model-value": t.value,
+              "onUpdate:modelValue": h[0] || (h[0] = (U) => t.value = U),
+              rules: [
+                s(Ye)(),
+                s(xe)(I.value, G.value, (U) => `[${U.value}] already exists`)
+              ],
+              "label-mark": "required"
+            }, null, 8, ["disabled", "label", "model-value", "rules"]),
+            s(l).enableRecipeV2 ? (k(), A("div", xt, [
+              V(w, {
+                modelValue: i.value,
+                "onUpdate:modelValue": h[1] || (h[1] = (U) => i.value = U),
+                value: !0,
+                label: s(_)("inventory.recipe.enableRecipeV2"),
+                "label-placement": "right",
+                disabled: c.disabled,
+                sublabel: s(_)("inventory.recipe.recipeV2Warning")
+              }, null, 8, ["modelValue", "label", "disabled", "sublabel"])
+            ])) : E("", !0),
+            V(F, {
+              variant: "outlined",
+              class: "p-16"
+            }, {
+              default: K(() => {
+                var U, X;
+                return [
+                  s(l).enableRecipeV2 ? (k(), D(Vt, {
+                    key: 0,
+                    id: (U = c.modelValue) == null ? void 0 : U._id,
+                    disabled: c.disabled,
+                    "model-value": n.value,
+                    "onUpdate:modelValue": h[2] || (h[2] = (L) => n.value = L),
+                    rules: [s(re)(1)],
+                    "enable-ingredient-group": s(l).enableIngredientGroup,
+                    "recipe-binding-config": { enabled: !i.value, ableToApplyRules: i.value },
+                    "sku-binding-config": {
+                      ableToConfigureAlternative: i.value
+                    }
+                  }, null, 8, ["id", "disabled", "model-value", "rules", "enable-ingredient-group", "recipe-binding-config", "sku-binding-config"])) : (k(), D(qe, {
+                    key: 1,
+                    id: (X = c.modelValue) == null ? void 0 : X._id,
+                    disabled: c.disabled,
+                    "model-value": n.value,
+                    "onUpdate:modelValue": h[3] || (h[3] = (L) => n.value = L),
+                    rules: [s(re)(1)],
+                    "enable-ingredient-group": s(l).enableIngredientGroup
+                  }, null, 8, ["id", "disabled", "model-value", "rules", "enable-ingredient-group"]))
+                ];
+              }),
+              _: 1
+            })
+          ]),
+          c.mode !== s(M).CREATE ? (k(), A("div", Bt, [
+            V(w, {
+              label: "Show binded items",
+              modelValue: u.value,
+              "onUpdate:modelValue": h[4] || (h[4] = (U) => u.value = U),
+              "label-placement": "right",
+              disabled: x.value
+            }, null, 8, ["modelValue", "disabled"]),
+            x.value ? (k(), A("div", wt, [
+              V(T),
+              y("div", null, [
+                V(q, { size: "xl" })
+              ]),
+              h[6] || (h[6] = y("div", { class: "fm-typo-en-body-lg-400 text-fm-color-typo-secondary pl-8" }, "Loading...", -1)),
+              V(T)
+            ])) : u.value && a.value.length ? (k(), A("div", Ft, [
+              V(he, {
+                name: "Menu",
+                bindings: a.value
+              }, null, 8, ["bindings"])
+            ])) : E("", !0)
+          ])) : E("", !0),
+          y("div", Ct, [
+            V(ln, {
+              entity: "inventoryRecipe",
+              modelValue: o.value,
+              "onUpdate:modelValue": h[5] || (h[5] = (U) => o.value = U)
+            }, null, 8, ["modelValue"])
+          ])
+        ]),
+        _: 1
+      }, 512);
+    };
+  }
+}), Rt = { class: "flex gap-4" }, At = /* @__PURE__ */ J({
+  __name: "RecipeDialog",
+  props: {
+    show: { type: Boolean },
+    recipe: {},
+    mode: { default: M.READ }
+  },
+  emits: ["update:show"],
+  setup(f) {
+    const B = f, b = Y(), d = ce(), { t: m } = Q(), l = ye(B, "show"), _ = ye(B, "recipe"), t = S(() => {
+      switch (B.mode) {
+        case M.READ:
+          return "";
+        case M.UPDATE:
+          return m("inventory.recipe.update.title");
+        case M.CREATE:
+          return m("inventory.recipe.create.title");
+      }
+      return "";
+    }), n = S(() => {
+      switch (B.mode) {
+        case M.READ:
+          return "";
+        case M.UPDATE:
+          return m("common.save");
+        case M.CREATE:
+          return m("common.add");
+      }
+      return "";
+    }), o = N(), e = N(!1);
+    async function i() {
+      e.value = !0;
+      try {
+        const a = ue(_.value);
+        a.precision ?? (a.precision = 0), a.measurements ?? (a.measurements = []), await b.createRecipe(a), l.value = !1, d.open({
+          title: m("inventory.common.success"),
+          message: m("inventory.recipe.create.success", { name: _.value.name }),
+          type: "success"
+        });
+      } catch (a) {
+        a instanceof ve || d.open({
+          title: m("inventory.recipe.create.error.title"),
+          message: m("inventory.recipe.create.error.message"),
+          type: "error"
+        });
+      } finally {
+        e.value = !1;
+      }
+    }
+    async function r() {
+      e.value = !0;
+      try {
+        await b.updateRecipe(_.value), l.value = !1, d.open({
+          title: m("inventory.common.success"),
+          message: m("inventory.recipe.update.success", { name: _.value.name }),
+          type: "success"
+        });
+      } catch (a) {
+        a instanceof ve || d.open({
+          title: m("inventory.recipe.update.error.title"),
+          message: m("inventory.recipe.update.error.message"),
+          type: "error"
+        });
+      } finally {
+        e.value = !1;
+      }
+    }
+    function g() {
+      var a, u;
+      (u = (a = o.value) == null ? void 0 : a.validateInputs) == null || u.call(a);
+    }
+    function v() {
+      switch (B.mode) {
+        case M.READ:
+          return;
+        case M.UPDATE:
+          return r();
+        case M.CREATE:
+          return i();
+      }
+    }
+    return (a, u) => {
+      const x = R("FmButton"), C = R("FmSideSheet");
+      return k(), D(C, {
+        "model-value": s(l),
+        "onUpdate:modelValue": u[3] || (u[3] = (I) => fe(l) ? l.value = I : null),
+        header: t.value,
+        "close-button": "",
+        "dismiss-away": "",
+        "max-width": 800
+      }, {
+        "side-sheet-footer": K(() => [
+          y("div", Rt, [
+            V(x, {
+              loading: e.value,
+              label: n.value,
+              onClick: g
+            }, null, 8, ["loading", "label"]),
+            V(x, {
+              disabled: e.value,
+              label: s(m)("common.close"),
+              variant: "tertiary",
+              onClick: u[2] || (u[2] = (I) => l.value = !1)
+            }, null, 8, ["disabled", "label"])
+          ])
+        ]),
+        default: K(() => [
+          V(It, {
+            class: "w-full",
+            ref_key: "hasValidationExpose",
+            ref: o,
+            modelValue: s(_),
+            "onUpdate:modelValue": u[0] || (u[0] = (I) => fe(_) ? _.value = I : null),
+            mode: a.mode,
+            disabled: e.value,
+            "onClick:submit": u[1] || (u[1] = (I) => v())
+          }, null, 8, ["modelValue", "mode", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["model-value", "header"]);
+    };
+  }
+});
+function St(f) {
+  return !f || Object.keys(f).length === 0 ? "" : Object.entries(f).map(([B, b]) => `${B}: ${b}`).join(", ");
+}
+function $t() {
+  const f = Y(), B = f.recipes, b = f.recipeById, d = f.skuById, m = f.skuGroupById, l = B.flatMap((n, o) => {
+    var i;
+    const e = St(n.customAttributes);
+    if ((i = n.contains) != null && i.length) {
+      const r = n.contains.filter((a) => a.type === "RECIPE"), g = n.contains.filter((a) => a.type === "SKU"), v = n.contains.filter((a) => a.type === "SKU_GROUP");
+      return [
+        ...o === 0 ? [] : [["", "", "", "", "", "", ""]],
+        ...r.map(
+          (a, u) => {
+            var x;
+            return [
+              u === 0 ? n.name : "",
+              "RECIPE",
+              "",
+              (x = b[a.id]) == null ? void 0 : x.name,
+              j(a.amount),
+              "UNIT",
+              u === 0 ? e : ""
+            ];
+          }
+        ),
+        ...g.map(
+          (a, u) => {
+            var x, C, I, G;
+            return [
+              !r.length && u === 0 ? n.name : "",
+              "INGREDIENT",
+              (x = d[a.id]) == null ? void 0 : x.code,
+              (C = d[a.id]) == null ? void 0 : C.name,
+              j(a.amount),
+              a.measurement ? a.measurement.abbrev : (G = (I = d[a.id]) == null ? void 0 : I.unit) == null ? void 0 : G.abbrev,
+              !r.length && u === 0 ? e : ""
+            ];
+          }
+        ),
+        ...v.map(
+          (a, u) => {
+            var x, C;
+            return [
+              r.length === 0 && g.length === 0 && u === 0 ? n.name : "",
+              "SKU_GROUP",
+              ((x = m[a.id]) == null ? void 0 : x.ref) || "",
+              (C = m[a.id]) == null ? void 0 : C.name,
+              j(a.amount),
+              "UNIT",
+              r.length === 0 && g.length === 0 && u === 0 ? e : ""
+            ];
+          }
+        )
+      ];
+    }
+    return [
+      ...o === 0 ? [] : [["", "", "", "", "", "", ""]],
+      [n.name, "No bindings", "", "", "", "", e]
+    ];
+  }), t = an(l, ["Name", "Type", "Code", "Item", "Amount", "Unit", "Custom Attributes"]);
+  rn(t, `RECIPE_${dn(/* @__PURE__ */ new Date(), "-", "-")}.xlsx`);
+}
+const Et = { class: "flex flex-col py-8" }, Tt = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, Ut = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, ro = /* @__PURE__ */ J({
+  __name: "RecipeView",
+  setup(f) {
+    const B = Y(), b = S(() => B.recipes), d = Ue(), { createRecipe: m, updateRecipe: l } = de(), { recipeDialogProps: _, recipeViewLoading: t } = ze(de()), { columnDefs: n, formatRowData: o } = vn(), e = S(() => o(b.value));
+    me(), ce(), N(!1);
+    function i(I) {
+      if (I === "add")
+        return m();
+      if (I === "export")
+        return $t();
+    }
+    const r = N(""), g = S(() => t.value), { breakpoints: v } = Pe(), a = S(() => v.value.xs || v.value.sm), u = S(() => a.value ? 10 : 20), x = Le(), { t: C } = Q();
+    return (I, G) => {
+      const H = R("FmTable");
+      return k(), D(Oe, {
+        title: s(C)("inventory.recipe.title"),
+        actions: [
+          {
+            label: s(C)("inventory.recipe.create.title"),
+            value: "add",
+            isPrimary: !0,
+            prependIcon: "add"
+          },
+          { label: s(C)("common.export"), value: "export", isPrimary: !1 }
+        ],
+        "onClick:action": i
+      }, {
+        default: K(() => [
+          y("div", {
+            class: _e([
+              "flex flex-col gap-8 max-h-full",
+              {
+                "p-0": a.value,
+                "px-24 ": !a.value
+              }
+            ])
+          }, [
+            V(un, {
+              searchable: "",
+              search: r.value,
+              "onUpdate:search": G[0] || (G[0] = (c) => r.value = c)
+            }, null, 8, ["search"]),
+            (k(), D(H, {
+              style: Ie(s(x).tableHeight),
+              "column-defs": s(n),
+              "row-data": e.value,
+              "search-value": r.value,
+              loading: !s(d)._currentLocation || g.value,
+              onRowClick: G[1] || (G[1] = (c) => s(l)(c.original.original)),
+              key: b.value.length,
+              "page-size": u.value
+            }, {
+              "list-row": K((c) => [
+                V(sn, {
+                  row: c,
+                  onRowClick: (h) => s(l)(h.original)
+                }, {
+                  default: K((h) => {
+                    var p, w, F, T, q, P, U, X, L, $;
+                    return [
+                      y("div", Et, [
+                        y("div", Tt, [
+                          V(s(ge), {
+                            render: (F = (w = (p = h.recipe) == null ? void 0 : p.column) == null ? void 0 : w.columnDef) == null ? void 0 : F.cell,
+                            props: (q = (T = h.recipe) == null ? void 0 : T.getContext) == null ? void 0 : q.call(T)
+                          }, null, 8, ["render", "props"])
+                        ]),
+                        y("div", Ut, [
+                          V(s(ge), {
+                            render: (X = (U = (P = h.ingredients) == null ? void 0 : P.column) == null ? void 0 : U.columnDef) == null ? void 0 : X.cell,
+                            props: ($ = (L = h.ingredients) == null ? void 0 : L.getContext) == null ? void 0 : $.call(L)
+                          }, null, 8, ["render", "props"])
+                        ])
+                      ])
+                    ];
+                  }),
+                  _: 2
+                }, 1032, ["row", "onRowClick"])
+              ]),
+              _: 1
+            }, 8, ["style", "column-defs", "row-data", "search-value", "loading", "page-size"]))
+          ], 2),
+          (k(), D(Re, { to: "body" }, [
+            V(At, Ae(Se(s(_))), null, 16)
+          ]))
+        ]),
+        _: 1
+      }, 8, ["title", "actions"]);
+    };
+  }
+});
+export {
+  ro as default
+};