cloud-ide-fees 0.0.30 → 0.0.33

package/fesm2022/cloud-ide-fees.mjs

@@ -1,30 +1,30 @@
 import * as i0 from '@angular/core';
-import { Component, inject, Injectable, DestroyRef, viewChild, signal, computed, input, ChangeDetectorRef, ViewChild, output } from '@angular/core';
+import { Component, inject, Injectable, DestroyRef, viewChild, signal, computed, input, output, effect, ChangeDetectorRef, ViewChild, Input } from '@angular/core';
 import { authGuard } from 'cloud-ide-auth';
 import { HttpClient } from '@angular/common/http';
-import { generateStringFromObject, cidePath, hostManagerRoutesUrl, feesRoutesUrl, MFeeStructure, generateObjectFromString, AcaClassPrgBranchListPayload, academicsRoutesUrl, MPrgTrmSection, FeeStructureSaveUpdatePayload, MFeePayment, MFeePaymentInsertUpdatePayload, MFeeReceiptTemplateInsertUpdatePayload, MFeeReceiptTemplate, MFeeReceiptTemplateGetByIdPayload, coreRoutesUrl } from 'cloud-ide-lms-model';
+import { generateStringFromObject, cidePath, hostManagerRoutesUrl, feesRoutesUrl, MFeeStructure, generateObjectFromString, AcaClassPrgBranchListPayload, academicsRoutesUrl, MPrgTrmSection, FeeStructureSaveUpdatePayload, MFeePayment, MFeeReceiptTemplateInsertUpdatePayload, MFeeReceiptTemplate, MFeeReceiptTemplateGetByIdPayload, coreRoutesUrl } from 'cloud-ide-lms-model';
 import * as i1 from '@angular/common';
