fix button and fix service sync simbg

resources/scss/components/_circle.scss

@@ -10,6 +10,7 @@
     width: 200px; /* Ukuran lingkaran */
     height: 200px;
     display: flex;
+    text-align: center;
     align-items: center;
     justify-content: center;
     background-color: var(--circle-color); /* Warna lingkaran utama */
@@ -17,6 +18,7 @@
     border: 6px solid white; /* Border putih */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
     position: absolute;
+    // overflow: hidden;
 
     .circle-content {
         width: 180px; /* Ukuran lingkaran dalam */
@@ -39,6 +41,12 @@
         font-weight: bold;
         margin: 0 5px;
         line-height: 1.5;
+        word-wrap: break-word; /* Break words if too long */
+        white-space: normal; /* Allow multi-line text */
+        text-align: center; /* Center text inside the circle */
+        overflow-wrap: break-word; /* Ensures breaking in modern browsers */
+        display: block; /* Ensures it respects container size */
+        max-width: 100%; /* Prevents exceeding the circle size */
     }
 
     .circle-content .document-total {
@@ -64,8 +72,8 @@
 
     .small-circle-container {
         position: absolute;
-        bottom: 0;
-        right: 0;
+        bottom: -10px;
+        right: -10px;
         width: 50px; /* Ukuran lingkaran kecil */
         height: 50px;
         background-color: #2d4f90; /* Warna lingkaran kecil */
@@ -75,6 +83,7 @@
         align-items: center;
         justify-content: center;
         box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Efek bayangan */
+        z-index: 10;
 
         .small-circle-content {
             width: 45px;

resources/scss/dashboards/_bigdata.scss

@@ -0,0 +1,78 @@
+//
+// bigdata.scss
+//
+
+.square {
+    height: 100px;
+    width: 100px;
+    position: absolute;
+    z-index: -1;
+}
+
+.dia-top-left-bottom-right:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+
+    top: 0;
+    left: 0;
+    background: linear-gradient(
+        to top right,
+        transparent calc(50% - 2px),
+        black,
+        transparent calc(50% + 2px)
+    );
+}
+
+.dia-top-right-bottom-left:after {
+    content: "";
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: linear-gradient(
+        to top left,
+        transparent calc(50% - 2px),
+        black,
+        transparent calc(50% + 2px)
+    );
+}
+
+#dashboard-fixed-wrapper {
+    background-image: url("../../../public/images/bg-dashboard.jpg");
+    background-size: cover;
+    background-position: center;
+}
+
+#dashboard-fixed-wrapper::before {
+    content: "";
+    position: absolute;
+    pointer-events: none; /* Prevents the overlay from blocking interaction */
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(
+        255,
+        255,
+        255,
+        0.7
+    ); /* Black overlay with 50% opacity */
+}
+
+#dashboard-fixed-wrapper {
+    max-width: 100vw; /* Ensures it doesn't exceed viewport */
+}
+
+#dashboard-fixed-container {
+    min-width: 1110px;
+    max-width: unset; /* Allow it to grow if needed */
+}
+
+@media (max-width: 768px) {
+    #dashboard-fixed-container {
+        transform: scale(0.8); /* Adjust the scale as needed */
+    }
+}

resources/scss/style.scss

@@ -59,3 +59,5 @@
 // Pages
 @import "pages/icon-demo";
 @import "pages/authentication";
+
+@import "dashboards/bigdata";