cbsnexora/src/app/home/dashboard/fd-rd-entry-dialog/fd-rd-entry-dialog.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="fdrd-dlg">
  <!-- HEADER -->
  <div class="fdrd-head">
    <div class="fdrd-head-left">
      <div class="fdrd-head-ic"><fa-icon icon="piggy-bank"></fa-icon></div>
      <div>
        <h2 class="fdrd-title">FD / RD Entry</h2>
        <p class="fdrd-sub">Open a new Fixed Deposit or Recurring Deposit account.</p>
      </div>
    </div>
    <div class="fdrd-head-actions">
      <span class="fdrd-meta"> <fa-icon icon="university"></fa-icon>&nbsp;{{ bank.name }} </span>
      <span class="fdrd-meta"> <fa-icon icon="map-marker-alt"></fa-icon>&nbsp;{{ bank.branch }} </span>
      <button class="fdrd-close" (click)="close()" matTooltip="Close" aria-label="Close">&#10005;</button>
    </div>
  </div>

  <div class="fdrd-body">
    <!-- Success banner -->
    <div class="fdrd-success" *ngIf="saved">
      <fa-icon icon="check-circle"></fa-icon>
      <div>
        <strong>{{ lastAccountNo }}</strong> created for <strong>{{ lastClientName }}</strong>
        <div class="fdrd-success-sub">You can enter another deposit below, or close this dialog.</div>
      </div>
    </div>

    <!-- FORM -->
    <div class="fdrd-section">
      <!-- Row 1: Deposit Info | Client & Amount -->
      <div class="ws-group-row">
        <div class="ws-group">
          <span class="ws-caption">Deposit Info</span>
          <div class="ws-group__fields">
            <div class="ws-f" style="width: 200px">
              <label class="ws-f__lbl">Deposit Type</label>
              <select class="ws-f__ctl" [(ngModel)]="depositType" (ngModelChange)="onDepositTypeChange()">
                <option *ngFor="let dt of depositTypes" [value]="dt.code">{{ dt.label }}</option>
              </select>
            </div>
            <div class="ws-f" style="width: 150px">
              <label class="ws-f__lbl">Pay Mode</label>
              <select class="ws-f__ctl" [(ngModel)]="payMode">
                <option *ngFor="let m of payModes" [value]="m">{{ m }}</option>
              </select>
            </div>
          </div>
        </div>

        <div class="ws-vdivider"></div>

        <div class="ws-group ws-group--flex">
          <span class="ws-caption">Client & Amount</span>
          <div class="ws-group__fields">
            <div class="ws-f" style="flex: 1.5; min-width: 180px">
              <label class="ws-f__lbl">Client</label>
              <select class="ws-f__ctl" [(ngModel)]="clientId">
                <option value="" disabled>-- Select Client --</option>
                <option *ngFor="let c of clients" [value]="c.id">{{ c.name }} ({{ c.id }})</option>
              </select>
            </div>
            <div class="ws-f" style="flex: 1; min-width: 120px">
              <label class="ws-f__lbl">{{ isRecurring ? 'Monthly Instalment (₹)' : 'Deposit Amount (₹)' }}</label>
              <input
                class="ws-f__ctl ws-f__ctl--mono"
                type="number"
                min="0"
                [(ngModel)]="principal"
                placeholder="e.g. 100000"
              />
            </div>
          </div>
        </div>
      </div>

      <!-- Row 2: Term & Rate | Instructions -->
      <div class="ws-group-row ws-group-row--mt">
        <div class="ws-group">
          <span class="ws-caption">Interest & Tenure</span>
          <div class="ws-group__fields">
            <div class="ws-f" style="width: 110px">
              <label class="ws-f__lbl">Int. Rate (% p.a.)</label>
              <input class="ws-f__ctl" type="number" min="0" step="0.05" [(ngModel)]="interestRate" />
            </div>
            <div class="ws-f" style="width: 240px">
              <label class="ws-f__lbl">Tenure</label>
              <div class="fdrd-tenure-row">
                <input class="ws-f__ctl" type="number" min="0" [(ngModel)]="tenureYears" />
                <span>Yrs</span>
                <input class="ws-f__ctl" type="number" min="0" max="11" [(ngModel)]="tenureMonths" />
                <span>Mo</span>
                <input class="ws-f__ctl" type="number" min="0" max="30" [(ngModel)]="tenureDays" />
                <span>Days</span>
              </div>
            </div>
          </div>
        </div>

        <div class="ws-vdivider"></div>

        <div class="ws-group ws-group--flex">
          <span class="ws-caption">Nominee & Maturity Details</span>
          <div class="ws-group__fields">
            <div class="ws-f" style="flex: 1; min-width: 120px">
              <label class="ws-f__lbl">Interest Payout</label>
              <select class="ws-f__ctl" [(ngModel)]="interestPayout">
                <option *ngFor="let o of interestPayoutOptions" [value]="o">{{ o }}</option>
              </select>
            </div>
            <div class="ws-f" style="flex: 1; min-width: 130px">
              <label class="ws-f__lbl">Nominee Name (optional)</label>
              <input class="ws-f__ctl" type="text" [(ngModel)]="nomineeName" placeholder="Spouse / Child name" />
            </div>
            <div class="ws-f" style="flex: 1.2; min-width: 160px">
              <label class="ws-f__lbl">Maturity Instruction</label>
              <select class="ws-f__ctl" [(ngModel)]="maturityInstruction">
                <option *ngFor="let m of maturityInstructions" [value]="m">{{ m }}</option>
              </select>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- SUMMARY -->
    <div class="fdrd-summary">
      <div class="fdrd-stat">
        <div class="fdrd-stat-l">Principal</div>
        <div class="fdrd-stat-v">&#8377; {{ principal || 0 | number: '1.0-2' }}</div>
      </div>
      <div class="fdrd-stat">
        <div class="fdrd-stat-l">Tenure</div>
        <div class="fdrd-stat-v">{{ tenureYears }}y {{ tenureMonths }}m {{ tenureDays }}d</div>
      </div>
      <div class="fdrd-stat">
        <div class="fdrd-stat-l">Maturity Date</div>
        <div class="fdrd-stat-v">{{ maturityDate | date: 'dd-MM-yyyy' }}</div>
      </div>
      <div class="fdrd-stat fdrd-stat-good">
        <div class="fdrd-stat-l">Maturity Amount</div>
        <div class="fdrd-stat-v">&#8377; {{ maturityAmount | number: '1.2-2' }}</div>
      </div>
    </div>
  </div>

  <!-- FOOTER -->
  <div class="fdrd-foot">
    <div class="fdrd-foot-l">
      <fa-icon icon="info-circle"></fa-icon>&nbsp; Demo entry — quarterly-compounded interest, no real account is
      created.
    </div>
    <div class="fdrd-foot-actions">
      <button mat-stroked-button class="fdrd-btn-ghost" (click)="resetForm()">
        <fa-icon icon="undo"></fa-icon>&nbsp; Reset
      </button>
      <button mat-stroked-button class="fdrd-btn-save" [disabled]="!isValid" (click)="save()">
        <fa-icon icon="save"></fa-icon>&nbsp; Save
      </button>
    </div>
  </div>
</div>