-import { CommonModule, DatePipe } from '@angular/common';
+import { CommonModule, CurrencyPipe, DatePipe } from '@angular/common';
 import * as i1$1 from '@angular/forms';
 import { FormsModule, FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
-import { ConfirmationService, NotificationService, CideIconComponent, CideEleButtonComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideInputComponent, CideTextareaComponent, CideEleTabComponent, CideSelectComponent, CideFormFieldErrorComponent, CurrencyPipe } from 'cloud-ide-element';
+import { ConfirmationService, NotificationService, CideIconComponent, CideEleButtonComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideInputComponent, CideTextareaComponent, CideEleTabComponent, CideSelectComponent, CideFormFieldErrorComponent, CideEleFloatingContainerService, CurrencyPipe as CurrencyPipe$1 } from 'cloud-ide-element';
 import { AppStateHelperService, RightsService, CideLytSharedWrapperComponent, AppStateService, ComponentContextService } from 'cloud-ide-layout';
-import { ENTITY_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, CLASS_PROGRAM_MASTER_SERVICE_TOKEN, PROGRAM_TERM_SECTION_SERVICE_TOKEN, GENERAL_MASTER_SERVICE_TOKEN, ProgramSectionSelectorWrapperComponent } from 'cloud-ide-shared';
+import { ENTITY_SERVICE_TOKEN, CLASS_PROGRAM_MASTER_SERVICE_TOKEN, PROGRAM_TERM_SECTION_SERVICE_TOKEN, GENERAL_MASTER_SERVICE_TOKEN, ProgramSectionSelectorWrapperComponent, ACADEMIC_YEAR_SERVICE_TOKEN } from 'cloud-ide-shared';
 import { forkJoin, startWith } from 'rxjs';
 import { CideCoreUserMasterService } from 'cloud-ide-core';
 import { DomSanitizer } from '@angular/platform-browser';
 
 class CloudIdeFees {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeFees, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CloudIdeFees, isStandalone: true, selector: "lib-cloud-ide-fees", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CloudIdeFees, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CloudIdeFees, isStandalone: true, selector: "lib-cloud-ide-fees", ngImport: i0, template: `
     <p>
       cloud-ide-fees works!
     </p>
   `, isInline: true, styles: [""] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CloudIdeFees, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CloudIdeFees, decorators: [{
             type: Component,
             args: [{ selector: 'lib-cloud-ide-fees', imports: [], template: `
     <p>
@@ -233,10 +233,10 @@ class CideFeeFeeStructureService {
         console.log('🔄 Making PATCH request to toggle fee structure status:', { url, payload });
         return this.http.patch(url, payload);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFeeFeeStructureService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFeeFeeStructureService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideFeeFeeStructureService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideFeeFeeStructureService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFeeFeeStructureService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideFeeFeeStructureService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -401,13 +401,19 @@ class FeeStructureListComponent {
     }), ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
     // Rights computed signals
     canCreate = computed(() => this.rightsService.hasRight('CREATE'), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
-    canEdit = computed(() => this.rightsService.hasRight('EDIT'), ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
+    canEdit = computed(() => this.rightsService.hasRight('EDIT') || this.rightsService.hasRight('UPDATE'), ...(ngDevMode ? [{ debugName: "canEdit" }] : []));
     canDelete = computed(() => this.rightsService.hasRight('DELETE'), ...(ngDevMode ? [{ debugName: "canDelete" }] : []));
     canView = computed(() => this.rightsService.hasRight('VIEW'), ...(ngDevMode ? [{ debugName: "canView" }] : []));
     ngOnInit() {
         // Initialize rights for fee structure management
         this.rightsService.initializeRights('fee_structure');
         console.log('💰 Fee Structure List Component initialized');
+        // Diagnostic logging for rights
+        setTimeout(() => {
+            console.log('🔐 Debug: Current Page Code:', this.rightsService.getCurrentPageCode());
+            console.log('🔐 Debug: All loaded rights for fee_structure:', this.rightsService.getRights());
+            console.log('🔐 Debug: canEdit evaluation:', this.canEdit());
+        }, 1000);
         this.initializeBreadcrumbData();
         this.loadFeeStructures();
     }
@@ -434,6 +440,7 @@ class FeeStructureListComponent {
             pageIndex: this.currentPage(),
             pageSize: this.pageSize(),
             query: this.searchQuery() || "",
+            fees_entity_id_syen: this.appState.activeEntity()?._id || "",
             sort: {
                 key: this.sortColumn(),
                 order: this.sortDirection()
@@ -807,10 +814,10 @@ class FeeStructureListComponent {
             return category;
         return category.sygms_title || category.sygms_code || '-';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeStructureListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeStructureListComponent, isStandalone: true, selector: "cide-fee-structure-list", viewQueries: [{ propertyName: "feeStructureDetailsRendererTemplate", first: true, predicate: ["feeStructureDetailsRendererTemplate"], 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: "academicYearRendererTemplate", first: true, predicate: ["academicYearRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "classProgramRendererTemplate", first: true, predicate: ["classProgramRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "reservationCategoryRendererTemplate", first: true, predicate: ["reservationCategoryRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fee Structure Container -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions>\n    <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"createFeeStructure()\">\n      Create Fee Structure\n    </button>\n  </div>\n\n  <div class=\"tw-table tw-w-full tw-h-full\">\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 #feeStructureDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-w-full\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.fees_structure_name || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.fees_structure_description || 'No description' }}</div>\n  </div>\n</ng-template>\n\n\n<ng-template #statusRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-gap-1 tw-items-center\">\n    <!-- Active/Inactive Status Badge -->\n    <span 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.fees_is_active ? 'check_circle' : 'cancel' }}\n      </cide-ele-icon>\n      {{ getStatusText(row) }}\n    </span>\n    \n    <!-- Template Badge -->\n    @if (row.is_template) {\n      <span\n        class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800 tw-text-center\">\n        <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">description</cide-ele-icon>\n        Template\n      </span>\n    }\n  </div>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<ng-template #academicYearRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ getAcademicYearName(row) }}</span>\n  </div>\n</ng-template>\n\n<ng-template #classProgramRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <span class=\"tw-text-sm tw-text-gray-700\">{{ getClassProgramName(row) }}</span>\n  </div>\n</ng-template>\n\n<ng-template #reservationCategoryRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <span class=\"tw-text-sm tw-text-gray-700\">{{ getReservationCategoryName(row) }}</span>\n  </div>\n</ng-template>\n\n", styles: [".fee-structure-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: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeStructureListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeStructureListComponent, isStandalone: true, selector: "cide-fee-structure-list", viewQueries: [{ propertyName: "feeStructureDetailsRendererTemplate", first: true, predicate: ["feeStructureDetailsRendererTemplate"], 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: "academicYearRendererTemplate", first: true, predicate: ["academicYearRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "classProgramRendererTemplate", first: true, predicate: ["classProgramRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "reservationCategoryRendererTemplate", first: true, predicate: ["reservationCategoryRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fee Structure Container -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions>\n    <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"createFeeStructure()\">\n      Create Fee Structure\n    </button>\n  </div>\n\n  <div class=\"tw-table tw-w-full tw-h-full\">\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 #feeStructureDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-w-full\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.fees_structure_name || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.fees_structure_description || 'No description' }}</div>\n  </div>\n</ng-template>\n\n\n<ng-template #statusRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-gap-1 tw-items-center\">\n    <!-- Active/Inactive Status Badge -->\n    <span 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.fees_is_active ? 'check_circle' : 'cancel' }}\n      </cide-ele-icon>\n      {{ getStatusText(row) }}\n    </span>\n    \n    <!-- Template Badge -->\n    @if (row.is_template) {\n      <span\n        class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800 tw-text-center\">\n        <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">description</cide-ele-icon>\n        Template\n      </span>\n    }\n  </div>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<ng-template #academicYearRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ getAcademicYearName(row) }}</span>\n  </div>\n</ng-template>\n\n<ng-template #classProgramRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <span class=\"tw-text-sm tw-text-gray-700\">{{ getClassProgramName(row) }}</span>\n  </div>\n</ng-template>\n\n<ng-template #reservationCategoryRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <span class=\"tw-text-sm tw-text-gray-700\">{{ getReservationCategoryName(row) }}</span>\n  </div>\n</ng-template>\n\n", styles: [".fee-structure-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: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeStructureListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeStructureListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-fee-structure-list', standalone: true, imports: [
                         CommonModule,
@@ -821,7 +828,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleDropdownComponent,
                         CideLytSharedWrapperComponent
                     ], template: "<!-- Fee Structure Container -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions>\n    <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"createFeeStructure()\">\n      Create Fee Structure\n    </button>\n  </div>\n\n  <div class=\"tw-table tw-w-full tw-h-full\">\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 #feeStructureDetailsRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-w-full\">\n    <div class=\"tw-font-medium tw-text-gray-900\">{{ row.fees_structure_name || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.fees_structure_description || 'No description' }}</div>\n  </div>\n</ng-template>\n\n\n<ng-template #statusRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col tw-gap-1 tw-items-center\">\n    <!-- Active/Inactive Status Badge -->\n    <span 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.fees_is_active ? 'check_circle' : 'cancel' }}\n      </cide-ele-icon>\n      {{ getStatusText(row) }}\n    </span>\n    \n    <!-- Template Badge -->\n    @if (row.is_template) {\n      <span\n        class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800 tw-text-center\">\n        <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">description</cide-ele-icon>\n        Template\n      </span>\n    }\n  </div>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n  <cide-ele-dropdown \n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n<ng-template #academicYearRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ getAcademicYearName(row) }}</span>\n  </div>\n</ng-template>\n\n<ng-template #classProgramRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <span class=\"tw-text-sm tw-text-gray-700\">{{ getClassProgramName(row) }}</span>\n  </div>\n</ng-template>\n\n<ng-template #reservationCategoryRendererTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-flex-col\">\n    <span class=\"tw-text-sm tw-text-gray-700\">{{ getReservationCategoryName(row) }}</span>\n  </div>\n</ng-template>\n\n", styles: [".fee-structure-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
-        }] });
+        }], propDecorators: { feeStructureDetailsRendererTemplate: [{ type: i0.ViewChild, args: ['feeStructureDetailsRendererTemplate', { isSignal: true }] }], statusRendererTemplate: [{ type: i0.ViewChild, args: ['statusRendererTemplate', { isSignal: true }] }], actionsDropdownRendererTemplate: [{ type: i0.ViewChild, args: ['actionsDropdownRendererTemplate', { isSignal: true }] }], academicYearRendererTemplate: [{ type: i0.ViewChild, args: ['academicYearRendererTemplate', { isSignal: true }] }], classProgramRendererTemplate: [{ type: i0.ViewChild, args: ['classProgramRendererTemplate', { isSignal: true }] }], reservationCategoryRendererTemplate: [{ type: i0.ViewChild, args: ['reservationCategoryRendererTemplate', { isSignal: true }] }] } });
 
 var feeStructureList_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -834,7 +841,6 @@ class FeeStructureCreateComponent {
     fb = inject(FormBuilder);
     feeStructureService = inject(CideFeeFeeStructureService);
     entityService = inject(ENTITY_SERVICE_TOKEN);
-    academicYearService = inject(ACADEMIC_YEAR_SERVICE_TOKEN);
     classProgramMasterService = inject(CLASS_PROGRAM_MASTER_SERVICE_TOKEN);
     programTermSectionService = inject(PROGRAM_TERM_SECTION_SERVICE_TOKEN);
     generalMasterService = inject(GENERAL_MASTER_SERVICE_TOKEN);
@@ -858,9 +864,7 @@ class FeeStructureCreateComponent {
     breadcrumbData = signal([], ...(ngDevMode ? [{ debugName: "breadcrumbData" }] : []));
     // Dropdown options
     entityOptions = signal([], ...(ngDevMode ? [{ debugName: "entityOptions" }] : []));
-    academicYearOptions = signal([], ...(ngDevMode ? [{ debugName: "academicYearOptions" }] : []));
     entityLoading = signal(false, ...(ngDevMode ? [{ debugName: "entityLoading" }] : []));
-    academicYearLoading = signal(false, ...(ngDevMode ? [{ debugName: "academicYearLoading" }] : []));
     // Class Program Master options
     classProgramMasters = signal([], ...(ngDevMode ? [{ debugName: "classProgramMasters" }] : []));
     classProgramMastersLoading = signal(false, ...(ngDevMode ? [{ debugName: "classProgramMastersLoading" }] : []));
@@ -976,7 +980,7 @@ class FeeStructureCreateComponent {
             fees_class_program_term_id_acapt: [''],
             fees_program_term_section_id_acapts: [''],
             fees_student_category_id_sygms: [''],
-            fees_academic_year_id_acayr: [''],
+            fees_academic_year_id_acayr: [this.appStateService.activeAcademicYear()?._id || ''],
             fees_entity_id_syen: [''], // Will be set from active entity
             fees_is_active: [true],
             // Fee Items
@@ -1353,6 +1357,14 @@ class FeeStructureCreateComponent {
     ngOnInit() {
         // Initialize rights for fee structure management
         this.rightsService.initializeRights('fee_structure');
+        // Diagnostic logging for rights
+        setTimeout(() => {
+            console.log('💰 Fee Structure Create Component initialized');
+            console.log('🔐 Debug: Current Page Code:', this.rightsService.getCurrentPageCode());
+            console.log('🔐 Debug: All loaded rights for fee_structure:', this.rightsService.getRights());
+            const hasEditAccess = this.rightsService.hasRight('EDIT') || this.rightsService.hasRight('UPDATE');
+            console.log('🔐 Debug: Edit/Update access evaluation:', hasEditAccess);
+        }, 1000);
         this.initializeComponent();
     }
     ngOnDestroy() {
@@ -1424,33 +1436,7 @@ class FeeStructureCreateComponent {
             this.loadStudentCategories();
             this.loadFeeCategories();
         }, 100);
-        // Load academic year options and set current one
-        this.academicYearLoading.set(true);
-        const academicYearPayload = {
-            pageIndex: 1,
-            pageSize: 100,
-            pagination: false
-        };
-        this.academicYearService.getAcademicYearList(academicYearPayload).subscribe({
-            next: (response) => {
-                if (response?.success && response.data) {
-                    this.academicYearOptions.set(response.data);
-                    // Find and set current academic year (where acayr_iscurrent is true)
-                    const currentAcademicYear = response.data.find((ay) => ay.acayr_iscurrent === true);
-                    if (currentAcademicYear?._id) {
-                        this.feeStructureForm.patchValue({
-                            fees_academic_year_id_acayr: currentAcademicYear._id
-                        });
-                        // Disable academic year control
-                        this.feeStructureForm.get('fees_academic_year_id_acayr')?.disable();
-                    }
-                }
-                this.academicYearLoading.set(false);
-            },
-            error: () => {
-                this.academicYearLoading.set(false);
-            }
-        });
+        // academicYearLoading.set(true); removed as we use appState
     }
     /**
      * Load class program masters
@@ -2113,9 +2099,12 @@ class FeeStructureCreateComponent {
      * Handle form submission
      */
     onSubmit() {
-        const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
-        if (!this.rightsService.hasRight(requiredRight)) {
-            this.notificationService.error(`You do not have permission to ${this.isEditMode() ? 'edit' : 'create'} fee structures`);
+        const isEdit = this.isEditMode();
+        const hasPermission = isEdit
+            ? (this.rightsService.hasRight('EDIT') || this.rightsService.hasRight('UPDATE'))
+            : this.rightsService.hasRight('CREATE');
+        if (!hasPermission) {
+            this.notificationService.error(`You do not have permission to ${isEdit ? 'edit' : 'create'} fee structures`);
             return;
         }
         if (this.submitting()) {
@@ -2225,6 +2214,8 @@ class FeeStructureCreateComponent {
                         // Show success toast notification
                         this.notificationService.success(`Fee structure ${this.isEditMode() ? 'updated' : 'created'} successfully!`, { icon: 'done' });
                         this.submitting.set(false);
+                        // Navigate to listing page on success
+                        this.componentContextService.close(['/control-panel/structure']);
                     });
                 }
                 else {
@@ -2335,13 +2326,11 @@ class FeeStructureCreateComponent {
         }));
     }
     /**
-     * Get academic year options for select
+     * Get academic year name from app state
      */
-    getAcademicYearOptions() {
-        return this.academicYearOptions().map(ay => ({
-            value: ay._id || '',
-            label: `${ay.acayr_name || ''} (${ay.acayr_code || ''})`
-        }));
+    getAcademicYearName() {
+        const activeYear = this.appStateService.activeAcademicYear();
+        return activeYear?.acayr_name || activeYear?.acayr_code || '-';
     }
     /**
      * Format currency
@@ -2383,10 +2372,10 @@ class FeeStructureCreateComponent {
         }
         this.breadcrumbData.set(additionalItems);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeStructureCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeStructureCreateComponent, isStandalone: true, selector: "lib-cide-fee-structure-create", ngImport: i0, template: "<!-- Fee Structure Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  \n  <!-- Back Button in Breadcrumb Area (View Mode Only) -->\n  @if (isViewMode()) {\n    <div breadcrumb-actions>\n      <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"arrow_back\">\n        Back to List\n      </button>\n    </div>\n  }\n  \n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"feeStructureForm\" \n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-2 tw-py-0\">\n        <cide-ele-tab [tabs]=\"feeStructureTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\n          (tabChange)=\"onTabChange($event)\">\n        </cide-ele-tab>\n      </div>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-4 tw-py-4\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          @switch (activeTab()) {\n\n            @case ('basic') {\n              <!-- Basic Information -->\n              <div class=\"tw-space-y-4\">\n                <!-- First Row: Fee Code (small), Fee Name, Academic Year - Always on one row -->\n                <div class=\"tw-grid\" style=\"grid-template-columns: 170px 1fr 1fr; gap: 1rem;\">\n                  <cide-ele-input label=\"Fee Structure Code\" formControlName=\"fees_structure_code\"\n                    placeholder=\"Auto-generated by API\" size=\"sm\" [disabled]=\"isEditMode()\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Fee Structure Name\" formControlName=\"fees_structure_name\"\n                    placeholder=\"e.g., Grade 10 Fee Structure 2024-25\" size=\"sm\">\n                  </cide-ele-input>\n\n                  <cide-ele-select \n                    label=\"Academic Year\" \n                    formControlName=\"fees_academic_year_id_acayr\"\n                    [options]=\"getAcademicYearOptions()\"\n                    [loading]=\"academicYearLoading()\"\n                    [disabled]=\"true\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div>\n                  <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n                    placeholder=\"Enter detailed description of the fee structure...\"\n                    rows=\"2\" size=\"sm\">\n                  </cide-ele-textarea>\n                </div>\n\n                <!-- Academic Dropdowns - Using Program Section Selector Component -->\n                \n                <cide-shared-program-section-selector-wrapper\n                  [formGroup]=\"feeStructureForm\"\n                  [classProgramControlName]=\"'fees_class_program_id_acacpm'\"\n                  [branchControlName]=\"'fees_class_program_branch_id_acabrn'\"\n                  [termControlName]=\"'fees_class_program_term_id_acapt'\"\n                  [sectionControlName]=\"'fees_program_term_section_id_acapts'\"\n                  [academicYearId]=\"feeStructureForm.get('fees_academic_year_id_acayr')?.value\"\n                  [entityId]=\"feeStructureForm.get('fees_entity_id_syen')?.value\"\n                  [disabled]=\"isViewMode()\"\n                  [showLabels]=\"true\"\n                  [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\">\n                </cide-shared-program-section-selector-wrapper>\n\n                <!-- Reservation Category Dropdown -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mt-4\">\n                  <cide-ele-select \n                    label=\"Reservation Category\" \n                    formControlName=\"fees_student_category_id_sygms\"\n                    [options]=\"studentCategories()\"\n                    [loading]=\"studentCategoriesLoading()\"\n                    placeholder=\"Select reservation category\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                  <cide-ele-input formControlName=\"fees_is_active\" type=\"checkbox\" size=\"sm\">\n                  </cide-ele-input>\n                  <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\n                    <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this fee structure</span>\n                  </div>\n                </div>\n              </div>\n            }\n\n            @case ('items') {\n              <!-- Fee Items Section -->\n              <div class=\"tw-space-y-3\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                  <div>\n                    <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-m-0\">Fee Items</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Configure individual fee items for this structure</p>\n                  </div>\n                  <div class=\"tw-flex tw-items-center tw-gap-3\">\n                    <div class=\"tw-text-right\">\n                      <div class=\"tw-text-xs tw-text-gray-500\">Total Amount</div>\n                      <div class=\"tw-text-base tw-font-bold tw-text-green-600\">{{ formatCurrency(totalAmount()) }}</div>\n                    </div>\n                    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" leftIcon=\"add\"\n                      (click)=\"addFeeItem()\">\n                      Add Fee Item\n                    </button>\n                  </div>\n                </div>\n\n                <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-pr-2\">\n                  @for (item of feeItemsArray.controls; track $index; let itemIndex = $index) {\n                    <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm hover:tw-shadow-md tw-transition-shadow tw-p-3\"\n                      [formGroupName]=\"itemIndex\">\n                      \n                      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <div class=\"tw-flex tw-items-center tw-gap-2\">\n                          <div class=\"tw-bg-blue-100 tw-p-1.5 tw-rounded\">\n                            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">receipt</cide-ele-icon>\n                          </div>\n                          <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">Item #{{ itemIndex + 1 }}</h6>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                          @if (itemIndex > 0) {\n                            <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n                              (click)=\"moveItemUp(itemIndex)\" title=\"Move Up\">\n                              <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_upward</cide-ele-icon>\n                            </button>\n                          }\n                          @if (itemIndex < feeItemsArray.length - 1) {\n                            <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n                              (click)=\"moveItemDown(itemIndex)\" title=\"Move Down\">\n                              <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_downward</cide-ele-icon>\n                            </button>\n                          }\n                          <button cideEleButton type=\"button\" variant=\"danger\" size=\"xs\" leftIcon=\"delete\"\n                            (click)=\"removeFeeItem(itemIndex)\"\n                            [disabled]=\"feeItemsArray.length === 1\">\n                            Remove\n                          </button>\n                        </div>\n                      </div>\n\n                      <!-- Category, Code, Name in one row -->\n                      <div class=\"tw-grid\" style=\"grid-template-columns: 1fr 170px 1fr; gap: 1rem;\">\n                        <cide-ele-select \n                          label=\"Category\" \n                          formControlName=\"feesi_category_id_sygms\"\n                          [options]=\"feeCategoriesOptions()\"\n                          [loading]=\"feeCategoriesLoading()\"\n                          size=\"sm\"\n                          placeholder=\"Select Fee Category\">\n                        </cide-ele-select>\n\n                        <cide-ele-input \n                          label=\"Item Code\" \n                          formControlName=\"feesi_item_code\"\n                          size=\"sm\"\n                          placeholder=\"Auto-filled from category\">\n                        </cide-ele-input>\n\n                        <cide-ele-input \n                          label=\"Item Name\" \n                          formControlName=\"feesi_item_name\"\n                          size=\"sm\"\n                          placeholder=\"Auto-filled from category\">\n                        </cide-ele-input>\n                      </div>\n\n                      <div class=\"tw-mt-2\">\n                        <cide-ele-textarea \n                          label=\"Description\" \n                          formControlName=\"feesi_description\"\n                          rows=\"1\" \n                          size=\"sm\">\n                        </cide-ele-textarea>\n                      </div>\n\n                      <!-- Amount Section -->\n                      <div class=\"tw-mt-2\">\n                        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n                          <cide-ele-input \n                            [label]=\"item.get('feesi_is_amount_editable')?.value ? 'Base Amount (Default)' : 'Amount'\" \n                            formControlName=\"feesi_amount\"\n                            type=\"number\"\n                            size=\"sm\"\n                            [title]=\"item.get('feesi_is_amount_editable')?.value ? 'Default amount used when applying fee. Can be edited per student if editable.' : 'Fixed fee amount'\">\n                          </cide-ele-input>\n                        </div>\n\n                        <!-- Amount Editable Option -->\n                        <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                          <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2\">\n                            <cide-ele-input formControlName=\"feesi_is_amount_editable\" type=\"checkbox\" size=\"sm\">\n                            </cide-ele-input>\n                            <div class=\"tw-flex-1\">\n                              <span class=\"tw-text-xs tw-font-semibold tw-text-blue-900\">Allow Amount to be Edited</span>\n                              <p class=\"tw-text-xs tw-text-blue-700 tw-mt-0.5\">\n                                Enable this for fees that vary per student (e.g., Transport fee based on distance). \n                                When applying fees, you'll be asked to enter the amount within the specified range.\n                              </p>\n                            </div>\n                          </div>\n\n                          <!-- Min/Max Amount Fields (shown when editable is checked) -->\n                          @if (item.get('feesi_is_amount_editable')?.value) {\n                            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                              <cide-ele-input \n                                label=\"Minimum Amount\" \n                                formControlName=\"feesi_min_amount\"\n                                type=\"number\"\n                                size=\"sm\"\n                                placeholder=\"No minimum\"\n                                title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n                              </cide-ele-input>\n\n                              <cide-ele-input \n                                label=\"Maximum Amount\" \n                                formControlName=\"feesi_max_amount\"\n                                type=\"number\"\n                                size=\"sm\"\n                                placeholder=\"No maximum\"\n                                title=\"Maximum amount allowed when editing (leave empty for no maximum)\">\n                              </cide-ele-input>\n                            </div>\n                          }\n                        </div>\n                      </div>\n\n                      <!-- Additional Options -->\n                      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2 tw-mt-2\">\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_mandatory\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Mandatory</span>\n                        </div>\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_refundable\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Refundable</span>\n                        </div>\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_installment_allowed\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Installment Allowed</span>\n                        </div>\n                      </div>\n\n                      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                        @if (item.get('feesi_is_installment_allowed')?.value) {\n                          <cide-ele-input \n                            label=\"Installment Count\" \n                            formControlName=\"feesi_installment_count\"\n                            type=\"number\"\n                            size=\"sm\">\n                          </cide-ele-input>\n                        }\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_tax_applicable\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Tax Applicable</span>\n                        </div>\n                      </div>\n\n                      @if (item.get('feesi_tax_applicable')?.value) {\n                        <div class=\"tw-mt-2\">\n                          <cide-ele-input \n                            label=\"Tax Percentage\" \n                            formControlName=\"feesi_tax_percentage\"\n                            type=\"number\"\n                            size=\"sm\">\n                          </cide-ele-input>\n                        </div>\n                      }\n\n                      <!-- Installment Details Table -->\n                      <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                          <div class=\"tw-flex tw-items-center tw-gap-2\">\n                            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">schedule</cide-ele-icon>\n                            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">\n                              @if (item.get('feesi_is_installment_allowed')?.value) {\n                                Installment Details ({{ item.get('feesi_installment_count')?.value || 1 }} Installments)\n                              } @else {\n                                Payment Details (Single Payment)\n                              }\n                            </h6>\n                          </div>\n                        </div>\n\n                        <div formArrayName=\"installments\" class=\"tw-space-y-3\">\n                          @for (installment of getInstallmentsArray(itemIndex).controls; track $index; let installmentIndex = $index) {\n                            <div class=\"tw-bg-white tw-rounded tw-border tw-border-gray-300 tw-p-3\"\n                              [formGroupName]=\"installmentIndex\">\n                              \n                              <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                                  <div class=\"tw-bg-blue-100 tw-p-1 tw-rounded\">\n                                    <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">payments</cide-ele-icon>\n                                  </div>\n                                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">\n                                    @if (item.get('feesi_is_installment_allowed')?.value) {\n                                      Installment #{{ installment.get('installment_number')?.value }}\n                                    } @else {\n                                      Payment Details\n                                    }\n                                  </h6>\n                                </div>\n                                <div class=\"tw-text-sm tw-font-medium tw-text-green-600\">\n                                  Amount: {{ formatCurrency(installment.get('installment_amount')?.value || 0) }}\n                                </div>\n                              </div>\n\n                              <!-- Installment Amount Distribution -->\n                              @if (item.get('feesi_is_installment_allowed')?.value) {\n                                <div class=\"tw-p-2 tw-bg-yellow-50 tw-rounded tw-border tw-border-yellow-200 tw-mb-2\">\n                                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2\">\n                                    <cide-ele-select \n                                      label=\"Distribution Type\" \n                                      formControlName=\"distribution_type\"\n                                      [options]=\"distributionTypeOptions\"\n                                      size=\"sm\">\n                                    </cide-ele-select>\n\n                                    @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n                                      <cide-ele-input \n                                        label=\"Percentage (%)\" \n                                        formControlName=\"percentage\"\n                                        type=\"number\"\n                                        size=\"sm\"\n                                        title=\"Percentage of total amount for this installment\">\n                                      </cide-ele-input>\n                                      <div class=\"tw-flex tw-flex-col tw-items-end tw-justify-end tw-gap-1\">\n                                        @if (installmentIndex > 0) {\n                                          <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\n                                            Previous: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) }}%\n                                          </div>\n                                        }\n                                        <div class=\"tw-text-xs tw-text-gray-600\">\n                                          Calculated: {{ formatCurrency((item.get('feesi_amount')?.value || 0) * (installment.get('percentage')?.value || 0) / 100) }}\n                                        </div>\n                                        @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex > 0) {\n                                          <div class=\"tw-text-xs tw-font-semibold\" [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\" [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n                                            Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0) }}%\n                                          </div>\n                                        }\n                                      </div>\n                                    }\n\n                                    @if (installment.get('distribution_type')?.value === 'FIXED_AMOUNT') {\n                                      <cide-ele-input \n                                        label=\"Fixed Amount\" \n                                        formControlName=\"fixed_amount\"\n                                        type=\"number\"\n                                        size=\"sm\"\n                                        title=\"Fixed amount for this installment\">\n                                      </cide-ele-input>\n                                    }\n                                  </div>\n                                </div>\n                              }\n\n                              <!-- Due Date Fields -->\n                              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mb-2\">\n                                <cide-ele-input \n                                  label=\"Due Date Offset (Days from Assignment)\" \n                                  formControlName=\"due_date_offset_days\"\n                                  type=\"number\"\n                                  size=\"sm\"\n                                  title=\"Days from assignment date\">\n                                </cide-ele-input>\n\n                                <cide-ele-input \n                                  label=\"Due Date (Fixed Date - Alternative)\" \n                                  formControlName=\"due_date\"\n                                  type=\"date\"\n                                  size=\"sm\"\n                                  title=\"Use fixed date instead of offset\">\n                                </cide-ele-input>\n                              </div>\n\n                              <!-- Collection Window -->\n                              <div class=\"tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                                <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-2\">\n                                  <cide-ele-icon class=\"tw-text-blue-600 tw-w-3 tw-h-3\">schedule</cide-ele-icon>\n                                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-m-0\">Collection Window</h6>\n                                </div>\n                                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n                                  <cide-ele-input \n                                    label=\"Start Offset (Days from Assignment)\" \n                                    formControlName=\"collection_start_offset_days\"\n                                    type=\"number\"\n                                    size=\"sm\"\n                                    title=\"Days from assignment date when collection can start\">\n                                  </cide-ele-input>\n\n                                  <cide-ele-input \n                                    label=\"End Offset (Days from Assignment)\" \n                                    formControlName=\"collection_end_offset_days\"\n                                    type=\"number\"\n                                    size=\"sm\"\n                                    title=\"Days from assignment date when collection window ends\">\n                                  </cide-ele-input>\n                                </div>\n                                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                                  <cide-ele-input \n                                    label=\"Start Date (Fixed Date - Alternative)\" \n                                    formControlName=\"collection_start_date\"\n                                    type=\"date\"\n                                    size=\"sm\"\n                                    title=\"Use fixed date instead of offset\">\n                                  </cide-ele-input>\n\n                                  <cide-ele-input \n                                    label=\"End Date (Fixed Date - Alternative)\" \n                                    formControlName=\"collection_end_date\"\n                                    type=\"date\"\n                                    size=\"sm\"\n                                    title=\"Use fixed date instead of offset\">\n                                  </cide-ele-input>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n\n                @if (feeItemsArray.length === 0) {\n                  <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                    <div class=\"tw-bg-white tw-p-3 tw-rounded-full tw-w-12 tw-h-12 tw-mx-auto tw-mb-3 tw-flex tw-items-center tw-justify-center\">\n                      <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400\">receipt</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-1\">No Fee Items Yet</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500\">Click \"Add Fee Item\" to start adding fee items to this structure.</p>\n                  </div>\n                }\n              </div>\n            }\n          }\n          \n          <!-- Form Validation Errors -->\n          @if (!isViewMode()) {\n            <!-- 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 continue.\n                  </p>\n                </div>\n              }\n              \n              <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n                [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" \n                [loading]=\"submitting()\" \n                leftIcon=\"save\">\n                {{ isEditMode() ? 'Update Fee Structure' : 'Create Fee Structure' }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeStructureCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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=\"sm\" (click)=\"onCancel()\" leftIcon=\"arrow_back\">\n      Back to List\n    </button>\n  </div>\n  }\n\n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"feeStructureForm\"\n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n      <!-- Tab Navigation -->\n      <div class=\"tw-table-row tw-h-0\">\n        <div class=\"tw-table-cell tw-w-full tw-px-2 tw-py-0\">\n          <cide-ele-tab [tabs]=\"feeStructureTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\n            (tabChange)=\"onTabChange($event)\">\n          </cide-ele-tab>\n        </div>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tw-table-row\">\n        <div class=\"tw-table-cell tw-w-full tw-px-4 tw-py-4\">\n          <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n            @switch (activeTab()) {\n\n            @case ('basic') {\n            <!-- Basic Information -->\n            <div class=\"tw-space-y-4\">\n              <!-- First Row: Fee Code (small), Fee Name - 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"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeStructureCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeStructureCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'lib-cide-fee-structure-create', standalone: true, imports: [
                         CommonModule,
@@ -2400,7 +2389,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideLytSharedWrapperComponent,
                         ProgramSectionSelectorWrapperComponent,
                         CideFormFieldErrorComponent
-                    ], template: "<!-- Fee Structure Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  \n  <!-- Back Button in Breadcrumb Area (View Mode Only) -->\n  @if (isViewMode()) {\n    <div breadcrumb-actions>\n      <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"arrow_back\">\n        Back to List\n      </button>\n    </div>\n  }\n  \n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"feeStructureForm\" \n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-2 tw-py-0\">\n        <cide-ele-tab [tabs]=\"feeStructureTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\n          (tabChange)=\"onTabChange($event)\">\n        </cide-ele-tab>\n      </div>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-4 tw-py-4\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          @switch (activeTab()) {\n\n            @case ('basic') {\n              <!-- Basic Information -->\n              <div class=\"tw-space-y-4\">\n                <!-- First Row: Fee Code (small), Fee Name, Academic Year - Always on one row -->\n                <div class=\"tw-grid\" style=\"grid-template-columns: 170px 1fr 1fr; gap: 1rem;\">\n                  <cide-ele-input label=\"Fee Structure Code\" formControlName=\"fees_structure_code\"\n                    placeholder=\"Auto-generated by API\" size=\"sm\" [disabled]=\"isEditMode()\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Fee Structure Name\" formControlName=\"fees_structure_name\"\n                    placeholder=\"e.g., Grade 10 Fee Structure 2024-25\" size=\"sm\">\n                  </cide-ele-input>\n\n                  <cide-ele-select \n                    label=\"Academic Year\" \n                    formControlName=\"fees_academic_year_id_acayr\"\n                    [options]=\"getAcademicYearOptions()\"\n                    [loading]=\"academicYearLoading()\"\n                    [disabled]=\"true\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div>\n                  <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n                    placeholder=\"Enter detailed description of the fee structure...\"\n                    rows=\"2\" size=\"sm\">\n                  </cide-ele-textarea>\n                </div>\n\n                <!-- Academic Dropdowns - Using Program Section Selector Component -->\n                \n                <cide-shared-program-section-selector-wrapper\n                  [formGroup]=\"feeStructureForm\"\n                  [classProgramControlName]=\"'fees_class_program_id_acacpm'\"\n                  [branchControlName]=\"'fees_class_program_branch_id_acabrn'\"\n                  [termControlName]=\"'fees_class_program_term_id_acapt'\"\n                  [sectionControlName]=\"'fees_program_term_section_id_acapts'\"\n                  [academicYearId]=\"feeStructureForm.get('fees_academic_year_id_acayr')?.value\"\n                  [entityId]=\"feeStructureForm.get('fees_entity_id_syen')?.value\"\n                  [disabled]=\"isViewMode()\"\n                  [showLabels]=\"true\"\n                  [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\">\n                </cide-shared-program-section-selector-wrapper>\n\n                <!-- Reservation Category Dropdown -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mt-4\">\n                  <cide-ele-select \n                    label=\"Reservation Category\" \n                    formControlName=\"fees_student_category_id_sygms\"\n                    [options]=\"studentCategories()\"\n                    [loading]=\"studentCategoriesLoading()\"\n                    placeholder=\"Select reservation category\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                  <cide-ele-input formControlName=\"fees_is_active\" type=\"checkbox\" size=\"sm\">\n                  </cide-ele-input>\n                  <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\n                    <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this fee structure</span>\n                  </div>\n                </div>\n              </div>\n            }\n\n            @case ('items') {\n              <!-- Fee Items Section -->\n              <div class=\"tw-space-y-3\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                  <div>\n                    <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-m-0\">Fee Items</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Configure individual fee items for this structure</p>\n                  </div>\n                  <div class=\"tw-flex tw-items-center tw-gap-3\">\n                    <div class=\"tw-text-right\">\n                      <div class=\"tw-text-xs tw-text-gray-500\">Total Amount</div>\n                      <div class=\"tw-text-base tw-font-bold tw-text-green-600\">{{ formatCurrency(totalAmount()) }}</div>\n                    </div>\n                    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" leftIcon=\"add\"\n                      (click)=\"addFeeItem()\">\n                      Add Fee Item\n                    </button>\n                  </div>\n                </div>\n\n                <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-pr-2\">\n                  @for (item of feeItemsArray.controls; track $index; let itemIndex = $index) {\n                    <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm hover:tw-shadow-md tw-transition-shadow tw-p-3\"\n                      [formGroupName]=\"itemIndex\">\n                      \n                      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <div class=\"tw-flex tw-items-center tw-gap-2\">\n                          <div class=\"tw-bg-blue-100 tw-p-1.5 tw-rounded\">\n                            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">receipt</cide-ele-icon>\n                          </div>\n                          <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">Item #{{ itemIndex + 1 }}</h6>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                          @if (itemIndex > 0) {\n                            <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n                              (click)=\"moveItemUp(itemIndex)\" title=\"Move Up\">\n                              <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_upward</cide-ele-icon>\n                            </button>\n                          }\n                          @if (itemIndex < feeItemsArray.length - 1) {\n                            <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n                              (click)=\"moveItemDown(itemIndex)\" title=\"Move Down\">\n                              <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_downward</cide-ele-icon>\n                            </button>\n                          }\n                          <button cideEleButton type=\"button\" variant=\"danger\" size=\"xs\" leftIcon=\"delete\"\n                            (click)=\"removeFeeItem(itemIndex)\"\n                            [disabled]=\"feeItemsArray.length === 1\">\n                            Remove\n                          </button>\n                        </div>\n                      </div>\n\n                      <!-- Category, Code, Name in one row -->\n                      <div class=\"tw-grid\" style=\"grid-template-columns: 1fr 170px 1fr; gap: 1rem;\">\n                        <cide-ele-select \n                          label=\"Category\" \n                          formControlName=\"feesi_category_id_sygms\"\n                          [options]=\"feeCategoriesOptions()\"\n                          [loading]=\"feeCategoriesLoading()\"\n                          size=\"sm\"\n                          placeholder=\"Select Fee Category\">\n                        </cide-ele-select>\n\n                        <cide-ele-input \n                          label=\"Item Code\" \n                          formControlName=\"feesi_item_code\"\n                          size=\"sm\"\n                          placeholder=\"Auto-filled from category\">\n                        </cide-ele-input>\n\n                        <cide-ele-input \n                          label=\"Item Name\" \n                          formControlName=\"feesi_item_name\"\n                          size=\"sm\"\n                          placeholder=\"Auto-filled from category\">\n                        </cide-ele-input>\n                      </div>\n\n                      <div class=\"tw-mt-2\">\n                        <cide-ele-textarea \n                          label=\"Description\" \n                          formControlName=\"feesi_description\"\n                          rows=\"1\" \n                          size=\"sm\">\n                        </cide-ele-textarea>\n                      </div>\n\n                      <!-- Amount Section -->\n                      <div class=\"tw-mt-2\">\n                        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n                          <cide-ele-input \n                            [label]=\"item.get('feesi_is_amount_editable')?.value ? 'Base Amount (Default)' : 'Amount'\" \n                            formControlName=\"feesi_amount\"\n                            type=\"number\"\n                            size=\"sm\"\n                            [title]=\"item.get('feesi_is_amount_editable')?.value ? 'Default amount used when applying fee. Can be edited per student if editable.' : 'Fixed fee amount'\">\n                          </cide-ele-input>\n                        </div>\n\n                        <!-- Amount Editable Option -->\n                        <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                          <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2\">\n                            <cide-ele-input formControlName=\"feesi_is_amount_editable\" type=\"checkbox\" size=\"sm\">\n                            </cide-ele-input>\n                            <div class=\"tw-flex-1\">\n                              <span class=\"tw-text-xs tw-font-semibold tw-text-blue-900\">Allow Amount to be Edited</span>\n                              <p class=\"tw-text-xs tw-text-blue-700 tw-mt-0.5\">\n                                Enable this for fees that vary per student (e.g., Transport fee based on distance). \n                                When applying fees, you'll be asked to enter the amount within the specified range.\n                              </p>\n                            </div>\n                          </div>\n\n                          <!-- Min/Max Amount Fields (shown when editable is checked) -->\n                          @if (item.get('feesi_is_amount_editable')?.value) {\n                            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                              <cide-ele-input \n                                label=\"Minimum Amount\" \n                                formControlName=\"feesi_min_amount\"\n                                type=\"number\"\n                                size=\"sm\"\n                                placeholder=\"No minimum\"\n                                title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n                              </cide-ele-input>\n\n                              <cide-ele-input \n                                label=\"Maximum Amount\" \n                                formControlName=\"feesi_max_amount\"\n                                type=\"number\"\n                                size=\"sm\"\n                                placeholder=\"No maximum\"\n                                title=\"Maximum amount allowed when editing (leave empty for no maximum)\">\n                              </cide-ele-input>\n                            </div>\n                          }\n                        </div>\n                      </div>\n\n                      <!-- Additional Options -->\n                      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2 tw-mt-2\">\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_mandatory\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Mandatory</span>\n                        </div>\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_refundable\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Refundable</span>\n                        </div>\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_installment_allowed\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Installment Allowed</span>\n                        </div>\n                      </div>\n\n                      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                        @if (item.get('feesi_is_installment_allowed')?.value) {\n                          <cide-ele-input \n                            label=\"Installment Count\" \n                            formControlName=\"feesi_installment_count\"\n                            type=\"number\"\n                            size=\"sm\">\n                          </cide-ele-input>\n                        }\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_tax_applicable\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Tax Applicable</span>\n                        </div>\n                      </div>\n\n                      @if (item.get('feesi_tax_applicable')?.value) {\n                        <div class=\"tw-mt-2\">\n                          <cide-ele-input \n                            label=\"Tax Percentage\" \n                            formControlName=\"feesi_tax_percentage\"\n                            type=\"number\"\n                            size=\"sm\">\n                          </cide-ele-input>\n                        </div>\n                      }\n\n                      <!-- Installment Details Table -->\n                      <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                          <div class=\"tw-flex tw-items-center tw-gap-2\">\n                            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">schedule</cide-ele-icon>\n                            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">\n                              @if (item.get('feesi_is_installment_allowed')?.value) {\n                                Installment Details ({{ item.get('feesi_installment_count')?.value || 1 }} Installments)\n                              } @else {\n                                Payment Details (Single Payment)\n                              }\n                            </h6>\n                          </div>\n                        </div>\n\n                        <div formArrayName=\"installments\" class=\"tw-space-y-3\">\n                          @for (installment of getInstallmentsArray(itemIndex).controls; track $index; let installmentIndex = $index) {\n                            <div class=\"tw-bg-white tw-rounded tw-border tw-border-gray-300 tw-p-3\"\n                              [formGroupName]=\"installmentIndex\">\n                              \n                              <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                                  <div class=\"tw-bg-blue-100 tw-p-1 tw-rounded\">\n                                    <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">payments</cide-ele-icon>\n                                  </div>\n                                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">\n                                    @if (item.get('feesi_is_installment_allowed')?.value) {\n                                      Installment #{{ installment.get('installment_number')?.value }}\n                                    } @else {\n                                      Payment Details\n                                    }\n                                  </h6>\n                                </div>\n                                <div class=\"tw-text-sm tw-font-medium tw-text-green-600\">\n                                  Amount: {{ formatCurrency(installment.get('installment_amount')?.value || 0) }}\n                                </div>\n                              </div>\n\n                              <!-- Installment Amount Distribution -->\n                              @if (item.get('feesi_is_installment_allowed')?.value) {\n                                <div class=\"tw-p-2 tw-bg-yellow-50 tw-rounded tw-border tw-border-yellow-200 tw-mb-2\">\n                                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2\">\n                                    <cide-ele-select \n                                      label=\"Distribution Type\" \n                                      formControlName=\"distribution_type\"\n                                      [options]=\"distributionTypeOptions\"\n                                      size=\"sm\">\n                                    </cide-ele-select>\n\n                                    @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n                                      <cide-ele-input \n                                        label=\"Percentage (%)\" \n                                        formControlName=\"percentage\"\n                                        type=\"number\"\n                                        size=\"sm\"\n                                        title=\"Percentage of total amount for this installment\">\n                                      </cide-ele-input>\n                                      <div class=\"tw-flex tw-flex-col tw-items-end tw-justify-end tw-gap-1\">\n                                        @if (installmentIndex > 0) {\n                                          <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\n                                            Previous: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) }}%\n                                          </div>\n                                        }\n                                        <div class=\"tw-text-xs tw-text-gray-600\">\n                                          Calculated: {{ formatCurrency((item.get('feesi_amount')?.value || 0) * (installment.get('percentage')?.value || 0) / 100) }}\n                                        </div>\n                                        @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex > 0) {\n                                          <div class=\"tw-text-xs tw-font-semibold\" [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\" [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n                                            Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0) }}%\n                                          </div>\n                                        }\n                                      </div>\n                                    }\n\n                                    @if (installment.get('distribution_type')?.value === 'FIXED_AMOUNT') {\n                                      <cide-ele-input \n                                        label=\"Fixed Amount\" \n                                        formControlName=\"fixed_amount\"\n                                        type=\"number\"\n                                        size=\"sm\"\n                                        title=\"Fixed amount for this installment\">\n                                      </cide-ele-input>\n                                    }\n                                  </div>\n                                </div>\n                              }\n\n                              <!-- Due Date Fields -->\n                              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mb-2\">\n                                <cide-ele-input \n                                  label=\"Due Date Offset (Days from Assignment)\" \n                                  formControlName=\"due_date_offset_days\"\n                                  type=\"number\"\n                                  size=\"sm\"\n                                  title=\"Days from assignment date\">\n                                </cide-ele-input>\n\n                                <cide-ele-input \n                                  label=\"Due Date (Fixed Date - Alternative)\" \n                                  formControlName=\"due_date\"\n                                  type=\"date\"\n                                  size=\"sm\"\n                                  title=\"Use fixed date instead of offset\">\n                                </cide-ele-input>\n                              </div>\n\n                              <!-- Collection Window -->\n                              <div class=\"tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                                <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-2\">\n                                  <cide-ele-icon class=\"tw-text-blue-600 tw-w-3 tw-h-3\">schedule</cide-ele-icon>\n                                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-m-0\">Collection Window</h6>\n                                </div>\n                                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n                                  <cide-ele-input \n                                    label=\"Start Offset (Days from Assignment)\" \n                                    formControlName=\"collection_start_offset_days\"\n                                    type=\"number\"\n                                    size=\"sm\"\n                                    title=\"Days from assignment date when collection can start\">\n                                  </cide-ele-input>\n\n                                  <cide-ele-input \n                                    label=\"End Offset (Days from Assignment)\" \n                                    formControlName=\"collection_end_offset_days\"\n                                    type=\"number\"\n                                    size=\"sm\"\n                                    title=\"Days from assignment date when collection window ends\">\n                                  </cide-ele-input>\n                                </div>\n                                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                                  <cide-ele-input \n                                    label=\"Start Date (Fixed Date - Alternative)\" \n                                    formControlName=\"collection_start_date\"\n                                    type=\"date\"\n                                    size=\"sm\"\n                                    title=\"Use fixed date instead of offset\">\n                                  </cide-ele-input>\n\n                                  <cide-ele-input \n                                    label=\"End Date (Fixed Date - Alternative)\" \n                                    formControlName=\"collection_end_date\"\n                                    type=\"date\"\n                                    size=\"sm\"\n                                    title=\"Use fixed date instead of offset\">\n                                  </cide-ele-input>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n\n                @if (feeItemsArray.length === 0) {\n                  <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                    <div class=\"tw-bg-white tw-p-3 tw-rounded-full tw-w-12 tw-h-12 tw-mx-auto tw-mb-3 tw-flex tw-items-center tw-justify-center\">\n                      <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400\">receipt</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-1\">No Fee Items Yet</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500\">Click \"Add Fee Item\" to start adding fee items to this structure.</p>\n                  </div>\n                }\n              </div>\n            }\n          }\n          \n          <!-- Form Validation Errors -->\n          @if (!isViewMode()) {\n            <!-- 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 continue.\n                  </p>\n                </div>\n              }\n              \n              <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n                [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" \n                [loading]=\"submitting()\" \n                leftIcon=\"save\">\n                {{ isEditMode() ? 'Update Fee Structure' : 'Create Fee Structure' }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n  </div>\n</cide-lyt-shared-wrapper>\n\n" }]
+                    ], template: "<!-- Fee Structure Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n\n  <!-- Back Button in Breadcrumb Area (View Mode Only) -->\n  @if (isViewMode()) {\n  <div breadcrumb-actions>\n    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"arrow_back\">\n      Back to List\n    </button>\n  </div>\n  }\n\n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"feeStructureForm\"\n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n      <!-- Tab Navigation -->\n      <div class=\"tw-table-row tw-h-0\">\n        <div class=\"tw-table-cell tw-w-full tw-px-2 tw-py-0\">\n          <cide-ele-tab [tabs]=\"feeStructureTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\n            (tabChange)=\"onTabChange($event)\">\n          </cide-ele-tab>\n        </div>\n      </div>\n\n      <!-- Tab Content -->\n      <div class=\"tw-table-row\">\n        <div class=\"tw-table-cell tw-w-full tw-px-4 tw-py-4\">\n          <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n            @switch (activeTab()) {\n\n            @case ('basic') {\n            <!-- Basic Information -->\n            <div class=\"tw-space-y-4\">\n              <!-- First Row: Fee Code (small), Fee Name - 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>" }]
         }], ctorParameters: () => [] });
 
 var feeStructureCreate_component = /*#__PURE__*/Object.freeze({
@@ -2484,10 +2473,10 @@ class CideFeeFeeAssignmentService {
         ]);
         return this.http.patch(url, { feeas_id: assignmentId });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFeeFeeAssignmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFeeFeeAssignmentService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideFeeFeeAssignmentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideFeeFeeAssignmentService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFeeFeeAssignmentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideFeeFeeAssignmentService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -2502,10 +2491,13 @@ class FeeAssignmentListComponent {
     notificationService = inject(NotificationService);
     academicYearService = inject(ACADEMIC_YEAR_SERVICE_TOKEN);
     classProgramService = inject(CLASS_PROGRAM_MASTER_SERVICE_TOKEN);
+    programTermSectionService = inject(PROGRAM_TERM_SECTION_SERVICE_TOKEN);
     feeAssignmentService = inject(CideFeeFeeAssignmentService);
     rightsService = inject(RightsService);
+    appStateService = inject(AppStateService);
     studentDetailsRendererTemplate = viewChild.required('studentDetailsRendererTemplate');
     amountRendererTemplate = viewChild.required('amountRendererTemplate');
+    dateRendererTemplate = viewChild.required('dateRendererTemplate');
     statusRendererTemplate = viewChild.required('statusRendererTemplate');
     actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
     // Breadcrumb data for shared wrapper
@@ -2536,15 +2528,6 @@ class FeeAssignmentListComponent {
     gridConfig = computed(() => ({
         id: 'fee-assignment-list-grid',
         columns: [
-            {
-                key: 'student_id',
-                header: 'Student ID',
-                type: 'text',
-                width: '120px',
-                truncate: true,
-                align: 'left',
-                sortable: true
-            },
             {
                 key: 'student',
                 header: 'Student Details',
@@ -2577,10 +2560,11 @@ class FeeAssignmentListComponent {
             {
                 key: 'feeas_due_date',
                 header: 'Due Date',
-                type: 'date',
+                type: 'custom',
                 width: '120px',
                 truncate: false,
                 align: 'left',
+                renderer: 'dateRenderer',
                 sortable: true
             },
             {
@@ -2671,8 +2655,15 @@ class FeeAssignmentListComponent {
         // Cleanup if needed
     }
     loadDropdownOptions() {
+        const entityId = this.appStateService.getActiveEntityValue()?._id;
         // Load academic years
-        this.academicYearService.getAcademicYearList({ pageIndex: 1, pageSize: 100, pagination: false }).subscribe({
+        this.academicYearService.getAcademicYearList({
+            pageIndex: 1,
+            pageSize: 100,
+            pagination: false,
+            // Assuming academic year service might accept entity filter if updated, but keeping standard for now
+            // If backend supports filtering ACAYR by entity, add it here.
+        }).subscribe({
             next: (response) => {
                 if (response?.success && response.data) {
                     this.academicYearOptions.set(response.data.map(ay => ({
@@ -2682,8 +2673,12 @@ class FeeAssignmentListComponent {
                 }
             }
         });
-        // Load class programs
-        this.classProgramService.searchClassProgramMasters({ pagination: false }).subscribe({
+        // Load class programs with Entity Context
+        const classPayload = { pagination: false };
+        if (entityId) {
+            classPayload.acacpm_entity_id_syen = entityId;
+        }
+        this.classProgramService.searchClassProgramMasters(classPayload).subscribe({
             next: (response) => {
                 if (response?.success && response.data) {
                     this.classOptions.set(response.data.map(cp => ({
@@ -2697,12 +2692,17 @@ class FeeAssignmentListComponent {
     loadFeeAssignments() {
         this.loading.set(true);
         this.error.set(null);
+        const entityId = this.appStateService.getActiveEntityValue()?._id;
         const payload = {
             pagination: true,
             pageIndex: this.currentPage(),
             pageSize: this.pageSize(),
             query: this.searchQuery() || '',
-            feeas_status: this.selectedStatusFilter() || undefined
+            feeas_payment_status: this.selectedStatusFilter() || undefined,
+            feeas_academic_year_id_acayr: this.selectedAcademicYearFilter() || undefined,
+            feeas_class_program_id_acacpm: this.selectedClassFilter() || undefined,
+            feeas_section_id_acapts: this.selectedSectionFilter() || undefined,
+            feeas_entity_id_syen: entityId || undefined
         };
         this.feeAssignmentService.getFeeAssignmentList(payload).subscribe({
             next: (response) => {
@@ -2710,17 +2710,23 @@ class FeeAssignmentListComponent {
                     // Transform API response to component format
                     this.feeAssignments.set(response.data.map((item) => ({
                         _id: item._id,
-                        feeas_student_id: item.feeas_student_id,
-                        student_name: item.student_name || item.feeas_student_id?.name || 'N/A',
-                        student_id: item.student_id || item.feeas_student_id?._id || '',
-                        class: item.class || item.feeas_student_id?.class || 'N/A',
-                        section: item.section || item.feeas_student_id?.section || 'N/A',
-                        fee_structure_name: item.fee_structure_name || item.feeas_structure_id_fees?.fees_structure_name || 'N/A',
-                        feeas_amount_original: item.feeas_amount_original || 0,
-                        feeas_amount_paid: item.feeas_amount_paid || 0,
-                        feeas_amount_remaining: item.feeas_amount_remaining || item.feeas_final_amount || 0,
+                        feeas_student_id_auth: item.feeas_student_id_auth,
+                        student_name: item.student_name ||
+                            (item.feeas_admission_id_admap ?
+                                [item.feeas_admission_id_admap.admap_first_name, item.feeas_admission_id_admap.admap_middle_name, item.feeas_admission_id_admap.admap_last_name]
+                                    .filter(n => !!n).join(' ') : null) ||
+                            item.feeas_student_id_auth?.name ||
+                            'N/A',
+                        student_id: (typeof item.feeas_student_id_auth === 'string' ? item.feeas_student_id_auth : item.feeas_student_id_auth?._id) || '',
+                        class: this.formatClassDetails(item),
+                        section: item.section || item.feeas_section_id_acapts?.acapts_name || 'N/A',
+                        fee_structure_name: item.fee_structure_name || item.feeas_fee_structure_id_feest?.fees_structure_name || item.feeas_fee_name || 'N/A',
+                        feeas_amount_original: item.feeas_original_amount || item.feeas_total_amount || 0,
+                        feeas_amount_discount: item.feeas_discount_amount || 0,
+                        feeas_amount_paid: item.feeas_paid_amount || 0,
+                        feeas_amount_remaining: item.feeas_outstanding_amount !== undefined ? item.feeas_outstanding_amount : ((item.feeas_total_amount || 0) - (item.feeas_paid_amount || 0)),
                         feeas_due_date: item.feeas_due_date ? new Date(item.feeas_due_date) : undefined,
-                        feeas_status: item.feeas_status || 'PENDING'
+                        feeas_status: item.feeas_status || item.feeas_payment_status || 'PENDING'
                     })));
                     this.totalItems.set(response.total || response.data.length);
                     this.totalPages.set(Math.ceil((response.total || response.data.length) / this.pageSize()));
@@ -2747,6 +2753,7 @@ class FeeAssignmentListComponent {
     templateRenderers = computed(() => ({
         studentDetailsRenderer: this.studentDetailsRendererTemplate(),
         amountRenderer: this.amountRendererTemplate(),
+        dateRenderer: this.dateRendererTemplate(),
         statusRenderer: this.statusRendererTemplate(),
         actionsDropdownRenderer: this.actionsDropdownRendererTemplate()
     }), ...(ngDevMode ? [{ debugName: "templateRenderers" }] : []));
@@ -2798,6 +2805,42 @@ class FeeAssignmentListComponent {
         this.selectedClassFilter.set(String(value || ''));
         this.currentPage.set(1);
         this.loadFeeAssignments();
+        // Load sections when class filter changes
+        this.selectedSectionFilter.set(''); // Reset section filter
+        this.loadSections();
+    }
+    loadSections() {
+        const classProgramId = this.selectedClassFilter();
+        const entityId = this.appStateService.getActiveEntityValue()?._id;
+        if (!classProgramId) {
+            this.sectionOptions.set([]);
+            return;
+        }
+        const payload = {
+            pagination: false,
+            acapts_program_id_acacpm: classProgramId,
+            acapts_is_active: true
+        };
+        if (entityId) {
+            payload.acapts_entity_id_syen = entityId;
+        }
+        this.programTermSectionService.getProgramTermSectionList(payload).subscribe({
+            next: (response) => {
+                if (response?.success && response.data) {
+                    this.sectionOptions.set(response.data.map(sec => ({
+                        value: sec._id || '',
+                        label: sec.acapts_name || ''
+                    })));
+                }
+                else {
+                    this.sectionOptions.set([]);
+                }
+            },
+            error: (err) => {
+                console.error('Error loading sections:', err);
+                this.sectionOptions.set([]);
+            }
+        });
     }
     onSectionFilterChange(value) {
         this.selectedSectionFilter.set(String(value || ''));
@@ -2966,10 +3009,27 @@ class FeeAssignmentListComponent {
     getStatusText(assignment) {
         return assignment.feeas_status || 'Unknown';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", 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: "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>\n    <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"navigateToAssign()\">\n      Assign Fees\n    </button>\n    <button cideEleButton variant=\"secondary\" size=\"sm\" leftIcon=\"group_add\" (click)=\"bulkAssign()\">\n      Bulk Assignment\n    </button>\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 \n          label=\"Academic Year\" \n          [options]=\"academicYearOptions()\"\n          [ngModel]=\"selectedAcademicYearFilter()\"\n          (ngModelChange)=\"onAcademicYearFilterChange($event)\"\n          size=\"sm\"\n          placeholder=\"All Academic Years\">\n        </cide-ele-select>\n\n        <cide-ele-select \n          label=\"Class/Program\" \n          [options]=\"classOptions()\"\n          [ngModel]=\"selectedClassFilter()\"\n          (ngModelChange)=\"onClassFilterChange($event)\"\n          size=\"sm\"\n          placeholder=\"All Classes\">\n        </cide-ele-select>\n\n        <cide-ele-select \n          label=\"Section\" \n          [options]=\"sectionOptions()\"\n          [ngModel]=\"selectedSectionFilter()\"\n          (ngModelChange)=\"onSectionFilterChange($event)\"\n          size=\"sm\"\n          placeholder=\"All Sections\">\n        </cide-ele-select>\n\n        <cide-ele-select \n          label=\"Status\" \n          [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          ]\"\n          [ngModel]=\"selectedStatusFilter()\"\n          (ngModelChange)=\"onStatusFilterChange($event)\"\n          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-font-medium tw-text-gray-900\">{{ row.student_name || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.class || '' }} / {{ row.section || '' }}</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    <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\" [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 #statusRendererTemplate let-row=\"row\">\n  <span 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_status === 'PAID' ? 'check_circle' : \n         row.feeas_status === 'PARTIALLY_PAID' ? 'schedule' : \n         row.feeas_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 \n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n", 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"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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"] }] });
+    formatClassDetails(item) {
+        if (item.feeas_admission_id_admap) {
+            const admission = item.feeas_admission_id_admap;
+            const program = admission.admap_class_program_id_acacpm?.acacpm_alise_title || '';
+            const term = admission.admap_class_program_term_id_acapt?.acapt_name || '';
+            const branch = admission.admap_class_program_branch_id_acabrn?.acabrn_name || '';
+            let details = program;
+            if (term)
+                details += ` (${term})`;
+            if (branch)
+                details += ` - ${branch}`;
+            if (details)
+                return details;
+        }
+        // Fallback
+        return item.class || item.feeas_class_program_id_acacpm?.acacpm_alise_title || 'N/A';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeAssignmentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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    <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"navigateToAssign()\">\n      Assign Fees\n    </button>\n    <button cideEleButton variant=\"secondary\" size=\"sm\" leftIcon=\"group_add\" (click)=\"bulkAssign()\">\n      Bulk Assignment\n    </button>\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    <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_status === 'PAID' ? 'check_circle' :\n      row.feeas_status === 'PARTIALLY_PAID' ? 'schedule' :\n      row.feeas_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"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeAssignmentListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-fee-assignment-list', standalone: true, imports: [
                         CommonModule,
@@ -2980,14 +3040,659 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleDropdownComponent,
                         CideSelectComponent,
                         CideLytSharedWrapperComponent
-                    ], 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>\n    <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"navigateToAssign()\">\n      Assign Fees\n    </button>\n    <button cideEleButton variant=\"secondary\" size=\"sm\" leftIcon=\"group_add\" (click)=\"bulkAssign()\">\n      Bulk Assignment\n    </button>\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 \n          label=\"Academic Year\" \n          [options]=\"academicYearOptions()\"\n          [ngModel]=\"selectedAcademicYearFilter()\"\n          (ngModelChange)=\"onAcademicYearFilterChange($event)\"\n          size=\"sm\"\n          placeholder=\"All Academic Years\">\n        </cide-ele-select>\n\n        <cide-ele-select \n          label=\"Class/Program\" \n          [options]=\"classOptions()\"\n          [ngModel]=\"selectedClassFilter()\"\n          (ngModelChange)=\"onClassFilterChange($event)\"\n          size=\"sm\"\n          placeholder=\"All Classes\">\n        </cide-ele-select>\n\n        <cide-ele-select \n          label=\"Section\" \n          [options]=\"sectionOptions()\"\n          [ngModel]=\"selectedSectionFilter()\"\n          (ngModelChange)=\"onSectionFilterChange($event)\"\n          size=\"sm\"\n          placeholder=\"All Sections\">\n        </cide-ele-select>\n\n        <cide-ele-select \n          label=\"Status\" \n          [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          ]\"\n          [ngModel]=\"selectedStatusFilter()\"\n          (ngModelChange)=\"onStatusFilterChange($event)\"\n          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-font-medium tw-text-gray-900\">{{ row.student_name || 'N/A' }}</div>\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.class || '' }} / {{ row.section || '' }}</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    <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\" [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 #statusRendererTemplate let-row=\"row\">\n  <span 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_status === 'PAID' ? 'check_circle' : \n         row.feeas_status === 'PARTIALLY_PAID' ? 'schedule' : \n         row.feeas_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 \n    [items]=\"getActionDropdownItems(row)\"\n    [config]=\"getDropdownConfig()\"\n    (itemClick)=\"onDropdownItemClick($event, row)\">\n  </cide-ele-dropdown>\n</ng-template>\n\n", 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"] }]
-        }] });
+                    ], 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    <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"navigateToAssign()\">\n      Assign Fees\n    </button>\n    <button cideEleButton variant=\"secondary\" size=\"sm\" leftIcon=\"group_add\" (click)=\"bulkAssign()\">\n      Bulk Assignment\n    </button>\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    <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_status === 'PAID' ? 'check_circle' :\n      row.feeas_status === 'PARTIALLY_PAID' ? 'schedule' :\n      row.feeas_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"] }]
+        }], 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 }] }] } });
 
 var feeAssignmentList_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
   FeeAssignmentListComponent: FeeAssignmentListComponent
 });
 
+class FeeApplicableFeesComponent {
+    destroyRef = inject(DestroyRef);
+    fb = inject(FormBuilder);
+    feeStructureService = inject(CideFeeFeeStructureService);
+    assignmentService = inject(CideFeeFeeAssignmentService);
+    notificationService = inject(NotificationService);
+    floatingContainerService = inject(CideEleFloatingContainerService);
+    currencyPipe = inject(CurrencyPipe);
+    // Inputs as Signals
+    entityId = input(null, ...(ngDevMode ? [{ debugName: "entityId" }] : []));
+    academicYearId = input('', ...(ngDevMode ? [{ debugName: "academicYearId" }] : []));
+    classProgramId = input('', ...(ngDevMode ? [{ debugName: "classProgramId" }] : []));
+    termId = input('', ...(ngDevMode ? [{ debugName: "termId" }] : []));
+    branchId = input(null, ...(ngDevMode ? [{ debugName: "branchId" }] : []));
+    sectionId = input(null, ...(ngDevMode ? [{ debugName: "sectionId" }] : []));
+    studentId = input(null, ...(ngDevMode ? [{ debugName: "studentId" }] : []));
+    // Outputs as Signals
+    feesCalculated = output();
+    // State
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    applicableFees = signal([], ...(ngDevMode ? [{ debugName: "applicableFees" }] : []));
+    existingAssignments = signal([], ...(ngDevMode ? [{ debugName: "existingAssignments" }] : []));
+    feeStructureGroups = signal([], ...(ngDevMode ? [{ debugName: "feeStructureGroups" }] : []));
+    selectedFeeStructureId = signal(null, ...(ngDevMode ? [{ debugName: "selectedFeeStructureId" }] : []));
+    feeDiscountScholarshipData = signal(new Map(), ...(ngDevMode ? [{ debugName: "feeDiscountScholarshipData" }] : []));
+    viewingFeeDetails = signal(null, ...(ngDevMode ? [{ debugName: "viewingFeeDetails" }] : []));
+    onStructureChange(value) {
+        this.selectedFeeStructureId.set(value ? String(value) : null);
+    }
+    constructor() {
+        // Auto emit when calculations change
+        effect(() => {
+            const fees = this.getSelectedFeeStructureFees();
+            if (fees.length > 0) {
+                this.emitFeeData();
+            }
+            else {
+                // Emit empty if no fees
+                this.feesCalculated.emit({
+                    fees: [],
+                    totalOriginal: 0,
+                    totalDiscount: 0,
+                    totalScholarship: 0,
+                    totalFinal: 0,
+                    structureId: this.selectedFeeStructureId()
+                });
+            }
+        });
+    }
+    ngOnInit() {
+        this.registerFloatingContainerComponents();
+    }
+    async registerFloatingContainerComponents() {
+        // Register fee discount form component
+        if (!this.floatingContainerService.isComponentRegistered('fee-discount-form')) {
+            try {
+                const module = await import('./cloud-ide-fees-fee-discount-form.component-R_yZNKM-.mjs');
+                this.floatingContainerService.registerComponent('fee-discount-form', module.FeeDiscountFormComponent);
+            }
+            catch (error) {
+                console.error('❌ Failed to register fee discount form component:', error);
+            }
+        }
+        // Register fee scholarship form component
+        if (!this.floatingContainerService.isComponentRegistered('fee-scholarship-form')) {
+            try {
+                const module = await import('./cloud-ide-fees-fee-scholarship-form.component-C2eJrtQT.mjs');
+                this.floatingContainerService.registerComponent('fee-scholarship-form', module.FeeScholarshipFormComponent);
+            }
+            catch (error) {
+                console.error('❌ Failed to register fee scholarship form component:', error);
+            }
+        }
+        // Register fee details viewer component (using wrapper to avoid direct import circular dependency issues if any)
+        if (!this.floatingContainerService.isComponentRegistered('fee-details-viewer')) {
+            try {
+                const module = await import('cloud-ide-shared');
+                if (module.FeeDetailsViewerWrapperComponent) {
+                    this.floatingContainerService.registerComponent('fee-details-viewer', module.FeeDetailsViewerWrapperComponent);
+                }
+            }
+            catch (error) {
+                console.error('❌ Failed to register fee details viewer component:', error);
+            }
+        }
+    }
+    // Initial Load / Reactivity Effect
+    triggerLoadEffect = effect(() => {
+        const cpId = this.classProgramId();
+        const termId = this.termId();
+        const entityId = this.entityId();
+        const ayId = this.academicYearId();
+        const branchId = this.branchId();
+        const sectionId = this.sectionId();
+        console.log(cpId, "g", termId, "d", entityId, ayId, branchId, sectionId, "signa rights");
+        // Only trigger if minimal required fields are present
+        if (cpId && entityId && ayId) {
+            this.loadApplicableFees();
+        }
+        else {
+            // Should we clear if invalid? Or just keep? 
+            // Usually clear to avoid stale data if filters are cleared.
+            this.applicableFees.set([]);
+        }
+    }, ...(ngDevMode ? [{ debugName: "triggerLoadEffect", allowSignalWrites: true }] : [{ allowSignalWrites: true }]));
+    loadApplicableFees() {
+        if (!this.classProgramId() || !this.entityId() || !this.academicYearId()) {
+            // Missing required fields
+            this.applicableFees.set([]);
+            return;
+        }
+        this.loading.set(true);
+        const payloadData = {
+            fees_class_program_id_acacpm: this.classProgramId(),
+            fees_class_program_term_id_acapt: this.termId(),
+            fees_entity_id_syen: this.entityId() || undefined,
+            fees_academic_year_id_acayr: this.academicYearId(),
+            fees_is_active: true,
+            pagination: false
+        };
+        if (this.branchId()) {
+            payloadData.fees_class_program_branch_id_acabrn = this.branchId() || undefined;
+        }
+        if (this.sectionId()) {
+            payloadData.fees_program_term_section_id_acapts = this.sectionId() || undefined;
+        }
+        const payload = new MFeeStructure(payloadData);
+        // Load assignments in parallel if studentId exists
+        if (this.studentId()) {
+            this.loadExistingAssignments();
+        }
+        this.feeStructureService.getFeeStructureList(payload)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response?.success && response?.data) {
+                    const feeStructures = Array.isArray(response.data) ? response.data : [];
+                    if (feeStructures.length === 0) {
+                        this.applicableFees.set([]);
+                        this.loading.set(false);
+                        return;
+                    }
+                    const feeItemRequests = feeStructures.map(structure => this.feeStructureService.getFeeStructureById({ fees_id: structure._id || '' })
+                        .pipe(takeUntilDestroyed(this.destroyRef)));
+                    forkJoin(feeItemRequests).subscribe({
+                        next: (responses) => {
+                            const allFeeItems = [];
+                            responses.forEach((itemResponse, index) => {
+                                if (itemResponse?.success && itemResponse?.data) {
+                                    const structure = feeStructures[index];
+                                    const isFeeStructureByIdResponse = (data) => {
+                                        return data && 'fee_structure' in data;
+                                    };
+                                    let feeItems = [];
+                                    if (isFeeStructureByIdResponse(itemResponse.data)) {
+                                        feeItems = itemResponse.data.fee_structure_items || [];
+                                    }
+                                    feeItems.forEach(item => {
+                                        if (item.feesi_is_active !== false) {
+                                            // Extract category name
+                                            let categoryName = 'N/A';
+                                            if (item.feesi_category_id_sygms) {
+                                                if (typeof item.feesi_category_id_sygms === 'object' && item.feesi_category_id_sygms !== null) {
+                                                    categoryName = item.feesi_category_id_sygms?.sygms_title ||
+                                                        item.feesi_category_id_sygms?.sygms_name ||
+                                                        item.feesi_item_code ||
+                                                        item.feesi_item_name ||
+                                                        'N/A';
+                                                }
+                                                else if (typeof item.feesi_category_id_sygms === 'string') {
+                                                    categoryName = item.feesi_item_code || item.feesi_item_name || 'N/A';
+                                                }
+                                            }
+                                            else {
+                                                categoryName = item.feesi_item_code || item.feesi_item_name || 'N/A';
+                                            }
+                                            // Create deep copy of item data
+                                            const feeItemDataCopy = {
+                                                ...item,
+                                                // Ensure needed fields
+                                                feesi_category_id_sygms: item.feesi_category_id_sygms,
+                                                feesi_item_name: item.feesi_item_name || '',
+                                                feesi_item_code: item.feesi_item_code || '',
+                                                feesi_amount: item.feesi_amount || 0
+                                            };
+                                            const feeItem = {
+                                                ...structure,
+                                                _id: item._id || '',
+                                                fees_structure_id: structure._id,
+                                                fees_structure_name: structure.fees_structure_name || 'N/A',
+                                                fees_structure_code: structure.fees_structure_code || '',
+                                                fees_category_name: categoryName,
+                                                fees_amount: item.feesi_amount || 0,
+                                                fees_total_amount: item.feesi_amount || 0,
+                                                _feeItemData: feeItemDataCopy
+                                            };
+                                            allFeeItems.push(feeItem);
+                                        }
+                                    });
+                                }
+                            });
+                            this.applicableFees.set(allFeeItems);
+                            this.regroupFees(allFeeItems);
+                            // Auto-select first structure if not set
+                            const groups = this.feeStructureGroups();
+                            if (groups.length > 0 && !this.selectedFeeStructureId()) {
+                                this.selectedFeeStructureId.set(groups[0].structure_id);
+                            }
+                            this.loading.set(false);
+                            this.updateAssignmentStatus();
+                        },
+                        error: (err) => {
+                            console.error('Error loading fee items:', err);
+                            this.notificationService.error('Failed to load fee details.');
+                            this.loading.set(false);
+                        }
+                    });
+                }
+                else {
+                    this.applicableFees.set([]);
+                    this.loading.set(false);
+                }
+            },
+            error: (err) => {
+                console.error('Error loading fee structures:', err);
+                this.notificationService.error('Failed to load fee structures.');
+                this.loading.set(false);
+            }
+        });
+    }
+    loadExistingAssignments() {
+        const payload = {
+            feeas_student_id_auth: this.studentId() || undefined,
+            fees_academic_year_id_acayr: this.academicYearId(), // inherited from MFeeStructure
+            pagination: false
+        };
+        this.assignmentService.getFeeAssignmentList(payload)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (res) => {
+                if (res.success && res.data) {
+                    this.existingAssignments.set(res.data);
+                    this.updateAssignmentStatus();
+                }
+            }
+        });
+    }
+    updateAssignmentStatus() {
+        const fees = this.applicableFees();
+        const assignments = this.existingAssignments();
+        if (fees.length === 0)
+            return; // No fees to mark, but assignments might exist
+        // Note: Even if assignments is empty, we should run this to clear is_assigned status if it was previously set
+        const updatedFees = fees.map(fee => {
+            const isAssigned = assignments.some(a => {
+                const assignmentItemId = (typeof a.feeas_fee_structure_item_id_feesi === 'object' && a.feeas_fee_structure_item_id_feesi !== null)
+                    ? a.feeas_fee_structure_item_id_feesi._id
+                    : a.feeas_fee_structure_item_id_feesi;
+                return assignmentItemId === fee._id;
+            });
+            return { ...fee, is_assigned: isAssigned };
+        });
+        // Update checks by value, if different set signal
+        // Simple optimization: check if any status changed. For now just set.
+        this.applicableFees.set(updatedFees);
+        this.regroupFees(updatedFees);
+    }
+    regroupFees(allFeeItems) {
+        const groupedFees = new Map();
+        allFeeItems.forEach((fee) => {
+            const structureId = fee.fees_structure_id || 'unknown';
+            if (!groupedFees.has(structureId)) {
+                groupedFees.set(structureId, {
+                    structure_id: structureId,
+                    structure_name: fee.fees_structure_name || 'Unknown Structure',
+                    structure_code: fee.fees_structure_code,
+                    fees: [],
+                    total_amount: 0
+                });
+            }
+            const group = groupedFees.get(structureId);
+            group.fees.push(fee);
+            group.total_amount += fee.fees_amount || 0;
+        });
+        const groups = Array.from(groupedFees.values());
+        this.feeStructureGroups.set(groups);
+    }
+    getFeeStructureOptions() {
+        return this.feeStructureGroups().map(group => ({
+            value: group.structure_id,
+            label: `${group.structure_name}${group.structure_code ? ' (' + group.structure_code + ')' : ''} - Total: ${this.currencyPipe.transform(group.total_amount, 'INR')}`
+        }));
+    }
+    getSelectedFeeStructureFees() {
+        const selectedId = this.selectedFeeStructureId();
+        if (!selectedId)
+            return [];
+        // Return fees filtered by selected structure
+        const fees = this.applicableFees().filter(f => f.fees_structure_id === selectedId);
+        return fees;
+    }
+    getFeeId(fee) {
+        return fee._id || '';
+    }
+    // --- Calculations ---
+    getDiscountData(feeId) {
+        return this.feeDiscountScholarshipData().get(feeId)?.discount;
+    }
+    getScholarshipData(feeId) {
+        return this.feeDiscountScholarshipData().get(feeId)?.scholarship;
+    }
+    calculateFinalAmount(fee) {
+        const feeId = this.getFeeId(fee);
+        const originalAmount = fee.fees_amount || 0;
+        const discountData = this.getDiscountData(feeId);
+        const scholarshipData = this.getScholarshipData(feeId);
+        let discountAmount = 0;
+        if (discountData) {
+            discountAmount = discountData.discount_amount;
+        }
+        let scholarshipAmount = 0;
+        if (scholarshipData) {
+            scholarshipAmount = scholarshipData.scholarship_amount;
+        }
+        return Math.max(0, originalAmount - discountAmount - scholarshipAmount);
+    }
+    // Totals for current selection
+    totalOriginalAmount = computed(() => {
+        return this.getSelectedFeeStructureFees().reduce((sum, fee) => sum + (fee.fees_amount || 0), 0);
+    }, ...(ngDevMode ? [{ debugName: "totalOriginalAmount" }] : []));
+    totalDiscount = computed(() => {
+        return this.getSelectedFeeStructureFees().reduce((sum, fee) => {
+            const discount = this.getDiscountData(this.getFeeId(fee));
+            return sum + (discount?.discount_amount || 0);
+        }, 0);
+    }, ...(ngDevMode ? [{ debugName: "totalDiscount" }] : []));
+    totalScholarship = computed(() => {
+        return this.getSelectedFeeStructureFees().reduce((sum, fee) => {
+            const scholarship = this.getScholarshipData(this.getFeeId(fee));
+            return sum + (scholarship?.scholarship_amount || 0);
+        }, 0);
+    }, ...(ngDevMode ? [{ debugName: "totalScholarship" }] : []));
+    totalFinalAmount = computed(() => {
+        return this.getSelectedFeeStructureFees().reduce((sum, fee) => sum + this.calculateFinalAmount(fee), 0);
+    }, ...(ngDevMode ? [{ debugName: "totalFinalAmount" }] : []));
+    // --- Actions ---
+    async openDiscountManagement(feeId) {
+        const fee = this.applicableFees().find(f => this.getFeeId(f) === feeId);
+        if (!fee)
+            return;
+        // Ensure component is registered
+        if (!this.floatingContainerService.isComponentRegistered('fee-discount-form')) {
+            await this.registerFloatingContainerComponents();
+        }
+        const currentDiscount = this.getDiscountData(feeId);
+        const containerId = this.floatingContainerService.show({
+            id: `discount-form-${feeId}-${Date.now()}`,
+            title: currentDiscount ? 'Edit Discount' : 'Add Discount',
+            icon: 'local_offer',
+            width: '500px',
+            height: '600px',
+            minWidth: '400px',
+            minHeight: '400px',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            resizable: true,
+            draggable: true,
+            closable: true,
+            minimizable: true,
+            maximizable: true,
+            backdrop: false,
+            componentId: 'fee-discount-form',
+            componentConfig: {
+                inputs: {
+                    feeId: signal(feeId),
+                    feeName: signal(fee.fees_structure_name || 'Fee'),
+                    feeAmount: signal(fee.fees_amount || 0),
+                    existingDiscount: signal(currentDiscount),
+                    discountReasonOptions: signal(this.getDiscountReasonOptions()) // We need to check if this method exists or needs adding
+                },
+                outputs: {
+                    saved: (result) => {
+                        this.applyDiscount(feeId, result, fee.fees_amount || 0);
+                        this.floatingContainerService.hide(containerId);
+                    },
+                    cancelled: () => {
+                        this.floatingContainerService.hide(containerId);
+                    }
+                }
+            }
+        });
+        this.floatingContainerService.bringToFront(containerId);
+    }
+    removeDiscount(feeId) {
+        this.updateFeeData(feeId, { discount: undefined });
+    }
+    async openScholarshipManagement(feeId) {
+        const fee = this.applicableFees().find(f => this.getFeeId(f) === feeId);
+        if (!fee)
+            return;
+        // Ensure component is registered
+        if (!this.floatingContainerService.isComponentRegistered('fee-scholarship-form')) {
+            await this.registerFloatingContainerComponents();
+        }
+        const currentScholarship = this.getScholarshipData(feeId);
+        const containerId = this.floatingContainerService.show({
+            id: `scholarship-form-${feeId}-${Date.now()}`,
+            title: currentScholarship ? 'Edit Scholarship' : 'Add Scholarship',
+            icon: 'school',
+            width: '500px',
+            height: '650px',
+            minWidth: '400px',
+            minHeight: '450px',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            resizable: true,
+            draggable: true,
+            closable: true,
+            minimizable: true,
+            maximizable: true,
+            backdrop: false,
+            componentId: 'fee-scholarship-form',
+            componentConfig: {
+                inputs: {
+                    feeId: signal(feeId),
+                    feeName: signal(fee.fees_structure_name || 'Fee'),
+                    feeAmount: signal(fee.fees_amount || 0),
+                    existingScholarship: signal(currentScholarship),
+                    scholarshipTypeOptions: signal(this.getScholarshipTypeOptions()) // We need to check if this method exists or needs adding
+                },
+                outputs: {
+                    saved: (result) => {
+                        this.applyScholarship(feeId, result, fee.fees_amount || 0);
+                        this.floatingContainerService.hide(containerId);
+                    },
+                    cancelled: () => {
+                        this.floatingContainerService.hide(containerId);
+                    }
+                }
+            }
+        });
+        this.floatingContainerService.bringToFront(containerId);
+    }
+    removeScholarship(feeId) {
+        this.updateFeeData(feeId, { scholarship: undefined });
+    }
+    applyDiscount(feeId, data, feeAmount) {
+        let discountAmount = 0;
+        if (data.discount_type === 'PERCENTAGE') {
+            discountAmount = (feeAmount * data.discount_value) / 100;
+        }
+        else {
+            discountAmount = data.discount_value;
+        }
+        // Cap at fee amount
+        discountAmount = Math.min(discountAmount, feeAmount);
+        const discountData = {
+            fee_id: feeId,
+            discount_type: data.discount_type,
+            discount_value: data.discount_value,
+            discount_amount: discountAmount,
+            discount_reason_id: data.discount_reason_id,
+            notes: data.notes
+        };
+        this.updateFeeData(feeId, { discount: discountData });
+    }
+    applyScholarship(feeId, data, feeAmount) {
+        let scholarshipAmount = 0;
+        if (data.scholarship_category === 'FULL') {
+            scholarshipAmount = feeAmount;
+        }
+        else if (data.scholarship_category === 'PARTIAL' && data.scholarship_percentage) {
+            scholarshipAmount = (feeAmount * data.scholarship_percentage) / 100;
+        }
+        else {
+            scholarshipAmount = data.scholarship_amount || 0;
+        }
+        // Cap at fee amount (considering discount?) 
+        scholarshipAmount = Math.min(scholarshipAmount, feeAmount);
+        const scholarshipData = {
+            fee_id: feeId,
+            scholarship_type_id: data.scholarship_type_id,
+            scholarship_category: data.scholarship_category,
+            scholarship_percentage: data.scholarship_percentage,
+            scholarship_amount: scholarshipAmount,
+            notes: data.notes
+        };
+        this.updateFeeData(feeId, { scholarship: scholarshipData });
+    }
+    updateFeeData(feeId, changes) {
+        const currentMap = this.feeDiscountScholarshipData();
+        const currentData = currentMap.get(feeId) || {};
+        const newData = {
+            ...currentData,
+            ...changes
+        };
+        if (!newData.discount && !newData.scholarship) {
+            currentMap.delete(feeId);
+        }
+        else {
+            currentMap.set(feeId, newData);
+        }
+        this.feeDiscountScholarshipData.set(new Map(currentMap));
+        this.emitFeeData();
+    }
+    emitFeeData() {
+        const fees = this.getSelectedFeeStructureFees();
+        // Enrich with calculated values
+        const enrichedFees = fees.map(f => {
+            const feeId = this.getFeeId(f);
+            const discount = this.getDiscountData(feeId)?.discount_amount || 0;
+            const scholarship = this.getScholarshipData(feeId)?.scholarship_amount || 0;
+            return {
+                ...f,
+                discount: discount,
+                scholarship: scholarship,
+                final_amount: this.calculateFinalAmount(f)
+            };
+        });
+        this.feesCalculated.emit({
+            fees: enrichedFees,
+            totalOriginal: this.totalOriginalAmount(),
+            totalDiscount: this.totalDiscount(),
+            totalScholarship: this.totalScholarship(),
+            totalFinal: this.totalFinalAmount(),
+            structureId: this.selectedFeeStructureId()
+        });
+    }
+    // --- Insights / Detailed View ---
+    // --- Insights / Detailed View ---
+    async viewFeeDetails(fee) {
+        const feeData = this.getFeeDataForViewer(fee);
+        if (!feeData)
+            return;
+        // Ensure component is registered
+        if (!this.floatingContainerService.isComponentRegistered('fee-details-viewer')) {
+            await this.registerFloatingContainerComponents();
+        }
+        const containerId = this.floatingContainerService.show({
+            id: `fee-details-${fee._id}-${Date.now()}`,
+            title: `Complete Fee Details - ${feeData.fees_structure_name || 'Fee'}`,
+            icon: 'receipt_long',
+            width: '750px',
+            height: '700px',
+            minWidth: '600px',
+            minHeight: '500px',
+            maxWidth: '90vw',
+            maxHeight: '90vh',
+            resizable: true,
+            draggable: true,
+            closable: true,
+            minimizable: true,
+            maximizable: true,
+            backdrop: false,
+            componentId: 'fee-details-viewer',
+            componentConfig: {
+                inputs: {
+                    isOpen: signal(true),
+                    feeData: signal(feeData),
+                    assignmentDate: signal(new Date()),
+                    discount: signal(feeData.discount || 0)
+                },
+                outputs: {
+                    closed: () => {
+                        this.floatingContainerService.hide(containerId);
+                    }
+                }
+            }
+        });
+        this.floatingContainerService.bringToFront(containerId);
+    }
+    // Helper methods for viewer
+    getFeeDataForViewer(fee) {
+        if (!fee)
+            return null;
+        const feeId = this.getFeeId(fee);
+        const originalAmount = fee.fees_amount || 0;
+        const discountData = this.getDiscountData(feeId);
+        const discountAmount = discountData?.discount_amount || 0;
+        const finalAmount = this.calculateFinalAmount(fee);
+        // Get the original fee item data
+        let feeItemData = fee._feeItemData;
+        // If _feeItemData is missing or empty, construct a robust fallback to prevent viewer errors
+        if (!feeItemData || Object.keys(feeItemData).length === 0) {
+            feeItemData = {
+                feesi_item_name: fee.fees_structure_name || 'N/A',
+                feesi_item_code: fee.fees_structure_code || 'N/A',
+                feesi_amount: originalAmount,
+                feesi_description: 'No description available',
+                feesi_category_id_sygms: null,
+                feesi_is_mandatory: false,
+                feesi_is_refundable: false,
+                feesi_is_amount_editable: false,
+                feesi_is_installment_allowed: false,
+                feesi_installment_count: 1,
+                feesi_due_date_offset_days: 0,
+                feesi_collection_start_offset_days: 0,
+                feesi_collection_end_offset_days: 30,
+                feesi_tax_applicable: false,
+                feesi_tax_percentage: 0,
+                feesi_display_order: 0
+            };
+        }
+        else {
+            // Ensure essential fields exist even if _feeItemData is partial
+            feeItemData.feesi_item_name = feeItemData.feesi_item_name || fee.fees_structure_name || 'N/A';
+            feeItemData.feesi_amount = feeItemData.feesi_amount ?? originalAmount;
+        }
+        return {
+            _id: fee._id,
+            fees_structure_name: fee.fees_structure_name || 'N/A',
+            fees_structure_code: fee.fees_structure_code || 'N/A',
+            fees_category_name: fee.fees_category_name || 'N/A',
+            fees_amount: originalAmount,
+            fees_total_amount: originalAmount,
+            discount: discountAmount,
+            finalAmount: finalAmount,
+            _feeItemData: feeItemData
+        };
+    }
+    // Stub methods for missing service calls (since we don't have GeneralMasterService here yet)
+    // These should ideally load from an API or service
+    getDiscountReasonOptions() {
+        return [];
+    }
+    getScholarshipTypeOptions() {
+        return [];
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeApplicableFeesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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], 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]=\"getFeeStructureOptions()\" [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 (getSelectedFeeStructureFees().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\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 getSelectedFeeStructureFees(); 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-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"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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" }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeApplicableFeesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-fee-applicable-fees', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        CideIconComponent,
+                        CideEleButtonComponent,
+                        CideSelectComponent,
+                        CurrencyPipe,
+                        // FeeDetailsViewerComponent
+                    ], providers: [CurrencyPipe], 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]=\"getFeeStructureOptions()\" [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 (getSelectedFeeStructureFees().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\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 getSelectedFeeStructureFees(); 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-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"] }]
+        }], 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"] }] } });
+
 class FeeAssignmentCreateComponent {
     destroyRef = inject(DestroyRef);
     fb = inject(FormBuilder);
@@ -3001,6 +3706,7 @@ class FeeAssignmentCreateComponent {
     feeAssignmentService = inject(CideFeeFeeAssignmentService);
     userMasterService = inject(CideCoreUserMasterService);
     componentContextService = inject(ComponentContextService);
+    appStateService = inject(AppStateService);
     assignmentForm;
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
@@ -3010,16 +3716,13 @@ class FeeAssignmentCreateComponent {
     // Breadcrumb data for shared wrapper
     breadcrumbData = signal([], ...(ngDevMode ? [{ debugName: "breadcrumbData" }] : []));
     entityOptions = signal([], ...(ngDevMode ? [{ debugName: "entityOptions" }] : []));
-    academicYearOptions = signal([], ...(ngDevMode ? [{ debugName: "academicYearOptions" }] : []));
     feeStructureOptions = signal([], ...(ngDevMode ? [{ debugName: "feeStructureOptions" }] : []));
     entityLoading = signal(false, ...(ngDevMode ? [{ debugName: "entityLoading" }] : []));
-    academicYearLoading = signal(false, ...(ngDevMode ? [{ debugName: "academicYearLoading" }] : []));
     feeStructureLoading = signal(false, ...(ngDevMode ? [{ debugName: "feeStructureLoading" }] : []));
-    // Fee insights
-    applicableFees = signal([], ...(ngDevMode ? [{ debugName: "applicableFees" }] : []));
-    feesLoading = signal(false, ...(ngDevMode ? [{ debugName: "feesLoading" }] : []));
-    discountControls = signal(new Map(), ...(ngDevMode ? [{ debugName: "discountControls" }] : []));
-    scholarshipControls = signal(new Map(), ...(ngDevMode ? [{ debugName: "scholarshipControls" }] : []));
+    // Fee insights - Removed old signals, now using selectedFeeItems from child component
+    selectedFeeItems = signal([], ...(ngDevMode ? [{ debugName: "selectedFeeItems" }] : []));
+    triggerLoad = signal(false, ...(ngDevMode ? [{ debugName: "triggerLoad" }] : [])); // Trigger for child component
+    selectedStudent = signal(null, ...(ngDevMode ? [{ debugName: "selectedStudent" }] : []));
     feeSourceOptions = [
         { value: 'STRUCTURE', label: 'From Fee Structure' },
         { value: 'CUSTOM', label: 'Custom Fee' }
@@ -3038,16 +3741,27 @@ class FeeAssignmentCreateComponent {
         { value: 'ONE_TIME', label: 'One Time' },
         { value: 'RECURRING', label: 'Recurring' }
     ];
+    // Create signals for form values to use in computed
+    feeSource = signal('STRUCTURE', ...(ngDevMode ? [{ debugName: "feeSource" }] : []));
+    originalAmount = signal(0, ...(ngDevMode ? [{ debugName: "originalAmount" }] : []));
+    discountAmount = signal(0, ...(ngDevMode ? [{ debugName: "discountAmount" }] : []));
+    scholarshipAmount = signal(0, ...(ngDevMode ? [{ debugName: "scholarshipAmount" }] : []));
+    // Signals for Structure IDs (to ensure reactive template bindings)
+    classProgramId = signal('', ...(ngDevMode ? [{ debugName: "classProgramId" }] : []));
+    branchId = signal('', ...(ngDevMode ? [{ debugName: "branchId" }] : []));
+    termId = signal('', ...(ngDevMode ? [{ debugName: "termId" }] : []));
+    sectionId = signal('', ...(ngDevMode ? [{ debugName: "sectionId" }] : []));
+    studentId = signal('', ...(ngDevMode ? [{ debugName: "studentId" }] : []));
     showCustomFeeFields = computed(() => {
-        return this.assignmentForm?.get('fee_source')?.value === 'CUSTOM';
+        return this.feeSource() === 'CUSTOM';
     }, ...(ngDevMode ? [{ debugName: "showCustomFeeFields" }] : []));
     showFeeStructureField = computed(() => {
-        return this.assignmentForm?.get('fee_source')?.value === 'STRUCTURE';
+        return this.feeSource() === 'STRUCTURE';
     }, ...(ngDevMode ? [{ debugName: "showFeeStructureField" }] : []));
     totalAmount = computed(() => {
-        const original = parseFloat(this.assignmentForm?.get('feeas_original_amount')?.value || '0') || 0;
-        const discount = parseFloat(this.assignmentForm?.get('feeas_discount_amount')?.value || '0') || 0;
-        const scholarship = parseFloat(this.assignmentForm?.get('feeas_scholarship_amount')?.value || '0') || 0;
+        const original = this.originalAmount() || 0;
+        const discount = this.discountAmount() || 0;
+        const scholarship = this.scholarshipAmount() || 0;
         return Math.max(0, original - discount - scholarship);
     }, ...(ngDevMode ? [{ debugName: "totalAmount" }] : []));
     constructor() {
@@ -3057,7 +3771,6 @@ class FeeAssignmentCreateComponent {
         this.assignmentForm = this.fb.group({
             // Student Information
             student_id: ['', [Validators.required]],
-            student_search: [''],
             feeas_academic_year_id_acayr: ['', [Validators.required]],
             feeas_entity_id_syen: ['', [Validators.required]],
             // Academic Information (for fee structure loading)
@@ -3086,6 +3799,7 @@ class FeeAssignmentCreateComponent {
         this.assignmentForm.get('fee_source')?.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(source => {
+            this.feeSource.set(source); // Update signal
             if (source === 'STRUCTURE') {
                 this.assignmentForm.get('feeas_fee_structure_id_feest')?.setValidators([Validators.required]);
                 this.assignmentForm.get('feeas_fee_category_sygms')?.clearValidators();
@@ -3100,26 +3814,40 @@ class FeeAssignmentCreateComponent {
             }
             this.assignmentForm.updateValueAndValidity();
         });
-        // Watch for program/term/section changes to load fees
+        // Update amount signals
+        this.assignmentForm.get('feeas_original_amount')?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(val => this.originalAmount.set(parseFloat(val || '0')));
+        this.assignmentForm.get('feeas_discount_amount')?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(val => this.discountAmount.set(parseFloat(val || '0')));
+        this.assignmentForm.get('feeas_scholarship_amount')?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(val => this.scholarshipAmount.set(parseFloat(val || '0')));
+        // Watch for program/term/section changes to update signals
+        this.assignmentForm.get('class_program_id')?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(val => this.classProgramId.set(val || ''));
+        this.assignmentForm.get('branch_id')?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(val => this.branchId.set(val || ''));
         this.assignmentForm.get('term_id')?.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            if (this.assignmentForm.get('fee_source')?.value === 'STRUCTURE') {
-                this.loadApplicableFees();
-            }
-        });
+            .subscribe(val => this.termId.set(val || ''));
         this.assignmentForm.get('section_id')?.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe(() => {
-            if (this.assignmentForm.get('fee_source')?.value === 'STRUCTURE' && this.assignmentForm.get('term_id')?.value) {
-                this.loadApplicableFees();
-            }
-        });
-        // Watch for student search changes
-        this.assignmentForm.get('student_search')?.valueChanges
+            .subscribe(val => this.sectionId.set(val || ''));
+        // Listen for student changes to update display card and signal
+        this.assignmentForm.get('student_id')?.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe((value) => {
-            this.onStudentSearch(value);
+            .subscribe(id => {
+            this.studentId.set(id || '');
+            if (!id) {
+                this.selectedStudent.set(null);
+            }
+            else {
+                this.loadStudentDetails(id);
+            }
         });
     }
     rightsService = inject(RightsService);
@@ -3159,7 +3887,12 @@ class FeeAssignmentCreateComponent {
         this.updateBreadcrumbData();
     }
     loadDropdownOptions() {
-        // Load entity options
+        const entityId = this.appStateService.getActiveEntityValue()?._id;
+        // Set entity ID in form
+        if (entityId) {
+            this.assignmentForm.patchValue({ feeas_entity_id_syen: entityId });
+        }
+        // Load entity options (optional, mainly for admin reference)
         this.entityLoading.set(true);
         this.entityService.getEntityList({}).subscribe({
             next: (response) => {
@@ -3173,31 +3906,22 @@ class FeeAssignmentCreateComponent {
             }
         });
         // Load academic year options
-        this.academicYearLoading.set(true);
-        const academicYearPayload = {
-            pageIndex: 1,
-            pageSize: 100,
-            pagination: false
-        };
-        this.academicYearService.getAcademicYearList(academicYearPayload).subscribe({
-            next: (response) => {
-                if (response?.success && response.data) {
-                    this.academicYearOptions.set(response.data);
-                }
-                this.academicYearLoading.set(false);
-            },
-            error: () => {
-                this.academicYearLoading.set(false);
-            }
-        });
+        const academicYearId = this.appStateService.getActiveAcademicYearValue()?._id;
+        if (academicYearId) {
+            this.assignmentForm.patchValue({ feeas_academic_year_id_acayr: academicYearId });
+        }
         // Load fee structure options
-        this.loadFeeStructures();
+        this.loadFeeStructures(entityId);
+        // Load student options
+        this.onStudentSearch('');
     }
-    loadFeeStructures() {
+    loadFeeStructures(entityId) {
+        const currentEntityId = entityId || this.appStateService.getActiveEntityValue()?._id;
         this.feeStructureLoading.set(true);
         const payload = new MFeeStructure({
             fees_is_active: true,
-            pagination: false
+            pagination: false,
+            fees_entity_id_syen: currentEntityId
         });
         this.feeStructureService.getFeeStructureList(payload).subscribe({
             next: (response) => {
@@ -3214,7 +3938,8 @@ class FeeAssignmentCreateComponent {
             },
             error: (err) => {
                 console.error('Error loading fee structures:', err);
-                this.notificationService.error('Failed to load fee structures');
+                // Silent error or specific notification?
+                // this.notificationService.error('Failed to load fee structures');
                 this.feeStructureOptions.set([]);
             },
             complete: () => {
@@ -3233,7 +3958,7 @@ class FeeAssignmentCreateComponent {
                         ? data.feeas_fee_structure_id_feest
                         : data.feeas_fee_structure_id_feest?._id || '';
                     this.assignmentForm.patchValue({
-                        student_id: data.feeas_student_id || '',
+                        student_id: data.feeas_student_id_auth || '',
                         fee_source: feeStructureId ? 'STRUCTURE' : 'CUSTOM',
                         feeas_fee_structure_id_feest: feeStructureId || '',
                         feeas_fee_category_sygms: data.feeas_fee_category_sygms || '',
@@ -3247,6 +3972,26 @@ class FeeAssignmentCreateComponent {
                         feeas_installment_count: data.feeas_installment_count || 1,
                         feeas_remarks: data.feeas_remarks || ''
                     });
+                    // Populate student dropdown for edit mode
+                    if (data.feeas_student_id_auth) {
+                        let studentLabel = '';
+                        if (typeof data.feeas_student_id_auth === 'string') {
+                            studentLabel = data.feeas_student_id_auth;
+                        }
+                        else {
+                            studentLabel = data.feeas_student_id_auth?.name || data.feeas_student_id_auth?._id || '';
+                        }
+                        // Try to get name from admission if populated
+                        const admission = data.feeas_admission_id_admap;
+                        if (admission && (admission.admap_first_name || admission.admap_last_name)) {
+                            studentLabel = `${admission.admap_first_name || ''} ${admission.admap_last_name || ''}`.trim() +
+                                (admission.admap_application_number ? ` (${admission.admap_application_number})` : '');
+                        }
+                        this.studentListOptions.set([{
+                                label: studentLabel,
+                                value: typeof data.feeas_student_id_auth === 'string' ? data.feeas_student_id_auth : data.feeas_student_id_auth?._id || ''
+                            }]);
+                    }
                 }
             },
             error: (err) => {
@@ -3258,283 +4003,90 @@ class FeeAssignmentCreateComponent {
             }
         });
     }
-    onStudentSearch(query) {
-        const searchQuery = String(query || '');
-        if (searchQuery.length < 3) {
-            this.assignmentForm.patchValue({ student_id: '' });
-            return;
-        }
-        this.loading.set(true);
-        // Search for students using user master service
+    loadStudentDetails(studentId) {
         const payload = {
-            query: searchQuery,
-            pageIndex: 1,
-            pageSize: 10,
-            pagination: true
+            _id: studentId, // Query by ID
+            pagination: false,
+            syenm_entity_id_syen: this.appStateService.getActiveEntityValue()?._id || '',
+            syutm_user_type: 'STUDENT'
         };
-        this.userMasterService.getUserList(payload)
-            .pipe(takeUntilDestroyed(this.destroyRef))
-            .subscribe({
+        this.userMasterService.getUserList(payload).subscribe({
             next: (response) => {
                 if (response?.success && response?.data) {
-                    // Filter for students only
-                    const students = response.data.filter((user) => user.user_type_mapping?.syutm_user_type === 'STUDENT');
-                    if (students.length === 0) {
-                        this.notificationService.warning('No students found matching your search.');
-                        this.assignmentForm.patchValue({ student_id: '' });
-                        this.loading.set(false);
-                        return;
-                    }
-                    // Use first matching student (or could show dropdown for multiple matches)
-                    const student = students[0];
-                    const studentId = student._id || '';
-                    if (studentId) {
-                        this.assignmentForm.patchValue({ student_id: studentId });
-                        this.notificationService.success(`Student found: ${student.user_fullname || 'Unknown'}`);
-                    }
-                    else {
-                        this.notificationService.warning('Student ID not found.');
-                        this.assignmentForm.patchValue({ student_id: '' });
+                    const data = Array.isArray(response.data) ? response.data : [response.data];
+                    if (data.length > 0) {
+                        const student = data[0];
+                        this.selectedStudent.set({
+                            name: (student.admap_first_name || student.user_fullname || 'Unknown') + ' ' + (student.admap_last_name || ''),
+                            student_id: student.admap_student_id || student.user_type_mapping?.syutm_type_specific_id || student._id || '',
+                            class: student.class || 'N/A',
+                            section: student.section || 'N/A'
+                        });
                     }
                 }
-                else {
-                    this.notificationService.warning('No students found matching your search.');
-                    this.assignmentForm.patchValue({ student_id: '' });
-                }
-                this.loading.set(false);
-            },
-            error: (err) => {
-                console.error('Error searching for students:', err);
-                this.notificationService.error('Failed to search for students. Please try again.');
-                this.assignmentForm.patchValue({ student_id: '' });
-                this.loading.set(false);
             }
         });
     }
-    /**
-     * Handler for program section selector value changes
-     */
-    onProgramSectionValuesChange(values) {
-        if (this.assignmentForm.get('fee_source')?.value === 'STRUCTURE') {
-            this.loadApplicableFees();
-        }
-    }
-    /**
-     * Load applicable fees based on selected program/term/section
-     */
-    loadApplicableFees() {
-        const classProgramId = this.assignmentForm.get('class_program_id')?.value;
-        const branchId = this.assignmentForm.get('branch_id')?.value;
-        const programTermId = this.assignmentForm.get('term_id')?.value;
-        const sectionId = this.assignmentForm.get('section_id')?.value;
-        const entityId = this.assignmentForm.get('feeas_entity_id_syen')?.value;
-        const academicYearId = this.assignmentForm.get('feeas_academic_year_id_acayr')?.value;
-        if (!classProgramId || !programTermId || !entityId || !academicYearId) {
-            this.applicableFees.set([]);
-            return;
-        }
-        this.feesLoading.set(true);
-        // Build payload with all academic filters
-        const payloadData = {
-            fees_class_program_id_acacpm: classProgramId,
-            fees_class_program_term_id_acapt: programTermId,
-            fees_entity_id_syen: entityId,
-            fees_academic_year_id_acayr: academicYearId,
-            fees_is_active: true,
-            pagination: false,
+    studentListOptions = signal([], ...(ngDevMode ? [{ debugName: "studentListOptions" }] : []));
+    onStudentSearch(event) {
+        const searchQuery = typeof event === 'object' ? event?.query || '' : String(event || '');
+        this.loading.set(true);
+        // Search for students using user master service
+        const payload = {
+            query: searchQuery,
             pageIndex: 1,
-            pageSize: 100
+            pageSize: 50, // Increase page size for dropdown
+            pagination: true,
+            syenm_entity_id_syen: this.appStateService.getActiveEntityValue()?._id || '',
+            syutm_user_type: 'STUDENT' // Filter by student type on backend
         };
-        // Include branch if selected
-        if (branchId) {
-            payloadData.fees_class_program_branch_id_acabrn = branchId;
-        }
-        // Include section if selected
-        if (sectionId) {
-            payloadData.fees_program_term_section_id_acapts = sectionId;
-        }
-        const payload = new MFeeStructure(payloadData);
-        this.feeStructureService.getFeeStructureList(payload)
+        this.userMasterService.getUserList(payload)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (response) => {
                 if (response?.success && response?.data) {
-                    const feeStructures = Array.isArray(response.data) ? response.data : [];
-                    if (feeStructures.length === 0) {
-                        this.applicableFees.set([]);
-                        this.feesLoading.set(false);
-                        return;
-                    }
-                    // Fetch fee items for all structures in parallel
-                    const feeItemRequests = feeStructures.map(structure => this.feeStructureService.getFeeStructureById({ fees_id: structure._id || '' })
-                        .pipe(takeUntilDestroyed(this.destroyRef)));
-                    forkJoin(feeItemRequests).subscribe({
-                        next: (responses) => {
-                            const allFeeItems = [];
-                            responses.forEach((itemResponse, index) => {
-                                if (itemResponse?.success && itemResponse?.data) {
-                                    const structure = feeStructures[index];
-                                    const isFeeStructureByIdResponse = (data) => {
-                                        return data !== null && typeof data === 'object' && 'fee_structure' in data;
-                                    };
-                                    let feeItems = [];
-                                    if (isFeeStructureByIdResponse(itemResponse.data)) {
-                                        feeItems = itemResponse.data.fee_structure_items || [];
-                                    }
-                                    // Transform fee items to FeeAssignmentFeeItem format
-                                    feeItems.forEach(item => {
-                                        if (item.feesi_is_active !== false) {
-                                            let categoryName = 'N/A';
-                                            if (item.feesi_category_id_sygms) {
-                                                if (typeof item.feesi_category_id_sygms === 'object' && item.feesi_category_id_sygms !== null) {
-                                                    categoryName = item.feesi_category_id_sygms?.sygms_title ||
-                                                        item.feesi_category_id_sygms?.sygms_name ||
-                                                        item.feesi_item_code ||
-                                                        'N/A';
-                                                }
-                                            }
-                                            else {
-                                                categoryName = item.feesi_item_code || 'N/A';
-                                            }
-                                            const feeItem = {
-                                                ...item,
-                                                fees_structure_id: structure._id,
-                                                fees_structure_name: structure.fees_structure_name || '',
-                                                fees_category_name: categoryName,
-                                                fees_amount: item.feesi_amount || 0,
-                                                fees_total_amount: item.feesi_amount || 0,
-                                                discount_amount: 0,
-                                                scholarship_amount: 0
-                                            };
-                                            allFeeItems.push(feeItem);
-                                            // Create discount and scholarship controls for each fee item
-                                            const feeId = item._id || '';
-                                            if (feeId && !this.discountControls().has(feeId)) {
-                                                const discountControl = this.fb.control(0, [Validators.min(0)]);
-                                                this.discountControls.update(map => {
-                                                    const newMap = new Map(map);
-                                                    newMap.set(feeId, discountControl);
-                                                    return newMap;
-                                                });
-                                                this.assignmentForm.addControl(`discount_${feeId}`, discountControl);
-                                            }
-                                            if (feeId && !this.scholarshipControls().has(feeId)) {
-                                                const scholarshipControl = this.fb.control(0, [Validators.min(0)]);
-                                                this.scholarshipControls.update(map => {
-                                                    const newMap = new Map(map);
-                                                    newMap.set(feeId, scholarshipControl);
-                                                    return newMap;
-                                                });
-                                                this.assignmentForm.addControl(`scholarship_${feeId}`, scholarshipControl);
-                                            }
-                                        }
-                                    });
-                                }
-                            });
-                            this.applicableFees.set(allFeeItems);
-                        },
-                        error: (err) => {
-                            console.error('Error loading fee items:', err);
-                            this.notificationService.error('Failed to load fee items');
-                            this.applicableFees.set([]);
-                        },
-                        complete: () => {
-                            this.feesLoading.set(false);
-                        }
+                    // Map results to dropdown options
+                    // Relaxed client-side filtering: Trust backend filtering or check if it looks like a student
+                    // We use the data returned by the API directly
+                    const options = response.data.map((user) => {
+                        const studentName = user.user_fullname || 'Unknown';
+                        const specificId = user.user_type_mapping?.syutm_type_specific_id || '';
+                        const userId = user._id || '';
+                        return {
+                            label: `${studentName}${specificId ? ' (' + specificId + ')' : ''}`,
+                            value: userId
+                        };
                     });
+                    this.studentListOptions.set(options);
+                    if (options.length === 0) {
+                        // Optional: notification or just empty dropdown
+                    }
                 }
                 else {
-                    this.applicableFees.set([]);
-                    this.feesLoading.set(false);
+                    this.studentListOptions.set([]);
                 }
+                this.loading.set(false);
             },
             error: (err) => {
-                console.error('Error loading fee structures:', err);
-                this.notificationService.error('Failed to load fee structures');
-                this.applicableFees.set([]);
-                this.feesLoading.set(false);
+                console.error('Error searching for students:', err);
+                this.studentListOptions.set([]);
+                this.loading.set(false);
             }
         });
     }
     /**
-     * Get discount control for a fee item
-     */
-    getDiscountControl(feeId) {
-        return this.discountControls().get(feeId) || this.fb.control(0);
-    }
-    /**
-     * Get scholarship control for a fee item
-     */
-    getScholarshipControl(feeId) {
-        return this.scholarshipControls().get(feeId) || this.fb.control(0);
-    }
-    /**
-     * Get fee ID for tracking
-     */
-    getFeeId(fee) {
-        return fee._id || '';
-    }
-    /**
-     * Get fee name
-     */
-    getFeeName(fee) {
-        return fee.feesi_item_name || fee.feesi_item_code || 'N/A';
-    }
-    /**
-     * Get fee category
-     */
-    getFeeCategory(fee) {
-        return fee.fees_category_name || 'N/A';
-    }
-    /**
-     * Get fee amount
+     * Handler for program section selector value changes
+     * Note: We don't trigger load here anymore as form value changes drive the signals
      */
-    getFeeAmount(fee) {
-        return fee.fees_amount || fee.fees_total_amount || 0;
+    onProgramSectionValuesChange(values) {
+        // No-op: Signals handle reactivity now
     }
-    /**
-     * Calculate final amount for a fee item
-     */
-    calculateFinalAmount(fee) {
-        const original = this.getFeeAmount(fee);
-        const discount = parseFloat(this.getDiscountControl(this.getFeeId(fee))?.value || '0') || 0;
-        const scholarship = parseFloat(this.getScholarshipControl(this.getFeeId(fee))?.value || '0') || 0;
-        return Math.max(0, original - discount - scholarship);
+    onFeesCalculated(data) {
+        this.selectedFeeItems.set(data.fees);
     }
     /**
-     * Calculate total original amount
-     */
-    totalOriginalAmount = computed(() => {
-        return this.applicableFees().reduce((sum, fee) => {
-            return sum + this.getFeeAmount(fee);
-        }, 0);
-    }, ...(ngDevMode ? [{ debugName: "totalOriginalAmount" }] : []));
-    /**
-     * Calculate total discount
-     */
-    totalDiscount = computed(() => {
-        return this.applicableFees().reduce((sum, fee) => {
-            const discount = parseFloat(this.getDiscountControl(this.getFeeId(fee))?.value || '0') || 0;
-            return sum + discount;
-        }, 0);
-    }, ...(ngDevMode ? [{ debugName: "totalDiscount" }] : []));
-    /**
-     * Calculate total scholarship
-     */
-    totalScholarship = computed(() => {
-        return this.applicableFees().reduce((sum, fee) => {
-            const scholarship = parseFloat(this.getScholarshipControl(this.getFeeId(fee))?.value || '0') || 0;
-            return sum + scholarship;
-        }, 0);
-    }, ...(ngDevMode ? [{ debugName: "totalScholarship" }] : []));
-    /**
-     * Calculate total final amount
+     * Load applicable fees based on selected program/term/section
      */
-    totalFinalAmount = computed(() => {
-        return this.applicableFees().reduce((sum, fee) => {
-            return sum + this.calculateFinalAmount(fee);
-        }, 0);
-    }, ...(ngDevMode ? [{ debugName: "totalFinalAmount" }] : []));
     onSubmit() {
         const requiredRight = this.isEditMode() ? 'EDIT' : 'CREATE';
         if (!this.rightsService.hasRight(requiredRight)) {
@@ -3549,16 +4101,17 @@ class FeeAssignmentCreateComponent {
         this.submitting.set(true);
         const formValue = this.assignmentForm.getRawValue();
         // If using fee structure, create assignments for each fee item
-        if (formValue.fee_source === 'STRUCTURE' && this.applicableFees().length > 0) {
+        // If using fee structure, create assignments for each fee item
+        if (formValue.fee_source === 'STRUCTURE' && this.selectedFeeItems().length > 0) {
             // Create multiple fee assignments for each fee item
-            const assignments = this.applicableFees().map(fee => {
-                const discount = parseFloat(this.getDiscountControl(this.getFeeId(fee))?.value || '0') || 0;
-                const scholarship = parseFloat(this.getScholarshipControl(this.getFeeId(fee))?.value || '0') || 0;
-                const originalAmount = this.getFeeAmount(fee);
-                const finalAmount = Math.max(0, originalAmount - discount - scholarship);
+            const assignments = this.selectedFeeItems().map(fee => {
+                const discount = fee.discount || 0;
+                const scholarship = fee.scholarship || 0;
+                const originalAmount = fee.fees_amount || 0;
+                const finalAmount = fee.final_amount !== undefined ? fee.final_amount : Math.max(0, originalAmount - discount - scholarship);
                 return {
                     _id: this.isEditMode() ? this.assignmentId() : undefined,
-                    feeas_student_id: formValue.student_id,
+                    feeas_student_id_auth: formValue.student_id,
                     feeas_fee_structure_id_feest: fee.fees_structure_id,
                     feeas_fee_structure_item_id_feesi: fee._id,
                     feeas_academic_year_id_acayr: formValue.feeas_academic_year_id_acayr,
@@ -3599,7 +4152,7 @@ class FeeAssignmentCreateComponent {
             // Custom fee assignment
             const payload = {
                 _id: this.isEditMode() ? this.assignmentId() : undefined,
-                feeas_student_id: formValue.student_id,
+                feeas_student_id_auth: formValue.student_id,
                 feeas_fee_structure_id_feest: undefined,
                 feeas_fee_structure_item_id_feesi: undefined,
                 feeas_academic_year_id_acayr: formValue.feeas_academic_year_id_acayr,
@@ -3684,12 +4237,6 @@ class FeeAssignmentCreateComponent {
             this.componentContextService.close(['/fees/assignment']);
         }
     }
-    getAcademicYearOptions() {
-        return this.academicYearOptions().map(ay => ({
-            value: ay._id || '',
-            label: `${ay.acayr_name || ''} (${ay.acayr_code || ''})`
-        }));
-    }
     getFeeStructureOptions() {
         return this.feeStructureOptions().map(fs => ({
             value: fs._id || '',
@@ -3733,10 +4280,10 @@ class FeeAssignmentCreateComponent {
         }
         this.breadcrumbData.set(additionalItems);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeAssignmentCreateComponent, isStandalone: true, selector: "cide-fee-assignment-create", ngImport: i0, template: "<!-- Fee Assignment Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"assignmentForm\" \n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Form Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          <div class=\"tw-space-y-6\">\n\n            <!-- Student Information -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Student Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <div>\n                  <cide-ele-input \n                    label=\"Student\" \n                    formControlName=\"student_search\"\n                    placeholder=\"Search student by name or ID...\"\n                    size=\"sm\"\n                    leadingIcon=\"search\">\n                  </cide-ele-input>\n                </div>\n\n                <cide-ele-select \n                  label=\"Academic Year\" \n                  formControlName=\"feeas_academic_year_id_acayr\"\n                  [options]=\"getAcademicYearOptions()\"\n                  [loading]=\"academicYearLoading()\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-select>\n              </div>\n              \n              <!-- Hidden entity field (populated from app state) -->\n              <input type=\"hidden\" formControlName=\"feeas_entity_id_syen\">\n            </div>\n\n            <!-- Academic Information (for fee structure loading) -->\n            @if (showFeeStructureField()) {\n              <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-pb-2 tw-border-b-2 tw-border-indigo-200 dark:tw-border-indigo-800 tw-mb-4\">\n                  <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-indigo-600 dark:tw-text-indigo-400\">school</cide-ele-icon>\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">Academic Information</h6>\n                </div>\n                \n                <cide-shared-program-section-selector-wrapper\n                  [formGroup]=\"assignmentForm\"\n                  classProgramControlName=\"class_program_id\"\n                  branchControlName=\"branch_id\"\n                  termControlName=\"term_id\"\n                  sectionControlName=\"section_id\"\n                  [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n                  [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n                  [disabled]=\"isViewMode()\"\n                  (valuesChange)=\"onProgramSectionValuesChange($event)\">\n                </cide-shared-program-section-selector-wrapper>\n              </div>\n            }\n\n            <!-- Fee Information -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Fee Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <cide-ele-select \n                  label=\"Fee Source\" \n                  formControlName=\"fee_source\"\n                  [options]=\"feeSourceOptions\"\n                  size=\"sm\"\n                  leadingIcon=\"source\">\n                </cide-ele-select>\n              </div>\n\n              <!-- Custom Fee Fields -->\n              @if (showCustomFeeFields()) {\n                <div class=\"tw-mt-4 tw-space-y-4\">\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                    <cide-ele-select \n                      label=\"Fee Category\" \n                      formControlName=\"feeas_fee_category_sygms\"\n                      [options]=\"feeCategoryOptions\"\n                      size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input \n                      label=\"Fee Name\" \n                      formControlName=\"feeas_fee_name\"\n                      placeholder=\"Enter fee name\"\n                      size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                    <cide-ele-select \n                      label=\"Fee Type\" \n                      formControlName=\"feeas_fee_type\"\n                      [options]=\"feeTypeOptions\"\n                      size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input \n                      label=\"Amount\" \n                      formControlName=\"feeas_original_amount\"\n                      type=\"number\"\n                      placeholder=\"0.00\"\n                      size=\"sm\"\n                      leadingIcon=\"currency_rupee\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              }\n            </div>\n\n            <!-- Payment Details -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Payment Details</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <cide-ele-input \n                  label=\"Due Date\" \n                  formControlName=\"feeas_due_date\"\n                  type=\"date\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Installments\" \n                  formControlName=\"feeas_installment_count\"\n                  type=\"number\"\n                  placeholder=\"1\"\n                  min=\"1\"\n                  max=\"12\"\n                  size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n\n            <!-- Fee Insights (for fee structure) -->\n            @if (showFeeStructureField() && assignmentForm.get('term_id')?.value) {\n              <div class=\"tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-flex tw-items-center tw-gap-2\">\n                    <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-blue-600 dark:tw-text-blue-400\">account_balance</cide-ele-icon>\n                    Fee Insights\n                  </h6>\n                  @if (feesLoading()) {\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading fees...</span>\n                  }\n                </div>\n\n                @if (feesLoading()) {\n                  <div class=\"tw-text-center tw-py-4\">\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading applicable fees...</span>\n                  </div>\n                } @else if (applicableFees().length > 0) {\n                  <div class=\"tw-overflow-x-auto\">\n                    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n                      <thead class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n                        <tr>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Fee Name</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Category</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Original Amount</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Discount</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Scholarship</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Final Amount</th>\n                        </tr>\n                      </thead>\n                      <tbody class=\"tw-bg-white dark:tw-bg-gray-800 tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n                        @for (fee of applicableFees(); track getFeeId(fee)) {\n                          <tr>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100\">{{ getFeeName(fee) }}</td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400\">{{ getFeeCategory(fee) }}</td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">{{ formatCurrency(getFeeAmount(fee)) }}</td>\n                            <td class=\"tw-px-4 tw-py-2\">\n                              <cide-ele-input\n                                type=\"number\"\n                                [formControl]=\"getDiscountControl(getFeeId(fee))\"\n                                placeholder=\"0.00\"\n                                size=\"sm\"\n                                class=\"tw-w-24\"\n                                [disabled]=\"isViewMode()\">\n                              </cide-ele-input>\n                            </td>\n                            <td class=\"tw-px-4 tw-py-2\">\n                              <cide-ele-input\n                                type=\"number\"\n                                [formControl]=\"getScholarshipControl(getFeeId(fee))\"\n                                placeholder=\"0.00\"\n                                size=\"sm\"\n                                class=\"tw-w-24\"\n                                [disabled]=\"isViewMode()\">\n                              </cide-ele-input>\n                            </td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n                              {{ formatCurrency(calculateFinalAmount(fee)) }}\n                            </td>\n                          </tr>\n                        }\n                      </tbody>\n                      <tfoot class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n                        <tr>\n                          <td colspan=\"2\" class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">Total:</td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n                            {{ formatCurrency(totalOriginalAmount()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-text-right\">\n                            {{ formatCurrency(totalDiscount()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-purple-600 dark:tw-text-purple-400 tw-text-right\">\n                            {{ formatCurrency(totalScholarship()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 dark:tw-text-green-400 tw-text-right\">\n                            {{ formatCurrency(totalFinalAmount()) }}\n                          </td>\n                        </tr>\n                      </tfoot>\n                    </table>\n                  </div>\n                } @else {\n                  <div class=\"tw-text-center tw-py-4 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">\n                    No fee structure found for the selected program/term. Please select a program and term to view applicable fees.\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Discounts & Scholarships (for custom fees) -->\n            @if (showCustomFeeFields()) {\n              <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Discounts & Scholarships</h6>\n                \n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                  <cide-ele-input \n                    label=\"Discount Amount\" \n                    formControlName=\"feeas_discount_amount\"\n                    type=\"number\"\n                    placeholder=\"0.00\"\n                    min=\"0\"\n                    size=\"sm\"\n                    leadingIcon=\"percent\">\n                  </cide-ele-input>\n\n                  <cide-ele-input \n                    label=\"Scholarship Amount\" \n                    formControlName=\"feeas_scholarship_amount\"\n                    type=\"number\"\n                    placeholder=\"0.00\"\n                    min=\"0\"\n                    size=\"sm\"\n                    leadingIcon=\"school\">\n                  </cide-ele-input>\n                </div>\n              </div>\n\n              <!-- Amount Summary (for custom fees) -->\n              <div class=\"tw-bg-gradient-to-r tw-from-blue-50 dark:tw-from-blue-900/20 tw-to-indigo-50 dark:tw-to-indigo-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-blue-900 dark:tw-text-blue-100 tw-mb-3\">Amount Summary</h6>\n                \n                <div class=\"tw-space-y-2\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Original Amount:</span>\n                    <span class=\"tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Discount:</span>\n                    <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_discount_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Scholarship:</span>\n                    <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_scholarship_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-t-2 tw-border-blue-300 dark:tw-border-blue-700 tw-mt-2\">\n                    <span class=\"tw-text-base tw-font-bold tw-text-blue-900 dark:tw-text-blue-100\">Total Amount:</span>\n                    <span class=\"tw-text-xl tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ formatCurrency(totalAmount()) }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n\n            <!-- Remarks -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <cide-ele-textarea \n                label=\"Remarks\" \n                formControlName=\"feeas_remarks\"\n                placeholder=\"Enter any additional remarks...\"\n                rows=\"2\" \n                size=\"sm\">\n              </cide-ele-textarea>\n            </div>\n\n          </div>\n\n          <!-- Form Validation Errors -->\n          @if (!isViewMode()) {\n            <div class=\"tw-w-full tw-mt-6\">\n              <cide-form-field-error [formGroup]=\"assignmentForm\"></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              <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n                [disabled]=\"submitting() || assignmentForm.invalid || loading()\" \n                [loading]=\"submitting()\" \n                leftIcon=\"save\">\n                {{ isEditMode() ? 'Update Assignment' : 'Assign Fee' }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeAssignmentCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeAssignmentCreateComponent, isStandalone: true, selector: "cide-fee-assignment-create", ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n\n  <!-- Main Grid Layout -->\n  <div class=\"tw-p-4 tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-h-[calc(100vh-140px)] tw-overflow-hidden\">\n\n    <!-- Left Column: Forms (Col 8) -->\n    <div class=\"lg:tw-col-span-8 tw-flex tw-flex-col tw-gap-4 tw-overflow-y-auto tw-pr-2\">\n\n      <!-- Section 1: Student Context -->\n      <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n          <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">person_search</cide-ele-icon>\n            Student Context\n          </h3>\n        </div>\n\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-items-start\" [formGroup]=\"assignmentForm\">\n          <div>\n            <cide-ele-select label=\"Select Student\" formControlName=\"student_id\" [options]=\"studentListOptions()\"\n              size=\"sm\" leadingIcon=\"person\" placeholder=\"Search student name or ID...\"\n              (searchChange)=\"onStudentSearch($event)\">\n            </cide-ele-select>\n          </div>\n\n          <!-- Selected Student Display -->\n          @if (selectedStudent()) {\n          <div\n            class=\"premium-gradient tw-p-3 tw-rounded-lg tw-border tw-border-blue-100 tw-flex tw-items-center tw-gap-4\">\n            <div\n              class=\"tw-h-12 tw-w-12 tw-rounded-full tw-bg-blue-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-xl\">\n              {{ selectedStudent()?.name?.[0] || '?' }}\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-sm tw-font-bold tw-text-gray-900\">{{ selectedStudent()?.name }}</div>\n              <div class=\"tw-text-xs tw-text-gray-500\">ID: {{ selectedStudent()?.student_id }}</div>\n              <div class=\"tw-text-[10px] tw-text-blue-600 tw-font-medium tw-mt-1\">\n                {{ selectedStudent()?.class }} | {{ selectedStudent()?.section }}\n              </div>\n            </div>\n          </div>\n          } @else {\n          <div\n            class=\"tw-border tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-p-3 tw-flex tw-items-center tw-justify-center tw-text-gray-400 tw-text-xs\">\n            Select a student to view details\n          </div>\n          }\n        </div>\n\n        <!-- Academic Placement (Conditional for Structure) -->\n        @if (showFeeStructureField()) {\n        <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-100\">\n          <label class=\"tw-block tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-2\">\n            ACADEMIC PLACEMENT filters (Required for Fee Structure)\n          </label>\n          <cide-shared-program-section-selector-wrapper [formGroup]=\"assignmentForm\"\n            classProgramControlName=\"class_program_id\" branchControlName=\"branch_id\" termControlName=\"term_id\"\n            sectionControlName=\"section_id\" [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n            [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\" [disabled]=\"isViewMode()\"\n            (valuesChange)=\"onProgramSectionValuesChange($event)\">\n          </cide-shared-program-section-selector-wrapper>\n        </div>\n        }\n      </div>\n\n      <!-- Section 2: Fee Configuration -->\n      <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n          <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">settings</cide-ele-icon>\n            Fee Configuration\n          </h3>\n        </div>\n\n        <div class=\"tw-space-y-4\" [formGroup]=\"assignmentForm\">\n          <!-- Source Selection -->\n          <div class=\"tw-w-full md:tw-w-1/2\">\n            <cide-ele-select label=\"Fee Assignment Mode\" formControlName=\"fee_source\" [options]=\"feeSourceOptions\"\n              size=\"sm\" leadingIcon=\"tune\">\n            </cide-ele-select>\n          </div>\n\n          <!-- Mode: Structure -->\n          @if (showFeeStructureField()) {\n          <div>\n            <cide-fee-applicable-fees [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n              [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n              [classProgramId]=\"classProgramId()\" [termId]=\"termId()\" [branchId]=\"branchId()\" [sectionId]=\"sectionId()\"\n              [studentId]=\"studentId()\" (feesCalculated)=\"onFeesCalculated($event)\">\n            </cide-fee-applicable-fees>\n          </div>\n          }\n\n          <!-- Mode: Custom -->\n          @if (showCustomFeeFields()) {\n          <div class=\"tw-space-y-4\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select label=\"Category\" formControlName=\"feeas_fee_category_sygms\"\n                [options]=\"feeCategoryOptions\" size=\"sm\"></cide-ele-select>\n              <cide-ele-input label=\"Fee Name\" formControlName=\"feeas_fee_name\" placeholder=\"e.g. Late Fee\"\n                size=\"sm\"></cide-ele-input>\n            </div>\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-input label=\"Amount\" formControlName=\"feeas_original_amount\" type=\"number\" placeholder=\"0.00\"\n                size=\"sm\" leadingIcon=\"currency_rupee\"></cide-ele-input>\n              <cide-ele-select label=\"Type\" formControlName=\"feeas_fee_type\" [options]=\"feeTypeOptions\"\n                size=\"sm\"></cide-ele-select>\n            </div>\n\n            <!-- Custom Discounts -->\n            <div class=\"tw-bg-gray-50 tw-rounded tw-p-3 tw-border tw-border-gray-200\">\n              <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-mb-3\">Manual Adjustments</h6>\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <cide-ele-input label=\"Discount\" formControlName=\"feeas_discount_amount\" type=\"number\" placeholder=\"0\"\n                  size=\"sm\"></cide-ele-input>\n                <cide-ele-input label=\"Scholarship\" formControlName=\"feeas_scholarship_amount\" type=\"number\"\n                  placeholder=\"0\" size=\"sm\"></cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Column: Summary & Actions (Col 4) -->\n    <div class=\"lg:tw-col-span-4 tw-h-full\">\n      <div\n        class=\"glass-card tw-rounded-xl tw-h-full tw-flex tw-flex-col tw-overflow-hidden tw-border tw-border-gray-200\">\n\n        <!-- Header -->\n        <div class=\"tw-p-4 tw-bg-blue-600 tw-text-white\">\n          <h3 class=\"tw-text-lg tw-font-bold\">Assignment Summary</h3>\n          <p class=\"tw-text-blue-100 tw-text-xs\">Review terms and confirm assignment</p>\n        </div>\n\n        <div class=\"tw-flex-1 tw-p-4 tw-overflow-y-auto tw-space-y-4\" [formGroup]=\"assignmentForm\">\n\n          <!-- Payment Terms Inputs -->\n          <div class=\"tw-space-y-3\">\n            <h6 class=\"tw-text-xs tw-font-bold tw-text-gray-700 tw-uppercase\">Payment Terms</h6>\n            <cide-ele-input label=\"Due Date\" formControlName=\"feeas_due_date\" type=\"date\" size=\"sm\"></cide-ele-input>\n            <cide-ele-input label=\"Installments\" formControlName=\"feeas_installment_count\" type=\"number\" placeholder=\"1\"\n              min=\"1\" max=\"12\" size=\"sm\"></cide-ele-input>\n          </div>\n\n          <div class=\"tw-border-t tw-border-gray-100 tw-my-4\"></div>\n\n          <!-- Totals -->\n          <div class=\"tw-space-y-2\">\n            @if(showCustomFeeFields()) {\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Original Amount</span>\n              <span class=\"tw-font-medium\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0)\n                }}</span>\n            </div>\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Adjustments</span>\n              <span class=\"tw-text-red-500 tw-font-medium\">\n                - {{ formatCurrency((assignmentForm.get('feeas_discount_amount')?.value || 0) +\n                (assignmentForm.get('feeas_scholarship_amount')?.value || 0)) }}\n              </span>\n            </div>\n            <div class=\"tw-border-t tw-border-gray-100 tw-pt-2 tw-mt-2\">\n              <div class=\"tw-flex tw-justify-between tw-items-center\">\n                <span class=\"tw-text-base tw-font-bold tw-text-gray-800\">Total Payable</span>\n                <span class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ formatCurrency(totalAmount()) }}</span>\n              </div>\n            </div>\n            } @else {\n            <!-- Structure Mode Totals (calculated by child component usually, but we have selectedFeeItems signal) -->\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Items Selected</span>\n              <span class=\"tw-font-medium\">{{ selectedFeeItems().length }}</span>\n            </div>\n\n            <!-- Note: Ideally we'd sum up selectedFeeItems here for a live total, similar to Fee Payment Process -->\n            <!-- For now, just showing item count as specific amounts are handled inside the child component mostly -->\n            }\n          </div>\n\n          <!-- Remarks -->\n          <div class=\"tw-mt-4\">\n            <cide-ele-textarea label=\"Remarks\" formControlName=\"feeas_remarks\" placeholder=\"Optional notes...\"\n              [rows]=\"3\" size=\"sm\"></cide-ele-textarea>\n          </div>\n\n        </div>\n\n        <!-- Footer Actions -->\n        <div class=\"tw-p-4 tw-bg-gray-50 tw-border-t tw-border-gray-100 tw-flex tw-flex-col tw-gap-2\">\n          <button cideEleButton variant=\"primary\" class=\"tw-w-full tw-py-3\" [loading]=\"submitting()\"\n            [disabled]=\"submitting() || assignmentForm.invalid || loading()\" (click)=\"onSubmit()\">\n            {{ isEditMode() ? 'Update Assignment' : 'Confirm Assignment' }}\n          </button>\n\n          <div class=\"tw-grid tw-grid-cols-2 tw-gap-2\">\n            @if (!isEditMode()) {\n            <button cideEleButton variant=\"ghost\" (click)=\"resetForm()\" [disabled]=\"loading()\">Reset</button>\n            }\n            <button cideEleButton variant=\"ghost\" (click)=\"onCancel()\" [disabled]=\"submitting()\">Cancel</button>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n  </div>\n</cide-lyt-shared-wrapper>", styles: [".glass-card{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.premium-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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: FeeApplicableFeesComponent, selector: "cide-fee-applicable-fees", inputs: ["entityId", "academicYearId", "classProgramId", "termId", "branchId", "sectionId", "studentId"], outputs: ["feesCalculated"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentCreateComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeAssignmentCreateComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-fee-assignment-create', standalone: true, imports: [
                         CommonModule,
@@ -3745,11 +4292,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideTextareaComponent,
                         CideEleButtonComponent,
                         CideSelectComponent,
-                        CideIconComponent,
+                        CideLytSharedWrapperComponent,
                         CideLytSharedWrapperComponent,
                         ProgramSectionSelectorWrapperComponent,
-                        CideFormFieldErrorComponent
-                    ], template: "<!-- Fee Assignment Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"assignmentForm\" \n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Form Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          <div class=\"tw-space-y-6\">\n\n            <!-- Student Information -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Student Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <div>\n                  <cide-ele-input \n                    label=\"Student\" \n                    formControlName=\"student_search\"\n                    placeholder=\"Search student by name or ID...\"\n                    size=\"sm\"\n                    leadingIcon=\"search\">\n                  </cide-ele-input>\n                </div>\n\n                <cide-ele-select \n                  label=\"Academic Year\" \n                  formControlName=\"feeas_academic_year_id_acayr\"\n                  [options]=\"getAcademicYearOptions()\"\n                  [loading]=\"academicYearLoading()\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-select>\n              </div>\n              \n              <!-- Hidden entity field (populated from app state) -->\n              <input type=\"hidden\" formControlName=\"feeas_entity_id_syen\">\n            </div>\n\n            <!-- Academic Information (for fee structure loading) -->\n            @if (showFeeStructureField()) {\n              <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-pb-2 tw-border-b-2 tw-border-indigo-200 dark:tw-border-indigo-800 tw-mb-4\">\n                  <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-indigo-600 dark:tw-text-indigo-400\">school</cide-ele-icon>\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">Academic Information</h6>\n                </div>\n                \n                <cide-shared-program-section-selector-wrapper\n                  [formGroup]=\"assignmentForm\"\n                  classProgramControlName=\"class_program_id\"\n                  branchControlName=\"branch_id\"\n                  termControlName=\"term_id\"\n                  sectionControlName=\"section_id\"\n                  [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n                  [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n                  [disabled]=\"isViewMode()\"\n                  (valuesChange)=\"onProgramSectionValuesChange($event)\">\n                </cide-shared-program-section-selector-wrapper>\n              </div>\n            }\n\n            <!-- Fee Information -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Fee Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <cide-ele-select \n                  label=\"Fee Source\" \n                  formControlName=\"fee_source\"\n                  [options]=\"feeSourceOptions\"\n                  size=\"sm\"\n                  leadingIcon=\"source\">\n                </cide-ele-select>\n              </div>\n\n              <!-- Custom Fee Fields -->\n              @if (showCustomFeeFields()) {\n                <div class=\"tw-mt-4 tw-space-y-4\">\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                    <cide-ele-select \n                      label=\"Fee Category\" \n                      formControlName=\"feeas_fee_category_sygms\"\n                      [options]=\"feeCategoryOptions\"\n                      size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input \n                      label=\"Fee Name\" \n                      formControlName=\"feeas_fee_name\"\n                      placeholder=\"Enter fee name\"\n                      size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                    <cide-ele-select \n                      label=\"Fee Type\" \n                      formControlName=\"feeas_fee_type\"\n                      [options]=\"feeTypeOptions\"\n                      size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input \n                      label=\"Amount\" \n                      formControlName=\"feeas_original_amount\"\n                      type=\"number\"\n                      placeholder=\"0.00\"\n                      size=\"sm\"\n                      leadingIcon=\"currency_rupee\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              }\n            </div>\n\n            <!-- Payment Details -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Payment Details</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <cide-ele-input \n                  label=\"Due Date\" \n                  formControlName=\"feeas_due_date\"\n                  type=\"date\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Installments\" \n                  formControlName=\"feeas_installment_count\"\n                  type=\"number\"\n                  placeholder=\"1\"\n                  min=\"1\"\n                  max=\"12\"\n                  size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n\n            <!-- Fee Insights (for fee structure) -->\n            @if (showFeeStructureField() && assignmentForm.get('term_id')?.value) {\n              <div class=\"tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-flex tw-items-center tw-gap-2\">\n                    <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-blue-600 dark:tw-text-blue-400\">account_balance</cide-ele-icon>\n                    Fee Insights\n                  </h6>\n                  @if (feesLoading()) {\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading fees...</span>\n                  }\n                </div>\n\n                @if (feesLoading()) {\n                  <div class=\"tw-text-center tw-py-4\">\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading applicable fees...</span>\n                  </div>\n                } @else if (applicableFees().length > 0) {\n                  <div class=\"tw-overflow-x-auto\">\n                    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n                      <thead class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n                        <tr>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Fee Name</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Category</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Original Amount</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Discount</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Scholarship</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Final Amount</th>\n                        </tr>\n                      </thead>\n                      <tbody class=\"tw-bg-white dark:tw-bg-gray-800 tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n                        @for (fee of applicableFees(); track getFeeId(fee)) {\n                          <tr>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100\">{{ getFeeName(fee) }}</td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400\">{{ getFeeCategory(fee) }}</td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">{{ formatCurrency(getFeeAmount(fee)) }}</td>\n                            <td class=\"tw-px-4 tw-py-2\">\n                              <cide-ele-input\n                                type=\"number\"\n                                [formControl]=\"getDiscountControl(getFeeId(fee))\"\n                                placeholder=\"0.00\"\n                                size=\"sm\"\n                                class=\"tw-w-24\"\n                                [disabled]=\"isViewMode()\">\n                              </cide-ele-input>\n                            </td>\n                            <td class=\"tw-px-4 tw-py-2\">\n                              <cide-ele-input\n                                type=\"number\"\n                                [formControl]=\"getScholarshipControl(getFeeId(fee))\"\n                                placeholder=\"0.00\"\n                                size=\"sm\"\n                                class=\"tw-w-24\"\n                                [disabled]=\"isViewMode()\">\n                              </cide-ele-input>\n                            </td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n                              {{ formatCurrency(calculateFinalAmount(fee)) }}\n                            </td>\n                          </tr>\n                        }\n                      </tbody>\n                      <tfoot class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n                        <tr>\n                          <td colspan=\"2\" class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">Total:</td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n                            {{ formatCurrency(totalOriginalAmount()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-text-right\">\n                            {{ formatCurrency(totalDiscount()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-purple-600 dark:tw-text-purple-400 tw-text-right\">\n                            {{ formatCurrency(totalScholarship()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 dark:tw-text-green-400 tw-text-right\">\n                            {{ formatCurrency(totalFinalAmount()) }}\n                          </td>\n                        </tr>\n                      </tfoot>\n                    </table>\n                  </div>\n                } @else {\n                  <div class=\"tw-text-center tw-py-4 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">\n                    No fee structure found for the selected program/term. Please select a program and term to view applicable fees.\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Discounts & Scholarships (for custom fees) -->\n            @if (showCustomFeeFields()) {\n              <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Discounts & Scholarships</h6>\n                \n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                  <cide-ele-input \n                    label=\"Discount Amount\" \n                    formControlName=\"feeas_discount_amount\"\n                    type=\"number\"\n                    placeholder=\"0.00\"\n                    min=\"0\"\n                    size=\"sm\"\n                    leadingIcon=\"percent\">\n                  </cide-ele-input>\n\n                  <cide-ele-input \n                    label=\"Scholarship Amount\" \n                    formControlName=\"feeas_scholarship_amount\"\n                    type=\"number\"\n                    placeholder=\"0.00\"\n                    min=\"0\"\n                    size=\"sm\"\n                    leadingIcon=\"school\">\n                  </cide-ele-input>\n                </div>\n              </div>\n\n              <!-- Amount Summary (for custom fees) -->\n              <div class=\"tw-bg-gradient-to-r tw-from-blue-50 dark:tw-from-blue-900/20 tw-to-indigo-50 dark:tw-to-indigo-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-blue-900 dark:tw-text-blue-100 tw-mb-3\">Amount Summary</h6>\n                \n                <div class=\"tw-space-y-2\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Original Amount:</span>\n                    <span class=\"tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Discount:</span>\n                    <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_discount_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Scholarship:</span>\n                    <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_scholarship_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-t-2 tw-border-blue-300 dark:tw-border-blue-700 tw-mt-2\">\n                    <span class=\"tw-text-base tw-font-bold tw-text-blue-900 dark:tw-text-blue-100\">Total Amount:</span>\n                    <span class=\"tw-text-xl tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ formatCurrency(totalAmount()) }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n\n            <!-- Remarks -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <cide-ele-textarea \n                label=\"Remarks\" \n                formControlName=\"feeas_remarks\"\n                placeholder=\"Enter any additional remarks...\"\n                rows=\"2\" \n                size=\"sm\">\n              </cide-ele-textarea>\n            </div>\n\n          </div>\n\n          <!-- Form Validation Errors -->\n          @if (!isViewMode()) {\n            <div class=\"tw-w-full tw-mt-6\">\n              <cide-form-field-error [formGroup]=\"assignmentForm\"></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              <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n                [disabled]=\"submitting() || assignmentForm.invalid || loading()\" \n                [loading]=\"submitting()\" \n                leftIcon=\"save\">\n                {{ isEditMode() ? 'Update Assignment' : 'Assign Fee' }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n  </div>\n</cide-lyt-shared-wrapper>\n\n" }]
+                        FeeApplicableFeesComponent,
+                        CideIconComponent
+                        // CideFormFieldErrorComponent
+                    ], template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n\n  <!-- Main Grid Layout -->\n  <div class=\"tw-p-4 tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-h-[calc(100vh-140px)] tw-overflow-hidden\">\n\n    <!-- Left Column: Forms (Col 8) -->\n    <div class=\"lg:tw-col-span-8 tw-flex tw-flex-col tw-gap-4 tw-overflow-y-auto tw-pr-2\">\n\n      <!-- Section 1: Student Context -->\n      <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n          <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">person_search</cide-ele-icon>\n            Student Context\n          </h3>\n        </div>\n\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-items-start\" [formGroup]=\"assignmentForm\">\n          <div>\n            <cide-ele-select label=\"Select Student\" formControlName=\"student_id\" [options]=\"studentListOptions()\"\n              size=\"sm\" leadingIcon=\"person\" placeholder=\"Search student name or ID...\"\n              (searchChange)=\"onStudentSearch($event)\">\n            </cide-ele-select>\n          </div>\n\n          <!-- Selected Student Display -->\n          @if (selectedStudent()) {\n          <div\n            class=\"premium-gradient tw-p-3 tw-rounded-lg tw-border tw-border-blue-100 tw-flex tw-items-center tw-gap-4\">\n            <div\n              class=\"tw-h-12 tw-w-12 tw-rounded-full tw-bg-blue-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-xl\">\n              {{ selectedStudent()?.name?.[0] || '?' }}\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-sm tw-font-bold tw-text-gray-900\">{{ selectedStudent()?.name }}</div>\n              <div class=\"tw-text-xs tw-text-gray-500\">ID: {{ selectedStudent()?.student_id }}</div>\n              <div class=\"tw-text-[10px] tw-text-blue-600 tw-font-medium tw-mt-1\">\n                {{ selectedStudent()?.class }} | {{ selectedStudent()?.section }}\n              </div>\n            </div>\n          </div>\n          } @else {\n          <div\n            class=\"tw-border tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-p-3 tw-flex tw-items-center tw-justify-center tw-text-gray-400 tw-text-xs\">\n            Select a student to view details\n          </div>\n          }\n        </div>\n\n        <!-- Academic Placement (Conditional for Structure) -->\n        @if (showFeeStructureField()) {\n        <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-100\">\n          <label class=\"tw-block tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-2\">\n            ACADEMIC PLACEMENT filters (Required for Fee Structure)\n          </label>\n          <cide-shared-program-section-selector-wrapper [formGroup]=\"assignmentForm\"\n            classProgramControlName=\"class_program_id\" branchControlName=\"branch_id\" termControlName=\"term_id\"\n            sectionControlName=\"section_id\" [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n            [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\" [disabled]=\"isViewMode()\"\n            (valuesChange)=\"onProgramSectionValuesChange($event)\">\n          </cide-shared-program-section-selector-wrapper>\n        </div>\n        }\n      </div>\n\n      <!-- Section 2: Fee Configuration -->\n      <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n          <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">settings</cide-ele-icon>\n            Fee Configuration\n          </h3>\n        </div>\n\n        <div class=\"tw-space-y-4\" [formGroup]=\"assignmentForm\">\n          <!-- Source Selection -->\n          <div class=\"tw-w-full md:tw-w-1/2\">\n            <cide-ele-select label=\"Fee Assignment Mode\" formControlName=\"fee_source\" [options]=\"feeSourceOptions\"\n              size=\"sm\" leadingIcon=\"tune\">\n            </cide-ele-select>\n          </div>\n\n          <!-- Mode: Structure -->\n          @if (showFeeStructureField()) {\n          <div>\n            <cide-fee-applicable-fees [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n              [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n              [classProgramId]=\"classProgramId()\" [termId]=\"termId()\" [branchId]=\"branchId()\" [sectionId]=\"sectionId()\"\n              [studentId]=\"studentId()\" (feesCalculated)=\"onFeesCalculated($event)\">\n            </cide-fee-applicable-fees>\n          </div>\n          }\n\n          <!-- Mode: Custom -->\n          @if (showCustomFeeFields()) {\n          <div class=\"tw-space-y-4\">\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-select label=\"Category\" formControlName=\"feeas_fee_category_sygms\"\n                [options]=\"feeCategoryOptions\" size=\"sm\"></cide-ele-select>\n              <cide-ele-input label=\"Fee Name\" formControlName=\"feeas_fee_name\" placeholder=\"e.g. Late Fee\"\n                size=\"sm\"></cide-ele-input>\n            </div>\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n              <cide-ele-input label=\"Amount\" formControlName=\"feeas_original_amount\" type=\"number\" placeholder=\"0.00\"\n                size=\"sm\" leadingIcon=\"currency_rupee\"></cide-ele-input>\n              <cide-ele-select label=\"Type\" formControlName=\"feeas_fee_type\" [options]=\"feeTypeOptions\"\n                size=\"sm\"></cide-ele-select>\n            </div>\n\n            <!-- Custom Discounts -->\n            <div class=\"tw-bg-gray-50 tw-rounded tw-p-3 tw-border tw-border-gray-200\">\n              <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-500 tw-uppercase tw-mb-3\">Manual Adjustments</h6>\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <cide-ele-input label=\"Discount\" formControlName=\"feeas_discount_amount\" type=\"number\" placeholder=\"0\"\n                  size=\"sm\"></cide-ele-input>\n                <cide-ele-input label=\"Scholarship\" formControlName=\"feeas_scholarship_amount\" type=\"number\"\n                  placeholder=\"0\" size=\"sm\"></cide-ele-input>\n              </div>\n            </div>\n          </div>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Right Column: Summary & Actions (Col 4) -->\n    <div class=\"lg:tw-col-span-4 tw-h-full\">\n      <div\n        class=\"glass-card tw-rounded-xl tw-h-full tw-flex tw-flex-col tw-overflow-hidden tw-border tw-border-gray-200\">\n\n        <!-- Header -->\n        <div class=\"tw-p-4 tw-bg-blue-600 tw-text-white\">\n          <h3 class=\"tw-text-lg tw-font-bold\">Assignment Summary</h3>\n          <p class=\"tw-text-blue-100 tw-text-xs\">Review terms and confirm assignment</p>\n        </div>\n\n        <div class=\"tw-flex-1 tw-p-4 tw-overflow-y-auto tw-space-y-4\" [formGroup]=\"assignmentForm\">\n\n          <!-- Payment Terms Inputs -->\n          <div class=\"tw-space-y-3\">\n            <h6 class=\"tw-text-xs tw-font-bold tw-text-gray-700 tw-uppercase\">Payment Terms</h6>\n            <cide-ele-input label=\"Due Date\" formControlName=\"feeas_due_date\" type=\"date\" size=\"sm\"></cide-ele-input>\n            <cide-ele-input label=\"Installments\" formControlName=\"feeas_installment_count\" type=\"number\" placeholder=\"1\"\n              min=\"1\" max=\"12\" size=\"sm\"></cide-ele-input>\n          </div>\n\n          <div class=\"tw-border-t tw-border-gray-100 tw-my-4\"></div>\n\n          <!-- Totals -->\n          <div class=\"tw-space-y-2\">\n            @if(showCustomFeeFields()) {\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Original Amount</span>\n              <span class=\"tw-font-medium\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0)\n                }}</span>\n            </div>\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Adjustments</span>\n              <span class=\"tw-text-red-500 tw-font-medium\">\n                - {{ formatCurrency((assignmentForm.get('feeas_discount_amount')?.value || 0) +\n                (assignmentForm.get('feeas_scholarship_amount')?.value || 0)) }}\n              </span>\n            </div>\n            <div class=\"tw-border-t tw-border-gray-100 tw-pt-2 tw-mt-2\">\n              <div class=\"tw-flex tw-justify-between tw-items-center\">\n                <span class=\"tw-text-base tw-font-bold tw-text-gray-800\">Total Payable</span>\n                <span class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ formatCurrency(totalAmount()) }}</span>\n              </div>\n            </div>\n            } @else {\n            <!-- Structure Mode Totals (calculated by child component usually, but we have selectedFeeItems signal) -->\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Items Selected</span>\n              <span class=\"tw-font-medium\">{{ selectedFeeItems().length }}</span>\n            </div>\n\n            <!-- Note: Ideally we'd sum up selectedFeeItems here for a live total, similar to Fee Payment Process -->\n            <!-- For now, just showing item count as specific amounts are handled inside the child component mostly -->\n            }\n          </div>\n\n          <!-- Remarks -->\n          <div class=\"tw-mt-4\">\n            <cide-ele-textarea label=\"Remarks\" formControlName=\"feeas_remarks\" placeholder=\"Optional notes...\"\n              [rows]=\"3\" size=\"sm\"></cide-ele-textarea>\n          </div>\n\n        </div>\n\n        <!-- Footer Actions -->\n        <div class=\"tw-p-4 tw-bg-gray-50 tw-border-t tw-border-gray-100 tw-flex tw-flex-col tw-gap-2\">\n          <button cideEleButton variant=\"primary\" class=\"tw-w-full tw-py-3\" [loading]=\"submitting()\"\n            [disabled]=\"submitting() || assignmentForm.invalid || loading()\" (click)=\"onSubmit()\">\n            {{ isEditMode() ? 'Update Assignment' : 'Confirm Assignment' }}\n          </button>\n\n          <div class=\"tw-grid tw-grid-cols-2 tw-gap-2\">\n            @if (!isEditMode()) {\n            <button cideEleButton variant=\"ghost\" (click)=\"resetForm()\" [disabled]=\"loading()\">Reset</button>\n            }\n            <button cideEleButton variant=\"ghost\" (click)=\"onCancel()\" [disabled]=\"submitting()\">Cancel</button>\n          </div>\n        </div>\n\n      </div>\n    </div>\n\n  </div>\n</cide-lyt-shared-wrapper>", styles: [".glass-card{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.premium-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff)}\n"] }]
         }], ctorParameters: () => [] });
 
 var feeAssignmentCreate_component = /*#__PURE__*/Object.freeze({
@@ -3820,10 +4369,10 @@ class CideFeeFeePaymentService {
         ]);
         return this.http.delete(url);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFeeFeePaymentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFeeFeePaymentService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideFeeFeePaymentService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideFeeFeePaymentService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideFeeFeePaymentService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CideFeeFeePaymentService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -3838,6 +4387,9 @@ class FeePaymentListComponent {
     confirmationService = inject(ConfirmationService);
     notificationService = inject(NotificationService);
     rightsService = inject(RightsService);
+    appStateService = inject(AppStateService);
+    // Breadcrumb data for shared wrapper
+    breadcrumbData = signal([], ...(ngDevMode ? [{ debugName: "breadcrumbData" }] : []));
     paymentDetailsRendererTemplate = viewChild.required('paymentDetailsRendererTemplate');
     amountRendererTemplate = viewChild.required('amountRendererTemplate');
     statusRendererTemplate = viewChild.required('statusRendererTemplate');
@@ -3974,8 +4526,19 @@ class FeePaymentListComponent {
         // Initialize rights for fee payment management
         this.rightsService.initializeRights('fee_payment');
         console.log('💰 Fee Payment List Component initialized');
+        this.initializeBreadcrumbData();
         this.loadFeePayments();
     }
+    initializeBreadcrumbData() {
+        this.breadcrumbData.set([
+            {
+                id: 'list',
+                label: 'List',
+                icon: 'list',
+                url: undefined
+            }
+        ]);
+    }
     ngOnDestroy() {
         // Cleanup if needed
     }
@@ -4207,10 +4770,10 @@ class FeePaymentListComponent {
     getStatusText(payment) {
         return payment.feepay_status || 'Unknown';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", 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 }], ngImport: i0, template: "<!-- Fee Payment Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Header Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div\r\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n\r\n        <!-- Title -->\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Payment Management</h5>\r\n        </div>\r\n\r\n        <!-- Actions -->\r\n        <div\r\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n          <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"processPayment()\">\r\n            Record Payment\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n\r\n      <!-- Data Grid Component -->\r\n      <div class=\"tw-h-full 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\r\n    </div>\r\n  </div>\r\n\r\n</div>\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-sm tw-text-gray-500 tw-truncate\">ID: {{ row.feepay_student_id || 'N/A' }}</div>\r\n  </div>\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 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 === 'SUCCESS' || row.feepay_status === 'COMPLETED' ? 'check_circle' : \r\n         row.feepay_status === 'PENDING' ? 'schedule' : 'error' }}\r\n    </cide-ele-icon>\r\n    {{ getStatusText(row) }}\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"getDropdownConfig()\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n\r\n", 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: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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 }], 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=\"sm\" leftIcon=\"add\" (click)=\"processPayment()\">\r\n      Record Payment\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"tw-table tw-w-full tw-h-full\">\r\n    <!-- Main Content Area -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n\r\n        <!-- Data Grid Component -->\r\n        <div class=\"tw-h-full 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\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-sm tw-text-gray-500 tw-truncate\">ID: {{ row.feepay_student_id || 'N/A' }}</div>\r\n  </div>\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 === 'SUCCESS' || row.feepay_status === 'COMPLETED' ? 'check_circle' :\r\n      row.feepay_status === 'PENDING' ? 'schedule' : 'error' }}\r\n    </cide-ele-icon>\r\n    {{ getStatusText(row) }}\r\n  </span>\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: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-fee-payment-list', standalone: true, imports: [
                         CommonModule,
@@ -4218,9 +4781,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideIconComponent,
                         CideEleButtonComponent,
                         CideEleDataGridComponent,
-                        CideEleDropdownComponent
-                    ], template: "<!-- Fee Payment Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Header Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div\r\n        class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n\r\n        <!-- Title -->\r\n        <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n          <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Payment Management</h5>\r\n        </div>\r\n\r\n        <!-- Actions -->\r\n        <div\r\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n          <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"processPayment()\">\r\n            Record Payment\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n\r\n      <!-- Data Grid Component -->\r\n      <div class=\"tw-h-full 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\r\n    </div>\r\n  </div>\r\n\r\n</div>\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-sm tw-text-gray-500 tw-truncate\">ID: {{ row.feepay_student_id || 'N/A' }}</div>\r\n  </div>\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 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 === 'SUCCESS' || row.feepay_status === 'COMPLETED' ? 'check_circle' : \r\n         row.feepay_status === 'PENDING' ? 'schedule' : 'error' }}\r\n    </cide-ele-icon>\r\n    {{ getStatusText(row) }}\r\n  </span>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n  <cide-ele-dropdown \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"getDropdownConfig()\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>\r\n\r\n", 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"] }]
-        }] });
+                        CideEleDropdownComponent,
+                        CideLytSharedWrapperComponent
+                    ], 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=\"sm\" leftIcon=\"add\" (click)=\"processPayment()\">\r\n      Record Payment\r\n    </button>\r\n  </div>\r\n\r\n  <div class=\"tw-table tw-w-full tw-h-full\">\r\n    <!-- Main Content Area -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n\r\n        <!-- Data Grid Component -->\r\n        <div class=\"tw-h-full 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\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-sm tw-text-gray-500 tw-truncate\">ID: {{ row.feepay_student_id || 'N/A' }}</div>\r\n  </div>\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 === 'SUCCESS' || row.feepay_status === 'COMPLETED' ? 'check_circle' :\r\n      row.feepay_status === 'PENDING' ? 'schedule' : 'error' }}\r\n    </cide-ele-icon>\r\n    {{ getStatusText(row) }}\r\n  </span>\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"] }]
+        }], 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 }] }] } });
 
 var feePaymentList_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4237,12 +4801,14 @@ class FeePaymentProcessComponent {
     notificationService = inject(NotificationService);
     confirmationService = inject(ConfirmationService);
     rightsService = inject(RightsService);
+    appStateService = inject(AppStateService);
+    generalMasterService = inject(GENERAL_MASTER_SERVICE_TOKEN);
     paymentForm = this.fb.group({
         student_id: ['', [Validators.required]],
         student_search: [''],
         feepay_payment_date: [new Date().toISOString().split('T')[0], [Validators.required]],
-        feepay_payment_mode: ['CASH', [Validators.required]],
-        feepay_payment_method: ['CASH', [Validators.required]],
+        feepay_payment_mode: ['OFFLINE'],
+        feepay_payment_method: ['', [Validators.required]],
         feepay_payment_reference: [''],
         feepay_bank_name: [''],
         feepay_bank_branch_name: [''],
@@ -4253,7 +4819,7 @@ class FeePaymentProcessComponent {
         feepay_bank_account_number: [''],
         feepay_transaction_reference: [''],
         feepay_discount_percentage: [0, [Validators.min(0), Validators.max(100)]],
-        feepay_discount_on: [''],
+        feepay_discount_on: ['SUB_TOTAL'],
         feepay_discount_reason: [''],
         feepay_remarks: [''],
         pay_full_outstanding: [false],
@@ -4265,51 +4831,83 @@ class FeePaymentProcessComponent {
     outstandingFees = signal([], ...(ngDevMode ? [{ debugName: "outstandingFees" }] : []));
     showChequeDetails = signal(false, ...(ngDevMode ? [{ debugName: "showChequeDetails" }] : []));
     showBankDetails = signal(false, ...(ngDevMode ? [{ debugName: "showBankDetails" }] : []));
-    // Payment method options
-    paymentMethodOptions = [
-        { value: 'CASH', label: 'Cash' },
-        { value: 'CHEQUE', label: 'Cheque' },
-        { value: 'DD', label: 'DD' },
-        { value: 'ONLINE', label: 'Online' },
-        { value: 'CARD', label: 'Card' },
-        { value: 'UPI', label: 'UPI' },
-        { value: 'NET_BANKING', label: 'Net Banking' },
-        { value: 'BANK_TRANSFER', label: 'Bank Transfer' }
-    ];
+    // Grid ViewChilds for templates
+    selectTemplate = viewChild('selectTemplate', ...(ngDevMode ? [{ debugName: "selectTemplate" }] : []));
+    amountPaidTemplate = viewChild('amountPaidTemplate', ...(ngDevMode ? [{ debugName: "amountPaidTemplate" }] : []));
+    outstandingTemplate = viewChild('outstandingTemplate', ...(ngDevMode ? [{ debugName: "outstandingTemplate" }] : []));
+    dateTemplate = viewChild('dateTemplate', ...(ngDevMode ? [{ debugName: "dateTemplate" }] : []));
+    templateRenderers = computed(() => ({
+        selectRenderer: this.selectTemplate(),
+        amountPaidRenderer: this.amountPaidTemplate(),
+        outstandingRenderer: this.outstandingTemplate(),
+        dateRenderer: this.dateTemplate()
+    }), ...(ngDevMode ? [{ debugName: "templateRenderers" }] : []));
+    gridConfig = computed(() => ({
+        id: 'outstanding-fees-grid',
+        columns: [
+            { key: 'is_selected', header: '', type: 'custom', width: '40px', renderer: 'selectRenderer', align: 'center' },
+            { key: 'fee_head', header: 'Fee Head', type: 'text', width: 'auto' },
+            { key: 'fee_category', header: 'Category', type: 'text', width: '120px' },
+            { key: 'due_date', header: 'Due Date', type: 'custom', width: '100px', renderer: 'dateRenderer' },
+            { key: 'outstanding_amount', header: 'Outstanding', type: 'custom', width: '110px', renderer: 'outstandingRenderer', align: 'right' },
+            { key: 'late_fee', header: 'Late Fee', type: 'number', width: '80px', align: 'right' },
+            { key: 'amount_paid', header: 'Amount to Pay', type: 'custom', width: '130px', renderer: 'amountPaidRenderer', align: 'right' }
+        ],
+        data: this.outstandingFees(),
+        trackBy: 'id',
+        pagination: { enabled: false, pageSize: 100, pageSizeOptions: [100], showQuickJump: false, showPageInfo: false, showRefresh: false },
+        search: { enabled: false, placeholder: '', searchableColumns: [] },
+        loading: { useDefer: true, skeletonRows: 3, showOverlay: this.loading() },
+        bordered: true,
+        compact: true,
+        striped: true,
+        responsive: true,
+        tableClass: 'tw-text-xs'
+    }), ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    // Track form values for reactive computations
+    formValues = toSignal(this.paymentForm.valueChanges, { initialValue: this.paymentForm.value });
+    // Breadcrumb data for shared wrapper
+    breadcrumbData = signal([], ...(ngDevMode ? [{ debugName: "breadcrumbData" }] : []));
+    // Payment method options from General Master
+    paymentMethodOptions = signal([], ...(ngDevMode ? [{ debugName: "paymentMethodOptions" }] : []));
+    paymentMethodsRaw = signal([], ...(ngDevMode ? [{ debugName: "paymentMethodsRaw" }] : []));
+    paymentStatusesRaw = signal([], ...(ngDevMode ? [{ debugName: "paymentStatusesRaw" }] : []));
+    studentListOptions = signal([], ...(ngDevMode ? [{ debugName: "studentListOptions" }] : []));
     // Computed values
     selectedFeeItems = computed(() => {
-        const items = this.feeItemsArray.controls;
-        return items.filter((control, index) => {
-            const isSelected = control.get('is_selected')?.value;
-            return isSelected;
-        });
+        const values = this.formValues();
+        const items = values.fee_items || [];
+        return items.filter((item) => item.is_selected);
     }, ...(ngDevMode ? [{ debugName: "selectedFeeItems" }] : []));
     totalFeeAmount = computed(() => {
-        let total = 0;
-        this.feeItemsArray.controls.forEach(control => {
-            if (control.get('is_selected')?.value) {
-                total += parseFloat(control.get('amount_paid')?.value || '0');
+        const values = this.formValues(); // usage tracks dependency
+        const items = values.fee_items || [];
+        return items.reduce((acc, item) => {
+            if (item.is_selected) {
+                return acc + (parseFloat(String(item.amount_paid || '0')) || 0);
             }
-        });
-        return total;
+            return acc;
+        }, 0);
     }, ...(ngDevMode ? [{ debugName: "totalFeeAmount" }] : []));
     totalLateFee = computed(() => {
-        let total = 0;
-        this.feeItemsArray.controls.forEach(control => {
-            if (control.get('is_selected')?.value) {
-                total += parseFloat(control.get('late_fee')?.value || '0');
+        const values = this.formValues();
+        const items = values.fee_items || [];
+        return items.reduce((acc, item) => {
+            if (item.is_selected) {
+                return acc + (parseFloat(String(item.late_fee || '0')) || 0);
             }
-        });
-        return total;
+            return acc;
+        }, 0);
     }, ...(ngDevMode ? [{ debugName: "totalLateFee" }] : []));
     totalPenalty = computed(() => {
-        let total = 0;
-        this.feeItemsArray.controls.forEach(control => {
-            if (control.get('is_selected')?.value) {
-                total += parseFloat(control.get('penalty')?.value || '0');
+        const values = this.formValues();
+        const items = values.fee_items || [];
+        return items.reduce((acc, item) => {
+            if (item.is_selected) {
+                return acc + (parseFloat(String(item.penalty || '0')) || 0);
             }
-        });
-        return total;
+            return acc;
+        }, 0);
     }, ...(ngDevMode ? [{ debugName: "totalPenalty" }] : []));
     totalPayable = computed(() => {
         return this.totalFeeAmount() + this.totalLateFee() + this.totalPenalty();
@@ -4319,100 +4917,152 @@ class FeePaymentProcessComponent {
         return this.paymentForm.get('fee_items');
     }
     ngOnInit() {
-        // Initialize rights for fee payment management
-        this.rightsService.initializeRights('fee_payment');
+        console.log('💰 Fee Payment Process Component initialized');
+        this.updateBreadcrumbData();
+        this.loadPaymentMethodMasters();
+        this.loadPaymentStatusMasters();
+        this.setupFormListeners();
         this.setupPaymentMethodListener();
     }
+    loadPaymentStatusMasters() {
+        this.generalMasterService.getMasterList({ sygmt_code: 'payment_status' }).subscribe({
+            next: (response) => {
+                if (response?.success && response?.data) {
+                    this.paymentStatusesRaw.set(Array.isArray(response.data) ? response.data : [response.data]);
+                }
+            }
+        });
+    }
+    loadPaymentMethodMasters() {
+        this.generalMasterService.getMasterList({ sygmt_code: 'payment_method' }).subscribe({
+            next: (response) => {
+                if (response?.success && response?.data) {
+                    const data = Array.isArray(response.data) ? response.data : [response.data];
+                    this.paymentMethodsRaw.set(data);
+                    const options = data.map((item) => ({
+                        label: item.sygms_title || '',
+                        value: item._id || ''
+                    }));
+                    this.paymentMethodOptions.set(options);
+                    if (options.length > 0 && !this.paymentForm.get('feepay_payment_method')?.value) {
+                        this.paymentForm.patchValue({ feepay_payment_method: options[0].value });
+                    }
+                }
+            },
+            error: (err) => console.error('Error loading payment methods:', err)
+        });
+    }
+    setupFormListeners() {
+        this.rightsService.initializeRights('fee_payment');
+        this.onSearchStudents('');
+        this.paymentForm.get('student_id')?.valueChanges
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe(studentId => {
+            if (studentId) {
+                this.loadStudentDetails(studentId);
+            }
+            else {
+                this.selectedStudent.set(null);
+                this.outstandingFees.set([]);
+                this.initializeFeeItems([]);
+            }
+        });
+    }
     setupPaymentMethodListener() {
         this.paymentForm.get('feepay_payment_method')?.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe(method => {
             this.showChequeDetails.set(method === 'CHEQUE' || method === 'DD');
             this.showBankDetails.set(method === 'BANK_TRANSFER' || method === 'NET_BANKING');
-            // Set required validators based on payment method
-            if (this.showChequeDetails()) {
-                this.paymentForm.get('feepay_cheque_number')?.setValidators([Validators.required]);
-                this.paymentForm.get('feepay_cheque_date')?.setValidators([Validators.required]);
-                this.paymentForm.get('feepay_bank_name')?.setValidators([Validators.required]);
-            }
-            else {
-                this.paymentForm.get('feepay_cheque_number')?.clearValidators();
-                this.paymentForm.get('feepay_cheque_date')?.clearValidators();
-                this.paymentForm.get('feepay_bank_name')?.clearValidators();
-            }
-            if (this.showBankDetails()) {
-                this.paymentForm.get('feepay_transaction_reference')?.setValidators([Validators.required]);
-            }
-            else {
-                this.paymentForm.get('feepay_transaction_reference')?.clearValidators();
-            }
+            this.paymentForm.get('feepay_cheque_number')?.clearValidators();
+            this.paymentForm.get('feepay_cheque_date')?.clearValidators();
+            this.paymentForm.get('feepay_bank_name')?.clearValidators();
+            this.paymentForm.get('feepay_transaction_reference')?.clearValidators();
             this.paymentForm.updateValueAndValidity();
         });
     }
-    onStudentSearch(query) {
-        const searchQuery = String(query || '');
-        if (searchQuery.length < 3) {
-            this.selectedStudent.set(null);
-            this.paymentForm.patchValue({ student_id: '' });
-            return;
-        }
+    onStudentSearch(event) {
+        const query = typeof event === 'object' ? event.query : String(event || '');
+        this.onSearchStudents(query);
+    }
+    onSearchStudents(query) {
         this.loading.set(true);
-        // Search for students using user master service
         const payload = {
-            query: searchQuery,
+            query,
             pageIndex: 1,
-            pageSize: 10,
-            pagination: true
+            pageSize: 50,
+            pagination: true,
+            syenm_entity_id_syen: this.appStateService.getActiveEntityValue()?._id || '',
+            syutm_user_type: 'STUDENT'
         };
         this.userMasterService.getUserList(payload)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (response) => {
                 if (response?.success && response?.data) {
-                    // Filter for students only
-                    const students = response.data.filter((user) => user.user_type_mapping?.syutm_user_type === 'STUDENT');
-                    if (students.length === 0) {
-                        this.notificationService.warning('No students found matching your search.');
-                        this.selectedStudent.set(null);
-                        this.paymentForm.patchValue({ student_id: '' });
-                        this.loading.set(false);
-                        return;
-                    }
-                    // Use first matching student (or could show dropdown for multiple matches)
-                    const student = students[0];
-                    const studentData = {
-                        _id: student._id || '',
-                        name: student.user_fullname || 'Unknown',
-                        student_id: student.user_type_mapping?.syutm_type_specific_id || student._id || '',
-                        class: student.class || 'N/A',
-                        section: student.section || 'N/A'
-                    };
-                    this.selectedStudent.set(studentData);
-                    this.paymentForm.patchValue({ student_id: studentData._id });
-                    this.loadOutstandingFees(studentData._id);
+                    const options = response.data.map((user) => {
+                        const studentName = user.user_fullname || 'Unknown';
+                        const specificId = user.user_type_mapping?.syutm_type_specific_id || '';
+                        const userId = user._id || '';
+                        return {
+                            label: `${studentName}${specificId ? ' (' + specificId + ')' : ''}`,
+                            value: userId
+                        };
+                    });
+                    this.studentListOptions.set(options);
                 }
                 else {
-                    this.notificationService.warning('No students found matching your search.');
-                    this.selectedStudent.set(null);
-                    this.paymentForm.patchValue({ student_id: '' });
+                    this.studentListOptions.set([]);
                 }
                 this.loading.set(false);
             },
             error: (err) => {
                 console.error('Error searching for students:', err);
-                this.notificationService.error('Failed to search for students. Please try again.');
-                this.selectedStudent.set(null);
-                this.paymentForm.patchValue({ student_id: '' });
+                this.studentListOptions.set([]);
                 this.loading.set(false);
             }
         });
     }
+    onStudentSelect(event) {
+        const studentId = typeof event === 'object' ? (event.value || event._id) : event;
+        if (studentId) {
+            this.paymentForm.get('student_id')?.setValue(studentId);
+        }
+    }
+    loadStudentDetails(studentId) {
+        const payload = {
+            _id: studentId,
+            pagination: false,
+            syenm_entity_id_syen: this.appStateService.getActiveEntityValue()?._id || '',
+            syutm_user_type: 'STUDENT'
+        };
+        this.userMasterService.getUserList(payload).subscribe({
+            next: (response) => {
+                if (response?.success && response?.data) {
+                    const students = Array.isArray(response.data) ? response.data : [response.data];
+                    if (students.length > 0) {
+                        const studentData = students[0];
+                        this.selectedStudent.set({
+                            _id: studentData._id || '',
+                            name: (studentData.admap_first_name || studentData.user_fullname || 'Unknown') + ' ' + (studentData.admap_last_name || ''),
+                            student_id: studentData.admap_student_id || studentData.user_type_mapping?.syutm_type_specific_id || studentData._id || '',
+                            class: studentData.class || 'N/A',
+                            section: studentData.section || 'N/A',
+                            academic_year_id: studentData.admap_academic_year_id_acayr?._id || studentData.admap_academic_year_id_acayr
+                        });
+                        this.loadOutstandingFees(studentId);
+                    }
+                }
+            },
+            error: (err) => console.error('Error fetching student details:', err)
+        });
+    }
     loadOutstandingFees(studentId) {
         this.loading.set(true);
-        // Get outstanding fees from fee assignments
         const payload = {
-            feeas_student_id: studentId,
-            feeas_status: 'PENDING' // Get only pending or partially paid assignments
+            feeas_student_id_auth: studentId,
+            feeas_entity_id_syen: this.appStateService.getActiveEntityValue()?._id,
+            feeas_academic_year_id_acayr: this.appStateService.getActiveAcademicYearValue()?._id
         };
         this.feeAssignmentService.getFeeAssignmentList(payload).subscribe({
             next: (response) => {
@@ -4420,21 +5070,22 @@ class FeePaymentProcessComponent {
                     const today = new Date();
                     const outstandingFees = response.data
                         .filter((assignment) => {
-                        // Only include assignments with outstanding amount > 0
-                        const outstanding = assignment.feeas_amount_remaining ||
-                            (assignment.feeas_final_amount || 0) - (assignment.feeas_amount_paid || 0);
-                        return outstanding > 0;
+                        const total = assignment.feeas_total_amount || 0;
+                        const paid = assignment.feeas_amount_paid || 0;
+                        const outstanding = assignment.feeas_outstanding_amount !== undefined ? assignment.feeas_outstanding_amount : (total - paid);
+                        return outstanding > 0 && assignment.feeas_status !== 'PAID';
                     })
                         .map((assignment) => {
-                        const dueDate = assignment.feeas_due_date ? new Date(assignment.feeas_due_date) : null;
-                        const outstanding = assignment.feeas_amount_remaining ||
-                            (assignment.feeas_final_amount || 0) - (assignment.feeas_amount_paid || 0);
+                        const total = assignment.feeas_total_amount || 0;
+                        const paid = assignment.feeas_amount_paid || 0;
+                        const outstanding = assignment.feeas_outstanding_amount !== undefined ? assignment.feeas_outstanding_amount : (total - paid);
                         const lateFee = assignment.feeas_late_fee_applied || 0;
+                        const dueDate = assignment.feeas_due_date ? new Date(assignment.feeas_due_date) : null;
                         return {
                             id: assignment._id || '',
                             assignment_id: assignment._id || '',
                             fee_head: assignment.feeas_fee_name || 'Fee',
-                            fee_category: assignment.feeas_fee_category_sygms || 'OTHER',
+                            fee_category: assignment.feeas_fee_category_sygms?.sygms_title || assignment.feeas_fee_category_sygms || 'OTHER',
                             due_date: dueDate || new Date(),
                             outstanding_amount: outstanding,
                             late_fee: lateFee,
@@ -4444,96 +5095,84 @@ class FeePaymentProcessComponent {
                     });
                     this.outstandingFees.set(outstandingFees);
                     this.initializeFeeItems(outstandingFees);
+                    // Try to discover class/section info from assignments if not already present or if we find something better
+                    const infoSource = response.data.find((a) => a.feeas_class_program_id_acacpm?.acacpm_alise_title ||
+                        a.feeas_section_id_acapts?.acapts_name ||
+                        a.class || a.section);
+                    if (infoSource && this.selectedStudent()) {
+                        const current = this.selectedStudent();
+                        const newClass = infoSource.class || infoSource.feeas_class_program_id_acacpm?.acacpm_alise_title;
+                        const newSection = infoSource.section || infoSource.feeas_section_id_acapts?.acapts_name;
+                        if ((newClass && (current.class === 'N/A' || !current.class)) ||
+                            (newSection && (current.section === 'N/A' || !current.section))) {
+                            this.selectedStudent.set({
+                                ...current,
+                                class: newClass || current.class,
+                                section: newSection || current.section
+                            });
+                        }
+                    }
                 }
-                else {
-                    this.outstandingFees.set([]);
-                    this.initializeFeeItems([]);
-                }
+                this.loading.set(false);
             },
             error: (err) => {
-                console.error('Error loading outstanding fees:', err);
-                this.notificationService.error('Failed to load outstanding fees');
-                this.outstandingFees.set([]);
-                this.initializeFeeItems([]);
-            },
-            complete: () => {
+                console.error('Error loading fees:', err);
                 this.loading.set(false);
             }
         });
     }
     initializeFeeItems(fees) {
-        // Clear existing items
-        while (this.feeItemsArray.length !== 0) {
-            this.feeItemsArray.removeAt(0);
-        }
-        // Add fee items
+        const feeItems = this.paymentForm.get('fee_items');
+        feeItems.clear();
         fees.forEach(fee => {
-            const itemGroup = this.fb.group({
+            feeItems.push(this.fb.group({
+                is_selected: [false],
                 assignment_id: [fee.assignment_id],
                 fee_head: [fee.fee_head],
                 fee_category: [fee.fee_category],
+                due_date: [fee.due_date],
                 outstanding_amount: [fee.outstanding_amount],
-                is_selected: [false],
-                amount_paid: [fee.outstanding_amount, [Validators.required, Validators.min(0)]],
                 late_fee: [fee.late_fee],
-                penalty: [fee.penalty || 0]
-            });
-            // Set max validator for amount_paid
-            itemGroup.get('amount_paid')?.setValidators([
-                Validators.required,
-                Validators.min(0),
-                Validators.max(fee.outstanding_amount)
-            ]);
-            this.feeItemsArray.push(itemGroup);
+                penalty: [fee.penalty || 0],
+                amount_paid: [0, [Validators.min(0), Validators.max(fee.outstanding_amount + fee.late_fee)]]
+            }));
         });
     }
-    togglePayFullOutstanding() {
-        const payFull = this.paymentForm.get('pay_full_outstanding')?.value;
-        this.feeItemsArray.controls.forEach(control => {
-            control.patchValue({ is_selected: payFull });
-            if (payFull) {
-                const outstanding = control.get('outstanding_amount')?.value || 0;
-                control.patchValue({ amount_paid: outstanding });
-            }
-        });
+    toggleFeeItem(index) {
+        const item = this.feeItemsArray.at(index);
+        const isSelected = item.get('is_selected')?.value;
+        const outstanding = item.get('outstanding_amount')?.value || 0;
+        const lateFee = item.get('late_fee')?.value || 0;
+        const penalty = item.get('penalty')?.value || 0;
+        item.get('amount_paid')?.setValue(isSelected ? (outstanding + lateFee + penalty) : 0);
     }
     selectAllFees() {
-        this.feeItemsArray.controls.forEach(control => {
-            control.patchValue({ is_selected: true });
-            const outstanding = control.get('outstanding_amount')?.value || 0;
-            control.patchValue({ amount_paid: outstanding });
+        this.feeItemsArray.controls.forEach((_, i) => {
+            this.feeItemsArray.at(i).get('is_selected')?.setValue(true);
+            this.toggleFeeItem(i);
         });
     }
     clearAllFees() {
-        this.feeItemsArray.controls.forEach(control => {
-            control.patchValue({ is_selected: false, amount_paid: 0 });
+        this.feeItemsArray.controls.forEach((_, i) => {
+            this.feeItemsArray.at(i).get('is_selected')?.setValue(false);
+            this.toggleFeeItem(i);
         });
-        this.paymentForm.patchValue({ pay_full_outstanding: false });
-    }
-    toggleFeeItem(index) {
-        const control = this.feeItemsArray.at(index);
-        const isSelected = control.get('is_selected')?.value;
-        control.patchValue({ is_selected: !isSelected });
-        if (!isSelected) {
-            const outstanding = control.get('outstanding_amount')?.value || 0;
-            control.patchValue({ amount_paid: outstanding });
-        }
-        else {
-            control.patchValue({ amount_paid: 0 });
-        }
     }
     onAmountChange(index, value) {
-        const control = this.feeItemsArray.at(index);
-        const outstanding = control.get('outstanding_amount')?.value || 0;
-        const numValue = parseFloat(String(value || '0')) || 0;
-        if (numValue > outstanding) {
-            control.patchValue({ amount_paid: outstanding });
-            this.notificationService.warning('Amount cannot exceed outstanding amount.');
+        const item = this.feeItemsArray.at(index);
+        const outstanding = item.get('outstanding_amount')?.value || 0;
+        const lateFee = item.get('late_fee')?.value || 0;
+        const penalty = item.get('penalty')?.value || 0;
+        const max = outstanding + lateFee + penalty;
+        const val = parseFloat(String(value || '0')) || 0;
+        if (val > max) {
+            item.get('amount_paid')?.setValue(max);
+            this.notificationService.warning('Amount exceeds total payable');
         }
     }
     onSubmit() {
         if (!this.rightsService.hasRight('CREATE')) {
-            this.notificationService.error('You do not have permission to process payments');
+            this.notificationService.error('Insufficient permissions');
             return;
         }
         if (this.paymentForm.invalid || this.submitting()) {
@@ -4542,63 +5181,36 @@ class FeePaymentProcessComponent {
             return;
         }
         if (this.selectedFeeItems().length === 0) {
-            this.notificationService.warning('Please select at least one fee item to pay.');
-            return;
-        }
-        if (this.totalPayable() <= 0) {
-            this.notificationService.warning('Total payable amount must be greater than zero.');
+            this.notificationService.warning('Select fees to pay');
             return;
         }
         this.submitting.set(true);
-        const formValue = this.paymentForm.value;
-        const selectedItems = this.feeItemsArray.controls
-            .map((control, index) => ({ control, index }))
-            .filter(({ control }) => control.get('is_selected')?.value)
-            .map(({ control, index }) => ({
-            assignment_id: control.get('assignment_id')?.value,
-            amount_paid: control.get('amount_paid')?.value,
-            late_fee: control.get('late_fee')?.value,
-            penalty: control.get('penalty')?.value
-        }));
-        // Create payload with all fields - using Record to allow all schema fields
-        const payloadData = {
-            feepay_student_id: formValue.student_id,
-            feepay_payment_date: new Date(formValue.feepay_payment_date),
-            feepay_payment_mode: formValue.feepay_payment_mode,
-            feepay_payment_reference: formValue.feepay_payment_reference ||
-                formValue.feepay_cheque_number ||
-                formValue.feepay_transaction_reference,
-            feepay_bank_name: formValue.feepay_bank_name,
-            feepay_bank_branch_name: formValue.feepay_bank_branch_name,
-            feepay_bank_ifsc_code: formValue.feepay_bank_ifsc_code,
-            feepay_instrument_date: formValue.feepay_instrument_date ? new Date(formValue.feepay_instrument_date) : undefined,
-            feepay_cheque_number: formValue.feepay_cheque_number,
-            feepay_cheque_date: formValue.feepay_cheque_date ? new Date(formValue.feepay_cheque_date) : undefined,
-            feepay_bank_account_number: formValue.feepay_bank_account_number,
-            feepay_transaction_reference: formValue.feepay_transaction_reference,
-            feepay_discount_percentage: formValue.feepay_discount_percentage || 0,
-            feepay_discount_on: formValue.feepay_discount_on,
-            feepay_discount_reason: formValue.feepay_discount_reason,
+        const val = this.paymentForm.value;
+        const selectedGM = this.paymentMethodsRaw().find(m => m._id === val.feepay_payment_method);
+        const payload = {
+            feepay_student_id_auth: val.student_id,
+            feepay_academic_year_id_acayr: this.selectedStudent()?.academic_year_id || this.outstandingFees()?.[0]?.id,
+            feepay_entity_id_syen: this.appStateService.getActiveEntityValue()?._id,
+            feepay_payment_date: new Date(val.feepay_payment_date),
+            feepay_payment_mode_id_sygms: val.feepay_payment_method,
+            feepay_payment_reference: val.feepay_payment_reference || val.feepay_cheque_number || val.feepay_transaction_reference,
             feepay_total_amount: this.totalPayable(),
-            feepay_late_fee_amount: this.totalLateFee(),
-            feepay_status: 'SUCCESS',
-            feepay_remarks: formValue.feepay_remarks
+            feepay_status_id_sygms: this.paymentStatusesRaw().find(s => s.sygms_code === 'feepay_status_success')?._id,
+            feepay_remarks: val.feepay_remarks
         };
-        const payload = new MFeePaymentInsertUpdatePayload(payloadData);
         this.feePaymentService.saveUpdateFeePayment(payload).subscribe({
-            next: (response) => {
-                if (response?.success) {
-                    this.notificationService.success('Payment recorded successfully!');
+            next: (res) => {
+                if (res?.success) {
+                    this.notificationService.success('Payment recorded');
                     this.router.navigate(['/control-panel/payment']);
                 }
                 else {
-                    this.notificationService.error(response?.message || 'Failed to record payment.');
-                    this.submitting.set(false);
+                    this.notificationService.error(res?.message || 'Failed');
                 }
+                this.submitting.set(false);
             },
-            error: (error) => {
-                console.error('Error recording payment:', error);
-                this.notificationService.error('Failed to record payment. Please try again.');
+            error: () => {
+                this.notificationService.error('Error occurred');
                 this.submitting.set(false);
             }
         });
@@ -4606,31 +5218,36 @@ class FeePaymentProcessComponent {
     onCancel() {
         if (this.paymentForm.dirty) {
             this.confirmationService.ask({
-                title: 'Discard Changes?',
+                title: 'Unsaved Changes',
                 message: 'You have unsaved changes. Are you sure you want to leave?',
-                confirmText: 'Discard',
-                cancelText: 'Cancel',
-                type: 'warning'
-            }).then((confirmed) => {
-                if (confirmed) {
-                    this.router.navigate(['/control-panel/payment']);
-                }
-            });
+                confirmText: 'Yes, Leave',
+                cancelText: 'Stay'
+            }).then(res => res && this.router.navigate(['/control-panel/payment']));
         }
         else {
             this.router.navigate(['/control-panel/payment']);
         }
     }
     formatCurrency(amount) {
-        return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
+        return `₹${(amount || 0).toLocaleString('en-IN', { minimumFractionDigits: 2 })}`;
     }
     isOverdue(date) {
         return new Date(date) < new Date();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentProcessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeePaymentProcessComponent, isStandalone: true, selector: "cide-fee-payment-process", ngImport: i0, template: "<!-- Payment Process Form -->\n<div class=\"tw-w-full tw-h-full\">\n  <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"paymentForm\" \n    [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Header Section -->\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\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\">\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\">\n          \n          <!-- Title -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Record Payment</h5>\n          </div>\n\n          <!-- Actions -->\n          <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n            <!-- Back button or other actions can be added here if needed -->\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          <div class=\"tw-space-y-4\">\n\n            <!-- Student Information -->\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Student Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <div>\n                  <cide-ele-input \n                    label=\"Search Student\" \n                    formControlName=\"student_search\"\n                    placeholder=\"Enter student name or ID...\"\n                    size=\"sm\"\n                    leadingIcon=\"search\"\n                    (ngModelChange)=\"onStudentSearch($event)\">\n                  </cide-ele-input>\n                  \n                  @if (selectedStudent()) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded\">\n                      <div class=\"tw-text-sm tw-font-medium tw-text-green-900\">{{ selectedStudent()?.name }}</div>\n                      <div class=\"tw-text-xs tw-text-green-700\">ID: {{ selectedStudent()?.student_id }}</div>\n                      @if (selectedStudent()?.class) {\n                        <div class=\"tw-text-xs tw-text-green-600\">{{ selectedStudent()?.class }} / {{ selectedStudent()?.section }}</div>\n                      }\n                    </div>\n                  }\n                </div>\n\n                <cide-ele-input \n                  label=\"Payment Date\" \n                  formControlName=\"feepay_payment_date\"\n                  type=\"date\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-input>\n              </div>\n            </div>\n\n            <!-- Fee Selection -->\n            @if (selectedStudent() && outstandingFees().length > 0) {\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">Select Fees to Pay</h6>\n                  <div class=\"tw-flex tw-items-center tw-gap-3\">\n                    <div class=\"tw-flex tw-items-center tw-gap-2\">\n                      <cide-ele-input \n                        formControlName=\"pay_full_outstanding\" \n                        type=\"checkbox\" \n                        size=\"sm\"\n                        (change)=\"togglePayFullOutstanding()\">\n                      </cide-ele-input>\n                      <span class=\"tw-text-sm tw-text-gray-700\">Pay full outstanding</span>\n                    </div>\n                    <button cideEleButton type=\"button\" variant=\"success\" size=\"xs\" (click)=\"selectAllFees()\">\n                      Select All\n                    </button>\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"clearAllFees()\">\n                      Clear\n                    </button>\n                  </div>\n                </div>\n\n                <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-max-h-80 tw-overflow-y-auto tw-border tw-border-gray-200 tw-rounded-lg tw-p-3\">\n                  @for (item of feeItemsArray.controls; track $index) {\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-p-2 tw-bg-gray-50 tw-rounded tw-border tw-border-gray-200\"\n                      [formGroupName]=\"$index\">\n                      \n                      <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1\">\n                        <cide-ele-input \n                          formControlName=\"is_selected\" \n                          type=\"checkbox\" \n                          size=\"sm\"\n                          (change)=\"toggleFeeItem($index)\">\n                        </cide-ele-input>\n                        \n                        <div class=\"tw-flex-1\">\n                          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n                            {{ item.get('fee_head')?.value }}\n                          </div>\n                          <div class=\"tw-text-xs tw-text-gray-500\">\n                            Outstanding: {{ formatCurrency(item.get('outstanding_amount')?.value || 0) }}\n                            @if (item.get('late_fee')?.value > 0) {\n                              <span class=\"tw-text-red-600\"> | Late Fee: {{ formatCurrency(item.get('late_fee')?.value) }}</span>\n                            }\n                          </div>\n                        </div>\n                      </div>\n\n                      <div class=\"tw-flex tw-items-center tw-gap-2\">\n                        <cide-ele-input \n                          formControlName=\"amount_paid\"\n                          type=\"number\"\n                          placeholder=\"0.00\"\n                          size=\"sm\"\n                          [disabled]=\"!item.get('is_selected')?.value\"\n                          (ngModelChange)=\"onAmountChange($index, $event)\"\n                          class=\"tw-w-28\">\n                        </cide-ele-input>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Payment Details -->\n            @if (selectedStudent()) {\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Payment Details</h6>\n                \n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                  <cide-ele-select \n                    label=\"Payment Method\" \n                    formControlName=\"feepay_payment_method\"\n                    [options]=\"paymentMethodOptions\"\n                    size=\"sm\"\n                    leadingIcon=\"payment\">\n                  </cide-ele-select>\n\n                  <cide-ele-select \n                    label=\"Payment Mode\" \n                    formControlName=\"feepay_payment_mode\"\n                    [options]=\"[{value: 'OFFLINE', label: 'Offline'}, {value: 'ONLINE', label: 'Online'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Cheque/DD Details -->\n                @if (showChequeDetails()) {\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-mb-3\">Cheque/DD Details</h6>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                      <cide-ele-input \n                        label=\"Cheque/DD Number\" \n                        formControlName=\"feepay_cheque_number\"\n                        placeholder=\"Enter cheque/DD number\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Cheque/DD Date\" \n                        formControlName=\"feepay_cheque_date\"\n                        type=\"date\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\n                      <cide-ele-input \n                        label=\"Bank Name\" \n                        formControlName=\"feepay_bank_name\"\n                        placeholder=\"Enter bank name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Branch Name\" \n                        formControlName=\"feepay_bank_branch_name\"\n                        placeholder=\"Enter branch name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-mt-3\">\n                      <cide-ele-input \n                        label=\"IFSC Code\" \n                        formControlName=\"feepay_bank_ifsc_code\"\n                        placeholder=\"Enter IFSC code\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-mt-3\">\n                      <cide-ele-input \n                        label=\"Instrument Date\" \n                        formControlName=\"feepay_instrument_date\"\n                        type=\"date\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                  </div>\n                }\n\n                <!-- Bank Transfer Details -->\n                @if (showBankDetails()) {\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-green-50 tw-rounded tw-border tw-border-green-200\">\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-green-900 tw-mb-3\">Bank Transfer Details</h6>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                      <cide-ele-input \n                        label=\"Bank Name\" \n                        formControlName=\"feepay_bank_name\"\n                        placeholder=\"Enter bank name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Branch Name\" \n                        formControlName=\"feepay_bank_branch_name\"\n                        placeholder=\"Enter branch name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\n                      <cide-ele-input \n                        label=\"IFSC Code\" \n                        formControlName=\"feepay_bank_ifsc_code\"\n                        placeholder=\"Enter IFSC code\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Account Number\" \n                        formControlName=\"feepay_bank_account_number\"\n                        placeholder=\"Enter account number\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-mt-3\">\n                      <cide-ele-input \n                        label=\"Transaction Reference\" \n                        formControlName=\"feepay_transaction_reference\"\n                        placeholder=\"Enter transaction reference\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                  </div>\n                }\n\n                <!-- Discount Section -->\n                <div class=\"tw-mt-4 tw-p-3 tw-bg-purple-50 tw-rounded tw-border tw-border-purple-200\">\n                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-purple-900 tw-mb-3\">Discount Information</h6>\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-input \n                      label=\"Discount (%)\" \n                      formControlName=\"feepay_discount_percentage\"\n                      type=\"number\"\n                      placeholder=\"0\"\n                      size=\"sm\"\n                      [min]=\"0\"\n                      [max]=\"100\">\n                    </cide-ele-input>\n\n                    <cide-ele-select \n                      label=\"Discount On\" \n                      formControlName=\"feepay_discount_on\"\n                      [options]=\"[{value: 'SUB_TOTAL', label: 'Sub Total'}, {value: 'FEE_HEAD', label: 'Fee Head'}, {value: 'TOTAL', label: 'Total'}, {value: 'INSTALLMENT', label: 'Installment'}]\"\n                      size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                  <div class=\"tw-mt-3\">\n                    <cide-ele-textarea \n                      label=\"Discount Reason\" \n                      formControlName=\"feepay_discount_reason\"\n                      placeholder=\"Enter reason for discount...\"\n                      rows=\"2\"\n                      size=\"sm\">\n                    </cide-ele-textarea>\n                  </div>\n                </div>\n\n                <!-- Payment Reference -->\n                <div class=\"tw-mt-4\">\n                  <cide-ele-input \n                    label=\"Payment Reference\" \n                    formControlName=\"feepay_payment_reference\"\n                    placeholder=\"Enter payment reference number\"\n                    size=\"sm\"\n                    leadingIcon=\"receipt\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Remarks -->\n                <div class=\"tw-mt-4\">\n                  <cide-ele-textarea \n                    label=\"Remarks\" \n                    formControlName=\"feepay_remarks\"\n                    placeholder=\"Enter any additional remarks...\"\n                    rows=\"2\" \n                    size=\"sm\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n            }\n\n            <!-- Payment Summary -->\n            @if (selectedStudent() && selectedFeeItems().length > 0) {\n              <div class=\"tw-bg-gradient-to-r tw-from-green-50 tw-to-emerald-50 tw-rounded-lg tw-border tw-border-green-200 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-green-900 tw-mb-3\">Payment Summary</h6>\n                \n                <div class=\"tw-space-y-3\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n                    <span class=\"tw-text-gray-700\">Fee Amount:</span>\n                    <span class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n                  </div>\n                  \n                  @if (totalLateFee() > 0) {\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n                      <span class=\"tw-text-gray-700\">Late Fee Amount:</span>\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalLateFee()) }}</span>\n                    </div>\n                  }\n                  \n                  @if (totalPenalty() > 0) {\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n                      <span class=\"tw-text-gray-700\">Penalty Amount:</span>\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalPenalty()) }}</span>\n                    </div>\n                  }\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-3 tw-border-t-2 tw-border-green-300 tw-mt-2\">\n                    <span class=\"tw-text-lg tw-font-bold tw-text-green-900\">Total Payable:</span>\n                    <span class=\"tw-text-2xl tw-font-bold tw-text-green-700\">{{ formatCurrency(totalPayable()) }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Form Validation Errors -->\n          <!-- Action Buttons -->\n          <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n              [disabled]=\"loading()\">\n              Cancel\n            </button>\n\n            <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n              [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\" \n              [loading]=\"submitting()\" \n              leftIcon=\"save\">\n              {{ submitting() ? 'Processing...' : 'Record Payment' }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
+    updateBreadcrumbData() {
+        this.breadcrumbData.set([
+            {
+                id: 'process',
+                label: 'Process Payment',
+                icon: 'payment',
+                url: undefined
+            }
+        ]);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentProcessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeePaymentProcessComponent, isStandalone: true, selector: "cide-fee-payment-process", viewQueries: [{ propertyName: "selectTemplate", first: true, predicate: ["selectTemplate"], descendants: true, isSignal: true }, { propertyName: "amountPaidTemplate", first: true, predicate: ["amountPaidTemplate"], descendants: true, isSignal: true }, { propertyName: "outstandingTemplate", first: true, predicate: ["outstandingTemplate"], descendants: true, isSignal: true }, { propertyName: "dateTemplate", first: true, predicate: ["dateTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_payment' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n\n  <!-- Main Content Grid -->\n  <div class=\"tw-p-4 tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-h-[calc(100vh-140px)] tw-overflow-hidden\">\n\n    <!-- Left: Form Controls (Col 8) -->\n    <div class=\"lg:tw-col-span-8 tw-flex tw-flex-col tw-gap-4 tw-overflow-y-auto tw-pr-2\">\n\n      <!-- Student Selection Card (Compact) -->\n      <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n          <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">person_search</cide-ele-icon>\n            Student Selection\n          </h3>\n        </div>\n\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-items-start\">\n          <div [formGroup]=\"paymentForm\">\n            <cide-ele-select label=\"Search Student\" placeholder=\"Enter student name or ID...\"\n              [options]=\"studentListOptions()\" [loading]=\"loading()\" (searchChange)=\"onStudentSearch($event)\"\n              (change)=\"onStudentSelect($event)\" size=\"sm\">\n            </cide-ele-select>\n          </div>\n\n          @if (selectedStudent()) {\n          <div\n            class=\"premium-gradient tw-p-3 tw-rounded-lg tw-border tw-border-blue-100 tw-flex tw-items-center tw-gap-4\">\n            <div\n              class=\"tw-h-12 tw-w-12 tw-rounded-full tw-bg-blue-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-xl\">\n              {{ selectedStudent()?.name?.[0] || '?' }}\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-sm tw-font-bold tw-text-gray-900\">{{ selectedStudent()?.name }}</div>\n              <div class=\"tw-text-xs tw-text-gray-500\">ID: {{ selectedStudent()?.student_id }}</div>\n              <div class=\"tw-text-[10px] tw-text-blue-600 tw-font-medium tw-mt-1\">\n                {{ selectedStudent()?.class }} | {{ selectedStudent()?.section }}\n              </div>\n            </div>\n          </div>\n          } @else {\n          <div\n            class=\"tw-border tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-p-3 tw-flex tw-items-center tw-justify-center tw-text-gray-400 tw-text-xs\">\n            Select a student to view details\n          </div>\n          }\n        </div>\n      </div>\n\n      <!-- Outstanding Fees Grid (Premium) -->\n      <div\n        class=\"glass-card tw-rounded-xl tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-border tw-border-gray-200\">\n        <div class=\"tw-p-3 tw-border-b tw-border-gray-100 tw-flex tw-items-center tw-justify-between tw-bg-gray-50/50\">\n          <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">account_balance_wallet</cide-ele-icon>\n            Outstanding Fees\n          </h3>\n\n          @if (outstandingFees().length > 0) {\n          <div class=\"tw-flex tw-gap-2\">\n            <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"selectAllFees()\">Select All</button>\n            <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"clearAllFees()\">Clear</button>\n          </div>\n          }\n        </div>\n\n        <div class=\"tw-flex-1 tw-overflow-hidden\">\n          <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\">\n          </cide-ele-data-grid>\n        </div>\n      </div>\n\n      <!-- Payment Method Card (Compact) -->\n      <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\n          <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">payments</cide-ele-icon>\n          <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800\">Payment Details</h3>\n        </div>\n\n        <div class=\"tw-grid tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\" [formGroup]=\"paymentForm\">\n          <cide-ele-select formControlName=\"feepay_payment_method\" label=\"Method\" [options]=\"paymentMethodOptions()\"\n            size=\"sm\">\n          </cide-ele-select>\n\n          <cide-ele-input formControlName=\"feepay_payment_date\" label=\"Date\" type=\"date\" size=\"sm\">\n          </cide-ele-input>\n\n          <cide-ele-input formControlName=\"feepay_payment_reference\" label=\"Reference #\" placeholder=\"Ref/Receipt No\"\n            size=\"sm\">\n          </cide-ele-input>\n        </div>\n\n        <!-- Dynamic Fields -->\n        <div [formGroup]=\"paymentForm\" class=\"tw-mt-4 tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4\">\n          @if (showChequeDetails()) {\n          <cide-ele-input formControlName=\"feepay_cheque_number\" label=\"Cheque #\" size=\"sm\"></cide-ele-input>\n          <cide-ele-input formControlName=\"feepay_cheque_date\" label=\"Cheque Date\" type=\"date\"\n            size=\"sm\"></cide-ele-input>\n          <cide-ele-input formControlName=\"feepay_bank_name\" label=\"Bank Name\" size=\"sm\"></cide-ele-input>\n          }\n          @if (showBankDetails()) {\n          <cide-ele-input formControlName=\"feepay_transaction_reference\" label=\"Transaction ID\" size=\"sm\"\n            class=\"tw-col-span-2\"></cide-ele-input>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Right: Summary & Action (Col 4) -->\n    <div class=\"lg:tw-col-span-4 tw-h-full\">\n      <div\n        class=\"glass-card tw-rounded-xl tw-h-full tw-flex tw-flex-col tw-overflow-hidden tw-border tw-border-gray-200\">\n        <div class=\"tw-p-4 tw-bg-blue-600 tw-text-white\">\n          <h3 class=\"tw-text-lg tw-font-bold\">Payment Summary</h3>\n          <p class=\"tw-text-blue-100 tw-text-xs\">Confirm your selection and totals</p>\n        </div>\n\n        <div class=\"tw-flex-1 tw-p-4 tw-overflow-y-auto tw-space-y-4\">\n          <!-- Breakdown -->\n          <div class=\"tw-space-y-2\">\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Fees Selected</span>\n              <span class=\"tw-font-medium\">{{ selectedFeeItems().length }}</span>\n            </div>\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Sub-total</span>\n              <span class=\"tw-font-medium\">{{ formatCurrency(totalFeeAmount()) }}</span>\n            </div>\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Late Fee</span>\n              <span class=\"tw-text-blue-600 tw-font-medium\">+ {{ formatCurrency(totalLateFee()) }}</span>\n            </div>\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Penalty</span>\n              <span class=\"tw-text-blue-600 tw-font-medium\">+ {{ formatCurrency(totalPenalty()) }}</span>\n            </div>\n          </div>\n\n          <div class=\"tw-border-t tw-border-gray-100 tw-pt-4\">\n            <div class=\"tw-flex tw-justify-between tw-items-center\">\n              <span class=\"tw-text-base tw-font-bold tw-text-gray-800\">Total Payable</span>\n              <span class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ formatCurrency(totalPayable()) }}</span>\n            </div>\n          </div>\n\n          <!-- Remarks -->\n          <div class=\"tw-mt-6\" [formGroup]=\"paymentForm\">\n            <cide-ele-textarea formControlName=\"feepay_remarks\" label=\"Remarks / Notes\"\n              placeholder=\"Add payment notes...\" [rows]=\"2\" size=\"sm\">\n            </cide-ele-textarea>\n          </div>\n        </div>\n\n        <div class=\"tw-p-4 tw-bg-gray-50 tw-border-t tw-border-gray-100 tw-flex tw-flex-col tw-gap-2\">\n          <button cideEleButton variant=\"primary\" class=\"tw-w-full tw-py-3\" [loading]=\"submitting()\"\n            [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\"\n            (click)=\"onSubmit()\">\n            Confirm & Record Payment\n          </button>\n          <button cideEleButton variant=\"ghost\" class=\"tw-w-full\" (click)=\"onCancel()\" [disabled]=\"submitting()\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Grid Templates -->\n<ng-template #selectTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\" [formGroup]=\"paymentForm\">\n    <ng-container formArrayName=\"fee_items\">\n      @for (item of feeItemsArray.controls; track $index) {\n      @if (item.get('assignment_id')?.value === row.assignment_id) {\n      <div [formGroupName]=\"$index\">\n        <input type=\"checkbox\" formControlName=\"is_selected\" (change)=\"toggleFeeItem($index)\"\n          class=\"tw-rounded tw-border-gray-300\">\n      </div>\n      }\n      }\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #dateTemplate let-value=\"value\">\n  <div class=\"tw-text-xs tw-text-gray-600\">{{ value | date:'dd MMM yyyy' }}</div>\n</ng-template>\n\n<ng-template #outstandingTemplate let-value=\"value\">\n  <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(value) }}</div>\n</ng-template>\n\n<ng-template #amountPaidTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-justify-end\" [formGroup]=\"paymentForm\">\n    <ng-container formArrayName=\"fee_items\">\n      @for (item of feeItemsArray.controls; track $index) {\n      @if (item.get('assignment_id')?.value === row.assignment_id) {\n      <div [formGroupName]=\"$index\" class=\"tw-w-24\">\n        <cide-ele-input formControlName=\"amount_paid\" size=\"xs\" type=\"number\" [labelHide]=\"true\"\n          (onValueChange)=\"onAmountChange($index, $event)\">\n        </cide-ele-input>\n      </div>\n      }\n      }\n    </ng-container>\n  </div>\n</ng-template>", styles: [".glass-card{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.premium-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentProcessComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentProcessComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-fee-payment-process', standalone: true, imports: [
                         CommonModule,
@@ -4639,9 +5256,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideTextareaComponent,
                         CideEleButtonComponent,
                         CideIconComponent,
-                        CideSelectComponent
-                    ], template: "<!-- Payment Process Form -->\n<div class=\"tw-w-full tw-h-full\">\n  <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"paymentForm\" \n    [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Header Section -->\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\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\">\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\">\n          \n          <!-- Title -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Record Payment</h5>\n          </div>\n\n          <!-- Actions -->\n          <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n            <!-- Back button or other actions can be added here if needed -->\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          <div class=\"tw-space-y-4\">\n\n            <!-- Student Information -->\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Student Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <div>\n                  <cide-ele-input \n                    label=\"Search Student\" \n                    formControlName=\"student_search\"\n                    placeholder=\"Enter student name or ID...\"\n                    size=\"sm\"\n                    leadingIcon=\"search\"\n                    (ngModelChange)=\"onStudentSearch($event)\">\n                  </cide-ele-input>\n                  \n                  @if (selectedStudent()) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded\">\n                      <div class=\"tw-text-sm tw-font-medium tw-text-green-900\">{{ selectedStudent()?.name }}</div>\n                      <div class=\"tw-text-xs tw-text-green-700\">ID: {{ selectedStudent()?.student_id }}</div>\n                      @if (selectedStudent()?.class) {\n                        <div class=\"tw-text-xs tw-text-green-600\">{{ selectedStudent()?.class }} / {{ selectedStudent()?.section }}</div>\n                      }\n                    </div>\n                  }\n                </div>\n\n                <cide-ele-input \n                  label=\"Payment Date\" \n                  formControlName=\"feepay_payment_date\"\n                  type=\"date\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-input>\n              </div>\n            </div>\n\n            <!-- Fee Selection -->\n            @if (selectedStudent() && outstandingFees().length > 0) {\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">Select Fees to Pay</h6>\n                  <div class=\"tw-flex tw-items-center tw-gap-3\">\n                    <div class=\"tw-flex tw-items-center tw-gap-2\">\n                      <cide-ele-input \n                        formControlName=\"pay_full_outstanding\" \n                        type=\"checkbox\" \n                        size=\"sm\"\n                        (change)=\"togglePayFullOutstanding()\">\n                      </cide-ele-input>\n                      <span class=\"tw-text-sm tw-text-gray-700\">Pay full outstanding</span>\n                    </div>\n                    <button cideEleButton type=\"button\" variant=\"success\" size=\"xs\" (click)=\"selectAllFees()\">\n                      Select All\n                    </button>\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"clearAllFees()\">\n                      Clear\n                    </button>\n                  </div>\n                </div>\n\n                <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-max-h-80 tw-overflow-y-auto tw-border tw-border-gray-200 tw-rounded-lg tw-p-3\">\n                  @for (item of feeItemsArray.controls; track $index) {\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-p-2 tw-bg-gray-50 tw-rounded tw-border tw-border-gray-200\"\n                      [formGroupName]=\"$index\">\n                      \n                      <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1\">\n                        <cide-ele-input \n                          formControlName=\"is_selected\" \n                          type=\"checkbox\" \n                          size=\"sm\"\n                          (change)=\"toggleFeeItem($index)\">\n                        </cide-ele-input>\n                        \n                        <div class=\"tw-flex-1\">\n                          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n                            {{ item.get('fee_head')?.value }}\n                          </div>\n                          <div class=\"tw-text-xs tw-text-gray-500\">\n                            Outstanding: {{ formatCurrency(item.get('outstanding_amount')?.value || 0) }}\n                            @if (item.get('late_fee')?.value > 0) {\n                              <span class=\"tw-text-red-600\"> | Late Fee: {{ formatCurrency(item.get('late_fee')?.value) }}</span>\n                            }\n                          </div>\n                        </div>\n                      </div>\n\n                      <div class=\"tw-flex tw-items-center tw-gap-2\">\n                        <cide-ele-input \n                          formControlName=\"amount_paid\"\n                          type=\"number\"\n                          placeholder=\"0.00\"\n                          size=\"sm\"\n                          [disabled]=\"!item.get('is_selected')?.value\"\n                          (ngModelChange)=\"onAmountChange($index, $event)\"\n                          class=\"tw-w-28\">\n                        </cide-ele-input>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Payment Details -->\n            @if (selectedStudent()) {\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Payment Details</h6>\n                \n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                  <cide-ele-select \n                    label=\"Payment Method\" \n                    formControlName=\"feepay_payment_method\"\n                    [options]=\"paymentMethodOptions\"\n                    size=\"sm\"\n                    leadingIcon=\"payment\">\n                  </cide-ele-select>\n\n                  <cide-ele-select \n                    label=\"Payment Mode\" \n                    formControlName=\"feepay_payment_mode\"\n                    [options]=\"[{value: 'OFFLINE', label: 'Offline'}, {value: 'ONLINE', label: 'Online'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Cheque/DD Details -->\n                @if (showChequeDetails()) {\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-mb-3\">Cheque/DD Details</h6>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                      <cide-ele-input \n                        label=\"Cheque/DD Number\" \n                        formControlName=\"feepay_cheque_number\"\n                        placeholder=\"Enter cheque/DD number\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Cheque/DD Date\" \n                        formControlName=\"feepay_cheque_date\"\n                        type=\"date\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\n                      <cide-ele-input \n                        label=\"Bank Name\" \n                        formControlName=\"feepay_bank_name\"\n                        placeholder=\"Enter bank name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Branch Name\" \n                        formControlName=\"feepay_bank_branch_name\"\n                        placeholder=\"Enter branch name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-mt-3\">\n                      <cide-ele-input \n                        label=\"IFSC Code\" \n                        formControlName=\"feepay_bank_ifsc_code\"\n                        placeholder=\"Enter IFSC code\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-mt-3\">\n                      <cide-ele-input \n                        label=\"Instrument Date\" \n                        formControlName=\"feepay_instrument_date\"\n                        type=\"date\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                  </div>\n                }\n\n                <!-- Bank Transfer Details -->\n                @if (showBankDetails()) {\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-green-50 tw-rounded tw-border tw-border-green-200\">\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-green-900 tw-mb-3\">Bank Transfer Details</h6>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                      <cide-ele-input \n                        label=\"Bank Name\" \n                        formControlName=\"feepay_bank_name\"\n                        placeholder=\"Enter bank name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Branch Name\" \n                        formControlName=\"feepay_bank_branch_name\"\n                        placeholder=\"Enter branch name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\n                      <cide-ele-input \n                        label=\"IFSC Code\" \n                        formControlName=\"feepay_bank_ifsc_code\"\n                        placeholder=\"Enter IFSC code\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Account Number\" \n                        formControlName=\"feepay_bank_account_number\"\n                        placeholder=\"Enter account number\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-mt-3\">\n                      <cide-ele-input \n                        label=\"Transaction Reference\" \n                        formControlName=\"feepay_transaction_reference\"\n                        placeholder=\"Enter transaction reference\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                  </div>\n                }\n\n                <!-- Discount Section -->\n                <div class=\"tw-mt-4 tw-p-3 tw-bg-purple-50 tw-rounded tw-border tw-border-purple-200\">\n                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-purple-900 tw-mb-3\">Discount Information</h6>\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-input \n                      label=\"Discount (%)\" \n                      formControlName=\"feepay_discount_percentage\"\n                      type=\"number\"\n                      placeholder=\"0\"\n                      size=\"sm\"\n                      [min]=\"0\"\n                      [max]=\"100\">\n                    </cide-ele-input>\n\n                    <cide-ele-select \n                      label=\"Discount On\" \n                      formControlName=\"feepay_discount_on\"\n                      [options]=\"[{value: 'SUB_TOTAL', label: 'Sub Total'}, {value: 'FEE_HEAD', label: 'Fee Head'}, {value: 'TOTAL', label: 'Total'}, {value: 'INSTALLMENT', label: 'Installment'}]\"\n                      size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                  <div class=\"tw-mt-3\">\n                    <cide-ele-textarea \n                      label=\"Discount Reason\" \n                      formControlName=\"feepay_discount_reason\"\n                      placeholder=\"Enter reason for discount...\"\n                      rows=\"2\"\n                      size=\"sm\">\n                    </cide-ele-textarea>\n                  </div>\n                </div>\n\n                <!-- Payment Reference -->\n                <div class=\"tw-mt-4\">\n                  <cide-ele-input \n                    label=\"Payment Reference\" \n                    formControlName=\"feepay_payment_reference\"\n                    placeholder=\"Enter payment reference number\"\n                    size=\"sm\"\n                    leadingIcon=\"receipt\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Remarks -->\n                <div class=\"tw-mt-4\">\n                  <cide-ele-textarea \n                    label=\"Remarks\" \n                    formControlName=\"feepay_remarks\"\n                    placeholder=\"Enter any additional remarks...\"\n                    rows=\"2\" \n                    size=\"sm\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n            }\n\n            <!-- Payment Summary -->\n            @if (selectedStudent() && selectedFeeItems().length > 0) {\n              <div class=\"tw-bg-gradient-to-r tw-from-green-50 tw-to-emerald-50 tw-rounded-lg tw-border tw-border-green-200 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-green-900 tw-mb-3\">Payment Summary</h6>\n                \n                <div class=\"tw-space-y-3\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n                    <span class=\"tw-text-gray-700\">Fee Amount:</span>\n                    <span class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n                  </div>\n                  \n                  @if (totalLateFee() > 0) {\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n                      <span class=\"tw-text-gray-700\">Late Fee Amount:</span>\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalLateFee()) }}</span>\n                    </div>\n                  }\n                  \n                  @if (totalPenalty() > 0) {\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n                      <span class=\"tw-text-gray-700\">Penalty Amount:</span>\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalPenalty()) }}</span>\n                    </div>\n                  }\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-3 tw-border-t-2 tw-border-green-300 tw-mt-2\">\n                    <span class=\"tw-text-lg tw-font-bold tw-text-green-900\">Total Payable:</span>\n                    <span class=\"tw-text-2xl tw-font-bold tw-text-green-700\">{{ formatCurrency(totalPayable()) }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Form Validation Errors -->\n          <!-- Action Buttons -->\n          <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n              [disabled]=\"loading()\">\n              Cancel\n            </button>\n\n            <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n              [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\" \n              [loading]=\"submitting()\" \n              leftIcon=\"save\">\n              {{ submitting() ? 'Processing...' : 'Record Payment' }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n\n" }]
-        }] });
+                        CideSelectComponent,
+                        CideLytSharedWrapperComponent,
+                        CideEleDataGridComponent
+                    ], template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_payment' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n\n  <!-- Main Content Grid -->\n  <div class=\"tw-p-4 tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-h-[calc(100vh-140px)] tw-overflow-hidden\">\n\n    <!-- Left: Form Controls (Col 8) -->\n    <div class=\"lg:tw-col-span-8 tw-flex tw-flex-col tw-gap-4 tw-overflow-y-auto tw-pr-2\">\n\n      <!-- Student Selection Card (Compact) -->\n      <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\n        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n          <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">person_search</cide-ele-icon>\n            Student Selection\n          </h3>\n        </div>\n\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-items-start\">\n          <div [formGroup]=\"paymentForm\">\n            <cide-ele-select label=\"Search Student\" placeholder=\"Enter student name or ID...\"\n              [options]=\"studentListOptions()\" [loading]=\"loading()\" (searchChange)=\"onStudentSearch($event)\"\n              (change)=\"onStudentSelect($event)\" size=\"sm\">\n            </cide-ele-select>\n          </div>\n\n          @if (selectedStudent()) {\n          <div\n            class=\"premium-gradient tw-p-3 tw-rounded-lg tw-border tw-border-blue-100 tw-flex tw-items-center tw-gap-4\">\n            <div\n              class=\"tw-h-12 tw-w-12 tw-rounded-full tw-bg-blue-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-xl\">\n              {{ selectedStudent()?.name?.[0] || '?' }}\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-sm tw-font-bold tw-text-gray-900\">{{ selectedStudent()?.name }}</div>\n              <div class=\"tw-text-xs tw-text-gray-500\">ID: {{ selectedStudent()?.student_id }}</div>\n              <div class=\"tw-text-[10px] tw-text-blue-600 tw-font-medium tw-mt-1\">\n                {{ selectedStudent()?.class }} | {{ selectedStudent()?.section }}\n              </div>\n            </div>\n          </div>\n          } @else {\n          <div\n            class=\"tw-border tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-p-3 tw-flex tw-items-center tw-justify-center tw-text-gray-400 tw-text-xs\">\n            Select a student to view details\n          </div>\n          }\n        </div>\n      </div>\n\n      <!-- Outstanding Fees Grid (Premium) -->\n      <div\n        class=\"glass-card tw-rounded-xl tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-border tw-border-gray-200\">\n        <div class=\"tw-p-3 tw-border-b tw-border-gray-100 tw-flex tw-items-center tw-justify-between tw-bg-gray-50/50\">\n          <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\n            <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">account_balance_wallet</cide-ele-icon>\n            Outstanding Fees\n          </h3>\n\n          @if (outstandingFees().length > 0) {\n          <div class=\"tw-flex tw-gap-2\">\n            <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"selectAllFees()\">Select All</button>\n            <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"clearAllFees()\">Clear</button>\n          </div>\n          }\n        </div>\n\n        <div class=\"tw-flex-1 tw-overflow-hidden\">\n          <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\">\n          </cide-ele-data-grid>\n        </div>\n      </div>\n\n      <!-- Payment Method Card (Compact) -->\n      <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\n        <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\n          <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">payments</cide-ele-icon>\n          <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800\">Payment Details</h3>\n        </div>\n\n        <div class=\"tw-grid tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\" [formGroup]=\"paymentForm\">\n          <cide-ele-select formControlName=\"feepay_payment_method\" label=\"Method\" [options]=\"paymentMethodOptions()\"\n            size=\"sm\">\n          </cide-ele-select>\n\n          <cide-ele-input formControlName=\"feepay_payment_date\" label=\"Date\" type=\"date\" size=\"sm\">\n          </cide-ele-input>\n\n          <cide-ele-input formControlName=\"feepay_payment_reference\" label=\"Reference #\" placeholder=\"Ref/Receipt No\"\n            size=\"sm\">\n          </cide-ele-input>\n        </div>\n\n        <!-- Dynamic Fields -->\n        <div [formGroup]=\"paymentForm\" class=\"tw-mt-4 tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4\">\n          @if (showChequeDetails()) {\n          <cide-ele-input formControlName=\"feepay_cheque_number\" label=\"Cheque #\" size=\"sm\"></cide-ele-input>\n          <cide-ele-input formControlName=\"feepay_cheque_date\" label=\"Cheque Date\" type=\"date\"\n            size=\"sm\"></cide-ele-input>\n          <cide-ele-input formControlName=\"feepay_bank_name\" label=\"Bank Name\" size=\"sm\"></cide-ele-input>\n          }\n          @if (showBankDetails()) {\n          <cide-ele-input formControlName=\"feepay_transaction_reference\" label=\"Transaction ID\" size=\"sm\"\n            class=\"tw-col-span-2\"></cide-ele-input>\n          }\n        </div>\n      </div>\n    </div>\n\n    <!-- Right: Summary & Action (Col 4) -->\n    <div class=\"lg:tw-col-span-4 tw-h-full\">\n      <div\n        class=\"glass-card tw-rounded-xl tw-h-full tw-flex tw-flex-col tw-overflow-hidden tw-border tw-border-gray-200\">\n        <div class=\"tw-p-4 tw-bg-blue-600 tw-text-white\">\n          <h3 class=\"tw-text-lg tw-font-bold\">Payment Summary</h3>\n          <p class=\"tw-text-blue-100 tw-text-xs\">Confirm your selection and totals</p>\n        </div>\n\n        <div class=\"tw-flex-1 tw-p-4 tw-overflow-y-auto tw-space-y-4\">\n          <!-- Breakdown -->\n          <div class=\"tw-space-y-2\">\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Fees Selected</span>\n              <span class=\"tw-font-medium\">{{ selectedFeeItems().length }}</span>\n            </div>\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Sub-total</span>\n              <span class=\"tw-font-medium\">{{ formatCurrency(totalFeeAmount()) }}</span>\n            </div>\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Late Fee</span>\n              <span class=\"tw-text-blue-600 tw-font-medium\">+ {{ formatCurrency(totalLateFee()) }}</span>\n            </div>\n            <div class=\"tw-flex tw-justify-between tw-text-sm\">\n              <span class=\"tw-text-gray-500\">Penalty</span>\n              <span class=\"tw-text-blue-600 tw-font-medium\">+ {{ formatCurrency(totalPenalty()) }}</span>\n            </div>\n          </div>\n\n          <div class=\"tw-border-t tw-border-gray-100 tw-pt-4\">\n            <div class=\"tw-flex tw-justify-between tw-items-center\">\n              <span class=\"tw-text-base tw-font-bold tw-text-gray-800\">Total Payable</span>\n              <span class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ formatCurrency(totalPayable()) }}</span>\n            </div>\n          </div>\n\n          <!-- Remarks -->\n          <div class=\"tw-mt-6\" [formGroup]=\"paymentForm\">\n            <cide-ele-textarea formControlName=\"feepay_remarks\" label=\"Remarks / Notes\"\n              placeholder=\"Add payment notes...\" [rows]=\"2\" size=\"sm\">\n            </cide-ele-textarea>\n          </div>\n        </div>\n\n        <div class=\"tw-p-4 tw-bg-gray-50 tw-border-t tw-border-gray-100 tw-flex tw-flex-col tw-gap-2\">\n          <button cideEleButton variant=\"primary\" class=\"tw-w-full tw-py-3\" [loading]=\"submitting()\"\n            [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\"\n            (click)=\"onSubmit()\">\n            Confirm & Record Payment\n          </button>\n          <button cideEleButton variant=\"ghost\" class=\"tw-w-full\" (click)=\"onCancel()\" [disabled]=\"submitting()\">\n            Cancel\n          </button>\n        </div>\n      </div>\n    </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Grid Templates -->\n<ng-template #selectTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-items-center tw-justify-center\" [formGroup]=\"paymentForm\">\n    <ng-container formArrayName=\"fee_items\">\n      @for (item of feeItemsArray.controls; track $index) {\n      @if (item.get('assignment_id')?.value === row.assignment_id) {\n      <div [formGroupName]=\"$index\">\n        <input type=\"checkbox\" formControlName=\"is_selected\" (change)=\"toggleFeeItem($index)\"\n          class=\"tw-rounded tw-border-gray-300\">\n      </div>\n      }\n      }\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #dateTemplate let-value=\"value\">\n  <div class=\"tw-text-xs tw-text-gray-600\">{{ value | date:'dd MMM yyyy' }}</div>\n</ng-template>\n\n<ng-template #outstandingTemplate let-value=\"value\">\n  <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(value) }}</div>\n</ng-template>\n\n<ng-template #amountPaidTemplate let-row=\"row\">\n  <div class=\"tw-flex tw-justify-end\" [formGroup]=\"paymentForm\">\n    <ng-container formArrayName=\"fee_items\">\n      @for (item of feeItemsArray.controls; track $index) {\n      @if (item.get('assignment_id')?.value === row.assignment_id) {\n      <div [formGroupName]=\"$index\" class=\"tw-w-24\">\n        <cide-ele-input formControlName=\"amount_paid\" size=\"xs\" type=\"number\" [labelHide]=\"true\"\n          (onValueChange)=\"onAmountChange($index, $event)\">\n        </cide-ele-input>\n      </div>\n      }\n      }\n    </ng-container>\n  </div>\n</ng-template>", styles: [".glass-card{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.premium-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff)}\n"] }]
+        }], propDecorators: { selectTemplate: [{ type: i0.ViewChild, args: ['selectTemplate', { isSignal: true }] }], amountPaidTemplate: [{ type: i0.ViewChild, args: ['amountPaidTemplate', { isSignal: true }] }], outstandingTemplate: [{ type: i0.ViewChild, args: ['outstandingTemplate', { isSignal: true }] }], dateTemplate: [{ type: i0.ViewChild, args: ['dateTemplate', { isSignal: true }] }] } });
 
 var feePaymentProcess_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -4951,8 +5570,8 @@ class FeePaymentViewComponent {
     goBack() {
         this.router.navigate(['/control-panel/payment']);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeePaymentViewComponent, isStandalone: true, selector: "cide-fee-payment-view", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeePaymentViewComponent, isStandalone: true, selector: "cide-fee-payment-view", ngImport: i0, template: `
     <cide-lyt-shared-wrapper [shared_wrapper_setup_param]="shared_wrapper_setup_param">
       @if (loading()) {
         <div class="tw-text-center tw-py-12">
@@ -5146,7 +5765,7 @@ class FeePaymentViewComponent {
     </cide-lyt-shared-wrapper>
   `, isInline: true, styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentViewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentViewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-fee-payment-view', standalone: true, imports: [
                         CommonModule,
@@ -5413,8 +6032,8 @@ class DiscountRulesComponent {
             console.log('Delete rule:', rule);
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DiscountRulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DiscountRulesComponent, isStandalone: true, selector: "cide-discount-rules", ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DiscountRulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: DiscountRulesComponent, isStandalone: true, selector: "cide-discount-rules", ngImport: i0, template: `
     <div class="discount-rules-container">
       <div class="header">
         <h1>Discount Rules Management</h1>
@@ -5555,7 +6174,7 @@ class DiscountRulesComponent {
     </div>
   `, isInline: true, styles: [".discount-rules-container{padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.btn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:14px}.btn-primary{background:#007bff;color:#fff}.btn-secondary{background:#6c757d;color:#fff}.tabs{display:flex;gap:10px;margin-bottom:20px;border-bottom:2px solid #e0e0e0}.tab{padding:12px 24px;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-weight:500}.tab.active{border-bottom-color:#007bff;color:#007bff}.table-container{overflow-x:auto;background:#fff;border-radius:8px;border:1px solid #e0e0e0}table{width:100%;border-collapse:collapse}thead{background:#f8f9fa}th{padding:12px;text-align:left;font-weight:600;border-bottom:2px solid #dee2e6}td{padding:12px;border-bottom:1px solid #dee2e6}.badge{padding:4px 12px;border-radius:12px;font-size:12px;background:#e3f2fd;color:#1976d2}.discount-value{font-weight:600;color:#28a745}.priority{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;background:#ffc107;color:#fff;border-radius:50%;font-weight:700}.status-badge{padding:4px 12px;border-radius:12px;font-size:12px;background:#f8d7da;color:#721c24}.status-badge.active{background:#d4edda;color:#155724}.btn-icon{background:none;border:none;cursor:pointer;font-size:18px;padding:4px}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;max-width:800px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e0e0e0}.close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:#666}.modal-body{padding:20px}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid #e0e0e0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:500;font-size:14px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px}.form-group small{color:#666;font-size:12px}.checkbox-group{display:flex;flex-direction:column;gap:8px}.checkbox-group label{display:flex;align-items:center;gap:8px}\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.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { 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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DiscountRulesComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: DiscountRulesComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-discount-rules', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: `
     <div class="discount-rules-container">
@@ -5782,10 +6401,10 @@ class ReceiptTemplateService {
         console.log('🔄 Making PATCH request to toggle receipt template status:', { url, payload });
         return this.http.patch(url, payload);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ReceiptTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ReceiptTemplateService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ReceiptTemplateService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ReceiptTemplateService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: ReceiptTemplateService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: ReceiptTemplateService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -6621,10 +7240,10 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TemplateDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TemplateDesignerComponent, isStandalone: true, selector: "cide-receipt-template-designer", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "htmlEditorRef", first: true, predicate: ["htmlEditor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n      Load Template\n    </button>\n    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n      [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n      Save Template\n    </button>\n  </div>\n\n  <!-- Main Content - Three Column Layout -->\n  <div class=\"tw-w-full tw-h-full tw-overflow-hidden tw-flex tw-flex-col\" style=\"height: calc(100vh - 120px); max-width: 100vw;\">\n    <div class=\"tw-grid tw-grid-cols-12 tw-gap-3 tw-flex-1 tw-min-h-0 tw-p-3\">\n          \n          <!-- Left Sidebar - Tag Categories & Tags -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col tw-min-w-0 tw-h-full\">\n            <!-- Tag Categories Header -->\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n              <form [formGroup]=\"templateForm\">\n                <cide-ele-input\n                  formControlName=\"tag_search\"\n                  placeholder=\"Search tags...\"\n                  size=\"sm\"\n                  leadingIcon=\"search\">\n                </cide-ele-input>\n              </form>\n            </div>\n\n            <!-- Category Tabs -->\n            <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n              @for (category of tagCategories; track category.id) {\n                <button\n                  type=\"button\"\n                  class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n                  [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n                  [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n                  [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n                  [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n                  (click)=\"onCategoryChange(category.id)\"\n                  [title]=\"category.name\">\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n                  <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n                </button>\n              }\n            </div>\n\n            <!-- Tags List -->\n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2 tw-min-h-0\">\n              @if (filteredTags().length > 0) {\n                <div class=\"tw-space-y-1\">\n                  @for (tag of filteredTags(); track tag.code) {\n                    <button\n                      type=\"button\"\n                      class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n                      (click)=\"insertTag(tag)\"\n                      [title]=\"tag.description\">\n                      <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                        <div class=\"tw-flex-1 tw-min-w-0\">\n                          <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n                            {{ tag.code }}\n                          </code>\n                          <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n                          @if (tag.example) {\n                            <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n                          }\n                        </div>\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n                      </div>\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                  <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n                  <p class=\"tw-text-xs\">No tags found</p>\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Middle Column - HTML Editor -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-min-w-0 tw-h-full\">\n            <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n              \n              <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-input\n                    label=\"Template Name\"\n                    formControlName=\"template_name\"\n                    placeholder=\"e.g., Standard Receipt\"\n                    size=\"sm\">\n                  </cide-ele-input>\n\n                  <cide-ele-input\n                    label=\"Template Code\"\n                    formControlName=\"template_code\"\n                    placeholder=\"e.g., STD_RECEIPT_01\"\n                    size=\"sm\">\n                  </cide-ele-input>\n                </div>\n\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-select\n                    label=\"Template Type\"\n                    formControlName=\"template_type\"\n                    [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n\n                  <cide-ele-select\n                    label=\"Template For\"\n                    formControlName=\"template_for\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                  <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n                  <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n                </div>\n              </form>\n            </div>\n\n            <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-h-full\">\n              <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                  <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n                  <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert or paste HTML here</span>\n                </div>\n              </div>\n              <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden tw-min-h-0 tw-h-full\">\n                <form [formGroup]=\"templateForm\" class=\"tw-h-full\">\n                  <textarea\n                    #htmlEditor\n                    formControlName=\"template_html\"\n                    placeholder=\"Enter HTML template code here... Use tags from the left sidebar or paste your HTML design.\"\n                    class=\"template-html-editor tw-w-full tw-h-full tw-p-3 tw-border tw-border-gray-300 tw-rounded-md tw-font-mono tw-text-xs tw-leading-relaxed tw-resize-none focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-blue-500 tw-bg-white tw-text-gray-900\"\n                    spellcheck=\"false\"></textarea>\n                </form>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right Column - Live Preview -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-w-0 tw-h-full\">\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <div class=\"tw-flex tw-items-center tw-justify-between\">\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <cide-ele-select\n                    formControlName=\"preview_type\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n                    size=\"xs\"\n                    class=\"tw-w-24\">\n                  </cide-ele-select>\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n                </div>\n              </div>\n            </div>\n            \n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50 tw-min-h-0\">\n              <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4\" [innerHTML]=\"previewHtml()\"></div>\n            </div>\n          </div>\n\n        </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;max-width:100vw;overflow:hidden}:host .template-html-editor{height:100%!important;min-height:0;resize:none;font-family:Courier New,Monaco,Consolas,Menlo,monospace;font-size:13px;line-height:1.6;tab-size:2;-moz-tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto;box-sizing:border-box;width:100%;max-width:100%}:host .template-html-editor::placeholder{color:#9ca3af;font-style:italic}:host .template-html-editor:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}:host .tw-grid{height:100%;max-width:100%;overflow:hidden;min-height:0}:host .tw-overflow-hidden{min-height:0;max-width:100%;overflow:hidden}:host .tw-flex-col{min-height:0;max-width:100%;height:100%}:host [class*=tw-col-span]{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;overflow:hidden;height:100%}:host *{max-width:100%;box-sizing:border-box}:host [breadcrumb-actions]{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TemplateDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: TemplateDesignerComponent, isStandalone: true, selector: "cide-receipt-template-designer", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "htmlEditorRef", first: true, predicate: ["htmlEditor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n      Load Template\n    </button>\n    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n      [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n      Save Template\n    </button>\n  </div>\n\n  <!-- Main Content - Three Column Layout -->\n  <div class=\"tw-w-full tw-h-full tw-overflow-hidden tw-flex tw-flex-col\" style=\"height: calc(100vh - 120px); max-width: 100vw;\">\n    <div class=\"tw-grid tw-grid-cols-12 tw-gap-3 tw-flex-1 tw-min-h-0 tw-p-3\">\n          \n          <!-- Left Sidebar - Tag Categories & Tags -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col tw-min-w-0 tw-h-full\">\n            <!-- Tag Categories Header -->\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n              <form [formGroup]=\"templateForm\">\n                <cide-ele-input\n                  formControlName=\"tag_search\"\n                  placeholder=\"Search tags...\"\n                  size=\"sm\"\n                  leadingIcon=\"search\">\n                </cide-ele-input>\n              </form>\n            </div>\n\n            <!-- Category Tabs -->\n            <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n              @for (category of tagCategories; track category.id) {\n                <button\n                  type=\"button\"\n                  class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n                  [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n                  [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n                  [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n                  [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n                  (click)=\"onCategoryChange(category.id)\"\n                  [title]=\"category.name\">\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n                  <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n                </button>\n              }\n            </div>\n\n            <!-- Tags List -->\n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2 tw-min-h-0\">\n              @if (filteredTags().length > 0) {\n                <div class=\"tw-space-y-1\">\n                  @for (tag of filteredTags(); track tag.code) {\n                    <button\n                      type=\"button\"\n                      class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n                      (click)=\"insertTag(tag)\"\n                      [title]=\"tag.description\">\n                      <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                        <div class=\"tw-flex-1 tw-min-w-0\">\n                          <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n                            {{ tag.code }}\n                          </code>\n                          <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n                          @if (tag.example) {\n                            <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n                          }\n                        </div>\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n                      </div>\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                  <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n                  <p class=\"tw-text-xs\">No tags found</p>\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Middle Column - HTML Editor -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-min-w-0 tw-h-full\">\n            <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n              \n              <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-input\n                    label=\"Template Name\"\n                    formControlName=\"template_name\"\n                    placeholder=\"e.g., Standard Receipt\"\n                    size=\"sm\">\n                  </cide-ele-input>\n\n                  <cide-ele-input\n                    label=\"Template Code\"\n                    formControlName=\"template_code\"\n                    placeholder=\"e.g., STD_RECEIPT_01\"\n                    size=\"sm\">\n                  </cide-ele-input>\n                </div>\n\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-select\n                    label=\"Template Type\"\n                    formControlName=\"template_type\"\n                    [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n\n                  <cide-ele-select\n                    label=\"Template For\"\n                    formControlName=\"template_for\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                  <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n                  <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n                </div>\n              </form>\n            </div>\n\n            <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-h-full\">\n              <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                  <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n                  <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert or paste HTML here</span>\n                </div>\n              </div>\n              <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden tw-min-h-0 tw-h-full\">\n                <form [formGroup]=\"templateForm\" class=\"tw-h-full\">\n                  <textarea\n                    #htmlEditor\n                    formControlName=\"template_html\"\n                    placeholder=\"Enter HTML template code here... Use tags from the left sidebar or paste your HTML design.\"\n                    class=\"template-html-editor tw-w-full tw-h-full tw-p-3 tw-border tw-border-gray-300 tw-rounded-md tw-font-mono tw-text-xs tw-leading-relaxed tw-resize-none focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-blue-500 tw-bg-white tw-text-gray-900\"\n                    spellcheck=\"false\"></textarea>\n                </form>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right Column - Live Preview -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-w-0 tw-h-full\">\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <div class=\"tw-flex tw-items-center tw-justify-between\">\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <cide-ele-select\n                    formControlName=\"preview_type\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n                    size=\"xs\"\n                    class=\"tw-w-24\">\n                  </cide-ele-select>\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n                </div>\n              </div>\n            </div>\n            \n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50 tw-min-h-0\">\n              <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4\" [innerHTML]=\"previewHtml()\"></div>\n            </div>\n          </div>\n\n        </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;max-width:100vw;overflow:hidden}:host .template-html-editor{height:100%!important;min-height:0;resize:none;font-family:Courier New,Monaco,Consolas,Menlo,monospace;font-size:13px;line-height:1.6;tab-size:2;-moz-tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto;box-sizing:border-box;width:100%;max-width:100%}:host .template-html-editor::placeholder{color:#9ca3af;font-style:italic}:host .template-html-editor:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}:host .tw-grid{height:100%;max-width:100%;overflow:hidden;min-height:0}:host .tw-overflow-hidden{min-height:0;max-width:100%;overflow:hidden}:host .tw-flex-col{min-height:0;max-width:100%;height:100%}:host [class*=tw-col-span]{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;overflow:hidden;height:100%}:host *{max-width:100%;box-sizing:border-box}:host [breadcrumb-actions]{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TemplateDesignerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TemplateDesignerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-receipt-template-designer', standalone: true, imports: [
                         CommonModule,
@@ -6635,7 +7254,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideSelectComponent,
                         CideLytSharedWrapperComponent
                     ], template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n      Load Template\n    </button>\n    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n      [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n      Save Template\n    </button>\n  </div>\n\n  <!-- Main Content - Three Column Layout -->\n  <div class=\"tw-w-full tw-h-full tw-overflow-hidden tw-flex tw-flex-col\" style=\"height: calc(100vh - 120px); max-width: 100vw;\">\n    <div class=\"tw-grid tw-grid-cols-12 tw-gap-3 tw-flex-1 tw-min-h-0 tw-p-3\">\n          \n          <!-- Left Sidebar - Tag Categories & Tags -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col tw-min-w-0 tw-h-full\">\n            <!-- Tag Categories Header -->\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n              <form [formGroup]=\"templateForm\">\n                <cide-ele-input\n                  formControlName=\"tag_search\"\n                  placeholder=\"Search tags...\"\n                  size=\"sm\"\n                  leadingIcon=\"search\">\n                </cide-ele-input>\n              </form>\n            </div>\n\n            <!-- Category Tabs -->\n            <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n              @for (category of tagCategories; track category.id) {\n                <button\n                  type=\"button\"\n                  class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n                  [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n                  [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n                  [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n                  [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n                  (click)=\"onCategoryChange(category.id)\"\n                  [title]=\"category.name\">\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n                  <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n                </button>\n              }\n            </div>\n\n            <!-- Tags List -->\n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2 tw-min-h-0\">\n              @if (filteredTags().length > 0) {\n                <div class=\"tw-space-y-1\">\n                  @for (tag of filteredTags(); track tag.code) {\n                    <button\n                      type=\"button\"\n                      class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n                      (click)=\"insertTag(tag)\"\n                      [title]=\"tag.description\">\n                      <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                        <div class=\"tw-flex-1 tw-min-w-0\">\n                          <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n                            {{ tag.code }}\n                          </code>\n                          <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n                          @if (tag.example) {\n                            <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n                          }\n                        </div>\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n                      </div>\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                  <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n                  <p class=\"tw-text-xs\">No tags found</p>\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Middle Column - HTML Editor -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-min-w-0 tw-h-full\">\n            <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n              \n              <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-input\n                    label=\"Template Name\"\n                    formControlName=\"template_name\"\n                    placeholder=\"e.g., Standard Receipt\"\n                    size=\"sm\">\n                  </cide-ele-input>\n\n                  <cide-ele-input\n                    label=\"Template Code\"\n                    formControlName=\"template_code\"\n                    placeholder=\"e.g., STD_RECEIPT_01\"\n                    size=\"sm\">\n                  </cide-ele-input>\n                </div>\n\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-select\n                    label=\"Template Type\"\n                    formControlName=\"template_type\"\n                    [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n\n                  <cide-ele-select\n                    label=\"Template For\"\n                    formControlName=\"template_for\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                  <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n                  <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n                </div>\n              </form>\n            </div>\n\n            <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-h-full\">\n              <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                  <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n                  <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert or paste HTML here</span>\n                </div>\n              </div>\n              <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden tw-min-h-0 tw-h-full\">\n                <form [formGroup]=\"templateForm\" class=\"tw-h-full\">\n                  <textarea\n                    #htmlEditor\n                    formControlName=\"template_html\"\n                    placeholder=\"Enter HTML template code here... Use tags from the left sidebar or paste your HTML design.\"\n                    class=\"template-html-editor tw-w-full tw-h-full tw-p-3 tw-border tw-border-gray-300 tw-rounded-md tw-font-mono tw-text-xs tw-leading-relaxed tw-resize-none focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-blue-500 tw-bg-white tw-text-gray-900\"\n                    spellcheck=\"false\"></textarea>\n                </form>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right Column - Live Preview -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-w-0 tw-h-full\">\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <div class=\"tw-flex tw-items-center tw-justify-between\">\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <cide-ele-select\n                    formControlName=\"preview_type\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n                    size=\"xs\"\n                    class=\"tw-w-24\">\n                  </cide-ele-select>\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n                </div>\n              </div>\n            </div>\n            \n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50 tw-min-h-0\">\n              <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4\" [innerHTML]=\"previewHtml()\"></div>\n            </div>\n          </div>\n\n        </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;max-width:100vw;overflow:hidden}:host .template-html-editor{height:100%!important;min-height:0;resize:none;font-family:Courier New,Monaco,Consolas,Menlo,monospace;font-size:13px;line-height:1.6;tab-size:2;-moz-tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto;box-sizing:border-box;width:100%;max-width:100%}:host .template-html-editor::placeholder{color:#9ca3af;font-style:italic}:host .template-html-editor:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}:host .tw-grid{height:100%;max-width:100%;overflow:hidden;min-height:0}:host .tw-overflow-hidden{min-height:0;max-width:100%;overflow:hidden}:host .tw-flex-col{min-height:0;max-width:100%;height:100%}:host [class*=tw-col-span]{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;overflow:hidden;height:100%}:host *{max-width:100%;box-sizing:border-box}:host [breadcrumb-actions]{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"] }]
-        }], ctorParameters: () => [], propDecorators: { htmlEditorRef: [{
+        }], ctorParameters: () => [], propDecorators: { shared_wrapper_setup_param: [{ type: i0.Input, args: [{ isSignal: true, alias: "shared_wrapper_setup_param", required: false }] }], htmlEditorRef: [{
                 type: ViewChild,
                 args: ['htmlEditor', { static: false }]
             }] } });
@@ -7001,10 +7620,10 @@ class CollectionReportComponent {
     formatCurrency(amount) {
         return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CollectionReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CollectionReportComponent, isStandalone: true, selector: "cide-collection-report", ngImport: i0, template: "<!-- Collection Report Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n    <!-- Header Section -->\r\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n          \r\n          <!-- Title -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">assessment</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Fee Collection Report</h5>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"exportToPDF()\" leftIcon=\"picture_as_pdf\">\r\n              Export PDF\r\n            </button>\r\n            <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"exportToExcel()\" leftIcon=\"table_chart\">\r\n              Export Excel\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Filters Section -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-4\">\r\n            <cide-ele-input\r\n              label=\"Date From\"\r\n              formControlName=\"date_from\"\r\n              type=\"date\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n\r\n            <cide-ele-input\r\n              label=\"Date To\"\r\n              formControlName=\"date_to\"\r\n              type=\"date\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n\r\n            <cide-ele-select\r\n              label=\"Academic Year\"\r\n              formControlName=\"academic_year\"\r\n              [options]=\"academicYearOptions()\"\r\n              size=\"sm\"\r\n              placeholder=\"All Years\">\r\n            </cide-ele-select>\r\n\r\n            <cide-ele-select\r\n              label=\"Class/Program\"\r\n              formControlName=\"class_program\"\r\n              [options]=\"classOptions()\"\r\n              size=\"sm\"\r\n              placeholder=\"All Classes\">\r\n            </cide-ele-select>\r\n\r\n            <cide-ele-select\r\n              label=\"Payment Mode\"\r\n              formControlName=\"payment_mode\"\r\n              [options]=\"paymentModeOptions\"\r\n              size=\"sm\"\r\n              placeholder=\"All Modes\">\r\n            </cide-ele-select>\r\n          </div>\r\n\r\n          <div class=\"tw-flex tw-justify-end\">\r\n            <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"applyFilters()\" leftIcon=\"search\"\r\n              [disabled]=\"loading()\" [loading]=\"loading()\">\r\n              Generate Report\r\n            </button>\r\n          </div>\r\n        </form>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Summary Cards -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200\">\r\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\r\n          <!-- Total Collection Card -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n            <div class=\"tw-bg-green-100 tw-rounded-full tw-p-3\">\r\n              <cide-ele-icon class=\"tw-text-green-600 tw-w-6 tw-h-6\">account_balance_wallet</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1\">\r\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Collection</div>\r\n              <div class=\"tw-text-xl tw-font-bold tw-text-green-600\">{{ formatCurrency(summary().total_collection) }}</div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Total Receipts Card -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n            <div class=\"tw-bg-blue-100 tw-rounded-full tw-p-3\">\r\n              <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">receipt</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1\">\r\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Receipts</div>\r\n              <div class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ summary().total_receipts }}</div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Online Payments Card -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n            <div class=\"tw-bg-cyan-100 tw-rounded-full tw-p-3\">\r\n              <cide-ele-icon class=\"tw-text-cyan-600 tw-w-6 tw-h-6\">language</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1\">\r\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Online Payments</div>\r\n              <div class=\"tw-text-xl tw-font-bold tw-text-cyan-600\">{{ formatCurrency(summary().online_payments) }}</div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Cash Payments Card -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n            <div class=\"tw-bg-yellow-100 tw-rounded-full tw-p-3\">\r\n              <cide-ele-icon class=\"tw-text-yellow-600 tw-w-6 tw-h-6\">money</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1\">\r\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Cash Payments</div>\r\n              <div class=\"tw-text-xl tw-font-bold tw-text-yellow-600\">{{ formatCurrency(summary().cash_payments) }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n        <div class=\"tw-space-y-6\">\r\n          \r\n          <!-- Collection by Date Section -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Date</h6>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <cide-ele-data-grid \r\n                [config]=\"dateGridConfig()\" \r\n                (gridEvent)=\"onGridEvent($event)\">\r\n              </cide-ele-data-grid>\r\n              \r\n              <!-- Footer Totals -->\r\n              <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n                <div class=\"tw-grid tw-grid-cols-7 tw-gap-4 tw-text-sm\">\r\n                  <div class=\"tw-font-semibold tw-text-gray-900\">TOTAL</div>\r\n                  <div class=\"tw-font-semibold tw-text-center tw-text-gray-900\">{{ totalReceipts() }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCash()) }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOnline()) }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCheque()) }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOther()) }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-green-600\">{{ formatCurrency(grandTotal()) }}</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Collection by Class Section -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Class/Program</h6>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <cide-ele-data-grid \r\n                [config]=\"classGridConfig()\" \r\n                (gridEvent)=\"onGridEvent($event)\">\r\n              </cide-ele-data-grid>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CollectionReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    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"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CollectionReportComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CollectionReportComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-collection-report', standalone: true, imports: [
                         CommonModule,
@@ -7438,10 +8057,10 @@ class MyFeeStatementComponent {
     onGridEvent(event) {
         console.log('Grid event:', event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MyFeeStatementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: MyFeeStatementComponent, isStandalone: true, selector: "cide-my-fee-statement", viewQueries: [{ propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsRendererTemplate", first: true, predicate: ["actionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "paymentHistoryRendererTemplate", first: true, predicate: ["paymentHistoryRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- My Fee Statement Container with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'my_fee_statement' }\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions>\n    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"makePayment()\" leftIcon=\"payment\"\n      [disabled]=\"feeSummary().outstanding === 0 || loading()\">\n      Make Payment\n    </button>\n  </div>\n\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n    <!-- Student Info Section -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gradient-to-r tw-from-blue-50 tw-to-purple-50\">\n        <div class=\"tw-flex tw-items-center tw-gap-4\">\n          <div class=\"tw-w-16 tw-h-16 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-border-2 tw-border-white tw-shadow-sm\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-8 tw-h-8\">person</cide-ele-icon>\n          </div>\n          <div class=\"tw-flex-1\">\n            <h6 class=\"tw-text-lg tw-font-semibold tw-text-gray-900 tw-mb-1\">{{ studentInfo().name }}</h6>\n            <div class=\"tw-flex tw-flex-wrap tw-gap-4 tw-text-sm tw-text-gray-600\">\n              <span><strong>Student ID:</strong> {{ studentInfo().id }}</span>\n              <span><strong>Class:</strong> {{ studentInfo().class }}</span>\n              <span><strong>Section:</strong> {{ studentInfo().section }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Summary Cards -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200\">\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n          <!-- Total Fees Card -->\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\">\n            <div class=\"tw-bg-blue-100 tw-rounded-full tw-p-3\">\n              <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">account_balance_wallet</cide-ele-icon>\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Fees</div>\n              <div class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ formatCurrency(feeSummary().total_fees) }}</div>\n            </div>\n          </div>\n\n          <!-- Paid Amount Card -->\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\">\n            <div class=\"tw-bg-green-100 tw-rounded-full tw-p-3\">\n              <cide-ele-icon class=\"tw-text-green-600 tw-w-6 tw-h-6\">check_circle</cide-ele-icon>\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Paid Amount</div>\n              <div class=\"tw-text-xl tw-font-bold tw-text-green-600\">{{ formatCurrency(feeSummary().paid_amount) }}</div>\n            </div>\n          </div>\n\n          <!-- Outstanding Card -->\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\">\n            <div class=\"tw-bg-red-100 tw-rounded-full tw-p-3\">\n              <cide-ele-icon class=\"tw-text-red-600 tw-w-6 tw-h-6\">warning</cide-ele-icon>\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Outstanding</div>\n              <div class=\"tw-text-xl tw-font-bold tw-text-red-600\">{{ formatCurrency(feeSummary().outstanding) }}</div>\n            </div>\n          </div>\n\n          <!-- Discount Card -->\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\">\n            <div class=\"tw-bg-yellow-100 tw-rounded-full tw-p-3\">\n              <cide-ele-icon class=\"tw-text-yellow-600 tw-w-6 tw-h-6\">local_offer</cide-ele-icon>\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Discount</div>\n              <div class=\"tw-text-xl tw-font-bold tw-text-yellow-600\">{{ formatCurrency(feeSummary().discount) }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\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-space-y-6\">\n          \n          <!-- Fee Details Section -->\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\">Fee Details</h6>\n            </div>\n            <div class=\"tw-p-4\">\n              <cide-ele-data-grid \n                [config]=\"feeDetailsGridConfig()\" \n                [templateRenderers]=\"templateRenderers()\"\n                (gridEvent)=\"onGridEvent($event)\">\n              </cide-ele-data-grid>\n            </div>\n          </div>\n\n          <!-- Payment History Section -->\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 History</h6>\n            </div>\n            <div class=\"tw-p-4\">\n              <cide-ele-data-grid \n                [config]=\"paymentHistoryGridConfig()\" \n                [templateRenderers]=\"templateRenderers()\"\n                (gridEvent)=\"onGridEvent($event)\">\n              </cide-ele-data-grid>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #statusRendererTemplate let-row=\"row\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n    [class.tw-bg-green-100]=\"row.status === 'PAID'\"\n    [class.tw-text-green-800]=\"row.status === 'PAID'\"\n    [class.tw-bg-yellow-100]=\"row.status === 'PENDING' || row.status === 'PARTIALLY_PAID'\"\n    [class.tw-text-yellow-800]=\"row.status === 'PENDING' || row.status === 'PARTIALLY_PAID'\"\n    [class.tw-bg-red-100]=\"row.status === 'OVERDUE'\"\n    [class.tw-text-red-800]=\"row.status === 'OVERDUE'\">\n    {{ row.status === 'PARTIALLY_PAID' ? 'PARTIALLY PAID' : row.status }}\n  </span>\n</ng-template>\n\n<ng-template #actionsRendererTemplate let-row=\"row\">\n  <!-- Actions if needed -->\n</ng-template>\n\n<ng-template #paymentHistoryRendererTemplate let-row=\"row\">\n  <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"downloadReceipt(row)\" leftIcon=\"download\">\n    Download\n  </button>\n</ng-template>\n\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MyFeeStatementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.15", type: MyFeeStatementComponent, isStandalone: true, selector: "cide-my-fee-statement", viewQueries: [{ propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsRendererTemplate", first: true, predicate: ["actionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "paymentHistoryRendererTemplate", first: true, predicate: ["paymentHistoryRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- My Fee Statement Container with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'my_fee_statement' }\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions>\n    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"makePayment()\" leftIcon=\"payment\"\n      [disabled]=\"feeSummary().outstanding === 0 || loading()\">\n      Make Payment\n    </button>\n  </div>\n\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n    <!-- Student Info Section -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gradient-to-r tw-from-blue-50 tw-to-purple-50\">\n        <div class=\"tw-flex tw-items-center tw-gap-4\">\n          <div class=\"tw-w-16 tw-h-16 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-border-2 tw-border-white tw-shadow-sm\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-8 tw-h-8\">person</cide-ele-icon>\n          </div>\n          <div class=\"tw-flex-1\">\n            <h6 class=\"tw-text-lg tw-font-semibold tw-text-gray-900 tw-mb-1\">{{ studentInfo().name }}</h6>\n            <div class=\"tw-flex tw-flex-wrap tw-gap-4 tw-text-sm tw-text-gray-600\">\n              <span><strong>Student ID:</strong> {{ studentInfo().id }}</span>\n              <span><strong>Class:</strong> {{ studentInfo().class }}</span>\n              <span><strong>Section:</strong> {{ studentInfo().section }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Summary Cards -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200\">\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n          <!-- Total Fees Card -->\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\">\n            <div class=\"tw-bg-blue-100 tw-rounded-full tw-p-3\">\n              <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">account_balance_wallet</cide-ele-icon>\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Fees</div>\n              <div class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ formatCurrency(feeSummary().total_fees) }}</div>\n            </div>\n          </div>\n\n          <!-- Paid Amount Card -->\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\">\n            <div class=\"tw-bg-green-100 tw-rounded-full tw-p-3\">\n              <cide-ele-icon class=\"tw-text-green-600 tw-w-6 tw-h-6\">check_circle</cide-ele-icon>\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Paid Amount</div>\n              <div class=\"tw-text-xl tw-font-bold tw-text-green-600\">{{ formatCurrency(feeSummary().paid_amount) }}</div>\n            </div>\n          </div>\n\n          <!-- Outstanding Card -->\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\">\n            <div class=\"tw-bg-red-100 tw-rounded-full tw-p-3\">\n              <cide-ele-icon class=\"tw-text-red-600 tw-w-6 tw-h-6\">warning</cide-ele-icon>\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Outstanding</div>\n              <div class=\"tw-text-xl tw-font-bold tw-text-red-600\">{{ formatCurrency(feeSummary().outstanding) }}</div>\n            </div>\n          </div>\n\n          <!-- Discount Card -->\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\">\n            <div class=\"tw-bg-yellow-100 tw-rounded-full tw-p-3\">\n              <cide-ele-icon class=\"tw-text-yellow-600 tw-w-6 tw-h-6\">local_offer</cide-ele-icon>\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Discount</div>\n              <div class=\"tw-text-xl tw-font-bold tw-text-yellow-600\">{{ formatCurrency(feeSummary().discount) }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\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-space-y-6\">\n          \n          <!-- Fee Details Section -->\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\">Fee Details</h6>\n            </div>\n            <div class=\"tw-p-4\">\n              <cide-ele-data-grid \n                [config]=\"feeDetailsGridConfig()\" \n                [templateRenderers]=\"templateRenderers()\"\n                (gridEvent)=\"onGridEvent($event)\">\n              </cide-ele-data-grid>\n            </div>\n          </div>\n\n          <!-- Payment History Section -->\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 History</h6>\n            </div>\n            <div class=\"tw-p-4\">\n              <cide-ele-data-grid \n                [config]=\"paymentHistoryGridConfig()\" \n                [templateRenderers]=\"templateRenderers()\"\n                (gridEvent)=\"onGridEvent($event)\">\n              </cide-ele-data-grid>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #statusRendererTemplate let-row=\"row\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n    [class.tw-bg-green-100]=\"row.status === 'PAID'\"\n    [class.tw-text-green-800]=\"row.status === 'PAID'\"\n    [class.tw-bg-yellow-100]=\"row.status === 'PENDING' || row.status === 'PARTIALLY_PAID'\"\n    [class.tw-text-yellow-800]=\"row.status === 'PENDING' || row.status === 'PARTIALLY_PAID'\"\n    [class.tw-bg-red-100]=\"row.status === 'OVERDUE'\"\n    [class.tw-text-red-800]=\"row.status === 'OVERDUE'\">\n    {{ row.status === 'PARTIALLY_PAID' ? 'PARTIALLY PAID' : row.status }}\n  </span>\n</ng-template>\n\n<ng-template #actionsRendererTemplate let-row=\"row\">\n  <!-- Actions if needed -->\n</ng-template>\n\n<ng-template #paymentHistoryRendererTemplate let-row=\"row\">\n  <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"downloadReceipt(row)\" leftIcon=\"download\">\n    Download\n  </button>\n</ng-template>\n\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MyFeeStatementComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MyFeeStatementComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-my-fee-statement', standalone: true, imports: [
                         CommonModule,
@@ -7450,7 +8069,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleDataGridComponent,
                         CideLytSharedWrapperComponent
                     ], template: "<!-- My Fee Statement Container with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'my_fee_statement' }\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions>\n    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"makePayment()\" leftIcon=\"payment\"\n      [disabled]=\"feeSummary().outstanding === 0 || loading()\">\n      Make Payment\n    </button>\n  </div>\n\n  <div class=\"tw-table tw-w-full tw-h-full\">\n\n    <!-- Student Info Section -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gradient-to-r tw-from-blue-50 tw-to-purple-50\">\n        <div class=\"tw-flex tw-items-center tw-gap-4\">\n          <div class=\"tw-w-16 tw-h-16 tw-rounded-full tw-bg-blue-100 tw-flex tw-items-center tw-justify-center tw-border-2 tw-border-white tw-shadow-sm\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-8 tw-h-8\">person</cide-ele-icon>\n          </div>\n          <div class=\"tw-flex-1\">\n            <h6 class=\"tw-text-lg tw-font-semibold tw-text-gray-900 tw-mb-1\">{{ studentInfo().name }}</h6>\n            <div class=\"tw-flex tw-flex-wrap tw-gap-4 tw-text-sm tw-text-gray-600\">\n              <span><strong>Student ID:</strong> {{ studentInfo().id }}</span>\n              <span><strong>Class:</strong> {{ studentInfo().class }}</span>\n              <span><strong>Section:</strong> {{ studentInfo().section }}</span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Summary Cards -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200\">\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n          <!-- Total Fees Card -->\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\">\n            <div class=\"tw-bg-blue-100 tw-rounded-full tw-p-3\">\n              <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">account_balance_wallet</cide-ele-icon>\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Fees</div>\n              <div class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ formatCurrency(feeSummary().total_fees) }}</div>\n            </div>\n          </div>\n\n          <!-- Paid Amount Card -->\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\">\n            <div class=\"tw-bg-green-100 tw-rounded-full tw-p-3\">\n              <cide-ele-icon class=\"tw-text-green-600 tw-w-6 tw-h-6\">check_circle</cide-ele-icon>\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Paid Amount</div>\n              <div class=\"tw-text-xl tw-font-bold tw-text-green-600\">{{ formatCurrency(feeSummary().paid_amount) }}</div>\n            </div>\n          </div>\n\n          <!-- Outstanding Card -->\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\">\n            <div class=\"tw-bg-red-100 tw-rounded-full tw-p-3\">\n              <cide-ele-icon class=\"tw-text-red-600 tw-w-6 tw-h-6\">warning</cide-ele-icon>\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Outstanding</div>\n              <div class=\"tw-text-xl tw-font-bold tw-text-red-600\">{{ formatCurrency(feeSummary().outstanding) }}</div>\n            </div>\n          </div>\n\n          <!-- Discount Card -->\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\">\n            <div class=\"tw-bg-yellow-100 tw-rounded-full tw-p-3\">\n              <cide-ele-icon class=\"tw-text-yellow-600 tw-w-6 tw-h-6\">local_offer</cide-ele-icon>\n            </div>\n            <div class=\"tw-flex-1\">\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Discount</div>\n              <div class=\"tw-text-xl tw-font-bold tw-text-yellow-600\">{{ formatCurrency(feeSummary().discount) }}</div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\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-space-y-6\">\n          \n          <!-- Fee Details Section -->\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\">Fee Details</h6>\n            </div>\n            <div class=\"tw-p-4\">\n              <cide-ele-data-grid \n                [config]=\"feeDetailsGridConfig()\" \n                [templateRenderers]=\"templateRenderers()\"\n                (gridEvent)=\"onGridEvent($event)\">\n              </cide-ele-data-grid>\n            </div>\n          </div>\n\n          <!-- Payment History Section -->\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 History</h6>\n            </div>\n            <div class=\"tw-p-4\">\n              <cide-ele-data-grid \n                [config]=\"paymentHistoryGridConfig()\" \n                [templateRenderers]=\"templateRenderers()\"\n                (gridEvent)=\"onGridEvent($event)\">\n              </cide-ele-data-grid>\n            </div>\n          </div>\n\n        </div>\n      </div>\n    </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #statusRendererTemplate let-row=\"row\">\n  <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n    [class.tw-bg-green-100]=\"row.status === 'PAID'\"\n    [class.tw-text-green-800]=\"row.status === 'PAID'\"\n    [class.tw-bg-yellow-100]=\"row.status === 'PENDING' || row.status === 'PARTIALLY_PAID'\"\n    [class.tw-text-yellow-800]=\"row.status === 'PENDING' || row.status === 'PARTIALLY_PAID'\"\n    [class.tw-bg-red-100]=\"row.status === 'OVERDUE'\"\n    [class.tw-text-red-800]=\"row.status === 'OVERDUE'\">\n    {{ row.status === 'PARTIALLY_PAID' ? 'PARTIALLY PAID' : row.status }}\n  </span>\n</ng-template>\n\n<ng-template #actionsRendererTemplate let-row=\"row\">\n  <!-- Actions if needed -->\n</ng-template>\n\n<ng-template #paymentHistoryRendererTemplate let-row=\"row\">\n  <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"downloadReceipt(row)\" leftIcon=\"download\">\n    Download\n  </button>\n</ng-template>\n\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
-        }] });
+        }], propDecorators: { statusRendererTemplate: [{ type: i0.ViewChild, args: ['statusRendererTemplate', { isSignal: true }] }], actionsRendererTemplate: [{ type: i0.ViewChild, args: ['actionsRendererTemplate', { isSignal: true }] }], paymentHistoryRendererTemplate: [{ type: i0.ViewChild, args: ['paymentHistoryRendererTemplate', { isSignal: true }] }] } });
 
 var myFeeStatement_component = /*#__PURE__*/Object.freeze({
   __proto__: null,
@@ -7820,10 +8439,10 @@ class MyOnlinePaymentComponent {
     formatCurrency(amount) {
         return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MyOnlinePaymentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<!-- My Online Payment Container -->\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 -->\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\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\">\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\">\n          \n          <!-- Title -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Online Fee Payment</h5>\n          </div>\n\n          <!-- Actions -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" leftIcon=\"arrow_back\">\n              Back to Statement\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\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 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 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)\"\n                    [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)\"\n                    (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                        <input \n                          type=\"checkbox\" \n                          [checked]=\"isSelected(fee)\"\n                          (change)=\"toggleFee(fee); $event.stopPropagation()\"\n                          class=\"tw-mt-1\">\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 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 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 (2%)</span>\n                    <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\n                  </div>\n                }\n                <div class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\n                  <span>Total Payable</span>\n                  <span>{{ formatCurrency(totalPayable()) }}</span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payment Method Selection -->\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\">Select Payment Method</h6>\n              </div>\n              <div class=\"tw-p-4\">\n                <form [formGroup]=\"paymentForm\" class=\"tw-space-y-4\">\n                  \n                  <!-- Payment Method Cards -->\n                  <div class=\"tw-grid tw-grid-cols-3 tw-gap-3 tw-mb-4\">\n                    @for (method of paymentMethodOptions; track method.value) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-p-4 tw-rounded-lg tw-border-2 tw-text-center tw-transition-colors\"\n                        [class.tw-border-blue-500]=\"selectedPaymentMethod() === method.value\"\n                        [class.tw-bg-blue-50]=\"selectedPaymentMethod() === method.value\"\n                        [class.tw-border-gray-200]=\"selectedPaymentMethod() !== method.value\"\n                        (click)=\"selectPaymentMethod(method.value)\">\n                        <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2\"\n                          [class.tw-text-blue-600]=\"selectedPaymentMethod() === method.value\"\n                          [class.tw-text-gray-400]=\"selectedPaymentMethod() !== method.value\">\n                          @switch (method.value) {\n                            @case ('UPI') { account_balance_wallet }\n                            @case ('CARD') { credit_card }\n                            @case ('NET_BANKING') { account_balance }\n                          }\n                        </cide-ele-icon>\n                        <div class=\"tw-text-xs tw-font-medium\">{{ method.label }}</div>\n                      </button>\n                    }\n                  </div>\n\n                  <!-- UPI Details -->\n                  @if (selectedPaymentMethod() === 'UPI') {\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\n                      <cide-ele-input\n                        label=\"UPI ID\"\n                        formControlName=\"upi_id\"\n                        placeholder=\"username@upi\"\n                        size=\"sm\"\n                        [required]=\"true\">\n                      </cide-ele-input>\n                    </div>\n                  }\n\n                  <!-- Card Details -->\n                  @if (selectedPaymentMethod() === 'CARD') {\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200 tw-space-y-3\">\n                      <cide-ele-input\n                        label=\"Card Number\"\n                        formControlName=\"card_number\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        size=\"sm\"\n                        maxLength=\"19\"\n                        [required]=\"true\">\n                      </cide-ele-input>\n                      <div class=\"tw-grid tw-grid-cols-2 tw-gap-3\">\n                        <cide-ele-input\n                          label=\"Expiry Date\"\n                          formControlName=\"expiry\"\n                          placeholder=\"MM/YY\"\n                          size=\"sm\"\n                          maxLength=\"5\"\n                          [required]=\"true\">\n                        </cide-ele-input>\n                        <cide-ele-input\n                          label=\"CVV\"\n                          formControlName=\"cvv\"\n                          type=\"password\"\n                          placeholder=\"***\"\n                          size=\"sm\"\n                          maxLength=\"3\"\n                          [required]=\"true\">\n                        </cide-ele-input>\n                      </div>\n                    </div>\n                  }\n\n                  <!-- Net Banking Details -->\n                  @if (selectedPaymentMethod() === 'NET_BANKING') {\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\n                      <cide-ele-select\n                        label=\"Select Bank\"\n                        formControlName=\"bank\"\n                        [options]=\"bankOptions\"\n                        size=\"sm\"\n                        placeholder=\"Select Bank\"\n                        [required]=\"true\">\n                      </cide-ele-select>\n                    </div>\n                  }\n\n                  <!-- Action Buttons -->\n                  <div class=\"tw-flex tw-gap-3 tw-pt-4\">\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" class=\"tw-flex-1\">\n                      Cancel\n                    </button>\n                    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"proceedToPayment()\"\n                      [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" class=\"tw-flex-1\" leftIcon=\"payment\">\n                      Pay {{ formatCurrency(totalPayable()) }}\n                    </button>\n                  </div>\n\n                  <!-- Security Info -->\n                  <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-pt-2 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                </form>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MyOnlinePaymentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<!-- My Online Payment Container -->\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 -->\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\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\">\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\">\n          \n          <!-- Title -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Online Fee Payment</h5>\n          </div>\n\n          <!-- Actions -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" leftIcon=\"arrow_back\">\n              Back to Statement\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\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 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 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)\"\n                    [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)\"\n                    (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                        <input \n                          type=\"checkbox\" \n                          [checked]=\"isSelected(fee)\"\n                          (change)=\"toggleFee(fee); $event.stopPropagation()\"\n                          class=\"tw-mt-1\">\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 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 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 (2%)</span>\n                    <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\n                  </div>\n                }\n                <div class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\n                  <span>Total Payable</span>\n                  <span>{{ formatCurrency(totalPayable()) }}</span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payment Method Selection -->\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\">Select Payment Method</h6>\n              </div>\n              <div class=\"tw-p-4\">\n                <form [formGroup]=\"paymentForm\" class=\"tw-space-y-4\">\n                  \n                  <!-- Payment Method Cards -->\n                  <div class=\"tw-grid tw-grid-cols-3 tw-gap-3 tw-mb-4\">\n                    @for (method of paymentMethodOptions; track method.value) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-p-4 tw-rounded-lg tw-border-2 tw-text-center tw-transition-colors\"\n                        [class.tw-border-blue-500]=\"selectedPaymentMethod() === method.value\"\n                        [class.tw-bg-blue-50]=\"selectedPaymentMethod() === method.value\"\n                        [class.tw-border-gray-200]=\"selectedPaymentMethod() !== method.value\"\n                        (click)=\"selectPaymentMethod(method.value)\">\n                        <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2\"\n                          [class.tw-text-blue-600]=\"selectedPaymentMethod() === method.value\"\n                          [class.tw-text-gray-400]=\"selectedPaymentMethod() !== method.value\">\n                          @switch (method.value) {\n                            @case ('UPI') { account_balance_wallet }\n                            @case ('CARD') { credit_card }\n                            @case ('NET_BANKING') { account_balance }\n                          }\n                        </cide-ele-icon>\n                        <div class=\"tw-text-xs tw-font-medium\">{{ method.label }}</div>\n                      </button>\n                    }\n                  </div>\n\n                  <!-- UPI Details -->\n                  @if (selectedPaymentMethod() === 'UPI') {\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\n                      <cide-ele-input\n                        label=\"UPI ID\"\n                        formControlName=\"upi_id\"\n                        placeholder=\"username@upi\"\n                        size=\"sm\"\n                        [required]=\"true\">\n                      </cide-ele-input>\n                    </div>\n                  }\n\n                  <!-- Card Details -->\n                  @if (selectedPaymentMethod() === 'CARD') {\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200 tw-space-y-3\">\n                      <cide-ele-input\n                        label=\"Card Number\"\n                        formControlName=\"card_number\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        size=\"sm\"\n                        maxLength=\"19\"\n                        [required]=\"true\">\n                      </cide-ele-input>\n                      <div class=\"tw-grid tw-grid-cols-2 tw-gap-3\">\n                        <cide-ele-input\n                          label=\"Expiry Date\"\n                          formControlName=\"expiry\"\n                          placeholder=\"MM/YY\"\n                          size=\"sm\"\n                          maxLength=\"5\"\n                          [required]=\"true\">\n                        </cide-ele-input>\n                        <cide-ele-input\n                          label=\"CVV\"\n                          formControlName=\"cvv\"\n                          type=\"password\"\n                          placeholder=\"***\"\n                          size=\"sm\"\n                          maxLength=\"3\"\n                          [required]=\"true\">\n                        </cide-ele-input>\n                      </div>\n                    </div>\n                  }\n\n                  <!-- Net Banking Details -->\n                  @if (selectedPaymentMethod() === 'NET_BANKING') {\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\n                      <cide-ele-select\n                        label=\"Select Bank\"\n                        formControlName=\"bank\"\n                        [options]=\"bankOptions\"\n                        size=\"sm\"\n                        placeholder=\"Select Bank\"\n                        [required]=\"true\">\n                      </cide-ele-select>\n                    </div>\n                  }\n\n                  <!-- Action Buttons -->\n                  <div class=\"tw-flex tw-gap-3 tw-pt-4\">\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" class=\"tw-flex-1\">\n                      Cancel\n                    </button>\n                    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"proceedToPayment()\"\n                      [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" class=\"tw-flex-1\" leftIcon=\"payment\">\n                      Pay {{ formatCurrency(totalPayable()) }}\n                    </button>\n                  </div>\n\n                  <!-- Security Info -->\n                  <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-pt-2 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                </form>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MyOnlinePaymentComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MyOnlinePaymentComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-my-online-payment', standalone: true, imports: [
                         CommonModule,
@@ -7841,13 +8460,28 @@ var myOnlinePayment_component = /*#__PURE__*/Object.freeze({
 });
 
 class FeeDetailsViewerComponent {
-    // Inputs
-    isOpen = input(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
-    studentId = input(null, ...(ngDevMode ? [{ debugName: "studentId" }] : []));
-    feeId = input(null, ...(ngDevMode ? [{ debugName: "feeId" }] : []));
-    feeData = input(null, ...(ngDevMode ? [{ debugName: "feeData" }] : [])); // For new applicable fees
-    assignmentDate = input(null, ...(ngDevMode ? [{ debugName: "assignmentDate" }] : [])); // Assignment date for due date calculation
-    discount = input(0, ...(ngDevMode ? [{ debugName: "discount" }] : [])); // Discount amount to apply
+    // Inputs with backing signals
+    _isOpen = signal(false, ...(ngDevMode ? [{ debugName: "_isOpen" }] : []));
+    set isOpen(value) { this._isOpen.set(value); }
+    get isOpen() { return this._isOpen(); }
+    _studentId = signal(null, ...(ngDevMode ? [{ debugName: "_studentId" }] : []));
+    set studentId(value) { this._studentId.set(value); }
+    get studentId() { return this._studentId(); }
+    _feeId = signal(null, ...(ngDevMode ? [{ debugName: "_feeId" }] : []));
+    set feeId(value) { this._feeId.set(value); }
+    get feeId() { return this._feeId(); }
+    _feeData = signal(null, ...(ngDevMode ? [{ debugName: "_feeData" }] : []));
+    set feeData(value) { this._feeData.set(value); }
+    get feeData() { return this._feeData(); }
+    _assignmentDate = signal(null, ...(ngDevMode ? [{ debugName: "_assignmentDate" }] : []));
+    set assignmentDate(value) { this._assignmentDate.set(value); }
+    get assignmentDate() { return this._assignmentDate(); }
+    _discount = signal(0, ...(ngDevMode ? [{ debugName: "_discount" }] : []));
+    set discount(value) { this._discount.set(value); }
+    get discount() { return this._discount(); }
+    _scholarship = signal(0, ...(ngDevMode ? [{ debugName: "_scholarship" }] : []));
+    set scholarship(value) { this._scholarship.set(value); }
+    get scholarship() { return this._scholarship(); }
     // Outputs
     closed = output();
     // Services
@@ -7860,16 +8494,47 @@ class FeeDetailsViewerComponent {
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     feeDetails = signal(null, ...(ngDevMode ? [{ debugName: "feeDetails" }] : []));
+    constructor() {
+        // Watch for changes in inputs and reload when they change
+        effect(() => {
+            // Accessing the getters (which read signals) registers dependencies
+            this.isOpen;
+            this.studentId;
+            this.feeId;
+            this.feeData;
+            this.assignmentDate;
+            this.assignmentDate;
+            this.discount;
+            this.scholarship;
+            this.loadFeeDetails();
+        });
+    }
     ngOnInit() {
         // Initialize rights for fee details viewer (view-only)
         this.rightsService.initializeRights('fee_statement');
-        // Watch for changes in inputs and reload when they change
-        this.loadFeeDetails();
     }
+    /**
+     * Helper to get value from input (handles signals and plain values)
+     * This helper is no longer needed as getters now return unwrapped values.
+     */
+    // private getValue(input: any): any {
+    //   if (typeof input === 'function') {
+    //     try {
+    //       return input();
+    //     } catch {
+    //       return input;
+    //     }
+    //   }
+    //   // Check if it's a signal object (has a call signature)
+    //   if (input && typeof input === 'object' && '_value' in input) {
+    //     return (input as any)._value;
+    //   }
+    //   return input;
+    // }
     loadFeeDetails() {
-        // Check if feeData signal input is available and has a value
+        // Check if feeData input is available and has a value
         try {
-            const feeDataValue = this.feeData?.();
+            const feeDataValue = this.feeData;
             console.log('🔍 FeeDetailsViewer - loadFeeDetails - feeDataValue:', feeDataValue);
             console.log('🔍 FeeDetailsViewer - loadFeeDetails - _feeItemData:', feeDataValue?._feeItemData);
             if (feeDataValue) {
@@ -7880,11 +8545,11 @@ class FeeDetailsViewerComponent {
         }
         catch (error) {
             // Signal input might not be initialized yet, continue to other checks
-            console.warn('FeeData signal not yet initialized:', error);
+            console.warn('FeeData logic error in loadFeeDetails:', error);
         }
         // Fallback to loading from student/fee IDs
-        const studentIdValue = this.studentId?.();
-        const feeIdValue = this.feeId?.();
+        const studentIdValue = this.studentId;
+        const feeIdValue = this.feeId;
         if (studentIdValue && feeIdValue) {
             // Load existing fee assignment
             this.loadFeeAssignment();
@@ -7900,11 +8565,11 @@ class FeeDetailsViewerComponent {
         // Cleanup handled by takeUntilDestroyed
     }
     loadFeeAssignment() {
-        if (!this.feeId() || !this.studentId())
+        if (!this.feeId || !this.studentId)
             return;
         this.loading.set(true);
         this.error.set(null);
-        this.feeAssignmentService.getFeeAssignmentById(this.feeId())
+        this.feeAssignmentService.getFeeAssignmentById(this.feeId)
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe({
             next: (response) => {
@@ -7925,7 +8590,7 @@ class FeeDetailsViewerComponent {
         });
     }
     loadFeeStructureItem() {
-        if (!this.feeId())
+        if (!this.feeId)
             return;
         this.loading.set(true);
         this.error.set(null);
@@ -7933,7 +8598,7 @@ class FeeDetailsViewerComponent {
         // We need to get the structure first, then find the item
         // For now, let's assume feeId is the structure ID and we need to find the item
         const payload = {
-            fees_id: this.feeId()
+            fees_id: this.feeId
         };
         this.feeStructureService.getFeeStructureById(payload)
             .pipe(takeUntilDestroyed(this.destroyRef))
@@ -7975,69 +8640,46 @@ class FeeDetailsViewerComponent {
     }
     processFeeData(fee) {
         console.log('🔍 FeeDetailsViewer - processFeeData - fee:', fee);
-        console.log('🔍 FeeDetailsViewer - processFeeData - _feeItemData:', fee._feeItemData);
+        console.log('🔍 FeeDetailsViewer - processFeeData - _feeItemData:', fee?._feeItemData);
         // Ensure we have proper item data structure
-        let itemData = fee._feeItemData;
-        console.log('🔍 FeeDetailsViewer - processFeeData - itemData before check:', itemData);
-        console.log('🔍 FeeDetailsViewer - processFeeData - itemData type:', typeof itemData);
-        console.log('🔍 FeeDetailsViewer - processFeeData - itemData keys:', itemData ? Object.keys(itemData) : 'null/undefined');
+        // We use a temporary variable with a broader type to allow fallbacks, then cast to specific type
+        let rawItemData = fee._feeItemData;
         // If _feeItemData doesn't exist or is incomplete, construct it from fee data
-        if (!itemData || typeof itemData !== 'object' || Object.keys(itemData).length === 0) {
-            console.warn('⚠️ FeeDetailsViewer - _feeItemData is missing or empty, creating fallback');
-            // Try to extract from fee object itself if it has the structure
-            if (fee && typeof fee === 'object' && 'feesi_item_name' in fee) {
-                itemData = fee; // Use fee as itemData if it has feesi_ fields
-            }
-            else {
-                // Last resort: create minimal structure from available fee data
-                itemData = {
-                    feesi_item_name: fee.fees_structure_name || 'N/A',
-                    feesi_item_code: fee.fees_structure_code || 'N/A',
-                    feesi_amount: fee.fees_amount || fee.fees_total_amount || 0,
-                    feesi_description: 'No description available',
-                    feesi_category_id_sygms: fee.fees_category_name || null,
-                    feesi_is_mandatory: false,
-                    feesi_is_refundable: false,
-                    feesi_is_amount_editable: false,
-                    feesi_is_installment_allowed: false,
-                    feesi_installment_count: 1,
-                    feesi_due_date_offset_days: 0,
-                    feesi_collection_start_offset_days: 0,
-                    feesi_collection_end_offset_days: 30,
-                    feesi_tax_applicable: false,
-                    feesi_tax_percentage: 0
-                };
-            }
+        if (!rawItemData || typeof rawItemData !== 'object' || Object.keys(rawItemData).length === 0) {
+            console.warn('⚠️ FeeDetailsViewer - _feeItemData is missing or empty, using fee object as fallback');
+            rawItemData = fee;
         }
-        else {
-            // Ensure all required fields exist, using fee data as fallback
-            // Only use fallback if the field is missing or empty
-            if (!itemData.feesi_item_name || itemData.feesi_item_name === 'N/A') {
-                itemData.feesi_item_name = fee.fees_structure_name || itemData.feesi_item_name || 'N/A';
-            }
-            if (!itemData.feesi_item_code || itemData.feesi_item_code === 'N/A') {
-                itemData.feesi_item_code = fee.fees_structure_code || itemData.feesi_item_code || 'N/A';
-            }
-            if (itemData.feesi_amount === undefined || itemData.feesi_amount === null || itemData.feesi_amount === 0) {
-                itemData.feesi_amount = fee.fees_amount || fee.fees_total_amount || itemData.feesi_amount || 0;
-            }
-            if (!itemData.feesi_description || itemData.feesi_description === 'No description available') {
-                itemData.feesi_description = itemData.feesi_description || 'No description available';
+        // Ensure we have a valid itemData object to work with
+        const itemData = rawItemData || {};
+        // Robustly fill missing fields in itemData from top-level fee properties
+        // This handles cases where data is flattened or mapped differently
+        if (!itemData.feesi_item_name || itemData.feesi_item_name === 'N/A') {
+            itemData.feesi_item_name = fee.fees_structure_name || fee.feesi_item_name || 'N/A';
+        }
+        if (!itemData.feesi_item_code || itemData.feesi_item_code === 'N/A') {
+            itemData.feesi_item_code = fee.fees_structure_code || fee.feesi_item_code || 'N/A';
+        }
+        if (itemData.feesi_amount === undefined || itemData.feesi_amount === null) {
+            itemData.feesi_amount = fee.fees_amount || fee.fees_total_amount || fee.feesi_amount || 0;
+        }
+        if (!itemData.feesi_description || itemData.feesi_description === 'No description available') {
+            itemData.feesi_description = fee.feesi_description || 'No description available';
+        }
+        // Ensure category is properly set
+        if (!itemData.feesi_category_id_sygms) {
+            // Check if it exists at root
+            if (fee.feesi_category_id_sygms) {
+                itemData.feesi_category_id_sygms = fee.feesi_category_id_sygms;
             }
-            // Ensure category is properly set
-            if (!itemData.feesi_category_id_sygms || (typeof itemData.feesi_category_id_sygms === 'string' && itemData.feesi_category_id_sygms === 'N/A')) {
-                // Try to preserve if it's an object, otherwise use category name from fee
-                if (fee.fees_category_name && fee.fees_category_name !== 'N/A') {
-                    // If we have category name but not the ID object, we'll use the name
-                    // The category extraction in calculateAndSetFeeDetails will handle this
-                }
+            else if (fee.fees_category_name && fee.fees_category_name !== 'N/A') {
+                // We have a name but no ID object, that's fine, logic later handles name only
             }
         }
-        const finalAmount = (fee.fees_total_amount || fee.fees_amount || 0) - (this.discount() || fee.discount || 0);
+        const finalAmount = (fee.fees_total_amount || fee.fees_amount || 0) - (this.discount || fee.discount || 0) - (this.scholarship || fee.scholarship || 0);
         // Ensure assignmentDate is a Date object
         let assignmentDate;
         try {
-            const dateValue = this.assignmentDate();
+            const dateValue = this.assignmentDate;
             if (dateValue instanceof Date) {
                 assignmentDate = dateValue;
             }
@@ -8059,7 +8701,8 @@ class FeeDetailsViewerComponent {
             fees_category_name: fee.fees_category_name || 'N/A',
             fees_amount: fee.fees_amount || fee.fees_total_amount || 0,
             fees_total_amount: fee.fees_total_amount || fee.fees_amount || 0,
-            discount: fee.discount || this.discount() || 0,
+            discount: fee.discount || this.discount || 0,
+            scholarship: fee.scholarship || this.scholarship || 0,
             finalAmount: finalAmount,
             _feeItemData: itemData
         };
@@ -8078,7 +8721,7 @@ class FeeDetailsViewerComponent {
             }
             else {
                 // Try to get from input signal, otherwise use current date
-                const dateValue = this.assignmentDate();
+                const dateValue = this.assignmentDate;
                 if (dateValue instanceof Date) {
                     assignmentDate = dateValue;
                 }
@@ -8121,6 +8764,7 @@ class FeeDetailsViewerComponent {
             fees_amount: assignment.feeas_original_amount || 0,
             fees_total_amount: assignment.feeas_original_amount || 0,
             discount: assignment.feeas_discount_amount || 0,
+            scholarship: assignment.feeas_scholarship_amount || 0,
             finalAmount: finalAmount,
             _feeItemData: itemData,
             _feeAssignmentData: assignment
@@ -8128,11 +8772,11 @@ class FeeDetailsViewerComponent {
         this.calculateAndSetFeeDetails(itemData, feeData, finalAmount, assignmentDate);
     }
     processFeeItemData(item, structure) {
-        const finalAmount = (item.feesi_amount || 0) - (this.discount() || 0);
+        const finalAmount = (item.feesi_amount || 0) - (this.discount || 0) - (this.scholarship || 0);
         // Ensure assignmentDate is a Date object
         let assignmentDate;
         try {
-            const dateValue = this.assignmentDate();
+            const dateValue = this.assignmentDate;
             if (dateValue instanceof Date) {
                 assignmentDate = dateValue;
             }
@@ -8155,7 +8799,8 @@ class FeeDetailsViewerComponent {
                 : 'N/A',
             fees_amount: item.feesi_amount || 0,
             fees_total_amount: item.feesi_amount || 0,
-            discount: this.discount(),
+            discount: this.discount,
+            scholarship: this.scholarship,
             finalAmount: finalAmount,
             _feeItemData: item
         };
@@ -8247,8 +8892,8 @@ class FeeDetailsViewerComponent {
         }
         else if (itemData.feesi_category_id_sygms) {
             if (typeof itemData.feesi_category_id_sygms === 'object' && itemData.feesi_category_id_sygms !== null) {
-                categoryName = itemData.feesi_category_id_sygms?.sygms_title ||
-                    itemData.feesi_category_id_sygms?.sygms_name ||
+                categoryName = itemData.feesi_category_id_sygms.sygms_title ||
+                    itemData.feesi_category_id_sygms.sygms_name ||
                     'N/A';
             }
             else if (typeof itemData.feesi_category_id_sygms === 'string') {
@@ -8261,10 +8906,10 @@ class FeeDetailsViewerComponent {
             categoryName = itemData.feesi_item_code;
         }
         // Extract fee name - prioritize item name, then item code, then structure name
-        const feeName = itemData.feesi_item_name ||
-            itemData.feesi_item_code ||
-            feeData.fees_structure_name ||
-            'N/A';
+        const feeName = (itemData.feesi_item_name && itemData.feesi_item_name !== 'N/A') ? itemData.feesi_item_name :
+            (feeData.fees_structure_name && feeData.fees_structure_name !== 'N/A') ? feeData.fees_structure_name :
+                (itemData.feesi_item_code && itemData.feesi_item_code !== 'N/A') ? itemData.feesi_item_code :
+                    'N/A';
         // Extract item code - prioritize item code, then structure code, then structure name
         const itemCode = itemData.feesi_item_code ||
             feeData.fees_structure_code ||
@@ -8282,8 +8927,9 @@ class FeeDetailsViewerComponent {
             name: feeName,
             category: categoryName,
             amount: itemData.feesi_amount || feeData.fees_amount || 0,
-            discount: this.discount() || feeData.discount || 0,
-            finalAmount: finalAmount > 0 ? finalAmount : (itemData.feesi_amount || feeData.fees_amount || 0),
+            discount: this.discount || feeData.discount || 0,
+            scholarship: this.scholarship || feeData.scholarship || 0,
+            finalAmount: finalAmount,
             structureName: structureName,
             structureCode: feeData.fees_structure_code || 'N/A',
             itemCode: itemCode,
@@ -8308,8 +8954,8 @@ class FeeDetailsViewerComponent {
     onClose() {
         this.closed.emit();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeDetailsViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeDetailsViewerComponent, isStandalone: true, selector: "cide-fee-details-viewer", inputs: { isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, studentId: { classPropertyName: "studentId", publicName: "studentId", isSignal: true, isRequired: false, transformFunction: null }, feeId: { classPropertyName: "feeId", publicName: "feeId", isSignal: true, isRequired: false, transformFunction: null }, feeData: { classPropertyName: "feeData", publicName: "feeData", isSignal: true, isRequired: false, transformFunction: null }, assignmentDate: { classPropertyName: "assignmentDate", publicName: "assignmentDate", isSignal: true, isRequired: false, transformFunction: null }, discount: { classPropertyName: "discount", publicName: "discount", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed" }, ngImport: i0, template: `
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeDetailsViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeDetailsViewerComponent, isStandalone: true, selector: "cide-fee-details-viewer", inputs: { isOpen: "isOpen", studentId: "studentId", feeId: "feeId", feeData: "feeData", assignmentDate: "assignmentDate", discount: "discount", scholarship: "scholarship" }, outputs: { closed: "closed" }, ngImport: i0, template: `
     <div class="tw-p-4 tw-overflow-y-auto tw-h-full">
       @if (loading()) {
         <div class="tw-text-center tw-py-12">
@@ -8367,6 +9013,12 @@ class FeeDetailsViewerComponent {
                           <span class="tw-font-medium tw-text-blue-600">-{{ details.discount | currency }}</span>
                         </div>
                       }
+                      @if (details.scholarship > 0) {
+                        <div class="tw-flex tw-justify-between tw-items-center">
+                          <span class="tw-text-gray-600">Scholarship Applied:</span>
+                          <span class="tw-font-medium tw-text-purple-600">-{{ details.scholarship | currency }}</span>
+                        </div>
+                      }
                       @if (details.taxApplicable && details.taxPercentage > 0) {
                         <div class="tw-flex tw-justify-between tw-items-center">
                           <span class="tw-text-gray-600">Tax ({{ details.taxPercentage }}%):</span>
@@ -8515,14 +9167,14 @@ class FeeDetailsViewerComponent {
         }
       }
     </div>
-  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }] });
+  `, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: CurrencyPipe$1, name: "currency" }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeDetailsViewerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeDetailsViewerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'cide-fee-details-viewer', standalone: true, imports: [
                         CommonModule,
                         CideIconComponent,
-                        CurrencyPipe
+                        CurrencyPipe$1
                     ], template: `
     <div class="tw-p-4 tw-overflow-y-auto tw-h-full">
       @if (loading()) {
@@ -8581,6 +9233,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                           <span class="tw-font-medium tw-text-blue-600">-{{ details.discount | currency }}</span>
                         </div>
                       }
+                      @if (details.scholarship > 0) {
+                        <div class="tw-flex tw-justify-between tw-items-center">
+                          <span class="tw-text-gray-600">Scholarship Applied:</span>
+                          <span class="tw-font-medium tw-text-purple-600">-{{ details.scholarship | currency }}</span>
+                        </div>
+                      }
                       @if (details.taxApplicable && details.taxPercentage > 0) {
                         <div class="tw-flex tw-justify-between tw-items-center">
                           <span class="tw-text-gray-600">Tax ({{ details.taxPercentage }}%):</span>
@@ -8730,7 +9388,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
       }
     </div>
   `, styles: [":host{display:block}\n"] }]
-        }] });
+        }], ctorParameters: () => [], propDecorators: { isOpen: [{
+                type: Input
+            }], studentId: [{
+                type: Input
+            }], feeId: [{
+                type: Input
+            }], feeData: [{
+                type: Input
+            }], assignmentDate: [{
+                type: Input
+            }], discount: [{
+                type: Input
+            }], scholarship: [{
+                type: Input
+            }], closed: [{ type: i0.Output, args: ["closed"] }] } });
 
 /*
  * Public API Surface of cloud-ide-fees