regis

src/app/portal-manage/dashboard-management/widget-config/services/widget-config-registry.service.ts

@@ -65,6 +65,21 @@ export class WidgetConfigRegistryService {
     this.registerConfig('NotificationWidgetComponent', CardConfigComponent);
     this.registerConfig('WelcomeWidgetComponent', CardConfigComponent);
     this.registerConfig('QuickLinksWidgetComponent', CardConfigComponent);
+    this.registerConfig('CompanyInfoWidgetComponent', CardConfigComponent);
+    this.registerConfig('CompanyInfoSubfolderWidgetComponent', CardConfigComponent);
+
+    // Register KPI widgets with SimpleKpiConfigComponent
+    this.registerConfig('KpiWidgetComponent', SimpleKpiConfigComponent);
+
+    // Register utility widgets with appropriate config components
+    this.registerConfig('ClockWidgetComponent', SimpleKpiConfigComponent);
+    this.registerConfig('WeatherWidgetComponent', SimpleKpiConfigComponent);
+    this.registerConfig('CalendarWidgetComponent', SimpleKpiConfigComponent);
+    this.registerConfig('MatrixWidgetComponent', TableConfigComponent);
+    this.registerConfig('SlicerWidgetComponent', SimpleKpiConfigComponent);
+    this.registerConfig('FilledMapWidgetComponent', SimpleKpiConfigComponent);
+    this.registerConfig('EmployeeDirectoryWidgetComponent', CardConfigComponent);
+    this.registerConfig('HeadcountWidgetComponent', SimpleKpiConfigComponent);
   }
 
   registerConfig(widgetType: string, configComponent: Type<WidgetConfigComponent>): void {
@@ -169,10 +184,7 @@ export class WidgetConfigRegistryService {
         statusField: '',
         hoursField: ''
       },
-      'NewDataTableWidget': {
-        title: 'Data Table',
-        columnsJson: '[]'
-      },
+
       'ScatterBubbleChartWidgetComponent': {
         title: 'Scatter/Bubble Chart',
         xField: '',
@@ -195,10 +207,6 @@ export class WidgetConfigRegistryService {
         yFields: [],
         series: []
       },
-      'SlicerWidgetComponent': {
-        title: 'Slicer',
-        optionsField: ''
-      },
       'WaterfallChartWidgetComponent': {
         title: 'Waterfall Chart',
         xField: '',
@@ -251,6 +259,50 @@ export class WidgetConfigRegistryService {
       'MatrixWidgetComponent': {
         title: 'Matrix',
         columns: []
+      },
+      'ClockWidgetComponent': {
+        title: 'Clock Widget',
+        timezone: 'local',
+        timeFormat: '12',
+        dateFormat: 'MM/DD/YYYY',
+        showSeconds: true,
+        showDate: true,
+        showDay: true
+      },
+      'WeatherWidgetComponent': {
+        title: 'Weather Widget',
+        location: 'Bangkok',
+        units: 'metric',
+        showForecast: true,
+        forecastDays: 5
+      },
+      'CalendarWidgetComponent': {
+        title: 'Calendar Widget',
+        viewMode: 'month',
+        showWeekends: true,
+        showToday: true,
+        enableEvents: true
+      },
+      'SlicerWidgetComponent': {
+        title: 'Slicer Widget',
+        slicerField: '',
+        slicerType: 'dropdown',
+        multiSelect: false
+      },
+      'FilledMapWidgetComponent': {
+        title: 'Map Widget',
+        mapType: 'world',
+        regionField: 'region',
+        valueField: 'value'
+      },
+      'KpiWidgetComponent': {
+        title: 'KPI Widget',
+        valueField: 'value',
+        labelField: 'label',
+        aggregation: 'sum',
+        unit: '',
+        icon: 'info',
+        decimalPlaces: 0
       }
     };
 

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

@@ -239,6 +239,417 @@ export class WidgetConfigComponent implements OnInit, AfterViewInit, OnDestroy {
       // Custom CSS defaults
       if (!this.currentConfig.customCSS) this.currentConfig.customCSS = '';
     }
+
+    // Initialize Chart Widgets default values
+    const chartWidgets = [
+      'SyncfusionChartWidgetComponent', 'PieChartWidgetComponent', 'BarChartWidgetComponent',
+      'AreaChartWidgetComponent', 'DoughnutChartWidgetComponent', 'FunnelChartWidgetComponent',
+      'ScatterBubbleChartWidgetComponent', 'GaugeChartWidgetComponent', 'TreemapWidgetComponent',
+      'WaterfallChartWidgetComponent', 'ComboChartWidgetComponent'
+    ];
+
+    if (chartWidgets.includes(this.widgetType)) {
+      // Basic configuration defaults
+      if (!this.currentConfig.title) this.currentConfig.title = 'Chart Widget';
+      if (!this.currentConfig.chartType) this.currentConfig.chartType = 'bar';
+      if (!this.currentConfig.dataSource) this.currentConfig.dataSource = 'static';
+      if (!this.currentConfig.xAxisField) this.currentConfig.xAxisField = '';
+      if (!this.currentConfig.yAxisField) this.currentConfig.yAxisField = '';
+      if (!this.currentConfig.valueField) this.currentConfig.valueField = '';
+      if (!this.currentConfig.labelField) this.currentConfig.labelField = '';
+      if (!this.currentConfig.apiEndpoint) this.currentConfig.apiEndpoint = '';
+
+      // Chart options defaults
+      if (!this.currentConfig.showLegend) this.currentConfig.showLegend = 'true';
+      if (!this.currentConfig.showGridLines) this.currentConfig.showGridLines = 'true';
+      if (!this.currentConfig.showDataLabels) this.currentConfig.showDataLabels = 'false';
+      if (!this.currentConfig.showTooltips) this.currentConfig.showTooltips = 'true';
+      if (this.currentConfig.animationDuration === undefined) this.currentConfig.animationDuration = 1000;
+      if (this.currentConfig.chartHeight === undefined) this.currentConfig.chartHeight = 400;
+      if (this.currentConfig.enableZoom === undefined) this.currentConfig.enableZoom = false;
+      if (this.currentConfig.enablePan === undefined) this.currentConfig.enablePan = false;
+      if (this.currentConfig.enableExport === undefined) this.currentConfig.enableExport = false;
+
+      // Color configuration defaults
+      if (!this.currentConfig.backgroundColor) this.currentConfig.backgroundColor = '#FFFFFF';
+      if (!this.currentConfig.textColor) this.currentConfig.textColor = '#000000';
+      if (!this.currentConfig.gridColor) this.currentConfig.gridColor = '#E5E7EB';
+      if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#D1D5DB';
+      if (!this.currentConfig.colorPalette) this.currentConfig.colorPalette = 'default';
+      if (!this.currentConfig.customColors) this.currentConfig.customColors = '';
+
+      // Layout configuration defaults
+      if (this.currentConfig.width === undefined) this.currentConfig.width = 600;
+      if (this.currentConfig.height === undefined) this.currentConfig.height = 400;
+      if (this.currentConfig.padding === undefined) this.currentConfig.padding = 16;
+      if (this.currentConfig.borderRadius === undefined) this.currentConfig.borderRadius = 8;
+      if (this.currentConfig.responsive === undefined) this.currentConfig.responsive = true;
+      if (this.currentConfig.showTitle === undefined) this.currentConfig.showTitle = true;
+
+      // Data configuration defaults
+      if (this.currentConfig.refreshInterval === undefined) this.currentConfig.refreshInterval = 0;
+      if (this.currentConfig.cacheEnabled === undefined) this.currentConfig.cacheEnabled = false;
+      if (this.currentConfig.cacheDuration === undefined) this.currentConfig.cacheDuration = 300;
+      if (!this.currentConfig.dataTransform) this.currentConfig.dataTransform = '';
+    }
+
+    // Initialize Table Widgets default values
+    const tableWidgets = ['DataTableWidgetComponent', 'SimpleTableWidgetComponent'];
+
+    if (tableWidgets.includes(this.widgetType)) {
+      // Basic configuration defaults
+      if (!this.currentConfig.title) this.currentConfig.title = 'Table Widget';
+      if (!this.currentConfig.dataSource) this.currentConfig.dataSource = 'static';
+      if (!this.currentConfig.tableType) this.currentConfig.tableType = 'simple';
+      if (!this.currentConfig.apiEndpoint) this.currentConfig.apiEndpoint = '';
+      if (this.currentConfig.pageSize === undefined) this.currentConfig.pageSize = 10;
+      if (this.currentConfig.maxHeight === undefined) this.currentConfig.maxHeight = 400;
+
+      // Column configuration defaults
+      if (!this.currentConfig.visibleColumns) this.currentConfig.visibleColumns = [];
+      if (!this.currentConfig.sortableColumns) this.currentConfig.sortableColumns = [];
+      if (!this.currentConfig.filterableColumns) this.currentConfig.filterableColumns = [];
+      if (!this.currentConfig.editableColumns) this.currentConfig.editableColumns = [];
+      if (this.currentConfig.showColumnSelector === undefined) this.currentConfig.showColumnSelector = false;
+      if (this.currentConfig.showRowNumbers === undefined) this.currentConfig.showRowNumbers = false;
+      if (this.currentConfig.showCheckboxes === undefined) this.currentConfig.showCheckboxes = false;
+      if (this.currentConfig.allowColumnResize === undefined) this.currentConfig.allowColumnResize = true;
+
+      // Feature configuration defaults
+      if (this.currentConfig.enablePagination === undefined) this.currentConfig.enablePagination = true;
+      if (this.currentConfig.enableSorting === undefined) this.currentConfig.enableSorting = true;
+      if (this.currentConfig.enableFiltering === undefined) this.currentConfig.enableFiltering = false;
+      if (this.currentConfig.enableSearch === undefined) this.currentConfig.enableSearch = false;
+      if (this.currentConfig.enableExport === undefined) this.currentConfig.enableExport = false;
+      if (this.currentConfig.enableSelection === undefined) this.currentConfig.enableSelection = false;
+      if (this.currentConfig.enableInlineEdit === undefined) this.currentConfig.enableInlineEdit = false;
+      if (this.currentConfig.enableColumnReorder === undefined) this.currentConfig.enableColumnReorder = false;
+      if (this.currentConfig.enableVirtualScroll === undefined) this.currentConfig.enableVirtualScroll = false;
+      if (!this.currentConfig.searchPlaceholder) this.currentConfig.searchPlaceholder = 'Search...';
+      if (!this.currentConfig.noDataMessage) this.currentConfig.noDataMessage = 'No data available';
+
+      // Styling configuration defaults
+      if (!this.currentConfig.headerBackgroundColor) this.currentConfig.headerBackgroundColor = '#F3F4F6';
+      if (!this.currentConfig.headerTextColor) this.currentConfig.headerTextColor = '#374151';
+      if (!this.currentConfig.rowBackgroundColor) this.currentConfig.rowBackgroundColor = '#FFFFFF';
+      if (!this.currentConfig.rowTextColor) this.currentConfig.rowTextColor = '#374151';
+      if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#E5E7EB';
+      if (!this.currentConfig.hoverColor) this.currentConfig.hoverColor = '#F9FAFB';
+      if (this.currentConfig.fontSize === undefined) this.currentConfig.fontSize = 14;
+      if (this.currentConfig.rowHeight === undefined) this.currentConfig.rowHeight = 40;
+      if (this.currentConfig.borderWidth === undefined) this.currentConfig.borderWidth = 1;
+      if (this.currentConfig.stripedRows === undefined) this.currentConfig.stripedRows = false;
+      if (this.currentConfig.bordered === undefined) this.currentConfig.bordered = true;
+      if (this.currentConfig.hoverable === undefined) this.currentConfig.hoverable = true;
+
+      // Layout configuration defaults
+      if (this.currentConfig.width === undefined) this.currentConfig.width = 800;
+      if (this.currentConfig.height === undefined) this.currentConfig.height = 400;
+      if (this.currentConfig.padding === undefined) this.currentConfig.padding = 16;
+      if (this.currentConfig.borderRadius === undefined) this.currentConfig.borderRadius = 8;
+      if (this.currentConfig.responsive === undefined) this.currentConfig.responsive = true;
+      if (this.currentConfig.fullWidth === undefined) this.currentConfig.fullWidth = false;
+    }
+
+    // Initialize Card Widgets default values
+    const cardWidgets = [
+      'MultiRowCardWidgetComponent', 'NotificationWidgetComponent', 'WelcomeWidgetComponent',
+      'QuickLinksWidgetComponent', 'CompanyInfoWidgetComponent', 'CompanyInfoSubfolderWidgetComponent'
+    ];
+
+    if (cardWidgets.includes(this.widgetType)) {
+      // Basic configuration defaults
+      if (!this.currentConfig.title) this.currentConfig.title = 'Card Widget';
+      if (!this.currentConfig.cardType) this.currentConfig.cardType = 'simple';
+      if (!this.currentConfig.dataSource) this.currentConfig.dataSource = 'static';
+      if (!this.currentConfig.apiEndpoint) this.currentConfig.apiEndpoint = '';
+      if (!this.currentConfig.icon) this.currentConfig.icon = '';
+      if (!this.currentConfig.iconPosition) this.currentConfig.iconPosition = 'left';
+      if (!this.currentConfig.description) this.currentConfig.description = '';
+
+      // Content configuration defaults
+      if (!this.currentConfig.primaryField) this.currentConfig.primaryField = '';
+      if (!this.currentConfig.secondaryField) this.currentConfig.secondaryField = '';
+      if (!this.currentConfig.valueField) this.currentConfig.valueField = '';
+      if (!this.currentConfig.labelField) this.currentConfig.labelField = '';
+      if (this.currentConfig.showAvatar === undefined) this.currentConfig.showAvatar = false;
+      if (this.currentConfig.showBadge === undefined) this.currentConfig.showBadge = false;
+      if (this.currentConfig.showActions === undefined) this.currentConfig.showActions = false;
+      if (!this.currentConfig.badgeText) this.currentConfig.badgeText = '';
+      if (!this.currentConfig.badgeColor) this.currentConfig.badgeColor = 'primary';
+
+      // Styling configuration defaults
+      if (!this.currentConfig.backgroundColor) this.currentConfig.backgroundColor = '#FFFFFF';
+      if (!this.currentConfig.textColor) this.currentConfig.textColor = '#374151';
+      if (!this.currentConfig.headerColor) this.currentConfig.headerColor = '#F9FAFB';
+      if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#E5E7EB';
+      if (this.currentConfig.fontSize === undefined) this.currentConfig.fontSize = 14;
+      if (this.currentConfig.titleSize === undefined) this.currentConfig.titleSize = 18;
+      if (this.currentConfig.iconSize === undefined) this.currentConfig.iconSize = 24;
+      if (this.currentConfig.padding === undefined) this.currentConfig.padding = 16;
+      if (this.currentConfig.borderRadius === undefined) this.currentConfig.borderRadius = 8;
+      if (this.currentConfig.elevated === undefined) this.currentConfig.elevated = true;
+      if (this.currentConfig.outlined === undefined) this.currentConfig.outlined = false;
+      if (this.currentConfig.flat === undefined) this.currentConfig.flat = false;
+
+      // Layout configuration defaults
+      if (this.currentConfig.width === undefined) this.currentConfig.width = 300;
+      if (this.currentConfig.height === undefined) this.currentConfig.height = 200;
+      if (this.currentConfig.minWidth === undefined) this.currentConfig.minWidth = 200;
+      if (this.currentConfig.maxWidth === undefined) this.currentConfig.maxWidth = 500;
+      if (this.currentConfig.margin === undefined) this.currentConfig.margin = 8;
+      if (!this.currentConfig.shadow) this.currentConfig.shadow = 'medium';
+      if (this.currentConfig.responsive === undefined) this.currentConfig.responsive = true;
+      if (this.currentConfig.fullWidth === undefined) this.currentConfig.fullWidth = false;
+
+      // Action configuration defaults
+      if (this.currentConfig.enableClick === undefined) this.currentConfig.enableClick = false;
+      if (this.currentConfig.enableHover === undefined) this.currentConfig.enableHover = true;
+      if (this.currentConfig.enableTooltip === undefined) this.currentConfig.enableTooltip = false;
+      if (!this.currentConfig.clickAction) this.currentConfig.clickAction = 'none';
+      if (!this.currentConfig.hoverEffect) this.currentConfig.hoverEffect = 'lift';
+      if (!this.currentConfig.customClickHandler) this.currentConfig.customClickHandler = '';
+      if (this.currentConfig.showCloseButton === undefined) this.currentConfig.showCloseButton = false;
+      if (this.currentConfig.showMenuButton === undefined) this.currentConfig.showMenuButton = false;
+    }
+
+    // Initialize KPI Widget default values
+    if (this.widgetType === 'KpiWidgetComponent') {
+      // Basic configuration defaults
+      if (!this.currentConfig.title) this.currentConfig.title = 'KPI Widget';
+      if (!this.currentConfig.valueField) this.currentConfig.valueField = 'value';
+      if (!this.currentConfig.labelField) this.currentConfig.labelField = 'label';
+      if (!this.currentConfig.aggregation) this.currentConfig.aggregation = 'sum';
+      if (!this.currentConfig.unit) this.currentConfig.unit = '';
+      if (!this.currentConfig.icon) this.currentConfig.icon = 'info';
+      if (this.currentConfig.decimalPlaces === undefined) this.currentConfig.decimalPlaces = 0;
+
+      // Style configuration defaults
+      if (!this.currentConfig.backgroundColor) this.currentConfig.backgroundColor = 'linear-gradient(to top right, #3366FF, #00CCFF)';
+      if (!this.currentConfig.textColor) this.currentConfig.textColor = '#FFFFFF';
+      if (!this.currentConfig.accentColor) this.currentConfig.accentColor = '#FFFFFF';
+      if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#FFFFFF';
+      if (!this.currentConfig.iconColor) this.currentConfig.iconColor = '#FFFFFF';
+      if (this.currentConfig.borderRadius === undefined) this.currentConfig.borderRadius = 8;
+      if (this.currentConfig.padding === undefined) this.currentConfig.padding = 16;
+      if (this.currentConfig.margin === undefined) this.currentConfig.margin = 8;
+      if (this.currentConfig.borderWidth === undefined) this.currentConfig.borderWidth = 1;
+      if (this.currentConfig.fontSize === undefined) this.currentConfig.fontSize = 16;
+      if (!this.currentConfig.fontWeight) this.currentConfig.fontWeight = 'normal';
+      if (!this.currentConfig.fontFamily) this.currentConfig.fontFamily = 'system-ui, -apple-system, sans-serif';
+
+      // Layout configuration defaults
+      if (this.currentConfig.width === undefined) this.currentConfig.width = 300;
+      if (this.currentConfig.height === undefined) this.currentConfig.height = 200;
+      if (this.currentConfig.responsive === undefined) this.currentConfig.responsive = true;
+    }
+
+    // Initialize Clock Widget default values
+    if (this.widgetType === 'ClockWidgetComponent') {
+      // Basic configuration defaults
+      if (!this.currentConfig.title) this.currentConfig.title = 'Clock Widget';
+      if (!this.currentConfig.timezone) this.currentConfig.timezone = 'local';
+      if (!this.currentConfig.timeFormat) this.currentConfig.timeFormat = '12';
+      if (!this.currentConfig.dateFormat) this.currentConfig.dateFormat = 'MM/DD/YYYY';
+      if (this.currentConfig.showSeconds === undefined) this.currentConfig.showSeconds = true;
+      if (this.currentConfig.showDate === undefined) this.currentConfig.showDate = true;
+      if (this.currentConfig.showDay === undefined) this.currentConfig.showDay = true;
+
+      // Style configuration defaults
+      if (!this.currentConfig.backgroundColor) this.currentConfig.backgroundColor = '#FFFFFF';
+      if (!this.currentConfig.textColor) this.currentConfig.textColor = '#374151';
+      if (!this.currentConfig.accentColor) this.currentConfig.accentColor = '#3B82F6';
+      if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#E5E7EB';
+      if (this.currentConfig.borderRadius === undefined) this.currentConfig.borderRadius = 8;
+      if (this.currentConfig.padding === undefined) this.currentConfig.padding = 16;
+      if (this.currentConfig.fontSize === undefined) this.currentConfig.fontSize = 16;
+      if (!this.currentConfig.fontWeight) this.currentConfig.fontWeight = 'normal';
+      if (!this.currentConfig.fontFamily) this.currentConfig.fontFamily = 'monospace';
+
+      // Layout configuration defaults
+      if (this.currentConfig.width === undefined) this.currentConfig.width = 300;
+      if (this.currentConfig.height === undefined) this.currentConfig.height = 150;
+      if (this.currentConfig.responsive === undefined) this.currentConfig.responsive = true;
+    }
+
+    // Initialize Weather Widget default values
+    if (this.widgetType === 'WeatherWidgetComponent') {
+      // Basic configuration defaults
+      if (!this.currentConfig.title) this.currentConfig.title = 'Weather Widget';
+      if (!this.currentConfig.location) this.currentConfig.location = 'Bangkok';
+      if (!this.currentConfig.units) this.currentConfig.units = 'metric';
+      if (this.currentConfig.showForecast === undefined) this.currentConfig.showForecast = true;
+      if (this.currentConfig.forecastDays === undefined) this.currentConfig.forecastDays = 5;
+
+      // Style configuration defaults
+      if (!this.currentConfig.backgroundColor) this.currentConfig.backgroundColor = '#FFFFFF';
+      if (!this.currentConfig.textColor) this.currentConfig.textColor = '#374151';
+      if (!this.currentConfig.accentColor) this.currentConfig.accentColor = '#3B82F6';
+      if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#E5E7EB';
+      if (this.currentConfig.borderRadius === undefined) this.currentConfig.borderRadius = 8;
+      if (this.currentConfig.padding === undefined) this.currentConfig.padding = 16;
+      if (this.currentConfig.fontSize === undefined) this.currentConfig.fontSize = 14;
+      if (!this.currentConfig.fontWeight) this.currentConfig.fontWeight = 'normal';
+
+      // Layout configuration defaults
+      if (this.currentConfig.width === undefined) this.currentConfig.width = 350;
+      if (this.currentConfig.height === undefined) this.currentConfig.height = 200;
+      if (this.currentConfig.responsive === undefined) this.currentConfig.responsive = true;
+    }
+
+    // Initialize Calendar Widget default values
+    if (this.widgetType === 'CalendarWidgetComponent') {
+      // Basic configuration defaults
+      if (!this.currentConfig.title) this.currentConfig.title = 'Calendar Widget';
+      if (!this.currentConfig.viewMode) this.currentConfig.viewMode = 'month';
+      if (this.currentConfig.showWeekends === undefined) this.currentConfig.showWeekends = true;
+      if (this.currentConfig.showToday === undefined) this.currentConfig.showToday = true;
+      if (this.currentConfig.enableEvents === undefined) this.currentConfig.enableEvents = true;
+
+      // Style configuration defaults
+      if (!this.currentConfig.backgroundColor) this.currentConfig.backgroundColor = '#FFFFFF';
+      if (!this.currentConfig.textColor) this.currentConfig.textColor = '#374151';
+      if (!this.currentConfig.accentColor) this.currentConfig.accentColor = '#3B82F6';
+      if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#E5E7EB';
+      if (this.currentConfig.borderRadius === undefined) this.currentConfig.borderRadius = 8;
+      if (this.currentConfig.padding === undefined) this.currentConfig.padding = 16;
+      if (this.currentConfig.fontSize === undefined) this.currentConfig.fontSize = 14;
+      if (!this.currentConfig.fontWeight) this.currentConfig.fontWeight = 'normal';
+
+      // Layout configuration defaults
+      if (this.currentConfig.width === undefined) this.currentConfig.width = 400;
+      if (this.currentConfig.height === undefined) this.currentConfig.height = 400;
+      if (this.currentConfig.responsive === undefined) this.currentConfig.responsive = true;
+    }
+
+    // Initialize Matrix Widget default values
+    if (this.widgetType === 'MatrixWidgetComponent') {
+      // Basic configuration defaults
+      if (!this.currentConfig.title) this.currentConfig.title = 'Matrix Widget';
+      if (!this.currentConfig.dataSource) this.currentConfig.dataSource = 'static';
+      if (!this.currentConfig.apiEndpoint) this.currentConfig.apiEndpoint = '';
+      if (this.currentConfig.showHeader === undefined) this.currentConfig.showHeader = true;
+      if (this.currentConfig.showBorders === undefined) this.currentConfig.showBorders = true;
+
+      // Style configuration defaults
+      if (!this.currentConfig.backgroundColor) this.currentConfig.backgroundColor = '#FFFFFF';
+      if (!this.currentConfig.textColor) this.currentConfig.textColor = '#374151';
+      if (!this.currentConfig.headerColor) this.currentConfig.headerColor = '#F3F4F6';
+      if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#E5E7EB';
+      if (this.currentConfig.borderRadius === undefined) this.currentConfig.borderRadius = 8;
+      if (this.currentConfig.padding === undefined) this.currentConfig.padding = 16;
+      if (this.currentConfig.fontSize === undefined) this.currentConfig.fontSize = 14;
+      if (!this.currentConfig.fontWeight) this.currentConfig.fontWeight = 'normal';
+
+      // Layout configuration defaults
+      if (this.currentConfig.width === undefined) this.currentConfig.width = 600;
+      if (this.currentConfig.height === undefined) this.currentConfig.height = 400;
+      if (this.currentConfig.responsive === undefined) this.currentConfig.responsive = true;
+    }
+
+    // Initialize Slicer Widget default values
+    if (this.widgetType === 'SlicerWidgetComponent') {
+      // Basic configuration defaults
+      if (!this.currentConfig.title) this.currentConfig.title = 'Slicer Widget';
+      if (!this.currentConfig.dataSource) this.currentConfig.dataSource = 'static';
+      if (!this.currentConfig.apiEndpoint) this.currentConfig.apiEndpoint = '';
+      if (!this.currentConfig.slicerField) this.currentConfig.slicerField = '';
+      if (!this.currentConfig.slicerType) this.currentConfig.slicerType = 'dropdown';
+      if (this.currentConfig.multiSelect === undefined) this.currentConfig.multiSelect = false;
+
+      // Style configuration defaults
+      if (!this.currentConfig.backgroundColor) this.currentConfig.backgroundColor = '#FFFFFF';
+      if (!this.currentConfig.textColor) this.currentConfig.textColor = '#374151';
+      if (!this.currentConfig.accentColor) this.currentConfig.accentColor = '#3B82F6';
+      if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#E5E7EB';
+      if (this.currentConfig.borderRadius === undefined) this.currentConfig.borderRadius = 8;
+      if (this.currentConfig.padding === undefined) this.currentConfig.padding = 16;
+      if (this.currentConfig.fontSize === undefined) this.currentConfig.fontSize = 14;
+      if (!this.currentConfig.fontWeight) this.currentConfig.fontWeight = 'normal';
+
+      // Layout configuration defaults
+      if (this.currentConfig.width === undefined) this.currentConfig.width = 300;
+      if (this.currentConfig.height === undefined) this.currentConfig.height = 200;
+      if (this.currentConfig.responsive === undefined) this.currentConfig.responsive = true;
+    }
+
+    // Initialize Filled Map Widget default values
+    if (this.widgetType === 'FilledMapWidgetComponent') {
+      // Basic configuration defaults
+      if (!this.currentConfig.title) this.currentConfig.title = 'Map Widget';
+      if (!this.currentConfig.dataSource) this.currentConfig.dataSource = 'static';
+      if (!this.currentConfig.apiEndpoint) this.currentConfig.apiEndpoint = '';
+      if (!this.currentConfig.mapType) this.currentConfig.mapType = 'world';
+      if (!this.currentConfig.regionField) this.currentConfig.regionField = 'region';
+      if (!this.currentConfig.valueField) this.currentConfig.valueField = 'value';
+
+      // Style configuration defaults
+      if (!this.currentConfig.backgroundColor) this.currentConfig.backgroundColor = '#FFFFFF';
+      if (!this.currentConfig.textColor) this.currentConfig.textColor = '#374151';
+      if (!this.currentConfig.accentColor) this.currentConfig.accentColor = '#3B82F6';
+      if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#E5E7EB';
+      if (this.currentConfig.borderRadius === undefined) this.currentConfig.borderRadius = 8;
+      if (this.currentConfig.padding === undefined) this.currentConfig.padding = 16;
+
+      // Layout configuration defaults
+      if (this.currentConfig.width === undefined) this.currentConfig.width = 600;
+      if (this.currentConfig.height === undefined) this.currentConfig.height = 400;
+      if (this.currentConfig.responsive === undefined) this.currentConfig.responsive = true;
+    }
+
+    // Initialize Employee Directory Widget default values
+    if (this.widgetType === 'EmployeeDirectoryWidgetComponent') {
+      // Basic configuration defaults
+      if (!this.currentConfig.title) this.currentConfig.title = 'Employee Directory';
+      if (!this.currentConfig.dataSource) this.currentConfig.dataSource = 'static';
+      if (!this.currentConfig.apiEndpoint) this.currentConfig.apiEndpoint = '';
+      if (this.currentConfig.showAvatar === undefined) this.currentConfig.showAvatar = true;
+      if (this.currentConfig.showDepartment === undefined) this.currentConfig.showDepartment = true;
+      if (this.currentConfig.showPosition === undefined) this.currentConfig.showPosition = true;
+      if (this.currentConfig.showEmail === undefined) this.currentConfig.showEmail = true;
+      if (this.currentConfig.showPhone === undefined) this.currentConfig.showPhone = true;
+
+      // Style configuration defaults
+      if (!this.currentConfig.backgroundColor) this.currentConfig.backgroundColor = '#FFFFFF';
+      if (!this.currentConfig.textColor) this.currentConfig.textColor = '#374151';
+      if (!this.currentConfig.accentColor) this.currentConfig.accentColor = '#3B82F6';
+      if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#E5E7EB';
+      if (this.currentConfig.borderRadius === undefined) this.currentConfig.borderRadius = 8;
+      if (this.currentConfig.padding === undefined) this.currentConfig.padding = 16;
+      if (this.currentConfig.fontSize === undefined) this.currentConfig.fontSize = 14;
+      if (!this.currentConfig.fontWeight) this.currentConfig.fontWeight = 'normal';
+
+      // Layout configuration defaults
+      if (this.currentConfig.width === undefined) this.currentConfig.width = 600;
+      if (this.currentConfig.height === undefined) this.currentConfig.height = 400;
+      if (this.currentConfig.responsive === undefined) this.currentConfig.responsive = true;
+    }
+
+    // Initialize Headcount Widget default values
+    if (this.widgetType === 'HeadcountWidgetComponent') {
+      // Basic configuration defaults
+      if (!this.currentConfig.title) this.currentConfig.title = 'Headcount Widget';
+      if (!this.currentConfig.dataSource) this.currentConfig.dataSource = 'static';
+      if (!this.currentConfig.apiEndpoint) this.currentConfig.apiEndpoint = '';
+      if (!this.currentConfig.valueField) this.currentConfig.valueField = 'count';
+      if (!this.currentConfig.labelField) this.currentConfig.labelField = 'department';
+      if (this.currentConfig.showTrend === undefined) this.currentConfig.showTrend = true;
+
+      // Style configuration defaults
+      if (!this.currentConfig.backgroundColor) this.currentConfig.backgroundColor = '#FFFFFF';
+      if (!this.currentConfig.textColor) this.currentConfig.textColor = '#374151';
+      if (!this.currentConfig.accentColor) this.currentConfig.accentColor = '#3B82F6';
+      if (!this.currentConfig.borderColor) this.currentConfig.borderColor = '#E5E7EB';
+      if (this.currentConfig.borderRadius === undefined) this.currentConfig.borderRadius = 8;
+      if (this.currentConfig.padding === undefined) this.currentConfig.padding = 16;
+      if (this.currentConfig.fontSize === undefined) this.currentConfig.fontSize = 16;
+      if (!this.currentConfig.fontWeight) this.currentConfig.fontWeight = 'normal';
+
+      // Layout configuration defaults
+      if (this.currentConfig.width === undefined) this.currentConfig.width = 300;
+      if (this.currentConfig.height === undefined) this.currentConfig.height = 200;
+      if (this.currentConfig.responsive === undefined) this.currentConfig.responsive = true;
+    }
   }
 
   resetConfig(): void {