updates

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

@@ -27,26 +27,35 @@ const AQI_CATEGORY_MAP = {
 
 const MAX_CARDS = 4;
 
+// ====================== Utility Functions ====================== //
+
 /**
- * Generates trend data based on percentage difference
- * @param {Object} averages - The averages object containing percentageDifference
- * @returns {Object|null} - The trend data or null if not available
+ * Generates trend data based on percentage difference.
+ * @param {Object} averages - The averages object containing percentageDifference.
+ * @returns {Object|null} - The trend data or null if not available.
  */
-const getTrendData = (averages) => {
+const generateTrendData = (averages) => {
   if (!averages?.percentageDifference) return null;
 
   const percentageDifference = Math.abs(averages.percentageDifference);
   const isIncreasing = averages.percentageDifference > 0;
 
+  let trendTooltip =
+    'No significant change in air quality compared to the previous week.';
+
+  if (isIncreasing) {
+    trendTooltip = `AQI has increased by ${percentageDifference}% compared to the previous week, indicating deteriorating air quality.`;
+  } else if (averages.percentageDifference < 0) {
+    trendTooltip = `AQI has decreased by ${percentageDifference}% compared to the previous week, indicating improving air quality.`;
+  }
+
   return {
-    trendIcon: isIncreasing ? IconMap.trend2 : IconMap.trend1,
+    trendIcon: isIncreasing ? IconMap.trend2 : IconMap.trend1, // Reverted to existing icons
     trendColor: isIncreasing
       ? 'text-red-700 bg-red-100'
       : 'text-green-700 bg-green-100',
-    trendText: `${percentageDifference.toFixed(0)}%`,
-    trendTooltip: isIncreasing
-      ? `Air quality has worsened by ${percentageDifference.toFixed(0)}%`
-      : `Air quality has improved by ${percentageDifference.toFixed(0)}%`,
+    trendText: `${percentageDifference}%`,
+    trendTooltip,
     isIncreasing,
   };
 };
@@ -56,12 +65,20 @@ const getTrendData = (averages) => {
 const TrendIndicator = React.memo(({ trendData }) => (
   <Tooltip
     content={trendData?.trendTooltip || 'No trend data available'}
-    className="w-52"
+    placement="top"
+    className="w-64"
   >
     <div
       className={`shrink-0 px-2 py-1 rounded-xl text-xs flex items-center gap-1.5 ${
         trendData ? trendData.trendColor : 'bg-gray-100 text-gray-500'
       }`}
+      aria-label={
+        trendData
+          ? trendData.isIncreasing
+            ? 'Air quality has deteriorated compared to last week.'
+            : 'Air quality has improved compared to last week.'
+          : 'No trend data available.'
+      }
     >
       {trendData ? (
         <>
@@ -86,6 +103,7 @@ TrendIndicator.propTypes = {
     trendColor: PropTypes.string,
     trendText: PropTypes.string,
     trendTooltip: PropTypes.string,
+    isIncreasing: PropTypes.bool,
   }),
 };
 
@@ -123,7 +141,7 @@ const SiteCard = React.memo(
 
     const AirQualityIcon = IconMap[statusKey];
     const trendData = useMemo(
-      () => getTrendData(measurement?.averages),
+      () => generateTrendData(measurement?.averages),
       [measurement],
     );
 
@@ -134,7 +152,11 @@ const SiteCard = React.memo(
 
       if (isTruncated) {
         return (
-          <Tooltip content={site.name || 'No Location Data'} className="w-52">
+          <Tooltip
+            content={site.name || 'No Location Data'}
+            placement="top"
+            className="w-52"
+          >
             <span className={`${baseClasses} inline-block`} ref={nameRef}>
               {site.name || '---'}
             </span>
@@ -153,6 +175,7 @@ const SiteCard = React.memo(
       <button
         className="w-full h-auto"
         onClick={() => onOpenModal('inSights', [], site)}
+        aria-label={`View detailed insights for ${site.name || 'this location'}`}
       >
         <div className="w-full flex flex-col justify-between bg-white border border-gray-200 rounded-xl px-6 py-5 h-[220px] shadow-sm hover:shadow-md transition-shadow duration-200 ease-in-out cursor-pointer">
           {/* Header Section */}
@@ -172,7 +195,7 @@ const SiteCard = React.memo(
             <div>
               <div className="flex items-center gap-2 mb-3">
                 <div className="p-1.5 bg-gray-100 rounded-full flex items-center justify-center">
-                  <IconMap.wind className="w-3.5 h-3.5" />
+                  <IconMap.wind className="text-gray-500" />
                 </div>
                 <div className="text-slate-400 text-sm font-medium">
                   {pollutantType === 'pm2_5' ? 'PM2.5' : 'PM10'}
@@ -194,7 +217,10 @@ const SiteCard = React.memo(
               >
                 <div className="w-16 h-16 flex items-center justify-center">
                   {AirQualityIcon && (
-                    <AirQualityIcon className="w-full h-full" />
+                    <AirQualityIcon
+                      className="w-full h-full"
+                      aria-hidden="true"
+                    />
                   )}
                 </div>
               </Tooltip>
@@ -224,10 +250,10 @@ SiteCard.propTypes = {
 const AddLocationCard = React.memo(({ onOpenModal }) => (
   <button
     onClick={() => onOpenModal('addLocation')}
-    className="border-dashed border-2 border-blue-400 bg-blue-50 rounded-xl px-4 py-6 h-[220px] flex justify-center items-center text-blue-500 transition-transform transform hover:scale-95"
-    aria-label="Add Location"
+    className="border-dashed border-2 border-blue-400 bg-blue-50 rounded-xl px-4 py-6 h-[220px] flex justify-center items-center text-blue-500 transition-transform transform hover:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500"
+    aria-label="Add a new location to monitor air quality"
   >
-    + Add location
+    + Add Location
   </button>
 ));
 

platform/src/common/components/Modal/dataDownload/modules/DataDownload.jsx

@@ -76,20 +76,20 @@ const DataDownload = ({ onClose }) => {
     return preferencesData?.[0]?.selected_sites?.map((site) => site._id) || [];
   }, [preferencesData]);
 
-  // Network options based on user groups
-  const NETWORK_OPTIONS = useMemo(
+  // Organization options based on user groups
+  const ORGANIZATION_OPTIONS = useMemo(
     () =>
-      userInfo?.groups?.map((network) => ({
-        id: network._id,
-        name: network.grp_title,
+      userInfo?.groups?.map((group) => ({
+        id: group._id,
+        name: group.grp_title,
       })) || [],
     [userInfo],
   );
 
   // Form data state
   const [formData, setFormData] = useState({
     title: { name: 'Untitled Report' },
-    network: null, // Will be set in useEffect
+    organization: null,
     dataType: DATA_TYPE_OPTIONS[0],
     pollutant: POLLUTANT_OPTIONS[0],
     duration: null,
@@ -100,29 +100,29 @@ const DataDownload = ({ onClose }) => {
   const [edit, setEdit] = useState(false);
 
   /**
-   * Initialize default network once NETWORK_OPTIONS are available.
-   * Defaults to "airqo" if available; otherwise, selects the first network.
+   * Initialize default organization once ORGANIZATION_OPTIONS are available.
+   * Defaults to "airqo" if available; otherwise, selects the first organization.
    */
   useEffect(() => {
-    if (NETWORK_OPTIONS.length > 0 && !formData.network) {
-      const airqoNetwork = NETWORK_OPTIONS.find(
-        (network) => network.name.toLowerCase() === 'airqo',
+    if (ORGANIZATION_OPTIONS.length > 0 && !formData.organization) {
+      const airqoNetwork = ORGANIZATION_OPTIONS.find(
+        (group) => group.name.toLowerCase() === 'airqo',
       );
       setFormData((prevData) => ({
         ...prevData,
-        network: airqoNetwork || NETWORK_OPTIONS[0],
+        organization: airqoNetwork || ORGANIZATION_OPTIONS[0],
       }));
     }
-  }, [NETWORK_OPTIONS, formData.network]);
+  }, [ORGANIZATION_OPTIONS, formData.organization]);
 
   /**
    * Fetch sites summary whenever the selected organization changes.
    */
   useEffect(() => {
-    if (formData.network) {
-      dispatch(fetchSitesSummary({ group: formData.network.name }));
+    if (formData.organization) {
+      dispatch(fetchSitesSummary({ group: formData.organization.name }));
     }
-  }, [dispatch, formData.network]);
+  }, [dispatch, formData.organization]);
 
   /**
    * Clears all selected sites and resets form data.
@@ -131,13 +131,13 @@ const DataDownload = ({ onClose }) => {
     setClearSelected(true);
     setSelectedSites([]);
     // Reset form data after submission
-    const airqoNetwork = NETWORK_OPTIONS.find(
-      (network) => network.name.toLowerCase() === 'airqo',
+    const airqoNetwork = ORGANIZATION_OPTIONS.find(
+      (group) => group.name.toLowerCase() === 'airqo',
     );
     setFormData({
       title: { name: 'Untitled Report' },
-      network: airqoNetwork ||
-        NETWORK_OPTIONS[0] || { id: '', name: 'Default Network' },
+      organization: airqoNetwork ||
+        ORGANIZATION_OPTIONS[0] || { id: '', name: 'Default Network' },
       dataType: DATA_TYPE_OPTIONS[0],
       pollutant: POLLUTANT_OPTIONS[0],
       duration: null,
@@ -146,7 +146,7 @@ const DataDownload = ({ onClose }) => {
     });
     // Reset clearSelected flag in the next tick
     setTimeout(() => setClearSelected(false), 0);
-  }, [NETWORK_OPTIONS]);
+  }, [ORGANIZATION_OPTIONS]);
 
   /**
    * Handles the selection of form options.
@@ -232,7 +232,7 @@ const DataDownload = ({ onClose }) => {
           startDateTime: format(startDate, "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"),
           endDateTime: format(endDate, "yyyy-MM-dd'T'HH:mm:ss.SSS'Z'"),
           sites: selectedSites.map((site) => site._id),
-          network: formData.network.name,
+          network: formData.organization.name,
           datatype:
             formData.dataType.name.toLowerCase() === 'calibrated data'
               ? 'calibrated'
@@ -333,11 +333,11 @@ const DataDownload = ({ onClose }) => {
           handleOptionSelect={handleOptionSelect}
         />
         <CustomFields
-          title="Network"
-          options={NETWORK_OPTIONS}
-          id="network"
+          title="Organization"
+          options={ORGANIZATION_OPTIONS}
+          id="organization"
           icon={<WorldIcon width={16} height={16} fill="#000" />}
-          defaultOption={formData.network}
+          defaultOption={formData.organization}
           handleOptionSelect={handleOptionSelect}
           textFormat="uppercase"
         />

platform/src/common/components/Modal/dataDownload/modules/MoreInsights.jsx

@@ -228,7 +228,7 @@ const MoreInsights = () => {
         network: chartData.organizationName,
         pollutants: [chartData.pollutionType],
         frequency: frequency,
-        datatype: 'raw',
+        datatype: 'calibrated',
         downloadType: 'csv',
         outputFormat: 'airqo-standard',
         minimum: true,
@@ -361,7 +361,7 @@ const MoreInsights = () => {
             {/* Actions: Download Data */}
             <div>
               <Tooltip
-                content={'Download data in CSV format'}
+                content={'Download calibrated data in CSV format'}
                 className="w-auto text-center"
               >
                 <TabButtons

platform/src/common/styles/global.scss

@@ -10,6 +10,7 @@ body {
   padding: 0;
   // background-color: #f6f6f7;
   box-sizing: border-box;
+  overflow-x: hidden;
 }
 
 *,