cloud-ide-fees 0.0.29 → 0.0.30

package/fesm2022/cloud-ide-fees.mjs

@@ -13,6 +13,7 @@ import { ConfirmationService, NotificationService, CideIconComponent, CideEleBut
 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 { CideCoreUserMasterService } from 'cloud-ide-core';
 import { DomSanitizer } from '@angular/platform-browser';
 
 class CloudIdeFees {
@@ -2998,6 +2999,7 @@ class FeeAssignmentCreateComponent {
     academicYearService = inject(ACADEMIC_YEAR_SERVICE_TOKEN);
     feeStructureService = inject(CideFeeFeeStructureService);
     feeAssignmentService = inject(CideFeeFeeAssignmentService);
+    userMasterService = inject(CideCoreUserMasterService);
     componentContextService = inject(ComponentContextService);
     assignmentForm;
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -3258,15 +3260,56 @@ class FeeAssignmentCreateComponent {
     }
     onStudentSearch(query) {
         const searchQuery = String(query || '');
-        if (searchQuery.length < 3)
+        if (searchQuery.length < 3) {
+            this.assignmentForm.patchValue({ student_id: '' });
             return;
+        }
         this.loading.set(true);
-        // TODO: Implement student search API call
-        // For now, this is a placeholder - should be replaced with actual student search service
-        setTimeout(() => {
-            this.assignmentForm.patchValue({ student_id: 'STU001' });
-            this.loading.set(false);
-        }, 500);
+        // Search for students using user master service
+        const payload = {
+            query: searchQuery,
+            pageIndex: 1,
+            pageSize: 10,
+            pagination: true
+        };
+        this.userMasterService.getUserList(payload)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response?.success && response?.data) {
+                    // Filter for students only
+                    const students = response.data.filter((user) => user.user_type_mapping?.syutm_user_type === 'STUDENT');
+                    if (students.length === 0) {
+                        this.notificationService.warning('No students found matching your search.');
+                        this.assignmentForm.patchValue({ student_id: '' });
+                        this.loading.set(false);
+                        return;
+                    }
+                    // Use first matching student (or could show dropdown for multiple matches)
+                    const student = students[0];
+                    const studentId = student._id || '';
+                    if (studentId) {
+                        this.assignmentForm.patchValue({ student_id: studentId });
+                        this.notificationService.success(`Student found: ${student.user_fullname || 'Unknown'}`);
+                    }
+                    else {
+                        this.notificationService.warning('Student ID not found.');
+                        this.assignmentForm.patchValue({ student_id: '' });
+                    }
+                }
+                else {
+                    this.notificationService.warning('No students found matching your search.');
+                    this.assignmentForm.patchValue({ student_id: '' });
+                }
+                this.loading.set(false);
+            },
+            error: (err) => {
+                console.error('Error searching for students:', err);
+                this.notificationService.error('Failed to search for students. Please try again.');
+                this.assignmentForm.patchValue({ student_id: '' });
+                this.loading.set(false);
+            }
+        });
     }
     /**
      * Handler for program section selector value changes
@@ -4190,6 +4233,7 @@ class FeePaymentProcessComponent {
     router = inject(Router);
     feePaymentService = inject(CideFeeFeePaymentService);
     feeAssignmentService = inject(CideFeeFeeAssignmentService);
+    userMasterService = inject(CideCoreUserMasterService);
     notificationService = inject(NotificationService);
     confirmationService = inject(ConfirmationService);
     rightsService = inject(RightsService);
@@ -4307,29 +4351,61 @@ class FeePaymentProcessComponent {
     }
     onStudentSearch(query) {
         const searchQuery = String(query || '');
-        if (searchQuery.length < 3)
+        if (searchQuery.length < 3) {
+            this.selectedStudent.set(null);
+            this.paymentForm.patchValue({ student_id: '' });
             return;
+        }
         this.loading.set(true);
-        // TODO: Implement student search API call when student service is available
-        // For now, using a placeholder - this should be replaced with actual student search service
-        // The student search should return student details including _id, name, student_id, class, section
-        console.warn('Student search API not yet implemented. Using placeholder.');
-        // Placeholder: In production, this should call a student search service
-        // For now, we'll allow manual entry of student ID
-        setTimeout(() => {
-            // This is a placeholder - replace with actual student search API call
-            const mockStudent = {
-                _id: searchQuery, // Using query as student ID for now
-                name: `Student ${searchQuery}`,
-                student_id: searchQuery,
-                class: 'N/A',
-                section: 'N/A'
-            };
-            this.selectedStudent.set(mockStudent);
-            this.paymentForm.patchValue({ student_id: mockStudent._id });
-            this.loadOutstandingFees(mockStudent._id);
-            this.loading.set(false);
-        }, 500);
+        // Search for students using user master service
+        const payload = {
+            query: searchQuery,
+            pageIndex: 1,
+            pageSize: 10,
+            pagination: true
+        };
+        this.userMasterService.getUserList(payload)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response?.success && response?.data) {
+                    // Filter for students only
+                    const students = response.data.filter((user) => user.user_type_mapping?.syutm_user_type === 'STUDENT');
+                    if (students.length === 0) {
+                        this.notificationService.warning('No students found matching your search.');
+                        this.selectedStudent.set(null);
+                        this.paymentForm.patchValue({ student_id: '' });
+                        this.loading.set(false);
+                        return;
+                    }
+                    // Use first matching student (or could show dropdown for multiple matches)
+                    const student = students[0];
+                    const studentData = {
+                        _id: student._id || '',
+                        name: student.user_fullname || 'Unknown',
+                        student_id: student.user_type_mapping?.syutm_type_specific_id || student._id || '',
+                        class: student.class || 'N/A',
+                        section: student.section || 'N/A'
+                    };
+                    this.selectedStudent.set(studentData);
+                    this.paymentForm.patchValue({ student_id: studentData._id });
+                    this.loadOutstandingFees(studentData._id);
+                }
+                else {
+                    this.notificationService.warning('No students found matching your search.');
+                    this.selectedStudent.set(null);
+                    this.paymentForm.patchValue({ student_id: '' });
+                }
+                this.loading.set(false);
+            },
+            error: (err) => {
+                console.error('Error searching for students:', err);
+                this.notificationService.error('Failed to search for students. Please try again.');
+                this.selectedStudent.set(null);
+                this.paymentForm.patchValue({ student_id: '' });
+                this.loading.set(false);
+            }
+        });
     }
     loadOutstandingFees(studentId) {
         this.loading.set(true);
@@ -4552,7 +4628,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", "ngModel", "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 -->\n<div class=\"tw-w-full tw-h-full\">\n  <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"paymentForm\" \n    [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Header Section -->\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n          \n          <!-- Title -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Record Payment</h5>\n          </div>\n\n          <!-- Actions -->\n          <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n            <!-- Back button or other actions can be added here if needed -->\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          <div class=\"tw-space-y-4\">\n\n            <!-- Student Information -->\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Student Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <div>\n                  <cide-ele-input \n                    label=\"Search Student\" \n                    formControlName=\"student_search\"\n                    placeholder=\"Enter student name or ID...\"\n                    size=\"sm\"\n                    leadingIcon=\"search\"\n                    (ngModelChange)=\"onStudentSearch($event)\">\n                  </cide-ele-input>\n                  \n                  @if (selectedStudent()) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded\">\n                      <div class=\"tw-text-sm tw-font-medium tw-text-green-900\">{{ selectedStudent()?.name }}</div>\n                      <div class=\"tw-text-xs tw-text-green-700\">ID: {{ selectedStudent()?.student_id }}</div>\n                      @if (selectedStudent()?.class) {\n                        <div class=\"tw-text-xs tw-text-green-600\">{{ selectedStudent()?.class }} / {{ selectedStudent()?.section }}</div>\n                      }\n                    </div>\n                  }\n                </div>\n\n                <cide-ele-input \n                  label=\"Payment Date\" \n                  formControlName=\"feepay_payment_date\"\n                  type=\"date\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-input>\n              </div>\n            </div>\n\n            <!-- Fee Selection -->\n            @if (selectedStudent() && outstandingFees().length > 0) {\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">Select Fees to Pay</h6>\n                  <div class=\"tw-flex tw-items-center tw-gap-3\">\n                    <div class=\"tw-flex tw-items-center tw-gap-2\">\n                      <cide-ele-input \n                        formControlName=\"pay_full_outstanding\" \n                        type=\"checkbox\" \n                        size=\"sm\"\n                        (change)=\"togglePayFullOutstanding()\">\n                      </cide-ele-input>\n                      <span class=\"tw-text-sm tw-text-gray-700\">Pay full outstanding</span>\n                    </div>\n                    <button cideEleButton type=\"button\" variant=\"success\" size=\"xs\" (click)=\"selectAllFees()\">\n                      Select All\n                    </button>\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"clearAllFees()\">\n                      Clear\n                    </button>\n                  </div>\n                </div>\n\n                <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-max-h-80 tw-overflow-y-auto tw-border tw-border-gray-200 tw-rounded-lg tw-p-3\">\n                  @for (item of feeItemsArray.controls; track $index) {\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-p-2 tw-bg-gray-50 tw-rounded tw-border tw-border-gray-200\"\n                      [formGroupName]=\"$index\">\n                      \n                      <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1\">\n                        <cide-ele-input \n                          formControlName=\"is_selected\" \n                          type=\"checkbox\" \n                          size=\"sm\"\n                          (change)=\"toggleFeeItem($index)\">\n                        </cide-ele-input>\n                        \n                        <div class=\"tw-flex-1\">\n                          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n                            {{ item.get('fee_head')?.value }}\n                          </div>\n                          <div class=\"tw-text-xs tw-text-gray-500\">\n                            Outstanding: {{ formatCurrency(item.get('outstanding_amount')?.value || 0) }}\n                            @if (item.get('late_fee')?.value > 0) {\n                              <span class=\"tw-text-red-600\"> | Late Fee: {{ formatCurrency(item.get('late_fee')?.value) }}</span>\n                            }\n                          </div>\n                        </div>\n                      </div>\n\n                      <div class=\"tw-flex tw-items-center tw-gap-2\">\n                        <cide-ele-input \n                          formControlName=\"amount_paid\"\n                          type=\"number\"\n                          placeholder=\"0.00\"\n                          size=\"sm\"\n                          [disabled]=\"!item.get('is_selected')?.value\"\n                          (ngModelChange)=\"onAmountChange($index, $event)\"\n                          class=\"tw-w-28\">\n                        </cide-ele-input>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Payment Details -->\n            @if (selectedStudent()) {\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Payment Details</h6>\n                \n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                  <cide-ele-select \n                    label=\"Payment Method\" \n                    formControlName=\"feepay_payment_method\"\n                    [options]=\"paymentMethodOptions\"\n                    size=\"sm\"\n                    leadingIcon=\"payment\">\n                  </cide-ele-select>\n\n                  <cide-ele-select \n                    label=\"Payment Mode\" \n                    formControlName=\"feepay_payment_mode\"\n                    [options]=\"[{value: 'OFFLINE', label: 'Offline'}, {value: 'ONLINE', label: 'Online'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Cheque/DD Details -->\n                @if (showChequeDetails()) {\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-mb-3\">Cheque/DD Details</h6>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                      <cide-ele-input \n                        label=\"Cheque/DD Number\" \n                        formControlName=\"feepay_cheque_number\"\n                        placeholder=\"Enter cheque/DD number\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Cheque/DD Date\" \n                        formControlName=\"feepay_cheque_date\"\n                        type=\"date\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\n                      <cide-ele-input \n                        label=\"Bank Name\" \n                        formControlName=\"feepay_bank_name\"\n                        placeholder=\"Enter bank name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Branch Name\" \n                        formControlName=\"feepay_bank_branch_name\"\n                        placeholder=\"Enter branch name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-mt-3\">\n                      <cide-ele-input \n                        label=\"IFSC Code\" \n                        formControlName=\"feepay_bank_ifsc_code\"\n                        placeholder=\"Enter IFSC code\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-mt-3\">\n                      <cide-ele-input \n                        label=\"Instrument Date\" \n                        formControlName=\"feepay_instrument_date\"\n                        type=\"date\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                  </div>\n                }\n\n                <!-- Bank Transfer Details -->\n                @if (showBankDetails()) {\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-green-50 tw-rounded tw-border tw-border-green-200\">\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-green-900 tw-mb-3\">Bank Transfer Details</h6>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                      <cide-ele-input \n                        label=\"Bank Name\" \n                        formControlName=\"feepay_bank_name\"\n                        placeholder=\"Enter bank name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Branch Name\" \n                        formControlName=\"feepay_bank_branch_name\"\n                        placeholder=\"Enter branch name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\n                      <cide-ele-input \n                        label=\"IFSC Code\" \n                        formControlName=\"feepay_bank_ifsc_code\"\n                        placeholder=\"Enter IFSC code\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Account Number\" \n                        formControlName=\"feepay_bank_account_number\"\n                        placeholder=\"Enter account number\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-mt-3\">\n                      <cide-ele-input \n                        label=\"Transaction Reference\" \n                        formControlName=\"feepay_transaction_reference\"\n                        placeholder=\"Enter transaction reference\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                  </div>\n                }\n\n                <!-- Discount Section -->\n                <div class=\"tw-mt-4 tw-p-3 tw-bg-purple-50 tw-rounded tw-border tw-border-purple-200\">\n                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-purple-900 tw-mb-3\">Discount Information</h6>\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-input \n                      label=\"Discount (%)\" \n                      formControlName=\"feepay_discount_percentage\"\n                      type=\"number\"\n                      placeholder=\"0\"\n                      size=\"sm\"\n                      [min]=\"0\"\n                      [max]=\"100\">\n                    </cide-ele-input>\n\n                    <cide-ele-select \n                      label=\"Discount On\" \n                      formControlName=\"feepay_discount_on\"\n                      [options]=\"[{value: 'SUB_TOTAL', label: 'Sub Total'}, {value: 'FEE_HEAD', label: 'Fee Head'}, {value: 'TOTAL', label: 'Total'}, {value: 'INSTALLMENT', label: 'Installment'}]\"\n                      size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                  <div class=\"tw-mt-3\">\n                    <cide-ele-textarea \n                      label=\"Discount Reason\" \n                      formControlName=\"feepay_discount_reason\"\n                      placeholder=\"Enter reason for discount...\"\n                      rows=\"2\"\n                      size=\"sm\">\n                    </cide-ele-textarea>\n                  </div>\n                </div>\n\n                <!-- Payment Reference -->\n                <div class=\"tw-mt-4\">\n                  <cide-ele-input \n                    label=\"Payment Reference\" \n                    formControlName=\"feepay_payment_reference\"\n                    placeholder=\"Enter payment reference number\"\n                    size=\"sm\"\n                    leadingIcon=\"receipt\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Remarks -->\n                <div class=\"tw-mt-4\">\n                  <cide-ele-textarea \n                    label=\"Remarks\" \n                    formControlName=\"feepay_remarks\"\n                    placeholder=\"Enter any additional remarks...\"\n                    rows=\"2\" \n                    size=\"sm\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n            }\n\n            <!-- Payment Summary -->\n            @if (selectedStudent() && selectedFeeItems().length > 0) {\n              <div class=\"tw-bg-gradient-to-r tw-from-green-50 tw-to-emerald-50 tw-rounded-lg tw-border tw-border-green-200 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-green-900 tw-mb-3\">Payment Summary</h6>\n                \n                <div class=\"tw-space-y-3\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n                    <span class=\"tw-text-gray-700\">Fee Amount:</span>\n                    <span class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n                  </div>\n                  \n                  @if (totalLateFee() > 0) {\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n                      <span class=\"tw-text-gray-700\">Late Fee Amount:</span>\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalLateFee()) }}</span>\n                    </div>\n                  }\n                  \n                  @if (totalPenalty() > 0) {\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n                      <span class=\"tw-text-gray-700\">Penalty Amount:</span>\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalPenalty()) }}</span>\n                    </div>\n                  }\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-3 tw-border-t-2 tw-border-green-300 tw-mt-2\">\n                    <span class=\"tw-text-lg tw-font-bold tw-text-green-900\">Total Payable:</span>\n                    <span class=\"tw-text-2xl tw-font-bold tw-text-green-700\">{{ formatCurrency(totalPayable()) }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Form Validation Errors -->\n          <!-- Action Buttons -->\n          <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n              [disabled]=\"loading()\">\n              Cancel\n            </button>\n\n            <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n              [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\" \n              [loading]=\"submitting()\" \n              leftIcon=\"save\">\n              {{ submitting() ? 'Processing...' : 'Record Payment' }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentProcessComponent, decorators: [{
             type: Component,
@@ -4564,7 +4640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideEleButtonComponent,
                         CideIconComponent,
                         CideSelectComponent
-                    ], 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" }]
+                    ], template: "<!-- Payment Process Form -->\n<div class=\"tw-w-full tw-h-full\">\n  <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"paymentForm\" \n    [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Header Section -->\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n          \n          <!-- Title -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Record Payment</h5>\n          </div>\n\n          <!-- Actions -->\n          <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n            <!-- Back button or other actions can be added here if needed -->\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Form Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          <div class=\"tw-space-y-4\">\n\n            <!-- Student Information -->\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Student Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <div>\n                  <cide-ele-input \n                    label=\"Search Student\" \n                    formControlName=\"student_search\"\n                    placeholder=\"Enter student name or ID...\"\n                    size=\"sm\"\n                    leadingIcon=\"search\"\n                    (ngModelChange)=\"onStudentSearch($event)\">\n                  </cide-ele-input>\n                  \n                  @if (selectedStudent()) {\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded\">\n                      <div class=\"tw-text-sm tw-font-medium tw-text-green-900\">{{ selectedStudent()?.name }}</div>\n                      <div class=\"tw-text-xs tw-text-green-700\">ID: {{ selectedStudent()?.student_id }}</div>\n                      @if (selectedStudent()?.class) {\n                        <div class=\"tw-text-xs tw-text-green-600\">{{ selectedStudent()?.class }} / {{ selectedStudent()?.section }}</div>\n                      }\n                    </div>\n                  }\n                </div>\n\n                <cide-ele-input \n                  label=\"Payment Date\" \n                  formControlName=\"feepay_payment_date\"\n                  type=\"date\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-input>\n              </div>\n            </div>\n\n            <!-- Fee Selection -->\n            @if (selectedStudent() && outstandingFees().length > 0) {\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">Select Fees to Pay</h6>\n                  <div class=\"tw-flex tw-items-center tw-gap-3\">\n                    <div class=\"tw-flex tw-items-center tw-gap-2\">\n                      <cide-ele-input \n                        formControlName=\"pay_full_outstanding\" \n                        type=\"checkbox\" \n                        size=\"sm\"\n                        (change)=\"togglePayFullOutstanding()\">\n                      </cide-ele-input>\n                      <span class=\"tw-text-sm tw-text-gray-700\">Pay full outstanding</span>\n                    </div>\n                    <button cideEleButton type=\"button\" variant=\"success\" size=\"xs\" (click)=\"selectAllFees()\">\n                      Select All\n                    </button>\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"clearAllFees()\">\n                      Clear\n                    </button>\n                  </div>\n                </div>\n\n                <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-max-h-80 tw-overflow-y-auto tw-border tw-border-gray-200 tw-rounded-lg tw-p-3\">\n                  @for (item of feeItemsArray.controls; track $index) {\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-p-2 tw-bg-gray-50 tw-rounded tw-border tw-border-gray-200\"\n                      [formGroupName]=\"$index\">\n                      \n                      <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1\">\n                        <cide-ele-input \n                          formControlName=\"is_selected\" \n                          type=\"checkbox\" \n                          size=\"sm\"\n                          (change)=\"toggleFeeItem($index)\">\n                        </cide-ele-input>\n                        \n                        <div class=\"tw-flex-1\">\n                          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n                            {{ item.get('fee_head')?.value }}\n                          </div>\n                          <div class=\"tw-text-xs tw-text-gray-500\">\n                            Outstanding: {{ formatCurrency(item.get('outstanding_amount')?.value || 0) }}\n                            @if (item.get('late_fee')?.value > 0) {\n                              <span class=\"tw-text-red-600\"> | Late Fee: {{ formatCurrency(item.get('late_fee')?.value) }}</span>\n                            }\n                          </div>\n                        </div>\n                      </div>\n\n                      <div class=\"tw-flex tw-items-center tw-gap-2\">\n                        <cide-ele-input \n                          formControlName=\"amount_paid\"\n                          type=\"number\"\n                          placeholder=\"0.00\"\n                          size=\"sm\"\n                          [disabled]=\"!item.get('is_selected')?.value\"\n                          (ngModelChange)=\"onAmountChange($index, $event)\"\n                          class=\"tw-w-28\">\n                        </cide-ele-input>\n                      </div>\n                    </div>\n                  }\n                </div>\n              </div>\n            }\n\n            <!-- Payment Details -->\n            @if (selectedStudent()) {\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Payment Details</h6>\n                \n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                  <cide-ele-select \n                    label=\"Payment Method\" \n                    formControlName=\"feepay_payment_method\"\n                    [options]=\"paymentMethodOptions\"\n                    size=\"sm\"\n                    leadingIcon=\"payment\">\n                  </cide-ele-select>\n\n                  <cide-ele-select \n                    label=\"Payment Mode\" \n                    formControlName=\"feepay_payment_mode\"\n                    [options]=\"[{value: 'OFFLINE', label: 'Offline'}, {value: 'ONLINE', label: 'Online'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <!-- Cheque/DD Details -->\n                @if (showChequeDetails()) {\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-mb-3\">Cheque/DD Details</h6>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                      <cide-ele-input \n                        label=\"Cheque/DD Number\" \n                        formControlName=\"feepay_cheque_number\"\n                        placeholder=\"Enter cheque/DD number\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Cheque/DD Date\" \n                        formControlName=\"feepay_cheque_date\"\n                        type=\"date\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\n                      <cide-ele-input \n                        label=\"Bank Name\" \n                        formControlName=\"feepay_bank_name\"\n                        placeholder=\"Enter bank name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Branch Name\" \n                        formControlName=\"feepay_bank_branch_name\"\n                        placeholder=\"Enter branch name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-mt-3\">\n                      <cide-ele-input \n                        label=\"IFSC Code\" \n                        formControlName=\"feepay_bank_ifsc_code\"\n                        placeholder=\"Enter IFSC code\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-mt-3\">\n                      <cide-ele-input \n                        label=\"Instrument Date\" \n                        formControlName=\"feepay_instrument_date\"\n                        type=\"date\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                  </div>\n                }\n\n                <!-- Bank Transfer Details -->\n                @if (showBankDetails()) {\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-green-50 tw-rounded tw-border tw-border-green-200\">\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-green-900 tw-mb-3\">Bank Transfer Details</h6>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                      <cide-ele-input \n                        label=\"Bank Name\" \n                        formControlName=\"feepay_bank_name\"\n                        placeholder=\"Enter bank name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Branch Name\" \n                        formControlName=\"feepay_bank_branch_name\"\n                        placeholder=\"Enter branch name\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\n                      <cide-ele-input \n                        label=\"IFSC Code\" \n                        formControlName=\"feepay_bank_ifsc_code\"\n                        placeholder=\"Enter IFSC code\"\n                        size=\"sm\">\n                      </cide-ele-input>\n\n                      <cide-ele-input \n                        label=\"Account Number\" \n                        formControlName=\"feepay_bank_account_number\"\n                        placeholder=\"Enter account number\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                    <div class=\"tw-mt-3\">\n                      <cide-ele-input \n                        label=\"Transaction Reference\" \n                        formControlName=\"feepay_transaction_reference\"\n                        placeholder=\"Enter transaction reference\"\n                        size=\"sm\">\n                      </cide-ele-input>\n                    </div>\n                  </div>\n                }\n\n                <!-- Discount Section -->\n                <div class=\"tw-mt-4 tw-p-3 tw-bg-purple-50 tw-rounded tw-border tw-border-purple-200\">\n                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-purple-900 tw-mb-3\">Discount Information</h6>\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                    <cide-ele-input \n                      label=\"Discount (%)\" \n                      formControlName=\"feepay_discount_percentage\"\n                      type=\"number\"\n                      placeholder=\"0\"\n                      size=\"sm\"\n                      [min]=\"0\"\n                      [max]=\"100\">\n                    </cide-ele-input>\n\n                    <cide-ele-select \n                      label=\"Discount On\" \n                      formControlName=\"feepay_discount_on\"\n                      [options]=\"[{value: 'SUB_TOTAL', label: 'Sub Total'}, {value: 'FEE_HEAD', label: 'Fee Head'}, {value: 'TOTAL', label: 'Total'}, {value: 'INSTALLMENT', label: 'Installment'}]\"\n                      size=\"sm\">\n                    </cide-ele-select>\n                  </div>\n                  <div class=\"tw-mt-3\">\n                    <cide-ele-textarea \n                      label=\"Discount Reason\" \n                      formControlName=\"feepay_discount_reason\"\n                      placeholder=\"Enter reason for discount...\"\n                      rows=\"2\"\n                      size=\"sm\">\n                    </cide-ele-textarea>\n                  </div>\n                </div>\n\n                <!-- Payment Reference -->\n                <div class=\"tw-mt-4\">\n                  <cide-ele-input \n                    label=\"Payment Reference\" \n                    formControlName=\"feepay_payment_reference\"\n                    placeholder=\"Enter payment reference number\"\n                    size=\"sm\"\n                    leadingIcon=\"receipt\">\n                  </cide-ele-input>\n                </div>\n\n                <!-- Remarks -->\n                <div class=\"tw-mt-4\">\n                  <cide-ele-textarea \n                    label=\"Remarks\" \n                    formControlName=\"feepay_remarks\"\n                    placeholder=\"Enter any additional remarks...\"\n                    rows=\"2\" \n                    size=\"sm\">\n                  </cide-ele-textarea>\n                </div>\n              </div>\n            }\n\n            <!-- Payment Summary -->\n            @if (selectedStudent() && selectedFeeItems().length > 0) {\n              <div class=\"tw-bg-gradient-to-r tw-from-green-50 tw-to-emerald-50 tw-rounded-lg tw-border tw-border-green-200 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-green-900 tw-mb-3\">Payment Summary</h6>\n                \n                <div class=\"tw-space-y-3\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n                    <span class=\"tw-text-gray-700\">Fee Amount:</span>\n                    <span class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n                  </div>\n                  \n                  @if (totalLateFee() > 0) {\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n                      <span class=\"tw-text-gray-700\">Late Fee Amount:</span>\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalLateFee()) }}</span>\n                    </div>\n                  }\n                  \n                  @if (totalPenalty() > 0) {\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n                      <span class=\"tw-text-gray-700\">Penalty Amount:</span>\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalPenalty()) }}</span>\n                    </div>\n                  }\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-3 tw-border-t-2 tw-border-green-300 tw-mt-2\">\n                    <span class=\"tw-text-lg tw-font-bold tw-text-green-900\">Total Payable:</span>\n                    <span class=\"tw-text-2xl tw-font-bold tw-text-green-700\">{{ formatCurrency(totalPayable()) }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n          </div>\n\n          <!-- Form Validation Errors -->\n          <!-- Action Buttons -->\n          <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n              [disabled]=\"loading()\">\n              Cancel\n            </button>\n\n            <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n              [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\" \n              [loading]=\"submitting()\" \n              leftIcon=\"save\">\n              {{ submitting() ? 'Processing...' : 'Record Payment' }}\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n  </form>\n</div>\n\n" }]
         }] });
 
 var feePaymentProcess_component = /*#__PURE__*/Object.freeze({
@@ -5338,288 +5414,288 @@ class DiscountRulesComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DiscountRulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DiscountRulesComponent, isStandalone: true, selector: "cide-discount-rules", ngImport: i0, template: `
-    <div class="discount-rules-container">
-      <div class="header">
-        <h1>Discount Rules Management</h1>
-        <button class="btn btn-primary" (click)="openRuleModal()">Create New Rule</button>
-      </div>
-
-      <!-- Tabs -->
-      <div class="tabs">
-        <button class="tab" [class.active]="activeTab() === 'rules'" (click)="activeTab.set('rules')">Discount Rules</button>
-        <button class="tab" [class.active]="activeTab() === 'applied'" (click)="activeTab.set('applied')">Applied Discounts</button>
-        <button class="tab" [class.active]="activeTab() === 'scholarships'" (click)="activeTab.set('scholarships')">Scholarships</button>
-      </div>
-
-      <!-- Rules Tab -->
-      @if (activeTab() === 'rules') {
-        <div class="rules-section">
-          <div class="table-container">
-            <table>
-              <thead>
-                <tr>
-                  <th>Rule Name</th>
-                  <th>Rule Code</th>
-                  <th>Discount Type</th>
-                  <th>Discount Value</th>
-                  <th>Applies To</th>
-                  <th>Priority</th>
-                  <th>Auto Apply</th>
-                  <th>Status</th>
-                  <th>Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                @for (rule of discountRules(); track rule.id) {
-                  <tr>
-                    <td>{{ rule.name }}</td>
-                    <td>{{ rule.code }}</td>
-                    <td><span class="badge">{{ rule.discount_type }}</span></td>
-                    <td class="discount-value">{{ rule.discount_type === 'PERCENTAGE' ? rule.value + '%' : '₹' + rule.value }}</td>
-                    <td>{{ rule.applies_to }}</td>
-                    <td><span class="priority">{{ rule.priority }}</span></td>
-                    <td><span class="status-badge" [class.active]="rule.auto_apply">{{ rule.auto_apply ? 'Yes' : 'No' }}</span></td>
-                    <td><span class="status-badge" [class.active]="rule.status === 'ACTIVE'">{{ rule.status }}</span></td>
-                    <td>
-                      <button class="btn-icon" (click)="editRule(rule)">✏️</button>
-                      <button class="btn-icon" (click)="toggleRuleStatus(rule)">🔄</button>
-                      <button class="btn-icon" (click)="deleteRule(rule)">🗑️</button>
-                    </td>
-                  </tr>
-                }
-              </tbody>
-            </table>
-          </div>
-        </div>
-      }
-
-      <!-- Rule Modal -->
-      @if (showRuleModal()) {
-        <div class="modal-overlay" (click)="closeRuleModal()">
-          <div class="modal-content" (click)="$event.stopPropagation()">
-            <div class="modal-header">
-              <h2>{{ editingRule() ? 'Edit' : 'Create' }} Discount Rule</h2>
-              <button class="close-btn" (click)="closeRuleModal()">×</button>
-            </div>
-            <form [formGroup]="ruleForm" class="modal-body">
-              <div class="form-row">
-                <div class="form-group">
-                  <label>Rule Name</label>
-                  <input type="text" formControlName="rule_name" placeholder="e.g., Sibling Discount" />
-                </div>
-                <div class="form-group">
-                  <label>Rule Code</label>
-                  <input type="text" formControlName="rule_code" placeholder="e.g., SIBLING_DISC" />
-                </div>
-              </div>
-              <div class="form-group">
-                <label>Description</label>
-                <textarea formControlName="description" rows="3" placeholder="Describe the discount rule..."></textarea>
-              </div>
-              <div class="form-row">
-                <div class="form-group">
-                  <label>Discount Type</label>
-                  <select formControlName="discount_type">
-                    <option value="PERCENTAGE">Percentage</option>
-                    <option value="FIXED_AMOUNT">Fixed Amount</option>
-                  </select>
-                </div>
-                <div class="form-group">
-                  <label>Discount Value</label>
-                  <input type="number" formControlName="discount_value" placeholder="Enter value" />
-                </div>
-              </div>
-              <div class="form-group">
-                <label>Applies To Fee Categories</label>
-                <select formControlName="applies_to" multiple>
-                  <option value="ALL">All Categories</option>
-                  <option value="TUITION">Tuition</option>
-                  <option value="EXAM">Exam Fees</option>
-                  <option value="LIBRARY">Library</option>
-                  <option value="LAB">Lab</option>
-                  <option value="SPORTS">Sports</option>
-                  <option value="TRANSPORT">Transport</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <label>Criteria (JSON Format)</label>
-                <textarea formControlName="criteria_json" rows="4" placeholder='{"sibling_count": ">= 1", "staff_role": "TEACHER"}'></textarea>
-                <small>Define conditions for automatic discount application</small>
-              </div>
-              <div class="form-row">
-                <div class="form-group">
-                  <label>Priority</label>
-                  <input type="number" formControlName="priority" placeholder="1" />
-                  <small>Higher priority rules apply first</small>
-                </div>
-                <div class="form-group checkbox-group">
-                  <label><input type="checkbox" formControlName="auto_apply" /> Auto Apply</label>
-                  <label><input type="checkbox" formControlName="stackable" /> Stackable with other discounts</label>
-                </div>
-              </div>
-              <div class="form-row">
-                <div class="form-group">
-                  <label>Valid From</label>
-                  <input type="date" formControlName="valid_from" />
-                </div>
-                <div class="form-group">
-                  <label>Valid To</label>
-                  <input type="date" formControlName="valid_to" />
-                </div>
-              </div>
-            </form>
-            <div class="modal-footer">
-              <button class="btn btn-secondary" (click)="closeRuleModal()">Cancel</button>
-              <button class="btn btn-primary" (click)="saveRule()" [disabled]="ruleForm.invalid">Save Rule</button>
-            </div>
-          </div>
-        </div>
-      }
-    </div>
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DiscountRulesComponent, isStandalone: true, selector: "cide-discount-rules", ngImport: i0, template: `
+    <div class="discount-rules-container">
+      <div class="header">
+        <h1>Discount Rules Management</h1>
+        <button class="btn btn-primary" (click)="openRuleModal()">Create New Rule</button>
+      </div>
+
+      <!-- Tabs -->
+      <div class="tabs">
+        <button class="tab" [class.active]="activeTab() === 'rules'" (click)="activeTab.set('rules')">Discount Rules</button>
+        <button class="tab" [class.active]="activeTab() === 'applied'" (click)="activeTab.set('applied')">Applied Discounts</button>
+        <button class="tab" [class.active]="activeTab() === 'scholarships'" (click)="activeTab.set('scholarships')">Scholarships</button>
+      </div>
+
+      <!-- Rules Tab -->
+      @if (activeTab() === 'rules') {
+        <div class="rules-section">
+          <div class="table-container">
+            <table>
+              <thead>
+                <tr>
+                  <th>Rule Name</th>
+                  <th>Rule Code</th>
+                  <th>Discount Type</th>
+                  <th>Discount Value</th>
+                  <th>Applies To</th>
+                  <th>Priority</th>
+                  <th>Auto Apply</th>
+                  <th>Status</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (rule of discountRules(); track rule.id) {
+                  <tr>
+                    <td>{{ rule.name }}</td>
+                    <td>{{ rule.code }}</td>
+                    <td><span class="badge">{{ rule.discount_type }}</span></td>
+                    <td class="discount-value">{{ rule.discount_type === 'PERCENTAGE' ? rule.value + '%' : '₹' + rule.value }}</td>
+                    <td>{{ rule.applies_to }}</td>
+                    <td><span class="priority">{{ rule.priority }}</span></td>
+                    <td><span class="status-badge" [class.active]="rule.auto_apply">{{ rule.auto_apply ? 'Yes' : 'No' }}</span></td>
+                    <td><span class="status-badge" [class.active]="rule.status === 'ACTIVE'">{{ rule.status }}</span></td>
+                    <td>
+                      <button class="btn-icon" (click)="editRule(rule)">✏️</button>
+                      <button class="btn-icon" (click)="toggleRuleStatus(rule)">🔄</button>
+                      <button class="btn-icon" (click)="deleteRule(rule)">🗑️</button>
+                    </td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      }
+
+      <!-- Rule Modal -->
+      @if (showRuleModal()) {
+        <div class="modal-overlay" (click)="closeRuleModal()">
+          <div class="modal-content" (click)="$event.stopPropagation()">
+            <div class="modal-header">
+              <h2>{{ editingRule() ? 'Edit' : 'Create' }} Discount Rule</h2>
+              <button class="close-btn" (click)="closeRuleModal()">×</button>
+            </div>
+            <form [formGroup]="ruleForm" class="modal-body">
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Rule Name</label>
+                  <input type="text" formControlName="rule_name" placeholder="e.g., Sibling Discount" />
+                </div>
+                <div class="form-group">
+                  <label>Rule Code</label>
+                  <input type="text" formControlName="rule_code" placeholder="e.g., SIBLING_DISC" />
+                </div>
+              </div>
+              <div class="form-group">
+                <label>Description</label>
+                <textarea formControlName="description" rows="3" placeholder="Describe the discount rule..."></textarea>
+              </div>
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Discount Type</label>
+                  <select formControlName="discount_type">
+                    <option value="PERCENTAGE">Percentage</option>
+                    <option value="FIXED_AMOUNT">Fixed Amount</option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <label>Discount Value</label>
+                  <input type="number" formControlName="discount_value" placeholder="Enter value" />
+                </div>
+              </div>
+              <div class="form-group">
+                <label>Applies To Fee Categories</label>
+                <select formControlName="applies_to" multiple>
+                  <option value="ALL">All Categories</option>
+                  <option value="TUITION">Tuition</option>
+                  <option value="EXAM">Exam Fees</option>
+                  <option value="LIBRARY">Library</option>
+                  <option value="LAB">Lab</option>
+                  <option value="SPORTS">Sports</option>
+                  <option value="TRANSPORT">Transport</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label>Criteria (JSON Format)</label>
+                <textarea formControlName="criteria_json" rows="4" placeholder='{"sibling_count": ">= 1", "staff_role": "TEACHER"}'></textarea>
+                <small>Define conditions for automatic discount application</small>
+              </div>
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Priority</label>
+                  <input type="number" formControlName="priority" placeholder="1" />
+                  <small>Higher priority rules apply first</small>
+                </div>
+                <div class="form-group checkbox-group">
+                  <label><input type="checkbox" formControlName="auto_apply" /> Auto Apply</label>
+                  <label><input type="checkbox" formControlName="stackable" /> Stackable with other discounts</label>
+                </div>
+              </div>
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Valid From</label>
+                  <input type="date" formControlName="valid_from" />
+                </div>
+                <div class="form-group">
+                  <label>Valid To</label>
+                  <input type="date" formControlName="valid_to" />
+                </div>
+              </div>
+            </form>
+            <div class="modal-footer">
+              <button class="btn btn-secondary" (click)="closeRuleModal()">Cancel</button>
+              <button class="btn btn-primary" (click)="saveRule()" [disabled]="ruleForm.invalid">Save Rule</button>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
   `, isInline: true, styles: [".discount-rules-container{padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.btn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:14px}.btn-primary{background:#007bff;color:#fff}.btn-secondary{background:#6c757d;color:#fff}.tabs{display:flex;gap:10px;margin-bottom:20px;border-bottom:2px solid #e0e0e0}.tab{padding:12px 24px;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-weight:500}.tab.active{border-bottom-color:#007bff;color:#007bff}.table-container{overflow-x:auto;background:#fff;border-radius:8px;border:1px solid #e0e0e0}table{width:100%;border-collapse:collapse}thead{background:#f8f9fa}th{padding:12px;text-align:left;font-weight:600;border-bottom:2px solid #dee2e6}td{padding:12px;border-bottom:1px solid #dee2e6}.badge{padding:4px 12px;border-radius:12px;font-size:12px;background:#e3f2fd;color:#1976d2}.discount-value{font-weight:600;color:#28a745}.priority{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;background:#ffc107;color:#fff;border-radius:50%;font-weight:700}.status-badge{padding:4px 12px;border-radius:12px;font-size:12px;background:#f8d7da;color:#721c24}.status-badge.active{background:#d4edda;color:#155724}.btn-icon{background:none;border:none;cursor:pointer;font-size:18px;padding:4px}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;max-width:800px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e0e0e0}.close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:#666}.modal-body{padding:20px}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid #e0e0e0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:500;font-size:14px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px}.form-group small{color:#666;font-size:12px}.checkbox-group{display:flex;flex-direction:column;gap:8px}.checkbox-group label{display:flex;align-items:center;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DiscountRulesComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cide-discount-rules', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: `
-    <div class="discount-rules-container">
-      <div class="header">
-        <h1>Discount Rules Management</h1>
-        <button class="btn btn-primary" (click)="openRuleModal()">Create New Rule</button>
-      </div>
-
-      <!-- Tabs -->
-      <div class="tabs">
-        <button class="tab" [class.active]="activeTab() === 'rules'" (click)="activeTab.set('rules')">Discount Rules</button>
-        <button class="tab" [class.active]="activeTab() === 'applied'" (click)="activeTab.set('applied')">Applied Discounts</button>
-        <button class="tab" [class.active]="activeTab() === 'scholarships'" (click)="activeTab.set('scholarships')">Scholarships</button>
-      </div>
-
-      <!-- Rules Tab -->
-      @if (activeTab() === 'rules') {
-        <div class="rules-section">
-          <div class="table-container">
-            <table>
-              <thead>
-                <tr>
-                  <th>Rule Name</th>
-                  <th>Rule Code</th>
-                  <th>Discount Type</th>
-                  <th>Discount Value</th>
-                  <th>Applies To</th>
-                  <th>Priority</th>
-                  <th>Auto Apply</th>
-                  <th>Status</th>
-                  <th>Actions</th>
-                </tr>
-              </thead>
-              <tbody>
-                @for (rule of discountRules(); track rule.id) {
-                  <tr>
-                    <td>{{ rule.name }}</td>
-                    <td>{{ rule.code }}</td>
-                    <td><span class="badge">{{ rule.discount_type }}</span></td>
-                    <td class="discount-value">{{ rule.discount_type === 'PERCENTAGE' ? rule.value + '%' : '₹' + rule.value }}</td>
-                    <td>{{ rule.applies_to }}</td>
-                    <td><span class="priority">{{ rule.priority }}</span></td>
-                    <td><span class="status-badge" [class.active]="rule.auto_apply">{{ rule.auto_apply ? 'Yes' : 'No' }}</span></td>
-                    <td><span class="status-badge" [class.active]="rule.status === 'ACTIVE'">{{ rule.status }}</span></td>
-                    <td>
-                      <button class="btn-icon" (click)="editRule(rule)">✏️</button>
-                      <button class="btn-icon" (click)="toggleRuleStatus(rule)">🔄</button>
-                      <button class="btn-icon" (click)="deleteRule(rule)">🗑️</button>
-                    </td>
-                  </tr>
-                }
-              </tbody>
-            </table>
-          </div>
-        </div>
-      }
-
-      <!-- Rule Modal -->
-      @if (showRuleModal()) {
-        <div class="modal-overlay" (click)="closeRuleModal()">
-          <div class="modal-content" (click)="$event.stopPropagation()">
-            <div class="modal-header">
-              <h2>{{ editingRule() ? 'Edit' : 'Create' }} Discount Rule</h2>
-              <button class="close-btn" (click)="closeRuleModal()">×</button>
-            </div>
-            <form [formGroup]="ruleForm" class="modal-body">
-              <div class="form-row">
-                <div class="form-group">
-                  <label>Rule Name</label>
-                  <input type="text" formControlName="rule_name" placeholder="e.g., Sibling Discount" />
-                </div>
-                <div class="form-group">
-                  <label>Rule Code</label>
-                  <input type="text" formControlName="rule_code" placeholder="e.g., SIBLING_DISC" />
-                </div>
-              </div>
-              <div class="form-group">
-                <label>Description</label>
-                <textarea formControlName="description" rows="3" placeholder="Describe the discount rule..."></textarea>
-              </div>
-              <div class="form-row">
-                <div class="form-group">
-                  <label>Discount Type</label>
-                  <select formControlName="discount_type">
-                    <option value="PERCENTAGE">Percentage</option>
-                    <option value="FIXED_AMOUNT">Fixed Amount</option>
-                  </select>
-                </div>
-                <div class="form-group">
-                  <label>Discount Value</label>
-                  <input type="number" formControlName="discount_value" placeholder="Enter value" />
-                </div>
-              </div>
-              <div class="form-group">
-                <label>Applies To Fee Categories</label>
-                <select formControlName="applies_to" multiple>
-                  <option value="ALL">All Categories</option>
-                  <option value="TUITION">Tuition</option>
-                  <option value="EXAM">Exam Fees</option>
-                  <option value="LIBRARY">Library</option>
-                  <option value="LAB">Lab</option>
-                  <option value="SPORTS">Sports</option>
-                  <option value="TRANSPORT">Transport</option>
-                </select>
-              </div>
-              <div class="form-group">
-                <label>Criteria (JSON Format)</label>
-                <textarea formControlName="criteria_json" rows="4" placeholder='{"sibling_count": ">= 1", "staff_role": "TEACHER"}'></textarea>
-                <small>Define conditions for automatic discount application</small>
-              </div>
-              <div class="form-row">
-                <div class="form-group">
-                  <label>Priority</label>
-                  <input type="number" formControlName="priority" placeholder="1" />
-                  <small>Higher priority rules apply first</small>
-                </div>
-                <div class="form-group checkbox-group">
-                  <label><input type="checkbox" formControlName="auto_apply" /> Auto Apply</label>
-                  <label><input type="checkbox" formControlName="stackable" /> Stackable with other discounts</label>
-                </div>
-              </div>
-              <div class="form-row">
-                <div class="form-group">
-                  <label>Valid From</label>
-                  <input type="date" formControlName="valid_from" />
-                </div>
-                <div class="form-group">
-                  <label>Valid To</label>
-                  <input type="date" formControlName="valid_to" />
-                </div>
-              </div>
-            </form>
-            <div class="modal-footer">
-              <button class="btn btn-secondary" (click)="closeRuleModal()">Cancel</button>
-              <button class="btn btn-primary" (click)="saveRule()" [disabled]="ruleForm.invalid">Save Rule</button>
-            </div>
-          </div>
-        </div>
-      }
-    </div>
+            args: [{ selector: 'cide-discount-rules', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: `
+    <div class="discount-rules-container">
+      <div class="header">
+        <h1>Discount Rules Management</h1>
+        <button class="btn btn-primary" (click)="openRuleModal()">Create New Rule</button>
+      </div>
+
+      <!-- Tabs -->
+      <div class="tabs">
+        <button class="tab" [class.active]="activeTab() === 'rules'" (click)="activeTab.set('rules')">Discount Rules</button>
+        <button class="tab" [class.active]="activeTab() === 'applied'" (click)="activeTab.set('applied')">Applied Discounts</button>
+        <button class="tab" [class.active]="activeTab() === 'scholarships'" (click)="activeTab.set('scholarships')">Scholarships</button>
+      </div>
+
+      <!-- Rules Tab -->
+      @if (activeTab() === 'rules') {
+        <div class="rules-section">
+          <div class="table-container">
+            <table>
+              <thead>
+                <tr>
+                  <th>Rule Name</th>
+                  <th>Rule Code</th>
+                  <th>Discount Type</th>
+                  <th>Discount Value</th>
+                  <th>Applies To</th>
+                  <th>Priority</th>
+                  <th>Auto Apply</th>
+                  <th>Status</th>
+                  <th>Actions</th>
+                </tr>
+              </thead>
+              <tbody>
+                @for (rule of discountRules(); track rule.id) {
+                  <tr>
+                    <td>{{ rule.name }}</td>
+                    <td>{{ rule.code }}</td>
+                    <td><span class="badge">{{ rule.discount_type }}</span></td>
+                    <td class="discount-value">{{ rule.discount_type === 'PERCENTAGE' ? rule.value + '%' : '₹' + rule.value }}</td>
+                    <td>{{ rule.applies_to }}</td>
+                    <td><span class="priority">{{ rule.priority }}</span></td>
+                    <td><span class="status-badge" [class.active]="rule.auto_apply">{{ rule.auto_apply ? 'Yes' : 'No' }}</span></td>
+                    <td><span class="status-badge" [class.active]="rule.status === 'ACTIVE'">{{ rule.status }}</span></td>
+                    <td>
+                      <button class="btn-icon" (click)="editRule(rule)">✏️</button>
+                      <button class="btn-icon" (click)="toggleRuleStatus(rule)">🔄</button>
+                      <button class="btn-icon" (click)="deleteRule(rule)">🗑️</button>
+                    </td>
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </div>
+        </div>
+      }
+
+      <!-- Rule Modal -->
+      @if (showRuleModal()) {
+        <div class="modal-overlay" (click)="closeRuleModal()">
+          <div class="modal-content" (click)="$event.stopPropagation()">
+            <div class="modal-header">
+              <h2>{{ editingRule() ? 'Edit' : 'Create' }} Discount Rule</h2>
+              <button class="close-btn" (click)="closeRuleModal()">×</button>
+            </div>
+            <form [formGroup]="ruleForm" class="modal-body">
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Rule Name</label>
+                  <input type="text" formControlName="rule_name" placeholder="e.g., Sibling Discount" />
+                </div>
+                <div class="form-group">
+                  <label>Rule Code</label>
+                  <input type="text" formControlName="rule_code" placeholder="e.g., SIBLING_DISC" />
+                </div>
+              </div>
+              <div class="form-group">
+                <label>Description</label>
+                <textarea formControlName="description" rows="3" placeholder="Describe the discount rule..."></textarea>
+              </div>
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Discount Type</label>
+                  <select formControlName="discount_type">
+                    <option value="PERCENTAGE">Percentage</option>
+                    <option value="FIXED_AMOUNT">Fixed Amount</option>
+                  </select>
+                </div>
+                <div class="form-group">
+                  <label>Discount Value</label>
+                  <input type="number" formControlName="discount_value" placeholder="Enter value" />
+                </div>
+              </div>
+              <div class="form-group">
+                <label>Applies To Fee Categories</label>
+                <select formControlName="applies_to" multiple>
+                  <option value="ALL">All Categories</option>
+                  <option value="TUITION">Tuition</option>
+                  <option value="EXAM">Exam Fees</option>
+                  <option value="LIBRARY">Library</option>
+                  <option value="LAB">Lab</option>
+                  <option value="SPORTS">Sports</option>
+                  <option value="TRANSPORT">Transport</option>
+                </select>
+              </div>
+              <div class="form-group">
+                <label>Criteria (JSON Format)</label>
+                <textarea formControlName="criteria_json" rows="4" placeholder='{"sibling_count": ">= 1", "staff_role": "TEACHER"}'></textarea>
+                <small>Define conditions for automatic discount application</small>
+              </div>
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Priority</label>
+                  <input type="number" formControlName="priority" placeholder="1" />
+                  <small>Higher priority rules apply first</small>
+                </div>
+                <div class="form-group checkbox-group">
+                  <label><input type="checkbox" formControlName="auto_apply" /> Auto Apply</label>
+                  <label><input type="checkbox" formControlName="stackable" /> Stackable with other discounts</label>
+                </div>
+              </div>
+              <div class="form-row">
+                <div class="form-group">
+                  <label>Valid From</label>
+                  <input type="date" formControlName="valid_from" />
+                </div>
+                <div class="form-group">
+                  <label>Valid To</label>
+                  <input type="date" formControlName="valid_to" />
+                </div>
+              </div>
+            </form>
+            <div class="modal-footer">
+              <button class="btn btn-secondary" (click)="closeRuleModal()">Cancel</button>
+              <button class="btn btn-primary" (click)="saveRule()" [disabled]="ruleForm.invalid">Save Rule</button>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
   `, styles: [".discount-rules-container{padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.btn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:14px}.btn-primary{background:#007bff;color:#fff}.btn-secondary{background:#6c757d;color:#fff}.tabs{display:flex;gap:10px;margin-bottom:20px;border-bottom:2px solid #e0e0e0}.tab{padding:12px 24px;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-weight:500}.tab.active{border-bottom-color:#007bff;color:#007bff}.table-container{overflow-x:auto;background:#fff;border-radius:8px;border:1px solid #e0e0e0}table{width:100%;border-collapse:collapse}thead{background:#f8f9fa}th{padding:12px;text-align:left;font-weight:600;border-bottom:2px solid #dee2e6}td{padding:12px;border-bottom:1px solid #dee2e6}.badge{padding:4px 12px;border-radius:12px;font-size:12px;background:#e3f2fd;color:#1976d2}.discount-value{font-weight:600;color:#28a745}.priority{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;background:#ffc107;color:#fff;border-radius:50%;font-weight:700}.status-badge{padding:4px 12px;border-radius:12px;font-size:12px;background:#f8d7da;color:#721c24}.status-badge.active{background:#d4edda;color:#155724}.btn-icon{background:none;border:none;cursor:pointer;font-size:18px;padding:4px}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;max-width:800px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e0e0e0}.close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:#666}.modal-body{padding:20px}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid #e0e0e0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:500;font-size:14px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px}.form-group small{color:#666;font-size:12px}.checkbox-group{display:flex;flex-direction:column;gap:8px}.checkbox-group label{display:flex;align-items:center;gap:8px}\n"] }]
         }] });
 
