Update Industries.tsx

frontend/src/pages/Reference/Industries.tsx

@@ -10,8 +10,19 @@ import { PieChartIcon } from '../../icons';
 interface IndustryWithData extends Industry {
   keywordsCount: number;
   topKeywords: SeedKeyword[];
+  totalVolume: number;
 }
 
+// Format volume with k for thousands and m for millions
+const formatVolume = (volume: number): string => {
+  if (volume >= 1000000) {
+    return `${(volume / 1000000).toFixed(1)}m`;
+  } else if (volume >= 1000) {
+    return `${(volume / 1000).toFixed(1)}k`;
+  }
+  return volume.toString();
+};
+
 export default function Industries() {
   const toast = useToast();
   const [industries, setIndustries] = useState<IndustryWithData[]>([]);
@@ -51,10 +62,17 @@ export default function Industries() {
           .sort((a, b) => (b.volume || 0) - (a.volume || 0))
           .slice(0, 5);
         
+        // Calculate total volume of all keywords
+        const totalVolume = industryKeywords.reduce(
+          (sum, kw) => sum + (kw.volume || 0),
+          0
+        );
+        
         return {
           ...industry,
           keywordsCount: industryKeywords.length,
           topKeywords,
+          totalVolume,
         };
       });
       
@@ -102,9 +120,9 @@ export default function Industries() {
                   <h3 className="text-base font-bold text-gray-900 dark:text-white leading-tight">
                     {industry.name}
                   </h3>
-                  {industry.is_active !== false && (
-                    <Badge variant="light" color="success" size="xs">
-                      Active
+                  {industry.totalVolume > 0 && (
+                    <Badge variant="solid" color="dark" size="sm">
+                      {formatVolume(industry.totalVolume)}
                     </Badge>
                   )}
                 </div>