feat: new users role
This commit is contained in:
Efril
@@ -0,0 +1,394 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user