injast-core 1.0.82 → 1.0.83

package/dist/index.js

@@ -1530,6 +1530,9 @@ var Tab_default = Tab;
 // src/constants/stepConnectorClasses.ts
 import { stepConnectorClasses as MuiStepConnectorClasses } from "@mui/material";
 
+// src/constants/index.ts
+var APP_LAYOUT_MAX_WIDTH = 550;
+
 // src/components/CounterBoxInput.tsx
 import { useEffect as useEffect3, useMemo, useState as useState3 } from "react";
 import { Add, Minus } from "iconsax-react";
@@ -3225,6 +3228,1132 @@ var MultiSelect = ({
 };
 var MultiSelect_default = MultiSelect;
 
+// src/shared/components/Badge.tsx
+import { jsx as jsx54 } from "react/jsx-runtime";
+var Badge = ({ content, color = "#FACC15", textColor = "#1F2937" }) => {
+  if (content == null) return null;
+  const displayText = typeof content === "number" && content > 99 ? "+99" : String(content);
+  return /* @__PURE__ */ jsx54(
+    Box_default,
+    {
+      sx: {
+        minWidth: 20,
+        height: 20,
+        px: "6px",
+        borderRadius: "999px",
+        bgcolor: color,
+        color: textColor,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontFamily: '"IRANYekanXFaNum", "IRANYekanX", sans-serif',
+        fontSize: 12,
+        fontWeight: 700,
+        lineHeight: 1,
+        flexShrink: 0
+      },
+      children: displayText
+    }
+  );
+};
+var Badge_default = Badge;
+
+// src/shared/components/SidebarRow.tsx
+import { ArrowDown2 as ArrowDown22, Notification, Setting2 } from "iconsax-reactjs";
+import { Fragment as Fragment5, jsx as jsx55, jsxs as jsxs10 } from "react/jsx-runtime";
+var SidebarDot = ({
+  collapsed,
+  disabled = false
+}) => /* @__PURE__ */ jsx55(
+  Box_default,
+  {
+    sx: {
+      width: collapsed ? 10 : 4,
+      height: collapsed ? 10 : 4,
+      borderRadius: "50%",
+      bgcolor: disabled ? "rgba(255,255,255,0.30)" : "#FFFFFFE6",
+      flexShrink: 0
+    }
+  }
+);
+var SidebarItemIcon = ({
+  icon,
+  color = "white"
+}) => {
+  const IconComponent = icon === "notification" ? Notification : Setting2;
+  return /* @__PURE__ */ jsx55(IconComponent, { size: 20, color, variant: "Linear" });
+};
+var SidebarRow = ({
+  active = false,
+  badgeColor = "#FACC15",
+  badgeTextColor,
+  badgeContent,
+  child = false,
+  collapsed,
+  disabled = false,
+  expanded = false,
+  hasChildren = false,
+  icon,
+  onClick,
+  title
+}) => {
+  const resolvedIcon = icon;
+  const disabledColor = "rgba(255,255,255,0.38)";
+  const itemColor = disabled ? disabledColor : "white";
+  const rowHeight = child ? "40px" : "48px";
+  return /* @__PURE__ */ jsx55(
+    Box_default,
+    {
+      component: "button",
+      onClick: disabled ? void 0 : onClick,
+      sx: {
+        width: "100%",
+        height: rowHeight,
+        minHeight: rowHeight,
+        boxSizing: "border-box",
+        border: 0,
+        outline: "none",
+        appearance: "none",
+        WebkitTapHighlightColor: "transparent",
+        borderRadius: "8px",
+        bgcolor: active && !disabled ? "rgba(255,255,255,0.10)" : "transparent",
+        color: itemColor,
+        display: "flex",
+        alignItems: "center",
+        justifyContent: collapsed ? "center" : "space-between",
+        p: 0,
+        cursor: disabled ? "not-allowed" : "pointer",
+        transition: "background-color 0.2s ease",
+        fontWeight: 400,
+        "&:hover": {
+          bgcolor: disabled ? "transparent" : active ? "rgba(255,255,255,0.10)" : "rgba(255,255,255,0.06)",
+          fontWeight: 400
+        },
+        "&:disabled": {
+          color: disabledColor
+        },
+        "&:focus": {
+          outline: "none"
+        },
+        "&:focus-visible": {
+          outline: "none"
+        }
+      },
+      children: collapsed ? /* @__PURE__ */ jsxs10(
+        Box_default,
+        {
+          sx: {
+            position: "relative",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: [
+            resolvedIcon ? /* @__PURE__ */ jsx55(SidebarItemIcon, { icon: resolvedIcon, color: itemColor }) : null,
+            badgeContent != null && !disabled ? /* @__PURE__ */ jsx55(
+              Box_default,
+              {
+                sx: {
+                  position: "absolute",
+                  top: -10,
+                  insetInlineEnd: -14
+                },
+                children: /* @__PURE__ */ jsx55(Badge_default, { content: badgeContent, color: badgeColor, textColor: badgeTextColor })
+              }
+            ) : null
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs10(Fragment5, { children: [
+        /* @__PURE__ */ jsxs10(
+          Box_default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: child ? "8px" : "12px",
+              minWidth: 0,
+              paddingInlineEnd: child ? "16px" : "12px",
+              paddingInlineStart: child ? "32px" : "12px"
+            },
+            children: [
+              resolvedIcon ? /* @__PURE__ */ jsx55(SidebarItemIcon, { icon: resolvedIcon, color: itemColor }) : child ? /* @__PURE__ */ jsx55(SidebarDot, { collapsed, disabled }) : null,
+              /* @__PURE__ */ jsx55(
+                Typography_default,
+                {
+                  fontSize: 14,
+                  sx: {
+                    color: itemColor,
+                    fontWeight: active && !disabled ? 500 : 400,
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis"
+                  },
+                  children: title
+                }
+              )
+            ]
+          }
+        ),
+        hasChildren || badgeContent != null ? /* @__PURE__ */ jsxs10(
+          Box_default,
+          {
+            sx: {
+              marginInlineStart: "12px",
+              marginInlineEnd: "12px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "8px",
+              flexShrink: 0
+            },
+            children: [
+              badgeContent != null && !disabled ? /* @__PURE__ */ jsx55(Badge_default, { content: badgeContent, color: badgeColor, textColor: badgeTextColor }) : null,
+              hasChildren ? /* @__PURE__ */ jsx55(
+                ArrowDown22,
+                {
+                  size: 16,
+                  color: itemColor,
+                  variant: "Linear",
+                  style: {
+                    transition: "transform 0.2s ease",
+                    transform: expanded ? "rotate(180deg)" : "rotate(0deg)"
+                  }
+                }
+              ) : null
+            ]
+          }
+        ) : null
+      ] })
+    }
+  );
+};
+var SidebarRow_default = SidebarRow;
+
+// src/shared/components/TemplateDashboardSidebar.tsx
+import { useState as useState8 } from "react";
+import { ArrowLeft, ArrowRight } from "iconsax-reactjs";
+import { jsx as jsx56, jsxs as jsxs11 } from "react/jsx-runtime";
+var templateDashboardSidebarWidths = {
+  expanded: 220,
+  collapsed: 76
+};
+var TemplateDashboardSidebar = ({
+  activeItemId,
+  badgeColor = "#FACC15",
+  badgeTextColor,
+  buttonColor = "#0F8DDC",
+  collapsed = false,
+  items = [],
+  logo,
+  logoCollapsed,
+  onItemClick,
+  onToggleCollapse,
+  sidebarColor,
+  title = "\u062A\u0646\u0638\u06CC\u0645\u0627\u062A"
+}) => {
+  const resolvedItems = items.length > 0 ? items : [
+    {
+      id: "settings",
+      title,
+      icon: "settings"
+    }
+  ];
+  const [expandedItemIds, setExpandedItemIds] = useState8(
+    resolvedItems.length > 0 ? [resolvedItems[0].id] : []
+  );
+  const handleParentClick = (item) => {
+    if (item.disabled) return;
+    if (!item.children?.length) {
+      onItemClick?.(item);
+      return;
+    }
+    setExpandedItemIds(
+      (prev) => prev.includes(item.id) ? prev.filter((id) => id !== item.id) : [...prev, item.id]
+    );
+  };
+  return /* @__PURE__ */ jsxs11(
+    Box_default,
+    {
+      component: "aside",
+      sx: {
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        background: sidebarColor ?? "var(--Blue-primary, #0661A2)",
+        color: "white",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "visible",
+        px: collapsed ? 0.8 : 1.05,
+        pt: logo || logoCollapsed ? 0 : "64px",
+        pb: 1.7
+      },
+      children: [
+        logo || logoCollapsed ? /* @__PURE__ */ jsx56(
+          Box_default,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: collapsed ? "center" : "flex-start",
+              px: collapsed ? 0 : 1.5,
+              py: 2,
+              minHeight: collapsed ? 56 : 80,
+              overflow: "hidden",
+              flexShrink: 0
+            },
+            children: collapsed && logoCollapsed ? logoCollapsed : logo
+          }
+        ) : null,
+        /* @__PURE__ */ jsx56(
+          Box_default,
+          {
+            component: "nav",
+            sx: {
+              display: "flex",
+              flexDirection: "column",
+              gap: "4px",
+              minHeight: 0,
+              overflowY: "auto",
+              "&::-webkit-scrollbar": {
+                width: 6
+              },
+              "&::-webkit-scrollbar-thumb": {
+                bgcolor: "#73A8CF",
+                borderRadius: 999
+              }
+            },
+            children: resolvedItems.map((item) => {
+              const hasChildren = Boolean(item.children?.length);
+              const isExpanded = expandedItemIds.includes(item.id);
+              return /* @__PURE__ */ jsxs11(Box_default, { children: [
+                /* @__PURE__ */ jsx56(
+                  SidebarRow_default,
+                  {
+                    title: item.title,
+                    icon: item.icon,
+                    badgeColor,
+                    badgeTextColor,
+                    badgeContent: hasChildren && isExpanded && !collapsed ? void 0 : item.badgeContent,
+                    disabled: item.disabled,
+                    collapsed,
+                    hasChildren,
+                    expanded: isExpanded,
+                    active: item.id === activeItemId,
+                    onClick: () => handleParentClick(item)
+                  }
+                ),
+                hasChildren ? /* @__PURE__ */ jsx56(
+                  Box_default,
+                  {
+                    sx: {
+                      overflow: "hidden",
+                      maxHeight: !collapsed && isExpanded ? "500px" : 0,
+                      opacity: !collapsed && isExpanded ? 1 : 0,
+                      visibility: !collapsed && isExpanded ? "visible" : "hidden",
+                      transition: "max-height 200ms ease, opacity 120ms ease, visibility 0s linear 200ms"
+                    },
+                    children: /* @__PURE__ */ jsx56(
+                      Box_default,
+                      {
+                        sx: {
+                          display: "flex",
+                          flexDirection: "column",
+                          gap: !collapsed && isExpanded ? "4px" : 0,
+                          pt: !collapsed && isExpanded ? "4px" : 0
+                        },
+                        children: item.children?.map((child) => /* @__PURE__ */ jsx56(
+                          Box_default,
+                          {
+                            sx: {
+                              boxSizing: "border-box"
+                            },
+                            children: /* @__PURE__ */ jsx56(
+                              SidebarRow_default,
+                              {
+                                title: child.title,
+                                icon: child.icon,
+                                badgeColor,
+                                badgeTextColor,
+                                badgeContent: child.badgeContent,
+                                disabled: child.disabled,
+                                collapsed: false,
+                                child: true,
+                                active: child.id === activeItemId,
+                                onClick: () => onItemClick?.({
+                                  id: child.id,
+                                  title: child.title,
+                                  icon: child.icon,
+                                  badgeContent: child.badgeContent,
+                                  disabled: child.disabled
+                                })
+                              }
+                            )
+                          },
+                          child.id
+                        ))
+                      }
+                    )
+                  }
+                ) : null
+              ] }, item.id);
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx56(
+          IconButton_default,
+          {
+            "aria-label": collapsed ? "\u0628\u0627\u0632 \u06A9\u0631\u062F\u0646 \u0633\u0627\u06CC\u062F\u0628\u0627\u0631" : "\u0628\u0633\u062A\u0646 \u0633\u0627\u06CC\u062F\u0628\u0627\u0631",
+            onClick: onToggleCollapse,
+            sx: {
+              position: "absolute",
+              insetInlineEnd: "-16px",
+              top: "16px",
+              width: "34px",
+              height: "34px",
+              minWidth: "34px",
+              borderRadius: "8px",
+              bgcolor: "#FFFFFF",
+              border: "1px solid #D8E0EA",
+              p: 0,
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              boxSizing: "border-box",
+              zIndex: 10,
+              "&:hover": {
+                bgcolor: "#FFFFFF"
+              }
+            },
+            children: collapsed ? /* @__PURE__ */ jsx56(ArrowLeft, { size: 20, color: buttonColor }) : /* @__PURE__ */ jsx56(ArrowRight, { size: 20, color: buttonColor })
+          }
+        )
+      ]
+    }
+  );
+};
+var TemplateDashboardSidebar_default = TemplateDashboardSidebar;
+
+// src/shared/components/template-dashboard/TemplateDashboard.tsx
+import { useState as useState9 } from "react";
+import { jsx as jsx57, jsxs as jsxs12 } from "react/jsx-runtime";
+function TemplateDashboard({
+  sidebarTitle,
+  sidebarItems,
+  sidebarActiveItemId,
+  sidebarExpandedItemId,
+  sidebarColor,
+  badgeColor,
+  badgeTextColor,
+  buttonColor,
+  sidebarLogo,
+  sidebarLogoCollapsed,
+  onSidebarItemClick,
+  header,
+  pageHeader,
+  children
+}) {
+  const [collapsed, setCollapsed] = useState9(false);
+  const sidebarWidth = collapsed ? templateDashboardSidebarWidths.collapsed : templateDashboardSidebarWidths.expanded;
+  return /* @__PURE__ */ jsxs12(Box_default, { sx: { height: "100%", display: "flex", direction: "ltr" }, children: [
+    /* @__PURE__ */ jsx57(
+      Box_default,
+      {
+        sx: {
+          height: "100%",
+          width: sidebarWidth,
+          flexShrink: 0,
+          transition: "width 0.2s ease"
+        },
+        children: /* @__PURE__ */ jsx57(
+          TemplateDashboardSidebar_default,
+          {
+            collapsed,
+            logo: sidebarLogo,
+            logoCollapsed: sidebarLogoCollapsed,
+            sidebarColor,
+            badgeColor,
+            badgeTextColor,
+            buttonColor,
+            onToggleCollapse: () => setCollapsed((v) => !v),
+            title: sidebarTitle,
+            items: sidebarItems,
+            activeItemId: sidebarActiveItemId,
+            expandedItemId: sidebarExpandedItemId,
+            onItemClick: onSidebarItemClick
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs12(
+      Box_default,
+      {
+        sx: {
+          height: "100%",
+          minHeight: 0,
+          minWidth: 0,
+          flex: 1,
+          display: "flex",
+          flexDirection: "column"
+        },
+        children: [
+          header ? /* @__PURE__ */ jsx57(Box_default, { sx: { flexShrink: 0 }, children: header }) : null,
+          pageHeader ? /* @__PURE__ */ jsx57(Box_default, { sx: { flexShrink: 0 }, children: pageHeader }) : null,
+          /* @__PURE__ */ jsx57(
+            Box_default,
+            {
+              component: "main",
+              sx: {
+                bgcolor: defaultColors.neutral[50],
+                flex: 1,
+                minHeight: 0,
+                overflowY: "auto",
+                p: "24px"
+              },
+              children
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+
+// src/shared/components/template-dashboard-header/TemplateDashboardHeader.styles.ts
+var surfaceButtonStyles = {
+  width: "42px",
+  height: "42px",
+  minWidth: "42px",
+  borderRadius: "8px",
+  bgcolor: "#F5F7FA",
+  border: "none",
+  p: 0,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+  boxSizing: "border-box"
+};
+var templateDashboardHeaderStyles = {
+  root: {
+    width: "100%",
+    height: "72px",
+    minHeight: "72px",
+    maxHeight: "72px",
+    bgcolor: "#FFFFFF",
+    px: "24px",
+    py: "18px",
+    boxSizing: "border-box",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    direction: "ltr",
+    flexShrink: 0
+  },
+  rightCluster: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: "16px",
+    flexShrink: 0
+  },
+  datePill: {
+    width: "192px",
+    height: "42px",
+    minWidth: "192px",
+    bgcolor: "#F5F7FA",
+    borderRadius: "8px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    px: "12px",
+    boxSizing: "border-box",
+    flexShrink: 0
+  },
+  dateText: {
+    fontSize: "12px",
+    fontWeight: 500,
+    lineHeight: "18px",
+    color: "#374151",
+    whiteSpace: "nowrap"
+  },
+  leftCluster: {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: "12px",
+    flexShrink: 0
+  },
+  logoutButton: surfaceButtonStyles,
+  profileButton: surfaceButtonStyles,
+  userTextBlock: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start",
+    direction: "ltr",
+    textAlign: "left",
+    minWidth: 0
+  },
+  userName: {
+    fontSize: "13px",
+    fontWeight: 600,
+    lineHeight: "20px",
+    color: "#374151"
+  },
+  userRole: {
+    fontSize: "11px",
+    fontWeight: 400,
+    lineHeight: "16px",
+    color: "#8A94A6"
+  }
+};
+
+// src/shared/components/template-dashboard-header/TemplateDashboardHeader.tsx
+import { jsx as jsx58, jsxs as jsxs13 } from "react/jsx-runtime";
+var TemplateDashboardHeader = ({
+  left,
+  right,
+  children,
+  className,
+  sx
+}) => {
+  return /* @__PURE__ */ jsxs13(
+    Box_default,
+    {
+      component: "header",
+      className,
+      sx: {
+        ...templateDashboardHeaderStyles.root,
+        ...sx ?? {}
+      },
+      children: [
+        right ? /* @__PURE__ */ jsx58(Box_default, { sx: templateDashboardHeaderStyles.rightCluster, children: right }) : null,
+        left ? /* @__PURE__ */ jsx58(Box_default, { sx: templateDashboardHeaderStyles.leftCluster, children: left }) : null,
+        children
+      ]
+    }
+  );
+};
+var TemplateDashboardHeader_default = TemplateDashboardHeader;
+
+// src/shared/components/app-page-header.tsx
+import { useRouter } from "@tanstack/react-router";
+import { ArrowRight as ArrowRight2, Notification as Notification2 } from "iconsax-reactjs";
+
+// src/assets/icons/headphone.svg
+var headphone_default = "./headphone-FHILIBNI.svg";
+
+// src/shared/components/app-page-header.tsx
+import { Fragment as Fragment6, jsx as jsx59, jsxs as jsxs14 } from "react/jsx-runtime";
+var AppPageHeader = ({
+  title,
+  subtitle,
+  titleComponent,
+  notificationBtn,
+  chatbotBtn = true,
+  headerActions,
+  variant = "default",
+  position = "fixed",
+  rootSx,
+  contentSx
+}) => {
+  const router = useRouter();
+  const onBackBtnClick = () => {
+    router.history.back();
+  };
+  const navigateToChatbot = () => {
+    window.location.href = "/chatbot";
+  };
+  const onNotificationBtnClick = () => {
+  };
+  const variantStyles = {
+    default: {
+      root: {
+        display: "flex",
+        flexDirection: "row",
+        height: "60px",
+        justifyContent: "center",
+        alignItems: "center",
+        bgcolor: "#F4F6FA"
+      },
+      content: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        p: 4,
+        height: "60px",
+        width: APP_LAYOUT_MAX_WIDTH,
+        bgcolor: "#F4F6FA"
+      },
+      actionButton: {
+        backgroundColor: defaultColors.neutral[200],
+        borderRadius: "12px"
+      },
+      placeholder: {
+        width: 20,
+        height: 20
+      },
+      title: {
+        variant: "h2",
+        fontWeight: 700,
+        sx: {
+          textAlign: "center"
+        }
+      },
+      titleContainer: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "4px",
+        flex: 1,
+        minWidth: 0
+      },
+      subtitle: {
+        sx: {
+          textAlign: "center",
+          fontSize: "14px",
+          fontWeight: 400,
+          color: defaultColors.neutral[500],
+          lineHeight: 1.4
+        }
+      }
+    },
+    mobile: {
+      root: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "100%",
+        bgcolor: "#F4F6FA"
+      },
+      content: {
+        display: "flex",
+        justifyContent: "space-between",
+        alignItems: "center",
+        px: "18px",
+        // pt: 'calc(12px + env(safe-area-inset-top))',
+        pb: "0px",
+        minHeight: "80px",
+        width: "100%",
+        maxWidth: APP_LAYOUT_MAX_WIDTH,
+        bgcolor: "#F4F6FA",
+        direction: "ltr",
+        gap: "16px"
+      },
+      actionButton: {
+        width: "36px",
+        height: "36px",
+        minWidth: "36px",
+        backgroundColor: "#E9EDF4",
+        borderRadius: "12px"
+      },
+      placeholder: {
+        width: "64px",
+        height: "64px"
+      },
+      title: {
+        sx: {
+          direction: "rtl",
+          textAlign: "center",
+          fontSize: "16px",
+          fontWeight: 700,
+          color: "#1F2937",
+          lineHeight: 1.3
+        }
+      },
+      titleContainer: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: "4px",
+        flex: 1,
+        minWidth: 0
+      },
+      subtitle: {
+        sx: {
+          direction: "rtl",
+          textAlign: "center",
+          fontSize: "14px",
+          fontWeight: 400,
+          color: "#9CA3AF",
+          lineHeight: 1.4
+        }
+      }
+    }
+  };
+  const selectedVariant = variantStyles[variant];
+  const positionStyles = position === "fixed" ? {
+    position: "fixed",
+    left: 0,
+    right: 0,
+    top: 0,
+    zIndex: 999
+  } : {};
+  const renderAction = (action) => {
+    if (!action) {
+      return /* @__PURE__ */ jsx59(Box_default, { sx: selectedVariant.placeholder });
+    }
+    return /* @__PURE__ */ jsx59(
+      IconButton_default,
+      {
+        "aria-label": action.ariaLabel,
+        onClick: action.onClick,
+        disabled: action.disabled,
+        sx: selectedVariant.actionButton,
+        children: action.icon
+      }
+    );
+  };
+  const hasCustomActions = Boolean(headerActions);
+  return /* @__PURE__ */ jsx59(
+    Box_default,
+    {
+      sx: {
+        ...selectedVariant.root,
+        ...positionStyles,
+        ...rootSx
+      },
+      children: /* @__PURE__ */ jsxs14(
+        Box_default,
+        {
+          sx: {
+            ...selectedVariant.content,
+            ...contentSx
+          },
+          children: [
+            hasCustomActions ? renderAction(headerActions?.leading) : /* @__PURE__ */ jsx59(Fragment6, { children: notificationBtn ? /* @__PURE__ */ jsx59(
+              IconButton_default,
+              {
+                onClick: onNotificationBtnClick,
+                sx: selectedVariant.actionButton,
+                children: /* @__PURE__ */ jsx59(Notification2, { size: 20, color: defaultColors.neutral[700] })
+              }
+            ) : /* @__PURE__ */ jsx59(
+              IconButton_default,
+              {
+                onClick: onBackBtnClick,
+                sx: selectedVariant.actionButton,
+                children: /* @__PURE__ */ jsx59(ArrowRight2, { size: 20, color: defaultColors.neutral[700] })
+              }
+            ) }),
+            titleComponent ? titleComponent : title && /* @__PURE__ */ jsxs14(Box_default, { sx: selectedVariant.titleContainer, children: [
+              /* @__PURE__ */ jsx59(
+                Typography_default,
+                {
+                  variant: selectedVariant.title.variant,
+                  component: "h1",
+                  fontWeight: selectedVariant.title.fontWeight,
+                  sx: selectedVariant.title.sx,
+                  children: title
+                }
+              ),
+              subtitle ? /* @__PURE__ */ jsx59(Typography_default, { component: "span", sx: selectedVariant.subtitle.sx, children: subtitle }) : null
+            ] }),
+            hasCustomActions ? renderAction(headerActions?.trailing) : chatbotBtn ? /* @__PURE__ */ jsx59(IconButton_default, { onClick: navigateToChatbot, sx: selectedVariant.actionButton, children: /* @__PURE__ */ jsx59("img", { src: headphone_default, width: 20, height: 20, alt: "support" }) }) : /* @__PURE__ */ jsx59(Box_default, { sx: selectedVariant.placeholder })
+          ]
+        }
+      )
+    }
+  );
+};
+var app_page_header_default = AppPageHeader;
+
+// src/shared/components/app-page-footer.tsx
+import { jsx as jsx60 } from "react/jsx-runtime";
+var AppPageFooter = ({
+  children,
+  variant = "default",
+  position = "fixed",
+  rootSx,
+  contentSx
+}) => {
+  const variantStyles = {
+    default: {
+      root: {
+        display: "flex",
+        flexDirection: "row",
+        height: "60px",
+        justifyContent: "center",
+        alignItems: "center",
+        bgcolor: "#F4F6FA"
+      },
+      content: {
+        bgcolor: "#F4F6FA",
+        display: "flex",
+        flexDirection: "row",
+        width: APP_LAYOUT_MAX_WIDTH,
+        height: "60px",
+        alignItems: "center",
+        px: 4,
+        gap: 2.5,
+        py: 5
+      }
+    },
+    mobile: {
+      root: {
+        display: "flex",
+        flexDirection: "row",
+        justifyContent: "center",
+        width: "100%",
+        px: 0,
+        pt: 0,
+        pb: 0,
+        mt: "auto",
+        bgcolor: "#F4F6FA"
+      },
+      content: {
+        bgcolor: "#F4F6FA",
+        display: "flex",
+        flexDirection: "row",
+        width: "100%",
+        maxWidth: APP_LAYOUT_MAX_WIDTH,
+        alignItems: "center",
+        px: "10px",
+        pt: "18px",
+        pb: "14px",
+        minHeight: "108px"
+      }
+    }
+  };
+  const positionStyles = position === "fixed" ? {
+    position: "fixed",
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: 999
+  } : position === "sticky" ? {
+    position: "sticky",
+    bottom: 0,
+    zIndex: 2
+  } : {};
+  const selectedVariant = variantStyles[variant];
+  return /* @__PURE__ */ jsx60(
+    Box_default,
+    {
+      sx: {
+        ...selectedVariant.root,
+        ...positionStyles,
+        ...rootSx
+      },
+      children: /* @__PURE__ */ jsx60(
+        Box_default,
+        {
+          sx: {
+            ...selectedVariant.content,
+            ...contentSx
+          },
+          children
+        }
+      )
+    }
+  );
+};
+var app_page_footer_default = AppPageFooter;
+
+// src/mobile-app-template/components/mobile-app-footer-nav.tsx
+import { Link } from "@tanstack/react-router";
+
+// src/theme/colors.ts
+var appColors = {
+  primary: {
+    50: "#EDFCF6",
+    100: "#D4F7E8",
+    200: "#ACEED6",
+    300: "#76DFBF",
+    400: "#3EC9A3",
+    500: "#1DBF98",
+    600: "#15A48F",
+    700: "#0E8983",
+    800: "#09696E",
+    900: "#054F5B",
+    transparent: "#1DBF981A",
+    main: "#1DBF98",
+    light: "#D4F7E8",
+    dark: "#054F5B",
+    contrastText: "#fff"
+  },
+  secondary: {
+    50: "#E3FFEE",
+    100: "#FFF9DB",
+    200: "#FFEEA4",
+    300: "#FBE07D",
+    400: "#FDD352",
+    500: "#F4BC28",
+    600: "#DCA000",
+    700: "#BB820D",
+    800: "#A06B0B",
+    900: "#89580C",
+    transparent: "#F4BC281A",
+    main: "#F4BC28",
+    light: "#FFF9DB",
+    dark: "#A06B0B",
+    contrastText: "#fff"
+  }
+};
+
+// src/mobile-app-template/components/mobile-app-footer-nav.tsx
+import { jsx as jsx61, jsxs as jsxs15 } from "react/jsx-runtime";
+var MobileAppFooterNav = ({ items }) => {
+  const renderItemContent = (item) => {
+    const isActive = Boolean(item.active);
+    const icon = typeof item.icon === "function" ? item.icon(isActive) : item.icon;
+    return /* @__PURE__ */ jsxs15(
+      Box_default,
+      {
+        sx: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px",
+          color: isActive ? appColors.primary.main : "#9CA3AF",
+          width: "100%",
+          minHeight: "74px"
+        },
+        children: [
+          /* @__PURE__ */ jsx61(
+            Box_default,
+            {
+              sx: {
+                display: "flex",
+                lineHeight: 0,
+                transform: "translateY(12px)"
+              },
+              children: icon
+            }
+          ),
+          /* @__PURE__ */ jsx61(
+            Typography_default,
+            {
+              component: "span",
+              sx: {
+                fontSize: "12px",
+                fontWeight: isActive ? 500 : 400,
+                color: isActive ? appColors.primary.main : "#9CA3AF",
+                lineHeight: 1.4,
+                transform: "translateY(12px)"
+              },
+              children: item.label
+            }
+          )
+        ]
+      }
+    );
+  };
+  return /* @__PURE__ */ jsx61(app_page_footer_default, { variant: "mobile", position: "static", children: /* @__PURE__ */ jsx61(
+    Box_default,
+    {
+      component: "nav",
+      role: "navigation",
+      sx: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${items.length}, minmax(0, 1fr))`,
+        alignItems: "center",
+        justifyItems: "center",
+        width: "100%"
+      },
+      children: items.map((item) => {
+        if (item.to) {
+          return /* @__PURE__ */ jsx61(
+            Link,
+            {
+              to: item.to,
+              style: {
+                width: "100%",
+                display: "flex",
+                justifyContent: "center"
+              },
+              children: renderItemContent(item)
+            },
+            item.key
+          );
+        }
+        return /* @__PURE__ */ jsx61(
+          Box_default,
+          {
+            component: item.onClick ? "button" : "div",
+            type: item.onClick ? "button" : void 0,
+            onClick: item.onClick,
+            sx: {
+              width: "100%",
+              display: "flex",
+              justifyContent: "center",
+              bgcolor: "transparent",
+              border: "none",
+              font: "inherit",
+              cursor: item.onClick ? "pointer" : "default"
+            },
+            children: renderItemContent(item)
+          },
+          item.key
+        );
+      })
+    }
+  ) });
+};
+var mobile_app_footer_nav_default = MobileAppFooterNav;
+
+// src/mobile-app-template/components/mobile-app-layout.tsx
+import { jsx as jsx62, jsxs as jsxs16 } from "react/jsx-runtime";
+var MobileAppLayout = ({
+  title,
+  subtitle,
+  titleComponent,
+  headerActions,
+  footerItems = [],
+  className,
+  children
+}) => {
+  return /* @__PURE__ */ jsxs16(
+    Box_default,
+    {
+      className,
+      sx: {
+        width: "100%",
+        minHeight: "100dvh",
+        maxWidth: APP_LAYOUT_MAX_WIDTH,
+        mx: "auto",
+        display: "flex",
+        flexDirection: "column",
+        bgcolor: "#F5F6FA",
+        color: defaultColors.neutral[900],
+        overflowX: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx62(
+          app_page_header_default,
+          {
+            title,
+            subtitle,
+            titleComponent,
+            headerActions,
+            variant: "mobile",
+            position: "static"
+          }
+        ),
+        /* @__PURE__ */ jsx62(
+          Box_default,
+          {
+            component: "section",
+            sx: {
+              px: "18px",
+              pb: "24px",
+              flex: 1
+            },
+            children
+          }
+        ),
+        footerItems.length ? /* @__PURE__ */ jsx62(mobile_app_footer_nav_default, { items: footerItems }) : null
+      ]
+    }
+  );
+};
+var mobile_app_layout_default = MobileAppLayout;
+
 // src/providers/ThemeProvider.tsx
 import { ThemeProvider as MUIThemeProvider } from "@mui/material/styles";
 import { CacheProvider } from "@emotion/react";
@@ -3318,10 +4447,10 @@ var uiTypography = {
 };
 
 // src/providers/ThemeProvider.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx63 } from "react/jsx-runtime";
 var ThemeProvider = ({
   children,
-  appColors,
+  appColors: appColors2,
   dir
 }) => {
   const cacheRtl = createCache({
@@ -3337,7 +4466,7 @@ var ThemeProvider = ({
     //   dark: false,
     // },
     palette: {
-      ...appColors,
+      ...appColors2,
       ...defaultColors
     },
     typography: {
@@ -3347,7 +4476,7 @@ var ThemeProvider = ({
     spacing: 4
   };
   const theme = createTheme(themeOptions);
-  return /* @__PURE__ */ jsx54(CacheProvider, { value: dir === "rtl" ? cacheRtl : cacheLtr, children: /* @__PURE__ */ jsx54(MUIThemeProvider, { theme, children }) });
+  return /* @__PURE__ */ jsx63(CacheProvider, { value: dir === "rtl" ? cacheRtl : cacheLtr, children: /* @__PURE__ */ jsx63(MUIThemeProvider, { theme, children }) });
 };
 var ThemeProvider_default = ThemeProvider;
 
@@ -3358,10 +4487,10 @@ import rtlPlugin2 from "stylis-plugin-rtl";
 import { prefixer as prefixer2 } from "stylis";
 import { CacheProvider as CacheProvider2 } from "@emotion/react";
 import createCache2 from "@emotion/cache";
-import { jsx as jsx55 } from "react/jsx-runtime";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var SPAThemeProvider = ({
   children,
-  appColors,
+  appColors: appColors2,
   dir,
   defaultColors: defaultColorsProp,
   themeOptions
@@ -3373,7 +4502,7 @@ var SPAThemeProvider = ({
       dark: true
     },
     palette: {
-      ...appColors,
+      ...appColors2,
       ...paletteDefaults
     },
     typography: {
@@ -3391,7 +4520,7 @@ var SPAThemeProvider = ({
     key: "muiltr",
     stylisPlugins: [prefixer2]
   });
-  return /* @__PURE__ */ jsx55(CacheProvider2, { value: dir === "rtl" ? cacheRtl : cacheLtr, children: /* @__PURE__ */ jsx55(MUIThemeProvider2, { theme, defaultMode: "light", children }) });
+  return /* @__PURE__ */ jsx64(CacheProvider2, { value: dir === "rtl" ? cacheRtl : cacheLtr, children: /* @__PURE__ */ jsx64(MUIThemeProvider2, { theme, defaultMode: "light", children }) });
 };
 var SPAThemeProvider_default = SPAThemeProvider;
 
@@ -3403,14 +4532,14 @@ import { useColorScheme } from "@mui/material/styles";
 import { useTheme as useTheme2 } from "@mui/material/styles";
 
 // src/hooks/useErrorHandler.ts
-import { useCallback as useCallback2, useState as useState9 } from "react";
+import { useCallback as useCallback2, useState as useState11 } from "react";
 
 // src/context/MessageHandler.tsx
 import {
   createContext,
-  useState as useState8
+  useState as useState10
 } from "react";
-import { jsx as jsx56, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs17 } from "react/jsx-runtime";
 var MessageContext = createContext(
   void 0
 );
@@ -3419,8 +4548,8 @@ var MessageProvider = ({
   toastPosition = { vertical: "top", horizontal: "left" },
   width = "90%"
 }) => {
-  const [message, setMessage] = useState8(null);
-  const [open, setOpen] = useState8(false);
+  const [message, setMessage] = useState10(null);
+  const [open, setOpen] = useState10(false);
   const duration = 4e3;
   const showMessage = (text, severity, showUndo = false, isWide = false) => {
     setMessage({ text, severity, showUndo, isWide });
@@ -3434,9 +4563,9 @@ var MessageProvider = ({
     inDesktop: toastPosition,
     width
   };
-  return /* @__PURE__ */ jsxs10(MessageContext.Provider, { value: contextValue, children: [
+  return /* @__PURE__ */ jsxs17(MessageContext.Provider, { value: contextValue, children: [
     children,
-    message && /* @__PURE__ */ jsx56(
+    message && /* @__PURE__ */ jsx65(
       Toast_default,
       {
         open,
@@ -3475,8 +4604,8 @@ var errorHandler = (err) => {
 };
 var useErrorHandler = () => {
   const { showMessage } = useMessage();
-  const [errFields, setErrFields] = useState9();
-  const [errorMessage, setErrorMessage] = useState9();
+  const [errFields, setErrFields] = useState11();
+  const [errorMessage, setErrorMessage] = useState11();
   const handleError = useCallback2(
     (error, fieldHandler, isWide = false) => {
       const err = errorHandler(error);
@@ -3740,10 +4869,14 @@ var postToParent = (message) => {
   window.parent.postMessage(message, "*");
 };
 export {
+  APP_LAYOUT_MAX_WIDTH,
   Accordion_default as Accordion,
   AccordionDetails_default as AccordionDetails,
   AccordionSummary_default as AccordionSummary,
+  app_page_footer_default as AppPageFooter,
+  app_page_header_default as AppPageHeader,
   Autocomplete_default as Autocomplete,
+  Badge_default as Badge,
   Box_default as Box,
   Button_default as Button,
   CardNumberInput_default as CardNumberInput,
@@ -3770,6 +4903,8 @@ export {
   LoadingModal_default as LoadingModal,
   MenuItem_default as MenuItem,
   MessageProvider,
+  mobile_app_footer_nav_default as MobileAppFooterNav,
+  mobile_app_layout_default as MobileAppLayout,
   MobileDatePicker_default as MobileDatePicker,
   Modal_default as Modal,
   MultiSelect_default as MultiSelect,
@@ -3782,6 +4917,9 @@ export {
   SPAThemeProvider_default as SPAThemeProvider,
   Select_default as Select,
   Sentry,
+  SidebarDot,
+  SidebarItemIcon,
+  SidebarRow_default as SidebarRow,
   Skeleton_default as Skeleton,
   Slider_default as Slider,
   Step_default as Step,
@@ -3791,6 +4929,9 @@ export {
   Stepper_default as Stepper,
   SvgIcon_default as SvgIcon,
   Tab_default as Tab,
+  TemplateDashboard,
+  TemplateDashboardHeader_default as TemplateDashboardHeader,
+  TemplateDashboardSidebar_default as TemplateDashboardSidebar,
   TextField_default as TextField,
   ThemeProvider_default as ThemeProvider,
   Toast_default as Toast,
@@ -3819,6 +4960,8 @@ export {
   shortDateFormat,
   MuiStepConnectorClasses as stepConnectorClasses,
   muiStyled as styled,
+  templateDashboardHeaderStyles,
+  templateDashboardSidebarWidths,
   toLatinDigits,
   useColorScheme,
   useErrorHandler,