@solidstarters/solid-core-ui 1.1.70 → 1.1.71

package/dist/components/layout/navbar-one.tsx

@@ -0,0 +1,258 @@
+"use client";
+import { ToastContainer } from "@/helpers/ToastContainer";
+import { useGetSolidMenuBasedOnRoleQuery } from "@/redux/api/solidMenuApi";
+import { setIsAuthenticated, setUser } from "@/redux/features/userSlice";
+// import { useAppDispatch } from "@/redux/hooks";
+// import { RootState } from "@/redux/store.js";
+import { signOut, useSession } from "next-auth/react";
+import { Button } from "primereact/button";
+import { IconField } from "primereact/iconfield";
+import { InputIcon } from "primereact/inputicon";
+import { InputText } from "primereact/inputtext";
+import { useEffect, useRef, useState } from "react";
+import { useDispatch } from "react-redux";
+import NavbarTwoMenu from "./navbar-two-menu";
+import UserProfileMenu from "./user-profile-menu";
+// import menu from "@/helpers/menu";
+
+const NavbarOne = () => {
+    const dispatch = useDispatch();
+
+    // const { user, isAuthenticated } = useAppSelector((state) => state.auth);
+    // const [show, setShow] = useState(false);
+    // const visibleNavbar = useSelector(
+    //     (state: any) => state.navbarState.visibleNavbar
+    // );
+    const [visibleNavbar, setVisibleNavbar] = useState(false);
+
+    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 = () => setVisibleNavbar(!visibleNavbar);
+    const handleMenu = (m: any) => {
+        // setShow(true);
+        setVisibleNavbar(!visibleNavbar);
+        setCurrentMainMenu(m.title);
+        setCurrentMenu(m.children);
+    };
+
+    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]);
+
+
+
+    return (
+        <div className="flex flex-column md:flex-row justify-content-between navBar">
+            <ToastContainer />
+
+            {/* commented this as this is not working properly @Jenendar to figure this out... */}
+            {currentMainMenu && (
+                <div>
+                    <a
+                        className={
+                            visibleNavbar
+                                ? "navtwo-toggle active-menu-image"
+                                : "navtwo-toggle"
+                        }
+                        onClick={handleToggle}
+                    >
+                        <img
+                            style={{ cursor: "pointer" }}
+                            src={`/images/menu-toggle.png`}
+                            alt="Solid"
+                        />
+                    </a>
+                </div>
+            )}
+            <div className="navBarOne">
+                <div>
+                    {/* <div className="p-0">
+                        <div className="navbar-brand">
+                            <a href="/">
+                                <img
+                                    style={{ cursor: "pointer" }}
+                                    src="/images/logo.png"
+                                    alt="Solid"
+                                />
+                            </a>
+                        </div>
+                    </div> */}
+                    <div className="navbar-menu">
+                        <>
+                            {menu && menu.data.length > 0 && menu.data.map((m: any) => (
+                                <div
+                                    key={m.title}
+                                    className={`menu-item ${currentMainMenu === m.title ? "active-menu-image" : ""}`}
+                                >
+                                    <a onClick={() => handleMenu(m)}>
+                                        <img
+                                            style={{ cursor: "pointer", width: '30px' }}
+                                            // src={currentMainMenu === m.title ? `/images/${m.title.toLocaleLowerCase()}-active.svg` : `/images/${m.title.toLocaleLowerCase()}.svg`}
+                                            // src={`/images/menu/${m.title}.svg`}
+                                            src={m.icon.startsWith("/") ? m.icon : `${process.env.API_URL}/${m.icon}`}
+                                            // src={`/images/menu/app-builder.svg`}
+                                            alt="Solid"
+                                        />
+                                    </a>
+                                </div>
+                            ))}
+                        </>
+                    </div>
+                </div>
+                <UserProfileMenu></UserProfileMenu>
+            </div>
+            {currentMenu && (
+                <div className={visibleNavbar ? "show navBarTwo" : "hide navBarTwo"}>
+                    <div className="flex relative justify-content-between align-items-center pt-4 px-3 pb-3 mb-3">
+                        <div className="absolute bottom-0" style={{ width: 50, height: 0.8, background: '#d8e2ea' }}></div>
+                        {!isSearchShow && <div className="text-base font-semibold">{currentMainMenu && currentMainMenu}</div>}
+                        {isSearchShow === false && <Button outlined icon="pi pi-search" severity="secondary" aria-label="Search" size="small" style={{ maxWidth: 32, maxHeight: 32, border: '1px solid #d1d5db' }}
+                            onClick={() => setSearchShow(true)}
+                        />
+                        }
+                        {isSearchShow &&
+                            <div className="w-full" 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: 5 }}>
+                                    <img
+                                        // className="absolute right-0 top-0 max-h-1rem"
+                                        style={{ cursor: "pointer", maxHeight: '1.3rem' }}
+                                        src="/images/icons/jump-to-icon.png"
+                                        alt="Solid"
+                                    />
+                                </div>
+                            </div>
+                        }
+                        {/* <div className="input-icon inputDiv navtwo-searchbox">
+                            <i className="pi pi-search " style={{ color: '#8D9199' }}></i>
+                            <input
+                                type="text"
+                                placeholder="Jump to..."
+                                name="lastName"
+                                id="lastName"
+                                onChange={(e) => setSearchTerm(e.target.value)}
+                                value={searchTerm}
+                                className=""
+                            />
+                            <img
+                                style={{ cursor: "pointer" }}
+                                src="/images/icons/jump-to-icon.png"
+                                alt="Solid"
+                            />
+                        </div> */}
+                    </div>
+                    {/* <div className="flex flex-column md:flex-row  navtwo-header justify-content-between">
+            <div className="text-sm font-semibold">{currentMainMenu && currentMainMenu}</div> */}
+                    {/* <a
+              className={
+                visibleNavbar
+                  ? "navtwo-toggle active-menu-image"
+                  : "navtwo-toggle"
+              }
+              onClick={handleToggle}
+            >
+              <img
+                style={{ cursor: "pointer" }}
+                src={`/images/menu-toggle.png`}
+                alt="Solid"
+              />
+            </a> */}
+                    {/* </div>
+          <div className="p-inputgroup"> */}
+                    {/* <div className="p-inputgroup navtwo-searchbox">
+              
+              <span className="p-inputgroup-addon">
+                <i className="pi pi-search "></i>
+              </span>
+              <InputText
+                placeholder="Search"
+                onChange={e => setSearchTerm(e.target.value)} 
+                />
+              <span className="p-inputgroup-addon">⌘+k</span>
+            </div> */}
+                    {/* <div className="input-icon inputDiv navtwo-searchbox">
+              <i className="pi pi-search " style={{ color: '#8D9199' }}></i>
+              <input
+                type="text"
+                placeholder="Jump to..."
+                name="lastName"
+                id="lastName"
+                onChange={(e) => setSearchTerm(e.target.value)}
+                value={searchTerm}
+                className=""
+              />
+              <img
+                style={{ cursor: "pointer" }}
+                src="/images/icons/jump-to-icon.png"
+                alt="Solid"
+              />
+            </div> */}
+
+                    {/* <Button icon="pi pi-search" className="p-button-outlined" onClick={handleSearch} /> */}
+                    {/* </div> */}
+
+                    <div
+                        className={
+                            visibleNavbar ? "navTwoMenuLayout px-2 show" : "navTwoMenuLayout hide"
+                        }
+                    >
+                        <NavbarTwoMenu menuItems={currentMenu}></NavbarTwoMenu>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default NavbarOne;

package/dist/components/layout/navbar-two-menu.tsx

@@ -0,0 +1,73 @@
+'use client';
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { PanelMenu } from "primereact/panelmenu";
+import { useState } from "react";
+
+const NavbarTwoMenu = ({ menuItems }: any) => {
+    const pathname = usePathname();
+    const activeParentPath = pathname.split('/').slice(-2, -1)[0];
+
+    const [expandedKeys, setExpandedKeys] = useState<any>({});
+    const itemRenderer = (item: any, options: any) => {
+        const currentItem = item?.url?.split('/').slice(-2, -1)[0];
+        const isSettingsPage = pathname.includes('/settings/') && item?.url?.includes('/settings/')
+        ? pathname === item?.url // Exact match check for settings pages
+        : currentItem === activeParentPath
+
+    // currentItem === activeParentPath ?' p-highlight' : ''
+        return (
+            <div key={item?.key} className={`flex align-items-center cursor-pointer menuHead px-3 ${isSettingsPage ? ' p-highlight' : ''}`} onClick={options.onClick}>
+                <Link href={item?.url ? item?.url : '#'} className="w-full flex justify-content-between font-normal">
+                    <div className="flex align-items-center gap-3">
+                        <span className={item.icon} />
+                        <span className="">
+                            {item.label}
+                        </span>
+                    </div>
+                    {item?.items && item?.items?.length > 0 &&
+                        <span className={`sidebar-chevrons ${expandedKeys[item.key] === true ? "pi pi-angle-up" : "pi pi-angle-down"}`} />
+                    }
+                </Link>
+            </div>
+        )
+    };
+
+    const createMenuItems = (menuItems: any[]): any[] => {
+        return menuItems.map((mi) => ({
+            key: mi.key,
+            label: mi.title,
+            icon: mi.children ? "pi pi-folder" : "",
+            template: itemRenderer,
+            url: mi.path ? mi.path : null,
+            items: mi.children ? createMenuItems(mi.children) : null, // Recursively add children
+        }));
+    };
+
+    const items = createMenuItems(menuItems);
+
+    const onExpandedKeysChange = (keys: any) => {
+        setExpandedKeys(keys);
+    };
+
+    const expandNode = (node: any) => {
+        if (node.items && node.items.length) {
+            expandedKeys[node.key] = true;
+            node.items.forEach(expandNode);
+        }
+    };
+
+    return (
+        <div className="solid-panel-menu">
+            <PanelMenu
+                model={items}
+                expandedKeys={expandedKeys}
+                onExpandedKeysChange={onExpandedKeysChange}
+                className="w-full"
+                multiple
+            />
+        </div>
+    );
+};
+
+export default NavbarTwoMenu;

package/dist/components/layout/navbar-two.tsx

@@ -0,0 +1,37 @@
+"use client";
+import { usePathname, useRouter } from "next/navigation";
+import { useState } from "react";
+
+const NavbarTwo = () => {
+  const router = useRouter();
+  const pathname = usePathname();
+  const [renderMenu, setRenderMenu] = useState();
+
+  const iamMenu = [
+    {
+      title: "Users",
+      url: "users",
+      subMenu: [],
+    },
+    {
+      title: "Model",
+      url: "model",
+      subMenu: [
+        { title: "Add Model", url: "", subMenu: ["Add One", "Add Multiple"] },
+        { title: "Delete Model", url: "delete", subMenu: [] },
+      ],
+    },
+    {
+      title: "Field",
+      url: "field",
+      subMenu: [
+        { title: "Add Field", subMenu: ["Add One", "Add Multiple"] },
+        { title: "Delete Field", url: "delete", subMenu: [] },
+      ],
+    },
+  ];
+
+  return <></>
+};
+
+export default NavbarTwo;

package/dist/components/layout/user-profile-menu.tsx

@@ -0,0 +1,120 @@
+"use client";
+// import { useAppSelector } from "@/redux/hooks";
+import { signOut } from "next-auth/react";
+import { PrimeReactContext } from "primereact/api";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { useContext, useRef, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { LayoutContext } from "./context/layoutcontext";
+import { LayoutConfig } from "@/types";
+import { toggleTheme } from "@/redux/features/themeSlice";
+import { InputSwitch } from "primereact/inputswitch";
+import { Button } from "primereact/button";
+import { useRouter } from "next/navigation";
+import { Dialog } from "primereact/dialog";
+import { Divider } from "primereact/divider";
+import Image from "next/image";
+import AvatarImage from '../../resources/images/Profile/Avatar.png'
+const UserProfileMenu = () => {
+  const router = useRouter();
+
+  // const { user } = useAppSelector((state) => state.auth);
+  const { changeTheme } = useContext(PrimeReactContext);
+  const { layoutConfig, setLayoutConfig } = useContext(LayoutContext);
+  const { theme } = useSelector((state: any) => state.theme); // Get current theme from Redux
+  const { user } = useSelector((state: any) => state.auth);
+  const [checked, setChecked] = useState(theme === "dark");
+  const [confirmLogout, setConfirmLogout] = useState(false);
+  const dispatch = useDispatch();
+  const op = useRef(null);
+  const logoutHandler = () => {
+    signOut();
+  };
+  const _changeTheme = (theme: string, colorScheme: string) => {
+    changeTheme?.(layoutConfig.theme, theme, 'theme-css', () => {
+      setLayoutConfig((prevState: LayoutConfig) => ({ ...prevState, theme, colorScheme }));
+    });
+  };
+
+  const handleThemeToggle = (e: any) => {
+    const isDarkMode = e.value;
+    setChecked(isDarkMode);
+    dispatch(toggleTheme()); // Dispatch Redux action
+    _changeTheme(isDarkMode ? "solid-dark-purple" : "solid-light-purple", isDarkMode ? "dark" : "light");
+  };
+  return (
+    <div className="userProfile">
+      <div
+        className="">
+        <div
+          className="flex align-items-end"
+          //@ts-ignore
+          onClick={(e: any) => op?.current?.toggle(e)}
+        >
+          <Image
+            src={AvatarImage}
+            alt="Solid"
+            className="profile-icon relative"
+            fill
+          />
+          <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 14 14" fill="none">
+            <path d="M7 5.83301L3.5 9.33301H10.5L7 5.83301Z" fill="black" />
+          </svg>
+        </div>
+        <OverlayPanel ref={op} className="user-profile-panel">
+          <div className="flex align-items-center p-3 gap-2 user-profile-title">
+            <Image
+              alt="avatar"
+              src={AvatarImage}
+              className="w-2rem relative"
+              fill
+            />
+            <div className="flex flex-column align">
+              <span className="font-bold">{user?.user?.username}</span>
+              <span className="mt-1">{user?.user?.email}</span>
+            </div>
+          </div>
+
+          {/*  */}
+          <div className="p-3 flex align-items-center justify-content-between primary-border-bottom">
+            <div className="flex align-items-center gap-3">
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                <path d="M9 18C6.5 18 4.375 17.125 2.625 15.375C0.875 13.625 0 11.5 0 9C0 6.5 0.875 4.375 2.625 2.625C4.375 0.875 6.5 0 9 0C9.23333 0 9.4625 0.00833333 9.6875 0.025C9.9125 0.0416667 10.1333 0.0666667 10.35 0.1C9.66667 0.583333 9.12083 1.2125 8.7125 1.9875C8.30417 2.7625 8.1 3.6 8.1 4.5C8.1 6 8.625 7.275 9.675 8.325C10.725 9.375 12 9.9 13.5 9.9C14.4167 9.9 15.2583 9.69583 16.025 9.2875C16.7917 8.87917 17.4167 8.33333 17.9 7.65C17.9333 7.86667 17.9583 8.0875 17.975 8.3125C17.9917 8.5375 18 8.76667 18 9C18 11.5 17.125 13.625 15.375 15.375C13.625 17.125 11.5 18 9 18ZM9 16C10.4667 16 11.7833 15.5958 12.95 14.7875C14.1167 13.9792 14.9667 12.925 15.5 11.625C15.1667 11.7083 14.8333 11.775 14.5 11.825C14.1667 11.875 13.8333 11.9 13.5 11.9C11.45 11.9 9.70417 11.1792 8.2625 9.7375C6.82083 8.29583 6.1 6.55 6.1 4.5C6.1 4.16667 6.125 3.83333 6.175 3.5C6.225 3.16667 6.29167 2.83333 6.375 2.5C5.075 3.03333 4.02083 3.88333 3.2125 5.05C2.40417 6.21667 2 7.53333 2 9C2 10.9333 2.68333 12.5833 4.05 13.95C5.41667 15.3167 7.06667 16 9 16Z" fill="#1D6CBC" />
+              </svg>
+              <p className="m-0 font-bold">Dark Mode</p>
+            </div>
+            <InputSwitch checked={checked} onChange={handleThemeToggle} />
+          </div>
+          <div className="user-profile-body py-1">
+            <Button
+              text
+              severity="secondary"
+              className="flex align-items-center gap-2 w-full px-3"
+              onClick={() => setConfirmLogout(true)}
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+                <path d="M3.75 15.75C3.3375 15.75 2.98438 15.6031 2.69063 15.3094C2.39687 15.0156 2.25 14.6625 2.25 14.25V3.75C2.25 3.3375 2.39687 2.98438 2.69063 2.69063C2.98438 2.39687 3.3375 2.25 3.75 2.25H9V3.75H3.75V14.25H9V15.75H3.75ZM12 12.75L10.9688 11.6625L12.8813 9.75H6.75V8.25H12.8813L10.9688 6.3375L12 5.25L15.75 9L12 12.75Z" fill="#F04A4A" />
+              </svg>
+              <span className="p-button-label flex-none ">Logout</span>
+            </Button>
+          </div>
+        </OverlayPanel>
+      </div>
+      <Dialog header="Logout" headerClassName="py-2" contentClassName="px-0 pb-0" visible={confirmLogout} style={{ width: '20vw' }} onHide={() => { if (!confirmLogout) return; setConfirmLogout(false); }}
+        footer={<div className="flex align-items-center gap-2">
+          <Button label="Logout" size="small" onClick={e => logoutHandler()} />
+          <Button label="Cancel" size="small" onClick={() => setConfirmLogout(false)} outlined />
+        </div>}
+      >
+        <Divider className="m-0" />
+        <div className="p-4">
+          <p className="m-0 solid-primary-title" style={{ fontSize: 16 }}>
+            Are you sure you want to log out?
+          </p>
+        </div>
+      </Dialog>
+    </div>
+  );
+};
+
+export default UserProfileMenu;

package/dist/components/layout/user-profile.tsx

@@ -0,0 +1,7 @@
+"use client";
+const UserProfile = () => {
+  // const subMenu = ["Add Module sub menu", "Edit sub menu"];
+  return <div className="UserProfile">vsfvs</div>;
+};
+
+export default UserProfile;

package/dist/components/modelsComponents/filterIcon.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+export const FilterIcon = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="12" viewBox="0 0 18 12" fill="none">
+            <path d="M7 12V10H11V12H7ZM3 7V5H15V7H3ZM0 2V0H18V2H0Z" fill="#8D9199" />
+        </svg>
+    )
+}