gbs-add-block 0.0.100 → 1.0.1

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.100)
+# GBS Building Blocks 2.0 (v1.0.1)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,9 +6,13 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.100)
+## What's New 🎉 (Ver 1.0.1)
 
-- Updated for bug fixes.
+- Major Update with more stable features and Data Grid.
+- Deprecated Grid Component, Use New Data Grid instead.
+- More UI/UX Optimization.
+- Animation improvements. 
+- Custom Components in SideBar
 
 ## Authors
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.100",
+  "version": "1.0.1",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/datagrid/context/GridContext.tsx

@@ -1,73 +1,14 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  useCallback,
-  useEffect,
-} from "react";
-import { getSourceData } from "../../utils";
+import React, { createContext, useContext } from "react";
+import type { GridContextType, GridProps } from "../type";
 import {
-  clearFilterHelper,
-  handleApplyFilterHelper,
-} from "@grampro/headless-helpers";
-import type { GridProps } from "../type";
-
-interface GridContextType {
-  workingDataSource: any[];
-  fallbackSourceData: any[];
-  workingColumns: any[];
-  currentPage: number;
-  pageStart: number;
-  pageEnd: number;
-  totalPages: number;
-  searchParam: string;
-  activeFilterArray: any[];
-  selectedRows: any[];
-  isFetching: boolean | undefined;
-
-  // Navigation methods
-  nextPage: () => void;
-  prevPage: () => void;
-  goToEndPage: () => void;
-  goToFirstPage: () => void;
-  goToPage: (page: number) => void;
-  lazy: boolean;
-
-  // Search methods
-  handleSearchInput: (e: any) => void;
-  handleSearch: (searchParam: string) => void;
-
-  // Filter methods
-  toggleFilterPopup: (index: number) => void;
-  handleApplyFilter: (event: any) => void;
-  clearFilter: (event: any) => void;
-  handleFilterAction: (action: any, colIndex: number) => void;
-
-  // Row selection methods
-  handleSelectAll: (event: React.ChangeEvent<HTMLInputElement>) => void;
-  handleSelect: (rowData: any) => void;
-  isRowSelected: (rowData: any) => boolean;
-
-  // Grid settings
-  columns: any[];
-  pageSettings: any;
-  enableSearch: boolean;
-  enableExcelExport: boolean;
-  enablePdfExport: boolean;
-  excelName: string;
-  pdfName: string;
-  pdfOptions: any;
-  gridButtonClass: string;
-  selectAll: boolean;
-  tableHeaderStyle: string;
-  gridContainerClass: string;
-  gridColumnStyleSelectAll: string;
-  gridColumnStyle: string;
-  rowChange: (rowData: any) => void;
-  showTotalPages?: boolean;
-  onSearch?: (searchParam: string) => void;
-  onToolbarButtonClick?: (action: string) => void;
-}
+  useDataSource,
+  useColumns,
+  usePagination,
+  useSearch,
+  useFiltering,
+  useRowSelection,
+  usePageStatus,
+} from "../hooks";
 
 const GridContext = createContext<GridContextType | undefined>(undefined);
 
@@ -103,279 +44,76 @@ export const GridProvider: React.FC<{
     onToolbarButtonClick = () => {},
   } = props;
 
