Prepared the layout of all charts.

lib/pages/analytics/modules/energy_management/views/analytics_energy_management_view.dart

@@ -1,12 +1,47 @@
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart';
+import 'package:syncrow_web/utils/style.dart';
 
 class AnalyticsEnergyManagementView extends StatelessWidget {
   const AnalyticsEnergyManagementView({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return const Center(
+    return Padding(
-      child: Text('EnergyManagementView is Working!'),
+      padding: const EdgeInsets.all(32),
+      child: Row(
+        spacing: 20,
+        children: [
+          const Expanded(
+            flex: 2,
+            child: Column(
+              spacing: 20,
+              children: [
+                Expanded(child: TotalEnergyConsumptionChart()),
+                Expanded(child: EnergyConsumptionPerDeviceChart()),
+              ],
+            ),
+          ),
+          Expanded(
+            child: Container(
+              decoration: subSectionContainerDecoration.copyWith(
+                borderRadius: BorderRadius.circular(30),
+              ),
+              padding: const EdgeInsets.all(30),
+              child: const Column(
+                spacing: 10,
+                children: [
+                  Expanded(flex: 2, child: PowerClampEnergyDataWidget()),
+                  Expanded(child: EnergyConsumptionByPhasesChart()),
+                ],
+              ),
+            ),
+          ),
+        ],
+      ),
     );
   }
 }

lib/pages/analytics/modules/energy_management/widgets/energy_consumption_by_phases_chart.dart

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

lib/pages/analytics/modules/energy_management/widgets/energy_consumption_per_device_chart.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class EnergyConsumptionPerDeviceChart extends StatelessWidget {
+  const EnergyConsumptionPerDeviceChart({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: subSectionContainerDecoration.copyWith(
+        borderRadius: BorderRadius.circular(30),
+      ),
+      padding: const EdgeInsets.all(30),
+      child: const Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'Energy Consumption per Device',
+            style: TextStyle(
+              fontSize: 22,
+              fontWeight: FontWeight.w700,
+            ),
+          ),
+          SizedBox(height: 20),
+          Expanded(
+            child: Placeholder(),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_widget.dart

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

lib/pages/analytics/modules/energy_management/widgets/total_energy_consumption_chart.dart

@@ -0,0 +1,32 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class TotalEnergyConsumptionChart extends StatelessWidget {
+  const TotalEnergyConsumptionChart({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: subSectionContainerDecoration.copyWith(
+        borderRadius: BorderRadius.circular(30),
+      ),
+      padding: const EdgeInsets.all(30),
+      child: const Column(
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          Text(
+            'Total Energy Consumption',
+            style: TextStyle(
+              fontSize: 22,
+              fontWeight: FontWeight.w700,
+            ),
+          ),
+          SizedBox(height: 20),
+          Expanded(
+            child: Placeholder(),
+          ),
+        ],
+      ),
+    );
+  }
+}