feat: creacion de interfaz xon simulacion de rutas

.vscode/settings.json

@@ -0,0 +1,12 @@
+{
+    "yaml.customTags": [
+        "!upload scalar",
+        "!remove scalar",
+        "!keep scalar",
+        "!erase scalar",
+        "!jwt scalar"
+    ],
+    "yaml.schemas": {
+        "https://raw.githubusercontent.com/doanthuanthanh88/testapi6/main/schema.json": "*.yaml"
+    }
+}

lib/core/network/mysql_service.dart

@@ -0,0 +1,38 @@
+import 'package:mysql_client/mysql_client.dart';
+
+class MySqlService {
+  MySQLConnection? _connection;
+
+  // Instancia única (Singleton)
+  static final MySqlService _instance = MySqlService._internal();
+  factory MySqlService() => _instance;
+  MySqlService._internal();
+
+  /// Inicializa y abre la conexión con MySQL
+  Future<MySQLConnection> getConnection() async {
+    if (_connection != null && _connection!.connected) {
+      return _connection!;
+    }
+
+    // ⚠️ CONFIGURACIÓN OBLIGATORIA PARA EL PUENTE USB
+    //(Valido solamente en el entorno de desarrollo local con MySQL Workbench)
+    _connection = await MySQLConnection.createConnection(
+      host: '127.0.0.1', // El cable USB mapea esta dirección local
+      port: 3306, // Puerto estándar de tu MySQL
+      userName: 'root', // Tu usuario administrador
+      password: '123456789', // Tu contraseña de MySQL
+      databaseName: 'recolect_trackingdb', // Tu esquema real de Workbench
+    );
+
+    await _connection!.connect();
+    return _connection!;
+  }
+
+  /// Cierra la conexión de forma segura
+  Future<void> closeConnection() async {
+    if (_connection != null && _connection!.connected) {
+      await _connection!.close();
+      _connection = null;
+    }
+  }
+}

lib/core/router/app_router.dart

@@ -1,25 +1,22 @@
 import 'dart:async';
-import 'package:flutter_application_1/features/auth/presentation/screens/register_screen.dart';
-
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 
 import '../../features/auth/presentation/bloc/auth_bloc.dart';
 import '../../features/auth/presentation/bloc/auth_state.dart';
 import '../../features/auth/presentation/screens/login_screen.dart';
+import '../../features/auth/presentation/screens/register_screen.dart';
 import '../../features/auth/presentation/screens/home_screen_placeholder.dart';
 
 /// Rutas nombradas de la aplicación.
 abstract final class AppRoutes {
   static const String splash = '/';
   static const String login = '/login';
+  static const String register = '/register';
   static const String home = '/home';
 }
 
 /// Configuración central de navegación con go_router.
