cloud-ide-fees 0.0.10 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/cloud-ide-fees.mjs +167 -151
- package/fesm2022/cloud-ide-fees.mjs.map +1 -1
- package/index.d.ts +4 -4
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, inject, Injectable, DestroyRef, viewChild, signal, computed, input, ViewChild, output } from '@angular/core';
|
|
2
|
+
import { Component, inject, Injectable, DestroyRef, viewChild, signal, computed, input, ChangeDetectorRef, ViewChild, output } from '@angular/core';
|
|
3
3
|
import { authGuard } from 'cloud-ide-auth';
|
|
4
4
|
import { HttpClient } from '@angular/common/http';
|
|
5
5
|
import { generateStringFromObject, cidePath, hostManagerRoutesUrl, feesRoutesUrl, MFeeStructure, generateObjectFromString, AcaClassPrgBranchListPayload, academicsRoutesUrl, MPrgTrmSection, FeeStructureSaveUpdatePayload, MFeePayment, MFeePaymentInsertUpdatePayload, MFeeReceiptTemplateInsertUpdatePayload, MFeeReceiptTemplate, MFeeReceiptTemplateGetByIdPayload } from 'cloud-ide-lms-model';
|
|
@@ -9,7 +9,7 @@ import * as i1$1 from '@angular/forms';
|
|
|
9
9
|
import { FormsModule, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
|
|
10
10
|
import { Router, ActivatedRoute } from '@angular/router';
|
|
11
11
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
12
|
-
import { ConfirmationService, NotificationService, CideIconComponent, CideEleButtonComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideInputComponent, CideTextareaComponent, CideEleTabComponent, CideSelectComponent } from 'cloud-ide-element';
|
|
12
|
+
import { ConfirmationService, NotificationService, CideIconComponent, CideEleButtonComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideInputComponent, CideTextareaComponent, CideEleTabComponent, CideSelectComponent, CurrencyPipe } from 'cloud-ide-element';
|
|
13
13
|
import { AppStateHelperService, CideLytSharedWrapperComponent, AppStateService } from 'cloud-ide-layout';
|
|
14
14
|
import { ENTITY_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, CLASS_PROGRAM_MASTER_SERVICE_TOKEN, PROGRAM_TERM_SECTION_SERVICE_TOKEN, ProgramSectionSelectorWrapperComponent } from 'cloud-ide-shared';
|
|
15
15
|
import { CideCoreGeneralMasterService } from 'cloud-ide-core';
|
|
@@ -2319,7 +2319,7 @@ class FeeStructureCreateComponent {
|
|
|
2319
2319
|
this.breadcrumbData.set(additionalItems);
|
|
2320
2320
|
}
|
|
2321
2321
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeStructureCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2322
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeStructureCreateComponent, isStandalone: true, selector: "lib-cide-fee-structure-create", ngImport: i0, template: "<!-- Fee Structure Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n \n <!-- Back Button in Breadcrumb Area (View Mode Only) -->\n @if (isViewMode()) {\n <div breadcrumb-actions>\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"arrow_back\">\n Back to List\n </button>\n </div>\n }\n \n <div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"feeStructureForm\" \n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Tab Navigation -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-w-full tw-px-2 tw-py-0\">\n <cide-ele-tab [tabs]=\"feeStructureTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\n (tabChange)=\"onTabChange($event)\">\n </cide-ele-tab>\n </div>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-4 tw-py-4\">\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n @switch (activeTab()) {\n\n @case ('basic') {\n <!-- Basic Information -->\n <div class=\"tw-space-y-4\">\n <!-- First Row: Fee Code (small), Fee Name, Academic Year - Always on one row -->\n <div class=\"tw-grid\" style=\"grid-template-columns: 170px 1fr 1fr; gap: 1rem;\">\n <cide-ele-input label=\"Fee Structure Code\" formControlName=\"fees_structure_code\"\n placeholder=\"Auto-generated by API\" size=\"sm\" [disabled]=\"isEditMode()\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Fee Structure Name\" formControlName=\"fees_structure_name\"\n placeholder=\"e.g., Grade 10 Fee Structure 2024-25\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select \n label=\"Academic Year\" \n formControlName=\"fees_academic_year_id_acayr\"\n [options]=\"getAcademicYearOptions()\"\n [loading]=\"academicYearLoading()\"\n [disabled]=\"true\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div>\n <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n placeholder=\"Enter detailed description of the fee structure...\"\n rows=\"2\" size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n <!-- Academic Dropdowns - Using Program Section Selector Component -->\n \n <cide-shared-program-section-selector-wrapper\n [formGroup]=\"feeStructureForm\"\n [classProgramControlName]=\"'fees_class_program_id_acacpm'\"\n [branchControlName]=\"'fees_class_program_branch_id_acabrn'\"\n [termControlName]=\"'fees_class_program_term_id_acapt'\"\n [sectionControlName]=\"'fees_program_term_section_id_acapts'\"\n [academicYearId]=\"feeStructureForm.get('fees_academic_year_id_acayr')?.value\"\n [entityId]=\"feeStructureForm.get('fees_entity_id_syen')?.value\"\n [disabled]=\"isViewMode()\"\n [showLabels]=\"true\"\n [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\">\n </cide-shared-program-section-selector-wrapper>\n\n <!-- Reservation Category Dropdown -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mt-4\">\n <cide-ele-select \n label=\"Reservation Category\" \n formControlName=\"fees_student_category_id_sygms\"\n [options]=\"studentCategories()\"\n [loading]=\"studentCategoriesLoading()\"\n placeholder=\"Select reservation category\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n <cide-ele-input formControlName=\"fees_is_active\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\n <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this fee structure</span>\n </div>\n </div>\n </div>\n }\n\n @case ('items') {\n <!-- Fee Items Section -->\n <div class=\"tw-space-y-3\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <div>\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-m-0\">Fee Items</h6>\n <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Configure individual fee items for this structure</p>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-text-right\">\n <div class=\"tw-text-xs tw-text-gray-500\">Total Amount</div>\n <div class=\"tw-text-base tw-font-bold tw-text-green-600\">{{ formatCurrency(totalAmount()) }}</div>\n </div>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" leftIcon=\"add\"\n (click)=\"addFeeItem()\">\n Add Fee Item\n </button>\n </div>\n </div>\n\n <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-pr-2\">\n @for (item of feeItemsArray.controls; track $index; let itemIndex = $index) {\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm hover:tw-shadow-md tw-transition-shadow tw-p-3\"\n [formGroupName]=\"itemIndex\">\n \n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-bg-blue-100 tw-p-1.5 tw-rounded\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">receipt</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">Item #{{ itemIndex + 1 }}</h6>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n @if (itemIndex > 0) {\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n (click)=\"moveItemUp(itemIndex)\" title=\"Move Up\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_upward</cide-ele-icon>\n </button>\n }\n @if (itemIndex < feeItemsArray.length - 1) {\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n (click)=\"moveItemDown(itemIndex)\" title=\"Move Down\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_downward</cide-ele-icon>\n </button>\n }\n <button cideEleButton type=\"button\" variant=\"danger\" size=\"xs\" leftIcon=\"delete\"\n (click)=\"removeFeeItem(itemIndex)\"\n [disabled]=\"feeItemsArray.length === 1\">\n Remove\n </button>\n </div>\n </div>\n\n <!-- Category, Code, Name in one row -->\n <div class=\"tw-grid\" style=\"grid-template-columns: 1fr 170px 1fr; gap: 1rem;\">\n <cide-ele-select \n label=\"Category\" \n formControlName=\"feesi_category_id_sygms\"\n [options]=\"feeCategoriesOptions()\"\n [loading]=\"feeCategoriesLoading()\"\n size=\"sm\"\n placeholder=\"Select Fee Category\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Item Code\" \n formControlName=\"feesi_item_code\"\n size=\"sm\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Item Name\" \n formControlName=\"feesi_item_name\"\n size=\"sm\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-mt-2\">\n <cide-ele-textarea \n label=\"Description\" \n formControlName=\"feesi_description\"\n rows=\"1\" \n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n <!-- Amount Section -->\n <div class=\"tw-mt-2\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n <cide-ele-input \n [label]=\"item.get('feesi_is_amount_editable')?.value ? 'Base Amount (Default)' : 'Amount'\" \n formControlName=\"feesi_amount\"\n type=\"number\"\n size=\"sm\"\n [title]=\"item.get('feesi_is_amount_editable')?.value ? 'Default amount used when applying fee. Can be edited per student if editable.' : 'Fixed fee amount'\">\n </cide-ele-input>\n </div>\n\n <!-- Amount Editable Option -->\n <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2\">\n <cide-ele-input formControlName=\"feesi_is_amount_editable\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <div class=\"tw-flex-1\">\n <span class=\"tw-text-xs tw-font-semibold tw-text-blue-900\">Allow Amount to be Edited</span>\n <p class=\"tw-text-xs tw-text-blue-700 tw-mt-0.5\">\n Enable this for fees that vary per student (e.g., Transport fee based on distance). \n When applying fees, you'll be asked to enter the amount within the specified range.\n </p>\n </div>\n </div>\n\n <!-- Min/Max Amount Fields (shown when editable is checked) -->\n @if (item.get('feesi_is_amount_editable')?.value) {\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n <cide-ele-input \n label=\"Minimum Amount\" \n formControlName=\"feesi_min_amount\"\n type=\"number\"\n size=\"sm\"\n placeholder=\"No minimum\"\n title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Maximum Amount\" \n formControlName=\"feesi_max_amount\"\n type=\"number\"\n size=\"sm\"\n placeholder=\"No maximum\"\n title=\"Maximum amount allowed when editing (leave empty for no maximum)\">\n </cide-ele-input>\n </div>\n }\n </div>\n </div>\n\n <!-- Additional Options -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2 tw-mt-2\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_is_mandatory\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Mandatory</span>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_is_refundable\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Refundable</span>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_is_installment_allowed\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Installment Allowed</span>\n </div>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n @if (item.get('feesi_is_installment_allowed')?.value) {\n <cide-ele-input \n label=\"Installment Count\" \n formControlName=\"feesi_installment_count\"\n type=\"number\"\n size=\"sm\">\n </cide-ele-input>\n }\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_tax_applicable\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Tax Applicable</span>\n </div>\n </div>\n\n @if (item.get('feesi_tax_applicable')?.value) {\n <div class=\"tw-mt-2\">\n <cide-ele-input \n label=\"Tax Percentage\" \n formControlName=\"feesi_tax_percentage\"\n type=\"number\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n }\n\n <!-- Installment Details Table -->\n <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">schedule</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">\n @if (item.get('feesi_is_installment_allowed')?.value) {\n Installment Details ({{ item.get('feesi_installment_count')?.value || 1 }} Installments)\n } @else {\n Payment Details (Single Payment)\n }\n </h6>\n </div>\n </div>\n\n <div formArrayName=\"installments\" class=\"tw-space-y-3\">\n @for (installment of getInstallmentsArray(itemIndex).controls; track $index; let installmentIndex = $index) {\n <div class=\"tw-bg-white tw-rounded tw-border tw-border-gray-300 tw-p-3\"\n [formGroupName]=\"installmentIndex\">\n \n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-bg-blue-100 tw-p-1 tw-rounded\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">payments</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">\n @if (item.get('feesi_is_installment_allowed')?.value) {\n Installment #{{ installment.get('installment_number')?.value }}\n } @else {\n Payment Details\n }\n </h6>\n </div>\n <div class=\"tw-text-sm tw-font-medium tw-text-green-600\">\n Amount: {{ formatCurrency(installment.get('installment_amount')?.value || 0) }}\n </div>\n </div>\n\n <!-- Installment Amount Distribution -->\n @if (item.get('feesi_is_installment_allowed')?.value) {\n <div class=\"tw-p-2 tw-bg-yellow-50 tw-rounded tw-border tw-border-yellow-200 tw-mb-2\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2\">\n <cide-ele-select \n label=\"Distribution Type\" \n formControlName=\"distribution_type\"\n [options]=\"distributionTypeOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n <cide-ele-input \n label=\"Percentage (%)\" \n formControlName=\"percentage\"\n type=\"number\"\n size=\"sm\"\n title=\"Percentage of total amount for this installment\">\n </cide-ele-input>\n <div class=\"tw-flex tw-flex-col tw-items-end tw-justify-end tw-gap-1\">\n @if (installmentIndex > 0) {\n <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\n Previous: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) }}%\n </div>\n }\n <div class=\"tw-text-xs tw-text-gray-600\">\n Calculated: {{ formatCurrency((item.get('feesi_amount')?.value || 0) * (installment.get('percentage')?.value || 0) / 100) }}\n </div>\n @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex > 0) {\n <div class=\"tw-text-xs tw-font-semibold\" [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\" [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0) }}%\n </div>\n }\n </div>\n }\n\n @if (installment.get('distribution_type')?.value === 'FIXED_AMOUNT') {\n <cide-ele-input \n label=\"Fixed Amount\" \n formControlName=\"fixed_amount\"\n type=\"number\"\n size=\"sm\"\n title=\"Fixed amount for this installment\">\n </cide-ele-input>\n }\n </div>\n </div>\n }\n\n <!-- Due Date Fields -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mb-2\">\n <cide-ele-input \n label=\"Due Date Offset (Days from Assignment)\" \n formControlName=\"due_date_offset_days\"\n type=\"number\"\n size=\"sm\"\n title=\"Days from assignment date\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Due Date (Fixed Date - Alternative)\" \n formControlName=\"due_date\"\n type=\"date\"\n size=\"sm\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n </div>\n\n <!-- Collection Window -->\n <div class=\"tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-3 tw-h-3\">schedule</cide-ele-icon>\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-m-0\">Collection Window</h6>\n </div>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n <cide-ele-input \n label=\"Start Offset (Days from Assignment)\" \n formControlName=\"collection_start_offset_days\"\n type=\"number\"\n size=\"sm\"\n title=\"Days from assignment date when collection can start\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"End Offset (Days from Assignment)\" \n formControlName=\"collection_end_offset_days\"\n type=\"number\"\n size=\"sm\"\n title=\"Days from assignment date when collection window ends\">\n </cide-ele-input>\n </div>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n <cide-ele-input \n label=\"Start Date (Fixed Date - Alternative)\" \n formControlName=\"collection_start_date\"\n type=\"date\"\n size=\"sm\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"End Date (Fixed Date - Alternative)\" \n formControlName=\"collection_end_date\"\n type=\"date\"\n size=\"sm\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (feeItemsArray.length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <div class=\"tw-bg-white tw-p-3 tw-rounded-full tw-w-12 tw-h-12 tw-mx-auto tw-mb-3 tw-flex tw-items-center tw-justify-center\">\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400\">receipt</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-1\">No Fee Items Yet</h6>\n <p class=\"tw-text-xs tw-text-gray-500\">Click \"Add Fee Item\" to start adding fee items to this structure.</p>\n </div>\n }\n </div>\n }\n }\n \n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n\n @if (!isInstallmentPercentagesValid()) {\n <div class=\"tw-w-full tw-mb-3 tw-p-2 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded tw-text-sm\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-text-red-700\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">error</cide-ele-icon>\n <span class=\"tw-font-medium\">Validation Error:</span>\n </div>\n <p class=\"tw-text-red-600 tw-mt-1 tw-ml-6\">\n All installment percentages must total exactly 100% before saving. Please adjust the percentages to continue.\n </p>\n </div>\n }\n \n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" \n [loading]=\"submitting()\" \n leftIcon=\"save\">\n {{ isEditMode() ? 'Update Fee Structure' : 'Create Fee Structure' }}\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n </form>\n </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
|
|
2322
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeStructureCreateComponent, isStandalone: true, selector: "lib-cide-fee-structure-create", ngImport: i0, template: "<!-- Fee Structure Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n \n <!-- Back Button in Breadcrumb Area (View Mode Only) -->\n @if (isViewMode()) {\n <div breadcrumb-actions>\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"arrow_back\">\n Back to List\n </button>\n </div>\n }\n \n <div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"feeStructureForm\" \n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Tab Navigation -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-w-full tw-px-2 tw-py-0\">\n <cide-ele-tab [tabs]=\"feeStructureTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\n (tabChange)=\"onTabChange($event)\">\n </cide-ele-tab>\n </div>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-4 tw-py-4\">\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n @switch (activeTab()) {\n\n @case ('basic') {\n <!-- Basic Information -->\n <div class=\"tw-space-y-4\">\n <!-- First Row: Fee Code (small), Fee Name, Academic Year - Always on one row -->\n <div class=\"tw-grid\" style=\"grid-template-columns: 170px 1fr 1fr; gap: 1rem;\">\n <cide-ele-input label=\"Fee Structure Code\" formControlName=\"fees_structure_code\"\n placeholder=\"Auto-generated by API\" size=\"sm\" [disabled]=\"isEditMode()\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Fee Structure Name\" formControlName=\"fees_structure_name\"\n placeholder=\"e.g., Grade 10 Fee Structure 2024-25\" size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-select \n label=\"Academic Year\" \n formControlName=\"fees_academic_year_id_acayr\"\n [options]=\"getAcademicYearOptions()\"\n [loading]=\"academicYearLoading()\"\n [disabled]=\"true\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div>\n <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n placeholder=\"Enter detailed description of the fee structure...\"\n rows=\"2\" size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n <!-- Academic Dropdowns - Using Program Section Selector Component -->\n \n <cide-shared-program-section-selector-wrapper\n [formGroup]=\"feeStructureForm\"\n [classProgramControlName]=\"'fees_class_program_id_acacpm'\"\n [branchControlName]=\"'fees_class_program_branch_id_acabrn'\"\n [termControlName]=\"'fees_class_program_term_id_acapt'\"\n [sectionControlName]=\"'fees_program_term_section_id_acapts'\"\n [academicYearId]=\"feeStructureForm.get('fees_academic_year_id_acayr')?.value\"\n [entityId]=\"feeStructureForm.get('fees_entity_id_syen')?.value\"\n [disabled]=\"isViewMode()\"\n [showLabels]=\"true\"\n [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\">\n </cide-shared-program-section-selector-wrapper>\n\n <!-- Reservation Category Dropdown -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mt-4\">\n <cide-ele-select \n label=\"Reservation Category\" \n formControlName=\"fees_student_category_id_sygms\"\n [options]=\"studentCategories()\"\n [loading]=\"studentCategoriesLoading()\"\n placeholder=\"Select reservation category\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n <cide-ele-input formControlName=\"fees_is_active\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\n <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this fee structure</span>\n </div>\n </div>\n </div>\n }\n\n @case ('items') {\n <!-- Fee Items Section -->\n <div class=\"tw-space-y-3\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <div>\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-m-0\">Fee Items</h6>\n <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Configure individual fee items for this structure</p>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-text-right\">\n <div class=\"tw-text-xs tw-text-gray-500\">Total Amount</div>\n <div class=\"tw-text-base tw-font-bold tw-text-green-600\">{{ formatCurrency(totalAmount()) }}</div>\n </div>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" leftIcon=\"add\"\n (click)=\"addFeeItem()\">\n Add Fee Item\n </button>\n </div>\n </div>\n\n <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-pr-2\">\n @for (item of feeItemsArray.controls; track $index; let itemIndex = $index) {\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm hover:tw-shadow-md tw-transition-shadow tw-p-3\"\n [formGroupName]=\"itemIndex\">\n \n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-bg-blue-100 tw-p-1.5 tw-rounded\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">receipt</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">Item #{{ itemIndex + 1 }}</h6>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n @if (itemIndex > 0) {\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n (click)=\"moveItemUp(itemIndex)\" title=\"Move Up\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_upward</cide-ele-icon>\n </button>\n }\n @if (itemIndex < feeItemsArray.length - 1) {\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n (click)=\"moveItemDown(itemIndex)\" title=\"Move Down\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_downward</cide-ele-icon>\n </button>\n }\n <button cideEleButton type=\"button\" variant=\"danger\" size=\"xs\" leftIcon=\"delete\"\n (click)=\"removeFeeItem(itemIndex)\"\n [disabled]=\"feeItemsArray.length === 1\">\n Remove\n </button>\n </div>\n </div>\n\n <!-- Category, Code, Name in one row -->\n <div class=\"tw-grid\" style=\"grid-template-columns: 1fr 170px 1fr; gap: 1rem;\">\n <cide-ele-select \n label=\"Category\" \n formControlName=\"feesi_category_id_sygms\"\n [options]=\"feeCategoriesOptions()\"\n [loading]=\"feeCategoriesLoading()\"\n size=\"sm\"\n placeholder=\"Select Fee Category\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Item Code\" \n formControlName=\"feesi_item_code\"\n size=\"sm\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Item Name\" \n formControlName=\"feesi_item_name\"\n size=\"sm\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-mt-2\">\n <cide-ele-textarea \n label=\"Description\" \n formControlName=\"feesi_description\"\n rows=\"1\" \n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n <!-- Amount Section -->\n <div class=\"tw-mt-2\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n <cide-ele-input \n [label]=\"item.get('feesi_is_amount_editable')?.value ? 'Base Amount (Default)' : 'Amount'\" \n formControlName=\"feesi_amount\"\n type=\"number\"\n size=\"sm\"\n [title]=\"item.get('feesi_is_amount_editable')?.value ? 'Default amount used when applying fee. Can be edited per student if editable.' : 'Fixed fee amount'\">\n </cide-ele-input>\n </div>\n\n <!-- Amount Editable Option -->\n <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2\">\n <cide-ele-input formControlName=\"feesi_is_amount_editable\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <div class=\"tw-flex-1\">\n <span class=\"tw-text-xs tw-font-semibold tw-text-blue-900\">Allow Amount to be Edited</span>\n <p class=\"tw-text-xs tw-text-blue-700 tw-mt-0.5\">\n Enable this for fees that vary per student (e.g., Transport fee based on distance). \n When applying fees, you'll be asked to enter the amount within the specified range.\n </p>\n </div>\n </div>\n\n <!-- Min/Max Amount Fields (shown when editable is checked) -->\n @if (item.get('feesi_is_amount_editable')?.value) {\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n <cide-ele-input \n label=\"Minimum Amount\" \n formControlName=\"feesi_min_amount\"\n type=\"number\"\n size=\"sm\"\n placeholder=\"No minimum\"\n title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Maximum Amount\" \n formControlName=\"feesi_max_amount\"\n type=\"number\"\n size=\"sm\"\n placeholder=\"No maximum\"\n title=\"Maximum amount allowed when editing (leave empty for no maximum)\">\n </cide-ele-input>\n </div>\n }\n </div>\n </div>\n\n <!-- Additional Options -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2 tw-mt-2\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_is_mandatory\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Mandatory</span>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_is_refundable\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Refundable</span>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_is_installment_allowed\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Installment Allowed</span>\n </div>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n @if (item.get('feesi_is_installment_allowed')?.value) {\n <cide-ele-input \n label=\"Installment Count\" \n formControlName=\"feesi_installment_count\"\n type=\"number\"\n size=\"sm\">\n </cide-ele-input>\n }\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_tax_applicable\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Tax Applicable</span>\n </div>\n </div>\n\n @if (item.get('feesi_tax_applicable')?.value) {\n <div class=\"tw-mt-2\">\n <cide-ele-input \n label=\"Tax Percentage\" \n formControlName=\"feesi_tax_percentage\"\n type=\"number\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n }\n\n <!-- Installment Details Table -->\n <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">schedule</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">\n @if (item.get('feesi_is_installment_allowed')?.value) {\n Installment Details ({{ item.get('feesi_installment_count')?.value || 1 }} Installments)\n } @else {\n Payment Details (Single Payment)\n }\n </h6>\n </div>\n </div>\n\n <div formArrayName=\"installments\" class=\"tw-space-y-3\">\n @for (installment of getInstallmentsArray(itemIndex).controls; track $index; let installmentIndex = $index) {\n <div class=\"tw-bg-white tw-rounded tw-border tw-border-gray-300 tw-p-3\"\n [formGroupName]=\"installmentIndex\">\n \n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-bg-blue-100 tw-p-1 tw-rounded\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">payments</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">\n @if (item.get('feesi_is_installment_allowed')?.value) {\n Installment #{{ installment.get('installment_number')?.value }}\n } @else {\n Payment Details\n }\n </h6>\n </div>\n <div class=\"tw-text-sm tw-font-medium tw-text-green-600\">\n Amount: {{ formatCurrency(installment.get('installment_amount')?.value || 0) }}\n </div>\n </div>\n\n <!-- Installment Amount Distribution -->\n @if (item.get('feesi_is_installment_allowed')?.value) {\n <div class=\"tw-p-2 tw-bg-yellow-50 tw-rounded tw-border tw-border-yellow-200 tw-mb-2\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2\">\n <cide-ele-select \n label=\"Distribution Type\" \n formControlName=\"distribution_type\"\n [options]=\"distributionTypeOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n <cide-ele-input \n label=\"Percentage (%)\" \n formControlName=\"percentage\"\n type=\"number\"\n size=\"sm\"\n title=\"Percentage of total amount for this installment\">\n </cide-ele-input>\n <div class=\"tw-flex tw-flex-col tw-items-end tw-justify-end tw-gap-1\">\n @if (installmentIndex > 0) {\n <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\n Previous: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) }}%\n </div>\n }\n <div class=\"tw-text-xs tw-text-gray-600\">\n Calculated: {{ formatCurrency((item.get('feesi_amount')?.value || 0) * (installment.get('percentage')?.value || 0) / 100) }}\n </div>\n @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex > 0) {\n <div class=\"tw-text-xs tw-font-semibold\" [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\" [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0) }}%\n </div>\n }\n </div>\n }\n\n @if (installment.get('distribution_type')?.value === 'FIXED_AMOUNT') {\n <cide-ele-input \n label=\"Fixed Amount\" \n formControlName=\"fixed_amount\"\n type=\"number\"\n size=\"sm\"\n title=\"Fixed amount for this installment\">\n </cide-ele-input>\n }\n </div>\n </div>\n }\n\n <!-- Due Date Fields -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mb-2\">\n <cide-ele-input \n label=\"Due Date Offset (Days from Assignment)\" \n formControlName=\"due_date_offset_days\"\n type=\"number\"\n size=\"sm\"\n title=\"Days from assignment date\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Due Date (Fixed Date - Alternative)\" \n formControlName=\"due_date\"\n type=\"date\"\n size=\"sm\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n </div>\n\n <!-- Collection Window -->\n <div class=\"tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-3 tw-h-3\">schedule</cide-ele-icon>\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-m-0\">Collection Window</h6>\n </div>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n <cide-ele-input \n label=\"Start Offset (Days from Assignment)\" \n formControlName=\"collection_start_offset_days\"\n type=\"number\"\n size=\"sm\"\n title=\"Days from assignment date when collection can start\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"End Offset (Days from Assignment)\" \n formControlName=\"collection_end_offset_days\"\n type=\"number\"\n size=\"sm\"\n title=\"Days from assignment date when collection window ends\">\n </cide-ele-input>\n </div>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n <cide-ele-input \n label=\"Start Date (Fixed Date - Alternative)\" \n formControlName=\"collection_start_date\"\n type=\"date\"\n size=\"sm\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"End Date (Fixed Date - Alternative)\" \n formControlName=\"collection_end_date\"\n type=\"date\"\n size=\"sm\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (feeItemsArray.length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <div class=\"tw-bg-white tw-p-3 tw-rounded-full tw-w-12 tw-h-12 tw-mx-auto tw-mb-3 tw-flex tw-items-center tw-justify-center\">\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400\">receipt</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-1\">No Fee Items Yet</h6>\n <p class=\"tw-text-xs tw-text-gray-500\">Click \"Add Fee Item\" to start adding fee items to this structure.</p>\n </div>\n }\n </div>\n }\n }\n \n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n\n @if (!isInstallmentPercentagesValid()) {\n <div class=\"tw-w-full tw-mb-3 tw-p-2 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded tw-text-sm\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-text-red-700\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">error</cide-ele-icon>\n <span class=\"tw-font-medium\">Validation Error:</span>\n </div>\n <p class=\"tw-text-red-600 tw-mt-1 tw-ml-6\">\n All installment percentages must total exactly 100% before saving. Please adjust the percentages to continue.\n </p>\n </div>\n }\n \n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" \n [loading]=\"submitting()\" \n leftIcon=\"save\">\n {{ isEditMode() ? 'Update Fee Structure' : 'Create Fee Structure' }}\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n </form>\n </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
|
|
2323
2323
|
}
|
|
2324
2324
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeStructureCreateComponent, decorators: [{
|
|
2325
2325
|
type: Component,
|
|
@@ -3579,7 +3579,7 @@ class FeeAssignmentCreateComponent {
|
|
|
3579
3579
|
this.breadcrumbData.set(additionalItems);
|
|
3580
3580
|
}
|
|
3581
3581
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3582
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeAssignmentCreateComponent, isStandalone: true, selector: "cide-fee-assignment-create", ngImport: i0, template: "<!-- Fee Assignment Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n <div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"assignmentForm\" \n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Form Content -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n <div class=\"tw-space-y-6\">\n\n <!-- Student Information -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Student Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div>\n <cide-ele-input \n label=\"Student *\" \n formControlName=\"student_search\"\n placeholder=\"Search student by name or ID...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </div>\n\n <cide-ele-select \n label=\"Academic Year *\" \n formControlName=\"feeas_academic_year_id_acayr\"\n [options]=\"getAcademicYearOptions()\"\n [loading]=\"academicYearLoading()\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-select>\n </div>\n \n <!-- Hidden entity field (populated from app state) -->\n <input type=\"hidden\" formControlName=\"feeas_entity_id_syen\">\n </div>\n\n <!-- Academic Information (for fee structure loading) -->\n @if (showFeeStructureField()) {\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-pb-2 tw-border-b-2 tw-border-indigo-200 dark:tw-border-indigo-800 tw-mb-4\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-indigo-600 dark:tw-text-indigo-400\">school</cide-ele-icon>\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">Academic Information</h6>\n </div>\n \n <cide-shared-program-section-selector-wrapper\n [formGroup]=\"assignmentForm\"\n classProgramControlName=\"class_program_id\"\n branchControlName=\"branch_id\"\n termControlName=\"term_id\"\n sectionControlName=\"section_id\"\n [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n [disabled]=\"isViewMode()\"\n (valuesChange)=\"onProgramSectionValuesChange($event)\">\n </cide-shared-program-section-selector-wrapper>\n </div>\n }\n\n <!-- Fee Information -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Fee Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Source *\" \n formControlName=\"fee_source\"\n [options]=\"feeSourceOptions\"\n size=\"sm\"\n leadingIcon=\"source\">\n </cide-ele-select>\n </div>\n\n <!-- Custom Fee Fields -->\n @if (showCustomFeeFields()) {\n <div class=\"tw-mt-4 tw-space-y-4\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Category *\" \n formControlName=\"feeas_fee_category_sygms\"\n [options]=\"feeCategoryOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Fee Name *\" \n formControlName=\"feeas_fee_name\"\n placeholder=\"Enter fee name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Type *\" \n formControlName=\"feeas_fee_type\"\n [options]=\"feeTypeOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Amount *\" \n formControlName=\"feeas_original_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n size=\"sm\"\n leadingIcon=\"currency_rupee\">\n </cide-ele-input>\n </div>\n </div>\n }\n </div>\n\n <!-- Payment Details -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Payment Details</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-input \n label=\"Due Date *\" \n formControlName=\"feeas_due_date\"\n type=\"date\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Installments\" \n formControlName=\"feeas_installment_count\"\n type=\"number\"\n placeholder=\"1\"\n min=\"1\"\n max=\"12\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Fee Insights (for fee structure) -->\n @if (showFeeStructureField() && assignmentForm.get('term_id')?.value) {\n <div class=\"tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-blue-600 dark:tw-text-blue-400\">account_balance</cide-ele-icon>\n Fee Insights\n </h6>\n @if (feesLoading()) {\n <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading fees...</span>\n }\n </div>\n\n @if (feesLoading()) {\n <div class=\"tw-text-center tw-py-4\">\n <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading applicable fees...</span>\n </div>\n } @else if (applicableFees().length > 0) {\n <div class=\"tw-overflow-x-auto\">\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n <thead class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n <tr>\n <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Fee Name</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Category</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Original Amount</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Discount</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Scholarship</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Final Amount</th>\n </tr>\n </thead>\n <tbody class=\"tw-bg-white dark:tw-bg-gray-800 tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n @for (fee of applicableFees(); track getFeeId(fee)) {\n <tr>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100\">{{ getFeeName(fee) }}</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400\">{{ getFeeCategory(fee) }}</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">{{ formatCurrency(getFeeAmount(fee)) }}</td>\n <td class=\"tw-px-4 tw-py-2\">\n <cide-ele-input\n type=\"number\"\n [formControl]=\"getDiscountControl(getFeeId(fee))\"\n placeholder=\"0.00\"\n size=\"sm\"\n class=\"tw-w-24\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </td>\n <td class=\"tw-px-4 tw-py-2\">\n <cide-ele-input\n type=\"number\"\n [formControl]=\"getScholarshipControl(getFeeId(fee))\"\n placeholder=\"0.00\"\n size=\"sm\"\n class=\"tw-w-24\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n {{ formatCurrency(calculateFinalAmount(fee)) }}\n </td>\n </tr>\n }\n </tbody>\n <tfoot class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n <tr>\n <td colspan=\"2\" class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">Total:</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n {{ formatCurrency(totalOriginalAmount()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-text-right\">\n {{ formatCurrency(totalDiscount()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-purple-600 dark:tw-text-purple-400 tw-text-right\">\n {{ formatCurrency(totalScholarship()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 dark:tw-text-green-400 tw-text-right\">\n {{ formatCurrency(totalFinalAmount()) }}\n </td>\n </tr>\n </tfoot>\n </table>\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-4 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">\n No fee structure found for the selected program/term. Please select a program and term to view applicable fees.\n </div>\n }\n </div>\n }\n\n <!-- Discounts & Scholarships (for custom fees) -->\n @if (showCustomFeeFields()) {\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Discounts & Scholarships</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-input \n label=\"Discount Amount\" \n formControlName=\"feeas_discount_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n min=\"0\"\n size=\"sm\"\n leadingIcon=\"percent\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Scholarship Amount\" \n formControlName=\"feeas_scholarship_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n min=\"0\"\n size=\"sm\"\n leadingIcon=\"school\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Amount Summary (for custom fees) -->\n <div class=\"tw-bg-gradient-to-r tw-from-blue-50 dark:tw-from-blue-900/20 tw-to-indigo-50 dark:tw-to-indigo-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-blue-900 dark:tw-text-blue-100 tw-mb-3\">Amount Summary</h6>\n \n <div class=\"tw-space-y-2\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Original Amount:</span>\n <span class=\"tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Discount:</span>\n <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_discount_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Scholarship:</span>\n <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_scholarship_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-t-2 tw-border-blue-300 dark:tw-border-blue-700 tw-mt-2\">\n <span class=\"tw-text-base tw-font-bold tw-text-blue-900 dark:tw-text-blue-100\">Total Amount:</span>\n <span class=\"tw-text-xl tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ formatCurrency(totalAmount()) }}</span>\n </div>\n </div>\n </div>\n }\n\n <!-- Remarks -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <cide-ele-textarea \n label=\"Remarks\" \n formControlName=\"feeas_remarks\"\n placeholder=\"Enter any additional remarks...\"\n rows=\"2\" \n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n </div>\n\n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n [disabled]=\"submitting() || assignmentForm.invalid || loading()\" \n [loading]=\"submitting()\" \n leftIcon=\"save\">\n {{ isEditMode() ? 'Update Assignment' : 'Assign Fee' }}\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n </form>\n </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
|
|
3582
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeAssignmentCreateComponent, isStandalone: true, selector: "cide-fee-assignment-create", ngImport: i0, template: "<!-- Fee Assignment Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n <div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"assignmentForm\" \n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Form Content -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n <div class=\"tw-space-y-6\">\n\n <!-- Student Information -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Student Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div>\n <cide-ele-input \n label=\"Student *\" \n formControlName=\"student_search\"\n placeholder=\"Search student by name or ID...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </div>\n\n <cide-ele-select \n label=\"Academic Year *\" \n formControlName=\"feeas_academic_year_id_acayr\"\n [options]=\"getAcademicYearOptions()\"\n [loading]=\"academicYearLoading()\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-select>\n </div>\n \n <!-- Hidden entity field (populated from app state) -->\n <input type=\"hidden\" formControlName=\"feeas_entity_id_syen\">\n </div>\n\n <!-- Academic Information (for fee structure loading) -->\n @if (showFeeStructureField()) {\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-pb-2 tw-border-b-2 tw-border-indigo-200 dark:tw-border-indigo-800 tw-mb-4\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-indigo-600 dark:tw-text-indigo-400\">school</cide-ele-icon>\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">Academic Information</h6>\n </div>\n \n <cide-shared-program-section-selector-wrapper\n [formGroup]=\"assignmentForm\"\n classProgramControlName=\"class_program_id\"\n branchControlName=\"branch_id\"\n termControlName=\"term_id\"\n sectionControlName=\"section_id\"\n [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n [disabled]=\"isViewMode()\"\n (valuesChange)=\"onProgramSectionValuesChange($event)\">\n </cide-shared-program-section-selector-wrapper>\n </div>\n }\n\n <!-- Fee Information -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Fee Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Source *\" \n formControlName=\"fee_source\"\n [options]=\"feeSourceOptions\"\n size=\"sm\"\n leadingIcon=\"source\">\n </cide-ele-select>\n </div>\n\n <!-- Custom Fee Fields -->\n @if (showCustomFeeFields()) {\n <div class=\"tw-mt-4 tw-space-y-4\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Category *\" \n formControlName=\"feeas_fee_category_sygms\"\n [options]=\"feeCategoryOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Fee Name *\" \n formControlName=\"feeas_fee_name\"\n placeholder=\"Enter fee name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Type *\" \n formControlName=\"feeas_fee_type\"\n [options]=\"feeTypeOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Amount *\" \n formControlName=\"feeas_original_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n size=\"sm\"\n leadingIcon=\"currency_rupee\">\n </cide-ele-input>\n </div>\n </div>\n }\n </div>\n\n <!-- Payment Details -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Payment Details</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-input \n label=\"Due Date *\" \n formControlName=\"feeas_due_date\"\n type=\"date\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Installments\" \n formControlName=\"feeas_installment_count\"\n type=\"number\"\n placeholder=\"1\"\n min=\"1\"\n max=\"12\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Fee Insights (for fee structure) -->\n @if (showFeeStructureField() && assignmentForm.get('term_id')?.value) {\n <div class=\"tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-blue-600 dark:tw-text-blue-400\">account_balance</cide-ele-icon>\n Fee Insights\n </h6>\n @if (feesLoading()) {\n <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading fees...</span>\n }\n </div>\n\n @if (feesLoading()) {\n <div class=\"tw-text-center tw-py-4\">\n <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading applicable fees...</span>\n </div>\n } @else if (applicableFees().length > 0) {\n <div class=\"tw-overflow-x-auto\">\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n <thead class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n <tr>\n <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Fee Name</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Category</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Original Amount</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Discount</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Scholarship</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Final Amount</th>\n </tr>\n </thead>\n <tbody class=\"tw-bg-white dark:tw-bg-gray-800 tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n @for (fee of applicableFees(); track getFeeId(fee)) {\n <tr>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100\">{{ getFeeName(fee) }}</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400\">{{ getFeeCategory(fee) }}</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">{{ formatCurrency(getFeeAmount(fee)) }}</td>\n <td class=\"tw-px-4 tw-py-2\">\n <cide-ele-input\n type=\"number\"\n [formControl]=\"getDiscountControl(getFeeId(fee))\"\n placeholder=\"0.00\"\n size=\"sm\"\n class=\"tw-w-24\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </td>\n <td class=\"tw-px-4 tw-py-2\">\n <cide-ele-input\n type=\"number\"\n [formControl]=\"getScholarshipControl(getFeeId(fee))\"\n placeholder=\"0.00\"\n size=\"sm\"\n class=\"tw-w-24\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n {{ formatCurrency(calculateFinalAmount(fee)) }}\n </td>\n </tr>\n }\n </tbody>\n <tfoot class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n <tr>\n <td colspan=\"2\" class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">Total:</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n {{ formatCurrency(totalOriginalAmount()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-text-right\">\n {{ formatCurrency(totalDiscount()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-purple-600 dark:tw-text-purple-400 tw-text-right\">\n {{ formatCurrency(totalScholarship()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 dark:tw-text-green-400 tw-text-right\">\n {{ formatCurrency(totalFinalAmount()) }}\n </td>\n </tr>\n </tfoot>\n </table>\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-4 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">\n No fee structure found for the selected program/term. Please select a program and term to view applicable fees.\n </div>\n }\n </div>\n }\n\n <!-- Discounts & Scholarships (for custom fees) -->\n @if (showCustomFeeFields()) {\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Discounts & Scholarships</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-input \n label=\"Discount Amount\" \n formControlName=\"feeas_discount_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n min=\"0\"\n size=\"sm\"\n leadingIcon=\"percent\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Scholarship Amount\" \n formControlName=\"feeas_scholarship_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n min=\"0\"\n size=\"sm\"\n leadingIcon=\"school\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Amount Summary (for custom fees) -->\n <div class=\"tw-bg-gradient-to-r tw-from-blue-50 dark:tw-from-blue-900/20 tw-to-indigo-50 dark:tw-to-indigo-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-blue-900 dark:tw-text-blue-100 tw-mb-3\">Amount Summary</h6>\n \n <div class=\"tw-space-y-2\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Original Amount:</span>\n <span class=\"tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Discount:</span>\n <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_discount_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Scholarship:</span>\n <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_scholarship_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-t-2 tw-border-blue-300 dark:tw-border-blue-700 tw-mt-2\">\n <span class=\"tw-text-base tw-font-bold tw-text-blue-900 dark:tw-text-blue-100\">Total Amount:</span>\n <span class=\"tw-text-xl tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ formatCurrency(totalAmount()) }}</span>\n </div>\n </div>\n </div>\n }\n\n <!-- Remarks -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <cide-ele-textarea \n label=\"Remarks\" \n formControlName=\"feeas_remarks\"\n placeholder=\"Enter any additional remarks...\"\n rows=\"2\" \n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n </div>\n\n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n [disabled]=\"submitting() || assignmentForm.invalid || loading()\" \n [loading]=\"submitting()\" \n leftIcon=\"save\">\n {{ isEditMode() ? 'Update Assignment' : 'Assign Fee' }}\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n </form>\n </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
|
|
3583
3583
|
}
|
|
3584
3584
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentCreateComponent, decorators: [{
|
|
3585
3585
|
type: Component,
|
|
@@ -4416,7 +4416,7 @@ class FeePaymentProcessComponent {
|
|
|
4416
4416
|
return new Date(date) < new Date();
|
|
4417
4417
|
}
|
|
4418
4418
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentProcessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
4419
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeePaymentProcessComponent, isStandalone: true, selector: "cide-fee-payment-process", ngImport: i0, template: "<!-- Payment Process Form -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"paymentForm\" \r\n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n \r\n <!-- Title -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Record Payment</h5>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n <!-- Back button or other actions can be added here if needed -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Form Content -->\r\n <div class=\"tw-table-row\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\r\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n <div class=\"tw-space-y-4\">\r\n\r\n <!-- Student Information -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Student Information</h6>\r\n \r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <div>\r\n <cide-ele-input \r\n label=\"Search Student *\" \r\n formControlName=\"student_search\"\r\n placeholder=\"Enter student name or ID...\"\r\n size=\"sm\"\r\n leadingIcon=\"search\"\r\n (ngModelChange)=\"onStudentSearch($event)\">\r\n </cide-ele-input>\r\n \r\n @if (selectedStudent()) {\r\n <div class=\"tw-mt-2 tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-green-900\">{{ selectedStudent()?.name }}</div>\r\n <div class=\"tw-text-xs tw-text-green-700\">ID: {{ selectedStudent()?.student_id }}</div>\r\n @if (selectedStudent()?.class) {\r\n <div class=\"tw-text-xs tw-text-green-600\">{{ selectedStudent()?.class }} / {{ selectedStudent()?.section }}</div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <cide-ele-input \r\n label=\"Payment Date *\" \r\n formControlName=\"feepay_payment_date\"\r\n type=\"date\"\r\n size=\"sm\"\r\n leadingIcon=\"calendar_today\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Fee Selection -->\r\n @if (selectedStudent() && outstandingFees().length > 0) {\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">Select Fees to Pay</h6>\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-input \r\n formControlName=\"pay_full_outstanding\" \r\n type=\"checkbox\" \r\n size=\"sm\"\r\n (change)=\"togglePayFullOutstanding()\">\r\n </cide-ele-input>\r\n <span class=\"tw-text-sm tw-text-gray-700\">Pay full outstanding</span>\r\n </div>\r\n <button cideEleButton type=\"button\" variant=\"success\" size=\"xs\" (click)=\"selectAllFees()\">\r\n Select All\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"clearAllFees()\">\r\n Clear\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-max-h-80 tw-overflow-y-auto tw-border tw-border-gray-200 tw-rounded-lg tw-p-3\">\r\n @for (item of feeItemsArray.controls; track $index) {\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-p-2 tw-bg-gray-50 tw-rounded tw-border tw-border-gray-200\"\r\n [formGroupName]=\"$index\">\r\n \r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1\">\r\n <cide-ele-input \r\n formControlName=\"is_selected\" \r\n type=\"checkbox\" \r\n size=\"sm\"\r\n (change)=\"toggleFeeItem($index)\">\r\n </cide-ele-input>\r\n \r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\r\n {{ item.get('fee_head')?.value }}\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">\r\n Outstanding: {{ formatCurrency(item.get('outstanding_amount')?.value || 0) }}\r\n @if (item.get('late_fee')?.value > 0) {\r\n <span class=\"tw-text-red-600\"> | Late Fee: {{ formatCurrency(item.get('late_fee')?.value) }}</span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-input \r\n formControlName=\"amount_paid\"\r\n type=\"number\"\r\n placeholder=\"0.00\"\r\n size=\"sm\"\r\n [disabled]=\"!item.get('is_selected')?.value\"\r\n (ngModelChange)=\"onAmountChange($index, $event)\"\r\n class=\"tw-w-28\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Payment Details -->\r\n @if (selectedStudent()) {\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Payment Details</h6>\r\n \r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-select \r\n label=\"Payment Method *\" \r\n formControlName=\"feepay_payment_method\"\r\n [options]=\"paymentMethodOptions\"\r\n size=\"sm\"\r\n leadingIcon=\"payment\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-select \r\n label=\"Payment Mode *\" \r\n formControlName=\"feepay_payment_mode\"\r\n [options]=\"[{value: 'OFFLINE', label: 'Offline'}, {value: 'ONLINE', label: 'Online'}]\"\r\n size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Cheque/DD Details -->\r\n @if (showChequeDetails()) {\r\n <div class=\"tw-mt-4 tw-p-3 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\r\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-mb-3\">Cheque/DD Details</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n <cide-ele-input \r\n label=\"Cheque/DD Number *\" \r\n formControlName=\"feepay_cheque_number\"\r\n placeholder=\"Enter cheque/DD number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input \r\n label=\"Cheque/DD Date *\" \r\n formControlName=\"feepay_cheque_date\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\r\n <cide-ele-input \r\n label=\"Bank Name *\" \r\n formControlName=\"feepay_bank_name\"\r\n placeholder=\"Enter bank name\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input \r\n label=\"Branch Name *\" \r\n formControlName=\"feepay_bank_branch_name\"\r\n placeholder=\"Enter branch name\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-mt-3\">\r\n <cide-ele-input \r\n label=\"IFSC Code *\" \r\n formControlName=\"feepay_bank_ifsc_code\"\r\n placeholder=\"Enter IFSC code\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-mt-3\">\r\n <cide-ele-input \r\n label=\"Instrument Date *\" \r\n formControlName=\"feepay_instrument_date\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Bank Transfer Details -->\r\n @if (showBankDetails()) {\r\n <div class=\"tw-mt-4 tw-p-3 tw-bg-green-50 tw-rounded tw-border tw-border-green-200\">\r\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-green-900 tw-mb-3\">Bank Transfer Details</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n <cide-ele-input \r\n label=\"Bank Name\" \r\n formControlName=\"feepay_bank_name\"\r\n placeholder=\"Enter bank name\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input \r\n label=\"Branch Name\" \r\n formControlName=\"feepay_bank_branch_name\"\r\n placeholder=\"Enter branch name\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\r\n <cide-ele-input \r\n label=\"IFSC Code\" \r\n formControlName=\"feepay_bank_ifsc_code\"\r\n placeholder=\"Enter IFSC code\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input \r\n label=\"Account Number\" \r\n formControlName=\"feepay_bank_account_number\"\r\n placeholder=\"Enter account number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-mt-3\">\r\n <cide-ele-input \r\n label=\"Transaction Reference *\" \r\n formControlName=\"feepay_transaction_reference\"\r\n placeholder=\"Enter transaction reference\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Discount Section -->\r\n <div class=\"tw-mt-4 tw-p-3 tw-bg-purple-50 tw-rounded tw-border tw-border-purple-200\">\r\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-purple-900 tw-mb-3\">Discount Information</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n <cide-ele-input \r\n label=\"Discount (%)\" \r\n formControlName=\"feepay_discount_percentage\"\r\n type=\"number\"\r\n placeholder=\"0\"\r\n size=\"sm\"\r\n [min]=\"0\"\r\n [max]=\"100\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select \r\n label=\"Discount On\" \r\n formControlName=\"feepay_discount_on\"\r\n [options]=\"[{value: 'SUB_TOTAL', label: 'Sub Total'}, {value: 'FEE_HEAD', label: 'Fee Head'}, {value: 'TOTAL', label: 'Total'}, {value: 'INSTALLMENT', label: 'Installment'}]\"\r\n size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n <div class=\"tw-mt-3\">\r\n <cide-ele-textarea \r\n label=\"Discount Reason\" \r\n formControlName=\"feepay_discount_reason\"\r\n placeholder=\"Enter reason for discount...\"\r\n rows=\"2\"\r\n size=\"sm\">\r\n </cide-ele-textarea>\r\n </div>\r\n </div>\r\n\r\n <!-- Payment Reference -->\r\n <div class=\"tw-mt-4\">\r\n <cide-ele-input \r\n label=\"Payment Reference\" \r\n formControlName=\"feepay_payment_reference\"\r\n placeholder=\"Enter payment reference number\"\r\n size=\"sm\"\r\n leadingIcon=\"receipt\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Remarks -->\r\n <div class=\"tw-mt-4\">\r\n <cide-ele-textarea \r\n label=\"Remarks\" \r\n formControlName=\"feepay_remarks\"\r\n placeholder=\"Enter any additional remarks...\"\r\n rows=\"2\" \r\n size=\"sm\">\r\n </cide-ele-textarea>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Payment Summary -->\r\n @if (selectedStudent() && selectedFeeItems().length > 0) {\r\n <div class=\"tw-bg-gradient-to-r tw-from-green-50 tw-to-emerald-50 tw-rounded-lg tw-border tw-border-green-200 tw-p-4\">\r\n <h6 class=\"tw-text-base tw-font-semibold tw-text-green-900 tw-mb-3\">Payment Summary</h6>\r\n \r\n <div class=\"tw-space-y-3\">\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n <span class=\"tw-text-gray-700\">Fee Amount:</span>\r\n <span class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n </div>\r\n \r\n @if (totalLateFee() > 0) {\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n <span class=\"tw-text-gray-700\">Late Fee Amount:</span>\r\n <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalLateFee()) }}</span>\r\n </div>\r\n }\r\n \r\n @if (totalPenalty() > 0) {\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n <span class=\"tw-text-gray-700\">Penalty Amount:</span>\r\n <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalPenalty()) }}</span>\r\n </div>\r\n }\r\n \r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-3 tw-border-t-2 tw-border-green-300 tw-mt-2\">\r\n <span class=\"tw-text-lg tw-font-bold tw-text-green-900\">Total Payable:</span>\r\n <span class=\"tw-text-2xl tw-font-bold tw-text-green-700\">{{ formatCurrency(totalPayable()) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Form Validation Errors -->\r\n <!-- Action Buttons -->\r\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\r\n [disabled]=\"loading()\">\r\n Cancel\r\n </button>\r\n\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \r\n [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\" \r\n [loading]=\"submitting()\" \r\n leftIcon=\"save\">\r\n {{ submitting() ? 'Processing...' : 'Record Payment' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</div>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
|
|
4419
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeePaymentProcessComponent, isStandalone: true, selector: "cide-fee-payment-process", ngImport: i0, template: "<!-- Payment Process Form -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"paymentForm\" \r\n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n \r\n <!-- Title -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Record Payment</h5>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n <!-- Back button or other actions can be added here if needed -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Form Content -->\r\n <div class=\"tw-table-row\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\r\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n <div class=\"tw-space-y-4\">\r\n\r\n <!-- Student Information -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Student Information</h6>\r\n \r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <div>\r\n <cide-ele-input \r\n label=\"Search Student *\" \r\n formControlName=\"student_search\"\r\n placeholder=\"Enter student name or ID...\"\r\n size=\"sm\"\r\n leadingIcon=\"search\"\r\n (ngModelChange)=\"onStudentSearch($event)\">\r\n </cide-ele-input>\r\n \r\n @if (selectedStudent()) {\r\n <div class=\"tw-mt-2 tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-green-900\">{{ selectedStudent()?.name }}</div>\r\n <div class=\"tw-text-xs tw-text-green-700\">ID: {{ selectedStudent()?.student_id }}</div>\r\n @if (selectedStudent()?.class) {\r\n <div class=\"tw-text-xs tw-text-green-600\">{{ selectedStudent()?.class }} / {{ selectedStudent()?.section }}</div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <cide-ele-input \r\n label=\"Payment Date *\" \r\n formControlName=\"feepay_payment_date\"\r\n type=\"date\"\r\n size=\"sm\"\r\n leadingIcon=\"calendar_today\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Fee Selection -->\r\n @if (selectedStudent() && outstandingFees().length > 0) {\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">Select Fees to Pay</h6>\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-input \r\n formControlName=\"pay_full_outstanding\" \r\n type=\"checkbox\" \r\n size=\"sm\"\r\n (change)=\"togglePayFullOutstanding()\">\r\n </cide-ele-input>\r\n <span class=\"tw-text-sm tw-text-gray-700\">Pay full outstanding</span>\r\n </div>\r\n <button cideEleButton type=\"button\" variant=\"success\" size=\"xs\" (click)=\"selectAllFees()\">\r\n Select All\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"clearAllFees()\">\r\n Clear\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-max-h-80 tw-overflow-y-auto tw-border tw-border-gray-200 tw-rounded-lg tw-p-3\">\r\n @for (item of feeItemsArray.controls; track $index) {\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-p-2 tw-bg-gray-50 tw-rounded tw-border tw-border-gray-200\"\r\n [formGroupName]=\"$index\">\r\n \r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1\">\r\n <cide-ele-input \r\n formControlName=\"is_selected\" \r\n type=\"checkbox\" \r\n size=\"sm\"\r\n (change)=\"toggleFeeItem($index)\">\r\n </cide-ele-input>\r\n \r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\r\n {{ item.get('fee_head')?.value }}\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">\r\n Outstanding: {{ formatCurrency(item.get('outstanding_amount')?.value || 0) }}\r\n @if (item.get('late_fee')?.value > 0) {\r\n <span class=\"tw-text-red-600\"> | Late Fee: {{ formatCurrency(item.get('late_fee')?.value) }}</span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-input \r\n formControlName=\"amount_paid\"\r\n type=\"number\"\r\n placeholder=\"0.00\"\r\n size=\"sm\"\r\n [disabled]=\"!item.get('is_selected')?.value\"\r\n (ngModelChange)=\"onAmountChange($index, $event)\"\r\n class=\"tw-w-28\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Payment Details -->\r\n @if (selectedStudent()) {\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Payment Details</h6>\r\n \r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-select \r\n label=\"Payment Method *\" \r\n formControlName=\"feepay_payment_method\"\r\n [options]=\"paymentMethodOptions\"\r\n size=\"sm\"\r\n leadingIcon=\"payment\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-select \r\n label=\"Payment Mode *\" \r\n formControlName=\"feepay_payment_mode\"\r\n [options]=\"[{value: 'OFFLINE', label: 'Offline'}, {value: 'ONLINE', label: 'Online'}]\"\r\n size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Cheque/DD Details -->\r\n @if (showChequeDetails()) {\r\n <div class=\"tw-mt-4 tw-p-3 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\r\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-mb-3\">Cheque/DD Details</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n <cide-ele-input \r\n label=\"Cheque/DD Number *\" \r\n formControlName=\"feepay_cheque_number\"\r\n placeholder=\"Enter cheque/DD number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input \r\n label=\"Cheque/DD Date *\" \r\n formControlName=\"feepay_cheque_date\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\r\n <cide-ele-input \r\n label=\"Bank Name *\" \r\n formControlName=\"feepay_bank_name\"\r\n placeholder=\"Enter bank name\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input \r\n label=\"Branch Name *\" \r\n formControlName=\"feepay_bank_branch_name\"\r\n placeholder=\"Enter branch name\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-mt-3\">\r\n <cide-ele-input \r\n label=\"IFSC Code *\" \r\n formControlName=\"feepay_bank_ifsc_code\"\r\n placeholder=\"Enter IFSC code\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-mt-3\">\r\n <cide-ele-input \r\n label=\"Instrument Date *\" \r\n formControlName=\"feepay_instrument_date\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Bank Transfer Details -->\r\n @if (showBankDetails()) {\r\n <div class=\"tw-mt-4 tw-p-3 tw-bg-green-50 tw-rounded tw-border tw-border-green-200\">\r\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-green-900 tw-mb-3\">Bank Transfer Details</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n <cide-ele-input \r\n label=\"Bank Name\" \r\n formControlName=\"feepay_bank_name\"\r\n placeholder=\"Enter bank name\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input \r\n label=\"Branch Name\" \r\n formControlName=\"feepay_bank_branch_name\"\r\n placeholder=\"Enter branch name\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\r\n <cide-ele-input \r\n label=\"IFSC Code\" \r\n formControlName=\"feepay_bank_ifsc_code\"\r\n placeholder=\"Enter IFSC code\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input \r\n label=\"Account Number\" \r\n formControlName=\"feepay_bank_account_number\"\r\n placeholder=\"Enter account number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-mt-3\">\r\n <cide-ele-input \r\n label=\"Transaction Reference *\" \r\n formControlName=\"feepay_transaction_reference\"\r\n placeholder=\"Enter transaction reference\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Discount Section -->\r\n <div class=\"tw-mt-4 tw-p-3 tw-bg-purple-50 tw-rounded tw-border tw-border-purple-200\">\r\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-purple-900 tw-mb-3\">Discount Information</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n <cide-ele-input \r\n label=\"Discount (%)\" \r\n formControlName=\"feepay_discount_percentage\"\r\n type=\"number\"\r\n placeholder=\"0\"\r\n size=\"sm\"\r\n [min]=\"0\"\r\n [max]=\"100\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select \r\n label=\"Discount On\" \r\n formControlName=\"feepay_discount_on\"\r\n [options]=\"[{value: 'SUB_TOTAL', label: 'Sub Total'}, {value: 'FEE_HEAD', label: 'Fee Head'}, {value: 'TOTAL', label: 'Total'}, {value: 'INSTALLMENT', label: 'Installment'}]\"\r\n size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n <div class=\"tw-mt-3\">\r\n <cide-ele-textarea \r\n label=\"Discount Reason\" \r\n formControlName=\"feepay_discount_reason\"\r\n placeholder=\"Enter reason for discount...\"\r\n rows=\"2\"\r\n size=\"sm\">\r\n </cide-ele-textarea>\r\n </div>\r\n </div>\r\n\r\n <!-- Payment Reference -->\r\n <div class=\"tw-mt-4\">\r\n <cide-ele-input \r\n label=\"Payment Reference\" \r\n formControlName=\"feepay_payment_reference\"\r\n placeholder=\"Enter payment reference number\"\r\n size=\"sm\"\r\n leadingIcon=\"receipt\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Remarks -->\r\n <div class=\"tw-mt-4\">\r\n <cide-ele-textarea \r\n label=\"Remarks\" \r\n formControlName=\"feepay_remarks\"\r\n placeholder=\"Enter any additional remarks...\"\r\n rows=\"2\" \r\n size=\"sm\">\r\n </cide-ele-textarea>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Payment Summary -->\r\n @if (selectedStudent() && selectedFeeItems().length > 0) {\r\n <div class=\"tw-bg-gradient-to-r tw-from-green-50 tw-to-emerald-50 tw-rounded-lg tw-border tw-border-green-200 tw-p-4\">\r\n <h6 class=\"tw-text-base tw-font-semibold tw-text-green-900 tw-mb-3\">Payment Summary</h6>\r\n \r\n <div class=\"tw-space-y-3\">\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n <span class=\"tw-text-gray-700\">Fee Amount:</span>\r\n <span class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n </div>\r\n \r\n @if (totalLateFee() > 0) {\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n <span class=\"tw-text-gray-700\">Late Fee Amount:</span>\r\n <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalLateFee()) }}</span>\r\n </div>\r\n }\r\n \r\n @if (totalPenalty() > 0) {\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n <span class=\"tw-text-gray-700\">Penalty Amount:</span>\r\n <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalPenalty()) }}</span>\r\n </div>\r\n }\r\n \r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-3 tw-border-t-2 tw-border-green-300 tw-mt-2\">\r\n <span class=\"tw-text-lg tw-font-bold tw-text-green-900\">Total Payable:</span>\r\n <span class=\"tw-text-2xl tw-font-bold tw-text-green-700\">{{ formatCurrency(totalPayable()) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Form Validation Errors -->\r\n <!-- Action Buttons -->\r\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\r\n [disabled]=\"loading()\">\r\n Cancel\r\n </button>\r\n\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \r\n [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\" \r\n [loading]=\"submitting()\" \r\n leftIcon=\"save\">\r\n {{ submitting() ? 'Processing...' : 'Record Payment' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</div>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
|
|
4420
4420
|
}
|
|
4421
4421
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentProcessComponent, decorators: [{
|
|
4422
4422
|
type: Component,
|
|
@@ -5385,6 +5385,7 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
|
|
|
5385
5385
|
confirmationService = inject(ConfirmationService);
|
|
5386
5386
|
destroyRef = inject(DestroyRef);
|
|
5387
5387
|
receiptTemplateService = inject(ReceiptTemplateService);
|
|
5388
|
+
cdr = inject(ChangeDetectorRef);
|
|
5388
5389
|
htmlEditorRef;
|
|
5389
5390
|
templateForm = this.fb.group({
|
|
5390
5391
|
template_name: ['', Validators.required],
|
|
@@ -5598,11 +5599,14 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
|
|
|
5598
5599
|
this.setupFormListeners();
|
|
5599
5600
|
}
|
|
5600
5601
|
setupFormListeners() {
|
|
5601
|
-
// Listen to tag search changes
|
|
5602
|
+
// Listen to tag search changes with debounce for better performance
|
|
5602
5603
|
this.templateForm.get('tag_search')?.valueChanges
|
|
5603
5604
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
5604
5605
|
.subscribe((query) => {
|
|
5605
|
-
|
|
5606
|
+
const searchQuery = query || '';
|
|
5607
|
+
this.onTagSearch(searchQuery);
|
|
5608
|
+
// Also update the signal directly to ensure computed signal updates
|
|
5609
|
+
this.tagSearchQuery.set(searchQuery);
|
|
5606
5610
|
});
|
|
5607
5611
|
}
|
|
5608
5612
|
ngOnDestroy() {
|
|
@@ -5613,7 +5617,7 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
|
|
|
5613
5617
|
let textarea = this.htmlEditorRef?.nativeElement;
|
|
5614
5618
|
// If ViewChild is not available, try to find it in the DOM
|
|
5615
5619
|
if (!textarea) {
|
|
5616
|
-
const textareaElement = document.querySelector('
|
|
5620
|
+
const textareaElement = document.querySelector('.template-html-editor');
|
|
5617
5621
|
if (textareaElement) {
|
|
5618
5622
|
textarea = textareaElement;
|
|
5619
5623
|
}
|
|
@@ -6157,6 +6161,7 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
|
|
|
6157
6161
|
if (response.success && response.data) {
|
|
6158
6162
|
const template = response.data;
|
|
6159
6163
|
this.currentTemplateId.set(template._id || null);
|
|
6164
|
+
// Use setValue to ensure all form controls are updated
|
|
6160
6165
|
this.templateForm.patchValue({
|
|
6161
6166
|
template_name: template.feert_template_name || '',
|
|
6162
6167
|
template_code: template.feert_template_code || '',
|
|
@@ -6165,7 +6170,17 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
|
|
|
6165
6170
|
is_default: template.feert_is_default || false,
|
|
6166
6171
|
template_html: template.feert_template_html || '',
|
|
6167
6172
|
css_styles: '' // Add CSS field if needed
|
|
6168
|
-
});
|
|
6173
|
+
}, { emitEvent: true });
|
|
6174
|
+
// Force change detection to update the textarea
|
|
6175
|
+
this.cdr.detectChanges();
|
|
6176
|
+
// Scroll to top of textarea after a brief delay to ensure it's rendered
|
|
6177
|
+
setTimeout(() => {
|
|
6178
|
+
const textarea = this.htmlEditorRef?.nativeElement || document.querySelector('.template-html-editor');
|
|
6179
|
+
if (textarea) {
|
|
6180
|
+
textarea.focus();
|
|
6181
|
+
textarea.scrollTop = 0;
|
|
6182
|
+
}
|
|
6183
|
+
}, 100);
|
|
6169
6184
|
this.notificationService.success('Template loaded successfully!');
|
|
6170
6185
|
}
|
|
6171
6186
|
else {
|
|
@@ -6181,7 +6196,7 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
|
|
|
6181
6196
|
});
|
|
6182
6197
|
}
|
|
6183
6198
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TemplateDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6184
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TemplateDesignerComponent, isStandalone: true, selector: "cide-receipt-template-designer", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "htmlEditorRef", first: true, predicate: ["htmlEditor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n \n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions>\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n Load Template\n </button>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n Save Template\n </button>\n </div>\n\n <!-- Main Content - Three Column Layout -->\n <div class=\"tw-w-full tw-h-full tw-p-4\">\n <div class=\"tw-grid tw-grid-cols-12 tw-gap-4 tw-h-full\">\n \n <!-- Left Sidebar - Tag Categories & Tags -->\n <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n <!-- Tag Categories Header -->\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n <cide-ele-input\n formControlName=\"tag_search\"\n placeholder=\"Search tags...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </div>\n\n <!-- Category Tabs -->\n <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n @for (category of tagCategories; track category.id) {\n <button\n type=\"button\"\n class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n (click)=\"onCategoryChange(category.id)\"\n [title]=\"category.name\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n </button>\n }\n </div>\n\n <!-- Tags List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2\">\n @if (filteredTags().length > 0) {\n <div class=\"tw-space-y-1\">\n @for (tag of filteredTags(); track tag.code) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n (click)=\"insertTag(tag)\"\n [title]=\"tag.description\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n {{ tag.code }}\n </code>\n <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n @if (tag.example) {\n <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n }\n </div>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n </div>\n </button>\n }\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n <p class=\"tw-text-xs\">No tags found</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Middle Column - HTML Editor -->\n <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n \n <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input\n label=\"Template Name *\"\n formControlName=\"template_name\"\n placeholder=\"e.g., Standard Receipt\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input\n label=\"Template Code *\"\n formControlName=\"template_code\"\n placeholder=\"e.g., STD_RECEIPT_01\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select\n label=\"Template Type *\"\n formControlName=\"template_type\"\n [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-select\n label=\"Template For\"\n formControlName=\"template_for\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n </div>\n </form>\n </div>\n\n <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert</span>\n </div>\n </div>\n <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden\">\n <cide-ele-textarea\n #htmlEditor\n formControlName=\"template_html\"\n placeholder=\"Enter HTML template code here... Use tags from the left sidebar.\"\n rows=\"20\"\n size=\"sm\"\n class=\"tw-h-full tw-font-mono tw-text-xs\">\n </cide-ele-textarea>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Live Preview -->\n <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-select\n formControlName=\"preview_type\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n size=\"xs\"\n class=\"tw-w-24\">\n </cide-ele-select>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n </div>\n </div>\n </div>\n \n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50\">\n <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4 tw-min-h-full\" [innerHTML]=\"previewHtml()\"></div>\n </div>\n </div>\n\n </div>\n </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host ::ng-deep textarea[formControlName=template_html]{height:100%!important;resize:none;font-family:Courier New,Monaco,Consolas,monospace;font-size:12px;line-height:1.5}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
6199
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TemplateDesignerComponent, isStandalone: true, selector: "cide-receipt-template-designer", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "htmlEditorRef", first: true, predicate: ["htmlEditor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n \n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions>\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n Load Template\n </button>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n Save Template\n </button>\n </div>\n\n <!-- Main Content - Three Column Layout -->\n <div class=\"tw-w-full tw-h-full tw-overflow-hidden\" style=\"height: calc(100vh - 80px); max-width: 100vw;\">\n <div class=\"tw-grid tw-grid-cols-12 tw-gap-3 tw-h-full tw-min-h-0 tw-p-3\">\n \n <!-- Left Sidebar - Tag Categories & Tags -->\n <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col tw-min-w-0\">\n <!-- Tag Categories Header -->\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n <form [formGroup]=\"templateForm\">\n <cide-ele-input\n formControlName=\"tag_search\"\n placeholder=\"Search tags...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </form>\n </div>\n\n <!-- Category Tabs -->\n <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n @for (category of tagCategories; track category.id) {\n <button\n type=\"button\"\n class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n (click)=\"onCategoryChange(category.id)\"\n [title]=\"category.name\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n </button>\n }\n </div>\n\n <!-- Tags List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2\">\n @if (filteredTags().length > 0) {\n <div class=\"tw-space-y-1\">\n @for (tag of filteredTags(); track tag.code) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n (click)=\"insertTag(tag)\"\n [title]=\"tag.description\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n {{ tag.code }}\n </code>\n <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n @if (tag.example) {\n <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n }\n </div>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n </div>\n </button>\n }\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n <p class=\"tw-text-xs\">No tags found</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Middle Column - HTML Editor -->\n <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-min-w-0\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n \n <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input\n label=\"Template Name *\"\n formControlName=\"template_name\"\n placeholder=\"e.g., Standard Receipt\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input\n label=\"Template Code *\"\n formControlName=\"template_code\"\n placeholder=\"e.g., STD_RECEIPT_01\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select\n label=\"Template Type *\"\n formControlName=\"template_type\"\n [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-select\n label=\"Template For\"\n formControlName=\"template_for\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n </div>\n </form>\n </div>\n\n <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert or paste HTML here</span>\n </div>\n </div>\n <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden tw-min-h-0\">\n <form [formGroup]=\"templateForm\">\n <textarea\n #htmlEditor\n formControlName=\"template_html\"\n placeholder=\"Enter HTML template code here... Use tags from the left sidebar or paste your HTML design.\"\n class=\"template-html-editor tw-w-full tw-h-full tw-p-3 tw-border tw-border-gray-300 tw-rounded-md tw-font-mono tw-text-xs tw-leading-relaxed tw-resize-none focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-blue-500 tw-bg-white tw-text-gray-900\"\n spellcheck=\"false\"></textarea>\n </form>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Live Preview -->\n <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-w-0\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-select\n formControlName=\"preview_type\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n size=\"xs\"\n class=\"tw-w-24\">\n </cide-ele-select>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n </div>\n </div>\n </div>\n \n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50\">\n <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4 tw-min-h-full\" [innerHTML]=\"previewHtml()\"></div>\n </div>\n </div>\n\n </div>\n </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host{display:block;height:100%;width:100%;max-width:100vw;overflow:hidden}:host .template-html-editor{height:100%!important;min-height:400px;resize:none;font-family:Courier New,Monaco,Consolas,Menlo,monospace;font-size:13px;line-height:1.6;tab-size:2;-moz-tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto;box-sizing:border-box;width:100%;max-width:100%}:host .template-html-editor::placeholder{color:#9ca3af;font-style:italic}:host .template-html-editor:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}:host .tw-grid{height:100%;max-width:100%;overflow:hidden}:host .tw-overflow-hidden{min-height:0;max-width:100%;overflow:hidden}:host .tw-flex-col{min-height:0;max-width:100%}:host [class*=tw-col-span]{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;overflow:hidden}:host *{max-width:100%;box-sizing:border-box}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
6185
6200
|
}
|
|
6186
6201
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TemplateDesignerComponent, decorators: [{
|
|
6187
6202
|
type: Component,
|
|
@@ -6189,12 +6204,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
6189
6204
|
CommonModule,
|
|
6190
6205
|
ReactiveFormsModule,
|
|
6191
6206
|
CideInputComponent,
|
|
6192
|
-
CideTextareaComponent,
|
|
6193
6207
|
CideEleButtonComponent,
|
|
6194
6208
|
CideIconComponent,
|
|
6195
6209
|
CideSelectComponent,
|
|
6196
6210
|
CideLytSharedWrapperComponent
|
|
6197
|
-
], template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n \n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions>\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n Load Template\n </button>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n Save Template\n </button>\n </div>\n\n <!-- Main Content - Three Column Layout -->\n <div class=\"tw-w-full tw-h-full tw-p-4\">\n <div class=\"tw-grid tw-grid-cols-12 tw-gap-4 tw-h-full\">\n \n <!-- Left Sidebar - Tag Categories & Tags -->\n <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n <!-- Tag Categories Header -->\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n <cide-ele-input\n formControlName=\"tag_search\"\n placeholder=\"Search tags...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </div>\n\n <!-- Category Tabs -->\n <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n @for (category of tagCategories; track category.id) {\n <button\n type=\"button\"\n class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n (click)=\"onCategoryChange(category.id)\"\n [title]=\"category.name\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n </button>\n }\n </div>\n\n <!-- Tags List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2\">\n @if (filteredTags().length > 0) {\n <div class=\"tw-space-y-1\">\n @for (tag of filteredTags(); track tag.code) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n (click)=\"insertTag(tag)\"\n [title]=\"tag.description\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n {{ tag.code }}\n </code>\n <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n @if (tag.example) {\n <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n }\n </div>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n </div>\n </button>\n }\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n <p class=\"tw-text-xs\">No tags found</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Middle Column - HTML Editor -->\n <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n \n <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input\n label=\"Template Name *\"\n formControlName=\"template_name\"\n placeholder=\"e.g., Standard Receipt\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input\n label=\"Template Code *\"\n formControlName=\"template_code\"\n placeholder=\"e.g., STD_RECEIPT_01\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select\n label=\"Template Type *\"\n formControlName=\"template_type\"\n [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-select\n label=\"Template For\"\n formControlName=\"template_for\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n </div>\n </form>\n </div>\n\n <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert</span>\n </div>\n </div>\n <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden\">\n <cide-ele-textarea\n #htmlEditor\n formControlName=\"template_html\"\n placeholder=\"Enter HTML template code here... Use tags from the left sidebar.\"\n rows=\"20\"\n size=\"sm\"\n class=\"tw-h-full tw-font-mono tw-text-xs\">\n </cide-ele-textarea>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Live Preview -->\n <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-select\n formControlName=\"preview_type\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n size=\"xs\"\n class=\"tw-w-24\">\n </cide-ele-select>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n </div>\n </div>\n </div>\n \n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50\">\n <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4 tw-min-h-full\" [innerHTML]=\"previewHtml()\"></div>\n </div>\n </div>\n\n </div>\n </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host ::ng-deep textarea[formControlName=template_html]{height:100%!important;resize:none;font-family:Courier New,Monaco,Consolas,monospace;font-size:12px;line-height:1.5}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"] }]
|
|
6211
|
+
], template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n \n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions>\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n Load Template\n </button>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n Save Template\n </button>\n </div>\n\n <!-- Main Content - Three Column Layout -->\n <div class=\"tw-w-full tw-h-full tw-overflow-hidden\" style=\"height: calc(100vh - 80px); max-width: 100vw;\">\n <div class=\"tw-grid tw-grid-cols-12 tw-gap-3 tw-h-full tw-min-h-0 tw-p-3\">\n \n <!-- Left Sidebar - Tag Categories & Tags -->\n <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col tw-min-w-0\">\n <!-- Tag Categories Header -->\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n <form [formGroup]=\"templateForm\">\n <cide-ele-input\n formControlName=\"tag_search\"\n placeholder=\"Search tags...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </form>\n </div>\n\n <!-- Category Tabs -->\n <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n @for (category of tagCategories; track category.id) {\n <button\n type=\"button\"\n class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n (click)=\"onCategoryChange(category.id)\"\n [title]=\"category.name\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n </button>\n }\n </div>\n\n <!-- Tags List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2\">\n @if (filteredTags().length > 0) {\n <div class=\"tw-space-y-1\">\n @for (tag of filteredTags(); track tag.code) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n (click)=\"insertTag(tag)\"\n [title]=\"tag.description\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n {{ tag.code }}\n </code>\n <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n @if (tag.example) {\n <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n }\n </div>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n </div>\n </button>\n }\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n <p class=\"tw-text-xs\">No tags found</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Middle Column - HTML Editor -->\n <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-min-w-0\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n \n <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input\n label=\"Template Name *\"\n formControlName=\"template_name\"\n placeholder=\"e.g., Standard Receipt\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input\n label=\"Template Code *\"\n formControlName=\"template_code\"\n placeholder=\"e.g., STD_RECEIPT_01\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select\n label=\"Template Type *\"\n formControlName=\"template_type\"\n [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-select\n label=\"Template For\"\n formControlName=\"template_for\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n </div>\n </form>\n </div>\n\n <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert or paste HTML here</span>\n </div>\n </div>\n <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden tw-min-h-0\">\n <form [formGroup]=\"templateForm\">\n <textarea\n #htmlEditor\n formControlName=\"template_html\"\n placeholder=\"Enter HTML template code here... Use tags from the left sidebar or paste your HTML design.\"\n class=\"template-html-editor tw-w-full tw-h-full tw-p-3 tw-border tw-border-gray-300 tw-rounded-md tw-font-mono tw-text-xs tw-leading-relaxed tw-resize-none focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-blue-500 tw-bg-white tw-text-gray-900\"\n spellcheck=\"false\"></textarea>\n </form>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Live Preview -->\n <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-w-0\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-select\n formControlName=\"preview_type\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n size=\"xs\"\n class=\"tw-w-24\">\n </cide-ele-select>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n </div>\n </div>\n </div>\n \n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50\">\n <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4 tw-min-h-full\" [innerHTML]=\"previewHtml()\"></div>\n </div>\n </div>\n\n </div>\n </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host{display:block;height:100%;width:100%;max-width:100vw;overflow:hidden}:host .template-html-editor{height:100%!important;min-height:400px;resize:none;font-family:Courier New,Monaco,Consolas,Menlo,monospace;font-size:13px;line-height:1.6;tab-size:2;-moz-tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto;box-sizing:border-box;width:100%;max-width:100%}:host .template-html-editor::placeholder{color:#9ca3af;font-style:italic}:host .template-html-editor:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}:host .tw-grid{height:100%;max-width:100%;overflow:hidden}:host .tw-overflow-hidden{min-height:0;max-width:100%;overflow:hidden}:host .tw-flex-col{min-height:0;max-width:100%}:host [class*=tw-col-span]{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;overflow:hidden}:host *{max-width:100%;box-sizing:border-box}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"] }]
|
|
6198
6212
|
}], ctorParameters: () => [], propDecorators: { htmlEditorRef: [{
|
|
6199
6213
|
type: ViewChild,
|
|
6200
6214
|
args: ['htmlEditor', { static: false }]
|
|
@@ -6562,7 +6576,7 @@ class CollectionReportComponent {
|
|
|
6562
6576
|
return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
6563
6577
|
}
|
|
6564
6578
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CollectionReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6565
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CollectionReportComponent, isStandalone: true, selector: "cide-collection-report", ngImport: i0, template: "<!-- Collection Report Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n \r\n <!-- Title -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">assessment</cide-ele-icon>\r\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Fee Collection Report</h5>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"exportToPDF()\" leftIcon=\"picture_as_pdf\">\r\n Export PDF\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"exportToExcel()\" leftIcon=\"table_chart\">\r\n Export Excel\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Filters Section -->\r\n <div class=\"tw-table-row tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-4\">\r\n <cide-ele-input\r\n label=\"Date From\"\r\n formControlName=\"date_from\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input\r\n label=\"Date To\"\r\n formControlName=\"date_to\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select\r\n label=\"Academic Year\"\r\n formControlName=\"academic_year\"\r\n [options]=\"academicYearOptions()\"\r\n size=\"sm\"\r\n placeholder=\"All Years\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-select\r\n label=\"Class/Program\"\r\n formControlName=\"class_program\"\r\n [options]=\"classOptions()\"\r\n size=\"sm\"\r\n placeholder=\"All Classes\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-select\r\n label=\"Payment Mode\"\r\n formControlName=\"payment_mode\"\r\n [options]=\"paymentModeOptions\"\r\n size=\"sm\"\r\n placeholder=\"All Modes\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-justify-end\">\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"applyFilters()\" leftIcon=\"search\"\r\n [disabled]=\"loading()\" [loading]=\"loading()\">\r\n Generate Report\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Summary Cards -->\r\n <div class=\"tw-table-row tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\r\n <!-- Total Collection Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-green-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-green-600 tw-w-6 tw-h-6\">account_balance_wallet</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Collection</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-green-600\">{{ formatCurrency(summary().total_collection) }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Total Receipts Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-blue-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">receipt</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Receipts</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ summary().total_receipts }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Online Payments Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-cyan-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-cyan-600 tw-w-6 tw-h-6\">language</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Online Payments</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-cyan-600\">{{ formatCurrency(summary().online_payments) }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Cash Payments Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-yellow-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-yellow-600 tw-w-6 tw-h-6\">money</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Cash Payments</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-yellow-600\">{{ formatCurrency(summary().cash_payments) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"tw-table-row\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n <div class=\"tw-space-y-6\">\r\n \r\n <!-- Collection by Date Section -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Date</h6>\r\n </div>\r\n <div class=\"tw-p-4\">\r\n <cide-ele-data-grid \r\n [config]=\"dateGridConfig()\" \r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n \r\n <!-- Footer Totals -->\r\n <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-4 tw-text-sm\">\r\n <div class=\"tw-font-semibold tw-text-gray-900\">TOTAL</div>\r\n <div class=\"tw-font-semibold tw-text-center tw-text-gray-900\">{{ totalReceipts() }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCash()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOnline()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCheque()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOther()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-green-600\">{{ formatCurrency(grandTotal()) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Collection by Class Section -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Class/Program</h6>\r\n </div>\r\n <div class=\"tw-p-4\">\r\n <cide-ele-data-grid \r\n [config]=\"classGridConfig()\" \r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
|
|
6579
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CollectionReportComponent, isStandalone: true, selector: "cide-collection-report", ngImport: i0, template: "<!-- Collection Report Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n \r\n <!-- Title -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">assessment</cide-ele-icon>\r\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Fee Collection Report</h5>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"exportToPDF()\" leftIcon=\"picture_as_pdf\">\r\n Export PDF\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"exportToExcel()\" leftIcon=\"table_chart\">\r\n Export Excel\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Filters Section -->\r\n <div class=\"tw-table-row tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-4\">\r\n <cide-ele-input\r\n label=\"Date From\"\r\n formControlName=\"date_from\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input\r\n label=\"Date To\"\r\n formControlName=\"date_to\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select\r\n label=\"Academic Year\"\r\n formControlName=\"academic_year\"\r\n [options]=\"academicYearOptions()\"\r\n size=\"sm\"\r\n placeholder=\"All Years\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-select\r\n label=\"Class/Program\"\r\n formControlName=\"class_program\"\r\n [options]=\"classOptions()\"\r\n size=\"sm\"\r\n placeholder=\"All Classes\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-select\r\n label=\"Payment Mode\"\r\n formControlName=\"payment_mode\"\r\n [options]=\"paymentModeOptions\"\r\n size=\"sm\"\r\n placeholder=\"All Modes\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-justify-end\">\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"applyFilters()\" leftIcon=\"search\"\r\n [disabled]=\"loading()\" [loading]=\"loading()\">\r\n Generate Report\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Summary Cards -->\r\n <div class=\"tw-table-row tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\r\n <!-- Total Collection Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-green-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-green-600 tw-w-6 tw-h-6\">account_balance_wallet</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Collection</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-green-600\">{{ formatCurrency(summary().total_collection) }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Total Receipts Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-blue-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">receipt</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Receipts</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ summary().total_receipts }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Online Payments Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-cyan-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-cyan-600 tw-w-6 tw-h-6\">language</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Online Payments</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-cyan-600\">{{ formatCurrency(summary().online_payments) }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Cash Payments Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-yellow-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-yellow-600 tw-w-6 tw-h-6\">money</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Cash Payments</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-yellow-600\">{{ formatCurrency(summary().cash_payments) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"tw-table-row\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n <div class=\"tw-space-y-6\">\r\n \r\n <!-- Collection by Date Section -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Date</h6>\r\n </div>\r\n <div class=\"tw-p-4\">\r\n <cide-ele-data-grid \r\n [config]=\"dateGridConfig()\" \r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n \r\n <!-- Footer Totals -->\r\n <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-4 tw-text-sm\">\r\n <div class=\"tw-font-semibold tw-text-gray-900\">TOTAL</div>\r\n <div class=\"tw-font-semibold tw-text-center tw-text-gray-900\">{{ totalReceipts() }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCash()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOnline()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCheque()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOther()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-green-600\">{{ formatCurrency(grandTotal()) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Collection by Class Section -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Class/Program</h6>\r\n </div>\r\n <div class=\"tw-p-4\">\r\n <cide-ele-data-grid \r\n [config]=\"classGridConfig()\" \r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
|
|
6566
6580
|
}
|
|
6567
6581
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CollectionReportComponent, decorators: [{
|
|
6568
6582
|
type: Component,
|
|
@@ -7077,7 +7091,7 @@ class MyOnlinePaymentComponent {
|
|
|
7077
7091
|
return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
7078
7092
|
}
|
|
7079
7093
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MyOnlinePaymentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7080
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<!-- My Online Payment Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n \r\n <!-- Title -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Online Fee Payment</h5>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" leftIcon=\"arrow_back\">\r\n Back to Statement\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"tw-table-row\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n \r\n <!-- Left Panel - Fee Selection -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Fees to Pay</h6>\r\n </div>\r\n \r\n <!-- Quick Actions -->\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex tw-gap-2\">\r\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\r\n Select All\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\r\n Select Overdue\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\r\n Clear\r\n </button>\r\n </div>\r\n\r\n <!-- Fee Items List -->\r\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\r\n @if (outstandingFees().length === 0) {\r\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\r\n <p class=\"tw-text-sm\">No outstanding fees</p>\r\n </div>\r\n } @else {\r\n @for (fee of outstandingFees(); track fee.id) {\r\n <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\r\n [class.tw-border-blue-500]=\"isSelected(fee)\"\r\n [class.tw-bg-blue-50]=\"isSelected(fee)\"\r\n [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\r\n [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\r\n [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\"\r\n (click)=\"toggleFee(fee)\">\r\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\r\n <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\r\n <input \r\n type=\"checkbox\" \r\n [checked]=\"isSelected(fee)\"\r\n (change)=\"toggleFee(fee); $event.stopPropagation()\"\r\n class=\"tw-mt-1\">\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\r\n <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\r\n @if (isOverdue(fee)) {\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800\">\r\n Overdue\r\n </span>\r\n }\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-600\">\r\n Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\r\n </div>\r\n @if (fee.late_fee > 0) {\r\n <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\r\n Late Fee: {{ formatCurrency(fee.late_fee) }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"tw-text-right\">\r\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Right Panel - Payment Summary & Gateway -->\r\n <div class=\"tw-space-y-4\">\r\n \r\n <!-- Payment Summary Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment Summary</h6>\r\n </div>\r\n <div class=\"tw-p-4 tw-space-y-3\">\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-600\">Selected Items</span>\r\n <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\r\n </div>\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-600\">Fee Amount</span>\r\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n </div>\r\n @if (totalLateFee() > 0) {\r\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\r\n <span>Late Fee</span>\r\n <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\r\n </div>\r\n }\r\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\r\n <span>Subtotal</span>\r\n <span>{{ formatCurrency(subtotal()) }}</span>\r\n </div>\r\n @if (convenienceFee() > 0) {\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-600\">Convenience Fee (2%)</span>\r\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\r\n </div>\r\n }\r\n <div class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\r\n <span>Total Payable</span>\r\n <span>{{ formatCurrency(totalPayable()) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Payment Method Selection -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Payment Method</h6>\r\n </div>\r\n <div class=\"tw-p-4\">\r\n <form [formGroup]=\"paymentForm\" class=\"tw-space-y-4\">\r\n \r\n <!-- Payment Method Cards -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-3 tw-mb-4\">\r\n @for (method of paymentMethodOptions; track method.value) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-p-4 tw-rounded-lg tw-border-2 tw-text-center tw-transition-colors\"\r\n [class.tw-border-blue-500]=\"selectedPaymentMethod() === method.value\"\r\n [class.tw-bg-blue-50]=\"selectedPaymentMethod() === method.value\"\r\n [class.tw-border-gray-200]=\"selectedPaymentMethod() !== method.value\"\r\n (click)=\"selectPaymentMethod(method.value)\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2\"\r\n [class.tw-text-blue-600]=\"selectedPaymentMethod() === method.value\"\r\n [class.tw-text-gray-400]=\"selectedPaymentMethod() !== method.value\">\r\n @switch (method.value) {\r\n @case ('UPI') { account_balance_wallet }\r\n @case ('CARD') { credit_card }\r\n @case ('NET_BANKING') { account_balance }\r\n }\r\n </cide-ele-icon>\r\n <div class=\"tw-text-xs tw-font-medium\">{{ method.label }}</div>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- UPI Details -->\r\n @if (selectedPaymentMethod() === 'UPI') {\r\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\r\n <cide-ele-input\r\n label=\"UPI ID *\"\r\n formControlName=\"upi_id\"\r\n placeholder=\"username@upi\"\r\n size=\"sm\"\r\n [required]=\"true\">\r\n </cide-ele-input>\r\n </div>\r\n }\r\n\r\n <!-- Card Details -->\r\n @if (selectedPaymentMethod() === 'CARD') {\r\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200 tw-space-y-3\">\r\n <cide-ele-input\r\n label=\"Card Number *\"\r\n formControlName=\"card_number\"\r\n placeholder=\"1234 5678 9012 3456\"\r\n size=\"sm\"\r\n maxLength=\"19\"\r\n [required]=\"true\">\r\n </cide-ele-input>\r\n <div class=\"tw-grid tw-grid-cols-2 tw-gap-3\">\r\n <cide-ele-input\r\n label=\"Expiry Date *\"\r\n formControlName=\"expiry\"\r\n placeholder=\"MM/YY\"\r\n size=\"sm\"\r\n maxLength=\"5\"\r\n [required]=\"true\">\r\n </cide-ele-input>\r\n <cide-ele-input\r\n label=\"CVV *\"\r\n formControlName=\"cvv\"\r\n type=\"password\"\r\n placeholder=\"***\"\r\n size=\"sm\"\r\n maxLength=\"3\"\r\n [required]=\"true\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Net Banking Details -->\r\n @if (selectedPaymentMethod() === 'NET_BANKING') {\r\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\r\n <cide-ele-select\r\n label=\"Select Bank *\"\r\n formControlName=\"bank\"\r\n [options]=\"bankOptions\"\r\n size=\"sm\"\r\n placeholder=\"Select Bank\"\r\n [required]=\"true\">\r\n </cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"tw-flex tw-gap-3 tw-pt-4\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" class=\"tw-flex-1\">\r\n Cancel\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"proceedToPayment()\"\r\n [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" class=\"tw-flex-1\" leftIcon=\"payment\">\r\n Pay {{ formatCurrency(totalPayable()) }}\r\n </button>\r\n </div>\r\n\r\n <!-- Security Info -->\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-pt-2 tw-text-xs tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\r\n <span>Secure payment powered by Razorpay</span>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
7094
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<!-- My Online Payment Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n \r\n <!-- Title -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Online Fee Payment</h5>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" leftIcon=\"arrow_back\">\r\n Back to Statement\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"tw-table-row\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n \r\n <!-- Left Panel - Fee Selection -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Fees to Pay</h6>\r\n </div>\r\n \r\n <!-- Quick Actions -->\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex tw-gap-2\">\r\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\r\n Select All\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\r\n Select Overdue\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\r\n Clear\r\n </button>\r\n </div>\r\n\r\n <!-- Fee Items List -->\r\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\r\n @if (outstandingFees().length === 0) {\r\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\r\n <p class=\"tw-text-sm\">No outstanding fees</p>\r\n </div>\r\n } @else {\r\n @for (fee of outstandingFees(); track fee.id) {\r\n <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\r\n [class.tw-border-blue-500]=\"isSelected(fee)\"\r\n [class.tw-bg-blue-50]=\"isSelected(fee)\"\r\n [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\r\n [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\r\n [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\"\r\n (click)=\"toggleFee(fee)\">\r\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\r\n <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\r\n <input \r\n type=\"checkbox\" \r\n [checked]=\"isSelected(fee)\"\r\n (change)=\"toggleFee(fee); $event.stopPropagation()\"\r\n class=\"tw-mt-1\">\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\r\n <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\r\n @if (isOverdue(fee)) {\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800\">\r\n Overdue\r\n </span>\r\n }\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-600\">\r\n Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\r\n </div>\r\n @if (fee.late_fee > 0) {\r\n <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\r\n Late Fee: {{ formatCurrency(fee.late_fee) }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"tw-text-right\">\r\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Right Panel - Payment Summary & Gateway -->\r\n <div class=\"tw-space-y-4\">\r\n \r\n <!-- Payment Summary Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment Summary</h6>\r\n </div>\r\n <div class=\"tw-p-4 tw-space-y-3\">\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-600\">Selected Items</span>\r\n <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\r\n </div>\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-600\">Fee Amount</span>\r\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n </div>\r\n @if (totalLateFee() > 0) {\r\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\r\n <span>Late Fee</span>\r\n <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\r\n </div>\r\n }\r\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\r\n <span>Subtotal</span>\r\n <span>{{ formatCurrency(subtotal()) }}</span>\r\n </div>\r\n @if (convenienceFee() > 0) {\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-600\">Convenience Fee (2%)</span>\r\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\r\n </div>\r\n }\r\n <div class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\r\n <span>Total Payable</span>\r\n <span>{{ formatCurrency(totalPayable()) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Payment Method Selection -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Payment Method</h6>\r\n </div>\r\n <div class=\"tw-p-4\">\r\n <form [formGroup]=\"paymentForm\" class=\"tw-space-y-4\">\r\n \r\n <!-- Payment Method Cards -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-3 tw-mb-4\">\r\n @for (method of paymentMethodOptions; track method.value) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-p-4 tw-rounded-lg tw-border-2 tw-text-center tw-transition-colors\"\r\n [class.tw-border-blue-500]=\"selectedPaymentMethod() === method.value\"\r\n [class.tw-bg-blue-50]=\"selectedPaymentMethod() === method.value\"\r\n [class.tw-border-gray-200]=\"selectedPaymentMethod() !== method.value\"\r\n (click)=\"selectPaymentMethod(method.value)\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2\"\r\n [class.tw-text-blue-600]=\"selectedPaymentMethod() === method.value\"\r\n [class.tw-text-gray-400]=\"selectedPaymentMethod() !== method.value\">\r\n @switch (method.value) {\r\n @case ('UPI') { account_balance_wallet }\r\n @case ('CARD') { credit_card }\r\n @case ('NET_BANKING') { account_balance }\r\n }\r\n </cide-ele-icon>\r\n <div class=\"tw-text-xs tw-font-medium\">{{ method.label }}</div>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- UPI Details -->\r\n @if (selectedPaymentMethod() === 'UPI') {\r\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\r\n <cide-ele-input\r\n label=\"UPI ID *\"\r\n formControlName=\"upi_id\"\r\n placeholder=\"username@upi\"\r\n size=\"sm\"\r\n [required]=\"true\">\r\n </cide-ele-input>\r\n </div>\r\n }\r\n\r\n <!-- Card Details -->\r\n @if (selectedPaymentMethod() === 'CARD') {\r\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200 tw-space-y-3\">\r\n <cide-ele-input\r\n label=\"Card Number *\"\r\n formControlName=\"card_number\"\r\n placeholder=\"1234 5678 9012 3456\"\r\n size=\"sm\"\r\n maxLength=\"19\"\r\n [required]=\"true\">\r\n </cide-ele-input>\r\n <div class=\"tw-grid tw-grid-cols-2 tw-gap-3\">\r\n <cide-ele-input\r\n label=\"Expiry Date *\"\r\n formControlName=\"expiry\"\r\n placeholder=\"MM/YY\"\r\n size=\"sm\"\r\n maxLength=\"5\"\r\n [required]=\"true\">\r\n </cide-ele-input>\r\n <cide-ele-input\r\n label=\"CVV *\"\r\n formControlName=\"cvv\"\r\n type=\"password\"\r\n placeholder=\"***\"\r\n size=\"sm\"\r\n maxLength=\"3\"\r\n [required]=\"true\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Net Banking Details -->\r\n @if (selectedPaymentMethod() === 'NET_BANKING') {\r\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\r\n <cide-ele-select\r\n label=\"Select Bank *\"\r\n formControlName=\"bank\"\r\n [options]=\"bankOptions\"\r\n size=\"sm\"\r\n placeholder=\"Select Bank\"\r\n [required]=\"true\">\r\n </cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"tw-flex tw-gap-3 tw-pt-4\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" class=\"tw-flex-1\">\r\n Cancel\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"proceedToPayment()\"\r\n [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" class=\"tw-flex-1\" leftIcon=\"payment\">\r\n Pay {{ formatCurrency(totalPayable()) }}\r\n </button>\r\n </div>\r\n\r\n <!-- Security Info -->\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-pt-2 tw-text-xs tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\r\n <span>Secure payment powered by Razorpay</span>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
7081
7095
|
}
|
|
7082
7096
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MyOnlinePaymentComponent, decorators: [{
|
|
7083
7097
|
type: Component,
|
|
@@ -7225,10 +7239,52 @@ class FeeDetailsViewerComponent {
|
|
|
7225
7239
|
});
|
|
7226
7240
|
}
|
|
7227
7241
|
processFeeData(fee) {
|
|
7228
|
-
|
|
7229
|
-
|
|
7242
|
+
// Ensure we have proper item data structure
|
|
7243
|
+
let itemData = fee._feeItemData;
|
|
7244
|
+
// If _feeItemData doesn't exist or is incomplete, construct it from fee data
|
|
7245
|
+
if (!itemData || typeof itemData !== 'object') {
|
|
7246
|
+
itemData = {
|
|
7247
|
+
feesi_item_name: fee.fees_structure_name || 'N/A',
|
|
7248
|
+
feesi_item_code: fee.fees_structure_code || 'N/A',
|
|
7249
|
+
feesi_amount: fee.fees_amount || fee.fees_total_amount || 0,
|
|
7250
|
+
feesi_description: 'No description available',
|
|
7251
|
+
feesi_category_id_sygms: fee.fees_category_name || null,
|
|
7252
|
+
feesi_is_mandatory: false,
|
|
7253
|
+
feesi_is_refundable: false,
|
|
7254
|
+
feesi_is_amount_editable: false,
|
|
7255
|
+
feesi_is_installment_allowed: false,
|
|
7256
|
+
feesi_installment_count: 1,
|
|
7257
|
+
feesi_due_date_offset_days: 0,
|
|
7258
|
+
feesi_collection_start_offset_days: 0,
|
|
7259
|
+
feesi_collection_end_offset_days: 30,
|
|
7260
|
+
feesi_tax_applicable: false,
|
|
7261
|
+
feesi_tax_percentage: 0
|
|
7262
|
+
};
|
|
7263
|
+
}
|
|
7264
|
+
else {
|
|
7265
|
+
// Ensure all required fields exist, using fee data as fallback
|
|
7266
|
+
itemData.feesi_item_name = itemData.feesi_item_name || fee.fees_structure_name || 'N/A';
|
|
7267
|
+
itemData.feesi_item_code = itemData.feesi_item_code || fee.fees_structure_code || 'N/A';
|
|
7268
|
+
itemData.feesi_amount = itemData.feesi_amount !== undefined && itemData.feesi_amount !== null
|
|
7269
|
+
? itemData.feesi_amount
|
|
7270
|
+
: (fee.fees_amount || fee.fees_total_amount || 0);
|
|
7271
|
+
itemData.feesi_description = itemData.feesi_description || 'No description available';
|
|
7272
|
+
}
|
|
7273
|
+
const finalAmount = (fee.fees_total_amount || fee.fees_amount || 0) - (this.discount() || fee.discount || 0);
|
|
7230
7274
|
const assignmentDate = this.assignmentDate() || new Date();
|
|
7231
|
-
|
|
7275
|
+
// Ensure fee data has all required fields
|
|
7276
|
+
const feeDataWithDefaults = {
|
|
7277
|
+
...fee,
|
|
7278
|
+
fees_structure_name: fee.fees_structure_name || 'N/A',
|
|
7279
|
+
fees_structure_code: fee.fees_structure_code || 'N/A',
|
|
7280
|
+
fees_category_name: fee.fees_category_name || 'N/A',
|
|
7281
|
+
fees_amount: fee.fees_amount || fee.fees_total_amount || 0,
|
|
7282
|
+
fees_total_amount: fee.fees_total_amount || fee.fees_amount || 0,
|
|
7283
|
+
discount: fee.discount || this.discount() || 0,
|
|
7284
|
+
finalAmount: finalAmount,
|
|
7285
|
+
_feeItemData: itemData
|
|
7286
|
+
};
|
|
7287
|
+
this.calculateAndSetFeeDetails(itemData, feeDataWithDefaults, finalAmount, assignmentDate);
|
|
7232
7288
|
}
|
|
7233
7289
|
processFeeAssignmentData(assignment) {
|
|
7234
7290
|
// Transform assignment data to fee details format
|
|
@@ -7348,26 +7404,54 @@ class FeeDetailsViewerComponent {
|
|
|
7348
7404
|
daysFromAssignment: daysFromAssignment > 0 ? daysFromAssignment : undefined
|
|
7349
7405
|
});
|
|
7350
7406
|
}
|
|
7351
|
-
// Extract category name
|
|
7407
|
+
// Extract category name - check multiple sources
|
|
7352
7408
|
let categoryName = 'N/A';
|
|
7353
|
-
if (feeData.fees_category_name) {
|
|
7409
|
+
if (feeData.fees_category_name && feeData.fees_category_name !== 'N/A' && feeData.fees_category_name.trim() !== '') {
|
|
7354
7410
|
categoryName = feeData.fees_category_name;
|
|
7355
7411
|
}
|
|
7356
7412
|
else if (itemData.feesi_category_id_sygms) {
|
|
7357
7413
|
if (typeof itemData.feesi_category_id_sygms === 'object' && itemData.feesi_category_id_sygms !== null) {
|
|
7358
|
-
categoryName = itemData.feesi_category_id_sygms?.sygms_title ||
|
|
7414
|
+
categoryName = itemData.feesi_category_id_sygms?.sygms_title ||
|
|
7415
|
+
itemData.feesi_category_id_sygms?.sygms_name ||
|
|
7416
|
+
'N/A';
|
|
7417
|
+
}
|
|
7418
|
+
else if (typeof itemData.feesi_category_id_sygms === 'string') {
|
|
7419
|
+
// If it's just an ID string, we can't resolve it here, use fallback
|
|
7420
|
+
categoryName = 'N/A';
|
|
7359
7421
|
}
|
|
7360
7422
|
}
|
|
7423
|
+
// Final fallback - try to get from item code or name
|
|
7424
|
+
if (categoryName === 'N/A' && itemData.feesi_item_code) {
|
|
7425
|
+
categoryName = itemData.feesi_item_code;
|
|
7426
|
+
}
|
|
7427
|
+
// Extract fee name - prioritize item name, then item code, then structure name
|
|
7428
|
+
const feeName = itemData.feesi_item_name ||
|
|
7429
|
+
itemData.feesi_item_code ||
|
|
7430
|
+
feeData.fees_structure_name ||
|
|
7431
|
+
'N/A';
|
|
7432
|
+
// Extract item code - prioritize item code, then structure code, then structure name
|
|
7433
|
+
const itemCode = itemData.feesi_item_code ||
|
|
7434
|
+
feeData.fees_structure_code ||
|
|
7435
|
+
feeData.fees_structure_name ||
|
|
7436
|
+
'N/A';
|
|
7437
|
+
// Extract structure name
|
|
7438
|
+
const structureName = feeData.fees_structure_name ||
|
|
7439
|
+
feeData.fees_structure_code ||
|
|
7440
|
+
'N/A';
|
|
7441
|
+
// Extract description
|
|
7442
|
+
const description = itemData.feesi_description ||
|
|
7443
|
+
feeData.fees_structure_name ||
|
|
7444
|
+
'No description available';
|
|
7361
7445
|
this.feeDetails.set({
|
|
7362
|
-
name:
|
|
7446
|
+
name: feeName,
|
|
7363
7447
|
category: categoryName,
|
|
7364
7448
|
amount: itemData.feesi_amount || feeData.fees_amount || 0,
|
|
7365
7449
|
discount: this.discount() || feeData.discount || 0,
|
|
7366
|
-
finalAmount: finalAmount,
|
|
7367
|
-
structureName:
|
|
7368
|
-
structureCode: feeData.fees_structure_code,
|
|
7369
|
-
itemCode:
|
|
7370
|
-
description:
|
|
7450
|
+
finalAmount: finalAmount > 0 ? finalAmount : (itemData.feesi_amount || feeData.fees_amount || 0),
|
|
7451
|
+
structureName: structureName,
|
|
7452
|
+
structureCode: feeData.fees_structure_code || 'N/A',
|
|
7453
|
+
itemCode: itemCode,
|
|
7454
|
+
description: description,
|
|
7371
7455
|
isMandatory: itemData.feesi_is_mandatory || false,
|
|
7372
7456
|
isRefundable: itemData.feesi_is_refundable || false,
|
|
7373
7457
|
isAmountEditable: itemData.feesi_is_amount_editable || false,
|
|
@@ -7385,49 +7469,25 @@ class FeeDetailsViewerComponent {
|
|
|
7385
7469
|
displayOrder: itemData.feesi_display_order || 0
|
|
7386
7470
|
});
|
|
7387
7471
|
}
|
|
7388
|
-
formatCurrency(amount) {
|
|
7389
|
-
return new Intl.NumberFormat('en-US', {
|
|
7390
|
-
style: 'currency',
|
|
7391
|
-
currency: 'USD',
|
|
7392
|
-
minimumFractionDigits: 2
|
|
7393
|
-
}).format(amount);
|
|
7394
|
-
}
|
|
7395
7472
|
onClose() {
|
|
7396
7473
|
this.closed.emit();
|
|
7397
7474
|
}
|
|
7398
7475
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeDetailsViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7399
7476
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeDetailsViewerComponent, isStandalone: true, selector: "cide-fee-details-viewer", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, studentId: { classPropertyName: "studentId", publicName: "studentId", isSignal: true, isRequired: false, transformFunction: null }, feeId: { classPropertyName: "feeId", publicName: "feeId", isSignal: true, isRequired: false, transformFunction: null }, feeData: { classPropertyName: "feeData", publicName: "feeData", isSignal: true, isRequired: false, transformFunction: null }, assignmentDate: { classPropertyName: "assignmentDate", publicName: "assignmentDate", isSignal: true, isRequired: false, transformFunction: null }, discount: { classPropertyName: "discount", publicName: "discount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: `
|
|
7400
|
-
|
|
7401
|
-
|
|
7402
|
-
<div class="tw-
|
|
7403
|
-
<
|
|
7404
|
-
<
|
|
7405
|
-
|
|
7406
|
-
|
|
7407
|
-
|
|
7408
|
-
|
|
7409
|
-
|
|
7410
|
-
|
|
7411
|
-
|
|
7412
|
-
|
|
7413
|
-
|
|
7414
|
-
<cide-ele-icon>close</cide-ele-icon>
|
|
7415
|
-
</button>
|
|
7416
|
-
</div>
|
|
7417
|
-
|
|
7418
|
-
@if (loading()) {
|
|
7419
|
-
<div class="tw-text-center tw-py-12">
|
|
7420
|
-
<cide-ele-icon class="tw-w-8 tw-h-8 tw-text-gray-400 tw-animate-spin tw-mx-auto tw-mb-2">refresh</cide-ele-icon>
|
|
7421
|
-
<span class="tw-text-sm tw-text-gray-500">Loading fee details...</span>
|
|
7422
|
-
</div>
|
|
7423
|
-
} @else if (error()) {
|
|
7424
|
-
<div class="tw-text-center tw-py-12">
|
|
7425
|
-
<cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-400 tw-mx-auto tw-mb-2">error</cide-ele-icon>
|
|
7426
|
-
<p class="tw-text-sm tw-text-red-600">{{ error() }}</p>
|
|
7427
|
-
</div>
|
|
7428
|
-
} @else {
|
|
7429
|
-
@if (feeDetails(); as details) {
|
|
7430
|
-
<div class="tw-space-y-4 tw-text-sm">
|
|
7477
|
+
<div class="tw-p-4 tw-overflow-y-auto tw-h-full">
|
|
7478
|
+
@if (loading()) {
|
|
7479
|
+
<div class="tw-text-center tw-py-12">
|
|
7480
|
+
<cide-ele-icon class="tw-w-8 tw-h-8 tw-text-gray-400 tw-animate-spin tw-mx-auto tw-mb-2">refresh</cide-ele-icon>
|
|
7481
|
+
<span class="tw-text-sm tw-text-gray-500">Loading fee details...</span>
|
|
7482
|
+
</div>
|
|
7483
|
+
} @else if (error()) {
|
|
7484
|
+
<div class="tw-text-center tw-py-12">
|
|
7485
|
+
<cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-400 tw-mx-auto tw-mb-2">error</cide-ele-icon>
|
|
7486
|
+
<p class="tw-text-sm tw-text-red-600">{{ error() }}</p>
|
|
7487
|
+
</div>
|
|
7488
|
+
} @else {
|
|
7489
|
+
@if (feeDetails(); as details) {
|
|
7490
|
+
<div class="tw-space-y-4 tw-text-sm">
|
|
7431
7491
|
<!-- Basic Information -->
|
|
7432
7492
|
<div class="tw-bg-gray-50 tw-rounded-lg tw-p-3 tw-border tw-border-gray-200">
|
|
7433
7493
|
<h4 class="tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-3">Basic Information</h4>
|
|
@@ -7463,23 +7523,23 @@ class FeeDetailsViewerComponent {
|
|
|
7463
7523
|
<div class="tw-space-y-2">
|
|
7464
7524
|
<div class="tw-flex tw-justify-between tw-items-center">
|
|
7465
7525
|
<span class="tw-text-gray-600">Original Amount:</span>
|
|
7466
|
-
<span class="tw-font-medium tw-text-gray-900">{{
|
|
7526
|
+
<span class="tw-font-medium tw-text-gray-900">{{ details.amount | currency }}</span>
|
|
7467
7527
|
</div>
|
|
7468
7528
|
@if (details.discount > 0) {
|
|
7469
7529
|
<div class="tw-flex tw-justify-between tw-items-center">
|
|
7470
7530
|
<span class="tw-text-gray-600">Discount Applied:</span>
|
|
7471
|
-
<span class="tw-font-medium tw-text-blue-600">-{{
|
|
7531
|
+
<span class="tw-font-medium tw-text-blue-600">-{{ details.discount | currency }}</span>
|
|
7472
7532
|
</div>
|
|
7473
7533
|
}
|
|
7474
7534
|
@if (details.taxApplicable && details.taxPercentage > 0) {
|
|
7475
7535
|
<div class="tw-flex tw-justify-between tw-items-center">
|
|
7476
7536
|
<span class="tw-text-gray-600">Tax ({{ details.taxPercentage }}%):</span>
|
|
7477
|
-
<span class="tw-font-medium tw-text-gray-900">{{
|
|
7537
|
+
<span class="tw-font-medium tw-text-gray-900">{{ (details.finalAmount * details.taxPercentage) / 100 | currency }}</span>
|
|
7478
7538
|
</div>
|
|
7479
7539
|
}
|
|
7480
7540
|
<div class="tw-flex tw-justify-between tw-items-center tw-pt-2 tw-border-t tw-border-blue-200">
|
|
7481
7541
|
<span class="tw-font-semibold tw-text-gray-900">Final Amount:</span>
|
|
7482
|
-
<span class="tw-font-bold tw-text-green-600 tw-text-base">{{
|
|
7542
|
+
<span class="tw-font-bold tw-text-green-600 tw-text-base">{{ details.finalAmount | currency }}</span>
|
|
7483
7543
|
</div>
|
|
7484
7544
|
</div>
|
|
7485
7545
|
</div>
|
|
@@ -7489,7 +7549,7 @@ class FeeDetailsViewerComponent {
|
|
|
7489
7549
|
<div class="tw-bg-purple-50 tw-rounded-lg tw-p-3 tw-border tw-border-purple-200">
|
|
7490
7550
|
<h4 class="tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-3">Installment Plan</h4>
|
|
7491
7551
|
<div class="tw-mb-2 tw-text-xs tw-text-gray-600">
|
|
7492
|
-
Total Amount: <span class="tw-font-semibold">{{
|
|
7552
|
+
Total Amount: <span class="tw-font-semibold">{{ details.finalAmount | currency }}</span>
|
|
7493
7553
|
divided into <span class="tw-font-semibold">{{ details.installmentCount }}</span> installments
|
|
7494
7554
|
</div>
|
|
7495
7555
|
<div class="tw-overflow-x-auto">
|
|
@@ -7507,7 +7567,7 @@ class FeeDetailsViewerComponent {
|
|
|
7507
7567
|
@for (installment of details.installments; track installment.number) {
|
|
7508
7568
|
<tr>
|
|
7509
7569
|
<td class="tw-px-3 tw-py-2 tw-text-sm tw-text-gray-900 tw-font-medium">#{{ installment.number }}</td>
|
|
7510
|
-
<td class="tw-px-3 tw-py-2 tw-text-sm tw-text-gray-900 tw-text-right tw-font-semibold">{{
|
|
7570
|
+
<td class="tw-px-3 tw-py-2 tw-text-sm tw-text-gray-900 tw-text-right tw-font-semibold">{{ installment.amount | currency }}</td>
|
|
7511
7571
|
<td class="tw-px-3 tw-py-2 tw-text-xs tw-text-gray-600">{{ installment.dueDate || 'TBD' }}</td>
|
|
7512
7572
|
<td class="tw-px-3 tw-py-2 tw-text-xs tw-text-gray-600 tw-text-center">
|
|
7513
7573
|
@if (installment.daysFromAssignment !== undefined) {
|
|
@@ -7529,7 +7589,7 @@ class FeeDetailsViewerComponent {
|
|
|
7529
7589
|
<tfoot class="tw-bg-purple-100">
|
|
7530
7590
|
<tr>
|
|
7531
7591
|
<td class="tw-px-3 tw-py-2 tw-text-sm tw-font-bold tw-text-gray-900">Total:</td>
|
|
7532
|
-
<td class="tw-px-3 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 tw-text-right">{{
|
|
7592
|
+
<td class="tw-px-3 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 tw-text-right">{{ details.finalAmount | currency }}</td>
|
|
7533
7593
|
<td colspan="3"></td>
|
|
7534
7594
|
</tr>
|
|
7535
7595
|
</tfoot>
|
|
@@ -7546,7 +7606,7 @@ class FeeDetailsViewerComponent {
|
|
|
7546
7606
|
</div>
|
|
7547
7607
|
<div class="tw-flex tw-justify-between">
|
|
7548
7608
|
<span class="tw-text-gray-600">Amount to Pay:</span>
|
|
7549
|
-
<span class="tw-font-bold tw-text-green-600">{{
|
|
7609
|
+
<span class="tw-font-bold tw-text-green-600">{{ details.finalAmount | currency }}</span>
|
|
7550
7610
|
</div>
|
|
7551
7611
|
@if (details.installments && details.installments.length > 0 && details.installments[0].dueDate) {
|
|
7552
7612
|
<div class="tw-flex tw-justify-between">
|
|
@@ -7594,8 +7654,8 @@ class FeeDetailsViewerComponent {
|
|
|
7594
7654
|
<div>
|
|
7595
7655
|
<span class="tw-text-gray-500 tw-block tw-text-xs tw-mb-1">Amount Range:</span>
|
|
7596
7656
|
<span class="tw-text-gray-900 tw-text-sm">
|
|
7597
|
-
{{ details.minAmount ?
|
|
7598
|
-
{{ details.maxAmount ?
|
|
7657
|
+
{{ details.minAmount ? (details.minAmount | currency) : 'No min' }} -
|
|
7658
|
+
{{ details.maxAmount ? (details.maxAmount | currency) : 'No max' }}
|
|
7599
7659
|
</span>
|
|
7600
7660
|
</div>
|
|
7601
7661
|
}
|
|
@@ -7615,25 +7675,11 @@ class FeeDetailsViewerComponent {
|
|
|
7615
7675
|
}
|
|
7616
7676
|
</div>
|
|
7617
7677
|
</div>
|
|
7618
|
-
</div>
|
|
7619
|
-
}
|
|
7620
|
-
}
|
|
7621
|
-
</div>
|
|
7622
|
-
<div class="tw-bg-gray-50 tw-px-4 tw-py-3 tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-gray-200">
|
|
7623
|
-
<button
|
|
7624
|
-
type="button"
|
|
7625
|
-
cideEleButton
|
|
7626
|
-
variant="primary"
|
|
7627
|
-
size="sm"
|
|
7628
|
-
(click)="onClose()">
|
|
7629
|
-
Close
|
|
7630
|
-
</button>
|
|
7631
|
-
</div>
|
|
7632
|
-
</div>
|
|
7633
7678
|
</div>
|
|
7634
|
-
|
|
7635
|
-
|
|
7636
|
-
|
|
7679
|
+
}
|
|
7680
|
+
}
|
|
7681
|
+
</div>
|
|
7682
|
+
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }] });
|
|
7637
7683
|
}
|
|
7638
7684
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeDetailsViewerComponent, decorators: [{
|
|
7639
7685
|
type: Component,
|
|
@@ -7641,39 +7687,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
7641
7687
|
CommonModule,
|
|
7642
7688
|
DatePipe,
|
|
7643
7689
|
CideIconComponent,
|
|
7644
|
-
CideEleButtonComponent
|
|
7690
|
+
CideEleButtonComponent,
|
|
7691
|
+
CurrencyPipe
|
|
7645
7692
|
], template: `
|
|
7646
|
-
|
|
7647
|
-
|
|
7648
|
-
<div class="tw-
|
|
7649
|
-
<
|
|
7650
|
-
<
|
|
7651
|
-
|
|
7652
|
-
|
|
7653
|
-
|
|
7654
|
-
|
|
7655
|
-
|
|
7656
|
-
|
|
7657
|
-
|
|
7658
|
-
|
|
7659
|
-
|
|
7660
|
-
<cide-ele-icon>close</cide-ele-icon>
|
|
7661
|
-
</button>
|
|
7662
|
-
</div>
|
|
7663
|
-
|
|
7664
|
-
@if (loading()) {
|
|
7665
|
-
<div class="tw-text-center tw-py-12">
|
|
7666
|
-
<cide-ele-icon class="tw-w-8 tw-h-8 tw-text-gray-400 tw-animate-spin tw-mx-auto tw-mb-2">refresh</cide-ele-icon>
|
|
7667
|
-
<span class="tw-text-sm tw-text-gray-500">Loading fee details...</span>
|
|
7668
|
-
</div>
|
|
7669
|
-
} @else if (error()) {
|
|
7670
|
-
<div class="tw-text-center tw-py-12">
|
|
7671
|
-
<cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-400 tw-mx-auto tw-mb-2">error</cide-ele-icon>
|
|
7672
|
-
<p class="tw-text-sm tw-text-red-600">{{ error() }}</p>
|
|
7673
|
-
</div>
|
|
7674
|
-
} @else {
|
|
7675
|
-
@if (feeDetails(); as details) {
|
|
7676
|
-
<div class="tw-space-y-4 tw-text-sm">
|
|
7693
|
+
<div class="tw-p-4 tw-overflow-y-auto tw-h-full">
|
|
7694
|
+
@if (loading()) {
|
|
7695
|
+
<div class="tw-text-center tw-py-12">
|
|
7696
|
+
<cide-ele-icon class="tw-w-8 tw-h-8 tw-text-gray-400 tw-animate-spin tw-mx-auto tw-mb-2">refresh</cide-ele-icon>
|
|
7697
|
+
<span class="tw-text-sm tw-text-gray-500">Loading fee details...</span>
|
|
7698
|
+
</div>
|
|
7699
|
+
} @else if (error()) {
|
|
7700
|
+
<div class="tw-text-center tw-py-12">
|
|
7701
|
+
<cide-ele-icon class="tw-w-8 tw-h-8 tw-text-red-400 tw-mx-auto tw-mb-2">error</cide-ele-icon>
|
|
7702
|
+
<p class="tw-text-sm tw-text-red-600">{{ error() }}</p>
|
|
7703
|
+
</div>
|
|
7704
|
+
} @else {
|
|
7705
|
+
@if (feeDetails(); as details) {
|
|
7706
|
+
<div class="tw-space-y-4 tw-text-sm">
|
|
7677
7707
|
<!-- Basic Information -->
|
|
7678
7708
|
<div class="tw-bg-gray-50 tw-rounded-lg tw-p-3 tw-border tw-border-gray-200">
|
|
7679
7709
|
<h4 class="tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-3">Basic Information</h4>
|
|
@@ -7709,23 +7739,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
7709
7739
|
<div class="tw-space-y-2">
|
|
7710
7740
|
<div class="tw-flex tw-justify-between tw-items-center">
|
|
7711
7741
|
<span class="tw-text-gray-600">Original Amount:</span>
|
|
7712
|
-
<span class="tw-font-medium tw-text-gray-900">{{
|
|
7742
|
+
<span class="tw-font-medium tw-text-gray-900">{{ details.amount | currency }}</span>
|
|
7713
7743
|
</div>
|
|
7714
7744
|
@if (details.discount > 0) {
|
|
7715
7745
|
<div class="tw-flex tw-justify-between tw-items-center">
|
|
7716
7746
|
<span class="tw-text-gray-600">Discount Applied:</span>
|
|
7717
|
-
<span class="tw-font-medium tw-text-blue-600">-{{
|
|
7747
|
+
<span class="tw-font-medium tw-text-blue-600">-{{ details.discount | currency }}</span>
|
|
7718
7748
|
</div>
|
|
7719
7749
|
}
|
|
7720
7750
|
@if (details.taxApplicable && details.taxPercentage > 0) {
|
|
7721
7751
|
<div class="tw-flex tw-justify-between tw-items-center">
|
|
7722
7752
|
<span class="tw-text-gray-600">Tax ({{ details.taxPercentage }}%):</span>
|
|
7723
|
-
<span class="tw-font-medium tw-text-gray-900">{{
|
|
7753
|
+
<span class="tw-font-medium tw-text-gray-900">{{ (details.finalAmount * details.taxPercentage) / 100 | currency }}</span>
|
|
7724
7754
|
</div>
|
|
7725
7755
|
}
|
|
7726
7756
|
<div class="tw-flex tw-justify-between tw-items-center tw-pt-2 tw-border-t tw-border-blue-200">
|
|
7727
7757
|
<span class="tw-font-semibold tw-text-gray-900">Final Amount:</span>
|
|
7728
|
-
<span class="tw-font-bold tw-text-green-600 tw-text-base">{{
|
|
7758
|
+
<span class="tw-font-bold tw-text-green-600 tw-text-base">{{ details.finalAmount | currency }}</span>
|
|
7729
7759
|
</div>
|
|
7730
7760
|
</div>
|
|
7731
7761
|
</div>
|
|
@@ -7735,7 +7765,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
7735
7765
|
<div class="tw-bg-purple-50 tw-rounded-lg tw-p-3 tw-border tw-border-purple-200">
|
|
7736
7766
|
<h4 class="tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-3">Installment Plan</h4>
|
|
7737
7767
|
<div class="tw-mb-2 tw-text-xs tw-text-gray-600">
|
|
7738
|
-
Total Amount: <span class="tw-font-semibold">{{
|
|
7768
|
+
Total Amount: <span class="tw-font-semibold">{{ details.finalAmount | currency }}</span>
|
|
7739
7769
|
divided into <span class="tw-font-semibold">{{ details.installmentCount }}</span> installments
|
|
7740
7770
|
</div>
|
|
7741
7771
|
<div class="tw-overflow-x-auto">
|
|
@@ -7753,7 +7783,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
7753
7783
|
@for (installment of details.installments; track installment.number) {
|
|
7754
7784
|
<tr>
|
|
7755
7785
|
<td class="tw-px-3 tw-py-2 tw-text-sm tw-text-gray-900 tw-font-medium">#{{ installment.number }}</td>
|
|
7756
|
-
<td class="tw-px-3 tw-py-2 tw-text-sm tw-text-gray-900 tw-text-right tw-font-semibold">{{
|
|
7786
|
+
<td class="tw-px-3 tw-py-2 tw-text-sm tw-text-gray-900 tw-text-right tw-font-semibold">{{ installment.amount | currency }}</td>
|
|
7757
7787
|
<td class="tw-px-3 tw-py-2 tw-text-xs tw-text-gray-600">{{ installment.dueDate || 'TBD' }}</td>
|
|
7758
7788
|
<td class="tw-px-3 tw-py-2 tw-text-xs tw-text-gray-600 tw-text-center">
|
|
7759
7789
|
@if (installment.daysFromAssignment !== undefined) {
|
|
@@ -7775,7 +7805,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
7775
7805
|
<tfoot class="tw-bg-purple-100">
|
|
7776
7806
|
<tr>
|
|
7777
7807
|
<td class="tw-px-3 tw-py-2 tw-text-sm tw-font-bold tw-text-gray-900">Total:</td>
|
|
7778
|
-
<td class="tw-px-3 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 tw-text-right">{{
|
|
7808
|
+
<td class="tw-px-3 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 tw-text-right">{{ details.finalAmount | currency }}</td>
|
|
7779
7809
|
<td colspan="3"></td>
|
|
7780
7810
|
</tr>
|
|
7781
7811
|
</tfoot>
|
|
@@ -7792,7 +7822,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
7792
7822
|
</div>
|
|
7793
7823
|
<div class="tw-flex tw-justify-between">
|
|
7794
7824
|
<span class="tw-text-gray-600">Amount to Pay:</span>
|
|
7795
|
-
<span class="tw-font-bold tw-text-green-600">{{
|
|
7825
|
+
<span class="tw-font-bold tw-text-green-600">{{ details.finalAmount | currency }}</span>
|
|
7796
7826
|
</div>
|
|
7797
7827
|
@if (details.installments && details.installments.length > 0 && details.installments[0].dueDate) {
|
|
7798
7828
|
<div class="tw-flex tw-justify-between">
|
|
@@ -7840,8 +7870,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
7840
7870
|
<div>
|
|
7841
7871
|
<span class="tw-text-gray-500 tw-block tw-text-xs tw-mb-1">Amount Range:</span>
|
|
7842
7872
|
<span class="tw-text-gray-900 tw-text-sm">
|
|
7843
|
-
{{ details.minAmount ?
|
|
7844
|
-
{{ details.maxAmount ?
|
|
7873
|
+
{{ details.minAmount ? (details.minAmount | currency) : 'No min' }} -
|
|
7874
|
+
{{ details.maxAmount ? (details.maxAmount | currency) : 'No max' }}
|
|
7845
7875
|
</span>
|
|
7846
7876
|
</div>
|
|
7847
7877
|
}
|
|
@@ -7861,24 +7891,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
7861
7891
|
}
|
|
7862
7892
|
</div>
|
|
7863
7893
|
</div>
|
|
7864
|
-
</div>
|
|
7865
|
-
}
|
|
7866
|
-
}
|
|
7867
|
-
</div>
|
|
7868
|
-
<div class="tw-bg-gray-50 tw-px-4 tw-py-3 tw-flex tw-justify-end tw-gap-2 tw-border-t tw-border-gray-200">
|
|
7869
|
-
<button
|
|
7870
|
-
type="button"
|
|
7871
|
-
cideEleButton
|
|
7872
|
-
variant="primary"
|
|
7873
|
-
size="sm"
|
|
7874
|
-
(click)="onClose()">
|
|
7875
|
-
Close
|
|
7876
|
-
</button>
|
|
7877
|
-
</div>
|
|
7878
|
-
</div>
|
|
7879
7894
|
</div>
|
|
7880
|
-
|
|
7881
|
-
|
|
7895
|
+
}
|
|
7896
|
+
}
|
|
7897
|
+
</div>
|
|
7882
7898
|
`, styles: [":host{display:block}\n"] }]
|
|
7883
7899
|
}] });
|
|
7884
7900
|
|