AC devices page implemented

AC Cubit Add
New Devices Cubit Arch will be used
Devices Cubit (for devices categories, and devices page)
{
AC cubit,
Lights cubit.
... }
Replaced AssetsManager with Assets Class (auto generated)

lib/features/devices/bloc/ac_cubit.dart

@@ -0,0 +1,57 @@
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:meta/meta.dart';
+import 'package:syncrow_app/features/devices/bloc/devices_cubit.dart';
+
+part 'ac_state.dart';
+
+class AcCubit extends Cubit<AcState> {
+  AcCubit() : super(AcInitial());
+
+  static AcCubit get(context) => BlocProvider.of(context);
+
+  bool areAllACsOff() {
+    for (var ac in DevicesCubit.categories[0].devices) {
+      if (ac.status) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  void turnAllACsOff() {
+    for (var ac in DevicesCubit.categories[0].devices) {
+      ac.status = false;
+    }
+    emit(SwitchACsOff());
+  }
+
+  void turnAllACsOn() {
+    for (var ac in DevicesCubit.categories[0].devices) {
+      ac.status = true;
+    }
+    emit(SwitchACsOn());
+  }
+
+  void setTempToAll(double temperature) {
+    for (var ac in DevicesCubit.categories[0].devices) {
+      ac.temperature = temperature;
+    }
+    emit(ACsTempChanged());
+  }
+
+  double averageTempForAll() {
+    double allTemp = 0;
+    for (var ac in DevicesCubit.categories[0].devices) {
+      allTemp += ac.temperature;
+    }
+    emit(ACsTempChanged());
+
+    double averageTemp = allTemp / DevicesCubit.categories[0].devices.length;
+
+    averageTemp = (averageTemp * 2).round() / 2;
+
+    return averageTemp;
+  }
+
+  /// implement the fan speed and temp mode change
+}

lib/features/devices/bloc/ac_state.dart

@@ -0,0 +1,16 @@
+part of 'ac_cubit.dart';
+
+@immutable
+abstract class AcState {}
+
+class AcInitial extends AcState {}
+
+class SwitchACsOff extends AcState {}
+
+class SwitchACsOn extends AcState {}
+
+class ACsTempChanged extends AcState {}
+
+class ACsFanSpeedChanged extends AcState {}
+
+class ACsTempModeChanged extends AcState {}

lib/features/devices/bloc/devices_cubit.dart

@@ -1,99 +1,130 @@
 import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
-import 'package:syncrow_app/utils/resource_manager/assets_manager.dart';
+import 'package:syncrow_app/features/devices/model/ac_model.dart';
+import 'package:syncrow_app/features/devices/view/widgets/curtain_view.dart';
+import 'package:syncrow_app/features/devices/view/widgets/door_view.dart';
+import 'package:syncrow_app/features/devices/view/widgets/gateway_view.dart';
+import 'package:syncrow_app/features/devices/view/widgets/screens_view.dart';
+import 'package:syncrow_app/generated/assets.dart';
 
 import '../model/device_category_model.dart';
+import '../view/widgets/ac_view.dart';
+import '../view/widgets/lights_view.dart';
 
 part 'devices_state.dart';
 
 class DevicesCubit extends Cubit<DevicesState> {
   DevicesCubit() : super(DevicesInitial()) {
-    getCategories();
+    // getCategories();
   }
 
-  bool ACSwitchValue = false;
-  bool lightsSwitchValue = false;
-  bool doorSwitchValue = false;
-  bool curtainSwitchValue = false;
-  bool screensSwitchValue = false;
-  bool gatewaySwitchValue = false;
+  /// separate the cubit into different cubits based on devices type
+  static bool ACSwitchValue = false;
+  static bool lightsSwitchValue = false;
+  static bool doorSwitchValue = false;
+  static bool curtainSwitchValue = false;
+  static bool screensSwitchValue = false;
+  static bool gatewaySwitchValue = false;
 
-  void changeSwitchValue(DeviceType device) {
-    switch (device) {
-      case DeviceType.AC:
-        ACSwitchValue = !ACSwitchValue;
-        break;
-      case DeviceType.Lights:
-        lightsSwitchValue = !lightsSwitchValue;
-        break;
-      case DeviceType.Door:
-        doorSwitchValue = !doorSwitchValue;
-        break;
-      case DeviceType.Curtain:
-        curtainSwitchValue = !curtainSwitchValue;
-        break;
-      case DeviceType.Screens:
-        screensSwitchValue = !screensSwitchValue;
-        break;
-      case DeviceType.Gateway:
-        gatewaySwitchValue = !gatewaySwitchValue;
-        break;
-    }
-    emit(DevicesSuccess());
+  void changeCategorySwitchValue(DevicesCategoryModel category) {
+    category.switchValue = !category.switchValue;
+    emit(CategorySwitchChanged());
+    print('${category.name} switch value: ${category.switchValue} ');
   }
 
   static DevicesCubit get(context) => BlocProvider.of(context);
 
-  var categories = <DevicesCategoryModel>[];
+  static var categories = <DevicesCategoryModel>[
+    DevicesCategoryModel(
+      devices: [
+        ACModel(
+          name: "Living Room AC",
+          id: '0',
+          status: false,
+          temperature: 20,
+          fanSpeed: 0,
+          tempMode: 0,
+        ),
+        ACModel(
+          name: "Master Bedroom AC",
+          id: '1',
+          status: false,
+          temperature: 20,
+          fanSpeed: 0,
+          tempMode: 0,
+        ),
+      ],
+      icon: Assets.iconsAC,
+      name: 'ACs',
+      switchValue: ACSwitchValue,
+      type: DeviceType.AC,
+      page: const ACView(),
+    ),
+    DevicesCategoryModel(
+      devices: [],
+      icon: Assets.iconsLight,
+      name: 'Lights',
+      switchValue: lightsSwitchValue,
+      type: DeviceType.Lights,
+      page: const LightsView(),
+    ),
+    DevicesCategoryModel(
+      devices: [],
+      icon: Assets.iconsDoorLock,
+      name: 'Doors',
+      switchValue: doorSwitchValue,
+      type: DeviceType.Door,
+      page: const DoorView(),
+    ),
+    DevicesCategoryModel(
+      devices: [],
+      icon: Assets.iconsCurtain,
+      name: 'Curtains',
+      switchValue: curtainSwitchValue,
+      type: DeviceType.Curtain,
+      page: const CurtainView(),
+    ),
+    DevicesCategoryModel(
+      devices: [],
+      icon: Assets.iconsScreen,
+      name: 'Screens',
+      switchValue: screensSwitchValue,
+      type: DeviceType.Screens,
+      page: const ScreensView(),
+    ),
+    DevicesCategoryModel(
+      devices: [],
+      icon: Assets.iconsGateway,
+      name: 'Gateway',
+      switchValue: gatewaySwitchValue,
+      type: DeviceType.Gateway,
+      page: const GateWayView(),
+    ),
+  ];
 
-  Future<List<DevicesCategoryModel>> getCategories() async {
-    emit(DevicesLoading());
-    await Future.delayed(const Duration(seconds: 2));
-    emit(DevicesSuccess());
+  Widget? get chosenCategory {
+    for (var category in categories) {
+      if (category.isSelected) {
+        return category.page;
+      }
+    }
+    return null;
+  }
 
-    return categories = [
-      DevicesCategoryModel(
-        devices: [],
-        icon: IconsManager.ac,
-        name: 'ACs',
-        switchValue: false,
-        type: DeviceType.AC,
-      ),
-      DevicesCategoryModel(
-        devices: [],
-        icon: IconsManager.light,
-        name: 'Lights',
-        switchValue: false,
-        type: DeviceType.Lights,
-      ),
-      DevicesCategoryModel(
-        devices: [],
-        icon: IconsManager.doorLock,
-        name: 'Doors',
-        switchValue: false,
-        type: DeviceType.Door,
-      ),
-      DevicesCategoryModel(
-        devices: [],
-        icon: IconsManager.curtain,
-        name: 'Curtains',
-        switchValue: false,
-        type: DeviceType.Curtain,
-      ),
-      DevicesCategoryModel(
-        devices: [],
-        icon: IconsManager.screen,
-        name: 'Screens',
-        switchValue: false,
-        type: DeviceType.Screens,
-      ),
-      DevicesCategoryModel(
-        devices: [],
-        icon: IconsManager.gateway,
-        name: 'Gateway',
-        switchValue: false,
-        type: DeviceType.Gateway,
-      ),
-    ];
+  void updateCategory(int index) {
+    for (var i = 0; i < categories.length; i++) {
+      if (i == index) {
+        categories[i].isSelected = true;
+      } else {
+        categories[i].isSelected = false;
+      }
+    }
+    emit(DevicesCategoryChanged());
+  }
+
+  static void clearCategoriesSelection() {
+    for (var category in categories) {
+      category.isSelected = false;
+    }
   }
 }

lib/features/devices/bloc/devices_state.dart

@@ -12,3 +12,13 @@ class DevicesSuccess extends DevicesState {}
 class DevicesFailure extends DevicesState {}
 
 class ChangeIndex extends DevicesState {}
+
+class DevicesCategoryChanged extends DevicesState {}
+
+class CategorySwitchChanged extends DevicesState {}
+
+class SwitchACsOff extends DevicesState {}
+
+class SwitchACsOn extends DevicesState {}
+
+class SetACsTemp extends DevicesState {}

lib/features/devices/model/ac_model.dart

@@ -0,0 +1,19 @@
+class ACModel {
+  final String name;
+  final String id;
+  late bool status;
+  late double temperature;
+
+  late int fanSpeed;
+
+  late int tempMode;
+
+  ACModel({
+    required this.name,
+    required this.id,
+    required this.status,
+    required this.temperature,
+    required this.fanSpeed,
+    required this.tempMode,
+  });
+}

lib/features/devices/model/device_category_model.dart

@@ -1,16 +1,23 @@
-import 'device_model.dart';
+import 'package:flutter/cupertino.dart';
+
+import 'ac_model.dart';
 
 class DevicesCategoryModel {
   final String name;
   final String icon;
 
-  final bool switchValue;
-  final List<DeviceModel> devices;
+  final Widget page;
+
+  bool switchValue;
+  final List<ACModel> devices;
 
   final DeviceType type;
+  bool isSelected;
 
   DevicesCategoryModel(
-      {required this.type,
+      {this.isSelected = false,
+      required this.page,
+      required this.type,
       required this.name,
       required this.icon,
       required this.switchValue,

lib/features/devices/model/device_model.dart

@@ -1,14 +0,0 @@
-class DeviceModel {
-  final String name;
-  final String imageUrl;
-  final String description;
-  final String category;
-  final String id;
-
-  DeviceModel(
-      {required this.name,
-      required this.imageUrl,
-      required this.description,
-      required this.category,
-      required this.id});
-}

lib/features/devices/view/widgets/a_c_control_unit.dart

@@ -0,0 +1,75 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:gap/gap.dart';
+import 'package:syncrow_app/features/devices/model/ac_model.dart';
+import 'package:syncrow_app/features/shared_widgets/default_container.dart';
+
+import '../../../../generated/assets.dart';
+
+class ACControlUnit extends StatefulWidget {
+  const ACControlUnit({
+    super.key,
+    required this.model,
+  });
+
+  final ACModel model;
+
+  @override
+  State<ACControlUnit> createState() => _ACControlUnitState();
+}
+
+class _ACControlUnitState extends State<ACControlUnit> {
+  var fanSpeeds = [
+    Assets.iconsFan0,
+    Assets.iconsFan1,
+    Assets.iconsFan2,
+    Assets.iconsFan3,
+  ];
+
+  var tempModes = [
+    Assets.iconsSunnyMode,
+    Assets.iconsColdMode,
+    Assets.iconsWindyMode,
+  ];
+
+  @override
+  Widget build(BuildContext context) {
+    return Row(
+      children: [
+        Expanded(
+          child: InkWell(
+            onTap: () {
+              setState(() {
+                widget.model.fanSpeed =
+                    widget.model.fanSpeed == 3 ? 0 : widget.model.fanSpeed + 1;
+              });
+            },
+            child: DefaultContainer(
+              height: 55,
+              child: Center(
+                child: SvgPicture.asset(fanSpeeds[widget.model.fanSpeed]),
+              ),
+            ),
+          ),
+        ),
+        const Gap(10),
+        Expanded(
+          child: InkWell(
+            onTap: () {
+              setState(() {
+                widget.model.tempMode =
+                    widget.model.tempMode == 2 ? 0 : widget.model.tempMode + 1;
+              });
+            },
+            child: DefaultContainer(
+              height: 55,
+              child: Center(
+                child: SvgPicture.asset(tempModes[widget.model.tempMode]),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/features/devices/view/widgets/ac_view.dart

@@ -0,0 +1,72 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:gap/gap.dart';
+import 'package:syncrow_app/features/devices/bloc/ac_cubit.dart';
+import 'package:syncrow_app/features/devices/bloc/devices_cubit.dart';
+import 'package:syncrow_app/features/devices/view/widgets/a_c_control_unit.dart';
+import 'package:syncrow_app/features/devices/view/widgets/devices_temp_widget.dart';
+import 'package:syncrow_app/features/devices/view/widgets/universal_a_c_switch.dart';
+import 'package:syncrow_app/features/devices/view/widgets/universal_a_c_temp.dart';
+import 'package:syncrow_app/features/shared_widgets/devices_default_switch.dart';
+import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
+
+class ACView extends StatelessWidget {
+  const ACView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return BlocProvider(
+      create: (context) => AcCubit(),
+      child: BlocBuilder<AcCubit, AcState>(
+        builder: (context, state) {
+          return SingleChildScrollView(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.stretch,
+              children: [
+                // universal AC controller
+                const Gap(10),
+                const BodySmall(text: "All ACs"),
+                const Gap(5),
+                const UniversalACSwitch(),
+                const Gap(10),
+                const UniversalACTemp(),
+                const Gap(10),
+
+                // other ACs controller
+                ListView.builder(
+                  shrinkWrap: true,
+                  physics: const NeverScrollableScrollPhysics(),
+                  padding: const EdgeInsets.all(0),
+                  itemCount: DevicesCubit.categories[0].devices.length,
+                  itemBuilder: (context, index) {
+                    return Column(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      children: [
+                        BodySmall(
+                            text:
+                                DevicesCubit.categories[0].devices[index].name),
+                        const Gap(5),
+                        DevicesDefaultSwitch(
+                          model: DevicesCubit.categories[0].devices[index],
+                        ),
+                        const Gap(10),
+                        DevicesTempWidget(
+                          model: DevicesCubit.categories[0].devices[index],
+                        ),
+                        const Gap(10),
+                        ACControlUnit(
+                          model: DevicesCubit.categories[0].devices[index],
+                        ),
+                        const Gap(10),
+                      ],
+                    );
+                  },
+                ),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

lib/features/devices/view/widgets/curtain_view.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class CurtainView extends StatelessWidget {
+  const CurtainView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Placeholder();
+  }
+}

lib/features/devices/view/widgets/devices_mode_tab.dart

@@ -2,7 +2,7 @@ import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:gap/gap.dart';
 import 'package:syncrow_app/features/shared_widgets/text_widgets/body_small.dart';
-import 'package:syncrow_app/utils/resource_manager/assets_manager.dart';
+import 'package:syncrow_app/generated/assets.dart';
 import 'package:syncrow_app/utils/resource_manager/strings_manager.dart';
 
 class DevicesModeTab extends StatelessWidget {
@@ -30,7 +30,7 @@ class DevicesModeTab extends StatelessWidget {
                 height: 30,
                 width: 25,
                 child: SvgPicture.asset(
-                  IconsManager.winter,
+                  Assets.iconsWinter,
                   fit: BoxFit.contain,
                 ),
               ),
@@ -58,7 +58,7 @@ class DevicesModeTab extends StatelessWidget {
                 height: 30,
                 width: 25,
                 child: SvgPicture.asset(
-                  IconsManager.summer,
+                  Assets.iconsSummer,
                   fit: BoxFit.contain,
                 ),
               ),

lib/features/devices/view/widgets/devices_temp_widget.dart

@@ -0,0 +1,74 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_app/features/devices/model/ac_model.dart';
+import 'package:syncrow_app/features/shared_widgets/default_container.dart';
+import 'package:syncrow_app/features/shared_widgets/text_widgets/body_large.dart';
+import 'package:syncrow_app/utils/context_extension.dart';
+import 'package:syncrow_app/utils/resource_manager/color_manager.dart';
+
+import '../../../../generated/assets.dart';
+
+class DevicesTempWidget extends StatefulWidget {
+  const DevicesTempWidget({
+    super.key,
+    required this.model,
+  });
+
+  final ACModel model;
+
+  @override
+  State<DevicesTempWidget> createState() => _DevicesTempWidgetState();
+}
+
+class _DevicesTempWidgetState extends State<DevicesTempWidget> {
+  // double temp = widget.model.temperature;
+
+  @override
+  Widget build(BuildContext context) {
+    return DefaultContainer(
+      height: 60,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: <Widget>[
+          SizedBox.square(
+            dimension: 24,
+            child: InkWell(
+              onTap: () {
+                setState(() {
+                  // temp = temp - .5;
+                  widget.model.temperature = widget.model.temperature - .5;
+                });
+              },
+              child: SvgPicture.asset(
+                Assets.iconsMinus,
+              ),
+            ),
+          ),
+          BodyLarge(
+            text: "${widget.model.temperature}° C",
+            style: context.bodyLarge.copyWith(
+              color: ColorsManager.primaryColor.withOpacity(0.6),
+              fontSize: 23,
+            ),
+          ),
+          SizedBox.square(
+            dimension: 24,
+            child: InkWell(
+              onTap: () {
+                setState(() {
+                  // temp = temp + .5
+                  widget.model.temperature = widget.model.temperature + .5;
+                });
+              },
+              child: SvgPicture.asset(
+                Assets.iconsPlus,
+                height: 24,
+                width: 24,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/features/devices/view/widgets/devices_view_body.dart

@@ -3,7 +3,6 @@ import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:syncrow_app/features/devices/view/widgets/categories_view.dart';
 
 import '../../bloc/devices_cubit.dart';
-import 'no_devices_view.dart';
 
 class DevicesViewBody extends StatelessWidget {
   const DevicesViewBody({
@@ -13,17 +12,15 @@ class DevicesViewBody extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-        create: (context) => DevicesCubit(),
-        child: BlocBuilder<DevicesCubit, DevicesState>(
-          builder: (context, state) {
-            return state is DevicesLoading
-                ? const Center(child: CircularProgressIndicator())
-                : state is DevicesSuccess
-                    ? DevicesCubit.get(context).categories.isEmpty
-                        ? const NoDevicesView()
-                        : const CategoriesView()
-                    : const Center(child: Text('Error'));
-          },
-        ));
+      create: (context) => DevicesCubit(),
+      child: BlocBuilder<DevicesCubit, DevicesState>(
+        builder: (context, state) {
+          return state is DevicesLoading
+              ? const Center(child: CircularProgressIndicator())
+              : DevicesCubit.get(context).chosenCategory ??
+                  const CategoriesView();
+        },
+      ),
+    );
   }
 }

lib/features/devices/view/widgets/door_view.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class DoorView extends StatelessWidget {
+  const DoorView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Placeholder();
+  }
+}

lib/features/devices/view/widgets/gateway_view.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class GateWayView extends StatelessWidget {
+  const GateWayView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Placeholder();
+  }
+}

lib/features/devices/view/widgets/lights_view.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class LightsView extends StatelessWidget {
+  const LightsView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Placeholder();
+  }
+}

lib/features/devices/view/widgets/no_devices_view.dart

@@ -1,7 +1,7 @@
 import 'package:flutter/material.dart';
 import 'package:gap/gap.dart';
 import 'package:syncrow_app/features/shared_widgets/default_text_button.dart';
-import 'package:syncrow_app/utils/resource_manager/assets_manager.dart';
+import 'package:syncrow_app/generated/assets.dart';
 
 class NoDevicesView extends StatelessWidget {
   const NoDevicesView({
@@ -15,7 +15,7 @@ class NoDevicesView extends StatelessWidget {
         mainAxisAlignment: MainAxisAlignment.center,
         children: [
           Image.asset(
-            ImageManager.boxEmpty,
+            Assets.imagesBoxEmpty,
             opacity: const AlwaysStoppedAnimation(0.5),
             scale: 1,
             width: 140,

lib/features/devices/view/widgets/screens_view.dart

@@ -0,0 +1,10 @@
+import 'package:flutter/material.dart';
+
+class ScreensView extends StatelessWidget {
+  const ScreensView({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return const Placeholder();
+  }
+}

lib/features/devices/view/widgets/switches.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_svg/svg.dart';
 import 'package:syncrow_app/features/shared_widgets/custom_switch.dart';
 import 'package:syncrow_app/features/shared_widgets/default_container.dart';
@@ -13,51 +14,60 @@ class Switches extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return GridView.builder(
-      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
-        crossAxisCount: 2,
-        crossAxisSpacing: 10,
-        mainAxisSpacing: 10,
-        childAspectRatio: 1.5,
-      ),
-      padding: const EdgeInsets.only(top: 10),
-      physics: const NeverScrollableScrollPhysics(),
-      shrinkWrap: true,
-      itemCount: DevicesCubit.get(context).categories.length,
-      itemBuilder: (context, index) {
-        return DefaultContainer(
-          child: Column(
-            crossAxisAlignment: CrossAxisAlignment.start,
-            mainAxisAlignment: MainAxisAlignment.spaceBetween,
-            children: [
-              Row(
-                crossAxisAlignment: CrossAxisAlignment.start,
-                mainAxisAlignment: MainAxisAlignment.spaceBetween,
-                children: [
-                  SvgPicture.asset(
-                    DevicesCubit.get(context).categories[index].icon,
-                    fit: BoxFit.contain,
-                  ),
-                  SizedBox(
-                    width: 30,
-                    height: 20,
-                    child: CustomSwitch(
-                      value: DevicesCubit.get(context)
-                          .categories[index]
-                          .switchValue,
-                      onChanged: (value) => DevicesCubit.get(context)
-                          .changeSwitchValue(
-                              DevicesCubit.get(context).categories[index].type),
-                    ),
-                  ),
-                ],
-              ),
-              BodyLarge(
-                text: DevicesCubit.get(context).categories[index].name,
-                fontWeight: FontWeight.bold,
-              )
-            ],
+    return BlocBuilder<DevicesCubit, DevicesState>(
+      builder: (context, state) {
+        return GridView.builder(
+          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+            crossAxisCount: 2,
+            crossAxisSpacing: 10,
+            mainAxisSpacing: 10,
+            childAspectRatio: 1.5,
           ),
+          padding: const EdgeInsets.only(top: 10),
+          physics: const NeverScrollableScrollPhysics(),
+          shrinkWrap: true,
+          itemCount: DevicesCubit.categories.length,
+          itemBuilder: (_, index) {
+            return InkWell(
+              onTap: () => DevicesCubit.get(context).updateCategory(index),
+              child: DefaultContainer(
+                child: Column(
+                  crossAxisAlignment: CrossAxisAlignment.start,
+                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                  children: [
+                    Row(
+                      crossAxisAlignment: CrossAxisAlignment.start,
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        SvgPicture.asset(
+                          DevicesCubit.categories[index].icon,
+                          fit: BoxFit.contain,
+                        ),
+                        const SizedBox(
+                          width: 30,
+                          height: 20,
+                          child: CustomSwitch(
+                              // value: DevicesCubit
+                              //     .categories[index]
+                              //     .switchValue,
+                              //
+                              // onChanged: (value) => DevicesCubit.get(context)
+                              //     .changeSwitchValue( DevicesCubit
+                              //     .categories[index]
+                              //     .switchValue),
+                              ),
+                        ),
+                      ],
+                    ),
+                    BodyLarge(
+                      text: DevicesCubit.categories[index].name,
+                      fontWeight: FontWeight.bold,
+                    )
+                  ],
+                ),
+              ),
+            );
+          },
         );
       },
     );

lib/features/devices/view/widgets/universal_a_c_switch.dart

@@ -0,0 +1,70 @@
+import 'package:flutter/material.dart';
+
+import '../../../../utils/resource_manager/color_manager.dart';
+import '../../../shared_widgets/text_widgets/body_medium.dart';
+import '../../bloc/ac_cubit.dart';
+
+class UniversalACSwitch extends StatelessWidget {
+  const UniversalACSwitch({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    bool acsStatus = AcCubit.get(context).areAllACsOff();
+
+    //TODO: Move these to String Manager "ON" and "OFF"
+    return Row(
+      children: <Widget>[
+        Expanded(
+          child: InkWell(
+            onTap: () {
+              AcCubit.get(context).turnAllACsOn();
+            },
+            child: Container(
+              height: 60,
+              decoration: BoxDecoration(
+                color: acsStatus ? ColorsManager.primaryColor : Colors.white,
+                borderRadius: const BorderRadius.only(
+                  topLeft: Radius.circular(15),
+                  bottomLeft: Radius.circular(15),
+                ),
+              ),
+              child: Center(
+                child: BodyMedium(
+                  text: "ON",
+                  fontColor: acsStatus ? Colors.white : null,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+          ),
+        ),
+        Expanded(
+          child: InkWell(
+            onTap: () {
+              AcCubit.get(context).turnAllACsOff();
+            },
+            child: Container(
+              height: 60,
+              decoration: BoxDecoration(
+                color: acsStatus ? Colors.white : ColorsManager.primaryColor,
+                borderRadius: const BorderRadius.only(
+                  topRight: Radius.circular(15),
+                  bottomRight: Radius.circular(15),
+                ),
+              ),
+              child: Center(
+                child: BodyMedium(
+                  text: "OFF",
+                  fontColor: acsStatus ? null : Colors.white,
+                  fontWeight: FontWeight.bold,
+                ),
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

lib/features/devices/view/widgets/universal_a_c_temp.dart

@@ -0,0 +1,59 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:syncrow_app/features/devices/bloc/ac_cubit.dart';
+import 'package:syncrow_app/utils/context_extension.dart';
+
+import '../../../../generated/assets.dart';
+import '../../../../utils/resource_manager/color_manager.dart';
+import '../../../shared_widgets/default_container.dart';
+import '../../../shared_widgets/text_widgets/body_large.dart';
+
+class UniversalACTemp extends StatelessWidget {
+  const UniversalACTemp({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    double averageTemp = AcCubit.get(context).averageTempForAll();
+    return DefaultContainer(
+      height: 60,
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
+        children: <Widget>[
+          SizedBox.square(
+            dimension: 24,
+            child: InkWell(
+              onTap: () {
+                AcCubit.get(context).setTempToAll(averageTemp + .5);
+              },
+              child: SvgPicture.asset(
+                Assets.iconsMinus,
+              ),
+            ),
+          ),
+          BodyLarge(
+            text: "${AcCubit.get(context).averageTempForAll()}° C",
+            style: context.bodyLarge.copyWith(
+              color: ColorsManager.primaryColor.withOpacity(0.6),
+              fontSize: 23,
+            ),
+          ),
+          SizedBox.square(
+            dimension: 24,
+            child: InkWell(
+              onTap: () {
+                AcCubit.get(context).setTempToAll(averageTemp + .5);
+              },
+              child: SvgPicture.asset(
+                Assets.iconsPlus,
+                height: 24,
+                width: 24,
+              ),
+            ),
+          ),
+        ],
+      ),
+    );
+  }
+}