implemented header, and power clamp data widgets.

lib/pages/analytics/models/power_clamp_energy_status.dart

@@ -0,0 +1,13 @@
+class PowerClampEnergyStatus {
+  final String iconPath;
+  final String title;
+  final String value;
+  final String unit;
+
+  const PowerClampEnergyStatus({
+    required this.iconPath,
+    required this.title,
+    required this.value,
+    required this.unit,
+  });
+}

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

@@ -0,0 +1,36 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+
+class PowerClampEnergyDataDeviceDropdown extends StatelessWidget {
+  const PowerClampEnergyDataDeviceDropdown({super.key});
+
+  static final _color = ColorsManager.blackColor.withValues(alpha: 0.8);
+
+  @override
+  Widget build(BuildContext context) {
+    return TextButton(
+      style: TextButton.styleFrom(
+        foregroundColor: _color,
+        shape: RoundedRectangleBorder(
+          borderRadius: BorderRadius.circular(16),
+          side: const BorderSide(
+            color: ColorsManager.greyColor,
+            width: 1,
+          ),
+        ),
+        backgroundColor: ColorsManager.transparentColor,
+        padding: const EdgeInsets.symmetric(
+          horizontal: 32,
+          vertical: 16,
+        ),
+      ),
+      child: const Text(
+        'Device 1',
+        style: TextStyle(
+          fontWeight: FontWeight.w700,
+        ),
+      ),
+      onPressed: () {},
+    );
+  }
+}

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

@@ -1,10 +1,80 @@
 import 'package:flutter/material.dart';
+import 'package:syncrow_web/pages/analytics/models/power_clamp_energy_status.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_data_device_dropdown.dart';
+import 'package:syncrow_web/pages/analytics/modules/energy_management/widgets/power_clamp_energy_status_widget.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/constants/assets.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:uuid/uuid.dart';
 
 class PowerClampEnergyDataWidget extends StatelessWidget {
   const PowerClampEnergyDataWidget({super.key});
 
   @override
   Widget build(BuildContext context) {
-    return const Placeholder();
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        _buildHeader(context),
+        Text(
+          'Device ID:',
+          style: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.textPrimaryColor,
+            fontWeight: FontWeight.w400,
+            fontSize: 12,
+          ),
+        ),
+        const SizedBox(height: 6),
+        Text(
+          const Uuid().v4(),
+          style: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.blackColor,
+            fontWeight: FontWeight.w400,
+            fontSize: 12,
+          ),
+        ),
+        const Divider(),
+        const PowerClampEnergyStatusWidget(
+          status: [
+            PowerClampEnergyStatus(
+              iconPath: Assets.powerActiveIcon,
+              title: 'Active',
+              value: '700',
+              unit: 'W',
+            ),
+            PowerClampEnergyStatus(
+              iconPath: Assets.voltMeterIcon,
+              title: 'Current',
+              value: '3.06',
+              unit: 'A',
+            ),
+            PowerClampEnergyStatus(
+              iconPath: Assets.frequencyIcon,
+              title: 'Frequency',
+              value: '50',
+              unit: 'Hz',
+            ),
+          ],
+        ),
+      ],
+    );
   }
-}
+
+  Widget _buildHeader(BuildContext context) {
+    return Row(
+      mainAxisSize: MainAxisSize.min,
+      children: [
+        Text(
+          'Smart Power Clamp',
+          style: context.textTheme.headlineSmall?.copyWith(
+            fontWeight: FontWeight.w700,
+            color: ColorsManager.vividBlue.withValues(alpha: 0.6),
+            fontSize: 18,
+          ),
+        ),
+        const Spacer(),
+        const PowerClampEnergyDataDeviceDropdown(),
+      ],
+    );
+  }
+}

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

@@ -0,0 +1,90 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:syncrow_web/pages/analytics/models/power_clamp_energy_status.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/extension/build_context_x.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class PowerClampEnergyStatusWidget extends StatelessWidget {
+  const PowerClampEnergyStatusWidget({
+    super.key,
+    required this.status,
+  });
+
+  final List<PowerClampEnergyStatus> status;
+
+  @override
+  Widget build(BuildContext context) {
+    return DecoratedBox(
+      decoration: secondarySection,
+      child: ListView.separated(
+        itemCount: status.length,
+        itemBuilder: (context, index) => _buildItem(context, status[index]),
+        separatorBuilder: _separatorBuilder,
+        shrinkWrap: true,
+      ),
+    );
+  }
+
+  Widget _buildItem(BuildContext context, PowerClampEnergyStatus item) {
+    return ListTile(
+      leading: SvgPicture.asset(
+        item.iconPath,
+        fit: BoxFit.scaleDown,
+        alignment: AlignmentDirectional.center,
+        height: 24,
+        width: 24,
+      ),
+      title: Text(
+        item.title,
+        style: context.textTheme.bodySmall?.copyWith(
+          color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
+          fontWeight: FontWeight.w400,
+          fontSize: 16,
+        ),
+      ),
+      trailing: Text.rich(
+        TextSpan(
+          style: context.textTheme.bodySmall?.copyWith(
+            color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
+            fontWeight: FontWeight.w400,
+            fontSize: 16,
+          ),
+          children: [
+            TextSpan(text: '${item.value} '),
+            TextSpan(
+              text: item.unit,
+              style: context.textTheme.bodySmall?.copyWith(
+                color: ColorsManager.textPrimaryColor.withValues(alpha: 0.83),
+                fontWeight: FontWeight.w400,
+                fontSize: 12,
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  Widget _separatorBuilder(context, index) {
+    return DecoratedBox(
+      decoration: BoxDecoration(
+        border: Border(
+          bottom: BorderSide(
+            color: ColorsManager.greyColor.withValues(alpha: 0.5),
+            width: 1,
+          ),
+        ),
+        boxShadow: [
+          BoxShadow(
+            color: ColorsManager.blackColor.withValues(alpha: 0.1),
+            offset: const Offset(0, -1),
+            blurRadius: 3,
+            spreadRadius: 1,
+          ),
+        ],
+      ),
+      child: const SizedBox(height: 1),
+    );
+  }
+}