@feedmepos/mf-report 5.19.22 → 5.19.23-beta.0

package/dist/{App-BSPCHkXK.js → App-Dl4FEwnr.js}

@@ -1,9 +1,9 @@
-import { defineComponent as ee, resolveComponent as U, createBlock as te, openBlock as h, unref as u, isRef as Ie, withCtx as J, createElementVNode as W, createVNode as z, toDisplayString as H, createTextVNode as he, onMounted as ae, watch as R, ref as k, computed as K, onBeforeMount as Re, onBeforeUnmount as qe, createElementBlock as A, Fragment as Oe } from "vue";
-import { detectLocale as E, useCoreStore as T } from "@feedmepos/mf-common";
-import { u as Le, d as i, a as _e, b as X, c as we, e as be, f as Ce, s as ke, g as Ee } from "./vue-i18n-BQN8HgvD.js";
+import { defineComponent as ee, resolveComponent as U, createBlock as te, openBlock as h, unref as u, isRef as Ie, withCtx as J, createElementVNode as K, createVNode as z, toDisplayString as P, createTextVNode as he, onMounted as ae, watch as R, ref as E, computed as H, onBeforeMount as Re, onBeforeUnmount as qe, createElementBlock as A, Fragment as Oe } from "vue";
+import { detectLocale as k, useCoreStore as T } from "@feedmepos/mf-common";
+import { u as Le, d as i, a as _e, b as X, c as be, e as we, f as Ce, s as Ee, g as ke } from "./vue-i18n-BJW_sJot.js";
 import { storeToRefs as q } from "pinia";
-import { u as Y, a as Ne, b as Be } from "./BaseDialog.vue_vue_type_script_setup_true_lang-g-uxOKsk.js";
-import { _ as Fe, u as $e } from "./NavigationTab.vue_vue_type_script_setup_true_lang-CmW84nrF.js";
+import { u as Y, a as Ne, b as Be } from "./BaseDialog.vue_vue_type_script_setup_true_lang-BMUdA00d.js";
+import { _ as Fe, u as $e } from "./NavigationTab.vue_vue_type_script_setup_true_lang-BRpEu6MW.js";
 import { u as Z } from "./message-dialog-UoMWOnil.js";
 import { useRoute as xe, useRouter as Je } from "vue-router";
 const Ae = { class: "fm-typo-en-body-md-400 text-ellipsis overflow-hidden" }, Te = /* @__PURE__ */ ee({
@@ -19,13 +19,13 @@ const Ae = { class: "fm-typo-en-body-md-400 text-ellipsis overflow-hidden" }, Te
         "close-button": !1
       }, {
         "dialog-header": J(() => [
-          he(H(u(D)), 1)
+          he(P(u(D)), 1)
         ]),
         default: J(() => [
-          W("p", Ae, H(u(S)), 1)
+          K("p", Ae, P(u(S)), 1)
         ]),
         "dialog-footer": J(() => [
-          g[1] || (g[1] = W("div", { class: "grow" }, null, -1)),
+          g[1] || (g[1] = K("div", { class: "grow" }, null, -1)),
           z(_, {
             label: u(r)("report.common.cancel"),
             variant: "tertiary",
@@ -40,7 +40,7 @@ const Ae = { class: "fm-typo-en-body-md-400 text-ellipsis overflow-hidden" }, Te
       }, 8, ["modelValue"]);
     };
   }
-}), M = k(E());
+}), M = E(k());
 function Ue() {
   const O = (r) => {
     switch (M.value = r, r) {
@@ -53,22 +53,22 @@ function Ue() {
     }
   };
   return ae(() => {
-    O(E());
-  }), R(() => E(), O, { deep: !0, immediate: !0 }), {
+    O(k());
+  }), R(() => k(), O, { deep: !0, immediate: !0 }), {
     currentLocale: M
   };
 }
