911 lines
33 KiB
TypeScript
911 lines
33 KiB
TypeScript
/**
|
|
* 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/.
|
|
*/
|
|
|
|
import { Component, OnInit, inject } from '@angular/core';
|
|
import { CommonModule } from '@angular/common';
|
|
import { FormsModule, ReactiveFormsModule, FormBuilder, FormGroup, FormArray, Validators } from '@angular/forms';
|
|
import { MatDialogModule, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
|
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
import { MatInputModule } from '@angular/material/input';
|
|
import { MatButtonModule } from '@angular/material/button';
|
|
import { MatIconModule } from '@angular/material/icon';
|
|
|
|
export interface CashierIssueDdDialogData {
|
|
leaflet: any;
|
|
branchName: string;
|
|
sponsorBankName: string;
|
|
faceValue: number;
|
|
chargesAmount: number;
|
|
gstPercentage: number;
|
|
gstAmount: number;
|
|
totalCashPayable: number;
|
|
/**
|
|
* How the draft is being paid for. Cash is a walk-in purchaser the bank may know nothing about,
|
|
* so their name, address and Aadhaar have to be captured here. An account debit is a member whose
|
|
* account is already on screen — those fields are not asked for, and must not be sent, because
|
|
* the identity is the account holder's rather than a walk-in's.
|
|
*/
|
|
paymentMethod?: 'CASH' | 'ACCOUNT_DEBIT';
|
|
/** The account being debited, shown so the clerk can see what is funding the draft. */
|
|
accountNo?: string;
|
|
/** The account holder, for the same reason. */
|
|
accountHolderName?: string;
|
|
/**
|
|
* How many drafts this slip raises. Absent or 1 is the ordinary single draft and the dialog is
|
|
* unchanged; 2 or more turns it into a slip, asking for a face value, charge and beneficiary per
|
|
* draft and reporting the combined total the account will be debited for.
|
|
*/
|
|
ddCount?: number;
|
|
/**
|
|
* Whether the funding account is a GL account rather than a member's. Only affects wording: a GL
|
|
* account has no passbook, so it is not promised one.
|
|
*/
|
|
glFunded?: boolean;
|
|
/**
|
|
* The leaflets provisionally shown against each line of a slip.
|
|
*
|
|
* Only ever indicative. The server allocates the real numbers inside the locked transaction that
|
|
* submits the slip, so what is shown here is the next-available run at the moment the dialog was
|
|
* opened — accurate unless another clerk submits first, which is precisely why the numbers cannot
|
|
* be promised until submit returns them.
|
|
*/
|
|
previewDdNumbers?: string[];
|
|
}
|
|
|
|
/** One captured draft on a multi-DD slip. */
|
|
export interface DdSlipLineResult {
|
|
beneficiaryName: string;
|
|
payableAtBranch: string;
|
|
payableAtCity: string;
|
|
faceValue: number;
|
|
chargesAmount: number;
|
|
}
|
|
|
|
@Component({
|
|
selector: 'mifosx-cashier-issue-dd-dialog',
|
|
standalone: true,
|
|
imports: [
|
|
CommonModule,
|
|
FormsModule,
|
|
ReactiveFormsModule,
|
|
MatDialogModule,
|
|
MatFormFieldModule,
|
|
MatInputModule,
|
|
MatButtonModule,
|
|
MatIconModule
|
|
],
|
|
template: `
|
|
<div class="dd-dialog-shell">
|
|
<div class="dd-dialog-header">
|
|
<div class="dd-dialog-header__title">
|
|
<mat-icon class="dd-icon">receipt_long</mat-icon>
|
|
<div>
|
|
<h2>
|
|
@if (isSlip) {
|
|
Multi-DD Slip · {{ lineCount }} Demand Drafts
|
|
} @else {
|
|
{{ isAccountDebit ? 'Account-Debit Demand Draft (DD)' : 'Walk-in Cash Demand Draft (DD)' }}
|
|
}
|
|
</h2>
|
|
<p>
|
|
@if (isSlip) {
|
|
One debit funds all {{ lineCount }} drafts · Enter each draft's beneficiary and amount
|
|
} @else {
|
|
Next available DD leaflet auto-selected ·
|
|
{{ isAccountDebit ? 'Enter beneficiary details' : 'Enter purchaser & beneficiary details' }}
|
|
}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button mat-icon-button type="button" (click)="onClose()" class="close-btn">
|
|
<mat-icon>close</mat-icon>
|
|
</button>
|
|
</div>
|
|
|
|
<mat-dialog-content class="dd-dialog-body">
|
|
<!--
|
|
Slip running total.
|
|
|
|
A slip's figures are not known until every line is typed — different drafts carry different
|
|
face values and different charges — so the total the account will be debited for is built
|
|
up here as the clerk works, rather than shown as a fixed figure up front. Answering "what
|
|
is this going to cost my member" without it would mean adding the lines by hand.
|
|
-->
|
|
@if (isSlip) {
|
|
<div class="dd-summary-card">
|
|
<div class="summary-col">
|
|
<span class="label">Drafts On This Slip</span>
|
|
<strong class="dd-number-highlight">{{ lineCount }}</strong>
|
|
<span class="sublabel">{{ data.sponsorBankName || 'Sponsor Bank' }} · {{ data.branchName }}</span>
|
|
</div>
|
|
<div class="summary-divider"></div>
|
|
<div class="summary-col">
|
|
<span class="label">Total Face Value</span>
|
|
<strong class="amount">₹{{ slipFaceValue | number: '1.2-2' }}</strong>
|
|
<span class="sublabel">+ Charges ₹{{ slipCharges | number: '1.2-2' }}</span>
|
|
</div>
|
|
<div class="summary-divider"></div>
|
|
<div class="summary-col">
|
|
<span class="label">GST ({{ data.gstPercentage }}%)</span>
|
|
<strong class="amount">₹{{ slipGst | number: '1.2-2' }}</strong>
|
|
<span class="sublabel">on charges only</span>
|
|
</div>
|
|
<div class="summary-divider"></div>
|
|
<div class="summary-col highlight-col">
|
|
<span class="label">Total To Debit</span>
|
|
<strong class="total-amount">₹{{ slipTotal | number: '1.2-2' }}</strong>
|
|
<span class="sublabel">{{ data.accountNo || 'Account' }} · one debit</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!--
|
|
Said plainly because the numbers on screen are the one thing in this dialog the clerk
|
|
cannot rely on. They are the next-available run as it stood when the dialog opened; the
|
|
binding allocation happens inside the submit transaction, so a slip filed after another
|
|
clerk's gets the following numbers instead.
|
|
-->
|
|
<div class="dd-preview-note">
|
|
<mat-icon>info</mat-icon>
|
|
<div>
|
|
DD numbers below are <strong>provisional</strong>. The final numbers are allocated when the slip is
|
|
submitted and will be confirmed on the receipt.
|
|
</div>
|
|
</div>
|
|
} @else {
|
|
<!-- Draft & Financials Summary Card -->
|
|
<div class="dd-summary-card">
|
|
<!-- The number the customer will actually see printed on the instrument. "Auto-Selected
|
|
Leaflet" named the stock item rather than the draft, so it was not obvious that this
|
|
is the DD number being issued. -->
|
|
<div class="summary-col">
|
|
<span class="label">DD Number Being Issued</span>
|
|
<strong class="dd-number-highlight">{{ data.leaflet.ddNumber }}</strong>
|
|
<span class="sublabel">{{ data.sponsorBankName || 'Sponsor Bank' }} · {{ data.branchName }}</span>
|
|
</div>
|
|
<div class="summary-divider"></div>
|
|
<div class="summary-col">
|
|
<span class="label">Face Value</span>
|
|
<strong class="amount">₹{{ data.faceValue | number: '1.2-2' }}</strong>
|
|
<span class="sublabel">+ Charges ₹{{ data.chargesAmount | number: '1.2-2' }}</span>
|
|
</div>
|
|
<div class="summary-divider"></div>
|
|
<div class="summary-col">
|
|
<span class="label">GST ({{ data.gstPercentage }}%)</span>
|
|
<strong class="amount">₹{{ data.gstAmount | number: '1.2-2' }}</strong>
|
|
<span class="sublabel">on charges only</span>
|
|
</div>
|
|
<div class="summary-divider"></div>
|
|
<div class="summary-col highlight-col">
|
|
<span class="label">{{ isAccountDebit ? 'Total Debited' : 'Total Cash Collected' }}</span>
|
|
<strong class="total-amount">₹{{ data.totalCashPayable | number: '1.2-2' }}</strong>
|
|
<span class="sublabel">
|
|
@if (isAccountDebit) {
|
|
{{ data.accountNo || 'Account' }}
|
|
} @else {
|
|
Denominations verified
|
|
}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!--
|
|
The account funding the draft, stated before the form.
|
|
|
|
A clerk reaching this dialog has an account loaded on the workstation behind it, and the
|
|
debit is irreversible once a checker approves. Naming the account and its holder here is
|
|
what makes a wrong account visible while it can still be cancelled.
|
|
-->
|
|
@if (isAccountDebit) {
|
|
<div class="dd-funding-note">
|
|
<mat-icon>account_balance_wallet</mat-icon>
|
|
<div>
|
|
<strong>Debiting {{ data.accountNo }}</strong>
|
|
@if (data.accountHolderName) {
|
|
· {{ data.accountHolderName }}
|
|
}
|
|
<div class="dd-funding-sub">
|
|
@if (isSlip) {
|
|
₹{{ slipTotal | number: '1.2-2' }} will be debited from this account as a
|
|
<strong>single transaction</strong> covering all {{ lineCount }} drafts, when a checker approves the
|
|
slip —
|
|
<!-- A GL account has no passbook, so the reassurance a member gets is phrased for
|
|
the ledger instead of promising a statement line that does not exist. -->
|
|
@if (isGlFunded) {
|
|
one journal entry against this GL account, not {{ lineCount }}.
|
|
} @else {
|
|
the member's passbook shows one entry, not {{ lineCount }}.
|
|
}
|
|
} @else {
|
|
₹{{ data.totalCashPayable | number: '1.2-2' }} will be debited from this account when a checker
|
|
approves. No cash is taken at the counter.
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
}
|
|
|
|
<!--
|
|
A slip's drafts, one card each.
|
|
|
|
Face value and charge sit on the line rather than on the slip because that is how the bank
|
|
actually uses this: three drafts to three institutions are three different amounts, and the
|
|
charge is levied per draft. The server stores and posts them per line for the same reason.
|
|
-->
|
|
@if (isSlip) {
|
|
<form [formGroup]="slipForm" class="dd-form">
|
|
<div formArrayName="lines">
|
|
@for (lineCtrl of slipLines.controls; track $index) {
|
|
<div class="dd-line-card" [formGroupName]="$index">
|
|
<div class="dd-line-head">
|
|
<span class="dd-line-badge">DD {{ $index + 1 }} of {{ lineCount }}</span>
|
|
@if (previewNumberAt($index)) {
|
|
<span class="dd-line-number">No. {{ previewNumberAt($index) }} <em>(provisional)</em></span>
|
|
}
|
|
<span class="dd-line-total"> Debit ₹{{ lineTotalAt($index) | number: '1.2-2' }} </span>
|
|
</div>
|
|
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Beneficiary Name (In Favour Of) *</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="beneficiaryName"
|
|
placeholder="e.g. UNIVERSITY OF MUMBAI"
|
|
maxlength="120"
|
|
style="text-transform: uppercase;"
|
|
/>
|
|
<mat-error *ngIf="lineCtrl.get('beneficiaryName')?.hasError('required')"
|
|
>Beneficiary name is required</mat-error
|
|
>
|
|
<mat-error *ngIf="lineCtrl.get('beneficiaryName')?.hasError('maxlength')"
|
|
>Max 120 characters</mat-error
|
|
>
|
|
</mat-form-field>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="form-field-flex">
|
|
<mat-label>Payable At - Branch *</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="payableAtBranch"
|
|
placeholder="e.g. FORT BRANCH"
|
|
maxlength="150"
|
|
style="text-transform: uppercase;"
|
|
/>
|
|
<mat-error *ngIf="lineCtrl.get('payableAtBranch')?.hasError('required')"
|
|
>Payable Branch is required</mat-error
|
|
>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="form-field-flex">
|
|
<mat-label>Payable At - City *</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="payableAtCity"
|
|
placeholder="e.g. MUMBAI"
|
|
maxlength="100"
|
|
style="text-transform: uppercase;"
|
|
/>
|
|
<mat-error *ngIf="lineCtrl.get('payableAtCity')?.hasError('required')"
|
|
>Payable City is required</mat-error
|
|
>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="form-field-flex">
|
|
<mat-label>Face Value *</mat-label>
|
|
<input matInput type="number" formControlName="faceValue" placeholder="0.00" />
|
|
<span matPrefix>₹ </span>
|
|
<mat-error *ngIf="lineCtrl.get('faceValue')?.hasError('required')"
|
|
>Face value is required</mat-error
|
|
>
|
|
<mat-error *ngIf="lineCtrl.get('faceValue')?.hasError('min')"
|
|
>Face value must be greater than zero</mat-error
|
|
>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="form-field-flex">
|
|
<mat-label>Charges</mat-label>
|
|
<input matInput type="number" formControlName="chargesAmount" placeholder="0.00" />
|
|
<span matPrefix>₹ </span>
|
|
<mat-hint>GST ₹{{ lineGstAt($index) | number: '1.2-2' }} at {{ data.gstPercentage }}%</mat-hint>
|
|
<mat-error *ngIf="lineCtrl.get('chargesAmount')?.hasError('min')"
|
|
>Charges cannot be negative</mat-error
|
|
>
|
|
</mat-form-field>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</form>
|
|
} @else {
|
|
<form [formGroup]="form" class="dd-form">
|
|
<!--
|
|
Purchaser identity is asked for only when the bank has none: a walk-in paying cash. On an
|
|
account debit the purchaser IS the account holder, already identified and KYC'd, and
|
|
re-capturing a name and Aadhaar here would invite a mismatch against the account on record.
|
|
-->
|
|
@if (!isAccountDebit) {
|
|
<div class="form-section-title">Walk-in Purchaser Details</div>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="form-field-flex">
|
|
<mat-label>Walk-in Purchaser Name *</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="walkinPurchaserName"
|
|
placeholder="e.g. RAMESH CHANDRA"
|
|
style="text-transform: uppercase;"
|
|
/>
|
|
<mat-error *ngIf="form.get('walkinPurchaserName')?.hasError('required')"
|
|
>Purchaser name is required</mat-error
|
|
>
|
|
<mat-error *ngIf="form.get('walkinPurchaserName')?.hasError('minlength')"
|
|
>Must be at least 3 characters</mat-error
|
|
>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="form-field-flex">
|
|
<mat-label>12-Digit Aadhaar Number *</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="walkinPurchaserAadhaar"
|
|
placeholder="12-digit Aadhaar"
|
|
maxlength="12"
|
|
/>
|
|
<mat-hint>Masked to last 4 digits before storage</mat-hint>
|
|
<mat-error *ngIf="form.get('walkinPurchaserAadhaar')?.hasError('required')"
|
|
>Aadhaar number is required</mat-error
|
|
>
|
|
<mat-error *ngIf="form.get('walkinPurchaserAadhaar')?.hasError('pattern')"
|
|
>Must be exactly 12 numeric digits</mat-error
|
|
>
|
|
</mat-form-field>
|
|
</div>
|
|
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Purchaser Address / Location *</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="walkinPurchaserAddress"
|
|
placeholder="e.g. 14, SECTOR 5, MAIN ROAD, MUMBAI"
|
|
style="text-transform: uppercase;"
|
|
/>
|
|
<mat-error *ngIf="form.get('walkinPurchaserAddress')?.hasError('required')"
|
|
>Address is required</mat-error
|
|
>
|
|
</mat-form-field>
|
|
}
|
|
|
|
<!-- Beneficiary Section -->
|
|
<div class="form-section-title">Beneficiary & Payment Details</div>
|
|
|
|
<mat-form-field appearance="outline" class="full-width">
|
|
<mat-label>Beneficiary Name (In Favour Of) *</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="beneficiaryName"
|
|
placeholder="e.g. UNIVERSITY OF MUMBAI"
|
|
maxlength="120"
|
|
style="text-transform: uppercase;"
|
|
/>
|
|
<mat-error *ngIf="form.get('beneficiaryName')?.hasError('required')"
|
|
>Beneficiary name is required</mat-error
|
|
>
|
|
<mat-error *ngIf="form.get('beneficiaryName')?.hasError('maxlength')">Max 120 characters</mat-error>
|
|
</mat-form-field>
|
|
|
|
<div class="form-row">
|
|
<mat-form-field appearance="outline" class="form-field-flex">
|
|
<mat-label>Payable At - Branch *</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="payableAtBranch"
|
|
placeholder="e.g. FORT BRANCH"
|
|
maxlength="150"
|
|
style="text-transform: uppercase;"
|
|
/>
|
|
<mat-error *ngIf="form.get('payableAtBranch')?.hasError('required')"
|
|
>Payable Branch is required</mat-error
|
|
>
|
|
</mat-form-field>
|
|
|
|
<mat-form-field appearance="outline" class="form-field-flex">
|
|
<mat-label>Payable At - City *</mat-label>
|
|
<input
|
|
matInput
|
|
formControlName="payableAtCity"
|
|
placeholder="e.g. MUMBAI"
|
|
maxlength="100"
|
|
style="text-transform: uppercase;"
|
|
/>
|
|
<mat-error *ngIf="form.get('payableAtCity')?.hasError('required')">Payable City is required</mat-error>
|
|
</mat-form-field>
|
|
</div>
|
|
</form>
|
|
}
|
|
</mat-dialog-content>
|
|
|
|
<mat-dialog-actions class="dd-dialog-actions" align="end">
|
|
@if (isSlip) {
|
|
<span class="dd-actions-total">
|
|
{{ lineCount }} drafts · <strong>₹{{ slipTotal | number: '1.2-2' }}</strong> to debit
|
|
</span>
|
|
}
|
|
<button mat-button type="button" (click)="onClose()">Cancel</button>
|
|
<button mat-flat-button color="primary" [disabled]="activeForm.invalid" (click)="onSubmit()">
|
|
{{ isSlip ? 'Save Slip Details' : 'Save DD Details' }}
|
|
</button>
|
|
</mat-dialog-actions>
|
|
</div>
|
|
`,
|
|
styles: [
|
|
`
|
|
.dd-dialog-shell {
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-height: 90vh;
|
|
}
|
|
.dd-dialog-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 16px 24px;
|
|
background: #0f172a;
|
|
color: #ffffff;
|
|
border-top-left-radius: 8px;
|
|
border-top-right-radius: 8px;
|
|
}
|
|
.dd-dialog-header__title {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
.dd-dialog-header__title h2 {
|
|
margin: 0;
|
|
font-size: 18px;
|
|
font-weight: 600;
|
|
color: #ffffff;
|
|
}
|
|
.dd-dialog-header__title p {
|
|
margin: 2px 0 0 0;
|
|
font-size: 12px;
|
|
color: #94a3b8;
|
|
}
|
|
.dd-icon {
|
|
color: #38bdf8;
|
|
font-size: 28px;
|
|
width: 28px;
|
|
height: 28px;
|
|
}
|
|
.close-btn {
|
|
color: #94a3b8;
|
|
}
|
|
.close-btn:hover {
|
|
color: #ffffff;
|
|
}
|
|
.dd-dialog-body {
|
|
padding: 20px 24px;
|
|
overflow-y: auto;
|
|
}
|
|
.dd-summary-card {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
background: #f8fafc;
|
|
border: 1px solid #e2e8f0;
|
|
border-radius: 8px;
|
|
padding: 14px 18px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.summary-col {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 2px;
|
|
}
|
|
.summary-col.highlight-col {
|
|
background: #ecfdf5;
|
|
padding: 6px 12px;
|
|
border-radius: 6px;
|
|
border: 1px solid #a7f3d0;
|
|
}
|
|
.summary-divider {
|
|
width: 1px;
|
|
height: 36px;
|
|
background: #e2e8f0;
|
|
}
|
|
.summary-col .label {
|
|
font-size: 11px;
|
|
text-transform: uppercase;
|
|
color: #64748b;
|
|
font-weight: 600;
|
|
}
|
|
.dd-number-highlight {
|
|
font-size: 16px;
|
|
color: #0369a1;
|
|
font-family: monospace;
|
|
}
|
|
.summary-col .amount {
|
|
font-size: 15px;
|
|
color: #1e293b;
|
|
}
|
|
.summary-col .total-amount {
|
|
font-size: 16px;
|
|
color: #065f46;
|
|
}
|
|
.summary-col .sublabel {
|
|
font-size: 11px;
|
|
color: #94a3b8;
|
|
}
|
|
.form-section-title {
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
color: #475569;
|
|
margin: 16px 0 10px 0;
|
|
border-bottom: 1px solid #f1f5f9;
|
|
padding-bottom: 4px;
|
|
}
|
|
.form-section-title:first-child {
|
|
margin-top: 0;
|
|
}
|
|
.dd-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
.full-width {
|
|
width: 100%;
|
|
}
|
|
.form-row {
|
|
display: flex;
|
|
gap: 16px;
|
|
}
|
|
.form-field-flex {
|
|
flex: 1;
|
|
}
|
|
.dd-dialog-actions {
|
|
padding: 12px 24px;
|
|
border-top: 1px solid #e2e8f0;
|
|
}
|
|
/* The account about to be debited — read before the form, so a wrong one is caught here. */
|
|
.dd-funding-note {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
margin: 14px 0 4px;
|
|
padding: 11px 14px;
|
|
background: #eff6ff;
|
|
border: 1px solid #bfdbfe;
|
|
border-left: 3px solid #1d4ed8;
|
|
border-radius: 6px;
|
|
font-size: 13px;
|
|
color: #334155;
|
|
}
|
|
.dd-funding-note mat-icon {
|
|
color: #1d4ed8;
|
|
flex-shrink: 0;
|
|
}
|
|
.dd-funding-sub {
|
|
margin-top: 3px;
|
|
font-size: 11.5px;
|
|
line-height: 1.5;
|
|
color: #64748b;
|
|
}
|
|
/* One card per draft on a slip — the boundary is what stops a clerk typing line 2's
|
|
beneficiary against line 1's amount. */
|
|
.dd-line-card {
|
|
border: 1px solid #e2e8f0;
|
|
border-left: 3px solid #0369a1;
|
|
border-radius: 8px;
|
|
padding: 14px 16px 4px;
|
|
margin-bottom: 14px;
|
|
background: #fcfdff;
|
|
}
|
|
.dd-line-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
flex-wrap: wrap;
|
|
margin-bottom: 12px;
|
|
}
|
|
.dd-line-badge {
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.4px;
|
|
color: #ffffff;
|
|
background: #0369a1;
|
|
padding: 3px 9px;
|
|
border-radius: 999px;
|
|
}
|
|
.dd-line-number {
|
|
font-family: monospace;
|
|
font-size: 12px;
|
|
color: #475569;
|
|
}
|
|
.dd-line-number em {
|
|
font-style: normal;
|
|
color: #94a3b8;
|
|
font-size: 11px;
|
|
}
|
|
.dd-line-total {
|
|
margin-left: auto;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #065f46;
|
|
background: #ecfdf5;
|
|
border: 1px solid #a7f3d0;
|
|
padding: 3px 10px;
|
|
border-radius: 6px;
|
|
}
|
|
.dd-preview-note {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: flex-start;
|
|
margin: 0 0 16px;
|
|
padding: 9px 12px;
|
|
background: #fffbeb;
|
|
border: 1px solid #fde68a;
|
|
border-radius: 6px;
|
|
font-size: 12px;
|
|
line-height: 1.5;
|
|
color: #78350f;
|
|
}
|
|
.dd-preview-note mat-icon {
|
|
color: #b45309;
|
|
font-size: 18px;
|
|
width: 18px;
|
|
height: 18px;
|
|
flex-shrink: 0;
|
|
}
|
|
.dd-actions-total {
|
|
margin-right: auto;
|
|
font-size: 13px;
|
|
color: #475569;
|
|
}
|
|
.dd-actions-total strong {
|
|
color: #065f46;
|
|
}
|
|
`
|
|
]
|
|
})
|
|
export class CashierIssueDdDialogComponent implements OnInit {
|
|
private fb = inject(FormBuilder);
|
|
private dialogRef = inject(MatDialogRef<CashierIssueDdDialogComponent>);
|
|
public data: CashierIssueDdDialogData = inject(MAT_DIALOG_DATA);
|
|
|
|
form!: FormGroup;
|
|
/** Built only in slip mode; `form` stays untouched so the single-draft path is unchanged. */
|
|
slipForm!: FormGroup;
|
|
|
|
/** Whether the draft is funded by debiting a member's account rather than by cash at the counter. */
|
|
get isAccountDebit(): boolean {
|
|
return this.data.paymentMethod === 'ACCOUNT_DEBIT';
|
|
}
|
|
|
|
/** How many drafts this dialog is capturing — 1 unless the clerk asked for a slip. */
|
|
get lineCount(): number {
|
|
const n = Number(this.data.ddCount) || 1;
|
|
return n > 1 ? n : 1;
|
|
}
|
|
|
|
/** Whether this dialog is capturing a multi-DD slip rather than a single draft. */
|
|
get isSlip(): boolean {
|
|
return this.lineCount > 1;
|
|
}
|
|
|
|
/** Whether the debit lands on a GL account rather than a member's — wording only. */
|
|
get isGlFunded(): boolean {
|
|
return !!this.data.glFunded;
|
|
}
|
|
|
|
/** The form the Save button validates against — whichever of the two was built. */
|
|
get activeForm(): FormGroup {
|
|
return this.isSlip ? this.slipForm : this.form;
|
|
}
|
|
|
|
get slipLines(): FormArray {
|
|
return this.slipForm.get('lines') as FormArray;
|
|
}
|
|
|
|
/** The provisional leaflet number shown against a line, if the caller supplied a run of them. */
|
|
previewNumberAt(index: number): string | null {
|
|
return this.data.previewDdNumbers?.[index] ?? null;
|
|
}
|
|
|
|
private lineValueAt(index: number, field: string): number {
|
|
return Number(this.slipLines.at(index)?.get(field)?.value) || 0;
|
|
}
|
|
|
|
/**
|
|
* GST on one line's charge.
|
|
*
|
|
* Rounded per line, matching the server, which computes and stores GST against each draft rather
|
|
* than once for the slip. Summing rounded lines and rounding a summed charge can differ by a
|
|
* paisa, and it is the per-line figure that ends up on the draft.
|
|
*/
|
|
lineGstAt(index: number): number {
|
|
const charges = this.lineValueAt(index, 'chargesAmount');
|
|
if (charges <= 0) return 0;
|
|
return Math.round(charges * (Number(this.data.gstPercentage) || 0)) / 100;
|
|
}
|
|
|
|
/** What one line adds to the debit — its face value, its charge and the GST on that charge. */
|
|
lineTotalAt(index: number): number {
|
|
return this.lineValueAt(index, 'faceValue') + this.lineValueAt(index, 'chargesAmount') + this.lineGstAt(index);
|
|
}
|
|
|
|
get slipFaceValue(): number {
|
|
return this.slipLines.controls.reduce((sum, _c, i) => sum + this.lineValueAt(i, 'faceValue'), 0);
|
|
}
|
|
|
|
get slipCharges(): number {
|
|
return this.slipLines.controls.reduce((sum, _c, i) => sum + this.lineValueAt(i, 'chargesAmount'), 0);
|
|
}
|
|
|
|
get slipGst(): number {
|
|
return this.slipLines.controls.reduce((sum, _c, i) => sum + this.lineGstAt(i), 0);
|
|
}
|
|
|
|
/** The figure the account is debited for — rounded up to the whole rupee, as the single flow does. */
|
|
get slipTotal(): number {
|
|
return Math.ceil(this.slipFaceValue + this.slipCharges + this.slipGst - 1e-9);
|
|
}
|
|
|
|
ngOnInit(): void {
|
|
if (this.isSlip) {
|
|
this.slipForm = this.fb.group({
|
|
lines: this.fb.array(
|
|
Array.from({ length: this.lineCount }, () =>
|
|
this.fb.group({
|
|
beneficiaryName: [
|
|
'',
|
|
[
|
|
Validators.required,
|
|
Validators.maxLength(120)
|
|
]
|
|
],
|
|
payableAtBranch: [
|
|
'',
|
|
[Validators.required]
|
|
],
|
|
payableAtCity: [
|
|
'',
|
|
[Validators.required]
|
|
],
|
|
// Zero is rejected rather than merely warned about: the server refuses a line with a
|
|
// face value at or below zero, and a slip that fails there has already cost the clerk
|
|
// every other line they typed.
|
|
faceValue: [
|
|
null as
|
|
| number
|
|
| null,
|
|
[
|
|
Validators.required,
|
|
Validators.min(0.01)
|
|
]
|
|
],
|
|
chargesAmount: [
|
|
0,
|
|
[Validators.min(0)]
|
|
]
|
|
})
|
|
)
|
|
)
|
|
});
|
|
return;
|
|
}
|
|
|
|
// Walk-in identity is required for cash and rejected outright for an account debit — the server
|
|
// refuses a walk-in name alongside an account — so the controls are only built when they apply.
|
|
// Registering them unconditionally and merely hiding them would hold the form invalid on a
|
|
// required field the clerk cannot see.
|
|
this.form = this.fb.group(
|
|
this.isAccountDebit
|
|
? {
|
|
beneficiaryName: [
|
|
'',
|
|
[
|
|
Validators.required,
|
|
Validators.maxLength(120)
|
|
]
|
|
],
|
|
payableAtBranch: [
|
|
'',
|
|
[Validators.required]
|
|
],
|
|
payableAtCity: [
|
|
'',
|
|
[Validators.required]
|
|
]
|
|
}
|
|
: {
|
|
walkinPurchaserName: [
|
|
'',
|
|
[
|
|
Validators.required,
|
|
Validators.minLength(3)
|
|
]
|
|
],
|
|
walkinPurchaserAddress: [
|
|
'',
|
|
[Validators.required]
|
|
],
|
|
walkinPurchaserAadhaar: [
|
|
'',
|
|
[
|
|
Validators.required,
|
|
Validators.pattern(/^[0-9]{12}$/)
|
|
]
|
|
],
|
|
beneficiaryName: [
|
|
'',
|
|
[
|
|
Validators.required,
|
|
Validators.maxLength(120)
|
|
]
|
|
],
|
|
payableAtBranch: [
|
|
'',
|
|
[Validators.required]
|
|
],
|
|
payableAtCity: [
|
|
'',
|
|
[Validators.required]
|
|
]
|
|
}
|
|
);
|
|
}
|
|
|
|
onClose(): void {
|
|
this.dialogRef.close();
|
|
}
|
|
|
|
onSubmit(): void {
|
|
if (this.activeForm.invalid) return;
|
|
|
|
// A slip closes with its lines. There is no walk-in branch here: a slip is only ever offered on
|
|
// a member-account debit, where the purchaser is the account holder already on record.
|
|
if (this.isSlip) {
|
|
const lines: DdSlipLineResult[] = this.slipLines.controls.map((c) => {
|
|
const v = c.value;
|
|
return {
|
|
beneficiaryName: (v.beneficiaryName || '').trim().toUpperCase(),
|
|
payableAtBranch: (v.payableAtBranch || '').trim().toUpperCase(),
|
|
payableAtCity: (v.payableAtCity || '').trim().toUpperCase(),
|
|
faceValue: Number(v.faceValue) || 0,
|
|
chargesAmount: Number(v.chargesAmount) || 0
|
|
};
|
|
});
|
|
this.dialogRef.close({ lines });
|
|
return;
|
|
}
|
|
|
|
const val = this.form.value;
|
|
const beneficiary = {
|
|
beneficiaryName: (val.beneficiaryName || '').trim().toUpperCase(),
|
|
payableAtBranch: (val.payableAtBranch || '').trim().toUpperCase(),
|
|
payableAtCity: (val.payableAtCity || '').trim().toUpperCase()
|
|
};
|
|
// Walk-in fields are left off entirely on an account debit rather than sent empty: the server
|
|
// rejects a purchaser name arriving alongside an account, and '' would be sent as one.
|
|
this.dialogRef.close(
|
|
this.isAccountDebit
|
|
? beneficiary
|
|
: {
|
|
walkinPurchaserName: (val.walkinPurchaserName || '').trim().toUpperCase(),
|
|
walkinPurchaserAddress: (val.walkinPurchaserAddress || '').trim().toUpperCase(),
|
|
walkinPurchaserAadhaar: (val.walkinPurchaserAadhaar || '').trim(),
|
|
...beneficiary
|
|
}
|
|
);
|
|
}
|
|
}
|