api update and flutter update

walkguide-mobile/walkguide_app/lib/features/auth/login_screen.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:google_fonts/google_fonts.dart';
+import '../../../../core/storage/secure_storage.dart';
+import '../../../../core/services/tts_service.dart';
+import '../../../../injection_container.dart';
+
+class SplashScreen extends StatefulWidget {
+  const SplashScreen({super.key});
+
+  @override
+  State<SplashScreen> createState() => _SplashScreenState();
+}
+
+class _SplashScreenState extends State<SplashScreen> {
+  @override
+  void initState() {
+    super.initState();
+    _checkAuth();
+  }
+
+  Future<void> _checkAuth() async {
+    await Future.delayed(const Duration(milliseconds: 800));
+    final storage = sl<SecureStorage>();
+    final token = await storage.getAccessToken();
+    final role  = await storage.getUserRole();
+
+    if (!mounted) return;
+
+    if (token == null || role == null) {
+      context.go('/login');
+      return;
+    }
+
+    final name = await storage.getDisplayName() ?? 'kembali';
+    sl<TtsService>().speak('Selamat datang, $name');
+
+    if (role == 'ROLE_GUARDIAN') {
+      context.go('/guardian/dashboard');
+    } else {
+      context.go('/user/walkguide');
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFF1A56DB),
+      body: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Container(
+              width: 80, height: 80,
+              decoration: BoxDecoration(color: Colors.white.withOpacity(0.15), borderRadius: BorderRadius.circular(20)),
+              child: const Icon(Icons.navigation_rounded, color: Colors.white, size: 44),
+            ),
+            const SizedBox(height: 20),
+            Text('WalkGuide', style: GoogleFonts.outfit(fontSize: 32, fontWeight: FontWeight.w700, color: Colors.white)),
+            const SizedBox(height: 8),
+            Text('AI Navigation Assistant', style: GoogleFonts.inter(fontSize: 14, color: Colors.white60)),
+            const SizedBox(height: 48),
+            const CircularProgressIndicator(color: Colors.white54, strokeWidth: 2),
+          ],
+        ),
+      ),
+    );
+  }
+}

walkguide-mobile/walkguide_app/lib/features/auth/register_screen.dart

