@solidstarters/solid-core-ui 1.1.209 → 1.1.211

package/src/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/src/components/layout/ButtonLoader.tsx

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

package/src/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/src/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/src/components/layout/FilterMenu.tsx

@@ -0,0 +1,122 @@
+"use client";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { useRef, useState } from "react";
+
+const FilterMenu = () => {
+    const op = useRef<any>(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') }
+    ];
+
+    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') }
+    ];
+
+    const favourites = [
+        { label: 'Save Current Search', onClick: () => handleFavouritesClick('Save Current Search') }
+    ];
+
+    // Example function definitions
+    function handleFilterClick(filter: string) {
+
+
+        switch (filter) {
+            case 'Add Custom Filters':
+                setVisible(true);
+                break;
+
+            default:
+                break;
+        }
+    }
+
+    function handleGroupByClick(group: string) {
+
+    }
+
+    function handleFavouritesClick(favourite: string) {
+
+    }
+
+    return (
+        <div>
+            <Button
+                icon="pi pi-cog"
+                className="transparent-background"
+                onClick={(e: any) => op?.current?.toggle(e)}
+                aria-haspopup
+                aria-controls="popup_menu"
+            />
+            {/* <Button type="button" icon="pi pi-image" label="Image" onClick={(e: any) => op?.current?.toggle(e)} /> */}
+            <OverlayPanel ref={op} className="filterDropdown">
+                <div className="grid m-0">
+                    {/* Column 1: Filters */}
+                    <div className="col-12 md:col-4 lg:col-4">
+                        <h3><span className=" pi pi-filter"></span> Filters</h3>
+                        <ul className="custom-list">
+                            {filters.map((item, index) => (
+                                <a onClick={item.onClick}>
+                                    <li key={index}>{item.label}</li>
+                                </a>
+                            ))}
+                        </ul>
+                    </div>
+
+                    {/* Column 2: Group By */}
+                    <div className="col-12 md:col-4 lg:col-4">
+                        <h3><span className=" pi pi-clone"></span> Group by</h3>
+                        <ul className="custom-list">
+                            {groupBy.map((item, index) => (
+                                <a onClick={item.onClick}>
+                                    <li key={index}>{item.label}</li>
+                                </a>
+                            ))}
+                        </ul>
+                    </div>
+
+                    {/* Column 3: Favourites */}
+                    <div className="col-12 md:col-4 lg:col-4">
+                        <h3> <span className=" pi pi-star"></span> Favourites</h3>
+                        <ul className="custom-list">
+                            {favourites.map((item, index) => (
+                                <a onClick={item.onClick}>
+                                    <li key={index}>{item.label}</li>
+                                </a>
+                            ))}
+                        </ul>
+                    </div>
+                </div>
+            </OverlayPanel>
+            <Dialog header="Add Custom Filter" visible={visible} style={{ width: '50vw' }} onHide={() => { if (!visible) return; setVisible(false); }}>
+                {/* <FilterComponent></FilterComponent> */}
+            </Dialog>
+
+            {/* <Dialog
+                visible={visible}
+                modal
+                onHide={() => { if (!visible) return; setVisible(false); }}
+                content={({ hide }) => (
+                    <FilterComponent></FilterComponent>
+                )}
+            ></Dialog> */}
+        </div>
+    );
+};
+
+export default FilterMenu;

package/src/components/layout/Footer.tsx

@@ -0,0 +1,13 @@
+"use client";
+
+const Footer = () => {
+  return (
+    <footer className="py-1 pt-5">
+      <p className="text-center mt-1">
+        Book IT - 2019-2023, All Rights Reserved
+      </p>
+    </footer>
+  );
+};
+
+export default Footer;

package/src/components/layout/GlobalSearch.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { usePathname } from 'next/navigation';
+import { IconField } from 'primereact/iconfield';
+import { InputIcon } from 'primereact/inputicon';
+import { InputText } from 'primereact/inputtext';
+
+export const GlobalSearch = () => {
+    const path = usePathname();
+    // const placeholderMap: { [key: string]: string } = {
+    //     '/menu': 'Search Menus',
+    //     '/category': 'Search Categories',
+    //     '/menu-item': 'Search Menu Items',
+    //     '/cms-banner-image': 'Search CMS Banner Images',
+    //     '/article': 'Search Articles',
+    // };
+
+    // Find the matching placeholder dynamically
+    // const placeholder = Object.keys(placeholderMap).find(key => pathname.includes(key)) || 'Search';
+
+    const getPlaceholder = () => {
+        const dynamicSegment = path.split('/').slice(-2, -1)[0]; // Extracts the second-to-last segment
+        return `Search ${dynamicSegment.replace(/-/g, ' ').replace(/\b\w/g, char => char.toUpperCase())}`;
+    };
+    return (
+        <div className='absolute left-50' style={{transform:'translateX(-50%)'}}>
+            <IconField iconPosition="left">
+                <InputIcon className="pi pi-search"></InputIcon>
+                <InputText
+                    v-model="value1"
+                    placeholder={getPlaceholder()}
+                    // placeholder={placeholderMap[placeholder] || 'Search'}
+                    className='border-cyan-200 border-1 max-h-2rem w-25rem'
+                />
+            </IconField>
+        </div>
+    )
+}

package/src/components/layout/Header.tsx

@@ -0,0 +1,8 @@
+"use client";
+import NavbarOne from "./navbar-one";
+
+const Header = () => {
+  return <NavbarOne />;
+};
+
+export default Header;