@extends('layouts.index')
@push('css')
<!-- C3 charts css -->
<link href="{{ asset('assets/libs/c3/c3.min.css') }}" rel="stylesheet" type="text/css" />
<meta name="csrf-token" content="{{ csrf_token() }}">
{{-- select 2 css --}}
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="{{asset('assets/css/custom.css')}}">
<link rel="stylesheet" type="text/css" href="{{asset('assets/libs/bootstrap-datepicker/css/bootstrap-datepicker.min.css')}}">
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
{{-- leaflet --}}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY="
crossorigin=""/>
<style>
/* * {box-sizing: border-box}
*/
.realisasi {
width: 70%;
background-color: #ddd;
border-radius: 10%;
margin: 0 auto;
}
.bar-realisasi {
text-align: right;
padding-top: 10px;
padding-bottom: 10px;
color: white;
border-radius: 10%;
}
#map { height: 480px; }
/* .fisik {
max-width: 100%;
width: {{-- number_format(($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu') !== 0) ? ($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_realisasi') / max($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu'), 1)) : 1, 2) --}}%;
background-color: #04AA6D;
}
.keuangan-penyerapan {
max-width: 100%;
width: {{-- number_format(($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu') !== 0) ? ($dataOpdPerBulan[$currentMonth]->flatten()->sum('realisasi_keuangan_pd') / max($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu'), 1) * 100) : 1, 2) --}}%;
background-color: #04AA6D;
}
.keuangan-pembayaran {
max-width: 100%;
width: {{-- number_format(($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_nilai_kontrak') !== 0) ? ($dataOpdPerBulan[$currentMonth]->flatten()->sum('realisasi_keuangan_pd') / max(($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_nilai_kontrak')+$dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu_tanpa_realisasi')), 1) * 100) : 1, 2) --}}%;
background-color: #04AA6D;
} */
/* */
</style>
<style>
.sheet-bar-wrapper {
overflow-x: auto;
white-space: nowrap;
border-top: 1px solid #ddd;
background-color: #f8f9fa;
/* padding: 10px 0; */
}
.sheet-bar {
display: inline-flex;
/* padding: 10px; */
}
.sheet-tab {
display: inline-block;
margin-right: 5px;
padding: 8px 15px;
border: 1px solid #ddd;
border-radius: 4px;
cursor: pointer;
background-color: #fff;
}
.sheet-tab.active {
background-color: #1b82ec;
color: #fff;
}
.sheet-content {
/* padding: 20px; */
border: 1px solid #ddd;
margin-top: 10px;
background-color: #fff;
}
.sheet-bar-wrapper::-webkit-scrollbar {
height: 8px;
}
.sheet-bar-wrapper::-webkit-scrollbar-thumb {
background-color: #bbb;
border-radius: 4px;
}
.sheet-bar-wrapper::-webkit-scrollbar-track {
background-color: #f1f1f1;
}
</style>
@endpush
@section('content')
{{-- @dd($currentMonth) --}}
<div class="page-content">
<!-- Page-Title -->
<div class="page-title-box">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col-md-8">
<h4 class="page-title mb-1 text-light">Dashboard</h4>
<ol class="breadcrumb m-0">
<li class="breadcrumb-item active">Welcome to {{ env('APP_NAME') }} Dashboard</li>
</ol>
</div>
</div>
</div>
</div>
<div class="page-content-wrapper">
<div class="container-fluid">
<div class="row">
<div class="col-xl-3">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6">
<h5 class="text-nowrap">Selamat Datang!</h5>
{{-- @php
dump(Auth::user())
@endphp --}}
<p class="text-muted">{{ Auth::user()->nama; }}</p>
</div>
<div class="col-5 ml-auto">
<div>
<img src="assets/images/widget-img.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6">
<h5 class="text-nowrap">Database Tahun : </h5>
<p class="text-muted">{{ $year }}</p>
</div>
<div class="col-5 ml-auto">
<div>
<img src="assets/images/widget-img.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6">
<h5 class="text-nowrap">Paket Berjalan
<button type="button" class="btn btn-sm btn-secondary waves-effect detail_paket_berjalan_btn detail_pengadaan">
<i class="fa fa-info" aria-hidden="true"></i>
</button>
</h5>
<img src="{{asset('assets/img/determinate.gif')}}" class="loading_pengadaan" style="width: 9vw" alt="" srcset="">
<p class="text-muted text-nowrap" id="paket_berjalan">
{{-- {{ number_format($paket_berjalan, 0, ',', '.') }}
({{ number_format($paket_berjalan / $total_paket * 100 , 2, ',', '.') }}%) --}}
</p>
</div>
{{-- <div class="col-5 ml-auto">
</div> --}}
</div>
</div>
</div>
</div>
<div class="col-xl-3">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6">
<h5 class="text-nowrap">Paket Belum Berjalan
<button type="button" class="btn btn-sm btn-secondary waves-effect detail_paket_belum_berjalan_btn detail_pengadaan">
<i class="fa fa-info" aria-hidden="true"></i>
</button>
</h5>
<img src="{{asset('assets/img/determinate.gif')}}" class="loading_pengadaan" style="width: 13vw" alt="" srcset="">
<p class="text-muted text-nowrap" id="paket_belum_berjalan">
{{-- {{ number_format($paket_belum_berjalan, 0, ',', '.') }}
({{ number_format($paket_belum_berjalan / $total_paket * 100 , 2, ',', '.') }}%) --}}
</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-6">
<h5 class="text-nowrap">
<button type="button" class="btn btn-sm btn-secondary waves-effect detail_paket_total_btn detail_pengadaan">
<i class="fa fa-info" aria-hidden="true"></i>
</button>
Total Paket
</h5>
<img src="{{asset('assets/img/determinate.gif')}}" class="loading_pengadaan" style="width: 9vw" alt="" srcset="">
<p class="text-muted text-nowrap" id="total_paket">
{{-- {{ number_format($total_paket, 0, ',', '.') }} (100,00%) --}}
</p>
</div>
<div class="col-5 ml-auto">
<div>
<img src="assets/images/widget-img.png" alt="" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@role('admin')
{{-- <div class="row"> --}}
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<div class="row">
<form method="GET" class="d-flex w-100">
<div class="col-2">
<select name="bulan_awal" class="form-control mx-1">
<option value="01" @if($request->get('bulan_awal') == '01' ) SELECTED @endif>Januari</option>
<option value="02" @if($request->get('bulan_awal') == '02' ) SELECTED @endif>Februari</option>
<option value="03" @if($request->get('bulan_awal') == '03' ) SELECTED @endif>Maret</option>
<option value="04" @if($request->get('bulan_awal') == '04' ) SELECTED @endif>April</option>
<option value="05" @if($request->get('bulan_awal') == '05' ) SELECTED @endif>Mei</option>
<option value="06" @if($request->get('bulan_awal') == '06' ) SELECTED @endif>Juni</option>
<option value="07" @if($request->get('bulan_awal') == '07' ) SELECTED @endif>Juli</option>
<option value="08" @if($request->get('bulan_awal') == '08' ) SELECTED @endif>Agustus</option>
<option value="09" @if($request->get('bulan_awal') == '09' ) SELECTED @endif>September</option>
<option value="10" @if($request->get('bulan_awal') == '10' ) SELECTED @endif>Oktober</option>
<option value="11" @if($request->get('bulan_awal') == '11' ) SELECTED @endif>November</option>
<option value="12" @if($request->get('bulan_awal') == '12' ) SELECTED @endif>Desember</option>
</select>
</div>
<div class="col-2">
<select name="bulan_akhir" class="form-control mx-1">
<option value="12" @if($request->get('bulan_akhir') == '12' ) SELECTED @endif>Desember</option>
<option value="11" @if($request->get('bulan_akhir') == '11' ) SELECTED @endif>November</option>
<option value="10" @if($request->get('bulan_akhir') == '10' ) SELECTED @endif>Oktober</option>
<option value="09" @if($request->get('bulan_akhir') == '09' ) SELECTED @endif>September</option>
<option value="08" @if($request->get('bulan_akhir') == '08' ) SELECTED @endif>Agustus</option>
<option value="07" @if($request->get('bulan_akhir') == '07' ) SELECTED @endif>Juli</option>
<option value="06" @if($request->get('bulan_akhir') == '06' ) SELECTED @endif>Juni</option>
<option value="05" @if($request->get('bulan_akhir') == '05' ) SELECTED @endif>Mei</option>
<option value="04" @if($request->get('bulan_akhir') == '04' ) SELECTED @endif>April</option>
<option value="03" @if($request->get('bulan_akhir') == '03' ) SELECTED @endif>Maret</option>
<option value="02" @if($request->get('bulan_akhir') == '02' ) SELECTED @endif>Februari</option>
<option value="01" @if($request->get('bulan_akhir') == '01' ) SELECTED @endif>Januari</option>
</select>
</div>
<div class="col-6">
<select name="pd" id="" class="form-control select-opd mx-1">
<option value="all">Pemerintah Kota Samarinda</option>
@foreach ($opd as $item)
<option value="{{ $item->id }}" @if($request->get('pd') == $item->id ) SELECTED @endif>{{ $item->nama_perangkat_daerah }}</option>
@endforeach
</select>
</div>
<button type="submit" class="btn btn-warning">Filter</button>
<a href="{{url('/dashboard')}}" class="btn btn-success" style="margin-left: 5px;">Reset</a>
</form>
</div>
</div>
</div>
{{-- </div> --}}
@endrole
@role('monev')
@if (Auth::user()->opd_id == null)
{{-- <div class="row"> --}}
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<div class="row">
<form method="GET" class="d-flex w-100">
<select name="pd" id="" class="form-control select-opd mx-1">
<option value="all">Pemerintah Kota Samarinda</option>
@foreach ($opd as $item)
<option value="{{ $item->id }}" @if($request->get('pd') == $item->id ) SELECTED @endif>{{ $item->nama_perangkat_daerah }}</option>
@endforeach
</select>
<button type="submit" class="btn btn-warning">Filter</button>
<a href="{{url('/dashboard')}}" class="btn btn-success" style="margin-left: 5px;">Reset</a>
</form>
</div>
</div>
</div>
@endif
@endrole
<div class="row">
@role('admin')
<div class="col-md-2 m-2">
<form action="{{ route('clear.cache') }}">
@csrf
<button type="submit" class="btn btn-primary btn-generate">Perbaharui Dashboard</button>
{{-- <button type="button" class="btn btn-primary btn-generate" id="Test_0">TEST 0</button>
<button type="button" class="btn btn-primary btn-generate" id="Test">TEST 1</button>
<button type="button" class="btn btn-primary btn-generate" id="Test_2">TEST 2</button>
<button type="button" class="btn btn-primary btn-generate" id="Test_3">TEST 3</button> --}}
</form>
<form action="{{ url('dashboard') }}" target="_blank">
@if ($request->get('pd'))
<input type="hidden" name="pd" value="{{ $request->get('pd') }}">
<input type="hidden" name="bulan_awal" value="{{ $request->get('bulan_awal') }}">
<input type="hidden" name="bulan_akhir" value="{{ $request->get('bulan_akhir') }}">
@endif
<button type="submit" name="printpdf" class="btn btn-success mt-2"> <i class="fa fa-print"></i> Print Pdf</button>
</form>
</div>
@endrole
<div class="col-md-{{ Auth::user()->hasRole('admin') ? 9 : 12 }} m-2">
<div class="progress" style="height:35px; display:none;">
<div class="progress-bar progress-bar-striped progress-bar-animated" style="width:0%"><span style="font-size:14px;">Sedang melakukan pembaruan... <span class="percent-now"></span></span> </div>
</div>
<div class="alert alert-success d-flex align-items-center" id="last_update_at" style="height:36px;">
{{-- @if(isset($lastUpdatedAt)) <i class="fa fa-clock"></i>   Terakhir diperbarui pada {{ $lastUpdatedAt->format('Y-m-d H:i:s') }} @else Belum pernah diperbarui @endif --}}
</div>
</div>
</div>
<div class="row">
<div class="col-xl-8">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-xl-12">
{{-- <h4 class="card-title mb-4 text-center">{{ $nama_opd }}</h4> --}}
<h4 class="card-title mb-4 text-center" id="nama_opd"></h4>
<div class="row loading_1">
<img src="{{asset('assets/img/loading.gif')}}" style="margin-left: auto; margin-right: auto;" alt="">
</div>
<div class="row statik_data">
<div class="row">
<div class="col-xl-4 text-center">
<div>
<span class="text-muted text-nowrap">Pagu</span>
<h5 class="text-nowrap" id="total_pagu"></h5>
{{-- <h5 class="text-nowrap"> {{ number_format($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu') , 0, ',', '.') }}</h5> --}}
</div>
<div>
<span class="text-muted text-nowrap">Pagu Kontrak</span>
<h5 class="text-nowrap" id="total_pagu_berjalan"></h5>
{{-- <h5 class="text-nowrap"> {{ number_format($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu_berjalan') , 0, ',', '.') }}</h5> --}}
</div>
<div>
<span class="text-muted text-nowrap">Nilai Kontrak</span>
<h5 class="text-nowrap" id="total_nilai_kontrak"></h5>
{{-- <h5 class="text-nowrap"> {{ number_format($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_nilai_kontrak') , 0, ',', '.') }}</h5> --}}
</div>
<div>
<span class="text-muted text-nowrap">Realisasi Keuangan</span>
<h5 class="text-nowrap" id="realisasi_keuangan_pd"></h5>
{{-- <h5 class="text-nowrap"> {{ number_format($dataOpdPerBulan[$currentMonth]->flatten()->sum('realisasi_keuangan_pd') , 0, ',', '.') }}</h5> --}}
</div>
<div>
<span class="text-muted text-nowrap">Sisa Pagu</span>
<h5 class="text-nowrap" id="sisa_pagu"></h5>
{{-- <h5 class="text-nowrap"> {{ number_format($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu') - $dataOpdPerBulan[$currentMonth]->flatten()->sum('realisasi_keuangan_pd') , 0, ',', '.') }}</h5> --}}
</div>
<div>
<span class="text-muted text-nowrap">Sisa Pagu Kontrak</span>
<h5 class="text-nowrap" id="sisa_pagu_berjalan"></h5>
{{-- <h5 class="text-nowrap"> {{ number_format($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu_berjalan') - $dataOpdPerBulan[$currentMonth]->flatten()->sum('total_nilai_kontrak') , 0, ',', '.') }}</h5> --}}
</div>
</div>
<div class="col-xl-8 text-center">
<h5 class="text-center">Realisasi Fisik</h5>
{{-- <h4 class="text-center">{{ number_format($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_realisasi')/$dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu') , 2, ',', '.') }}%</h4> --}}
<h4 class="text-center" id="realisasi_fisik_bold"></h4>
<div class="realisasi">
<div class="bar-realisasi fisik"></div>
</div>
<span class="text-end" id="realisasi_fisik"></span>
{{-- <span class="text-end">{{ number_format($dataOpdPerBulan[$currentMonth]->flatten()->sum('target_fisik')/$dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu') *100 , 2, ',', '.') }}%</span> --}}
{{-- </div> --}}
{{-- <div class="col-xl-4 text-center"> --}}
<h5 class="text-center">Realisasi Keuangan Pembayaran</h5>
{{-- <h4 class="text-center">{{ number_format($dataOpdPerBulan[$currentMonth]->flatten()->sum('realisasi_keuangan_pd')/max($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_nilai_kontrak')+$dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu_tanpa_realisasi'),1) *100 , 2, ',', '.') }}%</h4> --}}
<h4 class="text-center" id="realisasi_keuangan_pembayaran_bold"></h4>
<div class="realisasi">
<div class="bar-realisasi keuangan-pembayaran"></div>
</div>
<span class="text-end" id="realisasi_keuangan_pembayaran"></span>
{{-- <span class="text-end">{{ number_format($dataOpdPerBulan[$currentMonth]->flatten()->sum('target_keuangan')/$dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu') *100 , 2, ',', '.') }}%</span> --}}
{{-- </div> --}}
{{-- <div class="col-xl-4 text-center"> --}}
<h5 class="text-center">Realisasi Keuangan Penyerapan</h5>
{{-- <h4 class="text-center">{{ number_format($dataOpdPerBulan[$currentMonth]->flatten()->sum('realisasi_keuangan_pd')/$dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu')*100 , 2, ',', '.') }}%</h4> --}}
<h4 class="text-center" id="realisasi_fisik_penyerapan_bold"></h4>
<div class="realisasi">
<div class="bar-realisasi keuangan-penyerapan"></div>
</div>
<span class="text-end" id="realisasi_fisik_penyerapan"></span>
{{-- <span class="text-end">{{ number_format($dataOpdPerBulan[$currentMonth]->flatten()->sum('target_keuangan')/$dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu') *100 , 2, ',', '.') }}%</span> --}}
</div>
</div>
</div>
<div class="row statik_data">
{{-- <div id="morris-donut-example" class="dashboard-charts morris-charts"></div> --}}
<canvas id="lineChart" height="500"></canvas>
</div>
</div>
<!-- End Col -->
</div>
<!-- end row -->
</div>
</div>
</div>
<!-- end col -->
<div class="col-xl-4">
<div class="card">
<div class="card-body">
<img src="{{asset('assets/img/loading.gif')}}" width="300" style="margin-left: auto; margin-right: auto;" class="loading_1" alt="">
<canvas id="barChart" class="statik_data" height="755"></canvas>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Col -->
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<table class="table table-flush table-bordered sticky-header">
<thead class="thead-light">
<tr class="biasa">
<th style="background: rgb(220, 218, 218)" colspan="2" class="align-middle">
<center><h5>Deviasi Fisik dan Keuangan</h5></center>
</th>
</tr>
<tr>
<th style="background: rgb(220, 218, 218)" class="align-middle">
<center><h5>Fisik</h5></center>
</th>
<th style="background: rgb(220, 218, 218)" class="align-middle">
<center><h5>Keuangan</h5></center>
</th>
</tr>
</thead>
<tbody>
<tr class="loading_1">
<td colspan="2">
<img src="{{asset('assets/img/loading.gif')}}" style="display: block; margin-left: auto; margin-right: auto; width: 150px;" alt="">
</td>
</tr>
{{-- @php
$realisasiFisik = $dataOpdPerBulan[$currentMonth]->flatten()->sum('total_realisasi') / max($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu'), 1);
$targetFisik = $dataOpdPerBulan[$currentMonth]->flatten()->sum('target_fisik') / max($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu'), 1) * 100;
$realisasiKeuangan = $dataOpdPerBulan[$currentMonth]->flatten()->sum('realisasi_keuangan_pd') / max($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_nilai_kontrak') + $dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu_tanpa_realisasi'), 1)*100;
$targetKeuangan = $dataOpdPerBulan[$currentMonth]->flatten()->sum('target_keuangan')/max($dataOpdPerBulan[$currentMonth]->flatten()->sum('total_pagu'),1) *100;
// $realisasiFisik = 5.79;
// $targetFisik = 15.40;
// $realisasiKeuangan = 1.83;
// $targetKeuangan = 15.10;
if (($realisasiFisik - $targetFisik) > 5) {
$backgroundRealisasiFisik = '#1B82EC'; // biru
} elseif (($realisasiFisik - $targetFisik) >= 0) {
$backgroundRealisasiFisik = '#2ecc71'; // hijau
} elseif (($realisasiFisik - $targetFisik) >= -5) {
$backgroundRealisasiFisik = '#F5B225'; // kuning
} elseif (($realisasiFisik - $targetFisik) < -5) {
$backgroundRealisasiFisik = '#ff7675'; // merah
} else{
$backgroundRealisasiFisik = '#ff7675'; // merah
}
if (($realisasiKeuangan - $targetKeuangan) > 5) {
$backgroundRealisasiKeuangan = '#1B82EC'; // biru
} elseif (($realisasiKeuangan - $targetKeuangan) >= 0) {
$backgroundRealisasiKeuangan = '#2ecc71'; // hijau
} elseif (($realisasiKeuangan - $targetKeuangan) >= -5) {
$backgroundRealisasiKeuangan = '#F5B225'; // kuning
} elseif (($realisasiKeuangan - $targetKeuangan) < -5) {
$backgroundRealisasiKeuangan = '#ff7675'; // merah
}
// dd($realisasiFisik - $targetFisik);
// $backgroundRealisasiFisik = $backgroundRealisasiFisik;
// $backgroundRealisasiFisik = ($realisasiFisik < $targetFisik) ? '#ff7675' : '#2ecc71';
// $backgroundRealisasiKeuangan = ($realisasiKeuangan < $targetKeuangan) ? '#ff7675' : '#2ecc71';
@endphp --}}
{{-- <tr>
<td class="text-center" style="font-size: 1.3em; background-color: {{ $backgroundRealisasiFisik }}; color: white">
{{ number_format($realisasiFisik - $targetFisik, 2, ',', '.') }}%
</td>
<td class="text-center" style="font-size: 1.3em; background-color: {{ $backgroundRealisasiKeuangan }}; color: white">
{{ number_format($realisasiKeuangan - $targetKeuangan, 2, ',', '.') }}%
</td>
</tr> --}}
<tr>
<td class="text-center" id="DFKFisik"></td>
<td class="text-center" id="DFKKeuangan"></td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- End Card -->
</div>
</div>
{{-- <div class="row"> --}}
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<h4>Resume Perangkat Daerah</h4>
<div class="table-responsive">
<table class="table table-flush table-bordered sticky-header">
<thead class="thead-light">
<tr class="biasa">
<th style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
<center><h5>No</h5></center>
</th>
<th style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
<center><h5>Perangkat Daerah</h5></center>
</th>
<th style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
<center><h5>Pagu</h5></center>
</th>
<th style="background: rgb(220, 218, 218)" rowspan="2" colspan="2" class="align-middle">
<center><h5>Sisa Pagu</h5></center>
</th>
<th style="background: rgb(220, 218, 218)" colspan="4">
<center><h5>Realisasi</h5></center>
</th>
</tr>
<tr class="biasa">
<th style="background: rgb(220, 218, 218)">
<center><h5>Fisik</h5></center>
</th>
<th style="background: rgb(220, 218, 218)" colspan="3">
<center><h5>Keuangan</h5></center>
</th>
</tr>
<tr class="biasa">
<th style="background: rgb(220, 218, 218)">
<center><h5>(Rp)</h5></center>
</th>
<th style="background: rgb(220, 218, 218)">
<center><h5>(%)</h5></center>
</th>
<th style="background: rgb(220, 218, 218)">
<center><h5>(%)</h5></center>
</th>
<th style="background: rgb(220, 218, 218)">
<center><h5>(Rp)</h5></center>
</th>
<th style="background: rgb(220, 218, 218)">
<center><h5 class="text-nowrap">Pembayaran (%)</h5></center>
</th>
<th style="background: rgb(220, 218, 218)">
<center><h5 class="text-nowrap">Penyerapan (%)</h5></center>
</th>
</tr>
</thead>
<tbody id="tbody_dataOpdPerBulan">
<tr class="loading_1">
<td colspan="9">
<img src="{{asset('assets/img/loading.gif')}}" style="display: block; margin-left: auto; margin-right: auto; width: 150px;" alt="">
</td>
</tr>
{{-- @foreach ($dataOpdPerBulan[$currentMonth] as $opd)
<tr>
<td>{{ $loop->iteration }}</td>
<td class="">{{ $opd->nama_perangkat_daerah }}</td>
<td class="text-end text-nowrap">Rp{{ number_format($opd->total_pagu , 0, ',', '.') }}</td>
<td class="text-end text-nowrap">Rp{{ number_format($opd->total_pagu - $opd->realisasi_keuangan_pd , 0, ',', '.') }}</td>
<td class="text-center text-nowrap">{{ number_format(($opd->total_pagu - $opd->realisasi_keuangan_pd)/ max($opd->total_pagu, 1) *100 , 2, ',', '.') }}%</td>
<td class="text-center">{{ number_format($opd->total_realisasi/ max($opd->total_pagu, 1) , 2, ',', '.') }}%</td>
<td class="text-end text-nowrap">Rp{{ number_format($opd->realisasi_keuangan_pd , 0, ',', '.') }}</td>
<td class="text-center">{{ number_format($opd->realisasi_keuangan_pd/ max(($opd->total_nilai_kontrak + $opd->total_pagu_tanpa_realisasi), 1)*100 , 2, ',', '.') }}%</td>
<td class="text-center">{{ number_format($opd->realisasi_keuangan_pd/ max($opd->total_pagu, 1)*100 , 2, ',', '.' )}}%</td>
</tr>
@endforeach --}}
</tbody>
</table>
</div>
</div>
</div>
{{-- </div> --}}
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<h4>{{ $judul }}</h4>
<div class="table-responsive">
<table class="table table-flush table-bordered sticky-header">
{{-- <thead class="thead-light">
<tr class="biasa">
<th class="align-middle text-center" class="break-word" style="background: rgb(220, 218, 218)" rowspan="3">Kode</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)" rowspan="3">Program/Kegiatan/Sub Kegiatan</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)" rowspan="3">PA/KPA</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)" rowspan="3">PPTK</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)" rowspan="3">Pagu (Rp)</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)" colspan="4">Realisasi</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)" rowspan="3">SKPD Pelaksana</th>
</tr>
<tr class="biasa text-center">
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Fisik</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)" colspan="3">Keuangan</th>
</tr>
<tr class="biasa text-center">
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">%</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">RP</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Pembayaran (%)</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Penyerapan (%)</th>
</tr>
</thead> --}}
<thead>
<tr class="biasa">
<td style="background: rgb(220, 218, 218)" class="align-middle" rowspan="3"><center><h5>No</h5></center></td>
<td style="background: rgb(220, 218, 218)" class="align-middle" rowspan="3"><center><h5>{{ $judul }}</h5></center></td>
{{-- <td style="background: rgb(220, 218, 218)" class="align-middle" rowspan="3"><center><h5>Opd Pelaksana (Unit / Sub Unit)</h5></center></td>
<td style="background: rgb(220, 218, 218)" class="align-middle" rowspan="3"><center><h5>Program / Kegiatan / Sub Kegiatan</h5></center></td> --}}
<td style="background: rgb(220, 218, 218)" class="align-middle" rowspan="3"><center><h5>Pagu</h5></center></td>
<td style="background: rgb(220, 218, 218)" class="align-middle" colspan="4"><center><h5>Realisasi</h5></center></td>
</tr>
<tr>
<td style="background: rgb(220, 218, 218)" class="align-middle"><center><h5>Fisik</h5></center></td>
<td style="background: rgb(220, 218, 218)" class="align-middle" colspan="3"><center><h5>Keuangan</h5></center></td>
</tr>
<tr>
<td style="background: rgb(220, 218, 218)" class="align-middle"><center><h5>(%)</h5></center></td>
<td style="background: rgb(220, 218, 218)" class="align-middle"><center><h5>(Rp)</h5></center></td>
<td style="background: rgb(220, 218, 218)" class="align-middle"><center><h5>Pembayaran (%)</h5></center></td>
<td style="background: rgb(220, 218, 218)" class="align-middle"><center><h5>Penyerapan (%)</h5></center></td>
</tr>
</thead>
<tbody id="tbody_program_unggulans">
<tr class="loading_2">
<td colspan="9">
<img src="{{asset('assets/img/loading.gif')}}" style="display: block; margin-left: auto; margin-right: auto; width: 150px;" alt="">
</td>
</tr>
{{-- <tr>
<td colspan="2" class="text-center">Total 10 Program Unggulan</td>
<td class="text-nowrap text-end">Rp{{ number_format($programUnggulans[$currentMonth]->flatten()->sum('total_pagu') , 0, ',', '.') }}</td>
<td class="text-center">{{ number_format($programUnggulans[$currentMonth]->flatten()->sum('total_realisasi')/($programUnggulans[$currentMonth]->flatten()->sum('total_pagu') > 0 ? $programUnggulans[$currentMonth]->flatten()->sum('total_pagu'):1),2, ',', '.')}}%</td>
<td class="text-nowrap text-end">Rp{{number_format($programUnggulans[$currentMonth]->flatten()->sum('realisasi_keuangan_pd') , 0, ',', '.')}}</td>
<td class="text-center">{{number_format(($programUnggulans[$currentMonth]->flatten()->sum('realisasi_keuangan_pd')/($programUnggulans[$currentMonth]->flatten()->sum('total_nilai_kontrak') > 0 ? $programUnggulans[$currentMonth]->flatten()->sum('total_nilai_kontrak') + $programUnggulans[$currentMonth]->flatten()->sum('total_pagu_tanpa_realisasi') :1))*100,2, ',', '.')}}%</td>
<td class="text-center">{{number_format(($programUnggulans[$currentMonth]->flatten()->sum('realisasi_keuangan_pd')/($programUnggulans[$currentMonth]->flatten()->sum('total_pagu') > 0 ? $programUnggulans[$currentMonth]->flatten()->sum('total_pagu'):1))*100,2, ',', '.')}}%</td>
</tr> --}}
{{-- @foreach ($programUnggulans[$currentMonth] as $program_unggulan_nama => $program_unggulan)
<tr class="table-info">
<td>{{ $loop->iteration }}</td>
<td class="text-nowrap">{{ $program_unggulan_nama }}</td>
<td class="text-nowrap text-end">Rp{{ number_format($program_unggulan->sum('total_pagu') , 0, ',', '.') }}</td>
<td class="text-center">{{ number_format($program_unggulan->sum('total_realisasi')/($program_unggulan->sum('total_pagu') > 0 ? $program_unggulan->sum('total_pagu'):1),2, ',', '.')}}%</td>
<td class="text-nowrap text-end">Rp{{number_format($program_unggulan->sum('realisasi_keuangan_pd') , 0, ',', '.')}}</td>
<td class="text-center">{{number_format(($program_unggulan->sum('realisasi_keuangan_pd')/($program_unggulan->sum('total_nilai_kontrak') > 0 ? $program_unggulan->sum('total_nilai_kontrak') + $program_unggulan->sum('total_pagu_tanpa_realisasi') : 1))*100,2, ',', '.')}}%</td>
<td class="text-center">{{number_format(($program_unggulan->sum('realisasi_keuangan_pd')/($program_unggulan->sum('total_pagu') > 0 ? $program_unggulan->sum('total_pagu'):1))*100,2, ',', '.')}}%</td>
</tr>
@endforeach --}}
{{-- <td></td>
<td></td> --}}
{{-- <td class="text-center">{{number_format(($program_unggulan->program_realisasi_keuangan_pd/($program_unggulan->program_nilai_kontrak_sum > 0 ? $program_unggulan->program_nilai_kontrak_sum:1))*100,2, ',', '.')}}%</td> --}}
</tbody>
{{-- <tbody>
@forelse ($programUnggulans as $pr)
@foreach ($pr->ProkerProgram as $pm)
<tr class="table-success">
<td>{{ $pm->program->kode }}</td>
<td colspan="3">{{ $pm->program->nama_program }}</td>
<td class="text-nowrap text-end">Rp{{ number_format($pm->program_pagu_sum , 0, ',', '.') }}</td>
<td class="text-center">{{ number_format($pm->ProkerKegiatan->sum('PersentaseFisik')/($pm->program_pagu_sum > 0 ? $pm->program_pagu_sum:1),2, ',', '.')}}%</td>
<td class="text-nowrap text-end">Rp{{number_format($pm->program_realisasi_keuangan_sum , 0, ',', '.')}}</td>
<td class="text-center">{{number_format(($pm->program_realisasi_keuangan_sum/($pm->program_nilai_kontrak_sum > 0 ? $pm->program_nilai_kontrak_sum:1))*100,2, ',', '.')}}%</td>
<td class="text-center">{{number_format(($pm->program_realisasi_keuangan_sum/($pm->program_pagu_sum > 0 ? $pm->program_pagu_sum:1))*100,2, ',', '.')}}%</td>
<td>{{ $pr->opd->nama_perangkat_daerah }}</td>
</tr>
@foreach ($pm->ProkerKegiatan as $pk)
<tr class="table-primary">
<td>{{ $pk->kegiatan->kode }}</td>
<td colspan="3">{{ $pk->kegiatan->nama_kegiatan }}</td>
<td class="text-nowrap text-end">Rp{{ number_format($pk->kegiatan_pagu_sum , 0, ',', '.') }}</td>
<td class="text-center">{{ number_format($pk->PersentaseFisik / ($pk->kegiatan_pagu_sum > 0 ? $pk->kegiatan_pagu_sum : 1) , 2, ',', '.') }}%</td>
<td class="text-nowrap text-end">Rp{{number_format($pk->kegiatan_realisasi_keuangan_sum , 0, ',', '.')}}</td>
<td class="text-center">{{number_format(($pk->kegiatan_realisasi_keuangan_sum/($pk->kegiatan_nilai_kontrak_sum > 0 ? $pk->kegiatan_nilai_kontrak_sum:1))*100,2, ',', '.')}}%</td>
<td class="text-center">{{number_format(($pk->kegiatan_realisasi_keuangan_sum/($pk->kegiatan_pagu_sum > 0 ? $pk->kegiatan_pagu_sum:1))*100,2, ',', '.')}}%</td>
<td>{{ $pr->opd->nama_perangkat_daerah }}</td>
</tr>
@foreach ($pk->ProkerSubKegiatan as $sk)
<tr class="table-light">
<td>{{ $sk->subKegiatan->kode }}</td>
<td>{{ $sk->subKegiatan->nama_sub_kegiatan }}</td>
<td>{{ $sk->Kpa->nama ?? "kpa belum di atur" }}</td>
<td>{{ $sk->Pptk->nama ?? "pptk belum di atur" }}</td>
<td class="text-nowrap text-end">Rp{{ number_format($sk->sub_kegiatan_pagu_sum , 0, ',', '.') }}</td>
<td class="text-center">{{ number_format($sk->PersentaseFisik / max($sk->sub_kegiatan_pagu_sum , 1) , 2, ',', '.') }}%</td>
<td class="text-nowrap text-end">Rp{{number_format($sk->sub_kegiatan_realisasi_keuangan_sum , 0, ',', '.')}}</td>
<td class="text-center">{{number_format(($sk->sub_kegiatan_realisasi_keuangan_sum/max($sk->sub_kegiatan_nilai_kontrak_sum , 1))*100,2, ',', '.')}}%</td>
<td class="text-center">{{number_format(($sk->sub_kegiatan_realisasi_keuangan_sum/max($sk->sub_kegiatan_pagu_sum , 1))*100,2, ',', '.')}}%</td>
<td>{{ $pr->opd->nama_perangkat_daerah }}</td>
</tr>
@endforeach
@endforeach
@endforeach
@empty
<tr>
<td class="text-center" colspan="17">Tidak ada data</td>
</tr>
@endforelse
</tbody> --}}
</table>
</div>
</div>
</div>
{{-- <div class="col-xl-12">
<div class="card">
<div class="card-body">
<h4>Proyek Strategis</h4>
<div class="table-responsive">
<div class="sheet-bar-wrapper">
<div class="sheet-bar">
@foreach ($strategis as $index => $sheet)
<div
class="sheet-tab @if($index === 0) active @endif"
data-sheet-id="sheet-{{ $index }}">
{{ $sheet['uraian'] }}
</div>
@endforeach
</div>
</div>
@forelse ($strategis as $index => $sheet)
<div
id="sheet-{{ $index }}"
class="sheet-content @if($index !== 0) d-none @endif">
<table id="table" class="table table-flush" data-show-columns="true">
<thead class="thead-light">
<tr class="biasa">
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">No</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Data</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Keterangan</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center">1</td>
<td>Nama Proyek</td>
<td>{{ $sheet->uraian }}</td>
</tr>
<tr>
<td class="text-center">2</td>
<td>Lokasi</td>
<td>{{ $sheet->RealisasiRincianKegiatan->lokasi ?? '-' }}</td>
</tr>
<tr>
<td class="text-center">3</td>
<td>Sumber Pendanaan</td>
<td>{{ $sheet->SumberDana->sumber_dana }}</td>
</tr>
<tr>
<td class="text-center">4</td>
<td>Pagu Anggaran</td>
<td>Rp{{ number_format($sheet->pagu , 0, ',', '.') }}</td>
</tr>
<tr>
<td class="text-center">5</td>
<td>Nilai Kontrak</td>
<td>Rp{{ number_format($sheet->RealisasiRincianKegiatan->kontrak , 0, ',', '.') }}</td>
</tr>
<tr>
<td class="text-center">6</td>
<td>Perangkat Daerah</td>
<td>{{ $sheet->Opd->nama_perangkat_daerah }}</td>
</tr>
<tr>
<td class="text-center">7</td>
<td>Metode Pelaksanaan</td>
<td>{{ $sheet->RealisasiRincianKegiatan->metode }}</td>
</tr>
<tr>
<td class="text-center">8</td>
<td>Penyedia</td>
<td>{{ $sheet->RealisasiRincianKegiatan->nama_penyedia ?? '-' }}</td>
</tr>
<tr>
<td class="text-center">10</td>
<td>Masa Kontrak</td>
<td>{{ $sheet->RealisasiRincianKegiatan->masa_kontrak ?? '-' }}</td>
</tr>
<tr>
<td class="text-center">11</td>
<td>Realisasi Keuangan</td>
<td>
Rp{{ $sheet->RealisasiRincianKegiatan ? number_format($sheet->RealisasiRincianKegiatan->realisasiKeuangan->sum(function ($item) {
return is_numeric($item->realisasi) ? $item->realisasi : 0;
}), 0, ',', '.') : "-" }}
</td>
</tr>
<tr>
<td class="text-center">12</td>
<td>Realisasi Fisik</td>
<td>
{{
$sheet->RealisasiRincianKegiatan
? number_format(
(
($sheet->volume != 0)
? ($sheet->RealisasiRincianKegiatan->realisasiFisik->sum('realisasi') / $sheet->volume) * 100
: 0
),2 , ',', '.'
)
: "0"
}}%
</td>
</tr>
<tr>
<td class="text-center">13</td>
<td>Masa Pemeliharaan</td>
<td>{{ $sheet->RealisasiRincianKegiatan->masa_pemeliharaan ?? '-' }}</td>
</tr>
<tr>
<td class="text-center">14</td>
<td>Dokumentasi</td>
<td>
@forelse($sheet->RealisasiRincianKegiatan->dokumen as $doc)
<div class="file-section">
<div class="file-info">
<p>
{{ $doc->keterangan == 0 ? 'Dokumen Kontrak, SK dan lain-lain' : ($doc->keterangan == 1 ? 'Dokumentasi Kegiatan' : 'Dokumen Berita Acara Serah Terima') }}
</p>
<p>{{ $doc->file_name }}</p>
</div>
<div class="file-preview">
<img data-enlargable src="{{ asset("assets/document/$doc->file_name") }}" alt="{{ $doc->file_name }}" height="100">
</div>
<div class="file-actions">
<br>
<a href="{{route('doc.download',$doc->id)}}" class="btn btn-success"><i class="fa fa-download"></i></a>
<a link="{{route('doc.delete',$doc->id)}}" class="btn btn-danger btn-del"><i class="fa fa-times"></i></a>
</div>
</div>
<hr>
@empty
<div>
Belum ada dokumentasi
</div>
@endforelse
</td>
</tr>
</tbody>
</table>
</div>
@empty
<center>
Belum ada Data
</center>
@endforelse
</div>
</div>
</div> --}}
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<h4>Proyek Strategis</h4>
<div class="table-responsive">
<table id="table" class="table table-flush sticky-header" data-show-columns="true">
<thead class="thead-light">
<tr class="biasa">
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">No</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Nama Proyek</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Lokasi</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Sumber Pendanaan</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Pagu Anggaran</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Nilai Kontrak</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Perangkat Daerah</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Metode Pelaksanaan</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Penyedia</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Masa Kontrak</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Realisasi Keuangan</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Realisasi Fisik</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Masa Pemeliharaan</th>
<th class="align-middle text-center" style="background: rgb(220, 218, 218)">Dokumentasi</th>
</tr>
</thead>
<tbody>
@foreach ($strategis as $index => $sheet)
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ $sheet->uraian }}</td>
<td>{{ $sheet->RealisasiRincianKegiatan->lokasi ?? '-' }}</td>
<td>{{ $sheet->SumberDana->sumber_dana }}</td>
<td class="text-end">Rp{{ number_format($sheet->pagu , 0, ',', '.') }}</td>
<td class="text-end">Rp{{ number_format($sheet->RealisasiRincianKegiatan->nilai_kontrak ?? 0 , 0, ',', '.') }}</td>
<td>{{ $sheet->Opd->nama_perangkat_daerah }}</td>
<td>{{ $sheet->RealisasiRincianKegiatan->metode }}</td>
<td>{{ $sheet->RealisasiRincianKegiatan->nama_penyedia ?? '-' }}</td>
<td>{{ $sheet->RealisasiRincianKegiatan->masa_kontrak ?? '-' }}</td>
<td>
Rp{{ $sheet->RealisasiRincianKegiatan ? number_format($sheet->RealisasiRincianKegiatan->realisasiKeuangan->sum(function ($item) {
return is_numeric($item->realisasi) ? $item->realisasi : 0;
}), 0, ',', '.') : "-" }}
</td>
<td>
{{
$sheet->RealisasiRincianKegiatan
? number_format(
(
($sheet->volume != 0)
? ($sheet->RealisasiRincianKegiatan->realisasiFisik->sum('realisasi') / $sheet->volume) * 100
: 0
),2 , ',', '.'
)
: "0"
}}%
</td>
<td>{{ $sheet->RealisasiRincianKegiatan->masa_pemeliharaan ?? '-' }}</td>
<td>
@forelse($sheet->RealisasiRincianKegiatan->dokumen as $doc)
<div class="file-section">
<div class="file-info">
<p>
{{ $doc->keterangan == 0 ? 'Dokumen Kontrak, SK dan lain-lain' : ($doc->keterangan == 1 ? 'Dokumentasi Kegiatan' : 'Dokumen Berita Acara Serah Terima') }}
</p>
<p>{{ $doc->file_name }}</p>
</div>
<div class="file-preview">
<img data-enlargable src="{{ asset("assets/document/$doc->file_name") }}" alt="{{ $doc->file_name }}" height="100">
</div>
</div>
<hr>
@empty
<div>
Belum ada dokumentasi
</div>
@endforelse
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
{{-- <div class="row"> --}}
<div class="col-xl-12">
<div class="card">
<div class="card-body">
<h4>Lokasi Pekerjaan</h4>
<div id="map">
<img src="{{asset('assets/img/loading.gif')}}" class="loading_3" style="display: block; margin-left: auto; margin-right: auto; margin-top: 50px; width: 320px;" alt="">
</div>
</div>
</div>
</div>
{{-- </div> --}}
{{-- modal detail paket berjalan --}}
<div class="modal fade" id="paketBerjalanDetail" data-bs-backdrop="static" data-bs-keyboard="false"
aria-labelledby="paketBerjalanDetailLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header text-center">
<h1 class="modal-title fs-7" id="paketBerjalanDetailLabel">Rincian Paket Berjalan</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body table-responsive">
<table class="table table-flush table-bordered">
<thead>
<tr style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
{{-- <th class="text-center" colspan="3">Non Pengadaan</th> --}}
<th class="text-center" colspan="3">
<a href="{{ route('pencarian_rincian.index', ['metode' => '', 'status' => 'berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 0]) }}" target="_blank" rel="noopener noreferrer">Non Pengadaan</a>
</th>
</tr>
<tr style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
<td class="text-center">Jumlah</td>
<td class="text-center">%</td>
<td class="text-center">Rp</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" id="paket_berjalan_non_pengadaan">
{{-- {{ $paket_berjalan_non_pengadaan }} --}}
</td>
<td class="text-center" id="paket_berjalan_non_pengadaan_percent">
{{-- {{ number_format(($paket_berjalan_non_pengadaan / max($paket_berjalan, 1)) * 100 , 2, ',', '.') }}% --}}
</td>
<td class="text-end" id="paket_berjalan_non_pengadaan_pagu"></td>
{{-- paket_berjalan_non_pengadaan --}}
{{-- <td class="text-center">{{ number_format(($paket_berjalan_non_pengadaan / max($paket_berjalan, 1)) * 100 , 2, ',', '.') }}%</td> --}}
</tr>
</tbody>
</table>
<table class="table table-flush table-bordered">
<thead>
<tr style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
<th class="text-center" colspan="4">Pengadaan</th>
</tr>
<tr style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
<td class="text-center">Metode</td>
<td class="text-center">Jumlah</td>
<td class="text-center">%</td>
<td class="text-center">Rp</td>
</tr>
</thead>
<tbody id="berjalan_pengadaan">
{{--
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'swakelola', 'status' => 'berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Swakelola</a></td>
<td class="text-center" id="paket_berjalan_swakelola">
{{ $paket_berjalan_swakelola }}
</td>
<td class="text-center" id="paket_berjalan_swakelola_percent">
{{ number_format(($paket_berjalan_swakelola / max($paket_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'pengadaan langsung', 'status' => 'berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Pengadaan Langsung</a></td>
<td class="text-center" id="paket_berjalan_pengadaan_langsung">
{{ $paket_berjalan_pengadaan_langsung }}
</td>
<td class="text-center" id="paket_berjalan_pengadaan_langsung_percent">
{{ number_format(($paket_berjalan_pengadaan_langsung / max($paket_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'pengadaan dikecualikan', 'status' => 'berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Pengadaan Dikecualikan</a></td>
<td class="text-center" id="paket_berjalan_pengadaan_dikecualikan">
{{ $paket_berjalan_pengadaan_dikecualikan }}
</td>
<td class="text-center" id="paket_berjalan_pengadaan_dikecualikan_percent">
{{ number_format(($paket_berjalan_pengadaan_dikecualikan / max($paket_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'e-purchasing', 'status' => 'berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">E-Purchasing</a></td>
<td class="text-center" id="paket_berjalan_e_purchasing">
{{ $paket_berjalan_e_purchasing }}
</td>
<td class="text-center" id="paket_berjalan_e_purchasing_percent">
{{ number_format(($paket_berjalan_e_purchasing / max($paket_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'penunjukan langsung', 'status' => 'berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Penunjukan Langsung</a></td>
<td class="text-center" id="paket_berjalan_penunjukan_langsung">
{{ $paket_berjalan_penunjukan_langsung }}
</td>
<td class="text-center" id="paket_berjalan_penunjukan_langsung_percent">
{{ number_format(($paket_berjalan_penunjukan_langsung / max($paket_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'tender cepat', 'status' => 'berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Tender Cepat</a></td>
<td class="text-center" id="paket_berjalan_tender_cepat">
{{ $paket_berjalan_tender_cepat }}
</td>
<td class="text-center" id="paket_berjalan_tender_cepat_percent">
{{ number_format(($paket_berjalan_tender_cepat / max($paket_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'tender', 'status' => 'berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Tender</a></td>
<td class="text-center" id="paket_berjalan_tender">
{{ $paket_berjalan_tender }}
</td>
<td class="text-center" id="paket_berjalan_tender_percent">
{{ number_format(($paket_berjalan_tender / max($paket_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'seleksi', 'status' => 'berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Seleksi</a></td>
<td class="text-center" id="paket_berjalan_seleksi">
{{ $paket_berjalan_seleksi }}
</td>
<td class="text-center" id="paket_berjalan_seleksi_percent">
{{ number_format(($paket_berjalan_seleksi / max($paket_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr> --}}
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{{-- modal detail paket belum berjalan --}}
<div class="modal fade" id="paketBelumBerjalanDetail" data-bs-backdrop="static" data-bs-keyboard="false"
aria-labelledby="paketBelumBerjalanDetailLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header text-center">
<h1 class="modal-title fs-7" id="paketBelumBerjalanDetailLabel">Rincian Paket Belum Berjalan</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body table-responsive">
<table class="table table-flush table-bordered">
<thead>
<tr style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
{{-- <th class="text-center" colspan="2">Non Pengadaan</th> --}}
<th class="text-center" colspan="3"><a href="{{ route('pencarian_rincian.index', ['metode' => '', 'status' => 'belum_berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 0]) }}" target="_blank" rel="noopener noreferrer">Non Pengadaan</a></th>
</tr>
<tr style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
<td class="text-center">Jumlah</td>
<td class="text-center">%</td>
<td class="text-center">Rp</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" id="paket_belum_berjalan_non_pengadaan">
{{-- {{ $paket_belum_berjalan_non_pengadaan }} --}}
</td>
<td class="text-center" id="paket_belum_berjalan_non_pengadaan_percent">
{{-- {{ number_format(($paket_belum_berjalan_non_pengadaan / max($paket_belum_berjalan, 1)) * 100 , 2, ',', '.') }}% --}}
</td>
<td class="text-end" id="paket_belum_berjalan_non_pengadaan_pagu"></td>
{{-- paket_berjalan_non_pengadaan --}}
{{-- <td class="text-center">{{ number_format(($paket_berjalan_non_pengadaan / max($paket_berjalan, 1)) * 100 , 2, ',', '.') }}%</td> --}}
</tr>
</tbody>
</table>
<table class="table table-flush table-bordered">
<thead>
<tr style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
<th class="text-center" colspan="4">Pengadaan</th>
</tr>
<tr style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
<td class="text-center">Metode</td>
<td class="text-center">Jumlah</td>
<td class="text-center">%</td>
<td class="text-center">Rp</td>
</tr>
</thead>
<tbody id="belum_berjalan_pengadaan">
{{-- <tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'swakelola', 'status' => 'belum_berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Swakelola</a></td>
<td class="text-center" id="paket_belum_berjalan_swakelola">
{{ $paket_belum_berjalan_swakelola }}
</td>
<td class="text-center" id="paket_belum_berjalan_swakelola_percent">
{{ number_format(($paket_belum_berjalan_swakelola / max($paket_belum_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'pengadaan langsung', 'status' => 'belum_berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Pengadaan Langsung</a></td>
<td class="text-center" id="paket_belum_berjalan_pengadaan_langsung">
{{ $paket_belum_berjalan_pengadaan_langsung }}
</td>
<td class="text-center" id="paket_belum_berjalan_pengadaan_langsung_percent">
{{ number_format(($paket_belum_berjalan_pengadaan_langsung / max($paket_belum_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'pengadaan dikecualikan', 'status' => 'belum_berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Pengadaan Dikecualikan</a></td>
<td class="text-center" id="paket_belum_berjalan_pengadaan_dikecualikan">
{{ $paket_belum_berjalan_pengadaan_dikecualikan }}
</td>
<td class="text-center" id="paket_belum_berjalan_pengadaan_dikecualikan_percent">
{{ number_format(($paket_belum_berjalan_pengadaan_dikecualikan / max($paket_belum_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'e-purchasing', 'status' => 'belum_berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">E-Purchasing</a></td>
<td class="text-center" id="paket_belum_berjalan_e_purchasing">
{{ $paket_belum_berjalan_e_purchasing }}
</td>
<td class="text-center" id="paket_belum_berjalan_e_purchasing_percent">
{{ number_format(($paket_belum_berjalan_e_purchasing / max($paket_belum_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'penunjukan langsung', 'status' => 'belum_berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Penunjukan Langsung</a></td>
<td class="text-center" id="paket_belum_berjalan_penunjukan_langsung">
{{ $paket_belum_berjalan_penunjukan_langsung }}
</td>
<td class="text-center" id="paket_belum_berjalan_penunjukan_langsung_percent">
{{ number_format(($paket_belum_berjalan_penunjukan_langsung / max($paket_belum_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'tender cepat', 'status' => 'belum_berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Tender Cepat</a></td>
<td class="text-center" id="paket_belum_berjalan_tender_cepat">
{{ $paket_belum_berjalan_tender_cepat }}
</td>
<td class="text-center" id="paket_belum_berjalan_tender_cepat_percent">
{{ number_format(($paket_belum_berjalan_tender_cepat / max($paket_belum_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'tender', 'status' => 'belum_berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Tender</a></td>
<td class="text-center" id="paket_belum_berjalan_tender">
{{ $paket_belum_berjalan_tender }}
</td>
<td class="text-center" id="paket_belum_berjalan_tender_percent">
{{ number_format(($paket_belum_berjalan_tender / max($paket_belum_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr>
<tr>
<td class="text-center"><a href="{{ route('pencarian_rincian.index', ['metode' => 'seleksi', 'status' => 'belum_berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 1]) }}" target="_blank" rel="noopener noreferrer">Seleksi</a></td>
<td class="text-center" id="paket_belum_berjalan_seleksi">
{{ $paket_belum_berjalan_seleksi }}
</td>
<td class="text-center" id="paket_belum_berjalan_seleksi_percent">
{{ number_format(($paket_belum_berjalan_seleksi / max($paket_belum_berjalan, 1)) * 100 , 2, ',', '.') }}%
</td>
</tr> --}}
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
{{-- modal detail paket belum berjalan --}}
<div class="modal fade" id="paketTotalDetail" data-bs-backdrop="static" data-bs-keyboard="false"
aria-labelledby="paketTotalDetailLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header text-center">
<h1 class="modal-title fs-7" id="paketTotalDetailLabel">Rincian Total Paket Pekerjaan</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body table-responsive">
<table class="table table-flush table-bordered">
<thead>
<tr style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
{{-- <th class="text-center" colspan="2">Non Pengadaan</th> --}}
<th class="text-center" colspan="3"><a href="{{ route('pencarian_rincian.index', ['metode' => '', 'status' => 'belum_berjalan', 'pd' => $request->pd ?? "all" , 'pengadaan' => 0]) }}" target="_blank" rel="noopener noreferrer">Non Pengadaan</a></th>
</tr>
<tr style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
<td class="text-center">Jumlah</td>
<td class="text-center">%</td>
<td class="text-center">Rp</td>
</tr>
</thead>
<tbody>
<tr>
<td class="text-center" id="total_non_pengadaan">
{{-- {{ $paket_belum_berjalan_non_pengadaan }} --}}
</td>
<td class="text-center" id="total_non_pengadaan_percent">
{{-- {{ number_format(($paket_belum_berjalan_non_pengadaan / max($paket_belum_berjalan, 1)) * 100 , 2, ',', '.') }}% --}}
</td>
<td class="text-end" id="total_non_pengadaan_pagu"></td>
{{-- paket_berjalan_non_pengadaan --}}
{{-- <td class="text-center">{{ number_format(($paket_berjalan_non_pengadaan / max($paket_berjalan, 1)) * 100 , 2, ',', '.') }}%</td> --}}
</tr>
</tbody>
</table>
<table class="table table-flush table-bordered">
<thead>
<tr style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
<th class="text-center" colspan="4">Pengadaan</th>
</tr>
<tr style="background: rgb(220, 218, 218)" rowspan="3" class="align-middle">
<td class="text-center">Metode</td>
<td class="text-center">Jumlah</td>
<td class="text-center">%</td>
<td class="text-center">Rp</td>
</tr>
</thead>
<tbody id="total_pengadaan">
</tbody>
</table>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<br>
</div>
@endsection
@push('js')
<!--C3 Chart-->
<script src="{{ asset('assets/libs/d3/d3.min.js') }}"></script>
<script src="{{ asset('assets/libs/c3/c3.min.js') }}"></script>
{{-- select 2 --}}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="{{asset('assets/libs/bootstrap-datepicker/js/bootstrap-datepicker.min.js')}}"></script>
{{-- knob chart --}}
<script src="assets/libs/jquery-knob/jquery.knob.min.js"></script>
<script src="assets/js/pages/jquery-knob.init.js"></script>
<!-- Chart JS -->
<script src="assets/libs/chart.js/Chart.bundle.min.js"></script>
<!-- Chart Init JS -->
{{-- <script src="assets/js/pages/chartjs.init.js"></script> --}}
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo="
crossorigin=""></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/floatthead/2.2.5/jquery.floatThead.min.js" integrity="sha512-131fDtJKn0jUOqN1sfcHkBZHRmTCP0gmcpztVNuE3M8toiuIv8V9I+tpL/1t3GFDBcigLyB2hWJ3ZNjYwEO4bg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
$('img[data-enlargable]').addClass('img-enlargable').click(function(){
var src = $(this).attr('src');
var encodedSrc = encodeURIComponent(src); // Encode the URL
// Create a container to display the enlarged image
var $container = $('<div>').css({
background: 'RGBA(0,0,0,.5)',
width: '100%',
height: '100%',
position: 'fixed',
zIndex: '10000',
top: '0',
left: '0',
cursor: 'zoom-out',
}).appendTo('body');
// Create an image element inside the container
$('<img>').attr('src', src).css({
maxWidth: '100%',
maxHeight: '100%',
margin: 'auto',
display: 'block',
}).appendTo($container);
// Click anywhere on the container to close it
$container.click(function(){
$(this).remove();
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function () {
const tabs = document.querySelectorAll('.sheet-tab');
const sheets = document.querySelectorAll('.sheet-content');
tabs.forEach(tab => {
tab.addEventListener('click', function () {
// Remove active class from all tabs
tabs.forEach(t => t.classList.remove('active'));
// Hide all sheets
sheets.forEach(sheet => sheet.classList.add('d-none'));
// Add active class to the clicked tab
this.classList.add('active');
// Show the corresponding sheet
const sheetId = this.getAttribute('data-sheet-id');
const sheet = document.getElementById(sheetId);
sheet.classList.remove('d-none');
// Cari tabel di dalam sheet yang aktif
const table = sheet.querySelector('.sticky-header');
if (table) {
$(table).floatThead('reflow'); // Reflow untuk menghitung ulang posisi header
}
});
});
// Inisialisasi floatThead untuk semua tabel di awal
$('.sticky-header').floatThead();
// Panggil floatThead setelah halaman selesai dimuat
window.addEventListener('load', function () {
$('.sticky-header').floatThead('reflow');
});
// Tambahkan delay untuk memastikan rendering selesai
setTimeout(function () {
$('.sticky-header').floatThead('reflow');
}, 2000);
});
</script>
<script>
var $table = $('.sticky-header');
$table.floatThead({
top: 70,
responsiveContainer: function($table){
return $table.closest('.table-responsive');
}
});
$('#vertical-menu-btn').on('click', function () {
// Delay sedikit untuk memastikan animasi selesai (jika ada)
setTimeout(function () {
$table.floatThead('reflow'); // refresh posisi
}); // sesuaikan delay-nya jika perlu
});
</script>
<script>
// Mendapatkan nilai dari PHP
let bulan_awal = {{ number_format($request->bulan_awal ?? 1) }};
let bulan_akhir = {{ number_format($request->bulan_akhir ?? 12) }};
// console.log(bulan_awal);
function numberFormat(number, decimals, decimalSeparator, thousandSeparator) {
// Ensure the number is a valid float
number = parseFloat(number);
// Check if number is valid, otherwise return 0 or an appropriate fallback
if (isNaN(number)) {
return '0'; // or return an empty string if preferred
}
// Ensure decimals is a valid number, fallback to 0 if not provided
decimals = isNaN(decimals) ? 0 : parseInt(decimals);
// Use toFixed to format the number to the specified decimals
number = number.toFixed(decimals);
// Split number into integer and decimal parts
var parts = number.split('.');
// Format integer part with thousand separator
var integerPart = parts[0];
var formattedInteger = integerPart.replace(/\B(?=(\d{3})+(?!\d))/g, thousandSeparator);
// Combine integer and decimal parts
var formattedNumber = formattedInteger;
if (decimals > 0 && parts[1]) {
formattedNumber += decimalSeparator + parts[1];
}
return formattedNumber;
}
$('.detail_pengadaan').hide();
$('.statik_data').hide();
var urutan = [];
$('#Test_0').click(function() {
alert("Test 0");
$.ajax({
url: `{{url('dashboard')}}?bulan_awal={{ $request->get('bulan_awal') }}&bulan_akhir={{ $request->get('bulan_akhir') }}&pd={{ $request->get('pd') }}&urutan=0`,
method: 'GET',
success: function(jawab) {
// console.log(jawab);
$('.loading_pengadaan').hide();
$('.detail_pengadaan').show();
$('#paket_berjalan').text(
numberFormat(jawab.paket_berjalan, 0, ',', '.') + ` (${(jawab.paket_berjalan / jawab.total_paket * 100).toFixed(2)}%)`
);
$('#paket_belum_berjalan').text(
numberFormat(jawab.paket_belum_berjalan, 0, ',', '.') + ` (${(jawab.paket_belum_berjalan / jawab.total_paket * 100).toFixed(2)}%)`
);
$('#total_paket').text(
numberFormat(jawab.total_paket, 0, ',', '.') + ` (100,00%)`
);
//Non Pengadaaan
$('#paket_berjalan_non_pengadaan').text(
numberFormat(jawab.paket_berjalan_non_pengadaan, 0, ',', '.')
);
$('#paket_berjalan_non_pengadaan_percent').text(
((jawab.paket_berjalan_non_pengadaan / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_berjalan_non_pengadaan_pagu').text(
numberFormat(jawab.paket_berjalan_non_pengadaan_pagu, 0, ',', '.')
);
$('#paket_belum_berjalan_non_pengadaan').text(
numberFormat(jawab.paket_belum_berjalan_non_pengadaan, 0, ',', '.')
);
$('#paket_belum_berjalan_non_pengadaan_percent').text(
((jawab.paket_belum_berjalan_non_pengadaan / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
);
// Pengadaan Berjalan
$('#paket_berjalan_swakelola').text(
numberFormat(jawab.paket_berjalan_swakelola, 0, ',', '.')
);
$('#paket_berjalan_swakelola_percent').text(
((jawab.paket_berjalan_swakelola / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_berjalan_pengadaan_langsung').text(
numberFormat(jawab.paket_berjalan_pengadaan_langsung, 0, ',', '.')
);
$('#paket_berjalan_pengadaan_langsung_percent').text(
((jawab.paket_berjalan_pengadaan_langsung / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_berjalan_pengadaan_dikecualikan').text(
numberFormat(jawab.paket_berjalan_pengadaan_dikecualikan, 0, ',', '.')
);
$('#paket_berjalan_pengadaan_dikecualikan_percent').text(
((jawab.paket_berjalan_pengadaan_dikecualikan / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_berjalan_e_purchasing').text(
numberFormat(jawab.paket_berjalan_e_purchasing, 0, ',', '.')
);
$('#paket_berjalan_e_purchasing_percent').text(
((jawab.paket_berjalan_e_purchasing / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_berjalan_penunjukan_langsung').text(
numberFormat(jawab.paket_berjalan_penunjukan_langsung, 0, ',', '.')
);
$('#paket_berjalan_penunjukan_langsung_percent').text(
((jawab.paket_berjalan_penunjukan_langsung / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_berjalan_tender_cepat').text(
numberFormat(jawab.paket_berjalan_tender_cepat, 0, ',', '.')
);
$('#paket_berjalan_tender_cepat_percent').text(
((jawab.paket_berjalan_tender_cepat / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_berjalan_tender').text(
numberFormat(jawab.paket_berjalan_tender, 0, ',', '.')
);
$('#paket_berjalan_tender_percent').text(
((jawab.paket_berjalan_tender / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_berjalan_seleksi').text(
numberFormat(jawab.paket_berjalan_seleksi, 0, ',', '.')
);
$('#paket_berjalan_seleksi_percent').text(
((jawab.paket_berjalan_seleksi / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
);
// Pengadaan Belum Berjalan
$('#paket_belum_berjalan_swakelola').text(
numberFormat(jawab.paket_belum_berjalan_swakelola, 0, ',', '.')
);
$('#paket_belum_berjalan_swakelola_percent').text(
((jawab.paket_belum_berjalan_swakelola / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_belum_berjalan_pengadaan_langsung').text(
numberFormat(jawab.paket_belum_berjalan_pengadaan_langsung, 0, ',', '.')
);
$('#paket_belum_berjalan_pengadaan_langsung_percent').text(
((jawab.paket_belum_berjalan_pengadaan_langsung / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_belum_berjalan_pengadaan_dikecualikan').text(
numberFormat(jawab.paket_belum_berjalan_pengadaan_dikecualikan, 0, ',', '.')
);
$('#paket_belum_berjalan_pengadaan_dikecualikan_percent').text(
((jawab.paket_belum_berjalan_pengadaan_dikecualikan / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_belum_berjalan_e_purchasing').text(
numberFormat(jawab.paket_belum_berjalan_e_purchasing, 0, ',', '.')
);
$('#paket_belum_berjalan_e_purchasing_percent').text(
((jawab.paket_belum_berjalan_e_purchasing / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_belum_berjalan_penunjukan_langsung').text(
numberFormat(jawab.paket_belum_berjalan_penunjukan_langsung, 0, ',', '.')
);
$('#paket_belum_berjalan_penunjukan_langsung_percent').text(
((jawab.paket_belum_berjalan_penunjukan_langsung / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_belum_berjalan_tender_cepat').text(
numberFormat(jawab.paket_belum_berjalan_tender_cepat, 0, ',', '.')
);
$('#paket_belum_berjalan_tender_cepat_percent').text(
((jawab.paket_belum_berjalan_tender_cepat / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_belum_berjalan_tender').text(
numberFormat(jawab.paket_belum_berjalan_tender, 0, ',', '.')
);
$('#paket_belum_berjalan_tender_percent').text(
((jawab.paket_belum_berjalan_tender / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_belum_berjalan_seleksi').text(
numberFormat(jawab.paket_belum_berjalan_seleksi, 0, ',', '.')
);
$('#paket_belum_berjalan_seleksi_percent').text(
((jawab.paket_belum_berjalan_seleksi / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
);
},
error: function(xhr) {
console.error(`Error fetching data for page`, xhr);
}
});
});
$('#Test').click(function(e) {
alert("TEST");
$.ajax({
url: `{{url('dashboard')}}?bulan_awal={{ $request->get('bulan_awal') }}&bulan_akhir={{ $request->get('bulan_akhir') }}&pd={{ $request->get('pd') }}&urutan=1`,
method: 'GET',
success: function(jawab) {
console.log(jawab);
$('.statik_data').show();
$('.loading_1').hide();
$('#nama_opd').text(jawab.nama_opd);
if(jawab.lastUpdatedAt) {
$('#last_update_at').html('<i class="fa fa-clock"></i>   Terakhir diperbaiki pada ' + jawab.lastUpdatedAt);
} else {
$('#last_update_at').html('Belum pernah diperbarui');
}
let currentMonth = parseInt(jawab.currentMonth); // Misalnya: 0 untuk Januari, 1 untuk Februari, dll.
let data = jawab.dataOpdPerBulan[currentMonth];
let flattenedData = null;
if (Array.isArray(data)) {
flattenedData = data.flat();
} else {
let arrayFromNestedObj = Object.keys(data).map(key => data[key]);
flattenedData = arrayFromNestedObj.flat();
}
// // Flatten array jika data adalah array dari array
// flat() hanya tersedia di ES2019 dan seterusnya
// Jika data sudah dalam bentuk array datanya langsung, lewati langkah flatten
// Jumlahkan nilai total_pagu
let totalPaguSum = flattenedData.reduce((sum, item) => {
return sum + parseInt((item.total_pagu || 0)); // pastikan item memiliki total_pagu
}, 0);
let total_pagu_tanpa_realisasi_sum = flattenedData.reduce((sum, item) => {
return sum + parseFloat((item.total_pagu_tanpa_realisasi || 0)); // pastikan item memiliki total_pagu
}, 0);
let total_pagu_berjalan_sum = flattenedData.reduce((sum, item) => {
return sum + parseInt((item.total_pagu_berjalan || 0)); // pastikan item memiliki total_pagu
}, 0);
let total_nilai_kontrak_sum = flattenedData.reduce((sum, item) => {
return sum + parseInt((item.total_nilai_kontrak || 0)); // pastikan item memiliki total_pagu
}, 0);
let realisasi_keuangan_pd_sum = flattenedData.reduce((sum, item) => {
return sum + parseInt((item.realisasi_keuangan_pd || 0)); // pastikan item memiliki total_pagu
}, 0);
let sisa_pagu_sum = totalPaguSum - realisasi_keuangan_pd_sum;
let sisa_pagu_berjalan_sum = total_pagu_berjalan_sum - total_nilai_kontrak_sum;
// console.log(totalPaguSum);
$('#total_pagu').text(numberFormat(totalPaguSum, 0, ',', '.') );
$('#total_pagu_berjalan').text(numberFormat(total_pagu_berjalan_sum, 0, ',', '.'));
$('#total_nilai_kontrak').text(numberFormat(total_nilai_kontrak_sum, 0, ',', '.'));
$('#realisasi_keuangan_pd').text(numberFormat(realisasi_keuangan_pd_sum, 0, ',', '.'));
$('#sisa_pagu').text(numberFormat(sisa_pagu_sum, 0, ',', '.'));
$('#sisa_pagu_berjalan').text(numberFormat(sisa_pagu_berjalan_sum, 0, ',', '.'));
let target_fisik_sum = flattenedData.reduce((sum, item) => {
return sum + parseFloat((item.target_fisik || 0)); // pastikan item memiliki total_pagu
}, 0);
let target_keuangan_sum = flattenedData.reduce((sum, item) => {
return sum + parseFloat((item.target_keuangan || 0)); // pastikan item memiliki total_pagu
}, 0);
let total_realisasi_sum = flattenedData.reduce((sum, item) => {
return sum + parseFloat((item.total_realisasi || 0)); // pastikan item memiliki total_pagu
}, 0);
let realisasi_fisik_persen = (target_fisik_sum / totalPaguSum) * 100;
let realisasi_keuangan_pembayaran = target_keuangan_sum / totalPaguSum * 100;
let realisasi_fisik_penyerapan = target_keuangan_sum / totalPaguSum * 100;
$('#realisasi_fisik').text(realisasi_fisik_persen.toFixed(2) + "%");
$('#realisasi_keuangan_pembayaran').text(realisasi_keuangan_pembayaran.toFixed(2) + "%");
$('#realisasi_fisik_penyerapan').text(realisasi_fisik_penyerapan.toFixed(2) + "%");
let realisasi_fisik_bold_persen = total_realisasi_sum / totalPaguSum;
let realisasi_keuangan_pembayaran_bold_persen = realisasi_keuangan_pd_sum / Math.max((total_nilai_kontrak_sum + total_pagu_tanpa_realisasi_sum), 1) * 100;
let realisasi_fisik_penyerapan_bold_persen = realisasi_keuangan_pd_sum / totalPaguSum * 100;
$('#realisasi_fisik_bold').text(realisasi_fisik_bold_persen.toFixed(2) + "%");
$('#realisasi_keuangan_pembayaran_bold').text(realisasi_keuangan_pembayaran_bold_persen.toFixed(2) + "%");
$('#realisasi_fisik_penyerapan_bold').text(realisasi_fisik_penyerapan_bold_persen.toFixed(2) + "%");
let fisikWidth = 0;
if(totalPaguSum != 0) {
fisikWidth = total_realisasi_sum / Math.max(totalPaguSum, 1);
} else {
fisikWidth = 1;
}
// alert(fisikWidth);
$('.fisik').css({
'max-width': '100%',
'width' : fisikWidth.toFixed(2) + '%',
'background-color': '#04AA6D'
});
let KeuanganPembayaranWidth = 0;
if(total_nilai_kontrak_sum != 0) {
KeuanganPembayaranWidth = realisasi_keuangan_pd_sum / Math.max((total_nilai_kontrak_sum + total_pagu_tanpa_realisasi_sum), 1) * 100;
} else {
KeuanganPembayaranWidth = 1;
}
$('.keuangan-pembayaran').css({
'max-width': '100%',
'width' : KeuanganPembayaranWidth.toFixed(2) + '%',
'background-color': '#04AA6D'
});
let KeuanganPenyerapanWidth = 0;
if(totalPaguSum != 0) {
KeuanganPenyerapanWidth = realisasi_keuangan_pd_sum / Math.max(totalPaguSum, 1) * 100;
} else {
KeuanganPenyerapanWidth = 1;
}
$('.keuangan-penyerapan').css({
'max-width': '100%',
'width' : KeuanganPenyerapanWidth.toFixed(2) + '%',
'background-color': '#04AA6D'
});
// Deviasi Fisik dan Keuangan
let DFKrealisasiFisik = total_realisasi_sum / Math.max(totalPaguSum, 1);
let DFKtargetFisik = target_fisik_sum / Math.max(totalPaguSum, 1) * 100;
let DFKrealisasiKeuangan = realisasi_keuangan_pd_sum / Math.max((total_nilai_kontrak_sum + total_pagu_tanpa_realisasi_sum), 1) * 100;
let DFKtargetKeuangan = target_keuangan_sum / Math.max(totalPaguSum, 1) * 100;
let backgroundRealisasiFisik = '';
if ((DFKrealisasiFisik - DFKtargetFisik) > 5) {
backgroundRealisasiFisik = '#1B82EC'; // biru
} else if ((DFKrealisasiFisik - DFKtargetFisik) >= 0) {
backgroundRealisasiFisik = '#2ecc71'; // hijau
} else if ((DFKrealisasiFisik - DFKtargetFisik) >= -5) {
backgroundRealisasiFisik = '#F5B225'; // kuning
} else if ((DFKrealisasiFisik - DFKtargetFisik) < -5) {
backgroundRealisasiFisik = '#ff7675'; // merah
}
let backgroundRealisasiKeuangan = '';
if ((DFKrealisasiKeuangan - DFKtargetKeuangan) > 5) {
backgroundRealisasiKeuangan = '#1B82EC'; // biru
} else if ((DFKrealisasiKeuangan - DFKtargetKeuangan) >= 0) {
backgroundRealisasiKeuangan = '#2ecc71'; // hijau
} else if ((DFKrealisasiKeuangan - DFKtargetKeuangan) >= -5) {
backgroundRealisasiKeuangan = '#F5B225'; // kuning
} else if ((DFKrealisasiKeuangan - DFKtargetKeuangan) < -5) {
backgroundRealisasiKeuangan = '#ff7675'; // merah
}
$('#DFKFisik').text((DFKrealisasiFisik - DFKtargetFisik).toFixed(2)+'%');
$('#DFKKeuangan').text((DFKrealisasiKeuangan - DFKtargetKeuangan).toFixed(2)+'%');
$('#DFKFisik').css({
'font-size': '1.3em',
'background-color' : backgroundRealisasiFisik,
'color': 'white'
});
$('#DFKKeuangan').css({
'font-size': '1.3em',
'background-color' : backgroundRealisasiKeuangan,
'color': 'white'
});
let no = 0;
$.each(jawab.dataOpdPerBulan[currentMonth], function(apalah, bulan) {
no += 1;
let second = `
<tr>
<td>${no}</td>
<td>${bulan.nama_perangkat_daerah}</td>
<td class="text-end text-nowrap">Rp${numberFormat(parseInt(bulan.total_pagu), 0, ',', '.')}</td>
<td class="text-end text-nowrap">Rp${numberFormat(parseInt(bulan.total_pagu - bulan.realisasi_keuangan_pd), 0, ',', '.')}</td>
<td class="text-center text-nowrap">${(parseFloat((bulan.total_pagu - bulan.realisasi_keuangan_pd) / Math.max(bulan.total_pagu,1) * 100 )).toFixed(2)}%</td>
<td class="text-center">${(parseFloat((bulan.total_realisasi) / Math.max(bulan.total_pagu,1) )).toFixed(2)}%</td>
<td class="text-end text-nowrap">Rp${numberFormat(parseInt(bulan.realisasi_keuangan_pd), 0, ',', '.')}</td>
<td class="text-center">${(parseFloat(bulan.realisasi_keuangan_pd / Math.max((parseInt(bulan.total_nilai_kontrak) + parseInt(bulan.total_pagu_tanpa_realisasi)) ,1) * 100 )).toFixed(2)}%</td>
<td class="text-center">${(parseFloat(bulan.realisasi_keuangan_pd / Math.max(bulan.total_pagu,1) * 100 )).toFixed(2)}%</td>
</tr>
`;
$('#tbody_dataOpdPerBulan').append(second);
});
// foreach($dataOpdPerBulan as $index => $bulan)
let dataOPDPerbulan = jawab.dataOpdPerBulan;
let labels = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
let bulan_awal = {{ number_format($request->bulan_awal ?? 1) }};
let bulan_akhir = {{ number_format($request->bulan_akhir ?? 12) }};
// // Mengambil bulan berdasarkan permintaan user
labels = labels.slice(bulan_awal - 1, bulan_akhir);
// console.log(labels);
// // dataset1.push(); | dataset2.push(); | dataset4.push();
const dataset1 = [];
const dataset2 = [];
const dataset3 = [];
const dataset4 = [];
const dataset6 = [];
$.each(dataOPDPerbulan, function(apalah, month) {
if(apalah > currentMonth) {
return false;
}
let bulan = null;
if (Array.isArray(month)) {
bulan = month;
} else {
bulan = Object.keys(month).map(key => month[key]);
}
let total_pagu_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_pagu || 0));
}, 0);
let total_nilai_kontrak_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_nilai_kontrak || 0));
}, 0);
let total_pagu_tanpa_realisasi_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_pagu_tanpa_realisasi || 0));
}, 0);
let total_realisasi_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_realisasi || 0));
}, 0);
let target_fisik_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.target_fisik || 0));
}, 0);
let target_keuangan_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.target_keuangan || 0));
}, 0);
let realisasi_keuangan_pd_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.realisasi_keuangan_pd || 0));
}, 0);
let denominatorPagu = Math.max(total_pagu_sum, 1);
let denominatorNilaiKontrak = Math.max(total_nilai_kontrak_sum, 1);
let percentageRealisasiPagu = (total_realisasi_sum / denominatorPagu).toFixed(2);
let targetFisikPd = (target_fisik_sum / denominatorPagu * 100).toFixed(2);
let targetKeuanganPd = (target_keuangan_sum / denominatorPagu * 100).toFixed(2);
let percentageRealisasiPd = (realisasi_keuangan_pd_sum / denominatorPagu * 100).toFixed(2);
let percentageRealisasiKontrak = (realisasi_keuangan_pd_sum / (denominatorNilaiKontrak + total_pagu_tanpa_realisasi_sum) * 100).toFixed(2);
let percentageRealisasiSelisih = ((total_realisasi_sum / denominatorPagu) - (realisasi_keuangan_pd_sum + denominatorPagu * 100)).toFixed(2);
dataset1.push(percentageRealisasiPagu);
dataset2.push(percentageRealisasiPd);
dataset4.push(percentageRealisasiKontrak);
});
$.each(dataOPDPerbulan, function(apalah, month) {
let bulan = null;
if (Array.isArray(month)) {
bulan = month;
} else {
bulan = Object.keys(month).map(key => month[key]);
}
let total_pagu_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_pagu || 0));
}, 0);
let total_nilai_kontrak_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_nilai_kontrak || 0));
}, 0);
let total_realisasi_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_realisasi || 0));
}, 0);
let target_fisik_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.target_fisik || 0));
}, 0);
let target_keuangan_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.target_keuangan || 0));
}, 0);
let denominatorPagu = Math.max(total_pagu_sum, 1);
let denominatorNilaiKontrak = Math.max(total_nilai_kontrak_sum, 1);
let percentageRealisasiPagu = (total_realisasi_sum / denominatorPagu).toFixed(2);
let targetFisikPd = (target_fisik_sum / denominatorPagu * 100).toFixed(2);
let targetKeuanganPd = (target_keuangan_sum / denominatorPagu * 100).toFixed(2);
dataset3.push(targetFisikPd);
dataset6.push(targetKeuanganPd);
});
const datas = {
labels: labels,
datasets: [
{
label: 'Realisasi Fisik',
data: dataset1,
borderColor: 'rgb(42,49,66)',
fill: false,
cubicInterpolationMode: 'monotone',
tension: 0.4
},
{
label: 'Realisasi Keuangan Pembayaran',
data: dataset4,
borderColor: '#04AA6D',
fill: false,
tension: 0.4
},
{
label: 'Realisasi Keuangan Penyerapan',
data: dataset2,
borderColor: 'rgb(245,178,37)',
fill: false,
tension: 0.4
},
{
label: 'Target Fisik',
data: dataset3,
borderColor: 'rgb(27,130,236)',
fill: false
},
{
label: 'Target Keuangan',
data: dataset6,
borderColor: 'rgb(192,31,22)',
tension: 0.4,
fill: false
}
]
};
const config = {
type: 'line',
data: datas,
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
onComplete: function () {
const data = {
image: this.toBase64Image(),
};
const csrfToken = $('meta[name="csrf-token"]').attr('content');
$.ajax({
url: '{{url("dashboard")}}',
type: 'POST',
contentType: 'application/json',
headers: {
'X-CSRF-TOKEN': csrfToken // Sertakan token CSRF dalam header
},
data: JSON.stringify(data),
success: function(result) {
// console.log(result);
},
error: function(error) {
console.error('Error:', error);
}
});
// $('#diagram').val(this.toBase64Image());
},
},
plugins: {
title: {
display: true,
},
},
scales: {
x: {
display: true,
title: {
display: true
},
},
yAxes: [{
ticks: {
callback: function(value, index, ticks) {
return value.toString().replace(".", ",") + "%";
}
},
min: 0,
max: 100
}]
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
// Get the dataset index from tooltipItem
const datasetIndex = tooltipItem.datasetIndex;
// Access the datasets array from your chart data
const datasets = data.datasets;
// Get the label from the corresponding datasetIndex
const dataLabel = datasets[datasetIndex].label;
// Replace dot with comma in yLabel and concatenate with %
const formattedYLabel = tooltipItem.yLabel.toString().replace(".", ",") + "%";
// Combine label and formatted yLabel
return `${dataLabel}: ${formattedYLabel}`;
},
},
},
}
};
const ctx1 = document.getElementById('lineChart').getContext('2d');
const myChart = new Chart(ctx1,config);
// Data untuk dua dataset
let labels2 = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
// Mengambil bulan berdasarkan permintaan user
labels2 = labels2.slice(bulan_awal - 1, bulan_akhir);
const data1 = [];
const data2 = [];
const data3 = [];
$.each(dataOPDPerbulan, function(apalah, month) {
// console.log(apalah);
if(apalah > currentMonth) {
return false;
}
let bulan = null;
if (Array.isArray(month)) {
bulan = month;
} else {
bulan = Object.keys(month).map(key => month[key]);
}
let total_pagu_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_pagu || 0));
}, 0);
let realisasi_keuangan_pd_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.realisasi_keuangan_pd || 0));
}, 0);
data1.push(total_pagu_sum);
data2.push(realisasi_keuangan_pd_sum);
data3.push(total_pagu_sum - realisasi_keuangan_pd_sum);
});
// Konfigurasi chart
// const config2 = {
// type: 'horizontalBar',
// data: {
// labels: labels2,
// datasets: [
// {
// label: 'Pagu',
// backgroundColor: 'rgb(27,130,236)', // Warna bar dataset 1
// data: data1,
// },
// {
// label: 'Realisasi Keuangan',
// backgroundColor: 'rgb(245,178,37)', // Warna bar dataset 2
// data: data2,
// },
// {
// label: 'Sisa Pagu',
// backgroundColor: '#04AA6D', // Warna bar dataset 3
// data: data3,
// },
// ],
// },
// options: {
// responsive: true,
// scales: {
// xAxes: [{
// beginAtZero: true,
// ticks: {
// callback: function(value, index, ticks) {
// return 'Rp' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
// }
// },
// }],
// },
// tooltips: {
// callbacks: {
// label: function (tooltipItem, data) {
// return (
// "Rp" +
// tooltipItem.xLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
// );
// },
// },
// },
// },
// };
const config2 = {
type: 'horizontalBar', // Tetap gunakan tipe 'horizontalBar'
data: {
labels: labels2,
datasets: [
{
label: 'Pagu',
backgroundColor: 'rgb(27,130,236)', // Warna bar dataset 1
data: data1,
},
{
label: 'Realisasi Keuangan',
backgroundColor: 'rgb(245,178,37)', // Warna bar dataset 2
data: data2,
stack: 'Stack 1' // Menetapkan nama stack untuk dataset ini
},
{
label: 'Sisa Pagu',
backgroundColor: '#04AA6D', // Warna bar dataset 3
data: data3,
stack: 'Stack 1' // Menetapkan nama stack yang sama untuk dataset ini
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true,
ticks: {
callback: function(value, index, values) {
return 'Rp ' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
}
}],
yAxes: [{
stacked: false,
}]
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return (
"Rp" +
tooltipItem.xLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
);
},
},
},
},
};
// // Membuat chart
const ctx2 = document.getElementById('barChart').getContext('2d');
const myChart2 = new Chart(ctx2, config2);
},
error: function(xhr) {
console.error(`Error wak`, xhr);
}
});
});
$('#Test_2').click(function() {
alert('Test 2');
$.ajax({
url: `{{url('dashboard')}}?bulan_awal={{ $request->get('bulan_awal') }}&bulan_akhir={{ $request->get('bulan_akhir') }}&pd={{ $request->get('pd') }}&urutan=2`,
method: 'GET',
success: function(jawab) {
$('.loading_2').hide();
// console.log(jawab.programUnggulans[jawab.currentMonth]);
let realisasi_keuangan_pd = 0;
let total_nilai_kontrak = 0;
let total_pagu = 0;
let total_pagu_tanpa_realisasi = 0;
let total_realisasi = 0;
$.each(jawab.programUnggulans[parseInt(jawab.currentMonth)], function(apalah, programUnggulan) {
let nomor = programUnggulan.nomor;
let data = programUnggulan.data;
realisasi_keuangan_pd += data.reduce((sum, item) => {
return sum + parseInt((item.realisasi_keuangan_pd || 0));
}, 0);
total_nilai_kontrak += data.reduce((sum, item) => {
return sum + parseInt((item.total_nilai_kontrak || 0));
}, 0);
total_pagu += data.reduce((sum, item) => {
return sum + parseInt((item.total_pagu || 0));
}, 0);
total_pagu_tanpa_realisasi += data.reduce((sum, item) => {
return sum + parseInt((item.total_pagu_tanpa_realisasi || 0));
}, 0);
total_realisasi += data.reduce((sum, item) => {
return sum + parseInt((item.total_realisasi || 0));
}, 0);
});
let percentFisik = 0;
if(total_pagu > 0) {
percentFisik = total_realisasi / total_pagu;
} else {
percentFisik = total_realisasi / 1;
}
let PembayaranPercent = 0;
if((realisasi_keuangan_pd / total_nilai_kontrak) > 0) {
PembayaranPercent = (realisasi_keuangan_pd / (total_nilai_kontrak + total_pagu_tanpa_realisasi)) * 100;
} else {
PembayaranPercent = (realisasi_keuangan_pd / 1) * 100;
}
let PenyerapanPercent = 0;
if(total_pagu > 0) {
PenyerapanPercent = (realisasi_keuangan_pd / total_pagu) * 100;
} else {
PenyerapanPercent = (realisasi_keuangan_pd / 1) * 100;
}
let first = `
<tr>
<td colspan="2" class="text-center">Total</td>
<td class="text-nowrap text-end">Rp${numberFormat(total_pagu, 2, ',', '.')}</td>
<td class="text-center">${percentFisik.toFixed(2)}%</td>
<td class="text-nowrap text-end">Rp${numberFormat(realisasi_keuangan_pd, 0, ',', '.')}</td>
<td class="text-center">${PembayaranPercent.toFixed(2)}%</td>
<td class="text-center">${PenyerapanPercent.toFixed(2)}%</td>
</tr>
`;
$('#tbody_program_unggulans').append(first);
let no = 0;
$.each(jawab.programUnggulans[parseInt(jawab.currentMonth)], function(nama, bulan) {
no += 1;
let nomor = bulan.nomor;
let data = bulan.data;
let realisasi_keuangan_pd = 0;
let total_nilai_kontrak = 0;
let total_pagu = 0;
let total_pagu_tanpa_realisasi = 0;
let total_realisasi = 0;
realisasi_keuangan_pd += data.reduce((sum, item) => {
return sum + parseInt((item.realisasi_keuangan_pd || 0));
}, 0);
total_nilai_kontrak += data.reduce((sum, item) => {
return sum + parseInt((item.total_nilai_kontrak || 0));
}, 0);
total_pagu += data.reduce((sum, item) => {
return sum + parseInt((item.total_pagu || 0));
}, 0);
total_pagu_tanpa_realisasi += data.reduce((sum, item) => {
return sum + parseInt((item.total_pagu_tanpa_realisasi || 0));
}, 0);
total_realisasi += data.reduce((sum, item) => {
return sum + parseInt((item.total_realisasi || 0));
}, 0);
let percentFisik = 0;
if(total_pagu > 0) {
percentFisik = total_realisasi / total_pagu;
} else {
percentFisik = total_realisasi / 1;
}
let PembayaranPercent = 0;
if((realisasi_keuangan_pd / total_nilai_kontrak) > 0) {
PembayaranPercent = (realisasi_keuangan_pd / (total_nilai_kontrak + total_pagu_tanpa_realisasi)) * 100;
} else {
PembayaranPercent = (realisasi_keuangan_pd / 1) * 100;
}
let PenyerapanPercent = 0;
if(total_pagu > 0) {
PenyerapanPercent = (realisasi_keuangan_pd / total_pagu) * 100;
} else {
PenyerapanPercent = (realisasi_keuangan_pd / 1) * 100;
}
let first = `
<tr class="table-info">
<td class="text-nowrap">${nomor ?? ''}</td>
<td>${nama}</td>
<td class="text-nowrap text-end">Rp${numberFormat(total_pagu, 2, ',', '.')}</td>
<td class="text-center">${percentFisik.toFixed(2)}%</td>
<td class="text-nowrap text-end">Rp${numberFormat(realisasi_keuangan_pd, 0, ',', '.')}</td>
<td class="text-center">${PembayaranPercent.toFixed(2)}%</td>
<td class="text-center">${PenyerapanPercent.toFixed(2)}%</td>
</tr>
`;
$('#tbody_program_unggulans').append(first);
});
},
error: function(xhr) {
console.error(`Error fetching data for page ${id}:`, xhr);
}
});
});
$('#Test_3').click(function() {
alert('Test 3');
$.ajax({
url: `{{url('dashboard')}}?bulan_awal={{ $request->get('bulan_awal') }}&bulan_akhir={{ $request->get('bulan_akhir') }}&pd={{ $request->get('pd') }}&urutan=3`,
method: 'GET',
success: function(jawab) {
// console.log(jawab);
$('.loading_3').hide();
var map = L.map('map').setView([-0.507624, 117.168642], 11);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var locations = jawab.lokasi;
// console.log(locations);
// // Tampilkan marker untuk setiap lokasi
locations.forEach(function(location) {
var iconUrl = location.strategis == 1
? 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png'
: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png';
var customIcon = L.icon({
iconUrl: iconUrl,
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
// console.log(iconUrl);
var marker = L.marker([location.lat, location.lng], { icon: customIcon }).addTo(map);
marker.bindPopup('<a target="_blank" href="'+ location.id +'">'+ location.title +'</a>');
});
},
error: function(xhr) {
console.error(`Error fetching data for page ${id}:`, xhr);
}
});
});
Promise.all([
$.ajax({
url: `{{url('dashboard')}}?bulan_awal={{ $request->get('bulan_awal') }}&bulan_akhir={{ $request->get('bulan_akhir') }}&pd={{ $request->get('pd') }}&urutan=1`,
method: 'GET',
success: function(jawab) {
// console.log(jawab);
$('.statik_data').show();
$('.loading_1').hide();
$('#nama_opd').text(jawab.nama_opd);
if(jawab.lastUpdatedAt) {
$('#last_update_at').html('<i class="fa fa-clock"></i>   Terakhir diperbaiki pada ' + jawab.lastUpdatedAt);
} else {
$('#last_update_at').html('Belum pernah diperbarui');
}
let currentMonth = parseInt(jawab.currentMonth); // Misalnya: 0 untuk Januari, 1 untuk Februari, dll.
let data = jawab.dataOpdPerBulan[currentMonth];
let flattenedData = null;
if (Array.isArray(data)) {
flattenedData = data.flat();
} else {
let arrayFromNestedObj = Object.keys(data).map(key => data[key]);
flattenedData = arrayFromNestedObj.flat();
}
// // Flatten array jika data adalah array dari array
// flat() hanya tersedia di ES2019 dan seterusnya
// Jika data sudah dalam bentuk array datanya langsung, lewati langkah flatten
// Jumlahkan nilai total_pagu
let totalPaguSum = flattenedData.reduce((sum, item) => {
return sum + parseInt((item.total_pagu || 0)); // pastikan item memiliki total_pagu
}, 0);
let total_pagu_tanpa_realisasi_sum = flattenedData.reduce((sum, item) => {
return sum + parseFloat((item.total_pagu_tanpa_realisasi || 0)); // pastikan item memiliki total_pagu
}, 0);
let total_pagu_berjalan_sum = flattenedData.reduce((sum, item) => {
return sum + parseInt((item.total_pagu_berjalan || 0)); // pastikan item memiliki total_pagu
}, 0);
let total_nilai_kontrak_sum = flattenedData.reduce((sum, item) => {
return sum + parseInt((item.total_nilai_kontrak || 0)); // pastikan item memiliki total_pagu
}, 0);
let realisasi_keuangan_pd_sum = flattenedData.reduce((sum, item) => {
return sum + parseInt((item.realisasi_keuangan_pd || 0)); // pastikan item memiliki total_pagu
}, 0);
let sisa_pagu_sum = totalPaguSum - realisasi_keuangan_pd_sum;
let sisa_pagu_berjalan_sum = total_pagu_berjalan_sum - total_nilai_kontrak_sum;
// console.log(totalPaguSum);
$('#total_pagu').text(numberFormat(totalPaguSum, 0, ',', '.') );
$('#total_pagu_berjalan').text(numberFormat(total_pagu_berjalan_sum, 0, ',', '.'));
$('#total_nilai_kontrak').text(numberFormat(total_nilai_kontrak_sum, 0, ',', '.'));
$('#realisasi_keuangan_pd').text(numberFormat(realisasi_keuangan_pd_sum, 0, ',', '.'));
$('#sisa_pagu').text(numberFormat(sisa_pagu_sum, 0, ',', '.'));
$('#sisa_pagu_berjalan').text(numberFormat(sisa_pagu_berjalan_sum, 0, ',', '.'));
let target_fisik_sum = flattenedData.reduce((sum, item) => {
return sum + parseFloat((item.target_fisik || 0)); // pastikan item memiliki total_pagu
}, 0);
let target_keuangan_sum = flattenedData.reduce((sum, item) => {
return sum + parseFloat((item.target_keuangan || 0)); // pastikan item memiliki total_pagu
}, 0);
let total_realisasi_sum = flattenedData.reduce((sum, item) => {
return sum + parseFloat((item.total_realisasi || 0)); // pastikan item memiliki total_pagu
}, 0);
let realisasi_fisik_persen = (target_fisik_sum / totalPaguSum) * 100;
let realisasi_keuangan_pembayaran = target_keuangan_sum / totalPaguSum * 100;
let realisasi_fisik_penyerapan = target_keuangan_sum / totalPaguSum * 100;
$('#realisasi_fisik').text(realisasi_fisik_persen.toFixed(2) + "%");
$('#realisasi_keuangan_pembayaran').text(realisasi_keuangan_pembayaran.toFixed(2) + "%");
$('#realisasi_fisik_penyerapan').text(realisasi_fisik_penyerapan.toFixed(2) + "%");
let realisasi_fisik_bold_persen = total_realisasi_sum / totalPaguSum;
let realisasi_keuangan_pembayaran_bold_persen = realisasi_keuangan_pd_sum / Math.max((total_nilai_kontrak_sum + total_pagu_tanpa_realisasi_sum), 1) * 100;
let realisasi_fisik_penyerapan_bold_persen = realisasi_keuangan_pd_sum / totalPaguSum * 100;
$('#realisasi_fisik_bold').text(realisasi_fisik_bold_persen.toFixed(2) + "%");
$('#realisasi_keuangan_pembayaran_bold').text(realisasi_keuangan_pembayaran_bold_persen.toFixed(2) + "%");
$('#realisasi_fisik_penyerapan_bold').text(realisasi_fisik_penyerapan_bold_persen.toFixed(2) + "%");
let fisikWidth = 0;
if(totalPaguSum != 0) {
fisikWidth = total_realisasi_sum / Math.max(totalPaguSum, 1);
} else {
fisikWidth = 1;
}
// alert(fisikWidth);
$('.fisik').css({
'max-width': '100%',
'width' : fisikWidth.toFixed(2) + '%',
'background-color': '#04AA6D'
});
let KeuanganPembayaranWidth = 0;
if(total_nilai_kontrak_sum != 0) {
KeuanganPembayaranWidth = realisasi_keuangan_pd_sum / Math.max((total_nilai_kontrak_sum + total_pagu_tanpa_realisasi_sum), 1) * 100;
} else {
KeuanganPembayaranWidth = 1;
}
$('.keuangan-pembayaran').css({
'max-width': '100%',
'width' : KeuanganPembayaranWidth.toFixed(2) + '%',
'background-color': '#04AA6D'
});
let KeuanganPenyerapanWidth = 0;
if(totalPaguSum != 0) {
KeuanganPenyerapanWidth = realisasi_keuangan_pd_sum / Math.max(totalPaguSum, 1) * 100;
} else {
KeuanganPenyerapanWidth = 1;
}
$('.keuangan-penyerapan').css({
'max-width': '100%',
'width' : KeuanganPenyerapanWidth.toFixed(2) + '%',
'background-color': '#04AA6D'
});
// Deviasi Fisik dan Keuangan
let DFKrealisasiFisik = total_realisasi_sum / Math.max(totalPaguSum, 1);
let DFKtargetFisik = target_fisik_sum / Math.max(totalPaguSum, 1) * 100;
let DFKrealisasiKeuangan = realisasi_keuangan_pd_sum / Math.max((total_nilai_kontrak_sum + total_pagu_tanpa_realisasi_sum), 1) * 100;
let DFKtargetKeuangan = target_keuangan_sum / Math.max(totalPaguSum, 1) * 100;
let backgroundRealisasiFisik = '';
if ((DFKrealisasiFisik - DFKtargetFisik) > 5) {
backgroundRealisasiFisik = '#1B82EC'; // biru
} else if ((DFKrealisasiFisik - DFKtargetFisik) >= 0) {
backgroundRealisasiFisik = '#2ecc71'; // hijau
} else if ((DFKrealisasiFisik - DFKtargetFisik) >= -5) {
backgroundRealisasiFisik = '#F5B225'; // kuning
} else if ((DFKrealisasiFisik - DFKtargetFisik) < -5) {
backgroundRealisasiFisik = '#ff7675'; // merah
}
let backgroundRealisasiKeuangan = '';
if ((DFKrealisasiKeuangan - DFKtargetKeuangan) > 5) {
backgroundRealisasiKeuangan = '#1B82EC'; // biru
} else if ((DFKrealisasiKeuangan - DFKtargetKeuangan) >= 0) {
backgroundRealisasiKeuangan = '#2ecc71'; // hijau
} else if ((DFKrealisasiKeuangan - DFKtargetKeuangan) >= -5) {
backgroundRealisasiKeuangan = '#F5B225'; // kuning
} else if ((DFKrealisasiKeuangan - DFKtargetKeuangan) < -5) {
backgroundRealisasiKeuangan = '#ff7675'; // merah
}
// console.log(DFKtargetFisik - DFKrealisasiKeuangan);
$('#DFKFisik').text((DFKrealisasiFisik - DFKtargetFisik).toFixed(2)+'%');
$('#DFKKeuangan').text((DFKrealisasiKeuangan - DFKtargetKeuangan).toFixed(2)+'%');
$('#DFKFisik').css({
'font-size': '1.3em',
'background-color' : backgroundRealisasiFisik,
'color': 'white'
});
$('#DFKKeuangan').css({
'font-size': '1.3em',
'background-color' : backgroundRealisasiKeuangan,
'color': 'white'
});
let no = 0;
$.each(jawab.dataOpdPerBulan[currentMonth], function(apalah, bulan) {
no += 1;
let second = `
<tr>
<td>${no}</td>
<td>${bulan.nama_perangkat_daerah}</td>
<td class="text-end text-nowrap">Rp${numberFormat(parseInt(bulan.total_pagu), 0, ',', '.')}</td>
<td class="text-end text-nowrap">Rp${numberFormat(parseInt(bulan.total_pagu - bulan.realisasi_keuangan_pd), 0, ',', '.')}</td>
<td class="text-center text-nowrap">${(parseFloat((bulan.total_pagu - bulan.realisasi_keuangan_pd) / Math.max(bulan.total_pagu,1) * 100 )).toFixed(2)}%</td>
<td class="text-center">${(parseFloat((bulan.total_realisasi) / Math.max(bulan.total_pagu,1) )).toFixed(2)}%</td>
<td class="text-end text-nowrap">Rp${numberFormat(parseInt(bulan.realisasi_keuangan_pd), 0, ',', '.')}</td>
<td class="text-center">${(parseFloat(bulan.realisasi_keuangan_pd / Math.max((parseInt(bulan.total_nilai_kontrak) + parseInt(bulan.total_pagu_tanpa_realisasi)) ,1) * 100 )).toFixed(2)}%</td>
<td class="text-center">${(parseFloat(bulan.realisasi_keuangan_pd / Math.max(bulan.total_pagu,1) * 100 )).toFixed(2)}%</td>
</tr>
`;
$('#tbody_dataOpdPerBulan').append(second);
});
// foreach($dataOpdPerBulan as $index => $bulan)
let dataOPDPerbulan = jawab.dataOpdPerBulan;
let labels = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
let bulan_awal = {{ number_format($request->bulan_awal ?? 1) }};
let bulan_akhir = {{ number_format($request->bulan_akhir ?? 12) }};
// // Mengambil bulan berdasarkan permintaan user
labels = labels.slice(bulan_awal - 1, bulan_akhir);
// console.log(labels);
// // dataset1.push(); | dataset2.push(); | dataset4.push();
const dataset1 = [];
const dataset2 = [];
const dataset3 = [];
const dataset4 = [];
const dataset6 = [];
$.each(dataOPDPerbulan, function(apalah, month) {
// console.log(apalah);
if(apalah > currentMonth) {
return false;
}
let bulan = null;
if (Array.isArray(month)) {
bulan = month;
} else {
bulan = Object.keys(month).map(key => month[key]);
}
let total_pagu_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_pagu || 0));
}, 0);
let total_nilai_kontrak_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_nilai_kontrak || 0));
}, 0);
let total_pagu_tanpa_realisasi_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_pagu_tanpa_realisasi || 0));
}, 0);
let total_realisasi_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_realisasi || 0));
}, 0);
let target_fisik_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.target_fisik || 0));
}, 0);
let target_keuangan_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.target_keuangan || 0));
}, 0);
let realisasi_keuangan_pd_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.realisasi_keuangan_pd || 0));
}, 0);
let denominatorPagu = Math.max(total_pagu_sum, 1);
let denominatorNilaiKontrak = Math.max(total_nilai_kontrak_sum, 1);
let percentageRealisasiPagu = (total_realisasi_sum / denominatorPagu).toFixed(2);
let targetFisikPd = (target_fisik_sum / denominatorPagu * 100).toFixed(2);
let targetKeuanganPd = (target_keuangan_sum / denominatorPagu * 100).toFixed(2);
let percentageRealisasiPd = (realisasi_keuangan_pd_sum / denominatorPagu * 100).toFixed(2);
let percentageRealisasiKontrak = (realisasi_keuangan_pd_sum / (denominatorNilaiKontrak + total_pagu_tanpa_realisasi_sum) * 100).toFixed(2);
let percentageRealisasiSelisih = ((total_realisasi_sum / denominatorPagu) - (realisasi_keuangan_pd_sum + denominatorPagu * 100)).toFixed(2);
dataset1.push(percentageRealisasiPagu);
dataset2.push(percentageRealisasiPd);
dataset4.push(percentageRealisasiKontrak);
});
$.each(dataOPDPerbulan, function(apalah, month) {
let bulan = null;
if (Array.isArray(month)) {
bulan = month;
} else {
bulan = Object.keys(month).map(key => month[key]);
}
let total_pagu_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_pagu || 0));
}, 0);
let total_nilai_kontrak_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_nilai_kontrak || 0));
}, 0);
let total_realisasi_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_realisasi || 0));
}, 0);
let target_fisik_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.target_fisik || 0));
}, 0);
let target_keuangan_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.target_keuangan || 0));
}, 0);
let denominatorPagu = Math.max(total_pagu_sum, 1);
let denominatorNilaiKontrak = Math.max(total_nilai_kontrak_sum, 1);
let percentageRealisasiPagu = (total_realisasi_sum / denominatorPagu).toFixed(2);
let targetFisikPd = (target_fisik_sum / denominatorPagu * 100).toFixed(2);
let targetKeuanganPd = (target_keuangan_sum / denominatorPagu * 100).toFixed(2);
dataset3.push(targetFisikPd);
dataset6.push(targetKeuanganPd);
});
const datas = {
labels: labels,
datasets: [
{
label: 'Realisasi Fisik',
data: dataset1,
borderColor: 'rgb(42,49,66)',
fill: false,
cubicInterpolationMode: 'monotone',
tension: 0.4
},
{
label: 'Realisasi Keuangan Pembayaran',
data: dataset4,
borderColor: '#04AA6D',
fill: false,
tension: 0.4
},
{
label: 'Realisasi Keuangan Penyerapan',
data: dataset2,
borderColor: 'rgb(245,178,37)',
fill: false,
tension: 0.4
},
{
label: 'Target Fisik',
data: dataset3,
borderColor: 'rgb(27,130,236)',
fill: false
},
{
label: 'Target Keuangan',
data: dataset6,
borderColor: 'rgb(192,31,22)',
tension: 0.4,
fill: false
}
]
};
const config = {
type: 'line',
data: datas,
options: {
responsive: true,
maintainAspectRatio: false,
animation: {
onComplete: function () {
const data = {
image: this.toBase64Image(),
};
const csrfToken = $('meta[name="csrf-token"]').attr('content');
$.ajax({
url: '{{url("dashboard")}}',
type: 'POST',
contentType: 'application/json',
headers: {
'X-CSRF-TOKEN': csrfToken // Sertakan token CSRF dalam header
},
data: JSON.stringify(data),
success: function(result) {
// console.log(result);
},
error: function(error) {
console.error('Error:', error);
}
});
// $('#diagram').val(this.toBase64Image());
},
},
plugins: {
title: {
display: true,
},
},
scales: {
x: {
display: true,
title: {
display: true
},
},
yAxes: [{
ticks: {
callback: function(value, index, ticks) {
return value.toString().replace(".", ",") + "%";
}
},
min: 0,
max: 100
}]
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
// Get the dataset index from tooltipItem
const datasetIndex = tooltipItem.datasetIndex;
// Access the datasets array from your chart data
const datasets = data.datasets;
// Get the label from the corresponding datasetIndex
const dataLabel = datasets[datasetIndex].label;
// Replace dot with comma in yLabel and concatenate with %
const formattedYLabel = tooltipItem.yLabel.toString().replace(".", ",") + "%";
// Combine label and formatted yLabel
return `${dataLabel}: ${formattedYLabel}`;
},
},
},
}
};
const ctx1 = document.getElementById('lineChart').getContext('2d');
const myChart = new Chart(ctx1,config);
// Data untuk dua dataset
let labels2 = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
// Mengambil bulan berdasarkan permintaan user
labels2 = labels2.slice(bulan_awal - 1, bulan_akhir);
const data1 = [];
const data2 = [];
const data3 = [];
$.each(dataOPDPerbulan, function(apalah, month) {
// console.log(apalah);
if(apalah > currentMonth) {
return false;
}
let bulan = null;
if (Array.isArray(month)) {
bulan = month;
} else {
bulan = Object.keys(month).map(key => month[key]);
}
let total_pagu_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.total_pagu || 0));
}, 0);
let realisasi_keuangan_pd_sum = bulan.reduce((sum, item) => {
return sum + parseInt((item.realisasi_keuangan_pd || 0));
}, 0);
data1.push(total_pagu_sum);
data2.push(realisasi_keuangan_pd_sum);
data3.push(total_pagu_sum - realisasi_keuangan_pd_sum);
});
// Konfigurasi chart
// const config2 = {
// type: 'horizontalBar',
// data: {
// labels: labels2,
// datasets: [
// {
// label: 'Pagu',
// backgroundColor: 'rgb(27,130,236)', // Warna bar dataset 1
// data: data1,
// },
// {
// label: 'Realisasi Keuangan',
// backgroundColor: 'rgb(245,178,37)', // Warna bar dataset 2
// data: data2,
// },
// {
// label: 'Sisa Pagu',
// backgroundColor: '#04AA6D', // Warna bar dataset 3
// data: data3,
// },
// ],
// },
// options: {
// responsive: true,
// scales: {
// xAxes: [{
// beginAtZero: true,
// ticks: {
// callback: function(value, index, ticks) {
// return 'Rp' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
// }
// },
// }],
// },
// tooltips: {
// callbacks: {
// label: function (tooltipItem, data) {
// return (
// "Rp" +
// tooltipItem.xLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
// );
// },
// },
// },
// },
// };
const config2 = {
type: 'horizontalBar', // Tetap gunakan tipe 'horizontalBar'
data: {
labels: labels2,
datasets: [
{
label: 'Pagu',
backgroundColor: 'rgb(27,130,236)', // Warna bar dataset 1
data: data1,
},
{
label: 'Realisasi Keuangan',
backgroundColor: 'rgb(245,178,37)', // Warna bar dataset 2
data: data2,
stack: 'Stack 1' // Menetapkan nama stack untuk dataset ini
},
{
label: 'Sisa Pagu',
backgroundColor: '#04AA6D', // Warna bar dataset 3
data: data3,
stack: 'Stack 1' // Menetapkan nama stack yang sama untuk dataset ini
},
],
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
xAxes: [{
stacked: true, // Menetapkan sumbu x sebagai stacked
ticks: {
callback: function(value, index, values) {
return 'Rp ' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
}
}
}],
yAxes: [{
stacked: false // Tidak ada stacking pada sumbu y
}]
},
tooltips: {
callbacks: {
label: function (tooltipItem, data) {
return (
"Rp" +
tooltipItem.xLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
);
},
},
},
},
};
// // Membuat chart
const ctx2 = document.getElementById('barChart').getContext('2d');
const myChart2 = new Chart(ctx2, config2);
},
error: function(xhr) {
console.error(`Error wak`, xhr);
}
}),
$.ajax({
url: `{{url('dashboard')}}?bulan_awal={{ $request->get('bulan_awal') }}&bulan_akhir={{ $request->get('bulan_akhir') }}&pd={{ $request->get('pd') }}&urutan=3`,
method: 'GET',
success: function(jawab) {
// console.log(jawab);
$('.loading_3').hide();
var map = L.map('map').setView([-0.507624, 117.168642], 11);
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
var locations = jawab.lokasi;
// console.log(locations);
// // Tampilkan marker untuk setiap lokasi
locations.forEach(function(location) {
var iconUrl = location.strategis == 1
? 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-red.png'
: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-blue.png';
var customIcon = L.icon({
iconUrl: iconUrl,
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.7.1/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
// console.log(customIcon);
var marker = L.marker([location.lat, location.lng], { icon: customIcon }).addTo(map);
marker.bindPopup('<a target="_blank" href="'+ location.id +'">'+ location.title +'</a>');
});
},
error: function(xhr) {
console.error(`Error fetching data for page ${id}:`, xhr);
}
}),
$.ajax({
url: `{{url('dashboard')}}?bulan_awal={{ $request->get('bulan_awal') }}&bulan_akhir={{ $request->get('bulan_akhir') }}&pd={{ $request->get('pd') }}&urutan=2`,
method: 'GET',
success: function(jawab) {
$('.loading_2').hide();
// console.log(jawab.programUnggulans[jawab.currentMonth]);
let realisasi_keuangan_pd = 0;
let total_nilai_kontrak = 0;
let total_pagu = 0;
let total_pagu_tanpa_realisasi = 0;
let total_realisasi = 0;
$.each(jawab.programUnggulans[parseInt(jawab.currentMonth)], function(apalah, programUnggulan) {
//checkpoint
// console.log(programUnggulan);
let programUnggulanArray = Object.values(programUnggulan.data);
realisasi_keuangan_pd += programUnggulanArray.reduce((sum, item) => {
return sum + parseInt((item.realisasi_keuangan_pd || 0));
}, 0);
total_nilai_kontrak += programUnggulanArray.reduce((sum, item) => {
return sum + parseInt((item.total_nilai_kontrak || 0));
}, 0);
total_pagu += programUnggulanArray.reduce((sum, item) => {
return sum + parseInt((item.total_pagu || 0));
}, 0);
total_pagu_tanpa_realisasi += programUnggulanArray.reduce((sum, item) => {
return sum + parseInt((item.total_pagu_tanpa_realisasi || 0));
}, 0);
total_realisasi += programUnggulanArray.reduce((sum, item) => {
return sum + parseInt((item.total_realisasi || 0));
}, 0);
});
let percentFisik = 0;
if(total_pagu > 0) {
percentFisik = total_realisasi / total_pagu;
} else {
percentFisik = total_realisasi / 1;
}
let PembayaranPercent = 0;
if((realisasi_keuangan_pd / total_nilai_kontrak) > 0) {
PembayaranPercent = (realisasi_keuangan_pd / (total_nilai_kontrak + total_pagu_tanpa_realisasi)) * 100;
} else {
PembayaranPercent = (realisasi_keuangan_pd / 1) * 100;
}
let PenyerapanPercent = 0;
if(total_pagu > 0) {
PenyerapanPercent = (realisasi_keuangan_pd / total_pagu) * 100;
} else {
PenyerapanPercent = (realisasi_keuangan_pd / 1) * 100;
}
let first = `
<tr>
<td colspan="2" class="text-center">Total</td>
<td class="text-nowrap text-end">Rp${numberFormat(total_pagu, 2, ',', '.')}</td>
<td class="text-center">${percentFisik.toFixed(2)}%</td>
<td class="text-nowrap text-end">Rp${numberFormat(realisasi_keuangan_pd, 0, ',', '.')}</td>
<td class="text-center">${PembayaranPercent.toFixed(2)}%</td>
<td class="text-center">${PenyerapanPercent.toFixed(2)}%</td>
</tr>
`;
$('#tbody_program_unggulans').append(first);
let no = 0;
$.each(jawab.programUnggulans[parseInt(jawab.currentMonth)], function(apalah, bulan) {
no += 1;
let realisasi_keuangan_pd = 0;
let total_nilai_kontrak = 0;
let total_pagu = 0;
let total_pagu_tanpa_realisasi = 0;
let total_realisasi = 0;
let nomor = bulan.nomor;
let bulanArray = Object.values(bulan.data);
realisasi_keuangan_pd += bulanArray.reduce((sum, item) => {
return sum + parseInt((item.realisasi_keuangan_pd || 0));
}, 0);
total_nilai_kontrak += bulanArray.reduce((sum, item) => {
return sum + parseInt((item.total_nilai_kontrak || 0));
}, 0);
total_pagu += bulanArray.reduce((sum, item) => {
return sum + parseInt((item.total_pagu || 0));
}, 0);
total_pagu_tanpa_realisasi += bulanArray.reduce((sum, item) => {
return sum + parseInt((item.total_pagu_tanpa_realisasi || 0));
}, 0);
total_realisasi += bulanArray.reduce((sum, item) => {
return sum + parseInt((item.total_realisasi || 0));
}, 0);
let percentFisik = 0;
if(total_pagu > 0) {
percentFisik = total_realisasi / total_pagu;
} else {
percentFisik = total_realisasi / 1;
}
let PembayaranPercent = 0;
if((realisasi_keuangan_pd / total_nilai_kontrak) > 0) {
PembayaranPercent = (realisasi_keuangan_pd / (total_nilai_kontrak + total_pagu_tanpa_realisasi)) * 100;
} else {
PembayaranPercent = (realisasi_keuangan_pd / 1) * 100;
}
let PenyerapanPercent = 0;
if(total_pagu > 0) {
PenyerapanPercent = (realisasi_keuangan_pd / total_pagu) * 100;
} else {
PenyerapanPercent = (realisasi_keuangan_pd / 1) * 100;
}
let first = `
<tr class="table-info">
<td class="text-nowrap">${nomor ?? ''}</td>
<td>${apalah}</td>
<td class="text-nowrap text-end">Rp${numberFormat(total_pagu, 2, ',', '.')}</td>
<td class="text-center">${percentFisik.toFixed(2)}%</td>
<td class="text-nowrap text-end">Rp${numberFormat(realisasi_keuangan_pd, 0, ',', '.')}</td>
<td class="text-center">${PembayaranPercent.toFixed(2)}%</td>
<td class="text-center">${PenyerapanPercent.toFixed(2)}%</td>
</tr>
`;
$('#tbody_program_unggulans').append(first);
});
},
error: function(xhr) {
console.error(`Error fetching data for page ${id}:`, xhr);
}
}),
$.ajax({
url: `{{url('dashboard')}}?bulan_awal={{ $request->get('bulan_awal') }}&bulan_akhir={{ $request->get('bulan_akhir') }}&pd={{ $request->get('pd') }}&urutan=0`,
method: 'GET',
success: function(jawab) {
// console.log(jawab);
$('.loading_pengadaan').hide();
$('.detail_pengadaan').show();
$('#paket_berjalan').text(
numberFormat(jawab.paket_berjalan, 0, ',', '.') + ` (${(jawab.paket_berjalan / jawab.total_paket * 100).toFixed(2)}%)`
);
$('#paket_belum_berjalan').text(
numberFormat(jawab.paket_belum_berjalan, 0, ',', '.') + ` (${(jawab.paket_belum_berjalan / jawab.total_paket * 100).toFixed(2)}%)`
);
$('#total_paket').text(
numberFormat(jawab.total_paket, 0, ',', '.') + ` (100,00%)`
);
// Total Non Pengadaaan
$('#total_non_pengadaan').text(
numberFormat(parseInt(jawab.paket_berjalan_non_pengadaan) + parseInt(jawab.paket_belum_berjalan_non_pengadaan), 0, ',', '.')
);
$('#total_non_pengadaan_percent').text(
(((parseInt(jawab.paket_berjalan_non_pengadaan) + parseInt(jawab.paket_belum_berjalan_non_pengadaan)) / Math.max(parseInt(jawab.paket_berjalan) + parseInt(jawab.paket_belum_berjalan), 1)) * 100).toFixed(2) + '%'
);
$('#total_non_pengadaan_pagu').text(
// numberFormat(jawab.paket_berjalan_non_pengadaan_pagu + jawab.paket_belum_berjalan_non_pengadaan_pagu, 0, ',', '.')
'Rp'+numberFormat((parseInt(jawab.paket_belum_berjalan_non_pengadaan_pagu) + parseInt(jawab.paket_berjalan_non_pengadaan_pagu)), 0, ',', '.')
);
// Non Pengadaaan bejalan
$('#paket_berjalan_non_pengadaan').text(
numberFormat(jawab.paket_berjalan_non_pengadaan, 0, ',', '.')
);
$('#paket_berjalan_non_pengadaan_percent').text(
((jawab.paket_berjalan_non_pengadaan / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_berjalan_non_pengadaan_pagu').text(
'Rp'+numberFormat(jawab.paket_berjalan_non_pengadaan_pagu, 0, ',', '.')
);
// Non Pengadaaan belum Berjalan
$('#paket_belum_berjalan_non_pengadaan').text(
numberFormat(jawab.paket_belum_berjalan_non_pengadaan, 0, ',', '.')
);
$('#paket_belum_berjalan_non_pengadaan_percent').text(
((jawab.paket_belum_berjalan_non_pengadaan / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
);
$('#paket_belum_berjalan_non_pengadaan_pagu').text(
'Rp'+numberFormat(jawab.paket_belum_berjalan_non_pengadaan_pagu, 0, ',', '.')
);
// Non Pengadaaan bejalan
$.each(jawab.paket_berjalan_pengadaan, function(apalah, pengadaan) {
let html = `
<tr>
<td class="text-center"><a href="{{ url('pencarian_rincian') }}?metode=${pengadaan.metode}&status=berjalan&pd={{ $request->get('pd') }}&pengadaan=1" target="_blank" rel="noopener noreferrer">${pengadaan.metode}</a></td>
<td class="text-center" id="paket_berjalan_swakelola">
${numberFormat(pengadaan.jumlah, 0, ',', '.')}
</td>
<td class="text-center" id="paket_berjalan_swakelola_percent">
${((pengadaan.jumlah / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) }%
</td>
<td class="text-end" id="paket_berjalan_swakelola_percent">
Rp${numberFormat(pengadaan.total_pagu, 0, ',', '.')}
</td>
</tr>
`;
$('#berjalan_pengadaan').append(html);
});
// Non Pengadaaan belum bejalan
$.each(jawab.paket_belum_berjalan_pengadaan, function(apalah, pengadaan) {
let html = `
<tr>
<td class="text-center"><a href="{{ url('pencarian_rincian') }}?metode=${pengadaan.metode}&status=belum_berjalan&pd={{ $request->get('pd') }}&pengadaan=1" target="_blank" rel="noopener noreferrer">${pengadaan.metode}</a></td>
<td class="text-center" id="paket_berjalan_swakelola">
${numberFormat(pengadaan.jumlah, 0, ',', '.')}
</td>
<td class="text-center" id="paket_berjalan_swakelola_percent">
${((pengadaan.jumlah / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) }%
</td>
<td class="text-end"">
Rp${numberFormat(pengadaan.total_pagu, 0, ',', '.')}
</td>
</tr>
`;
$('#belum_berjalan_pengadaan').append(html);
});
$.each(jawab.total_paket_pengadaan, function(apalah, pengadaan) {
let html = `
<tr>
<td class="text-center"><a href="{{ url('pencarian_rincian') }}?metode=${pengadaan.metode}&status=belum_berjalan&pd={{ $request->get('pd') }}&pengadaan=1" target="_blank" rel="noopener noreferrer">${pengadaan.metode}</a></td>
<td class="text-center" id="paket_berjalan_swakelola">
${numberFormat(pengadaan.jumlah, 0, ',', '.')}
</td>
<td class="text-center" id="paket_berjalan_swakelola_percent">
${(((parseInt(pengadaan.jumlah) + parseInt(jawab.paket_belum_berjalan_non_pengadaan)) / Math.max(parseInt(jawab.paket_berjalan) + parseInt(jawab.paket_belum_berjalan), 1)) * 100).toFixed(2)}%
</td>
<td class="text-end"">
Rp${numberFormat(pengadaan.total_pagu, 0, ',', '.')}
</td>
</tr>
`;
$('#total_pengadaan').append(html);
});
// // Pengadaan Berjalan
// $('#paket_berjalan_swakelola').text(
// numberFormat(jawab.paket_berjalan_swakelola, 0, ',', '.')
// );
// $('#paket_berjalan_swakelola_percent').text(
// ((jawab.paket_berjalan_swakelola / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_berjalan_pengadaan_langsung').text(
// numberFormat(jawab.paket_berjalan_pengadaan_langsung, 0, ',', '.')
// );
// $('#paket_berjalan_pengadaan_langsung_percent').text(
// ((jawab.paket_berjalan_pengadaan_langsung / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_berjalan_pengadaan_dikecualikan').text(
// numberFormat(jawab.paket_berjalan_pengadaan_dikecualikan, 0, ',', '.')
// );
// $('#paket_berjalan_pengadaan_dikecualikan_percent').text(
// ((jawab.paket_berjalan_pengadaan_dikecualikan / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_berjalan_e_purchasing').text(
// numberFormat(jawab.paket_berjalan_e_purchasing, 0, ',', '.')
// );
// $('#paket_berjalan_e_purchasing_percent').text(
// ((jawab.paket_berjalan_e_purchasing / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_berjalan_penunjukan_langsung').text(
// numberFormat(jawab.paket_berjalan_penunjukan_langsung, 0, ',', '.')
// );
// $('#paket_berjalan_penunjukan_langsung_percent').text(
// ((jawab.paket_berjalan_penunjukan_langsung / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_berjalan_tender_cepat').text(
// numberFormat(jawab.paket_berjalan_tender_cepat, 0, ',', '.')
// );
// $('#paket_berjalan_tender_cepat_percent').text(
// ((jawab.paket_berjalan_tender_cepat / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_berjalan_tender').text(
// numberFormat(jawab.paket_berjalan_tender, 0, ',', '.')
// );
// $('#paket_berjalan_tender_percent').text(
// ((jawab.paket_berjalan_tender / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_berjalan_seleksi').text(
// numberFormat(jawab.paket_berjalan_seleksi, 0, ',', '.')
// );
// $('#paket_berjalan_seleksi_percent').text(
// ((jawab.paket_berjalan_seleksi / Math.max(jawab.paket_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// // Pengadaan Belum Berjalan
// $('#paket_belum_berjalan_swakelola').text(
// numberFormat(jawab.paket_belum_berjalan_swakelola, 0, ',', '.')
// );
// $('#paket_belum_berjalan_swakelola_percent').text(
// ((jawab.paket_belum_berjalan_swakelola / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_belum_berjalan_pengadaan_langsung').text(
// numberFormat(jawab.paket_belum_berjalan_pengadaan_langsung, 0, ',', '.')
// );
// $('#paket_belum_berjalan_pengadaan_langsung_percent').text(
// ((jawab.paket_belum_berjalan_pengadaan_langsung / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_belum_berjalan_pengadaan_dikecualikan').text(
// numberFormat(jawab.paket_belum_berjalan_pengadaan_dikecualikan, 0, ',', '.')
// );
// $('#paket_belum_berjalan_pengadaan_dikecualikan_percent').text(
// ((jawab.paket_belum_berjalan_pengadaan_dikecualikan / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_belum_berjalan_e_purchasing').text(
// numberFormat(jawab.paket_belum_berjalan_e_purchasing, 0, ',', '.')
// );
// $('#paket_belum_berjalan_e_purchasing_percent').text(
// ((jawab.paket_belum_berjalan_e_purchasing / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_belum_berjalan_penunjukan_langsung').text(
// numberFormat(jawab.paket_belum_berjalan_penunjukan_langsung, 0, ',', '.')
// );
// $('#paket_belum_berjalan_penunjukan_langsung_percent').text(
// ((jawab.paket_belum_berjalan_penunjukan_langsung / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_belum_berjalan_tender_cepat').text(
// numberFormat(jawab.paket_belum_berjalan_tender_cepat, 0, ',', '.')
// );
// $('#paket_belum_berjalan_tender_cepat_percent').text(
// ((jawab.paket_belum_berjalan_tender_cepat / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_belum_berjalan_tender').text(
// numberFormat(jawab.paket_belum_berjalan_tender, 0, ',', '.')
// );
// $('#paket_belum_berjalan_tender_percent').text(
// ((jawab.paket_belum_berjalan_tender / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
// );
// $('#paket_belum_berjalan_seleksi').text(
// numberFormat(jawab.paket_belum_berjalan_seleksi, 0, ',', '.')
// );
// $('#paket_belum_berjalan_seleksi_percent').text(
// ((jawab.paket_belum_berjalan_seleksi / Math.max(jawab.paket_belum_berjalan, 1)) * 100).toFixed(2) + '%'
// );
},
error: function(xhr) {
console.error(`Error fetching data for page`, xhr);
}
}),
]).then(function(responses) {
// console.log("Semua panggilan AJAX selesai.");
}).catch(function(error) {
// Tangani error
// console.error("Terjadi kesalahan:", error);
});
$('.detail_paket_berjalan_btn').click(function (e) {
$('#paketBerjalanDetail').modal('show');
});
$('.detail_paket_belum_berjalan_btn').click(function (e) {
$('#paketBelumBerjalanDetail').modal('show');
});
$('.detail_paket_total_btn').click(function (e) {
$('#paketTotalDetail').modal('show');
});
</script>
<script>
// var map = L.map('map').setView([-0.507624, 117.168642], 11);
// L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
// maxZoom: 19,
// attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
// }).addTo(map);
// var locations = ;
// {{-- @json(json_decode($lokasiJson)) --}}
// console.log(locations);
// // Tampilkan marker untuk setiap lokasi
// locations.forEach(function(location) {
// var marker = L.marker([location.lat, location.lng]).addTo(map);
// marker.bindPopup('<a target="_blank" href="'+ location.id +'">'+ location.title +'</a>');
// });
// const marker = L.marker([-0.507624, 117.168642]).addTo(map)
// .bindPopup('<b>Sambutan</b><br />Detail.').openPopup();
</script>
<script>
// const dataset1 = [];
// const dataset2 = [];
// const dataset3 = [];
// const dataset4 = [];
// const dataset6 = [];
// {{--
// @foreach($dataOpdPerBulan as $index => $bulan)
// @php
// if($index > $currentMonth) {
// break; // Menghentikan iterasi jika indeks lebih besar dari bulan saat ini
// }
// $totalPagu = $bulan->flatten()->sum('total_pagu');
// $totalNilaiKontrak = $bulan->flatten()->sum('total_nilai_kontrak');
// $totalPaguTanpaRealisasi = $bulan->flatten()->sum('total_pagu_tanpa_realisasi');
// // Avoid division by zero, set denominator to 1 if it is zero
// $denominatorPagu = max($totalPagu, 1);
// $denominatorNilaiKontrak = max($totalNilaiKontrak, 1);
// $percentageRealisasiPagu = number_format($bulan->flatten()->sum('total_realisasi') / $denominatorPagu, 2);
// $targetFisikPd = number_format($bulan->flatten()->sum('target_fisik') / $denominatorPagu * 100, 2);
// $targetKeuanganPd = number_format($bulan->flatten()->sum('target_keuangan') / $denominatorPagu * 100, 2);
// $percentageRealisasiPd = number_format($bulan->flatten()->sum('realisasi_keuangan_pd') / $denominatorPagu * 100, 2);
// $percentageRealisasiKontrak = number_format($bulan->flatten()->sum('realisasi_keuangan_pd') / ($denominatorNilaiKontrak + $totalPaguTanpaRealisasi) * 100, 2);
// $percentageRealisasiSelisih = number_format(($bulan->flatten()->sum('total_realisasi') / $denominatorPagu) - ($bulan->flatten()->sum('realisasi_keuangan_pd') / $denominatorPagu * 100), 2);
// @endphp
// dataset1.push({{ $percentageRealisasiPagu }});
// dataset2.push({{ $percentageRealisasiPd }});
// dataset4.push({{ $percentageRealisasiKontrak }});
// @endforeach
// @foreach($dataOpdPerBulan as $key => $bulan2)
// @php
// $totalPagu = $bulan->flatten()->sum('total_pagu');
// $totalNilaiKontrak = $bulan->flatten()->sum('total_nilai_kontrak');
// $denominatorPagu = max($totalPagu, 1);
// $denominatorNilaiKontrak = max($totalNilaiKontrak, 1);
// $percentageRealisasiPagu = number_format($bulan2->flatten()->sum('total_realisasi') / $denominatorPagu, 2);
// $targetFisikPd = number_format($bulan2->flatten()->sum('target_fisik') / $denominatorPagu * 100, 2);
// $targetKeuanganPd = number_format($bulan2->flatten()->sum('target_keuangan') / $denominatorPagu * 100, 2);
// $percentageRealisasiPd = number_format($bulan2->flatten()->sum('realisasi_keuangan_pd') / $denominatorPagu * 100, 2);
// $percentageRealisasiKontrak = number_format($bulan2->flatten()->sum('realisasi_keuangan_pd') / $denominatorNilaiKontrak * 100, 2);
// $percentageRealisasiSelisih = number_format(($bulan2->flatten()->sum('total_realisasi') / $denominatorPagu) - ($bulan->flatten()->sum('realisasi_keuangan_pd') / $denominatorPagu * 100), 2);
// @endphp
// dataset3.push({{ $targetFisikPd }});
// dataset6.push({{ $targetKeuanganPd }});
// @endforeach --}}
</script>
<script>
// Data untuk dua dataset
// let labels2 = ['Januari', 'Februari', 'Maret', 'April', 'Mei', 'Juni', 'Juli', 'Agustus', 'September', 'Oktober', 'November', 'Desember'];
// Mengambil bulan berdasarkan permintaan user
// labels2 = labels2.slice(bulan_awal - 1, bulan_akhir);
// const data1 = [];
// const data2 = [];
// const data3 = [];
/* {{--
@foreach($dataOpdPerBulan as $index => $bulan)
@php
if($index > $currentMonth) {
break; // Menghentikan iterasi jika indeks lebih besar dari bulan saat ini
}
@endphp
data1.push({{ ($bulan->flatten()->sum('total_pagu')) }});
data2.push({{ ($bulan->flatten()->sum('realisasi_keuangan_pd')) }});
data3.push({{ ($bulan->flatten()->sum('total_pagu') - $bulan->flatten()->sum('realisasi_keuangan_pd')) }});
@endforeach --}} */
// Konfigurasi chart
// const config2 = {
// type: 'horizontalBar',
// data: {
// labels: labels2,
// datasets: [
// {
// label: 'Pagu',
// backgroundColor: 'rgb(27,130,236)', // Warna bar dataset 1
// data: data1,
// },
// {
// label: 'Realisasi Keuangan',
// backgroundColor: 'rgb(245,178,37)', // Warna bar dataset 2
// data: data2,
// },
// {
// label: 'Sisa Pagu',
// backgroundColor: '#04AA6D', // Warna bar dataset 3
// data: data3,
// },
// ],
// },
// options: {
// responsive: true,
// scales: {
// xAxes: [{
// beginAtZero: true,
// ticks: {
// callback: function(value, index, ticks) {
// return 'Rp' + value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".");
// }
// },
// }],
// },
// tooltips: {
// callbacks: {
// label: function (tooltipItem, data) {
// return (
// "Rp" +
// tooltipItem.xLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
// );
// },
// },
// },
// },
// };
// const config2 = {
// type: 'horizontalBar', // Tetap gunakan tipe 'horizontalBar'
// data: {
// labels: labels2,
// datasets: [
// {
// label: 'Pagu',
// backgroundColor: 'rgb(27,130,236)', // Warna bar dataset 1
// data: data1,
// },
// {
// label: 'Realisasi Keuangan',
// backgroundColor: 'rgb(245,178,37)', // Warna bar dataset 2
// data: data2,
// stack: 'Stack 1' // Menetapkan nama stack untuk dataset ini
// },
// {
// label: 'Sisa Pagu',
// backgroundColor: '#04AA6D', // Warna bar dataset 3
// data: data3,
// stack: 'Stack 1' // Menetapkan nama stack yang sama untuk dataset ini
// },
// ],
// },
// options: {
// responsive: true,
// maintainAspectRatio: false,
// scales: {
// xAxes: [{
// stacked: true // Menetapkan sumbu x sebagai stacked
// }],
// yAxes: [{
// stacked: false // Tidak ada stacking pada sumbu y
// }]
// },
// tooltips: {
// callbacks: {
// label: function (tooltipItem, data) {
// return (
// "Rp" +
// tooltipItem.xLabel.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")
// );
// },
// },
// },
// },
// };
// // Membuat chart
// const ctx2 = document.getElementById('barChart').getContext('2d');
// const myChart2 = new Chart(ctx2, config2);
</script>
<script>
// untuk select 2 opd
$('.select-opd').select2({
// width:'100%',
});
</script>
@endpush
Anons79 File Manager Version 1.0, Coded By Anons79
Email: [email protected]
Anons79 Mini Shell