@feedmepos/mf-inventory-portal 0.0.17-dev.1 → 0.0.17-dev.10

package/dist/IngredientsView-P0zlf89O.js

@@ -0,0 +1,1771 @@
+import { ref as P, defineComponent as le, computed as V, resolveComponent as I, openBlock as b, createBlock as T, withCtx as $, createVNode as y, createElementBlock as E, Fragment as J, createElementVNode as i, createCommentVNode as z, onMounted as lt, watch as He, unref as M, normalizeClass as Q, createTextVNode as Ye, toDisplayString as q, renderList as oe, isRef as De, renderSlot as ve, createSlots as nt, normalizeStyle as at, Teleport as Te, normalizeProps as st, guardReactiveProps as rt } from "vue";
+import { u as ne, c as We, S as it, g as ge, F as Z, d as Pe, a as Ge, C as Ve, b as Be, e as ut, _ as dt, f as ct } from "./app-CjkBFVBh.js";
+import { useDialog as qe, useSnackbar as he, useProxiedModel as Le, useDialogChild as mt, useBreakpoints as pt } from "@feedmepos/ui-library";
+import { i as ft, _ as vt } from "./is-linked-ingredient-error-C6AghEwR.js";
+import { F as Y, D as ze, R as ye } from "./row-action.enum-BwQbURNh.js";
+import { c as yt, _ as bt, F as Ne, u as gt } from "./layout-D2Kwl_3f.js";
+import { _ as ht } from "./SingleColumnLayout.vue_vue_type_script_setup_true_lang-Dov3Uq2z.js";
+import { R as be, U as _t, A as ke, M as xt, I as Vt } from "./rules-D0MrF_UU.js";
+import { g as kt, _ as Fe, S as Ce } from "./StockForecast.vue_vue_type_style_index_0_lang-B5EK101t.js";
+import { _ as Ft } from "./InventoryBindingForm.vue_vue_type_script_setup_true_lang-BfBvA1g5.js";
+import { _ as Se, t as Ke, d as Xe, s as Ct, r as St } from "./xlsx.util-BpHfmZp6.js";
+import { a as Je, t as Qe, f as wt } from "./date2-D-5KX0_X.js";
+import { useCoreStore as pe } from "@feedmepos/mf-common";
+import { _ as we } from "./PreviewBadge.vue_vue_type_script_setup_true_lang-BvadeWUz.js";
+function Mt() {
+  const s = qe(), r = he(), p = ne(), o = P(!1), l = P();
+  function n() {
+    const u = {
+      unit: {},
+      mode: Y.CREATE,
+      show: !0,
+      "onUpdate:show"(_) {
+        l.value.show = _;
+      }
+    };
+    l.value = u;
+  }
+  async function d(u) {
+    const _ = {
+      unit: We(u),
+      mode: Y.UPDATE,
+      show: !0,
+      "onUpdate:show"(c) {
+        l.value.show = c;
+      }
+    };
+    l.value = _;
+  }
+  async function v(u) {
+    o.value = !0;
+    try {
+      await p.deleteSku(u), r.open({
+        title: "Success",
+        message: `Deleted ${u.name}`,
+        type: "success"
+      });
+    } catch (_) {
+      _ instanceof it && ft(_) ? s.open({
+        title: "Cannot delete ingredient",
+        contentComponent: vt,
+        contentComponentProps: {
+          subject: (u == null ? void 0 : u.name) ?? "",
+          items: _.errorResponse.message
+        },
+        secondaryActions: {
+          text: "Close",
+          close: !0
+        }
+      }) : console.log("unable to delete ingredient", _), r.open({
+        title: `Cannot delete ${u.name}`,
+        message: "Please try again.",
+        type: "error"
+      }), console.error("failed to delete ingredient", _);
+    } finally {
+      o.value = !1;
+    }
+  }
+  function k(u) {
+    s.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(() => v(u));
+  }
+  return {
+    createIngredient: n,
+    updateIngredient: d,
+    deleteIngredient: k,
+    ingredientDialogProps: l,
+    ingredientViewLoading: o
+  };
+}
+function It({
+  updateIngredient: s,
+  deleteIngredient: r
+}) {
+  async function p(l, n) {
+    const d = We(n);
+    if (l === ye.Edit) {
+      await s(d);
+      return;
+    }
+    if (l === ye.Delete) {
+      await r(d);
+      return;
+    }
+  }
+  return { columnDefs: [
+    {
+      accessorKey: "code",
+      header: "Code",
+      enableSorting: !0,
+      size: 300
+    },
+    {
+      accessorKey: "name",
+      header: "Name",
+      enableSorting: !0,
+      size: 300
+    },
+    {
+      accessorFn: (l) => {
+        var n;
+        if (l.trackingMeasurement) {
+          const d = (n = l.unit.measurements) == null ? void 0 : n.find(
+            (v) => v.id === l.trackingMeasurement
+          );
+          if (d)
+            return `${d.name} (${d.abbrev})`;
+        }
+        return `${l.unit.name} (${l.unit.abbrev})`;
+      },
+      header: "Unit",
+      enableSorting: !1,
+      size: "auto"
+    },
+    {
+      id: "action",
+      header: "",
+      cell(l) {
+        return yt(
+          [ze[ye.Edit], ze[ye.Delete]],
+          (n) => {
+            p(n, l.row.original);
+          }
+        );
+      },
+      enableSorting: !1,
+      size: 40,
+      meta: {
+        cellClass: "",
+        headerClass: ""
+      }
+    }
+  ] };
+}
+const $t = /* @__PURE__ */ le({
+  __name: "ConvertForm",
+  props: {
+    modelValue: {},
+    rootValue: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue"],
+  setup(s, { emit: r }) {
+    const p = s, o = V(() => {
+      var c;
+      return (c = p.rootValue) == null ? void 0 : c.unit;
+    }), l = V(() => {
+      var c;
+      return (c = p.rootValue) == null ? void 0 : c._id;
+    }), n = r, d = V({
+      get() {
+        return !!p.modelValue;
+      },
+      set(c) {
+        c ? n("update:modelValue", {
+          measurement: null,
+          inventoryBindings: []
+        }) : n("update:modelValue", null);
+      }
+    }), v = V(() => kt(o.value));
+    function k(c) {
+      const f = p.modelValue ?? {};
+      f.measurement = c ? `${c}` : null, n("update:modelValue", f);
+    }
+    function u(c) {
+      const f = p.modelValue ?? {};
+      f.inventoryBindings = c, n("update:modelValue", f);
+    }
+    const _ = V(() => {
+      if (!p.modelValue) return null;
+      const c = p.modelValue;
+      return c.measurement ? v.value.find((f) => f.value === c.measurement) ?? null : v.value.find((f) => f.value === null) ?? null;
+    });
+    return (c, f) => {
+      const D = I("FmSwitch"), g = I("FmSelect"), w = I("FmCard");
+      return b(), T(w, {
+        variant: "outlined",
+        class: "p-16 flex flex-col gap-16"
+      }, {
+        default: $(() => {
+          var S, L;
+          return [
+            y(D, {
+              value: "",
+              "model-value": d.value,
+              "onUpdate:modelValue": f[0] || (f[0] = (F) => d.value = F),
+              label: "Convertible",
+              sublabel: "Convertible from other recipe or ingredients",
+              labelPlacement: "right"
+            }, null, 8, ["model-value"]),
+            d.value ? (b(), E(J, { key: 0 }, [
+              i("div", null, [
+                y(g, {
+                  label: "Recipes and ingredients convert to",
+                  modelValue: (S = _.value) == null ? void 0 : S.value,
+                  "onUpdate:modelValue": k,
+                  items: v.value
+                }, null, 8, ["modelValue", "items"])
+              ]),
+              y(Ft, {
+                id: l.value,
+                "model-value": ((L = c.modelValue) == null ? void 0 : L.inventoryBindings) ?? [],
+                "onUpdate:modelValue": u,
+                "exclude-binding-id": l.value
+              }, null, 8, ["id", "model-value", "exclude-binding-id"])
+            ], 64)) : z("", !0)
+          ];
+        }),
+        _: 1
+      });
+    };
+  }
+});
+function ce() {
+  return {
+    low: 6,
+    mid: 14
+  };
+}
+const Ut = { class: "flex flex-col gap-24" }, Rt = { class: "flex gap-24 w-full" }, Et = { class: "flex-1" }, At = { class: "flex-1" }, Dt = { class: "flex gap-24" }, Tt = { class: "flex-1" }, Pt = { class: "h-24" }, Bt = { class: "flex-1" }, Lt = { class: "text-fm-color-typo-secondary" }, zt = { class: "text-fm-color-typo-secondary whitespace-nowrap" }, Nt = { class: "border-1 border-fm-color-neutral-gray-200 fm-corner-radius-lg flex flex-col p-16 gap-16" }, Ot = { class: "w-full" }, jt = {
+  key: 0,
+  class: "flex flex-col gap-8"
+}, Ht = {
+  type: "button",
+  class: "inline-flex h-32 items-center"
+}, Yt = {
+  key: 0,
+  class: "border-1 border-fm-color-neutral-gray-200 fm-corner-radius-lg flex flex-col p-16 gap-16"
+}, Wt = { class: "flex flex-col gap-12" }, Gt = { class: "flex flex-col gap-4" }, qt = /* @__PURE__ */ i("div", { class: "fm-typo-en-title-sm-800" }, "Alert threshold", -1), Kt = /* @__PURE__ */ i("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), Xt = { class: "flex flex-col gap-4" }, Jt = { class: "flex fm-corner-radius-md border-1 border-fm-color-neutral-gray-200" }, Qt = { class: "flex-1 p-12 flex flex-col gap-8" }, Zt = { class: "mx-auto" }, eo = { class: "flex flex-col" }, to = /* @__PURE__ */ i("div", { class: "fm-typo-en-body-sm-600 translate-y-4" }, "When remaining", -1), oo = /* @__PURE__ */ i("div", {
+  class: "text-fm-color-typo-secondary",
+  style: { "padding-right": "32px" }
+}, "days", -1), lo = /* @__PURE__ */ i("div", {
+  class: "bg-fm-color-neutral-gray-200 relative",
+  style: { width: "1px" }
+}, [
+  /* @__PURE__ */ i("div", {
+    class: "absolute bg-white",
+    style: { transform: "translateX(-50%)", left: "50%", top: "12px" }
+  }, " < ")
+], -1), no = { class: "flex-1 p-12 flex flex-col gap-8" }, ao = { class: "mx-auto" }, so = { class: "flex flex-col" }, ro = /* @__PURE__ */ i("div", { class: "fm-typo-en-body-sm-600 translate-y-4" }, "When remaining", -1), io = /* @__PURE__ */ i("div", {
+  class: "text-fm-color-typo-secondary",
+  style: { "padding-right": "32px" }
+}, "days", -1), uo = /* @__PURE__ */ i("div", {
+  class: "bg-fm-color-neutral-gray-200 relative",
+  style: { width: "1px" }
+}, [
+  /* @__PURE__ */ i("div", {
+    class: "absolute bg-white",
+    style: { transform: "translateX(-50%)", left: "50%", top: "12px" }
+  }, " < ")
+], -1), co = { class: "flex-1 p-12 flex flex-col gap-8" }, mo = { class: "mx-auto" }, po = /* @__PURE__ */ i("div", { class: "flex flex-col" }, [
+  /* @__PURE__ */ i("div", { class: "fm-typo-en-body-sm-600 translate-y-4" }, "Stock is staple")
+], -1);
+var Me = /* @__PURE__ */ ((s) => (s.Daily = "Daily", s.Consumables = "Consumables", s.ShortTerm = "Short term", s.Kitchen = "Kitchen", s))(Me || {});
+const fo = /* @__PURE__ */ le({
+  __name: "IngredientForm",
+  props: {
+    mode: {},
+    modelValue: {},
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue", "click:submit"],
+  setup(s, { expose: r, emit: p }) {
+    var W;
+    const o = s, l = p, n = ne(), d = pe(), v = Ge();
+    function k(e) {
+      if (e.length === 0) return;
+      const t = e[0], m = o.modelValue ?? {
+        unit: n.units.find((h) => h)
+      };
+      m.unit || (m.unit = t, l("update:modelValue", m));
+    }
+    lt(() => {
+      k(n.units);
+    }), He([() => n.units], ([e]) => {
+      k(e);
+    });
+    function u() {
+      l("click:submit");
+    }
+    const _ = V({
+      get() {
+        var e;
+        return ((e = o.modelValue) == null ? void 0 : e.code) ?? "";
+      },
+      set(e) {
+        const t = o.modelValue ? {
+          ...o.modelValue
+        } : {};
+        t.code = e, l("update:modelValue", t);
+      }
+    }), c = V({
+      get() {
+        var e;
+        return ((e = o.modelValue) == null ? void 0 : e.name) ?? "";
+      },
+      set(e) {
+        const t = o.modelValue ? {
+          ...o.modelValue
+        } : {};
+        t.name = e, l("update:modelValue", t);
+      }
+    }), f = V({
+      get() {
+        var t, m;
+        const e = (m = (t = o.modelValue) == null ? void 0 : t.defaultCost) == null ? void 0 : m.costPerUnit;
+        return e ? +Je(e) : 0;
+      },
+      set(e) {
+        var m, h, R, U;
+        const t = o.modelValue ? {
+          ...o.modelValue
+        } : {};
+        t.defaultCost ?? (t.defaultCost = {
+          costPerUnit: {
+            amount: 0,
+            precision: 2,
+            currency: ((m = ge(d.currentCountry.value)) == null ? void 0 : m.currency) ?? "MYR"
+          },
+          measurement: (U = (R = (h = o.modelValue) == null ? void 0 : h.unit) == null ? void 0 : R.measurements) == null ? void 0 : U.find(
+            (j) => {
+              var H;
+              return j.id === ((H = o.modelValue) == null ? void 0 : H.trackingMeasurement);
+            }
+          )
+        }), t.defaultCost.costPerUnit = {
+          ...t.defaultCost.costPerUnit,
+          ...Qe(+e, 4)
+        }, l("update:modelValue", t);
+      }
+    }), D = V(() => {
+      var t, m, h;
+      const e = ((t = o.modelValue) == null ? void 0 : t.unit) ?? n.units.find((R) => R);
+      return e ? {
+        _id: e._id,
+        measurement: (m = o.modelValue) == null ? void 0 : m.trackingMeasurement,
+        name: ((h = e.measurements.find((R) => {
+          var U;
+          return R.id === ((U = o.modelValue) == null ? void 0 : U.trackingMeasurement);
+        })) == null ? void 0 : h.name) ?? e.name
+      } : null;
+    }), g = V({
+      get() {
+        var e;
+        return ((e = o.modelValue) == null ? void 0 : e.operationalGroup) ?? null;
+      },
+      set(e) {
+        const t = o.modelValue ? {
+          ...o.modelValue
+        } : {};
+        t.operationalGroup = e, l("update:modelValue", t);
+      }
+    }), w = V(
+      () => [
+        ...new Set(
+          n.skus.map((e) => e.operationalGroup ?? "").filter((e) => e && !Object.values(Me).includes(e))
+        )
+      ].sort()
+    ), S = V({
+      get() {
+        return g.value !== null;
+      },
+      set(e) {
+        e ? g.value = "" : g.value = null;
+      }
+    }), L = V(
+      () => n.units.flatMap(({ name: e, _id: t, abbrev: m, measurements: h }) => [
+        {
+          label: `${e}`,
+          value: null,
+          displayAsSection: !0
+        },
+        {
+          label: `${e} (${m})`,
+          value: { _id: t },
+          displayAsSection: !1
+        },
+        ...h.map(({ id: R, name: U, abbrev: j }) => ({
+          label: `${U} (${j})`,
+          value: { _id: t, measurement: R },
+          displayAsSection: !1
+        }))
+      ])
+    );
+    function F(e) {
+      var t, m, h, R, U;
+      return ((m = (t = o.modelValue) == null ? void 0 : t.unit) == null ? void 0 : m._id) === ((h = e.value) == null ? void 0 : h._id) && ((R = o.modelValue) == null ? void 0 : R.trackingMeasurement) === ((U = e.value) == null ? void 0 : U.measurement);
+    }
+    function me(e) {
+      var j, H;
+      if (!e) return;
+      const { _id: t, measurement: m } = e, h = m || void 0, R = n.units.find((X) => X._id === t);
+      if (!R)
+        return;
+      const U = o.modelValue ?? {};
+      U.unit = R, U.trackingMeasurement = h, U.convert && (U.convert.measurement = h || null), v.enableTotalCost && (U.defaultCost = {
+        measurement: R.measurements.find((X) => X.id === h),
+        costPerUnit: {
+          ...((j = U.defaultCost) == null ? void 0 : j.costPerUnit) ?? {
+            amount: 0,
+            precision: 2,
+            currency: ((H = ge(d.currentCountry.value)) == null ? void 0 : H.currency) ?? "MYR"
+          }
+        }
+      }), l("update:modelValue", U);
+    }
+    const G = V({
+      get() {
+        var e;
+        return ((e = o.modelValue) == null ? void 0 : e.convert) ?? null;
+      },
+      set(e) {
+        const t = o.modelValue ? {
+          ...o.modelValue
+        } : {};
+        e ? t.convert = e : t.convert = null, l("update:modelValue", t);
+      }
+    }), ae = V(() => Z.options.filter(
+      (e) => e === Z.enum.FIFO || e === Z.enum.WAVG
+    ).map((e) => {
+      function t(m) {
+        switch (m) {
+          case Z.enum.WAVG:
+            return "Weighted Average (WAVG)";
+          case Z.enum.FIFO:
+            return "First In First Out (FIFO)";
+          case Z.enum.LIFO:
+            return "Last In First Out (LIFO)";
+          case Z.enum.FEFO:
+            return "First Expired First Out (FEFO)";
+        }
+        return "";
+      }
+      return {
+        label: t(e),
+        value: e
+      };
+    })), se = V({
+      get() {
+        var e;
+        return ((e = o.modelValue) == null ? void 0 : e.valuation) ?? "WAVG";
+      },
+      set(e) {
+        const t = o.modelValue ? {
+          ...o.modelValue
+        } : {};
+        t.valuation = e, l("update:modelValue", t);
+      }
+    }), K = P();
+    r({
+      validateInputs: () => {
+        var e, t;
+        (t = (e = K.value) == null ? void 0 : e.validateInputs) == null || t.call(e);
+      },
+      resetInputsValidation: () => {
+        var e, t;
+        (t = (e = K.value) == null ? void 0 : e.resetInputsValidation) == null || t.call(e);
+      },
+      resetInputs: () => {
+        var e, t;
+        (t = (e = K.value) == null ? void 0 : e.resetInputs) == null || t.call(e);
+      }
+    });
+    const a = P(!1), N = V(
+      () => {
+        var e, t, m;
+        return (e = o.modelValue) != null && e._id ? ((m = n.menu.bindedBySkuId[(t = o.modelValue) == null ? void 0 : t._id]) == null ? void 0 : m.filter(
+          (h) => h.from === "INGREDIENT"
+        )) ?? [] : [];
+      }
+    ), O = V(
+      () => {
+        var e, t, m;
+        return (e = o.modelValue) != null && e._id ? ((m = n.menu.bindedBySkuId[(t = o.modelValue) == null ? void 0 : t._id]) == null ? void 0 : m.filter(
+          (h) => h.from === "RECIPE"
+        )) ?? [] : [];
+      }
+    ), re = V(
+      () => {
+        var e, t, m;
+        return (e = o.modelValue) != null && e._id ? ((m = n.menu.bindedBySkuId[(t = o.modelValue) == null ? void 0 : t._id]) == null ? void 0 : m.filter((h) => h.from === "MENU")) ?? [] : [];
+      }
+    ), ie = V(
+      () => n.skus.map((e) => ({ label: e.name, value: e.code }))
+    ), A = P((W = o.modelValue) == null ? void 0 : W.code);
+    function C(e) {
+      var m;
+      const t = e.el;
+      t && ((m = t.querySelector("[x-should-scroll-into=true]")) == null || m.scrollIntoView());
+    }
+    function fe(e) {
+      switch (e) {
+        case Ve.MY:
+          return "MYR";
+        case Ve.SG:
+          return "SGD";
+        case Ve.ID:
+          return "IDR";
+        default:
+          return "MYR";
+      }
+    }
+    V(
+      () => {
+        var e, t, m, h, R, U;
+        return ((h = (m = (t = (e = o.modelValue) == null ? void 0 : e.unit) == null ? void 0 : t.measurements) == null ? void 0 : m.find(
+          (j) => {
+            var H;
+            return j.id === ((H = o.modelValue) == null ? void 0 : H.trackingMeasurement);
+          }
+        )) == null ? void 0 : h.abbrev) ?? ((U = (R = o.modelValue) == null ? void 0 : R.unit) == null ? void 0 : U.abbrev);
+      }
+    );
+    const ue = V({
+      get() {
+        var e, t;
+        return ((t = (e = o.modelValue) == null ? void 0 : e.thresholds) == null ? void 0 : t.low) ?? ce().low;
+      },
+      set(e) {
+        var h;
+        const t = ((h = o.modelValue) == null ? void 0 : h.thresholds) ?? ce();
+        t.low = e;
+        const m = o.modelValue ? {
+          ...o.modelValue
+        } : {};
+        m.thresholds = t, l("update:modelValue", m);
+      }
+    }), ee = V({
+      get() {
+        var e, t;
+        return ((t = (e = o.modelValue) == null ? void 0 : e.thresholds) == null ? void 0 : t.mid) ?? ce().mid;
+      },
+      set(e) {
+        var h;
+        const t = ((h = o.modelValue) == null ? void 0 : h.thresholds) ?? ce();
+        t.mid = e;
+        const m = o.modelValue ? {
+          ...o.modelValue
+        } : {};
+        m.thresholds = t, l("update:modelValue", m);
+      }
+    });
+    function _e() {
+      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 m = I("FmTextField"), h = I("FmLabel"), R = I("FmSelect"), U = I("FmField"), j = I("FmMenuHeader"), H = I("FmMenuDivider"), X = I("FmMenuItem"), te = I("FmMenu"), de = I("FmFormGroup"), Ie = I("FmSwitch"), et = I("FmIcon"), $e = I("FmStepperField"), tt = I("FmForm");
+      return b(), T(tt, {
+        disabled: e.disabled,
+        ref_key: "formRef",
+        ref: K,
+        class: "flex flex-col gap-32",
+        onValidationSuccess: u
+      }, {
+        default: $(() => [
+          i("div", Ut, [
+            i("div", Rt, [
+              i("div", Et, [
+                y(m, {
+                  label: "Code",
+                  "model-value": _.value,
+                  "onUpdate:modelValue": t[0] || (t[0] = (x) => _.value = x),
+                  rules: [M(be)(), M(_t)(ie.value, A.value)],
+                  "label-mark": "required"
+                }, null, 8, ["model-value", "rules"])
+              ]),
+              i("div", At, [
+                y(m, {
+                  label: "Name",
+                  "model-value": c.value,
+                  "onUpdate:modelValue": t[1] || (t[1] = (x) => c.value = x),
+                  rules: [M(be)()],
+                  "label-mark": "required"
+                }, null, 8, ["model-value", "rules"])
+              ])
+            ]),
+            M(v).enableTotalCost ? (b(), T(R, {
+              key: 0,
+              class: "w-full",
+              "model-value": se.value,
+              "onUpdate:modelValue": t[2] || (t[2] = (x) => se.value = x),
+              items: ae.value
+            }, {
+              label: $(() => [
+                y(we, { "z-index": 50 }, {
+                  default: $(() => [
+                    y(h, { label: "Valuation Method" })
+                  ]),
+                  _: 1
+                })
+              ]),
+              _: 1
+            }, 8, ["model-value", "items"])) : z("", !0),
+            i("div", Dt, [
+              i("div", Tt, [
+                y(de, {
+                  "model-value": D.value,
+                  rules: [M(be)()],
+                  "label-mark": "required"
+                }, {
+                  label: $(() => [
+                    i("div", Pt, [
+                      y(h, { label: "Unit" })
+                    ])
+                  ]),
+                  default: $(({ invalid: x }) => [
+                    y(te, null, {
+                      "menu-button": $(() => [
+                        y(U, {
+                          class: Q([
+                            "fm-typo-en-body-lg-400",
+                            {
+                              "text-fm-color-typo-primary": !e.disabled,
+                              "text-fm-color-typo-disabled": e.disabled
+                            }
+                          ]),
+                          invalid: x,
+                          "append-icon": "expand_more"
+                        }, {
+                          default: $(() => {
+                            var B;
+                            return [
+                              Ye(q((B = D.value) == null ? void 0 : B.name), 1)
+                            ];
+                          }),
+                          _: 2
+                        }, 1032, ["class", "invalid"])
+                      ]),
+                      default: $(() => [
+                        i("div", {
+                          class: "overflow-x-hidden overflow-y-auto max-h-[300px]",
+                          onVnodeMounted: C
+                        }, [
+                          (b(!0), E(J, null, oe(L.value, (B) => (b(), E(J, {
+                            key: B.label
+                          }, [
+                            B.displayAsSection ? (b(), E(J, { key: 0 }, [
+                              y(j, {
+                                label: B.label
+                              }, null, 8, ["label"]),
+                              y(H)
+                            ], 64)) : (b(), T(X, {
+                              key: 1,
+                              label: B.label,
+                              "model-value": F(B),
+                              onClick: (xe) => me(B.value),
+                              "x-should-scroll-into": `${F(B)}`
+                            }, null, 8, ["label", "model-value", "onClick", "x-should-scroll-into"]))
+                          ], 64))), 128))
+                        ], 512)
+                      ]),
+                      _: 2
+                    }, 1024)
+                  ]),
+                  _: 1
+                }, 8, ["model-value", "rules"])
+              ]),
+              i("div", Bt, [
+                M(v).enableTotalCost ? (b(), T(m, {
+                  key: 0,
+                  "model-value": f.value,
+                  "onUpdate:modelValue": t[3] || (t[3] = (x) => f.value = x),
+                  rules: [M(ke)(0), M(xt)(2)]
+                }, {
+                  label: $(() => [
+                    y(we, { "z-index": 50 }, {
+                      default: $(() => [
+                        y(h, { label: "Price per unit" })
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  prepend: $(() => {
+                    var x, B;
+                    return [
+                      i("div", Lt, q(fe(((x = M(d).currentCountry) == null ? void 0 : x.value) ?? M(Pe)) === "MYR" ? "RM" : fe(((B = M(d).currentCountry) == null ? void 0 : B.value) ?? M(Pe))), 1)
+                    ];
+                  }),
+                  append: $(() => {
+                    var x, B, xe, Ue, Re, Ee;
+                    return [
+                      i("div", zt, " / " + q(((Ue = (xe = (B = (x = e.modelValue) == null ? void 0 : x.unit) == null ? void 0 : B.measurements) == null ? void 0 : xe.find(
+                        (ot) => {
+                          var Ae;
+                          return ot.id === ((Ae = e.modelValue) == null ? void 0 : Ae.trackingMeasurement);
+                        }
+                      )) == null ? void 0 : Ue.abbrev) ?? ((Ee = (Re = e.modelValue) == null ? void 0 : Re.unit) == null ? void 0 : Ee.abbrev)), 1)
+                    ];
+                  }),
+                  _: 1
+                }, 8, ["model-value", "rules"])) : z("", !0)
+              ])
+            ])
+          ]),
+          y($t, {
+            "model-value": G.value,
+            "onUpdate:modelValue": t[4] || (t[4] = (x) => G.value = x),
+            "root-value": e.modelValue
+          }, null, 8, ["model-value", "root-value"]),
+          i("div", Nt, [
+            i("div", Ot, [
+              y(Ie, {
+                label: "Assign operational group",
+                sublabel: "Assign label for routine disposal",
+                modelValue: S.value,
+                "onUpdate:modelValue": t[5] || (t[5] = (x) => S.value = x),
+                "label-placement": "right"
+              }, null, 8, ["modelValue"])
+            ]),
+            S.value ? (b(), E("div", jt, [
+              y(te, null, {
+                "menu-button": $(() => [
+                  y(m, {
+                    label: "Operational label",
+                    modelValue: g.value,
+                    "onUpdate:modelValue": t[6] || (t[6] = (x) => g.value = x),
+                    placeholder: "Input text or select preset"
+                  }, {
+                    append: $(() => [
+                      i("button", Ht, [
+                        y(et, { name: "expand_more" })
+                      ])
+                    ]),
+                    _: 1
+                  }, 8, ["modelValue"])
+                ]),
+                default: $(() => [
+                  y(j, { label: "Preset" }),
+                  (b(!0), E(J, null, oe(Object.values(Me), (x) => (b(), T(X, {
+                    key: x,
+                    label: x,
+                    "model-value": g.value === x,
+                    onClick: (B) => g.value = x
+                  }, null, 8, ["label", "model-value", "onClick"]))), 128)),
+                  w.value.length ? (b(), T(j, {
+                    key: 0,
+                    label: "Custom"
+                  })) : z("", !0),
+                  (b(!0), E(J, null, oe(w.value, (x) => (b(), T(X, {
+                    key: x,
+                    label: x,
+                    "model-value": g.value === x,
+                    onClick: (B) => g.value = x
+                  }, null, 8, ["label", "model-value", "onClick"]))), 128))
+                ]),
+                _: 1
+              }),
+              y(de, {
+                "model-value": g.value,
+                rules: [M(be)()]
+              }, null, 8, ["model-value", "rules"])
+            ])) : z("", !0)
+          ]),
+          e.mode !== M(Y).CREATE ? (b(), E("div", Yt, [
+            i("div", null, [
+              y(Ie, {
+                label: "Show binded items",
+                modelValue: a.value,
+                "onUpdate:modelValue": t[7] || (t[7] = (x) => a.value = x),
+                "label-placement": "right"
+              }, null, 8, ["modelValue"])
+            ]),
+            a.value && N.value.length ? (b(), T(Se, {
+              key: 0,
+              name: "Ingredient",
+              bindings: N.value
+            }, null, 8, ["bindings"])) : z("", !0),
+            a.value && O.value.length ? (b(), T(Se, {
+              key: 1,
+              name: "Recipe",
+              bindings: O.value
+            }, null, 8, ["bindings"])) : z("", !0),
+            a.value && re.value.length ? (b(), T(Se, {
+              key: 2,
+              name: "Menu",
+              bindings: re.value
+            }, null, 8, ["bindings"])) : z("", !0)
+          ])) : z("", !0),
+          i("div", Wt, [
+            i("div", Gt, [
+              y(we, null, {
+                default: $(() => [
+                  qt
+                ]),
+                _: 1
+              }),
+              Kt
+            ]),
+            i("div", Xt, [
+              y(de, {
+                "model-value": { low: ue.value, mid: ee.value },
+                rules: [_e()]
+              }, null, 8, ["model-value", "rules"]),
+              i("div", Jt, [
+                i("div", Qt, [
+                  i("div", Zt, [
+                    y(Fe, {
+                      days: ue.value,
+                      level: M(Ce).low
+                    }, null, 8, ["days", "level"])
+                  ]),
+                  i("div", eo, [
+                    to,
+                    y($e, {
+                      modelValue: ue.value,
+                      "onUpdate:modelValue": t[8] || (t[8] = (x) => ue.value = x),
+                      rules: [M(ke)(0)]
+                    }, {
+                      append: $(() => [
+                        oo
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue", "rules"])
+                  ])
+                ]),
+                lo,
+                i("div", no, [
+                  i("div", ao, [
+                    y(Fe, {
+                      days: ee.value,
+                      level: M(Ce).mid
+                    }, null, 8, ["days", "level"])
+                  ]),
+                  i("div", so, [
+                    ro,
+                    y($e, {
+                      modelValue: ee.value,
+                      "onUpdate:modelValue": t[9] || (t[9] = (x) => ee.value = x),
+                      rules: [M(ke)(0)]
+                    }, {
+                      append: $(() => [
+                        io
+                      ]),
+                      _: 1
+                    }, 8, ["modelValue", "rules"])
+                  ])
+                ]),
+                uo,
+                i("div", co, [
+                  i("div", mo, [
+                    y(Fe, {
+                      days: ee.value + 1,
+                      level: M(Ce).high
+                    }, null, 8, ["days", "level"])
+                  ]),
+                  po
+                ])
+              ])
+            ])
+          ])
+        ]),
+        _: 1
+      }, 8, ["disabled"]);
+    };
+  }
+}), vo = { class: "flex gap-4" }, yo = /* @__PURE__ */ le({
+  __name: "IngredientDialog",
+  props: {
+    show: { type: Boolean },
+    unit: {},
+    mode: { default: Y.READ }
+  },
+  emits: ["update:show"],
+  setup(s) {
+    const r = s, p = ne(), o = he(), l = Le(r, "show"), n = Le(r, "unit"), d = V(() => {
+      switch (r.mode) {
+        case Y.READ:
+          return "View ingredient";
+        case Y.UPDATE:
+          return "Edit ingredient";
+        case Y.CREATE:
+          return "Add ingredient";
+      }
+      return "";
+    }), v = V(() => {
+      switch (r.mode) {
+        case Y.READ:
+          return "";
+        case Y.UPDATE:
+          return "Save";
+        case Y.CREATE:
+          return "Add";
+      }
+      return "";
+    }), k = P(), u = P(!1);
+    async function _() {
+      u.value = !0;
+      try {
+        await p.createSku(n.value), l.value = !1, o.open({
+          title: "Success",
+          message: "Created " + n.value.name,
+          type: "success"
+        });
+      } catch (g) {
+        g instanceof Be || o.open({
+          title: "Failed to create ingredient",
+          message: "Please try again",
+          type: "error"
+        });
+      } finally {
+        u.value = !1;
+      }
+    }
+    async function c() {
+      u.value = !0;
+      try {
+        await p.updateSku(n.value), u.value = !1, l.value = !1, o.open({
+          title: "Success",
+          message: "Updated " + n.value.name,
+          type: "success"
+        });
+      } catch (g) {
+        g instanceof Be || o.open({
+          title: "Failed to update ingredient",
+          message: "Please try again",
+          type: "error"
+        });
+      } finally {
+        u.value = !1;
+      }
+    }
+    function f() {
+      var g, w;
+      (w = (g = k.value) == null ? void 0 : g.validateInputs) == null || w.call(g);
+    }
+    function D() {
+      switch (r.mode) {
+        case Y.READ:
+          return;
+        case Y.UPDATE:
+          return c();
+        case Y.CREATE:
+          return _();
+      }
+    }
+    return (g, w) => {
+      const S = I("FmButton"), L = I("FmSideSheet");
+      return b(), T(L, {
+        "model-value": M(l),
+        "onUpdate:modelValue": w[3] || (w[3] = (F) => De(l) ? l.value = F : null),
+        header: d.value,
+        "close-button": "",
+        "dismiss-away": "",
+        "max-width": 500
+      }, {
+        "side-sheet-footer": $(() => [
+          i("div", vo, [
+            y(S, {
+              loading: u.value,
+              label: v.value,
+              onClick: f
+            }, null, 8, ["loading", "label"]),
+            y(S, {
+              disabled: u.value,
+              label: "Close",
+              variant: "tertiary",
+              onClick: w[2] || (w[2] = (F) => l.value = !1)
+            }, null, 8, ["disabled"])
+          ])
+        ]),
+        default: $(() => [
+          y(fo, {
+            class: "w-full",
+            ref_key: "hasValidationExpose",
+            ref: k,
+            modelValue: M(n),
+            "onUpdate:modelValue": w[0] || (w[0] = (F) => De(n) ? n.value = F : null),
+            mode: g.mode,
+            disabled: u.value,
+            "onClick:submit": w[1] || (w[1] = (F) => D())
+          }, null, 8, ["modelValue", "mode", "disabled"])
+        ]),
+        _: 1
+      }, 8, ["model-value", "header"]);
+    };
+  }
+});
+function* bo(s) {
+  for (; ; )
+    yield s[Math.floor(Math.random() * s.length)];
+}
+function go(s = 4, r = bo("qwertyuiopasdfghjklzxcvbnm".split(""))) {
+  return Array.from({ length: s }).map(() => r.next().value).join("");
+}
+function ho() {
+  return `sku_${(/* @__PURE__ */ new Date()).toISOString()}_${go()}`;
+}
+const _o = {
+  _id: "",
+  name: "",
+  abbrev: "",
+  precision: 0,
+  measurements: []
+};
+function xo(s) {
+  var p, o, l, n, d;
+  return {
+    code: s.code,
+    name: s.name,
+    unit: ((p = s.unit.measurements.find((v) => v.id === s.trackingMeasurement)) == null ? void 0 : p.abbrev) ?? s.unit.abbrev,
+    baseUnit: s.unit.abbrev,
+    valuationMethod: s.valuation ?? "WAVG",
+    pricePerUnit: (o = s.defaultCost) != null && o.costPerUnit ? +Je((l = s.defaultCost) == null ? void 0 : l.costPerUnit) : 0,
+    thresholdLow: ((n = s.thresholds) == null ? void 0 : n.low) ?? ce().low,
+    thresholdMid: ((d = s.thresholds) == null ? void 0 : d.mid) ?? ce().mid
+  };
+}
+function Ze() {
+  var l;
+  const s = [
+    {
+      id: "code",
+      name: "Code"
+    },
+    {
+      id: "name",
+      name: "Name"
+    },
+    {
+      id: "unit",
+      name: "Unit"
+    },
+    {
+      id: "baseUnit",
+      name: "Base unit"
+    }
+  ], r = Ge(), p = pe(), o = ge(p.currentCountry.value);
+  return r.enableTotalCost && s.push(
+    {
+      id: "valuationMethod",
+      name: "Valuation method"
+    },
+    {
+      id: "pricePerUnit",
+      name: `Price per unit (${o == null ? void 0 : o.currency})`
+    }
+  ), ((l = p.currentBusiness.value) == null ? void 0 : l.menuVersion) === "v4" && s.push(
+    {
+      id: "thresholdLow",
+      name: "Show RED when remaining"
+    },
+    {
+      id: "thresholdMid",
+      name: "Show YELLOW when remaining"
+    }
+  ), s;
+}
+function Vo() {
+  const r = ne().skus.map(xo), o = pe().currentBusiness.value, l = Ze(), n = [
+    ["Business name:", o == null ? void 0 : o.name],
+    ["Business ID:", o == null ? void 0 : o._id],
+    ["Menu version", o == null ? void 0 : o.menuVersion],
+    [],
+    l.map((u) => u.name),
+    ...r.map((u) => l.map((_) => u[_.id]))
+  ], d = l.map((u) => `system:${u.id}`), v = Ke(n, d), k = `${o == null ? void 0 : o.name} ingredients (${wt(/* @__PURE__ */ new Date())}).xlsx`;
+  return Xe(v, k), k;
+}
+function ko() {
+  const r = pe().currentBusiness.value, p = Ze(), o = [
+    ["Business name:", r == null ? void 0 : r.name],
+    ["Business ID:", r == null ? void 0 : r._id],
+    ["Menu version", r == null ? void 0 : r.menuVersion],
+    [],
+    p.map((v) => v.name)
+  ], l = p.map((v) => `system:${v.id}`), n = Ke(o, l), d = "FeedMe ingredients template.xlsx";
+  return Xe(n, d), d;
+}
+function Fo(s) {
+  const [
+    r,
+    p,
+    o,
+    l,
+    n,
+    d,
+    ...v
+  ] = Ct(s);
+  if (!r || !r.length || r.some((f) => f.length && !f.startsWith("system:")))
+    throw new Error("Missing meta header. Excel file does not come from the template.");
+  const k = r.map((f) => f.split(":")[1]), _ = ["code", "name", "unit", "baseUnit"].filter((f) => !k.includes(f));
+  if (_.length)
+    throw new Error(
+      `Missing meta headers (${_.join()}). Excel file does not come from the template.`
+    );
+  return v.map((f, D) => {
+    const g = {};
+    for (const w in k) {
+      const S = k[w];
+      Object.assign(g, { [S]: f[w] });
+    }
+    return {
+      index: D,
+      data: g
+    };
+  });
+}
+function Oe(s, r, p) {
+  var L;
+  const l = ne().units, n = new Array(), d = p.filter((F) => F.data.code === s.code);
+  d.length > 1 && n.push(
+    `Code ${s.code} is already used in row ${d.map((F) => F.index + 6).join()}.`
+  );
+  const v = l.find((F) => F.abbrev === s.baseUnit), k = v == null ? void 0 : v.measurements.find((F) => F.abbrev === s.unit);
+  if (!v)
+    n.push(`Cannot find base unit of symbol ${s.baseUnit}.`);
+  else if (s.baseUnit !== s.unit && !k) {
+    const F = `Cannot find unit conversion for ${s.baseUnit} with symbol ${s.unit || "[empty]"}.`;
+    n.push(F);
+  }
+  const u = Z.options.find(
+    (F) => F === s.valuationMethod
+  );
+  s.valuationMethod && !u && n.push(
+    `Expected valuation method to be one of ${Z.options.join()} but got ${s.valuationMethod} instead.`
+  );
+  const c = pe().currentCountry.value, f = (F) => `${F}`.length && Vt()(F) === !0, D = f(`${s.pricePerUnit}`) === !0 ? {
+    costPerUnit: {
+      ...Qe(Number(s.pricePerUnit) || 0),
+      currency: ((L = ge(c)) == null ? void 0 : L.currency) ?? "MYR"
+    },
+    measurement: k
+  } : void 0, g = f(`${s.thresholdLow}`) && f(`${s.thresholdMid}`) ? {
+    low: Number(s.thresholdLow) || 0,
+    mid: Number(s.thresholdMid) || 0
+  } : void 0;
+  return {
+    type: "create",
+    sku: {
+      _id: ho(),
+      code: s.code,
+      name: s.name,
+      unit: v ?? l.find((F) => F) ?? _o,
+      trackingMeasurement: k == null ? void 0 : k.id,
+      valuation: u,
+      defaultCost: D,
+      thresholds: g
+    },
+    errors: n,
+    excelRowNumber: r + 6
+  };
+}
+function Co(s) {
+  try {
+    const r = Fo(s).filter((u) => u.data.code), o = ne().skus, l = ut(o, "code"), n = r.filter((u) => !l[u.data.code]), d = r.filter((u) => l[u.data.code]), v = n.map(
+      (u) => Oe(u.data, u.index, r)
+    ), k = d.map((u) => {
+      const _ = Oe(u.data, u.index, r), c = l[u.data.code];
+      return {
+        ..._,
+        type: "update",
+        original: c,
+        sku: {
+          // to maintain original props not in the import excel, e.g. inventory binding, etc...
+          ...c,
+          code: _.sku.code || c.code,
+          name: _.sku.name || c.name,
+          unit: _.sku.unit || c.unit,
+          trackingMeasurement: _.sku.trackingMeasurement || c.trackingMeasurement,
+          valuation: _.sku.valuation || c.valuation,
+          defaultCost: _.sku.defaultCost || c.defaultCost,
+          thresholds: _.sku.thresholds || c.thresholds
+        }
+      };
+    });
+    return {
+      invalidExcel: !1,
+      importCreateResult: v,
+      importUpdateResult: k
+    };
+  } catch (r) {
+    return {
+      invalidExcel: !0,
+      invalidExcelMessage: (r == null ? void 0 : r.message) ?? "Invalid excel",
+      importCreateResult: [],
+      importUpdateResult: []
+    };
+  }
+}
+const So = {
+  key: 0,
+  class: "relative"
+}, wo = ["accept", "disabled"], Mo = { class: "flex flex-col gap-8" }, Io = ["accept", "disabled"], $o = /* @__PURE__ */ le({
+  __name: "FmDroppableField",
+  props: {
+    buttonLabel: {},
+    label: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    accept: { default: "" },
+    maxFileSize: { default: 8e6 },
+    contentClass: {}
+  },
+  emits: ["file-upload", "file-rejected"],
+  setup(s, { emit: r }) {
+    const p = s, o = r, l = P(!1), n = P(null), d = P(null), v = P(), k = (a) => {
+      p.disabled || (a.stopPropagation(), a.preventDefault());
+    }, u = (a) => {
+      p.disabled || (a.stopPropagation(), a.preventDefault(), l.value = !0);
+    }, _ = (a) => {
+      p.disabled || (a.stopPropagation(), a.preventDefault(), l.value = !1);
+    }, c = (a) => {
+      var N;
+      p.disabled || (a.stopPropagation(), a.preventDefault(), l.value = !1, f((N = a.dataTransfer) == null ? void 0 : N.files));
+    };
+    function f(a) {
+      if (a)
+        if (v.value = a, n.value = g(a[0]), d.value = w(a[0]), n.value && d.value)
+          o("file-upload", a[0]);
+        else {
+          const N = D();
+          o("file-rejected", [
+            {
+              file: a[0],
+              reason: N
+            }
+          ]);
+        }
+    }
+    const D = () => {
+      const a = new Array();
+      return n.value || a.push("invalid-type"), d.value || a.push("invalid-size"), a;
+    }, g = (a) => {
+      if (!p.accept) return !0;
+      const N = p.accept.split(",").map((O) => O.trim());
+      for (const O of N)
+        if (S(O)) {
+          if (F(O) === F(a.type)) return !0;
+        } else if (L(a) === O || a.type === O) return !0;
+      return !1;
+    }, w = (a) => a.size <= p.maxFileSize, S = (a) => a.indexOf("*") !== -1, L = (a) => "." + a.name.split(".").pop(), F = (a) => a.substring(0, a.indexOf("/")), me = V(() => {
+      if (l.value) return "Drop file to upload";
+      if (n.value) {
+        if (!d.value) return `File size exceeds ${p.maxFileSize * 1e-6}mb`;
+      } else return "File type is not valid";
+      return "";
+    }), G = V(() => v.value ? !n.value || !d.value : !1), ae = (a) => {
+      const N = a.target;
+      f(N.files);
+    }, se = V(() => {
+      var a;
+      return (a = v.value) == null ? void 0 : a.item(0);
+    }), K = P();
+    return (a, N) => {
+      const O = I("FmLabel"), re = I("FmButton");
+      return b(), E("label", {
+        class: "fm-droppable-field",
+        ref_key: "fmButtonRef",
+        ref: K
+      }, [
+        a.$slots.default ? (b(), E("div", So, [
+          i("input", {
+            accept: a.accept,
+            disabled: a.disabled,
+            class: "fm-droppable-field__input",
+            type: "file",
+            onChange: ae
+          }, null, 40, wo)
+        ])) : z("", !0),
+        ve(a.$slots, "default", {
+          isDragging: l.value,
+          isValidFileType: n.value,
+          isValidFileSize: d.value,
+          singleValidFile: se.value,
+          openFileDialog: () => {
+            var ie;
+            return console.log("click", K.value), (ie = K.value) == null ? void 0 : ie.click();
+          }
+        }, () => [
+          i("div", Mo, [
+            a.$slots.label ? ve(a.$slots, "label", { key: 0 }, void 0, !0) : (b(), T(O, {
+              key: 1,
+              label: a.label
+            }, null, 8, ["label"]))
+          ]),
+          i("div", {
+            class: Q([[
+              a.contentClass ? a.contentClass : "w-full h-full",
+              {
+                "fm-droppable-field__container--dragging": l.value,
+                "fm-droppable-field__container--invalid": G.value && !a.disabled,
+                "fm-droppable-field__container--disabled": a.disabled
+              }
+            ], "fm-droppable-field__container"]),
+            onDragenter: k,
+            onDragleave: _,
+            onDragover: u,
+            onDrop: c
+          }, [
+            (l.value || G.value) && !a.disabled ? (b(), E("div", {
+              key: 0,
+              class: Q({
+                "fm-typo-en-body-lg-600": !0,
+                "text-fm-color-primary": l.value,
+                "text-fm-color-typo-error": G.value
+              })
+            }, q(me.value), 3)) : (b(), T(re, {
+              key: 1,
+              disabled: a.disabled,
+              label: a.buttonLabel ?? "Add files",
+              size: "md",
+              variant: "secondary"
+            }, null, 8, ["disabled", "label"])),
+            ve(a.$slots, "accept-text", {}, () => [
+              p.accept ? (b(), E("div", {
+                key: 0,
+                class: Q([[a.disabled ? "text-fm-color-typo-disabled" : "text-fm-color-typo-secondary"], "fm-typo-en-body-md-400"])
+              }, q(`Accepts ${p.accept}`), 3)) : z("", !0)
+            ], !0),
+            i("input", {
+              accept: a.accept,
+              disabled: a.disabled,
+              class: "fm-droppable-field__input",
+              type: "file",
+              onChange: ae
+            }, null, 40, Io)
+          ], 34),
+          ve(a.$slots, "helper-text", {}, () => [
+            i("div", {
+              class: Q([[a.disabled ? "text-fm-color-typo-disabled" : "text-fm-color-typo-secondary"], "fm-typo-en-body-sm-400"])
+            }, q(`Max size ${p.maxFileSize * 1e-6}mb`), 3)
+          ], !0)
+        ], !0)
+      ], 512);
+    };
+  }
+}), Uo = /* @__PURE__ */ dt($o, [["__scopeId", "data-v-311b22a0"]]), Ro = { class: "flex items-center gap-12 pl-8" }, Eo = /* @__PURE__ */ i("div", null, "•", -1), Ao = { class: "flex flex-col" }, Do = { class: "fm-typo-en-body-md-400 text-fm-color-typo-primary flex items-center gap-4" }, To = {
+  key: 0,
+  class: "text-fm-color-typo-secondary fm-typo-en-body-sm-400"
+}, Po = { key: 0 }, je = /* @__PURE__ */ le({
+  __name: "ImportIngredientItem",
+  props: {
+    type: {},
+    code: {},
+    name: {},
+    errors: {}
+  },
+  setup(s) {
+    return (r, p) => {
+      const o = I("FmIcon"), l = I("FmTooltip");
+      return b(), E("div", Ro, [
+        Eo,
+        i("div", Ao, [
+          i("div", Do, [
+            i("div", {
+              class: Q({
+                "text-fm-color-system-error-300": r.errors.length
+              })
+            }, [
+              Ye(q(r.name) + " ", 1),
+              r.type === "create" ? (b(), E("span", To, "(new)")) : z("", !0)
+            ], 2),
+            r.errors.length ? (b(), E("div", Po, [
+              y(l, { "z-index": 50 }, {
+                content: $(() => [
+                  i("ol", null, [
+                    (b(!0), E(J, null, oe(r.errors, (n, d) => (b(), E("li", { key: d }, q(n), 1))), 128))
+                  ])
+                ]),
+                default: $(() => [
+                  y(o, {
+                    name: "error",
+                    size: "sm",
+                    color: "system-error-300"
+                  })
+                ]),
+                _: 1
+              })
+            ])) : z("", !0)
+          ]),
+          i("div", {
+            class: Q([
+              "fm-typo-en-body-sm-400",
+              {
+                "text-fm-color-system-error-200": r.errors.length,
+                "text-fm-color-typo-secondary": !r.errors.length
+              }
+            ])
+          }, q(r.code), 3)
+        ])
+      ]);
+    };
+  }
+}), Bo = { class: "flex flex-col gap-24" }, Lo = /* @__PURE__ */ i("div", { class: "fm-typo-en-body-md-400" }, " Import ingredients from your Excel file and apply changes to your business. ", -1), zo = { class: "flex flex-col gap-8" }, No = { class: "line-clamp-2 text-ellipsis break-all" }, Oo = {
+  key: 2,
+  class: "shrink-0"
+}, jo = {
+  key: 0,
+  class: "flex flex-col"
+}, Ho = { class: "text-fm-color-system-error-300 fm-typo-en-body-sm-400" }, Yo = {
+  key: 0,
+  class: "max-h-[200px] overflow-y-auto flex flex-col gap-8"
+}, Wo = /* @__PURE__ */ i("div", { class: "fm-typo-en-body-lg-600" }, "Summary", -1), Go = /* @__PURE__ */ le({
+  __name: "ImportIngredients",
+  setup(s) {
+    const r = P(null), p = mt(), o = he(), l = P(!1), n = P(new Array()), d = P([]), v = P([]), k = V(
+      () => !!n.value.length || d.value.some((c) => c.errors.length) || v.value.some((c) => c.errors.length)
+    ), u = V(
+      () => !!d.value.length || !!v.value.length
+    );
+    async function _(c) {
+      n.value = [], d.value = [], v.value = [];
+      try {
+        l.value = !0;
+        const [f] = await Promise.all([
+          St(c),
+          // fake buffer
+          new Promise((w) => setTimeout(w, 1e3))
+        ]), D = f.SheetNames.find((w) => w);
+        if (!D) {
+          n.value.push("No sheet is found in the excel file.");
+          return;
+        }
+        const g = Co(f.Sheets[D]);
+        if (g.invalidExcel) {
+          n.value.push(g.invalidExcelMessage ?? "Invalid excel");
+          return;
+        }
+        if (d.value = g.importCreateResult, v.value = g.importUpdateResult, !d.value.length && !v.value.length) {
+          n.value.push("No import data is available in the excel file.");
+          return;
+        }
+        p.emitData(g);
+      } catch (f) {
+        o.open({
+          title: "Unable to read file",
+          message: f == null ? void 0 : f.message,
+          type: "error"
+        }), console.error("Error in reading file", f);
+      } finally {
+        n.value.length && o.open({
+          title: "Invalid excel",
+          type: "error"
+        }), l.value = !1;
+      }
+    }
+    return He(r, (c) => {
+      c && _(c);
+    }), (c, f) => {
+      const D = I("FmCircularProgress"), g = I("FmIcon"), w = I("FmButton");
+      return b(), E("div", Bo, [
+        Lo,
+        y(Uo, {
+          class: Q({
+            "w-full": !0,
+            "h-[200px]": !r.value
+          }),
+          accept: ".xlsx",
+          onFileUpload: f[0] || (f[0] = (S) => r.value = S),
+          label: "Upload template",
+          "button-label": "Select file"
+        }, nt({ _: 2 }, [
+          r.value ? {
+            name: "default",
+            fn: $(({ openFileDialog: S }) => [
+              i("div", zo, [
+                i("div", {
+                  class: Q([
+                    "fm-corner-radius-md p-16 flex items-center gap-16",
+                    {
+                      "border border-fm-color-neutral-gray-100": l.value,
+                      "border border-fm-color-neutral-gray-200": !l.value && !k.value,
+                      "border border-fm-color-system-error-200": k.value
+                    }
+                  ])
+                }, [
+                  l.value ? (b(), T(D, {
+                    key: 0,
+                    size: "md",
+                    color: "neutral-gray-200"
+                  })) : (b(), T(g, {
+                    key: 1,
+                    name: k.value ? "error" : "attach_file",
+                    outline: "",
+                    color: k.value ? "system-error-300" : void 0
+                  }, null, 8, ["name", "color"])),
+                  i("div", {
+                    class: Q([
+                      "fm-typo-en-body-md-400 flex-1 h-[36px] flex items-center",
+                      {
+                        "text-fm-color-typo-disabled": l.value,
+                        "text-fm-color-typo-primary": !l.value
+                      }
+                    ])
+                  }, [
+                    i("div", No, q(r.value.name), 1)
+                  ], 2),
+                  l.value ? z("", !0) : (b(), E("div", Oo, [
+                    y(w, {
+                      label: "Replace file",
+                      variant: k.value ? "destructive" : "secondary",
+                      "prepend-icon": k.value ? void 0 : "autorenew",
+                      onClick: S
+                    }, null, 8, ["variant", "prepend-icon", "onClick"])
+                  ]))
+                ], 2),
+                n.value.length ? (b(), E("div", jo, [
+                  (b(!0), E(J, null, oe(n.value, (L, F) => (b(), E("div", {
+                    key: F,
+                    class: "flex gap-8 items-center"
+                  }, [
+                    y(g, {
+                      name: "error",
+                      size: "sm",
+                      color: "system-error-300"
+                    }),
+                    i("div", Ho, q(L), 1)
+                  ]))), 128))
+                ])) : z("", !0)
+              ])
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["class"]),
+        u.value ? (b(), E("div", Yo, [
+          Wo,
+          (b(!0), E(J, null, oe(d.value, (S) => (b(), T(je, {
+            key: S.sku._id,
+            code: S.sku.code,
+            name: S.sku.name,
+            errors: S.errors,
+            type: "create"
+          }, null, 8, ["code", "name", "errors"]))), 128)),
+          (b(!0), E(J, null, oe(v.value, (S) => (b(), T(je, {
+            key: S.sku._id,
+            code: S.sku.code,
+            name: S.sku.name,
+            errors: S.errors,
+            type: "update"
+          }, null, 8, ["code", "name", "errors"]))), 128))
+        ])) : z("", !0)
+      ]);
+    };
+  }
+}), qo = { class: "px-24 xs:p-0 sm:p-0 flex flex-col gap-8 max-h-full" }, Ko = { class: "px-8 flex items-center xs:gap-0 xs:flex-col-reverse sm:gap-0 sm:flex-col-reverse" }, Xo = { class: "flex-1 w-full" }, Jo = { class: "flex flex-col py-8" }, Qo = { class: "fm-typo-en-body-md-400 text-fm-color-typo-secondary" }, Zo = { class: "fm-typo-en-body-lg-600 text-fm-color-typo-primary" }, fl = /* @__PURE__ */ le({
+  __name: "IngredientsView",
+  setup(s) {
+    const r = ne(), p = V(() => r.skus), o = ct(), l = qe(), n = he(), {
+      createIngredient: d,
+      updateIngredient: v,
+      deleteIngredient: k,
+      ingredientDialogProps: u,
+      ingredientViewLoading: _
+    } = Mt(), { columnDefs: c } = It({ updateIngredient: v, deleteIngredient: k });
+    function f(A) {
+      switch (A) {
+        case "add":
+          return d();
+        case "import":
+          return O();
+      }
+    }
+    const D = P(""), g = P(!1), w = V(() => g.value || _.value), { breakpoints: S } = pt(), L = V(() => S.value.xs || S.value.sm), F = V(() => L.value ? 10 : 20), me = gt(), G = P(!1), ae = [
+      {
+        value: "import",
+        label: "Import"
+      },
+      {
+        value: "export",
+        label: "Export"
+      }
+    ];
+    function se(A) {
+      switch (G.value = !1, A) {
+        case "import":
+          return O();
+        case "export":
+          return N();
+      }
+    }
+    const K = V(() => L.value ? [
+      { label: "More", icon: "more_vert", key: "more" }
+    ] : [
+      { label: "Export", icon: "ios_share", key: "export" }
+    ]), a = V(() => {
+      const A = [
+        { label: "Add ingredient", value: "add", isPrimary: !0, prependIcon: "add" }
+      ];
+      return L.value ? A : [...A, { label: "Import", value: "import" }];
+    });
+    function N() {
+      const A = Vo();
+      n.open({
+        title: "Ingredients exported",
+        message: `Filename: ${A}`,
+        type: "success"
+      });
+    }
+    function O() {
+      l.open({
+        title: "Import ingredients",
+        contentComponent: Go,
+        overlay: !0,
+        closeButton: !0,
+        primaryActions: {
+          text: "Import",
+          close: !1
+        },
+        secondaryActions: {
+          text: "Close",
+          close: !0
+        },
+        tertiaryActions: {
+          text: "Download template",
+          close: !1,
+          variant: "plain"
+        }
+      }).onPrimary((A) => {
+        if (!A) {
+          n.open({
+            title: "No import data received",
+            type: "error"
+          });
+          return;
+        }
+        if (!A.importCreateResult.length && !A.importUpdateResult.length) {
+          n.open({
+            title: "Invalid content",
+            message: "No import data in the excel file",
+            type: "error"
+          });
+          return;
+        }
+        if (A.importCreateResult.some((C) => C.errors.length) || A.importUpdateResult.some((C) => C.errors.length)) {
+          n.open({
+            title: "Invalid content",
+            message: "There is error in the import data.",
+            type: "error"
+          });
+          return;
+        }
+        l.close(), re(A);
+      }).onTertiary(ko);
+    }
+    async function re(A) {
+      g.value = !0;
+      try {
+        await Promise.all([
+          r.importSkus({
+            create: A.importCreateResult.map((C) => C.sku),
+            update: A.importUpdateResult.map((C) => C.sku)
+          }),
+          new Promise((C) => setTimeout(C, 2e3))
+        ]), n.open({
+          title: "Ingredients successfully imported",
+          type: "success"
+        });
+      } catch (C) {
+        n.open({
+          title: "Failed to import ingredients",
+          message: `System message: ${C == null ? void 0 : C.message}`,
+          type: "error"
+        }), console.error("Error in importing skus", A, C);
+      } finally {
+        g.value = !1;
+      }
+    }
+    function ie() {
+      G.value = !0;
+    }
+    return (A, C) => {
+      const fe = I("FmTableToolbar"), ue = I("FmTable"), ee = I("FmCollapsibleTabs"), _e = I("FmBottomSheet");
+      return b(), T(ht, {
+        title: "Ingredient",
+        actions: a.value,
+        "onClick:action": f
+      }, {
+        default: $(() => [
+          i("div", qo, [
+            i("div", Ko, [
+              i("div", Xo, [
+                y(fe, {
+                  searchable: "",
+                  "search-model": D.value,
+                  "onUpdate:searchModel": C[0] || (C[0] = (W) => D.value = W),
+                  actions: K.value,
+                  "onClick:actionExport": C[1] || (C[1] = () => N()),
+                  "onClick:actionImport": C[2] || (C[2] = () => O()),
+                  "onClick:actionMore": C[3] || (C[3] = () => ie())
+                }, null, 8, ["search-model", "actions"])
+              ])
+            ]),
+            y(ue, {
+              style: at(M(me).tableHeight),
+              "column-defs": M(c),
+              "row-data": p.value,
+              "search-value": D.value,
+              loading: !M(o)._currentLocation || w.value,
+              onRowClick: C[4] || (C[4] = (W) => M(v)(W.original)),
+              "page-size": F.value
+            }, {
+              "list-row": $((W) => [
+                y(bt, {
+                  row: W,
+                  onRowClick: M(v)
+                }, {
+                  default: $((e) => {
+                    var t, m, h, R, U, j, H, X, te, de;
+                    return [
+                      i("div", Jo, [
+                        i("div", Qo, [
+                          y(M(Ne), {
+                            render: (h = (m = (t = e.code) == null ? void 0 : t.column) == null ? void 0 : m.columnDef) == null ? void 0 : h.cell,
+                            props: (U = (R = e.code) == null ? void 0 : R.getContext) == null ? void 0 : U.call(R)
+                          }, null, 8, ["render", "props"])
+                        ]),
+                        i("div", Zo, [
+                          y(M(Ne), {
+                            render: (X = (H = (j = e.name) == null ? void 0 : j.column) == null ? void 0 : H.columnDef) == null ? void 0 : X.cell,
+                            props: (de = (te = e.name) == null ? void 0 : te.getContext) == null ? void 0 : de.call(te)
+                          }, null, 8, ["render", "props"])
+                        ])
+                      ])
+                    ];
+                  }),
+                  _: 2
+                }, 1032, ["row", "onRowClick"])
+              ]),
+              _: 1
+            }, 8, ["style", "column-defs", "row-data", "search-value", "loading", "page-size"])
+          ]),
+          (b(), T(Te, { to: "body" }, [
+            y(yo, st(rt(M(u))), null, 16)
+          ])),
+          (b(), T(Te, { to: "body" }, [
+            y(_e, {
+              "dismiss-away": "",
+              modelValue: G.value,
+              "onUpdate:modelValue": C[6] || (C[6] = (W) => G.value = W)
+            }, {
+              default: $(() => [
+                y(ee, {
+                  class: "pb-8",
+                  items: ae,
+                  "onUpdate:modelValue": C[5] || (C[5] = (W) => se(W))
+                })
+              ]),
+              _: 1
+            }, 8, ["modelValue"])
+          ]))
+        ]),
+        _: 1
+      }, 8, ["actions"]);
+    };
+  }
+});
+export {
+  fl as default
+};