cloud-ide-fees 0.0.28 → 0.0.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/fesm2022/cloud-ide-fees.mjs +394 -318
  2. package/fesm2022/cloud-ide-fees.mjs.map +1 -1
  3. package/index.d.ts +2 -0
  4. package/package.json +1 -1
package/fesm2022/cloud-ide-fees.mjs CHANGED
@@ -13,6 +13,7 @@ import { ConfirmationService, NotificationService, CideIconComponent, CideEleBut
13
13
  import { AppStateHelperService, RightsService, CideLytSharedWrapperComponent, AppStateService, ComponentContextService } from 'cloud-ide-layout';
14
14
  import { ENTITY_SERVICE_TOKEN, ACADEMIC_YEAR_SERVICE_TOKEN, CLASS_PROGRAM_MASTER_SERVICE_TOKEN, PROGRAM_TERM_SECTION_SERVICE_TOKEN, GENERAL_MASTER_SERVICE_TOKEN, ProgramSectionSelectorWrapperComponent } from 'cloud-ide-shared';
15
15
  import { forkJoin, startWith } from 'rxjs';
16
+ import { CideCoreUserMasterService } from 'cloud-ide-core';
16
17
  import { DomSanitizer } from '@angular/platform-browser';
17
18
 
18
19
  class CloudIdeFees {
@@ -2998,6 +2999,7 @@ class FeeAssignmentCreateComponent {
2998
2999
  academicYearService = inject(ACADEMIC_YEAR_SERVICE_TOKEN);
2999
3000
  feeStructureService = inject(CideFeeFeeStructureService);
3000
3001
  feeAssignmentService = inject(CideFeeFeeAssignmentService);
3002
+ userMasterService = inject(CideCoreUserMasterService);
3001
3003
  componentContextService = inject(ComponentContextService);
3002
3004
  assignmentForm;
3003
3005
  loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
@@ -3258,15 +3260,56 @@ class FeeAssignmentCreateComponent {
3258
3260
  }
3259
3261
  onStudentSearch(query) {
3260
3262
  const searchQuery = String(query || '');
3261
- if (searchQuery.length < 3)
3263
+ if (searchQuery.length < 3) {
3264
+ this.assignmentForm.patchValue({ student_id: '' });
3262
3265
  return;
3266
+ }
3263
3267
  this.loading.set(true);
3264
- // TODO: Implement student search API call
3265
- // For now, this is a placeholder - should be replaced with actual student search service
3266
- setTimeout(() => {
3267
- this.assignmentForm.patchValue({ student_id: 'STU001' });
3268
- this.loading.set(false);
3269
- }, 500);
3268
+ // Search for students using user master service
3269
+ const payload = {
3270
+ query: searchQuery,
3271
+ pageIndex: 1,
3272
+ pageSize: 10,
3273
+ pagination: true
3274
+ };
3275
+ this.userMasterService.getUserList(payload)
3276
+ .pipe(takeUntilDestroyed(this.destroyRef))
3277
+ .subscribe({
3278
+ next: (response) => {
3279
+ if (response?.success && response?.data) {
3280
+ // Filter for students only
3281
+ const students = response.data.filter((user) => user.user_type_mapping?.syutm_user_type === 'STUDENT');
3282
+ if (students.length === 0) {
3283
+ this.notificationService.warning('No students found matching your search.');
3284
+ this.assignmentForm.patchValue({ student_id: '' });
3285
+ this.loading.set(false);
3286
+ return;
3287
+ }
3288
+ // Use first matching student (or could show dropdown for multiple matches)
3289
+ const student = students[0];
3290
+ const studentId = student._id || '';
3291
+ if (studentId) {
3292
+ this.assignmentForm.patchValue({ student_id: studentId });
3293
+ this.notificationService.success(`Student found: ${student.user_fullname || 'Unknown'}`);
3294
+ }
3295
+ else {
3296
+ this.notificationService.warning('Student ID not found.');
3297
+ this.assignmentForm.patchValue({ student_id: '' });
3298
+ }
3299
+ }
3300
+ else {
3301
+ this.notificationService.warning('No students found matching your search.');
3302
+ this.assignmentForm.patchValue({ student_id: '' });
3303
+ }
3304
+ this.loading.set(false);
3305
+ },
3306
+ error: (err) => {
3307
+ console.error('Error searching for students:', err);
3308
+ this.notificationService.error('Failed to search for students. Please try again.');
3309
+ this.assignmentForm.patchValue({ student_id: '' });
3310
+ this.loading.set(false);
3311
+ }
3312
+ });
3270
3313
  }
3271
3314
  /**
3272
3315
  * Handler for program section selector value changes
@@ -3691,7 +3734,7 @@ class FeeAssignmentCreateComponent {
3691
3734
  this.breadcrumbData.set(additionalItems);
3692
3735
  }
3693
3736
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
3694
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeAssignmentCreateComponent, isStandalone: true, selector: "cide-fee-assignment-create", ngImport: i0, template: "<!-- Fee Assignment Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n <div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"assignmentForm\" \n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Form Content -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n <div class=\"tw-space-y-6\">\n\n <!-- Student Information -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Student Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div>\n <cide-ele-input \n label=\"Student *\" \n formControlName=\"student_search\"\n placeholder=\"Search student by name or ID...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </div>\n\n <cide-ele-select \n label=\"Academic Year *\" \n formControlName=\"feeas_academic_year_id_acayr\"\n [options]=\"getAcademicYearOptions()\"\n [loading]=\"academicYearLoading()\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-select>\n </div>\n \n <!-- Hidden entity field (populated from app state) -->\n <input type=\"hidden\" formControlName=\"feeas_entity_id_syen\">\n </div>\n\n <!-- Academic Information (for fee structure loading) -->\n @if (showFeeStructureField()) {\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-pb-2 tw-border-b-2 tw-border-indigo-200 dark:tw-border-indigo-800 tw-mb-4\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-indigo-600 dark:tw-text-indigo-400\">school</cide-ele-icon>\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">Academic Information</h6>\n </div>\n \n <cide-shared-program-section-selector-wrapper\n [formGroup]=\"assignmentForm\"\n classProgramControlName=\"class_program_id\"\n branchControlName=\"branch_id\"\n termControlName=\"term_id\"\n sectionControlName=\"section_id\"\n [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n [disabled]=\"isViewMode()\"\n (valuesChange)=\"onProgramSectionValuesChange($event)\">\n </cide-shared-program-section-selector-wrapper>\n </div>\n }\n\n <!-- Fee Information -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Fee Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Source *\" \n formControlName=\"fee_source\"\n [options]=\"feeSourceOptions\"\n size=\"sm\"\n leadingIcon=\"source\">\n </cide-ele-select>\n </div>\n\n <!-- Custom Fee Fields -->\n @if (showCustomFeeFields()) {\n <div class=\"tw-mt-4 tw-space-y-4\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Category *\" \n formControlName=\"feeas_fee_category_sygms\"\n [options]=\"feeCategoryOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Fee Name *\" \n formControlName=\"feeas_fee_name\"\n placeholder=\"Enter fee name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Type *\" \n formControlName=\"feeas_fee_type\"\n [options]=\"feeTypeOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Amount *\" \n formControlName=\"feeas_original_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n size=\"sm\"\n leadingIcon=\"currency_rupee\">\n </cide-ele-input>\n </div>\n </div>\n }\n </div>\n\n <!-- Payment Details -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Payment Details</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-input \n label=\"Due Date *\" \n formControlName=\"feeas_due_date\"\n type=\"date\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Installments\" \n formControlName=\"feeas_installment_count\"\n type=\"number\"\n placeholder=\"1\"\n min=\"1\"\n max=\"12\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Fee Insights (for fee structure) -->\n @if (showFeeStructureField() && assignmentForm.get('term_id')?.value) {\n <div class=\"tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-blue-600 dark:tw-text-blue-400\">account_balance</cide-ele-icon>\n Fee Insights\n </h6>\n @if (feesLoading()) {\n <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading fees...</span>\n }\n </div>\n\n @if (feesLoading()) {\n <div class=\"tw-text-center tw-py-4\">\n <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading applicable fees...</span>\n </div>\n } @else if (applicableFees().length > 0) {\n <div class=\"tw-overflow-x-auto\">\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n <thead class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n <tr>\n <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Fee Name</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Category</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Original Amount</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Discount</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Scholarship</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Final Amount</th>\n </tr>\n </thead>\n <tbody class=\"tw-bg-white dark:tw-bg-gray-800 tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n @for (fee of applicableFees(); track getFeeId(fee)) {\n <tr>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100\">{{ getFeeName(fee) }}</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400\">{{ getFeeCategory(fee) }}</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">{{ formatCurrency(getFeeAmount(fee)) }}</td>\n <td class=\"tw-px-4 tw-py-2\">\n <cide-ele-input\n type=\"number\"\n [formControl]=\"getDiscountControl(getFeeId(fee))\"\n placeholder=\"0.00\"\n size=\"sm\"\n class=\"tw-w-24\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </td>\n <td class=\"tw-px-4 tw-py-2\">\n <cide-ele-input\n type=\"number\"\n [formControl]=\"getScholarshipControl(getFeeId(fee))\"\n placeholder=\"0.00\"\n size=\"sm\"\n class=\"tw-w-24\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n {{ formatCurrency(calculateFinalAmount(fee)) }}\n </td>\n </tr>\n }\n </tbody>\n <tfoot class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n <tr>\n <td colspan=\"2\" class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">Total:</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n {{ formatCurrency(totalOriginalAmount()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-text-right\">\n {{ formatCurrency(totalDiscount()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-purple-600 dark:tw-text-purple-400 tw-text-right\">\n {{ formatCurrency(totalScholarship()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 dark:tw-text-green-400 tw-text-right\">\n {{ formatCurrency(totalFinalAmount()) }}\n </td>\n </tr>\n </tfoot>\n </table>\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-4 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">\n No fee structure found for the selected program/term. Please select a program and term to view applicable fees.\n </div>\n }\n </div>\n }\n\n <!-- Discounts & Scholarships (for custom fees) -->\n @if (showCustomFeeFields()) {\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Discounts & Scholarships</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-input \n label=\"Discount Amount\" \n formControlName=\"feeas_discount_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n min=\"0\"\n size=\"sm\"\n leadingIcon=\"percent\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Scholarship Amount\" \n formControlName=\"feeas_scholarship_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n min=\"0\"\n size=\"sm\"\n leadingIcon=\"school\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Amount Summary (for custom fees) -->\n <div class=\"tw-bg-gradient-to-r tw-from-blue-50 dark:tw-from-blue-900/20 tw-to-indigo-50 dark:tw-to-indigo-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-blue-900 dark:tw-text-blue-100 tw-mb-3\">Amount Summary</h6>\n \n <div class=\"tw-space-y-2\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Original Amount:</span>\n <span class=\"tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Discount:</span>\n <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_discount_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Scholarship:</span>\n <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_scholarship_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-t-2 tw-border-blue-300 dark:tw-border-blue-700 tw-mt-2\">\n <span class=\"tw-text-base tw-font-bold tw-text-blue-900 dark:tw-text-blue-100\">Total Amount:</span>\n <span class=\"tw-text-xl tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ formatCurrency(totalAmount()) }}</span>\n </div>\n </div>\n </div>\n }\n\n <!-- Remarks -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <cide-ele-textarea \n label=\"Remarks\" \n formControlName=\"feeas_remarks\"\n placeholder=\"Enter any additional remarks...\"\n rows=\"2\" \n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n </div>\n\n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <div class=\"tw-w-full tw-mt-6\">\n <cide-form-field-error [formGroup]=\"assignmentForm\"></cide-form-field-error>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n @if (!isEditMode()) {\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n }\n\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n [disabled]=\"submitting() || assignmentForm.invalid || loading()\" \n [loading]=\"submitting()\" \n leftIcon=\"save\">\n {{ isEditMode() ? 'Update Assignment' : 'Assign Fee' }}\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n </form>\n </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
3737
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeeAssignmentCreateComponent, isStandalone: true, selector: "cide-fee-assignment-create", ngImport: i0, template: "<!-- Fee Assignment Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n <div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"assignmentForm\" \n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Form Content -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n <div class=\"tw-space-y-6\">\n\n <!-- Student Information -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Student Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div>\n <cide-ele-input \n label=\"Student\" \n formControlName=\"student_search\"\n placeholder=\"Search student by name or ID...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </div>\n\n <cide-ele-select \n label=\"Academic Year\" \n formControlName=\"feeas_academic_year_id_acayr\"\n [options]=\"getAcademicYearOptions()\"\n [loading]=\"academicYearLoading()\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-select>\n </div>\n \n <!-- Hidden entity field (populated from app state) -->\n <input type=\"hidden\" formControlName=\"feeas_entity_id_syen\">\n </div>\n\n <!-- Academic Information (for fee structure loading) -->\n @if (showFeeStructureField()) {\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-pb-2 tw-border-b-2 tw-border-indigo-200 dark:tw-border-indigo-800 tw-mb-4\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-indigo-600 dark:tw-text-indigo-400\">school</cide-ele-icon>\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">Academic Information</h6>\n </div>\n \n <cide-shared-program-section-selector-wrapper\n [formGroup]=\"assignmentForm\"\n classProgramControlName=\"class_program_id\"\n branchControlName=\"branch_id\"\n termControlName=\"term_id\"\n sectionControlName=\"section_id\"\n [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n [disabled]=\"isViewMode()\"\n (valuesChange)=\"onProgramSectionValuesChange($event)\">\n </cide-shared-program-section-selector-wrapper>\n </div>\n }\n\n <!-- Fee Information -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Fee Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Source\" \n formControlName=\"fee_source\"\n [options]=\"feeSourceOptions\"\n size=\"sm\"\n leadingIcon=\"source\">\n </cide-ele-select>\n </div>\n\n <!-- Custom Fee Fields -->\n @if (showCustomFeeFields()) {\n <div class=\"tw-mt-4 tw-space-y-4\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Category\" \n formControlName=\"feeas_fee_category_sygms\"\n [options]=\"feeCategoryOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Fee Name\" \n formControlName=\"feeas_fee_name\"\n placeholder=\"Enter fee name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Type\" \n formControlName=\"feeas_fee_type\"\n [options]=\"feeTypeOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Amount\" \n formControlName=\"feeas_original_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n size=\"sm\"\n leadingIcon=\"currency_rupee\">\n </cide-ele-input>\n </div>\n </div>\n }\n </div>\n\n <!-- Payment Details -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Payment Details</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-input \n label=\"Due Date\" \n formControlName=\"feeas_due_date\"\n type=\"date\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Installments\" \n formControlName=\"feeas_installment_count\"\n type=\"number\"\n placeholder=\"1\"\n min=\"1\"\n max=\"12\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Fee Insights (for fee structure) -->\n @if (showFeeStructureField() && assignmentForm.get('term_id')?.value) {\n <div class=\"tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-blue-600 dark:tw-text-blue-400\">account_balance</cide-ele-icon>\n Fee Insights\n </h6>\n @if (feesLoading()) {\n <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading fees...</span>\n }\n </div>\n\n @if (feesLoading()) {\n <div class=\"tw-text-center tw-py-4\">\n <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading applicable fees...</span>\n </div>\n } @else if (applicableFees().length > 0) {\n <div class=\"tw-overflow-x-auto\">\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n <thead class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n <tr>\n <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Fee Name</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Category</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Original Amount</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Discount</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Scholarship</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Final Amount</th>\n </tr>\n </thead>\n <tbody class=\"tw-bg-white dark:tw-bg-gray-800 tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n @for (fee of applicableFees(); track getFeeId(fee)) {\n <tr>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100\">{{ getFeeName(fee) }}</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400\">{{ getFeeCategory(fee) }}</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">{{ formatCurrency(getFeeAmount(fee)) }}</td>\n <td class=\"tw-px-4 tw-py-2\">\n <cide-ele-input\n type=\"number\"\n [formControl]=\"getDiscountControl(getFeeId(fee))\"\n placeholder=\"0.00\"\n size=\"sm\"\n class=\"tw-w-24\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </td>\n <td class=\"tw-px-4 tw-py-2\">\n <cide-ele-input\n type=\"number\"\n [formControl]=\"getScholarshipControl(getFeeId(fee))\"\n placeholder=\"0.00\"\n size=\"sm\"\n class=\"tw-w-24\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n {{ formatCurrency(calculateFinalAmount(fee)) }}\n </td>\n </tr>\n }\n </tbody>\n <tfoot class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n <tr>\n <td colspan=\"2\" class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">Total:</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n {{ formatCurrency(totalOriginalAmount()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-text-right\">\n {{ formatCurrency(totalDiscount()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-purple-600 dark:tw-text-purple-400 tw-text-right\">\n {{ formatCurrency(totalScholarship()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 dark:tw-text-green-400 tw-text-right\">\n {{ formatCurrency(totalFinalAmount()) }}\n </td>\n </tr>\n </tfoot>\n </table>\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-4 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">\n No fee structure found for the selected program/term. Please select a program and term to view applicable fees.\n </div>\n }\n </div>\n }\n\n <!-- Discounts & Scholarships (for custom fees) -->\n @if (showCustomFeeFields()) {\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Discounts & Scholarships</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-input \n label=\"Discount Amount\" \n formControlName=\"feeas_discount_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n min=\"0\"\n size=\"sm\"\n leadingIcon=\"percent\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Scholarship Amount\" \n formControlName=\"feeas_scholarship_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n min=\"0\"\n size=\"sm\"\n leadingIcon=\"school\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Amount Summary (for custom fees) -->\n <div class=\"tw-bg-gradient-to-r tw-from-blue-50 dark:tw-from-blue-900/20 tw-to-indigo-50 dark:tw-to-indigo-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-blue-900 dark:tw-text-blue-100 tw-mb-3\">Amount Summary</h6>\n \n <div class=\"tw-space-y-2\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Original Amount:</span>\n <span class=\"tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Discount:</span>\n <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_discount_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Scholarship:</span>\n <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_scholarship_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-t-2 tw-border-blue-300 dark:tw-border-blue-700 tw-mt-2\">\n <span class=\"tw-text-base tw-font-bold tw-text-blue-900 dark:tw-text-blue-100\">Total Amount:</span>\n <span class=\"tw-text-xl tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ formatCurrency(totalAmount()) }}</span>\n </div>\n </div>\n </div>\n }\n\n <!-- Remarks -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <cide-ele-textarea \n label=\"Remarks\" \n formControlName=\"feeas_remarks\"\n placeholder=\"Enter any additional remarks...\"\n rows=\"2\" \n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n </div>\n\n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <div class=\"tw-w-full tw-mt-6\">\n <cide-form-field-error [formGroup]=\"assignmentForm\"></cide-form-field-error>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n @if (!isEditMode()) {\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n }\n\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n [disabled]=\"submitting() || assignmentForm.invalid || loading()\" \n [loading]=\"submitting()\" \n leftIcon=\"save\">\n {{ isEditMode() ? 'Update Assignment' : 'Assign Fee' }}\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n </form>\n </div>\n</cide-lyt-shared-wrapper>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
3695
3738
  }
3696
3739
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentCreateComponent, decorators: [{
3697
3740
  type: Component,
@@ -3706,7 +3749,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
3706
3749
  CideLytSharedWrapperComponent,
3707
3750
  ProgramSectionSelectorWrapperComponent,
3708
3751
  CideFormFieldErrorComponent
3709
- ], template: "<!-- Fee Assignment Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n <div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"assignmentForm\" \n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Form Content -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n <div class=\"tw-space-y-6\">\n\n <!-- Student Information -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Student Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div>\n <cide-ele-input \n label=\"Student *\" \n formControlName=\"student_search\"\n placeholder=\"Search student by name or ID...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </div>\n\n <cide-ele-select \n label=\"Academic Year *\" \n formControlName=\"feeas_academic_year_id_acayr\"\n [options]=\"getAcademicYearOptions()\"\n [loading]=\"academicYearLoading()\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-select>\n </div>\n \n <!-- Hidden entity field (populated from app state) -->\n <input type=\"hidden\" formControlName=\"feeas_entity_id_syen\">\n </div>\n\n <!-- Academic Information (for fee structure loading) -->\n @if (showFeeStructureField()) {\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-pb-2 tw-border-b-2 tw-border-indigo-200 dark:tw-border-indigo-800 tw-mb-4\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-indigo-600 dark:tw-text-indigo-400\">school</cide-ele-icon>\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">Academic Information</h6>\n </div>\n \n <cide-shared-program-section-selector-wrapper\n [formGroup]=\"assignmentForm\"\n classProgramControlName=\"class_program_id\"\n branchControlName=\"branch_id\"\n termControlName=\"term_id\"\n sectionControlName=\"section_id\"\n [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n [disabled]=\"isViewMode()\"\n (valuesChange)=\"onProgramSectionValuesChange($event)\">\n </cide-shared-program-section-selector-wrapper>\n </div>\n }\n\n <!-- Fee Information -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Fee Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Source *\" \n formControlName=\"fee_source\"\n [options]=\"feeSourceOptions\"\n size=\"sm\"\n leadingIcon=\"source\">\n </cide-ele-select>\n </div>\n\n <!-- Custom Fee Fields -->\n @if (showCustomFeeFields()) {\n <div class=\"tw-mt-4 tw-space-y-4\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Category *\" \n formControlName=\"feeas_fee_category_sygms\"\n [options]=\"feeCategoryOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Fee Name *\" \n formControlName=\"feeas_fee_name\"\n placeholder=\"Enter fee name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Type *\" \n formControlName=\"feeas_fee_type\"\n [options]=\"feeTypeOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Amount *\" \n formControlName=\"feeas_original_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n size=\"sm\"\n leadingIcon=\"currency_rupee\">\n </cide-ele-input>\n </div>\n </div>\n }\n </div>\n\n <!-- Payment Details -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Payment Details</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-input \n label=\"Due Date *\" \n formControlName=\"feeas_due_date\"\n type=\"date\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Installments\" \n formControlName=\"feeas_installment_count\"\n type=\"number\"\n placeholder=\"1\"\n min=\"1\"\n max=\"12\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Fee Insights (for fee structure) -->\n @if (showFeeStructureField() && assignmentForm.get('term_id')?.value) {\n <div class=\"tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-blue-600 dark:tw-text-blue-400\">account_balance</cide-ele-icon>\n Fee Insights\n </h6>\n @if (feesLoading()) {\n <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading fees...</span>\n }\n </div>\n\n @if (feesLoading()) {\n <div class=\"tw-text-center tw-py-4\">\n <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading applicable fees...</span>\n </div>\n } @else if (applicableFees().length > 0) {\n <div class=\"tw-overflow-x-auto\">\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n <thead class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n <tr>\n <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Fee Name</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Category</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Original Amount</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Discount</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Scholarship</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Final Amount</th>\n </tr>\n </thead>\n <tbody class=\"tw-bg-white dark:tw-bg-gray-800 tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n @for (fee of applicableFees(); track getFeeId(fee)) {\n <tr>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100\">{{ getFeeName(fee) }}</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400\">{{ getFeeCategory(fee) }}</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">{{ formatCurrency(getFeeAmount(fee)) }}</td>\n <td class=\"tw-px-4 tw-py-2\">\n <cide-ele-input\n type=\"number\"\n [formControl]=\"getDiscountControl(getFeeId(fee))\"\n placeholder=\"0.00\"\n size=\"sm\"\n class=\"tw-w-24\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </td>\n <td class=\"tw-px-4 tw-py-2\">\n <cide-ele-input\n type=\"number\"\n [formControl]=\"getScholarshipControl(getFeeId(fee))\"\n placeholder=\"0.00\"\n size=\"sm\"\n class=\"tw-w-24\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n {{ formatCurrency(calculateFinalAmount(fee)) }}\n </td>\n </tr>\n }\n </tbody>\n <tfoot class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n <tr>\n <td colspan=\"2\" class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">Total:</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n {{ formatCurrency(totalOriginalAmount()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-text-right\">\n {{ formatCurrency(totalDiscount()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-purple-600 dark:tw-text-purple-400 tw-text-right\">\n {{ formatCurrency(totalScholarship()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 dark:tw-text-green-400 tw-text-right\">\n {{ formatCurrency(totalFinalAmount()) }}\n </td>\n </tr>\n </tfoot>\n </table>\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-4 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">\n No fee structure found for the selected program/term. Please select a program and term to view applicable fees.\n </div>\n }\n </div>\n }\n\n <!-- Discounts & Scholarships (for custom fees) -->\n @if (showCustomFeeFields()) {\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Discounts & Scholarships</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-input \n label=\"Discount Amount\" \n formControlName=\"feeas_discount_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n min=\"0\"\n size=\"sm\"\n leadingIcon=\"percent\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Scholarship Amount\" \n formControlName=\"feeas_scholarship_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n min=\"0\"\n size=\"sm\"\n leadingIcon=\"school\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Amount Summary (for custom fees) -->\n <div class=\"tw-bg-gradient-to-r tw-from-blue-50 dark:tw-from-blue-900/20 tw-to-indigo-50 dark:tw-to-indigo-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-blue-900 dark:tw-text-blue-100 tw-mb-3\">Amount Summary</h6>\n \n <div class=\"tw-space-y-2\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Original Amount:</span>\n <span class=\"tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Discount:</span>\n <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_discount_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Scholarship:</span>\n <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_scholarship_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-t-2 tw-border-blue-300 dark:tw-border-blue-700 tw-mt-2\">\n <span class=\"tw-text-base tw-font-bold tw-text-blue-900 dark:tw-text-blue-100\">Total Amount:</span>\n <span class=\"tw-text-xl tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ formatCurrency(totalAmount()) }}</span>\n </div>\n </div>\n </div>\n }\n\n <!-- Remarks -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <cide-ele-textarea \n label=\"Remarks\" \n formControlName=\"feeas_remarks\"\n placeholder=\"Enter any additional remarks...\"\n rows=\"2\" \n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n </div>\n\n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <div class=\"tw-w-full tw-mt-6\">\n <cide-form-field-error [formGroup]=\"assignmentForm\"></cide-form-field-error>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n @if (!isEditMode()) {\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n }\n\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n [disabled]=\"submitting() || assignmentForm.invalid || loading()\" \n [loading]=\"submitting()\" \n leftIcon=\"save\">\n {{ isEditMode() ? 'Update Assignment' : 'Assign Fee' }}\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n </form>\n </div>\n</cide-lyt-shared-wrapper>\n\n" }]
3752
+ ], template: "<!-- Fee Assignment Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n <div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"assignmentForm\" \n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Form Content -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n <div class=\"tw-space-y-6\">\n\n <!-- Student Information -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Student Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div>\n <cide-ele-input \n label=\"Student\" \n formControlName=\"student_search\"\n placeholder=\"Search student by name or ID...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </div>\n\n <cide-ele-select \n label=\"Academic Year\" \n formControlName=\"feeas_academic_year_id_acayr\"\n [options]=\"getAcademicYearOptions()\"\n [loading]=\"academicYearLoading()\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-select>\n </div>\n \n <!-- Hidden entity field (populated from app state) -->\n <input type=\"hidden\" formControlName=\"feeas_entity_id_syen\">\n </div>\n\n <!-- Academic Information (for fee structure loading) -->\n @if (showFeeStructureField()) {\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-pb-2 tw-border-b-2 tw-border-indigo-200 dark:tw-border-indigo-800 tw-mb-4\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-indigo-600 dark:tw-text-indigo-400\">school</cide-ele-icon>\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">Academic Information</h6>\n </div>\n \n <cide-shared-program-section-selector-wrapper\n [formGroup]=\"assignmentForm\"\n classProgramControlName=\"class_program_id\"\n branchControlName=\"branch_id\"\n termControlName=\"term_id\"\n sectionControlName=\"section_id\"\n [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\n [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\n [disabled]=\"isViewMode()\"\n (valuesChange)=\"onProgramSectionValuesChange($event)\">\n </cide-shared-program-section-selector-wrapper>\n </div>\n }\n\n <!-- Fee Information -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Fee Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Source\" \n formControlName=\"fee_source\"\n [options]=\"feeSourceOptions\"\n size=\"sm\"\n leadingIcon=\"source\">\n </cide-ele-select>\n </div>\n\n <!-- Custom Fee Fields -->\n @if (showCustomFeeFields()) {\n <div class=\"tw-mt-4 tw-space-y-4\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Category\" \n formControlName=\"feeas_fee_category_sygms\"\n [options]=\"feeCategoryOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Fee Name\" \n formControlName=\"feeas_fee_name\"\n placeholder=\"Enter fee name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Fee Type\" \n formControlName=\"feeas_fee_type\"\n [options]=\"feeTypeOptions\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-input \n label=\"Amount\" \n formControlName=\"feeas_original_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n size=\"sm\"\n leadingIcon=\"currency_rupee\">\n </cide-ele-input>\n </div>\n </div>\n }\n </div>\n\n <!-- Payment Details -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Payment Details</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-input \n label=\"Due Date\" \n formControlName=\"feeas_due_date\"\n type=\"date\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Installments\" \n formControlName=\"feeas_installment_count\"\n type=\"number\"\n placeholder=\"1\"\n min=\"1\"\n max=\"12\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Fee Insights (for fee structure) -->\n @if (showFeeStructureField() && assignmentForm.get('term_id')?.value) {\n <div class=\"tw-bg-blue-50 dark:tw-bg-blue-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-w-5 tw-h-5 tw-text-blue-600 dark:tw-text-blue-400\">account_balance</cide-ele-icon>\n Fee Insights\n </h6>\n @if (feesLoading()) {\n <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading fees...</span>\n }\n </div>\n\n @if (feesLoading()) {\n <div class=\"tw-text-center tw-py-4\">\n <span class=\"tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">Loading applicable fees...</span>\n </div>\n } @else if (applicableFees().length > 0) {\n <div class=\"tw-overflow-x-auto\">\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n <thead class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n <tr>\n <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Fee Name</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-left tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Category</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Original Amount</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Discount</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Scholarship</th>\n <th class=\"tw-px-4 tw-py-2 tw-text-right tw-text-xs tw-font-medium tw-text-gray-700 dark:tw-text-gray-300 tw-uppercase\">Final Amount</th>\n </tr>\n </thead>\n <tbody class=\"tw-bg-white dark:tw-bg-gray-800 tw-divide-y tw-divide-gray-200 dark:tw-divide-gray-700\">\n @for (fee of applicableFees(); track getFeeId(fee)) {\n <tr>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100\">{{ getFeeName(fee) }}</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-600 dark:tw-text-gray-400\">{{ getFeeCategory(fee) }}</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">{{ formatCurrency(getFeeAmount(fee)) }}</td>\n <td class=\"tw-px-4 tw-py-2\">\n <cide-ele-input\n type=\"number\"\n [formControl]=\"getDiscountControl(getFeeId(fee))\"\n placeholder=\"0.00\"\n size=\"sm\"\n class=\"tw-w-24\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </td>\n <td class=\"tw-px-4 tw-py-2\">\n <cide-ele-input\n type=\"number\"\n [formControl]=\"getScholarshipControl(getFeeId(fee))\"\n placeholder=\"0.00\"\n size=\"sm\"\n class=\"tw-w-24\"\n [disabled]=\"isViewMode()\">\n </cide-ele-input>\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n {{ formatCurrency(calculateFinalAmount(fee)) }}\n </td>\n </tr>\n }\n </tbody>\n <tfoot class=\"tw-bg-gray-50 dark:tw-bg-gray-800\">\n <tr>\n <td colspan=\"2\" class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">Total:</td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-text-right\">\n {{ formatCurrency(totalOriginalAmount()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-blue-600 dark:tw-text-blue-400 tw-text-right\">\n {{ formatCurrency(totalDiscount()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-semibold tw-text-purple-600 dark:tw-text-purple-400 tw-text-right\">\n {{ formatCurrency(totalScholarship()) }}\n </td>\n <td class=\"tw-px-4 tw-py-2 tw-text-sm tw-font-bold tw-text-green-600 dark:tw-text-green-400 tw-text-right\">\n {{ formatCurrency(totalFinalAmount()) }}\n </td>\n </tr>\n </tfoot>\n </table>\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-4 tw-text-sm tw-text-gray-500 dark:tw-text-gray-400\">\n No fee structure found for the selected program/term. Please select a program and term to view applicable fees.\n </div>\n }\n </div>\n }\n\n <!-- Discounts & Scholarships (for custom fees) -->\n @if (showCustomFeeFields()) {\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100 tw-mb-3\">Discounts & Scholarships</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-input \n label=\"Discount Amount\" \n formControlName=\"feeas_discount_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n min=\"0\"\n size=\"sm\"\n leadingIcon=\"percent\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Scholarship Amount\" \n formControlName=\"feeas_scholarship_amount\"\n type=\"number\"\n placeholder=\"0.00\"\n min=\"0\"\n size=\"sm\"\n leadingIcon=\"school\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Amount Summary (for custom fees) -->\n <div class=\"tw-bg-gradient-to-r tw-from-blue-50 dark:tw-from-blue-900/20 tw-to-indigo-50 dark:tw-to-indigo-900/20 tw-rounded-lg tw-border tw-border-blue-200 dark:tw-border-blue-800 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-blue-900 dark:tw-text-blue-100 tw-mb-3\">Amount Summary</h6>\n \n <div class=\"tw-space-y-2\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Original Amount:</span>\n <span class=\"tw-font-semibold tw-text-gray-900 dark:tw-text-gray-100\">{{ formatCurrency(assignmentForm.get('feeas_original_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Discount:</span>\n <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_discount_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-1\">\n <span class=\"tw-text-sm tw-text-gray-700 dark:tw-text-gray-300\">Scholarship:</span>\n <span class=\"tw-font-semibold tw-text-red-600 dark:tw-text-red-400\">-{{ formatCurrency(assignmentForm.get('feeas_scholarship_amount')?.value || 0) }}</span>\n </div>\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-t-2 tw-border-blue-300 dark:tw-border-blue-700 tw-mt-2\">\n <span class=\"tw-text-base tw-font-bold tw-text-blue-900 dark:tw-text-blue-100\">Total Amount:</span>\n <span class=\"tw-text-xl tw-font-bold tw-text-blue-700 dark:tw-text-blue-300\">{{ formatCurrency(totalAmount()) }}</span>\n </div>\n </div>\n </div>\n }\n\n <!-- Remarks -->\n <div class=\"tw-bg-white dark:tw-bg-gray-800 tw-rounded-lg tw-border tw-border-gray-200 dark:tw-border-gray-700 tw-p-4\">\n <cide-ele-textarea \n label=\"Remarks\" \n formControlName=\"feeas_remarks\"\n placeholder=\"Enter any additional remarks...\"\n rows=\"2\" \n size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n </div>\n\n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <div class=\"tw-w-full tw-mt-6\">\n <cide-form-field-error [formGroup]=\"assignmentForm\"></cide-form-field-error>\n </div>\n \n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n @if (!isEditMode()) {\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n }\n\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n [disabled]=\"submitting() || assignmentForm.invalid || loading()\" \n [loading]=\"submitting()\" \n leftIcon=\"save\">\n {{ isEditMode() ? 'Update Assignment' : 'Assign Fee' }}\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n </form>\n </div>\n</cide-lyt-shared-wrapper>\n\n" }]
3710
3753
  }], ctorParameters: () => [] });
3711
3754
 
3712
3755
  var feeAssignmentCreate_component = /*#__PURE__*/Object.freeze({
@@ -4190,6 +4233,7 @@ class FeePaymentProcessComponent {
4190
4233
  router = inject(Router);
4191
4234
  feePaymentService = inject(CideFeeFeePaymentService);
4192
4235
  feeAssignmentService = inject(CideFeeFeeAssignmentService);
4236
+ userMasterService = inject(CideCoreUserMasterService);
4193
4237
  notificationService = inject(NotificationService);
4194
4238
  confirmationService = inject(ConfirmationService);
4195
4239
  rightsService = inject(RightsService);
@@ -4307,29 +4351,61 @@ class FeePaymentProcessComponent {
4307
4351
  }
4308
4352
  onStudentSearch(query) {
4309
4353
  const searchQuery = String(query || '');
4310
- if (searchQuery.length < 3)
4354
+ if (searchQuery.length < 3) {
4355
+ this.selectedStudent.set(null);
4356
+ this.paymentForm.patchValue({ student_id: '' });
4311
4357
  return;
4358
+ }
4312
4359
  this.loading.set(true);
4313
- // TODO: Implement student search API call when student service is available
4314
- // For now, using a placeholder - this should be replaced with actual student search service
4315
- // The student search should return student details including _id, name, student_id, class, section
4316
- console.warn('Student search API not yet implemented. Using placeholder.');
4317
- // Placeholder: In production, this should call a student search service
4318
- // For now, we'll allow manual entry of student ID
4319
- setTimeout(() => {
4320
- // This is a placeholder - replace with actual student search API call
4321
- const mockStudent = {
4322
- _id: searchQuery, // Using query as student ID for now
4323
- name: `Student ${searchQuery}`,
4324
- student_id: searchQuery,
4325
- class: 'N/A',
4326
- section: 'N/A'
4327
- };
4328
- this.selectedStudent.set(mockStudent);
4329
- this.paymentForm.patchValue({ student_id: mockStudent._id });
4330
- this.loadOutstandingFees(mockStudent._id);
4331
- this.loading.set(false);
4332
- }, 500);
4360
+ // Search for students using user master service
4361
+ const payload = {
4362
+ query: searchQuery,
4363
+ pageIndex: 1,
4364
+ pageSize: 10,
4365
+ pagination: true
4366
+ };
4367
+ this.userMasterService.getUserList(payload)
4368
+ .pipe(takeUntilDestroyed(this.destroyRef))
4369
+ .subscribe({
4370
+ next: (response) => {
4371
+ if (response?.success && response?.data) {
4372
+ // Filter for students only
4373
+ const students = response.data.filter((user) => user.user_type_mapping?.syutm_user_type === 'STUDENT');
4374
+ if (students.length === 0) {
4375
+ this.notificationService.warning('No students found matching your search.');
4376
+ this.selectedStudent.set(null);
4377
+ this.paymentForm.patchValue({ student_id: '' });
4378
+ this.loading.set(false);
4379
+ return;
4380
+ }
4381
+ // Use first matching student (or could show dropdown for multiple matches)
4382
+ const student = students[0];
4383
+ const studentData = {
4384
+ _id: student._id || '',
4385
+ name: student.user_fullname || 'Unknown',
4386
+ student_id: student.user_type_mapping?.syutm_type_specific_id || student._id || '',
4387
+ class: student.class || 'N/A',
4388
+ section: student.section || 'N/A'
4389
+ };
4390
+ this.selectedStudent.set(studentData);
4391
+ this.paymentForm.patchValue({ student_id: studentData._id });
4392
+ this.loadOutstandingFees(studentData._id);
4393
+ }
4394
+ else {
4395
+ this.notificationService.warning('No students found matching your search.');
4396
+ this.selectedStudent.set(null);
4397
+ this.paymentForm.patchValue({ student_id: '' });
4398
+ }
4399
+ this.loading.set(false);
4400
+ },
4401
+ error: (err) => {
4402
+ console.error('Error searching for students:', err);
4403
+ this.notificationService.error('Failed to search for students. Please try again.');
4404
+ this.selectedStudent.set(null);
4405
+ this.paymentForm.patchValue({ student_id: '' });
4406
+ this.loading.set(false);
4407
+ }
4408
+ });
4333
4409
  }
4334
4410
  loadOutstandingFees(studentId) {
4335
4411
  this.loading.set(true);
@@ -4552,7 +4628,7 @@ class FeePaymentProcessComponent {
4552
4628
  return new Date(date) < new Date();
4553
4629
  }
4554
4630
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentProcessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
4555
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeePaymentProcessComponent, isStandalone: true, selector: "cide-fee-payment-process", ngImport: i0, template: "<!-- Payment Process Form -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"paymentForm\" \r\n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n \r\n <!-- Title -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Record Payment</h5>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n <!-- Back button or other actions can be added here if needed -->\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Form Content -->\r\n <div class=\"tw-table-row\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\r\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n <div class=\"tw-space-y-4\">\r\n\r\n <!-- Student Information -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Student Information</h6>\r\n \r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <div>\r\n <cide-ele-input \r\n label=\"Search Student *\" \r\n formControlName=\"student_search\"\r\n placeholder=\"Enter student name or ID...\"\r\n size=\"sm\"\r\n leadingIcon=\"search\"\r\n (ngModelChange)=\"onStudentSearch($event)\">\r\n </cide-ele-input>\r\n \r\n @if (selectedStudent()) {\r\n <div class=\"tw-mt-2 tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-green-900\">{{ selectedStudent()?.name }}</div>\r\n <div class=\"tw-text-xs tw-text-green-700\">ID: {{ selectedStudent()?.student_id }}</div>\r\n @if (selectedStudent()?.class) {\r\n <div class=\"tw-text-xs tw-text-green-600\">{{ selectedStudent()?.class }} / {{ selectedStudent()?.section }}</div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n\r\n <cide-ele-input \r\n label=\"Payment Date *\" \r\n formControlName=\"feepay_payment_date\"\r\n type=\"date\"\r\n size=\"sm\"\r\n leadingIcon=\"calendar_today\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Fee Selection -->\r\n @if (selectedStudent() && outstandingFees().length > 0) {\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">Select Fees to Pay</h6>\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-input \r\n formControlName=\"pay_full_outstanding\" \r\n type=\"checkbox\" \r\n size=\"sm\"\r\n (change)=\"togglePayFullOutstanding()\">\r\n </cide-ele-input>\r\n <span class=\"tw-text-sm tw-text-gray-700\">Pay full outstanding</span>\r\n </div>\r\n <button cideEleButton type=\"button\" variant=\"success\" size=\"xs\" (click)=\"selectAllFees()\">\r\n Select All\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"clearAllFees()\">\r\n Clear\r\n </button>\r\n </div>\r\n </div>\r\n\r\n <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-max-h-80 tw-overflow-y-auto tw-border tw-border-gray-200 tw-rounded-lg tw-p-3\">\r\n @for (item of feeItemsArray.controls; track $index) {\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-p-2 tw-bg-gray-50 tw-rounded tw-border tw-border-gray-200\"\r\n [formGroupName]=\"$index\">\r\n \r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1\">\r\n <cide-ele-input \r\n formControlName=\"is_selected\" \r\n type=\"checkbox\" \r\n size=\"sm\"\r\n (change)=\"toggleFeeItem($index)\">\r\n </cide-ele-input>\r\n \r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\r\n {{ item.get('fee_head')?.value }}\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">\r\n Outstanding: {{ formatCurrency(item.get('outstanding_amount')?.value || 0) }}\r\n @if (item.get('late_fee')?.value > 0) {\r\n <span class=\"tw-text-red-600\"> | Late Fee: {{ formatCurrency(item.get('late_fee')?.value) }}</span>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-input \r\n formControlName=\"amount_paid\"\r\n type=\"number\"\r\n placeholder=\"0.00\"\r\n size=\"sm\"\r\n [disabled]=\"!item.get('is_selected')?.value\"\r\n (ngModelChange)=\"onAmountChange($index, $event)\"\r\n class=\"tw-w-28\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Payment Details -->\r\n @if (selectedStudent()) {\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\r\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Payment Details</h6>\r\n \r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-select \r\n label=\"Payment Method *\" \r\n formControlName=\"feepay_payment_method\"\r\n [options]=\"paymentMethodOptions\"\r\n size=\"sm\"\r\n leadingIcon=\"payment\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-select \r\n label=\"Payment Mode *\" \r\n formControlName=\"feepay_payment_mode\"\r\n [options]=\"[{value: 'OFFLINE', label: 'Offline'}, {value: 'ONLINE', label: 'Online'}]\"\r\n size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Cheque/DD Details -->\r\n @if (showChequeDetails()) {\r\n <div class=\"tw-mt-4 tw-p-3 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\r\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-mb-3\">Cheque/DD Details</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n <cide-ele-input \r\n label=\"Cheque/DD Number *\" \r\n formControlName=\"feepay_cheque_number\"\r\n placeholder=\"Enter cheque/DD number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input \r\n label=\"Cheque/DD Date *\" \r\n formControlName=\"feepay_cheque_date\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\r\n <cide-ele-input \r\n label=\"Bank Name *\" \r\n formControlName=\"feepay_bank_name\"\r\n placeholder=\"Enter bank name\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input \r\n label=\"Branch Name *\" \r\n formControlName=\"feepay_bank_branch_name\"\r\n placeholder=\"Enter branch name\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-mt-3\">\r\n <cide-ele-input \r\n label=\"IFSC Code *\" \r\n formControlName=\"feepay_bank_ifsc_code\"\r\n placeholder=\"Enter IFSC code\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-mt-3\">\r\n <cide-ele-input \r\n label=\"Instrument Date *\" \r\n formControlName=\"feepay_instrument_date\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Bank Transfer Details -->\r\n @if (showBankDetails()) {\r\n <div class=\"tw-mt-4 tw-p-3 tw-bg-green-50 tw-rounded tw-border tw-border-green-200\">\r\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-green-900 tw-mb-3\">Bank Transfer Details</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n <cide-ele-input \r\n label=\"Bank Name\" \r\n formControlName=\"feepay_bank_name\"\r\n placeholder=\"Enter bank name\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input \r\n label=\"Branch Name\" \r\n formControlName=\"feepay_bank_branch_name\"\r\n placeholder=\"Enter branch name\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\r\n <cide-ele-input \r\n label=\"IFSC Code\" \r\n formControlName=\"feepay_bank_ifsc_code\"\r\n placeholder=\"Enter IFSC code\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input \r\n label=\"Account Number\" \r\n formControlName=\"feepay_bank_account_number\"\r\n placeholder=\"Enter account number\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n <div class=\"tw-mt-3\">\r\n <cide-ele-input \r\n label=\"Transaction Reference *\" \r\n formControlName=\"feepay_transaction_reference\"\r\n placeholder=\"Enter transaction reference\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Discount Section -->\r\n <div class=\"tw-mt-4 tw-p-3 tw-bg-purple-50 tw-rounded tw-border tw-border-purple-200\">\r\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-purple-900 tw-mb-3\">Discount Information</h6>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\r\n <cide-ele-input \r\n label=\"Discount (%)\" \r\n formControlName=\"feepay_discount_percentage\"\r\n type=\"number\"\r\n placeholder=\"0\"\r\n size=\"sm\"\r\n [min]=\"0\"\r\n [max]=\"100\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select \r\n label=\"Discount On\" \r\n formControlName=\"feepay_discount_on\"\r\n [options]=\"[{value: 'SUB_TOTAL', label: 'Sub Total'}, {value: 'FEE_HEAD', label: 'Fee Head'}, {value: 'TOTAL', label: 'Total'}, {value: 'INSTALLMENT', label: 'Installment'}]\"\r\n size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n <div class=\"tw-mt-3\">\r\n <cide-ele-textarea \r\n label=\"Discount Reason\" \r\n formControlName=\"feepay_discount_reason\"\r\n placeholder=\"Enter reason for discount...\"\r\n rows=\"2\"\r\n size=\"sm\">\r\n </cide-ele-textarea>\r\n </div>\r\n </div>\r\n\r\n <!-- Payment Reference -->\r\n <div class=\"tw-mt-4\">\r\n <cide-ele-input \r\n label=\"Payment Reference\" \r\n formControlName=\"feepay_payment_reference\"\r\n placeholder=\"Enter payment reference number\"\r\n size=\"sm\"\r\n leadingIcon=\"receipt\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Remarks -->\r\n <div class=\"tw-mt-4\">\r\n <cide-ele-textarea \r\n label=\"Remarks\" \r\n formControlName=\"feepay_remarks\"\r\n placeholder=\"Enter any additional remarks...\"\r\n rows=\"2\" \r\n size=\"sm\">\r\n </cide-ele-textarea>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Payment Summary -->\r\n @if (selectedStudent() && selectedFeeItems().length > 0) {\r\n <div class=\"tw-bg-gradient-to-r tw-from-green-50 tw-to-emerald-50 tw-rounded-lg tw-border tw-border-green-200 tw-p-4\">\r\n <h6 class=\"tw-text-base tw-font-semibold tw-text-green-900 tw-mb-3\">Payment Summary</h6>\r\n \r\n <div class=\"tw-space-y-3\">\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n <span class=\"tw-text-gray-700\">Fee Amount:</span>\r\n <span class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n </div>\r\n \r\n @if (totalLateFee() > 0) {\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n <span class=\"tw-text-gray-700\">Late Fee Amount:</span>\r\n <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalLateFee()) }}</span>\r\n </div>\r\n }\r\n \r\n @if (totalPenalty() > 0) {\r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\r\n <span class=\"tw-text-gray-700\">Penalty Amount:</span>\r\n <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalPenalty()) }}</span>\r\n </div>\r\n }\r\n \r\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-3 tw-border-t-2 tw-border-green-300 tw-mt-2\">\r\n <span class=\"tw-text-lg tw-font-bold tw-text-green-900\">Total Payable:</span>\r\n <span class=\"tw-text-2xl tw-font-bold tw-text-green-700\">{{ formatCurrency(totalPayable()) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Form Validation Errors -->\r\n <!-- Action Buttons -->\r\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\r\n [disabled]=\"loading()\">\r\n Cancel\r\n </button>\r\n\r\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \r\n [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\" \r\n [loading]=\"submitting()\" \r\n leftIcon=\"save\">\r\n {{ submitting() ? 'Processing...' : 'Record Payment' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </form>\r\n</div>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
4631
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: FeePaymentProcessComponent, isStandalone: true, selector: "cide-fee-payment-process", ngImport: i0, template: "<!-- Payment Process Form -->\n<div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"paymentForm\" \n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Header Section -->\n <div class=\"tw-table-row tw-w-full tw-h-0\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n \n <!-- Title -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Record Payment</h5>\n </div>\n\n <!-- Actions -->\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n <!-- Back button or other actions can be added here if needed -->\n </div>\n </div>\n </div>\n </div>\n\n <!-- Form Content -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n <div class=\"tw-space-y-4\">\n\n <!-- Student Information -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Student Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div>\n <cide-ele-input \n label=\"Search Student\" \n formControlName=\"student_search\"\n placeholder=\"Enter student name or ID...\"\n size=\"sm\"\n leadingIcon=\"search\"\n (ngModelChange)=\"onStudentSearch($event)\">\n </cide-ele-input>\n \n @if (selectedStudent()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded\">\n <div class=\"tw-text-sm tw-font-medium tw-text-green-900\">{{ selectedStudent()?.name }}</div>\n <div class=\"tw-text-xs tw-text-green-700\">ID: {{ selectedStudent()?.student_id }}</div>\n @if (selectedStudent()?.class) {\n <div class=\"tw-text-xs tw-text-green-600\">{{ selectedStudent()?.class }} / {{ selectedStudent()?.section }}</div>\n }\n </div>\n }\n </div>\n\n <cide-ele-input \n label=\"Payment Date\" \n formControlName=\"feepay_payment_date\"\n type=\"date\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Fee Selection -->\n @if (selectedStudent() && outstandingFees().length > 0) {\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">Select Fees to Pay</h6>\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-input \n formControlName=\"pay_full_outstanding\" \n type=\"checkbox\" \n size=\"sm\"\n (change)=\"togglePayFullOutstanding()\">\n </cide-ele-input>\n <span class=\"tw-text-sm tw-text-gray-700\">Pay full outstanding</span>\n </div>\n <button cideEleButton type=\"button\" variant=\"success\" size=\"xs\" (click)=\"selectAllFees()\">\n Select All\n </button>\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"clearAllFees()\">\n Clear\n </button>\n </div>\n </div>\n\n <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-max-h-80 tw-overflow-y-auto tw-border tw-border-gray-200 tw-rounded-lg tw-p-3\">\n @for (item of feeItemsArray.controls; track $index) {\n <div class=\"tw-flex tw-items-center tw-justify-between tw-p-2 tw-bg-gray-50 tw-rounded tw-border tw-border-gray-200\"\n [formGroupName]=\"$index\">\n \n <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1\">\n <cide-ele-input \n formControlName=\"is_selected\" \n type=\"checkbox\" \n size=\"sm\"\n (change)=\"toggleFeeItem($index)\">\n </cide-ele-input>\n \n <div class=\"tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n {{ item.get('fee_head')?.value }}\n </div>\n <div class=\"tw-text-xs tw-text-gray-500\">\n Outstanding: {{ formatCurrency(item.get('outstanding_amount')?.value || 0) }}\n @if (item.get('late_fee')?.value > 0) {\n <span class=\"tw-text-red-600\"> | Late Fee: {{ formatCurrency(item.get('late_fee')?.value) }}</span>\n }\n </div>\n </div>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-input \n formControlName=\"amount_paid\"\n type=\"number\"\n placeholder=\"0.00\"\n size=\"sm\"\n [disabled]=\"!item.get('is_selected')?.value\"\n (ngModelChange)=\"onAmountChange($index, $event)\"\n class=\"tw-w-28\">\n </cide-ele-input>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Payment Details -->\n @if (selectedStudent()) {\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Payment Details</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Payment Method\" \n formControlName=\"feepay_payment_method\"\n [options]=\"paymentMethodOptions\"\n size=\"sm\"\n leadingIcon=\"payment\">\n </cide-ele-select>\n\n <cide-ele-select \n label=\"Payment Mode\" \n formControlName=\"feepay_payment_mode\"\n [options]=\"[{value: 'OFFLINE', label: 'Offline'}, {value: 'ONLINE', label: 'Online'}]\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <!-- Cheque/DD Details -->\n @if (showChequeDetails()) {\n <div class=\"tw-mt-4 tw-p-3 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-mb-3\">Cheque/DD Details</h6>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input \n label=\"Cheque/DD Number\" \n formControlName=\"feepay_cheque_number\"\n placeholder=\"Enter cheque/DD number\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Cheque/DD Date\" \n formControlName=\"feepay_cheque_date\"\n type=\"date\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\n <cide-ele-input \n label=\"Bank Name\" \n formControlName=\"feepay_bank_name\"\n placeholder=\"Enter bank name\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Branch Name\" \n formControlName=\"feepay_bank_branch_name\"\n placeholder=\"Enter branch name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n <div class=\"tw-mt-3\">\n <cide-ele-input \n label=\"IFSC Code\" \n formControlName=\"feepay_bank_ifsc_code\"\n placeholder=\"Enter IFSC code\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n <div class=\"tw-mt-3\">\n <cide-ele-input \n label=\"Instrument Date\" \n formControlName=\"feepay_instrument_date\"\n type=\"date\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n }\n\n <!-- Bank Transfer Details -->\n @if (showBankDetails()) {\n <div class=\"tw-mt-4 tw-p-3 tw-bg-green-50 tw-rounded tw-border tw-border-green-200\">\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-green-900 tw-mb-3\">Bank Transfer Details</h6>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input \n label=\"Bank Name\" \n formControlName=\"feepay_bank_name\"\n placeholder=\"Enter bank name\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Branch Name\" \n formControlName=\"feepay_bank_branch_name\"\n placeholder=\"Enter branch name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\n <cide-ele-input \n label=\"IFSC Code\" \n formControlName=\"feepay_bank_ifsc_code\"\n placeholder=\"Enter IFSC code\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Account Number\" \n formControlName=\"feepay_bank_account_number\"\n placeholder=\"Enter account number\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n <div class=\"tw-mt-3\">\n <cide-ele-input \n label=\"Transaction Reference\" \n formControlName=\"feepay_transaction_reference\"\n placeholder=\"Enter transaction reference\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n }\n\n <!-- Discount Section -->\n <div class=\"tw-mt-4 tw-p-3 tw-bg-purple-50 tw-rounded tw-border tw-border-purple-200\">\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-purple-900 tw-mb-3\">Discount Information</h6>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input \n label=\"Discount (%)\" \n formControlName=\"feepay_discount_percentage\"\n type=\"number\"\n placeholder=\"0\"\n size=\"sm\"\n [min]=\"0\"\n [max]=\"100\">\n </cide-ele-input>\n\n <cide-ele-select \n label=\"Discount On\" \n formControlName=\"feepay_discount_on\"\n [options]=\"[{value: 'SUB_TOTAL', label: 'Sub Total'}, {value: 'FEE_HEAD', label: 'Fee Head'}, {value: 'TOTAL', label: 'Total'}, {value: 'INSTALLMENT', label: 'Installment'}]\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n <div class=\"tw-mt-3\">\n <cide-ele-textarea \n label=\"Discount Reason\" \n formControlName=\"feepay_discount_reason\"\n placeholder=\"Enter reason for discount...\"\n rows=\"2\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n </div>\n\n <!-- Payment Reference -->\n <div class=\"tw-mt-4\">\n <cide-ele-input \n label=\"Payment Reference\" \n formControlName=\"feepay_payment_reference\"\n placeholder=\"Enter payment reference number\"\n size=\"sm\"\n leadingIcon=\"receipt\">\n </cide-ele-input>\n </div>\n\n <!-- Remarks -->\n <div class=\"tw-mt-4\">\n <cide-ele-textarea \n label=\"Remarks\" \n formControlName=\"feepay_remarks\"\n placeholder=\"Enter any additional remarks...\"\n rows=\"2\" \n size=\"sm\">\n </cide-ele-textarea>\n </div>\n </div>\n }\n\n <!-- Payment Summary -->\n @if (selectedStudent() && selectedFeeItems().length > 0) {\n <div class=\"tw-bg-gradient-to-r tw-from-green-50 tw-to-emerald-50 tw-rounded-lg tw-border tw-border-green-200 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-green-900 tw-mb-3\">Payment Summary</h6>\n \n <div class=\"tw-space-y-3\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n <span class=\"tw-text-gray-700\">Fee Amount:</span>\n <span class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n </div>\n \n @if (totalLateFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n <span class=\"tw-text-gray-700\">Late Fee Amount:</span>\n <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalLateFee()) }}</span>\n </div>\n }\n \n @if (totalPenalty() > 0) {\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n <span class=\"tw-text-gray-700\">Penalty Amount:</span>\n <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalPenalty()) }}</span>\n </div>\n }\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-3 tw-border-t-2 tw-border-green-300 tw-mt-2\">\n <span class=\"tw-text-lg tw-font-bold tw-text-green-900\">Total Payable:</span>\n <span class=\"tw-text-2xl tw-font-bold tw-text-green-700\">{{ formatCurrency(totalPayable()) }}</span>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Form Validation Errors -->\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\" \n [loading]=\"submitting()\" \n leftIcon=\"save\">\n {{ submitting() ? 'Processing...' : 'Record Payment' }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </form>\n</div>\n\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }] });
4556
4632
  }
4557
4633
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentProcessComponent, decorators: [{
4558
4634
  type: Component,
@@ -4564,7 +4640,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
4564
4640
  CideEleButtonComponent,
4565
4641
  CideIconComponent,
4566
4642
  CideSelectComponent
4567
- ], 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" }]
4643
+ ], template: "<!-- Payment Process Form -->\n<div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"paymentForm\" \n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Header Section -->\n <div class=\"tw-table-row tw-w-full tw-h-0\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n \n <!-- Title -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Record Payment</h5>\n </div>\n\n <!-- Actions -->\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n <!-- Back button or other actions can be added here if needed -->\n </div>\n </div>\n </div>\n </div>\n\n <!-- Form Content -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n <div class=\"tw-space-y-4\">\n\n <!-- Student Information -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Student Information</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <div>\n <cide-ele-input \n label=\"Search Student\" \n formControlName=\"student_search\"\n placeholder=\"Enter student name or ID...\"\n size=\"sm\"\n leadingIcon=\"search\"\n (ngModelChange)=\"onStudentSearch($event)\">\n </cide-ele-input>\n \n @if (selectedStudent()) {\n <div class=\"tw-mt-2 tw-p-2 tw-bg-green-50 tw-border tw-border-green-200 tw-rounded\">\n <div class=\"tw-text-sm tw-font-medium tw-text-green-900\">{{ selectedStudent()?.name }}</div>\n <div class=\"tw-text-xs tw-text-green-700\">ID: {{ selectedStudent()?.student_id }}</div>\n @if (selectedStudent()?.class) {\n <div class=\"tw-text-xs tw-text-green-600\">{{ selectedStudent()?.class }} / {{ selectedStudent()?.section }}</div>\n }\n </div>\n }\n </div>\n\n <cide-ele-input \n label=\"Payment Date\" \n formControlName=\"feepay_payment_date\"\n type=\"date\"\n size=\"sm\"\n leadingIcon=\"calendar_today\">\n </cide-ele-input>\n </div>\n </div>\n\n <!-- Fee Selection -->\n @if (selectedStudent() && outstandingFees().length > 0) {\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900\">Select Fees to Pay</h6>\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-input \n formControlName=\"pay_full_outstanding\" \n type=\"checkbox\" \n size=\"sm\"\n (change)=\"togglePayFullOutstanding()\">\n </cide-ele-input>\n <span class=\"tw-text-sm tw-text-gray-700\">Pay full outstanding</span>\n </div>\n <button cideEleButton type=\"button\" variant=\"success\" size=\"xs\" (click)=\"selectAllFees()\">\n Select All\n </button>\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"clearAllFees()\">\n Clear\n </button>\n </div>\n </div>\n\n <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-max-h-80 tw-overflow-y-auto tw-border tw-border-gray-200 tw-rounded-lg tw-p-3\">\n @for (item of feeItemsArray.controls; track $index) {\n <div class=\"tw-flex tw-items-center tw-justify-between tw-p-2 tw-bg-gray-50 tw-rounded tw-border tw-border-gray-200\"\n [formGroupName]=\"$index\">\n \n <div class=\"tw-flex tw-items-center tw-gap-2 tw-flex-1\">\n <cide-ele-input \n formControlName=\"is_selected\" \n type=\"checkbox\" \n size=\"sm\"\n (change)=\"toggleFeeItem($index)\">\n </cide-ele-input>\n \n <div class=\"tw-flex-1\">\n <div class=\"tw-text-sm tw-font-medium tw-text-gray-900\">\n {{ item.get('fee_head')?.value }}\n </div>\n <div class=\"tw-text-xs tw-text-gray-500\">\n Outstanding: {{ formatCurrency(item.get('outstanding_amount')?.value || 0) }}\n @if (item.get('late_fee')?.value > 0) {\n <span class=\"tw-text-red-600\"> | Late Fee: {{ formatCurrency(item.get('late_fee')?.value) }}</span>\n }\n </div>\n </div>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-input \n formControlName=\"amount_paid\"\n type=\"number\"\n placeholder=\"0.00\"\n size=\"sm\"\n [disabled]=\"!item.get('is_selected')?.value\"\n (ngModelChange)=\"onAmountChange($index, $event)\"\n class=\"tw-w-28\">\n </cide-ele-input>\n </div>\n </div>\n }\n </div>\n </div>\n }\n\n <!-- Payment Details -->\n @if (selectedStudent()) {\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-mb-3\">Payment Details</h6>\n \n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\n <cide-ele-select \n label=\"Payment Method\" \n formControlName=\"feepay_payment_method\"\n [options]=\"paymentMethodOptions\"\n size=\"sm\"\n leadingIcon=\"payment\">\n </cide-ele-select>\n\n <cide-ele-select \n label=\"Payment Mode\" \n formControlName=\"feepay_payment_mode\"\n [options]=\"[{value: 'OFFLINE', label: 'Offline'}, {value: 'ONLINE', label: 'Online'}]\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <!-- Cheque/DD Details -->\n @if (showChequeDetails()) {\n <div class=\"tw-mt-4 tw-p-3 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-mb-3\">Cheque/DD Details</h6>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input \n label=\"Cheque/DD Number\" \n formControlName=\"feepay_cheque_number\"\n placeholder=\"Enter cheque/DD number\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Cheque/DD Date\" \n formControlName=\"feepay_cheque_date\"\n type=\"date\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\n <cide-ele-input \n label=\"Bank Name\" \n formControlName=\"feepay_bank_name\"\n placeholder=\"Enter bank name\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Branch Name\" \n formControlName=\"feepay_bank_branch_name\"\n placeholder=\"Enter branch name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n <div class=\"tw-mt-3\">\n <cide-ele-input \n label=\"IFSC Code\" \n formControlName=\"feepay_bank_ifsc_code\"\n placeholder=\"Enter IFSC code\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n <div class=\"tw-mt-3\">\n <cide-ele-input \n label=\"Instrument Date\" \n formControlName=\"feepay_instrument_date\"\n type=\"date\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n }\n\n <!-- Bank Transfer Details -->\n @if (showBankDetails()) {\n <div class=\"tw-mt-4 tw-p-3 tw-bg-green-50 tw-rounded tw-border tw-border-green-200\">\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-green-900 tw-mb-3\">Bank Transfer Details</h6>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input \n label=\"Bank Name\" \n formControlName=\"feepay_bank_name\"\n placeholder=\"Enter bank name\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Branch Name\" \n formControlName=\"feepay_bank_branch_name\"\n placeholder=\"Enter branch name\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3 tw-mt-3\">\n <cide-ele-input \n label=\"IFSC Code\" \n formControlName=\"feepay_bank_ifsc_code\"\n placeholder=\"Enter IFSC code\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input \n label=\"Account Number\" \n formControlName=\"feepay_bank_account_number\"\n placeholder=\"Enter account number\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n <div class=\"tw-mt-3\">\n <cide-ele-input \n label=\"Transaction Reference\" \n formControlName=\"feepay_transaction_reference\"\n placeholder=\"Enter transaction reference\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n </div>\n }\n\n <!-- Discount Section -->\n <div class=\"tw-mt-4 tw-p-3 tw-bg-purple-50 tw-rounded tw-border tw-border-purple-200\">\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-purple-900 tw-mb-3\">Discount Information</h6>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input \n label=\"Discount (%)\" \n formControlName=\"feepay_discount_percentage\"\n type=\"number\"\n placeholder=\"0\"\n size=\"sm\"\n [min]=\"0\"\n [max]=\"100\">\n </cide-ele-input>\n\n <cide-ele-select \n label=\"Discount On\" \n formControlName=\"feepay_discount_on\"\n [options]=\"[{value: 'SUB_TOTAL', label: 'Sub Total'}, {value: 'FEE_HEAD', label: 'Fee Head'}, {value: 'TOTAL', label: 'Total'}, {value: 'INSTALLMENT', label: 'Installment'}]\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n <div class=\"tw-mt-3\">\n <cide-ele-textarea \n label=\"Discount Reason\" \n formControlName=\"feepay_discount_reason\"\n placeholder=\"Enter reason for discount...\"\n rows=\"2\"\n size=\"sm\">\n </cide-ele-textarea>\n </div>\n </div>\n\n <!-- Payment Reference -->\n <div class=\"tw-mt-4\">\n <cide-ele-input \n label=\"Payment Reference\" \n formControlName=\"feepay_payment_reference\"\n placeholder=\"Enter payment reference number\"\n size=\"sm\"\n leadingIcon=\"receipt\">\n </cide-ele-input>\n </div>\n\n <!-- Remarks -->\n <div class=\"tw-mt-4\">\n <cide-ele-textarea \n label=\"Remarks\" \n formControlName=\"feepay_remarks\"\n placeholder=\"Enter any additional remarks...\"\n rows=\"2\" \n size=\"sm\">\n </cide-ele-textarea>\n </div>\n </div>\n }\n\n <!-- Payment Summary -->\n @if (selectedStudent() && selectedFeeItems().length > 0) {\n <div class=\"tw-bg-gradient-to-r tw-from-green-50 tw-to-emerald-50 tw-rounded-lg tw-border tw-border-green-200 tw-p-4\">\n <h6 class=\"tw-text-base tw-font-semibold tw-text-green-900 tw-mb-3\">Payment Summary</h6>\n \n <div class=\"tw-space-y-3\">\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n <span class=\"tw-text-gray-700\">Fee Amount:</span>\n <span class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n </div>\n \n @if (totalLateFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n <span class=\"tw-text-gray-700\">Late Fee Amount:</span>\n <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalLateFee()) }}</span>\n </div>\n }\n \n @if (totalPenalty() > 0) {\n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-2 tw-border-b tw-border-green-200\">\n <span class=\"tw-text-gray-700\">Penalty Amount:</span>\n <span class=\"tw-font-semibold tw-text-red-600\">{{ formatCurrency(totalPenalty()) }}</span>\n </div>\n }\n \n <div class=\"tw-flex tw-justify-between tw-items-center tw-py-3 tw-border-t-2 tw-border-green-300 tw-mt-2\">\n <span class=\"tw-text-lg tw-font-bold tw-text-green-900\">Total Payable:</span>\n <span class=\"tw-text-2xl tw-font-bold tw-text-green-700\">{{ formatCurrency(totalPayable()) }}</span>\n </div>\n </div>\n </div>\n }\n </div>\n\n <!-- Form Validation Errors -->\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\" \n [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\" \n [loading]=\"submitting()\" \n leftIcon=\"save\">\n {{ submitting() ? 'Processing...' : 'Record Payment' }}\n </button>\n </div>\n </div>\n </div>\n </div>\n </form>\n</div>\n\n" }]
4568
4644
  }] });
4569
4645
 
4570
4646
  var feePaymentProcess_component = /*#__PURE__*/Object.freeze({
@@ -5338,288 +5414,288 @@ class DiscountRulesComponent {
5338
5414
  }
5339
5415
  }
5340
5416
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DiscountRulesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
5341
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DiscountRulesComponent, isStandalone: true, selector: "cide-discount-rules", ngImport: i0, template: `
5342
- <div class="discount-rules-container">
5343
- <div class="header">
5344
- <h1>Discount Rules Management</h1>
5345
- <button class="btn btn-primary" (click)="openRuleModal()">Create New Rule</button>
5346
- </div>
5347
-
5348
- <!-- Tabs -->
5349
- <div class="tabs">
5350
- <button class="tab" [class.active]="activeTab() === 'rules'" (click)="activeTab.set('rules')">Discount Rules</button>
5351
- <button class="tab" [class.active]="activeTab() === 'applied'" (click)="activeTab.set('applied')">Applied Discounts</button>
5352
- <button class="tab" [class.active]="activeTab() === 'scholarships'" (click)="activeTab.set('scholarships')">Scholarships</button>
5353
- </div>
5354
-
5355
- <!-- Rules Tab -->
5356
- @if (activeTab() === 'rules') {
5357
- <div class="rules-section">
5358
- <div class="table-container">
5359
- <table>
5360
- <thead>
5361
- <tr>
5362
- <th>Rule Name</th>
5363
- <th>Rule Code</th>
5364
- <th>Discount Type</th>
5365
- <th>Discount Value</th>
5366
- <th>Applies To</th>
5367
- <th>Priority</th>
5368
- <th>Auto Apply</th>
5369
- <th>Status</th>
5370
- <th>Actions</th>
5371
- </tr>
5372
- </thead>
5373
- <tbody>
5374
- @for (rule of discountRules(); track rule.id) {
5375
- <tr>
5376
- <td>{{ rule.name }}</td>
5377
- <td>{{ rule.code }}</td>
5378
- <td><span class="badge">{{ rule.discount_type }}</span></td>
5379
- <td class="discount-value">{{ rule.discount_type === 'PERCENTAGE' ? rule.value + '%' : '₹' + rule.value }}</td>
5380
- <td>{{ rule.applies_to }}</td>
5381
- <td><span class="priority">{{ rule.priority }}</span></td>
5382
- <td><span class="status-badge" [class.active]="rule.auto_apply">{{ rule.auto_apply ? 'Yes' : 'No' }}</span></td>
5383
- <td><span class="status-badge" [class.active]="rule.status === 'ACTIVE'">{{ rule.status }}</span></td>
5384
- <td>
5385
- <button class="btn-icon" (click)="editRule(rule)">✏️</button>
5386
- <button class="btn-icon" (click)="toggleRuleStatus(rule)">🔄</button>
5387
- <button class="btn-icon" (click)="deleteRule(rule)">🗑️</button>
5388
- </td>
5389
- </tr>
5390
- }
5391
- </tbody>
5392
- </table>
5393
- </div>
5394
- </div>
5395
- }
5396
-
5397
- <!-- Rule Modal -->
5398
- @if (showRuleModal()) {
5399
- <div class="modal-overlay" (click)="closeRuleModal()">
5400
- <div class="modal-content" (click)="$event.stopPropagation()">
5401
- <div class="modal-header">
5402
- <h2>{{ editingRule() ? 'Edit' : 'Create' }} Discount Rule</h2>
5403
- <button class="close-btn" (click)="closeRuleModal()">×</button>
5404
- </div>
5405
- <form [formGroup]="ruleForm" class="modal-body">
5406
- <div class="form-row">
5407
- <div class="form-group">
5408
- <label>Rule Name *</label>
5409
- <input type="text" formControlName="rule_name" placeholder="e.g., Sibling Discount" />
5410
- </div>
5411
- <div class="form-group">
5412
- <label>Rule Code *</label>
5413
- <input type="text" formControlName="rule_code" placeholder="e.g., SIBLING_DISC" />
5414
- </div>
5415
- </div>
5416
- <div class="form-group">
5417
- <label>Description</label>
5418
- <textarea formControlName="description" rows="3" placeholder="Describe the discount rule..."></textarea>
5419
- </div>
5420
- <div class="form-row">
5421
- <div class="form-group">
5422
- <label>Discount Type *</label>
5423
- <select formControlName="discount_type">
5424
- <option value="PERCENTAGE">Percentage</option>
5425
- <option value="FIXED_AMOUNT">Fixed Amount</option>
5426
- </select>
5427
- </div>
5428
- <div class="form-group">
5429
- <label>Discount Value *</label>
5430
- <input type="number" formControlName="discount_value" placeholder="Enter value" />
5431
- </div>
5432
- </div>
5433
- <div class="form-group">
5434
- <label>Applies To Fee Categories *</label>
5435
- <select formControlName="applies_to" multiple>
5436
- <option value="ALL">All Categories</option>
5437
- <option value="TUITION">Tuition</option>
5438
- <option value="EXAM">Exam Fees</option>
5439
- <option value="LIBRARY">Library</option>
5440
- <option value="LAB">Lab</option>
5441
- <option value="SPORTS">Sports</option>
5442
- <option value="TRANSPORT">Transport</option>
5443
- </select>
5444
- </div>
5445
- <div class="form-group">
5446
- <label>Criteria (JSON Format)</label>
5447
- <textarea formControlName="criteria_json" rows="4" placeholder='{"sibling_count": ">= 1", "staff_role": "TEACHER"}'></textarea>
5448
- <small>Define conditions for automatic discount application</small>
5449
- </div>
5450
- <div class="form-row">
5451
- <div class="form-group">
5452
- <label>Priority</label>
5453
- <input type="number" formControlName="priority" placeholder="1" />
5454
- <small>Higher priority rules apply first</small>
5455
- </div>
5456
- <div class="form-group checkbox-group">
5457
- <label><input type="checkbox" formControlName="auto_apply" /> Auto Apply</label>
5458
- <label><input type="checkbox" formControlName="stackable" /> Stackable with other discounts</label>
5459
- </div>
5460
- </div>
5461
- <div class="form-row">
5462
- <div class="form-group">
5463
- <label>Valid From</label>
5464
- <input type="date" formControlName="valid_from" />
5465
- </div>
5466
- <div class="form-group">
5467
- <label>Valid To</label>
5468
- <input type="date" formControlName="valid_to" />
5469
- </div>
5470
- </div>
5471
- </form>
5472
- <div class="modal-footer">
5473
- <button class="btn btn-secondary" (click)="closeRuleModal()">Cancel</button>
5474
- <button class="btn btn-primary" (click)="saveRule()" [disabled]="ruleForm.invalid">Save Rule</button>
5475
- </div>
5476
- </div>
5477
- </div>
5478
- }
5479
- </div>
5417
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: DiscountRulesComponent, isStandalone: true, selector: "cide-discount-rules", ngImport: i0, template: `
5418
+ <div class="discount-rules-container">
5419
+ <div class="header">
5420
+ <h1>Discount Rules Management</h1>
5421
+ <button class="btn btn-primary" (click)="openRuleModal()">Create New Rule</button>
5422
+ </div>
5423
+
5424
+ <!-- Tabs -->
5425
+ <div class="tabs">
5426
+ <button class="tab" [class.active]="activeTab() === 'rules'" (click)="activeTab.set('rules')">Discount Rules</button>
5427
+ <button class="tab" [class.active]="activeTab() === 'applied'" (click)="activeTab.set('applied')">Applied Discounts</button>
5428
+ <button class="tab" [class.active]="activeTab() === 'scholarships'" (click)="activeTab.set('scholarships')">Scholarships</button>
5429
+ </div>
5430
+
5431
+ <!-- Rules Tab -->
5432
+ @if (activeTab() === 'rules') {
5433
+ <div class="rules-section">
5434
+ <div class="table-container">
5435
+ <table>
5436
+ <thead>
5437
+ <tr>
5438
+ <th>Rule Name</th>
5439
+ <th>Rule Code</th>
5440
+ <th>Discount Type</th>
5441
+ <th>Discount Value</th>
5442
+ <th>Applies To</th>
5443
+ <th>Priority</th>
5444
+ <th>Auto Apply</th>
5445
+ <th>Status</th>
5446
+ <th>Actions</th>
5447
+ </tr>
5448
+ </thead>
5449
+ <tbody>
5450
+ @for (rule of discountRules(); track rule.id) {
5451
+ <tr>
5452
+ <td>{{ rule.name }}</td>
5453
+ <td>{{ rule.code }}</td>
5454
+ <td><span class="badge">{{ rule.discount_type }}</span></td>
5455
+ <td class="discount-value">{{ rule.discount_type === 'PERCENTAGE' ? rule.value + '%' : '₹' + rule.value }}</td>
5456
+ <td>{{ rule.applies_to }}</td>
5457
+ <td><span class="priority">{{ rule.priority }}</span></td>
5458
+ <td><span class="status-badge" [class.active]="rule.auto_apply">{{ rule.auto_apply ? 'Yes' : 'No' }}</span></td>
5459
+ <td><span class="status-badge" [class.active]="rule.status === 'ACTIVE'">{{ rule.status }}</span></td>
5460
+ <td>
5461
+ <button class="btn-icon" (click)="editRule(rule)">✏️</button>
5462
+ <button class="btn-icon" (click)="toggleRuleStatus(rule)">🔄</button>
5463
+ <button class="btn-icon" (click)="deleteRule(rule)">🗑️</button>
5464
+ </td>
5465
+ </tr>
5466
+ }
5467
+ </tbody>
5468
+ </table>
5469
+ </div>
5470
+ </div>
5471
+ }
5472
+
5473
+ <!-- Rule Modal -->
5474
+ @if (showRuleModal()) {
5475
+ <div class="modal-overlay" (click)="closeRuleModal()">
5476
+ <div class="modal-content" (click)="$event.stopPropagation()">
5477
+ <div class="modal-header">
5478
+ <h2>{{ editingRule() ? 'Edit' : 'Create' }} Discount Rule</h2>
5479
+ <button class="close-btn" (click)="closeRuleModal()">×</button>
5480
+ </div>
5481
+ <form [formGroup]="ruleForm" class="modal-body">
5482
+ <div class="form-row">
5483
+ <div class="form-group">
5484
+ <label>Rule Name</label>
5485
+ <input type="text" formControlName="rule_name" placeholder="e.g., Sibling Discount" />
5486
+ </div>
5487
+ <div class="form-group">
5488
+ <label>Rule Code</label>
5489
+ <input type="text" formControlName="rule_code" placeholder="e.g., SIBLING_DISC" />
5490
+ </div>
5491
+ </div>
5492
+ <div class="form-group">
5493
+ <label>Description</label>
5494
+ <textarea formControlName="description" rows="3" placeholder="Describe the discount rule..."></textarea>
5495
+ </div>
5496
+ <div class="form-row">
5497
+ <div class="form-group">
5498
+ <label>Discount Type</label>
5499
+ <select formControlName="discount_type">
5500
+ <option value="PERCENTAGE">Percentage</option>
5501
+ <option value="FIXED_AMOUNT">Fixed Amount</option>
5502
+ </select>
5503
+ </div>
5504
+ <div class="form-group">
5505
+ <label>Discount Value</label>
5506
+ <input type="number" formControlName="discount_value" placeholder="Enter value" />
5507
+ </div>
5508
+ </div>
5509
+ <div class="form-group">
5510
+ <label>Applies To Fee Categories</label>
5511
+ <select formControlName="applies_to" multiple>
5512
+ <option value="ALL">All Categories</option>
5513
+ <option value="TUITION">Tuition</option>
5514
+ <option value="EXAM">Exam Fees</option>
5515
+ <option value="LIBRARY">Library</option>
5516
+ <option value="LAB">Lab</option>
5517
+ <option value="SPORTS">Sports</option>
5518
+ <option value="TRANSPORT">Transport</option>
5519
+ </select>
5520
+ </div>
5521
+ <div class="form-group">
5522
+ <label>Criteria (JSON Format)</label>
5523
+ <textarea formControlName="criteria_json" rows="4" placeholder='{"sibling_count": ">= 1", "staff_role": "TEACHER"}'></textarea>
5524
+ <small>Define conditions for automatic discount application</small>
5525
+ </div>
5526
+ <div class="form-row">
5527
+ <div class="form-group">
5528
+ <label>Priority</label>
5529
+ <input type="number" formControlName="priority" placeholder="1" />
5530
+ <small>Higher priority rules apply first</small>
5531
+ </div>
5532
+ <div class="form-group checkbox-group">
5533
+ <label><input type="checkbox" formControlName="auto_apply" /> Auto Apply</label>
5534
+ <label><input type="checkbox" formControlName="stackable" /> Stackable with other discounts</label>
5535
+ </div>
5536
+ </div>
5537
+ <div class="form-row">
5538
+ <div class="form-group">
5539
+ <label>Valid From</label>
5540
+ <input type="date" formControlName="valid_from" />
5541
+ </div>
5542
+ <div class="form-group">
5543
+ <label>Valid To</label>
5544
+ <input type="date" formControlName="valid_to" />
5545
+ </div>
5546
+ </div>
5547
+ </form>
5548
+ <div class="modal-footer">
5549
+ <button class="btn btn-secondary" (click)="closeRuleModal()">Cancel</button>
5550
+ <button class="btn btn-primary" (click)="saveRule()" [disabled]="ruleForm.invalid">Save Rule</button>
5551
+ </div>
5552
+ </div>
5553
+ </div>
5554
+ }
5555
+ </div>
5480
5556
  `, isInline: true, styles: [".discount-rules-container{padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.btn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:14px}.btn-primary{background:#007bff;color:#fff}.btn-secondary{background:#6c757d;color:#fff}.tabs{display:flex;gap:10px;margin-bottom:20px;border-bottom:2px solid #e0e0e0}.tab{padding:12px 24px;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-weight:500}.tab.active{border-bottom-color:#007bff;color:#007bff}.table-container{overflow-x:auto;background:#fff;border-radius:8px;border:1px solid #e0e0e0}table{width:100%;border-collapse:collapse}thead{background:#f8f9fa}th{padding:12px;text-align:left;font-weight:600;border-bottom:2px solid #dee2e6}td{padding:12px;border-bottom:1px solid #dee2e6}.badge{padding:4px 12px;border-radius:12px;font-size:12px;background:#e3f2fd;color:#1976d2}.discount-value{font-weight:600;color:#28a745}.priority{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;background:#ffc107;color:#fff;border-radius:50%;font-weight:700}.status-badge{padding:4px 12px;border-radius:12px;font-size:12px;background:#f8d7da;color:#721c24}.status-badge.active{background:#d4edda;color:#155724}.btn-icon{background:none;border:none;cursor:pointer;font-size:18px;padding:4px}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;max-width:800px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e0e0e0}.close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:#666}.modal-body{padding:20px}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid #e0e0e0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:500;font-size:14px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px}.form-group small{color:#666;font-size:12px}.checkbox-group{display:flex;flex-direction:column;gap:8px}.checkbox-group label{display:flex;align-items:center;gap:8px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { kind: "directive", type: i1$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.SelectMultipleControlValueAccessor, selector: "select[multiple][formControlName],select[multiple][formControl],select[multiple][ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] });
5481
5557
  }
5482
5558
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: DiscountRulesComponent, decorators: [{
5483
5559
  type: Component,
5484
- args: [{ selector: 'cide-discount-rules', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: `
5485
- <div class="discount-rules-container">
5486
- <div class="header">
5487
- <h1>Discount Rules Management</h1>
5488
- <button class="btn btn-primary" (click)="openRuleModal()">Create New Rule</button>
5489
- </div>
5490
-
5491
- <!-- Tabs -->
5492
- <div class="tabs">
5493
- <button class="tab" [class.active]="activeTab() === 'rules'" (click)="activeTab.set('rules')">Discount Rules</button>
5494
- <button class="tab" [class.active]="activeTab() === 'applied'" (click)="activeTab.set('applied')">Applied Discounts</button>
5495
- <button class="tab" [class.active]="activeTab() === 'scholarships'" (click)="activeTab.set('scholarships')">Scholarships</button>
5496
- </div>
5497
-
5498
- <!-- Rules Tab -->
5499
- @if (activeTab() === 'rules') {
5500
- <div class="rules-section">
5501
- <div class="table-container">
5502
- <table>
5503
- <thead>
5504
- <tr>
5505
- <th>Rule Name</th>
5506
- <th>Rule Code</th>
5507
- <th>Discount Type</th>
5508
- <th>Discount Value</th>
5509
- <th>Applies To</th>
5510
- <th>Priority</th>
5511
- <th>Auto Apply</th>
5512
- <th>Status</th>
5513
- <th>Actions</th>
5514
- </tr>
5515
- </thead>
5516
- <tbody>
5517
- @for (rule of discountRules(); track rule.id) {
5518
- <tr>
5519
- <td>{{ rule.name }}</td>
5520
- <td>{{ rule.code }}</td>
5521
- <td><span class="badge">{{ rule.discount_type }}</span></td>
5522
- <td class="discount-value">{{ rule.discount_type === 'PERCENTAGE' ? rule.value + '%' : '₹' + rule.value }}</td>
5523
- <td>{{ rule.applies_to }}</td>
5524
- <td><span class="priority">{{ rule.priority }}</span></td>
5525
- <td><span class="status-badge" [class.active]="rule.auto_apply">{{ rule.auto_apply ? 'Yes' : 'No' }}</span></td>
5526
- <td><span class="status-badge" [class.active]="rule.status === 'ACTIVE'">{{ rule.status }}</span></td>
5527
- <td>
5528
- <button class="btn-icon" (click)="editRule(rule)">✏️</button>
5529
- <button class="btn-icon" (click)="toggleRuleStatus(rule)">🔄</button>
5530
- <button class="btn-icon" (click)="deleteRule(rule)">🗑️</button>
5531
- </td>
5532
- </tr>
5533
- }
5534
- </tbody>
5535
- </table>
5536
- </div>
5537
- </div>
5538
- }
5539
-
5540
- <!-- Rule Modal -->
5541
- @if (showRuleModal()) {
5542
- <div class="modal-overlay" (click)="closeRuleModal()">
5543
- <div class="modal-content" (click)="$event.stopPropagation()">
5544
- <div class="modal-header">
5545
- <h2>{{ editingRule() ? 'Edit' : 'Create' }} Discount Rule</h2>
5546
- <button class="close-btn" (click)="closeRuleModal()">×</button>
5547
- </div>
5548
- <form [formGroup]="ruleForm" class="modal-body">
5549
- <div class="form-row">
5550
- <div class="form-group">
5551
- <label>Rule Name *</label>
5552
- <input type="text" formControlName="rule_name" placeholder="e.g., Sibling Discount" />
5553
- </div>
5554
- <div class="form-group">
5555
- <label>Rule Code *</label>
5556
- <input type="text" formControlName="rule_code" placeholder="e.g., SIBLING_DISC" />
5557
- </div>
5558
- </div>
5559
- <div class="form-group">
5560
- <label>Description</label>
5561
- <textarea formControlName="description" rows="3" placeholder="Describe the discount rule..."></textarea>
5562
- </div>
5563
- <div class="form-row">
5564
- <div class="form-group">
5565
- <label>Discount Type *</label>
5566
- <select formControlName="discount_type">
5567
- <option value="PERCENTAGE">Percentage</option>
5568
- <option value="FIXED_AMOUNT">Fixed Amount</option>
5569
- </select>
5570
- </div>
5571
- <div class="form-group">
5572
- <label>Discount Value *</label>
5573
- <input type="number" formControlName="discount_value" placeholder="Enter value" />
5574
- </div>
5575
- </div>
5576
- <div class="form-group">
5577
- <label>Applies To Fee Categories *</label>
5578
- <select formControlName="applies_to" multiple>
5579
- <option value="ALL">All Categories</option>
5580
- <option value="TUITION">Tuition</option>
5581
- <option value="EXAM">Exam Fees</option>
5582
- <option value="LIBRARY">Library</option>
5583
- <option value="LAB">Lab</option>
5584
- <option value="SPORTS">Sports</option>
5585
- <option value="TRANSPORT">Transport</option>
5586
- </select>
5587
- </div>
5588
- <div class="form-group">
5589
- <label>Criteria (JSON Format)</label>
5590
- <textarea formControlName="criteria_json" rows="4" placeholder='{"sibling_count": ">= 1", "staff_role": "TEACHER"}'></textarea>
5591
- <small>Define conditions for automatic discount application</small>
5592
- </div>
5593
- <div class="form-row">
5594
- <div class="form-group">
5595
- <label>Priority</label>
5596
- <input type="number" formControlName="priority" placeholder="1" />
5597
- <small>Higher priority rules apply first</small>
5598
- </div>
5599
- <div class="form-group checkbox-group">
5600
- <label><input type="checkbox" formControlName="auto_apply" /> Auto Apply</label>
5601
- <label><input type="checkbox" formControlName="stackable" /> Stackable with other discounts</label>
5602
- </div>
5603
- </div>
5604
- <div class="form-row">
5605
- <div class="form-group">
5606
- <label>Valid From</label>
5607
- <input type="date" formControlName="valid_from" />
5608
- </div>
5609
- <div class="form-group">
5610
- <label>Valid To</label>
5611
- <input type="date" formControlName="valid_to" />
5612
- </div>
5613
- </div>
5614
- </form>
5615
- <div class="modal-footer">
5616
- <button class="btn btn-secondary" (click)="closeRuleModal()">Cancel</button>
5617
- <button class="btn btn-primary" (click)="saveRule()" [disabled]="ruleForm.invalid">Save Rule</button>
5618
- </div>
5619
- </div>
5620
- </div>
5621
- }
5622
- </div>
5560
+ args: [{ selector: 'cide-discount-rules', standalone: true, imports: [CommonModule, ReactiveFormsModule], template: `
5561
+ <div class="discount-rules-container">
5562
+ <div class="header">
5563
+ <h1>Discount Rules Management</h1>
5564
+ <button class="btn btn-primary" (click)="openRuleModal()">Create New Rule</button>
5565
+ </div>
5566
+
5567
+ <!-- Tabs -->
5568
+ <div class="tabs">
5569
+ <button class="tab" [class.active]="activeTab() === 'rules'" (click)="activeTab.set('rules')">Discount Rules</button>
5570
+ <button class="tab" [class.active]="activeTab() === 'applied'" (click)="activeTab.set('applied')">Applied Discounts</button>
5571
+ <button class="tab" [class.active]="activeTab() === 'scholarships'" (click)="activeTab.set('scholarships')">Scholarships</button>
5572
+ </div>
5573
+
5574
+ <!-- Rules Tab -->
5575
+ @if (activeTab() === 'rules') {
5576
+ <div class="rules-section">
5577
+ <div class="table-container">
5578
+ <table>
5579
+ <thead>
5580
+ <tr>
5581
+ <th>Rule Name</th>
5582
+ <th>Rule Code</th>
5583
+ <th>Discount Type</th>
5584
+ <th>Discount Value</th>
5585
+ <th>Applies To</th>
5586
+ <th>Priority</th>
5587
+ <th>Auto Apply</th>
5588
+ <th>Status</th>
5589
+ <th>Actions</th>
5590
+ </tr>
5591
+ </thead>
5592
+ <tbody>
5593
+ @for (rule of discountRules(); track rule.id) {
5594
+ <tr>
5595
+ <td>{{ rule.name }}</td>
5596
+ <td>{{ rule.code }}</td>
5597
+ <td><span class="badge">{{ rule.discount_type }}</span></td>
5598
+ <td class="discount-value">{{ rule.discount_type === 'PERCENTAGE' ? rule.value + '%' : '₹' + rule.value }}</td>
5599
+ <td>{{ rule.applies_to }}</td>
5600
+ <td><span class="priority">{{ rule.priority }}</span></td>
5601
+ <td><span class="status-badge" [class.active]="rule.auto_apply">{{ rule.auto_apply ? 'Yes' : 'No' }}</span></td>
5602
+ <td><span class="status-badge" [class.active]="rule.status === 'ACTIVE'">{{ rule.status }}</span></td>
5603
+ <td>
5604
+ <button class="btn-icon" (click)="editRule(rule)">✏️</button>
5605
+ <button class="btn-icon" (click)="toggleRuleStatus(rule)">🔄</button>
5606
+ <button class="btn-icon" (click)="deleteRule(rule)">🗑️</button>
5607
+ </td>
5608
+ </tr>
5609
+ }
5610
+ </tbody>
5611
+ </table>
5612
+ </div>
5613
+ </div>
5614
+ }
5615
+
5616
+ <!-- Rule Modal -->
5617
+ @if (showRuleModal()) {
5618
+ <div class="modal-overlay" (click)="closeRuleModal()">
5619
+ <div class="modal-content" (click)="$event.stopPropagation()">
5620
+ <div class="modal-header">
5621
+ <h2>{{ editingRule() ? 'Edit' : 'Create' }} Discount Rule</h2>
5622
+ <button class="close-btn" (click)="closeRuleModal()">×</button>
5623
+ </div>
5624
+ <form [formGroup]="ruleForm" class="modal-body">
5625
+ <div class="form-row">
5626
+ <div class="form-group">
5627
+ <label>Rule Name</label>
5628
+ <input type="text" formControlName="rule_name" placeholder="e.g., Sibling Discount" />
5629
+ </div>
5630
+ <div class="form-group">
5631
+ <label>Rule Code</label>
5632
+ <input type="text" formControlName="rule_code" placeholder="e.g., SIBLING_DISC" />
5633
+ </div>
5634
+ </div>
5635
+ <div class="form-group">
5636
+ <label>Description</label>
5637
+ <textarea formControlName="description" rows="3" placeholder="Describe the discount rule..."></textarea>
5638
+ </div>
5639
+ <div class="form-row">
5640
+ <div class="form-group">
5641
+ <label>Discount Type</label>
5642
+ <select formControlName="discount_type">
5643
+ <option value="PERCENTAGE">Percentage</option>
5644
+ <option value="FIXED_AMOUNT">Fixed Amount</option>
5645
+ </select>
5646
+ </div>
5647
+ <div class="form-group">
5648
+ <label>Discount Value</label>
5649
+ <input type="number" formControlName="discount_value" placeholder="Enter value" />
5650
+ </div>
5651
+ </div>
5652
+ <div class="form-group">
5653
+ <label>Applies To Fee Categories</label>
5654
+ <select formControlName="applies_to" multiple>
5655
+ <option value="ALL">All Categories</option>
5656
+ <option value="TUITION">Tuition</option>
5657
+ <option value="EXAM">Exam Fees</option>
5658
+ <option value="LIBRARY">Library</option>
5659
+ <option value="LAB">Lab</option>
5660
+ <option value="SPORTS">Sports</option>
5661
+ <option value="TRANSPORT">Transport</option>
5662
+ </select>
5663
+ </div>
5664
+ <div class="form-group">
5665
+ <label>Criteria (JSON Format)</label>
5666
+ <textarea formControlName="criteria_json" rows="4" placeholder='{"sibling_count": ">= 1", "staff_role": "TEACHER"}'></textarea>
5667
+ <small>Define conditions for automatic discount application</small>
5668
+ </div>
5669
+ <div class="form-row">
5670
+ <div class="form-group">
5671
+ <label>Priority</label>
5672
+ <input type="number" formControlName="priority" placeholder="1" />
5673
+ <small>Higher priority rules apply first</small>
5674
+ </div>
5675
+ <div class="form-group checkbox-group">
5676
+ <label><input type="checkbox" formControlName="auto_apply" /> Auto Apply</label>
5677
+ <label><input type="checkbox" formControlName="stackable" /> Stackable with other discounts</label>
5678
+ </div>
5679
+ </div>
5680
+ <div class="form-row">
5681
+ <div class="form-group">
5682
+ <label>Valid From</label>
5683
+ <input type="date" formControlName="valid_from" />
5684
+ </div>
5685
+ <div class="form-group">
5686
+ <label>Valid To</label>
5687
+ <input type="date" formControlName="valid_to" />
5688
+ </div>
5689
+ </div>
5690
+ </form>
5691
+ <div class="modal-footer">
5692
+ <button class="btn btn-secondary" (click)="closeRuleModal()">Cancel</button>
5693
+ <button class="btn btn-primary" (click)="saveRule()" [disabled]="ruleForm.invalid">Save Rule</button>
5694
+ </div>
5695
+ </div>
5696
+ </div>
5697
+ }
5698
+ </div>
5623
5699
  `, styles: [".discount-rules-container{padding:20px}.header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.btn{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:14px}.btn-primary{background:#007bff;color:#fff}.btn-secondary{background:#6c757d;color:#fff}.tabs{display:flex;gap:10px;margin-bottom:20px;border-bottom:2px solid #e0e0e0}.tab{padding:12px 24px;background:none;border:none;border-bottom:3px solid transparent;cursor:pointer;font-weight:500}.tab.active{border-bottom-color:#007bff;color:#007bff}.table-container{overflow-x:auto;background:#fff;border-radius:8px;border:1px solid #e0e0e0}table{width:100%;border-collapse:collapse}thead{background:#f8f9fa}th{padding:12px;text-align:left;font-weight:600;border-bottom:2px solid #dee2e6}td{padding:12px;border-bottom:1px solid #dee2e6}.badge{padding:4px 12px;border-radius:12px;font-size:12px;background:#e3f2fd;color:#1976d2}.discount-value{font-weight:600;color:#28a745}.priority{display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;background:#ffc107;color:#fff;border-radius:50%;font-weight:700}.status-badge{padding:4px 12px;border-radius:12px;font-size:12px;background:#f8d7da;color:#721c24}.status-badge.active{background:#d4edda;color:#155724}.btn-icon{background:none;border:none;cursor:pointer;font-size:18px;padding:4px}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:8px;max-width:800px;width:90%;max-height:90vh;overflow-y:auto}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:20px;border-bottom:1px solid #e0e0e0}.close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:#666}.modal-body{padding:20px}.modal-footer{display:flex;justify-content:flex-end;gap:10px;padding:20px;border-top:1px solid #e0e0e0}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-group{margin-bottom:15px}.form-group label{display:block;margin-bottom:5px;font-weight:500;font-size:14px}.form-group input,.form-group select,.form-group textarea{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px}.form-group small{color:#666;font-size:12px}.checkbox-group{display:flex;flex-direction:column;gap:8px}.checkbox-group label{display:flex;align-items:center;gap:8px}\n"] }]
5624
5700
  }] });
