cloud-ide-fees 0.0.11 → 0.0.13

package/fesm2022/cloud-ide-fees.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { Component, inject, Injectable, DestroyRef, viewChild, signal, computed, input, ViewChild, output } from '@angular/core';
+import { Component, inject, Injectable, DestroyRef, viewChild, signal, computed, input, ChangeDetectorRef, ViewChild, output } from '@angular/core';
 import { authGuard } from 'cloud-ide-auth';
 import { HttpClient } from '@angular/common/http';
 import { generateStringFromObject, cidePath, hostManagerRoutesUrl, feesRoutesUrl, MFeeStructure, generateObjectFromString, AcaClassPrgBranchListPayload, academicsRoutesUrl, MPrgTrmSection, FeeStructureSaveUpdatePayload, MFeePayment, MFeePaymentInsertUpdatePayload, MFeeReceiptTemplateInsertUpdatePayload, MFeeReceiptTemplate, MFeeReceiptTemplateGetByIdPayload } from 'cloud-ide-lms-model';
@@ -2319,7 +2319,7 @@ class FeeStructureCreateComponent {
         this.breadcrumbData.set(additionalItems);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeStructureCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeStructureCreateComponent, isStandalone: true, selector: "lib-cide-fee-structure-create", ngImport: i0, template: "<!-- Fee Structure Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  \n  <!-- Back Button in Breadcrumb Area (View Mode Only) -->\n  @if (isViewMode()) {\n    <div breadcrumb-actions>\n      <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"arrow_back\">\n        Back to List\n      </button>\n    </div>\n  }\n  \n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"feeStructureForm\" \n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-2 tw-py-0\">\n        <cide-ele-tab [tabs]=\"feeStructureTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\n          (tabChange)=\"onTabChange($event)\">\n        </cide-ele-tab>\n      </div>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-4 tw-py-4\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          @switch (activeTab()) {\n\n            @case ('basic') {\n              <!-- Basic Information -->\n              <div class=\"tw-space-y-4\">\n                <!-- First Row: Fee Code (small), Fee Name, Academic Year - Always on one row -->\n                <div class=\"tw-grid\" style=\"grid-template-columns: 170px 1fr 1fr; gap: 1rem;\">\n                  <cide-ele-input label=\"Fee Structure Code\" formControlName=\"fees_structure_code\"\n                    placeholder=\"Auto-generated by API\" size=\"sm\" [disabled]=\"isEditMode()\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Fee Structure Name\" formControlName=\"fees_structure_name\"\n                    placeholder=\"e.g., Grade 10 Fee Structure 2024-25\" size=\"sm\">\n                  </cide-ele-input>\n\n                  <cide-ele-select \n                    label=\"Academic Year\" \n                    formControlName=\"fees_academic_year_id_acayr\"\n                    [options]=\"getAcademicYearOptions()\"\n                    [loading]=\"academicYearLoading()\"\n                    [disabled]=\"true\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div>\n                  <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n                    placeholder=\"Enter detailed description of the fee structure...\"\n                    rows=\"2\" size=\"sm\">\n                  </cide-ele-textarea>\n                </div>\n\n                <!-- Academic Dropdowns - Using Program Section Selector Component -->\n                \n                <cide-shared-program-section-selector-wrapper\n                  [formGroup]=\"feeStructureForm\"\n                  [classProgramControlName]=\"'fees_class_program_id_acacpm'\"\n                  [branchControlName]=\"'fees_class_program_branch_id_acabrn'\"\n                  [termControlName]=\"'fees_class_program_term_id_acapt'\"\n                  [sectionControlName]=\"'fees_program_term_section_id_acapts'\"\n                  [academicYearId]=\"feeStructureForm.get('fees_academic_year_id_acayr')?.value\"\n                  [entityId]=\"feeStructureForm.get('fees_entity_id_syen')?.value\"\n                  [disabled]=\"isViewMode()\"\n                  [showLabels]=\"true\"\n                  [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\">\n                </cide-shared-program-section-selector-wrapper>\n\n                <!-- Reservation Category Dropdown -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mt-4\">\n                  <cide-ele-select \n                    label=\"Reservation Category\" \n                    formControlName=\"fees_student_category_id_sygms\"\n                    [options]=\"studentCategories()\"\n                    [loading]=\"studentCategoriesLoading()\"\n                    placeholder=\"Select reservation category\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                  <cide-ele-input formControlName=\"fees_is_active\" type=\"checkbox\" size=\"sm\">\n                  </cide-ele-input>\n                  <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\n                    <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this fee structure</span>\n                  </div>\n                </div>\n              </div>\n            }\n\n            @case ('items') {\n              <!-- Fee Items Section -->\n              <div class=\"tw-space-y-3\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                  <div>\n                    <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-m-0\">Fee Items</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Configure individual fee items for this structure</p>\n                  </div>\n                  <div class=\"tw-flex tw-items-center tw-gap-3\">\n                    <div class=\"tw-text-right\">\n                      <div class=\"tw-text-xs tw-text-gray-500\">Total Amount</div>\n                      <div class=\"tw-text-base tw-font-bold tw-text-green-600\">{{ formatCurrency(totalAmount()) }}</div>\n                    </div>\n                    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" leftIcon=\"add\"\n                      (click)=\"addFeeItem()\">\n                      Add Fee Item\n                    </button>\n                  </div>\n                </div>\n\n                <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-pr-2\">\n                  @for (item of feeItemsArray.controls; track $index; let itemIndex = $index) {\n                    <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm hover:tw-shadow-md tw-transition-shadow tw-p-3\"\n                      [formGroupName]=\"itemIndex\">\n                      \n                      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <div class=\"tw-flex tw-items-center tw-gap-2\">\n                          <div class=\"tw-bg-blue-100 tw-p-1.5 tw-rounded\">\n                            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">receipt</cide-ele-icon>\n                          </div>\n                          <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">Item #{{ itemIndex + 1 }}</h6>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                          @if (itemIndex > 0) {\n                            <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n                              (click)=\"moveItemUp(itemIndex)\" title=\"Move Up\">\n                              <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_upward</cide-ele-icon>\n                            </button>\n                          }\n                          @if (itemIndex < feeItemsArray.length - 1) {\n                            <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n                              (click)=\"moveItemDown(itemIndex)\" title=\"Move Down\">\n                              <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_downward</cide-ele-icon>\n                            </button>\n                          }\n                          <button cideEleButton type=\"button\" variant=\"danger\" size=\"xs\" leftIcon=\"delete\"\n                            (click)=\"removeFeeItem(itemIndex)\"\n                            [disabled]=\"feeItemsArray.length === 1\">\n                            Remove\n                          </button>\n                        </div>\n                      </div>\n\n                      <!-- Category, Code, Name in one row -->\n                      <div class=\"tw-grid\" style=\"grid-template-columns: 1fr 170px 1fr; gap: 1rem;\">\n                        <cide-ele-select \n                          label=\"Category\" \n                          formControlName=\"feesi_category_id_sygms\"\n                          [options]=\"feeCategoriesOptions()\"\n                          [loading]=\"feeCategoriesLoading()\"\n                          size=\"sm\"\n                          placeholder=\"Select Fee Category\">\n                        </cide-ele-select>\n\n                        <cide-ele-input \n                          label=\"Item Code\" \n                          formControlName=\"feesi_item_code\"\n                          size=\"sm\"\n                          placeholder=\"Auto-filled from category\">\n                        </cide-ele-input>\n\n                        <cide-ele-input \n                          label=\"Item Name\" \n                          formControlName=\"feesi_item_name\"\n                          size=\"sm\"\n                          placeholder=\"Auto-filled from category\">\n                        </cide-ele-input>\n                      </div>\n\n                      <div class=\"tw-mt-2\">\n                        <cide-ele-textarea \n                          label=\"Description\" \n                          formControlName=\"feesi_description\"\n                          rows=\"1\" \n                          size=\"sm\">\n                        </cide-ele-textarea>\n                      </div>\n\n                      <!-- Amount Section -->\n                      <div class=\"tw-mt-2\">\n                        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n                          <cide-ele-input \n                            [label]=\"item.get('feesi_is_amount_editable')?.value ? 'Base Amount (Default)' : 'Amount'\" \n                            formControlName=\"feesi_amount\"\n                            type=\"number\"\n                            size=\"sm\"\n                            [title]=\"item.get('feesi_is_amount_editable')?.value ? 'Default amount used when applying fee. Can be edited per student if editable.' : 'Fixed fee amount'\">\n                          </cide-ele-input>\n                        </div>\n\n                        <!-- Amount Editable Option -->\n                        <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                          <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2\">\n                            <cide-ele-input formControlName=\"feesi_is_amount_editable\" type=\"checkbox\" size=\"sm\">\n                            </cide-ele-input>\n                            <div class=\"tw-flex-1\">\n                              <span class=\"tw-text-xs tw-font-semibold tw-text-blue-900\">Allow Amount to be Edited</span>\n                              <p class=\"tw-text-xs tw-text-blue-700 tw-mt-0.5\">\n                                Enable this for fees that vary per student (e.g., Transport fee based on distance). \n                                When applying fees, you'll be asked to enter the amount within the specified range.\n                              </p>\n                            </div>\n                          </div>\n\n                          <!-- Min/Max Amount Fields (shown when editable is checked) -->\n                          @if (item.get('feesi_is_amount_editable')?.value) {\n                            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                              <cide-ele-input \n                                label=\"Minimum Amount\" \n                                formControlName=\"feesi_min_amount\"\n                                type=\"number\"\n                                size=\"sm\"\n                                placeholder=\"No minimum\"\n                                title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n                              </cide-ele-input>\n\n                              <cide-ele-input \n                                label=\"Maximum Amount\" \n                                formControlName=\"feesi_max_amount\"\n                                type=\"number\"\n                                size=\"sm\"\n                                placeholder=\"No maximum\"\n                                title=\"Maximum amount allowed when editing (leave empty for no maximum)\">\n                              </cide-ele-input>\n                            </div>\n                          }\n                        </div>\n                      </div>\n\n                      <!-- Additional Options -->\n                      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2 tw-mt-2\">\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_mandatory\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Mandatory</span>\n                        </div>\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_refundable\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Refundable</span>\n                        </div>\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_installment_allowed\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Installment Allowed</span>\n                        </div>\n                      </div>\n\n                      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                        @if (item.get('feesi_is_installment_allowed')?.value) {\n                          <cide-ele-input \n                            label=\"Installment Count\" \n                            formControlName=\"feesi_installment_count\"\n                            type=\"number\"\n                            size=\"sm\">\n                          </cide-ele-input>\n                        }\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_tax_applicable\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Tax Applicable</span>\n                        </div>\n                      </div>\n\n                      @if (item.get('feesi_tax_applicable')?.value) {\n                        <div class=\"tw-mt-2\">\n                          <cide-ele-input \n                            label=\"Tax Percentage\" \n                            formControlName=\"feesi_tax_percentage\"\n                            type=\"number\"\n                            size=\"sm\">\n                          </cide-ele-input>\n                        </div>\n                      }\n\n                      <!-- Installment Details Table -->\n                      <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                          <div class=\"tw-flex tw-items-center tw-gap-2\">\n                            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">schedule</cide-ele-icon>\n                            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">\n                              @if (item.get('feesi_is_installment_allowed')?.value) {\n                                Installment Details ({{ item.get('feesi_installment_count')?.value || 1 }} Installments)\n                              } @else {\n                                Payment Details (Single Payment)\n                              }\n                            </h6>\n                          </div>\n                        </div>\n\n                        <div formArrayName=\"installments\" class=\"tw-space-y-3\">\n                          @for (installment of getInstallmentsArray(itemIndex).controls; track $index; let installmentIndex = $index) {\n                            <div class=\"tw-bg-white tw-rounded tw-border tw-border-gray-300 tw-p-3\"\n                              [formGroupName]=\"installmentIndex\">\n                              \n                              <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                                  <div class=\"tw-bg-blue-100 tw-p-1 tw-rounded\">\n                                    <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">payments</cide-ele-icon>\n                                  </div>\n                                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">\n                                    @if (item.get('feesi_is_installment_allowed')?.value) {\n                                      Installment #{{ installment.get('installment_number')?.value }}\n                                    } @else {\n                                      Payment Details\n                                    }\n                                  </h6>\n                                </div>\n                                <div class=\"tw-text-sm tw-font-medium tw-text-green-600\">\n                                  Amount: {{ formatCurrency(installment.get('installment_amount')?.value || 0) }}\n                                </div>\n                              </div>\n\n                              <!-- Installment Amount Distribution -->\n                              @if (item.get('feesi_is_installment_allowed')?.value) {\n                                <div class=\"tw-p-2 tw-bg-yellow-50 tw-rounded tw-border tw-border-yellow-200 tw-mb-2\">\n                                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2\">\n                                    <cide-ele-select \n                                      label=\"Distribution Type\" \n                                      formControlName=\"distribution_type\"\n                                      [options]=\"distributionTypeOptions\"\n                                      size=\"sm\">\n                                    </cide-ele-select>\n\n                                    @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n                                      <cide-ele-input \n                                        label=\"Percentage (%)\" \n                                        formControlName=\"percentage\"\n                                        type=\"number\"\n                                        size=\"sm\"\n                                        title=\"Percentage of total amount for this installment\">\n                                      </cide-ele-input>\n                                      <div class=\"tw-flex tw-flex-col tw-items-end tw-justify-end tw-gap-1\">\n                                        @if (installmentIndex > 0) {\n                                          <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\n                                            Previous: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) }}%\n                                          </div>\n                                        }\n                                        <div class=\"tw-text-xs tw-text-gray-600\">\n                                          Calculated: {{ formatCurrency((item.get('feesi_amount')?.value || 0) * (installment.get('percentage')?.value || 0) / 100) }}\n                                        </div>\n                                        @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex > 0) {\n                                          <div class=\"tw-text-xs tw-font-semibold\" [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\" [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n                                            Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0) }}%\n                                          </div>\n                                        }\n                                      </div>\n                                    }\n\n                                    @if (installment.get('distribution_type')?.value === 'FIXED_AMOUNT') {\n                                      <cide-ele-input \n                                        label=\"Fixed Amount\" \n                                        formControlName=\"fixed_amount\"\n                                        type=\"number\"\n                                        size=\"sm\"\n                                        title=\"Fixed amount for this installment\">\n                                      </cide-ele-input>\n                                    }\n                                  </div>\n                                </div>\n                              }\n\n                              <!-- Due Date Fields -->\n                              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mb-2\">\n                                <cide-ele-input \n                                  label=\"Due Date Offset (Days from Assignment)\" \n                                  formControlName=\"due_date_offset_days\"\n                                  type=\"number\"\n                                  size=\"sm\"\n                                  title=\"Days from assignment date\">\n                                </cide-ele-input>\n\n                                <cide-ele-input \n                                  label=\"Due Date (Fixed Date - Alternative)\" \n                                  formControlName=\"due_date\"\n                                  type=\"date\"\n                                  size=\"sm\"\n                                  title=\"Use fixed date instead of offset\">\n                                </cide-ele-input>\n                              </div>\n\n                              <!-- Collection Window -->\n                              <div class=\"tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                                <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-2\">\n                                  <cide-ele-icon class=\"tw-text-blue-600 tw-w-3 tw-h-3\">schedule</cide-ele-icon>\n                                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-m-0\">Collection Window</h6>\n                                </div>\n                                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n                                  <cide-ele-input \n                                    label=\"Start Offset (Days from Assignment)\" \n                                    formControlName=\"collection_start_offset_days\"\n                                    type=\"number\"\n                                    size=\"sm\"\n                                    title=\"Days from assignment date when collection can start\">\n                                  </cide-ele-input>\n\n                                  <cide-ele-input \n                                    label=\"End Offset (Days from Assignment)\" \n                                    formControlName=\"collection_end_offset_days\"\n                                    type=\"number\"\n                                    size=\"sm\"\n                                    title=\"Days from assignment date when collection window ends\">\n                                  </cide-ele-input>\n                                </div>\n                                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                                  <cide-ele-input \n                                    label=\"Start Date (Fixed Date - Alternative)\" \n                                    formControlName=\"collection_start_date\"\n                                    type=\"date\"\n                                    size=\"sm\"\n                                    title=\"Use fixed date instead of offset\">\n                                  </cide-ele-input>\n\n                                  <cide-ele-input \n                                    label=\"End Date (Fixed Date - Alternative)\" \n                                    formControlName=\"collection_end_date\"\n                                    type=\"date\"\n                                    size=\"sm\"\n                                    title=\"Use fixed date instead of offset\">\n                                  </cide-ele-input>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n\n                @if (feeItemsArray.length === 0) {\n                  <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                    <div class=\"tw-bg-white tw-p-3 tw-rounded-full tw-w-12 tw-h-12 tw-mx-auto tw-mb-3 tw-flex tw-items-center tw-justify-center\">\n                      <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400\">receipt</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-1\">No Fee Items Yet</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500\">Click \"Add Fee Item\" to start adding fee items to this structure.</p>\n                  </div>\n                }\n              </div>\n            }\n          }\n          \n          <!-- Form Validation Errors -->\n          @if (!isViewMode()) {\n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n                [disabled]=\"loading()\">\n                Reset Form\n              </button>\n\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n                [disabled]=\"loading()\">\n                Cancel\n              </button>\n\n              @if (!isInstallmentPercentagesValid()) {\n                <div class=\"tw-w-full tw-mb-3 tw-p-2 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded tw-text-sm\">\n                  <div class=\"tw-flex tw-items-center tw-gap-2 tw-text-red-700\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">error</cide-ele-icon>\n                    <span class=\"tw-font-medium\">Validation Error:</span>\n                  </div>\n                  <p class=\"tw-text-red-600 tw-mt-1 tw-ml-6\">\n                    All installment percentages must total exactly 100% before saving. Please adjust the percentages to continue.\n                  </p>\n                </div>\n              }\n              \n              <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n                [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" \n                [loading]=\"submitting()\" \n                leftIcon=\"save\">\n                {{ isEditMode() ? 'Update Fee Structure' : 'Create Fee Structure' }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeStructureCreateComponent, isStandalone: true, selector: "lib-cide-fee-structure-create", ngImport: i0, template: "<!-- Fee Structure Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  \n  <!-- Back Button in Breadcrumb Area (View Mode Only) -->\n  @if (isViewMode()) {\n    <div breadcrumb-actions>\n      <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"arrow_back\">\n        Back to List\n      </button>\n    </div>\n  }\n  \n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"feeStructureForm\" \n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Tab Navigation -->\n    <div class=\"tw-table-row tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-2 tw-py-0\">\n        <cide-ele-tab [tabs]=\"feeStructureTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\n          (tabChange)=\"onTabChange($event)\">\n        </cide-ele-tab>\n      </div>\n    </div>\n\n    <!-- Tab Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-4 tw-py-4\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          @switch (activeTab()) {\n\n            @case ('basic') {\n              <!-- Basic Information -->\n              <div class=\"tw-space-y-4\">\n                <!-- First Row: Fee Code (small), Fee Name, Academic Year - Always on one row -->\n                <div class=\"tw-grid\" style=\"grid-template-columns: 170px 1fr 1fr; gap: 1rem;\">\n                  <cide-ele-input label=\"Fee Structure Code\" formControlName=\"fees_structure_code\"\n                    placeholder=\"Auto-generated by API\" size=\"sm\" [disabled]=\"isEditMode()\">\n                  </cide-ele-input>\n\n                  <cide-ele-input label=\"Fee Structure Name\" formControlName=\"fees_structure_name\"\n                    placeholder=\"e.g., Grade 10 Fee Structure 2024-25\" size=\"sm\">\n                  </cide-ele-input>\n\n                  <cide-ele-select \n                    label=\"Academic Year\" \n                    formControlName=\"fees_academic_year_id_acayr\"\n                    [options]=\"getAcademicYearOptions()\"\n                    [loading]=\"academicYearLoading()\"\n                    [disabled]=\"true\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div>\n                  <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n                    placeholder=\"Enter detailed description of the fee structure...\"\n                    rows=\"2\" size=\"sm\">\n                  </cide-ele-textarea>\n                </div>\n\n                <!-- Academic Dropdowns - Using Program Section Selector Component -->\n                \n                <cide-shared-program-section-selector-wrapper\n                  [formGroup]=\"feeStructureForm\"\n                  [classProgramControlName]=\"'fees_class_program_id_acacpm'\"\n                  [branchControlName]=\"'fees_class_program_branch_id_acabrn'\"\n                  [termControlName]=\"'fees_class_program_term_id_acapt'\"\n                  [sectionControlName]=\"'fees_program_term_section_id_acapts'\"\n                  [academicYearId]=\"feeStructureForm.get('fees_academic_year_id_acayr')?.value\"\n                  [entityId]=\"feeStructureForm.get('fees_entity_id_syen')?.value\"\n                  [disabled]=\"isViewMode()\"\n                  [showLabels]=\"true\"\n                  [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\">\n                </cide-shared-program-section-selector-wrapper>\n\n                <!-- Reservation Category Dropdown -->\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mt-4\">\n                  <cide-ele-select \n                    label=\"Reservation Category\" \n                    formControlName=\"fees_student_category_id_sygms\"\n                    [options]=\"studentCategories()\"\n                    [loading]=\"studentCategoriesLoading()\"\n                    placeholder=\"Select reservation category\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                  <cide-ele-input formControlName=\"fees_is_active\" type=\"checkbox\" size=\"sm\">\n                  </cide-ele-input>\n                  <div class=\"tw-flex tw-flex-col\">\n                    <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\n                    <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this fee structure</span>\n                  </div>\n                </div>\n              </div>\n            }\n\n            @case ('items') {\n              <!-- Fee Items Section -->\n              <div class=\"tw-space-y-3\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                  <div>\n                    <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-m-0\">Fee Items</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Configure individual fee items for this structure</p>\n                  </div>\n                  <div class=\"tw-flex tw-items-center tw-gap-3\">\n                    <div class=\"tw-text-right\">\n                      <div class=\"tw-text-xs tw-text-gray-500\">Total Amount</div>\n                      <div class=\"tw-text-base tw-font-bold tw-text-green-600\">{{ formatCurrency(totalAmount()) }}</div>\n                    </div>\n                    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" leftIcon=\"add\"\n                      (click)=\"addFeeItem()\">\n                      Add Fee Item\n                    </button>\n                  </div>\n                </div>\n\n                <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-pr-2\">\n                  @for (item of feeItemsArray.controls; track $index; let itemIndex = $index) {\n                    <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm hover:tw-shadow-md tw-transition-shadow tw-p-3\"\n                      [formGroupName]=\"itemIndex\">\n                      \n                      <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n                        <div class=\"tw-flex tw-items-center tw-gap-2\">\n                          <div class=\"tw-bg-blue-100 tw-p-1.5 tw-rounded\">\n                            <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">receipt</cide-ele-icon>\n                          </div>\n                          <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">Item #{{ itemIndex + 1 }}</h6>\n                        </div>\n                        <div class=\"tw-flex tw-items-center tw-gap-1\">\n                          @if (itemIndex > 0) {\n                            <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n                              (click)=\"moveItemUp(itemIndex)\" title=\"Move Up\">\n                              <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_upward</cide-ele-icon>\n                            </button>\n                          }\n                          @if (itemIndex < feeItemsArray.length - 1) {\n                            <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" \n                              (click)=\"moveItemDown(itemIndex)\" title=\"Move Down\">\n                              <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_downward</cide-ele-icon>\n                            </button>\n                          }\n                          <button cideEleButton type=\"button\" variant=\"danger\" size=\"xs\" leftIcon=\"delete\"\n                            (click)=\"removeFeeItem(itemIndex)\"\n                            [disabled]=\"feeItemsArray.length === 1\">\n                            Remove\n                          </button>\n                        </div>\n                      </div>\n\n                      <!-- Category, Code, Name in one row -->\n                      <div class=\"tw-grid\" style=\"grid-template-columns: 1fr 170px 1fr; gap: 1rem;\">\n                        <cide-ele-select \n                          label=\"Category\" \n                          formControlName=\"feesi_category_id_sygms\"\n                          [options]=\"feeCategoriesOptions()\"\n                          [loading]=\"feeCategoriesLoading()\"\n                          size=\"sm\"\n                          placeholder=\"Select Fee Category\">\n                        </cide-ele-select>\n\n                        <cide-ele-input \n                          label=\"Item Code\" \n                          formControlName=\"feesi_item_code\"\n                          size=\"sm\"\n                          placeholder=\"Auto-filled from category\">\n                        </cide-ele-input>\n\n                        <cide-ele-input \n                          label=\"Item Name\" \n                          formControlName=\"feesi_item_name\"\n                          size=\"sm\"\n                          placeholder=\"Auto-filled from category\">\n                        </cide-ele-input>\n                      </div>\n\n                      <div class=\"tw-mt-2\">\n                        <cide-ele-textarea \n                          label=\"Description\" \n                          formControlName=\"feesi_description\"\n                          rows=\"1\" \n                          size=\"sm\">\n                        </cide-ele-textarea>\n                      </div>\n\n                      <!-- Amount Section -->\n                      <div class=\"tw-mt-2\">\n                        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n                          <cide-ele-input \n                            [label]=\"item.get('feesi_is_amount_editable')?.value ? 'Base Amount (Default)' : 'Amount'\" \n                            formControlName=\"feesi_amount\"\n                            type=\"number\"\n                            size=\"sm\"\n                            [title]=\"item.get('feesi_is_amount_editable')?.value ? 'Default amount used when applying fee. Can be edited per student if editable.' : 'Fixed fee amount'\">\n                          </cide-ele-input>\n                        </div>\n\n                        <!-- Amount Editable Option -->\n                        <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                          <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2\">\n                            <cide-ele-input formControlName=\"feesi_is_amount_editable\" type=\"checkbox\" size=\"sm\">\n                            </cide-ele-input>\n                            <div class=\"tw-flex-1\">\n                              <span class=\"tw-text-xs tw-font-semibold tw-text-blue-900\">Allow Amount to be Edited</span>\n                              <p class=\"tw-text-xs tw-text-blue-700 tw-mt-0.5\">\n                                Enable this for fees that vary per student (e.g., Transport fee based on distance). \n                                When applying fees, you'll be asked to enter the amount within the specified range.\n                              </p>\n                            </div>\n                          </div>\n\n                          <!-- Min/Max Amount Fields (shown when editable is checked) -->\n                          @if (item.get('feesi_is_amount_editable')?.value) {\n                            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                              <cide-ele-input \n                                label=\"Minimum Amount\" \n                                formControlName=\"feesi_min_amount\"\n                                type=\"number\"\n                                size=\"sm\"\n                                placeholder=\"No minimum\"\n                                title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n                              </cide-ele-input>\n\n                              <cide-ele-input \n                                label=\"Maximum Amount\" \n                                formControlName=\"feesi_max_amount\"\n                                type=\"number\"\n                                size=\"sm\"\n                                placeholder=\"No maximum\"\n                                title=\"Maximum amount allowed when editing (leave empty for no maximum)\">\n                              </cide-ele-input>\n                            </div>\n                          }\n                        </div>\n                      </div>\n\n                      <!-- Additional Options -->\n                      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2 tw-mt-2\">\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_mandatory\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Mandatory</span>\n                        </div>\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_refundable\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Refundable</span>\n                        </div>\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_is_installment_allowed\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Installment Allowed</span>\n                        </div>\n                      </div>\n\n                      <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                        @if (item.get('feesi_is_installment_allowed')?.value) {\n                          <cide-ele-input \n                            label=\"Installment Count\" \n                            formControlName=\"feesi_installment_count\"\n                            type=\"number\"\n                            size=\"sm\">\n                          </cide-ele-input>\n                        }\n\n                        <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                          <cide-ele-input formControlName=\"feesi_tax_applicable\" type=\"checkbox\" size=\"sm\">\n                          </cide-ele-input>\n                          <span class=\"tw-text-xs tw-text-gray-700\">Tax Applicable</span>\n                        </div>\n                      </div>\n\n                      @if (item.get('feesi_tax_applicable')?.value) {\n                        <div class=\"tw-mt-2\">\n                          <cide-ele-input \n                            label=\"Tax Percentage\" \n                            formControlName=\"feesi_tax_percentage\"\n                            type=\"number\"\n                            size=\"sm\">\n                          </cide-ele-input>\n                        </div>\n                      }\n\n                      <!-- Installment Details Table -->\n                      <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                        <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                          <div class=\"tw-flex tw-items-center tw-gap-2\">\n                            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">schedule</cide-ele-icon>\n                            <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">\n                              @if (item.get('feesi_is_installment_allowed')?.value) {\n                                Installment Details ({{ item.get('feesi_installment_count')?.value || 1 }} Installments)\n                              } @else {\n                                Payment Details (Single Payment)\n                              }\n                            </h6>\n                          </div>\n                        </div>\n\n                        <div formArrayName=\"installments\" class=\"tw-space-y-3\">\n                          @for (installment of getInstallmentsArray(itemIndex).controls; track $index; let installmentIndex = $index) {\n                            <div class=\"tw-bg-white tw-rounded tw-border tw-border-gray-300 tw-p-3\"\n                              [formGroupName]=\"installmentIndex\">\n                              \n                              <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                                  <div class=\"tw-bg-blue-100 tw-p-1 tw-rounded\">\n                                    <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">payments</cide-ele-icon>\n                                  </div>\n                                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">\n                                    @if (item.get('feesi_is_installment_allowed')?.value) {\n                                      Installment #{{ installment.get('installment_number')?.value }}\n                                    } @else {\n                                      Payment Details\n                                    }\n                                  </h6>\n                                </div>\n                                <div class=\"tw-text-sm tw-font-medium tw-text-green-600\">\n                                  Amount: {{ formatCurrency(installment.get('installment_amount')?.value || 0) }}\n                                </div>\n                              </div>\n\n                              <!-- Installment Amount Distribution -->\n                              @if (item.get('feesi_is_installment_allowed')?.value) {\n                                <div class=\"tw-p-2 tw-bg-yellow-50 tw-rounded tw-border tw-border-yellow-200 tw-mb-2\">\n                                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2\">\n                                    <cide-ele-select \n                                      label=\"Distribution Type\" \n                                      formControlName=\"distribution_type\"\n                                      [options]=\"distributionTypeOptions\"\n                                      size=\"sm\">\n                                    </cide-ele-select>\n\n                                    @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n                                      <cide-ele-input \n                                        label=\"Percentage (%)\" \n                                        formControlName=\"percentage\"\n                                        type=\"number\"\n                                        size=\"sm\"\n                                        title=\"Percentage of total amount for this installment\">\n                                      </cide-ele-input>\n                                      <div class=\"tw-flex tw-flex-col tw-items-end tw-justify-end tw-gap-1\">\n                                        @if (installmentIndex > 0) {\n                                          <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\n                                            Previous: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) }}%\n                                          </div>\n                                        }\n                                        <div class=\"tw-text-xs tw-text-gray-600\">\n                                          Calculated: {{ formatCurrency((item.get('feesi_amount')?.value || 0) * (installment.get('percentage')?.value || 0) / 100) }}\n                                        </div>\n                                        @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex > 0) {\n                                          <div class=\"tw-text-xs tw-font-semibold\" [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\" [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n                                            Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0) }}%\n                                          </div>\n                                        }\n                                      </div>\n                                    }\n\n                                    @if (installment.get('distribution_type')?.value === 'FIXED_AMOUNT') {\n                                      <cide-ele-input \n                                        label=\"Fixed Amount\" \n                                        formControlName=\"fixed_amount\"\n                                        type=\"number\"\n                                        size=\"sm\"\n                                        title=\"Fixed amount for this installment\">\n                                      </cide-ele-input>\n                                    }\n                                  </div>\n                                </div>\n                              }\n\n                              <!-- Due Date Fields -->\n                              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mb-2\">\n                                <cide-ele-input \n                                  label=\"Due Date Offset (Days from Assignment)\" \n                                  formControlName=\"due_date_offset_days\"\n                                  type=\"number\"\n                                  size=\"sm\"\n                                  title=\"Days from assignment date\">\n                                </cide-ele-input>\n\n                                <cide-ele-input \n                                  label=\"Due Date (Fixed Date - Alternative)\" \n                                  formControlName=\"due_date\"\n                                  type=\"date\"\n                                  size=\"sm\"\n                                  title=\"Use fixed date instead of offset\">\n                                </cide-ele-input>\n                              </div>\n\n                              <!-- Collection Window -->\n                              <div class=\"tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n                                <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-2\">\n                                  <cide-ele-icon class=\"tw-text-blue-600 tw-w-3 tw-h-3\">schedule</cide-ele-icon>\n                                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-m-0\">Collection Window</h6>\n                                </div>\n                                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n                                  <cide-ele-input \n                                    label=\"Start Offset (Days from Assignment)\" \n                                    formControlName=\"collection_start_offset_days\"\n                                    type=\"number\"\n                                    size=\"sm\"\n                                    title=\"Days from assignment date when collection can start\">\n                                  </cide-ele-input>\n\n                                  <cide-ele-input \n                                    label=\"End Offset (Days from Assignment)\" \n                                    formControlName=\"collection_end_offset_days\"\n                                    type=\"number\"\n                                    size=\"sm\"\n                                    title=\"Days from assignment date when collection window ends\">\n                                  </cide-ele-input>\n                                </div>\n                                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n                                  <cide-ele-input \n                                    label=\"Start Date (Fixed Date - Alternative)\" \n                                    formControlName=\"collection_start_date\"\n                                    type=\"date\"\n                                    size=\"sm\"\n                                    title=\"Use fixed date instead of offset\">\n                                  </cide-ele-input>\n\n                                  <cide-ele-input \n                                    label=\"End Date (Fixed Date - Alternative)\" \n                                    formControlName=\"collection_end_date\"\n                                    type=\"date\"\n                                    size=\"sm\"\n                                    title=\"Use fixed date instead of offset\">\n                                  </cide-ele-input>\n                                </div>\n                              </div>\n                            </div>\n                          }\n                        </div>\n                      </div>\n                    </div>\n                  }\n                </div>\n\n                @if (feeItemsArray.length === 0) {\n                  <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                    <div class=\"tw-bg-white tw-p-3 tw-rounded-full tw-w-12 tw-h-12 tw-mx-auto tw-mb-3 tw-flex tw-items-center tw-justify-center\">\n                      <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400\">receipt</cide-ele-icon>\n                    </div>\n                    <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-1\">No Fee Items Yet</h6>\n                    <p class=\"tw-text-xs tw-text-gray-500\">Click \"Add Fee Item\" to start adding fee items to this structure.</p>\n                  </div>\n                }\n              </div>\n            }\n          }\n          \n          <!-- Form Validation Errors -->\n          @if (!isViewMode()) {\n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n                [disabled]=\"loading()\">\n                Reset Form\n              </button>\n\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n                [disabled]=\"loading()\">\n                Cancel\n              </button>\n\n              @if (!isInstallmentPercentagesValid()) {\n                <div class=\"tw-w-full tw-mb-3 tw-p-2 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded tw-text-sm\">\n                  <div class=\"tw-flex tw-items-center tw-gap-2 tw-text-red-700\">\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">error</cide-ele-icon>\n                    <span class=\"tw-font-medium\">Validation Error:</span>\n                  </div>\n                  <p class=\"tw-text-red-600 tw-mt-1 tw-ml-6\">\n                    All installment percentages must total exactly 100% before saving. Please adjust the percentages to continue.\n                  </p>\n                </div>\n              }\n              \n              <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n                [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" \n                [loading]=\"submitting()\" \n                leftIcon=\"save\">\n                {{ isEditMode() ? 'Update Fee Structure' : 'Create Fee Structure' }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeStructureCreateComponent, decorators: [{
             type: Component,
@@ -3579,7 +3579,7 @@ class FeeAssignmentCreateComponent {
         this.breadcrumbData.set(additionalItems);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeAssignmentCreateComponent, isStandalone: true, selector: "cide-fee-assignment-create", ngImport: i0, template: "<!-- Fee Assignment Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"assignmentForm\" \n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Form Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          <div class=\"tw-space-y-6\">\n\n            <!-- Student Information -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Student Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <div>\n                  <cide-ele-input \n                    label=\"Student *\" \n                    formControlName=\"student_search\"\n                    placeholder=\"Search student by name or ID...\"\n                    size=\"sm\"\n                    leadingIcon=\"search\">\n                  </cide-ele-input>\n                </div>\n\n                <cide-ele-select \n                  label=\"Academic Year *\" \n                  formControlName=\"feeas_academic_year_id_acayr\"\n                  [options]=\"getAcademicYearOptions()\"\n                  [loading]=\"academicYearLoading()\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-select>\n              </div>\n              \n              <!-- Hidden entity field (populated from app state) -->\n              <input type=\"hidden\" formControlName=\"feeas_entity_id_syen\">\n            </div>\n\n            <!-- Academic Information (for fee structure loading) -->\n            @if (showFeeStructureField()) {\n              <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-pb-2 tw-border-b-2 tw-border-indigo-200 dark:tw-border-indigo-800 tw-mb-4\">\n                  <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-indigo-600 dark:tw-text-indigo-400\">school</cide-ele-icon>\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">Academic Information</h6>\n                </div>\n                \n                <cide-shared-program-section-selector-wrapper\n                  [formGroup]=\"assignmentForm\"\n                  classProgramControlName=\"class_program_id\"\n                  branchControlName=\"branch_id\"\n                  termControlName=\"term_id\"\n                  sectionControlName=\"section_id\"\n                  [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n                  [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n                  [disabled]=\"isViewMode()\"\n                  (valuesChange)=\"onProgramSectionValuesChange($event)\">\n                </cide-shared-program-section-selector-wrapper>\n              </div>\n            }\n\n            <!-- Fee Information -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Fee Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <cide-ele-select \n                  label=\"Fee Source *\" \n                  formControlName=\"fee_source\"\n                  [options]=\"feeSourceOptions\"\n                  size=\"sm\"\n                  leadingIcon=\"source\">\n                </cide-ele-select>\n              </div>\n\n              <!-- Custom Fee Fields -->\n              @if (showCustomFeeFields()) {\n                <div class=\"tw-mt-4 tw-space-y-4\">\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                    <cide-ele-select \n                      label=\"Fee Category *\" \n                      formControlName=\"feeas_fee_category_sygms\"\n                      [options]=\"feeCategoryOptions\"\n                      size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input \n                      label=\"Fee Name *\" \n                      formControlName=\"feeas_fee_name\"\n                      placeholder=\"Enter fee name\"\n                      size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                    <cide-ele-select \n                      label=\"Fee Type *\" \n                      formControlName=\"feeas_fee_type\"\n                      [options]=\"feeTypeOptions\"\n                      size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input \n                      label=\"Amount *\" \n                      formControlName=\"feeas_original_amount\"\n                      type=\"number\"\n                      placeholder=\"0.00\"\n                      size=\"sm\"\n                      leadingIcon=\"currency_rupee\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              }\n            </div>\n\n            <!-- Payment Details -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Payment Details</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <cide-ele-input \n                  label=\"Due Date *\" \n                  formControlName=\"feeas_due_date\"\n                  type=\"date\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Installments\" \n                  formControlName=\"feeas_installment_count\"\n                  type=\"number\"\n                  placeholder=\"1\"\n                  min=\"1\"\n                  max=\"12\"\n                  size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n\n            <!-- Fee Insights (for fee structure) -->\n            @if (showFeeStructureField() && assignmentForm.get('term_id')?.value) {\n              <div class=\"tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-flex tw-items-center tw-gap-2\">\n                    <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-blue-600 dark:tw-text-blue-400\">account_balance</cide-ele-icon>\n                    Fee Insights\n                  </h6>\n                  @if (feesLoading()) {\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading fees...</span>\n                  }\n                </div>\n\n                @if (feesLoading()) {\n                  <div class=\"tw-text-center tw-py-4\">\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading applicable fees...</span>\n                  </div>\n                } @else if (applicableFees().length > 0) {\n                  <div class=\"tw-overflow-x-auto\">\n                    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n                      <thead class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n                        <tr>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Fee Name</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Category</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Original Amount</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Discount</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Scholarship</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Final Amount</th>\n                        </tr>\n                      </thead>\n                      <tbody class=\"tw-bg-white dark:tw-bg-gray-800 tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n                        @for (fee of applicableFees(); track getFeeId(fee)) {\n                          <tr>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100\">{{ getFeeName(fee) }}</td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400\">{{ getFeeCategory(fee) }}</td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">{{ formatCurrency(getFeeAmount(fee)) }}</td>\n                            <td class=\"tw-px-4 tw-py-2\">\n                              <cide-ele-input\n                                type=\"number\"\n                                [formControl]=\"getDiscountControl(getFeeId(fee))\"\n                                placeholder=\"0.00\"\n                                size=\"sm\"\n                                class=\"tw-w-24\"\n                                [disabled]=\"isViewMode()\">\n                              </cide-ele-input>\n                            </td>\n                            <td class=\"tw-px-4 tw-py-2\">\n                              <cide-ele-input\n                                type=\"number\"\n                                [formControl]=\"getScholarshipControl(getFeeId(fee))\"\n                                placeholder=\"0.00\"\n                                size=\"sm\"\n                                class=\"tw-w-24\"\n                                [disabled]=\"isViewMode()\">\n                              </cide-ele-input>\n                            </td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n                              {{ formatCurrency(calculateFinalAmount(fee)) }}\n                            </td>\n                          </tr>\n                        }\n                      </tbody>\n                      <tfoot class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n                        <tr>\n                          <td colspan=\"2\" class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">Total:</td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n                            {{ formatCurrency(totalOriginalAmount()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-text-right\">\n                            {{ formatCurrency(totalDiscount()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-purple-600 dark:tw-text-purple-400 tw-text-right\">\n                            {{ formatCurrency(totalScholarship()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 dark:tw-text-green-400 tw-text-right\">\n                            {{ formatCurrency(totalFinalAmount()) }}\n                          </td>\n                        </tr>\n                      </tfoot>\n                    </table>\n                  </div>\n                } @else {\n                  <div class=\"tw-text-center tw-py-4 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">\n                    No fee structure found for the selected program/term. Please select a program and term to view applicable fees.\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Discounts & Scholarships (for custom fees) -->\n            @if (showCustomFeeFields()) {\n              <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Discounts & Scholarships</h6>\n                \n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                  <cide-ele-input \n                    label=\"Discount Amount\" \n                    formControlName=\"feeas_discount_amount\"\n                    type=\"number\"\n                    placeholder=\"0.00\"\n                    min=\"0\"\n                    size=\"sm\"\n                    leadingIcon=\"percent\">\n                  </cide-ele-input>\n\n                  <cide-ele-input \n                    label=\"Scholarship Amount\" \n                    formControlName=\"feeas_scholarship_amount\"\n                    type=\"number\"\n                    placeholder=\"0.00\"\n                    min=\"0\"\n                    size=\"sm\"\n                    leadingIcon=\"school\">\n                  </cide-ele-input>\n                </div>\n              </div>\n\n              <!-- Amount Summary (for custom fees) -->\n              <div class=\"tw-bg-gradient-to-r tw-from-blue-50 dark:tw-from-blue-900/20 tw-to-indigo-50 dark:tw-to-indigo-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-blue-900 dark:tw-text-blue-100 tw-mb-3\">Amount Summary</h6>\n                \n                <div class=\"tw-space-y-2\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Original Amount:</span>\n                    <span class=\"tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Discount:</span>\n                    <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_discount_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Scholarship:</span>\n                    <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_scholarship_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-t-2 tw-border-blue-300 dark:tw-border-blue-700 tw-mt-2\">\n                    <span class=\"tw-text-base tw-font-bold tw-text-blue-900 dark:tw-text-blue-100\">Total Amount:</span>\n                    <span class=\"tw-text-xl tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ formatCurrency(totalAmount()) }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n\n            <!-- Remarks -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <cide-ele-textarea \n                label=\"Remarks\" \n                formControlName=\"feeas_remarks\"\n                placeholder=\"Enter any additional remarks...\"\n                rows=\"2\" \n                size=\"sm\">\n              </cide-ele-textarea>\n            </div>\n\n          </div>\n\n          <!-- Form Validation Errors -->\n          @if (!isViewMode()) {\n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n                [disabled]=\"loading()\">\n                Reset Form\n              </button>\n\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n                [disabled]=\"loading()\">\n                Cancel\n              </button>\n\n              <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n                [disabled]=\"submitting() || assignmentForm.invalid || loading()\" \n                [loading]=\"submitting()\" \n                leftIcon=\"save\">\n                {{ isEditMode() ? 'Update Assignment' : 'Assign Fee' }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeAssignmentCreateComponent, isStandalone: true, selector: "cide-fee-assignment-create", ngImport: i0, template: "<!-- Fee Assignment Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n  [breadcrumb_data]=\"breadcrumbData()\">\n  <div class=\"tw-w-full tw-h-full\">\n    <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"assignmentForm\" \n      [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n    <!-- Form Content -->\n    <div class=\"tw-table-row\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          <div class=\"tw-space-y-6\">\n\n            <!-- Student Information -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Student Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <div>\n                  <cide-ele-input \n                    label=\"Student *\" \n                    formControlName=\"student_search\"\n                    placeholder=\"Search student by name or ID...\"\n                    size=\"sm\"\n                    leadingIcon=\"search\">\n                  </cide-ele-input>\n                </div>\n\n                <cide-ele-select \n                  label=\"Academic Year *\" \n                  formControlName=\"feeas_academic_year_id_acayr\"\n                  [options]=\"getAcademicYearOptions()\"\n                  [loading]=\"academicYearLoading()\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-select>\n              </div>\n              \n              <!-- Hidden entity field (populated from app state) -->\n              <input type=\"hidden\" formControlName=\"feeas_entity_id_syen\">\n            </div>\n\n            <!-- Academic Information (for fee structure loading) -->\n            @if (showFeeStructureField()) {\n              <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-pb-2 tw-border-b-2 tw-border-indigo-200 dark:tw-border-indigo-800 tw-mb-4\">\n                  <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-indigo-600 dark:tw-text-indigo-400\">school</cide-ele-icon>\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">Academic Information</h6>\n                </div>\n                \n                <cide-shared-program-section-selector-wrapper\n                  [formGroup]=\"assignmentForm\"\n                  classProgramControlName=\"class_program_id\"\n                  branchControlName=\"branch_id\"\n                  termControlName=\"term_id\"\n                  sectionControlName=\"section_id\"\n                  [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n                  [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n                  [disabled]=\"isViewMode()\"\n                  (valuesChange)=\"onProgramSectionValuesChange($event)\">\n                </cide-shared-program-section-selector-wrapper>\n              </div>\n            }\n\n            <!-- Fee Information -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Fee Information</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <cide-ele-select \n                  label=\"Fee Source *\" \n                  formControlName=\"fee_source\"\n                  [options]=\"feeSourceOptions\"\n                  size=\"sm\"\n                  leadingIcon=\"source\">\n                </cide-ele-select>\n              </div>\n\n              <!-- Custom Fee Fields -->\n              @if (showCustomFeeFields()) {\n                <div class=\"tw-mt-4 tw-space-y-4\">\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                    <cide-ele-select \n                      label=\"Fee Category *\" \n                      formControlName=\"feeas_fee_category_sygms\"\n                      [options]=\"feeCategoryOptions\"\n                      size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input \n                      label=\"Fee Name *\" \n                      formControlName=\"feeas_fee_name\"\n                      placeholder=\"Enter fee name\"\n                      size=\"sm\">\n                    </cide-ele-input>\n                  </div>\n\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                    <cide-ele-select \n                      label=\"Fee Type *\" \n                      formControlName=\"feeas_fee_type\"\n                      [options]=\"feeTypeOptions\"\n                      size=\"sm\">\n                    </cide-ele-select>\n\n                    <cide-ele-input \n                      label=\"Amount *\" \n                      formControlName=\"feeas_original_amount\"\n                      type=\"number\"\n                      placeholder=\"0.00\"\n                      size=\"sm\"\n                      leadingIcon=\"currency_rupee\">\n                    </cide-ele-input>\n                  </div>\n                </div>\n              }\n            </div>\n\n            <!-- Payment Details -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Payment Details</h6>\n              \n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                <cide-ele-input \n                  label=\"Due Date *\" \n                  formControlName=\"feeas_due_date\"\n                  type=\"date\"\n                  size=\"sm\"\n                  leadingIcon=\"calendar_today\">\n                </cide-ele-input>\n\n                <cide-ele-input \n                  label=\"Installments\" \n                  formControlName=\"feeas_installment_count\"\n                  type=\"number\"\n                  placeholder=\"1\"\n                  min=\"1\"\n                  max=\"12\"\n                  size=\"sm\">\n                </cide-ele-input>\n              </div>\n            </div>\n\n            <!-- Fee Insights (for fee structure) -->\n            @if (showFeeStructureField() && assignmentForm.get('term_id')?.value) {\n              <div class=\"tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-flex tw-items-center tw-gap-2\">\n                    <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-blue-600 dark:tw-text-blue-400\">account_balance</cide-ele-icon>\n                    Fee Insights\n                  </h6>\n                  @if (feesLoading()) {\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading fees...</span>\n                  }\n                </div>\n\n                @if (feesLoading()) {\n                  <div class=\"tw-text-center tw-py-4\">\n                    <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading applicable fees...</span>\n                  </div>\n                } @else if (applicableFees().length > 0) {\n                  <div class=\"tw-overflow-x-auto\">\n                    <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n                      <thead class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n                        <tr>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Fee Name</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Category</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Original Amount</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Discount</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Scholarship</th>\n                          <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Final Amount</th>\n                        </tr>\n                      </thead>\n                      <tbody class=\"tw-bg-white dark:tw-bg-gray-800 tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n                        @for (fee of applicableFees(); track getFeeId(fee)) {\n                          <tr>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100\">{{ getFeeName(fee) }}</td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400\">{{ getFeeCategory(fee) }}</td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">{{ formatCurrency(getFeeAmount(fee)) }}</td>\n                            <td class=\"tw-px-4 tw-py-2\">\n                              <cide-ele-input\n                                type=\"number\"\n                                [formControl]=\"getDiscountControl(getFeeId(fee))\"\n                                placeholder=\"0.00\"\n                                size=\"sm\"\n                                class=\"tw-w-24\"\n                                [disabled]=\"isViewMode()\">\n                              </cide-ele-input>\n                            </td>\n                            <td class=\"tw-px-4 tw-py-2\">\n                              <cide-ele-input\n                                type=\"number\"\n                                [formControl]=\"getScholarshipControl(getFeeId(fee))\"\n                                placeholder=\"0.00\"\n                                size=\"sm\"\n                                class=\"tw-w-24\"\n                                [disabled]=\"isViewMode()\">\n                              </cide-ele-input>\n                            </td>\n                            <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n                              {{ formatCurrency(calculateFinalAmount(fee)) }}\n                            </td>\n                          </tr>\n                        }\n                      </tbody>\n                      <tfoot class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n                        <tr>\n                          <td colspan=\"2\" class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">Total:</td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n                            {{ formatCurrency(totalOriginalAmount()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-text-right\">\n                            {{ formatCurrency(totalDiscount()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-purple-600 dark:tw-text-purple-400 tw-text-right\">\n                            {{ formatCurrency(totalScholarship()) }}\n                          </td>\n                          <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 dark:tw-text-green-400 tw-text-right\">\n                            {{ formatCurrency(totalFinalAmount()) }}\n                          </td>\n                        </tr>\n                      </tfoot>\n                    </table>\n                  </div>\n                } @else {\n                  <div class=\"tw-text-center tw-py-4 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">\n                    No fee structure found for the selected program/term. Please select a program and term to view applicable fees.\n                  </div>\n                }\n              </div>\n            }\n\n            <!-- Discounts & Scholarships (for custom fees) -->\n            @if (showCustomFeeFields()) {\n              <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Discounts & Scholarships</h6>\n                \n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n                  <cide-ele-input \n                    label=\"Discount Amount\" \n                    formControlName=\"feeas_discount_amount\"\n                    type=\"number\"\n                    placeholder=\"0.00\"\n                    min=\"0\"\n                    size=\"sm\"\n                    leadingIcon=\"percent\">\n                  </cide-ele-input>\n\n                  <cide-ele-input \n                    label=\"Scholarship Amount\" \n                    formControlName=\"feeas_scholarship_amount\"\n                    type=\"number\"\n                    placeholder=\"0.00\"\n                    min=\"0\"\n                    size=\"sm\"\n                    leadingIcon=\"school\">\n                  </cide-ele-input>\n                </div>\n              </div>\n\n              <!-- Amount Summary (for custom fees) -->\n              <div class=\"tw-bg-gradient-to-r tw-from-blue-50 dark:tw-from-blue-900/20 tw-to-indigo-50 dark:tw-to-indigo-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-blue-900 dark:tw-text-blue-100 tw-mb-3\">Amount Summary</h6>\n                \n                <div class=\"tw-space-y-2\">\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Original Amount:</span>\n                    <span class=\"tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Discount:</span>\n                    <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_discount_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n                    <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Scholarship:</span>\n                    <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_scholarship_amount')?.value || 0) }}</span>\n                  </div>\n                  \n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-t-2 tw-border-blue-300 dark:tw-border-blue-700 tw-mt-2\">\n                    <span class=\"tw-text-base tw-font-bold tw-text-blue-900 dark:tw-text-blue-100\">Total Amount:</span>\n                    <span class=\"tw-text-xl tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ formatCurrency(totalAmount()) }}</span>\n                  </div>\n                </div>\n              </div>\n            }\n\n            <!-- Remarks -->\n            <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n              <cide-ele-textarea \n                label=\"Remarks\" \n                formControlName=\"feeas_remarks\"\n                placeholder=\"Enter any additional remarks...\"\n                rows=\"2\" \n                size=\"sm\">\n              </cide-ele-textarea>\n            </div>\n\n          </div>\n\n          <!-- Form Validation Errors -->\n          @if (!isViewMode()) {\n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n                [disabled]=\"loading()\">\n                Reset Form\n              </button>\n\n              <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n                [disabled]=\"loading()\">\n                Cancel\n              </button>\n\n              <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n                [disabled]=\"submitting() || assignmentForm.invalid || loading()\" \n                [loading]=\"submitting()\" \n                leftIcon=\"save\">\n                {{ isEditMode() ? 'Update Assignment' : 'Assign Fee' }}\n              </button>\n            </div>\n          }\n        </div>\n      </div>\n    </div>\n  </form>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentCreateComponent, decorators: [{
             type: Component,
@@ -4416,7 +4416,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", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeePaymentProcessComponent, isStandalone: true, selector: "cide-fee-payment-process", ngImport: i0, template: "<!-- Payment Process Form -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"paymentForm\" \r\n    [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <!-- Header Section -->\r\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n          \r\n          <!-- Title -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Record Payment</h5>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n            <!-- Back button or other actions can be added here if needed -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\r\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n          <div class=\"tw-space-y-4\">\r\n\r\n            <!-- Student Information -->\r\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n              <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Student Information</h6>\r\n              \r\n              <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n                <div>\r\n                  <cide-ele-input \r\n                    label=\"Search Student *\" \r\n                    formControlName=\"student_search\"\r\n                    placeholder=\"Enter student name or ID...\"\r\n                    size=\"sm\"\r\n                    leadingIcon=\"search\"\r\n                    (ngModelChange)=\"onStudentSearch($event)\">\r\n                  </cide-ele-input>\r\n                  \r\n                  @if (selectedStudent()) {\r\n                    <div class=\"tw-mt-2 tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded\">\r\n                      <div class=\"tw-text-sm tw-font-medium tw-text-green-900\">{{ selectedStudent()?.name }}</div>\r\n                      <div class=\"tw-text-xs tw-text-green-700\">ID: {{ selectedStudent()?.student_id }}</div>\r\n                      @if (selectedStudent()?.class) {\r\n                        <div class=\"tw-text-xs tw-text-green-600\">{{ selectedStudent()?.class }} / {{ selectedStudent()?.section }}</div>\r\n                      }\r\n                    </div>\r\n                  }\r\n                </div>\r\n\r\n                <cide-ele-input \r\n                  label=\"Payment Date *\" \r\n                  formControlName=\"feepay_payment_date\"\r\n                  type=\"date\"\r\n                  size=\"sm\"\r\n                  leadingIcon=\"calendar_today\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Fee Selection -->\r\n            @if (selectedStudent() && outstandingFees().length > 0) {\r\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n                <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n                  <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">Select Fees to Pay</h6>\r\n                  <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n                    <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                      <cide-ele-input \r\n                        formControlName=\"pay_full_outstanding\" \r\n                        type=\"checkbox\" \r\n                        size=\"sm\"\r\n                        (change)=\"togglePayFullOutstanding()\">\r\n                      </cide-ele-input>\r\n                      <span class=\"tw-text-sm tw-text-gray-700\">Pay full outstanding</span>\r\n                    </div>\r\n                    <button cideEleButton type=\"button\" variant=\"success\" size=\"xs\" (click)=\"selectAllFees()\">\r\n                      Select All\r\n                    </button>\r\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"clearAllFees()\">\r\n                      Clear\r\n                    </button>\r\n                  </div>\r\n                </div>\r\n\r\n                <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-max-h-80 tw-overflow-y-auto tw-border tw-border-gray-200 tw-rounded-lg tw-p-3\">\r\n                  @for (item of feeItemsArray.controls; track $index) {\r\n                    <div class=\"tw-flex tw-items-center tw-justify-between tw-p-2 tw-bg-gray-50 tw-rounded tw-border tw-border-gray-200\"\r\n                      [formGroupName]=\"$index\">\r\n                      \r\n                      <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1\">\r\n                        <cide-ele-input \r\n                          formControlName=\"is_selected\" \r\n                          type=\"checkbox\" \r\n                          size=\"sm\"\r\n                          (change)=\"toggleFeeItem($index)\">\r\n                        </cide-ele-input>\r\n                        \r\n                        <div class=\"tw-flex-1\">\r\n                          <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\r\n                            {{ item.get('fee_head')?.value }}\r\n                          </div>\r\n                          <div class=\"tw-text-xs tw-text-gray-500\">\r\n                            Outstanding: {{ formatCurrency(item.get('outstanding_amount')?.value || 0) }}\r\n                            @if (item.get('late_fee')?.value > 0) {\r\n                              <span class=\"tw-text-red-600\"> | Late Fee: {{ formatCurrency(item.get('late_fee')?.value) }}</span>\r\n                            }\r\n                          </div>\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n                        <cide-ele-input \r\n                          formControlName=\"amount_paid\"\r\n                          type=\"number\"\r\n                          placeholder=\"0.00\"\r\n                          size=\"sm\"\r\n                          [disabled]=\"!item.get('is_selected')?.value\"\r\n                          (ngModelChange)=\"onAmountChange($index, $event)\"\r\n                          class=\"tw-w-28\">\r\n                        </cide-ele-input>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n                </div>\r\n              </div>\r\n            }\r\n\r\n            <!-- Payment Details -->\r\n            @if (selectedStudent()) {\r\n              <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Payment Details</h6>\r\n                \r\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n                  <cide-ele-select \r\n                    label=\"Payment Method *\" \r\n                    formControlName=\"feepay_payment_method\"\r\n                    [options]=\"paymentMethodOptions\"\r\n                    size=\"sm\"\r\n                    leadingIcon=\"payment\">\r\n                  </cide-ele-select>\r\n\r\n                  <cide-ele-select \r\n                    label=\"Payment Mode *\" \r\n                    formControlName=\"feepay_payment_mode\"\r\n                    [options]=\"[{value: 'OFFLINE', label: 'Offline'}, {value: 'ONLINE', label: 'Online'}]\"\r\n                    size=\"sm\">\r\n                  </cide-ele-select>\r\n                </div>\r\n\r\n                <!-- Cheque/DD Details -->\r\n                @if (showChequeDetails()) {\r\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\r\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-mb-3\">Cheque/DD Details</h6>\r\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                      <cide-ele-input \r\n                        label=\"Cheque/DD Number *\" \r\n                        formControlName=\"feepay_cheque_number\"\r\n                        placeholder=\"Enter cheque/DD number\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n\r\n                      <cide-ele-input \r\n                        label=\"Cheque/DD Date *\" \r\n                        formControlName=\"feepay_cheque_date\"\r\n                        type=\"date\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"Bank Name *\" \r\n                        formControlName=\"feepay_bank_name\"\r\n                        placeholder=\"Enter bank name\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n\r\n                      <cide-ele-input \r\n                        label=\"Branch Name *\" \r\n                        formControlName=\"feepay_bank_branch_name\"\r\n                        placeholder=\"Enter branch name\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"IFSC Code *\" \r\n                        formControlName=\"feepay_bank_ifsc_code\"\r\n                        placeholder=\"Enter IFSC code\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"Instrument Date *\" \r\n                        formControlName=\"feepay_instrument_date\"\r\n                        type=\"date\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Bank Transfer Details -->\r\n                @if (showBankDetails()) {\r\n                  <div class=\"tw-mt-4 tw-p-3 tw-bg-green-50 tw-rounded tw-border tw-border-green-200\">\r\n                    <h6 class=\"tw-text-xs tw-font-semibold tw-text-green-900 tw-mb-3\">Bank Transfer Details</h6>\r\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                      <cide-ele-input \r\n                        label=\"Bank Name\" \r\n                        formControlName=\"feepay_bank_name\"\r\n                        placeholder=\"Enter bank name\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n\r\n                      <cide-ele-input \r\n                        label=\"Branch Name\" \r\n                        formControlName=\"feepay_bank_branch_name\"\r\n                        placeholder=\"Enter branch name\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"IFSC Code\" \r\n                        formControlName=\"feepay_bank_ifsc_code\"\r\n                        placeholder=\"Enter IFSC code\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n\r\n                      <cide-ele-input \r\n                        label=\"Account Number\" \r\n                        formControlName=\"feepay_bank_account_number\"\r\n                        placeholder=\"Enter account number\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                    <div class=\"tw-mt-3\">\r\n                      <cide-ele-input \r\n                        label=\"Transaction Reference *\" \r\n                        formControlName=\"feepay_transaction_reference\"\r\n                        placeholder=\"Enter transaction reference\"\r\n                        size=\"sm\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                  </div>\r\n                }\r\n\r\n                <!-- Discount Section -->\r\n                <div class=\"tw-mt-4 tw-p-3 tw-bg-purple-50 tw-rounded tw-border tw-border-purple-200\">\r\n                  <h6 class=\"tw-text-xs tw-font-semibold tw-text-purple-900 tw-mb-3\">Discount Information</h6>\r\n                  <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n                    <cide-ele-input \r\n                      label=\"Discount (%)\" \r\n                      formControlName=\"feepay_discount_percentage\"\r\n                      type=\"number\"\r\n                      placeholder=\"0\"\r\n                      size=\"sm\"\r\n                      [min]=\"0\"\r\n                      [max]=\"100\">\r\n                    </cide-ele-input>\r\n\r\n                    <cide-ele-select \r\n                      label=\"Discount On\" \r\n                      formControlName=\"feepay_discount_on\"\r\n                      [options]=\"[{value: 'SUB_TOTAL', label: 'Sub Total'}, {value: 'FEE_HEAD', label: 'Fee Head'}, {value: 'TOTAL', label: 'Total'}, {value: 'INSTALLMENT', label: 'Installment'}]\"\r\n                      size=\"sm\">\r\n                    </cide-ele-select>\r\n                  </div>\r\n                  <div class=\"tw-mt-3\">\r\n                    <cide-ele-textarea \r\n                      label=\"Discount Reason\" \r\n                      formControlName=\"feepay_discount_reason\"\r\n                      placeholder=\"Enter reason for discount...\"\r\n                      rows=\"2\"\r\n                      size=\"sm\">\r\n                    </cide-ele-textarea>\r\n                  </div>\r\n                </div>\r\n\r\n                <!-- Payment Reference -->\r\n                <div class=\"tw-mt-4\">\r\n                  <cide-ele-input \r\n                    label=\"Payment Reference\" \r\n                    formControlName=\"feepay_payment_reference\"\r\n                    placeholder=\"Enter payment reference number\"\r\n                    size=\"sm\"\r\n                    leadingIcon=\"receipt\">\r\n                  </cide-ele-input>\r\n                </div>\r\n\r\n                <!-- Remarks -->\r\n                <div class=\"tw-mt-4\">\r\n                  <cide-ele-textarea \r\n                    label=\"Remarks\" \r\n                    formControlName=\"feepay_remarks\"\r\n                    placeholder=\"Enter any additional remarks...\"\r\n                    rows=\"2\" \r\n                    size=\"sm\">\r\n                  </cide-ele-textarea>\r\n                </div>\r\n              </div>\r\n            }\r\n\r\n            <!-- Payment Summary -->\r\n            @if (selectedStudent() && selectedFeeItems().length > 0) {\r\n              <div class=\"tw-bg-gradient-to-r tw-from-green-50 tw-to-emerald-50 tw-rounded-lg tw-border tw-border-green-200 tw-p-4\">\r\n                <h6 class=\"tw-text-base tw-font-semibold tw-text-green-900 tw-mb-3\">Payment Summary</h6>\r\n                \r\n                <div class=\"tw-space-y-3\">\r\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n                    <span class=\"tw-text-gray-700\">Fee Amount:</span>\r\n                    <span class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n                  </div>\r\n                  \r\n                  @if (totalLateFee() > 0) {\r\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n                      <span class=\"tw-text-gray-700\">Late Fee Amount:</span>\r\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalLateFee()) }}</span>\r\n                    </div>\r\n                  }\r\n                  \r\n                  @if (totalPenalty() > 0) {\r\n                    <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n                      <span class=\"tw-text-gray-700\">Penalty Amount:</span>\r\n                      <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalPenalty()) }}</span>\r\n                    </div>\r\n                  }\r\n                  \r\n                  <div class=\"tw-flex tw-justify-between tw-items-center tw-py-3 tw-border-t-2 tw-border-green-300 tw-mt-2\">\r\n                    <span class=\"tw-text-lg tw-font-bold tw-text-green-900\">Total Payable:</span>\r\n                    <span class=\"tw-text-2xl tw-font-bold tw-text-green-700\">{{ formatCurrency(totalPayable()) }}</span>\r\n                  </div>\r\n                </div>\r\n              </div>\r\n            }\r\n          </div>\r\n\r\n          <!-- Form Validation Errors -->\r\n          <!-- Action Buttons -->\r\n          <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\r\n              [disabled]=\"loading()\">\r\n              Cancel\r\n            </button>\r\n\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \r\n              [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\" \r\n              [loading]=\"submitting()\" \r\n              leftIcon=\"save\">\r\n              {{ submitting() ? 'Processing...' : 'Record Payment' }}\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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,
@@ -5385,6 +5385,7 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
     confirmationService = inject(ConfirmationService);
     destroyRef = inject(DestroyRef);
     receiptTemplateService = inject(ReceiptTemplateService);
+    cdr = inject(ChangeDetectorRef);
     htmlEditorRef;
     templateForm = this.fb.group({
         template_name: ['', Validators.required],
@@ -5598,11 +5599,14 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
         this.setupFormListeners();
     }
     setupFormListeners() {
-        // Listen to tag search changes
+        // Listen to tag search changes with debounce for better performance
         this.templateForm.get('tag_search')?.valueChanges
             .pipe(takeUntilDestroyed(this.destroyRef))
             .subscribe((query) => {
-            this.onTagSearch(query || '');
+            const searchQuery = query || '';
+            this.onTagSearch(searchQuery);
+            // Also update the signal directly to ensure computed signal updates
+            this.tagSearchQuery.set(searchQuery);
         });
     }
     ngOnDestroy() {
@@ -5613,7 +5617,7 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
         let textarea = this.htmlEditorRef?.nativeElement;
         // If ViewChild is not available, try to find it in the DOM
         if (!textarea) {
-            const textareaElement = document.querySelector('textarea[formControlName="template_html"]');
+            const textareaElement = document.querySelector('.template-html-editor');
             if (textareaElement) {
                 textarea = textareaElement;
             }
@@ -6157,6 +6161,7 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
                 if (response.success && response.data) {
                     const template = response.data;
                     this.currentTemplateId.set(template._id || null);
+                    // Use setValue to ensure all form controls are updated
                     this.templateForm.patchValue({
                         template_name: template.feert_template_name || '',
                         template_code: template.feert_template_code || '',
@@ -6165,7 +6170,17 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
                         is_default: template.feert_is_default || false,
                         template_html: template.feert_template_html || '',
                         css_styles: '' // Add CSS field if needed
-                    });
+                    }, { emitEvent: true });
+                    // Force change detection to update the textarea
+                    this.cdr.detectChanges();
+                    // Scroll to top of textarea after a brief delay to ensure it's rendered
+                    setTimeout(() => {
+                        const textarea = this.htmlEditorRef?.nativeElement || document.querySelector('.template-html-editor');
+                        if (textarea) {
+                            textarea.focus();
+                            textarea.scrollTop = 0;
+                        }
+                    }, 100);
                     this.notificationService.success('Template loaded successfully!');
                 }
                 else {
@@ -6181,7 +6196,7 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TemplateDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TemplateDesignerComponent, isStandalone: true, selector: "cide-receipt-template-designer", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "htmlEditorRef", first: true, predicate: ["htmlEditor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions>\n    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n      Load Template\n    </button>\n    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n      [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n      Save Template\n    </button>\n  </div>\n\n  <!-- Main Content - Three Column Layout -->\n  <div class=\"tw-w-full tw-h-full tw-p-4\">\n    <div class=\"tw-grid tw-grid-cols-12 tw-gap-4 tw-h-full\">\n          \n          <!-- Left Sidebar - Tag Categories & Tags -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n            <!-- Tag Categories Header -->\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n              <cide-ele-input\n                formControlName=\"tag_search\"\n                placeholder=\"Search tags...\"\n                size=\"sm\"\n                leadingIcon=\"search\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Category Tabs -->\n            <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n              @for (category of tagCategories; track category.id) {\n                <button\n                  type=\"button\"\n                  class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n                  [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n                  [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n                  [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n                  [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n                  (click)=\"onCategoryChange(category.id)\"\n                  [title]=\"category.name\">\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n                  <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n                </button>\n              }\n            </div>\n\n            <!-- Tags List -->\n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2\">\n              @if (filteredTags().length > 0) {\n                <div class=\"tw-space-y-1\">\n                  @for (tag of filteredTags(); track tag.code) {\n                    <button\n                      type=\"button\"\n                      class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n                      (click)=\"insertTag(tag)\"\n                      [title]=\"tag.description\">\n                      <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                        <div class=\"tw-flex-1 tw-min-w-0\">\n                          <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n                            {{ tag.code }}\n                          </code>\n                          <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n                          @if (tag.example) {\n                            <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n                          }\n                        </div>\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n                      </div>\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                  <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n                  <p class=\"tw-text-xs\">No tags found</p>\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Middle Column - HTML Editor -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden\">\n            <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n              \n              <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-input\n                    label=\"Template Name *\"\n                    formControlName=\"template_name\"\n                    placeholder=\"e.g., Standard Receipt\"\n                    size=\"sm\">\n                  </cide-ele-input>\n\n                  <cide-ele-input\n                    label=\"Template Code *\"\n                    formControlName=\"template_code\"\n                    placeholder=\"e.g., STD_RECEIPT_01\"\n                    size=\"sm\">\n                  </cide-ele-input>\n                </div>\n\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-select\n                    label=\"Template Type *\"\n                    formControlName=\"template_type\"\n                    [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n\n                  <cide-ele-select\n                    label=\"Template For\"\n                    formControlName=\"template_for\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                  <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n                  <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n                </div>\n              </form>\n            </div>\n\n            <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden\">\n              <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                  <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n                  <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert</span>\n                </div>\n              </div>\n              <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden\">\n                <cide-ele-textarea\n                  #htmlEditor\n                  formControlName=\"template_html\"\n                  placeholder=\"Enter HTML template code here... Use tags from the left sidebar.\"\n                  rows=\"20\"\n                  size=\"sm\"\n                  class=\"tw-h-full tw-font-mono tw-text-xs\">\n                </cide-ele-textarea>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right Column - Live Preview -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden\">\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <div class=\"tw-flex tw-items-center tw-justify-between\">\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <cide-ele-select\n                    formControlName=\"preview_type\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n                    size=\"xs\"\n                    class=\"tw-w-24\">\n                  </cide-ele-select>\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n                </div>\n              </div>\n            </div>\n            \n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50\">\n              <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4 tw-min-h-full\" [innerHTML]=\"previewHtml()\"></div>\n            </div>\n          </div>\n\n        </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host ::ng-deep textarea[formControlName=template_html]{height:100%!important;resize:none;font-family:Courier New,Monaco,Consolas,monospace;font-size:12px;line-height:1.5}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TemplateDesignerComponent, isStandalone: true, selector: "cide-receipt-template-designer", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "htmlEditorRef", first: true, predicate: ["htmlEditor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions>\n    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n      Load Template\n    </button>\n    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n      [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n      Save Template\n    </button>\n  </div>\n\n  <!-- Main Content - Three Column Layout -->\n  <div class=\"tw-w-full tw-h-full tw-overflow-hidden\" style=\"height: calc(100vh - 80px); max-width: 100vw;\">\n    <div class=\"tw-grid tw-grid-cols-12 tw-gap-3 tw-h-full tw-min-h-0 tw-p-3\">\n          \n          <!-- Left Sidebar - Tag Categories & Tags -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col tw-min-w-0\">\n            <!-- Tag Categories Header -->\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n              <form [formGroup]=\"templateForm\">\n                <cide-ele-input\n                  formControlName=\"tag_search\"\n                  placeholder=\"Search tags...\"\n                  size=\"sm\"\n                  leadingIcon=\"search\">\n                </cide-ele-input>\n              </form>\n            </div>\n\n            <!-- Category Tabs -->\n            <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n              @for (category of tagCategories; track category.id) {\n                <button\n                  type=\"button\"\n                  class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n                  [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n                  [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n                  [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n                  [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n                  (click)=\"onCategoryChange(category.id)\"\n                  [title]=\"category.name\">\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n                  <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n                </button>\n              }\n            </div>\n\n            <!-- Tags List -->\n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2\">\n              @if (filteredTags().length > 0) {\n                <div class=\"tw-space-y-1\">\n                  @for (tag of filteredTags(); track tag.code) {\n                    <button\n                      type=\"button\"\n                      class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n                      (click)=\"insertTag(tag)\"\n                      [title]=\"tag.description\">\n                      <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                        <div class=\"tw-flex-1 tw-min-w-0\">\n                          <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n                            {{ tag.code }}\n                          </code>\n                          <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n                          @if (tag.example) {\n                            <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n                          }\n                        </div>\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n                      </div>\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                  <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n                  <p class=\"tw-text-xs\">No tags found</p>\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Middle Column - HTML Editor -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-min-w-0\">\n            <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n              \n              <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-input\n                    label=\"Template Name *\"\n                    formControlName=\"template_name\"\n                    placeholder=\"e.g., Standard Receipt\"\n                    size=\"sm\">\n                  </cide-ele-input>\n\n                  <cide-ele-input\n                    label=\"Template Code *\"\n                    formControlName=\"template_code\"\n                    placeholder=\"e.g., STD_RECEIPT_01\"\n                    size=\"sm\">\n                  </cide-ele-input>\n                </div>\n\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-select\n                    label=\"Template Type *\"\n                    formControlName=\"template_type\"\n                    [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n\n                  <cide-ele-select\n                    label=\"Template For\"\n                    formControlName=\"template_for\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                  <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n                  <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n                </div>\n              </form>\n            </div>\n\n            <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0\">\n              <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                  <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n                  <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert or paste HTML here</span>\n                </div>\n              </div>\n              <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden tw-min-h-0\">\n                <form [formGroup]=\"templateForm\">\n                  <textarea\n                    #htmlEditor\n                    formControlName=\"template_html\"\n                    placeholder=\"Enter HTML template code here... Use tags from the left sidebar or paste your HTML design.\"\n                    class=\"template-html-editor tw-w-full tw-h-full tw-p-3 tw-border tw-border-gray-300 tw-rounded-md tw-font-mono tw-text-xs tw-leading-relaxed tw-resize-none focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-blue-500 tw-bg-white tw-text-gray-900\"\n                    spellcheck=\"false\"></textarea>\n                </form>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right Column - Live Preview -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-w-0\">\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <div class=\"tw-flex tw-items-center tw-justify-between\">\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <cide-ele-select\n                    formControlName=\"preview_type\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n                    size=\"xs\"\n                    class=\"tw-w-24\">\n                  </cide-ele-select>\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n                </div>\n              </div>\n            </div>\n            \n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50\">\n              <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4 tw-min-h-full\" [innerHTML]=\"previewHtml()\"></div>\n            </div>\n          </div>\n\n        </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host{display:block;height:100%;width:100%;max-width:100vw;overflow:hidden}:host .template-html-editor{height:100%!important;min-height:400px;resize:none;font-family:Courier New,Monaco,Consolas,Menlo,monospace;font-size:13px;line-height:1.6;tab-size:2;-moz-tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto;box-sizing:border-box;width:100%;max-width:100%}:host .template-html-editor::placeholder{color:#9ca3af;font-style:italic}:host .template-html-editor:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}:host .tw-grid{height:100%;max-width:100%;overflow:hidden}:host .tw-overflow-hidden{min-height:0;max-width:100%;overflow:hidden}:host .tw-flex-col{min-height:0;max-width:100%}:host [class*=tw-col-span]{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;overflow:hidden}:host *{max-width:100%;box-sizing:border-box}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TemplateDesignerComponent, decorators: [{
             type: Component,
@@ -6189,12 +6204,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
                         CommonModule,
                         ReactiveFormsModule,
                         CideInputComponent,
-                        CideTextareaComponent,
                         CideEleButtonComponent,
                         CideIconComponent,
                         CideSelectComponent,
                         CideLytSharedWrapperComponent
-                    ], template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions>\n    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n      Load Template\n    </button>\n    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n      [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n      Save Template\n    </button>\n  </div>\n\n  <!-- Main Content - Three Column Layout -->\n  <div class=\"tw-w-full tw-h-full tw-p-4\">\n    <div class=\"tw-grid tw-grid-cols-12 tw-gap-4 tw-h-full\">\n          \n          <!-- Left Sidebar - Tag Categories & Tags -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n            <!-- Tag Categories Header -->\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n              <cide-ele-input\n                formControlName=\"tag_search\"\n                placeholder=\"Search tags...\"\n                size=\"sm\"\n                leadingIcon=\"search\">\n              </cide-ele-input>\n            </div>\n\n            <!-- Category Tabs -->\n            <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n              @for (category of tagCategories; track category.id) {\n                <button\n                  type=\"button\"\n                  class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n                  [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n                  [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n                  [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n                  [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n                  (click)=\"onCategoryChange(category.id)\"\n                  [title]=\"category.name\">\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n                  <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n                </button>\n              }\n            </div>\n\n            <!-- Tags List -->\n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2\">\n              @if (filteredTags().length > 0) {\n                <div class=\"tw-space-y-1\">\n                  @for (tag of filteredTags(); track tag.code) {\n                    <button\n                      type=\"button\"\n                      class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n                      (click)=\"insertTag(tag)\"\n                      [title]=\"tag.description\">\n                      <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                        <div class=\"tw-flex-1 tw-min-w-0\">\n                          <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n                            {{ tag.code }}\n                          </code>\n                          <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n                          @if (tag.example) {\n                            <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n                          }\n                        </div>\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n                      </div>\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                  <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n                  <p class=\"tw-text-xs\">No tags found</p>\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Middle Column - HTML Editor -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden\">\n            <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n              \n              <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-input\n                    label=\"Template Name *\"\n                    formControlName=\"template_name\"\n                    placeholder=\"e.g., Standard Receipt\"\n                    size=\"sm\">\n                  </cide-ele-input>\n\n                  <cide-ele-input\n                    label=\"Template Code *\"\n                    formControlName=\"template_code\"\n                    placeholder=\"e.g., STD_RECEIPT_01\"\n                    size=\"sm\">\n                  </cide-ele-input>\n                </div>\n\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-select\n                    label=\"Template Type *\"\n                    formControlName=\"template_type\"\n                    [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n\n                  <cide-ele-select\n                    label=\"Template For\"\n                    formControlName=\"template_for\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                  <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n                  <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n                </div>\n              </form>\n            </div>\n\n            <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden\">\n              <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                  <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n                  <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert</span>\n                </div>\n              </div>\n              <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden\">\n                <cide-ele-textarea\n                  #htmlEditor\n                  formControlName=\"template_html\"\n                  placeholder=\"Enter HTML template code here... Use tags from the left sidebar.\"\n                  rows=\"20\"\n                  size=\"sm\"\n                  class=\"tw-h-full tw-font-mono tw-text-xs\">\n                </cide-ele-textarea>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right Column - Live Preview -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden\">\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <div class=\"tw-flex tw-items-center tw-justify-between\">\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <cide-ele-select\n                    formControlName=\"preview_type\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n                    size=\"xs\"\n                    class=\"tw-w-24\">\n                  </cide-ele-select>\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n                </div>\n              </div>\n            </div>\n            \n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50\">\n              <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4 tw-min-h-full\" [innerHTML]=\"previewHtml()\"></div>\n            </div>\n          </div>\n\n        </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host ::ng-deep textarea[formControlName=template_html]{height:100%!important;resize:none;font-family:Courier New,Monaco,Consolas,monospace;font-size:12px;line-height:1.5}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"] }]
+                    ], template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n  \n  <!-- Action Buttons in Breadcrumb Area -->\n  <div breadcrumb-actions>\n    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n      Load Template\n    </button>\n    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n      [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n      Save Template\n    </button>\n  </div>\n\n  <!-- Main Content - Three Column Layout -->\n  <div class=\"tw-w-full tw-h-full tw-overflow-hidden\" style=\"height: calc(100vh - 80px); max-width: 100vw;\">\n    <div class=\"tw-grid tw-grid-cols-12 tw-gap-3 tw-h-full tw-min-h-0 tw-p-3\">\n          \n          <!-- Left Sidebar - Tag Categories & Tags -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col tw-min-w-0\">\n            <!-- Tag Categories Header -->\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n              <form [formGroup]=\"templateForm\">\n                <cide-ele-input\n                  formControlName=\"tag_search\"\n                  placeholder=\"Search tags...\"\n                  size=\"sm\"\n                  leadingIcon=\"search\">\n                </cide-ele-input>\n              </form>\n            </div>\n\n            <!-- Category Tabs -->\n            <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n              @for (category of tagCategories; track category.id) {\n                <button\n                  type=\"button\"\n                  class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n                  [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n                  [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n                  [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n                  [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n                  (click)=\"onCategoryChange(category.id)\"\n                  [title]=\"category.name\">\n                  <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n                  <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n                </button>\n              }\n            </div>\n\n            <!-- Tags List -->\n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2\">\n              @if (filteredTags().length > 0) {\n                <div class=\"tw-space-y-1\">\n                  @for (tag of filteredTags(); track tag.code) {\n                    <button\n                      type=\"button\"\n                      class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n                      (click)=\"insertTag(tag)\"\n                      [title]=\"tag.description\">\n                      <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n                        <div class=\"tw-flex-1 tw-min-w-0\">\n                          <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n                            {{ tag.code }}\n                          </code>\n                          <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n                          @if (tag.example) {\n                            <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n                          }\n                        </div>\n                        <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n                      </div>\n                    </button>\n                  }\n                </div>\n              } @else {\n                <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n                  <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n                  <p class=\"tw-text-xs\">No tags found</p>\n                </div>\n              }\n            </div>\n          </div>\n\n          <!-- Middle Column - HTML Editor -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-min-w-0\">\n            <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n              \n              <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-input\n                    label=\"Template Name *\"\n                    formControlName=\"template_name\"\n                    placeholder=\"e.g., Standard Receipt\"\n                    size=\"sm\">\n                  </cide-ele-input>\n\n                  <cide-ele-input\n                    label=\"Template Code *\"\n                    formControlName=\"template_code\"\n                    placeholder=\"e.g., STD_RECEIPT_01\"\n                    size=\"sm\">\n                  </cide-ele-input>\n                </div>\n\n                <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n                  <cide-ele-select\n                    label=\"Template Type *\"\n                    formControlName=\"template_type\"\n                    [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n\n                  <cide-ele-select\n                    label=\"Template For\"\n                    formControlName=\"template_for\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n                    size=\"sm\">\n                  </cide-ele-select>\n                </div>\n\n                <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n                  <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n                  <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n                </div>\n              </form>\n            </div>\n\n            <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0\">\n              <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n                <div class=\"tw-flex tw-items-center tw-justify-between\">\n                  <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n                  <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert or paste HTML here</span>\n                </div>\n              </div>\n              <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden tw-min-h-0\">\n                <form [formGroup]=\"templateForm\">\n                  <textarea\n                    #htmlEditor\n                    formControlName=\"template_html\"\n                    placeholder=\"Enter HTML template code here... Use tags from the left sidebar or paste your HTML design.\"\n                    class=\"template-html-editor tw-w-full tw-h-full tw-p-3 tw-border tw-border-gray-300 tw-rounded-md tw-font-mono tw-text-xs tw-leading-relaxed tw-resize-none focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-blue-500 tw-bg-white tw-text-gray-900\"\n                    spellcheck=\"false\"></textarea>\n                </form>\n              </div>\n            </div>\n          </div>\n\n          <!-- Right Column - Live Preview -->\n          <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-w-0\">\n            <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n              <div class=\"tw-flex tw-items-center tw-justify-between\">\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n                <div class=\"tw-flex tw-items-center tw-gap-2\">\n                  <cide-ele-select\n                    formControlName=\"preview_type\"\n                    [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n                    size=\"xs\"\n                    class=\"tw-w-24\">\n                  </cide-ele-select>\n                  <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n                </div>\n              </div>\n            </div>\n            \n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50\">\n              <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4 tw-min-h-full\" [innerHTML]=\"previewHtml()\"></div>\n            </div>\n          </div>\n\n        </div>\n  </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host{display:block;height:100%;width:100%;max-width:100vw;overflow:hidden}:host .template-html-editor{height:100%!important;min-height:400px;resize:none;font-family:Courier New,Monaco,Consolas,Menlo,monospace;font-size:13px;line-height:1.6;tab-size:2;-moz-tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto;box-sizing:border-box;width:100%;max-width:100%}:host .template-html-editor::placeholder{color:#9ca3af;font-style:italic}:host .template-html-editor:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}:host .tw-grid{height:100%;max-width:100%;overflow:hidden}:host .tw-overflow-hidden{min-height:0;max-width:100%;overflow:hidden}:host .tw-flex-col{min-height:0;max-width:100%}:host [class*=tw-col-span]{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;overflow:hidden}:host *{max-width:100%;box-sizing:border-box}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"] }]
         }], ctorParameters: () => [], propDecorators: { htmlEditorRef: [{
                 type: ViewChild,
                 args: ['htmlEditor', { static: false }]
@@ -6562,7 +6576,7 @@ class CollectionReportComponent {
         return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CollectionReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CollectionReportComponent, isStandalone: true, selector: "cide-collection-report", ngImport: i0, template: "<!-- Collection Report Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n    <!-- Header Section -->\r\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n          \r\n          <!-- Title -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">assessment</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Fee Collection Report</h5>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"exportToPDF()\" leftIcon=\"picture_as_pdf\">\r\n              Export PDF\r\n            </button>\r\n            <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"exportToExcel()\" leftIcon=\"table_chart\">\r\n              Export Excel\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Filters Section -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-4\">\r\n            <cide-ele-input\r\n              label=\"Date From\"\r\n              formControlName=\"date_from\"\r\n              type=\"date\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n\r\n            <cide-ele-input\r\n              label=\"Date To\"\r\n              formControlName=\"date_to\"\r\n              type=\"date\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n\r\n            <cide-ele-select\r\n              label=\"Academic Year\"\r\n              formControlName=\"academic_year\"\r\n              [options]=\"academicYearOptions()\"\r\n              size=\"sm\"\r\n              placeholder=\"All Years\">\r\n            </cide-ele-select>\r\n\r\n            <cide-ele-select\r\n              label=\"Class/Program\"\r\n              formControlName=\"class_program\"\r\n              [options]=\"classOptions()\"\r\n              size=\"sm\"\r\n              placeholder=\"All Classes\">\r\n            </cide-ele-select>\r\n\r\n            <cide-ele-select\r\n              label=\"Payment Mode\"\r\n              formControlName=\"payment_mode\"\r\n              [options]=\"paymentModeOptions\"\r\n              size=\"sm\"\r\n              placeholder=\"All Modes\">\r\n            </cide-ele-select>\r\n          </div>\r\n\r\n          <div class=\"tw-flex tw-justify-end\">\r\n            <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"applyFilters()\" leftIcon=\"search\"\r\n              [disabled]=\"loading()\" [loading]=\"loading()\">\r\n              Generate Report\r\n            </button>\r\n          </div>\r\n        </form>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Summary Cards -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200\">\r\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\r\n          <!-- Total Collection Card -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n            <div class=\"tw-bg-green-100 tw-rounded-full tw-p-3\">\r\n              <cide-ele-icon class=\"tw-text-green-600 tw-w-6 tw-h-6\">account_balance_wallet</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1\">\r\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Collection</div>\r\n              <div class=\"tw-text-xl tw-font-bold tw-text-green-600\">{{ formatCurrency(summary().total_collection) }}</div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Total Receipts Card -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n            <div class=\"tw-bg-blue-100 tw-rounded-full tw-p-3\">\r\n              <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">receipt</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1\">\r\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Receipts</div>\r\n              <div class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ summary().total_receipts }}</div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Online Payments Card -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n            <div class=\"tw-bg-cyan-100 tw-rounded-full tw-p-3\">\r\n              <cide-ele-icon class=\"tw-text-cyan-600 tw-w-6 tw-h-6\">language</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1\">\r\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Online Payments</div>\r\n              <div class=\"tw-text-xl tw-font-bold tw-text-cyan-600\">{{ formatCurrency(summary().online_payments) }}</div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Cash Payments Card -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n            <div class=\"tw-bg-yellow-100 tw-rounded-full tw-p-3\">\r\n              <cide-ele-icon class=\"tw-text-yellow-600 tw-w-6 tw-h-6\">money</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1\">\r\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Cash Payments</div>\r\n              <div class=\"tw-text-xl tw-font-bold tw-text-yellow-600\">{{ formatCurrency(summary().cash_payments) }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n        <div class=\"tw-space-y-6\">\r\n          \r\n          <!-- Collection by Date Section -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Date</h6>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <cide-ele-data-grid \r\n                [config]=\"dateGridConfig()\" \r\n                (gridEvent)=\"onGridEvent($event)\">\r\n              </cide-ele-data-grid>\r\n              \r\n              <!-- Footer Totals -->\r\n              <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n                <div class=\"tw-grid tw-grid-cols-7 tw-gap-4 tw-text-sm\">\r\n                  <div class=\"tw-font-semibold tw-text-gray-900\">TOTAL</div>\r\n                  <div class=\"tw-font-semibold tw-text-center tw-text-gray-900\">{{ totalReceipts() }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCash()) }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOnline()) }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCheque()) }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOther()) }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-green-600\">{{ formatCurrency(grandTotal()) }}</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Collection by Class Section -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Class/Program</h6>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <cide-ele-data-grid \r\n                [config]=\"classGridConfig()\" \r\n                (gridEvent)=\"onGridEvent($event)\">\r\n              </cide-ele-data-grid>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.7", type: CollectionReportComponent, isStandalone: true, selector: "cide-collection-report", ngImport: i0, template: "<!-- Collection Report Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n    <!-- Header Section -->\r\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n          \r\n          <!-- Title -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">assessment</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Fee Collection Report</h5>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"exportToPDF()\" leftIcon=\"picture_as_pdf\">\r\n              Export PDF\r\n            </button>\r\n            <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"exportToExcel()\" leftIcon=\"table_chart\">\r\n              Export Excel\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Filters Section -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n          <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-4\">\r\n            <cide-ele-input\r\n              label=\"Date From\"\r\n              formControlName=\"date_from\"\r\n              type=\"date\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n\r\n            <cide-ele-input\r\n              label=\"Date To\"\r\n              formControlName=\"date_to\"\r\n              type=\"date\"\r\n              size=\"sm\">\r\n            </cide-ele-input>\r\n\r\n            <cide-ele-select\r\n              label=\"Academic Year\"\r\n              formControlName=\"academic_year\"\r\n              [options]=\"academicYearOptions()\"\r\n              size=\"sm\"\r\n              placeholder=\"All Years\">\r\n            </cide-ele-select>\r\n\r\n            <cide-ele-select\r\n              label=\"Class/Program\"\r\n              formControlName=\"class_program\"\r\n              [options]=\"classOptions()\"\r\n              size=\"sm\"\r\n              placeholder=\"All Classes\">\r\n            </cide-ele-select>\r\n\r\n            <cide-ele-select\r\n              label=\"Payment Mode\"\r\n              formControlName=\"payment_mode\"\r\n              [options]=\"paymentModeOptions\"\r\n              size=\"sm\"\r\n              placeholder=\"All Modes\">\r\n            </cide-ele-select>\r\n          </div>\r\n\r\n          <div class=\"tw-flex tw-justify-end\">\r\n            <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"applyFilters()\" leftIcon=\"search\"\r\n              [disabled]=\"loading()\" [loading]=\"loading()\">\r\n              Generate Report\r\n            </button>\r\n          </div>\r\n        </form>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Summary Cards -->\r\n    <div class=\"tw-table-row tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200\">\r\n        <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\r\n          <!-- Total Collection Card -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n            <div class=\"tw-bg-green-100 tw-rounded-full tw-p-3\">\r\n              <cide-ele-icon class=\"tw-text-green-600 tw-w-6 tw-h-6\">account_balance_wallet</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1\">\r\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Collection</div>\r\n              <div class=\"tw-text-xl tw-font-bold tw-text-green-600\">{{ formatCurrency(summary().total_collection) }}</div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Total Receipts Card -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n            <div class=\"tw-bg-blue-100 tw-rounded-full tw-p-3\">\r\n              <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">receipt</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1\">\r\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Receipts</div>\r\n              <div class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ summary().total_receipts }}</div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Online Payments Card -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n            <div class=\"tw-bg-cyan-100 tw-rounded-full tw-p-3\">\r\n              <cide-ele-icon class=\"tw-text-cyan-600 tw-w-6 tw-h-6\">language</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1\">\r\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Online Payments</div>\r\n              <div class=\"tw-text-xl tw-font-bold tw-text-cyan-600\">{{ formatCurrency(summary().online_payments) }}</div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Cash Payments Card -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n            <div class=\"tw-bg-yellow-100 tw-rounded-full tw-p-3\">\r\n              <cide-ele-icon class=\"tw-text-yellow-600 tw-w-6 tw-h-6\">money</cide-ele-icon>\r\n            </div>\r\n            <div class=\"tw-flex-1\">\r\n              <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Cash Payments</div>\r\n              <div class=\"tw-text-xl tw-font-bold tw-text-yellow-600\">{{ formatCurrency(summary().cash_payments) }}</div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n        <div class=\"tw-space-y-6\">\r\n          \r\n          <!-- Collection by Date Section -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Date</h6>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <cide-ele-data-grid \r\n                [config]=\"dateGridConfig()\" \r\n                (gridEvent)=\"onGridEvent($event)\">\r\n              </cide-ele-data-grid>\r\n              \r\n              <!-- Footer Totals -->\r\n              <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n                <div class=\"tw-grid tw-grid-cols-7 tw-gap-4 tw-text-sm\">\r\n                  <div class=\"tw-font-semibold tw-text-gray-900\">TOTAL</div>\r\n                  <div class=\"tw-font-semibold tw-text-center tw-text-gray-900\">{{ totalReceipts() }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCash()) }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOnline()) }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCheque()) }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOther()) }}</div>\r\n                  <div class=\"tw-font-semibold tw-text-right tw-text-green-600\">{{ formatCurrency(grandTotal()) }}</div>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Collection by Class Section -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Class/Program</h6>\r\n            </div>\r\n            <div class=\"tw-p-4\">\r\n              <cide-ele-data-grid \r\n                [config]=\"classGridConfig()\" \r\n                (gridEvent)=\"onGridEvent($event)\">\r\n              </cide-ele-data-grid>\r\n            </div>\r\n          </div>\r\n\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CollectionReportComponent, decorators: [{
             type: Component,
@@ -7077,7 +7091,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", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<!-- My Online Payment Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n    <!-- Header Section -->\r\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n          \r\n          <!-- Title -->\r\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Online Fee Payment</h5>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n            <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" leftIcon=\"arrow_back\">\r\n              Back to Statement\r\n            </button>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Main Content Area -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n        <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n          \r\n          <!-- Left Panel - Fee Selection -->\r\n          <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\r\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n              <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Fees to Pay</h6>\r\n            </div>\r\n            \r\n            <!-- Quick Actions -->\r\n            <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex tw-gap-2\">\r\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\r\n                Select All\r\n              </button>\r\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\r\n                Select Overdue\r\n              </button>\r\n              <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\r\n                Clear\r\n              </button>\r\n            </div>\r\n\r\n            <!-- Fee Items List -->\r\n            <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\r\n              @if (outstandingFees().length === 0) {\r\n                <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\r\n                  <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\r\n                  <p class=\"tw-text-sm\">No outstanding fees</p>\r\n                </div>\r\n              } @else {\r\n                @for (fee of outstandingFees(); track fee.id) {\r\n                  <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\r\n                    [class.tw-border-blue-500]=\"isSelected(fee)\"\r\n                    [class.tw-bg-blue-50]=\"isSelected(fee)\"\r\n                    [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\r\n                    [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\r\n                    [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\"\r\n                    (click)=\"toggleFee(fee)\">\r\n                    <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\r\n                      <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\r\n                        <input \r\n                          type=\"checkbox\" \r\n                          [checked]=\"isSelected(fee)\"\r\n                          (change)=\"toggleFee(fee); $event.stopPropagation()\"\r\n                          class=\"tw-mt-1\">\r\n                        <div class=\"tw-flex-1\">\r\n                          <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\r\n                            <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\r\n                            @if (isOverdue(fee)) {\r\n                              <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800\">\r\n                                Overdue\r\n                              </span>\r\n                            }\r\n                          </div>\r\n                          <div class=\"tw-text-xs tw-text-gray-600\">\r\n                            Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\r\n                          </div>\r\n                          @if (fee.late_fee > 0) {\r\n                            <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\r\n                              Late Fee: {{ formatCurrency(fee.late_fee) }}\r\n                            </div>\r\n                          }\r\n                        </div>\r\n                      </div>\r\n                      <div class=\"tw-text-right\">\r\n                        <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\r\n                      </div>\r\n                    </div>\r\n                  </div>\r\n                }\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          <!-- Right Panel - Payment Summary & Gateway -->\r\n          <div class=\"tw-space-y-4\">\r\n            \r\n            <!-- Payment Summary Card -->\r\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n              <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment Summary</h6>\r\n              </div>\r\n              <div class=\"tw-p-4 tw-space-y-3\">\r\n                <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n                  <span class=\"tw-text-gray-600\">Selected Items</span>\r\n                  <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\r\n                </div>\r\n                <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n                  <span class=\"tw-text-gray-600\">Fee Amount</span>\r\n                  <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n                </div>\r\n                @if (totalLateFee() > 0) {\r\n                  <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\r\n                    <span>Late Fee</span>\r\n                    <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\r\n                  </div>\r\n                }\r\n                <div class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\r\n                  <span>Subtotal</span>\r\n                  <span>{{ formatCurrency(subtotal()) }}</span>\r\n                </div>\r\n                @if (convenienceFee() > 0) {\r\n                  <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n                    <span class=\"tw-text-gray-600\">Convenience Fee (2%)</span>\r\n                    <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\r\n                  </div>\r\n                }\r\n                <div class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\r\n                  <span>Total Payable</span>\r\n                  <span>{{ formatCurrency(totalPayable()) }}</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Payment Method Selection -->\r\n            <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n              <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n                <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Payment Method</h6>\r\n              </div>\r\n              <div class=\"tw-p-4\">\r\n                <form [formGroup]=\"paymentForm\" class=\"tw-space-y-4\">\r\n                  \r\n                  <!-- Payment Method Cards -->\r\n                  <div class=\"tw-grid tw-grid-cols-3 tw-gap-3 tw-mb-4\">\r\n                    @for (method of paymentMethodOptions; track method.value) {\r\n                      <button\r\n                        type=\"button\"\r\n                        class=\"tw-p-4 tw-rounded-lg tw-border-2 tw-text-center tw-transition-colors\"\r\n                        [class.tw-border-blue-500]=\"selectedPaymentMethod() === method.value\"\r\n                        [class.tw-bg-blue-50]=\"selectedPaymentMethod() === method.value\"\r\n                        [class.tw-border-gray-200]=\"selectedPaymentMethod() !== method.value\"\r\n                        (click)=\"selectPaymentMethod(method.value)\">\r\n                        <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2\"\r\n                          [class.tw-text-blue-600]=\"selectedPaymentMethod() === method.value\"\r\n                          [class.tw-text-gray-400]=\"selectedPaymentMethod() !== method.value\">\r\n                          @switch (method.value) {\r\n                            @case ('UPI') { account_balance_wallet }\r\n                            @case ('CARD') { credit_card }\r\n                            @case ('NET_BANKING') { account_balance }\r\n                          }\r\n                        </cide-ele-icon>\r\n                        <div class=\"tw-text-xs tw-font-medium\">{{ method.label }}</div>\r\n                      </button>\r\n                    }\r\n                  </div>\r\n\r\n                  <!-- UPI Details -->\r\n                  @if (selectedPaymentMethod() === 'UPI') {\r\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\r\n                      <cide-ele-input\r\n                        label=\"UPI ID *\"\r\n                        formControlName=\"upi_id\"\r\n                        placeholder=\"username@upi\"\r\n                        size=\"sm\"\r\n                        [required]=\"true\">\r\n                      </cide-ele-input>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Card Details -->\r\n                  @if (selectedPaymentMethod() === 'CARD') {\r\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200 tw-space-y-3\">\r\n                      <cide-ele-input\r\n                        label=\"Card Number *\"\r\n                        formControlName=\"card_number\"\r\n                        placeholder=\"1234 5678 9012 3456\"\r\n                        size=\"sm\"\r\n                        maxLength=\"19\"\r\n                        [required]=\"true\">\r\n                      </cide-ele-input>\r\n                      <div class=\"tw-grid tw-grid-cols-2 tw-gap-3\">\r\n                        <cide-ele-input\r\n                          label=\"Expiry Date *\"\r\n                          formControlName=\"expiry\"\r\n                          placeholder=\"MM/YY\"\r\n                          size=\"sm\"\r\n                          maxLength=\"5\"\r\n                          [required]=\"true\">\r\n                        </cide-ele-input>\r\n                        <cide-ele-input\r\n                          label=\"CVV *\"\r\n                          formControlName=\"cvv\"\r\n                          type=\"password\"\r\n                          placeholder=\"***\"\r\n                          size=\"sm\"\r\n                          maxLength=\"3\"\r\n                          [required]=\"true\">\r\n                        </cide-ele-input>\r\n                      </div>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Net Banking Details -->\r\n                  @if (selectedPaymentMethod() === 'NET_BANKING') {\r\n                    <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\r\n                      <cide-ele-select\r\n                        label=\"Select Bank *\"\r\n                        formControlName=\"bank\"\r\n                        [options]=\"bankOptions\"\r\n                        size=\"sm\"\r\n                        placeholder=\"Select Bank\"\r\n                        [required]=\"true\">\r\n                      </cide-ele-select>\r\n                    </div>\r\n                  }\r\n\r\n                  <!-- Action Buttons -->\r\n                  <div class=\"tw-flex tw-gap-3 tw-pt-4\">\r\n                    <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" class=\"tw-flex-1\">\r\n                      Cancel\r\n                    </button>\r\n                    <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"proceedToPayment()\"\r\n                      [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" class=\"tw-flex-1\" leftIcon=\"payment\">\r\n                      Pay {{ formatCurrency(totalPayable()) }}\r\n                    </button>\r\n                  </div>\r\n\r\n                  <!-- Security Info -->\r\n                  <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-pt-2 tw-text-xs tw-text-gray-500\">\r\n                    <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\r\n                    <span>Secure payment powered by Razorpay</span>\r\n                  </div>\r\n                </form>\r\n              </div>\r\n            </div>\r\n\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "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,
@@ -7225,15 +7239,97 @@ class FeeDetailsViewerComponent {
         });
     }
     processFeeData(fee) {
-        const itemData = fee._feeItemData || fee;
-        const finalAmount = (fee.fees_total_amount || fee.fees_amount || 0) - (this.discount() || 0);
-        const assignmentDate = this.assignmentDate() || new Date();
-        this.calculateAndSetFeeDetails(itemData, fee, finalAmount, assignmentDate);
+        // Ensure we have proper item data structure
+        let itemData = fee._feeItemData;
+        // If _feeItemData doesn't exist or is incomplete, construct it from fee data
+        if (!itemData || typeof itemData !== 'object') {
+            itemData = {
+                feesi_item_name: fee.fees_structure_name || 'N/A',
+                feesi_item_code: fee.fees_structure_code || 'N/A',
+                feesi_amount: fee.fees_amount || fee.fees_total_amount || 0,
+                feesi_description: 'No description available',
+                feesi_category_id_sygms: fee.fees_category_name || null,
+                feesi_is_mandatory: false,
+                feesi_is_refundable: false,
+                feesi_is_amount_editable: false,
+                feesi_is_installment_allowed: false,
+                feesi_installment_count: 1,
+                feesi_due_date_offset_days: 0,
+                feesi_collection_start_offset_days: 0,
+                feesi_collection_end_offset_days: 30,
+                feesi_tax_applicable: false,
+                feesi_tax_percentage: 0
+            };
+        }
+        else {
+            // Ensure all required fields exist, using fee data as fallback
+            itemData.feesi_item_name = itemData.feesi_item_name || fee.fees_structure_name || 'N/A';
+            itemData.feesi_item_code = itemData.feesi_item_code || fee.fees_structure_code || 'N/A';
+            itemData.feesi_amount = itemData.feesi_amount !== undefined && itemData.feesi_amount !== null
+                ? itemData.feesi_amount
+                : (fee.fees_amount || fee.fees_total_amount || 0);
+            itemData.feesi_description = itemData.feesi_description || 'No description available';
+        }
+        const finalAmount = (fee.fees_total_amount || fee.fees_amount || 0) - (this.discount() || fee.discount || 0);
+        // Ensure assignmentDate is a Date object
+        let assignmentDate;
+        try {
+            const dateValue = this.assignmentDate();
+            if (dateValue instanceof Date) {
+                assignmentDate = dateValue;
+            }
+            else if (dateValue && typeof dateValue === 'string') {
+                assignmentDate = new Date(dateValue);
+            }
+            else {
+                assignmentDate = new Date();
+            }
+        }
+        catch {
+            assignmentDate = new Date();
+        }
+        // Ensure fee data has all required fields
+        const feeDataWithDefaults = {
+            ...fee,
+            fees_structure_name: fee.fees_structure_name || 'N/A',
+            fees_structure_code: fee.fees_structure_code || 'N/A',
+            fees_category_name: fee.fees_category_name || 'N/A',
+            fees_amount: fee.fees_amount || fee.fees_total_amount || 0,
+            fees_total_amount: fee.fees_total_amount || fee.fees_amount || 0,
+            discount: fee.discount || this.discount() || 0,
+            finalAmount: finalAmount,
+            _feeItemData: itemData
+        };
+        this.calculateAndSetFeeDetails(itemData, feeDataWithDefaults, finalAmount, assignmentDate);
     }
     processFeeAssignmentData(assignment) {
         // Transform assignment data to fee details format
         const finalAmount = assignment.feeas_final_amount || assignment.feeas_total_amount || 0;
-        const assignmentDate = assignment.feeas_assignment_date ? new Date(assignment.feeas_assignment_date) : new Date();
+        // Ensure assignmentDate is a Date object
+        let assignmentDate;
+        try {
+            if (assignment.feeas_assignment_date) {
+                assignmentDate = assignment.feeas_assignment_date instanceof Date
+                    ? assignment.feeas_assignment_date
+                    : new Date(assignment.feeas_assignment_date);
+            }
+            else {
+                // Try to get from input signal, otherwise use current date
+                const dateValue = this.assignmentDate();
+                if (dateValue instanceof Date) {
+                    assignmentDate = dateValue;
+                }
+                else if (dateValue && typeof dateValue === 'string') {
+                    assignmentDate = new Date(dateValue);
+                }
+                else {
+                    assignmentDate = new Date();
+                }
+            }
+        }
+        catch {
+            assignmentDate = new Date();
+        }
         // Create a mock item data structure from assignment
         const itemData = {
             feesi_item_name: assignment.feeas_fee_name,
@@ -7270,7 +7366,23 @@ class FeeDetailsViewerComponent {
     }
     processFeeItemData(item, structure) {
         const finalAmount = (item.feesi_amount || 0) - (this.discount() || 0);
-        const assignmentDate = this.assignmentDate() || new Date();
+        // Ensure assignmentDate is a Date object
+        let assignmentDate;
+        try {
+            const dateValue = this.assignmentDate();
+            if (dateValue instanceof Date) {
+                assignmentDate = dateValue;
+            }
+            else if (dateValue && typeof dateValue === 'string') {
+                assignmentDate = new Date(dateValue);
+            }
+            else {
+                assignmentDate = new Date();
+            }
+        }
+        catch {
+            assignmentDate = new Date();
+        }
         const feeData = {
             _id: item._id,
             fees_structure_name: structure.fees_structure_name,
@@ -7286,7 +7398,24 @@ class FeeDetailsViewerComponent {
         };
         this.calculateAndSetFeeDetails(item, feeData, finalAmount, assignmentDate);
     }
+    /**
+     * Helper method to ensure a value is a Date object
+     */
+    ensureDate(value) {
+        if (value instanceof Date) {
+            return value;
+        }
+        if (value && typeof value === 'string') {
+            const date = new Date(value);
+            if (!isNaN(date.getTime())) {
+                return date;
+            }
+        }
+        return new Date();
+    }
     calculateAndSetFeeDetails(itemData, feeData, finalAmount, assignmentDate) {
+        // Ensure assignmentDate is always a Date object
+        const assignmentDateObj = this.ensureDate(assignmentDate);
         const installmentCount = itemData.feesi_installment_count || 1;
         const installmentAllowed = itemData.feesi_is_installment_allowed || false;
         const daysBetweenInstallments = 30;
@@ -7305,8 +7434,8 @@ class FeeDetailsViewerComponent {
                 let daysFromPrevious = 0;
                 if (itemData.feesi_due_date_offset_days !== undefined && itemData.feesi_due_date_offset_days !== null) {
                     if (i === 1) {
-                        dueDateObj = new Date(assignmentDate);
-                        dueDateObj.setDate(assignmentDate.getDate() + itemData.feesi_due_date_offset_days);
+                        dueDateObj = new Date(assignmentDateObj);
+                        dueDateObj.setDate(assignmentDateObj.getDate() + itemData.feesi_due_date_offset_days);
                         daysFromAssignment = itemData.feesi_due_date_offset_days;
                     }
                     else {
@@ -7314,7 +7443,7 @@ class FeeDetailsViewerComponent {
                             dueDateObj = new Date(previousDueDate);
                             dueDateObj.setDate(previousDueDate.getDate() + daysBetweenInstallments);
                             daysFromPrevious = daysBetweenInstallments;
-                            daysFromAssignment = Math.floor((dueDateObj.getTime() - assignmentDate.getTime()) / (1000 * 60 * 60 * 24));
+                            daysFromAssignment = Math.floor((dueDateObj.getTime() - assignmentDateObj.getTime()) / (1000 * 60 * 60 * 24));
                         }
                     }
                     if (dueDateObj) {
@@ -7336,8 +7465,8 @@ class FeeDetailsViewerComponent {
             let dueDate = '';
             let daysFromAssignment = 0;
             if (itemData.feesi_due_date_offset_days !== undefined && itemData.feesi_due_date_offset_days !== null) {
-                const dueDateObj = new Date(assignmentDate);
-                dueDateObj.setDate(assignmentDate.getDate() + itemData.feesi_due_date_offset_days);
+                const dueDateObj = new Date(assignmentDateObj);
+                dueDateObj.setDate(assignmentDateObj.getDate() + itemData.feesi_due_date_offset_days);
                 dueDate = dueDateObj.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
                 daysFromAssignment = itemData.feesi_due_date_offset_days;
             }
@@ -7348,26 +7477,54 @@ class FeeDetailsViewerComponent {
                 daysFromAssignment: daysFromAssignment > 0 ? daysFromAssignment : undefined
             });
         }
-        // Extract category name
+        // Extract category name - check multiple sources
         let categoryName = 'N/A';
-        if (feeData.fees_category_name) {
+        if (feeData.fees_category_name && feeData.fees_category_name !== 'N/A' && feeData.fees_category_name.trim() !== '') {
             categoryName = feeData.fees_category_name;
         }
         else if (itemData.feesi_category_id_sygms) {
             if (typeof itemData.feesi_category_id_sygms === 'object' && itemData.feesi_category_id_sygms !== null) {
-                categoryName = itemData.feesi_category_id_sygms?.sygms_title || 'N/A';
+                categoryName = itemData.feesi_category_id_sygms?.sygms_title ||
+                    itemData.feesi_category_id_sygms?.sygms_name ||
+                    'N/A';
+            }
+            else if (typeof itemData.feesi_category_id_sygms === 'string') {
+                // If it's just an ID string, we can't resolve it here, use fallback
+                categoryName = 'N/A';
             }
         }
+        // Final fallback - try to get from item code or name
+        if (categoryName === 'N/A' && itemData.feesi_item_code) {
+            categoryName = itemData.feesi_item_code;
+        }
+        // Extract fee name - prioritize item name, then item code, then structure name
+        const feeName = itemData.feesi_item_name ||
+            itemData.feesi_item_code ||
+            feeData.fees_structure_name ||
+            'N/A';
+        // Extract item code - prioritize item code, then structure code, then structure name
+        const itemCode = itemData.feesi_item_code ||
+            feeData.fees_structure_code ||
+            feeData.fees_structure_name ||
+            'N/A';
+        // Extract structure name
+        const structureName = feeData.fees_structure_name ||
+            feeData.fees_structure_code ||
+            'N/A';
+        // Extract description
+        const description = itemData.feesi_description ||
+            feeData.fees_structure_name ||
+            'No description available';
         this.feeDetails.set({
-            name: itemData.feesi_item_name || itemData.feesi_item_code || feeData.fees_structure_name || 'N/A',
+            name: feeName,
             category: categoryName,
             amount: itemData.feesi_amount || feeData.fees_amount || 0,
             discount: this.discount() || feeData.discount || 0,
-            finalAmount: finalAmount,
-            structureName: feeData.fees_structure_name || 'N/A',
-            structureCode: feeData.fees_structure_code,
-            itemCode: itemData.feesi_item_code || 'N/A',
-            description: itemData.feesi_description || feeData.fees_structure_name || 'No description available',
+            finalAmount: finalAmount > 0 ? finalAmount : (itemData.feesi_amount || feeData.fees_amount || 0),
+            structureName: structureName,
+            structureCode: feeData.fees_structure_code || 'N/A',
+            itemCode: itemCode,
+            description: description,
             isMandatory: itemData.feesi_is_mandatory || false,
             isRefundable: itemData.feesi_is_refundable || false,
             isAmountEditable: itemData.feesi_is_amount_editable || false,