skrd.pt 8.22 KB
<html metal:use-macro="load: ../base.public.pt">
<div metal:fill-slot="content">
<style type="text/css">
    .borderless {
        border-top: hidden;
    }
    .table {
        font-size: 14px;
        margin-top: 10px;
        margin-bottom: 20px;
    }
    .border {
        border : 2px solid;
    }
    .padding {
        padding: 15px;
        width: auto;
    }
    h3 {
        font-weight:bold;
        text-align:center;
    }
    h4 {
        font-weight:bold;
        text-align:center;
    }
    table tr td {
        padding-top: 1px !important;
        padding-bottom: 1px !important;
        vertical-align: middle !important;
        word-wrap: break-word !important;
    }
    hr {
        border-top: 1px dashed black;
    }
    table.main-table{
        table-layout: fixed !important;
    }
    table.table-fit {
        width: auto !important;
        table-layout: auto !important;
    }
    table.main-table td{
        border: 1px solid black !important;
    }
    table.child td {
        border: none !important;
    }
    img.qr-code{
      width: 100%;
      height: 100%;
      max-height: 150px; 
      max-width: 150px;
    }
    .flex-box {
        display: flex;
        flex-wrap: wrap;
    }
    @media screen and (max-width: 800px) {
      table.flex-box tr { 
        display: flex; 
        flex-direction: row;
        flex-wrap: wrap;
        text-align: center;
        /*margin: 0.5em 0;*/
        /*border: 1px solid rgba(3,3,3,0.2);*/
      }
      table.flex-box td, th {
        flex: 1 1 150px;
        text-align: center;
        /*border: 0.5px solid rgba(3,3,3,0.2);*/
      }
    }
</style>

<tal:block tal:condition="not found">
    <h2>Data tidak ditemukan</h2>
