apksel-dev/apskel-pos-flutter-v2
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

sync page

Browse Source
This commit is contained in:
efrilm
2025-10-24 23:20:41 +07:00
parent 6892895021
commit 79e109cfe4
10 changed files with 669 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/presentation/pages/sync/widgets/sync_state.dart
+242
View File
@@ -0,0 +1,242 @@
import 'package:flutter/material.dart';
import '../../../../application/sync/sync_bloc.dart';
import '../../../../common/theme/theme.dart';
class SyncStateWidget extends StatelessWidget {
final SyncStep step;
final double progress;
final String message;
final Animation<double> progressAnimation;
const SyncStateWidget({
super.key,
required this.step,
required this.progress,
required this.message,
required this.progressAnimation,
});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Progress circle
Stack(
alignment: Alignment.center,
children: [
SizedBox(
width: 100,
height: 100,
child: AnimatedBuilder(
animation: progressAnimation,
builder: (context, child) {
return CircularProgressIndicator(
value: progressAnimation.value,
strokeWidth: 6,
backgroundColor: Colors.grey.shade200,
valueColor: AlwaysStoppedAnimation<Color>(
AppColor.primary,
),
);
},
),
),
Column(
children: [
Icon(_getSyncIcon(step), size: 24, color: AppColor.primary),
SizedBox(height: 2),
AnimatedBuilder(
animation: progressAnimation,
builder: (context, child) {
return Text(
'${(progressAnimation.value * 100).toInt()}%',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: AppColor.primary,
),
);
},
),
],
),
],
),
SizedBox(height: 20),
// Step indicator
_buildStepIndicator(step),
SizedBox(height: 12),
// Current message
Container(
padding: EdgeInsets.symmetric(horizontal: 16, vertical: 12),
decoration: BoxDecoration(
color: Colors.blue.shade50,
borderRadius: BorderRadius.circular(8),
),
child: Text(
message,
style: TextStyle(
color: Colors.blue.shade700,
fontSize: 12,
fontWeight: FontWeight.w500,
),
textAlign: TextAlign.center,
),
),
SizedBox(height: 12),
// Sync details
_buildSyncDetails(step, progress),
],
),
);
}
Widget _buildSyncDetails(SyncStep step, double progress) {
return Container(
padding: EdgeInsets.all(12),
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: 12,
fontWeight: FontWeight.w500,
color: Colors.grey.shade700,
),
),
Text(
_getStepLabel(step),
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColor.primary,
),
),
],
),
SizedBox(height: 6),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'Progress:',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: Colors.grey.shade700,
),
),
Text(
'${(progress * 100).toInt()}%',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: AppColor.primary,
),
),
],
),
],
),
);
}
Widget _buildStepIndicator(SyncStep currentStep) {
final steps = [
('Kategori', SyncStep.categories, Icons.category),
('Produk', SyncStep.products, Icons.inventory_2),
('Variant', SyncStep.variants, Icons.tune),
('Selesai', SyncStep.completed, Icons.check_circle),
];
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
? AppColor.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
? AppColor.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
? AppColor.primary
: isCompleted
? Colors.green.shade600
: Colors.grey.shade600,
),
),
],
),
);
}).toList(),
);
}
IconData _getSyncIcon(SyncStep step) {
switch (step) {
case SyncStep.categories:
return Icons.category;
case SyncStep.products:
return Icons.inventory_2;
case SyncStep.variants:
return Icons.tune;
case SyncStep.completed:
return Icons.check_circle;
}
}
String _getStepLabel(SyncStep step) {
switch (step) {
case SyncStep.categories:
return 'Mengunduh Kategori';
case SyncStep.products:
return 'Mengunduh Produk';
case SyncStep.variants:
return 'Mengunduh Variant';
case SyncStep.completed:
return 'Selesai';
}
}
}