Add modal to add equipment

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

@@ -7,6 +7,7 @@ import { LoadingSpinner } from '../../../../components/shared';
 import { PageHeader } from '../../../../components/layout';
 import { useCurrentTenant } from '../../../../stores/tenant.store';
 import { Equipment } from '../../../../types/equipment';
+import { EquipmentModal } from '../../../../components/domain/equipment/EquipmentModal';
 
 const MOCK_EQUIPMENT: Equipment[] = [
   {
@@ -152,19 +153,52 @@ const MaquinariaPage: React.FC = () => {
   const [statusFilter, setStatusFilter] = useState<Equipment['status'] | 'all'>('all');
   const [selectedItem, setSelectedItem] = useState<Equipment | null>(null);
   const [showMaintenanceModal, setShowMaintenanceModal] = useState(false);
+  const [showEquipmentModal, setShowEquipmentModal] = useState(false);
+  const [equipmentModalMode, setEquipmentModalMode] = useState<'view' | 'edit' | 'create'>('create');
+  const [selectedEquipment, setSelectedEquipment] = useState<Equipment | null>(null);
   
   const currentTenant = useCurrentTenant();
   const tenantId = currentTenant?.id || '';
 
   // Mock functions for equipment actions - these would be replaced with actual API calls
   const handleCreateEquipment = () => {
-    console.log('Create new equipment');
-    // Implementation would go here
+    setSelectedEquipment({
+      id: '',
+      name: '',
+      type: 'other',
+      model: '',
+      serialNumber: '',
+      location: '',
+      status: 'operational',
+      installDate: new Date().toISOString().split('T')[0],
+      lastMaintenance: new Date().toISOString().split('T')[0],
+      nextMaintenance: new Date().toISOString().split('T')[0],
+      maintenanceInterval: 30,
+      efficiency: 100,
+      uptime: 100,
+      energyUsage: 0,
+      utilizationToday: 0,
+      alerts: [],
+      maintenanceHistory: [],
+      specifications: {
+        power: 0,
+        capacity: 0,
+        dimensions: { width: 0, height: 0, depth: 0 },
+        weight: 0
+      }
+    } as Equipment);
+    setEquipmentModalMode('create');
+    setShowEquipmentModal(true);
   };
 
   const handleEditEquipment = (equipmentId: string) => {
-    console.log('Edit equipment:', equipmentId);
-    // Implementation would go here
+    // Find the equipment to edit
+    const equipmentToEdit = MOCK_EQUIPMENT.find(eq => eq.id === equipmentId);
+    if (equipmentToEdit) {
+      setSelectedEquipment(equipmentToEdit);
+      setEquipmentModalMode('edit');
+      setShowEquipmentModal(true);
+    }
   };
 
   const handleScheduleMaintenance = (equipmentId: string) => {
@@ -182,6 +216,14 @@ const MaquinariaPage: React.FC = () => {
     // Implementation would go here
   };
 
+  const handleSaveEquipment = (equipment: Equipment) => {
+    console.log('Saving equipment:', equipment);
+    // In a real implementation, you would save to the API
+    // For now, just close the modal
+    setShowEquipmentModal(false);
+    // Refresh equipment list if needed
+  };
+
   const filteredEquipment = useMemo(() => {
     return MOCK_EQUIPMENT.filter(eq => {
       const matchesSearch = !searchTerm ||
@@ -363,6 +405,12 @@ const MaquinariaPage: React.FC = () => {
                   priority: 'primary',
                   onClick: () => handleShowMaintenanceDetails(equipment)
                 },
+                {
+                  label: t('actions.edit'),
+                  icon: Edit,
+                  priority: 'secondary',
+                  onClick: () => handleEditEquipment(equipment.id)
+                },
                 {
                   label: t('actions.view_history'),
                   icon: History,
@@ -578,6 +626,20 @@ const MaquinariaPage: React.FC = () => {
           </div>
         </div>
       )}
+      
+      {/* Equipment Modal */}
+      {showEquipmentModal && (
+        <EquipmentModal
+          isOpen={showEquipmentModal}
+          onClose={() => {
+            setShowEquipmentModal(false);
+            setSelectedEquipment(null);
+          }}
+          equipment={selectedEquipment}
+          onSave={handleSaveEquipment}
+          mode={equipmentModalMode}
+        />
+      )}
     </div>
   );
 };