Activity-Log.js

var isDir = LanguageId == 1 ? 'ltr' : 'rtl';
var isLoadtme = false;
let isFirstClick = true;
const isDefaultData = {
    ltr: {
        str: {
            lbl_Site: 'Site', lbl_Building: 'Building', all: 'All', selectedtxt: 'selected', DaterangeText: "Today", loaderText: "Downloading Excel, Please wait...", nrds: 'No records found',
            lbl_Integrator: 'Integrator', lbl_SelectIntegrator: 'Select Integrator', lbl_SelectedIntegrator: 'Selected Integrator', lbl_allIntegrator: 'All Integrator',
            lbl_Enduser: 'End user', lbl_SelectEnduser: 'Select End user', lbl_SelectedEnduser: 'Selected End user', lbl_allEnduser: 'All End user',
            lbl_Laststatus: 'Last status', lbl_LaststatusTxt: 'Last status', lbl_SelectLastSts: 'Select Last status', lbl_SelectedLaststatus: 'Selected Last status', lbl_allLaststatus: 'All Last status',
            lbl_Laststatus: 'Type', lbl_LaststatusTxt: 'Type', lbl_SelectLastSts: 'Select Type', lbl_SelectedLaststatus: 'Selected Type', lbl_allLaststatus: 'All Type',
            lbl_Laststatus: 'Armed/Disarmed status', lbl_LaststatusTxt: 'Armed/Disarmed status', lbl_SelectLastSts: 'Select Armed/Disarmed status', lbl_SelectedLaststatus: 'Selected Armed/Disarmed status', lbl_allLaststatus: 'All Armed/Disarmed status',
            lbl_AlarmCat: 'Alarm category', lbl_AlarmCatTxt: 'Alarm category', lbl_SelectAlarmCat: 'Select alarm category', lbl_SelectedAlarmCat: 'Selected Alarm Category', lbl_allAlarmCat: 'All Alarm Category',
            lbl_Search: 'Search...', lbl_SearchTxt: 'Search', lbl_filterhistory: 'Filter history', lbl_selectAll: 'Select All', lbl_SearchText: 'Search Text',
            lbl_downloadExcel: 'Download Excel', lbl_downloadPdf: 'Download Pdf', lbl_close: 'Close', lbl_remove: 'Remove', lbl_RemovethisColumn: 'Remove this column',
            lbl_addColumn: 'Add columns', lbl_Customizecolumns: 'Customize columns', lbl_Applycolumns: 'Apply columns', lbl_cancel: 'Cancel', lbl_Itemsperpage: 'Items per page',
            lbl_toggle: 'Menu'

        },

        xl: {
            ExcelReportname: "Report Name", ExcelGeneratedBy: "Report Generated by", ExcelDateTime: "Date and Time", Fil: "Filter", ExcelTNOR: "Total Number Of Records",
            ExcelType: "Type", ExcelReportField: 'User Activity', ExcelDateRange: "Date Range", ReportFileName: 'User Activity Report - Detailed'
        },
        dt: {
            t1: "Today", t0: 'Yesterday', t7: 'Last 7 Days', t15: 'Last 15 Days', t30: 'Last 30 Days', crng: 'Custom Range', aply: 'Apply', clr: "Clear", lbl_SelectRange: 'Select date',
            lbl_selectedRange: 'Today'
        },
        pg: { lbl_page: 'Page', lbl_of: "of", lbl_showingResult: 'Showing results', lbl_items: 'item(s)', lbl_Gotothefirstpage: 'Go to the first page', lbl_Gotothepreviouspage: "Go to the previous page", lbl_Gotothenextpage: 'Go to the next page', lbl_Gotothelastpage: "Go to the last page" },
        actpop: { hd: 'View Details', subhd: 'Request Details', atm: 'Activity Time', mod: 'Module', submod: 'Sub Module', usrnme: 'User Name', UT: 'User Type', IPA: 'IP Address', actdet: 'Activity Details', clse: 'Close', vad: 'View Details', nod: 'No Request Info' }
    },
    rtl: {
        str: {
            lbl_Site: 'موقع', lbl_Building: 'مبنى', all: 'الجميع', selectedtxt: 'المحدد', DaterangeText: "اليوم", loaderText: "جارٍ تنزيل اكسل برجاء الانتظار...", nrds: 'لا توجد سجلات',
            lbl_Integrator: 'متكامل', lbl_SelectIntegrator: 'حدد التكامل', lbl_SelectedIntegrator: 'المتكامل المحدد', lbl_allIntegrator: 'كل التكامل',
            lbl_Enduser: 'المستخدم النهائي', lbl_SelectEnduser: 'حدد المستخدم النهائي', lbl_SelectedEnduser: 'المستخدم النهائي المحدد', lbl_allEnduser: 'جميع المستخدمين النهائيين',
            lbl_Laststatus: 'يكتب', lbl_LaststatusTxt: 'الحالة الأخيرة', lbl_SelectLastSts: 'حدد الحالة الأخيرة', lbl_SelectedLaststatus: 'آخر حالة محددة', lbl_allLaststatus: ' آخر حالة للكل',
            lbl_Laststatus: 'يكتب', lbl_LaststatusTxt: 'يكتب', lbl_SelectLastSts: 'حدد النوع', lbl_SelectedLaststatus: 'النوع المحدد', lbl_allLaststatus: 'كل الأنواع',
            lbl_Laststatus: 'مفعله   / نزع التفعيل ', lbl_LaststatusTxt: 'مفعله   / نزع التفعيل ', lbl_SelectLastSts: 'حدد الحالة المفعله  / غير مفعله', lbl_SelectedLaststatus: 'حالة مختارة مفعله /منزوعة التفعيل', lbl_allLaststatus: 'جميع الأوضاع  مفعله  / منزوعة التفعيل',
            lbl_AlarmCat: 'فئة الإنذار', lbl_AlarmCatTxt: 'فئة الإنذار', lbl_SelectAlarmCat: 'حدد فئة التنبيه', lbl_SelectedAlarmCat: 'فئة الإنذار المحددة', lbl_allAlarmCat: 'جميع فئات الإنذار',
            lbl_Search: 'يبحث...', lbl_SearchTxt: 'يبحث', lbl_filterhistory: 'تاريخ التصفية', lbl_selectAll: 'اختر الكل', lbl_SearchText: 'بحث في النص',
            lbl_downloadExcel: 'تحميل اكسل', lbl_downloadPdf: 'تحميل بي دي إف', lbl_close: 'يغلق', lbl_remove: 'يزيل', lbl_RemovethisColumn: 'قم بإزالة هذا العمود',
            lbl_addColumn: 'أضف أعمدة', lbl_Customizecolumns: 'تخصيص الأعمدة', lbl_Applycolumns: 'تطبيق الأعمدة', lbl_cancel: 'إلغاء الأمر', lbl_Itemsperpage: 'العناصر في الصفحة',
            lbl_toggle: 'قائمة طعام'
        },
        xl: {
            ExcelReportname: "تقرير اسم", ExcelGeneratedBy: "تقرير تم إنشاؤه بواسطة", ExcelDateTime: "التاريخ و الوقت", Fil: "منقي", ExcelTNOR: "العدد الإجمالي للسجلات",
            ExcelType: "يكتب", ExcelReportField: 'نشاط المستخدم', ExcelDateRange: "نطاق الموعد", ReportFileName: 'تقرير نشاط المستخدم - مفصل'
        },
        dt: {
            t1: "اليوم", t0: 'امس', t7: 'اخر 7 ايام', t15: 'آخر 15 يومًا', t30: 'اخر 30 ايام', crng: 'مجموعة مخصصة', aply: 'يتقدم', clr: "واضح", lbl_SelectRange: 'حدد تاريخ',
            lbl_selectedRange: 'اليوم'
        },
        pg: { lbl_page: 'صفحة', lbl_of: "الى", lbl_showingResult: 'عرض النتائج', lbl_items: 'عنصر ( عناصر )', lbl_Gotothefirstpage: 'انتقل إلى الصفحة الأولى', lbl_Gotothepreviouspage: "انتقل إلى الصفحة السابقة", lbl_Gotothenextpage: 'انتقل إلى الصفحة التالية', lbl_Gotothelastpage: "انتقل إلى الصفحة الأخيرة" },
        actpop: { hd: 'عرض التفاصيل', subhd: 'طلب تفاصيل', atm: 'وقت النشاط', mod: 'الوحده النمطيه', submod: 'الوحدة الفرعية', usrnme: 'اسم المستخدم', UT: 'نوع المستخدم', IPA: 'عنوان أى بى', actdet: 'تفاصيل النشاط', clse: 'غلق', vad: 'عرض التفاصيل', nod: 'لا يوجد طلب معلومات' }
    }
}
window.jsPDF = window.jspdf.jsPDF;
applyPlugin(window.jsPDF);
function MainPage(PageequireDatas) {
    //Added by Arabic and English pdf font work........
    var callAddFont = function () {
        this.addFileToVFS('Amiri-Bold-normal.ttf', font);
        this.addFont('Amiri-Bold-normal.ttf', 'Amiri-Bold', 'normal');
    };
    jsPDF.API.events.push(['addFonts', callAddFont]);
    //.........
    const [selectedActivity, setSelectedActivity] = React.useState(null);
    const [isModalOpen, setIsModalOpen] = React.useState(false);
    const [_isData, _setisData] = React.useState(isDefaultData[isDir]);
    const [isHidden, setIsHidden] = React.useState(false);


    function delayAnimateCall(ms, vari) {    // Function for delay request animation frame
        return new Promise(resolve => {
            const start = performance.now();
            function checkTime() {
                if (performance.now() - start >= ms) {
                    resolve();
                } else {
                    cancelpromise[vari] = requestAnimationFrame(checkTime);
                }
            }
            cancelpromise[vari] = requestAnimationFrame(checkTime);
        });
    }
    React.useEffect(() => {
        async function _raf_headjs() {
            var temp_msec = 3000;
            await delayAnimateCall(temp_msec, '_headjs');
            setIsHidden(true);
        }
        _raf_headjs();
        return () => clearTimeout(timer); // Cleanup on unmount
        return () => {
            clearTimeout(timer); // Cleanup on unmount
            cancelAnimationFrame(cancelpromise['_headjs']); // Ensure cleanup
        };
    }, []);


    React.useEffect(() => {
        const handleRefreshEvent = () => {
            const daterangepickerElement = jQuery("#historydateRange").data('daterangepicker');
            if (daterangepickerElement.chosenLabel == undefined || daterangepickerElement.chosenLabel == "Today") {
                listdataBinding();
            } else {
                if (daterangepickerElement) {
                    daterangepickerElement.container.find('.cancelBtn').click();  // Clears the date range
                }
            }
        };

        window.addEventListener('refreshActivityLog', handleRefreshEvent);

        return () => {
            window.removeEventListener('refreshActivityLog', handleRefreshEvent);
        };
    }, [listdataBinding]);

    // Apply classes based on isHidden state
    React.useEffect(() => {
        if (isHidden) {
            jQuery('body').addClass('hideHeaderMenu');
            jQuery('.table-container').addClass('hidehead');
            jQuery('.table-pagination').addClass('hidehead');
        } else {
            jQuery('body').removeClass('hideHeaderMenu');
            jQuery('.table-container').removeClass('hidehead');
            jQuery('.table-pagination').removeClass('hidehead');
        }
    }, [isHidden]);

    // Modify togmenu to use state
    function togmenu() {
        setIsHidden(!isHidden);
    }

    //list load variable declaration
    const [listitems, setListitems] = React.useState([]);
    const [checkedClass, setcheckedClass] = React.useState({});
    const [checkedColClass, setcheckedColClass] = React.useState({});
    const [tableHeader, settableHeader] = React.useState(false);
    const [selectionCount, setselectionCount] = React.useState('1');
    //partial pages decleration
    const [columnChoosepop, setcolumnChoosepop] = React.useState(false);
    //table filter  functionality
    const [filter, setFilter] = React.useState('');
    //table drag and drop column chooser and show hide column  functionality
    const handleDragStart = (e, index) => {
        e.dataTransfer.setData('colIndex', index);
    };
    const handleDrop = (e, index) => {
        const draggedColIndex = e.dataTransfer.getData('colIndex');
        const newColumns = [...columns];
        const [draggedCol] = newColumns.splice(draggedColIndex, 1);
        newColumns.splice(index, 0, draggedCol);
        setColumns(newColumns);
    };
    const handleDragOver = (e) => {
        e.preventDefault();
    };
    const toggleColumnInVisibility = (colName, index) => {
        setColumns(columns.map(col =>
            col.kye === colName ? { ...col, visible: !col.visible } : col
        ));
        hiddencolumns.splice(index, 1)
        sethiddenColumns(hiddencolumns);
        hiddencolumns.length == 0 ? setcolumnChoosepop(false) : ''
    }
    const toggleColumnVisibility = (colName) => {
        let itstotalcolumn = columns.filter(col => col.visible == true)
        if (itstotalcolumn.length > 1) {
            setColumns(columns.map(col =>
                col.kye === colName ? { ...col, visible: !col.visible } : col
            ));
            //hidden column maintained
            let itsAraayvalid = columns.filter(col => col.visible == false)
            let filterHidden = columns.filter(col => col.kye == colName)
            itsAraayvalid.length != 0 ? filterHidden.push(...itsAraayvalid) : '';
            sethiddenColumns(filterHidden);
        }
    };
    var getPrevPrms = {
        Fromdate: moment().format('YYYY-MM-DD HH:mm:ss.SSSS'),
        Todate: moment().format('YYYY-MM-DD HH:mm:ss.SSSS'),
        PageNo: 1,
        PageSize: 20, searchText: "",
    }
    function resetListData() {
        if (listdata.prev.Fromdate != listdata.params.Fromdate || listdata.prev.Todate != listdata.params.Todate || listdata.prev.PageNo != listdata.params.PageNo
            || listdata.prev.PageSize != listdata.params.PageSize || listdata.prev.searchText != listdata.params.searchText || listdata.prev.RI != listdata.params.RI
            || listdata.prev.RS != listdata.params.RS || listdata.prev.LastStatusType != listdata.params.LastStatusType || listdata.prev.AlarmCat != listdata.params.AlarmCat) {
            listdata.init.pageCounts[str_dta] = []
            listdata.init.PageNo = 1;
            listdata.init.CurrentPage = 1;
            listdata.params.PageNo = 1;
            listdata.params.PageSize = 20;
            listdata.init.PageSize = 20;
            listdata.init.pgSize.data.forEach(function (valu, indx) { valu.isSelected = indx == 0 ? true : false })
            listdata.init.pageCounts.currArrPage = 1;
            listdata.init.TotPages = 0
            listdataBinding()
        }
    }
    // Method to handle the click event for date range picker cancel button
    function togmenu() {
        setIsHidden(!isHidden);
    }
    React.useEffect(() => {
        if (window.$) {
            var getT = DOMPurify.sanitize(_isData.dt.t1),
                getY = DOMPurify.sanitize(_isData.dt.t0),
                getL7 = DOMPurify.sanitize(_isData.dt.t7),
                getL15 = DOMPurify.sanitize(_isData.dt.t15),
                getL30 = DOMPurify.sanitize(_isData.dt.t30);

            // Initialize isToday parameter based on the default date range
            const today = moment().startOf('day');

            // Set initial dates
            if (!listdata.params.Fromdate) {
                listdata.params.Fromdate = moment().startOf('day').format('YYYY-MM-DD');
            }

            if (!listdata.params.Todate) {
                // Use current time for toDate instead of end of day
                listdata.params.Todate = moment().format('YYYY-MM-DD');
            }

            const defaultStartDate = moment(listdata.params.Fromdate);
            const defaultEndDate = moment(listdata.params.Todate);

            // Check if the default date range is today
            const isTodaySelected = defaultStartDate.isSame(today, 'day');

            // Set the initial value of isToday
            listdata.params.isToday = isTodaySelected;

            // If today is selected, ensure toDate is current time
            if (isTodaySelected) {
                listdata.params.Todate = moment().format('YYYY-MM-DD');
            }

            window.jQuery("#historydateRange").daterangepicker({
                startDate: moment().add(0, "days").startOf('day')._d,
                endDate: moment().add(0, "days").endOf('day')._d,
                minDate: moment().set({ 'year': 2025, 'month': 0, 'date': 1 })._d,
                maxDate: moment()._d,
                alwaysShowCalendars: true,
                autoApply: false,
                opens: 'center',
                drops: 'down',
                timePicker: false,
                timePicker24Hour: false,
                timePickerIncrement: 1,
                buttonclasses: 'btn btn-sm',
                applyButtonClasses: 'btn-primary',
                cancelButtonClasses: 'button-default',
                autoUpdateInput: true,
                showCustomRangeLabel: true,
                showDropdowns: true,
                linkedCalendars: true,
                locale: {
                    format: 'DD MMM YYYY',
                    applyLabel: _isData.dt.aply,
                    cancelLabel: _isData.dt.clr,
                    customRangeLabel: _isData.dt.crng,
                    applyClass: 'btn-primary',
                    cancelClass: 'btn-default'
                },
                ranges: {
                    [getT]: [moment().startOf('day'), moment()],
                    [getY]: [moment().subtract(1, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                    [getL7]: [moment().subtract(7, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                    [getL15]: [moment().subtract(15, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')],
                    [getL30]: [moment().subtract(30, 'days').startOf('day'), moment().subtract(1, 'days').endOf('day')]
                }
            }),
                jQuery('#historydateRange').on('show.daterangepicker', function (ev, picker) {
                    // Sync the right calendar month and year with the left calendar
                    if (isFirstClick) {
                        const leftMonth = picker.leftCalendar.month.month();
                        const leftYear = picker.leftCalendar.month.year();
                        picker.rightCalendar.month.month(leftMonth);
                        picker.rightCalendar.month.year(leftYear);
                        picker.updateCalendars();

                        isFirstClick = false; // Set the flag to false after the first execution
                    }
                    if (picker.chosenLabel == "Today" || picker.chosenLabel == 'اليوم') {
                        if (!jQuery('.daterangepicker .calendar.right.active').is(":visible")) {
                            jQuery('.daterangepicker .calendar.right .prev.available:visible').trigger('click')
                        }
                    }
                }).on('showCalendar.daterangepicker', function (ev, picker) {
                const todayLabel = DOMPurify.sanitize(_isData.dt.t1);
                if (picker.chosenLabel === todayLabel) {
                    jQuery('.daterangepicker td.today').removeClass('off disabled');
                } else {
                    jQuery('.daterangepicker td.today').addClass('off disabled');
                }
            });

            // Add event handler for range selection
            jQuery('#historydateRange').on('show.daterangepicker', function (ev, picker) {
                // Change arrow to up when picker opens
                jQuery(this).closest('.ia-filter-box').find('.fa').removeClass('fa-angle-down').addClass('fa-angle-up');
                // Ensure buttons are visible
                jQuery('.daterangepicker .drp-buttons').show();
            }).on('hide.daterangepicker', function (ev, picker) {
                // Change arrow back to down when picker closes
                jQuery(this).closest('.ia-filter-box').find('.fa').removeClass('fa-angle-up').addClass('fa-angle-down');
            }).on('apply.daterangepicker', function (ev, picker) {
                const todayLabel = DOMPurify.sanitize(_isData.dt.t1);
                const l0Label = DOMPurify.sanitize(_isData.dt.t0);
                const l7Label = DOMPurify.sanitize(_isData.dt.t7);
                const l15Label = DOMPurify.sanitize(_isData.dt.t15);
                const l30Label = DOMPurify.sanitize(_isData.dt.t30);
                const isCustomRange = picker.chosenLabel === _isData.dt.crng;

                // Check if Today is selected
                const isTodaySelected = picker.chosenLabel === todayLabel ||
                    (moment(picker.startDate).isSame(moment().startOf('day'), 'day') &&
                        moment(picker.endDate).isSame(moment().endOf('day'), 'day'));

                // Set isToday parameter in listdata.params
                listdata.params.isToday = isTodaySelected;

                // If Today is selected, set toDate to current date and time
                if (isTodaySelected) {
                    // Use current time for toDate instead of end of day
                    listdata.params.Todate = moment().format('YYYY-MM-DD');
                } else {
                    // For other selections, use the picker's endDate
                    listdata.params.Todate = moment(picker.endDate).endOf('day').format('YYYY-MM-DD');
                }

                // Always set fromDate from the picker
                listdata.params.Fromdate = moment(picker.startDate).format('YYYY-MM-DD');

                // Check if one of the range options is selected
                if (picker.chosenLabel === l7Label ||
                    picker.chosenLabel === l15Label ||
                    picker.chosenLabel === l30Label ||
                    picker.chosenLabel === l0Label || isCustomRange) {

                    // Disable Today date in the calendar
                    picker.maxDate = moment().subtract(1, 'days').endOf('day');
                    picker.updateCalendars();

                    // Also disable Today in the ranges list
                    jQuery('.daterangepicker .ranges li').filter(function () {
                        return jQuery(this).text() === todayLabel;
                    }).addClass('disabled');

                    // Ensure isToday is false for these ranges
                    listdata.params.isToday = false;
                } else {
                    // Re-enable Today date for other selections
                    picker.maxDate = moment().endOf('day');
                    picker.updateCalendars();

                    // Re-enable Today in the ranges list
                    jQuery('.daterangepicker .ranges li').filter(function () {
                        return jQuery(this).text() === todayLabel;
                    }).removeClass('disabled');
                }
            }).on('showCalendar.daterangepicker', function (ev, picker) {
                const todayLabel = DOMPurify.sanitize(_isData.dt.t1);
                const l0Label = DOMPurify.sanitize(_isData.dt.t0);
                const l7Label = DOMPurify.sanitize(_isData.dt.t7);
                const l15Label = DOMPurify.sanitize(_isData.dt.t15);
                const l30Label = DOMPurify.sanitize(_isData.dt.t30);
                const isCustomRange = picker.chosenLabel === _isData.dt.crng;

                // Check if one of the range options is selected
                if (picker.chosenLabel === l7Label ||
                    picker.chosenLabel === l15Label ||
                    picker.chosenLabel === l30Label ||
                    picker.chosenLabel === l0Label || isCustomRange) {

                    // Disable Today date in the calendar
                    picker.maxDate = moment().subtract(1, 'days').endOf('day');
                    /*picker.updateCalendars();*/

                    // Also disable Today in the ranges list
                    jQuery('.daterangepicker .ranges li').filter(function () {
                        return jQuery(this).text() === todayLabel;
                    }).addClass('disabled');

                    // Ensure isToday is false for these ranges
                    listdata.params.isToday = false;
                }
                else {
                    // Re-enable Today date for other selections
                    picker.maxDate = moment().endOf('day');
                    /*picker.updateCalendars();*/

                    // Re-enable Today in the ranges list
                    jQuery('.daterangepicker .ranges li').filter(function () {
                        return jQuery(this).text() === todayLabel;
                    }).removeClass('disabled');
                }
            });

            // Add initial down arrow class
            jQuery("#historydateRange").find('.fa-calendar').addClass('fa-chevron-down');

            // click event for date range picker apply button 
            jQuery(document).on('click', '.applyBtn', function (e, picker) {
                /*apbtn = 'applybtn';*/
                isLoadtme = true;
                e.stopImmediatePropagation();
                const pickerr = jQuery("#historydateRange").data('daterangepicker');
                const fromDate = moment(pickerr.startDate);
                const toDate = moment(pickerr.endDate);
                const today = moment().startOf('day');
                
                // Check if both dates are today
                const isFromDateToday = fromDate.isSame(today, 'day');
                const isToDateToday = toDate.isSame(today, 'day');
                
                if (isFromDateToday && isToDateToday) {
                    // Both dates are today - allow as is
                    listdata.params.Fromdate = fromDate.format('YYYY-MM-DD');
                    listdata.params.Todate = moment().format('YYYY-MM-DD'); // Current time
                } else if (!isFromDateToday && isToDateToday) {
                    // FromDate is past date and ToDate is today
                    // Subtract 1 day from today
                    listdata.params.Fromdate = fromDate.format('YYYY-MM-DD');
                    listdata.params.Todate = moment().subtract(1, 'days').endOf('day').format('YYYY-MM-DD');
                    
                    // Update the picker display
                    pickerr.setEndDate(moment().subtract(1, 'days').endOf('day'));
                } else {
                    // Normal case - use picker dates
                    listdata.params.Fromdate = fromDate.format('YYYY-MM-DD');
                    listdata.params.Todate = toDate.format('YYYY-MM-DD');
                }
                _isData.dt.lbl_selectedRange = jQuery('#historydateRange').data('daterangepicker').chosenLabel;
                jQuery(".date-picker").removeClass(".datepickshow");
                selecteddates();
            });
            var pagerefresh = true, fromDate = listdata.params.Fromdate, toDate = listdata.params.Todate, HistoryDaterangeModel = '';
            const selecteddates = function () {
                var getPrevDate = moment(fromDate).format('DD MM YYYY') + " - " + moment(toDate).format('DD MM YYYY')
                // Sanitize input to prevent malicious script injection
                const sanitizedInput = getPrevDate[str_rplc](/</g, "&lt;")[str_rplc](/>/g, "&gt;");

                // Validate date range format (MM/DD/YYYY - MM/DD/YYYY)
                const dateRangePattern = /^\d{2}\s\d{2}\s\d{4}\s-\s\d{2}\s\d{2}\s\d{4}$/;
                if (dateRangePattern.test(sanitizedInput) == false) {
                    return false;
                }
                if (HistoryDaterangeModel != getPrevDate) {
                }
                listdata.params.PageNo = 1;
                listdata.params.PageSize = listdata.init.PageSize;
                if (HistoryDaterangeModel == undefined || HistoryDaterangeModel == '') {
                    fromDate = moment(moment().add(0, "days").startOf('day')).format('YYYY-MM-DD');
                    //toDate = moment().format('YYYY-MM-DD hh:mm:ss A');
                    const picker = jQuery("#historydateRange").data('daterangepicker');
                    // Handle end date based on selected option
                    if (picker.chosenLabel === _isData.dt.t1) { // Today
                        toDate = moment().format('YYYY-MM-DD');
                    } else if (picker.chosenLabel === _isData.dt.t0) { // Yesterday
                        toDate = moment().subtract(1, 'days').endOf('day').format('YYYY-MM-DD');
                    } else if (picker.chosenLabel === _isData.dt.crng) { // Custom Range
                        toDate = picker.endDate.format('YYYY-MM-DD');
                    } else { // Other ranges (Last 7, 15, 30 days)
                        toDate = moment().subtract(1, 'days').endOf('day').format('YYYY-MM-DD');
                    }

                    // Update the model with the new dates
                    listdata.params.Fromdate = fromDate;
                    listdata.params.Todate = toDate;

                    if (HistoryDaterangeModel == '') {
                        fromDate = moment(jQuery("#historydateRange").data('daterangepicker').startDate).format('YYYY-MM-DD')
                        toDate = moment(jQuery("#historydateRange").data('daterangepicker').endDate).format('YYYY-MM-DD')
                        if (pagerefresh == true) {
                            pagerefresh = false
                            HistoryDaterangeModel = moment(fromDate).format('DD MMM YYYY') + " - " + moment(toDate).format('DD MMM YYYY');
                        }
                        else {
                            HistoryDaterangeModel = fromDate + " - " + toDate;
                        }
                    }
                }
                else {
                    fromDate = moment(jQuery("#historydateRange").data('daterangepicker').startDate).format('YYYY-MM-DD')

                    const picker = jQuery("#historydateRange").data('daterangepicker');
                    // Handle end date based on selected option
                    if (picker.chosenLabel === _isData.dt.t1) { // Today
                        toDate = moment().format('YYYY-MM-DD');
                    } else if (picker.chosenLabel === _isData.dt.t0) { // Yesterday
                        toDate = moment().subtract(1, 'days').endOf('day').format('YYYY-MM-DD');
                    } else if (picker.chosenLabel === _isData.dt.crng) { // Custom Range
                        toDate = picker.endDate.format('YYYY-MM-DD');
                    } else { // Other ranges (Last 7, 15, 30 days)
                        toDate = moment().subtract(1, 'days').endOf('day').format('YYYY-MM-DD');
                    }

                    // Update the model with the new dates
                    listdata.params.Fromdate = fromDate;
                    listdata.params.Todate = toDate;


                    resetListData()
                }
            }
            selecteddates();
            // daterangepicker cancel btn click
            jQuery(document).on('click', '.cancelBtn', function (e) {//modify by srimathi cancel functionlity work
                if (this == jQuery(".cancelBtn")[0]) {
                    jQuery(document.querySelectorAll(".openscenter")[0]).find(".ranges ul li")[0].click();
                    jQuery(".applyBtn")[0].click();
                }
            });
            jQuery(document).on('click', '.ranges ul li', function (e) {
                jQuery("#historydateRange").data('daterangepicker').show()
                //jQuery("#historydateRange").addClass(".datepickshow");
                //if (jQuery("#historydateRange").hasClass(".datepickshow")) {
                //    jQuery("#historydateRange").focus();
                //    jQuery(".date-picker").removeClass(".datepickshow");
                //    jQuery("#historydateRange").addClass(".datepickshow");
                //    _isData.dt.lbl_selectedRange = e.target.innerText
                //}
            })



            //Method 2
            //jQuery('#historydateRange').on('show.daterangepicker', function (ev, picker) {
            //    picker.rightCalendar.calendar[0][0] = moment();
            //    picker.updateCalendars();
            //})
            //jQuery("#historydateRange").on('apply.daterangepicker', function (ev, picker) {
            //    if (rangeClicked) { picker.show() }
            //    else {
            //        _isData.dt.lbl_selectedRange = jQuery('input[name="historydateRange"]').data('daterangepicker').chosenLabel;
            //        jQuery(".date-picker").removeClass(".datepickshow");
            //        //picker.hide()
            //        selecteddates();
            //    }
            //})
            //jQuery("#historydateRange").on('cancel.daterangepicker', function (ev, picker) {
            //    picker.hide()
            //    const getToday = moment();
            //    picker.setStartDate(getToday);
            //    picker.setEndDate(getToday);
            //    _isData.dt.lbl_selectedRange = _isData.dt.t1;
            //    _setisData(prevState => ({
            //        ...prevState,
            //        ...prevState.dt.lbl_selectedRange = _isData.dt.t1
            //    }))
            //    jQuery(this).val(`${getToday.format('DD MMM YYYY')} - ${getToday.format('DD MMM YYYY')}`)
            //    jQuery(".date-picker").removeClass(".datepickshow");
            //    selecteddates();
            //})

            //    let rangeClicked = false

            //    // we want picker to remain open when after selecting a custom range
            //    jQuery('.daterangepicker').not('.custom-events-attached').not('.custom-events-attached')
            //        // mark picker instance(s) as processed, so we won't attach duplicate events in the future
            //        .addClass('custom-events-attached')

            //        // clicking anywhere on the picker will reset our state
            //        // this is not a problem since this click event will always be fired after `apply.daterangepicker`
            //        .click(() => rangeClicked = false)

            //        // selecting one of the ranges will let us know that we want to keep our picker open
            //        // on the next `apply` event
            //        .find('.ranges').find('li').click(() => {
            //            rangeClicked = true
            //        })
        }
    }, []);
    //table column name 
    let Data_Colname = [
        { headTxt: LanguageId == 1 ? 'Activity Time' : 'وقت النشاط', kye: 'timestamp', visible: true, minW: '180', pdfW: '110' },
        { headTxt: LanguageId == 1 ? 'Module' : 'الوحده النمطيه', kye: 'controller', visible: true, minW: '180', pdfW: '110' },
        { headTxt: LanguageId == 1 ? 'Sub Module' : 'الوحدة الفرعية', kye: 'action', visible: true, minW: '100', pdfW: '60' },
        { headTxt: LanguageId == 1 ? 'User Name' : 'اسم المستخدم', kye: 'username', visible: true, minW: '90', pdfW: '60' },
        { headTxt: LanguageId == 1 ? 'User Type' : 'نوع المستخدم', kye: 'UT', visible: true, minW: '90', pdfW: '60' },
        { headTxt: LanguageId == 1 ? 'IP Address' : 'عنوان أى بى', kye: 'ipaddress', visible: true, minW: '140', pdfW: '120' },
        { headTxt: LanguageId == 1 ? 'Activity Details' : 'تفاصيل النشاط', kye: 'activitydescription', visible: true, minW: '150', pdfW: '120' },
        { headTxt: LanguageId == 1 ? 'View Details' : 'عرض التفاصيل', kye: 'actiondetails', visible: true, minW: '150', pdfW: '120' },
    ];
    const [columns, setColumns] = React.useState(Data_Colname);
    var getHiddenColumns = []
    columns.forEach(function (valu, idx) {
        if (valu.visible == false) { getHiddenColumns.push(valu) }
    })
    const [hiddencolumns, sethiddenColumns] = React.useState(getHiddenColumns);
    const checkboxHeaderRef = React.useRef(null)
    //React.useEffect(() => {
    //    let checkvalues = Object.values(checkedClass);
    //    if (checkvalues.filter(item => item === true).length == listitems.length) { checkboxHeaderRef.current.indeterminate = false; checkboxHeaderRef.current.checked = true }
    //    else { checkvalues.includes(true) ? checkboxHeaderRef.current.indeterminate = true : settableHeader(false); }
    //    setselectionCount(checkvalues.filter(item => item === true).length)
    //}, [checkedClass]);
    const handleonChangeAllCheckbox = (Items) => (e) => {
        try {
            const { checked } = e.target;
            if (!Items || !Array.isArray(Items)) {
                console.error('Invalid items array provided to handleonChangeAllCheckbox');
                return;
            }
            const newCheckedState = {};
            Items.forEach(item => {
                if (item && item.id) {
                    newCheckedState[item.id] = checked;
                }
            });
            setcheckedClass(prevState => ({
                ...prevState,
                ...newCheckedState
            }));
        } catch (error) {
            console.error('Error in handleonChangeAllCheckbox:', error);
        }
    }

    const handleonChangeCheckbox = (ItemId) => (e) => {
        try {
            if (!ItemId) {
                console.error('Invalid ItemId provided to handleonChangeCheckbox');
                return;
            }
            const { checked } = e.target;
            setcheckedClass(prevState => ({
                ...prevState,
                [ItemId]: checked
            }));
            settableHeader(true);
        } catch (error) {
            console.error('Error in handleonChangeCheckbox:', error);
        }
    }
    const checkboxColumnRef = React.useRef(null)
    React.useEffect(() => {
        let checkcolvalues = Object.values(checkedColClass);
        if (checkboxColumnRef.current && checkcolvalues.filter(item => item === true).length == hiddencolumns.length) { checkboxColumnRef.current.indeterminate = false; checkboxColumnRef.current.checked = true }
        else { checkboxColumnRef.current ? (checkcolvalues.includes(true) ? checkboxColumnRef.current.indeterminate = true : checkboxColumnRef.current.checked = false) : '' }
    }, [checkedColClass]);
    const handleonAllcolumnCheckbox = (Items) => (e) => {
        const { checked } = e.target;
        Object(Items).forEach(keyid => {
            setcheckedColClass(prevState => ({
                ...prevState,
                [keyid.kye]: checked
            }))
        });
    }
    const handleoncolumnCheckbox = (ItemId) => (e) => {
        const { checked } = e.target;
        setcheckedColClass(prevState => ({
            ...prevState,
            [ItemId]: checked
        }))
        checkboxColumnRef.current ? checkboxColumnRef.current.indeterminate = false : '';
    }
    //Apply coljumns button click event for apply selected columns showing in table
    const applyColumnChooser = () => {
        let checkcolvalues = Object.entries(checkedColClass).map(([kye, value]) => ({ kye, value }))
        let keyvaluesColumn = checkcolvalues.filter(item => item.value === true)
        keyvaluesColumn.forEach((item, index) => {
            columns.forEach((col, idx) => {
                col.kye === item.kye ? col.visible = true : '';
            });
            hiddencolumns.splice(hiddencolumns.findIndex(item1 => item1.kye == item.kye), 1);
        });
        sethiddenColumns(hiddencolumns);
        setColumns(columns);
        setcolumnChoosepop(false)
    }
    //open column chooser popup
    const colChooserOpen = () => {
        hiddencolumns.length > 0 ? setcolumnChoosepop(true) : '';
        setcheckedColClass({})
    }

    //For all,site,building,ip panel online and offline count work start...
    const [isLoadDefault, setIsLoadDefault] = React.useState({
        isLoad: 'all', // 'All/Site/Building'
        httploader: false, isAjxCompleted: false, loaderText: ''
    })
    const [countInfo, setcountInfo] = React.useState(
        {
            integator: { count: 0 },
            all: {
                count: 3,
                online: 1,
                offline: 2,
                isonline: true
            },
            site: {
                count: 2,
                online: 1,
                offline: 1,
                isonline: true
            },
            building: {
                count: 1,
                online: 1,
                offline: 0,
                isonline: true
            },
            ippanel: {
                count: 0,
                online: 0,
                offline: 0,
                isonline: true
            }
        })
    const [isFilterType, setFilterType] = React.useState(
        {
            isFrom: "All",
            isStatus: "Online"
        })
    const changeCount = function (type) {
        setFilterType(prev => ({
            ...prev,
            isFrom: type, isStatus: countInfo[type.toLowerCase()].isonline == true ? 'Online' : 'Offline'
        }))
        setcountInfo(prev => ({
            ...prev,
            ...prev[type.toLowerCase()].isonline = !prev[type.toLowerCase()].isonline
        }))
    }
    const [listdataview, setListdataview] = React.useState({
        params: {
            Id: ''
        }, prev: {
            Id: ''
        },
        data: []
    });
    const [listdata, setListdata] = React.useState({
        init: {
            PageNo: 1, PageSize: 20, searchText: "", totRecords: 0, currentPage: 1, TotPages: 1,
            previouscount: 1, nextcount: 20,
            pageCounts: { limit: 3, data: [], currArrPage: 1 },
            pgSize: { data: [{ id: 20, isSelected: true }, { id: 50, isSelected: false }, { id: 100, isSelected: false }] }
        },
        params: {
            Fromdate: moment(moment()[str_add](0, "days").startOf('day')).format('YYYY-MM-DD'),
            Todate: moment().format('YYYY-MM-DD'),
            PageNo: 1,
            PageSize: 20,
            searchText: "",
            isToday: true, // Set isToday to true for initial load
        }, prev: {
            Fromdate: moment(moment()[str_add](0, "days").startOf('day')).format('YYYY-MM-DD'),
            Todate: moment().format('YYYY-MM-DD'),
            PageNo: 1,
            PageSize: 20, searchText: "",
        },
        data: []
    });

    const listdataBinding = React.useCallback(async () => {
        try {
            const getPrevData = {
                Fromdate: listdata.params.Fromdate,
                Todate: moment().format('YYYY-MM-DD'),
                PageNo: listdata.params.PageNo,
                PageSize: listdata.params.PageSize,
                searchText: listdata.params.searchText,
            };

            setListdata(prev => ({
                ...prev,
                data: [],
                prev: getPrevData
            }));

            setIsLoadDefault(prev => ({
                ...prev,
                httploader: true,
                isAjxCompleted: false
            }));

            listdata.prev = {
                ...getPrevData
            };

            // Always update Todate to current time for initial page load
            if (!isLoadtme) {
                listdata.params.Todate = moment().format('YYYY-MM-DD');

                // Check if the fromDate is today
                const today = moment().startOf('day');
                const fromDate = moment(listdata.params.Fromdate);

                // Set isToday parameter based on whether fromDate is today
                listdata.params.isToday = fromDate.isSame(today, 'day');
            }

            const qrystr = new URLSearchParams(listdata.params).toString();
            //const qrystr = isLoadtme == true ? new URLSearchParams(listdata.params).toString() : new URLSearchParams({
            //    ...listdata.params,
            //    Todate: moment().format('YYYY-MM-DD hh:mm:ss A')  // Ensure current time in query string
            //}).toString(); 
            const result = await customFetch(baseUrl + `Activity/GetActivityLogList?${qrystr}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': GetantiForgeryToken
                }
            });

            if (!result) {
                throw new Error('No data received from server');
            }

            const getreslt = JSON.parse(result);

            setIsLoadDefault(prev => ({
                ...prev,
                httploader: false,
                isAjxCompleted: true
            }));

            if (getreslt.Activities && getreslt.Activities.length > 0) {
                getreslt.Activities.forEach(activity => {
                    if (activity.username) {
                        activity.username = activity.username[str_rplc]('•', '.');
                    }
                });

                listdata.init.totRecords = getreslt.TotalRecords;
                listdata.data = getreslt.Activities;
                /*isLoadtme = false;*/
                setListdata(prev => ({
                    ...prev,
                    data: getreslt.Activities
                }));

                if (getreslt.Activities.length > 0) {
                    findPageSize();
                }
            } else {
                setListdata(prev => ({
                    ...prev,
                    data: []
                }));
            }
        } catch (error) {
            console.error('Error in listdataBinding:', error);
            setIsLoadDefault(prev => ({
                ...prev,
                httploader: false,
                isAjxCompleted: true
            }));
            setListdata(prev => ({
                ...prev,
                data: []
            }));
        }
    });

    React.useEffect(() => {
        listdataBinding();

    }, []);
    const [delayTimeId, setDelayTimeId] = React.useState(null);
    const listFromSrchTxt = (event, getFrom) => {
        var isAllowSrch = true;
        if (getFrom == 'clrSrch') {
            listdata.params.searchText = "";
            document.getElementById('srcEle').value = '';
        }
        else {
            if (!allowedCharactersKeyPress.test(event.target.value)) {
                isAllowSrch = false
                event.preventDefault()
                event.stopPropagation();
            }
            listdata.params.searchText = event.target.value.trim();

        }
        if (isAllowSrch == true) {
            // Clear any existing timeout to prevent multiple calls
            if (delayTimeId) {
                clearTimeout(delayTimeId);
            }
            // Set a new timeout to fetch data
            const newDelayTimeId = window[str_stmeout](() => {
                resetListData();
            }, 500); // Adjust delay if necessary (0 ms for instant calls)

            setDelayTimeId(newDelayTimeId);
        }

    }
    /*Handle click outside..............Start*/
    const handleClickOutside = (event) => {
        if (Overalldata.DateRange.current && !Overalldata.DateRange.current.contains(event.target) && !jQuery('body .daterangepicker.dropdown-menu')[0].contains(event.target)) {
            jQuery('body .daterangepicker.dropdown-menu').hide()
            if (Overalldata.DateRange.current && !Overalldata.DateRange.current.contains(event.target) && jQuery('body .daterangepicker.dropdown-menu')[0] && !jQuery('body .daterangepicker.dropdown-menu')[0].contains(event.target)) {
                // Hide the dropdown
                jQuery('body .daterangepicker.dropdown-menu').hide();

                // Get the date picker instance
                //if (apbtn == "") {
                //    const picker = jQuery("#historydateRange").data('daterangepicker');
                //    if (picker) {
                //    // Reset to today
                //    const today = moment();
                //    picker.setStartDate(today.startOf('day'));
                //    picker.setEndDate(today.endOf('day'));
                //    picker.chosenLabel = _isData.dt.t1; // Set label to "Today"

                //    // Update the input value
                //    picker.element.val(picker.startDate.format(picker.locale.format) + picker.locale.separator + picker.endDate.format(picker.locale.format));

                //    // Update dates in listdata.params
                //    listdata.params.Fromdate = moment(today).startOf('day').format('YYYY-MM-DD hh:mm:ss A');
                //    listdata.params.Todate = moment(today).format('YYYY-MM-DD hh:mm:ss A');

                //    // Update the selected range label
                //    _isData.dt.lbl_selectedRange = _isData.dt.t1;
                //    }
                //    apbtn = ""
                //}

            }
        }
        if (Overalldata.Integrator.current && !Overalldata.Integrator.current.contains(event.target)) {
            if (Overalldata.Integrator.Showdropdown != false) {
                setOveralldata(prev => ({
                    ...prev,
                    ...prev.Integrator.Showdropdown = false,
                }))
            }
        }
        if (Overalldata.Enduser.current && !Overalldata.Enduser.current.contains(event.target)) {
            if (Overalldata.Enduser.Showdropdown != false) {
                setOveralldata(prev => ({
                    ...prev,
                    ...prev.Enduser.Showdropdown = false,
                }))
            }
        }
        if (Overalldata.Laststatus.current && !Overalldata.Laststatus.current.contains(event.target)) {
            if (Overalldata.Laststatus.Showdropdown != false) {
                setOveralldata(prev => ({
                    ...prev,
                    ...prev.Laststatus.Showdropdown = false,
                }))
            }
        }
        if (Overalldata.AlarmCat.current && !Overalldata.AlarmCat.current.contains(event.target)) {
            if (Overalldata.AlarmCat.Showdropdown != false) {
                setOveralldata(prev => ({
                    ...prev,
                    ...prev.AlarmCat.Showdropdown = false,
                }))
            }
        }
    }
    React.useEffect(() => {
        document.addEventListener('mousedown', handleClickOutside)
        return () => {
            document.addEventListener('mousedown', handleClickOutside)
        }
    }, []);
    /*Handle click outside..............end*/

    //dropdown default data for page refresh...
    const [Overalldata, setOveralldata] = React.useState({
        DateRange: {},
        Integrator: {
            Showdropdown: false, Dropdownlist: [], isFilterEmpty: false,
            SelectedList: [], tempList: [], Searchtxt: "", Selectedlabel: _isData.str.all, startload: 20
        },
        Enduser: {
            Showdropdown: false, Dropdownlist: [], isFilterEmpty: false,
            DropdownHeaderlist: [{ name: _isData.str.lbl_Site, id: 'site', checked: true, isshow: true },
            { name: _isData.str.lbl_Building, id: 'building', checked: true, isshow: true }],
            SelectedList: [], tempList: [], Searchtxt: "", Selectedlabel: _isData.str.all, startload: 20
        },
        Laststatus: {
            Showdropdown: false, Dropdownlist: [
                { id: '2FFACCD272C4BCDD', name: LanguageId == 1 ? 'After Armed' : 'بعد السلاح', checked: false, ASSelected: 'Disarmed', FilterCount: true },
                { id: '9D5CA9DAF212B8D2', name: LanguageId == 1 ? 'After Disarmed' : 'بعد نزع السلاح', checked: false, ASSelected: 'Armed', FilterCount: true }],
            SelectedList: [], tempList: [], Searchtxt: "", Selectedlabel: "",
            Selectedlabel: _isData.str.all, Tempselecteddata: [], startload: 20
        },
        AlarmCat: {
            Showdropdown: false, Dropdownlist: [
                { id: '9D5CA9DAF212B8D2', name: LanguageId == 1 ? 'Notification' : 'إشعار', checked: false, ASSelected: 'Notification', FilterCount: true },
                { id: '2FFACCD272C4BCDD', name: LanguageId == 1 ? 'Warning' : 'تحذير', checked: false, ASSelected: 'Warning', FilterCount: true },
                { id: 'A56E7AC280448B0C', name: LanguageId == 1 ? 'Alarm' : 'إنذار', checked: false, ASSelected: 'Alarm', FilterCount: true },
                { id: '92DB78773A4944B9', name: LanguageId == 1 ? 'Confirm Alarm' : 'تأكيد الإنذار', checked: false, ASSelected: 'ConfirmAlarm', FilterCount: true },
                { id: 'EC9692D38A9504F9', name: LanguageId == 1 ? 'Technical Alarm' : 'المدير الفنير', checked: false, ASSelected: 'TechnicalAlarm', FilterCount: true }],
            SelectedList: [], tempList: [], Searchtxt: "", Selectedlabel: "",
            Selectedlabel: _isData.str.all, Tempselecteddata: [], startload: 20
        }
    })
    const DropdownChkUnchkFunc = function (evet, x, getThis, btn, isFrom) {
        evet.preventDefault();
        Overalldata[isFrom].isFilterEmpty = false;
        if (btn == 'checkuncheck') {
            if (getThis.checked == false) {
                Overalldata[isFrom].SelectedList.push(getThis) // Added selected list
            }
            else {
                const getVal = getThis;
                Overalldata[isFrom].SelectedList.forEach(function (val, ind) {
                    if (val.id == getVal.id) {
                        Overalldata[isFrom].SelectedList.splice(ind, 1) // Remove selected list
                    }
                })
            }
            getThis.checked = !getThis.checked; //Toggle list checkbox
            setOveralldata(prev => ({
                ...prev,
                ...prev[isFrom].Showdropdown = Overalldata[isFrom].Showdropdown
            }))
        }
        else if (btn == 'selectall') {
            if (isFrom == 'Laststatus' || isFrom == 'AlarmCat') {
                var isCheckSts = Overalldata[isFrom].Dropdownlist.length != Overalldata[isFrom].SelectedList.length ? true : false
                Overalldata[isFrom].SelectedList = [];
                Overalldata[isFrom].Dropdownlist.forEach(function (val, ind) {
                    val.checked = isCheckSts;
                    if (isCheckSts == true) { Overalldata[isFrom].SelectedList.push(val) }
                })

                setOveralldata(prev => ({
                    ...prev,
                    ...prev[isFrom].Showdropdown = true,
                    ...prev[isFrom].Searchtxt = ''
                }))
            }
        }
        else if (btn == 'close') {
            Overalldata[isFrom].Dropdownlist.forEach(function (val1, ind1) {
                val1.isVisible = true;
            })
            setOveralldata(prev => ({
                ...prev,
                ...prev[isFrom].Showdropdown = true,
                ...prev[isFrom].Searchtxt = ''
            }))
        }
        else if (btn == 'show') {
            var getTempList = [];
            Overalldata[isFrom].Dropdownlist.forEach(function (val1, ind1) {
                val1.isVisible = true;
                val1.checked = false;
                Overalldata[isFrom].tempList.forEach(function (val2, ind2) {
                    if (val1.id == val2.id) {
                        val1.checked = true;
                        getTempList.push(val2)
                    }
                })
            })
            Overalldata[isFrom].SelectedList = getTempList
            if (Overalldata[isFrom].Dropdownlist.length < 1) {
                Overalldata[isFrom].isFilterEmpty = true
            }
            if (Overalldata[isFrom].Showdropdown == false) {
                setOveralldata(prev => ({
                    ...prev,
                    ...prev[isFrom].Showdropdown = true,
                    ...prev[isFrom].Searchtxt = '',
                    ...prev[isFrom].SelectedList = getTempList
                }))
            }
        }
        else if (btn == 'apply') {
            Overalldata[isFrom].tempList = Overalldata[isFrom].SelectedList;
            Overalldata[isFrom].Selectedlabel = Overalldata[isFrom].SelectedList.length > 0 ? Overalldata[isFrom].SelectedList.length + ' ' + _isData.str.selectedtxt : _isData.str.all;
            var getId = []
            getId.push(...Overalldata[isFrom].SelectedList.map(e => e.id))
            if (isFrom == 'Integrator') {
                listdata.params.RI = getId.join(',')
                listdata.params.RS = '';
                Overalldata.Enduser.Selectedlabel = _isData.str.all
                Overalldata.Enduser.Searchtxt = "";
                Overalldata.Enduser.Dropdownlist = []
                Overalldata.Enduser.SelectedList = []
                Overalldata.Enduser.tempList = []
                setOveralldata(prev => ({
                    ...prev,
                    ...prev.Enduser.Showdropdown = false,
                    ...prev.Enduser.SelectedList = [],
                    ...prev.Enduser.Dropdownlist = [],
                    ...prev.Enduser.tempList = [],
                    ...prev.Enduser.Searchtxt = ""
                }))
                EnduserList()
            }
            else if (isFrom == 'Enduser') {
                listdata.params.RS = getId.join(',')
            }
            else if (isFrom == 'Laststatus') {
                listdata.params.LastStatusType = getId.join(',')
            }
            else if (isFrom == 'AlarmCat') {
                listdata.params.AlarmCat = getId.join(',')
            }
        }
        else if (btn == 'clear') {
            Overalldata[isFrom].tempList = []
            if (isFrom == 'Integrator') {
                listdata.params.RI = "";
                listdata.params.Siteid = "";
                Overalldata.Integrator.SelectedList = []
                Overalldata.Enduser.Selectedlabel = _isData.str.all;
                Overalldata.Enduser.Searchtxt = "";
                Overalldata.Enduser.Dropdownlist = []
                Overalldata.Enduser.tempList = []
                Overalldata.Enduser.SelectedList = []
                setOveralldata(prev => ({
                    ...prev,
                    ...prev.Enduser.Showdropdown = false,
                    ...prev.Enduser.SelectedList = [],
                    ...prev.Enduser.Dropdownlist = [],
                    ...prev.Enduser.tempList = [],
                    ...prev.Enduser.Searchtxt = ""
                }))
                EnduserList()
            }
            else if (isFrom == 'Enduser') {
                listdata.params.RS = ""
                Overalldata.Enduser.Dropdownlist = []
                Overalldata.Enduser.SelectedList = []
                EnduserList()
            }
            else if (isFrom == 'Laststatus') {
                listdata.params.LastStatusType = "";
            }
            else if (isFrom == 'AlarmCat') {
                listdata.params.AlarmCat = "";
            }
            Overalldata[isFrom].Dropdownlist.forEach(function (valu, ind) {
                valu.checked = false; valu.isVisible = true
            })

            Overalldata[isFrom].SelectedList = [];
            Overalldata[isFrom].Selectedlabel = _isData.str.all;
        }
        if (btn == 'apply' || btn == 'clear') {
            setOveralldata(prev => ({
                ...prev,
                ...prev[isFrom].Showdropdown = false,
                ...prev[isFrom].Searchtxt = ''
            }))
            resetListData()
        }
        evet.stopPropagation();
        evet.stopImmediatePropagation();
    }
    const siteBuildingLoad = function (evet, getFrom, getIndx, getHeadAllChk) {
        evet.preventDefault();
        //getFrom.checked = !getFrom.checked;
        //if (getFrom.id == 'site') {
        //    if (getFrom.checked == false) {
        //        getHeadAllChk[1].checked = true
        //    }
        //}
        //else {
        //    if (getFrom.checked == false) {
        //        getHeadAllChk[0].checked = true
        //    }
        //}
        //setOveralldata(prev => ({
        //    ...prev,
        //    ...prev.Enduser.DropdownHeaderlist[getIndx].checked = getFrom.checked
        //}))
    }
    const searchTxtFilter = function (getEve, getFrom) {
        const tempData = Overalldata[getFrom].Dropdownlist.filter(
            (itm) =>
                itm[str_nme].toLowerCase().includes(getEve.target.value.toLowerCase())
        )
        Overalldata[getFrom].isFilterEmpty = tempData.length < 1 ? true : false;
        Overalldata[getFrom].Dropdownlist.forEach(function (val1, ind1) {
            val1.isVisible = false
        })
        tempData.forEach(function (val2, ind2) {
            Overalldata[getFrom].Dropdownlist.forEach(function (val1, ind1) {
                if (val1.id == val2.id) {
                    val1.isVisible = true;
                }
            })
        })
        setOveralldata(prev => ({
            ...prev,
            ...prev[getFrom].Searchtxt = getEve.target.value,
            ...prev[getFrom].Dropdownlist = Overalldata[getFrom].Dropdownlist
        }))
    }
    const isLoadPageInfo = function (getFrom) {
        if (getFrom != isLoadDefault.isLoad) {
            isLoadDefault.isLoad = getFrom;
            Overalldata.Enduser.SelectedList = []
            Overalldata.Enduser.DropdownHeaderlist[0].isshow = getFrom == 'site' || getFrom == 'all' ? true : false;
            Overalldata.Enduser.DropdownHeaderlist[1].isshow = getFrom == 'building' || getFrom == 'all' ? true : false;
            Overalldata.Enduser.Dropdownlist = [];
            var tempData = Overalldata.Enduser.DropdownlistCopied;
            Overalldata.Enduser.DropdownlistCopied.forEach(function (val2, index) {
                var getEl = val2;
                getEl.checked = false;
                if (getFrom == 'site') {
                    getEl.isVisible = getEl.category == 2 ? true : false;

                }
                else if (getFrom == 'building') {
                    getEl.isVisible = getEl.category == 3 ? true : false;
                }
                else {
                    getEl.isVisible = true;
                }
                if (getFrom == 'site' && getEl.category == 2) {
                    Overalldata.Enduser.Dropdownlist.push(getEl);
                }
                else if (getFrom == 'building' && getEl.category == 3) {
                    Overalldata.Enduser.Dropdownlist.push(getEl);
                }
                else if (getFrom == 'all') { Overalldata.Enduser.Dropdownlist.push(getEl); }
            })
            setIsLoadDefault(prev => ({
                ...prev,
                isLoad: getFrom
            }))
            setOveralldata(prev => ({
                ...prev,
                ...prev.Enduser.Showdropdown = false,
                ...prev.Enduser.Searchtxt = '',
                ...prev.Enduser.Selectedlabel = 'All',
                ...prev.Enduser.Dropdownlist = Overalldata.Enduser.Dropdownlist
            }))
        }
    }
    const findPageSize = (event) => {
        var getpagenumber = listdata.init.PageNo - 1;
        listdata.init.previouscount = listdata.init.PageSize * getpagenumber + 1;
        listdata.init.nextcount = listdata.init.previouscount + listdata.data.length - 1;
        listdata.init.TotPages = listdata.init.totRecords / listdata.init.PageSize;
        if (listdata.init.totRecords % listdata.init.PageSize != 0) {
            listdata.init.TotPages = parseInt(listdata.init.TotPages.toString().split('.')[0]) + 1;
        }

        if (listdata.init.pageCounts.data.length < 1 && listdata.init.PageNo == 1) {
            var getd = Array.from({ length: listdata.init.TotPages }, (_, index) => ({
                id: index + 1,
                txt: `${index + 1}`, isSelected: false
            }));
            getd[0].isSelected = true;
            var itemsPerPage = listdata.init.pageCounts.limit;
            const startIndex = (listdata.init.pageCounts.currArrPage - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            listdata.init.pageCounts[str_dta] = getd.slice(startIndex, endIndex)
            listdata.init.pageCounts.currArrTotal = listdata.init.TotPages / listdata.init.pageCounts.limit;
            listdata.init.pageCounts.data.forEach(function (valu, indx) {
                valu.isSelected = valu.id == listdata.init.PageNo ? true : false
            })
        }
    }
    const currePageSeries = 1
    const goToPage = (getFrom, getPgNo, getPgSize) => {
        if (getPgNo == listdata.params.PageNo) { // Restrict same page
            return false;
        }
        var isNewArr = false;
        listdata.params.PageSize = listdata.init.PageSize
        if (getFrom == 'isFirst' || getFrom == 'pageSize') {
            isNewArr = true;
            if (getFrom == 'pageSize') {
                isNewArr = false;
                listdata.init.pgSize.data.forEach(function (valu, indx) { valu.isSelected = valu.id == getPgSize ? true : false })
                listdata.init.PageSize = getPgSize;
                listdata.params.PageSize = getPgSize;
                listdata.init.pageCounts[str_dta] = []
            }
            listdata.init.CurrentPage = 1;
            listdata.init.pageCounts.currArrPage = 1;

        }
        else if (getFrom == 'isPrev') {
            listdata.init.CurrentPage = listdata.init.PageNo - 1;
        }
        else if (getFrom == 'isNext') {
            listdata.init.CurrentPage = listdata.init.PageNo + 1;
        }
        else if (getFrom == 'isLast') {
            listdata.init.CurrentPage = listdata.init.TotPages;
            listdata.init.pageCounts.currArrPage = Math.ceil(listdata.init.pageCounts.currArrTotal);
            var checIfLastInd = false;
            listdata.init.pageCounts.data.forEach(function (val, ind) {
                if (val.id == listdata.init.TotPages) { checIfLastInd = true }
            })
            if (!checIfLastInd) {
                isNewArr = true;
            }
        }
        else if (getFrom == 'isPrevPgRange') {
            listdata.init.CurrentPage = listdata.init.pageCounts.data[0].id - 1;
        }
        else if (getFrom == 'isNextPgRange') {
            listdata.init.CurrentPage = listdata.init.pageCounts.data[2].id + 1;
        }
        else if (getFrom == 'isPageCnt') {
            listdata.init.CurrentPage = getPgNo;
        }
        if (listdata.init.CurrentPage < 1 || listdata.init.CurrentPage > listdata.init.TotPages) { return false; }
        else {
            listdata.init.PageNo = listdata.init.CurrentPage;
            listdata.params.PageNo = listdata.init.CurrentPage;
        }
        if (getFrom != 'isFirst' && getFrom != 'isLast' && getFrom != 'isPageCnt' && getFrom != 'pageSize') {
            var getFirArr = listdata.init.pageCounts.data[0].id;
            var getLstArr = listdata.init.pageCounts.data[listdata.init.pageCounts.data.length - 1].id;
            if (getFirArr > listdata.init.PageNo || getLstArr < listdata.init.PageNo) {
                isNewArr = true
                if (getFirArr > listdata.init.PageNo) {
                    listdata.init.pageCounts.currArrPage = listdata.init.pageCounts.currArrPage - 1
                }
                else if (getLstArr < listdata.init.PageNo) {
                    listdata.init.pageCounts.currArrPage = listdata.init.pageCounts.currArrPage + 1;
                }
            }
        }
        if (isNewArr == true) {
            var getd = Array.from({ length: listdata.init.TotPages }, (_, index) => ({
                id: index + 1,
                txt: `${index + 1}`, isSelected: false
            }));

            var itemsPerPage = listdata.init.pageCounts.limit;
            const startIndex = (listdata.init.pageCounts.currArrPage - 1) * itemsPerPage;
            const endIndex = startIndex + itemsPerPage;
            listdata.init.pageCounts[str_dta] = getd.slice(startIndex, endIndex)
        }
        if (listdata.init.pageCounts.data.length > 0) {
            var getInx = 0
            listdata.init.pageCounts.data.forEach(function (valu, indx) {
                valu.isSelected = valu.id == listdata.init.PageNo ? true : false
                if (valu.id == listdata.init.PageNo) {
                    getInx = indx;
                }
            })
            setListdata(prev => ({
                ...prev,
                ...prev.init.pageCounts.data[getInx].isSelected = true
            }))
        }
        listdataBinding();
    }

    const getFilters = () => {
        try {
            var getArry = [];
            if (Overalldata.Integrator.SelectedList.length > 0 && Overalldata.Integrator.SelectedList.length != Overalldata.Integrator.Dropdownlist.length) {
                var isString = LanguageId == 1 ? "Selected Integrator" : _isData.str.lbl_SelectedIntegrator
                getArry.push(isString + '-' + Overalldata.Integrator.SelectedList.length)
            }
            else {
                var isString = LanguageId == 1 ? "All Integrator" : _isData.str.lbl_allIntegrator
                getArry.push(isString)
            }
            if (Overalldata.Enduser.SelectedList.length > 0 && Overalldata.Enduser.SelectedList.length != Overalldata.Enduser.Dropdownlist.length) {
                var isString = LanguageId == 1 ? "Selected End User" : _isData.str.lbl_SelectedEnduser
                getArry.push(isString + '-' + Overalldata.Enduser.SelectedList.length)
            }
            else {
                var isString = LanguageId == 1 ? "All End User" : _isData.str.lbl_allEnduser
                getArry.push(isString)
            }
            if (Overalldata.Laststatus.SelectedList.length > 0 && Overalldata.Laststatus.SelectedList.length != Overalldata.Laststatus.Dropdownlist.length) {
                var isString = LanguageId == 1 ? "Selected Armed/Disarmed status" : _isData.str.lbl_SelectedLaststatus
                getArry.push(isString + '-' + Overalldata.Laststatus.SelectedList.length)
            }
            else {
                //var isString = LanguageId == 1 ? "All Type" : _isData.str.lbl_allLaststatus
                var isString = LanguageId == 1 ? "All Armed/Disarmed Status" : _isData.str.lbl_allLaststatus
                getArry.push(isString)
            }
            if (Overalldata.AlarmCat.SelectedList.length > 0 && Overalldata.AlarmCat.SelectedList.length != Overalldata.AlarmCat.Dropdownlist.length) {
                var isString = LanguageId == 1 ? "Selected Alarm Category" : _isData.str.lbl_SelectedAlarmCat
                getArry.push(isString + '-' + Overalldata.AlarmCat.SelectedList.length)
            }
            else {
                var isString = LanguageId == 1 ? "All Alarm Category" : _isData.str.lbl_allAlarmCat
                getArry.push(isString)
            }
            var getFilterTxts = '';
            if (LanguageId == 1) {
                if (listdata.params.searchText) {
                    getArry.push(_isData.str.lbl_SearchText + ': ' + listdata.params.searchText);
                }
                getFilterTxts = getArry.join(', ');
            } else {
                if (listdata.params.searchText) {
                    getFilterTxts = listdata.params.searchText + " :" + getArry.join(', ');
                } else {
                    getFilterTxts = getArry.join(', ');
                }
            }
            return getFilterTxts;
        } catch (error) {
            console.error('Error in getFilters:', error);
            return '';
        }
    };
    const ListExcelDownload = async () => {
        setIsLoadDefault(prev => ({
            ...prev,
            loaderText: _isData.str.loaderText,
            httploader: true
        }))
        var start = new Date();  /* current start and end date*/
        var currntMonth = start.getMonth() + 1; /* current Month*/
        var currnDate = start.getDate();
        var currntYear = start.getFullYear();
        var fromDate = moment(moment()[str_add](0, "days").startOf('day')).format('YYYY-MM-DD');
        var toDate = moment().format('YYYY-MM-DD');
        var ReportRangeDateXlsx = moment(listdata.params.Fromdate).format('YYYY-MM-DD') + " " + "-" + " " + moment(listdata.params.Todate).format('YYYY-MM-DD');
        var FilterName = "";
        var ReportName = _isData.xl.ExcelReportField;
        var HeaderTitleList = [], ExporttoExcel = [], MultiHeadingColumns = [], MultiChartData = [], MultiChartRows = [], TotalRecordsData = [];
        try {
            var getAllParams = { ...listdata.params }
            getAllParams.PageNo = 1;
            getAllParams.PageSize = listdata.init.totRecords;
            const qrystr2 = new URLSearchParams(getAllParams).toString()
            const result2 = await customFetch(baseUrl + `Activity/GetActivityLogList?${qrystr2}`, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-Token': GetantiForgeryToken
                }
            });
            var getreslt = JSON.parse(result2)
            if (getreslt != "" && getreslt != null && getreslt != undefined) {
                if (getreslt.Activities != "" && getreslt.Activities != null && getreslt.Activities != undefined) {
                    var totalRecords_table = getreslt.Activities
                    totalRecords_table.forEach(function (value, index) {
                        if (value.SDT != "" && value.SDT != null) {
                            var getDataRTL = "صباحا"
                            if (moment(value.SDT, "YYYY-MM-DD").format('A') == "PM") { getDataRTL = "مساءا" }
                            if (LanguageId != "1") { // Is Arabic date format
                                value.SDT = moment(value.SDT, "YYYY-MM-DD").format('YYYY-MM-DD') + " " + getDataRTL
                            }
                            else { value.SDT = moment(value.SDT, "YYYY-MM-DD").format('YYYY-MM-DD') }
                        }
                        if (value.CDT != "" && value.CDT != null) {
                            value.CDT = moment(value.CDT, "DD-MM-YYYY").format("YYYY-MM-DD");
                            if (LanguageId != "1") { // Is Arabic date format
                                value.CDT = moment(value.CDT, "DD-MM-YYYY").format("YYYY-MM-DD");
                            }
                        }
                        if (value.RPT != "" && value.RPT != null) {
                            value.RPT = value.RPT[str_rplc]('•', '.')
                        }
                        if (value.OUN != "" && value.OUN != null) {
                            value.OUN = value.OUN[str_rplc]('•', '.')
                        }
                    })
                    var currTimeForexcel = new Date();
                    var currDateTimeForexcel = String(currnDate).padStart(2, '0') + '-' + String(currntMonth).padStart(2, '0') + '-' + currntYear + ' ' + currTimeForexcel.toLocaleTimeString();
                    var currDateTimeForexcel = moment().format('YYYY-MM-DD');
                    if (totalRecords_table) {
                        var userBased = [], userBasedExcelWidthArr = [], datafield = [];
                        var colLen = jQuery(document.querySelectorAll(".list-table tr.tbl-headrow th.tbl-headdata")).length, _lableMerge = 1, _ValueMerge = 0;
                        if (colLen > 2) {
                            _ValueMerge = colLen - 1;
                        }
                        HeaderTitleList.push(
                            {
                                cells: [
                                    { value: _isData.xl.ExcelReportname, wrap: true, colSpan: _lableMerge, bold: "true", background: "#083480", color: "#FCE903", fontSize: 14, verticalAlign: "center" },
                                    { value: ReportName, wrap: true, colSpan: _ValueMerge, bold: "true", background: "#083480", color: "#E5EAF2", fontSize: 14, verticalAlign: "center", textAlign: LanguageId == '1' ? "left" : "right" }
                                ], height: 33.33
                            },
                            {
                                cells: [
                                    { value: _isData.xl.ExcelGeneratedBy, wrap: true, colSpan: _lableMerge, bold: "true", background: "#083480", color: "#FCE903", fontSize: 14, verticalAlign: "center" },
                                    { value: accname, wrap: true, colSpan: _ValueMerge, bold: "true", background: "#083480", color: "#E5EAF2", fontSize: 14, verticalAlign: "center", textAlign: LanguageId == '1' ? "left" : "right" }
                                ], height: 33.33
                            },
                            {
                                cells: [
                                    { value: _isData.xl.ExcelDateTime, wrap: true, colSpan: _lableMerge, bold: "true", background: "#083480", color: "#FCE903", fontSize: 14, verticalAlign: "center" },
                                    { value: currDateTimeForexcel, wrap: true, colSpan: _ValueMerge, bold: "true", background: "#083480", color: "#E5EAF2", fontSize: 14, verticalAlign: "center", textAlign: LanguageId == '1' ? "left" : "right" }
                                ], height: 33.33
                            },
                            {
                                cells: [
                                    { value: _isData.xl.Fil, wrap: true, colSpan: _lableMerge, bold: "true", background: "#083480", color: "#FCE903", fontSize: 14, verticalAlign: "center" },
                                    { value: listdata.params.searchText, wrap: true, colSpan: _ValueMerge, bold: "true", background: "#083480", color: "#E5EAF2", fontSize: 14, verticalAlign: "center", textAlign: LanguageId == '1' ? "left" : "right" }
                                ], height: 33.33
                            },
                            {
                                cells: [
                                    { value: _isData.xl.ExcelTNOR, wrap: true, colSpan: _lableMerge, bold: "true", background: "#083480", color: "#FCE903", fontSize: 14, verticalAlign: "center" },
                                    { value: totalRecords_table.length.toString(), wrap: true, colSpan: _ValueMerge, bold: "true", background: "#083480", color: "#E5EAF2", fontSize: 14, verticalAlign: "center", textAlign: LanguageId == '1' ? "left" : "right" }
                                ], height: 33.33
                            },
                            {
                                cells: [
                                    { value: _isData.xl.ExcelDateRange, wrap: true, colSpan: _lableMerge, bold: "true", background: "#083480", color: "#FCE903", fontSize: 14, verticalAlign: "center" },
                                    { value: ReportRangeDateXlsx, wrap: true, colSpan: _ValueMerge, bold: "true", background: "#083480", color: "#E5EAF2", fontSize: 14, verticalAlign: "center", textAlign: LanguageId == '1' ? "left" : "right" }
                                ], height: 33.33
                            }
                        )
                        var defaultExcelWidthArr = {
                            CT: { width: 70 }, SDT: { width: 150 }, SNO: { width: 100 }, SN: { width: 200 }, LN: { width: 100 }, Integrator: { width: 200 }, ZN: { width: 200 }, ASN: { width: 200 }, ST: { width: 200 }, BN: { width: 200 }, STN: { width: 100 }, AN: { width: 150 }, CDT: { width: 150 }
                            , Status: { width: 100 }
                        };
                        var userBasedGridColumns = []
                        for (var i = 0; i < colLen; i++) {
                            if (jQuery(document.querySelectorAll(".list-table tr.tbl-headrow th.tbl-headdata"))[i].innerText != '') {
                                var _getElement = jQuery(document.querySelectorAll(".list-table tr.tbl-headrow th.tbl-headdata"))[i]
                                userBasedGridColumns.push(_getElement.innerText);
                                userBasedExcelWidthArr.push({ width: parseInt(jQuery(_getElement)[str_atr]('dragminw')), pdfwidth: parseInt(jQuery(_getElement)[str_atr]('dragpdfw')) })
                                datafield.push(jQuery(_getElement)[str_atr]('dragdata'))
                                userBased.push({ value: _getElement.innerText, bold: "true", textAlign: LanguageId == '1' ? "left" : "right", verticalAlign: "center", fontSize: 14, borderBottom: "true", background: "#a13cb6", color: "#fff", wrap: true });
                            }
                        }
                        MultiHeadingColumns.push({ cells: userBased, height: 50.33, colSpan: 1 })
                        if (datafield.length == 1) { MultiHeadingColumns[0].cells[0].colSpan = 2 }

                        if (userBasedExcelWidthArr.length < 8) {
                            for (var i = 0; i < userBasedExcelWidthArr.length; i++) {
                                userBasedExcelWidthArr[i].width = 200
                            }
                        } else { 
                        userBasedExcelWidthArr[0].width = 200
                        userBasedExcelWidthArr[1].width = 200
                        userBasedExcelWidthArr[2].width = 200
                        userBasedExcelWidthArr[3].width = 200
                        userBasedExcelWidthArr[4].width = 200
                        userBasedExcelWidthArr[5].width = 200
                        userBasedExcelWidthArr[6].width = 500
                        userBasedExcelWidthArr[7].width = 500
                    }
                        if (MultiHeadingColumns[0].cells.length <= 2) {
                            userBasedExcelWidthArr = [];
                            userBasedExcelWidthArr.push({ width: 200 }, { width: 400 })
                        }
                        else if (MultiHeadingColumns[0].cells.length == 3) {
                            userBasedExcelWidthArr = [];
                            userBasedExcelWidthArr.push({ width: 200 }, { width: 200 }, { width: 200 })
                        }
                        else if (MultiHeadingColumns[0].cells.length == 3) {
                            userBasedExcelWidthArr = [];
                            userBasedExcelWidthArr.push({ width: 200 }, { width: 200 }, { width: 200 }, { width: 200 })
                        }
                        for (var i = 0; i < totalRecords_table.length; i++) {
                            var userBasedDatacells = [];
                            for (var j = 0; j < datafield.length; j++) {
                                var columnValue = totalRecords_table[i];
                                var ajaxValue = datafield[j];
                                var excelValue = columnValue[ajaxValue];
                                if (LanguageId != '1') {
                                    if (ajaxValue == "SNO") {
                                        excelValue = String(excelValue);
                                    }
                                }
                                if (excelValue == null || excelValue == "" || excelValue == undefined) {
                                    excelValue = "";
                                }
                                if (excelValue != "" && ajaxValue == 'ZNM') {
                                    excelValue = totalRecords_table[i].ZNO + '.' + totalRecords_table[i].ZNM
                                }

                                if (excelValue != "" && ajaxValue == 'actiondetails') {
                                    try {
                                        const convertValueToString = (value) => {
                                            if (value === null || value === undefined) return '';
                                            if (typeof value === 'string') {
                                                try {
                                                    // Try to parse string as JSON
                                                    const parsed = JSON.parse(value);
                                                    return convertValueToString(parsed);
                                                } catch (e) {
                                                    return value;
                                                }
                                            }
                                            if (Array.isArray(value)) {
                                                return value.map(item => convertValueToString(item)).join(', ');
                                            }
                                            if (typeof value === 'object') {
                                                let str = '';
                                                for (let key in value) {
                                                    if (value.hasOwnProperty(key)) {
                                                        str += `${key}: ${convertValueToString(value[key])}, `;
                                                    }
                                                }
                                                return str.slice(0, -2);
                                            }
                                            return String(value);
                                        };

                                        if (typeof excelValue === 'string') {
                                            let jsonObj = JSON.parse(excelValue);
                                            let formattedStr = '';
                                            for (let key in jsonObj) {
                                                if (jsonObj.hasOwnProperty(key)) {
                                                    formattedStr += `${key}: ${convertValueToString(jsonObj[key])}, `;
                                                }
                                            }
                                            excelValue = formattedStr.slice(0, -2);
                                        } else if (typeof excelValue === 'object') {
                                            let formattedStr = '';
                                            for (let key in excelValue) {
                                                if (excelValue.hasOwnProperty(key)) {
                                                    formattedStr += `${key}: ${convertValueToString(excelValue[key])}, `;
                                                }
                                            }
                                            excelValue = formattedStr.slice(0, -2);
                                        }
                                    } catch (e) {
                                        // If JSON parsing fails, keep original value
                                        console.log("JSON parsing error:", e);
                                    }
                                }

                                var tblCellSpan = 1;
                                if (datafield.length == 1) {
                                    tblCellSpan = 2;
                                }
                                userBasedDatacells.push({ value: excelValue, wrap: true, colSpan: tblCellSpan, fontSize: 12, textAlign: LanguageId == '1' ? "left" : "right", color: "black", verticalAlign: "center" });
                            }
                            MultiChartRows = {
                                cells: userBasedDatacells, height: 35, width: 30
                            }
                            MultiChartData.push(MultiChartRows)
                        }

                        var MergedCells = [];
                        TotalRecordsData = '20'
                        ExporttoExcel = ExporttoExcel.concat(HeaderTitleList, MultiHeadingColumns, MultiChartData, TotalRecordsData);

                        var workbook = new kendo.ooxml.Workbook({
                            rtl: LanguageId == '1' ? false : true,
                            sheets:
                                [
                                    {
                                        mergedCells: [],
                                        columns: userBasedExcelWidthArr,
                                        title: ReportName,
                                        rows: ExporttoExcel,
                                    }
                                ]
                        });
                        kendo.saveAs({
                            dataURI: workbook.toDataURL(),
                            fileName: _isData.xl.ReportFileName + ".xlsx"
                        });
                    }
                }
                else {
                }
            }
        }
        catch (e) { }
        finally {
            setIsLoadDefault(prev => ({
                ...prev,
                loaderText: "",
                httploader: false
            }))
        }
    }

    const ListPDFDownload = async () => {
        var start = new Date();  /* current start and end date*/
        var currntMonth = start.getMonth() + 1; /* current Month*/
        var currnDate = start.getDate();
        var currntYear = start.getFullYear();
        var fromDate = moment(moment()[str_add](0, "days").startOf('day')).format('YYYY-MM-DD');
        var toDate = moment().format('YYYY-MM-DD');
        var ReportRangeDate = moment(listdata.params.Fromdate).format('DD/MM/YYYY') + " " + "-" + " " + moment(listdata.params.Todate).format('DD/MM/YYYY');//Added by srimathi for Excel , Pdf Date range work 20231028
        var FilterName = getFilters();
        var searchtextval = "";

        setIsLoadDefault(prev => ({
            ...prev,
            loaderText: LanguageId == '1' ? "Downloading PDF, Please wait..." : "جارٍ تنزيل ملف بي دي إف يُرجى الانتظار...",
            httploader: true
        }))
        try {
            var getAllParams = { ...listdata.params };
            getAllParams.PageNo = 1;
            getAllParams.PageSize = listdata.init.totRecords;
            const qrystr2 = new URLSearchParams(getAllParams).toString()

            const result2 = await customFetch(baseUrl + `AlarmReport/GetOperatorClosedAlarmReportLists?${qrystr2}`);
            var getreslt = JSON.parse(result2)
            if (getreslt != "" && getreslt != null && getreslt != undefined) {
                if (getreslt[0].Activities != "" && getreslt[0].Activities != null && getreslt[0].Activities != undefined) {
                    var totalRecords_table = getreslt[0].Activities
                    var MultiChartData = [], ColumnHeaderCell = [], ColumnBodyDataCell = [], ColumnHeaderKey = [];
                    var dataexcelgrid = totalRecords_table;
                    dataexcelgrid.forEach(function (value, index) {
                        if (value.SDT != "" && value.SDT != null) {
                            var getDataRTL = "صباحا"
                            if (moment(value.SDT, "DD-MM-YYYY hh:mm:ss A").format('A') == "PM") { getDataRTL = "مساءا" }
                            if (LanguageId != "1") { // Is Arabic date format
                                value.SDT = moment(value.SDT, "DD-MM-YYYY hh:mm:ss A").format('DD/MM/YYYY hh:mm:ss') + " " + getDataRTL;
                            }
                            else { value.SDT = moment(value.SDT, "DD-MM-YYYY hh:mm:ss A").format('DD/MM/YYYY hh:mm:ss A') }
                        }
                        if (value.CDT != "" && value.CDT != null) {
                            value.CDT = moment(value.CDT, "DD-MM-YYYY").format("DD/MM/YYYY");
                            if (LanguageId != "1") { // Is Arabic date format
                                value.CDT = moment(value.CDT, "DD-MM-YYYY").format("DD/MM/YYYY");
                            }
                        }
                        if (value.RPT != "" && value.RPT != null) {
                            value.RPT = value.RPT[str_rplc]('•', '.')
                        }
                        if (value.OUN != "" && value.OUN != null) {
                            value.OUN = value.OUN[str_rplc]('•', '.')
                        }
                    })
                    var currTimeForexcel = new Date();
                    var currDateTimeForexcel = moment().format('DD/MM/YYYY hh:mm:ss A');
                    if (LanguageId != '1') {
                        var getDataRTL = "صباحا"
                        if (moment().format('A') == "PM") { getDataRTL = "مساءا" }
                        currDateTimeForexcel = getDataRTL + " " + moment().format('hh:mm:ss DD/MM/YYYY')
                    }
                    var colLen = jQuery(document.querySelectorAll(".list-table tr.tbl-headrow th.tbl-headdata")).length;
                    for (var i = 0; i < colLen; i++) {
                        if (jQuery(document.querySelectorAll(".list-table tr.tbl-headrow th.tbl-headdata"))[i].innerText != '') {
                            var _getElement = jQuery(document.querySelectorAll(".list-table tr.tbl-headrow th.tbl-headdata"))[i]
                            ColumnHeaderCell.push({
                                title: _getElement.innerText, dataKey: jQuery(_getElement)[str_atr]('dragdata'),
                                isMinW: jQuery(_getElement)[str_atr]('dragminw'),
                                isPdfW: jQuery(_getElement)[str_atr]('dragpdfw')
                            });
                        }
                    }
                    ColumnBodyDataCell = [...dataexcelgrid]
                    for (var i = 0; i < dataexcelgrid.length; i++) {
                        for (j = 0; j < ColumnHeaderCell.length; j++) {
                            var _getElement = jQuery(document.querySelectorAll(".list-table tr.tbl-headrow th.tbl-headdata"))[j]
                            var getTdCell = dataexcelgrid[i][ColumnHeaderCell[j].dataKey]
                            if (getTdCell == "" || getTdCell == null || getTdCell == undefined) {
                                getTdCell = "-"
                            }
                            if (getTdCell != "-" && ColumnHeaderCell[j].dataKey == 'ZNM') {
                                getTdCell = ColumnBodyDataCell[i].ZNO + '.' + ColumnBodyDataCell[i].ZNM
                            }
                            if (ColumnHeaderCell[j].dataKey == "CDT") {
                                //reverseTxt(getTdCell)
                            }
                            ColumnBodyDataCell[i][ColumnHeaderCell[j].dataKey] = getTdCell
                        }
                    }
                    var pageTye = 'a3'
                    if (ColumnHeaderCell.length > 22) { pageTye = 'a2' }
                    //else if (ColumnHeaderCell.length > 12) { pageTye = 'a3' }
                    var pdfDoc = new jsPDF('l', 'pt', pageTye);
                    var posY = 25;
                    var topstartval = 90;
                    var lineslength = 1;
                    function addwraptext(document, text, x, starty, maxwidth) {
                        var cline = "";
                        var words = text.split(' ');
                        var lines = [];
                        words.forEach(word => {

                            var testline = cline + word + ' ';
                            var metric = document.getTextDimensions(testline)
                            if (metric.w < maxwidth - 80) {
                                cline = testline
                            }
                            else {
                                if (cline !== '') {
                                    lines.push(cline.trim())
                                }
                                cline = word + ' '
                            }
                        })
                        if (cline !== "") {
                            lines.push(cline.trim())
                        }
                        lines.forEach((line, index) => {
                            document.text(line, x, starty + (index * 25))
                        })
                        lineslength = lines.length;
                        dynamicmarginval();
                        return starty + lines.length * 25
                    }
                    var totalPagesExp = '{total_pages_count_string}';
                    pdfDoc.setFont('Amiri-Bold');
                    var margin = 40;
                    var padding = 5;
                    //--------------------
                    var columnWidths = [], getCellWidth = [], columnWidths2 = [], getCellWidth2 = [];
                    for (var j = 0; j < ColumnHeaderCell.length; j++) {
                        var maxWidth = 80, maxWidth2 = 70;
                        maxWidth = parseInt(ColumnHeaderCell[j].isMinW)
                        maxWidth2 = parseInt(ColumnHeaderCell[j].isPdfW)
                        if (maxWidth < 80) { maxWidth = 80 }
                        if (ColumnHeaderCell[j].dataKey == "LIA") { maxWidth = 150 }
                        columnWidths.push(maxWidth);
                        ColumnHeaderCell[j].cellWidth = maxWidth;
                        //columnWidths2.push(maxWidth2);
                        //ColumnHeaderCell[j].cellWidth = maxWidth2;
                    }

                    // Calculate total width of the table
                    var totalWidth = columnWidths.reduce(function (acc, width) {
                        return acc + width + 2;
                    }, 0);

                    // Calculate available width for the table
                    //var availableWidth = pdfDoc.internal.pageSize.width - 2 * margin;
                    var availableWidth = pdfDoc.internal.pageSize.width - 2;
                    // Check if table fits within available width
                    if (totalWidth > availableWidth) {
                        // Table does not fit within available width, scale down column widths
                        var getavailableWidth = availableWidth - 35
                        var scaleFactor = getavailableWidth / totalWidth;
                        columnWidths = columnWidths.map(function (width) {
                            /*return Math.floor(width * scaleFactor);*/
                            return width * scaleFactor;
                        });
                        if (LanguageId != '1') {
                            columnWidths = columnWidths.reverse();
                        }
                    }
                    else {
                        var getDiff = availableWidth - totalWidth;
                    }
                    var totalWidth2 = columnWidths.reduce(function (acc, width) {
                        return acc + width;
                    }, 0);
                    //--------------------------------

                    if (LanguageId != '1') {
                        ColumnHeaderCell = ColumnHeaderCell.reverse();
                    }
                    columnWidths.forEach(function (value, index) {
                        getCellWidth.push({ 'cellWidth': value });
                        ColumnHeaderCell[index].cellWidth = value;
                    })
                    var pagesize = pdfDoc.internal.pageSize;
                    var pagewidth = pdfDoc.internal.pageSize.width;
                    var startx = pagewidth - 20;
                    var tblX = pdfDoc.internal.pageSize.getWidth() - (totalWidth2 + 30)
                    function dynamicmarginval() {
                        if (lineslength > 1) {
                            topstartval = (3 + (lineslength)) * 28
                        }
                    }
                    dynamicmarginval()
                    var filterval = "Filter : " + FilterName;
                    var filtervallen = pdfDoc.getTextWidth(filterval)
                    var roundval = 0;
                    if (filtervallen > availableWidth) {
                        var topval = availableWidth / filtervallen;
                        roundval = Math.ceil(topval)
                    }
                    if (roundval > 0) {
                        topstartval = (4 + roundval) * 28
                    }
                    if (searchtextval != "") {
                        var filterarabicsecondheader = searchtextval + "منقي" + ":" + FilterName + ", " + "بحث في النص"
                        var filterarabicsecondheaderlen = pdfDoc.getTextWidth(filterarabicsecondheader)
                        if (filterarabicsecondheaderlen > pagewidth - 30) {
                            topstartval = (4 + 1) * 28
                        }
                        else {
                            topstartval = 4 * 28
                        }
                    }
                    pdfDoc.autoTable(ColumnHeaderCell, ColumnBodyDataCell, {
                        theme: 'grid',
                        showHead: 'everyPage',
                        showFoot: 'everyPage',
                        fontStyle: 'Amiri-Bold',
                        rowPageBreak: 'avoid',
                        styles: {
                            halign: LanguageId == '1' ? 'left' : 'right',
                            fontSize: 9,
                            fontStyle: 'Amiri-Bold'
                        },
                        headStyles: {
                            fillColor: '#1c4f80',
                            fontStyle: 'Amiri-Bold',
                            textColor: 'white',
                        },
                        bodyStyles: {
                            textColor: 'black',
                        },
                        columnStyles: getCellWidth,
                        margin: { top: topstartval, left: LanguageId == "1" ? 25 : tblX, right: 0 },
                        horizontalPageBreak: false,
                        horizontalPageBreakBehaviour: 'immediately',
                        didDrawPage: function (data, x, r) {
                            pdfDoc.setFontSize(15);
                            pdfDoc.setTextColor(40);
                            if (LanguageId == '1') {
                                function addheaders(pdfDoc, posY, pagewidth) {
                                    pdfDoc.text('Report Name : Operator Closed Alarm Report', 25, posY);
                                    posY += 25;
                                    pdfDoc.text("Filter : ", 25, posY);
                                    var secondheader = getFilters();
                                    var secondheaderlen = pdfDoc.getTextWidth(secondheader)
                                    if (secondheaderlen > pagewidth - 30) {
                                        posY = addwraptext(pdfDoc, secondheader, 75, posY, pagewidth)
                                    }
                                    else {
                                        pdfDoc.text(secondheader, 75, posY)
                                        posY += 25;
                                    }
                                    pdfDoc.text("Date Range : " + ReportRangeDate, 25, posY);
                                    posY += 25;
                                    return posY
                                }
                                var fonalposy = addheaders(pdfDoc, 25, pagewidth)
                            }
                            else {
                                var rtlReportRangeDate = moment(listdata.params.Todate).format('DD/MM/YYYY') + " - " + moment(listdata.params.Fromdate).format('DD/MM/YYYY');
                                function arabicaddheaders(pdfDoc, posY, pagewidth) {
                                    pdfDoc.text('تقرير اسم : إحصائيات إنذار الدخيل', pagesize.width - pdfDoc.getTextWidth('\rتقرير اسم : إحصائيات إنذار الدخيل') - 25, posY)
                                    posY += 25;
                                    pdfDoc.text(": منقي ", pagesize.width - pdfDoc.getTextWidth('\rمنقي : ') - 25, posY)
                                    if (searchtextval != "") {
                                        function isArabic(searchtextval) {
                                            var arabic = /[\u0600-\u06FF]/
                                            result = arabic.test(searchtextval)
                                            return result
                                        }
                                        if (isArabic(searchtextval)) {
                                            var arabicsecondheader = FilterName + ", " + "بحث في النص" + ": " + searchtextval
                                            var arabicsecondheaderlen = pdfDoc.getTextWidth(arabicsecondheader)
                                            if (arabicsecondheaderlen > pagewidth - 30) {
                                                posY = addwraptext(pdfDoc, arabicsecondheader, 25, posY, pagewidth)

                                            }
                                            else {
                                                pdfDoc.text(FilterName + ", " + "بحث في النص" + ": " + searchtextval, pagesize.width - pdfDoc.getTextWidth(FilterName + ", " + "بحث في النص" + ": " + searchtextval) - 70, posY)
                                                posY += 25;
                                            }
                                        }
                                        else {
                                            var arabicsecondheader = FilterName + searchtextval + ", " + "بحث في النص"
                                            var arabicsecondheaderlen = pdfDoc.getTextWidth(arabicsecondheader)
                                            if (arabicsecondheaderlen > pagewidth - 30) {
                                                posY = addwraptext(pdfDoc, arabicsecondheader, 25, posY, pagewidth)
                                            }
                                            else {
                                                pdfDoc.text(searchtextval + FilterName + ", " + "بحث في النص", pagesize.width - pdfDoc.getTextWidth(searchtextval + FilterName + ", " + "بحث في النص") - 70, posY)
                                                posY += 25;
                                            }
                                        }
                                    }
                                    else {
                                        pdfDoc.text(FilterName, pagesize.width - pdfDoc.getTextWidth(FilterName) - 70, posY)
                                        posY += 25;
                                    }
                                    pdfDoc.text("نطاق الموعد : " + ReportRangeDate, pagesize.width - pdfDoc.getTextWidth("\rنطاق الموعد : " + ReportRangeDate) - 25, posY);
                                    posY += 25;
                                    return posY
                                }
                                var arabicfonalposy = arabicaddheaders(pdfDoc, 25, pagewidth)

                            }
                            var getPages = listdata.init.totRecords / listdata.init.PageSize;
                            if (listdata.init.totRecords % listdata.init.PageSize != 0) {
                                getPages = parseInt(getPages.toString().split('.')[0]) + 1;
                            }
                            pdfDoc.setFontSize(15);
                            pdfDoc.setTextColor(40);
                            let currentPageNum = pdfDoc.internal.getCurrentPageInfo().pageNumber;
                            var str = "Page " + currentPageNum;//doc.internal.getNumberOfPages();

                            if (LanguageId != '1') {
                                str = currentPageNum + " صفحة"
                            }
                            if (typeof pdfDoc.putTotalPages === 'function') {
                            }
                            pdfDoc.setFontSize(9);
                            pdfDoc.setTextColor(40);
                            var pageSize = pdfDoc.internal.pageSize;
                            var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
                            if (LanguageId == '1') {
                                pdfDoc.text(str, 25, pageHeight - 30);
                                pdfDoc.text('Total Records : ' + listdata.init.totRecords, ((pagesize.width / 2) / 2), pageHeight - 30);
                                pdfDoc.text('Printed by : ' + accname, (pagesize.width / 2), pageHeight - 30);
                                pdfDoc.text('Printed on : ' + currDateTimeForexcel, (pagesize.width - pdfDoc.getTextWidth('Printed on : ' + currDateTimeForexcel) - 30), pageHeight - 30);
                            }
                            else {
                                pdfDoc.text('طبع على' + " : " + currDateTimeForexcel, 25, pageHeight - 30);
                                pdfDoc.text(accname + " : " + 'طبع بواسطة', ((pagesize.width / 2) / 2) + (pdfDoc.getTextWidth(accname + " : " + 'طبع بواسطة')), pageHeight - 30);
                                pdfDoc.text(listdata.init.totRecords + " : " + 'إجمالي السجلات', (pagesize.width / 1.5) + pdfDoc.getTextWidth(listdata.init.totRecords + " : " + 'إجمالي السجلات'), pageHeight - 30);
                                pdfDoc.text(str, pagesize.width - pdfDoc.getTextWidth(str) - 30, pageHeight - 30);
                            }
                        },
                    });
                    if (typeof pdfDoc.putTotalPages === 'function') {
                        pdfDoc.putTotalPages(totalPagesExp);
                    }
                    pdfDoc.save(_isData.xl.ReportFileName + ".pdf");
                }
            }
        }
        catch (e) { }
        finally {
            setIsLoadDefault(prev => ({
                ...prev,
                loaderText: "",
                httploader: false
            }))
        }
    }

    // Define the restricted characters regex
    const allowedCharactersKeyPress = /^[\u0600-\u06FFa-zA-Z0-9_\-.,@'()"/\s|]*$/;
    //const allowedCharactersPasteDrop = /[^a-zA-Z0-9_\-\.,@'" /|]/g;
    const allowedSpecialCharacters = '_\-.,@\'" /|';
    /*const allowReg1= /^[a-zA-Z0-9@_\-]*$/*/
    const allowReg1 = /^[a-zA-Z0-9_\-.,@'()"/\s|]*$/
    // Add a keypress event listener to restrict characters
    document.addEventListener("keypress", (event) => {
        if (event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA") {
            const char = String.fromCharCode(event.which || event.keyCode);
            if (allowedSpecialCharacters.includes(char)) {
                if (event.target.value.length === 0) {
                    event.preventDefault();
                }
            }
            if (!allowedCharactersKeyPress.test(char)) {
                event.preventDefault();
            }
        }
    });
    document.removeEventListener('paste', (event) => { (event.clipboardData || window.clipboardData).getData("text") })
    // Add a paste event listener to sanitize pasted content
    document.addEventListener("paste", (event) => {
        if (event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA") {
            const pastedText = (event.clipboardData || window.clipboardData).getData("text");
            if (!allowedCharactersKeyPress.test(pastedText)) {
                event.preventDefault();
            }
        }
        //event.stopImmediatePropagation();
    });
    document.removeEventListener('drop', (event) => { event.dataTransfer.getData("text") })
    document.addEventListener("drop", (event) => {
        if (event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA") {
            const pastedText = event.dataTransfer.getData("text");
            if (!allowedCharactersKeyPress.test(pastedText)) {
                event.preventDefault();
            }
        }
    });

    const handleSrhPst = (evt) => {
        const pstTxt = (evt.clipboardData || window.clipboardData).getData('Text')
        if (!allowReg1.test(pstTxt)) {
            evt.preventDefault();
        }

    }
    const GetUserView = async (id) => {
        try {
            if (!id) {
                throw new Error('Invalid ID provided');
            }

            setListdataview(prev => ({
                ...prev,
                data: [],
                prev: { Id: id }
            }));

            setIsLoadDefault(prev => ({
                ...prev,
                httploader: true,
                isAjxCompleted: false
            }));

            listdataview.prev = { Id: id };
            listdataview.params.Id = id;

            const qrystrview = new URLSearchParams(listdataview.params).toString();
            const result = await customFetch(baseUrl + `Activity/GetUserViewDetails?${qrystrview}`);

            if (!result) {
                throw new Error('No data received from server');
            }

            const getreslt = JSON.parse(result);

            setIsLoadDefault(prev => ({
                ...prev,
                httploader: false,
                isAjxCompleted: true
            }));

            setListdataview(prev => ({
                ...prev,
                data: getreslt
            }));

            if (listdata.data.length > 0) {
                findPageSize();
            }
        } catch (error) {
            console.error('Error in GetUserView:', error);
            setIsLoadDefault(prev => ({
                ...prev,
                httploader: false,
                isAjxCompleted: true
            }));
            setListdataview(prev => ({
                ...prev,
                data: []
            }));
        }
    };
    const handleViewDetails = (selectedActivity) => {
        setSelectedActivity(selectedActivity);
        setIsModalOpen(true);
    };
    const closeModal = () => {
        setIsModalOpen(false);
        setSelectedActivity(null);
    };
    return <section className="listtbl">
        {isLoadDefault.httploader && <div className="page_overlay_loader">
            {isLoadDefault.loaderText != "" && <div className="downloadcontent">{isLoadDefault.loaderText}</div>}
            <i className="fa fa-spinner fa-pulse"></i>
        </div>}
        {columnChoosepop && <div className="columnchooser newcolumn" id="column-chooser">
            <div className="column-chooser-container">
                <div className="column-chooser-parant">
                    <div className="column-chooser-head">
                        <span className="eqadd-column-text">{_isData.str.lbl_Customizecolumns}</span>
                        <span className="mi mi-close column-close-icon" data-tooltip={_isData.str.lbl_close} data-tooltip-z-index="99999" onClick={e => setcolumnChoosepop(false)}></span>
                    </div>
                    <div className="columnchooser-content scrollable-y">
                        <ul className="column-list">
                            <li className="column-list-content">
                                <div className="checkbox">
                                    <span className="dragIMAGE"></span>
                                    <input type="checkbox" className="rowcheck rowcheckselect" onChange={handleonAllcolumnCheckbox(hiddencolumns)} ref={checkboxColumnRef} />
                                </div>
                                <span className="col-label select-label">{_isData.str.lbl_selectAll}</span>
                            </li>
                            {hiddencolumns.map((item, index) => (
                                <li key={index} className={`column-list-content column-lists ${checkedColClass[item.kye] ? 'checked-row' : 'unchecked-row'}`}>
                                    <div className="table-mul-data">
                                        <span className="first-letter">{item.headTxt.charAt(0)}</span>
                                        <div className="checkbox">
                                            <input type="checkbox" className="rowcheck" checked={checkedColClass[item.kye]} onChange={handleoncolumnCheckbox(item.kye)} />
                                        </div>
                                    </div>
                                    <div className="collabel-contaeinr" onClick={e => toggleColumnInVisibility(item.kye, index)}>
                                        <span className="col-label">{item.headTxt}</span>
                                        <span className="col-icon"><span className="mi mi-close" data-tooltip={_isData.str.lbl_cancel} data-tooltip-z-index="99999" ></span></span>
                                    </div>
                                </li>))}
                        </ul>
                    </div>
                    <div className="columnchooser-footer">
                        <button className="title-button buttons" onClick={() => applyColumnChooser()}>
                            <span className="button-icon">
                                <span className="mi mi-check"></span>
                            </span>
                            <span className="button-text">{_isData.str.lbl_Applycolumns}</span>
                        </button>
                    </div>
                </div>
            </div>
        </div>}
        <header className="ia-header">
            <div className="header-left">
                <div className="opttoggle" onClick={() => togmenu()}>
                    <span className="opttoggle-ic" data-tooltip={_isData.str.lbl_toggle}></span>
                </div>
                <div className="ia-title">
                    <span className="notarmed-icon"></span>
                    <h1 className="ia-title-text">{_isData.xl.ExcelReportField}</h1>
                </div>
            </div>
            <div className="report-filtersection">
                <div className="ip-filter-dropdown ia-datepicker" ref={Overalldata.DateRange}>
                    <span className="ia-filter-title">{_isData.dt.lbl_selectedRange}</span>
                    <div className="ia-filter-box">
                        <div className="datepicker-icon"></div>
                        <input type="text" autoComplete="off" placeholder="" id="historydateRange" name="historydateRange" className="due ip form-control date-picker ia-filter-searchbox" readOnly />
                        <span className="fa fa-angle-down filterdrp-icon"></span>
                    </div>
                </div>

                <div className="ip-filter-dropdown ia-list-search">
                    <span className="searchicon-container tooltipsterEle" data-tooltip={_isData.str.lbl_SearchTxt}></span>
                    <input className="ia-search-box alphaengarab" id="srcEle" data-allowed='^[a-zA-Z0-9]*$'
                        onChange={e => listFromSrchTxt(event, 'srch')}
                        autoComplete="off" placeholder={_isData.str.lbl_Search} type="text" />
                    {listdata.params.searchText != '' && <svg className="filterdrp-icon filterdrp-icon-1 tooltipsterEle ng-tooltipster" data-tooltip={_isData.str.lbl_close} data-tooltip-z-index="9" onClick={e => listFromSrchTxt(event, 'clrSrch')} height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none" /><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" /></svg>}
                </div>
            </div>
            <div className="ia-header-status">
                <div className="ia-box" style={{ display: "none" }}>
                    <span className="ia-sub-title-text">Integrator</span>
                    <div className="ia-int-content">
                        <span className="headintegrator-ic"></span>
                        <span className="int-count reason-tooltip">{countInfo.integator.count}</span>
                    </div>
                </div>
                <div className="header-status-detials" style={{ display: "none" }}>
                    <div className="ia-count-details">
                        <div className={`ia-count-status ${isLoadDefault.isLoad == 'all' ? "select-cat" : ''}`} onClick={() => isLoadPageInfo('all')}><span></span>
                            <span className="ia-status-text ">All</span>
                            <span className="ia-tot-count reason-tooltip">{countInfo.all.count}</span>
                        </div>
                        <div className="ia-count-detail">
                            <div className="ia-count-drop-down">
                                {countInfo.all.isonline && <>
                                    <span className="ia-ct reason-tooltip" >{countInfo.all.online}</span>
                                    <span className="ia-ct-text all">Online</span>
                                </>}
                                {!countInfo.all.isonline && <>
                                    <span className="ia-ct reason-tooltip" >{countInfo.all.offline}</span>
                                    <span className="ia-ct-text all">Offline</span>
                                </>}
                                <span className="fa fa-angle-down drp-it-icon"></span>
                                <div className="ia-count-drp">
                                    {!countInfo.all.isonline && <>
                                        <span className="ia-drp-text" onClick={() => changeCount('All')}>
                                            <span className="ia-ct reason-tooltip">{countInfo.all.online}</span>
                                            <span>Online</span>
                                        </span></>}
                                    {countInfo.all.isonline && <>
                                        <span className="ia-drp-text" onClick={() => changeCount('All')}>
                                            <span className="ia-ct reason-tooltip">{countInfo.all.offline}</span>
                                            <span>Offline</span>
                                        </span></>}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="ia-count-details">
                        <div className={`ia-count-status ${isLoadDefault.isLoad == 'site' ? "select-cat" : ''}`} onClick={() => isLoadPageInfo('site')}>
                            <span className="cat-icon site-cat custom-icon"></span>
                            <span className="ia-status-text ">Site</span>
                            <span className="ia-tot-count reason-tooltip">{countInfo.site.count}</span>
                        </div>
                        <div className="ia-count-detail">
                            <div className="ia-count-drop-down">
                                {countInfo.site.isonline && <>
                                    <span className="ia-ct reason-tooltip">{countInfo.site.online}</span>
                                    <span className="ia-ct-text all">Online</span>
                                </>}
                                {!countInfo.site.isonline && <>
                                    <span className="ia-ct reason-tooltip" >{countInfo.site.offline}</span>
                                    <span className="ia-ct-text all">Offline</span>
                                </>}
                                <span className="fa fa-angle-down drp-it-icon"></span>
                                <div className="ia-count-drp">
                                    {!countInfo.site.isonline && <>
                                        <span className="ia-drp-text" onClick={() => changeCount('Site')}>
                                            <span className="ia-ct reason-tooltip">{countInfo.site.online}</span>
                                            <span>Online</span>
                                        </span></>}
                                    {countInfo.site.isonline && <>
                                        <span className="ia-drp-text" onClick={() => changeCount('Site')}>
                                            <span className="ia-ct reason-tooltip">{countInfo.site.offline}</span>
                                            <span>Offline</span>
                                        </span></>}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="ia-count-details">
                        <div className={`ia-count-status ${isLoadDefault.isLoad == 'building' ? " select-cat" : ''}`} onClick={() => isLoadPageInfo('building')}>
                            <span className="cat-icon bul-cat custom-icon"></span>
                            <span className="ia-status-text ">Building</span>
                            <span className="ia-tot-count reason-tooltip">{countInfo.building.count}</span>
                        </div>
                        <div className="ia-count-detail">
                            <div className="ia-count-drop-down">
                                {countInfo.building.isonline && <>
                                    <span className="ia-ct reason-tooltip">{countInfo.building.online}</span>
                                    <span className="ia-ct-text all">Online</span>
                                </>}
                                {!countInfo.building.isonline && <>
                                    <span className="ia-ct reason-tooltip" >{countInfo.building.offline}</span>
                                    <span className="ia-ct-text all">Offline</span>
                                </>}
                                <span className="fa fa-angle-down drp-it-icon"></span>
                                <div className="ia-count-drp">
                                    {!countInfo.building.isonline && <>
                                        <span className="ia-drp-text" onClick={() => changeCount('Building')}>
                                            <span className="ia-ct reason-tooltip">{countInfo.building.online}</span>
                                            <span>Online</span>
                                        </span></>}
                                    {countInfo.building.isonline && <>
                                        <span className="ia-drp-text" onClick={() => changeCount('Building')}>
                                            <span className="ia-ct reason-tooltip">{countInfo.building.offline}</span>
                                            <span>Offline</span>
                                        </span></>}
                                </div>
                            </div>
                        </div>
                    </div>
                    <div className="header-status-detials-1 ">
                        <div className="ia-count-details ia-ippanel">
                            <div className="ia-count-status">
                                <span className="cat-icon ippanel-cat custom-icon"></span>
                                <span className="ia-status-text ">Ip Panel</span>
                                <span className="ia-tot-count reason-tooltip">{countInfo.ippanel.count}</span>
                            </div>
                            <div className="ia-count-detail">
                                <div className="ia-count-drop-down">
                                    {countInfo.ippanel.isonline && <>
                                        <span className="ia-ct reason-tooltip">{countInfo.ippanel.online}</span>
                                        <span className="ia-ct-text all">Online</span>
                                    </>}
                                    {!countInfo.ippanel.isonline && <>
                                        <span className="ia-ct reason-tooltip" >{countInfo.ippanel.offline}</span>
                                        <span className="ia-ct-text all">Offline</span>
                                    </>}
                                    <span className="fa fa-angle-down drp-it-icon"></span>
                                    <div className="ia-count-drp">
                                        {!countInfo.ippanel.isonline && <>
                                            <span className="ia-drp-text" onClick={() => changeCount('IPPanel')}>
                                                <span className="ia-ct reason-tooltip">{countInfo.ippanel.online}</span>
                                                <span>Online</span>
                                            </span></>}
                                        {countInfo.ippanel.isonline && <>
                                            <span className="ia-drp-text" onClick={() => changeCount('IPPanel')}>
                                                <span className="ia-ct reason-tooltip">{countInfo.ippanel.offline}</span>
                                                <span>Offline</span>
                                            </span></>}
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className="ia-actions ia-list-action" >
                    <div className={`ia-act ia-act-list ${listdata.data.length < 1 ? 'no-record' : ''}`}
                        data-tooltip={_isData.str.lbl_downloadExcel} onClick={() => ListExcelDownload()}>
                        <span className="excelic tooltipsterEle"></span>
                    </div>
                    <div style={{ display: 'none' }} className={`ia-act ia-act-list ${listdata.data.length < 1 ? 'no-record' : ''}`}
                        data-tooltip={_isData.str.lbl_downloadPdf} onClick={() => ListPDFDownload()}>
                        <span className="pdfic tooltipsterEle"></span>
                    </div>
                    <div className="ia-act ia-act-list iamenuic" style={{ display: 'none' }}>
                        <span className="headmenuic"></span>
                        <div className="report-submenu-drp">
                            <div className="report-drp-in">
                                <div className="menu-box menuboxactive">
                                    <div className="report-menu-ic">
                                        <span className="op-cls-rep"></span>
                                    </div>
                                    <div className="report-menu-txt">
                                        <span>{_isData.xl.ExcelReportField}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </header>

        <div className={`tbl-container ${hiddencolumns.length > 0 ? 'addedcolumnchoose' : ''}`}>
            {hiddencolumns.length > 0 && <div className="column-chooser" data-tooltip={_isData.str.lbl_addColumn} onClick={e => colChooserOpen()}><span className="fa fa-ellipsis-v tool-icon"></span></div>}
            <div className="table-container scrollable-y">
                {tableHeader == true && <div className="alt-table-header">
                    <div className="alt-table-left">
                        <input type="checkbox" className="rowcheck" onChange={handleonChangeAllCheckbox(listdata.data)} ref={checkboxHeaderRef} />
                        <div className="select-options">
                            <span className="fa fa-caret-down dropdown-icon"></span>
                            <div className="select-popup">
                                <div className="select-all option">All</div>
                                <div className="select-none option">None</div>
                            </div>
                        </div>
                        <span>{selectionCount} Selected</span>
                    </div>
                    <div className="alt-table-right">
                        <div className="alt-table-options">
                            <span className="fa fa-ellipsis-v tool-icon"></span>
                            <div className="apply-options-popup">
                                <div className="apply-all option" onClick={() => RenderPartialPage('AddpopupList', '')}>Edit</div>
                                <div className="apply-selected option" onClick={() => RenderPartialPop('Confirmsuccessfailurescript', 'confirm')}>Delete</div>
                            </div>
                        </div>
                    </div>
                </div>}
                <table className="list-table">
                    <thead className="tbl-head">
                        <tr className="tbl-headrow">
                            {columns.map((col, index) => col.visible && <>

                                {col.kye != 'CT' && <th className="tbl-headdata" key={index} style={{ "minWidth": col.minW + "px", "maxWidth": col.minW + "px" }}
                                    draggable dragdata={col.kye} dragminw={col.minW} dragpdfw={col.pdfW}
                                    onDragStart={(e) => handleDragStart(e, index)} onDrop={(e) => handleDrop(e, index)} onDragOver={handleDragOver}>
                                    <span className="tbl-headlbl" data-tooltip={col.headTxt} data-tooltip-ellipsis-only="true" data-tooltip-z-index="9">{col.headTxt}</span>
                                    <div className="header-icon" data-tooltip={_isData.str.lbl_RemovethisColumn} >
                                        <span className="md-icon-button colum-close tool-icon" type="button" onClick={() => toggleColumnVisibility(col.kye)}>
                                            <svg width="20" height="20" viewBox="0 0 24 24" className="svg-gray-light"><path d="M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.59-13L12 10.59 8.41 7 7 8.41 10.59 12 7 15.59 8.41 17 12 13.41 15.59 17 17 15.59 13.41 12 17 8.41z"></path></svg>
                                        </span>
                                        <span className="fa fa-filter filter-icon tool-icon" role="button"></span>
                                    </div>
                                </th>}
                            </>)}
                        </tr>
                    </thead>
                    <tbody className="tbl-body">
                        {listdata.data.map((row, rowIndex) => (
                            <tr key={rowIndex} className={`tbl-bodyrow ${checkedClass[row.id] ? 'checked-row' : 'unchecked-row'}`}>
                                {columns.map((col, index) => col.visible && <>
                                    {col.kye == 'actiondetails' && <td className="tbl-bodydata" check-overflow="" data-tooltip={row[col.kye]} data-tooltip-ellipsis-only="true">
                                        <div style={{ display: "none" }}>{(row[col.kye] != '' && row[col.kye] != null && row[col.kye] != undefined) ? row[col.kye] : ''}</div>
                                        <i onClick={() => handleViewDetails(row)} className="view-button fa fa-eye" title={_isData.actpop.vad} data-tooltip={_isData.actpop.vad}></i>
                                    </td>}
                                    {col.kye == 'action' && <td className="tbl-bodydata" check-overflow="" data-tooltip={row[col.kye]} data-tooltip-ellipsis-only="true">
                                        <div data-tooltip={row[col.kye]} data-tooltip-ellipsis-only="true" className="ellipsis-text tbltd actdes">{(row[col.kye] != '' && row[col.kye] != null && row[col.kye] != undefined) ?
                                            row[col.kye] : ''}</div></td>}
                                    {col.kye == 'activitydescription' && <td className="tbl-bodydata" check-overflow="" data-tooltip={row[col.kye]} data-tooltip-ellipsis-only="true">
                                        <div data-tooltip={row[col.kye]} data-tooltip-ellipsis-only="true" className="ellipsis-text tbltd actdes">{(row[col.kye] != '' && row[col.kye] != null && row[col.kye] != undefined) ?
                                            row[col.kye] : ''}</div></td>}
                                    {col.kye != 'actiondetails' && col.kye != 'activitydescription' && col.kye != 'action' && <td className="tbl-bodydata" check-overflow="" data-tooltip={row[col.kye]} data-tooltip-ellipsis-only="true">
                                        <div data-tooltip={row[col.kye]} data-tooltip-ellipsis-only="true" className="ellipsis-text tbltd">{(row[col.kye] != '' && row[col.kye] != null && row[col.kye] != undefined) ?
                                            row[col.kye] : ''}</div></td>}
                                </>)}
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
            {listdata.data.length > 0 && isLoadDefault.isAjxCompleted == true && <div className="table-pagination">
                {true && <div className="page-count-content">
                    <span>
                        <span>{_isData.str.lbl_Itemsperpage}</span>
                        <span className="select-value" id="select_value_label_0">
                            <span>
                                <span className="selectedtext">{listdata.init.PageSize}</span>
                            </span>
                            <span className="selectedicon">
                                <i className="fa fa-caret-down"></i>
                            </span>
                            <div className="ia-filter-content" onClick={event.stopImmediatePropagation()}>
                                {<div className="select-site-bul select-site-bul_int scrollable-y scrollable-show">
                                    {listdata.init.pgSize.data.map((Data, index) => (<>
                                        <div className={`site-bul-details ${Data.isSelected == true ? 'isActive' : ''}`} key={Data.id} onClick={(e) => goToPage('pageSize', "", Data.id)}>
                                            <span className="site-bul-text ngTooltipsterEllipsis">{Data.id}</span>
                                        </div>
                                    </>))}
                                </div>}
                            </div>
                        </span>
                    </span>

                </div>}
                <div className="pagination_container">
                    <span className="content content_one"><span>{_isData.pg.lbl_page}</span><span> {listdata.init.PageNo}</span>
                        <span> {_isData.pg.lbl_of}</span> <span>{listdata.init.TotPages}</span></span>
                    <span className="content content_two"><span>{_isData.pg.lbl_showingResult}</span> <span>{listdata.init.previouscount}</span> <span> - </span> <span>{listdata.init.nextcount}</span> <span> {_isData.pg.lbl_of} </span> <span>{listdata.init.totRecords}</span> <span> {_isData.pg.lbl_items}</span></span>
                    <div className="page_btn">
                        <div className="page_container">
                            <span className={`list_page_container ${listdata.init.PageNo == 1 ? '_disableBtn' : ''}`}>
                                <i className="fa fa-angle-double-left list_page_btn tooltipsterEle" data-tooltip={_isData.pg.lbl_Gotothefirstpage} onClick={(event) => goToPage('isFirst', 1)}></i>
                            </span>
                            <span className={`list_page_container ${listdata.init.PageNo == 1 ? '_disableBtn' : ''}`}>
                                <i className="fa fa-angle-left list_page_btn tooltipsterEle" data-tooltip={_isData.pg.lbl_Gotothepreviouspage} onClick={(event) => goToPage('isPrev', '')}></i>
                            </span>
                            {listdata.init.pageCounts.currArrPage > 1 && <span className="list_page_container">
                                <span className="list-pg-num-text" onClick={(event) => goToPage('isPrevPgRange', '')}>...</span>
                            </span>}
                            {listdata.init.pageCounts.data.map(item => (
                                <span key={item.id} className={`list_page_container  ${item.isSelected ? 'page_btn_active' : ''}`} onClick={(event) => goToPage('isPageCnt', item.id)}>
                                    <span className="list-pg-num-text">{item.txt}</span>
                                </span>
                            ))}
                            {listdata.init.pageCounts.currArrPage < listdata.init.pageCounts.currArrTotal && <span className="list_page_container">
                                <span className="list-pg-num-text" onClick={(event) => goToPage('isNextPgRange', '')}>...</span>
                            </span>}
                            <span className={`list_page_container ${listdata.init.PageNo == listdata.init.TotPages ? '_disableBtn' : ''}`}>
                                <i className="fa fa-angle-right list_page_btn tooltipsterEle" data-tooltip={_isData.pg.lbl_Gotothenextpage} onClick={(event) => goToPage('isNext', '')}></i>
                            </span>
                            <span className={`list_page_container ${listdata.init.PageNo == listdata.init.TotPages ? '_disableBtn' : ''}`}>
                                <i className="fa fa-angle-double-right list_page_btn list-btn-last tooltipsterEle" data-tooltip={_isData.pg.lbl_Gotothelastpage} onClick={(event) => goToPage('isLast', listdata.init.TotPages)}></i>
                            </span>
                        </div>
                    </div>
                </div>
            </div>}
            {isModalOpen && (
                <div className="modal-overlay">
                    <div className="modal-content">
                        <div className="modal-header">
                            <h2>{_isData.actpop.hd}</h2>
                            <button title={_isData.actpop.clse} data-tooltip={_isData.actpop.clse} className="close-button" onClick={closeModal}>&times;</button>
                        </div>
                        <div className="modal-body">
                            {selectedActivity && (
                                <div className="activity-details scrollable-y">
                                    <div className="sub-activity-details">
                                        <div className="detaln"><p><strong>{_isData.actpop.atm}</strong> </p><div><strong>:</strong></div><div data-tooltip={selectedActivity.timestamp.length > 30 ? selectedActivity.timestamp : null}>{selectedActivity.timestamp}</div></div>
                                        <div className="detaln"><p><strong>{_isData.actpop.mod}</strong> </p><div><strong>:</strong></div><div data-tooltip={selectedActivity.controller.length > 30 ? selectedActivity.controller : null}>{selectedActivity.controller}</div></div>
                                        <div className="detaln"><p> <strong>{_isData.actpop.submod}</strong> </p><div><strong>:</strong></div><div data-tooltip={selectedActivity.action.length > 30 ? selectedActivity.action : null}>{selectedActivity.action}</div></div>
                                        <div className="detaln"><p><strong>{_isData.actpop.usrnme}</strong> </p><div><strong>:</strong></div><div data-tooltip={selectedActivity.username.length > 30 ? selectedActivity.username : null}>{selectedActivity.username}</div></div>
                                    </div>
                                    <div className="sub-activity-details">
                                        <div className="detaln"><p><strong>{_isData.actpop.UT}</strong> </p><div><strong>:</strong></div><div data-tooltip={selectedActivity.UT.length > 30 ? selectedActivity.UT : null}>{selectedActivity.UT}</div></div>
                                        <div className="detaln"><p><strong>{_isData.actpop.IPA}</strong> </p><div><strong>:</strong></div><div data-tooltip={selectedActivity.ipaddress.length > 30 ? selectedActivity.ipaddress : null}>{selectedActivity.ipaddress}</div></div>
                                        <div className="detaln detaln-last"><p className="actdet"><strong>{_isData.actpop.actdet}</strong> </p><div><strong>:</strong></div><div data-tooltip={selectedActivity.activitydescription.length > 30 ? selectedActivity.activitydescription : null}>{selectedActivity.activitydescription}</div></div>
                                    </div>
                                </div>
                            )}
                            {selectedActivity && (
                                <div className="activity-param">
                                    <div className="activity-param-tit">
                                        <p>{_isData.actpop.subhd}</p>
                                    </div>
                                    <div className="activity-param-cont scrollable-y">
                                        <div>
                                            {(() => {
                                                if (!selectedActivity.actiondetails) {
                                                    return <p>{_isData.actpop.nod}</p>;
                                                }
                                                try {
                                                    const actionDetails = JSON.parse(selectedActivity.actiondetails);
                                                    if (Object.keys(actionDetails).length === 0) {
                                                        return <p>{_isData.actpop.nod}</p>;
                                                    }
                                                    return Object.entries(actionDetails).map(([key, value]) => (
                                                        <div className="detaln">
                                                            <p key={key}
                                                                data-placement="top" data-tooltip={key.length > 20 ? key : null}>
                                                                <strong>{key}</strong>
                                                            </p>
                                                            <div><strong>:</strong></div>
                                                            <div>
                                                                {typeof value === 'object' ? (
                                                                    (() => {
                                                                        try {
                                                                            let keysToClear = Object.keys(value).filter(function (key) {
                                                                                return value[key] == "0001-01-01T00:00:00";
                                                                            });
                                                                            keysToClear.forEach(function (key) {
                                                                                value[key] = '';
                                                                            });
                                                                            // Remove dollar symbols and format the value
                                                                            return JSON.stringify(value, null, 2)
                                                                            [str_rplc](/[{}\[\]"]/g, '')  // Remove brackets and quotes
                                                                                .split('\n')
                                                                                .map(line => line.trim())
                                                                                .filter(line => line)  // Remove empty lines
                                                                                .join(' ');
                                                                        } catch (e) {
                                                                            return JSON.stringify(value)[str_rplc](/"/g, '')  // Remove quotes from fallback
                                                                            [str_rplc](/\$/g, '');  // Remove dollar symbols from the fallback
                                                                        }
                                                                    })()
                                                                ) : (
                                                                        String(value)[str_rplc](/[{}\[\]"\$]/g, '')  // Remove dollar symbols from the value
                                                                )}
                                                            </div>
                                                        </div>
                                                    ));
                                                } catch (e) {
                                                    return selectedActivity.actiondetails ?
                                                        <p>{selectedActivity.actiondetails}</p> :
                                                        <p>{_isData.actpop.nod}</p>;
                                                }
                                            })()}
                                        </div>
                                        {/*{*/}
                                        {/*    Object.entries(JSON.parse(selectedActivity.action_details)).map(([key, value]) => {*/}
                                        {/*        <div key={key}>*/}
                                        {/*            <p><strong>{key}:</strong> {value}</p>*/}
                                        {/*        </div>*/}
                                        {/*    })*/}
                                        {/*}*/}
                                    </div>
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            )}
            {listdata.data.length < 1 && isLoadDefault.isAjxCompleted == true && <div className='noRecordParent'>
                <div className='noRecordChild'>
                    <div className="nodata-icon">
                        <img className='nodata-icon-img' src={`${baseUrl}/Themes/Greeno/images/dashboard/no-data-found.png`} />
                    </div>
                    <span>{_isData.str.nrds}</span>
                </div></div>}
        </div>
    </section>
}