config tab

src/app/portal-manage/dashboard-management/widget-config/base-config/base-config.component.ts

-import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { Component, Input, Output, EventEmitter, ChangeDetectorRef, OnInit, AfterViewInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -7,6 +7,7 @@ import { MatSelectModule } from '@angular/material/select';
 import { MatCheckboxModule } from '@angular/material/checkbox';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
+import { MatTabsModule } from '@angular/material/tabs';
 
 @Component({
   selector: 'app-base-config',
@@ -19,11 +20,22 @@ import { MatIconModule } from '@angular/material/icon';
     MatSelectModule,
     MatCheckboxModule,
     MatButtonModule,
-    MatIconModule
+    MatIconModule,
+    MatTabsModule
   ],
   template: `
     <div class="base-config">
-      <ng-content></ng-content>
+      <mat-tab-group [(selectedIndex)]="selectedTabIndex" (selectedIndexChange)="onTabChange($event)">
+        <mat-tab *ngFor="let tab of availableTabs" [label]="tab.label">
+          <ng-template mat-tab-label>
+            <mat-icon *ngIf="tab.icon" class="tab-icon">{{ tab.icon }}</mat-icon>
+            {{ tab.label }}
+          </ng-template>
+          <div class="tab-content">
+            <ng-content></ng-content>
+          </div>
+        </mat-tab>
+      </mat-tab-group>
     </div>
   `,
   styles: [`
@@ -31,6 +43,37 @@ import { MatIconModule } from '@angular/material/icon';
       padding: 16px;
     }
 
+    .tab-content {
+      padding: 16px 0;
+      min-height: 400px;
+    }
+
+    .tab-icon {
+      margin-right: 8px;
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+    }
+
+    ::ng-deep .mat-tab-group {
+      width: 100%;
+    }
+
+    ::ng-deep .mat-tab-header {
+      border-bottom: 1px solid #e5e7eb;
+    }
+
+    ::ng-deep .mat-tab-label {
+      min-width: 120px;
+      padding: 0 16px;
+    }
+
+    ::ng-deep .mat-tab-label-content {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
     .config-section {
       border: 1px solid #e5e7eb;
       border-radius: 8px;
@@ -176,17 +219,132 @@ import { MatIconModule } from '@angular/material/icon';
       width: 100%;
     }
 
+    .config-tabs {
+      display: flex;
+      border-bottom: 1px solid #e5e7eb;
+      margin-bottom: 16px;
+      overflow-x: auto;
+    }
+
+    .tab-button {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 16px;
+      border: none;
+      background: none;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all 0.2s;
+      white-space: nowrap;
+      font-size: 14px;
+      font-weight: 500;
+      color: #6b7280;
+    }
+
+    .tab-button:hover {
+      background-color: #f3f4f6;
+      color: #374151;
+    }
+
+    .tab-button.active {
+      color: #2563eb;
+      border-bottom-color: #2563eb;
+      background-color: #eff6ff;
+    }
+
+    .config-content {
+      min-height: 400px;
+    }
+
+    .size-config {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+      gap: 16px;
+    }
+
+    .size-option {
+      border: 1px solid #e5e7eb;
+      border-radius: 8px;
+      padding: 12px;
+      cursor: pointer;
+      transition: all 0.2s;
+      text-align: center;
+    }
+
+    .size-option:hover {
+      border-color: #2563eb;
+      background-color: #eff6ff;
+    }
+
+    .size-option.selected {
+      border-color: #2563eb;
+      background-color: #eff6ff;
+    }
+
+    .size-option h4 {
+      margin: 0 0 8px 0;
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    .size-option p {
+      margin: 0;
+      font-size: 12px;
+      color: #6b7280;
+    }
+
     .column-config-item {
       background: #f9fafb;
       border: 1px solid #e5e7eb;
     }
   `]
 })
