power_clamp_functionality

lib/pages/device_managment/power_clamp/bloc/smart_power_bloc.dart

@@ -1,28 +1,218 @@
 import 'dart:async';
+import 'package:flutter/cupertino.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
+import 'package:intl/intl.dart';
 import 'package:syncrow_web/pages/device_managment/power_clamp/bloc/smart_power_event.dart';
 import 'package:syncrow_web/pages/device_managment/power_clamp/bloc/smart_power_state.dart';
+import 'package:syncrow_web/pages/device_managment/power_clamp/models/device_event.dart';
 import 'package:syncrow_web/pages/device_managment/power_clamp/models/power_clamp_model.dart';
+import 'package:syncrow_web/pages/device_managment/power_clamp/view/power_chart.dart';
 import 'package:syncrow_web/services/devices_mang_api.dart';
 
 class SmartPowerBloc extends Bloc<SmartPowerEvent, SmartPowerState> {
   SmartPowerBloc({required this.deviceId}) : super(SmartPowerInitial()) {
     on<SmartPowerFetchDeviceEvent>(_onFetchDeviceStatus);
-    // on<SmartPowerControl>(_onControl);
+    on<SmartPowerArrowPressedEvent>(_onArrowPressed);
     on<SmartPowerFetchBatchEvent>(_onFetchBatchStatus);
+    on<SmartPowerPageChangedEvent>(_onPageChanged);
     on<SmartPowerBatchControl>(_onBatchControl);
-    // on<WallLightFactoryReset>(_onFactoryReset);
+    on<FilterRecordsByDateEvent>(_filterRecordsByDate);
+    on<SelectDateEvent>(checkDayMonthYearSelected);
+    // SelectDateEvent
   }
 
   late PowerClampModel deviceStatus;
   final String deviceId;
   Timer? _timer;
   List<Map<String, dynamic>> phaseData = [];
+  int currentPage = 0;
+
+  List<EventDevice> record = [
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2024-10-23 11:15:43'),
+        value: '2286'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2024-10-23 11:15:35'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2024-10-23 11:15:29'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2024-10-23 11:15:25'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2024-10-23 11:15:21'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2024-10-23 11:15:17'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2024-10-23 11:15:07'),
+        value: '2286'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2024-10-23 11:14:47'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2024-10-23 11:14:40'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2024-10-23 11:14:23'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2024-10-23 11:14:13'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-10-23 11:15:43'),
+        value: '2286'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-10-23 11:15:35'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-10-23 11:15:29'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-10-23 11:15:25'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-10-23 11:15:21'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-10-23 11:15:17'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-10-23 11:15:07'),
+        value: '2286'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-10-23 11:14:47'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-10-23 11:14:40'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-10-23 11:14:23'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-10-23 11:14:13'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-23 11:15:43'),
+        value: '2286'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-23 11:15:35'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-23 11:15:29'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-23 11:15:25'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-23 11:15:21'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-23 11:15:17'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-23 11:15:07'),
+        value: '2286'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-23 11:14:47'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-23 11:14:40'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-23 11:14:23'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-23 11:14:13'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-11 11:15:43'),
+        value: '2286'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-11 11:15:35'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-12 11:15:29'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-13 11:15:25'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-14 11:15:21'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-15 11:15:17'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-16 11:15:07'),
+        value: '2286'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-17 11:14:47'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-18 11:14:40'),
+        value: '2284'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-19 11:14:23'),
+        value: '2285'),
+    EventDevice(
+        code: 'VoltageA',
+        eventTime: DateTime.parse('2023-02-20 11:14:13'),
+        value: '2284'),
+  ];
+
   FutureOr<void> _onFetchDeviceStatus(
       SmartPowerFetchDeviceEvent event, Emitter<SmartPowerState> emit) async {
     emit(SmartPowerLoading());
     try {
-      var status = await DevicesManagementApi().getPowerClampInfo(event.deviceId);
+      var status =
+          await DevicesManagementApi().getPowerClampInfo(event.deviceId);
       deviceStatus = PowerClampModel.fromJson(status);
 
       phaseData = [
@@ -48,21 +238,30 @@ class SmartPowerBloc extends Bloc<SmartPowerEvent, SmartPowerState> {
           'powerFactor': '${deviceStatus.status.phaseC.dataPoints[3].value}',
         },
       ];
-      emit(SmartPowerStatusLoaded(deviceStatus));
+      emit(SmartPowerStatusLoaded(deviceStatus, currentPage));
     } catch (e) {
       emit(SmartPowerError(e.toString()));
     }
   }
 
