Skip to content

Instantly share code, notes, and snippets.

@defrindr

defrindr/template_penerimaan_jasa.html

Created January 21, 2026 08:28
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save defrindr/556e3d3ad84f43a18dcc62aab0a6f15d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save defrindr/556e3d3ad84f43a18dcc62aab0a6f15d to your computer and use it in GitHub Desktop.
Download ZIP
Raw
template_penerimaan_jasa.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
@font-face {
font-family: arial;
font-weight: normal;
font-style: normal;
font-variant: normal;
src: url("http://localhost:8000/assets/fonts/arial.ttf") format("truetype");
}
@font-face {
font-family: arial;
font-weight: bold;
font-style: bold;
font-variant: bold;
src: url("http://localhost:8000/assets/fonts/arial-bold.ttf") format("truetype");
}
@font-face {
font-family: arial;
font-weight: italic;
font-style: italic;
font-variant: italic;
src: url("http://localhost:8000/assets/fonts/arial-italic.ttf") format("truetype");
}
* {
font-family: arial !important;
font-size: 9pt;
}
html {
position: relative;
}
table {
font-family: arial;
font-size: 8.5pt;
width: 100%;
border-collapse: collapse;
}
td {
white-space: pre-wrap;
word-wrap: break-word;
vertical-align: top;
}
header .pagenum:before {
content: counter(page);
}
body {
font-family: arial;
font-size: 10pt;
}
header {
position: fixed;
top: -90px;
left: 0px;
right: 0px;
/* height: 80px; */
}
footer {
position: fixed;
bottom: -120px;
left: -5px;
right: -5px;
padding: 0;
height: 110px;
}
p {
page-break-after: auto;
}
p:last-child {
page-break-after: never;
}
td>ol {
margin: 0;
padding: 0;
margin-left: 15px;
}
.center {
margin-left: auto;
margin-right: auto;
}
table.table.bordered,
table.table.bordered tr,
table.table.bordered td {
margin: 0;
padding: 0;
border: 2px solid #000;
}
</style>
</head>
<body>
<h4 style="margin:0;text-align: center;font-weight: bold;margin-bottom: .2rem;">FORM PENERIMAAN JASA</h4>
<h4 style="margin:0;text-align: center;font-weight: bold;padding-top: .1rem;border-top: 2px solid #000;">Nomor : {{surat.nomor_surat}}</h4>
<span style="margin-top:1rem;display: block;">Pada hari ini, {{surat.tanggal_surat_formatted.hari}} tanggal {{surat.tanggal_surat_formatted.tanggal}} bulan {{surat.tanggal_surat_formatted.bulan}} tahun {{surat.tanggal_surat_formatted.tahun}} ({{surat.tanggal_surat}}) telah dilakukan penerimaan barang sesuai</span>
<table style="margin-top: 1rem;margin-bottom: 1rem;">
<tbody>
<tr>
<td style="padding-left: 1rem;">Nomor PO</td>
<td style="padding-left: 1rem;padding-right: 1rem;">:</td>
<td>{{surat.nomor_po}}</td>
</tr>
<tr>
<td style="padding-left: 1rem;">Tanggal</td>
<td style="padding-left: 1rem;padding-right: 1rem;">:</td>
<td>{{surat.tanggal_po}}</td>
</tr>
<tr>
<td style="padding-left: 1rem;">Dari</td>
<td style="padding-left: 1rem;padding-right: 1rem;">:</td>
<td>{{surat.vendor_nama}}</td>
</tr>
</tbody>
</table>
<table class="table bordered">
<thead>
<tr>
<td style="width: calc(100% / 3);padding-left:5px;padding-right:5px">Kode Penyedia Jasa</td>
<td style="width: calc(100% / 3);padding-left:5px;padding-right:5px">Nama Penyedia Jasa</td>
<td style="width: calc(100% / 3);padding-left:5px;padding-right:5px">Nomor BAST <br>Tgl BAST</td>
</tr>
</thead>
<tbody>
<tr>
<td style="width: calc(100% / 3);padding-left:5px;padding-right:5px">{{surat.vendor_kode}}</td>
<td style="width: calc(100% / 3);padding-left:5px;padding-right:5px">{{surat.vendor_nama}}</td>
<td style="width: calc(100% / 3);padding-left:5px;padding-right:5px">{{surat.nomor_bast}} <br>{{surat.tanggal_bast}}</td>
</tr>
</tbody>
</table>
<table style="margin-top:2rem" class="table bordered">
<thead>
<tr>
<td style="width: 14.6%;padding-left:5px;padding-right:5px">No Item</td>
<td style="width: 26.6%;padding-left:5px;padding-right:5px">Nama Pekerjaan</td>
<td style="width: 14.6%;padding-left:5px;padding-right:5px">Satuan</td>
<td style="width: 14.6%;padding-left:5px;padding-right:5px">Jumlah dipesan</td>
<td style="width: 14.6%;padding-left:5px;padding-right:5px">Jumlah diterima (Rp)</td>
</tr>
</thead>
<tbody>
{{tabel.barang}}
<!-- <tr>
<td style="width: 14.6%;padding-left:5%;padding-right:5%">1</td>
<td style="width: 26.6%;padding-left:5%;padding-right:5%">LP Turbin Row 500336/001</td>
<td style="width: 14.6%;padding-left:5%;padding-right:5%">LOT</td>
<td style="width: 14.6%;padding-left:5%;padding-right:5%">1</td>
<td style="width: 14.6%;padding-left:5%;padding-right:5%">1</td>
<td style="width: 14.6%;padding-left:5%;padding-right:5%">-</td>
</tr> -->
</tbody>
</table>
<table style="margin-top:2rem" class="table bordered">
<thead>
<tr>
<td style="padding: 5px;"></td>
<td style="padding: 5px;">Nama</td>
<td style="padding: 5px;">Jabatan</td>
<td style="padding: 5px;">Tanda Tangan</td>
<td style="padding: 5px;">Keterangan</td>
</tr>
</thead>
<tbody>
{{tabel.tim_keuangan}}
<!-- <tr>
<td style="padding: 5px;width: 25%">Disetujui</td>
<td style="padding: 5px;width: 25%">NAMA TERANG,</td>
<td style="padding: 5px;width: 25%"></td>
<td style="padding: 5px;width: 25%"></td>
</tr> -->
</tbody>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment