fix: improve filter details render logic to avoid showing duplicate information

(cherry picked from commit 9660debe28)

erpnext/accounts/report/general_ledger/general_ledger.html

@@ -1,65 +1,92 @@
 <style type="text/css">
     body, html {
-        margin-top: 10;
+        margin-top: 10px;
         padding: 0;
         width: 100%;
         height: auto;
-        font-family: "Inter", sans-serif;
+        font-family: Inter, sans-serif;
-        color: #525252;
+        font-size: 14px;
+        line-height: 21px;
+        color: #171717;
     }
 
     .title-letter-spacing {
-        letter-spacing: .2rem;
+		font-size: 14px;
-        color: #525252;
+		font-weight: 600;
+		color: #171717;
     }
 
-    table {
+    .report-table table {
         width: 100%;
-        font-size: 11px;
-        border-collapse: collapse;
         table-layout: fixed;
-        border: 1px solid #ededed;
+        border-collapse: collapse;
     }
 
-    thead tr {
+    .report-table thead th {
         background: #f8f8f8;
         text-align: center;
-        font-weight: bold;
+		font-size: 14px;
+        font-weight: 500;
+        color: #7c7c7c;
+        border-top: 1px solid #ededed;
+        border-bottom: 1px solid #ededed;
+        padding: 6px 8px;
     }
 
-    th, td {
+    .report-table tbody td {
         padding: 6px 8px;
-        border: 1px solid #ededed;
+        border-top: 1px solid #ededed;
+        border-bottom: 1px solid #ededed;
         vertical-align: top;
         word-wrap: break-word;
+        font-size: 14px;
+    }
+
+    .report-table thead th:first-child {
+        border-left: 1px solid #ededed;
+    }
+
+    .report-table thead th:last-child {
+        border-right: 1px solid #ededed;
+    }
+
+    .report-table tbody tr:last-child td {
+        border-bottom: none;
+    }
+
+    .date-col {
+        white-space: nowrap;
     }
 
     .text-center { text-align: center; }
-    .text-right {
-        text-align: right;
-        font-variant-numeric: tabular-nums;
-    }
     .text-left { text-align: left; }
+    .text-right { text-align: right; font-variant-numeric: tabular-nums; }
 
-    .text-muted { color: #7c7c7c; }
+    .text-bold { font-weight: 700; }
-    .text-bold { font-weight: bold; }
 
-	.show-filters {
+    .report-meta {
         margin: 10px 0 14px;
         padding: 8px 10px;
-		background: #f8f8f8;
+        color: #171717;
-		border: 1px solid #ededed;
+		font-size: 14px;
-		border-radius: 6px;
+        display: flex;
-		font-size: 12.5px;
+        justify-content: space-between;
-		color: #525252;
+        align-items: flex-start;
+        gap: 12px;
     }
 
-	.show-filters .filter-row {
+    .report-meta .left,
+    .report-meta .right {
+        display: flex;
+        flex-direction: column;
+    }
+
+    .report-meta .filter-row {
         margin-bottom: 4px;
         line-height: 1.5;
     }
 
-	.show-filters .filter-row strong {
+    .report-meta strong {
         color: #7c7c7c;
         font-weight: 500;
     }
@@ -78,7 +105,6 @@
         tr {
             page-break-inside: avoid;
         }
-
         .no-print {
             display: none !important;
         }
@@ -88,59 +114,54 @@
 <br>
 
 <div>
-    <!-- Title -->
-   <div class="text-center" style="margin-bottom: 12px;">
 
-    <!-- Title -->
+    <div class="text-center" style="margin-bottom: 12px;">
-    <div class="title-letter-spacing" style="font-size: 17px; font-weight: 600; color: #171717;">
+        <div class="title-letter-spacing">
             {%= __("STATEMENT OF ACCOUNTS") %}
         </div>
-
-    <!-- Party / Account -->
-    <div style="margin-top: 6px; font-size: 12.5px; color: #525252;">
-        {% if (filters.party_name) { %}
-            {%= filters.party_name %}
-        {% } else if (filters.party && filters.party.length) { %}
-            {%= filters.party %}
-        {% } else if (filters.account) { %}
-            {%= filters.account %}
-        {% } else { %}
-            {%= __("All Parties") %}
-        {% } %}
     </div>
 
-    <!-- Date Range -->
+    {% if (subtitle && subtitle.trim()) { %}
-    <div style="margin-top: 4px; font-size: 12.5px; color: #525252;">
+        <div class="report-meta">
+            {{ subtitle }}
+        </div>
+    {% } else { %}
+       <div class="report-meta">
+			<div class="left">
+				<div class="filter-row">
+					<strong>{%= __("Customer") %}:</strong>
+					{%=
+						(filters.party.length && filters.party.join(", ")) || filters.party_name || "All Parties"
+					%}
+				</div>
+			</div>
+
+			<div class="right text-right">
+				<div class="filter-row">
+					<strong>{%= __("Statement Period") %}:</strong>
 					{%= __("{0} to {1}", [
 						frappe.datetime.str_to_user(filters.from_date),
 						frappe.datetime.str_to_user(filters.to_date)
 					]) %}
 				</div>
-
+			</div>
-</div>
+		</div>
-
-    <!-- Filters -->
-    <div class="show-filters">
-    {% if subtitle %}
-        {{ subtitle }}
-    {% endif %}
-
-</div>
-
-    <!-- Table -->
-    <table>
-        <thead>
-            <tr class="title-letter-spacing">
-                <th style="width: 7em">{%= __("Date").toLocaleUpperCase() %}</th>
-                <th>{%= __("Particulars").toLocaleUpperCase() %}</th>
-
-                {% if(filters.show_remarks) { %}
-                    <th>{%= __("Remarks").toLocaleUpperCase() %}</th>
     {% } %}
 
-                <th style="width: 9em">{%= __("Debit").toLocaleUpperCase() %}</th>
+    <div class="report-table">
-                <th style="width: 9em">{%= __("Credit").toLocaleUpperCase() %}</th>
+        <table>
-                <th style="width: 10.2em">{%= __("Balance").toLocaleUpperCase() %}</th>
+            <thead>
+                <tr>
+                    <th style="width: 8em; text-align: left;">{%= __("Date") %}</th>
+                    <th style="text-align: left;">{%= __("Voucher Details") %}</th>
+
+                    {% if(filters.show_remarks) { %}
+                        <th>{%= __("Remarks") %}</th>
+                    {% } %}
+
+                    <th style="width: 10em; text-align: right;">{%= __("Debit") %}</th>
+                    <th style="width: 10em; text-align: right;">{%= __("Credit") %}</th>
+                    <th style="width: 10em; text-align: right;">{%= __("Balance") %}</th>
                 </tr>
             </thead>
 
@@ -149,8 +170,7 @@
                     {% var row = data[i]; %}
                     <tr>
 
-					<!-- DATE COLUMN -->
+                        <td class="text-left date-col">
-					<td class="text-center">
                             {% if(row.posting_date) { %}
                                 {%= frappe.datetime.str_to_user(row.posting_date) %}
                             {% } else if(i == 0) { %}
@@ -158,16 +178,20 @@
                             {% } %}
                         </td>
 
-					<!-- PARTICULARS -->
                         <td class="{% if(!row.posting_date) { %}text-left text-bold{% } %}">
                             {% if(row.posting_date) { %}
                                 {%= row.voucher_type %} {%= row.voucher_no %}
+
                                 {% if(!(filters.party || filters.account)) { %}
+                                    <div style="margin-top: 2px;">
                                         {%= row.party || row.account %}
-							{% } %}<br>
+                                    </div>
+                                {% } %}
 
                                 {% if(row.bill_no) { %}
+                                    <div style="margin-top: 2px;">
                                         {%= __("Supplier Invoice No") %}: {%= row.bill_no %}
+                                    </div>
                                 {% } %}
 
                             {% } else { %}
@@ -181,16 +205,14 @@
                             {% } %}
                         </td>
 
-					<!-- REMARKS -->
                         {% if(filters.show_remarks) { %}
-						<td class="text-muted" style="font-size: 10px">
+                            <td class="text-left">
-							{% if(row.posting_date && row.remarks != "No Remarks" && row.remarks != "") { %}
+                                {% if(row.posting_date && row.remarks && row.remarks != "No Remarks") { %}
                                     {%= row.remarks %}
                                 {% } %}
                             </td>
                         {% } %}
 
-					<!-- DEBIT -->
                         <td class="text-right">
                             {% if(row.posting_date) { %}
                                 {% if(row.debit != 0) { %}
@@ -201,7 +223,6 @@
                             {% } %}
                         </td>
 
-					<!-- CREDIT -->
                         <td class="text-right">
                             {% if(row.posting_date) { %}
                                 {% if(row.credit != 0) { %}
@@ -212,13 +233,12 @@
                             {% } %}
                         </td>
 
-					<!-- BALANCE -->
                         <td class="text-right {% if(i == l-1) { %}text-bold{% } %}">
                             {% if(i == l-1) { %}
                                 {%= format_currency(row.balance, filters.presentation_currency) %}
-							{% if(row.balance < 0){ %}Cr{% } %}
+                                {% if(row.balance < 0){ %} Cr{% } %}
-							{% if(row.balance > 0){ %}Dr{% } %}
+                                {% if(row.balance > 0){ %} Dr{% } %}
-						{% } else if(i != l-2) { %}
+                            {% } else { %}
                                 {%= format_currency(row.balance, filters.presentation_currency) %}
                             {% } %}
                         </td>
@@ -227,10 +247,12 @@
                 {% endfor %}
             </tbody>
         </table>
+    </div>
 
-    <p class="text-right text-muted">
+    <p class="text-right">
         {%= __("Printed on {0}", [
             frappe.datetime.str_to_user(frappe.datetime.get_datetime_as_string())
         ]) %}
     </p>
+
 </div>