metrics adn insihigts

frontend/src/components/header/HeaderMetrics.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
 import { useHeaderMetrics } from '../../context/HeaderMetricsContext';
+import { Tooltip } from '../ui/tooltip/Tooltip';
+import { InfoIcon } from '../../icons';
 
 export const HeaderMetrics: React.FC = () => {
   const { metrics } = useHeaderMetrics();
@@ -8,18 +10,35 @@ export const HeaderMetrics: React.FC = () => {
 
   return (
     <div className="igny8-header-metrics flex">
-      {metrics.map((metric, index) => (
-        <React.Fragment key={index}>
-          <div className="igny8-header-metric">
+      {metrics.map((metric, index) => {
+        const metricElement = (
+          <div className={`igny8-header-metric ${metric.tooltip ? 'cursor-help' : ''}`}>
             <div className={`igny8-header-metric-accent ${metric.accentColor}`}></div>
-            <span className="igny8-header-metric-label">{metric.label}</span>
+            <span className="igny8-header-metric-label text-xs flex items-center gap-1">
+              {metric.label}
+              {metric.tooltip && (
+                <InfoIcon className="w-3 h-3 text-gray-400 dark:text-gray-500" />
+              )}
+            </span>
             <span className="igny8-header-metric-value">
               {typeof metric.value === 'number' ? metric.value.toLocaleString() : metric.value}
             </span>
           </div>
-          {index < metrics.length - 1 && <div className="igny8-header-metric-separator"></div>}
-        </React.Fragment>
-      ))}
+        );
+
+        return (
+          <React.Fragment key={index}>
+            {metric.tooltip ? (
+              <Tooltip text={metric.tooltip} placement="bottom">
+                {metricElement}
+              </Tooltip>
+            ) : (
+              metricElement
+            )}
+            {index < metrics.length - 1 && <div className="igny8-header-metric-separator"></div>}
+          </React.Fragment>
+        );
+      })}
     </div>
   );
 };