worked on customization issue

platform/src/common/components/Customise/LocationsContentComponent.jsx

@@ -47,20 +47,28 @@ const LocationsContentComponent = ({ selectedLocations }) => {
   };
 
   const handleLocationSelect = (item) => {
-    unSelectedLocations.includes(item)
-      ? setUnSelectedLocations(unSelectedLocations.filter((location) => location._id !== item._id))
-      : null;
-    locationArray.includes(item)
-      ? setLocationArray(locationArray.filter((location) => location._id !== item._id))
-      : setLocationArray((locations) => [...locations, item]);
+    const unSelectedIndex = unSelectedLocations.findIndex((location) => location._id === item._id);
+    if (unSelectedIndex !== -1) {
+      setUnSelectedLocations(unSelectedLocations.filter((location) => location._id !== item._id));
+    }
+    const locationIndex = locationArray.findIndex((location) => location._id === item._id);
+    if (locationIndex !== -1) {
+      setLocationArray(locationArray.filter((location) => location._id !== item._id));
+    } else {
+      const newLocationArray = [...locationArray, item];
+      setLocationArray(newLocationArray);
+      setDraggedLocations(newLocationArray);
+    }
     setInputSelect(true);
     setLocation('');
   };
 
   const removeLocation = (item) => {
-    setLocationArray(locationArray.filter((location) => location._id !== item._id));
+    const newLocationArray = locationArray.filter((location) => location._id !== item._id);
+    setLocationArray(newLocationArray);
+    setDraggedLocations(newLocationArray);
     setUnSelectedLocations((locations) => [...locations, item]);
-    dispatch(setSelectedLocations(locationArray));
+    dispatch(setSelectedLocations(newLocationArray));
   };
 
   const onDragEnd = (result) => {
@@ -90,7 +98,7 @@ const LocationsContentComponent = ({ selectedLocations }) => {
         while (unSelectedLocations.length < 8) {
           const randomIndex = Math.floor(Math.random() * gridLocationsData.length);
           const randomObject = gridLocationsData[randomIndex];
-          if (!unSelectedLocations.includes(randomObject)) {
+          if (!unSelectedLocations.find((location) => location._id === randomObject._id)) {
             unSelectedLocations.push(randomObject);
           }
         }

platform/src/common/components/Customise/index.jsx

@@ -22,7 +22,8 @@ const CustomiseLocationsComponent = ({ toggleCustomise }) => {
   });
   const selectedLocations = useSelector((state) => state.grids.selectedLocations) || [];
   const preferenceData = useSelector((state) => state.defaults.individual_preferences) || [];
-  const customisedLocations = preferenceData.length > 0 ? preferenceData[0].selected_sites : [];
+  const customisedLocations =
+    preferenceData.length > 0 ? preferenceData[0].selected_sites.slice(0, 4) : [];
   const id = useSelector((state) => state.login.userInfo._id);
   const chartData = useSelector((state) => state.chart);
 

platform/src/common/components/Layout/index.jsx

@@ -54,7 +54,7 @@ const Layout = ({ pageTitle = 'AirQo Analytics', children, topbarTitle, noBorder
             ? selected_sites.map((site) => site['_id'])
             : chartData.chartSites;
 
-          await dispatch(setChartSites(chartSites));
+          await dispatch(setChartSites(chartSites.slice(0, 4)));
           await dispatch(
             setChartDataRange({
               startDate: startDate || chartData.chartDataRange.startDate,

platform/src/pages/_app.jsx

@@ -10,7 +10,10 @@ export default function App({ Component, ...rest }) {
   const persistor = persistStore(store);
 
   useEffect(() => {
-    if (process.env.NEXT_PUBLIC_ALLOW_DEV_TOOLS === 'staging') {
+    if (
+      process.env.NEXT_PUBLIC_ALLOW_DEV_TOOLS === 'staging' ||
+      process.env.NEXT_PUBLIC_ALLOW_DEV_TOOLS === 'production'
+    ) {
       return;
     } else {
       // Disable context menu (right click)