Analytics: Enhancements on More insights modal

platform/src/common/components/Button/TabButtons.jsx

@@ -1,7 +1,17 @@
 import React from 'react';
 import ChevronDownIcon from '@/icons/Common/chevron_downIcon';
 import PropTypes from 'prop-types';
+import Spinner from '../Spinner';
 
+/**
+ * TabButtons Component
+ *
+ * A versatile button component that can display icons, text, and handle dropdowns.
+ * It also supports loading and disabled states.
+ *
+ * @param {object} props - Component props
+ * @returns {JSX.Element} Rendered component
+ */
 const TabButtons = ({
   type = 'button',
   Icon,
@@ -12,42 +22,66 @@ const TabButtons = ({
   id,
   tabRef,
   isField = true,
+  isLoading = false,
+  disabled = false,
 }) => {
   return (
     <button
       ref={tabRef}
       id={id}
       type={type}
       onClick={onClick}
-      className={` transition transform active:scale-95 border rounded-xl shadow-sm flex items-center justify-between cursor-pointer ${btnStyle}`}
+      disabled={disabled || isLoading}
+      aria-disabled={disabled || isLoading}
+      className={`transition transform active:scale-95 border rounded-xl shadow-sm flex items-center justify-between cursor-pointer ${
+        disabled || isLoading
+          ? 'opacity-50 cursor-not-allowed'
+          : 'hover:scale-105'
+      } ${btnStyle}`}
     >
-      {Icon && (
-        <span className="p-[2px] md:p-0">
-          {typeof Icon === 'function' ? <Icon /> : Icon}
-        </span>
+      {/* Loading Spinner */}
+      {isLoading ? (
+        <Spinner width={20} height={20} />
+      ) : (
+        Icon && (
+          <span className="p-[2px] md:p-0">
+            {typeof Icon === 'function' ? <Icon /> : Icon}
+          </span>
+        )
       )}
+
+      {/* Button Text */}
       {btnText && (
         <span
-          className={`text-sm text-start w-full px-2 font-medium capitalize ${Icon && isField ? 'hidden md:inline-block' : ''}`}
+          className={`text-sm text-start w-full px-2 font-medium capitalize ${
+            Icon && isField ? 'hidden md:inline-block' : ''
+          }`}
         >
           {btnText}
         </span>
       )}
+
+      {/* Dropdown Icon */}
       {dropdown && <ChevronDownIcon />}
     </button>
   );
 };
 
 TabButtons.propTypes = {
   type: PropTypes.string,
-  Icon: PropTypes.func,
+  Icon: PropTypes.oneOfType([PropTypes.func, PropTypes.element]),
   btnText: PropTypes.string,
   isField: PropTypes.bool,
   btnStyle: PropTypes.string,
   dropdown: PropTypes.bool,
   onClick: PropTypes.func,
   id: PropTypes.string,
-  tabRef: PropTypes.object,
+  tabRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.any }),
+  ]),
+  isLoading: PropTypes.bool,
+  disabled: PropTypes.bool,
 };
 
 export default TabButtons;

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

@@ -250,16 +250,13 @@ const renderCustomizedLegend = ({ payload }) => {
 
           {/* Only truncate and add tooltip if shouldTruncate is true */}
 
-          <Tooltip
-            content={shouldTruncate ? entry.value : null}
-            className="w-auto"
-          >
-            <div
-              className={`${shouldTruncate ? 'truncate max-w-[100px] group' : ''}`}
-            >
-              {entry.value}
-            </div>
-          </Tooltip>
+          {shouldTruncate ? (
+            <Tooltip content={entry.value} className="w-auto">
+              <div className="truncate max-w-[100px] group">{entry.value}</div>
+            </Tooltip>
+          ) : (
+            <div>{entry.value}</div>
+          )}
         </div>
       ))}
     </div>

platform/src/common/components/Modal/dataDownload/components/LocationCard.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import PropTypes from 'prop-types';
 import LocationIcon from '@/icons/Analytics/LocationIcon';
 
 // Helper function to handle truncation logic
@@ -11,7 +12,13 @@ const truncateName = (name, maxLength = 13) => {
  * LocationCard Component
  * Displays information about a location with a checkbox to toggle selection.
  */
-const LocationCard = ({ site, onToggle, isSelected, isLoading }) => {
+const LocationCard = ({
+  site,
+  onToggle,
+  isSelected,
+  isLoading,
+  disableToggle,
+}) => {
   // Display loading skeleton while loading
   if (isLoading) {
     return (
@@ -29,13 +36,18 @@ const LocationCard = ({ site, onToggle, isSelected, isLoading }) => {
   const { name, search_name, country } = site;
 
   // Determine display name (search_name or fallback to name)
-  const displayName = truncateName(name || search_name?.split(',')[0] || '');
+  const displayName = truncateName(
+    name || (search_name && search_name.split(',')[0]) || '',
+  );
 
   return (
     <div
       className={`flex justify-between items-center p-3 bg-[#F6F6F7] border ${
         isSelected ? 'border-blue-300 ring-2 ring-blue-500' : 'border-gray-200'
-      } rounded-lg shadow-sm transition-all w-full`}
+      } rounded-lg shadow-sm transition-all w-full ${
+        disableToggle ? 'cursor-not-allowed' : 'cursor-pointer hover:bg-blue-50'
+      }`}
+      aria-disabled={disableToggle}
     >
       <div className="flex items-center gap-2">
         <LocationIcon
@@ -57,14 +69,35 @@ const LocationCard = ({ site, onToggle, isSelected, isLoading }) => {
           checked={isSelected}
           onChange={(e) => {
             e.stopPropagation();
-            onToggle(site);
+            if (!disableToggle) {
+              onToggle(site);
+            }
           }}
           className="w-4 h-4 text-blue-600 bg-white cursor-pointer border-blue-300 rounded focus:ring-blue-500"
           aria-label={`Select ${displayName}`}
+          disabled={disableToggle}
         />
       </div>
     </div>
   );
 };
 
+LocationCard.propTypes = {
+  site: PropTypes.shape({
+    _id: PropTypes.string.isRequired,
+    name: PropTypes.string,
+    search_name: PropTypes.string,
+    country: PropTypes.string,
+  }).isRequired,
+  onToggle: PropTypes.func.isRequired,
+  isSelected: PropTypes.bool.isRequired,
+  isLoading: PropTypes.bool,
+  disableToggle: PropTypes.bool, // New prop to disable toggle when needed
+};
+
+LocationCard.defaultProps = {
+  isLoading: false,
+  disableToggle: false,
+};
+
 export default LocationCard;