@feedmepos/mf-inventory-portal 0.0.14-dev.4 → 0.0.15-dev.1

package/dist/IngredientsView-D2koDDCa.js

@@ -0,0 +1,961 @@
+import { ref as z, defineComponent as se, computed as c, resolveComponent as b, openBlock as S, createBlock as B, withCtx as v, createVNode as r, createElementBlock as Q, Fragment as ae, createElementVNode as a, createCommentVNode as Y, onMounted as Re, watch as Ee, unref as m, normalizeClass as ye, createTextVNode as De, toDisplayString as X, renderList as $e, isRef as be, normalizeStyle as Te, Teleport as Pe, normalizeProps as Be, guardReactiveProps as Le } from "vue";
+import { u as ue, c as Se, S as Oe, g as Ve, F as G, d as he, a as Ne, C as re, b as xe, e as ze } from "./app-CoibawJ0.js";
+import { useDialog as Ge, useSnackbar as ke, useProxiedModel as Fe, useBreakpoints as We } from "@feedmepos/ui-library";
+import { i as Ye, _ as qe } from "./is-linked-ingredient-error-C6AghEwR.js";
+import { F as M, D as we, R as ne } from "./row-action.enum-BwQbURNh.js";
+import { c as He, _ as je, F as Ce, u as Ke } from "./layout-h_bwk4FG.js";
+import { _ as Je } from "./SingleColumnLayout.vue_vue_type_script_setup_true_lang-CFjO4TPG.js";
+import { R as de, U as Qe, A as ie, M as Xe } from "./rules-DFRHLux_.js";
+import { g as Ze, _ as me, S as ce } from "./StockForecast.vue_vue_type_style_index_0_lang-B5EK101t.js";
+import { _ as et } from "./InventoryBindingForm.vue_vue_type_script_setup_true_lang-lu1Pn7Gk.js";
+import { _ as pe } from "./IngredientBindedItem.vue_vue_type_script_setup_true_lang-BWHoRZgx.js";
+import { a as tt, t as lt } from "./date2-dqysRKe3.js";
+import { useCoreStore as nt } from "@feedmepos/mf-common";
+import { _ as fe } from "./PreviewBadge.vue_vue_type_script_setup_true_lang-BvadeWUz.js";
+function ot() {
+  const A = Ge(), F = ke(), V = ue(), l = z(!1), o = z();
+  function s() {
+    const d = {
+      unit: {},
+      mode: M.CREATE,
+      show: !0,
+      "onUpdate:show"(h) {
+        o.value.show = h;
+      }
+    };
+    o.value = d;
+  }
+  async function f(d) {
+    const h = {
+      unit: Se(d),
+      mode: M.UPDATE,
+      show: !0,
+      "onUpdate:show"(i) {
+        o.value.show = i;
+      }
+    };
+    o.value = h;
+  }
+  async function C(d) {
+    l.value = !0;
+    try {
+      await V.deleteSku(d), F.open({
+        title: "Success",
+        message: `Deleted ${d.name}`,
+        type: "success"
+      });
+    } catch (h) {
+      h instanceof Oe && Ye(h) ? A.open({
+        title: "Cannot delete ingredient",
+        contentComponent: qe,
+        contentComponentProps: {
+          subject: (d == null ? void 0 : d.name) ?? "",
+          items: h.errorResponse.message
+        },
+        secondaryActions: {
+          text: "Close",
+          close: !0
+        }
+      }) : console.log("unable to delete ingredient", h), F.open({
+        title: `Cannot delete ${d.name}`,
+        message: "Please try again.",
+        type: "error"
+      }), console.error("failed to delete ingredient", h);
+    } finally {
+      l.value = !1;
+    }
+  }
+  function U(d) {
+    A.open({
+      title: `Delete ${(d == null ? void 0 : d.name) ?? "ingredient"}?`,
+      closeButton: !1,
+      message: "You may not be able to delete this ingredient if it is linked in any of the inventory modules.",
+      primaryActions: {
+        text: "Delete",
+        close: !0,
+        variant: "destructive"
+      },
+      secondaryActions: {
+        text: "Cancel",
+        close: !0
+      }
+    }).onPrimary(() => C(d));
+  }
+  return {
+    createIngredient: s,
+    updateIngredient: f,
+    deleteIngredient: U,
+    ingredientDialogProps: o,
+    ingredientViewLoading: l
+  };
+}
+function at({
+  updateIngredient: A,
+  deleteIngredient: F
+}) {
+  async function V(o, s) {
+    const f = Se(s);
+    if (o === ne.Edit) {
+      await A(f);
+      return;
+    }
+    if (o === ne.Delete) {
+      await F(f);
+      return;
+    }
+  }
+  return { columnDefs: [
+    {
+      accessorKey: "code",
+      header: "Code",
+      enableSorting: !0,
+      size: 300
+    },
+    {
+      accessorKey: "name",
+      header: "Name",
+      enableSorting: !0,
+      size: 300
+    },
+    {
+      accessorFn: (o) => {
+        var s;
+        if (o.trackingMeasurement) {
+          const f = (s = o.unit.measurements) == null ? void 0 : s.find(
+            (C) => C.id === o.trackingMeasurement
+          );
+          if (f)
+            return `${f.name} (${f.abbrev})`;
+        }
+        return `${o.unit.name} (${o.unit.abbrev})`;
+      },
+      header: "Unit",
+      enableSorting: !1,
+      size: "auto"
+    },
+    {
+      id: "action",
+      header: "",
+      cell(o) {
+        return He(
+          [we[ne.Edit], we[ne.Delete]],
+          (s) => {
+            V(s, o.row.original);
+          }
+        );
+      },
+      enableSorting: !1,
+      size: 40,
+      meta: {
+        cellClass: "",
+        headerClass: ""
+      }
+    }
+  ] };
+}
+const st = /* @__PURE__ */ se({
+  __name: "ConvertForm",
+  props: {
+    modelValue: {},
+    rootValue: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(A, { emit: F }) {
+    const V = A, l = c(() => {
+      var i;
+      return (i = V.rootValue) == null ? void 0 : i.unit;
+    }), o = c(() => {
+      var i;
+      return (i = V.rootValue) == null ? void 0 : i._id;
+    }), s = F, f = c({
+      get() {
+        return !!V.modelValue;
+      },
+      set(i) {
+        i ? s("update:modelValue", {
+          measurement: null,
+          inventoryBindings: []
+        }) : s("update:modelValue", null);
+      }
+    }), C = c(() => Ze(l.value));
+    function U(i) {
+      const y = V.modelValue ?? {};
+      y.measurement = i ? `${i}` : null, s("update:modelValue", y);
+    }
+    function d(i) {
+      const y = V.modelValue ?? {};
+      y.inventoryBindings = i, s("update:modelValue", y);
+    }
+    const h = c(() => {
+      if (!V.modelValue) return null;
+      const i = V.modelValue;
+      return i.measurement ? C.value.find((y) => y.value === i.measurement) ?? null : C.value.find((y) => y.value === null) ?? null;
+    });
+    return (i, y) => {
+      const L = b("FmSwitch"), w = b("FmSelect"), x = b("FmCard");
+      return S(), B(x, {
+        variant: "outlined",
+        class: "p-16 flex flex-col gap-16"
+      }, {
+        default: v(() => {
+          var E, I;
+          return [
+            r(L, {
+              value: "",
+              "model-value": f.value,
+              "onUpdate:modelValue": y[0] || (y[0] = (R) => f.value = R),
+              label: "Convertible",
+              sublabel: "Convertible from other recipe or ingredients",
+              labelPlacement: "right"
+            }, null, 8, ["model-value"]),
+            f.value ? (S(), Q(ae, { key: 0 }, [
+              a("div", null, [
+                r(w, {
+                  label: "Recipes and ingredients convert to",
+                  modelValue: (E = h.value) == null ? void 0 : E.value,
+                  "onUpdate:modelValue": U,
+                  items: C.value
+                }, null, 8, ["modelValue", "items"])
+              ]),
+              r(et, {
+                id: o.value,
+                "model-value": ((I = i.modelValue) == null ? void 0 : I.inventoryBindings) ?? [],
+                "onUpdate:modelValue": d,
+                "exclude-binding-id": o.value
+              }, null, 8, ["id", "model-value", "exclude-binding-id"])
+            ], 64)) : Y("", !0)
+          ];
+        }),
+        _: 1
+      });
+    };
+  }
+});
+function oe() {
+  return {
+    low: 7,
+    mid: 14
+  };
+}
+const ut = { class: "text-fm-color-typo-secondary" }, rt = { class: "text-fm-color-typo-secondary whitespace-nowrap" }, dt = { class: "col-span-2 mt-16" }, it = {
+  key: 1,
+  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"
+}, mt = { class: "col-span-2 flex flex-col gap-12" }, ct = { class: "flex flex-col gap-4" }, pt = /* @__PURE__ */ a("div", { class: "fm-typo-en-title-sm-800" }, "Alert threshold", -1), ft = /* @__PURE__ */ a("div", { class: "fm-typo-en-body-sm-400 text-fm-color-typo-secondary" }, " Configure threshold for days remaining indicator in the stock balance page. ", -1), vt = { class: "col-span-2 flex flex-col gap-4" }, _t = { class: "flex fm-corner-radius-md border-[1px] border-fm-color-neutral-gray-200" }, gt = { class: "flex-1 p-12 flex flex-col gap-8" }, yt = { class: "mx-auto" }, bt = { class: "flex flex-col" }, Vt = /* @__PURE__ */ a("div", { class: "fm-typo-en-body-sm-600 translate-y-4" }, "When less than", -1), ht = /* @__PURE__ */ a("div", { class: "text-fm-color-typo-secondary pr-32" }, "days", -1), xt = /* @__PURE__ */ a("div", { class: "h-full w-[1px] bg-fm-color-neutral-gray-200 relative" }, [
+  /* @__PURE__ */ a("div", {
+    class: "absolute bg-white",
+    style: { transform: "translate(-50%, -50%)", left: "50%", top: "20%" }
+  }, /* @__PURE__ */ X("<"))
+], -1), Ft = { class: "flex-1 p-12 flex flex-col gap-8" }, wt = { class: "mx-auto" }, Ct = { class: "flex flex-col" }, St = /* @__PURE__ */ a("div", { class: "fm-typo-en-body-sm-600 translate-y-4" }, "When less than", -1), kt = /* @__PURE__ */ a("div", { class: "text-fm-color-typo-secondary pr-32" }, "days", -1), Mt = /* @__PURE__ */ a("div", { class: "h-full w-[1px] bg-fm-color-neutral-gray-200 relative" }, [
+  /* @__PURE__ */ a("div", {
+    class: "absolute bg-white",
+    style: { transform: "translate(-50%, -50%)", left: "50%", top: "20%" }
+  }, /* @__PURE__ */ X("<"))
+], -1), It = { class: "flex-1 p-12 flex flex-col gap-8" }, At = { class: "mx-auto" }, Ut = /* @__PURE__ */ a("div", { class: "flex flex-col" }, [
+  /* @__PURE__ */ a("div", { class: "fm-typo-en-body-sm-600 translate-y-4" }, "Stock is staple")
+], -1), Rt = /* @__PURE__ */ se({
+  __name: "IngredientForm",
+  props: {
+    mode: {},
+    modelValue: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue", "click:submit"],
+  setup(A, { expose: F, emit: V }) {
+    var ve;
+    const l = A, o = V, s = ue(), f = nt(), C = Ne();
+    function U(e) {
+      if (e.length === 0) return;
+      const t = e[0], n = l.modelValue ?? {
+        unit: s.units.find((u) => u)
+      };
+      n.unit || (n.unit = t, o("update:modelValue", n));
+    }
+    Re(() => {
+      U(s.units);
+    }), Ee([() => s.units], ([e]) => {
+      U(e);
+    });
+    function d() {
+      o("click:submit");
+    }
+    const h = c({
+      get() {
+        var e;
+        return ((e = l.modelValue) == null ? void 0 : e.code) ?? "";
+      },
+      set(e) {
+        const t = l.modelValue ? {
+          ...l.modelValue
+        } : {};
+        t.code = e, o("update:modelValue", t);
+      }
+    }), i = c({
+      get() {
+        var e;
+        return ((e = l.modelValue) == null ? void 0 : e.name) ?? "";
+      },
+      set(e) {
+        const t = l.modelValue ? {
+          ...l.modelValue
+        } : {};
+        t.name = e, o("update:modelValue", t);
+      }
+    }), y = c({
+      get() {
+        var t, n;
+        const e = (n = (t = l.modelValue) == null ? void 0 : t.defaultCost) == null ? void 0 : n.costPerUnit;
+        return e ? +tt(e) : 0;
+      },
+      set(e) {
+        var n, u, _, p;
+        const t = l.modelValue ? {
+          ...l.modelValue
+        } : {};
+        t.defaultCost ?? (t.defaultCost = {
+          costPerUnit: {
+            amount: 0,
+            precision: 2,
+            currency: ((n = Ve(f.currentCountry.value)) == null ? void 0 : n.currency) ?? "MYR"
+          },
+          measurement: (p = (_ = (u = l.modelValue) == null ? void 0 : u.unit) == null ? void 0 : _.measurements) == null ? void 0 : p.find(
+            (T) => {
+              var P;
+              return T.id === ((P = l.modelValue) == null ? void 0 : P.trackingMeasurement);
+            }
+          )
+        }), t.defaultCost.costPerUnit = {
+          ...t.defaultCost.costPerUnit,
+          ...lt(+e, 4)
+        }, o("update:modelValue", t);
+      }
+    }), L = c(() => {
+      var t, n, u;
+      const e = ((t = l.modelValue) == null ? void 0 : t.unit) ?? s.units.find((_) => _);
+      return e ? {
+        _id: e._id,
+        measurement: (n = l.modelValue) == null ? void 0 : n.trackingMeasurement,
+        name: ((u = e.measurements.find((_) => {
+          var p;
+          return _.id === ((p = l.modelValue) == null ? void 0 : p.trackingMeasurement);
+        })) == null ? void 0 : u.name) ?? e.name
+      } : null;
+    }), w = c(
+      () => s.units.flatMap(({ name: e, _id: t, abbrev: n, measurements: u }) => [
+        {
+          label: `${e}`,
+          value: null,
+          displayAsSection: !0
+        },
+        {
+          label: `${e} (${n})`,
+          value: { _id: t },
+          displayAsSection: !1
+        },
+        ...u.map(({ id: _, name: p, abbrev: T }) => ({
+          label: `${p} (${T})`,
+          value: { _id: t, measurement: _ },
+          displayAsSection: !1
+        }))
+      ])
+    );
+    function x(e) {
+      var t, n, u, _, p;
+      return ((n = (t = l.modelValue) == null ? void 0 : t.unit) == null ? void 0 : n._id) === ((u = e.value) == null ? void 0 : u._id) && ((_ = l.modelValue) == null ? void 0 : _.trackingMeasurement) === ((p = e.value) == null ? void 0 : p.measurement);
+    }
+    function E(e) {
+      var T, P;
+      if (!e) return;
+      const { _id: t, measurement: n } = e, u = n || void 0, _ = s.units.find((J) => J._id === t);
+      if (!_)
+        return;
+      const p = l.modelValue ?? {};
+      p.unit = _, p.trackingMeasurement = u, p.convert && (p.convert.measurement = u || null), C.enableTotalCost && (p.defaultCost = {
+        measurement: _.measurements.find((J) => J.id === u),
+        costPerUnit: {
+          ...((T = p.defaultCost) == null ? void 0 : T.costPerUnit) ?? {
+            amount: 0,
+            precision: 2,
+            currency: ((P = Ve(f.currentCountry.value)) == null ? void 0 : P.currency) ?? "MYR"
+          }
+        }
+      }), o("update:modelValue", p);
+    }
+    const I = c({
+      get() {
+        var e;
+        return ((e = l.modelValue) == null ? void 0 : e.convert) ?? null;
+      },
+      set(e) {
+        const t = l.modelValue ? {
+          ...l.modelValue
+        } : {};
+        e ? t.convert = e : t.convert = null, o("update:modelValue", t);
+      }
+    }), R = c(() => G.options.filter(
+      (e) => e === G.enum.FIFO || e === G.enum.WAVG
+    ).map((e) => {
+      function t(n) {
+        switch (n) {
+          case G.enum.WAVG:
+            return "Weighted Average (WAVG)";
+          case G.enum.FIFO:
+            return "First In First Out (FIFO)";
+          case G.enum.LIFO:
+            return "Last In First Out (LIFO)";
+          case G.enum.FEFO:
+            return "First Expired First Out (FEFO)";
+        }
+        return "";
+      }
+      return {
+        label: t(e),
+        value: e
+      };
+    })), Z = c({
+      get() {
+        var e;
+        return ((e = l.modelValue) == null ? void 0 : e.valuation) ?? "WAVG";
+      },
+      set(e) {
+        const t = l.modelValue ? {
+          ...l.modelValue
+        } : {};
+        t.valuation = e, o("update:modelValue", t);
+      }
+    }), D = z();
+    F({
+      validateInputs: () => {
+        var e, t;
+        (t = (e = D.value) == null ? void 0 : e.validateInputs) == null || t.call(e);
+      },
+      resetInputsValidation: () => {
+        var e, t;
+        (t = (e = D.value) == null ? void 0 : e.resetInputsValidation) == null || t.call(e);
+      },
+      resetInputs: () => {
+        var e, t;
+        (t = (e = D.value) == null ? void 0 : e.resetInputs) == null || t.call(e);
+      }
+    });
+    const $ = z(!1), q = c(
+      () => {
+        var e, t, n;
+        return (e = l.modelValue) != null && e._id ? ((n = s.menu.bindedBySkuId[(t = l.modelValue) == null ? void 0 : t._id]) == null ? void 0 : n.filter(
+          (u) => u.from === "INGREDIENT"
+        )) ?? [] : [];
+      }
+    ), H = c(
+      () => {
+        var e, t, n;
+        return (e = l.modelValue) != null && e._id ? ((n = s.menu.bindedBySkuId[(t = l.modelValue) == null ? void 0 : t._id]) == null ? void 0 : n.filter(
+          (u) => u.from === "RECIPE"
+        )) ?? [] : [];
+      }
+    ), j = c(
+      () => {
+        var e, t, n;
+        return (e = l.modelValue) != null && e._id ? ((n = s.menu.bindedBySkuId[(t = l.modelValue) == null ? void 0 : t._id]) == null ? void 0 : n.filter((u) => u.from === "MENU")) ?? [] : [];
+      }
+    ), W = c(
+      () => s.skus.map((e) => ({ label: e.name, value: e.code }))
+    ), ee = z((ve = l.modelValue) == null ? void 0 : ve.code);
+    function te(e) {
+      var n;
+      const t = e.el;
+      t && ((n = t.querySelector("[x-should-scroll-into=true]")) == null || n.scrollIntoView());
+    }
+    function K(e) {
+      switch (e) {
+        case re.MY:
+          return "MYR";
+        case re.SG:
+          return "SGD";
+        case re.ID:
+          return "IDR";
+        default:
+          return "MYR";
+      }
+    }
+    const le = c(
+      () => {
+        var e, t, n, u, _, p;
+        return ((u = (n = (t = (e = l.modelValue) == null ? void 0 : e.unit) == null ? void 0 : t.measurements) == null ? void 0 : n.find(
+          (T) => {
+            var P;
+            return T.id === ((P = l.modelValue) == null ? void 0 : P.trackingMeasurement);
+          }
+        )) == null ? void 0 : u.abbrev) ?? ((p = (_ = l.modelValue) == null ? void 0 : _.unit) == null ? void 0 : p.abbrev);
+      }
+    ), O = c({
+      get() {
+        var e, t;
+        return ((t = (e = l.modelValue) == null ? void 0 : e.thresholds) == null ? void 0 : t.low) ?? oe().low;
+      },
+      set(e) {
+        var u;
+        const t = ((u = l.modelValue) == null ? void 0 : u.thresholds) ?? oe();
+        t.low = e;
+        const n = l.modelValue ? {
+          ...l.modelValue
+        } : {};
+        n.thresholds = t, o("update:modelValue", n);
+      }
+    }), N = c({
+      get() {
+        var e, t;
+        return ((t = (e = l.modelValue) == null ? void 0 : e.thresholds) == null ? void 0 : t.mid) ?? oe().mid;
+      },
+      set(e) {
+        var u;
+        const t = ((u = l.modelValue) == null ? void 0 : u.thresholds) ?? oe();
+        t.mid = e;
+        const n = l.modelValue ? {
+          ...l.modelValue
+        } : {};
+        n.thresholds = t, o("update:modelValue", n);
+      }
+    });
+    function Me() {
+      return function(t) {
+        return typeof (t == null ? void 0 : t.low) != "number" || typeof (t == null ? void 0 : t.mid) != "number" ? "Required" : t.low >= t.mid ? "Days for red indicator should be less than yellow indicator." : !0;
+      };
+    }
+    return (e, t) => {
+      const n = b("FmTextField"), u = b("FmLabel"), _ = b("FmSelect"), p = b("FmField"), T = b("FmMenuHeader"), P = b("FmMenuDivider"), J = b("FmMenuItem"), Ie = b("FmMenu"), _e = b("FmFormGroup"), Ae = b("FmSwitch"), ge = b("FmStepperField"), Ue = b("FmForm");
+      return S(), B(Ue, {
+        disabled: e.disabled,
+        ref_key: "formRef",
+        ref: D,
+        class: "grid grid-cols-2 gap-24",
+        onValidationSuccess: d
+      }, {
+        default: v(() => [
+          r(n, {
+            label: "Code",
+            "model-value": h.value,
+            "onUpdate:modelValue": t[0] || (t[0] = (g) => h.value = g),
+            rules: [m(de)(), m(Qe)(W.value, ee.value)],
+            "label-mark": "required"
+          }, null, 8, ["model-value", "rules"]),
+          r(n, {
+            label: "Name",
+            "model-value": i.value,
+            "onUpdate:modelValue": t[1] || (t[1] = (g) => i.value = g),
+            rules: [m(de)()],
+            "label-mark": "required"
+          }, null, 8, ["model-value", "rules"]),
+          r(_, {
+            class: "col-span-2",
+            "model-value": Z.value,
+            "onUpdate:modelValue": t[2] || (t[2] = (g) => Z.value = g),
+            items: R.value
+          }, {
+            label: v(() => [
+              r(fe, { "z-index": 50 }, {
+                default: v(() => [
+                  r(u, { label: "Valuation Method" })
+                ]),
+                _: 1
+              })
+            ]),
+            _: 1
+          }, 8, ["model-value", "items"]),
+          r(_e, {
+            class: ye([m(C).enableTotalCost ? "col-span-1" : "col-span-2"]),
+            "model-value": L.value,
+            rules: [m(de)()],
+            "label-mark": "required"
+          }, {
+            label: v(() => [
+              r(u, { label: "Unit" })
+            ]),
+            default: v(({ invalid: g }) => [
+              r(Ie, null, {
+                "menu-button": v(() => [
+                  r(p, {
+                    class: ye([
+                      "fm-typo-en-body-lg-400",
+                      {
+                        "text-fm-color-typo-primary": !e.disabled,
+                        "text-fm-color-typo-disabled": e.disabled
+                      }
+                    ]),
+                    invalid: g,
+                    "append-icon": "expand_more"
+                  }, {
+                    default: v(() => {
+                      var k;
+                      return [
+                        De(X((k = L.value) == null ? void 0 : k.name), 1)
+                      ];
+                    }),
+                    _: 2
+                  }, 1032, ["class", "invalid"])
+                ]),
+                default: v(() => [
+                  a("div", {
+                    class: "overflow-x-hidden overflow-y-auto max-h-[300px]",
+                    onVnodeMounted: te
+                  }, [
+                    (S(!0), Q(ae, null, $e(w.value, (k) => (S(), Q(ae, {
+                      key: k.label
+                    }, [
+                      k.displayAsSection ? (S(), Q(ae, { key: 0 }, [
+                        r(T, {
+                          label: k.label
+                        }, null, 8, ["label"]),
+                        r(P)
+                      ], 64)) : (S(), B(J, {
+                        key: 1,
+                        label: k.label,
+                        "model-value": x(k),
+                        onClick: (Nt) => E(k.value),
+                        "x-should-scroll-into": `${x(k)}`
+                      }, null, 8, ["label", "model-value", "onClick", "x-should-scroll-into"]))
+                    ], 64))), 128))
+                  ], 512)
+                ]),
+                _: 2
+              }, 1024)
+            ]),
+            _: 1
+          }, 8, ["class", "model-value", "rules"]),
+          m(C).enableTotalCost ? (S(), B(n, {
+            key: 0,
+            "model-value": y.value,
+            "onUpdate:modelValue": t[3] || (t[3] = (g) => y.value = g),
+            rules: [m(ie)(0), m(Xe)(2)]
+          }, {
+            label: v(() => [
+              r(fe, { "z-index": 50 }, {
+                default: v(() => [
+                  r(u, { label: "Price per unit" })
+                ]),
+                _: 1
+              })
+            ]),
+            prepend: v(() => {
+              var g, k;
+              return [
+                a("div", ut, X(K(((g = m(f).currentCountry) == null ? void 0 : g.value) ?? m(he)) === "MYR" ? "RM" : K(((k = m(f).currentCountry) == null ? void 0 : k.value) ?? m(he))), 1)
+              ];
+            }),
+            append: v(() => [
+              a("div", rt, " / " + X(le.value), 1)
+            ]),
+            _: 1
+          }, 8, ["model-value", "rules"])) : Y("", !0),
+          a("div", dt, [
+            r(st, {
+              "model-value": I.value,
+              "onUpdate:modelValue": t[4] || (t[4] = (g) => I.value = g),
+              "root-value": e.modelValue
+            }, null, 8, ["model-value", "root-value"])
+          ]),
+          e.mode !== m(M).CREATE ? (S(), Q("div", it, [
+            a("div", null, [
+              r(Ae, {
+                label: "Show binded items",
+                modelValue: $.value,
+                "onUpdate:modelValue": t[5] || (t[5] = (g) => $.value = g),
+                "label-placement": "right"
+              }, null, 8, ["modelValue"])
+            ]),
+            $.value && q.value.length ? (S(), B(pe, {
+              key: 0,
+              name: "Ingredient",
+              bindings: q.value
+            }, null, 8, ["bindings"])) : Y("", !0),
+            $.value && H.value.length ? (S(), B(pe, {
+              key: 1,
+              name: "Recipe",
+              bindings: H.value
+            }, null, 8, ["bindings"])) : Y("", !0),
+            $.value && j.value.length ? (S(), B(pe, {
+              key: 2,
+              name: "Menu",
+              bindings: j.value
+            }, null, 8, ["bindings"])) : Y("", !0)
+          ])) : Y("", !0),
+          a("div", mt, [
+            a("div", ct, [
+              r(fe, null, {
+                default: v(() => [
+                  pt
+                ]),
+                _: 1
+              }),
+              ft
+            ]),
+            a("div", vt, [
+              r(_e, {
+                "model-value": { low: O.value, mid: N.value },
+                rules: [Me()]
+              }, null, 8, ["model-value", "rules"]),
+              a("div", _t, [
+                a("div", gt, [
+                  a("div", yt, [
+                    r(me, {
+                      days: O.value,
+                      level: m(ce).low
+                    }, null, 8, ["days", "level"])
+                  ]),
+                  a("div", bt, [
+                    Vt,
+                    r(ge, {
+                      modelValue: O.value,
+                      "onUpdate:modelValue": t[6] || (t[6] = (g) => O.value = g),
+                      rules: [m(ie)(0)]
+                    }, {
+                      append: v(() => [
+                        ht
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue", "rules"])
+                  ])
+                ]),
+                xt,
+                a("div", Ft, [
+                  a("div", wt, [
+                    r(me, {
+                      days: N.value,
+                      level: m(ce).mid
+                    }, null, 8, ["days", "level"])
+                  ]),
+                  a("div", Ct, [
+                    St,
+                    r(ge, {
+                      modelValue: N.value,
+                      "onUpdate:modelValue": t[7] || (t[7] = (g) => N.value = g),
+                      rules: [m(ie)(0)]
+                    }, {
+                      append: v(() => [
+                        kt
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue", "rules"])
+                  ])
+                ]),
+                Mt,
+                a("div", It, [
+                  a("div", At, [
+                    r(me, {
+                      days: N.value + 1,
+                      level: m(ce).high
+                    }, null, 8, ["days", "level"])
+                  ]),
+                  Ut
+                ])
+              ])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["disabled"]);
+    };
+  }
+}), Et = { class: "flex gap-4" }, Dt = /* @__PURE__ */ se({
+  __name: "IngredientDialog",
+  props: {
+    show: { type: Boolean },
+    unit: {},
+    mode: { default: M.READ }
+  },
+  emits: ["update:show"],
+  setup(A) {
+    const F = A, V = ue(), l = ke(), o = Fe(F, "show"), s = Fe(F, "unit"), f = c(() => {
+      switch (F.mode) {
+        case M.READ:
+          return "View ingredient";
+        case M.UPDATE:
+          return "Edit ingredient";
+        case M.CREATE:
+          return "Add ingredient";
+      }
+      return "";
+    }), C = c(() => {
+      switch (F.mode) {
+        case M.READ:
+          return "";
+        case M.UPDATE:
+          return "Save";
+        case M.CREATE:
+          return "Add";
+      }
+      return "";
+    }), U = z(), d = z(!1);
+    async function h() {
+      d.value = !0;
+      try {
+        await V.createSku(s.value), o.value = !1, l.open({
+          title: "Success",
+          message: "Created " + s.value.name,
+          type: "success"
+        });
+      } catch (w) {
+        w instanceof xe || l.open({
+          title: "Failed to create ingredient",
+          message: "Please try again",
+          type: "error"
+        });
+      } finally {
+        d.value = !1;
+      }
+    }
+    async function i() {
+      d.value = !0;
+      try {
+        await V.updateSku(s.value), d.value = !1, o.value = !1, l.open({
+          title: "Success",
+          message: "Updated " + s.value.name,
+          type: "success"
+        });
+      } catch (w) {
+        w instanceof xe || l.open({
+          title: "Failed to update ingredient",
+          message: "Please try again",
+          type: "error"
+        });
+      } finally {
+        d.value = !1;
+      }
+    }
+    function y() {
+      var w, x;
+      (x = (w = U.value) == null ? void 0 : w.validateInputs) == null || x.call(w);
+    }
+    function L() {
+      switch (F.mode) {
+        case M.READ:
+          return;
+        case M.UPDATE:
+          return i();
+        case M.CREATE:
+          return h();
+      }
+    }
+    return (w, x) => {
+      const E = b("FmButton"), I = b("FmSideSheet");
+      return S(), B(I, {
+        "model-value": m(o),
+        "onUpdate:modelValue": x[3] || (x[3] = (R) => be(o) ? o.value = R : null),
+        header: f.value,
+        "close-button": "",
+        "dismiss-away": "",
+        "max-width": 500
+      }, {
+        "side-sheet-footer": v(() => [
+          a("div", Et, [
+            r(E, {
+              loading: d.value,
+              label: C.value,
+              onClick: y
+            }, null, 8, ["loading", "label"]),
+            r(E, {
+              disabled: d.value,
+              label: "Close",
+              variant: "tertiary",
+              onClick: x[2] || (x[2] = (R) => o.value = !1)
+            }, null, 8, ["disabled"])
+          ])
+        ]),
+        default: v(() => [
+          r(Rt, {
+            class: "w-full",
+            ref_key: "hasValidationExpose",
+            ref: U,
+            modelValue: m(s),
+            "onUpdate:modelValue": x[0] || (x[0] = (R) => be(s) ? s.value = R : null),
+            mode: w.mode,
+            disabled: d.value,
+            "onClick:submit": x[1] || (x[1] = (R) => L())
+          }, null, 8, ["modelValue", "mode", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["model-value", "header"]);
+    };
+  }
+}), $t = { class: "px-24 xs:p-0 sm:p-0 flex flex-col gap-8 max-h-full" }, Tt = { class: "px-8 flex items-center xs:gap-0 xs:flex-col-reverse sm:gap-0 sm:flex-col-reverse" }, Pt = { class: "flex-1 w-full" }, Bt = { class: "flex flex-col py-8" }, Lt = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Ot = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, ll = /* @__PURE__ */ se({
+  __name: "IngredientsView",
+  setup(A) {
+    const F = ue(), V = c(() => F.skus), l = ze(), {
+      createIngredient: o,
+      updateIngredient: s,
+      deleteIngredient: f,
+      ingredientDialogProps: C,
+      ingredientViewLoading: U
+    } = ot(), { columnDefs: d } = at({ updateIngredient: s, deleteIngredient: f });
+    function h(E) {
+      E === "add" && o();
+    }
+    const i = z(""), y = c(() => U.value), { breakpoints: L } = We(), w = c(() => L.value.xs || L.value.sm ? 10 : 20), x = Ke();
+    return (E, I) => {
+      const R = b("FmTableToolbar"), Z = b("FmTable");
+      return S(), B(Je, {
+        title: "Ingredient",
+        actions: [{ label: "Add ingredient", value: "add", isPrimary: !0, prependIcon: "add" }],
+        "onClick:action": h
+      }, {
+        default: v(() => [
+          a("div", $t, [
+            a("div", Tt, [
+              a("div", Pt, [
+                r(R, {
+                  searchable: "",
+                  "search-model": i.value,
+                  "onUpdate:searchModel": I[0] || (I[0] = (D) => i.value = D)
+                }, null, 8, ["search-model"])
+              ])
+            ]),
+            r(Z, {
+              style: Te(m(x).tableHeight),
+              "column-defs": m(d),
+              "row-data": V.value,
+              "search-value": i.value,
+              loading: !m(l)._currentLocation || y.value,
+              onRowClick: I[1] || (I[1] = (D) => m(s)(D.original)),
+              "page-size": w.value
+            }, {
+              "list-row": v((D) => [
+                r(je, {
+                  row: D,
+                  onRowClick: m(s)
+                }, {
+                  default: v(($) => {
+                    var q, H, j, W, ee, te, K, le, O, N;
+                    return [
+                      a("div", Bt, [
+                        a("div", Lt, [
+                          r(m(Ce), {
+                            render: (j = (H = (q = $.code) == null ? void 0 : q.column) == null ? void 0 : H.columnDef) == null ? void 0 : j.cell,
+                            props: (ee = (W = $.code) == null ? void 0 : W.getContext) == null ? void 0 : ee.call(W)
+                          }, null, 8, ["render", "props"])
+                        ]),
+                        a("div", Ot, [
+                          r(m(Ce), {
+                            render: (le = (K = (te = $.name) == null ? void 0 : te.column) == null ? void 0 : K.columnDef) == null ? void 0 : le.cell,
+                            props: (N = (O = $.name) == null ? void 0 : O.getContext) == null ? void 0 : N.call(O)
+                          }, null, 8, ["render", "props"])
+                        ])
+                      ])
+                    ];
+                  }),
+                  _: 2
+                }, 1032, ["row", "onRowClick"])
+              ]),
+              _: 1
+            }, 8, ["style", "column-defs", "row-data", "search-value", "loading", "page-size"])
+          ]),
+          (S(), B(Pe, { to: "body" }, [
+            r(Dt, Be(Le(m(C))), null, 16)
+          ]))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  ll as default
+};