snow-flow 1.4.49 → 2.0.0

package/src/utils/widget-template-generator.ts

@@ -0,0 +1,1744 @@
+/**
+ * ServiceNow Widget Template Generator
+ * Generates functional ServiceNow Service Portal widget templates based on requirements
+ */
+
+export interface WidgetTemplateOptions {
+  title?: string;
+  instruction?: string;
+  type?: 'dashboard' | 'chart' | 'table' | 'form' | 'info' | 'auto';
+  theme?: 'default' | 'dark' | 'minimal';
+  responsive?: boolean;
+}
+
+export interface WidgetComponents {
+  template: string;
+  css: string;
+  serverScript: string;
+  clientScript: string;
+  optionSchema: string;
+}
+
+export class ServiceNowWidgetTemplateGenerator {
+  
+  /**
+   * Generate complete widget components based on instruction
+   */
+  generateWidget(options: WidgetTemplateOptions): WidgetComponents {
+    const { instruction = '', title = 'Widget', type = 'auto' } = options;
+    const detectedType = type === 'auto' ? this.detectWidgetType(instruction) : type;
+    
+    const widgetTitle = title || this.extractTitleFromInstruction(instruction);
+    
+    return {
+      template: this.generateTemplate(detectedType, widgetTitle, instruction),
+      css: this.generateCss(detectedType, options),
+      serverScript: this.generateServerScript(detectedType, instruction),
+      clientScript: this.generateClientScript(detectedType, instruction),
+      optionSchema: this.generateOptionSchema(detectedType)
+    };
+  }
+
+  /**
+   * Detect widget type from instruction
+   */
+  private detectWidgetType(instruction: string): string {
+    const lower = instruction.toLowerCase();
+    
+    if (lower.includes('chart') || lower.includes('graph') || lower.includes('analytics')) {
+      return 'chart';
+    }
+    if (lower.includes('dashboard') || lower.includes('metrics') || lower.includes('kpi')) {
+      return 'dashboard';
+    }
+    if (lower.includes('table') || lower.includes('list') || lower.includes('records')) {
+      return 'table';
+    }
+    if (lower.includes('form') || lower.includes('input') || lower.includes('create') || lower.includes('submit')) {
+      return 'form';
+    }
+    
+    return 'info'; // Default to info card widget
+  }
+
+  /**
+   * Extract widget title from instruction
+   */
+  private extractTitleFromInstruction(instruction: string): string {
+    // Simple extraction - look for patterns like "create X widget" or "X dashboard"
+    const patterns = [
+      /create\s+(.+?)\s+widget/i,
+      /(.+?)\s+dashboard/i,
+      /(.+?)\s+chart/i,
+      /(.+?)\s+table/i,
+      /(.+?)\s+form/i
+    ];
+    
+    for (const pattern of patterns) {
+      const match = instruction.match(pattern);
+      if (match) {
+        return match[1].replace(/\b\w/g, l => l.toUpperCase());
+      }
+    }
+    
+    // Fallback: use first few words
+    const words = instruction.split(' ').slice(0, 3);
+    return words.map(w => w.charAt(0).toUpperCase() + w.slice(1)).join(' ');
+  }
+
+  /**
+   * Generate HTML template based on widget type
+   */
+  private generateTemplate(type: string, title: string, instruction: string): string {
+    switch (type) {
+      case 'chart':
+        return this.generateChartTemplate(title);
+      case 'dashboard':
+        return this.generateDashboardTemplate(title);
+      case 'table':
+        return this.generateTableTemplate(title);
+      case 'form':
+        return this.generateFormTemplate(title);
+      case 'info':
+      default:
+        return this.generateInfoTemplate(title, instruction);
+    }
+  }
+
+  /**
+   * Chart widget template with Chart.js integration
+   */
+  private generateChartTemplate(title: string): string {
+    return `
+<div class="panel panel-default widget-chart">
+  <div class="panel-heading">
+    <h3 class="panel-title">{{data.title || '${title}'}}</h3>
+    <div class="panel-actions" ng-if="options.show_refresh">
+      <button class="btn btn-sm btn-default" ng-click="c.refreshData()" title="Refresh Chart">
+        <i class="fa fa-refresh" ng-class="{'fa-spin': data.loading}"></i>
+      </button>
+    </div>
+  </div>
+  <div class="panel-body">
+    <div ng-if="data.loading" class="text-center loading-state">
+      <i class="fa fa-spinner fa-spin fa-2x"></i>
+      <p class="text-muted">Loading chart data...</p>
+    </div>
+    
+    <div ng-if="!data.loading && !data.error" class="chart-container">
+      <canvas id="chart-{{::widget.id}}" width="400" height="300"></canvas>
+      
+      <!-- Chart Legend -->
+      <div ng-if="data.chart_legend" class="chart-legend">
+        <div class="legend-item" ng-repeat="item in data.chart_legend">
+          <span class="legend-color" style="background-color: {{item.color}}"></span>
+          <span class="legend-label">{{item.label}}: {{item.value}}</span>
+        </div>
+      </div>
+    </div>
+    
+    <div ng-if="data.error" class="alert alert-danger">
+      <i class="fa fa-exclamation-triangle"></i>
+      <strong>Chart Error:</strong> {{data.error}}
+    </div>
+    
+    <div ng-if="!data.loading && !data.error && (!data.chart_data || data.chart_data.length === 0)" class="empty-state text-center">
+      <i class="fa fa-bar-chart fa-3x text-muted"></i>
+      <h4>No Data Available</h4>
+      <p class="text-muted">{{data.empty_message || 'No chart data to display'}}</p>
+    </div>
+  </div>
+</div>`.trim();
+  }
+
+  /**
+   * Dashboard widget template with metrics
+   */
+  private generateDashboardTemplate(title: string): string {
+    return `
+<div class="widget-dashboard">
+  <div class="panel panel-default">
+    <div class="panel-heading">
+      <h3 class="panel-title">{{data.title || '${title}'}}</h3>
+      <span class="panel-subtitle" ng-if="data.last_updated">
+        Last updated: {{data.last_updated | date:'medium'}}
+      </span>
+    </div>
+    <div class="panel-body">
+      <div ng-if="data.loading" class="text-center loading-state">
+        <i class="fa fa-spinner fa-spin fa-2x"></i>
+        <p class="text-muted">Loading dashboard data...</p>
+      </div>
+      
+      <div ng-if="!data.loading && data.metrics && data.metrics.length > 0" class="metrics-grid">
+        <div class="metric-item" ng-repeat="metric in data.metrics track by $index" 
+             ng-class="'metric-col-' + (12/data.metrics.length)">
+          <div class="metric-card" ng-class="{
+            'metric-critical': metric.status === 'critical',
+            'metric-warning': metric.status === 'warning', 
+            'metric-success': metric.status === 'success',
+            'metric-info': metric.status === 'info'
+          }">
+            <div class="metric-icon" ng-if="metric.icon">
+              <i class="fa fa-{{metric.icon}}"></i>
+            </div>
+            <h4 class="metric-label">{{metric.label}}</h4>
+            <div class="metric-value-container">
+              <h2 class="metric-value">
+                {{metric.value}} 
+                <small ng-if="metric.unit" class="metric-unit">{{metric.unit}}</small>
+              </h2>
+              <div class="metric-trend" ng-if="metric.trend !== undefined">
+                <i class="fa" ng-class="{
+                  'fa-arrow-up text-success': metric.trend > 0,
+                  'fa-arrow-down text-danger': metric.trend < 0,
+                  'fa-minus text-muted': metric.trend === 0
+                }"></i>
+                <span class="trend-text">{{metric.trend_text || (metric.trend > 0 ? '+' + metric.trend + '%' : metric.trend + '%')}}</span>
+              </div>
+            </div>
+            <div class="metric-description" ng-if="metric.description">
+              {{metric.description}}
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <div ng-if="!data.loading && (!data.metrics || data.metrics.length === 0)" class="empty-state text-center">
+        <i class="fa fa-dashboard fa-3x text-muted"></i>
+        <h4>No Metrics Available</h4>
+        <p class="text-muted">{{data.empty_message || 'Dashboard metrics will appear here'}}</p>
+      </div>
+    </div>
+  </div>
+</div>`.trim();
+  }
+
+  /**
+   * Table widget template with sorting and filtering
+   */
+  private generateTableTemplate(title: string): string {
+    return `
+<div class="panel panel-default widget-table">
+  <div class="panel-heading">
+    <h3 class="panel-title">{{data.title || '${title}'}}</h3>
+    <div class="panel-actions">
+      <div class="input-group input-group-sm search-container" ng-if="options.enable_search">
+        <input type="text" class="form-control" placeholder="Search records..." 
+               ng-model="c.searchTerm" ng-change="c.onSearchChange()">
+        <span class="input-group-btn">
+          <button class="btn btn-default" ng-click="c.clearSearch()" ng-if="c.searchTerm">
+            <i class="fa fa-times"></i>
+          </button>
+        </span>
+      </div>
+      <button class="btn btn-sm btn-primary" ng-click="c.refreshData()" title="Refresh Data">
+        <i class="fa fa-refresh" ng-class="{'fa-spin': data.loading}"></i>
+      </button>
+    </div>
+  </div>
+  <div class="panel-body">
+    <div ng-if="data.loading" class="text-center loading-state">
+      <i class="fa fa-spinner fa-spin fa-2x"></i>
+      <p class="text-muted">Loading records...</p>
+    </div>
+    
+    <div ng-if="!data.loading && data.records && data.records.length > 0" class="table-container">
+      <table class="table table-striped table-hover table-responsive">
+        <thead>
+          <tr>
+            <th ng-repeat="column in data.columns" 
+                ng-click="c.sortBy(column.field)" 
+                class="sortable-header"
+                ng-class="{'sorted': c.sortField === column.field}">
+              {{column.label}}
+              <span class="sort-indicator">
+                <i class="fa fa-sort" ng-if="c.sortField !== column.field"></i>
+                <i class="fa fa-sort-up" ng-if="c.sortField === column.field && !c.sortReverse"></i>
+                <i class="fa fa-sort-down" ng-if="c.sortField === column.field && c.sortReverse"></i>
+              </span>
+            </th>
+            <th ng-if="options.show_actions" class="actions-column">Actions</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr ng-repeat="record in data.records | filter:c.searchTerm | orderBy:c.sortField:c.sortReverse | limitTo:options.page_size track by record.sys_id" 
+              ng-class="{'row-highlighted': record.highlighted}">
+            <td ng-repeat="column in data.columns" ng-class="'column-' + column.type">
+              <!-- Link fields -->
+              <a ng-if="column.type === 'link'" 
+                 href="{{record[column.field + '_link'] || '#'}}" 
+                 target="_blank"
+                 class="record-link">
+                {{record[column.field] || '-'}}
+              </a>
+              
+              <!-- Date fields -->
+              <span ng-if="column.type === 'date'">
+                {{record[column.field] | date:'short'}}
+              </span>
+              
+              <!-- Status/State fields -->
+              <span ng-if="column.type === 'status'" 
+                    class="label"
+                    ng-class="'label-' + (record[column.field + '_class'] || 'default')">
+                {{record[column.field] || '-'}}
+              </span>
+              
+              <!-- Default text fields -->
+              <span ng-if="!column.type || (column.type !== 'link' && column.type !== 'date' && column.type !== 'status')">
+                {{record[column.field] || '-'}}
+              </span>
+            </td>
+            
+            <td ng-if="options.show_actions" class="actions-column">
+              <button class="btn btn-xs btn-default" ng-click="c.viewRecord(record)" title="View">
+                <i class="fa fa-eye"></i>
+              </button>
+              <button class="btn btn-xs btn-primary" ng-click="c.editRecord(record)" title="Edit" ng-if="options.allow_edit">
+                <i class="fa fa-edit"></i>
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+      
+      <!-- Pagination -->
+      <div ng-if="data.total_records > options.page_size" class="table-pagination text-center">
+        <button class="btn btn-sm btn-default" ng-click="c.previousPage()" ng-disabled="c.currentPage <= 1">
+          <i class="fa fa-chevron-left"></i> Previous
+        </button>
+        <span class="pagination-info">
+          Page {{c.currentPage}} of {{c.totalPages}} ({{data.total_records}} total)
+        </span>
+        <button class="btn btn-sm btn-default" ng-click="c.nextPage()" ng-disabled="c.currentPage >= c.totalPages">
+          Next <i class="fa fa-chevron-right"></i>
+        </button>
+      </div>
+    </div>
+    
+    <div ng-if="!data.loading && (!data.records || data.records.length === 0)" class="empty-state text-center">
+      <i class="fa fa-table fa-3x text-muted"></i>
+      <h4>No Records Found</h4>
+      <p class="text-muted">{{data.empty_message || 'No records match your criteria'}}</p>
+    </div>
+  </div>
+</div>`.trim();
+  }
+
+  /**
+   * Form widget template with validation
+   */
+  private generateFormTemplate(title: string): string {
+    return `
+<div class="panel panel-default widget-form">
+  <div class="panel-heading">
+    <h3 class="panel-title">{{data.title || '${title}'}}</h3>
+  </div>
+  <div class="panel-body">
+    <div ng-if="data.success_message" class="alert alert-success alert-dismissible">
+      <button type="button" class="close" ng-click="data.success_message = null">
+        <span>&times;</span>
+      </button>
+      <i class="fa fa-check-circle"></i> {{data.success_message}}
+    </div>
+    
+    <div ng-if="data.error_message" class="alert alert-danger alert-dismissible">
+      <button type="button" class="close" ng-click="data.error_message = null">
+        <span>&times;</span>
+      </button>
+      <i class="fa fa-exclamation-triangle"></i> {{data.error_message}}
+    </div>
+    
+    <form name="widgetForm" ng-submit="c.submitForm()" novalidate class="widget-form">
+      <div class="form-group" ng-repeat="field in data.form_fields" ng-class="{'has-error': widgetForm[field.name].$invalid && widgetForm[field.name].$touched}">
+        <label class="control-label" for="{{field.name}}">
+          {{field.label}}
+          <span class="text-danger" ng-if="field.required">*</span>
+          <span class="help-icon" ng-if="field.help_text" title="{{field.help_text}}">
+            <i class="fa fa-question-circle"></i>
+          </span>
+        </label>
+        
+        <!-- Text Input -->
+        <input ng-if="field.type === 'text' || !field.type" 
+               type="text" 
+               class="form-control" 
+               id="{{field.name}}"
+               name="{{field.name}}"
+               ng-model="c.formData[field.name]"
+               ng-required="field.required"
+               placeholder="{{field.placeholder}}"
+               maxlength="{{field.max_length}}">
+        
+        <!-- Email Input -->
+        <input ng-if="field.type === 'email'" 
+               type="email" 
+               class="form-control" 
+               id="{{field.name}}"
+               name="{{field.name}}"
+               ng-model="c.formData[field.name]"
+               ng-required="field.required"
+               placeholder="{{field.placeholder}}">
+        
+        <!-- Textarea -->
+        <textarea ng-if="field.type === 'textarea'"
+                  class="form-control"
+                  id="{{field.name}}"
+                  name="{{field.name}}"
+                  ng-model="c.formData[field.name]"
+                  ng-required="field.required"
+                  placeholder="{{field.placeholder}}"
+                  rows="{{field.rows || 3}}"
+                  maxlength="{{field.max_length}}"></textarea>
+        
+        <!-- Select Dropdown -->
+        <select ng-if="field.type === 'select'"
+                class="form-control"
+                id="{{field.name}}"
+                name="{{field.name}}"
+                ng-model="c.formData[field.name]"
+                ng-required="field.required">
+          <option value="">{{field.placeholder || 'Select ' + field.label}}</option>
+          <option ng-repeat="option in field.options" value="{{option.value}}">{{option.label}}</option>
+        </select>
+        
+        <!-- Checkbox -->
+        <div ng-if="field.type === 'checkbox'" class="checkbox">
+          <label>
+            <input type="checkbox" 
+                   id="{{field.name}}"
+                   name="{{field.name}}"
+                   ng-model="c.formData[field.name]"
+                   ng-required="field.required">
+            {{field.checkbox_label || field.label}}
+          </label>
+        </div>
+        
+        <!-- Date Input -->
+        <input ng-if="field.type === 'date'" 
+               type="date" 
+               class="form-control" 
+               id="{{field.name}}"
+               name="{{field.name}}"
+               ng-model="c.formData[field.name]"
+               ng-required="field.required">
+        
+        <!-- Validation Messages -->
+        <div class="form-field-errors" ng-if="widgetForm[field.name].$invalid && widgetForm[field.name].$touched">
+          <small class="text-danger" ng-if="widgetForm[field.name].$error.required">
+            {{field.label}} is required
+          </small>
+          <small class="text-danger" ng-if="widgetForm[field.name].$error.email">
+            Please enter a valid email address
+          </small>
+          <small class="text-danger" ng-if="widgetForm[field.name].$error.maxlength">
+            {{field.label}} is too long (max {{field.max_length}} characters)
+          </small>
+        </div>
+        
+        <div class="field-help-text" ng-if="field.help_text">
+          <small class="text-muted">{{field.help_text}}</small>
+        </div>
+      </div>
+      
+      <div class="form-actions">
+        <button type="submit" 
+                class="btn btn-primary" 
+                ng-disabled="widgetForm.$invalid || c.submitting">
+          <i class="fa fa-spinner fa-spin" ng-if="c.submitting"></i>
+          <i class="fa fa-check" ng-if="!c.submitting"></i>
+          {{c.submitting ? (options.submit_text_loading || 'Submitting...') : (options.submit_text || 'Submit')}}
+        </button>
+        <button type="button" 
+                class="btn btn-default" 
+                ng-click="c.resetForm()"
+                ng-if="options.show_reset">
+          <i class="fa fa-undo"></i> Reset
+        </button>
+        <button type="button" 
+                class="btn btn-link" 
+                ng-click="c.cancelForm()"
+                ng-if="options.show_cancel">
+          Cancel
+        </button>
+      </div>
+    </form>
+  </div>
+</div>`.trim();
+  }
+
+  /**
+   * Info card widget template (default/generic)
+   */
+  private generateInfoTemplate(title: string, instruction: string): string {
+    return `
+<div class="panel panel-default widget-info">
+  <div class="panel-heading">
+    <h3 class="panel-title">{{data.title || '${title}'}}</h3>
+    <div class="panel-actions" ng-if="options.show_refresh">
+      <button class="btn btn-sm btn-default" ng-click="c.refreshData()" title="Refresh">
+        <i class="fa fa-refresh" ng-class="{'fa-spin': data.loading}"></i>
+      </button>
+    </div>
+  </div>
+  <div class="panel-body">
+    <div ng-if="data.loading" class="text-center loading-state">
+      <i class="fa fa-spinner fa-spin fa-2x"></i>
+      <p class="text-muted">Loading information...</p>
+    </div>
+    
+    <div ng-if="!data.loading">
+      <!-- Primary Content -->
+      <div ng-if="data.content" class="widget-content">
+        <div ng-if="data.content.icon" class="content-icon text-center">
+          <i class="fa fa-{{data.content.icon}} fa-3x" ng-class="'text-' + (data.content.icon_color || 'primary')"></i>
+        </div>
+        
+        <div ng-if="data.content.title" class="content-title">
+          <h4>{{data.content.title}}</h4>
+        </div>
+        
+        <div ng-if="data.content.description" class="content-description">
+          <p ng-bind-html="data.content.description"></p>
+        </div>
+        
+        <div ng-if="data.content.value" class="content-value text-center">
+          <h2 class="value-display" ng-class="'text-' + (data.content.value_color || 'info')">
+            {{data.content.value}}
+            <small ng-if="data.content.unit">{{data.content.unit}}</small>
+          </h2>
+        </div>
+      </div>
+      
+      <!-- List Items -->
+      <div ng-if="data.items && data.items.length > 0" class="info-items">
+        <div class="list-group">
+          <div class="list-group-item info-item" ng-repeat="item in data.items track by $index"
+               ng-class="'item-' + (item.type || 'default')">
+            <div class="item-header" ng-if="item.title || item.icon">
+              <div class="item-icon" ng-if="item.icon">
+                <i class="fa fa-{{item.icon}}" ng-class="'text-' + (item.icon_color || 'default')"></i>
+              </div>
+              <div class="item-title" ng-if="item.title">
+                <strong>{{item.title}}</strong>
+              </div>
+            </div>
+            
+            <div class="item-content">
+              <div class="item-description" ng-if="item.description">
+                {{item.description}}
+              </div>
+              
+              <div class="item-value" ng-if="item.value">
+                <span class="value" ng-class="'text-' + (item.value_color || 'default')">
+                  {{item.value}}
+                  <small ng-if="item.unit">{{item.unit}}</small>
+                </span>
+              </div>
+            </div>
+            
+            <div class="item-meta" ng-if="item.timestamp || item.meta">
+              <small class="text-muted">
+                <span ng-if="item.timestamp">{{item.timestamp | date:'medium'}}</span>
+                <span ng-if="item.meta">{{item.meta}}</span>
+              </small>
+            </div>
+            
+            <div class="item-actions" ng-if="item.actions && item.actions.length > 0">
+              <button ng-repeat="action in item.actions" 
+                      class="btn btn-xs"
+                      ng-class="'btn-' + (action.type || 'default')"
+                      ng-click="c.executeAction(action, item)">
+                <i class="fa fa-{{action.icon}}" ng-if="action.icon"></i>
+                {{action.label}}
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Empty State -->
+      <div ng-if="!data.content && (!data.items || data.items.length === 0)" class="empty-state text-center">
+        <i class="fa fa-info-circle fa-3x text-muted"></i>
+        <h4>{{data.empty_title || 'Information Widget'}}</h4>
+        <p class="text-muted">{{data.empty_message || 'Widget data will appear here when available'}}</p>
+      </div>
+    </div>
+  </div>
+</div>`.trim();
+  }
+
+  /**
+   * Generate CSS styles based on widget type and options
+   */
+  private generateCss(type: string, options: WidgetTemplateOptions): string {
+    const { theme = 'default', responsive = true } = options;
+    
+    let css = `
+/* Base Panel Styles */
+.panel {
+  margin-bottom: 20px;
+  border-radius: 6px;
+  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
+  border: 1px solid #ddd;
+}
+
+.panel-heading {
+  background: linear-gradient(to bottom, #f8f9fa 0%, #e9ecef 100%);
+  border-bottom: 1px solid #dee2e6;
+  position: relative;
+  padding: 15px;
+  border-radius: 5px 5px 0 0;
+}
+
+.panel-title {
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: #495057;
+}
+
+.panel-subtitle {
+  font-size: 12px;
+  color: #6c757d;
+  display: block;
+  margin-top: 4px;
+}
+
+.panel-actions {
+  position: absolute;
+  right: 15px;
+  top: 50%;
+  transform: translateY(-50%);
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.panel-body {
+  padding: 15px;
+}
+
+/* Loading States */
+.loading-state {
+  padding: 40px 20px;
+}
+
+.loading-state .fa-spinner {
+  color: #007bff;
+  margin-bottom: 10px;
+}
+
+/* Empty States */
+.empty-state {
+  padding: 40px 20px;
+}
+
+.empty-state .fa {
+  margin-bottom: 15px;
+  opacity: 0.5;
+}
+`;
+
+    // Add type-specific styles
+    switch (type) {
+      case 'chart':
+        css += this.getChartCss();
+        break;
+      case 'dashboard':
+        css += this.getDashboardCss();
+        break;
+      case 'table':
+        css += this.getTableCss();
+        break;
+      case 'form':
+        css += this.getFormCss();
+        break;
+      case 'info':
+        css += this.getInfoCss();
+        break;
+    }
+
+    // Add theme styles
+    if (theme === 'dark') {
+      css += this.getDarkThemeCss();
+    } else if (theme === 'minimal') {
+      css += this.getMinimalThemeCss();
+    }
+
+    // Add responsive styles
+    if (responsive) {
+      css += this.getResponsiveCss();
+    }
+
+    return css;
+  }
+
+  private getChartCss(): string {
+    return `
+/* Chart Widget Styles */
+.widget-chart canvas {
+  max-width: 100%;
+  height: auto;
+}
+
+.chart-container {
+  position: relative;
+}
+
+.chart-legend {
+  margin-top: 15px;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+  justify-content: center;
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.legend-color {
+  width: 12px;
+  height: 12px;
+  border-radius: 2px;
+}
+
+.legend-label {
+  font-size: 12px;
+  color: #495057;
+}
+`;
+  }
+
+  private getDashboardCss(): string {
+    return `
+/* Dashboard Widget Styles */
+.metrics-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.metric-item {
+  flex: 1;
+  min-width: 200px;
+}
+
+.metric-card {
+  background: #fff;
+  border: 1px solid #e9ecef;
+  border-radius: 6px;
+  padding: 20px;
+  text-align: center;
+  transition: all 0.3s ease;
+  height: 100%;
+}
+
+.metric-card:hover {
+  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+  transform: translateY(-2px);
+}
+
+.metric-card.metric-critical {
+  border-left: 4px solid #dc3545;
+}
+
+.metric-card.metric-warning {
+  border-left: 4px solid #ffc107;
+}
+
+.metric-card.metric-success {
+  border-left: 4px solid #28a745;
+}
+
+.metric-card.metric-info {
+  border-left: 4px solid #17a2b8;
+}
+
+.metric-icon {
+  font-size: 24px;
+  color: #6c757d;
+  margin-bottom: 10px;
+}
+
+.metric-label {
+  font-size: 14px;
+  color: #6c757d;
+  margin-bottom: 8px;
+  font-weight: 500;
+}
+
+.metric-value {
+  font-size: 28px;
+  font-weight: 700;
+  margin-bottom: 8px;
+  line-height: 1;
+}
+
+.metric-unit {
+  font-size: 14px;
+  font-weight: 400;
+  color: #6c757d;
+}
+
+.metric-trend {
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.trend-text {
+  font-weight: 500;
+}
+
+.metric-description {
+  font-size: 12px;
+  color: #6c757d;
+  margin-top: 8px;
+}
+`;
+  }
+
+  private getTableCss(): string {
+    return `
+/* Table Widget Styles */
+.search-container {
+  max-width: 200px;
+  margin-right: 8px;
+}
+
+.table-container {
+  overflow-x: auto;
+}
+
+.table {
+  margin-bottom: 0;
+}
+
+.sortable-header {
+  cursor: pointer;
+  user-select: none;
+  position: relative;
+}
+
+.sortable-header:hover {
+  background-color: #f8f9fa;
+}
+
+.sort-indicator {
+  margin-left: 5px;
+  opacity: 0.5;
+}
+
+.sorted .sort-indicator {
+  opacity: 1;
+}
+
+.actions-column {
+  width: 100px;
+  text-align: center;
+}
+
+.record-link {
+  color: #007bff;
+  text-decoration: none;
+}
+
+.record-link:hover {
+  text-decoration: underline;
+}
+
+.row-highlighted {
+  background-color: #fff3cd !important;
+}
+
+.table-pagination {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #dee2e6;
+}
+
+.pagination-info {
+  margin: 0 15px;
+  color: #6c757d;
+  font-size: 14px;
+}
+
+.column-status .label {
+  font-size: 11px;
+  padding: 3px 8px;
+}
+
+.label-critical { background-color: #dc3545; }
+.label-warning { background-color: #ffc107; color: #212529; }
+.label-success { background-color: #28a745; }
+.label-info { background-color: #17a2b8; }
+.label-default { background-color: #6c757d; }
+`;
+  }
+
+  private getFormCss(): string {
+    return `
+/* Form Widget Styles */
+.widget-form {
+  max-width: 600px;
+}
+
+.form-group {
+  margin-bottom: 20px;
+}
+
+.control-label {
+  font-weight: 500;
+  margin-bottom: 5px;
+  display: block;
+}
+
+.help-icon {
+  color: #6c757d;
+  cursor: help;
+  margin-left: 4px;
+}
+
+.form-control {
+  border-radius: 4px;
+  border: 1px solid #ced4da;
+  padding: 8px 12px;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.form-control:focus {
+  border-color: #80bdff;
+  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
+}
+
+.has-error .form-control {
+  border-color: #dc3545;
+}
+
+.has-error .control-label {
+  color: #dc3545;
+}
+
+.form-field-errors {
+  margin-top: 5px;
+}
+
+.field-help-text {
+  margin-top: 5px;
+}
+
+.form-actions {
+  margin-top: 30px;
+  padding-top: 20px;
+  border-top: 1px solid #dee2e6;
+  display: flex;
+  gap: 10px;
+  align-items: center;
+}
+
+.checkbox label {
+  font-weight: normal;
+  margin-bottom: 0;
+  cursor: pointer;
+}
+`;
+  }
+
+  private getInfoCss(): string {
+    return `
+/* Info Widget Styles */
+.widget-content {
+  text-align: center;
+  margin-bottom: 20px;
+}
+
+.content-icon {
+  margin-bottom: 15px;
+}
+
+.content-title h4 {
+  margin-bottom: 10px;
+  color: #495057;
+}
+
+.content-description {
+  color: #6c757d;
+  margin-bottom: 15px;
+}
+
+.content-value {
+  margin-bottom: 15px;
+}
+
+.value-display {
+  font-weight: 700;
+  margin-bottom: 0;
+}
+
+.info-items {
+  margin-top: 20px;
+}
+
+.info-item {
+  border: 1px solid #e9ecef;
+  margin-bottom: 8px;
+  padding: 12px;
+  border-radius: 4px;
+}
+
+.item-header {
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+  gap: 8px;
+}
+
+.item-icon {
+  font-size: 16px;
+}
+
+.item-title {
+  flex: 1;
+}
+
+.item-content {
+  margin-bottom: 8px;
+}
+
+.item-description {
+  color: #6c757d;
+  margin-bottom: 5px;
+}
+
+.item-value .value {
+  font-weight: 600;
+}
+
+.item-meta {
+  margin-top: 8px;
+}
+
+.item-actions {
+  margin-top: 8px;
+  display: flex;
+  gap: 5px;
+}
+`;
+  }
+
+  private getDarkThemeCss(): string {
+    return `
+/* Dark Theme */
+.panel {
+  background-color: #343a40;
+  border-color: #495057;
+}
+
+.panel-heading {
+  background: linear-gradient(to bottom, #495057 0%, #343a40 100%);
+  border-bottom-color: #495057;
+}
+
+.panel-title {
+  color: #fff;
+}
+
+.panel-subtitle {
+  color: #adb5bd;
+}
+
+.panel-body {
+  background-color: #343a40;
+  color: #fff;
+}
+
+.metric-card {
+  background-color: #495057;
+  border-color: #6c757d;
+  color: #fff;
+}
+
+.table {
+  color: #fff;
+}
+
+.table-striped tbody tr:nth-of-type(odd) {
+  background-color: rgba(255,255,255,.05);
+}
+`;
+  }
+
+  private getMinimalThemeCss(): string {
+    return `
+/* Minimal Theme */
+.panel {
+  border: none;
+  box-shadow: none;
+  background: transparent;
+}
+
+.panel-heading {
+  background: transparent;
+  border-bottom: 1px solid #dee2e6;
+  padding: 10px 0;
+}
+
+.panel-title {
+  font-size: 18px;
+  font-weight: 300;
+}
+
+.panel-body {
+  padding: 20px 0;
+}
+
+.metric-card {
+  background: transparent;
+  border: 1px solid #dee2e6;
+  box-shadow: none;
+}
+`;
+  }
+
+  private getResponsiveCss(): string {
+    return `
+/* Responsive Styles */
+@media (max-width: 768px) {
+  .panel-actions {
+    position: static;
+    transform: none;
+    margin-top: 10px;
+    text-align: right;
+  }
+  
+  .metrics-grid {
+    flex-direction: column;
+  }
+  
+  .metric-item {
+    min-width: auto;
+  }
+  
+  .search-container {
+    max-width: none;
+    margin-bottom: 10px;
+    margin-right: 0;
+  }
+  
+  .table-pagination {
+    text-align: center;
+  }
+  
+  .pagination-info {
+    display: block;
+    margin: 10px 0;
+  }
+  
+  .form-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  
+  .form-actions .btn {
+    margin-bottom: 5px;
+  }
+}
+
+@media (max-width: 480px) {
+  .panel-body {
+    padding: 10px;
+  }
+  
+  .metric-value {
+    font-size: 24px;
+  }
+  
+  .table-container {
+    font-size: 14px;
+  }
+  
+  .actions-column {
+    width: 80px;
+  }
+  
+  .btn-xs {
+    padding: 2px 5px;
+    font-size: 10px;
+  }
+}
+`;
+  }
+
+  /**
+   * Generate server script based on widget type
+   */
+  private generateServerScript(type: string, instruction: string): string {
+    const baseScript = `
+(function() {
+  // Widget server script - runs server-side to fetch data
+  var widgetType = '${type}';
+  var instruction = '${instruction.replace(/'/g, "\\'")}';
+  
+  // Set widget title
+  data.title = options.title || '${this.extractTitleFromInstruction(instruction)}';
+  data.loading = false;
+  data.error = null;
+  
+  try {
+    // Widget-specific data loading
+    switch(widgetType) {`;
+
+    switch (type) {
+      case 'chart':
+        return baseScript + `
+      case 'chart':
+        loadChartData();
+        break;
+      case 'dashboard':
+        loadDashboardData();
+        break;
+      case 'table':
+        loadTableData();
+        break;
+      case 'form':
+        loadFormData();
+        break;
+      default:
+        loadInfoData();
+    }
+  } catch (e) {
+    data.error = 'Server error: ' + e.message;
+    gs.error('Widget server script error: ' + e.message);
+  }
+  
+  function loadChartData() {
+    // Sample chart data - replace with actual ServiceNow queries
+    data.chart_data = [
+      { label: 'Open', value: 25, color: '#dc3545' },
+      { label: 'In Progress', value: 45, color: '#ffc107' },
+      { label: 'Resolved', value: 30, color: '#28a745' }
+    ];
+    
+    data.chart_legend = data.chart_data;
+    data.chart_type = options.chart_type || 'doughnut';
+    
+    // Example: Load incident data
+    // var gr = new GlideRecord('incident');
+    // gr.addQuery('state', 'IN', '1,2,3');
+    // gr.query();
+    // data.chart_data = processIncidentData(gr);
+  }
+  
+  function loadDashboardData() {
+    data.metrics = [
+      {
+        label: 'Total Items',
+        value: 150,
+        unit: '',
+        status: 'info',
+        icon: 'list',
+        trend: 5,
+        trend_text: '+5%'
+      },
+      {
+        label: 'Critical Issues',
+        value: 3,
+        unit: '',
+        status: 'critical',
+        icon: 'exclamation-triangle',
+        trend: -2,
+        trend_text: '-2 from yesterday'
+      },
+      {
+        label: 'Success Rate',
+        value: 98.5,
+        unit: '%',
+        status: 'success',
+        icon: 'check-circle',
+        trend: 1,
+        trend_text: '+1%'
+      }
+    ];
+    
+    data.last_updated = new GlideDateTime().getDisplayValue();
+  }
+  
+  function loadTableData() {
+    data.columns = [
+      { field: 'number', label: 'Number', type: 'link' },
+      { field: 'short_description', label: 'Description', type: 'text' },
+      { field: 'state', label: 'State', type: 'status' },
+      { field: 'opened_at', label: 'Opened', type: 'date' }
+    ];
+    
+    data.records = [];
+    data.total_records = 0;
+    
+    // Example: Load incident records
+    // var gr = new GlideRecord('incident');
+    // gr.orderByDesc('opened_at');
+    // gr.setLimit(options.page_size || 10);
+    // gr.query();
+    // 
+    // while (gr.next()) {
+    //   data.records.push({
+    //     sys_id: gr.getUniqueValue(),
+    //     number: gr.getDisplayValue('number'),
+    //     number_link: '/' + gr.getTableName() + '.do?sys_id=' + gr.getUniqueValue(),
+    //     short_description: gr.getDisplayValue('short_description'),
+    //     state: gr.getDisplayValue('state'),
+    //     state_class: getStateClass(gr.getValue('state')),
+    //     opened_at: gr.getDisplayValue('opened_at')
+    //   });
+    // }
+    // 
+    // data.total_records = gr.getRowCount();
+  }
+  
+  function loadFormData() {
+    data.form_fields = [
+      {
+        name: 'title',
+        label: 'Title',
+        type: 'text',
+        required: true,
+        placeholder: 'Enter title...'
+      },
+      {
+        name: 'description',
+        label: 'Description',
+        type: 'textarea',
+        required: false,
+        placeholder: 'Enter description...',
+        rows: 3
+      },
+      {
+        name: 'priority',
+        label: 'Priority',
+        type: 'select',
+        required: true,
+        options: [
+          { value: '1', label: 'Critical' },
+          { value: '2', label: 'High' },
+          { value: '3', label: 'Medium' },
+          { value: '4', label: 'Low' }
+        ]
+      }
+    ];
+  }
+  
+  function loadInfoData() {
+    data.content = {
+      icon: 'info-circle',
+      icon_color: 'primary',
+      title: 'Information Widget',
+      description: 'This widget displays important information and updates.',
+      value: null
+    };
+    
+    data.items = [
+      {
+        title: 'Sample Information',
+        description: 'This is sample information displayed in the widget.',
+        icon: 'info',
+        icon_color: 'info',
+        timestamp: new GlideDateTime().getDisplayValue()
+      }
+    ];
+  }
+})();`.trim();
+
+      default:
+        return baseScript + `
+      default:
+        loadInfoData();
+    }
+  } catch (e) {
+    data.error = 'Server error: ' + e.message;
+    gs.error('Widget server script error: ' + e.message);
+  }
+  
+  function loadInfoData() {
+    data.content = {
+      icon: 'info-circle',
+      icon_color: 'primary',
+      title: 'Information Widget',
+      description: 'This widget displays important information and updates.',
+      value: null
+    };
+    
+    data.items = [
+      {
+        title: 'Sample Information',
+        description: 'This is sample information displayed in the widget.',
+        icon: 'info',
+        icon_color: 'info',
+        timestamp: new GlideDateTime().getDisplayValue()
+      }
+    ];
+  }
+})();`.trim();
+    }
+  }
+
+  /**
+   * Generate client script based on widget type
+   */
+  private generateClientScript(type: string, instruction: string): string {
+    const baseScript = `
+function($scope, $http, spUtil, $timeout) {
+  var c = this;
+  var widgetType = '${type}';
+  
+  // Initialize controller
+  c.init = function() {
+    c.widgetType = widgetType;
+    c.loading = false;
+    
+    // Type-specific initialization
+    switch(widgetType) {`;
+
+    switch (type) {
+      case 'chart':
+        return baseScript + `
+      case 'chart':
+        c.initChart();
+        break;
+      case 'dashboard':
+        c.initDashboard();
+        break;
+      case 'table':
+        c.initTable();
+        break;
+      case 'form':
+        c.initForm();
+        break;
+      default:
+        c.initInfo();
+    }
+  };
+  
+  // Chart-specific functions
+  c.initChart = function() {
+    $timeout(function() {
+      if (c.data.chart_data && c.data.chart_data.length > 0) {
+        c.renderChart();
+      }
+    }, 100);
+  };
+  
+  c.renderChart = function() {
+    var canvas = document.getElementById('chart-' + c.widget.id);
+    if (!canvas) return;
+    
+    var ctx = canvas.getContext('2d');
+    var chartType = c.data.chart_type || 'doughnut';
+    
+    // Simple chart rendering (requires Chart.js)
+    if (typeof Chart !== 'undefined') {
+      new Chart(ctx, {
+        type: chartType,
+        data: {
+          labels: c.data.chart_data.map(function(item) { return item.label; }),
+          datasets: [{
+            data: c.data.chart_data.map(function(item) { return item.value; }),
+            backgroundColor: c.data.chart_data.map(function(item) { return item.color; })
+          }]
+        },
+        options: {
+          responsive: true,
+          maintainAspectRatio: false,
+          legend: {
+            display: false
+          }
+        }
+      });
+    }
+  };
+  
+  c.refreshData = function() {
+    c.loading = true;
+    c.server.refresh().then(function() {
+      c.loading = false;
+      if (widgetType === 'chart') {
+        $timeout(function() {
+          c.renderChart();
+        }, 100);
+      }
+    });
+  };
+  
+  // Dashboard functions
+  c.initDashboard = function() {
+    // Dashboard initialization
+  };
+  
+  // Table functions
+  c.initTable = function() {
+    c.currentPage = 1;
+    c.sortField = null;
+    c.sortReverse = false;
+    c.searchTerm = '';
+    c.calculatePagination();
+  };
+  
+  c.sortBy = function(field) {
+    if (c.sortField === field) {
+      c.sortReverse = !c.sortReverse;
+    } else {
+      c.sortField = field;
+      c.sortReverse = false;
+    }
+  };
+  
+  c.onSearchChange = function() {
+    c.currentPage = 1;
+    c.calculatePagination();
+  };
+  
+  c.clearSearch = function() {
+    c.searchTerm = '';
+    c.onSearchChange();
+  };
+  
+  c.calculatePagination = function() {
+    var pageSize = c.options.page_size || 10;
+    c.totalPages = Math.ceil((c.data.total_records || 0) / pageSize);
+  };
+  
+  c.previousPage = function() {
+    if (c.currentPage > 1) {
+      c.currentPage--;
+    }
+  };
+  
+  c.nextPage = function() {
+    if (c.currentPage < c.totalPages) {
+      c.currentPage++;
+    }
+  };
+  
+  c.viewRecord = function(record) {
+    // Navigate to record
+    window.open('/' + record.sys_table + '.do?sys_id=' + record.sys_id, '_blank');
+  };
+  
+  c.editRecord = function(record) {
+    // Navigate to record form
+    window.open('/' + record.sys_table + '.do?sys_id=' + record.sys_id, '_blank');
+  };
+  
+  // Form functions
+  c.initForm = function() {
+    c.formData = {};
+    c.submitting = false;
+    c.resetForm();
+  };
+  
+  c.submitForm = function() {
+    if ($scope.widgetForm.$valid) {
+      c.submitting = true;
+      
+      // Submit form data to server
+      c.server.update().then(function(response) {
+        c.submitting = false;
+        if (response && response.success) {
+          c.data.success_message = response.message || 'Form submitted successfully!';
+          c.data.error_message = null;
+          c.resetForm();
+        } else {
+          c.data.error_message = response.error || 'Form submission failed. Please try again.';
+          c.data.success_message = null;
+        }
+      }).catch(function(error) {
+        c.submitting = false;
+        c.data.error_message = 'Network error. Please try again.';
+        c.data.success_message = null;
+      });
+    }
+  };
+  
+  c.resetForm = function() {
+    c.formData = {};
+    if ($scope.widgetForm) {
+      $scope.widgetForm.$setPristine();
+      $scope.widgetForm.$setUntouched();
+    }
+  };
+  
+  c.cancelForm = function() {
+    c.resetForm();
+    // Additional cancel logic
+  };
+  
+  // Info widget functions
+  c.initInfo = function() {
+    // Info widget initialization
+  };
+  
+  c.executeAction = function(action, item) {
+    switch(action.type) {
+      case 'link':
+        window.open(action.url, '_blank');
+        break;
+      case 'refresh':
+        c.refreshData();
+        break;
+      default:
+        console.log('Action executed:', action, item);
+    }
+  };
+  
+  // Initialize widget
+  c.init();
+}`.trim();
+
+      default:
+        return baseScript + `
+      default:
+        c.initInfo();
+    }
+  };
+  
+  c.initInfo = function() {
+    // Info widget initialization
+  };
+  
+  c.refreshData = function() {
+    c.loading = true;
+    c.server.refresh().then(function() {
+      c.loading = false;
+    });
+  };
+  
+  c.executeAction = function(action, item) {
+    switch(action.type) {
+      case 'link':
+        window.open(action.url, '_blank');
+        break;
+      case 'refresh':
+        c.refreshData();
+        break;
+      default:
+        console.log('Action executed:', action, item);
+    }
+  };
+  
+  // Initialize widget
+  c.init();
+}`.trim();
+    }
+  }
+
+  /**
+   * Generate option schema based on widget type
+   */
+  private generateOptionSchema(type: string): string {
+    const baseOptions = [
+      {
+        "name": "title",
+        "label": "Widget Title",
+        "type": "string",
+        "value": ""
+      },
+      {
+        "name": "show_refresh",
+        "label": "Show Refresh Button",
+        "type": "boolean",
+        "value": true
+      }
+    ];
+
+    let typeSpecificOptions: any[] = [];
+
+    switch (type) {
+      case 'chart':
+        typeSpecificOptions = [
+          {
+            "name": "chart_type",
+            "label": "Chart Type",
+            "type": "choice",
+            "choices": [
+              {"label": "Doughnut", "value": "doughnut"},
+              {"label": "Bar", "value": "bar"},
+              {"label": "Line", "value": "line"},
+              {"label": "Pie", "value": "pie"}
+            ],
+            "value": "doughnut"
+          }
+        ];
+        break;
+
+      case 'table':
+        typeSpecificOptions = [
+          {
+            "name": "enable_search",
+            "label": "Enable Search",
+            "type": "boolean",
+            "value": true
+          },
+          {
+            "name": "page_size",
+            "label": "Records Per Page",
+            "type": "integer",
+            "value": 10
+          },
+          {
+            "name": "show_actions",
+            "label": "Show Action Buttons",
+            "type": "boolean",
+            "value": true
+          },
+          {
+            "name": "allow_edit",
+            "label": "Allow Edit Action",
+            "type": "boolean",
+            "value": false
+          }
+        ];
+        break;
+
+      case 'form':
+        typeSpecificOptions = [
+          {
+            "name": "submit_text",
+            "label": "Submit Button Text",
+            "type": "string",
+            "value": "Submit"
+          },
+          {
+            "name": "submit_text_loading",
+            "label": "Submit Button Loading Text",
+            "type": "string",
+            "value": "Submitting..."
+          },
+          {
+            "name": "show_reset",
+            "label": "Show Reset Button",
+            "type": "boolean",
+            "value": true
+          },
+          {
+            "name": "show_cancel",
+            "label": "Show Cancel Button",
+            "type": "boolean",
+            "value": false
+          }
+        ];
+        break;
+    }
+
+    const allOptions = [...baseOptions, ...typeSpecificOptions];
+    return JSON.stringify(allOptions, null, 2);
+  }
+}
+
+// Export singleton instance
+export const widgetTemplateGenerator = new ServiceNowWidgetTemplateGenerator();