cbsnexora/src/app/investment/investment-masters/investment-masters.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="pg">
  <header class="pg-head">
    <div>
      <div class="pg-eyebrow">TREASURY · INVESTMENT · MASTERS</div>
      <h1 class="pg-title">Investment Masters</h1>
      <p class="pg-sub">
        Bank/Party, Script, SubType, Broker, Control Parameter, LIEN Reason, Mutual Fund Product, SGL Bank and Script
        Market Detail masters.
      </p>
    </div>
    <div class="pg-toolbar">
      <button type="button" class="pg-btn pg-btn--ghost" [disabled]="generating" (click)="exportExcel()">
        {{ generating ? 'Exporting…' : 'Export to Excel' }}
      </button>
    </div>
  </header>

  <div class="cctr-tabs">
    <button
      type="button"
      class="pg-btn pg-btn--ghost"
      [class.pg-btn--active]="activeTab === 'party'"
      (click)="setTab('party')"
    >
      04 Bank / Party Master
    </button>
    <button
      type="button"
      class="pg-btn pg-btn--ghost"
      [class.pg-btn--active]="activeTab === 'script'"
      (click)="setTab('script')"
    >
      05 Script Master
    </button>
    <button
      type="button"
      class="pg-btn pg-btn--ghost"
      [class.pg-btn--active]="activeTab === 'subtype'"
      (click)="setTab('subtype')"
    >
      06 SubType Master
    </button>
    <button
      type="button"
      class="pg-btn pg-btn--ghost"
      [class.pg-btn--active]="activeTab === 'broker'"
      (click)="setTab('broker')"
    >
      07 Broker Master
    </button>
    <button
      type="button"
      class="pg-btn pg-btn--ghost"
      [class.pg-btn--active]="activeTab === 'control'"
      (click)="setTab('control')"
    >
      08 Control Parameter
    </button>
    <button
      type="button"
      class="pg-btn pg-btn--ghost"
      [class.pg-btn--active]="activeTab === 'dailyscript'"
      (click)="setTab('dailyscript')"
    >
      09 Daily Script Master
    </button>
    <button
      type="button"
      class="pg-btn pg-btn--ghost"
      [class.pg-btn--active]="activeTab === 'lien'"
      (click)="setTab('lien')"
    >
      10 LIEN Reason Master
    </button>
    <button
      type="button"
      class="pg-btn pg-btn--ghost"
      [class.pg-btn--active]="activeTab === 'mfproduct'"
      (click)="setTab('mfproduct')"
    >
      11 Mutual Fund Product Master
    </button>
    <button
      type="button"
      class="pg-btn pg-btn--ghost"
      [class.pg-btn--active]="activeTab === 'sglbank'"
      (click)="setTab('sglbank')"
    >
      12 SGL Bank Master
    </button>
    <button
      type="button"
      class="pg-btn pg-btn--ghost"
      [class.pg-btn--active]="activeTab === 'marketdetail'"
      (click)="setTab('marketdetail')"
    >
      13 Script Market Detail
    </button>
  </div>

  <!-- PARTY MASTER (layout follows the bank's existing CBS Bank / Party Master) -->
  @if (activeTab === 'party') {
    <div class="pg-card">
      <div class="pos-section-label">Bank / Party Master — Entry</div>
      <div class="inv-form-grid">
        <label class="inv-form-field">
          <span>* Bond Type</span>
          <select [(ngModel)]="partyForm.bondType">
            <option [ngValue]="undefined">-- Select --</option>
            @for (t of instrumentTypes; track t) {
              <option [value]="t">{{ t }}</option>
            }
          </select>
        </label>
        <label class="inv-form-field"
          ><span>* Party Code</span><input type="text" [value]="partyForm.partyCode || nextPartyCode" readonly
        /></label>
        <label class="inv-form-field"
          ><span>* Party Name</span><input type="text" [(ngModel)]="partyForm.partyName"
        /></label>
        <label class="inv-form-field"
          ><span>Address Line 1 (Building / Flat No.)</span
          ><input type="text" placeholder="e.g. Shop No. 12, Shanti Complex" [(ngModel)]="partyForm.address1"
        /></label>
        <label class="inv-form-field"
          ><span>Address Line 2 (Street / Area)</span
          ><input type="text" placeholder="e.g. MG Road, Near Bus Stand" [(ngModel)]="partyForm.address2"
        /></label>
        <label class="inv-form-field"
          ><span>Address Line 3 (Locality / Landmark)</span
          ><input type="text" placeholder="e.g. Arera Colony" [(ngModel)]="partyForm.address3"
        /></label>
        <label class="inv-form-field"><span>City</span><input type="text" [(ngModel)]="partyForm.city" /></label>
        <label class="inv-form-field"
          ><span>Pincode</span><input type="text" maxlength="6" [(ngModel)]="partyForm.pincode"
        /></label>
        <label class="inv-form-field"><span>Phone</span><input type="text" [(ngModel)]="partyForm.phone" /></label>
        <label class="inv-form-field"><span>Fax</span><input type="text" [(ngModel)]="partyForm.fax" /></label>
        <label class="inv-form-field">
          <span>Bank Type</span>
          <select [(ngModel)]="partyForm.bankType">
            <option [ngValue]="undefined">-- Select --</option>
            @for (b of bankTypeOptions; track b) {
              <option [value]="b">{{ b }}</option>
            }
          </select>
        </label>
        <label class="inv-form-field">
          <span>* GL A/c No.</span>
          <select [(ngModel)]="partyForm.glAccountId">
            <option [ngValue]="undefined">-- Select --</option>
            @for (g of investmentGlOptions; track g.id) {
              <option [ngValue]="g.id">{{ g.glCode }} — {{ g.name }}</option>
            }
          </select>
        </label>
        <label class="inv-form-field"><span>RBI Code</span><input type="text" [(ngModel)]="partyForm.rbiCode" /></label>
        <label class="inv-form-field"
          ><span>Limit (₹)</span><input type="number" min="0" [(ngModel)]="partyForm.limit"
        /></label>
        <label class="inv-form-field"><span>LEI No</span><input type="text" [(ngModel)]="partyForm.leiNo" /></label>
        <label class="inv-form-field">
          <span>Status</span>
          <select [(ngModel)]="partyForm.status">
            <option [ngValue]="undefined">ACTIVE</option>
            <option value="INACTIVE">INACTIVE</option>
          </select>
        </label>
      </div>
      <div class="pos-section-label">Counterparty's Bank Details</div>
      <div class="inv-form-grid">
        <label class="inv-form-field"
          ><span>Name of Bank</span><input type="text" [(ngModel)]="partyForm.cpBankName"
        /></label>
        <label class="inv-form-field"
          ><span>Name of Branch</span><input type="text" [(ngModel)]="partyForm.cpBranchName"
        /></label>
        <label class="inv-form-field"
          ><span>Account No.</span><input type="text" [(ngModel)]="partyForm.cpAccountNo"
        /></label>
        <label class="inv-form-field"
          ><span>IFSC</span><input type="text" maxlength="11" [(ngModel)]="partyForm.cpIfsc"
        /></label>
      </div>
      <div class="inv-form-actions">
        <label class="inv-form-field"
          ><span>Search Party Code</span><input type="text" placeholder="e.g. PTY-001" [(ngModel)]="partySearchCode"
        /></label>
        <button type="button" class="pg-btn pg-btn--primary" [disabled]="saving" (click)="saveParty()">Save</button>
        <button type="button" class="pg-btn pg-btn--ghost" (click)="searchParty()">Search</button>
        <button type="button" class="pg-btn pg-btn--ghost" (click)="cancelParty()">Cancel</button>
        <button type="button" class="pg-btn pg-btn--ghost" (click)="dropParty()">Drop</button>
        <button type="button" class="pg-btn pg-btn--ghost" (click)="cancelParty()">Exit</button>
      </div>
      <table class="pg-table">
        <thead>
          <tr>
            <th>Party Code</th>
            <th>Bond Type</th>
            <th>Party Name</th>
            <th>City</th>
            <th>Bank Type</th>
            <th>GL A/c</th>
            <th class="num">Limit</th>
            <th>Counterparty Bank / IFSC</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @for (p of parties; track p.partyCode) {
            <tr>
              <td>
                <span class="pg-chip">{{ p.partyCode }}</span>
              </td>
              <td>{{ p.bondType || '—' }}</td>
              <td>{{ p.partyName }}</td>
              <td>{{ p.city || '—' }}</td>
              <td>{{ p.bankType || '—' }}</td>
              <td>{{ p.glCode ? p.glCode + ' — ' + glName(p.glCode) : '—' }}</td>
              <td class="num">{{ p.limit != null ? '₹' + (p.limit | number: '1.0-0') : '—' }}</td>
              <td>{{ p.cpBankName ? p.cpBankName + (p.cpIfsc ? ' / ' + p.cpIfsc : '') : '—' }}</td>
              <td>{{ p.status ?? 'ACTIVE' }}</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }

  <!-- SCRIPT MASTER (layout follows the bank's existing CBS Script Master) -->
  @if (activeTab === 'script') {
    <div class="pg-card">
      <div class="pos-section-label">Script Master — Entry</div>
      <div class="inv-form-grid">
        <label class="inv-form-field">
          <span>* Bond Type</span>
          <select [(ngModel)]="scriptForm.instrumentType" [disabled]="!!scriptForm.scriptCode">
            <option [ngValue]="undefined">-- Select --</option>
            @for (t of instrumentTypes; track t) {
              <option [value]="t">{{ t }}</option>
            }
          </select>
        </label>
        <label class="inv-form-field">
          <span>SLR</span>
          <select [(ngModel)]="scriptForm.slrType">
            <option [ngValue]="undefined">-- Select --</option>
            @for (o of slrTypeOptions; track o.value) {
              <option [value]="o.value">{{ o.label }}</option>
            }
          </select>
        </label>
        <label class="inv-form-field"
          ><span>* Script Code</span><input type="text" [value]="scriptForm.scriptCode || nextScriptCode" readonly
        /></label>
        <label class="inv-form-field"
          ><span>* Script Desc</span
          ><input type="text" placeholder="e.g. 7.50%GOI2034" [(ngModel)]="scriptForm.scriptName"
        /></label>
        <label class="inv-form-field">
          <span>* GL A/c No.</span>
          <select [(ngModel)]="scriptForm.glAccountId">
            <option [ngValue]="undefined">-- Select --</option>
            @for (g of investmentGlOptions; track g.id) {
              <option [ngValue]="g.id">{{ g.glCode }} — {{ g.name }}</option>
            }
          </select>
        </label>
        <label class="inv-form-field"
          ><span>{{ scriptIsDebtSecurity ? '* ' : '' }}ISIN</span><input type="text" [(ngModel)]="scriptForm.isin"
        /></label>
        <label class="inv-form-field"
          ><span>{{ scriptIsDebtSecurity ? '* ' : '' }}Int Rate %</span
          ><input type="number" step="0.01" min="0" [(ngModel)]="scriptForm.couponRate"
        /></label>
        <label class="inv-form-field"
          ><span>{{ scriptIsDebtSecurity ? '* ' : '' }}Issue Date</span
          ><mifosx-date-ddmmyyyy [(ngModel)]="scriptForm.issueDate"></mifosx-date-ddmmyyyy
        ></label>
        <label class="inv-form-field"
          ><span>Redum / Mat Date</span
          ><mifosx-date-ddmmyyyy [(ngModel)]="scriptForm.maturityDate"></mifosx-date-ddmmyyyy
        ></label>
        <label class="inv-form-field"
          ><span>Period (Year)</span><input type="text" [value]="scriptPeriod.years" readonly
        /></label>
        <label class="inv-form-field"
          ><span>Period (Month)</span><input type="text" [value]="scriptPeriod.months" readonly
        /></label>
        <label class="inv-form-field"
          ><span>Period (Days)</span><input type="text" [value]="scriptPeriod.days" readonly
        /></label>
      </div>
      <div class="pos-section-label">Company Details (Bond / Mutual Fund)</div>
      <div class="inv-form-grid">
        <label class="inv-form-field"
          ><span>Company Name</span><input type="text" [(ngModel)]="scriptForm.companyName"
        /></label>
        <label class="inv-form-field"
          ><span>Address Line 1 (Building / Flat No.)</span
          ><input type="text" placeholder="e.g. Shop No. 12, Shanti Complex" [(ngModel)]="scriptForm.address1"
        /></label>
        <label class="inv-form-field"
          ><span>Address Line 2 (Street / Area)</span
          ><input type="text" placeholder="e.g. MG Road, Near Bus Stand" [(ngModel)]="scriptForm.address2"
        /></label>
        <label class="inv-form-field"
          ><span>Address Line 3 (Locality / Landmark)</span
          ><input type="text" placeholder="e.g. Arera Colony" [(ngModel)]="scriptForm.address3"
        /></label>
        <label class="inv-form-field"><span>City</span><input type="text" [(ngModel)]="scriptForm.city" /></label>
        <label class="inv-form-field"
          ><span>Pincode</span><input type="text" maxlength="6" [(ngModel)]="scriptForm.pincode"
        /></label>
        <label class="inv-form-field"><span>Phone</span><input type="text" [(ngModel)]="scriptForm.phone" /></label>
        <label class="inv-form-field"><span>Fax</span><input type="text" [(ngModel)]="scriptForm.fax" /></label>
        <label class="inv-form-field"
          ><span>Corp. Code</span><input type="text" [(ngModel)]="scriptForm.corpCode"
        /></label>
      </div>
      <div class="inv-form-actions">
        <label class="inv-form-field"
          ><span>Search Script Code</span><input type="text" placeholder="e.g. G00001" [(ngModel)]="scriptSearchCode"
        /></label>
        <button type="button" class="pg-btn pg-btn--primary" [disabled]="saving" (click)="saveScript()">Save</button>
        <button type="button" class="pg-btn pg-btn--ghost" (click)="searchScript()">Search</button>
        <button type="button" class="pg-btn pg-btn--ghost" (click)="cancelScript()">Cancel</button>
        <button type="button" class="pg-btn pg-btn--ghost" (click)="cancelScript()">Exit</button>
      </div>
      <table class="pg-table">
        <thead>
          <tr>
            <th>Script Code</th>
            <th>Bond Type</th>
            <th>SLR</th>
            <th>Script Desc</th>
            <th>GL A/c</th>
            <th>ISIN</th>
            <th class="num">Int Rate %</th>
            <th>Issue Date</th>
            <th>Maturity</th>
          </tr>
        </thead>
        <tbody>
          @for (s of scripts; track s.scriptCode) {
            <tr>
              <td>
                <span class="pg-chip">{{ s.scriptCode }}</span>
              </td>
              <td>{{ s.instrumentType }}</td>
              <td>{{ s.slrType || '—' }}</td>
              <td>{{ s.scriptName }}</td>
              <td>{{ s.glCode || '—' }}</td>
              <td>{{ s.isin || '—' }}</td>
              <td class="num">{{ s.couponRate ?? '—' }}</td>
              <td>{{ s.issueDate || '—' }}</td>
              <td>{{ s.maturityDate || '—' }}</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }

  <!-- SUBTYPE MASTER -->
  @if (activeTab === 'subtype') {
    <div class="pg-card">
      <div class="pos-section-label">Add Sub Type</div>
      <div class="inv-form-grid">
        <label class="inv-form-field"
          ><span>Sub Type Name *</span><input type="text" [(ngModel)]="newSubType.subTypeName"
        /></label>
        <label class="inv-form-field">
          <span>Instrument Type *</span>
          <select [(ngModel)]="newSubType.instrumentType">
            <option [ngValue]="undefined">-- Select --</option>
            @for (t of instrumentTypes; track t) {
              <option [value]="t">{{ t }}</option>
            }
          </select>
        </label>
      </div>
      <div class="inv-form-actions">
        <button type="button" class="pg-btn pg-btn--primary" (click)="addSubType()">Save</button>
      </div>
      <table class="pg-table">
        <thead>
          <tr>
            <th>Code</th>
            <th>Sub Type</th>
            <th>Instrument</th>
          </tr>
        </thead>
        <tbody>
          @for (s of subTypes; track s.subTypeCode + s.subTypeName) {
            <tr>
              <td>
                <span class="pg-chip">{{ s.subTypeCode }}</span>
              </td>
              <td>{{ s.subTypeName }}</td>
              <td>{{ s.instrumentType }}</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }

  <!-- BROKER MASTER -->
  @if (activeTab === 'broker') {
    <div class="pg-card">
      <div class="pos-section-label">Add Broker</div>
      <div class="inv-form-grid">
        <label class="inv-form-field"
          ><span>Broker Name *</span><input type="text" [(ngModel)]="newBroker.brokerName"
        /></label>
        <label class="inv-form-field"
          ><span>Contact No</span><input type="text" [(ngModel)]="newBroker.contactNo"
        /></label>
        <label class="inv-form-field"
          ><span>Empanelled On</span><mifosx-date-ddmmyyyy [(ngModel)]="newBroker.empanelledOn"></mifosx-date-ddmmyyyy
        ></label>
      </div>
      <div class="inv-form-actions">
        <button type="button" class="pg-btn pg-btn--primary" (click)="addBroker()">Save</button>
      </div>
      <table class="pg-table">
        <thead>
          <tr>
            <th>Broker Code</th>
            <th>Broker Name</th>
            <th>Contact</th>
            <th>Empanelled On</th>
            <th>Status</th>
          </tr>
        </thead>
        <tbody>
          @for (b of brokers; track b.brokerCode) {
            <tr>
              <td>
                <span class="pg-chip">{{ b.brokerCode }}</span>
              </td>
              <td>{{ b.brokerName }}</td>
              <td>{{ b.contactNo }}</td>
              <td>{{ b.empanelledOn }}</td>
              <td>
                <span class="inv-badge inv-badge--active">{{ b.status }}</span>
              </td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }

  <!-- CONTROL PARAMETER -->
  @if (activeTab === 'control') {
    <div class="pg-card">
      <div class="pos-section-label">Add Control Parameter</div>
      <div class="inv-form-grid">
        <label class="inv-form-field"
          ><span>Parameter Name *</span><input type="text" [(ngModel)]="newControlParam.paramName"
        /></label>
        <label class="inv-form-field"
          ><span>Value *</span><input type="text" [(ngModel)]="newControlParam.paramValue"
        /></label>
        <label class="inv-form-field"
          ><span>Description</span><input type="text" [(ngModel)]="newControlParam.description"
        /></label>
      </div>
      <div class="inv-form-actions">
        <button type="button" class="pg-btn pg-btn--primary" (click)="addControlParam()">Save</button>
      </div>
      <table class="pg-table">
        <thead>
          <tr>
            <th>Parameter</th>
            <th>Value</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          @for (c of controlParams; track c.paramName) {
            <tr>
              <td>
                <span class="pg-chip">{{ c.paramName }}</span>
              </td>
              <td class="num">{{ c.paramValue }}</td>
              <td>{{ c.description }}</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }

  <!-- DAILY SCRIPT MASTER -->
  @if (activeTab === 'dailyscript') {
    <div class="pg-card">
      <div class="pos-section-label">Add Daily Script Rate</div>
      <div class="inv-form-grid">
        <label class="inv-form-field"
          ><span>Rate Date *</span><mifosx-date-ddmmyyyy [(ngModel)]="newDailyRate.rateDate"></mifosx-date-ddmmyyyy
        ></label>
        <label class="inv-form-field">
          <span>Script Code *</span>
          <select [(ngModel)]="newDailyRate.scriptCode">
            <option [ngValue]="undefined">-- Select --</option>
            @for (s of scripts; track s.scriptCode) {
              <option [value]="s.scriptCode">{{ s.scriptCode }} — {{ s.scriptName }}</option>
            }
          </select>
        </label>
        <label class="inv-form-field"
          ><span>Open Rate</span><input type="number" [(ngModel)]="newDailyRate.openRate" step="0.01"
        /></label>
        <label class="inv-form-field"
          ><span>Close Rate *</span><input type="number" [(ngModel)]="newDailyRate.closeRate" step="0.01"
        /></label>
        <label class="inv-form-field"
          ><span>High Rate</span><input type="number" [(ngModel)]="newDailyRate.highRate" step="0.01"
        /></label>
        <label class="inv-form-field"
          ><span>Low Rate</span><input type="number" [(ngModel)]="newDailyRate.lowRate" step="0.01"
        /></label>
      </div>
      <div class="inv-form-actions">
        <button type="button" class="pg-btn pg-btn--primary" (click)="addDailyRate()">Save</button>
      </div>
      <table class="pg-table">
        <thead>
          <tr>
            <th>Rate Date</th>
            <th>Script Code</th>
            <th>Script Name</th>
            <th class="num">Open</th>
            <th class="num">High</th>
            <th class="num">Low</th>
            <th class="num">Close</th>
          </tr>
        </thead>
        <tbody>
          @for (r of dailyScriptRates; track r.rateDate + r.scriptCode) {
            <tr>
              <td>{{ r.rateDate }}</td>
              <td>
                <span class="pg-chip">{{ r.scriptCode }}</span>
              </td>
              <td>{{ r.scriptName }}</td>
              <td class="num">{{ r.openRate | number: '1.2-2' }}</td>
              <td class="num">{{ r.highRate | number: '1.2-2' }}</td>
              <td class="num">{{ r.lowRate | number: '1.2-2' }}</td>
              <td class="num">{{ r.closeRate | number: '1.2-2' }}</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }

  <!-- LIEN REASON MASTER -->
  @if (activeTab === 'lien') {
    <div class="pg-card">
      <div class="pos-section-label">Add LIEN Reason</div>
      <div class="inv-form-grid">
        <label class="inv-form-field"
          ><span>Reason Description *</span><input type="text" [(ngModel)]="newLienReason.reasonDescription"
        /></label>
      </div>
      <div class="inv-form-actions">
        <button type="button" class="pg-btn pg-btn--primary" (click)="addLienReason()">Save</button>
      </div>
      <table class="pg-table">
        <thead>
          <tr>
            <th>Reason Code</th>
            <th>Description</th>
          </tr>
        </thead>
        <tbody>
          @for (l of lienReasons; track l.reasonCode) {
            <tr>
              <td>
                <span class="pg-chip">{{ l.reasonCode }}</span>
              </td>
              <td>{{ l.reasonDescription }}</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }

  <!-- MUTUAL FUND PRODUCT MASTER -->
  @if (activeTab === 'mfproduct') {
    <div class="pg-card">
      <div class="pos-section-label">Add Mutual Fund Product</div>
      <div class="inv-form-grid">
        <label class="inv-form-field"
          ><span>Product Name *</span><input type="text" [(ngModel)]="newMfProduct.productName"
        /></label>
        <label class="inv-form-field"
          ><span>AMC Name *</span><input type="text" [(ngModel)]="newMfProduct.amcName"
        /></label>
        <label class="inv-form-field"
          ><span>Category</span><input type="text" [(ngModel)]="newMfProduct.category"
        /></label>
        <label class="inv-form-field">
          <span>Risk Level</span>
          <select [(ngModel)]="newMfProduct.riskLevel">
            <option value="LOW">LOW</option>
            <option value="MODERATE">MODERATE</option>
            <option value="HIGH">HIGH</option>
          </select>
        </label>
      </div>
      <div class="inv-form-actions">
        <button type="button" class="pg-btn pg-btn--primary" (click)="addMfProduct()">Save</button>
      </div>
      <table class="pg-table">
        <thead>
          <tr>
            <th>Product Code</th>
            <th>Product Name</th>
            <th>AMC</th>
            <th>Category</th>
            <th>Risk</th>
          </tr>
        </thead>
        <tbody>
          @for (m of mfProducts; track m.productCode) {
            <tr>
              <td>
                <span class="pg-chip">{{ m.productCode }}</span>
              </td>
              <td>{{ m.productName }}</td>
              <td>{{ m.amcName }}</td>
              <td>{{ m.category }}</td>
              <td>{{ m.riskLevel }}</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }

  <!-- SGL BANK MASTER -->
  @if (activeTab === 'sglbank') {
    <div class="pg-card">
      <div class="pos-section-label">Add SGL Bank</div>
      <div class="inv-form-grid">
        <label class="inv-form-field"
          ><span>Bank Name *</span><input type="text" [(ngModel)]="newSglBank.bankName"
        /></label>
        <label class="inv-form-field"><span>Branch</span><input type="text" [(ngModel)]="newSglBank.branch" /></label>
      </div>
      <div class="inv-form-actions">
        <button type="button" class="pg-btn pg-btn--primary" (click)="addSglBank()">Save</button>
      </div>
      <table class="pg-table">
        <thead>
          <tr>
            <th>SGL Code</th>
            <th>Bank Name</th>
            <th>Branch</th>
          </tr>
        </thead>
        <tbody>
          @for (s of sglBanks; track s.sglCode) {
            <tr>
              <td>
                <span class="pg-chip">{{ s.sglCode }}</span>
              </td>
              <td>{{ s.bankName }}</td>
              <td>{{ s.branch }}</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }

  <!-- SCRIPT MARKET DETAIL (also covers "09 Daily Script Master") -->
  @if (activeTab === 'marketdetail') {
    <div class="pg-card">
      <div class="pos-section-label">Script Market Detail (Daily Script Rates)</div>
      <table class="pg-table">
        <thead>
          <tr>
            <th>Script Code</th>
            <th class="num">Market Price</th>
            <th>As On</th>
            <th class="num">YTM (%)</th>
          </tr>
        </thead>
        <tbody>
          @for (m of marketDetails; track m.scriptCode) {
            <tr>
              <td>
                <span class="pg-chip">{{ m.scriptCode }}</span>
              </td>
              <td class="num">₹{{ m.marketPrice | number: '1.2-2' }}</td>
              <td>{{ m.asOnDate }}</td>
              <td class="num">{{ m.ytm }}%</td>
            </tr>
          }
        </tbody>
      </table>
    </div>
  }
</div>

<div class="inv-toast" [class.show]="toastVisible">{{ toastMsg }}</div>