@@ -0,0 +1,165 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:dio/dio.dart';
+
+import '../../../../core/network/api_client.dart';
+import '../../../../core/storage/secure_storage.dart';
+import '../../../../core/services/tts_service.dart';
+import '../../../../injection_container.dart';
+
+class RegisterScreen extends StatefulWidget {
+  const RegisterScreen({super.key});
+  @override
+  State<RegisterScreen> createState() => _RegisterScreenState();
+}
+
+class _RegisterScreenState extends State<RegisterScreen> {
+  final _nameCtrl  = TextEditingController();
+  final _emailCtrl = TextEditingController();
+  final _passCtrl  = TextEditingController();
+  String _selectedRole = '';
+  bool _loading = false;
+
+  Future<void> _register() async {
+    if (_selectedRole.isEmpty) {
+      ScaffoldMessenger.of(context).showSnackBar(const SnackBar(content: Text('Pilih tipe akun dulu')));
+      return;
+    }
+    setState(() => _loading = true);
+    try {
+      final res = await sl<ApiClient>().dio.post('/auth/register', data: {
+        'email': _emailCtrl.text.trim(),
+        'password': _passCtrl.text.trim(),
+        'displayName': _nameCtrl.text.trim(),
+        'role': _selectedRole,
+      });
+      if (res.statusCode == 200 && res.data['success'] == true) {
+        final data = res.data['data'];
+        await sl<SecureStorage>().saveTokens(
+          accessToken:  data['accessToken'],
+          refreshToken: data['refreshToken'],
+          role:         data['role'],
+          userId:       data['userId'].toString(),
+          displayName:  data['displayName'],
+          uniqueUserId: data['uniqueUserId'],
+        );
+        if (!mounted) return;
+        final isUser = data['role'] == 'ROLE_USER';
+        if (isUser) {
+          final uid = data['uniqueUserId'] ?? '';
+          sl<TtsService>().speak('Registrasi berhasil. ID kamu adalah ${uid.split('').join(' ')}. Bagikan ID ini ke Guardian kamu.');
+        } else {
+          sl<TtsService>().speak('Registrasi berhasil. Selamat datang, ${data['displayName']}');
+        }
+        context.go(isUser ? '/user/walkguide' : '/guardian/dashboard');
+      }
+    } on DioException catch (e) {
+      final msg = e.response?.data['message'] ?? 'Registrasi gagal';
+      if (mounted) ScaffoldMessenger.of(context).showSnackBar(SnackBar(content: Text(msg), backgroundColor: Colors.redAccent));
+    } finally {
+      if (mounted) setState(() => _loading = false);
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFFF1F5F9),
+      body: Center(
+        child: SingleChildScrollView(
+          padding: const EdgeInsets.all(24),
+          child: Container(
+            constraints: const BoxConstraints(maxWidth: 440),
+            decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(20),
+              boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.08), blurRadius: 40, offset: const Offset(0, 16))]),
+            padding: const EdgeInsets.all(32),
+            child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+              Text('Buat Akun', style: GoogleFonts.outfit(fontSize: 26, fontWeight: FontWeight.w700)),
+              const SizedBox(height: 6),
+              Text('Pilih tipe akun kamu', style: GoogleFonts.inter(fontSize: 13, color: const Color(0xFF64748B))),
+              const SizedBox(height: 24),
+
+              // Role selector cards
+              Row(children: [
+                _roleCard('GUARDIAN', Icons.shield_outlined, 'Guardian', 'Saya akan membimbing seseorang'),
+                const SizedBox(width: 12),
+                _roleCard('USER', Icons.accessibility_new_rounded, 'User', 'Saya butuh bantuan navigasi'),
+              ]),
+              const SizedBox(height: 24),
+
+              _field('Nama Lengkap', _nameCtrl, false),
+              const SizedBox(height: 14),
+              _field('Email', _emailCtrl, false),
+              const SizedBox(height: 14),
+              _field('Password (min. 6 karakter)', _passCtrl, true),
+              const SizedBox(height: 24),
+
+              SizedBox(
+                width: double.infinity, height: 44,
+                child: ElevatedButton(
+                  onPressed: _loading ? null : _register,
+                  style: ElevatedButton.styleFrom(
+                    backgroundColor: const Color(0xFF1A56DB),
+                    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+                  ),
+                  child: _loading
+                    ? const SizedBox(width: 18, height: 18, child: CircularProgressIndicator(color: Colors.white, strokeWidth: 2))
+                    : Text('Daftar Sekarang', style: GoogleFonts.inter(fontSize: 14, fontWeight: FontWeight.w600, color: Colors.white)),
+                ),
+              ),
+              const SizedBox(height: 14),
+              Center(child: GestureDetector(
+                onTap: () => context.go('/login'),
+                child: Text('Sudah punya akun? Login', style: GoogleFonts.inter(fontSize: 12, color: const Color(0xFF1A56DB))),
+              )),
+            ]),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _roleCard(String role, IconData icon, String title, String subtitle) {
+    final selected = _selectedRole == role;
+    return Expanded(
+      child: GestureDetector(
+        onTap: () => setState(() => _selectedRole = role),
+        child: AnimatedContainer(
+          duration: const Duration(milliseconds: 200),
+          padding: const EdgeInsets.all(16),
+          decoration: BoxDecoration(
+            color: selected ? const Color(0xFFEFF6FF) : const Color(0xFFF8FAFC),
+            border: Border.all(color: selected ? const Color(0xFF1A56DB) : const Color(0xFFE2E8F0), width: selected ? 2 : 1),
+            borderRadius: BorderRadius.circular(12),
+          ),
+          child: Column(children: [
+            Icon(icon, color: selected ? const Color(0xFF1A56DB) : const Color(0xFF94A3B8), size: 28),
+            const SizedBox(height: 8),
+            Text(title, style: GoogleFonts.inter(fontSize: 13, fontWeight: FontWeight.w600, color: selected ? const Color(0xFF1A56DB) : const Color(0xFF0F172A))),
+            const SizedBox(height: 4),
+            Text(subtitle, textAlign: TextAlign.center, style: GoogleFonts.inter(fontSize: 10, color: const Color(0xFF94A3B8))),
+          ]),
+        ),
+      ),
+    );
+  }
+
+  Widget _field(String label, TextEditingController ctrl, bool isPass) {
+    return Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
+      Text(label, style: GoogleFonts.inter(fontSize: 12, color: const Color(0xFF64748B))),
+      const SizedBox(height: 5),
+      TextField(
+        controller: ctrl,
+        obscureText: isPass,
+        style: GoogleFonts.inter(fontSize: 13),
+        decoration: InputDecoration(
+          border: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Color(0xFFE2E8F0))),
+          enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Color(0xFFE2E8F0))),
+          focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(8), borderSide: const BorderSide(color: Color(0xFF1A56DB), width: 2)),
+          contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 12),
+        ),
+      ),
+    ]);
+  }
+}

