ห

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

@@ -779,6 +779,8 @@ export class WidgetConfigRegistryService {
       // ========================================
       'SimpleKpiWidgetComponent': {
         ...baseConfig,
+        // Display Settings
+        title: 'Simple KPI Widget',
         valueField: 'value',
         labelField: 'label',
         aggregation: 'sum',
@@ -787,10 +789,85 @@ export class WidgetConfigRegistryService {
         decimalPlaces: 0,
         showTrend: true,
         trendField: 'trend',
-        color: '#3B82F6'
+        trendType: 'percentage',
+        color: '#3B82F6',
+        backgroundColor: '#FFFFFF',
+        textColor: '#374151',
+
+        // Size Configuration
+        sizeOption: 'medium',
+        width: 300,
+        height: 200,
+        widthUnit: 'px',
+        heightUnit: 'px',
+        fullWidth: false,
+        fullHeight: false,
+        minWidth: 200,
+        minHeight: 150,
+        maxWidth: 600,
+        maxHeight: 400,
+        aspectRatio: 'auto',
+        responsive: true,
+
+        // Style Settings
+        backgroundType: 'solid',
+        gradientStartColor: '#3B82F6',
+        gradientEndColor: '#1D4ED8',
+        gradientDirection: 'to right',
+        gradientType: 'linear',
+        borderRadius: 8,
+        shadow: 'medium',
+        padding: 20,
+
+        // Animation Settings
+        enableAnimations: true,
+        animationType: 'fade',
+        animationDuration: 500,
+        animationDelay: 0,
+        animationEasing: 'ease',
+        hoverEffects: true,
+        autoRefresh: false,
+
+        // Data Settings
+        dataSource: 'static',
+        apiEndpoint: '',
+        refreshInterval: 0,
+        dataValidation: 'none',
+        showDataCount: false,
+        showLastUpdated: false,
+
+        // Security Settings
+        requireAuth: false,
+        allowedRoles: '',
+        permissionLevel: 'read',
+        dataEncryption: false,
+        auditLog: false,
+        rateLimit: 0,
+        sessionTimeout: 30,
+
+        // Conditional Formatting
+        enableConditionalFormatting: false,
+        conditionField: '',
+        conditionOperator: 'equals',
+        conditionValue: '',
+        trueColor: '#10B981',
+        falseColor: '#EF4444',
+        trueIcon: 'check-circle',
+        falseIcon: 'x-circle',
+        showConditionalIcon: true,
+        animateConditionalChange: true,
+
+        // Interaction Settings
+        tooltipContent: '',
+        enableKeyboard: true,
+        enableFocus: true,
+        hoverEffect: 'scale',
+        transitionDuration: 300
       },
       'KpiWidgetComponent': {
         ...baseConfig,
+        // Display Settings
+        title: 'KPI Widget',
         valueField: 'value',
         labelField: 'label',
         aggregation: 'sum',
@@ -799,10 +876,83 @@ export class WidgetConfigRegistryService {
         decimalPlaces: 0,
         showTrend: true,
         trendField: 'trend',
+        trendType: 'percentage',
         color: '#3B82F6',
+        backgroundColor: '#FFFFFF',
+        textColor: '#374151',
         showComparison: true,
         comparisonField: 'previousValue',
-        comparisonLabel: 'vs Previous'
+        comparisonLabel: 'vs Previous',
+
+        // Size Configuration
+        sizeOption: 'large',
+        width: 350,
+        height: 250,
+        widthUnit: 'px',
+        heightUnit: 'px',
+        fullWidth: false,
+        fullHeight: false,
+        minWidth: 250,
+        minHeight: 180,
+        maxWidth: 800,
+        maxHeight: 500,
+        aspectRatio: 'auto',
+        responsive: true,
+
+        // Style Settings
+        backgroundType: 'solid',
+        gradientStartColor: '#3B82F6',
+        gradientEndColor: '#1D4ED8',
+        gradientDirection: 'to right',
+        gradientType: 'linear',
+        borderRadius: 12,
+        shadow: 'large',
+        padding: 24,
+
+        // Animation Settings
+        enableAnimations: true,
+        animationType: 'slide',
+        animationDuration: 600,
+        animationDelay: 100,
+        animationEasing: 'ease-out',
+        hoverEffects: true,
+        autoRefresh: true,
+
+        // Data Settings
+        dataSource: 'static',
+        apiEndpoint: '',
+        refreshInterval: 30000,
+        dataValidation: 'basic',
+        showDataCount: true,
+        showLastUpdated: true,
+
+        // Security Settings
+        requireAuth: false,
+        allowedRoles: '',
+        permissionLevel: 'read',
+        dataEncryption: false,
+        auditLog: false,
+        rateLimit: 0,
+        sessionTimeout: 30,
+
+        // Conditional Formatting
+        enableConditionalFormatting: true,
+        conditionField: 'value',
+        conditionOperator: 'greater_than',
+        conditionValue: '0',
+        trueColor: '#10B981',
+        falseColor: '#EF4444',
+        trueIcon: 'trending-up',
+        falseIcon: 'trending-down',
+        showConditionalIcon: true,
+        animateConditionalChange: true,
+
+        // Interaction Settings
+        tooltipContent: 'Click for details',
+        enableKeyboard: true,
+        enableFocus: true,
+        hoverEffect: 'glow',
+        transitionDuration: 400
       },
       'HeadcountWidgetComponent': {
         ...baseConfig,
@@ -822,8 +972,28 @@ export class WidgetConfigRegistryService {
       // ========================================
       'SyncfusionDatagridWidgetComponent': {
         ...baseConfig,
+        // Display Settings
+        title: 'Data Grid Widget',
         columns: [],
         dataSource: 'static',
+        apiEndpoint: '',
+
+        // Size Configuration
+        sizeOption: 'large',
+        width: 600,
+        height: 400,
+        widthUnit: 'px',
+        heightUnit: 'px',
+        fullWidth: false,
+        fullHeight: false,
+        minWidth: 400,
+        minHeight: 300,
+        maxWidth: 1200,
+        maxHeight: 800,
+        aspectRatio: 'auto',
+        responsive: true,
+
+        // Grid Functionality
         allowPaging: true,
         allowSorting: true,
         allowFiltering: true,
@@ -836,17 +1006,37 @@ export class WidgetConfigRegistryService {
         allowAdding: false,
         pageSize: 10,
         pageSizes: [5, 10, 20, 50, 100],
+
+        // UI Settings
         showToolbar: true,
         showHeader: true,
         showFooter: false,
+        showAlternateRows: false,
+        alternateRowColor: '#F9FAFB',
+        rowHeight: 40,
+        headerRowHeight: 40,
+
+        // Export Settings
         enableExport: true,
         exportFormats: ['excel', 'pdf', 'csv'],
+        exportFilename: 'data-export',
+        includeHeaders: true,
+        includeFilters: false,
+
+        // Search Settings
         enableSearch: false,
+        searchSettings: {
+          fields: [],
+          operator: 'contains',
+          key: '',
+          ignoreCase: true
+        },
+
+        // Virtualization
         enableVirtualization: false,
-        rowHeight: 40,
-        headerRowHeight: 40,
-        showAlternateRows: false,
-        alternateRowColor: '#F9FAFB',
+
+        // Style Settings
+        backgroundType: 'solid',
         backgroundColor: '#FFFFFF',
         borderColor: '#E5E7EB',
         textColor: '#374151',
@@ -855,7 +1045,60 @@ export class WidgetConfigRegistryService {
         borderRadius: 8,
         borderWidth: 1,
         fontSize: 14,
-        fontFamily: 'system-ui, -apple-system, sans-serif'
+        fontFamily: 'system-ui, -apple-system, sans-serif',
+        fontWeight: 'normal',
+        shadow: 'medium',
+        padding: 16,
+
+        // Animation Settings
+        enableAnimations: true,
+        animationType: 'fade',
+        animationDuration: 300,
+        animationDelay: 0,
+        animationEasing: 'ease',
+        hoverEffects: true,
+        autoRefresh: false,
+
+        // Data Settings
+        refreshInterval: 0,
+        dataValidation: 'basic',
+        showDataCount: true,
+        showLastUpdated: true,
+        enableFilter: false,
+        filterField: '',
+        filterOperator: 'contains',
+        filterValue: '',
+        filterLabel: 'Filter',
+
+        // Security Settings
+        requireAuth: false,
+        allowedRoles: '',
+        permissionLevel: 'read',
+        dataEncryption: false,
+        auditLog: false,
+        rateLimit: 0,
+        sessionTimeout: 30,
+        requireHttps: false,
+        enableCors: true,
+
+        // Conditional Formatting
+        enableConditionalFormatting: false,
+        conditionField: '',
+        conditionOperator: 'equals',
+        conditionValue: '',
+        trueColor: '#10B981',
+        falseColor: '#EF4444',
+        trueIcon: 'check-circle',
+        falseIcon: 'x-circle',
+        showConditionalIcon: true,
+        animateConditionalChange: true,
+
+        // Interaction Settings
+        tooltipContent: '',
+        enableKeyboard: true,
+        enableFocus: true,
+        hoverEffect: 'highlight',
+        transitionDuration: 200
       },
 
       // ========================================
@@ -888,21 +1131,78 @@ export class WidgetConfigRegistryService {
       // ========================================
       'SyncfusionChartWidgetComponent': {
         ...baseConfig,
+        // Display Settings
+        title: 'Chart Widget',
         xField: '',
         yField: '',
         xAxisTitle: '',
         yAxisTitle: '',
         chartType: 'column',
+
+        // Size Configuration
+        sizeOption: 'medium',
+        width: 400,
+        height: 300,
+        widthUnit: 'px',
+        heightUnit: 'px',
+        fullWidth: false,
+        fullHeight: false,
+        minWidth: 300,
+        minHeight: 200,
+        maxWidth: 1000,
+        maxHeight: 600,
+        aspectRatio: 'auto',
+        responsive: true,
+
+        // Chart Settings
         showLegend: true,
         showDataLabels: false,
         enableAnimation: true,
         enableZoom: false,
         enableTooltip: true,
         colorScheme: 'Material',
+        gridLines: true,
+        axisLines: true,
+
+        // Style Settings
+        backgroundType: 'solid',
         backgroundColor: '#FFFFFF',
         textColor: '#374151',
-        gridLines: true,
-        axisLines: true
+        borderRadius: 8,
+        shadow: 'medium',
+        padding: 16,
+
+        // Animation Settings
+        animationType: 'fade',
+        animationDuration: 500,
+        animationDelay: 0,
+        animationEasing: 'ease',
+        hoverEffects: true,
+        autoRefresh: false,
+
+        // Data Settings
+        dataSource: 'static',
+        apiEndpoint: '',
+        refreshInterval: 0,
+        dataValidation: 'basic',
+        showDataCount: false,
+        showLastUpdated: false,
+
+        // Security Settings
+        requireAuth: false,
+        allowedRoles: '',
+        permissionLevel: 'read',
+        dataEncryption: false,
+        auditLog: false,
+        rateLimit: 0,
+        sessionTimeout: 30,
+
+        // Interaction Settings
+        tooltipContent: '',
+        enableKeyboard: true,
+        enableFocus: true,
+        hoverEffect: 'scale',
+        transitionDuration: 300
       },
       'PieChartWidgetComponent': {
         ...baseConfig,
@@ -1042,25 +1342,89 @@ export class WidgetConfigRegistryService {
       // ========================================
       'DataTableWidgetComponent': {
         ...baseConfig,
+        // Display Settings
+        title: 'Data Table',
         columns: [],
         dataSource: 'static',
+        apiEndpoint: '',
+
+        // Size Configuration
+        sizeOption: 'medium',
+        width: 500,
+        height: 350,
+        widthUnit: 'px',
+        heightUnit: 'px',
+        fullWidth: false,
+        fullHeight: false,
+        minWidth: 300,
+        minHeight: 200,
+        maxWidth: 800,
+        maxHeight: 600,
+        aspectRatio: 'auto',
+        responsive: true,
+
+        // Table Functionality
         allowSorting: true,
         allowFiltering: true,
         allowPaging: true,
         pageSize: 10,
+        pageSizes: [5, 10, 20, 50],
+
+        // UI Settings
         showHeader: true,
         showFooter: false,
-        enableExport: true,
-        exportFormats: ['excel', 'csv'],
-        rowHeight: 40,
-        headerRowHeight: 40,
         showAlternateRows: false,
         alternateRowColor: '#F9FAFB',
+        rowHeight: 40,
+        headerRowHeight: 40,
+
+        // Export Settings
+        enableExport: true,
+        exportFormats: ['excel', 'csv'],
+        exportFilename: 'table-export',
+        includeHeaders: true,
+
+        // Style Settings
+        backgroundType: 'solid',
         backgroundColor: '#FFFFFF',
         borderColor: '#E5E7EB',
         textColor: '#374151',
         headerBackgroundColor: '#F9FAFB',
-        headerTextColor: '#374151'
+        headerTextColor: '#374151',
+        borderRadius: 8,
+        shadow: 'small',
+        padding: 16,
+
+        // Animation Settings
+        enableAnimations: true,
+        animationType: 'fade',
+        animationDuration: 300,
+        animationDelay: 0,
+        animationEasing: 'ease',
+        hoverEffects: true,
+        autoRefresh: false,
+
+        // Data Settings
+        refreshInterval: 0,
+        dataValidation: 'basic',
+        showDataCount: true,
+        showLastUpdated: false,
+
+        // Security Settings
+        requireAuth: false,
+        allowedRoles: '',
+        permissionLevel: 'read',
+        dataEncryption: false,
+        auditLog: false,
+        rateLimit: 0,
+        sessionTimeout: 30,
+
+        // Interaction Settings
+        tooltipContent: '',
+        enableKeyboard: true,
+        enableFocus: true,
+        hoverEffect: 'highlight',
+        transitionDuration: 200
       },
       'SimpleTableWidgetComponent': {
         ...baseConfig,
@@ -1098,20 +1462,75 @@ export class WidgetConfigRegistryService {
       // ========================================
       'MultiRowCardWidgetComponent': {
         ...baseConfig,
+        // Display Settings
+        title: 'Multi Row Card',
         labelField: '',
         valueField: '',
         unitField: '',
         dataSource: 'static',
+        apiEndpoint: '',
+
+        // Size Configuration
+        sizeOption: 'medium',
+        width: 300,
+        height: 200,
+        widthUnit: 'px',
+        heightUnit: 'px',
+        fullWidth: false,
+        fullHeight: false,
+        minWidth: 200,
+        minHeight: 150,
+        maxWidth: 500,
+        maxHeight: 400,
+        aspectRatio: 'auto',
+        responsive: true,
+
+        // Card Settings
         cardStyle: 'default',
         showIcon: true,
         iconField: '',
+        iconLibrary: 'material',
+
+        // Style Settings
+        backgroundType: 'solid',
         backgroundColor: '#FFFFFF',
         borderColor: '#E5E7EB',
         textColor: '#374151',
         borderRadius: 8,
         borderWidth: 1,
         padding: 16,
-        shadow: 'small'
+        shadow: 'small',
+
+        // Animation Settings
+        enableAnimations: true,
+        animationType: 'fade',
+        animationDuration: 400,
+        animationDelay: 0,
+        animationEasing: 'ease',
+        hoverEffects: true,
+        autoRefresh: false,
+
+        // Data Settings
+        refreshInterval: 0,
+        dataValidation: 'none',
+        showDataCount: false,
+        showLastUpdated: false,
+
+        // Security Settings
+        requireAuth: false,
+        allowedRoles: '',
+        permissionLevel: 'read',
+        dataEncryption: false,
+        auditLog: false,
+        rateLimit: 0,
+        sessionTimeout: 30,
+
+        // Interaction Settings
+        tooltipContent: '',
+        enableKeyboard: true,
+        enableFocus: true,
+        hoverEffect: 'lift',
+        transitionDuration: 300
       },
       'NotificationWidgetComponent': {
         ...baseConfig,
@@ -1221,21 +1640,75 @@ export class WidgetConfigRegistryService {
       // ========================================
       'AttendanceOverviewWidgetComponent': {
         ...baseConfig,
+        // Display Settings
+        title: 'Attendance Overview',
         presentField: '',
         onLeaveField: '',
         absentField: '',
         dataSource: 'static',
+        apiEndpoint: '',
+
+        // Size Configuration
+        sizeOption: 'medium',
+        width: 400,
+        height: 300,
+        widthUnit: 'px',
+        heightUnit: 'px',
+        fullWidth: false,
+        fullHeight: false,
+        minWidth: 300,
+        minHeight: 200,
+        maxWidth: 600,
+        maxHeight: 400,
+        aspectRatio: 'auto',
+        responsive: true,
+
+        // Chart Settings
         chartType: 'doughnut',
         showLegend: true,
         showDataLabels: true,
         enableAnimation: true,
         colorScheme: 'Material',
+
+        // Style Settings
+        backgroundType: 'solid',
         backgroundColor: '#FFFFFF',
         borderColor: '#E5E7EB',
         textColor: '#374151',
         borderRadius: 8,
         borderWidth: 1,
-        padding: 16
+        padding: 16,
+        shadow: 'medium',
+
+        // Animation Settings
+        animationType: 'fade',
+        animationDuration: 500,
+        animationDelay: 0,
+        animationEasing: 'ease',
+        hoverEffects: true,
+        autoRefresh: true,
+
+        // Data Settings
+        refreshInterval: 300000, // 5 minutes
+        dataValidation: 'basic',
+        showDataCount: true,
+        showLastUpdated: true,
+
+        // Security Settings
+        requireAuth: true,
+        allowedRoles: 'hr,admin,manager',
+        permissionLevel: 'read',
+        dataEncryption: true,
+        auditLog: true,
+        rateLimit: 100,
+        sessionTimeout: 30,
+
+        // Interaction Settings
+        tooltipContent: 'Click for details',
+        enableKeyboard: true,
+        enableFocus: true,
+        hoverEffect: 'scale',
+        transitionDuration: 300
       },
       'PayrollSummaryWidgetComponent': {
         ...baseConfig,
@@ -1278,6 +1751,8 @@ export class WidgetConfigRegistryService {
       // ========================================
       'ClockWidgetComponent': {
         ...baseConfig,
+        // Display Settings
+        title: 'Clock Widget',
         timezone: 'local',
         timeFormat: '12',
         dateFormat: 'MM/DD/YYYY',
@@ -1285,14 +1760,64 @@ export class WidgetConfigRegistryService {
         showDate: true,
         showDay: true,
         showTime: true,
+
+        // Size Configuration
+        sizeOption: 'small',
+        width: 300,
+        height: 200,
+        widthUnit: 'px',
+        heightUnit: 'px',
+        fullWidth: false,
+        fullHeight: false,
+        minWidth: 200,
+        minHeight: 150,
+        maxWidth: 400,
+        maxHeight: 300,
+        aspectRatio: 'auto',
+        responsive: true,
+
+        // Style Settings
+        backgroundType: 'solid',
         backgroundColor: '#FFFFFF',
         borderColor: '#E5E7EB',
         textColor: '#374151',
         borderRadius: 8,
         borderWidth: 1,
         padding: 16,
+        shadow: 'small',
         fontSize: 18,
-        fontFamily: 'monospace'
+        fontFamily: 'monospace',
+
+        // Animation Settings
+        enableAnimations: true,
+        animationType: 'pulse',
+        animationDuration: 1000,
+        animationDelay: 0,
+        animationEasing: 'ease-in-out',
+        hoverEffects: false,
+        autoRefresh: true,
+
+        // Data Settings
+        refreshInterval: 1000, // 1 second
+        dataValidation: 'none',
+        showDataCount: false,
+        showLastUpdated: false,
+
+        // Security Settings
+        requireAuth: false,
+        allowedRoles: '',
+        permissionLevel: 'read',
+        dataEncryption: false,
+        auditLog: false,
+        rateLimit: 0,
+        sessionTimeout: 30,
+
+        // Interaction Settings
+        tooltipContent: 'Current time',
+        enableKeyboard: false,
+        enableFocus: false,
+        hoverEffect: 'none',
+        transitionDuration: 0
       },
       'WeatherWidgetComponent': {
         ...baseConfig,
@@ -1368,7 +1893,26 @@ export class WidgetConfigRegistryService {
    */
   private getBaseFallbackConfig(): any {
     return {
-      // Common styling
+      // Common Display Settings
+      title: 'Widget',
+
+      // Common Size Configuration
+      sizeOption: 'medium',
+      width: 300,
+      height: 200,
+      widthUnit: 'px',
+      heightUnit: 'px',
+      fullWidth: false,
+      fullHeight: false,
+      minWidth: 200,
+      minHeight: 150,
+      maxWidth: 800,
+      maxHeight: 600,
+      aspectRatio: 'auto',
+      responsive: true,
+
+      // Common Style Settings
+      backgroundType: 'solid',
       backgroundColor: '#FFFFFF',
       borderColor: '#E5E7EB',
       textColor: '#374151',
@@ -1379,31 +1923,61 @@ export class WidgetConfigRegistryService {
       fontSize: 14,
       fontFamily: 'system-ui, -apple-system, sans-serif',
       fontWeight: 'normal',
+      shadow: 'small',
 
-      // Common layout
-      responsive: true,
-      aspectRatio: 'auto',
-
-      // Common data
+      // Common Animation Settings
+      enableAnimations: true,
+      animationType: 'fade',
+      animationDuration: 300,
+      animationDelay: 0,
+      animationEasing: 'ease',
+      hoverEffects: true,
+      autoRefresh: false,
+
+      // Common Data Settings
       dataSource: 'static',
+      apiEndpoint: '',
       refreshInterval: 0,
       cacheEnabled: false,
       cacheDuration: 300,
+      dataValidation: 'none',
+      showDataCount: false,
+      showLastUpdated: false,
 
-      // Common features
-      enableAnimations: true,
-      enableTooltip: true,
-      enableRefresh: true,
-      enableExport: false,
-
-      // Common security
+      // Common Security Settings
       requireAuth: false,
       allowedRoles: '',
       permissionLevel: 'read',
       dataEncryption: false,
       auditLog: false,
       rateLimit: 0,
-      sessionTimeout: 30
+      sessionTimeout: 30,
+      requireHttps: false,
+      enableCors: true,
+
+      // Common Conditional Formatting
+      enableConditionalFormatting: false,
+      conditionField: '',
+      conditionOperator: 'equals',
+      conditionValue: '',
+      trueColor: '#10B981',
+      falseColor: '#EF4444',
+      trueIcon: 'check-circle',
+      falseIcon: 'x-circle',
+      showConditionalIcon: true,
+      animateConditionalChange: true,
+
+      // Common Interaction Settings
+      tooltipContent: '',
+      enableKeyboard: true,
+      enableFocus: true,
+      hoverEffect: 'scale',
+      transitionDuration: 300,
+
+      // Common Features
+      enableTooltip: true,
+      enableRefresh: true,
+      enableExport: false
     };
   }
 }