Add improved production UI 4

frontend/src/pages/app/operations/maquinaria/MaquinariaPage.tsx

@@ -1,7 +1,8 @@
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Plus, AlertTriangle, Settings, CheckCircle, Eye, Clock, Zap, Wrench, Thermometer, Activity, Search, Filter, Download, TrendingUp, Bell, History, Calendar, Edit, Trash2 } from 'lucide-react';
+import { Plus, AlertTriangle, Settings, CheckCircle, Eye, Wrench, Thermometer, Activity, Search, Filter, Bell, History, Calendar, Edit, Trash2 } from 'lucide-react';
 import { Button, Input, Card, StatsGrid, StatusCard, getStatusColor } from '../../../../components/ui';
+import { Badge } from '../../../../components/ui/Badge';
 import { LoadingSpinner } from '../../../../components/shared';
 import { PageHeader } from '../../../../components/layout';
 import { useCurrentTenant } from '../../../../stores/tenant.store';
@@ -200,8 +201,6 @@ const MaquinariaPage: React.FC = () => {
     const warning = MOCK_EQUIPMENT.filter(e => e.status === 'warning').length;
     const maintenance = MOCK_EQUIPMENT.filter(e => e.status === 'maintenance').length;
     const down = MOCK_EQUIPMENT.filter(e => e.status === 'down').length;
-    const avgEfficiency = MOCK_EQUIPMENT.reduce((sum, e) => sum + e.efficiency, 0) / total;
-    const avgUptime = MOCK_EQUIPMENT.reduce((sum, e) => sum + e.uptime, 0) / total;
     const totalAlerts = MOCK_EQUIPMENT.reduce((sum, e) => sum + e.alerts.filter(a => !a.acknowledged).length, 0);
 
     return {
@@ -210,8 +209,6 @@ const MaquinariaPage: React.FC = () => {
       warning,
       maintenance,
       down,
-      avgEfficiency,
-      avgUptime,
       totalAlerts
     };
   }, [MOCK_EQUIPMENT]);
@@ -231,23 +228,13 @@ const MaquinariaPage: React.FC = () => {
       oven: Thermometer,
       mixer: Activity,
       proofer: Settings,
-      freezer: Zap,
+      freezer: Settings,
       packaging: Settings,
       other: Settings
     };
     return icons[type];
   };
 
-  const getStatusColor = (status: string): string => {
-    const statusColors: { [key: string]: string } = {
-      operational: '#10B981', // green-500
-      warning: '#F59E0B', // amber-500
-      maintenance: '#3B82F6', // blue-500
-      down: '#EF4444' // red-500
-    };
-    return statusColors[status] || '#6B7280'; // gray-500 as default
-  };
-
   const stats = [
     {
       title: t('labels.total_equipment'),
@@ -262,12 +249,6 @@ const MaquinariaPage: React.FC = () => {
       variant: 'success' as const,
       subtitle: `${((equipmentStats.operational / equipmentStats.total) * 100).toFixed(1)}%`
     },
-    {
-      title: t('labels.avg_efficiency'),
-      value: `${equipmentStats.avgEfficiency.toFixed(1)}%`,
-      icon: TrendingUp,
-      variant: equipmentStats.avgEfficiency >= 90 ? 'success' as const : 'warning' as const
-    },
     {
       title: t('labels.active_alerts'),
       value: equipmentStats.totalAlerts,