@@ -6959,10 +7035,10 @@ class MyFeeStatementComponent {
     paymentHistoryRendererTemplate = viewChild.required('paymentHistoryRendererTemplate');
     loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
     studentInfo = signal({
-        id: 'STU-2024-001',
-        name: 'John Doe',
-        class: 'Class 10',
-        section: 'A',
+        id: '',
+        name: '',
+        class: '',
+        section: '',
         avatar: ''
     }, ...(ngDevMode ? [{ debugName: "studentInfo" }] : []));
     feeDetails = signal([], ...(ngDevMode ? [{ debugName: "feeDetails" }] : []));
@@ -7745,7 +7821,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", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<!-- My Online Payment Container -->\n<div class=\"tw-w-full tw-h-full\">\n  <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\n\n    <!-- Header Section -->\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n          \n          <!-- Title -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Online Fee Payment</h5>\n          </div>\n\n          <!-- Actions -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" leftIcon=\"arrow_back\">\n              Back to Statement\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Main Content Area -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n          \n          <!-- Left Panel - Fee Selection -->\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Fees to Pay</h6>\n            </div>\n            \n            <!-- Quick Actions -->\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex tw-gap-2\">\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\n                Select All\n              </button>\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\n                Select Overdue\n              </button>\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\n                Clear\n              </button>\n            </div>\n\n            <!-- Fee Items List -->\n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\n              @if (outstandingFees().length === 0) {\n                <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                  <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\n                  <p class=\"tw-text-sm\">No outstanding fees</p>\n                </div>\n              } @else {\n                @for (fee of outstandingFees(); track fee.id) {\n                  <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\n                    [class.tw-border-blue-500]=\"isSelected(fee)\"\n                    [class.tw-bg-blue-50]=\"isSelected(fee)\"\n                    [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\n                    [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\n                    [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\"\n                    (click)=\"toggleFee(fee)\">\n                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\n                      <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\n                        <input \n                          type=\"checkbox\" \n                          [checked]=\"isSelected(fee)\"\n                          (change)=\"toggleFee(fee); $event.stopPropagation()\"\n                          class=\"tw-mt-1\">\n                        <div class=\"tw-flex-1\">\n                          <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\n                            <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\n                            @if (isOverdue(fee)) {\n                              <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800\">\n                                Overdue\n                              </span>\n                            }\n                          </div>\n                          <div class=\"tw-text-xs tw-text-gray-600\">\n                            Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\n                          </div>\n                          @if (fee.late_fee > 0) {\n                            <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\n                              Late Fee: {{ formatCurrency(fee.late_fee) }}\n                            </div>\n                          }\n                        </div>\n                      </div>\n                      <div class=\"tw-text-right\">\n                        <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n\n          <!-- Right Panel - Payment Summary & Gateway -->\n          <div class=\"tw-space-y-4\">\n            \n            <!-- Payment Summary Card -->\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n              <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment Summary</h6>\n              </div>\n              <div class=\"tw-p-4 tw-space-y-3\">\n                <div class=\"tw-flex tw-justify-between tw-text-sm\">\n                  <span class=\"tw-text-gray-600\">Selected Items</span>\n                  <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\n                </div>\n                <div class=\"tw-flex tw-justify-between tw-text-sm\">\n                  <span class=\"tw-text-gray-600\">Fee Amount</span>\n                  <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n                </div>\n                @if (totalLateFee() > 0) {\n                  <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\n                    <span>Late Fee</span>\n                    <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\n                  </div>\n                }\n                <div class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\n                  <span>Subtotal</span>\n                  <span>{{ formatCurrency(subtotal()) }}</span>\n                </div>\n                @if (convenienceFee() > 0) {\n                  <div class=\"tw-flex tw-justify-between tw-text-sm\">\n                    <span class=\"tw-text-gray-600\">Convenience Fee (2%)</span>\n                    <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\n                  </div>\n                }\n                <div class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\n                  <span>Total Payable</span>\n                  <span>{{ formatCurrency(totalPayable()) }}</span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payment Method Selection -->\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n              <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Payment Method</h6>\n              </div>\n              <div class=\"tw-p-4\">\n                <form [formGroup]=\"paymentForm\" class=\"tw-space-y-4\">\n                  \n                  <!-- Payment Method Cards -->\n                  <div class=\"tw-grid tw-grid-cols-3 tw-gap-3 tw-mb-4\">\n                    @for (method of paymentMethodOptions; track method.value) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-p-4 tw-rounded-lg tw-border-2 tw-text-center tw-transition-colors\"\n                        [class.tw-border-blue-500]=\"selectedPaymentMethod() === method.value\"\n                        [class.tw-bg-blue-50]=\"selectedPaymentMethod() === method.value\"\n                        [class.tw-border-gray-200]=\"selectedPaymentMethod() !== method.value\"\n                        (click)=\"selectPaymentMethod(method.value)\">\n                        <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2\"\n                          [class.tw-text-blue-600]=\"selectedPaymentMethod() === method.value\"\n                          [class.tw-text-gray-400]=\"selectedPaymentMethod() !== method.value\">\n                          @switch (method.value) {\n                            @case ('UPI') { account_balance_wallet }\n                            @case ('CARD') { credit_card }\n                            @case ('NET_BANKING') { account_balance }\n                          }\n                        </cide-ele-icon>\n                        <div class=\"tw-text-xs tw-font-medium\">{{ method.label }}</div>\n                      </button>\n                    }\n                  </div>\n\n                  <!-- UPI Details -->\n                  @if (selectedPaymentMethod() === 'UPI') {\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\n                      <cide-ele-input\n                        label=\"UPI ID\"\n                        formControlName=\"upi_id\"\n                        placeholder=\"username@upi\"\n                        size=\"sm\"\n                        [required]=\"true\">\n                      </cide-ele-input>\n                    </div>\n                  }\n\n                  <!-- Card Details -->\n                  @if (selectedPaymentMethod() === 'CARD') {\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200 tw-space-y-3\">\n                      <cide-ele-input\n                        label=\"Card Number\"\n                        formControlName=\"card_number\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        size=\"sm\"\n                        maxLength=\"19\"\n                        [required]=\"true\">\n                      </cide-ele-input>\n                      <div class=\"tw-grid tw-grid-cols-2 tw-gap-3\">\n                        <cide-ele-input\n                          label=\"Expiry Date\"\n                          formControlName=\"expiry\"\n                          placeholder=\"MM/YY\"\n                          size=\"sm\"\n                          maxLength=\"5\"\n                          [required]=\"true\">\n                        </cide-ele-input>\n                        <cide-ele-input\n                          label=\"CVV\"\n                          formControlName=\"cvv\"\n                          type=\"password\"\n                          placeholder=\"***\"\n                          size=\"sm\"\n                          maxLength=\"3\"\n                          [required]=\"true\">\n                        </cide-ele-input>\n                      </div>\n                    </div>\n                  }\n\n                  <!-- Net Banking Details -->\n                  @if (selectedPaymentMethod() === 'NET_BANKING') {\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\n                      <cide-ele-select\n                        label=\"Select Bank\"\n                        formControlName=\"bank\"\n                        [options]=\"bankOptions\"\n                        size=\"sm\"\n                        placeholder=\"Select Bank\"\n                        [required]=\"true\">\n                      </cide-ele-select>\n                    </div>\n                  }\n\n                  <!-- Action Buttons -->\n                  <div class=\"tw-flex tw-gap-3 tw-pt-4\">\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" class=\"tw-flex-1\">\n                      Cancel\n                    </button>\n                    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"proceedToPayment()\"\n                      [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" class=\"tw-flex-1\" leftIcon=\"payment\">\n                      Pay {{ formatCurrency(totalPayable()) }}\n                    </button>\n                  </div>\n\n                  <!-- Security Info -->\n                  <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-pt-2 tw-text-xs tw-text-gray-500\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\n                    <span>Secure payment powered by Razorpay</span>\n                  </div>\n                </form>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MyOnlinePaymentComponent, decorators: [{
             type: Component,
@@ -7756,7 +7832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CideSelectComponent,
                         CideEleButtonComponent,
                         CideIconComponent
-                    ], 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"] }]
+                    ], template: "<!-- My Online Payment Container -->\n<div class=\"tw-w-full tw-h-full\">\n  <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\n\n    <!-- Header Section -->\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n          \n          <!-- Title -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Online Fee Payment</h5>\n          </div>\n\n          <!-- Actions -->\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" leftIcon=\"arrow_back\">\n              Back to Statement\n            </button>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- Main Content Area -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n          \n          <!-- Left Panel - Fee Selection -->\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Fees to Pay</h6>\n            </div>\n            \n            <!-- Quick Actions -->\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex tw-gap-2\">\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\n                Select All\n              </button>\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\n                Select Overdue\n              </button>\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\n                Clear\n              </button>\n            </div>\n\n            <!-- Fee Items List -->\n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\n              @if (outstandingFees().length === 0) {\n                <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                  <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\n                  <p class=\"tw-text-sm\">No outstanding fees</p>\n                </div>\n              } @else {\n                @for (fee of outstandingFees(); track fee.id) {\n                  <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\n                    [class.tw-border-blue-500]=\"isSelected(fee)\"\n                    [class.tw-bg-blue-50]=\"isSelected(fee)\"\n                    [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\n                    [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\n                    [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\"\n                    (click)=\"toggleFee(fee)\">\n                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\n                      <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\n                        <input \n                          type=\"checkbox\" \n                          [checked]=\"isSelected(fee)\"\n                          (change)=\"toggleFee(fee); $event.stopPropagation()\"\n                          class=\"tw-mt-1\">\n                        <div class=\"tw-flex-1\">\n                          <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\n                            <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\n                            @if (isOverdue(fee)) {\n                              <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800\">\n                                Overdue\n                              </span>\n                            }\n                          </div>\n                          <div class=\"tw-text-xs tw-text-gray-600\">\n                            Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\n                          </div>\n                          @if (fee.late_fee > 0) {\n                            <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\n                              Late Fee: {{ formatCurrency(fee.late_fee) }}\n                            </div>\n                          }\n                        </div>\n                      </div>\n                      <div class=\"tw-text-right\">\n                        <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\n                      </div>\n                    </div>\n                  </div>\n                }\n              }\n            </div>\n          </div>\n\n          <!-- Right Panel - Payment Summary & Gateway -->\n          <div class=\"tw-space-y-4\">\n            \n            <!-- Payment Summary Card -->\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n              <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment Summary</h6>\n              </div>\n              <div class=\"tw-p-4 tw-space-y-3\">\n                <div class=\"tw-flex tw-justify-between tw-text-sm\">\n                  <span class=\"tw-text-gray-600\">Selected Items</span>\n                  <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\n                </div>\n                <div class=\"tw-flex tw-justify-between tw-text-sm\">\n                  <span class=\"tw-text-gray-600\">Fee Amount</span>\n                  <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n                </div>\n                @if (totalLateFee() > 0) {\n                  <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\n                    <span>Late Fee</span>\n                    <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\n                  </div>\n                }\n                <div class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\n                  <span>Subtotal</span>\n                  <span>{{ formatCurrency(subtotal()) }}</span>\n                </div>\n                @if (convenienceFee() > 0) {\n                  <div class=\"tw-flex tw-justify-between tw-text-sm\">\n                    <span class=\"tw-text-gray-600\">Convenience Fee (2%)</span>\n                    <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\n                  </div>\n                }\n                <div class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\n                  <span>Total Payable</span>\n                  <span>{{ formatCurrency(totalPayable()) }}</span>\n                </div>\n              </div>\n            </div>\n\n            <!-- Payment Method Selection -->\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n              <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Payment Method</h6>\n              </div>\n              <div class=\"tw-p-4\">\n                <form [formGroup]=\"paymentForm\" class=\"tw-space-y-4\">\n                  \n                  <!-- Payment Method Cards -->\n                  <div class=\"tw-grid tw-grid-cols-3 tw-gap-3 tw-mb-4\">\n                    @for (method of paymentMethodOptions; track method.value) {\n                      <button\n                        type=\"button\"\n                        class=\"tw-p-4 tw-rounded-lg tw-border-2 tw-text-center tw-transition-colors\"\n                        [class.tw-border-blue-500]=\"selectedPaymentMethod() === method.value\"\n                        [class.tw-bg-blue-50]=\"selectedPaymentMethod() === method.value\"\n                        [class.tw-border-gray-200]=\"selectedPaymentMethod() !== method.value\"\n                        (click)=\"selectPaymentMethod(method.value)\">\n                        <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2\"\n                          [class.tw-text-blue-600]=\"selectedPaymentMethod() === method.value\"\n                          [class.tw-text-gray-400]=\"selectedPaymentMethod() !== method.value\">\n                          @switch (method.value) {\n                            @case ('UPI') { account_balance_wallet }\n                            @case ('CARD') { credit_card }\n                            @case ('NET_BANKING') { account_balance }\n                          }\n                        </cide-ele-icon>\n                        <div class=\"tw-text-xs tw-font-medium\">{{ method.label }}</div>\n                      </button>\n                    }\n                  </div>\n\n                  <!-- UPI Details -->\n                  @if (selectedPaymentMethod() === 'UPI') {\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\n                      <cide-ele-input\n                        label=\"UPI ID\"\n                        formControlName=\"upi_id\"\n                        placeholder=\"username@upi\"\n                        size=\"sm\"\n                        [required]=\"true\">\n                      </cide-ele-input>\n                    </div>\n                  }\n\n                  <!-- Card Details -->\n                  @if (selectedPaymentMethod() === 'CARD') {\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200 tw-space-y-3\">\n                      <cide-ele-input\n                        label=\"Card Number\"\n                        formControlName=\"card_number\"\n                        placeholder=\"1234 5678 9012 3456\"\n                        size=\"sm\"\n                        maxLength=\"19\"\n                        [required]=\"true\">\n                      </cide-ele-input>\n                      <div class=\"tw-grid tw-grid-cols-2 tw-gap-3\">\n                        <cide-ele-input\n                          label=\"Expiry Date\"\n                          formControlName=\"expiry\"\n                          placeholder=\"MM/YY\"\n                          size=\"sm\"\n                          maxLength=\"5\"\n                          [required]=\"true\">\n                        </cide-ele-input>\n                        <cide-ele-input\n                          label=\"CVV\"\n                          formControlName=\"cvv\"\n                          type=\"password\"\n                          placeholder=\"***\"\n                          size=\"sm\"\n                          maxLength=\"3\"\n                          [required]=\"true\">\n                        </cide-ele-input>\n                      </div>\n                    </div>\n                  }\n\n                  <!-- Net Banking Details -->\n                  @if (selectedPaymentMethod() === 'NET_BANKING') {\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\n                      <cide-ele-select\n                        label=\"Select Bank\"\n                        formControlName=\"bank\"\n                        [options]=\"bankOptions\"\n                        size=\"sm\"\n                        placeholder=\"Select Bank\"\n                        [required]=\"true\">\n                      </cide-ele-select>\n                    </div>\n                  }\n\n                  <!-- Action Buttons -->\n                  <div class=\"tw-flex tw-gap-3 tw-pt-4\">\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" class=\"tw-flex-1\">\n                      Cancel\n                    </button>\n                    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"proceedToPayment()\"\n                      [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" class=\"tw-flex-1\" leftIcon=\"payment\">\n                      Pay {{ formatCurrency(totalPayable()) }}\n                    </button>\n                  </div>\n\n                  <!-- Security Info -->\n                  <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-pt-2 tw-text-xs tw-text-gray-500\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\n                    <span>Secure payment powered by Razorpay</span>\n                  </div>\n                </form>\n              </div>\n            </div>\n\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
         }] });
 
 var myOnlinePayment_component = /*#__PURE__*/Object.freeze({