walkguide-mobile/walkguide_app/lib/features/auth/splash_screen.dart

@@ -0,0 +1,69 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:google_fonts/google_fonts.dart';
+import '../../../../core/storage/secure_storage.dart';
+import '../../../../core/services/tts_service.dart';
+import '../../../../injection_container.dart';
+
+class SplashScreen extends StatefulWidget {
+  const SplashScreen({super.key});
+
+  @override
+  State<SplashScreen> createState() => _SplashScreenState();
+}
+
+class _SplashScreenState extends State<SplashScreen> {
+  @override
+  void initState() {
+    super.initState();
+    _checkAuth();
+  }
+
+  Future<void> _checkAuth() async {
+    await Future.delayed(const Duration(milliseconds: 800));
+    final storage = sl<SecureStorage>();
+    final token = await storage.getAccessToken();
+    final role  = await storage.getUserRole();
+
+    if (!mounted) return;
+
+    if (token == null || role == null) {
+      context.go('/login');
+      return;
+    }
+
+    final name = await storage.getDisplayName() ?? 'kembali';
+    sl<TtsService>().speak('Selamat datang, $name');
+
+    if (role == 'ROLE_GUARDIAN') {
+      context.go('/guardian/dashboard');
+    } else {
+      context.go('/user/walkguide');
+    }
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFF1A56DB),
+      body: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            Container(
+              width: 80, height: 80,
+              decoration: BoxDecoration(color: Colors.white.withOpacity(0.15), borderRadius: BorderRadius.circular(20)),
+              child: const Icon(Icons.navigation_rounded, color: Colors.white, size: 44),
+            ),
+            const SizedBox(height: 20),
+            Text('WalkGuide', style: GoogleFonts.outfit(fontSize: 32, fontWeight: FontWeight.w700, color: Colors.white)),
+            const SizedBox(height: 8),
+            Text('AI Navigation Assistant', style: GoogleFonts.inter(fontSize: 14, color: Colors.white60)),
+            const SizedBox(height: 48),
+            const CircularProgressIndicator(color: Colors.white54, strokeWidth: 2),
+          ],
+        ),
+      ),
+    );
+  }
+}

walkguide-mobile/walkguide_app/lib/features/server_connect/server_connect_server.dart

