tailjng 0.1.6 → 0.1.7

package/src/lib/components/table/table-crud-complete/complete-crud-table.component.ts

@@ -1,13 +1,26 @@
 import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output, TemplateRef } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
-import { LucideAngularModule } from 'lucide-angular';
 import { Params } from '@angular/router';
-import { DomSanitizer, SafeUrl, SafeHtml } from '@angular/platform-browser';
-import { animate, state, style, transition, trigger } from '@angular/animations';
+import { DomSanitizer, SafeHtml, SafeUrl } from '@angular/platform-browser';
 import { forkJoin } from 'rxjs';
 
-import { EnableBoolean, FilterButton, FilterSelect, JAlertToastService, JConverterCrudService, JDialogShared, JFormShared, JGenericCrudService, JIconsService, JTransformService, JUploadFilterService, LoadingState, LoadingStates, OptionsTable, SortDirection, TableColumn } from 'tailjng';
+import {
+  EnableBoolean,
+  FilterButton,
+  FilterSelect,
+  JAlertToastService,
+  JConverterCrudService,
+  JDialogShared,
+  JFormShared,
+  JGenericCrudService,
+  JTransformService,
+  JUploadFilterService,
+  LoadingState,
+  LoadingStates,
+  OptionsTable,
+  SortDirection,
+  TableColumn} from 'tailjng';
 
 import { JCompletePaginatorComponent } from '../../paginator/paginator-complete/complete-paginator.component';
 import { JCompleteFilterComponent } from '../../filter/filter-complete/complete-filter.component';
@@ -19,68 +32,150 @@ import { JDropdownSelectComponent } from '../../select/select-dropdown/dropdown-
 import { JInputComponent } from '../../input/input/input.component';
 import { JImageViewerComponent } from '../../viewer/viewer-image/image-viewer.component';
 import { JOptionsCoachMenuComponent } from '../../menu/options-coach-menu/options-coach-menu.component';
