@feedmepos/mf-order-setting 0.0.78 → 0.0.79-dev.20260819T150923Z.32268053923

package/dist/DisplaySystemView-Ce41EoTx.js

@@ -0,0 +1,1432 @@
+import { ref as w, defineComponent as pe, computed as W, onBeforeMount as we, onBeforeUnmount as ke, watch as ne, openBlock as v, createElementBlock as S, unref as a, Fragment as ae, createElementVNode as e, toDisplayString as l, createCommentVNode as A, resolveComponent as te, createBlock as ue, Teleport as be, createVNode as B, withDirectives as P, vModelText as J, normalizeClass as ce, createTextVNode as L, renderList as re, vModelSelect as se, vModelCheckbox as ee, withModifiers as Ce, onMounted as xe } from "vue";
+import { useI18n as ye, useCoreStore as _e } from "@feedmepos/mf-common";
+import { u as Pe } from "./snackbar-DZQ0_reQ.js";
+import { defineStore as $e } from "pinia";
+import { g as le, a as Ue, c as Ie } from "./index-JcrhqBWR.js";
+import { u as Ve } from "./firebase-storage-CqiufEBT.js";
+import { _ as me } from "./_plugin-vue_export-helper-CHgC5LLL.js";
+function he(r) {
+  return r ? JSON.parse(
+    JSON.stringify({
+      label: r.label,
+      mode: r.mode,
+      restaurantIds: r.restaurantIds,
+      schemaVersion: r.schemaVersion,
+      theme: r.theme,
+      layout: r.layout,
+      pickup: r.pickup,
+      queue: r.queue
+    })
+  ) : ie();
+}
+function ie(r = "PICKUP") {
+  return {
+    label: "",
+    mode: r,
+    schemaVersion: 1,
+    layout: {
+      background: { url: "/images/feedme-bg.png", size: "cover", position: "center" },
+      sidePanel: null,
+      boardWidthPercent: 100,
+      boardAlign: "START",
+      footerMode: "feedme"
+    },
+    pickup: {
+      groupBy: "type",
+      statusLayout: "horizontal",
+      statusColumnCount: 2,
+      statusSlidingPeriod: 1e4,
+      showDeliveryIcons: !0,
+      showOrderTypeTabs: !1,
+      showProgressBar: !1,
+      showOrderCount: !1,
+      showEstimatedTime: !1,
+      currentOrder: { enabled: !0 }
+    },
+    queue: {
+      paxBandSource: "queueSettings",
+      showWaitingCount: !0,
+      calledSlots: 1
+    }
+  };
+}
+function ge(r) {
+  var d;
+  const n = JSON.parse(JSON.stringify(r));
+  return (d = n.restaurantIds) != null && d.length || delete n.restaurantIds, n.mode === "PICKUP" && delete n.queue, n.mode === "QUEUE" && delete n.pickup, n;
+}
+function G() {
+  const r = Ue.getBusinessId();
+  if (!r) throw new Error("Invalid business");
+  return Ie(r);
+}
+async function Oe(r) {
+  return le(await G().get("/display/screen-capabilities", { params: { restaurantId: r } }));
+}
+async function Te(r) {
+  return le(await G().get("/display/screens", { params: { restaurantId: r } }));
+}
+async function De(r, n) {
+  return le(await G().post("/display/screens", n, { params: { restaurantId: r } }));
+}
+async function Be(r, n, d) {
+  return le(
+    await G().put(`/display/screens/${n}`, d, { params: { restaurantId: r } })
+  );
+}
+async function Ae(r, n) {
+  await G().delete(`/display/screens/${n}`, { params: { restaurantId: r } });
+}
+async function qe(r) {
+  return le(await G().get("/display/configs", { params: { restaurantId: r } }));
+}
+async function Fe(r) {
+  return le(await G().post("/display/configs", r));
+}
+async function Re(r, n) {
+  return le(await G().put(`/display/configs/${r}`, n));
+}
+async function Ne(r) {
+  await G().delete(`/display/configs/${r}`);
+}
+const z = {
+  getScreenCapabilities: Oe,
+  listScreens: Te,
+  createScreen: De,
+  updateScreen: Be,
+  deleteScreen: Ae,
+  listConfigs: qe,
+  createConfig: Fe,
+  updateConfig: Re,
+  deleteConfig: Ne
+}, Me = $e("display-system", () => {
+  const r = w([]), n = w(), d = w([]), h = w(!1), t = w(!1), p = w(!1);
+  async function o(E) {
+    t.value = !0, n.value = void 0;
+    try {
+      n.value = await z.getScreenCapabilities(E);
+    } finally {
+      t.value = !1;
+    }
+  }
+  async function m(E) {
+    h.value = !0;
+    try {
+      r.value = await z.listScreens(E);
+    } finally {
+      h.value = !1;
+    }
+  }
+  async function C(E) {
+    p.value = !0;
+    try {
+      d.value = await z.listConfigs(E);
+    } finally {
+      p.value = !1;
+    }
+  }
+  async function $(E) {
+    const x = await z.createConfig(E);
+    return d.value = [x, ...d.value], x;
+  }
+  async function V(E, x) {
+    const b = await z.updateConfig(E, x);
+    return d.value = d.value.map((g) => g._id === E ? b : g), b;
+  }
+  async function O(E) {
+    await z.deleteConfig(E), d.value = d.value.filter((x) => x._id !== E);
+  }
+  async function U(E, x) {
+    const b = await z.createScreen(E, x);
+    return r.value = [b, ...r.value], b;
+  }
+  async function K(E, x, b) {
+    const g = await z.updateScreen(E, x, b);
+    return r.value = r.value.map((y) => y._id === x ? g : y), g;
+  }
+  async function q(E, x) {
+    await z.deleteScreen(E, x), r.value = r.value.filter((b) => b._id !== x);
+  }
+  return {
+    screens: r,
+    screenCapabilities: n,
+    configs: d,
+    loadingScreens: h,
+    loadingScreenCapabilities: t,
+    loadingConfigs: p,
+    loadScreenCapabilities: o,
+    loadScreens: m,
+    loadConfigs: C,
+    createConfig: $,
+    updateConfig: V,
+    deleteConfig: O,
+    createScreen: U,
+    updateScreen: K,
+    deleteScreen: q
+  };
+}), Le = {
+  preparing: [
+    { id: "pickup-a12", code: "A12", slot: "A12", source: "POS", departments: ["FOOD"] },
+    { id: "pickup-a13", code: "A13", slot: "A13", source: "POS", departments: ["DRINKS"] },
+    { id: "pickup-d12", code: "D12", slot: "D12", source: "Inhouse Delivery" },
+    { id: "pickup-sf21", code: "SF21", slot: "SF21", source: "ShopeeFood" },
+    { id: "pickup-gf18", code: "GF18", slot: "GF18", source: "GrabFood" }
+  ],
+  ready: [
+    { id: "pickup-e2e01", code: "E2E01", slot: "E2E01", source: "POS" },
+    { id: "pickup-p08", code: "P08", slot: "P08", source: "POS" },
+    { id: "pickup-gf07", code: "GF07", slot: "GF07", source: "GrabFood" }
+  ],
+  stats: { orders: 8, food: 6, drinks: 2 },
+  waitingTimeMinutes: 8
+}, Ke = {
+  groups: [
+    {
+      id: "pax-1-2",
+      label: "1–2 pax",
+      called: [{ id: "queue-1033", code: "1033", pax: 2, calledAt: "2026-08-18T08:01:00Z" }],
+      waiting: [
+        { id: "queue-1034", code: "1034", pax: 2 },
+        { id: "queue-1035", code: "1035", pax: 2 },
+        { id: "queue-1036", code: "1036", pax: 2 }
+      ],
+      waitingCount: 4
+    },
+    {
+      id: "pax-3-4",
+      label: "3–4 pax",
+      called: [{ id: "queue-3321", code: "3321", pax: 4, calledAt: "2026-08-18T08:02:00Z" }],
+      waiting: [
+        { id: "queue-3322", code: "3322", pax: 4 },
+        { id: "queue-3333", code: "3333", pax: 3 },
+        { id: "queue-3334", code: "3334", pax: 4 }
+      ],
+      waitingCount: 3
+    },
+    {
+      id: "pax-5-6",
+      label: "5–6 pax",
+      called: [{ id: "queue-5890", code: "5890", pax: 5, calledAt: "2026-08-18T08:03:00Z" }],
+      waiting: [
+        { id: "queue-5891", code: "5891", pax: 5 },
+        { id: "queue-5892", code: "5892", pax: 6 },
+        { id: "queue-5893", code: "5893", pax: 5 }
+      ],
+      waitingCount: 7
+    },
+    {
+      id: "pax-7-plus",
+      label: "7+ pax",
+      called: [{ id: "queue-7456", code: "7456", pax: 9, calledAt: "2026-08-18T08:04:00Z" }],
+      waiting: [{ id: "queue-7457", code: "7457", pax: 8 }],
+      waitingCount: 1
+    }
+  ]
+};
+function Se(r, n) {
+  return r.startsWith("/images/") ? new URL(`.${r}`, n).href : r;
+}
+function je(r, n) {
+  var p, o;
+  const d = JSON.parse(
+    JSON.stringify({
+      schemaVersion: r.schemaVersion,
+      theme: r.theme,
+      layout: r.layout,
+      pickup: r.pickup,
+      queue: r.queue
+    })
+  ), h = (p = d.layout) == null ? void 0 : p.background;
+  h != null && h.url && (h.url = Se(h.url, n));
+  const t = (o = d.layout) == null ? void 0 : o.sidePanel;
+  return t != null && t.url && (t.url = Se(t.url, n)), d;
+}
+function Qe(r, n, d = "1") {
+  const h = (/* @__PURE__ */ new Date()).toISOString(), t = r.mode === "QUEUE" ? {
+    v: 1,
+    type: "SERVER_MESSAGE_TYPE_SNAPSHOT",
+    ts: h,
+    topic: "TOPIC_QUEUE",
+    revision: d,
+    queue: Ke
+  } : {
+    v: 1,
+    type: "SERVER_MESSAGE_TYPE_SNAPSHOT",
+    ts: h,
+    topic: "TOPIC_PICKUP",
+    revision: d,
+    pickup: Le
+  };
+  return {
+    source: "feedme-display-editor",
+    type: "snapshot",
+    messages: [
+      {
+        v: 1,
+        type: "SERVER_MESSAGE_TYPE_SNAPSHOT",
+        ts: h,
+        topic: "TOPIC_SCREEN",
+        revision: d,
+        screen: {
+          screenId: "portal-preview",
+          name: "Portal preview",
+          mode: r.mode === "QUEUE" ? "DISPLAY_MODE_QUEUE" : "DISPLAY_MODE_PICKUP",
+          licensed: !0,
+          config: je(r, n)
+        }
+      },
+      {
+        v: 1,
+        type: "SERVER_MESSAGE_TYPE_SNAPSHOT",
+        ts: h,
+        topic: "TOPIC_RESTAURANT",
+        revision: d,
+        restaurant: {
+          restaurantId: "portal-preview",
+          businessId: "portal-preview",
+          name: "FeedMe Demo",
+          brandKit: {
+            colors: {
+              primary: "#ff7823",
+              accent: "#b25300"
+            }
+          }
+        }
+      },
+      t
+    ]
+  };
+}
+const We = { class: "preview-frame" }, ze = ["src", "title"], Ge = {
+  key: 0,
+  class: "preview-status"
+}, He = {
+  key: 1,
+  class: "preview-loading"
+}, Je = /* @__PURE__ */ pe({
+  __name: "DisplayPreview",
+  props: {
+    config: {}
+  },
+  setup(r) {
+    const n = r, { t: d } = ye(), h = w(), t = w(!1), p = w(!1), o = w(0);
+    let m = 0, C;
+    function $() {
+      const b = [".", "display-preview", "index.html"].join("/");
+      return new URL(b, import.meta.url).href;
+    }
+    const V = W(() => {
+      const b = new URL($());
+      return b.searchParams.set("transport", "preview"), b.searchParams.set("previewOrigin", window.location.origin), b.href;
+    }), O = W(() => new URL(V.value).origin);
+    function U() {
+      C !== void 0 && window.clearTimeout(C), C = void 0;
+    }
+    function K() {
+      U(), C = window.setTimeout(() => {
+        t.value || (p.value = !0);
+      }, 1e4);
+    }
+    function q() {
+      var g;
+      const b = (g = h.value) == null ? void 0 : g.contentWindow;
+      !t.value || !b || (m += 1, b.postMessage(
+        Qe(n.config, V.value, String(m)),
+        O.value
+      ));
+    }
+    function E(b) {
+      var y;
+      if (b.source !== ((y = h.value) == null ? void 0 : y.contentWindow) || b.origin !== O.value || !b.data || typeof b.data != "object") return;
+      const g = b.data;
+      g.source !== "feedme-display-v3" || g.type !== "ready" || (t.value = !0, p.value = !1, U(), q());
+    }
+    function x() {
+      t.value = !1, p.value = !1, o.value += 1, K();
+    }
+    return we(() => {
+      window.addEventListener("message", E), K();
+    }), ke(() => {
+      window.removeEventListener("message", E), U();
+    }), ne(
+      () => n.config,
+      () => q(),
+      { deep: !0, flush: "post" }
+    ), (b, g) => (v(), S("div", We, [
+      (v(), S("iframe", {
+        key: o.value,
+        ref_key: "frame",
+        ref: h,
+        class: "preview-iframe",
+        src: V.value,
+        title: a(d)("order.displaySystem.configEditor.livePreview"),
+        sandbox: "allow-scripts allow-same-origin",
+        referrerpolicy: "no-referrer"
+      }, null, 8, ze)),
+      t.value ? A("", !0) : (v(), S("div", Ge, [
+        p.value ? (v(), S(ae, { key: 0 }, [
+          e("p", null, l(a(d)("order.displaySystem.configEditor.previewUnavailable")), 1),
+          e("button", {
+            type: "button",
+            onClick: x
+          }, l(a(d)("order.displaySystem.configEditor.previewRetry")), 1)
+        ], 64)) : (v(), S("div", He, [
+          g[0] || (g[0] = e("span", { "aria-hidden": "true" }, null, -1)),
+          e("p", null, l(a(d)("order.displaySystem.configEditor.previewLoading")), 1)
+        ]))
+      ]))
+    ]));
+  }
+}), Ye = /* @__PURE__ */ me(Je, [["__scopeId", "data-v-326629fb"]]), Ze = {
+  key: 0,
+  class: "fixed inset-0 z-[60] flex flex-col bg-white"
+}, Xe = { class: "flex items-center justify-between border-b border-gray-200 px-24 py-16" }, et = { class: "fm-typo-en-title-lg-600" }, tt = { class: "mt-2 text-sm text-gray-500" }, st = { class: "flex gap-8" }, at = { class: "grid min-h-0 flex-1 grid-cols-[minmax(360px,42%)_minmax(0,58%)] overflow-hidden" }, lt = { class: "overflow-y-auto px-24 py-20" }, ot = {
+  key: 0,
+  class: "mb-16 rounded-lg bg-red-50 px-16 py-12 text-sm text-red-700"
+}, it = { class: "editor-section" }, nt = { class: "field-label" }, rt = { class: "field-label" }, dt = { class: "segmented" }, ut = { class: "field-label" }, ct = { class: "check-row" }, pt = ["checked"], yt = { class: "check-row" }, mt = ["checked"], vt = {
+  key: 0,
+  class: "restaurant-grid"
+}, ft = ["checked", "onChange"], gt = { class: "editor-section" }, St = { class: "section-title-row" }, bt = { class: "grid grid-cols-2 gap-12" }, _t = { class: "editor-section" }, ht = { class: "grid grid-cols-1 gap-12 sm:grid-cols-2" }, Et = ["value", "onInput"], wt = {
+  key: 1,
+  class: "editor-section"
+}, kt = { class: "field-label" }, Ct = { value: "type" }, xt = { value: "status" }, Pt = {
+  key: 0,
+  class: "field-label"
+}, $t = { value: "horizontal" }, Ut = { value: "vertical" }, It = {
+  key: 1,
+  class: "field-label"
+}, Vt = {
+  key: 2,
+  class: "field-label"
+}, Ot = ["value"], Tt = { class: "toggle-grid" }, Dt = { class: "check-row" }, Bt = { class: "check-row" }, At = { class: "check-row" }, qt = { class: "check-row" }, Ft = {
+  key: 0,
+  class: "check-row"
+}, Rt = { class: "check-row" }, Nt = {
+  key: 2,
+  class: "editor-section"
+}, Mt = { class: "field-label" }, Lt = { value: "queueSettings" }, Kt = { value: "custom" }, jt = { class: "field-label" }, Qt = { class: "check-row" }, Wt = { class: "editor-section" }, zt = { class: "image-field" }, Gt = { class: "upload-button" }, Ht = { class: "image-field" }, Jt = { class: "upload-button" }, Yt = { class: "field-label" }, Zt = { class: "field-label" }, Xt = { value: "START" }, es = { value: "CENTER" }, ts = { value: "END" }, ss = { class: "overflow-y-auto border-l border-gray-200 bg-gray-50 px-24 py-20" }, as = { class: "sticky top-0" }, ls = { class: "fm-typo-en-title-sm-600" }, os = { class: "mb-16 mt-2 text-sm text-gray-500" }, is = /* @__PURE__ */ pe({
+  __name: "DisplayConfigEditor",
+  props: {
+    modelValue: { type: Boolean },
+    config: {},
+    restaurants: {},
+    saving: { type: Boolean }
+  },
+  emits: ["update:modelValue", "save"],
+  setup(r, { emit: n }) {
+    const d = r, h = n, { t } = ye(), { currentBusiness: p } = _e(), o = w(ie()), m = w(!0), C = w(""), $ = w(null), V = W(
+      () => d.config ? t("order.displaySystem.configEditor.editTitle") : t("order.displaySystem.configEditor.addTitle")
+    );
+    function O(u) {
+      var I, T, F, R, N, Q, Y, Z, X, H, s, c, D, M;
+      const i = ie((u == null ? void 0 : u.mode) ?? "PICKUP"), f = he(u);
+      return {
+        ...i,
+        ...f,
+        theme: {
+          ...i.theme,
+          ...f.theme,
+          brandkitOverride: {
+            ...(I = i.theme) == null ? void 0 : I.brandkitOverride,
+            ...(T = f.theme) == null ? void 0 : T.brandkitOverride,
+            colors: {
+              ...(R = (F = i.theme) == null ? void 0 : F.brandkitOverride) == null ? void 0 : R.colors,
+              ...(Q = (N = f.theme) == null ? void 0 : N.brandkitOverride) == null ? void 0 : Q.colors,
+              text: {
+                ...(X = (Z = (Y = i.theme) == null ? void 0 : Y.brandkitOverride) == null ? void 0 : Z.colors) == null ? void 0 : X.text,
+                ...(c = (s = (H = f.theme) == null ? void 0 : H.brandkitOverride) == null ? void 0 : s.colors) == null ? void 0 : c.text
+              }
+            }
+          }
+        },
+        layout: { ...i.layout, ...f.layout },
+        pickup: {
+          ...i.pickup,
+          ...f.pickup,
+          currentOrder: { ...(D = i.pickup) == null ? void 0 : D.currentOrder, ...(M = f.pickup) == null ? void 0 : M.currentOrder }
+        },
+        queue: { ...i.queue, ...f.queue }
+      };
+    }
+    function U() {
+      var u;
+      o.value = O(d.config), m.value = !((u = o.value.restaurantIds) != null && u.length), C.value = "";
+    }
+    ne(
+      () => d.modelValue,
+      (u) => {
+        u && U();
+      }
+    );
+    function K() {
+      h("update:modelValue", !1);
+    }
+    function q(u) {
+      const i = o.value.label, f = o.value.restaurantIds;
+      o.value = ie(u), o.value.label = i, o.value.restaurantIds = f;
+    }
+    function E(u) {
+      const i = ie(o.value.mode);
+      u === "side" && (i.layout = {
+        ...i.layout,
+        background: null,
+        sidePanel: {
+          url: "/images/feedme-side.png",
+          position: "left",
+          widthPercent: 33,
+          objectFit: "cover"
+        },
+        boardAlign: "END"
+      }, i.pickup && (i.pickup.groupBy = "status", i.pickup.showProgressBar = !0)), o.value.layout = i.layout, o.value.pickup = i.pickup, o.value.queue = i.queue;
+    }
+    function x(u, i) {
+      const f = new Set(o.value.restaurantIds ?? []);
+      i ? f.add(u) : f.delete(u), o.value.restaurantIds = [...f];
+    }
+    function b(u) {
+      m.value = u, u ? delete o.value.restaurantIds : o.value.restaurantIds = [];
+    }
+    function g() {
+      var u, i, f, I;
+      return (u = o.value).theme ?? (u.theme = {}), (i = o.value.theme).brandkitOverride ?? (i.brandkitOverride = {}), (f = o.value.theme.brandkitOverride).colors ?? (f.colors = {}), (I = o.value.theme.brandkitOverride.colors).text ?? (I.text = {}), o.value.theme.brandkitOverride.colors;
+    }
+    function y(u) {
+      var f, I, T;
+      const i = g();
+      return u === "primary" || u === "accent" ? i[u] ?? (u === "primary" ? "#ff6b1a" : "#ff7a24") : u === "onPrimary" ? ((f = i.text) == null ? void 0 : f.onPrimary) ?? "#ffffff" : u === "textPrimary" ? ((I = i.text) == null ? void 0 : I.primary) ?? "#1e1e20" : ((T = i.text) == null ? void 0 : T.secondary) ?? "#666666";
+    }
+    function j(u, i) {
+      const f = g();
+      u === "primary" || u === "accent" ? f[u] = i : u === "onPrimary" ? f.text.onPrimary = i : u === "textPrimary" ? f.text.primary = i : f.text.secondary = i;
+    }
+    async function k(u, i) {
+      var T, F, R;
+      const f = (T = i.target.files) == null ? void 0 : T[0], I = (F = p.value) == null ? void 0 : F._id;
+      if (!(!f || !I)) {
+        $.value = u, C.value = "";
+        try {
+          const N = await Ve(`business/${I}/display/${u}`, f);
+          (R = o.value).layout ?? (R.layout = {}), u === "background" ? o.value.layout.background = { url: N, size: "cover", position: "center" } : o.value.layout.sidePanel = { url: N, position: "left", widthPercent: 30, objectFit: "cover" };
+        } catch {
+          C.value = t("order.displaySystem.configEditor.uploadFailed");
+        } finally {
+          $.value = null;
+        }
+      }
+    }
+    function oe() {
+      var i;
+      const u = o.value.label.trim();
+      if (!u) {
+        C.value = t("order.displaySystem.configEditor.labelRequired");
+        return;
+      }
+      if (!m.value && !((i = o.value.restaurantIds) != null && i.length)) {
+        C.value = t("order.displaySystem.configEditor.restaurantRequired");
+        return;
+      }
+      o.value.label = u, m.value && delete o.value.restaurantIds, h("save", JSON.parse(JSON.stringify(o.value)));
+    }
+    return (u, i) => {
+      var I, T, F, R, N, Q, Y, Z, X, H;
+      const f = te("FmButton");
+      return v(), ue(be, { to: "body" }, [
+        r.modelValue ? (v(), S("div", Ze, [
+          e("header", Xe, [
+            e("div", null, [
+              e("h1", et, l(V.value), 1),
+              e("p", tt, l(a(t)("order.displaySystem.configEditor.description")), 1)
+            ]),
+            e("div", st, [
+              B(f, {
+                variant: "secondary",
+                label: a(t)("order.displaySystem.common.cancel"),
+                onClick: K
+              }, null, 8, ["label"]),
+              B(f, {
+                label: a(t)("order.displaySystem.common.save"),
+                disabled: r.saving,
+                onClick: oe
+              }, null, 8, ["label", "disabled"])
+            ])
+          ]),
+          e("div", at, [
+            e("div", lt, [
+              C.value ? (v(), S("p", ot, l(C.value), 1)) : A("", !0),
+              e("section", it, [
+                e("h2", null, l(a(t)("order.displaySystem.configEditor.basic")), 1),
+                e("label", nt, [
+                  e("span", null, l(a(t)("order.displaySystem.configEditor.label")), 1),
+                  P(e("input", {
+                    "onUpdate:modelValue": i[0] || (i[0] = (s) => o.value.label = s),
+                    class: "field-input",
+                    type: "text"
+                  }, null, 512), [
+                    [J, o.value.label]
+                  ])
+                ]),
+                e("div", rt, [
+                  e("span", null, l(a(t)("order.displaySystem.configEditor.mode")), 1),
+                  e("div", dt, [
+                    e("button", {
+                      class: ce({ active: o.value.mode === "PICKUP" }),
+                      onClick: i[1] || (i[1] = (s) => q("PICKUP"))
+                    }, " Pickup ", 2),
+                    e("button", {
+                      class: ce({ active: o.value.mode === "QUEUE" }),
+                      onClick: i[2] || (i[2] = (s) => q("QUEUE"))
+                    }, " Queue ", 2)
+                  ])
+                ]),
+                e("div", ut, [
+                  e("span", null, l(a(t)("order.displaySystem.configEditor.availability")), 1),
+                  e("label", ct, [
+                    e("input", {
+                      checked: m.value,
+                      type: "radio",
+                      onChange: i[3] || (i[3] = (s) => b(!0))
+                    }, null, 40, pt),
+                    L(l(a(t)("order.displaySystem.configEditor.allRestaurants")), 1)
+                  ]),
+                  e("label", yt, [
+                    e("input", {
+                      checked: !m.value,
+                      type: "radio",
+                      onChange: i[4] || (i[4] = (s) => b(!1))
+                    }, null, 40, mt),
+                    L(l(a(t)("order.displaySystem.configEditor.selectedRestaurants")), 1)
+                  ]),
+                  m.value ? A("", !0) : (v(), S("div", vt, [
+                    (v(!0), S(ae, null, re(r.restaurants, (s) => {
+                      var c;
+                      return v(), S("label", {
+                        key: s._id,
+                        class: "check-row"
+                      }, [
+                        e("input", {
+                          checked: (c = o.value.restaurantIds) == null ? void 0 : c.includes(s._id),
+                          type: "checkbox",
+                          onChange: (D) => x(s._id, D.target.checked)
+                        }, null, 40, ft),
+                        L(" " + l(s.profile.name), 1)
+                      ]);
+                    }), 128))
+                  ]))
+                ])
+              ]),
+              e("section", gt, [
+                e("div", St, [
+                  e("h2", null, l(a(t)("order.displaySystem.configEditor.presets")), 1)
+                ]),
+                e("div", bt, [
+                  e("button", {
+                    class: "preset-card",
+                    onClick: i[5] || (i[5] = (s) => E("classic"))
+                  }, [
+                    e("strong", null, l(a(t)("order.displaySystem.configEditor.classicPreset")), 1),
+                    e("span", null, l(a(t)("order.displaySystem.configEditor.classicPresetDescription")), 1)
+                  ]),
+                  e("button", {
+                    class: "preset-card",
+                    onClick: i[6] || (i[6] = (s) => E("side"))
+                  }, [
+                    e("strong", null, l(a(t)("order.displaySystem.configEditor.sidePreset")), 1),
+                    e("span", null, l(a(t)("order.displaySystem.configEditor.sidePresetDescription")), 1)
+                  ])
+                ])
+              ]),
+              e("section", _t, [
+                e("h2", null, l(a(t)("order.displaySystem.configEditor.colors")), 1),
+                e("div", ht, [
+                  (v(), S(ae, null, re([
+                    ["primary", "primaryColor"],
+                    ["accent", "accentColor"],
+                    ["onPrimary", "onPrimaryColor"],
+                    ["textPrimary", "textPrimaryColor"],
+                    ["textSecondary", "textSecondaryColor"]
+                  ], (s) => e("label", {
+                    key: s[0],
+                    class: "color-field"
+                  }, [
+                    e("input", {
+                      value: y(s[0]),
+                      type: "color",
+                      onInput: (c) => j(s[0], c.target.value)
+                    }, null, 40, Et),
+                    e("span", null, l(a(t)(`order.displaySystem.configEditor.${s[1]}`)), 1)
+                  ])), 64))
+                ])
+              ]),
+              o.value.mode === "PICKUP" ? (v(), S("section", wt, [
+                e("h2", null, l(a(t)("order.displaySystem.configEditor.displaySettings")), 1),
+                e("label", kt, [
+                  e("span", null, l(a(t)("order.displaySystem.configEditor.groupBy")), 1),
+                  P(e("select", {
+                    "onUpdate:modelValue": i[7] || (i[7] = (s) => o.value.pickup.groupBy = s),
+                    class: "field-input"
+                  }, [
+                    e("option", Ct, l(a(t)("order.displaySystem.configEditor.groupByType")), 1),
+                    e("option", xt, l(a(t)("order.displaySystem.configEditor.groupByStatus")), 1)
+                  ], 512), [
+                    [se, o.value.pickup.groupBy]
+                  ])
+                ]),
+                ((I = o.value.pickup) == null ? void 0 : I.groupBy) === "status" ? (v(), S("label", Pt, [
+                  e("span", null, l(a(t)("order.displaySystem.configEditor.statusLayout")), 1),
+                  P(e("select", {
+                    "onUpdate:modelValue": i[8] || (i[8] = (s) => o.value.pickup.statusLayout = s),
+                    class: "field-input"
+                  }, [
+                    e("option", $t, l(a(t)("order.displaySystem.configEditor.horizontal")), 1),
+                    e("option", Ut, l(a(t)("order.displaySystem.configEditor.vertical")), 1)
+                  ], 512), [
+                    [se, o.value.pickup.statusLayout]
+                  ])
+                ])) : A("", !0),
+                ((T = o.value.pickup) == null ? void 0 : T.groupBy) === "status" ? (v(), S("label", It, [
+                  e("span", null, l(a(t)("order.displaySystem.configEditor.statusColumns")), 1),
+                  P(e("input", {
+                    "onUpdate:modelValue": i[9] || (i[9] = (s) => o.value.pickup.statusColumnCount = s),
+                    class: "field-input",
+                    type: "number",
+                    min: "1",
+                    max: "3"
+                  }, null, 512), [
+                    [
+                      J,
+                      o.value.pickup.statusColumnCount,
+                      void 0,
+                      { number: !0 }
+                    ]
+                  ])
+                ])) : A("", !0),
+                ((F = o.value.pickup) == null ? void 0 : F.groupBy) === "status" ? (v(), S("label", Vt, [
+                  e("span", null, l(a(t)("order.displaySystem.configEditor.slidingSeconds")), 1),
+                  e("input", {
+                    value: (((R = o.value.pickup) == null ? void 0 : R.statusSlidingPeriod) ?? 1e4) / 1e3,
+                    class: "field-input",
+                    type: "number",
+                    min: "2",
+                    max: "60",
+                    onInput: i[10] || (i[10] = (s) => o.value.pickup.statusSlidingPeriod = Number(s.target.value) * 1e3)
+                  }, null, 40, Ot)
+                ])) : A("", !0),
+                e("div", Tt, [
+                  e("label", Dt, [
+                    P(e("input", {
+                      "onUpdate:modelValue": i[11] || (i[11] = (s) => o.value.pickup.currentOrder.enabled = s),
+                      type: "checkbox"
+                    }, null, 512), [
+                      [ee, o.value.pickup.currentOrder.enabled]
+                    ]),
+                    L(l(a(t)("order.displaySystem.configEditor.showCurrentOrder")), 1)
+                  ]),
+                  e("label", Bt, [
+                    P(e("input", {
+                      "onUpdate:modelValue": i[12] || (i[12] = (s) => o.value.pickup.showDeliveryIcons = s),
+                      type: "checkbox"
+                    }, null, 512), [
+                      [ee, o.value.pickup.showDeliveryIcons]
+                    ]),
+                    L(l(a(t)("order.displaySystem.configEditor.showDeliveryIcons")), 1)
+                  ]),
+                  e("label", At, [
+                    P(e("input", {
+                      "onUpdate:modelValue": i[13] || (i[13] = (s) => o.value.pickup.showOrderCount = s),
+                      type: "checkbox"
+                    }, null, 512), [
+                      [ee, o.value.pickup.showOrderCount]
+                    ]),
+                    L(l(a(t)("order.displaySystem.configEditor.showOrderCount")), 1)
+                  ]),
+                  e("label", qt, [
+                    P(e("input", {
+                      "onUpdate:modelValue": i[14] || (i[14] = (s) => o.value.pickup.showEstimatedTime = s),
+                      type: "checkbox"
+                    }, null, 512), [
+                      [ee, o.value.pickup.showEstimatedTime]
+                    ]),
+                    L(l(a(t)("order.displaySystem.configEditor.showEstimatedTime")), 1)
+                  ]),
+                  ((N = o.value.pickup) == null ? void 0 : N.groupBy) === "type" ? (v(), S("label", Ft, [
+                    P(e("input", {
+                      "onUpdate:modelValue": i[15] || (i[15] = (s) => o.value.pickup.showOrderTypeTabs = s),
+                      type: "checkbox"
+                    }, null, 512), [
+                      [ee, o.value.pickup.showOrderTypeTabs]
+                    ]),
+                    L(l(a(t)("order.displaySystem.configEditor.showOrderTypeTabs")), 1)
+                  ])) : A("", !0),
+                  e("label", Rt, [
+                    P(e("input", {
+                      "onUpdate:modelValue": i[16] || (i[16] = (s) => o.value.pickup.showProgressBar = s),
+                      type: "checkbox"
+                    }, null, 512), [
+                      [ee, o.value.pickup.showProgressBar]
+                    ]),
+                    L(l(a(t)("order.displaySystem.configEditor.showProgressBar")), 1)
+                  ])
+                ])
+              ])) : (v(), S("section", Nt, [
+                e("h2", null, l(a(t)("order.displaySystem.configEditor.queueSettings")), 1),
+                e("label", Mt, [
+                  e("span", null, l(a(t)("order.displaySystem.configEditor.paxBandSource")), 1),
+                  P(e("select", {
+                    "onUpdate:modelValue": i[17] || (i[17] = (s) => o.value.queue.paxBandSource = s),
+                    class: "field-input"
+                  }, [
+                    e("option", Lt, l(a(t)("order.displaySystem.configEditor.queueSettingsSource")), 1),
+                    e("option", Kt, l(a(t)("order.displaySystem.configEditor.customSource")), 1)
+                  ], 512), [
+                    [se, o.value.queue.paxBandSource]
+                  ])
+                ]),
+                e("label", jt, [
+                  e("span", null, l(a(t)("order.displaySystem.configEditor.calledSlots")), 1),
+                  P(e("input", {
+                    "onUpdate:modelValue": i[18] || (i[18] = (s) => o.value.queue.calledSlots = s),
+                    class: "field-input",
+                    type: "number",
+                    min: "1",
+                    max: "4"
+                  }, null, 512), [
+                    [
+                      J,
+                      o.value.queue.calledSlots,
+                      void 0,
+                      { number: !0 }
+                    ]
+                  ])
+                ]),
+                e("label", Qt, [
+                  P(e("input", {
+                    "onUpdate:modelValue": i[19] || (i[19] = (s) => o.value.queue.showWaitingCount = s),
+                    type: "checkbox"
+                  }, null, 512), [
+                    [ee, o.value.queue.showWaitingCount]
+                  ]),
+                  L(l(a(t)("order.displaySystem.configEditor.showWaitingCount")), 1)
+                ])
+              ])),
+              e("section", Wt, [
+                e("h2", null, l(a(t)("order.displaySystem.configEditor.layoutSettings")), 1),
+                e("div", zt, [
+                  e("div", null, [
+                    e("strong", null, l(a(t)("order.displaySystem.configEditor.backgroundImage")), 1),
+                    e("p", null, l(((Y = (Q = o.value.layout) == null ? void 0 : Q.background) == null ? void 0 : Y.url) || a(t)("order.displaySystem.configEditor.disabled")), 1)
+                  ]),
+                  e("label", Gt, [
+                    e("input", {
+                      class: "hidden",
+                      type: "file",
+                      accept: "image/*",
+                      onChange: i[20] || (i[20] = (s) => k("background", s))
+                    }, null, 32),
+                    L(l($.value === "background" ? a(t)("order.displaySystem.configEditor.uploading") : a(t)("order.displaySystem.configEditor.upload")), 1)
+                  ]),
+                  e("button", {
+                    class: "plain-button",
+                    onClick: i[21] || (i[21] = (s) => o.value.layout.background = null)
+                  }, l(a(t)("order.displaySystem.configEditor.disable")), 1)
+                ]),
+                e("div", Ht, [
+                  e("div", null, [
+                    e("strong", null, l(a(t)("order.displaySystem.configEditor.sidePanelImage")), 1),
+                    e("p", null, l(((X = (Z = o.value.layout) == null ? void 0 : Z.sidePanel) == null ? void 0 : X.url) || a(t)("order.displaySystem.configEditor.disabled")), 1)
+                  ]),
+                  e("label", Jt, [
+                    e("input", {
+                      class: "hidden",
+                      type: "file",
+                      accept: "image/*",
+                      onChange: i[22] || (i[22] = (s) => k("sidePanel", s))
+                    }, null, 32),
+                    L(l($.value === "sidePanel" ? a(t)("order.displaySystem.configEditor.uploading") : a(t)("order.displaySystem.configEditor.upload")), 1)
+                  ]),
+                  e("button", {
+                    class: "plain-button",
+                    onClick: i[23] || (i[23] = (s) => o.value.layout.sidePanel = null)
+                  }, l(a(t)("order.displaySystem.configEditor.disable")), 1)
+                ]),
+                e("label", Yt, [
+                  e("span", null, l(a(t)("order.displaySystem.configEditor.boardWidth")), 1),
+                  P(e("input", {
+                    "onUpdate:modelValue": i[24] || (i[24] = (s) => o.value.layout.boardWidthPercent = s),
+                    class: "field-input",
+                    type: "range",
+                    min: "20",
+                    max: "100",
+                    step: "5"
+                  }, null, 512), [
+                    [
+                      J,
+                      o.value.layout.boardWidthPercent,
+                      void 0,
+                      { number: !0 }
+                    ]
+                  ]),
+                  e("small", null, l((H = o.value.layout) == null ? void 0 : H.boardWidthPercent) + "%", 1)
+                ]),
+                e("label", Zt, [
+                  e("span", null, l(a(t)("order.displaySystem.configEditor.boardAlign")), 1),
+                  P(e("select", {
+                    "onUpdate:modelValue": i[25] || (i[25] = (s) => o.value.layout.boardAlign = s),
+                    class: "field-input"
+                  }, [
+                    e("option", Xt, l(a(t)("order.displaySystem.configEditor.alignStart")), 1),
+                    e("option", es, l(a(t)("order.displaySystem.configEditor.alignCenter")), 1),
+                    e("option", ts, l(a(t)("order.displaySystem.configEditor.alignEnd")), 1)
+                  ], 512), [
+                    [se, o.value.layout.boardAlign]
+                  ])
+                ])
+              ])
+            ]),
+            e("aside", ss, [
+              e("div", as, [
+                e("h2", ls, l(a(t)("order.displaySystem.configEditor.livePreview")), 1),
+                e("p", os, l(a(t)("order.displaySystem.configEditor.previewDescription")), 1),
+                B(Ye, { config: o.value }, null, 8, ["config"])
+              ])
+            ])
+          ])
+        ])) : A("", !0)
+      ]);
+    };
+  }
+}), ns = /* @__PURE__ */ me(is, [["__scopeId", "data-v-aea9c4a6"]]), rs = { class: "flex max-h-[calc(100vh-8rem)] w-full max-w-[620px] flex-col rounded-xl bg-white shadow-xl" }, ds = { class: "shrink-0 border-b border-gray-200 px-24 py-16" }, us = { class: "fm-typo-en-title-md-600" }, cs = { class: "mt-2 text-sm text-gray-500" }, ps = { class: "grid min-h-0 gap-16 overflow-y-auto px-24 py-6" }, ys = {
+  key: 0,
+  class: "rounded-lg bg-red-50 px-12 py-8 text-sm text-red-700"
+}, ms = { class: "field-label" }, vs = { class: "field-label" }, fs = ["disabled"], gs = ["disabled"], Ss = { class: "field-label" }, bs = { value: null }, _s = ["value"], hs = { class: "field-label" }, Es = { value: "UNBOUND" }, ws = { value: "ACTIVE" }, ks = { value: "DISABLED" }, Cs = { class: "rounded-lg border border-gray-200 bg-gray-50 p-16" }, xs = { class: "mb-4 font-semibold" }, Ps = { class: "mb-12 text-xs text-gray-500" }, $s = { class: "grid gap-12" }, Us = { class: "field-label" }, Is = ["placeholder"], Vs = { class: "field-label" }, Os = ["placeholder"], Ts = { class: "field-label" }, Ds = ["placeholder"], Bs = { class: "flex shrink-0 justify-end gap-8 border-t border-gray-200 px-24 py-16" }, As = /* @__PURE__ */ pe({
+  __name: "DisplayScreenEditor",
+  props: {
+    modelValue: { type: Boolean },
+    screen: {},
+    configs: {},
+    restaurantId: {},
+    availableModes: {},
+    saving: { type: Boolean }
+  },
+  emits: ["update:modelValue", "save"],
+  setup(r, { emit: n }) {
+    const d = r, h = n, { t } = ye(), p = w(""), o = w("PICKUP"), m = w(null), C = w("UNBOUND"), $ = w(""), V = w(""), O = w(""), U = w(""), K = W(
+      () => d.configs.filter(
+        (g) => {
+          var y;
+          return g.mode === o.value && (!((y = g.restaurantIds) != null && y.length) || g.restaurantIds.includes(d.restaurantId));
+        }
+      )
+    );
+    ne(
+      () => d.modelValue,
+      (g) => {
+        var y, j, k, oe, u, i, f, I, T, F, R, N, Q;
+        g && (p.value = ((y = d.screen) == null ? void 0 : y.name) ?? "", o.value = ((j = d.screen) == null ? void 0 : j.mode) ?? d.availableModes[0] ?? "PICKUP", m.value = ((k = d.screen) == null ? void 0 : k.configId) ?? null, C.value = ((oe = d.screen) == null ? void 0 : oe.status) ?? "UNBOUND", $.value = ((f = (i = (u = d.screen) == null ? void 0 : u.filter) == null ? void 0 : i.slots) == null ? void 0 : f.join(", ")) ?? "", V.value = ((F = (T = (I = d.screen) == null ? void 0 : I.filter) == null ? void 0 : T.departments) == null ? void 0 : F.join(", ")) ?? "", O.value = ((Q = (N = (R = d.screen) == null ? void 0 : R.filter) == null ? void 0 : N.orderSources) == null ? void 0 : Q.join(", ")) ?? "", U.value = "");
+      }
+    ), ne(o, () => {
+      K.value.some((g) => g._id === m.value) || (m.value = null);
+    });
+    function q(g) {
+      const y = g.split(",").map((j) => j.trim()).filter(Boolean);
+      return y.length ? y : void 0;
+    }
+    function E(g) {
+      var y;
+      return ((y = d.screen) == null ? void 0 : y.mode) === g || d.availableModes.includes(g);
+    }
+    function x(g) {
+      const y = g === "PICKUP" ? "Pickup" : "Queue";
+      return E(g) ? y : `${y} · ${t("order.displaySystem.screenEditor.unavailable")}`;
+    }
+    function b() {
+      if (!p.value.trim()) {
+        U.value = t("order.displaySystem.screenEditor.nameRequired");
+        return;
+      }
+      h("save", {
+        name: p.value.trim(),
+        mode: o.value,
+        configId: m.value,
+        status: C.value,
+        filter: {
+          slots: q($.value),
+          departments: q(V.value),
+          orderSources: q(O.value)
+        }
+      });
+    }
+    return (g, y) => {
+      const j = te("FmButton");
+      return v(), ue(be, { to: "body" }, [
+        r.modelValue ? (v(), S("div", {
+          key: 0,
+          class: "fixed inset-0 z-[60] flex items-center justify-center bg-black/40 p-16",
+          onClick: y[8] || (y[8] = Ce((k) => h("update:modelValue", !1), ["self"]))
+        }, [
+          e("section", rs, [
+            e("header", ds, [
+              e("h2", us, l(r.screen ? a(t)("order.displaySystem.screenEditor.editTitle") : a(t)("order.displaySystem.screenEditor.addTitle")), 1),
+              e("p", cs, l(a(t)("order.displaySystem.screenEditor.description")), 1)
+            ]),
+            e("div", ps, [
+              U.value ? (v(), S("p", ys, l(U.value), 1)) : A("", !0),
+              e("label", ms, [
+                e("span", null, l(a(t)("order.displaySystem.screenEditor.name")), 1),
+                P(e("input", {
+                  "onUpdate:modelValue": y[0] || (y[0] = (k) => p.value = k),
+                  class: "field-input"
+                }, null, 512), [
+                  [J, p.value]
+                ])
+              ]),
+              e("label", vs, [
+                e("span", null, l(a(t)("order.displaySystem.screenEditor.mode")), 1),
+                P(e("select", {
+                  "onUpdate:modelValue": y[1] || (y[1] = (k) => o.value = k),
+                  class: "field-input"
+                }, [
+                  e("option", {
+                    value: "PICKUP",
+                    disabled: !E("PICKUP")
+                  }, l(x("PICKUP")), 9, fs),
+                  e("option", {
+                    value: "QUEUE",
+                    disabled: !E("QUEUE")
+                  }, l(x("QUEUE")), 9, gs)
+                ], 512), [
+                  [se, o.value]
+                ])
+              ]),
+              e("label", Ss, [
+                e("span", null, l(a(t)("order.displaySystem.screenEditor.config")), 1),
+                P(e("select", {
+                  "onUpdate:modelValue": y[2] || (y[2] = (k) => m.value = k),
+                  class: "field-input"
+                }, [
+                  e("option", bs, l(a(t)("order.displaySystem.screenEditor.noConfig")), 1),
+                  (v(!0), S(ae, null, re(K.value, (k) => (v(), S("option", {
+                    key: k._id,
+                    value: k._id
+                  }, l(k.label), 9, _s))), 128))
+                ], 512), [
+                  [se, m.value]
+                ])
+              ]),
+              e("label", hs, [
+                e("span", null, l(a(t)("order.displaySystem.screenEditor.status")), 1),
+                P(e("select", {
+                  "onUpdate:modelValue": y[3] || (y[3] = (k) => C.value = k),
+                  class: "field-input"
+                }, [
+                  e("option", Es, l(a(t)("order.displaySystem.status.unbound")), 1),
+                  e("option", ws, l(a(t)("order.displaySystem.status.active")), 1),
+                  e("option", ks, l(a(t)("order.displaySystem.status.disabled")), 1)
+                ], 512), [
+                  [se, C.value]
+                ])
+              ]),
+              e("div", Cs, [
+                e("h3", xs, l(a(t)("order.displaySystem.screenEditor.filters")), 1),
+                e("p", Ps, l(a(t)("order.displaySystem.screenEditor.filtersDescription")), 1),
+                e("div", $s, [
+                  e("label", Us, [
+                    e("span", null, l(a(t)("order.displaySystem.screenEditor.slots")), 1),
+                    P(e("input", {
+                      "onUpdate:modelValue": y[4] || (y[4] = (k) => $.value = k),
+                      class: "field-input",
+                      placeholder: a(t)("order.displaySystem.screenEditor.commaSeparated")
+                    }, null, 8, Is), [
+                      [J, $.value]
+                    ])
+                  ]),
+                  e("label", Vs, [
+                    e("span", null, l(a(t)("order.displaySystem.screenEditor.departments")), 1),
+                    P(e("input", {
+                      "onUpdate:modelValue": y[5] || (y[5] = (k) => V.value = k),
+                      class: "field-input",
+                      placeholder: a(t)("order.displaySystem.screenEditor.commaSeparated")
+                    }, null, 8, Os), [
+                      [J, V.value]
+                    ])
+                  ]),
+                  e("label", Ts, [
+                    e("span", null, l(a(t)("order.displaySystem.screenEditor.orderSources")), 1),
+                    P(e("input", {
+                      "onUpdate:modelValue": y[6] || (y[6] = (k) => O.value = k),
+                      class: "field-input",
+                      placeholder: a(t)("order.displaySystem.screenEditor.commaSeparated")
+                    }, null, 8, Ds), [
+                      [J, O.value]
+                    ])
+                  ])
+                ])
+              ])
+            ]),
+            e("footer", Bs, [
+              B(j, {
+                variant: "secondary",
+                label: a(t)("order.displaySystem.common.cancel"),
+                onClick: y[7] || (y[7] = (k) => h("update:modelValue", !1))
+              }, null, 8, ["label"]),
+              B(j, {
+                label: a(t)("order.displaySystem.common.save"),
+                disabled: r.saving,
+                onClick: b
+              }, null, 8, ["label", "disabled"])
+            ])
+          ])
+        ])) : A("", !0)
+      ]);
+    };
+  }
+}), qs = /* @__PURE__ */ me(As, [["__scopeId", "data-v-ced0680a"]]), Fs = { class: "py-[1.5rem]" }, Rs = { class: "px-[1.5rem]" }, Ns = { class: "display-toolbar" }, Ms = { class: "min-w-0" }, Ls = { class: "text-sm text-gray-500" }, Ks = { class: "display-toolbar__action" }, js = { class: "display-controls" }, Qs = {
+  key: 0,
+  class: "restriction-note"
+}, Ws = {
+  key: 1,
+  class: "mt-12"
+}, zs = {
+  key: 0,
+  class: "flex justify-center py-40"
+}, Gs = {
+  key: 1,
+  class: "empty-state"
+}, Hs = {
+  key: 2,
+  class: "empty-state"
+}, Js = {
+  key: 3,
+  class: "grid grid-cols-1 gap-16 xl:grid-cols-2"
+}, Ys = { class: "flex min-w-0 items-start justify-between gap-12" }, Zs = { class: "min-w-0" }, Xs = { class: "flex flex-wrap items-center gap-8" }, ea = { class: "truncate text-lg font-semibold" }, ta = { class: "mode-badge" }, sa = { class: "mt-4 text-sm text-gray-500" }, aa = { class: "flex gap-4" }, la = { class: "meta-grid" }, oa = {
+  key: 2,
+  class: "mt-12"
+}, ia = {
+  key: 0,
+  class: "flex justify-center py-40"
+}, na = {
+  key: 1,
+  class: "empty-state"
+}, ra = {
+  key: 2,
+  class: "grid grid-cols-1 gap-16 xl:grid-cols-2"
+}, da = { class: "flex items-start justify-between gap-12" }, ua = { class: "min-w-0" }, ca = { class: "flex items-center gap-8" }, pa = { class: "truncate text-lg font-semibold" }, ya = { class: "mode-badge" }, ma = { class: "mt-4 truncate text-sm text-gray-500" }, va = { class: "flex gap-4" }, fa = { class: "meta-grid" }, ga = /* @__PURE__ */ pe({
+  __name: "DisplaySystemView",
+  setup(r) {
+    var H;
+    const { t: n } = ye(), { showError: d, showSuccess: h } = Pe(), t = _e(), p = Me(), o = w("screens"), m = w(((H = t.currentRestaurant.value) == null ? void 0 : H._id) ?? ""), C = w(!1), $ = w(), V = w(!1), O = w(), U = w(!1), K = W(() => [
+      { label: n("order.displaySystem.screens"), value: "screens" },
+      { label: n("order.displaySystem.configurations"), value: "configurations" }
+    ]), q = W(
+      () => t.restaurants.value.map((s) => ({
+        label: s.profile.name,
+        value: s._id
+      }))
+    ), E = W(
+      () => {
+        var s;
+        return (s = t.restaurants.value.find((c) => c._id === m.value)) == null ? void 0 : s.profile.name;
+      }
+    ), x = W(() => {
+      var s;
+      return (s = p.screenCapabilities) != null && s.posV8 ? ["PICKUP", "QUEUE"].filter(
+        (c) => {
+          var D;
+          return (((D = p.screenCapabilities) == null ? void 0 : D.modes[c].remaining) ?? 0) > 0;
+        }
+      ) : [];
+    }), b = W(
+      () => !!m.value && !p.loadingScreenCapabilities && x.value.length > 0
+    ), g = W(() => {
+      if (!m.value || p.loadingScreenCapabilities) return "";
+      const s = p.screenCapabilities;
+      return s ? s.posV8 ? x.value.length ? "" : n("order.displaySystem.screenLimitReached") : s.posVersion ? n("order.displaySystem.posV8RequiredVersion", { version: s.posVersion }) : n("order.displaySystem.posV8Required") : n("order.displaySystem.availabilityUnavailable");
+    });
+    function y(s) {
+      var c;
+      return ((c = p.configs.find((D) => D._id === s)) == null ? void 0 : c.label) ?? n("order.displaySystem.noConfiguration");
+    }
+    function j(s) {
+      var c;
+      return (c = s.restaurantIds) != null && c.length ? s.restaurantIds.map(
+        (D) => {
+          var M;
+          return ((M = t.restaurants.value.find((ve) => ve._id === D)) == null ? void 0 : M.profile.name) ?? D;
+        }
+      ).join(", ") : n("order.displaySystem.allRestaurants");
+    }
+    function k(s) {
+      return s.lastSeenAt ? Date.now() - new Date(s.lastSeenAt).getTime() < 2 * 60 * 1e3 : !1;
+    }
+    async function oe(s) {
+      m.value = s;
+      const c = t.restaurants.value.find((D) => D._id === s);
+      c && await t.changeRestaurant(c), await u();
+    }
+    async function u() {
+      if (m.value)
+        try {
+          await Promise.all([
+            p.loadScreens(m.value),
+            p.loadScreenCapabilities(m.value)
+          ]);
+        } catch (s) {
+          d(s instanceof Error ? s.message : n("order.displaySystem.loadFailed"));
+        }
+    }
+    async function i() {
+      try {
+        await p.loadConfigs();
+      } catch (s) {
+        d(s instanceof Error ? s.message : n("order.displaySystem.loadFailed"));
+      }
+    }
+    async function f() {
+      if (m.value)
+        try {
+          await p.loadScreenCapabilities(m.value);
+        } catch {
+          d(n("order.displaySystem.availabilityUnavailable"));
+        }
+    }
+    function I() {
+      $.value = void 0, C.value = !0;
+    }
+    function T(s) {
+      $.value = s, C.value = !0;
+    }
+    async function F(s) {
+      U.value = !0;
+      try {
+        const c = ge(s);
+        $.value ? await p.updateConfig($.value._id, c) : await p.createConfig(c), C.value = !1, h(n("order.displaySystem.configSaved"));
+      } catch (c) {
+        d(c instanceof Error ? c.message : n("order.displaySystem.saveFailed"));
+      } finally {
+        U.value = !1;
+      }
+    }
+    async function R(s) {
+      try {
+        const c = he(s);
+        c.label = n("order.displaySystem.copyLabel", { label: s.label }), await p.createConfig(ge(c)), h(n("order.displaySystem.configSaved"));
+      } catch (c) {
+        d(c instanceof Error ? c.message : n("order.displaySystem.saveFailed"));
+      }
+    }
+    async function N(s) {
+      if (window.confirm(n("order.displaySystem.deleteConfigConfirm", { label: s.label })))
+        try {
+          await p.deleteConfig(s._id), h(n("order.displaySystem.configDeleted"));
+        } catch (c) {
+          d(c instanceof Error ? c.message : n("order.displaySystem.deleteFailed"));
+        }
+    }
+    function Q() {
+      b.value && (O.value = void 0, V.value = !0);
+    }
+    function Y(s) {
+      O.value = s, V.value = !0;
+    }
+    async function Z(s) {
+      if (m.value) {
+        U.value = !0;
+        try {
+          O.value ? await p.updateScreen(m.value, O.value._id, s) : await p.createScreen(m.value, s), V.value = !1, h(n("order.displaySystem.screenSaved")), await f();
+        } catch (c) {
+          d(c instanceof Error ? c.message : n("order.displaySystem.saveFailed"));
+        } finally {
+          U.value = !1;
+        }
+      }
+    }
+    async function X(s) {
+      if (!(!m.value || !window.confirm(n("order.displaySystem.deleteScreenConfirm", { name: s.name }))))
+        try {
+          await p.deleteScreen(m.value, s._id), h(n("order.displaySystem.screenDeleted")), await f();
+        } catch (c) {
+          d(c instanceof Error ? c.message : n("order.displaySystem.deleteFailed"));
+        }
+    }
+    return xe(async () => {
+      !m.value && t.restaurants.value.length && (m.value = t.restaurants.value[0]._id), await i(), await u();
+    }), ne(
+      () => t.restaurants.value.length,
+      async (s) => {
+        !m.value && s && (m.value = t.restaurants.value[0]._id, await u());
+      }
+    ), (s, c) => {
+      const D = te("FmPageHead"), M = te("FmButton"), ve = te("FmTabs"), Ee = te("FmSelect"), fe = te("FmCircularProgress");
+      return v(), S(ae, null, [
+        e("div", Fs, [
+          B(D, {
+            title: a(n)("order.displaySystem.title")
+          }, null, 8, ["title"]),
+          e("div", Rs, [
+            e("div", Ns, [
+              e("div", Ms, [
+                e("p", Ls, l(a(n)("order.displaySystem.descriptionDetail")), 1)
+              ]),
+              e("div", Ks, [
+                B(M, {
+                  icon: "add",
+                  size: "md",
+                  label: o.value === "screens" ? a(n)("order.displaySystem.addScreen") : a(n)("order.displaySystem.addConfiguration"),
+                  disabled: o.value === "screens" && !b.value,
+                  onClick: c[0] || (c[0] = (_) => o.value === "screens" ? Q() : I())
+                }, null, 8, ["label", "disabled"])
+              ])
+            ]),
+            e("div", js, [
+              B(ve, {
+                "model-value": o.value,
+                "onUpdate:modelValue": c[1] || (c[1] = (_) => o.value = _),
+                items: K.value
+              }, null, 8, ["model-value", "items"]),
+              o.value === "screens" ? (v(), ue(Ee, {
+                key: 0,
+                class: "display-restaurant-select",
+                "model-value": m.value,
+                items: q.value,
+                placeholder: a(n)("order.displaySystem.selectRestaurant"),
+                searchable: "",
+                "onUpdate:modelValue": oe
+              }, null, 8, ["model-value", "items", "placeholder"])) : A("", !0)
+            ]),
+            o.value === "screens" && g.value ? (v(), S("p", Qs, l(g.value), 1)) : A("", !0),
+            o.value === "screens" ? (v(), S("section", Ws, [
+              a(p).loadingScreens ? (v(), S("div", zs, [
+                B(fe, { size: "lg" })
+              ])) : m.value ? a(p).screens.length ? (v(), S("div", Js, [
+                (v(!0), S(ae, null, re(a(p).screens, (_) => (v(), S("article", {
+                  key: _._id,
+                  class: "resource-card"
+                }, [
+                  e("div", Ys, [
+                    e("div", Zs, [
+                      e("div", Xs, [
+                        e("h3", ea, l(_.name), 1),
+                        e("span", ta, l(_.mode), 1),
+                        e("span", {
+                          class: ce(["status-badge", _.status.toLowerCase()])
+                        }, l(a(n)(`order.displaySystem.status.${_.status.toLowerCase()}`)), 3),
+                        _.status === "ACTIVE" ? (v(), S("span", {
+                          key: 0,
+                          class: ce(["online-dot", { online: k(_) }])
+                        }, l(k(_) ? a(n)("order.displaySystem.online") : a(n)("order.displaySystem.offline")), 3)) : A("", !0)
+                      ]),
+                      e("p", sa, l(y(_.configId)), 1)
+                    ]),
+                    e("div", aa, [
+                      B(M, {
+                        icon: "edit",
+                        variant: "plain",
+                        onClick: (de) => Y(_)
+                      }, null, 8, ["onClick"]),
+                      B(M, {
+                        icon: "delete",
+                        variant: "plain",
+                        onClick: (de) => X(_)
+                      }, null, 8, ["onClick"])
+                    ])
+                  ]),
+                  e("dl", la, [
+                    e("div", null, [
+                      e("dt", null, l(a(n)("order.displaySystem.deviceId")), 1),
+                      e("dd", null, l(_.deviceId || "—"), 1)
+                    ]),
+                    e("div", null, [
+                      e("dt", null, l(a(n)("order.displaySystem.lastSeen")), 1),
+                      e("dd", null, l(_.lastSeenAt ? new Date(_.lastSeenAt).toLocaleString() : "—"), 1)
+                    ]),
+                    e("div", null, [
+                      e("dt", null, l(a(n)("order.displaySystem.appVersion")), 1),
+                      e("dd", null, l(_.appVersion || "—"), 1)
+                    ]),
+                    e("div", null, [
+                      e("dt", null, l(a(n)("order.displaySystem.bundleVersion")), 1),
+                      e("dd", null, l(_.bundleVersion || "—"), 1)
+                    ])
+                  ])
+                ]))), 128))
+              ])) : (v(), S("div", Hs, [
+                e("strong", null, l(a(n)("order.displaySystem.noScreens")), 1),
+                e("span", null, l(a(n)("order.displaySystem.noScreensDescription", { restaurant: E.value })), 1)
+              ])) : (v(), S("div", Gs, l(a(n)("order.displaySystem.selectRestaurant")), 1))
+            ])) : (v(), S("section", oa, [
+              a(p).loadingConfigs ? (v(), S("div", ia, [
+                B(fe, { size: "lg" })
+              ])) : a(p).configs.length ? (v(), S("div", ra, [
+                (v(!0), S(ae, null, re(a(p).configs, (_) => (v(), S("article", {
+                  key: _._id,
+                  class: "resource-card"
+                }, [
+                  e("div", da, [
+                    e("div", ua, [
+                      e("div", ca, [
+                        e("h3", pa, l(_.label), 1),
+                        e("span", ya, l(_.mode), 1)
+                      ]),
+                      e("p", ma, l(j(_)), 1)
+                    ]),
+                    e("div", va, [
+                      B(M, {
+                        icon: "edit",
+                        variant: "plain",
+                        onClick: (de) => T(_)
+                      }, null, 8, ["onClick"]),
+                      B(M, {
+                        icon: "content_copy",
+                        variant: "plain",
+                        onClick: (de) => R(_)
+                      }, null, 8, ["onClick"]),
+                      B(M, {
+                        icon: "delete",
+                        variant: "plain",
+                        onClick: (de) => N(_)
+                      }, null, 8, ["onClick"])
+                    ])
+                  ]),
+                  e("dl", fa, [
+                    e("div", null, [
+                      e("dt", null, l(a(n)("order.displaySystem.schemaVersion")), 1),
+                      e("dd", null, "v" + l(_.schemaVersion), 1)
+                    ]),
+                    e("div", null, [
+                      e("dt", null, l(a(n)("order.displaySystem.updatedAt")), 1),
+                      e("dd", null, l(new Date(_.updatedAt).toLocaleString()), 1)
+                    ])
+                  ])
+                ]))), 128))
+              ])) : (v(), S("div", na, [
+                e("strong", null, l(a(n)("order.displaySystem.noConfigurations")), 1),
+                e("span", null, l(a(n)("order.displaySystem.noConfigurationsDescription")), 1)
+              ]))
+            ]))
+          ])
+        ]),
+        B(ns, {
+          modelValue: C.value,
+          "onUpdate:modelValue": c[2] || (c[2] = (_) => C.value = _),
+          config: $.value,
+          restaurants: a(t).restaurants.value,
+          saving: U.value,
+          onSave: F
+        }, null, 8, ["modelValue", "config", "restaurants", "saving"]),
+        m.value ? (v(), ue(qs, {
+          key: 0,
+          modelValue: V.value,
+          "onUpdate:modelValue": c[3] || (c[3] = (_) => V.value = _),
+          screen: O.value,
+          configs: a(p).configs,
+          "restaurant-id": m.value,
+          "available-modes": x.value,
+          saving: U.value,
+          onSave: Z
+        }, null, 8, ["modelValue", "screen", "configs", "restaurant-id", "available-modes", "saving"])) : A("", !0)
+      ], 64);
+    };
+  }
+}), Ca = /* @__PURE__ */ me(ga, [["__scopeId", "data-v-217c144b"]]);
+export {
+  Ca as default
+};