2025-09-20 03:12:32 +07:00

792 lines
24 KiB
Dart

import 'dart:async';
import 'package:enaklo_pos/core/extensions/build_context_ext.dart';
import 'package:enaklo_pos/presentation/home/pages/dashboard_page.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import '../../../core/components/buttons.dart';
import '../../../core/constants/colors.dart';
import '../bloc/data_sync_bloc.dart';
class DataSyncPage extends StatefulWidget {
const DataSyncPage({super.key});
@override
State<DataSyncPage> createState() => _DataSyncPageState();
}
class _DataSyncPageState extends State<DataSyncPage>
with TickerProviderStateMixin {
late AnimationController _animationController;
late Animation<double> _progressAnimation;
@override
void initState() {
super.initState();
_animationController = AnimationController(
duration: Duration(milliseconds: 500),
vsync: this,
);
_progressAnimation = Tween<double>(
begin: 0.0,
end: 1.0,
).animate(CurvedAnimation(
parent: _animationController,
curve: Curves.easeInOut,
));
// Auto start sync
WidgetsBinding.instance.addPostFrameCallback((_) {
context.read<DataSyncBloc>().add(const DataSyncEvent.startSync());
});
}
@override
void dispose() {
_animationController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
final mediaQuery = MediaQuery.of(context);
final isLandscape = mediaQuery.orientation == Orientation.landscape;
final screenHeight = mediaQuery.size.height;
final screenWidth = mediaQuery.size.width;
return Scaffold(
backgroundColor: Colors.grey.shade50,
body: SafeArea(
child: BlocConsumer<DataSyncBloc, DataSyncState>(
listener: (context, state) {
state.maybeWhen(
orElse: () {},
syncing: (step, progress, message) {
_animationController.animateTo(progress);
},
completed: (stats) {
_animationController.animateTo(1.0);
// Navigate to home after delay
Future.delayed(Duration(seconds: 2), () {
context.pushReplacement(DashboardPage());
});
},
error: (message) {
_animationController.stop();
},
);
},
builder: (context, state) {
if (isLandscape) {
return _buildLandscapeLayout(state, screenWidth, screenHeight);
} else {
return _buildPortraitLayout(state, screenHeight);
}
},
),
),
);
}
// Portrait layout (original)
Widget _buildPortraitLayout(DataSyncState state, double screenHeight) {
return Padding(
padding: EdgeInsets.all(24),
child: Column(
children: [
SizedBox(height: screenHeight * 0.08), // Responsive spacing
// Header
_buildHeader(false),
SizedBox(height: screenHeight * 0.08),
// Sync progress
Expanded(
child: state.when(
initial: () => _buildInitialState(false),
syncing: (step, progress, message) =>
_buildSyncingState(step, progress, message, false),
completed: (stats) => _buildCompletedState(stats, false),
error: (message) => _buildErrorState(message, false),
),
),
SizedBox(height: 20),
// Actions
_buildActions(state),
],
),
);
}
// Landscape layout (side by side)
Widget _buildLandscapeLayout(
DataSyncState state, double screenWidth, double screenHeight) {
return Padding(
padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),
child: Row(
children: [
// Left side - Header and info
Expanded(
flex: 2,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_buildHeader(true),
SizedBox(height: 20),
_buildActions(state),
],
),
),
SizedBox(width: 40),
// Right side - Sync progress
Expanded(
flex: 3,
child: Container(
height: screenHeight * 0.8,
child: state.when(
initial: () => _buildInitialState(true),
syncing: (step, progress, message) =>
_buildSyncingState(step, progress, message, true),
completed: (stats) => _buildCompletedState(stats, true),
error: (message) => _buildErrorState(message, true),
),
),
),
],
),
);
}
Widget _buildHeader(bool isLandscape) {
return Column(
children: [
Container(
width: isLandscape ? 60 : 80,
height: isLandscape ? 60 : 80,
decoration: BoxDecoration(
color: AppColors.primary.withOpacity(0.1),
borderRadius: BorderRadius.circular(isLandscape ? 15 : 20),
),
child: Icon(
Icons.sync,
size: isLandscape ? 30 : 40,
color: AppColors.primary,
),
),
SizedBox(height: isLandscape ? 12 : 20),
Text(
'Sinkronisasi Data',
style: TextStyle(
fontSize: isLandscape ? 20 : 24,
fontWeight: FontWeight.bold,
color: Colors.grey.shade800,
),
),
SizedBox(height: isLandscape ? 4 : 8),
Text(
'Mengunduh data terbaru ke perangkat',
style: TextStyle(
fontSize: isLandscape ? 14 : 16,
color: Colors.grey.shade600,
),
textAlign: TextAlign.center,
),
],
);
}
Widget _buildInitialState(bool isLandscape) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.download_rounded,
size: isLandscape ? 48 : 64,
color: Colors.grey.shade400,
),
SizedBox(height: isLandscape ? 12 : 20),
Text(
'Siap untuk sinkronisasi',
style: TextStyle(
fontSize: isLandscape ? 16 : 18,
fontWeight: FontWeight.w500,
),
),
SizedBox(height: isLandscape ? 4 : 8),
Text(
'Tekan tombol mulai untuk mengunduh data',
style: TextStyle(
fontSize: isLandscape ? 12 : 14,
color: Colors.grey.shade600,
),
textAlign: TextAlign.center,
),
],
);
}
Widget _buildSyncingState(
SyncStep step, double progress, String message, bool isLandscape) {
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Progress circle
Stack(
alignment: Alignment.center,
children: [
SizedBox(
width: isLandscape ? 100 : 120,
height: isLandscape ? 100 : 120,
child: AnimatedBuilder(
animation: _progressAnimation,
builder: (context, child) {
return CircularProgressIndicator(
value: _progressAnimation.value,
strokeWidth: isLandscape ? 6 : 8,
backgroundColor: Colors.grey.shade200,
valueColor:
AlwaysStoppedAnimation<Color>(AppColors.primary),
);
},
),
),
Column(
children: [
Icon(
_getSyncIcon(step),
size: isLandscape ? 24 : 32,
color: AppColors.primary,
),
SizedBox(height: 2),
AnimatedBuilder(
animation: _progressAnimation,
builder: (context, child) {
return Text(
'${(_progressAnimation.value * 100).toInt()}%',
style: TextStyle(
fontSize: isLandscape ? 14 : 16,
fontWeight: FontWeight.bold,
color: AppColors.primary,
),
);
},
),
],
),
],
),
SizedBox(height: isLandscape ? 20 : 30),
// Step indicator
_buildStepIndicator(step, isLandscape),
SizedBox(height: isLandscape ? 12 : 20),
// Current message
Container(
padding: EdgeInsets.symmetric(
horizontal: isLandscape ? 16 : 20,
vertical: isLandscape ? 8 : 12),
decoration: BoxDecoration(
color: Colors.blue.shade50,
borderRadius: BorderRadius.circular(8),
),
child: Text(
message,
style: TextStyle(
color: Colors.blue.shade700,
fontSize: isLandscape ? 12 : 14,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
),
),
SizedBox(height: isLandscape ? 12 : 20),
// Sync details
_buildSyncDetails(step, progress, isLandscape),
],
),
);
}
Widget _buildStepIndicator(SyncStep currentStep, bool isLandscape) {
final steps = [
('Produk', SyncStep.products, Icons.inventory_2),
('Kategori', SyncStep.categories, Icons.category),
('Variant', SyncStep.variants, Icons.tune),
('Selesai', SyncStep.completed, Icons.check_circle),
];
if (isLandscape) {
// Vertical layout for landscape
return Column(
children: steps.map((stepData) {
final (label, step, icon) = stepData;
final isActive = step == currentStep;
final isCompleted = step.index < currentStep.index;
return Container(
margin: EdgeInsets.symmetric(vertical: 2),
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: isActive
? AppColors.primary.withOpacity(0.1)
: isCompleted
? Colors.green.shade50
: Colors.grey.shade100,
borderRadius: BorderRadius.circular(6),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
isCompleted ? Icons.check : icon,
size: 12,
color: isActive
? AppColors.primary
: isCompleted
? Colors.green.shade600
: Colors.grey.shade500,
),
SizedBox(width: 4),
Text(
label,
style: TextStyle(
fontSize: 10,
fontWeight: isActive ? FontWeight.w600 : FontWeight.normal,
color: isActive
? AppColors.primary
: isCompleted
? Colors.green.shade600
: Colors.grey.shade600,
),
),
],
),
);
}).toList(),
);
} else {
// Horizontal layout for portrait
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: steps.map((stepData) {
final (label, step, icon) = stepData;
final isActive = step == currentStep;
final isCompleted = step.index < currentStep.index;
return Container(
margin: EdgeInsets.symmetric(horizontal: 4),
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: isActive
? AppColors.primary.withOpacity(0.1)
: isCompleted
? Colors.green.shade50
: Colors.grey.shade100,
borderRadius: BorderRadius.circular(6),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
isCompleted ? Icons.check : icon,
size: 14,
color: isActive
? AppColors.primary
: isCompleted
? Colors.green.shade600
: Colors.grey.shade500,
),
SizedBox(width: 4),
Text(
label,
style: TextStyle(
fontSize: 11,
fontWeight: isActive ? FontWeight.w600 : FontWeight.normal,
color: isActive
? AppColors.primary
: isCompleted
? Colors.green.shade600
: Colors.grey.shade600,
),
),
],
),
);
}).toList(),
);
}
}
Widget _buildSyncDetails(SyncStep step, double progress, bool isLandscape) {
return Container(
padding: EdgeInsets.all(isLandscape ? 12 : 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(8),
border: Border.all(color: Colors.grey.shade200),
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Status:',
style: TextStyle(
fontSize: isLandscape ? 12 : 14,
fontWeight: FontWeight.w500,
color: Colors.grey.shade700,
),
),
Text(
_getStepLabel(step),
style: TextStyle(
fontSize: isLandscape ? 12 : 14,
fontWeight: FontWeight.w600,
color: AppColors.primary,
),
),
],
),
SizedBox(height: isLandscape ? 6 : 8),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Progress:',
style: TextStyle(
fontSize: isLandscape ? 12 : 14,
fontWeight: FontWeight.w500,
color: Colors.grey.shade700,
),
),
Text(
'${(progress * 100).toInt()}%',
style: TextStyle(
fontSize: isLandscape ? 12 : 14,
fontWeight: FontWeight.w600,
color: AppColors.primary,
),
),
],
),
],
),
);
}
Widget _buildCompletedState(SyncStats stats, bool isLandscape) {
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Success icon
Container(
width: isLandscape ? 80 : 100,
height: isLandscape ? 80 : 100,
decoration: BoxDecoration(
color: Colors.green.shade50,
borderRadius: BorderRadius.circular(isLandscape ? 40 : 50),
),
child: Icon(
Icons.check_circle,
size: isLandscape ? 48 : 60,
color: Colors.green.shade600,
),
),
SizedBox(height: isLandscape ? 20 : 30),
Text(
'Sinkronisasi Berhasil!',
style: TextStyle(
fontSize: isLandscape ? 18 : 22,
fontWeight: FontWeight.bold,
color: Colors.green.shade700,
),
),
SizedBox(height: isLandscape ? 8 : 16),
Text(
'Data berhasil diunduh ke perangkat',
style: TextStyle(
fontSize: isLandscape ? 14 : 16,
color: Colors.grey.shade600,
),
),
SizedBox(height: isLandscape ? 20 : 30),
// Stats cards
Container(
padding: EdgeInsets.all(isLandscape ? 16 : 20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.grey.shade200),
),
child: Column(
children: [
Text(
'Data yang Diunduh',
style: TextStyle(
fontSize: isLandscape ? 14 : 16,
fontWeight: FontWeight.w600,
color: Colors.grey.shade700,
),
),
SizedBox(height: isLandscape ? 12 : 16),
if (isLandscape)
// Vertical layout for landscape
Column(
children: [
_buildStatItem('Produk', '${stats.totalProducts}',
Icons.inventory_2, Colors.blue, isLandscape),
SizedBox(height: 8),
_buildStatItem('Kategori', '${stats.totalCategories}',
Icons.category, Colors.green, isLandscape),
SizedBox(height: 8),
_buildStatItem('Variant', '${stats.totalVariants}',
Icons.tune, Colors.orange, isLandscape),
],
)
else
// Horizontal layout for portrait
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildStatItem('Produk', '${stats.totalProducts}',
Icons.inventory_2, Colors.blue, isLandscape),
_buildStatItem('Kategori', '${stats.totalCategories}',
Icons.category, Colors.green, isLandscape),
_buildStatItem('Variant', '${stats.totalVariants}',
Icons.tune, Colors.orange, isLandscape),
],
),
],
),
),
SizedBox(height: isLandscape ? 12 : 20),
Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
decoration: BoxDecoration(
color: Colors.grey.shade100,
borderRadius: BorderRadius.circular(6),
),
child: Text(
'Mengalihkan ke halaman utama...',
style: TextStyle(
color: Colors.grey.shade600,
fontSize: isLandscape ? 10 : 12,
),
),
),
],
),
);
}
Widget _buildErrorState(String message, bool isLandscape) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.error_outline,
size: isLandscape ? 48 : 64,
color: Colors.red.shade400,
),
SizedBox(height: isLandscape ? 12 : 20),
Text(
'Sinkronisasi Gagal',
style: TextStyle(
fontSize: isLandscape ? 16 : 20,
fontWeight: FontWeight.bold,
color: Colors.red.shade600,
),
),
SizedBox(height: isLandscape ? 8 : 12),
Container(
padding: EdgeInsets.all(isLandscape ? 12 : 16),
decoration: BoxDecoration(
color: Colors.red.shade50,
borderRadius: BorderRadius.circular(8),
),
child: Text(
message,
style: TextStyle(
fontSize: isLandscape ? 12 : 14,
color: Colors.red.shade700,
),
textAlign: TextAlign.center,
),
),
SizedBox(height: isLandscape ? 12 : 20),
Text(
'Periksa koneksi internet dan coba lagi',
style: TextStyle(
fontSize: isLandscape ? 12 : 14,
color: Colors.grey.shade600,
),
textAlign: TextAlign.center,
),
],
);
}
Widget _buildStatItem(String label, String value, IconData icon, Color color,
bool isLandscape) {
if (isLandscape) {
// Horizontal layout for landscape
return Container(
padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, size: 20, color: color),
SizedBox(width: 8),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
value,
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: color,
),
),
Text(
label,
style: TextStyle(
fontSize: 10,
color: Colors.grey.shade600,
),
),
],
),
],
),
);
} else {
// Vertical layout for portrait
return Column(
children: [
Container(
padding: EdgeInsets.all(12),
decoration: BoxDecoration(
color: color.withOpacity(0.1),
borderRadius: BorderRadius.circular(8),
),
child: Icon(icon, size: 24, color: color),
),
SizedBox(height: 8),
Text(
value,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: color,
),
),
Text(
label,
style: TextStyle(
fontSize: 12,
color: Colors.grey.shade600,
),
),
],
);
}
}
Widget _buildActions(DataSyncState state) {
return state.when(
initial: () => Button.filled(
onPressed: () {
context.read<DataSyncBloc>().add(const DataSyncEvent.startSync());
},
label: 'Mulai Sinkronisasi',
),
syncing: (step, progress, message) => Button.outlined(
onPressed: () {
context.read<DataSyncBloc>().add(const DataSyncEvent.cancelSync());
},
label: 'Batalkan',
),
completed: (stats) => Button.filled(
onPressed: () {
context.pushReplacement(DashboardPage());
},
label: 'Lanjutkan ke Aplikasi',
),
error: (message) => Row(
children: [
Expanded(
child: Button.outlined(
onPressed: () {
context.pushReplacement(DashboardPage());
},
label: 'Lewati',
),
),
SizedBox(width: 16),
Expanded(
child: Button.filled(
onPressed: () {
context
.read<DataSyncBloc>()
.add(const DataSyncEvent.startSync());
},
label: 'Coba Lagi',
),
),
],
),
);
}
IconData _getSyncIcon(SyncStep step) {
switch (step) {
case SyncStep.products:
return Icons.inventory_2;
case SyncStep.categories:
return Icons.category;
case SyncStep.variants:
return Icons.tune;
case SyncStep.completed:
return Icons.check_circle;
}
}
String _getStepLabel(SyncStep step) {
switch (step) {
case SyncStep.products:
return 'Mengunduh Produk';
case SyncStep.categories:
return 'Mengunduh Kategori';
case SyncStep.variants:
return 'Mengunduh Variant';
case SyncStep.completed:
return 'Selesai';
}
}
}