You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
801 lines
45 KiB
801 lines
45 KiB
<?php |
|
$tgt = 0; |
|
$pennow = 0; |
|
$penpast = 0; |
|
foreach ($penerimaan as $row) { |
|
$tgt += $row->TARGET; |
|
$pennow += $row->PENB; |
|
$penpast += $row->PENL; |
|
$capaian = ($pennow / $tgt) * 100; |
|
$growth = (($pennow - $penpast) / $penpast) * 100; |
|
$selisih = $penpast - $pennow; |
|
$carryover = $tgt - $pennow; |
|
} |
|
|
|
|
|
|
|
$datanya_penerimaan = "["; |
|
foreach ($pie_penerimaan as $_junk => $data) { |
|
$datanya_penerimaan = $datanya_penerimaan . "['" . $data->NM_PAJAK . "', " . $data->PENERIMAAN . "],"; |
|
} |
|
$datanya_penerimaan = $datanya_penerimaan . "]"; |
|
|
|
|
|
|
|
?> |
|
|
|
<div class="main-content"> |
|
<div class="container-fluid"> |
|
<h3>Dashboard Nasional</h3> |
|
<div class="row clearfix"> |
|
|
|
<div class="col-lg-3 col-md-6 col-sm-12"> |
|
<div class="widget"> |
|
<div class="widget-body"> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="state"> |
|
<h6>Target Nas</h6> |
|
<h6><b><?= number_format($tgt, 0, ',', '.') ?></b></h6> |
|
</div> |
|
<div class="icon"> |
|
<i class="ik ik-award"></i> |
|
</div> |
|
</div> |
|
<small class="text-small mt-10 d-block">Capaian <?= number_format($capaian, 2) ?>%</small> |
|
</div> |
|
<div class="progress progress-sm"> |
|
<div class="progress-bar bg-danger" role="progressbar" aria-valuenow="<?= number_format($capaian, 2) ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?= number_format($capaian, 2) ?>%;"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-lg-3 col-md-6 col-sm-12"> |
|
<div class="widget"> |
|
<div class="widget-body"> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="state"> |
|
<h6>Penerimaan sd <?= $tahunx ?></h6> |
|
<h6><b><?= number_format($pennow, 0, ',', '.') ?></b></h6> |
|
</div> |
|
<div class="icon"> |
|
<i class="ik ik-thumbs-up"></i> |
|
</div> |
|
</div> |
|
<small class="text-small mt-10 d-block">Growth <?= number_format($growth, 2) ?>%</small> |
|
</div> |
|
<div class="progress progress-sm"> |
|
<div class="progress-bar bg-success" role="progressbar" aria-valuenow="<?= number_format($growth, 2) ?>" aria-valuemin="0" aria-valuemax="100" style="width: <?= number_format($growth, 2) ?>%;"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-lg-3 col-md-6 col-sm-12"> |
|
<div class="widget"> |
|
<div class="widget-body"> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="state"> |
|
<h6>Penerimaan <?= $tahunx - 1 ?></h6> |
|
<h6><b><?= number_format($penpast, 0, ',', '.') ?></b></h6> |
|
</div> |
|
<div class="icon"> |
|
<i class="ik ik-calendar"></i> |
|
</div> |
|
</div> |
|
<small class="text-small mt-10 d-block">Selisih <?= number_format($selisih, 0, ',', '.') ?></small> |
|
</div> |
|
<div class="progress progress-sm"> |
|
<div class="progress-bar bg-warning" role="progressbar" aria-valuenow="31" aria-valuemin="0" aria-valuemax="100" style="width: 31%;"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-lg-3 col-md-6 col-sm-12"> |
|
<div class="widget"> |
|
<div class="widget-body"> |
|
<div class="d-flex justify-content-between align-items-center"> |
|
<div class="state"> |
|
<h6>Carry Over</h6> |
|
<h6><b><?= number_format($carryover, 0, ',', '.') ?></b></h6> |
|
</div> |
|
<div class="icon"> |
|
<i class="ik ik-message-square"></i> |
|
</div> |
|
</div> |
|
<small class="text-small mt-10 d-block">update <?= $updatex['UPD'] ?></small> |
|
</div> |
|
<div class="progress progress-sm"> |
|
<div class="progress-bar bg-info" role="progressbar" aria-valuenow="<?= date('n') ?>" aria-valuemin="0" aria-valuemax="12" style="width: <?= date('n') ?>%;"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row"> |
|
<div class="col-md-8"> |
|
<div class="card"> |
|
<div class="card-body"> |
|
<div class="row align-items-center"> |
|
<div class="col-lg-8 col-md-12"> |
|
<h3 class="card-title">Breakdown Penerimaan</h3> |
|
|
|
</div> |
|
<div class="col-lg-6 col-md-12"> |
|
<div class="col text-center"> |
|
<h5>Strategis</h5> |
|
</div> |
|
<div class="row mb-15"> |
|
<div class="col-9">Penerimaan</div> |
|
<div class="col-3 text-right">28%</div> |
|
<div class="col-12"> |
|
<div class="progress progress-sm mt-5"> |
|
<div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row mb-15"> |
|
<div class="col-9">Growth</div> |
|
<div class="col-3 text-right">28%</div> |
|
<div class="col-12"> |
|
<div class="progress progress-sm mt-5"> |
|
<div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="row mb-15"> |
|
<div class="col-9">Peranan</div> |
|
<div class="col-3 text-right">28%</div> |
|
<div class="col-12"> |
|
<div class="progress progress-sm mt-5"> |
|
<div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="row mb-15"> |
|
<div class="col-9">Jumlah WP</div> |
|
<div class="col-3 text-right">28%</div> |
|
<div class="col-12"> |
|
<div class="progress progress-sm mt-5"> |
|
<div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="row mb-15"> |
|
<div class="col-9">WP Bayar</div> |
|
<div class="col-3 text-right">28%</div> |
|
<div class="col-12"> |
|
<div class="progress progress-sm mt-5"> |
|
<div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="row mb-15"> |
|
<div class="col-9">Ratio(%)</div> |
|
<div class="col-3 text-right">28%</div> |
|
<div class="col-12"> |
|
<div class="progress progress-sm mt-5"> |
|
<div class="progress-bar-striped progress-bar-animated bg-green" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class=" col-lg-6 col-md-12"> |
|
<div class="col text-center"> |
|
<h5>Kewilayahan</h5> |
|
</div> |
|
<div class="row mb-15"> |
|
<div class="col-9">Penerimaan</div> |
|
<div class="col-3 text-right">28%</div> |
|
<div class="col-12"> |
|
<div class="progress progress-sm mt-5"> |
|
<div class="progress-bar-striped progress-bar-animated bg-primary " role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row mb-15"> |
|
<div class="col-9">Growth</div> |
|
<div class="col-3 text-right">28%</div> |
|
<div class="col-12"> |
|
<div class="progress progress-sm mt-5"> |
|
<div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row mb-15"> |
|
<div class="col-9">Peranan</div> |
|
<div class="col-3 text-right">28%</div> |
|
<div class="col-12"> |
|
<div class="progress progress-sm mt-5"> |
|
<div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row mb-15"> |
|
<div class="col-9">Jumlah WP</div> |
|
<div class="col-3 text-right">28%</div> |
|
<div class="col-12"> |
|
<div class="progress progress-sm mt-5"> |
|
<div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row mb-15"> |
|
<div class="col-9">WP Bayar</div> |
|
<div class="col-3 text-right">28%</div> |
|
<div class="col-12"> |
|
<div class="progress progress-sm mt-5"> |
|
<div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="row mb-15"> |
|
<div class="col-9">Ratio(%)</div> |
|
<div class="col-3 text-right">28%</div> |
|
<div class="col-12"> |
|
<div class="progress progress-sm mt-5"> |
|
<div class="progress-bar-striped progress-bar-animated bg-primary" role="progressbar" style="width: 48%" aria-valuenow="48" aria-valuemin="0" aria-valuemax="100"></div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-md-4"> |
|
<div class="card" style="min-height: 422px;"> |
|
<div class="card-header"> |
|
<h3>Per Jenis Pajak</h3> |
|
</div> |
|
<div class="card-body"> |
|
<div id="preview_jenis_penerimaan"></div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="row"> |
|
<div class="col-md-4"> |
|
<div class="card"> |
|
<div class="card-header"> |
|
<h3>Recent Chat</h3> |
|
<div class="card-header-right"> |
|
<ul class="list-unstyled card-option"> |
|
<li><i class="ik ik-chevron-left action-toggle"></i></li> |
|
<li><i class="ik ik-minus minimize-card"></i></li> |
|
<li><i class="ik ik-x close-card"></i></li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="card-body chat-box scrollable" style="height:300px;"> |
|
<ul class="chat-list"> |
|
<li class="chat-item"> |
|
<div class="chat-img"><img src="<?= base_url('public/theme/img/users/1.jpg') ?>" alt="user"></div> |
|
<div class="chat-content"> |
|
<h6 class="font-medium">James Anderson</h6> |
|
<div class="box bg-light-info">Lorem Ipsum is simply dummy text of the printing & type setting industry.</div> |
|
</div> |
|
<div class="chat-time">10:56 am</div> |
|
</li> |
|
<li class="chat-item"> |
|
<div class="chat-img"><img src="<?= base_url('public/theme/img/users/2.jpg') ?>" alt="user"></div> |
|
<div class="chat-content"> |
|
<h6 class="font-medium">Bianca Doe</h6> |
|
<div class="box bg-light-info">It’s Great opportunity to work.</div> |
|
</div> |
|
<div class="chat-time">10:57 am</div> |
|
</li> |
|
<li class="odd chat-item"> |
|
<div class="chat-content"> |
|
<div class="box bg-light-inverse">I would love to join the team.</div> |
|
<br> |
|
</div> |
|
</li> |
|
<li class="odd chat-item"> |
|
<div class="chat-content"> |
|
<div class="box bg-light-inverse">Whats budget of the new project.</div> |
|
<br> |
|
</div> |
|
<div class="chat-time">10:59 am</div> |
|
</li> |
|
<li class="chat-item"> |
|
<div class="chat-img"><img src="<?= base_url('public/theme/img/users/3.jpg') ?>" alt="user"></div> |
|
<div class="chat-content"> |
|
<h6 class="font-medium">Angelina Rhodes</h6> |
|
<div class="box bg-light-info">Well we have good budget for the project</div> |
|
</div> |
|
<div class="chat-time">11:00 am</div> |
|
</li> |
|
</ul> |
|
</div> |
|
<div class="card-footer chat-footer"> |
|
<div class="input-wrap"> |
|
<input type="text" placeholder="Type and enter" class="form-control"> |
|
</div> |
|
<button type="button" class="btn btn-icon btn-theme"><i class="fa fa-paper-plane"></i></button> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-md-4"> |
|
<div class="card"> |
|
<div class="card-body"> |
|
<div class="d-flex"> |
|
<h4 class="card-title">Weather Report</h4> |
|
<select class="form-control w-25 ml-auto"> |
|
<option selected="">Today</option> |
|
<option value="1">Weekly</option> |
|
</select> |
|
</div> |
|
<div class="d-flex align-items-center flex-row mt-30"> |
|
<div class="p-2 f-50 text-info"><i class="wi wi-day-showers"></i> <span>23<sup>°</sup></span></div> |
|
<div class="p-2"> |
|
<h3 class="mb-0">Saturday</h3><small>Banglore, India</small> |
|
</div> |
|
</div> |
|
<table class="table table-borderless"> |
|
<tbody> |
|
<tr> |
|
<td>Wind</td> |
|
<td class="font-medium">ESE 17 mph</td> |
|
</tr> |
|
<tr> |
|
<td>Humidity</td> |
|
<td class="font-medium">83%</td> |
|
</tr> |
|
<tr> |
|
<td>Pressure</td> |
|
<td class="font-medium">28.56 in</td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
<hr> |
|
<ul class="list-unstyled row text-center city-weather-days mb-0 mt-20"> |
|
<li class="col"><i class="wi wi-day-sunny mr-5"></i><span>09:30</span> |
|
<h3>20<sup>°</sup></h3> |
|
</li> |
|
<li class="col"><i class="wi wi-day-cloudy mr-5"></i><span>11:30</span> |
|
<h3>22<sup>°</sup></h3> |
|
</li> |
|
<li class="col"><i class="wi wi-day-hail mr-5"></i><span>13:30</span> |
|
<h3>25<sup>°</sup></h3> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-md-4"> |
|
<div class="card" style="min-height: 422px;"> |
|
<div class="card-header"> |
|
<h3>Timeline</h3> |
|
<div class="card-header-right"> |
|
<ul class="list-unstyled card-option"> |
|
<li><i class="ik ik-chevron-left action-toggle"></i></li> |
|
<li><i class="ik ik-minus minimize-card"></i></li> |
|
<li><i class="ik ik-x close-card"></i></li> |
|
</ul> |
|
</div> |
|
</div> |
|
<div class="card-body timeline"> |
|
<div class="header bg-theme" style="background-image: url('<?= base_url('public/theme/img/placeholder/placeimg_400_200_nature.jpg') ?>')"> |
|
<div class="color-overlay d-flex align-items-center"> |
|
<div class="day-number">8</div> |
|
<div class="date-right"> |
|
<div class="day-name">Monday</div> |
|
<div class="month">February 2018</div> |
|
</div> |
|
</div> |
|
</div> |
|
<ul> |
|
<li> |
|
<div class="bullet bg-pink"></div> |
|
<div class="time">11am</div> |
|
<div class="desc"> |
|
<h3>Attendance</h3> |
|
<h4>Computer Class</h4> |
|
</div> |
|
</li> |
|
<li> |
|
<div class="bullet bg-green"></div> |
|
<div class="time">12pm</div> |
|
<div class="desc"> |
|
<h3>Design Team</h3> |
|
<h4>Hangouts</h4> |
|
</div> |
|
</li> |
|
<li> |
|
<div class="bullet bg-orange"></div> |
|
<div class="time">2pm</div> |
|
<div class="desc"> |
|
<h3>Finish</h3> |
|
<h4>Go to Home</h4> |
|
</div> |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
|
|
<!-- <div class="card"> |
|
<div class="card-header row"> |
|
<div class="col col-sm-3"> |
|
<div class="dropdown d-inline-block"> |
|
<a class="btn-icon checkbox-dropdown dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></a> |
|
<div class="dropdown-menu" aria-labelledby="moreDropdown"> |
|
<a class="dropdown-item" id="checkbox_select_all" href="javascript:void(0);">Select All</a> |
|
<a class="dropdown-item" id="checkbox_deselect_all" href="javascript:void(0);">Deselect All</a> |
|
</div> |
|
</div> |
|
<div class="card-options d-inline-block"> |
|
<a href="#"><i class="ik ik-inbox"></i></a> |
|
<a href="#"><i class="ik ik-plus"></i></a> |
|
<a href="#"><i class="ik ik-rotate-cw"></i></a> |
|
<div class="dropdown d-inline-block"> |
|
<a class="nav-link dropdown-toggle" href="#" id="moreDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="ik ik-more-horizontal"></i></a> |
|
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="moreDropdown"> |
|
<a class="dropdown-item" href="#">Action</a> |
|
<a class="dropdown-item" href="#">More Action</a> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col col-sm-6"> |
|
<div class="card-search with-adv-search dropdown"> |
|
<form action=""> |
|
<input type="text" class="form-control" placeholder="Search.." required> |
|
<button type="submit" class="btn btn-icon"><i class="ik ik-search"></i></button> |
|
<button type="button" id="adv_wrap_toggler" class="adv-btn ik ik-chevron-down dropdown-toggle" data-toggle="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"></button> |
|
<div class="adv-search-wrap dropdown-menu dropdown-menu-right" aria-labelledby="adv_wrap_toggler"> |
|
<div class="form-group"> |
|
<input type="text" class="form-control" placeholder="Full Name"> |
|
</div> |
|
<div class="form-group"> |
|
<input type="email" class="form-control" placeholder="Email"> |
|
</div> |
|
<button class="btn btn-theme">Search</button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
<div class="col col-sm-3"> |
|
<div class="card-options text-right"> |
|
<span class="mr-5">1 - 50 of 2,500</span> |
|
<a href="#"><i class="ik ik-chevron-left"></i></a> |
|
<a href="#"><i class="ik ik-chevron-right"></i></a> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="card-body p-0"> |
|
<div class="list-item-wrap"> |
|
<div class="list-item"> |
|
<div class="item-inner"> |
|
<label class="custom-control custom-checkbox"> |
|
<input type="checkbox" class="custom-control-input" id="item_checkbox" name="item_checkbox" value="option1"> |
|
<span class="custom-control-label"> </span> |
|
</label> |
|
<div class="list-title"><a href="javascript:void(0)">Lorem Ipsum is simply dumm dummy text of the printing and typesetting industry.</a></div> |
|
<div class="list-actions"> |
|
<a href="#"><i class="ik ik-eye"></i></a> |
|
<a href="#"><i class="ik ik-inbox"></i></a> |
|
<a href="#"><i class="ik ik-edit-2"></i></a> |
|
<a href="#"><i class="ik ik-trash-2"></i></a> |
|
</div> |
|
</div> |
|
|
|
<div class="qickview-wrap"> |
|
<div class="desc"> |
|
<p>Fusce suscipit turpis a dolor posuere ornare at a ante. Quisque nec libero facilisis, egestas tortor eget, mattis dui. Curabitur viverra laoreet ligula at hendrerit. Nullam sollicitudin maximus leo, vel pulvinar orci semper id. Donec vehicula tempus enim a facilisis. Proin dignissim porttitor sem, sed pulvinar tortor gravida vitae.</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="list-item"> |
|
<div class="item-inner"> |
|
<label class="custom-control custom-checkbox"> |
|
<input type="checkbox" class="custom-control-input" id="item_checkbox" name="item_checkbox" value="option2"> |
|
<span class="custom-control-label"> </span> |
|
</label> |
|
<div class="list-title"><a href="javascript:void(0)">Aenean eu pharetra arcu, vitae elementum sem. Sed non ligula molestie, finibus lacus at, suscipit mi. Nunc luctus lacus vel felis blandit, eu finibus augue tincidunt.</a></div> |
|
<div class="list-actions"> |
|
<a href="#"><i class="ik ik-eye"></i></a> |
|
<a href="#"><i class="ik ik-inbox"></i></a> |
|
<a href="#"><i class="ik ik-edit-2"></i></a> |
|
<a href="#"><i class="ik ik-trash-2"></i></a> |
|
</div> |
|
</div> |
|
<div class="qickview-wrap"> |
|
<div class="desc"> |
|
<p>Fusce suscipit turpis a dolor posuere ornare at a ante. Quisque nec libero facilisis, egestas tortor eget, mattis dui. Curabitur viverra laoreet ligula at hendrerit. Nullam sollicitudin maximus leo, vel pulvinar orci semper id. Donec vehicula tempus enim a facilisis. Proin dignissim porttitor sem, sed pulvinar tortor gravida vitae.</p> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="list-item"> |
|
<div class="item-inner"> |
|
<label class="custom-control custom-checkbox"> |
|
<input type="checkbox" class="custom-control-input" id="item_checkbox" name="item_checkbox" value="option3"> |
|
<span class="custom-control-label"> </span> |
|
</label> |
|
<div class="list-title"><a href="javascript:void(0)">Donec lectus augue, suscipit in sodales sit amet, semper sit amet enim. Duis pretium, nisi id pretium ornare, tortor nibh sodales tellus.</a></div> |
|
<div class="list-actions"> |
|
<a href="#"><i class="ik ik-eye"></i></a> |
|
<a href="#"><i class="ik ik-inbox"></i></a> |
|
<a href="#"><i class="ik ik-edit-2"></i></a> |
|
<a href="#"><i class="ik ik-trash-2"></i></a> |
|
</div> |
|
</div> |
|
<div class="qickview-wrap"> |
|
<div class="desc"> |
|
<p>Fusce suscipit turpis a dolor posuere ornare at a ante. Quisque nec libero facilisis, egestas tortor eget, mattis dui. Curabitur viverra laoreet ligula at hendrerit. Nullam sollicitudin maximus leo, vel pulvinar orci semper id. Donec vehicula tempus enim a facilisis. Proin dignissim porttitor sem, sed pulvinar tortor gravida vitae.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> --> |
|
<div class="card"> |
|
|
|
<div class="card-body"> |
|
<h5 class="card-title">PENERIMAAN PER KATEGORI</h5> |
|
<table class="table table-hover"> |
|
<thead class='thead-dark'> |
|
<tr class="table-active"> |
|
<th class="text-center">Kode</th> |
|
<th class="text-center">Kategori</th> |
|
<th class="text-center">Wp Bayar <?= $tahunx ?></th> |
|
<th class="text-center">Wp Bayar <?= $tahunx - 1 ?></th> |
|
<th class="text-center">gw WP Bayar (%)</th> |
|
<th class="text-center">Realisasi <?= $tahunx ?></th> |
|
<th class="text-center">Realisasi <?= $tahunx - 1 ?></th> |
|
<th class="text-center">gw Penerimaan (%)</th> |
|
</tr> |
|
</thead> |
|
<?php foreach ($perkategori as $row) { |
|
$gwwp = (($row->WPBYRN - $row->WPBYRP) / $row->WPBYRP) * 100; |
|
$gwkat = (($row->KPENN - $row->KPENP) / $row->KPENP) * 100; |
|
|
|
if ($gwwp < 0) { |
|
$markgww = "text-danger"; |
|
} else { |
|
$markgww = "text-success"; |
|
} |
|
|
|
if ($gwkat < 0) { |
|
$markgwk = "text-danger"; |
|
} else { |
|
$markgwk = "text-success"; |
|
} |
|
?> |
|
<tbody> |
|
<td><?= $row->KODE ?></td> |
|
<td><?= $row->NMKAT ?></td> |
|
<td class="text-right"><?= number_format($row->WPBYRN, 0, ',', '.') ?></td> |
|
<td class="text-right"><?= number_format($row->WPBYRP, 0, ',', '.') ?></td> |
|
<td class="text-center <?= $markgww ?>"><?= number_format($gwwp, 2) ?></td> |
|
<td class="text-right"><?= number_format($row->KPENN, 0, ',', '.') ?></td> |
|
<td class="text-right"><?= number_format($row->KPENP, 0, ',', '.') ?></td> |
|
<td class="text-center <?= $markgwk ?>"><?= number_format($gwkat, 2) ?></td> |
|
</tbody> |
|
<?php } ?> |
|
</table> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<aside class="right-sidebar"> |
|
<div class="sidebar-chat" data-plugin="chat-sidebar"> |
|
<div class="sidebar-chat-info"> |
|
<h6>Chat List</h6> |
|
<form class="mr-t-10"> |
|
<div class="form-group"> |
|
<input type="text" class="form-control" placeholder="Search for friends ..."> |
|
<i class="ik ik-search"></i> |
|
</div> |
|
</form> |
|
</div> |
|
<div class="chat-list"> |
|
<div class="list-group row"> |
|
<a href="javascript:void(0)" class="list-group-item" data-chat-user="Gene Newman"> |
|
<figure class="user--online"> |
|
<img src="img/users/1.jpg" class="rounded-circle" alt=""> |
|
</figure><span><span class="name">Gene Newman</span> <span class="username">@gene_newman</span> </span> |
|
</a> |
|
<a href="javascript:void(0)" class="list-group-item" data-chat-user="Billy Black"> |
|
<figure class="user--online"> |
|
<img src="img/users/2.jpg" class="rounded-circle" alt=""> |
|
</figure><span><span class="name">Billy Black</span> <span class="username">@billyblack</span> </span> |
|
</a> |
|
<a href="javascript:void(0)" class="list-group-item" data-chat-user="Herbert Diaz"> |
|
<figure class="user--online"> |
|
<img src="img/users/3.jpg" class="rounded-circle" alt=""> |
|
</figure><span><span class="name">Herbert Diaz</span> <span class="username">@herbert</span> </span> |
|
</a> |
|
<a href="javascript:void(0)" class="list-group-item" data-chat-user="Sylvia Harvey"> |
|
<figure class="user--busy"> |
|
<img src="img/users/4.jpg" class="rounded-circle" alt=""> |
|
</figure><span><span class="name">Sylvia Harvey</span> <span class="username">@sylvia</span> </span> |
|
</a> |
|
<a href="javascript:void(0)" class="list-group-item active" data-chat-user="Marsha Hoffman"> |
|
<figure class="user--busy"> |
|
<img src="img/users/5.jpg" class="rounded-circle" alt=""> |
|
</figure><span><span class="name">Marsha Hoffman</span> <span class="username">@m_hoffman</span> </span> |
|
</a> |
|
<a href="javascript:void(0)" class="list-group-item" data-chat-user="Mason Grant"> |
|
<figure class="user--offline"> |
|
<img src="img/users/1.jpg" class="rounded-circle" alt=""> |
|
</figure><span><span class="name">Mason Grant</span> <span class="username">@masongrant</span> </span> |
|
</a> |
|
<a href="javascript:void(0)" class="list-group-item" data-chat-user="Shelly Sullivan"> |
|
<figure class="user--offline"> |
|
<img src="img/users/2.jpg" class="rounded-circle" alt=""> |
|
</figure><span><span class="name">Shelly Sullivan</span> <span class="username">@shelly</span></span> |
|
</a> |
|
</div> |
|
</div> |
|
</div> |
|
</aside> |
|
|
|
<div class="chat-panel" hidden> |
|
<div class="card"> |
|
<div class="card-header d-flex justify-content-between"> |
|
<a href="javascript:void(0);"><i class="ik ik-message-square text-success"></i></a> |
|
<span class="user-name">John Doe</span> |
|
<button type="button" class="close" aria-label="Close"><span aria-hidden="true">×</span></button> |
|
</div> |
|
<div class="card-body"> |
|
<div class="widget-chat-activity flex-1"> |
|
<div class="messages"> |
|
<div class="message media reply"> |
|
<figure class="user--online"> |
|
<a href="#"> |
|
<img src="img/users/3.jpg" class="rounded-circle" alt=""> |
|
</a> |
|
</figure> |
|
<div class="message-body media-body"> |
|
<p>Epic Cheeseburgers come in all kind of styles.</p> |
|
</div> |
|
</div> |
|
<div class="message media"> |
|
<figure class="user--online"> |
|
<a href="#"> |
|
<img src="img/users/1.jpg" class="rounded-circle" alt=""> |
|
</a> |
|
</figure> |
|
<div class="message-body media-body"> |
|
<p>Cheeseburgers make your knees weak.</p> |
|
</div> |
|
</div> |
|
<div class="message media reply"> |
|
<figure class="user--offline"> |
|
<a href="#"> |
|
<img src="img/users/5.jpg" class="rounded-circle" alt=""> |
|
</a> |
|
</figure> |
|
<div class="message-body media-body"> |
|
<p>Cheeseburgers will never let you down.</p> |
|
<p>They'll also never run around or desert you.</p> |
|
</div> |
|
</div> |
|
<div class="message media"> |
|
<figure class="user--online"> |
|
<a href="#"> |
|
<img src="img/users/1.jpg" class="rounded-circle" alt=""> |
|
</a> |
|
</figure> |
|
<div class="message-body media-body"> |
|
<p>A great cheeseburger is a gastronomical event.</p> |
|
</div> |
|
</div> |
|
<div class="message media reply"> |
|
<figure class="user--busy"> |
|
<a href="#"> |
|
<img src="img/users/5.jpg" class="rounded-circle" alt=""> |
|
</a> |
|
</figure> |
|
<div class="message-body media-body"> |
|
<p>There's a cheesy incarnation waiting for you no matter what you palete preferences are.</p> |
|
</div> |
|
</div> |
|
<div class="message media"> |
|
<figure class="user--online"> |
|
<a href="#"> |
|
<img src="img/users/1.jpg" class="rounded-circle" alt=""> |
|
</a> |
|
</figure> |
|
<div class="message-body media-body"> |
|
<p>If you are a vegan, we are sorry for you loss.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<form action="javascript:void(0)" class="card-footer" method="post"> |
|
<div class="d-flex justify-content-end"> |
|
<textarea class="border-0 flex-1" rows="1" placeholder="Type your message here"></textarea> |
|
<button class="btn btn-icon" type="submit"><i class="ik ik-arrow-right text-success"></i></button> |
|
</div> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
|
|
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> |
|
<script src="<?= base_url('public/theme/plugins/popper.js/dist/umd/popper.min.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/plugins/bootstrap/dist/js/bootstrap.min.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/plugins/perfect-scrollbar/dist/perfect-scrollbar.min.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/plugins/screenfull/dist/screenfull.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/plugins/datatables.net/js/jquery.dataTables.min.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/plugins/datatables.net-bs4/js/dataTables.bootstrap4.min.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/plugins/datatables.net-responsive/js/dataTables.responsive.min.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/plugins/datatables.net-responsive-bs4/js/responsive.bootstrap4.min.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/plugins/jvectormap/jquery-jvectormap.min.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/plugins/jvectormap/tests/assets/jquery-jvectormap-world-mill-en.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/plugins/moment/moment.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/plugins/tempusdominus-bootstrap-4/build/js/tempusdominus-bootstrap-4.min.js') ?>"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.3.0/highcharts.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/11.3.0/highcharts-more.min.js"></script> |
|
<script src="<?= base_url('public/theme/js/tables.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/js/widgets.js') ?>"></script> |
|
<script src="<?= base_url('public/theme/dist/js/theme.min.js') ?>"></script> |
|
|
|
|
|
<script type="text/javascript"> |
|
var chart; |
|
|
|
$(document).ready(function() { |
|
|
|
// Build the chart |
|
chart = new Highcharts.Chart({ |
|
chart: { |
|
renderTo: 'preview_jenis_penerimaan', |
|
plotBackgroundColor: null, |
|
plotBorderWidth: null, |
|
plotShadow: false |
|
}, |
|
title: { |
|
text: '', |
|
style: { |
|
fontSize: '18px', |
|
fontWeight: 'bold', |
|
textTransform: 'uppercase' |
|
} |
|
}, |
|
tooltip: { |
|
formatter: function() { |
|
return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.y, 0); |
|
} |
|
}, |
|
colors: ['#7cb5ec', '#f7a35c', '#90ee7e', '#7798BF', '#aaeeee', '#ff0066', '#eeaaee', '#55BF3B', '#DF5353', '#6798BF', '#eeeeee'], |
|
plotOptions: { |
|
pie: { |
|
allowPointSelect: true, |
|
cursor: 'pointer', |
|
dataLabels: { |
|
style: { |
|
width: '250px' |
|
}, |
|
enabled: true, |
|
color: '#000000', |
|
connectorColor: 'red', |
|
formatter: function() { |
|
return '<b>' + this.point.name + '</b>: ' + Highcharts.numberFormat(this.percentage, 0) + ' % '; |
|
} |
|
}, |
|
showInLegend: false |
|
} |
|
}, |
|
exporting: { |
|
enabled: false |
|
}, |
|
credits: { |
|
enabled: false |
|
}, |
|
series: [{ |
|
type: 'pie', |
|
name: 'Peranan', |
|
data: <?php echo $datanya_penerimaan; ?>, |
|
innerSize: '50%' |
|
}] |
|
}); |
|
}); |
|
</script>
|