fix button and fix service sync simbg

app/Services/ServiceClient.php

@@ -42,8 +42,14 @@ class ServiceClient
             }
 
             $response = $this->client->request($method, $this->baseUrl . $url, $options);
+            $responseBody = (string) $response->getBody();
 
-            $resultResponse = json_decode($response->getBody(), true);
+            if (!str_contains($response->getHeaderLine('Content-Type'), 'application/json')) {
+                \Log::error('Unexpected response format: ' . $responseBody);
+                return $this->resError('API response is not JSON');
+            }
+
+            $resultResponse = json_decode($responseBody, true, 512, JSON_THROW_ON_ERROR);
             return $this->resSuccess($resultResponse);
         } catch (Exception $e) {
             \Log::error('error from client service'. $e->getMessage());

app/Services/ServiceSIMBG.php

@@ -37,63 +37,66 @@ class ServiceSIMBG
     }
 
     public function getToken(){
-        $url = "/api/user/v1/auth/login/";
-        $body = [
-            'email' => $this->email,
-            'password' => $this->password,
-        ];
-        
-        $res = $this->service_client->post($url, $body);
-        if(!$res->original['success']){
-            Log::error("Token not retrieved ", ['response' => $res]);
-            return null;
+        try{
+            $url = "/api/user/v1/auth/login/";
+            $body = [
+                'email' => $this->email,
+                'password' => $this->password,
+            ];
+            
+            $res = $this->service_client->post($url, $body);
+            if(!$res->original['success']){
+                Log::error("Token not retrieved ", ['response' => $res]);
+                throw new Exception("Token not retrieved.");
+            }
+            return $res;
+        }catch(Exception $e){
+            Log::error("Error on method get token ", ['response' => $e->getMessage()]);
+            throw $e;
         }
-        return $res;
     }
 
     public function syncIndexIntegration($uuid, $token)
     {
-        $url = "/api/pbg/v1/detail/" . $uuid . "/retribution/indeks-terintegrasi/";
-
-        $headers = [
-            'Authorization' => "Bearer " . $token,
-        ];
+        try{
+            $url = "/api/pbg/v1/detail/" . $uuid . "/retribution/indeks-terintegrasi/";
     
-        $res = $this->service_client->get($url, $headers);
-    
-        if (empty($res->original['success']) || !$res->original['success']) {
-            // Log error
-            Log::error("API response indicates failure", ['url' => $url, 'uuid' => $uuid]);
-            return false;
-        }
-    
-        $data = $res->original['data']['data'] ?? null;
-        if (!$data) {
-            Log::error("No valid data returned from API", ['url' => $url, 'uuid' => $uuid]);
-            return false;
-        }
-    
-        $resultData = PbgTaskIndexIntegrations::updateOrCreate(
-            ['pbg_task_uid' => $uuid],
-            [
-                'indeks_fungsi_bangunan' => $data['indeks_fungsi_bangunan'] ?? null,
-                'indeks_parameter_kompleksitas' => $data['indeks_parameter_kompleksitas'] ?? null,
-                'indeks_parameter_permanensi' => $data['indeks_parameter_permanensi'] ?? null,
-                'indeks_parameter_ketinggian' => $data['indeks_parameter_ketinggian'] ?? null,
-                'faktor_kepemilikan' => $data['faktor_kepemilikan'] ?? null,
-                'indeks_terintegrasi' => $data['indeks_terintegrasi'] ?? null,
-                'total' => $data['total'] ?? null,
-            ]
-        );
-    
-        // Log success
-        if ($resultData->wasRecentlyCreated) {
-            Log::info("integration created successfully", ['uuid' => $uuid]);
-        } else {
-            Log::info("integration updated successfully", ['uuid' => $uuid]);
-        }
+            $headers = [
+                'Authorization' => "Bearer " . $token,
+            ];
         
-        return true;
+            $res = $this->service_client->get($url, $headers);
+        
+            if (empty($res->original['success']) || !$res->original['success']) {
+                // Log error
+                Log::error("API response indicates failure", ['url' => $url, 'uuid' => $uuid]);
+                return false;
+            }
+        
+            $data = $res->original['data']['data'] ?? null;
+            if (!$data) {
+                Log::error("No valid data returned from API", ['url' => $url, 'uuid' => $uuid]);
+                return false;
+            }
+        
+            $resultData = PbgTaskIndexIntegrations::updateOrCreate(
+                ['pbg_task_uid' => $uuid],
+                [
+                    'indeks_fungsi_bangunan' => $data['indeks_fungsi_bangunan'] ?? null,
+                    'indeks_parameter_kompleksitas' => $data['indeks_parameter_kompleksitas'] ?? null,
+                    'indeks_parameter_permanensi' => $data['indeks_parameter_permanensi'] ?? null,
+                    'indeks_parameter_ketinggian' => $data['indeks_parameter_ketinggian'] ?? null,
+                    'faktor_kepemilikan' => $data['faktor_kepemilikan'] ?? null,
+                    'indeks_terintegrasi' => $data['indeks_terintegrasi'] ?? null,
+                    'total' => $data['total'] ?? null,
+                ]
+            );
+            
+            return true;
+        }catch (Exception $e){
+            Log::error('error when sync index integration ', ['index integration'=> $e->getMessage()]);
+            throw $e;
+        }
     }
 
     public function syncTaskList()
@@ -182,22 +185,10 @@ class ServiceSIMBG
                         'created_at' => now(),
                     ];
 
