Refactor components and modals

frontend/src/pages/app/operations/production/ProductionPage.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useMemo } from 'react';
 import { Plus, Clock, AlertCircle, CheckCircle, Timer, ChefHat, Eye, Edit, Package, Zap, User, PlusCircle } from 'lucide-react';
-import { Button, Input, Card, StatsGrid, StatusModal, Toggle } from '../../../../components/ui';
+import { Button, Input, Card, StatsGrid, EditViewModal, Toggle } from '../../../../components/ui';
 import { statusColors } from '../../../../styles/colors';
 import { formatters } from '../../../../components/ui/Stats/StatsPresets';
-import { LoadingSpinner } from '../../../../components/shared';
+import { LoadingSpinner } from '../../../../components/ui';
 import { PageHeader } from '../../../../components/layout';
 import { ProductionSchedule, CreateProductionBatchModal, ProductionStatusCard, QualityCheckModal, CompactProcessStageTracker } from '../../../../components/domain/production';
 import { useCurrentTenant } from '../../../../stores/tenant.store';
@@ -23,7 +23,7 @@ import {
   ProductionStatusEnum,
   ProductionPriorityEnum
 } from '../../../../api';
-import { useProductionEnums } from '../../../../utils/enumHelpers';
+import { useTranslation } from 'react-i18next';
 import { ProcessStage } from '../../../../api/types/qualityTemplates';
 
 const ProductionPage: React.FC = () => {
@@ -37,7 +37,7 @@ const ProductionPage: React.FC = () => {
 
   const currentTenant = useCurrentTenant();
   const tenantId = currentTenant?.id || '';
-  const productionEnums = useProductionEnums();
+  const { t } = useTranslation(['production', 'common']);
 
   // API Data
   const {
@@ -471,7 +471,7 @@ const ProductionPage: React.FC = () => {
 
       {/* Production Batch Modal */}
       {showBatchModal && selectedBatch && (
-        <StatusModal
+        <EditViewModal
           isOpen={showBatchModal}
           onClose={() => {
             setShowBatchModal(false);
@@ -484,7 +484,7 @@ const ProductionPage: React.FC = () => {
           subtitle={`Lote de Producción #${selectedBatch.batch_number}`}
           statusIndicator={{
             color: statusColors.inProgress.primary,
-            text: productionEnums.getProductionStatusLabel(selectedBatch.status),
+            text: t(`production:status.${selectedBatch.status.toLowerCase()}`),
             icon: Package
           }}
           size="lg"
@@ -511,14 +511,20 @@ const ProductionPage: React.FC = () => {
                   value: selectedBatch.priority,
                   type: 'select',
                   editable: modalMode === 'edit',
-                  options: productionEnums.getProductionPriorityOptions()
+                  options: Object.values(ProductionPriorityEnum).map(value => ({
+                    value,
+                    label: t(`production:priority.${value.toLowerCase()}`)
+                  }))
                 },
                 {
                   label: 'Estado',
                   value: selectedBatch.status,
                   type: 'select',
                   editable: modalMode === 'edit',
-                  options: productionEnums.getProductionStatusOptions()
+                  options: Object.values(ProductionStatusEnum).map(value => ({
+                    value,
+                    label: t(`production:status.${value.toLowerCase()}`)
+                  }))
                 },
                 {
                   label: 'Personal Asignado',