From efb01d54419ec49936d69ebd3c5c6f13ac1aa9fb Mon Sep 17 00:00:00 2001 From: Jaanu423 Date: Tue, 16 Jun 2026 10:43:29 +0530 Subject: [PATCH] feat(clerk): add GL disbursement maker-checker flow - Add ClerkDisbursementService for submit/approve/reject HTTP calls - Add DisbursementRequestsComponent (manager inbox tab under checker tasks) - Add DisbursementReviewComponent (manager approve/reject detail page) - Add MyDisbursementRequestsComponent (clerk's own disbursement history) - Add 'My Disbursements' nav tab to clerk shell navigation header - Wire routes in cashier-routing and tasks-routing modules - Add 'My Disbursements' button to transaction-entry clerk footer - Include accountName in creditEntries payload for manager review display Co-Authored-By: Claude Sonnet 4.6 --- src/app/cashier/cashier-routing.module.ts | 8 + src/app/cashier/clerk-disbursement.service.ts | 48 +++ .../transaction-entry.component.html | 59 ++- .../transaction-entry.component.ts | 195 ++++++++- .../disbursement-review.component.html | 210 ++++++++++ .../disbursement-review.component.scss | 374 +++++++++++++++++ .../disbursement-review.component.ts | 147 +++++++ .../my-disbursement-requests.component.html | 161 +++++++ .../my-disbursement-requests.component.scss | 389 +++++++++++++++++ .../my-disbursement-requests.component.ts | 209 ++++++++++ src/app/core/shell/shell.component.html | 11 + src/app/core/shell/shell.component.ts | 3 +- .../disbursement-requests.component.html | 162 +++++++ .../disbursement-requests.component.scss | 394 ++++++++++++++++++ .../disbursement-requests.component.ts | 216 ++++++++++ .../checker-inbox-and-tasks.component.html | 12 + src/app/tasks/tasks-routing.module.ts | 19 + src/environments/.env.ts | 4 +- 18 files changed, 2594 insertions(+), 27 deletions(-) create mode 100644 src/app/cashier/clerk-disbursement.service.ts create mode 100644 src/app/clerk/disbursement-review/disbursement-review.component.html create mode 100644 src/app/clerk/disbursement-review/disbursement-review.component.scss create mode 100644 src/app/clerk/disbursement-review/disbursement-review.component.ts create mode 100644 src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.html create mode 100644 src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.scss create mode 100644 src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.ts create mode 100644 src/app/tasks/checker-inbox-and-tasks-tabs/disbursement-requests/disbursement-requests.component.html create mode 100644 src/app/tasks/checker-inbox-and-tasks-tabs/disbursement-requests/disbursement-requests.component.scss create mode 100644 src/app/tasks/checker-inbox-and-tasks-tabs/disbursement-requests/disbursement-requests.component.ts diff --git a/src/app/cashier/cashier-routing.module.ts b/src/app/cashier/cashier-routing.module.ts index 136dc71a2..c9e818ee7 100644 --- a/src/app/cashier/cashier-routing.module.ts +++ b/src/app/cashier/cashier-routing.module.ts @@ -54,6 +54,14 @@ const routes: Routes = [ loadComponent: () => import('../clerk/my-requests/my-requests.component').then((m) => m.MyRequestsComponent), data: { title: 'My Withdrawal Requests', breadcrumb: 'My Withdrawal Requests' } }, + { + path: 'my-disbursement-requests', + loadComponent: () => + import('../clerk/my-disbursement-requests/my-disbursement-requests.component').then( + (m) => m.MyDisbursementRequestsComponent + ), + data: { title: 'My Disbursement Requests', breadcrumb: 'My Disbursement Requests' } + }, { path: 'account-facilities', loadComponent: () => diff --git a/src/app/cashier/clerk-disbursement.service.ts b/src/app/cashier/clerk-disbursement.service.ts new file mode 100644 index 000000000..79e3b4649 --- /dev/null +++ b/src/app/cashier/clerk-disbursement.service.ts @@ -0,0 +1,48 @@ +/** + * 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 { Injectable, inject } from '@angular/core'; +import { HttpClient, HttpParams } from '@angular/common/http'; +import { Observable } from 'rxjs'; + +/** HTTP service for Clerk Disbursement Request maker-checker workflow. */ +@Injectable({ providedIn: 'root' }) +export class ClerkDisbursementService { + private http = inject(HttpClient); + + submit(data: any): Observable { + return this.http.post('/clerk/disbursement-requests', data); + } + + getMyRequests(status?: string, offset = 0, limit = 20, fromDate?: string, toDate?: string): Observable { + let params = new HttpParams().set('offset', String(offset)).set('limit', String(limit)); + if (status) params = params.set('status', status); + if (fromDate) params = params.set('fromDate', fromDate); + if (toDate) params = params.set('toDate', toDate); + return this.http.get('/clerk/disbursement-requests/my', { params }); + } + + getPendingRequests(status = 'PENDING', offset = 0, limit = 20, fromDate?: string, toDate?: string): Observable { + let params = new HttpParams().set('status', status).set('offset', String(offset)).set('limit', String(limit)); + if (fromDate) params = params.set('fromDate', fromDate); + if (toDate) params = params.set('toDate', toDate); + return this.http.get('/clerk/disbursement-requests', { params }); + } + + getById(id: number): Observable { + return this.http.get(`/clerk/disbursement-requests/${id}`); + } + + approve(id: number): Observable { + return this.http.post(`/clerk/disbursement-requests/${id}/approve`, {}); + } + + reject(id: number, reason: string): Observable { + return this.http.post(`/clerk/disbursement-requests/${id}/reject`, { reason }); + } +} diff --git a/src/app/cashier/transaction-entry/transaction-entry.component.html b/src/app/cashier/transaction-entry/transaction-entry.component.html index a3e257193..0f00f9fd3 100644 --- a/src/app/cashier/transaction-entry/transaction-entry.component.html +++ b/src/app/cashier/transaction-entry/transaction-entry.component.html @@ -107,7 +107,12 @@
- @@ -145,7 +150,7 @@ class="ws-f__ctl" [(ngModel)]="row.acTyp" (click)="$event.stopPropagation()" - (change)="row.acTyp === 'GL' && (row.dbCr = 'Cr')" + (change)="row.acTyp === 'GL' && row.typ !== 'Disbursement' && (row.dbCr = 'Cr')" > @for (a of acTypOptions; track a) { @@ -187,7 +192,7 @@ type="button" class="ws-seg__btn ws-seg__btn--dr" [class.ws-seg__btn--active-dr]="row.dbCr === 'Dr'" - [disabled]="row.acTyp === 'GL'" + [disabled]="row.acTyp === 'GL' && row.typ !== 'Disbursement'" (click)="row.dbCr = 'Dr'" > DR @@ -236,24 +241,26 @@ />
-
- - -
-
- - -
+ @if (row.typ !== 'Withdrawal Slip') { +
+ + +
+
+ + +
+ }
@for (a of acTypOptions; track a) { @@ -1393,6 +1400,14 @@ Add + }
diff --git a/src/app/cashier/transaction-entry/transaction-entry.component.ts b/src/app/cashier/transaction-entry/transaction-entry.component.ts index 1046d64bd..b3fdb0db9 100644 --- a/src/app/cashier/transaction-entry/transaction-entry.component.ts +++ b/src/app/cashier/transaction-entry/transaction-entry.component.ts @@ -19,6 +19,7 @@ import { CashierService } from '../cashier.service'; import { AuthenticationService } from '../../core/authentication/authentication.service'; import { ClerkUiStateService, ClerkSavedAccount } from '../clerk-ui-state.service'; import { ClerkWithdrawalService } from '../clerk-withdrawal.service'; +import { ClerkDisbursementService } from '../clerk-disbursement.service'; import { CashierDepositService } from '../cashier-deposit.service'; import { SettingsService } from '../../settings/settings.service'; @@ -654,8 +655,9 @@ export class TransactionEntryComponent implements OnInit, OnDestroy { private dialog = inject(MatDialog); private clerkUiState = inject(ClerkUiStateService); private clerkWithdrawalService = inject(ClerkWithdrawalService); + private clerkDisbursementService = inject(ClerkDisbursementService); private cashierDepositService = inject(CashierDepositService); - private router = inject(Router); + readonly router = inject(Router); private settingsService = inject(SettingsService); today = ''; @@ -664,6 +666,10 @@ export class TransactionEntryComponent implements OnInit, OnDestroy { loadingAccount = false; accountError = ''; + // Per-row account id/name map: acNo → Fineract id/name (used for multi-row disbursement) + rowAccountIds: Record = {}; + rowAccountNames: Record = {}; + // Full account + client data accountDetails: any = null; clientDetails: any = null; @@ -1058,6 +1064,30 @@ export class TransactionEntryComponent implements OnInit, OnDestroy { } addRow(): void { + const active = this.selectedRow; + // Disbursement: auto-add mirror CR row (same type/txntp, opposite DR/CR) + if (active?.typ === 'Disbursement') { + const mirror: TxnRow = { + typ: 'Disbursement', + br: active.br ?? 1, + trTp: '', + acTyp: 'SD', + acNo: '', + ecsAcNo: '', + dbCr: 'Cr', + chequeNo: '', + cheqDate: '', + amount: active.amount, + description: active.description ?? '', + tokNo: '', + paymentTypeId: this.findTransferPaymentTypeId(), + bankName: '', + routingCode: '' + }; + this.rows.push(mirror); + this.selectedRow = mirror; + return; + } const row: TxnRow = { typ: '~', br: 1, @@ -1076,7 +1106,156 @@ export class TransactionEntryComponent implements OnInit, OnDestroy { routingCode: '' }; this.rows.push(row); - // Token is assigned by the backend at actual submission time — not pre-generated here + } + + /** Called when the TYPE dropdown changes — sets sensible defaults for TXN TP and DR/CR */ + onTypChange(row: TxnRow): void { + switch (row.typ) { + case 'Withdrawal Slip': + row.dbCr = 'Dr'; + row.paymentTypeId = this.findCashPaymentTypeId(); + row.chequeNo = ''; + row.cheqDate = ''; + break; + case 'Cheque': + row.dbCr = 'Dr'; + row.paymentTypeId = this.findCashPaymentTypeId(); + break; + case 'Disbursement': + row.dbCr = 'Dr'; + row.paymentTypeId = this.findTransferPaymentTypeId(); + break; + } + } + + private findCashPaymentTypeId(): number | null { + const pt = this.paymentTypes.find((p: any) => !!p.isCashPayment); + return pt?.id ?? null; + } + + private findTransferPaymentTypeId(): number | null { + const pt = this.paymentTypes.find((p: any) => /transfer|neft|rtgs|imps/i.test(p.name ?? '')); + return pt?.id ?? null; + } + + /** + * Clerk double-entry disbursement (maker-checker): + * 1 DR row (GL source) + 1..N CR rows (savings/current destinations). + * Submits a PENDING request — manager must approve before balances are credited. + */ + private submitDisbursementDoubleEntry(): void { + const drRow = this.rows.find((r) => r.dbCr === 'Dr'); + const crRows = this.rows.filter((r) => r.dbCr === 'Cr'); + + if (!drRow) { + this.showAlert('error', 'DR Row Missing', ['One DR row (GL source) is required.']); + return; + } + if (crRows.length === 0) { + this.showAlert('error', 'CR Row Missing', ['At least one CR row (destination account) is required.']); + return; + } + + const drAmount = drRow.amount ?? 0; + if (!drAmount || drAmount <= 0) { + this.showAlert('error', 'Amount Required', ['Please enter the amount in the DR (GL) row.']); + return; + } + + // Validate all CR rows have amounts and accounts + for (const cr of crRows) { + if (!cr.acNo?.trim()) { + this.showAlert('error', 'Account Required', ['Please fill account number in all CR rows.']); + return; + } + if (!cr.amount || cr.amount <= 0) { + this.showAlert('error', 'Amount Required', [`Please enter amount for CR row: ${cr.acNo}`]); + return; + } + if (!cr.paymentTypeId) { + this.showAlert('error', 'TXN TP Required', [`Please select payment type for CR row: ${cr.acNo}`]); + return; + } + } + + // Total CR must equal DR + const totalCr = crRows.reduce((s, r) => s + (r.amount ?? 0), 0); + if (Math.abs(drAmount - totalCr) > 0.005) { + this.showAlert('error', 'Unbalanced Entry', [ + `DR ₹${drAmount.toLocaleString('en-IN', { minimumFractionDigits: 2 })} ≠ Total CR ₹${totalCr.toLocaleString('en-IN', { minimumFractionDigits: 2 })}.`, + 'All CR amounts must sum to the DR amount.' + ]); + return; + } + + // Each CR row must have its account loaded (savingsAccountId required for approval) + // We store accountId per row using a per-row map: acNo → accountId + // For simplicity, require that the selected row is a CR row with accountDetails loaded + // Build creditEntries from each CR row + const creditEntries = crRows.map((cr) => ({ + accountNo: cr.acNo, + accountName: this.rowAccountNames[cr.acNo] ?? cr.acNo, + accountType: cr.acTyp === 'CA' || cr.acTyp === 'CB' ? 'CURRENT' : 'SAVINGS', + savingsAccountId: this.rowAccountIds[cr.acNo] ?? null, + amount: String(cr.amount), + paymentTypeId: cr.paymentTypeId, + description: cr.description ?? null + })); + + // Verify all CR accounts have been loaded + const unloaded = crRows.filter((cr) => !this.rowAccountIds[cr.acNo]); + if (unloaded.length > 0) { + this.showAlert('error', 'Account Not Loaded', [ + `Please load account details for: ${unloaded.map((r) => r.acNo).join(', ')}`, + 'Click on each CR row and wait for account details to load.' + ]); + return; + } + + const payload = { + glAccountId: this.rowAccountIds[drRow.acNo] ?? null, + glAccountNo: drRow.acNo, + glAccountName: this.rowAccountNames[drRow.acNo] ?? drRow.acNo, + officeId: drRow.br ?? 1, + currencyCode: 'INR', + paymentTypeId: drRow.paymentTypeId ?? crRows[0]?.paymentTypeId, + paymentTypeName: + this.paymentTypes.find((p: any) => p.id === (drRow.paymentTypeId ?? crRows[0]?.paymentTypeId))?.name ?? null, + description: drRow.description || crRows[0]?.description || null, + creditEntries: JSON.stringify(creditEntries) + }; + + this.saving = true; + this.clerkDisbursementService + .submit(payload) + .pipe( + catchError((err: any) => { + const msg = + err?.error?.errors?.[0]?.defaultUserMessage ?? + err?.error?.message ?? + 'Disbursement request submission failed. Please try again.'; + this.showAlert('error', 'Submission Failed', [msg]); + this.saving = false; + return of(null); + }) + ) + .subscribe((res: any) => { + this.saving = false; + if (res) { + this.showAlert('success', 'Disbursement Request Submitted', [ + `Voucher No: ${res.voucherNo} · Total: ₹${drAmount.toLocaleString('en-IN', { minimumFractionDigits: 2 })}`, + `DR: GL — ${drRow.acNo} → ${crRows.length} CR account(s)`, + 'Pending manager approval. Balance will be credited after approval.' + ]); + this.rows = []; + this.rowAccountIds = {}; + this.rowAccountNames = {}; + this.addRow(); + this.selectedRow = this.rows[0]; + this.accountDetails = null; + this.clientDetails = null; + } + }); } /** Cashier enters a token number → look up the APPROVED withdrawal request for auto-fill. */ @@ -1384,6 +1563,12 @@ export class TransactionEntryComponent implements OnInit, OnDestroy { } this.accountDetails = acc; this.jointHolders = acc.jointHolders ?? []; + // Track per-row account id/name for multi-row disbursement + if (this.selectedRow?.acNo) { + this.rowAccountIds[this.selectedRow.acNo] = acc.id; + this.rowAccountNames[this.selectedRow.acNo] = + acc.name ?? acc.displayName ?? acc.glAccountName ?? acc.accountNo ?? ''; + } if (this.selectedRow) { this.selectedRow.ecsAcNo = acc.glCode ?? acc.savingsAccountNumber ?? acc.accountNo ?? ''; } @@ -2033,6 +2218,12 @@ export class TransactionEntryComponent implements OnInit, OnDestroy { const isDeposit = row.dbCr === 'Cr'; + // Clerk multi-row disbursement (GL DR + Savings/Current CR) — atomic double-entry + if (this.isClerk && this.rows.length >= 2 && this.rows.every((r) => r.typ === 'Disbursement')) { + this.submitDisbursementDoubleEntry(); + return; + } + // Clerk cash deposit is not permitted — cash handling (notes/coins) is cashier's responsibility if (this.isClerk && isDeposit && isCash) { this.showAlert('error', 'Cash Deposit Not Permitted', [ diff --git a/src/app/clerk/disbursement-review/disbursement-review.component.html b/src/app/clerk/disbursement-review/disbursement-review.component.html new file mode 100644 index 000000000..92c547f09 --- /dev/null +++ b/src/app/clerk/disbursement-review/disbursement-review.component.html @@ -0,0 +1,210 @@ + + +
+ + + + + @if (loading) { +
+ hourglass_empty + Loading request… +
+ } + + + @if (!loading && !request) { +
+ error_outline + Request not found. +
+ } + + + @if (!loading && request) { +
+ +
+
+
+ {{ request.voucher_no || '—' }} + {{ request.status }} +
+
+ + person + {{ request.clerk_name }} ({{ request.clerk_username }}) + + + schedule + {{ formatDateTime(request.submitted_at) }} + + @if (request.actioned_at) { + + check_circle + Actioned: {{ formatDateTime(request.actioned_at) }} + + } +
+
+
+ + +
+
+ account_balance + GL Debit (Source) +
+
+
+ GL Account No + {{ request.gl_account_no }} +
+
+ GL Account Name + {{ request.gl_account_name }} +
+
+ DR Amount + ₹{{ request.dr_amount | number: '1.2-2' }} +
+
+ Payment Mode + {{ request.payment_type_name || 'Transfer' }} +
+ @if (request.description) { +
+ Description + {{ request.description }} +
+ } +
+
+ + +
+
+ account_balance_wallet + Credit Entries ({{ creditEntries.length }} account{{ creditEntries.length !== 1 ? 's' : '' }}) +
+ + + + + + + + + + + + @for (entry of creditEntries; track entry.accountId; let i = $index) { + + + + + + + + } + + + + + +
#Account NoAccount NameTypeAmount (CR)
{{ i + 1 }}{{ entry.accountNo }}{{ entry.accountName }} + {{ entry.accountType }} + ₹{{ entry.amount | number: '1.2-2' }}
Total Credit₹{{ totalCreditAmount() | number: '1.2-2' }}
+
+ + + @if (request.status === 'REJECTED' && request.rejection_reason) { +
+
+ cancel + Rejection Reason +
+

{{ request.rejection_reason }}

+
+ manage_accounts + {{ request.manager_name || request.manager_username || '—' }} +
+
+ } + + + @if (request.status === 'APPROVED' && request.txn_refs) { +
+
+ check_circle + Transaction References +
+

{{ request.txn_refs }}

+
+ manage_accounts + Approved by: {{ request.manager_name || request.manager_username || '—' }} +
+
+ } + + + @if (request.status === 'PENDING') { +
+ @if (!showRejectForm) { + + + } @else { +
+ + +
+ + +
+
+ } +
+ } +
+ } +
diff --git a/src/app/clerk/disbursement-review/disbursement-review.component.scss b/src/app/clerk/disbursement-review/disbursement-review.component.scss new file mode 100644 index 000000000..5fbb8c52f --- /dev/null +++ b/src/app/clerk/disbursement-review/disbursement-review.component.scss @@ -0,0 +1,374 @@ +/** + * 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/. + */ + +:host { + display: block; +} + +.dri { + display: flex; + flex-direction: column; + min-height: 100vh; + background: #f8fafc; +} + +.dri-loading { + display: flex; + align-items: center; + gap: 12px; + justify-content: center; + padding: 60px 24px; + font-size: 15px; + color: #64748b; + + &__icon { + font-size: 28px; + width: 28px; + height: 28px; + color: #94a3b8; + } +} + +.dri-body { + padding: 20px; + display: flex; + flex-direction: column; + gap: 16px; + max-width: 900px; + margin: 0 auto; + width: 100%; +} + +.dri-card { + background: #fff; + border-radius: 10px; + border: 1px solid #e2e8f0; + overflow: hidden; + + &--header { + border-top: 3px solid #0f4f3c; + } + + &--rejected { + border-top: 3px solid #ef4444; + } + + &--approved { + border-top: 3px solid #22c55e; + } +} + +.dri-card-header { + padding: 16px 20px; + display: flex; + flex-direction: column; + gap: 10px; + + &__left { + display: flex; + align-items: center; + gap: 12px; + } + + &__meta { + display: flex; + flex-wrap: wrap; + gap: 16px; + color: #64748b; + } +} + +.dri-voucher { + font-family: 'Courier New', monospace; + font-size: 20px; + font-weight: 700; + color: #1e40af; + letter-spacing: 0.06em; +} + +.dri-status { + display: inline-flex; + align-items: center; + padding: 3px 12px; + border-radius: 20px; + font-size: 12px; + font-weight: 700; + letter-spacing: 0.04em; + + &--pending { + background: #fef3c7; + color: #92400e; + } + + &--approved { + background: #dcfce7; + color: #166534; + } + + &--rejected { + background: #fee2e2; + color: #991b1b; + } +} + +.dri-meta-item { + display: flex; + align-items: center; + gap: 4px; + font-size: 12px; + + mat-icon { + font-size: 14px; + width: 14px; + height: 14px; + color: #94a3b8; + } +} + +.dri-section-title { + display: flex; + align-items: center; + gap: 8px; + padding: 12px 20px; + font-size: 12px; + font-weight: 700; + color: #475569; + text-transform: uppercase; + letter-spacing: 0.06em; + border-bottom: 1px solid #f1f5f9; + background: #f8fafc; + + mat-icon { + font-size: 16px; + width: 16px; + height: 16px; + color: #0f4f3c; + } +} + +.dri-detail-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); + padding: 16px 20px; + gap: 12px 24px; +} + +.dri-detail-item { + display: flex; + flex-direction: column; + gap: 3px; + + &--full { + grid-column: 1 / -1; + } +} + +.dri-detail-label { + font-size: 11px; + font-weight: 600; + color: #94a3b8; + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.dri-detail-value { + font-size: 14px; + color: #0d1b2a; + font-weight: 500; +} + +.dri-amount { + font-weight: 700; + font-size: 18px; + color: #dc2626; +} + +.dri-cr-table { + width: 100%; + border-collapse: collapse; + font-size: 13px; + + th, + td { + padding: 10px 16px; + text-align: left; + border-bottom: 1px solid #f1f5f9; + } + + th { + font-size: 11px; + font-weight: 700; + color: #64748b; + text-transform: uppercase; + letter-spacing: 0.06em; + background: #f8fafc; + } + + .num { + text-align: right; + } +} + +.dri-cr-idx { + width: 36px; + color: #94a3b8; + font-size: 12px; +} + +.dri-type-badge { + display: inline-flex; + align-items: center; + padding: 2px 8px; + border-radius: 10px; + background: #f1f5f9; + font-size: 11px; + font-weight: 600; + color: #475569; + text-transform: uppercase; +} + +.dri-cr-amount { + font-weight: 700; + color: #166534; +} + +.dri-cr-total-row { + background: #f0fdf4; + + td { + border-top: 2px solid #bbf7d0; + padding: 10px 16px; + } +} + +.dri-cr-total-label { + font-weight: 700; + color: #166534; + text-align: right; +} + +.dri-cr-total-amount { + font-weight: 700; + color: #166534; + font-size: 15px; +} + +.dri-rejection-text { + padding: 14px 20px; + margin: 0; + font-size: 13px; + color: #dc2626; + font-style: italic; +} + +.dri-txn-refs { + padding: 14px 20px; + margin: 0; + font-size: 12px; + color: #166534; +} + +.dri-actions { + display: flex; + gap: 12px; + align-items: flex-start; + padding: 4px 0 8px; +} + +.dri-btn { + display: inline-flex; + align-items: center; + gap: 6px; + border-radius: 8px; + font-family: inherit; + font-weight: 600; + font-size: 14px; + cursor: pointer; + border: none; + transition: background 0.15s; + padding: 10px 20px; + + mat-icon { + font-size: 18px; + width: 18px; + height: 18px; + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + &--approve { + background: #0f4f3c; + color: #fff; + + &:hover:not(:disabled) { + background: #0a3d2e; + } + } + + &--reject { + background: #fee2e2; + color: #991b1b; + border: 1px solid #fca5a5; + + &:hover:not(:disabled) { + background: #fecaca; + } + } + + &--ghost { + background: #f1f5f9; + color: #475569; + + &:hover:not(:disabled) { + background: #e2e8f0; + } + } +} + +.dri-reject-form { + display: flex; + flex-direction: column; + gap: 10px; + width: 100%; + max-width: 480px; +} + +.dri-reject-label { + font-size: 12px; + font-weight: 700; + color: #991b1b; +} + +.dri-reject-textarea { + width: 100%; + padding: 10px 12px; + border: 1px solid #fca5a5; + border-radius: 8px; + font-family: inherit; + font-size: 13px; + resize: vertical; + color: #0d1b2a; + outline: none; + box-sizing: border-box; + + &:focus { + border-color: #ef4444; + } +} + +.dri-reject-actions { + display: flex; + gap: 8px; +} + +.cell-mono { + font-family: 'Courier New', monospace; +} diff --git a/src/app/clerk/disbursement-review/disbursement-review.component.ts b/src/app/clerk/disbursement-review/disbursement-review.component.ts new file mode 100644 index 000000000..b42093fd9 --- /dev/null +++ b/src/app/clerk/disbursement-review/disbursement-review.component.ts @@ -0,0 +1,147 @@ +/** + * 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 } from '@angular/forms'; +import { ActivatedRoute, Router } from '@angular/router'; +import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar'; +import { MatIconModule } from '@angular/material/icon'; +import { catchError } from 'rxjs/operators'; +import { of } from 'rxjs'; + +import { ClerkDisbursementService } from '../../cashier/clerk-disbursement.service'; + +interface CreditEntry { + accountId: number; + accountNo: string; + accountName: string; + accountType: string; + amount: number; +} + +@Component({ + selector: 'mifosx-disbursement-review', + standalone: true, + imports: [ + CommonModule, + FormsModule, + MatSnackBarModule, + MatIconModule + ], + templateUrl: './disbursement-review.component.html', + styleUrl: './disbursement-review.component.scss' +}) +export class DisbursementReviewComponent implements OnInit { + private route = inject(ActivatedRoute); + private router = inject(Router); + private service = inject(ClerkDisbursementService); + private snackBar = inject(MatSnackBar); + + requestId: number | null = null; + request: any = null; + creditEntries: CreditEntry[] = []; + + loading = false; + acting = false; + showRejectForm = false; + rejectionReason = ''; + + ngOnInit(): void { + const id = this.route.snapshot.params['id']; + this.requestId = id != null ? Number(id) : null; + if (this.requestId) this.loadRequest(); + } + + loadRequest(): void { + if (!this.requestId) return; + this.loading = true; + this.service + .getById(this.requestId) + .pipe(catchError(() => of(null))) + .subscribe((res: any) => { + this.request = res; + this.loading = false; + if (res?.credit_entries) { + try { + this.creditEntries = + typeof res.credit_entries === 'string' ? JSON.parse(res.credit_entries) : res.credit_entries; + } catch { + this.creditEntries = []; + } + } + }); + } + + approve(): void { + if (!this.requestId || this.acting) return; + this.acting = true; + this.service + .approve(this.requestId) + .pipe(catchError((err) => of({ error: err?.error?.errors?.[0]?.defaultUserMessage ?? 'Approval failed.' }))) + .subscribe((res: any) => { + this.acting = false; + if (res?.error) { + this.snackBar.open(res.error, 'Close', { duration: 5000 }); + } else { + this.snackBar.open('Disbursement approved successfully.', 'Close', { duration: 3000 }); + this.router.navigate(['/checker-inbox-and-tasks/disbursement-requests']); + } + }); + } + + reject(): void { + if (!this.requestId || this.acting || !this.rejectionReason.trim()) return; + this.acting = true; + this.service + .reject(this.requestId, this.rejectionReason.trim()) + .pipe(catchError((err) => of({ error: err?.error?.errors?.[0]?.defaultUserMessage ?? 'Rejection failed.' }))) + .subscribe((res: any) => { + this.acting = false; + if (res?.error) { + this.snackBar.open(res.error, 'Close', { duration: 5000 }); + } else { + this.snackBar.open('Request rejected.', 'Close', { duration: 3000 }); + this.router.navigate(['/checker-inbox-and-tasks/disbursement-requests']); + } + }); + } + + totalCreditAmount(): number { + return this.creditEntries.reduce((sum, e) => sum + (e.amount ?? 0), 0); + } + + statusClass(status: string): string { + const map: Record = { + PENDING: 'dri-status--pending', + APPROVED: 'dri-status--approved', + REJECTED: 'dri-status--rejected' + }; + return map[status] ?? ''; + } + + formatDateTime(val: any): string { + if (!val) return '—'; + try { + const d = new Date(val); + return d.toLocaleString('en-IN', { + day: '2-digit', + month: 'short', + year: 'numeric', + hour: '2-digit', + minute: '2-digit' + }); + } catch { + return String(val); + } + } + + backToInbox(): void { + this.router.navigate(['/checker-inbox-and-tasks/disbursement-requests']); + } +} diff --git a/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.html b/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.html new file mode 100644 index 000000000..9305aa5b3 --- /dev/null +++ b/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.html @@ -0,0 +1,161 @@ + + +
+ +
+
+ swap_horiz +
+
My Disbursement Requests
+
Track your submitted GL disbursement requests.
+
+
+ +
+ + +
+ + + + +
+ @for (p of datePresets; track p.key) { + + } +
+ + + +
+
+ From + + + +
+ — +
+ To + + + +
+
+ + +
+ + + @if (loading) { +
+

Loading…

+
+ } @else if (loaded && requests.length === 0) { +
+ +

No disbursement requests found

+

You have not submitted any disbursement requests yet.

+ +
+ } @else { +
+ + + + + + + + + + + + + + + @for (r of requests; track r.id) { + + + + + + + + + + + @if (r.status === 'REJECTED' && r.rejection_reason) { + + + + } + } + +
Voucher NoGL AccountDR AmountCredit EntriesPayment ModeReviewed BySubmitted AtStatus
{{ r.voucher_no || '—' }} + {{ r.gl_account_no }} + {{ r.gl_account_name }} + ₹{{ r.dr_amount | number: '1.2-2' }} + {{ creditCount(r) }} account{{ creditCount(r) !== 1 ? 's' : '' }} + {{ r.payment_type_name || 'Transfer' }}{{ r.manager_name || r.manager_username || '—' }}{{ formatDateTime(r.submitted_at) }} + {{ statusLabel(r.status) }} +
+ info + {{ r.rejection_reason }} +
+
+ + + } +
diff --git a/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.scss b/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.scss new file mode 100644 index 000000000..20984fe7d --- /dev/null +++ b/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.scss @@ -0,0 +1,389 @@ +/** + * 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/. + */ + +:host { + display: block; +} + +.mdr-page { + background: #f8fafc; + min-height: 100vh; +} + +.mdr-header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 14px 20px; + background: #fff; + border-bottom: 1px solid #e2e8f0; + + &__left { + display: flex; + align-items: center; + gap: 12px; + } + + &__icon { + font-size: 28px; + width: 28px; + height: 28px; + color: #0f4f3c; + } + + &__title { + font-size: 15px; + font-weight: 700; + color: #0d1b2a; + } + + &__sub { + font-size: 12px; + color: #64748b; + margin-top: 2px; + } +} + +.mdr-filter-bar { + display: flex; + align-items: center; + gap: 6px; + padding: 8px 20px; + background: #f8fafc; + border-bottom: 1px solid #e2e8f0; + flex-wrap: wrap; +} + +.mdr-fb-sep { + width: 1px; + height: 22px; + background: #e2e8f0; + flex-shrink: 0; + margin: 0 4px; +} + +.mdr-filter-select { + height: 34px; + min-width: 130px; + padding: 0 10px; + border: 1px solid #e2e8f0; + border-radius: 7px; + font-size: 13px; + color: #0d1b2a; + font-family: inherit; + background: #fff; + cursor: pointer; + + &:focus { + outline: none; + border-color: #0f4f3c; + } +} + +.mdr-presets { + display: inline-flex; + gap: 4px; +} + +.mdr-preset-chip { + height: 28px; + padding: 0 12px; + border-radius: 14px; + border: 1px solid #e2e8f0; + background: #fff; + font-size: 12px; + font-weight: 600; + font-family: inherit; + color: #475569; + cursor: pointer; + transition: all 0.15s; + white-space: nowrap; + + &:hover { + border-color: #0f4f3c; + color: #0f4f3c; + background: #f0fdf4; + } + + &--active { + background: #0f4f3c; + border-color: #0f4f3c; + color: #fff; + + &:hover { + background: #0a3d2e; + } + } +} + +.mdr-date-range { + display: inline-flex; + align-items: center; + gap: 4px; + + &__sep { + color: #94a3b8; + font-size: 16px; + padding: 0 2px; + user-select: none; + } +} + +.mdr-date-box { + display: inline-flex; + align-items: center; + gap: 4px; + height: 34px; + padding: 0 6px 0 10px; + border: 1px solid #e2e8f0; + border-radius: 8px; + background: #fff; + + &:focus-within { + border-color: #0f4f3c; + } + + &__lbl { + font-size: 11px; + font-weight: 600; + color: #94a3b8; + user-select: none; + } + + &__input { + border: none; + outline: none; + font-size: 13px; + width: 76px; + font-family: inherit; + background: transparent; + cursor: pointer; + } + + &__btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + border: none; + background: none; + cursor: pointer; + color: #94a3b8; + padding: 0; + border-radius: 4px; + + mat-icon { + font-size: 16px; + width: 16px; + height: 16px; + } + + &:hover { + color: #0f4f3c; + background: #f0fdf4; + } + } +} + +.mdr-btn { + display: inline-flex; + align-items: center; + gap: 6px; + border-radius: 7px; + font-family: inherit; + font-weight: 600; + cursor: pointer; + border: 1px solid #e2e8f0; + transition: background 0.15s; + height: 32px; + padding: 0 12px; + font-size: 13px; + background: #fff; + color: #0d1b2a; + + mat-icon { + font-size: 16px; + width: 16px; + height: 16px; + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + &--new { + background: #0f4f3c; + color: #fff; + border-color: #0f4f3c; + + &:hover { + background: #0a3d2e; + } + } + + &--refresh { + padding: 0 8px; + color: #64748b; + + &:hover:not(:disabled) { + background: #f1f5f9; + } + } +} + +.mdr-table-wrap { + overflow-x: auto; +} + +.mdr-table { + width: 100%; + border-collapse: collapse; + font-size: 13px; + + th, + td { + padding: 10px 14px; + text-align: left; + border-bottom: 1px solid #f1f5f9; + } + + th { + font-size: 11px; + font-weight: 700; + color: #64748b; + text-transform: uppercase; + letter-spacing: 0.06em; + background: #f8fafc; + white-space: nowrap; + } + + .num { + text-align: right; + } +} + +.mdr-row { + transition: background 0.1s; + + &:hover td { + background: #f0fdf4; + } +} + +.mdr-amount { + font-weight: 700; + color: #0f4f3c; +} + +.mdr-dt { + font-size: 12px; + color: #64748b; + white-space: nowrap; +} + +.mdr-status { + display: inline-flex; + align-items: center; + padding: 2px 10px; + border-radius: 20px; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.04em; + white-space: nowrap; + + &--pending { + background: #fef3c7; + color: #92400e; + } + + &--approved { + background: #dcfce7; + color: #166534; + } + + &--rejected { + background: #fee2e2; + color: #991b1b; + } +} + +.cell-mono { + font-family: 'Courier New', monospace; + font-size: 12px; +} + +.mdr-voucher { + font-weight: 700; + color: #1e40af; + letter-spacing: 0.06em; +} + +.mdr-gl-name { + display: block; + font-size: 11px; + color: #64748b; + margin-top: 2px; +} + +.mdr-credit-badge { + display: inline-flex; + align-items: center; + padding: 2px 8px; + border-radius: 12px; + background: #e0f2fe; + color: #0369a1; + font-size: 11px; + font-weight: 600; +} + +.mdr-reason-row td { + background: #fff7f7; +} + +.mdr-reason-cell { + display: flex; + align-items: center; + gap: 6px; + font-size: 12px; + color: #991b1b; + font-style: italic; + padding: 6px 14px 10px; +} + +.mdr-reason-icon { + font-size: 14px; + width: 14px; + height: 14px; + color: #ef4444; +} + +.mdr-empty { + text-align: center; + padding: 60px 24px; + color: #94a3b8; + + &__icon { + font-size: 40px; + color: #cbd5e1; + } + + &__title { + font-size: 16px; + font-weight: 600; + color: #64748b; + margin: 12px 0 4px; + } + + &__text { + font-size: 13px; + color: #94a3b8; + margin: 0; + } +} diff --git a/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.ts b/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.ts new file mode 100644 index 000000000..1e4059b8f --- /dev/null +++ b/src/app/clerk/my-disbursement-requests/my-disbursement-requests.component.ts @@ -0,0 +1,209 @@ +/** + * 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 } from '@angular/forms'; +import { Router } from '@angular/router'; +import { MatIconModule } from '@angular/material/icon'; +import { MatPaginatorModule, PageEvent } from '@angular/material/paginator'; +import { MatNativeDateModule } from '@angular/material/core'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatDatepickerModule } from '@angular/material/datepicker'; +import { catchError } from 'rxjs/operators'; +import { of } from 'rxjs'; + +import { ClerkDisbursementService } from '../../cashier/clerk-disbursement.service'; +import { SettingsService } from '../../settings/settings.service'; + +@Component({ + selector: 'mifosx-my-disbursement-requests', + templateUrl: './my-disbursement-requests.component.html', + styleUrls: ['./my-disbursement-requests.component.scss'], + standalone: true, + imports: [ + CommonModule, + FormsModule, + MatIconModule, + MatPaginatorModule, + MatNativeDateModule, + MatFormFieldModule, + MatInputModule, + MatDatepickerModule + ] +}) +export class MyDisbursementRequestsComponent implements OnInit { + private service = inject(ClerkDisbursementService); + private router = inject(Router); + private settingsService = inject(SettingsService); + + requests: any[] = []; + totalRecords = 0; + pageSize = 20; + pageIndex = 0; + pageSizeOptions = [ + 10, + 20, + 50 + ]; + + filterStatus = ''; + fromDate: Date | null = null; + toDate: Date | null = null; + maxDate!: Date; + activePreset = 'today'; + loading = false; + loaded = false; + + readonly datePresets = [ + { key: 'today', label: 'Today' }, + { key: 'week', label: 'This Week' }, + { key: 'month', label: 'This Month' }, + { key: 'all', label: 'All' } + ]; + + get statusOptions(): { value: string; label: string }[] { + return [ + { value: '', label: 'All' }, + { value: 'PENDING', label: 'Pending' }, + { value: 'APPROVED', label: 'Approved' }, + { value: 'REJECTED', label: 'Rejected' } + ]; + } + + ngOnInit(): void { + const today = new Date(this.settingsService.businessDate); + today.setHours(0, 0, 0, 0); + this.maxDate = today; + this.applyPreset('today'); + } + + load(): void { + this.loading = true; + this.service + .getMyRequests( + this.filterStatus || undefined, + this.pageIndex * this.pageSize, + this.pageSize, + this.isoDate(this.fromDate), + this.isoDate(this.toDate) + ) + .pipe(catchError(() => of({ pageItems: [], totalFilteredRecords: 0 }))) + .subscribe((res: any) => { + this.requests = res?.pageItems ?? []; + this.totalRecords = Number(res?.totalFilteredRecords ?? 0); + this.loading = false; + this.loaded = true; + }); + } + + onPageChange(event: PageEvent): void { + this.pageSize = event.pageSize; + this.pageIndex = event.pageIndex; + this.load(); + } + + onFilterChange(): void { + this.pageIndex = 0; + this.load(); + } + + onFromDateChange(): void { + this.activePreset = ''; + if (this.fromDate && this.toDate && this.fromDate > this.toDate) { + this.toDate = new Date(this.fromDate); + } + this.pageIndex = 0; + this.load(); + } + + onToDateChange(): void { + this.activePreset = ''; + this.pageIndex = 0; + this.load(); + } + + applyPreset(key: string): void { + this.activePreset = key; + const today = new Date(this.settingsService.businessDate); + today.setHours(0, 0, 0, 0); + if (key === 'today') { + this.fromDate = new Date(today); + this.toDate = new Date(today); + } else if (key === 'week') { + const start = new Date(today); + start.setDate(today.getDate() - today.getDay()); + this.fromDate = start; + this.toDate = new Date(today); + } else if (key === 'month') { + this.fromDate = new Date(today.getFullYear(), today.getMonth(), 1); + this.toDate = new Date(today); + } else { + this.fromDate = null; + this.toDate = null; + } + this.pageIndex = 0; + this.load(); + } + + private isoDate(d: Date | null): string | undefined { + if (!d) return undefined; + const y = d.getFullYear(); + const m = String(d.getMonth() + 1).padStart(2, '0'); + const day = String(d.getDate()).padStart(2, '0'); + return `${y}-${m}-${day}`; + } + + newDisbursement(): void { + this.router.navigate(['/clerk/dashboard']); + } + + creditCount(req: any): number { + try { + const arr = typeof req.credit_entries === 'string' ? JSON.parse(req.credit_entries) : req.credit_entries; + return Array.isArray(arr) ? arr.length : 0; + } catch { + return 0; + } + } + + statusClass(status: string): string { + const map: Record = { + PENDING: 'mdr-status--pending', + APPROVED: 'mdr-status--approved', + REJECTED: 'mdr-status--rejected' + }; + return map[status] ?? ''; + } + + statusLabel(status: string): string { + const map: Record = { + PENDING: 'Pending Approval', + APPROVED: 'Approved', + REJECTED: 'Rejected' + }; + return map[status] ?? status; + } + + formatDateTime(val: any): string { + if (!val) return '—'; + try { + const d = new Date(val); + return d.toLocaleString('en-IN', { + day: '2-digit', + month: 'short', + year: 'numeric', + hour: '2-digit', + minute: '2-digit' + }); + } catch { + return String(val); + } + } +} diff --git a/src/app/core/shell/shell.component.html b/src/app/core/shell/shell.component.html index e3304e59a..2a331ead8 100644 --- a/src/app/core/shell/shell.component.html +++ b/src/app/core/shell/shell.component.html @@ -82,6 +82,17 @@ My Requests + + + + + + My Disbursements + @if (clerkAccountLoaded) { + +
+ +
+
+ swap_horiz +
+
Disbursement Requests
+
Review, approve or reject clerk GL disbursement requests.
+
+
+
+ + +
+ + + + +
+ @for (p of datePresets; track p.key) { + + } +
+ + + +
+
+ From + + + +
+ — +
+ To + + + +
+
+ + +
+ + + @if (loading) { +
+

Loading…

+
+ } @else if (loaded && requests.length === 0) { +
+ +

No disbursement requests

+

+ @if (filterStatus === 'PENDING') { + There are no pending disbursement requests waiting for review. + } @else { + No {{ filterStatus | lowercase }} disbursement requests found. + } +

+
+ } @else { +
+ + + + + + + + + + + + + + + + + @for (r of requests; track r.id) { + + + + + + + + + + + + + } + +
Voucher NoGL AccountDR AmountCredit EntriesPayment ModeClerkReviewed BySubmitted AtStatusAction
{{ r.voucher_no || '—' }} + {{ r.gl_account_no }} + {{ r.gl_account_name }} + ₹{{ r.dr_amount | number: '1.2-2' }} + {{ creditCount(r) }} account{{ creditCount(r) !== 1 ? 's' : '' }} + {{ r.payment_type_name || 'Transfer' }}{{ r.clerk_name }}{{ r.manager_name || r.manager_username || '—' }}{{ formatDateTime(r.submitted_at) }} + + {{ statusLabel(r.status) }} + + + +
+
+ + + } +
diff --git a/src/app/tasks/checker-inbox-and-tasks-tabs/disbursement-requests/disbursement-requests.component.scss b/src/app/tasks/checker-inbox-and-tasks-tabs/disbursement-requests/disbursement-requests.component.scss new file mode 100644 index 000000000..db4f1f7cf --- /dev/null +++ b/src/app/tasks/checker-inbox-and-tasks-tabs/disbursement-requests/disbursement-requests.component.scss @@ -0,0 +1,394 @@ +/** + * 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/. + */ + +:host { + display: block; +} + +.wri-tab { + padding: 0; +} + +.wri-action-bar { + display: flex; + align-items: center; + padding: 14px 20px; + background: #fff; + border-bottom: 1px solid #e2e8f0; + + &__left { + display: flex; + align-items: center; + gap: 12px; + } + + &__icon { + font-size: 28px; + width: 28px; + height: 28px; + color: #0f4f3c; + } + + &__title { + font-size: 15px; + font-weight: 700; + color: #0d1b2a; + } + + &__sub { + font-size: 12px; + color: #64748b; + margin-top: 2px; + } +} + +.wri-filter-bar { + display: flex; + align-items: center; + gap: 6px; + padding: 8px 20px; + background: #f8fafc; + border-bottom: 1px solid #e2e8f0; + flex-wrap: wrap; +} + +.wri-fb-sep { + width: 1px; + height: 22px; + background: #e2e8f0; + flex-shrink: 0; + margin: 0 4px; +} + +.wri-filter-select { + height: 34px; + min-width: 130px; + padding: 0 10px; + border: 1px solid #e2e8f0; + border-radius: 7px; + font-size: 13px; + color: #0d1b2a; + font-family: inherit; + background: #fff; + cursor: pointer; + + &:focus { + outline: none; + border-color: #0f4f3c; + } +} + +.wri-presets { + display: inline-flex; + gap: 4px; + align-items: center; +} + +.wri-preset-chip { + height: 28px; + padding: 0 12px; + border-radius: 14px; + border: 1px solid #e2e8f0; + background: #fff; + font-size: 12px; + font-weight: 600; + font-family: inherit; + color: #475569; + cursor: pointer; + transition: all 0.15s; + white-space: nowrap; + + &:hover { + border-color: #0f4f3c; + color: #0f4f3c; + background: #f0fdf4; + } + + &--active { + background: #0f4f3c; + border-color: #0f4f3c; + color: #fff; + + &:hover { + background: #0a3d2e; + } + } +} + +.wri-date-range { + display: inline-flex; + align-items: center; + gap: 4px; + + &__sep { + color: #94a3b8; + font-size: 16px; + font-weight: 300; + padding: 0 2px; + user-select: none; + } +} + +.wri-date-box { + display: inline-flex; + align-items: center; + gap: 4px; + height: 34px; + padding: 0 6px 0 10px; + border: 1px solid #e2e8f0; + border-radius: 8px; + background: #fff; + transition: border-color 0.15s; + + &:hover { + border-color: #cbd5e1; + } + + &:focus-within { + border-color: #0f4f3c; + } + + &__lbl { + font-size: 11px; + font-weight: 600; + color: #94a3b8; + white-space: nowrap; + user-select: none; + letter-spacing: 0.03em; + } + + &__input { + border: none; + outline: none; + font-size: 13px; + width: 76px; + color: #0d1b2a; + font-family: inherit; + background: transparent; + cursor: pointer; + } + + &__btn { + display: inline-flex; + align-items: center; + justify-content: center; + width: 22px; + height: 22px; + border: none; + background: none; + cursor: pointer; + color: #94a3b8; + padding: 0; + border-radius: 4px; + + mat-icon { + font-size: 16px; + width: 16px; + height: 16px; + } + + &:hover { + color: #0f4f3c; + background: #f0fdf4; + } + } +} + +.wri-btn { + display: inline-flex; + align-items: center; + gap: 6px; + border-radius: 7px; + font-family: inherit; + font-weight: 600; + cursor: pointer; + border: 1px solid #e2e8f0; + transition: background 0.15s; + height: 32px; + padding: 0 12px; + font-size: 13px; + background: #fff; + color: #0d1b2a; + + mat-icon { + font-size: 16px; + width: 16px; + height: 16px; + } + + &:disabled { + opacity: 0.5; + cursor: not-allowed; + } + + &--refresh { + padding: 0 8px; + color: #64748b; + + &:hover:not(:disabled) { + background: #f1f5f9; + } + } + + &--review { + background: #0f4f3c; + color: #fff; + border-color: #0f4f3c; + + &:hover { + background: #0a3d2e; + } + } +} + +.wri-table-wrap { + overflow-x: auto; +} + +.wri-table { + width: 100%; + border-collapse: collapse; + font-size: 13px; + + th, + td { + padding: 10px 14px; + text-align: left; + border-bottom: 1px solid #f1f5f9; + } + + th { + font-size: 11px; + font-weight: 700; + color: #64748b; + text-transform: uppercase; + letter-spacing: 0.06em; + background: #f8fafc; + white-space: nowrap; + } + + .num { + text-align: right; + } +} + +.wri-row { + cursor: pointer; + transition: background 0.1s; + + &:hover td { + background: #f0fdf4; + } +} + +.wri-th-id { + width: 60px; +} + +.wri-th-action { + width: 100px; + text-align: center; +} + +.wri-action-cell { + text-align: center; +} + +.wri-amount { + font-weight: 700; + color: #0f4f3c; +} + +.wri-dt { + font-size: 12px; + color: #64748b; + white-space: nowrap; +} + +.wri-status { + display: inline-flex; + align-items: center; + padding: 2px 10px; + border-radius: 20px; + font-size: 11px; + font-weight: 700; + letter-spacing: 0.04em; + white-space: nowrap; + + &--pending { + background: #fef3c7; + color: #92400e; + } + + &--approved { + background: #dcfce7; + color: #166534; + } + + &--rejected { + background: #fee2e2; + color: #991b1b; + } +} + +.cell-mono { + font-family: 'Courier New', monospace; + font-size: 12px; +} + +.wri-voucher { + font-weight: 700; + color: #1e40af; + letter-spacing: 0.06em; +} + +.wri-gl-name { + display: block; + font-size: 11px; + color: #64748b; + margin-top: 2px; +} + +.wri-credit-badge { + display: inline-flex; + align-items: center; + padding: 2px 8px; + border-radius: 12px; + background: #e0f2fe; + color: #0369a1; + font-size: 11px; + font-weight: 600; +} + +.wri-none { + color: #94a3b8; +} + +.empty-state { + text-align: center; + padding: 48px 24px; + color: #94a3b8; + + .empty-icon { + font-size: 40px; + color: #cbd5e1; + } + + .empty-title { + font-size: 16px; + font-weight: 600; + color: #64748b; + margin: 12px 0 4px; + } + + .empty-text { + font-size: 13px; + color: #94a3b8; + margin: 0; + } +} diff --git a/src/app/tasks/checker-inbox-and-tasks-tabs/disbursement-requests/disbursement-requests.component.ts b/src/app/tasks/checker-inbox-and-tasks-tabs/disbursement-requests/disbursement-requests.component.ts new file mode 100644 index 000000000..e9f382ffe --- /dev/null +++ b/src/app/tasks/checker-inbox-and-tasks-tabs/disbursement-requests/disbursement-requests.component.ts @@ -0,0 +1,216 @@ +/** + * 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 } from '@angular/forms'; +import { Router, RouterModule } from '@angular/router'; +import { MatIconModule } from '@angular/material/icon'; +import { MatPaginatorModule, PageEvent } from '@angular/material/paginator'; +import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar'; +import { MatNativeDateModule } from '@angular/material/core'; +import { MatFormFieldModule } from '@angular/material/form-field'; +import { MatInputModule } from '@angular/material/input'; +import { MatDatepickerModule } from '@angular/material/datepicker'; +import { catchError } from 'rxjs/operators'; +import { of } from 'rxjs'; + +import { ClerkDisbursementService } from '../../../cashier/clerk-disbursement.service'; +import { SettingsService } from '../../../settings/settings.service'; + +@Component({ + selector: 'mifosx-disbursement-requests', + templateUrl: './disbursement-requests.component.html', + styleUrls: ['./disbursement-requests.component.scss'], + standalone: true, + imports: [ + CommonModule, + FormsModule, + RouterModule, + MatIconModule, + MatPaginatorModule, + MatSnackBarModule, + MatNativeDateModule, + MatFormFieldModule, + MatInputModule, + MatDatepickerModule + ] +}) +export class DisbursementRequestsComponent implements OnInit { + private service = inject(ClerkDisbursementService); + private router = inject(Router); + private snackBar = inject(MatSnackBar); + private settingsService = inject(SettingsService); + + requests: any[] = []; + totalRecords = 0; + pageSize = 20; + pageIndex = 0; + pageSizeOptions = [ + 10, + 20, + 50 + ]; + + filterStatus = 'PENDING'; + fromDate: Date | null = null; + toDate: Date | null = null; + maxDate!: Date; + activePreset = 'today'; + loading = false; + loaded = false; + + readonly datePresets = [ + { key: 'today', label: 'Today' }, + { key: 'week', label: 'This Week' }, + { key: 'month', label: 'This Month' }, + { key: 'all', label: 'All' } + ]; + + get statusOptions(): { value: string; label: string }[] { + return [ + { value: 'PENDING', label: 'Pending' }, + { value: 'APPROVED', label: 'Approved' }, + { value: 'REJECTED', label: 'Rejected' } + ]; + } + + ngOnInit(): void { + const today = new Date(this.settingsService.businessDate); + today.setHours(0, 0, 0, 0); + this.maxDate = today; + this.applyPreset('today'); + } + + load(): void { + this.loading = true; + this.service + .getPendingRequests( + this.filterStatus, + this.pageIndex * this.pageSize, + this.pageSize, + this.isoDate(this.fromDate), + this.isoDate(this.toDate) + ) + .pipe(catchError(() => of({ pageItems: [], totalFilteredRecords: 0 }))) + .subscribe((res: any) => { + this.requests = res?.pageItems ?? []; + this.totalRecords = Number(res?.totalFilteredRecords ?? 0); + this.loading = false; + this.loaded = true; + }); + } + + onPageChange(event: PageEvent): void { + this.pageSize = event.pageSize; + this.pageIndex = event.pageIndex; + this.load(); + } + + onFilterChange(): void { + this.pageIndex = 0; + this.load(); + } + + onFromDateChange(): void { + this.activePreset = ''; + if (this.fromDate && this.toDate && this.fromDate > this.toDate) { + this.toDate = new Date(this.fromDate); + } + this.pageIndex = 0; + this.load(); + } + + onToDateChange(): void { + this.activePreset = ''; + this.pageIndex = 0; + this.load(); + } + + applyPreset(key: string): void { + this.activePreset = key; + const today = new Date(this.settingsService.businessDate); + today.setHours(0, 0, 0, 0); + if (key === 'today') { + this.fromDate = new Date(today); + this.toDate = new Date(today); + } else if (key === 'week') { + const start = new Date(today); + start.setDate(today.getDate() - today.getDay()); + this.fromDate = start; + this.toDate = new Date(today); + } else if (key === 'month') { + this.fromDate = new Date(today.getFullYear(), today.getMonth(), 1); + this.toDate = new Date(today); + } else { + this.fromDate = null; + this.toDate = null; + } + this.pageIndex = 0; + this.load(); + } + + private isoDate(d: Date | null): string | undefined { + if (!d) return undefined; + const y = d.getFullYear(); + const m = String(d.getMonth() + 1).padStart(2, '0'); + const day = String(d.getDate()).padStart(2, '0'); + return `${y}-${m}-${day}`; + } + + review(req: any): void { + this.router.navigate([ + '/checker-inbox-and-tasks/disbursement-requests', + req.id, + 'review' + ]); + } + + creditCount(req: any): number { + try { + const arr = typeof req.credit_entries === 'string' ? JSON.parse(req.credit_entries) : req.credit_entries; + return Array.isArray(arr) ? arr.length : 0; + } catch { + return 0; + } + } + + statusClass(status: string): string { + const map: Record = { + PENDING: 'wri-status--pending', + APPROVED: 'wri-status--approved', + REJECTED: 'wri-status--rejected' + }; + return map[status] ?? ''; + } + + statusLabel(status: string): string { + const map: Record = { + PENDING: 'Pending', + APPROVED: 'Approved', + REJECTED: 'Rejected' + }; + return map[status] ?? status; + } + + formatDateTime(val: any): string { + if (!val) return '—'; + try { + const d = new Date(val); + return d.toLocaleString('en-IN', { + day: '2-digit', + month: 'short', + year: 'numeric', + hour: '2-digit', + minute: '2-digit' + }); + } catch { + return String(val); + } + } +} diff --git a/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html b/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html index 5b0eeb230..8fe4b49af 100644 --- a/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html +++ b/src/app/tasks/checker-inbox-and-tasks/checker-inbox-and-tasks.component.html @@ -130,6 +130,18 @@ Deposit Requests + + + Disbursement Requests + diff --git a/src/app/tasks/tasks-routing.module.ts b/src/app/tasks/tasks-routing.module.ts index 73c6942c7..573faee07 100644 --- a/src/app/tasks/tasks-routing.module.ts +++ b/src/app/tasks/tasks-routing.module.ts @@ -18,6 +18,7 @@ import { CheckerInboxAndTasksComponent } from './checker-inbox-and-tasks/checker import { CheckerInboxComponent } from './checker-inbox-and-tasks-tabs/checker-inbox/checker-inbox.component'; import { WithdrawalRequestsComponent } from './checker-inbox-and-tasks-tabs/withdrawal-requests/withdrawal-requests.component'; import { DepositRequestsComponent } from './checker-inbox-and-tasks-tabs/deposit-requests/deposit-requests.component'; +import { DisbursementRequestsComponent } from './checker-inbox-and-tasks-tabs/disbursement-requests/disbursement-requests.component'; import { ClientApprovalComponent } from './checker-inbox-and-tasks-tabs/client-approval/client-approval.component'; import { LoanApprovalComponent } from './checker-inbox-and-tasks-tabs/loan-approval/loan-approval.component'; import { LoanDisbursalComponent } from './checker-inbox-and-tasks-tabs/loan-disbursal/loan-disbursal.component'; @@ -113,6 +114,11 @@ const routes: Routes = [ path: 'deposit-requests', component: DepositRequestsComponent, data: { title: 'Deposit Requests' } + }, + { + path: 'disbursement-requests', + component: DisbursementRequestsComponent, + data: { title: 'Disbursement Requests' } } ] }, @@ -139,6 +145,19 @@ const routes: Routes = [ data: { title: 'Review Withdrawal Request', breadcrumb: 'Review Withdrawal' } } ] + }, + { + path: 'checker-inbox-and-tasks/disbursement-requests', + children: [ + { + path: ':id/review', + loadComponent: () => + import('../clerk/disbursement-review/disbursement-review.component').then( + (m) => m.DisbursementReviewComponent + ), + data: { title: 'Review Disbursement Request', breadcrumb: 'Review Disbursement' } + } + ] } ]) ]; diff --git a/src/environments/.env.ts b/src/environments/.env.ts index 60ac69e29..ddb493573 100644 --- a/src/environments/.env.ts +++ b/src/environments/.env.ts @@ -9,8 +9,8 @@ /* tslint:disable */ export default { 'mifos_x': { - 'version': '260615', - 'hash': 'e5d6cd32' + 'version': '260616', + 'hash': '89d11671' }, 'allow_switching_backend_instance': true };