add filter date for dashboard

app/Http/Controllers/Api/BigDataResumeController.php

@@ -13,12 +13,23 @@ class BigDataResumeController extends Controller
     /**
      * Display a listing of the resource.
      */
-    public function index()
+    public function index(Request $request)
     {
         try{
-            $big_data_resume = BigdataResume::latest()->first();
+            $filterDate = $request->get("filterByDate");
-            if(!$big_data_resume){
+
-                return response()->json(['message' => 'No Big Data resume found']);
+            // If filterByDate is "latest" or empty, get the most recent record
+            if (!$filterDate || $filterDate === "latest") {
+                $big_data_resume = BigdataResume::latest()->first();
+            } else {
+                // Filter by specific date
+                $big_data_resume = BigdataResume::whereDate('created_at', $filterDate)
+                    ->orderBy('id', 'desc')
+                    ->first();
+
+                if (!$big_data_resume) {
+                    return $this->response_empty_resume();
+                }
             }
 
             $data_settings = DataSetting::all();
@@ -168,4 +179,63 @@ class BigDataResumeController extends Controller
     {
         //
     }
+
+    private function response_empty_resume(){
+        $result = [
+            'target_pad' => [
+                'sum' => 0,
+                'percentage' => 100,
+            ],
+            'tata_ruang' => [
+                'sum' => 0,
+                'percentage' => 0,
+            ],
+            'kekurangan_potensi' => [
+                'sum' => 0,
+                'percentage' => 0
+            ],
+            'total_potensi' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'verified_document' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'non_verified_document' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'business_document' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'non_business_document' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'realisasi_terbit' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'menunggu_klik_dpmptsp' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ],
+            'proses_dinas_teknis' => [
+                'sum' => 0,
+                'count' => 0,
+                'percentage' => 0
+            ]
+        ];
+
+        return response()->json($result);
+    }
 }

app/Services/ServiceSIMBG.php

@@ -230,18 +230,17 @@ class ServiceSIMBG
                 }
             }
 
-            $uuids = array_column($tasksCollective, 'uuid');
-
-            $this->syncIndexIntegration($uuids, $token);
-
             PbgTask::upsert($tasksCollective, ['uuid'], [
                 'name', 'owner_name', 'application_type', 'application_type_name', 'condition',
                 'registration_number', 'document_number', 'address', 'status', 'status_name',
                 'slf_status', 'slf_status_name', 'function_type', 'consultation_type', 'due_date',
                 'land_certificate_phase', 'task_created_at', 'updated_at'
             ]);
+            
+            $uuids = array_column($tasksCollective, 'uuid');
+            $this->syncIndexIntegration($uuids, $token);
         }
-
+        
         $importDatasource->update([
             'status' => ImportDatasourceStatus::Success->value,
             'message' => "Successfully processed: $savedCount, Failed: $failedCount"
@@ -336,5 +335,4 @@ class ServiceSIMBG
         }
     }
 
-}
+}
-

resources/js/app.js

@@ -2,6 +2,30 @@ import bootstrap from "bootstrap/dist/js/bootstrap";
 window.bootstrap = bootstrap;
 import "iconify-icon";
 import "simplebar/dist/simplebar";