-                    $save_integration = $this->syncIndexIntegration($item['uid'], $token);
-                    if (!$save_integration) {
-                        $importDatasource->update([
-                            'status' => ImportDatasourceStatus::Failed->value,
-                            'message' => "Successfully processed: $savedCount, Failed: $failedCount"
-                        ]);
-                    }
-
-                    $save_detail = $this->syncTaskDetailSubmit($item['uid'], $token);
-                    if( !$save_detail ) {
-                        $importDatasource->update([
-                            'status' => ImportDatasourceStatus::Failed->value,
-                            'message' => "Successfully processed: $savedCount, Failed: $failedCount"
-                        ]);
-                    }
+                    $this->syncIndexIntegration($item['uid'], $token);
 
+                    $this->syncTaskDetailSubmit($item['uid'], $token);
+                    
                     $savedCount++;
                 } catch (Exception $e) {
                     $failedCount++;
@@ -236,79 +227,83 @@ class ServiceSIMBG
 
     public function syncTaskDetailSubmit($uuid, $token)
     {
-        $url = "/api/pbg/v1/detail/" . $uuid . "/retribution/submit/";
-        $headers = [
-            'Authorization' => "Bearer " . $token,
-        ];
-
-        $res = $this->service_client->get($url, $headers);
-
-        if (empty($res->original['success']) || !$res->original['success']) {
-            // Log error
-            Log::error("API response indicates failure", ['url' => $url, 'uuid' => $uuid]);
-            return false;
-        }
-
-        $data = $res->original['data']['data'] ?? [];
-        if (empty($data)) {
-            Log::error("No data returned from API", ['url' => $url, 'uuid' => $uuid]);
-            return false;
-        }
-
-        $detailCreatedAt = isset($data['created_at']) 
-        ? Carbon::parse($data['created_at'])->format('Y-m-d H:i:s') 
-        : null;
-
-        $detailUpdatedAt = isset($data['updated_at']) 
-        ? Carbon::parse($data['updated_at'])->format('Y-m-d H:i:s') 
-        : null;
-
-        $pbg_task_retributions = PbgTaskRetributions::updateOrCreate(
-            ['detail_id' => $data['id']],
-            [
-                'detail_uid' => $data['uid'] ?? null,
-                'detail_created_at' => $detailCreatedAt ?? null,
-                'detail_updated_at' => $detailUpdatedAt ?? null,
-                'luas_bangunan' => $data['luas_bangunan'] ?? null,
-                'indeks_lokalitas' => $data['indeks_lokalitas'] ?? null,
-                'wilayah_shst' => $data['wilayah_shst'] ?? null,
-                'kegiatan_id' => $data['kegiatan']['id'] ?? null,
-                'kegiatan_name' => $data['kegiatan']['name'] ?? null,
-                'nilai_shst' => $data['nilai_shst'] ?? null,
-                'indeks_terintegrasi' => $data['indeks_terintegrasi'] ?? null,
-                'indeks_bg_terbangun' => $data['indeks_bg_terbangun'] ?? null,
-                'nilai_retribusi_bangunan' => $data['nilai_retribusi_bangunan'] ?? null,
-                'nilai_prasarana' => $data['nilai_prasarana'] ?? null,
-                'created_by' => $data['created_by'] ?? null,
-                'pbg_document' => $data['pbg_document'] ?? null,
-                'underpayment' => $data['underpayment'] ?? null,
-                'skrd_amount' => $data['skrd_amount'] ?? null,
-                'pbg_task_uid' => $uuid,
-            ]
-        );
-
-        $pbg_task_retribution_id = $pbg_task_retributions->id;
-
-        $prasaranaData = $data['prasarana'] ?? [];
-        if (!empty($prasaranaData)) {
-            $insertData = array_map(fn($item) => [
-                'pbg_task_uid' => $uuid,
-                'pbg_task_retribution_id' => $pbg_task_retribution_id,
-                'prasarana_id' => $item['id'] ?? null,
-                'prasarana_type' => $item['prasarana_type'] ?? null,
-                'building_type' => $item['building_type'] ?? null,
-                'total' => $item['total'] ?? null,
-                'quantity' => $item['quantity'] ?? null,
-                'unit' => $item['unit'] ?? null,
-                'index_prasarana' => $item['index_prasarana'] ?? null,
-            ], $prasaranaData);
+        try{
+            $url = "/api/pbg/v1/detail/" . $uuid . "/retribution/submit/";
+            $headers = [
+                'Authorization' => "Bearer " . $token,
+            ];
     
-            // Use bulk insert or upsert for faster database operation
-            PbgTaskPrasarana::upsert($insertData, ['prasarana_id']);
-        }
+            $res = $this->service_client->get($url, $headers);
+    
+            if (empty($res->original['success']) || !$res->original['success']) {
+                // Log error
+                Log::error("API response indicates failure", ['url' => $url, 'uuid' => $uuid]);
+                return false;
+            }
+    
+            $data = $res->original['data']['data'] ?? [];
+            if (empty($data)) {
+                Log::error("No data returned from API", ['url' => $url, 'uuid' => $uuid]);
+                return false;
+            }
+    
+            $detailCreatedAt = isset($data['created_at']) 
+            ? Carbon::parse($data['created_at'])->format('Y-m-d H:i:s') 
+            : null;
+    
+            $detailUpdatedAt = isset($data['updated_at']) 
+            ? Carbon::parse($data['updated_at'])->format('Y-m-d H:i:s') 
+            : null;
+    
+            $pbg_task_retributions = PbgTaskRetributions::updateOrCreate(
+                ['detail_id' => $data['id']],
+                [
+                    'detail_uid' => $data['uid'] ?? null,
+                    'detail_created_at' => $detailCreatedAt ?? null,
+                    'detail_updated_at' => $detailUpdatedAt ?? null,
+                    'luas_bangunan' => $data['luas_bangunan'] ?? null,
+                    'indeks_lokalitas' => $data['indeks_lokalitas'] ?? null,
+                    'wilayah_shst' => $data['wilayah_shst'] ?? null,
+                    'kegiatan_id' => $data['kegiatan']['id'] ?? null,
+                    'kegiatan_name' => $data['kegiatan']['name'] ?? null,
+                    'nilai_shst' => $data['nilai_shst'] ?? null,
+                    'indeks_terintegrasi' => $data['indeks_terintegrasi'] ?? null,
+                    'indeks_bg_terbangun' => $data['indeks_bg_terbangun'] ?? null,
+                    'nilai_retribusi_bangunan' => $data['nilai_retribusi_bangunan'] ?? null,
+                    'nilai_prasarana' => $data['nilai_prasarana'] ?? null,
+                    'created_by' => $data['created_by'] ?? null,
+                    'pbg_document' => $data['pbg_document'] ?? null,
+                    'underpayment' => $data['underpayment'] ?? null,
+                    'skrd_amount' => $data['skrd_amount'] ?? null,
+                    'pbg_task_uid' => $uuid,
+                ]
+            );
+    
+            $pbg_task_retribution_id = $pbg_task_retributions->id;
+    
+            $prasaranaData = $data['prasarana'] ?? [];
+            if (!empty($prasaranaData)) {
+                $insertData = array_map(fn($item) => [
+                    'pbg_task_uid' => $uuid,
+                    'pbg_task_retribution_id' => $pbg_task_retribution_id,
+                    'prasarana_id' => $item['id'] ?? null,
+                    'prasarana_type' => $item['prasarana_type'] ?? null,
+                    'building_type' => $item['building_type'] ?? null,
+                    'total' => $item['total'] ?? null,
+                    'quantity' => $item['quantity'] ?? null,
+                    'unit' => $item['unit'] ?? null,
+                    'index_prasarana' => $item['index_prasarana'] ?? null,
+                ], $prasaranaData);
+        
+                // Use bulk insert or upsert for faster database operation
+                PbgTaskPrasarana::upsert($insertData, ['prasarana_id']);
+            }
+            return true;
 
-        Log::info("retribution and prasarana successfully", ['uuid' => $uuid]);
-        return true;
+        }catch(Exception $e){
+            Log::error("Failed to sync task detail submit", ['error' => $e->getMessage(), 'uuid' => $uuid]);
+            throw $e;
+        }
     }
 
 }

