cloud-ide-fees 0.0.43 → 0.0.47
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-cloud-ide-fees-DwymPnFD.mjs → cloud-ide-fees-cloud-ide-fees-DTu2UFxM.mjs} +38 -38
- package/fesm2022/{cloud-ide-fees-cloud-ide-fees-DwymPnFD.mjs.map → cloud-ide-fees-cloud-ide-fees-DTu2UFxM.mjs.map} +1 -1
- package/fesm2022/{cloud-ide-fees-discount-rule-manager.component-B2322yJN.mjs → cloud-ide-fees-discount-rule-manager.component-io1mU-5z.mjs} +2 -2
- package/fesm2022/{cloud-ide-fees-discount-rule-manager.component-B2322yJN.mjs.map → cloud-ide-fees-discount-rule-manager.component-io1mU-5z.mjs.map} +1 -1
- package/fesm2022/cloud-ide-fees.mjs +1 -1
- package/package.json +1 -1
|
@@ -117,7 +117,7 @@ const feesRoutes = [
|
|
|
117
117
|
// Discount & Scholarship Management
|
|
118
118
|
{
|
|
119
119
|
path: 'discounts',
|
|
120
|
-
loadComponent: () => import('./cloud-ide-fees-discount-rule-manager.component-
|
|
120
|
+
loadComponent: () => import('./cloud-ide-fees-discount-rule-manager.component-io1mU-5z.mjs').then(c => c.DiscountRuleManagerComponent),
|
|
121
121
|
title: 'Discount Rules Management',
|
|
122
122
|
canActivate: [authGuard],
|
|
123
123
|
data: { sypg_page_code: "fee_discount_rule" }
|
|
@@ -2380,7 +2380,7 @@ class FeeStructureCreateComponent {
|
|
|
2380
2380
|
this.breadcrumbData.set(additionalItems);
|
|
2381
2381
|
}
|
|
2382
2382
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeStructureCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2383
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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=\"xs\" (click)=\"onCancel()\" leftIcon=\"arrow_back\" [adaptive]=\"true\">\n Back to List\n </button>\n\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 - Always on one row -->\n <div class=\"tw-grid\" style=\"grid-template-columns: 170px 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 <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 </div>\n\n <div>\n <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n placeholder=\"Enter detailed description of the fee structure...\" 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 [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\" [disabled]=\"isViewMode()\"\n [showLabels]=\"true\" [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 label=\"Reservation Category\" formControlName=\"fees_student_category_id_sygms\"\n [options]=\"studentCategories()\" [loading]=\"studentCategoriesLoading()\"\n placeholder=\"Select reservation category\" size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div\n 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\" (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\n 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\" (click)=\"moveItemUp(itemIndex)\"\n 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) { <button cideEleButton type=\"button\" variant=\"ghost\"\n size=\"xs\" (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)\" [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 label=\"Category\" formControlName=\"feesi_category_id_sygms\"\n [options]=\"feeCategoriesOptions()\" [loading]=\"feeCategoriesLoading()\" size=\"sm\"\n placeholder=\"Select Fee Category\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Item Code\" formControlName=\"feesi_item_code\" size=\"sm\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Item Name\" formControlName=\"feesi_item_name\" 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 label=\"Description\" formControlName=\"feesi_description\" rows=\"1\" 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\" type=\"number\" 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 label=\"Minimum Amount\" formControlName=\"feesi_min_amount\" type=\"number\"\n size=\"sm\" placeholder=\"No minimum\"\n title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Maximum Amount\" formControlName=\"feesi_max_amount\" type=\"number\"\n size=\"sm\" 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 label=\"Installment Count\" formControlName=\"feesi_installment_count\" 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 label=\"Tax Percentage\" formControlName=\"feesi_tax_percentage\" 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\n = $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 label=\"Distribution Type\" formControlName=\"distribution_type\"\n [options]=\"distributionTypeOptions\" size=\"sm\">\n </cide-ele-select>\n\n @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n <cide-ele-input label=\"Percentage (%)\" formControlName=\"percentage\" type=\"number\" 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) *\n (installment.get('percentage')?.value || 0) / 100) }}\n </div>\n @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex >\n 0) {\n <div class=\"tw-text-xs tw-font-semibold\"\n [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\"\n [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) +\n (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 label=\"Fixed Amount\" formControlName=\"fixed_amount\" type=\"number\" 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 label=\"Due Date Offset (Days from Assignment)\"\n formControlName=\"due_date_offset_days\" type=\"number\" size=\"sm\"\n title=\"Days from assignment date\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Due Date (Fixed Date - Alternative)\" formControlName=\"due_date\"\n type=\"date\" size=\"sm\" 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 label=\"Start Offset (Days from Assignment)\"\n formControlName=\"collection_start_offset_days\" type=\"number\" size=\"sm\"\n title=\"Days from assignment date when collection can start\">\n </cide-ele-input>\n\n <cide-ele-input label=\"End Offset (Days from Assignment)\"\n formControlName=\"collection_end_offset_days\" type=\"number\" 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 label=\"Start Date (Fixed Date - Alternative)\"\n formControlName=\"collection_start_date\" type=\"date\" size=\"sm\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n\n <cide-ele-input label=\"End Date (Fixed Date - Alternative)\"\n formControlName=\"collection_end_date\" type=\"date\" 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\n 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.\n </p>\n </div>\n }\n </div>\n }\n }\n\n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <!-- Form Field Errors -->\n <div class=\"tw-w-full tw-mb-4\">\n <cide-form-field-error [formGroup]=\"feeStructureForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n @if (!isEditMode()) {\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n }\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\n continue.\n </p>\n </div>\n }\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\"\n [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" [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>", 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", "adaptive"], 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", "name"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "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"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
|
|
2383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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=\"xs\" (click)=\"onCancel()\" leftIcon=\"arrow_back\" [adaptive]=\"true\">\n Back to List\n </button>\n\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=\"xs\" 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 - Always on one row -->\n <div class=\"tw-grid\" style=\"grid-template-columns: 170px 1fr; gap: 1rem;\">\n <cide-ele-input label=\"Fee Structure Code\" formControlName=\"fees_structure_code\"\n placeholder=\"Auto-generated by API\" size=\"xs\" [disabled]=\"isEditMode()\">\n </cide-ele-input>\n <cide-ele-input label=\"Fee Structure Name\" formControlName=\"fees_structure_name\"\n placeholder=\"e.g., Grade 10 Fee Structure 2024-25\" size=\"xs\">\n </cide-ele-input>\n </div>\n\n <div>\n <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n placeholder=\"Enter detailed description of the fee structure...\" rows=\"2\" size=\"xs\">\n </cide-ele-textarea>\n </div>\n\n <!-- Academic Dropdowns - Using Program Section Selector Component -->\n\n <cide-shared-program-section-selector-wrapper [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\" [disabled]=\"isViewMode()\"\n [showLabels]=\"true\" [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 label=\"Reservation Category\" formControlName=\"fees_student_category_id_sygms\"\n [options]=\"studentCategories()\" [loading]=\"studentCategoriesLoading()\"\n placeholder=\"Select reservation category\" size=\"xs\">\n </cide-ele-select>\n </div>\n\n <div\n 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=\"xs\">\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=\"xs\" leftIcon=\"add\" (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\n 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\" (click)=\"moveItemUp(itemIndex)\"\n 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) { <button cideEleButton type=\"button\" variant=\"ghost\"\n size=\"xs\" (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)\" [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 label=\"Category\" formControlName=\"feesi_category_id_sygms\"\n [options]=\"feeCategoriesOptions()\" [loading]=\"feeCategoriesLoading()\" size=\"xs\"\n placeholder=\"Select Fee Category\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Item Code\" formControlName=\"feesi_item_code\" size=\"xs\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Item Name\" formControlName=\"feesi_item_name\" size=\"xs\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-mt-2\">\n <cide-ele-textarea label=\"Description\" formControlName=\"feesi_description\" rows=\"1\" size=\"xs\">\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\" type=\"number\" size=\"xs\"\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=\"xs\">\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 label=\"Minimum Amount\" formControlName=\"feesi_min_amount\" type=\"number\"\n size=\"xs\" placeholder=\"No minimum\"\n title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Maximum Amount\" formControlName=\"feesi_max_amount\" type=\"number\"\n size=\"xs\" 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=\"xs\">\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=\"xs\">\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=\"xs\">\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 label=\"Installment Count\" formControlName=\"feesi_installment_count\" type=\"number\"\n size=\"xs\">\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=\"xs\">\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 label=\"Tax Percentage\" formControlName=\"feesi_tax_percentage\" type=\"number\"\n size=\"xs\">\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\n = $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 label=\"Distribution Type\" formControlName=\"distribution_type\"\n [options]=\"distributionTypeOptions\" size=\"xs\">\n </cide-ele-select>\n\n @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n <cide-ele-input label=\"Percentage (%)\" formControlName=\"percentage\" type=\"number\" size=\"xs\"\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) *\n (installment.get('percentage')?.value || 0) / 100) }}\n </div>\n @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex >\n 0) {\n <div class=\"tw-text-xs tw-font-semibold\"\n [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\"\n [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) +\n (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 label=\"Fixed Amount\" formControlName=\"fixed_amount\" type=\"number\" size=\"xs\"\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 label=\"Due Date Offset (Days from Assignment)\"\n formControlName=\"due_date_offset_days\" type=\"number\" size=\"xs\"\n title=\"Days from assignment date\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Due Date (Fixed Date - Alternative)\" formControlName=\"due_date\"\n type=\"date\" size=\"xs\" 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 label=\"Start Offset (Days from Assignment)\"\n formControlName=\"collection_start_offset_days\" type=\"number\" size=\"xs\"\n title=\"Days from assignment date when collection can start\">\n </cide-ele-input>\n\n <cide-ele-input label=\"End Offset (Days from Assignment)\"\n formControlName=\"collection_end_offset_days\" type=\"number\" size=\"xs\"\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 label=\"Start Date (Fixed Date - Alternative)\"\n formControlName=\"collection_start_date\" type=\"date\" size=\"xs\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n\n <cide-ele-input label=\"End Date (Fixed Date - Alternative)\"\n formControlName=\"collection_end_date\" type=\"date\" size=\"xs\"\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\n 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.\n </p>\n </div>\n }\n </div>\n }\n }\n\n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <!-- Form Field Errors -->\n <div class=\"tw-w-full tw-mb-4\">\n <cide-form-field-error [formGroup]=\"feeStructureForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n @if (!isEditMode()) {\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n }\n\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (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\n continue.\n </p>\n </div>\n }\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"xs\"\n [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" [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>", 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", "adaptive"], 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", "name"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "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"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
|
|
2384
2384
|
}
|
|
2385
2385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeStructureCreateComponent, decorators: [{
|
|
2386
2386
|
type: Component,
|
|
@@ -2396,7 +2396,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2396
2396
|
CideLytSharedWrapperComponent,
|
|
2397
2397
|
ProgramSectionSelectorWrapperComponent,
|
|
2398
2398
|
CideFormFieldErrorComponent
|
|
2399
|
-
], 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=\"xs\" (click)=\"onCancel()\" leftIcon=\"arrow_back\" [adaptive]=\"true\">\n Back to List\n </button>\n\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 - Always on one row -->\n <div class=\"tw-grid\" style=\"grid-template-columns: 170px 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 <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 </div>\n\n <div>\n <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n placeholder=\"Enter detailed description of the fee structure...\" 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 [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\" [disabled]=\"isViewMode()\"\n [showLabels]=\"true\" [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 label=\"Reservation Category\" formControlName=\"fees_student_category_id_sygms\"\n [options]=\"studentCategories()\" [loading]=\"studentCategoriesLoading()\"\n placeholder=\"Select reservation category\" size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div\n 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\" (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\n 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\" (click)=\"moveItemUp(itemIndex)\"\n 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) { <button cideEleButton type=\"button\" variant=\"ghost\"\n size=\"xs\" (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)\" [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 label=\"Category\" formControlName=\"feesi_category_id_sygms\"\n [options]=\"feeCategoriesOptions()\" [loading]=\"feeCategoriesLoading()\" size=\"sm\"\n placeholder=\"Select Fee Category\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Item Code\" formControlName=\"feesi_item_code\" size=\"sm\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Item Name\" formControlName=\"feesi_item_name\" 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 label=\"Description\" formControlName=\"feesi_description\" rows=\"1\" 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\" type=\"number\" 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 label=\"Minimum Amount\" formControlName=\"feesi_min_amount\" type=\"number\"\n size=\"sm\" placeholder=\"No minimum\"\n title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Maximum Amount\" formControlName=\"feesi_max_amount\" type=\"number\"\n size=\"sm\" 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 label=\"Installment Count\" formControlName=\"feesi_installment_count\" 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 label=\"Tax Percentage\" formControlName=\"feesi_tax_percentage\" 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\n = $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 label=\"Distribution Type\" formControlName=\"distribution_type\"\n [options]=\"distributionTypeOptions\" size=\"sm\">\n </cide-ele-select>\n\n @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n <cide-ele-input label=\"Percentage (%)\" formControlName=\"percentage\" type=\"number\" 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) *\n (installment.get('percentage')?.value || 0) / 100) }}\n </div>\n @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex >\n 0) {\n <div class=\"tw-text-xs tw-font-semibold\"\n [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\"\n [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) +\n (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 label=\"Fixed Amount\" formControlName=\"fixed_amount\" type=\"number\" 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 label=\"Due Date Offset (Days from Assignment)\"\n formControlName=\"due_date_offset_days\" type=\"number\" size=\"sm\"\n title=\"Days from assignment date\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Due Date (Fixed Date - Alternative)\" formControlName=\"due_date\"\n type=\"date\" size=\"sm\" 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 label=\"Start Offset (Days from Assignment)\"\n formControlName=\"collection_start_offset_days\" type=\"number\" size=\"sm\"\n title=\"Days from assignment date when collection can start\">\n </cide-ele-input>\n\n <cide-ele-input label=\"End Offset (Days from Assignment)\"\n formControlName=\"collection_end_offset_days\" type=\"number\" 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 label=\"Start Date (Fixed Date - Alternative)\"\n formControlName=\"collection_start_date\" type=\"date\" size=\"sm\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n\n <cide-ele-input label=\"End Date (Fixed Date - Alternative)\"\n formControlName=\"collection_end_date\" type=\"date\" 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\n 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.\n </p>\n </div>\n }\n </div>\n }\n }\n\n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <!-- Form Field Errors -->\n <div class=\"tw-w-full tw-mb-4\">\n <cide-form-field-error [formGroup]=\"feeStructureForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n @if (!isEditMode()) {\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n }\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\n continue.\n </p>\n </div>\n }\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\"\n [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" [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>" }]
|
|
2399
|
+
], 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=\"xs\" (click)=\"onCancel()\" leftIcon=\"arrow_back\" [adaptive]=\"true\">\n Back to List\n </button>\n\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=\"xs\" 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 - Always on one row -->\n <div class=\"tw-grid\" style=\"grid-template-columns: 170px 1fr; gap: 1rem;\">\n <cide-ele-input label=\"Fee Structure Code\" formControlName=\"fees_structure_code\"\n placeholder=\"Auto-generated by API\" size=\"xs\" [disabled]=\"isEditMode()\">\n </cide-ele-input>\n <cide-ele-input label=\"Fee Structure Name\" formControlName=\"fees_structure_name\"\n placeholder=\"e.g., Grade 10 Fee Structure 2024-25\" size=\"xs\">\n </cide-ele-input>\n </div>\n\n <div>\n <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n placeholder=\"Enter detailed description of the fee structure...\" rows=\"2\" size=\"xs\">\n </cide-ele-textarea>\n </div>\n\n <!-- Academic Dropdowns - Using Program Section Selector Component -->\n\n <cide-shared-program-section-selector-wrapper [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\" [disabled]=\"isViewMode()\"\n [showLabels]=\"true\" [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 label=\"Reservation Category\" formControlName=\"fees_student_category_id_sygms\"\n [options]=\"studentCategories()\" [loading]=\"studentCategoriesLoading()\"\n placeholder=\"Select reservation category\" size=\"xs\">\n </cide-ele-select>\n </div>\n\n <div\n 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=\"xs\">\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=\"xs\" leftIcon=\"add\" (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\n 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\" (click)=\"moveItemUp(itemIndex)\"\n 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) { <button cideEleButton type=\"button\" variant=\"ghost\"\n size=\"xs\" (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)\" [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 label=\"Category\" formControlName=\"feesi_category_id_sygms\"\n [options]=\"feeCategoriesOptions()\" [loading]=\"feeCategoriesLoading()\" size=\"xs\"\n placeholder=\"Select Fee Category\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Item Code\" formControlName=\"feesi_item_code\" size=\"xs\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Item Name\" formControlName=\"feesi_item_name\" size=\"xs\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-mt-2\">\n <cide-ele-textarea label=\"Description\" formControlName=\"feesi_description\" rows=\"1\" size=\"xs\">\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\" type=\"number\" size=\"xs\"\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=\"xs\">\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 label=\"Minimum Amount\" formControlName=\"feesi_min_amount\" type=\"number\"\n size=\"xs\" placeholder=\"No minimum\"\n title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Maximum Amount\" formControlName=\"feesi_max_amount\" type=\"number\"\n size=\"xs\" 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=\"xs\">\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=\"xs\">\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=\"xs\">\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 label=\"Installment Count\" formControlName=\"feesi_installment_count\" type=\"number\"\n size=\"xs\">\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=\"xs\">\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 label=\"Tax Percentage\" formControlName=\"feesi_tax_percentage\" type=\"number\"\n size=\"xs\">\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\n = $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 label=\"Distribution Type\" formControlName=\"distribution_type\"\n [options]=\"distributionTypeOptions\" size=\"xs\">\n </cide-ele-select>\n\n @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n <cide-ele-input label=\"Percentage (%)\" formControlName=\"percentage\" type=\"number\" size=\"xs\"\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) *\n (installment.get('percentage')?.value || 0) / 100) }}\n </div>\n @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex >\n 0) {\n <div class=\"tw-text-xs tw-font-semibold\"\n [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\"\n [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) +\n (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 label=\"Fixed Amount\" formControlName=\"fixed_amount\" type=\"number\" size=\"xs\"\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 label=\"Due Date Offset (Days from Assignment)\"\n formControlName=\"due_date_offset_days\" type=\"number\" size=\"xs\"\n title=\"Days from assignment date\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Due Date (Fixed Date - Alternative)\" formControlName=\"due_date\"\n type=\"date\" size=\"xs\" 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 label=\"Start Offset (Days from Assignment)\"\n formControlName=\"collection_start_offset_days\" type=\"number\" size=\"xs\"\n title=\"Days from assignment date when collection can start\">\n </cide-ele-input>\n\n <cide-ele-input label=\"End Offset (Days from Assignment)\"\n formControlName=\"collection_end_offset_days\" type=\"number\" size=\"xs\"\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 label=\"Start Date (Fixed Date - Alternative)\"\n formControlName=\"collection_start_date\" type=\"date\" size=\"xs\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n\n <cide-ele-input label=\"End Date (Fixed Date - Alternative)\"\n formControlName=\"collection_end_date\" type=\"date\" size=\"xs\"\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\n 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.\n </p>\n </div>\n }\n </div>\n }\n }\n\n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <!-- Form Field Errors -->\n <div class=\"tw-w-full tw-mb-4\">\n <cide-form-field-error [formGroup]=\"feeStructureForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n @if (!isEditMode()) {\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n }\n\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (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\n continue.\n </p>\n </div>\n }\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"xs\"\n [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" [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>" }]
|
|
2400
2400
|
}], ctorParameters: () => [] });
|
|
2401
2401
|
|
|
2402
2402
|
var feeStructureCreate_component = /*#__PURE__*/Object.freeze({
|
|
@@ -3103,7 +3103,7 @@ class FeeAssignmentListComponent {
|
|
|
3103
3103
|
return directDetails || 'N/A';
|
|
3104
3104
|
}
|
|
3105
3105
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeAssignmentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeAssignmentListComponent, isStandalone: true, selector: "cide-fee-assignment-list", viewQueries: [{ propertyName: "studentDetailsRendererTemplate", first: true, predicate: ["studentDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "amountRendererTemplate", first: true, predicate: ["amountRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "dateRendererTemplate", first: true, predicate: ["dateRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fee Assignment Container -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n\n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"navigateToAssign()\" [adaptive]=\"true\">\n Assign Fees\n </button>\n }\n @if (canBulkAssign()) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" leftIcon=\"group_add\" (click)=\"bulkAssign()\" [adaptive]=\"true\">\n Bulk Assignment\n </button>\n }\n\n </div>\n\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Stats Row -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-4 tw-gap-4\">\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Total Assigned</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-gray-900\">{{ stats().total }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Pending</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-yellow-600\">{{ stats().pending }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Partially Paid</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-blue-600\">{{ stats().partial }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Paid</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-green-600\">{{ stats().paid }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filters Row -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-4\">\n <cide-ele-select label=\"Academic Year\" [options]=\"academicYearOptions()\"\n [ngModel]=\"selectedAcademicYearFilter()\" (ngModelChange)=\"onAcademicYearFilterChange($event)\" size=\"sm\"\n placeholder=\"All Academic Years\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Class/Program\" [options]=\"classOptions()\" [ngModel]=\"selectedClassFilter()\"\n (ngModelChange)=\"onClassFilterChange($event)\" size=\"sm\" placeholder=\"All Classes\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Section\" [options]=\"sectionOptions()\" [ngModel]=\"selectedSectionFilter()\"\n (ngModelChange)=\"onSectionFilterChange($event)\" size=\"sm\" placeholder=\"All Sections\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Status\" [options]=\"[\n {value: '', label: 'All Status'},\n {value: 'PENDING', label: 'Pending'},\n {value: 'PARTIALLY_PAID', label: 'Partially Paid'},\n {value: 'PAID', label: 'Paid'},\n {value: 'WAIVED', label: 'Waived'}\n ]\" [ngModel]=\"selectedStatusFilter()\" (ngModelChange)=\"onStatusFilterChange($event)\" size=\"sm\"\n placeholder=\"All Status\">\n </cide-ele-select>\n </div>\n <div class=\"tw-mt-3\">\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"clearFilters()\">\n Clear Filters\n </button>\n </div>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #studentDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-w-full\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ row.student_name || 'N/A' }}</span>\n @if (row.student_id) {\n <span class=\"tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-gray-100 tw-text-gray-600 tw-text-[10px] tw-font-medium\">\n {{ row.student_id }}\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n @if (row.class || row.section) {\n {{ row.class || '' }} {{ row.section !== 'N/A' && row.section ? '/ ' + row.section : '' }}\n } @else {\n -\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #amountRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-text-sm tw-items-end\">\n <span class=\"tw-text-gray-900 tw-font-semibold\">{{ formatCurrency(row.feeas_amount_original) }}</span>\n @if (row.feeas_amount_discount > 0) {\n <div class=\"tw-text-xs tw-text-blue-600\">\n Discount: {{ formatCurrency(row.feeas_amount_discount) }}\n </div>\n }\n @if (row.feeas_amount_scholarship > 0) {\n <div class=\"tw-text-xs tw-text-purple-600\">\n Scholarship: {{ formatCurrency(row.feeas_amount_scholarship) }}\n </div>\n }\n <div class=\"tw-text-xs tw-text-gray-500\">\n Paid: {{ formatCurrency(row.feeas_amount_paid) }}\n </div>\n <div class=\"tw-text-xs tw-font-semibold\"\n [ngClass]=\"row.feeas_amount_remaining > 0 ? 'tw-text-red-600' : 'tw-text-green-600'\">\n Outstanding: {{ formatCurrency(row.feeas_amount_remaining) }}\n </div>\n </div>\n</ng-template>\n\n<ng-template #dateRendererTemplate let-row=\"row\">\n <div class=\"tw-text-sm tw-text-gray-900\">{{ formatDate(row.feeas_due_date) }}</div>\n</ng-template>\n\n<ng-template #statusRendererTemplate let-row=\"row\">\n <span\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\n [ngClass]=\"getStatusBadgeClass(row)\">\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\n {{ row.feeas_payment_status === 'PAID' ? 'check_circle' :\n row.feeas_payment_status === 'PARTIALLY_PAID' ? 'schedule' :\n row.feeas_payment_status === 'PENDING' ? 'pending' : 'cancel' }}\n </cide-ele-icon>\n {{ getStatusText(row) }}\n </span>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>", styles: [".fee-assignment-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "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"] }] });
|
|
3106
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeAssignmentListComponent, isStandalone: true, selector: "cide-fee-assignment-list", viewQueries: [{ propertyName: "studentDetailsRendererTemplate", first: true, predicate: ["studentDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "amountRendererTemplate", first: true, predicate: ["amountRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "dateRendererTemplate", first: true, predicate: ["dateRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fee Assignment Container -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n\n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"navigateToAssign()\" [adaptive]=\"true\">\n Assign Fees\n </button>\n }\n @if (canBulkAssign()) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" leftIcon=\"group_add\" (click)=\"bulkAssign()\" [adaptive]=\"true\">\n Bulk Assignment\n </button>\n }\n\n </div>\n\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Stats Row -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-4 tw-gap-4\">\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Total Assigned</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-gray-900\">{{ stats().total }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Pending</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-yellow-600\">{{ stats().pending }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Partially Paid</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-blue-600\">{{ stats().partial }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Paid</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-green-600\">{{ stats().paid }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filters Row -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-4\">\n <cide-ele-select label=\"Academic Year\" [options]=\"academicYearOptions()\"\n [ngModel]=\"selectedAcademicYearFilter()\" (ngModelChange)=\"onAcademicYearFilterChange($event)\" size=\"xs\"\n placeholder=\"All Academic Years\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Class/Program\" [options]=\"classOptions()\" [ngModel]=\"selectedClassFilter()\"\n (ngModelChange)=\"onClassFilterChange($event)\" size=\"xs\" placeholder=\"All Classes\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Section\" [options]=\"sectionOptions()\" [ngModel]=\"selectedSectionFilter()\"\n (ngModelChange)=\"onSectionFilterChange($event)\" size=\"xs\" placeholder=\"All Sections\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Status\" [options]=\"[\n {value: '', label: 'All Status'},\n {value: 'PENDING', label: 'Pending'},\n {value: 'PARTIALLY_PAID', label: 'Partially Paid'},\n {value: 'PAID', label: 'Paid'},\n {value: 'WAIVED', label: 'Waived'}\n ]\" [ngModel]=\"selectedStatusFilter()\" (ngModelChange)=\"onStatusFilterChange($event)\" size=\"xs\"\n placeholder=\"All Status\">\n </cide-ele-select>\n </div>\n <div class=\"tw-mt-3\">\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"clearFilters()\">\n Clear Filters\n </button>\n </div>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #studentDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-w-full\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ row.student_name || 'N/A' }}</span>\n @if (row.student_id) {\n <span class=\"tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-gray-100 tw-text-gray-600 tw-text-[10px] tw-font-medium\">\n {{ row.student_id }}\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n @if (row.class || row.section) {\n {{ row.class || '' }} {{ row.section !== 'N/A' && row.section ? '/ ' + row.section : '' }}\n } @else {\n -\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #amountRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-text-sm tw-items-end\">\n <span class=\"tw-text-gray-900 tw-font-semibold\">{{ formatCurrency(row.feeas_amount_original) }}</span>\n @if (row.feeas_amount_discount > 0) {\n <div class=\"tw-text-xs tw-text-blue-600\">\n Discount: {{ formatCurrency(row.feeas_amount_discount) }}\n </div>\n }\n @if (row.feeas_amount_scholarship > 0) {\n <div class=\"tw-text-xs tw-text-purple-600\">\n Scholarship: {{ formatCurrency(row.feeas_amount_scholarship) }}\n </div>\n }\n <div class=\"tw-text-xs tw-text-gray-500\">\n Paid: {{ formatCurrency(row.feeas_amount_paid) }}\n </div>\n <div class=\"tw-text-xs tw-font-semibold\"\n [ngClass]=\"row.feeas_amount_remaining > 0 ? 'tw-text-red-600' : 'tw-text-green-600'\">\n Outstanding: {{ formatCurrency(row.feeas_amount_remaining) }}\n </div>\n </div>\n</ng-template>\n\n<ng-template #dateRendererTemplate let-row=\"row\">\n <div class=\"tw-text-sm tw-text-gray-900\">{{ formatDate(row.feeas_due_date) }}</div>\n</ng-template>\n\n<ng-template #statusRendererTemplate let-row=\"row\">\n <span\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\n [ngClass]=\"getStatusBadgeClass(row)\">\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\n {{ row.feeas_payment_status === 'PAID' ? 'check_circle' :\n row.feeas_payment_status === 'PARTIALLY_PAID' ? 'schedule' :\n row.feeas_payment_status === 'PENDING' ? 'pending' : 'cancel' }}\n </cide-ele-icon>\n {{ getStatusText(row) }}\n </span>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>", styles: [".fee-assignment-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "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"] }] });
|
|
3107
3107
|
}
|
|
3108
3108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeAssignmentListComponent, decorators: [{
|
|
3109
3109
|
type: Component,
|
|
@@ -3116,7 +3116,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3116
3116
|
CideEleDropdownComponent,
|
|
3117
3117
|
CideSelectComponent,
|
|
3118
3118
|
CideLytSharedWrapperComponent
|
|
3119
|
-
], template: "<!-- Fee Assignment Container -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n\n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"navigateToAssign()\" [adaptive]=\"true\">\n Assign Fees\n </button>\n }\n @if (canBulkAssign()) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" leftIcon=\"group_add\" (click)=\"bulkAssign()\" [adaptive]=\"true\">\n Bulk Assignment\n </button>\n }\n\n </div>\n\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Stats Row -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-4 tw-gap-4\">\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Total Assigned</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-gray-900\">{{ stats().total }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Pending</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-yellow-600\">{{ stats().pending }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Partially Paid</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-blue-600\">{{ stats().partial }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Paid</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-green-600\">{{ stats().paid }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filters Row -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-4\">\n <cide-ele-select label=\"Academic Year\" [options]=\"academicYearOptions()\"\n [ngModel]=\"selectedAcademicYearFilter()\" (ngModelChange)=\"onAcademicYearFilterChange($event)\" size=\"
|
|
3119
|
+
], template: "<!-- Fee Assignment Container -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n\n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"navigateToAssign()\" [adaptive]=\"true\">\n Assign Fees\n </button>\n }\n @if (canBulkAssign()) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" leftIcon=\"group_add\" (click)=\"bulkAssign()\" [adaptive]=\"true\">\n Bulk Assignment\n </button>\n }\n\n </div>\n\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Stats Row -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-4 tw-gap-4\">\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Total Assigned</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-gray-900\">{{ stats().total }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Pending</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-yellow-600\">{{ stats().pending }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Partially Paid</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-blue-600\">{{ stats().partial }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Paid</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-green-600\">{{ stats().paid }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filters Row -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-4\">\n <cide-ele-select label=\"Academic Year\" [options]=\"academicYearOptions()\"\n [ngModel]=\"selectedAcademicYearFilter()\" (ngModelChange)=\"onAcademicYearFilterChange($event)\" size=\"xs\"\n placeholder=\"All Academic Years\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Class/Program\" [options]=\"classOptions()\" [ngModel]=\"selectedClassFilter()\"\n (ngModelChange)=\"onClassFilterChange($event)\" size=\"xs\" placeholder=\"All Classes\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Section\" [options]=\"sectionOptions()\" [ngModel]=\"selectedSectionFilter()\"\n (ngModelChange)=\"onSectionFilterChange($event)\" size=\"xs\" placeholder=\"All Sections\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Status\" [options]=\"[\n {value: '', label: 'All Status'},\n {value: 'PENDING', label: 'Pending'},\n {value: 'PARTIALLY_PAID', label: 'Partially Paid'},\n {value: 'PAID', label: 'Paid'},\n {value: 'WAIVED', label: 'Waived'}\n ]\" [ngModel]=\"selectedStatusFilter()\" (ngModelChange)=\"onStatusFilterChange($event)\" size=\"xs\"\n placeholder=\"All Status\">\n </cide-ele-select>\n </div>\n <div class=\"tw-mt-3\">\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"clearFilters()\">\n Clear Filters\n </button>\n </div>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #studentDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-w-full\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ row.student_name || 'N/A' }}</span>\n @if (row.student_id) {\n <span class=\"tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-gray-100 tw-text-gray-600 tw-text-[10px] tw-font-medium\">\n {{ row.student_id }}\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n @if (row.class || row.section) {\n {{ row.class || '' }} {{ row.section !== 'N/A' && row.section ? '/ ' + row.section : '' }}\n } @else {\n -\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #amountRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-text-sm tw-items-end\">\n <span class=\"tw-text-gray-900 tw-font-semibold\">{{ formatCurrency(row.feeas_amount_original) }}</span>\n @if (row.feeas_amount_discount > 0) {\n <div class=\"tw-text-xs tw-text-blue-600\">\n Discount: {{ formatCurrency(row.feeas_amount_discount) }}\n </div>\n }\n @if (row.feeas_amount_scholarship > 0) {\n <div class=\"tw-text-xs tw-text-purple-600\">\n Scholarship: {{ formatCurrency(row.feeas_amount_scholarship) }}\n </div>\n }\n <div class=\"tw-text-xs tw-text-gray-500\">\n Paid: {{ formatCurrency(row.feeas_amount_paid) }}\n </div>\n <div class=\"tw-text-xs tw-font-semibold\"\n [ngClass]=\"row.feeas_amount_remaining > 0 ? 'tw-text-red-600' : 'tw-text-green-600'\">\n Outstanding: {{ formatCurrency(row.feeas_amount_remaining) }}\n </div>\n </div>\n</ng-template>\n\n<ng-template #dateRendererTemplate let-row=\"row\">\n <div class=\"tw-text-sm tw-text-gray-900\">{{ formatDate(row.feeas_due_date) }}</div>\n</ng-template>\n\n<ng-template #statusRendererTemplate let-row=\"row\">\n <span\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\n [ngClass]=\"getStatusBadgeClass(row)\">\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\n {{ row.feeas_payment_status === 'PAID' ? 'check_circle' :\n row.feeas_payment_status === 'PARTIALLY_PAID' ? 'schedule' :\n row.feeas_payment_status === 'PENDING' ? 'pending' : 'cancel' }}\n </cide-ele-icon>\n {{ getStatusText(row) }}\n </span>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>", styles: [".fee-assignment-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
|
|
3120
3120
|
}], propDecorators: { studentDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['studentDetailsRendererTemplate', { isSignal: true }] }], amountRendererTemplate: [{ type: i0.ViewChild, args: ['amountRendererTemplate', { isSignal: true }] }], dateRendererTemplate: [{ type: i0.ViewChild, args: ['dateRendererTemplate', { isSignal: true }] }], statusRendererTemplate: [{ type: i0.ViewChild, args: ['statusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }] } });
|
|
3121
3121
|
|
|
3122
3122
|
var feeAssignmentList_component = /*#__PURE__*/Object.freeze({
|
|
@@ -3439,7 +3439,7 @@ class FeeDiscountFormComponent {
|
|
|
3439
3439
|
type="button"
|
|
3440
3440
|
cideEleButton
|
|
3441
3441
|
variant="ghost"
|
|
3442
|
-
size="
|
|
3442
|
+
size="xs"
|
|
3443
3443
|
(click)="onCancel()">
|
|
3444
3444
|
Cancel
|
|
3445
3445
|
</button>
|
|
@@ -3447,7 +3447,7 @@ class FeeDiscountFormComponent {
|
|
|
3447
3447
|
type="button"
|
|
3448
3448
|
cideEleButton
|
|
3449
3449
|
variant="primary"
|
|
3450
|
-
size="
|
|
3450
|
+
size="xs"
|
|
3451
3451
|
[disabled]="!discountForm.valid"
|
|
3452
3452
|
(click)="onSave()">
|
|
3453
3453
|
{{ existingDiscount() ? 'Update Discount' : 'Save Discount' }}
|
|
@@ -3579,7 +3579,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3579
3579
|
type="button"
|
|
3580
3580
|
cideEleButton
|
|
3581
3581
|
variant="ghost"
|
|
3582
|
-
size="
|
|
3582
|
+
size="xs"
|
|
3583
3583
|
(click)="onCancel()">
|
|
3584
3584
|
Cancel
|
|
3585
3585
|
</button>
|
|
@@ -3587,7 +3587,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3587
3587
|
type="button"
|
|
3588
3588
|
cideEleButton
|
|
3589
3589
|
variant="primary"
|
|
3590
|
-
size="
|
|
3590
|
+
size="xs"
|
|
3591
3591
|
[disabled]="!discountForm.valid"
|
|
3592
3592
|
(click)="onSave()">
|
|
3593
3593
|
{{ existingDiscount() ? 'Update Discount' : 'Save Discount' }}
|
|
@@ -3831,7 +3831,7 @@ class FeeScholarshipFormComponent {
|
|
|
3831
3831
|
type="button"
|
|
3832
3832
|
cideEleButton
|
|
3833
3833
|
variant="ghost"
|
|
3834
|
-
size="
|
|
3834
|
+
size="xs"
|
|
3835
3835
|
(click)="onCancel()">
|
|
3836
3836
|
Cancel
|
|
3837
3837
|
</button>
|
|
@@ -3839,7 +3839,7 @@ class FeeScholarshipFormComponent {
|
|
|
3839
3839
|
type="button"
|
|
3840
3840
|
cideEleButton
|
|
3841
3841
|
variant="primary"
|
|
3842
|
-
size="
|
|
3842
|
+
size="xs"
|
|
3843
3843
|
[disabled]="!scholarshipForm.valid"
|
|
3844
3844
|
(click)="onSave()">
|
|
3845
3845
|
{{ existingScholarship() ? 'Update Scholarship' : 'Save Scholarship' }}
|
|
@@ -3988,7 +3988,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3988
3988
|
type="button"
|
|
3989
3989
|
cideEleButton
|
|
3990
3990
|
variant="ghost"
|
|
3991
|
-
size="
|
|
3991
|
+
size="xs"
|
|
3992
3992
|
(click)="onCancel()">
|
|
3993
3993
|
Cancel
|
|
3994
3994
|
</button>
|
|
@@ -3996,7 +3996,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3996
3996
|
type="button"
|
|
3997
3997
|
cideEleButton
|
|
3998
3998
|
variant="primary"
|
|
3999
|
-
size="
|
|
3999
|
+
size="xs"
|
|
4000
4000
|
[disabled]="!scholarshipForm.valid"
|
|
4001
4001
|
(click)="onSave()">
|
|
4002
4002
|
{{ existingScholarship() ? 'Update Scholarship' : 'Save Scholarship' }}
|
|
@@ -5690,7 +5690,7 @@ class FeeApplicableFeesComponent {
|
|
|
5690
5690
|
return selectedCount > 0 && selectedCount < selectableFees.length;
|
|
5691
5691
|
}
|
|
5692
5692
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeApplicableFeesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5693
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeApplicableFeesComponent, isStandalone: true, selector: "cide-fee-applicable-fees", inputs: { entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, academicYearId: { classPropertyName: "academicYearId", publicName: "academicYearId", isSignal: true, isRequired: false, transformFunction: null }, classProgramId: { classPropertyName: "classProgramId", publicName: "classProgramId", isSignal: true, isRequired: false, transformFunction: null }, termId: { classPropertyName: "termId", publicName: "termId", isSignal: true, isRequired: false, transformFunction: null }, branchId: { classPropertyName: "branchId", publicName: "branchId", isSignal: true, isRequired: false, transformFunction: null }, sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null }, studentId: { classPropertyName: "studentId", publicName: "studentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { feesCalculated: "feesCalculated" }, providers: [CurrencyPipe$1], ngImport: i0, template: "<div class=\"tw-w-full\">\r\n <!-- Loading State -->\r\n @if (loading()) {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400 tw-animate-spin tw-mx-auto tw-mb-2\">refresh</cide-ele-icon>\r\n <span class=\"tw-text-xs tw-text-gray-500\">Loading applicable fees...</span>\r\n </div>\r\n } @else if (applicableFees().length > 0) {\r\n <!-- Fee Structure Selection (if multiple structures) -->\r\n @if (feeStructureGroups().length > 1) {\r\n <div class=\"tw-mb-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\r\n <label class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2 tw-block\">Select Fee Structure</label>\r\n <cide-ele-select [options]=\"feeStructureOptions()\" [ngModel]=\"selectedFeeStructureId() || ''\"\r\n (ngModelChange)=\"onStructureChange($event)\" placeholder=\"Select a fee structure\">\r\n </cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Fee Items Table -->\r\n @if (selectedStructureFees().length > 0) {\r\n <div class=\"tw-overflow-x-auto tw-rounded-lg tw-border tw-border-gray-200\">\r\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-bg-white\">\r\n <thead class=\"tw-bg-gray-50\">\r\n <tr>\r\n <th class=\"tw-px-4 tw-py-3 tw-w-10 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <input type=\"checkbox\"\r\n class=\"tw-w-4 tw-h-4 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\r\n [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\"\r\n (change)=\"toggleSelectAll($any($event.target).checked)\">\r\n </div>\r\n </th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-left tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[250px]\">\r\n Fee Name</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-left tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap\">\r\n Category</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap tw-min-w-[120px]\">\r\n Original Amount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[160px]\">\r\n Discount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[160px]\">\r\n Scholarship</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap tw-min-w-[120px]\">\r\n Final Amount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-center tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-w-[80px]\">\r\n Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\r\n @for (fee of selectedStructureFees(); track fee._id) {\r\n <tr class=\"tw-bg-white hover:tw-bg-gray-50 tw-transition-colors\">\r\n <td class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <input type=\"checkbox\"\r\n class=\"tw-w-4 tw-h-4 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n [checked]=\"fee.is_assigned || isSelected(getFeeId(fee))\" [disabled]=\"!!fee.is_assigned\"\r\n (change)=\"toggleFeeSelection(getFeeId(fee))\">\r\n </div>\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-medium tw-text-gray-900 tw-bg-white\">\r\n {{ fee.fees_structure_name || 'N/A' }}\r\n @if (fee.fees_structure_code) {\r\n <span class=\"tw-text-gray-500 tw-ms-1\">({{ fee.fees_structure_code }})</span>\r\n }\r\n @if (fee.is_assigned) {\r\n <span\r\n class=\"tw-ml-2 tw-px-2 tw-py-0.5 tw-bg-yellow-100 tw-text-yellow-800 tw-text-xs tw-font-semibold tw-rounded-full\">\r\n Assigned\r\n </span>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-text-gray-600 tw-bg-white\">{{ fee.fees_category_name ||\r\n 'N/A' }}</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-text-gray-900 tw-text-right tw-font-medium tw-bg-white\">{{\r\n fee.fees_amount | currency }}</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-bg-white\">\r\n @if (getDiscountData(getFeeId(fee)); as discount) {\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-justify-end\">\r\n <span class=\"tw-text-xs tw-text-gray-600\">\r\n {{ discount.discount_amount | currency }}\r\n @if (discount.discount_type === 'PERCENTAGE') {\r\n <span class=\"tw-text-gray-400\">({{ discount.discount_value }}%)</span>\r\n }\r\n </span>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"openDiscountManagement(getFeeId(fee))\" title=\"Edit Discount\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">edit</cide-ele-icon>\r\n </button>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"removeDiscount(getFeeId(fee))\" title=\"Remove Discount\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" cideEleButton variant=\"outline\" size=\"xs\"\r\n (click)=\"openDiscountManagement(getFeeId(fee))\" class=\"tw-ml-auto\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">add</cide-ele-icon>\r\n Add Discount\r\n </button>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-bg-white\">\r\n @if (getScholarshipData(getFeeId(fee)); as scholarship) {\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-justify-end\">\r\n <span class=\"tw-text-xs tw-text-gray-600\">\r\n {{ scholarship.scholarship_amount | currency }}\r\n @if (scholarship.scholarship_category === 'PARTIAL' &&\r\n scholarship.scholarship_percentage) {\r\n <span class=\"tw-text-gray-400\">({{ scholarship.scholarship_percentage }}%)</span>\r\n } @else if (scholarship.scholarship_category === 'FULL') {\r\n <span class=\"tw-text-gray-400\">(Full)</span>\r\n }\r\n </span>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"openScholarshipManagement(getFeeId(fee))\" title=\"Edit Scholarship\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">edit</cide-ele-icon>\r\n </button>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"removeScholarship(getFeeId(fee))\" title=\"Remove Scholarship\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" cideEleButton variant=\"outline\" size=\"xs\"\r\n (click)=\"openScholarshipManagement(getFeeId(fee))\" class=\"tw-ml-auto\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">add</cide-ele-icon>\r\n Add Scholarship\r\n </button>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-semibold tw-text-gray-900 tw-text-right tw-bg-white\">\r\n {{ calculateFinalAmount(fee) | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-center tw-bg-white\">\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"viewFeeDetails(fee)\"\r\n title=\"View Details\">\r\n <cide-ele-icon>visibility</cide-ele-icon>\r\n </button>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n <tfoot class=\"tw-bg-gray-50 tw-border-t-2 tw-border-gray-200\">\r\n <tr>\r\n <td colspan=\"3\" class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-gray-900 tw-text-right\">\r\n Total:</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-blue-600 tw-text-right\">\r\n {{ totalDiscount() | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-purple-600 tw-text-right\">\r\n {{ totalScholarship() | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-base tw-font-bold tw-text-green-600 tw-text-right\">\r\n {{ totalFinalAmount() | currency }}\r\n </td>\r\n <td></td>\r\n </tr>\r\n </tfoot>\r\n </table>\r\n </div>\r\n } @else {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400 tw-mx-auto tw-mb-2\">account_balance</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-gray-600\">No fees available for selected structure.</p>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400 tw-mx-auto tw-mb-2\">search_off</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-gray-600\">No applicable fees found.</p>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Please ensure Class Program, Term, and Academic Year are\r\n selected.</p>\r\n </div>\r\n }\r\n</div>", styles: [":host{display:block}.fee-structure-select-container{max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
|
|
5693
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeApplicableFeesComponent, isStandalone: true, selector: "cide-fee-applicable-fees", inputs: { entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, academicYearId: { classPropertyName: "academicYearId", publicName: "academicYearId", isSignal: true, isRequired: false, transformFunction: null }, classProgramId: { classPropertyName: "classProgramId", publicName: "classProgramId", isSignal: true, isRequired: false, transformFunction: null }, termId: { classPropertyName: "termId", publicName: "termId", isSignal: true, isRequired: false, transformFunction: null }, branchId: { classPropertyName: "branchId", publicName: "branchId", isSignal: true, isRequired: false, transformFunction: null }, sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null }, studentId: { classPropertyName: "studentId", publicName: "studentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { feesCalculated: "feesCalculated" }, providers: [CurrencyPipe$1], ngImport: i0, template: "<div class=\"tw-w-full\">\r\n <!-- Loading State -->\r\n @if (loading()) {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400 tw-animate-spin tw-mx-auto tw-mb-2\">refresh</cide-ele-icon>\r\n <span class=\"tw-text-xs tw-text-gray-500\">Loading applicable fees...</span>\r\n </div>\r\n } @else if (applicableFees().length > 0) {\r\n <!-- Fee Structure Selection (if multiple structures) -->\r\n @if (feeStructureGroups().length > 1) {\r\n <div class=\"tw-mb-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\r\n <label class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2 tw-block\">Select Fee Structure</label>\r\n <cide-ele-select [options]=\"feeStructureOptions()\" [ngModel]=\"selectedFeeStructureId() || ''\"\r\n (ngModelChange)=\"onStructureChange($event)\" placeholder=\"Select a fee structure\">\r\n </cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Fee Items Table -->\r\n @if (selectedStructureFees().length > 0) {\r\n <div class=\"tw-overflow-x-auto tw-rounded-lg tw-border tw-border-gray-200\">\r\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-bg-white\">\r\n <thead class=\"tw-bg-gray-50\">\r\n <tr>\r\n <th class=\"tw-px-4 tw-py-3 tw-w-10 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <input type=\"checkbox\"\r\n class=\"tw-w-4 tw-h-4 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\r\n [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\"\r\n (change)=\"toggleSelectAll($any($event.target).checked)\">\r\n </div>\r\n </th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-left tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[250px]\">\r\n Fee Name</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-left tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap\">\r\n Category</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap tw-min-w-[120px]\">\r\n Original Amount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[160px]\">\r\n Discount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[160px]\">\r\n Scholarship</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap tw-min-w-[120px]\">\r\n Final Amount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-center tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-w-[80px]\">\r\n Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\r\n @for (fee of selectedStructureFees(); track fee._id) {\r\n <tr class=\"tw-bg-white hover:tw-bg-gray-50 tw-transition-colors\">\r\n <td class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <input type=\"checkbox\"\r\n class=\"tw-w-4 tw-h-4 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n [checked]=\"fee.is_assigned || isSelected(getFeeId(fee))\" [disabled]=\"!!fee.is_assigned\"\r\n (change)=\"toggleFeeSelection(getFeeId(fee))\">\r\n </div>\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-medium tw-text-gray-900 tw-bg-white\">\r\n {{ fee.fees_structure_name || 'N/A' }}\r\n @if (fee.fees_structure_code) {\r\n <span class=\"tw-text-gray-500 tw-ms-1\">({{ fee.fees_structure_code }})</span>\r\n }\r\n @if (fee.is_assigned) {\r\n <span\r\n class=\"tw-ml-2 tw-px-2 tw-py-0.5 tw-bg-yellow-100 tw-text-yellow-800 tw-text-xs tw-font-semibold tw-rounded-full\">\r\n Assigned\r\n </span>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-text-gray-600 tw-bg-white\">{{ fee.fees_category_name ||\r\n 'N/A' }}</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-text-gray-900 tw-text-right tw-font-medium tw-bg-white\">{{\r\n fee.fees_amount | currency }}</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-bg-white\">\r\n @if (getDiscountData(getFeeId(fee)); as discount) {\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-justify-end\">\r\n <span class=\"tw-text-xs tw-text-gray-600\">\r\n {{ discount.discount_amount | currency }}\r\n @if (discount.discount_type === 'PERCENTAGE') {\r\n <span class=\"tw-text-gray-400\">({{ discount.discount_value }}%)</span>\r\n }\r\n </span>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"openDiscountManagement(getFeeId(fee))\" title=\"Edit Discount\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">edit</cide-ele-icon>\r\n </button>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"removeDiscount(getFeeId(fee))\" title=\"Remove Discount\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" cideEleButton variant=\"outline\" size=\"xs\"\r\n (click)=\"openDiscountManagement(getFeeId(fee))\" class=\"tw-ml-auto\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">add</cide-ele-icon>\r\n Add Discount\r\n </button>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-bg-white\">\r\n @if (getScholarshipData(getFeeId(fee)); as scholarship) {\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-justify-end\">\r\n <span class=\"tw-text-xs tw-text-gray-600\">\r\n {{ scholarship.scholarship_amount | currency }}\r\n @if (scholarship.scholarship_category === 'PARTIAL' &&\r\n scholarship.scholarship_percentage) {\r\n <span class=\"tw-text-gray-400\">({{ scholarship.scholarship_percentage }}%)</span>\r\n } @else if (scholarship.scholarship_category === 'FULL') {\r\n <span class=\"tw-text-gray-400\">(Full)</span>\r\n }\r\n </span>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"openScholarshipManagement(getFeeId(fee))\" title=\"Edit Scholarship\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">edit</cide-ele-icon>\r\n </button>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"removeScholarship(getFeeId(fee))\" title=\"Remove Scholarship\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" cideEleButton variant=\"outline\" size=\"xs\"\r\n (click)=\"openScholarshipManagement(getFeeId(fee))\" class=\"tw-ml-auto\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">add</cide-ele-icon>\r\n Add Scholarship\r\n </button>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-semibold tw-text-gray-900 tw-text-right tw-bg-white\">\r\n {{ calculateFinalAmount(fee) | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-center tw-bg-white\">\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"viewFeeDetails(fee)\"\r\n title=\"View Details\">\r\n <cide-ele-icon>visibility</cide-ele-icon>\r\n </button>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n <tfoot class=\"tw-bg-gray-50 tw-border-t-2 tw-border-gray-200\">\r\n <tr>\r\n <td colspan=\"3\" class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-gray-900 tw-text-right\">\r\n Total:</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-blue-600 tw-text-right\">\r\n {{ totalDiscount() | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-purple-600 tw-text-right\">\r\n {{ totalScholarship() | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-base tw-font-bold tw-text-green-600 tw-text-right\">\r\n {{ totalFinalAmount() | currency }}\r\n </td>\r\n <td></td>\r\n </tr>\r\n </tfoot>\r\n </table>\r\n </div>\r\n } @else {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400 tw-mx-auto tw-mb-2\">account_balance</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-gray-600\">No fees available for selected structure.</p>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400 tw-mx-auto tw-mb-2\">search_off</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-gray-600\">No applicable fees found.</p>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Please ensure Class Program, Term, and Academic Year are\r\n selected.</p>\r\n </div>\r\n }\r\n</div>", styles: [":host{display:block}.fee-structure-select-container{max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
|
|
5694
5694
|
}
|
|
5695
5695
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeApplicableFeesComponent, decorators: [{
|
|
5696
5696
|
type: Component,
|
|
@@ -5703,7 +5703,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
5703
5703
|
CideSelectComponent,
|
|
5704
5704
|
CurrencyPipe$1,
|
|
5705
5705
|
// FeeDetailsViewerComponent
|
|
5706
|
-
], providers: [CurrencyPipe$1], template: "<div class=\"tw-w-full\">\r\n <!-- Loading State -->\r\n @if (loading()) {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400 tw-animate-spin tw-mx-auto tw-mb-2\">refresh</cide-ele-icon>\r\n <span class=\"tw-text-xs tw-text-gray-500\">Loading applicable fees...</span>\r\n </div>\r\n } @else if (applicableFees().length > 0) {\r\n <!-- Fee Structure Selection (if multiple structures) -->\r\n @if (feeStructureGroups().length > 1) {\r\n <div class=\"tw-mb-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\r\n <label class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2 tw-block\">Select Fee Structure</label>\r\n <cide-ele-select [options]=\"feeStructureOptions()\" [ngModel]=\"selectedFeeStructureId() || ''\"\r\n (ngModelChange)=\"onStructureChange($event)\" placeholder=\"Select a fee structure\">\r\n </cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Fee Items Table -->\r\n @if (selectedStructureFees().length > 0) {\r\n <div class=\"tw-overflow-x-auto tw-rounded-lg tw-border tw-border-gray-200\">\r\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-bg-white\">\r\n <thead class=\"tw-bg-gray-50\">\r\n <tr>\r\n <th class=\"tw-px-4 tw-py-3 tw-w-10 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <input type=\"checkbox\"\r\n class=\"tw-w-4 tw-h-4 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\r\n [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\"\r\n (change)=\"toggleSelectAll($any($event.target).checked)\">\r\n </div>\r\n </th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-left tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[250px]\">\r\n Fee Name</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-left tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap\">\r\n Category</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap tw-min-w-[120px]\">\r\n Original Amount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[160px]\">\r\n Discount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[160px]\">\r\n Scholarship</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap tw-min-w-[120px]\">\r\n Final Amount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-center tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-w-[80px]\">\r\n Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\r\n @for (fee of selectedStructureFees(); track fee._id) {\r\n <tr class=\"tw-bg-white hover:tw-bg-gray-50 tw-transition-colors\">\r\n <td class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <input type=\"checkbox\"\r\n class=\"tw-w-4 tw-h-4 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n [checked]=\"fee.is_assigned || isSelected(getFeeId(fee))\" [disabled]=\"!!fee.is_assigned\"\r\n (change)=\"toggleFeeSelection(getFeeId(fee))\">\r\n </div>\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-medium tw-text-gray-900 tw-bg-white\">\r\n {{ fee.fees_structure_name || 'N/A' }}\r\n @if (fee.fees_structure_code) {\r\n <span class=\"tw-text-gray-500 tw-ms-1\">({{ fee.fees_structure_code }})</span>\r\n }\r\n @if (fee.is_assigned) {\r\n <span\r\n class=\"tw-ml-2 tw-px-2 tw-py-0.5 tw-bg-yellow-100 tw-text-yellow-800 tw-text-xs tw-font-semibold tw-rounded-full\">\r\n Assigned\r\n </span>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-text-gray-600 tw-bg-white\">{{ fee.fees_category_name ||\r\n 'N/A' }}</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-text-gray-900 tw-text-right tw-font-medium tw-bg-white\">{{\r\n fee.fees_amount | currency }}</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-bg-white\">\r\n @if (getDiscountData(getFeeId(fee)); as discount) {\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-justify-end\">\r\n <span class=\"tw-text-xs tw-text-gray-600\">\r\n {{ discount.discount_amount | currency }}\r\n @if (discount.discount_type === 'PERCENTAGE') {\r\n <span class=\"tw-text-gray-400\">({{ discount.discount_value }}%)</span>\r\n }\r\n </span>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"openDiscountManagement(getFeeId(fee))\" title=\"Edit Discount\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">edit</cide-ele-icon>\r\n </button>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"removeDiscount(getFeeId(fee))\" title=\"Remove Discount\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" cideEleButton variant=\"outline\" size=\"xs\"\r\n (click)=\"openDiscountManagement(getFeeId(fee))\" class=\"tw-ml-auto\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">add</cide-ele-icon>\r\n Add Discount\r\n </button>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-bg-white\">\r\n @if (getScholarshipData(getFeeId(fee)); as scholarship) {\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-justify-end\">\r\n <span class=\"tw-text-xs tw-text-gray-600\">\r\n {{ scholarship.scholarship_amount | currency }}\r\n @if (scholarship.scholarship_category === 'PARTIAL' &&\r\n scholarship.scholarship_percentage) {\r\n <span class=\"tw-text-gray-400\">({{ scholarship.scholarship_percentage }}%)</span>\r\n } @else if (scholarship.scholarship_category === 'FULL') {\r\n <span class=\"tw-text-gray-400\">(Full)</span>\r\n }\r\n </span>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"openScholarshipManagement(getFeeId(fee))\" title=\"Edit Scholarship\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">edit</cide-ele-icon>\r\n </button>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"removeScholarship(getFeeId(fee))\" title=\"Remove Scholarship\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" cideEleButton variant=\"outline\" size=\"xs\"\r\n (click)=\"openScholarshipManagement(getFeeId(fee))\" class=\"tw-ml-auto\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">add</cide-ele-icon>\r\n Add Scholarship\r\n </button>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-semibold tw-text-gray-900 tw-text-right tw-bg-white\">\r\n {{ calculateFinalAmount(fee) | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-center tw-bg-white\">\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"viewFeeDetails(fee)\"\r\n title=\"View Details\">\r\n <cide-ele-icon>visibility</cide-ele-icon>\r\n </button>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n <tfoot class=\"tw-bg-gray-50 tw-border-t-2 tw-border-gray-200\">\r\n <tr>\r\n <td colspan=\"3\" class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-gray-900 tw-text-right\">\r\n Total:</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-blue-600 tw-text-right\">\r\n {{ totalDiscount() | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-purple-600 tw-text-right\">\r\n {{ totalScholarship() | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-base tw-font-bold tw-text-green-600 tw-text-right\">\r\n {{ totalFinalAmount() | currency }}\r\n </td>\r\n <td></td>\r\n </tr>\r\n </tfoot>\r\n </table>\r\n </div>\r\n } @else {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400 tw-mx-auto tw-mb-2\">account_balance</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-gray-600\">No fees available for selected structure.</p>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400 tw-mx-auto tw-mb-2\">search_off</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-gray-600\">No applicable fees found.</p>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Please ensure Class Program, Term, and Academic Year are\r\n selected.</p>\r\n </div>\r\n }\r\n</div>", styles: [":host{display:block}.fee-structure-select-container{max-width:400px}\n"] }]
|
|
5706
|
+
], providers: [CurrencyPipe$1], template: "<div class=\"tw-w-full\">\r\n <!-- Loading State -->\r\n @if (loading()) {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400 tw-animate-spin tw-mx-auto tw-mb-2\">refresh</cide-ele-icon>\r\n <span class=\"tw-text-xs tw-text-gray-500\">Loading applicable fees...</span>\r\n </div>\r\n } @else if (applicableFees().length > 0) {\r\n <!-- Fee Structure Selection (if multiple structures) -->\r\n @if (feeStructureGroups().length > 1) {\r\n <div class=\"tw-mb-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\r\n <label class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2 tw-block\">Select Fee Structure</label>\r\n <cide-ele-select [options]=\"feeStructureOptions()\" [ngModel]=\"selectedFeeStructureId() || ''\"\r\n (ngModelChange)=\"onStructureChange($event)\" placeholder=\"Select a fee structure\">\r\n </cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Fee Items Table -->\r\n @if (selectedStructureFees().length > 0) {\r\n <div class=\"tw-overflow-x-auto tw-rounded-lg tw-border tw-border-gray-200\">\r\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-bg-white\">\r\n <thead class=\"tw-bg-gray-50\">\r\n <tr>\r\n <th class=\"tw-px-4 tw-py-3 tw-w-10 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <input type=\"checkbox\"\r\n class=\"tw-w-4 tw-h-4 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\r\n [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\"\r\n (change)=\"toggleSelectAll($any($event.target).checked)\">\r\n </div>\r\n </th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-left tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[250px]\">\r\n Fee Name</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-left tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap\">\r\n Category</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap tw-min-w-[120px]\">\r\n Original Amount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[160px]\">\r\n Discount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[160px]\">\r\n Scholarship</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap tw-min-w-[120px]\">\r\n Final Amount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-center tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-w-[80px]\">\r\n Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\r\n @for (fee of selectedStructureFees(); track fee._id) {\r\n <tr class=\"tw-bg-white hover:tw-bg-gray-50 tw-transition-colors\">\r\n <td class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <input type=\"checkbox\"\r\n class=\"tw-w-4 tw-h-4 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n [checked]=\"fee.is_assigned || isSelected(getFeeId(fee))\" [disabled]=\"!!fee.is_assigned\"\r\n (change)=\"toggleFeeSelection(getFeeId(fee))\">\r\n </div>\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-medium tw-text-gray-900 tw-bg-white\">\r\n {{ fee.fees_structure_name || 'N/A' }}\r\n @if (fee.fees_structure_code) {\r\n <span class=\"tw-text-gray-500 tw-ms-1\">({{ fee.fees_structure_code }})</span>\r\n }\r\n @if (fee.is_assigned) {\r\n <span\r\n class=\"tw-ml-2 tw-px-2 tw-py-0.5 tw-bg-yellow-100 tw-text-yellow-800 tw-text-xs tw-font-semibold tw-rounded-full\">\r\n Assigned\r\n </span>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-text-gray-600 tw-bg-white\">{{ fee.fees_category_name ||\r\n 'N/A' }}</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-text-gray-900 tw-text-right tw-font-medium tw-bg-white\">{{\r\n fee.fees_amount | currency }}</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-bg-white\">\r\n @if (getDiscountData(getFeeId(fee)); as discount) {\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-justify-end\">\r\n <span class=\"tw-text-xs tw-text-gray-600\">\r\n {{ discount.discount_amount | currency }}\r\n @if (discount.discount_type === 'PERCENTAGE') {\r\n <span class=\"tw-text-gray-400\">({{ discount.discount_value }}%)</span>\r\n }\r\n </span>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"openDiscountManagement(getFeeId(fee))\" title=\"Edit Discount\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">edit</cide-ele-icon>\r\n </button>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"removeDiscount(getFeeId(fee))\" title=\"Remove Discount\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" cideEleButton variant=\"outline\" size=\"xs\"\r\n (click)=\"openDiscountManagement(getFeeId(fee))\" class=\"tw-ml-auto\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">add</cide-ele-icon>\r\n Add Discount\r\n </button>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-bg-white\">\r\n @if (getScholarshipData(getFeeId(fee)); as scholarship) {\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-justify-end\">\r\n <span class=\"tw-text-xs tw-text-gray-600\">\r\n {{ scholarship.scholarship_amount | currency }}\r\n @if (scholarship.scholarship_category === 'PARTIAL' &&\r\n scholarship.scholarship_percentage) {\r\n <span class=\"tw-text-gray-400\">({{ scholarship.scholarship_percentage }}%)</span>\r\n } @else if (scholarship.scholarship_category === 'FULL') {\r\n <span class=\"tw-text-gray-400\">(Full)</span>\r\n }\r\n </span>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"openScholarshipManagement(getFeeId(fee))\" title=\"Edit Scholarship\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">edit</cide-ele-icon>\r\n </button>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"removeScholarship(getFeeId(fee))\" title=\"Remove Scholarship\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" cideEleButton variant=\"outline\" size=\"xs\"\r\n (click)=\"openScholarshipManagement(getFeeId(fee))\" class=\"tw-ml-auto\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">add</cide-ele-icon>\r\n Add Scholarship\r\n </button>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-semibold tw-text-gray-900 tw-text-right tw-bg-white\">\r\n {{ calculateFinalAmount(fee) | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-center tw-bg-white\">\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"viewFeeDetails(fee)\"\r\n title=\"View Details\">\r\n <cide-ele-icon>visibility</cide-ele-icon>\r\n </button>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n <tfoot class=\"tw-bg-gray-50 tw-border-t-2 tw-border-gray-200\">\r\n <tr>\r\n <td colspan=\"3\" class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-gray-900 tw-text-right\">\r\n Total:</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-blue-600 tw-text-right\">\r\n {{ totalDiscount() | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-purple-600 tw-text-right\">\r\n {{ totalScholarship() | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-base tw-font-bold tw-text-green-600 tw-text-right\">\r\n {{ totalFinalAmount() | currency }}\r\n </td>\r\n <td></td>\r\n </tr>\r\n </tfoot>\r\n </table>\r\n </div>\r\n } @else {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400 tw-mx-auto tw-mb-2\">account_balance</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-gray-600\">No fees available for selected structure.</p>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400 tw-mx-auto tw-mb-2\">search_off</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-gray-600\">No applicable fees found.</p>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Please ensure Class Program, Term, and Academic Year are\r\n selected.</p>\r\n </div>\r\n }\r\n</div>", styles: [":host{display:block}.fee-structure-select-container{max-width:400px}\n"] }]
|
|
5707
5707
|
}], ctorParameters: () => [], propDecorators: { entityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityId", required: false }] }], academicYearId: [{ type: i0.Input, args: [{ isSignal: true, alias: "academicYearId", required: false }] }], classProgramId: [{ type: i0.Input, args: [{ isSignal: true, alias: "classProgramId", required: false }] }], termId: [{ type: i0.Input, args: [{ isSignal: true, alias: "termId", required: false }] }], branchId: [{ type: i0.Input, args: [{ isSignal: true, alias: "branchId", required: false }] }], sectionId: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionId", required: false }] }], studentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "studentId", required: false }] }], feesCalculated: [{ type: i0.Output, args: ["feesCalculated"] }] } });
|
|
5708
5708
|
|
|
5709
5709
|
class FeeAssignmentCreateComponent {
|
|
@@ -7187,7 +7187,7 @@ class FeePaymentListComponent {
|
|
|
7187
7187
|
return payment.feepay_status_id_sygms || 'Unknown';
|
|
7188
7188
|
}
|
|
7189
7189
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7190
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeePaymentListComponent, isStandalone: true, selector: "cide-fee-payment-list", viewQueries: [{ propertyName: "paymentDetailsRendererTemplate", first: true, predicate: ["paymentDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "amountRendererTemplate", first: true, predicate: ["amountRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "dateRendererTemplate", first: true, predicate: ["dateRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "reconciledRendererTemplate", first: true, predicate: ["reconciledRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fee Payment Container -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_payment' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n\r\n <!-- Action Buttons in Breadcrumb Area -->\r\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\r\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"processPayment()\" [adaptive]=\"true\">\r\n Record Payment\r\n </button>\r\n\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-w-full tw-h-full\">\r\n <!-- Filter Section -->\r\n <div class=\"tw-p-4 tw-bg-gray-50/50 tw-border-b tw-border-gray-200\">\r\n <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-items-end\">\r\n\r\n <!-- Receipt Filter -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-2\">\r\n <cide-ele-input formControlName=\"receipt_no\" label=\"Receipt #\" placeholder=\"Search Receipt...\" size=\"md\"\r\n leftIcon=\"receipt\"></cide-ele-input>\r\n </div>\r\n\r\n <!-- Academic Filters -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-6\">\r\n <cide-shared-program-section-selector-wrapper [formGroup]=\"filterForm\" classProgramControlName=\"class_id\"\r\n termControlName=\"term_id\" sectionControlName=\"section_id\" [showLabels]=\"true\"\r\n [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\"></cide-shared-program-section-selector-wrapper>\r\n </div>\r\n\r\n <!-- Student Filter (Admin Only) -->\r\n @if (!isStudent()) {\r\n <div class=\"tw-col-span-1 lg:tw-col-span-3\">\r\n <cide-ele-select formControlName=\"student_id\" label=\"Student\" placeholder=\"Search Student...\"\r\n [options]=\"studentListOptions()\" [searchable]=\"true\" (searchChange)=\"onStudentSearch($event)\"\r\n leftIcon=\"person\" size=\"md\"></cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Reconciliation Filter -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-2\">\r\n <cide-ele-select formControlName=\"is_reconciled\" label=\"Reconciled\" placeholder=\"All\" [options]=\"[\r\n { label: 'All', value: '' },\r\n { label: 'Reconciled', value: 'true' },\r\n { label: 'Not Reconciled', value: 'false' }\r\n ]\" size=\"md\" leftIcon=\"fact_check\"></cide-ele-select>\r\n </div>\r\n\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-1 tw-flex tw-justify-end\">\r\n <button cideEleButton variant=\"ghost\" type=\"button\" (click)=\"resetFilters()\" leftIcon=\"filter_list_off\"\r\n size=\"md\" class=\"tw-w-full tw-justify-center\">\r\n Reset\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Grid Section -->\r\n <div class=\"tw-flex-1 tw-relative\">\r\n <div class=\"tw-absolute tw-inset-0 tw-overflow-auto\">\r\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n </div>\r\n </div>\r\n </div>\r\n</cide-lyt-shared-wrapper>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #paymentDetailsRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-flex-col tw-w-full\">\r\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.student_name || 'N/A' }}</div>\r\n <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\r\n {{ row.class_program_title || '-' }} {{ row.term_title ? '/ ' + row.term_title : '' }}\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\">ID: {{ row.feepay_student_id_auth || 'N/A' }}</div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateRendererTemplate let-row=\"row\">\r\n <span class=\"tw-text-sm tw-text-gray-900\">{{ formatDate(row.feepay_payment_date) }}</span>\r\n</ng-template>\r\n\r\n<ng-template #amountRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-flex-col tw-text-sm tw-items-end\">\r\n <span class=\"tw-text-gray-900 tw-font-semibold\">{{ formatCurrency(row.feepay_total_amount) }}</span>\r\n @if (row.feepay_late_fee_amount && row.feepay_late_fee_amount > 0) {\r\n <span class=\"tw-text-xs tw-text-red-600\">Late Fee: {{ formatCurrency(row.feepay_late_fee_amount) }}</span>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #statusRendererTemplate let-row=\"row\">\r\n <span\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\r\n [ngClass]=\"getStatusBadgeClass(row)\">\r\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\r\n {{ row.feepay_status_id_sygms === 'SUCCESS' || row.feepay_status_id_sygms === 'COMPLETED' ? 'check_circle' :\r\n row.feepay_status_id_sygms === 'PENDING' ? 'schedule' : 'error' }}\r\n </cide-ele-icon>\r\n {{ row.status_title || getStatusText(row) }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #reconciledRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-justify-center\">\r\n @if (row.feepay_is_reconciled) {\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-green-500\" title=\"Reconciled\">check_circle</cide-ele-icon>\r\n } @else {\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-gray-300\" title=\"Not Reconciled\">history</cide-ele-icon>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\r\n (itemClick)=\"onDropdownItemClick($event, row)\">\r\n </cide-ele-dropdown>\r\n</ng-template>", styles: [".fee-payment-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { 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: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
|
|
7190
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeePaymentListComponent, isStandalone: true, selector: "cide-fee-payment-list", viewQueries: [{ propertyName: "paymentDetailsRendererTemplate", first: true, predicate: ["paymentDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "amountRendererTemplate", first: true, predicate: ["amountRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "dateRendererTemplate", first: true, predicate: ["dateRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "reconciledRendererTemplate", first: true, predicate: ["reconciledRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fee Payment Container -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_payment' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n\r\n <!-- Action Buttons in Breadcrumb Area -->\r\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\r\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"processPayment()\" [adaptive]=\"true\">\r\n Record Payment\r\n </button>\r\n\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-w-full tw-h-full\">\r\n <!-- Filter Section -->\r\n <div class=\"tw-p-4 tw-bg-gray-50/50 tw-border-b tw-border-gray-200\">\r\n <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-items-end\">\r\n\r\n <!-- Receipt Filter -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-2\">\r\n <cide-ele-input formControlName=\"receipt_no\" label=\"Receipt #\" placeholder=\"Search Receipt...\" size=\"md\"\r\n leftIcon=\"receipt\"></cide-ele-input>\r\n </div>\r\n\r\n <!-- Academic Filters -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-6\">\r\n <cide-shared-program-section-selector-wrapper [formGroup]=\"filterForm\" classProgramControlName=\"class_id\"\r\n termControlName=\"term_id\" sectionControlName=\"section_id\" [showLabels]=\"true\"\r\n [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\"></cide-shared-program-section-selector-wrapper>\r\n </div>\r\n\r\n <!-- Student Filter (Admin Only) -->\r\n @if (!isStudent()) {\r\n <div class=\"tw-col-span-1 lg:tw-col-span-3\">\r\n <cide-ele-select formControlName=\"student_id\" label=\"Student\" placeholder=\"Search Student...\"\r\n [options]=\"studentListOptions()\" [searchable]=\"true\" (searchChange)=\"onStudentSearch($event)\"\r\n leftIcon=\"person\" size=\"md\"></cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Reconciliation Filter -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-2\">\r\n <cide-ele-select formControlName=\"is_reconciled\" label=\"Reconciled\" placeholder=\"All\" [options]=\"[\r\n { label: 'All', value: '' },\r\n { label: 'Reconciled', value: 'true' },\r\n { label: 'Not Reconciled', value: 'false' }\r\n ]\" size=\"md\" leftIcon=\"fact_check\"></cide-ele-select>\r\n </div>\r\n\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-1 tw-flex tw-justify-end\">\r\n <button cideEleButton variant=\"ghost\" type=\"button\" (click)=\"resetFilters()\" leftIcon=\"filter_list_off\"\r\n size=\"xs\" class=\"tw-w-full tw-justify-center\">\r\n Reset\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Grid Section -->\r\n <div class=\"tw-flex-1 tw-relative\">\r\n <div class=\"tw-absolute tw-inset-0 tw-overflow-auto\">\r\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n </div>\r\n </div>\r\n </div>\r\n</cide-lyt-shared-wrapper>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #paymentDetailsRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-flex-col tw-w-full\">\r\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.student_name || 'N/A' }}</div>\r\n <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\r\n {{ row.class_program_title || '-' }} {{ row.term_title ? '/ ' + row.term_title : '' }}\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\">ID: {{ row.feepay_student_id_auth || 'N/A' }}</div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateRendererTemplate let-row=\"row\">\r\n <span class=\"tw-text-sm tw-text-gray-900\">{{ formatDate(row.feepay_payment_date) }}</span>\r\n</ng-template>\r\n\r\n<ng-template #amountRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-flex-col tw-text-sm tw-items-end\">\r\n <span class=\"tw-text-gray-900 tw-font-semibold\">{{ formatCurrency(row.feepay_total_amount) }}</span>\r\n @if (row.feepay_late_fee_amount && row.feepay_late_fee_amount > 0) {\r\n <span class=\"tw-text-xs tw-text-red-600\">Late Fee: {{ formatCurrency(row.feepay_late_fee_amount) }}</span>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #statusRendererTemplate let-row=\"row\">\r\n <span\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\r\n [ngClass]=\"getStatusBadgeClass(row)\">\r\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\r\n {{ row.feepay_status_id_sygms === 'SUCCESS' || row.feepay_status_id_sygms === 'COMPLETED' ? 'check_circle' :\r\n row.feepay_status_id_sygms === 'PENDING' ? 'schedule' : 'error' }}\r\n </cide-ele-icon>\r\n {{ row.status_title || getStatusText(row) }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #reconciledRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-justify-center\">\r\n @if (row.feepay_is_reconciled) {\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-green-500\" title=\"Reconciled\">check_circle</cide-ele-icon>\r\n } @else {\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-gray-300\" title=\"Not Reconciled\">history</cide-ele-icon>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\r\n (itemClick)=\"onDropdownItemClick($event, row)\">\r\n </cide-ele-dropdown>\r\n</ng-template>", styles: [".fee-payment-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { 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: "ngmodule", type: ReactiveFormsModule }, { 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: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { 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: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
|
|
7191
7191
|
}
|
|
7192
7192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentListComponent, decorators: [{
|
|
7193
7193
|
type: Component,
|
|
@@ -7203,7 +7203,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
7203
7203
|
CideSelectComponent,
|
|
7204
7204
|
CideInputComponent,
|
|
7205
7205
|
ProgramSectionSelectorWrapperComponent
|
|
7206
|
-
], template: "<!-- Fee Payment Container -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_payment' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n\r\n <!-- Action Buttons in Breadcrumb Area -->\r\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\r\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"processPayment()\" [adaptive]=\"true\">\r\n Record Payment\r\n </button>\r\n\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-w-full tw-h-full\">\r\n <!-- Filter Section -->\r\n <div class=\"tw-p-4 tw-bg-gray-50/50 tw-border-b tw-border-gray-200\">\r\n <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-items-end\">\r\n\r\n <!-- Receipt Filter -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-2\">\r\n <cide-ele-input formControlName=\"receipt_no\" label=\"Receipt #\" placeholder=\"Search Receipt...\" size=\"md\"\r\n leftIcon=\"receipt\"></cide-ele-input>\r\n </div>\r\n\r\n <!-- Academic Filters -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-6\">\r\n <cide-shared-program-section-selector-wrapper [formGroup]=\"filterForm\" classProgramControlName=\"class_id\"\r\n termControlName=\"term_id\" sectionControlName=\"section_id\" [showLabels]=\"true\"\r\n [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\"></cide-shared-program-section-selector-wrapper>\r\n </div>\r\n\r\n <!-- Student Filter (Admin Only) -->\r\n @if (!isStudent()) {\r\n <div class=\"tw-col-span-1 lg:tw-col-span-3\">\r\n <cide-ele-select formControlName=\"student_id\" label=\"Student\" placeholder=\"Search Student...\"\r\n [options]=\"studentListOptions()\" [searchable]=\"true\" (searchChange)=\"onStudentSearch($event)\"\r\n leftIcon=\"person\" size=\"md\"></cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Reconciliation Filter -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-2\">\r\n <cide-ele-select formControlName=\"is_reconciled\" label=\"Reconciled\" placeholder=\"All\" [options]=\"[\r\n { label: 'All', value: '' },\r\n { label: 'Reconciled', value: 'true' },\r\n { label: 'Not Reconciled', value: 'false' }\r\n ]\" size=\"md\" leftIcon=\"fact_check\"></cide-ele-select>\r\n </div>\r\n\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-1 tw-flex tw-justify-end\">\r\n <button cideEleButton variant=\"ghost\" type=\"button\" (click)=\"resetFilters()\" leftIcon=\"filter_list_off\"\r\n size=\"
|
|
7206
|
+
], template: "<!-- Fee Payment Container -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_payment' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n\r\n <!-- Action Buttons in Breadcrumb Area -->\r\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\r\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"processPayment()\" [adaptive]=\"true\">\r\n Record Payment\r\n </button>\r\n\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-w-full tw-h-full\">\r\n <!-- Filter Section -->\r\n <div class=\"tw-p-4 tw-bg-gray-50/50 tw-border-b tw-border-gray-200\">\r\n <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-items-end\">\r\n\r\n <!-- Receipt Filter -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-2\">\r\n <cide-ele-input formControlName=\"receipt_no\" label=\"Receipt #\" placeholder=\"Search Receipt...\" size=\"md\"\r\n leftIcon=\"receipt\"></cide-ele-input>\r\n </div>\r\n\r\n <!-- Academic Filters -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-6\">\r\n <cide-shared-program-section-selector-wrapper [formGroup]=\"filterForm\" classProgramControlName=\"class_id\"\r\n termControlName=\"term_id\" sectionControlName=\"section_id\" [showLabels]=\"true\"\r\n [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\"></cide-shared-program-section-selector-wrapper>\r\n </div>\r\n\r\n <!-- Student Filter (Admin Only) -->\r\n @if (!isStudent()) {\r\n <div class=\"tw-col-span-1 lg:tw-col-span-3\">\r\n <cide-ele-select formControlName=\"student_id\" label=\"Student\" placeholder=\"Search Student...\"\r\n [options]=\"studentListOptions()\" [searchable]=\"true\" (searchChange)=\"onStudentSearch($event)\"\r\n leftIcon=\"person\" size=\"md\"></cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Reconciliation Filter -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-2\">\r\n <cide-ele-select formControlName=\"is_reconciled\" label=\"Reconciled\" placeholder=\"All\" [options]=\"[\r\n { label: 'All', value: '' },\r\n { label: 'Reconciled', value: 'true' },\r\n { label: 'Not Reconciled', value: 'false' }\r\n ]\" size=\"md\" leftIcon=\"fact_check\"></cide-ele-select>\r\n </div>\r\n\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-1 tw-flex tw-justify-end\">\r\n <button cideEleButton variant=\"ghost\" type=\"button\" (click)=\"resetFilters()\" leftIcon=\"filter_list_off\"\r\n size=\"xs\" class=\"tw-w-full tw-justify-center\">\r\n Reset\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Grid Section -->\r\n <div class=\"tw-flex-1 tw-relative\">\r\n <div class=\"tw-absolute tw-inset-0 tw-overflow-auto\">\r\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n </div>\r\n </div>\r\n </div>\r\n</cide-lyt-shared-wrapper>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #paymentDetailsRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-flex-col tw-w-full\">\r\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.student_name || 'N/A' }}</div>\r\n <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\r\n {{ row.class_program_title || '-' }} {{ row.term_title ? '/ ' + row.term_title : '' }}\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\">ID: {{ row.feepay_student_id_auth || 'N/A' }}</div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateRendererTemplate let-row=\"row\">\r\n <span class=\"tw-text-sm tw-text-gray-900\">{{ formatDate(row.feepay_payment_date) }}</span>\r\n</ng-template>\r\n\r\n<ng-template #amountRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-flex-col tw-text-sm tw-items-end\">\r\n <span class=\"tw-text-gray-900 tw-font-semibold\">{{ formatCurrency(row.feepay_total_amount) }}</span>\r\n @if (row.feepay_late_fee_amount && row.feepay_late_fee_amount > 0) {\r\n <span class=\"tw-text-xs tw-text-red-600\">Late Fee: {{ formatCurrency(row.feepay_late_fee_amount) }}</span>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #statusRendererTemplate let-row=\"row\">\r\n <span\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\r\n [ngClass]=\"getStatusBadgeClass(row)\">\r\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\r\n {{ row.feepay_status_id_sygms === 'SUCCESS' || row.feepay_status_id_sygms === 'COMPLETED' ? 'check_circle' :\r\n row.feepay_status_id_sygms === 'PENDING' ? 'schedule' : 'error' }}\r\n </cide-ele-icon>\r\n {{ row.status_title || getStatusText(row) }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #reconciledRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-justify-center\">\r\n @if (row.feepay_is_reconciled) {\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-green-500\" title=\"Reconciled\">check_circle</cide-ele-icon>\r\n } @else {\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-gray-300\" title=\"Not Reconciled\">history</cide-ele-icon>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\r\n (itemClick)=\"onDropdownItemClick($event, row)\">\r\n </cide-ele-dropdown>\r\n</ng-template>", styles: [".fee-payment-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
|
|
7207
7207
|
}], propDecorators: { paymentDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['paymentDetailsRendererTemplate', { isSignal: true }] }], amountRendererTemplate: [{ type: i0.ViewChild, args: ['amountRendererTemplate', { isSignal: true }] }], statusRendererTemplate: [{ type: i0.ViewChild, args: ['statusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }], dateRendererTemplate: [{ type: i0.ViewChild, args: ['dateRendererTemplate', { isSignal: true }] }], reconciledRendererTemplate: [{ type: i0.ViewChild, args: ['reconciledRendererTemplate', { isSignal: true }] }] } });
|
|
7208
7208
|
|
|
7209
7209
|
var feePaymentList_component = /*#__PURE__*/Object.freeze({
|
|
@@ -8109,7 +8109,7 @@ class FeePaymentViewComponent {
|
|
|
8109
8109
|
<div class="tw-text-center tw-py-12">
|
|
8110
8110
|
<cide-ele-icon class="tw-text-6xl tw-text-red-300 dark:tw-text-red-600">error</cide-ele-icon>
|
|
8111
8111
|
<p class="tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-4">{{ error() }}</p>
|
|
8112
|
-
<cide-ele-button variant="ghost" size="
|
|
8112
|
+
<cide-ele-button variant="ghost" size="xs" type="button" (btnClick)="retryLoad()" class="tw-mt-4">
|
|
8113
8113
|
Retry
|
|
8114
8114
|
</cide-ele-button>
|
|
8115
8115
|
</div>
|
|
@@ -8138,30 +8138,30 @@ class FeePaymentViewComponent {
|
|
|
8138
8138
|
</div>
|
|
8139
8139
|
<div class="tw-flex tw-items-center tw-gap-2 tw-flex-shrink-0">
|
|
8140
8140
|
@if (getStatusBadgeClass().includes('yellow')) {
|
|
8141
|
-
<button cideEleButton type="button" variant="primary" size="
|
|
8141
|
+
<button cideEleButton type="button" variant="primary" size="xs" leftIcon="verified"
|
|
8142
8142
|
(btnClick)="approvePayment()" title="Approve Payment" [loading]="loading()">
|
|
8143
8143
|
Approve
|
|
8144
8144
|
</button>
|
|
8145
8145
|
}
|
|
8146
8146
|
@if (!receiptHtml() && !generatingReceipt()) {
|
|
8147
|
-
<button cideEleButton type="button" variant="primary" size="
|
|
8147
|
+
<button cideEleButton type="button" variant="primary" size="xs" leftIcon="receipt"
|
|
8148
8148
|
(btnClick)="generateReceipt()" title="Generate Receipt" [loading]="generatingReceipt()">
|
|
8149
8149
|
Generate Receipt
|
|
8150
8150
|
</button>
|
|
8151
8151
|
}
|
|
8152
|
-
<button cideEleButton type="button" variant="ghost" size="
|
|
8152
|
+
<button cideEleButton type="button" variant="ghost" size="xs" leftIcon="visibility"
|
|
8153
8153
|
(btnClick)="viewReceipt()" title="View Receipt" [disabled]="generatingReceipt()">
|
|
8154
8154
|
View
|
|
8155
8155
|
</button>
|
|
8156
|
-
<button cideEleButton type="button" variant="ghost" size="
|
|
8156
|
+
<button cideEleButton type="button" variant="ghost" size="xs" leftIcon="print"
|
|
8157
8157
|
(btnClick)="printReceipt()" title="Print Receipt" [disabled]="generatingReceipt()">
|
|
8158
8158
|
Print
|
|
8159
8159
|
</button>
|
|
8160
|
-
<button cideEleButton type="button" variant="ghost" size="
|
|
8160
|
+
<button cideEleButton type="button" variant="ghost" size="xs" leftIcon="download"
|
|
8161
8161
|
(btnClick)="downloadReceipt()" title="Download Receipt" [disabled]="generatingReceipt()">
|
|
8162
8162
|
Download
|
|
8163
8163
|
</button>
|
|
8164
|
-
<button cideEleButton type="button" variant="ghost" size="
|
|
8164
|
+
<button cideEleButton type="button" variant="ghost" size="xs" leftIcon="arrow_back"
|
|
8165
8165
|
(btnClick)="goBack()" title="Back to List">
|
|
8166
8166
|
Back
|
|
8167
8167
|
</button>
|
|
@@ -8339,7 +8339,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
8339
8339
|
<div class="tw-text-center tw-py-12">
|
|
8340
8340
|
<cide-ele-icon class="tw-text-6xl tw-text-red-300 dark:tw-text-red-600">error</cide-ele-icon>
|
|
8341
8341
|
<p class="tw-text-sm tw-text-red-600 dark:tw-text-red-400 tw-mt-4">{{ error() }}</p>
|
|
8342
|
-
<cide-ele-button variant="ghost" size="
|
|
8342
|
+
<cide-ele-button variant="ghost" size="xs" type="button" (btnClick)="retryLoad()" class="tw-mt-4">
|
|
8343
8343
|
Retry
|
|
8344
8344
|
</cide-ele-button>
|
|
8345
8345
|
</div>
|
|
@@ -8368,30 +8368,30 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
8368
8368
|
</div>
|
|
8369
8369
|
<div class="tw-flex tw-items-center tw-gap-2 tw-flex-shrink-0">
|
|
8370
8370
|
@if (getStatusBadgeClass().includes('yellow')) {
|
|
8371
|
-
<button cideEleButton type="button" variant="primary" size="
|
|
8371
|
+
<button cideEleButton type="button" variant="primary" size="xs" leftIcon="verified"
|
|
8372
8372
|
(btnClick)="approvePayment()" title="Approve Payment" [loading]="loading()">
|
|
8373
8373
|
Approve
|
|
8374
8374
|
</button>
|
|
8375
8375
|
}
|
|
8376
8376
|
@if (!receiptHtml() && !generatingReceipt()) {
|
|
8377
|
-
<button cideEleButton type="button" variant="primary" size="
|
|
8377
|
+
<button cideEleButton type="button" variant="primary" size="xs" leftIcon="receipt"
|
|
8378
8378
|
(btnClick)="generateReceipt()" title="Generate Receipt" [loading]="generatingReceipt()">
|
|
8379
8379
|
Generate Receipt
|
|
8380
8380
|
</button>
|
|
8381
8381
|
}
|
|
8382
|
-
<button cideEleButton type="button" variant="ghost" size="
|
|
8382
|
+
<button cideEleButton type="button" variant="ghost" size="xs" leftIcon="visibility"
|
|
8383
8383
|
(btnClick)="viewReceipt()" title="View Receipt" [disabled]="generatingReceipt()">
|
|
8384
8384
|
View
|
|
8385
8385
|
</button>
|
|
8386
|
-
<button cideEleButton type="button" variant="ghost" size="
|
|
8386
|
+
<button cideEleButton type="button" variant="ghost" size="xs" leftIcon="print"
|
|
8387
8387
|
(btnClick)="printReceipt()" title="Print Receipt" [disabled]="generatingReceipt()">
|
|
8388
8388
|
Print
|
|
8389
8389
|
</button>
|
|
8390
|
-
<button cideEleButton type="button" variant="ghost" size="
|
|
8390
|
+
<button cideEleButton type="button" variant="ghost" size="xs" leftIcon="download"
|
|
8391
8391
|
(btnClick)="downloadReceipt()" title="Download Receipt" [disabled]="generatingReceipt()">
|
|
8392
8392
|
Download
|
|
8393
8393
|
</button>
|
|
8394
|
-
<button cideEleButton type="button" variant="ghost" size="
|
|
8394
|
+
<button cideEleButton type="button" variant="ghost" size="xs" leftIcon="arrow_back"
|
|
8395
8395
|
(btnClick)="goBack()" title="Back to List">
|
|
8396
8396
|
Back
|
|
8397
8397
|
</button>
|
|
@@ -10199,7 +10199,7 @@ class CollectionReportComponent {
|
|
|
10199
10199
|
return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
10200
10200
|
}
|
|
10201
10201
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CollectionReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10202
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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", "ngModel", "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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
|
|
10202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", 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=\"xs\" (click)=\"exportToPDF()\" leftIcon=\"picture_as_pdf\">\r\n Export PDF\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"xs\" (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=\"xs\">\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=\"xs\">\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=\"xs\"\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=\"xs\"\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=\"xs\"\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=\"xs\" (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", "ngModel", "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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
|
|
10203
10203
|
}
|
|
10204
10204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CollectionReportComponent, decorators: [{
|
|
10205
10205
|
type: Component,
|
|
@@ -10211,7 +10211,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
10211
10211
|
CideEleButtonComponent,
|
|
10212
10212
|
CideIconComponent,
|
|
10213
10213
|
CideEleDataGridComponent
|
|
10214
|
-
], 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=\"
|
|
10214
|
+
], 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=\"xs\" (click)=\"exportToPDF()\" leftIcon=\"picture_as_pdf\">\r\n Export PDF\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"xs\" (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=\"xs\">\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=\"xs\">\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=\"xs\"\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=\"xs\"\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=\"xs\"\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=\"xs\" (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"] }]
|
|
10215
10215
|
}] });
|
|
10216
10216
|
|
|
10217
10217
|
var collectionReport_component = /*#__PURE__*/Object.freeze({
|
|
@@ -10402,7 +10402,7 @@ class StudentSelectionWrapperComponent {
|
|
|
10402
10402
|
return `${data.admap_first_name || ''} ${data.admap_middle_name || ''} ${data.admap_last_name || ''}`.trim() || data.user_fullname || 'N/A';
|
|
10403
10403
|
}
|
|
10404
10404
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StudentSelectionWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10405
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: StudentSelectionWrapperComponent, isStandalone: true, selector: "cide-student-selection-wrapper", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, academicYearId: { classPropertyName: "academicYearId", publicName: "academicYearId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { studentSelected: "studentSelected" }, ngImport: i0, template: "<!-- Compact Student Selection Wrapper -->\r\n<div\r\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-mx-6 tw-mt-4 tw-mb-6 tw-overflow-hidden\">\r\n\r\n <!-- Top Bar: Search or Context Summary -->\r\n <div class=\"tw-p-3 tw-flex tw-items-center tw-justify-between tw-gap-4 tw-bg-white\">\r\n\r\n <!-- Search Mode: Visible when no student selected -->\r\n <div *ngIf=\"!studentContext() && !isStudent()\" class=\"tw-flex-1 animate-fade-in\">\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <div class=\"tw-bg-blue-50 tw-p-1.5 tw-rounded-lg tw-flex-shrink-0\">\r\n <cide-ele-icon class=\"tw-text-blue-600\" size=\"sm\">person_search</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <cide-ele-select [options]=\"studentListOptions()\" [loading]=\"loading()\"\r\n placeholder=\"Search student by name or ID...\" [searchable]=\"true\" [clearInput]=\"true\"\r\n (searchChange)=\"onStudentSearch($event)\" (change)=\"onStudentSelect($event)\" leadingIcon=\"search\"\r\n size=\"sm\" class=\"tw-w-full\">\r\n </cide-ele-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Selected Mode: Compact View -->\r\n <div *ngIf=\"studentContext()\" class=\"tw-flex tw-flex-1 tw-items-center tw-gap-3 animate-fade-in\">\r\n <!-- Avatar -->\r\n <div\r\n class=\"tw-h-9 tw-w-9 tw-rounded-full tw-bg-gradient-to-br tw-from-blue-600 tw-to-blue-700 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-sm tw-shadow-sm tw-flex-shrink-0\">\r\n {{ getStudentInitial() }}\r\n </div>\r\n\r\n <!-- Info -->\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <h4 class=\"tw-font-bold tw-text-gray-900 tw-text-sm tw-truncate\">{{ getStudentFullName() }}</h4>\r\n <span *ngIf=\"!isStudent()\"\r\n class=\"tw-bg-yellow-100 tw-text-yellow-800 tw-text-[10px] tw-px-1.5 tw-py-0.5 tw-rounded tw-font-bold tw-uppercase tw-tracking-wider\">Admin\r\n View</span>\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-flex tw-items-center tw-gap-2\">\r\n <span class=\"tw-font-medium text-gray-700\">{{ studentContext()?.studentId }}</span>\r\n <span class=\"tw-text-gray-300\">|</span>\r\n <span>{{ studentContext()?.admissionData?.admap_class_program_name || 'Class N/A' }}</span>\r\n <span *ngIf=\"studentContext()?.admissionData?.admap_program_term_section_name\"> - {{\r\n studentContext()?.admissionData?.admap_program_term_section_name }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div *ngIf=\"studentContext()\" class=\"tw-flex tw-items-center tw-gap-2\">\r\n <button *ngIf=\"!isStudent()\" cideEleButton variant=\"ghost\" size=\"
|
|
10405
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: StudentSelectionWrapperComponent, isStandalone: true, selector: "cide-student-selection-wrapper", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, academicYearId: { classPropertyName: "academicYearId", publicName: "academicYearId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { studentSelected: "studentSelected" }, ngImport: i0, template: "<!-- Compact Student Selection Wrapper -->\r\n<div\r\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-mx-6 tw-mt-4 tw-mb-6 tw-overflow-hidden\">\r\n\r\n <!-- Top Bar: Search or Context Summary -->\r\n <div class=\"tw-p-3 tw-flex tw-items-center tw-justify-between tw-gap-4 tw-bg-white\">\r\n\r\n <!-- Search Mode: Visible when no student selected -->\r\n <div *ngIf=\"!studentContext() && !isStudent()\" class=\"tw-flex-1 animate-fade-in\">\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <div class=\"tw-bg-blue-50 tw-p-1.5 tw-rounded-lg tw-flex-shrink-0\">\r\n <cide-ele-icon class=\"tw-text-blue-600\" size=\"sm\">person_search</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <cide-ele-select [options]=\"studentListOptions()\" [loading]=\"loading()\"\r\n placeholder=\"Search student by name or ID...\" [searchable]=\"true\" [clearInput]=\"true\"\r\n (searchChange)=\"onStudentSearch($event)\" (change)=\"onStudentSelect($event)\" leadingIcon=\"search\"\r\n size=\"sm\" class=\"tw-w-full\">\r\n </cide-ele-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Selected Mode: Compact View -->\r\n <div *ngIf=\"studentContext()\" class=\"tw-flex tw-flex-1 tw-items-center tw-gap-3 animate-fade-in\">\r\n <!-- Avatar -->\r\n <div\r\n class=\"tw-h-9 tw-w-9 tw-rounded-full tw-bg-gradient-to-br tw-from-blue-600 tw-to-blue-700 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-sm tw-shadow-sm tw-flex-shrink-0\">\r\n {{ getStudentInitial() }}\r\n </div>\r\n\r\n <!-- Info -->\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <h4 class=\"tw-font-bold tw-text-gray-900 tw-text-sm tw-truncate\">{{ getStudentFullName() }}</h4>\r\n <span *ngIf=\"!isStudent()\"\r\n class=\"tw-bg-yellow-100 tw-text-yellow-800 tw-text-[10px] tw-px-1.5 tw-py-0.5 tw-rounded tw-font-bold tw-uppercase tw-tracking-wider\">Admin\r\n View</span>\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-flex tw-items-center tw-gap-2\">\r\n <span class=\"tw-font-medium text-gray-700\">{{ studentContext()?.studentId }}</span>\r\n <span class=\"tw-text-gray-300\">|</span>\r\n <span>{{ studentContext()?.admissionData?.admap_class_program_name || 'Class N/A' }}</span>\r\n <span *ngIf=\"studentContext()?.admissionData?.admap_program_term_section_name\"> - {{\r\n studentContext()?.admissionData?.admap_program_term_section_name }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div *ngIf=\"studentContext()\" class=\"tw-flex tw-items-center tw-gap-2\">\r\n <button *ngIf=\"!isStudent()\" cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"resetSelection()\"\r\n class=\"tw-text-gray-500 hover:tw-text-red-600 tw-px-2\">\r\n <span class=\"tw-text-xs tw-font-medium\">Change</span>\r\n </button>\r\n <button type=\"button\" (click)=\"toggleDetails()\"\r\n class=\"tw-text-gray-500 hover:tw-text-blue-600 tw-w-8 tw-h-8 tw-p-0 tw-flex tw-items-center tw-justify-center tw-rounded-full hover:tw-bg-blue-50 tw-transition-colors tw-duration-200\">\r\n <cide-ele-icon size=\"sm\" [class.tw-rotate-180]=\"detailsExpanded()\"\r\n class=\"tw-transition-transform tw-duration-200\">expand_more</cide-ele-icon>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Collapsible Details Section -->\r\n <div *ngIf=\"studentContext() && detailsExpanded()\"\r\n class=\"tw-border-t tw-border-gray-100 tw-bg-gray-50 tw-p-4 animate-fade-in-down\">\r\n <div class=\"tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-y-4 tw-gap-x-8\">\r\n <div *ngIf=\"config().cardFields.includes('class')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Class/Program</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_class_program_name || 'N/A' }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"config().cardFields.includes('section')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Section</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_program_term_section_name || 'N/A' }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"config().cardFields.includes('term')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Current\r\n Term</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_program_term_name || 'N/A' }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"config().cardFields.includes('academic_year')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Academic\r\n Year</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_academic_year_name || 'N/A' }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Content Area: Only shown when context is available -->\r\n<div *ngIf=\"studentContext()\" class=\"animate-fade-in\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- Placeholder for when no student is selected (Simple banner) -->\r\n<div *ngIf=\"!studentContext() && !isStudent()\"\r\n class=\"tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg tw-p-4 tw-flex tw-items-center tw-gap-3 tw-mb-6\">\r\n <cide-ele-icon class=\"tw-text-blue-400\" size=\"md\">info</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-blue-800\">\r\n Please search and select a student above to view their fee records.\r\n </p>\r\n</div>", styles: [".animate-fade-in{animation:fadeIn .3s ease-out}.animate-fade-in-up{animation:fadeInUp .4s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
|
|
10406
10406
|
}
|
|
10407
10407
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StudentSelectionWrapperComponent, decorators: [{
|
|
10408
10408
|
type: Component,
|
|
@@ -10411,7 +10411,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
10411
10411
|
CideIconComponent,
|
|
10412
10412
|
CideEleButtonComponent,
|
|
10413
10413
|
CideSelectComponent
|
|
10414
|
-
], template: "<!-- Compact Student Selection Wrapper -->\r\n<div\r\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-mx-6 tw-mt-4 tw-mb-6 tw-overflow-hidden\">\r\n\r\n <!-- Top Bar: Search or Context Summary -->\r\n <div class=\"tw-p-3 tw-flex tw-items-center tw-justify-between tw-gap-4 tw-bg-white\">\r\n\r\n <!-- Search Mode: Visible when no student selected -->\r\n <div *ngIf=\"!studentContext() && !isStudent()\" class=\"tw-flex-1 animate-fade-in\">\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <div class=\"tw-bg-blue-50 tw-p-1.5 tw-rounded-lg tw-flex-shrink-0\">\r\n <cide-ele-icon class=\"tw-text-blue-600\" size=\"sm\">person_search</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <cide-ele-select [options]=\"studentListOptions()\" [loading]=\"loading()\"\r\n placeholder=\"Search student by name or ID...\" [searchable]=\"true\" [clearInput]=\"true\"\r\n (searchChange)=\"onStudentSearch($event)\" (change)=\"onStudentSelect($event)\" leadingIcon=\"search\"\r\n size=\"sm\" class=\"tw-w-full\">\r\n </cide-ele-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Selected Mode: Compact View -->\r\n <div *ngIf=\"studentContext()\" class=\"tw-flex tw-flex-1 tw-items-center tw-gap-3 animate-fade-in\">\r\n <!-- Avatar -->\r\n <div\r\n class=\"tw-h-9 tw-w-9 tw-rounded-full tw-bg-gradient-to-br tw-from-blue-600 tw-to-blue-700 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-sm tw-shadow-sm tw-flex-shrink-0\">\r\n {{ getStudentInitial() }}\r\n </div>\r\n\r\n <!-- Info -->\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <h4 class=\"tw-font-bold tw-text-gray-900 tw-text-sm tw-truncate\">{{ getStudentFullName() }}</h4>\r\n <span *ngIf=\"!isStudent()\"\r\n class=\"tw-bg-yellow-100 tw-text-yellow-800 tw-text-[10px] tw-px-1.5 tw-py-0.5 tw-rounded tw-font-bold tw-uppercase tw-tracking-wider\">Admin\r\n View</span>\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-flex tw-items-center tw-gap-2\">\r\n <span class=\"tw-font-medium text-gray-700\">{{ studentContext()?.studentId }}</span>\r\n <span class=\"tw-text-gray-300\">|</span>\r\n <span>{{ studentContext()?.admissionData?.admap_class_program_name || 'Class N/A' }}</span>\r\n <span *ngIf=\"studentContext()?.admissionData?.admap_program_term_section_name\"> - {{\r\n studentContext()?.admissionData?.admap_program_term_section_name }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div *ngIf=\"studentContext()\" class=\"tw-flex tw-items-center tw-gap-2\">\r\n <button *ngIf=\"!isStudent()\" cideEleButton variant=\"ghost\" size=\"
|
|
10414
|
+
], template: "<!-- Compact Student Selection Wrapper -->\r\n<div\r\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-mx-6 tw-mt-4 tw-mb-6 tw-overflow-hidden\">\r\n\r\n <!-- Top Bar: Search or Context Summary -->\r\n <div class=\"tw-p-3 tw-flex tw-items-center tw-justify-between tw-gap-4 tw-bg-white\">\r\n\r\n <!-- Search Mode: Visible when no student selected -->\r\n <div *ngIf=\"!studentContext() && !isStudent()\" class=\"tw-flex-1 animate-fade-in\">\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <div class=\"tw-bg-blue-50 tw-p-1.5 tw-rounded-lg tw-flex-shrink-0\">\r\n <cide-ele-icon class=\"tw-text-blue-600\" size=\"sm\">person_search</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <cide-ele-select [options]=\"studentListOptions()\" [loading]=\"loading()\"\r\n placeholder=\"Search student by name or ID...\" [searchable]=\"true\" [clearInput]=\"true\"\r\n (searchChange)=\"onStudentSearch($event)\" (change)=\"onStudentSelect($event)\" leadingIcon=\"search\"\r\n size=\"sm\" class=\"tw-w-full\">\r\n </cide-ele-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Selected Mode: Compact View -->\r\n <div *ngIf=\"studentContext()\" class=\"tw-flex tw-flex-1 tw-items-center tw-gap-3 animate-fade-in\">\r\n <!-- Avatar -->\r\n <div\r\n class=\"tw-h-9 tw-w-9 tw-rounded-full tw-bg-gradient-to-br tw-from-blue-600 tw-to-blue-700 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-sm tw-shadow-sm tw-flex-shrink-0\">\r\n {{ getStudentInitial() }}\r\n </div>\r\n\r\n <!-- Info -->\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <h4 class=\"tw-font-bold tw-text-gray-900 tw-text-sm tw-truncate\">{{ getStudentFullName() }}</h4>\r\n <span *ngIf=\"!isStudent()\"\r\n class=\"tw-bg-yellow-100 tw-text-yellow-800 tw-text-[10px] tw-px-1.5 tw-py-0.5 tw-rounded tw-font-bold tw-uppercase tw-tracking-wider\">Admin\r\n View</span>\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-flex tw-items-center tw-gap-2\">\r\n <span class=\"tw-font-medium text-gray-700\">{{ studentContext()?.studentId }}</span>\r\n <span class=\"tw-text-gray-300\">|</span>\r\n <span>{{ studentContext()?.admissionData?.admap_class_program_name || 'Class N/A' }}</span>\r\n <span *ngIf=\"studentContext()?.admissionData?.admap_program_term_section_name\"> - {{\r\n studentContext()?.admissionData?.admap_program_term_section_name }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div *ngIf=\"studentContext()\" class=\"tw-flex tw-items-center tw-gap-2\">\r\n <button *ngIf=\"!isStudent()\" cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"resetSelection()\"\r\n class=\"tw-text-gray-500 hover:tw-text-red-600 tw-px-2\">\r\n <span class=\"tw-text-xs tw-font-medium\">Change</span>\r\n </button>\r\n <button type=\"button\" (click)=\"toggleDetails()\"\r\n class=\"tw-text-gray-500 hover:tw-text-blue-600 tw-w-8 tw-h-8 tw-p-0 tw-flex tw-items-center tw-justify-center tw-rounded-full hover:tw-bg-blue-50 tw-transition-colors tw-duration-200\">\r\n <cide-ele-icon size=\"sm\" [class.tw-rotate-180]=\"detailsExpanded()\"\r\n class=\"tw-transition-transform tw-duration-200\">expand_more</cide-ele-icon>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Collapsible Details Section -->\r\n <div *ngIf=\"studentContext() && detailsExpanded()\"\r\n class=\"tw-border-t tw-border-gray-100 tw-bg-gray-50 tw-p-4 animate-fade-in-down\">\r\n <div class=\"tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-y-4 tw-gap-x-8\">\r\n <div *ngIf=\"config().cardFields.includes('class')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Class/Program</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_class_program_name || 'N/A' }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"config().cardFields.includes('section')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Section</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_program_term_section_name || 'N/A' }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"config().cardFields.includes('term')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Current\r\n Term</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_program_term_name || 'N/A' }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"config().cardFields.includes('academic_year')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Academic\r\n Year</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_academic_year_name || 'N/A' }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Content Area: Only shown when context is available -->\r\n<div *ngIf=\"studentContext()\" class=\"animate-fade-in\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- Placeholder for when no student is selected (Simple banner) -->\r\n<div *ngIf=\"!studentContext() && !isStudent()\"\r\n class=\"tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg tw-p-4 tw-flex tw-items-center tw-gap-3 tw-mb-6\">\r\n <cide-ele-icon class=\"tw-text-blue-400\" size=\"md\">info</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-blue-800\">\r\n Please search and select a student above to view their fee records.\r\n </p>\r\n</div>", styles: [".animate-fade-in{animation:fadeIn .3s ease-out}.animate-fade-in-up{animation:fadeInUp .4s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
|
|
10415
10415
|
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], entityId: [{ type: i0.Input, args: [{ isSignal: true, alias: "entityId", required: false }] }], academicYearId: [{ type: i0.Input, args: [{ isSignal: true, alias: "academicYearId", required: false }] }], studentSelected: [{
|
|
10416
10416
|
type: Output
|
|
10417
10417
|
}] } });
|
|
@@ -11255,7 +11255,7 @@ class MyOnlinePaymentComponent {
|
|
|
11255
11255
|
return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
11256
11256
|
}
|
|
11257
11257
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MyOnlinePaymentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11258
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'online_fee_payment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n <cide-student-selection-wrapper (studentSelected)=\"onStudentSelected($event)\">\n <div class=\"tw-w-full tw-h-full\">\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\n\n <!-- Header Section - REMOVED (Handled by breadcrumbs) -->\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n\n <!-- Left Panel - Fee Selection -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n <div class=\"tw-px-4 tw-py-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-m-0\">Select Fees to Pay</h6>\n </div>\n\n <!-- Quick Actions -->\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\">\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\n Select All\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\n Select Overdue\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\n Clear\n </button>\n </div>\n\n <!-- Fee Items List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\n @if (outstandingFees().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon\n class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\n <p class=\"tw-text-sm\">No outstanding fees</p>\n </div>\n } @else {\n @for (fee of outstandingFees(); track fee.id) {\n <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\n [class.tw-border-blue-500]=\"isSelected(fee)\" [class.tw-bg-blue-50]=\"isSelected(fee)\"\n [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\" (click)=\"toggleFee(fee)\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\n <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\n <div class=\"tw-pointer-events-none\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"isSelected(fee)\" class=\"tw-mt-1\"\n [id]=\"'checkbox-' + fee.id\">\n </cide-ele-input>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\n @if (isOverdue(fee)) {\n <span\n 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\">\n Overdue\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-600\">\n Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\n </div>\n @if (fee.late_fee > 0) {\n <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\n Late Fee: {{ formatCurrency(fee.late_fee) }}\n </div>\n }\n </div>\n </div>\n <div class=\"tw-text-right\">\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\n </div>\n </div>\n </div>\n }\n }\n </div>\n </div>\n\n <!-- Right Panel - Payment Summary & Gateway -->\n <div class=\"tw-space-y-4\">\n\n <!-- Payment Summary Card -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-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-m-0\">Payment Summary</h6>\n </div>\n <div class=\"tw-p-4 tw-space-y-3\">\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Selected Items</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\n </div>\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Fee Amount</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n </div>\n @if (totalLateFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\n <span>Late Fee</span>\n <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\n </div>\n }\n <div\n class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\n <span>Subtotal</span>\n <span>{{ formatCurrency(subtotal()) }}</span>\n </div>\n @if (convenienceFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Convenience Fee ({{ convenienceFeePercent() }}%)</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\n </div>\n }\n <div\n 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\">\n <span>Total Payable</span>\n <span>{{ formatCurrency(totalPayable()) }}</span>\n </div>\n </div>\n </div>\n\n <!-- Payment Action -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-4 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\n <span>Secure payment powered by Razorpay</span>\n </div>\n\n <div class=\"tw-flex tw-justify-end tw-items-center tw-gap-3 tw-mt-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"md\" (click)=\"cancel()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"md\" (click)=\"proceedToPayment()\"\n [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" leftIcon=\"payment\">\n Pay {{ formatCurrency(totalPayable()) }}\n </button>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </cide-student-selection-wrapper>", 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: StudentSelectionWrapperComponent, selector: "cide-student-selection-wrapper", inputs: ["config", "entityId", "academicYearId"], outputs: ["studentSelected"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
11258
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'online_fee_payment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n <cide-student-selection-wrapper (studentSelected)=\"onStudentSelected($event)\">\n <div class=\"tw-w-full tw-h-full\">\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\n\n <!-- Header Section - REMOVED (Handled by breadcrumbs) -->\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n\n <!-- Left Panel - Fee Selection -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n <div class=\"tw-px-4 tw-py-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-m-0\">Select Fees to Pay</h6>\n </div>\n\n <!-- Quick Actions -->\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\">\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\n Select All\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\n Select Overdue\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\n Clear\n </button>\n </div>\n\n <!-- Fee Items List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\n @if (outstandingFees().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon\n class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\n <p class=\"tw-text-sm\">No outstanding fees</p>\n </div>\n } @else {\n @for (fee of outstandingFees(); track fee.id) {\n <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\n [class.tw-border-blue-500]=\"isSelected(fee)\" [class.tw-bg-blue-50]=\"isSelected(fee)\"\n [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\" (click)=\"toggleFee(fee)\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\n <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\n <div class=\"tw-pointer-events-none\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"isSelected(fee)\" class=\"tw-mt-1\"\n [id]=\"'checkbox-' + fee.id\">\n </cide-ele-input>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\n @if (isOverdue(fee)) {\n <span\n 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\">\n Overdue\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-600\">\n Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\n </div>\n @if (fee.late_fee > 0) {\n <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\n Late Fee: {{ formatCurrency(fee.late_fee) }}\n </div>\n }\n </div>\n </div>\n <div class=\"tw-text-right\">\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\n </div>\n </div>\n </div>\n }\n }\n </div>\n </div>\n\n <!-- Right Panel - Payment Summary & Gateway -->\n <div class=\"tw-space-y-4\">\n\n <!-- Payment Summary Card -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-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-m-0\">Payment Summary</h6>\n </div>\n <div class=\"tw-p-4 tw-space-y-3\">\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Selected Items</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\n </div>\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Fee Amount</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n </div>\n @if (totalLateFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\n <span>Late Fee</span>\n <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\n </div>\n }\n <div\n class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\n <span>Subtotal</span>\n <span>{{ formatCurrency(subtotal()) }}</span>\n </div>\n @if (convenienceFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Convenience Fee ({{ convenienceFeePercent() }}%)</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\n </div>\n }\n <div\n 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\">\n <span>Total Payable</span>\n <span>{{ formatCurrency(totalPayable()) }}</span>\n </div>\n </div>\n </div>\n\n <!-- Payment Action -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-4 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\n <span>Secure payment powered by Razorpay</span>\n </div>\n\n <div class=\"tw-flex tw-justify-end tw-items-center tw-gap-3 tw-mt-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"cancel()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"xs\" (click)=\"proceedToPayment()\"\n [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" leftIcon=\"payment\">\n Pay {{ formatCurrency(totalPayable()) }}\n </button>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </cide-student-selection-wrapper>", 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: StudentSelectionWrapperComponent, selector: "cide-student-selection-wrapper", inputs: ["config", "entityId", "academicYearId"], outputs: ["studentSelected"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
11259
11259
|
}
|
|
11260
11260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MyOnlinePaymentComponent, decorators: [{
|
|
11261
11261
|
type: Component,
|
|
@@ -11268,7 +11268,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
11268
11268
|
CideIconComponent,
|
|
11269
11269
|
StudentSelectionWrapperComponent,
|
|
11270
11270
|
CideLytSharedWrapperComponent
|
|
11271
|
-
], template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'online_fee_payment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n <cide-student-selection-wrapper (studentSelected)=\"onStudentSelected($event)\">\n <div class=\"tw-w-full tw-h-full\">\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\n\n <!-- Header Section - REMOVED (Handled by breadcrumbs) -->\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n\n <!-- Left Panel - Fee Selection -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n <div class=\"tw-px-4 tw-py-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-m-0\">Select Fees to Pay</h6>\n </div>\n\n <!-- Quick Actions -->\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\">\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\n Select All\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\n Select Overdue\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\n Clear\n </button>\n </div>\n\n <!-- Fee Items List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\n @if (outstandingFees().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon\n class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\n <p class=\"tw-text-sm\">No outstanding fees</p>\n </div>\n } @else {\n @for (fee of outstandingFees(); track fee.id) {\n <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\n [class.tw-border-blue-500]=\"isSelected(fee)\" [class.tw-bg-blue-50]=\"isSelected(fee)\"\n [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\" (click)=\"toggleFee(fee)\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\n <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\n <div class=\"tw-pointer-events-none\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"isSelected(fee)\" class=\"tw-mt-1\"\n [id]=\"'checkbox-' + fee.id\">\n </cide-ele-input>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\n @if (isOverdue(fee)) {\n <span\n 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\">\n Overdue\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-600\">\n Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\n </div>\n @if (fee.late_fee > 0) {\n <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\n Late Fee: {{ formatCurrency(fee.late_fee) }}\n </div>\n }\n </div>\n </div>\n <div class=\"tw-text-right\">\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\n </div>\n </div>\n </div>\n }\n }\n </div>\n </div>\n\n <!-- Right Panel - Payment Summary & Gateway -->\n <div class=\"tw-space-y-4\">\n\n <!-- Payment Summary Card -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-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-m-0\">Payment Summary</h6>\n </div>\n <div class=\"tw-p-4 tw-space-y-3\">\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Selected Items</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\n </div>\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Fee Amount</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n </div>\n @if (totalLateFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\n <span>Late Fee</span>\n <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\n </div>\n }\n <div\n class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\n <span>Subtotal</span>\n <span>{{ formatCurrency(subtotal()) }}</span>\n </div>\n @if (convenienceFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Convenience Fee ({{ convenienceFeePercent() }}%)</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\n </div>\n }\n <div\n 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\">\n <span>Total Payable</span>\n <span>{{ formatCurrency(totalPayable()) }}</span>\n </div>\n </div>\n </div>\n\n <!-- Payment Action -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-4 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\n <span>Secure payment powered by Razorpay</span>\n </div>\n\n <div class=\"tw-flex tw-justify-end tw-items-center tw-gap-3 tw-mt-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"
|
|
11271
|
+
], template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'online_fee_payment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n <cide-student-selection-wrapper (studentSelected)=\"onStudentSelected($event)\">\n <div class=\"tw-w-full tw-h-full\">\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\n\n <!-- Header Section - REMOVED (Handled by breadcrumbs) -->\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n\n <!-- Left Panel - Fee Selection -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n <div class=\"tw-px-4 tw-py-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-m-0\">Select Fees to Pay</h6>\n </div>\n\n <!-- Quick Actions -->\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\">\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\n Select All\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\n Select Overdue\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\n Clear\n </button>\n </div>\n\n <!-- Fee Items List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\n @if (outstandingFees().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon\n class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\n <p class=\"tw-text-sm\">No outstanding fees</p>\n </div>\n } @else {\n @for (fee of outstandingFees(); track fee.id) {\n <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\n [class.tw-border-blue-500]=\"isSelected(fee)\" [class.tw-bg-blue-50]=\"isSelected(fee)\"\n [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\" (click)=\"toggleFee(fee)\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\n <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\n <div class=\"tw-pointer-events-none\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"isSelected(fee)\" class=\"tw-mt-1\"\n [id]=\"'checkbox-' + fee.id\">\n </cide-ele-input>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\n @if (isOverdue(fee)) {\n <span\n 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\">\n Overdue\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-600\">\n Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\n </div>\n @if (fee.late_fee > 0) {\n <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\n Late Fee: {{ formatCurrency(fee.late_fee) }}\n </div>\n }\n </div>\n </div>\n <div class=\"tw-text-right\">\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\n </div>\n </div>\n </div>\n }\n }\n </div>\n </div>\n\n <!-- Right Panel - Payment Summary & Gateway -->\n <div class=\"tw-space-y-4\">\n\n <!-- Payment Summary Card -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-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-m-0\">Payment Summary</h6>\n </div>\n <div class=\"tw-p-4 tw-space-y-3\">\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Selected Items</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\n </div>\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Fee Amount</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n </div>\n @if (totalLateFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\n <span>Late Fee</span>\n <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\n </div>\n }\n <div\n class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\n <span>Subtotal</span>\n <span>{{ formatCurrency(subtotal()) }}</span>\n </div>\n @if (convenienceFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Convenience Fee ({{ convenienceFeePercent() }}%)</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\n </div>\n }\n <div\n 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\">\n <span>Total Payable</span>\n <span>{{ formatCurrency(totalPayable()) }}</span>\n </div>\n </div>\n </div>\n\n <!-- Payment Action -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-4 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\n <span>Secure payment powered by Razorpay</span>\n </div>\n\n <div class=\"tw-flex tw-justify-end tw-items-center tw-gap-3 tw-mt-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"cancel()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"xs\" (click)=\"proceedToPayment()\"\n [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" leftIcon=\"payment\">\n Pay {{ formatCurrency(totalPayable()) }}\n </button>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </cide-student-selection-wrapper>", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
|
|
11272
11272
|
}] });
|
|
11273
11273
|
|
|
11274
11274
|
var myOnlinePayment_component = /*#__PURE__*/Object.freeze({
|
|
@@ -11285,4 +11285,4 @@ var myOnlinePayment_component = /*#__PURE__*/Object.freeze({
|
|
|
11285
11285
|
*/
|
|
11286
11286
|
|
|
11287
11287
|
export { CideFeeDiscountRuleService as C, DiscountRulesComponent as D, FeeStructureListComponent as F, MyFeeStatementComponent as M, ReceiptTemplateService as R, StudentSelectionWrapperComponent as S, TemplateDesignerComponent as T, CloudIdeFees as a, CideFeeFeeStructureService as b, FeeStructureCreateComponent as c, CideFeeFeeAssignmentService as d, FeeAssignmentListComponent as e, feesRoutes as f, FeeAssignmentCreateComponent as g, CideFeeFeePaymentService as h, FeePaymentListComponent as i, FeePaymentProcessComponent as j, FeePaymentViewComponent as k, CollectionReportComponent as l, MyOnlinePaymentComponent as m, FeeDetailsViewerComponent as n, FeeApplicableFeesComponent as o };
|
|
11288
|
-
//# sourceMappingURL=cloud-ide-fees-cloud-ide-fees-
|
|
11288
|
+
//# sourceMappingURL=cloud-ide-fees-cloud-ide-fees-DTu2UFxM.mjs.map
|