inventario, mapa, login etc..

lib/models/nethive/conexion_componente_model.dart

@@ -0,0 +1,42 @@
+import 'dart:convert';
+
+class ConexionComponente {
+  final String id;
+  final String componenteOrigenId;
+  final String componenteDestinoId;
+  final String? descripcion;
+  final bool activo;
+
+  ConexionComponente({
+    required this.id,
+    required this.componenteOrigenId,
+    required this.componenteDestinoId,
+    this.descripcion,
+    required this.activo,
+  });
+
+  factory ConexionComponente.fromMap(Map<String, dynamic> map) {
+    return ConexionComponente(
+      id: map['id'],
+      componenteOrigenId: map['componente_origen_id'],
+      componenteDestinoId: map['componente_destino_id'],
+      descripcion: map['descripcion'],
+      activo: map['activo'],
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    return {
+      'id': id,
+      'componente_origen_id': componenteOrigenId,
+      'componente_destino_id': componenteDestinoId,
+      'descripcion': descripcion,
+      'activo': activo,
+    };
+  }
+
+  factory ConexionComponente.fromJson(String source) =>
+      ConexionComponente.fromMap(json.decode(source));
+
+  String toJson() => json.encode(toMap());
+}

lib/models/nethive/distribucion_model.dart

@@ -0,0 +1,42 @@
+import 'dart:convert';
+
+class Distribucion {
+  final String id;
+  final String negocioId;
+  final String tipo; // 'MDF' o 'IDF'
+  final String nombre;
+  final String? descripcion;
+
+  Distribucion({
+    required this.id,
+    required this.negocioId,
+    required this.tipo,
+    required this.nombre,
+    this.descripcion,
+  });
+
+  factory Distribucion.fromMap(Map<String, dynamic> map) {
+    return Distribucion(
+      id: map['id'],
+      negocioId: map['negocio_id'],
+      tipo: map['tipo'],
+      nombre: map['nombre'],
+      descripcion: map['descripcion'],
+    );
+  }
+
+  Map<String, dynamic> toMap() {
+    return {
+      'id': id,
+      'negocio_id': negocioId,
+      'tipo': tipo,
+      'nombre': nombre,
+      'descripcion': descripcion,
+    };
+  }
+
+  factory Distribucion.fromJson(String source) =>
+      Distribucion.fromMap(json.decode(source));
+
+  String toJson() => json.encode(toMap());
+}

lib/pages/empresa_negocios/widgets/negocios_table.dart

@@ -4,6 +4,8 @@ import 'package:go_router/go_router.dart';
 import 'package:nethive_neo/providers/nethive/empresas_negocios_provider.dart';
 import 'package:nethive_neo/pages/widgets/animated_hover_button.dart';
 import 'package:nethive_neo/theme/theme.dart';
+import 'package:provider/provider.dart';
+import 'package:nethive_neo/providers/nethive/componentes_provider.dart';
 
 class NegociosTable extends StatelessWidget {
   final EmpresasNegociosProvider provider;
@@ -320,10 +322,28 @@ class NegociosTable extends StatelessWidget {
                             rendererContext.row.cells['id']?.value;
                         final negocioNombre =
                             rendererContext.row.cells['nombre']?.value;
+                        final empresaId =
+                            rendererContext.row.cells['empresa_id']?.value;
 
-                        if (negocioId != null) {
+                        if (negocioId != null &&
-                          // Navegar al layout principal con el negocio seleccionado
+                            negocioNombre != null &&
-                          context.go('/infrastructure/$negocioId');
+                            empresaId != null) {
+                          // Establecer el contexto del negocio en ComponentesProvider
+                          final componentesProvider =
+                              Provider.of<ComponentesProvider>(context,
+                                  listen: false);
+                          componentesProvider
+                              .setNegocioSeleccionado(
+                            negocioId,
+                            negocioNombre,
+                            empresaId,
+                          )
+                              .then((_) {
+                            // Navegar al layout principal con el negocio seleccionado
+                            if (context.mounted) {
+                              context.go('/infrastructure/$negocioId');
+                            }
+                          });
                         }
                       },
                       borderRadius: BorderRadius.circular(12),

lib/pages/infrastructure/infrastructure_layout.dart

@@ -45,17 +45,43 @@ class _InfrastructureLayoutState extends State<InfrastructureLayout>
     ));
 
     // Establecer el negocio seleccionado
-    WidgetsBinding.instance.addPostFrameCallback((_) {
+    WidgetsBinding.instance.addPostFrameCallback((_) async {
+      // Primero establecer en NavigationProvider
       context
           .read<NavigationProvider>()
           .setNegocioSeleccionado(widget.negocioId);
-      context
+
-          .read<ComponentesProvider>()
+      // Luego obtener la información completa y establecer en ComponentesProvider
-          .setNegocioSeleccionado(widget.negocioId);
+      await _setupComponentesProvider();
+
       _fadeController.forward();
     });
   }
 
+  Future<void> _setupComponentesProvider() async {
+    try {
+      final navigationProvider = context.read<NavigationProvider>();
+      final componentesProvider = context.read<ComponentesProvider>();
+
+      // Esperar a que NavigationProvider cargue la información del negocio
+      await Future.delayed(const Duration(milliseconds: 100));
+
+      final negocio = navigationProvider.negocioSeleccionado;
+      final empresa = navigationProvider.empresaSeleccionada;
+
+      if (negocio != null && empresa != null) {
+        // Establecer el contexto completo en ComponentesProvider
+        await componentesProvider.setNegocioSeleccionado(
+          negocio.id,
+          negocio.nombre,
+          empresa.id,
+        );
+      }
+    } catch (e) {
+      print('Error al configurar ComponentesProvider: ${e.toString()}');
+    }
+  }
+
   @override
   void dispose() {
     _fadeController.dispose();

lib/pages/infrastructure/pages/inventario_page.dart

@@ -3,6 +3,7 @@ import 'package:provider/provider.dart';
 import 'package:pluto_grid/pluto_grid.dart';
 import 'package:nethive_neo/providers/nethive/componentes_provider.dart';
 import 'package:nethive_neo/pages/infrastructure/widgets/componentes_cards_view.dart';
+import 'package:nethive_neo/pages/infrastructure/widgets/edit_componente_dialog.dart';
 import 'package:nethive_neo/theme/theme.dart';
 
 class InventarioPage extends StatefulWidget {
@@ -339,7 +340,7 @@ class _InventarioPageState extends State<InventarioPage>
             ),
           ),
 
-          // Tabla de componentes con PlutoGrid (como en la imagen de referencia)
+          // Tabla de componentes con PlutoGrid
           Expanded(
             child: componentesProvider.componentesRows.isEmpty
                 ? _buildEmptyState()
@@ -364,7 +365,13 @@ class _InventarioPageState extends State<InventarioPage>
                         scrollbarRadiusWhileDragging: const Radius.circular(10),
                       ),
                       style: PlutoGridStyleConfig(
-                        gridBorderColor: Colors.grey.withOpacity(0.3),
+                        enableRowColorAnimation: true,
+                        gridBorderColor:
+                            AppTheme.of(context).primaryColor.withOpacity(0.5),
+                        disabledIconColor:
+                            AppTheme.of(context).alternate.withOpacity(0.3),
+                        iconColor:
+                            AppTheme.of(context).alternate.withOpacity(0.3),
                         activatedBorderColor: AppTheme.of(context).primaryColor,
                         inactivatedBorderColor: Colors.grey.withOpacity(0.3),
                         gridBackgroundColor:
@@ -389,7 +396,7 @@ class _InventarioPageState extends State<InventarioPage>
                           bottomLeft: Radius.circular(16),
                           bottomRight: Radius.circular(16),
                         ),
-                        rowHeight: 55,
+                        rowHeight: 70,
                       ),
                       columnFilter: const PlutoGridColumnFilterConfig(
                         filters: [
@@ -401,9 +408,9 @@ class _InventarioPageState extends State<InventarioPage>
                       PlutoColumn(
                         title: 'ID',
                         field: 'id',
+                        width: 200,
                         titleTextAlign: PlutoColumnTextAlign.center,
                         textAlign: PlutoColumnTextAlign.center,
-                        /*  width: 100, */
                         type: PlutoColumnType.text(),
                         enableEditingMode: false,
                         backgroundColor: AppTheme.of(context).primaryColor,
@@ -429,7 +436,6 @@ class _InventarioPageState extends State<InventarioPage>
                         field: 'nombre',
                         titleTextAlign: PlutoColumnTextAlign.center,
                         textAlign: PlutoColumnTextAlign.left,
-                        /*  width: 200, */
                         type: PlutoColumnType.text(),
                         enableEditingMode: false,
                         backgroundColor: AppTheme.of(context).primaryColor,
@@ -506,7 +512,6 @@ class _InventarioPageState extends State<InventarioPage>
                         field: 'categoria_nombre',
                         titleTextAlign: PlutoColumnTextAlign.center,
                         textAlign: PlutoColumnTextAlign.center,
-                        /*  width: 140, */
                         type: PlutoColumnType.text(),
                         enableEditingMode: false,
                         backgroundColor: AppTheme.of(context).primaryColor,
@@ -550,7 +555,6 @@ class _InventarioPageState extends State<InventarioPage>
                         field: 'activo',
                         titleTextAlign: PlutoColumnTextAlign.center,
                         textAlign: PlutoColumnTextAlign.center,
-                        /*  width: 100, */
                         type: PlutoColumnType.text(),
                         enableEditingMode: false,
                         backgroundColor: AppTheme.of(context).primaryColor,
@@ -604,7 +608,6 @@ class _InventarioPageState extends State<InventarioPage>
                         field: 'en_uso',
                         titleTextAlign: PlutoColumnTextAlign.center,
                         textAlign: PlutoColumnTextAlign.center,
-                        /*  width: 100, */
                         type: PlutoColumnType.text(),
                         enableEditingMode: false,
                         backgroundColor: AppTheme.of(context).primaryColor,
@@ -642,7 +645,6 @@ class _InventarioPageState extends State<InventarioPage>
                         field: 'ubicacion',
                         titleTextAlign: PlutoColumnTextAlign.center,
                         textAlign: PlutoColumnTextAlign.left,
-                        /* width: 180, */
                         type: PlutoColumnType.text(),
                         enableEditingMode: false,
                         backgroundColor: AppTheme.of(context).primaryColor,
@@ -684,7 +686,6 @@ class _InventarioPageState extends State<InventarioPage>
                         field: 'descripcion',
                         titleTextAlign: PlutoColumnTextAlign.center,
                         textAlign: PlutoColumnTextAlign.left,
-                        /* width: 200, */
                         type: PlutoColumnType.text(),
                         enableEditingMode: false,
                         backgroundColor: AppTheme.of(context).primaryColor,
@@ -712,7 +713,6 @@ class _InventarioPageState extends State<InventarioPage>
                         field: 'fecha_registro',
                         titleTextAlign: PlutoColumnTextAlign.center,
                         textAlign: PlutoColumnTextAlign.center,
-                        /*  width: 120, */
                         type: PlutoColumnType.text(),
                         enableEditingMode: false,
                         backgroundColor: AppTheme.of(context).primaryColor,
@@ -737,13 +737,19 @@ class _InventarioPageState extends State<InventarioPage>
                         field: 'editar',
                         titleTextAlign: PlutoColumnTextAlign.center,
                         textAlign: PlutoColumnTextAlign.center,
-                        /* width: 120, */
                         type: PlutoColumnType.text(),
                         enableEditingMode: false,
                         backgroundColor: AppTheme.of(context).primaryColor,
                         enableContextMenu: false,
                         enableDropToResize: false,
                         renderer: (rendererContext) {
+                          final componenteId = rendererContext
+                                  .row.cells['id']?.value
+                                  .toString() ??
+                              '';
+                          final componente = componentesProvider
+                              .getComponenteById(componenteId);
+
                           return Row(
                             mainAxisAlignment: MainAxisAlignment.center,
                             children: [
@@ -751,15 +757,8 @@ class _InventarioPageState extends State<InventarioPage>
                               Tooltip(
                                 message: 'Ver detalles',
                                 child: InkWell(
-                                  onTap: () {
+                                  onTap: () => _showComponentDetails(
-                                    // TODO: Implementar vista de detalles
+                                      componente, componentesProvider),
-                                    ScaffoldMessenger.of(context).showSnackBar(
-                                      const SnackBar(
-                                        content:
-                                            Text('Ver detalles próximamente'),
-                                      ),
-                                    );
-                                  },
                                   child: Container(
                                     padding: const EdgeInsets.all(4),
                                     decoration: BoxDecoration(
@@ -779,14 +778,8 @@ class _InventarioPageState extends State<InventarioPage>
                               Tooltip(
                                 message: 'Editar',
                                 child: InkWell(
-                                  onTap: () {
+                                  onTap: () => _editComponent(
-                                    ScaffoldMessenger.of(context).showSnackBar(
+                                      componente, componentesProvider),
-                                      const SnackBar(
-                                        content: Text(
-                                            'Editar componente próximamente'),
-                                      ),
-                                    );
-                                  },
                                   child: Container(
                                     padding: const EdgeInsets.all(4),
                                     decoration: BoxDecoration(
@@ -806,14 +799,8 @@ class _InventarioPageState extends State<InventarioPage>
                               Tooltip(
                                 message: 'Eliminar',
                                 child: InkWell(
-                                  onTap: () {
+                                  onTap: () => _deleteComponent(
-                                    ScaffoldMessenger.of(context).showSnackBar(
+                                      componente, componentesProvider),
-                                      const SnackBar(
-                                        content: Text(
-                                            'Eliminar componente próximamente'),
-                                      ),
-                                    );
-                                  },
                                   child: Container(
                                     padding: const EdgeInsets.all(4),
                                     decoration: BoxDecoration(
@@ -839,7 +826,7 @@ class _InventarioPageState extends State<InventarioPage>
                           event.stateManager;
                     },
                     createFooter: (stateManager) {
-                      stateManager.setPageSize(15, notify: false);
+                      stateManager.setPageSize(10, notify: false);
                       return PlutoPagination(stateManager);
                     },
                   ),
@@ -887,4 +874,259 @@ class _InventarioPageState extends State<InventarioPage>
       ),
     );
   }
+
+  // Métodos para manejar las acciones de los botones
+  void _showComponentDetails(dynamic componente, ComponentesProvider provider) {
+    if (componente == null) return;
+
+    showDialog(
+      context: context,
+      builder: (context) => AlertDialog(
+        backgroundColor: AppTheme.of(context).primaryBackground,
+        title: Row(
+          children: [
+            Icon(
+              Icons.devices,
+              color: AppTheme.of(context).primaryColor,
+            ),
+            const SizedBox(width: 8),
+            Expanded(
+              child: Text(
+                componente.nombre,
+                style: TextStyle(
+                  color: AppTheme.of(context).primaryText,
+                  fontSize: 18,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+          ],
+        ),
+        content: Container(
+          width: double.maxFinite,
+          constraints: const BoxConstraints(maxHeight: 400),
+          child: SingleChildScrollView(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                _buildDetailRow('ID', componente.id.substring(0, 8) + '...'),
+                _buildDetailRow(
+                    'Categoría',
+                    provider.getCategoriaById(componente.categoriaId)?.nombre ??
+                        'Sin categoría'),
+                _buildDetailRow(
+                    'Estado', componente.activo ? 'Activo' : 'Inactivo'),
+                _buildDetailRow('En Uso', componente.enUso ? 'Sí' : 'No'),
+                if (componente.ubicacion != null &&
+                    componente.ubicacion!.isNotEmpty)
+                  _buildDetailRow('Ubicación', componente.ubicacion!),
+                if (componente.descripcion != null &&
+                    componente.descripcion!.isNotEmpty)
+                  _buildDetailRow('Descripción', componente.descripcion!),
+                _buildDetailRow(
+                    'Fecha de Registro',
+                    componente.fechaRegistro?.toString().split(' ')[0] ??
+                        'No disponible'),
+              ],
+            ),
+          ),
+        ),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.of(context).pop(),
+            child: Text(
+              'Cerrar',
+              style: TextStyle(color: AppTheme.of(context).primaryColor),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  Widget _buildDetailRow(String label, String value) {
+    return Container(
+      margin: const EdgeInsets.only(bottom: 12),
+      padding: const EdgeInsets.all(12),
+      decoration: BoxDecoration(
+        color: AppTheme.of(context).secondaryBackground,
+        borderRadius: BorderRadius.circular(8),
+        border: Border.all(
+          color: AppTheme.of(context).primaryColor.withOpacity(0.2),
+        ),
+      ),
+      child: Row(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          SizedBox(
+            width: 100,
+            child: Text(
+              label,
+              style: TextStyle(
+                color: AppTheme.of(context).primaryColor,
+                fontSize: 12,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ),
+          Expanded(
+            child: Text(
+              value,
+              style: TextStyle(
+                color: AppTheme.of(context).primaryText,
+                fontSize: 12,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+
+  void _editComponent(dynamic componente, ComponentesProvider provider) {
+    if (componente == null) return;
+
+    showDialog(
+      context: context,
+      builder: (context) => EditComponenteDialog(
+        provider: provider,
+        componente: componente,
+      ),
+    );
+  }
+
+  void _deleteComponent(dynamic componente, ComponentesProvider provider) {
+    if (componente == null) return;
+
+    showDialog(
+      context: context,
+      builder: (context) => AlertDialog(
+        backgroundColor: AppTheme.of(context).primaryBackground,
+        title: Row(
+          children: [
+            Icon(
+              Icons.warning,
+              color: Colors.red,
+            ),
+            const SizedBox(width: 8),
+            Text(
+              'Eliminar Componente',
+              style: TextStyle(
+                color: AppTheme.of(context).primaryText,
+                fontWeight: FontWeight.bold,
+              ),
+            ),
+          ],
+        ),
+        content: Text(
+          '¿Estás seguro de que deseas eliminar "${componente.nombre}"?\n\nEsta acción no se puede deshacer.',
+          style: TextStyle(
+            color: AppTheme.of(context).primaryText,
+          ),
+        ),
+        actions: [
+          TextButton(
+            onPressed: () => Navigator.of(context).pop(),
+            child: Text(
+              'Cancelar',
+              style: TextStyle(color: AppTheme.of(context).secondaryText),
+            ),
+          ),
+          ElevatedButton(
+            onPressed: () async {
+              Navigator.of(context).pop();
+
+              // Mostrar indicador de carga
+              showDialog(
+                context: context,
+                barrierDismissible: false,
+                builder: (context) => Center(
+                  child: CircularProgressIndicator(
+                    color: AppTheme.of(context).primaryColor,
+                  ),
+                ),
+              );
+
+              try {
+                final success =
+                    await provider.eliminarComponente(componente.id);
+
+                Navigator.of(context).pop(); // Cerrar indicador de carga
+
+                if (success) {
+                  ScaffoldMessenger.of(context).showSnackBar(
+                    SnackBar(
+                      content: Row(
+                        children: const [
+                          Icon(Icons.check_circle, color: Colors.white),
+                          SizedBox(width: 12),
+                          Text(
+                            'Componente eliminado exitosamente',
+                            style: TextStyle(fontWeight: FontWeight.w600),
+                          ),
+                        ],
+                      ),
+                      backgroundColor: Colors.green,
+                      behavior: SnackBarBehavior.floating,
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(10),
+                      ),
+                    ),
+                  );
+                } else {
+                  ScaffoldMessenger.of(context).showSnackBar(
+                    SnackBar(
+                      content: Row(
+                        children: const [
+                          Icon(Icons.error, color: Colors.white),
+                          SizedBox(width: 12),
+                          Text(
+                            'Error al eliminar el componente',
+                            style: TextStyle(fontWeight: FontWeight.w600),
+                          ),
+                        ],
+                      ),
+                      backgroundColor: Colors.red,
+                      behavior: SnackBarBehavior.floating,
+                      shape: RoundedRectangleBorder(
+                        borderRadius: BorderRadius.circular(10),
+                      ),
+                    ),
+                  );
+                }
+              } catch (e) {
+                Navigator.of(context).pop(); // Cerrar indicador de carga
+                ScaffoldMessenger.of(context).showSnackBar(
+                  SnackBar(
+                    content: Row(
+                      children: [
+                        const Icon(Icons.warning, color: Colors.white),
+                        const SizedBox(width: 12),
+                        Expanded(
+                          child: Text(
+                            'Error: $e',
+                            style: const TextStyle(fontWeight: FontWeight.w600),
+                          ),
+                        ),
+                      ],
+                    ),
+                    backgroundColor: Colors.red,
+                    behavior: SnackBarBehavior.floating,
+                    shape: RoundedRectangleBorder(
+                      borderRadius: BorderRadius.circular(10),
+                    ),
+                  ),
+                );
+              }
+            },
+            style: ElevatedButton.styleFrom(
+              backgroundColor: Colors.red,
+              foregroundColor: Colors.white,
+            ),
+            child: const Text('Eliminar'),
+          ),
+        ],
+      ),
+    );
+  }
 }

lib/pages/infrastructure/widgets/componentes_cards_view.dart

@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:provider/provider.dart';
 import 'package:nethive_neo/providers/nethive/componentes_provider.dart';
+import 'package:nethive_neo/pages/infrastructure/widgets/edit_componente_dialog.dart';
 import 'package:nethive_neo/theme/theme.dart';
 
 class ComponentesCardsView extends StatefulWidget {
@@ -443,10 +444,7 @@ class _ComponentesCardsViewState extends State<ComponentesCardsView>
                           icon: Icons.edit,
                           color: AppTheme.of(context).primaryColor,
                           onTap: () {
-                            ScaffoldMessenger.of(context).showSnackBar(
+                            _showEditComponenteDialog(componente);
-                              const SnackBar(
-                                  content: Text('Editar próximamente')),
-                            );
                           },
                         ),
                         const SizedBox(width: 4),
@@ -729,4 +727,15 @@ class _ComponentesCardsViewState extends State<ComponentesCardsView>
       ),
     );
   }
+
+  void _showEditComponenteDialog(dynamic componente) {
+    final provider = Provider.of<ComponentesProvider>(context, listen: false);
+    showDialog(
+      context: context,
+      builder: (context) => EditComponenteDialog(
+        provider: provider,
+        componente: componente,
+      ),
+    );
+  }
 }

lib/providers/nethive/componentes_provider.dart

@@ -9,6 +9,8 @@ import 'package:supabase_flutter/supabase_flutter.dart';
 import 'package:nethive_neo/helpers/globals.dart';
 import 'package:nethive_neo/models/nethive/categoria_componente_model.dart';
 import 'package:nethive_neo/models/nethive/componente_model.dart';
+import 'package:nethive_neo/models/nethive/distribucion_model.dart';
+import 'package:nethive_neo/models/nethive/conexion_componente_model.dart';
 import 'package:nethive_neo/models/nethive/detalle_cable_model.dart';
 import 'package:nethive_neo/models/nethive/detalle_switch_model.dart';
 import 'package:nethive_neo/models/nethive/detalle_patch_panel_model.dart';
@@ -33,13 +35,23 @@ class ComponentesProvider extends ChangeNotifier {
   List<PlutoRow> componentesRows = [];
   List<PlutoRow> categoriasRows = [];
 
+  // Nuevas listas para topología
+  List<Distribucion> distribuciones = [];
+  List<ConexionComponente> conexiones = [];
+
   // Variables para formularios
   String? imagenFileName;
   Uint8List? imagenToUpload;
   String? negocioSeleccionadoId;
+  String? negocioSeleccionadoNombre;
+  String? empresaSeleccionadaId;
   int? categoriaSeleccionadaId;
   bool showDetallesEspecificos = false;
 
+  // Variables para gestión de topología
+  bool isLoadingTopologia = false;
+  List<String> problemasTopologia = [];
+
   // Detalles específicos por tipo de componente
   DetalleCable? detalleCable;
   DetalleSwitch? detalleSwitch;
@@ -267,6 +279,53 @@ class ComponentesProvider extends ChangeNotifier {
     }
   }
 
+  Future<bool> actualizarComponente({
+    required String componenteId,
+    required String negocioId,
+    required int categoriaId,
+    required String nombre,
+    String? descripcion,
+    required bool enUso,
+    required bool activo,
+    String? ubicacion,
+    bool actualizarImagen = false,
+  }) async {
+    try {
+      Map<String, dynamic> updateData = {
+        'categoria_id': categoriaId,
+        'nombre': nombre,
+        'descripcion': descripcion,
+        'en_uso': enUso,
+        'activo': activo,
+        'ubicacion': ubicacion,
+      };
+
+      // Solo actualizar imagen si se seleccionó una nueva
+      if (actualizarImagen) {
+        final imagenUrl = await uploadImagen();
+        if (imagenUrl != null) {
+          updateData['imagen_url'] = imagenUrl;
+        }
+      }
+
+      final res = await supabaseLU
+          .from('componente')
+          .update(updateData)
+          .eq('id', componenteId)
+          .select();
+
+      if (res.isNotEmpty) {
+        await getComponentesPorNegocio(negocioId);
+        resetFormData();
+        return true;
+      }
+      return false;
+    } catch (e) {
+      print('Error en actualizarComponente: ${e.toString()}');
+      return false;
+    }
+  }
+
   Future<bool> eliminarComponente(String componenteId) async {
     try {
       // Eliminar todos los detalles específicos primero
@@ -452,12 +511,6 @@ class ComponentesProvider extends ChangeNotifier {
   }
 
   // Métodos de utilidad
-  void setNegocioSeleccionado(String negocioId) {
-    negocioSeleccionadoId = negocioId;
-    getComponentesPorNegocio(negocioId);
-    notifyListeners();
-  }
-
   CategoriaComponente? getCategoriaById(int id) {
     try {
       return categorias.firstWhere((c) => c.id == id);
@@ -550,4 +603,559 @@ class ComponentesProvider extends ChangeNotifier {
       fit: BoxFit.cover,
     );
   }
+
+  // Métodos para distribuciones (MDF/IDF)
+  Future<void> getDistribucionesPorNegocio(String negocioId) async {
+    try {
+      final res = await supabaseLU
+          .from('distribucion')
+          .select()
+          .eq('negocio_id', negocioId)
+          .order('tipo', ascending: false); // MDF primero, luego IDF
+
+      distribuciones = (res as List<dynamic>)
+          .map((distribucion) => Distribucion.fromMap(distribucion))
+          .toList();
+
+      print('Distribuciones cargadas: ${distribuciones.length}');
+      for (var dist in distribuciones) {
+        print('- ${dist.tipo}: ${dist.nombre}');
+      }
+    } catch (e) {
+      print('Error en getDistribucionesPorNegocio: ${e.toString()}');
+      distribuciones = [];
+    }
+  }
+
+  // Métodos para conexiones
+  Future<void> getConexionesPorNegocio(String negocioId) async {
+    try {
+      // Usar la vista optimizada si existe, sino usar query manual
+      List<dynamic> res;
+
+      try {
+        // Intentar usar la vista optimizada
+        res = await supabaseLU
+            .from('vista_conexiones_por_negocio')
+            .select()
+            .eq('negocio_id', negocioId);
+      } catch (e) {
+        print('Vista no disponible, usando query manual...');
+        // Fallback: obtener conexiones manualmente
+        final componentesDelNegocio = await supabaseLU
+            .from('componente')
+            .select('id')
+            .eq('negocio_id', negocioId);
+
+        if (componentesDelNegocio.isEmpty) {
+          conexiones = [];
+          return;
+        }
+
+        final componenteIds =
+            componentesDelNegocio.map((comp) => comp['id'] as String).toList();
+
+        res = await supabaseLU
+            .from('conexion_componente')
+            .select()
+            .or('componente_origen_id.in.(${componenteIds.join(',')}),componente_destino_id.in.(${componenteIds.join(',')})')
+            .eq('activo', true);
+      }
+
+      conexiones = (res as List<dynamic>)
+          .map((conexion) => ConexionComponente.fromMap(conexion))
+          .toList();
+
+      print('Conexiones cargadas: ${conexiones.length}');
+    } catch (e) {
+      print('Error en getConexionesPorNegocio: ${e.toString()}');
+      conexiones = [];
+    }
+  }
+
+  // Método principal para establecer el contexto del negocio desde la navegación
+  Future<void> setNegocioSeleccionado(
+      String negocioId, String negocioNombre, String empresaId) async {
+    try {
+      negocioSeleccionadoId = negocioId;
+      negocioSeleccionadoNombre = negocioNombre;
+      empresaSeleccionadaId = empresaId;
+
+      // Limpiar datos anteriores
+      _limpiarDatosAnteriores();
+
+      // Cargar toda la información de topología para este negocio
+      await cargarTopologiaCompleta(negocioId);
+
+      notifyListeners();
+    } catch (e) {
+      print('Error en setNegocioSeleccionado: ${e.toString()}');
+    }
+  }
+
+  void _limpiarDatosAnteriores() {
+    componentes.clear();
+    distribuciones.clear();
+    conexiones.clear();
+    componentesRows.clear();
+    showDetallesEspecificos = false;
+
+    // Limpiar detalles específicos
+    detalleCable = null;
+    detalleSwitch = null;
+    detallePatchPanel = null;
+    detalleRack = null;
+    detalleOrganizador = null;
+    detalleUps = null;
+    detalleRouterFirewall = null;
+    detalleEquipoActivo = null;
+  }
+
+  // Cargar toda la información de topología de forma optimizada
+  Future<void> cargarTopologiaCompleta(String negocioId) async {
+    isLoadingTopologia = true;
+    notifyListeners();
+
+    try {
+      // Cargar datos en paralelo para mejor performance
+      await Future.wait([
+        getComponentesPorNegocio(negocioId),
+        getDistribucionesPorNegocio(negocioId),
+        getConexionesPorNegocio(negocioId),
+      ]);
+
+      // Validar integridad de la topología
+      problemasTopologia = validarTopologia();
+    } catch (e) {
+      print('Error en cargarTopologiaCompleta: ${e.toString()}');
+      problemasTopologia = [
+        'Error al cargar datos de topología: ${e.toString()}'
+      ];
+    } finally {
+      isLoadingTopologia = false;
+      notifyListeners();
+    }
+  }
+
+  // Validar y obtener estadísticas de componentes por categoría
+  Map<String, List<Componente>> getComponentesAgrupadosPorCategoria() {
+    Map<String, List<Componente>> grupos = {};
+
+    for (var componente in componentes.where((c) => c.activo)) {
+      final categoria = getCategoriaById(componente.categoriaId);
+      final nombreCategoria = categoria?.nombre ?? 'Sin categoría';
+
+      if (!grupos.containsKey(nombreCategoria)) {
+        grupos[nombreCategoria] = [];
+      }
+      grupos[nombreCategoria]!.add(componente);
+    }
+
+    return grupos;
+  }
+
+  // Obtener componentes por tipo específico with better logic
+  List<Componente> getComponentesPorTipo(String tipo) {
+    return componentes.where((c) {
+      if (!c.activo) return false;
+
+      final categoria = getCategoriaById(c.categoriaId);
+      final nombreCategoria = categoria?.nombre?.toLowerCase() ?? '';
+      final ubicacion = c.ubicacion?.toLowerCase() ?? '';
+
+      switch (tipo.toLowerCase()) {
+        case 'mdf':
+          return ubicacion.contains('mdf') ||
+              nombreCategoria.contains('mdf') ||
+              (nombreCategoria.contains('switch') && ubicacion.contains('mdf'));
+
+        case 'idf':
+          return ubicacion.contains('idf') ||
+              nombreCategoria.contains('idf') ||
+              (nombreCategoria.contains('switch') && ubicacion.contains('idf'));
+
+        case 'switch':
+          return nombreCategoria.contains('switch');
+
+        case 'router':
+          return nombreCategoria.contains('router') ||
+              nombreCategoria.contains('firewall');
+
+        case 'servidor':
+          return nombreCategoria.contains('servidor') ||
+              nombreCategoria.contains('server');
+
+        case 'cable':
+          return nombreCategoria.contains('cable');
+
+        case 'patch':
+          return nombreCategoria.contains('patch') ||
+              nombreCategoria.contains('panel');
+
+        case 'rack':
+          return nombreCategoria.contains('rack');
+
+        default:
+          return false;
+      }
+    }).toList();
+  }
+
+  // Obtener componentes por ubicación específica
+  List<Componente> getComponentesPorUbicacionEspecifica(String ubicacion) {
+    return componentes.where((c) {
+      if (!c.activo) return false;
+      return c.ubicacion?.toLowerCase().contains(ubicacion.toLowerCase()) ??
+          false;
+    }).toList();
+  }
+
+  // Crear conexión automática inteligente
+  Future<bool> crearConexionAutomatica(String origenId, String destinoId,
+      {String? descripcion}) async {
+    try {
+      final origen = getComponenteById(origenId);
+      final destino = getComponenteById(destinoId);
+
+      if (origen == null || destino == null) return false;
+
+      // Generar descripción automática si no se proporciona
+      if (descripcion == null) {
+        final origenCategoria = getCategoriaById(origen.categoriaId);
+        final destinoCategoria = getCategoriaById(destino.categoriaId);
+        descripcion =
+            'Conexión automática: ${origenCategoria?.nombre ?? 'Componente'} → ${destinoCategoria?.nombre ?? 'Componente'}';
+      }
+
+      return await crearConexion(
+        componenteOrigenId: origenId,
+        componenteDestinoId: destinoId,
+        descripcion: descripcion,
+        activo: true,
+      );
+    } catch (e) {
+      print('Error en crearConexionAutomatica: ${e.toString()}');
+      return false;
+    }
+  }
+
+  // Crear una nueva conexión entre componentes
+  Future<bool> crearConexion({
+    required String componenteOrigenId,
+    required String componenteDestinoId,
+    String? descripcion,
+    bool activo = true,
+  }) async {
+    try {
+      final res = await supabaseLU.from('conexion_componente').insert({
+        'componente_origen_id': componenteOrigenId,
+        'componente_destino_id': componenteDestinoId,
+        'descripcion': descripcion,
+        'activo': activo,
+      }).select();
+
+      if (res.isNotEmpty && negocioSeleccionadoId != null) {
+        await getConexionesPorNegocio(negocioSeleccionadoId!);
+        return true;
+      }
+      return false;
+    } catch (e) {
+      print('Error en crearConexion: ${e.toString()}');
+      return false;
+    }
+  }
+
+  // Eliminar una conexión
+  Future<bool> eliminarConexion(String conexionId) async {
+    try {
+      await supabaseLU
+          .from('conexion_componente')
+          .delete()
+          .eq('id', conexionId);
+
+      if (negocioSeleccionadoId != null) {
+        await getConexionesPorNegocio(negocioSeleccionadoId!);
+      }
+      return true;
+    } catch (e) {
+      print('Error en eliminarConexion: ${e.toString()}');
+      return false;
+    }
+  }
+
+  // Crear una nueva distribución (MDF/IDF)
+  Future<bool> crearDistribucion({
+    required String negocioId,
+    required String tipo, // 'MDF' o 'IDF'
+    required String nombre,
+    String? descripcion,
+  }) async {
+    try {
+      final res = await supabaseLU.from('distribucion').insert({
+        'negocio_id': negocioId,
+        'tipo': tipo,
+        'nombre': nombre,
+        'descripcion': descripcion,
+      }).select();
+
+      if (res.isNotEmpty) {
+        await getDistribucionesPorNegocio(negocioId);
+        return true;
+      }
+      return false;
+    } catch (e) {
+      print('Error en crearDistribucion: ${e.toString()}');
+      return false;
+    }
+  }
+
+  // Obtener componentes por distribución
+  List<Componente> getComponentesPorDistribucion(String distribucionNombre) {
+    return componentes
+        .where((c) =>
+            c.ubicacion
+                ?.toLowerCase()
+                .contains(distribucionNombre.toLowerCase()) ??
+            false)
+        .toList();
+  }
+
+  // Obtener MDF del negocio
+  Distribucion? getMDF() {
+    try {
+      return distribuciones.firstWhere((d) => d.tipo == 'MDF');
+    } catch (e) {
+      return null;
+    }
+  }
+
+  // Obtener todos los IDF del negocio
+  List<Distribucion> getIDFs() {
+    return distribuciones.where((d) => d.tipo == 'IDF').toList();
+  }
+
+  // Obtener conexiones de un componente específico
+  List<ConexionComponente> getConexionesDeComponente(String componenteId) {
+    return conexiones
+        .where((c) =>
+            c.componenteOrigenId == componenteId ||
+            c.componenteDestinoId == componenteId)
+        .toList();
+  }
+
+  // Obtener componente por ID
+  Componente? getComponenteById(String componenteId) {
+    try {
+      return componentes.firstWhere((c) => c.id == componenteId);
+    } catch (e) {
+      return null;
+    }
+  }
+
+  // Obtener switches principales (core/distribución)
+  List<Componente> getSwitchesPrincipales() {
+    return componentes.where((c) {
+      final categoria = getCategoriaById(c.categoriaId);
+      final isSwitch =
+          categoria?.nombre?.toLowerCase().contains('switch') ?? false;
+      final isCore = c.ubicacion?.toLowerCase().contains('mdf') ?? false;
+      return isSwitch && isCore;
+    }).toList();
+  }
+
+  // Obtener routers/firewalls
+  List<Componente> getRoutersFirewalls() {
+    return componentes.where((c) {
+      final categoria = getCategoriaById(c.categoriaId);
+      final nombre = categoria?.nombre?.toLowerCase() ?? '';
+      return nombre.contains('router') || nombre.contains('firewall');
+    }).toList();
+  }
+
+  // Obtener servidores
+  List<Componente> getServidores() {
+    return componentes.where((c) {
+      final categoria = getCategoriaById(c.categoriaId);
+      final nombre = categoria?.nombre?.toLowerCase() ?? '';
+      return nombre.contains('servidor') || nombre.contains('server');
+    }).toList();
+  }
+
+  // Obtener cables por tipo
+  List<Componente> getCablesPorTipo(String tipoCable) {
+    return componentes.where((c) {
+      final categoria = getCategoriaById(c.categoriaId);
+      final nombre = categoria?.nombre?.toLowerCase() ?? '';
+      return nombre.contains('cable') &&
+          (c.descripcion?.toLowerCase().contains(tipoCable.toLowerCase()) ??
+              false);
+    }).toList();
+  }
+
+  // Obtener estadísticas de conectividad
+  Map<String, int> getEstadisticasConectividad() {
+    int componentesActivos = componentes.where((c) => c.activo).length;
+    int componentesEnUso = componentes.where((c) => c.enUso).length;
+    int conexionesActivas = conexiones.where((c) => c.activo).length;
+    int totalConexiones = conexiones.length;
+
+    return {
+      'componentesActivos': componentesActivos,
+      'componentesEnUso': componentesEnUso,
+      'conexionesActivas': conexionesActivas,
+      'totalConexiones': totalConexiones,
+      'porcentajeUso': componentesActivos > 0
+          ? ((componentesEnUso / componentesActivos) * 100).round()
+          : 0,
+    };
+  }
+
+  // Cargar toda la información de topología
+  Future<void> cargarTopologia(String negocioId) async {
+    await Future.wait([
+      getComponentesPorNegocio(negocioId),
+      getDistribucionesPorNegocio(negocioId),
+      getConexionesPorNegocio(negocioId),
+    ]);
+  }
+
+  // Validar integridad de topología mejorado
+  List<String> validarTopologia() {
+    List<String> problemas = [];
+
+    if (componentes.isEmpty) {
+      problemas.add('No se encontraron componentes para este negocio');
+      return problemas;
+    }
+
+    // Verificar distribuciones
+    final mdfCount = distribuciones.where((d) => d.tipo == 'MDF').length;
+    final idfCount = distribuciones.where((d) => d.tipo == 'IDF').length;
+
+    if (mdfCount == 0) {
+      problemas.add('No se encontró ningún MDF configurado');
+    } else if (mdfCount > 1) {
+      problemas.add(
+          'Se encontraron múltiples MDF ($mdfCount). Se recomienda solo uno por negocio');
+    }
+
+    if (idfCount == 0) {
+      problemas.add('No se encontraron IDFs configurados');
+    }
+
+    // Verificar componentes principales
+    final switchesMDF = getComponentesPorTipo('mdf')
+        .where((c) =>
+            getCategoriaById(c.categoriaId)
+                ?.nombre
+                ?.toLowerCase()
+                .contains('switch') ??
+            false)
+        .toList();
+
+    if (switchesMDF.isEmpty) {
+      problemas.add('No se encontró switch principal en MDF');
+    }
+
+    // Verificar componentes sin ubicación
+    final sinUbicacion = componentes
+        .where((c) =>
+            c.activo && (c.ubicacion == null || c.ubicacion!.trim().isEmpty))
+        .length;
+    if (sinUbicacion > 0) {
+      problemas.add('$sinUbicacion componentes activos sin ubicación definida');
+    }
+
+    // Verificar conexiones
+    final componentesActivos = componentes.where((c) => c.activo).length;
+    final conexionesActivas = conexiones.where((c) => c.activo).length;
+
+    if (componentesActivos > 1 && conexionesActivas == 0) {
+      problemas.add('No se encontraron conexiones entre componentes');
+    }
+
+    // Verificar componentes críticos aislados
+    final componentesCriticos = [
+      ...switchesMDF,
+      ...getComponentesPorTipo('router')
+    ];
+    for (var componente in componentesCriticos) {
+      final conexionesComponente = getConexionesDeComponente(componente.id);
+      if (conexionesComponente.isEmpty) {
+        final categoria = getCategoriaById(componente.categoriaId);
+        problemas.add(
+            'Componente crítico sin conexiones: ${componente.nombre} (${categoria?.nombre})');
+      }
+    }
+
+    return problemas;
+  }
+
+  // Obtener resumen de topología para dashboard
+  Map<String, dynamic> getResumenTopologia() {
+    final stats = getEstadisticasConectividad();
+    final componentesPorCategoria = getComponentesAgrupadosPorCategoria();
+
+    return {
+      'estadisticas': stats,
+      'categorias': componentesPorCategoria.map((key, value) => MapEntry(key, {
+            'total': value.length,
+            'activos': value.where((c) => c.activo).length,
+            'enUso': value.where((c) => c.enUso).length,
+          })),
+      'distribuciones': {
+        'mdf': distribuciones.where((d) => d.tipo == 'MDF').length,
+        'idf': distribuciones.where((d) => d.tipo == 'IDF').length,
+      },
+      'problemas': problemasTopologia.length,
+      'salud': problemasTopologia.isEmpty
+          ? 'Excelente'
+          : problemasTopologia.length <= 2
+              ? 'Buena'
+              : problemasTopologia.length <= 5
+                  ? 'Regular'
+                  : 'Crítica',
+    };
+  }
+
+  // Obtener sugerencias de mejora
+  List<String> getSugerenciasMejora() {
+    List<String> sugerencias = [];
+
+    final stats = getEstadisticasConectividad();
+    final componentesPorTipo = getComponentesAgrupadosPorCategoria();
+
+    // Sugerencias basadas en uso
+    if (stats['porcentajeUso']! < 70) {
+      sugerencias.add(
+          'Considere optimizar el uso de componentes (${stats['porcentajeUso']}% en uso)');
+    }
+
+    // Sugerencias de redundancia
+    final switchesPrincipales = getComponentesPorTipo('mdf');
+    if (switchesPrincipales.length == 1) {
+      sugerencias
+          .add('Considere agregar redundancia en el switch principal del MDF');
+    }
+
+    // Sugerencias de documentación
+    final sinDescripcion = componentes
+        .where((c) =>
+            c.activo &&
+            (c.descripcion == null || c.descripcion!.trim().isEmpty))
+        .length;
+    if (sinDescripcion > 0) {
+      sugerencias.add('Documente $sinDescripcion componentes sin descripción');
+    }
+
+    // Sugerencias de organización
+    final componentesSinCategoria =
+        componentesPorTipo['Sin categoría']?.length ?? 0;
+    if (componentesSinCategoria > 0) {
+      sugerencias
+          .add('Categorice $componentesSinCategoria componentes sin categoría');
+    }
+
+    return sugerencias;
+  }
 }

pubspec.lock

@@ -345,6 +345,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.4.5"
+  flame:
+    dependency: transitive
+    description:
+      name: flame
+      sha256: c02390443e40a2a9034ac867d0789ab32f215eba4779bff4655a7143eb3d75d0
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.22.0"
   flip_card:
     dependency: "direct main"
     description:
@@ -358,6 +366,14 @@ packages:
     description: flutter
     source: sdk
     version: "0.0.0"
+  flutter_animate:
+    dependency: "direct main"
+    description:
+      name: flutter_animate
+      sha256: "7befe2d3252728afb77aecaaea1dec88a89d35b9b1d2eea6d04479e8af9117b5"
+      url: "https://pub.dev"
+    source: hosted
+    version: "4.5.2"
   flutter_credit_card:
     dependency: "direct main"
     description:
@@ -366,6 +382,22 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.1.0"
+  flutter_flow_chart:
+    dependency: "direct main"
+    description:
+      name: flutter_flow_chart
+      sha256: "8b05ad760fa2f2b525a6982f30513a997d86f290592fb1d2b6b4900bb7d05f8f"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.2.3"
+  flutter_graph_view:
+    dependency: "direct main"
+    description:
+      name: flutter_graph_view
+      sha256: a4da9e5781e2292a1720fe49a4c045c956d567743ba95587a8e50a3221b97d15
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.6"
   flutter_lints:
     dependency: "direct dev"
     description:
@@ -451,6 +483,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.1.2"
+  flutter_shaders:
+    dependency: transitive
+    description:
+      name: flutter_shaders
+      sha256: "34794acadd8275d971e02df03afee3dee0f98dbfb8c4837082ad0034f612a3e2"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.1.3"
   flutter_side_menu:
     dependency: "direct main"
     description:
@@ -845,6 +885,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.0"
+  ordered_set:
+    dependency: transitive
+    description:
+      name: ordered_set
+      sha256: fc861bb51fc863cd3e0718e21768af9586e0d5022b91a0fd4437636456cdb7d0
+      url: "https://pub.dev"
+    source: hosted
+    version: "6.1.1"
   path:
     dependency: "direct main"
     description:

pubspec.yaml

@@ -75,6 +75,9 @@ dependencies:
   responsive_builder: ^0.7.1
   tab_container: ^3.5.3
   group_button: ^5.3.4
+  flutter_graph_view: ^1.1.6
+  flutter_animate: ^4.2.0
+  flutter_flow_chart: 3.2.3
 
 dev_dependencies:
   flutter_test:
@@ -88,3 +91,11 @@ flutter:
   assets:
     - assets/images/
     - assets/fonts/
+    - assets/referencia/
+
+  fonts:
+    - family: Poppins
+      fonts:
+        - asset: assets/fonts/Poppins-Regular.ttf
+        - asset: assets/fonts/Poppins-Bold.ttf
+          weight: 700