Improve the frontend modals

frontend/src/pages/app/DashboardPage.tsx

@@ -6,7 +6,7 @@ import StatsGrid from '../../components/ui/Stats/StatsGrid';
 import RealTimeAlerts from '../../components/domain/dashboard/RealTimeAlerts';
 import PendingPOApprovals from '../../components/domain/dashboard/PendingPOApprovals';
 import TodayProduction from '../../components/domain/dashboard/TodayProduction';
-import SustainabilityWidget from '../../components/domain/sustainability/SustainabilityWidget';
+// Sustainability widget removed - now using stats in StatsGrid
 import { EditViewModal } from '../../components/ui';
 import { useTenant } from '../../stores/tenant.store';
 import { useDemoTour, shouldStartTour, clearTourStartPending } from '../../features/demo-onboarding';
@@ -26,7 +26,9 @@ import {
   X,
   ShoppingCart,
   Factory,
-  Timer
+  Timer,
+  TrendingDown,
+  Leaf
 } from 'lucide-react';
 import toast from 'react-hot-toast';
 
@@ -259,6 +261,28 @@ const DashboardPage: React.FC = () => {
         subtitle: dashboardStats.criticalStock > 0
           ? t('dashboard:messages.action_required', 'Action required')
           : t('dashboard:messages.stock_healthy', 'Stock levels healthy')
+      },
+      {
+        title: t('dashboard:stats.waste_reduction', 'Waste Reduction'),
+        value: dashboardStats.wasteReductionPercentage
+          ? `${Math.abs(dashboardStats.wasteReductionPercentage).toFixed(1)}%`
+          : '0%',
+        icon: TrendingDown,
+        variant: (dashboardStats.wasteReductionPercentage || 0) >= 15 ? ('success' as const) : ('info' as const),
+        trend: undefined,
+        subtitle: (dashboardStats.wasteReductionPercentage || 0) >= 15
+          ? t('dashboard:messages.excellent_progress', 'Excellent progress!')
+          : t('dashboard:messages.keep_improving', 'Keep improving')
+      },
+      {
+        title: t('dashboard:stats.monthly_savings', 'Monthly Savings'),
+        value: dashboardStats.monthlySavingsEur
+          ? `€${dashboardStats.monthlySavingsEur.toFixed(0)}`
+          : '€0',
+        icon: Leaf,
+        variant: 'success' as const,
+        trend: undefined,
+        subtitle: t('dashboard:messages.from_sustainability', 'From sustainability')
       }
     ];
   }, [dashboardStats, t]);
@@ -382,8 +406,8 @@ const DashboardPage: React.FC = () => {
       {/* Critical Metrics using StatsGrid */}
       <div data-tour="dashboard-stats">
         {isLoadingStats ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-6">
-            {[1, 2, 3, 4].map((i) => (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-6 gap-4 mb-6">
+            {[1, 2, 3, 4, 5, 6].map((i) => (
               <div
                 key={i}
                 className="h-32 bg-[var(--bg-secondary)] border border-[var(--border-primary)] rounded-lg animate-pulse"
@@ -399,7 +423,7 @@ const DashboardPage: React.FC = () => {
         ) : (
           <StatsGrid
             stats={criticalStats}
-            columns={4}
+            columns={6}
             gap="lg"
             className="mb-6"
           />
@@ -413,19 +437,7 @@ const DashboardPage: React.FC = () => {
           <RealTimeAlerts />
         </div>
 
-        {/* 2. Sustainability Impact - NEW! */}
-        <div data-tour="sustainability-widget">
-          <SustainabilityWidget
-            days={30}
-            onViewDetails={() => navigate('/app/analytics/sustainability')}
-            onExportReport={() => {
-              // TODO: Implement export modal
-              console.log('Export sustainability report');
-            }}
-          />
-        </div>
-
-        {/* 3. Pending PO Approvals - What purchase orders need approval? */}
+        {/* 2. Pending PO Approvals - What purchase orders need approval? */}
         <div data-tour="pending-po-approvals">
           <PendingPOApprovals
             onApprovePO={handleApprovePO}
@@ -436,7 +448,7 @@ const DashboardPage: React.FC = () => {
           />
         </div>
 
-        {/* 4. Today's Production - What needs to be produced today? */}
+        {/* 3. Today's Production - What needs to be produced today? */}
         <div data-tour="today-production">
           <TodayProduction
             onStartBatch={handleStartBatch}