inboxlookup_screen 1.0.2

package/src/components/Service/OrdersMasterDetail.js

@@ -0,0 +1,1123 @@
+import List from "devextreme-react/list";
+import "./OrdersMasterDetail.css";
+import axios from "axios";
+import React, { useState, useRef, useEffect, useCallback } from 'react';
+import DataGrid, {
+    Selection, Scrolling, Summary,
+    TotalItem, Grouping,
+    GroupPanel, Toolbar,
+    Item,
+    GroupItem, HeaderFilter, FilterRow,
+} from 'devextreme-react/data-grid';
+import Button from 'devextreme-react/button';  // <-- THIS import MUST be here
+import CustomStore from 'devextreme/data/custom_store';
+import Popup from 'devextreme-react/popup';
+import 'devextreme/dist/css/dx.light.css';
+
+
+const STORAGE_KEY = "ORDERS_MASTER_DETAIL_SEARCH_HISTORY";
+const DEFAULT_SERVICE = {
+    CustomerId: 10,
+    projectId: 147,
+    id: 4,      // any unique id for the list
+    status: "Active" // optional for left list rendering
+};
+
+const token = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiIwMDAwMDAwMy0wMDAwLTAwMDAtYzAwMC0wMDAwMDAwMDAwMDAiLCJpc3MiOiJodHRwczovL3N0cy53aW5kb3dzLm5ldC9lNjZmMWU2Yi05Y2I5LTQyNTgtYTQyOS0xNzhjZWUzNTlhYTkvIiwiaWF0IjoxNzQ3NjI2MDM0LCJuYmYiOjE3NDc2MjYwMzQsImV4cCI6MTc0NzYyOTk1MCwiYWNjdCI6MCwiYWNyIjoiMSIsImFjcnMiOlsicDEiXSwiYWlvIjoiQVpRQWEvOFpBQUFBbGJ3R3dWeVZteXA3THJKZ0ZiRUFzTFhGQ3ZDRE9mOVBHRFZmVkhDTVIyTU9PVkUyaXNOdmtPVG9JWmdZSXg2Yi9tQkYyYnVTUmwrVW5jZVFkZ3E1RVlFSDNGWmFRYkxOMGFZK05YV2l2d2pLakdzcEJkQVREQTE3WDduQ0pmS0k5RUVtNVczTnFLNXY2QUdlZnpZRzBXMkp5d1pueVhwbVBSaEpZREpGbFdzaE9OWk1XSVNQaVdjN05Fb3gvc1IrIiwiYW1yIjpbInB3ZCIsIm1mYSJdLCJhcHBfZGlzcGxheW5hbWUiOiJmbG93LVNTTy1pbnRlZ3JhdGlvbiIsImFwcGlkIjoiOTAwN2UyYzQtM2VlOS00MWQ4LWJlNzEtM2FiZGQ0ZTc5MzIxIiwiYXBwaWRhY3IiOiIxIiwiZmFtaWx5X25hbWUiOiJNIiwiZ2l2ZW5fbmFtZSI6IkdhbnRoaW1hdGhpIiwiaWR0eXAiOiJ1c2VyIiwiaXBhZGRyIjoiMTU3LjUxLjEyNS43NSIsIm5hbWUiOiJHYW50aGltYXRoaSBNIiwib2lkIjoiNmJkNDZkNGEtNGM0ZS00Y2RlLWI5MDItNTJlN2FkYzE5NGRmIiwib25wcmVtX3NpZCI6IlMtMS01LTIxLTE3NzEzODE2ODEtMjQ0NzgzODAwMi0zNTE0ODIwOTgxLTE3MjA3OCIsInBsYXRmIjoiNSIsInB1aWQiOiIxMDAzMjAwMjJDMDlEQzgyIiwicmgiOiIxLkFWTUFheDV2NXJtY1dFS2tLUmVNN2pXYXFRTUFBQUFBQUFBQXdBQUFBQUFBQUFCVEFIeFRBQS4iLCJzY3AiOiJEaXJlY3RvcnkuUmVhZC5BbGwgVXNlci5SZWFkIFVzZXIuUmVhZC5BbGwgcHJvZmlsZSBvcGVuaWQgZW1haWwiLCJzaWQiOiIwMDRmMzk1OS0wYjE5LWZhMjUtNGUyNS0zNDI0MWU0NjljZTkiLCJzdWIiOiItV1gtSXQ5NGFDaUozN1l6UEszemdXYWxTYS1MMmJ4MDhsempxUzEyb1JRIiwidGVuYW50X3JlZ2lvbl9zY29wZSI6IkFTIiwidGlkIjoiZTY2ZjFlNmItOWNiOS00MjU4LWE0MjktMTc4Y2VlMzU5YWE5IiwidW5pcXVlX25hbWUiOiJnYW50aGltYXRoaS5tQGFjY2Vzc2hlYWx0aGNhcmUuY29tIiwidXBuIjoiZ2FudGhpbWF0aGkubUBhY2Nlc3NoZWFsdGhjYXJlLmNvbSIsInV0aSI6IjlfZDJSOGJjRFVlZERaeFdJaHdvQUEiLCJ2ZXIiOiIxLjAiLCJ3aWRzIjpbImI3OWZiZjRkLTNlZjktNDY4OS04MTQzLTc2YjE5NGU4NTUwOSJdLCJ4bXNfZnRkIjoiSVFudjZvNlNiS1FUbEpIT05mV1FXQWFxWW9XUHRnMmFoM19lX1VpbjlHa0JhMjl5WldGemIzVjBhQzFrYzIxeiIsInhtc19pZHJlbCI6IjEgMjIiLCJ4bXNfc3QiOnsic3ViIjoiQ2hwWms3bVpSX2N3UGdVUnV4ZndTb0tVQkVMNlJCaWZxMkJ5c1RhSTFyZyJ9LCJ4bXNfdGNkdCI6MTQwMTQ2MzYyNSwiVXNlclR5cGUiOjEsIlVzZXJJZCI6Nzc3NzIsIkVtcElkIjoiTTA5NDgwNTciLCJFbWFpbElkIjoiZ2FudGhpbWF0aGkubUBhY2Nlc3NoZWFsdGhjYXJlLmNvbSIsIk5hbWUiOiJHYW50aGltYXRoaSBNIiwiQXBwS2V5IjoiMjllMWEyYTAtOGU0My00NDNhLTk4MDQtMTM3MGIwN2I3ZWRkIiwiU2Vzc2lvbklkIjoiMGM5NzU3ZjktYTA1OC00MWE1LWE5M2YtOWY5MTZhMWU2ZmQxIiwiSWFtVVJMIjoiaHR0cHM6Ly91YXRfaWFtYXBpLmFjY2Vzc2hlYWx0aGNhcmUuY29tL2FwaSJ9.YPFSayPCfTBDaB2vEHhwR3TnvvstT5G3z3yIWYny_Sc'; // Replace with your token
+const getFieldMetaAPI = (sheetId) =>
+    `http://localhost:5017/api/excel-sheets/${sheetId}/columns`;
+
+let lastAppliedFilter = null;
+
+const OrdersMasterDetail = ({ dataSource, keyExpr }) => {
+    const [orders, setOrders] = useState([]);
+    const [selectedOrder, setSelectedOrder] = useState(null);
+    const [selectedService, setSelectedService] = useState(DEFAULT_SERVICE);
+    const saveButtonRef = useRef(null);
+    const [rowDetailsVisible, setRowDetailsVisible] = useState(false);
+    const [selectedRow, setSelectedRow] = useState(null);
+    const [searchPopupVisible, setSearchPopupVisible] = useState(false);
+    const [searchText, setSearchText] = useState("");
+    const [category, setCategory] = useState(0);
+    const [status, setStatus] = useState(0);
+    const [filteredOrders, setFilteredOrders] = useState([]);
+    const [gridData, setGridData] = useState([]);
+    const searchTimeoutRef = useRef(null);
+    const [gridStore, setGridStore] = useState(null);
+
+    const gridRef = useRef(null);
+    const [selectedRowKeys, setSelectedRowKeys] = useState([]);
+    const [selectAll, setSelectAll] = useState(false);
+    const [excludedKeys, setExcludedKeys] = useState([]);
+    const [columns, setColumns] = useState([]);
+    const [showCheckboxes, setShowCheckboxes] = useState(true);
+    const [finalCount, setFinalCount] = useState(0);
+    const [wasFullyDeselected, setWasFullyDeselected] = useState(false);
+    const [readOnlyFilters, setReadOnlyFilters] = useState(false);
+    const [gridInstance, setGridInstance] = useState(null);
+    const [autoExpandAll, setAutoExpandAll] = useState(true);
+    const [popupVisible, setPopupVisible] = useState(false);
+    const [actionValue, setActionValue] = useState(null);
+    const [assignPopupVisible, setAssignPopupVisible] = useState(false);
+    const [proceedEnabled, setProceedEnabled] = useState(false); // ✅ NEW: control button enabled state
+    const [popupSummary, setPopupSummary] = useState({
+        type: '',
+        count: 0,
+        ids: [],
+        filters: []
+    });
+
+    // ✅ Toast state
+    const [toastConfig, setToastConfig] = useState({
+        isVisible: false,
+        type: 'info',
+        message: '',
+    });
+
+    // RIGHT SIDE SEARCH
+    const [gridSearchText, setGridSearchText] = useState("");
+    const [searchHistory, setSearchHistory] = useState([]);
+    const searchHistoryRef = useRef([]);
+
+
+    useEffect(() => {
+        if (!selectedService) return; // do nothing if no service is selected
+
+        const { projectId } = selectedService;
+
+        axios.get(`http://localhost:5017/api/excel-sheets/latest-sheets/${projectId}`,)
+            .then(response => {
+                const data = response.data.map(item => ({
+                    id: item.Id,
+                    sheetName: item.SheetName,
+                    fileId: item.FileId,
+                    ProjectId: item.ProjectId,
+                    status: "Active" // optional UI status
+                }));
+                setOrders(data);
+                setFilteredOrders(data);   // ✅ show ALL by default
+                // setSelectedOrder(data.length ? data[0] : null);
+
+            })
+            .catch(error => {
+                console.error("Failed to load orders", error);
+                setOrders([]);
+            });
+
+    }, []);
+
+    useEffect(() => {
+        if (!orders) return;
+        const openLastViewedSheet = async () => {
+            try {
+                const res = await axios.get(
+                    "http://localhost:5017/api/excel-sheets/last-viewed",
+                    {
+                        params: {
+                            userId: 1,
+                            projectId: 147   // ✅ FIXED (do NOT read from selectedService)
+                        }
+                    }
+                );
+
+                const lastViewedSheetId = res?.data;
+                if (!lastViewedSheetId) return;
+
+                const sheet = orders.find(o => o.id === lastViewedSheetId);
+
+                if (!sheet) return;
+                // ✅ EXACT SAME FLOW AS MANUAL CLICK
+                setSelectedOrder(sheet);
+                setSelectedService(sheet);
+
+                await loadColumns(sheet.id);
+
+                gridInstance.pageIndex(0);
+                gridInstance.clearSelection();
+                gridInstance.searchByText("");
+
+                setGridStore(createStore(sheet.id));
+                setSearchText("");
+
+            } catch (err) {
+                console.error("Auto open failed", err);
+            }
+        };
+
+        openLastViewedSheet();
+    }, [orders]);
+
+
+    const createStore = (sheetId) =>
+        new CustomStore({
+            key: "RowNumber",
+            async load(loadOptions) {
+                loadOptions.requireTotalCount = true;
+
+                const paramNames = [
+                    "skip",
+                    "take",
+                    "requireTotalCount",
+                    "requireGroupCount",
+                    "sort",
+                    "filter",
+                    "searchValue",
+                    "searchExpr",
+                    "searchOperation",
+                    "group",
+                    "groupSummary",
+                    "totalSummary"
+                ];
+
+                const queryString = paramNames
+                    .filter(p => loadOptions[p] !== undefined && loadOptions[p] !== null)
+                    .map(p => `${p}=${encodeURIComponent(JSON.stringify(loadOptions[p]))}`)
+                    .join("&");
+
+                const requestUrl = `http://localhost:5017/api/excel-sheets/${sheetId}/data?${queryString}`;
+
+                const response = await fetch(requestUrl, {
+                    method: "POST",
+                    headers: {
+                        Authorization: `Bearer ${token}`,
+                        "Content-Type": "application/json"
+                    },
+                    body: JSON.stringify(loadOptions)
+                });
+
+                const result = await response.json();
+
+                return {
+                    data: result?.data ?? [],
+                    totalCount: result?.totalCount ?? 0,
+                    groupCount: result?.groupCount ?? 0,
+                    summary: result?.summary ?? []
+                };
+            }
+        });
+
+
+    const checkAvailability = useCallback(
+        (e) => {
+            const type = 'success';
+            const message = 'Filtering is disabled while selection mode is active. Please turn off selection mode to re-enable filters.';
+            setToastConfig({
+                ...toastConfig,
+                isVisible: true,
+                type,
+                message,
+            });
+        },
+        [toastConfig, setToastConfig],
+    );
+
+    const onHiding = useCallback(() => {
+        setToastConfig({
+            ...toastConfig,
+            isVisible: false,
+        });
+    }, [toastConfig, setToastConfig]);
+
+    const handleSearchChange = (value) => {
+        const safeValue = typeof value === "string" ? value : "";
+
+        setSearchText(safeValue);
+
+        if (!gridInstance) return;
+
+        if (searchTimeoutRef.current) {
+            clearTimeout(searchTimeoutRef.current);
+        }
+
+        searchTimeoutRef.current = setTimeout(() => {
+            const text = safeValue.trim();
+
+            if (text.length >= 3) {
+                gridInstance.searchByText(text);
+            } else if (text.length === 0) {
+                gridInstance.searchByText(""); // reset
+            }
+        }, 400);
+    };
+
+
+    const loadColumns = async (sheetId) => {
+        try {
+            const res = await fetch(getFieldMetaAPI(sheetId), {
+                headers: {
+                    Authorization: `Bearer ${token}`,
+                },
+            });
+
+            const data = await res.json();
+
+            // Always keep FlowTaskId first
+            const flowTaskColumn = {
+                dataField: "RowNumber",
+                caption: "Sheet Row",
+                dataType: "number",
+                allowFiltering: true,
+                allowGrouping: true,
+                headerFilter: {
+                    visible: true,
+                    search: { enabled: true },
+                },
+            };
+
+            const metaColumns = (data ?? []).map(col => ({
+                dataField: col.FieldName,
+                caption: col.DisplayName,
+                dataType: col.FieldType,
+                allowFiltering: true,
+                allowReordering: true,
+                allowGrouping: true,
+                headerFilter: {
+                    visible: true,
+                    search: { enabled: true },
+                },
+            }));
+
+            setColumns([flowTaskColumn, ...metaColumns]);
+        } catch (err) {
+            console.error("Failed to load columns", err);
+            setColumns([]);
+        }
+    };
+
+
+    const onSelectionChanged = (e) => {
+        const visibleRowKeys = e.component.getVisibleRows().map(row => row.key);
+        const allVisibleSelected = visibleRowKeys.every(key => e.selectedRowKeys.includes(key));
+        const noneVisibleSelected = visibleRowKeys.every(key => !e.selectedRowKeys.includes(key));
+        const totalCount = e.component.totalCount();
+
+        if (!selectAll && allVisibleSelected) {
+            // ✅ First-time "Select All"
+            setSelectAll(true);
+            setWasFullyDeselected(false);
+            setExcludedKeys([]);
+            setSelectedRowKeys([]);
+            setFinalCount(totalCount);
+        }
+        else if (selectAll && allVisibleSelected) {
+            // ✅ Click "Select All" again (restore full selection)
+            const remainingExclusions = excludedKeys.filter(key => !visibleRowKeys.includes(key));
+            if (remainingExclusions.length !== excludedKeys.length) {
+                // User is undoing some previous deselections
+                setExcludedKeys([]);
+                setFinalCount(totalCount);
+            } else {
+                setExcludedKeys(remainingExclusions);
+                setFinalCount(totalCount - remainingExclusions.length);
+            }
+            setWasFullyDeselected(false);
+            setSelectedRowKeys([]);
+        }
+
+        else if (selectAll && !noneVisibleSelected) {
+            // ✅ Deselect few while in Select All mode
+            const newDeselections = visibleRowKeys.filter(key => !e.selectedRowKeys.includes(key));
+            const updatedExcluded = Array.from(new Set([...excludedKeys, ...newDeselections]));
+            setExcludedKeys(updatedExcluded);
+            setSelectedRowKeys([]);
+            setWasFullyDeselected(false);
+            setFinalCount(totalCount - updatedExcluded.length);
+        }
+
+
+        else if (selectAll && noneVisibleSelected) {
+            // ✅ "Deselect All"
+            e.component.clearSelection(); // ensures DevExtreme state resets
+            setSelectAll(false);
+            setWasFullyDeselected(true); // flag for Scenario 6
+            setExcludedKeys([]);
+            setSelectedRowKeys([]);
+            setFinalCount(0);
+        }
+
+        else if (!selectAll && wasFullyDeselected && e.selectedRowKeys.length > 0) {
+            // ✅ Scenario 6: manual selection after deselect all
+            const newKeys = e.selectedRowKeys.filter(key => visibleRowKeys.includes(key));
+            setWasFullyDeselected(false);
+            setSelectedRowKeys(newKeys);
+            setExcludedKeys([]);
+            setFinalCount(newKeys.length);
+        }
+
+        else {
+            // ✅ Manual few selection (fresh)
+            setSelectAll(false);
+            setWasFullyDeselected(false);
+            setExcludedKeys([]);
+            setSelectedRowKeys(e.selectedRowKeys);
+            setFinalCount(e.selectedRowKeys.length);
+        }
+    };
+
+    const updateHeaderCheckboxState = (gridInstance, selectAll, excludedKeys, selectedRowKeys) => {
+        if (!gridInstance) return;
+
+        const visibleRowKeys = gridInstance.getVisibleRows().map(row => row.key).filter(Boolean);
+
+        const selectedVisible = visibleRowKeys.filter(key =>
+            selectAll ? !excludedKeys.includes(key) : selectedRowKeys.includes(key)
+        );
+
+        const allVisibleSelected = selectedVisible.length === visibleRowKeys.length;
+        const noneVisibleSelected = selectedVisible.length === 0;
+
+        const isTrulyAllSelected = selectAll && excludedKeys.length === 0;
+        const isPartiallySelected = selectAll && excludedKeys.length > 0;
+        const isManualSomeSelected = !selectAll && selectedRowKeys.length > 0;
+
+        const headerCheckbox = gridInstance.element().querySelector('.dx-header-row .dx-checkbox');
+        if (!headerCheckbox) return;
+
+        headerCheckbox.classList.remove("dx-checkbox-checked", "dx-checkbox-indeterminate");
+
+        if (isTrulyAllSelected) {
+            headerCheckbox.classList.add("dx-checkbox-checked");
+        } else if (isPartiallySelected || (isManualSomeSelected && !allVisibleSelected)) {
+            headerCheckbox.classList.add("dx-checkbox-indeterminate");
+        } else if (isManualSomeSelected && allVisibleSelected) {
+            headerCheckbox.classList.add("dx-checkbox-checked");
+        }
+    };
+
+    useEffect(() => {
+        if (!gridInstance) return;
+
+        setTimeout(() => {
+            updateHeaderCheckboxState(gridInstance, selectAll, excludedKeys, selectedRowKeys);
+        }, 0);
+    }, [selectAll, excludedKeys, selectedRowKeys, gridInstance]);
+
+
+    const getFinalSelectedIds = async (extraPayload = {}) => {
+        const appliedFilters = Array.isArray(lastAppliedFilter) ? lastAppliedFilter : [];
+        const totalRows = gridInstance?.totalCount() || 0;
+
+        // Determine selectType and ids
+        let selectType = '';
+        let selectedIds = [];
+        let deselectedIds = [];
+        let selectionLabel = '';
+        let selectedCount = 0;
+
+        if (selectAll && excludedKeys.length === 0) {
+            selectType = 'ALL';
+            selectionLabel = 'All Rows Selected';
+            selectedCount = totalRows;
+        } else if (selectAll && excludedKeys.length > 0) {
+            selectType = 'EXCLUDE';
+            deselectedIds = excludedKeys;
+            selectionLabel = 'Deselected Rows';
+            selectedCount = excludedKeys.length;
+        } else {
+            selectType = 'INCLUDE';
+            selectedIds = selectedRowKeys;
+            selectionLabel = 'Selected Rows';
+            selectedCount = selectedRowKeys.length;
+        }
+
+        const payload = {
+            selectType,
+            selectedIds,
+            deselectedIds,
+            totalSelectedCount: selectedCount,
+            filters: appliedFilters.length > 0 ? appliedFilters : [],
+            ...extraPayload,  // Inject workspaceId, userId, etc.
+        };
+
+        console.log("📦 Final Selection Payload:", payload);
+
+        setPopupSummary(payload);
+        setPopupVisible(true);
+        setActionValue(null);
+
+        // Reset selection state
+        setSelectAll(false);
+        setExcludedKeys([]);
+        setSelectedRowKeys([]);
+        setFinalCount(0);
+        getUnSelected();
+
+        return selectedIds;
+    };
+    const formatRawFilterToReadableText = (filter) => {
+        if (!filter) return '';
+
+        if (Array.isArray(filter[0])) {
+            // Composite condition like: [ [cond1], 'and', [cond2] ]
+            return formatRawFilterToReadableText(filter[0]) + ` ${filter[1].toUpperCase()} ` + formatRawFilterToReadableText(filter[2]);
+        }
+
+        if (typeof filter[0] === 'string') {
+            const [field, op, value] = filter;
+            return `• ${field} ${op} "${value}"`;
+        }
+
+        return '';
+    };
+
+
+    const onContentReady = (grid) => {
+        const visibleRowKeys = grid.getVisibleRows().map(row => row.key).filter(Boolean);
+
+        if (selectAll) {
+            const toSelect = visibleRowKeys.filter(key => !excludedKeys.includes(key));
+            grid.selectRows(toSelect, true);
+        } else {
+            grid.selectRows(selectedRowKeys, false);
+        }
+
+        // 🔁 Keep header checkbox patched
+        setTimeout(() => {
+            const headerCheckbox = grid.element().querySelector('.dx-header-row .dx-checkbox');
+            if (!headerCheckbox) return;
+
+            const selectedVisible = visibleRowKeys.filter(key =>
+                selectAll ? !excludedKeys.includes(key) : selectedRowKeys.includes(key)
+            );
+
+            const allVisibleSelected = selectedVisible.length === visibleRowKeys.length;
+            const noneVisibleSelected = selectedVisible.length === 0;
+
+            const isTrulyAllSelected = selectAll && excludedKeys.length === 0;
+            const isPartiallySelected = selectAll && excludedKeys.length > 0;
+            const isManualSomeSelected = !selectAll && selectedRowKeys.length > 0;
+
+            headerCheckbox.classList.remove("dx-checkbox-checked", "dx-checkbox-indeterminate");
+
+            if (isTrulyAllSelected) {
+                headerCheckbox.classList.add("dx-checkbox-checked");
+            } else if (isPartiallySelected) {
+                headerCheckbox.classList.add("dx-checkbox-indeterminate");
+            } else if (isManualSomeSelected) {
+                if (selectedVisible.length === 0) {
+                    headerCheckbox.classList.add("dx-checkbox-indeterminate");
+                } else if (allVisibleSelected) {
+                    headerCheckbox.classList.add("dx-checkbox-checked");
+                } else {
+                    headerCheckbox.classList.add("dx-checkbox-indeterminate");
+                }
+            }
+        }, 0);
+    };
+
+    useEffect(() => {
+        if (!gridInstance || !selectAll || excludedKeys.length === 0) return;
+
+        const gridElement = gridInstance.element();
+
+        const observer = new MutationObserver(() => {
+            const checkboxWrapper = gridElement.querySelector('.dx-header-row .dx-checkbox');
+            if (!checkboxWrapper) return;
+
+            checkboxWrapper.addEventListener('click', handleHeaderCheckboxClick, { once: true });
+        });
+
+        observer.observe(gridElement, {
+            childList: true,
+            subtree: true,
+        });
+
+        return () => {
+            observer.disconnect();
+        };
+    }, [gridInstance, selectAll, excludedKeys]);
+
+
+    const handleHeaderCheckboxClick = () => {
+        if (!gridInstance) return;
+
+        const visibleRowKeys = gridInstance.getVisibleRows().map(r => r.key).filter(Boolean);
+        const selectedVisible = visibleRowKeys.filter(k => !excludedKeys.includes(k));
+        const allVisibleSelected = selectedVisible.length === visibleRowKeys.length;
+
+        if (allVisibleSelected) {
+
+            setExcludedKeys([]);
+            setSelectedRowKeys([]);
+            setFinalCount(gridInstance.totalCount());
+
+            gridInstance.selectRows(visibleRowKeys, true);
+
+            updateHeaderCheckboxState(gridInstance, true, [], []);
+        }
+    };
+
+    const getUnSelected = () => {
+        const gridInstance = gridRef.current?.instance?.();
+
+        if (!gridInstance) return;
+
+        // ✅ Clear selection only (do not clear filters)
+        gridInstance.deselectAll();
+
+        // ✅ Reset your internal state
+        setSelectAll(false);
+        setExcludedKeys([]);
+        setSelectedRowKeys([]);
+        setShowCheckboxes(false);
+        setFinalCount(0);
+        setReadOnlyFilters(false);
+    };
+
+    const getClearSelected = () => {
+        const gridInstance = gridRef.current?.instance?.();
+
+        if (!gridInstance) return;
+
+        // ✅ Clear selection
+        gridInstance.deselectAll();
+
+        // ✅ Clear all filters (FilterRow + HeaderFilter)
+        const columns = gridInstance.getVisibleColumns();
+        columns.forEach((col) => {
+            gridInstance.columnOption(col.dataField, 'filterValue', null);     // FilterRow
+            gridInstance.columnOption(col.dataField, 'filterValues', null);    // HeaderFilter
+        });
+
+        gridInstance.clearFilter(); // apply filter clearing
+
+        // ✅ Reset your internal state
+        setSelectAll(false);
+        setExcludedKeys([]);
+        setSelectedRowKeys([]);
+        // setShowCheckboxes(false);
+        setFinalCount(0);
+        setReadOnlyFilters(false);
+        setActionValue(null);
+
+    };
+
+    useEffect(() => {
+        if (readOnlyFilters) {
+            checkAvailability();
+        }
+    }, [readOnlyFilters]);
+
+    useEffect(() => {
+        if (!gridInstance) return;
+        gridInstance.refresh(); // rerender grid on filter lock toggle
+    }, [readOnlyFilters, gridInstance]);
+
+
+
+    useEffect(() => {
+        setProceedEnabled(selectAll || selectedRowKeys.length > 0);
+    }, [selectAll, selectedRowKeys]);
+
+    // ✅ SAVE LAST VIEWED SHEET (SEPARATE FUNCTION)
+    const saveLastViewedSheet = async (sheet) => {
+        try {
+            await axios.post(
+                "http://localhost:5017/api/excel-sheets/last-viewed",
+                {
+                    userId: 1,               // replace with logged-in user id later
+                    projectId: 147,
+                    sheetId: sheet.id
+                }
+            );
+        } catch (error) {
+            console.error("Failed to save last viewed sheet", error);
+        }
+    };
+    // ✅ GET LAST VIEWED SHEET
+    const getLastViewedSheet = async (projectId) => {
+        try {
+            const response = await axios.get(
+                "http://localhost:5017/api/excel-sheets/last-viewed",
+                {
+                    params: {
+                        userId: 1, // replace later with logged-in user
+                        projectId: projectId
+                    }
+                }
+            );
+            return response.data; // expected: { sheetId: number }
+        } catch (error) {
+            console.error("Failed to get last viewed sheet", error);
+            return null;
+        }
+    };
+
+
+    useEffect(() => {
+        fetch(`/api/search-history/1`)
+            .then(res => res.ok ? res.json() : [])
+            .then(data => {
+                if (data.length) {
+                    setSearchHistory(data);
+                    searchHistoryRef.current = data;
+                    sessionStorage.setItem(STORAGE_KEY, JSON.stringify(data));
+                } else {
+                    const stored = JSON.parse(sessionStorage.getItem(STORAGE_KEY)) || [];
+                    setSearchHistory(stored);
+                    searchHistoryRef.current = stored;
+                }
+            })
+            .catch(() => {
+                const stored = JSON.parse(sessionStorage.getItem(STORAGE_KEY)) || [];
+                setSearchHistory(stored);
+                searchHistoryRef.current = stored;
+            });
+    }, []);
+
+
+
+    useEffect(() => {
+        const handleStorageChange = (e) => {
+            if (e.key === STORAGE_KEY) {
+                const updated = JSON.parse(e.newValue) || [];
+                setSearchHistory(updated);
+                searchHistoryRef.current = updated;
+            }
+        };
+        window.addEventListener("storage", handleStorageChange);
+        return () => window.removeEventListener("storage", handleStorageChange);
+    }, []);
+
+
+
+
+    /* ----------------------------
+       API call (tab close / logout only)
+    ----------------------------- */
+    const updateSearchHistoryAPI = () => {
+        if (!searchHistoryRef.current.length) return;
+
+        navigator.sendBeacon(
+            "/api/search-history",
+            JSON.stringify({
+                userId: 1,
+                history: searchHistoryRef.current
+            })
+        );
+    };
+
+    /* ----------------------------
+       Tab switch & close
+    ----------------------------- */
+    useEffect(() => {
+        const handleVisibilityChange = () => {
+            if (document.visibilityState === "hidden") {
+                updateSearchHistoryAPI();
+            }
+        };
+
+        const handleBeforeUnload = () => {
+            updateSearchHistoryAPI();
+        };
+
+        document.addEventListener("visibilitychange", handleVisibilityChange);
+        window.addEventListener("beforeunload", handleBeforeUnload);
+
+        return () => {
+            document.removeEventListener("visibilitychange", handleVisibilityChange);
+            window.removeEventListener("beforeunload", handleBeforeUnload);
+        };
+    }, []);
+
+    const applySearch = () => {
+        if (!gridInstance) return;
+
+        gridInstance.searchByText(searchText);
+    };
+    const clearSearch = () => {
+        if (!gridInstance) return;
+        setSearchText("");
+        gridInstance.searchByText("");
+    };
+
+    const gridDataWithId = gridData.map((row, index) => ({
+        ...row,
+        rowId: index + 1
+    }));
+
+    const handleColumnReorder = (e) => {
+        alert("bsvdchg")
+        console.log("selectedOrder", selectedOrder)
+        if (!selectedOrder) return;
+
+        const payload = {
+            sheetId: selectedOrder.id,
+            fieldName: e.column.dataField,
+            fromIndex: e.fromIndex,
+            toIndex: e.toIndex
+        };
+
+        axios.post(
+            "http://localhost:5017/api/excel-sheets/columns/reorder",
+            payload
+        ).catch(err => console.error("Column reorder save failed", err));
+    };
+
+
+    useEffect(() => {
+        // If all filters are cleared → show all records
+        if (
+            searchText.trim() === "" &&
+            category === 0 &&
+            status === 0
+        ) {
+            setFilteredOrders(orders);
+        }
+    }, [searchText, category, status, orders]);
+
+    const truncate = (text, max = 30) =>
+        text.length > max ? text.substring(0, max) + "..." : text;
+
+    const formatLabel = (key) => {
+        if (!key) return "";
+
+        return key
+            // Handle snake_case first
+            .replace(/_/g, " ")
+            // Add space between lowerCase -> UpperCase
+            .replace(/([a-z])([A-Z])/g, "$1 $2")
+            // Add space before last capital in acronyms (ID, URL, etc.)
+            .replace(/([A-Z]+)([A-Z][a-z])/g, "$1 $2")
+            // Capitalize first letter of each word
+            .replace(/\b\w/g, (c) => c.toUpperCase());
+    };
+
+
+    return (
+        <div className="orders-container">
+            {/* LEFT PANEL (NO SEARCH) */}
+            <div className="orders-left">
+                <h3 className="panel-title">Service List</h3>
+                <List
+                    dataSource={orders}
+                    keyExpr="id"
+                    selectionMode="single"
+                    selectedItem={selectedOrder}
+                    onItemClick={async (e) => {
+                        const sheet = e.itemData;
+                        saveLastViewedSheet(sheet);
+
+                        // ✅ Update selected service
+                        setSelectedOrder(sheet);
+                        setSelectedService(sheet);
+                        await loadColumns(sheet.id);
+
+                        // ✅ Reset grid state BEFORE assigning new store
+                        if (gridInstance) {
+                            gridInstance.pageIndex(0);      // 🔥 reset pagination
+                            gridInstance.clearSelection();  // optional but recommended
+                            gridInstance.searchByText("");  // reset server search
+                        }
+
+                        // ✅ Create & assign new datasource
+                        const newStore = createStore(sheet.id);
+                        setGridStore(newStore);
+
+                        // ✅ Reset search textbox
+                        setSearchText("");
+                    }}
+                    itemRender={(item) => (
+                        <div
+                            className={`order-item ${item.id === selectedOrder?.id ? "active" : ""
+                                }`}
+                        >
+                            <div className="order-id">
+                                {truncate(item.sheetName, 25)}
+                            </div>
+                        </div>
+                    )}
+                />
+
+
+            </div>
+
+            {/* RIGHT PANEL (SEARCH + HISTORY) */}
+            <div className="orders-right">
+                {selectedOrder && (
+                    <div className="excel-card">
+                        {/* Header */}
+                        <div className="excel-header">
+                            <h2>Sheet Name: {selectedOrder.sheetName}</h2>
+                        </div>
+
+                        <div className="ordermasterbox">
+                            <div className="Ordermaster">
+
+                                {/* SEARCH TEXT */}
+                                <div className="levellist first">
+                                    <label>What are you looking for?</label>
+                                    <input
+                                        type="text"
+                                        className="form-control"
+                                        placeholder="Search here..."
+                                        value={searchText}
+                                        onChange={(e) => {
+                                            setSearchText(e.target.value)
+                                            handleSearchChange(e.target.value)
+                                        }}
+                                    />
+
+                                </div>
+
+
+
+                                {/* SEARCH BUTTON */}
+                                <div className="levellist action" onClick={applySearch}>
+                                    <button className="orderbutton">SEARCH</button>
+
+                                </div>
+                                {/* <div ref={saveButtonRef} >
+
+                                    <Button
+                                        icon="clock"
+                                        stylingMode="text"
+                                        hint="Search history"
+                                        onClick={() => setSearchPopupVisible(true)}
+                                    />
+
+                                </div> */}
+                            </div>
+                        </div>
+
+                        <DataGrid
+                            ref={gridRef}
+                            dataSource={gridStore}
+                            keyExpr={keyExpr}
+                            onInitialized={(e) => setGridInstance(e.component)}
+                            remoteOperations={true} // KEEP TRUE for remote paging, etc.
+                            height="80%"
+                            width="100%"                  // ✅ Set width to allow layout
+                            columnAutoWidth={true}        // ✅ Adjust columns automatically
+                            showBorders={true}
+                            allowColumnReordering={true}
+                            onColumnReordered={(e) => {
+                                console.log("REORDER TRIGGERED");
+                                console.log("From:", e.fromIndex);
+                                console.log("To:", e.toIndex);
+                                console.log("Field:", e.column.dataField);
+                            }}
+                            // onColumnReordered={handleColumnReorder}
+                            columnHidingEnabled={false}
+                            onSelectionChanged={onSelectionChanged}
+                            repaintChangesOnly={true}
+                            columns={columns}
+                            onOptionChanged={(e) => {
+                                if (e.name === "grouping" && e.fullName === "grouping.groupedColumns") {
+                                    setAutoExpandAll(false);
+                                    if (gridInstance) {
+                                        gridInstance.collapseAll(-1); // 👈 collapses all groups
+                                    }
+                                }
+                            }}
+                            onRowClick={(e) => {
+                                setSelectedRow(e.data);      // 🔥 full row object
+                                setRowDetailsVisible(true);  // 🔥 open popup
+                            }}
+                            onContentReady={(e) => {
+                                onContentReady(e.component)
+                                // setGridInstance(e.component); // ensure grid instance is always updated
+
+                                if (!readOnlyFilters) return;
+                                const rootElement = e.component.element();
+
+                                // Disable filter row inputs
+                                const filterRowInputs = rootElement.querySelectorAll(".dx-datagrid-filter-row input");
+                                filterRowInputs.forEach((input) => {
+                                    input.readOnly = true;
+                                    input.style.backgroundColor = "#f5f5f5";
+
+                                });
+                                const headerIcons = rootElement.querySelectorAll(".dx-header-filter");
+                                headerIcons.forEach((icon) => {
+                                    icon.style.pointerEvents = "none";
+                                    icon.style.opacity = "0.5";
+                                    icon.setAttribute("aria-disabled", "true");
+                                    icon.setAttribute("tabindex", "-1");
+
+                                });
+                            }}
+                        >
+                            <Selection
+                                mode="multiple"
+                                showCheckBoxesMode={showCheckboxes ? 'always' : 'none'}  // toggle here
+                                selectAllMode="page" // This shows the checkbox in header
+                            />
+                            <GroupPanel visible={true}
+                                emptyPanelText="Use the context menu of header columns to group data"
+                            />
+                            {/* <SearchPanel visible={true} highlightCaseSensitive={false} /> */}
+
+                            <Grouping autoExpandAll={false} contextMenuEnabled={true} expandMode="rowClick"
+                            />
+                            <FilterRow visible={true} />
+                            <HeaderFilter visible={true} />
+
+                            <Scrolling mode="virtual" useNative={false} />
+                            <Summary>
+                                <TotalItem column="sheetId" summaryType="count" displayFormat="Total: {0}" />
+                                <GroupItem column="sheetId" summaryType="count" displayFormat="Count: {0}" />
+                            </Summary>
+
+                            <Toolbar>
+                                <Item name="groupPanel" location="before" />
+
+                                <Item
+                                    location="after"
+                                    render={() => (
+                                        <Button
+                                            icon="arrowright"
+                                            text={`(${finalCount})`}
+                                            onClick={() => {
+                                                if (actionValue === "Assigned") {
+                                                    setAssignPopupVisible(true);
+                                                } else {
+                                                    getFinalSelectedIds();
+                                                    setPopupVisible(true);
+                                                }
+                                            }}
+                                            disabled={!proceedEnabled}
+                                        />
+                                    )}
+                                />
+
+                                <Item
+                                    location="after"
+                                    render={() => (
+                                        <Button
+                                            icon="clearformat"
+                                            text="Clear"
+                                            onClick={getClearSelected}
+                                        />
+                                    )}
+                                />
+                            </Toolbar>
+                        </DataGrid>
+
+
+                        {selectedRow && (
+                            <Popup
+                                visible={rowDetailsVisible}
+                                onHiding={() => setRowDetailsVisible(false)}
+                                showTitle
+                                title={`Row Details`}
+                                dragEnabled={false}
+                                closeOnOutsideClick
+                                showCloseButton
+                                width={420}
+                                height="100%"
+                                position={{
+                                    my: "right top",
+                                    at: "right top",
+                                    of: window,
+                                }}
+                                wrapperAttr={{ class: "right-side-popup" }}
+                            >
+                                <div className="popup-content">
+                                    {Object.entries(selectedRow).map(([key, value]) => (
+                                        <div className="form-group" key={key}>
+                                            <label>{formatLabel(key)}</label>
+                                            <input
+                                                type="text"
+                                                value={value ?? ""}
+                                                readOnly
+                                            />
+                                        </div>
+                                    ))}
+                                </div>
+                            </Popup>
+                        )}
+
+
+                        <Popup
+                            visible={searchPopupVisible}
+                            onHiding={() => setSearchPopupVisible(false)}
+                            showTitle
+                            title="Search History"
+                            width={360}
+                            height="100%"
+                            dragEnabled={false}
+                            closeOnOutsideClick
+                            showCloseButton
+                            position={{
+                                my: "right top",
+                                at: "right top",
+                                of: window
+                            }}
+                            wrapperAttr={{ class: "right-search-popup" }}
+                        >
+                            <div style={{ padding: 16, height: "100%" }}>
+                                {searchHistory.length > 0 ? (
+                                    <ul
+                                        style={{
+                                            listStyle: "none",
+                                            padding: 0,
+                                            margin: 0,
+                                            height: "100%",
+                                            overflowY: "auto"
+                                        }}
+                                    >
+                                        {searchHistory.map((s, i) => (
+                                            <li
+                                                key={i}
+                                                onClick={() => {
+                                                    setGridSearchText(s);
+                                                    setSearchPopupVisible(false);
+                                                }}
+                                                style={{
+                                                    display: "flex",
+                                                    alignItems: "center",
+                                                    gap: 10,
+                                                    padding: "10px 12px",
+                                                    marginBottom: 8,
+                                                    borderRadius: 8,
+                                                    cursor: "pointer",
+                                                    backgroundColor: "#f5f7fa",
+                                                    transition: "all 0.2s ease"
+                                                }}
+                                                onMouseEnter={e => e.currentTarget.style.background = "#e6f0ff"}
+                                                onMouseLeave={e => e.currentTarget.style.background = "#f5f7fa"}
+                                            >
+                                                <span style={{ fontSize: 16, color: "#1976d2" }}>🔍</span>
+                                                <span
+                                                    style={{
+                                                        fontSize: 14,
+                                                        color: "#333",
+                                                        overflow: "hidden",
+                                                        textOverflow: "ellipsis",
+                                                        whiteSpace: "nowrap"
+                                                    }}
+                                                    title={s}
+                                                >
+                                                    {s}
+                                                </span>
+                                            </li>
+                                        ))}
+                                    </ul>
+                                ) : (
+                                    <div
+                                        style={{
+                                            height: "100%",
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            color: "#999",
+                                            fontSize: 14
+                                        }}
+                                    >
+                                        🔍 No search history available
+                                    </div>
+                                )}
+                            </div>
+                        </Popup>
+
+
+
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default OrdersMasterDetail;