add dashboard inside and outside system and fix timeout when search filter

This commit is contained in:
arifal
2025-03-06 23:33:31 +07:00
parent e0c35b8897
commit ffc08f26cc
24 changed files with 972 additions and 122 deletions

View File

@@ -0,0 +1,115 @@
@extends('layouts.vertical', ['subtitle' => 'Dashboards'])
@section('css')
@vite(['resources/scss/dashboards/potentials/_inside_system.scss'])
@endsection
@section('content')
@include('layouts.partials.page-title', ['title' => 'Dashboards', 'subtitle' => 'Dalam Sistem'])
<div class="lack-of-potential-wrapper">
<div class="row" id="lack-of-potential-wrapper">
<div class="d-flex justify-content-between align-items-center mt-3 ms-2">
<h2 class="text-danger m-0">
ANALISA BIG DATA MELALUI APLIKASI <br> SIBEDAS PBG DALAM SISTEM
</h2>
<div class="text-black text-end d-flex flex-column align-items-end me-3">
<input type="text" class="form-control mt-2" style="max-width: 125px;" id="datepicker-lack-of-potential" placeholder="Filter Date" />
</div>
</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" />
<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;" visible_data="true" data_id="villa-count" data_count="0" />
<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" />
<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;" visible_data="true" data_id="tata-ruang-count" data_count="0" />
</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;" visible_data="true" data_id="tata-ruang-usaha-count" data_count="0" />
</div>
</div>
</div>
</div>
@endsection
@section('scripts')
@vite(['resources/js/dashboards/potentials/inside_system.js'])
@endsection

View File

@@ -0,0 +1,73 @@
<!-- base layout -->
@extends('layouts.vertical', ['subtitle' => 'Dashboards'])
<!-- style -->
@section('css')
@vite(['resources/scss/dashboards/potentials/_outside_system.scss'])
@endsection
<!-- content -->
@section('content')
@include('layouts.partials.page-title', ['title' => 'Dashboards', 'subtitle' => 'Luar Sistem'])
<div class="outside-system-wrapper" id="outside-system-wrapper">
<div class="row">
<div class="d-flex justify-content-between align-items-center mt-3 ms-2">
<h2 class="text-danger m-0">
ANALISA BIG DATA MELALUI APLIKASI <br>
SIBEDAS PBG LUAR SISTEM
</h2>
<div class="text-black text-end d-flex flex-column align-items-end me-3">
<input type="text" class="form-control mt-2" style="max-width: 125px;" id="datepicker-outside-system" placeholder="Filter Date" />
</div>
</div>
</div>
<div id="outside-system-fixed-container" class="" style="width:1400px;height:770px;position:relative;margin:auto;z-index:1;">
<div style="position: absolute; top: 70px; left: 50px; width: 200px; height: 500px;">
@component('components.circle', [
'document_title' => 'Non Usaha',
'document_color' => '#399787',
'document_type' => 'Berkas',
'document_id' => 'outside-system-non-business',
'visible_small_circle' => true,
'style' => 'top:10px;'
])
@endcomponent
<div class="square dia-top-right-bottom-left" style="top:10px;left:180px;width:230px;height:120px;"></div>
@component('components.circle', [
'document_title' => 'Usaha',
'document_color' => '#5e7c89',
'document_type' => 'Berkas',
'document_id' => 'outside-system-business',
'visible_small_circle' => true,
'style' => 'top:300px;'
])
@endcomponent
<div class="square dia-top-right-bottom-left" style="top:320px;left:170px;width:200px;height:100px;"></div>
<div class="square dia-top-left-bottom-right" style="top:120px;left:180px;width:500px;height:120px;"></div>
<div class="square dia-top-left-bottom-right" style="top:410px;left:180px;width:500px;height:160px;"></div>
</div>
<div style="position: absolute; top: 50px; left: 350px; width: 200px; height: 550px;">
<div class="square" style="width:200px;height:2px;background-color:black;left:100px;top:70px;"></div>
<x-custom-circle title="Keterangan Rencana Kota (KRK)" size="large" style="background-color: #306364;position: absolute;" />
<x-custom-circle title="Keterangan Rencana Kota (KRK)" size="large" style="background-color: #38b64b;position: absolute; top: 320px;" />
<div class="square" style="width:200px;height:2px;background-color:black;left:100px;top:390px;"></div>
</div>
<div style="position: absolute; top: 50px; left: 600px; width: 200px; height: 650px;">
<x-custom-circle title="Samirindu DPMPTSP" size="large" style="background-color: #0e4753;position: absolute; top: 0px;" />
<x-custom-circle title="RAB dan Gambar" size="large" style="background-color: #f0195b;position: absolute; top: 160px;" />
<x-custom-circle title="OSS RBA (Nasional)" size="large" style="background-color: #38b64b;position: absolute; top: 320px;" />
<x-custom-circle title="Dokumen Lingkungan (DLH)" size="large" style="background-color: #393536;position: absolute; top: 480px;" />
<div class="square dia-top-left-bottom-right" style="top:50px;left:120px;width:250px;height:250px;"></div>
<div class="square dia-top-left-bottom-right" style="top:230px;left:120px;width:220px;height:100px;"></div>
<div class="square dia-top-right-bottom-left" style="top:320px;left:120px;width:200px;height:100px;"></div>
<div class="square dia-top-right-bottom-left" style="top:350px;left:120px;width:250px;height:200px;"></div>
</div>
<div style="position: absolute; top: 50px; left: 900px; width: 200px; height: 550px;">
<x-custom-circle title="Pemohon" size="large" style="background-color: #393536;position: absolute; top: 250px;" />
</div>
</div>
</div>
@endsection
<!-- javascripts -->
@section('scripts')
@vite(['resources/js/dashboards/potentials/outside_system.js'])
@endsection