Improve frontend 5

frontend/src/components/dashboard/InsightsGrid.tsx

@@ -9,6 +9,7 @@
  */
 
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import { Insights } from '../../api/hooks/newDashboard';
 
 interface InsightsGridProps {
@@ -38,18 +39,33 @@ const colorConfig = {
 };
 
 function InsightCard({
-  label,
-  value,
-  detail,
   color,
+  i18n,
 }: {
-  label: string;
-  value: string;
-  detail: string;
   color: 'green' | 'amber' | 'red';
+  i18n: {
+    label: {
+      key: string;
+      params?: Record<string, any>;
+    };
+    value: {
+      key: string;
+      params?: Record<string, any>;
+    };
+    detail: {
+      key: string;
+      params?: Record<string, any>;
+    } | null;
+  };
 }) {
+  const { t } = useTranslation('dashboard');
   const config = colorConfig[color];
 
+  // Translate using i18n keys
+  const displayLabel = t(i18n.label.key, i18n.label.params);
+  const displayValue = t(i18n.value.key, i18n.value.params);
+  const displayDetail = i18n.detail ? t(i18n.detail.key, i18n.detail.params) : '';
+
   return (
     <div
       className="border-2 rounded-xl p-4 md:p-6 transition-all duration-200 hover:shadow-lg cursor-pointer"
@@ -59,13 +75,13 @@ function InsightCard({
       }}
     >
       {/* Label */}
-      <div className="text-sm md:text-base font-bold mb-2" style={{ color: 'var(--text-primary)' }}>{label}</div>
+      <div className="text-sm md:text-base font-bold mb-2" style={{ color: 'var(--text-primary)' }}>{displayLabel}</div>
 
       {/* Value */}
-      <div className="text-xl md:text-2xl font-bold mb-1" style={{ color: config.textColor }}>{value}</div>
+      <div className="text-xl md:text-2xl font-bold mb-1" style={{ color: config.textColor }}>{displayValue}</div>
 
       {/* Detail */}
-      <div className="text-sm font-medium" style={{ color: config.detailColor }}>{detail}</div>
+      <div className="text-sm font-medium" style={{ color: config.detailColor }}>{displayDetail}</div>
     </div>
   );
 }
@@ -93,28 +109,20 @@ export function InsightsGrid({ insights, loading }: InsightsGridProps) {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
       <InsightCard
-        label={insights.savings?.label || 'Savings'}
-        value={insights.savings?.value || '€0'}
-        detail={insights.savings?.detail || 'This week'}
-        color={insights.savings?.color || 'green'}
+        color={insights.savings.color}
+        i18n={insights.savings.i18n}
       />
       <InsightCard
-        label={insights.inventory?.label || 'Inventory'}
-        value={insights.inventory?.value || '0%'}
-        detail={insights.inventory?.detail || 'Status'}
-        color={insights.inventory?.color || 'green'}
+        color={insights.inventory.color}
+        i18n={insights.inventory.i18n}
       />
       <InsightCard
-        label={insights.waste?.label || 'Waste'}
-        value={insights.waste?.value || '0%'}
-        detail={insights.waste?.detail || 'Reduction'}
-        color={insights.waste?.color || 'green'}
+        color={insights.waste.color}
+        i18n={insights.waste.i18n}
       />
       <InsightCard
-        label={insights.deliveries?.label || 'Deliveries'}
-        value={insights.deliveries?.value || '0%'}
-        detail={insights.deliveries?.detail || 'On-time'}
-        color={insights.deliveries?.color || 'green'}
+        color={insights.deliveries.color}
+        i18n={insights.deliveries.i18n}
       />
     </div>
   );