@@ -0,0 +1,184 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:google_fonts/google_fonts.dart';
+import 'package:dio/dio.dart';
+
+import '../../../../core/constants/app_constants.dart';
+import '../../../../injection_container.dart';
+import '../../../../core/network/api_client.dart';
+
+class ServerConnectScreen extends StatefulWidget {
+  const ServerConnectScreen({super.key});
+
+  @override
+  State<ServerConnectScreen> createState() => _ServerConnectScreenState();
+}
+
+class _ServerConnectScreenState extends State<ServerConnectScreen> {
+  final _urlCtrl = TextEditingController(text: 'http://202.46.28.160:8080');
+  bool _testing = false;
+  bool _connected = false;
+  String? _errorMsg;
+  String? _serverInfo;
+
+  Future<void> _testConnection() async {
+    final url = _urlCtrl.text.trim();
+    if (url.isEmpty) return;
+
+    setState(() { _testing = true; _connected = false; _errorMsg = null; _serverInfo = null; });
+
+    try {
+      final tempDio = Dio(BaseOptions(
+        connectTimeout: AppConstants.pingTimeout,
+        receiveTimeout: AppConstants.pingTimeout,
+      ));
+      final res = await tempDio.get('$url/api/v1/auth/ping');
+      if (res.statusCode == 200 && res.data['success'] == true) {
+        setState(() {
+          _connected = true;
+          _serverInfo = 'Server aktif — ${res.data['message'] ?? 'OK'}';
+        });
+      } else {
+        setState(() => _errorMsg = 'Server merespons tapi tidak valid. Cek URL.');
+      }
+    } on DioException catch (e) {
+      String msg;
+      if (e.type == DioExceptionType.connectionTimeout ||
+          e.type == DioExceptionType.receiveTimeout) {
+        msg = 'Koneksi timeout. Pastikan server berjalan dan URL benar.';
+      } else if (e.type == DioExceptionType.connectionError) {
+        msg = 'Tidak bisa terhubung. Cek URL dan pastikan HP di jaringan yang sama dengan server.';
+      } else {
+        msg = 'Error: ${e.message}';
+      }
+      setState(() => _errorMsg = msg);
+    } catch (e) {
+      setState(() => _errorMsg = 'Error tidak dikenal: $e');
+    } finally {
+      setState(() => _testing = false);
+    }
+  }
+
+  Future<void> _continueToApp() async {
+    final url = _urlCtrl.text.trim();
+    await AppConstants.setServerUrl(url);
+    await sl<ApiClient>().init(url);
+    if (mounted) context.go('/splash');
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      backgroundColor: const Color(0xFFF1F5F9),
+      body: Center(
+        child: SingleChildScrollView(
+          padding: const EdgeInsets.all(24),
+          child: Container(
+            constraints: const BoxConstraints(maxWidth: 440),
+            decoration: BoxDecoration(
+              color: Colors.white,
+              borderRadius: BorderRadius.circular(20),
+              boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.08), blurRadius: 40, offset: const Offset(0, 16))],
+            ),
+            padding: const EdgeInsets.all(32),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                // Logo
+                Row(children: [
+                  Container(
+                    width: 40, height: 40,
+                    decoration: BoxDecoration(color: const Color(0xFF1A56DB), borderRadius: BorderRadius.circular(10)),
+                    child: const Icon(Icons.navigation_rounded, color: Colors.white, size: 22),
+                  ),
+                  const SizedBox(width: 10),
+                  Text('WalkGuide', style: GoogleFonts.outfit(fontSize: 20, fontWeight: FontWeight.w700, color: const Color(0xFF0F172A))),
+                ]),
+                const SizedBox(height: 28),
+                Text('Connect to Server', style: GoogleFonts.outfit(fontSize: 26, fontWeight: FontWeight.w700, color: const Color(0xFF0F172A))),
+                const SizedBox(height: 6),
+                Text('Masukkan URL server yang diberikan oleh dosen/instructor.', style: GoogleFonts.inter(fontSize: 13, color: const Color(0xFF64748B))),
+                const SizedBox(height: 24),
+
+                // URL Input
+                Text('Server URL', style: GoogleFonts.inter(fontSize: 12, fontWeight: FontWeight.w500, color: const Color(0xFF64748B))),
+                const SizedBox(height: 6),
+                TextField(
+                  controller: _urlCtrl,
+                  keyboardType: TextInputType.url,
+                  style: GoogleFonts.inter(fontSize: 14, color: const Color(0xFF0F172A)),
+                  decoration: InputDecoration(
+                    hintText: 'http://202.46.28.160:8080',
+                    hintStyle: GoogleFonts.inter(color: const Color(0xFFCBD5E1)),
+                    border: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: const BorderSide(color: Color(0xFFE2E8F0))),
+                    enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: const BorderSide(color: Color(0xFFE2E8F0))),
+                    focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(10), borderSide: const BorderSide(color: Color(0xFF1A56DB), width: 2)),
+                    contentPadding: const EdgeInsets.symmetric(horizontal: 14, vertical: 12),
+                  ),
+                  onChanged: (_) => setState(() { _connected = false; _errorMsg = null; }),
+                ),
+                const SizedBox(height: 16),
+
+                // Status
+                if (_errorMsg != null)
+                  Container(
+                    padding: const EdgeInsets.all(12),
+                    decoration: BoxDecoration(color: const Color(0xFFFEF2F2), borderRadius: BorderRadius.circular(8)),
+                    child: Row(children: [
+                      const Icon(Icons.error_outline, color: Color(0xFFDC2626), size: 18),
+                      const SizedBox(width: 8),
+                      Expanded(child: Text(_errorMsg!, style: GoogleFonts.inter(fontSize: 12, color: const Color(0xFFDC2626)))),
+                    ]),
+                  ),
+                if (_connected && _serverInfo != null)
+                  Container(
+                    padding: const EdgeInsets.all(12),
+                    decoration: BoxDecoration(color: const Color(0xFFF0FDF4), borderRadius: BorderRadius.circular(8)),
+                    child: Row(children: [
+                      const Icon(Icons.check_circle_outline, color: Color(0xFF16A34A), size: 18),
+                      const SizedBox(width: 8),
+                      Expanded(child: Text(_serverInfo!, style: GoogleFonts.inter(fontSize: 12, color: const Color(0xFF16A34A)))),
+                    ]),
+                  ),
+                const SizedBox(height: 20),
+
+                // Test button
+                SizedBox(
+                  width: double.infinity, height: 44,
+                  child: OutlinedButton(
+                    onPressed: _testing ? null : _testConnection,
+                    style: OutlinedButton.styleFrom(
+                      side: const BorderSide(color: Color(0xFF1A56DB)),
+                      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+                    ),
+                    child: _testing
+                      ? const SizedBox(width: 18, height: 18, child: CircularProgressIndicator(strokeWidth: 2))
+                      : Text('Test Connection', style: GoogleFonts.inter(fontSize: 14, fontWeight: FontWeight.w500, color: const Color(0xFF1A56DB))),
+                  ),
+                ),
+                const SizedBox(height: 10),
+
+                // Continue button (only after successful test)
+                if (_connected)
+                  SizedBox(
+                    width: double.infinity, height: 44,
+                    child: ElevatedButton(
+                      onPressed: _continueToApp,
+                      style: ElevatedButton.styleFrom(
+                        backgroundColor: const Color(0xFF1A56DB),
+                        shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
+                      ),
+                      child: Text('Continue to App', style: GoogleFonts.inter(fontSize: 14, fontWeight: FontWeight.w600, color: Colors.white)),
+                    ),
+                  ),
+
+                const SizedBox(height: 24),
+                Center(child: Text('v1.0.0 · For Testing Purposes', style: GoogleFonts.inter(fontSize: 11, color: const Color(0xFFCBD5E1)))),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

