Improve the frontend modals

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

@@ -1,7 +1,7 @@
 import React, { useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Plus, AlertTriangle, Settings, CheckCircle, Eye, Wrench, Thermometer, Activity, Search, Filter, Bell, History, Calendar, Edit, Trash2 } from 'lucide-react';
-import { Button, StatsGrid, StatusCard, getStatusColor, SearchAndFilter, type FilterConfig } from '../../../../components/ui';
+import { Button, StatsGrid, StatusCard, getStatusColor, SearchAndFilter, type FilterConfig, EmptyState } from '../../../../components/ui';
 import { Badge } from '../../../../components/ui/Badge';
 import { LoadingSpinner } from '../../../../components/ui';
 import { PageHeader } from '../../../../components/layout';
@@ -164,22 +164,39 @@ const MaquinariaPage: React.FC = () => {
     {
       title: t('labels.total_equipment'),
       value: equipmentStats.total,
+      variant: 'default' as const,
       icon: Settings,
-      variant: 'default' as const
     },
     {
       title: t('labels.operational'),
       value: equipmentStats.operational,
-      icon: CheckCircle,
       variant: 'success' as const,
-      subtitle: `${((equipmentStats.operational / equipmentStats.total) * 100).toFixed(1)}%`
+      icon: CheckCircle,
+    },
+    {
+      title: t('labels.warning'),
+      value: equipmentStats.warning,
+      variant: 'warning' as const,
+      icon: AlertTriangle,
+    },
+    {
+      title: t('labels.maintenance_required'),
+      value: equipmentStats.maintenance,
+      variant: 'info' as const,
+      icon: Wrench,
+    },
+    {
+      title: t('labels.down'),
+      value: equipmentStats.down,
+      variant: 'error' as const,
+      icon: AlertTriangle,
     },
     {
       title: t('labels.active_alerts'),
       value: equipmentStats.totalAlerts,
+      variant: equipmentStats.totalAlerts === 0 ? 'success' as const : 'error' as const,
       icon: Bell,
-      variant: equipmentStats.totalAlerts === 0 ? 'success' as const : 'error' as const
-    }
+    },
   ];
 
   const handleShowMaintenanceDetails = (equipment: Equipment) => {
@@ -345,24 +362,14 @@ const MaquinariaPage: React.FC = () => {
 
       {/* Empty State */}
       {filteredEquipment.length === 0 && (
-        <div className="text-center py-12">
-          <Settings className="mx-auto h-12 w-12 text-[var(--text-tertiary)] mb-4" />
-          <h3 className="text-lg font-medium text-[var(--text-primary)] mb-2">
-            {t('common:forms.no_results')}
-          </h3>
-          <p className="text-[var(--text-secondary)] mb-4">
-            {t('common:forms.empty_state')}
-          </p>
-          <Button
-            onClick={handleCreateEquipment}
-            variant="primary"
-            size="md"
-            className="font-medium px-4 sm:px-6 py-2 sm:py-3 shadow-sm hover:shadow-md transition-all duration-200"
-          >
-            <Plus className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2 flex-shrink-0" />
-            <span className="text-sm sm:text-base">{t('actions.add_equipment')}</span>
-          </Button>
-        </div>
+        <EmptyState
+          icon={Settings}
+          title={t('common:forms.no_results')}
+          description={t('common:forms.empty_state')}
+          actionLabel={t('actions.add_equipment')}
+          actionIcon={Plus}
+          onAction={handleCreateEquipment}
+        />
       )}
 
       {/* Maintenance Details Modal */}
@@ -558,4 +565,4 @@ const MaquinariaPage: React.FC = () => {
   );
 };
 
-export default MaquinariaPage;
+export default MaquinariaPage;