</tal:block>
<tal:block tal:condition="found and data">
  <!-- <div class="col-md-12" align="center">
    <h2>No. Skrd : ${data.no_skrd}</h2>
    <br>
  </div> -->
  <div class="col-md-10 col-md-offset-1">
    <div class="container border padding">
      <table class="table table-bordered main-table">
        <tr>
            <td><b>PEMERINTAH PROVINSI JAWA BARAT <br>
                ${data.unit_nama}</b>
            </td>
            <td align="center"><h3>SKRD</h3></td>
            <td align="center"><b>No. SKRD</b></td>
        </tr>
        <tr>
            <td></td>
            <td align="center"><b>SURAT KETETAPAN RETRIBUSI DAERAH</b></td>
            <td align="center"><b>${data.no_skrd}</b></td>
        </tr>
        <tr>
            <td></td>
            <td align="center">
                <table class="table table-fit child flex-box">
                    <tr class="borderless">
                        <td>Masa Retribusi</td>
                        <td>:</td>
                        <td><b>${data.periode_1} s/d ${data.periode_2}</b></td>
                    </tr>
                    <tr class="borderless">
                        <td>Tahun</td>
                        <td>:</td>
                        <td><b>${data.tahun_id}</b></td>
                    </tr>
                </table>
            </td>
            <td align="center">Kode Bayar<br><b>${data.kode}</b></td>
        </tr>
        <tr>
            <td colspan="3">
                <table class="table table-fit child">
                    <tr class="borderless">
                        <td>Nama</td>
                        <td>:</td>
                        <td><b>${data.wp_nama}</b></td>
                    </tr>
                    <tr class="borderless">
                        <td>Alamat</td>
                        <td>:</td>
                        <td><b>${(data.wp_alamat_2 and data.wp_alamat_2 != '-') and ('{} {}'.format(data.wp_alamat_1, data.wp_alamat_2)) or data.wp_alamat_1}</b></td>
                    </tr>
                    <tr class="borderless">
                        <td>NPWRD</td>
                        <td>:</td>
                        <td><b>${data.wp_kode}</b></td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr>
            <td colspan="3">Tanggal Jatuh Tempo: <b>${data.jatuh_tempo.strftime('%d-%m-%Y')}</b></td>
        </tr>
        <tr align="center">
            <td>Kode Rekening</td>
            <td>Jenis Retribusi Daerah</td>
            <td>Jumlah (Rp.)</td>
        </tr>
        <tr>
            <td align="center"><b>${data.rek_kode}</b></td>
            <td><b>${data.rek_nama}</b> ${data.keterangan}</td>
            <td align="right"><b>${'{:n}'.format(data.jumlah)}</b></td>
        </tr>
        <tr>
            <td></td>
            <td>Jumlah Ketetapan Pokok</td>
            <td align="right"><b>${'{:n}'.format(data.jumlah)}</b></td>
        </tr>
        <tr>
            <td align="center">Dengan Huruf</td>
            <td><b>${jml_terbilang}</b></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3"><b>PERHATIAN</b></td>
        </tr>
        <tr>
            <td colspan="3">
                <ol>
                    <li>Penyetoran dilakukan melalui Bendahara Penerima atau Kas Daerah (Bank Jabar) dengan menggunakan SKRD ini.</li>
                    <li>Apabila SKRD ini tidak atau kurang bayar setelah lewat waktu paling lama 30 hari sejak SKRD ini ditetapkan dikarenakan sanksi administratif berupa bunga sebesar 2 % per bulan.</li>
                </ol>
            </td>
        </tr>
        <tr>
            <td align="center"><p><img class="qr-code" src="data:image/png;base64, ${qrcodebase64}"></p></td>
            <td></td>
            <td align="center"><b>${data.tgl_tetap.strftime('%d %B')} ${data.tahun_id}</b><br>
                ${data.pejabat_pangkat}<br><br><br><br><br>
                ${data.pejabat_nama}<br>
                NIP. ${data.pejabat_nip}
            </td>
        </tr>
      </table>
      <hr>
      <table class="table table-bordered main-table">
          <tr>
              <td align="center">No. SKRD <b>${data.no_skrd}</b></td>
          </tr>
          <tr><td align="center"><h4>TANDA TERIMA</h4></td></tr>
          <tr>
              <td align="center">
                  <table class="table table-fit child">
                    <tr class="borderless">
                        <td>NPWRD</td>
                        <td>:</td>
                        <td><b>${data.wp_kode}</b></td>
                    </tr>
                    <tr class="borderless">
                        <td>Nama</td>
                        <td>:</td>
                        <td><b>${data.wp_nama}</b></td>
                    </tr>
                    <tr class="borderless">
                        <td>Alamat</td>
                        <td>:</td>
                        <td><b>${(data.wp_alamat_2 and data.wp_alamat_2 != '-') and ('{} {}'.format(data.wp_alamat_1, data.wp_alamat_2)) or data.wp_alamat_1}</b></td>
                    </tr>
                  </table>
              </td>
          </tr>
          <tr>
            <td>
                <table class="table child">
                    <tr class="borderless">
                        <td>Status Pembayaran</td>
                        <td>:</td>
                        <td><b>${status_pembayaran}</b></td>
                        <td rowspan="5" align="center">........,.................. Tahun ${tahun} <br>
                            Yang Menerima <br><br><br><br><br>
                            .....................................
                        </td>
                    </tr>
                    <tr class="borderless">
                        <td>Tanggal Pembayaran</td>
                        <td>:</td>
                        <td><b>${data.tgl_bayar or '-'}</b></td>
                    </tr>
                    <tr class="borderless">
                        <td>Pokok</td>
                        <td>:</td>
                        <td><b>${'{:n}'.format(jml_pokok)}</b></td>
                    </tr>
                    <tr class="borderless">
                        <td>Denda</td>
                        <td>:</td>
                        <td><b>${'{:n}'.format(jml_denda)}</b></td>
                    </tr>
                    <tr class="borderless">
                        <td>Jumlah</td>
                        <td>:</td>
                        <td><b>${'{:n}'.format(jml_bayar)}</b></td>
                    </tr>
                </table>
            </td>
        </tr>
      </table>
    </div>
  </div>
</tal:block>
</div>
</html>