resources/js/dashboards/bigdata.js

@@ -8,10 +8,10 @@ class BigData {
         try {
             this.filterYear = new Date().getFullYear(); // Set initial year
 
-            let yearInput = document.querySelector("#yearPicker");
+            let yearSelect = document.querySelector("#yearPicker");
             let filterButton = document.querySelector("#btnFilterYear");
 
-            if (!yearInput || !filterButton) {
+            if (!yearSelect || !filterButton) {
                 console.error(
                     "Element #yearPicker or #btnFilterYear not found."
                 );
@@ -19,18 +19,15 @@ class BigData {
             }
 
             // Set default value for input
-            yearInput.value = this.filterYear;
+            yearSelect.value = this.filterYear;
 
-            // Handle manual input (pressing Enter)
-            yearInput.addEventListener("keypress", (event) => {
-                if (event.key === "Enter") {
-                    this.updateYear(yearInput.value);
-                }
+            yearSelect.addEventListener("change", () => {
+                this.updateYear(yearSelect.value);
             });
 
             // Handle button click
             filterButton.addEventListener("click", () => {
-                this.updateYear(yearInput.value);
+                this.updateYear(yearSelect.value);
             });
 
             console.log("init filter this year", this.filterYear);
@@ -594,32 +591,55 @@ document.addEventListener("DOMContentLoaded", async function (e) {
     await new BigData().init();
 });
 
+// function resizeDashboard() {
+//     //Target Width
+//     let targetElement = document.getElementById("dashboard-fixed-wrapper");
+//     let targetWidth = targetElement.offsetWidth;
+//     //console.log("TARGET ",targetWidth);
+
+//     //Real Object Width
+//     let dashboardElement = document.getElementById("dashboard-fixed-container");
+//     let dashboardWidth = 1110; //dashboardElement.offsetWidth;
+//     //console.log("CURRENT ",dashboardWidth);
+
+//     if (targetWidth > dashboardWidth) {
+//         targetWidth = dashboardWidth;
+//     }
+
+//     dashboardElement.style.transformOrigin = "left top";
+//     dashboardElement.style.transition = "transform 0.2s ease-in-out";
+//     dashboardElement.style.transform =
+//         "scale(" + (targetWidth / dashboardWidth).toFixed(2) + ")";
+//     //console.log("SCALE ", (targetWidth/dashboardWidth).toFixed(2));
+// }
+
+// window.addEventListener("load", function () {
+//     resizeDashboard();
+// });
+
+// window.addEventListener("resize", function () {
+//     resizeDashboard();
+// });
+
 function resizeDashboard() {
-    //Target Width
     let targetElement = document.getElementById("dashboard-fixed-wrapper");
-    let targetWidth = targetElement.offsetWidth;
-    //console.log("TARGET ",targetWidth);
-
-    //Real Object Width
     let dashboardElement = document.getElementById("dashboard-fixed-container");
-    let dashboardWidth = 1110; //dashboardElement.offsetWidth;
-    //console.log("CURRENT ",dashboardWidth);
 
-    if (targetWidth > dashboardWidth) {
-        targetWidth = dashboardWidth;
-    }
+    let targetWidth = targetElement.offsetWidth;
+    let dashboardWidth = 1110;
+
+    let scaleFactor = (targetWidth / dashboardWidth).toFixed(2);
+
+    // Prevent scaling beyond 1 (100%) to avoid overflow
+    scaleFactor = Math.min(scaleFactor, 1);
 
     dashboardElement.style.transformOrigin = "left top";
     dashboardElement.style.transition = "transform 0.2s ease-in-out";
-    dashboardElement.style.transform =
-        "scale(" + (targetWidth / dashboardWidth).toFixed(2) + ")";
-    //console.log("SCALE ", (targetWidth/dashboardWidth).toFixed(2));
+    dashboardElement.style.transform = `scale(${scaleFactor})`;
+
+    // Ensure horizontal scrolling is allowed if necessary
+    document.body.style.overflowX = "auto";
 }
 
-window.addEventListener("load", function () {
-    resizeDashboard();
-});
-
-window.addEventListener("resize", function () {
-    resizeDashboard();
-});
+window.addEventListener("load", resizeDashboard);
+window.addEventListener("resize", resizeDashboard);

resources/js/data-settings/index.js

@@ -52,13 +52,16 @@ class DataSettings {
                     name: "Actions",
                     width: "120px",
                     formatter: function (cell) {
-                        console.log("cell data", cell);
                         return gridjs.html(`
-												<div class="d-flex justify-items-end gap-10">
-												<a href="/data-settings/${cell}/edit" class="btn btn-yellow me-2">Update</a>
-												<button class="btn btn-red btn-delete btn-delete-data-settings" data-id="${cell}">Delete</button>
-												</div>
-											`);
+                            <div class="d-flex justify-content-center gap-2">
+                                <a href="/data-settings/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
+                                    <i class='bx bx-edit'></i>
+                                </a>
+                                <button class="btn btn-sm btn-red d-inline-flex align-items-center justify-content-centerbtn-delete-data-settings" data-id="${cell}">
+                                    <i class='bx bxs-trash' ></i>
+                                </button>
+                            </div>
+                        `);
                     },
                 },
             ],

resources/js/master/users/users.js

@@ -22,9 +22,12 @@ class UsersTable {
                     name: "Action",
                     formatter: (cell) =>
                         gridjs.html(`
-                      <div class="d-flex justify-content-end gap-x-2">
-                      <a href="/master/users/${cell}/edit" class="btn btn-yellow me-2">Update</a>
-                      `),
+                            <div class="d-flex justify-content-center">
+                                <a href="/master/users/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
+                                    <i class='bx bx-edit'></i>
+                                </a>
+                            </div>
+                        `),
                 },
             ],
             pagination: {

resources/js/menus/index.js

@@ -56,9 +56,14 @@ class Menus {
                     name: "Action",
                     formatter: (cell) =>
                         gridjs.html(`
-                      <div class="d-flex justify-content-end gap-x-2">
-                      <a href="/menus/${cell}/edit" class="btn btn-yellow me-2">Update</a>
-                      <button class="btn btn-red btn-delete btn-delete-menu" data-id="${cell}">Delete</button>
+                        <div class="d-flex justify-content-center align-items-center gap-2">
+                            <a href="/menus/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
+                                <i class='bx bx-edit'></i>
+                            </a>
+                            <button data-id="${cell}" class="btn btn-red btn-sm btn-delete-menu d-inline-flex align-items-center justify-content-center">
+                                <i class='bx bxs-trash' ></i>
+                            </button>
+                        </div>
                       `),
                 },
             ],

resources/js/pbg-task/index.js

@@ -25,8 +25,8 @@ class PbgTasks {
                     name: "Action",
                     formatter: function (cell) {
                         return gridjs.html(`
-                            <div class="d-flex justify-items-end gap-10">
-                                <a href="/pbg-task/${cell}" class="btn btn-yellow">Detail</a
+                            <div class="d-flex justify-content-center align-items-center gap-2">
+                                <a href="/pbg-task/${cell}" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">Detail</a
                             </div>
                         `);
                     },

resources/js/roles/index.js

@@ -52,10 +52,16 @@ class Roles {
                     name: "Action",
                     formatter: (cell) =>
                         gridjs.html(`
-                            <div class="d-flex justify-content-end gap-x-2">
-                                <a href="/roles/${cell}/edit" class="btn btn-yellow me-2">Update</a>
-                                <a href="/roles/role-menu/${cell}" class="btn btn-yellow me-2">Role Menu</a>
-                                <button class="btn btn-red btn-delete-role" data-id="${cell}">Delete</button>
+                            <div class="d-flex justify-content-center gap-2">
+                                <a href="/roles/${cell}/edit" class="btn btn-yellow btn-sm d-inline-flex align-items-center justify-content-center">
+                                    <i class='bx bx-edit'></i>
+                                </a>
+                                <a href="/roles/role-menu/${cell}" class="btn btn-primary btn-sm d-inline-flex align-items-center justify-content-center">
+                                    Role Menu
+                                </a>
+                                <button data-id="${cell}" class="btn btn-sm btn-red btn-delete-role d-inline-flex align-items-center justify-content-center">
+                                    <i class='bx bxs-trash' ></i>
+                                </button>
                             </div>
                         `),
                 },

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";

resources/views/dashboards/bigdata.blade.php

@@ -1,66 +1,36 @@
 @extends('layouts.vertical', ['subtitle' => 'Dashboards'])
 
+@section('css')
+@vite(['resources/scss/dashboards/_bigdata.scss'])
+@endsection
+
 @section('content')
 
 @include('layouts.partials/page-title', ['title' => 'Dashboards', 'subtitle' => 'Dashboard Pimpinan'])
 
-<style>
-    .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('/images/bg-dashboard.jpg');background-size: cover;background-position: center;
-    }
-
-    #dashboard-fixed-wrapper::before {
-      content: "";
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(255, 255, 255, 0.7); /* Black overlay with 50% opacity */
-    }
-</style>
-
 <div id="dashboard-fixed-wrapper" class="row">
-    <h2 style="margin-top:30px;margin-left:15px;color:#911701">
-        <span style="float:right;font-size:14px;margin-right:25px;color:black">Terakhir di update - {{$latest_created}}</span>
-        ANALISA BIG DATA PROSES PBG <br> 
-        MELALUI APLIKASI SIBEDAS PBG
-
-    </h2>
-
-    <div class="d-flex justify-content-end">
-        <input type="number" class="me-3" id="yearPicker" name="year">
-        <button class="btn btn-sm btn-primary" id="btnFilterYear">filter</button>
+    <div class="col-12">
+        <h2 class="mt-3 ms-2 text-danger">
+            <span class="float-end fs-6 me-3 text-black d-block d-sm-inline text-end">Terakhir di update - {{$latest_created}}</span>
+            ANALISA BIG DATA PROSES PBG <br> 
+            MELALUI APLIKASI SIBEDAS PBG
+    
+        </h2>
     </div>
-    <div id="dashboard-fixed-container" style="width:1110px;height:770px;position:relative;margin:auto;">
+
+    <div class="row d-flex justify-content-end">
+        <div class="col-12 col-sm-6 col-md-3">
+            <div class="d-flex flex-sm-nowrap flex-wrap justify-content-end gap-2">
+                <select class="form-select w-auto" id="yearPicker" name="year" style="min-width: 100px;">
+                @for ($i = date('Y'); $i > date('Y') - 5; $i--)
+                    <option value="{{ $i }}" {{ $i == date('Y') ? 'selected' : '' }}>{{ $i }}</option>
+                @endfor
+                </select>
+                <button class="btn btn-sm btn-primary" id="btnFilterYear">Filter</button>
+            </div>
+        </div>
+    </div>
+    <div id="dashboard-fixed-container" class="row" style="width:1110px;height:770px;position:relative;margin:auto;">
         @component('components.circle', [
             'document_title' => 'Kekurangan Potensi',
             'document_color' => '#911701',

resources/views/data-settings/index.blade.php

@@ -10,13 +10,16 @@
 
 <x-toast-notification />
 <x-modal-confirmation buttonText="Delete" confirmationMessage="Are you sure you want to delete this?" />
+
 <div class="row">
-	<div class="card w-full">
-		<div class="card-body">
-			<div class="d-flex justify-content-end pb-3">
-				<a href="{{ route('data-settings.create')}}" class="btn btn-success width-lg">Create</a>
+	<div class="col-12">
+		<div class="card w-100">
+			<div class="card-body">
+				<div class="d-flex flex-wrap justify-content-end align-items-center mb-2">
+					<a href="{{ route('data-settings.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Create</a>
+				</div>
+				<div id="table-data-settings"></div>
 			</div>
-			<div id="table-data-settings"></div>
 		</div>
 	</div>
 </div>

resources/views/master/users/index.blade.php

@@ -9,12 +9,16 @@
 @include('layouts.partials/page-title', ['title' => 'Master', 'subtitle' => 'Users'])
 
 <div class="row">
-    <div class="card w-full">
-        <div class="card-body">
-            <div class="d-flex justify-content-end pb-3">
-                <a href="{{ route('users.create')}}" class="btn btn-success width-lg">Create</a>
+    <div class="col-12">
+        <div class="card w-100">
+            <div class="card-body">
+                <div class="d-flex flex-wrap justify-content-end align-items-center mb-2">
+                    <a href="{{ route('users.create') }}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">
+                        Create
+                    </a>
+                </div>
+                <div id="table-users"></div>
             </div>
-            <div id="table-users"></div>
         </div>
     </div>
 </div>

resources/views/menus/index.blade.php

@@ -10,14 +10,17 @@
 
 <x-toast-notification />
 <x-modal-confirmation buttonText="Delete" confirmationMessage="Are you sure you want to delete this?" />
+
 <div class="row">
-    <div class="card w-full">
-        <div class="card-body">
-            <div class="d-flex justify-content-end pb-3">
-                <a href="{{ route('menus.create')}}" class="btn btn-success width-lg">Create</a>
-            </div>
-            <div>
-                <div id="table-menus"></div>
+    <div class="col-12">
+        <div class="card w-100">
+            <div class="card-body">
+                <div class="d-flex flex-wrap justify-content-end align-items-center mb-2">
+                    <a href="{{ route('menus.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Create</a>
+                </div>
+                <div>
+                    <div id="table-menus"></div>
+                </div>
             </div>
         </div>
     </div>

resources/views/pbg_task/index.blade.php

@@ -9,12 +9,14 @@
 @include('layouts.partials/page-title', ['title' => 'Data', 'subtitle' => 'PBG'])
 
 <div class="row">
-  <div class="card w-full">
-    <div class="card-body">
-      <div class="d-flex justify-content-end pb-3">
-        <a href="{{ route('pbg-task.create')}}" class="btn btn-success width-lg">Create</a>
+  <div class="col-12">
+    <div class="card w-100">
+      <div class="card-body">
+        <div class="d-flex flex-wrap justify-content-end">
+          <a href="{{ route('pbg-task.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Create</a>
+        </div>
+        <div id="table-pbg-tasks"></div>
       </div>
-      <div id="table-pbg-tasks"></div>
     </div>
   </div>
 </div>

resources/views/roles/index.blade.php

@@ -12,12 +12,14 @@
 <x-modal-confirmation buttonText="Delete" confirmationMessage="Are you sure you want to delete this?" />
 
 <div class="row">
-    <div class="card w-full">
-        <div class="card-body">
-            <div class="d-flex justify-content-end pb-3">
-                <a href="{{ route('roles.create')}}" class="btn btn-success width-lg">Create</a>
+    <div class="col-12">
+        <div class="card w-100">
+            <div class="card-body">
+                <div class="d-flex flex-wrap justify-content-end align-items-center mb-2">
+                    <a href="{{ route('roles.create')}}" class="btn btn-success btn-sm d-block d-sm-inline w-auto">Create</a>
+                </div>
+                <div id="table-roles"></div>
             </div>
-            <div id="table-roles"></div>
         </div>
     </div>
 </div>

resources/views/settings/syncronize/index.blade.php

@@ -9,14 +9,16 @@
 @include('layouts.partials/page-title', ['title' => 'Settings', 'subtitle' => 'Syncronize'])
 
 <div class="row">
-    <div class="card w-full">
-        <div class="card-body">
-            <div class="col-md-12 col-xl-12 d-flex justify-content-end">
-                <button type="button" class="btn btn-success" style="margin-right: 20px;" id="btn-sync-submit-google-sheet">Sync Google Sheet</button>
-                <button type="button" class="btn btn-success" id="btn-sync-submit">Sync SIMBG</button>
-            </div>
-            <div>
-                <div id="table-import-datasources"></div>
+    <div class="col-12">
+        <div class="card w-100">
+            <div class="card-body">
+                <div class="d-flex flex-wrap justify-content-end gap-2">
+                    <button type="button" class="btn btn-success btn-sm d-block d-sm-inline w-auto" id="btn-sync-submit-google-sheet">Sync Google Sheet</button>
+                    <button type="button" class="btn btn-success btn-sm d-block d-sm-inline w-auto" id="btn-sync-submit">Sync SIMBG</button>
+                </div>
+                <div>
+                    <div id="table-import-datasources"></div>
+                </div>
             </div>
         </div>
     </div>

vite.config.js

@@ -19,6 +19,7 @@ export default defineConfig({
                 "resources/scss/icons.scss",
                 "resources/scss/style.scss",
                 "resources/scss/components/_circle.scss",
+                "resources/scss/dashboards/_bigdata.scss",
 
                 "node_modules/quill/dist/quill.snow.css",
                 "node_modules/quill/dist/quill.bubble.css",
@@ -45,6 +46,7 @@ export default defineConfig({
                 "resources/js/pages/maps-canada.js",
                 "resources/js/data/advertisements/data-advertisements.js",
                 "resources/js/data/advertisements/form-create-update.js",
+                "resources/js/data/advertisements/form-upload.js",
 
                 //js-additional
                 "resources/js/dashboards/bigdata.js",