refactor(ui): Update some UI and fix some bugs

android/build.gradle

@@ -1,5 +1,5 @@
 buildscript {
-    ext.kotlin_version = '1.8.20'
+    ext.kotlin_version = '1.8.22'
     repositories {
         google()
         mavenCentral()

android/settings.gradle

@@ -1,11 +1,25 @@
-include ':app'
+pluginManagement {
-
+    def flutterSdkPath = {
-def localPropertiesFile = new File(rootProject.projectDir, "local.properties")
         def properties = new Properties()
-
+        file("local.properties").withInputStream { properties.load(it) }
-assert localPropertiesFile.exists()
-localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) }
-
         def flutterSdkPath = properties.getProperty("flutter.sdk")
         assert flutterSdkPath != null, "flutter.sdk not set in local.properties"
-apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle"
+        return flutterSdkPath
+    }()
+
+    includeBuild("$flutterSdkPath/packages/flutter_tools/gradle")
+
+    repositories {
+        google()
+        mavenCentral()
+        gradlePluginPortal()
+    }
+}
+
+plugins {
+    id "dev.flutter.flutter-plugin-loader" version "1.0.0"
+    id "com.android.application" version "8.2.1" apply false
+    id "org.jetbrains.kotlin.android" version "1.8.22" apply false
+}
+
+include ":app"

lib/bloc/devices_manager_bloc.dart

@@ -1,10 +1,9 @@
 import 'dart:async';
 import 'dart:convert';
 
-import 'package:sfm_app/product/constant/app/app_constants.dart';
-
 import '../feature/devices/device_model.dart';
 import '../product/base/bloc/base_bloc.dart';
+import '../product/constant/app/app_constants.dart';
 import '../product/services/api_services.dart';
 
 import '../product/utils/device_utils.dart';
