arifal/sibedas
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix update dashboard external

Browse Source
This commit is contained in:
arifal
2025-08-20 00:23:30 +07:00
parent 4b28bebcc2
commit 0a9d9071e4
9 changed files with 383 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
resources/js/dashboards/potentials/inside_system.js
View File

@@ -4,42 +4,89 @@ import InitDatePicker from "../../utils/InitDatePicker.js";
class DashboardPotentialInsideSystem {
async init() {
new InitDatePicker(
"#datepicker-lack-of-potential",
this.handleChangedDate.bind(this)
).init();
this.bigTotalLackPotential = 0;
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;
this.pdamCount = this.allCountData.total_pdam ?? 0;
this.tataRuangCount = this.allCountData.total_tata_ruang ?? 0;
this.tataRuangUsahaCount =
this.allCountData.total_tata_ruang_usaha ?? 0;
this.tataRuangNonUsahaCount =
this.allCountData.total_tata_ruang_non_usaha ?? 0;
try {
// Initialize date picker
new InitDatePicker(
"#datepicker-lack-of-potential",
this.handleChangedDate.bind(this)
).init();
let dataReportTourism = this.allCountData.data_report;
// Initialize default values
this.bigTotalLackPotential = 0;
this.totalVilla = dataReportTourism
.filter((item) => item.kbli_title.toLowerCase() === "vila")
.reduce((sum, item) => sum + item.total_records, 0);
this.totalRestoran = dataReportTourism
.filter((item) => item.kbli_title.toLowerCase() === "restoran")
.reduce((sum, item) => sum + item.total_records, 0);
this.totalPariwisata = dataReportTourism.reduce(
(sum, item) => sum + item.total_records,
0
);
// Fetch data with error handling
this.totalPotensi = (await this.getDataTotalPotensi("latest")) || {
total: 0,
};
this.totalTargetPAD =
(await this.getDataSettings("TARGET_PAD")) || 0;
this.allCountData = (await this.getValueDashboard()) || {};
this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
this.bigTotalPotensi = new Big(this.totalPotensi.total ?? 0);
this.bigTotalLackPotential = this.bigTargetPAD.minus(
this.bigTotalPotensi
);
this.initChartKekuranganPotensi();
this.initDataValueDashboard();
// Set counts with safe fallbacks
this.pdamCount = this.allCountData.total_pdam ?? 0;
this.tataRuangCount = this.allCountData.total_tata_ruang ?? 0;
this.pajakReklameCount = this.allCountData.data_pajak_reklame ?? 0;
this.surveyLapanganCount = this.allCountData.total_reklame ?? 0;
this.reklameCount =
this.pajakReklameCount + this.surveyLapanganCount;
this.pajakRestoranCount =
this.allCountData.data_pajak_restoran ?? 0;
this.pajakHiburanCount = this.allCountData.data_pajak_hiburan ?? 0;
this.pajakHotelCount = this.allCountData.data_pajak_hotel ?? 0;
this.pajakParkirCount = this.allCountData.data_pajak_parkir ?? 0;
this.tataRuangUsahaCount =
this.allCountData.total_tata_ruang_usaha ?? 0;
this.tataRuangNonUsahaCount =
this.allCountData.total_tata_ruang_non_usaha ?? 0;
// Handle tourism data safely
let dataReportTourism = this.allCountData.data_report || [];
this.totalVilla = dataReportTourism
.filter(
(item) =>
item.kbli_title &&
item.kbli_title.toLowerCase() === "vila"
)
.reduce((sum, item) => sum + (item.total_records || 0), 0);
this.totalRestoran = dataReportTourism
.filter(
(item) =>
item.kbli_title &&
item.kbli_title.toLowerCase() === "restoran"
)
.reduce((sum, item) => sum + (item.total_records || 0), 0);
this.totalPariwisata = dataReportTourism.reduce(
(sum, item) => sum + (item.total_records || 0),
0
);
// Calculate big numbers
this.bigTargetPAD = new Big(this.totalTargetPAD ?? 0);
this.bigTotalPotensi = new Big(this.totalPotensi.total ?? 0);
this.bigTotalLackPotential = this.bigTargetPAD.minus(
this.bigTotalPotensi
);
// Initialize charts and data
this.initChartKekuranganPotensi();
this.initDataValueDashboard();
} catch (error) {
console.error("Error initializing dashboard:", error);
// Set safe fallback values
this.reklameCount = 0;
this.pdamCount = 0;
this.tataRuangCount = 0;
this.tataRuangUsahaCount = 0;
this.tataRuangNonUsahaCount = 0;
this.totalVilla = 0;
this.totalRestoran = 0;
this.totalPariwisata = 0;
this.bigTotalLackPotential = new Big(0);
// Still try to initialize the dashboard with safe values
this.initDataValueDashboard();
}
}
async handleChangedDate(filterDate) {
const totalPotensi = await this.getDataTotalPotensi(filterDate);
@@ -53,7 +100,7 @@ class DashboardPotentialInsideSystem {
async getDataTotalPotensi(filterDate) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}&type=leader`,
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}&type=simbg`,
{
credentials: "include",
headers: {
@@ -134,40 +181,71 @@ class DashboardPotentialInsideSystem {
}
}
initChartKekuranganPotensi() {
document
.querySelectorAll(".document-count.chart-lack-of-potential")
.forEach((element) => {
// Helper function to safely update elements with class selector
const safeUpdateElements = (selector, callback) => {
try {
const elements = document.querySelectorAll(selector);
if (elements.length > 0) {
elements.forEach(callback);
} else {
console.warn(
`No elements found with selector '${selector}'`
);
}
} catch (error) {
console.error(
`Error updating elements with selector '${selector}':`,
error
);
}
};
safeUpdateElements(
".document-count.chart-lack-of-potential",
(element) => {
element.innerText = ``;
});
document
.querySelectorAll(".document-total.chart-lack-of-potential")
.forEach((element) => {
}
);
safeUpdateElements(
".document-total.chart-lack-of-potential",
(element) => {
element.innerText = `Rp.${addThousandSeparators(
this.bigTotalLackPotential.toString()
)}`;
});
document
.querySelectorAll(".small-percentage.chart-lack-of-potential")
.forEach((element) => {
}
);
safeUpdateElements(
".small-percentage.chart-lack-of-potential",
(element) => {
element.innerText = ``;
});
}
);
}
initDataValueDashboard() {
document.getElementById("reklame-count").innerText = this.reklameCount;
document.getElementById("pdam-count").innerText = this.pdamCount;
document.getElementById("pbb-bangunan-count").innerText =
this.tataRuangCount;
document.getElementById("tata-ruang-count").innerText =
this.tataRuangCount;
document.getElementById("tata-ruang-usaha-count").innerText =
this.tataRuangUsahaCount;
document.getElementById("tata-ruang-non-usaha-count").innerText =
this.tataRuangNonUsahaCount;
document.getElementById("restoran-count").innerText =
this.totalRestoran;
document.getElementById("villa-count").innerText = this.totalVilla;
document.getElementById("pariwisata-count").innerText =
this.totalPariwisata;
// Helper function to safely set element text
const safeSetText = (elementId, value) => {
const element = document.getElementById(elementId);
if (element) {
element.innerText = value;
} else {
console.warn(`Element with id '${elementId}' not found`);
}
};
safeSetText("reklame-count", this.reklameCount);
safeSetText("survey-lapangan-count", this.surveyLapanganCount);
safeSetText("pajak-reklame-count", this.pajakReklameCount);
safeSetText("restoran-count", this.pajakRestoranCount);
safeSetText("hiburan-count", this.pajakHiburanCount);
safeSetText("hotel-count", this.pajakHotelCount);
safeSetText("parkir-count", this.pajakParkirCount);
safeSetText("pdam-count", this.pdamCount);
safeSetText("tata-ruang-count", this.tataRuangCount);
safeSetText("tata-ruang-usaha-count", this.tataRuangUsahaCount);
safeSetText("tata-ruang-non-usaha-count", this.tataRuangNonUsahaCount);
safeSetText("pariwisata-count", this.totalPariwisata);
}
}
document.addEventListener("DOMContentLoaded", async function (e) {
@@ -187,6 +265,12 @@ function resizeDashboard() {
"lack-of-potential-fixed-container"
);
// Check if required elements exist
if (!targetElement || !dashboardElement) {
console.warn("Required elements for dashboard resize not found");
return;
}
let targetWidth = targetElement.offsetWidth;
let dashboardWidth = 1400;
@@ -200,7 +284,9 @@ function resizeDashboard() {
dashboardElement.style.transform = `scale(${scaleFactor})`;
// Ensure horizontal scrolling is allowed if necessary
document.body.style.overflowX = "auto";
if (document.body) {
document.body.style.overflowX = "auto";
}
}
window.addEventListener("load", resizeDashboard);

2
resources/js/dashboards/potentials/outside_system.js
View File

@@ -21,7 +21,7 @@ class DashboardPotentialOutsideSystem {
async getBigDataResume(filterDate) {
try {
const response = await fetch(
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}&type=leader`,
`${GlobalConfig.apiHost}/api/bigdata-resume?filterByDate=${filterDate}&type=simbg`,
{
credentials: "include",
headers: {

10
resources/scss/components/_custom_circle.scss
View File

@@ -19,6 +19,16 @@
height: 150px;
}
&.very-large {
width: 250px;
height: 250px;
}
&.medium {
width: 200px;
height: 200px;
}
&.small {
width: 95px;
height: 95px;

12
resources/views/dashboards/bigdata.blade.php
View File

@@ -91,14 +91,14 @@
</div>
<div style="position: absolute; top: 50px; left: 900px; width: 200px; height: 200px; ">
<x-custom-circle title="GAMBAR" size="medium" style="background-color: #c248a7;float:left;margin-left:250px;"
<x-custom-circle title="GAMBAR" size="small" style="background-color: #c248a7;float:left;margin-left:250px;"
visible_data="true" data_id="non-business-rab-count" data_count="0"
document_url="{!! route('pbg-task.index') . '?' . http_build_query(['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'non-business-rab', 'year' => date('Y')]) !!}"
/>
</div>
<div style="position: absolute; top: 160px; left: 900px; width: 200px; height: 200px; ">
<x-custom-circle title="KRK" size="medium" style="background-color: #295040;float:left;margin-left:250px;"
<x-custom-circle title="KRK" size="small" style="background-color: #295040;float:left;margin-left:250px;"
visible_data="true" data_id="non-business-krk-count" data_count="0"
document_url="{!! route('pbg-task.index') . '?' . http_build_query(['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'non-business-krk', 'year' => date('Y')]) !!}"
/>
@@ -114,21 +114,21 @@
</div>
<div style="position: absolute; top: 350px; left: 900px; width: 200px; height: 200px; ">
<x-custom-circle title="GAMBAR" size="medium" style="background-color: #c248a7;float:left;margin-left:250px;"
<x-custom-circle title="GAMBAR" size="small" style="background-color: #c248a7;float:left;margin-left:250px;"
visible_data="true" data_id="business-rab-count" data_count="0"
document_url="{!! route('pbg-task.index') . '?' . http_build_query(['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'business-rab', 'year' => date('Y')]) !!}"
/>
</div>
<div style="position: absolute; top: 460px; left: 900px; width: 200px; height: 200px; ">
<x-custom-circle title="KRK" size="medium" style="background-color: #1d8b1d;float:left;margin-left:250px;"
<x-custom-circle title="KRK" size="small" style="background-color: #295040;float:left;margin-left:250px;"
visible_data="true" data_id="business-krk-count" data_count="0"
document_url="{!! route('pbg-task.index') . '?' . http_build_query(['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'business-krk', 'year' => date('Y')]) !!}"
/>
</div>
<div style="position: absolute; top: 570px; left: 900px; width: 200px; height: 200px; ">
<x-custom-circle title="DLH" size="medium" style="background-color: #351d02;float:left;margin-left:250px;"
<x-custom-circle title="DLH" size="small" style="background-color: #351d02;float:left;margin-left:250px;"
visible_data="true" data_id="business-dlh-count" data_count="0"
document_url="{!! route('pbg-task.index') . '?' . http_build_query(['menu_id' => $menus->where('url','pbg-task.index')->first()->id, 'filter' => 'business-dlh', 'year' => date('Y')]) !!}"
/>
@@ -204,7 +204,7 @@
@component('components.circle',[
'document_title' => 'Pembayaran Realisasi PBG',
'document_color' => '#8cc540',
'document_color' => '#0a0099',
'document_type' => 'Berkas',
'document_id' => 'chart-payment-pbg-task',
'visible_small_circle' => false,

256
resources/views/dashboards/potentials/inside_system.blade.php
View File

@@ -19,123 +19,185 @@
</div>
</div>
<div class="wrapper">
<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;"
visible_data="true" data_id="restoran-count" data_count="0"
document_url="{{ route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) }}"
<div id="lack-of-potential-fixed-container" class="" style="width:1400px;height:1200px;position:relative;margin:auto;z-index:1;">
@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:50px;'
])
@endcomponent
<div style="position: absolute; top: -250px; left: 900px;">
<x-custom-circle title="PBB BANGUNAN" size="large" style="background-color: #627c8b;margin-top:260px;"
visible_data="false" data_id="pbb-bangunan-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
<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;"
document_url="{{ route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) }}"
/>
<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;"
document_url="{{ route('web-advertisements.index', ['menu_id' => $menus->where('url','web-advertisements.index')->first()->id]) }}"
/>
<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"
visible_data_type="true" data_type="Pelanggan"
size="small" style="float:left;background-color: #234f6c;position: absolute;margin-left: 99px;"
<div style="position: absolute; top: -230px; left: 730px;">
<x-custom-circle title="PDAM" visible_data="true" data_id="pdam-count" data_count="0"
size="small" style="background-color: #627c8b;margin-top:260px;"
document_url="{{ route('customers', ['menu_id' => $menus->where('url','customers')->first()->id]) }}"
/>
<x-custom-circle title="KECAMATAN" size="small" style="float:left;background-color: #234f6c;position: absolute;margin-left: 198px;" />
</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;position: absolute;" />
</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;"
visible_data="true" data_id="villa-count" data_count="0"
document_url="{{ route('web-tourisms.index', ['menu_id' => $menus->where('url','web-tourisms.index')->first()->id]) }}"
<div style="position: absolute; top: -100px; left: 700px;">
<x-custom-circle title="NON USAHA" size="large" style="background-color: #627c8b;margin-top:260px;"
visible_data="false" data_id="non-usaha-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
<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;"
visible_data="true" data_id="pariwisata-count" data_count="0"
document_url="{{ route('web-tourisms.index', ['menu_id' => $menus->where('url','web-tourisms.index')->first()->id]) }}"
/>
<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 style="position: absolute; top: 100px; left: 650px;">
<x-custom-circle title="BIG DATA POTENSI" size="very-large" style="background-color: #627c8b;margin-top:260px;"
visible_data="false" data_id="big-data-potensi-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
{{-- tim wasdal gabungan --}}
<div style="position: absolute; top: 150px; left: 1100px;">
<x-custom-circle title="TIM WASDAL GABUNGAN" size="large" style="background-color: #627c8b;margin-top:260px;"
visible_data="false" data_id="tim-wasdal-gabungan-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 350px; left: 1000px;">
<x-custom-circle title="UPT WASDAL" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="false" data_id="upt-wasdal-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 350px; left: 1100px;">
<x-custom-circle title="SAT POLPP" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="false" data_id="sat-polpp-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 350px; left: 1200px;">
<x-custom-circle title="KEJARI" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="false" data_id="kejari-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 270px; left: 1300px;">
<x-custom-circle title="TNI" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="false" data_id="tni-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 170px; left: 1300px;">
<x-custom-circle title="POLRI" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="false" data_id="polri-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 70px; left: 1300px;">
<x-custom-circle title="SATGAS" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="false" data_id="satgas-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
{{-- tata ruang --}}
<div style="position: absolute; top: 120px; left: 300px;">
<x-custom-circle title="TATA RUANG - PETA 1:5000 - TAPAK BANGUNAN - BPN - UUCK" size="medium" style="background-color: #627c8b;margin-top:260px;"
visible_data="true" data_id="tata-ruang-count" data_count="0"
document_url="{{ route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) }}"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</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" visible_data="true" data_id="tata-ruang-non-usaha-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
style="background-color: #3a968b;margin-top:20px;" />
<x-custom-circle title="USAHA" size="large" style="background-color: #627c8b;margin-top:260px;"
<div style="position: absolute; top: 50px; left: 150px;">
<x-custom-circle title="USAHA" size="small" style="background-color: #388fc2;margin-top:260px;"
visible_data="true" data_id="tata-ruang-usaha-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 300px; left: 150px;">
<x-custom-circle title="NON USAHA" size="small" style="background-color: #388fc2;margin-top:260px;"
visible_data="true" data_id="tata-ruang-non-usaha-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 400px; left: 700px;">
<x-custom-circle title="USAHA" size="large" style="background-color: #8b6262;margin-top:260px;"
visible_data="false" data_id="usaha-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
{{-- reklame --}}
<div style="position: absolute; top: 520px; left: 400px;">
<x-custom-circle title="REKLAME" size="large" style="background-color: #627c8b;margin-top:260px;"
visible_data="true" data_id="reklame-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 450px; left: 250px;">
<x-custom-circle title="SURVEY LAPANGAN" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="true" data_id="survey-lapangan-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 650px; left: 250px;">
<x-custom-circle title="PAJAK REKLAME" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="true" data_id="pajak-reklame-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
{{-- bapenda --}}
<div style="position: absolute; top: 600px; left: 700px;">
<x-custom-circle title="PBB USAHA (BAPENDA)" size="large" style="background-color: #627c8b;margin-top:260px;"
visible_data="false" data_id="bapenda-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 800px; left: 620px;">
<x-custom-circle title="RESTORAN" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="true" data_id="restoran-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 800px; left: 720px;">
<x-custom-circle title="HIBURAN" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="true" data_id="hiburan-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 800px; left: 820px;">
<x-custom-circle title="HOTEL" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="true" data_id="hotel-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 800px; left: 920px;">
<x-custom-circle title="PARKIR" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="true" data_id="parkir-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
{{-- disbudpar --}}
<div style="position: absolute; top: 500px; left: 900px;">
<x-custom-circle title="DISBUDPAR" size="large" style="background-color: #627c8b;margin-top:260px;"
visible_data="false" data_id="disbudpar-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
<div style="position: absolute; top: 680px; left: 1050px;">
<x-custom-circle title="PARIWISATA" size="small" style="background-color: #627c8b;margin-top:260px;"
visible_data="true" data_id="pariwisata-count" data_count="0"
document_url="{!! route('web-spatial-plannings.index', ['menu_id' => $menus->where('url','web-spatial-plannings.index')->first()->id]) !!}"
/>
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
@vite(['resources/js/dashboards/potentials/inside_system.js'])
<script type="module" src="{{ Vite::asset('resources/js/dashboards/potentials/inside_system.js') }}" defer></script>
@endsection