5625
5701
 
@@ -6546,7 +6622,7 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
6546
6622
  });
6547
6623
  }
6548
6624
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TemplateDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
6549
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TemplateDesignerComponent, isStandalone: true, selector: "cide-receipt-template-designer", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "htmlEditorRef", first: true, predicate: ["htmlEditor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n \n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n Load Template\n </button>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n Save Template\n </button>\n </div>\n\n <!-- Main Content - Three Column Layout -->\n <div class=\"tw-w-full tw-h-full tw-overflow-hidden tw-flex tw-flex-col\" style=\"height: calc(100vh - 120px); max-width: 100vw;\">\n <div class=\"tw-grid tw-grid-cols-12 tw-gap-3 tw-flex-1 tw-min-h-0 tw-p-3\">\n \n <!-- Left Sidebar - Tag Categories & Tags -->\n <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col tw-min-w-0 tw-h-full\">\n <!-- Tag Categories Header -->\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n <form [formGroup]=\"templateForm\">\n <cide-ele-input\n formControlName=\"tag_search\"\n placeholder=\"Search tags...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </form>\n </div>\n\n <!-- Category Tabs -->\n <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n @for (category of tagCategories; track category.id) {\n <button\n type=\"button\"\n class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n (click)=\"onCategoryChange(category.id)\"\n [title]=\"category.name\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n </button>\n }\n </div>\n\n <!-- Tags List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2 tw-min-h-0\">\n @if (filteredTags().length > 0) {\n <div class=\"tw-space-y-1\">\n @for (tag of filteredTags(); track tag.code) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n (click)=\"insertTag(tag)\"\n [title]=\"tag.description\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n {{ tag.code }}\n </code>\n <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n @if (tag.example) {\n <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n }\n </div>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n </div>\n </button>\n }\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n <p class=\"tw-text-xs\">No tags found</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Middle Column - HTML Editor -->\n <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-min-w-0 tw-h-full\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n \n <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input\n label=\"Template Name *\"\n formControlName=\"template_name\"\n placeholder=\"e.g., Standard Receipt\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input\n label=\"Template Code *\"\n formControlName=\"template_code\"\n placeholder=\"e.g., STD_RECEIPT_01\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select\n label=\"Template Type *\"\n formControlName=\"template_type\"\n [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-select\n label=\"Template For\"\n formControlName=\"template_for\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n </div>\n </form>\n </div>\n\n <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-h-full\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert or paste HTML here</span>\n </div>\n </div>\n <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden tw-min-h-0 tw-h-full\">\n <form [formGroup]=\"templateForm\" class=\"tw-h-full\">\n <textarea\n #htmlEditor\n formControlName=\"template_html\"\n placeholder=\"Enter HTML template code here... Use tags from the left sidebar or paste your HTML design.\"\n class=\"template-html-editor tw-w-full tw-h-full tw-p-3 tw-border tw-border-gray-300 tw-rounded-md tw-font-mono tw-text-xs tw-leading-relaxed tw-resize-none focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-blue-500 tw-bg-white tw-text-gray-900\"\n spellcheck=\"false\"></textarea>\n </form>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Live Preview -->\n <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-w-0 tw-h-full\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-select\n formControlName=\"preview_type\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n size=\"xs\"\n class=\"tw-w-24\">\n </cide-ele-select>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n </div>\n </div>\n </div>\n \n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50 tw-min-h-0\">\n <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4\" [innerHTML]=\"previewHtml()\"></div>\n </div>\n </div>\n\n </div>\n </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;max-width:100vw;overflow:hidden}:host .template-html-editor{height:100%!important;min-height:0;resize:none;font-family:Courier New,Monaco,Consolas,Menlo,monospace;font-size:13px;line-height:1.6;tab-size:2;-moz-tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto;box-sizing:border-box;width:100%;max-width:100%}:host .template-html-editor::placeholder{color:#9ca3af;font-style:italic}:host .template-html-editor:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}:host .tw-grid{height:100%;max-width:100%;overflow:hidden;min-height:0}:host .tw-overflow-hidden{min-height:0;max-width:100%;overflow:hidden}:host .tw-flex-col{min-height:0;max-width:100%;height:100%}:host [class*=tw-col-span]{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;overflow:hidden;height:100%}:host *{max-width:100%;box-sizing:border-box}:host [breadcrumb-actions]{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
6625
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: TemplateDesignerComponent, isStandalone: true, selector: "cide-receipt-template-designer", inputs: { shared_wrapper_setup_param: { classPropertyName: "shared_wrapper_setup_param", publicName: "shared_wrapper_setup_param", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "htmlEditorRef", first: true, predicate: ["htmlEditor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n \n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n Load Template\n </button>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n Save Template\n </button>\n </div>\n\n <!-- Main Content - Three Column Layout -->\n <div class=\"tw-w-full tw-h-full tw-overflow-hidden tw-flex tw-flex-col\" style=\"height: calc(100vh - 120px); max-width: 100vw;\">\n <div class=\"tw-grid tw-grid-cols-12 tw-gap-3 tw-flex-1 tw-min-h-0 tw-p-3\">\n \n <!-- Left Sidebar - Tag Categories & Tags -->\n <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col tw-min-w-0 tw-h-full\">\n <!-- Tag Categories Header -->\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n <form [formGroup]=\"templateForm\">\n <cide-ele-input\n formControlName=\"tag_search\"\n placeholder=\"Search tags...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </form>\n </div>\n\n <!-- Category Tabs -->\n <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n @for (category of tagCategories; track category.id) {\n <button\n type=\"button\"\n class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n (click)=\"onCategoryChange(category.id)\"\n [title]=\"category.name\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n </button>\n }\n </div>\n\n <!-- Tags List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2 tw-min-h-0\">\n @if (filteredTags().length > 0) {\n <div class=\"tw-space-y-1\">\n @for (tag of filteredTags(); track tag.code) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n (click)=\"insertTag(tag)\"\n [title]=\"tag.description\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n {{ tag.code }}\n </code>\n <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n @if (tag.example) {\n <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n }\n </div>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n </div>\n </button>\n }\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n <p class=\"tw-text-xs\">No tags found</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Middle Column - HTML Editor -->\n <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-min-w-0 tw-h-full\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n \n <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input\n label=\"Template Name\"\n formControlName=\"template_name\"\n placeholder=\"e.g., Standard Receipt\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input\n label=\"Template Code\"\n formControlName=\"template_code\"\n placeholder=\"e.g., STD_RECEIPT_01\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select\n label=\"Template Type\"\n formControlName=\"template_type\"\n [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-select\n label=\"Template For\"\n formControlName=\"template_for\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n </div>\n </form>\n </div>\n\n <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-h-full\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert or paste HTML here</span>\n </div>\n </div>\n <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden tw-min-h-0 tw-h-full\">\n <form [formGroup]=\"templateForm\" class=\"tw-h-full\">\n <textarea\n #htmlEditor\n formControlName=\"template_html\"\n placeholder=\"Enter HTML template code here... Use tags from the left sidebar or paste your HTML design.\"\n class=\"template-html-editor tw-w-full tw-h-full tw-p-3 tw-border tw-border-gray-300 tw-rounded-md tw-font-mono tw-text-xs tw-leading-relaxed tw-resize-none focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-blue-500 tw-bg-white tw-text-gray-900\"\n spellcheck=\"false\"></textarea>\n </form>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Live Preview -->\n <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-w-0 tw-h-full\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-select\n formControlName=\"preview_type\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n size=\"xs\"\n class=\"tw-w-24\">\n </cide-ele-select>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n </div>\n </div>\n </div>\n \n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50 tw-min-h-0\">\n <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4\" [innerHTML]=\"previewHtml()\"></div>\n </div>\n </div>\n\n </div>\n </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;max-width:100vw;overflow:hidden}:host .template-html-editor{height:100%!important;min-height:0;resize:none;font-family:Courier New,Monaco,Consolas,Menlo,monospace;font-size:13px;line-height:1.6;tab-size:2;-moz-tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto;box-sizing:border-box;width:100%;max-width:100%}:host .template-html-editor::placeholder{color:#9ca3af;font-style:italic}:host .template-html-editor:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}:host .tw-grid{height:100%;max-width:100%;overflow:hidden;min-height:0}:host .tw-overflow-hidden{min-height:0;max-width:100%;overflow:hidden}:host .tw-flex-col{min-height:0;max-width:100%;height:100%}:host [class*=tw-col-span]{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;overflow:hidden;height:100%}:host *{max-width:100%;box-sizing:border-box}:host [breadcrumb-actions]{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
6550
6626
  }
6551
6627
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TemplateDesignerComponent, decorators: [{
6552
6628
  type: Component,
@@ -6558,7 +6634,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
6558
6634
  CideIconComponent,
6559
6635
  CideSelectComponent,
6560
6636
  CideLytSharedWrapperComponent
6561
- ], template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n \n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n Load Template\n </button>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n Save Template\n </button>\n </div>\n\n <!-- Main Content - Three Column Layout -->\n <div class=\"tw-w-full tw-h-full tw-overflow-hidden tw-flex tw-flex-col\" style=\"height: calc(100vh - 120px); max-width: 100vw;\">\n <div class=\"tw-grid tw-grid-cols-12 tw-gap-3 tw-flex-1 tw-min-h-0 tw-p-3\">\n \n <!-- Left Sidebar - Tag Categories & Tags -->\n <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col tw-min-w-0 tw-h-full\">\n <!-- Tag Categories Header -->\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n <form [formGroup]=\"templateForm\">\n <cide-ele-input\n formControlName=\"tag_search\"\n placeholder=\"Search tags...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </form>\n </div>\n\n <!-- Category Tabs -->\n <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n @for (category of tagCategories; track category.id) {\n <button\n type=\"button\"\n class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n (click)=\"onCategoryChange(category.id)\"\n [title]=\"category.name\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n </button>\n }\n </div>\n\n <!-- Tags List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2 tw-min-h-0\">\n @if (filteredTags().length > 0) {\n <div class=\"tw-space-y-1\">\n @for (tag of filteredTags(); track tag.code) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n (click)=\"insertTag(tag)\"\n [title]=\"tag.description\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n {{ tag.code }}\n </code>\n <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n @if (tag.example) {\n <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n }\n </div>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n </div>\n </button>\n }\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n <p class=\"tw-text-xs\">No tags found</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Middle Column - HTML Editor -->\n <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-min-w-0 tw-h-full\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n \n <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input\n label=\"Template Name *\"\n formControlName=\"template_name\"\n placeholder=\"e.g., Standard Receipt\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input\n label=\"Template Code *\"\n formControlName=\"template_code\"\n placeholder=\"e.g., STD_RECEIPT_01\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select\n label=\"Template Type *\"\n formControlName=\"template_type\"\n [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-select\n label=\"Template For\"\n formControlName=\"template_for\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n </div>\n </form>\n </div>\n\n <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-h-full\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert or paste HTML here</span>\n </div>\n </div>\n <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden tw-min-h-0 tw-h-full\">\n <form [formGroup]=\"templateForm\" class=\"tw-h-full\">\n <textarea\n #htmlEditor\n formControlName=\"template_html\"\n placeholder=\"Enter HTML template code here... Use tags from the left sidebar or paste your HTML design.\"\n class=\"template-html-editor tw-w-full tw-h-full tw-p-3 tw-border tw-border-gray-300 tw-rounded-md tw-font-mono tw-text-xs tw-leading-relaxed tw-resize-none focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-blue-500 tw-bg-white tw-text-gray-900\"\n spellcheck=\"false\"></textarea>\n </form>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Live Preview -->\n <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-w-0 tw-h-full\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-select\n formControlName=\"preview_type\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n size=\"xs\"\n class=\"tw-w-24\">\n </cide-ele-select>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n </div>\n </div>\n </div>\n \n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50 tw-min-h-0\">\n <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4\" [innerHTML]=\"previewHtml()\"></div>\n </div>\n </div>\n\n </div>\n </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;max-width:100vw;overflow:hidden}:host .template-html-editor{height:100%!important;min-height:0;resize:none;font-family:Courier New,Monaco,Consolas,Menlo,monospace;font-size:13px;line-height:1.6;tab-size:2;-moz-tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto;box-sizing:border-box;width:100%;max-width:100%}:host .template-html-editor::placeholder{color:#9ca3af;font-style:italic}:host .template-html-editor:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}:host .tw-grid{height:100%;max-width:100%;overflow:hidden;min-height:0}:host .tw-overflow-hidden{min-height:0;max-width:100%;overflow:hidden}:host .tw-flex-col{min-height:0;max-width:100%;height:100%}:host [class*=tw-col-span]{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;overflow:hidden;height:100%}:host *{max-width:100%;box-sizing:border-box}:host [breadcrumb-actions]{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"] }]
6637
+ ], template: "<!-- Receipt Template Designer -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"shared_wrapper_setup_param()\">\n \n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\">\n Load Template\n </button>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\">\n Save Template\n </button>\n </div>\n\n <!-- Main Content - Three Column Layout -->\n <div class=\"tw-w-full tw-h-full tw-overflow-hidden tw-flex tw-flex-col\" style=\"height: calc(100vh - 120px); max-width: 100vw;\">\n <div class=\"tw-grid tw-grid-cols-12 tw-gap-3 tw-flex-1 tw-min-h-0 tw-p-3\">\n \n <!-- Left Sidebar - Tag Categories & Tags -->\n <div class=\"tw-col-span-12 lg:tw-col-span-3 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col tw-min-w-0 tw-h-full\">\n <!-- Tag Categories Header -->\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-2\">Available Tags</h6>\n <form [formGroup]=\"templateForm\">\n <cide-ele-input\n formControlName=\"tag_search\"\n placeholder=\"Search tags...\"\n size=\"sm\"\n leadingIcon=\"search\">\n </cide-ele-input>\n </form>\n </div>\n\n <!-- Category Tabs -->\n <div class=\"tw-flex tw-flex-wrap tw-gap-1 tw-p-2 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-overflow-x-auto\">\n @for (category of tagCategories; track category.id) {\n <button\n type=\"button\"\n class=\"tw-px-2 tw-py-1 tw-text-xs tw-font-medium tw-rounded tw-transition-colors tw-whitespace-nowrap\"\n [class.tw-bg-blue-100]=\"activeCategory() === category.id\"\n [class.tw-text-blue-700]=\"activeCategory() === category.id\"\n [class.tw-bg-gray-100]=\"activeCategory() !== category.id\"\n [class.tw-text-gray-700]=\"activeCategory() !== category.id\"\n (click)=\"onCategoryChange(category.id)\"\n [title]=\"category.name\">\n <cide-ele-icon class=\"tw-w-3 tw-h-3 tw-inline-block tw-mr-1\">{{ category.icon }}</cide-ele-icon>\n <span class=\"tw-hidden sm:tw-inline\">{{ category.name }}</span>\n </button>\n }\n </div>\n\n <!-- Tags List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-2 tw-min-h-0\">\n @if (filteredTags().length > 0) {\n <div class=\"tw-space-y-1\">\n @for (tag of filteredTags(); track tag.code) {\n <button\n type=\"button\"\n class=\"tw-w-full tw-text-left tw-p-2 tw-rounded tw-border tw-border-gray-200 tw-bg-white hover:tw-bg-blue-50 hover:tw-border-blue-300 tw-transition-colors tw-cursor-pointer tw-group\"\n (click)=\"insertTag(tag)\"\n [title]=\"tag.description\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-2\">\n <div class=\"tw-flex-1 tw-min-w-0\">\n <code class=\"tw-text-xs tw-font-mono tw-text-blue-600 tw-font-semibold tw-block tw-break-all\">\n {{ tag.code }}\n </code>\n <span class=\"tw-text-xs tw-text-gray-600 tw-block tw-mt-1\">{{ tag.description }}</span>\n @if (tag.example) {\n <span class=\"tw-text-xs tw-text-gray-400 tw-block tw-mt-0.5\">e.g., {{ tag.example }}</span>\n }\n </div>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400 group-hover:tw-text-blue-600 tw-flex-shrink-0 tw-mt-0.5\">add_circle</cide-ele-icon>\n </div>\n </button>\n }\n </div>\n } @else {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2 tw-text-gray-400\">search_off</cide-ele-icon>\n <p class=\"tw-text-xs\">No tags found</p>\n </div>\n }\n </div>\n </div>\n\n <!-- Middle Column - HTML Editor -->\n <div class=\"tw-col-span-12 lg:tw-col-span-5 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-min-w-0 tw-h-full\">\n <div class=\"tw-p-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-mb-4\">Template Configuration</h6>\n \n <form [formGroup]=\"templateForm\" class=\"tw-space-y-3\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input\n label=\"Template Name\"\n formControlName=\"template_name\"\n placeholder=\"e.g., Standard Receipt\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input\n label=\"Template Code\"\n formControlName=\"template_code\"\n placeholder=\"e.g., STD_RECEIPT_01\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3\">\n <cide-ele-select\n label=\"Template Type\"\n formControlName=\"template_type\"\n [options]=\"[{value: 'PAYMENT', label: 'Payment Receipt'}, {value: 'REFUND', label: 'Refund Receipt'}, {value: 'PROVISIONAL', label: 'Provisional Receipt'}]\"\n size=\"sm\">\n </cide-ele-select>\n\n <cide-ele-select\n label=\"Template For\"\n formControlName=\"template_for\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}, {value: 'BOTH', label: 'Both'}]\"\n size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"is_default\" type=\"checkbox\" size=\"sm\"></cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Set as Default Template</span>\n </div>\n </form>\n </div>\n\n <div class=\"tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-min-h-0 tw-h-full\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex-shrink-0\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">HTML Template *</h6>\n <span class=\"tw-text-xs tw-text-gray-500\">Click tags on left to insert or paste HTML here</span>\n </div>\n </div>\n <div class=\"tw-flex-1 tw-p-3 tw-overflow-hidden tw-min-h-0 tw-h-full\">\n <form [formGroup]=\"templateForm\" class=\"tw-h-full\">\n <textarea\n #htmlEditor\n formControlName=\"template_html\"\n placeholder=\"Enter HTML template code here... Use tags from the left sidebar or paste your HTML design.\"\n class=\"template-html-editor tw-w-full tw-h-full tw-p-3 tw-border tw-border-gray-300 tw-rounded-md tw-font-mono tw-text-xs tw-leading-relaxed tw-resize-none focus:tw-outline-none focus:tw-ring-2 focus:tw-ring-blue-500 focus:tw-border-blue-500 tw-bg-white tw-text-gray-900\"\n spellcheck=\"false\"></textarea>\n </form>\n </div>\n </div>\n </div>\n\n <!-- Right Column - Live Preview -->\n <div class=\"tw-col-span-12 lg:tw-col-span-4 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-flex tw-flex-col tw-overflow-hidden tw-min-w-0 tw-h-full\">\n <div class=\"tw-p-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-items-center tw-justify-between\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Live Preview</h6>\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-select\n formControlName=\"preview_type\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\"\n size=\"xs\"\n class=\"tw-w-24\">\n </cide-ele-select>\n <cide-ele-icon class=\"tw-w-4 tw-h-4 tw-text-gray-400\" title=\"Auto-refreshes on template change\">sync</cide-ele-icon>\n </div>\n </div>\n </div>\n \n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-bg-gray-50 tw-min-h-0\">\n <div class=\"tw-bg-white tw-shadow-sm tw-rounded tw-p-4\" [innerHTML]=\"previewHtml()\"></div>\n </div>\n </div>\n\n </div>\n </div>\n</cide-lyt-shared-wrapper>\n\n", styles: [":host{display:flex;flex-direction:column;height:100%;width:100%;max-width:100vw;overflow:hidden}:host .template-html-editor{height:100%!important;min-height:0;resize:none;font-family:Courier New,Monaco,Consolas,Menlo,monospace;font-size:13px;line-height:1.6;tab-size:2;-moz-tab-size:2;white-space:pre;overflow-wrap:normal;overflow-x:auto;overflow-y:auto;box-sizing:border-box;width:100%;max-width:100%}:host .template-html-editor::placeholder{color:#9ca3af;font-style:italic}:host .template-html-editor:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}:host .tw-grid{height:100%;max-width:100%;overflow:hidden;min-height:0}:host .tw-overflow-hidden{min-height:0;max-width:100%;overflow:hidden}:host .tw-flex-col{min-height:0;max-width:100%;height:100%}:host [class*=tw-col-span]{display:flex;flex-direction:column;min-height:0;min-width:0;max-width:100%;overflow:hidden;height:100%}:host *{max-width:100%;box-sizing:border-box}:host [breadcrumb-actions]{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap}button[type=button]:hover{transform:translateY(-1px);box-shadow:0 2px 4px #0000001a}button[type=button]:active{transform:translateY(0)}[innerHTML] img{max-width:100%;height:auto}[innerHTML] table{width:100%;border-collapse:collapse}[innerHTML] *{max-width:100%}\n"] }]
6562
6638
  }], ctorParameters: () => [], propDecorators: { htmlEditorRef: [{
6563
6639
  type: ViewChild,
6564
6640
  args: ['htmlEditor', { static: false }]
@@ -6959,10 +7035,10 @@ class MyFeeStatementComponent {
6959
7035
  paymentHistoryRendererTemplate = viewChild.required('paymentHistoryRendererTemplate');
6960
7036
  loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
6961
7037
  studentInfo = signal({
6962
- id: 'STU-2024-001',
6963
- name: 'John Doe',
6964
- class: 'Class 10',
6965
- section: 'A',
7038
+ id: '',
7039
+ name: '',
7040
+ class: '',
7041
+ section: '',
6966
7042
  avatar: ''
6967
7043
  }, ...(ngDevMode ? [{ debugName: "studentInfo" }] : []));
6968
7044
  feeDetails = signal([], ...(ngDevMode ? [{ debugName: "feeDetails" }] : []));
@@ -7745,7 +7821,7 @@ class MyOnlinePaymentComponent {
7745
7821
  return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
7746
7822
  }
7747
7823
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MyOnlinePaymentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
7748
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<!-- My Online Payment Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n \r\n <!-- Title -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\r\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Online Fee Payment</h5>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" leftIcon=\"arrow_back\">\r\n Back to Statement\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"tw-table-row\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\r\n \r\n <!-- Left Panel - Fee Selection -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Fees to Pay</h6>\r\n </div>\r\n \r\n <!-- Quick Actions -->\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex tw-gap-2\">\r\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\r\n Select All\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\r\n Select Overdue\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\r\n Clear\r\n </button>\r\n </div>\r\n\r\n <!-- Fee Items List -->\r\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\r\n @if (outstandingFees().length === 0) {\r\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\r\n <p class=\"tw-text-sm\">No outstanding fees</p>\r\n </div>\r\n } @else {\r\n @for (fee of outstandingFees(); track fee.id) {\r\n <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\r\n [class.tw-border-blue-500]=\"isSelected(fee)\"\r\n [class.tw-bg-blue-50]=\"isSelected(fee)\"\r\n [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\r\n [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\r\n [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\"\r\n (click)=\"toggleFee(fee)\">\r\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\r\n <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\r\n <input \r\n type=\"checkbox\" \r\n [checked]=\"isSelected(fee)\"\r\n (change)=\"toggleFee(fee); $event.stopPropagation()\"\r\n class=\"tw-mt-1\">\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\r\n <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\r\n @if (isOverdue(fee)) {\r\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800\">\r\n Overdue\r\n </span>\r\n }\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-600\">\r\n Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\r\n </div>\r\n @if (fee.late_fee > 0) {\r\n <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\r\n Late Fee: {{ formatCurrency(fee.late_fee) }}\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n <div class=\"tw-text-right\">\r\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Right Panel - Payment Summary & Gateway -->\r\n <div class=\"tw-space-y-4\">\r\n \r\n <!-- Payment Summary Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment Summary</h6>\r\n </div>\r\n <div class=\"tw-p-4 tw-space-y-3\">\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-600\">Selected Items</span>\r\n <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\r\n </div>\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-600\">Fee Amount</span>\r\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n </div>\r\n @if (totalLateFee() > 0) {\r\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\r\n <span>Late Fee</span>\r\n <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\r\n </div>\r\n }\r\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\r\n <span>Subtotal</span>\r\n <span>{{ formatCurrency(subtotal()) }}</span>\r\n </div>\r\n @if (convenienceFee() > 0) {\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-600\">Convenience Fee (2%)</span>\r\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\r\n </div>\r\n }\r\n <div class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\r\n <span>Total Payable</span>\r\n <span>{{ formatCurrency(totalPayable()) }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Payment Method Selection -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Payment Method</h6>\r\n </div>\r\n <div class=\"tw-p-4\">\r\n <form [formGroup]=\"paymentForm\" class=\"tw-space-y-4\">\r\n \r\n <!-- Payment Method Cards -->\r\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-3 tw-mb-4\">\r\n @for (method of paymentMethodOptions; track method.value) {\r\n <button\r\n type=\"button\"\r\n class=\"tw-p-4 tw-rounded-lg tw-border-2 tw-text-center tw-transition-colors\"\r\n [class.tw-border-blue-500]=\"selectedPaymentMethod() === method.value\"\r\n [class.tw-bg-blue-50]=\"selectedPaymentMethod() === method.value\"\r\n [class.tw-border-gray-200]=\"selectedPaymentMethod() !== method.value\"\r\n (click)=\"selectPaymentMethod(method.value)\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2\"\r\n [class.tw-text-blue-600]=\"selectedPaymentMethod() === method.value\"\r\n [class.tw-text-gray-400]=\"selectedPaymentMethod() !== method.value\">\r\n @switch (method.value) {\r\n @case ('UPI') { account_balance_wallet }\r\n @case ('CARD') { credit_card }\r\n @case ('NET_BANKING') { account_balance }\r\n }\r\n </cide-ele-icon>\r\n <div class=\"tw-text-xs tw-font-medium\">{{ method.label }}</div>\r\n </button>\r\n }\r\n </div>\r\n\r\n <!-- UPI Details -->\r\n @if (selectedPaymentMethod() === 'UPI') {\r\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\r\n <cide-ele-input\r\n label=\"UPI ID *\"\r\n formControlName=\"upi_id\"\r\n placeholder=\"username@upi\"\r\n size=\"sm\"\r\n [required]=\"true\">\r\n </cide-ele-input>\r\n </div>\r\n }\r\n\r\n <!-- Card Details -->\r\n @if (selectedPaymentMethod() === 'CARD') {\r\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200 tw-space-y-3\">\r\n <cide-ele-input\r\n label=\"Card Number *\"\r\n formControlName=\"card_number\"\r\n placeholder=\"1234 5678 9012 3456\"\r\n size=\"sm\"\r\n maxLength=\"19\"\r\n [required]=\"true\">\r\n </cide-ele-input>\r\n <div class=\"tw-grid tw-grid-cols-2 tw-gap-3\">\r\n <cide-ele-input\r\n label=\"Expiry Date *\"\r\n formControlName=\"expiry\"\r\n placeholder=\"MM/YY\"\r\n size=\"sm\"\r\n maxLength=\"5\"\r\n [required]=\"true\">\r\n </cide-ele-input>\r\n <cide-ele-input\r\n label=\"CVV *\"\r\n formControlName=\"cvv\"\r\n type=\"password\"\r\n placeholder=\"***\"\r\n size=\"sm\"\r\n maxLength=\"3\"\r\n [required]=\"true\">\r\n </cide-ele-input>\r\n </div>\r\n </div>\r\n }\r\n\r\n <!-- Net Banking Details -->\r\n @if (selectedPaymentMethod() === 'NET_BANKING') {\r\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\r\n <cide-ele-select\r\n label=\"Select Bank *\"\r\n formControlName=\"bank\"\r\n [options]=\"bankOptions\"\r\n size=\"sm\"\r\n placeholder=\"Select Bank\"\r\n [required]=\"true\">\r\n </cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Action Buttons -->\r\n <div class=\"tw-flex tw-gap-3 tw-pt-4\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" class=\"tw-flex-1\">\r\n Cancel\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"proceedToPayment()\"\r\n [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" class=\"tw-flex-1\" leftIcon=\"payment\">\r\n Pay {{ formatCurrency(totalPayable()) }}\r\n </button>\r\n </div>\r\n\r\n <!-- Security Info -->\r\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-pt-2 tw-text-xs tw-text-gray-500\">\r\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\r\n <span>Secure payment powered by Razorpay</span>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
7824
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<!-- My Online Payment Container -->\n<div class=\"tw-w-full tw-h-full\">\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\n\n <!-- Header Section -->\n <div class=\"tw-table-row tw-w-full tw-h-0\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n \n <!-- Title -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Online Fee Payment</h5>\n </div>\n\n <!-- Actions -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" leftIcon=\"arrow_back\">\n Back to Statement\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n \n <!-- Left Panel - Fee Selection -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Fees to Pay</h6>\n </div>\n \n <!-- Quick Actions -->\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex tw-gap-2\">\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\n Select All\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\n Select Overdue\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\n Clear\n </button>\n </div>\n\n <!-- Fee Items List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\n @if (outstandingFees().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\n <p class=\"tw-text-sm\">No outstanding fees</p>\n </div>\n } @else {\n @for (fee of outstandingFees(); track fee.id) {\n <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\n [class.tw-border-blue-500]=\"isSelected(fee)\"\n [class.tw-bg-blue-50]=\"isSelected(fee)\"\n [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\"\n (click)=\"toggleFee(fee)\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\n <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\n <input \n type=\"checkbox\" \n [checked]=\"isSelected(fee)\"\n (change)=\"toggleFee(fee); $event.stopPropagation()\"\n class=\"tw-mt-1\">\n <div class=\"tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\n @if (isOverdue(fee)) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800\">\n Overdue\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-600\">\n Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\n </div>\n @if (fee.late_fee > 0) {\n <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\n Late Fee: {{ formatCurrency(fee.late_fee) }}\n </div>\n }\n </div>\n </div>\n <div class=\"tw-text-right\">\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\n </div>\n </div>\n </div>\n }\n }\n </div>\n </div>\n\n <!-- Right Panel - Payment Summary & Gateway -->\n <div class=\"tw-space-y-4\">\n \n <!-- Payment Summary Card -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment Summary</h6>\n </div>\n <div class=\"tw-p-4 tw-space-y-3\">\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Selected Items</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\n </div>\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Fee Amount</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n </div>\n @if (totalLateFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\n <span>Late Fee</span>\n <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\n </div>\n }\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\n <span>Subtotal</span>\n <span>{{ formatCurrency(subtotal()) }}</span>\n </div>\n @if (convenienceFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Convenience Fee (2%)</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\n </div>\n }\n <div class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\n <span>Total Payable</span>\n <span>{{ formatCurrency(totalPayable()) }}</span>\n </div>\n </div>\n </div>\n\n <!-- Payment Method Selection -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Payment Method</h6>\n </div>\n <div class=\"tw-p-4\">\n <form [formGroup]=\"paymentForm\" class=\"tw-space-y-4\">\n \n <!-- Payment Method Cards -->\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-3 tw-mb-4\">\n @for (method of paymentMethodOptions; track method.value) {\n <button\n type=\"button\"\n class=\"tw-p-4 tw-rounded-lg tw-border-2 tw-text-center tw-transition-colors\"\n [class.tw-border-blue-500]=\"selectedPaymentMethod() === method.value\"\n [class.tw-bg-blue-50]=\"selectedPaymentMethod() === method.value\"\n [class.tw-border-gray-200]=\"selectedPaymentMethod() !== method.value\"\n (click)=\"selectPaymentMethod(method.value)\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2\"\n [class.tw-text-blue-600]=\"selectedPaymentMethod() === method.value\"\n [class.tw-text-gray-400]=\"selectedPaymentMethod() !== method.value\">\n @switch (method.value) {\n @case ('UPI') { account_balance_wallet }\n @case ('CARD') { credit_card }\n @case ('NET_BANKING') { account_balance }\n }\n </cide-ele-icon>\n <div class=\"tw-text-xs tw-font-medium\">{{ method.label }}</div>\n </button>\n }\n </div>\n\n <!-- UPI Details -->\n @if (selectedPaymentMethod() === 'UPI') {\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\n <cide-ele-input\n label=\"UPI ID\"\n formControlName=\"upi_id\"\n placeholder=\"username@upi\"\n size=\"sm\"\n [required]=\"true\">\n </cide-ele-input>\n </div>\n }\n\n <!-- Card Details -->\n @if (selectedPaymentMethod() === 'CARD') {\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200 tw-space-y-3\">\n <cide-ele-input\n label=\"Card Number\"\n formControlName=\"card_number\"\n placeholder=\"1234 5678 9012 3456\"\n size=\"sm\"\n maxLength=\"19\"\n [required]=\"true\">\n </cide-ele-input>\n <div class=\"tw-grid tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input\n label=\"Expiry Date\"\n formControlName=\"expiry\"\n placeholder=\"MM/YY\"\n size=\"sm\"\n maxLength=\"5\"\n [required]=\"true\">\n </cide-ele-input>\n <cide-ele-input\n label=\"CVV\"\n formControlName=\"cvv\"\n type=\"password\"\n placeholder=\"***\"\n size=\"sm\"\n maxLength=\"3\"\n [required]=\"true\">\n </cide-ele-input>\n </div>\n </div>\n }\n\n <!-- Net Banking Details -->\n @if (selectedPaymentMethod() === 'NET_BANKING') {\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\n <cide-ele-select\n label=\"Select Bank\"\n formControlName=\"bank\"\n [options]=\"bankOptions\"\n size=\"sm\"\n placeholder=\"Select Bank\"\n [required]=\"true\">\n </cide-ele-select>\n </div>\n }\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-gap-3 tw-pt-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" class=\"tw-flex-1\">\n Cancel\n </button>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"proceedToPayment()\"\n [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" class=\"tw-flex-1\" leftIcon=\"payment\">\n Pay {{ formatCurrency(totalPayable()) }}\n </button>\n </div>\n\n <!-- Security Info -->\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-pt-2 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\n <span>Secure payment powered by Razorpay</span>\n </div>\n </form>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
7749
7825
  }
7750
7826
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MyOnlinePaymentComponent, decorators: [{
7751
7827
  type: Component,
@@ -7756,7 +7832,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
7756
7832
  CideSelectComponent,
7757
7833
  CideEleButtonComponent,
7758
7834
  CideIconComponent
7759
- ], 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"] }]
7835
+ ], template: "<!-- My Online Payment Container -->\n<div class=\"tw-w-full tw-h-full\">\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\n\n <!-- Header Section -->\n <div class=\"tw-table-row tw-w-full tw-h-0\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n \n <!-- Title -->\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">payment</cide-ele-icon>\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Online Fee Payment</h5>\n </div>\n\n <!-- Actions -->\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" leftIcon=\"arrow_back\">\n Back to Statement\n </button>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n \n <!-- Left Panel - Fee Selection -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Fees to Pay</h6>\n </div>\n \n <!-- Quick Actions -->\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex tw-gap-2\">\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\n Select All\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\n Select Overdue\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\n Clear\n </button>\n </div>\n\n <!-- Fee Items List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\n @if (outstandingFees().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\n <p class=\"tw-text-sm\">No outstanding fees</p>\n </div>\n } @else {\n @for (fee of outstandingFees(); track fee.id) {\n <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\n [class.tw-border-blue-500]=\"isSelected(fee)\"\n [class.tw-bg-blue-50]=\"isSelected(fee)\"\n [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\"\n (click)=\"toggleFee(fee)\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\n <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\n <input \n type=\"checkbox\" \n [checked]=\"isSelected(fee)\"\n (change)=\"toggleFee(fee); $event.stopPropagation()\"\n class=\"tw-mt-1\">\n <div class=\"tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\n @if (isOverdue(fee)) {\n <span class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800\">\n Overdue\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-600\">\n Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\n </div>\n @if (fee.late_fee > 0) {\n <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\n Late Fee: {{ formatCurrency(fee.late_fee) }}\n </div>\n }\n </div>\n </div>\n <div class=\"tw-text-right\">\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\n </div>\n </div>\n </div>\n }\n }\n </div>\n </div>\n\n <!-- Right Panel - Payment Summary & Gateway -->\n <div class=\"tw-space-y-4\">\n \n <!-- Payment Summary Card -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment Summary</h6>\n </div>\n <div class=\"tw-p-4 tw-space-y-3\">\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Selected Items</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\n </div>\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Fee Amount</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n </div>\n @if (totalLateFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\n <span>Late Fee</span>\n <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\n </div>\n }\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\n <span>Subtotal</span>\n <span>{{ formatCurrency(subtotal()) }}</span>\n </div>\n @if (convenienceFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Convenience Fee (2%)</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\n </div>\n }\n <div class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\n <span>Total Payable</span>\n <span>{{ formatCurrency(totalPayable()) }}</span>\n </div>\n </div>\n </div>\n\n <!-- Payment Method Selection -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Payment Method</h6>\n </div>\n <div class=\"tw-p-4\">\n <form [formGroup]=\"paymentForm\" class=\"tw-space-y-4\">\n \n <!-- Payment Method Cards -->\n <div class=\"tw-grid tw-grid-cols-3 tw-gap-3 tw-mb-4\">\n @for (method of paymentMethodOptions; track method.value) {\n <button\n type=\"button\"\n class=\"tw-p-4 tw-rounded-lg tw-border-2 tw-text-center tw-transition-colors\"\n [class.tw-border-blue-500]=\"selectedPaymentMethod() === method.value\"\n [class.tw-bg-blue-50]=\"selectedPaymentMethod() === method.value\"\n [class.tw-border-gray-200]=\"selectedPaymentMethod() !== method.value\"\n (click)=\"selectPaymentMethod(method.value)\">\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-mx-auto tw-mb-2\"\n [class.tw-text-blue-600]=\"selectedPaymentMethod() === method.value\"\n [class.tw-text-gray-400]=\"selectedPaymentMethod() !== method.value\">\n @switch (method.value) {\n @case ('UPI') { account_balance_wallet }\n @case ('CARD') { credit_card }\n @case ('NET_BANKING') { account_balance }\n }\n </cide-ele-icon>\n <div class=\"tw-text-xs tw-font-medium\">{{ method.label }}</div>\n </button>\n }\n </div>\n\n <!-- UPI Details -->\n @if (selectedPaymentMethod() === 'UPI') {\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\n <cide-ele-input\n label=\"UPI ID\"\n formControlName=\"upi_id\"\n placeholder=\"username@upi\"\n size=\"sm\"\n [required]=\"true\">\n </cide-ele-input>\n </div>\n }\n\n <!-- Card Details -->\n @if (selectedPaymentMethod() === 'CARD') {\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200 tw-space-y-3\">\n <cide-ele-input\n label=\"Card Number\"\n formControlName=\"card_number\"\n placeholder=\"1234 5678 9012 3456\"\n size=\"sm\"\n maxLength=\"19\"\n [required]=\"true\">\n </cide-ele-input>\n <div class=\"tw-grid tw-grid-cols-2 tw-gap-3\">\n <cide-ele-input\n label=\"Expiry Date\"\n formControlName=\"expiry\"\n placeholder=\"MM/YY\"\n size=\"sm\"\n maxLength=\"5\"\n [required]=\"true\">\n </cide-ele-input>\n <cide-ele-input\n label=\"CVV\"\n formControlName=\"cvv\"\n type=\"password\"\n placeholder=\"***\"\n size=\"sm\"\n maxLength=\"3\"\n [required]=\"true\">\n </cide-ele-input>\n </div>\n </div>\n }\n\n <!-- Net Banking Details -->\n @if (selectedPaymentMethod() === 'NET_BANKING') {\n <div class=\"tw-p-3 tw-bg-blue-50 tw-rounded-lg tw-border tw-border-blue-200\">\n <cide-ele-select\n label=\"Select Bank\"\n formControlName=\"bank\"\n [options]=\"bankOptions\"\n size=\"sm\"\n placeholder=\"Select Bank\"\n [required]=\"true\">\n </cide-ele-select>\n </div>\n }\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-gap-3 tw-pt-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"cancel()\" class=\"tw-flex-1\">\n Cancel\n </button>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"proceedToPayment()\"\n [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" class=\"tw-flex-1\" leftIcon=\"payment\">\n Pay {{ formatCurrency(totalPayable()) }}\n </button>\n </div>\n\n <!-- Security Info -->\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-pt-2 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\n <span>Secure payment powered by Razorpay</span>\n </div>\n </form>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
7760
7836
  }] });
7761
7837
 
7762
7838
  var myOnlinePayment_component = /*#__PURE__*/Object.freeze({