@@ -26,11 +25,57 @@ class DevicesManagerBloc extends BlocBase {
   Stream<Map<String, List<Device>>> get streamDeviceByState =>
       deviceByState.stream;
 
+  final tagStates = StreamController<List<int>>.broadcast();
+  StreamSink<List<int>> get sinkTagStates => tagStates.sink;
+  Stream<List<int>> get streamTagStates => tagStates.stream;
+
   @override
   void dispose() {}
 
-  void getDevice() async {
+  // void getDevice() async {
-    String body = await apiServices.getOwnerDevices();
+  //   String body = await apiServices.getOwnerDevices();
+  //   Map<String, List<Device>> deviceByState = {
+  //     ApplicationConstants.OFFLINE_STATE: [],
+  //     ApplicationConstants.NORMAL_STATE: [],
+  //     ApplicationConstants.WARNING_STATE: [],
+  //     ApplicationConstants.INPROGRESS_STATE: [],
+  //     ApplicationConstants.ERROR_STATE: [],
+  //   };
+  //   if (body.isNotEmpty) {
+  //     final data = jsonDecode(body);
+  //     List<dynamic> items = data['items'];
+  //     List<Device> originalDevices = Device.fromJsonDynamicList(items);
+  //     List<Device> devices =
+  //         DeviceUtils.instance.sortDeviceByState(originalDevices);
+  //     for (var device in devices) {
+  //       String stateKey;
+  //       switch (device.state) {
+  //         case -1:
+  //           stateKey = ApplicationConstants.OFFLINE_STATE;
+  //           break;
+  //         case 0:
+  //           stateKey = ApplicationConstants.NORMAL_STATE;
+  //           break;
+  //         case 1:
+  //           stateKey = ApplicationConstants.WARNING_STATE;
+  //           break;
+  //         case 2:
+  //           stateKey = ApplicationConstants.INPROGRESS_STATE;
+  //           break;
+  //         default:
+  //           stateKey = ApplicationConstants.ERROR_STATE;
+  //           break;
+  //       }
+  //       deviceByState[stateKey]!.add(device);
+  //     }
+  //     sinkAllDevices.add(devices);
+  //     sinkDeviceByState.add(deviceByState);
+  //   }
+  // }
+
+  void getDeviceByState(int state) async {
+    sinkTagStates.add([state]);
+
     Map<String, List<Device>> deviceByState = {
       ApplicationConstants.OFFLINE_STATE: [],
       ApplicationConstants.NORMAL_STATE: [],
@@ -39,35 +84,49 @@ class DevicesManagerBloc extends BlocBase {
       ApplicationConstants.ERROR_STATE: [],
     };
 
+    List<Device> devices = [];
+    String body;
+
+    if (state != -2) {
+      body =
+          await apiServices.getOwnerDevieByState({"state": state.toString()});
+    } else {
+      body = await apiServices.getOwnerDevices();
+    }
+
     if (body.isNotEmpty) {
       final data = jsonDecode(body);
       List<dynamic> items = data['items'];
       List<Device> originalDevices = Device.fromJsonDynamicList(items);
-      List<Device> devices =
+
-          DeviceUtils.instance.sortDeviceByState(originalDevices);
+      devices = (state != -2)
-          for (var device in devices) {
+          ? DeviceUtils.instance.sortDeviceAZByName(originalDevices)
-        String stateKey;
+          : DeviceUtils.instance.sortDeviceByState(originalDevices);
-        switch (device.state) {
+
-          case -1:
+      if (state == -2) {
-            stateKey = ApplicationConstants.OFFLINE_STATE;
+        for (var device in originalDevices) {
-            break;
+          String stateKey = _getStateKey(device.state!);
-          case 0:
-            stateKey = ApplicationConstants.NORMAL_STATE;
-            break;
-          case 1:
-            stateKey = ApplicationConstants.WARNING_STATE;
-            break;
-          case 2:
-            stateKey = ApplicationConstants.INPROGRESS_STATE;
-            break;
-          default:
-            stateKey = ApplicationConstants.ERROR_STATE;
-            break;
-        }
           deviceByState[stateKey]!.add(device);
         }
-      sinkAllDevices.add(devices);
         sinkDeviceByState.add(deviceByState);
       }
     }
+
+    sinkAllDevices.add(devices);
+  }
+
+  String _getStateKey(int state) {
+    switch (state) {
+      case -1:
+        return ApplicationConstants.OFFLINE_STATE;
+      case 0:
+        return ApplicationConstants.NORMAL_STATE;
+      case 1:
+        return ApplicationConstants.WARNING_STATE;
+      case 2:
+        return ApplicationConstants.INPROGRESS_STATE;
+      default:
+        return ApplicationConstants.ERROR_STATE;
+    }
+  }
 }

lib/bloc/main_bloc.dart

@@ -1,15 +1,18 @@
 import 'dart:async';
+import 'dart:convert';
 
 import 'package:flutter/material.dart';
-import 'package:sfm_app/product/base/bloc/base_bloc.dart';
+import '../product/base/bloc/base_bloc.dart';
+import '../product/services/api_services.dart';
 import '../feature/bell/bell_model.dart';
+import '../feature/settings/profile/profile_model.dart';
 
 class MainBloc extends BlocBase {
+  APIServices apiServices = APIServices();
   final bellBloc = StreamController<Bell>.broadcast();
   StreamSink<Bell> get sinkBellBloc => bellBloc.sink;
   Stream<Bell> get streamBellBloc => bellBloc.stream;
 
-
   final language = StreamController<Locale?>.broadcast();
   StreamSink<Locale?> get sinkLanguage => language.sink;
   Stream<Locale?> get streamLanguage => language.stream;
@@ -26,6 +29,16 @@ class MainBloc extends BlocBase {
   StreamSink<bool> get sinkIsVNIcon => isVNIcon.sink;
   Stream<bool> get streamIsVNIcon => isVNIcon.stream;
 
+  final userProfile = StreamController<User>.broadcast();
+  StreamSink<User> get sinkUserProfile => userProfile.sink;
+  Stream<User> get streamUserProfile => userProfile.stream;
+
   @override
   void dispose() {}
+
+  void getUserProfile() async {
+    String data = await apiServices.getUserDetail();
+    User user = User.fromJson(jsonDecode(data));
+    sinkUserProfile.add(user);
+  }
 }

lib/feature/bell/bell_screen.dart

@@ -92,7 +92,20 @@ class _BellScreenState extends State<BellScreen> {
                                     },
                                     child: Column(
                                       children: [
-                                        ListTile(
+                                        Container(
+                                          decoration: BoxDecoration(
+                                            color: bellSnapshot
+                                                        .data![index].status! ==
+                                                    1
+                                                ? Theme.of(context)
+                                                    .appBarTheme
+                                                    .backgroundColor
+                                                : Theme.of(context)
+                                                    .colorScheme
+                                                    .outlineVariant,
+                                          ),
+                                          child: ListTile(
+                                            // style: ListTileS,
                                             title: Text(
                                               getBellEvent(
                                                 context,
@@ -116,6 +129,7 @@ class _BellScreenState extends State<BellScreen> {
                                               ),
                                             ),
                                           ),
+                                        ),
                                         const Divider(
                                           height: 1,
                                         ),
@@ -176,26 +190,6 @@ class _BellScreenState extends State<BellScreen> {
     check = false;
   }
 
-  bool checkStatus(List<BellItems> bells) {
-    for (var bell in bells) {
-      if (bell.status == 0) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  Future<Color> colorByTheme(int status) async {
-    String theme = await apiServices.checkTheme();
-    if (theme == AppThemes.LIGHT.name && status == 1) {
-      return Colors.white;
-    } else if (theme == AppThemes.DARK.name && status == 1) {
-      return Colors.black;
-    } else {
-      return const Color.fromARGB(255, 90, 175, 214);
-    }
-  }
-
   String timeAgo(BuildContext context, DateTime dateTime) {
     final duration = DateTime.now().difference(dateTime);
 

lib/feature/devices/add_new_device_widget.dart

@@ -1,6 +1,7 @@
 // ignore_for_file: use_build_context_synchronously
 
 import 'package:flutter/material.dart';
+import 'package:sfm_app/product/shared/shared_snack_bar.dart';
 import '../../product/utils/response_status_utils.dart';
 import '../../product/constant/enums/role_enums.dart';
 import '../../product/services/api_services.dart';
@@ -22,8 +23,11 @@ addNewDevice(BuildContext context, String role) async {
           Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
-              Text('${appLocalization(context).add_device_title}: ',
+              Text(
-                  style: context.titleMediumTextStyle),
+                '${appLocalization(context).add_device_title}: ',
+                style:
+                    const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
+              ),
               Container(
                 alignment: Alignment.centerRight,
                 child: IconButton(
@@ -57,15 +61,28 @@ addNewDevice(BuildContext context, String role) async {
                           appLocalization(context).input_name_device_hintText),
                 )
               : const SizedBox.shrink(),
+          SizedBox(
+            height: context.lowValue,
+          ),
           Center(
-            child: TextButton(
+            child: FilledButton.tonal(
               onPressed: () async {
                 String extID = extIDController.text;
                 String deviceName = deviceNameController.text;
+                if (extID == "") {
+                  showNoIconTopSnackBar(
+                      context,
+                      appLocalization(context).notification_enter_all_inf,
+                      Colors.orange,
+                      Colors.white);
+                  ScaffoldMessenger.of(context).hideCurrentSnackBar();
+                } else {
                   addDevices(context, role, extID, deviceName);
                   ScaffoldMessenger.of(context).hideCurrentSnackBar();
+                }
               },
-                child: Text(appLocalization(context).add_button_content)),
+              child: Text(appLocalization(context).add_button_content),
+            ),
           )
         ],
       ),

lib/feature/devices/devices_manager_screen.dart

@@ -29,17 +29,17 @@ class _DevicesManagerScreenState extends State<DevicesManagerScreen> {
   APIServices apiServices = APIServices();
   List<Device> devices = [];
   Timer? getAllDevicesTimer;
-
+  List<Widget> tags = [];
   @override
   void initState() {
     super.initState();
     devicesManagerBloc = BlocProvider.of(context);
     getUserRole();
-    // devicesManagerBloc.getDevice();
+    const duration = Duration(seconds: 10);
-    // getAllOwnerDevices();
+    getAllDevicesTimer = Timer.periodic(
-    // const duration = Duration(seconds: 10);
+      duration,
-    // getAllDevicesTimer =
+      (Timer t) => devicesManagerBloc.getDeviceByState(-2),
-    //     Timer.periodic(duration, (Timer t) => devicesManagerBloc.getDevice());
+    );
   }
 
   @override
@@ -52,39 +52,55 @@ class _DevicesManagerScreenState extends State<DevicesManagerScreen> {
   Widget build(BuildContext context) {
     return Scaffold(
       // backgroundColor: Colors.grey.withValues(alpha: 0.6),
-      body: SafeArea(
+      body: StreamBuilder<List<int>>(
+          stream: devicesManagerBloc.streamTagStates,
+          builder: (context, tagSnapshot) {
+            return SafeArea(
               child: StreamBuilder<List<Device>>(
                 stream: devicesManagerBloc.streamAllDevices,
                 initialData: devices,
                 builder: (context, allDeviceSnapshot) {
                   if (allDeviceSnapshot.data?.isEmpty ?? devices.isEmpty) {
-              devicesManagerBloc.getDevice();
+                    devicesManagerBloc
+                        .getDeviceByState(tagSnapshot.data?[0] ?? -2);
                     return const Center(child: CircularProgressIndicator());
                   } else {
+                    if (tagSnapshot.data!.isNotEmpty) {}
                     return SingleChildScrollView(
                       child: Column(
                         children: [
+                          if (tagSnapshot.hasData &&
+                              tagSnapshot.data!.isNotEmpty &&
+                              tagSnapshot.data![0] != -2)
+                            TagState(
+                              state: tagSnapshot.data![0],
+                              devicesManagerBloc: devicesManagerBloc,
+                            ),
+                          SizedBox(height: context.lowValue),
                           StreamBuilder<String>(
                             stream: devicesManagerBloc.streamUserRole,
                             initialData: role,
                             builder: (context, roleSnapshot) {
-                        return PaginatedDataTable(
+                              return CardTheme(
+                                color: Theme.of(context).colorScheme.onPrimary,
+                                shadowColor:
+                                    Theme.of(context).colorScheme.onPrimary,
+                                child: PaginatedDataTable(
+                                  headingRowHeight: 30,
+                                  columnSpacing: 30,
+                                  horizontalMargin: 10,
                                   header: Center(
                                     child: Text(
                                       appLocalization(context)
                                           .paginated_data_table_title,
-                              style: context.titleLargeTextStyle,
+                                      style: context.headlineMediumTextStyle,
                                     ),
                                   ),
                                   columns: [
-                            if (roleSnapshot.data == RoleEnums.ADMIN.name ||
+                                    if (roleSnapshot.data ==
-                                roleSnapshot.data == RoleEnums.USER.name)
+                                            RoleEnums.ADMIN.name ||
-                              DataColumn(
+                                        roleSnapshot.data ==
-                                label: Center(
+                                            RoleEnums.USER.name)
-                                  child: Text(appLocalization(context)
-                                      .paginated_data_table_column_action),
-                                ),
-                              ),
                                       DataColumn(
                                         label: Center(
                                           child: Text(appLocalization(context)
@@ -127,26 +143,41 @@ class _DevicesManagerScreenState extends State<DevicesManagerScreen> {
                                             .paginated_data_table_column_devicePower),
                                       ),
                                     ),
+                                    DataColumn(
+                                      label: Center(
+                                        child: Text(appLocalization(context)
+                                            .paginated_data_table_column_action),
+                                      ),
+                                    ),
                                   ],
                                   onPageChanged: (int pageIndex) {
                                     // log('Chuyen page: $pageIndex');
                                   },
-                          rowsPerPage: 5,
+                                  rowsPerPage:
+                                      (allDeviceSnapshot.data?.length ?? 0) < 6
+                                          ? (allDeviceSnapshot.data?.length ??
+                                              0)
+                                          : 5,
                                   actions: [
-                            if (roleSnapshot.data == RoleEnums.USER.name ||
+                                    if (roleSnapshot.data ==
-                                roleSnapshot.data == RoleEnums.ADMIN.name)
+                                            RoleEnums.USER.name ||
+                                        roleSnapshot.data ==
+                                            RoleEnums.ADMIN.name)
                                       IconButton(
                                           style: ButtonStyle(
                                             backgroundColor:
                                                 WidgetStateProperty.all<Color>(
                                                     Colors.green),
-                                      iconColor: WidgetStateProperty.all<Color>(
+                                            iconColor:
-                                          Colors.white)),
+                                                WidgetStateProperty.all<Color>(
+                                              Colors.white,
+                                            ),
+                                          ),
                                           onPressed: () {
                                             ScaffoldMessenger.of(context)
                                                 .clearSnackBars();
-                                    addNewDevice(
+                                            addNewDevice(context,
-                                        context, roleSnapshot.data ?? role);
+                                                roleSnapshot.data ?? role);
                                           },
                                           icon: IconConstants.instance
                                               .getMaterialIcon(Icons.add))
@@ -157,6 +188,7 @@ class _DevicesManagerScreenState extends State<DevicesManagerScreen> {
                                     devicesBloc: devicesManagerBloc,
                                     role: role,
                                   ),
+                                ),
                               );
                             },
                           ),
@@ -168,28 +200,31 @@ class _DevicesManagerScreenState extends State<DevicesManagerScreen> {
                               fontWeight: FontWeight.bold,
                             ),
                           ),
-                    SizedBox(height: context.lowValue),
                           StreamBuilder<Map<String, List<Device>>>(
                             stream: devicesManagerBloc.streamDeviceByState,
                             builder: (context, devicesByStateSnapshot) {
                               if (devicesByStateSnapshot.data == null) {
-                          devicesManagerBloc.getDevice();
+                                devicesManagerBloc.getDeviceByState(
+                                    tagSnapshot.data?[0] ?? -2);
                                 return const Center(
                                     child: CircularProgressIndicator());
                               } else {
                                 return SharedPieChart(
-                              deviceByState: devicesByStateSnapshot.data ?? {});
+                                  deviceByState:
+                                      devicesByStateSnapshot.data ?? {},
+                                  devicesManagerBloc: devicesManagerBloc,
+                                );
                               }
                             },
                           ),
-                    SizedBox(height: context.mediumValue),
                         ],
                       ),
                     );
                   }
                 },
               ),
-      ),
+            );
+          }),
     );
   }
 
@@ -205,11 +240,13 @@ class DeviceSource extends DataTableSource {
   List<Device> devices;
   final DevicesManagerBloc devicesBloc;
   final BuildContext context;
-  DeviceSource(
+
-      {required this.devices,
+  DeviceSource({
+    required this.devices,
     required this.context,
     required this.devicesBloc,
-      required this.role});
+    required this.role,
+  });
   @override
   DataRow? getRow(int index) {
     if (index >= devices.length) {
@@ -221,16 +258,58 @@ class DeviceSource extends DataTableSource {
     String deviceState =
         DeviceUtils.instance.checkStateDevice(context, device.state!);
     return DataRow.byIndex(
-      // color: getTableRowColor(device.state!),
+      // color: WidgetStateProperty.all(rowColor),
       index: index,
       cells: [
         if (role == RoleEnums.USER.name || role == RoleEnums.ADMIN.name)
+          DataCell(
+              Text(device.name!,
+                  style: TextStyle(
+                      color: DeviceUtils.instance
+                          .getTableRowColor(device.state!))), onTap: () {
+            context.pushNamed(AppRoutes.DEVICE_DETAIL.name,
+                pathParameters: {'thingID': device.thingId!});
+          }),
+        DataCell(
+            Text(deviceState,
+                style: TextStyle(
+                    color: DeviceUtils.instance
+                        .getTableRowColor(device.state!))), onTap: () {
+          context.pushNamed(AppRoutes.DEVICE_DETAIL.name,
+              pathParameters: {'thingID': device.thingId!});
+        }),
+        DataCell(
+          Text(sensorMap['sensorBattery'] + "%",
+              style: TextStyle(
+                  color: DeviceUtils.instance.getTableRowColor(device.state!))),
+          onTap: () => context.pushNamed(AppRoutes.DEVICE_DETAIL.name,
+              pathParameters: {'thingID': device.thingId!}),
+        ),
+        DataCell(
+          Text(sensorMap['sensorCsq'],
+              style: TextStyle(
+                  color: DeviceUtils.instance.getTableRowColor(device.state!))),
+        ),
+        DataCell(
+          Text("${sensorMap['sensorTemp']}°C",
+              style: TextStyle(
+                  color: DeviceUtils.instance.getTableRowColor(device.state!))),
+        ),
+        DataCell(
+          Text("${sensorMap['sensorHum']}%",
+              style: TextStyle(
+                  color: DeviceUtils.instance.getTableRowColor(device.state!))),
+        ),
+        DataCell(
+          Text("${sensorMap['sensorVolt']}V",
+              style: TextStyle(
+                  color: DeviceUtils.instance.getTableRowColor(device.state!))),
+        ),
         DataCell(
           Center(
             child: Row(
               children: [
                 IconButton(
-                      // style: ButtonStyle(),
                     hoverColor: Colors.black,
                     onPressed: () {
                       context.pushNamed(AppRoutes.DEVICE_UPDATE.name,
@@ -246,64 +325,6 @@ class DeviceSource extends DataTableSource {
             ),
           ),
         ),
-        DataCell(
-            Text(device.name!,
-                style: TextStyle(
-                    color: DeviceUtils.instance
-                        .getTableRowColor(device.state!))), onTap: () {
-          // log(device.thingId.toString());
-          context.pushNamed(AppRoutes.DEVICE_DETAIL.name,
-              pathParameters: {'thingID': device.thingId!});
-        }),
-        DataCell(
-            Center(
-                child: Text(deviceState,
-                    style: TextStyle(
-                        color: DeviceUtils.instance
-                            .getTableRowColor(device.state!)))), onTap: () {
-          // log(device.thingId.toString());
-          context.pushNamed(AppRoutes.DEVICE_DETAIL.name,
-              pathParameters: {'thingID': device.thingId!});
-        }),
-        DataCell(
-          Center(
-              child: Center(
-                  child: Text(sensorMap['sensorBattery'] + "%",
-                      style: TextStyle(
-                          color: DeviceUtils.instance
-                              .getTableRowColor(device.state!))))),
-          onTap: () => context.pushNamed(AppRoutes.DEVICE_DETAIL.name,
-              pathParameters: {'thingID': device.thingId!}),
-        ),
-        DataCell(
-          Center(
-              child: Center(
-                  child: Text(sensorMap['sensorCsq'],
-                      style: TextStyle(
-                          color: DeviceUtils.instance
-                              .getTableRowColor(device.state!))))),
-        ),
-        DataCell(
-          Center(
-              child: Text(sensorMap['sensorTemp'],
-                  style: TextStyle(
-                      color: DeviceUtils.instance
-                          .getTableRowColor(device.state!)))),
-        ),
-        DataCell(
-          Center(
-              child: Text(sensorMap['sensorHum'],
-                  style: TextStyle(
-                      color: DeviceUtils.instance
-                          .getTableRowColor(device.state!)))),
-        ),
-        DataCell(
-          Center(
-              child: Text(sensorMap['sensorVolt'],
-                  style: TextStyle(
-                      color: DeviceUtils.instance
-                          .getTableRowColor(device.state!)))),
-        ),
       ],
     );
   }
@@ -317,3 +338,44 @@ class DeviceSource extends DataTableSource {
   @override
   int get selectedRowCount => 0;
 }
+
+class TagState extends StatelessWidget {
+  const TagState({
+    super.key,
+    required this.state,
+    required this.devicesManagerBloc,
+  });
+
+  final int state;
+  final DevicesManagerBloc devicesManagerBloc;
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      padding: EdgeInsets.all(context.lowValue),
+      height: context.mediumValue,
+      width: context.dynamicWidth(0.35),
+      decoration: BoxDecoration(
+        color: DeviceUtils.instance.getTableRowColor(state),
+        borderRadius: BorderRadius.circular(context.mediumValue),
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Text(
+            DeviceUtils.instance.checkStateDevice(context, state),
+            style: const TextStyle(color: Colors.white),
+          ),
+          GestureDetector(
+            onTap: () {
+              devicesManagerBloc.getDeviceByState(-2);
+            },
+            child: const Icon(
+              Icons.close,
+              size: 20,
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/feature/home/home_screen.dart

@@ -47,8 +47,8 @@ class _HomeScreenState extends State<HomeScreen> {
   void initState() {
     super.initState();
     homeBloc = BlocProvider.of(context);
-    const duration = Duration(seconds: 20);
     getOwnerAndJoinedDevices();
+    const duration = Duration(seconds: 20);
     getAllDevicesTimer =
         Timer.periodic(duration, (Timer t) => getOwnerAndJoinedDevices());
   }

lib/feature/main/main_screen.dart

@@ -8,6 +8,8 @@ import 'package:go_router/go_router.dart';
 // import 'package:persistent_bottom_nav_bar_v2/persistent-tab-view.dart';
 import 'package:badges/badges.dart' as badges;
 import 'package:persistent_bottom_nav_bar/persistent_bottom_nav_bar.dart';
+import '../settings/profile/profile_model.dart';
+import '../../product/extention/context_extention.dart';
 import '../../bloc/home_bloc.dart';
 import '../../product/constant/app/app_constants.dart';
 import '../../product/constant/enums/app_route_enums.dart';
@@ -75,6 +77,7 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
     WidgetsBinding.instance.addObserver(this);
     initialCheck();
     getBellNotification();
+    mainBloc.getUserProfile();
   }
 
   @override
@@ -176,36 +179,21 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
       builder: (context, themeModeSnapshot) {
         return Scaffold(
           appBar: AppBar(
+            title: StreamBuilder<User>(
+                stream: mainBloc.streamUserProfile,
+                builder: (context, userSnapshot) {
+                  return Row(
+                    children: [
+                      IconConstants.instance.getMaterialIcon(Icons.person),
+                      SizedBox(
+                        width: context.lowValue,
+                      ),
+                      Text(userSnapshot.data?.name ?? "")
+                    ],
+                  );
+                }),
             backgroundColor: Colors.transparent,
             actions: [
-              // LightDarkSwitch(
-              //   value: !isLight,
-              //   onChanged: (value) {
-              //     themeNotifier.changeTheme();
-              //     isLight = !isLight;
-              //   },
-              // ),
-              // SizedBox(
-              //   width: context.lowValue,
-              // ),
-              // StreamBuilder<bool>(
-              //     stream: mainBloc.streamIsVNIcon,
-              //     builder: (context, isVNSnapshot) {
-              //       return LanguageSwitch(
-              //         value: isVNSnapshot.data ?? isVN,
-              //         onChanged: (value) async {
-              //           Locale locale = await LanguageServices().setLocale(isVN
-              //               ? LanguageConstants.ENGLISH
-              //               : LanguageConstants.VIETNAM);
-              //           MyApp.setLocale(context, locale);
-              //           isVN = !isVN;
-              //           mainBloc.sinkIsVNIcon.add(isVN);
-              //         },
-              //       );
-              //     }),
-              // SizedBox(
-              //   width: context.lowValue,
-              // ),
               IconButton(
                 onPressed: () async {
                   ThemeData newTheme = await ThemeServices().changeTheme(
@@ -337,11 +325,9 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
             controller: controller,
             screens: _buildScreens(),
             items: _navBarsItems(),
-            // confineInSafeArea: true,
             handleAndroidBackButtonPress: true,
             resizeToAvoidBottomInset: true,
             stateManagement: true,
-            // hideNavigationBarWhenKeyboardShows: true,
             backgroundColor:
                 themeModeSnapshot.data! ? Colors.white : Colors.black,
             decoration: NavBarDecoration(
@@ -349,17 +335,18 @@ class _MainScreenState extends State<MainScreen> with WidgetsBindingObserver {
               colorBehindNavBar:
                   themeModeSnapshot.data! ? Colors.white : Colors.black,
             ),
-            // popAllScreensOnTapOfSelectedTab: true,
+            animationSettings: const NavBarAnimationSettings(
-            // itemAnimationProperties: const ItemAnimationProperties(
+              navBarItemAnimation: ItemAnimationSettings(
-            //   duration: Duration(milliseconds: 200),
+                duration: Duration(milliseconds: 200),
-            //   curve: Curves.bounceInOut,
+                curve: Curves.bounceInOut,
-            // ),
+              ),
-            // screenTransitionAnimation: const ScreenTransitionAnimation(
+              screenTransitionAnimation: ScreenTransitionAnimationSettings(
-            //   animateTabTransition: true,
+                animateTabTransition: true,
-            //   curve: Curves.linear,
+                curve: Curves.bounceInOut,
-            //   duration: Duration(milliseconds: 200),
+                duration: Duration(milliseconds: 200),
-            // ),
+              ),
-            navBarStyle: NavBarStyle.style4,
+            ),
+            navBarStyle: NavBarStyle.style13,
           ),
         );
       },

lib/product/extention/context_extention.dart

@@ -71,7 +71,8 @@ extension PageExtension on BuildContext {
 extension DurationExtension on BuildContext {
   Duration get lowDuration => const Duration(milliseconds: 150);
   Duration get normalDuration => const Duration(milliseconds: 500);
-  Duration dynamicMilliSecondDuration(int milliseconds) => Duration(milliseconds: milliseconds);
+  Duration dynamicMilliSecondDuration(int milliseconds) =>
+      Duration(milliseconds: milliseconds);
   Duration dynamicMinutesDuration(int minutes) => Duration(minutes: minutes);
 }
 

lib/product/network/network_manager.dart

@@ -36,7 +36,7 @@ class NetworkManager {
   /// string if the request fails
   Future<String> getDataFromServer(String path) async {
     final url = Uri.https(ApplicationConstants.DOMAIN, path);
-    log("GET url: $url");
+    log("[${DateTime.now().toLocal().toString().split(' ')[1]}] GET url: $url");
     final headers = await getHeaders();
     final response = await http.get(url, headers: headers);
     if (response.statusCode == StatusCodeConstants.OK ||
@@ -61,7 +61,7 @@ class NetworkManager {
   Future<String> getDataFromServerWithParams(
       String path, Map<String, dynamic> params) async {
     final url = Uri.https(ApplicationConstants.DOMAIN, path, params);
-    log("GET Params url: $url");
+    log("[${DateTime.now().toLocal().toString().split(' ')[1]}] GET Params url: $url");
     final headers = await getHeaders();
     final response = await http.get(url, headers: headers);
     if (response.statusCode == StatusCodeConstants.CREATED ||
@@ -78,7 +78,7 @@ class NetworkManager {
   /// to be sent. Returns the HTTP status code of the response.
   Future<int> createDataInServer(String path, Map<String, dynamic> body) async {
     final url = Uri.https(ApplicationConstants.DOMAIN, path);
-    log("POST url: $url");
+    log("[${DateTime.now().toLocal().toString().split(' ')[1]}] POST url: $url");
     final headers = await getHeaders();
     final response =
         await http.post(url, headers: headers, body: jsonEncode(body));
@@ -91,7 +91,7 @@ class NetworkManager {
   /// to be updated. Returns the HTTP status code of the response.
   Future<int> updateDataInServer(String path, Map<String, dynamic> body) async {
     final url = Uri.https(ApplicationConstants.DOMAIN, path);
-    log("PUT url: $url");
+    log("[${DateTime.now().toLocal().toString().split(' ')[1]}] PUT url: $url");
     final headers = await getHeaders();
     final response =
         await http.put(url, headers: headers, body: jsonEncode(body));
@@ -106,7 +106,7 @@ class NetworkManager {
   /// failure or an error.
   Future<int> deleteDataInServer(String path) async {
     final url = Uri.https(ApplicationConstants.DOMAIN, path);
-    log("DELETE url: $url");
+    log("[${DateTime.now().toLocal().toString().split(' ')[1]}]   DELETE url: $url");
     final headers = await getHeaders();
     final response = await http.delete(url, headers: headers);
     return response.statusCode;

lib/product/services/api_services.dart

@@ -271,6 +271,12 @@ class APIServices {
     return data;
   }
 
+  Future<String> getOwnerDevieByState(Map<String, dynamic> params) async {
+    String? data = await NetworkManager.instance!
+        .getDataFromServerWithParams(APIPathConstants.DEVICE_PATH, params);
+    return data;
+  }
+
   Future<int> createDeviceByAdmin(Map<String, dynamic> body) async {
     int? statusCode = await NetworkManager.instance!
         .createDataInServer(APIPathConstants.DEVICE_PATH, body);

lib/product/shared/shared_pie_chart.dart

@@ -1,5 +1,8 @@
+import 'dart:developer';
+
 import 'package:fl_chart/fl_chart.dart';
 import 'package:flutter/material.dart';
+import 'package:sfm_app/bloc/devices_manager_bloc.dart';
 import 'package:sfm_app/feature/devices/device_model.dart';
 import 'package:sfm_app/product/extention/context_extention.dart';
 import 'package:sfm_app/product/services/language_services.dart';
@@ -7,15 +10,17 @@ import 'package:sfm_app/product/services/language_services.dart';
 import '../constant/app/app_constants.dart';
 
 class SharedPieChart extends StatelessWidget {
-  const SharedPieChart({
+  const SharedPieChart(
-    super.key,
+      {super.key,
       required this.deviceByState,
-  });
+      required this.devicesManagerBloc});
 
   final Map<String, List<Device>> deviceByState;
+  final DevicesManagerBloc devicesManagerBloc;
 
   @override
   Widget build(BuildContext context) {
+    int touchedIndex = -1;
     TextStyle titleStyle = const TextStyle(
       color: Colors.white,
       fontSize: 20,
@@ -31,17 +36,58 @@ class SharedPieChart extends StatelessWidget {
         deviceByState[ApplicationConstants.INPROGRESS_STATE]?.length ?? 0;
     int errorCount =
         deviceByState[ApplicationConstants.ERROR_STATE]?.length ?? 0;
-    return Padding(
+    return AspectRatio(
-      padding: context.paddingLowHorizontal,
+      aspectRatio: 1.5,
       child: Row(
-        mainAxisAlignment: MainAxisAlignment.spaceAround,
+        children: <Widget>[
-        children: [
+          const SizedBox(
-          Container(
+            height: 18,
-            width: context.dynamicWidth(0.5),
+          ),
-            height: context.dynamicHeight(0.3),
+          Expanded(
-            padding: const EdgeInsets.all(10),
+            child: AspectRatio(
+              aspectRatio: 1,
               child: PieChart(
                 PieChartData(
+                  pieTouchData: PieTouchData(
+                    touchCallback: (FlTouchEvent event, pieTouchResponse) {
+                      if (!event.isInterestedForInteractions ||
+                          pieTouchResponse == null ||
+                          pieTouchResponse.touchedSection == null) {
+                        touchedIndex = -1;
+                        return;
+                      }
+                      int newTouchedIndex =
+                          pieTouchResponse.touchedSection!.touchedSectionIndex;
+
+                      // Chỉ gọi updateDevicesOnTapPieChart nếu touchedIndex thay đổi
+                      if (newTouchedIndex != touchedIndex) {
+                        touchedIndex = newTouchedIndex;
+                        log("TouchedIndex: $touchedIndex");
+                        log("Event: ${event.isInterestedForInteractions}");
+
+                        Future.delayed(
+                          context.lowDuration,
+                          () => updateDevicesOnTapPieChart(newTouchedIndex),
+                        );
+                      }
+                      // touchedIndex =
+                      //     pieTouchResponse.touchedSection!.touchedSectionIndex;
+                      // // log("TouchedIndex: $touchedIndex");
+                      // // log("Event: ${event.isInterestedForInteractions}");
+                      // // int currentTouchedIndex = touchedIndex;
+
+                      // if (currentTouchedIndex != touchedIndex) {
+                      //   touchedIndex = currentTouchedIndex;
+                      //   log("TouchedIndex: $touchedIndex");
+                      //   log("Event: ${event.isInterestedForInteractions}");
+
+                      //   Future.delayed(
+                      //     context.lowDuration,
+                      //     () => updateDevicesOnTapPieChart(touchedIndex),
+                      //   );
+                      // }
+                    },
+                  ),
                   sections: [
                     PieChartSectionData(
                       color: Colors.grey,
@@ -79,15 +125,19 @@ class SharedPieChart extends StatelessWidget {
                       titleStyle: titleStyle,
                     ),
                   ],
-                centerSpaceRadius: context.dynamicWidth(0.1),
+                  centerSpaceRadius: context.dynamicWidth(0.05),
                   sectionsSpace: 2,
                 ),
               ),
             ),
+          ),
           Column(
             mainAxisAlignment: MainAxisAlignment.end,
             crossAxisAlignment: CrossAxisAlignment.start,
             children: <Widget>[
+              if (offlineCount != 0)
+                Column(
+                  children: [
                     Indicator(
                       color: Colors.grey,
                       text: appLocalization(context).inactive_devices_message,
@@ -96,6 +146,11 @@ class SharedPieChart extends StatelessWidget {
                     SizedBox(
                       height: context.lowValue,
                     ),
+                  ],
+                ),
+              if (normalCount != 0)
+                Column(
+                  children: [
                     Indicator(
                       color: Colors.green,
                       text: appLocalization(context).active_devices_message,
@@ -104,6 +159,11 @@ class SharedPieChart extends StatelessWidget {
                     SizedBox(
                       height: context.lowValue,
                     ),
+                  ],
+                ),
+              if (warningCount != 0)
+                Column(
+                  children: [
                     Indicator(
                       color: Colors.red,
                       text: appLocalization(context).warning_devices_message,
@@ -112,6 +172,11 @@ class SharedPieChart extends StatelessWidget {
                     SizedBox(
                       height: context.lowValue,
                     ),
+                  ],
+                ),
+              if (inProgressCount != 0)
+                Column(
+                  children: [
                     Indicator(
                       color: Colors.yellow,
                       text: appLocalization(context).in_progress_message,
@@ -120,20 +185,38 @@ class SharedPieChart extends StatelessWidget {
                     SizedBox(
                       height: context.lowValue,
                     ),
+                  ],
+                ),
+              if (errorCount != 0)
                 Indicator(
                   color: Colors.black,
                   text: appLocalization(context).error_message_uppercase,
                   isSquare: true,
                 ),
-              // const SizedBox(
-              //   height: 18,
-              // ),
             ],
           ),
+          const SizedBox(
+            width: 10,
+          ),
         ],
       ),
     );
   }
+
+  void updateDevicesOnTapPieChart(int touchedIndex) {
+    log("Update PieChart On Tap Function");
+    if (touchedIndex == 0) {
+      devicesManagerBloc.getDeviceByState(-1);
+    } else if (touchedIndex == 1) {
+      devicesManagerBloc.getDeviceByState(0);
+    } else if (touchedIndex == 2) {
+      devicesManagerBloc.getDeviceByState(1);
+    } else if (touchedIndex == 3) {
+      devicesManagerBloc.getDeviceByState(2);
+    } else {
+      devicesManagerBloc.getDeviceByState(-2);
+    }
+  }
 }
 
 class Indicator extends StatelessWidget {

lib/product/theme/app_theme_dark.dart

@@ -16,6 +16,7 @@ class AppThemeDark extends AppTheme {
         useMaterial3: true,
         scheme: FlexScheme.flutterDash,
         subThemesData: const FlexSubThemesData(
+          snackBarBackgroundSchemeColor: SchemeColor.black,
           inputDecoratorRadius: 30,
           interactionEffects: true,
           tintedDisabledControls: true,
@@ -30,24 +31,4 @@ class AppThemeDark extends AppTheme {
         ),
         visualDensity: FlexColorScheme.comfortablePlatformDensity,
       );
-
-  // ThemeData.dark().copyWith(
-  //       useMaterial3: true,
-  //       colorScheme: _buildColorScheme,
-  //     );
-
-  // ColorScheme get _buildColorScheme => FlexColorScheme.dark().toScheme;
-  // ColorScheme(
-  //       brightness: Brightness.dark,
-  //       primary: Colors.blue.shade900,
-  //       onPrimary: Colors.blue,
-  //       secondary: Colors.white,
-  //       onSecondary: Colors.white70,
-  //       error: Colors.red,
-  //       onError: Colors.orange,
-  //       background: Colors.black,
-  //       onBackground: Colors.white70,
-  //       surface: Colors.grey,
-  //       onSurface: Colors.white,
-  //     );
 }

lib/product/theme/app_theme_light.dart

@@ -17,6 +17,7 @@ class AppThemeLight extends AppTheme {
         scheme: FlexScheme.flutterDash,
         bottomAppBarElevation: 20.0,
         subThemesData: const FlexSubThemesData(
+          snackBarBackgroundSchemeColor: SchemeColor.surfaceBright,
           inputDecoratorRadius: 30,
           interactionEffects: true,
           tintedDisabledControls: true,

lib/product/utils/device_utils.dart

@@ -129,7 +129,7 @@ class DeviceUtils {
       message = appLocalization(context).in_progress_message;
     } else if (state == 3) {
       message = appLocalization(context).in_progress_message;
-    }
+    } else if (state == -2) {}
     return message;
   }
 
@@ -144,6 +144,10 @@ class DeviceUtils {
     return sortedDevices;
   }
 
+  List<Device> sortDeviceAZByName(List<Device> devices) {
+    return devices..sort((a, b) => (a.name ?? '').compareTo(b.name ?? ''));
+  }
+
   Color getTableRowColor(int state) {
     if (state == 1) {
       return Colors.red;
@@ -251,12 +255,14 @@ class DeviceUtils {
   }
 
   IconData getSignalIcon(BuildContext context, String signal) {
-    if (signal == appLocalization(context).gf_weak_signal_message) {
+    if (signal == appLocalization(context).low_message_uppercase) {
       return Icons.signal_cellular_alt_1_bar;
-    } else if (signal == appLocalization(context).gf_moderate_signal_message) {
+    } else if (signal == appLocalization(context).moderate_message_uppercase) {
       return Icons.signal_cellular_alt_2_bar;
-    } else {
+    } else if (signal == appLocalization(context).good_message_uppercase) {
       return Icons.signal_cellular_alt;
+    } else {
+      return Icons.signal_cellular_connected_no_internet_4_bar_rounded;
     }
   }
 
@@ -312,12 +318,12 @@ class DeviceUtils {
   }
 
   Color getSignalIconColor(BuildContext context, String signal) {
-    if (signal == appLocalization(context).gf_weak_signal_message) {
+    if (signal == appLocalization(context).good_message_uppercase) {
-      return Colors.red;
-    } else if (signal == appLocalization(context).gf_moderate_signal_message) {
-      return Colors.yellow;
-    } else {
       return Colors.green;
+    } else if (signal == appLocalization(context).moderate_message_uppercase) {
+      return Colors.orangeAccent;
+    } else {
+      return Colors.red;
     }
   }
 }