395 lines
10 KiB
HTML
395 lines
10 KiB
HTML
<!doctype html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>Laporan Penjualan Harian</title>
|
|
<style>
|
|
@page {
|
|
size: A4;
|
|
margin: 10mm 12mm;
|
|
}
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
body {
|
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
|
background: #ffffff;
|
|
color: #2d3748;
|
|
line-height: 1.4;
|
|
font-size: 11px;
|
|
}
|
|
.report-container {
|
|
max-width: 210mm;
|
|
margin: 0 auto;
|
|
padding: 0;
|
|
}
|
|
|
|
/* Header */
|
|
.report-header {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
.header-logo {
|
|
display: inline-block;
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 10px;
|
|
overflow: hidden;
|
|
margin-bottom: 8px;
|
|
background: #dc2626;
|
|
padding: 10px;
|
|
}
|
|
.header-logo svg {
|
|
width: 40px;
|
|
height: 40px;
|
|
}
|
|
.header-title {
|
|
font-size: 22px;
|
|
font-weight: 800;
|
|
color: #1a1a1a;
|
|
margin-bottom: 4px;
|
|
}
|
|
.header-org {
|
|
font-size: 14px;
|
|
font-weight: 700;
|
|
color: #dc2626;
|
|
margin-bottom: 2px;
|
|
}
|
|
.header-period {
|
|
font-size: 11px;
|
|
color: #666;
|
|
font-style: italic;
|
|
}
|
|
|
|
/* Summary Boxes */
|
|
.summary-boxes {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 0;
|
|
margin-bottom: 20px;
|
|
border: 2px solid #1a1a1a;
|
|
}
|
|
.summary-box {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 10px 14px;
|
|
border-bottom: 1px solid #1a1a1a;
|
|
}
|
|
.summary-box:nth-child(odd) {
|
|
border-right: 1px solid #1a1a1a;
|
|
}
|
|
.summary-box:nth-child(n + 3) {
|
|
border-bottom: none;
|
|
}
|
|
.summary-box.highlight-green {
|
|
background: #dcfce7;
|
|
}
|
|
.summary-box.highlight-red {
|
|
background: #fee2e2;
|
|
}
|
|
.summary-box-label {
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
color: #1a1a1a;
|
|
text-transform: uppercase;
|
|
}
|
|
.summary-box-value {
|
|
font-size: 13px;
|
|
font-weight: 800;
|
|
color: #1a1a1a;
|
|
font-family: "Courier New", monospace;
|
|
}
|
|
.summary-box-value.negative {
|
|
color: #dc2626;
|
|
}
|
|
.summary-box-value.positive {
|
|
color: #16a34a;
|
|
}
|
|
|
|
/* Section Title */
|
|
.section-title {
|
|
font-size: 14px;
|
|
font-weight: 800;
|
|
color: #dc2626;
|
|
margin-bottom: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
/* Main Summary Table */
|
|
.summary-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 20px;
|
|
font-size: 11px;
|
|
}
|
|
.summary-table thead th {
|
|
background: #dc2626;
|
|
color: #ffffff;
|
|
padding: 8px 10px;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
border: 1px solid #dc2626;
|
|
}
|
|
.summary-table thead th:first-child {
|
|
width: 30px;
|
|
}
|
|
.summary-table thead th:nth-child(2) {
|
|
text-align: left;
|
|
width: 35%;
|
|
}
|
|
.summary-table tbody td {
|
|
padding: 7px 10px;
|
|
border: 1px solid #e5e7eb;
|
|
font-size: 11px;
|
|
}
|
|
.summary-table tbody td:first-child {
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
.summary-table tbody td.nominal {
|
|
text-align: right;
|
|
font-family: "Courier New", monospace;
|
|
font-weight: 600;
|
|
}
|
|
.summary-table tbody td.pct {
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
.summary-table tbody tr.bold-row td {
|
|
font-weight: 800;
|
|
background: #f9fafb;
|
|
}
|
|
.summary-table tbody tr.highlight-row td {
|
|
font-weight: 800;
|
|
background: #fef3c7;
|
|
}
|
|
.summary-table tbody tr.highlight-green-row td {
|
|
font-weight: 800;
|
|
background: #dcfce7;
|
|
}
|
|
.summary-table tbody tr.sub-item td {
|
|
padding-left: 30px;
|
|
font-size: 10px;
|
|
color: #4b5563;
|
|
}
|
|
|
|
/* Rincian Biaya Table */
|
|
.detail-table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
margin-bottom: 20px;
|
|
font-size: 11px;
|
|
}
|
|
.detail-table thead th {
|
|
background: #dc2626;
|
|
color: #ffffff;
|
|
padding: 8px 10px;
|
|
text-align: center;
|
|
font-size: 10px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
border: 1px solid #dc2626;
|
|
}
|
|
.detail-table thead th:first-child {
|
|
width: 30px;
|
|
}
|
|
.detail-table thead th:nth-child(2) {
|
|
text-align: left;
|
|
}
|
|
.detail-table thead th:last-child {
|
|
text-align: right;
|
|
width: 25%;
|
|
}
|
|
.detail-table tbody td {
|
|
padding: 7px 10px;
|
|
border: 1px solid #e5e7eb;
|
|
font-size: 11px;
|
|
}
|
|
.detail-table tbody td:first-child {
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
.detail-table tbody td:last-child {
|
|
text-align: right;
|
|
font-family: "Courier New", monospace;
|
|
font-weight: 600;
|
|
}
|
|
.detail-table tbody tr.total-row td {
|
|
font-weight: 800;
|
|
background: #fef3c7;
|
|
border-top: 2px solid #1a1a1a;
|
|
}
|
|
|
|
/* Footer */
|
|
.report-footer {
|
|
margin-top: 20px;
|
|
padding-top: 10px;
|
|
border-top: 1px solid #e5e7eb;
|
|
font-size: 9px;
|
|
color: #9ca3af;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="report-container">
|
|
<!-- HEADER -->
|
|
<div class="report-header">
|
|
<div class="header-logo">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 500 500"
|
|
width="40"
|
|
height="40"
|
|
>
|
|
<rect fill="#dc2626" x="0" y="0" width="500" height="500" rx="60" />
|
|
<g transform="translate(250,250) scale(3.2)">
|
|
<rect
|
|
x="-40"
|
|
y="-50"
|
|
width="80"
|
|
height="10"
|
|
rx="3"
|
|
fill="white"
|
|
/>
|
|
<rect
|
|
x="-30"
|
|
y="-35"
|
|
width="60"
|
|
height="60"
|
|
rx="5"
|
|
fill="none"
|
|
stroke="white"
|
|
stroke-width="5"
|
|
/>
|
|
<circle cx="0" cy="-55" r="8" fill="white" />
|
|
<line
|
|
x1="-10"
|
|
y1="-60"
|
|
x2="10"
|
|
y2="-50"
|
|
stroke="white"
|
|
stroke-width="3"
|
|
/>
|
|
<line
|
|
x1="10"
|
|
y1="-60"
|
|
x2="-10"
|
|
y2="-50"
|
|
stroke="white"
|
|
stroke-width="3"
|
|
/>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="header-title">LAPORAN PENJUALAN HARIAN</div>
|
|
<div class="header-org">{{.OrganizationName}}</div>
|
|
<div class="header-period">
|
|
Bulan: {{.MonthName}} / Tanggal Report: {{.ReportDate}}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- SUMMARY BOXES -->
|
|
<div class="summary-boxes">
|
|
<div class="summary-box">
|
|
<span class="summary-box-label"
|
|
>TOTAL PENJUALAN {{.ReportDateUpper}}</span
|
|
>
|
|
<span class="summary-box-value">{{.TotalPenjualan}}</span>
|
|
</div>
|
|
<div class="summary-box">
|
|
<span class="summary-box-label"
|
|
>TOTAL BIAYA {{.ReportDateUpper}}</span
|
|
>
|
|
<span class="summary-box-value">{{.TotalBiaya}}</span>
|
|
</div>
|
|
<div class="summary-box {{.LabaRugiClass}}">
|
|
<span class="summary-box-label">LABA/RUGI {{.ReportDateUpper}}</span>
|
|
<span class="summary-box-value {{.LabaRugiValueClass}}"
|
|
>{{.LabaRugi}}</span
|
|
>
|
|
</div>
|
|
<div class="summary-box {{.LabaRugiMtdClass}}">
|
|
<span class="summary-box-label">LABA/RUGI MTD</span>
|
|
<span class="summary-box-value {{.LabaRugiMtdValueClass}}"
|
|
>{{.LabaRugiMtd}}</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 1. RINGKASAN LAPORAN -->
|
|
<div class="section-title">1. Ringkasan Laporan</div>
|
|
<table class="summary-table">
|
|
<thead>
|
|
<tr>
|
|
<th>NO</th>
|
|
<th>KETERANGAN</th>
|
|
<th>TANGGAL REPORT<br />Nominal</th>
|
|
<th>%</th>
|
|
<th>MTD<br />Nominal</th>
|
|
<th>%</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range $i, $row := .MainSummary}}
|
|
<tr class="{{$row.RowClass}}">
|
|
<td>{{if $row.Number}}{{$row.Number}}{{end}}</td>
|
|
<td>{{$row.Label}}</td>
|
|
<td class="nominal">{{$row.TodayNominal}}</td>
|
|
<td class="pct">{{$row.TodayPct}}</td>
|
|
<td class="nominal">{{$row.MtdNominal}}</td>
|
|
<td class="pct">{{$row.MtdPct}}</td>
|
|
</tr>
|
|
{{range $j, $sub := $row.SubItems}}
|
|
<tr class="sub-item">
|
|
<td></td>
|
|
<td>{{$sub.Label}}</td>
|
|
<td class="nominal">{{$sub.TodayNominal}}</td>
|
|
<td class="pct">{{$sub.TodayPct}}</td>
|
|
<td class="nominal">{{$sub.MtdNominal}}</td>
|
|
<td class="pct">{{$sub.MtdPct}}</td>
|
|
</tr>
|
|
{{end}} {{end}}
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- 2. RINCIAN BIAYA / CATATAN -->
|
|
<div class="section-title">2. Rincian Biaya / Catatan</div>
|
|
<table class="detail-table">
|
|
<thead>
|
|
<tr>
|
|
<th>NO</th>
|
|
<th>KETERANGAN</th>
|
|
<th>JUMLAH</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{{range $i, $item := .PurchasingItems}}
|
|
<tr>
|
|
<td>{{add $i 1}}</td>
|
|
<td>{{$item.Name}}</td>
|
|
<td>{{$item.Amount}}</td>
|
|
</tr>
|
|
{{end}}
|
|
<tr class="total-row">
|
|
<td></td>
|
|
<td>TOTAL</td>
|
|
<td>{{.PurchasingTotal}}</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<!-- FOOTER -->
|
|
<div class="report-footer">
|
|
Dicetak oleh: {{.GeneratedBy}} | {{.PrintTime}} | Powered by APSKEL
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|