cloud-ide-academics 0.0.1 → 0.0.3

package/fesm2022/cloud-ide-academics-cloud-ide-academics-Czexp3pk.mjs

@@ -0,0 +1,2791 @@
+import { authGuard } from 'cloud-ide-auth';
+import * as i0 from '@angular/core';
+import { inject, Injectable, DestroyRef, signal, Component, viewChild, computed } from '@angular/core';
+import * as i1$1 from '@angular/common';
+import { CommonModule, Location } from '@angular/common';
+import * as i1 from '@angular/forms';
+import { FormBuilder, Validators, ReactiveFormsModule, FormsModule } from '@angular/forms';
+import { Router, ActivatedRoute } from '@angular/router';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { of, forkJoin } from 'rxjs';
+import { switchMap, catchError, map } from 'rxjs/operators';
+import { CideInputComponent, CideTextareaComponent, CideEleButtonComponent, CideEleTabComponent, CideIconComponent, CideSelectComponent, CideFormFieldErrorComponent, ConfirmationService, NotificationService, CideEleDataGridComponent, CideEleDropdownComponent } from 'cloud-ide-element';
+import { HttpClient } from '@angular/common/http';
+import { generateStringFromObject, cidePath, hostManagerRoutesUrl, academicsRoutesUrl, generateObjectFromString } from 'cloud-ide-lms-model';
+import { ENTITY_SERVICE_TOKEN } from 'cloud-ide-shared';
+import { AppStateHelperService } from 'cloud-ide-layout';
+
+const academicsRoutes = [
+    // Academic Year Management Routes
+    {
+        path: 'academic_year',
+        loadComponent: () => Promise.resolve().then(function () { return academicYearList_component; }).then(c => c.AcademicYearListComponent),
+        title: 'Academic Year Management',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "academic_year_list"
+        }
+    },
+    {
+        path: 'academic_year/create',
+        loadComponent: () => Promise.resolve().then(function () { return academicYearCreate_component; }).then(c => c.AcademicYearCreateComponent),
+        title: 'Create Academic Year',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "academic_year_list"
+        }
+    },
+    {
+        path: 'academic_year/edit/:query',
+        loadComponent: () => Promise.resolve().then(function () { return academicYearCreate_component; }).then(c => c.AcademicYearCreateComponent),
+        title: 'Edit Academic Year',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "academic_year_list"
+        }
+    },
+    {
+        path: 'academic_year/view/:query',
+        loadComponent: () => Promise.resolve().then(function () { return academicYearCreate_component; }).then(c => c.AcademicYearCreateComponent),
+        title: 'View Academic Year',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "academic_year_list"
+        }
+    },
+    {
+        path: 'program-class-management',
+        loadComponent: () => import('./cloud-ide-academics-program-class-list.component-C1iTyuQ4.mjs').then(c => c.ProgramClassListComponent),
+        title: 'Program Class Management',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: false,
+            sypg_page_code: "program_class"
+        }
+    },
+    {
+        path: 'program-class-management/create',
+        loadComponent: () => import('./cloud-ide-academics-program-class-create.component-DR31TP1Z.mjs').then(c => c.ProgramClassCreateComponent),
+        title: 'Create Program Class',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: false,
+            sypg_page_code: "program_class"
+        }
+    },
+    {
+        path: 'program-class-management/edit/:query',
+        loadComponent: () => import('./cloud-ide-academics-program-class-create.component-DR31TP1Z.mjs').then(c => c.ProgramClassCreateComponent),
+        title: 'Edit Program Class',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: false,
+            sypg_page_code: "program_class"
+        }
+    },
+    {
+        path: 'program-class-management/view/:query',
+        loadComponent: () => import('./cloud-ide-academics-program-class-create.component-DR31TP1Z.mjs').then(c => c.ProgramClassCreateComponent),
+        title: 'View Program Class',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: false,
+            sypg_page_code: "program_class"
+        }
+    },
+    {
+        path: 'program-term-management/create',
+        loadComponent: () => import('./cloud-ide-academics-class-program-term-create.component-B5sVQbaC.mjs').then(c => c.ClassProgramTermCreateComponent),
+        title: 'Create Class Program Term',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "class_program_term_list"
+        }
+    },
+    {
+        path: 'program-term-management/edit/:query',
+        loadComponent: () => import('./cloud-ide-academics-class-program-term-create.component-B5sVQbaC.mjs').then(c => c.ClassProgramTermCreateComponent),
+        title: 'Edit Class Program Term',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "class_program_term_list"
+        }
+    },
+    {
+        path: 'program-term-management/view/:query',
+        loadComponent: () => import('./cloud-ide-academics-class-program-term-create.component-B5sVQbaC.mjs').then(c => c.ClassProgramTermCreateComponent),
+        title: 'View Class Program Term',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "class_program_term_list"
+        }
+    },
+    {
+        path: 'program-term-management/:query',
+        loadComponent: () => import('./cloud-ide-academics-class-program-term-list.component-Cpbyavgd.mjs').then(c => c.ClassProgramTermListComponent),
+        title: 'Class Program Term Management',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "class_program_term_list"
+        }
+    },
+    {
+        path: 'class-program-term/:query',
+        loadComponent: () => import('./cloud-ide-academics-program-term-section-list.component-xVeeeGDV.mjs').then(c => c.ProgramTermSectionListComponent),
+        title: 'Program Term Section Management',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "program_term_section_list"
+        }
+    },
+    {
+        path: 'class-program-term/create',
+        loadComponent: () => import('./cloud-ide-academics-program-term-section-create.component-Dg9Pjwj5.mjs').then(c => c.ProgramTermSectionCreateComponent),
+        title: 'Create Program Term Section',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "program_term_section_list"
+        }
+    },
+    {
+        path: 'class-program-term/edit/:query',
+        loadComponent: () => import('./cloud-ide-academics-program-term-section-create.component-Dg9Pjwj5.mjs').then(c => c.ProgramTermSectionCreateComponent),
+        title: 'Edit Program Term Section',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "program_term_section_list"
+        }
+    },
+    {
+        path: 'class-program-term/view/:query',
+        loadComponent: () => import('./cloud-ide-academics-program-term-section-create.component-Dg9Pjwj5.mjs').then(c => c.ProgramTermSectionCreateComponent),
+        title: 'View Program Term Section',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "program_term_section_list"
+        }
+    },
+    // Class Program Branch Management Routes
+    {
+        path: 'program_specialization/:query',
+        loadComponent: () => Promise.resolve().then(function () { return classProgramBranchList_component; }).then(c => c.CideLytClassProgramBranchListComponent),
+        title: 'Class Program Branch Management',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "class_program_branch"
+        }
+    },
+    {
+        path: 'program_specialization',
+        loadComponent: () => Promise.resolve().then(function () { return classProgramBranchList_component; }).then(c => c.CideLytClassProgramBranchListComponent),
+        title: 'Class Program Branch Management',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "class_program_branch"
+        }
+    },
+    {
+        path: 'program_specialization/create/:query?',
+        loadComponent: () => Promise.resolve().then(function () { return classProgramBranchForm_component; }).then(c => c.CideLytClassProgramBranchFormComponent),
+        title: 'Create Class Program Branch',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "class_program_branch"
+        }
+    },
+    {
+        path: 'program_specialization/edit/:query',
+        loadComponent: () => Promise.resolve().then(function () { return classProgramBranchForm_component; }).then(c => c.CideLytClassProgramBranchFormComponent),
+        title: 'Edit Class Program Branch',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "class_program_branch"
+        }
+    },
+    {
+        path: 'program_specialization/view/:query',
+        loadComponent: () => Promise.resolve().then(function () { return classProgramBranchForm_component; }).then(c => c.CideLytClassProgramBranchFormComponent),
+        title: 'View Class Program Branch',
+        canActivate: [authGuard],
+        data: {
+            reuseTab: true,
+            sypg_page_code: "class_program_branch"
+        }
+    }
+];
+
+class CideLytAcademicYearService {
+    http = inject(HttpClient);
+    /**
+     * Get list of academic years
+     * @param payload - Query parameters for filtering/pagination
+     * @returns Observable of academic year list response
+     */
+    getAcademicYearList(payload) {
+        console.log("payload", payload);
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.academicYear,
+            query
+        ]);
+        return this.http.get(url);
+    }
+    /**
+     * Get academic year by ID
+     * @param payload - Academic year ID payload
+     * @returns Observable of academic year data
+     */
+    getAcademicYearById(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.academicYear,
+            'byId',
+            query
+        ]);
+        return this.http.get(url);
+    }
+    /**
+     * Create or update academic year
+     * @param data - Academic year data to save
+     * @returns Observable of the save response
+     */
+    saveUpdateAcademicYear(data) {
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.academicYear
+        ]);
+        return this.http.post(url, data);
+    }
+    /**
+     * Create or update academic year with mappings
+     * @param data - Academic year data with mappings
+     * @returns Observable of the save response
+     */
+    saveUpdateAcademicYearWithMappings(data) {
+        // Extract mappings from the data
+        const mappings = data.acayr_academic_year_mappings || [];
+        const academicYearData = { ...data };
+        delete academicYearData.acayr_academic_year_mappings;
+        // First save/update the academic year
+        return this.saveUpdateAcademicYear(academicYearData).pipe(switchMap((academicYearResponse) => {
+            if (!academicYearResponse.success || !academicYearResponse.data) {
+                return of(academicYearResponse);
+            }
+            const academicYearId = academicYearResponse.data._id;
+            // If no mappings, return the academic year response
+            if (mappings.length === 0) {
+                return of(academicYearResponse);
+            }
+            // Process mappings
+            const mappingObservables = mappings.map((mapping) => {
+                const mappingPayload = {
+                    _id: mapping._id && !mapping._id.startsWith('temp_') ? mapping._id : undefined,
+                    acayrmp_academic_year_id_acayr: academicYearId,
+                    acayrmp_entity_id_syen: mapping.acayrmp_entity_id_syen,
+                    acayrmp_islocked: mapping.acayrmp_islocked || false,
+                    acayrmp_iscurrent: mapping.acayrmp_iscurrent || false
+                };
+                const mappingUrl = cidePath.join([
+                    hostManagerRoutesUrl.cideSuiteHost,
+                    academicsRoutesUrl.module,
+                    academicsRoutesUrl.academicYearMapping
+                ]);
+                return this.http.post(mappingUrl, mappingPayload).pipe(catchError((error) => {
+                    console.error('Error saving mapping:', error);
+                    return of({ success: false, error });
+                }));
+            });
+            // Execute all mapping operations
+            return forkJoin(mappingObservables).pipe(map((mappingResponses) => {
+                // Check if all mappings were successful
+                const allMappingsSuccessful = mappingResponses.every((response) => response.success);
+                if (allMappingsSuccessful) {
+                    return {
+                        ...academicYearResponse,
+                        message: 'Academic year and mappings saved successfully'
+                    };
+                }
+                else {
+                    return {
+                        ...academicYearResponse,
+                        message: 'Academic year saved but some mappings failed',
+                        mappingErrors: mappingResponses.filter((response) => !response.success)
+                    };
+                }
+            }));
+        }), catchError((error) => {
+            console.error('Error in saveUpdateAcademicYearWithMappings:', error);
+            return of({
+                success: false,
+                code: 500,
+                message: 'Error saving academic year with mappings',
+                error
+            });
+        }));
+    }
+    /**
+     * Delete academic year
+     * @param payload - Academic year ID payload
+     * @returns Observable of the delete response
+     */
+    deleteAcademicYear(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.academicYear,
+            'delete',
+            query
+        ]);
+        return this.http.delete(url);
+    }
+    /**
+     * Toggle academic year status
+     * @param payload - Academic year ID payload
+     * @returns Observable of the toggle response
+     */
+    toggleAcademicYearStatus(payload) {
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.academicYear,
+            'toggle-status'
+        ]);
+        console.log('🔄 Making PATCH request to toggle academic year status:', { url, payload });
+        return this.http.patch(url, payload);
+    }
+    /**
+     * Delete academic year mapping
+     * @param payload - Academic year mapping ID payload
+     * @returns Observable of the delete response
+     */
+    deleteAcademicYearMapping(payload) {
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.academicYearMapping
+        ]);
+        return this.http.delete(url, { body: payload });
+    }
+    /**
+     * Toggle academic year mapping status
+     * @param payload - Academic year mapping ID payload
+     * @returns Observable of the toggle response
+     */
+    toggleAcademicYearMappingStatus(payload) {
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.academicYearMapping,
+            'toggle-status'
+        ]);
+        console.log('🔄 Making PATCH request to toggle academic year mapping status:', { url, payload });
+        return this.http.patch(url, payload);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytAcademicYearService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytAcademicYearService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytAcademicYearService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CideLytAcademicYearMappingService {
+    http = inject(HttpClient);
+    /**
+     * Get list of academic year mappings
+     * @param payload - Query parameters for filtering/pagination
+     * @returns Observable of academic year mapping list response
+     */
+    getAcademicYearMappingList(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.academicYearMapping,
+            query
+        ]);
+        return this.http.get(url);
+    }
+    /**
+     * Get academic year mapping by ID
+     * @param payload - Academic year mapping ID payload
+     * @returns Observable of academic year mapping data
+     */
+    getAcademicYearMappingById(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.academicYearMapping,
+            'byId',
+            query
+        ]);
+        return this.http.get(url);
+    }
+    /**
+     * Create or update academic year mapping
+     * @param data - Academic year mapping data to save
+     * @returns Observable of the save response
+     */
+    saveUpdateAcademicYearMapping(data) {
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.academicYearMapping
+        ]);
+        return this.http.post(url, data);
+    }
+    /**
+     * Delete academic year mapping
+     * @param payload - Academic year mapping ID payload
+     * @returns Observable of the delete response
+     */
+    deleteAcademicYearMapping(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.academicYearMapping,
+            'delete',
+            query
+        ]);
+        return this.http.delete(url);
+    }
+    /**
+     * Toggle academic year mapping status
+     * @param payload - Academic year mapping ID payload
+     * @returns Observable of the toggle response
+     */
+    toggleAcademicYearMappingStatus(payload) {
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.academicYearMapping,
+            'toggle-status'
+        ]);
+        return this.http.post(url, payload);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytAcademicYearMappingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytAcademicYearMappingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytAcademicYearMappingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class AcademicYearCreateComponent {
+    // Modern Angular 20+ dependency injection
+    destroyRef = inject(DestroyRef);
+    fb = inject(FormBuilder);
+    academicYearService = inject(CideLytAcademicYearService);
+    academicYearMappingService = inject(CideLytAcademicYearMappingService);
+    entityService = inject(ENTITY_SERVICE_TOKEN);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    // Form and state management with proper typing
+    academicYearForm;
+    activeTab = signal('basic', ...(ngDevMode ? [{ debugName: "activeTab" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    // Academic year information from route
+    academicYearId = signal('', ...(ngDevMode ? [{ debugName: "academicYearId" }] : []));
+    isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    originalMappings = signal([], ...(ngDevMode ? [{ debugName: "originalMappings" }] : [])); // Track original mappings for deletion
+    // Entity options for dropdown
+    entityOptions = signal([], ...(ngDevMode ? [{ debugName: "entityOptions" }] : []));
+    constructor() {
+        this.academicYearForm = this.fb.group({
+            // Basic Academic Year Information
+            acayr_code: ['', [Validators.required]],
+            acayr_name: ['', [Validators.required]],
+            acayr_description: [''],
+            acayr_from_date: ['', [Validators.required]],
+            acayr_to_date: ['', [Validators.required]],
+            acayr_isactive: [true],
+            acayr_iscurrent: [false],
+            acayr_islocked: [false],
+            // Academic Year Mapping Information
+            acayr_academic_year_mappings: this.fb.array([])
+        });
+    }
+    ngOnInit() {
+        this.initializeComponent();
+    }
+    /**
+     * Initialize component
+     */
+    initializeComponent() {
+        // Get academic year information from route (for edit mode)
+        this.route.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(params => {
+            const queryParams = params['query'];
+            console.log(queryParams, 'queryParams');
+            if (queryParams) {
+                // Query parameters passed (following page-controls pattern)
+                const queryData = generateObjectFromString(queryParams);
+                if (queryData?.acayr_id) {
+                    this.academicYearId.set(queryData.acayr_id);
+                    this.isEditMode.set(true);
+                    this.loadAcademicYearData(queryData.acayr_id);
+                }
+            }
+            else {
+                // Create mode
+                this.isEditMode.set(false);
+            }
+            // Always load dropdown options
+            this.loadDropdownOptions();
+        });
+    }
+    /**
+     * Load dropdown options
+     */
+    loadDropdownOptions() {
+        console.log('🏢 Loading dropdown options');
+        // Load entity options
+        this.entityService.getEntityList({}).subscribe({
+            next: (response) => {
+                if (response?.success) {
+                    console.log(`🏢 entities:`, response.data);
+                    this.entityOptions.set(response.data || []);
+                }
+            },
+            error: (error) => console.error('Error loading entities:', error)
+        });
+    }
+    /**
+     * Load academic year data for edit mode
+     */
+    loadAcademicYearData(academicYearId) {
+        this.loading.set(true);
+        const payload = {
+            acayr_id: academicYearId
+        };
+        // Load academic year data
+        this.academicYearService.getAcademicYearById(payload).subscribe({
+            next: (response) => {
+                if (response?.success && response.data) {
+                    console.log('📚 Academic year data loaded:', response.data);
+                    this.populateFormWithAcademicYearData(response.data);
+                    // Load existing mappings for this academic year
+                    this.loadAcademicYearMappings(academicYearId);
+                }
+                else {
+                    console.error('❌ Failed to load academic year data');
+                    this.loading.set(false);
+                }
+            },
+            error: (error) => {
+                console.error('❌ Error loading academic year data:', error);
+                this.loading.set(false);
+            }
+        });
+    }
+    /**
+     * Load academic year mappings for edit mode
+     */
+    loadAcademicYearMappings(academicYearId) {
+        const mappingPayload = {
+            acayrmp_academic_year_id_acayr: academicYearId
+        };
+        this.academicYearMappingService.getAcademicYearMappingList(mappingPayload).subscribe({
+            next: (response) => {
+                if (response?.success && response.data) {
+                    console.log('🔗 Academic year mappings loaded:', response.data);
+                    this.populateFormWithMappingsData(response.data);
+                }
+                else {
+                    console.warn('⚠️ No mappings found for this academic year');
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('❌ Error loading academic year mappings:', error);
+                this.loading.set(false);
+            }
+        });
+    }
+    /**
+     * Populate form with academic year data
+     */
+    populateFormWithAcademicYearData(data) {
+        if (data) {
+            this.academicYearForm.patchValue({
+                acayr_code: data.acayr_code || '',
+                acayr_name: data.acayr_name || '',
+                acayr_description: data.acayr_description || '',
+                acayr_from_date: data.acayr_from_date ? new Date(data.acayr_from_date).toISOString().split('T')[0] : '',
+                acayr_to_date: data.acayr_to_date ? new Date(data.acayr_to_date).toISOString().split('T')[0] : '',
+                acayr_isactive: data.acayr_isactive ?? true,
+                acayr_iscurrent: data.acayr_iscurrent ?? false,
+                acayr_islocked: data.acayr_islocked ?? false
+            });
+        }
+    }
+    /**
+     * Populate form with mappings data
+     */
+    populateFormWithMappingsData(mappings) {
+        if (mappings && Array.isArray(mappings)) {
+            // Store original mappings for deletion tracking
+            this.originalMappings.set([...mappings]);
+            // Clear existing mappings
+            while (this.academicYearMappingsArray.length !== 0) {
+                this.academicYearMappingsArray.removeAt(0);
+            }
+            // Add existing mappings
+            mappings.forEach((mapping) => {
+                const mappingGroup = this.fb.group({
+                    _id: [mapping._id || ''],
+                    acayrmp_academic_year_id_acayr: [mapping.acayrmp_academic_year_id_acayr || this.academicYearId() || '', [Validators.required]],
+                    acayrmp_entity_id_syen: [mapping.acayrmp_entity_id_syen || '', [Validators.required]],
+                    acayrmp_islocked: [mapping.acayrmp_islocked ?? false],
+                    acayrmp_iscurrent: [mapping.acayrmp_iscurrent ?? false]
+                });
+                this.academicYearMappingsArray.push(mappingGroup);
+            });
+        }
+    }
+    /**
+     * Tab configuration
+     */
+    academicYearTabs() {
+        return [
+            { id: 'basic', label: 'Academic Year Details', icon: 'school' },
+            { id: 'mapping', label: 'Mapping Configuration', icon: 'link' }
+        ];
+    }
+    onTabChange(tab) {
+        this.activeTab.set(tab.id);
+    }
+    onSubmit() {
+        if (this.academicYearForm.valid && this.validateMappings()) {
+            this.loading.set(true);
+            const formData = this.academicYearForm.value;
+            // Prepare payload with mappings
+            const payload = {
+                ...formData,
+                _id: this.isEditMode() ? this.academicYearId() : undefined,
+                acayr_academic_year_mappings: this.getAcademicYearMappingsValue()
+            };
+            console.log('📤 Submitting academic year with mappings:', payload);
+            // First delete removed mappings, then save/update academic year
+            this.deleteRemovedMappings().pipe(switchMap(() => {
+                // After deleting removed mappings, save/update the academic year
+                return this.academicYearService.saveUpdateAcademicYearWithMappings(payload);
+            })).subscribe({
+                next: (response) => {
+                    if (response?.success) {
+                        console.log('✅ Academic year and mappings saved successfully:', response.data);
+                        // Check if there were any mapping errors
+                        if (response.mappingErrors && response.mappingErrors.length > 0) {
+                            console.warn('⚠️ Some mappings failed:', response.mappingErrors);
+                        }
+                        else {
+                            this.goBackToAcademicYearList();
+                        }
+                    }
+                    else {
+                        console.error('❌ Failed to save academic year');
+                    }
+                    this.loading.set(false);
+                },
+                error: (error) => {
+                    console.error('❌ Error saving academic year:', error);
+                    this.loading.set(false);
+                }
+            });
+        }
+        else {
+            console.warn('Form is invalid');
+            this.markFormGroupTouched();
+        }
+    }
+    /**
+     * Mark all form controls as touched to trigger validation display
+     */
+    markFormGroupTouched() {
+        Object.keys(this.academicYearForm.controls).forEach(key => {
+            const control = this.academicYearForm.get(key);
+            control?.markAsTouched();
+        });
+    }
+    resetForm() {
+        this.academicYearForm.reset({
+            acayr_isactive: true,
+            acayr_iscurrent: false,
+            acayr_islocked: false
+        });
+        // Clear the mappings array
+        while (this.academicYearMappingsArray.length !== 0) {
+            this.academicYearMappingsArray.removeAt(0);
+        }
+        // Reset academic year ID
+        this.academicYearId.set('');
+        this.isEditMode.set(false);
+        this.originalMappings.set([]);
+        // Reset entity options to show all entities again
+        this.updateEntityOptionsForMappings();
+    }
+    /**
+     * Go back to academic year list
+     */
+    goBackToAcademicYearList() {
+        this.router.navigate(['/control-panel/academic-year']);
+    }
+    /**
+     * Cancel form and optionally navigate back
+     */
+    cancelForm() {
+        if (this.isEditMode()) {
+            this.goBackToAcademicYearList();
+        }
+        else {
+            this.resetForm();
+        }
+    }
+    /**
+     * Get page title based on mode
+     */
+    getPageTitle() {
+        return this.isEditMode() ? 'Edit Academic Year' : 'Create New Academic Year';
+    }
+    /**
+     * Getter methods for form arrays
+     */
+    get academicYearMappingsArray() {
+        return this.academicYearForm.get('acayr_academic_year_mappings');
+    }
+    /**
+     * Add new academic year mapping
+     */
+    addAcademicYearMapping() {
+        // Check if there are any available entities to map
+        const availableEntities = this.getAvailableEntityCount(this.academicYearMappingsArray.length);
+        if (availableEntities === 0) {
+            console.warn('No available entities to map');
+            return;
+        }
+        // Generate a temporary ID for new mappings
+        const tempId = 'temp_' + Date.now() + '_' + Math.random().toString(36).substr(2, 9);
+        const academicYearMapping = this.fb.group({
+            _id: [tempId],
+            acayrmp_academic_year_id_acayr: [this.academicYearId() || '', [Validators.required]],
+            acayrmp_entity_id_syen: ['', [Validators.required]],
+            acayrmp_islocked: [false],
+            acayrmp_iscurrent: [false]
+        });
+        this.academicYearMappingsArray.push(academicYearMapping);
+    }
+    /**
+     * Update academic year ID in all existing mappings when academic year ID changes
+     */
+    updateMappingsAcademicYearId(newAcademicYearId) {
+        const mappingsArray = this.academicYearMappingsArray;
+        mappingsArray.controls.forEach((control) => {
+            if (control.get('acayrmp_academic_year_id_acayr')) {
+                control.get('acayrmp_academic_year_id_acayr').setValue(newAcademicYearId);
+            }
+        });
+    }
+    /**
+     * Get form array value for validation or submission
+     */
+    getAcademicYearMappingsValue() {
+        return this.academicYearMappingsArray.value;
+    }
+    /**
+     * Check if mappings array has any invalid controls
+     */
+    isMappingsArrayValid() {
+        return this.academicYearMappingsArray.valid;
+    }
+    /**
+     * Set academic year ID for all existing mappings
+     * This is useful when the academic year ID is generated after creation
+     */
+    setAcademicYearIdForMappings(academicYearId) {
+        this.academicYearId.set(academicYearId);
+        this.updateMappingsAcademicYearId(academicYearId);
+    }
+    /**
+     * Validate that all mappings have required fields
+     */
+    validateMappings() {
+        const mappings = this.academicYearMappingsArray.controls;
+        // Check if there are any mappings
+        if (mappings.length === 0) {
+            return true; // No mappings is valid
+        }
+        // Validate each mapping
+        for (let i = 0; i < mappings.length; i++) {
+            const mapping = mappings[i];
+            // Check required fields
+            if (!mapping.get('acayrmp_entity_id_syen')?.value) {
+                console.warn(`Mapping ${i + 1} is missing entity selection`);
+                return false;
+            }
+            // Check for duplicate entity selections
+            const currentEntityId = mapping.get('acayrmp_entity_id_syen')?.value;
+            const duplicateIndex = this.findDuplicateEntitySelection(currentEntityId, i);
+            if (duplicateIndex !== -1) {
+                console.warn(`Mapping ${i + 1} has duplicate entity selection with mapping ${duplicateIndex + 1}`);
+                return false;
+            }
+        }
+        return true;
+    }
+    /**
+     * Find duplicate entity selection in mappings
+     */
+    findDuplicateEntitySelection(entityId, currentIndex) {
+        const mappings = this.academicYearMappingsArray.controls;
+        for (let i = 0; i < mappings.length; i++) {
+            if (i !== currentIndex) {
+                const mapping = mappings[i];
+                if (mapping.get('acayrmp_entity_id_syen')?.value === entityId) {
+                    return i;
+                }
+            }
+        }
+        return -1;
+    }
+    /**
+     * Remove academic year mapping
+     */
+    removeAcademicYearMapping(index) {
+        this.academicYearMappingsArray.removeAt(index);
+        // Update entity options after removal to re-enable previously selected entities
+        this.updateEntityOptionsForMappings();
+    }
+    /**
+     * Handle entity selection change for a specific mapping
+     */
+    onMappingEntityChange(event, mappingIndex) {
+        const selectedEntityId = event?.value || event;
+        if (selectedEntityId) {
+            console.log(`🏢 Entity selected for mapping ${mappingIndex}:`, selectedEntityId);
+            // Trigger change detection to update other mappings' entity options
+            this.updateEntityOptionsForMappings();
+        }
+    }
+    /**
+     * Get filtered entity options excluding already selected entities in other mappings
+     * @param currentMappingIndex The index of the current mapping being edited
+     * @returns Entity options excluding already selected entities
+     */
+    getFilteredEntityOptions(currentMappingIndex) {
+        const allEntities = this.entityOptions();
+        if (!allEntities || allEntities.length === 0) {
+            return [];
+        }
+        // Get all currently selected entity IDs from other mappings (excluding current mapping)
+        const selectedEntityIds = this.getSelectedEntityIds(currentMappingIndex);
+        console.log(`🔍 Filtering entities for mapping ${currentMappingIndex}:`, {
+            totalEntities: allEntities.length,
+            selectedEntityIds,
+            availableEntities: allEntities.length - selectedEntityIds.length
+        });
+        // Return only entities that are not already selected in other mappings
+        return allEntities.filter((entity) => {
+            const entityId = entity._id;
+            const isAlreadySelected = selectedEntityIds.includes(entityId);
+            if (isAlreadySelected) {
+                console.log(`🚫 Entity "${entity.syen_name}" (${entityId}) is already selected in another mapping - excluding from options`);
+            }
+            return !isAlreadySelected;
+        });
+    }
+    /**
+     * Get all currently selected entity IDs from other mappings
+     */
+    getSelectedEntityIds(excludeMappingIndex) {
+        const mappingsArray = this.academicYearMappingsArray;
+        const selectedIds = [];
+        mappingsArray.controls.forEach((control, index) => {
+            if (index !== excludeMappingIndex) {
+                const entityId = control.get('acayrmp_entity_id_syen')?.value;
+                if (entityId) {
+                    selectedIds.push(entityId);
+                }
+            }
+        });
+        return selectedIds;
+    }
+    /**
+     * Update entity options for all mappings to prevent duplicates
+     */
+    updateEntityOptionsForMappings() {
+        // This method triggers change detection to update the UI
+        // The actual filtering is done in getEntityOptionsForMapping method
+        console.log('🔄 Updating entity options for all mappings');
+    }
+    /**
+     * Check if an entity is disabled for a specific mapping
+     */
+    isEntityDisabled(entityId, mappingIndex) {
+        const selectedEntityIds = this.getSelectedEntityIds(mappingIndex);
+        return selectedEntityIds.includes(entityId);
+    }
+    /**
+     * Get the count of available entities for a specific mapping
+     */
+    getAvailableEntityCount(mappingIndex) {
+        const availableEntities = this.getFilteredEntityOptions(mappingIndex);
+        return availableEntities.length;
+    }
+    /**
+     * Get the count of total entities
+     */
+    getTotalEntityCount() {
+        return this.entityOptions().length;
+    }
+    /**
+     * Check if all entities are already selected in other mappings
+     * @param currentMappingIndex The index of the current mapping being edited
+     * @returns True if all entities are already selected
+     */
+    isAllEntitiesSelected(currentMappingIndex) {
+        const allEntities = this.entityOptions();
+        const currentMappings = this.academicYearMappingsArray.value;
+        // Get all selected entity IDs from other mappings (excluding current mapping)
+        const selectedEntityIds = currentMappings
+            .map((mapping, index) => {
+            if (index !== currentMappingIndex && mapping.acayrmp_entity_id_syen) {
+                return mapping.acayrmp_entity_id_syen;
+            }
+            return null;
+        })
+            .filter((id) => id !== null && id !== '');
+        // Check if all entities are selected
+        return allEntities.length > 0 && selectedEntityIds.length >= allEntities.length;
+    }
+    /**
+     * Check if all entities are already mapped (for disabling Add Entity Mapping button)
+     * @returns True if all entities are already mapped
+     */
+    isAllEntitiesMapped() {
+        const allEntities = this.entityOptions();
+        const currentMappings = this.academicYearMappingsArray.value;
+        // Get all selected entity IDs
+        const selectedEntityIds = currentMappings
+            .map((mapping) => {
+            if (mapping.acayrmp_entity_id_syen) {
+                return mapping.acayrmp_entity_id_syen;
+            }
+            return null;
+        })
+            .filter((id) => id !== null && id !== '');
+        // Check if all entities are selected
+        return allEntities.length > 0 && selectedEntityIds.length >= allEntities.length;
+    }
+    /**
+     * Cleanup when component is destroyed
+     * This ensures that when the component is destroyed (e.g., tab closed),
+     * all state is properly reset to prevent old data from persisting
+     */
+    ngOnDestroy() {
+        console.log('🧹 AcademicYearCreateComponent: Cleaning up component state');
+        // Reset all signals to their initial state
+        this.activeTab.set('basic');
+        this.loading.set(false);
+        this.academicYearId.set('');
+        this.isEditMode.set(false);
+        this.originalMappings.set([]);
+        this.entityOptions.set([]);
+        // Reset form to initial state
+        this.resetForm();
+        console.log('🧹 AcademicYearCreateComponent: Component state cleaned up');
+    }
+    /**
+     * Delete removed academic year mappings
+     */
+    deleteRemovedMappings() {
+        const originalMappings = this.originalMappings();
+        const currentMappings = this.getAcademicYearMappingsValue();
+        // Find mappings that were removed (exist in original but not in current)
+        const removedMappings = originalMappings.filter(originalMapping => {
+            return !currentMappings.some(currentMapping => currentMapping._id === originalMapping._id && originalMapping._id);
+        });
+        console.log('🗑️ Mappings to delete:', removedMappings);
+        if (removedMappings.length === 0) {
+            return of([]);
+        }
+        // Create delete observables for each removed mapping
+        const deleteObservables = removedMappings.map(mapping => {
+            return this.academicYearService.deleteAcademicYearMapping({
+                acayrmp_id: mapping._id || ''
+            }).pipe(catchError(error => {
+                console.error('❌ Error deleting mapping:', error);
+                return of({ success: false, error, mappingId: mapping._id });
+            }));
+        });
+        return forkJoin(deleteObservables);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AcademicYearCreateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: AcademicYearCreateComponent, isStandalone: true, selector: "cide-core-academic-year-create", ngImport: i0, template: "<!-- \n  ACADEMIC YEAR MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\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]=\"academicYearForm\" [class.tw-opacity-60]=\"loading()\"\n    (ngSubmit)=\"onSubmit()\">\n\n    <!-- Simple Header Section -->\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n          \n          <!-- Title -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">school</cide-ele-icon>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">\n              {{ isEditMode() ? 'Edit Academic Year' : 'Create Academic Year' }}\n            </h5>\n          </div>\n\n          <!-- Actions -->\n          <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n            <!-- Back button or other actions can be added here if needed -->\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- 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]=\"academicYearTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" 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-6 tw-py-6\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          @switch (activeTab()) {\n\n                  @case ('basic') {\n           <!-- Basic Academic Year Information -->\n           <div class=\"tw-space-y-6\">\n             <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n               <cide-ele-input label=\"Academic Year Code *\" formControlName=\"acayr_code\"\n                 placeholder=\"e.g., AY2024-25\" size=\"md\" leadingIcon=\"code\">\n               </cide-ele-input>\n\n               <cide-ele-input label=\"Academic Year Name *\" formControlName=\"acayr_name\"\n                 placeholder=\"e.g., Academic Year 2024-2025\" size=\"md\" leadingIcon=\"school\">\n               </cide-ele-input>\n             </div>\n\n             <div>\n               <cide-ele-textarea label=\"Description\" formControlName=\"acayr_description\"\n                 placeholder=\"Enter detailed description of the academic year...\"\n                 rows=\"3\" size=\"md\">\n               </cide-ele-textarea>\n             </div>\n\n             <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n               <cide-ele-input label=\"From Date *\" formControlName=\"acayr_from_date\" type=\"date\" size=\"md\"\n                 leadingIcon=\"calendar_today\" id=\"acayr_from_date\">\n               </cide-ele-input>\n\n               <cide-ele-input label=\"To Date *\" formControlName=\"acayr_to_date\" type=\"date\" size=\"md\"\n                 leadingIcon=\"calendar_today\" id=\"acayr_to_date\">\n               </cide-ele-input>\n             </div>\n\n             <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6\">\n               <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                 <cide-ele-input formControlName=\"acayr_isactive\" type=\"checkbox\" size=\"md\">\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 academic year</span>\n                 </div>\n               </div>\n\n               <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                 <cide-ele-input formControlName=\"acayr_iscurrent\" type=\"checkbox\" size=\"md\">\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\">Current</span>\n                   <span class=\"tw-text-xs tw-text-gray-500\">Mark as current academic year</span>\n                 </div>\n               </div>\n\n               <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                 <cide-ele-input formControlName=\"acayr_islocked\" type=\"checkbox\" size=\"md\">\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\">Locked</span>\n                   <span class=\"tw-text-xs tw-text-gray-500\">Prevent modifications</span>\n                 </div>\n               </div>\n             </div>\n           </div>\n           }\n\n           @case ('mapping') {\n           <!-- Academic Year Mapping Configuration -->\n           <div class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-xl tw-p-6\">\n             <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-6\">\n               <div class=\"tw-flex tw-items-center tw-gap-3\">\n                 <div class=\"tw-bg-blue-100 tw-p-2 tw-rounded-lg\">\n                   <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">link</cide-ele-icon>\n                 </div>\n                 <div>\n                   <h6 class=\"tw-text-lg tw-font-semibold tw-text-blue-900 tw-m-0\">Academic Year Mapping</h6>\n                   <p class=\"tw-text-sm tw-text-blue-600 tw-m-0\">Configure entity mappings for this academic year</p>\n                 </div>\n               </div>\n               <button cideEleButton type=\"button\" variant=\"primary\" size=\"md\" leftIcon=\"add\"\n                 (click)=\"addAcademicYearMapping()\"\n                 class=\"tw-shadow-md hover:tw-shadow-lg tw-transition-shadow\">\n                 Add New Mapping\n               </button>\n             </div>\n             \n             @if (academicYearMappingsArray.length === 0) {\n             <div class=\"tw-text-center tw-py-12 tw-text-gray-500\">\n               <div class=\"tw-bg-white tw-p-4 tw-rounded-full tw-w-16 tw-h-16 tw-mx-auto tw-mb-4 tw-flex tw-items-center tw-justify-center\">\n                 <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">link</cide-ele-icon>\n               </div>\n               <h6 class=\"tw-text-base tw-font-medium tw-text-gray-600 tw-mb-2\">No Mappings Yet</h6>\n               <p class=\"tw-text-sm tw-text-gray-500\">Click \"Add New Mapping\" to start configuring entity relationships for this academic year.</p>\n             </div>\n             } @else {\n             <div class=\"tw-space-y-4\" formArrayName=\"acayr_academic_year_mappings\">\n               @for (mapping of academicYearMappingsArray.controls; track $index) {\n               <div class=\"tw-bg-white tw-rounded-xl tw-border tw-border-gray-200 tw-shadow-sm hover:tw-shadow-md tw-transition-shadow tw-p-6\">\n                 <div class=\"tw-flex tw-items-start tw-justify-between tw-mb-4\">\n                   <div class=\"tw-flex tw-items-center tw-gap-2\">\n                     <div class=\"tw-bg-blue-100 tw-p-2 tw-rounded-lg\">\n                       <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">settings</cide-ele-icon>\n                     </div>\n                     <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Mapping #{{ $index + 1 }}</h6>\n                   </div>\n                   <button cideEleButton type=\"button\" variant=\"danger\" size=\"sm\" leftIcon=\"delete\"\n                     (click)=\"removeAcademicYearMapping($index)\"\n                     class=\"tw-opacity-80 hover:tw-opacity-100 tw-transition-opacity\">\n                     Remove\n                   </button>\n                 </div>\n                 \n                 <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4\" [formGroupName]=\"$index\">\n                   <!-- Hidden Academic Year ID field (internal use only) -->\n                   <input type=\"hidden\" formControlName=\"acayrmp_academic_year_id_acayr\">\n                   \n                   <!-- Entity Selection -->\n                   <div class=\"tw-space-y-2\">\n                     <label class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Select Entity *</label>\n                     <cide-ele-select \n                       [options]=\"entityOptions()\"\n                       formControlName=\"acayrmp_entity_id_syen\"\n                       placeholder=\"Choose entity for this mapping\" \n                       size=\"md\"\n                       valueKey=\"_id\"\n                       labelKey=\"syen_name\"\n                       class=\"tw-min-w-full\"\n                       (change)=\"onMappingEntityChange($event, $index)\">\n                     </cide-ele-select>\n                   </div>\n                   \n                   <!-- Status Controls -->\n                   <div class=\"tw-space-y-2\">\n                     <div class=\"tw-grid tw-grid-cols-1 tw-gap-3\">\n                       <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                         <cide-ele-input \n                           formControlName=\"acayrmp_islocked\" \n                           type=\"checkbox\" \n                           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\">Locked</span>\n                           <span class=\"tw-text-xs tw-text-gray-500\">Prevent modifications</span>\n                         </div>\n                       </div>\n                       \n                       <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                         <cide-ele-input \n                           formControlName=\"acayrmp_iscurrent\" \n                           type=\"checkbox\" \n                           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\">Current</span>\n                           <span class=\"tw-text-xs tw-text-gray-500\">Mark as current mapping</span>\n                         </div>\n                       </div>\n                     </div>\n                   </div>\n                 </div>\n               </div>\n               }\n             </div>\n             }\n\n             <!-- Mapping Validation Messages -->\n             @if (academicYearMappingsArray.length > 0 && !isMappingsArrayValid()) {\n             <div class=\"tw-mt-4 tw-p-4 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-lg\">\n               <div class=\"tw-flex tw-items-center tw-gap-2\">\n                 <cide-ele-icon variant=\"warning\" size=\"sm\">warning</cide-ele-icon>\n                 <span class=\"tw-text-sm tw-font-medium tw-text-yellow-800\">\n                   Please ensure all mappings have required fields filled in.\n                 </span>\n               </div>\n             </div>\n             }\n           </div>\n           }\n           }\n         </div>\n      </div>\n     </div>\n\n          <!-- Form Actions -->\n      <div class=\"tw-table-row tw-h-0\">\n        <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-2 tw-bg-gray-50 tw-border-t tw-border-gray-200\">\n          <div class=\"tw-flex tw-justify-between tw-items-center tw-gap-4\">\n            <!-- Form Validation Errors -->\n            <cide-form-field-error [formGroup]=\"academicYearForm\"></cide-form-field-error>\n            \n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-gap-4\">\n            <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n              [disabled]=\"loading()\">\n              Reset Form\n            </button>\n\n            <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"cancelForm()\" leftIcon=\"close\"\n              [disabled]=\"loading()\">\n              Cancel\n            </button>\n\n            <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || academicYearForm.invalid\"\n              [loading]=\"loading()\" leftIcon=\"save\">\n              {{ isEditMode() ? 'Update Academic Year' : 'Create Academic Year' }}\n            </button>\n          </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideTextareaComponent, selector: "cide-ele-textarea", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "minlength", "maxlength", "rows", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleTabComponent, selector: "cide-ele-tab", inputs: ["tabs", "activeTabId", "size", "variant", "fullWidth", "disabled"], outputs: ["tabChange"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }, { kind: "component", type: CideFormFieldErrorComponent, selector: "cide-form-field-error", inputs: ["control", "formGroup", "fieldName", "customMessages"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AcademicYearCreateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-core-academic-year-create', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        CideInputComponent,
+                        CideTextareaComponent,
+                        CideEleButtonComponent,
+                        CideEleTabComponent,
+                        CideIconComponent,
+                        CideSelectComponent,
+                        CideFormFieldErrorComponent
+                    ], template: "<!-- \n  ACADEMIC YEAR MASTER FORM\n  \n  Enterprise-Level Styling with Tailwind CSS\n  Features: Responsive grids, proper typography, enhanced user experience\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]=\"academicYearForm\" [class.tw-opacity-60]=\"loading()\"\n    (ngSubmit)=\"onSubmit()\">\n\n    <!-- Simple Header Section -->\n    <div class=\"tw-table-row tw-w-full tw-h-0\">\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\n        <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-justify-between tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0\">\n          \n          <!-- Title -->\n          <div class=\"tw-flex tw-items-center tw-space-x-2\">\n            <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">school</cide-ele-icon>\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">\n              {{ isEditMode() ? 'Edit Academic Year' : 'Create Academic Year' }}\n            </h5>\n          </div>\n\n          <!-- Actions -->\n          <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\n            <!-- Back button or other actions can be added here if needed -->\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <!-- 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]=\"academicYearTabs()\" [activeTabId]=\"activeTab()\" size=\"md\" 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-6 tw-py-6\">\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\n          @switch (activeTab()) {\n\n                  @case ('basic') {\n           <!-- Basic Academic Year Information -->\n           <div class=\"tw-space-y-6\">\n             <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n               <cide-ele-input label=\"Academic Year Code *\" formControlName=\"acayr_code\"\n                 placeholder=\"e.g., AY2024-25\" size=\"md\" leadingIcon=\"code\">\n               </cide-ele-input>\n\n               <cide-ele-input label=\"Academic Year Name *\" formControlName=\"acayr_name\"\n                 placeholder=\"e.g., Academic Year 2024-2025\" size=\"md\" leadingIcon=\"school\">\n               </cide-ele-input>\n             </div>\n\n             <div>\n               <cide-ele-textarea label=\"Description\" formControlName=\"acayr_description\"\n                 placeholder=\"Enter detailed description of the academic year...\"\n                 rows=\"3\" size=\"md\">\n               </cide-ele-textarea>\n             </div>\n\n             <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\n               <cide-ele-input label=\"From Date *\" formControlName=\"acayr_from_date\" type=\"date\" size=\"md\"\n                 leadingIcon=\"calendar_today\" id=\"acayr_from_date\">\n               </cide-ele-input>\n\n               <cide-ele-input label=\"To Date *\" formControlName=\"acayr_to_date\" type=\"date\" size=\"md\"\n                 leadingIcon=\"calendar_today\" id=\"acayr_to_date\">\n               </cide-ele-input>\n             </div>\n\n             <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-3 tw-gap-6\">\n               <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                 <cide-ele-input formControlName=\"acayr_isactive\" type=\"checkbox\" size=\"md\">\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 academic year</span>\n                 </div>\n               </div>\n\n               <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                 <cide-ele-input formControlName=\"acayr_iscurrent\" type=\"checkbox\" size=\"md\">\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\">Current</span>\n                   <span class=\"tw-text-xs tw-text-gray-500\">Mark as current academic year</span>\n                 </div>\n               </div>\n\n               <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                 <cide-ele-input formControlName=\"acayr_islocked\" type=\"checkbox\" size=\"md\">\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\">Locked</span>\n                   <span class=\"tw-text-xs tw-text-gray-500\">Prevent modifications</span>\n                 </div>\n               </div>\n             </div>\n           </div>\n           }\n\n           @case ('mapping') {\n           <!-- Academic Year Mapping Configuration -->\n           <div class=\"tw-bg-gradient-to-r tw-from-blue-50 tw-to-indigo-50 tw-border tw-border-blue-200 tw-rounded-xl tw-p-6\">\n             <div class=\"tw-flex tw-items-center tw-justify-between tw-mb-6\">\n               <div class=\"tw-flex tw-items-center tw-gap-3\">\n                 <div class=\"tw-bg-blue-100 tw-p-2 tw-rounded-lg\">\n                   <cide-ele-icon class=\"tw-text-blue-600 tw-w-6 tw-h-6\">link</cide-ele-icon>\n                 </div>\n                 <div>\n                   <h6 class=\"tw-text-lg tw-font-semibold tw-text-blue-900 tw-m-0\">Academic Year Mapping</h6>\n                   <p class=\"tw-text-sm tw-text-blue-600 tw-m-0\">Configure entity mappings for this academic year</p>\n                 </div>\n               </div>\n               <button cideEleButton type=\"button\" variant=\"primary\" size=\"md\" leftIcon=\"add\"\n                 (click)=\"addAcademicYearMapping()\"\n                 class=\"tw-shadow-md hover:tw-shadow-lg tw-transition-shadow\">\n                 Add New Mapping\n               </button>\n             </div>\n             \n             @if (academicYearMappingsArray.length === 0) {\n             <div class=\"tw-text-center tw-py-12 tw-text-gray-500\">\n               <div class=\"tw-bg-white tw-p-4 tw-rounded-full tw-w-16 tw-h-16 tw-mx-auto tw-mb-4 tw-flex tw-items-center tw-justify-center\">\n                 <cide-ele-icon class=\"tw-w-8 tw-h-8 tw-text-gray-400\">link</cide-ele-icon>\n               </div>\n               <h6 class=\"tw-text-base tw-font-medium tw-text-gray-600 tw-mb-2\">No Mappings Yet</h6>\n               <p class=\"tw-text-sm tw-text-gray-500\">Click \"Add New Mapping\" to start configuring entity relationships for this academic year.</p>\n             </div>\n             } @else {\n             <div class=\"tw-space-y-4\" formArrayName=\"acayr_academic_year_mappings\">\n               @for (mapping of academicYearMappingsArray.controls; track $index) {\n               <div class=\"tw-bg-white tw-rounded-xl tw-border tw-border-gray-200 tw-shadow-sm hover:tw-shadow-md tw-transition-shadow tw-p-6\">\n                 <div class=\"tw-flex tw-items-start tw-justify-between tw-mb-4\">\n                   <div class=\"tw-flex tw-items-center tw-gap-2\">\n                     <div class=\"tw-bg-blue-100 tw-p-2 tw-rounded-lg\">\n                       <cide-ele-icon class=\"tw-text-blue-600 tw-w-5 tw-h-5\">settings</cide-ele-icon>\n                     </div>\n                     <h6 class=\"tw-text-sm tw-font-semibold tw-text-gray-900\">Mapping #{{ $index + 1 }}</h6>\n                   </div>\n                   <button cideEleButton type=\"button\" variant=\"danger\" size=\"sm\" leftIcon=\"delete\"\n                     (click)=\"removeAcademicYearMapping($index)\"\n                     class=\"tw-opacity-80 hover:tw-opacity-100 tw-transition-opacity\">\n                     Remove\n                   </button>\n                 </div>\n                 \n                 <div class=\"tw-grid tw-grid-cols-1 lg:tw-grid-cols-2 tw-gap-4\" [formGroupName]=\"$index\">\n                   <!-- Hidden Academic Year ID field (internal use only) -->\n                   <input type=\"hidden\" formControlName=\"acayrmp_academic_year_id_acayr\">\n                   \n                   <!-- Entity Selection -->\n                   <div class=\"tw-space-y-2\">\n                     <label class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Select Entity *</label>\n                     <cide-ele-select \n                       [options]=\"entityOptions()\"\n                       formControlName=\"acayrmp_entity_id_syen\"\n                       placeholder=\"Choose entity for this mapping\" \n                       size=\"md\"\n                       valueKey=\"_id\"\n                       labelKey=\"syen_name\"\n                       class=\"tw-min-w-full\"\n                       (change)=\"onMappingEntityChange($event, $index)\">\n                     </cide-ele-select>\n                   </div>\n                   \n                   <!-- Status Controls -->\n                   <div class=\"tw-space-y-2\">\n                     <div class=\"tw-grid tw-grid-cols-1 tw-gap-3\">\n                       <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                         <cide-ele-input \n                           formControlName=\"acayrmp_islocked\" \n                           type=\"checkbox\" \n                           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\">Locked</span>\n                           <span class=\"tw-text-xs tw-text-gray-500\">Prevent modifications</span>\n                         </div>\n                       </div>\n                       \n                       <div class=\"tw-flex tw-items-center tw-gap-2 tw-p-3 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200\">\n                         <cide-ele-input \n                           formControlName=\"acayrmp_iscurrent\" \n                           type=\"checkbox\" \n                           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\">Current</span>\n                           <span class=\"tw-text-xs tw-text-gray-500\">Mark as current mapping</span>\n                         </div>\n                       </div>\n                     </div>\n                   </div>\n                 </div>\n               </div>\n               }\n             </div>\n             }\n\n             <!-- Mapping Validation Messages -->\n             @if (academicYearMappingsArray.length > 0 && !isMappingsArrayValid()) {\n             <div class=\"tw-mt-4 tw-p-4 tw-bg-yellow-50 tw-border tw-border-yellow-200 tw-rounded-lg\">\n               <div class=\"tw-flex tw-items-center tw-gap-2\">\n                 <cide-ele-icon variant=\"warning\" size=\"sm\">warning</cide-ele-icon>\n                 <span class=\"tw-text-sm tw-font-medium tw-text-yellow-800\">\n                   Please ensure all mappings have required fields filled in.\n                 </span>\n               </div>\n             </div>\n             }\n           </div>\n           }\n           }\n         </div>\n      </div>\n     </div>\n\n          <!-- Form Actions -->\n      <div class=\"tw-table-row tw-h-0\">\n        <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-2 tw-bg-gray-50 tw-border-t tw-border-gray-200\">\n          <div class=\"tw-flex tw-justify-between tw-items-center tw-gap-4\">\n            <!-- Form Validation Errors -->\n            <cide-form-field-error [formGroup]=\"academicYearForm\"></cide-form-field-error>\n            \n            <!-- Action Buttons -->\n            <div class=\"tw-flex tw-justify-end tw-gap-4\">\n            <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\n              [disabled]=\"loading()\">\n              Reset Form\n            </button>\n\n            <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"cancelForm()\" leftIcon=\"close\"\n              [disabled]=\"loading()\">\n              Cancel\n            </button>\n\n            <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || academicYearForm.invalid\"\n              [loading]=\"loading()\" leftIcon=\"save\">\n              {{ isEditMode() ? 'Update Academic Year' : 'Create Academic Year' }}\n            </button>\n          </div>\n          </div>\n        </div>\n      </div>\n    </form>\n  </div>" }]
+        }], ctorParameters: () => [] });
+
+var academicYearCreate_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AcademicYearCreateComponent: AcademicYearCreateComponent
+});
+
+class AcademicYearListComponent {
+    // Modern Angular 20+ dependency injection using inject()
+    destroyRef = inject(DestroyRef);
+    academicYearService = inject(CideLytAcademicYearService);
+    router = inject(Router);
+    appState = inject(AppStateHelperService);
+    confirmationService = inject(ConfirmationService);
+    notificationService = inject(NotificationService);
+    // Modern ViewChild signals for template renderers (Angular 20 approach)
+    academicYearDetailsRendererTemplate = viewChild.required('academicYearDetailsRendererTemplate');
+    dateRangeRendererTemplate = viewChild.required('dateRangeRendererTemplate');
+    statusRendererTemplate = viewChild.required('statusRendererTemplate');
+    actionsDropdownRendererTemplate = viewChild.required('actionsDropdownRendererTemplate');
+    // Modern Angular 20+ state management using signals with proper typing
+    academicYears = signal([], ...(ngDevMode ? [{ debugName: "academicYears" }] : []));
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    // Server-side pagination state using signals
+    currentPage = signal(1, ...(ngDevMode ? [{ debugName: "currentPage" }] : []));
+    pageSize = signal(10, ...(ngDevMode ? [{ debugName: "pageSize" }] : []));
+    totalItems = signal(0, ...(ngDevMode ? [{ debugName: "totalItems" }] : []));
+    totalPages = signal(0, ...(ngDevMode ? [{ debugName: "totalPages" }] : []));
+    // Server-side search state using signals
+    searchQuery = signal('', ...(ngDevMode ? [{ debugName: "searchQuery" }] : []));
+    // Server-side sorting state using signals
+    sortColumn = signal('acayr_name', ...(ngDevMode ? [{ debugName: "sortColumn" }] : []));
+    sortDirection = signal('asc', ...(ngDevMode ? [{ debugName: "sortDirection" }] : []));
+    // Server-side filtering state using signals
+    selectedStatusFilter = signal('', ...(ngDevMode ? [{ debugName: "selectedStatusFilter" }] : []));
+    // Filter options using computed signal for better performance
+    statusFilterOptions = computed(() => [
+        { value: '', label: 'All Status' },
+        { value: 'active', label: 'Active Years' },
+        { value: 'inactive', label: 'Inactive Years' },
+        { value: 'current', label: 'Current Year' },
+        { value: 'locked', label: 'Locked Years' }
+    ], ...(ngDevMode ? [{ debugName: "statusFilterOptions" }] : []));
+    // Modern Angular 20+ grid configuration using computed signal with proper typing
+    gridConfig = computed(() => ({
+        id: 'academic-year-list-grid',
+        columns: [
+            {
+                key: 'acayr_code',
+                header: 'Academic Year Code',
+                type: 'text',
+                width: '140px',
+                truncate: true,
+                align: 'left',
+                sortable: true
+            },
+            {
+                key: 'details',
+                header: 'Academic Year Details',
+                type: 'custom',
+                width: 'auto',
+                truncate: true,
+                align: 'left',
+                renderer: 'academicYearDetailsRenderer',
+                sortable: true
+            },
+            {
+                key: 'date_range',
+                header: 'Date Range',
+                type: 'custom',
+                width: '200px',
+                truncate: false,
+                align: 'left',
+                renderer: 'dateRangeRenderer',
+                sortable: true
+            },
+            {
+                key: 'acayr_isactive',
+                header: 'Status',
+                type: 'custom',
+                width: '140px',
+                truncate: false,
+                align: 'center',
+                renderer: 'statusRenderer'
+            },
+            {
+                key: 'actions',
+                header: 'Actions',
+                type: 'custom',
+                width: '80px',
+                truncate: false,
+                align: 'center',
+                renderer: 'actionsDropdownRenderer'
+            }
+        ],
+        data: this.academicYears(),
+        trackBy: '_id',
+        pagination: {
+            enabled: true,
+            pageSize: this.pageSize(),
+            pageSizeOptions: [10, 25, 50, 100],
+            showQuickJump: true,
+            showPageInfo: true,
+            showRefresh: true
+        },
+        search: {
+            enabled: true,
+            placeholder: 'Search by code, name, or description...',
+            searchableColumns: ['acayr_code', 'acayr_name', 'acayr_description'],
+            debounceMs: 300,
+            showClearButton: true
+        },
+        loading: {
+            useDefer: true,
+            skeletonRows: 5,
+            showOverlay: this.loading()
+        },
+        scroll: {
+            enabled: true,
+            maxHeight: '',
+            minHeight: '',
+            stickyHeader: true,
+            virtualScroll: false,
+            rowHeight: 50
+        },
+        export: {
+            enabled: true,
+            formats: ['csv', 'excel', 'pdf'],
+            filename: 'academic-years',
+            includeHeaders: true
+        },
+        responsive: true,
+        striped: false,
+        bordered: true,
+        compact: false,
+        tableClass: 'tw-table-fixed tw-w-full tw-rounded-none'
+    }), ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    ngOnInit() {
+        console.log('🎓 Academic Year List Component initialized');
+        this.loadAcademicYears();
+    }
+    ngOnDestroy() {
+        // Cleanup if needed
+    }
+    /**
+     * Load academic years from API
+     */
+    loadAcademicYears() {
+        this.loading.set(true);
+        this.error.set(null);
+        const payload = {
+            pageIndex: this.currentPage(),
+            pageSize: this.pageSize(),
+            query: this.searchQuery() || "",
+            sort: {
+                key: this.sortColumn(),
+                order: this.sortDirection()
+            }
+        };
+        this.academicYearService.getAcademicYearList(payload)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response?.success && response.data) {
+                    console.log('📚 Academic years loaded:', response.data);
+                    console.log('📊 Pagination info:', {
+                        total: response.total,
+                        pageIndex: response.pageIndex,
+                        pageSize: response.pageSize
+                    });
+                    this.academicYears.set(response.data);
+                    this.totalItems.set(response.total || 0);
+                    this.totalPages.set(Math.ceil((response.total || 0) / this.pageSize()));
+                    // Show success notification if data was loaded successfully
+                    if (response.data.length > 0) {
+                        this.notificationService.success(`Loaded ${response.data.length} academic year(s) successfully.`);
+                    }
+                }
+                else {
+                    console.warn('⚠️ No academic year data received');
+                    this.academicYears.set([]);
+                    this.totalItems.set(0);
+                    this.totalPages.set(0);
+                    this.notificationService.warning('No academic years found.');
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('❌ Error loading academic years:', error);
+                this.error.set('Failed to load academic years. Please try again.');
+                this.academicYears.set([]);
+                this.totalItems.set(0);
+                this.totalPages.set(0);
+                this.notificationService.error('Failed to load academic years. Please try again.');
+                this.loading.set(false);
+            }
+        });
+    }
+    // Computed template renderers for grid
+    templateRenderers = computed(() => ({
+        academicYearDetailsRenderer: this.academicYearDetailsRendererTemplate(),
+        dateRangeRenderer: this.dateRangeRendererTemplate(),
+        statusRenderer: this.statusRendererTemplate(),
+        actionsDropdownRenderer: this.actionsDropdownRendererTemplate()
+    }), ...(ngDevMode ? [{ debugName: "templateRenderers" }] : []));
+    /**
+     * Handle grid events
+     */
+    onGridEvent(event) {
+        switch (event.type) {
+            case 'pageChange':
+                if (event.data && typeof event.data === 'object' && 'pageIndex' in event.data && 'pageSize' in event.data) {
+                    this.currentPage.set(event.data['pageIndex']);
+                    this.pageSize.set(event.data['pageSize']);
+                    this.loadAcademicYears();
+                }
+                break;
+            case 'search':
+                this.searchQuery.set(event.data);
+                this.currentPage.set(1);
+                this.loadAcademicYears();
+                break;
+            case 'refresh':
+                this.loadAcademicYears();
+                break;
+            case 'action':
+                // Handle action events if needed
+                console.log('Action event:', event);
+                break;
+            case 'rowClick':
+                // Handle row click events if needed
+                console.log('Row click event:', event);
+                break;
+            case 'sort':
+                if (event.data && typeof event.data === 'object' && 'column' in event.data && 'direction' in event.data) {
+                    this.sortColumn.set(event.data['column']);
+                    this.sortDirection.set(event.data['direction']);
+                    this.currentPage.set(1); // Reset to first page when sorting
+                    this.loadAcademicYears();
+                }
+                break;
+            case 'export':
+                if (event.data && typeof event.data === 'string') {
+                    this.handleExport(event.data);
+                }
+                break;
+            default:
+                console.log('🔄 Unhandled grid event:', event.type);
+        }
+    }
+    // Filter handlers
+    onStatusFilterChange() {
+        console.log('🔍 Status filter changed:', this.selectedStatusFilter());
+        this.currentPage.set(1); // Reset to first page when filtering
+        this.loadAcademicYears();
+    }
+    clearFilters() {
+        console.log('🧹 Clearing filters');
+        this.selectedStatusFilter.set('');
+        this.searchQuery.set('');
+        this.currentPage.set(1);
+        this.loadAcademicYears();
+    }
+    // Academic Year actions with proper typing
+    createAcademicYear() {
+        console.log('➕ Navigating to create academic year');
+        this.notificationService.info('Opening form to create a new academic year.');
+        this.router.navigate(['/control-panel/academic_year/create']);
+    }
+    viewAcademicYear(academicYear) {
+        console.log('👁️ Viewing academic year:', academicYear);
+        this.notificationService.info(`Opening academic year "${academicYear.acayr_name}" for viewing.`);
+        const queryParams = generateStringFromObject({ acayr_id: academicYear._id });
+        this.router.navigate(['/control-panel/academic_year/view', queryParams]);
+    }
+    editAcademicYear(academicYear) {
+        console.log('✏️ Editing academic year:', academicYear);
+        // Check if the academic year is locked
+        if (academicYear.acayr_islocked) {
+            this.notificationService.error(`Cannot edit "${academicYear.acayr_name}" - This academic year is locked and cannot be modified. Please contact an administrator to unlock it first.`);
+            return;
+        }
+        this.notificationService.info(`Opening academic year "${academicYear.acayr_name}" for editing.`);
+        const queryParams = generateStringFromObject({ acayr_id: academicYear._id });
+        this.router.navigate(['/control-panel/academic_year/edit', queryParams]);
+    }
+    /**
+     * Get dropdown configuration
+     */
+    getDropdownConfig() {
+        return {
+            triggerIcon: 'more_vert',
+            triggerSize: 'sm',
+            // menuPosition: 'right' as const,
+            // forcePosition: 'bottom' as const,
+            // offsetX: 0,
+            // offsetY: 1,
+            // usePortal: true,
+            // showArrow: false
+        };
+    }
+    /**
+     * Get action dropdown items
+     */
+    getActionDropdownItems(academicYear) {
+        console.log('🔽 Generating dropdown items for:', academicYear.acayr_name);
+        console.log('🔽 Academic year data:', {
+            isCurrent: academicYear.acayr_iscurrent,
+            isLocked: academicYear.acayr_islocked,
+            isActive: academicYear.acayr_isactive
+        });
+        const items = [
+            {
+                id: 'view',
+                label: 'View Details',
+                icon: 'visibility',
+                iconColor: 'tw-text-gray-400',
+                textColor: 'tw-text-gray-700',
+                hoverBgColor: 'hover:tw-bg-gray-100'
+            },
+            {
+                id: 'edit',
+                label: 'Edit',
+                icon: 'edit',
+                iconColor: academicYear?.acayr_islocked ? 'tw-text-gray-300' : 'tw-text-blue-400',
+                textColor: academicYear?.acayr_islocked ? 'tw-text-gray-400' : 'tw-text-blue-600',
+                hoverBgColor: academicYear?.acayr_islocked ? 'hover:tw-bg-gray-50' : 'hover:tw-bg-blue-50'
+            },
+            {
+                id: 'toggle-status',
+                label: academicYear.acayr_isactive ? 'Deactivate' : 'Activate',
+                icon: academicYear.acayr_isactive ? 'toggle_off' : 'toggle_on',
+                iconColor: academicYear?.acayr_islocked ? 'tw-text-gray-300' : 'tw-text-gray-400',
+                textColor: academicYear?.acayr_islocked ? 'tw-text-gray-400' : 'tw-text-gray-700',
+                hoverBgColor: academicYear?.acayr_islocked ? 'hover:tw-bg-gray-50' : 'hover:tw-bg-gray-100'
+            }
+        ];
+        return items;
+    }
+    /**
+     * Handle dropdown item click
+     */
+    onDropdownItemClick(item, academicYear) {
+        console.log('🖱️ Dropdown item clicked:', item.id, 'for academic year:', academicYear.acayr_name);
+        // Check if item is disabled
+        if (item.disabled) {
+            console.log('⚠️ Item is disabled, ignoring click');
+            return;
+        }
+        switch (item.id) {
+            case 'view':
+                this.viewAcademicYear(academicYear);
+                break;
+            case 'edit':
+                this.editAcademicYear(academicYear);
+                break;
+            case 'toggle-status':
+                this.toggleAcademicYearStatus(academicYear);
+                break;
+            default:
+                console.log('❓ Unknown dropdown item clicked:', item.id);
+        }
+    }
+    /**
+     * Toggle academic year status (active/inactive)
+     */
+    toggleAcademicYearStatus(academicYear) {
+        console.log('🔄 Toggling academic year status:', academicYear);
+        // Check if the academic year is locked
+        if (academicYear.acayr_islocked) {
+            this.notificationService.error(`Cannot ${academicYear.acayr_isactive ? 'deactivate' : 'activate'} "${academicYear.acayr_name}" - This academic year is locked and its status cannot be changed. Please contact an administrator to unlock it first.`);
+            return;
+        }
+        const action = academicYear.acayr_isactive ? 'deactivate' : 'activate';
+        const actionText = academicYear.acayr_isactive ? 'Deactivate' : 'Activate';
+        // Show confirmation dialog
+        console.log('🔔 Showing confirmation dialog for toggle status');
+        this.confirmationService.ask({
+            title: `${actionText} Academic Year`,
+            message: `Are you sure you want to ${action} the academic year "${academicYear.acayr_name}"?${!academicYear.acayr_isactive ? '\n\nThis will also deactivate all associated mappings.' : ''}`,
+            confirmText: actionText,
+            cancelText: 'Cancel',
+            type: academicYear.acayr_isactive ? 'warning' : 'info'
+        }).then((confirmed) => {
+            console.log('🔔 Confirmation dialog result:', confirmed);
+            if (confirmed) {
+                this.loading.set(true);
+                // First toggle the academic year status
+                console.log('🔄 Calling toggleAcademicYearStatus with ID:', academicYear._id);
+                this.academicYearService.toggleAcademicYearStatus({ acayr_id: academicYear._id }).subscribe({
+                    next: (response) => {
+                        console.log('🔄 Toggle academic year status response:', response);
+                        if (response?.success) {
+                            console.log('✅ Academic year status toggled successfully');
+                            // If deactivating, also toggle status of all academic year mappings
+                            if (!academicYear.acayr_isactive) { // If we're deactivating (was active, now inactive)
+                                this.toggleAcademicYearMappingsStatus(academicYear._id || '', false);
+                            }
+                            else {
+                                // If activating, just reload the list
+                                this.notificationService.success(`Academic year "${academicYear.acayr_name}" has been activated successfully.`);
+                                this.loadAcademicYears();
+                            }
+                        }
+                        else {
+                            console.error('❌ Failed to toggle academic year status');
+                            this.notificationService.error(response?.message || 'Failed to toggle academic year status');
+                            this.loading.set(false);
+                        }
+                    },
+                    error: (error) => {
+                        console.error('❌ Error toggling academic year status:', error);
+                        console.error('❌ Error details:', {
+                            status: error.status,
+                            message: error.message,
+                            error: error.error
+                        });
+                        this.notificationService.error('Failed to toggle academic year status. Please try again.');
+                        this.loading.set(false);
+                    }
+                });
+            }
+        });
+    }
+    /**
+     * Toggle status of all academic year mappings for a specific academic year
+     */
+    toggleAcademicYearMappingsStatus(academicYearId, isActive) {
+        console.log(`🔄 Toggling mappings status for academic year ${academicYearId} to ${isActive ? 'active' : 'inactive'}`);
+        // Get all mappings for this academic year and toggle their status
+        // For now, we'll reload the academic year data to get the mappings
+        // In a real implementation, you might want to get mappings separately
+        this.academicYearService.getAcademicYearById({ acayr_id: academicYearId }).subscribe({
+            next: (response) => {
+                if (response?.success && response.data && response.data.acayr_academic_year_mappings) {
+                    const mappings = response.data.acayr_academic_year_mappings;
+                    console.log('📋 Found mappings to toggle:', mappings);
+                    // Toggle each mapping's status
+                    const toggleObservables = mappings.map((mapping) => {
+                        return this.academicYearService.toggleAcademicYearMappingStatus({
+                            acayrmp_id: mapping._id
+                        }).pipe(catchError(error => {
+                            console.error('❌ Error toggling mapping status:', error);
+                            return of({ success: false, error, mappingId: mapping._id });
+                        }));
+                    });
+                    if (toggleObservables.length > 0) {
+                        forkJoin(toggleObservables).subscribe((results) => {
+                            console.log('✅ All mapping statuses toggled:', results);
+                            const resultsArray = results;
+                            const failedCount = resultsArray.filter((result) => !result.success).length;
+                            if (failedCount === 0) {
+                                this.notificationService.success(`Academic year and all ${resultsArray.length} associated mappings have been deactivated successfully.`);
+                            }
+                            else {
+                                this.notificationService.warning(`Academic year deactivated, but ${failedCount} out of ${resultsArray.length} mappings failed to update.`);
+                            }
+                            this.loadAcademicYears(); // Reload the list
+                        }, (error) => {
+                            console.error('❌ Error toggling mapping statuses:', error);
+                            this.notificationService.error('Academic year deactivated, but failed to update some mappings.');
+                            this.loadAcademicYears(); // Still reload the list
+                        });
+                    }
+                    else {
+                        this.notificationService.success('Academic year has been deactivated successfully.');
+                        this.loadAcademicYears(); // No mappings to toggle, just reload
+                    }
+                }
+                else {
+                    this.notificationService.success('Academic year has been deactivated successfully.');
+                    this.loadAcademicYears(); // No mappings found, just reload
+                }
+            },
+            error: (error) => {
+                console.error('❌ Error getting academic year mappings:', error);
+                this.notificationService.error('Academic year deactivated, but failed to update mappings.');
+                this.loadAcademicYears(); // Still reload the list
+            }
+        });
+    }
+    // Export handler
+    handleExport(format) {
+        console.log(`📤 Exporting academic years as ${format}`);
+        const data = this.academicYears().map(item => ({
+            'Academic Year Code': item.acayr_code,
+            'Academic Year Name': item.acayr_name,
+            'Description': item.acayr_description,
+            'From Date': this.formatDate(item?.acayr_from_date || ""),
+            'To Date': this.formatDate(item?.acayr_to_date || ""),
+            'Duration': this.getDuration(item?.acayr_from_date || "", item?.acayr_to_date || ""),
+            'Status': this.getStatusText(item),
+            'Is Current': item.acayr_iscurrent ? 'Yes' : 'No',
+            'Is Active': item.acayr_isactive ? 'Yes' : 'No',
+            'Is Locked': item.acayr_islocked ? 'Yes' : 'No'
+        }));
+        // Create filename with timestamp
+        const timestamp = new Date().toISOString().split('T')[0];
+        const filename = `academic-years-${timestamp}`;
+        switch (format.toLowerCase()) {
+            case 'csv':
+                this.exportToCSV(data, filename);
+                break;
+            case 'excel':
+                this.exportToExcel(data, filename);
+                break;
+            case 'pdf':
+                this.exportToPDF(data, filename);
+                break;
+            default:
+                console.warn(`Unsupported export format: ${format}`);
+        }
+    }
+    exportToCSV(data, filename) {
+        const headers = Object.keys(data[0] || {});
+        const csvContent = [
+            headers.join(','),
+            ...data.map(row => headers.map(header => `"${row[header] || ''}"`).join(','))
+        ].join('\n');
+        this.downloadFile(csvContent, `${filename}.csv`, 'text/csv');
+    }
+    exportToExcel(data, filename) {
+        // For Excel export, you might want to use a library like xlsx
+        // For now, we'll export as CSV with .xlsx extension
+        this.exportToCSV(data, filename);
+    }
+    exportToPDF(data, filename) {
+        // For PDF export, you might want to use a library like jsPDF
+        // For now, we'll export as CSV
+        this.exportToCSV(data, filename);
+    }
+    downloadFile(content, filename, mimeType) {
+        const blob = new Blob([content], { type: mimeType });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = filename;
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+        window.URL.revokeObjectURL(url);
+    }
+    // Utility methods with proper typing
+    formatDate(date) {
+        if (!date)
+            return '-';
+        return new Date(date).toLocaleDateString('en-US', {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric'
+        });
+    }
+    getDuration(fromDate, toDate) {
+        if (!fromDate || !toDate)
+            return '';
+        const from = new Date(fromDate);
+        const to = new Date(toDate);
+        const diffTime = Math.abs(to.getTime() - from.getTime());
+        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+        const months = Math.floor(diffDays / 30);
+        const years = Math.floor(months / 12);
+        if (years > 0) {
+            return `${years} year${years > 1 ? 's' : ''}`;
+        }
+        else if (months > 0) {
+            return `${months} month${months > 1 ? 's' : ''}`;
+        }
+        else {
+            return `${diffDays} day${diffDays > 1 ? 's' : ''}`;
+        }
+    }
+    getStatusBadgeClass(academicYear) {
+        if (academicYear.acayr_iscurrent)
+            return 'tw-bg-green-100 tw-text-green-800';
+        if (academicYear.acayr_islocked)
+            return 'tw-bg-red-100 tw-text-red-800';
+        if (academicYear.acayr_isactive)
+            return 'tw-bg-blue-100 tw-text-blue-800';
+        return 'tw-bg-gray-100 tw-text-gray-800';
+    }
+    getActiveStatusBadgeClass(academicYear) {
+        if (academicYear.acayr_isactive) {
+            return 'tw-bg-green-100 tw-text-green-800';
+        }
+        else {
+            return 'tw-bg-orange-100 tw-text-orange-800';
+        }
+    }
+    getStatusText(academicYear) {
+        if (academicYear.acayr_iscurrent)
+            return 'Current';
+        if (academicYear.acayr_islocked)
+            return 'Locked';
+        if (academicYear.acayr_isactive)
+            return 'Active';
+        return 'Inactive';
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AcademicYearListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: AcademicYearListComponent, isStandalone: true, selector: "cide-core-academic-year-list", viewQueries: [{ propertyName: "academicYearDetailsRendererTemplate", first: true, predicate: ["academicYearDetailsRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "dateRangeRendererTemplate", first: true, predicate: ["dateRangeRendererTemplate"], 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: "<!-- Academic Year Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Header Section with Filters -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div\r\n        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\">school</cide-ele-icon>\r\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Academic Year Management</h5>\r\n        </div>\r\n\r\n        <!-- Actions -->\r\n        <div\r\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n          <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"createAcademicYear()\">\r\n            Create Academic Year\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n\r\n      <!-- Data Grid Component -->\r\n      <div class=\"tw-h-full 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\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #academicYearDetailsRendererTemplate 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.acayr_name || 'N/A' }}</div>\r\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.acayr_description || 'No description' }}</div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dateRangeRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-flex-col tw-text-sm\">\r\n    <span class=\"tw-text-gray-900 tw-font-medium\">{{ formatDate(row.acayr_from_date) }}</span>\r\n    <span class=\"tw-text-gray-500\">to {{ formatDate(row.acayr_to_date) }}</span>\r\n    <span class=\"tw-text-xs tw-text-gray-400\">{{ getDuration(row.acayr_from_date, row.acayr_to_date) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #statusRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-flex-col tw-gap-1 tw-items-center\">\r\n    <!-- Current Year Badge (Priority) -->\r\n    @if (row.acayr_iscurrent) {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800 tw-text-center\">\r\n      <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">star</cide-ele-icon>\r\n      Current Year\r\n    </span>\r\n    }\r\n    \r\n    <!-- Active/Inactive Status Badge -->\r\n    <span 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]=\"getActiveStatusBadgeClass(row)\">\r\n      <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\r\n        {{ row.acayr_isactive ? 'check_circle' : 'cancel' }}\r\n      </cide-ele-icon>\r\n      {{ row.acayr_isactive ? 'Active' : 'Inactive' }}\r\n    </span>\r\n    \r\n    <!-- Locked Status Badge (Additional info) -->\r\n    @if (row.acayr_islocked) {\r\n    <span\r\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-red-100 tw-text-red-800 tw-text-center\">\r\n      <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">lock</cide-ele-icon>\r\n      Locked\r\n    </span>\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 \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>", styles: [".academic-year-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$1.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]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: 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"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: AcademicYearListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-core-academic-year-list', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        CideIconComponent,
+                        CideEleButtonComponent,
+                        CideEleDataGridComponent,
+                        CideEleDropdownComponent
+                    ], template: "<!-- Academic Year Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Header Section with Filters -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div\r\n        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\">school</cide-ele-icon>\r\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Academic Year Management</h5>\r\n        </div>\r\n\r\n        <!-- Actions -->\r\n        <div\r\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n          <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"createAcademicYear()\">\r\n            Create Academic Year\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Main Content Area -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-h-full tw-relative\">\r\n\r\n      <!-- Data Grid Component -->\r\n      <div class=\"tw-h-full 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\r\n    </div>\r\n  </div>\r\n\r\n</div>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #academicYearDetailsRendererTemplate 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.acayr_name || 'N/A' }}</div>\r\n    <div class=\"tw-text-sm tw-text-gray-500 tw-truncate\">{{ row.acayr_description || 'No description' }}</div>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #dateRangeRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-flex-col tw-text-sm\">\r\n    <span class=\"tw-text-gray-900 tw-font-medium\">{{ formatDate(row.acayr_from_date) }}</span>\r\n    <span class=\"tw-text-gray-500\">to {{ formatDate(row.acayr_to_date) }}</span>\r\n    <span class=\"tw-text-xs tw-text-gray-400\">{{ getDuration(row.acayr_from_date, row.acayr_to_date) }}</span>\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #statusRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-flex-col tw-gap-1 tw-items-center\">\r\n    <!-- Current Year Badge (Priority) -->\r\n    @if (row.acayr_iscurrent) {\r\n    <span\r\n      class=\"tw-inline-flex tw-items-center tw-justify-center tw-px-2.5 tw-py-1 tw-rounded-full tw-text-xs tw-font-medium tw-bg-yellow-100 tw-text-yellow-800 tw-text-center\">\r\n      <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">star</cide-ele-icon>\r\n      Current Year\r\n    </span>\r\n    }\r\n    \r\n    <!-- Active/Inactive Status Badge -->\r\n    <span 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]=\"getActiveStatusBadgeClass(row)\">\r\n      <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">\r\n        {{ row.acayr_isactive ? 'check_circle' : 'cancel' }}\r\n      </cide-ele-icon>\r\n      {{ row.acayr_isactive ? 'Active' : 'Inactive' }}\r\n    </span>\r\n    \r\n    <!-- Locked Status Badge (Additional info) -->\r\n    @if (row.acayr_islocked) {\r\n    <span\r\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-red-100 tw-text-red-800 tw-text-center\">\r\n      <cide-ele-icon size=\"2xs\" class=\"tw-mr-1\">lock</cide-ele-icon>\r\n      Locked\r\n    </span>\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 \r\n    [items]=\"getActionDropdownItems(row)\"\r\n    [config]=\"{ triggerIcon: 'more_vert', triggerSize: 'sm' }\"\r\n    (itemClick)=\"onDropdownItemClick($event, row)\">\r\n  </cide-ele-dropdown>\r\n</ng-template>", styles: [".academic-year-listing-container{@apply tw-w-full tw-h-full;}:host{@apply tw-w-full tw-h-full tw-flex tw-flex-col;}\n"] }]
+        }] });
+
+var academicYearList_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    AcademicYearListComponent: AcademicYearListComponent
+});
+
+// Academic Year Management Components
+
+class CideLytClassProgramBranchService {
+    http = inject(HttpClient);
+    /**
+     * Get list of class program branches
+     * @param payload - Query parameters for filtering/pagination
+     * @returns Observable of class program branch list response
+     */
+    getClassProgramBranchList(payload) {
+        console.log("Class Program Branch List Payload:", payload);
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramBranch,
+            query
+        ]);
+        return this.http.get(url);
+    }
+    /**
+     * Get class program branch by ID
+     * @param payload - Class program branch ID payload
+     * @returns Observable of class program branch data
+     */
+    getClassProgramBranchById(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramBranch,
+            'byId',
+            query
+        ]);
+        return this.http.get(url);
+    }
+    /**
+     * Create or update class program branch
+     * @param data - Class program branch data to save
+     * @returns Observable of the save response
+     */
+    saveClassProgramBranch(data) {
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramBranch
+        ]);
+        return this.http.post(url, data);
+    }
+    /**
+     * Delete class program branch
+     * @param payload - Class program branch delete payload
+     * @returns Observable of the delete response
+     */
+    deleteClassProgramBranch(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramBranch,
+            query
+        ]);
+        return this.http.delete(url);
+    }
+    /**
+     * Toggle class program branch status (active/inactive)
+     * @param payload - Class program branch toggle status payload
+     * @returns Observable of the toggle status response
+     */
+    toggleClassProgramBranchStatus(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramBranch,
+            'toggleStatus',
+            query
+        ]);
+        return this.http.put(url, {});
+    }
+    /**
+     * Toggle class program branch lock
+     * @param payload - Class program branch toggle lock payload
+     * @returns Observable of the toggle lock response
+     */
+    toggleClassProgramBranchLock(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramBranch,
+            'toggleLock',
+            query
+        ]);
+        return this.http.put(url, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytClassProgramBranchService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytClassProgramBranchService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytClassProgramBranchService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CideLytClassProgramBranchListComponent {
+    // Dependency injection
+    destroyRef = inject(DestroyRef);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    appState = inject(AppStateHelperService);
+    notificationService = inject(NotificationService);
+    confirmationService = inject(ConfirmationService);
+    classProgramBranchService = inject(CideLytClassProgramBranchService);
+    // State management
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    branches = signal([], ...(ngDevMode ? [{ debugName: "branches" }] : []));
+    totalCount = signal(0, ...(ngDevMode ? [{ debugName: "totalCount" }] : []));
+    programId = signal(null, ...(ngDevMode ? [{ debugName: "programId" }] : []));
+    // Template renderers
+    dragHandleRendererTemplate = viewChild('dragHandleRendererTemplate', ...(ngDevMode ? [{ debugName: "dragHandleRendererTemplate" }] : []));
+    classProgramRendererTemplate = viewChild('classProgramRendererTemplate', ...(ngDevMode ? [{ debugName: "classProgramRendererTemplate" }] : []));
+    actionsDropdownRendererTemplate = viewChild('actionsDropdownRendererTemplate', ...(ngDevMode ? [{ debugName: "actionsDropdownRendererTemplate" }] : []));
+    // Grid configuration
+    gridConfig = signal({
+        id: 'class-program-branch-list-grid',
+        title: '',
+        subtitle: '',
+        columns: [
+            {
+                key: 'drag',
+                header: '',
+                type: 'custom',
+                width: '40px',
+                truncate: false,
+                align: 'center',
+                renderer: 'dragHandleRenderer'
+            },
+            {
+                key: 'acabrn_name',
+                header: 'Branch Name',
+                type: 'text',
+                width: '200px',
+                truncate: true,
+                align: 'left'
+            },
+            {
+                key: 'acabrn_code',
+                header: 'Code',
+                type: 'text',
+                width: '150px',
+                truncate: true,
+                align: 'left'
+            },
+            {
+                key: 'acabrn_class_program_id_acacpm',
+                header: 'Class Program',
+                type: 'custom',
+                width: '200px',
+                truncate: true,
+                align: 'left',
+                renderer: 'classProgramRenderer'
+            },
+            {
+                key: 'acabrn_isactive',
+                header: 'Status',
+                type: 'status',
+                width: '100px',
+                truncate: false,
+                align: 'center',
+                statusConfig: {
+                    activeValue: true,
+                    activeLabel: 'Active',
+                    inactiveLabel: 'Inactive',
+                    activeClass: 'tw-bg-green-100 tw-text-green-800',
+                    inactiveClass: 'tw-bg-red-100 tw-text-red-800'
+                }
+            },
+            {
+                key: 'acabrn_islocked',
+                header: 'Locked',
+                type: 'status',
+                width: '100px',
+                truncate: false,
+                align: 'center',
+                statusConfig: {
+                    activeValue: true,
+                    activeLabel: 'Locked',
+                    inactiveLabel: 'Unlocked',
+                    activeClass: 'tw-bg-yellow-100 tw-text-yellow-800',
+                    inactiveClass: 'tw-bg-gray-100 tw-text-gray-800'
+                }
+            },
+            {
+                key: 'actions',
+                header: '',
+                type: 'custom',
+                width: '80px',
+                truncate: false,
+                align: 'center',
+                renderer: 'actionsDropdownRenderer'
+            }
+        ],
+        data: [],
+        trackBy: '_id',
+        pagination: {
+            enabled: true,
+            pageSize: 10,
+            pageSizeOptions: [10, 25, 50, 100],
+            showQuickJump: true,
+            showPageInfo: true,
+            showRefresh: true
+        },
+        search: {
+            enabled: true,
+            placeholder: 'Search branches...',
+            searchableColumns: ['acabrn_name', 'acabrn_code'],
+            debounceMs: 300
+        },
+        loading: {
+            useDefer: true,
+            skeletonRows: 5,
+            showOverlay: false
+        },
+        scroll: {
+            enabled: true,
+            maxHeight: '600px',
+            minHeight: '400px',
+            stickyHeader: true,
+            virtualScroll: false,
+            rowHeight: 50
+        },
+        responsive: true,
+        striped: true,
+        bordered: true,
+        compact: false,
+        tableClass: 'tw-table-fixed tw-w-full tw-rounded-lg',
+        dragDrop: {
+            enabled: true
+        },
+        onRefresh: 'onRefresh',
+        onPageChange: 'onPageChange',
+        onSearch: 'onSearch',
+        onRowReorder: 'onRowReorder'
+    }, ...(ngDevMode ? [{ debugName: "gridConfig" }] : []));
+    // Computed template renderers
+    templateRenderers = computed(() => {
+        const renderers = {};
+        if (this.dragHandleRendererTemplate()) {
+            renderers['dragHandleRenderer'] = this.dragHandleRendererTemplate();
+        }
+        if (this.classProgramRendererTemplate()) {
+            renderers['classProgramRenderer'] = this.classProgramRendererTemplate();
+        }
+        if (this.actionsDropdownRendererTemplate()) {
+            renderers['actionsDropdownRenderer'] = this.actionsDropdownRendererTemplate();
+        }
+        return renderers;
+    }, ...(ngDevMode ? [{ debugName: "templateRenderers" }] : []));
+    ngOnInit() {
+        console.log('🏢 Class Program Branch List Component initialized');
+        this.checkRouteParams();
+        // Load branches will be called when programId is set in checkRouteParams
+    }
+    /**
+     * Check route parameters for program ID
+     */
+    checkRouteParams() {
+        this.route.params.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(params => {
+            const queryParams = params['query'];
+            console.log('🏢 Route params:', params, 'queryParams:', queryParams);
+            if (queryParams) {
+                // Query parameters passed (following page-controls pattern)
+                const queryData = generateObjectFromString(queryParams);
+                console.log('🏢 Program Class ID from route:', queryData);
+                if (queryData?.programId) {
+                    this.programId.set(queryData.programId);
+                    console.log('🏢 Will filter branches by acabrn_class_program_id_acacpm:', queryData.programId);
+                    this.loadBranches();
+                }
+            }
+            else {
+                // Check for direct query parameters (fallback)
+                const queryParams = this.route.snapshot.queryParams;
+                const programId = queryParams['programId'] || queryParams['acabrn_class_program_id_acacpm'];
+                if (programId) {
+                    this.programId.set(programId);
+                    console.log('🏢 Program Class ID from query params:', programId);
+                    console.log('🏢 Will filter branches by acabrn_class_program_id_acacpm:', programId);
+                    this.loadBranches();
+                }
+                else {
+                    // Load all branches if no program ID is provided
+                    console.log('🏢 No program class ID provided, loading all branches');
+                    this.loadBranches();
+                }
+            }
+        });
+    }
+    /**
+     * Load branches from API
+     */
+    loadBranches() {
+        this.loading.set(true);
+        this.error.set(null);
+        const payload = {
+            pagination: true,
+            pageIndex: 0,
+            pageSize: 10,
+            acabrn_class_program_id_acacpm: this.programId()
+        };
+        // Add program class ID filter if available
+        const currentProgramId = this.programId();
+        if (currentProgramId) {
+            // Filter branches by program class ID using acabrn_class_program_id_acacpm field
+            console.log('🏢 Filtering branches by acabrn_class_program_id_acacpm:', currentProgramId);
+        }
+        else {
+            console.log('🏢 No program class ID filter applied, loading all branches');
+        }
+        this.classProgramBranchService.getClassProgramBranchList(payload)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                console.log('✅ Branches loaded:', response);
+                if (response?.success && response.data) {
+                    this.branches.set(response.data);
+                    this.totalCount.set(response.total || 0);
+                    this.updateGridData();
+                }
+                else {
+                    this.error.set('Failed to load branches');
+                    this.notificationService.error('Failed to load branches');
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('❌ Error loading branches:', error);
+                this.error.set('Failed to load branches');
+                this.loading.set(false);
+                this.notificationService.error('Failed to load branches');
+            }
+        });
+    }
+    /**
+     * Update grid data
+     */
+    updateGridData() {
+        this.gridConfig.update(config => ({
+            ...config,
+            data: this.branches()
+        }));
+    }
+    /**
+     * Handle grid events
+     */
+    onGridEvent(event) {
+        console.log('Grid Event:', event);
+        switch (event.type) {
+            case 'refresh':
+                this.onRefresh();
+                break;
+            case 'pageChange':
+                this.onPageChange(event.data);
+                break;
+            case 'search':
+                this.onSearch(event.data);
+                break;
+            case 'rowReorder':
+                this.onRowReorder(event.data);
+                break;
+        }
+    }
+    /**
+     * Handle refresh
+     */
+    onRefresh() {
+        this.loadBranches();
+    }
+    /**
+     * Handle page change
+     */
+    onPageChange(event) {
+        console.log('Page change:', event);
+        // Implement pagination logic here
+    }
+    /**
+     * Handle search
+     */
+    onSearch(event) {
+        console.log('Search:', event);
+        // Implement search logic here
+    }
+    /**
+     * Handle row reorder (drag and drop)
+     */
+    onRowReorder(event) {
+        console.log('Row reorder:', event);
+        if (event && event.newOrder) {
+            // Update the sequence order based on the new drag and drop order
+            this.updateSequenceOrder(event.newOrder);
+        }
+    }
+    /**
+     * Update sequence order for branches
+     */
+    updateSequenceOrder(branches) {
+        // Update sequence numbers based on new order
+        const updatedBranches = branches.map((branch, index) => ({
+            ...branch,
+            acabrn_sequence: index + 1
+        }));
+        // Update local state
+        this.branches.set(updatedBranches);
+        this.updateGridData();
+        // TODO: Implement API call to update sequence order on server
+        // This would typically be a bulk update API call
+        console.log('Updated sequence order:', updatedBranches.map(b => ({ id: b._id, sequence: b.acabrn_sequence })));
+        this.notificationService.success('Sequence order updated successfully');
+    }
+    /**
+     * Navigate to create branch
+     */
+    onCreateBranch() {
+        const currentProgramId = this.programId();
+        if (currentProgramId) {
+            // Use generateStringFromObject to pass programId as route parameter
+            const queryParams = generateStringFromObject({ programId: currentProgramId });
+            this.router.navigate(['/control-panel/program_specialization/create', queryParams]);
+        }
+        else {
+            // No program ID, navigate to create without parameters
+            this.router.navigate(['/control-panel/program_specialization/create']);
+        }
+    }
+    /**
+     * Navigate to view branch
+     */
+    onViewBranch(branch) {
+        if (branch._id) {
+            const currentProgramId = this.programId();
+            const queryParams = generateStringFromObject({ acabrn_id: branch._id });
+            // Add programId as query parameter if available
+            const navigationExtras = {};
+            if (currentProgramId) {
+                navigationExtras.queryParams = { programId: currentProgramId };
+            }
+            this.router.navigate(['/control-panel/program_specialization/view', queryParams], navigationExtras);
+        }
+    }
+    /**
+     * Navigate to edit branch
+     */
+    onEditBranch(branch) {
+        if (branch._id) {
+            const currentProgramId = this.programId();
+            const queryParams = generateStringFromObject({ acabrn_id: branch._id });
+            this.router.navigate(['/control-panel/program_specialization/edit', queryParams]);
+        }
+    }
+    /**
+     * Navigate to manage term for branch
+     */
+    onManageTerm(branch) {
+        if (branch._id) {
+            const currentProgramId = this.programId();
+            const queryParams = generateStringFromObject({
+                acabrn_id: branch._id,
+                acacpm_id: currentProgramId
+            });
+            // Navigate to term management page
+            this.router.navigate(['/control-panel/program-term-management', queryParams]);
+        }
+    }
+    /**
+     * Get dropdown items for branch actions
+     */
+    getBranchActionDropdownItems(branch) {
+        return [
+            {
+                id: 'view',
+                label: 'View',
+                icon: 'visibility'
+            },
+            {
+                id: 'edit',
+                label: 'Edit',
+                icon: 'edit'
+            },
+            {
+                id: 'manage-term',
+                label: 'Manage Term',
+                icon: 'school'
+            },
+            {
+                id: 'toggle-status',
+                label: branch.acabrn_isactive ? 'Deactivate' : 'Activate',
+                icon: branch.acabrn_isactive ? 'block' : 'check_circle'
+            },
+            {
+                id: 'toggle-lock',
+                label: branch.acabrn_islocked ? 'Unlock' : 'Lock',
+                icon: branch.acabrn_islocked ? 'lock_open' : 'lock'
+            },
+            {
+                id: 'delete',
+                label: 'Delete',
+                icon: 'delete',
+            }
+        ];
+    }
+    /**
+     * Handle dropdown item click
+     */
+    onDropdownItemClick(item, branch) {
+        switch (item.id) {
+            case 'view':
+                this.onViewBranch(branch);
+                break;
+            case 'edit':
+                this.onEditBranch(branch);
+                break;
+            case 'manage-term':
+                this.onManageTerm(branch);
+                break;
+            case 'toggle-status':
+                this.toggleBranchStatus(branch);
+                break;
+            case 'toggle-lock':
+                this.toggleBranchLock(branch);
+                break;
+            case 'delete':
+                this.deleteBranch(branch);
+                break;
+        }
+    }
+    /**
+     * Toggle branch status
+     */
+    toggleBranchStatus(branch) {
+        if (!branch._id)
+            return;
+        const action = branch.acabrn_isactive ? 'deactivate' : 'activate';
+        this.confirmationService.ask({
+            title: `${action.charAt(0).toUpperCase() + action.slice(1)} Branch`,
+            message: `Are you sure you want to ${action} this branch?`,
+            confirmText: action.charAt(0).toUpperCase() + action.slice(1),
+            cancelText: 'Cancel',
+            type: 'warning'
+        }).then((confirmed) => {
+            if (confirmed) {
+                const payload = {
+                    acabrn_id: branch._id
+                };
+                this.classProgramBranchService.toggleClassProgramBranchStatus(payload)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: (response) => {
+                        if (response?.success) {
+                            this.notificationService.success(`Branch ${action}d successfully`);
+                            this.loadBranches();
+                        }
+                        else {
+                            this.notificationService.error(`Failed to ${action} branch`);
+                        }
+                    },
+                    error: (error) => {
+                        console.error('❌ Error toggling branch status:', error);
+                        this.notificationService.error(`Failed to ${action} branch`);
+                    }
+                });
+            }
+        });
+    }
+    /**
+     * Toggle branch lock
+     */
+    toggleBranchLock(branch) {
+        if (!branch._id)
+            return;
+        const action = branch.acabrn_islocked ? 'unlock' : 'lock';
+        this.confirmationService.ask({
+            title: `${action.charAt(0).toUpperCase() + action.slice(1)} Branch`,
+            message: `Are you sure you want to ${action} this branch?`,
+            confirmText: action.charAt(0).toUpperCase() + action.slice(1),
+            cancelText: 'Cancel',
+            type: 'warning'
+        }).then((confirmed) => {
+            if (confirmed) {
+                const payload = {
+                    acabrn_id: branch._id
+                };
+                this.classProgramBranchService.toggleClassProgramBranchLock(payload)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: (response) => {
+                        if (response?.success) {
+                            this.notificationService.success(`Branch ${action}ed successfully`);
+                            this.loadBranches();
+                        }
+                        else {
+                            this.notificationService.error(`Failed to ${action} branch`);
+                        }
+                    },
+                    error: (error) => {
+                        console.error('❌ Error toggling branch lock:', error);
+                        this.notificationService.error(`Failed to ${action} branch`);
+                    }
+                });
+            }
+        });
+    }
+    /**
+     * Delete branch
+     */
+    deleteBranch(branch) {
+        if (!branch._id)
+            return;
+        this.confirmationService.ask({
+            title: 'Delete Branch',
+            message: `Are you sure you want to delete "${branch.acabrn_name}"? This action cannot be undone.`,
+            confirmText: 'Delete',
+            cancelText: 'Cancel',
+            type: 'danger'
+        }).then((confirmed) => {
+            if (confirmed) {
+                const payload = {
+                    acabrn_id: branch._id
+                };
+                this.classProgramBranchService.deleteClassProgramBranch(payload)
+                    .pipe(takeUntilDestroyed(this.destroyRef))
+                    .subscribe({
+                    next: (response) => {
+                        if (response?.success) {
+                            this.notificationService.success('Branch deleted successfully');
+                            this.loadBranches();
+                        }
+                        else {
+                            this.notificationService.error('Failed to delete branch');
+                        }
+                    },
+                    error: (error) => {
+                        console.error('❌ Error deleting branch:', error);
+                        this.notificationService.error('Failed to delete branch');
+                    }
+                });
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytClassProgramBranchListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.1.7", type: CideLytClassProgramBranchListComponent, isStandalone: true, selector: "cide-academics-class-program-branch-list", viewQueries: [{ propertyName: "dragHandleRendererTemplate", first: true, predicate: ["dragHandleRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "classProgramRendererTemplate", first: true, predicate: ["classProgramRendererTemplate"], descendants: true, isSignal: true }, { propertyName: "actionsDropdownRendererTemplate", first: true, predicate: ["actionsDropdownRendererTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Class Program Branch Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Header Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div\r\n        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        <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\">account_tree</cide-ele-icon>\r\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Class Program Branch Management</h5>\r\n        </div>\r\n        <div\r\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n          <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"onCreateBranch()\">\r\n            Create Branch\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Data Grid Section -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-p-0\">\r\n      <cide-ele-data-grid\r\n        [config]=\"gridConfig()\"\r\n        [templateRenderers]=\"templateRenderers()\"\r\n        (gridEvent)=\"onGridEvent($event)\">\r\n      </cide-ele-data-grid>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #dragHandleRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-justify-center tw-cursor-move drag-handle\" title=\"Drag to reorder\">\r\n    <cide-ele-icon name=\"drag_indicator\" class=\"tw-w-4 tw-h-4 tw-text-gray-400 hover:tw-text-gray-600\"></cide-ele-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #classProgramRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-text-sm tw-text-gray-900\">\r\n    {{ row.acabrn_class_program_id_acacpm?.acacpm_alise_title || 'N/A' }}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-relative tw-inline-block\">\r\n    <cide-ele-dropdown \r\n      [items]=\"getBranchActionDropdownItems(row)\" \r\n      (itemClick)=\"onDropdownItemClick($event, row)\">\r\n    </cide-ele-dropdown>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [".drag-handle{cursor:move}.drag-handle:hover{background-color:#0000000d;border-radius:4px}.tw-table tbody tr{cursor:pointer}.tw-table tbody tr:hover{background-color:#00000005}.tw-table tbody tr.selected{background-color:#3b82f61a}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: CideEleDataGridComponent, selector: "cide-ele-data-grid", inputs: ["config", "templateRenderers", "customFormatters", "actionHandlers", "serverSidePagination", "totalServerItems", "currentServerPage", "currentServerPageSize", "dragDropEnabled"], outputs: ["gridEvent"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideEleDropdownComponent, selector: "cide-ele-dropdown", inputs: ["items", "config", "triggerTemplate", "menuTemplate"], outputs: ["itemClick", "dropdownToggle"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytClassProgramBranchListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-academics-class-program-branch-list', standalone: true, imports: [
+                        CommonModule,
+                        CideEleDataGridComponent,
+                        CideIconComponent,
+                        CideEleButtonComponent,
+                        CideEleDropdownComponent
+                    ], template: "<!-- Class Program Branch Container -->\r\n<div class=\"tw-table tw-w-full tw-h-full\">\r\n\r\n  <!-- Header Section -->\r\n  <div class=\"tw-table-row tw-h-0\">\r\n    <div class=\"tw-table-cell tw-px-6 tw-py-3 tw-border-b tw-border-gray-200 tw-bg-gray-50\">\r\n      <div\r\n        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        <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\">account_tree</cide-ele-icon>\r\n          <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">Class Program Branch Management</h5>\r\n        </div>\r\n        <div\r\n          class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n          <button cideEleButton variant=\"primary\" size=\"sm\" leftIcon=\"add\" (click)=\"onCreateBranch()\">\r\n            Create Branch\r\n          </button>\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Data Grid Section -->\r\n  <div class=\"tw-table-row\">\r\n    <div class=\"tw-table-cell tw-p-0\">\r\n      <cide-ele-data-grid\r\n        [config]=\"gridConfig()\"\r\n        [templateRenderers]=\"templateRenderers()\"\r\n        (gridEvent)=\"onGridEvent($event)\">\r\n      </cide-ele-data-grid>\r\n    </div>\r\n  </div>\r\n</div>\r\n\r\n<!-- Template Renderers -->\r\n<ng-template #dragHandleRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-flex tw-justify-center tw-cursor-move drag-handle\" title=\"Drag to reorder\">\r\n    <cide-ele-icon name=\"drag_indicator\" class=\"tw-w-4 tw-h-4 tw-text-gray-400 hover:tw-text-gray-600\"></cide-ele-icon>\r\n  </div>\r\n</ng-template>\r\n\r\n\r\n<ng-template #classProgramRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-text-sm tw-text-gray-900\">\r\n    {{ row.acabrn_class_program_id_acacpm?.acacpm_alise_title || 'N/A' }}\r\n  </div>\r\n</ng-template>\r\n\r\n<ng-template #actionsDropdownRendererTemplate let-row=\"row\">\r\n  <div class=\"tw-relative tw-inline-block\">\r\n    <cide-ele-dropdown \r\n      [items]=\"getBranchActionDropdownItems(row)\" \r\n      (itemClick)=\"onDropdownItemClick($event, row)\">\r\n    </cide-ele-dropdown>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [".drag-handle{cursor:move}.drag-handle:hover{background-color:#0000000d;border-radius:4px}.tw-table tbody tr{cursor:pointer}.tw-table tbody tr:hover{background-color:#00000005}.tw-table tbody tr.selected{background-color:#3b82f61a}\n"] }]
+        }] });
+
+var classProgramBranchList_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CideLytClassProgramBranchListComponent: CideLytClassProgramBranchListComponent
+});
+
+class CideLytProgramClassService {
+    http = inject(HttpClient);
+    /**
+     * Get list of program classes
+     * @param payload - Query parameters for filtering/pagination
+     * @returns Observable of program class list response
+     */
+    getProgramClassList(payload) {
+        console.log("Program Class List Payload:", payload);
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramMaster,
+            query
+        ]);
+        return this.http.get(url);
+    }
+    /**
+     * Get program class by ID
+     * @param payload - Program class ID payload
+     * @returns Observable of program class data
+     */
+    getProgramClassById(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramMaster,
+            'byId',
+            query
+        ]);
+        return this.http.get(url);
+    }
+    /**
+     * Create or update program class
+     * @param data - Program class data to save
+     * @returns Observable of the save response
+     */
+    saveProgramClass(data) {
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramMaster
+        ]);
+        return this.http.post(url, data);
+    }
+    /**
+     * Delete program class
+     * @param payload - Program class delete payload
+     * @returns Observable of the delete response
+     */
+    deleteProgramClass(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramMaster,
+            query
+        ]);
+        return this.http.delete(url);
+    }
+    /**
+     * Toggle program class status (active/inactive)
+     * @param payload - Program class toggle status payload
+     * @returns Observable of the toggle status response
+     */
+    toggleProgramClassStatus(payload) {
+        const query = generateStringFromObject(payload);
+        const url = cidePath.join([
+            hostManagerRoutesUrl.cideSuiteHost,
+            academicsRoutesUrl.module,
+            academicsRoutesUrl.classProgramMaster,
+            'toggleStatus',
+            query
+        ]);
+        return this.http.put(url, {});
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytProgramClassService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytProgramClassService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytProgramClassService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class CideLytClassProgramBranchFormComponent {
+    // Dependency injection
+    destroyRef = inject(DestroyRef);
+    fb = inject(FormBuilder);
+    router = inject(Router);
+    route = inject(ActivatedRoute);
+    location = inject(Location);
+    appState = inject(AppStateHelperService);
+    notificationService = inject(NotificationService);
+    confirmationService = inject(ConfirmationService);
+    classProgramBranchService = inject(CideLytClassProgramBranchService);
+    programClassService = inject(CideLytProgramClassService);
+    // Form and state management
+    branchForm;
+    loading = signal(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
+    error = signal(null, ...(ngDevMode ? [{ debugName: "error" }] : []));
+    isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
+    isViewMode = signal(false, ...(ngDevMode ? [{ debugName: "isViewMode" }] : []));
+    branchId = signal(null, ...(ngDevMode ? [{ debugName: "branchId" }] : []));
+    // Data signals
+    programClasses = signal([], ...(ngDevMode ? [{ debugName: "programClasses" }] : []));
+    constructor() {
+        this.branchForm = this.fb.group({
+            acabrn_name: ['', [Validators.required, Validators.minLength(2)]],
+            acabrn_code: ['', [Validators.required, Validators.minLength(2)]],
+            acabrn_sequence: [0, [Validators.required, Validators.min(0)]],
+            acabrn_class_program_id_acacpm: ['', [Validators.required]],
+            acabrn_isactive: [true],
+            acabrn_islocked: [false]
+        });
+    }
+    ngOnInit() {
+        console.log('🏢 Class Program Branch Form Component initialized');
+        this.initializeComponent();
+    }
+    ngOnDestroy() {
+        console.log('🏢 Class Program Branch Form Component destroyed');
+    }
+    /**
+     * Initialize component
+     */
+    initializeComponent() {
+        this.loadMasterData();
+        this.checkRouteParams();
+    }
+    /**
+     * Check route parameters to determine mode
+     */
+    checkRouteParams() {
+        const url = this.router.url;
+        const queryParams = this.route.snapshot.queryParams;
+        const routeParams = this.route.snapshot.params;
+        // Check for program ID from route parameters or query parameters
+        // Also check route parameters for programId (for create operations)
+        let programId = {};
+        if (routeParams['query']) {
+            const params = generateObjectFromString(routeParams['query']);
+            console.log('🏢 Params:generateObjectFromString', params);
+            programId = params?.programId;
+        }
+        if (programId) {
+            console.log('🏢 Program ID from route:', programId);
+            // Pre-select the program in the form
+            this.branchForm.patchValue({
+                acabrn_class_program_id_acacpm: programId
+            });
+        }
+        if (url.includes('/view/')) {
+            this.isViewMode.set(true);
+            this.loadBranchForView(queryParams);
+        }
+        else if (url.includes('/edit/')) {
+            this.isEditMode.set(true);
+            this.loadBranchForEdit(queryParams);
+        }
+        else {
+            // Create mode
+            this.isEditMode.set(false);
+            this.isViewMode.set(false);
+        }
+    }
+    /**
+     * Load master data
+     */
+    loadMasterData() {
+        console.log('🔄 Loading master data for Class Program Branch Form...');
+        // Load program classes
+        this.loadProgramClasses();
+    }
+    /**
+     * Load program classes
+     */
+    loadProgramClasses() {
+        this.programClassService.getProgramClassList({ pagination: false })
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                console.log('✅ Program classes loaded:', response);
+                if (response?.success && response.data) {
+                    this.programClasses.set(response.data);
+                }
+                else {
+                    console.warn('⚠️ No program class data received');
+                    this.programClasses.set([]);
+                }
+            },
+            error: (error) => {
+                console.error('❌ Error loading program classes:', error);
+                this.programClasses.set([]);
+            }
+        });
+    }
+    /**
+     * Load branch for viewing
+     */
+    loadBranchForView(queryParams) {
+        const routeParams = this.route.snapshot.params;
+        // Check query parameters first
+        let params = generateObjectFromString(routeParams['query']);
+        console.log('🏢 Params:generateObjectFromString', params);
+        if (params?.acabrn_id) {
+            console.log('🏢 Branch ID for view:', params.acabrn_id);
+            this.branchId.set(params.acabrn_id);
+            this.loadBranchData(params.acabrn_id, true);
+        }
+        else {
+            console.error('❌ No branch ID found in route parameters');
+            this.error.set('Branch ID not found in route parameters');
+        }
+    }
+    /**
+     * Load branch for editing
+     */
+    loadBranchForEdit(queryParams) {
+        const routeParams = this.route.snapshot.params;
+        // Check query parameters first
+        let params = generateObjectFromString(routeParams['query']);
+        console.log('🏢 Params:generateObjectFromString', params);
+        if (params?.acabrn_id) {
+            console.log('🏢 Branch ID for edit:', params.acabrn_id);
+            this.branchId.set(params.acabrn_id);
+            this.loadBranchData(params.acabrn_id, false);
+        }
+        else {
+            console.error('❌ No branch ID found in route parameters');
+            this.error.set('Branch ID not found in route parameters');
+        }
+    }
+    /**
+     * Load branch data
+     */
+    loadBranchData(branchId, isViewMode) {
+        this.loading.set(true);
+        this.error.set(null);
+        const payload = {
+            acabrn_id: branchId
+        };
+        this.classProgramBranchService.getClassProgramBranchById(payload)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response?.success && response.data) {
+                    const branchData = response.data;
+                    // Populate form with branch data
+                    this.branchForm.patchValue({
+                        acabrn_name: branchData.acabrn_name,
+                        acabrn_code: branchData.acabrn_code,
+                        acabrn_sequence: branchData.acabrn_sequence,
+                        acabrn_class_program_id_acacpm: branchData.acabrn_class_program_id_acacpm?._id,
+                        acabrn_isactive: (branchData).acabrn_isactive,
+                        acabrn_islocked: branchData.acabrn_islocked
+                    });
+                    // Disable form if in view mode
+                    if (isViewMode) {
+                        this.branchForm.disable();
+                    }
+                    this.notificationService.success('Branch data loaded successfully.');
+                }
+                else {
+                    this.error.set('Failed to load branch data.');
+                    this.notificationService.error('Failed to load branch data.');
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('❌ Error loading branch data:', error);
+                this.error.set('Failed to load branch data. Please try again.');
+                this.loading.set(false);
+                this.notificationService.error('Failed to load branch data. Please try again.');
+            }
+        });
+    }
+    /**
+     * Get form title
+     */
+    get formTitle() {
+        if (this.isViewMode())
+            return 'View Program Specialization';
+        if (this.isEditMode())
+            return 'Edit Program Specialization';
+        return 'Create Program Specialization';
+    }
+    /**
+     * Get submit button text
+     */
+    get submitButtonText() {
+        if (this.isViewMode())
+            return 'Close';
+        if (this.isEditMode())
+            return 'Update Branch';
+        return 'Create Branch';
+    }
+    /**
+     * Handle form submission
+     */
+    onSubmit() {
+        if (this.isViewMode()) {
+            this.location.back();
+            return;
+        }
+        if (this.branchForm.invalid) {
+            this.notificationService.error('Please fill in all required fields correctly.');
+            return;
+        }
+        const formData = this.branchForm.value;
+        const payload = {
+            _id: this.branchId() || undefined,
+            acabrn_name: formData.acabrn_name,
+            acabrn_code: formData.acabrn_code,
+            acabrn_sequence: formData.acabrn_sequence,
+            acabrn_class_program_id_acacpm: formData.acabrn_class_program_id_acacpm,
+            acabrn_isactive: formData.acabrn_isactive,
+            acabrn_islocked: formData.acabrn_islocked
+        };
+        this.saveBranch(payload);
+    }
+    /**
+     * Save branch
+     */
+    saveBranch(payload) {
+        this.loading.set(true);
+        this.classProgramBranchService.saveClassProgramBranch(payload)
+            .pipe(takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+            next: (response) => {
+                if (response?.success) {
+                    const action = this.isEditMode() ? 'updated' : 'created';
+                    this.notificationService.success(`Branch has been ${action} successfully.`);
+                    this.location.back();
+                }
+                else {
+                    this.notificationService.error(response?.message || 'Failed to save branch.');
+                }
+                this.loading.set(false);
+            },
+            error: (error) => {
+                console.error('❌ Error saving branch:', error);
+                this.notificationService.error('Failed to save branch. Please try again.');
+                this.loading.set(false);
+            }
+        });
+    }
+    /**
+     * Handle cancel
+     */
+    onCancel() {
+        if (this.branchForm.dirty && !this.isViewMode()) {
+            this.confirmationService.ask({
+                title: 'Discard Changes',
+                message: 'You have unsaved changes. Are you sure you want to discard them?',
+                confirmText: 'Discard',
+                cancelText: 'Keep Editing',
+                type: 'warning'
+            }).then((confirmed) => {
+                if (confirmed) {
+                    this.location.back();
+                }
+            });
+        }
+        else {
+            this.location.back();
+        }
+    }
+    /**
+     * Reset form to initial state
+     */
+    resetForm() {
+        this.branchForm.reset();
+        this.branchForm.patchValue({
+            acabrn_isactive: true,
+            acabrn_islocked: false,
+            acabrn_sequence: 0
+        });
+        this.notificationService.info('Form has been reset to initial values.');
+    }
+    /**
+     * Toggle active status on card click
+     */
+    onActiveCardClick() {
+        if (this.isViewMode())
+            return;
+        const currentValue = this.branchForm.get('acabrn_isactive')?.value;
+        this.branchForm.patchValue({
+            acabrn_isactive: !currentValue
+        });
+    }
+    /**
+     * Toggle locked status on card click
+     */
+    onLockedCardClick() {
+        if (this.isViewMode())
+            return;
+        const currentValue = this.branchForm.get('acabrn_islocked')?.value;
+        this.branchForm.patchValue({
+            acabrn_islocked: !currentValue
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytClassProgramBranchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.7", type: CideLytClassProgramBranchFormComponent, isStandalone: true, selector: "cide-academics-class-program-branch-form", ngImport: i0, template: "<!-- \r\n  CLASS PROGRAM BRANCH FORM COMPONENT\r\n  \r\n  Enterprise-Level Styling with Tailwind CSS\r\n  Features: Responsive grids, proper typography, enhanced user experience\r\n-->\r\n\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"branchForm\"\r\n    [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <!-- Simple 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\">account_tree</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">\r\n              {{ formTitle }}\r\n            </h5>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n            <!-- Back button or other actions can be added here if needed -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\r\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n          \r\n          <!-- Error Message -->\r\n          @if (error()) {\r\n            <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n              <div class=\"tw-flex tw-items-start\">\r\n                <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n                <div class=\"tw-ml-3\">\r\n                  <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n                  <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Basic Branch Information -->\r\n          <div class=\"tw-space-y-6\">\r\n            <!-- Class Program Selection -->\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-1 tw-gap-6\">\r\n              <div class=\"tw-space-y-2\">\r\n                <label class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Class Program *</label>\r\n                <cide-ele-select \r\n                  formControlName=\"acabrn_class_program_id_acacpm\" \r\n                  placeholder=\"Select class program\"\r\n                  [disabled]=\"isViewMode()\" \r\n                  valueKey=\"_id\" \r\n                  labelKey=\"acacpm_alise_title\" \r\n                  [options]=\"programClasses()\">\r\n                </cide-ele-select>\r\n                <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">\r\n                  <cide-ele-icon name=\"info\" class=\"tw-w-4 tw-h-4 tw-mr-1\"></cide-ele-icon>\r\n                  Sequence will be automatically assigned based on the order in the listing\r\n                </p>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Branch Name and Code -->\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <div>\r\n                <cide-ele-input \r\n                  label=\"Branch Name *\" \r\n                  formControlName=\"acabrn_name\"\r\n                  placeholder=\"e.g., Computer Science Branch\" \r\n                  size=\"md\" \r\n                  leadingIcon=\"account_tree\"\r\n                  [disabled]=\"isViewMode()\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <div>\r\n                <cide-ele-input \r\n                  label=\"Branch Code *\" \r\n                  formControlName=\"acabrn_code\"\r\n                  placeholder=\"e.g., CS\" \r\n                  size=\"md\" \r\n                  leadingIcon=\"code\"\r\n                  [disabled]=\"isViewMode()\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Status and Lock Options -->\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 tw-cursor-pointer hover:tw-bg-gray-100 tw-transition-colors tw-duration-200\"\r\n                   [class.tw-cursor-not-allowed]=\"isViewMode()\"\r\n                   [class.tw-opacity-60]=\"isViewMode()\"\r\n                   (click)=\"onActiveCardClick()\">\r\n                <cide-ele-input formControlName=\"acabrn_isactive\" type=\"checkbox\" size=\"md\" [disabled]=\"isViewMode()\">\r\n                </cide-ele-input>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                  <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\r\n                  <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this branch</span>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 tw-cursor-pointer hover:tw-bg-gray-100 tw-transition-colors tw-duration-200\"\r\n                   [class.tw-cursor-not-allowed]=\"isViewMode()\"\r\n                   [class.tw-opacity-60]=\"isViewMode()\"\r\n                   (click)=\"onLockedCardClick()\">\r\n                <cide-ele-input formControlName=\"acabrn_islocked\" type=\"checkbox\" size=\"md\" [disabled]=\"isViewMode()\">\r\n                </cide-ele-input>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                  <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Locked</span>\r\n                  <span class=\"tw-text-xs tw-text-gray-500\">Prevent modifications</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Actions -->\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-2 tw-bg-gray-50 tw-border-t tw-border-gray-200\">\r\n        <div class=\"tw-flex tw-justify-end tw-gap-4\">\r\n          <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\r\n            [disabled]=\"loading()\">\r\n            Reset Form\r\n          </button>\r\n\r\n          <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"close\"\r\n            [disabled]=\"loading()\">\r\n            {{ isViewMode() ? 'Close' : 'Cancel' }}\r\n          </button>\r\n\r\n          @if (!isViewMode()) {\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || branchForm.invalid\"\r\n              [loading]=\"loading()\" leftIcon=\"save\">\r\n              {{ submitButtonText }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: CideInputComponent, selector: "cide-ele-input", inputs: ["fill", "label", "labelHide", "disabled", "clearInput", "labelPlacement", "labelDir", "placeholder", "leadingIcon", "trailingIcon", "helperText", "helperTextCollapse", "hideHelperAndErrorText", "errorText", "maxlength", "minlength", "required", "autocapitalize", "autocomplete", "type", "width", "id", "ngModel", "option", "min", "max", "size"], outputs: ["ngModelChange"] }, { kind: "component", type: CideEleButtonComponent, selector: "button[cideEleButton], a[cideEleButton]", inputs: ["label", "variant", "size", "type", "shape", "elevation", "disabled", "id", "loading", "fullWidth", "leftIcon", "rightIcon", "customClass", "tooltip", "ariaLabel", "testId", "routerLink", "routerExtras", "preventDoubleClick", "animated"], outputs: ["btnClick", "doubleClick"] }, { kind: "component", type: CideIconComponent, selector: "cide-ele-icon", inputs: ["size", "type", "toolTip"] }, { kind: "component", type: CideSelectComponent, selector: "cide-ele-select", inputs: ["label", "labelHide", "placeholder", "helperText", "errorText", "required", "disabled", "id", "ngModel", "size", "fill", "labelPlacement", "labelDir", "leadingIcon", "trailingIcon", "clearInput", "options", "multiple", "searchable", "showSearchInput", "loading", "valueKey", "labelKey"], outputs: ["ngModelChange", "change", "searchChange"] }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.7", ngImport: i0, type: CideLytClassProgramBranchFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'cide-academics-class-program-branch-form', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        CideInputComponent,
+                        CideEleButtonComponent,
+                        CideIconComponent,
+                        CideSelectComponent,
+                    ], template: "<!-- \r\n  CLASS PROGRAM BRANCH FORM COMPONENT\r\n  \r\n  Enterprise-Level Styling with Tailwind CSS\r\n  Features: Responsive grids, proper typography, enhanced user experience\r\n-->\r\n\r\n<div class=\"tw-w-full tw-h-full\">\r\n  <form class=\"tw-w-full tw-table tw-h-full tw-bg-transparent\" [formGroup]=\"branchForm\"\r\n    [class.tw-opacity-60]=\"loading()\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <!-- Simple 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\">account_tree</cide-ele-icon>\r\n            <h5 class=\"tw-text-base tw-font-medium tw-text-gray-900 tw-m-0\">\r\n              {{ formTitle }}\r\n            </h5>\r\n          </div>\r\n\r\n          <!-- Actions -->\r\n          <div class=\"tw-flex tw-flex-col sm:tw-flex-row tw-items-start sm:tw-items-center tw-space-y-3 sm:tw-space-y-0 sm:tw-space-x-3\">\r\n            <!-- Back button or other actions can be added here if needed -->\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Content -->\r\n    <div class=\"tw-table-row\">\r\n      <div class=\"tw-table-cell tw-w-full tw-px-6 tw-py-6\">\r\n        <div class=\"tw-transition-opacity tw-duration-300\" [class.tw-opacity-60]=\"loading()\">\r\n          \r\n          <!-- Error Message -->\r\n          @if (error()) {\r\n            <div class=\"tw-mb-6 tw-p-4 tw-bg-red-50 tw-border tw-border-red-200 tw-rounded-md\">\r\n              <div class=\"tw-flex tw-items-start\">\r\n                <cide-ele-icon name=\"error\" class=\"tw-text-red-400 tw-w-5 tw-h-5 tw-mt-0.5 tw-flex-shrink-0\"></cide-ele-icon>\r\n                <div class=\"tw-ml-3\">\r\n                  <h3 class=\"tw-text-sm tw-font-medium tw-text-red-800 tw-m-0\">Error</h3>\r\n                  <p class=\"tw-text-sm tw-text-red-700 tw-mt-1 tw-m-0\">{{ error() }}</p>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          }\r\n\r\n          <!-- Basic Branch Information -->\r\n          <div class=\"tw-space-y-6\">\r\n            <!-- Class Program Selection -->\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-1 tw-gap-6\">\r\n              <div class=\"tw-space-y-2\">\r\n                <label class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Class Program *</label>\r\n                <cide-ele-select \r\n                  formControlName=\"acabrn_class_program_id_acacpm\" \r\n                  placeholder=\"Select class program\"\r\n                  [disabled]=\"isViewMode()\" \r\n                  valueKey=\"_id\" \r\n                  labelKey=\"acacpm_alise_title\" \r\n                  [options]=\"programClasses()\">\r\n                </cide-ele-select>\r\n                <p class=\"tw-text-xs tw-text-gray-500 tw-mt-1\">\r\n                  <cide-ele-icon name=\"info\" class=\"tw-w-4 tw-h-4 tw-mr-1\"></cide-ele-icon>\r\n                  Sequence will be automatically assigned based on the order in the listing\r\n                </p>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Branch Name and Code -->\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <div>\r\n                <cide-ele-input \r\n                  label=\"Branch Name *\" \r\n                  formControlName=\"acabrn_name\"\r\n                  placeholder=\"e.g., Computer Science Branch\" \r\n                  size=\"md\" \r\n                  leadingIcon=\"account_tree\"\r\n                  [disabled]=\"isViewMode()\">\r\n                </cide-ele-input>\r\n              </div>\r\n\r\n              <div>\r\n                <cide-ele-input \r\n                  label=\"Branch Code *\" \r\n                  formControlName=\"acabrn_code\"\r\n                  placeholder=\"e.g., CS\" \r\n                  size=\"md\" \r\n                  leadingIcon=\"code\"\r\n                  [disabled]=\"isViewMode()\">\r\n                </cide-ele-input>\r\n              </div>\r\n            </div>\r\n\r\n            <!-- Status and Lock Options -->\r\n            <div class=\"tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-6\">\r\n              <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 tw-cursor-pointer hover:tw-bg-gray-100 tw-transition-colors tw-duration-200\"\r\n                   [class.tw-cursor-not-allowed]=\"isViewMode()\"\r\n                   [class.tw-opacity-60]=\"isViewMode()\"\r\n                   (click)=\"onActiveCardClick()\">\r\n                <cide-ele-input formControlName=\"acabrn_isactive\" type=\"checkbox\" size=\"md\" [disabled]=\"isViewMode()\">\r\n                </cide-ele-input>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                  <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Active</span>\r\n                  <span class=\"tw-text-xs tw-text-gray-500\">Enable/disable this branch</span>\r\n                </div>\r\n              </div>\r\n\r\n              <div class=\"tw-flex tw-items-center tw-gap-3 tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-border tw-border-gray-200 tw-cursor-pointer hover:tw-bg-gray-100 tw-transition-colors tw-duration-200\"\r\n                   [class.tw-cursor-not-allowed]=\"isViewMode()\"\r\n                   [class.tw-opacity-60]=\"isViewMode()\"\r\n                   (click)=\"onLockedCardClick()\">\r\n                <cide-ele-input formControlName=\"acabrn_islocked\" type=\"checkbox\" size=\"md\" [disabled]=\"isViewMode()\">\r\n                </cide-ele-input>\r\n                <div class=\"tw-flex tw-flex-col\">\r\n                  <span class=\"tw-text-sm tw-font-medium tw-text-gray-700\">Locked</span>\r\n                  <span class=\"tw-text-xs tw-text-gray-500\">Prevent modifications</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- Form Actions -->\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-2 tw-bg-gray-50 tw-border-t tw-border-gray-200\">\r\n        <div class=\"tw-flex tw-justify-end tw-gap-4\">\r\n          <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"resetForm()\" leftIcon=\"refresh\"\r\n            [disabled]=\"loading()\">\r\n            Reset Form\r\n          </button>\r\n\r\n          <button cideEleButton type=\"button\" variant=\"secondary\" (click)=\"onCancel()\" leftIcon=\"close\"\r\n            [disabled]=\"loading()\">\r\n            {{ isViewMode() ? 'Close' : 'Cancel' }}\r\n          </button>\r\n\r\n          @if (!isViewMode()) {\r\n            <button cideEleButton type=\"submit\" variant=\"primary\" [disabled]=\"loading() || branchForm.invalid\"\r\n              [loading]=\"loading()\" leftIcon=\"save\">\r\n              {{ submitButtonText }}\r\n            </button>\r\n          }\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </form>\r\n</div>\r\n\r\n" }]
+        }], ctorParameters: () => [] });
+
+var classProgramBranchForm_component = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    CideLytClassProgramBranchFormComponent: CideLytClassProgramBranchFormComponent
+});
+
+// Class Program Branch Management Module
+// This module provides components and services for managing class program branches
+// Components
+
+/*
+ * Public API Surface of cloud-ide-academics
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { AcademicYearCreateComponent as A, CideLytProgramClassService as C, CideLytAcademicYearService as a, CideLytClassProgramBranchService as b, academicsRoutes as c, AcademicYearListComponent as d, CideLytAcademicYearMappingService as e, CideLytClassProgramBranchListComponent as f, CideLytClassProgramBranchFormComponent as g };
+//# sourceMappingURL=cloud-ide-academics-cloud-ide-academics-Czexp3pk.mjs.map