-  // States Handling Grid
-  const [workingDataSource, setWorkingDataSource] = useState<any>([]);
-  const [fallbackSourceData, setFallbackSourceData] = useState([]);
-  const [workingColumns, setWorkingColumns] = useState<any>([]);
-  const [currentPage, setCurrentPage] = useState(0);
-  const [pageStart, setPageStart] = useState(0);
-  const [pageEnd, setPageEnd] = useState(10);
-  const [totalPages, setTotalPages] = useState(0);
-  const [searchParam, setSearchParam] = useState("");
-  const [activeFilterArray, setActiveFilterArray] = useState<any>([]);
-  const [selectedRows, setSelectedRows] = useState<any[]>([]);
-
-  // This will returns the Page Navigation Status of Grid
-  useEffect(() => {
-    if (pageStatus) {
-      pageStatus({ currentPage: currentPage, totalPages: totalPages });
-    }
-  }, [pageStatus, currentPage, totalPages]);
-
-  // Function to handle API datasource
-  const getGridData = useCallback(async () => {
-    try {
-      const sourceData = await getSourceData(dataSource);
-      const gridData = sourceData.sourcedata;
-      setFallbackSourceData(gridData);
-      setWorkingDataSource(gridData);
-      const totalPages = Math.ceil(gridData.length / pageSettings.pageNumber);
-      setTotalPages(totalPages);
-      setPageEnd(Math.min(10, totalPages));
-    } catch (error) {
-      console.error("Error fetching grid source data:", error);
-    }
-  }, [dataSource, pageSettings.pageNumber]);
-
-  // Calculates total pages and determine dataSource type
-  useEffect(() => {
-    const handleDataSource = async () => {
-      if (Array.isArray(dataSource)) {
-        setWorkingDataSource(dataSource);
-
-        // if lazy is true, then totalPages will be taken from pageSettings
-        const totalPages =
-          lazy && pageSettings.totalCount
-            ? Math.ceil(pageSettings.totalCount / pageSettings.pageNumber)
-            : Math.ceil(dataSource.length / pageSettings.pageNumber);
-
-        setTotalPages(totalPages);
-        if (!lazy) {
-          setPageEnd(Math.min(10, totalPages));
-        } else {
-          setPageEnd(Math.min(pageStart + 10, totalPages));
-        }
-      } else if (typeof dataSource === "string") {
-        await getGridData();
-      }
-    };
-
-    handleDataSource();
-  }, [dataSource, pageSettings, getGridData]);
-
-  // Adds Filter Column
-  useEffect(() => {
-    if (columns && columns.length > 0) {
-      const filteredColumns = columns.map((column) => ({
-        ...column,
-        showFilterPopup: false,
-        isFilterActive: false,
-      }));
-      setWorkingColumns(filteredColumns);
-    }
-  }, [columns]);
-
-  // Adds Search Column
-  useEffect(() => {
-    if (!columns || columns.length === 0) {
-      if (
-        workingDataSource.length > 0 &&
-        Object.keys(workingDataSource[0]).length > 0
-      ) {
-        const inferredColumns = Object.keys(workingDataSource[0]).map(
-          (key) => ({
-            field: key,
-            headerText: key.charAt(0).toUpperCase() + key.slice(1),
-            width: 150,
-          })
-        );
-        setWorkingColumns((prevColumns: any) => {
-          if (JSON.stringify(prevColumns) !== JSON.stringify(inferredColumns)) {
-            return inferredColumns;
-          }
-          return prevColumns;
-        });
-      }
-    }
-  }, [columns, workingDataSource]);
-
-  // *** Page Navigation Helper Methods
-  const updatePageRange = (page: number) => {
-    const start = Math.floor(page / 10) * 10;
-    setPageStart(start);
-    setPageEnd(Math.min(start + 10, totalPages));
-  };
-
-  const nextPage = () => {
-    setCurrentPage((prevPage) => {
-      if (prevPage < totalPages - 1) {
-        const newPage = prevPage + 1;
-        updatePageRange(newPage);
-        return newPage;
-      }
-      return prevPage;
-    });
-  };
-
-  const prevPage = () => {
-    setCurrentPage((prevPage) => {
-      if (prevPage > 0) {
-        const newPage = prevPage - 1;
-        updatePageRange(newPage);
-        return newPage;
-      }
-      return prevPage;
-    });
-  };
-
-  const goToEndPage = () => {
-    const lastPage = totalPages - 1;
-    setCurrentPage(lastPage);
-    updatePageRange(lastPage);
-  };
-
-  const goToFirstPage = () => {
-    setCurrentPage(0);
-    updatePageRange(0);
-  };
-
-  const goToPage = (page: number) => {
-    setCurrentPage(page);
-    updatePageRange(page);
-  };
-
-  // *** Search Functions
-  const handleSearchInput = (e: any) => {
-    const searchValue = e.target.value;
-    if (searchParamValue) searchParamValue(searchValue);
-    setSearchParam(searchValue);
-
-    if (searchValue === "") {
-      if (!lazy) {
-        setWorkingDataSource(
-          fallbackSourceData.length > 0 ? fallbackSourceData : dataSource
-        );
-        const fallback =
-          fallbackSourceData.length > 0 ? fallbackSourceData : dataSource;
-        const totalPages = Math.ceil(fallback.length / pageSettings.pageNumber);
-        setTotalPages(totalPages);
-        setPageEnd(Math.min(pageStart + 10, totalPages));
-      }
-    }
-  };
-
-  const handleSearch = (searchParam: string) => {
-    if (!lazy) {
-      const filteredData = workingDataSource.filter((item: any) =>
-        Object.values(item).some((val: any) => {
-          const trimmedVal = val.toString().toLowerCase().trim();
-          const trimmedSearchParam = searchParam.toLowerCase().trim();
-          return trimmedVal.includes(trimmedSearchParam);
-        })
-      );
-      setWorkingDataSource(filteredData);
-      resetPage(filteredData);
-    }
-  };
-
-  // *** Filter Functions
-  // Resetting pagination params for updating pagination
-  function resetPage(dataSource: any) {
-    const newTotalPages = Math.ceil(
-      dataSource.length / pageSettings.pageNumber
-    );
-
-    setTotalPages(newTotalPages);
-    setCurrentPage(0);
-    setPageStart(0);
-    setPageEnd(Math.min(10, newTotalPages));
-  }
-
-  const toggleFilterPopup = (index: number) => {
-    setWorkingColumns((prevColumns: any) =>
-      prevColumns.map((column: any, i: any) =>
-        i === index
-          ? { ...column, showFilterPopup: !column.showFilterPopup }
-          : column
-      )
-    );
-  };
-
-  function handleApplyFilter(event: any) {
-    const {
-      columns: updatedColumns,
-      workingDataSource: updatedFullDataSource,
-      activeFilterArray: updatedActiveFilterArray,
-    } = handleApplyFilterHelper(event, columns, workingDataSource);
-
-    setWorkingColumns(updatedColumns);
-    setWorkingDataSource(updatedFullDataSource);
-    setActiveFilterArray(updatedActiveFilterArray);
-    if (activeFilterArrayValue)
-      activeFilterArrayValue(updatedActiveFilterArray);
-    resetPage(updatedFullDataSource);
-  }
+  // Data source management
+  const {
+    workingDataSource,
+    setWorkingDataSource,
+    fallbackSourceData,
+    totalPages,
+    setTotalPages,
+  } = useDataSource(dataSource, pageSettings, lazy);
 