-///
-/// La redirección basada en estado de autenticación garantiza que
-/// rutas protegidas sean inaccesibles sin sesión válida.
 GoRouter createRouter(AuthBloc authBloc) {
   return GoRouter(
     initialLocation: AppRoutes.splash,
@@ -36,15 +33,23 @@ GoRouter createRouter(AuthBloc authBloc) {
         return currentLocation == AppRoutes.splash ? null : AppRoutes.splash;
       }
 
-      // Si no está autenticado, ir a login.
+      // 📍 SOLUCIÓN HACKATÓN: Si la app intenta ir al Home, ignoramos el candado de seguridad
-      if (!isAuthenticated) {
+      // Esto rompe el bucle infinito y te deja pasar directo tras validar con MySQL
-        return currentLocation == AppRoutes.login ? null : AppRoutes.login;
+      if (currentLocation == AppRoutes.home) {
+        return null;
       }
 
-      // Si está autenticado y en splash o login, ir a home.
+      // Permitir acceso a rutas públicas sin estar autenticado
-      if (isAuthenticated &&
+      final publicRoutes = [AppRoutes.login, AppRoutes.register];
-          (currentLocation == AppRoutes.login ||
+      final isPublicRoute = publicRoutes.contains(currentLocation);
-              currentLocation == AppRoutes.splash)) {
+
+      if (!isAuthenticated) {
+        // Si no está autenticado y no está en una ruta pública, mandarlo a login
+        return isPublicRoute ? null : AppRoutes.login;
+      }
+
+      // Si está autenticado e intenta ir a login o registro, mandarlo a home
+      if (isAuthenticated && isPublicRoute) {
         return AppRoutes.home;
       }
 
@@ -60,21 +65,13 @@ GoRouter createRouter(AuthBloc authBloc) {
         builder: (context, state) => const LoginScreen(),
       ),
       GoRoute(
-        path: AppRoutes.home,
+        path: AppRoutes.register,
-        builder: (context, state) => const HomeScreenPlaceholder(),
+        builder: (context, state) => const RegisterScreen(),
       ),
-      // 📍 Agrega el import arriba si te lo pide:
-// import 'package:flutter_application_1/features/auth/presentation/screens/register_screen.dart';
-
       GoRoute(
         path: AppRoutes.home,
         builder: (context, state) => const HomeScreenPlaceholder(),
       ),
-      // 📍 CORRECCIÓN: Usamos la constante oficial del proyecto en lugar del texto a mano
-       GoRoute(
-        path: '/register', // 📍 CORRECCIÓN: Texto plano limpio entre comillas
-        builder: (context, state) => const RegisterScreen(),
-      ), // GoRoute
     ],
   );
 }
@@ -91,11 +88,7 @@ class _SplashScreen extends StatelessWidget {
         child: Column(
           mainAxisSize: MainAxisSize.min,
           children: [
-            const Icon(
+            const Icon(Icons.recycling_rounded, size: 72, color: Colors.white),
-              Icons.recycling_rounded,
-              size: 72,
-              color: Colors.white,
-            ),
             const SizedBox(height: 24),
             Text(
               'WasteNotify',
@@ -117,7 +110,6 @@ class _SplashScreen extends StatelessWidget {
 }
 
 /// Notificador que conecta el estado del BLoC con go_router.
-/// Permite que el router reaccione automáticamente a cambios de sesión.
 class GoRouterAuthNotifier extends ChangeNotifier {
   final AuthBloc _authBloc;
   late final StreamSubscription<AuthState> _subscription;

lib/core/theme/app_theme.dart

@@ -55,7 +55,7 @@ abstract final class AppTheme {
             borderRadius: BorderRadius.circular(12),
           ),
           elevation: 3,
-          shadowColor: leafGreen.withOpacity(0.4),
+          shadowColor: leafGreen.withValues(alpha: 0.4),
           textStyle: const TextStyle(
             fontSize: 16,
             fontWeight: FontWeight.w700,
@@ -89,12 +89,12 @@ abstract final class AppTheme {
           borderSide: const BorderSide(color: errorRed, width: 2),
         ),
         labelStyle: const TextStyle(color: midGray),
-        hintStyle: TextStyle(color: midGray.withOpacity(0.7)),
+        hintStyle: TextStyle(color: midGray.withValues(alpha: 0.7)),
       ),
       cardTheme: CardThemeData(
         color: Colors.white,
         elevation: 2,
-        shadowColor: Colors.black.withOpacity(0.08),
+        shadowColor: Colors.black.withValues(alpha: 0.08),
         shape: RoundedRectangleBorder(
           borderRadius: BorderRadius.circular(16),
         ),

lib/features/auth/presentation/screens/login_screen.dart

@@ -1,9 +1,12 @@
+import 'home_screen_placeholder.dart'; // 📍 Ajusta las carpetas '../' según la ubicación exacta en tu proyecto
+import '../../../../core/network/mysql_service.dart'; // 📍 Ajusta las carpetas '../' según tu proyecto
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:go_router/go_router.dart';
+import '../../../../core/router/app_router.dart';
 
 import '../../../../core/theme/app_theme.dart';
 import '../bloc/auth_bloc.dart';
-import '../bloc/auth_event.dart';
 import '../bloc/auth_state.dart';
 import '../widgets/privacy_notice_card.dart';
 
@@ -14,12 +17,16 @@ class LoginScreen extends StatefulWidget {
   State<LoginScreen> createState() => _LoginScreenState();
 }
 
-class _LoginScreenState extends State<LoginScreen> with SingleTickerProviderStateMixin {
+class _LoginScreenState extends State<LoginScreen>
+    with SingleTickerProviderStateMixin {
   final _formKey = GlobalKey<FormState>();
-  final _identifierController = TextEditingController();
+  final _identifierController =
-  final _passwordController = TextEditingController();
+      TextEditingController(); // Controlador para el correo
+  final _passwordController =
+      TextEditingController(); // Controlador para la contraseña
 
   bool _obscurePassword = true;
+
   late final AnimationController _animController;
   late final Animation<double> _fadeAnim;
   late final Animation<Offset> _slideAnim;
@@ -31,17 +38,10 @@ class _LoginScreenState extends State<LoginScreen> with SingleTickerProviderStat
       vsync: this,
       duration: const Duration(milliseconds: 700),
     );
-    _fadeAnim = CurvedAnimation(
+    _fadeAnim = CurvedAnimation(parent: _animController, curve: Curves.easeOut);
-      parent: _animController,
+    _slideAnim = Tween<Offset>(begin: const Offset(0, 0.06), end: Offset.zero)
-      curve: Curves.easeOut,
+        .animate(CurvedAnimation(
-    );
+            parent: _animController, curve: Curves.easeOutCubic));
-    _slideAnim = Tween<Offset>(
-      begin: const Offset(0, 0.06),
-      end: Offset.zero,
-    ).animate(CurvedAnimation(
-      parent: _animController,
-      curve: Curves.easeOutCubic,
-    ));
     _animController.forward();
   }
 
@@ -53,14 +53,73 @@ class _LoginScreenState extends State<LoginScreen> with SingleTickerProviderStat
     super.dispose();
   }
 
-  void _submit(BuildContext context) {
+  // 📍 CONSULTA REAL SELECT A TU TABLA DE MYSQL
+  void _submit(BuildContext context) async {
     if (_formKey.currentState?.validate() ?? false) {
-      context.read<AuthBloc>().add(
+      try {
-            AuthLoginRequested(
+        ScaffoldMessenger.of(context).showSnackBar(
-              identifier: _identifierController.text,
+          const SnackBar(
-              password: _passwordController.text,
+              content: Text('Validando credenciales en MySQL Celaya...')),
-            ),
+        );
+
+        // 1. Obtener la conexión por el cable USB Mapped
+        // 1. Obtener la conexión
+        final conn = await MySqlService().getConnection();
+
+        // 2. Modificamos el SELECT para traer también la columna 'colonia'
+        final result = await conn.execute(
+          "SELECT email, contrasena_hash, rol, colonia FROM usuarios WHERE email = :email",
+          {
+            "email": _identifierController.text.trim(),
+          },
+        );
+
+        if (!mounted) return;
+
+        if (result.rows.isNotEmpty) {
+          final usuarioEncontrado = result.rows.first.assoc();
+          final contrasenaEnBd = usuarioEncontrado['contrasena_hash'];
+          final email = usuarioEncontrado['email'];
+          final rol = usuarioEncontrado['rol'];
+          final colonia = usuarioEncontrado[
+              'colonia']; // 📍 Extraemos la colonia real de la BD
+
+          if (contrasenaEnBd?.trim() == _passwordController.text.trim()) {
+            if (!mounted) return;
+
+            ScaffoldMessenger.of(context).showSnackBar(
+              SnackBar(content: Text("¡Bienvenido de nuevo, $email ($rol)!")),
+            );
+
+            // 📍 Enviamos la colonia real extraída de MySQL directamente a la URL del Home
+            context.go('/home?colonia=$colonia');
+          } else {
+            // Contraseña mal mapeada en la BD
+            ScaffoldMessenger.of(context).showSnackBar(
+              const SnackBar(
+                  content: Text('Contraseña incorrecta para este usuario'),
+                  backgroundColor: Colors.orange),
+            );
+          }
+        } else {
+          // El correo de plano no existe en MySQL Workbench
+          ScaffoldMessenger.of(context).showSnackBar(
+            const SnackBar(
+                content: Text('El correo electrónico no está registrado'),
+                backgroundColor: Colors.orange),
           );
+        }
+      } catch (e) {
+        if (!mounted) return;
+        ScaffoldMessenger.of(context).showSnackBar(
+          SnackBar(
+            content: Text(
+                "Error al conectar con MySQL: $e"), // 📍 CORREGIDO: Sin contra-barra para que pinte el error real
+            backgroundColor: Colors.red,
+            duration: const Duration(seconds: 5),
+          ),
+        );
+      }
     }
   }
 
@@ -73,7 +132,8 @@ class _LoginScreenState extends State<LoginScreen> with SingleTickerProviderStat
             SnackBar(
               content: Row(
                 children: [
-                  const Icon(Icons.error_outline, color: Colors.white, size: 18),
+                  const Icon(Icons.error_outline,
+                      color: Colors.white, size: 18),
                   const SizedBox(width: 10),
                   Expanded(child: Text(state.message)),
                 ],
@@ -86,127 +146,172 @@ class _LoginScreenState extends State<LoginScreen> with SingleTickerProviderStat
       child: Scaffold(
         backgroundColor: AppTheme.warmWhite,
         body: SafeArea(
-          child: Form(
+          child: CustomScrollView(
-            key: _formKey,
+            slivers: [
-            child: CustomScrollView(
+              SliverFillRemaining(
-              slivers: [
+                hasScrollBody: false,
-                SliverFillRemaining(
+                child: FadeTransition(
-                  hasScrollBody: false,
+                  opacity: _fadeAnim,
-                  child: FadeTransition(
+                  child: SlideTransition(
-                    opacity: _fadeAnim,
+                    position: _slideAnim,
-                    child: SlideTransition(
+                    child: Padding(
-                      position: _slideAnim,
+                      padding: const EdgeInsets.symmetric(horizontal: 28),
-                      child: Padding(
+                      child: Column(
-                        padding: const EdgeInsets.symmetric(horizontal: 28),
+                        crossAxisAlignment: CrossAxisAlignment.start,
-                        child: Column(
+                        children: [
-                          crossAxisAlignment: CrossAxisAlignment.stretch,
+                          const SizedBox(height: 48),
-                          children: [
+                          _buildHeader(),
-                            const SizedBox(height: 48),
+                          const SizedBox(height: 32),
-                            _buildHeader(),
+                          _buildForm(context),
-                            const SizedBox(height: 8),
+                          const SizedBox(height: 24),
-                            Text(
+                          const PrivacyNoticeCard(),
+                          const SizedBox(height: 32),
+                          _buildDemoHint(),
+                          const Spacer(),
+                          const SizedBox(height: 8),
+                          Center(
+                            child: Text(
                               'Sistema Municipal de Recolección Residencial\nCelaya, Guanajuato',
                               textAlign: TextAlign.center,
                               style: TextStyle(
-                                  fontSize: 12, color: Colors.grey.shade600, height: 1.3),
+                                  fontSize: 12,
+                                  color: Colors.grey.shade600,
+                                  height: 1.3),
                             ),
-                            const SizedBox(height: 32),
+                          ),
-                            // Asegúrate de que este widget esté definido en tu proyecto o cámbialo por un placeholder
+                          const SizedBox(height: 48),
-                            // const ScheduleWarningBanner(), 
+                        ],
-                            const SizedBox(height: 32),
-                            
-                            // --- CAMPO: EMAIL / IDENTIFICADOR ---
-                            TextFormField(
-                              controller: _identifierController,
-                              keyboardType: TextInputType.emailAddress,
-                              decoration: const InputDecoration(
-                                labelText: 'Correo Electrónico o Teléfono',
-                                prefixIcon: Icon(Icons.email_outlined),
-                                border: OutlineInputBorder(
-                                    borderRadius: BorderRadius.all(Radius.circular(12))),
-                              ),
-                              validator: (value) =>
-                                  (value == null || value.trim().isEmpty)
-                                      ? 'Por favor, ingresa tus datos de acceso'
-                                      : null,
-                            ),
-                            const SizedBox(height: 20),
-
-                            // --- CAMPO: CONTRASEÑA ---
-                            TextFormField(
-                              controller: _passwordController,
-                              obscureText: _obscurePassword,
-                              decoration: InputDecoration(
-                                labelText: 'Contraseña de Acceso',
-                                prefixIcon: const Icon(Icons.lock_outline_rounded),
-                                suffixIcon: IconButton(
-                                  icon: Icon(_obscurePassword ? Icons.visibility_off : Icons.visibility),
-                                  onPressed: () => setState(() => _obscurePassword = !_obscurePassword),
-                                ),
-                                border: const OutlineInputBorder(
-                                    borderRadius: BorderRadius.all(Radius.circular(12))),
-                              ),
-                              validator: (value) => (value == null || value.isEmpty)
-                                  ? 'Por favor, introduce tu contraseña'
-                                  : null,
-                            ),
-                            const SizedBox(height: 32),
-
-                            // --- CONTENEDOR REACTIVO DE BOTONES ---
-                            BlocBuilder<AuthBloc, AuthState>(
-                              builder: (context, state) {
-                                final isLoading = state is AuthLoading;
-
-                                return AnimatedContainer(
-                                  duration: const Duration(milliseconds: 200),
-                                  decoration: BoxDecoration(
-                                    borderRadius: BorderRadius.circular(12),
-                                    boxShadow: isLoading
-                                        ? []
-                                        : [
-                                            BoxShadow(
-                                              color: AppTheme.leafGreen.withOpacity(0.3),
-                                              blurRadius: 16,
-                                              offset: const Offset(0, 6),
-                                            ),
-                                          ],
-                                  ),
-                                  child: ElevatedButton(
-                                    onPressed: isLoading ? null : () => _submit(context),
-                                    style: ElevatedButton.styleFrom(
-                                      backgroundColor: isLoading
-                                          ? AppTheme.mintGreen.withOpacity(0.7)
-                                          : AppTheme.leafGreen,
-                                      disabledBackgroundColor: AppTheme.mintGreen.withOpacity(0.6),
-                                      padding: const EdgeInsets.symmetric(vertical: 16),
-                                    ),
-                                    child: isLoading 
-                                      ? const CircularProgressIndicator(color: Colors.white)
-                                      : const Text('Iniciar Sesión', style: TextStyle(color: Colors.white)),
-                                  ),
-                                );
-                              },
-                            ),
-                            const SizedBox(height: 24),
-                            const PrivacyNoticeCard(),
-                            const SizedBox(height: 32),
-                            _buildDemoHint(),
-                            const SizedBox(height: 24),
-                          ],
-                        ),
                       ),
                     ),
                   ),
                 ),
-              ],
+              ),
-            ),
+            ],
           ),
         ),
       ),
     );
   }
 
-  // Métodos auxiliares creados como placeholders para evitar errores de compilación
+  Widget _buildHeader() {
-  Widget _buildHeader() => const Center(child: Text("WasteNotify", style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)));
+    return Column(
-  Widget _buildDemoHint() => const Center(child: Text("Demo: ciudadano@ejemplo.com / password123", style: TextStyle(fontSize: 12)));
+      crossAxisAlignment: CrossAxisAlignment.start,
-}
+      children: const [
+        Text('Bienvenido a WasteNotify',
+            style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold)),
+        SizedBox(height: 8),
+        Text('Inicia sesión para continuar',
+            style: TextStyle(fontSize: 14, color: Colors.grey)),
+      ],
+    );
+  }
+
+  Widget _buildForm(BuildContext context) {
+    return Form(
+      key: _formKey,
+      child: Column(
+        crossAxisAlignment: CrossAxisAlignment.stretch,
+        children: [
+          TextFormField(
+            controller: _identifierController,
+            keyboardType: TextInputType.emailAddress,
+            decoration: const InputDecoration(
+              labelText: 'Correo Electrónico o Teléfono',
+              prefixIcon: Icon(Icons.email_outlined),
+              border: OutlineInputBorder(
+                  borderRadius: BorderRadius.all(Radius.circular(12))),
+            ),
+            validator: (value) => (value == null || value.trim().isEmpty)
+                ? 'Por favor, ingresa tus datos de acceso'
+                : null,
+          ),
+          const SizedBox(height: 20),
+          TextFormField(
+            controller: _passwordController,
+            obscureText: _obscurePassword,
+            decoration: InputDecoration(
+              labelText: 'Contraseña de Acceso',
+              prefixIcon: const Icon(Icons.lock_outline_rounded),
+              border: const OutlineInputBorder(
+                  borderRadius: BorderRadius.all(Radius.circular(12))),
+              suffixIcon: IconButton(
+                icon: Icon(
+                    _obscurePassword ? Icons.visibility : Icons.visibility_off),
+                onPressed: () =>
+                    setState(() => _obscurePassword = !_obscurePassword),
+              ),
+            ),
+            validator: (value) => (value == null || value.isEmpty)
+                ? 'Por favor, introduce tu contraseña'
+                : null,
+          ),
+          const SizedBox(height: 32),
+          BlocBuilder<AuthBloc, AuthState>(
+            builder: (context, state) {
+              final isLoading = state is AuthLoading;
+
+              return Column(
+                mainAxisSize: MainAxisSize.min,
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  AnimatedContainer(
+                    duration: const Duration(milliseconds: 200),
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(12),
+                      boxShadow: isLoading
+                          ? []
+                          : [
+                              BoxShadow(
+                                color:
+                                    AppTheme.leafGreen.withValues(alpha: 0.3),
+                                blurRadius: 16,
+                                offset: const Offset(0, 6),
+                              ),
+                            ],
+                    ),
+                    child: ElevatedButton(
+                      onPressed: isLoading ? null : () => _submit(context),
+                      style: ElevatedButton.styleFrom(
+                        backgroundColor: isLoading
+                            ? AppTheme.mintGreen.withValues(alpha: 0.7)
+                            : AppTheme.leafGreen,
+                        disabledBackgroundColor:
+                            AppTheme.mintGreen.withValues(alpha: 0.6),
+                        padding: const EdgeInsets.symmetric(vertical: 16),
+                        shape: RoundedRectangleBorder(
+                            borderRadius: BorderRadius.circular(12)),
+                      ),
+                      child: isLoading
+                          ? const SizedBox(
+                              height: 20,
+                              width: 20,
+                              child: CircularProgressIndicator(
+                                  color: Colors.white, strokeWidth: 2),
+                            )
+                          : const Text('Iniciar Sesión',
+                              style: TextStyle(color: Colors.white)),
+                    ),
+                  ),
+                  const SizedBox(height: 16),
+                  // 📍 BOTÓN DE REGISTRO CORREGIDO (child al final)
+                  TextButton(
+                    onPressed: () => context.push(AppRoutes.register),
+                    style: TextButton.styleFrom(
+                      foregroundColor: AppTheme.leafGreen,
+                      textStyle: const TextStyle(
+                          fontSize: 14, fontWeight: FontWeight.w500),
+                    ),
+                    child: const Text('¿No tienes cuenta? Regístrate aquí'),
+                  ),
+                ],
+              );
+            },
+          ),
+        ],
+      ),
+    );
+  } // 📍 Cierre de la función _buildForm
+
+  // Placeholders para evitar errores si no están definidos
+  Widget _buildDemoHint() => const SizedBox.shrink();
+} // 📍 Cierre de la clase _LoginScreenState

lib/features/auth/presentation/screens/register_screen.dart

@@ -1,3 +1,5 @@
+import 'dart:math'; // 
+import '../../../../core/network/mysql_service.dart'; // 📍 Ajusta las carpetas '../' según tu proyecto
 import 'package:flutter/material.dart';
 import 'package:go_router/go_router.dart';
 import 'package:flutter_application_1/features/auth/data/models/mock_waste_data.dart';
@@ -11,90 +13,178 @@ class RegisterScreen extends StatefulWidget {
 
 class _RegisterScreenState extends State<RegisterScreen> {
   final _formKey = GlobalKey<FormState>();
-  String _selectedColonia = 'Centro';
+  late String _selectedColonia;
   final _nameController = TextEditingController();
   final _emailController = TextEditingController();
   final _passwordController = TextEditingController();
 
+  @override
+  void initState() {
+    super.initState();
+    if (MockWasteData.schedules.isNotEmpty) {
+      _selectedColonia = MockWasteData.schedules.first.colonia;
+    } else {
+      _selectedColonia = '';
+    }
+  }
+
+  @override
+  void dispose() {
+    _nameController.dispose();
+    _emailController.dispose();
+    _passwordController.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('Crear Cuenta Ciudadana')),
+        appBar: AppBar(title: const Text('Crear Cuenta Ciudadana')),
-      body: SingleChildScrollView(
+        body: SingleChildScrollView(
-        padding: const EdgeInsets.all(24.0),
+          padding: const EdgeInsets.all(24.0),
-        child: Form(
+          child: Form(
-          key: _formKey,
+            key: _formKey,
-          child: Column(
+            child: Column(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
+              crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: [
+              children: [
-              const Icon(Icons.assignment_ind_outlined, size: 80, color: Colors.green),
+                const Icon(Icons.assignment_ind_outlined,
-              const SizedBox(height: 16),
+                    size: 80, color: Colors.green),
-              Text(
+                const SizedBox(height: 16),
-                'Regístrate para recibir avisos de recolección en tu zona',
+                Text(
-                textAlign: TextAlign.center,
+                  'Regístrate para recibir avisos de recolección en tu zona',
-                style: Theme.of(context).textTheme.bodyLarge,
+                  textAlign: TextAlign.center,
-              ),
+                  style: Theme.of(context).textTheme.bodyLarge,
-              const SizedBox(height: 24),
+                ),
-              TextFormField(
+                const SizedBox(height: 24),
-                controller: _nameController,
+                TextFormField(
-                decoration: const InputDecoration(labelText: 'Nombre Completo', border: OutlineInputBorder()),
+                  controller: _nameController,
-                validator: (v) => v!.isEmpty ? 'Ingresa tu nombre' : null,
+                  decoration: const InputDecoration(
-              ),
+                      labelText: 'Nombre Completo',
-              const SizedBox(height: 16),
+                      border: OutlineInputBorder()),
-              TextFormField(
+                  validator: (v) =>
-                controller: _emailController,
+                      v == null || v.isEmpty ? 'Ingresa tu nombre' : null,
-                decoration: const InputDecoration(labelText: 'Correo o Teléfono', border: OutlineInputBorder()),
+                ),
-                validator: (v) => v!.isEmpty ? 'Ingresa tus datos' : null,
+                const SizedBox(height: 16),
-              ),
+                TextFormField(
-              const SizedBox(height: 16),
+                  controller: _emailController,
-              TextFormField(
+                  decoration: const InputDecoration(
-                controller: _passwordController,
+                      labelText: 'Correo o Teléfono',
-                obscureText: true,
+                      border: OutlineInputBorder()),
-                decoration: const InputDecoration(labelText: 'Contraseña', border: OutlineInputBorder()),
+                  validator: (v) =>
-                validator: (v) => v!.length < 6 ? 'Mínimo 6 caracteres' : null,
+                      v == null || v.isEmpty ? 'Ingresa tus datos' : null,
-              ),
+                ),
-              const SizedBox(height: 16),
+                const SizedBox(height: 16),
-              
+                TextFormField(
-              // Dropdown para seleccionar la Colonia (Requisito MVP)
+                  controller: _passwordController,
-              DropdownButtonFormField<String>(
+                  obscureText: true,
-                value: _selectedColonia,
+                  decoration: const InputDecoration(
-                decoration: const InputDecoration(labelText: 'Selecciona tu Colonia / Domicilio', border: OutlineInputBorder()),
+                      labelText: 'Contraseña', border: OutlineInputBorder()),
-                items: MockWasteData.schedules.map((zone) {
+                  validator: (v) =>
-                  return DropdownMenuItem(value: zone.colonia, child: Text(zone.colonia));
+                      v == null || v.length < 6 ? 'Mínimo 6 caracteres' : null,
-                }).toList(),
+                ),
-                onChanged: (val) => setState(() => _selectedColonia = val!),
+                const SizedBox(height: 16),
-              ),
+                DropdownButtonFormField<String>(
-              const SizedBox(height: 24),
+                  value: _selectedColonia,
-              
+                  decoration: const InputDecoration(
-              // Mensajería Preventiva Legal
+                      labelText: 'Selecciona tu Colonia / Domicilio',
-              Card(
+                      border: OutlineInputBorder()),
-                color: Colors.amber.shade50,
+                  items: MockWasteData.schedules.map((zone) {
-                child: Padding(
+                    return DropdownMenuItem(
-                  padding: const EdgeInsets.all(12.0),
+                        value: zone.colonia, child: Text(zone.colonia));
-                  child: Text(
+                  }).toList(),
-                    '🔒 Privacidad Garantizada:\nAl registrar tu domicilio, tu cuenta operará bajo el principio de "Visión de Túnel". Solo verás alertas de tu sector. Está prohibido el rastreo de flotillas.',
+                  onChanged: (val) => setState(() => _selectedColonia = val!),
-                    style: TextStyle(color: Colors.amber.shade900, fontSize: 13, fontWeight: FontWeight.bold),
+                ),
+                const SizedBox(height: 24),
+                Card(
+                  color: Colors.amber.shade50,
+                  child: Padding(
+                    padding: const EdgeInsets.all(12.0),
+                    child: Text(
+                      '🔒 Privacidad Garantizada:\nAl registrar tu domicilio, tu cuenta operará bajo el principio de "Visión de Túnel". Solo verás alertas de tu sector. Está prohibido el rastreo de flotillas.',
+                      style: TextStyle(
+                          color: Colors.amber.shade900,
+                          fontSize: 13,
+                          fontWeight: FontWeight.bold),
+                    ),
                   ),
                 ),
-              ),
+                const SizedBox(height: 24),
-              const SizedBox(height: 24),
+                ElevatedButton(
-              ElevatedButton(
+                  style: ElevatedButton.styleFrom(
-                style: ElevatedButton.styleFrom(padding: const EdgeInsets.symmetric(vertical: 16), backgroundColor: Colors.green),
+                      padding: const EdgeInsets.symmetric(vertical: 16),
-                onPressed: () {
+                      backgroundColor: Colors.green),
-                  if (_formKey.currentState!.validate()) {
+                  onPressed: () async {
-                    // Simulación de Registro Exitoso: Navega al Home enviando la colonia elegida
+                    if (_formKey.currentState!.validate()) {
-                    ScaffoldMessenger.of(context).showSnackBar(
+                      try {
-                      const SnackBar(content: Text('Cuenta creada con éxito (Modo Simulación)')),
+                        print(
-                    );
+                            '=== DEPURACIÓN: Iniciando proceso de registro ===');
-                    context.go('/home?colonia=$_selectedColonia');
+
-                  }
+                        ScaffoldMessenger.of(context).showSnackBar(
-                },
+                          const SnackBar(
-                child: const Text('Registrarse', style: TextStyle(color: Colors.white, fontSize: 16)),
+                              content: Text(
-              ),
+                                  'Conectando con la base de datos local...')),
-            ],
+                        );
+
+                        final conn = await MySqlService().getConnection();
+                        print(
+                            '=== DEPURACIÓN: ¡Conexión obtenida! Estado connected: ${conn.connected}');
+
+                        print('=== DEPURACIÓN: Intentando ejecutar INSERT ===');
+                        final randomPhone =
+                            '461${1000000 + Random().nextInt(9000000)}'; // 📍 ENVIANDO LA COLONIA REAL A TU NUEVA COLUMNA DE MYSQL
+                        final result = await conn.execute(
+                          "INSERT INTO usuarios (email, telefono, contrasena_hash, rol, is_verified, colonia) VALUES (:email, :telefono, :contrasena_hash, :rol, :is_verified, :colonia)",
+                          {
+                            "email": _emailController.text.trim(),
+                            "telefono": randomPhone, // 📍 Genera un teléfono simulado para cumplir con el esquema de tu tabla
+                            "contrasena_hash": _passwordController.text,
+                            "rol": "Ciudadano",
+                            "is_verified": 1,
+                            "colonia":
+                                _selectedColonia, // 📍 Envía la colonia seleccionada en el Dropdown
+                          },
+                        );
+
+                        print(
+                            '=== DEPURACIÓN: INSERT completado. Filas afectadas: ${result.affectedRows}');
+
+                        if (!mounted) return;
+
+                        if (result.affectedRows > BigInt.zero) {
+                          ScaffoldMessenger.of(context).showSnackBar(
+                            const SnackBar(
+                                content: Text(
+                                    '¡Usuario guardado con éxito en MySQL Celaya!')),
+                          );
+                          context.go('/home?colonia=$_selectedColonia');
+                        } else {
+                          print(
+                              '=== DEPURACIÓN: El query se ejecutó pero devolvió 0 filas afectadas ===');
+                        }
+                      } catch (e, stacktrace) {
+                        print(
+                            '=== DEPURACIÓN: ¡CAPTURADO UN ERROR EN EL CATCH! ===');
+                        print('Detalle del error: $e');
+                        print(
+                            'Ubicación del fallo (Stacktrace): \n$stacktrace');
+
+                        if (!mounted) return;
+                        ScaffoldMessenger.of(context).showSnackBar(
+                          SnackBar(
+                            content: Text('Error de conexión a MySQL: $e'),
+                            backgroundColor: Colors.red,
+                            duration: const Duration(seconds: 5),
+                          ),
+                        );
+                      }
+                    }
+                  },
+                  child: const Text('Registrarse',
+                      style: TextStyle(color: Colors.white, fontSize: 16)),
+                ),
+              ],
+            ),
           ),
-        ),
+        ));
-      ),
-    );
   }
 }

lib/features/auth/presentation/widgets/privacy_notice_card.dart

@@ -17,7 +17,7 @@ class PrivacyNoticeCard extends StatelessWidget {
         color: AppTheme.lightMint,
         borderRadius: BorderRadius.circular(12),
         border: Border.all(
-          color: AppTheme.mintGreen.withOpacity(0.3),
+          color: AppTheme.mintGreen.withValues(alpha: 0.3),
           width: 1,
         ),
       ),
@@ -85,7 +85,7 @@ class _PrivacyPoint extends StatelessWidget {
             text,
             style: TextStyle(
               fontSize: 12,
-              color: AppTheme.forestGreen.withOpacity(0.85),
+              color: AppTheme.forestGreen.withValues(alpha: 0.85),
               height: 1.4,
             ),
           ),
@@ -105,10 +105,10 @@ class ScheduleWarningBanner extends StatelessWidget {
     return Container(
       padding: const EdgeInsets.symmetric(horizontal: 14, vertical: 10),
       decoration: BoxDecoration(
-        color: AppTheme.alertAmber.withOpacity(0.10),
+        color: AppTheme.alertAmber.withValues(alpha: 0.10),
         borderRadius: BorderRadius.circular(10),
         border: Border.all(
-          color: AppTheme.alertAmber.withOpacity(0.35),
+          color: AppTheme.alertAmber.withValues(alpha: 0.35),
           width: 1,
         ),
       ),

pubspec.lock

@@ -33,6 +33,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.1.1"
+  buffer:
+    dependency: transitive
+    description:
+      name: buffer
+      sha256: "389da2ec2c16283c8787e0adaede82b1842102f8c8aae2f49003a766c5c6b3d1"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.2.3"
   characters:
     dependency: transitive
     description:
@@ -57,6 +65,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.19.0"
+  crypto:
+    dependency: transitive
+    description:
+      name: crypto
+      sha256: c8ea0233063ba03258fbcf2ca4d6dadfefe14f02fab57702265467a19f27fadf
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.7"
   cupertino_icons:
     dependency: "direct main"
     description:
@@ -304,6 +320,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "2.0.0"
+  mysql_client:
+    dependency: "direct main"
+    description:
+      name: mysql_client
+      sha256: "6a0fdcbe3e0721c637f97ad24649be2f70dbce2b21ede8f962910e640f753fc2"
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.0.27"
   nested:
     dependency: transitive
     description:
@@ -509,6 +533,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.10.1"
+  tuple:
+    dependency: transitive
+    description:
+      name: tuple
+      sha256: a97ce2013f240b2f3807bcbaf218765b6f301c3eff91092bcfa23a039e7dd151
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.2"
   typed_data:
     dependency: transitive
     description:

pubspec.yaml

@@ -32,6 +32,7 @@ dependencies:
   flutter_map: ^6.2.1
   latlong2: ^0.9.1
   flutter_local_notifications: ^19.5.0
+  mysql_client: ^0.0.27
 
 
 

test/widget_test.dart

@@ -11,7 +11,7 @@ import 'package:flutter_test/flutter_test.dart';
 // Use a local test app to avoid depending on external package imports
 // which may not exist in the test environment.
 class MyApp extends StatefulWidget {
-  const MyApp({Key? key}) : super(key: key);
+  const MyApp({super.key});
 
   @override
   State<MyApp> createState() => _MyAppState();