first week update

This commit is contained in:
Wowieee4
2026-04-22 21:25:02 +07:00
parent 760bb2de66
commit ff76abbbf6
9 changed files with 347 additions and 143 deletions
@@ -1,21 +1,40 @@
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:animate_do/animate_do.dart';
import '../../../core/secure_storage.dart';
import '../../auth/presentation/login_screen.dart';
class GuardianDashboardScreen extends StatelessWidget {
const GuardianDashboardScreen({super.key});
Future<void> _handleLogout(BuildContext context) async {
await SecureStorage().deleteToken();
if (context.mounted) {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (_) => const LoginScreen()),
(route) => false, // Bersihin tumpukan screen
);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF8FAFC), // Warna background abu-abu sangat muda (modern)
backgroundColor: const Color(0xFFF8FAFC),
appBar: AppBar(
backgroundColor: Colors.white,
backgroundColor: Colors.transparent,
elevation: 0,
title: Text('Guardian Command', style: GoogleFonts.outfit(color: const Color(0xFF0F172A), fontWeight: FontWeight.bold)),
title: FadeInDown(
child: Text('Guardian Command', style: GoogleFonts.outfit(color: const Color(0xFF0F172A), fontWeight: FontWeight.bold, fontSize: 24)),
),
actions: [
IconButton(
icon: const Icon(Icons.notifications_none_rounded, color: Color(0xFF0F172A)),
onPressed: () {},
FadeInDown(
child: IconButton(
icon: const Icon(Icons.logout_rounded, color: Color(0xFFDC2626)),
tooltip: 'Logout',
onPressed: () => _handleLogout(context),
),
),
],
),
@@ -24,76 +43,93 @@ class GuardianDashboardScreen extends StatelessWidget {
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 1. KARTU STATUS USER (Hero Card)
Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [Color(0xFF2563EB), Color(0xFF1D4ED8)]),
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(color: const Color(0xFF2563EB).withOpacity(0.3), blurRadius: 20, offset: const Offset(0, 10))
],
),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(4),
decoration: const BoxDecoration(color: Colors.white24, shape: BoxShape.circle),
child: const CircleAvatar(
radius: 30,
backgroundColor: Colors.white,
child: Icon(Icons.person, size: 36, color: Color(0xFF2563EB)),
// 1. KARTU STATUS USER
FadeInUp(
duration: const Duration(milliseconds: 600),
child: Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
gradient: const LinearGradient(colors: [Color(0xFF2563EB), Color(0xFF1D4ED8)]),
borderRadius: BorderRadius.circular(24),
boxShadow: [
BoxShadow(color: const Color(0xFF2563EB).withValues(alpha: 0.3), blurRadius: 20, offset: const Offset(0, 10))
],
),
child: Row(
children: [
Container(
padding: const EdgeInsets.all(4),
decoration: const BoxDecoration(color: Colors.white24, shape: BoxShape.circle),
child: const CircleAvatar(
radius: 30,
backgroundColor: Colors.white,
child: Icon(Icons.person, size: 36, color: Color(0xFF2563EB)),
),
),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('User Pantauan', style: GoogleFonts.inter(color: Colors.blue[100], fontSize: 14)),
Text('Sedang Berjalan', style: GoogleFonts.outfit(color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
Row(
children: [
const Icon(Icons.location_on, color: Colors.white70, size: 16),
const SizedBox(width: 4),
Text('Jl. Kenangan, SBY', style: GoogleFonts.inter(color: Colors.white70, fontSize: 12)),
],
),
],
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('User Pantauan', style: GoogleFonts.inter(color: Colors.blue[100], fontSize: 14)),
Text('Sistem Aktif', style: GoogleFonts.outfit(color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold)),
const SizedBox(height: 8),
Row(
children: [
const Icon(Icons.location_on, color: Colors.white70, size: 16),
const SizedBox(width: 4),
Text('Melacak lokasi...', style: GoogleFonts.inter(color: Colors.white70, fontSize: 12)),
],
),
],
),
),
),
],
],
),
),
),
const SizedBox(height: 32),
// 2. QUICK ACTIONS
Text('Aksi Cepat', style: GoogleFonts.outfit(fontSize: 18, fontWeight: FontWeight.bold, color: const Color(0xFF0F172A))),
FadeInUp(
delay: const Duration(milliseconds: 200),
child: Text('Aksi Cepat', style: GoogleFonts.outfit(fontSize: 18, fontWeight: FontWeight.bold, color: const Color(0xFF0F172A))),
),
const SizedBox(height: 16),
Row(
children: [
_buildQuickAction(Icons.videocam_outlined, 'Live View', const Color(0xFF10B981)),
const SizedBox(width: 16),
_buildQuickAction(Icons.phone_in_talk, 'Hubungi', const Color(0xFFF59E0B)),
const SizedBox(width: 16),
_buildQuickAction(Icons.settings_voice, 'Voice Conf', const Color(0xFF8B5CF6)),
],
FadeInUp(
delay: const Duration(milliseconds: 300),
child: Row(
children: [
_buildQuickAction(Icons.videocam_outlined, 'Live View', const Color(0xFF10B981)),
const SizedBox(width: 16),
_buildQuickAction(Icons.phone_in_talk, 'Hubungi', const Color(0xFFF59E0B)),
const SizedBox(width: 16),
_buildQuickAction(Icons.settings_voice, 'Voice Conf', const Color(0xFF8B5CF6)),
],
),
),
const SizedBox(height: 32),
// 3. SETTINGAN DEVICE USER (Persiapan buat fitur shortcut lu)
Text('Konfigurasi Perangkat', style: GoogleFonts.outfit(fontSize: 18, fontWeight: FontWeight.bold, color: const Color(0xFF0F172A))),
// 3. SETTINGAN DEVICE USER
FadeInUp(
delay: const Duration(milliseconds: 400),
child: Text('Konfigurasi Perangkat', style: GoogleFonts.outfit(fontSize: 18, fontWeight: FontWeight.bold, color: const Color(0xFF0F172A))),
),
const SizedBox(height: 16),
_buildSettingTile(Icons.gamepad_outlined, 'Hardware Shortcuts', 'Atur fungsi tombol volume hp user'),
_buildSettingTile(Icons.spatial_audio_outlined, 'Sensitivitas AI', 'Atur jarak deteksi rintangan'),
FadeInUp(
delay: const Duration(milliseconds: 500),
child: _buildSettingTile(Icons.gamepad_outlined, 'Hardware Shortcuts', 'Atur fungsi tombol volume hp user'),
),
FadeInUp(
delay: const Duration(milliseconds: 600),
child: _buildSettingTile(Icons.spatial_audio_outlined, 'Sensitivitas AI', 'Atur jarak deteksi rintangan'),
),
],
),
),
);
}
// Widget bantuan buat Bikin Kotak Menu
Widget _buildQuickAction(IconData icon, String label, Color color) {
return Expanded(
child: Container(
@@ -101,8 +137,8 @@ class GuardianDashboardScreen extends StatelessWidget {
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: Colors.grey.withOpacity(0.1)),
boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.02), blurRadius: 10)],
border: Border.all(color: Colors.grey.withValues(alpha: 0.1)),
boxShadow: [BoxShadow(color: Colors.black.withValues(alpha: 0.02), blurRadius: 10, offset: const Offset(0, 4))],
),
child: Column(
children: [
@@ -115,14 +151,14 @@ class GuardianDashboardScreen extends StatelessWidget {
);
}
// Widget bantuan buat Bikin List Setting
Widget _buildSettingTile(IconData icon, String title, String subtitle) {
return Container(
margin: const EdgeInsets.only(bottom: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
border: Border.all(color: Colors.grey.withOpacity(0.1)),
border: Border.all(color: Colors.grey.withValues(alpha: 0.1)),
boxShadow: [BoxShadow(color: Colors.black.withValues(alpha: 0.02), blurRadius: 8, offset: const Offset(0, 2))],
),
child: ListTile(
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
@@ -134,7 +170,7 @@ class GuardianDashboardScreen extends StatelessWidget {
title: Text(title, style: GoogleFonts.inter(fontWeight: FontWeight.w600, color: const Color(0xFF0F172A))),
subtitle: Text(subtitle, style: GoogleFonts.inter(fontSize: 13, color: const Color(0xFF64748B))),
trailing: const Icon(Icons.arrow_forward_ios, size: 16, color: Color(0xFFCBD5E1)),
onTap: () {}, // Nanti kita arahin ke halaman setting
onTap: () {},
),
);
}
@@ -1,231 +0,0 @@
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:dio/dio.dart';
import '../../../core/api_service.dart';
import '../../../core/secure_storage.dart';
import '../../home/presentation/guardian_dashboard_screen.dart';
import '../../home/presentation/user_dashboard_screen.dart';
class LoginScreen extends StatefulWidget {
const LoginScreen({super.key});
@override
State<LoginScreen> createState() => _LoginScreenState();
}
class _LoginScreenState extends State<LoginScreen> {
final TextEditingController _emailController = TextEditingController();
final TextEditingController _passwordController = TextEditingController();
final ApiService _apiService = ApiService();
final SecureStorage _secureStorage = SecureStorage();
bool _isLoading = false;
bool _isPasswordVisible = false;
Future<void> _handleLogin() async {
setState(() => _isLoading = true);
try {
final response = await _apiService.post('/auth/login', {
'email': _emailController.text.trim(),
'password': _passwordController.text.trim(),
});
if (response.statusCode == 200) {
// Ekstraksi data dari ApiResponse wrapper (success, data, message)
final responseBody = response.data;
if (responseBody['success'] == true) {
final userData = responseBody['data'];
final String token = userData['token'];
final String role = userData['role'];
// Simpan token ke storage aman
await _secureStorage.saveToken(token);
// Routing berdasarkan Role
if (mounted) {
if (role == 'ROLE_GUARDIAN') {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (_) => const GuardianDashboardScreen()),
);
} else {
Navigator.pushReplacement(
context,
MaterialPageRoute(builder: (_) => const UserDashboardScreen()),
);
}
}
} else {
throw Exception(responseBody['message'] ?? 'Login gagal');
}
}
} on DioException catch (e) {
if (mounted) {
// Ambil pesan error dari GlobalExceptionHandler di Spring Boot
String errorMsg = 'Gagal Terhubung ke Server';
if (e.response?.data != null && e.response?.data is Map) {
errorMsg = e.response?.data['message'] ?? errorMsg;
}
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text(errorMsg),
backgroundColor: Colors.redAccent,
behavior: SnackBarBehavior.floating,
),
);
}
} catch (e) {
if (mounted) {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(content: Text(e.toString())),
);
}
} finally {
setState(() => _isLoading = false);
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFFF8FAFC),
body: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 32.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Logo/Icon Header
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color(0xFF2563EB).withValues(alpha: 0.1),
shape: BoxShape.circle,
),
child: const Icon(
Icons.navigation_rounded,
size: 48,
color: Color(0xFF2563EB)
),
),
const SizedBox(height: 24),
Text(
'Walk Guide',
style: GoogleFonts.outfit(
fontSize: 32,
fontWeight: FontWeight.bold,
color: const Color(0xFF0F172A)
),
),
const SizedBox(height: 8),
Text(
'Masuk untuk mulai navigasi',
style: GoogleFonts.inter(
fontSize: 15,
color: const Color(0xFF64748B)
),
),
const SizedBox(height: 40),
// Input Fields
_buildTextField(
_emailController,
Icons.alternate_email,
'Email',
false
),
const SizedBox(height: 20),
_buildTextField(
_passwordController,
Icons.lock_outline,
'Password',
true
),
const SizedBox(height: 48),
// Button Masuk
SizedBox(
width: double.infinity,
height: 56,
child: ElevatedButton(
onPressed: _isLoading ? null : _handleLogin,
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF2563EB),
foregroundColor: Colors.white,
elevation: 0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16)
),
),
child: _isLoading
? const SizedBox(
height: 24,
width: 24,
child: CircularProgressIndicator(
color: Colors.white,
strokeWidth: 2
),
)
: Text(
'Masuk',
style: GoogleFonts.inter(
fontSize: 16,
fontWeight: FontWeight.w600
)
),
),
),
],
),
),
),
);
}
Widget _buildTextField(
TextEditingController controller,
IconData icon,
String hint,
bool isPassword
) {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.02),
blurRadius: 10,
offset: const Offset(0, 4)
)
],
),
child: TextField(
controller: controller,
obscureText: isPassword && !_isPasswordVisible,
style: GoogleFonts.inter(fontSize: 15),
decoration: InputDecoration(
hintText: hint,
hintStyle: const TextStyle(color: Color(0xFF94A3B8)),
prefixIcon: Icon(icon, color: const Color(0xFF94A3B8)),
suffixIcon: isPassword
? IconButton(
icon: Icon(
_isPasswordVisible ? Icons.visibility_off : Icons.visibility,
color: const Color(0xFF94A3B8)
),
onPressed: () => setState(() => _isPasswordVisible = !_isPasswordVisible),
)
: null,
border: InputBorder.none,
contentPadding: const EdgeInsets.symmetric(horizontal: 20, vertical: 18),
),
),
);
}
}
@@ -1,103 +1,167 @@
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:camera/camera.dart';
import 'package:animate_do/animate_do.dart';
import '../../../core/secure_storage.dart';
import '../../auth/presentation/login_screen.dart';
import '../../../../main.dart'; // import global cameras
class UserDashboardScreen extends StatelessWidget {
class UserDashboardScreen extends StatefulWidget {
const UserDashboardScreen({super.key});
@override
State<UserDashboardScreen> createState() => _UserDashboardScreenState();
}
class _UserDashboardScreenState extends State<UserDashboardScreen> with SingleTickerProviderStateMixin {
CameraController? _cameraController;
late AnimationController _pulseController;
@override
void initState() {
super.initState();
_initCamera();
// Setup animasi radar berdenyut
_pulseController = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
)..repeat(reverse: true);
}
Future<void> _initCamera() async {
if (cameras.isEmpty) return;
// Pakai kamera belakang (index 0)
_cameraController = CameraController(cameras[0], ResolutionPreset.high, enableAudio: false);
await _cameraController!.initialize();
if (mounted) setState(() {});
}
Future<void> _handleLogout() async {
await SecureStorage().deleteToken();
if (mounted) {
Navigator.pushAndRemoveUntil(
context,
MaterialPageRoute(builder: (_) => const LoginScreen()),
(route) => false, // Hapus history back
);
}
}
@override
void dispose() {
_cameraController?.dispose();
_pulseController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black, // Background hitam buat area kamera
backgroundColor: Colors.black,
body: Stack(
children: [
// 1. AREA KAMERA FULL SCREEN (Placeholder)
// 1. LIVE CAMERA FEED
SizedBox.expand(
child: _cameraController != null && _cameraController!.value.isInitialized
? CameraPreview(_cameraController!)
: const Center(child: CircularProgressIndicator(color: Colors.white)),
),
// 2. EFEK RADAR SCANNING (Animasi Pulse)
Positioned.fill(
child: Container(
color: Colors.grey[900],
child: const Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.camera_alt_outlined, color: Colors.white54, size: 64),
SizedBox(height: 16),
Text('Kamera Aktif\nMemindai Rintangan...',
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white54, fontSize: 18),
child: AnimatedBuilder(
animation: _pulseController,
builder: (context, child) {
return Container(
decoration: BoxDecoration(
gradient: RadialGradient(
colors: [
Colors.transparent,
const Color(0xFF10B981).withValues(alpha: 0.1 + (_pulseController.value * 0.15)),
],
stops: const [0.5, 1.0],
radius: 1.5,
),
],
),
),
),
);
},
),
),
// 2. OVERLAY INFORMASI ATAS
// 3. OVERLAY STATUS & LOGOUT (Atas)
Positioned(
top: 60,
left: 20,
right: 20,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.6),
borderRadius: BorderRadius.circular(16),
),
child: FadeInDown(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
const Icon(Icons.spatial_audio_off, color: Colors.greenAccent, size: 24),
const SizedBox(width: 8),
Text('Sistem Siap', style: GoogleFonts.inter(color: Colors.white, fontWeight: FontWeight.bold)),
],
Container(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: Colors.black.withValues(alpha: 0.6),
borderRadius: BorderRadius.circular(30),
border: Border.all(color: const Color(0xFF10B981).withValues(alpha: 0.3)),
),
child: Row(
children: [
const Icon(Icons.spatial_audio_off, color: Color(0xFF10B981), size: 20),
const SizedBox(width: 8),
Text('Memindai Area...', style: GoogleFonts.inter(color: Colors.white, fontWeight: FontWeight.bold)),
],
),
),
// Tombol Logout
IconButton(
onPressed: _handleLogout,
icon: const Icon(Icons.power_settings_new, color: Colors.white, size: 28),
tooltip: 'Keluar',
style: IconButton.styleFrom(backgroundColor: Colors.redAccent.withValues(alpha: 0.8)),
),
const Icon(Icons.battery_4_bar, color: Colors.white),
],
),
),
),
// 3. OVERLAY TOMBOL BAWAH (Gede & Kontras)
// 4. OVERLAY TOMBOL BESAR (Bawah)
Positioned(
bottom: 40,
left: 20,
right: 20,
child: Row(
children: [
// Tombol Voice Command
Expanded(
child: Semantics(
label: 'Tombol Perintah Suara',
hint: 'Tekan dua kali untuk memberikan perintah suara',
child: FadeInUp(
delay: const Duration(milliseconds: 300),
child: Row(
children: [
Expanded(
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFF2563EB), // Biru terang
backgroundColor: const Color(0xFF2563EB).withValues(alpha: 0.9),
padding: const EdgeInsets.symmetric(vertical: 24),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
elevation: 10,
),
child: const Icon(Icons.mic, size: 40, color: Colors.white),
child: const Icon(Icons.mic, size: 48, color: Colors.white),
),
),
),
const SizedBox(width: 16),
// Tombol Call Guardian
Expanded(
child: Semantics(
label: 'Panggil Pendamping',
hint: 'Tekan dua kali untuk menelepon pendamping Anda',
const SizedBox(width: 16),
Expanded(
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFDC2626), // Merah peringatan
backgroundColor: const Color(0xFFDC2626).withValues(alpha: 0.9),
padding: const EdgeInsets.symmetric(vertical: 24),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
elevation: 10,
),
child: const Icon(Icons.phone_in_talk, size: 40, color: Colors.white),
child: const Icon(Icons.phone_in_talk, size: 48, color: Colors.white),
),
),
),
],
],
),
),
),
],