cloud-ide-fees 0.0.28 → 0.0.29
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.
|
@@ -3691,7 +3691,7 @@ class FeeAssignmentCreateComponent {
|
|
|
3691
3691
|
this.breadcrumbData.set(additionalItems);
|
|
3692
3692
|
}
|
|
3693
3693
|
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"] }] });
|
|
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"] }] });
|
|
3695
3695
|
}
|
|
3696
3696
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeeAssignmentCreateComponent, decorators: [{
|
|
3697
3697
|
type: Component,
|
|
@@ -3706,7 +3706,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
3706
3706
|
CideLytSharedWrapperComponent,
|
|
3707
3707
|
ProgramSectionSelectorWrapperComponent,
|
|
3708
3708
|
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" }]
|
|
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" }]
|
|
3710
3710
|
}], ctorParameters: () => [] });
|
|
3711
3711
|
|
|
3712
3712
|
var feeAssignmentCreate_component = /*#__PURE__*/Object.freeze({
|
|
@@ -4552,7 +4552,7 @@ class FeePaymentProcessComponent {
|
|
|
4552
4552
|
return new Date(date) < new Date();
|
|
4553
4553
|
}
|
|
4554
4554
|
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"] }] });
|
|
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"] }] });
|
|
4556
4556
|
}
|
|
4557
4557
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: FeePaymentProcessComponent, decorators: [{
|
|
4558
4558
|
type: Component,
|
|
@@ -4564,7 +4564,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
4564
4564
|
CideEleButtonComponent,
|
|
4565
4565
|
CideIconComponent,
|
|
4566
4566
|
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" }]
|
|
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" }]
|
|
4568
4568
|
}] });
|
|
4569
4569
|
|
|
4570
4570
|
var feePaymentProcess_component = /*#__PURE__*/Object.freeze({
|
|
@@ -5405,11 +5405,11 @@ class DiscountRulesComponent {
|
|
|
5405
5405
|
<form [formGroup]="ruleForm" class="modal-body">
|
|
5406
5406
|
<div class="form-row">
|
|
5407
5407
|
<div class="form-group">
|
|
5408
|
-
<label>Rule Name
|
|
5408
|
+
<label>Rule Name</label>
|
|
5409
5409
|
<input type="text" formControlName="rule_name" placeholder="e.g., Sibling Discount" />
|
|
5410
5410
|
</div>
|
|
5411
5411
|
<div class="form-group">
|
|
5412
|
-
<label>Rule Code
|
|
5412
|
+
<label>Rule Code</label>
|
|
5413
5413
|
<input type="text" formControlName="rule_code" placeholder="e.g., SIBLING_DISC" />
|
|
5414
5414
|
</div>
|
|
5415
5415
|
</div>
|
|
@@ -5419,19 +5419,19 @@ class DiscountRulesComponent {
|
|
|
5419
5419
|
</div>
|
|
5420
5420
|
<div class="form-row">
|
|
5421
5421
|
<div class="form-group">
|
|
5422
|
-
<label>Discount Type
|
|
5422
|
+
<label>Discount Type</label>
|
|
5423
5423
|
<select formControlName="discount_type">
|
|
5424
5424
|
<option value="PERCENTAGE">Percentage</option>
|
|
5425
5425
|
<option value="FIXED_AMOUNT">Fixed Amount</option>
|
|
5426
5426
|
</select>
|
|
5427
5427
|
</div>
|
|
5428
5428
|
<div class="form-group">
|
|
5429
|
-
<label>Discount Value
|
|
5429
|
+
<label>Discount Value</label>
|
|
5430
5430
|
<input type="number" formControlName="discount_value" placeholder="Enter value" />
|
|
5431
5431
|
</div>
|
|
5432
5432
|
</div>
|
|
5433
5433
|
<div class="form-group">
|
|
5434
|
-
<label>Applies To Fee Categories
|
|
5434
|
+
<label>Applies To Fee Categories</label>
|
|
5435
5435
|
<select formControlName="applies_to" multiple>
|
|
5436
5436
|
<option value="ALL">All Categories</option>
|
|
5437
5437
|
<option value="TUITION">Tuition</option>
|
|
@@ -5548,11 +5548,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
5548
5548
|
<form [formGroup]="ruleForm" class="modal-body">
|
|
5549
5549
|
<div class="form-row">
|
|
5550
5550
|
<div class="form-group">
|
|
5551
|
-
<label>Rule Name
|
|
5551
|
+
<label>Rule Name</label>
|
|
5552
5552
|
<input type="text" formControlName="rule_name" placeholder="e.g., Sibling Discount" />
|
|
5553
5553
|
</div>
|
|
5554
5554
|
<div class="form-group">
|
|
5555
|
-
<label>Rule Code
|
|
5555
|
+
<label>Rule Code</label>
|
|
5556
5556
|
<input type="text" formControlName="rule_code" placeholder="e.g., SIBLING_DISC" />
|
|
5557
5557
|
</div>
|
|
5558
5558
|
</div>
|
|
@@ -5562,19 +5562,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
5562
5562
|
</div>
|
|
5563
5563
|
<div class="form-row">
|
|
5564
5564
|
<div class="form-group">
|
|
5565
|
-
<label>Discount Type
|
|
5565
|
+
<label>Discount Type</label>
|
|
5566
5566
|
<select formControlName="discount_type">
|
|
5567
5567
|
<option value="PERCENTAGE">Percentage</option>
|
|
5568
5568
|
<option value="FIXED_AMOUNT">Fixed Amount</option>
|
|
5569
5569
|
</select>
|
|
5570
5570
|
</div>
|
|
5571
5571
|
<div class="form-group">
|
|
5572
|
-
<label>Discount Value
|
|
5572
|
+
<label>Discount Value</label>
|
|
5573
5573
|
<input type="number" formControlName="discount_value" placeholder="Enter value" />
|
|
5574
5574
|
</div>
|
|
5575
5575
|
</div>
|
|
5576
5576
|
<div class="form-group">
|
|
5577
|
-
<label>Applies To Fee Categories
|
|
5577
|
+
<label>Applies To Fee Categories</label>
|
|
5578
5578
|
<select formControlName="applies_to" multiple>
|
|
5579
5579
|
<option value="ALL">All Categories</option>
|
|
5580
5580
|
<option value="TUITION">Tuition</option>
|
|
@@ -6546,7 +6546,7 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
|
|
|
6546
6546
|
});
|
|
6547
6547
|
}
|
|
6548
6548
|
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"] }] });
|
|
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"] }] });
|
|
6550
6550
|
}
|
|
6551
6551
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: TemplateDesignerComponent, decorators: [{
|
|
6552
6552
|
type: Component,
|
|
@@ -6558,7 +6558,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
6558
6558
|
CideIconComponent,
|
|
6559
6559
|
CideSelectComponent,
|
|
6560
6560
|
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"] }]
|
|
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"] }]
|
|
6562
6562
|
}], ctorParameters: () => [], propDecorators: { htmlEditorRef: [{
|
|
6563
6563
|
type: ViewChild,
|
|
6564
6564
|
args: ['htmlEditor', { static: false }]
|
|
@@ -7745,7 +7745,7 @@ class MyOnlinePaymentComponent {
|
|
|
7745
7745
|
return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
7746
7746
|
}
|
|
7747
7747
|
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" }] });
|
|
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" }] });
|
|
7749
7749
|
}
|
|
7750
7750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: MyOnlinePaymentComponent, decorators: [{
|
|
7751
7751
|
type: Component,
|
|
@@ -7756,7 +7756,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImpor
|
|
|
7756
7756
|
CideSelectComponent,
|
|
7757
7757
|
CideEleButtonComponent,
|
|
7758
7758
|
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"] }]
|
|
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"] }]
|
|
7760
7760
|
}] });
|
|
7761
7761
|
|
|
7762
7762
|
var myOnlinePayment_component = /*#__PURE__*/Object.freeze({
|