@solidstarters/solid-core-ui 0.1.26

package/src/components/layout/FilterMenu.tsx

@@ -0,0 +1,122 @@
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import { OverlayPanel } from "primereact/overlaypanel";
+import { useRef, useState } from "react";
+import FilterComponent from "../common/FilterComponent";
+
+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,12 @@
+
+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,36 @@
+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;

package/src/components/layout/ListingHeader.tsx

@@ -0,0 +1,203 @@
+import React, { useRef, useState } from "react";
+import { Menu } from "primereact/menu";
+import { useDispatch, useSelector } from "react-redux";
+// import { RootState } from "@/redux/store";
+import { gridView, listView } from "@/redux/features/dataViewSlice";
+import { usePathname, useRouter } from 'next/navigation';
+import FilterMenu from "./FilterMenu";
+import { HeaderDynamicTitles } from "../common/HeaderDynamicTitles";
+
+const ListingHeader = () => {
+  const dispatch = useDispatch();
+  const router = useRouter();
+  const pathname = usePathname();
+
+
+  const visibleFieldsPopup = useSelector(
+    (state: any) => state.popup.visibleFieldsPopup
+  );
+
+  const menu = useRef<Menu>(null);
+  const items = [
+    {
+      label: "Settings",
+      icon: "pi pi-cog",
+      command: () => {
+      },
+    },
+    {
+      label: "Update",
+      icon: "pi pi-refresh",
+      command: () => {
+      },
+    },
+    {
+      label: "Delete",
+      icon: "pi pi-trash",
+      command: () => {
+      },
+    },
+  ];
+  const [value, setValue] = useState(null);
+  const contextMenuOptions = [
+    {
+      label: (
+        <div id="kanban" onClick={() => dispatch(gridView())}>
+          <img
+            src="/images/icons/icon-kanban.svg"
+            style={{ width: "18px", height: "18px" }}
+          />
+        </div>
+      ),
+      value: "kanban",
+      tooltip: "Kanban",
+    },
+    {
+      label: (
+        <div id="list_view" onClick={() => dispatch(listView())}>
+          <img
+            src="/images/icons/icon-list.svg"
+            style={{ width: "18px", height: "18px" }}
+          />
+        </div>
+      ),
+      value: "list_view",
+      tooltip: "List view",
+    },
+    {
+      label: (
+        <div id="calender">
+          <img
+            src="/images/icons/icon-calender.svg"
+            style={{ width: "18px", height: "18px" }}
+          />
+        </div>
+      ),
+      value: "calender",
+      tooltip: "Calender",
+    },
+    {
+      label: (
+        <div id="activity">
+          <img
+            src="/images/icons/icon-activity.svg"
+            style={{ width: "18px", height: "18px" }}
+          />
+        </div>
+      ),
+      value: "activity",
+      tooltip: "Activity",
+    },
+    {
+      label: (
+        <div id="graph">
+          <img
+            src="/images/icons/icon-graph.svg"
+            style={{ width: "18px", height: "18px" }}
+          />
+        </div>
+      ),
+      value: "graph",
+      tooltip: "Graph",
+    },
+  ];
+
+  const justifyTemplate = (option: any) => {
+    return <i className={option.icon}></i>;
+  };
+
+
+  const save = () => {
+    const pathName = window.location.pathname;
+    const newPath = pathName.split('/').slice(0, -1).join('/') + '/create';
+
+    router.push(newPath);
+
+
+
+    // switch (pathParts[3]) {
+    //   case "model":
+    //     dispatch(showFieldsPopup());
+    //     break;
+    //   case "module":
+    //     dispatch(showModulePopup());
+    //     break;
+    // }
+  };
+
+  const toggleMenu = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    if (menu.current) {
+      menu.current.toggle(e);
+    }
+  };
+
+
+
+  return (
+    <>
+      <div
+        className="flex justify-content-between align-items-center px-5 relative lg:static"
+        style={{ height: "60px", minHeight: 60, backgroundColor: '#f6f6f9' }}
+      >
+        <div className="flex align-items-center">
+          {/* <i className="pi pi-users" style={{backgroundColor:"#1D6CBC"}}></i> */}
+          {/* <img src="/images/icons/icon-users.svg" />
+                <span className="listHead ml-2">Employees</span> */}
+          <div className="">
+            {/* <SplitButton
+              label="Add"
+              icon="pi pi-plus"
+              onClick={save}
+              model={items}
+              severity="info"
+              className="small-splitbutton"
+            /> */}
+            {pathname.includes('all') &&
+              <HeaderDynamicTitles />
+            }
+          </div>
+        </div>
+        {/* <GlobalSearch /> */}
+        <div className="flex align-items-center">
+
+          {/* <Button label="Show" icon="pi pi-external-link" onClick={() => setVisible(true)} /> */}
+
+          <div>
+            {/* <Menu model={items} popup ref={menu} /> */}
+            {pathname == "/admin/address-master/states" &&
+              <FilterMenu></FilterMenu>
+
+            }
+            {/* <Button
+              icon="pi pi-cog"
+              className="transparent-background"
+              onClick={toggleMenu}
+              aria-haspopup
+              aria-controls="popup_menu"
+            /> */}
+          </div>
+        </div>
+        <div className="flex align-items-center">
+          {/* <div>
+            {contextMenuOptions.map((option) => (
+              <Tooltip
+                key={option.value}
+                target={`#${option.value}`}
+                content={option.tooltip}
+                className="custom-tooltip"
+              />
+            ))}
+            <SelectButton
+              value={value}
+              onChange={(e) => setValue(e.value)}
+              options={contextMenuOptions}
+              className="custom-select-button"
+            />
+          </div> */}
+        </div>
+      </div>
+      {/* <CreateModule></CreateModule> */}
+    </>
+  );
+};
+export default ListingHeader;

package/src/components/layout/Loader.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+const Loader = () => {
+  return (
+    <div className="d-flex justify-content-center center-loader">
+      <div className="lds-ellipsis">
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  );
+};
+
+export default Loader;

package/src/components/layout/UserSidebar.tsx

@@ -0,0 +1,53 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { useState } from "react";
+
+const UserSidebar = () => {
+  const pathname = usePathname();
+
+  const menuItem = [
+    {
+      name: "Update Profile",
+      url: "/me/update",
+      icon: "fas fa-user",
+    },
+    {
+      name: "Upload Avatar",
+      url: "/me/upload_avatar",
+      icon: "fas fa-user-circle",
+    },
+    {
+      name: "Update Password",
+      url: "/me/update_password",
+      icon: "fas fa-lock",
+    },
+  ];
+
+  const [activeMenuItem, setActiveMenuItem] = useState(pathname);
+
+  const handleMenuItemClick = (menuItem: string) => {
+    setActiveMenuItem(menuItem);
+  };
+
+  return (
+    <div className="list-group mt-5 pl-4">
+      {menuItem.map((menuItem, index) => (
+        <Link
+          key={index}
+          href={menuItem.url}
+          className={`fw-bold list-group-item list-group-item-action ${
+            activeMenuItem === menuItem.url ? "active" : ""
+          }`}
+          onClick={() => handleMenuItemClick(menuItem.url)}
+          aria-current={activeMenuItem === menuItem.url ? "true" : "false"}
+        >
+          <i className={`${menuItem.icon} fa-fw pe-2`}></i> {menuItem.name}
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default UserSidebar;