Update Dashboard Layout
This commit is contained in:
Firman Herdiansyah
@@ -2,28 +2,189 @@
|
||||
|
||||
@section('content')
|
||||
|
||||
@include('layouts.partials/page-title', ['title' => 'Dashboards', 'subtitle' => 'SIBEDAS'])
|
||||
@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));
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="dashboard-fixed-wrapper" class="row">
|
||||
<div id="dashboard-fixed-container" style="width:1110px;height:770px;position:relative;margin:auto;">
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Kekurangan Potensi',
|
||||
'document_color' => '#911701',
|
||||
'document_type' => 'Pemohon',
|
||||
'document_id' => 'chart-all-task',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'top:150px;'
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Target PAD 2024',
|
||||
'document_color' => '#020e42',
|
||||
'document_type' => 'Pemohon',
|
||||
'document_id' => 'chart-all-task',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'left:200px;'
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
<div class="square dia-top-left-bottom-right" style="top:150px;left:350px;">
|
||||
</div>
|
||||
|
||||
<div class="square dia-top-right-bottom-left" style="top:150px;left:150px;">
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Total Potensi Berkas',
|
||||
'document_color' => '#02acfa',
|
||||
'document_type' => 'Pemohon',
|
||||
'document_id' => 'chart-all-task',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'left:400px;top:150px;'
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
<div class="square dia-top-right-bottom-left" style="top:300px;left:350px;">
|
||||
</div>
|
||||
|
||||
<div class="square dia-top-left-bottom-right" style="top:300px;left:550px;">
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="row d-flex justify-content-center">
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Perkiraan Potensi PBG Dari Tata Ruang',
|
||||
'document_color' => '#bf04bc',
|
||||
'document_type' => 'Pemohon',
|
||||
'document_id' => 'chart-all-task',
|
||||
'visible_small_circle' => true
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'left:600px;'
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
<div class="square dia-top-right-bottom-left" style="top:150px;left:550px;">
|
||||
</div>
|
||||
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Non Usaha',
|
||||
'document_color' => '#028399',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-non-business',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'left:900px;top:150px;'
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Perkiraan Potensi PBG Dari Tata Ruang',
|
||||
'document_color' => '#f75b1b',
|
||||
'document_type' => 'Pemohon',
|
||||
'document_id' => 'chart-all-task',
|
||||
'visible_small_circle' => true
|
||||
'document_title' => 'Usaha',
|
||||
'document_color' => '#616b7d',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'left:900px;top:400px;'
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Berkas Terverifikasi',
|
||||
'document_color' => '#0561f5',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'top:300px;left:200px;'
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
<div class="square dia-top-right-bottom-left" style="top:500px;left:200px;width:50px">
|
||||
</div>
|
||||
|
||||
<div class="square dia-top-left-bottom-right" style="top:450px;left:350px;width:500px;height:200px;">
|
||||
</div>
|
||||
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Berkas Belum Terverifikasi',
|
||||
'document_color' => '#b973ff',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'top:300px;left:600px;'
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
<div class="square dia-top-right-bottom-left" style="top:200px;left:750px;width:250px;height:150px;">
|
||||
</div>
|
||||
|
||||
<div class="square dia-top-left-bottom-right" style="top:400px;left:750px;width:250px;height:150px;">
|
||||
</div>
|
||||
|
||||
|
||||
@component('components.circle',[
|
||||
'document_title' => 'Realisasi Terbit PBG',
|
||||
'document_color' => '#09ab5a',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'top:550px;left:100px;'
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
<div class="square" style="top:650px;left:200px;width:250px;height:2px;background-color:black;">
|
||||
</div>
|
||||
|
||||
@component('components.circle',[
|
||||
'document_title' => 'Menunggu Klik DPMPTSP',
|
||||
'document_color' => '#0294ad',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'top:550px;left:400px'
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
<div class="square" style="top:650px;left:600px;width:250px;height:2px;background-color:black;">
|
||||
</div>
|
||||
|
||||
@component('components.circle',[
|
||||
'document_title' => 'Berproses Di Dinas Teknis',
|
||||
'document_color' => '#422519',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'visible_small_circle' => true,
|
||||
'style' => 'top:550px;left:700px'
|
||||
])
|
||||
@endcomponent
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
|
||||
|
||||
<!-- <div id="circle1" class="absolute w-16 h-16 bg-blue-500 rounded-full flex items-center justify-center text-white text-lg font-bold top-40 left-40">
|
||||
1
|
||||
</div>
|
||||
@@ -42,99 +203,29 @@
|
||||
</svg> -->
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Target PAD 2024',
|
||||
'document_color' => '#020e42',
|
||||
'document_type' => 'Pemohon',
|
||||
'document_id' => 'chart-all-task',
|
||||
'visible_small_circle' => true
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Kekurangan Potensi',
|
||||
'document_color' => '#911701',
|
||||
'document_type' => 'Pemohon',
|
||||
'document_id' => 'chart-all-task',
|
||||
'visible_small_circle' => true
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Total Potensi Berkas',
|
||||
'document_color' => '#02acfa',
|
||||
'document_type' => 'Pemohon',
|
||||
'document_id' => 'chart-all-task',
|
||||
'visible_small_circle' => true
|
||||
])
|
||||
@endcomponent
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Berkas Terverifikasi',
|
||||
'document_color' => '#0561f5',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'visible_small_circle' => true
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Berkas Belum Terverifikasi',
|
||||
'document_color' => '#b973ff',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'visible_small_circle' => true
|
||||
])
|
||||
@endcomponent
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Non Usaha',
|
||||
'document_color' => '#028399',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-non-business',
|
||||
'visible_small_circle' => true
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
@component('components.circle', [
|
||||
'document_title' => 'Usaha',
|
||||
'document_color' => '#616b7d',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'visible_small_circle' => true
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
@component('components.circle',[
|
||||
'document_title' => 'Realisasi Terbit PBG',
|
||||
'document_color' => '#09ab5a',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'visible_small_circle' => true
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
@component('components.circle',[
|
||||
'document_title' => 'Berproses Di Dinas Teknis',
|
||||
'document_color' => '#422519',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'visible_small_circle' => true
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
@component('components.circle',[
|
||||
'document_title' => 'Progress Manual',
|
||||
'document_color' => '#0294ad',
|
||||
'document_type' => 'Berkas',
|
||||
'document_id' => 'chart-business',
|
||||
'visible_small_circle' => true
|
||||
])
|
||||
@endcomponent
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
<div class="row d-flex justify-content-center">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user