-i.locale(E() === "zh-CN" ? "zh-cn" : "en");
+i.locale(k() === "zh-CN" ? "zh-cn" : "en");
 const ze = ["src"], Qe = ["src"], et = /* @__PURE__ */ ee({
   __name: "App",
   setup(O) {
-    const { businessId: r, token: f, country: l } = q(_e()), { sessionUser: S, currentBusiness: D, currentCountry: L, registerSidebarComponent: g } = T(), { getRestaurantAndWarehouse: _, getBusinessSetting: N, beginBusinessLoad: B, completeBusinessLoad: ne } = X(), { getFeatureFlags: re } = we(), { version: p } = q(Y()), { getSettings: oe } = be(), { promptLoader: se } = Ce(), e = xe(), F = Je(), ie = Y(), { suppressReportRouteSync: w } = q(ie), ue = K(() => `https://portal-v1.feedme.cc/b/${r.value}/report/CLOSE_UP?showHeader=false&country=${l.value.toUpperCase()}&menuOption=business-report&token=${f.value}&v2=true&reportV5Button=true`), le = K(() => `https://report-v4.feedme.cc?businessId=${r.value}&country=${l.value}&token=${f.value}&reportV3Button=true`);
+    const { businessId: r, token: f, country: l } = q(_e()), { sessionUser: S, currentBusiness: D, currentCountry: L, registerSidebarComponent: g } = T(), { getRestaurantAndWarehouse: _, getBusinessSetting: N, beginBusinessLoad: B, completeBusinessLoad: ne } = X(), { getFeatureFlags: re } = be(), { version: p } = q(Y()), { getSettings: oe } = we(), { promptLoader: se } = Ce(), e = xe(), F = Je(), ie = Y(), { suppressReportRouteSync: b } = q(ie), ue = H(() => `https://portal-v1.feedmedev.cc/b/${r.value}/report/CLOSE_UP?showHeader=false&country=${l.value.toUpperCase()}&menuOption=business-report&token=${f.value}&v2=true&reportV5Button=true`), le = H(() => `https://report-v4.feedmedev.cc?businessId=${r.value}&country=${l.value}&token=${f.value}&reportV3Button=true`);
     R(
       [() => D.value, () => S.value, () => L.value],
       () => {
         var t, o;
         const a = ((t = D.value) == null ? void 0 : t.id) ?? "";
-        D.value && S.value && L.value && (ke(l.value), r.value !== a && (r.value = a), f.value = ((o = S.value) == null ? void 0 : o.token) ?? "", l.value = L.value ?? "", e.query.businessId !== r.value && F.replace({
+        D.value && S.value && L.value && (Ee(l.value), r.value !== a && (r.value = a), f.value = ((o = S.value) == null ? void 0 : o.token) ?? "", l.value = L.value ?? "", e.query.businessId !== r.value && F.replace({
           name: e.name,
           params: e.params,
           query: { ...e.query, businessId: r.value }
@@ -85,7 +85,7 @@ const ze = ["src"], Qe = ["src"], et = /* @__PURE__ */ ee({
           console.error(t);
         }
     }
-    function j(a) {
+    function V(a) {
       if (typeof a.data == "string")
         try {
           const t = JSON.parse(a.data);
@@ -99,19 +99,19 @@ const ze = ["src"], Qe = ["src"], et = /* @__PURE__ */ ee({
     }), Re(() => {
       g(Fe);
     }), ae(() => {
-      console.log("5.19.22", !0), window.addEventListener("message", Q), window.addEventListener("message", j);
+      console.log("5.19.23-beta.0", !0), window.addEventListener("message", Q), window.addEventListener("message", V);
     });
-    const I = Ne(), V = $e(), n = X();
+    const I = Ne(), W = $e(), n = X();
     qe(() => {
-      window.removeEventListener("message", Q), window.removeEventListener("message", j), I.$dispose(), V.$dispose();
+      window.removeEventListener("message", Q), window.removeEventListener("message", V), I.$dispose(), W.$dispose();
     });
-    const { getReports: ce, getOverviewReport: de, getReportConfig: G, currentReportId: P } = I, { currentReportId: me, reports: fe } = q(I), { getSchema: pe } = Be(), { fetchSchedules: ge } = V, { init: ve } = Ee(), $ = k("v5"), b = k(!1), x = k(!0);
+    const { getReports: ce, getOverviewReport: de, getReportConfig: j, currentReportId: G } = I, { currentReportId: me, reports: fe } = q(I), { getSchema: pe } = Be(), { fetchSchedules: ge } = W, { init: ve } = ke(), $ = E("v5"), w = E(!1), x = E(!0);
     function ye() {
       const a = e.query.startDate ? i(e.query.startDate).startOf("day").toISOString() : void 0, t = e.query.endDate ? i(e.query.endDate).endOf("day").toISOString() : void 0, o = e.query.timeStart ? JSON.parse(e.query.timeStart) : void 0, c = e.query.timeEnd ? JSON.parse(e.query.timeEnd) : void 0, d = e.query.compareStartDate ? i(e.query.compareStartDate).startOf("day").toISOString() : void 0, v = e.query.compareEndDate ? i(e.query.compareEndDate).endOf("day").toISOString() : void 0, C = e.query.isAllLocation === "true";
       let m = [];
       C ? m = n.selectedLocationIds : m = e.query.locationIds ? JSON.parse(e.query.locationIds) : void 0;
-      let y = e.query.reportId || P;
-      if (fe.value.find((s) => s.id === y) || (y = P), y && y !== I.currentReportId && I.updateCurrentReportId(y), a || t) {
+      let y = e.query.reportId || G;
+      if (fe.value.find((s) => s.id === y) || (y = G), y && y !== I.currentReportId && I.updateCurrentReportId(y), a || t) {
         const s = n.dateRange;
         (s.startDate !== a || s.endDate !== t) && n.setDateRange({ startDate: a, endDate: t });
       }
@@ -146,7 +146,7 @@ const ze = ["src"], Qe = ["src"], et = /* @__PURE__ */ ee({
     return R(
       () => r.value,
       async (a) => {
-        a !== "" && (b.value = !1, B(a), x.value || (n.setSelectedLocationIds([]), F.replace({
+        a !== "" && (w.value = !1, B(a), x.value || (n.setSelectedLocationIds([]), F.replace({
           name: e.name,
           params: e.params,
           query: {
@@ -154,17 +154,17 @@ const ze = ["src"], Qe = ["src"], et = /* @__PURE__ */ ee({
             locationIds: void 0,
             isAllLocation: "true"
           }
-        })), w.value !== void 0 && (w.value = !0), await se(async () => {
+        })), b.value !== void 0 && (b.value = !0), await se(async () => {
           await ve({
-            apiKey: "6GhcttsJ9Rj9cTevcdrpin",
+            apiKey: "MaGoXrEWuEJNpWgKTqseee",
             url: "https://flag.feedme.farm/api/v1/",
             enableAnalytics: !1,
             cacheFlags: !1
           });
-          const t = await G();
+          const t = await j();
           $.value = t.version, p.value = $.value, await Promise.all([
             re(),
-            G(),
+            j(),
             de(),
             ce(),
             pe(),
@@ -174,13 +174,13 @@ const ze = ["src"], Qe = ["src"], et = /* @__PURE__ */ ee({
             ),
             oe()
           ]), await N(), ye(), ne(a);
-        }), b.value = !0, x.value && (x.value = !1));
+        }), w.value = !0, x.value && (x.value = !1));
       },
       {
         immediate: !0
       }
     ), R(
-      () => (b.value, {
+      () => (w.value, {
         reportId: me.value,
         selectedLocationIds: n.selectedLocationIds,
         dateRange: n.dateRange,
@@ -188,9 +188,9 @@ const ze = ["src"], Qe = ["src"], et = /* @__PURE__ */ ee({
         compareDateRange: n.compareDateRange
       }),
       (a) => {
-        if (!b.value || !a.reportId) return;
-        if (w.value) {
-          w.value = !1;
+        if (!w.value || !a.reportId) return;
+        if (b.value) {
+          b.value = !1;
           return;
         }
         const t = a.selectedLocationIds, o = a.dateRange, c = a.timeRange, d = a.compareDateRange, v = {

package/dist/{BaseDialog.vue_vue_type_script_setup_true_lang-g-uxOKsk.js → BaseDialog.vue_vue_type_script_setup_true_lang-BMUdA00d.js}

@@ -1,10 +1,10 @@
-import { a as m0, F as y0, w as g0, b as k0, c as Ae, v as Te, e as Ce, d as h0, r as K0, m as be, u as Fe } from "./vue-i18n-BQN8HgvD.js";
+import { a as m0, F as y0, w as g0, b as k0, c as Ae, v as Te, e as Ce, d as h0, r as K0, m as be, u as Fe } from "./vue-i18n-BJW_sJot.js";
 import { storeToRefs as p0, defineStore as B0 } from "pinia";
 import { ref as o0, computed as C0, watch as U0, h as Ie, defineComponent as se, mergeModels as N0, useModel as z0, resolveComponent as A0, createElementBlock as V0, openBlock as P0, createVNode as S0, withCtx as b0, createElementVNode as E0, createCommentVNode as Me, Fragment as re, renderList as Re, createBlock as le, createTextVNode as _e, withDirectives as xe, toDisplayString as T0, unref as $0, vShow as Le, renderSlot as Oe } from "vue";
 import { useSnackbar as De, components as we } from "@feedmepos/ui-library";
 import { useRouter as ve } from "vue-router";
 import { detectLocale as F0 } from "@feedmepos/mf-common";
-import { c as Pe, a as Be } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-cfshXMB2.js";
+import { c as Pe, a as Be } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-BeBr4VIF.js";
 function de(T) {
   throw new Error('Could not dynamically require "' + T + '". Please configure the dynamicRequireTargets or/and ignoreDynamicRequires option of @rollup/plugin-commonjs appropriately for this require call to work.');
 }

package/dist/{DateRangeSelect.vue_vue_type_script_setup_true_lang-cfshXMB2.js → DateRangeSelect.vue_vue_type_script_setup_true_lang-BeBr4VIF.js}

@@ -1,5 +1,5 @@
 import { defineComponent as V, resolveComponent as S, createBlock as p, openBlock as y, withCtx as I, createCommentVNode as Y, createElementVNode as M, toDisplayString as j, renderSlot as A, mergeModels as $, useModel as R, ref as O, watch as k, createElementBlock as U, createVNode as b, unref as D } from "vue";
-import { d as r, m as B, t as W, u as q, b as G, U as H, C as K } from "./vue-i18n-BQN8HgvD.js";
+import { d as r, m as B, t as W, u as q, b as G, U as H, C as K } from "./vue-i18n-BJW_sJot.js";
 import { detectLocale as z } from "@feedmepos/mf-common";
 import { storeToRefs as L } from "pinia";
 var g = /* @__PURE__ */ ((e) => (e.Year = "YEAR", e.Month = "MONTH", e.Week = "WEEK", e.Day = "DAY", e))(g || {});

package/dist/{Default.vue_vue_type_script_setup_true_lang-CKFgPJYQ.js → Default.vue_vue_type_script_setup_true_lang-B4KGPc-A.js}

@@ -1,8 +1,8 @@
 import { defineComponent as u, computed as f, resolveComponent as p, createElementBlock as s, openBlock as t, normalizeStyle as n, normalizeClass as d, unref as e, createBlock as y, createCommentVNode as _, createVNode as h, createElementVNode as k, toDisplayString as g, renderSlot as x } from "vue";
-import { _ as v } from "./NavigationTab.vue_vue_type_script_setup_true_lang-CmW84nrF.js";
+import { _ as v } from "./NavigationTab.vue_vue_type_script_setup_true_lang-BRpEu6MW.js";
 import { useBreakpoints as b } from "@feedmepos/ui-library";
 import { storeToRefs as C } from "pinia";
-import { u as q, f as w } from "./vue-i18n-BQN8HgvD.js";
+import { u as q, f as w } from "./vue-i18n-BJW_sJot.js";
 import { useRoute as B } from "vue-router";
 const $ = {
   key: 1,

package/dist/{FilterSelector.vue_vue_type_script_setup_true_lang-CaNN2UuW.js → FilterSelector.vue_vue_type_script_setup_true_lang-Bp0VTpqx.js}

@@ -1,12 +1,12 @@
 import { computed as C, defineComponent as Ee, mergeModels as Ue, useModel as Oe, ref as p, onMounted as Je, nextTick as ke, watch as fe, resolveComponent as q, createElementBlock as ee, openBlock as E, Fragment as Ce, renderSlot as Ye, createVNode as O, normalizeStyle as He, unref as s, createElementVNode as U, toDisplayString as ze, withCtx as ae, createBlock as ie, createCommentVNode as Ae, normalizeClass as Xe, h as xt, renderList as Ct, toRaw as va, markRaw as ga, createTextVNode as Rt, onUnmounted as ya, resolveDynamicComponent as ba, withDirectives as wa, vShow as Sa, withModifiers as Tt, isRef as xa } from "vue";
-import { W as M, e as dt, f as Ca, S as lt, v as ut, g as ka, h as Ft, i as Kt, q as Zt, R as et, j as _a, D as Pe, c as he, C as Fe, a as Ta, b as Fa, _ as Da } from "./BaseDialog.vue_vue_type_script_setup_true_lang-g-uxOKsk.js";
-import { u as mt, b as ct, a as It, d as tt, i as La } from "./vue-i18n-BQN8HgvD.js";
-import { d as Yt, _ as Ra, a as Va, b as za, c as Aa } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-cfshXMB2.js";
+import { W as M, e as dt, f as Ca, S as lt, v as ut, g as ka, h as Ft, i as Kt, q as Zt, R as et, j as _a, D as Pe, c as he, C as Fe, a as Ta, b as Fa, _ as Da } from "./BaseDialog.vue_vue_type_script_setup_true_lang-BMUdA00d.js";
+import { u as mt, b as ct, a as It, d as tt, i as La } from "./vue-i18n-BJW_sJot.js";
+import { d as Yt, _ as Ra, a as Va, b as za, c as Aa } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-BeBr4VIF.js";
 import { storeToRefs as $e, defineStore as Qt } from "pinia";
 import { useBreakpoints as ea, useSnackbar as Wt, components as $a } from "@feedmepos/ui-library";
-import { a as Ea } from "./SelectComponent.vue_vue_type_script_setup_true_lang-B2oCOTUH.js";
-import { r as st } from "./i18n-Cif1I9J2.js";
-import { _ as Vt } from "./NoData.vue_vue_type_script_setup_true_lang-BUoYdn5S.js";
+import { a as Ea } from "./SelectComponent.vue_vue_type_script_setup_true_lang-BcQEW5MO.js";
+import { r as st } from "./i18n-DQxDgiLO.js";
+import { _ as Vt } from "./NoData.vue_vue_type_script_setup_true_lang-CtN7oqXx.js";
 import "@feedmepos/mf-common";
 var zt = /* @__PURE__ */ ((e) => (e.line = "LINE", e.bar = "BAR", e))(zt || {}), je = /* @__PURE__ */ ((e) => (e.top = "TOP", e.bottom = "BOTTOM", e))(je || {}), At = /* @__PURE__ */ ((e) => (e.start = "start", e.center = "center", e.end = "end", e))(At || {}), $t = /* @__PURE__ */ ((e) => (e.start = "start", e.center = "center", e.end = "end", e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))($t || {}), Et = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e))(Et || {}), Mt = /* @__PURE__ */ ((e) => (e.right = "right", e.left = "left", e))(Mt || {}), Nt = /* @__PURE__ */ ((e) => (e.top = "top", e.bottom = "bottom", e.right = "right", e.left = "left", e.chartArea = "chartArea", e))(Nt || {});
 M.Circular, M.Table, M.BarChart, M.LineChart, M.StackBarChart, M.StackLineChart, M.Scorecard, M.Spacer;

package/dist/{InsightView-C454vlgZ.js → InsightView-VRhKOgcg.js}

@@ -2,13 +2,13 @@ var Zo = Object.defineProperty;
 var Jo = (i, t, e) => t in i ? Zo(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
 var k = (i, t, e) => Jo(i, typeof t != "symbol" ? t + "" : t, e);
 import { ref as $t, defineComponent as oe, watch as ri, computed as _t, onMounted as Qo, createElementBlock as U, openBlock as I, createElementVNode as R, renderSlot as Un, toDisplayString as lt, resolveDirective as Xn, createCommentVNode as St, Fragment as Ii, renderList as zi, createBlock as Ht, withDirectives as Ge, resolveDynamicComponent as es, unref as G, withCtx as Yt, createVNode as et, normalizeClass as Ze, resolveComponent as Me, useModel as ta, createTextVNode as ea, isRef as ki, nextTick as ia } from "vue";
-import { _ as sa } from "./Default.vue_vue_type_script_setup_true_lang-CKFgPJYQ.js";
-import { _ as na } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-cfshXMB2.js";
-import { d as Bi, a as Kn, q as qn, F as Gn, u as Zn, h as ys, b as oa } from "./vue-i18n-BQN8HgvD.js";
+import { _ as sa } from "./Default.vue_vue_type_script_setup_true_lang-B4KGPc-A.js";
+import { _ as na } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-BeBr4VIF.js";
+import { d as Bi, a as Kn, q as qn, F as Gn, u as Zn, h as ys, b as oa } from "./vue-i18n-BJW_sJot.js";
 import { storeToRefs as Jn } from "pinia";
 import { components as is, useSnackbar as aa } from "@feedmepos/ui-library";
-import { _ as ra } from "./NoData.vue_vue_type_script_setup_true_lang-BUoYdn5S.js";
-import { a as la, G as ca } from "./NavigationTab.vue_vue_type_script_setup_true_lang-CmW84nrF.js";
+import { _ as ra } from "./NoData.vue_vue_type_script_setup_true_lang-CtN7oqXx.js";
+import { a as la, G as ca } from "./NavigationTab.vue_vue_type_script_setup_true_lang-BRpEu6MW.js";
 import { useCoreStore as ha } from "@feedmepos/mf-common";
 function da({ start: i, end: t }) {
   return `${Bi(t).format("DD MMM")}, ${Bi(t).format("YYYY")}`;

package/dist/{Integration-CPVZguLL.js → Integration-BovNO2yX.js}

@@ -1,10 +1,10 @@
 import { defineComponent as J, mergeModels as Se, useModel as te, computed as q, resolveComponent as A, createElementBlock as I, openBlock as w, createElementVNode as t, createCommentVNode as L, normalizeClass as Ne, Fragment as ke, createBlock as j, withCtx as xe, toDisplayString as C, renderList as De, createVNode as l, unref as d, h as k, normalizeStyle as tt, createTextVNode as ot, ref as z, onUnmounted as Ie, watch as Ce, isRef as Ke, resolveDynamicComponent as Te, mergeProps as Qe, onMounted as Ge } from "vue";
 import { useRouter as be, useRoute as at } from "vue-router";
-import { u as oe, I as he, d as Ve, x as lt, A as nt, e as Ae, f as Re, b as we, B as ve, E as st, o as rt, z as Pe, G as Me, H as je, J as Le, K as ze, L as it, M as dt, N as mt, O as qe, c as Ze, P as pt, Q as ut, R as ct, S as ft, T as gt } from "./vue-i18n-BQN8HgvD.js";
+import { u as oe, I as he, d as Ve, x as lt, A as nt, e as Ae, f as Re, b as we, B as ve, E as st, o as rt, z as Pe, G as Me, H as je, J as Le, K as ze, L as it, M as dt, N as mt, O as qe, c as Ze, P as pt, Q as ut, R as ct, S as ft, T as gt } from "./vue-i18n-BJW_sJot.js";
 import { u as Oe } from "./message-dialog-UoMWOnil.js";
 import { useSnackbar as _e } from "@feedmepos/ui-library";
 import { storeToRefs as Ee } from "pinia";
-import { _ as Be } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-cfshXMB2.js";
+import { _ as Be } from "./DateRangeSelect.vue_vue_type_script_setup_true_lang-BeBr4VIF.js";
 const vt = { class: "flex flex-row items-center w-[100%] gap-[4px] justify-between" }, yt = { class: "w-[100%]" }, xt = { class: "text-nowrap w-[100%] overflow-hidden text-ellipsis font-semibold" }, bt = { class: "w-[100%] flex flex-row gap-[4px]" }, wt = { class: "text-nowrap w-[100%] overflow-hidden text-ellipsis font-semibold" }, _t = { class: "text-nowrap w-[100%] overflow-hidden text-ellipsis font-semibold" }, ht = {
   key: 0,
   class: "w-[24px] flex items-center"