+// import flatpickr from "flatpickr";
+// import "flatpickr/dist/flatpickr.min.css";
+
+// class InitDatePicker {
+//     constructor(selector = ".datepicker") {
+//         this.selector = selector;
+//     }
+//     init() {
+//         const elements = document.querySelectorAll(this.selector);
+//         if (elements.length === 0) return; // Skip if no elements found
+
+//         const today = new Date();
+//         const minYear = today.getFullYear() - 5;
+
+//         elements.forEach((element) => {
+//             flatpickr(element, {
+//                 enableTime: false,
+//                 dateFormat: "Y-m-d",
+//                 minDate: `${minYear}-01-01`,
+//                 maxDate: today,
+//             });
+//         });
+//     }
+// }
 
 class Components {
     initBootstrapComponents() {
@@ -107,6 +131,7 @@ class FormValidation {
 }
 document.addEventListener("DOMContentLoaded", function (e) {
     new Components().init(), new FormValidation().init();
+    // new InitDatePicker().init();
 });
 class ThemeLayout {
     constructor() {

resources/js/dashboards/bigdata.js

@@ -1,55 +1,30 @@
 import Big from "big.js";
 import GlobalConfig, { addThousandSeparators } from "../global-config.js";
-import flatpickr from "flatpickr";
+import InitDatePicker from "../utils/InitDatePicker.js";
-import "flatpickr/dist/flatpickr.min.css";
 
 class BigData {
     async init() {
         try {
-            this.filterYear = new Date().getFullYear(); // Set initial year
+            new InitDatePicker(
-
+                "#datepicker-dashboard-bigdata",
-            let yearSelect = document.querySelector("#yearPicker");
+                this.handleChangeDate.bind(this)
-            let filterButton = document.querySelector("#btnFilterYear");
+            ).init();
-
-            if (!yearSelect || !filterButton) {
-                console.error(
-                    "Element #yearPicker or #btnFilterYear not found."
-                );
-                return;
-            }
-
-            // Set default value for input
-            yearSelect.value = this.filterYear;
-
-            yearSelect.addEventListener("change", () => {
-                this.updateYear(yearSelect.value);
-            });
-
-            // Handle button click
-            filterButton.addEventListener("click", () => {
-                this.updateYear(yearSelect.value);
-            });
-
-            console.log("init filter this year", this.filterYear);
 
             // Load initial data
-            await this.updateData(this.filterYear);
+            this.updateData("latest");
         } catch (error) {
             console.error("Error initializing data:", error);
         }
     }
-    updateYear(value) {
+
-        let inputYear = parseInt(value, 10);
+    handleChangeDate(filterDate) {
-        if (!isNaN(inputYear)) {
+        if (!filterDate) return;
-            this.filterYear = inputYear;
+        this.updateData(filterDate);
-            this.updateData(this.filterYear);
-        } else {
-            console.error("Invalid year input");
-        }
     }
-    async updateData(year) {
+    async updateData(filterDate) {
         try {
-            this.resumeBigData = await this.getBigDataResume();
+            console.log("Filtering data for date:", filterDate);
+            this.resumeBigData = await this.getBigDataResume(filterDate);
             // this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
             // this.resultDataTotal = await this.getDataTotalPotensi(year);
             // this.dataVerification = await this.getDataVerfication(year);
@@ -178,10 +153,10 @@ class BigData {
         }
     }
 
-    async getBigDataResume() {
+    async getBigDataResume(filterByDate) {
         try {
             const response = await fetch(
-                `${GlobalConfig.apiHost}/api/bigdata-resume`,
+                `${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterByDate}`,
                 {
                     credentials: "include",
                     headers: {
@@ -199,8 +174,6 @@ class BigData {
             }
 
             const data = await response.json();
-            console.log("big data resume", JSON.stringify(data));
-            console.log("big data resume", data);
             return data;
         } catch (error) {
             console.error("Error fetching chart data:", error);

resources/js/dashboards/lack-of-potential.js

@@ -1,10 +1,15 @@
 import Big from "big.js";
 import GlobalConfig, { addThousandSeparators } from "../global-config.js";
+import InitDatePicker from "../utils/InitDatePicker.js";
 
 class LackOfPotential {
     async init() {
+        new InitDatePicker(
+            "#datepicker-lack-of-potential",
+            this.handleChangedDate.bind(this)
+        ).init();
         this.bigTotalLackPotential = 0;
-        this.totalPotensi = await this.getDataTotalPotensi(2025);
+        this.totalPotensi = await this.getDataTotalPotensi("latest");
         this.totalTargetPAD = await this.getDataSettings("TARGET_PAD");
         this.allCountData = await this.getValueDashboard();
         this.reklameCount = this.allCountData.total_reklame ?? 0;
@@ -12,15 +17,26 @@ class LackOfPotential {
         this.tataRuangCount = this.allCountData.total_tata_ruang ?? 0;
 
         this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
-        this.bigTotalPotensi = new Big(this.totalPotensi.totalData ?? 0);
+        this.bigTotalPotensi = new Big(this.totalPotensi.total ?? 0);
-        this.bigTotalLackPotential = this.bigTargetPAD - this.bigTotalPotensi;
+        this.bigTotalLackPotential = this.bigTargetPAD.minus(
+            this.bigTotalPotensi
+        );
         this.initChartKekuranganPotensi();
         this.initDataValueDashboard();
     }
-    async getDataTotalPotensi(year) {
+    async handleChangedDate(filterDate) {
+        const totalPotensi = await this.getDataTotalPotensi(filterDate);
+        this.bigTotalPotensi = new Big(totalPotensi.total ?? 0);
+        this.bigTotalLackPotential = this.bigTargetPAD.minus(
+            this.bigTotalPotensi
+        );
+
+        this.initChartKekuranganPotensi();
+    }
+    async getDataTotalPotensi(filterDate) {
         try {
             const response = await fetch(
-                `${GlobalConfig.apiHost}/api/all-task-documents?year=${year}`,
+                `${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}`,
                 {
                     credentials: "include",
                     headers: {
@@ -39,8 +55,7 @@ class LackOfPotential {
 
             const data = await response.json();
             return {
-                countData: data.data.count,
+                total: data.total_potensi.sum,
-                totalData: data.data.total,
             };
         } catch (error) {
             console.error("Error fetching chart data:", error);
@@ -50,7 +65,7 @@ class LackOfPotential {
     async getDataSettings(string_key) {
         try {
             const response = await fetch(
-                `${GlobalConfig.apiHost}/api/api-data-settings?search=${string_key}`,
+                `${GlobalConfig.apiHost}/api/data-settings?search=${string_key}`,
                 {
                     credentials: "include",
                     headers: {

resources/js/utils/InitDatePicker.js

@@ -0,0 +1,34 @@
+import flatpickr from "flatpickr";
+import "flatpickr/dist/flatpickr.min.css";
+
+class InitDatePicker {
+    constructor(selector = ".datepicker", onChangeCallback = null) {
+        this.selector = selector;
+        this.onChangeCallback = onChangeCallback;
+    }
+
+    init() {
+        const today = new Date();
+
+        document.querySelectorAll(this.selector).forEach((element) => {
+            flatpickr(element, {
+                enableTime: false,
+                dateFormat: "Y-m-d",
+                maxDate: today,
+                onChange: (selectedDates, dateStr) => {
+                    if (this.onChangeCallback) {
+                        this.onChangeCallback(dateStr); // Call callback with selected date
+                    }
+                },
+                onReady: (selectedDates, dateStr, instance) => {
+                    // Call the callback with the default date when initialized
+                    if (this.onChangeCallback && dateStr) {
+                        this.onChangeCallback(dateStr);
+                    }
+                },
+            });
+        });
+    }
+}
+
+export default InitDatePicker;

resources/views/dashboards/bigdata.blade.php

@@ -20,13 +20,8 @@
 
     <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">
+            <div class="d-flex flex-sm-nowrap flex-wrap justify-content-end">
-                <select class="form-select w-auto" id="yearPicker" name="year" style="min-width: 100px;">
+                <input type="text" class="form-control" style="max-width: 125px;" id="datepicker-dashboard-bigdata" placeholder="Filter Date" />
-                @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>

resources/views/dashboards/lack_of_potential.blade.php

@@ -15,100 +15,103 @@
             </h3>
         </div>
     </div>
-    <div class="">
+    <div class="wrapper">
-        <div class="">
+        <div class="row d-flex justify-content-end">
-            <div id="lack-of-potential-fixed-container" class="" style="width:1400px;height:770px;position:relative;margin:auto;z-index:1;">
+            <div class="col-12 col-sm-6 col-md-3">
-                <div style="position: absolute; top: 200px; left: 50px;">
+                <div class="d-flex flex-sm-nowrap flex-wrap justify-content-end">
-                    <x-custom-circle title="Restoran" size="small" style="background-color: #0e4753;" />
+                    <input type="text" class="form-control me-3" style="max-width: 125px;" id="datepicker-lack-of-potential" placeholder="Filter Date" />
-                    <div class="square dia-top-left-bottom-right" style="top:30px;left:50px;width:150px;height:120px;"></div>
-                    <x-custom-circle title="PBB Bangunan" visible_data="true" data_id="pbb-bangunan-count" data_count="0" size="small" style="background-color: #0e4753;" />
-                    <div class="square" style="width:150px;height:2px;background-color:black;left:50px;top:150px;"></div>
-                    <x-custom-circle title="Reklame" visible_data="true" data_id="reklame-count" data_count="0" size="small" style="background-color: #0e4753;" />
-                    <div class="square dia-top-right-bottom-left" style="top:140px;left:50px;width:150px;height:120px;"></div>
-                </div>
-                
-                <div style="position: absolute; top: 300px; left: 200px;">
-                    <div class="square dia-top-right-bottom-left" style="top:-100px;left:30px;width:150px;height:120px;"></div>
-                    <div class="square dia-top-left-bottom-right" style="top:-100px;left:120px;width:120px;height:120px;"></div>
-                    <x-custom-circle title="BAPENDA" size="small" style="float:left;background-color: #234f6c;" />
-                    <x-custom-circle title="PDAM" visible_data="true" data_id="pdam-count" data_count="0" visible_data_type="true" data_type="Pelanggan" size="small" style="float:left;background-color: #234f6c;" />
-                    <x-custom-circle title="KECAMATAN" size="small" style="float:left;background-color: #234f6c;" />
-                    
-                </div>
-                
-                <div  style="position: absolute; top: 0px; left: 270px;">
-                    <div class="square" style="width:5px;height:600px;background-color:black;left:70px;top:50px;"></div>
-                    <div class="square dia-top-left-bottom-right" style="top:350px;left:-50px;width:120px;height:120px;"></div>
-                    <div class="square dia-top-right-bottom-left" style="top:350px;left:70px;width:120px;height:120px;"></div>
-                    <x-custom-circle title="Rumah Tinggal" size="small" style="background-color: #234f6c;margin:auto;" />
-                    <x-custom-circle title="Non Usaha" size="large" style="background-color: #3a968b;margin-top:20px;" />
-                    <x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:150px;" />
-                </div>
-                
-                <div  style="position: absolute; top: 650px; left: 110px;">
-                    <div class="square dia-top-right-bottom-left" style="top:-110px;left:40px;width:200px;height:120px;"></div>
-                    <div class="square dia-top-right-bottom-left" style="top:-110px;left:90px;width:150px;height:170px;"></div>
-                    <div class="square dia-top-left-bottom-right" style="top:-110px;left:230px;width:150px;height:170px;"></div>
-                    <div class="square dia-top-left-bottom-right" style="top:-110px;left:260px;width:200px;height:180px;"></div>
-                    <x-custom-circle title="Villa" size="small" style="float:left;background-color: #234f6c;" />
-                    <x-custom-circle title="Pabrik" size="small" style="float:left;background-color: #234f6c;" />
-                    <x-custom-circle title="Jalan Protocol" size="small" style="float:left;background-color: #234f6c;" />
-                    <x-custom-circle title="Ruko" size="small" style="float:left;background-color: #234f6c;" />
-                    <x-custom-circle title="Pariwisata" size="small" style="float:left;background-color: #234f6c; margin-right: 20px;" />
-                    <div class="square" style="width:150px;height:2px;background-color:black;left:350px;top:50px;"></div>
-                    <x-custom-circle title="DISBUDPAR" size="small" style="background-color: #3a968b;" />
-                </div>
-                
-                <div style="position: absolute; top: 280px; left: 550px;">
-                    <div class="square dia-top-left-bottom-right" style="top:-110px;left:-150px;width:200px;height:180px;"></div>
-                    <div class="square dia-top-right-bottom-left" style="top:70px;left:-150px;width:200px;height:130px;"></div>
-                    <x-custom-circle title="Tim Wasdal Gabungan" size="large" style="background-color: #da6635;float:left" />
-                    <div class="square" style="width:650px;height:5px;background-color:black;left:100px;top:75px;"></div>
-                    @component('components.circle', [
-                        'document_title' => 'Kekurangan Potensi',
-                        'document_color' => '#ff5757',
-                        'document_type' => '',
-                        'document_id' => 'chart-lack-of-potential',
-                        'visible_small_circle' => false,
-                        'style' => 'margin-left:180px;top:-20px;'
-                        ])
-                        @endcomponent
-                        
-                        <x-custom-circle title="Tata Ruang" size="large" style="background-color: #da6635;float:left;margin-left:250px;" />
-                        
-                    </div>
-                    
-                    <div style="position: absolute; top: 310px; left: 1150px;">
-                        <div class="square dia-top-left-bottom-right" style="top:90px;left:-100px;width:100px;height:100px;"></div>
-                        <div class="square dia-top-right-bottom-left" style="top:-110px;left:-100px;width:100px;height:100px;"></div>
-                        <x-custom-circle title="Peta" visible_data_type="true" data_type="1:5000" size="small" style="background-color: #224f6d;float:left;" />
-                        <x-custom-circle title="Tapak Bangunan" size="small" style="background-color: #2390af;float:left;margin-left:20px;" />
-                        
-                    </div>
-                    
-                    <x-custom-circle title="BPN" size="small" style="background-color: #2390af;position:absolute;left:1270px;top:440px;" />
-                    
-                    <div style="position: absolute; top: 470px; left: 430px;">
-                    <div class="square dia-top-right-bottom-left" style="top:-80px;left:20px;width:150px;height:120px;"></div>
-                    <div class="square dia-top-right-bottom-left" style="top:-50px;left:100px;width:100px;height:100px;"></div>
-                    <div class="square dia-top-left-bottom-right" style="top:-50px;left:180px;width:100px;height:100px;"></div>
-                    <div class="square dia-top-left-bottom-right" style="top:-60px;left:240px;width:120px;height:120px;"></div>
-                    <x-custom-circle title="UPT Wasdal" size="small" style="background-color: #0f4853;float:left;" />
-                    <x-custom-circle title="Satpol PP" size="small" style="background-color: #0f4853;float:left;" />
-                    <x-custom-circle title="KEJARI" size="small" style="background-color: #0f4853;float:left;" />
-                    <x-custom-circle title="TNI & POLRI" size="small" style="background-color: #0f4853;float:left;" />
-                </div>
-
-                <x-custom-circle title="UUCK" size="small" style="background-color: #2390af;position:absolute;left:980px;top:500px;" />
-
-                <div  style="position: absolute; top: 50px; left: 1100px;">
-                    <x-custom-circle title="Non Usaha" size="large" style="background-color: #3a968b;margin-top:20px;" />
-                    <x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:260px;" />
                 </div>
             </div>
         </div>
-        
+        <div id="lack-of-potential-fixed-container" class="" style="width:1400px;height:770px;position:relative;margin:auto;z-index:1;">
-        
+            <div style="position: absolute; top: 200px; left: 50px;">
+                <x-custom-circle title="Restoran" size="small" style="background-color: #0e4753;" />
+                <div class="square dia-top-left-bottom-right" style="top:30px;left:50px;width:150px;height:120px;"></div>
+                <x-custom-circle title="PBB Bangunan" visible_data="true" data_id="pbb-bangunan-count" data_count="0" size="small" style="background-color: #0e4753;" />
+                <div class="square" style="width:150px;height:2px;background-color:black;left:50px;top:150px;"></div>
+                <x-custom-circle title="Reklame" visible_data="true" data_id="reklame-count" data_count="0" size="small" style="background-color: #0e4753;" />
+                <div class="square dia-top-right-bottom-left" style="top:140px;left:50px;width:150px;height:120px;"></div>
+            </div>
+            
+            <div style="position: absolute; top: 300px; left: 200px;">
+                <div class="square dia-top-right-bottom-left" style="top:-100px;left:30px;width:150px;height:120px;"></div>
+                <div class="square dia-top-left-bottom-right" style="top:-100px;left:120px;width:120px;height:120px;"></div>
+                <x-custom-circle title="BAPENDA" size="small" style="float:left;background-color: #234f6c;" />
+                <x-custom-circle title="PDAM" visible_data="true" data_id="pdam-count" data_count="0" visible_data_type="true" data_type="Pelanggan" size="small" style="float:left;background-color: #234f6c;" />
+                <x-custom-circle title="KECAMATAN" size="small" style="float:left;background-color: #234f6c;" />
+                
+            </div>
+            
+            <div  style="position: absolute; top: 0px; left: 270px;">
+                <div class="square" style="width:5px;height:600px;background-color:black;left:70px;top:50px;"></div>
+                <div class="square dia-top-left-bottom-right" style="top:350px;left:-50px;width:120px;height:120px;"></div>
+                <div class="square dia-top-right-bottom-left" style="top:350px;left:70px;width:120px;height:120px;"></div>
+                <x-custom-circle title="Rumah Tinggal" size="small" style="background-color: #234f6c;margin:auto;" />
+                <x-custom-circle title="Non Usaha" size="large" style="background-color: #3a968b;margin-top:20px;" />
+                <x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:150px;" />
+            </div>
+            
+            <div  style="position: absolute; top: 650px; left: 110px;">
+                <div class="square dia-top-right-bottom-left" style="top:-110px;left:40px;width:200px;height:120px;"></div>
+                <div class="square dia-top-right-bottom-left" style="top:-110px;left:90px;width:150px;height:170px;"></div>
+                <div class="square dia-top-left-bottom-right" style="top:-110px;left:230px;width:150px;height:170px;"></div>
+                <div class="square dia-top-left-bottom-right" style="top:-110px;left:260px;width:200px;height:180px;"></div>
+                <x-custom-circle title="Villa" size="small" style="float:left;background-color: #234f6c;" />
+                <x-custom-circle title="Pabrik" size="small" style="float:left;background-color: #234f6c;" />
+                <x-custom-circle title="Jalan Protocol" size="small" style="float:left;background-color: #234f6c;" />
+                <x-custom-circle title="Ruko" size="small" style="float:left;background-color: #234f6c;" />
+                <x-custom-circle title="Pariwisata" size="small" style="float:left;background-color: #234f6c; margin-right: 20px;" />
+                <div class="square" style="width:150px;height:2px;background-color:black;left:350px;top:50px;"></div>
+                <x-custom-circle title="DISBUDPAR" size="small" style="background-color: #3a968b;" />
+            </div>
+            
+            <div style="position: absolute; top: 280px; left: 550px;">
+                <div class="square dia-top-left-bottom-right" style="top:-110px;left:-150px;width:200px;height:180px;"></div>
+                <div class="square dia-top-right-bottom-left" style="top:70px;left:-150px;width:200px;height:130px;"></div>
+                <x-custom-circle title="Tim Wasdal Gabungan" size="large" style="background-color: #da6635;float:left" />
+                <div class="square" style="width:650px;height:5px;background-color:black;left:100px;top:75px;"></div>
+                @component('components.circle', [
+                    'document_title' => 'Kekurangan Potensi',
+                    'document_color' => '#ff5757',
+                    'document_type' => '',
+                    'document_id' => 'chart-lack-of-potential',
+                    'visible_small_circle' => false,
+                    'style' => 'margin-left:180px;top:-20px;'
+                    ])
+                    @endcomponent
+                    
+                    <x-custom-circle title="Tata Ruang" size="large" style="background-color: #da6635;float:left;margin-left:250px;" />
+                    
+                </div>
+                
+                <div style="position: absolute; top: 310px; left: 1150px;">
+                    <div class="square dia-top-left-bottom-right" style="top:90px;left:-100px;width:100px;height:100px;"></div>
+                    <div class="square dia-top-right-bottom-left" style="top:-110px;left:-100px;width:100px;height:100px;"></div>
+                    <x-custom-circle title="Peta" visible_data_type="true" data_type="1:5000" size="small" style="background-color: #224f6d;float:left;" />
+                    <x-custom-circle title="Tapak Bangunan" size="small" style="background-color: #2390af;float:left;margin-left:20px;" />
+                    
+                </div>
+                
+                <x-custom-circle title="BPN" size="small" style="background-color: #2390af;position:absolute;left:1270px;top:440px;" />
+                
+                <div style="position: absolute; top: 470px; left: 430px;">
+                <div class="square dia-top-right-bottom-left" style="top:-80px;left:20px;width:150px;height:120px;"></div>
+                <div class="square dia-top-right-bottom-left" style="top:-50px;left:100px;width:100px;height:100px;"></div>
+                <div class="square dia-top-left-bottom-right" style="top:-50px;left:180px;width:100px;height:100px;"></div>
+                <div class="square dia-top-left-bottom-right" style="top:-60px;left:240px;width:120px;height:120px;"></div>
+                <x-custom-circle title="UPT Wasdal" size="small" style="background-color: #0f4853;float:left;" />
+                <x-custom-circle title="Satpol PP" size="small" style="background-color: #0f4853;float:left;" />
+                <x-custom-circle title="KEJARI" size="small" style="background-color: #0f4853;float:left;" />
+                <x-custom-circle title="TNI & POLRI" size="small" style="background-color: #0f4853;float:left;" />
+            </div>
+
+            <x-custom-circle title="UUCK" size="small" style="background-color: #2390af;position:absolute;left:980px;top:500px;" />
+
+            <div  style="position: absolute; top: 50px; left: 1100px;">
+                <x-custom-circle title="Non Usaha" size="large" style="background-color: #3a968b;margin-top:20px;" />
+                <x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:260px;" />
+            </div>
+        </div>
     </div>
 </div>
 @endsection