adding basic widget for device managment

lib/pages/common/filter/filter_widget.dart

@@ -0,0 +1,73 @@
+import 'package:flutter/material.dart';
+import 'package:syncrow_web/utils/color_manager.dart';
+import 'package:syncrow_web/utils/style.dart';
+
+class FilterWidget extends StatelessWidget {
+  const FilterWidget({
+    super.key,
+    required this.size,
+    required this.tabs,
+    required this.selectedIndex,
+    required this.onTabChanged,
+  });
+
+  final Size size;
+  final List<String> tabs;
+  final int selectedIndex;
+  final Function(int) onTabChanged;
+
+  @override
+  Widget build(BuildContext context) {
+    return Container(
+      decoration: containerDecoration,
+      height: size.height * 0.05,
+      child: ListView.builder(
+        scrollDirection: Axis.horizontal,
+        itemCount: tabs.length,
+        shrinkWrap: true,
+        itemBuilder: (context, index) {
+          final isSelected = index == selectedIndex;
+          return InkWell(
+            onTap: () {
+              onTabChanged(index);
+            },
+            child: Container(
+              decoration: BoxDecoration(
+                color: ColorsManager.boxColor,
+                border: Border.all(
+                  color: isSelected ? Colors.blue : Colors.transparent,
+                  width: 2.0,
+                ),
+                borderRadius: _getBorderRadius(index),
+              ),
+              padding: const EdgeInsets.only(left: 10, right: 10),
+              child: Center(
+                child: Text(
+                  tabs[index],
+                  style: TextStyle(
+                    color: isSelected ? Colors.blue : Colors.black,
+                  ),
+                ),
+              ),
+            ),
+          );
+        },
+      ),
+    );
+  }
+
+  BorderRadius? _getBorderRadius(int index) {
+    if (index == 0) {
+      return const BorderRadius.only(
+        topLeft: Radius.circular(10),
+        bottomLeft: Radius.circular(10),
+      );
+    } else if (index == tabs.length - 1) {
+      return const BorderRadius.only(
+        topRight: Radius.circular(10),
+        bottomRight: Radius.circular(10),
+      );
+    }
+    return null;
+  }
+}