-
+import { CRUD_TABLE_ANIMATIONS } from './complete-crud-table.animations';
+import type {
+  CrudTableEquivalenceConfigs,
+  CrudTableEquivalenceMaps,
+  CrudTableGroupTableConfig} from './complete-crud-table.types';
+import { Icons } from '../../.config/icons/icons.lucide';
+import { JIconComponent } from '../../icon/icon.component';
+import {
+  applyColumnDefaults,
+  applyNestedBooleanToggle,
+  bindFilterSelectHandlers,
+  buildCrudTableQueryParams,
+  buildRowNgClass,
+  cacheExpandedRowKeys,
+  calculateStartIndex,
+  calculateTotalPages,
+  countVisibleColumns,
+  deepCopy,
+  formatCellDisplayValue,
+  generatePaginationPages,
+  getColumnColStyles,
+  getEquivalenceData as resolveEquivalenceData,
+  getGroupCollapsedHeaderColspan,
+  getGroupExpandColspan,
+  getGroupMobileStudentHeaderColumns,
+  getGroupMobileStudentIndex,
+  getGroupMobileStudentTitle,
+  getMobileHeaderColumns,
+  getMobileMainDescription,
+  getMobileMainTitle,
+  hasEquivalenceConfig,
+  isBooleanValue,
+  isDateValue,
+  mergeOptionNgClasses,
+  normalizeGroupMetaTitles,
+  parseCellEditValue,
+  resolveCheckboxToggleTarget,
+  resolveMainEndpoint,
+  resolveNextSortState,
+  resolveOptionDisabled,
+  resolveOptionIcon,
+  resolveOptionTooltip,
+  resolveOptionVisible,
+  restoreExpandedRowsAfterLoad,
+  setNestedValue,
+  shouldStopCellClickPropagation,
+  syncCheckedFilterSelects,
+  trackGroupRowKey} from './complete-crud-table.util';
+
+export type {
+  BuildCrudTableQueryParamsOptions,
+  CrudTableCheckboxToggleTarget,
+  CrudTableEquivalenceConfig,
+  CrudTableEquivalenceConfigs,
+  CrudTableEquivalenceData,
+  CrudTableEquivalenceMaps,
+  CrudTableEquivalenceOption,
+  CrudTableGetCellValueFn,
+  CrudTableGroupTableConfig,
+  CrudTableRowColorSemantic} from './complete-crud-table.types';
+export {
+  applyColumnDefaults,
+  applyNestedBooleanToggle,
+  bindFilterSelectHandlers,
+  buildCrudTableQueryParams,
+  buildRowNgClass,
+  cacheExpandedRowKeys,
+  calculateStartIndex,
+  calculateTotalPages,
+  collectSearchFieldKeys,
+  countVisibleColumns,
+  CRUD_TABLE_ROW_COLOR_CLASS_MAP,
+  deepCopy,
+  formatCellDisplayValue,
+  generatePaginationPages,
+  getColumnColStyles,
+  getEquivalenceData,
+  getExpandedRowCacheKey,
+  getGroupCollapsedHeaderColspan,
+  getGroupExpandColspan,
+  getGroupMobileStudentHeaderColumns,
+  getGroupMobileStudentIndex,
+  getGroupMobileStudentTitle,
+  getMobileHeaderColumns,
+  getMobileMainDescription,
+  getMobileMainTitle,
+  hasEquivalenceConfig,
+  isBooleanValue,
+  isDateValue,
+  mergeOptionNgClasses,
+  normalizeGroupMetaTitles,
+  parseCellEditValue,
+  resolveCheckboxToggleTarget,
+  resolveMainEndpoint,
+  resolveNextSortState,
+  resolveOptionDisabled,
+  resolveOptionIcon,
+  resolveOptionTooltip,
+  resolveOptionVisible,
+  restoreExpandedRowsAfterLoad,
+  setNestedValue,
+  shouldStopCellClickPropagation,
+  syncCheckedFilterSelects,
+  trackGroupRowKey} from './complete-crud-table.util';
+export { CRUD_TABLE_ANIMATIONS } from './complete-crud-table.animations';
+
+/**
+ * Full CRUD data table: filters, pagination, sorting, inline edit, expand rows, group mode.
+ *
+ * Install: `npx tailjng add table-crud-complete`
+ *
+ * Heavy logic lives in `complete-crud-table.util.ts`; expand grid in `expand-grid/`.
+ */
 @Component({
   selector: 'JCompleteCrudTable',
   standalone: true,
-  imports: [CommonModule, FormsModule, JCompletePaginatorComponent, JCompleteFilterComponent, LucideAngularModule, JButtonComponent, JInputCheckboxComponent, JDialogComponent, JImageViewerComponent, JDropdownSelectComponent, JInputComponent, JOptionsCoachMenuComponent],
+  imports: [
+    CommonModule,
+    FormsModule,
+    JCompletePaginatorComponent,
+    JCompleteFilterComponent,
+    JIconComponent,
+    JButtonComponent,
+    JInputCheckboxComponent,
+    JDialogComponent,
+    JImageViewerComponent,
+    JDropdownSelectComponent,
+    JInputComponent,
+    JOptionsCoachMenuComponent,
+  ],
   templateUrl: './complete-crud-table.component.html',
   styleUrl: './complete-crud-table.component.scss',
-  animations: [
-    trigger('slideToggle', [
-      state('collapsed', style({
-        height: '0',
-        opacity: 0,
-      })),
-      state('expanded', style({
-        height: '*',
-        opacity: 1,
-      })),
-      transition('collapsed <=> expanded', [
-        animate('0.3s ease-in-out')
-      ])
-    ]),
-    trigger('groupSlideToggle', [
-      state('collapsed', style({
-        height: '0',
-        opacity: 0,
-        overflow: 'hidden',
-      })),
-      state('expanded', style({
-        height: '*',
-        opacity: 1,
-        overflow: 'visible',
-      })),
-      transition('collapsed => expanded', [
-        animate('380ms cubic-bezier(0.4, 0, 0.2, 1)'),
-      ]),
-      transition('expanded => collapsed', [
-        animate('300ms cubic-bezier(0.4, 0, 0.6, 1)'),
-      ]),
-    ]),
-    trigger('groupRowReveal', [
-      transition(':enter', [
-        style({ opacity: 0, transform: 'translateY(-4px)' }),
-        animate(
-          '280ms cubic-bezier(0.4, 0, 0.2, 1)',
-          style({ opacity: 1, transform: 'translateY(0)' }),
-        ),
-      ]),
-      transition(':leave', [
-        animate(
-          '220ms cubic-bezier(0.4, 0, 0.6, 1)',
-          style({ opacity: 0, transform: 'translateY(-4px)' }),
-        ),
-      ]),
-    ]),
-  ]
-})
+  animations: CRUD_TABLE_ANIMATIONS})
 export class JCompleteCrudTableComponent implements OnInit {
+  readonly Icons = Icons;
 
   Math = Math;
 
-  // Charge status
+  // =====================================================
+  // Loading
+  // =====================================================
+
   @Output() dataLoaded = new EventEmitter<void>();
+
   loadingStates: LoadingStates = {
     initialLoad: 'idle',
     search: 'idle',
@@ -89,131 +184,173 @@ export class JCompleteCrudTableComponent implements OnInit {
     sort: 'idle',
     aditionalButtons: {},
     checked: 'idle',
-    action: 'idle',
-  };
+    action: 'idle'};
 
-  @Input() urlBase: string = '';
+  // =====================================================
+  // Data / endpoint
+  // =====================================================
+
+  @Input() urlBase = '';
   @Input() endpoint!: string;
   mainEndpoint!: string;
+
+  @Input() staticData: any[] = [];
   @Input() columns: TableColumn<any>[] = [];
-  @Input() isNumbering: boolean = true;
-  @Input() defaultFilters: { [key: string]: any } = {};
+
+  data: any[] = [];
+
+  @Output() loadedData = new EventEmitter<any[]>();
+  @Output() loadedParams = new EventEmitter<any>();
+
+  displayData: any[] = [];
+  metadata: any = {};
+
+  @Input() defaultFilters: Record<string, unknown> = {};
+
+  // =====================================================
+  // Table chrome
+  // =====================================================
+
+  @Input() isNumbering = true;
   @Input() isPaginator = true;
   @Input() isFilter = true;
   @Input() isbackground = false;
   @Input() isSearch = true;
   @Input() isEyeColumn = true;
-  @Input() hideRowCondition?: (row: any) => boolean
-
-  data: any[] = [];
+  @Input() hideRowCondition?: (row: any) => boolean;
 
-  @Output() loadedData: EventEmitter<any[]> = new EventEmitter<any[]>();
-  @Output() loadedParams: EventEmitter<any> = new EventEmitter<any>();
+  // =====================================================
+  // Options column
+  // =====================================================
 
-  // Type options
   @Input() optionsType: 'button' | 'dropdown' = 'button';
-  @Input() isOptions: boolean = true;
+  @Input() isOptions = true;
+
+  // =====================================================
+  // Expand rows
+  // =====================================================
 
-  // Expansion
   expandTemplate?: (row: any) => string;
-  expandedRows: Set<any> = new Set();
+  expandedRows = new Set<any>();
 
+  // =====================================================
   // Paginator
+  // =====================================================
+
   currentPage = 1;
-  @Input() isItemsPerPage: boolean = true;
+
+  @Input() isItemsPerPage = true;
   @Input() itemsPerPageOptions: number[] = [10, 25, 50, 100];
   @Input() itemsPerPage = this.itemsPerPageOptions[0];
+
   totalItems = 0;
+  pages: number[] = [];
+
+  get startIndex(): number {
+    return calculateStartIndex(this.currentPage, this.itemsPerPage);
+  }
 
+  get totalPages(): number {
+    return calculateTotalPages(this.totalItems, this.itemsPerPage);
+  }
+
+  get params(): Params {
+    return this.getQueryParams();
+  }
+
+  // =====================================================
   // Sorting
+  // =====================================================
+
   sortColumn: string | null = null;
   sortDirection: SortDirection = 'none';
   sortingColumn: string | null = null;
 
-  // Search
-  searchQuery = '';
-  @Input() searchPlaceholder = 'Buscar...';
-
-  // Filters
-  filters: any = {};
-
   @Input() initialSortColumn: string | null = null;
   @Input() initialSortDirection: SortDirection = 'asc';
 
-  // Data and metadata
-  displayData: any[] = [];
-  metadata: any = {};
+  // =====================================================
+  // Search / filters
+  // =====================================================
 
-  // Pagination display
-  pages: number[] = [];
+  searchQuery = '';
+  @Input() searchPlaceholder = 'Buscar...';
 
-  // Check
-  @Input() checked: boolean = false;
-  @Input() checkedColumn: string = 'id_status';
-  @Input() checkedValues: any[][] = [[true], [false]];
-  @Input() checkedTitles: string[] = ["Activos", "Inactivos"];
-  isChecked!: boolean;
-  titleChecked!: string;
+  filters: Record<string, unknown> = {};
 
-  // Calculated properties for display
-  get startIndex(): number {
-    return (this.currentPage - 1) * this.itemsPerPage;
-  }
+  @Input() filtersButton: FilterButton[] = [];
+  @Input() filtersSelect: FilterSelect[] = [];
 
-  get totalPages(): number {
-    return Math.ceil(this.totalItems / this.itemsPerPage);
-  }
+  // =====================================================
+  // Active / inactive toggle
+  // =====================================================
 
-  get params(): Params {
-    return this.getQueryParams();
-  }
+  @Input() checked = false;
+  @Input() checkedColumn = 'id_status';
+  @Input() checkedValues: any[][] = [[true], [false]];
+  @Input() checkedTitles = ['Activos', 'Inactivos'];
 
-  // Button configuration
-  @Input() filtersButton: FilterButton[] = [];
+  isChecked!: boolean;
+  titleChecked!: string;
 
-  // Table filters
-  @Input() filtersSelect: FilterSelect[] = [];
+  // =====================================================
+  // Row options
+  // =====================================================
 
-  // Button options
   @Input() optionsTable: OptionsTable[] = [];
+  selectOptions: Record<string, { key: unknown; label: string }[]> = {};
 
-  // Group table configuration
-  @Input() isGroupTable: boolean = false;
-  @Input() groupTable: { [key: string]: any } = {};
-  @Output() loadDataGroup = new EventEmitter<{ data: any[], metadata: any }>();
+  // =====================================================
+  // Group table
+  // =====================================================
+
+  @Input() isGroupTable = false;
+  @Input() groupTable: CrudTableGroupTableConfig = {};
+  @Output() loadDataGroup = new EventEmitter<{ data: any[]; metadata: any }>();
   @Input() groupsTemplate!: TemplateRef<any>;
 
-  // Variables for image dialog
+  // =====================================================
+  // Image dialog
+  // =====================================================
+
   keyDialog!: string;
   mediaDialog!: SafeUrl | string;
   titleDialog!: string;
 
-  // Edit record in table
+  // =====================================================
+  // Inline row editing
+  // =====================================================
+
   editingRowItem: any = null;
   originalRowItem: any = null;
-  @Input() equivalenceConfigs: { [key: string]: { keyColumnSearch: string; keyReturn: string; keyAlternate?: string; optional?: boolean } } = {};
-  @Input() equivalences: any = {};
+
+  @Input() equivalenceConfigs: CrudTableEquivalenceConfigs = {};
+  @Input() equivalences: CrudTableEquivalenceMaps = {};
+
+  // =====================================================
+  // Mobile nested expand
+  // =====================================================
+
+  mobileInnerExpandedRows = new Set<any>();
 
   constructor(
     public readonly form: JFormShared,
     public readonly dialog: JDialogShared,
     public readonly transformService: JTransformService,
-    public readonly iconsService: JIconsService,
     private readonly sanitizer: DomSanitizer,
     private readonly genericService: JGenericCrudService,
     private readonly alertToastService: JAlertToastService,
     private readonly converterService: JConverterCrudService,
     private readonly uploadFilterService: JUploadFilterService,
-    private cd: ChangeDetectorRef
-  ) { }
+    private readonly cd: ChangeDetectorRef,
+  ) {}
 
