@solidstarters/solid-core-ui 1.1.210 → 1.1.212

package/dist/components/layout/AppSidebar.tsx

@@ -0,0 +1,232 @@
+import { ToastContainer } from "../../helpers/ToastContainer";
+import { useGetSolidMenuBasedOnRoleQuery } from "../../redux/api/solidMenuApi";
+import { showNavbar, toggleNavbar, hideNavbar } from "../../redux/features/navbarSlice";
+import { setIsAuthenticated, setUser } from "../../redux/features/userSlice";
+import { signOut, useSession } from "next-auth/react";
+import { useEffect, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import NavbarTwoMenu from "./navbar-two-menu";
+import UserProfileMenu from "./user-profile-menu";
+import Image from "next/image";
+import AppBuilderSvg from '../../resources/images/menu/app-builder.svg'
+import SettingImage from '../../resources/images/Navigation/SolidSettinsIcon.svg'
+import { Avatar } from "primereact/avatar";
+import { usePathname } from "next/navigation";
+
+// import menu from "../../helpers/menu";
+
+const AppSidebar = () => {
+    const dispatch = useDispatch();
+    const pathname = usePathname();
+    // const [show, setShow] = useState(false);
+    const visibleNavbar = useSelector(
+        (state: any) => state.navbarState.visibleNavbar
+    );
+    const { data: menu } = useGetSolidMenuBasedOnRoleQuery("");
+
+
+    const [currentMenu, setCurrentMenu] = useState();
+    const [currentMainMenu, setCurrentMainMenu] = useState();
+    const [searchTerm, setSearchTerm] = useState("");
+   
+    useEffect(() => {
+        if (menu) {
+            setCurrentMenu(menu && menu.data.length > 0 && menu.data.filter((m: any) => m.key === process.env.NEXT_PUBLIC_DEFAULT_MENU_KEY)[0]?.children);
+            setCurrentMainMenu(menu && menu.data.length > 0 && menu.data.filter((m: any) => m.key === process.env.NEXT_PUBLIC_DEFAULT_MENU_KEY)[0]?.title)
+        }
+    }, [menu])
+
+    const { data } = useSession();
+
+    // const handleToggle = () => setShow(!show);
+    const handleToggle = () => dispatch(toggleNavbar());
+    const handleMenu = (m: any) => {
+        // setShow(true);
+        dispatch(showNavbar());
+        setCurrentMainMenu(m.title);
+        setCurrentMenu(m.children);
+    };
+
+    useEffect(() => {
+        // Check if screen is small at the time of route change
+        if (window.innerWidth <= 1199) {
+            dispatch(hideNavbar());
+        }
+    }, [pathname, dispatch]);
+
+
+    useEffect(() => {
+        if (data) {
+            dispatch(setUser(data?.user));
+            dispatch(setIsAuthenticated(true));
+        }
+    }, [data]);
+
+    const logoutHandler = () => {
+        signOut();
+    };
+
+    const handleSearch = () => {
+        // TODO: Handle the search logic here
+
+    };
+
+    const [isSearchShow, setSearchShow] = useState(false);
+    const searchRef = useRef<HTMLDivElement>(null);
+
+    const handleClickOutside = (event: any) => {
+        if (searchRef.current && !searchRef.current.contains(event.target)) {
+            setSearchShow(false);
+        }
+    };
+
+    useEffect(() => {
+        if (isSearchShow) {
+            document.addEventListener("mousedown", handleClickOutside);
+        } else {
+            document.removeEventListener("mousedown", handleClickOutside);
+        }
+
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
+        };
+    }, [isSearchShow]);
+
+    const additionalMenu = {
+        title: "General Settings",
+        key: "general-settings",
+        children: [
+            {
+                title: "Settings",
+                path: "",
+                key: "settings-menu-item",
+                children: [
+                    {
+                        title: "App Settings",
+                        path: "/admin/settings/app-settings",
+                        key: "app-setting"
+                    },
+                    {
+                        title: "Authentication Settings",
+                        path: "/admin/settings/authentication-settings",
+                        key: "auth-setting"
+                    },
+                    {
+                        title: "Misc",
+                        path: "/admin/settings/misc-settings",
+                        key: "misc-setting"
+                    }
+                ]
+            }
+        ],
+        icon: process.env.NEXT_PUBLIC_SETTINGS_ICON ? process.env.NEXT_PUBLIC_SETTINGS_ICON : SettingImage
+    };
+    const updatedMenuData = menu?.data
+        ? [...menu.data, ...(process.env.NEXT_PUBLIC_SHOW_SETTINGS === "true" ? [additionalMenu] : [])]
+        : process.env.NEXT_PUBLIC_SHOW_SETTINGS === "true"
+            ? [additionalMenu]
+            : [];
+
+            
+
+    return (
+        <>
+            <ToastContainer />
+            {visibleNavbar && (
+                <div 
+                    className="sidebar-backdrop"
+                    onClick={handleToggle}
+                />
+            )}
+            {/* commented this as this is not working properly @Jenendar to figure this out... */}
+            {(visibleNavbar || currentMainMenu) && (
+                <div
+                    className={`sidebar-toggle-button  ${!visibleNavbar || !currentMainMenu  ? "s-collapsed hidden md:flex" : ""}`}
+                    onClick={handleToggle}
+                // severity="secondary"
+                >
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+                        <rect x="0.3" y="0.3" width="23.4" height="23.4" rx="2.1" fill="white" />
+                        <rect x="0.3" y="0.3" width="23.4" height="23.4" rx="2.1" stroke="#D8E2EA" strokeWidth="0.6" />
+                        <path d="M5.09735 16V14.6667H13.5929V16H5.09735ZM5.09735 12.6667V11.3333H11.6324V12.6667H5.09735ZM5.09735 9.33333V8H13.5929V9.33333H5.09735Z" fill="#8D9199" />
+                        <path d="M16.2621 12L18.9026 14.3L18.099 15L14.6549 12L18.099 9L18.9026 9.7L16.2621 12Z" fill="#8D9199" />
+                    </svg>
+                </div>
+            )}
+
+            <div className={`sidebar-left ${visibleNavbar ? "open" : ""}`}>
+                <div className="navbar-menu">
+                    {menu?.data.length > 0 && menu?.data.map((m: any) => {
+                        const iconSrc =
+                            typeof m.icon === "string"
+                                ? m.icon
+                                : m.icon && typeof m.icon.src === "string"
+                                    ? m.icon.src
+                                    : null;
+                        return (
+                            <a
+                                key={m.title}
+                                className={`flex align-items-center menu-item ${currentMainMenu === m.title ? "active-menu-image" : ""}`}
+                                onClick={() => handleMenu(m)}
+                                style={{cursor:'pointer'}}
+                            >
+                                {m.icon ?
+                                    <Image
+                                        src={iconSrc.startsWith("/") ? iconSrc : `${process.env.API_URL}/${iconSrc}`}
+                                        alt={m.title}
+                                        height={30}
+                                        width={30}
+                                        className="relative"
+                                        unoptimized
+                                    />
+                                    :
+                                    <div>
+                                        <Avatar label={m.title.charAt(0)} shape="circle" style={{ backgroundColor: 'var(--primary-color)', fontWeight: 500 }} />
+                                    </div>
+                                }
+                            </a>
+                        )
+                    })}
+                </div>
+
+                <UserProfileMenu></UserProfileMenu>
+            </div>
+            {currentMenu && (
+                <div className={`sidebar-right ${visibleNavbar ? "open" : ""}`}>
+
+                    <div className="flex relative justify-content-between align-items-center py-3 xl:py-4 px-3">
+                        <div className="text-base sidebar-title font-semibold">{currentMainMenu && currentMainMenu}</div>
+                        {/* <button
+                            className="sidebar-toggle-button"
+                            onClick={handleToggle}
+                        >
+                            <img
+                                style={{ cursor: "pointer" }}
+                                src={`/images/menu-toggle.png`}
+                                alt="Solid"
+                            />
+                        </button> */}
+                    </div>
+                    {/* <div className="w-full px-3 mb-3" style={{ position: 'relative' }} ref={searchRef}>
+                        <IconField iconPosition="left">
+                            <InputIcon className="pi pi-search text-sm"> </InputIcon>
+                            <InputText placeholder="Search" className="small-input text-sm w-full pr-6" />
+                        </IconField>
+                        <div className="absolute max-h-1rem" style={{ top: 5, right: 20 }}>
+                            <img
+                                style={{ cursor: "pointer", maxHeight: '1.3rem' }}
+                                src="/images/icons/jump-to-icon.png"
+                                alt="Solid"
+                            />
+                        </div>
+                    </div> */}
+                    <div className="px-3 solid-sidebar-menuitems-wrapper">
+                        <NavbarTwoMenu menuItems={currentMenu}></NavbarTwoMenu>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+};
+
+export default AppSidebar;

package/dist/components/layout/ButtonLoader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLoader.d.ts","sourceRoot":"","sources":["../../../src/components/layout/ButtonLoader.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY,+CAEjB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ButtonLoader.d.ts","sourceRoot":"./","sources":["components/layout/ButtonLoader.tsx"],"names":[],"mappings":"AAEA,QAAA,MAAM,YAAY,+CAEjB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/layout/ButtonLoader.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-var ButtonLoader = function () {
+const ButtonLoader = () => {
     return _jsx("div", { className: "lds-dual-ring" });
 };
 export default ButtonLoader;

package/dist/components/layout/ButtonLoader.js.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLoader.js","sourceRoot":"","sources":["../../../src/components/layout/ButtonLoader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,IAAM,YAAY,GAAG;IACnB,OAAO,cAAK,SAAS,EAAC,eAAe,GAAO,CAAC;AAC/C,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"ButtonLoader.js","sourceRoot":"./","sources":["components/layout/ButtonLoader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AAEb,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,OAAO,cAAK,SAAS,EAAC,eAAe,GAAO,CAAC;AAC/C,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["\"use client\";\n\nconst ButtonLoader = () => {\n  return <div className=\"lds-dual-ring\"></div>;\n};\n\nexport default ButtonLoader;\n"]}

package/dist/components/layout/ButtonLoader.tsx

@@ -0,0 +1,7 @@
+"use client";
+
+const ButtonLoader = () => {
+  return <div className="lds-dual-ring"></div>;
+};
+
+export default ButtonLoader;

package/dist/components/layout/CustomPagination.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CustomPagination.d.ts","sourceRoot":"","sources":["../../../src/components/layout/CustomPagination.tsx"],"names":[],"mappings":""}
+{"version":3,"file":"CustomPagination.d.ts","sourceRoot":"./","sources":["components/layout/CustomPagination.tsx"],"names":[],"mappings":""}

package/dist/components/layout/CustomPagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomPagination.js","sourceRoot":"","sources":["../../../src/components/layout/CustomPagination.tsx"],"names":[],"mappings":";AAAA,gBAAgB;AAEhB,gEAAgE;AAChE,gDAAgD;AAEhD,oBAAoB;AACpB,wBAAwB;AACxB,gCAAgC;AAChC,IAAI;AAEJ,4EAA4E;AAC5E,gCAAgC;AAChC,4CAA4C;AAC5C,8CAA8C;AAC9C,yBAAyB;AAEzB,qBAAqB;AAErB,wDAAwD;AACxD,2CAA2C;AAC3C,mEAAmE;AAEnE,uCAAuC;AACvC,gDAAgD;AAChD,iBAAiB;AACjB,mDAAmD;AACnD,UAAU;AAEV,8EAA8E;AAC9E,2BAA2B;AAC3B,QAAQ;AACR,OAAO;AACP,aAAa;AACb,YAAY;AACZ,8CAA8C;AAC9C,+DAA+D;AAC/D,wBAAwB;AACxB,gCAAgC;AAChC,6CAA6C;AAC7C,mDAAmD;AACnD,0CAA0C;AAC1C,oCAAoC;AACpC,oCAAoC;AACpC,sCAAsC;AACtC,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AACpC,eAAe;AACf,iBAAiB;AACjB,WAAW;AACX,aAAa;AACb,OAAO;AACP,KAAK;AAEL,mCAAmC"}
+{"version":3,"file":"CustomPagination.js","sourceRoot":"./","sources":["components/layout/CustomPagination.tsx"],"names":[],"mappings":";AAAA,gBAAgB;AAEhB,gEAAgE;AAChE,gDAAgD;AAEhD,oBAAoB;AACpB,wBAAwB;AACxB,gCAAgC;AAChC,IAAI;AAEJ,4EAA4E;AAC5E,gCAAgC;AAChC,4CAA4C;AAC5C,8CAA8C;AAC9C,yBAAyB;AAEzB,qBAAqB;AAErB,wDAAwD;AACxD,2CAA2C;AAC3C,mEAAmE;AAEnE,uCAAuC;AACvC,gDAAgD;AAChD,iBAAiB;AACjB,mDAAmD;AACnD,UAAU;AAEV,8EAA8E;AAC9E,2BAA2B;AAC3B,QAAQ;AACR,OAAO;AACP,aAAa;AACb,YAAY;AACZ,8CAA8C;AAC9C,+DAA+D;AAC/D,wBAAwB;AACxB,gCAAgC;AAChC,6CAA6C;AAC7C,mDAAmD;AACnD,0CAA0C;AAC1C,oCAAoC;AACpC,oCAAoC;AACpC,sCAAsC;AACtC,oCAAoC;AACpC,oCAAoC;AACpC,oCAAoC;AACpC,eAAe;AACf,iBAAiB;AACjB,WAAW;AACX,aAAa;AACb,OAAO;AACP,KAAK;AAEL,mCAAmC","sourcesContent":["// \"use client\";\n\n// import { useRouter, useSearchParams } from \"next/navigation\";\n// import Pagination from \"react-js-pagination\";\n\n// interface Props {\n//   resPerPage: number;\n//   filteredRoomsCount: number;\n// }\n\n// const CustomPagination = ({ resPerPage, filteredRoomsCount }: Props) => {\n//   const router = useRouter();\n//   const searchParams = useSearchParams();\n//   let page = searchParams.get(\"page\") || 1;\n//   page = Number(page);\n\n//   let queryParams;\n\n//   const handlePageChange = (currentPage: string) => {\n//     if (typeof window !== \"undefined\") {\n//       queryParams = new URLSearchParams(window.location.search);\n\n//       if (queryParams.has(\"page\")) {\n//         queryParams.set(\"page\", currentPage);\n//       } else {\n//         queryParams.append(\"page\", currentPage);\n//       }\n\n//       const path = `${window.location.pathname}?${queryParams.toString()}`;\n//       router.push(path);\n//     }\n//   };\n//   return (\n//     <div>\n//       {resPerPage < filteredRoomsCount && (\n//         <div className=\"d-flex justify-content-center mt-5\">\n//           <Pagination\n//             activePage={page}\n//             itemsCountPerPage={resPerPage}\n//             totalItemsCount={filteredRoomsCount}\n//             onChange={handlePageChange}\n//             nextPageText={\"Next\"}\n//             prevPageText={\"Prev\"}\n//             firstPageText={\"First\"}\n//             lastPageText={\"Last\"}\n//             itemClass=\"page-item\"\n//             linkClass=\"page-link\"\n//           />\n//         </div>\n//       )}\n//     </div>\n//   );\n// };\n\n// export default CustomPagination;\n"]}

package/dist/components/layout/CustomPagination.tsx

@@ -0,0 +1,55 @@
+// "use client";
+
+// import { useRouter, useSearchParams } from "next/navigation";
+// import Pagination from "react-js-pagination";
+
+// interface Props {
+//   resPerPage: number;
+//   filteredRoomsCount: number;
+// }
+
+// const CustomPagination = ({ resPerPage, filteredRoomsCount }: Props) => {
+//   const router = useRouter();
+//   const searchParams = useSearchParams();
+//   let page = searchParams.get("page") || 1;
+//   page = Number(page);
+
+//   let queryParams;
+
+//   const handlePageChange = (currentPage: string) => {
+//     if (typeof window !== "undefined") {
+//       queryParams = new URLSearchParams(window.location.search);
+
+//       if (queryParams.has("page")) {
+//         queryParams.set("page", currentPage);
+//       } else {
+//         queryParams.append("page", currentPage);
+//       }
+
+//       const path = `${window.location.pathname}?${queryParams.toString()}`;
+//       router.push(path);
+//     }
+//   };
+//   return (
+//     <div>
+//       {resPerPage < filteredRoomsCount && (
+//         <div className="d-flex justify-content-center mt-5">
+//           <Pagination
+//             activePage={page}
+//             itemsCountPerPage={resPerPage}
+//             totalItemsCount={filteredRoomsCount}
+//             onChange={handlePageChange}
+//             nextPageText={"Next"}
+//             prevPageText={"Prev"}
+//             firstPageText={"First"}
+//             lastPageText={"Last"}
+//             itemClass="page-item"
+//             linkClass="page-link"
+//           />
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export default CustomPagination;

package/dist/components/layout/DashboardHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardHeader.d.ts","sourceRoot":"","sources":["../../../src/components/layout/DashboardHeader.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,eAAe,+CAkFpB,CAAA;AACD,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DashboardHeader.d.ts","sourceRoot":"./","sources":["components/layout/DashboardHeader.tsx"],"names":[],"mappings":"AAKA,QAAA,MAAM,eAAe,+CAkFpB,CAAA;AACD,eAAe,eAAe,CAAC"}

package/dist/components/layout/DashboardHeader.js

@@ -3,10 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from "primereact/button";
 import { Menu } from "primereact/menu";
 import { useRef } from "react";
-var DashboardHeader = function () {
-    var menuLeft = useRef(null);
-    var toast = useRef(null);
-    var items = [
+const DashboardHeader = () => {
+    const menuLeft = useRef(null);
+    const toast = useRef(null);
+    const items = [
         {
             label: 'Options',
             items: [
@@ -21,7 +21,7 @@ var DashboardHeader = function () {
             ]
         }
     ];
-    return (_jsxs("div", { className: "flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static", style: { height: "60px" }, children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(Button, { label: "New", size: "small", type: "submit", className: "small-button" }), _jsx(Menu, { model: items, popup: true, ref: menuLeft, id: "popup_menu_left" }), _jsx("div", { className: "ml-2", children: _jsx("div", { style: { position: "relative" }, children: _jsx("a", { onClick: function (event) { return menuLeft.current.toggle(event); }, children: _jsx("i", { className: "pi pi-cog" }) }) }) })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx("div", { className: "bgCircle", children: _jsxs("div", { style: { position: "relative" }, children: [_jsx("i", { className: "pi pi-bell" }), _jsx("span", { className: "topbar-badge" })] }) }), _jsx("div", { className: "bgCircle ml-3", children: _jsxs("div", { style: { position: "relative" }, children: [_jsx("i", { className: "pi pi-envelope" }), _jsx("span", { className: "topbar-badge" })] }) }), _jsxs("div", { className: "topbar-profile", children: [_jsxs("button", { className: "topbar-profile-button p-link", type: "button", children: [_jsx("img", { alt: "avatar", src: "/images/dashboard/Ellipse 1.svg" }), _jsxs("span", { className: "profile-details", children: [_jsx("span", { className: "profile-name", children: "Gene Russell" }), _jsx("span", { className: "profile-email", children: "ben95@example.com" })] }), _jsx("i", { className: "pi pi-angle-down" })] }), _jsx("ul", { className: "list-none p-3 m-0 border-round shadow-2 absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto hidden", children: _jsxs("li", { children: [_jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx("i", { className: "pi pi-user mr-3" }), _jsx("span", { children: "Profile" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx("i", { className: "pi pi-inbox mr-3" }), _jsx("span", { children: "Inbox" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx("i", { className: "pi pi-cog mr-3" }), _jsx("span", { children: "Settings" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx("i", { className: "pi pi-power-off mr-3" }), _jsx("span", { children: "Sign Out" })] })] }) })] })] })] }));
+    return (_jsxs("div", { className: "flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static", style: { height: "60px" }, children: [_jsxs("div", { className: "flex align-items-center", children: [_jsx(Button, { label: "New", size: "small", type: "submit", className: "small-button" }), _jsx(Menu, { model: items, popup: true, ref: menuLeft, id: "popup_menu_left" }), _jsx("div", { className: "ml-2", children: _jsx("div", { style: { position: "relative" }, children: _jsx("a", { onClick: (event) => menuLeft.current.toggle(event), children: _jsx("i", { className: "pi pi-cog" }) }) }) })] }), _jsxs("div", { className: "flex align-items-center", children: [_jsx("div", { className: "bgCircle", children: _jsxs("div", { style: { position: "relative" }, children: [_jsx("i", { className: "pi pi-bell" }), _jsx("span", { className: "topbar-badge" })] }) }), _jsx("div", { className: "bgCircle ml-3", children: _jsxs("div", { style: { position: "relative" }, children: [_jsx("i", { className: "pi pi-envelope" }), _jsx("span", { className: "topbar-badge" })] }) }), _jsxs("div", { className: "topbar-profile", children: [_jsxs("button", { className: "topbar-profile-button p-link", type: "button", children: [_jsx("img", { alt: "avatar", src: "/images/dashboard/Ellipse 1.svg" }), _jsxs("span", { className: "profile-details", children: [_jsx("span", { className: "profile-name", children: "Gene Russell" }), _jsx("span", { className: "profile-email", children: "ben95@example.com" })] }), _jsx("i", { className: "pi pi-angle-down" })] }), _jsx("ul", { className: "list-none p-3 m-0 border-round shadow-2 absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto hidden", children: _jsxs("li", { children: [_jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx("i", { className: "pi pi-user mr-3" }), _jsx("span", { children: "Profile" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx("i", { className: "pi pi-inbox mr-3" }), _jsx("span", { children: "Inbox" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx("i", { className: "pi pi-cog mr-3" }), _jsx("span", { children: "Settings" })] }), _jsxs("a", { className: "p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer", children: [_jsx("i", { className: "pi pi-power-off mr-3" }), _jsx("span", { children: "Sign Out" })] })] }) })] })] })] }));
 };
 export default DashboardHeader;
 //# sourceMappingURL=DashboardHeader.js.map

package/dist/components/layout/DashboardHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardHeader.js","sourceRoot":"","sources":["../../../src/components/layout/DashboardHeader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,IAAM,eAAe,GAAG;IAEpB,IAAM,QAAQ,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IACnC,IAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC3B,IAAM,KAAK,GAAG;QACV;YACI,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE;gBACH;oBACI,KAAK,EAAE,SAAS;oBAChB,IAAI,EAAE,eAAe;iBACxB;gBACD;oBACI,KAAK,EAAE,QAAQ;oBACf,IAAI,EAAE,cAAc;iBACvB;aACJ;SACJ;KACJ,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAC,mHAAmH,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,aACxJ,eAAK,SAAS,EAAC,yBAAyB,aACpC,KAAC,MAAM,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,cAAc,GAAG,EAC1E,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,QAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAC,iBAAiB,GAAG,EAChE,cAAK,SAAS,EAAC,MAAM,YACjB,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YAChC,YAAG,OAAO,EAAE,UAAC,KAAU,IAAK,OAAA,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,EAA9B,CAA8B,YACtD,YAAG,SAAS,EAAC,WAAW,GAAK,GAC7B,GAEF,GACJ,IAEJ,EACN,eAAK,SAAS,EAAC,yBAAyB,aACpC,cAAK,SAAS,EAAC,UAAU,YACrB,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAChC,YAAG,SAAS,EAAC,YAAY,GAAK,EAC9B,eAAM,SAAS,EAAC,cAAc,GACvB,IACL,GACJ,EACN,cAAK,SAAS,EAAC,eAAe,YAC1B,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAChC,YAAG,SAAS,EAAC,gBAAgB,GAAK,EAClC,eAAM,SAAS,EAAC,cAAc,GACvB,IACL,GACJ,EACN,eAAK,SAAS,EAAC,gBAAgB,aAC3B,kBAAQ,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAC,QAAQ,aAC1D,cAAK,GAAG,EAAC,QAAQ,EAAC,GAAG,EAAC,iCAAiC,GAAG,EAC1D,gBAAM,SAAS,EAAC,iBAAiB,aAC7B,eAAM,SAAS,EAAC,cAAc,6BAAoB,EAClD,eAAM,SAAS,EAAC,eAAe,kCAAyB,IACrD,EACP,YAAG,SAAS,EAAC,kBAAkB,GAAK,IAC/B,EACT,aAAI,SAAS,EAAC,4HAA4H,YACtI,yBACI,aAAG,SAAS,EAAC,gIAAgI,aACzI,YAAG,SAAS,EAAC,iBAAiB,GAAK,EACnC,qCAAoB,IACpB,EACJ,aAAG,SAAS,EAAC,gIAAgI,aACzI,YAAG,SAAS,EAAC,kBAAkB,GAAK,EACpC,mCAAkB,IAAI,EAC1B,aAAG,SAAS,EAAC,gIAAgI,aACzI,YAAG,SAAS,EAAC,gBAAgB,GAAK,EAClC,sCAAqB,IACrB,EACJ,aAAG,SAAS,EAAC,gIAAgI,aACzI,YAAG,SAAS,EAAC,sBAAsB,GAAK,EACxC,sCAAqB,IACrB,IACH,GACJ,IACH,IACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAA;AACD,eAAe,eAAe,CAAC"}
+{"version":3,"file":"DashboardHeader.js","sourceRoot":"./","sources":["components/layout/DashboardHeader.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAC;;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAE/B,MAAM,eAAe,GAAG,GAAG,EAAE;IAEzB,MAAM,QAAQ,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IACnC,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IAC3B,MAAM,KAAK,GAAG;QACV;YACI,KAAK,EAAE,SAAS;YAChB,KAAK,EAAE;gBACH;oBACI,KAAK,EAAE,SAAS;oBAChB,IAAI,EAAE,eAAe;iBACxB;gBACD;oBACI,KAAK,EAAE,QAAQ;oBACf,IAAI,EAAE,cAAc;iBACvB;aACJ;SACJ;KACJ,CAAC;IAEF,OAAO,CACH,eAAK,SAAS,EAAC,mHAAmH,EAAC,KAAK,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,aACxJ,eAAK,SAAS,EAAC,yBAAyB,aACpC,KAAC,MAAM,IAAC,KAAK,EAAC,KAAK,EAAC,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,QAAQ,EAAC,SAAS,EAAC,cAAc,GAAG,EAC1E,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,EAAE,KAAK,QAAC,GAAG,EAAE,QAAQ,EAAE,EAAE,EAAC,iBAAiB,GAAG,EAChE,cAAK,SAAS,EAAC,MAAM,YACjB,cAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,YAChC,YAAG,OAAO,EAAE,CAAC,KAAU,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,YACtD,YAAG,SAAS,EAAC,WAAW,GAAK,GAC7B,GAEF,GACJ,IAEJ,EACN,eAAK,SAAS,EAAC,yBAAyB,aACpC,cAAK,SAAS,EAAC,UAAU,YACrB,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAChC,YAAG,SAAS,EAAC,YAAY,GAAK,EAC9B,eAAM,SAAS,EAAC,cAAc,GACvB,IACL,GACJ,EACN,cAAK,SAAS,EAAC,eAAe,YAC1B,eAAK,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,aAChC,YAAG,SAAS,EAAC,gBAAgB,GAAK,EAClC,eAAM,SAAS,EAAC,cAAc,GACvB,IACL,GACJ,EACN,eAAK,SAAS,EAAC,gBAAgB,aAC3B,kBAAQ,SAAS,EAAC,8BAA8B,EAAC,IAAI,EAAC,QAAQ,aAC1D,cAAK,GAAG,EAAC,QAAQ,EAAC,GAAG,EAAC,iCAAiC,GAAG,EAC1D,gBAAM,SAAS,EAAC,iBAAiB,aAC7B,eAAM,SAAS,EAAC,cAAc,6BAAoB,EAClD,eAAM,SAAS,EAAC,eAAe,kCAAyB,IACrD,EACP,YAAG,SAAS,EAAC,kBAAkB,GAAK,IAC/B,EACT,aAAI,SAAS,EAAC,4HAA4H,YACtI,yBACI,aAAG,SAAS,EAAC,gIAAgI,aACzI,YAAG,SAAS,EAAC,iBAAiB,GAAK,EACnC,qCAAoB,IACpB,EACJ,aAAG,SAAS,EAAC,gIAAgI,aACzI,YAAG,SAAS,EAAC,kBAAkB,GAAK,EACpC,mCAAkB,IAAI,EAC1B,aAAG,SAAS,EAAC,gIAAgI,aACzI,YAAG,SAAS,EAAC,gBAAgB,GAAK,EAClC,sCAAqB,IACrB,EACJ,aAAG,SAAS,EAAC,gIAAgI,aACzI,YAAG,SAAS,EAAC,sBAAsB,GAAK,EACxC,sCAAqB,IACrB,IACH,GACJ,IACH,IACJ,IACJ,CACT,CAAC;AACN,CAAC,CAAA;AACD,eAAe,eAAe,CAAC","sourcesContent":["\"use client\";\nimport { Button } from \"primereact/button\";\nimport { Menu } from \"primereact/menu\";\nimport { useRef } from \"react\";\n\nconst DashboardHeader = () => {\n\n    const menuLeft = useRef<any>(null);\n    const toast = useRef(null);\n    const items = [\n        {\n            label: 'Options',\n            items: [\n                {\n                    label: 'Refresh',\n                    icon: 'pi pi-refresh'\n                },\n                {\n                    label: 'Export',\n                    icon: 'pi pi-upload'\n                }\n            ]\n        }\n    ];\n\n    return (\n        <div className=\"flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static\" style={{ height: \"60px\" }}>\n            <div className=\"flex align-items-center\">\n                <Button label=\"New\" size=\"small\" type=\"submit\" className=\"small-button\" />\n                <Menu model={items} popup ref={menuLeft} id=\"popup_menu_left\" />\n                <div className=\"ml-2\">\n                    <div style={{ position: \"relative\" }}>\n                        <a onClick={(event: any) => menuLeft.current.toggle(event)}>\n                            <i className=\"pi pi-cog\"></i>\n                        </a>\n\n                    </div>\n                </div>\n\n            </div>\n            <div className=\"flex align-items-center\">\n                <div className=\"bgCircle\">\n                    <div style={{ position: \"relative\" }}>\n                        <i className=\"pi pi-bell\"></i>\n                        <span className=\"topbar-badge\">\n                        </span>\n                    </div>\n                </div>\n                <div className=\"bgCircle ml-3\">\n                    <div style={{ position: \"relative\" }}>\n                        <i className=\"pi pi-envelope\"></i>\n                        <span className=\"topbar-badge\">\n                        </span>\n                    </div>\n                </div>\n                <div className=\"topbar-profile\">\n                    <button className=\"topbar-profile-button p-link\" type=\"button\">\n                        <img alt=\"avatar\" src=\"/images/dashboard/Ellipse 1.svg\" />\n                        <span className=\"profile-details\">\n                            <span className=\"profile-name\">Gene Russell</span>\n                            <span className=\"profile-email\">ben95@example.com</span>\n                        </span>\n                        <i className=\"pi pi-angle-down\"></i>\n                    </button>\n                    <ul className=\"list-none p-3 m-0 border-round shadow-2 absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto hidden\">\n                        <li>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <i className=\"pi pi-user mr-3\"></i>\n                                <span>Profile</span>\n                            </a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <i className=\"pi pi-inbox mr-3\"></i>\n                                <span>Inbox</span></a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <i className=\"pi pi-cog mr-3\"></i>\n                                <span>Settings</span>\n                            </a>\n                            <a className=\"p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer\">\n                                <i className=\"pi pi-power-off mr-3\"></i>\n                                <span>Sign Out</span>\n                            </a>\n                        </li>\n                    </ul>\n                </div>\n            </div>\n        </div>\n    );\n}\nexport default DashboardHeader;"]}

package/dist/components/layout/DashboardHeader.tsx

@@ -0,0 +1,89 @@
+"use client";
+import { Button } from "primereact/button";
+import { Menu } from "primereact/menu";
+import { useRef } from "react";
+
+const DashboardHeader = () => {
+
+    const menuLeft = useRef<any>(null);
+    const toast = useRef(null);
+    const items = [
+        {
+            label: 'Options',
+            items: [
+                {
+                    label: 'Refresh',
+                    icon: 'pi pi-refresh'
+                },
+                {
+                    label: 'Export',
+                    icon: 'pi pi-upload'
+                }
+            ]
+        }
+    ];
+
+    return (
+        <div className="flex justify-content-between  align-items-center px-5 surface-0 border-bottom-1 surface-border relative lg:static" style={{ height: "60px" }}>
+            <div className="flex align-items-center">
+                <Button label="New" size="small" type="submit" className="small-button" />
+                <Menu model={items} popup ref={menuLeft} id="popup_menu_left" />
+                <div className="ml-2">
+                    <div style={{ position: "relative" }}>
+                        <a onClick={(event: any) => menuLeft.current.toggle(event)}>
+                            <i className="pi pi-cog"></i>
+                        </a>
+
+                    </div>
+                </div>
+
+            </div>
+            <div className="flex align-items-center">
+                <div className="bgCircle">
+                    <div style={{ position: "relative" }}>
+                        <i className="pi pi-bell"></i>
+                        <span className="topbar-badge">
+                        </span>
+                    </div>
+                </div>
+                <div className="bgCircle ml-3">
+                    <div style={{ position: "relative" }}>
+                        <i className="pi pi-envelope"></i>
+                        <span className="topbar-badge">
+                        </span>
+                    </div>
+                </div>
+                <div className="topbar-profile">
+                    <button className="topbar-profile-button p-link" type="button">
+                        <img alt="avatar" src="/images/dashboard/Ellipse 1.svg" />
+                        <span className="profile-details">
+                            <span className="profile-name">Gene Russell</span>
+                            <span className="profile-email">ben95@example.com</span>
+                        </span>
+                        <i className="pi pi-angle-down"></i>
+                    </button>
+                    <ul className="list-none p-3 m-0 border-round shadow-2 absolute surface-overlay origin-top w-full sm:w-12rem mt-2 right-0 top-auto hidden">
+                        <li>
+                            <a className="p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+                                <i className="pi pi-user mr-3"></i>
+                                <span>Profile</span>
+                            </a>
+                            <a className="p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+                                <i className="pi pi-inbox mr-3"></i>
+                                <span>Inbox</span></a>
+                            <a className="p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+                                <i className="pi pi-cog mr-3"></i>
+                                <span>Settings</span>
+                            </a>
+                            <a className="p-ripple flex p-2 border-round align-items-center hover:surface-hover transition-colors transition-duration-150 cursor-pointer">
+                                <i className="pi pi-power-off mr-3"></i>
+                                <span>Sign Out</span>
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    );
+}
+export default DashboardHeader;

package/dist/components/layout/FilterMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilterMenu.d.ts","sourceRoot":"","sources":["../../../src/components/layout/FilterMenu.tsx"],"names":[],"mappings":"AAMA,QAAA,MAAM,UAAU,+CAiHf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"FilterMenu.d.ts","sourceRoot":"./","sources":["components/layout/FilterMenu.tsx"],"names":[],"mappings":"AAMA,QAAA,MAAM,UAAU,+CAiHf,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/components/layout/FilterMenu.js

@@ -4,29 +4,29 @@ import { Button } from "primereact/button";
 import { Dialog } from "primereact/dialog";
 import { OverlayPanel } from "primereact/overlaypanel";
 import { useRef, useState } from "react";
-var FilterMenu = function () {
-    var op = useRef(null);
-    var _a = useState(false), visible = _a[0], setVisible = _a[1];
-    var filters = [
-        { label: 'On Time Off', onClick: function () { return handleFilterClick('On Time Off'); } },
-        { label: 'At Work', onClick: function () { return handleFilterClick('At Work'); } },
-        { label: 'My Team', onClick: function () { return handleFilterClick('My Team'); } },
-        { label: 'My Departments', onClick: function () { return handleFilterClick('My Departments'); } },
-        { label: 'Newly Hired', onClick: function () { return handleFilterClick('Newly Hired'); } },
-        { label: 'Fixed Hours', onClick: function () { return handleFilterClick('Fixed Hours'); } },
-        { label: 'Flexible Hours', onClick: function () { return handleFilterClick('Flexible Hours'); } },
-        { label: 'Add Custom Filters', onClick: function () { return handleFilterClick('Add Custom Filters'); } }
+const FilterMenu = () => {
+    const op = useRef(null);
+    const [visible, setVisible] = useState(false);
+    const filters = [
+        { label: 'On Time Off', onClick: () => handleFilterClick('On Time Off') },
+        { label: 'At Work', onClick: () => handleFilterClick('At Work') },
+        { label: 'My Team', onClick: () => handleFilterClick('My Team') },
+        { label: 'My Departments', onClick: () => handleFilterClick('My Departments') },
+        { label: 'Newly Hired', onClick: () => handleFilterClick('Newly Hired') },
+        { label: 'Fixed Hours', onClick: () => handleFilterClick('Fixed Hours') },
+        { label: 'Flexible Hours', onClick: () => handleFilterClick('Flexible Hours') },
+        { label: 'Add Custom Filters', onClick: () => handleFilterClick('Add Custom Filters') }
     ];
-    var groupBy = [
-        { label: 'Manager', onClick: function () { return handleGroupByClick('Manager'); } },
-        { label: 'Department', onClick: function () { return handleGroupByClick('Department'); } },
-        { label: 'Job', onClick: function () { return handleGroupByClick('Job'); } },
-        { label: 'Skills', onClick: function () { return handleGroupByClick('Skills'); } },
-        { label: 'Start Date', onClick: function () { return handleGroupByClick('Start Date'); } },
-        { label: 'Tags', onClick: function () { return handleGroupByClick('Tags'); } }
+    const groupBy = [
+        { label: 'Manager', onClick: () => handleGroupByClick('Manager') },
+        { label: 'Department', onClick: () => handleGroupByClick('Department') },
+        { label: 'Job', onClick: () => handleGroupByClick('Job') },
+        { label: 'Skills', onClick: () => handleGroupByClick('Skills') },
+        { label: 'Start Date', onClick: () => handleGroupByClick('Start Date') },
+        { label: 'Tags', onClick: () => handleGroupByClick('Tags') }
     ];
-    var favourites = [
-        { label: 'Save Current Search', onClick: function () { return handleFavouritesClick('Save Current Search'); } }
+    const favourites = [
+        { label: 'Save Current Search', onClick: () => handleFavouritesClick('Save Current Search') }
     ];
     // Example function definitions
     function handleFilterClick(filter) {
@@ -42,7 +42,7 @@ var FilterMenu = function () {
     }
     function handleFavouritesClick(favourite) {
     }
-    return (_jsxs("div", { children: [_jsx(Button, { icon: "pi pi-cog", className: "transparent-background", onClick: function (e) { var _a; return (_a = op === null || op === void 0 ? void 0 : op.current) === null || _a === void 0 ? void 0 : _a.toggle(e); }, "aria-haspopup": true, "aria-controls": "popup_menu" }), _jsx(OverlayPanel, { ref: op, className: "filterDropdown", children: _jsxs("div", { className: "grid m-0", children: [_jsxs("div", { className: "col-12 md:col-4 lg:col-4", children: [_jsxs("h3", { children: [_jsx("span", { className: " pi pi-filter" }), " Filters"] }), _jsx("ul", { className: "custom-list", children: filters.map(function (item, index) { return (_jsx("a", { onClick: item.onClick, children: _jsx("li", { children: item.label }, index) })); }) })] }), _jsxs("div", { className: "col-12 md:col-4 lg:col-4", children: [_jsxs("h3", { children: [_jsx("span", { className: " pi pi-clone" }), " Group by"] }), _jsx("ul", { className: "custom-list", children: groupBy.map(function (item, index) { return (_jsx("a", { onClick: item.onClick, children: _jsx("li", { children: item.label }, index) })); }) })] }), _jsxs("div", { className: "col-12 md:col-4 lg:col-4", children: [_jsxs("h3", { children: [" ", _jsx("span", { className: " pi pi-star" }), " Favourites"] }), _jsx("ul", { className: "custom-list", children: favourites.map(function (item, index) { return (_jsx("a", { onClick: item.onClick, children: _jsx("li", { children: item.label }, index) })); }) })] })] }) }), _jsx(Dialog, { header: "Add Custom Filter", visible: visible, style: { width: '50vw' }, onHide: function () { if (!visible)
+    return (_jsxs("div", { children: [_jsx(Button, { icon: "pi pi-cog", className: "transparent-background", onClick: (e) => op?.current?.toggle(e), "aria-haspopup": true, "aria-controls": "popup_menu" }), _jsx(OverlayPanel, { ref: op, className: "filterDropdown", children: _jsxs("div", { className: "grid m-0", children: [_jsxs("div", { className: "col-12 md:col-4 lg:col-4", children: [_jsxs("h3", { children: [_jsx("span", { className: " pi pi-filter" }), " Filters"] }), _jsx("ul", { className: "custom-list", children: filters.map((item, index) => (_jsx("a", { onClick: item.onClick, children: _jsx("li", { children: item.label }, index) }))) })] }), _jsxs("div", { className: "col-12 md:col-4 lg:col-4", children: [_jsxs("h3", { children: [_jsx("span", { className: " pi pi-clone" }), " Group by"] }), _jsx("ul", { className: "custom-list", children: groupBy.map((item, index) => (_jsx("a", { onClick: item.onClick, children: _jsx("li", { children: item.label }, index) }))) })] }), _jsxs("div", { className: "col-12 md:col-4 lg:col-4", children: [_jsxs("h3", { children: [" ", _jsx("span", { className: " pi pi-star" }), " Favourites"] }), _jsx("ul", { className: "custom-list", children: favourites.map((item, index) => (_jsx("a", { onClick: item.onClick, children: _jsx("li", { children: item.label }, index) }))) })] })] }) }), _jsx(Dialog, { header: "Add Custom Filter", visible: visible, style: { width: '50vw' }, onHide: () => { if (!visible)
                     return; setVisible(false); } })] }));
 };
 export default FilterMenu;

package/dist/components/layout/FilterMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"FilterMenu.js","sourceRoot":"","sources":["../../../src/components/layout/FilterMenu.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"FilterMenu.js","sourceRoot":"./","sources":["components/layout/FilterMenu.tsx"],"names":[],"mappings":"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","sourcesContent":["\"use client\";\nimport { Button } from \"primereact/button\";\nimport { Dialog } from \"primereact/dialog\";\nimport { OverlayPanel } from \"primereact/overlaypanel\";\nimport { useRef, useState } from \"react\";\n\nconst FilterMenu = () => {\n    const op = useRef<any>(null);\n    const [visible, setVisible] = useState(false);\n\n    const filters = [\n        { label: 'On Time Off', onClick: () => handleFilterClick('On Time Off') },\n        { label: 'At Work', onClick: () => handleFilterClick('At Work') },\n        { label: 'My Team', onClick: () => handleFilterClick('My Team') },\n        { label: 'My Departments', onClick: () => handleFilterClick('My Departments') },\n        { label: 'Newly Hired', onClick: () => handleFilterClick('Newly Hired') },\n        { label: 'Fixed Hours', onClick: () => handleFilterClick('Fixed Hours') },\n        { label: 'Flexible Hours', onClick: () => handleFilterClick('Flexible Hours') },\n        { label: 'Add Custom Filters', onClick: () => handleFilterClick('Add Custom Filters') }\n    ];\n\n    const groupBy = [\n        { label: 'Manager', onClick: () => handleGroupByClick('Manager') },\n        { label: 'Department', onClick: () => handleGroupByClick('Department') },\n        { label: 'Job', onClick: () => handleGroupByClick('Job') },\n        { label: 'Skills', onClick: () => handleGroupByClick('Skills') },\n        { label: 'Start Date', onClick: () => handleGroupByClick('Start Date') },\n        { label: 'Tags', onClick: () => handleGroupByClick('Tags') }\n    ];\n\n    const favourites = [\n        { label: 'Save Current Search', onClick: () => handleFavouritesClick('Save Current Search') }\n    ];\n\n    // Example function definitions\n    function handleFilterClick(filter: string) {\n\n\n        switch (filter) {\n            case 'Add Custom Filters':\n                setVisible(true);\n                break;\n\n            default:\n                break;\n        }\n    }\n\n    function handleGroupByClick(group: string) {\n\n    }\n\n    function handleFavouritesClick(favourite: string) {\n\n    }\n\n    return (\n        <div>\n            <Button\n                icon=\"pi pi-cog\"\n                className=\"transparent-background\"\n                onClick={(e: any) => op?.current?.toggle(e)}\n                aria-haspopup\n                aria-controls=\"popup_menu\"\n            />\n            {/* <Button type=\"button\" icon=\"pi pi-image\" label=\"Image\" onClick={(e: any) => op?.current?.toggle(e)} /> */}\n            <OverlayPanel ref={op} className=\"filterDropdown\">\n                <div className=\"grid m-0\">\n                    {/* Column 1: Filters */}\n                    <div className=\"col-12 md:col-4 lg:col-4\">\n                        <h3><span className=\" pi pi-filter\"></span> Filters</h3>\n                        <ul className=\"custom-list\">\n                            {filters.map((item, index) => (\n                                <a onClick={item.onClick}>\n                                    <li key={index}>{item.label}</li>\n                                </a>\n                            ))}\n                        </ul>\n                    </div>\n\n                    {/* Column 2: Group By */}\n                    <div className=\"col-12 md:col-4 lg:col-4\">\n                        <h3><span className=\" pi pi-clone\"></span> Group by</h3>\n                        <ul className=\"custom-list\">\n                            {groupBy.map((item, index) => (\n                                <a onClick={item.onClick}>\n                                    <li key={index}>{item.label}</li>\n                                </a>\n                            ))}\n                        </ul>\n                    </div>\n\n                    {/* Column 3: Favourites */}\n                    <div className=\"col-12 md:col-4 lg:col-4\">\n                        <h3> <span className=\" pi pi-star\"></span> Favourites</h3>\n                        <ul className=\"custom-list\">\n                            {favourites.map((item, index) => (\n                                <a onClick={item.onClick}>\n                                    <li key={index}>{item.label}</li>\n                                </a>\n                            ))}\n                        </ul>\n                    </div>\n                </div>\n            </OverlayPanel>\n            <Dialog header=\"Add Custom Filter\" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>\n                {/* <FilterComponent></FilterComponent> */}\n            </Dialog>\n\n            {/* <Dialog\n                visible={visible}\n                modal\n                onHide={() => { if (!visible) return; setVisible(false); }}\n                content={({ hide }) => (\n                    <FilterComponent></FilterComponent>\n                )}\n            ></Dialog> */}\n        </div>\n    );\n};\n\nexport default FilterMenu;\n"]}