@solidxai/core-ui 0.1.0 → 0.1.2

package/src/components/layout/AppSidebar.tsx

@@ -1,216 +0,0 @@
-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 { useSession } from "../../hooks/useSession";
-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 "../common/Image";
-import SettingImage from '../../resources/images/Navigation/SolidSettinsIcon.svg'
-import { Avatar } from "primereact/avatar";
-import { usePathname } from "../../hooks/usePathname";
-import { env } from "../../adapters/env";
-
-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 === env("NEXT_PUBLIC_DEFAULT_MENU_KEY"))[0]?.children);
-            setCurrentMainMenu(menu && menu.data.length > 0 && menu.data.filter((m: any) => m.key === 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 [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: env("NEXT_PUBLIC_SETTINGS_ICON") ? env("NEXT_PUBLIC_SETTINGS_ICON") : SettingImage
-    };
-
-
-
-    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 : `${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

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

package/src/components/layout/CustomPagination.tsx

@@ -1,55 +0,0 @@
-// 
-
-// import { useRouter, useSearchParams } from "../../hooks/solid/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

@@ -1,89 +0,0 @@
-
-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

@@ -1,122 +0,0 @@
-
-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

@@ -1,13 +0,0 @@
-
-
-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

@@ -1,36 +0,0 @@
-import { usePathname } from "../../hooks/usePathname";
-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

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