-  ngOnInit() {
-    this.mainEndpoint = this.endpoint.split('/')[0] ?? this.endpoint;
+  ngOnInit(): void {
+    this.mainEndpoint = resolveMainEndpoint(this.endpoint);
     this.isChecked = this.checkedValues[0][0];
     this.titleChecked = this.checkedTitles[0];
     this.columnDefaults();
 
-    // Apply initial sort if passed from parent
     if (this.initialSortColumn) {
       this.sortColumn = this.initialSortColumn;
       this.sortDirection = this.initialSortDirection || 'asc';
@@ -221,296 +358,239 @@ export class JCompleteCrudTableComponent implements OnInit {
 
     this.loadData();
     this.overrideFilterEvents();
-
-    // Normalize buttons
     this.optionsTable = this.normalizeOptionsTable(this.optionsTable);
   }
 
-  // Override filter events to update table filters
-  overrideFilterEvents() {
-    for (const filter of this.filtersSelect) {
-      if (filter.type === 'dropdown' || filter.type === 'searchable') {
-        const key = filter.optionValue ?? 'value';
-        const deepKey = filter.deep ? `${filter.deep}.${key}` : key;
-
-        const originalOnSelected = filter.onSelected;
-
-        filter.onSelected = (value: any) => {
-          const selectedValue = value?.[key] ?? value;
-
-          if (selectedValue === null || selectedValue === undefined) {
-            delete this.filters[deepKey];
-          } else {
-            this.filters[deepKey] = selectedValue;
-          }
-
-          if (typeof originalOnSelected === 'function') {
-            originalOnSelected(value);
-          }
-
-          this.currentPage = 1;
-          this.loadData('search');
-        };
-      }
-    }
+  /** Wraps filter dropdown handlers to sync `this.filters` and reload. */
+  overrideFilterEvents(): void {
+    bindFilterSelectHandlers(this.filtersSelect, this.filters, () => {
+      this.currentPage = 1;
+      this.loadData('search');
+    });
   }
 
-
-  // After file upload
+  /** Reload after file upload from filter actions. */
   onAfterUpload(): void {
     this.loadData('initialLoad');
   }
 
   // =====================================================
-  // Get data
+  // Data loading
   // =====================================================
 
-  // Load data from server
-  loadData(loadingType: keyof LoadingStates = 'initialLoad', onFinally?: () => void) {
+  /**
+   * Loads rows from API or `staticData`, preserving expanded row state when possible.
+   * @param loadingType Which loading indicator to show.
+   * @param onFinally Optional callback after the request completes.
+   */
+  loadData(loadingType: keyof LoadingStates = 'initialLoad', onFinally?: () => void): void {
     this.setLoadingState(loadingType, 'loading');
 
     const params = this.getQueryParams();
+    const expandedKeys = cacheExpandedRowKeys(this.expandedRows, this.isGroupTable);
 
-    // Store references to expanded rows before updating
-    const expandedItemsCache = new Map();
-    this.expandedRows.forEach(item => {
-      // Use a unique identifier for each row (title + description for groups)
-      const key = this.isGroupTable ?
-        `${item.title}-${item.description}` :
-        (item.id || JSON.stringify(item));
-      expandedItemsCache.set(key, true);
-    });
-
-    // Simulating API wait
-    // setTimeout(() => {
-
-    // Emit search parameters
     this.loadedParams.emit(params);
 
-    this.genericService.findAll<any>({ urlBase: this.urlBase, endpoint: this.endpoint, params }).subscribe({
-      next: (response) => {
+    if (this.staticData.length > 0) {
+      this.data = this.staticData.map((item) => ({ ...item }));
+      this.totalItems = this.data.length;
+      this.loadedData.emit(this.data);
+      this.updateDisplayData();
+      this.generatePagination();
+      this.setLoadingState(loadingType, 'success');
+      this.dataLoaded.emit();
 
-        this.data = response.data[this.mainEndpoint] ?? [];
-
-        // Restore expanded state
-        if (expandedItemsCache.size > 0) {
-          this.expandedRows.clear();
-          this.data.forEach(item => {
-            const key = this.isGroupTable ?
-              `${item.title}-${item.description}` :
-              (item.id || JSON.stringify(item));
-            if (expandedItemsCache.has(key)) {
-              this.expandedRows.add(item);
-            }
-          });
-        }
+      if (loadingType === 'sort') {
+        this.sortingColumn = null;
+      }
+
+      onFinally?.();
+      this.cd.detectChanges();
+      return;
+    }
 
-        this.data.forEach((item: any) => {
-          if (item.meta?.page && item.title) {
-            item.meta.page.title = item.title;
+    this.genericService
+      .findAll<any>({ urlBase: this.urlBase, endpoint: this.endpoint, params })
+      .subscribe({
+        next: (response) => {
+          this.data = response.data[this.mainEndpoint] ?? [];
+
+          if (expandedKeys.size > 0) {
+            this.expandedRows = restoreExpandedRowsAfterLoad(
+              this.data,
+              expandedKeys,
+              this.isGroupTable,
+            );
           }
-        });
 
-        this.loadedData.emit(this.data);
+          normalizeGroupMetaTitles(this.data);
+          this.loadedData.emit(this.data);
 
-        this.loadDataGroup.emit({
-          data: this.data,
-          metadata: response.meta,
-        });
+          this.loadDataGroup.emit({
+            data: this.data,
+            metadata: response.meta});
 
-        if (response.meta?.page) {
-          this.totalItems = response.meta.page.totalRecords;
-          this.currentPage = response.meta.page.currentPage;
-        } else {
-          this.totalItems = this.data.length;
-        }
+          if (response.meta?.page) {
+            this.totalItems = response.meta.page.totalRecords;
+            this.currentPage = response.meta.page.currentPage;
+          } else {
+            this.totalItems = this.data.length;
+          }
 
-        if (response.meta?.sort) {
-          this.sortColumn = response.meta.sort.by;
-          this.sortDirection = response.meta.sort.order.toLowerCase() as SortDirection;
-        }
+          if (response.meta?.sort) {
+            this.sortColumn = response.meta.sort.by;
+            this.sortDirection = response.meta.sort.order.toLowerCase() as SortDirection;
+          }
 
-        this.updateDisplayData();
-        this.generatePagination();
-        this.setLoadingState(loadingType, 'success');
-        this.cd.detectChanges();
-      },
-      error: (error) => {
-        console.error('Error fetching data:', error);
-        this.setLoadingState(loadingType, 'error');
-      }
-    }).add(() => {
-      this.dataLoaded.emit();
-      if (loadingType === 'sort') {
-        this.sortingColumn = null;
-      }
+          this.updateDisplayData();
+          this.generatePagination();
+          this.setLoadingState(loadingType, 'success');
+          this.cd.detectChanges();
+        },
+        error: (error) => {
+          console.error('Error fetching data:', error);
+          this.setLoadingState(loadingType, 'error');
+        }})
+      .add(() => {
+        this.dataLoaded.emit();
+
+        if (loadingType === 'sort') {
+          this.sortingColumn = null;
+        }
 
-      if (onFinally) {
-        onFinally();
-      }
-    });
-    // }, 2000);
+        onFinally?.();
+      });
   }
 
-  // Update the data displayed in the table
-  updateDisplayData() {
+  /** Copies `data` into `displayData` (hook point for future client-side transforms). */
+  updateDisplayData(): void {
     this.displayData = this.data;
   }
 
   // =====================================================
-  // Table options
+  // Table options normalization
   // =====================================================
 
-  selectOptions: { [key: string]: { key: any, label: string }[] } = {};
-
-  // Normalize table options
+  /** Enriches `editRow` options with equivalence maps and dynamic icons. */
   normalizeOptionsTable(buttons: OptionsTable[]): OptionsTable[] {
     return buttons.map((button) => {
+      if (button.type !== 'editRow') {
+        return button;
+      }
 
-      // If it's a filter button
-      if (button.type === 'editRow') {
-
-        this.equivalenceConfigs = button?.searchListUpload ?? {};
-
-        // Process selected IDs
-        // In the normalizeOptionsTable method, replace this part:
-        forkJoin(this.uploadFilterService.getIdsSelectedData(button)).subscribe({
-          next: (results) => {
-            // Initialize the equivalences object if it doesn't exist
-            if (!this.equivalences) this.equivalences = {};
+      this.equivalenceConfigs = button?.searchListUpload ?? {};
 
-            results.forEach((result, index) => {
-              const { data, mappingInfo } = result;
-              const keyReturn = mappingInfo.keyReturn;
-              const keyAlternate = mappingInfo.keyAlternate;
-              const keyColumnSearch = mappingInfo.keyColumnSearch;
+      forkJoin(this.uploadFilterService.getIdsSelectedData(button)).subscribe({
+        next: (results) => {
+          if (!this.equivalences) {
+            this.equivalences = {};
+          }
 
-              if (!keyReturn || !keyColumnSearch) return;
+          results.forEach((result) => {
+            const { data, mappingInfo } = result;
+            const keyReturn = mappingInfo.keyReturn;
+            const keyAlternate = mappingInfo.keyAlternate;
+            const keyColumnSearch = mappingInfo.keyColumnSearch;
 
-              // Initialize the equivalences structure for this keyReturn
-              if (!this.equivalences[keyReturn]) this.equivalences[keyReturn] = {};
+            if (!keyReturn || !keyColumnSearch) {
+              return;
+            }
 
+            if (!this.equivalences[keyReturn]) {
+              this.equivalences[keyReturn] = {};
+            }
 
-              data.forEach((item: any) => {
-                const idKey = keyAlternate ?? keyReturn;
-                const searchKey = keyColumnSearch.includes(".") ? keyColumnSearch.split(".").pop()! : keyColumnSearch;
+            data.forEach((item: any) => {
+              const idKey = keyAlternate ?? keyReturn;
+              const searchKey = keyColumnSearch.includes('.')
+                ? keyColumnSearch.split('.').pop()!
+                : keyColumnSearch;
 
-                this.equivalences[keyReturn][item[idKey]] = item[searchKey];
-              });
+              this.equivalences[keyReturn][item[idKey]] = item[searchKey];
             });
-
+          });
+        }});
+
+      return {
+        ...button,
+        icon: (data: any) =>
+          this.editingRowItem === data
+            ? Icons.Pencil
+            : Icons.PencilLine,
+        tooltip: (data: any) =>
+          this.optionsType === 'button'
+            ? this.editingRowItem === data
+              ? 'Guardar edición'
+              : 'Editar en tabla'
+            : '',
+        text: (data: any) =>
+          this.optionsType === 'dropdown'
+            ? this.editingRowItem === data
+              ? 'Guardar edición'
+              : 'Editar en tabla'
+            : '',
+        clicked: (data) => {
+          if (
+            this.editingRowItem &&
+            this.editingRowItem[`id_${this.mainEndpoint}`] === data[`id_${this.mainEndpoint}`]
+          ) {
+            this.onSaveRow(data);
+          } else {
+            this.onEditRow(data);
           }
-        });
-
-        return {
-          ...button,
-          icon: (data: any) => this.editingRowItem === data ? this.iconsService.icons.editRow : this.iconsService.icons.editRowLine,
-          tooltip: (data: any) => this.optionsType === 'button' ? (this.editingRowItem === data ? 'Guardar edición' : 'Editar en tabla') : '',
-          text: (data: any) => this.optionsType === 'dropdown' ? (this.editingRowItem === data ? 'Guardar edición' : 'Editar en tabla') : '',
-          clicked: (data) => {
-            if (this.editingRowItem && this.editingRowItem[`id_${this.mainEndpoint}`] === data[`id_${this.mainEndpoint}`]) {
-              this.onSaveRow(data);
-            } else {
-              this.onEditRow(data);
-            }
-          },
-          ngClass: (data: any) => this.editingRowItem === data ? 'success_secondary' : 'warning_secondary',
-        };
-      }
-
-      return button;
+        },
+        ngClass: (data: any) =>
+          this.editingRowItem === data ? 'success_secondary' : 'warning_secondary'};
     });
   }
 
   // =====================================================
-  // Change state in boolean fields
+  // Boolean checkbox column
   // =====================================================
-  onCheckboxChange(item: any, column: TableColumn<any>) {
-
-    let key = column.key;
-    let recordId: any;
-    let endpoint = this.mainEndpoint;
-
-    // Verificar si es key compuesta
-    if (key.includes('.')) {
-      const parts = key.split('.');
-      const parent = parts[0];
-      const lastKey = parts[parts.length - 1];
-
-      key = lastKey;
-
-      // El id corresponde a la tabla padre
-      recordId = item[`id_${parent}`];
-
-      // El endpoint también debe ser la tabla padre
-      endpoint = parent;
-    } else {
-      // key simple
-      recordId = item[`id_${this.mainEndpoint}`];
-    }
 
-    // Obtener el valor actual
+  /** Toggles a boolean field via API (supports nested composite keys). */
+  onCheckboxChange(item: any, column: TableColumn<any>): void {
+    const { key, recordId, endpoint } = resolveCheckboxToggleTarget(
+      item,
+      column,
+      this.mainEndpoint,
+    );
     const currentValue = this.getValue(item, column);
 
     const formData: EnableBoolean<any> = {
-      key: key,
+      key,
       value: currentValue,
-      values: [currentValue, !currentValue]
-    };
+      values: [currentValue, !currentValue]};
 
-    // Llamar al servicio
     this.genericService.toggle<any>({ endpoint, id: recordId, data: formData }).subscribe({
       next: (response) => {
-        // Actualizar localmente el valor
-        if (column.key.includes('.')) {
-          const parts = column.key.split('.');
-          const parent = parts[0];
-          const lastKey = parts[parts.length - 1];
-
-          // Actualizar objeto anidado
-          item[parent] = { ...item[parent], [lastKey]: !currentValue };
-        } else {
-          item[key] = !currentValue;
-        }
+        applyNestedBooleanToggle(item, column.key, currentValue as boolean);
 
         this.alertToastService.AlertToast({
-          type: "success",
-          title: "Registro actualizado!",
-          description: response.message,
-        });
-      }
-    });
+          type: 'success',
+          title: 'Registro actualizado!',
+          description: response.message});
+      }});
   }
 
-  // Change active or inactive
+  /** Switches active/inactive filter without clearing other filters. */
   checkActiveInactive(isChecked: boolean): void {
     this.isChecked = !isChecked;
 
     const index = this.isChecked ? 0 : 1;
     this.titleChecked = this.checkedTitles[index];
-
-    // ONLY update the id_status property without touching the other filters
     this.filters[this.checkedColumn] = this.checkedValues[index];
-
-    this.filtersSelect = this.filtersSelect.map(filter => {
-      if ('optionValue' in filter && filter.optionValue === this.checkedColumn) {
-        return {
-          ...filter,
-          defaultFilters: {
-            ...(filter.hasOwnProperty('defaultFilters') ? (filter as any).defaultFilters : {}),
-            [this.checkedColumn]: this.filters[this.checkedColumn]
-          },
-          selected: null
-        };
-      }
-      return filter;
-    });
+    this.filtersSelect = syncCheckedFilterSelects(
+      this.filtersSelect,
+      this.checkedColumn,
+      this.filters[this.checkedColumn],
+    );
 
     this.currentPage = 1;
     this.loadData('checked');
   }
 
-  // Remove filters
+  /** Clears filters and reloads (used by filter bar clear action). */
   onClearFilters(buttonType: string): void {
     this.setAditionalButtonLoading(buttonType);
 
@@ -523,60 +603,24 @@ export class JCompleteCrudTableComponent implements OnInit {
   // Columns
   // =====================================================
 
-  // Default column values
-  columnDefaults() {
-    // Default values for columns
-    this.columns.forEach(column => {
-      if (column.visible === undefined) {
-        column.visible = true;
-      }
-
-      if (column.sortable === undefined) {
-        column.sortable = true;
-      }
-
-      if (column.isSearchable === undefined) {
-        column.isSearchable = true;
-      }
-    });
+  columnDefaults(): void {
+    applyColumnDefaults(this.columns);
   }
 
-  // Get the count of visible columns for colspan in empty state
   getVisibleColumnsCount(): number {
-    return this.columns.filter(col => col.visible).length;
+    return countVisibleColumns(this.columns);
   }
 
-  /** En tablas `table-layout: fixed`, el ancho debe ir en `<col>`; minWidth solo en `<td>` no aplica. */
   getColumnColStyles(column: TableColumn<any>): Record<string, string> | undefined {
-    if (!column.styles) {
-      return undefined;
-    }
-
-    const styles = { ...column.styles };
-
-    if (styles['minWidth'] && !styles['width']) {
-      styles['width'] = styles['minWidth'];
-    }
-
-    return styles;
+    return getColumnColStyles(column);
   }
 
   getGroupExpandColspan(): number {
-    let colspan = this.getVisibleColumnsCount();
-
-    if (this.isNumbering) {
-      colspan += 1;
-    }
-
-    if (this.isOptions) {
-      colspan += 1;
-    }
-
-    return colspan;
+    return getGroupExpandColspan(this.columns, this.isNumbering, this.isOptions);
   }
 
   getGroupCollapsedHeaderColspan(): number {
-    return 1 + this.getVisibleColumnsCount() + (this.isOptions ? 1 : 0);
+    return getGroupCollapsedHeaderColspan(this.columns, this.isOptions);
   }
 
   getGroupExpansionState(item: any): 'expanded' | 'collapsed' {
@@ -584,20 +628,19 @@ export class JCompleteCrudTableComponent implements OnInit {
   }
 
   trackGroupRow(group: any, index: number): string | number {
-    return group?.id_student_course ?? group?.id ?? index;
+    return trackGroupRowKey(group, index);
   }
 
-  // Handle cell click events
-  handleCellClick(event: MouseEvent, row: any, column: TableColumn<any>) {
-    // If no onCellClick defined, do nothing
-    if (!column.onCellClick) return;
+  handleCellClick(event: MouseEvent, row: any, column: TableColumn<any>): void {
+    if (!column.onCellClick) {
+      return;
+    }
 
-    // If there is a clickable condition and it is not met, do nothing
-    if (column.isCellClickable && !column.isCellClickable(row)) return;
+    if (column.isCellClickable && !column.isCellClickable(row)) {
+      return;
+    }
 
-    // By default, we do NOT want the click to also toggleRow
-    const shouldStop = column.stopRowClickOnCellClick !== false; // default true
-    if (shouldStop) {
+    if (shouldStopCellClickPropagation(column)) {
       event.stopPropagation();
     }
 
@@ -606,136 +649,71 @@ export class JCompleteCrudTableComponent implements OnInit {
   }
 
   // =====================================================
-  // Data processing
+  // Cell values
   // =====================================================
 
-  // Get the cell value to identify a boolean field
   isBoolean(value: any): boolean {
-    return typeof value === 'boolean';
+    return isBooleanValue(value);
   }
 
-  // Get the cell value to identify a date field
   isDate(value: any): boolean {
-    return value instanceof Date || (typeof value === 'string' && !isNaN(Date.parse(value)));
+    return isDateValue(value);
   }
 
-  // MMethod to get the cell value dynamically
   getValue(item: any, column: TableColumn<any>, row = false): any {
-    let value: any;
-
-    // If a valueGetter exists, use it directly
-    if (typeof column.valueGetter === 'function') {
-      value = column.valueGetter(item);
-    } else {
-      // If not, look for the value by key (with support for nested keys)
-      const keys = column.key.split('.');
-      value = item;
-
-      for (const key of keys) {
-        if (value != null) {
-          value = value[key];
-        } else {
-          value = null;
-          break;
-        }
-      }
-    }
-
     if (row) {
-      // Transform the data
-      return this.converterService.parseData(value, column);
-    } else {
-
-      // If value is null or undefined, return 'S/N'
-      if (value === null || value === undefined) {
-        return 'S/N';
-      }
-
-      // If formatData returns nothing (unformatted value), return the original value
-      return this.converterService.formatData(value, column) ?? value;
+      return parseCellEditValue(item, column, this.converterService);
     }
+
+    return formatCellDisplayValue(item, column, this.converterService);
   }
 
   // =====================================================
-  // Search parameters
+  // Query params
   // =====================================================
 
-  // Get the query parameters for the data request
   getQueryParams(): Params {
-    const params: Params = this.genericService.params({
-      page: this.currentPage,
-      limit: this.itemsPerPage,
-      sort: {
-        column: this.sortColumn,
-        direction: this.sortDirection,
-      },
+    return buildCrudTableQueryParams(this.genericService, {
+      currentPage: this.currentPage,
+      itemsPerPage: this.itemsPerPage,
+      sortColumn: this.sortColumn,
+      sortDirection: this.sortDirection,
       filters: this.filters,
       defaultFilters: this.defaultFilters,
-    });
-
-    if (this.searchQuery?.trim()) {
-      const baseSearchKeys = this.columns.filter(col => col.isSearchable).map(col => col.key);
-      const extraSearchKeys = this.columns.flatMap(col => col.extraSearchFields || []);
-      const allSearchKeys = [...baseSearchKeys, ...extraSearchKeys];
-      params['search'] = this.searchQuery;
-      params['searchFields'] = allSearchKeys;
-    }
-
-    // Add group pagination if defined
-    if (this.isGroupTable && typeof this.groupTable['getGroupParams'] === 'function') {
-      Object.assign(params, this.groupTable['getGroupParams']());
-    }
-
-    return params;
+      searchQuery: this.searchQuery,
+      columns: this.columns,
+      isGroupTable: this.isGroupTable,
+      groupTable: this.groupTable});
   }
 
   // =====================================================
   // Sorting
   // =====================================================
 
-  // Column sorting
-  onSort(column: TableColumn<any>) {
-    // Prevent multiple simultaneous sort requests
-    if (this.isLoading('sort')) {
+  onSort(column: TableColumn<any>): void {
+    if (this.isLoading('sort') || !column.sortable) {
       return;
     }
 
-    if (!column.sortable) return;
-
-    // Save the column being sorted
     this.sortingColumn = column.key;
 
-    // Check if we are dealing with the same column as the last sort
-    const currentSortKey = this.converterService.getSortKey(this.sortColumn);
-    const columnSortKey = this.converterService.getSortKey(column.key);
-
-    // Sort direction logic
-    if (currentSortKey === columnSortKey) {
-      // Toggle sort direction
-      if (this.sortDirection === 'asc') {
-        this.sortDirection = 'desc';
-      } else if (this.sortDirection === 'desc') {
-        this.sortDirection = 'none';
-      } else {
-        this.sortDirection = 'asc';
-      }
-    } else {
-      // If a new column is selected for sorting, start with ascending order
-      this.sortColumn = column.key;
-      this.sortDirection = 'asc';
-    }
+    const next = resolveNextSortState(
+      column,
+      this.sortColumn,
+      this.sortDirection,
+      (value) => this.converterService.getSortKey(value),
+    );
 
+    this.sortColumn = next.sortColumn;
+    this.sortDirection = next.sortDirection;
     this.loadData('sort');
   }
 
-  // Get the sort key
   getSortKey(value: any): string {
     return this.converterService.getSortKey(value);
   }
 
-  // Handle key press event for sorting
-  onSortKeyPress(event: KeyboardEvent, column: TableColumn<any>) {
-    // If a sort is already in progress, do not allow another
+  onSortKeyPress(event: KeyboardEvent, column: TableColumn<any>): void {
     if (this.isLoading('sort')) {
       return;
     }
@@ -747,146 +725,97 @@ export class JCompleteCrudTableComponent implements OnInit {
   }
 
   // =====================================================
-  // Search
+  // Search / pagination
   // =====================================================
 
-  // Search functionality
-  onSearch() {
+  onSearch(): void {
     this.currentPage = 1;
     this.loadData('search');
   }
 
-  // Items per page selector
-  onItemsPerPageChange() {
+  onItemsPerPageChange(): void {
     this.currentPage = 1;
     this.loadData('itemsPerPage');
   }
 
-  // =====================================================
-  // Paginator
-  // =====================================================
-
-  // Generate pagination numbers
-  generatePagination() {
+  generatePagination(): void {
     const totalPages = this.totalPages;
     const currentPage = this.currentPage;
-
-    // Show 3 pagination numbers
     const maxPagesToShow = 3;
     let startPage = Math.max(1, currentPage - Math.floor(maxPagesToShow / 2));
     let endPage = Math.min(totalPages, startPage + maxPagesToShow - 1);
 
-    // Adjust if we're near the end
     if (endPage - startPage + 1 < maxPagesToShow) {
       startPage = Math.max(1, endPage - maxPagesToShow + 1);
     }
 
-    this.pages = Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
+    this.pages = Array.from({ length: endPage - startPage + 1 }, (_, index) => startPage + index);
   }
 
-  // Paginator
-  handlePageChange(page: number) {
+  handlePageChange(page: number): void {
     this.currentPage = page;
     this.loadData('pagination');
   }
 
   // =====================================================
-  // Image Visualization
+  // Image dialog
   // =====================================================
 
-  // View receipt
-  showDialogImg(id: string, name: string, url: string) {
+  showDialogImg(id: string, name: string, url: string): void {
     this.keyDialog = id;
     this.titleDialog = name;
-
-    const finalUrl = url.trim();
-
-    this.mediaDialog = this.sanitizer.bypassSecurityTrustUrl(finalUrl);
+    this.mediaDialog = this.sanitizer.bypassSecurityTrustUrl(url.trim());
   }
 
   // =====================================================
-  // Options
+  // Row options
   // =====================================================
 
-  // MMethod to handle button click
   onButtonClick(button: OptionsTable, element: any): void {
-    // Executes the parent's action if defined
-    if (button.clicked) {
-      button.clicked(element);
-    }
+    button.clicked?.(element);
   }
 
-  // MMethod to get a tooltip
   getTooltip(tooltip: string | ((data?: any) => string), data: any): string {
-    if (typeof tooltip === 'function') {
-      return tooltip(data);
-    }
-    return tooltip ?? '';
+    return resolveOptionTooltip(tooltip, data);
   }
 
-  // MMethod to get an icon
-  getIcon(icon: ((data?: any) => any), data: any): any {
-    if (typeof icon === 'function') {
-      return icon(data);
-    }
-    return icon;
+  getIcon(icon: ((data?: any) => any) | undefined, data: any): any {
+    return resolveOptionIcon(icon, data);
   }
 
-  // Evaluate if a button is disabled
   getDisabled(option: OptionsTable, data: any): boolean {
-    if (typeof option.disabled === 'function') {
-      return option.disabled(data);
-    }
-    return !!option.disabled;
+    return resolveOptionDisabled(option, data);
   }
 
-  // Evaluate if a button is visible
   getIsVisible(option: OptionsTable, data: any): boolean {
-    if (typeof option.isVisible === 'function') {
-      return option.isVisible(data);
-    }
-    // If not defined, default is visible
-    return option.isVisible !== false;
+    return resolveOptionVisible(option, data);
   }
 
-  // Method to get a button's CSS class
-  mergeNgClasses(optionNgClass: ((data?: any) => any), data: any): any {
-    const baseClass = {
-      'min-w-auto p-[1px]! pl-[5px]! pr-[5px]!': true
-    };
-
-    let dynamicClass: any = {};
-    if (typeof optionNgClass === 'function') {
-      dynamicClass = optionNgClass(data);
-    } else {
-      dynamicClass = optionNgClass ?? {};
-    }
-
-    return {
-      ...baseClass,
-      ...(typeof dynamicClass === 'string' ? { [dynamicClass]: true } : dynamicClass)
-    };
+  mergeNgClasses(optionNgClass: ((data?: any) => any) | undefined, data: any): any {
+    return mergeOptionNgClasses(optionNgClass, data);
   }
 
   // =====================================================
-  // Parameters for loading
+  // Loading state
   // =====================================================
 
-  // MMethod to check if a specific state is loading
   isLoading(state: keyof LoadingStates): boolean {
     return this.loadingStates[state] === 'loading';
   }
 
-  // MMethod to check if any state is loading
   isAnyLoading(): boolean {
-    return Object.values(this.loadingStates).some(state => state === 'loading');
+    return Object.values(this.loadingStates).some((state) => state === 'loading');
   }
 
-  // MMethod to update a loading state
-  setLoadingState(state: keyof LoadingStates, value: LoadingState | { [buttonType: string]: LoadingState }): void {
+  setLoadingState(
+    state: keyof LoadingStates,
+    value: LoadingState | { [buttonType: string]: LoadingState },
+  ): void {
     if (state === 'aditionalButtons') {
       if (typeof value === 'string') {
-        console.warn(`No puedes asignar '${value}' directamente a aditionalButtons. Usa setAditionalButtonLoading en su lugar.`);
+        console.warn(
+          `No puedes asignar '${value}' directamente a aditionalButtons. Usa setAditionalButtonLoading en su lugar.`,
+        );
       } else {
         this.loadingStates.aditionalButtons = value;
       }
@@ -895,34 +824,29 @@ export class JCompleteCrudTableComponent implements OnInit {
     }
   }
 
-  // Activate loading
   setAditionalButtonLoading(buttonType: string, id?: number | string): void {
     const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
     this.loadingStates.aditionalButtons[key] = 'loading';
   }
 
-  // Clear loading
   clearAditionalButtonLoading(buttonType: string, id?: number | string): void {
     const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
     this.loadingStates.aditionalButtons[key] = 'idle';
   }
 
-  // Verify loading
   isAditionalButtonLoading(buttonType: string, id?: number | string): boolean {
     const key = id !== undefined ? `${buttonType}_${id}` : buttonType;
     return this.loadingStates.aditionalButtons[key] === 'loading';
   }
 
-  // ==================================================
+  // =====================================================
   // Expand rows
-  // ==================================================
+  // =====================================================
 
-  // Method to check if the table has expandable rows
   hasExpandable(): boolean {
     return hasExpandableColumn(this.columns);
   }
 
-  // Method to check if a row is expanded
   toggleRow(row: any): void {
     if (this.expandedRows.has(row)) {
       this.expandedRows.delete(row);
@@ -931,240 +855,105 @@ export class JCompleteCrudTableComponent implements OnInit {
     }
   }
 
-  // Method to get expanded content from a row
   getExpandedContent(row: any): SafeHtml {
     const html = resolveExpandContent(this.columns, row);
-
     return this.sanitizer.bypassSecurityTrustHtml(html);
   }
 
-  // Method to get the expansion state of a row
   getExpansionState(row: any): 'expanded' | 'collapsed' {
     return this.expandedRows.has(row) ? 'expanded' : 'collapsed';
   }
 
   // =====================================================
-  // Table editing functionality
+  // Inline row editing
   // =====================================================
 
-  // Method to edit an item
-  // Replaces the onEditRow method
   onEditRow(item: any): void {
     if (this.editingRowItem === item) {
       this.editingRowItem = null;
       this.originalRowItem = null;
-    } else {
-      // If we are editing a different row, cancel the editing of the previous one
-      if (this.editingRowItem !== null) {
-        // Restore the original value of the previous row
-        this.restoreOriginalData();
-      }
-      this.editingRowItem = item;
-
-      this.originalRowItem = this.deepCopy(item);
-    }
-  }
-
-  // Replaces the restoreOriginalData method
-  restoreOriginalData() {
-    if (this.editingRowItem && this.originalRowItem) {
-      const restoredData = this.deepCopy(this.originalRowItem);
-      Object.assign(this.editingRowItem, restoredData);
-    }
-  }
-
-  // Adds this new method for deep copying
-  private deepCopy(obj: any): any {
-    if (obj === null || typeof obj !== 'object') {
-      return obj;
+      return;
     }
 
-    if (obj instanceof Date) {
-      return new Date(obj.getTime());
+    if (this.editingRowItem !== null) {
+      this.restoreOriginalData();
     }
 
-    if (Array.isArray(obj)) {
-      return obj.map(item => this.deepCopy(item));
-    }
+    this.editingRowItem = item;
+    this.originalRowItem = deepCopy(item);
+  }
 
-    const copy: any = {};
-    for (const key in obj) {
-      if (obj.hasOwnProperty(key)) {
-        copy[key] = this.deepCopy(obj[key]);
-      }
+  restoreOriginalData(): void {
+    if (this.editingRowItem && this.originalRowItem) {
+      Object.assign(this.editingRowItem, deepCopy(this.originalRowItem));
     }
-
-    return copy;
   }
 
-  // Method to save the editing of the item
   onSaveRow(item: any): void {
-
-    // Get the name of the entity's id
     const idField = `id_${this.mainEndpoint}`;
 
-    // If the item being edited exists, save it
     if (this.editingRowItem && this.editingRowItem[idField] === item[idField]) {
-
-      this.genericService.update<any>({ endpoint: this.mainEndpoint, id: this.editingRowItem[idField], data: this.editingRowItem }).subscribe({
-        next: (response) => {
-
-          this.alertToastService.AlertToast({
-            type: "success",
-            title: "Registro actualizado!",
-            description: response.message,
-          })
-
-          // Remove the editing item
-          this.editingRowItem = null;
-
-        }
-      })
-
-    } else {
-      this.alertToastService.AlertToast({
-        type: "error",
-        title: "Error al guardar",
-        description: "No se pudo guardar el registro. Por favor, inténtelo de nuevo.",
-      });
+      this.genericService
+        .update<any>({
+          endpoint: this.mainEndpoint,
+          id: this.editingRowItem[idField],
+          data: this.editingRowItem})
+        .subscribe({
+          next: (response) => {
+            this.alertToastService.AlertToast({
+              type: 'success',
+              title: 'Registro actualizado!',
+              description: response.message});
+
+            this.editingRowItem = null;
+          }});
+      return;
     }
+
+    this.alertToastService.AlertToast({
+      type: 'error',
+      title: 'Error al guardar',
+      description: 'No se pudo guardar el registro. Por favor, inténtelo de nuevo.'});
   }
 
-  // Checks if a column has equivalence configuration
   hasEquivalence(columnKey: string): boolean {
-    for (const [, conf] of Object.entries(this.equivalenceConfigs || {})) {
-      if (conf && conf.keyColumnSearch === columnKey) {
-        return true;
-      }
-    }
-    return false;
+    return hasEquivalenceConfig(this.equivalenceConfigs, columnKey);
   }
 
-  // Gets the equivalence data for a specific column
-  getEquivalenceData(columnKey: string): {
-    keyReturn: string;
-    options: { key: any; label: string }[];
-    optional: boolean
-  } | null {
-
-    for (const [name, conf] of Object.entries(this.equivalenceConfigs || {})) {
-      if (conf && conf.keyColumnSearch === columnKey) {
-        const keyReturn = conf.keyReturn;
-        const idMap = (this.equivalences as any)[keyReturn];
-
-        if (!idMap) return null;
-
-        const options = Object.entries(idMap).map(([id, label]) => ({
-          key: +id,
-          label: String(label),
-        }));
-
-        return {
-          keyReturn,
-          options,
-          optional: conf.optional || false,
-        };
-      }
-    }
-    return null;
+  getEquivalenceData(columnKey: string): ReturnType<typeof resolveEquivalenceData> {
+    return resolveEquivalenceData(this.equivalenceConfigs, this.equivalences, columnKey);
   }
 
-  // Sets a nested value in an object based on the column key
   setNestedValue(item: any, columnKey: string, value: any): void {
-    const keys = columnKey.split('.');
-    let current = item;
-
-    for (let i = 0; i < keys.length; i++) {
-      const key = keys[i];
-      if (i === keys.length - 1) {
-        current[key] = value;
-      } else {
-        if (!current[key]) {
-          current[key] = {};
-        }
-        current = current[key];
-      }
-    }
+    setNestedValue(item, columnKey, value);
   }
 
-  // =====================================================
-  // Update table editing
-  // =====================================================
-
-  // Handles the equivalence change in an item
   onEquivalenceChange(item: any, columnKey: string, newId: any): void {
     const eqData = this.getEquivalenceData(columnKey);
-    if (!eqData) return;
+    if (!eqData) {
+      return;
+    }
 
-    // Change the value in the edited object (directly in the same object)
     const newLabel = eqData.options.find((opt) => opt.key == newId)?.label ?? null;
-    this.setNestedValue(this.editingRowItem, columnKey, newLabel);
+    setNestedValue(this.editingRowItem, columnKey, newLabel);
     this.editingRowItem[eqData.keyReturn] = newId;
   }
 
-  // Handles the change of value in an editable field
   onFieldChange(item: any, columnKey: string, value: any): void {
-    // Update the value directly on the editingRowItem reference
-    this.setNestedValue(this.editingRowItem, columnKey, value);
+    setNestedValue(this.editingRowItem, columnKey, value);
   }
 
+  // =====================================================
+  // Row styling
+  // =====================================================
 
-
-
-
-  // Apply colors to row based on conditions
-  private readonly rowColorMap: { [key: string]: string } = {
-    primary: 'bg-primary/20     hover:bg-dark-primary/30!   dark:hover:bg-dark-primary/20',
-    success: 'bg-green-500/20   hover:bg-green-500/30!      dark:hover:bg-green-500/20',
-    error: '  bg-red-500/20     hover:bg-red-500/30!        dark:hover:bg-red-500/20',
-    warning: 'bg-yellow-500/20  hover:bg-yellow-500/30!     dark:hover:bg-yellow-500/20',
-    info: '   bg-blue-500/20    hover:bg-blue-500/30!       dark:hover:bg-blue-500/20',
-  };
-
-  getRowNgClass(row: any): any {
-
-    const base: any = {
-      'cursor-pointer': this.hasExpandable(),
-    };
-
-    const columnWithColor = this.columns.find(c => !!c.rowColorCondition);
-    if (!columnWithColor) return base;
-
-    const keys = columnWithColor.key.split('.');
-    let value = row;
-    for (const key of keys) {
-      value = value?.[key];
-    }
-
-    const normalizedValue =
-      value === null || value === undefined
-        ? 'null'
-        : String(value).toUpperCase();
-    const semanticClass = columnWithColor.rowColorCondition?.[normalizedValue];
-
-    if (semanticClass && this.rowColorMap[semanticClass]) {
-      base[this.rowColorMap[semanticClass]] = true;
-    }
-
-    return base;
+  getRowNgClass(row: any): Record<string, boolean> {
+    return buildRowNgClass(row, this.columns, this.hasExpandable());
   }
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-  mobileInnerExpandedRows: Set<any> = new Set();
+  // =====================================================
+  // Mobile layout
+  // =====================================================
 
   toggleMobileInnerRow(row: any): void {
     if (this.mobileInnerExpandedRows.has(row)) {
@@ -1175,106 +964,30 @@ export class JCompleteCrudTableComponent implements OnInit {
   }
 
   getMobileMainTitle(item: any): string {
-    const firstTextColumn = this.columns.find(column =>
-      column.visible &&
-      !column.isDecorator &&
-      !column.isDecoratorArray &&
-      !column.isLink &&
-      !column.isLinkImage &&
-      !this.isBoolean(this.getValue(item, column))
-    );
-
-    return firstTextColumn ? this.getValue(item, firstTextColumn) : 'Registro';
+    return getMobileMainTitle(item, this.columns, (row, column) => this.getValue(row, column));
   }
 
   getMobileMainDescription(item: any): string | null {
-    const descriptionColumn = this.columns.find(column =>
-      column.visible &&
-      (column as any).isDescription
-    );
-
-    if (!descriptionColumn) return null;
-
-    const value = this.getValue(item, descriptionColumn);
-
-    if (
-      value === null ||
-      value === undefined ||
-      value === '' ||
-      value === 'S/N'
-    ) {
-      return null;
-    }
-
-    return value;
+    return getMobileMainDescription(item, this.columns, (row, column) => this.getValue(row, column));
   }
 
   getMobileHeaderColumns(): TableColumn<any>[] {
-    return this.columns
-      .filter(column => column.visible)
-      .filter(column => column.isDecorator || column.colorDecorator)
-      .slice(0, 2);
+    return getMobileHeaderColumns(this.columns);
   }
 
   getGroupMobileStudentTitle(student: any): string {
-    const firstNameCol = this.columns.find(
-      (column) => column.visible && column.key === 'student.firstname_student',
-    );
-    const lastNameCol = this.columns.find(
-      (column) => column.visible && column.key === 'student.lastname_student',
-    );
-
-    const parts: string[] = [];
-
-    if (firstNameCol) {
-      const firstName = this.getValue(student, firstNameCol);
-      if (firstName) {
-        parts.push(firstName);
-      }
-    }
-
-    if (lastNameCol) {
-      const lastName = this.getValue(student, lastNameCol);
-      if (lastName) {
-        parts.push(lastName);
-      }
-    }
-
-    if (parts.length > 0) {
-      return parts.join(' ');
-    }
-
-    const fallbackColumn = this.columns.find(
-      (column) =>
-        column.visible &&
-        !column.isDecorator &&
-        !column.isDecoratorArray &&
-        !column.isLink &&
-        !column.isLinkImage &&
-        !this.isBoolean(this.getValue(student, column)),
+    return getGroupMobileStudentTitle(student, this.columns, (row, column) =>
+      this.getValue(row, column),
     );
-
-    return fallbackColumn
-      ? this.getValue(student, fallbackColumn)
-      : 'Estudiante';
   }
 
   getGroupMobileStudentHeaderColumns(student: any): TableColumn<any>[] {
-    return this.columns
-      .filter(
-        (column) =>
-          column.visible &&
-          (column.isDecorator || column.colorDecorator) &&
-          this.getValue(student, column),
-      )
-      .slice(0, 3);
+    return getGroupMobileStudentHeaderColumns(student, this.columns, (row, column) =>
+      this.getValue(row, column),
+    );
   }
 
   getGroupMobileStudentIndex(groupItem: any, index: number): number {
-    const page = groupItem.meta?.page?.currentPage ?? 1;
-    const limit = groupItem.meta?.page?.limit ?? 0;
-
-    return (page - 1) * limit + index + 1;
+    return getGroupMobileStudentIndex(groupItem, index);
   }
-
 }