Co-authored-by: MENDOZA BALLARDO GAEL RICARDO <gael-meb123@users.noreply.github.com>

Co-authored-by: Azareth-Tr <Azareth-Tr@users.noreply.github.com>
Co-authored-by: eddgranados12 <eddgranados12@users.noreply.github.com>

vistas de mockup actualizaco

recolecta_app/lib/core/router/app_router.dart

@@ -3,6 +3,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
 import 'package:go_router/go_router.dart';
 import 'package:recolecta_app/features/admin/admin_shell.dart';
 import 'package:recolecta_app/features/auth/login_page.dart';
+import 'package:recolecta_app/features/auth/register_page.dart';
 import 'package:recolecta_app/features/driver/driver_shell.dart';
 import 'package:recolecta_app/features/driver/screens/driver_collections_screen.dart';
 import 'package:recolecta_app/features/driver/screens/driver_home_screen.dart';
@@ -47,13 +48,15 @@ final routerProvider = Provider<GoRouter>((ref) {
       final isAuthenticated = authState.value?.isAuthenticated ?? false;
       final role = authState.value?.userRole;
 
-      final isLoggingIn = state.matchedLocation == '/login';
+      final isAuthRoute =
+          state.matchedLocation == '/login' ||
+          state.matchedLocation == '/register';
 
       if (!isAuthenticated) {
-        return isLoggingIn ? null : '/login';
+        return isAuthRoute ? null : '/login';
       }
 
-      if (isLoggingIn) {
+      if (isAuthRoute) {
         switch (role) {
           case 'admin':
             return '/admin';
@@ -70,6 +73,10 @@ final routerProvider = Provider<GoRouter>((ref) {
     },
     routes: [
       GoRoute(path: '/login', builder: (context, state) => const LoginPage()),
+      GoRoute(
+        path: '/register',
+        builder: (context, state) => const RegisterPage(),
+      ),
       ShellRoute(
         builder: (context, state, child) => AdminShell(child: child),
         routes: [

recolecta_app/lib/core/widgets/app_widgets.dart

@@ -15,28 +15,28 @@ class AppStatusBadge extends StatelessWidget {
   });
 
   factory AppStatusBadge.green(String label) => AppStatusBadge(
-        label: label,
-        backgroundColor: AppTheme.primaryLight,
-        textColor: AppTheme.primaryDark,
-      );
+    label: label,
+    backgroundColor: AppTheme.primaryLight,
+    textColor: AppTheme.primaryDark,
+  );
 
   factory AppStatusBadge.amber(String label) => AppStatusBadge(
-        label: label,
-        backgroundColor: AppTheme.amberLight,
-        textColor: AppTheme.amber,
-      );
+    label: label,
+    backgroundColor: AppTheme.amberLight,
+    textColor: AppTheme.amber,
+  );
 
   factory AppStatusBadge.gray(String label) => AppStatusBadge(
-        label: label,
-        backgroundColor: const Color(0xFFF1EFE8),
-        textColor: const Color(0xFF5F5E5A),
-      );
+    label: label,
+    backgroundColor: const Color(0xFFF1EFE8),
+    textColor: const Color(0xFF5F5E5A),
+  );
 
   factory AppStatusBadge.danger(String label) => AppStatusBadge(
-        label: label,
-        backgroundColor: AppTheme.dangerLight,
-        textColor: AppTheme.danger,
-      );
+    label: label,
+    backgroundColor: AppTheme.dangerLight,
+    textColor: AppTheme.danger,
+  );
 
   @override
   Widget build(BuildContext context) {
@@ -133,15 +133,22 @@ class AppInfoRow extends StatelessWidget {
             child: Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               children: [
-                Text(value,
-                    style: const TextStyle(
-                        fontSize: 14,
-                        fontWeight: FontWeight.w500,
-                        color: AppTheme.textPrimary)),
+                Text(
+                  value,
+                  style: const TextStyle(
+                    fontSize: 14,
+                    fontWeight: FontWeight.w500,
+                    color: AppTheme.textPrimary,
+                  ),
+                ),
                 const SizedBox(height: 2),
-                Text(label,
-                    style: const TextStyle(
-                        fontSize: 12, color: AppTheme.textSecondary)),
+                Text(
+                  label,
+                  style: const TextStyle(
+                    fontSize: 12,
+                    color: AppTheme.textSecondary,
+                  ),
+                ),
               ],
             ),
           ),
@@ -163,6 +170,7 @@ class AppFormField extends StatelessWidget {
   final Widget? suffix;
   final int? maxLines;
   final String? Function(String?)? validator;
+  final ValueChanged<String>? onChanged;
 
   const AppFormField({
     super.key,
@@ -175,6 +183,7 @@ class AppFormField extends StatelessWidget {
     this.suffix,
     this.maxLines = 1,
     this.validator,
+    this.onChanged,
   });
 
   @override
@@ -182,11 +191,14 @@ class AppFormField extends StatelessWidget {
     return Column(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
-        Text(label,
-            style: const TextStyle(
-                fontSize: 12,
-                fontWeight: FontWeight.w500,
-                color: AppTheme.textSecondary)),
+        Text(
+          label,
+          style: const TextStyle(
+            fontSize: 12,
+            fontWeight: FontWeight.w500,
+            color: AppTheme.textSecondary,
+          ),
+        ),
         const SizedBox(height: 6),
         TextFormField(
           controller: controller,
@@ -195,6 +207,7 @@ class AppFormField extends StatelessWidget {
           keyboardType: keyboardType,
           maxLines: maxLines,
           validator: validator,
+          onChanged: onChanged,
           style: const TextStyle(fontSize: 14, color: AppTheme.textPrimary),
           decoration: InputDecoration(hintText: hint, suffixIcon: suffix),
         ),
@@ -253,9 +266,10 @@ class AppLabeledSwitch extends StatelessWidget {
       child: Row(
         children: [
           Expanded(
-            child: Text(label,
-                style: const TextStyle(
-                    fontSize: 14, color: AppTheme.textPrimary)),
+            child: Text(
+              label,
+              style: const TextStyle(fontSize: 14, color: AppTheme.textPrimary),
+            ),
           ),
           Switch.adaptive(
             value: value,
@@ -310,23 +324,33 @@ class AppMenuTile extends StatelessWidget {
               child: Column(
                 crossAxisAlignment: CrossAxisAlignment.start,
                 children: [
-                  Text(title,
-                      style: TextStyle(
-                          fontSize: 14,
-                          fontWeight: FontWeight.w500,
-                          color: titleColor ?? AppTheme.textPrimary)),
+                  Text(
+                    title,
+                    style: TextStyle(
+                      fontSize: 14,
+                      fontWeight: FontWeight.w500,
+                      color: titleColor ?? AppTheme.textPrimary,
+                    ),
+                  ),
                   if (subtitle != null) ...[
                     const SizedBox(height: 2),
-                    Text(subtitle!,
-                        style: const TextStyle(
-                            fontSize: 12, color: AppTheme.textSecondary)),
+                    Text(
+                      subtitle!,
+                      style: const TextStyle(
+                        fontSize: 12,
+                        color: AppTheme.textSecondary,
+                      ),
+                    ),
                   ],
                 ],
               ),
             ),
             trailing ??
-                const Icon(Icons.chevron_right,
-                    color: AppTheme.textSecondary, size: 18),
+                const Icon(
+                  Icons.chevron_right,
+                  color: AppTheme.textSecondary,
+                  size: 18,
+                ),
           ],
         ),
       ),
@@ -365,11 +389,14 @@ class AppFormCard extends StatelessWidget {
             children: [
               Icon(icon, color: AppTheme.primary, size: 18),
               const SizedBox(width: 8),
-              Text(title,
-                  style: const TextStyle(
-                      fontSize: 14,
-                      fontWeight: FontWeight.w600,
-                      color: AppTheme.textPrimary)),
+              Text(
+                title,
+                style: const TextStyle(
+                  fontSize: 14,
+                  fontWeight: FontWeight.w600,
+                  color: AppTheme.textPrimary,
+                ),
+              ),
             ],
           ),
           const SizedBox(height: 16),