diff --git "a/C:\\chatknot\\app/(dashboard)/chat/page.js" "b/C:\\chatknot\\old backup\\app/(dashboard)/chat/page.js"
index 920a683..62a866b 100644
--- "a/C:\\chatknot\\app/(dashboard)/chat/page.js"
+++ "b/C:\\chatknot\\old backup\\app/(dashboard)/chat/page.js"	
@@ -14,10 +14,9 @@ import firefox from "@/public/assets/images/firefox-icon.png";
 import edge from "@/public/assets/images/edge.png";
 import safari from "@/public/assets/images/safari-icon.png";
 
-import { FaMobileAlt, FaDesktop, FaTabletAlt } from "react-icons/fa";
 import ubunto from "@/public/assets/images/ubunto.png";
 import android from "@/public/assets/images/android.png";
-const notificationSound = "/sounds/chatalert.mp3";
+import notificationSound from "@/public/sounds/chatalert.mp3";
 import { addTab, minimize } from "../../lib/features/chat/chatSlice";
 import FilterChats from "./FilterChats";
 import axios from "axios";
@@ -32,15 +31,13 @@ const Chat = () => {
   const [visitors, setVisitors] = useState([]);
   const [hideColumns, setHideColumns] = useState(false);
   const [blinkingVisitor, setBlinkingVisitor] = useState([]);
-  const { activeTab } = useSelector((state) => state.chat);
+  const {  activeTab } = useSelector((state) => state.chat);
   const [IsShowPK, setIsShowPK] = useState(false);
   const [ShowAlert, setShowAlert] = useState(false);
   const [showFilter, setShowFilter] = useState(false);
-  const selectedBrands = useSelector(
-    (state) => state.selectedBrands.selectedBrands,
-  );
+  const selectedBrands = useSelector((state) => state.selectedBrands.selectedBrands);
   const [filteredVisitors, setFilteredVisitors] = useState([]);
-
+ 
   const [brands, setBrands] = useState([]);
   const [filteredBrand, setFilteredBrand] = useState([]);
   const toggleFilterChats = () => {
@@ -92,7 +89,7 @@ const Chat = () => {
       second: "2-digit",
       hour12: true, // Change to false for 24-hour format if desired
     }).format(serverUtcTime);
-
+ 
     return userLocalTime;
   }
 
