added dublicate widget function and added missed drag and drop

app/src/styles/pages/realTimeViz.scss

@@ -1,5 +1,5 @@
 @use "../abstracts/variables.scss" as *;
-@use "../abstracts/mixins.scss" as *;
+@use "../abstracts/mixins" as *;
 
 // Main Container
 .realTime-viz {
@@ -36,7 +36,7 @@
     }
   }
 
-  .zoon-wrapper {
+  .zone-wrapper {
     display: flex;
     background-color: var(--background-color);
     position: absolute;
@@ -55,11 +55,16 @@
     }
 
     .arrow {
-      background-color: var(--accent-color);
+      background-color: var(--highlight-accent-color);
       color: var(--background-color);
     }
 
     .zones-wrapper {
+      padding: 6px;
+      display: flex;
+      gap: 6px;
+      border-radius: #{$border-radius-medium};
+      overflow-x: auto;
       &::-webkit-scrollbar {
         display: none;
       }
@@ -82,28 +87,10 @@
     }
   }
 
-  .zoon-wrapper.bottom {
+  .zone-wrapper.bottom {
     bottom: 210px;
   }
 
-  @media (max-width: 1024px) {
-    width: 80%; // Increase width to take more space on smaller screens
-    height: 500px; // Reduce height to fit smaller screens
-    left: 50%; // Center horizontally
-
-    .main-container {
-      margin: 0 15px; // Reduce margin for better spacing
-    }
-
-    .zoon-wrapper {
-      bottom: 5px; // Adjust position for smaller screens
-
-      &.bottom {
-        bottom: 150px; // Adjust for bottom placement
-      }
-    }
-  }
-
   .content-container {
     display: flex;
     height: 100vh;
@@ -118,7 +105,7 @@
     margin: 0 30px;
     transition: height 0.3s ease, margin 0.3s ease;
 
-    .zoon-wrapper {
+    .zone-wrapper {
       display: flex;
       background-color: rgba(224, 223, 255, 0.5);
       position: absolute;
@@ -162,7 +149,6 @@
     background: white;
     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
     transition: all 0.3s ease;
-    border-radius: 6px;
     overflow: visible !important;
     z-index: $z-index-tools;
 
@@ -176,6 +162,7 @@
       flex-direction: column;
       gap: 10px;
       background-color: var(--background-color);
+      border-radius: #{$border-radius-small};
 
       &::-webkit-scrollbar {
         display: none;
@@ -276,8 +263,6 @@
       left: 0;
       right: 0;
 
-
-
       .panel-content {
         display: flex;
         flex-direction: row;
@@ -319,8 +304,8 @@
 }
 
 .playingFlase {
-  .zoon-wrapper {
-    bottom: 300px !important;
+  .zone-wrapper.bottom {
+    bottom: 300px;
   }
 }
 
@@ -329,9 +314,11 @@
   position: absolute;
   display: flex;
   background-color: var(--background-color);
-  padding: 5px;
-  border-radius: 8px;
+  padding: 2px;
+  border-radius: 2px;
   transition: transform 0.3s ease;
+  box-shadow: #{$box-shadow-medium};
+  // outline: 1px solid var(--border-color);
 
   .extra-Bs {
     display: flex;
@@ -361,13 +348,29 @@
     transition: background-color 0.3s ease;
     width: 18px;
     height: 18px;
-    display: flex;
-    justify-content: center;
-    // align-items: center;
+    @include flex-center;
     background-color: var(--accent-color);
     border: none;
     color: var(--background-color);
     border-radius: 4px;
+    .add-icon {
+      @include flex-center;
+      transition: rotate 0.2s;
+    }
+    path {
+      stroke: var(--primary-color);
+      stroke-width: 2;
+    }
+  }
+  .active {
+    background: #ffe3e0;
+    .add-icon {
+      rotate: 45deg;
+      path {
+        stroke: #f65648;
+        stroke-width: 2;
+      }
+    }
   }
 
   &.top {
@@ -493,13 +496,10 @@
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  background-color: rgba(0, 0, 0, 0.5);
-  color: white;
   border: none;
   cursor: pointer;
-  font-size: 20px;
-  padding: 6px;
   z-index: 10;
+  height: 100%;
 }
 
 .left-arrow {