cbsnexora/src/app/tds-reports/tds-remittance-report.component.html

<!--
  Copyright since 2025 Mifos Initiative

  This Source Code Form is subject to the terms of the Mozilla Public
  License, v. 2.0. If a copy of the MPL was not distributed with this
  file, You can obtain one at http://mozilla.org/MPL/2.0/.
-->

<div class="tdsr">
  <div class="tdsr__head">
    <div class="tdsr__head-l">
      <fa-icon icon="building-columns" class="tdsr__head-ic"></fa-icon>
      <div>
        <h2 class="tdsr__title">TDS Remitted to Government</h2>
        <div class="tdsr__sub">
          Challan-wise deposits and the {{ statute.statement }} year-end position · {{ scopeLabel }} · as at
          {{ asAt | date: 'd MMM y' }}
        </div>
      </div>
    </div>
    <div class="tdsr__head-r">
      <label class="tdsr__filter">
        <span>Financial year</span>
        <select [(ngModel)]="fy">
          @for (year of financialYears; track year) {
            <option [value]="year">FY {{ year }}</option>
          }
        </select>
      </label>
      <button type="button" class="tdsr__btn" (click)="exportWorkbook()" [disabled]="exporting">
        <fa-icon icon="download"></fa-icon>
        {{ exporting ? 'Preparing…' : 'Export' }}
      </button>
    </div>
  </div>

  <!-- The control figure, first thing on the page -->
  @if (reconciled) {
    <div class="tdsr__banner tdsr__banner--ok">
      <fa-icon icon="check-circle"></fa-icon>
      <div>
        <strong>Reconciled.</strong>
        ₹{{ summary.totalDeducted | number: '1.0-0' }} deducted, ₹{{
          summary.totalDeposited | number: '1.0-0'
        }}
        deposited, ₹{{ summary.pendingDeposit | number: '1.0-0' }} still within its due date.
      </div>
    </div>
  } @else {
    <div class="tdsr__banner tdsr__banner--warn">
      <fa-icon icon="exclamation-triangle"></fa-icon>
      <div>
        <strong>Does not reconcile — ₹{{ summary.difference | number: '1.0-0' }} unaccounted.</strong>
        Tax deducted must equal tax deposited plus tax still within its due date. Find the difference before filing the
        return.
      </div>
    </div>
  }

  @if (summary.overdueChallans > 0) {
    <div class="tdsr__banner tdsr__banner--warn">
      <fa-icon icon="exclamation-triangle"></fa-icon>
      <div>
        <strong>{{ summary.overdueChallans }} challan{{ summary.overdueChallans === 1 ? '' : 's' }} overdue.</strong>
        Interest runs at 1.5% for every month or part of a month until the tax reaches the Government.
      </div>
    </div>
  }

  <!-- KPIs -->
  <div class="tdsr__kpis">
    <div class="tdsr__kpi tdsr__kpi--warn">
      <div class="tdsr__kpi-n">₹{{ summary.totalDeducted | number: '1.0-0' }}</div>
      <div class="tdsr__kpi-l">Total TDS deducted</div>
    </div>
    <div class="tdsr__kpi tdsr__kpi--ok">
      <div class="tdsr__kpi-n">₹{{ summary.totalDeposited | number: '1.0-0' }}</div>
      <div class="tdsr__kpi-l">Deposited with Government</div>
    </div>
    <div class="tdsr__kpi">
      <div class="tdsr__kpi-n">₹{{ summary.pendingDeposit | number: '1.0-0' }}</div>
      <div class="tdsr__kpi-l">Within due date</div>
    </div>
    <div class="tdsr__kpi" [class.tdsr__kpi--warn]="totalDefaultInterest > 0">
      <div class="tdsr__kpi-n">₹{{ totalDefaultInterest | number: '1.0-0' }}</div>
      <div class="tdsr__kpi-l">Interest on late deposit</div>
    </div>
    <div class="tdsr__kpi">
      <div class="tdsr__kpi-n">{{ summary.deductees | number }}</div>
      <div class="tdsr__kpi-l">Deductees in the return</div>
    </div>
  </div>

  <!-- Part A: challans -->
  <div class="tdsr__card">
    <div class="tdsr__card-head"><fa-icon icon="receipt"></fa-icon> Part A — challan-wise remittance</div>
    <div class="tdsr__table-wrap">
      <table class="tdsr__table">
        <thead>
          <tr>
            <th>Quarter</th>
            <th>Deduction month</th>
            <th class="num">Amount</th>
            <th>Due date</th>
            <th>Deposited on</th>
            <th>Challan · BSR</th>
            <th>Status</th>
            <th class="num">Late-deposit interest</th>
            <th>{{ statute.statement }} due</th>
          </tr>
        </thead>
        <tbody>
          @for (row of rows; track trackRow($index, row)) {
            <tr [class.tdsr__row--warn]="row.late || row.overdue">
              <td>
                <strong>{{ quarterLabel[row.quarter] }}</strong>
              </td>
              <td class="small">{{ row.month }}</td>
              <td class="num">
                <strong>₹{{ row.amount | number: '1.0-0' }}</strong>
              </td>
              <td class="small">{{ row.dueDate | date: 'd MMM y' }}</td>
              <td class="small">
                @if (row.depositedOn) {
                  {{ row.depositedOn | date: 'd MMM y' }}
                } @else {
                  <span class="muted">—</span>
                }
              </td>
              <td class="mono small">
                @if (row.challanNo) {
                  {{ row.challanNo }}
                  <div class="muted">BSR {{ row.bsrCode }}</div>
                } @else {
                  <span class="muted">—</span>
                }
              </td>
              <td>
                @if (row.overdue) {
                  <span class="tdsr__pill tdsr__pill--warn">Overdue</span>
                } @else if (row.late) {
                  <span class="tdsr__pill tdsr__pill--warn">Late by {{ row.delayMonths }}m</span>
                } @else if (row.depositedOn) {
                  <span class="tdsr__pill tdsr__pill--ok">On time</span>
                } @else {
                  <span class="tdsr__pill">Within due date</span>
                }
              </td>
              <td class="num">
                @if (row.defaultInterest) {
                  <strong class="tdsr__warn-text">₹{{ row.defaultInterest | number: '1.0-0' }}</strong>
                  <div class="small muted">1.5% × {{ row.delayMonths }}</div>
                } @else {
                  <span class="muted">—</span>
                }
              </td>
              <td class="small muted">{{ row.returnDueDate }}</td>
            </tr>
          }
          @if (rows.length === 0) {
            <tr>
              <td colspan="9" class="tdsr__empty">
                <fa-icon icon="info-circle"></fa-icon> No tax was deducted in this financial year.
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
    <div class="tdsr__foot">
      Tax deducted in a month must reach the Government by the seventh of the following month; March runs to 30 April.
    </div>
  </div>

  <!-- Part B: return summary -->
  <div class="tdsr__card">
    <div class="tdsr__card-head">
      <fa-icon icon="file-alt"></fa-icon> Part B — {{ statute.statement }} year-end position
    </div>
    <div class="tdsr__ledger">
      <div class="tdsr__ledger-row">
        <span>Total interest paid on time deposits</span>
        <span class="num">₹{{ summary.totalInterestPaid | number: '1.0-0' }}</span>
      </div>
      <div class="tdsr__ledger-row tdsr__ledger-row--indent">
        <span>with tax deducted</span>
        <span class="num">₹{{ summary.interestWithDeduction | number: '1.0-0' }}</span>
      </div>
      <div class="tdsr__ledger-row tdsr__ledger-row--indent">
        <span>
          without deduction — declaration on record
          <em>mandatory disclosure in {{ statute.statement }}</em>
        </span>
        <span class="num">₹{{ summary.interestWithoutDeduction | number: '1.0-0' }}</span>
      </div>

      <div class="tdsr__ledger-row tdsr__ledger-row--sep">
        <span>TDS at standard rate — PAN on record</span>
        <span class="num">₹{{ summary.tdsAtStandardRate | number: '1.0-0' }}</span>
      </div>
      <div class="tdsr__ledger-row">
        <span>TDS at higher rate — no PAN on record</span>
        <span class="num">₹{{ summary.tdsAtHigherRate | number: '1.0-0' }}</span>
      </div>

      <div class="tdsr__ledger-row tdsr__ledger-row--total">
        <span>Total TDS deducted</span>
        <span class="num">₹{{ summary.totalDeducted | number: '1.0-0' }}</span>
      </div>
      <div class="tdsr__ledger-row">
        <span>Deposited with Government</span>
        <span class="num">₹{{ summary.totalDeposited | number: '1.0-0' }}</span>
      </div>
      <div class="tdsr__ledger-row">
        <span>Still within due date</span>
        <span class="num">₹{{ summary.pendingDeposit | number: '1.0-0' }}</span>
      </div>
      <div class="tdsr__ledger-row tdsr__ledger-row--control" [class.tdsr__ledger-row--bad]="!reconciled">
        <span>Difference — must be zero</span>
        <span class="num">₹{{ summary.difference | number: '1.0-0' }}</span>
      </div>

      @if (summary.defaultInterest > 0) {
        <div class="tdsr__ledger-row tdsr__ledger-row--sep">
          <span>Interest payable by the bank for late deposit</span>
          <span class="num">₹{{ summary.defaultInterest | number: '1.0-0' }}</span>
        </div>
      }
    </div>
    <div class="tdsr__foot">
      The "without deduction" line is not optional — interest paid gross against a declaration must be reported in the
      quarterly {{ statute.statement }} return with the appropriate remark code, and the consolidated statement of
      declarations received is uploaded {{ statute.frequency }}. Confirm the remark code against the current
      specification before generating the file.
    </div>
  </div>
</div>