@feedmepos/mf-inventory-portal 0.0.5 → 0.0.7-dev.1

package/dist/IngredientsView-BH6G7830.js

@@ -0,0 +1,819 @@
+import { ref as L, defineComponent as te, computed as m, resolveComponent as y, openBlock as k, createBlock as P, withCtx as M, createVNode as d, createElementBlock as J, Fragment as ne, createElementVNode as w, createCommentVNode as G, onMounted as xe, watch as Ie, unref as i, normalizeClass as pe, createTextVNode as Ae, toDisplayString as ae, renderList as Ue, isRef as ve, normalizeStyle as Ee, Teleport as Re, normalizeProps as De, guardReactiveProps as $e } from "vue";
+import { u as le, c as Fe, S as Pe, g as fe, F as N, d as ge, a as Te, C as ue, b as be, e as Be } from "./app-DM4Thqjw.js";
+import { useDialog as Le, useSnackbar as Ce, useProxiedModel as Ve, useBreakpoints as Oe } from "@feedmepos/ui-library";
+import { i as Ne, _ as ze } from "./is-linked-ingredient-error-C6AghEwR.js";
+import { F as x, D as ye, R as ee } from "./row-action.enum-BwQbURNh.js";
+import { c as Ge, _ as Ye, F as _e, u as qe } from "./layout-kY567oHX.js";
+import { _ as We } from "./SingleColumnLayout.vue_vue_type_script_setup_true_lang-CFjO4TPG.js";
+import { R as se, U as He, A as je, M as Ke } from "./rules-CVxh5XVG.js";
+import { g as Je } from "./use-inventory-binding-dialog-CGuXojFC.js";
+import { _ as Qe } from "./InventoryBindingForm.vue_vue_type_script_setup_true_lang-39U8Iavr.js";
+import { _ as re } from "./IngredientBindedItem.vue_vue_type_script_setup_true_lang-BIww2Noe.js";
+import { a as Xe, t as Ze } from "./date2-DpU4LDaP.js";
+import { useCoreStore as en } from "@feedmepos/mf-common";
+function nn() {
+  const A = Le(), F = Ce(), g = le(), t = L(!1), l = L();
+  function a() {
+    const u = {
+      unit: {},
+      mode: x.CREATE,
+      show: !0,
+      "onUpdate:show"(b) {
+        l.value.show = b;
+      }
+    };
+    l.value = u;
+  }
+  async function c(u) {
+    const b = {
+      unit: Fe(u),
+      mode: x.UPDATE,
+      show: !0,
+      "onUpdate:show"(s) {
+        l.value.show = s;
+      }
+    };
+    l.value = b;
+  }
+  async function S(u) {
+    t.value = !0;
+    try {
+      await g.deleteSku(u), F.open({
+        title: "Success",
+        message: `Deleted ${u.name}`,
+        type: "success"
+      });
+    } catch (b) {
+      b instanceof Pe && Ne(b) ? A.open({
+        title: "Cannot delete ingredient",
+        contentComponent: ze,
+        contentComponentProps: {
+          subject: (u == null ? void 0 : u.name) ?? "",
+          items: b.errorResponse.message
+        },
+        secondaryActions: {
+          text: "Close",
+          close: !0
+        }
+      }) : console.log("unable to delete ingredient", b), F.open({
+        title: `Cannot delete ${u.name}`,
+        message: "Please try again.",
+        type: "error"
+      }), console.error("failed to delete ingredient", b);
+    } finally {
+      t.value = !1;
+    }
+  }
+  function U(u) {
+    A.open({
+      title: `Delete ${(u == null ? void 0 : u.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(() => S(u));
+  }
+  return {
+    createIngredient: a,
+    updateIngredient: c,
+    deleteIngredient: U,
+    ingredientDialogProps: l,
+    ingredientViewLoading: t
+  };
+}
+function tn({
+  updateIngredient: A,
+  deleteIngredient: F
+}) {
+  async function g(l, a) {
+    const c = Fe(a);
+    if (l === ee.Edit) {
+      await A(c);
+      return;
+    }
+    if (l === ee.Delete) {
+      await F(c);
+      return;
+    }
+  }
+  return { columnDefs: [
+    {
+      accessorKey: "code",
+      header: "Code",
+      enableSorting: !0,
+      size: 300
+    },
+    {
+      accessorKey: "name",
+      header: "Name",
+      enableSorting: !0,
+      size: 300
+    },
+    {
+      accessorFn: (l) => {
+        var a;
+        if (l.trackingMeasurement) {
+          const c = (a = l.unit.measurements) == null ? void 0 : a.find(
+            (S) => S.id === l.trackingMeasurement
+          );
+          if (c)
+            return `${c.name} (${c.abbrev})`;
+        }
+        return `${l.unit.name} (${l.unit.abbrev})`;
+      },
+      header: "Unit",
+      enableSorting: !1,
+      size: "auto"
+    },
+    {
+      id: "action",
+      header: "",
+      cell(l) {
+        return Ge(
+          [ye[ee.Edit], ye[ee.Delete]],
+          (a) => {
+            g(a, l.row.original);
+          }
+        );
+      },
+      enableSorting: !1,
+      size: 40,
+      meta: {
+        cellClass: "",
+        headerClass: ""
+      }
+    }
+  ] };
+}
+const ln = /* @__PURE__ */ te({
+  __name: "ConvertForm",
+  props: {
+    modelValue: {},
+    rootValue: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(A, { emit: F }) {
+    const g = A, t = m(() => {
+      var s;
+      return (s = g.rootValue) == null ? void 0 : s.unit;
+    }), l = m(() => {
+      var s;
+      return (s = g.rootValue) == null ? void 0 : s._id;
+    }), a = F, c = m({
+      get() {
+        return !!g.modelValue;
+      },
+      set(s) {
+        s ? a("update:modelValue", {
+          measurement: null,
+          inventoryBindings: []
+        }) : a("update:modelValue", null);
+      }
+    }), S = m(() => Je(t.value));
+    function U(s) {
+      const v = g.modelValue ?? {};
+      v.measurement = s ? `${s}` : null, a("update:modelValue", v);
+    }
+    function u(s) {
+      const v = g.modelValue ?? {};
+      v.inventoryBindings = s, a("update:modelValue", v);
+    }
+    const b = m(() => {
+      if (!g.modelValue) return null;
+      const s = g.modelValue;
+      return s.measurement ? S.value.find((v) => v.value === s.measurement) ?? null : S.value.find((v) => v.value === null) ?? null;
+    });
+    return (s, v) => {
+      const T = y("FmSwitch"), C = y("FmSelect"), V = y("FmCard");
+      return k(), P(V, {
+        variant: "outlined",
+        class: "p-16 flex flex-col gap-16"
+      }, {
+        default: M(() => {
+          var R, I;
+          return [
+            d(T, {
+              value: "",
+              "model-value": c.value,
+              "onUpdate:modelValue": v[0] || (v[0] = (E) => c.value = E),
+              label: "Convertible",
+              sublabel: "Convertible from other recipe or ingredients",
+              labelPlacement: "right"
+            }, null, 8, ["model-value"]),
+            c.value ? (k(), J(ne, { key: 0 }, [
+              w("div", null, [
+                d(C, {
+                  label: "Recipes and ingredients convert to",
+                  modelValue: (R = b.value) == null ? void 0 : R.value,
+                  "onUpdate:modelValue": U,
+                  items: S.value
+                }, null, 8, ["modelValue", "items"])
+              ]),
+              d(Qe, {
+                id: l.value,
+                "model-value": ((I = s.modelValue) == null ? void 0 : I.inventoryBindings) ?? [],
+                "onUpdate:modelValue": u,
+                "exclude-binding-id": l.value
+              }, null, 8, ["id", "model-value", "exclude-binding-id"])
+            ], 64)) : G("", !0)
+          ];
+        }),
+        _: 1
+      });
+    };
+  }
+}), on = { class: "text-fm-color-typo-secondary" }, an = { class: "flex gap-[1px] text-fm-color-typo-secondary" }, un = /* @__PURE__ */ w("div", null, "/", -1), sn = { class: "col-span-2 mt-16" }, rn = {
+  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"
+}, dn = /* @__PURE__ */ te({
+  __name: "IngredientForm",
+  props: {
+    mode: {},
+    modelValue: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue", "click:submit"],
+  setup(A, { expose: F, emit: g }) {
+    var j;
+    const t = A, l = g, a = le(), c = en(), S = Te();
+    function U(e) {
+      if (e.length === 0) return;
+      const n = e[0], o = t.modelValue ?? {
+        unit: a.units.find((r) => r)
+      };
+      o.unit || (o.unit = n, l("update:modelValue", o));
+    }
+    xe(() => {
+      U(a.units);
+    }), Ie([() => a.units], ([e]) => {
+      U(e);
+    });
+    function u() {
+      l("click:submit");
+    }
+    const b = m({
+      get() {
+        var e;
+        return ((e = t.modelValue) == null ? void 0 : e.code) ?? "";
+      },
+      set(e) {
+        const n = t.modelValue ? {
+          ...t.modelValue
+        } : {};
+        n.code = e, l("update:modelValue", n);
+      }
+    }), s = m({
+      get() {
+        var e;
+        return ((e = t.modelValue) == null ? void 0 : e.name) ?? "";
+      },
+      set(e) {
+        const n = t.modelValue ? {
+          ...t.modelValue
+        } : {};
+        n.name = e, l("update:modelValue", n);
+      }
+    }), v = m({
+      get() {
+        var n, o;
+        const e = (o = (n = t.modelValue) == null ? void 0 : n.defaultCost) == null ? void 0 : o.costPerUnit;
+        return e ? +Xe(e) : 0;
+      },
+      set(e) {
+        var o, r, _, p;
+        const n = t.modelValue ? {
+          ...t.modelValue
+        } : {};
+        n.defaultCost ?? (n.defaultCost = {
+          costPerUnit: {
+            amount: 0,
+            precision: 2,
+            currency: ((o = fe(c.currentCountry.value)) == null ? void 0 : o.currency) ?? "MYR"
+          },
+          measurement: (p = (_ = (r = t.modelValue) == null ? void 0 : r.unit) == null ? void 0 : _.measurements) == null ? void 0 : p.find(
+            (B) => {
+              var O;
+              return B.id === ((O = t.modelValue) == null ? void 0 : O.trackingMeasurement);
+            }
+          )
+        }), n.defaultCost.costPerUnit = {
+          ...n.defaultCost.costPerUnit,
+          ...Ze(+e, 4)
+        }, l("update:modelValue", n);
+      }
+    }), T = m(() => {
+      var n, o, r;
+      const e = ((n = t.modelValue) == null ? void 0 : n.unit) ?? a.units.find((_) => _);
+      return e ? {
+        _id: e._id,
+        measurement: (o = t.modelValue) == null ? void 0 : o.trackingMeasurement,
+        name: ((r = e.measurements.find((_) => {
+          var p;
+          return _.id === ((p = t.modelValue) == null ? void 0 : p.trackingMeasurement);
+        })) == null ? void 0 : r.name) ?? e.name
+      } : null;
+    }), C = m(
+      () => a.units.flatMap(({ name: e, _id: n, abbrev: o, measurements: r }) => [
+        {
+          label: `${e}`,
+          value: null,
+          displayAsSection: !0
+        },
+        {
+          label: `${e} (${o})`,
+          value: { _id: n },
+          displayAsSection: !1
+        },
+        ...r.map(({ id: _, name: p, abbrev: B }) => ({
+          label: `${p} (${B})`,
+          value: { _id: n, measurement: _ },
+          displayAsSection: !1
+        }))
+      ])
+    );
+    function V(e) {
+      var n, o, r, _, p;
+      return ((o = (n = t.modelValue) == null ? void 0 : n.unit) == null ? void 0 : o._id) === ((r = e.value) == null ? void 0 : r._id) && ((_ = t.modelValue) == null ? void 0 : _.trackingMeasurement) === ((p = e.value) == null ? void 0 : p.measurement);
+    }
+    function R(e) {
+      var B, O;
+      if (!e) return;
+      const { _id: n, measurement: o } = e, r = o || void 0, _ = a.units.find((K) => K._id === n);
+      if (!_)
+        return;
+      const p = t.modelValue ?? {};
+      p.unit = _, p.trackingMeasurement = r, p.convert && (p.convert.measurement = r || null), S.enableTotalCost && (p.defaultCost = {
+        measurement: _.measurements.find((K) => K.id === r),
+        costPerUnit: {
+          ...((B = p.defaultCost) == null ? void 0 : B.costPerUnit) ?? {
+            amount: 0,
+            precision: 2,
+            currency: ((O = fe(c.currentCountry.value)) == null ? void 0 : O.currency) ?? "MYR"
+          }
+        }
+      }), l("update:modelValue", p);
+    }
+    const I = m({
+      get() {
+        var e;
+        return ((e = t.modelValue) == null ? void 0 : e.convert) ?? null;
+      },
+      set(e) {
+        const n = t.modelValue ? {
+          ...t.modelValue
+        } : {};
+        e ? n.convert = e : n.convert = null, l("update:modelValue", n);
+      }
+    }), E = m(() => N.options.filter(
+      (e) => e === N.enum.FIFO || e === N.enum.WAVG
+    ).map((e) => {
+      function n(o) {
+        switch (o) {
+          case N.enum.WAVG:
+            return "Weighted Average (WAVG)";
+          case N.enum.FIFO:
+            return "First In First Out (FIFO)";
+          case N.enum.LIFO:
+            return "Last In First Out (LIFO)";
+          case N.enum.FEFO:
+            return "First Expired First Out (FEFO)";
+        }
+        return "";
+      }
+      return {
+        label: n(e),
+        value: e
+      };
+    })), Q = m({
+      get() {
+        var e;
+        return ((e = t.modelValue) == null ? void 0 : e.valuation) ?? "WAVG";
+      },
+      set(e) {
+        const n = t.modelValue ? {
+          ...t.modelValue
+        } : {};
+        n.valuation = e, l("update:modelValue", n);
+      }
+    }), D = L();
+    F({
+      validateInputs: () => {
+        var e, n;
+        (n = (e = D.value) == null ? void 0 : e.validateInputs) == null || n.call(e);
+      },
+      resetInputsValidation: () => {
+        var e, n;
+        (n = (e = D.value) == null ? void 0 : e.resetInputsValidation) == null || n.call(e);
+      },
+      resetInputs: () => {
+        var e, n;
+        (n = (e = D.value) == null ? void 0 : e.resetInputs) == null || n.call(e);
+      }
+    });
+    const $ = L(!1), Y = m(
+      () => {
+        var e, n, o;
+        return (e = t.modelValue) != null && e._id ? ((o = a.menu.bindedBySkuId[(n = t.modelValue) == null ? void 0 : n._id]) == null ? void 0 : o.filter(
+          (r) => r.from === "INGREDIENT"
+        )) ?? [] : [];
+      }
+    ), q = m(
+      () => {
+        var e, n, o;
+        return (e = t.modelValue) != null && e._id ? ((o = a.menu.bindedBySkuId[(n = t.modelValue) == null ? void 0 : n._id]) == null ? void 0 : o.filter(
+          (r) => r.from === "RECIPE"
+        )) ?? [] : [];
+      }
+    ), W = m(
+      () => {
+        var e, n, o;
+        return (e = t.modelValue) != null && e._id ? ((o = a.menu.bindedBySkuId[(n = t.modelValue) == null ? void 0 : n._id]) == null ? void 0 : o.filter((r) => r.from === "MENU")) ?? [] : [];
+      }
+    ), z = m(
+      () => a.skus.map((e) => ({ label: e.name, value: e.code }))
+    ), X = L((j = t.modelValue) == null ? void 0 : j.code);
+    function Z(e) {
+      var o;
+      const n = e.el;
+      n && ((o = n.querySelector("[x-should-scroll-into=true]")) == null || o.scrollIntoView());
+    }
+    function H(e) {
+      switch (e) {
+        case ue.MY:
+          return "MYR";
+        case ue.SG:
+          return "SGD";
+        case ue.ID:
+          return "IDR";
+        default:
+          return "MYR";
+      }
+    }
+    return (e, n) => {
+      const o = y("FmTextField"), r = y("FmSelect"), _ = y("FmLabel"), p = y("FmField"), B = y("FmMenuHeader"), O = y("FmMenuDivider"), K = y("FmMenuItem"), he = y("FmMenu"), Se = y("FmFormGroup"), ke = y("FmSwitch"), we = y("FmForm");
+      return k(), P(we, {
+        disabled: e.disabled,
+        ref_key: "formRef",
+        ref: D,
+        class: "grid grid-cols-2 gap-24",
+        onValidationSuccess: u
+      }, {
+        default: M(() => [
+          d(o, {
+            label: "Code",
+            "model-value": b.value,
+            "onUpdate:modelValue": n[0] || (n[0] = (f) => b.value = f),
+            rules: [i(se)(), i(He)(z.value, X.value)],
+            "label-mark": "required"
+          }, null, 8, ["model-value", "rules"]),
+          d(o, {
+            label: "Name",
+            "model-value": s.value,
+            "onUpdate:modelValue": n[1] || (n[1] = (f) => s.value = f),
+            rules: [i(se)()],
+            "label-mark": "required"
+          }, null, 8, ["model-value", "rules"]),
+          d(r, {
+            class: "col-span-2",
+            "model-value": Q.value,
+            "onUpdate:modelValue": n[2] || (n[2] = (f) => Q.value = f),
+            label: "Valuation Method",
+            items: E.value
+          }, null, 8, ["model-value", "items"]),
+          d(Se, {
+            class: pe([i(S).enableTotalCost ? "col-span-1" : "col-span-2"]),
+            "model-value": T.value,
+            rules: [i(se)()],
+            "label-mark": "required"
+          }, {
+            label: M(() => [
+              d(_, { label: "Unit" })
+            ]),
+            default: M(({ invalid: f }) => [
+              d(he, null, {
+                "menu-button": M(() => [
+                  d(p, {
+                    class: pe([
+                      "fm-typo-en-body-lg-400",
+                      {
+                        "text-fm-color-typo-primary": !e.disabled,
+                        "text-fm-color-typo-disabled": e.disabled
+                      }
+                    ]),
+                    invalid: f,
+                    "append-icon": "expand_more"
+                  }, {
+                    default: M(() => {
+                      var h;
+                      return [
+                        Ae(ae((h = T.value) == null ? void 0 : h.name), 1)
+                      ];
+                    }),
+                    _: 2
+                  }, 1032, ["class", "invalid"])
+                ]),
+                default: M(() => [
+                  w("div", {
+                    class: "overflow-x-hidden overflow-y-auto max-h-[300px]",
+                    onVnodeMounted: Z
+                  }, [
+                    (k(!0), J(ne, null, Ue(C.value, (h) => (k(), J(ne, {
+                      key: h.label
+                    }, [
+                      h.displayAsSection ? (k(), J(ne, { key: 0 }, [
+                        d(B, {
+                          label: h.label
+                        }, null, 8, ["label"]),
+                        d(O)
+                      ], 64)) : (k(), P(K, {
+                        key: 1,
+                        label: h.label,
+                        "model-value": V(h),
+                        onClick: (oe) => R(h.value),
+                        "x-should-scroll-into": `${V(h)}`
+                      }, null, 8, ["label", "model-value", "onClick", "x-should-scroll-into"]))
+                    ], 64))), 128))
+                  ], 512)
+                ]),
+                _: 2
+              }, 1024)
+            ]),
+            _: 1
+          }, 8, ["class", "model-value", "rules"]),
+          i(S).enableTotalCost ? (k(), P(o, {
+            key: 0,
+            label: "Price per unit",
+            "model-value": v.value,
+            "onUpdate:modelValue": n[3] || (n[3] = (f) => v.value = f),
+            rules: [i(je)(0), i(Ke)(2)],
+            "label-mark": "required"
+          }, {
+            prepend: M(() => {
+              var f, h;
+              return [
+                w("div", on, ae(H(((f = i(c).currentCountry) == null ? void 0 : f.value) ?? i(ge)) === "MYR" ? "RM" : H(((h = i(c).currentCountry) == null ? void 0 : h.value) ?? i(ge))), 1)
+              ];
+            }),
+            append: M(() => {
+              var f, h, oe, ie, de, me;
+              return [
+                w("div", an, [
+                  un,
+                  w("div", null, ae(((ie = (oe = (h = (f = e.modelValue) == null ? void 0 : f.unit) == null ? void 0 : h.measurements) == null ? void 0 : oe.find((Me) => {
+                    var ce;
+                    return Me.id === ((ce = e.modelValue) == null ? void 0 : ce.trackingMeasurement);
+                  })) == null ? void 0 : ie.abbrev) ?? ((me = (de = e.modelValue) == null ? void 0 : de.unit) == null ? void 0 : me.abbrev)), 1)
+                ])
+              ];
+            }),
+            _: 1
+          }, 8, ["model-value", "rules"])) : G("", !0),
+          w("div", sn, [
+            d(ln, {
+              "model-value": I.value,
+              "onUpdate:modelValue": n[4] || (n[4] = (f) => I.value = f),
+              "root-value": e.modelValue
+            }, null, 8, ["model-value", "root-value"])
+          ]),
+          e.mode !== i(x).CREATE ? (k(), J("div", rn, [
+            w("div", null, [
+              d(ke, {
+                label: "Show binded items",
+                modelValue: $.value,
+                "onUpdate:modelValue": n[5] || (n[5] = (f) => $.value = f),
+                "label-placement": "right"
+              }, null, 8, ["modelValue"])
+            ]),
+            $.value && Y.value.length ? (k(), P(re, {
+              key: 0,
+              name: "Ingredient",
+              bindings: Y.value
+            }, null, 8, ["bindings"])) : G("", !0),
+            $.value && q.value.length ? (k(), P(re, {
+              key: 1,
+              name: "Recipe",
+              bindings: q.value
+            }, null, 8, ["bindings"])) : G("", !0),
+            $.value && W.value.length ? (k(), P(re, {
+              key: 2,
+              name: "Menu",
+              bindings: W.value
+            }, null, 8, ["bindings"])) : G("", !0)
+          ])) : G("", !0)
+        ]),
+        _: 1
+      }, 8, ["disabled"]);
+    };
+  }
+}), mn = { class: "flex gap-4" }, cn = /* @__PURE__ */ te({
+  __name: "IngredientDialog",
+  props: {
+    show: { type: Boolean },
+    unit: {},
+    mode: { default: x.READ }
+  },
+  emits: ["update:show"],
+  setup(A) {
+    const F = A, g = le(), t = Ce(), l = Ve(F, "show"), a = Ve(F, "unit"), c = m(() => {
+      switch (F.mode) {
+        case x.READ:
+          return "View ingredient";
+        case x.UPDATE:
+          return "Edit ingredient";
+        case x.CREATE:
+          return "Add ingredient";
+      }
+      return "";
+    }), S = m(() => {
+      switch (F.mode) {
+        case x.READ:
+          return "";
+        case x.UPDATE:
+          return "Save";
+        case x.CREATE:
+          return "Add";
+      }
+      return "";
+    }), U = L(), u = L(!1);
+    async function b() {
+      u.value = !0;
+      try {
+        await g.createSku(a.value), l.value = !1, t.open({
+          title: "Success",
+          message: "Created " + a.value.name,
+          type: "success"
+        });
+      } catch (C) {
+        C instanceof be || t.open({
+          title: "Failed to create ingredient",
+          message: "Please try again",
+          type: "error"
+        });
+      } finally {
+        u.value = !1;
+      }
+    }
+    async function s() {
+      u.value = !0;
+      try {
+        await g.updateSku(a.value), u.value = !1, l.value = !1, t.open({
+          title: "Success",
+          message: "Updated " + a.value.name,
+          type: "success"
+        });
+      } catch (C) {
+        C instanceof be || t.open({
+          title: "Failed to update ingredient",
+          message: "Please try again",
+          type: "error"
+        });
+      } finally {
+        u.value = !1;
+      }
+    }
+    function v() {
+      var C, V;
+      (V = (C = U.value) == null ? void 0 : C.validateInputs) == null || V.call(C);
+    }
+    function T() {
+      switch (F.mode) {
+        case x.READ:
+          return;
+        case x.UPDATE:
+          return s();
+        case x.CREATE:
+          return b();
+      }
+    }
+    return (C, V) => {
+      const R = y("FmButton"), I = y("FmSideSheet");
+      return k(), P(I, {
+        "model-value": i(l),
+        "onUpdate:modelValue": V[3] || (V[3] = (E) => ve(l) ? l.value = E : null),
+        header: c.value,
+        "close-button": "",
+        "dismiss-away": "",
+        "max-width": 500
+      }, {
+        "side-sheet-footer": M(() => [
+          w("div", mn, [
+            d(R, {
+              loading: u.value,
+              label: S.value,
+              onClick: v
+            }, null, 8, ["loading", "label"]),
+            d(R, {
+              disabled: u.value,
+              label: "Close",
+              variant: "tertiary",
+              onClick: V[2] || (V[2] = (E) => l.value = !1)
+            }, null, 8, ["disabled"])
+          ])
+        ]),
+        default: M(() => [
+          d(dn, {
+            class: "w-full",
+            ref_key: "hasValidationExpose",
+            ref: U,
+            modelValue: i(a),
+            "onUpdate:modelValue": V[0] || (V[0] = (E) => ve(a) ? a.value = E : null),
+            mode: C.mode,
+            disabled: u.value,
+            "onClick:submit": V[1] || (V[1] = (E) => T())
+          }, null, 8, ["modelValue", "mode", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["model-value", "header"]);
+    };
+  }
+}), pn = { class: "px-24 xs:p-0 sm:p-0 flex flex-col gap-8 max-h-full" }, vn = { class: "px-8 flex items-center xs:gap-0 xs:flex-col-reverse sm:gap-0 sm:flex-col-reverse" }, fn = { class: "flex-1 w-full" }, gn = { class: "flex flex-col py-8" }, bn = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Vn = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, En = /* @__PURE__ */ te({
+  __name: "IngredientsView",
+  setup(A) {
+    const F = le(), g = m(() => F.skus), t = Be(), {
+      createIngredient: l,
+      updateIngredient: a,
+      deleteIngredient: c,
+      ingredientDialogProps: S,
+      ingredientViewLoading: U
+    } = nn(), { columnDefs: u } = tn({ updateIngredient: a, deleteIngredient: c });
+    function b(R) {
+      R === "add" && l();
+    }
+    const s = L(""), v = m(() => U.value), { breakpoints: T } = Oe(), C = m(() => T.value.xs || T.value.sm ? 10 : 20), V = qe();
+    return (R, I) => {
+      const E = y("FmTableToolbar"), Q = y("FmTable");
+      return k(), P(We, {
+        title: "Ingredient",
+        actions: [{ label: "Add ingredient", value: "add", isPrimary: !0, prependIcon: "add" }],
+        "onClick:action": b
+      }, {
+        default: M(() => [
+          w("div", pn, [
+            w("div", vn, [
+              w("div", fn, [
+                d(E, {
+                  searchable: "",
+                  "search-model": s.value,
+                  "onUpdate:searchModel": I[0] || (I[0] = (D) => s.value = D)
+                }, null, 8, ["search-model"])
+              ])
+            ]),
+            d(Q, {
+              style: Ee(i(V).tableHeight),
+              "column-defs": i(u),
+              "row-data": g.value,
+              "search-value": s.value,
+              loading: !i(t)._currentLocation || v.value,
+              onRowClick: I[1] || (I[1] = (D) => i(a)(D.original)),
+              "page-size": C.value
+            }, {
+              "list-row": M((D) => [
+                d(Ye, {
+                  row: D,
+                  onRowClick: i(a)
+                }, {
+                  default: M(($) => {
+                    var Y, q, W, z, X, Z, H, j, e, n;
+                    return [
+                      w("div", gn, [
+                        w("div", bn, [
+                          d(i(_e), {
+                            render: (W = (q = (Y = $.code) == null ? void 0 : Y.column) == null ? void 0 : q.columnDef) == null ? void 0 : W.cell,
+                            props: (X = (z = $.code) == null ? void 0 : z.getContext) == null ? void 0 : X.call(z)
+                          }, null, 8, ["render", "props"])
+                        ]),
+                        w("div", Vn, [
+                          d(i(_e), {
+                            render: (j = (H = (Z = $.name) == null ? void 0 : Z.column) == null ? void 0 : H.columnDef) == null ? void 0 : j.cell,
+                            props: (n = (e = $.name) == null ? void 0 : e.getContext) == null ? void 0 : n.call(e)
+                          }, null, 8, ["render", "props"])
+                        ])
+                      ])
+                    ];
+                  }),
+                  _: 2
+                }, 1032, ["row", "onRowClick"])
+              ]),
+              _: 1
+            }, 8, ["style", "column-defs", "row-data", "search-value", "loading", "page-size"])
+          ]),
+          (k(), P(Re, { to: "body" }, [
+            d(cn, De($e(i(S))), null, 16)
+          ]))
+        ]),
+        _: 1
+      });
+    };
+  }
+});
+export {
+  En as default
+};