@argusoft/medplat-core 1.0.0

package/dist/AddMenuConfiguration-QWfpcnuP.js

@@ -0,0 +1,2237 @@
+import { jsxs as p, jsx as e, Fragment as Ze } from "react/jsx-runtime";
+import { execute as ve } from "@/common/services/QueryBuilder";
+import { showToast as ie } from "@/common/toaster/toaster";
+import { useDroppable as nt, DndContext as Nt, useDraggable as Mt, DragOverlay as an, rectIntersection as At, closestCenter as sn } from "@dnd-kit/core";
+import { SortableContext as De, verticalListSortingStrategy as Ue, arrayMove as Pe, useSortable as rt } from "@dnd-kit/sortable";
+import { Box as U, Typography as S, FormControl as Ve, InputLabel as ln, Select as cn, MenuItem as Tt, Tooltip as dn, Paper as xe, IconButton as un, Divider as ot, Button as Ge, Switch as Ot, TextField as Qe, InputAdornment as pn, Accordion as Ye, AccordionSummary as Je, AccordionDetails as Xe, Grid2 as fn, Autocomplete as mn } from "@mui/material";
+import v from "@mui/material/Grid2";
+import { Grid as ye, Box as N } from "@mui/system";
+import K, { createContext as hn, useState as k, useCallback as Re, useMemo as Fe, useEffect as Ke } from "react";
+import { useForm as gn } from "react-hook-form";
+import { useSelector as xn } from "react-redux";
+import { useLocation as yn, useNavigate as bn } from "react-router";
+import Sn from "@/views/custom-components/CustomDropdown";
+import m from "prop-types";
+import { FontAwesomeIcon as W } from "@fortawesome/react-fontawesome";
+import { faWifi as Cn, faSignal as In, faBatteryFull as vn, faLocationDot as Rn, faRotate as wn, faBell as En, faCircleUser as An, faChevronDown as _t, faMagnifyingGlass as kt, faTimes as Tn, faTrashCan as On } from "@fortawesome/free-solid-svg-icons";
+import Nn from "@/assets/img/home.svg";
+import Mn from "@/assets/img/programs.svg";
+import _n from "@/assets/img/analytics.svg";
+import kn from "@/assets/img/family-management.svg";
+import { CSS as Fn } from "@dnd-kit/utilities";
+import X from "@/common/fontAwesomeIcons/FontAwesomeIcons";
+import { generateUUID as ge } from "@/utils/UUIDgenerator";
+import Pn from "@/views/custom-components/CustomConfirmationModal";
+import './AddMenuConfiguration.css';const Gn = hn(), Dn = ({ id: o, children: c, componentType: d }) => {
+  const { attributes: b, listeners: E, setNodeRef: u, isDragging: y } = rt({
+    id: o,
+    data: { sortable: !0, type: d }
+  }), R = {
+    opacity: y ? 0.3 : 1
+  };
+  return K.cloneElement(c, {
+    ref: u,
+    style: { ...c.props.style, ...R },
+    dnd: { listeners: E, attributes: b }
+  });
+}, Un = ({ id: o, children: c, componentType: d }) => {
+  const { attributes: b, listeners: E, setNodeRef: u, isDragging: y } = Mt({
+    id: o,
+    data: {
+      type: d,
+      deletable: !0
+    }
+  }), R = {
+    opacity: y ? 0.3 : 1
+  };
+  return K.cloneElement(c, {
+    ref: u,
+    style: { ...c.props.style, ...R },
+    ...E,
+    ...b
+  });
+}, Ft = ({ id: o, children: c, sectionId: d, featureName: b }) => {
+  const { attributes: E, listeners: u, setNodeRef: y, isDragging: R } = rt({
+    id: o,
+    data: {
+      sortable: !0,
+      type: "FEATURE_TILE",
+      sectionId: d,
+      name: b
+    }
+  }), F = {
+    opacity: R ? 0.3 : 1
+  };
+  return K.cloneElement(c, {
+    ref: y,
+    style: { ...c.props.style, ...F },
+    ...E,
+    ...u
+  });
+}, it = K.forwardRef(({ id: o, style: c, handleSectionClick: d, ...b }, E) => /* @__PURE__ */ p(
+  U,
+  {
+    id: o,
+    ref: E,
+    onContextMenu: (y) => {
+      y.preventDefault(), d(o);
+    },
+    sx: {
+      ...c,
+      width: "100%",
+      minHeight: "50px",
+      p: 1.5,
+      border: "1px solid #ccc",
+      borderRadius: "8px",
+      backgroundColor: "#fff",
+      display: "flex",
+      alignItems: "center",
+      mt: 1,
+      boxShadow: "0 1px 3px rgba(0,0,0,0.05)",
+      mb: 3
+    },
+    ...b,
+    children: [
+      /* @__PURE__ */ e(W, { icon: kt, style: { marginRight: "8px", color: "#888" } }),
+      /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { flexGrow: 1 }, children: "Search..." })
+    ]
+  }
+));
+it.displayName = "MobileSearchBar";
+it.propTypes = {
+  id: m.any,
+  style: m.any,
+  handleSectionClick: m.any
+};
+const at = K.forwardRef(
+  ({
+    id: o,
+    arrayIndex: c,
+    sectionTitle: d,
+    handleSectionClick: b,
+    dnd: E,
+    sectionFeatures: u,
+    SvgIconBox: y,
+    onGroupClick: R,
+    activeGroupId: F,
+    ...Q
+  }, ee) => {
+    const { listeners: de, attributes: T } = E || {}, te = (A) => {
+      A.preventDefault(), b(o);
+    }, M = (A) => {
+      A.stopPropagation();
+    }, ne = (A, j) => {
+      A.preventDefault(), A.stopPropagation(), R && R(A, j);
+    }, { setNodeRef: ae, isOver: ue } = nt({
+      id: `section-drop-zone-${o}`,
+      data: {
+        type: "SECTION_DROP_ZONE",
+        sectionId: o
+      }
+    });
+    return /* @__PURE__ */ p(
+      U,
+      {
+        id: o,
+        ref: ee,
+        ...de,
+        ...T,
+        onContextMenu: te,
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          justifyContent: "flex-start",
+          p: 1,
+          border: ue ? "1px dashed #073149" : "0.1px solid #A9BCCD",
+          cursor: "pointer",
+          backgroundColor: "#e6f0ff",
+          borderRadius: "14px",
+          mt: 1
+        },
+        ...Q,
+        children: [
+          /* @__PURE__ */ e(
+            U,
+            {
+              sx: {
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center",
+                width: "100%",
+                mb: 0.5
+              },
+              children: /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "bold", color: "#073149", flexGrow: 1 }, children: d || `Section ${c + 1}` })
+            }
+          ),
+          /* @__PURE__ */ e(
+            U,
+            {
+              ref: ae,
+              sx: {
+                width: "100%",
+                minHeight: "40px",
+                border: `${ue ? "1px dashed #073149" : ""}`,
+                borderRadius: "4px",
+                textAlign: "center",
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: (u == null ? void 0 : u.length) > 0 ? "flex-start" : "center",
+                transition: "background-color 0.1s"
+              },
+              children: (u == null ? void 0 : u.length) > 0 ? /* @__PURE__ */ e(De, { items: u.map((A) => A.instanceId), strategy: Ue, children: /* @__PURE__ */ e(ye, { container: !0, spacing: 1, sx: { width: "100%", m: 0 }, children: u.map((A) => {
+                const j = A.type === "GROUP", be = j && F === A.instanceId;
+                return /* @__PURE__ */ e(
+                  Ft,
+                  {
+                    id: A.instanceId,
+                    sectionId: o,
+                    featureName: A.name,
+                    children: /* @__PURE__ */ e(
+                      ye,
+                      {
+                        item: !0,
+                        xs: 3,
+                        sm: 3,
+                        sx: {
+                          flexBasis: "calc(25% - 8px)",
+                          maxWidth: "calc(25% - 8px)",
+                          flexGrow: 0,
+                          flexShrink: 0,
+                          minWidth: 0
+                        },
+                        children: /* @__PURE__ */ p(
+                          U,
+                          {
+                            onClick: (P) => A.type === "FEATURE" && M(P),
+                            onContextMenu: (P) => A.type === "GROUP" && ne(P, A),
+                            sx: {
+                              display: "flex",
+                              flexDirection: "column",
+                              alignItems: "center",
+                              justifyContent: "flex-start",
+                              p: 0.5,
+                              height: "100%",
+                              backgroundColor: "transparent",
+                              cursor: j ? "pointer" : "grab",
+                              minWidth: 0,
+                              overflow: "hidden",
+                              "&:hover": {
+                                backgroundColor: "#f5f5f5"
+                              }
+                            },
+                            children: [
+                              Ut(
+                                Object.prototype.hasOwnProperty.call(A, "icon") ? A.icon : null,
+                                y
+                              ),
+                              /* @__PURE__ */ e(
+                                S,
+                                {
+                                  variant: "body2",
+                                  sx: {
+                                    mt: 0.5,
+                                    textAlign: "center",
+                                    lineHeight: 1.2,
+                                    width: "100%",
+                                    fontSize: "0.7rem",
+                                    color: "#073149",
+                                    fontWeight: "bold",
+                                    letterSpacing: 0.2,
+                                    whiteSpace: "normal",
+                                    wordBreak: "break-word",
+                                    overflowWrap: "break-word"
+                                  },
+                                  children: Dt(A.name)
+                                }
+                              ),
+                              j && /* @__PURE__ */ e(U, { sx: { ml: 0.5, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(
+                                W,
+                                {
+                                  icon: _t,
+                                  sx: {
+                                    fontSize: "0.7rem",
+                                    color: "#073149",
+                                    transition: "transform 0.2s",
+                                    transform: be ? "rotate(180deg)" : "rotate(0deg)"
+                                  }
+                                }
+                              ) })
+                            ]
+                          }
+                        )
+                      }
+                    )
+                  },
+                  A.instanceId
+                );
+              }) }) }) : /* @__PURE__ */ e(S, { variant: "caption", color: "textSecondary", children: ue ? "Drop Feature Here" : "Drag features here later." })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+at.displayName = "MobileSection";
+at.propTypes = {
+  id: m.any,
+  arrayIndex: m.any,
+  sectionTitle: m.any,
+  handleSectionClick: m.any,
+  dnd: m.any,
+  sectionFeatures: m.any,
+  SvgIconBox: m.any,
+  onGroupClick: m.any,
+  activeGroupId: m.any
+};
+const Pt = ({ feature: o, SvgIconBox: c, handleFeatureClick: d }) => {
+  const { attributes: b, listeners: E, setNodeRef: u, transform: y, transition: R, isDragging: F } = rt({
+    id: o.uuid || o.id
+  }), Q = {
+    transform: Fn.Transform.toString(y),
+    transition: R,
+    zIndex: F ? 2e3 : 1,
+    opacity: F ? 0.8 : 1,
+    boxShadow: F ? "0px 4px 10px rgba(0,0,0,0.1)" : "none"
+  };
+  return /* @__PURE__ */ e(
+    ye,
+    {
+      item: !0,
+      xs: 4,
+      ref: u,
+      style: Q,
+      sx: {
+        flexBasis: "calc(33.3333% - 8px)",
+        maxWidth: "calc(33.3333% - 8px)",
+        flexGrow: 0,
+        flexShrink: 0,
+        minWidth: 0,
+        p: 0.5
+      },
+      children: /* @__PURE__ */ p(
+        U,
+        {
+          onClick: (T) => {
+            T.stopPropagation(), d && d();
+          },
+          ...E,
+          ...b,
+          sx: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "flex-start",
+            p: 0.5,
+            height: "100%",
+            backgroundColor: "transparent",
+            cursor: "grab",
+            minWidth: 0,
+            overflow: "hidden",
+            borderRadius: "8px",
+            "&:hover": {
+              backgroundColor: "#f5f5f5"
+            }
+          },
+          children: [
+            /* @__PURE__ */ e(U, { sx: { mt: 0.5, mb: 0.5, display: "flex", alignItems: "center" }, children: ((T, te) => {
+              let M = null;
+              if (typeof T == "object" && T !== null ? T.type === "svg" && typeof T.content == "string" ? M = T.content : typeof T.svg == "string" && (M = T.svg) : typeof T == "string" ? M = T : typeof o.icon == "object" && o.icon !== null && (M = o.icon.content || o.icon.svg), typeof M == "string" && M.includes("<svg")) {
+                const ne = M.match(/<svg[\s\S]*<\/svg>/i);
+                ne && (M = ne[0]);
+              }
+              return M ? /* @__PURE__ */ e(U, { sx: { height: "24px", width: "24px", display: "flex", justifyContent: "center", alignItems: "center" }, children: /* @__PURE__ */ e(te, { svg: M }) }) : /* @__PURE__ */ e(
+                U,
+                {
+                  sx: {
+                    height: "24px",
+                    width: "24px",
+                    display: "flex",
+                    justifyContent: "center",
+                    alignItems: "center",
+                    color: "#b0bec5",
+                    border: "1px solid",
+                    borderRadius: "4px",
+                    fontSize: "0.8rem"
+                  },
+                  children: "?"
+                }
+              );
+            })(o.icon, c) }),
+            /* @__PURE__ */ e(
+              S,
+              {
+                variant: "body2",
+                sx: {
+                  mt: 0.5,
+                  textAlign: "center",
+                  lineHeight: 1.2,
+                  width: "100%",
+                  fontSize: "0.7rem",
+                  color: "#073149",
+                  fontWeight: "bold",
+                  letterSpacing: 0.2,
+                  whiteSpace: "normal",
+                  wordBreak: "break-word",
+                  overflowWrap: "break-word",
+                  p: "0 4px"
+                },
+                children: o.name
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+};
+Pt.propTypes = {
+  feature: m.any,
+  SvgIconBox: m.any,
+  handleFeatureClick: m.any
+};
+function Gt({
+  tabStatus: o,
+  layoutComponents: c,
+  componentTypes: d,
+  handleSectionClick: b,
+  activeElementId: E,
+  activeTabId: u,
+  handleTabSwitch: y,
+  formList: R,
+  selectedForm: F,
+  onFormSelect: Q,
+  SvgIconBox: ee,
+  setCurrentLayoutComponents: de,
+  programFeatures: T
+}) {
+  const te = "mobile-content", M = u === "programs" ? "PROGRAMS_ROOT_DROP_ZONE" : "LAYOUT_ROOT_DROP_ZONE", { setNodeRef: ne, isOver: ae } = nt({
+    id: te,
+    data: {
+      type: M,
+      sectionId: te
+    }
+  }), A = [
+    { id: "home", label: "Home", icon: Nn, alt: "Home" },
+    { id: "programs", label: "Programs", icon: Mn, alt: "Programs" },
+    { id: "analytics", label: "Analytics", icon: _n, alt: "Analytics" },
+    { id: "familyManagement", label: "Family Management", icon: kn, alt: "Family Management" }
+  ].filter((f) => o[f.id]), j = c.find((f) => f.type === d.SEARCH_BAR), be = c.filter((f) => f.type === d.SECTION), [P, se] = k({
+    anchorEl: null,
+    groupData: null
+  }), $ = Re(
+    (f, G) => {
+      var H;
+      const q = f.currentTarget;
+      ((H = P.groupData) == null ? void 0 : H.instanceId) === G.instanceId ? Se() : se({
+        anchorEl: q,
+        groupData: G
+      });
+    },
+    [P.groupData]
+  ), Se = Re(() => {
+    se({ anchorEl: null, groupData: null });
+  }, []), Be = (f) => {
+    var H;
+    const G = f.type === "GROUP", q = G && ((H = P.groupData) == null ? void 0 : H.instanceId) === f.instanceId;
+    return /* @__PURE__ */ e(
+      Ft,
+      {
+        id: f.instanceId,
+        sectionId: null,
+        featureName: f.name,
+        children: /* @__PURE__ */ e(
+          ye,
+          {
+            item: !0,
+            xs: 4,
+            sm: 4,
+            sx: {
+              flexBasis: "calc(33.3333% - 8px)",
+              maxWidth: "calc(33.3333% - 8px)",
+              flexGrow: 0,
+              flexShrink: 0,
+              minWidth: 0
+            },
+            children: /* @__PURE__ */ p(
+              U,
+              {
+                onClick: (L) => f.type === "FEATURE" && L.stopPropagation(),
+                onContextMenu: (L) => f.type === "GROUP" && $(L, f),
+                sx: {
+                  display: "flex",
+                  flexDirection: "column",
+                  alignItems: "center",
+                  justifyContent: "flex-start",
+                  p: 0.5,
+                  height: "100%",
+                  backgroundColor: "transparent",
+                  cursor: G ? "pointer" : "grab",
+                  minWidth: 0,
+                  overflow: "hidden",
+                  "&:hover": {
+                    backgroundColor: "#f5f5f5"
+                  }
+                },
+                children: [
+                  Ut(Object.prototype.hasOwnProperty.call(f, "icon") ? f.icon : null, ee),
+                  /* @__PURE__ */ e(
+                    S,
+                    {
+                      variant: "body2",
+                      sx: {
+                        mt: 0.5,
+                        textAlign: "center",
+                        lineHeight: 1.2,
+                        width: "100%",
+                        fontSize: "0.7rem",
+                        color: "#073149",
+                        fontWeight: "bold",
+                        letterSpacing: 0.2,
+                        whiteSpace: "normal",
+                        wordBreak: "break-word",
+                        overflowWrap: "break-word"
+                      },
+                      children: Dt(f.name)
+                    }
+                  ),
+                  G && /* @__PURE__ */ e(U, { sx: { ml: 0.5, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ e(
+                    W,
+                    {
+                      icon: _t,
+                      sx: {
+                        fontSize: "0.7rem",
+                        color: "#073149",
+                        transition: "transform 0.2s",
+                        transform: q ? "rotate(180deg)" : "rotate(0deg)"
+                      }
+                    }
+                  ) })
+                ]
+              }
+            )
+          }
+        )
+      },
+      f.instanceId
+    );
+  }, ze = (f) => {
+    const { active: G, over: q } = f;
+    if (!q || G.id === q.id || !P.groupData)
+      return;
+    const H = P.groupData.instanceId;
+    let L = null;
+    de((Ce) => Ce.map((pe) => pe.features ? {
+      ...pe,
+      features: pe.features.map((B) => {
+        if (B.instanceId === H && B.type === "GROUP" && B.menus) {
+          const fe = B.menus.findIndex((Y) => (Y.uuid || Y.instanceId) === G.id), Ie = B.menus.findIndex((Y) => (Y.uuid || Y.instanceId) === q.id);
+          if (fe !== -1 && Ie !== -1) {
+            const Y = Pe(B.menus, fe, Ie);
+            return L = { ...B, menus: Y }, L;
+          }
+        }
+        return B;
+      })
+    } : pe)), L && se((Ce) => ({
+      ...Ce,
+      groupData: L
+    }));
+  }, Ae = () => {
+    Se();
+  }, Te = (f, G) => {
+    var H;
+    const q = f.id === E;
+    return /* @__PURE__ */ e(Dn, { id: f.id, componentType: d.SECTION, isSortable: !0, children: /* @__PURE__ */ e(
+      at,
+      {
+        id: f.id,
+        arrayIndex: G,
+        sectionTitle: f.title,
+        handleSectionClick: b,
+        sectionFeatures: f.features,
+        isActive: q,
+        SvgIconBox: ee,
+        onGroupClick: $,
+        activeGroupId: (H = P.groupData) == null ? void 0 : H.instanceId
+      }
+    ) }, f.id);
+  };
+  return /* @__PURE__ */ p("div", { className: "mobile-screen-v2", id: "mobile-screen", children: [
+    /* @__PURE__ */ p("div", { className: "status-bar-v2", children: [
+      /* @__PURE__ */ e("span", { className: "time-v2", children: "12:16" }),
+      /* @__PURE__ */ e("div", { className: "notch-v2" }),
+      /* @__PURE__ */ p("div", { className: "right-status-icons-v2", children: [
+        /* @__PURE__ */ e("span", { "aria-label": "wifi", children: /* @__PURE__ */ e(W, { icon: Cn }) }),
+        /* @__PURE__ */ e("span", { "aria-label": "signal", children: /* @__PURE__ */ e(W, { icon: In }) }),
+        /* @__PURE__ */ e("span", { "aria-label": "battery", className: "battery-icon", children: /* @__PURE__ */ e(W, { icon: vn }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ p("div", { className: "header-v2", children: [
+      /* @__PURE__ */ p("div", { className: "location-v2", children: [
+        /* @__PURE__ */ e(W, { icon: Rn }),
+        /* @__PURE__ */ e("span", { className: "location-text-v2", children: "પાલડી-કાંકજ" })
+      ] }),
+      /* @__PURE__ */ p("div", { className: "header-actions-v2", children: [
+        /* @__PURE__ */ e("span", { className: "action-icon-v2 rotate-icon", role: "button", "aria-label": "refresh", children: /* @__PURE__ */ e(W, { icon: wn }) }),
+        /* @__PURE__ */ e("span", { className: "action-icon-v2 notification-outline", role: "button", "aria-label": "notifications", children: /* @__PURE__ */ e(W, { icon: En }) }),
+        /* @__PURE__ */ e("span", { className: "action-icon-v2 profile-icon", role: "button", "aria-label": "profile", children: /* @__PURE__ */ e(W, { icon: An }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ e(
+      "div",
+      {
+        className: "content-v2",
+        id: "mobile-content",
+        ref: u !== "familyManagement" ? ne : null,
+        style: {
+          border: u !== "familyManagement" && ae ? "2px dashed #073149" : "none",
+          backgroundColor: u !== "familyManagement" && ae ? "#f0f4f8" : "transparent",
+          minHeight: "300px",
+          maxHeight: "calc(100% - 110px)",
+          overflowY: "auto",
+          padding: "8px",
+          marginTop: u === "programs" ? 20 : 0,
+          marginLeft: u === "programs" ? 3 : 0
+        },
+        children: u === "familyManagement" ? /* @__PURE__ */ p(
+          U,
+          {
+            sx: {
+              p: 2,
+              width: "100%",
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "100%"
+            },
+            children: [
+              /* @__PURE__ */ e(S, { variant: "body1", sx: { mb: 2, fontWeight: "bold" }, children: "Select Form for Family Management" }),
+              /* @__PURE__ */ p(Ve, { fullWidth: !0, sx: { maxWidth: "90%", mb: 2 }, children: [
+                /* @__PURE__ */ e(ln, { id: "form-selector-label", children: "Form Name" }),
+                /* @__PURE__ */ p(
+                  cn,
+                  {
+                    labelId: "form-selector-label",
+                    id: "form-selector",
+                    value: (F == null ? void 0 : F.code) || "",
+                    label: "Form Name",
+                    onChange: Q,
+                    MenuProps: {
+                      PaperProps: {
+                        style: {
+                          maxHeight: 240
+                        }
+                      }
+                    },
+                    children: [
+                      R == null ? void 0 : R.map((f) => /* @__PURE__ */ e(Tt, { value: f.code, children: f.name }, f.code)),
+                      (R == null ? void 0 : R.length) === 0 && /* @__PURE__ */ e(Tt, { disabled: !0, children: "No Forms Available" })
+                    ]
+                  }
+                )
+              ] })
+            ]
+          }
+        ) : u === "programs" ? /* @__PURE__ */ e(Ze, { children: T && T.length > 0 ? /* @__PURE__ */ e(De, { items: T.map((f) => f.instanceId), strategy: Ue, children: /* @__PURE__ */ e(ye, { container: !0, spacing: 1, sx: { width: "100%", m: 0 }, children: T.map((f) => Be(f)) }) }) : /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { mt: 5, textAlign: "center" }, children: ae ? "Drop features here (Groups are not allowed)." : "Drag features directly onto the screen." }) }) : /* @__PURE__ */ p(Ze, { children: [
+          j && /* @__PURE__ */ e(Un, { id: j.id, componentType: d.SEARCH_BAR, children: /* @__PURE__ */ e(
+            it,
+            {
+              id: j.id,
+              style: { marginBottom: "8px" },
+              handleSectionClick: b
+            }
+          ) }),
+          be.map((f, G) => Te(f, G)),
+          c.length === 0 && /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { mt: 5, textAlign: "center" }, children: "Drag components here to build the layout." })
+        ] })
+      }
+    ),
+    P.groupData && P.anchorEl && /* @__PURE__ */ e("div", { onPointerDown: (f) => f.stopPropagation(), children: /* @__PURE__ */ e(Nt, { onDragEnd: ze, children: /* @__PURE__ */ e(
+      Bt,
+      {
+        groupData: P.groupData,
+        anchorEl: P.anchorEl,
+        onClose: Se,
+        SvgIconBox: ee,
+        handleFeatureClick: Ae
+      }
+    ) }) }),
+    /* @__PURE__ */ p("div", { className: "bottom-nav-v2", children: [
+      /* @__PURE__ */ e("div", { className: "nav-bar-v2", children: A.map((f) => /* @__PURE__ */ e(dn, { title: f.label, placement: "bottom", arrow: !0, children: /* @__PURE__ */ e(
+        "div",
+        {
+          className: `nav-item-v2 ${u === f.id ? "active-v2" : ""}`,
+          role: "button",
+          "aria-label": f.label,
+          onClick: () => y(f.id),
+          children: /* @__PURE__ */ e("img", { src: f.icon, alt: f.alt })
+        },
+        f.id
+      ) }, f.id)) }),
+      /* @__PURE__ */ e("div", { className: "home-indicator-v2" })
+    ] })
+  ] });
+}
+Gt.propTypes = {
+  tabStatus: m.any.isRequired,
+  layoutComponents: m.any,
+  componentTypes: m.any,
+  handleSectionClick: m.any,
+  activeElementId: m.any,
+  activeTabId: m.any,
+  handleTabSwitch: m.any,
+  formList: m.any,
+  selectedForm: m.any,
+  onFormSelect: m.any,
+  SvgIconBox: m.any,
+  setCurrentLayoutComponents: m.any,
+  programFeatures: m.any
+};
+const Dt = (o) => {
+  const c = o.split(" ");
+  return c.map((d, b) => /* @__PURE__ */ p(K.Fragment, { children: [
+    d,
+    b < c.length - 1 && /* @__PURE__ */ e("br", {})
+  ] }, b));
+}, Ut = (o, c) => {
+  let d = null;
+  if (typeof o == "object" && o !== null ? o.type === "svg" && typeof o.content == "string" ? d = o.content : typeof o.svg == "string" && (d = o.svg) : typeof o == "string" && (d = o), typeof d == "string" && d.includes("<svg")) {
+    const b = d.match(/<svg[\s\S]*<\/svg>/i);
+    b && (d = b[0]);
+  }
+  return d ? /* @__PURE__ */ e(
+    U,
+    {
+      sx: {
+        height: "36px",
+        width: "36px",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */ e(c, { svg: d })
+    }
+  ) : /* @__PURE__ */ e(
+    U,
+    {
+      sx: {
+        fontSize: "1.2rem",
+        color: "#b0bec5",
+        border: "1px solid",
+        borderRadius: "50%",
+        height: "36px",
+        width: "36px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        marginBottom: "4px"
+      },
+      children: "?"
+    }
+  );
+}, Bt = ({ groupData: o, anchorEl: c, onClose: d, SvgIconBox: b, handleFeatureClick: E }) => {
+  if (!o || !c) return null;
+  const u = o.menus || [], y = c.getBoundingClientRect();
+  return /* @__PURE__ */ p(
+    xe,
+    {
+      elevation: 8,
+      sx: {
+        position: "fixed",
+        top: y.bottom,
+        left: y.left + y.width + 65,
+        minWidth: "320px",
+        maxWidth: "100%",
+        p: 2,
+        borderRadius: "12px",
+        boxShadow: "0 8px 30px rgba(0,0,0,0.25)",
+        backgroundColor: "#f9f9f9",
+        zIndex: 1500,
+        maxHeight: "400px",
+        overflowY: "auto",
+        transform: "translateX(-50%)"
+      },
+      children: [
+        /* @__PURE__ */ p(U, { sx: { display: "flex", justifyContent: "space-between", alignItems: "center", mb: 1 }, children: [
+          /* @__PURE__ */ e(S, { variant: "h6", sx: { color: "#073149", fontWeight: "bold", fontSize: "1rem" }, children: o.name }),
+          /* @__PURE__ */ e(un, { onClick: d, size: "small", sx: { color: "#073149", p: 0.5 }, children: /* @__PURE__ */ e(W, { icon: Tn }) })
+        ] }),
+        /* @__PURE__ */ e(ot, {}),
+        u.length > 0 ? /* @__PURE__ */ e(De, { items: u.map((R) => R.uuid || R.instanceId), strategy: Ue, children: /* @__PURE__ */ e(ye, { container: !0, spacing: 1, children: u.map((R) => /* @__PURE__ */ e(
+          Pt,
+          {
+            feature: R,
+            SvgIconBox: b,
+            handleFeatureClick: E
+          },
+          R.uuid || R.instanceId
+        )) }) }) : /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { fontStyle: "italic", p: 1 }, children: "This menu is empty." })
+      ]
+    }
+  );
+};
+Bt.propTypes = {
+  groupData: m.any,
+  anchorEl: m.any,
+  onClose: m.any,
+  SvgIconBox: m.any,
+  handleFeatureClick: m.any
+};
+function cr() {
+  var ht, gt;
+  const o = yn(), c = o.state, d = Fe(() => new URLSearchParams(o.search), [o.search]), b = bn(), [E, u] = k([]), [y, R] = k(!1), [F, Q] = k([]), [ee, de] = k([]), [T, te] = k({}), [M, ne] = k([]), [ae, ue] = k(!0), [A, j] = k(!0), [be, P] = k(!1), { user: se } = xn((t) => t.Authenticate), $ = gn({
+    defaultValues: {
+      role: "",
+      isAttendanceRequired: !1
+    },
+    mode: "onChange"
+  });
+  Ke(() => {
+    (async () => (await ze(), await Se(), await Be(), d.get("id") && (c != null && c.mobileMenuList) ? (R(!0), $.setValue("role", c.roleId), await Ae(c.roleId)) : R(!1)))();
+  }, []), Ke(() => {
+    var t;
+    if (Object.keys(T).length > 0 && d.get("id") && (c != null && c.mobileMenuList)) {
+      const { appConfiguration: n, tabStatus: r, selectedForm: a, isAttendanceRequired: i } = q(
+        (t = c == null ? void 0 : c.mobileMenuList) == null ? void 0 : t.configJson
+      );
+      J(n), Ie(r), ct(a), $.setValue("isAttendanceRequired", i);
+    }
+  }, [T]);
+  const Se = async () => {
+    const r = (await ve({
+      code: "medplat_form_get_all_form_details",
+      parameters: {}
+    })).data.result.map((a, i) => ({
+      id: a.form_code,
+      name: a.form_name,
+      code: a.form_code,
+      uuid: a.uuid || `temp-uuid-${i}`
+    }));
+    Q(r);
+  }, Be = async () => {
+    const n = (await ve({
+      code: "get_all_mobile_query",
+      parameters: {}
+    })).data.result;
+    de(n);
+  }, ze = async () => {
+    try {
+      const t = (await ve({
+        code: "RETRIEVE_MENU_CONFIG_ROLE_V2"
+      })).data;
+      t.result && u(t.result);
+    } catch (t) {
+      ie({
+        message: t,
+        type: "error"
+      });
+    }
+  }, Ae = async (t) => {
+    if (t)
+      try {
+        const n = (await ve({
+          code: "fetch_linked_menus_by_role_id",
+          parameters: {
+            id: t
+          }
+        })).data;
+        n.result && H(n.result);
+      } catch (n) {
+        ie({
+          message: n,
+          type: "error"
+        });
+      }
+  }, Te = (t, n, r) => {
+    const a = n[t];
+    if (a) return a;
+    const i = r.find((s) => s.type === "GROUP" && s.id === t);
+    return i || null;
+  }, f = (t, n, r, a) => {
+    const i = Te(t.id, r, a);
+    if (!i) return null;
+    const s = ge();
+    if (i.type === "GROUP") {
+      const l = t.menus.map((C) => {
+        const Z = Te(C.id, r, a);
+        return Z ? {
+          ...Z,
+          uuid: ge(),
+          isGroupMember: !0,
+          groupId: t.id
+        } : null;
+      }).filter((C) => C !== null);
+      return l.length === 0 ? null : {
+        ...i,
+        id: s,
+        instanceId: `${n}_GROUP_${s}`,
+        menus: l
+      };
+    } else if (i.type === "FEATURE") {
+      const l = n === "PROGRAMS_ROOT" ? n : `${n}_${i.id}`;
+      return {
+        ...i,
+        id: i.id,
+        uuid: s,
+        instanceId: `${l}_${s}`
+      };
+    }
+    return null;
+  }, G = (t, n, r, a) => {
+    if (!t || !Array.isArray(t)) return [];
+    if (t.every((i) => i.id && !i.type && !i.features)) {
+      const i = n === "programs" ? "PROGRAMS_ROOT" : n;
+      return t.map((s) => f(s, i, r, a)).filter((s) => s !== null);
+    }
+    return t.map((i) => {
+      const s = ge();
+      if (i.type === "SEARCH_BAR")
+        return { ...i, id: s };
+      if (i.type === "SECTION") {
+        const l = `comp-${s}`, C = i.features.map((Z) => f(Z, l, r, a)).filter((Z) => Z !== null);
+        return { type: i.type, title: i.title, id: l, features: C };
+      }
+      return null;
+    }).filter((i) => i !== null);
+  }, q = (t) => {
+    var s;
+    const n = {}, r = {};
+    let a = null;
+    const i = ((s = t == null ? void 0 : t.isAttendanceRequired) == null ? void 0 : s.value) || !1;
+    for (const l in t) {
+      const C = t[l];
+      if (r[l] = C.active, C.active)
+        if (l === "home" && C.layout)
+          n[l] = G(C.layout, l, T, M);
+        else if (l === "programs" && (C != null && C.features)) {
+          const Z = G(C.features, l, T, M);
+          n[l] = {
+            features: Z
+          };
+        } else C != null && C.features ? n[l] = G(C == null ? void 0 : C.features, l, T, M) : l === "familyManagement" && C.formCode && (a = {
+          formName: `Form for ${C.formCode}`,
+          code: C.formCode,
+          formUuid: ge()
+        });
+      else
+        l === "programs" ? n[l] = { features: [] } : n[l] = [];
+    }
+    return {
+      appConfiguration: n,
+      tabStatus: r,
+      selectedForm: a,
+      isAttendanceRequired: i
+    };
+  }, H = (t) => {
+    const n = [], r = {};
+    t.forEach((a) => {
+      const s = JSON.parse(a.menus || "[]").map((l) => {
+        const C = {
+          uuid: ge(),
+          id: l.id ? parseInt(l.id) : null,
+          name: l.name || "",
+          icon: l.icon || "",
+          type: "FEATURE",
+          isGroupMember: a.id != null,
+          groupId: a.id || null
+        };
+        return r[C.id] = C, C;
+      });
+      a.id != null ? n.push({
+        uuid: ge(),
+        id: a.id,
+        name: a.name,
+        icon: a.icon || "",
+        type: "GROUP",
+        menus: s
+      }) : n.push(...s);
+    }), te(r), ne(n);
+  }, L = (t) => {
+    var n, r;
+    if (t.type === "GROUP") {
+      const a = (r = (n = t.menus) == null ? void 0 : n[0]) == null ? void 0 : r.groupId;
+      return a ? {
+        id: a,
+        menus: t.menus.map((i) => ({
+          id: i.id
+        }))
+      } : null;
+    } else if (t.type === "FEATURE")
+      return {
+        id: t.id
+      };
+    return null;
+  }, Ce = (t) => !t || !Array.isArray(t) ? [] : t.map((n) => {
+    if (n.type === "SEARCH_BAR")
+      return {
+        type: n.type,
+        queryName: n.queryName
+      };
+    if (n.type === "SECTION") {
+      const r = n == null ? void 0 : n.features.map(L).filter((a) => a !== null);
+      return {
+        type: n.type,
+        title: n.title,
+        features: r
+      };
+    }
+    return null;
+  }).filter((n) => n !== null), lt = () => {
+    const t = {
+      isAttendanceRequired: { value: $.getValues("isAttendanceRequired") }
+    };
+    return B.forEach((n) => {
+      var s;
+      const r = n.id, a = fe[r], i = {
+        active: a
+      };
+      if (a) {
+        if (r === "familyManagement" && We)
+          i.formCode = We.code;
+        else if (r === "home") {
+          const l = he[r] || [];
+          i.layout = Ce(l);
+        } else if (r === "programs") {
+          const l = ((s = he[r]) == null ? void 0 : s.features) || [];
+          l.length > 0 && (i.features = l.map(L).filter((C) => C !== null));
+        } else if (r !== "analytics") {
+          const l = he[r] || [];
+          Array.isArray(l) && (i.features = l.map(L).filter((C) => C !== null));
+        }
+      }
+      t[r] = i;
+    }), t;
+  }, pe = async (t) => {
+    const n = lt(), r = JSON.stringify(n), a = {
+      roleId: t.role,
+      userId: se == null ? void 0 : se.id,
+      config_json: r
+    };
+    try {
+      (await ve({
+        code: "save_mobile_menu_role_relation",
+        parameters: a
+      })).data.result && (ie({
+        message: "Menu configuration saved successfully",
+        type: "success"
+      }), b("/ui/medplat/admin/mobileMenuManagement"));
+    } catch (i) {
+      ie({
+        message: i,
+        type: "error"
+      });
+    }
+  }, B = [
+    { id: "home", name: "Home" },
+    { id: "programs", name: "Programs" },
+    { id: "analytics", name: "Analytics" },
+    { id: "familyManagement", name: "Family Management" }
+  ], [fe, Ie] = k({
+    home: !0,
+    programs: !0,
+    analytics: !0,
+    familyManagement: !0
+  }), Y = (t) => {
+    Ie((n) => {
+      const r = {
+        ...n,
+        [t]: !n[t]
+      };
+      if (t === z && !r[t]) {
+        const i = B.find((s) => s.id !== t && r[s.id] === !0);
+        i ? Oe(i.id) : r.home ? Oe("home") : Oe(B[0].id);
+      }
+      return r;
+    });
+  }, w = {
+    SEARCH_BAR: "SEARCH_BAR",
+    SECTION: "SECTION",
+    FEATURE: "FEATURE",
+    SECTION_DROP_ZONE: "SECTION_DROP_ZONE",
+    GROUP: "GROUP"
+  }, [We, ct] = k(null), Ht = (t) => {
+    const n = t.target.value, r = F.find((a) => a.code === n);
+    ct(r);
+  }, [me, He] = k(null), [dt, ut] = k(null), [z, Oe] = k("home"), [he, J] = k(() => {
+    const t = {};
+    return B.forEach((n) => {
+      t[n.id] = [];
+    }), t;
+  }), [Le, Lt] = k(""), [jt, $t] = k(null), le = ((ht = he.programs) == null ? void 0 : ht.features) || [], qt = (t) => {
+    $t((n) => n === t ? null : t);
+  }, pt = he[z], re = Array.isArray(pt) ? pt : [], je = Fe(() => {
+    const t = Le.toLowerCase();
+    return M.map((n) => {
+      if (n.type === "GROUP") {
+        const r = n.menus.filter((a) => a.name.toLowerCase().includes(t));
+        return n.name.toLowerCase().includes(t) || r.length > 0 ? { ...n, menus: r } : null;
+      }
+      return n.name.toLowerCase().includes(t) ? n : null;
+    }).filter(Boolean);
+  }, [M, Le]), { separatedGroups: Ne, separatedFeatures: Me } = Fe(() => {
+    const t = je.filter((r) => r.type === "GROUP"), n = je.filter((r) => r.type !== "GROUP");
+    return { separatedGroups: t, separatedFeatures: n };
+  }, [je]), oe = Re(
+    (t) => {
+      J((n) => ({
+        ...n,
+        [z]: typeof t == "function" ? t(n[z] || []) : t
+      }));
+    },
+    [z]
+  ), Zt = Re((t) => {
+    Oe(t);
+  }, []), Vt = (t, n, r) => {
+    oe((a) => a.map((i) => i.id === t ? { ...i, [n]: r } : i));
+  }, Qt = (t) => {
+    He(t.active.id);
+  }, Yt = Re(
+    (t) => {
+      var C, Z, xt, yt, bt, St, Ct, It, vt, Rt, wt, Et;
+      const { active: n, over: r } = t;
+      if (!n || !n.data.current) {
+        He(null);
+        return;
+      }
+      const a = (C = r == null ? void 0 : r.data.current) == null ? void 0 : C.type, i = (Z = r == null ? void 0 : r.data.current) == null ? void 0 : Z.sectionId, s = (xt = n.data.current) == null ? void 0 : xt.sectionId, l = (yt = n.data.current) == null ? void 0 : yt.type;
+      if (He(null), !r && z === "programs" && l === w.FEATURE) {
+        const g = n.data.current.data;
+        if (!g) return;
+        J((h) => {
+          const x = h.programs || {}, I = (x == null ? void 0 : x.features) || [], O = {
+            id: g.id,
+            name: g.name,
+            instanceId: `PROGRAMS_ROOT_${g.id}_${crypto.randomUUID()}`,
+            type: "FEATURE",
+            icon: {
+              id: `svg-icon-${g.id}`,
+              content: g.icon,
+              type: "svg"
+            }
+          };
+          return {
+            ...h,
+            programs: {
+              ...x,
+              features: [...I, O]
+            }
+          };
+        });
+        return;
+      }
+      if ((r == null ? void 0 : r.id) === "trash-zone") {
+        const g = n.id, h = n.data.current.sectionId;
+        l === "FEATURE_TILE" ? h ? oe(
+          (x) => x.map((I) => {
+            if (I.id === h && (I != null && I.features)) {
+              const O = I == null ? void 0 : I.features.filter((_) => _.instanceId !== g);
+              return { ...I, features: O };
+            }
+            return I;
+          })
+        ) : z === "programs" && J((x) => {
+          const I = x.programs || {}, _ = ((I == null ? void 0 : I.features) || []).filter((D) => D.instanceId !== g);
+          return {
+            ...x,
+            programs: {
+              ...I,
+              features: _
+            }
+          };
+        }) : (l === w.SECTION || l === w.SEARCH_BAR) && oe((x) => x.filter((I) => I.id !== n.id));
+        return;
+      }
+      if (l === "FEATURE_TILE" && a === "FEATURE_TILE") {
+        if (!s && z === "programs") {
+          J((g) => {
+            const h = g.programs || {}, x = (h == null ? void 0 : h.features) || [], I = x.findIndex((D) => D.instanceId === n.id), O = x.findIndex((D) => D.instanceId === r.id);
+            if (I === -1 || O === -1)
+              return g;
+            const _ = Pe(x, I, O);
+            return {
+              ...g,
+              programs: {
+                ...h,
+                features: _
+              }
+            };
+          });
+          return;
+        }
+        s === i && n.id !== r.id && oe(
+          (g) => g.map((h) => {
+            if (h.id === s) {
+              const x = h == null ? void 0 : h.features, I = x.findIndex((D) => D.instanceId === n.id), O = x.findIndex((D) => D.instanceId === r.id);
+              if (I === -1 || O === -1) return h;
+              const _ = Pe(x, I, O);
+              return { ...h, features: _ };
+            }
+            return h;
+          })
+        );
+        return;
+      }
+      if (l === w.GROUP && a === w.SECTION_DROP_ZONE) {
+        const g = n.data.current.data, h = (bt = r == null ? void 0 : r.data.current) == null ? void 0 : bt.sectionId;
+        g && h && J((x) => {
+          const I = x[z] || [], O = I.findIndex((ke) => ke.id === h);
+          if (O === -1) return x;
+          const _ = I[O], D = String(g.uuid);
+          if (_ == null ? void 0 : _.features.some((ke) => ke.type === "GROUP" && String(ke.uuid) === D))
+            return ie({
+              type: "warn",
+              message: `Group ${g.name} is already in this section.`
+            }), x;
+          const qe = {
+            id: g.uuid,
+            name: g.name,
+            instanceId: `${h}_GROUP_${g.uuid}_${crypto.randomUUID()}`,
+            type: "GROUP",
+            menus: g.menus || [],
+            icon: g.icon
+          }, _e = {
+            ..._,
+            features: [..._.features, qe]
+          }, ce = [...I];
+          return ce[O] = _e, { ...x, [z]: ce };
+        });
+        return;
+      }
+      if (l === w.FEATURE && a === w.SECTION_DROP_ZONE) {
+        const g = n.data.current.data, h = (St = r == null ? void 0 : r.data.current) == null ? void 0 : St.sectionId;
+        g && h && J((x) => {
+          const I = x[z] || [], O = I.findIndex((ce) => ce.id === h);
+          if (O === -1) return x;
+          const _ = I[O];
+          if (_ == null ? void 0 : _.features.some((ce) => ce.id === g.id && ce.type === "FEATURE"))
+            return ie({
+              type: "warn",
+              message: `Feature ${g.name} is already in this section.`
+            }), x;
+          const V = {
+            id: g.id,
+            name: g.name,
+            instanceId: `${h}_${g.id}_${crypto.randomUUID()}`,
+            type: "FEATURE",
+            icon: {
+              id: `svg-icon-${g.id}`,
+              content: g.icon,
+              type: "svg"
+            }
+          }, qe = {
+            ..._,
+            features: [..._.features, V]
+          }, _e = [...I];
+          return _e[O] = qe, { ...x, [z]: _e };
+        });
+        return;
+      }
+      if (!((Ct = n.data.current) != null && Ct.sortable && !((It = r == null ? void 0 : r.data.current) != null && It.sortable) && (r == null ? void 0 : r.id) === "mobile-content")) {
+        if ((vt = r == null ? void 0 : r.data.current) != null && vt.sortable && ((Rt = n.data.current) == null ? void 0 : Rt.type) === w.SECTION && n.id !== r.id) {
+          oe((g) => {
+            const h = g.find((V) => V.type === w.SEARCH_BAR), x = g.filter((V) => V.type !== w.SEARCH_BAR), I = x.findIndex((V) => V.id === n.id), O = x.findIndex((V) => V.id === r.id);
+            if (I === -1 || O === -1)
+              return g;
+            let D = Pe(x, I, O);
+            return h && (D = [h, ...D]), D;
+          });
+          return;
+        }
+        if ((r == null ? void 0 : r.id) === "mobile-content" && l) {
+          const g = (wt = r.data.current) == null ? void 0 : wt.type;
+          if (g === "PROGRAMS_ROOT_DROP_ZONE") {
+            if (l === w.GROUP) {
+              ie({
+                type: "warn",
+                message: "Groups cannot be dropped directly onto the Programs tab."
+              });
+              return;
+            }
+            if (l === w.FEATURE) {
+              const h = n.data.current.data;
+              if (!h) return;
+              J((x) => ({
+                ...x,
+                programs: {
+                  ...x.programs,
+                  features: [
+                    ...x.programs.features,
+                    {
+                      id: h.id,
+                      name: h.name,
+                      instanceId: `PROGRAMS_ROOT_${h.id}_${crypto.randomUUID()}`,
+                      type: "FEATURE",
+                      icon: {
+                        id: `svg-icon-${h.id}`,
+                        content: h.icon,
+                        type: "svg"
+                      }
+                    }
+                  ]
+                }
+              }));
+              return;
+            }
+          }
+          if ((Et = n.data.current) != null && Et.sortable && g === "LAYOUT_ROOT_DROP_ZONE")
+            return;
+          if (g === "LAYOUT_ROOT_DROP_ZONE") {
+            oe((h) => {
+              if (l === w.SEARCH_BAR)
+                return h.some((O) => O.type === w.SEARCH_BAR) ? (ie({
+                  type: "info",
+                  message: "Only one Search Bar is allowed."
+                }), h) : [{
+                  id: `comp-${Date.now()}`,
+                  type: w.SEARCH_BAR,
+                  queryName: "Query Name"
+                }, ...h];
+              if (l === w.SECTION) {
+                const x = {
+                  id: `comp-${Date.now()}`,
+                  type: l,
+                  title: "Section",
+                  features: []
+                };
+                return [...h, x];
+              }
+              return h;
+            });
+            return;
+          }
+        }
+      }
+    },
+    [oe, J, z, w]
+  ), ft = "350px", Jt = () => /* @__PURE__ */ p(
+    N,
+    {
+      sx: {
+        width: ft,
+        p: 1.5,
+        border: "1px solid #ccc",
+        borderRadius: "8px",
+        backgroundColor: "#fff",
+        display: "flex",
+        alignItems: "center",
+        boxShadow: "0 1px 10px rgba(0,0,0,0.3)"
+      },
+      children: [
+        /* @__PURE__ */ e(W, { icon: kt, style: { marginRight: "8px", color: "#888" } }),
+        /* @__PURE__ */ e(S, { variant: "body2", color: "textSecondary", sx: { flexGrow: 1 }, children: "Search..." })
+      ]
+    }
+  ), Xt = () => /* @__PURE__ */ e(
+    N,
+    {
+      sx: {
+        width: ft,
+        minHeight: "100px",
+        backgroundColor: "#e6f0ff",
+        border: "1px dashed #073149",
+        borderRadius: "4px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        boxShadow: "0 1px 10px rgba(0,0,0,0.3)",
+        color: "#073149"
+      },
+      children: /* @__PURE__ */ e(S, { variant: "caption", sx: { fontWeight: "bold" }, children: "Section Dragging" })
+    }
+  ), $e = ({ feature: t }) => /* @__PURE__ */ e(v, { item: !0, xs: 4, sm: 4, children: /* @__PURE__ */ p(
+    N,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        p: 0.5,
+        height: "100%",
+        backgroundColor: "transparent",
+        cursor: "grab"
+      },
+      children: [
+        Ee(t.icon),
+        /* @__PURE__ */ e(
+          S,
+          {
+            variant: "caption",
+            sx: {
+              mt: 1,
+              textAlign: "center",
+              lineHeight: 1.2,
+              width: "100%",
+              fontSize: "0.65rem"
+            },
+            children: t.name
+          }
+        )
+      ]
+    }
+  ) });
+  $e.propTypes = {
+    feature: m.any
+  };
+  const mt = ({ feature: t }) => /* @__PURE__ */ p(
+    N,
+    {
+      sx: {
+        width: "fit-content",
+        p: "10px",
+        pl: "10px",
+        backgroundColor: "#fff",
+        border: "1px solid #e0e0e0",
+        borderRadius: "4px",
+        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+        cursor: "grab",
+        display: "flex",
+        alignItems: "center",
+        transition: "all 0.1s",
+        mt: "4px",
+        "&:hover": {
+          backgroundColor: "#f5f5f5",
+          borderColor: "#b0bec5"
+        }
+      },
+      children: [
+        ((r, a) => {
+          const i = Ee(t.icon, "18px");
+          return i && i.type === N ? K.cloneElement(i, {
+            sx: {
+              ...i.props.sx,
+              height: "18px",
+              width: "18px",
+              marginRight: "8px"
+            }
+          }) : /* @__PURE__ */ e(N, { sx: { mr: "8px", display: "flex", alignItems: "center" }, children: Ee(r, a) });
+        })(t.icon, "18px"),
+        /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "normal", color: "#333" }, children: t == null ? void 0 : t.name })
+      ]
+    }
+  );
+  mt.propTypes = {
+    feature: m.any
+  };
+  const Kt = (t) => {
+    const r = M.flatMap((s) => s.type === w.GROUP ? [s, ...s.menus] : [s]).find((s) => (s.uuid || s.id) === t);
+    if (r) {
+      let s;
+      return r.type ? s = r.type : r.menus ? s = w.GROUP : s = w.FEATURE, {
+        type: s,
+        data: r
+      };
+    }
+    const a = le == null ? void 0 : le.find((s) => s.instanceId === t);
+    if (a)
+      return { type: "FEATURE_TILE", data: a };
+    const i = re.find((s) => s.id === t);
+    if (i) return { type: i.type, data: i };
+    for (const s of re)
+      if (s != null && s.features) {
+        const l = s == null ? void 0 : s.features.find((C) => C.instanceId === t);
+        if (l)
+          return { type: "FEATURE_TILE", data: l };
+      }
+    return null;
+  }, en = re.find((t) => t.id === dt), tn = (t) => {
+    const n = Kt(t);
+    return n ? n.type === w.SEARCH_BAR ? /* @__PURE__ */ e(Jt, {}) : n.type === w.SECTION ? /* @__PURE__ */ e(Xt, {}) : n.type === w.FEATURE ? /* @__PURE__ */ e(mt, { feature: n.data }) : n.type === w.GROUP ? /* @__PURE__ */ e($e, { feature: n.data }) : n.type === "FEATURE_TILE" ? /* @__PURE__ */ e($e, { feature: n.data }) : null : null;
+  }, nn = Fe(() => {
+    if (!me) return !1;
+    const t = re.some((a) => a.id === me), n = re.some((a) => {
+      var i;
+      return (i = a == null ? void 0 : a.features) == null ? void 0 : i.some((s) => s.instanceId === me);
+    }), r = le == null ? void 0 : le.some((a) => a.instanceId === me);
+    return t || n || r;
+  }, [me, re, le]), rn = re.filter((t) => t.type === w.SECTION).map((t) => t.id), on = (t) => {
+    var r, a;
+    const n = (a = (r = t.active) == null ? void 0 : r.data.current) == null ? void 0 : a.type;
+    if (n === w.FEATURE) {
+      const i = t.droppableContainers.filter(
+        (s) => {
+          var l;
+          return ((l = s.data.current) == null ? void 0 : l.type) === "SECTION_DROP_ZONE";
+        }
+      );
+      return At({
+        ...t,
+        droppableContainers: i
+      });
+    }
+    if (n === w.SECTION) {
+      const i = t.droppableContainers.filter((s) => {
+        var l;
+        return !(s.id === t.active.id || ((l = s.data.current) == null ? void 0 : l.type) === "SECTION_DROP_ZONE");
+      });
+      return At({
+        ...t,
+        droppableContainers: i
+      });
+    }
+    return sn(t);
+  };
+  return /* @__PURE__ */ p(Ze, { children: [
+    /* @__PURE__ */ e(Gn.Provider, { children: /* @__PURE__ */ e("form", { noValidate: !0, onSubmit: $.handleSubmit(pe), children: /* @__PURE__ */ p(
+      Nt,
+      {
+        onDragStart: Qt,
+        onDragEnd: Yt,
+        collisionDetection: on,
+        children: [
+          /* @__PURE__ */ p(v, { container: !0, spacing: 1, children: [
+            /* @__PURE__ */ e(v, { size: 1 }),
+            /* @__PURE__ */ e(v, { size: 6, children: /* @__PURE__ */ p(
+              v,
+              {
+                sx: {
+                  padding: "2px",
+                  margin: "6px 0px"
+                },
+                children: [
+                  /* @__PURE__ */ p(v, { container: !0, sx: { justifyContent: "space-between" }, children: [
+                    /* @__PURE__ */ e(v, { size: 2 }),
+                    /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px", mb: 1 }, children: "Mobile View" }),
+                    /* @__PURE__ */ p(v, { container: !0, spacing: 1, children: [
+                      /* @__PURE__ */ e(
+                        Ge,
+                        {
+                          variant: "contained",
+                          color: "gray",
+                          sx: { fontSize: "0.8rem", height: "30px" },
+                          type: "submit",
+                          onClick: () => {
+                            P(!0);
+                          },
+                          children: "Back"
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        Ge,
+                        {
+                          variant: "contained",
+                          color: "primary",
+                          sx: { fontSize: "0.8rem", height: "30px" },
+                          type: "submit",
+                          children: "Save"
+                        }
+                      )
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ e(v, { sx: { height: "100%", maxHeight: "100%", overflowY: "auto" }, children: /* @__PURE__ */ e(De, { items: rn, strategy: Ue, children: /* @__PURE__ */ e(
+                    Gt,
+                    {
+                      tabStatus: fe,
+                      layoutComponents: re,
+                      componentTypes: w,
+                      handleSectionClick: ut,
+                      activeElementId: dt,
+                      activeTabId: z,
+                      handleTabSwitch: Zt,
+                      formList: F,
+                      selectedForm: We,
+                      onFormSelect: Ht,
+                      SvgIconBox: st,
+                      setCurrentLayoutComponents: oe,
+                      programFeatures: ((gt = he.programs) == null ? void 0 : gt.features) || []
+                    }
+                  ) }) }),
+                  /* @__PURE__ */ e(v, { container: !0, spacing: 2, justifyContent: "space-around", sx: { my: "1.25rem" }, children: B.map((t) => /* @__PURE__ */ e(v, { item: !0, xs: 12, sm: 6, md: 3, children: /* @__PURE__ */ p(v, { container: !0, alignItems: "center", justifyContent: "space-between", children: [
+                    /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "bolder" }, children: t.name }),
+                    /* @__PURE__ */ e(
+                      Ot,
+                      {
+                        checked: fe[t.id],
+                        onChange: () => Y(t.id),
+                        name: t.name,
+                        sx: {
+                          "& .MuiSwitch-switchBase.Mui-checked": {
+                            color: "#073149",
+                            "&:hover": {
+                              backgroundColor: "rgba(7, 49, 73, 0.08)"
+                            }
+                          },
+                          "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": {
+                            backgroundColor: "#073149",
+                            opacity: 0.7
+                          }
+                        }
+                      }
+                    )
+                  ] }) }, t.id)) })
+                ]
+              }
+            ) }),
+            /* @__PURE__ */ e(v, { size: 1 }),
+            /* @__PURE__ */ p(v, { size: 4, children: [
+              /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(xe, { sx: { padding: "2px", margin: "6px 0px" }, children: [
+                /* @__PURE__ */ e(v, { className: "justify-between items-center", container: !0, children: /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px" }, children: "Menu Relation" }) }),
+                /* @__PURE__ */ p(v, { container: !0, children: [
+                  /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(
+                    Ve,
+                    {
+                      variant: "outlined",
+                      className: "ml-3 mb-1 flex flex-row items-center align-items w-[90%]",
+                      children: [
+                        /* @__PURE__ */ p(S, { variant: "body2", children: [
+                          "Select Role",
+                          /* @__PURE__ */ e("span", { className: "text-red-500 ml-1", children: "*" }),
+                          " :"
+                        ] }),
+                        /* @__PURE__ */ e(N, { className: "w-[60%] ms-3", children: /* @__PURE__ */ e(
+                          Sn,
+                          {
+                            control: $.control,
+                            size: "small",
+                            id: "role",
+                            name: "role",
+                            options: E || [],
+                            disabled: y,
+                            displayName: "name",
+                            optionValue: "id",
+                            errors: $.formState.errors,
+                            sx: { height: "50px", mt: 2 },
+                            disableClearable: !!y,
+                            placeholder: "Select role",
+                            onChange: (t) => Ae(t.target.value)
+                          }
+                        ) })
+                      ]
+                    }
+                  ) }),
+                  /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(
+                    Ve,
+                    {
+                      variant: "standard",
+                      className: "ml-3 mb-3 flex flex-row items-center align-items w-[90%]",
+                      children: [
+                        /* @__PURE__ */ e(S, { variant: "body2", children: "Attendance Required? :" }),
+                        /* @__PURE__ */ e(N, { className: "w-[60%] ms-3", children: /* @__PURE__ */ e(
+                          Ot,
+                          {
+                            checked: $.watch("isAttendanceRequired"),
+                            onChange: (t) => $.setValue("isAttendanceRequired", t.target.checked),
+                            sx: {
+                              "& .MuiSwitch-switchBase.Mui-checked": {
+                                color: "#073149",
+                                "&:hover": {
+                                  backgroundColor: "rgba(7, 49, 73, 0.08)"
+                                }
+                              },
+                              "& .MuiSwitch-switchBase.Mui-checked + .MuiSwitch-track": {
+                                backgroundColor: "#073149",
+                                opacity: 0.7
+                              }
+                            }
+                          }
+                        ) })
+                      ]
+                    }
+                  ) })
+                ] })
+              ] }) }),
+              /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(
+                xe,
+                {
+                  sx: {
+                    padding: "5px",
+                    margin: "2px 0px",
+                    height: "595px",
+                    transition: "height 0.3s ease-in-out"
+                  },
+                  children: [
+                    /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px", mb: 1 }, children: "Draggable Components" }),
+                    /* @__PURE__ */ p(v, { container: !0, spacing: 2, justifyContent: "space-around", sx: { p: 1 }, children: [
+                      /* @__PURE__ */ e(we, { id: "draggable-search", componentType: w.SEARCH_BAR, children: /* @__PURE__ */ e(v, { item: !0, xs: 6, sm: 4, size: 6, children: /* @__PURE__ */ p(
+                        N,
+                        {
+                          sx: {
+                            width: "100%",
+                            height: "50px",
+                            p: "8px 10px",
+                            backgroundColor: "#f0f4f8",
+                            border: "1px solid #e0e0e0",
+                            borderRadius: "8px",
+                            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
+                            cursor: "grab",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-start",
+                            color: "#073149",
+                            transition: "all 0.2s ease-in-out",
+                            "&:hover": {
+                              backgroundColor: "#e0eaf1",
+                              borderColor: "#b0bec5",
+                              boxShadow: "0 2px 5px rgba(0, 0, 0, 0.15)"
+                            }
+                          },
+                          children: [
+                            /* @__PURE__ */ e(
+                              X,
+                              {
+                                iconName: "faMagnifyingGlass",
+                                style: { fontSize: "1.2rem", marginRight: "8px" }
+                              }
+                            ),
+                            /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "bold", lineHeight: 1 }, children: "Search Bar" })
+                          ]
+                        }
+                      ) }) }),
+                      /* @__PURE__ */ e(we, { id: "draggable-section", componentType: w.SECTION, children: /* @__PURE__ */ e(v, { item: !0, xs: 6, sm: 4, size: 6, children: /* @__PURE__ */ p(
+                        N,
+                        {
+                          sx: {
+                            width: "100%",
+                            height: "50px",
+                            p: "8px 10px",
+                            backgroundColor: "#f0f4f8",
+                            border: "1px solid #e0e0e0",
+                            borderRadius: "8px",
+                            boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
+                            cursor: "grab",
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "flex-start",
+                            color: "#073149",
+                            transition: "all 0.2s ease-in-out",
+                            "&:hover": {
+                              backgroundColor: "#c5e1ff",
+                              borderColor: "#073149",
+                              boxShadow: "0 2px 5px rgba(0, 0, 0, 0.15)"
+                            }
+                          },
+                          children: [
+                            /* @__PURE__ */ e(X, { iconName: "faBox", style: { fontSize: "1.2rem", marginRight: "8px" } }),
+                            /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "bold", lineHeight: 1 }, children: "Section" })
+                          ]
+                        }
+                      ) }) })
+                    ] }),
+                    /* @__PURE__ */ e(v, { children: /* @__PURE__ */ e(zt, { isDraggingSortable: nn }) }),
+                    /* @__PURE__ */ e(ot, { sx: { mt: 2 } }),
+                    /* @__PURE__ */ e(v, { size: 12, children: /* @__PURE__ */ p(
+                      N,
+                      {
+                        sx: {
+                          padding: "0px",
+                          margin: "10px 0px",
+                          height: "450px",
+                          overflowY: "auto",
+                          transition: "height 0.3s ease-in-out"
+                        },
+                        children: [
+                          /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", marginLeft: "5px", mb: 1 }, children: "Available Features" }),
+                          /* @__PURE__ */ e(
+                            Qe,
+                            {
+                              fullWidth: !0,
+                              size: "small",
+                              placeholder: "Search Feature...",
+                              variant: "outlined",
+                              sx: { mb: 2, px: 1 },
+                              value: Le,
+                              onChange: (t) => Lt(t.target.value),
+                              InputProps: {
+                                startAdornment: /* @__PURE__ */ e(pn, { position: "start", children: /* @__PURE__ */ e(X, { iconName: "faMagnifyingGlass" }) })
+                              }
+                            }
+                          ),
+                          /* @__PURE__ */ e(
+                            N,
+                            {
+                              sx: {
+                                flexGrow: 1,
+                                overflowY: "auto",
+                                padding: "0 8px"
+                              },
+                              children: /* @__PURE__ */ p(v, { container: !0, direction: "column", spacing: 0, sx: { px: 1 }, children: [
+                                Ne.length > 0 && /* @__PURE__ */ e(
+                                  v,
+                                  {
+                                    item: !0,
+                                    xs: 12,
+                                    sx: {
+                                      mb: 1
+                                    },
+                                    children: /* @__PURE__ */ p(
+                                      Ye,
+                                      {
+                                        sx: {
+                                          "&:before": { display: "none" },
+                                          boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
+                                          border: "1px solid #c5e1ff",
+                                          borderRadius: "4px!important",
+                                          backgroundColor: "#fff"
+                                        },
+                                        expanded: ae,
+                                        onChange: () => ue((t) => !t),
+                                        disableGutters: !0,
+                                        children: [
+                                          /* @__PURE__ */ e(
+                                            Je,
+                                            {
+                                              expandIcon: /* @__PURE__ */ e(X, { iconName: "faChevronDown", style: { color: "#3f51b5" } }),
+                                              sx: {
+                                                minHeight: "40px",
+                                                backgroundColor: "#e3f2fd",
+                                                "&:hover": { backgroundColor: "#c5e3f8" },
+                                                "& .MuiAccordionSummary-content": { margin: "0" },
+                                                p: "0 10px"
+                                              },
+                                              children: /* @__PURE__ */ p(S, { variant: "subtitle2", sx: { fontWeight: "bold", color: "#3f51b5" }, children: [
+                                                /* @__PURE__ */ e(X, { iconName: "faLayerGroup", style: { marginRight: "6px" } }),
+                                                "Menu Groups (",
+                                                Ne.length,
+                                                ")"
+                                              ] })
+                                            }
+                                          ),
+                                          /* @__PURE__ */ e(Xe, { sx: { p: "8px", pt: 1, backgroundColor: "#f9f9f9" }, children: /* @__PURE__ */ e(v, { container: !0, spacing: 0.5, direction: "column", children: Ne.map((t) => /* @__PURE__ */ e(
+                                            tt,
+                                            {
+                                              item: t,
+                                              COMPONENT_TYPES: w,
+                                              activeGroupId: jt,
+                                              onGroupToggle: qt
+                                            },
+                                            t.uuid
+                                          )) }) })
+                                        ]
+                                      }
+                                    )
+                                  }
+                                ),
+                                Me.length > 0 && /* @__PURE__ */ e(v, { item: !0, xs: 12, children: /* @__PURE__ */ p(
+                                  Ye,
+                                  {
+                                    sx: {
+                                      mt: 0.5,
+                                      "&:before": { display: "none" },
+                                      boxShadow: "0 2px 4px rgba(0,0,0,0.05)",
+                                      border: "1px solid #c8e6c9",
+                                      mb: 1,
+                                      borderRadius: "4px!important",
+                                      backgroundColor: "#fff"
+                                    },
+                                    expanded: A,
+                                    onChange: () => j((t) => !t),
+                                    disableGutters: !0,
+                                    children: [
+                                      /* @__PURE__ */ e(
+                                        Je,
+                                        {
+                                          expandIcon: /* @__PURE__ */ e(X, { iconName: "faChevronDown", style: { color: "#009688" } }),
+                                          sx: {
+                                            minHeight: "40px",
+                                            backgroundColor: "#e8f5e9",
+                                            "&:hover": { backgroundColor: "#cbe6cc" },
+                                            "& .MuiAccordionSummary-content": { margin: "0" },
+                                            p: "0 10px"
+                                          },
+                                          children: /* @__PURE__ */ p(S, { variant: "subtitle2", sx: { fontWeight: "bold", color: "#009688" }, children: [
+                                            /* @__PURE__ */ e(X, { iconName: "faPuzzlePiece", style: { marginRight: "6px" } }),
+                                            "Standalone Features (",
+                                            Me.length,
+                                            ")"
+                                          ] })
+                                        }
+                                      ),
+                                      /* @__PURE__ */ e(Xe, { sx: { p: "8px", pt: 1, backgroundColor: "#ffffff" }, children: /* @__PURE__ */ e(v, { container: !0, spacing: 0.5, direction: "column", children: Me.map((t) => /* @__PURE__ */ e(
+                                        tt,
+                                        {
+                                          item: t,
+                                          COMPONENT_TYPES: w
+                                        },
+                                        t.uuid
+                                      )) }) })
+                                    ]
+                                  }
+                                ) }),
+                                Ne.length === 0 && Me.length === 0 && /* @__PURE__ */ e(S, { variant: "body2", sx: { p: 2, color: "#9e9e9e", textAlign: "center" }, children: "No groups or features match your search criteria." })
+                              ] })
+                            }
+                          )
+                        ]
+                      }
+                    ) })
+                  ]
+                }
+              ) }),
+              /* @__PURE__ */ e(v, { size: 12, sx: { mt: 1 }, children: /* @__PURE__ */ e(
+                Wt,
+                {
+                  activeComponent: en,
+                  onUpdate: Vt,
+                  onDeselect: () => ut(null),
+                  mobileQueries: ee
+                }
+              ) })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(an, { children: tn(me) })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ e(
+      Pn,
+      {
+        open: be,
+        handleClose: () => {
+          P(!1);
+        },
+        handleClick: () => {
+          b("/ui/medplat/admin/mobileMenuManagement");
+        },
+        title: "Leave Page",
+        description: "Changes you made will be discarded. Do you want to continue?",
+        dataTestId: "delete-auth-confirmation"
+      }
+    )
+  ] });
+}
+function we({ id: o, children: c, componentType: d, dragData: b = null }) {
+  const { attributes: E, listeners: u, setNodeRef: y, transform: R } = Mt({
+    id: o,
+    data: { type: d, ...b && { data: b } }
+  }), F = R ? {
+    transform: `translate3d(${R.x}px, ${R.y}px, 0)`,
+    zIndex: 1e3,
+    opacity: 0.9
+  } : void 0;
+  return K.cloneElement(c, {
+    ref: y,
+    style: { ...c.props.style, ...F },
+    ...u,
+    ...E
+  });
+}
+m.node, m.number.isRequired, m.number.isRequired;
+const zt = ({ isDraggingSortable: o }) => {
+  const { setNodeRef: c, isOver: d } = nt({
+    id: "trash-zone"
+  });
+  return o ? /* @__PURE__ */ p(
+    N,
+    {
+      ref: c,
+      sx: {
+        position: "fixed",
+        bottom: 20,
+        left: "50%",
+        transform: "translateX(-50%)",
+        width: 250,
+        height: 50,
+        p: 2,
+        borderRadius: "8px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: d ? "#d32f2f" : "#ef5350",
+        color: "white",
+        zIndex: 3e3,
+        transition: "background-color 0.2s"
+      },
+      children: [
+        /* @__PURE__ */ e(W, { icon: On, style: { marginRight: "10px" } }),
+        /* @__PURE__ */ e(S, { variant: "body1", children: d ? "Release to Delete" : "Drag Here to Delete" })
+      ]
+    }
+  ) : null;
+};
+zt.propTypes = {
+  isDraggingSortable: m.any
+};
+const Wt = ({ activeComponent: o, onUpdate: c, onDeselect: d, mobileQueries: b }) => {
+  if (!o)
+    return /* @__PURE__ */ p(
+      xe,
+      {
+        sx: {
+          p: 1,
+          backgroundColor: "#f5f5f5",
+          textAlign: "center"
+        },
+        children: [
+          /* @__PURE__ */ e(S, { variant: "subtitle1", sx: { fontWeight: "bold", mb: 1, color: "#073149" }, children: "Component Configuration" }),
+          /* @__PURE__ */ e(ot, { sx: { mb: 1 } }),
+          /* @__PURE__ */ p(S, { variant: "body1", children: [
+            "To add or edit ",
+            /* @__PURE__ */ e("b", { children: "Section Title" }),
+            " or ",
+            /* @__PURE__ */ e("b", { children: "Search Bar Query Name" }),
+            ":"
+          ] }),
+          /* @__PURE__ */ p(N, { sx: { display: "flex", alignItems: "center", justifyContent: "center", mb: 1 }, children: [
+            /* @__PURE__ */ e(S, { variant: "body1", color: "primary", children: "Right-Click" }),
+            /* @__PURE__ */ e(S, { variant: "body1", sx: { ml: 1 }, children: "on the selected component card" })
+          ] }),
+          /* @__PURE__ */ e(S, { variant: "caption", color: "textSecondary", children: "This will open the menu to access the **Configuration Panel**." })
+        ]
+      }
+    );
+  if (o.type === "SEARCH_BAR") {
+    const E = b.map((u) => u.code);
+    if (o.type === "SEARCH_BAR")
+      return /* @__PURE__ */ p(xe, { sx: { p: 2, height: "100%" }, children: [
+        /* @__PURE__ */ e(S, { variant: "h6", sx: { mb: 2 }, children: "Search Bar Configuration" }),
+        /* @__PURE__ */ e(
+          mn,
+          {
+            disablePortal: !0,
+            id: "query-name-autocomplete",
+            options: E,
+            size: "small",
+            fullWidth: !0,
+            sx: { mb: 2 },
+            value: o.queryName || null,
+            onChange: (u, y) => {
+              c(o.id, "queryName", y || "");
+            },
+            renderInput: (u) => /* @__PURE__ */ e(Qe, { ...u, label: "Query Code", variant: "outlined", placeholder: "Select or search query code" })
+          }
+        ),
+        /* @__PURE__ */ e(Ge, { onClick: d, variant: "outlined", color: "gray", children: "Close" })
+      ] });
+  }
+  return o.type === "SECTION" ? /* @__PURE__ */ p(xe, { sx: { p: 2, height: "100%" }, children: [
+    /* @__PURE__ */ e(S, { variant: "h6", sx: { mb: 2 }, children: "Section Configuration" }),
+    /* @__PURE__ */ e(
+      Qe,
+      {
+        label: "Section Title",
+        variant: "outlined",
+        fullWidth: !0,
+        value: o.title || "",
+        onChange: (E) => c(o.id, "title", E.target.value),
+        sx: { mb: 2 }
+      }
+    ),
+    /* @__PURE__ */ e(Ge, { onClick: d, variant: "outlined", color: "gray", children: "Close" })
+  ] }) : null;
+};
+Wt.propTypes = {
+  activeComponent: m.any,
+  onUpdate: m.any,
+  onDeselect: m.any,
+  mobileQueries: m.any
+};
+function st({ svg: o }) {
+  const [c, d] = k("");
+  return Ke(() => {
+    if (o) {
+      const u = new DOMParser().parseFromString(o, "image/svg+xml").documentElement;
+      if (!u.getAttribute("viewBox")) {
+        const F = u.getAttribute("width") || "512", Q = u.getAttribute("height") || "512";
+        u.setAttribute("viewBox", `0 0 ${F} ${Q}`);
+      }
+      u.removeAttribute("width"), u.removeAttribute("height"), u.setAttribute("style", "width: 100%; height: 100%;");
+      const R = new XMLSerializer().serializeToString(u);
+      d(R);
+    }
+  }, [o]), /* @__PURE__ */ e(
+    fn,
+    {
+      size: 2,
+      sx: {
+        alignItems: "center",
+        alignSelf: "center",
+        height: "40px",
+        width: "40px",
+        display: "flex",
+        justifyContent: "center",
+        textAlign: "center",
+        backgroundColor: "",
+        borderRadius: "3%",
+        transition: "background-color 0.3s ease",
+        "&:hover": {
+          backgroundColor: "#e0e0e0",
+          cursor: "pointer"
+        },
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ e("div", { dangerouslySetInnerHTML: { __html: c } })
+    }
+  );
+}
+st.propTypes = {
+  svg: m.string.isRequired
+};
+const Ee = (o, c = "36px") => {
+  let d = null;
+  if (typeof o == "object" && o !== null ? o.type === "svg" && typeof o.content == "string" ? d = o.content : typeof o.svg == "string" && (d = o.svg) : typeof o == "string" && (d = o), typeof d == "string" && d.includes("<svg")) {
+    const b = d.match(/<svg[\s\S]*<\/svg>/i);
+    b && (d = b[0]);
+  }
+  return d ? /* @__PURE__ */ e(
+    N,
+    {
+      sx: {
+        height: c,
+        width: c,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      },
+      children: /* @__PURE__ */ e(st, { svg: d })
+    }
+  ) : /* @__PURE__ */ e(
+    N,
+    {
+      sx: {
+        fontSize: "1.2rem",
+        color: "#b0bec5",
+        border: "1px solid",
+        borderRadius: "50%",
+        height: "36px",
+        width: "36px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        marginBottom: "4px"
+      },
+      children: "?"
+    }
+  );
+}, et = ({ feature: o, isGroupMember: c = !1 }) => /* @__PURE__ */ p(
+  N,
+  {
+    sx: {
+      width: "fit-content",
+      p: "10px",
+      pl: c ? "20px" : "10px",
+      backgroundColor: "#fff",
+      border: "1px solid #e0e0e0",
+      borderRadius: "4px",
+      boxShadow: "0 1px 2px rgba(0, 0, 0, 0.05)",
+      cursor: "grab",
+      display: "flex",
+      alignItems: "center",
+      transition: "all 0.1s",
+      mt: "4px",
+      "&:hover": {
+        backgroundColor: "#f5f5f5",
+        borderColor: "#b0bec5"
+      }
+    },
+    children: [
+      ((b, E) => {
+        const u = Ee(o.icon, "18px");
+        return u && u.type === N ? K.cloneElement(u, {
+          sx: {
+            ...u.props.sx,
+            height: "18px",
+            width: "18px",
+            marginRight: "8px"
+          }
+        }) : /* @__PURE__ */ e(N, { sx: { mr: "8px", display: "flex", alignItems: "center" }, children: Ee(b, E) });
+      })(o.icon, "18px"),
+      /* @__PURE__ */ e(S, { variant: "body2", sx: { fontWeight: "normal", color: "#333" }, children: o == null ? void 0 : o.name })
+    ]
+  }
+);
+et.propTypes = {
+  feature: m.any,
+  isGroupMember: m.any
+};
+const tt = ({ item: o, COMPONENT_TYPES: c, activeGroupId: d, onGroupToggle: b }) => {
+  const E = d === o.uuid, u = (y) => {
+    y.stopPropagation();
+  };
+  return o.type !== "GROUP" ? /* @__PURE__ */ e(we, { id: o.uuid, componentType: c.FEATURE, dragData: o, children: /* @__PURE__ */ e(v, { item: !0, xs: 12, children: /* @__PURE__ */ e(et, { feature: o }) }, o.id) }, o.uuid) : /* @__PURE__ */ p(
+    Ye,
+    {
+      sx: {
+        m: 0,
+        "&:before": { display: "none" },
+        boxShadow: "none",
+        border: "1px solid #e0e0e0",
+        mb: 1,
+        borderRadius: "4px!important"
+      },
+      expanded: E,
+      onChange: () => b(o.uuid),
+      disableGutters: !0,
+      children: [
+        /* @__PURE__ */ e(
+          Je,
+          {
+            expandIcon: /* @__PURE__ */ e(N, { sx: { p: 1 }, onMouseDown: u, onTouchStart: u, children: /* @__PURE__ */ e(
+              X,
+              {
+                iconName: "faChevronDown",
+                style: {
+                  fontSize: "1rem",
+                  color: "#073149",
+                  transform: E ? "rotate(360deg)" : "rotate(0deg)",
+                  transition: "transform 0.2s"
+                }
+              }
+            ) }),
+            sx: {
+              minHeight: "15px",
+              backgroundColor: "#e3f2fd",
+              borderBottom: "1px solid #bbdefb",
+              cursor: "grab",
+              "&:hover": { backgroundColor: "#c5e3f8" },
+              "& .MuiAccordionSummary-content": { margin: "0" },
+              p: "0 10px"
+            },
+            children: /* @__PURE__ */ p(N, { sx: { display: "flex", alignItems: "center", width: "100%" }, children: [
+              /* @__PURE__ */ e(
+                we,
+                {
+                  id: o.uuid,
+                  componentType: c.GROUP,
+                  dragData: o,
+                  children: /* @__PURE__ */ e(
+                    N,
+                    {
+                      component: "span",
+                      sx: { cursor: "grab", mr: 1, px: 0.5, "&:hover": { color: "#007bff" } },
+                      onClick: (y) => y.stopPropagation(),
+                      onMouseDown: (y) => y.stopPropagation(),
+                      onTouchStart: (y) => y.stopPropagation(),
+                      children: /* @__PURE__ */ e(X, { iconName: "faBars", style: { fontSize: "0.8rem", color: "#073149" } })
+                    }
+                  )
+                },
+                `drag-handle-${o.uuid}`
+              ),
+              /* @__PURE__ */ p(S, { variant: "subtitle2", sx: { fontWeight: "bold", color: "#073149", flexGrow: 1 }, children: [
+                o.name,
+                " (",
+                o.menus.length,
+                ")"
+              ] })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ e(Xe, { sx: { p: "8px", pt: 1, backgroundColor: "#f9f9f9" }, children: /* @__PURE__ */ e(v, { container: !0, spacing: 0.5, children: o.menus.map((y) => /* @__PURE__ */ e(
+          we,
+          {
+            id: y.uuid,
+            componentType: c.FEATURE,
+            dragData: y,
+            children: /* @__PURE__ */ e(v, { item: !0, xs: 12, children: /* @__PURE__ */ e(et, { feature: y, isGroupMember: !0 }) }, y.id)
+          },
+          y.uuid
+        )) }) })
+      ]
+    },
+    o.uuid
+  );
+};
+tt.propTypes = {
+  item: m.any,
+  COMPONENT_TYPES: m.any,
+  activeGroupId: m.any,
+  onGroupToggle: m.any
+};
+export {
+  cr as default
+};
+//# sourceMappingURL=AddMenuConfiguration-QWfpcnuP.js.map