-  function clearFilter(event: any) {
-    const clearDataSource = Array.isArray(dataSource)
-      ? dataSource
-      : fallbackSourceData;
-    const {
-      columns: updatedColumns,
-      workingDataSource: updatedDataSource,
-      activeFilterArray: updatedActiveFilterArray,
-    } = clearFilterHelper(event, workingColumns, clearDataSource);
+  // Column management
+  const { workingColumns, setWorkingColumns } = useColumns(
+    columns,
+    workingDataSource
+  );
 
-    setWorkingColumns(updatedColumns);
-    setWorkingDataSource(updatedDataSource);
-    setActiveFilterArray(updatedActiveFilterArray);
-    if (activeFilterArrayValue)
-      activeFilterArrayValue(updatedActiveFilterArray);
-    resetPage(updatedDataSource);
-  }
+  // Pagination management
+  const {
+    currentPage,
+    pageStart,
+    pageEnd,
+    nextPage,
+    prevPage,
+    goToEndPage,
+    goToFirstPage,
+    goToPage,
+    resetPage,
+  } = usePagination(totalPages, lazy);
 
-  const handleFilterAction = (action: any, colIndex: number) => {
-    switch (action.type) {
-      case "cancel":
-        toggleFilterPopup(colIndex);
-        break;
-      case "applyFilter":
-        handleApplyFilter(action);
-        break;
-      case "clearFilter":
-        clearFilter(action);
-        break;
-      default:
-        break;
-    }
-  };
+  // Search functionality
+  const { searchParam, handleSearchInput, handleSearch } = useSearch({
+    workingDataSource,
+    setWorkingDataSource,
+    fallbackSourceData,
+    dataSource,
+    lazy,
+    pageSettings,
+    resetPage,
+    setTotalPages,
+    searchParamValue,
+  });
 
-  // *** Row Selection Functions
-  const handleSelectAll = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const selected = event.target.checked ? workingDataSource : [];
-    setSelectedRows(selected);
-    onSelectRow?.(selected);
-  };
+  // Filtering functionality
+  const {
+    activeFilterArray,
+    toggleFilterPopup,
+    handleApplyFilter,
+    clearFilter,
+    handleFilterAction,
+  } = useFiltering({
+    columns,
+    workingColumns,
+    setWorkingColumns,
+    workingDataSource,
+    setWorkingDataSource,
+    dataSource,
+    fallbackSourceData,
+    resetPage,
+    setTotalPages,
+    pageSettings,
+    activeFilterArrayValue,
+  });
 
-  const handleSelect = (rowData: any) => {
-    setSelectedRows((prevData) => {
-      const isSelected = prevData.includes(rowData);
-      let updatedData;
-      if (isSelected) {
-        updatedData = prevData.filter((item) => item !== rowData);
-      } else {
-        updatedData = [...prevData, rowData];
-      }
-      if (onSelectRow) onSelectRow(updatedData);
-      return updatedData;
-    });
-  };
+  // Row selection functionality
+  const { selectedRows, handleSelectAll, handleSelect, isRowSelected } =
+    useRowSelection(workingDataSource, onSelectRow);
 
-  const isRowSelected = (rowData: any) => {
-    return selectedRows.includes(rowData);
-  };
+  // Page status reporting
+  usePageStatus(currentPage, totalPages, pageStatus);
 
