HTML Code - Enter in HTML Code
=====================


 <link rel="stylesheet" href="/files/ledger-style.css">
 
{% set gl_entries = frappe.db.sql("""
    SELECT posting_date, voucher_no, debit, credit, remarks
    FROM `tabGL Entry`
    WHERE party_type = 'Customer'
    AND party = %s
    AND is_cancelled = 0
    AND posting_date <= %s
    ORDER BY posting_date DESC, creation DESC
    LIMIT 5
""", (doc.customer, doc.posting_date), as_dict=1) %}
 
{% set gl_totals = frappe.db.sql("""
    SELECT 
        COALESCE(SUM(debit), 0) AS total_debit,
        COALESCE(SUM(credit), 0) AS total_credit
    FROM `tabGL Entry`
    WHERE party_type = 'Customer'
    AND party = %s
    AND is_cancelled = 0
    AND posting_date BETWEEN '2024-01-01' AND %s
""", (doc.customer, doc.posting_date), as_dict=1)[0] %}
 
<div class="invoice-title">Sales Invoice</div>
 
<div class="details-box">
    <div>
        <b>Customer:</b> {{ doc.customer_name }}<br>
        <b>Customer Code:</b> {{ doc.customer }}<br>
        <b>DC No:</b> {{ doc.custom_dc_no or "-" }}
    </div>
    <div>
        <b>Invoice No:</b> {{ doc.name }}<br>
        <b>Posting Date:</b> {{ frappe.utils.formatdate(doc.posting_date, "dd-MM-yyyy") }}<br>
        <b>Bilty No:</b> {{ doc.custom_bilty_no or "-" }}<br>
        <b>Transporter:</b> {{ doc.custom_transport or "-" }}
    </div>
</div>

<div class="section-divider"></div>
<div class="section-title">Current Sales Invoice</div> 
 
<table>
    <thead>
        <tr>
            <th>No</th>
            <th>Item</th>
            <th>Quantity</th>
            <th>Rate</th>
            <th>Amount (PKR)</th>
        </tr>
    </thead>
    <tbody>
        {% for item in doc.items %}
        <tr>
            <td>{{ loop.index }}</td>
            <td>{{ item.item_name }}</td>
            <td>{{ (item.qty or 0) | int }}</td>
            <td>{{ "{:,}".format((item.rate or 0) | int) }}</td>
            <td>{{ "{:,}".format((item.amount or 0) | int) }}</td>
        </tr>
        {% endfor %}
        <tr>
            <td colspan="4" style="text-align: right;"><b>Total Current Invoice Amount</b></td>
            <td><b>{{ "{:,}".format(doc.total | int) }}</b></td>
        </tr>
    </tbody>
</table>

<div class="section-title">Ledger Report - Last 5-Transaction Till ( {{ frappe.utils.formatdate(doc.posting_date, "dd-MM-yyyy") }})</div>
 
<table class="ledger-table">
    <thead>
        <tr>
            <th>Date</th>
            <th>Voucher No</th>
            <th>Debit</th>
            <th>Credit</th>
            <th>Remarks</th>
        </tr>
    </thead>
    <tbody>
        {% for entry in gl_entries %}
        <tr>
            <td>{{ frappe.utils.formatdate(entry.posting_date, "dd-MM-yyyy") }}</td>
            <td>{{ entry.voucher_no }}</td>
            <td>{{ "{:,}".format((entry.debit or 0) | int) }}</td>
            <td>{{ "{:,}".format((entry.credit or 0) | int) }}</td>
            <td class="remarks-column">{{ entry.remarks or 'No Remarks' }}</td>
        </tr>
        {% endfor %}
    </tbody>
</table>
 
<div class="balance-box">
    Closing Balance:__ {{ "{:,}".format(((gl_totals.total_debit or 0) - (gl_totals.total_credit or 0)) | int) }} /-
</div>
 
<!-- ✅ Footer Section -->
<div class="footer" style="text-align: left; font-size: 14px; margin-top: 20px; line-height: 1.6;">
    <strong>Created By:</strong> {{ doc.owner }}<br>
    <strong>Print_Date:</strong> {{ frappe.utils.nowdate() }}
    <strong>Print_Time:</strong> {{ frappe.utils.nowtime() }}<br>
    <strong>Printed By:</strong> {{ frappe.session.user }}<br>
    <strong>Verified By: __________________________</strong>
</div>
 

         
         
====================================================================================
****************************************************************************
====================================================================================
     
 Add the Following Code in CCS
         ----------------
      
      
      
body {
    font-family: Arial, sans-serif;
    font-size: 12px;
    color: #000;
}

.invoice-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
    color: #000; /* Blue Color */ /*Sales Invoice*/
}

.section-title {
    font-size: 18px;
    margin-top: 30px;
    font-weight: bold;
    color: #1e3799;   /* Blue Color */
    border-bottom: 2px solid #000;
    padding-bottom: 5px;
}

.details-box {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    color: #000;
}

.details-box div {
    width: 48%;
    line-height: 1.6;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 25px;
    font-size: 12px;
    color: #000;
}

th, td {
    padding: 8px;
    border: 1px solid #000;
}

th {
    background-color: #dff9fb; /* light blue */
    color: #1e3799; /* blue text */
    font-weight: bold;
}

.ledger-table {
    font-size: 10.5px;
}

.ledger-table th, .ledger-table td {
    border: 1px solid #000;
}

.balance-box {
    text-align: right;
    font-size: 16px;
    font-weight: bold;
    color: #1e3799; /* Blue color for balance */
    margin-top: 20px;
}

.remarks-column {
    font-size: 9px;
}

/* ✅ Line before Current Sales Invoice */
.section-divider {
    border-top: 2px solid #000;
    margin: 0px 0 10px 0;  /* top, right/left, bottom */
}

/* Meta section for Created By, Printed Time, etc. */
.print-meta {
    text-align: left;
    font-size: 12px;
    margin-top: 60px;
    line-height: 1.6;
    border-top: 2px solid #000;
    padding-top: 10px;
    color: #000;
}

/* Optional footer styling */
.footer {
    margin-top: 35px;
    padding-top: 25px;
    border-top: 1px dashed #999;
    font-size: 11px;
    color: #555;
}