walkguide-mobile/walkguide_app/lib/features/walk_guide/walk_guide_screen.dart

@@ -0,0 +1,137 @@
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:google_fonts/google_fonts.dart';
+import '../../core/services/voice_command_handler.dart';
+import '../../core/services/stt_service.dart';
+import '../../core/services/tts_service.dart';
+import '../../injection_container.dart';
+
+class UserShell extends StatefulWidget {
+  final Widget child;
+  const UserShell({super.key, required this.child});
+  @override
+  State<UserShell> createState() => _UserShellState();
+}
+
+class _UserShellState extends State<UserShell> {
+
+  @override
+  void initState() {
+    super.initState();
+    _startVoiceListening();
+    _setupVoiceCommands();
+  }
+
+  void _startVoiceListening() {
+    sl<SttService>().startListening();
+  }
+
+  void _setupVoiceCommands() {
+    sl<VoiceCommandHandler>().onCommand = (key) {
+      if (!mounted) return;
+      switch (key) {
+        case VoiceCommandKey.openWalkguide:
+          context.go('/user/walkguide');
+          sl<TtsService>().speak('Walkguide menu opened');
+          break;
+        case VoiceCommandKey.openNotification:
+          context.go('/user/notifications');
+          sl<TtsService>().speak('Notifications opened');
+          break;
+        case VoiceCommandKey.openSos:
+          context.go('/user/sos');
+          sl<TtsService>().speak('SOS menu opened');
+          break;
+        case VoiceCommandKey.openActivity:
+          context.go('/user/activity');
+          sl<TtsService>().speak('Activity log opened');
+          break;
+        case VoiceCommandKey.openNavigation:
+          context.go('/user/navigation');
+          sl<TtsService>().speak('Navigation mode opened');
+          break;
+        case VoiceCommandKey.openSettings:
+          context.go('/user/settings');
+          sl<TtsService>().speak('Settings opened');
+          break;
+        case VoiceCommandKey.callGuardian:
+          context.go('/user/call');
+          break;
+        case VoiceCommandKey.sendSos:
+        case VoiceCommandKey.whereAmI:
+        case VoiceCommandKey.startWalkguide:
+        case VoiceCommandKey.stopWalkguide:
+        case VoiceCommandKey.readAllNotif:
+          // These are handled by individual screens
+          break;
+        default:
+          break;
+      }
+    };
+  }
+
+  int _tabFromLocation(String location) {
+    if (location.startsWith('/user/walkguide')) return 0;
+    if (location.startsWith('/user/sos'))       return 1;
+    if (location.startsWith('/user/activity'))  return 2;
+    if (location.startsWith('/user/notifications')) return 3;
+    if (location.startsWith('/user/navigation')) return 4;
+    return 5;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final location = GoRouterState.of(context).matchedLocation;
+    final currentTab = _tabFromLocation(location);
+
+    // Hide bottom nav during full-screen screens
+    final hideNav = location.startsWith('/user/call') || location.startsWith('/user/pairing');
+
+    return Scaffold(
+      body: widget.child,
+      bottomNavigationBar: hideNav ? null : Container(
+        decoration: BoxDecoration(
+          color: Colors.white,
+          boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.08), blurRadius: 20, offset: const Offset(0, -4))],
+        ),
+        child: SafeArea(
+          child: Padding(
+            padding: const EdgeInsets.symmetric(vertical: 8),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceAround,
+              children: [
+                _navItem(context, 0, currentTab, Icons.remove_red_eye_outlined, Icons.remove_red_eye, 'Guide', '/user/walkguide'),
+                _navItem(context, 1, currentTab, Icons.warning_amber_outlined, Icons.warning_amber, 'SOS', '/user/sos'),
+                _navItem(context, 2, currentTab, Icons.list_alt_outlined, Icons.list_alt, 'Activity', '/user/activity'),
+                _navItem(context, 3, currentTab, Icons.notifications_outlined, Icons.notifications, 'Notif', '/user/notifications'),
+                _navItem(context, 4, currentTab, Icons.map_outlined, Icons.map, 'Navigate', '/user/navigation'),
+                _navItem(context, 5, currentTab, Icons.settings_outlined, Icons.settings, 'Settings', '/user/settings'),
+              ],
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+
+  Widget _navItem(BuildContext ctx, int idx, int current, IconData icon, IconData activeIcon, String label, String route) {
+    final active = idx == current;
+    return GestureDetector(
+      onTap: () => ctx.go(route),
+      child: AnimatedContainer(
+        duration: const Duration(milliseconds: 200),
+        padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
+        decoration: BoxDecoration(
+          color: active ? const Color(0xFFEFF6FF) : Colors.transparent,
+          borderRadius: BorderRadius.circular(10),
+        ),
+        child: Column(mainAxisSize: MainAxisSize.min, children: [
+          Icon(active ? activeIcon : icon, size: 22, color: active ? const Color(0xFF1A56DB) : const Color(0xFF94A3B8)),
+          const SizedBox(height: 3),
+          Text(label, style: GoogleFonts.inter(fontSize: 10, fontWeight: active ? FontWeight.w600 : FontWeight.w400,
+            color: active ? const Color(0xFF1A56DB) : const Color(0xFF94A3B8))),
+        ]),
+      ),
+    );
+  }
+}