@@ -118,51 +115,54 @@ const Chat = () => {
     //       }
     //     );
     //     setBrands(response.data);
-    //
+    //     
     //     setFilteredBrand(response.data);
-
+        
     //   } catch (error) {
     //     console.error("Error fetching brands:", error);
-
+     
     //   }
     // };
     const fetchBrands = async () => {
       try {
-        const forchat = {
-          forChat: true,
-        };
         const response = await apiRequest(
           `/api/companies/${user.company_id}/brands`,
-          "GET",
-          forchat,
+          'GET'
         );
-        setBrands(response);
-        //
+    
+            setBrands(response);
+    //     
         setFilteredBrand(response);
+      
       } catch (error) {
         console.error("Error fetching brands:", error.message);
+  
+      
       }
     };
-
+    
     if (user?.company_id) {
       fetchBrands();
     }
   }, []);
 
   useEffect(() => {
+    
+  
     if (selectedBrands.length > 0) {
       // Filter visitors based on selected brands
       setFilteredVisitors((prevVisitors) => {
         // Only keep visitors whose public_key is in selectedBrands
         return visitors.filter((visitor) =>
-          selectedBrands.includes(visitor.public_key),
+          selectedBrands.includes(visitor.public_key)
         );
       });
     } else {
       // If no brand is selected, reset the filtered visitors to show all visitors
       setFilteredVisitors(visitors);
     }
-  }, [selectedBrands, visitors]); // Re-run the effect when selectedBrands or visitors changes
+  }, [selectedBrands,visitors]); // Re-run the effect when selectedBrands or visitors changes
+  
 
   useEffect(() => {
     // Ensure socket instance is created once
@@ -170,18 +170,18 @@ const Chat = () => {
     if (!socketinst) return;
 
     setSocket(socketinst);
-
+ 
     // Emit brand ID to the backend when the page loads
     socketinst.emit("page load", { brand_id: bid });
 
     const handleActiveVisitors = async (data) => {
       const decryptedData = await decryptData(data);
-
+      
       if (!decryptedData || typeof decryptedData !== "object") {
         console.error("Decryption failed or returned invalid data");
         return;
       }
-
+    
       let {
         client_id,
         public_key,
@@ -198,16 +198,15 @@ const Chat = () => {
         browser,
         brand_name,
         totalMsgCount,
-        device_size,
       } = decryptedData;
-
-      // Now this should work correctly
-
-      //  if (country === 'Pakistan' && !IsShowPK) {
+    
+       // Now this should work correctly
+    
+            //  if (country === 'Pakistan' && !IsShowPK) {
 
       //   return;
       // }
-      const j_time = emitTimeInUserTimezone(join_time);
+            const j_time = emitTimeInUserTimezone(join_time);
       // Save the original join_time with client_id
       setOriginalJoinTimes((prevTimes) => ({
         ...prevTimes,
@@ -221,6 +220,8 @@ const Chat = () => {
         hour12: true,
       });
 
+      
+      
       const newVisitor = {
         name: client_name ? client_name : null,
         client_id: client_id,
@@ -239,16 +240,18 @@ const Chat = () => {
         unseenMsg: unseenMsg,
         brand_name: brand_name,
         totalMessages: totalMsgCount,
-        device_size: device_size,
       };
-
+ 
       setVisitors((prevVisitors) => {
+      
         // Check if the visitor with the same client_id already exists
         const existingVisitorIndex = prevVisitors.findIndex(
-          (v) => v.client_id === client_id,
+          (v) => v.client_id === client_id
         );
-
+     
+        
         if (existingVisitorIndex > -1) {
+         
           // Update existing visitor
           const updatedVisitors = [...prevVisitors];
           updatedVisitors[existingVisitorIndex] = newVisitor;
@@ -259,23 +262,26 @@ const Chat = () => {
         }
       });
       if (selectedBrands.length === 0 || selectedBrands.includes(public_key)) {
-        setFilteredVisitors((prevVisitors) => {
-          // Check if the visitor with the same client_id already exists
-          const existingVisitorIndex = prevVisitors.findIndex(
-            (v) => v.client_id === client_id,
-          );
-
-          if (existingVisitorIndex > -1) {
-            // Update existing visitor
-            const updatedVisitors = [...prevVisitors];
-            updatedVisitors[existingVisitorIndex] = newVisitor;
-            return updatedVisitors;
-          } else {
-            // Add new visitor only if it doesn't already exist
-            return [...prevVisitors, newVisitor];
-          }
-        });
-      }
+      setFilteredVisitors((prevVisitors) => {
+      
+        // Check if the visitor with the same client_id already exists
+        const existingVisitorIndex = prevVisitors.findIndex(
+          (v) => v.client_id === client_id
+        );
+     
+        
+        if (existingVisitorIndex > -1) {
+         
+          // Update existing visitor
+          const updatedVisitors = [...prevVisitors];
+          updatedVisitors[existingVisitorIndex] = newVisitor;
+          return updatedVisitors;
+        } else {
+          // Add new visitor only if it doesn't already exist
+          return [...prevVisitors, newVisitor];
+        }
+      });
+    }
     };
 
     const handleNewClient = (data) => {
@@ -293,7 +299,6 @@ const Chat = () => {
         country,
         status,
         browser,
-        device_size,
       } = decryptedData;
       // if (country === 'Pakistan' && !IsShowPK) {
 
@@ -316,7 +321,7 @@ const Chat = () => {
       });
 
       const newVisitor = {
-        name: client_name ? client_name : null,
+    name: client_name ? client_name : null,
         client_id: client_id,
         online: joinDate,
         servedBy: "",
@@ -332,65 +337,73 @@ const Chat = () => {
         browser: browser,
         brand_name: brand_name,
         totalMessages: 0,
-        device_size: device_size,
       };
 
       // Update the state with the new visitor
       setVisitors((prevVisitors) => {
+ 
         const updatedVisitors = [newVisitor, ...prevVisitors];
         // Log inside setState to ensure proper order
         return updatedVisitors;
       });
+      
+      
+      
+     
+// Determine whether to update filtered visitors
+if (selectedBrands.length === 0 || selectedBrands.includes(public_key)) {
+  setFilteredVisitors((prevVisitors) => {
+    // Only add newVisitor if the public_key is in selectedBrands or selectedBrands is empty
+    return [newVisitor, ...prevVisitors];
+  });
+}
 
-      // Determine whether to update filtered visitors
-      if (selectedBrands.length === 0 || selectedBrands.includes(public_key)) {
-        setFilteredVisitors((prevVisitors) => {
-          // Only add newVisitor if the public_key is in selectedBrands or selectedBrands is empty
-          return [newVisitor, ...prevVisitors];
-        });
-      }
     };
 
     const handleVisitorServedByUpdate = (data) => {
-      const decryptedData = decryptData(data);
+      const decryptedData = decryptData(data)
       const { client_id, served_by } = decryptedData;
       setVisitors((prevVisitors) => {
+    
         return prevVisitors.map((visitor) =>
           visitor.client_id === client_id
             ? { ...visitor, servedBy: served_by }
-            : visitor,
-        );
-      });
-
-      setFilteredVisitors((prevVisitors) => {
-        return prevVisitors.map((visitor) =>
-          visitor.client_id === client_id
-            ? { ...visitor, servedBy: served_by }
-            : visitor,
+            : visitor
         );
       });
+       
+        setFilteredVisitors((prevVisitors) => {
+          return prevVisitors.map((visitor) =>
+            visitor.client_id === client_id
+              ? { ...visitor, servedBy: served_by }
+              : visitor
+          );
+        });
+     
     };
 
     const handleVisitorStatusChange = (data) => {
-      const decryptedData = decryptData(data);
-
-      const { client_id, served_by, status, visitor_id } = decryptedData;
-      setVisitors((prevVisitors) => {
+      const decryptedData = decryptData(data)
+      
+      const  { client_id, served_by ,status,visitor_id} = decryptedData;
+            setVisitors((prevVisitors) => {
+              
         if (status === 4) {
           if (currentChat?.client_id == client_id) {
             setHideColumns(false);
             setCurrentChat(null);
           }
           return prevVisitors.filter(
-            (visitor) => visitor.client_id !== client_id,
+            (visitor) => visitor.client_id !== client_id
           );
         } else {
           // Update visitor's status in the list
-
+          
+          
           const updatedVisitors = prevVisitors.map((visitor) =>
             visitor.client_id === client_id
               ? { ...visitor, visitorStatus: status }
-              : visitor,
+              : visitor
           );
 
           // If the current chat's visitor's status is updated, also update the currentChat state
@@ -404,36 +417,39 @@ const Chat = () => {
           return updatedVisitors;
         }
       });
+ 
+        setFilteredVisitors((prevVisitors) => {
+          
+    if (status === 4) {
+      if (currentChat?.client_id == client_id) {
+        setHideColumns(false);
+        setCurrentChat(null);
+      }
+      return prevVisitors.filter(
+        (visitor) => visitor.client_id !== client_id
+      );
+    } else {
+      // Update visitor's status in the list
+      
+      
+      const updatedVisitors = prevVisitors.map((visitor) =>
+        visitor.client_id === client_id
+          ? { ...visitor, visitorStatus: status }
+          : visitor
+      );
 
-      setFilteredVisitors((prevVisitors) => {
-        if (status === 4) {
-          if (currentChat?.client_id == client_id) {
-            setHideColumns(false);
-            setCurrentChat(null);
-          }
-          return prevVisitors.filter(
-            (visitor) => visitor.client_id !== client_id,
-          );
-        } else {
-          // Update visitor's status in the list
-
-          const updatedVisitors = prevVisitors.map((visitor) =>
-            visitor.client_id === client_id
-              ? { ...visitor, visitorStatus: status }
-              : visitor,
-          );
-
-          // If the current chat's visitor's status is updated, also update the currentChat state
-          if (currentChat?.client_id === client_id) {
-            setCurrentChat((prevChat) => ({
-              ...prevChat,
-              visitorStatus: status,
-            }));
-          }
+      // If the current chat's visitor's status is updated, also update the currentChat state
+      if (currentChat?.client_id === client_id) {
+        setCurrentChat((prevChat) => ({
+          ...prevChat,
+          visitorStatus: status,
+        }));
+      }
 
-          return updatedVisitors;
-        }
-      });
+      return updatedVisitors;
+    }
+  });
+       
     };
     const playNotificationSound = () => {
       const audio = new Audio(notificationSound);
@@ -441,52 +457,56 @@ const Chat = () => {
     };
 
     const handleNewMessageBlink = (data) => {
-      const decryptedData = decryptData(data);
-      const message = decryptedData;
-
-      setVisitors((prevVisitors) => {
+      
+      const decryptedData = decryptData(data)
+      const message = decryptedData
+      
+      
+ 
+                  setVisitors((prevVisitors) => {
+                    
         return prevVisitors.map((visitor) =>
           visitor.client_id === message.client_id
             ? { ...visitor, totalMessages: message.totalMessages }
-            : visitor,
+            : visitor
         );
-      });
-      setFilteredVisitors((prevVisitors) => {
+      });            setFilteredVisitors((prevVisitors) => {
+                    
         return prevVisitors.map((visitor) =>
           visitor.client_id === message.client_id
             ? { ...visitor, totalMessages: message.totalMessages }
-            : visitor,
+            : visitor
         );
       });
-
+      
       // if(message.public_key != brand_pk){
       //   return null;
       // }
       if (message.isParticipant) {
         // playNotificationSound();
       }
-      // If notifyAllAdmins is false, check if userId exists in unseenCounts
-      if (
-        !message.notifyAllAdmins &&
-        !message.unseenCounts.hasOwnProperty(user.userId)
-      ) {
-        //
-        return;
-      }
+  // If notifyAllAdmins is false, check if userId exists in unseenCounts
+  if (!message.notifyAllAdmins && !message.unseenCounts.hasOwnProperty(user.userId)) {
+    // 
+    return;
+}
       // Only add to blinking state if the current chat is NOT the one receiving the message
       if (activeTab || activeTab !== message.client_id) {
+        
+        
         setVisitors((prevVisitors) => {
+          
           return prevVisitors.map((visitor) =>
             visitor.client_id === message.client_id
               ? { ...visitor, unseenMsg: message.unseenCount }
-              : visitor,
+              : visitor
           );
-        });
-        setFilteredVisitors((prevVisitors) => {
+        });  setFilteredVisitors((prevVisitors) => {
+          
           return prevVisitors.map((visitor) =>
             visitor.client_id === message.client_id
               ? { ...visitor, unseenMsg: message.unseenCount }
-              : visitor,
+              : visitor
           );
         });
         setBlinkingVisitor((prevBlinkingVisitors) => {
@@ -496,63 +516,70 @@ const Chat = () => {
           return prevBlinkingVisitors;
         });
       } else {
+        
         // If current chat is the same as the message client, we can remove blinking
         removeBlinkingVisitor(message.client_id);
       }
     };
     const handleClientDataUpdate = (data) => {
-      const decryptedData = decryptData(data);
+      const decryptedData = decryptData(data)
       const updatedData = decryptedData;
-
+      
       const { client_id, name, email, phone, notes, tags } = updatedData;
       setVisitors((prevVisitors) => {
-        // Update visitor's status in the list
-        const updatedVisitors = prevVisitors.map((visitor) =>
-          visitor.client_id === client_id
-            ? { ...visitor, name: name }
-            : visitor,
-        );
+        
+          // Update visitor's status in the list
+          const updatedVisitors = prevVisitors.map((visitor) =>
+            visitor.client_id === client_id
+              ? { ...visitor, name: name }
+              : visitor
+          );
 
-        return updatedVisitors;
+          return updatedVisitors;
       });
       setFilteredVisitors((prevVisitors) => {
-        // Update visitor's status in the list
-        const updatedVisitors = prevVisitors.map((visitor) =>
-          visitor.client_id === client_id
-            ? { ...visitor, name: name }
-            : visitor,
-        );
+        
+          // Update visitor's status in the list
+          const updatedVisitors = prevVisitors.map((visitor) =>
+            visitor.client_id === client_id
+              ? { ...visitor, name: name }
+              : visitor
+          );
 
-        return updatedVisitors;
+          return updatedVisitors;
       });
+     
+      
+     
     };
     const handleMessageSeen = (data) => {
-      const decryptedData = decryptData(data);
-      if (decryptedData.user_id != user.userId) {
+      const decryptedData = decryptData(data)
+      if(decryptedData.user_id != user.userId){
         return null;
       }
-      const message = decryptedData;
-      setVisitors((prevVisitors) =>
+      const message = decryptedData
+            setVisitors((prevVisitors) =>
         prevVisitors.map((visitor) =>
           visitor.client_id === message.client_id
             ? { ...visitor, unseenMsg: 0 }
-            : visitor,
-        ),
-      );
-      setFilteredVisitors((prevVisitors) =>
+            : visitor
+        )
+      );    setFilteredVisitors((prevVisitors) =>
         prevVisitors.map((visitor) =>
           visitor.client_id === message.client_id
             ? { ...visitor, unseenMsg: 0 }
-            : visitor,
-        ),
+            : visitor
+        )
       );
     };
 
     const handleChatMessage = (message) => {
       // const decryptedData = decryptData(data)
       // const message = decryptedData
-
-      if (activeTab || activeTab !== message.client_id) {
+       
+        
+       
+                  if (activeTab || activeTab !== message.client_id) {
         // Play sound
         // const audio = new Audio(notificationSound); // Adjust the path if necessary
         // audio.play().catch(err => {
@@ -571,10 +598,10 @@ const Chat = () => {
     socketinst.on("visitor status change", handleVisitorStatusChange);
     socketinst.on("chat message", handleChatMessage);
     socketinst.on("New message blink", handleNewMessageBlink);
-    socketinst.on("client data updated", handleClientDataUpdate);
+    socketinst.on('client data updated', handleClientDataUpdate);
     socketinst.on("message_seen", handleMessageSeen);
     socketinst.on("visitor_already_left", (data) => {
-      const decryptedData = decryptData(data);
+  const decryptedData = decryptData(data)
 
       customOnClick();
     });
@@ -587,7 +614,7 @@ const Chat = () => {
       socketinst.off("visitor status change", handleVisitorStatusChange);
       socketinst.off("New message blink", handleNewMessageBlink);
       socketinst.off("chat message", handleChatMessage);
-      socketinst.off("client data updated", handleClientDataUpdate);
+      socketinst.off('client data updated', handleClientDataUpdate);
       socketinst.off("message_seen", handleMessageSeen);
       // socketinst.off('chat message', handleChatMessage);
     };
@@ -599,9 +626,12 @@ const Chat = () => {
     }, 3000);
   };
   const handleVisitorClick = (visitor) => {
-    if (user.is_private == 1 && visitor.servedBy == "") {
-      return;
-    }
+    
+    
+    
+      if(user.is_private == 1 && visitor.servedBy == ""){
+        return
+      }
     if (activeTab && activeTab === visitor.client_id) {
       setHideColumns(false);
       dispatch(minimize({ client_id: activeTab }));
@@ -609,7 +639,7 @@ const Chat = () => {
         chatKey: `${visitor.public_key}_${visitor.client_id}`,
         from: user?.pseudonym,
       });
-
+  
       socket.emit("admin_closed_chat", {
         client_id: visitor.client_id,
         public_key: visitor.public_key,
@@ -622,7 +652,7 @@ const Chat = () => {
         setHideColumns(false);
         dispatch(minimize({ client_id: activeTab }));
       }
-
+  
       // Create a new copy of the visitor object
       const updatedVisitor = {
         ...visitor,
@@ -633,13 +663,15 @@ const Chat = () => {
       const visitorCopy = { ...updatedVisitor };
       delete visitorCopy.online;
       delete visitorCopy.join_time;
-
+      
       setCurrentChat(updatedVisitor);
-
+  
+  
       socket.emit("join chat", updatedVisitor);
-
+  
       let updatedVi = { ...visitorCopy }; // Clone the visitorCopy object
-
+      
+  
       if (visitor.servedBy) {
         updatedVi = {
           ...updatedVi, // Keep existing visitor data
@@ -651,13 +683,14 @@ const Chat = () => {
           servedBy: false, // Add/Update servedBy flag
         };
       }
-
+  
       // Dispatch action to add the updated tab in the Redux store
       dispatch(addTab(updatedVi));
-
+  
       setHideColumns(true);
     }
   };
+  
 
   const handleVisitorNameClick = () => {
     setHideColumns(!hideColumns);
@@ -681,20 +714,20 @@ const Chat = () => {
   };
 
   const handleShowPkChange = (e) => {
-    setIsShowPK(e.target.checked);
+        setIsShowPK(e.target.checked);
   };
 
   // Categorize visitors, adding "Not Served" category
   const categorizedVisitors = {
     active: filteredVisitors.filter(
-      (v) => (v.visitorStatus === 1 || v.visitorStatus === 5) && v.servedBy,
+      (v) => (v.visitorStatus === 1 || v.visitorStatus === 5) && v.servedBy
     ), // Exclude not served
     notServed: filteredVisitors.filter((v) => !v.servedBy), // New category for visitors not served
     idle: filteredVisitors.filter((v) => v.visitorStatus === 2 && v.servedBy), // Exclude not served from idle
     closed: filteredVisitors.filter((v) => v.visitorStatus === 3 && v.servedBy), // Exclude not served from closed
   };
   const noVisitorsFound = Object.values(categorizedVisitors).every(
-    (category) => category.length === 0,
+    (category) => category.length === 0
   );
   const [collapsedSections, setCollapsedSections] = useState({
     active: false,
@@ -705,16 +738,16 @@ const Chat = () => {
   const countPakistaniVisitors = () => {
     const counts = {
       active: categorizedVisitors.active.filter(
-        (visitor) => visitor.country === "Pakistan",
+        (visitor) => visitor.country === "Pakistan"
       ).length,
       notServed: categorizedVisitors.notServed.filter(
-        (visitor) => visitor.country === "Pakistan",
+        (visitor) => visitor.country === "Pakistan"
       ).length,
       idle: categorizedVisitors.idle.filter(
-        (visitor) => visitor.country === "Pakistan",
+        (visitor) => visitor.country === "Pakistan"
       ).length,
       closed: categorizedVisitors.closed.filter(
-        (visitor) => visitor.country === "Pakistan",
+        (visitor) => visitor.country === "Pakistan"
       ).length,
     };
     return counts;
@@ -779,166 +812,171 @@ const Chat = () => {
         <div className="right-div"></div>
       </div>
       <div className="container-fluid company-header">
-        <div className="comp-header-row chat-header">
-          <button className="btn me-2" onClick={toggleFilterChats}>
-            Filter
-          </button>
-          {selectedBrandNames.length > 0 && (
-            <div className="selected-brands">
-              {selectedBrandNames.map((name, index) => (
-                <span key={index} className="chat-brand-name">
-                  {name}
-                </span>
-              ))}
-            </div>
-          )}
-        </div>
+      <div className="comp-header-row chat-header">
+        <button className="btn me-2" onClick={toggleFilterChats}>
+          Filter
+        </button>
+        {selectedBrandNames.length > 0 && (
+          <div className="selected-brands">
+            {selectedBrandNames.map((name, index) => (
+              <span key={index} className="chat-brand-name">
+                {name}
+              </span>
+            ))}
+          </div>
+        )}
+      </div>
 
-        <div className={`chat-filter-wrapper ${showFilter ? "show" : "hide"}`}>
-          <FilterChats
-            onClose={toggleFilterChats}
-            setBrands={setBrands}
-            brands={brands}
-            setFilteredBrands={setFilteredBrand}
-            filteredBrands={filteredBrand}
-          />
-        </div>
+      <div
+        className={`chat-filter-wrapper ${
+          showFilter ? "show" : "hide"
+        }`}
+      >
+        <FilterChats onClose={toggleFilterChats}  setBrands={setBrands} brands={brands} setFilteredBrands={setFilteredBrand} filteredBrands={filteredBrand}  />
       </div>
+    </div>
       <div
         className={`chat-visitor-container ${activeTab ? "half-width" : ""}`}
       >
-        {noVisitorsFound ? (
-          <div className="no-visitor-found">
-            <h3>No visitor found.</h3>
-          </div>
-        ) : (
-          <div
-            className={`chat-main-content mt-3 ${
-              activeTab ? "half-width" : ""
-            }`}
-          >
-            {categorizedVisitors.active.length > 0 && (
-              <>
-                <h3
-                  onClick={() => toggleSection("active")}
-                  className="collapsible-header"
-                >
-                  Active Visitors (
-                  {IsShowPK
-                    ? categorizedVisitors.active.length
-                    : categorizedVisitors.active.length -
-                      categorizedVisitors.active.filter(
-                        (visitor) => visitor.country === "Pakistan",
-                      ).length}
-                  )<span> {collapsedSections.active ? "+" : "-"}</span>
-                </h3>
-
-                {!collapsedSections.active && (
-                  <VisitorTable
-                    visitors={categorizedVisitors.active}
-                    copyChatId={copyChatId}
-                    onVisitorNameClick={handleVisitorClick}
-                    hideColumns={hideColumns}
-                    blinkingVisitor={blinkingVisitor}
-                    copyVisitorId={copyVisitorId}
-                    type="active_visitor_chat"
-                    IsShowPK={IsShowPK}
-                  />
-                )}
-              </>
-            )}
-
-            {categorizedVisitors.notServed.length > 0 && (
-              <>
-                <h3
-                  onClick={() => toggleSection("notServed")}
-                  className="collapsible-header mt-3"
-                >
-                  Not Served Visitors (
-                  {IsShowPK
-                    ? categorizedVisitors.notServed.length
-                    : categorizedVisitors.notServed.length -
-                      categorizedVisitors.notServed.filter(
-                        (visitor) => visitor.country === "Pakistan",
-                      ).length}
-                  )<span> {collapsedSections.notServed ? "+" : "-"}</span>
-                </h3>
-                {!collapsedSections.notServed && (
-                  <VisitorTable
-                    visitors={categorizedVisitors.notServed}
-                    copyChatId={copyChatId}
-                    onVisitorNameClick={handleVisitorClick}
-                    hideColumns={hideColumns}
-                    blinkingVisitor={blinkingVisitor}
-                    copyVisitorId={copyVisitorId}
-                    IsShowPK={IsShowPK}
-                    type="note_served"
-                  />
-                )}
-              </>
-            )}
-
-            {categorizedVisitors.closed.length > 0 && (
-              <>
-                <h3
-                  onClick={() => toggleSection("closed")}
-                  className="collapsible-header mt-3"
-                >
-                  Closed Chats (
-                  {IsShowPK
-                    ? categorizedVisitors.closed.length
-                    : categorizedVisitors.closed.length -
-                      categorizedVisitors.closed.filter(
-                        (visitor) => visitor.country === "Pakistan",
-                      ).length}
-                  )<span> {collapsedSections.closed ? "+" : "-"}</span>
-                </h3>
-                {!collapsedSections.closed && (
-                  <VisitorTable
-                    visitors={categorizedVisitors.closed}
-                    copyChatId={copyChatId}
-                    onVisitorNameClick={handleVisitorClick}
-                    hideColumns={hideColumns}
-                    blinkingVisitor={blinkingVisitor}
-                    copyVisitorId={copyVisitorId}
-                    type="closed_chat_visitor"
-                    IsShowPK={IsShowPK}
-                  />
-                )}
-              </>
-            )}
-
-            {categorizedVisitors.idle.length > 0 && (
-              <>
-                <h3
-                  onClick={() => toggleSection("idle")}
-                  className="collapsible-header mt-3"
-                >
-                  Idle Visitors (
-                  {IsShowPK
-                    ? categorizedVisitors.idle.length
-                    : categorizedVisitors.idle.length -
-                      categorizedVisitors.idle.filter(
-                        (visitor) => visitor.country === "Pakistan",
-                      ).length}
-                  )<span> {collapsedSections.idle ? "+" : "-"}</span>
-                </h3>
-                {!collapsedSections.idle && (
-                  <VisitorTable
-                    visitors={categorizedVisitors.idle}
-                    copyChatId={copyChatId}
-                    onVisitorNameClick={handleVisitorClick}
-                    hideColumns={hideColumns}
-                    blinkingVisitor={blinkingVisitor}
-                    copyVisitorId={copyVisitorId}
-                    type="idle_visitor_chat"
-                    IsShowPK={IsShowPK}
-                  />
-                )}
-              </>
-            )}
-          </div>
-        )}
+         {noVisitorsFound ? (
+        <div className="no-visitor-found">
+          <h3>No visitor found.</h3>
+        </div>
+      ) :(
+        <div
+          className={`chat-main-content mt-3 ${
+            activeTab ? "half-width" : ""
+          }`}
+        >
+          {categorizedVisitors.active.length > 0 && (
+            <>
+              <h3 onClick={() => toggleSection("active")} className="collapsible-header">
+                Active Visitors{" "}
+                (
+                {IsShowPK
+                  ? categorizedVisitors.active.length
+                  : categorizedVisitors.active.length -
+                    categorizedVisitors.active.filter(
+                      (visitor) => visitor.country === "Pakistan"
+                    ).length}
+                )
+                <span> {" "}{collapsedSections.active ? "+" : "-"}</span>
+              </h3>
+      
+              {!collapsedSections.active && (
+                <VisitorTable
+                  visitors={categorizedVisitors.active}
+                  copyChatId={copyChatId}
+                  onVisitorNameClick={handleVisitorClick}
+                  hideColumns={hideColumns}
+                  blinkingVisitor={blinkingVisitor}
+                  copyVisitorId={copyVisitorId}
+                  type="active_visitor_chat"
+                  IsShowPK={IsShowPK}
+                />
+              )}
+            </>
+          )}
+      
+          {categorizedVisitors.notServed.length > 0 && (
+            <>
+              <h3
+                onClick={() => toggleSection("notServed")}
+                className="collapsible-header mt-3"
+              >
+                Not Served Visitors{" "}
+                (
+                {IsShowPK
+                  ? categorizedVisitors.notServed.length
+                  : categorizedVisitors.notServed.length -
+                    categorizedVisitors.notServed.filter(
+                      (visitor) => visitor.country === "Pakistan"
+                    ).length}
+                )
+                <span> {" "}{collapsedSections.notServed ? "+" : "-"}</span>
+              </h3>
+              {!collapsedSections.notServed && (
+                <VisitorTable
+                  visitors={categorizedVisitors.notServed}
+                  copyChatId={copyChatId}
+                  onVisitorNameClick={handleVisitorClick}
+                  hideColumns={hideColumns}
+                  blinkingVisitor={blinkingVisitor}
+                  copyVisitorId={copyVisitorId}
+                  IsShowPK={IsShowPK}
+                  type="note_served"
+                />
+              )}
+            </>
+          )}
+      
+          {categorizedVisitors.closed.length > 0 && (
+            <>
+              <h3
+                onClick={() => toggleSection("closed")}
+                className="collapsible-header mt-3"
+              >
+                Closed Chats{" "}
+                (
+                {IsShowPK
+                  ? categorizedVisitors.closed.length
+                  : categorizedVisitors.closed.length -
+                    categorizedVisitors.closed.filter(
+                      (visitor) => visitor.country === "Pakistan"
+                    ).length}
+                )
+                <span> {" "}{collapsedSections.closed ? "+" : "-"}</span>
+              </h3>
+              {!collapsedSections.closed && (
+                <VisitorTable
+                  visitors={categorizedVisitors.closed}
+                  copyChatId={copyChatId}
+                  onVisitorNameClick={handleVisitorClick}
+                  hideColumns={hideColumns}
+                  blinkingVisitor={blinkingVisitor}
+                  copyVisitorId={copyVisitorId}
+                  type="closed_chat_visitor"
+                  IsShowPK={IsShowPK}
+                />
+              )}
+            </>
+          )}
+      
+          {categorizedVisitors.idle.length > 0 && (
+            <>
+              <h3
+                onClick={() => toggleSection("idle")}
+                className="collapsible-header mt-3"
+              >
+                Idle Visitors{" "}
+                (
+                {IsShowPK
+                  ? categorizedVisitors.idle.length
+                  : categorizedVisitors.idle.length -
+                    categorizedVisitors.idle.filter(
+                      (visitor) => visitor.country === "Pakistan"
+                    ).length}
+                )
+                <span> {" "}{collapsedSections.idle ? "+" : "-"}</span>
+              </h3>
+              {!collapsedSections.idle && (
+                <VisitorTable
+                  visitors={categorizedVisitors.idle}
+                  copyChatId={copyChatId}
+                  onVisitorNameClick={handleVisitorClick}
+                  hideColumns={hideColumns}
+                  blinkingVisitor={blinkingVisitor}
+                  copyVisitorId={copyVisitorId}
+                  type="idle_visitor_chat"
+                  IsShowPK={IsShowPK}
+                />
+              )}
+            </>
+          )}
+        </div>
+      )
+      
+      }
 
         {/* {hideColumns && <ChatVisitor currentChat={currentChat} setHideColumns={setHideColumns}  setCurrentChat={setCurrentChat} originalJoinTimes={originalJoinTimes} />} */}
       </div>
@@ -956,8 +994,8 @@ const VisitorTable = ({
   type,
   IsShowPK,
 }) => {
-  const { activeTab } = useSelector((state) => state.chat);
-
+  const {  activeTab } = useSelector((state) => state.chat);
+ 
   return (
     <table className="chat-stats-table">
       <thead className={`${type}`}>
@@ -980,6 +1018,7 @@ const VisitorTable = ({
         </tr>
       </thead>
       <tbody>
+        
         {visitors.map((visitor, index) => (
           <VisitorRow
             key={index}
@@ -1029,24 +1068,25 @@ const VisitorRow = ({
   join_time,
 }) => {
   const [onlineTime, setOnlineTime] = useState("");
-
+   
   // Calculate the online time based on the joinTime
   const calculateOnlineTime = useCallback(() => {
     const now = new Date();
-
+   
+    
     const onlineDate = online && Number(online) > 0 ? new Date(online) : now;
     const diffMs = now - new Date(onlineDate);
     const diffMins = Math.floor(diffMs / (1000 * 60));
     const diffHrs = Math.floor(diffMins / 60);
     const remainingMins = diffMins % 60;
-
+    
     return `${diffHrs > 0 ? diffHrs + "h " : ""}${remainingMins}m`;
   }, [online]);
 
   // Use `useMemo` to calculate the initial `onlineTime` and prevent unnecessary re-renders
   const initialOnlineTime = useMemo(
     () => calculateOnlineTime(),
-    [calculateOnlineTime],
+    [calculateOnlineTime]
   );
 
   useEffect(() => {
@@ -1061,6 +1101,8 @@ const VisitorRow = ({
     return () => clearInterval(interval);
   }, [calculateOnlineTime, initialOnlineTime]);
 
+
+
   // Helper to get browser name
   const getBrowserName = (browser) => {
     if (browser?.includes("Chrome")) {
@@ -1131,50 +1173,10 @@ const VisitorRow = ({
     }
   };
 
-  const getDeviceType = (deviceSizeStr) => {
-    try {
-      if (!deviceSizeStr) return "unknown";
-      let sizeObj =
-        typeof deviceSizeStr === "string"
-          ? JSON.parse(deviceSizeStr)
-          : deviceSizeStr;
-      return sizeObj?.type || "unknown";
-    } catch (e) {
-      return "unknown";
-    }
-  };
-
-  const getDeviceIcon = (deviceSizeStr) => {
-    const type = getDeviceType(deviceSizeStr).toLowerCase();
-    if (type === "mobile") {
-      return (
-        <FaMobileAlt
-          className="device-icon"
-          style={{ color: "#555", fontSize: "16px", marginLeft: "4px" }}
-        />
-      );
-    } else if (type === "tablet") {
-      return (
-        <FaTabletAlt
-          className="device-icon"
-          style={{ color: "#555", fontSize: "16px", marginLeft: "4px" }}
-        />
-      );
-    } else if (type === "desktop") {
-      return (
-        <FaDesktop
-          className="device-icon"
-          style={{ color: "#555", fontSize: "16px", marginLeft: "4px" }}
-        />
-      );
-    }
-    return null;
-  };
-
   // Helper to get country flag as an image
 
   const currentVisitorData = blinkingVisitor.find(
-    (v) => v.client_id === visitor.client_id,
+    (v) => v.client_id === visitor.client_id
   );
   const unseenCount = currentVisitorData ? currentVisitorData.unseenCount : 0;
 
@@ -1191,17 +1193,18 @@ const VisitorRow = ({
     ) : null;
   };
 
-  const { activeTab } = useSelector((state) => state.chat);
+  const {   activeTab } = useSelector((state) => state.chat);
   return (
     <tr
-      className={`${unseenMsg > 0 ? "new-message-blink-row" : ""}   visitor-row-new ${
+      className={`${unseenMsg > 0 ? "new-message-blink-row":""}   visitor-row-new ${
         visitor?.country === "Pakistan" && !IsShowPK
           ? "hide-pakistan-visitors"
           : ""
       }   
     ${activeTab === chatId ? "active-history-row" : ""} `}
-      onClick={() => onVisitorNameClick(visitor)}
+    onClick={() => onVisitorNameClick(visitor)}
     >
+     
       {visitor?.country === "Pakistan" && !IsShowPK}
 
       <td>
@@ -1256,15 +1259,6 @@ const VisitorRow = ({
             <div className="tooltip-arrow"></div>
           </span>
         </div>
-
-        {/* Device Icon with Tooltip */}
-        <div className="tooltip">
-          {getDeviceIcon(visitor?.device_size)}
-          <span className="tooltiptext" style={{ minWidth: "120px" }}>
-            Device: {getDeviceType(visitor?.device_size)}
-            <div className="tooltip-arrow"></div>
-          </span>
-        </div>
       </td>
 
       <td>{totalMessages}</td>
@@ -1273,16 +1267,17 @@ const VisitorRow = ({
         {visitorStatus == 1 || 5
           ? onlineTime
           : visitorStatus == 2
-            ? "idle"
-            : visitorStatus == 3
-              ? "close chat"
-              : ""}
+          ? "idle"
+          : visitorStatus == 3
+          ? "close chat"
+          : ""}
       </td>
 
       <td>{servedBy}</td>
       <td data-title={viewing} className="brand-tooltip">
-        {brand_name}
-      </td>
+  {brand_name}
+</td>
+
 
       {/* <td className={activeTab ? 'd-none' : ''} >{servedBy}</td>
      <td className={activeTab ? 'd-none' : ''} >{brand_name}</td> */}
@@ -1298,5 +1293,6 @@ const VisitorRow = ({
     </tr>
   );
 };
-
+ 
 export default Chat;
+ 
\ No newline at end of file
diff --git "a/C:\\chatknot\\app/(dashboard)/history/page.js" "b/C:\\chatknot\\old backup\\app/(dashboard)/history/page.js"
index a20e626..3c668a0 100644
--- "a/C:\\chatknot\\app/(dashboard)/history/page.js"
+++ "b/C:\\chatknot\\old backup\\app/(dashboard)/history/page.js"	
@@ -1,5 +1,5 @@
 "use client";
-import { useState, useEffect, useCallback, useRef, useMemo } from "react";
+import { useState, useEffect, useCallback, useRef } from "react";
 import { useSelector } from "react-redux";
 import { countryNameToCode } from "@/app/countries";
 import { getSocket } from "@/app/lib/socketManager";
@@ -32,10 +32,10 @@ const History = () => {
   const [error, setError] = useState(null);
   const [currentPage, setCurrentPage] = useState(1);
   const [totalPages, setTotalPages] = useState(1);
-  const user = useSelector((state) => state.user.userInfo);
-  const limit = user?.userId === 111 ? 25 : 50;
+  const limit = 50;
   const [socket, setSocket] = useState(null);
   const [hideColumns, setHideColumns] = useState(false);
+  const user = useSelector((state) => state.user.userInfo);
   const [searchTerm, setSearchTerm] = useState(""); // New search term state
   const [chatSessionId, SetChatSessionId] = useState();
   const [NewHistoryRecieved, setNewHistoryRecieved] = useState([]);
@@ -53,7 +53,7 @@ const History = () => {
   const [filterCurrentPage, setFilterCurrentPage] = useState(1);
   const [filterTotalPages, setFilterTotalPages] = useState(1);
   const [servedStatus, setservedStatus] = useState("all");
-  const [connectedStatus, setconnectedStatus] = useState("all");
+const [connectedStatus, setconnectedStatus] = useState("all");
   const token = getCookie("token");
   // const [selectedBrands, setSelectedBrands] = useState([]);
   const [filteredTotalRecords, setfilteredTotalRecords] = useState(0);
@@ -68,10 +68,9 @@ const History = () => {
   const [showSettings, setShowSettings] = useState(false);
   const [selectedBrands, setSelectedBrands] = useState([]);
   const [brands, setBrands] = useState([]);
-  const [filteredBrands, setFilteredBrand] = useState([]);
+  const [filteredBrands, setFilteredBrand] = useState();
 
   const [dateRange, setDateRange] = useState(null);
-  const [activePreset, setActivePreset] = useState(null);
 
   // const filteredBrands = allBrands.filter((brand) =>
   //   brand.toLowerCase().includes(brandSearch.toLowerCase())
@@ -86,8 +85,8 @@ const History = () => {
       prevVisitors.map((visitor) =>
         visitor.visitor_session_id === visitorSessionId
           ? { ...visitor, IP_Health: newIpHealth }
-          : visitor,
-      ),
+          : visitor
+      )
     );
   };
 
@@ -120,6 +119,7 @@ const History = () => {
     };
   }, [showSettings]);
 
+
   const applyDateRange = async () => {
     setLoading(true);
     setisFiltering(true);
@@ -133,16 +133,12 @@ const History = () => {
     setShowDatePicker(false); // Close date picker after applying the date range
 
     try {
-      const response = await apiRequest(
-        "/api/client/visitor-history-filterbydate",
-        "POST",
-        {
-          user_id: user.userId, // Pass user ID from state or context
-          start_date: formattedStartDate, // Start date of the range
-          end_date: formattedEndDate, // End date of the range
-        },
-      );
-
+      const response = await apiRequest('/api/client/visitor-history-filterbydate','POST',{
+        user_id: user.userId, // Pass user ID from state or context
+        start_date: formattedStartDate, // Start date of the range
+        end_date: formattedEndDate, // End date of the range
+      })
+      
       // const data = await response.json();
 
       if (response) {
@@ -168,7 +164,7 @@ const History = () => {
     //       }
     //     );
     //     setBrands(response.data);
-    //
+    //     
     //     setFilteredBrand(response.data);
     //     // Map over fetched brands to extract their IDs and add them to selectedBrands
     //     setSelectedBrands((prev) => [
@@ -182,16 +178,9 @@ const History = () => {
 
     const fetchBrands = async () => {
       try {
-        const forchat = {
-          forChat: true,
-        };
-        const response = await apiRequest(
-          `api/companies/${user.company_id}/brands`,
-          "GET",
-          forchat,
-        );
+        const response = await apiRequest(`api/companies/${user.company_id}/brands`,"GET");
         setBrands(response);
-
+        
         setFilteredBrand(response);
         setSelectedBrands((prev) => [
           ...prev,
@@ -208,29 +197,18 @@ const History = () => {
   const handleSearchBrandChange = (e) => {
     setBrandSearch(e.target.value);
     const filtered = brands.filter((brand) =>
-      brand.name.toLowerCase().includes(e.target.value.toLowerCase()),
+      brand.name.toLowerCase().includes(e.target.value.toLowerCase())
     );
     setFilteredBrand(filtered);
   };
   const selectAllBrands = () => {
     const allBrandIds = filteredBrands.map((brand) => brand.id);
-    const areAllSelected = allBrandIds.every((id) =>
-      selectedBrands.includes(id),
-    );
-
+    const areAllSelected = allBrandIds.every((id) => selectedBrands.includes(id));
+ 
     if (!areAllSelected) {
       setSelectedBrands(allBrandIds);
-
-      searchVisitors(
-        searchTerm,
-        servedStatus,
-        connectedStatus,
-        includeClientId,
-        includeEmail,
-        includeMsg,
-        includeName,
-        selectedBrands,
-      );
+     
+      searchVisitors(searchTerm, servedStatus, connectedStatus,includeClientId,includeEmail,includeMsg,includeName,selectedBrands);
       setFilterCurrentPage(1);
       setIsBrandChange((prev) => {
         // Ensure all brand IDs are toggled in the `isBrandChange` array
@@ -254,6 +232,7 @@ const History = () => {
       });
     }
   };
+  
 
   const unselectAllBrands = () => {
     setSelectedBrands([]);
@@ -273,7 +252,7 @@ const History = () => {
     const socketinst = getSocket();
     if (!socketinst) return;
     const handleUpdateHistory = (data) => {
-      const decryptedData = decryptData(data);
+      const decryptedData = decryptData(data)
 
       // Assuming data contains the fields you specified
       const {
@@ -347,7 +326,7 @@ const History = () => {
       year: "numeric",
     };
     const datePart = new Intl.DateTimeFormat("en-US", dateOptions).format(
-      serverUtcTime,
+      serverUtcTime
     );
 
     // Format the time part
@@ -359,7 +338,7 @@ const History = () => {
       hour12: true, // 12-hour format
     };
     const timePart = new Intl.DateTimeFormat("en-US", timeOptions).format(
-      serverUtcTime,
+      serverUtcTime
     );
 
     // Combine the date and time parts
@@ -393,9 +372,11 @@ const History = () => {
     const updatedBrands = selectedBrands.includes(brand.id)
       ? selectedBrands.filter((id) => id !== brand.id)
       : [...selectedBrands, brand.id];
-
+  
     setSelectedBrands(updatedBrands); // Update the state with the new list
-
+  
+    
+  
     // Pass the updated list to the search function
     searchVisitors(
       searchTerm,
@@ -408,6 +389,7 @@ const History = () => {
       updatedBrands, // Pass the updated brands list here
     );
   };
+  
 
   //opening side tab
   const openSideTab = (chatSession) => {
@@ -424,8 +406,8 @@ const History = () => {
       setNewHistoryRecieved((prevState) =>
         prevState.filter(
           (history) =>
-            history.visitor_session_id !== chatSession.visitor_session_id,
-        ),
+            history.visitor_session_id !== chatSession.visitor_session_id
+        )
       );
       setHideColumns(true);
     }
@@ -456,7 +438,8 @@ const History = () => {
 
   // Handle sorting columns
   // Debounced search function with pagination
-
+  
+  
   const searchVisitors = useCallback(
     debounce(
       async (
@@ -468,13 +451,16 @@ const History = () => {
         includeMsg = true,
         includeName = true,
         selectedBrands = filteredBrands.map((brand) => brand.id),
-        page = 1,
-      ) => {
+        page = 1
+        ) => {
         setisFiltering(true);
         setLoading(true);
         setError(null);
-
+  
         try {
+          
+          
+  
           // Build the payload dynamically
           const payload = {
             user_id: user.userId,
@@ -487,7 +473,7 @@ const History = () => {
             currentPage: page,
             itemsPerPage: 10,
           };
-
+  
           // Use passed arguments if available; otherwise, fallback to state
           if (statusServed) {
             payload.servedStatus = statusServed;
@@ -495,11 +481,7 @@ const History = () => {
           if (statusConnected) {
             payload.connectedStatus = statusConnected;
           }
-          const response = await apiRequest(
-            "/api/client/visitor-history-search",
-            "POST",
-            payload,
-          );
+            const response =await apiRequest('/api/client/visitor-history-search','POST',(payload))
           // const response = await fetch(
           //   `${process.env.NEXT_PUBLIC_API_URL}/api/client/visitor-history-search`,
           //   {
@@ -510,159 +492,103 @@ const History = () => {
           //     body: JSON.stringify(payload),
           //   }
           // );
-
+  
           // const data = await response.json();
-
+            
+            
           if (response) {
+            
             setVisitors(response.SearchData.sessionRows);
             setfilteredTotalRecords(response.SearchData.totalRecords);
-            setFilterTotalPages(
-              Math.ceil(response.SearchData.totalRecords / 50),
-            );
+            setFilterTotalPages(Math.ceil(response.SearchData.totalRecords / 50));
           } else {
             setError("Failed to fetch search results");
           }
         } catch (err) {
           setError("An error occurred while searching");
         }
-
+  
         setLoading(false);
       },
-      500,
+      500
     ),
-    [
-      selectedBrands,
-      includeName,
-      includeEmail,
-      includeClientId,
-      includeMsg,
-      servedStatus,
-      connectedStatus,
-    ],
+    [selectedBrands, includeName, includeEmail, includeClientId, includeMsg, servedStatus, connectedStatus]
   );
+  
+  
 
   const handleFilterChange = (filterType, value) => {
     switch (filterType) {
       case "includeName":
-        setIncludeName(!includeName);
-        if (searchTerm.length > 0)
-          searchVisitors(
-            searchTerm,
-            servedStatus,
-            connectedStatus,
-            includeClientId,
-            includeEmail,
-            includeMsg,
-            !includeName,
-            selectedBrands,
-          );
+        setIncludeName(!includeName );
+        if(searchTerm.length>0)
+          searchVisitors(searchTerm, servedStatus, connectedStatus,includeClientId,includeEmail,includeMsg,!includeName,selectedBrands);
         break;
       case "includeEmail":
         setIncludeEmail(!includeEmail);
-        if (searchTerm.length > 0)
-          searchVisitors(
-            searchTerm,
-            servedStatus,
-            connectedStatus,
-            includeClientId,
-            !includeEmail,
-            includeMsg,
-            includeName,
-            selectedBrands,
-          );
+         if(searchTerm.length>0)
+        searchVisitors(searchTerm, servedStatus, connectedStatus,includeClientId,!includeEmail,includeMsg,includeName,selectedBrands);
         break;
       case "includeClientId":
         setIncludeClientId(!includeClientId);
         // searchVisitors(!includeClientId)
-        if (searchTerm.length > 0)
-          searchVisitors(
-            searchTerm,
-            servedStatus,
-            connectedStatus,
-            !includeClientId,
-            includeEmail,
-            includeMsg,
-            includeName,
-            selectedBrands,
-          );
+        if(searchTerm.length>0)
+          searchVisitors(searchTerm, servedStatus, connectedStatus,!includeClientId,includeEmail,includeMsg,includeName,selectedBrands);
         break;
       case "includeMsg":
         setincludeMsg(!includeMsg);
-        if (searchTerm.length > 0)
-          searchVisitors(
-            searchTerm,
-            servedStatus,
-            connectedStatus,
-            includeClientId,
-            includeEmail,
-            !includeMsg,
-            includeName,
-            selectedBrands,
-          );
+        if(searchTerm.length>0)
+          searchVisitors(searchTerm, servedStatus, connectedStatus,includeClientId,includeEmail,!includeMsg,includeName,selectedBrands);
         break;
       default:
         break;
     }
+    
 
     // searchVisitors(searchTerm);
   };
-  const handleStatusChange = (statusType, value) => {
-    if (statusType === "servedStatus") {
-      setservedStatus(value);
-
-      searchVisitors(
-        searchTerm,
-        value,
-        connectedStatus,
-        includeClientId,
-        includeEmail,
-        includeMsg,
-        includeName,
-        selectedBrands,
-      );
-    } else if (statusType === "connectedStatus") {
-      setconnectedStatus(value);
-
-      searchVisitors(
-        searchTerm,
-        servedStatus,
-        value,
-        includeClientId,
-        includeEmail,
-        includeMsg,
-        includeName,
-        selectedBrands,
-      ); // Pass the current `servedStatus` and the updated `connectedStatus`
-    }
-  };
+const handleStatusChange = (statusType, value) => {
+  if (statusType === "servedStatus") {
+    setservedStatus(value);
+    
+      searchVisitors(searchTerm, value, connectedStatus,includeClientId,includeEmail,includeMsg,includeName,selectedBrands);
+  } else if (statusType === "connectedStatus") {
+    setconnectedStatus(value);
+  
+      searchVisitors(searchTerm, servedStatus, value,includeClientId,includeEmail,includeMsg,includeName,selectedBrands); // Pass the current `servedStatus` and the updated `connectedStatus`
+  }
+};
 
+  
   // useEffect(() => {
   //   setFilterCurrentPage(1);
   //   searchVisitors(searchTerm);
   // }, [servedStatus,connectedStatus])
-
+  
   // useEffect(() => {
-  //
+  //   
   //   if(IsBrandChange.length >0){
   //     setFilterCurrentPage(1);
   //     // searchVisitors(searchTerm);
-
+ 
+     
   //       searchVisitors(searchTerm, servedStatus, connectedStatus,includeClientId,includeEmail,includeMsg,includeName,selectedBrands);
-  //
+  //     
   //   }
-
+ 
   // }, [
   //   searchTerm,
-
+  
   //   IsBrandChange,
-
+  
   // ]);
 
   // useEffect(() => {
   //   if (isFiltering) {
-  //
-  //
-
+  //     
+  //     
+      
+       
   //       searchVisitors(searchTerm, servedStatus, connectedStatus,!includeClientId,includeEmail,includeMsg,includeName,filterCurrentPage);
   //   }
   // }, [filterCurrentPage]);
@@ -683,34 +609,21 @@ const History = () => {
 
     setFilterTotalPages(1);
     setSearchTerm(term);
-
-    searchVisitors(
-      term,
-      servedStatus,
-      connectedStatus,
-      includeClientId,
-      includeEmail,
-      includeMsg,
-      includeName,
-      selectedBrands,
-    );
+   
+    
+      searchVisitors(term, servedStatus, connectedStatus,includeClientId,includeEmail,includeMsg,includeName,selectedBrands);
   };
 
   // Fetch data from the API
   const fetchVisitors = async (page) => {
     setLoading(true);
     setError(null);
-    console.log("fetchVisitors", page);
-    console.log("fetchVisitors", user.userId);
-    // Removed hardcoded block for user 111 to allow data loading
     try {
-      const response = await apiRequest(
-        `/api/client/visitor-history?page=${page}&limit=${limit}`,
-        "POST",
-        { user_id: user.userId },
-      );
+      
+      
+      const response =await apiRequest(`/api/client/visitor-history?page=${page}&limit=${limit}`,'POST',{user_id:user.userId})
       // const response = await fetch(
-
+      
       //   `${process.env.NEXT_PUBLIC_API_URL}/api/client/visitor-history?page=${page}&limit=${limit}`,
       //   {
       //     method: "POST", // Using POST instead of GET
@@ -724,6 +637,7 @@ const History = () => {
       // );
 
       // const data = await response.json();
+      
 
       if (response) {
         setVisitors(response.data); // assuming the API returns an array of results
@@ -734,7 +648,7 @@ const History = () => {
         setError("Failed to fetch data");
       }
     } catch (err) {
-      setError("Please try search using filters");
+      setError("An error occurred while fetching data");
     }
     setLoading(false);
   };
@@ -747,165 +661,35 @@ const History = () => {
   //   const eventSource = new EventSource(
   //     `${process.env.NEXT_PUBLIC_API_URL}/api/client/visitor-history-stream?user_id=${user.userId}&page=${page}&limit=${limit}`
   //   );
-
+  
+  
   //   setVisitors([]); // reset
   //   setLoading(true);
-
+  
   //   eventSource.onmessage = (e) => {
   //     const visitor = JSON.parse(e.data);
   //     console.log(visitor);
   //     setLoading(false)
   //     setVisitors(prev => [...prev, visitor]);
   //   };
-
+  
   //   eventSource.addEventListener("done", () => {
   //     setLoading(false);
   //     eventSource.close();
   //   });
-
+  
   //   eventSource.addEventListener("error", (e) => {
   //     console.error("SSE error", e);
   //     setError("Stream failed");
   //     setLoading(false);
   //     eventSource.close();
   //   });
-
+  
   //   return () => {
   //     eventSource.close();
   //   };
   // };
-
-  // Calculate analytics statistics for user 111
-  const analyticsStats = useMemo(() => {
-    if (user?.userId !== 111 || visitors.length === 0) return null;
-
-    const totalSessions = visitors.length;
-    const servedSessions = visitors.filter(
-      (v) => v.served_by && v.served_by !== "N/A",
-    ).length;
-    const notServedSessions = totalSessions - servedSessions;
-    const servedPercentage =
-      totalSessions > 0
-        ? ((servedSessions / totalSessions) * 100).toFixed(1)
-        : 0;
-
-    // Calculate top 3 brands
-    const brandCounts = {};
-    visitors.forEach((v) => {
-      if (v.brand_name && v.brand_name !== "N/A") {
-        brandCounts[v.brand_name] = (brandCounts[v.brand_name] || 0) + 1;
-      }
-    });
-    const topBrands = Object.entries(brandCounts)
-      .sort((a, b) => b[1] - a[1])
-      .slice(0, 3)
-      .map(([name, count]) => ({ name, count }));
-
-    // Calculate average session duration
-    let totalDuration = 0;
-    let validDurations = 0;
-    visitors.forEach((v) => {
-      if (v.join_time && v.left_time) {
-        const duration = new Date(v.left_time) - new Date(v.join_time);
-        if (duration > 0) {
-          totalDuration += duration;
-          validDurations++;
-        }
-      }
-    });
-    const avgDuration = validDurations > 0 ? totalDuration / validDurations : 0;
-    const avgDurationFormatted = formatDuration(avgDuration);
-
-    return {
-      totalSessions,
-      servedSessions,
-      notServedSessions,
-      servedPercentage,
-      topBrands,
-      avgDuration: avgDurationFormatted,
-    };
-  }, [visitors, user?.userId]);
-
-  // Helper function to format duration
-  const formatDuration = (ms) => {
-    const seconds = Math.floor(ms / 1000);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-
-    if (hours > 0) {
-      return `${hours}h ${minutes % 60}m`;
-    } else if (minutes > 0) {
-      return `${minutes}m ${seconds % 60}s`;
-    } else {
-      return `${seconds}s`;
-    }
-  };
-
-  // Quick filter preset handlers for user 111
-  const handleQuickPreset = (preset) => {
-    const today = new Date();
-    let startDate, endDate;
-
-    switch (preset) {
-      case "today":
-        startDate = new Date(today.setHours(0, 0, 0, 0));
-        endDate = new Date(today.setHours(23, 59, 59, 999));
-        break;
-      case "last7days":
-        endDate = new Date(today.setHours(23, 59, 59, 999));
-        startDate = new Date(today.setDate(today.getDate() - 7));
-        startDate.setHours(0, 0, 0, 0);
-        break;
-      case "last30days":
-        endDate = new Date(today.setHours(23, 59, 59, 999));
-        startDate = new Date(today.setDate(today.getDate() - 30));
-        startDate.setHours(0, 0, 0, 0);
-        break;
-      default:
-        return;
-    }
-
-    setActivePreset(preset);
-    setTempDateRange([{ startDate, endDate, key: "selection" }]);
-    setDateRange([{ startDate, endDate, key: "selection" }]);
-
-    // Apply the filter
-    const formattedStartDate = formatDateToMySQL(startDate);
-    const formattedEndDate = formatDateToMySQL(endDate);
-
-    setLoading(true);
-    setisFiltering(true);
-
-    apiRequest("/api/client/visitor-history-filterbydate", "POST", {
-      user_id: user.userId,
-      start_date: formattedStartDate,
-      end_date: formattedEndDate,
-    })
-      .then((response) => {
-        if (response) {
-          setLoading(false);
-          setVisitors(response.SearchData.sessionRows);
-          setfilteredTotalRecords(response.SearchData.totalRecords);
-        }
-      })
-      .catch((err) => {
-        setError("An error occurred while applying date filter");
-        setLoading(false);
-      });
-  };
-
-  // Auto-expand filter panel for user 111 on mount
-  useEffect(() => {
-    if (user?.userId === 111) {
-      // Only open on initial mount, don't close if user manually closes it
-      const timer = setTimeout(() => {
-        setShowSettings(true);
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [user?.userId]);
-
+  
   // Fetch visitors on component mount and when page changes
   useEffect(() => {
     fetchVisitors(currentPage);
@@ -916,6 +700,7 @@ const History = () => {
     if (currentPage < totalPages) {
       setCurrentPage((prev) => prev + 1);
     }
+    
   };
 
   const handlePreviousPage = () => {
@@ -924,30 +709,30 @@ const History = () => {
     }
   };
   const handleResetFilter = () => {
+ 
     setSearchTerm("");
     const allBrandIds = filteredBrands.map((brand) => brand.id);
-    const areAllSelected = allBrandIds.every((id) =>
-      selectedBrands.includes(id),
-    );
-
+    const areAllSelected = allBrandIds.every((id) => selectedBrands.includes(id));
+ 
     if (!areAllSelected) {
       setSelectedBrands(allBrandIds);
-
+     
       // searchVisitors(searchTerm, servedStatus, connectedStatus,includeClientId,includeEmail,includeMsg,includeName,selectedBrands);
       setFilterCurrentPage(1);
+    
     }
-
+     
     setfilteredTotalRecords(0);
     setIncludeName(true);
     setIncludeEmail(true);
     setIncludeClientId(true);
     setincludeMsg(true);
-    setservedStatus("all");
-    setconnectedStatus("all");
+    setservedStatus('all');
+    setconnectedStatus('all');
     setisFiltering(false);
     setVisitors(allVisitors);
   };
-
+  
   const getBrowserName = (browser) => {
     if (browser?.includes("Chrome")) {
       return "chrome";
@@ -1035,180 +820,172 @@ const History = () => {
         </div>
         <div className="right-div"></div>
       </div>
-      {showSettings && <div className="overlay"></div>}
+       {showSettings &&
+       
+        <div className="overlay"></div>
+       }
       <div className="comp-header-row d-flex justify-content-between flex-row-relative">
-        <div className="search-container">
-          <div className="input-group">
-            <input
-              type="text"
-              className="form-control"
-              placeholder="Search by name | email | phone..."
-              value={searchTerm}
-              onChange={handleSearchChange}
-            />
-            <span className="input-group-text history-search-icon bg-transparent border-0">
-              <FaSearch size={12} />
-            </span>
+      <div className="search-container">
+        <div className="input-group">
+          <input
+            type="text"
+            className="form-control"
+            placeholder="Search by name | email | phone..."
+            value={searchTerm}
+            onChange={handleSearchChange}
+          />
+          <span className="input-group-text history-search-icon bg-transparent border-0">
+            <FaSearch size={12} />
+          </span>
+          <span
+            className="input-group-text bg-transparent border-0"
+            onClick={() => toggleSettings(!showSettings)}
+            
+            title="filter"
+          >
+            <FaFilter size={12} />
+          </span>
+          {isFiltering && (
             <span
               className="input-group-text bg-transparent border-0"
-              onClick={() => toggleSettings(!showSettings)}
-              title="filter"
+              onClick={handleResetFilter}
+              title="reset"
             >
-              <FaFilter size={12} />
+              <FaFilterCircleXmark size={13} />
             </span>
-            {isFiltering && (
-              <span
-                className="input-group-text bg-transparent border-0"
-                onClick={handleResetFilter}
-                title="reset"
-              >
-                <FaFilterCircleXmark size={13} />
-              </span>
-            )}
-          </div>
+          )}
+        </div>
 
-          {showSettings && (
-            <div className="filter-overlay">
-              {/* Background Layer */}
-              <div
-                className="filter-background"
-                onClick={() => toggleSettings(false)}
-              ></div>
-
-              {/* Filter Bar */}
-              <div className="history-filter-bar" ref={filterRef}>
-                <div className="settings-dropdown">
-                  <h6>Filter Options</h6>
-                  <div className="checkbox-group">
-                    <div>
-                      <input
-                        type="checkbox"
-                        id="includeName"
-                        checked={includeName}
-                        onChange={(e) =>
-                          handleFilterChange("includeName", e.target.checked)
-                        }
-                      />
-                      <label htmlFor="includeName"> Name</label>
-                    </div>
-                    <div>
-                      <input
-                        type="checkbox"
-                        id="includeEmail"
-                        checked={includeEmail}
-                        onChange={(e) =>
-                          handleFilterChange("includeEmail", e.target.checked)
-                        }
-                      />
-                      <label htmlFor="includeEmail"> Email</label>
-                    </div>
-                    <div>
-                      <input
-                        type="checkbox"
-                        id="includeClientId"
-                        checked={includeClientId}
-                        onChange={(e) =>
-                          handleFilterChange(
-                            "includeClientId",
-                            e.target.checked,
-                          )
-                        }
-                      />
-                      <label htmlFor="includeClientId"> Client ID</label>
-                    </div>
-                    <div>
-                      <input
-                        type="checkbox"
-                        id="includeMsg"
-                        checked={includeMsg}
-                        onChange={(e) =>
-                          handleFilterChange("includeMsg", e.target.checked)
-                        }
-                      />
-                      <label htmlFor="includeMsg"> Messages</label>
-                    </div>
+        {showSettings && (
+          <div className="filter-overlay">
+            {/* Background Layer */}
+            <div className="filter-background" onClick={() => toggleSettings(false)}></div>
+
+            {/* Filter Bar */}
+            <div className="history-filter-bar" ref={filterRef}>
+              <div className="settings-dropdown">
+                <h6>Filter Options</h6>
+                <div className="checkbox-group">
+                  <div>
+                    <input
+                      type="checkbox"
+                      id="includeName"
+                      checked={includeName}
+                      onChange={(e) =>
+                        handleFilterChange("includeName", e.target.checked)
+                      }
+                    />
+                    <label htmlFor="includeName"> Name</label>
                   </div>
+                  <div>
+                    <input
+                      type="checkbox"
+                      id="includeEmail"
+                      checked={includeEmail}
+                      onChange={(e) =>
+                        handleFilterChange("includeEmail", e.target.checked)
+                      }
+                    />
+                    <label htmlFor="includeEmail"> Email</label>
+                  </div>
+                  <div>
+                    <input
+                      type="checkbox"
+                      id="includeClientId"
+                      checked={includeClientId}
+                      onChange={(e) =>
+                        handleFilterChange("includeClientId", e.target.checked)
+                      }
+                    />
+                    <label htmlFor="includeClientId"> Client ID</label>
+                  </div>
+                  <div>
+                    <input
+                      type="checkbox"
+                      id="includeMsg"
+                      checked={includeMsg}
+                      onChange={(e) =>
+                        handleFilterChange("includeMsg", e.target.checked)
+                      }
+                    />
+                    <label htmlFor="includeMsg"> Messages</label>
+                  </div>
+                </div>
 
-                  {/* Select Filters */}
-                  <div className="filter-select">
-                    <div className="select-row">
-                      <label htmlFor="servedStatus">Served Status</label>
-                      <select
-                        id="servedStatus"
-                        value={servedStatus}
-                        onChange={(e) =>
-                          handleStatusChange("servedStatus", e.target.value)
-                        }
-                      >
-                        <option value="all">All </option>
-                        <option value="not_served">Not Served</option>
-                        <option value="served">Served</option>
-                      </select>
-                    </div>
-
-                    <div className="select-row">
-                      <label htmlFor="connectedStatus">Connected Status</label>
-                      <select
-                        id="connectedStatus"
-                        value={connectedStatus}
-                        onChange={(e) =>
-                          handleStatusChange("connectedStatus", e.target.value)
-                        }
-                      >
-                        <option value="all">All </option>
-                        <option value="connected">Connected</option>
-                        <option value="not_connected">Not Connected</option>
-                      </select>
-                    </div>
+                {/* Select Filters */}
+                <div className="filter-select">
+                  <div className="select-row">
+                    <label htmlFor="servedStatus">Served Status</label>
+                    <select
+                      id="servedStatus"
+                      value={servedStatus}
+                      onChange={(e) =>
+                        handleStatusChange("servedStatus", e.target.value)
+                      }
+                    >
+                      <option value="all">All </option>
+                      <option value="not_served">Not Served</option>
+                      <option value="served">Served</option>
+                    </select>
                   </div>
 
-                  <div className="multi-select">
-                    <button type="button" onClick={toggleDropdown}>
-                      Select Brands
-                    </button>
-                    <div
-                      className={`multi-select-options ${
-                        isDropdownOpen ? "active" : ""
-                      }`}
+                  <div className="select-row">
+                    <label htmlFor="connectedStatus">Connected Status</label>
+                    <select
+                      id="connectedStatus"
+                      value={connectedStatus}
+                      onChange={(e) =>
+                        handleStatusChange("connectedStatus", e.target.value)
+                      }
                     >
-                      <div className="toggle-buttons">
-                        <button
-                          onClick={selectAllBrands}
-                          className="toggle-btn"
-                        >
-                          Select All
-                        </button>
-                        <button
-                          onClick={unselectAllBrands}
-                          className="toggle-btn"
-                        >
-                          Unselect All
-                        </button>
-                      </div>
-                      <input
-                        type="text"
-                        placeholder="Search brands..."
-                        value={brandSearch}
-                        onChange={handleSearchBrandChange}
-                        className="brand-search-input"
-                      />
-                      {filteredBrands.map((brand) => (
-                        <label key={brand.id}>
-                          <input
-                            type="checkbox"
-                            value={brand.name}
-                            checked={selectedBrands.includes(brand.id)}
-                            onChange={() => handleBrandChange(brand)}
-                          />
-                          {brand.name}
-                        </label>
-                      ))}
+                      <option value="all">All </option>
+                      <option value="connected">Connected</option>
+                      <option value="not_connected">Not Connected</option>
+                    </select>
+                  </div>
+                </div>
+
+                <div className="multi-select">
+                  <button type="button" onClick={toggleDropdown}>
+                    Select Brands
+                  </button>
+                  <div
+                    className={`multi-select-options ${
+                      isDropdownOpen ? "active" : ""
+                    }`}
+                  >
+                    <div className="toggle-buttons">
+                      <button onClick={selectAllBrands} className="toggle-btn">
+                        Select All
+                      </button>
+                      <button onClick={unselectAllBrands} className="toggle-btn">
+                        Unselect All
+                      </button>
                     </div>
+                    <input
+                      type="text"
+                      placeholder="Search brands..."
+                      value={brandSearch}
+                      onChange={handleSearchBrandChange}
+                      className="brand-search-input"
+                    />
+                    {filteredBrands.map((brand) => (
+                      <label key={brand.id}>
+                        <input
+                          type="checkbox"
+                          value={brand.name}
+                          checked={selectedBrands.includes(brand.id)}
+                          onChange={() => handleBrandChange(brand)}
+                        />
+                        {brand.name}
+                      </label>
+                    ))}
                   </div>
                 </div>
               </div>
             </div>
-          )}
+          </div>
+        )}
         </div>
 
         <div>
@@ -1251,30 +1028,6 @@ const History = () => {
           )}
         </div>
 
-        {/* Quick Filter Presets for User 111 */}
-        {user?.userId === 111 && (
-          <div className="quick-presets-container">
-            <button
-              className={`btn btn-sm preset-btn ${activePreset === "today" ? "active" : ""}`}
-              onClick={() => handleQuickPreset("today")}
-            >
-              Today
-            </button>
-            <button
-              className={`btn btn-sm preset-btn ${activePreset === "last7days" ? "active" : ""}`}
-              onClick={() => handleQuickPreset("last7days")}
-            >
-              Last 7 Days
-            </button>
-            <button
-              className={`btn btn-sm preset-btn ${activePreset === "last30days" ? "active" : ""}`}
-              onClick={() => handleQuickPreset("last30days")}
-            >
-              Last 30 Days
-            </button>
-          </div>
-        )}
-
         <style jsx>{`
           .small-calendar .rdrCalendarWrapper {
             transform: scale(0.85); // Adjust calendar size for better UI
@@ -1292,231 +1045,7 @@ const History = () => {
             width: 100%;
           }
         `}</style>
-
-        {/* Power User Styles */}
-        <style jsx>{`
-          .quick-presets-container {
-            display: flex;
-            gap: 10px;
-            align-items: center;
-            margin-left: 15px;
-          }
-          .preset-btn {
-            background: #f8f9fa;
-            border: 1px solid #dee2e6;
-            color: #495057;
-            padding: 6px 16px;
-            border-radius: 4px;
-            font-size: 13px;
-            font-weight: 500;
-            cursor: pointer;
-            transition: all 0.2s ease;
-          }
-          .preset-btn:hover {
-            background: #e9ecef;
-            border-color: #adb5bd;
-          }
-          .preset-btn.active {
-            background: #0d6efd;
-            border-color: #0d6efd;
-            color: white;
-          }
-          .power-user-banner {
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            border-radius: 8px;
-            padding: 16px 20px;
-            margin: 15px 0;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-          }
-          .banner-content {
-            display: flex;
-            align-items: center;
-            gap: 15px;
-          }
-          .badge-power-user {
-            background: rgba(255, 255, 255, 0.25);
-            backdrop-filter: blur(10px);
-            color: white;
-            padding: 6px 14px;
-            border-radius: 20px;
-            font-size: 13px;
-            font-weight: 600;
-            white-space: nowrap;
-            border: 1px solid rgba(255, 255, 255, 0.3);
-          }
-          .banner-text {
-            color: white;
-            margin: 0;
-            font-size: 14px;
-            line-height: 1.5;
-          }
-          .analytics-dashboard {
-            background: white;
-            border-radius: 8px;
-            padding: 20px;
-            margin: 15px 0;
-            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
-            border: 1px solid #e9ecef;
-          }
-          .analytics-title {
-            margin: 0 0 16px 0;
-            font-size: 16px;
-            font-weight: 600;
-            color: #212529;
-          }
-          .analytics-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-            gap: 15px;
-          }
-          .stat-card {
-            background: #f8f9fa;
-            border-radius: 6px;
-            padding: 16px;
-            text-align: center;
-            border: 1px solid #e9ecef;
-            transition: all 0.2s ease;
-          }
-          .stat-card:hover {
-            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-            transform: translateY(-2px);
-          }
-          .stat-card-wide {
-            grid-column: span 2;
-            text-align: left;
-          }
-          .stat-value {
-            font-size: 28px;
-            font-weight: 700;
-            color: #0d6efd;
-            margin-bottom: 6px;
-          }
-          .stat-label {
-            font-size: 13px;
-            color: #6c757d;
-            font-weight: 500;
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-          }
-          .top-brands-list {
-            margin-top: 10px;
-            display: flex;
-            flex-direction: column;
-            gap: 8px;
-          }
-          .brand-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            padding: 8px 12px;
-            background: white;
-            border-radius: 4px;
-            border: 1px solid #dee2e6;
-          }
-          .brand-name {
-            font-size: 14px;
-            font-weight: 500;
-            color: #212529;
-          }
-          .brand-count {
-            font-size: 13px;
-            font-weight: 600;
-            color: #0d6efd;
-            background: #e7f1ff;
-            padding: 3px 10px;
-            border-radius: 12px;
-          }
-          .no-data {
-            font-size: 13px;
-            color: #adb5bd;
-            font-style: italic;
-          }
-          @media (max-width: 768px) {
-            .analytics-grid {
-              grid-template-columns: repeat(2, 1fr);
-            }
-            .stat-card-wide {
-              grid-column: span 2;
-            }
-            .quick-presets-container {
-              flex-wrap: wrap;
-            }
-            .banner-content {
-              flex-direction: column;
-              align-items: flex-start;
-            }
-          }
-          @media (max-width: 480px) {
-            .analytics-grid {
-              grid-template-columns: 1fr;
-            }
-            .stat-card-wide {
-              grid-column: span 1;
-            }
-          }
-        `}</style>
       </div>
-
-      {/* Power User Banner for User 111 */}
-      {user?.userId === 111 && (
-        <div className="power-user-banner">
-          <div className="banner-content">
-            <span className="badge-power-user">⚡ Power User Mode</span>
-            <p className="banner-text">
-              Due to your large dataset, please use the search and filter
-              options to view your history. Use the quick presets above for
-              faster access to recent data.
-            </p>
-          </div>
-        </div>
-      )}
-
-      {/* Analytics Dashboard for User 111 */}
-      {user?.userId === 111 && analyticsStats && (
-        <div className="analytics-dashboard">
-          <h5 className="analytics-title">Session Statistics</h5>
-          <div className="analytics-grid">
-            <div className="stat-card">
-              <div className="stat-value">{analyticsStats.totalSessions}</div>
-              <div className="stat-label">Total Sessions</div>
-            </div>
-            <div className="stat-card">
-              <div className="stat-value">{analyticsStats.servedSessions}</div>
-              <div className="stat-label">Served</div>
-            </div>
-            <div className="stat-card">
-              <div className="stat-value">
-                {analyticsStats.notServedSessions}
-              </div>
-              <div className="stat-label">Not Served</div>
-            </div>
-            <div className="stat-card">
-              <div className="stat-value">
-                {analyticsStats.servedPercentage}%
-              </div>
-              <div className="stat-label">Served Rate</div>
-            </div>
-            <div className="stat-card">
-              <div className="stat-value">{analyticsStats.avgDuration}</div>
-              <div className="stat-label">Avg Duration</div>
-            </div>
-            <div className="stat-card stat-card-wide">
-              <div className="stat-label">Top Brands</div>
-              <div className="top-brands-list">
-                {analyticsStats.topBrands.map((brand, idx) => (
-                  <div key={idx} className="brand-item">
-                    <span className="brand-name">{brand.name}</span>
-                    <span className="brand-count">{brand.count}</span>
-                  </div>
-                ))}
-                {analyticsStats.topBrands.length === 0 && (
-                  <span className="no-data">No brand data</span>
-                )}
-              </div>
-            </div>
-          </div>
-        </div>
-      )}
       <div className="history-visitors-total-records">
         <p>
           Total Records:{" "}
@@ -1529,9 +1058,7 @@ const History = () => {
           {loading ? (
             <LoadingSkeletonTable />
           ) : error ? (
-            <p className="text-danger center text-center text-lg mt-3">
-              {error}
-            </p>
+            <p>{error}</p>
           ) : (
             <>
               <table
@@ -1549,9 +1076,7 @@ const History = () => {
                     <th>Messages</th>
                     <th>Platform</th>
                     <th>Brand</th>
-                    <th className={chatSessionId ? "d-none" : ""}>
-                      Landing Page
-                    </th>
+                    <th className={chatSessionId ? "d-none" : ""}>Landing Page</th>
                     <th className={chatSessionId ? "d-none" : ""}>IP</th>
                     <th className={chatSessionId ? "d-none" : ""}>Join At</th>
                     <th className={chatSessionId ? "d-none" : ""}>Duration</th>
@@ -1573,26 +1098,20 @@ const History = () => {
                         NewHistoryRecieved.some(
                           (history) =>
                             history.visitor_session_id ===
-                            visitor.visitor_session_id,
+                            visitor.visitor_session_id
                         )
                           ? "new-history-row"
                           : ""
                       }`}
                     >
                       {/* <td>{visitor.visitor_session_id || 'N/A'}</td> */}
-                      <td className="history-table-column">
-                        {visitor.client_id || "N/A"}
-                      </td>
-                      <td className="history-table-column">
-                        {visitor.client_name || "N/A"}
-                      </td>
+                      <td className="history-table-column">{visitor.client_id || "N/A"}</td>
+                      <td className="history-table-column">{visitor.client_name || "N/A"}</td>
 
                       <td className="served_by history-table-column">
                         {visitor.served_by || "N/A"}
-                      </td>
-                      <td className="message-count history-table-column">
-                        {visitor.message_count}
-                      </td>
+                      </td> 
+                      <td className="message-count history-table-column">{visitor.message_count  }</td>
                       <td className="browser-info history-table-column">
                         {/* Browser Icon with Tooltip */}
                         <div className="tooltip">
@@ -1621,53 +1140,29 @@ const History = () => {
                           </span>
                         </div>
                       </td>
-                      <td className="history-table-column">
-                        {visitor.brand_name || "N/A"}
-                      </td>
-                      <td
-                        className={
-                          chatSessionId
-                            ? "d-none "
-                            : " history-table-column history-landing-url"
-                        }
-                      >
+                      <td className="history-table-column">{visitor.brand_name || "N/A"}</td>
+                      <td className={  chatSessionId ? "d-none " : " history-table-column history-landing-url"}>
                         {visitor.landing_url || "N/A"}
                       </td>
-
-                      <td
-                        className={
-                          chatSessionId ? "d-none " : " history-table-column"
-                        }
-                      >
+                    
+                      <td className={chatSessionId ? "d-none " : " history-table-column"}>
                         {visitor.ip || "N/A"}
                       </td>
-                      <td
-                        className={
-                          chatSessionId ? "d-none " : "history-table-column"
-                        }
-                      >
+                      <td className={chatSessionId ? "d-none " : "history-table-column"}>
                         {emitTimeInUserTimezone(visitor.join_time) || "N/A"}
                       </td>
-                      <td
-                        className={
-                          chatSessionId ? "d-none" : "history-table-column"
-                        }
-                      >
+                      <td className={chatSessionId ? "d-none" : "history-table-column"}>
                         {calculateSessionTime(
                           visitor.join_time,
-                          visitor.left_time,
+                          visitor.left_time
                         ) || "N/A"}
                       </td>
-                      <td
-                        className={
-                          chatSessionId ? "d-none" : "history-table-column"
-                        }
-                      >
+                      <td className={chatSessionId ? "d-none" : "history-table-column"}>
                         {visitor.IP_Health === 1
                           ? "Good"
                           : visitor.IP_Health === 0
-                            ? "Bad"
-                            : "N/A"}
+                          ? "Bad"
+                          : "N/A"}
                       </td>
                     </tr>
                   ))}
@@ -1697,20 +1192,11 @@ const History = () => {
               {isFiltering && (
                 <div className="pagination-controls">
                   <button
-                    onClick={() => {
-                      searchVisitors(
-                        searchTerm,
-                        servedStatus,
-                        connectedStatus,
-                        !includeClientId,
-                        includeEmail,
-                        includeMsg,
-                        includeName,
-                        selectedBrands,
-                        filterCurrentPage - 1,
-                      );
-                      setFilterCurrentPage((prev) => Math.max(prev - 1, 1));
-                    }}
+                    onClick={() =>{
+                      searchVisitors(searchTerm, servedStatus, connectedStatus,!includeClientId,includeEmail,includeMsg,includeName,selectedBrands,(filterCurrentPage-1));
+                      setFilterCurrentPage((prev) => Math.max(prev - 1, 1))
+                    }
+                    }
                     disabled={filterCurrentPage === 1}
                   >
                     Previous
@@ -1719,22 +1205,13 @@ const History = () => {
                     Pagez {filterCurrentPage} of {filterTotalPages}
                   </span>
                   <button
-                    onClick={() => {
-                      searchVisitors(
-                        searchTerm,
-                        servedStatus,
-                        connectedStatus,
-                        !includeClientId,
-                        includeEmail,
-                        includeMsg,
-                        includeName,
-                        selectedBrands,
-                        filterCurrentPage + 1,
-                      );
+                    onClick={() =>{
+                      searchVisitors(searchTerm, servedStatus, connectedStatus,!includeClientId,includeEmail,includeMsg,includeName,selectedBrands,(filterCurrentPage+1));
                       setFilterCurrentPage((prev) =>
-                        Math.min(prev + 1, filterTotalPages),
-                      );
-                    }}
+                        Math.min(prev + 1, filterTotalPages)
+                      )
+                    }
+                    }
                     disabled={filterCurrentPage === filterTotalPages}
                   >
                     Next
diff --git "a/C:\\chatknot\\app/ProtectApp.js" "b/C:\\chatknot\\old backup\\app/ProtectApp.js"
index 973b288..c8b7230 100644
--- "a/C:\\chatknot\\app/ProtectApp.js"
+++ "b/C:\\chatknot\\old backup\\app/ProtectApp.js"	
@@ -6,18 +6,19 @@ import { deleteCookie, getCookie, setCookie } from "cookies-next";
 import { useDispatch, useSelector } from "react-redux";
 import { verifyUserRole } from "./lib/features/user/UserSlice";
 import { initializeSocket, disconnectSocket } from "./lib/socketManager";
+import notificationSound from "@/public/sounds/notification.wav";
 import LoadingSpinner from "./LoadingSpinner";
 import getDeviceId from "./hooks/useVisitorId";
 import axios from "axios";
 import { reset } from "./lib/features/chat/chatSlice";
 import { fetchShortcuts } from "./lib/features/shortcuts/shortcutsSlice";
-
-import swal from "sweetalert";
+ 
+import swal from 'sweetalert';
 import apiRequest from "./lib/InterceptorAxios/axios";
 import { fetchTones } from "./lib/features/tones/tonesSlice";
 import handlelogout from "./utils/handlelogout";
 import { decryptData } from "./utils/DecryptData";
-
+ 
 const ProtectApp = ({ children }) => {
   const status = useSelector((state) => state.user.status);
   const token = getCookie("token");
@@ -26,19 +27,15 @@ const ProtectApp = ({ children }) => {
   const [isLoading, setIsLoading] = useState(true);
   const router = useRouter();
   const dispatch = useDispatch();
-  const [deviceId, setdeviceId] = useState();
+  const [deviceId, setdeviceId] = useState()
   const userId = useSelector((state) => state.user.userInfo.userId);
-  const [Tones, setTones] = useState();
-  const selectedBrands = useSelector(
-    (state) => state.selectedBrands.selectedBrands,
-  );
-  // Accessing tones from Redux state
-  const { newVisitorTone, messageTone, toneStatus } = useSelector(
-    (state) => state.tones,
-  );
-  const newVisitorToneRef = useRef(null);
+  const [Tones, setTones] = useState()
+  const selectedBrands = useSelector((state) => state.selectedBrands.selectedBrands);
+   // Accessing tones from Redux state
+   const { newVisitorTone, messageTone,toneStatus } = useSelector(state => state.tones);
+   const newVisitorToneRef = useRef(null); 
   const { tabs, activeTab } = useSelector((state) => state.chat);
-  const socketRef = useRef(null);
+ const socketRef = useRef(null);
 
   const roleBasedRoutes = {
     1: [
@@ -52,7 +49,7 @@ const ProtectApp = ({ children }) => {
       "team",
       "all-brands",
       "alerts",
-      "all-widgets",
+      "all-widgets"
     ], // Role 1 can access all routes
     2: [
       "brands",
@@ -62,7 +59,7 @@ const ProtectApp = ({ children }) => {
       "profile",
       "settings",
       "team",
-      "test-page",
+      "test-page"
     ], // Role 2 can access only 'brands' and 'chat'
     4: [
       "brands",
@@ -73,10 +70,12 @@ const ProtectApp = ({ children }) => {
       "settings",
       "team",
     ], // Role 2 can access only 'brands' and 'chat'
-    3: ["chat", "brands", "chat", "history", "profile", "settings"], // Role 3 can only access 'chat'
+    3: ["chat", "brands", "chat", "history", "profile", "settings",], // Role 3 can only access 'chat'
   };
   // Function to check route permission dynamically based on the user's role
   const checkRoute = (role) => {
+    
+
     const currentPath = window.location.pathname.split("/")[1]; // Get the first part of the route
     const allowedRoutes = roleBasedRoutes[role] || []; // Get allowed routes for the role
 
@@ -90,9 +89,9 @@ const ProtectApp = ({ children }) => {
     const handleVisibilityChange = () => {
       if (document.hidden) {
         // Tab is inactive
-      } else {
+              } else {
         // Tab is active
-      }
+              }
     };
 
     // Listen for visibility change
@@ -103,33 +102,42 @@ const ProtectApp = ({ children }) => {
       document.removeEventListener("visibilitychange", handleVisibilityChange);
     };
   }, []);
-
+ 
   useEffect(() => {
-    if (toneStatus === "succeeded") {
-      newVisitorToneRef.current = newVisitorTone;
+    if (toneStatus === 'succeeded') {
+       
+       
+       newVisitorToneRef.current = newVisitorTone
     }
   }, [toneStatus]);
 
+ 
   const selectedBrandsRef = useRef(selectedBrands);
 
   useEffect(() => {
     selectedBrandsRef.current = selectedBrands;
   }, [selectedBrands]);
-
+  
+  
   useEffect(() => {
     if (!token) return; // Exit if no token
-
+  
     // Initialize socket with token
     const initialize = async () => {
       try {
-        const socketinst = await initializeSocket(token, refreshToken);
-
+        const socketinst = await initializeSocket(token,refreshToken);
+  
         if (!socketinst) return;
-        socketRef.current = socketinst;
+         socketRef.current = socketinst;
         // Handle new chat initiation
         const handleNewClient = async (data) => {
           const decryptedData = await decryptData(data);
-          const { client_id, public_key, join_time, brand_id } = decryptedData;
+          const {
+            client_id,
+            public_key,
+            join_time,
+            brand_id,
+          } =  decryptedData 
           const joinDate = new Date(join_time);
           const now = new Date();
           const isToday = joinDate.toDateString() === now.toDateString();
@@ -138,24 +146,25 @@ const ProtectApp = ({ children }) => {
             minute: "numeric",
             hour12: true,
           });
-
+  
+           
+  
           const playNotificationSound = () => {
-            const audio = new Audio(
-              `/sounds/${newVisitorToneRef.current?.file}`,
-            );
+            
+            const audio = new Audio(`/sounds/${newVisitorToneRef.current?.file}`);
             audio
               .play()
               .catch((err) => console.error("Error playing sound:", err));
           };
-
-          if (
-            selectedBrandsRef.current.length === 0 ||
-            selectedBrandsRef.current.includes(public_key)
-          ) {
+  
+          if ( selectedBrandsRef.current.length ===0 || selectedBrandsRef.current.includes(public_key)) {
+         
+         
             playNotificationSound();
           } else {
+           
           }
-
+  
           const showNotification = () => {
             const arrivalTime = new Date().toLocaleTimeString();
             if (Notification.permission === "granted") {
@@ -164,14 +173,14 @@ const ProtectApp = ({ children }) => {
                 tag: client_id,
                 requireInteraction: false,
               });
-
+  
               notification.onclick = () => {
                 window.focus();
                 window.location.href = `/chat`;
               };
             }
           };
-
+  
           if ("Notification" in window) {
             if (Notification.permission === "default") {
               Notification.requestPermission()
@@ -181,6 +190,7 @@ const ProtectApp = ({ children }) => {
                       selectedBrandsRef.current.length === 0 ||
                       selectedBrandsRef.current.includes(public_key)
                     ) {
+                     
                       showNotification();
                     }
                   } else {
@@ -195,11 +205,12 @@ const ProtectApp = ({ children }) => {
                 selectedBrandsRef.current.length === 0 ||
                 selectedBrandsRef.current.includes(public_key)
               ) {
+               
                 showNotification();
               }
             } else {
               console.warn(
-                "Notifications are blocked. Please enable them in your browser settings.",
+                "Notifications are blocked. Please enable them in your browser settings."
               );
             }
           } else {
@@ -208,46 +219,51 @@ const ProtectApp = ({ children }) => {
         };
         const handleClientRejoinChat = async (data) => {
           const decryptedData = await decryptData(data);
-          const { client_id, public_key } = decryptedData;
-
+          const {
+            client_id,
+            public_key,
+            
+          } =  decryptedData 
+          
+         
           const now = new Date();
-
+         
+          
+  
+           
+  
           const playNotificationSound = () => {
-            const audio = new Audio(
-              `/sounds/${newVisitorToneRef.current?.file}`,
-            );
+            
+            const audio = new Audio(`/sounds/${newVisitorToneRef.current?.file}`);
             audio
               .play()
               .catch((err) => console.error("Error playing sound:", err));
           };
-
-          if (
-            selectedBrandsRef.current.length === 0 ||
-            selectedBrandsRef.current.includes(public_key)
-          ) {
+  
+          if ( selectedBrandsRef.current.length ===0 || selectedBrandsRef.current.includes(public_key)) {
+         
+         
             playNotificationSound();
           } else {
+           
           }
-
+  
           const showNotification = () => {
             const arrivalTime = new Date().toLocaleTimeString();
             if (Notification.permission === "granted") {
-              const notification = new Notification(
-                "Rejoin Visitor Alert 🚀",
-                {
-                  body: `Visitor ${client_id} started revisiting the website at ${arrivalTime}.`,
-                  tag: client_id,
-                  requireInteraction: false,
-                },
-              );
-
+              const notification = new Notification("Rejoin Visitor Alert 🚀", {
+                body: `Visitor ${client_id} started revisiting the website at ${arrivalTime}.`,
+                tag: client_id,
+                requireInteraction: false,
+              });
+  
               notification.onclick = () => {
                 window.focus();
                 window.location.href = `/chat`;
               };
             }
           };
-
+  
           if ("Notification" in window) {
             if (Notification.permission === "default") {
               Notification.requestPermission()
@@ -257,6 +273,7 @@ const ProtectApp = ({ children }) => {
                       selectedBrandsRef.current.length === 0 ||
                       selectedBrandsRef.current.includes(public_key)
                     ) {
+                     
                       showNotification();
                     }
                   } else {
@@ -271,11 +288,12 @@ const ProtectApp = ({ children }) => {
                 selectedBrandsRef.current.length === 0 ||
                 selectedBrandsRef.current.includes(public_key)
               ) {
+               
                 showNotification();
               }
             } else {
               console.warn(
-                "Notifications are blocked. Please enable them in your browser settings.",
+                "Notifications are blocked. Please enable them in your browser settings."
               );
             }
           } else {
@@ -284,29 +302,34 @@ const ProtectApp = ({ children }) => {
         };
         const handleNewUserAssigned = async (data) => {
           const decryptedData = await decryptData(data);
-          const { msg, assigned_user, createdBy } = decryptedData;
-
+          const {
+            msg,
+            assigned_user,
+            createdBy
+            
+          } =  decryptedData 
+          
+         
           const now = new Date();
-
+         
+           
+  
           const showNotification = () => {
             const arrivalTime = new Date().toLocaleTimeString();
             if (Notification.permission === "granted") {
-              const notification = new Notification(
-                "New Visitor Assigned 🚀",
-                {
-                  body: `${msg}`,
-
-                  requireInteraction: false,
-                },
-              );
-
+              const notification = new Notification("New Visitor Assigned 🚀", {
+                body: `${msg}`,
+                
+                requireInteraction: false,
+              });
+  
               notification.onclick = () => {
                 window.focus();
                 window.location.href = `/all-users`;
               };
             }
           };
-
+  
           if ("Notification" in window) {
             if (Notification.permission === "default") {
               Notification.requestPermission()
@@ -316,6 +339,8 @@ const ProtectApp = ({ children }) => {
                       selectedBrandsRef.current.length === 0 ||
                       selectedBrandsRef.current.includes(public_key)
                     ) {
+                  
+                      
                       showNotification();
                     }
                   } else {
@@ -330,11 +355,12 @@ const ProtectApp = ({ children }) => {
                 selectedBrandsRef.current.length === 0 ||
                 selectedBrandsRef.current.includes(public_key)
               ) {
+               
                 showNotification();
               }
             } else {
               console.warn(
-                "Notifications are blocked. Please enable them in your browser settings.",
+                "Notifications are blocked. Please enable them in your browser settings."
               );
             }
           } else {
@@ -346,79 +372,88 @@ const ProtectApp = ({ children }) => {
         socketinst.on("user-assigned-to-brand", handleNewUserAssigned);
         socketinst.on("tokens_updated", handleTokenUpdate);
         socketinst.on("refresh_token_error", handleRefreshTokenError);
-
+        
         socketinst.on("Logged_in_to_other_device", (data) => {
-          const decryptedData = decryptData(data);
+          
+          const decryptedData = decryptData(data)
           const { message } = decryptedData;
-
+          
           handlelogout(dispatch);
           swal("Oops!", message, "error");
         });
-
+  
         socketinst.emit("get_online_users", {
           user_id: user.userId,
         });
-
+        
         const device_id = localStorage.getItem("visitorId");
-
-        //       if (device_id && user?.userId) {
-        //   socketinst.emit("Check_Logged_in_to_other_device", {
-        //     user_id: user.userId,
-        //     device_id,
-        //   });
-        // }
-
+        
+//       if (device_id && user?.userId) {
+//   socketinst.emit("Check_Logged_in_to_other_device", {
+//     user_id: user.userId,
+//     device_id,
+//   });
+// }
+
+  
         // Clean up on unmount
         return () => {
-          socketinst.off("new client", handleNewClient);
-          socketinst.off("client rejoin", handleClientRejoinChat);
-          socketinst.off("user-assigned-to-brand", handleNewUserAssigned);
-          socketinst.off("tokens_updated", handleTokenUpdate);
-          socketinst.off("refresh_token_error", handleRefreshTokenError);
-          socketinst.off("Logged_in_to_other_device");
+        socketinst.off("new client", handleNewClient);
+        socketinst.off("client rejoin", handleClientRejoinChat);
+        socketinst.off("user-assigned-to-brand", handleNewUserAssigned);
+        socketinst.off("tokens_updated", handleTokenUpdate);
+        socketinst.off("refresh_token_error", handleRefreshTokenError);
+        socketinst.off("Logged_in_to_other_device");
         };
       } catch (error) {
         console.error("Error initializing socket:", error);
       }
     };
-
+  
     initialize();
   }, [token]); // Only reinitialize if `token` changes
   useEffect(() => {
-    const device_id = localStorage.getItem("visitorId");
-    if (socketRef.current && device_id && user?.userId) {
-      // console.log("Checking logged in to other device with userId:", user.userId, "and device_id:", device_id);
-      socketRef.current.emit("Check_Logged_in_to_other_device", {
-        user_id: user.userId,
-        device_id,
-      });
-    }
-  }, [user?.userId]); // 🚨 Separate effect, runs when userId is available
-  const handleTokenUpdate = ({ accessToken, refreshToken }) => {
-    setCookie("token", accessToken);
-    setCookie("refreshToken", refreshToken);
-  };
+  const device_id = localStorage.getItem("visitorId");
+  if (socketRef.current && device_id && user?.userId) {
+    // console.log("Checking logged in to other device with userId:", user.userId, "and device_id:", device_id);
+    socketRef.current.emit("Check_Logged_in_to_other_device", {
+      user_id: user.userId,
+      device_id,
+    });
+  }
+}, [user?.userId]); // 🚨 Separate effect, runs when userId is available
+  const handleTokenUpdate = ({
+    accessToken,
+    refreshToken
+  })=>{
+    setCookie('token', accessToken);
+    setCookie('refreshToken', refreshToken);
+    
+  }
   const handleRefreshTokenError = () => {
     // Handle refresh token error
     console.error("Refresh token error");
-    handlelogout(dispatch);
-  };
-
+  handlelogout(dispatch);
+    };
+ 
   useEffect(() => {
     if (!token) {
+  
       // If there's no token, redirect to login page
       router.push("/login");
       setIsLoading(false); // Stop loading once redirected
     } else {
       if (user && user.length > 0) {
         // If user data exists, verify the role and check routes
-
+   
+   
         const isAllowed = checkRoute(user.role);
         if (!isAllowed) {
           router.push("/"); // Redirect to "not authorized" page
         }
         setIsLoading(false); // Stop loading once checks are done
       } else {
+      
         // If no user data, dispatch to verify user role
         dispatch(verifyUserRole(token)).then((userData) => {
           if (userData?.payload?.role) {
@@ -426,11 +461,11 @@ const ProtectApp = ({ children }) => {
             if (!isAllowed) {
               router.push("/"); // Redirect to "not authorized" page
             }
-
+          
             dispatch(fetchTones(userData.payload.userId));
-            const companyId = userData.payload.company_id;
-            const userId = userData.payload.userId;
-            dispatch(fetchShortcuts({ companyId, userId }));
+            const companyId = userData.payload.company_id
+            const userId = userData.payload.userId
+              dispatch(fetchShortcuts({companyId,userId}));
             setIsLoading(false); // Stop loading once checks are done
           }
         });
@@ -440,6 +475,7 @@ const ProtectApp = ({ children }) => {
 
   useEffect(() => {
     if (status === "succeeded") {
+       
       return () => {
         // disconnectSocket();
       };
@@ -448,7 +484,7 @@ const ProtectApp = ({ children }) => {
   if (isLoading) {
     return <LoadingSpinner />;
   }
-
+  
   return <>{user.roleVerified == true ? <>{children}</> : null}</>;
 };
 
diff --git "a/C:\\chatknot\\app/app.zip" "b/C:\\chatknot\\app/app.zip"
deleted file mode 100644
index 9e2056a..0000000
Binary files "a/C:\\chatknot\\app/app.zip" and /dev/null differ
diff --git "a/C:\\chatknot\\app/chat-port/[...chatPort]/page.js" "b/C:\\chatknot\\old backup\\app/chat-port/[...chatPort]/page.js"
index f1ce4c0..5eac078 100644
--- "a/C:\\chatknot\\app/chat-port/[...chatPort]/page.js"
+++ "b/C:\\chatknot\\old backup\\app/chat-port/[...chatPort]/page.js"	
@@ -2,7 +2,7 @@
 
 import { useDispatch } from "react-redux";
 import { setUser } from "@/app/lib/features/user/UserSlice";
-import { useEffect, use } from "react";
+import { useEffect } from "react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { setCookie } from "cookies-next";
 import axios from "axios";
@@ -10,90 +10,87 @@ import LoadingSpinner from "@/app/LoadingSpinner";
 import getDeviceId from "@/app/hooks/useVisitorId";
 
 export default function ChatPortPage({ params }) {
-  const { chatPort } = use(params);
+  const { chatPort } = params;
 
   const dispatch = useDispatch();
   const router = useRouter();
 
+
   useEffect(() => {
+ 
     // Check if the user is on a mobile device
-    try {
-      if (typeof window === "undefined") return;
-
-      const isMobile = /Mobi|Android|iPhone|iPad|iPod|Windows Phone/i.test(
-        window.navigator.userAgent,
-      );
-
-      if (isMobile) {
-        router.push("/login");
-        return;
-      }
-      if (!chatPort || !Array.isArray(chatPort)) {
-        router.push("/login");
-        return;
-      }
-
-      // Join and decode the segments of chatPort
-      const encodedQueryString = chatPort.join("&");
-      const queryString = decodeURIComponent(encodedQueryString);
-
-      // Parse parameters using URLSearchParams
-      const urlParams = new URLSearchParams(queryString);
+    const isMobile = /Mobi|Android|iPhone|iPad|iPod|Windows Phone/i.test(navigator.userAgent);
 
-      const t = urlParams.get("t");
-      const u = urlParams.get("u");
-      const e = urlParams.get("e");
-      const i = urlParams.get("i");
-      const r = urlParams.get("r");
-      const w = urlParams.get("w");
-      // Get parameters from URL
+    if (isMobile) {
+      // If the user is on mobile, redirect to the login page
+      router.push("/login");
+      return; // Stop further execution
+    }
+    if (!chatPort || !Array.isArray(chatPort)) {
+      router.push("/login")
+      return;
+    }
+  
+    // Join and decode the segments of chatPort
+    const encodedQueryString = chatPort.join("&");
+    const queryString = decodeURIComponent(encodedQueryString);
+  
+  
+    // Parse parameters using URLSearchParams
+    const urlParams = new URLSearchParams(queryString);
+  
+    const t = urlParams.get("t");
+    const u = urlParams.get("u");
+    const e = urlParams.get("e");
+    const i = urlParams.get("i");
+    const r = urlParams.get("r");
+    const w = urlParams.get("w");
+    // Get parameters from URL
+    
 
       // Ensure parameters are valid
       if ((!t || !u || !e || !i) && !w) {
         // Route to login only if both conditions fail
-        router.push("/login");
+      router.push("/login");
         return;
       }
-
+  
       // router.replace("/chat-port/w=wait");
 
-      // Immediately clean the URL by removing query parameters
-
-      // API call after URL cleanup
-      const fetchChatPortal = async () => {
-        try {
-          const d = await getDeviceId();
-          const response = await axios.post(
-            `${process.env.NEXT_PUBLIC_API_URL}/api/chatportal`, // Use POST for sending body
-            { t, u, e, i, r, d }, // Parameters as JSON in the request body
-            {
-              headers: {
-                "Content-Type": "application/json",
-              },
+    // Immediately clean the URL by removing query parameters
+
+    // API call after URL cleanup
+    const fetchChatPortal = async () => {
+      try {
+        const d  = await getDeviceId();
+        const response = await axios.post(
+          `${process.env.NEXT_PUBLIC_API_URL}/api/chatportal`, // Use POST for sending body
+          { t, u, e, i, r,d }, // Parameters as JSON in the request body
+          {
+            headers: {
+              "Content-Type": "application/json",
             },
-          );
-
-          const data = response.data;
-
-          // Save token in cookies
-          setCookie("token", data.token);
-          setCookie("refreshToken", data.refreshToken);
-          // Update Redux store
-          dispatch(setUser(data.user));
-
-          // Route user based on role
-          if (data.role === 1) router.push("/company-management");
-          else if (data.role === 2) router.push("/brands");
-          else router.push("/chat");
-        } catch (err) {
-          router.push("/login");
-        }
-      };
+          }
+        );
+       
+        const data = response.data;
+
+        // Save token in cookies
+        setCookie("token", data.token);
+        setCookie('refreshToken', data.refreshToken)
+        // Update Redux store
+        dispatch(setUser(data.user));
+
+        // Route user based on role
+        if (data.role === 1) router.push("/company-management");
+        else if (data.role === 2) router.push("/brands");
+        else router.push("/chat");
+      } catch (err) {
+        router.push("/login");
+      }
+    };
 
-      fetchChatPortal();
-    } catch (error) {
-      console.error("Error fetching chat portal:", error);
-    }
+    fetchChatPortal();
   }, []);
 
   return (
diff --git "a/C:\\chatknot\\app/css/style.css" "b/C:\\chatknot\\old backup\\app/css/style.css"
index d019806..3ee16c6 100644
--- "a/C:\\chatknot\\app/css/style.css"
+++ "b/C:\\chatknot\\old backup\\app/css/style.css"	
@@ -686,7 +686,6 @@ table td a {
 .pagination-controls{
   margin: auto auto;
   display: table;
-  color: #000;
 
 
 }
diff --git "a/C:\\chatknot\\app/lib/InterceptorAxios/axios.js" "b/C:\\chatknot\\old backup\\app/lib/InterceptorAxios/axios.js"
index 24dd66b..d989fc4 100644
--- "a/C:\\chatknot\\app/lib/InterceptorAxios/axios.js"
+++ "b/C:\\chatknot\\old backup\\app/lib/InterceptorAxios/axios.js"	
@@ -1,14 +1,15 @@
-import axios from "axios";
-import { deleteCookie, getCookie, setCookie } from "cookies-next";
-import { disconnectSocket, initializeSocket } from "../socketManager";
-import CryptoJS from "crypto-js";
-import handlelogout from "@/app/utils/handlelogout";
+import axios from 'axios';
+import { deleteCookie, getCookie, setCookie } from 'cookies-next';
+import { disconnectSocket, initializeSocket } from '../socketManager';
+import CryptoJS from 'crypto-js';
+import handlelogout from '@/app/utils/handlelogout';
 
 // const SECRET_KEY = CryptoJS.SHA256(process.env.NEXT_PUBLIC_SECRET_KEY).toString(
 //   CryptoJS.enc.Hex
 // );
 const SECRET_KEY = CryptoJS.SHA256(process.env.NEXT_PUBLIC_SECRET_KEY);
 
+
 // Function to check if response data is encrypted
 const isEncrypted = (data) => {
   return (
@@ -18,6 +19,7 @@ const isEncrypted = (data) => {
   );
 };
 
+
 // Function to decrypt AES-256-GCM encrypted data using crypto-js
 
 // Function to decrypt AES-256-CBC encrypted data
@@ -31,12 +33,11 @@ const decryptData = ({ e, iv }) => {
     const decrypted = CryptoJS.AES.decrypt(
       { ciphertext: encryptedBytes },
       key,
-      { iv: ivBytes, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 },
+      { iv: ivBytes, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 }
     );
 
     const decryptedText = decrypted.toString(CryptoJS.enc.Utf8);
-    if (!decryptedText)
-      throw new Error("Decryption resulted in an empty string");
+    if (!decryptedText) throw new Error("Decryption resulted in an empty string");
 
     return JSON.parse(decryptedText);
   } catch (error) {
@@ -45,11 +46,12 @@ const decryptData = ({ e, iv }) => {
   }
 };
 
+
 // Create a custom Axios instance
 const axiosInstance = axios.create({
   baseURL: process.env.NEXT_PUBLIC_API_URL,
   headers: {
-    "Content-Type": "application/json",
+    'Content-Type': 'application/json',
   },
   timeout: 10000,
 });
@@ -57,16 +59,16 @@ const axiosInstance = axios.create({
 // Request interceptor to add token to headers
 axiosInstance.interceptors.request.use(
   (config) => {
-    const token = getCookie("token") || "";
+    const token = getCookie('token') || '';
     if (token) {
-      config.headers["Authorization"] = `Bearer ${token}`;
+      config.headers['Authorization'] = `Bearer ${token}`;
     }
     return config;
   },
   (error) => {
-    console.error("Request Error:", error.message);
+    console.error('Request Error:', error.message);
     return Promise.reject(error);
-  },
+  }
 );
 
 // Response interceptor to decrypt response data if necessary
@@ -74,7 +76,6 @@ axiosInstance.interceptors.response.use(
   (response) => {
     if (response.data && isEncrypted(response.data)) {
       const decryptedData = decryptData(response.data);
-
       return { ...response, data: decryptedData || response.data };
     }
     return response;
@@ -82,23 +83,16 @@ axiosInstance.interceptors.response.use(
   async (error) => {
     const originalRequest = error.config;
 
-    if (
-      error.response &&
-      error.response.status === 401 &&
-      !originalRequest._retry
-    ) {
+    if (error.response && error.response.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
       try {
-        const { data } = await axios.post(
-          `${process.env.NEXT_PUBLIC_API_URL}/api/auth/refresh-token`,
-          {
-            refreshToken: getCookie("refreshToken"),
-          },
-        );
+        const { data } = await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/refresh-token`, {
+          refreshToken: getCookie('refreshToken'),
+        });
 
-        setCookie("token", data.accessToken);
-        setCookie("refreshToken", data.refreshToken);
-        originalRequest.headers["Authorization"] = `Bearer ${data.accessToken}`;
+        setCookie('token', data.accessToken);
+        setCookie('refreshToken', data.refreshToken);
+        originalRequest.headers['Authorization'] = `Bearer ${data.accessToken}`;
 
         disconnectSocket();
         initializeSocket(data.accessToken, data.refreshToken);
@@ -110,71 +104,35 @@ axiosInstance.interceptors.response.use(
       }
     }
     return Promise.reject(error);
-  },
+  }
 );
 
 // Reusable API request function
-const apiRequest = async (
-  url,
-  method = "GET",
-  data = null,
-  additionalHeaders = {},
-) => {
+const apiRequest = async (url, method = 'GET', data = null, additionalHeaders = {}) => {
   try {
     const isFormData = data instanceof FormData;
-    const normalizedMethod = (method || "GET").toUpperCase();
-    const usesQueryParams = ["GET", "DELETE", "HEAD"].includes(
-      normalizedMethod,
-    );
 
     const response = await axiosInstance({
       url,
-      method: normalizedMethod,
+      method,
       headers: {
         ...additionalHeaders,
-        ...(isFormData
-          ? { "Content-Type": "multipart/form-data" }
-          : { "Content-Type": "application/json" }),
+        ...(isFormData ? { 'Content-Type': 'multipart/form-data' } : { 'Content-Type': 'application/json' }),
       },
-      ...(usesQueryParams
-        ? { params: data || undefined }
-        : { data: isFormData ? data : data }),
+      data: isFormData ? data : data,
     });
 
     return response.data;
   } catch (error) {
-    // Log cancelled requests separately
-    if (
-      (axios.isCancel && axios.isCancel(error)) ||
-      (error && error.code === "ERR_CANCELED")
-    ) {
-      try {
-        if (
-          url &&
-          typeof url === "string" &&
-          url.toLowerCase().includes("userverifyrole")
-        ) {
-          console.log("Request cancelled: userverifyrole");
-        } else {
-          console.log(`API request cancelled: ${url}`);
-        }
-      } catch (logErr) {
-        console.log("API request cancelled");
-      }
-      // Re-throw so callers can handle cancellation if needed
-      throw error;
-    }
-
     if (error.type) {
-      if (error.type === "client") throw new Error(error.message);
-      if (error.type === "server")
-        throw new Error("Server Error: " + error.message);
-      if (error.type === "network") throw new Error(error.message);
-      throw new Error("An unexpected error occurred.");
+      if (error.type === 'client') throw new Error(error.message);
+      if (error.type === 'server') throw new Error('Server Error: ' + error.message);
+      if (error.type === 'network') throw new Error(error.message);
+      throw new Error('An unexpected error occurred.');
     } else {
-      throw new Error("An error occurred. Please try again.", error);
+      throw new Error('An error occurred. Please try again.');
     }
   }
 };
 
-export default apiRequest;
+export default apiRequest;
\ No newline at end of file
diff --git "a/C:\\chatknot\\app/loading.js" "b/C:\\chatknot\\app/loading.js"
deleted file mode 100644
index aef4491..0000000
--- "a/C:\\chatknot\\app/loading.js"
+++ /dev/null
@@ -1,5 +0,0 @@
-import LoadingSpinner from "./LoadingSpinner";
-
-export default function Loading() {
-  return <LoadingSpinner />;
-}
diff --git "a/C:\\chatknot\\app/login/page.js" "b/C:\\chatknot\\old backup\\app/login/page.js"
index e44b908..71a3b53 100644
--- "a/C:\\chatknot\\app/login/page.js"
+++ "b/C:\\chatknot\\old backup\\app/login/page.js"	
@@ -9,7 +9,7 @@ import { verifyUserRole } from '../lib/features/user/UserSlice';
 import { reset } from '../lib/features/chat/chatSlice';
 import LoadingSpinner from '../LoadingSpinner';
  
-import LoginImage from '../../public/assets/images/loginimage.png'
+import LoginImage from '@/public/assets/images/loginimage.png'
 import './login.css'
 import './main.css'
 import getDeviceId from '../hooks/useVisitorId';
diff --git "a/C:\\chatknot\\app/page.js" "b/C:\\chatknot\\old backup\\app/page.js"
index 7a8834a..faf513e 100644
--- "a/C:\\chatknot\\app/page.js"
+++ "b/C:\\chatknot\\old backup\\app/page.js"	
@@ -9,7 +9,7 @@ import { verifyUserRole } from './lib/features/user/UserSlice';
 import { reset } from './lib/features/chat/chatSlice';
 import LoadingSpinner from './LoadingSpinner';
  
-import LoginImage from '../public/assets/images/loginimage.png'
+import LoginImage from '@/public/assets/images/loginimage.png'
 import './login/login.css'
 import './login/main.css'
 import getDeviceId from './hooks/useVisitorId';
diff --git "a/C:\\chatknot\\app/utils/handlelogout.js" "b/C:\\chatknot\\old backup\\app/utils/handlelogout.js"
index cf33160..0abb3de 100644
--- "a/C:\\chatknot\\app/utils/handlelogout.js"
+++ "b/C:\\chatknot\\old backup\\app/utils/handlelogout.js"	
@@ -1,42 +1,26 @@
 // handleLogout.js - A utility function for logout
 import { reset } from '../lib/features/chat/chatSlice';
 import { disconnectSocket } from '../lib/socketManager';
-import { deleteCookie, getCookie } from 'cookies-next';
+import { deleteCookie } from 'cookies-next';
 import axios from 'axios';
 
-// Accept an optional dispatch so callers can invoke this without providing Redux dispatch
-const handlelogout = async (dispatch) => {
+const handlelogout = async (dispatch) => { // Receive dispatch here
     try {
         // Disconnect the socket before logging out
         disconnectSocket();
 
-        // Call the logout API (best-effort; if cookies are missing the request may fail)
-        try {
-            await axios.post(
-                `${process.env.NEXT_PUBLIC_API_URL}/api/auth/logout`,
-                {},
-                {
-                    headers: {
-                        Authorization: `Bearer ${getCookie('token')}`,
-                        'x-refresh-token': getCookie('refreshToken'),
-                    },
-                }
-            );
-        } catch (err) {
-            // Ignore errors from the logout endpoint - we'll still clear local state
-            console.warn('Logout API call failed (continuing to clear local state):', err?.message || err);
-        }
-
-        // Dispatch the reset action if a dispatch was provided
-        if (dispatch && typeof dispatch === 'function') {
-            try {
-                dispatch(reset());
-            } catch (err) {
-                console.warn('Dispatch reset failed:', err);
+        // Call the logout API
+        await axios.post(`${process.env.NEXT_PUBLIC_API_URL}/api/auth/logout`, {}, {
+            headers: {
+                Authorization: `Bearer ${getCookie('token')}`,
+                'x-refresh-token': getCookie('refreshtoken')
             }
-        }
+        });
+
+        // Dispatch the reset action
+        dispatch(reset());
     } catch (error) {
-        console.error('Error during logout flow:', error);
+        console.error('Error logging out:', error);
         deleteCookie('token');
         deleteCookie('refreshToken');
     } finally {
@@ -45,9 +29,7 @@ const handlelogout = async (dispatch) => {
         deleteCookie('refreshToken');
 
         // Redirect to the login page
-        if (typeof window !== 'undefined') {
-            window.location.href = '/login';
-        }
+        window.location.href = '/login';
     }
 };