Ver 13.01 Working - Pay slips Corrected to spark

This commit is contained in:
Flatlogic Bot 2026-02-06 08:50:27 +00:00
parent d54bf8a44c
commit 1de0631044
3 changed files with 31 additions and 26 deletions

View File

@ -5,8 +5,9 @@
body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; } body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; }
.container { max-width: 600px; margin: 0 auto; border: 1px solid #ddd; padding: 20px; } .container { max-width: 600px; margin: 0 auto; border: 1px solid #ddd; padding: 20px; }
.header { text-align: center; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; } .header { text-align: center; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
.title { font-size: 24px; font-weight: bold; text-transform: uppercase; color: #000; } .beneficiary-name { font-size: 24px; font-weight: bold; text-transform: uppercase; color: #000; }
.subtitle { font-size: 14px; color: #666; margin-top: 5px; } .sub-header { font-size: 14px; color: #666; margin-bottom: 5px; }
.title { font-size: 18px; font-weight: bold; color: #666; }
.meta { margin-bottom: 20px; background-color: #f8f9fa; padding: 10px; border-radius: 4px; } .meta { margin-bottom: 20px; background-color: #f8f9fa; padding: 10px; border-radius: 4px; }
.items-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .items-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.items-table th, .items-table td { border-bottom: 1px solid #eee; padding: 8px; text-align: left; } .items-table th, .items-table td { border-bottom: 1px solid #eee; padding: 8px; text-align: left; }
@ -21,12 +22,13 @@
<body> <body>
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<div class="title">Payslip</div> <div class="sub-header">PAYMENT TO BENEFICIARY</div>
<div class="subtitle">Reference: #{{ record.id }}</div> <div class="beneficiary-name">{{ record.worker.name }}</div>
<div class="title">Payslip #{{ record.id }}</div>
</div> </div>
<div class="meta"> <div class="meta">
<strong>Worker:</strong> {{ record.worker.name }}<br> <strong>Beneficiary:</strong> {{ record.worker.name }}<br>
<strong>ID Number:</strong> {{ record.worker.id_no }}<br> <strong>ID Number:</strong> {{ record.worker.id_no }}<br>
<strong>Date:</strong> {{ record.date }} <strong>Date:</strong> {{ record.date }}
</div> </div>
@ -62,7 +64,7 @@
</div> </div>
<div class="footer"> <div class="footer">
<p>Generated by Fox Fitt App for {{ record.worker.name }}</p> <p>Payer: Fox Fitt | Generated for {{ record.worker.name }}</p>
<p>Date Generated: {% now "Y-m-d H:i" %}</p> <p>Date Generated: {% now "Y-m-d H:i" %}</p>
</div> </div>
</div> </div>

View File

@ -13,30 +13,31 @@
<div class="card border-0 shadow-lg" id="payslip-card"> <div class="card border-0 shadow-lg" id="payslip-card">
<div class="card-body p-5"> <div class="card-body p-5">
<!-- Header --> <!-- Header -->
<div class="row mb-5 border-bottom pb-4"> <div class="row mb-5 border-bottom pb-4 align-items-center">
<div class="col-6"> <div class="col-md-6">
<h2 class="fw-bold text-success mb-1">Fox Fitt</h2> <h6 class="text-uppercase text-muted fw-bold small mb-1">Payment To Beneficiary:</h6>
<p class="text-muted small">Construction Management System</p> <h2 class="fw-bold text-dark mb-0 text-uppercase">{{ record.worker.name }}</h2>
<p class="text-muted small mb-0">Payslip No. #{{ record.id|stringformat:"06d" }}</p>
</div> </div>
<div class="col-6 text-end"> <div class="col-md-6 text-md-end mt-3 mt-md-0">
<h3 class="fw-bold text-uppercase text-secondary">Payslip</h3> <h3 class="fw-bold text-uppercase text-secondary mb-1">Payslip</h3>
<div class="text-muted">No. #{{ record.id|stringformat:"06d" }}</div>
<div class="fw-bold">{{ record.date|date:"F j, Y" }}</div> <div class="fw-bold">{{ record.date|date:"F j, Y" }}</div>
<div class="text-muted small">Payer: Fox Fitt</div>
</div> </div>
</div> </div>
<!-- Worker Details --> <!-- Worker Details -->
<div class="row mb-5"> <div class="row mb-5">
<div class="col-md-6"> <div class="col-md-6">
<h6 class="text-uppercase text-muted fw-bold small mb-3">Pay To:</h6> <h6 class="text-uppercase text-muted fw-bold small mb-3">Beneficiary Details:</h6>
<h4 class="fw-bold">{{ record.worker.name }}</h4> <h4 class="fw-bold">{{ record.worker.name }}</h4>
<p class="mb-0">ID Number: <strong>{{ record.worker.id_no }}</strong></p> <p class="mb-0">ID Number: <strong>{{ record.worker.id_no }}</strong></p>
<p class="mb-0">Phone: {{ record.worker.phone_no }}</p> <p class="mb-0">Phone: {{ record.worker.phone_no }}</p>
</div> </div>
<div class="col-md-6 text-end"> <div class="col-md-6 text-md-end mt-4 mt-md-0">
<h6 class="text-uppercase text-muted fw-bold small mb-3">Payment Summary:</h6> <h6 class="text-uppercase text-muted fw-bold small mb-3">Net Payable Amount:</h6>
<div class="display-6 fw-bold text-dark">R {{ record.amount|intcomma }}</div> <div class="display-6 fw-bold text-dark">R {{ record.amount|intcomma }}</div>
<p class="text-success small fw-bold">PAID</p> <p class="text-success small fw-bold mt-2"><i class="fas fa-check-circle me-1"></i> PAID</p>
</div> </div>
</div> </div>
@ -141,7 +142,7 @@
<!-- Footer --> <!-- Footer -->
<div class="text-center text-muted small mt-5 pt-4 border-top"> <div class="text-center text-muted small mt-5 pt-4 border-top">
<p>This is a computer-generated document and does not require a signature.</p> <p>This is a computer-generated document and does not require a signature.</p>
<p>Fox Fitt &copy; 2026</p> <p>Payer: Fox Fitt &copy; 2026</p>
</div> </div>
</div> </div>
</div> </div>

View File

@ -16,8 +16,9 @@
} }
body { font-family: Helvetica, sans-serif; font-size: 12pt; line-height: 1.5; color: #333; } body { font-family: Helvetica, sans-serif; font-size: 12pt; line-height: 1.5; color: #333; }
.header { text-align: center; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; } .header { text-align: center; border-bottom: 2px solid #333; padding-bottom: 10px; margin-bottom: 20px; }
.title { font-size: 24pt; font-weight: bold; text-transform: uppercase; color: #000; } .beneficiary-name { font-size: 24pt; font-weight: bold; text-transform: uppercase; color: #000; }
.subtitle { font-size: 14pt; color: #666; margin-top: 5px; } .sub-header { font-size: 12pt; color: #666; margin-bottom: 5px; }
.title { font-size: 18pt; font-weight: bold; color: #666; }
.meta { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; background-color: #f9f9f9; } .meta { margin-bottom: 20px; padding: 10px; border: 1px solid #ddd; background-color: #f9f9f9; }
.items-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; } .items-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.items-table th { border-bottom: 1px solid #000; padding: 8px; text-align: left; background-color: #eee; font-weight: bold; } .items-table th { border-bottom: 1px solid #000; padding: 8px; text-align: left; background-color: #eee; font-weight: bold; }
@ -32,12 +33,13 @@
</head> </head>
<body> <body>
<div class="header"> <div class="header">
<div class="title">Payslip</div> <div class="sub-header">PAYMENT TO BENEFICIARY</div>
<div class="subtitle">Reference: #{{ record.id }}</div> <div class="beneficiary-name">{{ record.worker.name }}</div>
<div class="title">Payslip #{{ record.id }}</div>
</div> </div>
<div class="meta"> <div class="meta">
<strong>Worker:</strong> {{ record.worker.name }}<br> <strong>Beneficiary:</strong> {{ record.worker.name }}<br>
<strong>ID Number:</strong> {{ record.worker.id_no }}<br> <strong>ID Number:</strong> {{ record.worker.id_no }}<br>
<strong>Date:</strong> {{ record.date }} <strong>Date:</strong> {{ record.date }}
</div> </div>
@ -73,7 +75,7 @@
</div> </div>
<div id="footerContent" class="footer"> <div id="footerContent" class="footer">
Generated by Fox Fitt App for {{ record.worker.name }} | {% now "Y-m-d H:i" %} Payer: Fox Fitt | Generated for {{ record.worker.name }} | {% now "Y-m-d H:i" %}
</div> </div>
</body> </body>
</html> </html>