+  FutureOr<void> _onArrowPressed(
+      SmartPowerArrowPressedEvent event, Emitter<SmartPowerState> emit) {
+    currentPage = (currentPage + event.direction + 4) % 4;
+    emit(SmartPowerStatusLoaded(deviceStatus, currentPage));
+  }
+
+  FutureOr<void> _onPageChanged(
+      SmartPowerPageChangedEvent event, Emitter<SmartPowerState> emit) {
+    currentPage = event.page;
+    emit(SmartPowerStatusLoaded(deviceStatus, currentPage));
+  }
+
   Future<void> _onFetchBatchStatus(
       SmartPowerFetchBatchEvent event, Emitter<SmartPowerState> emit) async {
     emit(SmartPowerLoading());
     try {
-
       await DevicesManagementApi().getBatchStatus(event.devicesIds);
-      // deviceStatus =
+      emit(SmartPowerStatusLoaded(deviceStatus, currentPage));
-      //     SmartPowerStatusModel.fromJson(event.devicesIds.first, status.status);
-      emit(SmartPowerStatusLoaded(deviceStatus));
     } catch (e) {
       emit(SmartPowerError(e.toString()));
     }
@@ -76,30 +275,408 @@ class SmartPowerBloc extends Bloc<SmartPowerEvent, SmartPowerState> {
 
   FutureOr<void> _onBatchControl(
       SmartPowerBatchControl event, Emitter<SmartPowerState> emit) async {
-    // final oldValue = _getValueByCode(event.code);
+    emit(SmartPowerStatusLoaded(deviceStatus, currentPage));
+  }
 
-    // _updateLocalValue(event.code, event.value);
+  List<EventDevice> filteredRecords = [];
 
-    emit(SmartPowerStatusLoaded(deviceStatus));
+  int currentIndex = 0;
+  final List<String> views = ['Day', 'Month', 'Year'];
 
-    FutureOr<void> _onFactoryReset(
+  Widget dateSwitcher() {
-        WallLightFactoryReset event, Emitter<SmartPowerState> emit) async {
+    void switchView(int direction) {
-      emit(SmartPowerLoading());
+      currentIndex = (currentIndex + direction + views.length) % views.length;
-      try {
+    }
-        final response = await DevicesManagementApi().factoryReset(
+
-          event.factoryReset,
+    return StatefulBuilder(
-          event.deviceId,
+      builder: (BuildContext context, StateSetter setState) {
+        return Row(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            IconButton(
+              icon: const Icon(Icons.arrow_left),
+              onPressed: () {
+                setState(() {
+                  switchView(-1);
+                });
+              },
+            ),
+            Text(
+              views[currentIndex],
+              style: const TextStyle(fontSize: 15, fontWeight: FontWeight.w500),
+            ),
+            IconButton(
+              icon: const Icon(Icons.arrow_right),
+              onPressed: () {
+                setState(() {
+                  switchView(1);
+                });
+              },
+            ),
+          ],
+        );
+      },
     );
-        if (!response) {
-          emit(SmartPowerError('Failed'));
-        } else {
-          emit(SmartPowerStatusLoaded(deviceStatus));
-        }
-      } catch (e) {
-        emit(SmartPowerError(e.toString()));
-      }
-    }
   }
 
+  Future<DateTime?> selectMonthAndYear(BuildContext context) async {
+    int selectedYear = DateTime.now().year;
+    int selectedMonth = DateTime.now().month;
 
+    FixedExtentScrollController yearController =
+        FixedExtentScrollController(initialItem: selectedYear - 1905);
+    FixedExtentScrollController monthController =
+        FixedExtentScrollController(initialItem: selectedMonth - 1);
+
+    return await showDialog<DateTime>(
+      context: context,
+      builder: (BuildContext context) {
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Container(
+              color: Colors.white,
+              height: 350,
+              width: 350,
+              child: Column(
+                children: [
+                  const Padding(
+                    padding: EdgeInsets.all(16.0),
+                    child: Text(
+                      'Select Month and Year',
+                      style:
+                          TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+                    ),
+                  ),
+                  const Divider(),
+                  Expanded(
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.center,
+                      children: [
+                        const Spacer(),
+                        Expanded(
+                          child: ListWheelScrollView.useDelegate(
+                            controller: yearController,
+                            overAndUnderCenterOpacity: 0.2,
+                            itemExtent: 50,
+                            onSelectedItemChanged: (index) {
+                              selectedYear = 1905 + index;
+                            },
+                            childDelegate: ListWheelChildBuilderDelegate(
+                              builder: (context, index) {
+                                return Center(
+                                  child: Text(
+                                    (1905 + index).toString(),
+                                    style: const TextStyle(fontSize: 18),
+                                  ),
+                                );
+                              },
+                              childCount: 200,
+                            ),
+                          ),
+                        ),
+                        Expanded(
+                          flex: 2,
+                          child: ListWheelScrollView.useDelegate(
+                            controller: monthController,
+                            overAndUnderCenterOpacity: 0.2,
+                            itemExtent: 50,
+                            onSelectedItemChanged: (index) {
+                              selectedMonth = index + 1;
+                            },
+                            childDelegate: ListWheelChildBuilderDelegate(
+                              builder: (context, index) {
+                                return Center(
+                                  child: Text(
+                                    DateFormat.MMMM()
+                                        .format(DateTime(0, index + 1)),
+                                    style: const TextStyle(fontSize: 18),
+                                  ),
+                                );
+                              },
+                              childCount: 12,
+                            ),
+                          ),
+                        ),
+                        const Spacer(),
+                      ],
+                    ),
+                  ),
+                  const Divider(),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(
+                        horizontal: 16.0, vertical: 8.0),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        TextButton(
+                          child: const Text('Cancel'),
+                          onPressed: () {
+                            Navigator.of(context).pop();
+                          },
+                        ),
+                        TextButton(
+                          child: const Text('OK'),
+                          onPressed: () {
+                            final selectedDateTime =
+                                DateTime(selectedYear, selectedMonth);
+                            Navigator.of(context).pop(selectedDateTime);
+                          },
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Future<DateTime?> selectYear(BuildContext context) async {
+    int selectedYear = DateTime.now().year;
+    FixedExtentScrollController yearController =
+        FixedExtentScrollController(initialItem: selectedYear - 1905);
+
+    return await showDialog<DateTime>(
+      context: context,
+      builder: (BuildContext context) {
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Container(
+              color: Colors.white,
+              height: 350,
+              width: 350,
+              child: Column(
+                children: [
+                  const Padding(
+                    padding: EdgeInsets.all(16.0),
+                    child: Text(
+                      'Select Year',
+                      style:
+                          TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
+                    ),
+                  ),
+                  const Divider(),
+                  Expanded(
+                    child: ListWheelScrollView.useDelegate(
+                      controller: yearController,
+                      overAndUnderCenterOpacity: 0.2,
+                      itemExtent: 50,
+                      onSelectedItemChanged: (index) {
+                        selectedYear = 1905 + index;
+                      },
+                      childDelegate: ListWheelChildBuilderDelegate(
+                        builder: (context, index) {
+                          return Center(
+                            child: Text(
+                              (1905 + index).toString(),
+                              style: const TextStyle(fontSize: 18),
+                            ),
+                          );
+                        },
+                        childCount: 200,
+                      ),
+                    ),
+                  ),
+                  const Divider(),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(
+                        horizontal: 16.0, vertical: 8.0),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        TextButton(
+                          child: const Text('Cancel'),
+                          onPressed: () {
+                            Navigator.of(context)
+                                .pop(); // Pops without value, returning null
+                          },
+                        ),
+                        TextButton(
+                          child: const Text('OK'),
+                          onPressed: () {
+                            final selectedDateTime = DateTime(selectedYear);
+                            Navigator.of(context).pop(
+                                selectedDateTime); // Pops with the selected date
+                          },
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  Future<DateTime?> dayMonthYearPicker({
+    required BuildContext context,
+  }) async {
+    DateTime selectedDate = DateTime.now(); // Default selected date
+
+    return await showDialog<DateTime>(
+      context: context,
+      builder: (BuildContext context) {
+        return Column(
+          crossAxisAlignment: CrossAxisAlignment.center,
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            Container(
+              color: Colors.white,
+              height: 350,
+              width: 350,
+              child: Column(
+                children: [
+                  Expanded(
+                    child: CupertinoDatePicker(
+                      mode: CupertinoDatePickerMode.date,
+                      initialDateTime: DateTime.now(),
+                      minimumYear: 1900,
+                      maximumYear: DateTime.now().year,
+                      onDateTimeChanged: (DateTime newDateTime) {
+                        selectedDate =
+                            newDateTime; // Update the selected date when changed
+                      },
+                    ),
+                  ),
+                  const Divider(),
+                  Padding(
+                    padding: const EdgeInsets.symmetric(
+                        horizontal: 16.0, vertical: 8.0),
+                    child: Row(
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        TextButton(
+                          child: const Text('Cancel'),
+                          onPressed: () {
+                            Navigator.of(context)
+                                .pop(); // Dismiss the modal without returning a value
+                          },
+                        ),
+                        TextButton(
+                          child: const Text('OK'),
+                          onPressed: () {
+                            Navigator.of(context)
+                                .pop(selectedDate); // Return the selected date
+                          },
+                        ),
+                      ],
+                    ),
+                  ),
+                ],
+              ),
+            ),
+          ],
+        );
+      },
+    );
+  }
+
+  DateTime? dateTime = DateTime.now();
+  String formattedDate = DateFormat('yyyy/MM/dd').format(DateTime.now());
+  void checkDayMonthYearSelected(
+      SelectDateEvent event, Emitter<SmartPowerState> emit) async {
+    // emit(SmartPowerLoading());
+
+    if (currentIndex == 0) {
+      await dayMonthYearPicker(context: event.context).then(
+        (newDate) {
+          if (newDate != null) {
+            dateTime = newDate;
+            formattedDate = DateFormat('yyyy/MM/dd').format(dateTime!);
+
+            add(FilterRecordsByDateEvent(
+              selectedDate: dateTime!,
+              viewType: views[currentIndex],
+            ));
+          }
+        },
+      );
+    } else if (currentIndex == 1) {
+      await selectMonthAndYear(event.context).then(
+        (newDate) {
+          if (newDate != null) {
+            dateTime = newDate;
+            formattedDate = DateFormat('yyyy-MM').format(dateTime!);
+
+            add(FilterRecordsByDateEvent(
+              selectedDate: dateTime!,
+              viewType: views[currentIndex],
+            ));
+          }
+        },
+      );
+    } else if (currentIndex == 2) {
+      await selectYear(event.context).then(
+        (newDate) {
+          if (newDate != null) {
+            dateTime = newDate;
+            formattedDate = DateFormat('yyyy').format(dateTime!);
+
+            add(FilterRecordsByDateEvent(
+              selectedDate: dateTime!,
+              viewType: views[currentIndex],
+            ));
+          }
+        },
+      );
+    }
+    emit(DateSelectedState());
+  }
+
+  List<EnergyData> energyDataList = [];
+  void _filterRecordsByDate(
+      FilterRecordsByDateEvent event, Emitter<SmartPowerState> emit) {
+    print('dddddddddddddddddddd');
+    // emit(SmartPowerLoading());
+    if (event.viewType == 'Year') {
+      filteredRecords = record
+          .where((record) => record.eventTime!.year == event.selectedDate.year)
+          .toList();
+    } else if (event.viewType == 'Month') {
+      filteredRecords = record
+          .where((record) =>
+              record.eventTime!.year == event.selectedDate.year &&
+              record.eventTime!.month == event.selectedDate.month)
+          .toList();
+    } else if (event.viewType == 'Day') {
+      filteredRecords = record
+          .where((record) =>
+              record.eventTime!.year == event.selectedDate.year &&
+              record.eventTime!.month == event.selectedDate.month &&
+              record.eventTime!.day == event.selectedDate.day)
+          .toList();
+    }
+    String getMonthShortName(int month) {
+      final date = DateTime(0, month);
+      return DateFormat.MMM().format(date);
+    }
+
+    energyDataList = filteredRecords.map((eventDevice) {
+      return EnergyData(
+        event.viewType == 'Year'
+            ? getMonthShortName(
+                int.tryParse(DateFormat('MM').format(eventDevice.eventTime!))!)
+            : event.viewType == 'Month'
+                ? DateFormat('yyyy/MM/dd').format(eventDevice.eventTime!)
+                : DateFormat('HH:mm:ss').format(eventDevice.eventTime!),
+        double.parse(eventDevice.value!),
+      );
+    }).toList();
+
+    Future.delayed(const Duration(milliseconds: 500));
+    emit(SmartPowerStatusLoaded(deviceStatus, currentPage));
+
+    emit(FilterRecordsState(filteredRecords: energyDataList));
+  }
 }

lib/pages/device_managment/power_clamp/bloc/smart_power_event.dart

@@ -1,4 +1,5 @@
 import 'package:equatable/equatable.dart';
+import 'package:flutter/material.dart';
 import 'package:syncrow_web/pages/device_managment/all_devices/models/factory_reset_model.dart';
 
 class SmartPowerEvent extends Equatable {
@@ -57,6 +58,7 @@ class WallLightFactoryReset extends SmartPowerEvent {
   @override
   List<Object> get props => [deviceId, factoryReset];
 }
+
 class PageChangedEvent extends SmartPowerEvent {
   final int newPage;
   PageChangedEvent(this.newPage);
@@ -66,3 +68,26 @@ class PageArrowPressedEvent extends SmartPowerEvent {
   final int direction;
   PageArrowPressedEvent(this.direction);
 }
+
+class SmartPowerArrowPressedEvent extends SmartPowerEvent {
+  final int direction;
+  SmartPowerArrowPressedEvent(this.direction);
+}
+
+class SmartPowerPageChangedEvent extends SmartPowerEvent {
+  final int page;
+  SmartPowerPageChangedEvent(this.page);
+}
+
+class SelectDateEvent extends SmartPowerEvent {
+  BuildContext context;
+  SelectDateEvent({required this.context});
+}
+
+class FilterRecordsByDateEvent extends SmartPowerEvent {
+  final DateTime selectedDate;
+  final String viewType; // 'Day', 'Month', 'Year'
+
+  FilterRecordsByDateEvent(
+      {required this.selectedDate, required this.viewType});
+}

lib/pages/device_managment/power_clamp/bloc/smart_power_state.dart

@@ -1,5 +1,6 @@
 import 'package:equatable/equatable.dart';
 import 'package:syncrow_web/pages/device_managment/power_clamp/models/power_clamp_model.dart';
+import 'package:syncrow_web/pages/device_managment/power_clamp/view/power_chart.dart';
 
 class SmartPowerState extends Equatable {
   @override
@@ -9,16 +10,15 @@ class SmartPowerState extends Equatable {
 class SmartPowerInitial extends SmartPowerState {}
 
 class SmartPowerLoading extends SmartPowerState {}
+class DateSelectedState extends SmartPowerState {}
 
 class SmartPowerStatusLoaded extends SmartPowerState {
-  final PowerClampModel status;
+  final PowerClampModel deviceStatus;
-
+  final int currentPage;
-  SmartPowerStatusLoaded(this.status);
+  SmartPowerStatusLoaded(this.deviceStatus, this.currentPage);
-
-  @override
-  List<Object> get props => [status];
 }
 
+
 class SmartPowerError extends SmartPowerState {
   final String message;
 
@@ -55,3 +55,8 @@ class SmartPowerBatchStatusLoaded extends SmartPowerState {
   List<Object> get props => [status];
 }
 
+class FilterRecordsState extends SmartPowerState {
+  final List<EnergyData> filteredRecords;
+
+   FilterRecordsState({required this.filteredRecords});
+}

lib/pages/device_managment/power_clamp/models/device_event.dart

@@ -0,0 +1,23 @@
+
+class EventDevice {
+  final String? code;
+  final DateTime? eventTime;
+  final String? value;
+
+  EventDevice({
+    this.code,
+    this.eventTime,
+    this.value,
+  });
+
+  EventDevice.fromJson(Map<String, dynamic> json)
+      : code = json['code'] as String?,
+        eventTime = json['eventTime'] ,
+        value = json['value'] as String?;
+
+  Map<String, dynamic> toJson() => {
+        'code': code,
+        'eventTime': eventTime,
+        'value': value,
+      };
+}

lib/pages/device_managment/power_clamp/view/power_chart.dart

@@ -6,11 +6,17 @@ class EnergyConsumptionPage extends StatefulWidget {
   final List<dynamic> chartData;
   final double totalConsumption;
   final String date;
+  final String formattedDate;
+  final Widget widget;
+  final Function()? onTap;
 
   EnergyConsumptionPage({
     required this.chartData,
     required this.totalConsumption,
     required this.date,
+    required this.widget,
+    required this.onTap,
+    required this.formattedDate,
   });
 
   @override
@@ -84,6 +90,9 @@ class _EnergyConsumptionPageState extends State<EnergyConsumptionPage> {
               ),
             ],
           ),
+          Expanded(
+            child: Column(
+              children: [
                 Expanded(
                   child: Padding(
                     padding: const EdgeInsets.only(top: 15),
@@ -96,11 +105,14 @@ class _EnergyConsumptionPageState extends State<EnergyConsumptionPage> {
                               return 10.0;
                             },
                             touchTooltipData: LineTouchTooltipData(
-                        getTooltipColor: (touchTooltipItem) => Colors.white,
+                              getTooltipColor: (touchTooltipItem) =>
+                                  Colors.white,
                               tooltipRoundedRadius: 10.0,
                               tooltipPadding: const EdgeInsets.all(8.0),
-                        tooltipBorder: BorderSide(color: Colors.grey, width: 1),
+                              tooltipBorder:
-                        getTooltipItems: (List<LineBarSpot> touchedSpots) {
+                                  BorderSide(color: Colors.grey, width: 1),
+                              getTooltipItems:
+                                  (List<LineBarSpot> touchedSpots) {
                                 return touchedSpots.map((spot) {
                                   return LineTooltipItem(
                                     '${spot.x},\n ${spot.y.toStringAsFixed(2)} kWh',
@@ -180,8 +192,8 @@ class _EnergyConsumptionPageState extends State<EnergyConsumptionPage> {
                             spots: _chartData
                                 .asMap()
                                 .entries
-                          .map((entry) => FlSpot(
+                                .map((entry) => FlSpot(entry.key.toDouble(),
-                              entry.key.toDouble(), entry.value.consumption))
+                                    entry.value.consumption))
                                 .toList(),
                             isCurved: true,
                             color: ColorsManager.primaryColor.withOpacity(0.6),
@@ -216,6 +228,51 @@ class _EnergyConsumptionPageState extends State<EnergyConsumptionPage> {
                     ),
                   ),
                 ),
+                Padding(
+                  padding: const EdgeInsets.all(8.0),
+                  child: Row(
+                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                    children: [
+                      Expanded(
+                        flex: 2,
+                        child: Container(
+                          decoration: BoxDecoration(
+                            color: ColorsManager.graysColor,
+                            borderRadius: BorderRadius.circular(10),
+                          ),
+                          child:
+                              Expanded(child: Container(child: widget.widget)),
+                        ),
+                      ),
+                      Spacer(),
+                      Expanded(
+                        flex: 2,
+                        child: Container(
+                          padding: const EdgeInsets.all(5.0),
+                          decoration: BoxDecoration(
+                            color: ColorsManager.graysColor,
+                            borderRadius: BorderRadius.circular(10),
+                          ),
+                          child: InkWell(
+                            onTap: widget.onTap,
+                            child: Center(
+                              child: Container(
+                                  child: SizedBox(
+                                child: Padding(
+                                  padding: const EdgeInsets.all(5),
+                                  child: Text(widget.formattedDate),
+                                ),
+                              )),
+                            ),
+                          ),
+                        ),
+                      ),
+                    ],
+                  ),
+                )
+              ],
+            ),
+          ),
         ],
       ),
     );

lib/pages/device_managment/power_clamp/view/smart_power_device_control.dart

@@ -12,23 +12,17 @@ import 'package:syncrow_web/utils/constants/assets.dart';
 import 'package:syncrow_web/utils/helpers/responsice_layout_helper/responsive_layout_helper.dart';
 
 //Smart Power Clamp
-class SmartPowerDeviceControl extends StatefulWidget
+class SmartPowerDeviceControl extends StatelessWidget
     with HelperResponsiveLayout {
   final String deviceId;
 
   const SmartPowerDeviceControl({super.key, required this.deviceId});
 
-  @override
-  State<SmartPowerDeviceControl> createState() =>
-      _SmartPowerDeviceControlState();
-}
-
-class _SmartPowerDeviceControlState extends State<SmartPowerDeviceControl> {
   @override
   Widget build(BuildContext context) {
     return BlocProvider(
-      create: (context) => SmartPowerBloc(deviceId: widget.deviceId)
+      create: (context) => SmartPowerBloc(deviceId: deviceId)
-        ..add(SmartPowerFetchDeviceEvent(widget.deviceId)),
+        ..add(SmartPowerFetchDeviceEvent(deviceId)),
       child: BlocBuilder<SmartPowerBloc, SmartPowerState>(
         builder: (context, state) {
           final _blocProvider = BlocProvider.of<SmartPowerBloc>(context);
@@ -37,6 +31,7 @@ class _SmartPowerDeviceControlState extends State<SmartPowerDeviceControl> {
             return const Center(child: CircularProgressIndicator());
           } else if (state is SmartPowerStatusLoaded) {
             return _buildStatusControls(
+              currentPage: _blocProvider.currentPage,
               context: context,
               blocProvider: _blocProvider,
             );
@@ -51,24 +46,9 @@ class _SmartPowerDeviceControlState extends State<SmartPowerDeviceControl> {
   Widget _buildStatusControls({
     required BuildContext context,
     required SmartPowerBloc blocProvider,
+    required int currentPage,
   }) {
-    PageController _pageController = PageController();
+    PageController _pageController = PageController(initialPage: currentPage);
-    int _currentPage = 0;
-
-    void _onArrowPressed(int direction) {
-      setState(() {
-        _currentPage = (_currentPage + direction) % 3;
-        if (_currentPage < 0) {
-          _currentPage = 2;
-        }
-        _pageController.animateToPage(
-          _currentPage,
-          duration: Duration(milliseconds: 300),
-          curve: Curves.easeInOut,
-        );
-      });
-    }
-
     return Container(
       child: DeviceControlsContainer(
         child: Column(
@@ -84,7 +64,9 @@ class _SmartPowerDeviceControlState extends State<SmartPowerDeviceControl> {
                 ),
               ],
             ),
-            Row(
+            Padding(
+              padding: const EdgeInsets.all(10.0),
+              child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
                   PowerClampInfoCard(
@@ -113,16 +95,24 @@ class _SmartPowerDeviceControlState extends State<SmartPowerDeviceControl> {
                   ),
                 ],
               ),
+            ),
+            SizedBox(
+              height: 10,
+            ),
             PhaseWidget(
               phaseData: blocProvider.phaseData,
             ),
             Container(
-              padding: EdgeInsets.all(10),
+              padding: EdgeInsets.only(
+                top: 10,
+                left: 20,
+                right: 20,
+              ),
               decoration: BoxDecoration(
                 color: ColorsManager.whiteColors,
                 borderRadius: BorderRadius.circular(20),
               ),
-              height: 250,
+              height: 325,
               child: Column(
                 children: [
                   Container(
@@ -130,42 +120,62 @@ class _SmartPowerDeviceControlState extends State<SmartPowerDeviceControl> {
                       color: ColorsManager.graysColor,
                       borderRadius: BorderRadius.circular(20),
                     ),
-                    height: 60,
+                    height: 50,
                     child: Row(
                       mainAxisAlignment: MainAxisAlignment.spaceBetween,
                       children: [
                         IconButton(
-                          icon: Icon(Icons.arrow_left),
+                          icon: const Icon(Icons.arrow_left),
-                          onPressed: () => _onArrowPressed(-1),
+                          onPressed: () {
+                            blocProvider.add(SmartPowerArrowPressedEvent(-1));
+                            _pageController.previousPage(
+                              duration: Duration(milliseconds: 300),
+                              curve: Curves.easeInOut,
+                            );
+                          },
                         ),
                         Text(
-                          _currentPage == 0
+                          currentPage == 0
                               ? 'Total'
-                              : _currentPage == 0
+                              : currentPage == 1
                                   ? 'Phase A'
-                                  : _currentPage == 0
+                                  : currentPage == 2
                                       ? 'Phase B'
                                       : 'Phase C',
                           style: TextStyle(fontSize: 18),
                         ),
                         IconButton(
                           icon: Icon(Icons.arrow_right),
-                          onPressed: () => _onArrowPressed(1),
+                          onPressed: () {
+                            blocProvider.add(SmartPowerArrowPressedEvent(1));
+                            _pageController.nextPage(
+                              duration: Duration(milliseconds: 300),
+                              curve: Curves.easeInOut,
+                            );
+                          },
                         ),
                       ],
                     ),
                   ),
+                  SizedBox(
+                    height: 10,
+                  ),
                   Expanded(
                     child: PageView(
                       controller: _pageController,
                       onPageChanged: (int page) {
-                        setState(() {
+                        blocProvider.add(SmartPowerPageChangedEvent(page));
-                          _currentPage = page;
-                        });
                       },
                       children: [
                         EnergyConsumptionPage(
-                          chartData: [
+                          formattedDate: blocProvider.formattedDate,
+                          onTap: () {
+                            blocProvider.add(SelectDateEvent(context: context));
+                          },
+                          widget: blocProvider.dateSwitcher(),
+                          chartData: blocProvider.energyDataList.isNotEmpty
+                              ? blocProvider.energyDataList
+                              : [
                                   EnergyData('12:00 AM', 4.0),
                                   EnergyData('01:00 AM', 3.5),
                                   EnergyData('02:00 AM', 3.8),
@@ -177,14 +187,20 @@ class _SmartPowerDeviceControlState extends State<SmartPowerDeviceControl> {
                                   EnergyData('08:00 AM', 3.8),
                                   EnergyData('09:00 AM', 3.6),
                                   EnergyData('10:00 AM', 3.9),
-                            EnergyData('10:00 AM', 3.9),
                                   EnergyData('11:00 AM', 4.0),
                                 ],
                           totalConsumption: 10000,
                           date: '10/08/2024',
                         ),
                         EnergyConsumptionPage(
-                          chartData: [
+                          formattedDate: blocProvider.formattedDate,
+                          onTap: () {
+                            blocProvider.add(SelectDateEvent(context: context));
+                          },
+                          widget: blocProvider.dateSwitcher(),
+                          chartData: blocProvider.energyDataList.isNotEmpty
+                              ? blocProvider.energyDataList
+                              : [
                                   EnergyData('12:00 AM', 4.0),
                                   EnergyData('01:00 AM', 3.5),
                                   EnergyData('02:00 AM', 3.8),
@@ -196,14 +212,20 @@ class _SmartPowerDeviceControlState extends State<SmartPowerDeviceControl> {
                                   EnergyData('08:00 AM', 3.8),
                                   EnergyData('09:00 AM', 3.6),
                                   EnergyData('10:00 AM', 3.9),
-                            EnergyData('10:00 AM', 3.9),
                                   EnergyData('11:00 AM', 4.0),
                                 ],
                           totalConsumption: 10000,
                           date: '10/08/2024',
                         ),
                         EnergyConsumptionPage(
-                          chartData: [
+                          formattedDate: blocProvider.formattedDate,
+                          onTap: () {
+                            blocProvider.add(SelectDateEvent(context: context));
+                          },
+                          widget: blocProvider.dateSwitcher(),
+                          chartData: blocProvider.energyDataList.isNotEmpty
+                              ? blocProvider.energyDataList
+                              : [
                                   EnergyData('12:00 AM', 4.0),
                                   EnergyData('01:00 AM', 6.5),
                                   EnergyData('02:00 AM', 3.8),
@@ -215,7 +237,6 @@ class _SmartPowerDeviceControlState extends State<SmartPowerDeviceControl> {
                                   EnergyData('08:00 AM', 3.8),
                                   EnergyData('09:00 AM', 5.6),
                                   EnergyData('10:00 AM', 6.9),
-                            EnergyData('10:00 AM', 3.9),
                                   EnergyData('11:00 AM', 6.0),
                                 ],
                           totalConsumption: 10000,