-export class BaseConfigComponent {
+export class BaseConfigComponent implements OnInit, AfterViewInit {
   @Input() currentConfig: any;
   @Input() availableColumns: string[] = [];
   @Output() configChange = new EventEmitter<any>();
 
+  // Tab management
+  selectedTabIndex: number = 0;
+  availableTabs: any[] = [
+    { id: 'basic', label: 'Basic', icon: 'settings' },
+    { id: 'columns', label: 'Columns', icon: 'view_column' },
+    { id: 'rows', label: 'Rows', icon: 'view_list' },
+    { id: 'style', label: 'Style', icon: 'palette' },
+    { id: 'filter', label: 'Filter', icon: 'filter_list' },
+    { id: 'aggregate', label: 'Aggregate', icon: 'functions' },
+    { id: 'icon', label: 'Icon', icon: 'image' },
+    { id: 'trend', label: 'Trend', icon: 'trending_up' },
+    { id: 'animation', label: 'Animation', icon: 'animation' },
+    { id: 'condition', label: 'Condition', icon: 'rule' }
+  ];
+
+  constructor(protected cdr: ChangeDetectorRef) {
+    // Initialize selectedTabIndex
+    this.selectedTabIndex = 0;
+  }
+
+  ngOnInit() {
+    // Ensure selectedTabIndex is set during initialization
+    this.selectedTabIndex = 0;
+  }
+
+  ngAfterViewInit() {
+    // Ensure selectedTabIndex is properly set after view initialization
+    setTimeout(() => {
+      this.selectedTabIndex = 0;
+      this.cdr.detectChanges();
+    }, 0);
+  }
+
+  // Size options
+  sizeOptions = [
+    { id: 'auto', label: 'Auto', description: 'Auto fit content' },
+    { id: '100%', label: '100%', description: 'Full width/height' },
+    { id: 'custom', label: 'Custom', description: 'Custom dimensions' }
+  ];
+
   // Common methods that can be used by child components
   protected updateConfig(key: string, value: any): void {
     this.currentConfig[key] = value;
@@ -207,4 +365,55 @@ export class BaseConfigComponent {
       this.configChange.emit(this.currentConfig);
     }
   }
+
+  // Tab management
+  onTabChange(index: number): void {
+    this.selectedTabIndex = index;
+    this.cdr.detectChanges();
+  }
+
+  setActiveTab(tabId: string): void {
+    const index = this.availableTabs.findIndex(tab => tab.id === tabId);
+    if (index !== -1) {
+      this.selectedTabIndex = index;
+      this.cdr.detectChanges();
+    }
+  }
+
+  // Size management
+  setSizeOption(option: string): void {
+    this.updateConfig('sizeOption', option);
+    if (option === '100%') {
+      this.updateConfig('width', '100%');
+      this.updateConfig('height', '100%');
+    } else if (option === 'auto') {
+      this.updateConfig('width', 'auto');
+      this.updateConfig('height', 'auto');
+    }
+  }
+
+  // Initialize default config
+  protected initializeDefaultConfig(): void {
+    if (!this.currentConfig) {
+      this.currentConfig = {};
+    }
+
+    // Set default size
+    if (!this.currentConfig.sizeOption) {
+      this.currentConfig.sizeOption = 'auto';
+    }
+
+    // Set default dimensions
+    if (!this.currentConfig.width) {
+      this.currentConfig.width = 'auto';
+    }
+    if (!this.currentConfig.height) {
+      this.currentConfig.height = 'auto';
+    }
+
+    // Initialize default color values to prevent color format errors
+    if (!this.currentConfig.backgroundColor) this.currentConfig.backgroundColor = '#FFFFFF';
+    if (!this.currentConfig.textColor) this.currentConfig.textColor = '#374151';
+    if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#E5E7EB';
+  }
 }

src/app/portal-manage/dashboard-management/widgets/configs/attendance-config/attendance-config.component.ts

@@ -201,7 +201,7 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
   `
 })
 export class AttendanceConfigComponent extends BaseConfigComponent implements OnInit {
-  ngOnInit(): void {
+  override ngOnInit(): void {
     // Initialize default values for attendance widget
     if (!this.currentConfig.layout) this.currentConfig.layout = 'cards';
     if (!this.currentConfig.chartType) this.currentConfig.chartType = 'pie';

src/app/portal-manage/dashboard-management/widgets/configs/company-info-config/company-info-config.component.ts

@@ -209,7 +209,7 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
   `
 })
 export class CompanyInfoConfigComponent extends BaseConfigComponent implements OnInit {
-  ngOnInit(): void {
+  override ngOnInit(): void {
     // Initialize default values for company info widget
     if (!this.currentConfig.layout) this.currentConfig.layout = 'horizontal';
     if (this.currentConfig.showContactInfo === undefined) this.currentConfig.showContactInfo = true;

src/app/portal-manage/dashboard-management/widgets/configs/payroll-config/payroll-config.component.ts

@@ -254,7 +254,7 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
   `
 })
 export class PayrollConfigComponent extends BaseConfigComponent implements OnInit {
-  ngOnInit(): void {
+  override ngOnInit(): void {
     // Initialize default values for payroll widget
     if (!this.currentConfig.layout) this.currentConfig.layout = 'summary';
     if (!this.currentConfig.chartType) this.currentConfig.chartType = 'bar';

src/app/portal-manage/dashboard-management/widgets/configs/syncfusion-pivot-config/syncfusion-pivot-config.component.ts

@@ -195,7 +195,7 @@ import { BaseConfigComponent } from '../../../widget-config/base-config/base-con
   `
 })
 export class SyncfusionPivotConfigComponent extends BaseConfigComponent implements OnInit {
-  ngOnInit(): void {
+  override ngOnInit(): void {
     // Initialize default values for pivot widget
     if (!this.currentConfig.rows) this.currentConfig.rows = [];
     if (!this.currentConfig.columns) this.currentConfig.columns = [];