cloud-ide-fees 0.0.22 → 0.0.26

package/fesm2022/cloud-ide-fees.mjs

@@ -2,17 +2,16 @@ import * as i0 from '@angular/core';
 import { Component, inject, Injectable, DestroyRef, viewChild, signal, computed, input, ChangeDetectorRef, ViewChild, output } 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 } from 'cloud-ide-lms-model';
+import { generateStringFromObject, cidePath, hostManagerRoutesUrl, feesRoutesUrl, MFeeStructure, generateObjectFromString, AcaClassPrgBranchListPayload, academicsRoutesUrl, MPrgTrmSection, FeeStructureSaveUpdatePayload, MFeePayment, MFeePaymentInsertUpdatePayload, MFeeReceiptTemplateInsertUpdatePayload, MFeeReceiptTemplate, MFeeReceiptTemplateGetByIdPayload, coreRoutesUrl } from 'cloud-ide-lms-model';
 import * as i1 from '@angular/common';
 import { CommonModule, 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, CurrencyPipe } from 'cloud-ide-element';
-import { AppStateHelperService, CideLytSharedWrapperComponent, AppStateService } from 'cloud-ide-layout';
-import { ENTITY_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, CLASS_PROGRAM_MASTER_SERVICE_TOKEN, PROGRAM_TERM_SECTION_SERVICE_TOKEN, ProgramSectionSelectorWrapperComponent } from 'cloud-ide-shared';
-import { CideCoreGeneralMasterService } from 'cloud-ide-core';
+import { ConfirmationService, NotificationService, CideIconComponent, CideEleButtonComponent, CideEleDataGridComponent, CideEleDropdownComponent, CideInputComponent, CideTextareaComponent, CideEleTabComponent, CideSelectComponent, CideFormFieldErrorComponent, CurrencyPipe } 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 { forkJoin, startWith } from 'rxjs';
 import { DomSanitizer } from '@angular/platform-browser';
 
@@ -251,6 +250,7 @@ class FeeStructureListComponent {
     appState = inject(AppStateHelperService);
     confirmationService = inject(ConfirmationService);
     notificationService = inject(NotificationService);
+    rightsService = inject(RightsService);
     // Modern ViewChild signals for template renderers (Angular 20 approach)
     feeStructureDetailsRendererTemplate = viewChild.required('feeStructureDetailsRendererTemplate');
     statusRendererTemplate = viewChild.required('statusRendererTemplate');
@@ -398,7 +398,14 @@ class FeeStructureListComponent {
         compact: false,
         tableClass: 'tw-table-fixed tw-w-full tw-rounded-none'
     }), ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    // Rights computed signals