-  // Provide context value
+  // Context value
   const contextValue: GridContextType = {
     // State
     workingDataSource,

package/source/components/datagrid/hooks/index.ts

@@ -0,0 +1,7 @@
+export { useDataSource } from "./useDataSource";
+export { useColumns } from "./useColumns";
+export { usePagination } from "./usePagination";
+export { useSearch } from "./useSearch";
+export { useFiltering } from "./useFiltering";
+export { useRowSelection } from "./useRowSelection";
+export { usePageStatus } from "./usePageStatus";

package/source/components/datagrid/hooks/useColumns.ts

@@ -0,0 +1,33 @@
+import { useState, useEffect } from "react";
+
+export const useColumns = (columns: any[], workingDataSource: any[]) => {
+  const [workingColumns, setWorkingColumns] = useState<any>([]);
+
+  useEffect(() => {
+    if (columns && columns.length > 0) {
+      const filteredColumns = columns.map((column) => ({
+        ...column,
+        showFilterPopup: false,
+        isFilterActive: false,
+      }));
+      setWorkingColumns(filteredColumns);
+    } else if (
+      workingDataSource.length > 0 &&
+      Object.keys(workingDataSource[0]).length > 0
+    ) {
+      const inferredColumns = Object.keys(workingDataSource[0]).map((key) => ({
+        field: key,
+        headerText: key.charAt(0).toUpperCase() + key.slice(1),
+        width: 150,
+      }));
+      setWorkingColumns((prevColumns: any) => {
+        if (JSON.stringify(prevColumns) !== JSON.stringify(inferredColumns)) {
+          return inferredColumns;
+        }
+        return prevColumns;
+      });
+    }
+  }, [columns, workingDataSource]);
+
+  return { workingColumns, setWorkingColumns };
+};

package/source/components/datagrid/hooks/useDataSource.ts

@@ -0,0 +1,54 @@
+import { useState, useCallback, useEffect } from "react";
+import { getSourceData } from "../../utils";
+
+export const useDataSource = (
+  dataSource: any,
+  pageSettings: any,
+  lazy: boolean
+) => {
+  const [workingDataSource, setWorkingDataSource] = useState<any>([]);
+  const [fallbackSourceData, setFallbackSourceData] = useState([]);
+  const [totalPages, setTotalPages] = useState(0);
+
+  const getGridData = useCallback(async () => {
+    try {
+      const sourceData = await getSourceData(dataSource);
+      const gridData = sourceData.sourcedata;
+      setFallbackSourceData(gridData);
+      setWorkingDataSource(gridData);
+      const totalPages = Math.ceil(gridData.length / pageSettings.pageNumber);
+      setTotalPages(totalPages);
+      return totalPages;
+    } catch (error) {
+      console.error("Error fetching grid source data:", error);
+      return 0;
+    }
+  }, [dataSource, pageSettings.pageNumber]);
+
+  useEffect(() => {
+    const handleDataSource = async () => {
+      if (Array.isArray(dataSource)) {
+        setWorkingDataSource(dataSource);
+
+        const totalPages =
+          lazy && pageSettings.totalCount
+            ? Math.ceil(pageSettings.totalCount / pageSettings.pageNumber)
+            : Math.ceil(dataSource.length / pageSettings.pageNumber);
+
+        setTotalPages(totalPages);
+      } else if (typeof dataSource === "string") {
+        await getGridData();
+      }
+    };
+
+    handleDataSource();
+  }, [dataSource, pageSettings, lazy, getGridData]);
+
+  return {
+    workingDataSource,
+    setWorkingDataSource,
+    fallbackSourceData,
+    totalPages,
+    setTotalPages,
+  };
+};

package/source/components/datagrid/hooks/useFiltering.ts

@@ -0,0 +1,135 @@
+import { useState, useCallback } from "react";
+import {
+  clearFilterHelper,
+  handleApplyFilterHelper,
+} from "@grampro/headless-helpers";
+
+interface UseFilteringProps {
+  columns: any[];
+  workingColumns: any[];
+  setWorkingColumns: (columns: any[]) => void;
+  workingDataSource: any[];
+  setWorkingDataSource: (data: any[]) => void;
+  dataSource: any;
+  fallbackSourceData: any[];
+  resetPage: (data: any[], settings: any) => number;
+  setTotalPages: (pages: number) => void;
+  pageSettings: any;
+  activeFilterArrayValue?: (filters: any[]) => void;
+}
+
+export const useFiltering = ({
+  columns,
+  workingColumns,
+  setWorkingColumns,
+  workingDataSource,
+  setWorkingDataSource,
+  dataSource,
+  fallbackSourceData,
+  resetPage,
+  setTotalPages,
+  pageSettings,
+  activeFilterArrayValue,
+}: UseFilteringProps) => {
+  const [activeFilterArray, setActiveFilterArray] = useState<any>([]);
+
+  const toggleFilterPopup = useCallback(
+    (index: number) => {
+      setWorkingColumns(
+        workingColumns.map((column: any, i: any) =>
+          i === index
+            ? { ...column, showFilterPopup: !column.showFilterPopup }
+            : column
+        )
+      );
+    },
+    [workingColumns, setWorkingColumns]
+  );
+
+  const handleApplyFilter = useCallback(
+    (event: any) => {
+      const {
+        columns: updatedColumns,
+        workingDataSource: updatedFullDataSource,
+        activeFilterArray: updatedActiveFilterArray,
+      } = handleApplyFilterHelper(event, columns, workingDataSource);
+
+      setWorkingColumns(updatedColumns);
+      setWorkingDataSource(updatedFullDataSource);
+      setActiveFilterArray(updatedActiveFilterArray);
+      if (activeFilterArrayValue)
+        activeFilterArrayValue(updatedActiveFilterArray);
+      const totalPages = resetPage(updatedFullDataSource, pageSettings);
+      setTotalPages(totalPages);
+    },
+    [
+      columns,
+      workingDataSource,
+      setWorkingColumns,
+      setWorkingDataSource,
+      activeFilterArrayValue,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  const clearFilter = useCallback(
+    (event: any) => {
+      const clearDataSource = Array.isArray(dataSource)
+        ? dataSource
+        : fallbackSourceData;
+      const {
+        columns: updatedColumns,
+        workingDataSource: updatedDataSource,
+        activeFilterArray: updatedActiveFilterArray,
+      } = clearFilterHelper(event, workingColumns, clearDataSource);
+
+      setWorkingColumns(updatedColumns);
+      setWorkingDataSource(updatedDataSource);
+      setActiveFilterArray(updatedActiveFilterArray);
+      if (activeFilterArrayValue)
+        activeFilterArrayValue(updatedActiveFilterArray);
+      const totalPages = resetPage(updatedDataSource, pageSettings);
+      setTotalPages(totalPages);
+    },
+    [
+      dataSource,
+      fallbackSourceData,
+      workingColumns,
+      setWorkingColumns,
+      setWorkingDataSource,
+      activeFilterArrayValue,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  const handleFilterAction = useCallback(
+    (action: any, colIndex: number) => {
+      switch (action.type) {
+        case "cancel":
+          toggleFilterPopup(colIndex);
+          break;
+        case "applyFilter":
+          handleApplyFilter(action);
+          break;
+        case "clearFilter":
+          clearFilter(action);
+          break;
+        default:
+          break;
+      }
+    },
+    [toggleFilterPopup, handleApplyFilter, clearFilter]
+  );
+
+  return {
+    activeFilterArray,
+    toggleFilterPopup,
+    handleApplyFilter,
+    clearFilter,
+    handleFilterAction,
+  };
+};

package/source/components/datagrid/hooks/usePageStatus.ts

@@ -0,0 +1,13 @@
+import { useEffect } from "react";
+
+export const usePageStatus = (
+  currentPage: number,
+  totalPages: number,
+  pageStatus?: (status: any) => void
+) => {
+  useEffect(() => {
+    if (pageStatus) {
+      pageStatus({ currentPage, totalPages });
+    }
+  }, [pageStatus, currentPage, totalPages]);
+};

package/source/components/datagrid/hooks/usePagination.ts

@@ -0,0 +1,88 @@
+import { useState, useCallback, useEffect } from "react";
+
+export const usePagination = (totalPages: number, lazy: boolean) => {
+  const [currentPage, setCurrentPage] = useState(0);
+  const [pageStart, setPageStart] = useState(0);
+  const [pageEnd, setPageEnd] = useState(10);
+
+  const updatePageRange = useCallback(
+    (page: number) => {
+      const start = Math.floor(page / 10) * 10;
+      setPageStart(start);
+      setPageEnd(Math.min(start + 10, totalPages));
+    },
+    [totalPages]
+  );
+
+  useEffect(() => {
+    if (!lazy) {
+      setPageEnd(Math.min(10, totalPages));
+    } else {
+      setPageEnd(Math.min(pageStart + 10, totalPages));
+    }
+  }, [totalPages, lazy, pageStart]);
+
+  const nextPage = useCallback(() => {
+    setCurrentPage((prevPage) => {
+      if (prevPage < totalPages - 1) {
+        const newPage = prevPage + 1;
+        updatePageRange(newPage);
+        return newPage;
+      }
+      return prevPage;
+    });
+  }, [totalPages, updatePageRange]);
+
+  const prevPage = useCallback(() => {
+    setCurrentPage((prevPage) => {
+      if (prevPage > 0) {
+        const newPage = prevPage - 1;
+        updatePageRange(newPage);
+        return newPage;
+      }
+      return prevPage;
+    });
+  }, [updatePageRange]);
+
+  const goToEndPage = useCallback(() => {
+    const lastPage = totalPages - 1;
+    setCurrentPage(lastPage);
+    updatePageRange(lastPage);
+  }, [totalPages, updatePageRange]);
+
+  const goToFirstPage = useCallback(() => {
+    setCurrentPage(0);
+    updatePageRange(0);
+  }, [updatePageRange]);
+
+  const goToPage = useCallback(
+    (page: number) => {
+      setCurrentPage(page);
+      updatePageRange(page);
+    },
+    [updatePageRange]
+  );
+
+  const resetPage = useCallback((dataSource: any, pageSettings: any) => {
+    const newTotalPages = Math.ceil(
+      dataSource.length / pageSettings.pageNumber
+    );
+    setCurrentPage(0);
+    setPageStart(0);
+    setPageEnd(Math.min(10, newTotalPages));
+    return newTotalPages;
+  }, []);
+
+  return {
+    currentPage,
+    pageStart,
+    pageEnd,
+    nextPage,
+    prevPage,
+    goToEndPage,
+    goToFirstPage,
+    goToPage,
+    resetPage,
+    updatePageRange,
+  };
+};

package/source/components/datagrid/hooks/useRowSelection.ts

@@ -0,0 +1,48 @@
+import { useState, useCallback } from "react";
+
+export const useRowSelection = (
+  workingDataSource: any[],
+  onSelectRow?: (rows: any[]) => void
+) => {
+  const [selectedRows, setSelectedRows] = useState<any[]>([]);
+
+  const handleSelectAll = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const selected = event.target.checked ? workingDataSource : [];
+      setSelectedRows(selected);
+      onSelectRow?.(selected);
+    },
+    [workingDataSource, onSelectRow]
+  );
+
+  const handleSelect = useCallback(
+    (rowData: any) => {
+      setSelectedRows((prevData) => {
+        const isSelected = prevData.includes(rowData);
+        let updatedData;
+        if (isSelected) {
+          updatedData = prevData.filter((item) => item !== rowData);
+        } else {
+          updatedData = [...prevData, rowData];
+        }
+        if (onSelectRow) onSelectRow(updatedData);
+        return updatedData;
+      });
+    },
+    [onSelectRow]
+  );
+
+  const isRowSelected = useCallback(
+    (rowData: any) => {
+      return selectedRows.includes(rowData);
+    },
+    [selectedRows]
+  );
+
+  return {
+    selectedRows,
+    handleSelectAll,
+    handleSelect,
+    isRowSelected,
+  };
+};

package/source/components/datagrid/hooks/useSearch.ts

@@ -0,0 +1,86 @@
+import { useState, useCallback } from "react";
+
+interface UseSearchProps {
+  workingDataSource: any[];
+  setWorkingDataSource: (data: any[]) => void;
+  fallbackSourceData: any[];
+  dataSource: any;
+  lazy: boolean;
+  pageSettings: any;
+  resetPage: (data: any[], settings: any) => number;
+  setTotalPages: (pages: number) => void;
+  searchParamValue?: (value: string) => void;
+}
+
+export const useSearch = ({
+  workingDataSource,
+  setWorkingDataSource,
+  fallbackSourceData,
+  dataSource,
+  lazy,
+  pageSettings,
+  resetPage,
+  setTotalPages,
+  searchParamValue,
+}: UseSearchProps) => {
+  const [searchParam, setSearchParam] = useState("");
+
+  const handleSearchInput = useCallback(
+    (e: any) => {
+      const searchValue = e.target.value;
+      if (searchParamValue) searchParamValue(searchValue);
+      setSearchParam(searchValue);
+
+      if (searchValue === "") {
+        if (!lazy) {
+          const fallback =
+            fallbackSourceData.length > 0 ? fallbackSourceData : dataSource;
+          setWorkingDataSource(fallback);
+          const totalPages = resetPage(fallback, pageSettings);
+          setTotalPages(totalPages);
+        }
+      }
+    },
+    [
+      searchParamValue,
+      lazy,
+      fallbackSourceData,
+      dataSource,
+      setWorkingDataSource,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  const handleSearch = useCallback(
+    (searchParam: string) => {
+      if (!lazy) {
+        const filteredData = workingDataSource.filter((item: any) =>
+          Object.values(item).some((val: any) => {
+            const trimmedVal = val.toString().toLowerCase().trim();
+            const trimmedSearchParam = searchParam.toLowerCase().trim();
+            return trimmedVal.includes(trimmedSearchParam);
+          })
+        );
+        setWorkingDataSource(filteredData);
+        const totalPages = resetPage(filteredData, pageSettings);
+        setTotalPages(totalPages);
+      }
+    },
+    [
+      lazy,
+      workingDataSource,
+      setWorkingDataSource,
+      resetPage,
+      pageSettings,
+      setTotalPages,
+    ]
+  );
+
+  return {
+    searchParam,
+    handleSearchInput,
+    handleSearch,
+  };
+};

package/source/components/datagrid/layout/GridBody.tsx

@@ -1,6 +1,5 @@
-import React from "react";
+import React, { act } from "react";
 import { useGridContext } from "../context/GridContext";
-import { useGridFilter, useGridRowSelection } from "../hooks/GridHooks";
 import FilterPopup from "./FilterPopup";
 import Icon from "../../icon/Icon";
 import { listFilter } from "../../icon/iconPaths";
@@ -18,6 +17,13 @@ const GridBody = () => {
     gridColumnStyleSelectAll,
     rowChange,
     lazy,
+    activeFilterArray,
+    toggleFilterPopup,
+    handleFilterAction,
+    selectAll,
+    handleSelectAll,
+    handleSelect,
+    isRowSelected,
   } = useGridContext();
 
   const renderCell = (rowData: any, column: Column, rowIndex: number) => {
@@ -47,11 +53,6 @@ const GridBody = () => {
     return cellValue;
   };
 
-  const { activeFilterArray, toggleFilterPopup, handleFilterAction } =
-    useGridFilter();
-  const { selectAll, handleSelectAll, handleSelect, isRowSelected } =
-    useGridRowSelection();
-
   const displayStart = currentPage * pageSettings.pageNumber;
   const displayEnd = displayStart + pageSettings.pageNumber;
   const displayData = lazy

package/source/components/datagrid/layout/GridPagination.tsx

@@ -1,5 +1,4 @@
 import React from "react";
-import { useGridPagination } from "../hooks/GridHooks";
 import Icon from "../../icon/Icon";
 import {
   leftArrow,
@@ -7,6 +6,7 @@ import {
   rightArrow,
   rightArrows,
 } from "../../icon/iconPaths";
+import { useGridContext } from "../context/GridContext";
 
 const Pagination = () => {
   const {
@@ -23,7 +23,7 @@ const Pagination = () => {
     lazy,
     pageSettings,
     showTotalPages,
-  } = useGridPagination();
+  } = useGridContext();
 
   return (
     <div className="w-full flex flex-wrap justify-between items-center text-xs px-2 py-4 bg-zinc-100 dark:bg-zinc-900 gap-2 md:gap-4">

package/source/components/datagrid/layout/GridToolbar.tsx

@@ -1,11 +1,11 @@
-import React, { lazy } from "react";
-import { useGridExport, useGridSearch } from "../hooks/GridHooks";
+import React from "react";
 import {
   exportToExcelHelper,
   exportToPDFHelper,
 } from "@grampro/headless-helpers";
 import Icon from "../../icon/Icon";
 import { search } from "../../icon/iconPaths";
+import { useGridContext } from "../context/GridContext";
 
 const GridToolbar = () => {
   const {
@@ -14,9 +14,6 @@ const GridToolbar = () => {
     handleSearch,
     enableSearch,
     onSearch,
-  } = useGridSearch();
-
-  const {
     enableExcelExport,
     enablePdfExport,
     workingDataSource,
@@ -26,7 +23,8 @@ const GridToolbar = () => {
     pdfOptions,
     gridButtonClass,
     onToolbarButtonClick,
-  } = useGridExport();
+    lazy,
+  } = useGridContext();
 
   if (!enableSearch && !enableExcelExport && !enablePdfExport) {
     return null;
@@ -71,6 +69,7 @@ const GridToolbar = () => {
             <button
               className={gridButtonClass}
               onClick={() => {
+                console.log("clicked", lazy.toString());
                 if (!lazy) {
                   exportToExcelHelper(workingDataSource, columns, excelName);
                 }

package/source/components/datagrid/type.ts

@@ -121,3 +121,60 @@ export type GridBodyProps = {
   gridColumnStyle: string;
   rowChange?: (changes: any) => void;
 };
+
+export interface GridContextType {
+  workingDataSource: any[];
+  fallbackSourceData: any[];
+  workingColumns: any[];
+  currentPage: number;
+  pageStart: number;
+  pageEnd: number;
+  totalPages: number;
+  searchParam: string;
+  activeFilterArray: any[];
+  selectedRows: any[];
+  isFetching: boolean | undefined;
+
+  // Navigation methods
+  nextPage: () => void;
+  prevPage: () => void;
+  goToEndPage: () => void;
+  goToFirstPage: () => void;
+  goToPage: (page: number) => void;
+  lazy: boolean;
+
+  // Search methods
+  handleSearchInput: (e: any) => void;
+  handleSearch: (searchParam: string) => void;
+
+  // Filter methods
+  toggleFilterPopup: (index: number) => void;
+  handleApplyFilter: (event: any) => void;
+  clearFilter: (event: any) => void;
+  handleFilterAction: (action: any, colIndex: number) => void;
+
+  // Row selection methods
+  handleSelectAll: (event: React.ChangeEvent<HTMLInputElement>) => void;
+  handleSelect: (rowData: any) => void;
+  isRowSelected: (rowData: any) => boolean;
+
+  // Grid settings
+  columns: any[];
+  pageSettings: any;
+  enableSearch: boolean;
+  enableExcelExport: boolean;
+  enablePdfExport: boolean;
+  excelName: string;
+  pdfName: string;
+  pdfOptions: any;
+  gridButtonClass: string;
+  selectAll: boolean;
+  tableHeaderStyle: string;
+  gridContainerClass: string;
+  gridColumnStyleSelectAll: string;
+  gridColumnStyle: string;
+  rowChange: (rowData: any) => void;
+  showTotalPages?: boolean;
+  onSearch?: (searchParam: string) => void;
+  onToolbarButtonClick?: (action: string) => void;
+}

package/source/components/sidebar/components/MenuItem.tsx

@@ -21,6 +21,18 @@ export const MenuItemComponent = ({
     }
   }, []);
 
+  if (item.type === "custom" && item.component) {
+    const CustomComponent = item.component;
+    return (
+      <li className="py-2 px-3 flex items-center text-sm text-gray-700">
+        <span className="mr-3">
+          <IconComponent />
+        </span>
+        <CustomComponent />
+      </li>
+    );
+  }
+
   return (
     <li>
       <a

package/source/components/sidebar/components/SidebarFooter.tsx

@@ -3,14 +3,9 @@ import { MenuItem, IconComponent } from "../type";
 type SidebarFooterProps = {
   footerItems?: MenuItem[];
   iconMap: Record<string, IconComponent>;
-  toggleProMode: () => void;
 };
 
-export const SidebarFooter = ({
-  footerItems,
-  iconMap,
-  toggleProMode,
-}: SidebarFooterProps) => {
+export const SidebarFooter = ({ footerItems, iconMap }: SidebarFooterProps) => {
   if (!footerItems) return null;
   if (!iconMap) return null;
 
@@ -20,28 +15,17 @@ export const SidebarFooter = ({
         {footerItems?.map((item) => {
           const IconComponent = iconMap[item.icon] || (() => null);
 
-          if (item.toggle) {
+          if (item.type === "custom" && item.component) {
+            const CustomComponent = item.component;
             return (
               <li
                 key={item.id}
-                className="flex items-center py-2 px-3 text-sm text-gray-700"
+                className="py-2 px-3 flex items-center text-sm text-gray-700"
               >
                 <span className="mr-3">
                   <IconComponent />
                 </span>
-                <span className="flex-grow">{item.name}</span>
-                <button
-                  onClick={toggleProMode}
-                  className={`w-10 h-5 flex items-center rounded-full p-1 ${
-                    item.active ? "bg-black" : "bg-gray-300"
-                  }`}
-                >
-                  <span
-                    className={`bg-white w-4 h-4 rounded-full shadow-md transform transition-transform ${
-                      item.active ? "translate-x-5" : ""
-                    }`}
-                  />
-                </button>
+                <CustomComponent />
               </li>
             );
           }

package/source/components/sidebar/components/SidebarMenu.tsx

@@ -11,6 +11,7 @@ export const SidebarMenu = ({
   sections,
   iconMap,
   toggleItem,
+  
 }: SidebarMenuProps) => {
   return (
     <div className="flex-grow overflow-y-auto px-4 py-2">

package/source/components/sidebar/hooks/useSidebarState.ts

@@ -19,20 +19,23 @@ export const useSidebarState = (menuData: MenuData) => {
     }
   };
 
-  const toggleProMode = (): void => {
+  const toggleMode = (): void => {
     const newData = { ...sidebarData };
     if (!newData.footer) return;
 
-    const proModeIndex = newData.footer.findIndex((item) => item.toggle);
-    if (proModeIndex === -1) return;
+    const toggleModeIndex = newData.footer.findIndex(
+      (item) => item.type === "toggle"
+    );
+    if (toggleModeIndex === -1) return;
 
-    newData.footer[proModeIndex].active = !newData.footer[proModeIndex].active;
+    newData.footer[toggleModeIndex].active =
+      !newData.footer[toggleModeIndex].active;
     setSidebarData({ ...newData });
   };
 
   return {
     sidebarData,
     toggleItem,
-    toggleProMode,
+    toggleMode,
   };
 };

package/source/components/sidebar/index.tsx

@@ -6,21 +6,17 @@ import { SidebarFooter } from "./components/SidebarFooter";
 import { UserProfile } from "./components/UserProfile";
 
 export function Sidebar({ menuData, iconMap }: SidebarProps) {
-  const { sidebarData, toggleItem, toggleProMode } = useSidebarState(menuData);
+  const { sidebarData, toggleItem } = useSidebarState(menuData);
 
   return (
-    <div className="hidden md:flex flex-col h-screen bg-white w-64 border-r border-gray-200">
+    <div className="hidden md:flex flex-col h-screen bg-white w-64 border-r border-gray-200 sticky left-0 top-0">
       <SidebarLogo logo={sidebarData.logo} />
       <SidebarMenu
         sections={sidebarData.sections}
         iconMap={iconMap}
         toggleItem={toggleItem}
       />
-      <SidebarFooter
-        footerItems={sidebarData.footer}
-        iconMap={iconMap}
-        toggleProMode={toggleProMode}
-      />
+      <SidebarFooter footerItems={sidebarData.footer} iconMap={iconMap} />
       <UserProfile profile={sidebarData.profile} />
     </div>
   );

package/source/components/sidebar/type.ts

@@ -1,20 +1,25 @@
 export type IconComponent = React.FC;
 
 export type MenuItem = {
-  id: number;
+  id: number | string;
   name: string;
   icon: string;
-  path: string;
+  path?: string;
   active?: boolean;
   expandable?: boolean;
   expanded?: boolean;
   badge?: string;
   toggle?: boolean;
+  type?: string;
+  component?: React.FC;
 };
 
 export type MenuSection = {
+  id?: number | string;
   title: string;
   items: MenuItem[];
+  component?: React.FC;
+  type?: string;
 };
 
 export type MenuData = {

package/source/components/datagrid/hooks/GridHooks.tsx

@@ -1,114 +0,0 @@
-import { useGridContext } from "../context/GridContext";
-
-// Hook for pagination functionality
-export const useGridPagination = () => {
-  const {
-    currentPage,
-    pageStart,
-    pageEnd,
-    totalPages,
-    goToFirstPage,
-    prevPage,
-    goToPage,
-    nextPage,
-    goToEndPage,
-    workingDataSource,
-    lazy,
-    pageSettings,
-    showTotalPages,
-  } = useGridContext();
-
-  return {
-    currentPage,
-    pageStart,
-    pageEnd,
-    totalPages,
-    goToFirstPage,
-    prevPage,
-    goToPage,
-    nextPage,
-    goToEndPage,
-    workingDataSource,
-    lazy,
-    pageSettings,
-    showTotalPages,
-  };
-};
-
-// Hook for grid search functionality
-export const useGridSearch = () => {
-  const {
-    searchParam,
-    handleSearchInput,
-    handleSearch,
-    enableSearch,
-    onSearch,
-  } = useGridContext();
-
-  return {
-    searchParam,
-    handleSearchInput,
-    handleSearch,
-    enableSearch,
-    onSearch,
-  };
-};
-
-// Hook for grid filter functionality
-export const useGridFilter = () => {
-  const {
-    workingColumns,
-    activeFilterArray,
-    toggleFilterPopup,
-    handleFilterAction,
-  } = useGridContext();
-
-  return {
-    workingColumns,
-    activeFilterArray,
-    toggleFilterPopup,
-    handleFilterAction,
-  };
-};
-
-// Hook for row selection
-export const useGridRowSelection = () => {
-  const { selectAll, handleSelectAll, handleSelect, isRowSelected } =
-    useGridContext();
-
-  return {
-    selectAll,
-    handleSelectAll,
-    handleSelect,
-    isRowSelected,
-  };
-};
-
-// Hook for export functionality
-export const useGridExport = () => {
-  const {
-    enableExcelExport,
-    enablePdfExport,
-    workingDataSource,
-    columns,
-    excelName,
-    pdfName,
-    pdfOptions,
-    gridButtonClass,
-    onToolbarButtonClick,
-    lazy,
-  } = useGridContext();
-
-  return {
-    enableExcelExport,
-    enablePdfExport,
-    workingDataSource,
-    columns,
-    excelName,
-    pdfName,
-    pdfOptions,
-    gridButtonClass,
-    onToolbarButtonClick,
-    lazy,
-  };
-};