cloud-ide-fees 0.0.41 → 0.0.44
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.
- package/fesm2022/{cloud-ide-fees-cloud-ide-fees-Cyb9Q9l7.mjs → cloud-ide-fees-cloud-ide-fees-DwymPnFD.mjs} +18 -16
- package/fesm2022/cloud-ide-fees-cloud-ide-fees-DwymPnFD.mjs.map +1 -0
- package/fesm2022/{cloud-ide-fees-discount-rule-manager.component-CTgMTze9.mjs → cloud-ide-fees-discount-rule-manager.component-B2322yJN.mjs} +3 -3
- package/fesm2022/{cloud-ide-fees-discount-rule-manager.component-CTgMTze9.mjs.map → cloud-ide-fees-discount-rule-manager.component-B2322yJN.mjs.map} +1 -1
- package/fesm2022/cloud-ide-fees.mjs +1 -1
- package/package.json +1 -1
- package/README.md +0 -63
- package/fesm2022/cloud-ide-fees-cloud-ide-fees-Cyb9Q9l7.mjs.map +0 -1
|
@@ -117,7 +117,7 @@ const feesRoutes = [
|
|
|
117
117
|
// Discount & Scholarship Management
|
|
118
118
|
{
|
|
119
119
|
path: 'discounts',
|
|
120
|
-
loadComponent: () => import('./cloud-ide-fees-discount-rule-manager.component-
|
|
120
|
+
loadComponent: () => import('./cloud-ide-fees-discount-rule-manager.component-B2322yJN.mjs').then(c => c.DiscountRuleManagerComponent),
|
|
121
121
|
title: 'Discount Rules Management',
|
|
122
122
|
canActivate: [authGuard],
|
|
123
123
|
data: { sypg_page_code: "fee_discount_rule" }
|
|
@@ -822,7 +822,7 @@ class FeeStructureListComponent {
|
|
|
822
822
|
return category.sygms_title || category.sygms_code || '-';
|
|
823
823
|
}
|
|
824
824
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeStructureListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
825
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeStructureListComponent, isStandalone: true, selector: "cide-fee-structure-list", viewQueries: [{ propertyName: "feeStructureDetailsRendererTemplate", first: true, predicate: ["feeStructureDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "academicYearRendererTemplate", first: true, predicate: ["academicYearRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "classProgramRendererTemplate", first: true, predicate: ["classProgramRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "reservationCategoryRendererTemplate", first: true, predicate: ["reservationCategoryRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fee Structure Container -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n\n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions>\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"createFeeStructure()\" [adaptive]=\"true\">\n Create Fee Structure\n </button>\n\n }\n </div>\n\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #feeStructureDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-w-full\">\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.fees_structure_name || 'N/A' }}</div>\n <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.fees_structure_description || 'No description' }}</div>\n </div>\n</ng-template>\n\n\n<ng-template #statusRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-gap-1 tw-items-center\">\n <!-- Active/Inactive Status Badge -->\n <span\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\n [ngClass]=\"getStatusBadgeClass(row)\">\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\n {{ row.fees_is_active ? 'check_circle' : 'cancel' }}\n </cide-ele-icon>\n {{ getStatusText(row) }}\n </span>\n\n <!-- Template Badge -->\n @if (row.is_template) {\n <span\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800 tw-text-center\">\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">description</cide-ele-icon>\n Template\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>\n\n<ng-template #academicYearRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ getAcademicYearName(row) }}</span>\n </div>\n</ng-template>\n\n<ng-template #classProgramRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-sm tw-text-gray-700\">{{ getClassProgramName(row) }}</span>\n </div>\n</ng-template>\n\n<ng-template #reservationCategoryRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-sm tw-text-gray-700\">{{ getReservationCategoryName(row) }}</span>\n </div>\n</ng-template>", styles: [".fee-structure-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
825
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeStructureListComponent, isStandalone: true, selector: "cide-fee-structure-list", viewQueries: [{ propertyName: "feeStructureDetailsRendererTemplate", first: true, predicate: ["feeStructureDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "academicYearRendererTemplate", first: true, predicate: ["academicYearRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "classProgramRendererTemplate", first: true, predicate: ["classProgramRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "reservationCategoryRendererTemplate", first: true, predicate: ["reservationCategoryRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fee Structure Container -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n\n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions>\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"createFeeStructure()\" [adaptive]=\"true\">\n Create Fee Structure\n </button>\n\n }\n </div>\n\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #feeStructureDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-w-full\">\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.fees_structure_name || 'N/A' }}</div>\n <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.fees_structure_description || 'No description' }}</div>\n </div>\n</ng-template>\n\n\n<ng-template #statusRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-gap-1 tw-items-center\">\n <!-- Active/Inactive Status Badge -->\n <span\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\n [ngClass]=\"getStatusBadgeClass(row)\">\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\n {{ row.fees_is_active ? 'check_circle' : 'cancel' }}\n </cide-ele-icon>\n {{ getStatusText(row) }}\n </span>\n\n <!-- Template Badge -->\n @if (row.is_template) {\n <span\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-purple-100 tw-text-purple-800 tw-text-center\">\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">description</cide-ele-icon>\n Template\n </span>\n }\n </div>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>\n\n<ng-template #academicYearRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-900\">{{ getAcademicYearName(row) }}</span>\n </div>\n</ng-template>\n\n<ng-template #classProgramRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-sm tw-text-gray-700\">{{ getClassProgramName(row) }}</span>\n </div>\n</ng-template>\n\n<ng-template #reservationCategoryRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-sm tw-text-gray-700\">{{ getReservationCategoryName(row) }}</span>\n </div>\n</ng-template>", styles: [".fee-structure-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
826
826
|
}
|
|
827
827
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeStructureListComponent, decorators: [{
|
|
828
828
|
type: Component,
|
|
@@ -2380,7 +2380,7 @@ class FeeStructureCreateComponent {
|
|
|
2380
2380
|
this.breadcrumbData.set(additionalItems);
|
|
2381
2381
|
}
|
|
2382
2382
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeStructureCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2383
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeStructureCreateComponent, isStandalone: true, selector: "lib-cide-fee-structure-create", ngImport: i0, template: "<!-- Fee Structure Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n\n <!-- Back Button in Breadcrumb Area (View Mode Only) -->\n @if (isViewMode()) {\n <div breadcrumb-actions>\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"onCancel()\" leftIcon=\"arrow_back\" [adaptive]=\"true\">\n Back to List\n </button>\n\n </div>\n }\n\n <div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"feeStructureForm\"\n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Tab Navigation -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-w-full tw-px-2 tw-py-0\">\n <cide-ele-tab [tabs]=\"feeStructureTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\n (tabChange)=\"onTabChange($event)\">\n </cide-ele-tab>\n </div>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-4 tw-py-4\">\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n @switch (activeTab()) {\n\n @case ('basic') {\n <!-- Basic Information -->\n <div class=\"tw-space-y-4\">\n <!-- First Row: Fee Code (small), Fee Name - Always on one row -->\n <div class=\"tw-grid\" style=\"grid-template-columns: 170px 1fr; gap: 1rem;\">\n <cide-ele-input label=\"Fee Structure Code\" formControlName=\"fees_structure_code\"\n placeholder=\"Auto-generated by API\" size=\"sm\" [disabled]=\"isEditMode()\">\n </cide-ele-input>\n <cide-ele-input label=\"Fee Structure Name\" formControlName=\"fees_structure_name\"\n placeholder=\"e.g., Grade 10 Fee Structure 2024-25\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div>\n <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n placeholder=\"Enter detailed description of the fee structure...\" rows=\"2\" size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n <!-- Academic Dropdowns - Using Program Section Selector Component -->\n\n <cide-shared-program-section-selector-wrapper [formGroup]=\"feeStructureForm\"\n [classProgramControlName]=\"'fees_class_program_id_acacpm'\"\n [branchControlName]=\"'fees_class_program_branch_id_acabrn'\"\n [termControlName]=\"'fees_class_program_term_id_acapt'\"\n [sectionControlName]=\"'fees_program_term_section_id_acapts'\"\n [academicYearId]=\"feeStructureForm.get('fees_academic_year_id_acayr')?.value\"\n [entityId]=\"feeStructureForm.get('fees_entity_id_syen')?.value\" [disabled]=\"isViewMode()\"\n [showLabels]=\"true\" [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\">\n </cide-shared-program-section-selector-wrapper>\n\n <!-- Reservation Category Dropdown -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mt-4\">\n <cide-ele-select label=\"Reservation Category\" formControlName=\"fees_student_category_id_sygms\"\n [options]=\"studentCategories()\" [loading]=\"studentCategoriesLoading()\"\n placeholder=\"Select reservation category\" size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div\n class=\"tw-flex tw-items-center tw-gap-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n <cide-ele-input formControlName=\"fees_is_active\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\n <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this fee structure</span>\n </div>\n </div>\n </div>\n }\n\n @case ('items') {\n <!-- Fee Items Section -->\n <div class=\"tw-space-y-3\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <div>\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-m-0\">Fee Items</h6>\n <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Configure individual fee items for this structure</p>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-text-right\">\n <div class=\"tw-text-xs tw-text-gray-500\">Total Amount</div>\n <div class=\"tw-text-base tw-font-bold tw-text-green-600\">{{ formatCurrency(totalAmount()) }}</div>\n </div>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"addFeeItem()\">\n Add Fee Item\n </button>\n </div>\n </div>\n\n <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-pr-2\">\n @for (item of feeItemsArray.controls; track $index; let itemIndex = $index) {\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm hover:tw-shadow-md tw-transition-shadow tw-p-3\"\n [formGroupName]=\"itemIndex\">\n\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-bg-blue-100 tw-p-1.5 tw-rounded\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">receipt</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">Item #{{ itemIndex + 1 }}</h6>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n @if (itemIndex > 0) {\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"moveItemUp(itemIndex)\"\n title=\"Move Up\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_upward</cide-ele-icon>\n </button>\n }\n @if (itemIndex < feeItemsArray.length - 1) { <button cideEleButton type=\"button\" variant=\"ghost\"\n size=\"xs\" (click)=\"moveItemDown(itemIndex)\" title=\"Move Down\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_downward</cide-ele-icon>\n </button>\n }\n <button cideEleButton type=\"button\" variant=\"danger\" size=\"xs\" leftIcon=\"delete\"\n (click)=\"removeFeeItem(itemIndex)\" [disabled]=\"feeItemsArray.length === 1\">\n Remove\n </button>\n </div>\n </div>\n\n <!-- Category, Code, Name in one row -->\n <div class=\"tw-grid\" style=\"grid-template-columns: 1fr 170px 1fr; gap: 1rem;\">\n <cide-ele-select label=\"Category\" formControlName=\"feesi_category_id_sygms\"\n [options]=\"feeCategoriesOptions()\" [loading]=\"feeCategoriesLoading()\" size=\"sm\"\n placeholder=\"Select Fee Category\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Item Code\" formControlName=\"feesi_item_code\" size=\"sm\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Item Name\" formControlName=\"feesi_item_name\" size=\"sm\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-mt-2\">\n <cide-ele-textarea label=\"Description\" formControlName=\"feesi_description\" rows=\"1\" size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n <!-- Amount Section -->\n <div class=\"tw-mt-2\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n <cide-ele-input\n [label]=\"item.get('feesi_is_amount_editable')?.value ? 'Base Amount (Default)' : 'Amount'\"\n formControlName=\"feesi_amount\" type=\"number\" size=\"sm\"\n [title]=\"item.get('feesi_is_amount_editable')?.value ? 'Default amount used when applying fee. Can be edited per student if editable.' : 'Fixed fee amount'\">\n </cide-ele-input>\n </div>\n\n <!-- Amount Editable Option -->\n <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2\">\n <cide-ele-input formControlName=\"feesi_is_amount_editable\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <div class=\"tw-flex-1\">\n <span class=\"tw-text-xs tw-font-semibold tw-text-blue-900\">Allow Amount to be Edited</span>\n <p class=\"tw-text-xs tw-text-blue-700 tw-mt-0.5\">\n Enable this for fees that vary per student (e.g., Transport fee based on distance).\n When applying fees, you'll be asked to enter the amount within the specified range.\n </p>\n </div>\n </div>\n\n <!-- Min/Max Amount Fields (shown when editable is checked) -->\n @if (item.get('feesi_is_amount_editable')?.value) {\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n <cide-ele-input label=\"Minimum Amount\" formControlName=\"feesi_min_amount\" type=\"number\"\n size=\"sm\" placeholder=\"No minimum\"\n title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Maximum Amount\" formControlName=\"feesi_max_amount\" type=\"number\"\n size=\"sm\" placeholder=\"No maximum\"\n title=\"Maximum amount allowed when editing (leave empty for no maximum)\">\n </cide-ele-input>\n </div>\n }\n </div>\n </div>\n\n <!-- Additional Options -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2 tw-mt-2\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_is_mandatory\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Mandatory</span>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_is_refundable\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Refundable</span>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_is_installment_allowed\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Installment Allowed</span>\n </div>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n @if (item.get('feesi_is_installment_allowed')?.value) {\n <cide-ele-input label=\"Installment Count\" formControlName=\"feesi_installment_count\" type=\"number\"\n size=\"sm\">\n </cide-ele-input>\n }\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_tax_applicable\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Tax Applicable</span>\n </div>\n </div>\n\n @if (item.get('feesi_tax_applicable')?.value) {\n <div class=\"tw-mt-2\">\n <cide-ele-input label=\"Tax Percentage\" formControlName=\"feesi_tax_percentage\" type=\"number\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n }\n\n <!-- Installment Details Table -->\n <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">schedule</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">\n @if (item.get('feesi_is_installment_allowed')?.value) {\n Installment Details ({{ item.get('feesi_installment_count')?.value || 1 }} Installments)\n } @else {\n Payment Details (Single Payment)\n }\n </h6>\n </div>\n </div>\n\n <div formArrayName=\"installments\" class=\"tw-space-y-3\">\n @for (installment of getInstallmentsArray(itemIndex).controls; track $index; let installmentIndex\n = $index) {\n <div class=\"tw-bg-white tw-rounded tw-border tw-border-gray-300 tw-p-3\"\n [formGroupName]=\"installmentIndex\">\n\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-bg-blue-100 tw-p-1 tw-rounded\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">payments</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">\n @if (item.get('feesi_is_installment_allowed')?.value) {\n Installment #{{ installment.get('installment_number')?.value }}\n } @else {\n Payment Details\n }\n </h6>\n </div>\n <div class=\"tw-text-sm tw-font-medium tw-text-green-600\">\n Amount: {{ formatCurrency(installment.get('installment_amount')?.value || 0) }}\n </div>\n </div>\n\n <!-- Installment Amount Distribution -->\n @if (item.get('feesi_is_installment_allowed')?.value) {\n <div class=\"tw-p-2 tw-bg-yellow-50 tw-rounded tw-border tw-border-yellow-200 tw-mb-2\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2\">\n <cide-ele-select label=\"Distribution Type\" formControlName=\"distribution_type\"\n [options]=\"distributionTypeOptions\" size=\"sm\">\n </cide-ele-select>\n\n @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n <cide-ele-input label=\"Percentage (%)\" formControlName=\"percentage\" type=\"number\" size=\"sm\"\n title=\"Percentage of total amount for this installment\">\n </cide-ele-input>\n <div class=\"tw-flex tw-flex-col tw-items-end tw-justify-end tw-gap-1\">\n @if (installmentIndex > 0) {\n <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\n Previous: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) }}%\n </div>\n }\n <div class=\"tw-text-xs tw-text-gray-600\">\n Calculated: {{ formatCurrency((item.get('feesi_amount')?.value || 0) *\n (installment.get('percentage')?.value || 0) / 100) }}\n </div>\n @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex >\n 0) {\n <div class=\"tw-text-xs tw-font-semibold\"\n [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\"\n [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) +\n (installment.get('percentage')?.value || 0) }}%\n </div>\n }\n </div>\n }\n\n @if (installment.get('distribution_type')?.value === 'FIXED_AMOUNT') {\n <cide-ele-input label=\"Fixed Amount\" formControlName=\"fixed_amount\" type=\"number\" size=\"sm\"\n title=\"Fixed amount for this installment\">\n </cide-ele-input>\n }\n </div>\n </div>\n }\n\n <!-- Due Date Fields -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mb-2\">\n <cide-ele-input label=\"Due Date Offset (Days from Assignment)\"\n formControlName=\"due_date_offset_days\" type=\"number\" size=\"sm\"\n title=\"Days from assignment date\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Due Date (Fixed Date - Alternative)\" formControlName=\"due_date\"\n type=\"date\" size=\"sm\" title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n </div>\n\n <!-- Collection Window -->\n <div class=\"tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-3 tw-h-3\">schedule</cide-ele-icon>\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-m-0\">Collection Window</h6>\n </div>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n <cide-ele-input label=\"Start Offset (Days from Assignment)\"\n formControlName=\"collection_start_offset_days\" type=\"number\" size=\"sm\"\n title=\"Days from assignment date when collection can start\">\n </cide-ele-input>\n\n <cide-ele-input label=\"End Offset (Days from Assignment)\"\n formControlName=\"collection_end_offset_days\" type=\"number\" size=\"sm\"\n title=\"Days from assignment date when collection window ends\">\n </cide-ele-input>\n </div>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n <cide-ele-input label=\"Start Date (Fixed Date - Alternative)\"\n formControlName=\"collection_start_date\" type=\"date\" size=\"sm\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n\n <cide-ele-input label=\"End Date (Fixed Date - Alternative)\"\n formControlName=\"collection_end_date\" type=\"date\" size=\"sm\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (feeItemsArray.length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <div\n class=\"tw-bg-white tw-p-3 tw-rounded-full tw-w-12 tw-h-12 tw-mx-auto tw-mb-3 tw-flex tw-items-center tw-justify-center\">\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400\">receipt</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-1\">No Fee Items Yet</h6>\n <p class=\"tw-text-xs tw-text-gray-500\">Click \"Add Fee Item\" to start adding fee items to this structure.\n </p>\n </div>\n }\n </div>\n }\n }\n\n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <!-- Form Field Errors -->\n <div class=\"tw-w-full tw-mb-4\">\n <cide-form-field-error [formGroup]=\"feeStructureForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n @if (!isEditMode()) {\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n }\n\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n\n @if (!isInstallmentPercentagesValid()) {\n <div class=\"tw-w-full tw-mb-3 tw-p-2 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded tw-text-sm\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-text-red-700\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">error</cide-ele-icon>\n <span class=\"tw-font-medium\">Validation Error:</span>\n </div>\n <p class=\"tw-text-red-600 tw-mt-1 tw-ml-6\">\n All installment percentages must total exactly 100% before saving. Please adjust the percentages to\n continue.\n </p>\n </div>\n }\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\"\n [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" [loading]=\"submitting()\"\n leftIcon=\"save\">\n {{ isEditMode() ? 'Update Fee Structure' : 'Create Fee Structure' }}\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n </form>\n </div>\n</cide-lyt-shared-wrapper>", 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
|
|
2383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeStructureCreateComponent, isStandalone: true, selector: "lib-cide-fee-structure-create", ngImport: i0, template: "<!-- Fee Structure Form -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_structure' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n\n <!-- Back Button in Breadcrumb Area (View Mode Only) -->\n @if (isViewMode()) {\n <div breadcrumb-actions>\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"xs\" (click)=\"onCancel()\" leftIcon=\"arrow_back\" [adaptive]=\"true\">\n Back to List\n </button>\n\n </div>\n }\n\n <div class=\"tw-w-full tw-h-full\">\n <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"feeStructureForm\"\n [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\n\n <!-- Tab Navigation -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-w-full tw-px-2 tw-py-0\">\n <cide-ele-tab [tabs]=\"feeStructureTabs()\" [activeTabId]=\"activeTab()\" size=\"sm\" variant=\"default\"\n (tabChange)=\"onTabChange($event)\">\n </cide-ele-tab>\n </div>\n </div>\n\n <!-- Tab Content -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-4 tw-py-4\">\n <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n @switch (activeTab()) {\n\n @case ('basic') {\n <!-- Basic Information -->\n <div class=\"tw-space-y-4\">\n <!-- First Row: Fee Code (small), Fee Name - Always on one row -->\n <div class=\"tw-grid\" style=\"grid-template-columns: 170px 1fr; gap: 1rem;\">\n <cide-ele-input label=\"Fee Structure Code\" formControlName=\"fees_structure_code\"\n placeholder=\"Auto-generated by API\" size=\"sm\" [disabled]=\"isEditMode()\">\n </cide-ele-input>\n <cide-ele-input label=\"Fee Structure Name\" formControlName=\"fees_structure_name\"\n placeholder=\"e.g., Grade 10 Fee Structure 2024-25\" size=\"sm\">\n </cide-ele-input>\n </div>\n\n <div>\n <cide-ele-textarea label=\"Description\" formControlName=\"fees_structure_description\"\n placeholder=\"Enter detailed description of the fee structure...\" rows=\"2\" size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n <!-- Academic Dropdowns - Using Program Section Selector Component -->\n\n <cide-shared-program-section-selector-wrapper [formGroup]=\"feeStructureForm\"\n [classProgramControlName]=\"'fees_class_program_id_acacpm'\"\n [branchControlName]=\"'fees_class_program_branch_id_acabrn'\"\n [termControlName]=\"'fees_class_program_term_id_acapt'\"\n [sectionControlName]=\"'fees_program_term_section_id_acapts'\"\n [academicYearId]=\"feeStructureForm.get('fees_academic_year_id_acayr')?.value\"\n [entityId]=\"feeStructureForm.get('fees_entity_id_syen')?.value\" [disabled]=\"isViewMode()\"\n [showLabels]=\"true\" [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\">\n </cide-shared-program-section-selector-wrapper>\n\n <!-- Reservation Category Dropdown -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4 tw-mt-4\">\n <cide-ele-select label=\"Reservation Category\" formControlName=\"fees_student_category_id_sygms\"\n [options]=\"studentCategories()\" [loading]=\"studentCategoriesLoading()\"\n placeholder=\"Select reservation category\" size=\"sm\">\n </cide-ele-select>\n </div>\n\n <div\n class=\"tw-flex tw-items-center tw-gap-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n <cide-ele-input formControlName=\"fees_is_active\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <div class=\"tw-flex tw-flex-col\">\n <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\n <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this fee structure</span>\n </div>\n </div>\n </div>\n }\n\n @case ('items') {\n <!-- Fee Items Section -->\n <div class=\"tw-space-y-3\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <div>\n <h6 class=\"tw-text-base tw-font-semibold tw-text-gray-900 tw-m-0\">Fee Items</h6>\n <p class=\"tw-text-xs tw-text-gray-500 tw-m-0\">Configure individual fee items for this structure</p>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-3\">\n <div class=\"tw-text-right\">\n <div class=\"tw-text-xs tw-text-gray-500\">Total Amount</div>\n <div class=\"tw-text-base tw-font-bold tw-text-green-600\">{{ formatCurrency(totalAmount()) }}</div>\n </div>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"addFeeItem()\">\n Add Fee Item\n </button>\n </div>\n </div>\n\n <div formArrayName=\"fee_items\" class=\"tw-space-y-2 tw-pr-2\">\n @for (item of feeItemsArray.controls; track $index; let itemIndex = $index) {\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm hover:tw-shadow-md tw-transition-shadow tw-p-3\"\n [formGroupName]=\"itemIndex\">\n\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-2\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-bg-blue-100 tw-p-1.5 tw-rounded\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">receipt</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">Item #{{ itemIndex + 1 }}</h6>\n </div>\n <div class=\"tw-flex tw-items-center tw-gap-1\">\n @if (itemIndex > 0) {\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"moveItemUp(itemIndex)\"\n title=\"Move Up\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_upward</cide-ele-icon>\n </button>\n }\n @if (itemIndex < feeItemsArray.length - 1) { <button cideEleButton type=\"button\" variant=\"ghost\"\n size=\"xs\" (click)=\"moveItemDown(itemIndex)\" title=\"Move Down\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">arrow_downward</cide-ele-icon>\n </button>\n }\n <button cideEleButton type=\"button\" variant=\"danger\" size=\"xs\" leftIcon=\"delete\"\n (click)=\"removeFeeItem(itemIndex)\" [disabled]=\"feeItemsArray.length === 1\">\n Remove\n </button>\n </div>\n </div>\n\n <!-- Category, Code, Name in one row -->\n <div class=\"tw-grid\" style=\"grid-template-columns: 1fr 170px 1fr; gap: 1rem;\">\n <cide-ele-select label=\"Category\" formControlName=\"feesi_category_id_sygms\"\n [options]=\"feeCategoriesOptions()\" [loading]=\"feeCategoriesLoading()\" size=\"sm\"\n placeholder=\"Select Fee Category\">\n </cide-ele-select>\n\n <cide-ele-input label=\"Item Code\" formControlName=\"feesi_item_code\" size=\"sm\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Item Name\" formControlName=\"feesi_item_name\" size=\"sm\"\n placeholder=\"Auto-filled from category\">\n </cide-ele-input>\n </div>\n\n <div class=\"tw-mt-2\">\n <cide-ele-textarea label=\"Description\" formControlName=\"feesi_description\" rows=\"1\" size=\"sm\">\n </cide-ele-textarea>\n </div>\n\n <!-- Amount Section -->\n <div class=\"tw-mt-2\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n <cide-ele-input\n [label]=\"item.get('feesi_is_amount_editable')?.value ? 'Base Amount (Default)' : 'Amount'\"\n formControlName=\"feesi_amount\" type=\"number\" size=\"sm\"\n [title]=\"item.get('feesi_is_amount_editable')?.value ? 'Default amount used when applying fee. Can be edited per student if editable.' : 'Fixed fee amount'\">\n </cide-ele-input>\n </div>\n\n <!-- Amount Editable Option -->\n <div class=\"tw-mt-2 tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-2\">\n <cide-ele-input formControlName=\"feesi_is_amount_editable\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <div class=\"tw-flex-1\">\n <span class=\"tw-text-xs tw-font-semibold tw-text-blue-900\">Allow Amount to be Edited</span>\n <p class=\"tw-text-xs tw-text-blue-700 tw-mt-0.5\">\n Enable this for fees that vary per student (e.g., Transport fee based on distance).\n When applying fees, you'll be asked to enter the amount within the specified range.\n </p>\n </div>\n </div>\n\n <!-- Min/Max Amount Fields (shown when editable is checked) -->\n @if (item.get('feesi_is_amount_editable')?.value) {\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n <cide-ele-input label=\"Minimum Amount\" formControlName=\"feesi_min_amount\" type=\"number\"\n size=\"sm\" placeholder=\"No minimum\"\n title=\"Minimum amount allowed when editing (leave empty for no minimum)\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Maximum Amount\" formControlName=\"feesi_max_amount\" type=\"number\"\n size=\"sm\" placeholder=\"No maximum\"\n title=\"Maximum amount allowed when editing (leave empty for no maximum)\">\n </cide-ele-input>\n </div>\n }\n </div>\n </div>\n\n <!-- Additional Options -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2 tw-mt-2\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_is_mandatory\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Mandatory</span>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_is_refundable\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Refundable</span>\n </div>\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_is_installment_allowed\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Installment Allowed</span>\n </div>\n </div>\n\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n @if (item.get('feesi_is_installment_allowed')?.value) {\n <cide-ele-input label=\"Installment Count\" formControlName=\"feesi_installment_count\" type=\"number\"\n size=\"sm\">\n </cide-ele-input>\n }\n\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-2 tw-bg-gray-50 tw-rounded\">\n <cide-ele-input formControlName=\"feesi_tax_applicable\" type=\"checkbox\" size=\"sm\">\n </cide-ele-input>\n <span class=\"tw-text-xs tw-text-gray-700\">Tax Applicable</span>\n </div>\n </div>\n\n @if (item.get('feesi_tax_applicable')?.value) {\n <div class=\"tw-mt-2\">\n <cide-ele-input label=\"Tax Percentage\" formControlName=\"feesi_tax_percentage\" type=\"number\"\n size=\"sm\">\n </cide-ele-input>\n </div>\n }\n\n <!-- Installment Details Table -->\n <div class=\"tw-mt-4 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">schedule</cide-ele-icon>\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">\n @if (item.get('feesi_is_installment_allowed')?.value) {\n Installment Details ({{ item.get('feesi_installment_count')?.value || 1 }} Installments)\n } @else {\n Payment Details (Single Payment)\n }\n </h6>\n </div>\n </div>\n\n <div formArrayName=\"installments\" class=\"tw-space-y-3\">\n @for (installment of getInstallmentsArray(itemIndex).controls; track $index; let installmentIndex\n = $index) {\n <div class=\"tw-bg-white tw-rounded tw-border tw-border-gray-300 tw-p-3\"\n [formGroupName]=\"installmentIndex\">\n\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <div class=\"tw-bg-blue-100 tw-p-1 tw-rounded\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-4 tw-h-4\">payments</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-gray-900\">\n @if (item.get('feesi_is_installment_allowed')?.value) {\n Installment #{{ installment.get('installment_number')?.value }}\n } @else {\n Payment Details\n }\n </h6>\n </div>\n <div class=\"tw-text-sm tw-font-medium tw-text-green-600\">\n Amount: {{ formatCurrency(installment.get('installment_amount')?.value || 0) }}\n </div>\n </div>\n\n <!-- Installment Amount Distribution -->\n @if (item.get('feesi_is_installment_allowed')?.value) {\n <div class=\"tw-p-2 tw-bg-yellow-50 tw-rounded tw-border tw-border-yellow-200 tw-mb-2\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-2\">\n <cide-ele-select label=\"Distribution Type\" formControlName=\"distribution_type\"\n [options]=\"distributionTypeOptions\" size=\"sm\">\n </cide-ele-select>\n\n @if (installment.get('distribution_type')?.value === 'PERCENTAGE') {\n <cide-ele-input label=\"Percentage (%)\" formControlName=\"percentage\" type=\"number\" size=\"sm\"\n title=\"Percentage of total amount for this installment\">\n </cide-ele-input>\n <div class=\"tw-flex tw-flex-col tw-items-end tw-justify-end tw-gap-1\">\n @if (installmentIndex > 0) {\n <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\n Previous: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) }}%\n </div>\n }\n <div class=\"tw-text-xs tw-text-gray-600\">\n Calculated: {{ formatCurrency((item.get('feesi_amount')?.value || 0) *\n (installment.get('percentage')?.value || 0) / 100) }}\n </div>\n @if (installmentIndex === getInstallmentsArray(itemIndex).length - 1 && installmentIndex >\n 0) {\n <div class=\"tw-text-xs tw-font-semibold\"\n [class.tw-text-green-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) === 100\"\n [class.tw-text-red-600]=\"(getPreviousInstallmentsPercentage(itemIndex, installmentIndex) + (installment.get('percentage')?.value || 0)) !== 100\">\n Total: {{ getPreviousInstallmentsPercentage(itemIndex, installmentIndex) +\n (installment.get('percentage')?.value || 0) }}%\n </div>\n }\n </div>\n }\n\n @if (installment.get('distribution_type')?.value === 'FIXED_AMOUNT') {\n <cide-ele-input label=\"Fixed Amount\" formControlName=\"fixed_amount\" type=\"number\" size=\"sm\"\n title=\"Fixed amount for this installment\">\n </cide-ele-input>\n }\n </div>\n </div>\n }\n\n <!-- Due Date Fields -->\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mb-2\">\n <cide-ele-input label=\"Due Date Offset (Days from Assignment)\"\n formControlName=\"due_date_offset_days\" type=\"number\" size=\"sm\"\n title=\"Days from assignment date\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Due Date (Fixed Date - Alternative)\" formControlName=\"due_date\"\n type=\"date\" size=\"sm\" title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n </div>\n\n <!-- Collection Window -->\n <div class=\"tw-p-2 tw-bg-blue-50 tw-rounded tw-border tw-border-blue-200\">\n <div class=\"tw-flex tw-items-center tw-gap-1.5 tw-mb-2\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-3 tw-h-3\">schedule</cide-ele-icon>\n <h6 class=\"tw-text-xs tw-font-semibold tw-text-blue-900 tw-m-0\">Collection Window</h6>\n </div>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2\">\n <cide-ele-input label=\"Start Offset (Days from Assignment)\"\n formControlName=\"collection_start_offset_days\" type=\"number\" size=\"sm\"\n title=\"Days from assignment date when collection can start\">\n </cide-ele-input>\n\n <cide-ele-input label=\"End Offset (Days from Assignment)\"\n formControlName=\"collection_end_offset_days\" type=\"number\" size=\"sm\"\n title=\"Days from assignment date when collection window ends\">\n </cide-ele-input>\n </div>\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-2 tw-mt-2\">\n <cide-ele-input label=\"Start Date (Fixed Date - Alternative)\"\n formControlName=\"collection_start_date\" type=\"date\" size=\"sm\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n\n <cide-ele-input label=\"End Date (Fixed Date - Alternative)\"\n formControlName=\"collection_end_date\" type=\"date\" size=\"sm\"\n title=\"Use fixed date instead of offset\">\n </cide-ele-input>\n </div>\n </div>\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n\n @if (feeItemsArray.length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <div\n class=\"tw-bg-white tw-p-3 tw-rounded-full tw-w-12 tw-h-12 tw-mx-auto tw-mb-3 tw-flex tw-items-center tw-justify-center\">\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400\">receipt</cide-ele-icon>\n </div>\n <h6 class=\"tw-text-sm tw-font-medium tw-text-gray-600 tw-mb-1\">No Fee Items Yet</h6>\n <p class=\"tw-text-xs tw-text-gray-500\">Click \"Add Fee Item\" to start adding fee items to this structure.\n </p>\n </div>\n }\n </div>\n }\n }\n\n <!-- Form Validation Errors -->\n @if (!isViewMode()) {\n <!-- Form Field Errors -->\n <div class=\"tw-w-full tw-mb-4\">\n <cide-form-field-error [formGroup]=\"feeStructureForm\"></cide-form-field-error>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"tw-flex tw-justify-end tw-gap-3 tw-mt-6\">\n @if (!isEditMode()) {\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n [disabled]=\"loading()\">\n Reset Form\n </button>\n }\n\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"onCancel()\" leftIcon=\"close\"\n [disabled]=\"loading()\">\n Cancel\n </button>\n\n @if (!isInstallmentPercentagesValid()) {\n <div class=\"tw-w-full tw-mb-3 tw-p-2 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded tw-text-sm\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-text-red-700\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">error</cide-ele-icon>\n <span class=\"tw-font-medium\">Validation Error:</span>\n </div>\n <p class=\"tw-text-red-600 tw-mt-1 tw-ml-6\">\n All installment percentages must total exactly 100% before saving. Please adjust the percentages to\n continue.\n </p>\n </div>\n }\n\n <button cideEleButton type=\"submit\" variant=\"primary\" size=\"sm\"\n [disabled]=\"submitting() || loading() || !isInstallmentPercentagesValid()\" [loading]=\"submitting()\"\n leftIcon=\"save\">\n {{ isEditMode() ? 'Update Fee Structure' : 'Create Fee Structure' }}\n </button>\n </div>\n }\n </div>\n </div>\n </div>\n </form>\n </div>\n</cide-lyt-shared-wrapper>", 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
|
|
2384
2384
|
}
|
|
2385
2385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeStructureCreateComponent, decorators: [{
|
|
2386
2386
|
type: Component,
|
|
@@ -3103,7 +3103,7 @@ class FeeAssignmentListComponent {
|
|
|
3103
3103
|
return directDetails || 'N/A';
|
|
3104
3104
|
}
|
|
3105
3105
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeAssignmentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
3106
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeAssignmentListComponent, isStandalone: true, selector: "cide-fee-assignment-list", viewQueries: [{ propertyName: "studentDetailsRendererTemplate", first: true, predicate: ["studentDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "amountRendererTemplate", first: true, predicate: ["amountRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "dateRendererTemplate", first: true, predicate: ["dateRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fee Assignment Container -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n\n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"navigateToAssign()\" [adaptive]=\"true\">\n Assign Fees\n </button>\n }\n @if (canBulkAssign()) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" leftIcon=\"group_add\" (click)=\"bulkAssign()\" [adaptive]=\"true\">\n Bulk Assignment\n </button>\n }\n\n </div>\n\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Stats Row -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-4 tw-gap-4\">\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Total Assigned</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-gray-900\">{{ stats().total }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Pending</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-yellow-600\">{{ stats().pending }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Partially Paid</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-blue-600\">{{ stats().partial }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Paid</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-green-600\">{{ stats().paid }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filters Row -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-4\">\n <cide-ele-select label=\"Academic Year\" [options]=\"academicYearOptions()\"\n [ngModel]=\"selectedAcademicYearFilter()\" (ngModelChange)=\"onAcademicYearFilterChange($event)\" size=\"sm\"\n placeholder=\"All Academic Years\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Class/Program\" [options]=\"classOptions()\" [ngModel]=\"selectedClassFilter()\"\n (ngModelChange)=\"onClassFilterChange($event)\" size=\"sm\" placeholder=\"All Classes\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Section\" [options]=\"sectionOptions()\" [ngModel]=\"selectedSectionFilter()\"\n (ngModelChange)=\"onSectionFilterChange($event)\" size=\"sm\" placeholder=\"All Sections\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Status\" [options]=\"[\n {value: '', label: 'All Status'},\n {value: 'PENDING', label: 'Pending'},\n {value: 'PARTIALLY_PAID', label: 'Partially Paid'},\n {value: 'PAID', label: 'Paid'},\n {value: 'WAIVED', label: 'Waived'}\n ]\" [ngModel]=\"selectedStatusFilter()\" (ngModelChange)=\"onStatusFilterChange($event)\" size=\"sm\"\n placeholder=\"All Status\">\n </cide-ele-select>\n </div>\n <div class=\"tw-mt-3\">\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"clearFilters()\">\n Clear Filters\n </button>\n </div>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #studentDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-w-full\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ row.student_name || 'N/A' }}</span>\n @if (row.student_id) {\n <span class=\"tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-gray-100 tw-text-gray-600 tw-text-[10px] tw-font-medium\">\n {{ row.student_id }}\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n @if (row.class || row.section) {\n {{ row.class || '' }} {{ row.section !== 'N/A' && row.section ? '/ ' + row.section : '' }}\n } @else {\n -\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #amountRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-text-sm tw-items-end\">\n <span class=\"tw-text-gray-900 tw-font-semibold\">{{ formatCurrency(row.feeas_amount_original) }}</span>\n @if (row.feeas_amount_discount > 0) {\n <div class=\"tw-text-xs tw-text-blue-600\">\n Discount: {{ formatCurrency(row.feeas_amount_discount) }}\n </div>\n }\n @if (row.feeas_amount_scholarship > 0) {\n <div class=\"tw-text-xs tw-text-purple-600\">\n Scholarship: {{ formatCurrency(row.feeas_amount_scholarship) }}\n </div>\n }\n <div class=\"tw-text-xs tw-text-gray-500\">\n Paid: {{ formatCurrency(row.feeas_amount_paid) }}\n </div>\n <div class=\"tw-text-xs tw-font-semibold\"\n [ngClass]=\"row.feeas_amount_remaining > 0 ? 'tw-text-red-600' : 'tw-text-green-600'\">\n Outstanding: {{ formatCurrency(row.feeas_amount_remaining) }}\n </div>\n </div>\n</ng-template>\n\n<ng-template #dateRendererTemplate let-row=\"row\">\n <div class=\"tw-text-sm tw-text-gray-900\">{{ formatDate(row.feeas_due_date) }}</div>\n</ng-template>\n\n<ng-template #statusRendererTemplate let-row=\"row\">\n <span\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\n [ngClass]=\"getStatusBadgeClass(row)\">\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\n {{ row.feeas_payment_status === 'PAID' ? 'check_circle' :\n row.feeas_payment_status === 'PARTIALLY_PAID' ? 'schedule' :\n row.feeas_payment_status === 'PENDING' ? 'pending' : 'cancel' }}\n </cide-ele-icon>\n {{ getStatusText(row) }}\n </span>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>", styles: [".fee-assignment-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
3106
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeAssignmentListComponent, isStandalone: true, selector: "cide-fee-assignment-list", viewQueries: [{ propertyName: "studentDetailsRendererTemplate", first: true, predicate: ["studentDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "amountRendererTemplate", first: true, predicate: ["amountRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "dateRendererTemplate", first: true, predicate: ["dateRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fee Assignment Container -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n\n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\n @if (canCreate()) {\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"navigateToAssign()\" [adaptive]=\"true\">\n Assign Fees\n </button>\n }\n @if (canBulkAssign()) {\n <button cideEleButton variant=\"secondary\" size=\"xs\" leftIcon=\"group_add\" (click)=\"bulkAssign()\" [adaptive]=\"true\">\n Bulk Assignment\n </button>\n }\n\n </div>\n\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Stats Row -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 sm:tw-grid-cols-4 tw-gap-4\">\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Total Assigned</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-gray-900\">{{ stats().total }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Pending</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-yellow-600\">{{ stats().pending }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Partially Paid</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-blue-600\">{{ stats().partial }}</div>\n </div>\n <div class=\"tw-bg-white tw-p-4 tw-rounded-lg tw-border tw-border-gray-200\">\n <div class=\"tw-text-xs tw-text-gray-500 tw-mb-1\">Paid</div>\n <div class=\"tw-text-2xl tw-font-bold tw-text-green-600\">{{ stats().paid }}</div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Filters Row -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-px-6 tw-py-4 tw-bg-gray-50 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-4 tw-gap-4\">\n <cide-ele-select label=\"Academic Year\" [options]=\"academicYearOptions()\"\n [ngModel]=\"selectedAcademicYearFilter()\" (ngModelChange)=\"onAcademicYearFilterChange($event)\" size=\"sm\"\n placeholder=\"All Academic Years\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Class/Program\" [options]=\"classOptions()\" [ngModel]=\"selectedClassFilter()\"\n (ngModelChange)=\"onClassFilterChange($event)\" size=\"sm\" placeholder=\"All Classes\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Section\" [options]=\"sectionOptions()\" [ngModel]=\"selectedSectionFilter()\"\n (ngModelChange)=\"onSectionFilterChange($event)\" size=\"sm\" placeholder=\"All Sections\">\n </cide-ele-select>\n\n <cide-ele-select label=\"Status\" [options]=\"[\n {value: '', label: 'All Status'},\n {value: 'PENDING', label: 'Pending'},\n {value: 'PARTIALLY_PAID', label: 'Partially Paid'},\n {value: 'PAID', label: 'Paid'},\n {value: 'WAIVED', label: 'Waived'}\n ]\" [ngModel]=\"selectedStatusFilter()\" (ngModelChange)=\"onStatusFilterChange($event)\" size=\"sm\"\n placeholder=\"All Status\">\n </cide-ele-select>\n </div>\n <div class=\"tw-mt-3\">\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"clearFilters()\">\n Clear Filters\n </button>\n </div>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-h-full tw-relative\">\n\n <!-- Data Grid Component -->\n <div class=\"tw-h-full tw-overflow-auto\">\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n\n </div>\n </div>\n\n </div>\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #studentDetailsRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-w-full\">\n <div class=\"tw-flex tw-items-center tw-gap-2\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ row.student_name || 'N/A' }}</span>\n @if (row.student_id) {\n <span class=\"tw-px-1.5 tw-py-0.5 tw-rounded tw-bg-gray-100 tw-text-gray-600 tw-text-[10px] tw-font-medium\">\n {{ row.student_id }}\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-mt-0.5\">\n @if (row.class || row.section) {\n {{ row.class || '' }} {{ row.section !== 'N/A' && row.section ? '/ ' + row.section : '' }}\n } @else {\n -\n }\n </div>\n </div>\n</ng-template>\n\n<ng-template #amountRendererTemplate let-row=\"row\">\n <div class=\"tw-flex tw-flex-col tw-text-sm tw-items-end\">\n <span class=\"tw-text-gray-900 tw-font-semibold\">{{ formatCurrency(row.feeas_amount_original) }}</span>\n @if (row.feeas_amount_discount > 0) {\n <div class=\"tw-text-xs tw-text-blue-600\">\n Discount: {{ formatCurrency(row.feeas_amount_discount) }}\n </div>\n }\n @if (row.feeas_amount_scholarship > 0) {\n <div class=\"tw-text-xs tw-text-purple-600\">\n Scholarship: {{ formatCurrency(row.feeas_amount_scholarship) }}\n </div>\n }\n <div class=\"tw-text-xs tw-text-gray-500\">\n Paid: {{ formatCurrency(row.feeas_amount_paid) }}\n </div>\n <div class=\"tw-text-xs tw-font-semibold\"\n [ngClass]=\"row.feeas_amount_remaining > 0 ? 'tw-text-red-600' : 'tw-text-green-600'\">\n Outstanding: {{ formatCurrency(row.feeas_amount_remaining) }}\n </div>\n </div>\n</ng-template>\n\n<ng-template #dateRendererTemplate let-row=\"row\">\n <div class=\"tw-text-sm tw-text-gray-900\">{{ formatDate(row.feeas_due_date) }}</div>\n</ng-template>\n\n<ng-template #statusRendererTemplate let-row=\"row\">\n <span\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\n [ngClass]=\"getStatusBadgeClass(row)\">\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\n {{ row.feeas_payment_status === 'PAID' ? 'check_circle' :\n row.feeas_payment_status === 'PARTIALLY_PAID' ? 'schedule' :\n row.feeas_payment_status === 'PENDING' ? 'pending' : 'cancel' }}\n </cide-ele-icon>\n {{ getStatusText(row) }}\n </span>\n</ng-template>\n\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\n (itemClick)=\"onDropdownItemClick($event, row)\">\n </cide-ele-dropdown>\n</ng-template>", styles: [".fee-assignment-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }] });
|
|
3107
3107
|
}
|
|
3108
3108
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeAssignmentListComponent, decorators: [{
|
|
3109
3109
|
type: Component,
|
|
@@ -4738,7 +4738,7 @@ class FeeDetailsViewerComponent {
|
|
|
4738
4738
|
}
|
|
4739
4739
|
}
|
|
4740
4740
|
</div>
|
|
4741
|
-
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }] });
|
|
4741
|
+
`, isInline: true, styles: [":host{display:block}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "pipe", type: CurrencyPipe, name: "currency" }] });
|
|
4742
4742
|
}
|
|
4743
4743
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeDetailsViewerComponent, decorators: [{
|
|
4744
4744
|
type: Component,
|
|
@@ -5690,7 +5690,7 @@ class FeeApplicableFeesComponent {
|
|
|
5690
5690
|
return selectedCount > 0 && selectedCount < selectableFees.length;
|
|
5691
5691
|
}
|
|
5692
5692
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeApplicableFeesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
5693
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeApplicableFeesComponent, isStandalone: true, selector: "cide-fee-applicable-fees", inputs: { entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, academicYearId: { classPropertyName: "academicYearId", publicName: "academicYearId", isSignal: true, isRequired: false, transformFunction: null }, classProgramId: { classPropertyName: "classProgramId", publicName: "classProgramId", isSignal: true, isRequired: false, transformFunction: null }, termId: { classPropertyName: "termId", publicName: "termId", isSignal: true, isRequired: false, transformFunction: null }, branchId: { classPropertyName: "branchId", publicName: "branchId", isSignal: true, isRequired: false, transformFunction: null }, sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null }, studentId: { classPropertyName: "studentId", publicName: "studentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { feesCalculated: "feesCalculated" }, providers: [CurrencyPipe$1], ngImport: i0, template: "<div class=\"tw-w-full\">\r\n <!-- Loading State -->\r\n @if (loading()) {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400 tw-animate-spin tw-mx-auto tw-mb-2\">refresh</cide-ele-icon>\r\n <span class=\"tw-text-xs tw-text-gray-500\">Loading applicable fees...</span>\r\n </div>\r\n } @else if (applicableFees().length > 0) {\r\n <!-- Fee Structure Selection (if multiple structures) -->\r\n @if (feeStructureGroups().length > 1) {\r\n <div class=\"tw-mb-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\r\n <label class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2 tw-block\">Select Fee Structure</label>\r\n <cide-ele-select [options]=\"feeStructureOptions()\" [ngModel]=\"selectedFeeStructureId() || ''\"\r\n (ngModelChange)=\"onStructureChange($event)\" placeholder=\"Select a fee structure\">\r\n </cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Fee Items Table -->\r\n @if (selectedStructureFees().length > 0) {\r\n <div class=\"tw-overflow-x-auto tw-rounded-lg tw-border tw-border-gray-200\">\r\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-bg-white\">\r\n <thead class=\"tw-bg-gray-50\">\r\n <tr>\r\n <th class=\"tw-px-4 tw-py-3 tw-w-10 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <input type=\"checkbox\"\r\n class=\"tw-w-4 tw-h-4 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\r\n [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\"\r\n (change)=\"toggleSelectAll($any($event.target).checked)\">\r\n </div>\r\n </th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-left tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[250px]\">\r\n Fee Name</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-left tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap\">\r\n Category</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap tw-min-w-[120px]\">\r\n Original Amount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[160px]\">\r\n Discount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[160px]\">\r\n Scholarship</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap tw-min-w-[120px]\">\r\n Final Amount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-center tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-w-[80px]\">\r\n Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\r\n @for (fee of selectedStructureFees(); track fee._id) {\r\n <tr class=\"tw-bg-white hover:tw-bg-gray-50 tw-transition-colors\">\r\n <td class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <input type=\"checkbox\"\r\n class=\"tw-w-4 tw-h-4 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n [checked]=\"fee.is_assigned || isSelected(getFeeId(fee))\" [disabled]=\"!!fee.is_assigned\"\r\n (change)=\"toggleFeeSelection(getFeeId(fee))\">\r\n </div>\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-medium tw-text-gray-900 tw-bg-white\">\r\n {{ fee.fees_structure_name || 'N/A' }}\r\n @if (fee.fees_structure_code) {\r\n <span class=\"tw-text-gray-500 tw-ms-1\">({{ fee.fees_structure_code }})</span>\r\n }\r\n @if (fee.is_assigned) {\r\n <span\r\n class=\"tw-ml-2 tw-px-2 tw-py-0.5 tw-bg-yellow-100 tw-text-yellow-800 tw-text-xs tw-font-semibold tw-rounded-full\">\r\n Assigned\r\n </span>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-text-gray-600 tw-bg-white\">{{ fee.fees_category_name ||\r\n 'N/A' }}</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-text-gray-900 tw-text-right tw-font-medium tw-bg-white\">{{\r\n fee.fees_amount | currency }}</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-bg-white\">\r\n @if (getDiscountData(getFeeId(fee)); as discount) {\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-justify-end\">\r\n <span class=\"tw-text-xs tw-text-gray-600\">\r\n {{ discount.discount_amount | currency }}\r\n @if (discount.discount_type === 'PERCENTAGE') {\r\n <span class=\"tw-text-gray-400\">({{ discount.discount_value }}%)</span>\r\n }\r\n </span>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"openDiscountManagement(getFeeId(fee))\" title=\"Edit Discount\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">edit</cide-ele-icon>\r\n </button>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"removeDiscount(getFeeId(fee))\" title=\"Remove Discount\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" cideEleButton variant=\"outline\" size=\"xs\"\r\n (click)=\"openDiscountManagement(getFeeId(fee))\" class=\"tw-ml-auto\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">add</cide-ele-icon>\r\n Add Discount\r\n </button>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-bg-white\">\r\n @if (getScholarshipData(getFeeId(fee)); as scholarship) {\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-justify-end\">\r\n <span class=\"tw-text-xs tw-text-gray-600\">\r\n {{ scholarship.scholarship_amount | currency }}\r\n @if (scholarship.scholarship_category === 'PARTIAL' &&\r\n scholarship.scholarship_percentage) {\r\n <span class=\"tw-text-gray-400\">({{ scholarship.scholarship_percentage }}%)</span>\r\n } @else if (scholarship.scholarship_category === 'FULL') {\r\n <span class=\"tw-text-gray-400\">(Full)</span>\r\n }\r\n </span>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"openScholarshipManagement(getFeeId(fee))\" title=\"Edit Scholarship\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">edit</cide-ele-icon>\r\n </button>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"removeScholarship(getFeeId(fee))\" title=\"Remove Scholarship\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" cideEleButton variant=\"outline\" size=\"xs\"\r\n (click)=\"openScholarshipManagement(getFeeId(fee))\" class=\"tw-ml-auto\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">add</cide-ele-icon>\r\n Add Scholarship\r\n </button>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-semibold tw-text-gray-900 tw-text-right tw-bg-white\">\r\n {{ calculateFinalAmount(fee) | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-center tw-bg-white\">\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"viewFeeDetails(fee)\"\r\n title=\"View Details\">\r\n <cide-ele-icon>visibility</cide-ele-icon>\r\n </button>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n <tfoot class=\"tw-bg-gray-50 tw-border-t-2 tw-border-gray-200\">\r\n <tr>\r\n <td colspan=\"3\" class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-gray-900 tw-text-right\">\r\n Total:</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-blue-600 tw-text-right\">\r\n {{ totalDiscount() | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-purple-600 tw-text-right\">\r\n {{ totalScholarship() | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-base tw-font-bold tw-text-green-600 tw-text-right\">\r\n {{ totalFinalAmount() | currency }}\r\n </td>\r\n <td></td>\r\n </tr>\r\n </tfoot>\r\n </table>\r\n </div>\r\n } @else {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400 tw-mx-auto tw-mb-2\">account_balance</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-gray-600\">No fees available for selected structure.</p>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400 tw-mx-auto tw-mb-2\">search_off</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-gray-600\">No applicable fees found.</p>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Please ensure Class Program, Term, and Academic Year are\r\n selected.</p>\r\n </div>\r\n }\r\n</div>", styles: [":host{display:block}.fee-structure-select-container{max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], 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: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
|
|
5693
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeApplicableFeesComponent, isStandalone: true, selector: "cide-fee-applicable-fees", inputs: { entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, academicYearId: { classPropertyName: "academicYearId", publicName: "academicYearId", isSignal: true, isRequired: false, transformFunction: null }, classProgramId: { classPropertyName: "classProgramId", publicName: "classProgramId", isSignal: true, isRequired: false, transformFunction: null }, termId: { classPropertyName: "termId", publicName: "termId", isSignal: true, isRequired: false, transformFunction: null }, branchId: { classPropertyName: "branchId", publicName: "branchId", isSignal: true, isRequired: false, transformFunction: null }, sectionId: { classPropertyName: "sectionId", publicName: "sectionId", isSignal: true, isRequired: false, transformFunction: null }, studentId: { classPropertyName: "studentId", publicName: "studentId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { feesCalculated: "feesCalculated" }, providers: [CurrencyPipe$1], ngImport: i0, template: "<div class=\"tw-w-full\">\r\n <!-- Loading State -->\r\n @if (loading()) {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-6 tw-h-6 tw-text-gray-400 tw-animate-spin tw-mx-auto tw-mb-2\">refresh</cide-ele-icon>\r\n <span class=\"tw-text-xs tw-text-gray-500\">Loading applicable fees...</span>\r\n </div>\r\n } @else if (applicableFees().length > 0) {\r\n <!-- Fee Structure Selection (if multiple structures) -->\r\n @if (feeStructureGroups().length > 1) {\r\n <div class=\"tw-mb-3 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\r\n <label class=\"tw-text-xs tw-font-semibold tw-text-gray-700 tw-mb-2 tw-block\">Select Fee Structure</label>\r\n <cide-ele-select [options]=\"feeStructureOptions()\" [ngModel]=\"selectedFeeStructureId() || ''\"\r\n (ngModelChange)=\"onStructureChange($event)\" placeholder=\"Select a fee structure\">\r\n </cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Fee Items Table -->\r\n @if (selectedStructureFees().length > 0) {\r\n <div class=\"tw-overflow-x-auto tw-rounded-lg tw-border tw-border-gray-200\">\r\n <table class=\"tw-min-w-full tw-divide-y tw-divide-gray-200 tw-bg-white\">\r\n <thead class=\"tw-bg-gray-50\">\r\n <tr>\r\n <th class=\"tw-px-4 tw-py-3 tw-w-10 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <input type=\"checkbox\"\r\n class=\"tw-w-4 tw-h-4 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500\"\r\n [checked]=\"isAllSelected()\" [indeterminate]=\"isIndeterminate()\"\r\n (change)=\"toggleSelectAll($any($event.target).checked)\">\r\n </div>\r\n </th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-left tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[250px]\">\r\n Fee Name</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-left tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap\">\r\n Category</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap tw-min-w-[120px]\">\r\n Original Amount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[160px]\">\r\n Discount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-min-w-[160px]\">\r\n Scholarship</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-right tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-whitespace-nowrap tw-min-w-[120px]\">\r\n Final Amount</th>\r\n <th\r\n class=\"tw-px-4 tw-py-3 tw-text-center tw-text-xs tw-font-semibold tw-text-gray-700 tw-uppercase tw-tracking-wider tw-border-b tw-border-gray-200 tw-w-[80px]\">\r\n Actions</th>\r\n </tr>\r\n </thead>\r\n <tbody class=\"tw-bg-white tw-divide-y tw-divide-gray-200\">\r\n @for (fee of selectedStructureFees(); track fee._id) {\r\n <tr class=\"tw-bg-white hover:tw-bg-gray-50 tw-transition-colors\">\r\n <td class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center\">\r\n <input type=\"checkbox\"\r\n class=\"tw-w-4 tw-h-4 tw-rounded tw-border-gray-300 tw-text-blue-600 focus:tw-ring-blue-500 disabled:tw-opacity-50 disabled:tw-cursor-not-allowed\"\r\n [checked]=\"fee.is_assigned || isSelected(getFeeId(fee))\" [disabled]=\"!!fee.is_assigned\"\r\n (change)=\"toggleFeeSelection(getFeeId(fee))\">\r\n </div>\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-medium tw-text-gray-900 tw-bg-white\">\r\n {{ fee.fees_structure_name || 'N/A' }}\r\n @if (fee.fees_structure_code) {\r\n <span class=\"tw-text-gray-500 tw-ms-1\">({{ fee.fees_structure_code }})</span>\r\n }\r\n @if (fee.is_assigned) {\r\n <span\r\n class=\"tw-ml-2 tw-px-2 tw-py-0.5 tw-bg-yellow-100 tw-text-yellow-800 tw-text-xs tw-font-semibold tw-rounded-full\">\r\n Assigned\r\n </span>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-text-gray-600 tw-bg-white\">{{ fee.fees_category_name ||\r\n 'N/A' }}</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-text-gray-900 tw-text-right tw-font-medium tw-bg-white\">{{\r\n fee.fees_amount | currency }}</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-bg-white\">\r\n @if (getDiscountData(getFeeId(fee)); as discount) {\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-justify-end\">\r\n <span class=\"tw-text-xs tw-text-gray-600\">\r\n {{ discount.discount_amount | currency }}\r\n @if (discount.discount_type === 'PERCENTAGE') {\r\n <span class=\"tw-text-gray-400\">({{ discount.discount_value }}%)</span>\r\n }\r\n </span>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"openDiscountManagement(getFeeId(fee))\" title=\"Edit Discount\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">edit</cide-ele-icon>\r\n </button>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"removeDiscount(getFeeId(fee))\" title=\"Remove Discount\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" cideEleButton variant=\"outline\" size=\"xs\"\r\n (click)=\"openDiscountManagement(getFeeId(fee))\" class=\"tw-ml-auto\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">add</cide-ele-icon>\r\n Add Discount\r\n </button>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-bg-white\">\r\n @if (getScholarshipData(getFeeId(fee)); as scholarship) {\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-justify-end\">\r\n <span class=\"tw-text-xs tw-text-gray-600\">\r\n {{ scholarship.scholarship_amount | currency }}\r\n @if (scholarship.scholarship_category === 'PARTIAL' &&\r\n scholarship.scholarship_percentage) {\r\n <span class=\"tw-text-gray-400\">({{ scholarship.scholarship_percentage }}%)</span>\r\n } @else if (scholarship.scholarship_category === 'FULL') {\r\n <span class=\"tw-text-gray-400\">(Full)</span>\r\n }\r\n </span>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"openScholarshipManagement(getFeeId(fee))\" title=\"Edit Scholarship\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">edit</cide-ele-icon>\r\n </button>\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"xs\"\r\n (click)=\"removeScholarship(getFeeId(fee))\" title=\"Remove Scholarship\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">close</cide-ele-icon>\r\n </button>\r\n </div>\r\n } @else {\r\n <button type=\"button\" cideEleButton variant=\"outline\" size=\"xs\"\r\n (click)=\"openScholarshipManagement(getFeeId(fee))\" class=\"tw-ml-auto\">\r\n <cide-ele-icon class=\"tw-w-3.5 tw-h-3.5\">add</cide-ele-icon>\r\n Add Scholarship\r\n </button>\r\n }\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-semibold tw-text-gray-900 tw-text-right tw-bg-white\">\r\n {{ calculateFinalAmount(fee) | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-center tw-bg-white\">\r\n <button type=\"button\" cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"viewFeeDetails(fee)\"\r\n title=\"View Details\">\r\n <cide-ele-icon>visibility</cide-ele-icon>\r\n </button>\r\n </td>\r\n </tr>\r\n }\r\n </tbody>\r\n <tfoot class=\"tw-bg-gray-50 tw-border-t-2 tw-border-gray-200\">\r\n <tr>\r\n <td colspan=\"3\" class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-gray-900 tw-text-right\">\r\n Total:</td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-blue-600 tw-text-right\">\r\n {{ totalDiscount() | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-sm tw-font-bold tw-text-purple-600 tw-text-right\">\r\n {{ totalScholarship() | currency }}\r\n </td>\r\n <td class=\"tw-px-4 tw-py-3 tw-text-base tw-font-bold tw-text-green-600 tw-text-right\">\r\n {{ totalFinalAmount() | currency }}\r\n </td>\r\n <td></td>\r\n </tr>\r\n </tfoot>\r\n </table>\r\n </div>\r\n } @else {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400 tw-mx-auto tw-mb-2\">account_balance</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-gray-600\">No fees available for selected structure.</p>\r\n </div>\r\n }\r\n } @else {\r\n <div class=\"tw-text-center tw-py-6 tw-bg-white tw-rounded-lg tw-border-2 tw-border-dashed tw-border-gray-200\">\r\n <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400 tw-mx-auto tw-mb-2\">search_off</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-gray-600\">No applicable fees found.</p>\r\n <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">Please ensure Class Program, Term, and Academic Year are\r\n selected.</p>\r\n </div>\r\n }\r\n</div>", styles: [":host{display:block}.fee-structure-select-container{max-width:400px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], 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: "pipe", type: i1.CurrencyPipe, name: "currency" }] });
|
|
5694
5694
|
}
|
|
5695
5695
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeApplicableFeesComponent, decorators: [{
|
|
5696
5696
|
type: Component,
|
|
@@ -6376,7 +6376,7 @@ class FeeAssignmentCreateComponent {
|
|
|
6376
6376
|
this.breadcrumbData.set(additionalItems);
|
|
6377
6377
|
}
|
|
6378
6378
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeAssignmentCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
6379
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeAssignmentCreateComponent, isStandalone: true, selector: "cide-fee-assignment-create", ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n\r\n <!-- Main Grid Layout -->\r\n <div class=\"tw-p-4 tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-h-[calc(100vh-140px)] tw-overflow-hidden\">\r\n\r\n <!-- Main Column: Form Area (Centered) -->\r\n <div class=\"lg:tw-col-span-10 lg:tw-col-start-2 tw-flex tw-flex-col tw-gap-4 tw-overflow-y-auto tw-pr-2\">\r\n <!-- Section 1: Student Context -->\r\n <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">person_search</cide-ele-icon>\r\n Student Context\r\n </h3>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-items-start\" [formGroup]=\"assignmentForm\">\r\n <div>\r\n <cide-ele-select label=\"Select Student\" formControlName=\"feeas_student_id_auth\"\r\n [options]=\"studentListOptions()\" size=\"sm\" leadingIcon=\"person\" placeholder=\"Search student name or ID...\"\r\n (searchChange)=\"onStudentSearch($event)\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Selected Student Display -->\r\n @if (selectedStudent()) {\r\n <div\r\n class=\"premium-gradient tw-p-3 tw-rounded-lg tw-border tw-border-blue-100 tw-flex tw-items-center tw-gap-4\">\r\n <div\r\n class=\"tw-h-12 tw-w-12 tw-rounded-full tw-bg-blue-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-xl\">\r\n {{ selectedStudent()?.name?.[0] || '?' }}\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-sm tw-font-bold tw-text-gray-900\">{{ selectedStudent()?.name }}</div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">ID: {{ selectedStudent()?.student_id }}</div>\r\n <div class=\"tw-text-[10px] tw-text-blue-600 tw-font-medium tw-mt-1\">\r\n {{ selectedStudent()?.class }} | {{ selectedStudent()?.section }}\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"tw-border tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-p-3 tw-flex tw-items-center tw-justify-center tw-text-gray-400 tw-text-xs\">\r\n Select a student to view details\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Academic Placement (Conditional for Structure) -->\r\n @if (showFeeStructureField()) {\r\n <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-100\">\r\n <label class=\"tw-block tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-2\">\r\n ACADEMIC PLACEMENT filters (Required for Fee Structure)\r\n </label>\r\n <cide-shared-program-section-selector-wrapper [formGroup]=\"assignmentForm\"\r\n classProgramControlName=\"class_program_id\" branchControlName=\"branch_id\" termControlName=\"term_id\"\r\n sectionControlName=\"section_id\" [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\r\n [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\" [disabled]=\"isViewMode()\"\r\n (valuesChange)=\"onProgramSectionValuesChange($event)\">\r\n </cide-shared-program-section-selector-wrapper>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Section 2: Fee Configuration -->\r\n <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">settings</cide-ele-icon>\r\n Fee Configuration\r\n </h3>\r\n </div>\r\n\r\n <div class=\"tw-space-y-4\" [formGroup]=\"assignmentForm\">\r\n <!-- Source Selection -->\r\n <div class=\"tw-w-full md:tw-w-1/2\">\r\n <cide-ele-select label=\"Fee Assignment Mode\" formControlName=\"fee_source\" [options]=\"feeSourceOptions\"\r\n size=\"sm\" leadingIcon=\"tune\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Mode: Structure -->\r\n @if (showFeeStructureField()) {\r\n <div>\r\n <cide-fee-applicable-fees [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\r\n [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\r\n [classProgramId]=\"classProgramId()\" [termId]=\"termId()\" [branchId]=\"branchId()\" [sectionId]=\"sectionId()\"\r\n [studentId]=\"studentId()\" (feesCalculated)=\"onFeesCalculated($event)\">\r\n </cide-fee-applicable-fees>\r\n </div>\r\n }\r\n\r\n <!-- Mode: Custom -->\r\n @if (showCustomFeeFields()) {\r\n <div class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-select label=\"Category\" formControlName=\"feeas_fee_category_sygms\"\r\n [options]=\"feeCategoryOptions()\" size=\"sm\"></cide-ele-select>\r\n <cide-ele-input label=\"Fee Name\" formControlName=\"feeas_fee_name\" placeholder=\"e.g. Late Fee\"\r\n size=\"sm\"></cide-ele-input>\r\n </div>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-input label=\"Amount\" formControlName=\"feeas_original_amount\" type=\"number\" placeholder=\"0.00\"\r\n size=\"sm\" leadingIcon=\"currency_rupee\"></cide-ele-input>\r\n <cide-ele-select label=\"Type\" formControlName=\"feeas_fee_type\" [options]=\"feeTypeOptions\"\r\n size=\"sm\"></cide-ele-select>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-input label=\"Due Date\" formControlName=\"feeas_due_date\" type=\"date\" size=\"sm\"\r\n leadingIcon=\"event\"></cide-ele-input>\r\n </div>\r\n\r\n <!-- Discounts & Scholarships -->\r\n <div class=\"tw-bg-gray-50 tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\r\n <h6\r\n class=\"tw-text-xs tw-font-bold tw-text-gray-500 tw-uppercase tw-mb-4 tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-icon size=\"xs\">redeem</cide-ele-icon> Discounts & Scholarships\r\n </h6>\r\n\r\n <div class=\"tw-space-y-4\">\r\n <!-- Discount Rule Selector -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-select label=\"Apply Discount Rule\" formControlName=\"discount_rule_id\"\r\n [options]=\"discountRuleOptions()\" size=\"sm\" leadingIcon=\"percent\" placeholder=\"Select rule...\">\r\n </cide-ele-select>\r\n\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-pt-6\">\r\n @if (totalAmount() < originalAmount()) { <span\r\n class=\"tw-text-[10px] tw-font-bold tw-text-green-600 tw-bg-green-50 tw-px-2 tw-py-1 tw-rounded\">\r\n SAVE \u20B9{{ originalAmount() - totalAmount() | number:'1.2-2' }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-input label=\"Manual Discount\" formControlName=\"feeas_discount_amount\" type=\"number\"\r\n placeholder=\"0.00\" size=\"sm\" leadingIcon=\"remove_circle_outline\"></cide-ele-input>\r\n <cide-ele-input label=\"Scholarship\" formControlName=\"feeas_scholarship_amount\" type=\"number\"\r\n placeholder=\"0.00\" size=\"sm\" leadingIcon=\"school\"></cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Calculation Summary -->\r\n <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-200 tw-flex tw-flex-col tw-gap-1\">\r\n <div class=\"tw-flex tw-justify-between tw-text-xs tw-text-gray-500\">\r\n <span>Gross Amount:</span>\r\n <span>\u20B9{{ originalAmount() | number:'1.2-2' }}</span>\r\n </div>\r\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-font-bold tw-text-blue-600\">\r\n <span>Net Payable:</span>\r\n <span>\u20B9{{ totalAmount() | number:'1.2-2' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Footer Actions moved inside the main structure -->\r\n <div class=\"tw-mt-6 tw-pt-6 tw-border-t tw-border-gray-100 tw-flex tw-items-center tw-justify-end tw-gap-3\">\r\n <button cideEleButton variant=\"ghost\" (click)=\"onCancel()\" [disabled]=\"submitting()\">Cancel</button>\r\n\r\n @if (!isEditMode()) {\r\n <button cideEleButton variant=\"ghost\" (click)=\"resetForm()\" [disabled]=\"loading()\">Reset Form</button>\r\n }\r\n\r\n <button cideEleButton variant=\"primary\" class=\"tw-px-8\" [loading]=\"submitting()\"\r\n [disabled]=\"submitting() || assignmentForm.invalid || loading()\" (click)=\"onSubmit()\">\r\n {{ isEditMode() ? 'Update Assignment' : 'Confirm & Assign Fees' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</cide-lyt-shared-wrapper>", styles: [".glass-card{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.premium-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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", "adaptive"], 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: 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: FeeApplicableFeesComponent, selector: "cide-fee-applicable-fees", inputs: ["entityId", "academicYearId", "classProgramId", "termId", "branchId", "sectionId", "studentId"], outputs: ["feesCalculated"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
|
|
6379
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeeAssignmentCreateComponent, isStandalone: true, selector: "cide-fee-assignment-create", ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_assignment' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n\r\n <!-- Main Grid Layout -->\r\n <div class=\"tw-p-4 tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-h-[calc(100vh-140px)] tw-overflow-hidden\">\r\n\r\n <!-- Main Column: Form Area (Centered) -->\r\n <div class=\"lg:tw-col-span-10 lg:tw-col-start-2 tw-flex tw-flex-col tw-gap-4 tw-overflow-y-auto tw-pr-2\">\r\n <!-- Section 1: Student Context -->\r\n <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">person_search</cide-ele-icon>\r\n Student Context\r\n </h3>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-items-start\" [formGroup]=\"assignmentForm\">\r\n <div>\r\n <cide-ele-select label=\"Select Student\" formControlName=\"feeas_student_id_auth\"\r\n [options]=\"studentListOptions()\" size=\"sm\" leadingIcon=\"person\" placeholder=\"Search student name or ID...\"\r\n (searchChange)=\"onStudentSearch($event)\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Selected Student Display -->\r\n @if (selectedStudent()) {\r\n <div\r\n class=\"premium-gradient tw-p-3 tw-rounded-lg tw-border tw-border-blue-100 tw-flex tw-items-center tw-gap-4\">\r\n <div\r\n class=\"tw-h-12 tw-w-12 tw-rounded-full tw-bg-blue-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-xl\">\r\n {{ selectedStudent()?.name?.[0] || '?' }}\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-sm tw-font-bold tw-text-gray-900\">{{ selectedStudent()?.name }}</div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">ID: {{ selectedStudent()?.student_id }}</div>\r\n <div class=\"tw-text-[10px] tw-text-blue-600 tw-font-medium tw-mt-1\">\r\n {{ selectedStudent()?.class }} | {{ selectedStudent()?.section }}\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"tw-border tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-p-3 tw-flex tw-items-center tw-justify-center tw-text-gray-400 tw-text-xs\">\r\n Select a student to view details\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Academic Placement (Conditional for Structure) -->\r\n @if (showFeeStructureField()) {\r\n <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-100\">\r\n <label class=\"tw-block tw-text-xs tw-font-medium tw-text-gray-500 tw-mb-2\">\r\n ACADEMIC PLACEMENT filters (Required for Fee Structure)\r\n </label>\r\n <cide-shared-program-section-selector-wrapper [formGroup]=\"assignmentForm\"\r\n classProgramControlName=\"class_program_id\" branchControlName=\"branch_id\" termControlName=\"term_id\"\r\n sectionControlName=\"section_id\" [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\r\n [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\" [disabled]=\"isViewMode()\"\r\n (valuesChange)=\"onProgramSectionValuesChange($event)\">\r\n </cide-shared-program-section-selector-wrapper>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Section 2: Fee Configuration -->\r\n <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">settings</cide-ele-icon>\r\n Fee Configuration\r\n </h3>\r\n </div>\r\n\r\n <div class=\"tw-space-y-4\" [formGroup]=\"assignmentForm\">\r\n <!-- Source Selection -->\r\n <div class=\"tw-w-full md:tw-w-1/2\">\r\n <cide-ele-select label=\"Fee Assignment Mode\" formControlName=\"fee_source\" [options]=\"feeSourceOptions\"\r\n size=\"sm\" leadingIcon=\"tune\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <!-- Mode: Structure -->\r\n @if (showFeeStructureField()) {\r\n <div>\r\n <cide-fee-applicable-fees [entityId]=\"assignmentForm.get('feeas_entity_id_syen')?.value\"\r\n [academicYearId]=\"assignmentForm.get('feeas_academic_year_id_acayr')?.value\"\r\n [classProgramId]=\"classProgramId()\" [termId]=\"termId()\" [branchId]=\"branchId()\" [sectionId]=\"sectionId()\"\r\n [studentId]=\"studentId()\" (feesCalculated)=\"onFeesCalculated($event)\">\r\n </cide-fee-applicable-fees>\r\n </div>\r\n }\r\n\r\n <!-- Mode: Custom -->\r\n @if (showCustomFeeFields()) {\r\n <div class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-select label=\"Category\" formControlName=\"feeas_fee_category_sygms\"\r\n [options]=\"feeCategoryOptions()\" size=\"sm\"></cide-ele-select>\r\n <cide-ele-input label=\"Fee Name\" formControlName=\"feeas_fee_name\" placeholder=\"e.g. Late Fee\"\r\n size=\"sm\"></cide-ele-input>\r\n </div>\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-input label=\"Amount\" formControlName=\"feeas_original_amount\" type=\"number\" placeholder=\"0.00\"\r\n size=\"sm\" leadingIcon=\"currency_rupee\"></cide-ele-input>\r\n <cide-ele-select label=\"Type\" formControlName=\"feeas_fee_type\" [options]=\"feeTypeOptions\"\r\n size=\"sm\"></cide-ele-select>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-input label=\"Due Date\" formControlName=\"feeas_due_date\" type=\"date\" size=\"sm\"\r\n leadingIcon=\"event\"></cide-ele-input>\r\n </div>\r\n\r\n <!-- Discounts & Scholarships -->\r\n <div class=\"tw-bg-gray-50 tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\r\n <h6\r\n class=\"tw-text-xs tw-font-bold tw-text-gray-500 tw-uppercase tw-mb-4 tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-icon size=\"xs\">redeem</cide-ele-icon> Discounts & Scholarships\r\n </h6>\r\n\r\n <div class=\"tw-space-y-4\">\r\n <!-- Discount Rule Selector -->\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-select label=\"Apply Discount Rule\" formControlName=\"discount_rule_id\"\r\n [options]=\"discountRuleOptions()\" size=\"sm\" leadingIcon=\"percent\" placeholder=\"Select rule...\">\r\n </cide-ele-select>\r\n\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-pt-6\">\r\n @if (totalAmount() < originalAmount()) { <span\r\n class=\"tw-text-[10px] tw-font-bold tw-text-green-600 tw-bg-green-50 tw-px-2 tw-py-1 tw-rounded\">\r\n SAVE \u20B9{{ originalAmount() - totalAmount() | number:'1.2-2' }}\r\n </span>\r\n }\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4\">\r\n <cide-ele-input label=\"Manual Discount\" formControlName=\"feeas_discount_amount\" type=\"number\"\r\n placeholder=\"0.00\" size=\"sm\" leadingIcon=\"remove_circle_outline\"></cide-ele-input>\r\n <cide-ele-input label=\"Scholarship\" formControlName=\"feeas_scholarship_amount\" type=\"number\"\r\n placeholder=\"0.00\" size=\"sm\" leadingIcon=\"school\"></cide-ele-input>\r\n </div>\r\n </div>\r\n\r\n <!-- Calculation Summary -->\r\n <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-200 tw-flex tw-flex-col tw-gap-1\">\r\n <div class=\"tw-flex tw-justify-between tw-text-xs tw-text-gray-500\">\r\n <span>Gross Amount:</span>\r\n <span>\u20B9{{ originalAmount() | number:'1.2-2' }}</span>\r\n </div>\r\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-font-bold tw-text-blue-600\">\r\n <span>Net Payable:</span>\r\n <span>\u20B9{{ totalAmount() | number:'1.2-2' }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n\r\n <!-- Footer Actions moved inside the main structure -->\r\n <div class=\"tw-mt-6 tw-pt-6 tw-border-t tw-border-gray-100 tw-flex tw-items-center tw-justify-end tw-gap-3\">\r\n <button cideEleButton variant=\"ghost\" (click)=\"onCancel()\" [disabled]=\"submitting()\">Cancel</button>\r\n\r\n @if (!isEditMode()) {\r\n <button cideEleButton variant=\"ghost\" (click)=\"resetForm()\" [disabled]=\"loading()\">Reset Form</button>\r\n }\r\n\r\n <button cideEleButton variant=\"primary\" class=\"tw-px-8\" [loading]=\"submitting()\"\r\n [disabled]=\"submitting() || assignmentForm.invalid || loading()\" (click)=\"onSubmit()\">\r\n {{ isEditMode() ? 'Update Assignment' : 'Confirm & Assign Fees' }}\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n</cide-lyt-shared-wrapper>", styles: [".glass-card{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.premium-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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", "adaptive"], 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: 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: FeeApplicableFeesComponent, selector: "cide-fee-applicable-fees", inputs: ["entityId", "academicYearId", "classProgramId", "termId", "branchId", "sectionId", "studentId"], outputs: ["feesCalculated"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "pipe", type: i1.DecimalPipe, name: "number" }] });
|
|
6380
6380
|
}
|
|
6381
6381
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeeAssignmentCreateComponent, decorators: [{
|
|
6382
6382
|
type: Component,
|
|
@@ -6822,6 +6822,8 @@ class FeePaymentListComponent {
|
|
|
6822
6822
|
if (filterValues.is_reconciled !== undefined && filterValues.is_reconciled !== null && filterValues.is_reconciled !== '') {
|
|
6823
6823
|
filterParams.feepay_is_reconciled = filterValues.is_reconciled;
|
|
6824
6824
|
}
|
|
6825
|
+
// CRITICAL: Add entity filter to prevent cross-entity data leakage
|
|
6826
|
+
filterParams.feepay_entity_id_syen = this.appState.getActiveEntityId();
|
|
6825
6827
|
Object.assign(payload, filterParams);
|
|
6826
6828
|
this.feePaymentService.getFeePaymentList(payload)
|
|
6827
6829
|
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
@@ -7185,7 +7187,7 @@ class FeePaymentListComponent {
|
|
|
7185
7187
|
return payment.feepay_status_id_sygms || 'Unknown';
|
|
7186
7188
|
}
|
|
7187
7189
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7188
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeePaymentListComponent, isStandalone: true, selector: "cide-fee-payment-list", viewQueries: [{ propertyName: "paymentDetailsRendererTemplate", first: true, predicate: ["paymentDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "amountRendererTemplate", first: true, predicate: ["amountRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "dateRendererTemplate", first: true, predicate: ["dateRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "reconciledRendererTemplate", first: true, predicate: ["reconciledRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fee Payment Container -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_payment' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n\r\n <!-- Action Buttons in Breadcrumb Area -->\r\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\r\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"processPayment()\" [adaptive]=\"true\">\r\n Record Payment\r\n </button>\r\n\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-w-full tw-h-full\">\r\n <!-- Filter Section -->\r\n <div class=\"tw-p-4 tw-bg-gray-50/50 tw-border-b tw-border-gray-200\">\r\n <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-items-end\">\r\n\r\n <!-- Receipt Filter -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-2\">\r\n <cide-ele-input formControlName=\"receipt_no\" label=\"Receipt #\" placeholder=\"Search Receipt...\" size=\"md\"\r\n leftIcon=\"receipt\"></cide-ele-input>\r\n </div>\r\n\r\n <!-- Academic Filters -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-6\">\r\n <cide-shared-program-section-selector-wrapper [formGroup]=\"filterForm\" classProgramControlName=\"class_id\"\r\n termControlName=\"term_id\" sectionControlName=\"section_id\" [showLabels]=\"true\"\r\n [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\"></cide-shared-program-section-selector-wrapper>\r\n </div>\r\n\r\n <!-- Student Filter (Admin Only) -->\r\n @if (!isStudent()) {\r\n <div class=\"tw-col-span-1 lg:tw-col-span-3\">\r\n <cide-ele-select formControlName=\"student_id\" label=\"Student\" placeholder=\"Search Student...\"\r\n [options]=\"studentListOptions()\" [searchable]=\"true\" (searchChange)=\"onStudentSearch($event)\"\r\n leftIcon=\"person\" size=\"md\"></cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Reconciliation Filter -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-2\">\r\n <cide-ele-select formControlName=\"is_reconciled\" label=\"Reconciled\" placeholder=\"All\" [options]=\"[\r\n { label: 'All', value: '' },\r\n { label: 'Reconciled', value: 'true' },\r\n { label: 'Not Reconciled', value: 'false' }\r\n ]\" size=\"md\" leftIcon=\"fact_check\"></cide-ele-select>\r\n </div>\r\n\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-1 tw-flex tw-justify-end\">\r\n <button cideEleButton variant=\"ghost\" type=\"button\" (click)=\"resetFilters()\" leftIcon=\"filter_list_off\"\r\n size=\"md\" class=\"tw-w-full tw-justify-center\">\r\n Reset\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Grid Section -->\r\n <div class=\"tw-flex-1 tw-relative\">\r\n <div class=\"tw-absolute tw-inset-0 tw-overflow-auto\">\r\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n </div>\r\n </div>\r\n </div>\r\n</cide-lyt-shared-wrapper>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #paymentDetailsRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-flex-col tw-w-full\">\r\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.student_name || 'N/A' }}</div>\r\n <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\r\n {{ row.class_program_title || '-' }} {{ row.term_title ? '/ ' + row.term_title : '' }}\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\">ID: {{ row.feepay_student_id_auth || 'N/A' }}</div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateRendererTemplate let-row=\"row\">\r\n <span class=\"tw-text-sm tw-text-gray-900\">{{ formatDate(row.feepay_payment_date) }}</span>\r\n</ng-template>\r\n\r\n<ng-template #amountRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-flex-col tw-text-sm tw-items-end\">\r\n <span class=\"tw-text-gray-900 tw-font-semibold\">{{ formatCurrency(row.feepay_total_amount) }}</span>\r\n @if (row.feepay_late_fee_amount && row.feepay_late_fee_amount > 0) {\r\n <span class=\"tw-text-xs tw-text-red-600\">Late Fee: {{ formatCurrency(row.feepay_late_fee_amount) }}</span>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #statusRendererTemplate let-row=\"row\">\r\n <span\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\r\n [ngClass]=\"getStatusBadgeClass(row)\">\r\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\r\n {{ row.feepay_status_id_sygms === 'SUCCESS' || row.feepay_status_id_sygms === 'COMPLETED' ? 'check_circle' :\r\n row.feepay_status_id_sygms === 'PENDING' ? 'schedule' : 'error' }}\r\n </cide-ele-icon>\r\n {{ row.status_title || getStatusText(row) }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #reconciledRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-justify-center\">\r\n @if (row.feepay_is_reconciled) {\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-green-500\" title=\"Reconciled\">check_circle</cide-ele-icon>\r\n } @else {\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-gray-300\" title=\"Not Reconciled\">history</cide-ele-icon>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\r\n (itemClick)=\"onDropdownItemClick($event, row)\">\r\n </cide-ele-dropdown>\r\n</ng-template>", styles: [".fee-payment-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵ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: "ngmodule", type: ReactiveFormsModule }, { 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: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { 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: 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: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
|
|
7190
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeePaymentListComponent, isStandalone: true, selector: "cide-fee-payment-list", viewQueries: [{ propertyName: "paymentDetailsRendererTemplate", first: true, predicate: ["paymentDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "amountRendererTemplate", first: true, predicate: ["amountRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "dateRendererTemplate", first: true, predicate: ["dateRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "reconciledRendererTemplate", first: true, predicate: ["reconciledRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Fee Payment Container -->\r\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_payment' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n\r\n <!-- Action Buttons in Breadcrumb Area -->\r\n <div breadcrumb-actions class=\"tw-flex tw-items-center tw-gap-2\">\r\n <button cideEleButton variant=\"primary\" size=\"xs\" leftIcon=\"add\" (click)=\"processPayment()\" [adaptive]=\"true\">\r\n Record Payment\r\n </button>\r\n\r\n </div>\r\n\r\n <div class=\"tw-flex tw-flex-col tw-w-full tw-h-full\">\r\n <!-- Filter Section -->\r\n <div class=\"tw-p-4 tw-bg-gray-50/50 tw-border-b tw-border-gray-200\">\r\n <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-items-end\">\r\n\r\n <!-- Receipt Filter -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-2\">\r\n <cide-ele-input formControlName=\"receipt_no\" label=\"Receipt #\" placeholder=\"Search Receipt...\" size=\"md\"\r\n leftIcon=\"receipt\"></cide-ele-input>\r\n </div>\r\n\r\n <!-- Academic Filters -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-6\">\r\n <cide-shared-program-section-selector-wrapper [formGroup]=\"filterForm\" classProgramControlName=\"class_id\"\r\n termControlName=\"term_id\" sectionControlName=\"section_id\" [showLabels]=\"true\"\r\n [gridCols]=\"'tw-grid-cols-1 md:tw-grid-cols-3'\"></cide-shared-program-section-selector-wrapper>\r\n </div>\r\n\r\n <!-- Student Filter (Admin Only) -->\r\n @if (!isStudent()) {\r\n <div class=\"tw-col-span-1 lg:tw-col-span-3\">\r\n <cide-ele-select formControlName=\"student_id\" label=\"Student\" placeholder=\"Search Student...\"\r\n [options]=\"studentListOptions()\" [searchable]=\"true\" (searchChange)=\"onStudentSearch($event)\"\r\n leftIcon=\"person\" size=\"md\"></cide-ele-select>\r\n </div>\r\n }\r\n\r\n <!-- Reconciliation Filter -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-2\">\r\n <cide-ele-select formControlName=\"is_reconciled\" label=\"Reconciled\" placeholder=\"All\" [options]=\"[\r\n { label: 'All', value: '' },\r\n { label: 'Reconciled', value: 'true' },\r\n { label: 'Not Reconciled', value: 'false' }\r\n ]\" size=\"md\" leftIcon=\"fact_check\"></cide-ele-select>\r\n </div>\r\n\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-col-span-1 lg:tw-col-span-1 tw-flex tw-justify-end\">\r\n <button cideEleButton variant=\"ghost\" type=\"button\" (click)=\"resetFilters()\" leftIcon=\"filter_list_off\"\r\n size=\"md\" class=\"tw-w-full tw-justify-center\">\r\n Reset\r\n </button>\r\n </div>\r\n </div>\r\n </form>\r\n </div>\r\n\r\n <!-- Grid Section -->\r\n <div class=\"tw-flex-1 tw-relative\">\r\n <div class=\"tw-absolute tw-inset-0 tw-overflow-auto\">\r\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\"\r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n </div>\r\n </div>\r\n </div>\r\n</cide-lyt-shared-wrapper>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #paymentDetailsRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-flex-col tw-w-full\">\r\n <div class=\"tw-font-medium tw-text-gray-900\">{{ row.student_name || 'N/A' }}</div>\r\n <div class=\"tw-text-xs tw-text-blue-600 tw-font-medium\">\r\n {{ row.class_program_title || '-' }} {{ row.term_title ? '/ ' + row.term_title : '' }}\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate\">ID: {{ row.feepay_student_id_auth || 'N/A' }}</div>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateRendererTemplate let-row=\"row\">\r\n <span class=\"tw-text-sm tw-text-gray-900\">{{ formatDate(row.feepay_payment_date) }}</span>\r\n</ng-template>\r\n\r\n<ng-template #amountRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-flex-col tw-text-sm tw-items-end\">\r\n <span class=\"tw-text-gray-900 tw-font-semibold\">{{ formatCurrency(row.feepay_total_amount) }}</span>\r\n @if (row.feepay_late_fee_amount && row.feepay_late_fee_amount > 0) {\r\n <span class=\"tw-text-xs tw-text-red-600\">Late Fee: {{ formatCurrency(row.feepay_late_fee_amount) }}</span>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #statusRendererTemplate let-row=\"row\">\r\n <span\r\n class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-text-center\"\r\n [ngClass]=\"getStatusBadgeClass(row)\">\r\n <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\r\n {{ row.feepay_status_id_sygms === 'SUCCESS' || row.feepay_status_id_sygms === 'COMPLETED' ? 'check_circle' :\r\n row.feepay_status_id_sygms === 'PENDING' ? 'schedule' : 'error' }}\r\n </cide-ele-icon>\r\n {{ row.status_title || getStatusText(row) }}\r\n </span>\r\n</ng-template>\r\n\r\n<ng-template #reconciledRendererTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-justify-center\">\r\n @if (row.feepay_is_reconciled) {\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-green-500\" title=\"Reconciled\">check_circle</cide-ele-icon>\r\n } @else {\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-gray-300\" title=\"Not Reconciled\">history</cide-ele-icon>\r\n }\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\" let-value=\"value\">\r\n <cide-ele-dropdown [items]=\"getActionDropdownItems(row)\" [config]=\"getDropdownConfig()\"\r\n (itemClick)=\"onDropdownItemClick($event, row)\">\r\n </cide-ele-dropdown>\r\n</ng-template>", styles: [".fee-payment-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.ɵ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: "ngmodule", type: ReactiveFormsModule }, { 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: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { 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: 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: ProgramSectionSelectorWrapperComponent, selector: "cide-shared-program-section-selector-wrapper", inputs: ["formGroup", "classProgramControlName", "branchControlName", "termControlName", "sectionControlName", "academicYearId", "entityId", "disabled", "showLabels", "gridCols", "showAllPrograms", "includeInactive"], outputs: ["valuesChange"] }] });
|
|
7189
7191
|
}
|
|
7190
7192
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentListComponent, decorators: [{
|
|
7191
7193
|
type: Component,
|
|
@@ -7721,7 +7723,7 @@ class FeePaymentProcessComponent {
|
|
|
7721
7723
|
]);
|
|
7722
7724
|
}
|
|
7723
7725
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentProcessComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
7724
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeePaymentProcessComponent, isStandalone: true, selector: "cide-fee-payment-process", viewQueries: [{ propertyName: "selectTemplate", first: true, predicate: ["selectTemplate"], descendants: true, isSignal: true }, { propertyName: "amountPaidTemplate", first: true, predicate: ["amountPaidTemplate"], descendants: true, isSignal: true }, { propertyName: "outstandingTemplate", first: true, predicate: ["outstandingTemplate"], descendants: true, isSignal: true }, { propertyName: "dateTemplate", first: true, predicate: ["dateTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_payment' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n\r\n <!-- Main Content Grid -->\r\n <div class=\"tw-p-4 tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-h-[calc(100vh-140px)] tw-overflow-hidden\">\r\n\r\n <!-- Left: Form Controls (Col 8) -->\r\n <div class=\"lg:tw-col-span-8 tw-flex tw-flex-col tw-gap-4 tw-overflow-y-auto tw-pr-2\">\r\n\r\n <!-- Student Selection Card (Compact) -->\r\n <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">person_search</cide-ele-icon>\r\n Student Selection\r\n </h3>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-items-start\">\r\n <div [formGroup]=\"paymentForm\">\r\n <cide-ele-select formControlName=\"feepay_student_id_auth\" label=\"Search Student\"\r\n placeholder=\"Enter student name or ID...\" [options]=\"studentListOptions()\" [loading]=\"loading()\"\r\n (searchChange)=\"onStudentSearch($event)\" (change)=\"onStudentSelect($event)\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n @if (selectedStudent()) {\r\n <div\r\n class=\"premium-gradient tw-p-3 tw-rounded-lg tw-border tw-border-blue-100 tw-flex tw-items-center tw-gap-4\">\r\n <div\r\n class=\"tw-h-12 tw-w-12 tw-rounded-full tw-bg-blue-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-xl\">\r\n {{ selectedStudent()?.name?.[0] || '?' }}\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-sm tw-font-bold tw-text-gray-900\">{{ selectedStudent()?.name }}</div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">ID: {{ selectedStudent()?.student_id }}</div>\r\n <div class=\"tw-text-[10px] tw-text-blue-600 tw-font-medium tw-mt-1\">\r\n {{ selectedStudent()?.class }} | {{ selectedStudent()?.section }}\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"tw-border tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-p-3 tw-flex tw-items-center tw-justify-center tw-text-gray-400 tw-text-xs\">\r\n Select a student to view details\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Outstanding Fees Grid (Premium) -->\r\n <div\r\n class=\"glass-card tw-rounded-xl tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-border tw-border-gray-200\">\r\n <div class=\"tw-p-3 tw-border-b tw-border-gray-100 tw-flex tw-items-center tw-justify-between tw-bg-gray-50/50\">\r\n <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">account_balance_wallet</cide-ele-icon>\r\n Outstanding Fees\r\n </h3>\r\n\r\n @if (outstandingFees().length > 0) {\r\n <div class=\"tw-flex tw-gap-2\">\r\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"selectAllFees()\">Select All</button>\r\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"clearAllFees()\">Clear</button>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"tw-flex-1 tw-overflow-hidden\">\r\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\">\r\n </cide-ele-data-grid>\r\n </div>\r\n </div>\r\n\r\n <!-- Payment Method Card (Compact) -->\r\n <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">payments</cide-ele-icon>\r\n <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800\">Payment Details</h3>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\" [formGroup]=\"paymentForm\">\r\n <cide-ele-select formControlName=\"feepay_payment_method\" label=\"Method\" [options]=\"paymentMethodOptions()\"\r\n size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input formControlName=\"feepay_payment_date\" label=\"Date\" type=\"date\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input formControlName=\"feepay_payment_reference\" label=\"Reference #\" placeholder=\"Ref/Receipt No\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Dynamic Fields -->\r\n <div [formGroup]=\"paymentForm\" class=\"tw-mt-4 tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4\">\r\n @if (showChequeDetails()) {\r\n <cide-ele-input formControlName=\"feepay_cheque_number\" label=\"Cheque #\" size=\"sm\"></cide-ele-input>\r\n <cide-ele-input formControlName=\"feepay_cheque_date\" label=\"Cheque Date\" type=\"date\"\r\n size=\"sm\"></cide-ele-input>\r\n <cide-ele-input formControlName=\"feepay_bank_name\" label=\"Bank Name\" size=\"sm\"></cide-ele-input>\r\n }\r\n @if (showBankDetails()) {\r\n <cide-ele-input formControlName=\"feepay_transaction_reference\" label=\"Transaction ID\" size=\"sm\"\r\n class=\"tw-col-span-2\"></cide-ele-input>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Right: Summary & Action (Col 4) -->\r\n <div class=\"lg:tw-col-span-4 tw-h-full\">\r\n <div\r\n class=\"glass-card tw-rounded-xl tw-h-full tw-flex tw-flex-col tw-overflow-hidden tw-border tw-border-gray-200\">\r\n <div class=\"tw-p-4 tw-bg-blue-600 tw-text-white\">\r\n <h3 class=\"tw-text-lg tw-font-bold\">Payment Summary</h3>\r\n <p class=\"tw-text-blue-100 tw-text-xs\">Confirm your selection and totals</p>\r\n </div>\r\n\r\n <div class=\"tw-flex-1 tw-p-4 tw-overflow-y-auto tw-space-y-4\">\r\n <!-- Breakdown -->\r\n <div class=\"tw-space-y-2\">\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-500\">Fees Selected</span>\r\n <span class=\"tw-font-medium\">{{ selectedFeeItems().length }}</span>\r\n </div>\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-500\">Sub-total</span>\r\n <span class=\"tw-font-medium\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n </div>\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-500\">Late Fee</span>\r\n <span class=\"tw-text-blue-600 tw-font-medium\">+ {{ formatCurrency(totalLateFee()) }}</span>\r\n </div>\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-500\">Penalty</span>\r\n <span class=\"tw-text-blue-600 tw-font-medium\">+ {{ formatCurrency(totalPenalty()) }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-border-t tw-border-gray-100 tw-pt-4\">\r\n <div class=\"tw-flex tw-justify-between tw-items-center\">\r\n <span class=\"tw-text-base tw-font-bold tw-text-gray-800\">Total Payable</span>\r\n <span class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ formatCurrency(totalPayable()) }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Remarks -->\r\n <div class=\"tw-mt-6\" [formGroup]=\"paymentForm\">\r\n <cide-ele-textarea formControlName=\"feepay_remarks\" label=\"Remarks / Notes\"\r\n placeholder=\"Add payment notes...\" [rows]=\"2\" size=\"sm\">\r\n </cide-ele-textarea>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-p-4 tw-bg-gray-50 tw-border-t tw-border-gray-100 tw-flex tw-flex-col tw-gap-2\">\r\n <button cideEleButton variant=\"primary\" class=\"tw-w-full tw-py-3\" [loading]=\"submitting()\"\r\n [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\"\r\n (click)=\"onSubmit()\">\r\n Confirm & Record Payment\r\n </button>\r\n <button cideEleButton variant=\"ghost\" class=\"tw-w-full\" (click)=\"onCancel()\" [disabled]=\"submitting()\">\r\n Cancel\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</cide-lyt-shared-wrapper>\r\n\r\n<!-- Grid Templates -->\r\n<ng-template #selectTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-justify-center\" [formGroup]=\"paymentForm\">\r\n <ng-container formArrayName=\"fee_items\">\r\n @for (item of feeItemsArray.controls; track $index) {\r\n @if (item.get('assignment_id')?.value === row.assignment_id) {\r\n <div [formGroupName]=\"$index\">\r\n <input type=\"checkbox\" formControlName=\"is_selected\" (change)=\"toggleFeeItem($index, $event)\"\r\n class=\"tw-rounded tw-border-gray-300\">\r\n </div>\r\n }\r\n }\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateTemplate let-value=\"value\">\r\n <div class=\"tw-text-xs tw-text-gray-600\">{{ value | date:'dd MMM yyyy' }}</div>\r\n</ng-template>\r\n\r\n<ng-template #outstandingTemplate let-value=\"value\">\r\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(value) }}</div>\r\n</ng-template>\r\n\r\n<ng-template #amountPaidTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-justify-end tw-items-center tw-h-full\">\r\n <span class=\"tw-font-bold tw-text-blue-600\">\r\n {{ formatCurrency(row.outstanding_amount + row.late_fee + (row.penalty || 0)) }}\r\n </span>\r\n </div>\r\n</ng-template>", styles: [".glass-card{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.premium-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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", "adaptive"], 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"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
7726
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: FeePaymentProcessComponent, isStandalone: true, selector: "cide-fee-payment-process", viewQueries: [{ propertyName: "selectTemplate", first: true, predicate: ["selectTemplate"], descendants: true, isSignal: true }, { propertyName: "amountPaidTemplate", first: true, predicate: ["amountPaidTemplate"], descendants: true, isSignal: true }, { propertyName: "outstandingTemplate", first: true, predicate: ["outstandingTemplate"], descendants: true, isSignal: true }, { propertyName: "dateTemplate", first: true, predicate: ["dateTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'fee_payment' }\"\r\n [breadcrumb_data]=\"breadcrumbData()\">\r\n\r\n <!-- Main Content Grid -->\r\n <div class=\"tw-p-4 tw-grid tw-grid-cols-1 lg:tw-grid-cols-12 tw-gap-4 tw-h-[calc(100vh-140px)] tw-overflow-hidden\">\r\n\r\n <!-- Left: Form Controls (Col 8) -->\r\n <div class=\"lg:tw-col-span-8 tw-flex tw-flex-col tw-gap-4 tw-overflow-y-auto tw-pr-2\">\r\n\r\n <!-- Student Selection Card (Compact) -->\r\n <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-3\">\r\n <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">person_search</cide-ele-icon>\r\n Student Selection\r\n </h3>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-4 tw-items-start\">\r\n <div [formGroup]=\"paymentForm\">\r\n <cide-ele-select formControlName=\"feepay_student_id_auth\" label=\"Search Student\"\r\n placeholder=\"Enter student name or ID...\" [options]=\"studentListOptions()\" [loading]=\"loading()\"\r\n (searchChange)=\"onStudentSearch($event)\" (change)=\"onStudentSelect($event)\" size=\"sm\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n @if (selectedStudent()) {\r\n <div\r\n class=\"premium-gradient tw-p-3 tw-rounded-lg tw-border tw-border-blue-100 tw-flex tw-items-center tw-gap-4\">\r\n <div\r\n class=\"tw-h-12 tw-w-12 tw-rounded-full tw-bg-blue-600 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-xl\">\r\n {{ selectedStudent()?.name?.[0] || '?' }}\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-sm tw-font-bold tw-text-gray-900\">{{ selectedStudent()?.name }}</div>\r\n <div class=\"tw-text-xs tw-text-gray-500\">ID: {{ selectedStudent()?.student_id }}</div>\r\n <div class=\"tw-text-[10px] tw-text-blue-600 tw-font-medium tw-mt-1\">\r\n {{ selectedStudent()?.class }} | {{ selectedStudent()?.section }}\r\n </div>\r\n </div>\r\n </div>\r\n } @else {\r\n <div\r\n class=\"tw-border tw-border-dashed tw-border-gray-300 tw-rounded-lg tw-p-3 tw-flex tw-items-center tw-justify-center tw-text-gray-400 tw-text-xs\">\r\n Select a student to view details\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n\r\n <!-- Outstanding Fees Grid (Premium) -->\r\n <div\r\n class=\"glass-card tw-rounded-xl tw-flex-1 tw-flex tw-flex-col tw-overflow-hidden tw-border tw-border-gray-200\">\r\n <div class=\"tw-p-3 tw-border-b tw-border-gray-100 tw-flex tw-items-center tw-justify-between tw-bg-gray-50/50\">\r\n <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800 tw-flex tw-items-center tw-gap-2\">\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">account_balance_wallet</cide-ele-icon>\r\n Outstanding Fees\r\n </h3>\r\n\r\n @if (outstandingFees().length > 0) {\r\n <div class=\"tw-flex tw-gap-2\">\r\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"selectAllFees()\">Select All</button>\r\n <button cideEleButton variant=\"ghost\" size=\"xs\" (click)=\"clearAllFees()\">Clear</button>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"tw-flex-1 tw-overflow-hidden\">\r\n <cide-ele-data-grid [config]=\"gridConfig()\" [templateRenderers]=\"templateRenderers()\">\r\n </cide-ele-data-grid>\r\n </div>\r\n </div>\r\n\r\n <!-- Payment Method Card (Compact) -->\r\n <div class=\"glass-card tw-rounded-xl tw-p-4 tw-border tw-border-gray-200\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-3\">\r\n <cide-ele-icon size=\"sm\" class=\"tw-text-blue-600\">payments</cide-ele-icon>\r\n <h3 class=\"tw-text-sm tw-font-bold tw-text-gray-800\">Payment Details</h3>\r\n </div>\r\n\r\n <div class=\"tw-grid tw-grid-cols-2 lg:tw-grid-cols-3 tw-gap-4\" [formGroup]=\"paymentForm\">\r\n <cide-ele-select formControlName=\"feepay_payment_method\" label=\"Method\" [options]=\"paymentMethodOptions()\"\r\n size=\"sm\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-input formControlName=\"feepay_payment_date\" label=\"Date\" type=\"date\" size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input formControlName=\"feepay_payment_reference\" label=\"Reference #\" placeholder=\"Ref/Receipt No\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n </div>\r\n\r\n <!-- Dynamic Fields -->\r\n <div [formGroup]=\"paymentForm\" class=\"tw-mt-4 tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-4\">\r\n @if (showChequeDetails()) {\r\n <cide-ele-input formControlName=\"feepay_cheque_number\" label=\"Cheque #\" size=\"sm\"></cide-ele-input>\r\n <cide-ele-input formControlName=\"feepay_cheque_date\" label=\"Cheque Date\" type=\"date\"\r\n size=\"sm\"></cide-ele-input>\r\n <cide-ele-input formControlName=\"feepay_bank_name\" label=\"Bank Name\" size=\"sm\"></cide-ele-input>\r\n }\r\n @if (showBankDetails()) {\r\n <cide-ele-input formControlName=\"feepay_transaction_reference\" label=\"Transaction ID\" size=\"sm\"\r\n class=\"tw-col-span-2\"></cide-ele-input>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Right: Summary & Action (Col 4) -->\r\n <div class=\"lg:tw-col-span-4 tw-h-full\">\r\n <div\r\n class=\"glass-card tw-rounded-xl tw-h-full tw-flex tw-flex-col tw-overflow-hidden tw-border tw-border-gray-200\">\r\n <div class=\"tw-p-4 tw-bg-blue-600 tw-text-white\">\r\n <h3 class=\"tw-text-lg tw-font-bold\">Payment Summary</h3>\r\n <p class=\"tw-text-blue-100 tw-text-xs\">Confirm your selection and totals</p>\r\n </div>\r\n\r\n <div class=\"tw-flex-1 tw-p-4 tw-overflow-y-auto tw-space-y-4\">\r\n <!-- Breakdown -->\r\n <div class=\"tw-space-y-2\">\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-500\">Fees Selected</span>\r\n <span class=\"tw-font-medium\">{{ selectedFeeItems().length }}</span>\r\n </div>\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-500\">Sub-total</span>\r\n <span class=\"tw-font-medium\">{{ formatCurrency(totalFeeAmount()) }}</span>\r\n </div>\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-500\">Late Fee</span>\r\n <span class=\"tw-text-blue-600 tw-font-medium\">+ {{ formatCurrency(totalLateFee()) }}</span>\r\n </div>\r\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\r\n <span class=\"tw-text-gray-500\">Penalty</span>\r\n <span class=\"tw-text-blue-600 tw-font-medium\">+ {{ formatCurrency(totalPenalty()) }}</span>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-border-t tw-border-gray-100 tw-pt-4\">\r\n <div class=\"tw-flex tw-justify-between tw-items-center\">\r\n <span class=\"tw-text-base tw-font-bold tw-text-gray-800\">Total Payable</span>\r\n <span class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ formatCurrency(totalPayable()) }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Remarks -->\r\n <div class=\"tw-mt-6\" [formGroup]=\"paymentForm\">\r\n <cide-ele-textarea formControlName=\"feepay_remarks\" label=\"Remarks / Notes\"\r\n placeholder=\"Add payment notes...\" [rows]=\"2\" size=\"sm\">\r\n </cide-ele-textarea>\r\n </div>\r\n </div>\r\n\r\n <div class=\"tw-p-4 tw-bg-gray-50 tw-border-t tw-border-gray-100 tw-flex tw-flex-col tw-gap-2\">\r\n <button cideEleButton variant=\"primary\" class=\"tw-w-full tw-py-3\" [loading]=\"submitting()\"\r\n [disabled]=\"submitting() || paymentForm.invalid || selectedFeeItems().length === 0 || loading()\"\r\n (click)=\"onSubmit()\">\r\n Confirm & Record Payment\r\n </button>\r\n <button cideEleButton variant=\"ghost\" class=\"tw-w-full\" (click)=\"onCancel()\" [disabled]=\"submitting()\">\r\n Cancel\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</cide-lyt-shared-wrapper>\r\n\r\n<!-- Grid Templates -->\r\n<ng-template #selectTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-items-center tw-justify-center\" [formGroup]=\"paymentForm\">\r\n <ng-container formArrayName=\"fee_items\">\r\n @for (item of feeItemsArray.controls; track $index) {\r\n @if (item.get('assignment_id')?.value === row.assignment_id) {\r\n <div [formGroupName]=\"$index\">\r\n <input type=\"checkbox\" formControlName=\"is_selected\" (change)=\"toggleFeeItem($index, $event)\"\r\n class=\"tw-rounded tw-border-gray-300\">\r\n </div>\r\n }\r\n }\r\n </ng-container>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #dateTemplate let-value=\"value\">\r\n <div class=\"tw-text-xs tw-text-gray-600\">{{ value | date:'dd MMM yyyy' }}</div>\r\n</ng-template>\r\n\r\n<ng-template #outstandingTemplate let-value=\"value\">\r\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(value) }}</div>\r\n</ng-template>\r\n\r\n<ng-template #amountPaidTemplate let-row=\"row\">\r\n <div class=\"tw-flex tw-justify-end tw-items-center tw-h-full\">\r\n <span class=\"tw-font-bold tw-text-blue-600\">\r\n {{ formatCurrency(row.outstanding_amount + row.late_fee + (row.penalty || 0)) }}\r\n </span>\r\n </div>\r\n</ng-template>", styles: [".glass-card{background:#ffffffe6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -2px #0000001a}.premium-gradient{background:linear-gradient(135deg,#f8fafc,#eff6ff)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.CheckboxControlValueAccessor, selector: "input[type=checkbox][formControlName],input[type=checkbox][formControl],input[type=checkbox][ngModel]" }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
7725
7727
|
}
|
|
7726
7728
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentProcessComponent, decorators: [{
|
|
7727
7729
|
type: Component,
|
|
@@ -8316,7 +8318,7 @@ class FeePaymentViewComponent {
|
|
|
8316
8318
|
}
|
|
8317
8319
|
}
|
|
8318
8320
|
</cide-lyt-shared-wrapper>
|
|
8319
|
-
`, isInline: true, styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
8321
|
+
`, isInline: true, styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
8320
8322
|
}
|
|
8321
8323
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: FeePaymentViewComponent, decorators: [{
|
|
8322
8324
|
type: Component,
|
|
@@ -9817,7 +9819,7 @@ class TemplateDesignerComponent extends CideLytSharedWrapperComponent {
|
|
|
9817
9819
|
});
|
|
9818
9820
|
}
|
|
9819
9821
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TemplateDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
9820
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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=\"xs\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\"\n [adaptive]=\"true\">\n Load Template\n </button>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"xs\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\" [adaptive]=\"true\">\n Save Template\n </button>\n\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\"\n 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\n 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 formControlName=\"tag_search\" placeholder=\"Search tags...\" size=\"sm\" leadingIcon=\"search\">\n </cide-ele-input>\n </form>\n </div>\n\n <!-- Category Tabs -->\n <div\n 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 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\" (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 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)\" [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\n 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\n 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 label=\"Template Name\" formControlName=\"template_name\" placeholder=\"e.g., Standard Receipt\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Template Code\" formControlName=\"template_code\" 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 label=\"Template Type\" 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 label=\"Template For\" 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 #htmlEditor 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\n 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 formControlName=\"preview_type\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\" 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\"\n 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>", 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", "adaptive"], 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"] }] });
|
|
9822
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", 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=\"xs\" (click)=\"loadTemplates()\" leftIcon=\"folder_open\"\n [adaptive]=\"true\">\n Load Template\n </button>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"xs\" (click)=\"saveTemplate()\" leftIcon=\"save\"\n [disabled]=\"saving() || templateForm.invalid\" [loading]=\"saving()\" [adaptive]=\"true\">\n Save Template\n </button>\n\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\"\n 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\n 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 formControlName=\"tag_search\" placeholder=\"Search tags...\" size=\"sm\" leadingIcon=\"search\">\n </cide-ele-input>\n </form>\n </div>\n\n <!-- Category Tabs -->\n <div\n 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 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\" (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 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)\" [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\n 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\n 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 label=\"Template Name\" formControlName=\"template_name\" placeholder=\"e.g., Standard Receipt\"\n size=\"sm\">\n </cide-ele-input>\n\n <cide-ele-input label=\"Template Code\" formControlName=\"template_code\" 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 label=\"Template Type\" 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 label=\"Template For\" 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 #htmlEditor 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\n 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 formControlName=\"preview_type\"\n [options]=\"[{value: 'STUDENT', label: 'Student'}, {value: 'OFFICE', label: 'Office'}]\" 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\"\n 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>", 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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"] }] });
|
|
9821
9823
|
}
|
|
9822
9824
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: TemplateDesignerComponent, decorators: [{
|
|
9823
9825
|
type: Component,
|
|
@@ -10197,7 +10199,7 @@ class CollectionReportComponent {
|
|
|
10197
10199
|
return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
10198
10200
|
}
|
|
10199
10201
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CollectionReportComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10200
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CollectionReportComponent, isStandalone: true, selector: "cide-collection-report", ngImport: i0, template: "<!-- Collection Report Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n \r\n <!-- Title -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">assessment</cide-ele-icon>\r\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Fee Collection Report</h5>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"exportToPDF()\" leftIcon=\"picture_as_pdf\">\r\n Export PDF\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"exportToExcel()\" leftIcon=\"table_chart\">\r\n Export Excel\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Filters Section -->\r\n <div class=\"tw-table-row tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-4\">\r\n <cide-ele-input\r\n label=\"Date From\"\r\n formControlName=\"date_from\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input\r\n label=\"Date To\"\r\n formControlName=\"date_to\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select\r\n label=\"Academic Year\"\r\n formControlName=\"academic_year\"\r\n [options]=\"academicYearOptions()\"\r\n size=\"sm\"\r\n placeholder=\"All Years\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-select\r\n label=\"Class/Program\"\r\n formControlName=\"class_program\"\r\n [options]=\"classOptions()\"\r\n size=\"sm\"\r\n placeholder=\"All Classes\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-select\r\n label=\"Payment Mode\"\r\n formControlName=\"payment_mode\"\r\n [options]=\"paymentModeOptions\"\r\n size=\"sm\"\r\n placeholder=\"All Modes\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-justify-end\">\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"applyFilters()\" leftIcon=\"search\"\r\n [disabled]=\"loading()\" [loading]=\"loading()\">\r\n Generate Report\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Summary Cards -->\r\n <div class=\"tw-table-row tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\r\n <!-- Total Collection Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-green-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-green-600 tw-w-6 tw-h-6\">account_balance_wallet</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Collection</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-green-600\">{{ formatCurrency(summary().total_collection) }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Total Receipts Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-blue-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">receipt</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Receipts</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ summary().total_receipts }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Online Payments Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-cyan-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-cyan-600 tw-w-6 tw-h-6\">language</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Online Payments</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-cyan-600\">{{ formatCurrency(summary().online_payments) }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Cash Payments Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-yellow-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-yellow-600 tw-w-6 tw-h-6\">money</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Cash Payments</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-yellow-600\">{{ formatCurrency(summary().cash_payments) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"tw-table-row\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n <div class=\"tw-space-y-6\">\r\n \r\n <!-- Collection by Date Section -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Date</h6>\r\n </div>\r\n <div class=\"tw-p-4\">\r\n <cide-ele-data-grid \r\n [config]=\"dateGridConfig()\" \r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n \r\n <!-- Footer Totals -->\r\n <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-4 tw-text-sm\">\r\n <div class=\"tw-font-semibold tw-text-gray-900\">TOTAL</div>\r\n <div class=\"tw-font-semibold tw-text-center tw-text-gray-900\">{{ totalReceipts() }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCash()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOnline()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCheque()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOther()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-green-600\">{{ formatCurrency(grandTotal()) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Collection by Class Section -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Class/Program</h6>\r\n </div>\r\n <div class=\"tw-p-4\">\r\n <cide-ele-data-grid \r\n [config]=\"classGridConfig()\" \r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
|
|
10202
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.15", type: CollectionReportComponent, isStandalone: true, selector: "cide-collection-report", ngImport: i0, template: "<!-- Collection Report Container -->\r\n<div class=\"tw-w-full tw-h-full\">\r\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\r\n\r\n <!-- Header Section -->\r\n <div class=\"tw-table-row tw-w-full tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\r\n \r\n <!-- Title -->\r\n <div class=\"tw-flex tw-items-center tw-space-x-2\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">assessment</cide-ele-icon>\r\n <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Fee Collection Report</h5>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"sm\" (click)=\"exportToPDF()\" leftIcon=\"picture_as_pdf\">\r\n Export PDF\r\n </button>\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"exportToExcel()\" leftIcon=\"table_chart\">\r\n Export Excel\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Filters Section -->\r\n <div class=\"tw-table-row tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <form [formGroup]=\"filterForm\" class=\"tw-space-y-4\">\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-5 tw-gap-4\">\r\n <cide-ele-input\r\n label=\"Date From\"\r\n formControlName=\"date_from\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-input\r\n label=\"Date To\"\r\n formControlName=\"date_to\"\r\n type=\"date\"\r\n size=\"sm\">\r\n </cide-ele-input>\r\n\r\n <cide-ele-select\r\n label=\"Academic Year\"\r\n formControlName=\"academic_year\"\r\n [options]=\"academicYearOptions()\"\r\n size=\"sm\"\r\n placeholder=\"All Years\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-select\r\n label=\"Class/Program\"\r\n formControlName=\"class_program\"\r\n [options]=\"classOptions()\"\r\n size=\"sm\"\r\n placeholder=\"All Classes\">\r\n </cide-ele-select>\r\n\r\n <cide-ele-select\r\n label=\"Payment Mode\"\r\n formControlName=\"payment_mode\"\r\n [options]=\"paymentModeOptions\"\r\n size=\"sm\"\r\n placeholder=\"All Modes\">\r\n </cide-ele-select>\r\n </div>\r\n\r\n <div class=\"tw-flex tw-justify-end\">\r\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"sm\" (click)=\"applyFilters()\" leftIcon=\"search\"\r\n [disabled]=\"loading()\" [loading]=\"loading()\">\r\n Generate Report\r\n </button>\r\n </div>\r\n </form>\r\n </div>\r\n </div>\r\n\r\n <!-- Summary Cards -->\r\n <div class=\"tw-table-row tw-h-0\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200\">\r\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\r\n <!-- Total Collection Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-green-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-green-600 tw-w-6 tw-h-6\">account_balance_wallet</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Collection</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-green-600\">{{ formatCurrency(summary().total_collection) }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Total Receipts Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-blue-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">receipt</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Receipts</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ summary().total_receipts }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Online Payments Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-cyan-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-cyan-600 tw-w-6 tw-h-6\">language</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Online Payments</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-cyan-600\">{{ formatCurrency(summary().online_payments) }}</div>\r\n </div>\r\n </div>\r\n\r\n <!-- Cash Payments Card -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\r\n <div class=\"tw-bg-yellow-100 tw-rounded-full tw-p-3\">\r\n <cide-ele-icon class=\"tw-text-yellow-600 tw-w-6 tw-h-6\">money</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Cash Payments</div>\r\n <div class=\"tw-text-xl tw-font-bold tw-text-yellow-600\">{{ formatCurrency(summary().cash_payments) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Main Content Area -->\r\n <div class=\"tw-table-row\">\r\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\r\n <div class=\"tw-space-y-6\">\r\n \r\n <!-- Collection by Date Section -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Date</h6>\r\n </div>\r\n <div class=\"tw-p-4\">\r\n <cide-ele-data-grid \r\n [config]=\"dateGridConfig()\" \r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n \r\n <!-- Footer Totals -->\r\n <div class=\"tw-mt-4 tw-pt-4 tw-border-t tw-border-gray-200\">\r\n <div class=\"tw-grid tw-grid-cols-7 tw-gap-4 tw-text-sm\">\r\n <div class=\"tw-font-semibold tw-text-gray-900\">TOTAL</div>\r\n <div class=\"tw-font-semibold tw-text-center tw-text-gray-900\">{{ totalReceipts() }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCash()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOnline()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalCheque()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-gray-900\">{{ formatCurrency(totalOther()) }}</div>\r\n <div class=\"tw-font-semibold tw-text-right tw-text-green-600\">{{ formatCurrency(grandTotal()) }}</div>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Collection by Class Section -->\r\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\r\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Collection by Class/Program</h6>\r\n </div>\r\n <div class=\"tw-p-4\">\r\n <cide-ele-data-grid \r\n [config]=\"classGridConfig()\" \r\n (gridEvent)=\"onGridEvent($event)\">\r\n </cide-ele-data-grid>\r\n </div>\r\n </div>\r\n\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "step", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey", "treeView"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }] });
|
|
10201
10203
|
}
|
|
10202
10204
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CollectionReportComponent, decorators: [{
|
|
10203
10205
|
type: Component,
|
|
@@ -10400,7 +10402,7 @@ class StudentSelectionWrapperComponent {
|
|
|
10400
10402
|
return `${data.admap_first_name || ''} ${data.admap_middle_name || ''} ${data.admap_last_name || ''}`.trim() || data.user_fullname || 'N/A';
|
|
10401
10403
|
}
|
|
10402
10404
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StudentSelectionWrapperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10403
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: StudentSelectionWrapperComponent, isStandalone: true, selector: "cide-student-selection-wrapper", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, academicYearId: { classPropertyName: "academicYearId", publicName: "academicYearId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { studentSelected: "studentSelected" }, ngImport: i0, template: "<!-- Compact Student Selection Wrapper -->\r\n<div\r\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-mx-6 tw-mt-4 tw-mb-6 tw-overflow-hidden\">\r\n\r\n <!-- Top Bar: Search or Context Summary -->\r\n <div class=\"tw-p-3 tw-flex tw-items-center tw-justify-between tw-gap-4 tw-bg-white\">\r\n\r\n <!-- Search Mode: Visible when no student selected -->\r\n <div *ngIf=\"!studentContext() && !isStudent()\" class=\"tw-flex-1 animate-fade-in\">\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <div class=\"tw-bg-blue-50 tw-p-1.5 tw-rounded-lg tw-flex-shrink-0\">\r\n <cide-ele-icon class=\"tw-text-blue-600\" size=\"sm\">person_search</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <cide-ele-select [options]=\"studentListOptions()\" [loading]=\"loading()\"\r\n placeholder=\"Search student by name or ID...\" [searchable]=\"true\" [clearInput]=\"true\"\r\n (searchChange)=\"onStudentSearch($event)\" (change)=\"onStudentSelect($event)\" leadingIcon=\"search\"\r\n size=\"sm\" class=\"tw-w-full\">\r\n </cide-ele-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Selected Mode: Compact View -->\r\n <div *ngIf=\"studentContext()\" class=\"tw-flex tw-flex-1 tw-items-center tw-gap-3 animate-fade-in\">\r\n <!-- Avatar -->\r\n <div\r\n class=\"tw-h-9 tw-w-9 tw-rounded-full tw-bg-gradient-to-br tw-from-blue-600 tw-to-blue-700 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-sm tw-shadow-sm tw-flex-shrink-0\">\r\n {{ getStudentInitial() }}\r\n </div>\r\n\r\n <!-- Info -->\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <h4 class=\"tw-font-bold tw-text-gray-900 tw-text-sm tw-truncate\">{{ getStudentFullName() }}</h4>\r\n <span *ngIf=\"!isStudent()\"\r\n class=\"tw-bg-yellow-100 tw-text-yellow-800 tw-text-[10px] tw-px-1.5 tw-py-0.5 tw-rounded tw-font-bold tw-uppercase tw-tracking-wider\">Admin\r\n View</span>\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-flex tw-items-center tw-gap-2\">\r\n <span class=\"tw-font-medium text-gray-700\">{{ studentContext()?.studentId }}</span>\r\n <span class=\"tw-text-gray-300\">|</span>\r\n <span>{{ studentContext()?.admissionData?.admap_class_program_name || 'Class N/A' }}</span>\r\n <span *ngIf=\"studentContext()?.admissionData?.admap_program_term_section_name\"> - {{\r\n studentContext()?.admissionData?.admap_program_term_section_name }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div *ngIf=\"studentContext()\" class=\"tw-flex tw-items-center tw-gap-2\">\r\n <button *ngIf=\"!isStudent()\" cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"resetSelection()\"\r\n class=\"tw-text-gray-500 hover:tw-text-red-600 tw-px-2\">\r\n <span class=\"tw-text-xs tw-font-medium\">Change</span>\r\n </button>\r\n <button type=\"button\" (click)=\"toggleDetails()\"\r\n class=\"tw-text-gray-500 hover:tw-text-blue-600 tw-w-8 tw-h-8 tw-p-0 tw-flex tw-items-center tw-justify-center tw-rounded-full hover:tw-bg-blue-50 tw-transition-colors tw-duration-200\">\r\n <cide-ele-icon size=\"sm\" [class.tw-rotate-180]=\"detailsExpanded()\"\r\n class=\"tw-transition-transform tw-duration-200\">expand_more</cide-ele-icon>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Collapsible Details Section -->\r\n <div *ngIf=\"studentContext() && detailsExpanded()\"\r\n class=\"tw-border-t tw-border-gray-100 tw-bg-gray-50 tw-p-4 animate-fade-in-down\">\r\n <div class=\"tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-y-4 tw-gap-x-8\">\r\n <div *ngIf=\"config().cardFields.includes('class')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Class/Program</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_class_program_name || 'N/A' }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"config().cardFields.includes('section')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Section</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_program_term_section_name || 'N/A' }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"config().cardFields.includes('term')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Current\r\n Term</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_program_term_name || 'N/A' }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"config().cardFields.includes('academic_year')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Academic\r\n Year</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_academic_year_name || 'N/A' }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Content Area: Only shown when context is available -->\r\n<div *ngIf=\"studentContext()\" class=\"animate-fade-in\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- Placeholder for when no student is selected (Simple banner) -->\r\n<div *ngIf=\"!studentContext() && !isStudent()\"\r\n class=\"tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg tw-p-4 tw-flex tw-items-center tw-gap-3 tw-mb-6\">\r\n <cide-ele-icon class=\"tw-text-blue-400\" size=\"md\">info</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-blue-800\">\r\n Please search and select a student above to view their fee records.\r\n </p>\r\n</div>", styles: [".animate-fade-in{animation:fadeIn .3s ease-out}.animate-fade-in-up{animation:fadeInUp .4s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], 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"] }] });
|
|
10405
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.15", type: StudentSelectionWrapperComponent, isStandalone: true, selector: "cide-student-selection-wrapper", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, entityId: { classPropertyName: "entityId", publicName: "entityId", isSignal: true, isRequired: false, transformFunction: null }, academicYearId: { classPropertyName: "academicYearId", publicName: "academicYearId", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { studentSelected: "studentSelected" }, ngImport: i0, template: "<!-- Compact Student Selection Wrapper -->\r\n<div\r\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-mx-6 tw-mt-4 tw-mb-6 tw-overflow-hidden\">\r\n\r\n <!-- Top Bar: Search or Context Summary -->\r\n <div class=\"tw-p-3 tw-flex tw-items-center tw-justify-between tw-gap-4 tw-bg-white\">\r\n\r\n <!-- Search Mode: Visible when no student selected -->\r\n <div *ngIf=\"!studentContext() && !isStudent()\" class=\"tw-flex-1 animate-fade-in\">\r\n <div class=\"tw-flex tw-items-center tw-gap-3\">\r\n <div class=\"tw-bg-blue-50 tw-p-1.5 tw-rounded-lg tw-flex-shrink-0\">\r\n <cide-ele-icon class=\"tw-text-blue-600\" size=\"sm\">person_search</cide-ele-icon>\r\n </div>\r\n <div class=\"tw-flex-1\">\r\n <cide-ele-select [options]=\"studentListOptions()\" [loading]=\"loading()\"\r\n placeholder=\"Search student by name or ID...\" [searchable]=\"true\" [clearInput]=\"true\"\r\n (searchChange)=\"onStudentSearch($event)\" (change)=\"onStudentSelect($event)\" leadingIcon=\"search\"\r\n size=\"sm\" class=\"tw-w-full\">\r\n </cide-ele-select>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Selected Mode: Compact View -->\r\n <div *ngIf=\"studentContext()\" class=\"tw-flex tw-flex-1 tw-items-center tw-gap-3 animate-fade-in\">\r\n <!-- Avatar -->\r\n <div\r\n class=\"tw-h-9 tw-w-9 tw-rounded-full tw-bg-gradient-to-br tw-from-blue-600 tw-to-blue-700 tw-flex tw-items-center tw-justify-center tw-text-white tw-font-bold tw-text-sm tw-shadow-sm tw-flex-shrink-0\">\r\n {{ getStudentInitial() }}\r\n </div>\r\n\r\n <!-- Info -->\r\n <div class=\"tw-flex-1 tw-min-w-0\">\r\n <div class=\"tw-flex tw-items-center tw-gap-2\">\r\n <h4 class=\"tw-font-bold tw-text-gray-900 tw-text-sm tw-truncate\">{{ getStudentFullName() }}</h4>\r\n <span *ngIf=\"!isStudent()\"\r\n class=\"tw-bg-yellow-100 tw-text-yellow-800 tw-text-[10px] tw-px-1.5 tw-py-0.5 tw-rounded tw-font-bold tw-uppercase tw-tracking-wider\">Admin\r\n View</span>\r\n </div>\r\n <div class=\"tw-text-xs tw-text-gray-500 tw-truncate tw-flex tw-items-center tw-gap-2\">\r\n <span class=\"tw-font-medium text-gray-700\">{{ studentContext()?.studentId }}</span>\r\n <span class=\"tw-text-gray-300\">|</span>\r\n <span>{{ studentContext()?.admissionData?.admap_class_program_name || 'Class N/A' }}</span>\r\n <span *ngIf=\"studentContext()?.admissionData?.admap_program_term_section_name\"> - {{\r\n studentContext()?.admissionData?.admap_program_term_section_name }}</span>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n <!-- Actions -->\r\n <div *ngIf=\"studentContext()\" class=\"tw-flex tw-items-center tw-gap-2\">\r\n <button *ngIf=\"!isStudent()\" cideEleButton variant=\"ghost\" size=\"sm\" (click)=\"resetSelection()\"\r\n class=\"tw-text-gray-500 hover:tw-text-red-600 tw-px-2\">\r\n <span class=\"tw-text-xs tw-font-medium\">Change</span>\r\n </button>\r\n <button type=\"button\" (click)=\"toggleDetails()\"\r\n class=\"tw-text-gray-500 hover:tw-text-blue-600 tw-w-8 tw-h-8 tw-p-0 tw-flex tw-items-center tw-justify-center tw-rounded-full hover:tw-bg-blue-50 tw-transition-colors tw-duration-200\">\r\n <cide-ele-icon size=\"sm\" [class.tw-rotate-180]=\"detailsExpanded()\"\r\n class=\"tw-transition-transform tw-duration-200\">expand_more</cide-ele-icon>\r\n </button>\r\n </div>\r\n\r\n </div>\r\n\r\n <!-- Collapsible Details Section -->\r\n <div *ngIf=\"studentContext() && detailsExpanded()\"\r\n class=\"tw-border-t tw-border-gray-100 tw-bg-gray-50 tw-p-4 animate-fade-in-down\">\r\n <div class=\"tw-grid tw-grid-cols-2 md:tw-grid-cols-4 tw-gap-y-4 tw-gap-x-8\">\r\n <div *ngIf=\"config().cardFields.includes('class')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Class/Program</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_class_program_name || 'N/A' }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"config().cardFields.includes('section')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Section</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_program_term_section_name || 'N/A' }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"config().cardFields.includes('term')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Current\r\n Term</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_program_term_name || 'N/A' }}\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"config().cardFields.includes('academic_year')\">\r\n <label\r\n class=\"tw-block tw-text-[10px] tw-font-bold tw-text-gray-400 tw-uppercase tw-tracking-wider\">Academic\r\n Year</label>\r\n <div class=\"tw-mt-0.5 tw-text-xs tw-font-semibold tw-text-gray-900\">\r\n {{ studentContext()?.admissionData?.admap_academic_year_name || 'N/A' }}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- Content Area: Only shown when context is available -->\r\n<div *ngIf=\"studentContext()\" class=\"animate-fade-in\">\r\n <ng-content></ng-content>\r\n</div>\r\n\r\n<!-- Placeholder for when no student is selected (Simple banner) -->\r\n<div *ngIf=\"!studentContext() && !isStudent()\"\r\n class=\"tw-bg-blue-50 tw-border tw-border-blue-100 tw-rounded-lg tw-p-4 tw-flex tw-items-center tw-gap-3 tw-mb-6\">\r\n <cide-ele-icon class=\"tw-text-blue-400\" size=\"md\">info</cide-ele-icon>\r\n <p class=\"tw-text-sm tw-text-blue-800\">\r\n Please search and select a student above to view their fee records.\r\n </p>\r\n</div>", styles: [".animate-fade-in{animation:fadeIn .3s ease-out}.animate-fade-in-up{animation:fadeInUp .4s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], 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"] }] });
|
|
10404
10406
|
}
|
|
10405
10407
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: StudentSelectionWrapperComponent, decorators: [{
|
|
10406
10408
|
type: Component,
|
|
@@ -10841,7 +10843,7 @@ class MyFeeStatementComponent {
|
|
|
10841
10843
|
console.log('Grid event:', event);
|
|
10842
10844
|
}
|
|
10843
10845
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MyFeeStatementComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
10844
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MyFeeStatementComponent, isStandalone: true, selector: "cide-my-fee-statement", viewQueries: [{ propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsRendererTemplate", first: true, predicate: ["actionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "paymentHistoryRendererTemplate", first: true, predicate: ["paymentHistoryRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- My Fee Statement Container with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'my_fee_statement' }\">\n\n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"xs\" (click)=\"makePayment()\" leftIcon=\"payment\"\n [disabled]=\"feeSummary().outstanding === 0 || loading()\" [adaptive]=\"true\">\n Make Payment\n </button>\n\n </div>\n\n <cide-student-selection-wrapper (studentSelected)=\"onStudentSelected($event)\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Summary Cards -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n <!-- Total Fees Card -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\n <div class=\"tw-bg-blue-100 tw-rounded-full tw-p-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">account_balance_wallet</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Fees</div>\n <div class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ formatCurrency(feeSummary().total_fees) }}\n </div>\n </div>\n </div>\n\n <!-- Paid Amount Card -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\n <div class=\"tw-bg-green-100 tw-rounded-full tw-p-3\">\n <cide-ele-icon class=\"tw-text-green-600 tw-w-6 tw-h-6\">check_circle</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Paid Amount</div>\n <div class=\"tw-text-xl tw-font-bold tw-text-green-600\">{{ formatCurrency(feeSummary().paid_amount) }}\n </div>\n </div>\n </div>\n\n <!-- Outstanding Card -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\n <div class=\"tw-bg-red-100 tw-rounded-full tw-p-3\">\n <cide-ele-icon class=\"tw-text-red-600 tw-w-6 tw-h-6\">warning</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Outstanding</div>\n <div class=\"tw-text-xl tw-font-bold tw-text-red-600\">{{ formatCurrency(feeSummary().outstanding) }}\n </div>\n </div>\n </div>\n\n <!-- Discount Card -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\n <div class=\"tw-bg-yellow-100 tw-rounded-full tw-p-3\">\n <cide-ele-icon class=\"tw-text-yellow-600 tw-w-6 tw-h-6\">local_offer</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Discount</div>\n <div class=\"tw-text-xl tw-font-bold tw-text-yellow-600\">{{ formatCurrency(feeSummary().discount) }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\n <div class=\"tw-space-y-6\">\n\n <!-- Fee Details Section -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Fee Details</h6>\n </div>\n <div class=\"tw-p-0\">\n <cide-ele-data-grid [config]=\"feeDetailsGridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n </div>\n\n <!-- Payment History Section -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment History</h6>\n </div>\n <div class=\"tw-p-0\">\n <cide-ele-data-grid [config]=\"paymentHistoryGridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </cide-student-selection-wrapper>\n\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #statusRendererTemplate let-row=\"row\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [class.tw-bg-green-100]=\"row.status === 'PAID'\" [class.tw-text-green-800]=\"row.status === 'PAID'\"\n [class.tw-bg-yellow-100]=\"row.status === 'PENDING' || row.status === 'PARTIALLY_PAID'\"\n [class.tw-text-yellow-800]=\"row.status === 'PENDING' || row.status === 'PARTIALLY_PAID'\"\n [class.tw-bg-red-100]=\"row.status === 'OVERDUE'\" [class.tw-text-red-800]=\"row.status === 'OVERDUE'\">\n {{ row.status === 'PARTIALLY_PAID' ? 'PARTIALLY PAID' : row.status }}\n </span>\n</ng-template>\n\n<ng-template #actionsRendererTemplate let-row=\"row\">\n @if (row.outstanding > 0) {\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"xs\" (click)=\"payFee(row)\" leftIcon=\"payment\">\n Pay\n </button>\n }\n</ng-template>\n\n<ng-template #paymentHistoryRendererTemplate let-row=\"row\">\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"downloadReceipt(row)\" leftIcon=\"download\">\n Download\n </button>\n</ng-template>", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton], cide-ele-button", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: StudentSelectionWrapperComponent, selector: "cide-student-selection-wrapper", inputs: ["config", "entityId", "academicYearId"], outputs: ["studentSelected"] }] });
|
|
10846
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MyFeeStatementComponent, isStandalone: true, selector: "cide-my-fee-statement", viewQueries: [{ propertyName: "statusRendererTemplate", first: true, predicate: ["statusRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsRendererTemplate", first: true, predicate: ["actionsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "paymentHistoryRendererTemplate", first: true, predicate: ["paymentHistoryRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- My Fee Statement Container with Shared Wrapper -->\n<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'my_fee_statement' }\">\n\n <!-- Action Buttons in Breadcrumb Area -->\n <div breadcrumb-actions>\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"xs\" (click)=\"makePayment()\" leftIcon=\"payment\"\n [disabled]=\"feeSummary().outstanding === 0 || loading()\" [adaptive]=\"true\">\n Make Payment\n </button>\n\n </div>\n\n <cide-student-selection-wrapper (studentSelected)=\"onStudentSelected($event)\">\n <div class=\"tw-table tw-w-full tw-h-full\">\n\n <!-- Summary Cards -->\n <div class=\"tw-table-row tw-h-0\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4 tw-border-b tw-border-gray-200\">\n <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 lg:tw-grid-cols-4 tw-gap-4\">\n <!-- Total Fees Card -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\n <div class=\"tw-bg-blue-100 tw-rounded-full tw-p-3\">\n <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">account_balance_wallet</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Fees</div>\n <div class=\"tw-text-xl tw-font-bold tw-text-blue-600\">{{ formatCurrency(feeSummary().total_fees) }}\n </div>\n </div>\n </div>\n\n <!-- Paid Amount Card -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\n <div class=\"tw-bg-green-100 tw-rounded-full tw-p-3\">\n <cide-ele-icon class=\"tw-text-green-600 tw-w-6 tw-h-6\">check_circle</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Paid Amount</div>\n <div class=\"tw-text-xl tw-font-bold tw-text-green-600\">{{ formatCurrency(feeSummary().paid_amount) }}\n </div>\n </div>\n </div>\n\n <!-- Outstanding Card -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\n <div class=\"tw-bg-red-100 tw-rounded-full tw-p-3\">\n <cide-ele-icon class=\"tw-text-red-600 tw-w-6 tw-h-6\">warning</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Outstanding</div>\n <div class=\"tw-text-xl tw-font-bold tw-text-red-600\">{{ formatCurrency(feeSummary().outstanding) }}\n </div>\n </div>\n </div>\n\n <!-- Discount Card -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-p-4 tw-flex tw-items-center tw-gap-4\">\n <div class=\"tw-bg-yellow-100 tw-rounded-full tw-p-3\">\n <cide-ele-icon class=\"tw-text-yellow-600 tw-w-6 tw-h-6\">local_offer</cide-ele-icon>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-text-xs tw-text-gray-600 tw-mb-1\">Total Discount</div>\n <div class=\"tw-text-xl tw-font-bold tw-text-yellow-600\">{{ formatCurrency(feeSummary().discount) }}\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\n <div class=\"tw-space-y-6\">\n\n <!-- Fee Details Section -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Fee Details</h6>\n </div>\n <div class=\"tw-p-0\">\n <cide-ele-data-grid [config]=\"feeDetailsGridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n </div>\n\n <!-- Payment History Section -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment History</h6>\n </div>\n <div class=\"tw-p-0\">\n <cide-ele-data-grid [config]=\"paymentHistoryGridConfig()\" [templateRenderers]=\"templateRenderers()\"\n (gridEvent)=\"onGridEvent($event)\">\n </cide-ele-data-grid>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </cide-student-selection-wrapper>\n\n</cide-lyt-shared-wrapper>\n\n<!-- Template Renderers -->\n<ng-template #statusRendererTemplate let-row=\"row\">\n <span class=\"tw-inline-flex tw-items-center tw-px-2.5 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium\"\n [class.tw-bg-green-100]=\"row.status === 'PAID'\" [class.tw-text-green-800]=\"row.status === 'PAID'\"\n [class.tw-bg-yellow-100]=\"row.status === 'PENDING' || row.status === 'PARTIALLY_PAID'\"\n [class.tw-text-yellow-800]=\"row.status === 'PENDING' || row.status === 'PARTIALLY_PAID'\"\n [class.tw-bg-red-100]=\"row.status === 'OVERDUE'\" [class.tw-text-red-800]=\"row.status === 'OVERDUE'\">\n {{ row.status === 'PARTIALLY_PAID' ? 'PARTIALLY PAID' : row.status }}\n </span>\n</ng-template>\n\n<ng-template #actionsRendererTemplate let-row=\"row\">\n @if (row.outstanding > 0) {\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"xs\" (click)=\"payFee(row)\" leftIcon=\"payment\">\n Pay\n </button>\n }\n</ng-template>\n\n<ng-template #paymentHistoryRendererTemplate let-row=\"row\">\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"downloadReceipt(row)\" leftIcon=\"download\">\n Download\n </button>\n</ng-template>", styles: [":host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "component", type: StudentSelectionWrapperComponent, selector: "cide-student-selection-wrapper", inputs: ["config", "entityId", "academicYearId"], outputs: ["studentSelected"] }] });
|
|
10845
10847
|
}
|
|
10846
10848
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MyFeeStatementComponent, decorators: [{
|
|
10847
10849
|
type: Component,
|
|
@@ -11253,7 +11255,7 @@ class MyOnlinePaymentComponent {
|
|
|
11253
11255
|
return `₹${amount.toLocaleString('en-IN', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
11254
11256
|
}
|
|
11255
11257
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MyOnlinePaymentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
11256
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'online_fee_payment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n <cide-student-selection-wrapper (studentSelected)=\"onStudentSelected($event)\">\n <div class=\"tw-w-full tw-h-full\">\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\n\n <!-- Header Section - REMOVED (Handled by breadcrumbs) -->\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n\n <!-- Left Panel - Fee Selection -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Fees to Pay</h6>\n </div>\n\n <!-- Quick Actions -->\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex tw-gap-2\">\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\n Select All\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\n Select Overdue\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\n Clear\n </button>\n </div>\n\n <!-- Fee Items List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\n @if (outstandingFees().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon\n class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\n <p class=\"tw-text-sm\">No outstanding fees</p>\n </div>\n } @else {\n @for (fee of outstandingFees(); track fee.id) {\n <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\n [class.tw-border-blue-500]=\"isSelected(fee)\" [class.tw-bg-blue-50]=\"isSelected(fee)\"\n [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\" (click)=\"toggleFee(fee)\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\n <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\n <div class=\"tw-pointer-events-none\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"isSelected(fee)\" class=\"tw-mt-1\"\n [id]=\"'checkbox-' + fee.id\">\n </cide-ele-input>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\n @if (isOverdue(fee)) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800\">\n Overdue\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-600\">\n Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\n </div>\n @if (fee.late_fee > 0) {\n <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\n Late Fee: {{ formatCurrency(fee.late_fee) }}\n </div>\n }\n </div>\n </div>\n <div class=\"tw-text-right\">\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\n </div>\n </div>\n </div>\n }\n }\n </div>\n </div>\n\n <!-- Right Panel - Payment Summary & Gateway -->\n <div class=\"tw-space-y-4\">\n\n <!-- Payment Summary Card -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment Summary</h6>\n </div>\n <div class=\"tw-p-4 tw-space-y-3\">\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Selected Items</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\n </div>\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Fee Amount</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n </div>\n @if (totalLateFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\n <span>Late Fee</span>\n <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\n </div>\n }\n <div\n class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\n <span>Subtotal</span>\n <span>{{ formatCurrency(subtotal()) }}</span>\n </div>\n @if (convenienceFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Convenience Fee ({{ convenienceFeePercent() }}%)</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\n </div>\n }\n <div\n class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\n <span>Total Payable</span>\n <span>{{ formatCurrency(totalPayable()) }}</span>\n </div>\n </div>\n </div>\n\n <!-- Payment Action -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-4 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\n <span>Secure payment powered by Razorpay</span>\n </div>\n\n <div class=\"tw-flex tw-justify-end tw-items-center tw-gap-3 tw-mt-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"md\" (click)=\"cancel()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"md\" (click)=\"proceedToPayment()\"\n [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" leftIcon=\"payment\">\n Pay {{ formatCurrency(totalPayable()) }}\n </button>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </cide-student-selection-wrapper>", 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: StudentSelectionWrapperComponent, selector: "cide-student-selection-wrapper", inputs: ["config", "entityId", "academicYearId"], outputs: ["studentSelected"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
11258
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: MyOnlinePaymentComponent, isStandalone: true, selector: "cide-my-online-payment", ngImport: i0, template: "<cide-lyt-shared-wrapper [shared_wrapper_setup_param]=\"{ sypg_page_code: 'online_fee_payment' }\"\n [breadcrumb_data]=\"breadcrumbData()\">\n <cide-student-selection-wrapper (studentSelected)=\"onStudentSelected($event)\">\n <div class=\"tw-w-full tw-h-full\">\n <div class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\">\n\n <!-- Header Section - REMOVED (Handled by breadcrumbs) -->\n\n <!-- Main Content Area -->\n <div class=\"tw-table-row\">\n <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-4\">\n <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-6\">\n\n <!-- Left Panel - Fee Selection -->\n <div\n class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden tw-flex tw-flex-col\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Select Fees to Pay</h6>\n </div>\n\n <!-- Quick Actions -->\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50 tw-flex tw-gap-2\">\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectAll()\">\n Select All\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"selectOverdue()\">\n Select Overdue\n </button>\n <button cideEleButton type=\"button\" variant=\"ghost\" size=\"xs\" (click)=\"clearSelection()\">\n Clear\n </button>\n </div>\n\n <!-- Fee Items List -->\n <div class=\"tw-flex-1 tw-overflow-y-auto tw-p-4 tw-space-y-3\">\n @if (outstandingFees().length === 0) {\n <div class=\"tw-text-center tw-py-8 tw-text-gray-500\">\n <cide-ele-icon\n class=\"tw-w-12 tw-h-12 tw-mx-auto tw-mb-2 tw-text-gray-400\">check_circle</cide-ele-icon>\n <p class=\"tw-text-sm\">No outstanding fees</p>\n </div>\n } @else {\n @for (fee of outstandingFees(); track fee.id) {\n <div class=\"tw-p-3 tw-rounded-lg tw-border-2 tw-cursor-pointer tw-transition-colors\"\n [class.tw-border-blue-500]=\"isSelected(fee)\" [class.tw-bg-blue-50]=\"isSelected(fee)\"\n [class.tw-border-yellow-400]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-bg-yellow-50]=\"!isSelected(fee) && isOverdue(fee)\"\n [class.tw-border-gray-200]=\"!isSelected(fee) && !isOverdue(fee)\" (click)=\"toggleFee(fee)\">\n <div class=\"tw-flex tw-items-start tw-justify-between tw-gap-3\">\n <div class=\"tw-flex tw-items-start tw-gap-3 tw-flex-1\">\n <div class=\"tw-pointer-events-none\">\n <cide-ele-input type=\"checkbox\" [ngModel]=\"isSelected(fee)\" class=\"tw-mt-1\"\n [id]=\"'checkbox-' + fee.id\">\n </cide-ele-input>\n </div>\n <div class=\"tw-flex-1\">\n <div class=\"tw-flex tw-items-center tw-gap-2 tw-mb-1\">\n <span class=\"tw-font-medium tw-text-gray-900\">{{ fee.fee_head }}</span>\n @if (isOverdue(fee)) {\n <span\n class=\"tw-inline-flex tw-items-center tw-px-2 tw-py-0.5 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800\">\n Overdue\n </span>\n }\n </div>\n <div class=\"tw-text-xs tw-text-gray-600\">\n Due Date: {{ fee.due_date | date:'dd/MM/yyyy' }}\n </div>\n @if (fee.late_fee > 0) {\n <div class=\"tw-text-xs tw-text-red-600 tw-mt-1\">\n Late Fee: {{ formatCurrency(fee.late_fee) }}\n </div>\n }\n </div>\n </div>\n <div class=\"tw-text-right\">\n <div class=\"tw-font-semibold tw-text-gray-900\">{{ formatCurrency(fee.outstanding) }}</div>\n </div>\n </div>\n </div>\n }\n }\n </div>\n </div>\n\n <!-- Right Panel - Payment Summary & Gateway -->\n <div class=\"tw-space-y-4\">\n\n <!-- Payment Summary Card -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-px-4 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900 tw-m-0\">Payment Summary</h6>\n </div>\n <div class=\"tw-p-4 tw-space-y-3\">\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Selected Items</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ selectedCount() }}</span>\n </div>\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Fee Amount</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(totalFeeAmount()) }}</span>\n </div>\n @if (totalLateFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm tw-text-red-600\">\n <span>Late Fee</span>\n <span class=\"tw-font-medium\">{{ formatCurrency(totalLateFee()) }}</span>\n </div>\n }\n <div\n class=\"tw-flex tw-justify-between tw-text-sm tw-font-semibold tw-pt-2 tw-border-t tw-border-gray-200\">\n <span>Subtotal</span>\n <span>{{ formatCurrency(subtotal()) }}</span>\n </div>\n @if (convenienceFee() > 0) {\n <div class=\"tw-flex tw-justify-between tw-text-sm\">\n <span class=\"tw-text-gray-600\">Convenience Fee ({{ convenienceFeePercent() }}%)</span>\n <span class=\"tw-font-medium tw-text-gray-900\">{{ formatCurrency(convenienceFee()) }}</span>\n </div>\n }\n <div\n class=\"tw-flex tw-justify-between tw-text-lg tw-font-bold tw-pt-3 tw-border-t-2 tw-border-gray-300 tw-text-green-600\">\n <span>Total Payable</span>\n <span>{{ formatCurrency(totalPayable()) }}</span>\n </div>\n </div>\n </div>\n\n <!-- Payment Action -->\n <div class=\"tw-bg-white tw-rounded-lg tw-border tw-border-gray-200 tw-shadow-sm tw-overflow-hidden\">\n <div class=\"tw-p-4\">\n <div class=\"tw-flex tw-items-center tw-justify-center tw-gap-2 tw-mb-4 tw-text-xs tw-text-gray-500\">\n <cide-ele-icon class=\"tw-w-4 tw-h-4\">lock</cide-ele-icon>\n <span>Secure payment powered by Razorpay</span>\n </div>\n\n <div class=\"tw-flex tw-justify-end tw-items-center tw-gap-3 tw-mt-4\">\n <button cideEleButton type=\"button\" variant=\"secondary\" size=\"md\" (click)=\"cancel()\">\n Cancel\n </button>\n\n <button cideEleButton type=\"button\" variant=\"primary\" size=\"md\" (click)=\"proceedToPayment()\"\n [disabled]=\"!canProceed() || submitting()\" [loading]=\"submitting()\" leftIcon=\"payment\">\n Pay {{ formatCurrency(totalPayable()) }}\n </button>\n </div>\n </div>\n </div>\n\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </cide-student-selection-wrapper>", 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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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", "adaptive"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip", "name"] }, { kind: "component", type: StudentSelectionWrapperComponent, selector: "cide-student-selection-wrapper", inputs: ["config", "entityId", "academicYearId"], outputs: ["studentSelected"] }, { kind: "component", type: CideLytSharedWrapperComponent, selector: "cide-lyt-shared-wrapper", inputs: ["shared_wrapper_setup_param", "breadcrumb_data"] }, { kind: "pipe", type: i1.DatePipe, name: "date" }] });
|
|
11257
11259
|
}
|
|
11258
11260
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: MyOnlinePaymentComponent, decorators: [{
|
|
11259
11261
|
type: Component,
|
|
@@ -11283,4 +11285,4 @@ var myOnlinePayment_component = /*#__PURE__*/Object.freeze({
|
|
|
11283
11285
|
*/
|
|
11284
11286
|
|
|
11285
11287
|
export { CideFeeDiscountRuleService as C, DiscountRulesComponent as D, FeeStructureListComponent as F, MyFeeStatementComponent as M, ReceiptTemplateService as R, StudentSelectionWrapperComponent as S, TemplateDesignerComponent as T, CloudIdeFees as a, CideFeeFeeStructureService as b, FeeStructureCreateComponent as c, CideFeeFeeAssignmentService as d, FeeAssignmentListComponent as e, feesRoutes as f, FeeAssignmentCreateComponent as g, CideFeeFeePaymentService as h, FeePaymentListComponent as i, FeePaymentProcessComponent as j, FeePaymentViewComponent as k, CollectionReportComponent as l, MyOnlinePaymentComponent as m, FeeDetailsViewerComponent as n, FeeApplicableFeesComponent as o };
|
|
11286
|
-
//# sourceMappingURL=cloud-ide-fees-cloud-ide-fees-
|
|
11288
|
+
//# sourceMappingURL=cloud-ide-fees-cloud-ide-fees-DwymPnFD.mjs.map
|