mockup realtime piutang

eispajak/views/templates/realtime_piutang.pt

@@ -12,17 +12,24 @@
 <div metal:fill-slot="content">
   <!-- Main Title -->
   <div class="row">
-    <div class="col-md-12">
+    <div class="col-md-2">
+      <img src="${home}/eis/static/bapend.png" class="icon-rounded" alt="" align="left">
+    </div>
+    <div class="col-md-8">
       <div class="text-center" style="margin-bottom: 20px; padding: 15px 0;">
         <h2 style="margin: 0; font-weight: bold; color: #333; text-transform: uppercase; letter-spacing: 1px;">
-          LAPORAN REALTIME REALISASI PAJAK DAERAH
+          LAPORAN REALTIME PIUTANG PAJAK DAERAH
         </h2>
-		<h3 style="margin: 5px 0 0; font-weight: bold; color: #cc5200; text-transform: uppercase; letter-spacing: 1px;">
-        DATA DAN INFORMASI
-		</h3>
-		<h4 id="tanggalHariIni" style="margin: 5px 0 0; color: #003399; font-weight: bold;"></h4>
+        <h3 style="margin: 5px 0 0; font-weight: bold; color: #cc5200; text-transform: uppercase; letter-spacing: 1px;">
+            DATA DAN INFORMASI
+        </h3>
+        <h4 id="tanggalHariIni" style="margin: 5px 0 0; color: #003399; font-weight: bold;"></h4>
       </div>
     </div>
+    <div class="col-md-2">
+      <img src="${home}/eis/static/img_logo.png" class="icon-rounded" alt="" align="left" width="
+      100">
+    </div>
   </div>
   
   <div class="row hide">
@@ -85,30 +92,31 @@
     </div>
   </div>
   <div class="row">
-    <div class="col-md-8">
+    <div class="col-md-12">
       <div class="panel panel-default">
-        <div class="panel-heading">
-          <img src="${home}/eis/static/bapend.png" class="icon-rounded" alt="" align="left">
-          <h5 class="text-left bold">Target dan Realisasi per Pajak
-            <i class="fa fa-info-circle pull-right icon-color"></i>
-          </h5>
-        </div>
         <div class="panel-body">
           <table class="table table-bordered table-sm" id="table1">
             <thead>
               <tr>
-                <th class="align-middle text-center">Kode</th>
-                <th class="align-middle text-center">Uraian</th>
-                <th class="text-center">Target</th>
-                <th class="text-center">Realisasi</th>
-                <th class="text-center">Selisih</th>
-                <th class="text-center">%</th>
+                <th style="vertical-align: middle;text-align:center !important;" rowspan="2">Kode</th>
+                <th style="vertical-align: middle;text-align:center !important;" rowspan="2">Jenis Pajak</th>
+                <th style="vertical-align: middle;text-align:center !important;" rowspan="2">Jumlah Piutang</th>
+                <th class="text-center" colspan="3">Realisasi Penerimaan Piutang</th>
+                <th style="vertical-align: middle;text-align:center !important;" rowspan="2">Sisa Piutang</th>
+                <th style="vertical-align: middle;text-align:center !important;" rowspan="2">% <br> Realisasi <br>Piutang</th>
+              </tr>
+              <tr>
+                <th style="vertical-align: middle;text-align:center !important;">Bulan Lalu</th>
+                <th style="vertical-align: middle;text-align:center !important;">Bulan Ini</th>
+                <th style="vertical-align: middle;text-align:center !important;">S/D Bulan ini</th>
               </tr>
             </thead>
             <tbody>
               <tr class="odd">
                 <td class=""></td>
                 <td class=""></td>
+                <td class=""></td>
+                <td class=""></td>
                 <td class="right">0</td>
                 <td class="right">0</td>
                 <td class="right">0</td>
@@ -117,6 +125,8 @@
             </tbody>
             <tfoot>
               <td colspan="2" class="text-right">Jumlah</td>
+              <td><span></span></td>
+              <td><span></span></td>
               <td><span id="sum_target"></span></td>
               <td><span id="sum_realisasi"></span></td>
               <td><span id="sum_sisa"></span></td>
@@ -127,7 +137,7 @@
       </div>
     </div>
     <!-- Gauge Chart Section -->
-    <div class="col-md-4">
+    <div class="col-md-4 hide">
       <div class="panel panel-default" id="gaugePanel" style="min-height: 500px;">
         <div class="panel-heading" style="padding: 10px 15px;">
           <h5 class="text-center bold" style="margin: 0;">REALISASI PAJAK DAERAH</h5>
@@ -630,8 +640,7 @@
       "searching": false,
       "info": false,
       "autoWidth": false,
-      "scrollX": true,
-      "order": [[0, 'asc']],
+      "ordering":false,
       "columnDefs": [
         { className: 'text-center', width: "50px", targets: [0] },
         { className: 'text-left', targets: [1] },
@@ -656,20 +665,22 @@
           table.row.add([
             row.kode,
             row.nama,
-            row.target,
-            row.realisasi,
-            row.sisa,
-            row.persen.toFixed(2)
+            0, //row.target,
+            0, //row.target,
+            0, //row.target,
+            0, //row.realisasi,
+            0, //row.sisa,
+            0, //row.persen.toFixed(2)
           ]);
-          sum_target += row.target;
-          sum_realisasi += row.realisasi;
-          sum_sisa += row.sisa;
-          sum_persen += row.persen;
+          sum_target = 0;//+= row.target;
+          sum_realisasi = 0; //+= row.realisasi;
+          sum_sisa = 0;//row.sisa;
+          sum_persen = 0; row.persen;
         });
         $('#sum_target').html(sum_target.toLocaleString("id-ID"));
         $('#sum_realisasi').html(sum_realisasi.toLocaleString("id-ID"));
         $('#sum_sisa').html(sum_sisa.toLocaleString("id-ID"));
-        $('#sum_persen').html((sum_realisasi / sum_target * 100).toFixed(2));
+        $('#sum_persen').html(0);
         
         // Update gauge with total values
         var gaugePercentage = (sum_realisasi / sum_target * 100);