@solidstarters/solid-core-ui 1.1.69 → 1.1.71

package/dist/components/core/kanban/SolidKanbanView.tsx

@@ -0,0 +1,803 @@
+// @ts-nocheck
+
+"use client";
+import { createPermission, deletePermission, updatePermission } from "@/helpers/permissions";
+import { createSolidEntityApi } from "@/redux/api/solidEntityApi";
+import { useGetSolidViewLayoutQuery } from "@/redux/api/solidViewApi";
+import { useLazyCheckIfPermissionExistsQuery } from "@/redux/api/userApi";
+import { DropResult } from "@hello-pangea/dnd";
+import Link from "next/link";
+import { FilterMatchMode } from "primereact/api";
+import { Button } from "primereact/button";
+import { Dialog } from "primereact/dialog";
+import qs from "qs";
+import { useEffect, useRef, useState } from "react";
+import { SolidCreateButton } from "../common/SolidCreateButton";
+import { SolidGlobalSearchElement } from "../common/SolidGlobalSearchElement";
+import KanbanBoard from "./KanbanBoard";
+import CompactImage from '../../../resources/images/layout/images/compact.png';
+import CozyImage from '../../../resources/images/layout/images/cozy.png';
+import ComfortableImage from '../../../resources/images/layout/images/comfortable.png';
+import ListImage from '../../../resources/images/layout/images/cozy.png';
+import KanbanImage from '../../../resources/images/layout/images/kanban.png';
+import { capitalize } from "lodash";
+import Lightbox from "yet-another-react-lightbox";
+import Counter from "yet-another-react-lightbox/plugins/counter";
+import Download from "yet-another-react-lightbox/plugins/download";
+import "yet-another-react-lightbox/styles.css";
+import "yet-another-react-lightbox/plugins/counter.css";
+import { useRouter, useSearchParams } from "next/navigation";
+import { SolidKanbanViewConfigure } from "./SolidKanbanViewConfigure";
+import { KanbanUserViewLayout } from "./KanbanUserViewLayout";
+import { useSelector } from "react-redux";
+import { queryObjectToQueryString, queryStringToQueryObject } from "../list/SolidListView";
+
+
+import { Toast } from "primereact/toast";
+import { useSelector } from "react-redux";
+import { queryObjectToQueryString, queryStringToQueryObject } from "../list/SolidListView";
+
+
+
+type SolidKanbanViewParams = {
+  moduleName: string;
+  modelName: string;
+  embeded: boolean;
+};
+
+
+export const SolidKanbanView = (params: SolidKanbanViewParams) => {
+  const { user } = useSelector((state: any) => state.auth);
+
+  const solidGlobalSearchElementRef = useRef();
+  const searchParams = useSearchParams().toString(); // Converts the query params to a string
+  const router = useRouter();
+  // TODO: The initial filter state will be created based on the fields which are present on this kanban view. 
+  const [filters, setFilters] = useState<any>();
+  const [toPopulate, setToPopulate] = useState<string[]>([]);
+  const [toPopulateMedia, setToPopulateMedia] = useState<string[]>([]);
+  const [actionsAllowed, setActionsAllowed] = useState<string[]>([]);
+  const [showGlobalSearchElement, setShowGlobalSearchElement] = useState<boolean>(false);
+  const [showArchived, setShowArchived] = useState(false);
+  const sizeOptions = [
+    { label: 'Compact', value: 'small', image: CompactImage },
+    { label: 'Cozy', value: 'normal', image: CozyImage },
+    { label: 'Comfortable', value: 'large', image: ComfortableImage }
+  ]
+  const [size, setSize] = useState<string | any>(sizeOptions[1].value);
+  const [viewModes, setViewModes] = useState<any>([]);
+  const [groupByFieldName, setGroupByFieldName] = useState<string>("");
+  const [groupedView, setGroupedView] = useState(true);
+  const [triggerCheckIfPermissionExists] = useLazyCheckIfPermissionExistsQuery();
+  const [openLightbox, setOpenLightbox] = useState(false);
+  const [lightboxUrls, setLightboxUrls] = useState({});
+  const [filterQueryString, setFilterQueryString] = useState<any>();
+  const [isLayoutDialogVisible, setLayoutDialogVisible] = useState(false);
+  const toast = useRef<Toast>(null);
+
+  const pushFiltersToRouter = (filterQueryString: any) => {
+    router.push(`?${filterQueryString}`, undefined, { shallow: true });
+  };
+
+  useEffect(() => {
+    if (filterQueryString) {
+      pushFiltersToRouter(filterQueryString);
+    }
+  }, [filterQueryString]);
+
+
+
+  useEffect(() => {
+    const fetchPermissions = async () => {
+      if (params.modelName) {
+        const permissionNames = [
+          createPermission(params.modelName),
+          deletePermission(params.modelName),
+          updatePermission(params.modelName)
+        ]
+        const queryData = {
+          permissionNames: permissionNames
+        };
+        const queryString = qs.stringify(queryData, {
+          encodeValuesOnly: true
+        });
+        const response = await triggerCheckIfPermissionExists(queryString);
+        setActionsAllowed(response.data.data);
+      }
+    };
+    fetchPermissions();
+  }, [params.modelName]);
+
+  const isFilterApplied = filters ? true : false;
+
+  // Create the RTK slices for this entity
+  const entityApi = createSolidEntityApi(params.modelName);
+  const {
+    useCreateSolidEntityMutation,
+    useDeleteMultipleSolidEntitiesMutation,
+    useDeleteSolidEntityMutation,
+    useGetSolidEntitiesQuery,
+    useGetSolidEntityByIdQuery,
+    useLazyGetSolidEntitiesQuery,
+    useGetSolidKanbanEntitiesQuery,
+    useLazyGetSolidKanbanEntitiesQuery,
+    useLazyGetSolidEntityByIdQuery,
+    usePrefetch,
+    useUpdateSolidEntityMutation,
+    usePatchUpdateSolidEntityMutation
+  } = entityApi;
+
+  // Get the kanban view layout & metadata first. 
+  const kanbanViewMetaDataQs = qs.stringify({ ...params, viewType: 'kanban' }, {
+    encodeValuesOnly: true,
+  });
+  const [kanbanViewMetaData, setKanbanViewMetaData] = useState<any>({});
+
+  const {
+    data: solidKanbanViewMetaData,
+    error: solidKanbanViewMetaDataError,
+    isLoading: solidKanbanViewMetaDataIsLoading,
+    isError: solidKanbanViewMetaDataIsError
+  } = useGetSolidViewLayoutQuery(kanbanViewMetaDataQs);
+
+
+
+  const initialFilterMethod = () => {
+
+    const solidView = solidKanbanViewMetaData.data.solidView;
+    const solidFieldsMetadata = solidKanbanViewMetaData.data.solidFieldsMetadata;
+
+    const initialFilters: any = {};
+    const toPopulate: string[] = [];
+    const toPopulateMedia: string[] = [];
+    function extractFields(node: any, result: any = []) {
+      if (node.type === "field") {
+        result.push(node);
+      }
+      if (node.children) {
+        node.children.forEach((child: any) => extractFields(child, result));
+      }
+      return result;
+    }
+
+    const data = { /* Your JSON object here */ };
+    const layoutFields = extractFields(solidView.layout);
+
+    for (let i = 0; i < layoutFields.length; i++) {
+      const column = layoutFields[i];
+      const fieldMetadata = solidFieldsMetadata[column.attrs.name];
+
+      // Form the initial filters after iterating over the columns and field metadata. 
+      if (['int', 'bigint', 'float', 'decimal'].includes(fieldMetadata.type)) {
+        // initialFilters[column.attrs.name] = { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.EQUALS }] }
+        initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.EQUALS }
+      }
+      else if (['date', 'datetime', 'time', 'boolean'].includes(fieldMetadata.type)) {
+        // initialFilters[column.attrs.name] = { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.DATE_IS }] }
+        initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.EQUALS }
+      }
+      else if (['relation', 'selectionStatic', 'selectionDynamic'].includes(fieldMetadata.type)) {
+        initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.IN }
+      }
+      else {
+        // initialFilters[column.attrs.name] = { operator: FilterOperator.OR, constraints: [{ value: null, matchMode: FilterMatchMode.STARTS_WITH }] }
+        initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.STARTS_WITH }
+      }
+
+      if (column.attrs.name === 'id') {
+        initialFilters[column.attrs.name] = { value: null, matchMode: FilterMatchMode.IN }
+      }
+
+      // Form the "toPopulate" array. 
+      if (fieldMetadata.type === 'relation' && fieldMetadata.relationType === 'many-to-one') {
+        toPopulate.push(fieldMetadata.name);
+      }
+      if (fieldMetadata.type === 'mediaSingle' || fieldMetadata.type === 'mediaMultiple') {
+        toPopulateMedia.push(fieldMetadata.name);
+      }
+    }
+    // setFilters(initialFilters);
+    const recordsInSwimlane = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane : 25;
+    // setToPopulate(toPopulate);
+    // setToPopulateMedia(toPopulateMedia);
+    setRecordsInSwimlane(recordsInSwimlane);
+    setToPopulate(toPopulate);
+    setToPopulateMedia(toPopulateMedia);
+    return { recordsInSwimlane, toPopulate, toPopulateMedia }
+  }
+
+
+  // Initial Filter data 
+  useEffect(() => {
+
+    if (solidKanbanViewMetaData) {
+      setKanbanViewMetaData(solidKanbanViewMetaData);
+      // initialFilterMethod();
+      const viewModes = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.length > 0 && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.map((view: any) => { return { label: capitalize(view), value: view } });
+      setViewModes(viewModes);
+      if (solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.grouped !== false) {
+        setGroupByFieldName(solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.groupBy)
+      } else {
+        setGroupByFieldName("deletedTracker");
+        setGroupedView(false);
+      }
+    }
+  }, [solidKanbanViewMetaData]);
+
+  // All kanban view state.
+  const [kanbanViewData, setKanbanViewData] = useState<any>([]);
+  const [kanbanLoadMoreData, setKanbanLoadMoreData] = useState<any>({});
+  const [recordsInSwimlane, setRecordsInSwimlane] = useState(25);
+  const [selectedRecords, setSelectedRecords] = useState<any[]>([]);
+  const [loading, setLoading] = useState<boolean>(true);
+  const [isDialogVisible, setDialogVisible] = useState(false);
+  const [createButtonUrl, setCreateButtonUrl] = useState<string>();
+  const [editButtonUrl, setEditButtonUrl] = useState<string>();
+  const [columnsCount, setColumnsCount] = useState(5);
+  const [swimLaneCurrentPageNumber, setSwimLaneCurrentPageNumber] = useState(1);
+  const [queryDataLoaded, setQueryDataLoaded] = useState(false);
+  const [showSaveFilterPopup, setShowSaveFilterPopup] = useState<boolean>(false);
+
+
+  const showToast = (severity: "success" | "error", summary: string, detail: string) => {
+    toast.current?.show({
+      severity,
+      summary,
+      detail,
+      life: 3000,
+    });
+  };
+  // Get the kanban view data.
+  // const [triggerGetSolidEntitiesForKanban, { data: solidEntityKanbanViewData, isLoading, error }] = useLazyGetSolidKanbanEntitiesQuery();
+  const [triggerGetSolidEntities, { data: solidEntityKanbanViewData, isLoading, error }] = useLazyGetSolidEntitiesQuery();
+
+  // Delete mutation 
+  const [
+    deleteManySolidEntities,
+    {
+      isLoading: isSolidEntitiesDeleted,
+      isSuccess: isDeleteSolidEntitiesSucess,
+      isError: isSolidEntitiesDeleteError,
+      error: SolidEntitiesDeleteError,
+      data: DeletedSolidEntities,
+    },
+  ] = useDeleteMultipleSolidEntitiesMutation();
+  const [
+    patchKanbanView,
+    { isSuccess: isKanbanUpdateSuccessfull, isError: isKanbanUpdateError, error: kanbanUpdateError },
+  ] = usePatchUpdateSolidEntityMutation();
+
+  // After data is fetched populate the kanban view state so as to be able to render the data. 
+  useEffect(() => {
+    if (solidEntityKanbanViewData) {
+      const latestKanbanGroupData = [...kanbanViewData, ...solidEntityKanbanViewData?.groupRecords]
+      setKanbanViewData(latestKanbanGroupData);
+      const loadmoredata = Object.entries(latestKanbanGroupData).reduce((acc: any, [key, value]: any) => {
+        acc[value.groupName] = {
+          offset: (value.groupData.meta.currentPage - 1) * value.groupData.meta.perPage,
+          limit: value.groupData.meta.perPage,
+          count: value.groupData.meta.totalRecords
+        };
+        return acc;
+      }, {});
+
+      setKanbanLoadMoreData(loadmoredata)
+      setLoading(false);
+    }
+  }, [solidEntityKanbanViewData]);
+
+
+
+
+  useEffect(() => {
+    if (solidKanbanViewMetaData) {
+      const createActionUrl = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.type === "custom" ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.customComponent : "form/new";
+      const editActionUrl = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.type === "custom" ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.customComponent : "form";
+      if (createActionUrl) {
+        setCreateButtonUrl(createActionUrl)
+      }
+      if (editActionUrl) {
+        setEditButtonUrl(editActionUrl)
+      }
+    }
+  }, [solidKanbanViewMetaData])
+
+  // Fetch data after toPopulate has been populated...
+  useEffect(() => {
+
+    if (solidKanbanViewMetaData) {
+
+      const swimlanesCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
+      if (groupByFieldName && (toPopulate || toPopulateMedia)) {
+
+        const queryObject = queryStringToQueryObject();
+        let queryString = "";
+        if (searchParams) {
+
+          // Get Object from Url
+          const queryObject = qs.parse(searchParams,
+            {
+              decoder: str => decodeURIComponent(str),
+              allowDots: true,
+            }
+          );
+
+          const filters = {
+            $and: []
+          }
+          if (queryObject.s_filter) {
+            filters.$and.push(queryObject.s_filter);
+          }
+          if (queryObject.c_filter) {
+            filters.$and.push(queryObject.c_filter);
+          }
+
+          const queryData = {
+            offset: 0,
+            limit: Number(queryObject.limit) + Number(queryObject.offset),
+            fields: queryObject.fields || [`${groupByFieldName}`, `count(${groupByFieldName})`],
+            groupBy: queryObject.groupBy || groupByFieldName,
+            populateMedia: queryObject.populateMedia || toPopulateMedia,
+            populateGroup: queryObject.populateGroup || true,
+            groupFilter: {
+              limit: Number(queryObject.groupFilter.limit) + Number(queryObject.groupFilter.offset) || kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane,
+              offset: 0,
+              filters: filters,
+              populate: queryObject.groupFilter.populate || toPopulate,
+              populateMedia: queryObject.groupFilter.populateMedia || toPopulateMedia
+            }
+            // sort: [`id:desc`],
+          };
+
+          setRecordsInSwimlane(queryData.limit);
+          setToPopulate(queryData.populate);
+          setToPopulateMedia(queryData.populateMedia);
+          setFilters(filters);
+          setQueryDataLoaded(true);
+
+          queryString = qs.stringify(queryData, {
+            encodeValuesOnly: true
+          });
+
+
+        } else {
+          const { recordsInSwimlane, toPopulate, toPopulateMedia } = initialFilterMethod();
+          const queryData = {
+            offset: 0,
+            limit: swimlanesCount,
+            fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
+            groupBy: groupByFieldName,
+            populateMedia: toPopulateMedia,
+            populateGroup: true,
+            groupFilter: {
+              limit: kanbanViewMetaData?.data?.solidView?.layout?.attrs?.recordsInSwimlane || 10,
+              offset: 0,
+              filters: filters,
+              populate: toPopulate,
+              populateMedia: toPopulateMedia
+            }
+            // sort: [`id:desc`],
+          };
+          setRecordsInSwimlane(recordsInSwimlane);
+          setToPopulate(toPopulate);
+          setToPopulateMedia(toPopulateMedia);
+
+          // fields=status&groupBy=status&fields=count(status)&populateGroup=true
+          queryString = qs.stringify(queryData, {
+            encodeValuesOnly: true
+          });
+
+          setQueryDataLoaded(true)
+        }
+
+        triggerGetSolidEntities(queryString);
+        setSelectedRecords([]);
+      }
+    }
+  }, [isDeleteSolidEntitiesSucess, groupByFieldName, solidKanbanViewMetaData]);
+
+
+  // clickable link allowing one to open the detail / form view.
+  const detailsBodyTemplate = (solidViewData: any) => {
+    return (
+      <Link href={`${editButtonUrl}/${solidViewData.id}`} rel="noopener noreferrer" className="text-sm font-bold p-0" style={{ color: "#12415D" }}>
+        <i className="pi pi-pencil" style={{ fontSize: "1rem" }}></i>
+      </Link>
+    );
+  };
+
+  // handle bulk deletion
+  const deleteBulk = () => {
+    let deleteList: any = [];
+    selectedRecords.forEach((element: any) => {
+      deleteList.push(element.id);
+    });
+    console.log(deleteList);
+    deleteManySolidEntities(deleteList);
+    setDialogVisible(false);
+  };
+
+  // handle closing of the delete dialog...
+  const onDeleteClose = () => {
+    setDialogVisible(false);
+    setSelectedRecords([]);
+  }
+
+  const handleLoadMore = async (groupByField: string) => {
+    const { offset, limit, records } = kanbanLoadMoreData[groupByField];
+    const newLoadMoreData = kanbanLoadMoreData;
+    kanbanLoadMoreData[groupByField].offset = offset + limit;
+    try {
+      const queryData = {
+        offset: offset + limit,
+        limit: limit,
+        populate: toPopulate,
+        populateMedia: toPopulateMedia,
+        populateGroup: true,
+        filters: {
+          [groupByFieldName]: {
+            $in: [groupByField],
+          },
+          ...filters
+        }
+      }
+
+
+      const queryString = qs.stringify(queryData, {
+        encodeValuesOnly: true
+      });
+      // router.push(`?${queryString}`);
+      const data: any = await triggerGetSolidEntities(queryString);
+      const newRecords = data.data.records;
+      const currentData = kanbanViewData;
+      const mergeData = (
+        kanbanViewData: any[],
+        newRecords: any[],
+        groupByField: string
+      ) => {
+        // Find the group matching the specified groupByField
+        const originalData = structuredClone(kanbanViewData);
+        const targetGroup = originalData.find(
+          (group: any) => group.groupName === groupByField
+        );
+        if (targetGroup) {
+          const { groupData } = targetGroup;
+
+          if (targetGroup.groupData) {
+            // Extract existing records
+            const existingRecords = targetGroup.groupData.records;
+            const updatedRecords = [...existingRecords, ...newRecords];
+            targetGroup.groupData.records = updatedRecords
+
+
+            // Update the meta data (you can adjust this logic as needed)
+            groupData.meta.prevPage = groupData.meta.currentPage
+            groupData.meta.currentPage = groupData.meta.currentPage + 1
+            groupData.meta.nextPage = groupData.meta.currentPage + 1
+          }
+        }
+        return originalData;
+      };
+
+
+      const updatedData = mergeData(kanbanViewData, newRecords, groupByField);
+      setKanbanViewData(updatedData);
+      const loadmoredata = Object.entries(updatedData).reduce((acc: any, [key, value]: any) => {
+        acc[value.groupName] = {
+          offset: (value.groupData.meta.currentPage - 1) * value.groupData.meta.perPage,
+          limit: value.groupData.meta.perPage,
+          count: value.groupData.meta.totalRecords
+        };
+        return acc;
+      }, {});
+      setKanbanLoadMoreData(loadmoredata)
+
+    } catch (error) {
+      console.error("Failed to load more data:", error);
+    }
+  };
+
+
+  // Handle drag-and-drop functionality
+  const onDragEnd = async (result: DropResult): void => {
+    const { source, destination } = result;
+    if (!destination) return;
+
+    const sourceGroupName = source.droppableId;
+    const destinationGroupName = destination.droppableId;
+
+    // Find the source and destination groups
+    const sourceGroupIndex = kanbanViewData.findIndex((group: any) => group.groupName === sourceGroupName);
+    const destinationGroupIndex = kanbanViewData.findIndex((group: any) => group.groupName === destinationGroupName);
+
+    if (sourceGroupIndex === -1 || destinationGroupIndex === -1) return;
+
+    // If dragging within the same group
+    if (sourceGroupName === destinationGroupName) {
+      setKanbanViewData((prevData: typeof kanbanViewData) =>
+        prevData.map((group: any) => {
+          if (group.groupName === sourceGroupName) {
+            const updatedRecords = [...group.groupData.records];
+            const [movedItem] = updatedRecords.splice(source.index, 1); // Remove the item
+            updatedRecords.splice(destination.index, 0, movedItem); // Insert at the new position
+
+            return {
+              ...group,
+              groupData: {
+                ...group.groupData,
+                records: updatedRecords,
+              },
+            };
+          }
+          return group;
+        })
+      );
+      return;
+    }
+
+    // Deep clone the source and destination groups
+    const sourceGroup = JSON.parse(JSON.stringify(kanbanViewData[sourceGroupIndex]));
+    const destinationGroup = JSON.parse(JSON.stringify(kanbanViewData[destinationGroupIndex]));
+
+    // Clone the records for immutability
+    const sourceRecords = [...sourceGroup.groupData.records];
+    const destinationRecords = [...destinationGroup.groupData.records];
+
+    // Remove the item from the source
+    const [movedItem] = sourceRecords.splice(source.index, 1);
+
+    // Create a mutable copy of the moved item
+    const updatedItem = { ...movedItem, status: destinationGroupName };
+
+    // Add the updated item to the destination
+    destinationRecords.splice(destination.index, 0, updatedItem);
+
+    // Update the group data
+    sourceGroup.groupData.records = sourceRecords;
+    destinationGroup.groupData.records = destinationRecords;
+
+    // Update the kanbanViewData state
+    try {
+      const formData = new FormData();
+      formData.append(groupByFieldName, destinationGroupName);
+      const kanbanUpdateResponse = await patchKanbanView({ id: +movedItem.id, data: formData }).unwrap();
+
+      if (kanbanUpdateResponse?.statusCode === 200) {
+        showToast("success", "Success", "Kanban View Updated!");
+        // Update the kanbanViewData state
+        setKanbanViewData((prevData: typeof kanbanViewData) =>
+          prevData.map((group: any) => {
+            if (group.groupName === sourceGroupName) {
+              return sourceGroup;
+            }
+            if (group.groupName === destinationGroupName) {
+              return destinationGroup;
+            }
+            return group;
+          })
+        );
+      } else {
+        showToast("error", "Duplicate Key", kanbanUpdateResponse?.error);
+      }
+    } catch (error: any) {
+      // 6. Handle 500 or network errors
+      console.error("API error:", error);
+      showToast("error", "Something went wrong", error?.data?.message || "Something went wrong");
+    }
+  };
+
+
+  // Handle SwimLane Pagination
+  const handleSwimLanePagination = async () => {
+
+    if (solidKanbanViewMetaData) {
+
+      const swimlanesCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
+      const queryData = {
+        offset: swimLaneCurrentPageNumber * swimlanesCount,
+        limit: swimlanesCount,
+        fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
+        groupBy: groupByFieldName,
+        populateMedia: toPopulateMedia,
+        populateGroup: true,
+        groupFilter: {
+          limit: recordsInSwimlane,
+          offset: 0,
+          filters: filters,
+          populate: toPopulate,
+          populateMedia: toPopulateMedia
+
+        }
+        // sort: [`id:desc`],
+      };
+      // fields=status&groupBy=status&fields=count(status)&populateGroup=true
+      const queryString = qs.stringify(queryData, {
+        encodeValuesOnly: true
+      });
+
+      //Push  to Router
+      router.push(`?${queryString}`);
+
+
+      const data: any = await triggerGetSolidEntities(queryString);
+      if (data && data?.data?.groupRecords.length > 0) {
+        const updatedData = [...kanbanViewData, ...data.data.groupRecords];
+        setKanbanViewData(updatedData);
+      }
+      setSwimLaneCurrentPageNumber(swimLaneCurrentPageNumber + 1)
+    }
+  }
+
+
+  // Handle the custom filter and Search Filter
+  const handleApplyCustomFilter = async (transformedFilter: any) => {
+
+    if (solidKanbanViewMetaData) {
+
+
+      const queryfilter = {
+        $and: [
+        ]
+      }
+      if (transformedFilter.s_filter) {
+        queryfilter.$and.push(transformedFilter.s_filter)
+      }
+      if (transformedFilter.c_filter) {
+        queryfilter.$and.push(transformedFilter.c_filter)
+      }
+
+      const customFilter = transformedFilter;
+      const updatedFilter = { ...(filters || {}), ...(queryfilter || {}) };
+      setFilters((prevFilters) => ({ ...(prevFilters || {}), ...(queryfilter || {}) }));
+
+      const swimlanesCount = solidKanbanViewMetaData?.data.solidView?.layout?.attrs?.swimlanesCount || 5;
+
+      if (toPopulate) {
+        const queryData = {
+          offset: 0,
+          limit: swimlanesCount,
+          fields: [`${groupByFieldName}`, `count(${groupByFieldName})`],
+          groupBy: groupByFieldName,
+          populateGroup: true,
+          groupFilter: {
+            limit: recordsInSwimlane,
+            offset: 0,
+            filters: updatedFilter,
+            populate: toPopulate,
+            populateMedia: toPopulateMedia
+          }
+        };
+        const queryString = qs.stringify(queryData, {
+          encodeValuesOnly: true
+        });
+
+        // s_filter and c_filter format that needs to be passed to the router
+        // only present if handleCustomFilter is applied
+        if (customFilter) {
+          let url
+          const urlData = queryData;
+          delete urlData.filters;
+          urlData.s_filter = customFilter.s_filter || {};
+          urlData.c_filter = customFilter.c_filter || {};
+          queryObjectToQueryString(urlData);
+        }
+
+
+        const data: any = await triggerGetSolidEntities(queryString);
+
+        // Update the kanban view data with the new data based on filter
+        if (data && data?.data?.groupRecords.length > 0) {
+          const updatedData = [...data.data.groupRecords];
+          setKanbanViewData(updatedData);
+        }
+        setSelectedRecords([]);
+
+      }
+    }
+
+  }
+
+  useEffect(() => {
+    if (solidKanbanViewMetaData) {
+      const createActionUrl = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.type === "custom" ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.createAction?.customComponent : "form/new";
+      const editActionUrl = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.type === "custom" ? solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.editAction?.customComponent : "form";
+      const viewModes = solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.length > 0 && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs?.allowedViews.map((view: any) => { return { label: capitalize(view), value: view } });
+      setViewModes(viewModes);
+      if (createActionUrl) {
+        setCreateButtonUrl(createActionUrl)
+      }
+      if (editActionUrl) {
+        setEditButtonUrl(editActionUrl)
+      }
+    }
+  }, [solidKanbanViewMetaData])
+
+  const kanbanViewTitle = solidKanbanViewMetaData?.data?.solidView?.displayName
+
+  return (
+    <div className="page-parent-wrapper">
+      <Toast ref={toast} />
+      <div className="page-header">
+        <div className="flex gap-3 align-items-center">
+          <p className="m-0 view-title">{kanbanViewTitle}</p>
+          {solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.enableGlobalSearch === true &&
+            // <SolidGlobalSearchElement viewData={solidKanbanViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter} ></SolidGlobalSearchElement>
+            <SolidGlobalSearchElement showSaveFilterPopup={showSaveFilterPopup} setShowSaveFilterPopup={setShowSaveFilterPopup} ref={solidGlobalSearchElementRef} viewData={solidKanbanViewMetaData} handleApplyCustomFilter={handleApplyCustomFilter}  ></SolidGlobalSearchElement>
+
+          }
+        </div>
+        <div className="flex align-items-center gap-3">
+          {actionsAllowed.includes(`${createPermission(params.modelName)}`) && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.create !== false &&
+            <SolidCreateButton url={createButtonUrl} />
+          }
+
+          {actionsAllowed.includes(`${deletePermission(params.modelName)}`) && solidKanbanViewMetaData?.data?.solidView?.layout?.attrs.delete !== false && selectedRecords.length > 0 && <Button
+            type="button"
+            label="Delete"
+            size="small"
+            onClick={() => setDialogVisible(true)}
+            className="small-button"
+            severity="danger"
+          />}
+          <Button
+            type="button"
+            size="small"
+            icon="pi pi-refresh"
+            severity="secondary"
+            outlined
+            onClick={() => {
+              window.location.reload()
+            }}
+          />
+          <SolidKanbanViewConfigure
+            solidKanbanViewMetaData={solidKanbanViewMetaData}
+            actionsAllowed={actionsAllowed}
+            viewModes={viewModes}
+            setLayoutDialogVisible={setLayoutDialogVisible}
+            setShowSaveFilterPopup={setShowSaveFilterPopup}
+          />
+          {/* <SolidConfigureLayoutElement></SolidConfigureLayoutElement> */}
+        </div>
+      </div>
+      <style>{`.p-datatable .p-datatable-loading-overlay {background-color: rgba(0, 0, 0, 0.0);}`}</style>
+      {solidKanbanViewMetaData && kanbanViewData &&
+        <KanbanBoard groupedView={groupedView} kanbanViewData={kanbanViewData} solidKanbanViewMetaData={solidKanbanViewMetaData?.data} setKanbanViewData={setKanbanViewData} handleLoadMore={handleLoadMore} onDragEnd={onDragEnd} handleSwimLanePagination={handleSwimLanePagination} setLightboxUrls={setLightboxUrls} setOpenLightbox={setOpenLightbox} editButtonUrl={editButtonUrl}></KanbanBoard>
+      }
+
+      <Dialog
+        visible={isDialogVisible}
+        header="Confirm Delete"
+        modal
+        footer={() => (
+          <div className="flex justify-content-center">
+            <Button label="Yes" icon="pi pi-check" className='small-button' severity="danger" autoFocus onClick={deleteBulk} />
+            <Button label="No" icon="pi pi-times" className='small-button' onClick={onDeleteClose} />
+          </div>
+        )}
+        onHide={() => setDialogVisible(false)}
+      >
+        <p>Are you sure you want to delete the selected records?</p>
+      </Dialog>
+      {openLightbox &&
+        <Lightbox
+          open={openLightbox}
+          plugins={[Counter, Download]}
+          close={() => setOpenLightbox(false)}
+          slides={lightboxUrls}
+        />
+      }
+      <Dialog
+        visible={isLayoutDialogVisible}
+        header="Change Kanban Layout"
+        modal
+        onHide={() => setLayoutDialogVisible(false)}
+        contentStyle={{
+          width: 800
+        }}
+      >
+        <KanbanUserViewLayout solidKanbanViewMetaData={solidKanbanViewMetaData} setLayoutDialogVisible={setLayoutDialogVisible} />
+      </Dialog>
+    </div>
+  );
+};
+