+    canCreate = computed(() => this.rightsService.hasRight('CREATE'), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    canEdit = computed(() => this.rightsService.hasRight('EDIT'), ...(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');
         this.initializeBreadcrumbData();
         this.loadFeeStructures();
@@ -541,23 +548,39 @@ class FeeStructureListComponent {
     }
     // Fee Structure actions with proper typing
     createFeeStructure() {
+        if (!this.rightsService.hasRight('CREATE')) {
+            this.notificationService.error('You do not have permission to create fee structures');
+            return;
+        }
         console.log('➕ Navigating to create fee structure');
         this.notificationService.info('Opening form to create a new fee structure.');
         this.router.navigate(['/control-panel/structure/create']);
     }
     viewFeeStructure(feeStructure) {
+        if (!this.rightsService.hasRight('VIEW')) {
+            this.notificationService.error('You do not have permission to view fee structures');
+            return;
+        }
         console.log('👁️ Viewing fee structure:', feeStructure);
         this.notificationService.info(`Opening fee structure "${feeStructure.fees_structure_name}" for viewing.`);
         const queryParams = generateStringFromObject({ fees_id: feeStructure._id });
         this.router.navigate(['/control-panel/structure/view', queryParams]);
     }
     editFeeStructure(feeStructure) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.notificationService.error('You do not have permission to edit fee structures');
+            return;
+        }
         console.log('✏️ Editing fee structure:', feeStructure);
         this.notificationService.info(`Opening fee structure "${feeStructure.fees_structure_name}" for editing.`);
         const queryParams = generateStringFromObject({ fees_id: feeStructure._id });
         this.router.navigate(['/control-panel/structure/edit', queryParams]);
     }
     deleteFeeStructure(feeStructure) {
+        if (!this.rightsService.hasRight('DELETE')) {
+            this.notificationService.error('You do not have permission to delete fee structures');
+            return;
+        }
         console.log('🗑️ Deleting fee structure:', feeStructure);
         this.confirmationService.ask({
             title: 'Delete Fee Structure',
@@ -601,32 +624,37 @@ class FeeStructureListComponent {
      * Get action dropdown items
      */
     getActionDropdownItems(feeStructure) {
-        const items = [
-            {
+        const items = [];
+        if (this.canView()) {
+            items.push({
                 id: 'view',
                 label: 'View Details',
                 icon: 'visibility',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            items.push({
                 id: 'edit',
                 label: 'Edit',
                 icon: 'edit',
                 iconColor: 'tw-text-blue-400',
                 textColor: 'tw-text-blue-600',
                 hoverBgColor: 'hover:tw-bg-blue-50'
-            },
-            {
+            });
+        }
+        if (this.canDelete()) {
+            items.push({
                 id: 'delete',
                 label: 'Delete',
                 icon: 'delete',
                 iconColor: 'tw-text-red-400',
                 textColor: 'tw-text-red-600',
                 hoverBgColor: 'hover:tw-bg-red-50'
-            }
-        ];
+            });
+        }
         return items;
     }
     /**
@@ -808,13 +836,14 @@ class FeeStructureCreateComponent {
     academicYearService = inject(ACADEMIC_YEAR_SERVICE_TOKEN);
     classProgramMasterService = inject(CLASS_PROGRAM_MASTER_SERVICE_TOKEN);
     programTermSectionService = inject(PROGRAM_TERM_SECTION_SERVICE_TOKEN);
-    generalMasterService = inject(CideCoreGeneralMasterService);
+    generalMasterService = inject(GENERAL_MASTER_SERVICE_TOKEN);
     http = inject(HttpClient);
     router = inject(Router);
     route = inject(ActivatedRoute);
     notificationService = inject(NotificationService);
     confirmationService = inject(ConfirmationService);
     appStateService = inject(AppStateService);
+    componentContextService = inject(ComponentContextService);
     // Form and state management
     feeStructureForm;
     activeTab = signal('basic', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
@@ -1319,7 +1348,10 @@ class FeeStructureCreateComponent {
         const itemForm = feeItemsArray.at(itemIndex);
         return itemForm.get('installments');
     }
+    rightsService = inject(RightsService);
     ngOnInit() {
+        // Initialize rights for fee structure management
+        this.rightsService.initializeRights('fee_structure');
         this.initializeComponent();
     }
     ngOnDestroy() {
@@ -2080,6 +2112,11 @@ 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`);
+            return;
+        }
         if (this.submitting()) {
             return;
         }
@@ -2277,12 +2314,14 @@ class FeeStructureCreateComponent {
                 type: 'warning'
             }).then((confirmed) => {
                 if (confirmed) {
-                    this.router.navigate(['/control-panel/structure']);
+                    // Use ComponentContextService to close tab or floating container
+                    this.componentContextService.close(['/control-panel/structure']);
                 }
             });
         }
         else {
-            this.router.navigate(['/control-panel/structure']);
+            // Use ComponentContextService to close tab or floating container
+            this.componentContextService.close(['/control-panel/structure']);
         }
     }
     /**
@@ -2344,7 +2383,7 @@ 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            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n                [disabled]=\"loading()\">\n                Reset Form\n              </button>\n\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n                [disabled]=\"loading()\">\n                Cancel\n              </button>\n\n              @if (!isInstallmentPercentagesValid()) {\n                <div class=\"tw-w-full tw-mb-3 tw-p-2 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded tw-text-sm\">\n                  <div class=\"tw-flex tw-items-center tw-gap-2 tw-text-red-700\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">error</cide-ele-icon>\n                    <span class=\"tw-font-medium\">Validation Error:</span>\n                  </div>\n                  <p class=\"tw-text-red-600 tw-mt-1 tw-ml-6\">\n                    All installment percentages must total exactly 100% before saving. Please adjust the percentages to continue.\n                  </p>\n                </div>\n              }\n              \n              <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n                [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" \n                [loading]=\"submitting()\" \n                leftIcon=\"save\">\n                {{ isEditMode() ? 'Update Fee Structure' : 'Create Fee Structure' }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeStructureCreateComponent, decorators: [{
             type: Component,
@@ -2358,8 +2397,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideIconComponent,
                         CideSelectComponent,
                         CideLytSharedWrapperComponent,
-                        ProgramSectionSelectorWrapperComponent
-                    ], template: "<!-- Fee Structure Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  \n  <!-- Back Button in Breadcrumb Area (View Mode Only) -->\n  @if (isViewMode()) {\n    <div breadcrumb-actions>\n      <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"arrow_back\">\n        Back to List\n      </button>\n    </div>\n  }\n  \n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"feeStructureForm\" \n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-2 tw-py-0\">\n        <cide-ele-tab [tabs]=\"feeStructureTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\n          (tabChange)=\"onTabChange($event)\">\n        </cide-ele-tab>\n      </div>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-4 tw-py-4\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          @switch (activeTab()) {\n\n            @case ('basic') {\n              <!-- Basic Information -->\n              <div class=\"tw-space-y-4\">\n                <!-- First Row: Fee Code (small), Fee Name, Academic Year - Always on one row -->\n                <div class=\"tw-grid\" style=\"grid-template-columns: 170px 1fr 1fr; gap: 1rem;\">\n                  <cide-ele-input label=\"Fee Structure Code\" formControlName=\"fees_structure_code\"\n                    placeholder=\"Auto-generated by API\" size=\"sm\" [disabled]=\"isEditMode()\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Fee Structure Name\" formControlName=\"fees_structure_name\"\n                    placeholder=\"e.g., Grade 10 Fee Structure 2024-25\" size=\"sm\">\n                  </cide-ele-input>\n\n                  <cide-ele-select \n                    label=\"Academic Year\" \n                    formControlName=\"fees_academic_year_id_acayr\"\n                    [options]=\"getAcademicYearOptions()\"\n                    [loading]=\"academicYearLoading()\"\n                    [disabled]=\"true\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div>\n                  <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n                    placeholder=\"Enter detailed description of the fee structure...\"\n                    rows=\"2\" size=\"sm\">\n                  </cide-ele-textarea>\n                </div>\n\n                <!-- Academic Dropdowns - Using Program Section Selector Component -->\n                \n                <cide-shared-program-section-selector-wrapper\n                  [formGroup]=\"feeStructureForm\"\n                  [classProgramControlName]=\"'fees_class_program_id_acacpm'\"\n                  [branchControlName]=\"'fees_class_program_branch_id_acabrn'\"\n                  [termControlName]=\"'fees_class_program_term_id_acapt'\"\n                  [sectionControlName]=\"'fees_program_term_section_id_acapts'\"\n                  [academicYearId]=\"feeStructureForm.get('fees_academic_year_id_acayr')?.value\"\n                  [entityId]=\"feeStructureForm.get('fees_entity_id_syen')?.value\"\n                  [disabled]=\"isViewMode()\"\n                  [showLabels]=\"true\"\n                  [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\">\n                </cide-shared-program-section-selector-wrapper>\n\n                <!-- Reservation Category Dropdown -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mt-4\">\n                  <cide-ele-select \n                    label=\"Reservation Category\" \n                    formControlName=\"fees_student_category_id_sygms\"\n                    [options]=\"studentCategories()\"\n                    [loading]=\"studentCategoriesLoading()\"\n                    placeholder=\"Select reservation category\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                  <cide-ele-input formControlName=\"fees_is_active\" type=\"checkbox\" size=\"sm\">\n                  </cide-ele-input>\n                  <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\n                    <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this fee structure</span>\n                  </div>\n                </div>\n              </div>\n            }\n\n            @case ('items') {\n              <!-- Fee Items Section -->\n              <div class=\"tw-space-y-3\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                  <div>\n                    <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-m-0\">Fee Items</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Configure individual fee items for this structure</p>\n                  </div>\n                  <div class=\"tw-flex tw-items-center tw-gap-3\">\n                    <div class=\"tw-text-right\">\n                      <div class=\"tw-text-xs tw-text-gray-500\">Total Amount</div>\n                      <div class=\"tw-text-base tw-font-bold tw-text-green-600\">{{ formatCurrency(totalAmount()) }}</div>\n                    </div>\n                    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" leftIcon=\"add\"\n                      (click)=\"addFeeItem()\">\n                      Add Fee Item\n                    </button>\n                  </div>\n                </div>\n\n                <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-pr-2\">\n                  @for (item of feeItemsArray.controls; track $index; let itemIndex = $index) {\n                    <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm hover:tw-shadow-md tw-transition-shadow tw-p-3\"\n                      [formGroupName]=\"itemIndex\">\n                      \n                      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <div class=\"tw-flex tw-items-center tw-gap-2\">\n                          <div class=\"tw-bg-blue-100 tw-p-1.5 tw-rounded\">\n                            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">receipt</cide-ele-icon>\n                          </div>\n                          <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">Item #{{ itemIndex + 1 }}</h6>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                          @if (itemIndex > 0) {\n                            <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n                              (click)=\"moveItemUp(itemIndex)\" title=\"Move Up\">\n                              <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_upward</cide-ele-icon>\n                            </button>\n                          }\n                          @if (itemIndex < feeItemsArray.length - 1) {\n                            <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n                              (click)=\"moveItemDown(itemIndex)\" title=\"Move Down\">\n                              <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_downward</cide-ele-icon>\n                            </button>\n                          }\n                          <button cideEleButton type=\"button\" variant=\"danger\" size=\"xs\" leftIcon=\"delete\"\n                            (click)=\"removeFeeItem(itemIndex)\"\n                            [disabled]=\"feeItemsArray.length === 1\">\n                            Remove\n                          </button>\n                        </div>\n                      </div>\n\n                      <!-- Category, Code, Name in one row -->\n                      <div class=\"tw-grid\" style=\"grid-template-columns: 1fr 170px 1fr; gap: 1rem;\">\n                        <cide-ele-select \n                          label=\"Category\" \n                          formControlName=\"feesi_category_id_sygms\"\n                          [options]=\"feeCategoriesOptions()\"\n                          [loading]=\"feeCategoriesLoading()\"\n                          size=\"sm\"\n                          placeholder=\"Select Fee Category\">\n                        </cide-ele-select>\n\n                        <cide-ele-input \n                          label=\"Item Code\" \n                          formControlName=\"feesi_item_code\"\n                          size=\"sm\"\n                          placeholder=\"Auto-filled from category\">\n                        </cide-ele-input>\n\n                        <cide-ele-input \n                          label=\"Item Name\" \n                          formControlName=\"feesi_item_name\"\n                          size=\"sm\"\n                          placeholder=\"Auto-filled from category\">\n                        </cide-ele-input>\n                      </div>\n\n                      <div class=\"tw-mt-2\">\n                        <cide-ele-textarea \n                          label=\"Description\" \n                          formControlName=\"feesi_description\"\n                          rows=\"1\" \n                          size=\"sm\">\n                        </cide-ele-textarea>\n                      </div>\n\n                      <!-- Amount Section -->\n                      <div class=\"tw-mt-2\">\n                        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n                          <cide-ele-input \n                            [label]=\"item.get('feesi_is_amount_editable')?.value ? 'Base Amount (Default)' : 'Amount'\" \n                            formControlName=\"feesi_amount\"\n                            type=\"number\"\n                            size=\"sm\"\n                            [title]=\"item.get('feesi_is_amount_editable')?.value ? 'Default amount used when applying fee. Can be edited per student if editable.' : 'Fixed fee amount'\">\n                          </cide-ele-input>\n                        </div>\n\n                        <!-- Amount Editable Option -->\n                        <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                          <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2\">\n                            <cide-ele-input formControlName=\"feesi_is_amount_editable\" type=\"checkbox\" size=\"sm\">\n                            </cide-ele-input>\n                            <div class=\"tw-flex-1\">\n                              <span class=\"tw-text-xs tw-font-semibold tw-text-blue-900\">Allow Amount to be Edited</span>\n                              <p class=\"tw-text-xs tw-text-blue-700 tw-mt-0.5\">\n                                Enable this for fees that vary per student (e.g., Transport fee based on distance). \n                                When applying fees, you'll be asked to enter the amount within the specified range.\n                              </p>\n                            </div>\n                          </div>\n\n                          <!-- Min/Max Amount Fields (shown when editable is checked) -->\n                          @if (item.get('feesi_is_amount_editable')?.value) {\n                            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                              <cide-ele-input \n                                label=\"Minimum Amount\" \n                                formControlName=\"feesi_min_amount\"\n                                type=\"number\"\n                                size=\"sm\"\n                                placeholder=\"No minimum\"\n                                title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n                              </cide-ele-input>\n\n                              <cide-ele-input \n                                label=\"Maximum Amount\" \n                                formControlName=\"feesi_max_amount\"\n                                type=\"number\"\n                                size=\"sm\"\n                                placeholder=\"No maximum\"\n                                title=\"Maximum amount allowed when editing (leave empty for no maximum)\">\n                              </cide-ele-input>\n                            </div>\n                          }\n                        </div>\n                      </div>\n\n                      <!-- Additional Options -->\n                      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2 tw-mt-2\">\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_mandatory\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Mandatory</span>\n                        </div>\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_refundable\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Refundable</span>\n                        </div>\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_installment_allowed\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Installment Allowed</span>\n                        </div>\n                      </div>\n\n                      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                        @if (item.get('feesi_is_installment_allowed')?.value) {\n                          <cide-ele-input \n                            label=\"Installment Count\" \n                            formControlName=\"feesi_installment_count\"\n                            type=\"number\"\n                            size=\"sm\">\n                          </cide-ele-input>\n                        }\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_tax_applicable\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Tax Applicable</span>\n                        </div>\n                      </div>\n\n                      @if (item.get('feesi_tax_applicable')?.value) {\n                        <div class=\"tw-mt-2\">\n                          <cide-ele-input \n                            label=\"Tax Percentage\" \n                            formControlName=\"feesi_tax_percentage\"\n                            type=\"number\"\n                            size=\"sm\">\n                          </cide-ele-input>\n                        </div>\n                      }\n\n                      <!-- Installment Details Table -->\n                      <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                          <div class=\"tw-flex tw-items-center tw-gap-2\">\n                            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">schedule</cide-ele-icon>\n                            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">\n                              @if (item.get('feesi_is_installment_allowed')?.value) {\n                                Installment Details ({{ item.get('feesi_installment_count')?.value || 1 }} Installments)\n                              } @else {\n                                Payment Details (Single Payment)\n                              }\n                            </h6>\n                          </div>\n                        </div>\n\n                        <div formArrayName=\"installments\" class=\"tw-space-y-3\">\n                          @for (installment of getInstallmentsArray(itemIndex).controls; track $index; let installmentIndex = $index) {\n                            <div class=\"tw-bg-white tw-rounded tw-border tw-border-gray-300 tw-p-3\"\n                              [formGroupName]=\"installmentIndex\">\n                              \n                              <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                                  <div class=\"tw-bg-blue-100 tw-p-1 tw-rounded\">\n                                    <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">payments</cide-ele-icon>\n                                  </div>\n                                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">\n                                    @if (item.get('feesi_is_installment_allowed')?.value) {\n                                      Installment #{{ installment.get('installment_number')?.value }}\n                                    } @else {\n                                      Payment Details\n                                    }\n                                  </h6>\n                                </div>\n                                <div class=\"tw-text-sm tw-font-medium tw-text-green-600\">\n                                  Amount: {{ formatCurrency(installment.get('installment_amount')?.value || 0) }}\n                                </div>\n                              </div>\n\n                              <!-- Installment Amount Distribution -->\n                              @if (item.get('feesi_is_installment_allowed')?.value) {\n                                <div class=\"tw-p-2 tw-bg-yellow-50 tw-rounded tw-border tw-border-yellow-200 tw-mb-2\">\n                                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2\">\n                                    <cide-ele-select \n                                      label=\"Distribution Type\" \n                                      formControlName=\"distribution_type\"\n                                      [options]=\"distributionTypeOptions\"\n                                      size=\"sm\">\n                                    </cide-ele-select>\n\n                                    @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n                                      <cide-ele-input \n                                        label=\"Percentage (%)\" \n                                        formControlName=\"percentage\"\n                                        type=\"number\"\n                                        size=\"sm\"\n                                        title=\"Percentage of total amount for this installment\">\n                                      </cide-ele-input>\n                                      <div class=\"tw-flex tw-flex-col tw-items-end tw-justify-end tw-gap-1\">\n                                        @if (installmentIndex > 0) {\n                                          <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\n                                            Previous: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) }}%\n                                          </div>\n                                        }\n                                        <div class=\"tw-text-xs tw-text-gray-600\">\n                                          Calculated: {{ formatCurrency((item.get('feesi_amount')?.value || 0) * (installment.get('percentage')?.value || 0) / 100) }}\n                                        </div>\n                                        @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex > 0) {\n                                          <div class=\"tw-text-xs tw-font-semibold\" [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\" [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n                                            Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0) }}%\n                                          </div>\n                                        }\n                                      </div>\n                                    }\n\n                                    @if (installment.get('distribution_type')?.value === 'FIXED_AMOUNT') {\n                                      <cide-ele-input \n                                        label=\"Fixed Amount\" \n                                        formControlName=\"fixed_amount\"\n                                        type=\"number\"\n                                        size=\"sm\"\n                                        title=\"Fixed amount for this installment\">\n                                      </cide-ele-input>\n                                    }\n                                  </div>\n                                </div>\n                              }\n\n                              <!-- Due Date Fields -->\n                              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mb-2\">\n                                <cide-ele-input \n                                  label=\"Due Date Offset (Days from Assignment)\" \n                                  formControlName=\"due_date_offset_days\"\n                                  type=\"number\"\n                                  size=\"sm\"\n                                  title=\"Days from assignment date\">\n                                </cide-ele-input>\n\n                                <cide-ele-input \n                                  label=\"Due Date (Fixed Date - Alternative)\" \n                                  formControlName=\"due_date\"\n                                  type=\"date\"\n                                  size=\"sm\"\n                                  title=\"Use fixed date instead of offset\">\n                                </cide-ele-input>\n                              </div>\n\n                              <!-- Collection Window -->\n                              <div class=\"tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                                <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-2\">\n                                  <cide-ele-icon class=\"tw-text-blue-600 tw-w-3 tw-h-3\">schedule</cide-ele-icon>\n                                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-m-0\">Collection Window</h6>\n                                </div>\n                                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n                                  <cide-ele-input \n                                    label=\"Start Offset (Days from Assignment)\" \n                                    formControlName=\"collection_start_offset_days\"\n                                    type=\"number\"\n                                    size=\"sm\"\n                                    title=\"Days from assignment date when collection can start\">\n                                  </cide-ele-input>\n\n                                  <cide-ele-input \n                                    label=\"End Offset (Days from Assignment)\" \n                                    formControlName=\"collection_end_offset_days\"\n                                    type=\"number\"\n                                    size=\"sm\"\n                                    title=\"Days from assignment date when collection window ends\">\n                                  </cide-ele-input>\n                                </div>\n                                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                                  <cide-ele-input \n                                    label=\"Start Date (Fixed Date - Alternative)\" \n                                    formControlName=\"collection_start_date\"\n                                    type=\"date\"\n                                    size=\"sm\"\n                                    title=\"Use fixed date instead of offset\">\n                                  </cide-ele-input>\n\n                                  <cide-ele-input \n                                    label=\"End Date (Fixed Date - Alternative)\" \n                                    formControlName=\"collection_end_date\"\n                                    type=\"date\"\n                                    size=\"sm\"\n                                    title=\"Use fixed date instead of offset\">\n                                  </cide-ele-input>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n\n                @if (feeItemsArray.length === 0) {\n                  <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                    <div class=\"tw-bg-white tw-p-3 tw-rounded-full tw-w-12 tw-h-12 tw-mx-auto tw-mb-3 tw-flex tw-items-center tw-justify-center\">\n                      <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400\">receipt</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-1\">No Fee Items Yet</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500\">Click \"Add Fee Item\" to start adding fee items to this structure.</p>\n                  </div>\n                }\n              </div>\n            }\n          }\n          \n          <!-- Form Validation Errors -->\n          @if (!isViewMode()) {\n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n                [disabled]=\"loading()\">\n                Reset Form\n              </button>\n\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n                [disabled]=\"loading()\">\n                Cancel\n              </button>\n\n              @if (!isInstallmentPercentagesValid()) {\n                <div class=\"tw-w-full tw-mb-3 tw-p-2 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded tw-text-sm\">\n                  <div class=\"tw-flex tw-items-center tw-gap-2 tw-text-red-700\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">error</cide-ele-icon>\n                    <span class=\"tw-font-medium\">Validation Error:</span>\n                  </div>\n                  <p class=\"tw-text-red-600 tw-mt-1 tw-ml-6\">\n                    All installment percentages must total exactly 100% before saving. Please adjust the percentages to continue.\n                  </p>\n                </div>\n              }\n              \n              <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n                [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" \n                [loading]=\"submitting()\" \n                leftIcon=\"save\">\n                {{ isEditMode() ? 'Update Fee Structure' : 'Create Fee Structure' }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n  </div>\n</cide-lyt-shared-wrapper>\n\n" }]
+                        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" }]
         }], ctorParameters: () => [] });
 
 var feeStructureCreate_component = /*#__PURE__*/Object.freeze({
@@ -2462,6 +2502,7 @@ class FeeAssignmentListComponent {
     academicYearService = inject(ACADEMIC_YEAR_SERVICE_TOKEN);
     classProgramService = inject(CLASS_PROGRAM_MASTER_SERVICE_TOKEN);
     feeAssignmentService = inject(CideFeeFeeAssignmentService);
+    rightsService = inject(RightsService);
     studentDetailsRendererTemplate = viewChild.required('studentDetailsRendererTemplate');
     amountRendererTemplate = viewChild.required('amountRendererTemplate');
     statusRendererTemplate = viewChild.required('statusRendererTemplate');
@@ -2602,7 +2643,14 @@ class FeeAssignmentListComponent {
         compact: false,
         tableClass: 'tw-table-fixed tw-w-full tw-rounded-none'
     }), ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    // Rights computed signals
+    canCreate = computed(() => this.rightsService.hasRight('CREATE'), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    canEdit = computed(() => this.rightsService.hasRight('EDIT'), ...(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 assignment management
+        this.rightsService.initializeRights('fee_assignment');
         console.log('💰 Fee Assignment List Component initialized');
         this.initializeBreadcrumbData();
         this.loadDropdownOptions();
@@ -2765,22 +2813,42 @@ class FeeAssignmentListComponent {
         this.loadFeeAssignments();
     }
     navigateToAssign() {
+        if (!this.rightsService.hasRight('CREATE')) {
+            this.notificationService.error('You do not have permission to create fee assignments');
+            return;
+        }
         this.router.navigate(['/control-panel/assignment/create']);
     }
     bulkAssign() {
+        if (!this.rightsService.hasRight('BULK_ASSIGN')) {
+            this.notificationService.error('You do not have permission to perform bulk assignments');
+            return;
+        }
         this.notificationService.info('Bulk assignment feature will open in a new window.');
     }
     viewDetails(assignment) {
+        if (!this.rightsService.hasRight('VIEW')) {
+            this.notificationService.error('You do not have permission to view fee assignments');
+            return;
+        }
         console.log('View details:', assignment);
         const queryParams = generateStringFromObject({ feeas_id: assignment._id });
         this.router.navigate(['/control-panel/assignment/view', queryParams]);
     }
     modifyAssignment(assignment) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.notificationService.error('You do not have permission to modify fee assignments');
+            return;
+        }
         console.log('Modify assignment:', assignment);
         const queryParams = generateStringFromObject({ feeas_id: assignment._id });
         this.router.navigate(['/control-panel/assignment/edit', queryParams]);
     }
     waiveOff(assignment) {
+        if (!this.rightsService.hasRight('EDIT')) {
+            this.notificationService.error('You do not have permission to waive fees');
+            return;
+        }
         this.confirmationService.ask({
             title: 'Waive Off Fee',
             message: `Are you sure you want to waive off the fee for ${assignment.student_name}? This action cannot be undone.`,
@@ -2814,32 +2882,35 @@ class FeeAssignmentListComponent {
         };
     }
     getActionDropdownItems(assignment) {
-        const items = [
-            {
+        const items = [];
+        if (this.canView()) {
+            items.push({
                 id: 'view',
                 label: 'View Details',
                 icon: 'visibility',
                 iconColor: 'tw-text-gray-400',
                 textColor: 'tw-text-gray-700',
                 hoverBgColor: 'hover:tw-bg-gray-100'
-            },
-            {
+            });
+        }
+        if (this.canEdit()) {
+            items.push({
                 id: 'modify',
                 label: 'Modify',
                 icon: 'edit',
                 iconColor: 'tw-text-blue-400',
                 textColor: 'tw-text-blue-600',
                 hoverBgColor: 'hover:tw-bg-blue-50'
-            },
-            {
+            });
+            items.push({
                 id: 'waive',
                 label: 'Waive Off',
                 icon: 'cancel',
                 iconColor: 'tw-text-red-400',
                 textColor: 'tw-text-red-600',
                 hoverBgColor: 'hover:tw-bg-red-50'
-            }
-        ];
+            });
+        }
         return items;
     }
     onDropdownItemClick(item, assignment) {
@@ -2895,7 +2966,7 @@ class FeeAssignmentListComponent {
         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", "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 ɵ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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentListComponent, decorators: [{
             type: Component,
@@ -2927,6 +2998,7 @@ class FeeAssignmentCreateComponent {
     academicYearService = inject(ACADEMIC_YEAR_SERVICE_TOKEN);
     feeStructureService = inject(CideFeeFeeStructureService);
     feeAssignmentService = inject(CideFeeFeeAssignmentService);
+    componentContextService = inject(ComponentContextService);
     assignmentForm;
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
@@ -3048,7 +3120,10 @@ class FeeAssignmentCreateComponent {
             this.onStudentSearch(value);
         });
     }
+    rightsService = inject(RightsService);
     ngOnInit() {
+        // Initialize rights for fee assignment management
+        this.rightsService.initializeRights('fee_assignment');
         this.initializeComponent();
     }
     ngOnDestroy() {
@@ -3418,6 +3493,11 @@ class FeeAssignmentCreateComponent {
         }, 0);
     }, ...(ngDevMode ? [{ debugName: "totalFinalAmount" }] : []));
     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 assignments`);
+            return;
+        }
         if (this.assignmentForm.invalid || this.submitting()) {
             this.assignmentForm.markAllAsTouched();
             this.notificationService.warning('Please fill in all required fields correctly.');
@@ -3512,28 +3592,35 @@ class FeeAssignmentCreateComponent {
         }
     }
     resetForm() {
-        if (this.assignmentForm.dirty) {
-            this.confirmationService.ask({
-                title: 'Reset Form?',
-                message: 'Are you sure you want to reset the form? All unsaved changes will be lost.',
-                confirmText: 'Reset',
-                cancelText: 'Cancel',
-                type: 'warning'
-            }).then((confirmed) => {
-                if (confirmed) {
-                    this.assignmentForm.reset({
-                        fee_source: 'STRUCTURE',
-                        feeas_fee_type: 'ONE_TIME',
-                        feeas_original_amount: 0,
-                        feeas_discount_amount: 0,
-                        feeas_scholarship_amount: 0,
-                        feeas_installment_count: 1
-                    });
-                    this.assignmentId.set('');
-                    this.isEditMode.set(false);
-                    this.notificationService.info('Form has been reset.');
-                }
-            });
+        if (this.isEditMode() && this.assignmentId()) {
+            // Reload data in edit mode
+            this.loadAssignmentData(this.assignmentId());
+        }
+        else {
+            // Reset to defaults in create mode
+            if (this.assignmentForm.dirty) {
+                this.confirmationService.ask({
+                    title: 'Reset Form?',
+                    message: 'Are you sure you want to reset the form? All unsaved changes will be lost.',
+                    confirmText: 'Reset',
+                    cancelText: 'Cancel',
+                    type: 'warning'
+                }).then((confirmed) => {
+                    if (confirmed) {
+                        this.assignmentForm.reset({
+                            fee_source: 'STRUCTURE',
+                            feeas_fee_type: 'ONE_TIME',
+                            feeas_original_amount: 0,
+                            feeas_discount_amount: 0,
+                            feeas_scholarship_amount: 0,
+                            feeas_installment_count: 1
+                        });
+                        this.assignmentId.set('');
+                        this.isEditMode.set(false);
+                        this.notificationService.info('Form has been reset.');
+                    }
+                });
+            }
         }
     }
     onCancel() {
@@ -3546,12 +3633,12 @@ class FeeAssignmentCreateComponent {
                 type: 'warning'
             }).then((confirmed) => {
                 if (confirmed) {
-                    this.router.navigate(['/control-panel/assignment']);
+                    this.componentContextService.close(['/fees/assignment']);
                 }
             });
         }
         else {
-            this.router.navigate(['/control-panel/assignment']);
+            this.componentContextService.close(['/fees/assignment']);
         }
     }
     getAcademicYearOptions() {
@@ -3604,7 +3691,7 @@ 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            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n                [disabled]=\"loading()\">\n                Reset Form\n              </button>\n\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n                [disabled]=\"loading()\">\n                Cancel\n              </button>\n\n              <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n                [disabled]=\"submitting() || assignmentForm.invalid || loading()\" \n                [loading]=\"submitting()\" \n                leftIcon=\"save\">\n                {{ isEditMode() ? 'Update Assignment' : 'Assign Fee' }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
+    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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentCreateComponent, decorators: [{
             type: Component,
@@ -3617,8 +3704,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideSelectComponent,
                         CideIconComponent,
                         CideLytSharedWrapperComponent,
-                        ProgramSectionSelectorWrapperComponent
-                    ], template: "<!-- Fee Assignment Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"assignmentForm\" \n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Form Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          <div class=\"tw-space-y-6\">\n\n            <!-- Student Information -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Student Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <div>\n                  <cide-ele-input \n                    label=\"Student *\" \n                    formControlName=\"student_search\"\n                    placeholder=\"Search student by name or ID...\"\n                    size=\"sm\"\n                    leadingIcon=\"search\">\n                  </cide-ele-input>\n                </div>\n\n                <cide-ele-select \n                  label=\"Academic Year *\" \n                  formControlName=\"feeas_academic_year_id_acayr\"\n                  [options]=\"getAcademicYearOptions()\"\n                  [loading]=\"academicYearLoading()\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-select>\n              </div>\n              \n              <!-- Hidden entity field (populated from app state) -->\n              <input type=\"hidden\" formControlName=\"feeas_entity_id_syen\">\n            </div>\n\n            <!-- Academic Information (for fee structure loading) -->\n            @if (showFeeStructureField()) {\n              <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-pb-2 tw-border-b-2 tw-border-indigo-200 dark:tw-border-indigo-800 tw-mb-4\">\n                  <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-indigo-600 dark:tw-text-indigo-400\">school</cide-ele-icon>\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">Academic Information</h6>\n                </div>\n                \n                <cide-shared-program-section-selector-wrapper\n                  [formGroup]=\"assignmentForm\"\n                  classProgramControlName=\"class_program_id\"\n                  branchControlName=\"branch_id\"\n                  termControlName=\"term_id\"\n                  sectionControlName=\"section_id\"\n                  [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n                  [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n                  [disabled]=\"isViewMode()\"\n                  (valuesChange)=\"onProgramSectionValuesChange($event)\">\n                </cide-shared-program-section-selector-wrapper>\n              </div>\n            }\n\n            <!-- Fee Information -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Fee Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <cide-ele-select \n                  label=\"Fee Source *\" \n                  formControlName=\"fee_source\"\n                  [options]=\"feeSourceOptions\"\n                  size=\"sm\"\n                  leadingIcon=\"source\">\n                </cide-ele-select>\n              </div>\n\n              <!-- Custom Fee Fields -->\n              @if (showCustomFeeFields()) {\n                <div class=\"tw-mt-4 tw-space-y-4\">\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                    <cide-ele-select \n                      label=\"Fee Category *\" \n                      formControlName=\"feeas_fee_category_sygms\"\n                      [options]=\"feeCategoryOptions\"\n                      size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input \n                      label=\"Fee Name *\" \n                      formControlName=\"feeas_fee_name\"\n                      placeholder=\"Enter fee name\"\n                      size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                    <cide-ele-select \n                      label=\"Fee Type *\" \n                      formControlName=\"feeas_fee_type\"\n                      [options]=\"feeTypeOptions\"\n                      size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input \n                      label=\"Amount *\" \n                      formControlName=\"feeas_original_amount\"\n                      type=\"number\"\n                      placeholder=\"0.00\"\n                      size=\"sm\"\n                      leadingIcon=\"currency_rupee\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              }\n            </div>\n\n            <!-- Payment Details -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Payment Details</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <cide-ele-input \n                  label=\"Due Date *\" \n                  formControlName=\"feeas_due_date\"\n                  type=\"date\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Installments\" \n                  formControlName=\"feeas_installment_count\"\n                  type=\"number\"\n                  placeholder=\"1\"\n                  min=\"1\"\n                  max=\"12\"\n                  size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n\n            <!-- Fee Insights (for fee structure) -->\n            @if (showFeeStructureField() && assignmentForm.get('term_id')?.value) {\n              <div class=\"tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-flex tw-items-center tw-gap-2\">\n                    <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-blue-600 dark:tw-text-blue-400\">account_balance</cide-ele-icon>\n                    Fee Insights\n                  </h6>\n                  @if (feesLoading()) {\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading fees...</span>\n                  }\n                </div>\n\n                @if (feesLoading()) {\n                  <div class=\"tw-text-center tw-py-4\">\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading applicable fees...</span>\n                  </div>\n                } @else if (applicableFees().length > 0) {\n                  <div class=\"tw-overflow-x-auto\">\n                    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n                      <thead class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n                        <tr>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Fee Name</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Category</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Original Amount</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Discount</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Scholarship</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Final Amount</th>\n                        </tr>\n                      </thead>\n                      <tbody class=\"tw-bg-white dark:tw-bg-gray-800 tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n                        @for (fee of applicableFees(); track getFeeId(fee)) {\n                          <tr>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100\">{{ getFeeName(fee) }}</td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400\">{{ getFeeCategory(fee) }}</td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">{{ formatCurrency(getFeeAmount(fee)) }}</td>\n                            <td class=\"tw-px-4 tw-py-2\">\n                              <cide-ele-input\n                                type=\"number\"\n                                [formControl]=\"getDiscountControl(getFeeId(fee))\"\n                                placeholder=\"0.00\"\n                                size=\"sm\"\n                                class=\"tw-w-24\"\n                                [disabled]=\"isViewMode()\">\n                              </cide-ele-input>\n                            </td>\n                            <td class=\"tw-px-4 tw-py-2\">\n                              <cide-ele-input\n                                type=\"number\"\n                                [formControl]=\"getScholarshipControl(getFeeId(fee))\"\n                                placeholder=\"0.00\"\n                                size=\"sm\"\n                                class=\"tw-w-24\"\n                                [disabled]=\"isViewMode()\">\n                              </cide-ele-input>\n                            </td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n                              {{ formatCurrency(calculateFinalAmount(fee)) }}\n                            </td>\n                          </tr>\n                        }\n                      </tbody>\n                      <tfoot class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n                        <tr>\n                          <td colspan=\"2\" class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">Total:</td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n                            {{ formatCurrency(totalOriginalAmount()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-text-right\">\n                            {{ formatCurrency(totalDiscount()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-purple-600 dark:tw-text-purple-400 tw-text-right\">\n                            {{ formatCurrency(totalScholarship()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 dark:tw-text-green-400 tw-text-right\">\n                            {{ formatCurrency(totalFinalAmount()) }}\n                          </td>\n                        </tr>\n                      </tfoot>\n                    </table>\n                  </div>\n                } @else {\n                  <div class=\"tw-text-center tw-py-4 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">\n                    No fee structure found for the selected program/term. Please select a program and term to view applicable fees.\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Discounts & Scholarships (for custom fees) -->\n            @if (showCustomFeeFields()) {\n              <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Discounts & Scholarships</h6>\n                \n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                  <cide-ele-input \n                    label=\"Discount Amount\" \n                    formControlName=\"feeas_discount_amount\"\n                    type=\"number\"\n                    placeholder=\"0.00\"\n                    min=\"0\"\n                    size=\"sm\"\n                    leadingIcon=\"percent\">\n                  </cide-ele-input>\n\n                  <cide-ele-input \n                    label=\"Scholarship Amount\" \n                    formControlName=\"feeas_scholarship_amount\"\n                    type=\"number\"\n                    placeholder=\"0.00\"\n                    min=\"0\"\n                    size=\"sm\"\n                    leadingIcon=\"school\">\n                  </cide-ele-input>\n                </div>\n              </div>\n\n              <!-- Amount Summary (for custom fees) -->\n              <div class=\"tw-bg-gradient-to-r tw-from-blue-50 dark:tw-from-blue-900/20 tw-to-indigo-50 dark:tw-to-indigo-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-blue-900 dark:tw-text-blue-100 tw-mb-3\">Amount Summary</h6>\n                \n                <div class=\"tw-space-y-2\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Original Amount:</span>\n                    <span class=\"tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Discount:</span>\n                    <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_discount_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Scholarship:</span>\n                    <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_scholarship_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-t-2 tw-border-blue-300 dark:tw-border-blue-700 tw-mt-2\">\n                    <span class=\"tw-text-base tw-font-bold tw-text-blue-900 dark:tw-text-blue-100\">Total Amount:</span>\n                    <span class=\"tw-text-xl tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ formatCurrency(totalAmount()) }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n\n            <!-- Remarks -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <cide-ele-textarea \n                label=\"Remarks\" \n                formControlName=\"feeas_remarks\"\n                placeholder=\"Enter any additional remarks...\"\n                rows=\"2\" \n                size=\"sm\">\n              </cide-ele-textarea>\n            </div>\n\n          </div>\n\n          <!-- Form Validation Errors -->\n          @if (!isViewMode()) {\n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n                [disabled]=\"loading()\">\n                Reset Form\n              </button>\n\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n                [disabled]=\"loading()\">\n                Cancel\n              </button>\n\n              <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n                [disabled]=\"submitting() || assignmentForm.invalid || loading()\" \n                [loading]=\"submitting()\" \n                leftIcon=\"save\">\n                {{ isEditMode() ? 'Update Assignment' : 'Assign Fee' }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n  </div>\n</cide-lyt-shared-wrapper>\n\n" }]
+                        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" }]
         }], ctorParameters: () => [] });
 
 var feeAssignmentCreate_component = /*#__PURE__*/Object.freeze({
@@ -3706,6 +3794,7 @@ class FeePaymentListComponent {
     appState = inject(AppStateHelperService);
     confirmationService = inject(ConfirmationService);
     notificationService = inject(NotificationService);
+    rightsService = inject(RightsService);
     paymentDetailsRendererTemplate = viewChild.required('paymentDetailsRendererTemplate');
     amountRendererTemplate = viewChild.required('amountRendererTemplate');
     statusRendererTemplate = viewChild.required('statusRendererTemplate');
@@ -3833,7 +3922,14 @@ class FeePaymentListComponent {
         compact: false,
         tableClass: 'tw-table-fixed tw-w-full tw-rounded-none'
     }), ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    // Rights computed signals
+    canCreate = computed(() => this.rightsService.hasRight('CREATE'), ...(ngDevMode ? [{ debugName: "canCreate" }] : []));
+    canEdit = computed(() => this.rightsService.hasRight('EDIT'), ...(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 payment management
+        this.rightsService.initializeRights('fee_payment');
         console.log('💰 Fee Payment List Component initialized');
         this.loadFeePayments();
     }
@@ -3949,9 +4045,17 @@ class FeePaymentListComponent {
         this.loadFeePayments();
     }
     processPayment() {
+        if (!this.rightsService.hasRight('CREATE')) {
+            this.notificationService.error('You do not have permission to process payments');
+            return;
+        }
         this.router.navigate(['/control-panel/payment/process']);
     }
     viewPayment(payment) {
+        if (!this.rightsService.hasRight('VIEW')) {
+            this.notificationService.error('You do not have permission to view payments');
+            return;
+        }
         const queryParams = generateStringFromObject({ feepay_id: payment._id });
         this.router.navigate(['/control-panel/payment/view', queryParams]);
     }
@@ -4088,6 +4192,7 @@ class FeePaymentProcessComponent {
     feeAssignmentService = inject(CideFeeFeeAssignmentService);
     notificationService = inject(NotificationService);
     confirmationService = inject(ConfirmationService);
+    rightsService = inject(RightsService);
     paymentForm = this.fb.group({
         student_id: ['', [Validators.required]],
         student_search: [''],
@@ -4170,6 +4275,8 @@ class FeePaymentProcessComponent {
         return this.paymentForm.get('fee_items');
     }
     ngOnInit() {
+        // Initialize rights for fee payment management
+        this.rightsService.initializeRights('fee_payment');
         this.setupPaymentMethodListener();
     }
     setupPaymentMethodListener() {
@@ -4349,6 +4456,10 @@ class FeePaymentProcessComponent {
         }
     }
     onSubmit() {
+        if (!this.rightsService.hasRight('CREATE')) {
+            this.notificationService.error('You do not have permission to process payments');
+            return;
+        }
         if (this.paymentForm.invalid || this.submitting()) {
             this.paymentForm.markAllAsTouched();
             this.notificationService.warning('Please fill in all required fields correctly.');
@@ -4441,7 +4552,7 @@ class FeePaymentProcessComponent {
         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 -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"paymentForm\" \r\n    [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <!-- Header Section -->\r\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n          \r\n          <!-- Title -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Record Payment</h5>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n            <!-- Back button or other actions can be added here if needed -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\r\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n          <div class=\"tw-space-y-4\">\r\n\r\n            <!-- Student Information -->\r\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Student Information</h6>\r\n              \r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n                <div>\r\n                  <cide-ele-input \r\n                    label=\"Search Student *\" \r\n                    formControlName=\"student_search\"\r\n                    placeholder=\"Enter student name or ID...\"\r\n                    size=\"sm\"\r\n                    leadingIcon=\"search\"\r\n                    (ngModelChange)=\"onStudentSearch($event)\">\r\n                  </cide-ele-input>\r\n                  \r\n                  @if (selectedStudent()) {\r\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded\">\r\n                      <div class=\"tw-text-sm tw-font-medium tw-text-green-900\">{{ selectedStudent()?.name }}</div>\r\n                      <div class=\"tw-text-xs tw-text-green-700\">ID: {{ selectedStudent()?.student_id }}</div>\r\n                      @if (selectedStudent()?.class) {\r\n                        <div class=\"tw-text-xs tw-text-green-600\">{{ selectedStudent()?.class }} / {{ selectedStudent()?.section }}</div>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n\r\n                <cide-ele-input \r\n                  label=\"Payment Date *\" \r\n                  formControlName=\"feepay_payment_date\"\r\n                  type=\"date\"\r\n                  size=\"sm\"\r\n                  leadingIcon=\"calendar_today\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Fee Selection -->\r\n            @if (selectedStudent() && outstandingFees().length > 0) {\r\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">Select Fees to Pay</h6>\r\n                  <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n                    <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                      <cide-ele-input \r\n                        formControlName=\"pay_full_outstanding\" \r\n                        type=\"checkbox\" \r\n                        size=\"sm\"\r\n                        (change)=\"togglePayFullOutstanding()\">\r\n                      </cide-ele-input>\r\n                      <span class=\"tw-text-sm tw-text-gray-700\">Pay full outstanding</span>\r\n                    </div>\r\n                    <button cideEleButton type=\"button\" variant=\"success\" size=\"xs\" (click)=\"selectAllFees()\">\r\n                      Select All\r\n                    </button>\r\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"clearAllFees()\">\r\n                      Clear\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-max-h-80 tw-overflow-y-auto tw-border tw-border-gray-200 tw-rounded-lg tw-p-3\">\r\n                  @for (item of feeItemsArray.controls; track $index) {\r\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-p-2 tw-bg-gray-50 tw-rounded tw-border tw-border-gray-200\"\r\n                      [formGroupName]=\"$index\">\r\n                      \r\n                      <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1\">\r\n                        <cide-ele-input \r\n                          formControlName=\"is_selected\" \r\n                          type=\"checkbox\" \r\n                          size=\"sm\"\r\n                          (change)=\"toggleFeeItem($index)\">\r\n                        </cide-ele-input>\r\n                        \r\n                        <div class=\"tw-flex-1\">\r\n                          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\r\n                            {{ item.get('fee_head')?.value }}\r\n                          </div>\r\n                          <div class=\"tw-text-xs tw-text-gray-500\">\r\n                            Outstanding: {{ formatCurrency(item.get('outstanding_amount')?.value || 0) }}\r\n                            @if (item.get('late_fee')?.value > 0) {\r\n                              <span class=\"tw-text-red-600\"> | Late Fee: {{ formatCurrency(item.get('late_fee')?.value) }}</span>\r\n                            }\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                        <cide-ele-input \r\n                          formControlName=\"amount_paid\"\r\n                          type=\"number\"\r\n                          placeholder=\"0.00\"\r\n                          size=\"sm\"\r\n                          [disabled]=\"!item.get('is_selected')?.value\"\r\n                          (ngModelChange)=\"onAmountChange($index, $event)\"\r\n                          class=\"tw-w-28\">\r\n                        </cide-ele-input>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n\r\n            <!-- Payment Details -->\r\n            @if (selectedStudent()) {\r\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Payment Details</h6>\r\n                \r\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n                  <cide-ele-select \r\n                    label=\"Payment Method *\" \r\n                    formControlName=\"feepay_payment_method\"\r\n                    [options]=\"paymentMethodOptions\"\r\n                    size=\"sm\"\r\n                    leadingIcon=\"payment\">\r\n                  </cide-ele-select>\r\n\r\n                  <cide-ele-select \r\n                    label=\"Payment Mode *\" \r\n                    formControlName=\"feepay_payment_mode\"\r\n                    [options]=\"[{value: 'OFFLINE', label: 'Offline'}, {value: 'ONLINE', label: 'Online'}]\"\r\n                    size=\"sm\">\r\n                  </cide-ele-select>\r\n                </div>\r\n\r\n                <!-- Cheque/DD Details -->\r\n                @if (showChequeDetails()) {\r\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\r\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-mb-3\">Cheque/DD Details</h6>\r\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                      <cide-ele-input \r\n                        label=\"Cheque/DD Number *\" \r\n                        formControlName=\"feepay_cheque_number\"\r\n                        placeholder=\"Enter cheque/DD number\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n\r\n                      <cide-ele-input \r\n                        label=\"Cheque/DD Date *\" \r\n                        formControlName=\"feepay_cheque_date\"\r\n                        type=\"date\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"Bank Name *\" \r\n                        formControlName=\"feepay_bank_name\"\r\n                        placeholder=\"Enter bank name\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n\r\n                      <cide-ele-input \r\n                        label=\"Branch Name *\" \r\n                        formControlName=\"feepay_bank_branch_name\"\r\n                        placeholder=\"Enter branch name\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"IFSC Code *\" \r\n                        formControlName=\"feepay_bank_ifsc_code\"\r\n                        placeholder=\"Enter IFSC code\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"Instrument Date *\" \r\n                        formControlName=\"feepay_instrument_date\"\r\n                        type=\"date\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Bank Transfer Details -->\r\n                @if (showBankDetails()) {\r\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-green-50 tw-rounded tw-border tw-border-green-200\">\r\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-green-900 tw-mb-3\">Bank Transfer Details</h6>\r\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                      <cide-ele-input \r\n                        label=\"Bank Name\" \r\n                        formControlName=\"feepay_bank_name\"\r\n                        placeholder=\"Enter bank name\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n\r\n                      <cide-ele-input \r\n                        label=\"Branch Name\" \r\n                        formControlName=\"feepay_bank_branch_name\"\r\n                        placeholder=\"Enter branch name\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"IFSC Code\" \r\n                        formControlName=\"feepay_bank_ifsc_code\"\r\n                        placeholder=\"Enter IFSC code\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n\r\n                      <cide-ele-input \r\n                        label=\"Account Number\" \r\n                        formControlName=\"feepay_bank_account_number\"\r\n                        placeholder=\"Enter account number\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"Transaction Reference *\" \r\n                        formControlName=\"feepay_transaction_reference\"\r\n                        placeholder=\"Enter transaction reference\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Discount Section -->\r\n                <div class=\"tw-mt-4 tw-p-3 tw-bg-purple-50 tw-rounded tw-border tw-border-purple-200\">\r\n                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-purple-900 tw-mb-3\">Discount Information</h6>\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                    <cide-ele-input \r\n                      label=\"Discount (%)\" \r\n                      formControlName=\"feepay_discount_percentage\"\r\n                      type=\"number\"\r\n                      placeholder=\"0\"\r\n                      size=\"sm\"\r\n                      [min]=\"0\"\r\n                      [max]=\"100\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-select \r\n                      label=\"Discount On\" \r\n                      formControlName=\"feepay_discount_on\"\r\n                      [options]=\"[{value: 'SUB_TOTAL', label: 'Sub Total'}, {value: 'FEE_HEAD', label: 'Fee Head'}, {value: 'TOTAL', label: 'Total'}, {value: 'INSTALLMENT', label: 'Installment'}]\"\r\n                      size=\"sm\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n                  <div class=\"tw-mt-3\">\r\n                    <cide-ele-textarea \r\n                      label=\"Discount Reason\" \r\n                      formControlName=\"feepay_discount_reason\"\r\n                      placeholder=\"Enter reason for discount...\"\r\n                      rows=\"2\"\r\n                      size=\"sm\">\r\n                    </cide-ele-textarea>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Payment Reference -->\r\n                <div class=\"tw-mt-4\">\r\n                  <cide-ele-input \r\n                    label=\"Payment Reference\" \r\n                    formControlName=\"feepay_payment_reference\"\r\n                    placeholder=\"Enter payment reference number\"\r\n                    size=\"sm\"\r\n                    leadingIcon=\"receipt\">\r\n                  </cide-ele-input>\r\n                </div>\r\n\r\n                <!-- Remarks -->\r\n                <div class=\"tw-mt-4\">\r\n                  <cide-ele-textarea \r\n                    label=\"Remarks\" \r\n                    formControlName=\"feepay_remarks\"\r\n                    placeholder=\"Enter any additional remarks...\"\r\n                    rows=\"2\" \r\n                    size=\"sm\">\r\n                  </cide-ele-textarea>\r\n                </div>\r\n              </div>\r\n            }\r\n\r\n            <!-- Payment Summary -->\r\n            @if (selectedStudent() && selectedFeeItems().length > 0) {\r\n              <div class=\"tw-bg-gradient-to-r tw-from-green-50 tw-to-emerald-50 tw-rounded-lg tw-border tw-border-green-200 tw-p-4\">\r\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-green-900 tw-mb-3\">Payment Summary</h6>\r\n                \r\n                <div class=\"tw-space-y-3\">\r\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n                    <span class=\"tw-text-gray-700\">Fee Amount:</span>\r\n                    <span class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n                  </div>\r\n                  \r\n                  @if (totalLateFee() > 0) {\r\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n                      <span class=\"tw-text-gray-700\">Late Fee Amount:</span>\r\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalLateFee()) }}</span>\r\n                    </div>\r\n                  }\r\n                  \r\n                  @if (totalPenalty() > 0) {\r\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n                      <span class=\"tw-text-gray-700\">Penalty Amount:</span>\r\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalPenalty()) }}</span>\r\n                    </div>\r\n                  }\r\n                  \r\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-3 tw-border-t-2 tw-border-green-300 tw-mt-2\">\r\n                    <span class=\"tw-text-lg tw-font-bold tw-text-green-900\">Total Payable:</span>\r\n                    <span class=\"tw-text-2xl tw-font-bold tw-text-green-700\">{{ formatCurrency(totalPayable()) }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Form Validation Errors -->\r\n          <!-- Action Buttons -->\r\n          <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\r\n              [disabled]=\"loading()\">\r\n              Cancel\r\n            </button>\r\n\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \r\n              [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\" \r\n              [loading]=\"submitting()\" \r\n              leftIcon=\"save\">\r\n              {{ submitting() ? 'Processing...' : 'Record Payment' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeePaymentProcessComponent, isStandalone: true, selector: "cide-fee-payment-process", ngImport: i0, template: "<!-- Payment Process Form -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"paymentForm\" \r\n    [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <!-- Header Section -->\r\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n          \r\n          <!-- Title -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Record Payment</h5>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n            <!-- Back button or other actions can be added here if needed -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\r\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n          <div class=\"tw-space-y-4\">\r\n\r\n            <!-- Student Information -->\r\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Student Information</h6>\r\n              \r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n                <div>\r\n                  <cide-ele-input \r\n                    label=\"Search Student *\" \r\n                    formControlName=\"student_search\"\r\n                    placeholder=\"Enter student name or ID...\"\r\n                    size=\"sm\"\r\n                    leadingIcon=\"search\"\r\n                    (ngModelChange)=\"onStudentSearch($event)\">\r\n                  </cide-ele-input>\r\n                  \r\n                  @if (selectedStudent()) {\r\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded\">\r\n                      <div class=\"tw-text-sm tw-font-medium tw-text-green-900\">{{ selectedStudent()?.name }}</div>\r\n                      <div class=\"tw-text-xs tw-text-green-700\">ID: {{ selectedStudent()?.student_id }}</div>\r\n                      @if (selectedStudent()?.class) {\r\n                        <div class=\"tw-text-xs tw-text-green-600\">{{ selectedStudent()?.class }} / {{ selectedStudent()?.section }}</div>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n\r\n                <cide-ele-input \r\n                  label=\"Payment Date *\" \r\n                  formControlName=\"feepay_payment_date\"\r\n                  type=\"date\"\r\n                  size=\"sm\"\r\n                  leadingIcon=\"calendar_today\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Fee Selection -->\r\n            @if (selectedStudent() && outstandingFees().length > 0) {\r\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">Select Fees to Pay</h6>\r\n                  <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n                    <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                      <cide-ele-input \r\n                        formControlName=\"pay_full_outstanding\" \r\n                        type=\"checkbox\" \r\n                        size=\"sm\"\r\n                        (change)=\"togglePayFullOutstanding()\">\r\n                      </cide-ele-input>\r\n                      <span class=\"tw-text-sm tw-text-gray-700\">Pay full outstanding</span>\r\n                    </div>\r\n                    <button cideEleButton type=\"button\" variant=\"success\" size=\"xs\" (click)=\"selectAllFees()\">\r\n                      Select All\r\n                    </button>\r\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"clearAllFees()\">\r\n                      Clear\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-max-h-80 tw-overflow-y-auto tw-border tw-border-gray-200 tw-rounded-lg tw-p-3\">\r\n                  @for (item of feeItemsArray.controls; track $index) {\r\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-p-2 tw-bg-gray-50 tw-rounded tw-border tw-border-gray-200\"\r\n                      [formGroupName]=\"$index\">\r\n                      \r\n                      <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1\">\r\n                        <cide-ele-input \r\n                          formControlName=\"is_selected\" \r\n                          type=\"checkbox\" \r\n                          size=\"sm\"\r\n                          (change)=\"toggleFeeItem($index)\">\r\n                        </cide-ele-input>\r\n                        \r\n                        <div class=\"tw-flex-1\">\r\n                          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\r\n                            {{ item.get('fee_head')?.value }}\r\n                          </div>\r\n                          <div class=\"tw-text-xs tw-text-gray-500\">\r\n                            Outstanding: {{ formatCurrency(item.get('outstanding_amount')?.value || 0) }}\r\n                            @if (item.get('late_fee')?.value > 0) {\r\n                              <span class=\"tw-text-red-600\"> | Late Fee: {{ formatCurrency(item.get('late_fee')?.value) }}</span>\r\n                            }\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                        <cide-ele-input \r\n                          formControlName=\"amount_paid\"\r\n                          type=\"number\"\r\n                          placeholder=\"0.00\"\r\n                          size=\"sm\"\r\n                          [disabled]=\"!item.get('is_selected')?.value\"\r\n                          (ngModelChange)=\"onAmountChange($index, $event)\"\r\n                          class=\"tw-w-28\">\r\n                        </cide-ele-input>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n\r\n            <!-- Payment Details -->\r\n            @if (selectedStudent()) {\r\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Payment Details</h6>\r\n                \r\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n                  <cide-ele-select \r\n                    label=\"Payment Method *\" \r\n                    formControlName=\"feepay_payment_method\"\r\n                    [options]=\"paymentMethodOptions\"\r\n                    size=\"sm\"\r\n                    leadingIcon=\"payment\">\r\n                  </cide-ele-select>\r\n\r\n                  <cide-ele-select \r\n                    label=\"Payment Mode *\" \r\n                    formControlName=\"feepay_payment_mode\"\r\n                    [options]=\"[{value: 'OFFLINE', label: 'Offline'}, {value: 'ONLINE', label: 'Online'}]\"\r\n                    size=\"sm\">\r\n                  </cide-ele-select>\r\n                </div>\r\n\r\n                <!-- Cheque/DD Details -->\r\n                @if (showChequeDetails()) {\r\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\r\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-mb-3\">Cheque/DD Details</h6>\r\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                      <cide-ele-input \r\n                        label=\"Cheque/DD Number *\" \r\n                        formControlName=\"feepay_cheque_number\"\r\n                        placeholder=\"Enter cheque/DD number\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n\r\n                      <cide-ele-input \r\n                        label=\"Cheque/DD Date *\" \r\n                        formControlName=\"feepay_cheque_date\"\r\n                        type=\"date\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"Bank Name *\" \r\n                        formControlName=\"feepay_bank_name\"\r\n                        placeholder=\"Enter bank name\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n\r\n                      <cide-ele-input \r\n                        label=\"Branch Name *\" \r\n                        formControlName=\"feepay_bank_branch_name\"\r\n                        placeholder=\"Enter branch name\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"IFSC Code *\" \r\n                        formControlName=\"feepay_bank_ifsc_code\"\r\n                        placeholder=\"Enter IFSC code\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"Instrument Date *\" \r\n                        formControlName=\"feepay_instrument_date\"\r\n                        type=\"date\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Bank Transfer Details -->\r\n                @if (showBankDetails()) {\r\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-green-50 tw-rounded tw-border tw-border-green-200\">\r\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-green-900 tw-mb-3\">Bank Transfer Details</h6>\r\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                      <cide-ele-input \r\n                        label=\"Bank Name\" \r\n                        formControlName=\"feepay_bank_name\"\r\n                        placeholder=\"Enter bank name\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n\r\n                      <cide-ele-input \r\n                        label=\"Branch Name\" \r\n                        formControlName=\"feepay_bank_branch_name\"\r\n                        placeholder=\"Enter branch name\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"IFSC Code\" \r\n                        formControlName=\"feepay_bank_ifsc_code\"\r\n                        placeholder=\"Enter IFSC code\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n\r\n                      <cide-ele-input \r\n                        label=\"Account Number\" \r\n                        formControlName=\"feepay_bank_account_number\"\r\n                        placeholder=\"Enter account number\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"Transaction Reference *\" \r\n                        formControlName=\"feepay_transaction_reference\"\r\n                        placeholder=\"Enter transaction reference\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Discount Section -->\r\n                <div class=\"tw-mt-4 tw-p-3 tw-bg-purple-50 tw-rounded tw-border tw-border-purple-200\">\r\n                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-purple-900 tw-mb-3\">Discount Information</h6>\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                    <cide-ele-input \r\n                      label=\"Discount (%)\" \r\n                      formControlName=\"feepay_discount_percentage\"\r\n                      type=\"number\"\r\n                      placeholder=\"0\"\r\n                      size=\"sm\"\r\n                      [min]=\"0\"\r\n                      [max]=\"100\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-select \r\n                      label=\"Discount On\" \r\n                      formControlName=\"feepay_discount_on\"\r\n                      [options]=\"[{value: 'SUB_TOTAL', label: 'Sub Total'}, {value: 'FEE_HEAD', label: 'Fee Head'}, {value: 'TOTAL', label: 'Total'}, {value: 'INSTALLMENT', label: 'Installment'}]\"\r\n                      size=\"sm\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n                  <div class=\"tw-mt-3\">\r\n                    <cide-ele-textarea \r\n                      label=\"Discount Reason\" \r\n                      formControlName=\"feepay_discount_reason\"\r\n                      placeholder=\"Enter reason for discount...\"\r\n                      rows=\"2\"\r\n                      size=\"sm\">\r\n                    </cide-ele-textarea>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Payment Reference -->\r\n                <div class=\"tw-mt-4\">\r\n                  <cide-ele-input \r\n                    label=\"Payment Reference\" \r\n                    formControlName=\"feepay_payment_reference\"\r\n                    placeholder=\"Enter payment reference number\"\r\n                    size=\"sm\"\r\n                    leadingIcon=\"receipt\">\r\n                  </cide-ele-input>\r\n                </div>\r\n\r\n                <!-- Remarks -->\r\n                <div class=\"tw-mt-4\">\r\n                  <cide-ele-textarea \r\n                    label=\"Remarks\" \r\n                    formControlName=\"feepay_remarks\"\r\n                    placeholder=\"Enter any additional remarks...\"\r\n                    rows=\"2\" \r\n                    size=\"sm\">\r\n                  </cide-ele-textarea>\r\n                </div>\r\n              </div>\r\n            }\r\n\r\n            <!-- Payment Summary -->\r\n            @if (selectedStudent() && selectedFeeItems().length > 0) {\r\n              <div class=\"tw-bg-gradient-to-r tw-from-green-50 tw-to-emerald-50 tw-rounded-lg tw-border tw-border-green-200 tw-p-4\">\r\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-green-900 tw-mb-3\">Payment Summary</h6>\r\n                \r\n                <div class=\"tw-space-y-3\">\r\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n                    <span class=\"tw-text-gray-700\">Fee Amount:</span>\r\n                    <span class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n                  </div>\r\n                  \r\n                  @if (totalLateFee() > 0) {\r\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n                      <span class=\"tw-text-gray-700\">Late Fee Amount:</span>\r\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalLateFee()) }}</span>\r\n                    </div>\r\n                  }\r\n                  \r\n                  @if (totalPenalty() > 0) {\r\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n                      <span class=\"tw-text-gray-700\">Penalty Amount:</span>\r\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalPenalty()) }}</span>\r\n                    </div>\r\n                  }\r\n                  \r\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-3 tw-border-t-2 tw-border-green-300 tw-mt-2\">\r\n                    <span class=\"tw-text-lg tw-font-bold tw-text-green-900\">Total Payable:</span>\r\n                    <span class=\"tw-text-2xl tw-font-bold tw-text-green-700\">{{ formatCurrency(totalPayable()) }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Form Validation Errors -->\r\n          <!-- Action Buttons -->\r\n          <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\r\n              [disabled]=\"loading()\">\r\n              Cancel\r\n            </button>\r\n\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \r\n              [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\" \r\n              [loading]=\"submitting()\" \r\n              leftIcon=\"save\">\r\n              {{ submitting() ? 'Processing...' : 'Record Payment' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentProcessComponent, decorators: [{
             type: Component,
@@ -4467,6 +4578,8 @@ class FeePaymentViewComponent {
     router = inject(Router);
     feePaymentService = inject(CideFeeFeePaymentService);
     notificationService = inject(NotificationService);
+    http = inject(HttpClient);
+    rightsService = inject(RightsService);
     shared_wrapper_setup_param = {
         sypg_page_code: "fee_payment",
         breadcrumb_right_template: ''
@@ -4474,7 +4587,15 @@ class FeePaymentViewComponent {
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     feePayment = signal(null, ...(ngDevMode ? [{ debugName: "feePayment" }] : []));
+    generatingReceipt = signal(false, ...(ngDevMode ? [{ debugName: "generatingReceipt" }] : []));
+    receiptHtml = signal(null, ...(ngDevMode ? [{ debugName: "receiptHtml" }] : []));
+    // Rights computed signals
+    canView = computed(() => this.rightsService.hasRight('VIEW'), ...(ngDevMode ? [{ debugName: "canView" }] : []));
+    canPrint = computed(() => this.rightsService.hasRight('PRINT'), ...(ngDevMode ? [{ debugName: "canPrint" }] : []));
+    canDownload = computed(() => this.rightsService.hasRight('DOWNLOAD'), ...(ngDevMode ? [{ debugName: "canDownload" }] : []));
     ngOnInit() {
+        // Initialize rights for fee payment management
+        this.rightsService.initializeRights('fee_payment');
         const query = this.route.snapshot.paramMap.get('query');
         if (query) {
             try {
@@ -4571,10 +4692,185 @@ class FeePaymentViewComponent {
         }).format(amount);
     }
     printReceipt() {
-        window.print();
+        const payment = this.feePayment();
+        if (!payment?._id) {
+            this.notificationService.error('Payment ID not found');
+            return;
+        }
+        // Generate receipt if not already generated
+        if (!this.receiptHtml()) {
+            this.generateReceipt(() => {
+                this.printReceiptHtml();
+            });
+        }
+        else {
+            this.printReceiptHtml();
+        }
+    }
+    printReceiptHtml() {
+        const html = this.receiptHtml();
+        if (html) {
+            const printWindow = window.open('', '_blank');
+            if (printWindow) {
+                printWindow.document.write(html);
+                printWindow.document.close();
+                printWindow.focus();
+                setTimeout(() => {
+                    printWindow.print();
+                    printWindow.close();
+                }, 250);
+            }
+        }
+        else {
+            // Fallback to browser print
+            window.print();
+        }
     }
     downloadReceipt() {
-        this.notificationService.info('Download receipt functionality will be implemented soon');
+        if (!this.rightsService.hasRight('DOWNLOAD_RECEIPT')) {
+            this.notificationService.error('You do not have permission to download receipts');
+            return;
+        }
+        const payment = this.feePayment();
+        if (!payment?._id) {
+            this.notificationService.error('Payment ID not found');
+            return;
+        }
+        // Generate receipt if not already generated
+        if (!this.receiptHtml()) {
+            this.generateReceipt(() => {
+                this.downloadReceiptPdf();
+            });
+        }
+        else {
+            this.downloadReceiptPdf();
+        }
+    }
+    downloadReceiptPdf() {
+        const payment = this.feePayment();
+        if (!payment?._id) {
+            return;
+        }
+        const paymentId = payment._id;
+        const receiptUrl = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            'fees',
+            'receipt',
+            paymentId,
+            'pdf'
+        ]);
+        // Open in new tab for download
+        window.open(receiptUrl, '_blank');
+        this.notificationService.info('Downloading receipt PDF...');
+    }
+    generateReceipt(callback) {
+        if (!this.rightsService.hasRight('VIEW')) {
+            this.notificationService.error('You do not have permission to generate receipts');
+            return;
+        }
+        const payment = this.feePayment();
+        if (!payment?._id) {
+            this.notificationService.error('Payment ID not found');
+            return;
+        }
+        this.generatingReceipt.set(true);
+        const paymentId = payment._id;
+        const generateUrl = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            'fees',
+            'receipt',
+            'generate',
+            paymentId
+        ]);
+        this.http.post(generateUrl, {}).subscribe({
+            next: (response) => {
+                this.generatingReceipt.set(false);
+                if (response?.success && response?.data) {
+                    // Store receipt HTML if available
+                    if (response.data.receiptHtml) {
+                        this.receiptHtml.set(response.data.receiptHtml);
+                    }
+                    this.notificationService.success('Receipt generated successfully');
+                    if (callback) {
+                        callback();
+                    }
+                }
+                else {
+                    this.notificationService.error(response?.message || 'Failed to generate receipt');
+                }
+            },
+            error: (err) => {
+                console.error('Error generating receipt:', err);
+                this.generatingReceipt.set(false);
+                this.notificationService.error('Failed to generate receipt');
+            }
+        });
+    }
+    viewReceipt() {
+        if (!this.rightsService.hasRight('VIEW')) {
+            this.notificationService.error('You do not have permission to view receipts');
+            return;
+        }
+        const payment = this.feePayment();
+        if (!payment?._id) {
+            this.notificationService.error('Payment ID not found');
+            return;
+        }
+        // Generate receipt if not already generated
+        if (!this.receiptHtml()) {
+            this.generateReceipt(() => {
+                this.openReceiptInNewTab();
+            });
+        }
+        else {
+            this.openReceiptInNewTab();
+        }
+    }
+    openReceiptInNewTab() {
+        const html = this.receiptHtml();
+        if (html) {
+            const newWindow = window.open('', '_blank');
+            if (newWindow) {
+                newWindow.document.write(html);
+                newWindow.document.close();
+            }
+        }
+        else {
+            // Fallback: get receipt HTML from API
+            const payment = this.feePayment();
+            if (payment?._id) {
+                const paymentId = payment._id;
+                const receiptUrl = cidePath.join([
+                    hostManagerRoutesUrl.cideSuiteHost,
+                    'fees',
+                    'receipt',
+                    paymentId,
+                    'html'
+                ]);
+                this.http.get(receiptUrl).subscribe({
+                    next: (response) => {
+                        if (response?.success && response?.data) {
+                            const receiptHtml = response.data.html || response.data.receiptHtml;
+                            if (receiptHtml) {
+                                this.receiptHtml.set(receiptHtml);
+                                const newWindow = window.open('', '_blank');
+                                if (newWindow) {
+                                    newWindow.document.write(receiptHtml);
+                                    newWindow.document.close();
+                                }
+                            }
+                            else {
+                                this.notificationService.warning('Receipt HTML not available');
+                            }
+                        }
+                    },
+                    error: (err) => {
+                        console.error('Error loading receipt HTML:', err);
+                        this.notificationService.error('Failed to load receipt');
+                    }
+                });
+            }
+        }
     }
     goBack() {
         this.router.navigate(['/control-panel/payment']);
@@ -4619,12 +4915,22 @@ class FeePaymentViewComponent {
                 </div>
               </div>
               <div class="tw-flex tw-items-center tw-gap-2 tw-flex-shrink-0">
+                @if (!receiptHtml() && !generatingReceipt()) {
+                  <button cideEleButton type="button" variant="primary" size="sm" leftIcon="receipt"
+                    (btnClick)="generateReceipt()" title="Generate Receipt" [loading]="generatingReceipt()">
+                    Generate Receipt
+                  </button>
+                }
+                <button cideEleButton type="button" variant="ghost" size="sm" leftIcon="visibility"
+                  (btnClick)="viewReceipt()" title="View Receipt" [disabled]="generatingReceipt()">
+                  View
+                </button>
                 <button cideEleButton type="button" variant="ghost" size="sm" leftIcon="print"
-                  (btnClick)="printReceipt()" title="Print Receipt">
+                  (btnClick)="printReceipt()" title="Print Receipt" [disabled]="generatingReceipt()">
                   Print
                 </button>
                 <button cideEleButton type="button" variant="ghost" size="sm" leftIcon="download"
-                  (btnClick)="downloadReceipt()" title="Download Receipt">
+                  (btnClick)="downloadReceipt()" title="Download Receipt" [disabled]="generatingReceipt()">
                   Download
                 </button>
                 <button cideEleButton type="button" variant="ghost" size="sm" leftIcon="arrow_back"
@@ -4811,12 +5117,22 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                 </div>
               </div>
               <div class="tw-flex tw-items-center tw-gap-2 tw-flex-shrink-0">
+                @if (!receiptHtml() && !generatingReceipt()) {
+                  <button cideEleButton type="button" variant="primary" size="sm" leftIcon="receipt"
+                    (btnClick)="generateReceipt()" title="Generate Receipt" [loading]="generatingReceipt()">
+                    Generate Receipt
+                  </button>
+                }
+                <button cideEleButton type="button" variant="ghost" size="sm" leftIcon="visibility"
+                  (btnClick)="viewReceipt()" title="View Receipt" [disabled]="generatingReceipt()">
+                  View
+                </button>
                 <button cideEleButton type="button" variant="ghost" size="sm" leftIcon="print"
-                  (btnClick)="printReceipt()" title="Print Receipt">
+                  (btnClick)="printReceipt()" title="Print Receipt" [disabled]="generatingReceipt()">
                   Print
                 </button>
                 <button cideEleButton type="button" variant="ghost" size="sm" leftIcon="download"
-                  (btnClick)="downloadReceipt()" title="Download Receipt">
+                  (btnClick)="downloadReceipt()" title="Download Receipt" [disabled]="generatingReceipt()">
                   Download
                 </button>
                 <button cideEleButton type="button" variant="ghost" size="sm" leftIcon="arrow_back"
@@ -6230,7 +6546,7 @@ 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", "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 ɵ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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TemplateDesignerComponent, decorators: [{
             type: Component,
@@ -6610,7 +6926,7 @@ class CollectionReportComponent {
         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", "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 ɵ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"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CollectionReportComponent, decorators: [{
             type: Component,
@@ -6633,6 +6949,11 @@ var collectionReport_component = /*#__PURE__*/Object.freeze({
 class MyFeeStatementComponent {
     router = inject(Router);
     notificationService = inject(NotificationService);
+    http = inject(HttpClient);
+    appStateHelper = inject(AppStateHelperService);
+    feeAssignmentService = inject(CideFeeFeeAssignmentService);
+    feePaymentService = inject(CideFeeFeePaymentService);
+    rightsService = inject(RightsService);
     statusRendererTemplate = viewChild.required('statusRendererTemplate');
     actionsRendererTemplate = viewChild.required('actionsRendererTemplate');
     paymentHistoryRendererTemplate = viewChild.required('paymentHistoryRendererTemplate');
@@ -6844,79 +7165,193 @@ class MyFeeStatementComponent {
         paymentHistoryRenderer: this.paymentHistoryRendererTemplate()
     }), ...(ngDevMode ? [{ debugName: "templateRenderers" }] : []));
     ngOnInit() {
+        // Initialize rights for fee statement (view-only)
+        this.rightsService.initializeRights('fee_statement');
         this.loadFeeDetails();
         this.loadPaymentHistory();
     }
     loadFeeDetails() {
         this.loading.set(true);
-        // TODO: Load from API
-        setTimeout(() => {
-            const today = new Date();
-            this.feeDetails.set([
-                {
-                    _id: '1',
-                    fee_head: 'Tuition Fee - Term 1',
-                    amount: 30000,
-                    discount: 2000,
-                    net_amount: 28000,
-                    paid: 28000,
-                    outstanding: 0,
-                    due_date: new Date(today.getFullYear(), today.getMonth() - 1, 15),
-                    status: 'PAID'
-                },
-                {
-                    _id: '2',
-                    fee_head: 'Exam Fee',
-                    amount: 5000,
-                    discount: 0,
-                    net_amount: 5000,
-                    paid: 3000,
-                    outstanding: 2000,
-                    due_date: new Date(today.getFullYear(), today.getMonth(), 5),
-                    status: 'PARTIALLY_PAID'
-                },
-                {
-                    _id: '3',
-                    fee_head: 'Lab Fee',
-                    amount: 10000,
-                    discount: 0,
-                    net_amount: 10000,
-                    paid: 0,
-                    outstanding: 10000,
-                    due_date: new Date(today.getFullYear(), today.getMonth() - 1, 20),
-                    status: 'OVERDUE'
-                }
-            ]);
+        // Get current user ID from app state
+        const currentUser = this.appStateHelper.getCurrentUser();
+        if (!currentUser?._id) {
+            this.notificationService.error('User not authenticated');
             this.loading.set(false);
-        }, 500);
+            return;
+        }
+        // Get student ID from admission form using user_id
+        const userId = currentUser._id;
+        const queryParams = new URLSearchParams({ admap_user_id_auth: userId }).toString();
+        const admissionUrl = `${cidePath}${coreRoutesUrl}/admission/${queryParams}`;
+        this.http.get(admissionUrl).subscribe({
+            next: (admissionResponse) => {
+                let studentId = null;
+                let admissionData = null;
+                if (admissionResponse?.success && admissionResponse?.data) {
+                    admissionData = Array.isArray(admissionResponse.data)
+                        ? admissionResponse.data[0]
+                        : admissionResponse.data;
+                    studentId = admissionData?.admap_student_id || null;
+                    // Update student info
+                    if (admissionData) {
+                        const studentName = `${admissionData.admap_first_name || ''} ${admissionData.admap_middle_name || ''} ${admissionData.admap_last_name || ''}`.trim();
+                        this.studentInfo.set({
+                            id: studentId || 'N/A',
+                            name: studentName || 'N/A',
+                            class: admissionData.admap_class_program_name || 'N/A',
+                            section: admissionData.admap_program_term_section_name || 'N/A',
+                            avatar: admissionData.admap_photo_id_cyfm || ''
+                        });
+                    }
+                }
+                if (!studentId) {
+                    this.notificationService.warning('Student ID not found. Please ensure your admission is confirmed.');
+                    this.loading.set(false);
+                    return;
+                }
+                // Load fee assignments for this student
+                const payload = {
+                    feeas_student_id: studentId,
+                    pageSize: 100 // Get all assignments
+                };
+                this.feeAssignmentService.getFeeAssignmentList(payload).subscribe({
+                    next: (response) => {
+                        if (response?.success && response?.data) {
+                            const today = new Date();
+                            const feeDetailsData = response.data.map((assignment) => {
+                                const originalAmount = assignment.feeas_original_amount || assignment.feeas_final_amount || 0;
+                                const discountAmount = assignment.feeas_discount_amount || 0;
+                                const netAmount = assignment.feeas_final_amount || (originalAmount - discountAmount);
+                                const paidAmount = assignment.feeas_amount_paid || assignment.feeas_paid_amount || 0;
+                                const outstandingAmount = assignment.feeas_outstanding_amount ||
+                                    assignment.feeas_amount_remaining ||
+                                    (netAmount - paidAmount);
+                                const dueDate = assignment.feeas_due_date ? new Date(assignment.feeas_due_date) : new Date();
+                                const isOverdue = dueDate < today && outstandingAmount > 0;
+                                let status = 'PENDING';
+                                if (outstandingAmount <= 0) {
+                                    status = 'PAID';
+                                }
+                                else if (paidAmount > 0) {
+                                    status = isOverdue ? 'OVERDUE' : 'PARTIALLY_PAID';
+                                }
+                                else {
+                                    status = isOverdue ? 'OVERDUE' : 'PENDING';
+                                }
+                                return {
+                                    _id: assignment._id,
+                                    fee_head: assignment.feeas_fee_name || 'Fee',
+                                    amount: originalAmount,
+                                    discount: discountAmount,
+                                    net_amount: netAmount,
+                                    paid: paidAmount,
+                                    outstanding: outstandingAmount,
+                                    due_date: dueDate,
+                                    status: status
+                                };
+                            });
+                            this.feeDetails.set(feeDetailsData);
+                        }
+                        else {
+                            this.feeDetails.set([]);
+                        }
+                    },
+                    error: (err) => {
+                        console.error('Error loading fee details:', err);
+                        this.notificationService.error('Failed to load fee details');
+                        this.feeDetails.set([]);
+                        this.loading.set(false);
+                    },
+                    complete: () => {
+                        this.loading.set(false);
+                    }
+                });
+            },
+            error: (err) => {
+                console.error('Error loading admission data:', err);
+                this.notificationService.error('Failed to load student information');
+                this.loading.set(false);
+            }
+        });
     }
     loadPaymentHistory() {
-        // TODO: Load from API
-        this.paymentHistory.set([
-            {
-                _id: '1',
-                receipt_number: 'RCP-2024-001234',
-                date: new Date('2024-11-01'),
-                amount: 28000,
-                mode: 'Cash',
-                reference: 'CASH-001'
+        // Get current user ID from app state
+        const currentUser = this.appStateHelper.getCurrentUser();
+        if (!currentUser?._id) {
+            return;
+        }
+        // Get student ID from admission form using user_id
+        const userId = currentUser._id;
+        const queryParams = new URLSearchParams({ admap_user_id_auth: userId }).toString();
+        const admissionUrl = `${cidePath}${coreRoutesUrl}/admission/${queryParams}`;
+        this.http.get(admissionUrl).subscribe({
+            next: (admissionResponse) => {
+                let studentId = null;
+                if (admissionResponse?.success && admissionResponse?.data) {
+                    const admissionData = Array.isArray(admissionResponse.data)
+                        ? admissionResponse.data[0]
+                        : admissionResponse.data;
+                    studentId = admissionData?.admap_student_id || null;
+                }
+                if (!studentId) {
+                    return;
+                }
+                // Load payment history for this student
+                const payload = {
+                    feepay_student_id: studentId,
+                    pageSize: 100 // Get all payments
+                };
+                this.feePaymentService.getFeePaymentList(payload).subscribe({
+                    next: (response) => {
+                        if (response?.success && response?.data) {
+                            const paymentHistoryData = response.data.map((payment) => ({
+                                _id: payment._id,
+                                receipt_number: payment.feepay_receipt_number || 'N/A',
+                                date: payment.feepay_payment_date ? new Date(payment.feepay_payment_date) : new Date(),
+                                amount: payment.feepay_total_amount || 0,
+                                mode: payment.feepay_payment_mode || 'N/A',
+                                reference: payment.feepay_transaction_reference ||
+                                    payment.feepay_cheque_number ||
+                                    payment.feepay_payment_reference ||
+                                    'N/A'
+                            }));
+                            this.paymentHistory.set(paymentHistoryData);
+                        }
+                        else {
+                            this.paymentHistory.set([]);
+                        }
+                    },
+                    error: (err) => {
+                        console.error('Error loading payment history:', err);
+                        this.notificationService.error('Failed to load payment history');
+                        this.paymentHistory.set([]);
+                    }
+                });
             },
-            {
-                _id: '2',
-                receipt_number: 'RCP-2024-001235',
-                date: new Date('2024-11-05'),
-                amount: 3000,
-                mode: 'Online',
-                reference: 'TXN-123456'
+            error: (err) => {
+                console.error('Error loading admission data for payment history:', err);
             }
-        ]);
+        });
     }
     makePayment() {
-        this.router.navigate(['/control-panel/payment']);
+        this.router.navigate(['/control-panel/fees/payment']);
     }
     downloadReceipt(payment) {
+        if (!payment._id) {
+            this.notificationService.error('Payment ID not found');
+            return;
+        }
+        // Get receipt PDF from API
+        const receiptUrl = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            'fees',
+            'receipt',
+            payment._id,
+            'pdf'
+        ]);
+        // Open in new tab for download
+        window.open(receiptUrl, '_blank');
         this.notificationService.info(`Downloading receipt: ${payment.receipt_number}`);
-        // TODO: Implement receipt download
     }
     isOverdue(fee) {
         return new Date(fee.due_date) < new Date() && fee.outstanding > 0;
@@ -6952,6 +7387,8 @@ class MyOnlinePaymentComponent {
     notificationService = inject(NotificationService);
     confirmationService = inject(ConfirmationService);
     feeAssignmentService = inject(CideFeeFeeAssignmentService);
+    appStateHelper = inject(AppStateHelperService);
+    http = inject(HttpClient);
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     submitting = signal(false, ...(ngDevMode ? [{ debugName: "submitting" }] : []));
     selectedFees = signal(new Set(), ...(ngDevMode ? [{ debugName: "selectedFees" }] : []));
@@ -6993,56 +7430,95 @@ class MyOnlinePaymentComponent {
     }, ...(ngDevMode ? [{ debugName: "convenienceFee" }] : []));
     totalPayable = computed(() => this.subtotal() + this.convenienceFee(), ...(ngDevMode ? [{ debugName: "totalPayable" }] : []));
     selectedPaymentMethod = computed(() => this.paymentForm.get('payment_method')?.value, ...(ngDevMode ? [{ debugName: "selectedPaymentMethod" }] : []));
+    studentId = null;
+    entityId = null;
+    academicYearId = null;
     ngOnInit() {
         this.loadOutstandingFees();
     }
     loadOutstandingFees() {
         this.loading.set(true);
-        // TODO: Get current student ID from auth service or app state
-        // For now, using placeholder - replace with actual student ID from auth context
-        const studentId = 'CURRENT_STUDENT_ID'; // This should come from auth service
-        // Get outstanding fees from fee assignments
-        const payload = {
-            feeas_student_id: studentId,
-            feeas_status: 'PENDING' // Get only pending or partially paid assignments
-        };
-        this.feeAssignmentService.getFeeAssignmentList(payload).subscribe({
-            next: (response) => {
-                if (response?.success && response?.data) {
-                    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;
-                    })
-                        .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 lateFee = assignment.feeas_late_fee_applied || 0;
-                        return {
-                            id: assignment._id || '',
-                            fee_head: assignment.feeas_fee_name || 'Fee',
-                            due_date: dueDate || new Date(),
-                            outstanding: outstanding,
-                            late_fee: lateFee,
-                            is_overdue: dueDate ? dueDate < today : false
-                        };
-                    });
-                    this.outstandingFees.set(outstandingFees);
+        // Get current user ID from app state
+        const currentUser = this.appStateHelper.getCurrentUser();
+        if (!currentUser?._id) {
+            this.notificationService.error('User not authenticated');
+            this.loading.set(false);
+            return;
+        }
+        // Get student ID from admission form using user_id
+        const userId = currentUser._id;
+        // Use list endpoint with filter for admap_user_id_auth
+        const queryParams = new URLSearchParams({ admap_user_id_auth: userId }).toString();
+        const admissionUrl = `${cidePath}${coreRoutesUrl}/admission/${queryParams}`;
+        this.http.get(admissionUrl).subscribe({
+            next: (admissionResponse) => {
+                let studentId = null;
+                if (admissionResponse?.success && admissionResponse?.data) {
+                    // Get student ID from admission form (data might be array or single object)
+                    const admissionData = Array.isArray(admissionResponse.data)
+                        ? admissionResponse.data[0]
+                        : admissionResponse.data;
+                    studentId = admissionData?.admap_student_id || null;
+                    this.studentId = studentId;
+                    this.entityId = admissionData?.admap_entity_id_syen || null;
+                    this.academicYearId = admissionData?.admap_academic_year_id_acayr || null;
                 }
-                else {
-                    this.outstandingFees.set([]);
+                if (!studentId) {
+                    this.notificationService.warning('Student ID not found. Please ensure your admission is confirmed.');
+                    this.loading.set(false);
+                    return;
                 }
+                // Get outstanding fees from fee assignments
+                const payload = {
+                    feeas_student_id: studentId,
+                    feeas_payment_status: 'PENDING' // Get only pending or partially paid assignments
+                    // Note: feeas_payment_status field name matches the schema
+                };
+                this.feeAssignmentService.getFeeAssignmentList(payload).subscribe({
+                    next: (response) => {
+                        if (response?.success && response?.data) {
+                            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;
+                            })
+                                .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 lateFee = assignment.feeas_late_fee_applied || 0;
+                                return {
+                                    id: assignment._id || '',
+                                    fee_head: assignment.feeas_fee_name || 'Fee',
+                                    due_date: dueDate || new Date(),
+                                    outstanding: outstanding,
+                                    late_fee: lateFee,
+                                    is_overdue: dueDate ? dueDate < today : false
+                                };
+                            });
+                            this.outstandingFees.set(outstandingFees);
+                        }
+                        else {
+                            this.outstandingFees.set([]);
+                        }
+                    },
+                    error: (err) => {
+                        console.error('Error loading outstanding fees:', err);
+                        this.notificationService.error('Failed to load outstanding fees');
+                        this.outstandingFees.set([]);
+                        this.loading.set(false);
+                    },
+                    complete: () => {
+                        this.loading.set(false);
+                    }
+                });
             },
             error: (err) => {
-                console.error('Error loading outstanding fees:', err);
-                this.notificationService.error('Failed to load outstanding fees');
-                this.outstandingFees.set([]);
-            },
-            complete: () => {
+                console.error('Error loading admission data:', err);
+                this.notificationService.error('Failed to load student information');
                 this.loading.set(false);
             }
         });
@@ -7107,13 +7583,157 @@ class MyOnlinePaymentComponent {
         });
     }
     submitPayment() {
+        if (!this.studentId) {
+            this.notificationService.error('Student ID not found');
+            return;
+        }
         this.submitting.set(true);
-        // TODO: Implement payment gateway integration
-        setTimeout(() => {
-            this.notificationService.success('Payment processed successfully!');
-            this.router.navigate(['/control-panel/statement']);
+        // Get selected fee assignment IDs
+        const selectedAssignmentIds = Array.from(this.selectedFees());
+        const totalAmount = this.totalPayable();
+        // Create payment order on backend
+        const orderPayload = {
+            amount: totalAmount,
+            currency: 'INR',
+            student_id: this.studentId,
+            fee_assignment_ids: selectedAssignmentIds,
+            entity_id: this.entityId,
+            academic_year_id: this.academicYearId
+        };
+        const orderUrl = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            'payments',
+            'create-order'
+        ]);
+        this.http.post(orderUrl, orderPayload).subscribe({
+            next: (orderResponse) => {
+                if (orderResponse?.success && orderResponse?.data) {
+                    const orderData = orderResponse.data;
+                    // Initialize Razorpay checkout
+                    this.initializeRazorpayCheckout({
+                        orderId: orderData.orderId,
+                        amount: orderData.amount * 100, // Convert to paise
+                        currency: orderData.currency || 'INR',
+                        name: 'Fee Payment',
+                        description: `Payment for ${selectedAssignmentIds.length} fee(s)`,
+                        prefill: {
+                            contact: this.appStateHelper.getCurrentUser()?.user_mobileno || '',
+                            email: this.appStateHelper.getCurrentUser()?.user_emailid || ''
+                        },
+                        notes: {
+                            student_id: this.studentId,
+                            fee_assignment_ids: selectedAssignmentIds.join(',')
+                        },
+                        handler: (response) => {
+                            this.handlePaymentSuccess(response, orderData.orderId, totalAmount, selectedAssignmentIds);
+                        },
+                        modal: {
+                            ondismiss: () => {
+                                this.submitting.set(false);
+                                this.notificationService.info('Payment cancelled');
+                            }
+                        }
+                    });
+                }
+                else {
+                    this.notificationService.error(orderResponse?.message || 'Failed to create payment order');
+                    this.submitting.set(false);
+                }
+            },
+            error: (err) => {
+                console.error('Error creating payment order:', err);
+                this.notificationService.error('Failed to initialize payment. Please try again.');
+                this.submitting.set(false);
+            }
+        });
+    }
+    initializeRazorpayCheckout(options) {
+        // Check if Razorpay is available
+        if (typeof Razorpay === 'undefined') {
+            // Load Razorpay script dynamically
+            const script = document.createElement('script');
+            script.src = 'https://checkout.razorpay.com/v1/checkout.js';
+            script.onload = () => {
+                this.openRazorpayCheckout(options);
+            };
+            script.onerror = () => {
+                this.notificationService.error('Failed to load payment gateway. Please refresh and try again.');
+                this.submitting.set(false);
+            };
+            document.body.appendChild(script);
+        }
+        else {
+            this.openRazorpayCheckout(options);
+        }
+    }
+    openRazorpayCheckout(options) {
+        try {
+            const razorpayOptions = {
+                key: process.env['RAZORPAY_KEY_ID'] || 'rzp_test_1DP5mmOlF5G5ag',
+                amount: options.amount,
+                currency: options.currency,
+                name: options.name,
+                description: options.description,
+                order_id: options.orderId,
+                prefill: options.prefill,
+                notes: options.notes,
+                handler: options.handler,
+                modal: options.modal,
+                theme: {
+                    color: '#2563eb'
+                }
+            };
+            const razorpay = new Razorpay(razorpayOptions);
+            razorpay.open();
+        }
+        catch (error) {
+            console.error('Error opening Razorpay checkout:', error);
+            this.notificationService.error('Failed to open payment gateway');
             this.submitting.set(false);
-        }, 2000);
+        }
+    }
+    handlePaymentSuccess(paymentResponse, orderId, amount, assignmentIds) {
+        // Verify payment on backend
+        const verifyPayload = {
+            payment_id: paymentResponse.razorpay_payment_id,
+            order_id: orderId,
+            signature: paymentResponse.razorpay_signature,
+            amount: amount,
+            student_id: this.studentId,
+            fee_assignment_ids: assignmentIds,
+            entity_id: this.entityId,
+            academic_year_id: this.academicYearId
+        };
+        const verifyUrl = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            'payments',
+            'verify'
+        ]);
+        this.http.post(verifyUrl, verifyPayload).subscribe({
+            next: (verifyResponse) => {
+                if (verifyResponse?.success && verifyResponse?.data?.verified) {
+                    this.notificationService.success('Payment processed successfully!');
+                    // Navigate to receipt or statement
+                    if (verifyResponse.data.receiptNumber) {
+                        // Navigate to receipt view
+                        this.router.navigate(['/control-panel/fees/payment/view', verifyResponse.data.paymentId]);
+                    }
+                    else {
+                        // Navigate to statement
+                        this.router.navigate(['/control-panel/fees/statement']);
+                    }
+                }
+                else {
+                    this.notificationService.error(verifyResponse?.message || 'Payment verification failed');
+                    this.submitting.set(false);
+                }
+            },
+            error: (err) => {
+                console.error('Error verifying payment:', err);
+                this.notificationService.error('Payment verification failed. Please contact support.');
+                this.submitting.set(false);
+            }
+        });
     }
     cancel() {
         this.router.navigate(['/control-panel/my-fees/statement']);
@@ -7125,7 +7745,7 @@ class MyOnlinePaymentComponent {
         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 -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n    <!-- Header Section -->\r\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n          \r\n          <!-- Title -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Online Fee Payment</h5>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" leftIcon=\"arrow_back\">\r\n              Back to Statement\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n          \r\n          <!-- Left Panel - Fee Selection -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\r\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Fees to Pay</h6>\r\n            </div>\r\n            \r\n            <!-- Quick Actions -->\r\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex tw-gap-2\">\r\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\r\n                Select All\r\n              </button>\r\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\r\n                Select Overdue\r\n              </button>\r\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\r\n                Clear\r\n              </button>\r\n            </div>\r\n\r\n            <!-- Fee Items List -->\r\n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\r\n              @if (outstandingFees().length === 0) {\r\n                <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\r\n                  <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\r\n                  <p class=\"tw-text-sm\">No outstanding fees</p>\r\n                </div>\r\n              } @else {\r\n                @for (fee of outstandingFees(); track fee.id) {\r\n                  <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\r\n                    [class.tw-border-blue-500]=\"isSelected(fee)\"\r\n                    [class.tw-bg-blue-50]=\"isSelected(fee)\"\r\n                    [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\r\n                    [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\r\n                    [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\"\r\n                    (click)=\"toggleFee(fee)\">\r\n                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\r\n                      <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\r\n                        <input \r\n                          type=\"checkbox\" \r\n                          [checked]=\"isSelected(fee)\"\r\n                          (change)=\"toggleFee(fee); $event.stopPropagation()\"\r\n                          class=\"tw-mt-1\">\r\n                        <div class=\"tw-flex-1\">\r\n                          <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\r\n                            <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\r\n                            @if (isOverdue(fee)) {\r\n                              <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800\">\r\n                                Overdue\r\n                              </span>\r\n                            }\r\n                          </div>\r\n                          <div class=\"tw-text-xs tw-text-gray-600\">\r\n                            Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\r\n                          </div>\r\n                          @if (fee.late_fee > 0) {\r\n                            <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\r\n                              Late Fee: {{ formatCurrency(fee.late_fee) }}\r\n                            </div>\r\n                          }\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"tw-text-right\">\r\n                        <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Right Panel - Payment Summary & Gateway -->\r\n          <div class=\"tw-space-y-4\">\r\n            \r\n            <!-- Payment Summary Card -->\r\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n              <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment Summary</h6>\r\n              </div>\r\n              <div class=\"tw-p-4 tw-space-y-3\">\r\n                <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n                  <span class=\"tw-text-gray-600\">Selected Items</span>\r\n                  <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\r\n                </div>\r\n                <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n                  <span class=\"tw-text-gray-600\">Fee Amount</span>\r\n                  <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n                </div>\r\n                @if (totalLateFee() > 0) {\r\n                  <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\r\n                    <span>Late Fee</span>\r\n                    <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\r\n                  </div>\r\n                }\r\n                <div class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\r\n                  <span>Subtotal</span>\r\n                  <span>{{ formatCurrency(subtotal()) }}</span>\r\n                </div>\r\n                @if (convenienceFee() > 0) {\r\n                  <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n                    <span class=\"tw-text-gray-600\">Convenience Fee (2%)</span>\r\n                    <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\r\n                  </div>\r\n                }\r\n                <div class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\r\n                  <span>Total Payable</span>\r\n                  <span>{{ formatCurrency(totalPayable()) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Payment Method Selection -->\r\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n              <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Payment Method</h6>\r\n              </div>\r\n              <div class=\"tw-p-4\">\r\n                <form [formGroup]=\"paymentForm\" class=\"tw-space-y-4\">\r\n                  \r\n                  <!-- Payment Method Cards -->\r\n                  <div class=\"tw-grid tw-grid-cols-3 tw-gap-3 tw-mb-4\">\r\n                    @for (method of paymentMethodOptions; track method.value) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-p-4 tw-rounded-lg tw-border-2 tw-text-center tw-transition-colors\"\r\n                        [class.tw-border-blue-500]=\"selectedPaymentMethod() === method.value\"\r\n                        [class.tw-bg-blue-50]=\"selectedPaymentMethod() === method.value\"\r\n                        [class.tw-border-gray-200]=\"selectedPaymentMethod() !== method.value\"\r\n                        (click)=\"selectPaymentMethod(method.value)\">\r\n                        <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2\"\r\n                          [class.tw-text-blue-600]=\"selectedPaymentMethod() === method.value\"\r\n                          [class.tw-text-gray-400]=\"selectedPaymentMethod() !== method.value\">\r\n                          @switch (method.value) {\r\n                            @case ('UPI') { account_balance_wallet }\r\n                            @case ('CARD') { credit_card }\r\n                            @case ('NET_BANKING') { account_balance }\r\n                          }\r\n                        </cide-ele-icon>\r\n                        <div class=\"tw-text-xs tw-font-medium\">{{ method.label }}</div>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n\r\n                  <!-- UPI Details -->\r\n                  @if (selectedPaymentMethod() === 'UPI') {\r\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\r\n                      <cide-ele-input\r\n                        label=\"UPI ID *\"\r\n                        formControlName=\"upi_id\"\r\n                        placeholder=\"username@upi\"\r\n                        size=\"sm\"\r\n                        [required]=\"true\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Card Details -->\r\n                  @if (selectedPaymentMethod() === 'CARD') {\r\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200 tw-space-y-3\">\r\n                      <cide-ele-input\r\n                        label=\"Card Number *\"\r\n                        formControlName=\"card_number\"\r\n                        placeholder=\"1234 5678 9012 3456\"\r\n                        size=\"sm\"\r\n                        maxLength=\"19\"\r\n                        [required]=\"true\">\r\n                      </cide-ele-input>\r\n                      <div class=\"tw-grid tw-grid-cols-2 tw-gap-3\">\r\n                        <cide-ele-input\r\n                          label=\"Expiry Date *\"\r\n                          formControlName=\"expiry\"\r\n                          placeholder=\"MM/YY\"\r\n                          size=\"sm\"\r\n                          maxLength=\"5\"\r\n                          [required]=\"true\">\r\n                        </cide-ele-input>\r\n                        <cide-ele-input\r\n                          label=\"CVV *\"\r\n                          formControlName=\"cvv\"\r\n                          type=\"password\"\r\n                          placeholder=\"***\"\r\n                          size=\"sm\"\r\n                          maxLength=\"3\"\r\n                          [required]=\"true\">\r\n                        </cide-ele-input>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Net Banking Details -->\r\n                  @if (selectedPaymentMethod() === 'NET_BANKING') {\r\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\r\n                      <cide-ele-select\r\n                        label=\"Select Bank *\"\r\n                        formControlName=\"bank\"\r\n                        [options]=\"bankOptions\"\r\n                        size=\"sm\"\r\n                        placeholder=\"Select Bank\"\r\n                        [required]=\"true\">\r\n                      </cide-ele-select>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Action Buttons -->\r\n                  <div class=\"tw-flex tw-gap-3 tw-pt-4\">\r\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" class=\"tw-flex-1\">\r\n                      Cancel\r\n                    </button>\r\n                    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"proceedToPayment()\"\r\n                      [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" class=\"tw-flex-1\" leftIcon=\"payment\">\r\n                      Pay {{ formatCurrency(totalPayable()) }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  <!-- Security Info -->\r\n                  <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-pt-2 tw-text-xs tw-text-gray-500\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\r\n                    <span>Secure payment powered by Razorpay</span>\r\n                  </div>\r\n                </form>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<!-- My Online Payment Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n    <!-- Header Section -->\r\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n          \r\n          <!-- Title -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Online Fee Payment</h5>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" leftIcon=\"arrow_back\">\r\n              Back to Statement\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n          \r\n          <!-- Left Panel - Fee Selection -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\r\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Fees to Pay</h6>\r\n            </div>\r\n            \r\n            <!-- Quick Actions -->\r\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex tw-gap-2\">\r\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\r\n                Select All\r\n              </button>\r\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\r\n                Select Overdue\r\n              </button>\r\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\r\n                Clear\r\n              </button>\r\n            </div>\r\n\r\n            <!-- Fee Items List -->\r\n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\r\n              @if (outstandingFees().length === 0) {\r\n                <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\r\n                  <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\r\n                  <p class=\"tw-text-sm\">No outstanding fees</p>\r\n                </div>\r\n              } @else {\r\n                @for (fee of outstandingFees(); track fee.id) {\r\n                  <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\r\n                    [class.tw-border-blue-500]=\"isSelected(fee)\"\r\n                    [class.tw-bg-blue-50]=\"isSelected(fee)\"\r\n                    [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\r\n                    [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\r\n                    [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\"\r\n                    (click)=\"toggleFee(fee)\">\r\n                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\r\n                      <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\r\n                        <input \r\n                          type=\"checkbox\" \r\n                          [checked]=\"isSelected(fee)\"\r\n                          (change)=\"toggleFee(fee); $event.stopPropagation()\"\r\n                          class=\"tw-mt-1\">\r\n                        <div class=\"tw-flex-1\">\r\n                          <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\r\n                            <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\r\n                            @if (isOverdue(fee)) {\r\n                              <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800\">\r\n                                Overdue\r\n                              </span>\r\n                            }\r\n                          </div>\r\n                          <div class=\"tw-text-xs tw-text-gray-600\">\r\n                            Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\r\n                          </div>\r\n                          @if (fee.late_fee > 0) {\r\n                            <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\r\n                              Late Fee: {{ formatCurrency(fee.late_fee) }}\r\n                            </div>\r\n                          }\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"tw-text-right\">\r\n                        <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Right Panel - Payment Summary & Gateway -->\r\n          <div class=\"tw-space-y-4\">\r\n            \r\n            <!-- Payment Summary Card -->\r\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n              <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment Summary</h6>\r\n              </div>\r\n              <div class=\"tw-p-4 tw-space-y-3\">\r\n                <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n                  <span class=\"tw-text-gray-600\">Selected Items</span>\r\n                  <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\r\n                </div>\r\n                <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n                  <span class=\"tw-text-gray-600\">Fee Amount</span>\r\n                  <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n                </div>\r\n                @if (totalLateFee() > 0) {\r\n                  <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\r\n                    <span>Late Fee</span>\r\n                    <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\r\n                  </div>\r\n                }\r\n                <div class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\r\n                  <span>Subtotal</span>\r\n                  <span>{{ formatCurrency(subtotal()) }}</span>\r\n                </div>\r\n                @if (convenienceFee() > 0) {\r\n                  <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n                    <span class=\"tw-text-gray-600\">Convenience Fee (2%)</span>\r\n                    <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\r\n                  </div>\r\n                }\r\n                <div class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\r\n                  <span>Total Payable</span>\r\n                  <span>{{ formatCurrency(totalPayable()) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Payment Method Selection -->\r\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n              <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Payment Method</h6>\r\n              </div>\r\n              <div class=\"tw-p-4\">\r\n                <form [formGroup]=\"paymentForm\" class=\"tw-space-y-4\">\r\n                  \r\n                  <!-- Payment Method Cards -->\r\n                  <div class=\"tw-grid tw-grid-cols-3 tw-gap-3 tw-mb-4\">\r\n                    @for (method of paymentMethodOptions; track method.value) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-p-4 tw-rounded-lg tw-border-2 tw-text-center tw-transition-colors\"\r\n                        [class.tw-border-blue-500]=\"selectedPaymentMethod() === method.value\"\r\n                        [class.tw-bg-blue-50]=\"selectedPaymentMethod() === method.value\"\r\n                        [class.tw-border-gray-200]=\"selectedPaymentMethod() !== method.value\"\r\n                        (click)=\"selectPaymentMethod(method.value)\">\r\n                        <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2\"\r\n                          [class.tw-text-blue-600]=\"selectedPaymentMethod() === method.value\"\r\n                          [class.tw-text-gray-400]=\"selectedPaymentMethod() !== method.value\">\r\n                          @switch (method.value) {\r\n                            @case ('UPI') { account_balance_wallet }\r\n                            @case ('CARD') { credit_card }\r\n                            @case ('NET_BANKING') { account_balance }\r\n                          }\r\n                        </cide-ele-icon>\r\n                        <div class=\"tw-text-xs tw-font-medium\">{{ method.label }}</div>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n\r\n                  <!-- UPI Details -->\r\n                  @if (selectedPaymentMethod() === 'UPI') {\r\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\r\n                      <cide-ele-input\r\n                        label=\"UPI ID *\"\r\n                        formControlName=\"upi_id\"\r\n                        placeholder=\"username@upi\"\r\n                        size=\"sm\"\r\n                        [required]=\"true\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Card Details -->\r\n                  @if (selectedPaymentMethod() === 'CARD') {\r\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200 tw-space-y-3\">\r\n                      <cide-ele-input\r\n                        label=\"Card Number *\"\r\n                        formControlName=\"card_number\"\r\n                        placeholder=\"1234 5678 9012 3456\"\r\n                        size=\"sm\"\r\n                        maxLength=\"19\"\r\n                        [required]=\"true\">\r\n                      </cide-ele-input>\r\n                      <div class=\"tw-grid tw-grid-cols-2 tw-gap-3\">\r\n                        <cide-ele-input\r\n                          label=\"Expiry Date *\"\r\n                          formControlName=\"expiry\"\r\n                          placeholder=\"MM/YY\"\r\n                          size=\"sm\"\r\n                          maxLength=\"5\"\r\n                          [required]=\"true\">\r\n                        </cide-ele-input>\r\n                        <cide-ele-input\r\n                          label=\"CVV *\"\r\n                          formControlName=\"cvv\"\r\n                          type=\"password\"\r\n                          placeholder=\"***\"\r\n                          size=\"sm\"\r\n                          maxLength=\"3\"\r\n                          [required]=\"true\">\r\n                        </cide-ele-input>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Net Banking Details -->\r\n                  @if (selectedPaymentMethod() === 'NET_BANKING') {\r\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\r\n                      <cide-ele-select\r\n                        label=\"Select Bank *\"\r\n                        formControlName=\"bank\"\r\n                        [options]=\"bankOptions\"\r\n                        size=\"sm\"\r\n                        placeholder=\"Select Bank\"\r\n                        [required]=\"true\">\r\n                      </cide-ele-select>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Action Buttons -->\r\n                  <div class=\"tw-flex tw-gap-3 tw-pt-4\">\r\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" class=\"tw-flex-1\">\r\n                      Cancel\r\n                    </button>\r\n                    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"proceedToPayment()\"\r\n                      [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" class=\"tw-flex-1\" leftIcon=\"payment\">\r\n                      Pay {{ formatCurrency(totalPayable()) }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  <!-- Security Info -->\r\n                  <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-pt-2 tw-text-xs tw-text-gray-500\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\r\n                    <span>Secure payment powered by Razorpay</span>\r\n                  </div>\r\n                </form>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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: [{
             type: Component,
@@ -7159,11 +7779,14 @@ class FeeDetailsViewerComponent {
     feeStructureService = inject(CideFeeFeeStructureService);
     feeAssignmentService = inject(CideFeeFeeAssignmentService);
     notificationService = inject(NotificationService);
+    rightsService = inject(RightsService);
     // State
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
     feeDetails = signal(null, ...(ngDevMode ? [{ debugName: "feeDetails" }] : []));
     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();
     }