@unifiedsoftware/react-ui 1.0.0 → 1.0.2

package/dist/index.mjs

@@ -0,0 +1,1102 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+
+// src/components/Button/Button.tsx
+import clsx from "clsx";
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var prefixCls = "us-";
+var Button = forwardRef(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "button", children, className, variant = "text", color = "primary", size = "md" } = _b, rest = __objRest(_b, ["as", "children", "className", "variant", "color", "size"]);
+    return /* @__PURE__ */ jsxs(
+      Component,
+      __spreadProps(__spreadValues({
+        ref,
+        className: clsx(
+          `${prefixCls}button`,
+          {
+            [`${prefixCls}button--${variant}`]: variant,
+            [`${prefixCls}button--${color}`]: color,
+            [`${prefixCls}button--${size}`]: size
+          },
+          className
+        )
+      }, rest), {
+        children: [
+          /* @__PURE__ */ jsx("div", { className: `${prefixCls}button__elevation` }),
+          /* @__PURE__ */ jsx("div", { className: `${prefixCls}button__outline` }),
+          children
+        ]
+      })
+    );
+  }
+);
+
+// src/components/Tabs/Tab.tsx
+import clsx2 from "clsx";
+import mergeRefs from "merge-refs";
+import { forwardRef as forwardRef2, useEffect, useRef } from "react";
+
+// src/components/Tabs/TabsContext.ts
+import { createContext, useContext } from "react";
+var TabsContext = createContext(null);
+var useTabs = () => {
+  const context = useContext(TabsContext);
+  if (!context) {
+    throw new Error("`useTabs` must be used within a `<Tabs />`");
+  }
+  return context;
+};
+
+// src/components/Tabs/Tab.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var prefixCls2 = "us-";
+var Tab = forwardRef2(
+  (_a, ref) => {
+    var _b = _a, { as: Component = "div", children, className, value, onClick } = _b, rest = __objRest(_b, ["as", "children", "className", "value", "onClick"]);
+    const tabRef = useRef(null);
+    const tabs = useTabs();
+    const handleClick = (event) => {
+      const previousTab = tabs.previousTabRef.current;
+      const currentTab = tabRef.current;
+      if (!currentTab)
+        return;
+      if (previousTab) {
+        const previousIndicator = previousTab.querySelector(`.${prefixCls2}tab__indicator`);
+        const currentIndicator = currentTab.querySelector(`.${prefixCls2}tab__indicator`);
+        if (!previousIndicator || !currentIndicator)
+          return;
+        const from = {};
+        const fromRect = previousIndicator.getBoundingClientRect();
+        const fromPos = fromRect.left;
+        const fromWidth = fromRect.width;
+        const toRect = currentIndicator.getBoundingClientRect();
+        const toPos = toRect.left;
+        const toWidth = toRect.width;
+        const scale = fromWidth / toWidth;
+        if (scale) {
+          from["transform"] = `translateX(${(fromPos - toPos).toFixed(4)}px) scaleX(${scale.toFixed(4)})`;
+        } else {
+          from["opacity"] = 0;
+        }
+        const keyframes = [from, { transform: "none" }];
+        currentIndicator.animate(keyframes, {
+          duration: 250,
+          easing: "cubic-bezier(.3,0,0,1)"
+        });
+        tabs.previousTabRef.current = tabRef.current;
+      }
+      tabs.previousTabRef.current = tabRef.current;
+      tabs.onChange(value);
+      onClick == null ? void 0 : onClick(event);
+    };
+    useEffect(() => {
+      if (value === tabs.value) {
+        tabs.previousTabRef.current = tabRef.current;
+      }
+    }, []);
+    return /* @__PURE__ */ jsx2(
+      Component,
+      __spreadProps(__spreadValues({
+        ref: mergeRefs(tabRef, ref),
+        className: clsx2(`${prefixCls2}tab`, { [`${prefixCls2}tab--selected`]: value === tabs.value }, className),
+        onClick: handleClick
+      }, rest), {
+        children: /* @__PURE__ */ jsxs2("div", { className: `${prefixCls2}tab__content`, children: [
+          children,
+          /* @__PURE__ */ jsx2("div", { className: `${prefixCls2}tab__indicator` })
+        ] })
+      })
+    );
+  }
+);
+
+// src/components/Tabs/Tabs.tsx
+import clsx3 from "clsx";
+import { useEffect as useEffect2, useRef as useRef2, useState } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var prefixCls3 = "us-";
+var Tabs = (_a) => {
+  var _b = _a, { children, className, value, defaultValue, onChange } = _b, rest = __objRest(_b, ["children", "className", "value", "defaultValue", "onChange"]);
+  const previousTabRef = useRef2(null);
+  const [selfValue, setSelfValue] = useState(value != null ? value : defaultValue);
+  const handleChange = (value2) => {
+    setSelfValue(value2);
+    onChange == null ? void 0 : onChange(value2);
+  };
+  useEffect2(() => {
+    if (value !== void 0) {
+      setSelfValue(value);
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxs3(TabsContext.Provider, { value: { previousTabRef, value: selfValue, onChange: handleChange }, children: [
+    /* @__PURE__ */ jsx3("div", __spreadProps(__spreadValues({ className: clsx3(`${prefixCls3}tabs`, className) }, rest), { children })),
+    /* @__PURE__ */ jsx3("div", { className: `${prefixCls3}divider` })
+  ] });
+};
+
+// src/components/DropdownEnumList.tsx
+import { DropDownList } from "@progress/kendo-react-dropdowns";
+import { useEffect as useEffect3, useState as useState2 } from "react";
+import { Fragment, jsx as jsx4 } from "react/jsx-runtime";
+function parsearDataForComboBox(array, key, text, itemAll = false) {
+  const dataForComboBox = [];
+  if (itemAll)
+    dataForComboBox.push({ key: "", text: "ALL" });
+  if (array !== void 0) {
+    array.map((a) => {
+      dataForComboBox.push({ key: a[key], text: a[text] });
+    });
+  }
+  return dataForComboBox;
+}
+function GetEnumDescription(key, typeEnum, description) {
+  const listLabel = description.get(typeEnum);
+  let label = void 0;
+  if (listLabel != void 0)
+    label = listLabel.get(parseInt(key));
+  if (label == void 0) {
+    label = typeEnum[key];
+    return label.split("_").map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+  }
+  return label;
+}
+function EnumToArray(typeEnum, replaceGuionForSpace = true, description) {
+  const values = [];
+  for (const key in typeEnum) {
+    if (typeof typeEnum[key] === "string")
+      values.push({
+        value: Number(key),
+        label: replaceGuionForSpace ? GetEnumDescription(key, typeEnum, description) : typeEnum[key]
+      });
+  }
+  return values;
+}
+var DropEnumList = ({ dataEnum, description, onChange, width, defaultValue }) => {
+  const [value, setValue] = useState2("");
+  const [data, setData] = useState2([]);
+  useEffect3(() => {
+    setData(
+      parsearDataForComboBox(EnumToArray(dataEnum, true, description), "value", "label", false).sort(
+        (a, b) => Number(a.key) - Number(b.key)
+      )
+    );
+  }, []);
+  useEffect3(() => {
+    if (data.length > 0) {
+      setValue(data.filter((x) => x.key == defaultValue)[0]);
+    }
+  }, [data]);
+  const handleOptionClick = (e) => {
+    onChange(e);
+    setValue(e);
+  };
+  return /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsx4(
+    DropDownList,
+    {
+      className: "d-inline-block align-middle mr-2",
+      data,
+      dataItemKey: "key",
+      id: "cmbDisplay",
+      name: "cmbDisplay",
+      onChange: (event) => {
+        handleOptionClick(event.value);
+      },
+      textField: "text",
+      style: {
+        width: `${width}px`
+      },
+      defaultValue: value
+    }
+  ) });
+};
+
+// src/contexts/BreadCrumbContext.tsx
+import { createContext as createContext2, useState as useState4 } from "react";
+
+// src/hooks/useLocalStorage.tsx
+import { useCallback, useEffect as useEffect5, useState as useState3 } from "react";
+
+// src/hooks/useEventListener.tsx
+import { useRef as useRef3 } from "react";
+
+// src/hooks/useIsomorphicLayoutEffect.tsx
+import { useEffect as useEffect4, useLayoutEffect } from "react";
+var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect4;
+var useIsomorphicLayoutEffect_default = useIsomorphicLayoutEffect;
+
+// src/hooks/useEventListener.tsx
+function useEventListener(handler) {
+  const savedHandler = useRef3(handler);
+  useIsomorphicLayoutEffect_default(() => {
+    savedHandler.current = handler;
+  }, [handler]);
+}
+var useEventListener_default = useEventListener;
+
+// src/hooks/useLocalStorage.tsx
+function useLocalStorage(key, initialValue) {
+  const readValue = useCallback(() => {
+    if (typeof window === "undefined") {
+      return initialValue;
+    }
+    try {
+      const item = window.localStorage.getItem(key);
+      return item ? parseJSON(item) : initialValue;
+    } catch (error) {
+      console.warn(`Error reading localStorage key \u201C${key}\u201D:`, error);
+      return initialValue;
+    }
+  }, [initialValue, key]);
+  const [storedValue, setStoredValue] = useState3(readValue);
+  const setValue = useCallback(
+    (value) => {
+      if (typeof window == "undefined") {
+        console.warn(`Tried setting localStorage key \u201C${key}\u201D even though environment is not a client`);
+      }
+      try {
+        const newValue = value instanceof Function ? value(storedValue) : value;
+        window.localStorage.setItem(key, JSON.stringify(newValue));
+        setStoredValue(newValue);
+        window.dispatchEvent(new Event("local-storage"));
+      } catch (error) {
+        console.warn(`Error setting localStorage key \u201C${key}\u201D:`, error);
+      }
+    },
+    [key, storedValue]
+  );
+  useEffect5(() => {
+    setStoredValue(readValue());
+  }, []);
+  const handleStorageChange = useCallback(() => {
+    setStoredValue(readValue());
+  }, [readValue]);
+  useEventListener_default("storage", handleStorageChange);
+  useEventListener_default("local-storage", handleStorageChange);
+  return [storedValue, setValue];
+}
+function parseJSON(value) {
+  try {
+    return value === "undefined" ? void 0 : JSON.parse(value != null ? value : "");
+  } catch (e) {
+    console.log("parsing error on", { value });
+    return void 0;
+  }
+}
+
+// src/contexts/BreadCrumbContext.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+var BreadCrumbContext = createContext2({});
+var BreadCrumbContextProvider = ({ children }) => {
+  const [active, setActive] = useLocalStorage("@active", "");
+  const [path, setPath] = useLocalStorage("@path", "/");
+  const [goBack, setGoBack] = useLocalStorage("@goBack", false);
+  const [pathChild, setPathChild] = useLocalStorage("@pathChild", "");
+  const [routes, setRoutes] = useState4([]);
+  return /* @__PURE__ */ jsx5(
+    BreadCrumbContext.Provider,
+    {
+      value: {
+        active,
+        setActive,
+        path,
+        setPath,
+        goBack,
+        setGoBack,
+        pathChild,
+        setPathChild,
+        routes,
+        setRoutes
+      },
+      children
+    }
+  );
+};
+
+// src/contexts/DrawerContext.tsx
+import { createContext as createContext3, useState as useState5 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var DrawerContext = createContext3({});
+var DrawerContextProvider = ({ children }) => {
+  const [active, setActive] = useState5(false);
+  return /* @__PURE__ */ jsx6(DrawerContext.Provider, { value: { active, setActive }, children });
+};
+
+// src/contexts/HistoryContext.tsx
+import { createContext as createContext4 } from "react";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var HistoryContext = createContext4({});
+var HistoryContextProvider = ({ children }) => {
+  const [list, setList] = useLocalStorage("@list_paths", []);
+  const updateList = (value) => {
+    setList(
+      (prev) => prev.concat({
+        path: value.path,
+        name: value.name,
+        date: /* @__PURE__ */ new Date()
+      })
+    );
+  };
+  return /* @__PURE__ */ jsx7(HistoryContext.Provider, { value: { list, updateList }, children });
+};
+
+// src/contexts/SidebarMainContext.tsx
+import { createContext as createContext5, useState as useState6 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var SidebarMainContext = createContext5({});
+var SidebarMainContextProvider = ({ children }) => {
+  const [open, setOpen] = useState6(true);
+  return /* @__PURE__ */ jsx8(SidebarMainContext.Provider, { value: { open, setOpen }, children });
+};
+
+// src/contexts/GlobalProvider.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function GlobalProvider({ children }) {
+  return /* @__PURE__ */ jsx9(HistoryContextProvider, { children: /* @__PURE__ */ jsx9(BreadCrumbContextProvider, { children: /* @__PURE__ */ jsx9(SidebarMainContextProvider, { children: /* @__PURE__ */ jsx9(DrawerContextProvider, { children }) }) }) });
+}
+
+// src/hooks/usePrevious.tsx
+import { useEffect as useEffect6, useRef as useRef4 } from "react";
+var usePrevious = (value) => {
+  const ref = useRef4();
+  useEffect6(() => {
+    ref.current = value;
+  });
+  return ref.current;
+};
+
+// src/hooks/useStep.tsx
+import { useCallback as useCallback2, useMemo, useState as useState7 } from "react";
+var useStep = (maxStep) => {
+  const [currentStep, setCurrentStep] = useState7(1);
+  const canGoToNextStep = useMemo(() => currentStep + 1 <= maxStep, [currentStep, maxStep]);
+  const canGoToPrevStep = useMemo(() => currentStep - 1 >= 1, [currentStep]);
+  const setStep = useCallback2(
+    (step) => {
+      const newStep = step instanceof Function ? step(currentStep) : step;
+      if (newStep >= 1 && newStep <= maxStep) {
+        setCurrentStep(newStep);
+        return;
+      }
+      throw new Error("Step not valid");
+    },
+    [maxStep, currentStep]
+  );
+  const goToNextStep = useCallback2(() => {
+    if (canGoToNextStep) {
+      setCurrentStep((step) => step + 1);
+    }
+  }, [canGoToNextStep]);
+  const goToPrevStep = useCallback2(() => {
+    if (canGoToPrevStep) {
+      setCurrentStep((step) => step - 1);
+    }
+  }, [canGoToPrevStep]);
+  const reset = useCallback2(() => {
+    setCurrentStep(1);
+  }, []);
+  return [
+    currentStep,
+    {
+      goToNextStep,
+      goToPrevStep,
+      canGoToNextStep,
+      canGoToPrevStep,
+      setStep,
+      reset
+    }
+  ];
+};
+
+// src/layout/AppBreadcrumb.tsx
+import { useContext as useContext2, useEffect as useEffect7 } from "react";
+import { MdClose } from "react-icons/md";
+import { VscChevronRight } from "react-icons/vsc";
+import { Link as Link3, useNavigate } from "react-router-dom";
+
+// src/styled-components/breadcrumb.ts
+import styled from "styled-components";
+var Breadcrumb = styled.div`
+	font-family: 'Inter', sans-serif;
+	padding: 10px 0px;
+	text-transform: uppercase;
+	font-weight: bold;
+	font-size: 0.9rem;
+	color: #92190e;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background-color: white;
+	align-items: center;
+
+	.link {
+		color: #92190e;
+		&:hover {
+			color: #92190e;
+			cursor: pointer;
+		}
+	}
+`;
+var BreadCrumbTitle = styled.div`
+	font-family: 'Inter', sans-serif;
+	font-weight: bold;
+	font-size: 1.2rem !important;
+	color: #92190e;
+	margin-top: 15px;
+`;
+var TitlePage = styled.div`
+	font-family: 'Inter', sans-serif;
+	font-weight: bold;
+	font-size: 1.2rem !important;
+	color: #92190e;
+	margin-top: 15px;
+`;
+
+// src/styled-components/menu.ts
+import { Link } from "react-router-dom";
+import styled2 from "styled-components";
+var MenuItem = styled2(Link)`
+	text-decoration: none;
+	color: black;
+	display: flex;
+	justify-content: ${(props) => props.type === "col" ? "center" : "flex-start"};
+	align-items: center;
+	flex-direction: ${(props) => props.type === "col" ? "column" : "row"};
+	border: 1px solid transparent;
+	width: ${(props) => props.width ? props.width : "100px"};
+	padding: 10px;
+	text-decoration: none !important;
+	&:hover {
+		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+	}
+
+	.icon {
+		width: 30px;
+		text-decoration: none;
+	}
+	.text {
+		text-align: center;
+		font-size: 12px;
+		text-decoration: none !important;
+		color: black;
+		margin-top: ${(props) => props.type === "col" ? "0px" : "15px"};
+		&:hover {
+			text-decoration: none !important;
+		}
+	}
+`;
+var MenuTitle = styled2.p`
+	font-size: 16px;
+	font-weight: bold !important;
+`;
+
+// src/styled-components/navbar.ts
+import styled3 from "styled-components";
+var Navbar = styled3.nav`
+	background: ${(props) => {
+  return !props.gradient ? ` linear-gradient( 90.03deg, #92190e 80.71%, #f0b92c 107.21% ) !important` : `#92190e`;
+}};
+	z-index: 10;
+	width: 100%;
+	max-width: 100vw;
+	display: flex;
+	justify-content: space-between;
+	padding-top: 10px;
+	padding-bottom: 10px;
+	position: sticky;
+	top: 0px;
+	height: 40px;
+	.input {
+		border-radius: 2px !important;
+		padding: 2px !important;
+		font-size: 12px !important;
+		height: 20px !important;
+		border: none;
+		&:focus {
+			outline: none !important;
+		}
+		::placeholder {
+			color: #92190e;
+		}
+		@media (max-width: 470px) {
+			display: none;
+		}
+	}
+	.dialog {
+		z-index: 20000 !important;
+		position: absolute;
+		width: 400px;
+		height: 500px;
+		min-height: 500px;
+		overflow: scroll;
+		overflow-x: hidden;
+		min-width: 400px;
+		max-width: 400px;
+		background-color: white;
+		border-radius: 20px;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+	}
+`;
+
+// src/styled-components/options.ts
+import styled4 from "styled-components";
+var MenuOptions = styled4.div`
+	font-size: bold;
+	display: flex;
+	width: 100%;
+	gap: 10px;
+	justify-content: flex-start;
+	border-bottom: 1px solid #e6e6e6;
+	background-color: white;
+	flex-wrap: wrap;
+	.button-option {
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+		align-items: center;
+		gap: 5px;
+		padding: 10px 20px;
+		font-weight: bold;
+		background-color: white !important;
+		border: none;
+		.icon {
+			color: #92190e;
+		}
+		.text {
+			@media (max-width: 470px) {
+				display: none;
+			}
+		}
+	}
+`;
+
+// src/styled-components/sidebar.ts
+import { Link as Link2 } from "react-router-dom";
+import styled5 from "styled-components";
+var ItemSidebar = styled5.div`
+	padding: 10px 25px;
+	display: flex;
+	align-items: center;
+	gap: 30px;
+	font-family: 'Inter', sans-serif;
+	&:hover {
+		color: white !important;
+		text-decoration: none;
+		background: #92190e;
+		.icon-sidebar {
+			color: white !important;
+		}
+	}
+	&:active {
+		color: white !important;
+		text-decoration: none;
+		background: #92190e;
+		.icon-sidebar {
+			color: white !important;
+		}
+	}
+`;
+var SidebarNavigation = styled5.nav`
+	position: ${({ fixed = true }) => fixed ? "fixed" : "static"};
+	top: 0;
+	left: 0;
+	min-height: 100vh;
+	box-shadow: 7px 0px 14px 1px rgba(145, 141, 141, 0.51);
+	-webkit-box-shadow: 7px 0px 14px 1px rgba(145, 141, 141, 0.51);
+	-moz-box-shadow: 7px 0px 14px 1px rgba(145, 141, 141, 0.51);
+	background: white;
+	font-family: 'Inter', sans-serif;
+	padding: 0;
+	width: ${({ fixed = true, active = true }) => fixed ? active ? "270px" : "0px" : "auto"};
+	z-index: 11;
+	transition: width 0.2s ease-in-out;
+
+	overflow: hidden;
+	height: 100vh;
+	overflow-y: auto;
+	box-shadow: ${({ shadow = true }) => shadow ? "rgba(99, 99, 99, 0.2) 0px 2px 8px 0px" : "none"};
+
+	&::-webkit-scrollbar {
+		display: none !important;
+	}
+	.nav {
+		flex-wrap: nowrap;
+		flex-direction: column;
+		font-size: 12px;
+
+		.nav-item {
+			.collapse {
+				z-index: 999;
+			}
+
+			.collapse.show,
+			.collapsing {
+				background: rgba(0, 0, 0);
+			}
+
+			.nav-link {
+				align-items: center;
+				display: flex;
+				padding-left: 40px;
+				white-space: nowrap;
+
+				color: #92190e;
+				i {
+					margin-right: 20px;
+				}
+				.menu-title {
+					color: inherit;
+					display: inline-block;
+					line-height: 1;
+					color: black;
+					vertical-align: middle;
+					cursor: pointer;
+				}
+			}
+
+			&.active {
+				> .nav-link {
+					color: white;
+				}
+
+				&.not-navigation-link {
+					position: relative;
+				}
+			}
+
+			&:not(.sub-menu) {
+				> .nav-item {
+					&:hover {
+						&:not(.nav-profile) {
+							> .nav-link {
+								background: $sidebar-light-menu-hover-bg;
+								color: $sidebar-light-menu-hover-color;
+							}
+						}
+					}
+				}
+			}
+
+			&.sub-menu {
+				margin-bottom: 0;
+				padding: $sidebar-submenu-padding;
+
+				.rtl & {
+					padding: 0 4rem 0 0;
+				}
+
+				.nav-item {
+					.nav-link {
+						color: $sidebar-light-submenu-color;
+						padding: $sidebar-submenu-item-padding;
+						font-size: $sidebar-submenu-font-size;
+						line-height: 1;
+						height: auto;
+
+						&.active {
+							color: $sidebar-light-menu-active-color;
+							background: transparent;
+
+							&:before {
+								background: $sidebar-light-menu-active-color;
+							}
+						}
+					}
+
+					&:hover {
+						> .nav-link {
+							background: $sidebar-light-submenu-hover-bg;
+							color: $sidebar-light-submenu-hover-color;
+
+							&:before {
+								background: $sidebar-light-submenu-hover-color;
+							}
+						}
+					}
+				}
+			}
+
+			&.sub-menu2 {
+				margin-bottom: 0;
+				padding: $sidebar-submenu2-padding;
+
+				.rtl & {
+					padding: 0 4rem 0 0;
+				}
+
+				.nav-item {
+					.nav-link {
+						color: $sidebar-light-submenu-color;
+						padding: $sidebar-submenu-item-padding;
+						font-size: $sidebar-submenu-font-size;
+						line-height: 1;
+						height: auto;
+
+						&.active {
+							color: $sidebar-light-menu-active-color;
+							background: transparent;
+
+							&:before {
+								background: $sidebar-light-menu-active-color;
+							}
+						}
+					}
+
+					&:hover {
+						> .nav-link {
+							background: $sidebar-light-submenu-hover-bg;
+							color: $sidebar-light-submenu-hover-color;
+
+							&:before {
+								background: $sidebar-light-submenu-hover-color;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+`;
+var ConfigurationOption = styled5.nav`
+	position: fixed;
+	top: 50px;
+	right: 0;
+	min-height: 100vh;
+	box-shadow: 7px 0px 14px 1px rgba(201, 196, 196, 0.51);
+	-webkit-box-shadow: 7px 0px 14px 1px rgba(201, 196, 196, 0.51);
+	-moz-box-shadow: 7px 0px 14px 1px rgba(201, 196, 196, 0.51);
+	min-height: calc(100vh);
+
+	font-family: 'Inter', sans-serif;
+	padding: 0;
+	width: ${(props) => props.active ? "300px" : "0px"};
+	z-index: 11;
+	transition: width 0.2s ease-in-out;
+	overflow: hidden !important;
+`;
+var ItemLinkSidebar = styled5(Link2)`
+	padding: 10px 25px;
+	display: flex;
+	align-items: center;
+	gap: 30px;
+	color: #343a40;
+	text-decoration: none;
+	font-family: 'Inter', sans-serif;
+	&:hover {
+		color: white !important;
+		text-decoration: none;
+		background: #92190e;
+		.icon-sidebar {
+			color: white !important;
+		}
+	}
+`;
+
+// src/styled-components/template.ts
+import styled6 from "styled-components";
+var Main = styled6.main`
+	width: 100%;
+	min-height: 90vh;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	background-color: white;
+	padding: 10px 60px;
+	position: relative;
+	padding-left: ${(props) => {
+  return props.activeDrawer ? `300px` : `30px`;
+}};
+	@media (max-width: 470px) {
+		padding: 10px 10px;
+	}
+`;
+var CloseIcon = styled6.button`
+	color: black;
+	text-decoration: none;
+	border: none;
+	padding: 10px 10px;
+	background-color: white;
+	border-radius: 50%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	top: 10px;
+	right: 10px;
+	text-align: center;
+	&:hover {
+		color: black;
+		text-decoration: none;
+		background-color: #e8e8e8;
+	}
+`;
+
+// src/layout/AppBreadcrumb.tsx
+import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+var AppBreadCrumb = ({ title, paths }) => {
+  const { setRoutes } = useContext2(BreadCrumbContext);
+  useEffect7(() => {
+    if (!(paths == null ? void 0 : paths.length))
+      return;
+    setRoutes(paths != null ? paths : []);
+  }, []);
+  return /* @__PURE__ */ jsx10(BreadCrumbTitle, { children: title != null ? title : "Home" });
+};
+var AppBreadCrumbNav = ({ paths }) => {
+  const { active, path, routes, setRoutes } = useContext2(BreadCrumbContext);
+  const navigate = useNavigate();
+  const { updateList } = useContext2(HistoryContext);
+  useEffect7(() => {
+    updateList({ name: active, path });
+  }, [path, active]);
+  useEffect7(() => {
+    setRoutes(paths != null ? paths : []);
+  }, [paths]);
+  return /* @__PURE__ */ jsxs4(Breadcrumb, { children: [
+    /* @__PURE__ */ jsxs4("div", { className: "d-flex align-items-center", children: [
+      /* @__PURE__ */ jsx10(Link3, { to: "/", className: "link", children: "HOME" }),
+      routes.length > 0 && /* @__PURE__ */ jsx10(VscChevronRight, { color: "black" }),
+      routes.length > 0 ? routes.map((i, idx, arr) => {
+        if (i.route === -1) {
+          return /* @__PURE__ */ jsxs4("span", { className: "link", onClick: () => navigate(-1), children: [
+            i.title,
+            " ",
+            idx + 1 === arr.length ? "" : /* @__PURE__ */ jsx10(VscChevronRight, { color: "black" })
+          ] }, idx);
+        }
+        return /* @__PURE__ */ jsxs4(Link3, { to: i.route, className: "link", children: [
+          i.title,
+          " ",
+          idx + 1 === arr.length ? "" : /* @__PURE__ */ jsx10(VscChevronRight, { color: "black" })
+        ] }, idx);
+      }) : ""
+    ] }),
+    /* @__PURE__ */ jsx10(
+      CloseIcon,
+      {
+        onClick: () => {
+          if ((routes == null ? void 0 : routes.length) === 1) {
+            navigate("/");
+            setRoutes([]);
+            return;
+          }
+          navigate(`${routes && routes[(routes == null ? void 0 : routes.length) - 2].route}`);
+        },
+        children: /* @__PURE__ */ jsx10(MdClose, { fontSize: 20 })
+      }
+    )
+  ] });
+};
+
+// src/layout/AppLoader.tsx
+import { useEffect as useEffect8 } from "react";
+import ReactDOM from "react-dom";
+import { jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+var LoaderGrid = () => {
+  const Loader = /* @__PURE__ */ jsxs5("div", { className: "k-loading-mask", children: [
+    /* @__PURE__ */ jsx11("span", { className: "k-loading-text", children: "Loading" }),
+    /* @__PURE__ */ jsx11("div", { className: "k-loading-image" }),
+    /* @__PURE__ */ jsx11("div", { className: "k-loading-color" })
+  ] });
+  const gridContent = document && document.querySelector(".k-grid-content");
+  const reportContent = document && document.querySelector(".loading-report");
+  return gridContent ? ReactDOM.createPortal(Loader, gridContent) : reportContent ? ReactDOM.createPortal(Loader, reportContent) : Loader;
+};
+var AppLoader = (props) => {
+  const { type = "grid", parent, minDuration } = props;
+  const parentEl = type === "grid" ? document.querySelector(parent != null ? parent : ".k-grid-container") : parent ? document.querySelector(parent) : null;
+  const Loading = /* @__PURE__ */ jsxs5("div", { className: `${type}-loading k-loading-mask`, children: [
+    /* @__PURE__ */ jsx11("span", { className: "k-loading-text", children: "Loading" }),
+    /* @__PURE__ */ jsx11("div", { className: "k-loading-image" }),
+    /* @__PURE__ */ jsx11("div", { className: "k-loading-color" })
+  ] });
+  useEffect8(() => {
+    if (type === "button") {
+      const loadingEl = document.createElement("div");
+      loadingEl.className = "icon button-loading k-loading-mask";
+      loadingEl.innerHTML = `
+            <div class="k-loading-image"></div>
+        `;
+      if (parentEl) {
+        const button = parentEl;
+        button.classList.add("btn-loading");
+        button.disabled = true;
+        button.insertBefore(loadingEl, button.firstChild);
+      }
+      return () => {
+        if (parentEl) {
+          if (minDuration) {
+            setTimeout(() => {
+              const button = parentEl;
+              button.classList.remove("btn-loading");
+              button.removeChild(loadingEl);
+              button.disabled = false;
+            }, minDuration);
+          } else {
+            const button = parentEl;
+            button.classList.remove("btn-loading");
+            button.removeChild(loadingEl);
+            button.disabled = false;
+          }
+        }
+      };
+    }
+  }, []);
+  return type === "button" ? null : parentEl ? ReactDOM.createPortal(Loading, parentEl) : Loading;
+};
+
+// src/layout/NavOptions.tsx
+import { Dropdown } from "react-bootstrap";
+import { BsArrowsFullscreen } from "react-icons/bs";
+import { FiCheckCircle, FiFilter, FiPlusSquare, FiRefreshCcw, FiSave } from "react-icons/fi";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+var NavOptions = ({
+  exportExcel,
+  customButtons,
+  onCreate,
+  onRefresh,
+  onSelect,
+  onClear,
+  onExpandScreen
+}) => {
+  return /* @__PURE__ */ jsxs6(MenuOptions, { children: [
+    onCreate && /* @__PURE__ */ jsxs6("button", { className: "button-option", onClick: onCreate, children: [
+      /* @__PURE__ */ jsx12(FiPlusSquare, { className: "icon" }),
+      " ",
+      /* @__PURE__ */ jsx12("span", { className: "text", children: "New" })
+    ] }),
+    onRefresh && /* @__PURE__ */ jsxs6("button", { className: "button-option", onClick: onRefresh, children: [
+      /* @__PURE__ */ jsx12(FiRefreshCcw, { className: "icon" }),
+      " ",
+      /* @__PURE__ */ jsx12("span", { className: "text", children: "Refresh" })
+    ] }),
+    exportExcel && exportExcel.length > 0 && /* @__PURE__ */ jsxs6(Dropdown, { className: "button-option", children: [
+      /* @__PURE__ */ jsxs6(
+        Dropdown.Toggle,
+        {
+          id: "btnExport",
+          className: "p-2 bg-light text-dark border-0 font-weight-bold",
+          title: "Export to Excel",
+          children: [
+            /* @__PURE__ */ jsx12(FiSave, { className: "icon" }),
+            /* @__PURE__ */ jsx12(
+              "span",
+              {
+                style: {
+                  fontSize: "13px",
+                  fontFamily: '"Inter", sans-serif'
+                },
+                className: "text",
+                children: "Export"
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx12(Dropdown.Menu, { children: exportExcel.map((item, index) => {
+        return /* @__PURE__ */ jsxs6(Dropdown.Item, { onClick: item.onAction, children: [
+          /* @__PURE__ */ jsx12("i", { className: `${item.classNameIcon}   mr-2` }),
+          " ",
+          item.title
+        ] }, index);
+      }) })
+    ] }),
+    onSelect && /* @__PURE__ */ jsxs6("button", { className: "button-option", onClick: onSelect, children: [
+      /* @__PURE__ */ jsx12(FiCheckCircle, { className: "icon" }),
+      " ",
+      /* @__PURE__ */ jsx12("span", { className: "text", children: "Select All" })
+    ] }),
+    onClear && /* @__PURE__ */ jsxs6("button", { className: "button-option", onClick: onClear, children: [
+      /* @__PURE__ */ jsx12(FiFilter, { className: "icon" }),
+      " ",
+      /* @__PURE__ */ jsx12("span", { className: "text", children: "Clear Filters" })
+    ] }),
+    onExpandScreen && /* @__PURE__ */ jsxs6("button", { className: "button-option", onClick: onExpandScreen, children: [
+      /* @__PURE__ */ jsx12(BsArrowsFullscreen, { className: "icon" }),
+      " ",
+      /* @__PURE__ */ jsx12("span", { className: "text", children: "Full Page" })
+    ] }),
+    customButtons == null ? void 0 : customButtons.map((custom, index) => {
+      if (custom.render) {
+        return custom.render;
+      }
+      return /* @__PURE__ */ jsxs6("button", { className: "button-option", onClick: custom.onAction, children: [
+        custom.Icon !== void 0 && /* @__PURE__ */ jsx12(custom.Icon, { className: "icon" }),
+        /* @__PURE__ */ jsx12("span", { className: "text", children: custom.title })
+      ] }, index);
+    })
+  ] });
+};
+
+// src/layout/title.tsx
+import { jsx as jsx13 } from "react/jsx-runtime";
+var Title = ({ title }) => {
+  return /* @__PURE__ */ jsx13(TitlePage, { children: title != null ? title : "Home" });
+};
+export {
+  AppBreadCrumb,
+  AppBreadCrumbNav,
+  AppLoader,
+  BreadCrumbContext,
+  BreadCrumbContextProvider,
+  BreadCrumbTitle,
+  Breadcrumb,
+  Button,
+  CloseIcon,
+  DrawerContext,
+  DrawerContextProvider,
+  DropEnumList,
+  GlobalProvider,
+  HistoryContext,
+  HistoryContextProvider,
+  ItemLinkSidebar,
+  ItemSidebar,
+  LoaderGrid,
+  Main,
+  MenuItem,
+  MenuOptions,
+  MenuTitle,
+  NavOptions,
+  Navbar,
+  SidebarMainContext,
+  SidebarMainContextProvider,
+  SidebarNavigation,
+  Tab,
+  Tabs,
+  Title,
+  useLocalStorage,
+  usePrevious,
+  useStep
+};