Initial commit

2025-10-01 01:39:07 +00:00
commit b430bf3b96
826 changed files with 255287 additions and 0 deletions
--- a/layout/AppBreadCrumb.tsx
+++ b/layout/AppBreadCrumb.tsx
@@ -0,0 +1,94 @@
+'use client';
+
+import { usePathname } from 'next/navigation';
+import { ObjectUtils, classNames } from 'primereact/utils';
+import React, { useContext, useEffect, useRef, useState } from 'react';
+import { LayoutContext } from './context/layoutcontext';
+import { Breadcrumb } from '../types/layout';
+import { InputText } from 'primereact/inputtext';
+import { Button } from 'primereact/button';
+
+const AppBreadcrumb = () => {
+    const [searchActive, setSearchActive] = useState(false);
+    const pathname = usePathname();
+    const [breadcrumb, setBreadcrumb] = useState<Breadcrumb | null>(null);
+    const { breadcrumbs, showSidebar } = useContext(LayoutContext);
+    const searchInput = useRef(null);
+
+    useEffect(() => {
+        const filteredBreadcrumbs = breadcrumbs?.find((crumb) => {
+            const lastPathSegment = crumb.to.split('/').pop();
+            const lastRouterSegment = pathname.split('/').pop();
+
+            if (lastRouterSegment?.startsWith('[') && !isNaN(Number(lastPathSegment))) {
+                return pathname.split('/').slice(0, -1).join('/') === crumb.to?.split('/').slice(0, -1).join('/');
+            }
+            return crumb.to === pathname;
+        });
+
+        setBreadcrumb(filteredBreadcrumbs);
+    }, [pathname, breadcrumbs]);
+
+    const activateSearch = () => {
+        setSearchActive(true);
+        setTimeout(() => {
+            searchInput.current.focus();
+        }, 100);
+    };
+
+    const deactivateSearch = () => {
+        setSearchActive(false);
+    };
+
+    const onSidebarButtonClick = () => {
+        showSidebar();
+    };
+
+    return (
+        <div className="layout-breadcrumb flex align-items-center relative h-3rem">
+            <nav className="layout-breadcrumb">
+                <ol>
+                    {ObjectUtils.isNotEmpty(breadcrumb) && pathname !== '/' ? (
+                        breadcrumb.labels.map((label, index) => {
+                            return (
+                                <React.Fragment key={index}>
+                                    {index !== 0 && <li className="layout-breadcrumb-chevron"> / </li>}
+                                    <li key={index}>{label}</li>
+                                </React.Fragment>
+                            );
+                        })
+                    ) : (
+                        <li key={'home'}>E-Commerce Dashboard</li>
+                    )}
+                </ol>
+            </nav>
+            <ul className="breadcrumb-menu flex align-items-center justify-content-end lg:hidden absolute right-0 top-0 z-4 h-3rem w-screen">
+                <li className="w-full m-0 ml-3">
+                    <div className={classNames('breadcrumb-search flex justify-content-end', { 'breadcrumb-search-active': searchActive })}>
+                        <Button icon="pi pi-search" className="breadcrumb-searchbutton p-button-text p-button-secondary text-color-secondary p-button-rounded flex-shrink-0" type="button" onClick={activateSearch}></Button>
+                        <div className="search-input-wrapper">
+                            <span className="p-input-icon-right">
+                                <InputText
+                                    ref={searchInput}
+                                    type="text"
+                                    placeholder="Search"
+                                    onBlur={deactivateSearch}
+                                    onKeyDown={(e) => {
+                                        if (e.key === 'ESCAPE') deactivateSearch();
+                                    }}
+                                />
+                                <i className="pi pi-search"></i>
+                            </span>
+                        </div>
+                    </div>
+                </li>
+                <li className="right-panel-button relative lg:block">
+                    <Button type="button" label="Today" style={{ width: '6.7rem' }} icon="pi pi-bookmark" className="layout-rightmenu-button hidden md:block font-normal" onClick={onSidebarButtonClick}></Button>
+                    <Button type="button" style={{ width: '3.286rem' }} icon="pi pi-bookmark" className="layout-rightmenu-button block md:hidden font-normal" onClick={onSidebarButtonClick}></Button>
+                </li>
+            </ul>
+        </div>
+    );
+};
+
+export default AppBreadcrumb;