dashboard

Update editnewdash.component.ts
unified
2025-10-31 17:19:18 +05:30 · 2025-10-31 17:17:01 +05:30 · 2025-10-31 16:35:15 +05:30 · 2025-10-31 16:03:37 +05:30 · 2025-10-31 15:51:28 +05:30 · 2025-10-31 10:47:43 +05:30
81 changed files with 19120 additions and 2846 deletions
--- a/frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/ReportBuilder.ts
@@ -1,8 +1,9 @@
 export class ReportBuilder {
  public report_id: number;
-public report_name:string;
-public description: string;
-public report_tags: string;
-public servicename:string;
-
-}
+  public report_name: string;
+  public description: string;
+  public report_tags: string;
+  public servicename: string;
+  // Add SureConnect reference
+  public sureConnectId: number | null;
+}
--- a/frontend/angular-clarity-master/src/app/models/builder/dashboard.ts
+++ b/frontend/angular-clarity-master/src/app/models/builder/dashboard.ts
@@ -23,8 +23,22 @@ export interface DashboardContentModel {
  component?: any;
  name: string;
  type?:string;
-  // Common properties
+  // Chart properties
+  xAxis?: string;
+  yAxis?: string | string[];
+  chartType?: string;
+  charttitle?: string;
+  chartlegend?: boolean;
+  showlabel?: boolean;
+  chartcolor?: boolean;
+  slices?: boolean;
+  donut?: boolean;
+  charturl?: string;
+  chartparameter?: string;
+  datastore?: string;
  table?: string;
+  datasource?: string;
+  fieldName?: string;
  connection?: string;
  baseFilters?: any[];
  // Common filter properties
@@ -37,6 +51,11 @@ export interface DashboardContentModel {
  drilldownParameter?: string;
  drilldownFilters?: any[];
  drilldownLayers?: any[];
+  // Compact filter properties
+  filterKey?: string;
+  filterType?: string;
+  filterLabel?: string;
+  filterOptions?: string[];
 }

 export interface DashboardModel {
--- a/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/test.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/BuilderComponents/test.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+
+<html>
+<head>
+<title>gaurav</title>
+
+</head>
+
+<body>
+    <h1>this is h1</h1>
+    <h2>this is h1</h2>
+    <h3>this is h1</h3>
+    <h4>this is h1</h4>
+    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ipsa fuga, asperiores mollitia iste vitae repellendus adipisci atque eum corrupti ad placeat unde voluptatum quia perferendis neque expedita, sequi iure quo. Ut error adipisci ex cum sint, suscipit, voluptatem repellat nemo dolorum unde dolores quasi aut. A earum quo mollitia voluptatibus!</p>
+   
+
+</body>
+
+</html>
+
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.html
@@ -79,12 +79,21 @@

  <!-- Multi-Select Filter -->
  <div class="filter-control" *ngIf="filterType === 'multiselect'">
-    <select [(ngModel)]="filterValue" 
-            (ngModelChange)="onFilterValueChange($event)"
-            multiple 
-            class="clr-select compact-multiselect">
-      <option *ngFor="let option of filterOptions" [value]="option">{{ option }}</option>
-    </select>
+    <div class="compact-multiselect-display" (click)="toggleMultiselectDropdown()" style="padding: 5px; border: 1px solid #ddd; cursor: pointer; background-color: #f8f8f8;">
+      <span *ngIf="filterValue && filterValue.length > 0">{{ filterValue.length }} selected</span>
+      <span *ngIf="!filterValue || filterValue.length === 0">{{ filterLabel || filterKey || 'Select options' }}</span>
+      <clr-icon shape="caret down" style="float: right; margin-top: 3px;"></clr-icon>
+    </div>
+    <div class="compact-multiselect-dropdown" *ngIf="showMultiselectDropdown" style="max-height: 200px; overflow-y: auto; border: 1px solid #ddd; border-top: none; padding: 10px; background-color: white; position: absolute; z-index: 1000; width: calc(100% - 2px); box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+      <div *ngFor="let option of filterOptions" class="clr-checkbox-wrapper" style="margin-bottom: 5px;">
+        <input type="checkbox" 
+               [id]="'multiselect-' + option" 
+               [value]="option" 
+               [checked]="isOptionSelected(option)"
+               (change)="onMultiselectOptionChange($event, option)">
+        <label [for]="'multiselect-' + option" class="clr-control-label">{{ option }}</label>
+      </div>
+    </div>
  </div>

  <!-- Date Range Filter -->
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.scss
@@ -70,6 +70,41 @@
    min-height: 24px;
  }
  
+  .multiselect-container {
+    max-height: 150px;
+    overflow-y: auto;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    padding: 5px;
+    background: white;
+  }
+  
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+  
+  .checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+  }
+  
+  .checkbox-label {
+    font-size: 12px;
+    margin: 0;
+    cursor: pointer;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  
+  .clr-checkbox {
+    margin: 0;
+    cursor: pointer;
+  }
+  
  .toggle-label {
    margin: 0;
    font-size: 12px;
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/common-filter/compact-filter.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges, OnDestroy } from '@angular/core';
 import { FilterService, Filter } from './filter.service';
 import { AlertsService } from 'src/app/services/fnd/alerts.service';

@@ -7,7 +7,7 @@ import { AlertsService } from 'src/app/services/fnd/alerts.service';
  templateUrl: './compact-filter.component.html',
  styleUrls: ['./compact-filter.component.scss']
 })
-export class CompactFilterComponent implements OnInit, OnChanges {
+export class CompactFilterComponent implements OnInit, OnChanges, OnDestroy {
  @Input() filterKey: string = '';
  @Input() filterType: string = 'text';
  @Input() filterOptions: string[] = [];
@@ -23,6 +23,9 @@ export class CompactFilterComponent implements OnInit, OnChanges {
  availableKeys: string[] = [];
  availableValues: string[] = [];
  
+  // Multiselect dropdown state
+  showMultiselectDropdown: boolean = false;
+  
  // Configuration properties
  isConfigMode: boolean = false;
  configFilterKey: string = '';
@@ -38,19 +41,6 @@ export class CompactFilterComponent implements OnInit, OnChanges {
  ) { }

  ngOnInit(): void {
-    // Subscribe to filter definitions to get available filters
-    this.filterService.filters$.subscribe(filters => {
-      this.availableFilters = filters;
-      this.updateSelectedFilter();
-    });
-    
-    // Subscribe to filter state changes
-    this.filterService.filterState$.subscribe(state => {
-      if (this.selectedFilter && state.hasOwnProperty(this.selectedFilter.id)) {
-        this.filterValue = state[this.selectedFilter.id];
-      }
-    });
-    
    // Initialize configuration from inputs
    this.configFilterKey = this.filterKey;
    this.configFilterType = this.filterType;
@@ -70,26 +60,71 @@ export class CompactFilterComponent implements OnInit, OnChanges {
    
    // Register this filter with the filter service
    this.registerFilter();
+    
+    // Subscribe to filter definitions to get available filters
+    this.filterService.filters$.subscribe(filters => {
+      this.availableFilters = filters;
+      this.updateSelectedFilter();
+    });
+    
+    // Subscribe to filter state changes
+    this.filterService.filterState$.subscribe(state => {
+      if (this.selectedFilter && state.hasOwnProperty(this.selectedFilter.id)) {
+        this.filterValue = state[this.selectedFilter.id];
+      }
+    });
  }
  
  ngOnChanges(changes: SimpleChanges): void {
+    // If filterKey changes, clear the previous filter value and remove old filter from service
+    if (changes.filterKey) {
+      // Clear the previous filter value
+      this.filterValue = '';
+      
+      // Clear filter options
+      this.filterOptions = [];
+      
+      // Clear available values
+      this.availableValues = [];
+      
+      // If we had a previous selected filter, clear its value in the service
+      if (this.selectedFilter && changes.filterKey.previousValue) {
+        const oldFilterId = changes.filterKey.previousValue;
+        this.filterService.updateFilterValue(oldFilterId, '');
+      }
+    }
+    
    // If filterKey or filterType changes, re-register the filter
    if (changes.filterKey || changes.filterType) {
+      // Load available values for the current filter key if it's a dropdown or multiselect
+      if ((this.filterType === 'dropdown' || this.filterType === 'multiselect') && this.filterKey) {
+        this.loadAvailableValues(this.filterKey);
+      }
      this.registerFilter();
    }
+    
+    // Handle API URL changes
+    if (changes.apiUrl && !changes.apiUrl.firstChange) {
+      if (this.apiUrl) {
+        this.loadAvailableKeys();
+      }
+    }
  }
  
  // Register this filter with the filter service
  registerFilter(): void {
    if (this.filterKey) {
+      // Get current filter values from the service
+      const currentFilterValues = this.filterService.getFilterValues();
+      
      // Create a filter definition for this compact filter
      const filterDef: Filter = {
-        id: `compact-filter-${this.filterKey}`,
+        id: `${this.filterKey}`,
        field: this.filterKey,
        label: this.filterLabel || this.filterKey,
        type: this.filterType as any,
        options: this.filterOptions,
-        value: this.filterValue
+        value: this.filterValue // Use the current filter value
      };
      
      // Get current filters
@@ -99,9 +134,32 @@ export class CompactFilterComponent implements OnInit, OnChanges {
      const existingFilterIndex = currentFilters.findIndex(f => f.id === filterDef.id);
      
      if (existingFilterIndex >= 0) {
+        // Preserve the existing filter configuration
+        const existingFilter = currentFilters[existingFilterIndex];
+        
+        // Preserve the existing filter value if it exists in the service
+        if (currentFilterValues.hasOwnProperty(existingFilter.id)) {
+          filterDef.value = currentFilterValues[existingFilter.id];
+          this.filterValue = filterDef.value; // Update local value
+        } else if (existingFilter.value !== undefined) {
+          // Fallback to existing filter's value if no service value
+          filterDef.value = existingFilter.value;
+          this.filterValue = filterDef.value;
+        }
+        
+        // Preserve other configuration properties
+        filterDef.label = existingFilter.label;
+        filterDef.options = existingFilter.options || this.filterOptions;
+        
        // Update existing filter
        currentFilters[existingFilterIndex] = filterDef;
      } else {
+        // For new filters, check if there's already a value in the service
+        if (currentFilterValues.hasOwnProperty(filterDef.id)) {
+          filterDef.value = currentFilterValues[filterDef.id];
+          this.filterValue = filterDef.value; // Update local value
+        }
+        
        // Add new filter
        currentFilters.push(filterDef);
      }
@@ -118,9 +176,24 @@ export class CompactFilterComponent implements OnInit, OnChanges {
    if (this.filterKey && this.availableFilters.length > 0) {
      this.selectedFilter = this.availableFilters.find(f => f.field === this.filterKey) || null;
      if (this.selectedFilter) {
-        // Get current value for this filter
+        // Get current value for this filter from the service
        const currentState = this.filterService.getFilterValues();
-        this.filterValue = currentState[this.selectedFilter.id] || '';
+        const filterValue = currentState[this.selectedFilter.id];
+        if (filterValue !== undefined) {
+          this.filterValue = filterValue;
+        } else if (this.selectedFilter.value !== undefined) {
+          // Use the filter's default value if no service value
+          this.filterValue = this.selectedFilter.value;
+        } else {
+          // Use the current filter value as fallback
+          this.filterValue = this.filterValue || '';
+        }
+        
+        // Also update configuration properties from the selected filter
+        this.configFilterKey = this.selectedFilter.field;
+        this.configFilterType = this.selectedFilter.type;
+        this.configFilterLabel = this.selectedFilter.label;
+        this.configFilterOptions = (this.selectedFilter.options || []).join(',');
      }
    }
  }
@@ -130,6 +203,14 @@ export class CompactFilterComponent implements OnInit, OnChanges {
      this.filterValue = value;
      this.filterService.updateFilterValue(this.selectedFilter.id, value);
      this.filterChange.emit({ filterId: this.selectedFilter.id, value: value });
+      
+      // Update the filter definition in the service to reflect the new value
+      const currentFilters = this.filterService.getFilters();
+      const filterIndex = currentFilters.findIndex(f => f.id === this.selectedFilter.id);
+      if (filterIndex >= 0) {
+        currentFilters[filterIndex].value = value;
+        this.filterService.setFilters(currentFilters);
+      }
    }
  }
  
@@ -141,6 +222,14 @@ export class CompactFilterComponent implements OnInit, OnChanges {
    this.onFilterValueChange(dateRange);
  }
  
+  ngOnDestroy(): void {
+    // Component cleanup - remove this filter from the filter service
+    if (this.selectedFilter) {
+      // Use the proper removeFilter method which handles both filter definition and state
+      this.filterService.removeFilter(this.selectedFilter.id);
+    }
+  }
+  
  // Load available keys from API
  loadAvailableKeys(): void {
    if (this.apiUrl) {
@@ -179,11 +268,19 @@ export class CompactFilterComponent implements OnInit, OnChanges {
  toggleConfigMode(): void {
    this.isConfigMode = !this.isConfigMode;
    if (this.isConfigMode) {
-      // Initialize config values
-      this.configFilterKey = this.filterKey;
-      this.configFilterType = this.filterType;
-      this.configFilterLabel = this.filterLabel;
-      this.configFilterOptions = this.filterOptions.join(',');
+      // Initialize config values from current filter if available
+      if (this.selectedFilter) {
+        this.configFilterKey = this.selectedFilter.field;
+        this.configFilterType = this.selectedFilter.type;
+        this.configFilterLabel = this.selectedFilter.label;
+        this.configFilterOptions = (this.selectedFilter.options || []).join(',');
+      } else {
+        // Fallback to current properties
+        this.configFilterKey = this.filterKey;
+        this.configFilterType = this.filterType;
+        this.configFilterLabel = this.filterLabel;
+        this.configFilterOptions = this.filterOptions.join(',');
+      }
      this.configApiUrl = this.apiUrl;
      this.configConnectionId = this.connectionId;
    }
@@ -210,14 +307,17 @@ export class CompactFilterComponent implements OnInit, OnChanges {
    this.apiUrl = config.apiUrl;
    this.connectionId = config.connectionId;
    
+    // Clear filter value when changing configuration
+    this.filterValue = '';
+    
    // Load available keys if API URL is provided
    if (this.apiUrl) {
      this.loadAvailableKeys();
    }
    
    // Load available values for the selected key if it's a dropdown or multiselect
-    if ((this.filterType === 'dropdown' || this.filterType === 'multiselect') && this.filterKey) {
-      this.loadAvailableValues(this.filterKey);
+    if ((this.configFilterType === 'dropdown' || this.configFilterType === 'multiselect') && this.configFilterKey) {
+      this.loadAvailableValues(this.configFilterKey);
    }
    
    // Register the updated filter with the filter service
@@ -236,11 +336,23 @@ export class CompactFilterComponent implements OnInit, OnChanges {
  
  // Handle filter key change in configuration
  onFilterKeyChange(key: string): void {
+    // Clear the previous filter value when changing keys
+    this.filterValue = '';
+    
+    // Clear filter options until new values are loaded
+    this.filterOptions = [];
+    
    this.configFilterKey = key;
+    
    // Load available values for the selected key if it's a dropdown or multiselect
    if ((this.configFilterType === 'dropdown' || this.configFilterType === 'multiselect') && key) {
      this.loadAvailableValues(key);
    }
+    
+    // Clear the filter service value for the previous filter key
+    if (this.selectedFilter) {
+      this.filterService.updateFilterValue(this.selectedFilter.id, '');
+    }
  }
  
  // Handle API URL change in configuration
@@ -263,4 +375,67 @@ export class CompactFilterComponent implements OnInit, OnChanges {
      this.loadAvailableValues(this.configFilterKey);
    }
  }
+  
+  // Add method to check if an option is selected for checkboxes
+  isOptionSelected(option: string): boolean {
+    if (!this.filterValue) {
+      return false;
+    }
+    
+    // Ensure filterValue is an array for multiselect
+    if (!Array.isArray(this.filterValue)) {
+      this.filterValue = [];
+      return false;
+    }
+    
+    return this.filterValue.includes(option);
+  }
+  // need to check this 
+  // Add method to handle multiselect option change
+  onMultiselectOptionChange(event: any, option: string): void {
+    // Initialize filterValue array if it doesn't exist
+    if (!this.filterValue) {
+      this.filterValue = [];
+    }
+    
+    // Ensure filterValue is an array
+    if (!Array.isArray(this.filterValue)) {
+      this.filterValue = [];
+    }
+    
+    if (event.target.checked) {
+      // Add option if not already in array
+      if (!this.filterValue.includes(option)) {
+        this.filterValue.push(option);
+      }
+    } else {
+      // Remove option from array
+      const index = this.filterValue.indexOf(option);
+      if (index > -1) {
+        this.filterValue.splice(index, 1);
+      }
+    }
+    
+    // Emit the change event
+    this.onFilterValueChange(this.filterValue);
+  }
+  
+  // Add method to toggle multiselect dropdown visibility
+  toggleMultiselectDropdown(): void {
+    this.showMultiselectDropdown = !this.showMultiselectDropdown;
+    
+    // Add document click handler to close dropdown when clicking outside
+    if (this.showMultiselectDropdown) {
+      setTimeout(() => {
+        const handleClick = (event: MouseEvent) => {
+          const target = event.target as HTMLElement;
+          if (!target.closest('.compact-multiselect-display') && !target.closest('.compact-multiselect-dropdown')) {
+            this.showMultiselectDropdown = false;
+            document.removeEventListener('click', handleClick);
+          }
+        };
+        document.addEventListener('click', handleClick);
+      }, 0);
+    }
+  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.html
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/editnewdash/editnewdash.component.ts
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart.zip
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart.zip
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart.component.html
@@ -1,50 +1,334 @@
 <div class="chart-container">
-  <!-- Compact Filters -->
-  <div class="compact-filters-container" *ngIf="baseFilters && baseFilters.length > 0">
-    <app-compact-filter 
-      *ngFor="let filter of baseFilters" 
-      [filterKey]="filter.field"
-      (filterChange)="onFilterChange($event)">
-    </app-compact-filter>
-  </div>
-  
-  <!-- Drilldown mode indicator -->
-  <div *ngIf="currentDrilldownLevel > 0" class="drilldown-indicator">
-    <span class="drilldown-text">Drilldown Level: {{currentDrilldownLevel}}</span>
-    <button class="btn btn-secondary btn-sm" (click)="navigateBack()">
-      Back to Level {{currentDrilldownLevel - 1}}
-    </button>
-    <button class="btn btn-danger btn-sm" (click)="resetToOriginalData()">
-      Back to Main View
-    </button>
+  <!-- Filter Controls Section -->
+  <div class="filter-section" *ngIf="hasActiveFilters()">
+    <!-- Base Filters -->
+    <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
+      <h4>Base Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of baseFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onBaseFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onBaseFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'base-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Drilldown Filters -->
+    <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+      <h4>Drilldown Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of drilldownFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onDrilldownFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onDrilldownFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'drilldown-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Layer Filters -->
+    <div class="filter-group" *ngIf="hasActiveLayerFilters()">
+      <h4>Layer Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onLayerFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onLayerFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'layer-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Clear Filters Button -->
+    <div class="filter-actions">
+      <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
+    </div>
  </div>
  
+  <!-- Header row with chart title and drilldown navigation -->
  <div class="chart-header">
-    <h3>{{ charttitle || 'Bar Chart' }}</h3>
+    <div class="clr-row header-row">
+      <div class="clr-col-6">
+        <h3 class="chart-title">{{charttitle || 'Bar Chart'}}</h3>
+      </div>
+      <div class="clr-col-6" style="text-align: right;">
+        <!-- Add drilldown navigation controls -->
+        <button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
+          <cds-icon shape="arrow" direction="left"></cds-icon>
+          Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
+        </button>
+      </div>
+    </div>
+    
+    <!-- Show current drilldown level -->
+    <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
+      <div class="clr-col-12">
+        <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
+          <div class="alert-items">
+            <div class="alert-item static">
+              <div class="alert-icon-wrapper">
+                <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
+              </div>
+              <span class="alert-text">
+                Drilldown Level: {{currentDrilldownLevel}} 
+                <span *ngIf="drilldownStack.length > 0">
+                  (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
  </div>
  
  <div class="chart-wrapper">
-    <div class="chart-content" [class.loading]="barChartData.length === 0 && barChartLabels.length === 0 && !noDataAvailable">
-      <!-- No data message -->
-      <div class="no-data-message" *ngIf="noDataAvailable">
-        <p>No data available</p>
+    <div class="chart-content" [class.loading]="isLoading">
+     
+      <div *ngIf="noDataAvailable" class="no-data-message">
+        No data available
      </div>
      
-      <!-- Chart display -->
-      <canvas baseChart
-        *ngIf="!noDataAvailable"
-        [datasets]="barChartData"
-        [labels]="barChartLabels"
-        [type]="barChartType"
-        [options]="barChartOptions"
-        (chartHover)="chartHovered($event)"
-        (chartClick)="chartClicked($event)">
-      </canvas>
+    
+      <div *ngIf="!noDataAvailable" class="chart-display">
+        <canvas baseChart
+          [datasets]="barChartData"
+          [labels]="barChartLabels"
+          [type]="barChartType"
+          [options]="barChartOptions"
+          (chartHover)="chartHovered($event)"
+          (chartClick)="chartClicked($event)">
+        </canvas>
+      </div>
      
-      <!-- Loading overlay -->
-      <div class="loading-overlay" *ngIf="barChartData.length === 0 && barChartLabels.length === 0 && !noDataAvailable">
+      <div class="loading-overlay" *ngIf="isLoading">
        <div class="shimmer-bar"></div>
      </div>
    </div>
  </div>
+
+
+  <!-- sheield dashboard  -->
+<!-- 
+<div class="chart-container">
+  <div class="chart-header">
+    <h3>Deal Stage Wise Progress</h3>
+  </div>
+  <div class="chart-wrapper">
+    <div class="chart-content" [class.loading]="isLoading">
+      <canvas 
+        baseChart 
+        [data]="barChartData"
+        [options]="barChartOptions"
+        [type]="barChartType"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+      <div class="loading-overlay" *ngIf="isLoading">
+        <div class="shimmer-bar"></div>
+      </div>
+    </div>
+  </div>
+</div> -->
+
+
 </div>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart.component.scss
@@ -1,174 +1,243 @@
-// Bar Chart Component Styles
-:host {
-  display: block;
-  height: 100%;
-  width: 100%;
-}
-
+// Chart container structure
 .chart-container {
  height: 100%;
  display: flex;
  flex-direction: column;
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  transition: all 0.3s ease;
-  border: 1px solid #eaeaea;
-  padding: 20px;
-}
-
-.chart-container:hover {
-  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
-  transform: translateY(-2px);
-}
-
-.compact-filters-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  margin-bottom: 10px;
-  padding: 5px;
-  background: #ffffff;
-  border: 1px solid #e9ecef;
-  border-radius: 6px;
-  min-height: 40px;
-}
-
-.drilldown-indicator {
-  background-color: #e0e0e0;
-  padding: 10px;
-  margin-bottom: 15px;
-  border-radius: 8px;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.drilldown-text {
-  font-weight: bold;
-  color: #333;
-  font-size: 16px;
-}
-
-.btn {
-  padding: 6px 12px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.3s ease;
-}
-
-.btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.btn-sm {
-  padding: 4px 8px;
-  font-size: 12px;
-}
-
-.btn-secondary {
-  background-color: #007cba;
-  color: white;
-}
-
-.btn-danger {
-  background-color: #dc3545;
-  color: white;
-}
-
-.chart-header {
-  margin-bottom: 20px;
  
-  h3 {
-    font-size: 22px;
-    font-weight: 600;
-    color: #0a192f;
-    margin: 0;
-    text-align: center;
-    padding-bottom: 10px;
-    border-bottom: 2px solid #3498db;
+  // Filter section styling
+  .filter-section {
+    margin-bottom: 20px;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: #f9f9f9;
  }
-}

-.chart-wrapper {
-  flex: 1;
-  position: relative;
-  
-  .chart-content {
-    position: relative;
-    height: 100%;
-    background: #f8f9fa;
-    border: 1px solid #e9ecef;
-    border-radius: 8px;
+  .filter-group {
+    margin-bottom: 15px;
+    
+    h4 {
+      margin-top: 0;
+      margin-bottom: 10px;
+      color: #333;
+      font-weight: 600;
+    }
+  }
+
+  .filter-controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 15px;
+  }
+
+  .filter-item {
+    flex: 1 1 300px;
+    min-width: 250px;
    padding: 10px;
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+  }
+
+  .filter-label {
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: #555;
+    font-size: 14px;
+  }
+
+  .filter-input {
+    width: 100%;
+    
+    .filter-text-input,
+    .filter-select,
+    .filter-date {
+      width: 100%;
+      padding: 6px 12px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+    
+    .filter-select {
+      height: 34px;
+    }
+  }
+
+  .multiselect-container {
+    position: relative;
+  }
+
+  .multiselect-display {
    display: flex;
    align-items: center;
-    justify-content: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+    min-height: 34px;
    
-    &.loading {
-      opacity: 0.7;
+    .multiselect-label {
+      flex: 1;
+      font-size: 14px;
+    }
+    
+    .multiselect-value {
+      color: #666;
+      font-size: 12px;
+      margin-right: 8px;
+    }
+    
+    .dropdown-icon {
+      flex-shrink: 0;
+      transition: transform 0.2s ease;
+    }
+    
+    &:hover {
+      border-color: #999;
+    }
+  }
+
+  .multiselect-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    z-index: 1000;
+    background: white;
+    border: 1px solid #ccc;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    max-height: 200px;
+    overflow-y: auto;
+    
+    .checkbox-group {
+      padding: 8px;
      
-      canvas {
-        filter: blur(2px);
+      .checkbox-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 4px 0;
+        
+        .checkbox-label {
+          margin: 0;
+          font-size: 14px;
+          cursor: pointer;
+        }
      }
    }
-    
-    canvas {
-      max-width: 100%;
-      max-height: 100%;
-      transition: filter 0.3s ease;
-      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
-    }
-    
-    canvas:hover {
-      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
-      transform: scale(1.02);
-      transition: all 0.3s ease;
-    }
-    
-    .no-data-message {
-      text-align: center;
-      padding: 30px;
-      color: #666;
-      font-size: 18px;
-      font-style: italic;
+  }
+
+  .date-range {
+    .date-input-group {
      display: flex;
-      flex-direction: column;
      align-items: center;
-      justify-content: center;
-      height: 100%;
-      width: 100%;
+      gap: 8px;
    }
    
-    .no-data-message p {
+    .date-separator {
+      margin: 0 5px;
+      color: #777;
+    }
+  }
+
+  .toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    .toggle-label {
      margin: 0;
+      font-size: 14px;
+      cursor: pointer;
    }
+  }
+
+  .filter-actions {
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid #eee;
    
-    .loading-overlay {
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      background: rgba(255, 255, 255, 0.8);
+    .btn {
+      font-size: 13px;
+    }
+  }
+  
+  // Chart header styling
+  .chart-header {
+    margin-bottom: 20px;
+    
+    .header-row {
+      margin-bottom: 15px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #eee;
      
-      .shimmer-bar {
-        width: 80%;
-        height: 20px;
-        background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-        background-size: 200% 100%;
-        animation: shimmer 1.5s infinite;
-        border-radius: 4px;
+      .chart-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #333;
+      }
+    }
+  }
+  
+  // Chart wrapper and content
+  .chart-wrapper {
+    flex: 1;
+    position: relative;
+    
+    .chart-content {
+      position: relative;
+      height: 100%;
+      min-height: 300px; // Ensure minimum height for chart
+      
+      &.loading {
+        opacity: 0.7;
+        
+        .chart-display {
+          filter: blur(2px);
+        }
+      }
+      
+      .no-data-message {
+        text-align: center;
+        padding: 20px;
+        color: #666;
+        font-style: italic;
+      }
+      
+      .chart-display {
+        position: relative;
+        height: 100%;
+        width: 100%;
+        max-width: 100%;
+        max-height: 100%;
+        transition: filter 0.3s ease;
+      }
+      
+      .loading-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.8);
+        
+        .shimmer-bar {
+          width: 80%;
+          height: 20px;
+          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+          background-size: 200% 100%;
+          animation: shimmer 1.5s infinite;
+          border-radius: 4px;
+        }
      }
    }
  }
@@ -183,36 +252,27 @@
  }
 }

-// Responsive design for chart container
+// Responsive design
@media (max-width: 768px) {
  .chart-container {
-    padding: 15px;
-  }
-  
-  .chart-header h3 {
-    font-size: 18px;
-  }
-  
-  .drilldown-indicator {
-    flex-direction: column;
-    gap: 5px;
-  }
-  
-  .drilldown-text {
-    font-size: 14px;
-  }
-  
-  .compact-filters-container {
-    flex-wrap: wrap;
-  }
-}
-
-@media (max-width: 480px) {
-  .chart-container {
-    padding: 10px;
-  }
-  
-  .chart-header h3 {
-    font-size: 16px;
+    .filter-controls {
+      flex-direction: column;
+    }
+    
+    .filter-item {
+      min-width: 100%;
+    }
+    
+    .chart-header {
+      .header-row {
+        .chart-title {
+          font-size: 16px;
+        }
+      }
+    }
+    
+    .chart-content {
+      min-height: 250px; // Adjust for mobile
+    }
  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bar-chart/bar-chart.component.ts
@@ -57,21 +57,46 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
        ticks: {
          autoSkip: false,
          maxRotation: 45,
-          minRotation: 45
+          minRotation: 45,
+          padding: 15,
+          font: {
+            size: 12
+          }
+        },
+        grid: {
+          display: false
        }
      },
      y: {
-        beginAtZero: true
+        beginAtZero: true,
+        ticks: {
+          font: {
+            size: 12
+          }
+        }
      }
    },
    plugins: {
      legend: {
        display: true,
        position: 'top',
+        labels: {
+          font: {
+            size: 12
+          }
+        }
      },
      tooltip: {
        enabled: true
      }
+    },
+    layout: {
+      padding: {
+        bottom: 60,
+        left: 15,
+        right: 15,
+        top: 15
+      }
    }
  };
  
@@ -84,12 +109,20 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
  // No data state
  noDataAvailable: boolean = false;
  
+  // Loading state
+  isLoading: boolean = false;
+  
  // Flag to prevent infinite loops
  private isFetchingData: boolean = false;
  
  // Subscriptions to unsubscribe on destroy
  private subscriptions: Subscription[] = [];

+  // Add properties for filter functionality
+  private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
+  private documentClickHandler: ((event: MouseEvent) => void) | null = null;
+  private filtersInitialized: boolean = false;
+
  constructor(
    private dashboardService: Dashboard3Service,
    private filterService: FilterService
@@ -111,6 +144,12 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
  ngOnChanges(changes: SimpleChanges): void {
    console.log('BarChartComponent input changes:', changes);
    
+    // Initialize filter values if they haven't been initialized yet
+    if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
+      this.initializeFilterValues();
+      this.filtersInitialized = true;
+    }
+    
    // Check if any of the key properties have changed
    const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
    const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
@@ -140,22 +179,330 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
      console.log('Chart legend changed to:', this.barChartLegend);
    }
  }
-  
-  // Handle filter changes from compact filters
-  onFilterChange(event: { filterId: string, value: any }): void {
-    console.log('Compact filter changed:', event);
-    // The filter service will automatically trigger chart updates through the subscription
+
+  // Initialize filter values with proper default values based on type
+  private initializeFilterValues(): void {
+    console.log('Initializing filter values');
+    
+    // Initialize base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.value === undefined || filter.value === null) {
+              switch (filter.type) {
+                case 'multiselect':
+                  filter.value = [];
+                  break;
+                case 'date-range':
+                  filter.value = { start: null, end: null };
+                  break;
+                case 'toggle':
+                  filter.value = false;
+                  break;
+                default:
+                  filter.value = '';
+              }
+            }
+          });
+        }
+      });
+    }
+    
+    console.log('Filter values initialized:', {
+      baseFilters: this.baseFilters,
+      drilldownFilters: this.drilldownFilters,
+      drilldownLayers: this.drilldownLayers
+    });
+  }
+
+  // Check if there are active filters
+  hasActiveFilters(): boolean {
+    return (this.baseFilters && this.baseFilters.length > 0) || 
+           (this.drilldownFilters && this.drilldownFilters.length > 0) || 
+           this.hasActiveLayerFilters();
+  }
+
+  // Check if there are active layer filters for current drilldown level
+  hasActiveLayerFilters(): boolean {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      return layerIndex < this.drilldownLayers.length && 
+             this.drilldownLayers[layerIndex].filters && 
+             this.drilldownLayers[layerIndex].filters.length > 0;
+    }
+    return false;
+  }
+
+  // Get active layer filters for current drilldown level
+  getActiveLayerFilters(): any[] {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      if (layerIndex < this.drilldownLayers.length && 
+          this.drilldownLayers[layerIndex].filters) {
+        return this.drilldownLayers[layerIndex].filters;
+      }
+    }
+    return [];
+  }
+
+  // Get filter options for dropdown/multiselect filters
+  getFilterOptions(filter: any): string[] {
+    if (filter.options) {
+      if (Array.isArray(filter.options)) {
+        return filter.options;
+      } else if (typeof filter.options === 'string') {
+        return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
+      }
+    }
+    return [];
+  }
+
+  // Check if an option is selected for multiselect filters
+  isOptionSelected(filter: any, option: string): boolean {
+    if (!filter.value) {
+      return false;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.includes(option);
+    }
+    
+    return filter.value === option;
+  }
+
+  // Handle base filter changes
+  onBaseFilterChange(filter: any): void {
+    console.log('Base filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle drilldown filter changes
+  onDrilldownFilterChange(filter: any): void {
+    console.log('Drilldown filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle layer filter changes
+  onLayerFilterChange(filter: any): void {
+    console.log('Layer filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle multiselect changes
+  onMultiSelectChange(filter: any, option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filter.value as array if it's not already
+    if (!Array.isArray(filter.value)) {
+      filter.value = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!filter.value.includes(option)) {
+        filter.value.push(option);
+      }
+    } else {
+      // Remove option from array
+      filter.value = filter.value.filter((item: string) => item !== option);
+    }
+    
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle date range changes
+  onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
+    filter.value = dateRange;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle toggle changes
+  onToggleChange(filter: any, checked: boolean): void {
+    filter.value = checked;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Toggle multiselect dropdown visibility
+  toggleMultiselect(filter: any, context: string): void {
+    const filterId = `${context}-${filter.field}`;
+    if (this.isMultiselectOpen(filter, context)) {
+      this.openMultiselects.delete(filterId);
+    } else {
+      // Close all other multiselects first
+      this.openMultiselects.clear();
+      this.openMultiselects.set(filterId, context);
+      
+      // Add document click handler to close dropdown when clicking outside
+      this.addDocumentClickHandler();
+    }
+  }
+
+  // Add document click handler to close dropdowns when clicking outside
+  private addDocumentClickHandler(): void {
+    if (!this.documentClickHandler) {
+      this.documentClickHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        // Check if click is outside any multiselect dropdown
+        if (!target.closest('.multiselect-container')) {
+          this.openMultiselects.clear();
+          this.removeDocumentClickHandler();
+        }
+      };
+      
+      // Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
+      setTimeout(() => {
+        document.addEventListener('click', this.documentClickHandler!);
+      }, 0);
+    }
+  }
+
+  // Remove document click handler
+  private removeDocumentClickHandler(): void {
+    if (this.documentClickHandler) {
+      document.removeEventListener('click', this.documentClickHandler);
+      this.documentClickHandler = null;
+    }
+  }
+
+  // Check if multiselect dropdown is open
+  isMultiselectOpen(filter: any, context: string): boolean {
+    const filterId = `${context}-${filter.field}`;
+    return this.openMultiselects.has(filterId);
+  }
+
+  // Get count of selected options for a multiselect filter
+  getSelectedOptionsCount(filter: any): number {
+    if (!filter.value) {
+      return 0;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.length;
+    }
+    
+    return 0;
+  }
+
+  // Clear all filters
+  clearAllFilters(): void {
+    // Clear base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.type === 'multiselect') {
+              filter.value = [];
+            } else if (filter.type === 'date-range') {
+              filter.value = { start: null, end: null };
+            } else if (filter.type === 'toggle') {
+              filter.value = false;
+            } else {
+              filter.value = '';
+            }
+          });
+        }
+      });
+    }
+    
+    // Close all multiselect dropdowns
+    this.openMultiselects.clear();
+    
+    // Refresh data
+    this.fetchChartData();
  }

  fetchChartData(): void {
+    // Set loading state
+    this.isLoading = true;
+    
    // Set flag to prevent recursive calls
    this.isFetchingData = true;
    
    // If we're in drilldown mode, fetch the appropriate drilldown data
    if (this.currentDrilldownLevel > 0 && this.drilldownStack.length > 0) {
      this.fetchDrilldownData();
-      // Reset flag after fetching
+      // Reset flags after fetching
      this.isFetchingData = false;
+      this.isLoading = false;
      return;
    }
    
@@ -179,73 +526,41 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
      console.log('Bar chart data URL:', url);
      
      // Convert baseFilters to filter parameters
-      let filterParams = '';
+      const filterObj = {};
+      
+      // Add base filters
      if (this.baseFilters && this.baseFilters.length > 0) {
-        const filterObj = {};
        this.baseFilters.forEach(filter => {
          if (filter.field && filter.value) {
            filterObj[filter.field] = filter.value;
          }
        });
-        if (Object.keys(filterObj).length > 0) {
-          filterParams = JSON.stringify(filterObj);
-        }
      }
-      console.log('Base filters:', this.baseFilters);
-      console.log('Base filter params:', filterParams);
      
-      // Add common filters to filter parameters
+      // Add common filters
      const commonFilters = this.filterService.getFilterValues();
      const filterDefinitions = this.filterService.getFilters();
-      console.log('Common filters from service:', commonFilters);
-      console.log('Filter definitions:', filterDefinitions);
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
      
-      if (Object.keys(commonFilters).length > 0) {
-        // Merge common filters with base filters
-        const mergedFilterObj = {};
-        
-        // Add base filters first
-        if (filterParams) {
-          try {
-            const baseFilterObj = JSON.parse(filterParams);
-            Object.assign(mergedFilterObj, baseFilterObj);
-          } catch (e) {
-            console.warn('Failed to parse base filter parameters:', e);
-          }
-        }
-        
-        // Add common filters using the field name as the key, not the filter id
-        Object.keys(commonFilters).forEach(filterId => {
-          const filterValue = commonFilters[filterId];
-          console.log(`Processing filter ID: ${filterId}, Value:`, filterValue);
-          
-          // Find the filter definition to get the field name
-          const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
-          console.log(`Filter definition for ${filterId}:`, filterDef);
-          
-          if (filterDef && filterDef.field) {
-            const fieldName = filterDef.field;
-            console.log(`Mapping filter ID ${filterId} to field name: ${fieldName}`);
-            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
-              mergedFilterObj[fieldName] = filterValue;
-              console.log(`Added to merged filters: ${fieldName} =`, filterValue);
-            }
-          } else {
-            // Fallback to using filterId as field name if no field is defined
-            console.log(`No field name found for filter ID ${filterId}, using ID as field name`);
-            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
-              mergedFilterObj[filterId] = filterValue;
-              console.log(`Added to merged filters: ${filterId} =`, filterValue);
-            }
-          }
-        });
-        
-        if (Object.keys(mergedFilterObj).length > 0) {
-          filterParams = JSON.stringify(mergedFilterObj);
-        }
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
      }
      
-      console.log('Final merged filter object:', filterParams);
+      console.log('Final filter object:', filterObj);
      // Fetch data from the dashboard service with parameter field and value
      // For base level, we pass empty parameter and value, but now also pass filters
      const subscription = this.dashboardService.getChartData(this.table, 'bar', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe(
@@ -257,8 +572,9 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
            this.noDataAvailable = true;
            this.barChartLabels = [];
            this.barChartData = [];
-            // Reset flag after fetching
+            // Reset flags after fetching
            this.isFetchingData = false;
+            this.isLoading = false;
            return;
          }
          
@@ -287,8 +603,9 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
            this.barChartLabels = [];
            this.barChartData = [];
          }
-          // Reset flag after fetching
+          // Reset flags after fetching
          this.isFetchingData = false;
+          this.isLoading = false;
        },
        (error) => {
          console.error('=== BAR CHART ERROR ===');
@@ -296,8 +613,9 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
          this.noDataAvailable = true;
          this.barChartLabels = [];
          this.barChartData = [];
-          // Reset flag after fetching
+          // Reset flags after fetching
          this.isFetchingData = false;
+          this.isLoading = false;
          // Keep default data in case of error
        }
      );
@@ -309,8 +627,9 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
      this.noDataAvailable = true;
      this.barChartLabels = [];
      this.barChartData = [];
-      // Reset flag after fetching
+      // Reset flags after fetching
      this.isFetchingData = false;
+      this.isLoading = false;
    }
  }
  
@@ -400,61 +719,47 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
    console.log('Drilldown data URL:', url);
    
    // Convert drilldown layer filters to filter parameters (if applicable)
-    let filterParams = '';
+    const filterObj = {};
+    
+    // Add drilldown layer filters
    if (drilldownConfig.filters && drilldownConfig.filters.length > 0) {
-      const filterObj = {};
      drilldownConfig.filters.forEach((filter: any) => {
        if (filter.field && filter.value) {
          filterObj[filter.field] = filter.value;
        }
      });
-      if (Object.keys(filterObj).length > 0) {
-        filterParams = JSON.stringify(filterObj);
-      }
    }
-    console.log('Drilldown layer filter parameters:', filterParams);
    
-    // Convert drilldownFilters to filter parameters for drilldown level
-    let drilldownFilterParams = '';
+    // Add drilldownFilters
    if (this.drilldownFilters && this.drilldownFilters.length > 0) {
-      const filterObj = {};
      this.drilldownFilters.forEach(filter => {
        if (filter.field && filter.value) {
          filterObj[filter.field] = filter.value;
        }
      });
-      if (Object.keys(filterObj).length > 0) {
-        drilldownFilterParams = JSON.stringify(filterObj);
-      }
    }
    
-    // Add common filters to drilldown filter parameters
+    // Add common filters
    const commonFilters = this.filterService.getFilterValues();
-    if (Object.keys(commonFilters).length > 0) {
-      // Merge common filters with drilldown filters
-      const mergedFilterObj = {};
+    const filterDefinitions = this.filterService.getFilters();
+    Object.keys(commonFilters).forEach(filterId => {
+      const filterValue = commonFilters[filterId];
      
-      // Add drilldown filters first
-      if (drilldownFilterParams) {
-        try {
-          const drilldownFilterObj = JSON.parse(drilldownFilterParams);
-          Object.assign(mergedFilterObj, drilldownFilterObj);
-        } catch (e) {
-          console.warn('Failed to parse drilldown filter parameters:', e);
+      // Find the filter definition to get the field name
+      const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+      
+      if (filterDef && filterDef.field) {
+        const fieldName = filterDef.field;
+        if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+          filterObj[fieldName] = filterValue;
        }
      }
-      
-      // Add common filters
-      Object.keys(commonFilters).forEach(key => {
-        const value = commonFilters[key];
-        if (value !== undefined && value !== null && value !== '') {
-          mergedFilterObj[key] = value;
-        }
-      });
-      
-      if (Object.keys(mergedFilterObj).length > 0) {
-        drilldownFilterParams = JSON.stringify(mergedFilterObj);
-      }
+    });
+    
+    // Convert to JSON string for API call
+    let drilldownFilterParams = '';
+    if (Object.keys(filterObj).length > 0) {
+      drilldownFilterParams = JSON.stringify(filterObj);
    }
    
    console.log('Drilldown filter parameters:', drilldownFilterParams);
@@ -486,17 +791,23 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
          // Trigger change detection
          // this.barChartData = [...this.barChartData];
          console.log('Updated bar chart with drilldown data:', { labels: this.barChartLabels, data: this.barChartData });
+          // Set loading state to false
+          this.isLoading = false;
        } else if (data && data.labels && data.datasets) {
          // Backend has already filtered the data, just display it
          this.noDataAvailable = data.labels.length === 0;
          this.barChartLabels = data.labels;
          this.barChartData = data.datasets;
          console.log('Updated bar chart with drilldown legacy data format:', { labels: this.barChartLabels, data: this.barChartData });
+          // Set loading state to false
+          this.isLoading = false;
        } else {
          console.warn('Drilldown received data does not have expected structure', data);
          this.noDataAvailable = true;
          this.barChartLabels = [];
          this.barChartData = [];
+          // Set loading state to false
+          this.isLoading = false;
        }
      },
      (error) => {
@@ -504,12 +815,17 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
        this.noDataAvailable = true;
        this.barChartLabels = [];
        this.barChartData = [];
+        // Set loading state to false
+        this.isLoading = false;
        // Keep current data in case of error
      }
    );
    
    // Add subscription to array for cleanup
    this.subscriptions.push(subscription);
+    
+    // Set loading state
+    this.isLoading = true;
  }
  
  // Reset to original data (go back to base level)
@@ -713,6 +1029,12 @@ export class BarChartComponent implements OnInit, OnChanges, OnDestroy {
    this.originalBarChartLabels = [];
    this.originalBarChartData = [];
    
+    // Clear multiselect tracking
+    this.openMultiselects.clear();
+    
+    // Remove document click handler
+    this.removeDocumentClickHandler();
+    
    console.log('BarChartComponent destroyed and cleaned up');
  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component.html
@@ -1,28 +1,310 @@
-<div style="display:block">
-  <!-- Drilldown mode indicator -->
-  <div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
-    <span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
-    <button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
-      Back to Level {{currentDrilldownLevel - 1}}
-    </button>
-    <button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
-      Back to Main View
-    </button>
+<div style="display:block; height: 100%; width: 100%;">
+  <!-- Filter Controls Section -->
+  <div class="filter-section" *ngIf="hasActiveFilters()">
+    <!-- Base Filters -->
+    <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
+      <h4>Base Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of baseFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onBaseFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onBaseFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'base-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Drilldown Filters -->
+    <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+      <h4>Drilldown Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of drilldownFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onDrilldownFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onDrilldownFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'drilldown-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Layer Filters -->
+    <div class="filter-group" *ngIf="hasActiveLayerFilters()">
+      <h4>Layer Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onLayerFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onLayerFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'layer-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Clear Filters Button -->
+    <div class="filter-actions">
+      <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
+    </div>
  </div>
  
-  <!-- No data message -->
-  <div *ngIf="noDataAvailable" style="text-align: center; padding: 20px; color: #666; font-style: italic;">
-    No data available
+  <!-- Header row with chart title and drilldown navigation -->
+  <div class="clr-row header-row">
+    <div class="clr-col-6">
+      <h3 class="chart-title">{{charttitle || 'Bubble Chart'}}</h3>
+    </div>
+    <div class="clr-col-6" style="text-align: right;">
+      <!-- Add drilldown navigation controls -->
+      <button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
+        <cds-icon shape="arrow" direction="left"></cds-icon>
+        Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
+      </button>
+    </div>
  </div>
  
-  <!-- Chart display -->
-  <div *ngIf="!noDataAvailable">
+  <!-- Show current drilldown level -->
+  <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
+    <div class="clr-col-12">
+      <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
+        <div class="alert-items">
+          <div class="alert-item static">
+            <div class="alert-icon-wrapper">
+              <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
+            </div>
+            <span class="alert-text">
+              Drilldown Level: {{currentDrilldownLevel}} 
+              <span *ngIf="drilldownStack.length > 0">
+                (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Chart container -->
+  <div style="position: relative; height: calc(100% - 80px); width: 100%; padding: 0 10px 30px 10px;">
+    <!-- Loading indicator -->
+    <div *ngIf="!dataLoaded" style="text-align: center; padding: 20px; color: #666; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: 100%;">
+      Loading data...
+    </div>
+    
+    <!-- No data message -->
+    <div *ngIf="dataLoaded && (noDataAvailable || !isChartDataValid())" style="text-align: center; padding: 20px; color: #666; font-style: italic; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 10; width: 100%;">
+      No data available
+    </div>
+    
+    <!-- Chart display - Always render the canvas but conditionally show/hide with CSS -->
    <canvas baseChart
    [datasets]="bubbleChartData"
    [type]="bubbleChartType"
    [options]="bubbleChartOptions"
    (chartHover)="chartHovered($event)"
-    (chartClick)="chartClicked($event)">
+    (chartClick)="chartClicked($event)"
+    [style.visibility]="dataLoaded && !noDataAvailable && isChartDataValid() ? 'visible' : 'hidden'"
+    [style.position]="'absolute'"
+    [style.top]="'0'"
+    [style.left]="'0'"
+    [style.height]="'100%'"
+    [style.width]="'100%'"
+    [style.padding]="'0 10px 20px 10px'">
  </canvas>
  </div>
 </div>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component.scss
@@ -0,0 +1,192 @@
+.filter-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+}
+
+.filter-group {
+  margin-bottom: 15px;
+  
+  h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-weight: 600;
+  }
+}
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-item {
+  flex: 1 1 300px;
+  min-width: 250px;
+  padding: 10px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.filter-label {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #555;
+  font-size: 14px;
+}
+
+.filter-input {
+  width: 100%;
+  
+  .filter-text-input,
+  .filter-select,
+  .filter-date {
+    width: 100%;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .filter-select {
+    height: 34px;
+  }
+}
+
+.multiselect-container {
+  position: relative;
+}
+
+.multiselect-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  min-height: 34px;
+  
+  .multiselect-label {
+    flex: 1;
+    font-size: 14px;
+  }
+  
+  .multiselect-value {
+    color: #666;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+  
+  .dropdown-icon {
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover {
+    border-color: #999;
+  }
+}
+
+.multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  
+  .checkbox-group {
+    padding: 8px;
+    
+    .checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      
+      .checkbox-label {
+        margin: 0;
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.date-range {
+  .date-input-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .date-separator {
+    margin: 0 5px;
+    color: #777;
+  }
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .toggle-label {
+    margin: 0;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+
+.filter-actions {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+  
+  .btn {
+    font-size: 13px;
+  }
+}
+
+// New header row styling
+.header-row {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  
+  .chart-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .filter-controls {
+    flex-direction: column;
+  }
+  
+  .filter-item {
+    min-width: 100%;
+  }
+  
+  .header-row {
+    .chart-title {
+      font-size: 16px;
+    }
+  }
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component.ts
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component.html
@@ -1,39 +1,296 @@
-<div class="doughnut-chart-container">
-  <!-- Compact Filters -->
-  <div class="compact-filters-container" *ngIf="baseFilters && baseFilters.length > 0">
-    <app-compact-filter 
-      *ngFor="let filter of baseFilters" 
-      [filterKey]="filter.field"
-      (filterChange)="onFilterChange($event)">
-    </app-compact-filter>
-  </div>
-  
-  <!-- Drilldown mode indicator -->
-  <div *ngIf="currentDrilldownLevel > 0" class="drilldown-indicator">
-    <span class="drilldown-text">Drilldown Level: {{currentDrilldownLevel}}</span>
-    <button class="btn btn-secondary btn-sm" (click)="navigateBack()">
-      Back to Level {{currentDrilldownLevel - 1}}
-    </button>
-    <button class="btn btn-danger btn-sm" (click)="resetToOriginalData()">
-      Back to Main View
-    </button>
+<div class="chart-container">
+  <!-- Filter Controls Section -->
+  <div class="filter-section" *ngIf="hasActiveFilters()">
+    <!-- Base Filters -->
+    <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
+      <h4>Base Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of baseFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onBaseFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onBaseFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'base-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Drilldown Filters -->
+    <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+      <h4>Drilldown Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of drilldownFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onDrilldownFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onDrilldownFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'drilldown-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Layer Filters -->
+    <div class="filter-group" *ngIf="hasActiveLayerFilters()">
+      <h4>Layer Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onLayerFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onLayerFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'layer-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Clear Filters Button -->
+    <div class="filter-actions">
+      <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
+    </div>
  </div>
  
+  <!-- Header row with chart title and drilldown navigation -->
  <div class="chart-header">
-    <h3 class="chart-title" *ngIf="charttitle">{{ charttitle }}</h3>
+    <div class="clr-row header-row">
+      <div class="clr-col-6">
+        <h3 class="chart-title" *ngIf="charttitle">{{ charttitle }}</h3>
+      </div>
+      <div class="clr-col-6" style="text-align: right;">
+        <!-- Add drilldown navigation controls -->
+        <button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
+          <cds-icon shape="arrow" direction="left"></cds-icon>
+          Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
+        </button>
+      </div>
+    </div>
+    
+    <!-- Show current drilldown level -->
+    <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
+      <div class="clr-col-12">
+        <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
+          <div class="alert-items">
+            <div class="alert-item static">
+              <div class="alert-icon-wrapper">
+                <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
+              </div>
+              <span class="alert-text">
+                Drilldown Level: {{currentDrilldownLevel}} 
+                <span *ngIf="drilldownStack.length > 0">
+                  (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
  </div>
  
  <div class="chart-wrapper">
-    <div class="chart-content" [class.loading]="doughnutChartLabels.length === 0 && doughnutChartData.length === 0 && !noDataAvailable">
+    <div class="chart-content" [class.loading]="isLoading">
      <!-- Show no data message -->
-      <div class="no-data-message" *ngIf="noDataAvailable">
+      <div class="no-data-message" *ngIf="noDataAvailable && doughnutChartLabels.length === 0">
        <p>No chart data available</p>
      </div>
      
      <!-- Show chart when data is available -->
      <canvas baseChart 
-        *ngIf="!noDataAvailable && doughnutChartLabels.length > 0 && doughnutChartData.length > 0"
-        [data]="doughnutChartData" 
+        [datasets]="doughnutChartData" 
        [labels]="doughnutChartLabels" 
        [type]="doughnutChartType"
        [options]="doughnutChartOptions"
@@ -42,17 +299,17 @@
      </canvas>
      
      <!-- Loading overlay -->
-      <div class="loading-overlay" *ngIf="doughnutChartLabels.length === 0 && doughnutChartData.length === 0 && !noDataAvailable">
+      <div class="loading-overlay" *ngIf="isLoading">
        <div class="shimmer-donut"></div>
      </div>
    </div>
  </div>
  
-  <div class="chart-legend" *ngIf="!noDataAvailable && showlabel && doughnutChartLabels && doughnutChartLabels.length > 0">
+  <div class="chart-legend" *ngIf="showlabel && doughnutChartLabels && doughnutChartLabels.length > 0">
    <div class="legend-item" *ngFor="let label of doughnutChartLabels; let i = index">
      <span class="legend-color" [style.background-color]="getLegendColor(i)"></span>
      <span class="legend-label">{{ label }}</span>
-      <span class="legend-value">{{ doughnutChartData && doughnutChartData[i] !== undefined ? doughnutChartData[i] : 0 }}</span>
+      <span class="legend-value">{{ doughnutChartData && doughnutChartData[0] && doughnutChartData[0].data && doughnutChartData[0].data[i] !== undefined ? doughnutChartData[0].data[i] : 0 }}</span>
    </div>
  </div>
 </div>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component.scss
@@ -1,239 +1,292 @@
-.doughnut-chart-container {
+// Chart container structure - simplified to match shield dashboard
+.chart-container {
+  height: 100%;
+  min-height: 400px; // Ensure minimum height
  display: flex;
  flex-direction: column;
-  height: 400px;
-  min-height: 400px;
-  padding: 20px;
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  transition: all 0.3s ease;
-  border: 1px solid #eaeaea;
-}
-
-.doughnut-chart-container:hover {
-  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
-  transform: translateY(-2px);
-}
-
-.compact-filters-container {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 5px;
-  margin-bottom: 10px;
-  padding: 5px;
-  background: #ffffff;
-  border: 1px solid #e9ecef;
-  border-radius: 6px;
-  min-height: 40px;
-}
-
-.drilldown-indicator {
-  background-color: #e0e0e0;
-  padding: 10px;
-  margin-bottom: 15px;
-  border-radius: 8px;
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 10px;
-  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
-}
-
-.drilldown-text {
-  font-weight: bold;
-  color: #333;
-  font-size: 16px;
-}
-
-.btn {
-  padding: 6px 12px;
-  border: none;
-  border-radius: 4px;
-  cursor: pointer;
-  font-size: 14px;
-  transition: all 0.3s ease;
-}
-
-.btn:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-}
-
-.btn-sm {
-  padding: 4px 8px;
-  font-size: 12px;
-}
-
-.btn-secondary {
-  background-color: #007cba;
-  color: white;
-}
-
-.btn-danger {
-  background-color: #dc3545;
-  color: white;
-}
-
-.chart-header {
-  margin-bottom: 20px;
  
-  .chart-title {
-    font-size: 22px;
-    font-weight: 600;
-    color: #0a192f;
-    margin: 0;
-    text-align: center;
-    padding-bottom: 10px;
-    border-bottom: 2px solid #3498db;
+  // Filter section styling
+  .filter-section {
+    margin-bottom: 20px;
+    padding: 15px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background-color: #f9f9f9;
  }
-}

-.chart-wrapper {
-  position: relative;
-  flex: 1;
-  min-height: 250px;
-  margin: 15px 0;
-  background: #f8f9fa;
-  border: 1px solid #e9ecef;
-  border-radius: 8px;
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.chart-wrapper canvas {
-  max-width: 100%;
-  max-height: 100%;
-  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
-}
-
-.chart-wrapper canvas:hover {
-  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
-  transform: scale(1.02);
-  transition: all 0.3s ease;
-}
-
-.chart-content {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  
-  &.loading {
-    opacity: 0.7;
+  .filter-group {
+    margin-bottom: 15px;
    
-    canvas {
-      filter: blur(2px);
+    h4 {
+      margin-top: 0;
+      margin-bottom: 10px;
+      color: #333;
+      font-weight: 600;
    }
  }
-  
-  .no-data-message {
-    text-align: center;
-    padding: 30px;
-    color: #666;
-    font-size: 18px;
-    font-style: italic;
+
+  .filter-controls {
    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
+    flex-wrap: wrap;
+    gap: 15px;
+  }
+
+  .filter-item {
+    flex: 1 1 300px;
+    min-width: 250px;
+    padding: 10px;
+    background: white;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+  }
+
+  .filter-label {
+    font-weight: 500;
+    margin-bottom: 8px;
+    color: #555;
+    font-size: 14px;
+  }
+
+  .filter-input {
    width: 100%;
+    
+    .filter-text-input,
+    .filter-select,
+    .filter-date {
+      width: 100%;
+      padding: 6px 12px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      font-size: 14px;
+    }
+    
+    .filter-select {
+      height: 34px;
+    }
  }
-  
-  .no-data-message p {
-    margin: 0;
+
+  .multiselect-container {
+    position: relative;
  }
-  
-  .loading-overlay {
+
+  .multiselect-display {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background: white;
+    cursor: pointer;
+    min-height: 34px;
+    
+    .multiselect-label {
+      flex: 1;
+      font-size: 14px;
+    }
+    
+    .multiselect-value {
+      color: #666;
+      font-size: 12px;
+      margin-right: 8px;
+    }
+    
+    .dropdown-icon {
+      flex-shrink: 0;
+      transition: transform 0.2s ease;
+    }
+    
+    &:hover {
+      border-color: #999;
+    }
+  }
+
+  .multiselect-dropdown {
    position: absolute;
-    top: 0;
+    top: 100%;
    left: 0;
    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: rgba(255, 255, 255, 0.8);
+    z-index: 1000;
+    background: white;
+    border: 1px solid #ccc;
+    border-top: none;
+    border-radius: 0 0 4px 4px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    max-height: 200px;
+    overflow-y: auto;
    
-    .shimmer-donut {
-      width: 120px;
-      height: 120px;
-      border-radius: 50%;
-      background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
-      background-size: 200% 100%;
-      animation: shimmer 1.5s infinite;
+    .checkbox-group {
+      padding: 8px;
+      
+      .checkbox-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 4px 0;
+        
+        .checkbox-label {
+          margin: 0;
+          font-size: 14px;
+          cursor: pointer;
+        }
+      }
    }
  }
-}

-.chart-legend {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
-  gap: 15px;
-  margin-top: 20px;
-  padding: 20px;
-  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-  border-radius: 8px;
-  border: 1px solid #dee2e6;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);
-}
+  .date-range {
+    .date-input-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+    
+    .date-separator {
+      margin: 0 5px;
+      color: #777;
+    }
+  }

-.legend-item {
-  display: flex;
-  align-items: center;
-  padding: 12px 20px;
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  border-radius: 25px;
-  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s ease;
-  border: 1px solid #eaeaea;
-  cursor: pointer;
-}
+  .toggle {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    .toggle-label {
+      margin: 0;
+      font-size: 14px;
+      cursor: pointer;
+    }
+  }

-.legend-item:hover {
-  transform: translateY(-3px);
-  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
-  border-color: #3498db;
-  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
-}
-
-.legend-color {
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  margin-right: 12px;
-  display: inline-block;
-  border: 2px solid white;
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-}
-
-.legend-label {
-  font-size: 16px;
-  font-weight: 600;
-  color: #2c3e50;
-  margin-right: 15px;
-  white-space: nowrap;
-  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
-}
-
-.legend-value {
-  font-size: 16px;
-  font-weight: 700;
-  color: #3498db;
-  background: linear-gradient(135deg, #e9ecef 0%, #dde1e5 100%);
-  padding: 6px 12px;
-  border-radius: 12px;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-  min-width: 40px;
-  text-align: center;
+  .filter-actions {
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid #eee;
+    
+    .btn {
+      font-size: 13px;
+    }
+  }
+  
+  // Chart header styling
+  .chart-header {
+    margin-bottom: 20px;
+    
+    .header-row {
+      margin-bottom: 15px;
+      padding-bottom: 10px;
+      border-bottom: 1px solid #eee;
+      
+      .chart-title {
+        margin: 0;
+        font-size: 18px;
+        font-weight: 600;
+        color: #0a192f;
+      }
+    }
+  }
+  
+  // Chart wrapper and content - simplified to match shield dashboard
+  .chart-wrapper {
+    flex: 1;
+    position: relative;
+    
+    .chart-content {
+      position: relative;
+      height: 100%;
+      min-height: 300px;
+      
+      &.loading {
+        opacity: 0.7;
+        
+        canvas {
+          filter: blur(2px);
+        }
+      }
+      
+      .no-data-message {
+        text-align: center;
+        padding: 20px;
+        color: #666;
+        font-style: italic;
+      }
+      
+      canvas {
+        max-width: 100%;
+        max-height: calc(100% - 40px); // Leave space for legend
+        transition: filter 0.3s ease;
+      }
+      
+      .loading-overlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: rgba(255, 255, 255, 0.8);
+        
+        .shimmer-donut {
+          width: 120px;
+          height: 120px;
+          border-radius: 50%;
+          background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+          background-size: 200% 100%;
+          animation: shimmer 1.5s infinite;
+        }
+      }
+    }
+  }
+  
+  // Chart legend - simplified
+  .chart-legend {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    gap: 15px;
+    margin: 20px 0;
+    padding: 15px;
+    
+    .legend-item {
+      display: flex;
+      align-items: center;
+      padding: 8px 15px;
+      background: #f8f9fa;
+      border-radius: 20px;
+      border: 1px solid #e9ecef;
+      min-width: 120px;
+      justify-content: space-between;
+    }
+    
+    .legend-color {
+      width: 15px;
+      height: 15px;
+      border-radius: 50%;
+      margin-right: 8px;
+      display: inline-block;
+      flex-shrink: 0;
+    }
+    
+    .legend-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: #2c3e50;
+      margin-right: 10px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    
+    .legend-value {
+      font-size: 14px;
+      font-weight: 600;
+      color: #3498db;
+      min-width: 30px;
+      text-align: right;
+    }
+  }
 }

@keyframes shimmer {
@@ -245,46 +298,46 @@
  }
 }

-/* Responsive design */
+// Responsive design
@media (max-width: 768px) {
-  .doughnut-chart-container {
-    padding: 15px;
-  }
-  
-  .chart-header .chart-title {
-    font-size: 18px;
-  }
-  
-  .drilldown-indicator {
-    flex-direction: column;
-    gap: 5px;
-  }
-  
-  .drilldown-text {
-    font-size: 14px;
-  }
-  
-  .chart-wrapper {
-    min-height: 200px;
-  }
-  
-  .chart-legend {
-    flex-direction: column;
-    align-items: center;
-  }
-  
-  .legend-item {
-    width: 100%;
-    max-width: 300px;
-    justify-content: space-between;
-  }
-  
-  .no-data-message {
-    font-size: 16px;
-    padding: 20px;
-  }
-  
-  .compact-filters-container {
-    flex-wrap: wrap;
+  .chart-container {
+    .filter-controls {
+      flex-direction: column;
+    }
+    
+    .filter-item {
+      min-width: 100%;
+    }
+    
+    .chart-header {
+      .header-row {
+        .chart-title {
+          font-size: 16px;
+        }
+      }
+    }
+    
+    .chart-content {
+      min-height: 250px;
+    }
+    
+    .chart-legend {
+      flex-direction: column;
+      align-items: center;
+      
+      .legend-item {
+        width: 100%;
+        max-width: 300px;
+        justify-content: space-between;
+      }
+    }
+    
+    .chart-content {
+      min-height: 250px;
+      
+      canvas {
+        max-height: calc(100% - 60px); // More space for legend on mobile
+      }
+    }
  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component.ts
@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs';
  templateUrl: './doughnut-chart.component.html',
  styleUrls: ['./doughnut-chart.component.scss']
 })
-export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewChecked {
+export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewChecked, OnDestroy {
  @Input() xAxis: string;
  @Input() yAxis: string | string[];
  @Input() table: string;
@@ -36,7 +36,21 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
  @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations

  public doughnutChartLabels: string[] = ["Category A", "Category B", "Category C"];
-  public doughnutChartData: number[] = [30, 50, 20];
+  public doughnutChartData: any[] = [
+    {
+      data: [30, 50, 20],
+      backgroundColor: [
+        '#FF6384',
+        '#36A2EB',
+        '#FFCE56'
+      ],
+      hoverBackgroundColor: [
+        '#FF6384',
+        '#36A2EB',
+        '#FFCE56'
+      ]
+    }
+  ];
  public doughnutChartType: string = "doughnut";
  public doughnutChartOptions: any = {
    responsive: true,
@@ -72,6 +86,14 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
        borderWidth: 2,
        borderColor: '#fff'
      }
+    },
+    layout: {
+      padding: {
+        top: 20,
+        bottom: 20,
+        left: 20,
+        right: 20
+      }
    }
  };
  
@@ -96,12 +118,20 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
  // No data state
  noDataAvailable: boolean = false;
  
+  // Loading state
+  isLoading: boolean = false;
+  
  // Flag to prevent infinite loops
  private isFetchingData: boolean = false;
  
  // Subscriptions to unsubscribe on destroy
  private subscriptions: Subscription[] = [];

+  // Add properties for filter functionality
+  private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
+  private documentClickHandler: ((event: MouseEvent) => void) | null = null;
+  private filtersInitialized: boolean = false;
+
  constructor(
    private dashboardService: Dashboard3Service,
    private filterService: FilterService
@@ -118,7 +148,10 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
    
    // Validate initial data
    this.validateChartData();
-    this.fetchChartData();
+    // Only fetch data if we have the required inputs, otherwise show default data
+    if (this.table && this.xAxis && this.yAxis) {
+      this.fetchChartData();
+    }
  }
  
  /**
@@ -138,17 +171,33 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
    if (this.doughnutChartLabels.length === 0 && this.doughnutChartData.length === 0) {
      // Add default data to ensure chart visibility
      this.doughnutChartLabels = ["Category A", "Category B", "Category C"];
-      this.doughnutChartData = [30, 50, 20];
+      this.doughnutChartData = [
+        {
+          data: [30, 50, 20],
+          backgroundColor: [
+            '#FF6384',
+            '#36A2EB',
+            '#FFCE56'
+          ],
+          hoverBackgroundColor: [
+            '#FF6384',
+            '#36A2EB',
+            '#FFCE56'
+          ]
+        }
+      ];
    }
    
    // Ensure we have matching arrays
-    if (this.doughnutChartLabels.length !== this.doughnutChartData.length) {
-      const maxLength = Math.max(this.doughnutChartLabels.length, this.doughnutChartData.length);
+    if (this.doughnutChartLabels.length !== (this.doughnutChartData[0]?.data?.length || 0)) {
+      const maxLength = Math.max(this.doughnutChartLabels.length, this.doughnutChartData[0]?.data?.length || 0);
      while (this.doughnutChartLabels.length < maxLength) {
        this.doughnutChartLabels.push(`Label ${this.doughnutChartLabels.length + 1}`);
      }
-      while (this.doughnutChartData.length < maxLength) {
-        this.doughnutChartData.push(0);
+      if (this.doughnutChartData[0]) {
+        while (this.doughnutChartData[0].data.length < maxLength) {
+          this.doughnutChartData[0].data.push(0);
+        }
      }
    }
  }
@@ -164,6 +213,12 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
  ngOnChanges(changes: SimpleChanges): void {
    console.log('DoughnutChartComponent input changes:', changes);
    
+    // Initialize filter values if they haven't been initialized yet
+    if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
+      this.initializeFilterValues();
+      this.filtersInitialized = true;
+    }
+    
    // Check if any of the key properties have changed
    const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
    const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
@@ -185,6 +240,12 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
      console.log('Chart configuration changed, fetching new data');
      this.fetchChartData();
    }
+    
+    // If we have the required inputs and haven't fetched data yet, fetch it
+    if ((xAxisChanged || yAxisChanged || tableChanged) && this.table && this.xAxis && this.yAxis && !this.isFetchingData) {
+      console.log('Required inputs available, fetching data');
+      this.fetchChartData();
+    }
  }
  
  ngAfterViewChecked() {
@@ -198,12 +259,318 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck

  ngOnDestroy(): void {
    this.subscriptions.forEach(sub => sub.unsubscribe());
+    // Clean up document click handler
+    this.removeDocumentClickHandler();
  }
  
-  // Handle filter changes from compact filters
-  onFilterChange(event: { filterId: string, value: any }): void {
-    console.log('Compact filter changed:', event);
-    // The filter service will automatically trigger chart updates through the subscription
+  // Initialize filter values with proper default values based on type
+  private initializeFilterValues(): void {
+    console.log('Initializing filter values');
+    
+    // Initialize base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.value === undefined || filter.value === null) {
+              switch (filter.type) {
+                case 'multiselect':
+                  filter.value = [];
+                  break;
+                case 'date-range':
+                  filter.value = { start: null, end: null };
+                  break;
+                case 'toggle':
+                  filter.value = false;
+                  break;
+                default:
+                  filter.value = '';
+              }
+            }
+          });
+        }
+      });
+    }
+    
+    console.log('Filter values initialized:', {
+      baseFilters: this.baseFilters,
+      drilldownFilters: this.drilldownFilters,
+      drilldownLayers: this.drilldownLayers
+    });
+  }
+
+  // Check if there are active filters
+  hasActiveFilters(): boolean {
+    return (this.baseFilters && this.baseFilters.length > 0) || 
+           (this.drilldownFilters && this.drilldownFilters.length > 0) || 
+           this.hasActiveLayerFilters();
+  }
+
+  // Check if there are active layer filters for current drilldown level
+  hasActiveLayerFilters(): boolean {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      return layerIndex < this.drilldownLayers.length && 
+             this.drilldownLayers[layerIndex].filters && 
+             this.drilldownLayers[layerIndex].filters.length > 0;
+    }
+    return false;
+  }
+
+  // Get active layer filters for current drilldown level
+  getActiveLayerFilters(): any[] {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      if (layerIndex < this.drilldownLayers.length && 
+          this.drilldownLayers[layerIndex].filters) {
+        return this.drilldownLayers[layerIndex].filters;
+      }
+    }
+    return [];
+  }
+
+  // Get filter options for dropdown/multiselect filters
+  getFilterOptions(filter: any): string[] {
+    if (filter.options) {
+      if (Array.isArray(filter.options)) {
+        return filter.options;
+      } else if (typeof filter.options === 'string') {
+        return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
+      }
+    }
+    return [];
+  }
+
+  // Check if an option is selected for multiselect filters
+  isOptionSelected(filter: any, option: string): boolean {
+    if (!filter.value) {
+      return false;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.includes(option);
+    }
+    
+    return filter.value === option;
+  }
+
+  // Handle base filter changes
+  onBaseFilterChange(filter: any): void {
+    console.log('Base filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle drilldown filter changes
+  onDrilldownFilterChange(filter: any): void {
+    console.log('Drilldown filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle layer filter changes
+  onLayerFilterChange(filter: any): void {
+    console.log('Layer filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle multiselect changes
+  onMultiSelectChange(filter: any, option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filter.value as array if it's not already
+    if (!Array.isArray(filter.value)) {
+      filter.value = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!filter.value.includes(option)) {
+        filter.value.push(option);
+      }
+    } else {
+      // Remove option from array
+      filter.value = filter.value.filter((item: string) => item !== option);
+    }
+    
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle date range changes
+  onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
+    filter.value = dateRange;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle toggle changes
+  onToggleChange(filter: any, checked: boolean): void {
+    filter.value = checked;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Toggle multiselect dropdown visibility
+  toggleMultiselect(filter: any, context: string): void {
+    const filterId = `${context}-${filter.field}`;
+    if (this.isMultiselectOpen(filter, context)) {
+      this.openMultiselects.delete(filterId);
+    } else {
+      // Close all other multiselects first
+      this.openMultiselects.clear();
+      this.openMultiselects.set(filterId, context);
+      
+      // Add document click handler to close dropdown when clicking outside
+      this.addDocumentClickHandler();
+    }
+  }
+
+  // Add document click handler to close dropdowns when clicking outside
+  private addDocumentClickHandler(): void {
+    if (!this.documentClickHandler) {
+      this.documentClickHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        // Check if click is outside any multiselect dropdown
+        if (!target.closest('.multiselect-container')) {
+          this.openMultiselects.clear();
+          this.removeDocumentClickHandler();
+        }
+      };
+      
+      // Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
+      setTimeout(() => {
+        document.addEventListener('click', this.documentClickHandler!);
+      }, 0);
+    }
+  }
+
+  // Remove document click handler
+  private removeDocumentClickHandler(): void {
+    if (this.documentClickHandler) {
+      document.removeEventListener('click', this.documentClickHandler);
+      this.documentClickHandler = null;
+    }
+  }
+
+  // Check if multiselect dropdown is open
+  isMultiselectOpen(filter: any, context: string): boolean {
+    const filterId = `${context}-${filter.field}`;
+    return this.openMultiselects.has(filterId);
+  }
+
+  // Get count of selected options for a multiselect filter
+  getSelectedOptionsCount(filter: any): number {
+    if (!filter.value) {
+      return 0;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.length;
+    }
+    
+    return 0;
+  }
+
+  // Clear all filters
+  clearAllFilters(): void {
+    // Clear base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.type === 'multiselect') {
+              filter.value = [];
+            } else if (filter.type === 'date-range') {
+              filter.value = { start: null, end: null };
+            } else if (filter.type === 'toggle') {
+              filter.value = false;
+            } else {
+              filter.value = '';
+            }
+          });
+        }
+      });
+    }
+    
+    // Close all multiselect dropdowns
+    this.openMultiselects.clear();
+    
+    // Refresh data
+    this.fetchChartData();
  }
  
  // Public method to refresh data when filters change
@@ -212,14 +579,18 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
  }
  
  fetchChartData(): void {
+    // Set loading state
+    this.isLoading = true;
+    
    // Set flag to prevent recursive calls
    this.isFetchingData = true;
    
    // If we're in drilldown mode, fetch the appropriate drilldown data
    if (this.currentDrilldownLevel > 0 && this.drilldownStack.length > 0) {
      this.fetchDrilldownData();
-      // Reset flag after fetching
+      // Reset flags after fetching
      this.isFetchingData = false;
+      this.isLoading = false;
      return;
    }
    
@@ -289,7 +660,7 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
      
      // Log the URL that will be called
      const url = `chart/getdashjson/doughnut?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
-      console.log('Doughnut chart data URL:', url);
+      console.log('Chart data URL:', url);
      
      // Fetch data from the dashboard service with parameter field and value
      // For base level, we pass empty parameter and value, but now also pass filters
@@ -297,89 +668,113 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
        (data: any) => {
          console.log('Received doughnut chart data:', data);
          if (data === null) {
-            console.warn('Doughnut chart API returned null data. Check if the API endpoint is working correctly.');
+            console.warn('API returned null data. Check if the API endpoint is working correctly.');
            this.noDataAvailable = true;
            this.doughnutChartLabels = [];
            this.doughnutChartData = [];
-            // Validate and sanitize data to show default data
-            this.validateChartData();
-            // Reset flag after fetching
+            // Reset flags after fetching
            this.isFetchingData = false;
+            this.isLoading = false;
            return;
          }
          
          // Handle the actual data structure returned by the API
          if (data && data.chartLabels && data.chartData) {
-            // For doughnut charts, we need to extract the data differently
-            // The first dataset's data array contains the values for the doughnut chart
+            // Backend has already filtered the data, just display it
            this.noDataAvailable = data.chartLabels.length === 0;
-            this.doughnutChartLabels = data.chartLabels || [];
-            if (data.chartData && data.chartData.length > 0) {
-              this.doughnutChartData = data.chartData[0].data.map(value => {
-                // Convert to number if it's not already
-                const numValue = Number(value);
-                return isNaN(numValue) ? 0 : numValue;
-              });
+            this.doughnutChartLabels = data.chartLabels;
+            
+            // Handle different data structures
+            let chartDataValues;
+            if (Array.isArray(data.chartData)) {
+              // If chartData is already an array of values
+              if (data.chartData.length > 0 && typeof data.chartData[0] !== 'object') {
+                chartDataValues = data.chartData;
+              } 
+              // If chartData is an array with one object containing the data
+              else if (data.chartData.length > 0 && data.chartData[0].data) {
+                chartDataValues = data.chartData[0].data;
+              }
+              // Default case
+              else {
+                chartDataValues = data.chartData;
+              }
            } else {
-              this.doughnutChartData = [];
+              chartDataValues = [data.chartData];
            }
-            // Ensure labels and data arrays have the same length
-            this.syncLabelAndDataArrays();
-            // Validate and sanitize data
-            this.validateChartData();
-            // Trigger change detection
-            this.doughnutChartData = [...this.doughnutChartData];
+            
+            this.doughnutChartData = [
+              {
+                data: chartDataValues,
+                backgroundColor: this.chartColors.slice(0, chartDataValues.length),
+                hoverBackgroundColor: this.chartColors.slice(0, chartDataValues.length)
+              }
+            ];
            console.log('Updated doughnut chart with data:', { labels: this.doughnutChartLabels, data: this.doughnutChartData });
-          } else if (data && data.labels && data.data) {
-            // Handle the original expected format as fallback
+          } else if (data && data.labels && data.datasets) {
+            // Backend has already filtered the data, just display it
            this.noDataAvailable = data.labels.length === 0;
-            this.doughnutChartLabels = data.labels || [];
-            this.doughnutChartData = data.data.map(value => {
-              // Convert to number if it's not already
-              const numValue = Number(value);
-              return isNaN(numValue) ? 0 : numValue;
-            });
-            // Ensure labels and data arrays have the same length
-            this.syncLabelAndDataArrays();
-            // Validate and sanitize data
-            this.validateChartData();
-            // Trigger change detection
-            this.doughnutChartData = [...this.doughnutChartData];
+            this.doughnutChartLabels = data.labels;
+            this.doughnutChartData = data.datasets;
            console.log('Updated doughnut chart with legacy data format:', { labels: this.doughnutChartLabels, data: this.doughnutChartData });
          } else {
-            console.warn('Doughnut chart received data does not have expected structure', data);
-            // Reset to default data
+            console.warn('Received data does not have expected structure', data);
            this.noDataAvailable = true;
-            this.doughnutChartLabels = [];
-            this.doughnutChartData = [];
-            // Validate and sanitize data to show default data
-            this.validateChartData();
+            // Keep default data instead of empty arrays
+            this.doughnutChartLabels = ["Category A", "Category B", "Category C"];
+            this.doughnutChartData = [
+              {
+                data: [30, 50, 20],
+                backgroundColor: [
+                  '#FF6384',
+                  '#36A2EB',
+                  '#FFCE56'
+                ],
+                hoverBackgroundColor: [
+                  '#FF6384',
+                  '#36A2EB',
+                  '#FFCE56'
+                ]
+              }
+            ];
          }
-          // Reset flag after fetching
+          // Reset flags after fetching
          this.isFetchingData = false;
+          this.isLoading = false;
        },
        (error) => {
          console.error('Error fetching doughnut chart data:', error);
          this.noDataAvailable = true;
-          this.doughnutChartLabels = [];
-          this.doughnutChartData = [];
-          // Validate and sanitize data to show default data
-          this.validateChartData();
-          // Reset flag after fetching
+          // Keep default data in case of error
+          this.doughnutChartLabels = ["Category A", "Category B", "Category C"];
+          this.doughnutChartData = [
+            {
+              data: [30, 50, 20],
+              backgroundColor: [
+                '#FF6384',
+                '#36A2EB',
+                '#FFCE56'
+              ],
+              hoverBackgroundColor: [
+                '#FF6384',
+                '#36A2EB',
+                '#FFCE56'
+              ]
+            }
+          ];
+          // Reset flags after fetching
          this.isFetchingData = false;
+          this.isLoading = false;
        }
      );
    } else {
-      console.log('Missing required data for doughnut chart, showing default data:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      // Don't set noDataAvailable to true when there's no required data
-      // This allows static data to be displayed
-      this.noDataAvailable = false;
-      // Validate the chart data to ensure we have some data to display
-      this.validateChartData();
-      // Force a redraw to ensure the chart displays
-      this.doughnutChartData = [...this.doughnutChartData];
-      // Reset flag after fetching
+      console.log('Missing required data for chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
+      this.noDataAvailable = true;
+      this.doughnutChartLabels = [];
+      this.doughnutChartData = [];
+      // Reset flags after fetching
      this.isFetchingData = false;
+      this.isLoading = false;
    }
  }
  
@@ -475,6 +870,35 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
      }
    }
    
+    // Add common filters to drilldown filter parameters
+    const commonFilters = this.filterService.getFilterValues();
+    if (Object.keys(commonFilters).length > 0) {
+      // Merge common filters with drilldown filters
+      const mergedFilterObj = {};
+      
+      // Add drilldown filters first
+      if (filterParams) {
+        try {
+          const drilldownFilterObj = JSON.parse(filterParams);
+          Object.assign(mergedFilterObj, drilldownFilterObj);
+        } catch (e) {
+          console.warn('Failed to parse drilldown filter parameters:', e);
+        }
+      }
+      
+      // Add common filters
+      Object.keys(commonFilters).forEach(key => {
+        const value = commonFilters[key];
+        if (value !== undefined && value !== null && value !== '') {
+          mergedFilterObj[key] = value;
+        }
+      });
+      
+      if (Object.keys(mergedFilterObj).length > 0) {
+        filterParams = JSON.stringify(mergedFilterObj);
+      }
+    }
+    
    // Log the URL that will be called
    const url = `chart/getdashjson/doughnut?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
    console.log('Drilldown data URL:', url);
@@ -494,59 +918,66 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
        
        // Handle the actual data structure returned by the API
        if (data && data.chartLabels && data.chartData) {
-          // For doughnut charts, we need to extract the data differently
-          // The first dataset's data array contains the values for the doughnut chart
+          // Backend has already filtered the data, just display it
          this.noDataAvailable = data.chartLabels.length === 0;
-          this.doughnutChartLabels = data.chartLabels || [];
-          if (data.chartData && data.chartData.length > 0) {
-            this.doughnutChartData = data.chartData[0].data.map(value => {
-              // Convert to number if it's not already
-              const numValue = Number(value);
-              return isNaN(numValue) ? 0 : numValue;
-            });
+          this.doughnutChartLabels = data.chartLabels;
+          
+          // Handle different data structures
+          let chartDataValues;
+          if (Array.isArray(data.chartData)) {
+            // If chartData is already an array of values
+            if (data.chartData.length > 0 && typeof data.chartData[0] !== 'object') {
+              chartDataValues = data.chartData;
+            } 
+            // If chartData is an array with one object containing the data
+            else if (data.chartData.length > 0 && data.chartData[0].data) {
+              chartDataValues = data.chartData[0].data;
+            }
+            // Default case
+            else {
+              chartDataValues = data.chartData;
+            }
          } else {
-            this.doughnutChartData = [];
+            chartDataValues = [data.chartData];
          }
-          // Ensure labels and data arrays have the same length
-          this.syncLabelAndDataArrays();
-          // Validate and sanitize data
-          this.validateChartData();
-          // Trigger change detection
-          this.doughnutChartData = [...this.doughnutChartData];
+          
+          this.doughnutChartData = [
+            {
+              data: chartDataValues,
+              backgroundColor: this.chartColors.slice(0, chartDataValues.length),
+              hoverBackgroundColor: this.chartColors.slice(0, chartDataValues.length)
+            }
+          ];
          console.log('Updated doughnut chart with drilldown data:', { labels: this.doughnutChartLabels, data: this.doughnutChartData });
-        } else if (data && data.labels && data.data) {
-          // Handle the original expected format as fallback
+          // Set loading state to false
+          this.isLoading = false;
+        } else if (data && data.labels && data.datasets) {
+          // Backend has already filtered the data, just display it
          this.noDataAvailable = data.labels.length === 0;
-          this.doughnutChartLabels = data.labels || [];
-          this.doughnutChartData = data.data.map(value => {
-            // Convert to number if it's not already
-            const numValue = Number(value);
-            return isNaN(numValue) ? 0 : numValue;
-          });
-          // Ensure labels and data arrays have the same length
-          this.syncLabelAndDataArrays();
-          // Validate and sanitize data
-          this.validateChartData();
-          // Trigger change detection
-          this.doughnutChartData = [...this.doughnutChartData];
+          this.doughnutChartLabels = data.labels;
+          this.doughnutChartData = data.datasets;
          console.log('Updated doughnut chart with drilldown legacy data format:', { labels: this.doughnutChartLabels, data: this.doughnutChartData });
+          // Set loading state to false
+          this.isLoading = false;
        } else {
          console.warn('Drilldown received data does not have expected structure', data);
          this.noDataAvailable = true;
-          this.doughnutChartLabels = [];
-          this.doughnutChartData = [];
-          // Validate and sanitize data
-          this.validateChartData();
+          // Keep current data instead of empty arrays
+          // Set loading state to false
+          this.isLoading = false;
        }
      },
      (error) => {
        console.error('Error fetching drilldown data:', error);
        this.noDataAvailable = true;
-        this.doughnutChartLabels = [];
-        this.doughnutChartData = [];
        // Keep current data in case of error
+        // Set loading state to false
+        this.isLoading = false;
      }
    );
+    
+    // Set loading state
+    this.isLoading = true;
  }
  
  // Reset to original data (go back to base level)
@@ -563,7 +994,7 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
      console.log('Restored original labels');
    }
    if (this.originalDoughnutChartData.length > 0) {
-      this.doughnutChartData = [...this.originalDoughnutChartData];
+      this.doughnutChartData = JSON.parse(JSON.stringify(this.originalDoughnutChartData));
      console.log('Restored original data');
    }
    
@@ -604,44 +1035,11 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
      this.resetToOriginalData();
    }
  }
-  
-  /**
-   * Get color for legend item
-   * @param index Index of the legend item
-   */
-  public getLegendColor(index: number): string {
+
+  // Get legend color for a specific index
+  getLegendColor(index: number): string {
    return this.chartColors[index % this.chartColors.length];
  }
-  
-  /**
-   * Ensure labels and data arrays have the same length
-   */
-  private syncLabelAndDataArrays(): void {
-    // Handle empty arrays
-    if (this.doughnutChartLabels.length === 0 && this.doughnutChartData.length === 0) {
-      return;
-    }
-    
-    const maxLength = Math.max(this.doughnutChartLabels.length, this.doughnutChartData.length);
-    
-    // Pad the shorter array with default values
-    while (this.doughnutChartLabels.length < maxLength) {
-      this.doughnutChartLabels.push(`Label ${this.doughnutChartLabels.length + 1}`);
-    }
-    
-    while (this.doughnutChartData.length < maxLength) {
-      this.doughnutChartData.push(0);
-    }
-    
-    // Truncate the longer array if needed
-    if (this.doughnutChartLabels.length > maxLength) {
-      this.doughnutChartLabels = this.doughnutChartLabels.slice(0, maxLength);
-    }
-    
-    if (this.doughnutChartData.length > maxLength) {
-      this.doughnutChartData = this.doughnutChartData.slice(0, maxLength);
-    }
-  }

  // events
  public chartClicked(e: any): void {
@@ -729,6 +1127,6 @@ export class DoughnutChartComponent implements OnInit, OnChanges, AfterViewCheck
  }

  public chartHovered(e: any): void {
-    console.log(e);
+    console.log('Doughnut chart hovered:', e);
  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component.html
@@ -1,4 +1,285 @@
 <div class="dynamic-chart-container">
+  <!-- Filter Controls Section -->
+  <div class="filter-section" *ngIf="hasActiveFilters()">
+    <!-- Base Filters -->
+    <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
+      <h4>Base Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of baseFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onBaseFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onBaseFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'base-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Drilldown Filters -->
+    <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+      <h4>Drilldown Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of drilldownFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onDrilldownFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onDrilldownFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'drilldown-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Layer Filters -->
+    <div class="filter-group" *ngIf="hasActiveLayerFilters()">
+      <h4>Layer Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onLayerFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onLayerFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'layer-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Clear Filters Button -->
+    <div class="filter-actions">
+      <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
+    </div>
+  </div>
+  
+  <!-- Header row with chart title and drilldown navigation -->
+  <div class="clr-row header-row">
+    <div class="clr-col-6">
+      <h3 class="chart-title">{{charttitle || 'Dynamic Chart'}}</h3>
+    </div>
+    <div class="clr-col-6" style="text-align: right;">
+      <!-- Add drilldown navigation controls -->
+      <button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
+        <cds-icon shape="arrow" direction="left"></cds-icon>
+        Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
+      </button>
+    </div>
+  </div>
+  
+  <!-- Show current drilldown level -->
+  <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
+    <div class="clr-col-12">
+      <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
+        <div class="alert-items">
+          <div class="alert-item static">
+            <div class="alert-icon-wrapper">
+              <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
+            </div>
+            <span class="alert-text">
+              Drilldown Level: {{currentDrilldownLevel}} 
+              <span *ngIf="drilldownStack.length > 0">
+                (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Existing content -->
  <!-- Drilldown mode indicator -->
  <div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
    <span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component.scss
@@ -0,0 +1,192 @@
+.filter-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+}
+
+.filter-group {
+  margin-bottom: 15px;
+  
+  h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-weight: 600;
+  }
+}
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-item {
+  flex: 1 1 300px;
+  min-width: 250px;
+  padding: 10px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.filter-label {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #555;
+  font-size: 14px;
+}
+
+.filter-input {
+  width: 100%;
+  
+  .filter-text-input,
+  .filter-select,
+  .filter-date {
+    width: 100%;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .filter-select {
+    height: 34px;
+  }
+}
+
+.multiselect-container {
+  position: relative;
+}
+
+.multiselect-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  min-height: 34px;
+  
+  .multiselect-label {
+    flex: 1;
+    font-size: 14px;
+  }
+  
+  .multiselect-value {
+    color: #666;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+  
+  .dropdown-icon {
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover {
+    border-color: #999;
+  }
+}
+
+.multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  
+  .checkbox-group {
+    padding: 8px;
+    
+    .checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      
+      .checkbox-label {
+        margin: 0;
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.date-range {
+  .date-input-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .date-separator {
+    margin: 0 5px;
+    color: #777;
+  }
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .toggle-label {
+    margin: 0;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+
+.filter-actions {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+  
+  .btn {
+    font-size: 13px;
+  }
+}
+
+// New header row styling
+.header-row {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  
+  .chart-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .filter-controls {
+    flex-direction: column;
+  }
+  
+  .filter-item {
+    min-width: 100%;
+  }
+  
+  .header-row {
+    .chart-title {
+      font-size: 16px;
+    }
+  }
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component.ts
@@ -2,6 +2,8 @@ import { Component, OnInit, ViewChild, Input, OnChanges, SimpleChanges } from '@
 import { ChartConfiguration, ChartData, ChartDataset } from 'chart.js';
 import { BaseChartDirective } from 'ng2-charts';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+import { FilterService } from '../../common-filter/filter.service';
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-dynamic-chart',
@@ -37,9 +39,20 @@ export class DynamicChartComponent implements OnInit, OnChanges {

  @ViewChild(BaseChartDirective) chart: BaseChartDirective | undefined;

-  constructor(private dashboardService: Dashboard3Service) { }
+  constructor(
+    private dashboardService: Dashboard3Service,
+    private filterService: FilterService
+  ) { }

  ngOnInit(): void {
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );
+    
    // Initialize with default data
    this.fetchChartData();
  }
@@ -47,6 +60,12 @@ export class DynamicChartComponent implements OnInit, OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    console.log('DynamicChartComponent input changes:', changes);
    
+    // Initialize filter values if they haven't been initialized yet
+    if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
+      this.initializeFilterValues();
+      this.filtersInitialized = true;
+    }
+    
    // Check if any of the key properties have changed
    const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
    const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
@@ -106,6 +125,14 @@ export class DynamicChartComponent implements OnInit, OnChanges {
  
  // Flag to prevent infinite loops
  private isFetchingData: boolean = false;
+  
+  // Add properties for filter functionality
+  private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
+  private documentClickHandler: ((event: MouseEvent) => void) | null = null;
+  private filtersInitialized: boolean = false;
+  
+  // Subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
 	
 	fetchChartData(): void {
    // Set flag to prevent recursive calls
@@ -139,7 +166,49 @@ export class DynamicChartComponent implements OnInit, OnChanges {
          filterParams = JSON.stringify(filterObj);
        }
      }
-      console.log('Base filter parameters:', filterParams);
+      
+      // Add common filters to filter parameters
+      const commonFilters = this.filterService.getFilterValues();
+      console.log('Common filters from service:', commonFilters);
+      
+      if (Object.keys(commonFilters).length > 0) {
+        // Merge common filters with base filters
+        const mergedFilterObj = {};
+        
+        // Add base filters first
+        if (filterParams) {
+          try {
+            const baseFilterObj = JSON.parse(filterParams);
+            Object.assign(mergedFilterObj, baseFilterObj);
+          } catch (e) {
+            console.warn('Failed to parse base filter parameters:', e);
+          }
+        }
+        
+        // Add common filters using the field name as the key, not the filter id
+        Object.keys(commonFilters).forEach(filterId => {
+          const filterValue = commonFilters[filterId];
+          // Find the filter definition to get the field name
+          const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+          if (filterDef && filterDef.field) {
+            const fieldName = filterDef.field;
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[fieldName] = filterValue;
+            }
+          } else {
+            // Fallback to using filterId as field name if no field is defined
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[filterId] = filterValue;
+            }
+          }
+        });
+        
+        if (Object.keys(mergedFilterObj).length > 0) {
+          filterParams = JSON.stringify(mergedFilterObj);
+        }
+      }
+      
+      console.log('Final filter parameters:', filterParams);
      
      // Log the URL that will be called
      const url = `chart/getdashjson/dynamic?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
@@ -504,4 +573,322 @@ export class DynamicChartComponent implements OnInit, OnChanges {
    }
    this.dynamicChartData = _dynamicChartData;
  }
+  
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    this.subscriptions.forEach(subscription => subscription.unsubscribe());
+    
+    // Remove document click handler if it exists
+    this.removeDocumentClickHandler();
+  }
+  
+  // Initialize filter values with proper default values based on type
+  private initializeFilterValues(): void {
+    console.log('Initializing filter values');
+    
+    // Initialize base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.value === undefined || filter.value === null) {
+              switch (filter.type) {
+                case 'multiselect':
+                  filter.value = [];
+                  break;
+                case 'date-range':
+                  filter.value = { start: null, end: null };
+                  break;
+                case 'toggle':
+                  filter.value = false;
+                  break;
+                default:
+                  filter.value = '';
+              }
+            }
+          });
+        }
+      });
+    }
+    
+    console.log('Filter values initialized:', {
+      baseFilters: this.baseFilters,
+      drilldownFilters: this.drilldownFilters,
+      drilldownLayers: this.drilldownLayers
+    });
+  }
+
+  // Check if there are active filters
+  hasActiveFilters(): boolean {
+    return (this.baseFilters && this.baseFilters.length > 0) || 
+           (this.drilldownFilters && this.drilldownFilters.length > 0) || 
+           this.hasActiveLayerFilters();
+  }
+
+  // Check if there are active layer filters for current drilldown level
+  hasActiveLayerFilters(): boolean {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      return layerIndex < this.drilldownLayers.length && 
+             this.drilldownLayers[layerIndex].filters && 
+             this.drilldownLayers[layerIndex].filters.length > 0;
+    }
+    return false;
+  }
+
+  // Get active layer filters for current drilldown level
+  getActiveLayerFilters(): any[] {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      if (layerIndex < this.drilldownLayers.length && 
+          this.drilldownLayers[layerIndex].filters) {
+        return this.drilldownLayers[layerIndex].filters;
+      }
+    }
+    return [];
+  }
+
+  // Get filter options for dropdown/multiselect filters
+  getFilterOptions(filter: any): string[] {
+    if (filter.options) {
+      if (Array.isArray(filter.options)) {
+        return filter.options;
+      } else if (typeof filter.options === 'string') {
+        return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
+      }
+    }
+    return [];
+  }
+
+  // Check if an option is selected for multiselect filters
+  isOptionSelected(filter: any, option: string): boolean {
+    if (!filter.value) {
+      return false;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.includes(option);
+    }
+    
+    return filter.value === option;
+  }
+
+  // Handle base filter changes
+  onBaseFilterChange(filter: any): void {
+    console.log('Base filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle drilldown filter changes
+  onDrilldownFilterChange(filter: any): void {
+    console.log('Drilldown filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle layer filter changes
+  onLayerFilterChange(filter: any): void {
+    console.log('Layer filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle multiselect changes
+  onMultiSelectChange(filter: any, option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filter.value as array if it's not already
+    if (!Array.isArray(filter.value)) {
+      filter.value = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!filter.value.includes(option)) {
+        filter.value.push(option);
+      }
+    } else {
+      // Remove option from array
+      filter.value = filter.value.filter((item: string) => item !== option);
+    }
+    
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle date range changes
+  onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
+    filter.value = dateRange;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle toggle changes
+  onToggleChange(filter: any, checked: boolean): void {
+    filter.value = checked;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Toggle multiselect dropdown visibility
+  toggleMultiselect(filter: any, context: string): void {
+    const filterId = `${context}-${filter.field}`;
+    if (this.isMultiselectOpen(filter, context)) {
+      this.openMultiselects.delete(filterId);
+    } else {
+      // Close all other multiselects first
+      this.openMultiselects.clear();
+      this.openMultiselects.set(filterId, context);
+      
+      // Add document click handler to close dropdown when clicking outside
+      this.addDocumentClickHandler();
+    }
+  }
+
+  // Add document click handler to close dropdowns when clicking outside
+  private addDocumentClickHandler(): void {
+    if (!this.documentClickHandler) {
+      this.documentClickHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        // Check if click is outside any multiselect dropdown
+        if (!target.closest('.multiselect-container')) {
+          this.openMultiselects.clear();
+          this.removeDocumentClickHandler();
+        }
+      };
+      
+      // Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
+      setTimeout(() => {
+        document.addEventListener('click', this.documentClickHandler!);
+      }, 0);
+    }
+  }
+
+  // Remove document click handler
+  private removeDocumentClickHandler(): void {
+    if (this.documentClickHandler) {
+      document.removeEventListener('click', this.documentClickHandler);
+      this.documentClickHandler = null;
+    }
+  }
+
+  // Check if multiselect dropdown is open
+  isMultiselectOpen(filter: any, context: string): boolean {
+    const filterId = `${context}-${filter.field}`;
+    return this.openMultiselects.has(filterId);
+  }
+
+  // Get count of selected options for a multiselect filter
+  getSelectedOptionsCount(filter: any): number {
+    if (!filter.value) {
+      return 0;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.length;
+    }
+    
+    return 0;
+  }
+
+  // Clear all filters
+  clearAllFilters(): void {
+    // Clear base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.type === 'multiselect') {
+              filter.value = [];
+            } else if (filter.type === 'date-range') {
+              filter.value = { start: null, end: null };
+            } else if (filter.type === 'toggle') {
+              filter.value = false;
+            } else {
+              filter.value = '';
+            }
+          });
+        }
+      });
+    }
+    
+    // Close all multiselect dropdowns
+    this.openMultiselects.clear();
+    
+    // Refresh data
+    this.fetchChartData();
+  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/financial-chart/financial-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/financial-chart/financial-chart.component.html
@@ -1,4 +1,285 @@
 <div class="financial-chart-container">
+  <!-- Filter Controls Section -->
+  <div class="filter-section" *ngIf="hasActiveFilters()">
+    <!-- Base Filters -->
+    <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
+      <h4>Base Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of baseFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onBaseFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onBaseFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'base-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Drilldown Filters -->
+    <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+      <h4>Drilldown Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of drilldownFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onDrilldownFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onDrilldownFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'drilldown-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Layer Filters -->
+    <div class="filter-group" *ngIf="hasActiveLayerFilters()">
+      <h4>Layer Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onLayerFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onLayerFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'layer-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Clear Filters Button -->
+    <div class="filter-actions">
+      <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
+    </div>
+  </div>
+  
+  <!-- Header row with chart title and drilldown navigation -->
+  <div class="clr-row header-row">
+    <div class="clr-col-6">
+      <h3 class="chart-title">{{charttitle || 'Financial Chart'}}</h3>
+    </div>
+    <div class="clr-col-6" style="text-align: right;">
+      <!-- Add drilldown navigation controls -->
+      <button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
+        <cds-icon shape="arrow" direction="left"></cds-icon>
+        Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
+      </button>
+    </div>
+  </div>
+  
+  <!-- Show current drilldown level -->
+  <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
+    <div class="clr-col-12">
+      <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
+        <div class="alert-items">
+          <div class="alert-item static">
+            <div class="alert-icon-wrapper">
+              <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
+            </div>
+            <span class="alert-text">
+              Drilldown Level: {{currentDrilldownLevel}} 
+              <span *ngIf="drilldownStack.length > 0">
+                (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Existing content -->
  <!-- Drilldown mode indicator -->
  <div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
    <span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/financial-chart/financial-chart.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/financial-chart/financial-chart.component.scss
@@ -1,108 +1,192 @@
-.financial-chart-container {
-  display: flex;
-  flex-direction: column;
-  height: 400px;
-  min-height: 400px;
-  padding: 20px;
-  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
-  border-radius: 12px;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
-  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-  transition: all 0.3s ease;
-  border: 1px solid #eaeaea;
-}
-
-.financial-chart-container:hover {
-  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.2);
-  transform: translateY(-2px);
-}
-
-.chart-title {
-  font-size: 26px;
-  font-weight: 700;
-  color: #2c3e50;
+.filter-section {
  margin-bottom: 20px;
-  text-align: center;
-  padding-bottom: 15px;
-  border-bottom: 2px solid #3498db;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f9f9f9;
 }

-.chart-wrapper {
-  position: relative;
-  flex: 1;
-  min-height: 250px;
-  margin: 15px 0;
-  background: #f8f9fa;
-  border: 1px solid #e9ecef;
-  border-radius: 8px;
-  padding: 10px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.chart-wrapper canvas {
-  max-width: 100%;
-  max-height: 100%;
-  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
-}
-
-.chart-wrapper canvas:hover {
-  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
-  transform: scale(1.02);
-  transition: all 0.3s ease;
-}
-
-.loading-indicator, .no-data-message {
-  text-align: center;
-  padding: 30px;
-  color: #666;
-  font-size: 18px;
-  font-style: italic;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-
-.loading-indicator p, .no-data-message p {
-  margin: 10px 0 0 0;
-}
-
-.spinner {
-  border: 4px solid #f3f3f3;
-  border-top: 4px solid #3498db;
-  border-radius: 50%;
-  width: 40px;
-  height: 40px;
-  animation: spin 1s linear infinite;
-  margin-bottom: 10px;
-}
-
-@keyframes spin {
-  0% { transform: rotate(0deg); }
-  100% { transform: rotate(360deg); }
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .financial-chart-container {
-    padding: 15px;
+.filter-group {
+  margin-bottom: 15px;
+  
+  h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-weight: 600;
  }
+}
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-item {
+  flex: 1 1 300px;
+  min-width: 250px;
+  padding: 10px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.filter-label {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #555;
+  font-size: 14px;
+}
+
+.filter-input {
+  width: 100%;
+  
+  .filter-text-input,
+  .filter-select,
+  .filter-date {
+    width: 100%;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .filter-select {
+    height: 34px;
+  }
+}
+
+.multiselect-container {
+  position: relative;
+}
+
+.multiselect-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  min-height: 34px;
+  
+  .multiselect-label {
+    flex: 1;
+    font-size: 14px;
+  }
+  
+  .multiselect-value {
+    color: #666;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+  
+  .dropdown-icon {
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover {
+    border-color: #999;
+  }
+}
+
+.multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  
+  .checkbox-group {
+    padding: 8px;
+    
+    .checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      
+      .checkbox-label {
+        margin: 0;
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.date-range {
+  .date-input-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .date-separator {
+    margin: 0 5px;
+    color: #777;
+  }
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .toggle-label {
+    margin: 0;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+
+.filter-actions {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+  
+  .btn {
+    font-size: 13px;
+  }
+}
+
+// New header row styling
+.header-row {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
  
  .chart-title {
-    font-size: 20px;
-    margin-bottom: 15px;
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .filter-controls {
+    flex-direction: column;
  }
  
-  .chart-wrapper {
-    min-height: 200px;
+  .filter-item {
+    min-width: 100%;
  }
  
-  .no-data-message {
-    font-size: 16px;
-    padding: 20px;
+  .header-row {
+    .chart-title {
+      font-size: 16px;
+    }
  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/financial-chart/financial-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/financial-chart/financial-chart.component.ts
@@ -1,5 +1,8 @@
 import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+import { FilterService } from '../../common-filter/filter.service';
+import { Subscription } from 'rxjs';
+import { AlertsService } from 'src/app/services/fnd/alerts.service';

@Component({
  selector: 'app-financial-chart',
@@ -33,9 +36,21 @@ export class FinancialChartComponent implements OnInit, OnChanges {
  // Multi-layer drilldown configuration inputs
  @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations

-  constructor(private dashboardService: Dashboard3Service) { }
+  constructor(
+    private dashboardService: Dashboard3Service,
+    private filterService: FilterService,
+    private alertService: AlertsService
+  ) { }

  ngOnInit(): void {
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );
+    
    // Initialize with default data
    this.fetchChartData();
  }
@@ -43,6 +58,14 @@ export class FinancialChartComponent implements OnInit, OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    console.log('FinancialChartComponent input changes:', changes);
    
+    // Initialize filter values if they haven't been initialized yet
+    if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
+      this.initializeFilterValues();
+      // Load filter options for dropdown/multiselect filters
+      this.loadFilterOptions();
+      this.filtersInitialized = true;
+    }
+    
    // Check if any of the key properties have changed
    const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
    const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
@@ -86,6 +109,14 @@ export class FinancialChartComponent implements OnInit, OnChanges {
  // Flag to prevent infinite loops
  private isFetchingData: boolean = false;
  
+  // Add properties for filter functionality
+  private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
+  private documentClickHandler: ((event: MouseEvent) => void) | null = null;
+  private filtersInitialized: boolean = false;
+  
+  // Subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+  
  fetchChartData(): void {
    // Set flag to prevent recursive calls
    this.isFetchingData = true;
@@ -118,7 +149,49 @@ export class FinancialChartComponent implements OnInit, OnChanges {
          filterParams = JSON.stringify(filterObj);
        }
      }
-      console.log('Base filter parameters:', filterParams);
+      
+      // Add common filters to filter parameters
+      const commonFilters = this.filterService.getFilterValues();
+      console.log('Common filters from service:', commonFilters);
+      
+      if (Object.keys(commonFilters).length > 0) {
+        // Merge common filters with base filters
+        const mergedFilterObj = {};
+        
+        // Add base filters first
+        if (filterParams) {
+          try {
+            const baseFilterObj = JSON.parse(filterParams);
+            Object.assign(mergedFilterObj, baseFilterObj);
+          } catch (e) {
+            console.warn('Failed to parse base filter parameters:', e);
+          }
+        }
+        
+        // Add common filters using the field name as the key, not the filter id
+        Object.keys(commonFilters).forEach(filterId => {
+          const filterValue = commonFilters[filterId];
+          // Find the filter definition to get the field name
+          const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+          if (filterDef && filterDef.field) {
+            const fieldName = filterDef.field;
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[fieldName] = filterValue;
+            }
+          } else {
+            // Fallback to using filterId as field name if no field is defined
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[filterId] = filterValue;
+            }
+          }
+        });
+        
+        if (Object.keys(mergedFilterObj).length > 0) {
+          filterParams = JSON.stringify(mergedFilterObj);
+        }
+      }
+      
+      console.log('Final filter parameters:', filterParams);
      
      // Log the URL that will be called
      const url = `chart/getdashjson/financial?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
@@ -496,4 +569,520 @@ export class FinancialChartComponent implements OnInit, OnChanges {
  public chartHovered(e: any): void {
    console.log(e);
  }
+  
+  // Initialize filter values with proper default values based on type
+  private initializeFilterValues(): void {
+    console.log('Initializing filter values');
+    
+    // Initialize base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        // Ensure filter has required properties
+        if (!filter.type) filter.type = 'text';
+        if (!filter.options) filter.options = '';
+        if (!filter.availableValues) filter.availableValues = '';
+        
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        // Ensure filter has required properties
+        if (!filter.type) filter.type = 'text';
+        if (!filter.options) filter.options = '';
+        if (!filter.availableValues) filter.availableValues = '';
+        
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            // Ensure filter has required properties
+            if (!filter.type) filter.type = 'text';
+            if (!filter.options) filter.options = '';
+            if (!filter.availableValues) filter.availableValues = '';
+            
+            if (filter.value === undefined || filter.value === null) {
+              switch (filter.type) {
+                case 'multiselect':
+                  filter.value = [];
+                  break;
+                case 'date-range':
+                  filter.value = { start: null, end: null };
+                  break;
+                case 'toggle':
+                  filter.value = false;
+                  break;
+                default:
+                  filter.value = '';
+              }
+            }
+          });
+        }
+      });
+    }
+    
+    console.log('Filter values initialized:', {
+      baseFilters: this.baseFilters,
+      drilldownFilters: this.drilldownFilters,
+      drilldownLayers: this.drilldownLayers
+    });
+  }
+
+  // Check if there are active filters
+  hasActiveFilters(): boolean {
+    return (this.baseFilters && this.baseFilters.length > 0) || 
+           (this.drilldownFilters && this.drilldownFilters.length > 0) || 
+           this.hasActiveLayerFilters();
+  }
+
+  // Check if there are active layer filters for current drilldown level
+  hasActiveLayerFilters(): boolean {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      return layerIndex < this.drilldownLayers.length && 
+             this.drilldownLayers[layerIndex].filters && 
+             this.drilldownLayers[layerIndex].filters.length > 0;
+    }
+    return false;
+  }
+
+  // Get active layer filters for current drilldown level
+  getActiveLayerFilters(): any[] {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      if (layerIndex < this.drilldownLayers.length && 
+          this.drilldownLayers[layerIndex].filters) {
+        return this.drilldownLayers[layerIndex].filters;
+      }
+    }
+    return [];
+  }
+
+  // Get filter options for dropdown/multiselect filters
+  getFilterOptions(filter: any): string[] {
+    if (filter.options) {
+      if (Array.isArray(filter.options)) {
+        return filter.options;
+      } else if (typeof filter.options === 'string') {
+        return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
+      }
+    }
+    return [];
+  }
+
+  // Check if an option is selected for multiselect filters
+  isOptionSelected(filter: any, option: string): boolean {
+    if (!filter.value) {
+      return false;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.includes(option);
+    }
+    
+    return filter.value === option;
+  }
+
+  // Handle base filter changes
+  onBaseFilterChange(filter: any): void {
+    console.log('Base filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle drilldown filter changes
+  onDrilldownFilterChange(filter: any): void {
+    console.log('Drilldown filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle layer filter changes
+  onLayerFilterChange(filter: any): void {
+    console.log('Layer filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle multiselect changes
+  onMultiSelectChange(filter: any, option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filter.value as array if it's not already
+    if (!Array.isArray(filter.value)) {
+      filter.value = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!filter.value.includes(option)) {
+        filter.value.push(option);
+      }
+    } else {
+      // Remove option from array
+      filter.value = filter.value.filter((item: string) => item !== option);
+    }
+    
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle date range changes
+  onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
+    filter.value = dateRange;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle toggle changes
+  onToggleChange(filter: any, checked: boolean): void {
+    filter.value = checked;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Toggle multiselect dropdown visibility
+  toggleMultiselect(filter: any, context: string): void {
+    const filterId = `${context}-${filter.field}`;
+    if (this.isMultiselectOpen(filter, context)) {
+      this.openMultiselects.delete(filterId);
+    } else {
+      // Close all other multiselects first
+      this.openMultiselects.clear();
+      this.openMultiselects.set(filterId, context);
+      
+      // Add document click handler to close dropdown when clicking outside
+      this.addDocumentClickHandler();
+    }
+  }
+
+  // Add document click handler to close dropdowns when clicking outside
+  private addDocumentClickHandler(): void {
+    if (!this.documentClickHandler) {
+      this.documentClickHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        // Check if click is outside any multiselect dropdown
+        if (!target.closest('.multiselect-container')) {
+          this.openMultiselects.clear();
+          this.removeDocumentClickHandler();
+        }
+      };
+      
+      // Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
+      setTimeout(() => {
+        document.addEventListener('click', this.documentClickHandler!);
+      }, 0);
+    }
+  }
+
+  // Remove document click handler
+  private removeDocumentClickHandler(): void {
+    if (this.documentClickHandler) {
+      document.removeEventListener('click', this.documentClickHandler);
+      this.documentClickHandler = null;
+    }
+  }
+
+  // Check if multiselect dropdown is open
+  isMultiselectOpen(filter: any, context: string): boolean {
+    const filterId = `${context}-${filter.field}`;
+    return this.openMultiselects.has(filterId);
+  }
+
+  // Get count of selected options for a multiselect filter
+  getSelectedOptionsCount(filter: any): number {
+    if (!filter.value) {
+      return 0;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.length;
+    }
+    
+    return 0;
+  }
+
+  // Clear all filters
+  clearAllFilters(): void {
+    // Clear base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.type === 'multiselect') {
+              filter.value = [];
+            } else if (filter.type === 'date-range') {
+              filter.value = { start: null, end: null };
+            } else if (filter.type === 'toggle') {
+              filter.value = false;
+            } else {
+              filter.value = '';
+            }
+          });
+        }
+      });
+    }
+    
+    // Close all multiselect dropdowns
+    this.openMultiselects.clear();
+    
+    // Refresh data
+    this.fetchChartData();
+  }
+  
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    this.subscriptions.forEach(subscription => subscription.unsubscribe());
+    
+    // Remove document click handler if it exists
+    this.removeDocumentClickHandler();
+  }
+
+  // Load filter options for dropdown and multiselect filters
+  private loadFilterOptions(): void {
+    console.log('Loading filter options');
+    
+    // Load options for base filters
+    if (this.baseFilters && this.table) {
+      this.baseFilters.forEach((filter, index) => {
+        if ((filter.type === 'dropdown' || filter.type === 'multiselect') && filter.field) {
+          this.loadFilterValuesForField(this.table, this.connection, filter.field, index, 'base');
+        }
+      });
+    }
+    
+    // Load options for drilldown filters
+    if (this.drilldownFilters && this.drilldownApiUrl) {
+      this.drilldownFilters.forEach((filter, index) => {
+        if ((filter.type === 'dropdown' || filter.type === 'multiselect') && filter.field) {
+          this.loadFilterValuesForField(this.drilldownApiUrl, this.connection, filter.field, index, 'drilldown');
+        }
+      });
+    }
+    
+    // Load options for layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach((layer, layerIndex) => {
+        if (layer.filters && layer.apiUrl) {
+          layer.filters.forEach((filter, filterIndex) => {
+            if ((filter.type === 'dropdown' || filter.type === 'multiselect') && filter.field) {
+              this.loadFilterValuesForField(layer.apiUrl, this.connection, filter.field, filterIndex, 'layer', layerIndex);
+            }
+          });
+        }
+      });
+    }
+  }
+
+  // Load filter values for a specific field
+  private loadFilterValuesForField(
+    apiUrl: string, 
+    connectionId: number | undefined, 
+    field: string, 
+    filterIndex: number, 
+    filterType: 'base' | 'drilldown' | 'layer',
+    layerIndex?: number
+  ): void {
+    if (apiUrl && field) {
+      this.alertService.getValuesFromUrl(apiUrl, connectionId, field).subscribe(
+        (values: string[]) => {
+          console.log(`Loaded filter values for ${filterType} filter ${field}:`, values);
+          
+          // Update the filter with available values
+          if (filterType === 'base') {
+            const filter = this.baseFilters[filterIndex];
+            if (filter) {
+              filter.availableValues = values.join(', ');
+              // For dropdown/multiselect types, also update the options
+              if (filter.type === 'dropdown' || filter.type === 'multiselect') {
+                filter.options = filter.availableValues;
+              }
+            }
+          } else if (filterType === 'drilldown') {
+            const filter = this.drilldownFilters[filterIndex];
+            if (filter) {
+              filter.availableValues = values.join(', ');
+              // For dropdown/multiselect types, also update the options
+              if (filter.type === 'dropdown' || filter.type === 'multiselect') {
+                filter.options = filter.availableValues;
+              }
+            }
+          } else if (filterType === 'layer' && layerIndex !== undefined) {
+            const layer = this.drilldownLayers[layerIndex];
+            if (layer && layer.filters) {
+              const filter = layer.filters[filterIndex];
+              if (filter) {
+                filter.availableValues = values.join(', ');
+                // For dropdown/multiselect types, also update the options
+                if (filter.type === 'dropdown' || filter.type === 'multiselect') {
+                  filter.options = filter.availableValues;
+                }
+              }
+            }
+          }
+        },
+        (error) => {
+          console.error('Error loading available values for field:', field, error);
+        }
+      );
+    }
+  }
+
+  // Handle base filter field change
+  onBaseFilterFieldChange(index: number, field: string): void {
+    const filter = this.baseFilters[index];
+    if (filter) {
+      filter.field = field;
+      // If field changes, reset value and options
+      filter.value = '';
+      filter.options = '';
+      filter.availableValues = '';
+      
+      // If we have a field and table URL, load available values
+      if (field && this.table && (filter.type === 'dropdown' || filter.type === 'multiselect')) {
+        this.loadFilterValuesForField(this.table, this.connection, field, index, 'base');
+      }
+    }
+  }
+
+  // Handle base filter type change
+  onBaseFilterTypeChange(index: number, type: string): void {
+    const filter = this.baseFilters[index];
+    if (filter) {
+      filter.type = type;
+      // If type changes to dropdown/multiselect and we have a field, load available values
+      if ((type === 'dropdown' || type === 'multiselect') && filter.field && this.table) {
+        this.loadFilterValuesForField(this.table, this.connection, filter.field, index, 'base');
+      }
+    }
+  }
+
+  // Handle drilldown filter field change
+  onDrilldownFilterFieldChange(index: number, field: string): void {
+    const filter = this.drilldownFilters[index];
+    if (filter) {
+      filter.field = field;
+      // If field changes, reset value and options
+      filter.value = '';
+      filter.options = '';
+      filter.availableValues = '';
+      
+      // If we have a field and drilldown API URL, load available values
+      if (field && this.drilldownApiUrl && (filter.type === 'dropdown' || filter.type === 'multiselect')) {
+        this.loadFilterValuesForField(this.drilldownApiUrl, this.connection, field, index, 'drilldown');
+      }
+    }
+  }
+
+  // Handle drilldown filter type change
+  onDrilldownFilterTypeChange(index: number, type: string): void {
+    const filter = this.drilldownFilters[index];
+    if (filter) {
+      filter.type = type;
+      // If type changes to dropdown/multiselect and we have a field, load available values
+      if ((type === 'dropdown' || type === 'multiselect') && filter.field && this.drilldownApiUrl) {
+        this.loadFilterValuesForField(this.drilldownApiUrl, this.connection, filter.field, index, 'drilldown');
+      }
+    }
+  }
+
+  // Handle layer filter field change
+  onLayerFilterFieldChange(layerIndex: number, filterIndex: number, field: string): void {
+    const layer = this.drilldownLayers[layerIndex];
+    if (layer && layer.filters) {
+      const filter = layer.filters[filterIndex];
+      if (filter) {
+        filter.field = field;
+        // If field changes, reset value and options
+        filter.value = '';
+        filter.options = '';
+        filter.availableValues = '';
+        
+        // If we have a field and layer API URL, load available values
+        if (field && layer.apiUrl && (filter.type === 'dropdown' || filter.type === 'multiselect')) {
+          this.loadFilterValuesForField(layer.apiUrl, this.connection, field, filterIndex, 'layer', layerIndex);
+        }
+      }
+    }
+  }
+
+  // Handle layer filter type change
+  onLayerFilterTypeChange(layerIndex: number, filterIndex: number, type: string): void {
+    const layer = this.drilldownLayers[layerIndex];
+    if (layer && layer.filters) {
+      const filter = layer.filters[filterIndex];
+      if (filter) {
+        filter.type = type;
+        // If type changes to dropdown/multiselect and we have a field, load available values
+        if ((type === 'dropdown' || type === 'multiselect') && filter.field && layer.apiUrl) {
+          this.loadFilterValuesForField(layer.apiUrl, this.connection, filter.field, filterIndex, 'layer', layerIndex);
+        }
+      }
+    }
+  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.html
@@ -1,12 +1,289 @@
 <div style="display: block;">
  <div class="dg-wrapper">
-    <div class="clr-row">
-      <div class="clr-col-8">
-        <h3>{{charttitle || 'Data Grid'}}</h3>
+    <!-- Filter Controls Section -->
+    <div class="filter-section" *ngIf="hasActiveFilters()">
+      <!-- Base Filters -->
+      <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
+        <h4>Base Filters</h4>
+        <div class="filter-controls">
+          <div *ngFor="let filter of baseFilters" class="filter-item">
+            <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+            
+            <!-- Text Filter -->
+            <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+              <input type="text" 
+                     [(ngModel)]="filter.value" 
+                     (ngModelChange)="onBaseFilterChange(filter)"
+                     [placeholder]="filter.field"
+                     class="clr-input filter-text-input">
+            </div>
+            
+            <!-- Dropdown Filter -->
+            <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+              <select [(ngModel)]="filter.value" 
+                      (ngModelChange)="onBaseFilterChange(filter)"
+                      class="clr-select filter-select">
+                <option value="">Select {{ filter.field }}</option>
+                <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+              </select>
+            </div>
+            
+            <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+            <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+              <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+                <span class="multiselect-label">{{ filter.field }}</span>
+                <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                  ({{ getSelectedOptionsCount(filter) }} selected)
+                </span>
+                <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+              </div>
+              <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+                <div class="checkbox-group">
+                  <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                    <input type="checkbox" 
+                           [checked]="isOptionSelected(filter, option)" 
+                           (change)="onMultiSelectChange(filter, option, $event)"
+                           [id]="'base-' + filter.field + '-' + i" 
+                           class="clr-checkbox">
+                    <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Date Range Filter -->
+            <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+              <div class="date-input-group">
+                <input type="date" 
+                       [(ngModel)]="filter.value.start" 
+                       (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                       placeholder="Start Date"
+                       class="clr-input filter-date">
+                <span class="date-separator">to</span>
+                <input type="date" 
+                       [(ngModel)]="filter.value.end" 
+                       (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                       placeholder="End Date"
+                       class="clr-input filter-date">
+              </div>
+            </div>
+            
+            <!-- Toggle Filter -->
+            <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+              <input type="checkbox" 
+                     [(ngModel)]="filter.value" 
+                     (ngModelChange)="onToggleChange(filter, $event)"
+                     clrToggle 
+                     class="clr-toggle">
+              <label class="toggle-label">{{ filter.field }}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Drilldown Filters -->
+      <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+        <h4>Drilldown Filters</h4>
+        <div class="filter-controls">
+          <div *ngFor="let filter of drilldownFilters" class="filter-item">
+            <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+            
+            <!-- Text Filter -->
+            <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+              <input type="text" 
+                     [(ngModel)]="filter.value" 
+                     (ngModelChange)="onDrilldownFilterChange(filter)"
+                     [placeholder]="filter.field"
+                     class="clr-input filter-text-input">
+            </div>
+            
+            <!-- Dropdown Filter -->
+            <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+              <select [(ngModel)]="filter.value" 
+                      (ngModelChange)="onDrilldownFilterChange(filter)"
+                      class="clr-select filter-select">
+                <option value="">Select {{ filter.field }}</option>
+                <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+              </select>
+            </div>
+            
+            <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+            <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+              <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+                <span class="multiselect-label">{{ filter.field }}</span>
+                <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                  ({{ getSelectedOptionsCount(filter) }} selected)
+                </span>
+                <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+              </div>
+              <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+                <div class="checkbox-group">
+                  <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                    <input type="checkbox" 
+                           [checked]="isOptionSelected(filter, option)" 
+                           (change)="onMultiSelectChange(filter, option, $event)"
+                           [id]="'drilldown-' + filter.field + '-' + i" 
+                           class="clr-checkbox">
+                    <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Date Range Filter -->
+            <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+              <div class="date-input-group">
+                <input type="date" 
+                       [(ngModel)]="filter.value.start" 
+                       (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                       placeholder="Start Date"
+                       class="clr-input filter-date">
+                <span class="date-separator">to</span>
+                <input type="date" 
+                       [(ngModel)]="filter.value.end" 
+                       (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                       placeholder="End Date"
+                       class="clr-input filter-date">
+              </div>
+            </div>
+            
+            <!-- Toggle Filter -->
+            <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+              <input type="checkbox" 
+                     [(ngModel)]="filter.value" 
+                     (ngModelChange)="onToggleChange(filter, $event)"
+                     clrToggle 
+                     class="clr-toggle">
+              <label class="toggle-label">{{ filter.field }}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Layer Filters -->
+      <div class="filter-group" *ngIf="hasActiveLayerFilters()">
+        <h4>Layer Filters</h4>
+        <div class="filter-controls">
+          <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
+            <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+            
+            <!-- Text Filter -->
+            <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+              <input type="text" 
+                     [(ngModel)]="filter.value" 
+                     (ngModelChange)="onLayerFilterChange(filter)"
+                     [placeholder]="filter.field"
+                     class="clr-input filter-text-input">
+            </div>
+            
+            <!-- Dropdown Filter -->
+            <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+              <select [(ngModel)]="filter.value" 
+                      (ngModelChange)="onLayerFilterChange(filter)"
+                      class="clr-select filter-select">
+                <option value="">Select {{ filter.field }}</option>
+                <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+              </select>
+            </div>
+            
+            <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+            <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+              <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+                <span class="multiselect-label">{{ filter.field }}</span>
+                <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                  ({{ getSelectedOptionsCount(filter) }} selected)
+                </span>
+                <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+              </div>
+              <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+                <div class="checkbox-group">
+                  <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                    <input type="checkbox" 
+                           [checked]="isOptionSelected(filter, option)" 
+                           (change)="onMultiSelectChange(filter, option, $event)"
+                           [id]="'layer-' + filter.field + '-' + i" 
+                           class="clr-checkbox">
+                    <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                  </div>
+                </div>
+              </div>
+            </div>
+            
+            <!-- Date Range Filter -->
+            <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+              <div class="date-input-group">
+                <input type="date" 
+                       [(ngModel)]="filter.value.start" 
+                       (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                       placeholder="Start Date"
+                       class="clr-input filter-date">
+                <span class="date-separator">to</span>
+                <input type="date" 
+                       [(ngModel)]="filter.value.end" 
+                       (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                       placeholder="End Date"
+                       class="clr-input filter-date">
+              </div>
+            </div>
+            
+            <!-- Toggle Filter -->
+            <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+              <input type="checkbox" 
+                     [(ngModel)]="filter.value" 
+                     (ngModelChange)="onToggleChange(filter, $event)"
+                     clrToggle 
+                     class="clr-toggle">
+              <label class="toggle-label">{{ filter.field }}</label>
+            </div>
+          </div>
+        </div>
+      </div>
+      
+      <!-- Clear Filters Button -->
+      <div class="filter-actions">
+        <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
      </div>
    </div>
+    
+    <div class="clr-row">
+      <!-- <div class="clr-col-8">
+        <h3>{{charttitle || 'Data Grid'}}</h3>
+      </div> -->
+      <!-- Add drilldown navigation controls -->
+      <div class="clr-col-4" *ngIf="drilldownEnabled && drilldownStack.length > 0" style="text-align: right;">
+        <button class="btn btn-sm btn-link" (click)="navigateBack()">
+          <cds-icon shape="arrow" direction="left"></cds-icon>
+          Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
+        </button>
+      </div>
+    </div>
+    
+    <!-- Show current drilldown level -->
+    <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
+      <div class="clr-col-12">
+        <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
+          <div class="alert-items">
+            <div class="alert-item static">
+              <div class="alert-icon-wrapper">
+                <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
+              </div>
+              <span class="alert-text">
+                Drilldown Level: {{currentDrilldownLevel}} 
+                <span *ngIf="drilldownStack.length > 0">
+                  (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedKey}} = {{drilldownStack[drilldownStack.length - 1].clickedValue}})
+                </span>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    
    <clr-datagrid [clrDgLoading]="loading">
-      <clr-dg-placeholder> <ng-template #loadingSpinner><clr-spinner>Loading ... </clr-spinner></ng-template>
+      <clr-dg-placeholder> 
+        <ng-template #loadingSpinner>
+          <clr-spinner>Loading ... </clr-spinner>
+        </ng-template>
        <div *ngIf="error;else loadingSpinner">{{error}}</div>
      </clr-dg-placeholder>

@@ -19,7 +296,7 @@

      <clr-dg-row *clrDgItems="let item of givendata" [clrDgItem]="item">
        <!-- Dynamic cells based on response keys -->
-        <clr-dg-cell *ngFor="let header of dynamicHeaders">
+        <clr-dg-cell *ngFor="let header of dynamicHeaders" (click)="onRowClick(item, header.key)">
          {{item[header.key]}}
        </clr-dg-cell>
      </clr-dg-row>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.scss
@@ -1,12 +1,180 @@
-@import '../../../../../../../styles1.scss';
-input.ng-invalid.ng-touched {
-  border-color: red;
+.filter-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f9f9f9;
 }

-.error_mess {
-  color: red;
+.filter-group {
+  margin-bottom: 15px;
+  
+  h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-weight: 600;
+  }
 }
-clr-datagrid{
-    height: 400px; /* Adjust the height as needed */
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-item {
+  flex: 1 1 300px;
+  min-width: 250px;
+  padding: 10px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.filter-label {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #555;
+  font-size: 14px;
+}
+
+.filter-input {
+  width: 100%;
+  
+  .filter-text-input,
+  .filter-select,
+  .filter-date {
+    width: 100%;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .filter-select {
+    height: 34px;
+  }
+}
+
+.multiselect-container {
+  position: relative;
+}
+
+.multiselect-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  min-height: 34px;
+  
+  .multiselect-label {
+    flex: 1;
+    font-size: 14px;
+  }
+  
+  .multiselect-value {
+    color: #666;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+  
+  .dropdown-icon {
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover {
+    border-color: #999;
+  }
+}
+
+.multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  max-height: 200px;
  overflow-y: auto;
+  
+  .checkbox-group {
+    padding: 8px;
+    
+    .checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      
+      .checkbox-label {
+        margin: 0;
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.date-range {
+  .date-input-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .date-separator {
+    margin: 0 5px;
+    color: #777;
+  }
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .toggle-label {
+    margin: 0;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+
+.filter-actions {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+  
+  .btn {
+    font-size: 13px;
+  }
+}
+
+.dg-wrapper {
+  padding: 15px;
+}
+
+clr-datagrid {
+  margin-top: 10px;
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .filter-controls {
+    flex-direction: column;
+  }
+  
+  .filter-item {
+    min-width: 100%;
+  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/grid-view/grid-view.component.ts
@@ -1,13 +1,17 @@
-import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Component, OnInit, Input, OnChanges, OnDestroy, SimpleChanges, ViewChild } from '@angular/core';
 import { UsergrpmaintainceService } from 'src/app/services/admin/usergrpmaintaince.service';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+// Add FilterService import
+import { FilterService } from '../../common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-grid-view',
  templateUrl: './grid-view.component.html',
  styleUrls: ['./grid-view.component.scss']
 })
-export class GridViewComponent implements OnInit, OnChanges {
+export class GridViewComponent implements OnInit, OnChanges, OnDestroy {
  @Input() xAxis: string;
  @Input() yAxis: string | string[];
  @Input() table: string;
@@ -23,6 +27,16 @@ export class GridViewComponent implements OnInit, OnChanges {
  @Input() datasource: string;
  @Input() fieldName: string;
  @Input() connection: number; // Add connection input
+  // Drilldown configuration inputs
+  @Input() drilldownEnabled: boolean = false;
+  @Input() drilldownApiUrl: string;
+  @Input() drilldownXAxis: string;
+  @Input() drilldownYAxis: string;
+  @Input() drilldownParameter: string; // Add drilldown parameter input
+  @Input() baseFilters: any[] = []; // Add base filters input
+  @Input() drilldownFilters: any[] = []; // Add drilldown filters input
+  // Multi-layer drilldown configuration inputs
+  @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations

  loading = false;
  givendata: any[] = [];
@@ -38,13 +52,46 @@ export class GridViewComponent implements OnInit, OnChanges {
  submitted = false;
  dynamicHeaders: any[] = [];

-  constructor(
+  // Multi-layer drilldown state tracking
+  drilldownStack: any[] = []; // Stack to track drilldown navigation history
+  currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
+  originalGridData: any[] = [];

+  // No data state
+  noDataAvailable: boolean = false;
+
+  // Flag to prevent infinite loops
+  private isFetchingData: boolean = false;
+
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+
+  // Add a flag to track if filters have been initialized
+  private filtersInitialized: boolean = false;
+
+  // Add properties to track open multiselect dropdowns
+  private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
+
+  // Add property to track document click handler
+  private documentClickHandler: ((event: MouseEvent) => void) | null = null;
+
+  constructor(
    private mainservice: UsergrpmaintainceService,
    private dashboardService: Dashboard3Service,
+    // Add FilterService to constructor
+    private filterService: FilterService
  ) { }

  ngOnInit(): void {
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the grid data
+        console.log('GridView: Filter state changed:', filters);
+        this.fetchGridData();
+      })
+    );
+
    this.fetchGridData();
  }

@@ -55,87 +102,585 @@ export class GridViewComponent implements OnInit, OnChanges {
    const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
    const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
    const tableChanged = changes.table && !changes.table.firstChange;
-    const connectionChanged = changes.connection && !changes.connection.firstChange; // Add connection change detection
+    const connectionChanged = changes.connection && !changes.connection.firstChange;
+    const baseFiltersChanged = changes.baseFilters && !changes.baseFilters.firstChange;
+    // Drilldown configuration changes
+    const drilldownEnabledChanged = changes.drilldownEnabled && !changes.drilldownEnabled.firstChange;
+    const drilldownApiUrlChanged = changes.drilldownApiUrl && !changes.drilldownApiUrl.firstChange;
+    const drilldownXAxisChanged = changes.drilldownXAxis && !changes.drilldownXAxis.firstChange;
+    const drilldownYAxisChanged = changes.drilldownYAxis && !changes.drilldownYAxis.firstChange;
+    const drilldownLayersChanged = changes.drilldownLayers && !changes.drilldownLayers.firstChange;
+
+    // Initialize filter values if they haven't been initialized yet
+    if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
+      this.initializeFilterValues();
+      this.filtersInitialized = true;
+    }

    // Respond to input changes
-    if (xAxisChanged || yAxisChanged || tableChanged || connectionChanged) {
-      console.log('X or Y axis or table or connection changed, fetching new data');
-      // Only fetch data if xAxis, yAxis, table, or connection has changed (and it's not the first change)
+    if (!this.isFetchingData && (xAxisChanged || yAxisChanged || tableChanged || connectionChanged || baseFiltersChanged ||
+      drilldownEnabledChanged || drilldownApiUrlChanged || drilldownXAxisChanged || drilldownYAxisChanged ||
+      drilldownLayersChanged)) {
+      console.log('X or Y axis or table or connection or base filters or drilldown config changed, fetching new data');
+      // Only fetch data if xAxis, yAxis, table, connection, baseFilters or drilldown config has changed (and it's not the first change)
      this.fetchGridData();
    }
  }

+  // Initialize filter values with proper default values based on type
+  private initializeFilterValues(): void {
+    console.log('Initializing filter values');
+    
+    // Initialize base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.value === undefined || filter.value === null) {
+              switch (filter.type) {
+                case 'multiselect':
+                  filter.value = [];
+                  break;
+                case 'date-range':
+                  filter.value = { start: null, end: null };
+                  break;
+                case 'toggle':
+                  filter.value = false;
+                  break;
+                default:
+                  filter.value = '';
+              }
+            }
+          });
+        }
+      });
+    }
+    
+    console.log('Filter values initialized:', {
+      baseFilters: this.baseFilters,
+      drilldownFilters: this.drilldownFilters,
+      drilldownLayers: this.drilldownLayers
+    });
+  }
+
  // Dynamic headers for the grid
-  
+
  fetchGridData(): void {
+    // Set flag to prevent recursive calls
+    this.isFetchingData = true;
+
+    // If we're in drilldown mode, fetch the appropriate drilldown data
+    if (this.currentDrilldownLevel > 0 && this.drilldownStack.length > 0) {
+      this.fetchDrilldownData();
+      // Reset flag after fetching
+      this.isFetchingData = false;
+      return;
+    }
+
    // If we have the necessary data, fetch grid data from the service
-    if (this.table && this.xAxis) {
-      console.log('Fetching grid data for:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
+    // if (this.table && this.xAxis) {
+    if (this.table) {
+
+      console.log('=== GRID VIEW DEBUG INFO ===');
+      console.log('Table:', this.table);
+      console.log('X-Axis:', this.xAxis);
+      console.log('Y-Axis:', this.yAxis);
+      console.log('Connection:', this.connection);

      // Convert yAxis to string if it's an array
      const yAxisString = Array.isArray(this.yAxis) ? this.yAxis.join(',') : this.yAxis;

+      // Get the parameter value from the drilldown stack for base level (should be empty)
+      let parameterValue = '';
+
+      // Log the URL that will be called
+      let url = `chart/getdashjson/grid?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
+      console.log('Grid data URL:', url);
+
+      // Get filter parameters from base filters
+      const filterObj = {};
+
+      // Add base filters
+      if (this.baseFilters && this.baseFilters.length > 0) {
+        this.baseFilters.forEach(filter => {
+          if (filter.field && filter.value) {
+            filterObj[filter.field] = filter.value;
+          }
+        });
+      }
+
+      // Add common filters directly as key-value pairs
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+
+      // Add common filters using the field name as the key
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+
+      console.log('GridView: Final filter object to send to API:', filterObj);
+
      // Fetch data from the dashboard service, similar to other chart components
-      this.dashboardService.getChartData(this.table, 'grid', this.xAxis, yAxisString, this.connection).subscribe(
+      this.dashboardService.getChartData(this.table, 'grid', this.xAxis, yAxisString, this.connection, '', '', filterParams).subscribe(
        (data: any) => {
+          console.log('=== GRID VIEW DATA RESPONSE ===');
          console.log('Received grid data:', data);
          if (data === null) {
            console.warn('Grid API returned null data. Check if the API endpoint is working correctly.');
            this.error = "No data Available";
+            this.noDataAvailable = true;
+            // Reset flag after fetching
+            this.isFetchingData = false;
            return;
          }
-          
+
          // Handle the actual data structure returned by the API
          if (data && data.chartData) {
            this.givendata = data.chartData;
            this.extractDynamicHeaders(data.chartData);
            this.error = this.givendata.length === 0 ? "No data Available" : undefined;
+            this.noDataAvailable = this.givendata.length === 0;
            console.log('Updated grid with data:', this.givendata);
          } else if (data && data.data) {
            // Handle the original expected format as fallback
            this.givendata = data.data;
            this.extractDynamicHeaders(data.data);
            this.error = this.givendata.length === 0 ? "No data Available" : undefined;
+            this.noDataAvailable = this.givendata.length === 0;
            console.log('Updated grid with legacy data format:', this.givendata);
          } else if (Array.isArray(data)) {
            // Handle case where data is directly an array
            this.givendata = data;
            this.extractDynamicHeaders(data);
            this.error = this.givendata.length === 0 ? "No data Available" : undefined;
+            this.noDataAvailable = this.givendata.length === 0;
            console.log('Updated grid with array data:', this.givendata);
          } else {
            console.warn('Grid received data does not have expected structure', data);
            this.error = "No valid data received";
            this.givendata = [];
+            this.noDataAvailable = true;
          }
+          // Reset flag after fetching
+          this.isFetchingData = false;
        }, (error) => {
          console.log('Error fetching grid data:', error);
          this.error = "Server Error";
+          this.noDataAvailable = true;
+          // Reset flag after fetching
+          this.isFetchingData = false;
        });
    } else if (this.table) {
      console.log('Missing xAxis, falling back to default data fetching');
      // Fallback to default data fetching when only table is provided
-       // Convert yAxis to string if it's an array
+      // Convert yAxis to string if it's an array
      const yAxisString = Array.isArray(this.yAxis) ? this.yAxis.join(',') : this.yAxis;

      // Fetch data from the dashboard service, similar to other chart components
      this.dashboardService.getChartData(this.table, 'grid', this.xAxis, yAxisString, this.connection).subscribe(
        (data: any) => {
-      // this.mainservice.getAll().subscribe((data: any) => {
-        console.log('recv data ', data);
-        this.givendata = Array.isArray(data) ? data : [];
-        this.extractDynamicHeaders(data);
-        this.error = this.givendata && this.givendata.length === 0 ? "No data Available" : undefined;
-      }, (error) => {
-        console.log(error);
-        this.error = "Server Error";
-      });
+          // this.mainservice.getAll().subscribe((data: any) => {
+          console.log('recv data ', data);
+          this.givendata = Array.isArray(data) ? data : [];
+          this.extractDynamicHeaders(data);
+          this.error = this.givendata && this.givendata.length === 0 ? "No data Available" : undefined;
+          this.noDataAvailable = this.givendata && this.givendata.length === 0;
+          // Reset flag after fetching
+          this.isFetchingData = false;
+        }, (error) => {
+          console.log(error);
+          this.error = "Server Error";
+          this.noDataAvailable = true;
+          // Reset flag after fetching
+          this.isFetchingData = false;
+        });
    } else {
      console.log('Missing required data for grid:', { table: this.table });
      this.error = "Table name is required";
+      this.noDataAvailable = true;
+      // Reset flag after fetching
+      this.isFetchingData = false;
    }
  }
-  
+
+  // Fetch drilldown data based on current drilldown level
+  fetchDrilldownData(): void {
+    console.log('Fetching drilldown data, current level:', this.currentDrilldownLevel);
+    console.log('Drilldown stack:', this.drilldownStack);
+
+    // Get the current drilldown configuration based on the current level
+    let drilldownConfig;
+    if (this.currentDrilldownLevel === 1) {
+      // Base drilldown level
+      drilldownConfig = {
+        apiUrl: this.drilldownApiUrl,
+        xAxis: this.drilldownXAxis,
+        yAxis: this.drilldownYAxis,
+        parameter: this.drilldownParameter
+      };
+    } else {
+      // Multi-layer drilldown level
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      if (layerIndex >= 0 && layerIndex < this.drilldownLayers.length) {
+        drilldownConfig = this.drilldownLayers[layerIndex];
+      } else {
+        console.warn('Invalid drilldown layer index:', layerIndex);
+        this.error = "Invalid drilldown configuration";
+        this.givendata = [];
+        this.noDataAvailable = true;
+        return;
+      }
+    }
+
+    console.log('Drilldown config for level', this.currentDrilldownLevel, ':', drilldownConfig);
+
+    // Check if we have valid drilldown configuration
+    if (!drilldownConfig || !drilldownConfig.apiUrl || !drilldownConfig.xAxis || !drilldownConfig.yAxis) {
+      console.warn('Missing drilldown configuration for level:', this.currentDrilldownLevel);
+      this.error = "Missing drilldown configuration";
+      this.givendata = [];
+      this.noDataAvailable = true;
+      return;
+    }
+
+    // Get the parameter value from the drilldown stack
+    let parameterValue = '';
+    if (this.drilldownStack.length > 0) {
+      const lastEntry = this.drilldownStack[this.drilldownStack.length - 1];
+      parameterValue = lastEntry.clickedValue || '';
+      console.log('Parameter value from last click:', parameterValue);
+    }
+
+    // Get the parameter field from drilldown config
+    const parameterField = drilldownConfig.parameter || '';
+    console.log('Parameter field:', parameterField);
+
+    console.log('Fetching drilldown data for level:', this.currentDrilldownLevel, {
+      apiUrl: drilldownConfig.apiUrl,
+      xAxis: drilldownConfig.xAxis,
+      yAxis: drilldownConfig.yAxis,
+      parameterField: parameterField,
+      parameterValue: parameterValue,
+      connection: this.connection
+    });
+
+    // Build the actual API URL with parameter replacement
+    let actualApiUrl = drilldownConfig.apiUrl;
+    console.log('Original API URL:', actualApiUrl);
+    console.log('Parameter value to use:', parameterValue);
+    console.log('Parameter field:', parameterField);
+
+    // Check if the URL contains angle brackets for parameter replacement
+    const hasAngleBrackets = /<[^>]+>/.test(actualApiUrl);
+
+    if (hasAngleBrackets && parameterValue) {
+      // Replace angle brackets placeholder with actual value
+      console.log('Replacing angle brackets with parameter value');
+      const encodedValue = encodeURIComponent(parameterValue);
+      actualApiUrl = actualApiUrl.replace(/<[^>]+>/g, encodedValue);
+      console.log('URL after angle bracket replacement:', actualApiUrl);
+    }
+
+    // Log the URL that will be called
+    let url = `chart/getdashjson/grid?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
+    if (parameterField && parameterValue) {
+      url += `&parameter=${encodeURIComponent(parameterField)}&parameterValue=${encodeURIComponent(parameterValue)}`;
+    }
+    console.log('Drilldown data URL:', url);
+
+    // Convert drilldown layer filters to filter parameters (if applicable)
+    const filterObj = {};
+
+    // Add drilldown layer filters
+    if (drilldownConfig.filters && drilldownConfig.filters.length > 0) {
+      drilldownConfig.filters.forEach((filter: any) => {
+        if (filter.field && filter.value) {
+          filterObj[filter.field] = filter.value;
+        }
+      });
+    }
+
+    // Add drilldownFilters
+    if (this.drilldownFilters && this.drilldownFilters.length > 0) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.field && filter.value) {
+          filterObj[filter.field] = filter.value;
+        }
+      });
+    }
+
+    // Add common filters
+    const commonFilters = this.filterService.getFilterValues();
+    const filterDefinitions = this.filterService.getFilters();
+    Object.keys(commonFilters).forEach(filterId => {
+      const filterValue = commonFilters[filterId];
+
+      // Find the filter definition to get the field name
+      const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+
+      if (filterDef && filterDef.field) {
+        const fieldName = filterDef.field;
+        if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+          filterObj[fieldName] = filterValue;
+        }
+      }
+    });
+
+    // Convert to JSON string for API call
+    let drilldownFilterParams = '';
+    if (Object.keys(filterObj).length > 0) {
+      drilldownFilterParams = JSON.stringify(filterObj);
+    }
+
+    console.log('Drilldown filter parameters:', drilldownFilterParams);
+
+    // For drilldown level, we pass the parameter value from the drilldown stack and drilldown filters
+    this.dashboardService.getChartData(
+      drilldownConfig.apiUrl, 'grid',
+      drilldownConfig.xAxis, drilldownConfig.yAxis,
+      this.connection,
+      parameterField, parameterValue,
+      drilldownFilterParams
+    ).subscribe(
+      (data: any) => {
+        console.log('Received drilldown data:', data);
+        if (data === null) {
+          console.warn('Drilldown API returned null data. Check if the API endpoint is working correctly.');
+          this.error = "No data Available";
+          this.givendata = [];
+          this.noDataAvailable = true;
+          return;
+        }
+
+        // Handle the actual data structure returned by the API
+        if (data && data.chartData) {
+          this.givendata = data.chartData;
+          this.extractDynamicHeaders(data.chartData);
+          this.error = this.givendata.length === 0 ? "No data Available" : undefined;
+          this.noDataAvailable = this.givendata.length === 0;
+          console.log('Updated grid with drilldown data:', this.givendata);
+        } else if (data && data.data) {
+          // Handle the original expected format as fallback
+          this.givendata = data.data;
+          this.extractDynamicHeaders(data.data);
+          this.error = this.givendata.length === 0 ? "No data Available" : undefined;
+          this.noDataAvailable = this.givendata.length === 0;
+          console.log('Updated grid with drilldown legacy data format:', this.givendata);
+        } else if (Array.isArray(data)) {
+          // Handle case where data is directly an array
+          this.givendata = data;
+          this.extractDynamicHeaders(data);
+          this.error = this.givendata.length === 0 ? "No data Available" : undefined;
+          this.noDataAvailable = this.givendata.length === 0;
+          console.log('Updated grid with drilldown array data:', this.givendata);
+        } else {
+          console.warn('Drilldown received data does not have expected structure', data);
+          this.error = "No valid data received";
+          this.givendata = [];
+          this.noDataAvailable = true;
+        }
+      },
+      (error) => {
+        console.error('Error fetching drilldown data:', error);
+        this.error = "Server Error";
+        this.givendata = [];
+        this.noDataAvailable = true;
+      }
+    );
+  }
+
+  // Reset to original data (go back to base level)
+  resetToOriginalData(): void {
+    console.log('Resetting to original data');
+    console.log('Current stack before reset:', this.drilldownStack);
+    console.log('Current level before reset:', this.currentDrilldownLevel);
+
+    this.currentDrilldownLevel = 0;
+    this.drilldownStack = [];
+
+    if (this.originalGridData.length > 0) {
+      // Create a deep copy to avoid reference issues
+      this.givendata = JSON.parse(JSON.stringify(this.originalGridData));
+      this.extractDynamicHeaders(this.givendata);
+      console.log('Restored original data');
+    }
+
+    console.log('After reset - data:', this.givendata);
+
+    // Re-fetch original data
+    this.fetchGridData();
+  }
+
+  // Navigate back to previous drilldown level
+  navigateBack(): void {
+    console.log('Navigating back, current stack:', this.drilldownStack);
+    console.log('Current level:', this.currentDrilldownLevel);
+
+    if (this.drilldownStack.length > 0) {
+      // Remove the last entry from the stack
+      const removedEntry = this.drilldownStack.pop();
+      console.log('Removed entry from stack:', removedEntry);
+
+      // Update the current drilldown level
+      this.currentDrilldownLevel = this.drilldownStack.length;
+      console.log('New level after pop:', this.currentDrilldownLevel);
+      console.log('Stack after pop:', this.drilldownStack);
+
+      if (this.drilldownStack.length > 0) {
+        // Fetch data for the previous level
+        console.log('Fetching data for previous level');
+        this.fetchDrilldownData();
+      } else {
+        // Back to base level
+        console.log('Back to base level, resetting to original data');
+        this.resetToOriginalData();
+      }
+    } else {
+      // Already at base level, reset to original data
+      console.log('Already at base level, resetting to original data');
+      this.resetToOriginalData();
+    }
+  }
+
+  // Method to handle grid row clicks for drilldown
+  onRowClick(item: any, key: string): void {
+    console.log('Grid row clicked:', { item, key });
+
+    // If drilldown is enabled
+    if (this.drilldownEnabled) {
+      // Get the value for the clicked key
+      const clickedValue = item[key];
+
+      console.log('Clicked on row value:', { key, value: clickedValue });
+
+      // If we're not at the base level, store original data
+      if (this.currentDrilldownLevel === 0) {
+        // Store original data before entering drilldown mode
+        // Create a deep copy to avoid reference issues
+        this.originalGridData = JSON.parse(JSON.stringify(this.givendata));
+        console.log('Stored original data for drilldown');
+      }
+
+      // Determine the next drilldown level
+      const nextDrilldownLevel = this.currentDrilldownLevel + 1;
+
+      console.log('Next drilldown level will be:', nextDrilldownLevel);
+
+      // Check if there's a drilldown configuration for this level
+      let hasDrilldownConfig = false;
+      let drilldownConfig;
+
+      if (nextDrilldownLevel === 1) {
+        // Base drilldown level
+        drilldownConfig = {
+          apiUrl: this.drilldownApiUrl,
+          xAxis: this.drilldownXAxis,
+          yAxis: this.drilldownYAxis,
+          parameter: this.drilldownParameter
+        };
+        hasDrilldownConfig = !!this.drilldownApiUrl && !!this.drilldownXAxis && !!this.drilldownYAxis;
+      } else {
+        // Multi-layer drilldown level
+        const layerIndex = nextDrilldownLevel - 2; // -2 because level 1 is base drilldown
+        if (layerIndex < this.drilldownLayers.length) {
+          drilldownConfig = this.drilldownLayers[layerIndex];
+          hasDrilldownConfig = drilldownConfig.enabled &&
+            !!drilldownConfig.apiUrl &&
+            !!drilldownConfig.xAxis &&
+            !!drilldownConfig.yAxis;
+        }
+      }
+
+      console.log('Drilldown config for next level:', drilldownConfig);
+      console.log('Has drilldown config:', hasDrilldownConfig);
+
+      // If there's a drilldown configuration for the next level, proceed
+      if (hasDrilldownConfig) {
+        // Add this click to the drilldown stack
+        const stackEntry = {
+          level: nextDrilldownLevel,
+          clickedKey: key,
+          clickedValue: clickedValue
+        };
+
+        this.drilldownStack.push(stackEntry);
+
+        console.log('Added to drilldown stack:', stackEntry);
+        console.log('Current drilldown stack:', this.drilldownStack);
+
+        // Update the current drilldown level
+        this.currentDrilldownLevel = nextDrilldownLevel;
+
+        console.log('Entering drilldown level:', this.currentDrilldownLevel);
+
+        // Fetch drilldown data for the new level
+        this.fetchDrilldownData();
+      } else {
+        console.log('No drilldown configuration for level:', nextDrilldownLevel);
+      }
+    } else {
+      console.log('Drilldown not enabled');
+    }
+  }
+
  /**
   * Extract dynamic headers from the data
   * @param data Array of data objects
@@ -143,7 +688,7 @@ export class GridViewComponent implements OnInit, OnChanges {
  private extractDynamicHeaders(data: any): void {
    // Ensure data is an array
    const dataArray = Array.isArray(data) ? data : [];
-    
+
    if (dataArray && dataArray.length > 0) {
      // Get all unique keys from the data objects
      const allKeys = new Set<string>();
@@ -152,19 +697,19 @@ export class GridViewComponent implements OnInit, OnChanges {
          Object.keys(item).forEach(key => allKeys.add(key));
        }
      });
-      
+
      // Convert to array of header objects with key and display name
      this.dynamicHeaders = Array.from(allKeys).map(key => ({
        key: key,
        displayName: this.formatHeader(key)
      }));
-      
+
      console.log('Dynamic headers extracted:', this.dynamicHeaders);
    } else {
      this.dynamicHeaders = [];
    }
  }
-  
+
  /**
   * Format header name for better display
   * @param key The key to format
@@ -175,4 +720,261 @@ export class GridViewComponent implements OnInit, OnChanges {
      .replace(/([A-Z])/g, ' $1')
      .replace(/^./, str => str.toUpperCase());
  }
+
+  // Check if there are active filters
+  hasActiveFilters(): boolean {
+    return (this.baseFilters && this.baseFilters.length > 0) || 
+           (this.drilldownFilters && this.drilldownFilters.length > 0) || 
+           this.hasActiveLayerFilters();
+  }
+
+  // Check if there are active layer filters for current drilldown level
+  hasActiveLayerFilters(): boolean {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      return layerIndex < this.drilldownLayers.length && 
+             this.drilldownLayers[layerIndex].filters && 
+             this.drilldownLayers[layerIndex].filters.length > 0;
+    }
+    return false;
+  }
+
+  // Get active layer filters for current drilldown level
+  getActiveLayerFilters(): any[] {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      if (layerIndex < this.drilldownLayers.length && 
+          this.drilldownLayers[layerIndex].filters) {
+        return this.drilldownLayers[layerIndex].filters;
+      }
+    }
+    return [];
+  }
+
+  // Get filter options for dropdown/multiselect filters
+  getFilterOptions(filter: any): string[] {
+    if (filter.options) {
+      if (Array.isArray(filter.options)) {
+        return filter.options;
+      } else if (typeof filter.options === 'string') {
+        return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
+      }
+    }
+    return [];
+  }
+
+  // Check if an option is selected for multiselect filters
+  isOptionSelected(filter: any, option: string): boolean {
+    if (!filter.value) {
+      return false;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.includes(option);
+    }
+    
+    return filter.value === option;
+  }
+
+  // Handle base filter changes
+  onBaseFilterChange(filter: any): void {
+    console.log('Base filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchGridData();
+  }
+
+  // Handle drilldown filter changes
+  onDrilldownFilterChange(filter: any): void {
+    console.log('Drilldown filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchGridData();
+  }
+
+  // Handle layer filter changes
+  onLayerFilterChange(filter: any): void {
+    console.log('Layer filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchGridData();
+  }
+
+  // Handle multiselect changes
+  onMultiSelectChange(filter: any, option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filter.value as array if it's not already
+    if (!Array.isArray(filter.value)) {
+      filter.value = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!filter.value.includes(option)) {
+        filter.value.push(option);
+      }
+    } else {
+      // Remove option from array
+      filter.value = filter.value.filter((item: string) => item !== option);
+    }
+    
+    // Refresh data when filter changes
+    this.fetchGridData();
+  }
+
+  // Handle date range changes
+  onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
+    filter.value = dateRange;
+    // Refresh data when filter changes
+    this.fetchGridData();
+  }
+
+  // Handle toggle changes
+  onToggleChange(filter: any, checked: boolean): void {
+    filter.value = checked;
+    // Refresh data when filter changes
+    this.fetchGridData();
+  }
+
+  // Toggle multiselect dropdown visibility
+  toggleMultiselect(filter: any, context: string): void {
+    const filterId = `${context}-${filter.field}`;
+    if (this.isMultiselectOpen(filter, context)) {
+      this.openMultiselects.delete(filterId);
+    } else {
+      // Close all other multiselects first
+      this.openMultiselects.clear();
+      this.openMultiselects.set(filterId, context);
+      
+      // Add document click handler to close dropdown when clicking outside
+      this.addDocumentClickHandler();
+    }
+  }
+
+  // Add document click handler to close dropdowns when clicking outside
+  private addDocumentClickHandler(): void {
+    if (!this.documentClickHandler) {
+      this.documentClickHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        // Check if click is outside any multiselect dropdown
+        if (!target.closest('.multiselect-container')) {
+          this.openMultiselects.clear();
+          this.removeDocumentClickHandler();
+        }
+      };
+      
+      // Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
+      setTimeout(() => {
+        document.addEventListener('click', this.documentClickHandler!);
+      }, 0);
+    }
+  }
+
+  // Remove document click handler
+  private removeDocumentClickHandler(): void {
+    if (this.documentClickHandler) {
+      document.removeEventListener('click', this.documentClickHandler);
+      this.documentClickHandler = null;
+    }
+  }
+
+  // Check if multiselect dropdown is open
+  isMultiselectOpen(filter: any, context: string): boolean {
+    const filterId = `${context}-${filter.field}`;
+    return this.openMultiselects.has(filterId);
+  }
+
+  // Get count of selected options for a multiselect filter
+  getSelectedOptionsCount(filter: any): number {
+    if (!filter.value) {
+      return 0;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.length;
+    }
+    
+    return 0;
+  }
+
+  // Clear all filters
+  clearAllFilters(): void {
+    // Clear base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.type === 'multiselect') {
+              filter.value = [];
+            } else if (filter.type === 'date-range') {
+              filter.value = { start: null, end: null };
+            } else if (filter.type === 'toggle') {
+              filter.value = false;
+            } else {
+              filter.value = '';
+            }
+          });
+        }
+      });
+    }
+    
+    // Close all multiselect dropdowns
+    this.openMultiselects.clear();
+    
+    // Refresh data
+    this.fetchGridData();
+  }
+
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('GridViewComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+
+    // Clear data to help with garbage collection
+    this.givendata = [];
+    this.dynamicHeaders = [];
+    this.drilldownStack = [];
+    this.originalGridData = [];
+
+    // Clear multiselect tracking
+    this.openMultiselects.clear();
+    
+    // Remove document click handler
+    this.removeDocumentClickHandler();
+    
+    console.log('GridViewComponent destroyed and cleaned up');
+  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.html
@@ -1,13 +1,282 @@
-<div style="display: block">
-  <!-- Drilldown mode indicator -->
-  <div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
-    <span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
-    <button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
-      Back to Level {{currentDrilldownLevel - 1}}
-    </button>
-    <button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
-      Back to Main View
-    </button>
+<div style="display: block; height: 100%; width: 100%;">
+  <!-- Filter Controls Section -->
+  <div class="filter-section" *ngIf="hasActiveFilters()">
+    <!-- Base Filters -->
+    <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
+      <h4>Base Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of baseFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onBaseFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onBaseFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'base-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Drilldown Filters -->
+    <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+      <h4>Drilldown Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of drilldownFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onDrilldownFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onDrilldownFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'drilldown-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Layer Filters -->
+    <div class="filter-group" *ngIf="hasActiveLayerFilters()">
+      <h4>Layer Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onLayerFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onLayerFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'layer-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Clear Filters Button -->
+    <div class="filter-actions">
+      <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
+    </div>
+  </div>
+  
+  <!-- Header row with chart title and drilldown navigation -->
+  <div class="clr-row header-row">
+    <div class="clr-col-6">
+      <h3 class="chart-title">{{charttitle || 'Line Chart'}}</h3>
+    </div>
+    <div class="clr-col-6" style="text-align: right;">
+      <!-- Add drilldown navigation controls -->
+      <button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
+        <cds-icon shape="arrow" direction="left"></cds-icon>
+        Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
+      </button>
+    </div>
+  </div>
+  
+  <!-- Show current drilldown level -->
+  <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
+    <div class="clr-col-12">
+      <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
+        <div class="alert-items">
+          <div class="alert-item static">
+            <div class="alert-icon-wrapper">
+              <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
+            </div>
+            <span class="alert-text">
+              Drilldown Level: {{currentDrilldownLevel}} 
+              <span *ngIf="drilldownStack.length > 0">
+                (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
  </div>
  
  <!-- No data message -->
@@ -16,12 +285,11 @@
  </div>
  
  <!-- Chart display -->
-  <div *ngIf="!noDataAvailable">
+  <div *ngIf="!noDataAvailable" style="position: relative; height: calc(100% - 50px);">
    <canvas baseChart
                [datasets]="lineChartData"
                [labels]="lineChartLabels"
                [options]="lineChartOptions"
-           
                [legend]="lineChartLegend"
                [type]="lineChartType"
                (chartHover)="chartHovered($event)"
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.scss
@@ -0,0 +1,192 @@
+.filter-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+}
+
+.filter-group {
+  margin-bottom: 15px;
+  
+  h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-weight: 600;
+  }
+}
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-item {
+  flex: 1 1 300px;
+  min-width: 250px;
+  padding: 10px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.filter-label {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #555;
+  font-size: 14px;
+}
+
+.filter-input {
+  width: 100%;
+  
+  .filter-text-input,
+  .filter-select,
+  .filter-date {
+    width: 100%;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .filter-select {
+    height: 34px;
+  }
+}
+
+.multiselect-container {
+  position: relative;
+}
+
+.multiselect-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  min-height: 34px;
+  
+  .multiselect-label {
+    flex: 1;
+    font-size: 14px;
+  }
+  
+  .multiselect-value {
+    color: #666;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+  
+  .dropdown-icon {
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover {
+    border-color: #999;
+  }
+}
+
+.multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  
+  .checkbox-group {
+    padding: 8px;
+    
+    .checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      
+      .checkbox-label {
+        margin: 0;
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.date-range {
+  .date-input-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .date-separator {
+    margin: 0 5px;
+    color: #777;
+  }
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .toggle-label {
+    margin: 0;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+
+.filter-actions {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+  
+  .btn {
+    font-size: 13px;
+  }
+}
+
+// New header row styling
+.header-row {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  
+  .chart-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .filter-controls {
+    flex-direction: column;
+  }
+  
+  .filter-item {
+    min-width: 100%;
+  }
+  
+  .header-row {
+    .chart-title {
+      font-size: 16px;
+    }
+  }
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/line-chart/line-chart.component.ts
@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs';
  templateUrl: './line-chart.component.html',
  styleUrls: ['./line-chart.component.scss']
 })
-export class LineChartComponent implements OnInit, OnChanges {
+export class LineChartComponent implements OnInit, OnChanges, OnDestroy {
  @Input() xAxis: string;
  @Input() yAxis: string | string[];
  @Input() table: string;
@@ -88,6 +88,11 @@ export class LineChartComponent implements OnInit, OnChanges {
  // Subscriptions to unsubscribe on destroy
  private subscriptions: Subscription[] = [];

+  // Add properties for filter functionality
+  private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
+  private documentClickHandler: ((event: MouseEvent) => void) | null = null;
+  private filtersInitialized: boolean = false;
+
  constructor(
    private dashboardService: Dashboard3Service,
    private filterService: FilterService
@@ -109,6 +114,12 @@ export class LineChartComponent implements OnInit, OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    console.log('LineChartComponent input changes:', changes);
    
+    // Initialize filter values if they haven't been initialized yet
+    if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
+      this.initializeFilterValues();
+      this.filtersInitialized = true;
+    }
+    
    // Check if any of the key properties have changed
    const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
    const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
@@ -140,6 +151,318 @@ export class LineChartComponent implements OnInit, OnChanges {

  ngOnDestroy(): void {
    this.subscriptions.forEach(sub => sub.unsubscribe());
+    // Clean up document click handler
+    this.removeDocumentClickHandler();
+  }
+  
+  // Initialize filter values with proper default values based on type
+  private initializeFilterValues(): void {
+    console.log('Initializing filter values');
+    
+    // Initialize base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.value === undefined || filter.value === null) {
+              switch (filter.type) {
+                case 'multiselect':
+                  filter.value = [];
+                  break;
+                case 'date-range':
+                  filter.value = { start: null, end: null };
+                  break;
+                case 'toggle':
+                  filter.value = false;
+                  break;
+                default:
+                  filter.value = '';
+              }
+            }
+          });
+        }
+      });
+    }
+    
+    console.log('Filter values initialized:', {
+      baseFilters: this.baseFilters,
+      drilldownFilters: this.drilldownFilters,
+      drilldownLayers: this.drilldownLayers
+    });
+  }
+
+  // Check if there are active filters
+  hasActiveFilters(): boolean {
+    return (this.baseFilters && this.baseFilters.length > 0) || 
+           (this.drilldownFilters && this.drilldownFilters.length > 0) || 
+           this.hasActiveLayerFilters();
+  }
+
+  // Check if there are active layer filters for current drilldown level
+  hasActiveLayerFilters(): boolean {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      return layerIndex < this.drilldownLayers.length && 
+             this.drilldownLayers[layerIndex].filters && 
+             this.drilldownLayers[layerIndex].filters.length > 0;
+    }
+    return false;
+  }
+
+  // Get active layer filters for current drilldown level
+  getActiveLayerFilters(): any[] {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      if (layerIndex < this.drilldownLayers.length && 
+          this.drilldownLayers[layerIndex].filters) {
+        return this.drilldownLayers[layerIndex].filters;
+      }
+    }
+    return [];
+  }
+
+  // Get filter options for dropdown/multiselect filters
+  getFilterOptions(filter: any): string[] {
+    if (filter.options) {
+      if (Array.isArray(filter.options)) {
+        return filter.options;
+      } else if (typeof filter.options === 'string') {
+        return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
+      }
+    }
+    return [];
+  }
+
+  // Check if an option is selected for multiselect filters
+  isOptionSelected(filter: any, option: string): boolean {
+    if (!filter.value) {
+      return false;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.includes(option);
+    }
+    
+    return filter.value === option;
+  }
+
+  // Handle base filter changes
+  onBaseFilterChange(filter: any): void {
+    console.log('Base filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle drilldown filter changes
+  onDrilldownFilterChange(filter: any): void {
+    console.log('Drilldown filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle layer filter changes
+  onLayerFilterChange(filter: any): void {
+    console.log('Layer filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle multiselect changes
+  onMultiSelectChange(filter: any, option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filter.value as array if it's not already
+    if (!Array.isArray(filter.value)) {
+      filter.value = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!filter.value.includes(option)) {
+        filter.value.push(option);
+      }
+    } else {
+      // Remove option from array
+      filter.value = filter.value.filter((item: string) => item !== option);
+    }
+    
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle date range changes
+  onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
+    filter.value = dateRange;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle toggle changes
+  onToggleChange(filter: any, checked: boolean): void {
+    filter.value = checked;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Toggle multiselect dropdown visibility
+  toggleMultiselect(filter: any, context: string): void {
+    const filterId = `${context}-${filter.field}`;
+    if (this.isMultiselectOpen(filter, context)) {
+      this.openMultiselects.delete(filterId);
+    } else {
+      // Close all other multiselects first
+      this.openMultiselects.clear();
+      this.openMultiselects.set(filterId, context);
+      
+      // Add document click handler to close dropdown when clicking outside
+      this.addDocumentClickHandler();
+    }
+  }
+
+  // Add document click handler to close dropdowns when clicking outside
+  private addDocumentClickHandler(): void {
+    if (!this.documentClickHandler) {
+      this.documentClickHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        // Check if click is outside any multiselect dropdown
+        if (!target.closest('.multiselect-container')) {
+          this.openMultiselects.clear();
+          this.removeDocumentClickHandler();
+        }
+      };
+      
+      // Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
+      setTimeout(() => {
+        document.addEventListener('click', this.documentClickHandler!);
+      }, 0);
+    }
+  }
+
+  // Remove document click handler
+  private removeDocumentClickHandler(): void {
+    if (this.documentClickHandler) {
+      document.removeEventListener('click', this.documentClickHandler);
+      this.documentClickHandler = null;
+    }
+  }
+
+  // Check if multiselect dropdown is open
+  isMultiselectOpen(filter: any, context: string): boolean {
+    const filterId = `${context}-${filter.field}`;
+    return this.openMultiselects.has(filterId);
+  }
+
+  // Get count of selected options for a multiselect filter
+  getSelectedOptionsCount(filter: any): number {
+    if (!filter.value) {
+      return 0;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.length;
+    }
+    
+    return 0;
+  }
+
+  // Clear all filters
+  clearAllFilters(): void {
+    // Clear base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.type === 'multiselect') {
+              filter.value = [];
+            } else if (filter.type === 'date-range') {
+              filter.value = { start: null, end: null };
+            } else if (filter.type === 'toggle') {
+              filter.value = false;
+            } else {
+              filter.value = '';
+            }
+          });
+        }
+      });
+    }
+    
+    // Close all multiselect dropdowns
+    this.openMultiselects.clear();
+    
+    // Refresh data
+    this.fetchChartData();
  }
  
  // Public method to refresh data when filters change
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.html
@@ -1,19 +1,287 @@
 <div class="pie-chart-container">
-  <!-- Drilldown mode indicator -->
-  <div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
-    <span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
-    <button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
-      Back to Level {{currentDrilldownLevel - 1}}
-    </button>
-    <button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
-      Back to Main View
-    </button>
+  <!-- Filter Controls Section -->
+  <div class="filter-section" *ngIf="hasActiveFilters()">
+    <!-- Base Filters -->
+    <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
+      <h4>Base Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of baseFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onBaseFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onBaseFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'base-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Drilldown Filters -->
+    <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+      <h4>Drilldown Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of drilldownFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onDrilldownFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onDrilldownFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'drilldown-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Layer Filters -->
+    <div class="filter-group" *ngIf="hasActiveLayerFilters()">
+      <h4>Layer Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onLayerFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onLayerFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'layer-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Clear Filters Button -->
+    <div class="filter-actions">
+      <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
+    </div>
+  </div>
+  
+  <!-- Header row with chart title and drilldown navigation -->
+  <div class="clr-row header-row">
+    <div class="clr-col-6">
+      <h3 class="chart-title" *ngIf="charttitle">{{ charttitle }}</h3>
+    </div>
+    <div class="clr-col-6" style="text-align: right;">
+      <!-- Add drilldown navigation controls -->
+      <button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
+        <cds-icon shape="arrow" direction="left"></cds-icon>
+        Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
+      </button>
+    </div>
+  </div>
+  
+  <!-- Show current drilldown level -->
+  <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
+    <div class="clr-col-12">
+      <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
+        <div class="alert-items">
+          <div class="alert-item static">
+            <div class="alert-icon-wrapper">
+              <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
+            </div>
+            <span class="alert-text">
+              Drilldown Level: {{currentDrilldownLevel}} 
+              <span *ngIf="drilldownStack.length > 0">
+                (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
  </div>
  
-  <h3 class="chart-title" *ngIf="charttitle">{{ charttitle }}</h3>
  <div class="chart-wrapper">
    <!-- Show loading indicator -->
-    <div class="loading-indicator" *ngIf="pieChartLabels.length === 0 && pieChartData.length === 0 && !noDataAvailable">
+    <div class="loading-indicator" *ngIf="pieChartLabels.length === 0 && pieChartData.length === 0 && !noDataAvailable && !isFetchingData">
      <div class="spinner"></div>
      <p>Loading chart data...</p>
    </div>
@@ -23,15 +291,15 @@
      <p>No chart data available</p>
    </div>
    
-    <!-- Show chart when data is available -->
+    <!-- Show chart when data is available or show default data -->
    <canvas baseChart 
-      *ngIf="pieChartLabels.length > 0 && pieChartData.length > 0"
-      [data]="pieChartData" 
+      [datasets]="pieChartDatasets" 
      [labels]="pieChartLabels" 
      [type]="pieChartType"
      [options]="pieChartOptions"
      (chartHover)="chartHovered($event)"
-      (chartClick)="chartClicked($event)">
+      (chartClick)="chartClicked($event)"
+      [style.display]="shouldShowChart() ? 'block' : 'none'">
    </canvas>
  </div>
  <div class="chart-legend" *ngIf="showlabel && pieChartLabels && pieChartLabels.length > 0">
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.scss
@@ -149,10 +149,192 @@
  100% { transform: rotate(360deg); }
 }

-/* Responsive design */
+// Filter section styles
+.filter-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+}
+
+.filter-group {
+  margin-bottom: 15px;
+  
+  h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-weight: 600;
+  }
+}
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-item {
+  flex: 1 1 300px;
+  min-width: 250px;
+  padding: 10px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.filter-label {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #555;
+  font-size: 14px;
+}
+
+.filter-input {
+  width: 100%;
+  
+  .filter-text-input,
+  .filter-select,
+  .filter-date {
+    width: 100%;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .filter-select {
+    height: 34px;
+  }
+}
+
+.multiselect-container {
+  position: relative;
+}
+
+.multiselect-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  min-height: 34px;
+  
+  .multiselect-label {
+    flex: 1;
+    font-size: 14px;
+  }
+  
+  .multiselect-value {
+    color: #666;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+  
+  .dropdown-icon {
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover {
+    border-color: #999;
+  }
+}
+
+.multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  
+  .checkbox-group {
+    padding: 8px;
+    
+    .checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      
+      .checkbox-label {
+        margin: 0;
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.date-range {
+  .date-input-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .date-separator {
+    margin: 0 5px;
+    color: #777;
+  }
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .toggle-label {
+    margin: 0;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+
+.filter-actions {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+  
+  .btn {
+    font-size: 13px;
+  }
+}
+
+// New header row styling
+.header-row {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  
+  .chart-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    text-align: left;
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+}
+
+// Responsive design
@media (max-width: 768px) {
  .pie-chart-container {
    padding: 15px;
+    height: auto;
+    min-height: 300px;
  }
  
  .chart-title {
@@ -179,4 +361,18 @@
    font-size: 16px;
    padding: 20px;
  }
+  
+  .filter-controls {
+    flex-direction: column;
+  }
+  
+  .filter-item {
+    min-width: 100%;
+  }
+  
+  .header-row {
+    .chart-title {
+      font-size: 16px;
+    }
+  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/pie-chart/pie-chart.component.ts
@@ -8,7 +8,7 @@ import { Subscription } from 'rxjs';
  templateUrl: './pie-chart.component.html',
  styleUrls: ['./pie-chart.component.scss']
 })
-export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
+export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked, OnDestroy {
  @Input() xAxis: string;
  @Input() yAxis: string | string[];
  @Input() table: string;
@@ -37,6 +37,12 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {

  public pieChartLabels: string[] = ['Category A', 'Category B', 'Category C'];
  public pieChartData: number[] = [30, 50, 20];
+  public pieChartDatasets: any[] = [
+    {
+      data: [30, 50, 20],
+      label: 'Dataset 1'
+    }
+  ];
  public pieChartType: string = 'pie';
  public pieChartOptions: any = {
    responsive: true,
@@ -96,11 +102,16 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
  noDataAvailable: boolean = false;
  
  // Flag to prevent infinite loops
-  private isFetchingData: boolean = false;
+   isFetchingData: boolean = false;
  
  // Subscriptions to unsubscribe on destroy
  private subscriptions: Subscription[] = [];

+  // Add properties for filter functionality
+  private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
+  private documentClickHandler: ((event: MouseEvent) => void) | null = null;
+  private filtersInitialized: boolean = false;
+
  constructor(
    private dashboardService: Dashboard3Service,
    private filterService: FilterService
@@ -127,12 +138,28 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
    console.log('PieChartComponent initialized with default data:', { labels: this.pieChartLabels, data: this.pieChartData });
    // Validate initial data
    this.validateChartData();
-    this.fetchChartData();
+    // Initialize datasets with default data
+    this.pieChartDatasets = [
+      {
+        data: this.pieChartData,
+        label: 'Dataset 1'
+      }
+    ];
+    // Only fetch data if we have the required inputs, otherwise show default data
+    if (this.table && this.xAxis && this.yAxis) {
+      this.fetchChartData();
+    }
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log('PieChartComponent input changes:', changes);
    
+    // Initialize filter values if they haven't been initialized yet
+    if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
+      this.initializeFilterValues();
+      this.filtersInitialized = true;
+    }
+    
    // Check if any of the key properties have changed
    const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
    const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
@@ -154,10 +181,328 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
      console.log('Chart configuration changed, fetching new data');
      this.fetchChartData();
    }
+    
+    // If we have the required inputs and haven't fetched data yet, fetch it
+    if ((xAxisChanged || yAxisChanged || tableChanged) && this.table && this.xAxis && this.yAxis && !this.isFetchingData) {
+      console.log('Required inputs available, fetching data');
+      this.fetchChartData();
+    }
  }

  ngOnDestroy(): void {
    this.subscriptions.forEach(sub => sub.unsubscribe());
+    // Clean up document click handler
+    this.removeDocumentClickHandler();
+  }
+  
+  // Initialize filter values with proper default values based on type
+  private initializeFilterValues(): void {
+    console.log('Initializing filter values');
+    
+    // Initialize base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.value === undefined || filter.value === null) {
+              switch (filter.type) {
+                case 'multiselect':
+                  filter.value = [];
+                  break;
+                case 'date-range':
+                  filter.value = { start: null, end: null };
+                  break;
+                case 'toggle':
+                  filter.value = false;
+                  break;
+                default:
+                  filter.value = '';
+              }
+            }
+          });
+        }
+      });
+    }
+    
+    console.log('Filter values initialized:', {
+      baseFilters: this.baseFilters,
+      drilldownFilters: this.drilldownFilters,
+      drilldownLayers: this.drilldownLayers
+    });
+  }
+
+  // Check if there are active filters
+  hasActiveFilters(): boolean {
+    return (this.baseFilters && this.baseFilters.length > 0) || 
+           (this.drilldownFilters && this.drilldownFilters.length > 0) || 
+           this.hasActiveLayerFilters();
+  }
+
+  // Check if there are active layer filters for current drilldown level
+  hasActiveLayerFilters(): boolean {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      return layerIndex < this.drilldownLayers.length && 
+             this.drilldownLayers[layerIndex].filters && 
+             this.drilldownLayers[layerIndex].filters.length > 0;
+    }
+    return false;
+  }
+
+  // Get active layer filters for current drilldown level
+  getActiveLayerFilters(): any[] {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      if (layerIndex < this.drilldownLayers.length && 
+          this.drilldownLayers[layerIndex].filters) {
+        return this.drilldownLayers[layerIndex].filters;
+      }
+    }
+    return [];
+  }
+
+  // Get filter options for dropdown/multiselect filters
+  getFilterOptions(filter: any): string[] {
+    if (filter.options) {
+      if (Array.isArray(filter.options)) {
+        return filter.options;
+      } else if (typeof filter.options === 'string') {
+        return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
+      }
+    }
+    return [];
+  }
+
+  // Check if an option is selected for multiselect filters
+  isOptionSelected(filter: any, option: string): boolean {
+    if (!filter.value) {
+      return false;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.includes(option);
+    }
+    
+    return filter.value === option;
+  }
+
+  // Handle base filter changes
+  onBaseFilterChange(filter: any): void {
+    console.log('Base filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle drilldown filter changes
+  onDrilldownFilterChange(filter: any): void {
+    console.log('Drilldown filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle layer filter changes
+  onLayerFilterChange(filter: any): void {
+    console.log('Layer filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle multiselect changes
+  onMultiSelectChange(filter: any, option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filter.value as array if it's not already
+    if (!Array.isArray(filter.value)) {
+      filter.value = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!filter.value.includes(option)) {
+        filter.value.push(option);
+      }
+    } else {
+      // Remove option from array
+      filter.value = filter.value.filter((item: string) => item !== option);
+    }
+    
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle date range changes
+  onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
+    filter.value = dateRange;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle toggle changes
+  onToggleChange(filter: any, checked: boolean): void {
+    filter.value = checked;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Toggle multiselect dropdown visibility
+  toggleMultiselect(filter: any, context: string): void {
+    const filterId = `${context}-${filter.field}`;
+    if (this.isMultiselectOpen(filter, context)) {
+      this.openMultiselects.delete(filterId);
+    } else {
+      // Close all other multiselects first
+      this.openMultiselects.clear();
+      this.openMultiselects.set(filterId, context);
+      
+      // Add document click handler to close dropdown when clicking outside
+      this.addDocumentClickHandler();
+    }
+  }
+
+  // Add document click handler to close dropdowns when clicking outside
+  private addDocumentClickHandler(): void {
+    if (!this.documentClickHandler) {
+      this.documentClickHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        // Check if click is outside any multiselect dropdown
+        if (!target.closest('.multiselect-container')) {
+          this.openMultiselects.clear();
+          this.removeDocumentClickHandler();
+        }
+      };
+      
+      // Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
+      setTimeout(() => {
+        document.addEventListener('click', this.documentClickHandler!);
+      }, 0);
+    }
+  }
+
+  // Remove document click handler
+  private removeDocumentClickHandler(): void {
+    if (this.documentClickHandler) {
+      document.removeEventListener('click', this.documentClickHandler);
+      this.documentClickHandler = null;
+    }
+  }
+
+  // Check if multiselect dropdown is open
+  isMultiselectOpen(filter: any, context: string): boolean {
+    const filterId = `${context}-${filter.field}`;
+    return this.openMultiselects.has(filterId);
+  }
+
+  // Get count of selected options for a multiselect filter
+  getSelectedOptionsCount(filter: any): number {
+    if (!filter.value) {
+      return 0;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.length;
+    }
+    
+    return 0;
+  }
+
+  // Clear all filters
+  clearAllFilters(): void {
+    // Clear base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.type === 'multiselect') {
+              filter.value = [];
+            } else if (filter.type === 'date-range') {
+              filter.value = { start: null, end: null };
+            } else if (filter.type === 'toggle') {
+              filter.value = false;
+            } else {
+              filter.value = '';
+            }
+          });
+        }
+      });
+    }
+    
+    // Close all multiselect dropdowns
+    this.openMultiselects.clear();
+    
+    // Refresh data
+    this.fetchChartData();
  }
  
  // Public method to refresh data when filters change
@@ -243,7 +588,7 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
      
      // Log the URL that will be called
      const url = `chart/getdashjson/pie?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
-      console.log('Pie chart data URL:', url);
+      console.log('Chart data URL:', url);
      
      // Fetch data from the dashboard service with parameter field and value
      // For base level, we pass empty parameter and value, but now also pass filters
@@ -251,12 +596,8 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
        (data: any) => {
          console.log('Received pie chart data:', data);
          if (data === null) {
-            console.warn('Pie chart API returned null data. Check if the API endpoint is working correctly.');
+            console.warn('API returned null data. Check if the API endpoint is working correctly.');
            this.noDataAvailable = true;
-            this.pieChartLabels = [];
-            this.pieChartData = [];
-            // Validate and sanitize data to show default data
-            this.validateChartData();
            // Reset flag after fetching
            this.isFetchingData = false;
            return;
@@ -264,50 +605,57 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
          
          // Handle the actual data structure returned by the API
          if (data && data.chartLabels && data.chartData) {
-            // For pie charts, we need to extract the data differently
-            // The first dataset's data array contains the values for the pie chart
+            // Backend has already filtered the data, just display it
            this.noDataAvailable = data.chartLabels.length === 0;
-            this.pieChartLabels = data.chartLabels || [];
-            if (data.chartData && data.chartData.length > 0) {
-              this.pieChartData = data.chartData[0].data.map(value => {
-                // Convert to number if it's not already
-                const numValue = Number(value);
-                return isNaN(numValue) ? 0 : numValue;
-              });
+            this.pieChartLabels = data.chartLabels;
+            
+            // Extract the actual data values from the chartData array
+            // chartData is an array with one object containing the data
+            if (data.chartData.length > 0 && data.chartData[0].data) {
+              this.pieChartData = data.chartData[0].data;
            } else {
              this.pieChartData = [];
            }
-            // Ensure labels and data arrays have the same length
-            this.syncLabelAndDataArrays();
-            // Validate and sanitize data
-            this.validateChartData();
+            
            // Trigger change detection
+            this.pieChartLabels = [...this.pieChartLabels];
            this.pieChartData = [...this.pieChartData];
+            this.pieChartDatasets = [
+              {
+                data: this.pieChartData,
+                label: 'Dataset 1'
+              }
+            ];
            console.log('Updated pie chart with data:', { labels: this.pieChartLabels, data: this.pieChartData });
-          } else if (data && data.labels && data.data) {
-            // Handle the original expected format as fallback
+          } else if (data && data.labels && data.datasets) {
+            // Backend has already filtered the data, just display it
            this.noDataAvailable = data.labels.length === 0;
-            this.pieChartLabels = data.labels || [];
-            this.pieChartData = data.data.map(value => {
-              // Convert to number if it's not already
-              const numValue = Number(value);
-              return isNaN(numValue) ? 0 : numValue;
-            });
-            // Ensure labels and data arrays have the same length
-            this.syncLabelAndDataArrays();
-            // Validate and sanitize data
-            this.validateChartData();
+            this.pieChartLabels = data.labels;
+            this.pieChartData = data.datasets[0]?.data || [];
            // Trigger change detection
+            this.pieChartLabels = [...this.pieChartLabels];
            this.pieChartData = [...this.pieChartData];
+            this.pieChartDatasets = [
+              {
+                data: this.pieChartData,
+                label: 'Dataset 1'
+              }
+            ];
            console.log('Updated pie chart with legacy data format:', { labels: this.pieChartLabels, data: this.pieChartData });
          } else {
-            console.warn('Pie chart received data does not have expected structure', data);
-            // Reset to default data
+            console.warn('Received data does not have expected structure', data);
            this.noDataAvailable = true;
-            this.pieChartLabels = [];
-            this.pieChartData = [];
-            // Validate and sanitize data to show default data
-            this.validateChartData();
+            // Keep default data if no data is available
+            if (this.pieChartLabels.length === 0 && this.pieChartData.length === 0) {
+              this.pieChartLabels = ['Category A', 'Category B', 'Category C'];
+              this.pieChartData = [30, 50, 20];
+              this.pieChartDatasets = [
+                {
+                  data: this.pieChartData,
+                  label: 'Dataset 1'
+                }
+              ];
+            }
          }
          // Reset flag after fetching
          this.isFetchingData = false;
@@ -315,23 +663,13 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
        (error) => {
          console.error('Error fetching pie chart data:', error);
          this.noDataAvailable = true;
-          this.pieChartLabels = [];
-          this.pieChartData = [];
-          // Validate and sanitize data to show default data
-          this.validateChartData();
          // Reset flag after fetching
          this.isFetchingData = false;
        }
      );
    } else {
-      console.log('Missing required data for pie chart, showing default data:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
-      // Don't set noDataAvailable to true when there's no required data
-      // This allows static data to be displayed
-      this.noDataAvailable = false;
-      // Validate the chart data to ensure we have some data to display
-      this.validateChartData();
-      // Force a redraw to ensure the chart displays
-      this.pieChartData = [...this.pieChartData];
+      console.log('Missing required data for chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
+      this.noDataAvailable = true;
      // Reset flag after fetching
      this.isFetchingData = false;
    }
@@ -360,8 +698,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
      } else {
        console.warn('Invalid drilldown layer index:', layerIndex);
        this.noDataAvailable = true;
-        this.pieChartLabels = [];
-        this.pieChartData = [];
        return;
      }
    }
@@ -372,8 +708,6 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
    if (!drilldownConfig || !drilldownConfig.apiUrl || !drilldownConfig.xAxis || !drilldownConfig.yAxis) {
      console.warn('Missing drilldown configuration for level:', this.currentDrilldownLevel);
      this.noDataAvailable = true;
-      this.pieChartLabels = [];
-      this.pieChartData = [];
      return;
    }
    
@@ -470,64 +804,57 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
        if (data === null) {
          console.warn('Drilldown API returned null data. Check if the API endpoint is working correctly.');
          this.noDataAvailable = true;
-          this.pieChartLabels = [];
-          this.pieChartData = [];
          return;
        }
        
        // Handle the actual data structure returned by the API
        if (data && data.chartLabels && data.chartData) {
-          // For pie charts, we need to extract the data differently
-          // The first dataset's data array contains the values for the pie chart
+          // Backend has already filtered the data, just display it
          this.noDataAvailable = data.chartLabels.length === 0;
-          this.pieChartLabels = data.chartLabels || [];
-          if (data.chartData && data.chartData.length > 0) {
-            this.pieChartData = data.chartData[0].data.map(value => {
-              // Convert to number if it's not already
-              const numValue = Number(value);
-              return isNaN(numValue) ? 0 : numValue;
-            });
+          this.pieChartLabels = data.chartLabels;
+          
+          // Extract the actual data values from the chartData array
+          // chartData is an array with one object containing the data
+          if (data.chartData.length > 0 && data.chartData[0].data) {
+            this.pieChartData = data.chartData[0].data;
          } else {
            this.pieChartData = [];
          }
-          // Ensure labels and data arrays have the same length
-          this.syncLabelAndDataArrays();
-          // Validate and sanitize data
-          this.validateChartData();
+          
          // Trigger change detection
+          this.pieChartLabels = [...this.pieChartLabels];
          this.pieChartData = [...this.pieChartData];
+          this.pieChartDatasets = [
+            {
+              data: this.pieChartData,
+              label: 'Dataset 1'
+            }
+          ];
          console.log('Updated pie chart with drilldown data:', { labels: this.pieChartLabels, data: this.pieChartData });
-        } else if (data && data.labels && data.data) {
-          // Handle the original expected format as fallback
+        } else if (data && data.labels && data.datasets) {
+          // Backend has already filtered the data, just display it
          this.noDataAvailable = data.labels.length === 0;
-          this.pieChartLabels = data.labels || [];
-          this.pieChartData = data.data.map(value => {
-            // Convert to number if it's not already
-            const numValue = Number(value);
-            return isNaN(numValue) ? 0 : numValue;
-          });
-          // Ensure labels and data arrays have the same length
-          this.syncLabelAndDataArrays();
-          // Validate and sanitize data
-          this.validateChartData();
+          this.pieChartLabels = data.labels;
+          this.pieChartData = data.datasets[0]?.data || [];
          // Trigger change detection
+          this.pieChartLabels = [...this.pieChartLabels];
          this.pieChartData = [...this.pieChartData];
+          this.pieChartDatasets = [
+            {
+              data: this.pieChartData,
+              label: 'Dataset 1'
+            }
+          ];
          console.log('Updated pie chart with drilldown legacy data format:', { labels: this.pieChartLabels, data: this.pieChartData });
        } else {
          console.warn('Drilldown received data does not have expected structure', data);
          this.noDataAvailable = true;
-          this.pieChartLabels = [];
-          this.pieChartData = [];
-          // Validate and sanitize data
-          this.validateChartData();
+          // Keep current data if no data is available
        }
      },
      (error) => {
        console.error('Error fetching drilldown data:', error);
        this.noDataAvailable = true;
-        this.pieChartLabels = [];
-        this.pieChartData = [];
-        // Keep current data in case of error
      }
    );
  }
@@ -588,84 +915,54 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
    }
  }

-  /**
-   * Get color for legend item
-   * @param index Index of the legend item
-   */
-  public getLegendColor(index: number): string {
-    return this.chartColors[index % this.chartColors.length];
+  // Validate chart data to ensure labels and data arrays have the same length
+  private validateChartData(): void {
+    if (this.pieChartLabels && this.pieChartData) {
+      // For pie charts, we need to ensure labels and data arrays have the same length
+      const labelCount = this.pieChartLabels.length;
+      const dataCount = this.pieChartData.length;
+      
+      if (labelCount !== dataCount) {
+        console.warn('Pie chart labels and data arrays have different lengths:', { labels: labelCount, data: dataCount });
+        // Pad or truncate data array to match label count
+        if (dataCount < labelCount) {
+          // Pad with zeros
+          while (this.pieChartData.length < labelCount) {
+            this.pieChartData.push(0);
+          }
+        } else if (dataCount > labelCount) {
+          // Truncate data array
+          this.pieChartData = this.pieChartData.slice(0, labelCount);
+        }
+      }
+    }
  }

-  /**
-   * Ensure labels and data arrays have the same length
-   */
-  private syncLabelAndDataArrays(): void {
-    // Ensure we have matching arrays
-    if (this.pieChartLabels.length !== this.pieChartData.length) {
-      const maxLength = Math.max(this.pieChartLabels.length, this.pieChartData.length);
-      while (this.pieChartLabels.length < maxLength) {
-        this.pieChartLabels.push(`Label ${this.pieChartLabels.length + 1}`);
-      }
-      while (this.pieChartData.length < maxLength) {
-        this.pieChartData.push(0);
-      }
-    }
+  // Get legend color for a specific index
+  getLegendColor(index: number): string {
+    return this.chartColors[index % this.chartColors.length];
  }
  
-  /**
-   * Validate and sanitize chart data
-   */
-  private validateChartData(): void {
-    console.log('Validating chart data:', { labels: this.pieChartLabels, data: this.pieChartData });
-    
-    // Ensure we have valid arrays
-    if (!Array.isArray(this.pieChartLabels)) {
-      this.pieChartLabels = [];
+  // Method to determine if chart should be displayed
+  shouldShowChart(): boolean {
+    // Show chart if we have data
+    if (this.pieChartLabels.length > 0 && this.pieChartData.length > 0) {
+      return true;
    }
    
-    if (!Array.isArray(this.pieChartData)) {
-      this.pieChartData = [];
+    // Show chart if we're still fetching data
+    if (this.isFetchingData) {
+      return true;
    }
    
-    // Ensure we have some data to display
-    if (this.pieChartLabels.length === 0 && this.pieChartData.length === 0) {
-      // Add default data to ensure chart visibility
-      this.pieChartLabels = ['Category A', 'Category B', 'Category C'];
-      this.pieChartData = [30, 50, 20];
-      console.log('Added default data for chart display');
+    // Show chart if we have default data
+    if (this.pieChartLabels.length > 0 && this.originalPieChartLabels.length > 0) {
+      return true;
    }
    
-    // Ensure labels and data arrays have the same length
-    this.syncLabelAndDataArrays();
-    
-    // Ensure all data values are numbers
-    this.pieChartData = this.pieChartData.map(value => {
-      const numValue = Number(value);
-      return isNaN(numValue) ? 0 : numValue;
-    });
-    
-    console.log('After validation:', { labels: this.pieChartLabels, data: this.pieChartData });
+    return false;
  }
-  
-  ngAfterViewChecked() {
-    // Debugging: Log component state after view checks
-    console.log('PieChartComponent state:', {
-      labels: this.pieChartLabels,
-      data: this.pieChartData,
-      hasData: this.pieChartLabels.length > 0 && this.pieChartData.length > 0
-    });
-  }
-  
-  /**
-   * Check if chart data is valid and ready to display
-   */
-  public isChartDataValid(): boolean {
-    return this.pieChartLabels && this.pieChartData && 
-           Array.isArray(this.pieChartLabels) && Array.isArray(this.pieChartData) &&
-           this.pieChartLabels.length > 0 && this.pieChartData.length > 0 &&
-           this.pieChartLabels.length === this.pieChartData.length;
-  }
-  
+
  // events
  public chartClicked(e: any): void {
    console.log('Pie chart clicked:', e);
@@ -752,6 +1049,10 @@ export class PieChartComponent implements OnInit, OnChanges, AfterViewChecked {
  }

  public chartHovered(e: any): void {
-    console.log(e);
+    console.log('Pie chart hovered:', e);
  }
-}
+
+  ngAfterViewChecked(): void {
+    // This lifecycle hook can be used if needed for post-render operations
+  }
+}    
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/polar-chart/polar-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/polar-chart/polar-chart.component.html
@@ -1,10 +1,292 @@
-
-<div style="display: block">
-  <canvas baseChart
-    [datasets]="polarAreaChartData"
-    [labels]="polarAreaChartLabels"
-    [type]="polarAreaChartType"
-    (chartHover)="chartHovered($event)"
-   (chartClick)="chartClicked($event)">
-  </canvas>
-</div>
+<div style="display: block; height: 100%; width: 100%;">
+  <!-- Filter Controls Section -->
+  <div class="filter-section" *ngIf="hasActiveFilters()">
+    <!-- Base Filters -->
+    <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
+      <h4>Base Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of baseFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onBaseFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onBaseFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'base-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Drilldown Filters -->
+    <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+      <h4>Drilldown Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of drilldownFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onDrilldownFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onDrilldownFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'drilldown-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Layer Filters -->
+    <div class="filter-group" *ngIf="hasActiveLayerFilters()">
+      <h4>Layer Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onLayerFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onLayerFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'layer-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Clear Filters Button -->
+    <div class="filter-actions">
+      <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
+    </div>
+  </div>
+  
+  <!-- Header row with chart title and drilldown navigation -->
+  <div class="clr-row header-row">
+    <div class="clr-col-6">
+      <h3 class="chart-title">{{charttitle || 'Polar Chart'}}</h3>
+    </div>
+    <div class="clr-col-6" style="text-align: right;">
+      <!-- Add drilldown navigation controls -->
+      <button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
+        <cds-icon shape="arrow" direction="left"></cds-icon>
+        Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
+      </button>
+    </div>
+  </div>
+  
+  <!-- Show current drilldown level -->
+  <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
+    <div class="clr-col-12">
+      <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
+        <div class="alert-items">
+          <div class="alert-item static">
+            <div class="alert-icon-wrapper">
+              <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
+            </div>
+            <span class="alert-text">
+              Drilldown Level: {{currentDrilldownLevel}} 
+              <span *ngIf="drilldownStack.length > 0">
+                (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <div style="position: relative; height: calc(100% - 80px); padding: 0 10px 30px 10px;">
+    <canvas baseChart
+      [datasets]="polarAreaChartData"
+      [labels]="polarAreaChartLabels"
+      [options]="polarAreaChartOptions"
+      [type]="polarAreaChartType"
+      (chartHover)="chartHovered($event)"
+     (chartClick)="chartClicked($event)">
+    </canvas>
+  </div>
+</div>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/polar-chart/polar-chart.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/polar-chart/polar-chart.component.scss
@@ -1,18 +1,192 @@
-// Polar Chart Component Styles
-div[style*="display: block"] {
+.filter-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+}
+
+.filter-group {
+  margin-bottom: 15px;
+  
+  h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-weight: 600;
+  }
+}
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-item {
+  flex: 1 1 300px;
+  min-width: 250px;
+  padding: 10px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.filter-label {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #555;
+  font-size: 14px;
+}
+
+.filter-input {
+  width: 100%;
+  
+  .filter-text-input,
+  .filter-select,
+  .filter-date {
+    width: 100%;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .filter-select {
+    height: 34px;
+  }
+}
+
+.multiselect-container {
  position: relative;
-  width: 100%;
-  height: 100%;
 }

-canvas {
-  max-width: 100%;
-  max-height: 100%;
+.multiselect-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  min-height: 34px;
+  
+  .multiselect-label {
+    flex: 1;
+    font-size: 14px;
+  }
+  
+  .multiselect-value {
+    color: #666;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+  
+  .dropdown-icon {
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover {
+    border-color: #999;
+  }
 }

-// Ensure the chart container has proper sizing
-:host {
-  display: block;
-  width: 100%;
-  height: 100%;
+.multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  
+  .checkbox-group {
+    padding: 8px;
+    
+    .checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      
+      .checkbox-label {
+        margin: 0;
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.date-range {
+  .date-input-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .date-separator {
+    margin: 0 5px;
+    color: #777;
+  }
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .toggle-label {
+    margin: 0;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+
+.filter-actions {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+  
+  .btn {
+    font-size: 13px;
+  }
+}
+
+// New header row styling
+.header-row {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  
+  .chart-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .filter-controls {
+    flex-direction: column;
+  }
+  
+  .filter-item {
+    min-width: 100%;
+  }
+  
+  .header-row {
+    .chart-title {
+      font-size: 16px;
+    }
+  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/polar-chart/polar-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/polar-chart/polar-chart.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+import { FilterService } from '../../common-filter/filter.service';
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-polar-chart',
@@ -33,9 +35,20 @@ export class PolarChartComponent implements OnInit, OnChanges {
  // Multi-layer drilldown configuration inputs
  @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations

-  constructor(private dashboardService: Dashboard3Service) { }
+  constructor(
+    private dashboardService: Dashboard3Service,
+    private filterService: FilterService
+  ) { }

  ngOnInit(): void {
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );
+    
    // Initialize with default data
    this.fetchChartData();
  }
@@ -43,6 +56,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    console.log('PolarChartComponent input changes:', changes);
    
+    // Initialize filter values if they haven't been initialized yet
+    if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
+      this.initializeFilterValues();
+      this.filtersInitialized = true;
+    }
+    
    // Check if any of the key properties have changed
    const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
    const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
@@ -71,6 +90,32 @@ export class PolarChartComponent implements OnInit, OnChanges {
    { data: [ 300, 500, 100, 40, 120 ], label: 'Series 1'}
  ];

+  public polarAreaChartOptions: any = {
+    responsive: true,
+    maintainAspectRatio: false,
+    layout: {
+      padding: {
+        left: 10,
+        right: 10,
+        top: 10,
+        bottom: 30
+      }
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'top'
+      }
+    },
+    scales: {
+      r: {
+        ticks: {
+          backdropColor: 'rgba(0, 0, 0, 0)'
+        }
+      }
+    }
+  };
+
  public polarAreaChartType: string = 'polarArea';
  
  // Multi-layer drilldown state tracking
@@ -85,6 +130,324 @@ export class PolarChartComponent implements OnInit, OnChanges {
  // Flag to prevent infinite loops
  private isFetchingData: boolean = false;
  
+  // Subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+
+  // Add properties for filter functionality
+  private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
+  private documentClickHandler: ((event: MouseEvent) => void) | null = null;
+  private filtersInitialized: boolean = false;
+  
+  // Initialize filter values with proper default values based on type
+  private initializeFilterValues(): void {
+    console.log('Initializing filter values');
+    
+    // Initialize base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.value === undefined || filter.value === null) {
+              switch (filter.type) {
+                case 'multiselect':
+                  filter.value = [];
+                  break;
+                case 'date-range':
+                  filter.value = { start: null, end: null };
+                  break;
+                case 'toggle':
+                  filter.value = false;
+                  break;
+                default:
+                  filter.value = '';
+              }
+            }
+          });
+        }
+      });
+    }
+    
+    console.log('Filter values initialized:', {
+      baseFilters: this.baseFilters,
+      drilldownFilters: this.drilldownFilters,
+      drilldownLayers: this.drilldownLayers
+    });
+  }
+
+  // Check if there are active filters
+  hasActiveFilters(): boolean {
+    return (this.baseFilters && this.baseFilters.length > 0) || 
+           (this.drilldownFilters && this.drilldownFilters.length > 0) || 
+           this.hasActiveLayerFilters();
+  }
+
+  // Check if there are active layer filters for current drilldown level
+  hasActiveLayerFilters(): boolean {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      return layerIndex < this.drilldownLayers.length && 
+             this.drilldownLayers[layerIndex].filters && 
+             this.drilldownLayers[layerIndex].filters.length > 0;
+    }
+    return false;
+  }
+
+  // Get active layer filters for current drilldown level
+  getActiveLayerFilters(): any[] {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      if (layerIndex < this.drilldownLayers.length && 
+          this.drilldownLayers[layerIndex].filters) {
+        return this.drilldownLayers[layerIndex].filters;
+      }
+    }
+    return [];
+  }
+
+  // Get filter options for dropdown/multiselect filters
+  getFilterOptions(filter: any): string[] {
+    if (filter.options) {
+      if (Array.isArray(filter.options)) {
+        return filter.options;
+      } else if (typeof filter.options === 'string') {
+        return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
+      }
+    }
+    return [];
+  }
+
+  // Check if an option is selected for multiselect filters
+  isOptionSelected(filter: any, option: string): boolean {
+    if (!filter.value) {
+      return false;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.includes(option);
+    }
+    
+    return filter.value === option;
+  }
+
+  // Handle base filter changes
+  onBaseFilterChange(filter: any): void {
+    console.log('Base filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle drilldown filter changes
+  onDrilldownFilterChange(filter: any): void {
+    console.log('Drilldown filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle layer filter changes
+  onLayerFilterChange(filter: any): void {
+    console.log('Layer filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle multiselect changes
+  onMultiSelectChange(filter: any, option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filter.value as array if it's not already
+    if (!Array.isArray(filter.value)) {
+      filter.value = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!filter.value.includes(option)) {
+        filter.value.push(option);
+      }
+    } else {
+      // Remove option from array
+      filter.value = filter.value.filter((item: string) => item !== option);
+    }
+    
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle date range changes
+  onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
+    filter.value = dateRange;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle toggle changes
+  onToggleChange(filter: any, checked: boolean): void {
+    filter.value = checked;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Toggle multiselect dropdown visibility
+  toggleMultiselect(filter: any, context: string): void {
+    const filterId = `${context}-${filter.field}`;
+    if (this.isMultiselectOpen(filter, context)) {
+      this.openMultiselects.delete(filterId);
+    } else {
+      // Close all other multiselects first
+      this.openMultiselects.clear();
+      this.openMultiselects.set(filterId, context);
+      
+      // Add document click handler to close dropdown when clicking outside
+      this.addDocumentClickHandler();
+    }
+  }
+
+  // Add document click handler to close dropdowns when clicking outside
+  private addDocumentClickHandler(): void {
+    if (!this.documentClickHandler) {
+      this.documentClickHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        // Check if click is outside any multiselect dropdown
+        if (!target.closest('.multiselect-container')) {
+          this.openMultiselects.clear();
+          this.removeDocumentClickHandler();
+        }
+      };
+      
+      // Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
+      setTimeout(() => {
+        document.addEventListener('click', this.documentClickHandler!);
+      }, 0);
+    }
+  }
+
+  // Remove document click handler
+  private removeDocumentClickHandler(): void {
+    if (this.documentClickHandler) {
+      document.removeEventListener('click', this.documentClickHandler);
+      this.documentClickHandler = null;
+    }
+  }
+
+  // Check if multiselect dropdown is open
+  isMultiselectOpen(filter: any, context: string): boolean {
+    const filterId = `${context}-${filter.field}`;
+    return this.openMultiselects.has(filterId);
+  }
+
+  // Get count of selected options for a multiselect filter
+  getSelectedOptionsCount(filter: any): number {
+    if (!filter.value) {
+      return 0;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.length;
+    }
+    
+    return 0;
+  }
+
+  // Clear all filters
+  clearAllFilters(): void {
+    // Clear base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.type === 'multiselect') {
+              filter.value = [];
+            } else if (filter.type === 'date-range') {
+              filter.value = { start: null, end: null };
+            } else if (filter.type === 'toggle') {
+              filter.value = false;
+            } else {
+              filter.value = '';
+            }
+          });
+        }
+      });
+    }
+    
+    // Close all multiselect dropdowns
+    this.openMultiselects.clear();
+    
+    // Refresh data
+    this.fetchChartData();
+  }
+  
  fetchChartData(): void {
    // Set flag to prevent recursive calls
    this.isFetchingData = true;
@@ -117,7 +480,49 @@ export class PolarChartComponent implements OnInit, OnChanges {
          filterParams = JSON.stringify(filterObj);
        }
      }
-      console.log('Base filter parameters:', filterParams);
+      
+      // Add common filters to filter parameters
+      const commonFilters = this.filterService.getFilterValues();
+      console.log('Common filters from service:', commonFilters);
+      
+      if (Object.keys(commonFilters).length > 0) {
+        // Merge common filters with base filters
+        const mergedFilterObj = {};
+        
+        // Add base filters first
+        if (filterParams) {
+          try {
+            const baseFilterObj = JSON.parse(filterParams);
+            Object.assign(mergedFilterObj, baseFilterObj);
+          } catch (e) {
+            console.warn('Failed to parse base filter parameters:', e);
+          }
+        }
+        
+        // Add common filters using the field name as the key, not the filter id
+        Object.keys(commonFilters).forEach(filterId => {
+          const filterValue = commonFilters[filterId];
+          // Find the filter definition to get the field name
+          const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+          if (filterDef && filterDef.field) {
+            const fieldName = filterDef.field;
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[fieldName] = filterValue;
+            }
+          } else {
+            // Fallback to using filterId as field name if no field is defined
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[filterId] = filterValue;
+            }
+          }
+        });
+        
+        if (Object.keys(mergedFilterObj).length > 0) {
+          filterParams = JSON.stringify(mergedFilterObj);
+        }
+      }
+      
+      console.log('Final filter parameters:', filterParams);
      
      // Log the URL that will be called
      const url = `chart/getdashjson/polar?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
@@ -132,7 +537,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
            console.warn('Polar chart API returned null data. Check if the API endpoint is working correctly.');
            this.noDataAvailable = true;
            this.polarAreaChartLabels = [];
-            this.polarAreaChartData = [];
+            this.polarAreaChartData = [
+            {
+              data: [],
+              label: 'Dataset 1'
+            }
+          ];
            // Reset flag after fetching
            this.isFetchingData = false;
            return;
@@ -145,32 +555,54 @@ export class PolarChartComponent implements OnInit, OnChanges {
            this.noDataAvailable = data.chartLabels.length === 0;
            this.polarAreaChartLabels = data.chartLabels;
            if (data.chartData && data.chartData.length > 0) {
-              this.polarAreaChartData = data.chartData[0].data.map(value => {
+              // Convert the data to the expected format for polar area charts
+              const chartValues = data.chartData[0].data.map(value => {
                // Convert to number if it's not already
                return isNaN(Number(value)) ? 0 : Number(value);
              });
+              // Assign data in the correct format (array of objects with data property)
+              this.polarAreaChartData = [
+                {
+                  data: chartValues,
+                  label: data.chartData[0].label || 'Dataset 1'
+                }
+              ];
            } else {
-              this.polarAreaChartData = [];
+              this.polarAreaChartData = [
+                {
+                  data: [],
+                  label: 'Dataset 1'
+                }
+              ];
            }
-            // Trigger change detection
-            this.polarAreaChartData = [...this.polarAreaChartData];
            console.log('Updated polar chart with data:', { labels: this.polarAreaChartLabels, data: this.polarAreaChartData });
          } else if (data && data.labels && data.data) {
            // Handle the original expected format as fallback
            this.noDataAvailable = data.labels.length === 0;
            this.polarAreaChartLabels = data.labels;
-            this.polarAreaChartData = data.data.map(value => {
+            // Convert the data to the expected format for polar area charts
+            const chartValues = data.data.map(value => {
              // Convert to number if it's not already
              return isNaN(Number(value)) ? 0 : Number(value);
            });
-            // Trigger change detection
-            this.polarAreaChartData = [...this.polarAreaChartData];
+            // Assign data in the correct format (array of objects with data property)
+            this.polarAreaChartData = [
+              {
+                data: chartValues,
+                label: 'Dataset 1'
+              }
+            ];
            console.log('Updated polar chart with legacy data format:', { labels: this.polarAreaChartLabels, data: this.polarAreaChartData });
          } else {
            console.warn('Polar chart received data does not have expected structure', data);
            this.noDataAvailable = true;
            this.polarAreaChartLabels = [];
-            this.polarAreaChartData = [];
+            this.polarAreaChartData = [
+              {
+                data: [],
+                label: 'Dataset 1'
+              }
+            ];
          }
          // Reset flag after fetching
          this.isFetchingData = false;
@@ -179,7 +611,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
          console.error('Error fetching polar chart data:', error);
          this.noDataAvailable = true;
          this.polarAreaChartLabels = [];
-          this.polarAreaChartData = [];
+          this.polarAreaChartData = [
+            {
+              data: [],
+              label: 'Dataset 1'
+            }
+          ];
          // Reset flag after fetching
          this.isFetchingData = false;
          // Keep default data in case of error
@@ -189,7 +626,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
      console.log('Missing required data for polar chart:', { table: this.table, xAxis: this.xAxis, yAxis: this.yAxis, connection: this.connection });
      this.noDataAvailable = true;
      this.polarAreaChartLabels = [];
-      this.polarAreaChartData = [];
+      this.polarAreaChartData = [
+            {
+              data: [],
+              label: 'Dataset 1'
+            }
+          ];
      // Reset flag after fetching
      this.isFetchingData = false;
    }
@@ -219,7 +661,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
        console.warn('Invalid drilldown layer index:', layerIndex);
        this.noDataAvailable = true;
        this.polarAreaChartLabels = [];
-        this.polarAreaChartData = [];
+        this.polarAreaChartData = [
+            {
+              data: [],
+              label: 'Dataset 1'
+            }
+          ];
        return;
      }
    }
@@ -231,7 +678,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
      console.warn('Missing drilldown configuration for level:', this.currentDrilldownLevel);
      this.noDataAvailable = true;
      this.polarAreaChartLabels = [];
-      this.polarAreaChartData = [];
+      this.polarAreaChartData = [
+            {
+              data: [],
+              label: 'Dataset 1'
+            }
+          ];
      return;
    }
    
@@ -287,6 +739,35 @@ export class PolarChartComponent implements OnInit, OnChanges {
      }
    }
    
+    // Add common filters to drilldown filter parameters
+    const commonFilters = this.filterService.getFilterValues();
+    if (Object.keys(commonFilters).length > 0) {
+      // Merge common filters with drilldown filters
+      const mergedFilterObj = {};
+      
+      // Add drilldown filters first
+      if (filterParams) {
+        try {
+          const drilldownFilterObj = JSON.parse(filterParams);
+          Object.assign(mergedFilterObj, drilldownFilterObj);
+        } catch (e) {
+          console.warn('Failed to parse drilldown filter parameters:', e);
+        }
+      }
+      
+      // Add common filters
+      Object.keys(commonFilters).forEach(key => {
+        const value = commonFilters[key];
+        if (value !== undefined && value !== null && value !== '') {
+          mergedFilterObj[key] = value;
+        }
+      });
+      
+      if (Object.keys(mergedFilterObj).length > 0) {
+        filterParams = JSON.stringify(mergedFilterObj);
+      }
+    }
+    
    // Log the URL that will be called
    const url = `chart/getdashjson/polar?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
    console.log('Drilldown data URL:', url);
@@ -300,23 +781,40 @@ export class PolarChartComponent implements OnInit, OnChanges {
          console.warn('Drilldown API returned null data. Check if the API endpoint is working correctly.');
          this.noDataAvailable = true;
          this.polarAreaChartLabels = [];
-          this.polarAreaChartData = [];
+          this.polarAreaChartData = [
+            {
+              data: [],
+              label: 'Dataset 1'
+            }
+          ];
          return;
        }
        
        // Handle the actual data structure returned by the API
        if (data && data.chartLabels && data.chartData) {
          // For polar charts, we need to extract the data differently
-          // The first dataset's data array contains the values for the polar chart
          this.noDataAvailable = data.chartLabels.length === 0;
          this.polarAreaChartLabels = data.chartLabels;
          if (data.chartData && data.chartData.length > 0) {
-            this.polarAreaChartData = data.chartData[0].data.map(value => {
+            // Convert the data to the expected format for polar area charts
+            const chartValues = data.chartData[0].data.map(value => {
              // Convert to number if it's not already
              return isNaN(Number(value)) ? 0 : Number(value);
            });
+            // Assign data in the correct format (array of objects with data property)
+            this.polarAreaChartData = [
+              {
+                data: chartValues,
+                label: data.chartData[0].label || 'Dataset 1'
+              }
+            ];
          } else {
-            this.polarAreaChartData = [];
+            this.polarAreaChartData = [
+            {
+              data: [],
+              label: 'Dataset 1'
+            }
+          ];
          }
          // Trigger change detection
          this.polarAreaChartData = [...this.polarAreaChartData];
@@ -325,10 +823,18 @@ export class PolarChartComponent implements OnInit, OnChanges {
          // Handle the original expected format as fallback
          this.noDataAvailable = data.labels.length === 0;
          this.polarAreaChartLabels = data.labels;
-          this.polarAreaChartData = data.data.map(value => {
+          // Convert the data to the expected format for polar area charts
+          const chartValues = data.data.map(value => {
            // Convert to number if it's not already
            return isNaN(Number(value)) ? 0 : Number(value);
          });
+          // Assign data in the correct format (array of objects with data property)
+          this.polarAreaChartData = [
+            {
+              data: chartValues,
+              label: 'Dataset 1'
+            }
+          ];
          // Trigger change detection
          this.polarAreaChartData = [...this.polarAreaChartData];
          console.log('Updated polar chart with drilldown legacy data format:', { labels: this.polarAreaChartLabels, data: this.polarAreaChartData });
@@ -336,14 +842,24 @@ export class PolarChartComponent implements OnInit, OnChanges {
          console.warn('Drilldown received data does not have expected structure', data);
          this.noDataAvailable = true;
          this.polarAreaChartLabels = [];
-          this.polarAreaChartData = [];
+          this.polarAreaChartData = [
+            {
+              data: [],
+              label: 'Dataset 1'
+            }
+          ];
        }
      },
      (error) => {
        console.error('Error fetching drilldown data:', error);
        this.noDataAvailable = true;
        this.polarAreaChartLabels = [];
-        this.polarAreaChartData = [];
+        this.polarAreaChartData = [
+            {
+              data: [],
+              label: 'Dataset 1'
+            }
+          ];
        // Keep current data in case of error
      }
    );
@@ -417,13 +933,13 @@ export class PolarChartComponent implements OnInit, OnChanges {
      // Get the label of the clicked element
      const clickedLabel = this.polarAreaChartLabels[clickedIndex];
      
-      console.log('Clicked on polar area:', { index: clickedIndex, label: clickedLabel });
+      console.log('Clicked on polar point:', { index: clickedIndex, label: clickedLabel });
      
      // If we're not at the base level, store original data
      if (this.currentDrilldownLevel === 0) {
        // Store original data before entering drilldown mode
        this.originalPolarAreaChartLabels = [...this.polarAreaChartLabels];
-        this.originalPolarAreaChartData = [...this.polarAreaChartData];
+        this.originalPolarAreaChartData = JSON.parse(JSON.stringify(this.polarAreaChartData));
        console.log('Stored original data for drilldown');
      }
      
@@ -491,6 +1007,12 @@ export class PolarChartComponent implements OnInit, OnChanges {
  }

  public chartHovered(e: any): void {
-    console.log(e);
+    console.log('Polar chart hovered:', e);
  }
-}
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+    // Clean up document click handler
+    this.removeDocumentClickHandler();
+  }
+}      
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/radar-chart/radar-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/radar-chart/radar-chart.component.html
@@ -1,13 +1,282 @@
-<div style="display: block">
-  <!-- Drilldown mode indicator -->
-  <div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
-    <span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
-    <button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
-      Back to Level {{currentDrilldownLevel - 1}}
-    </button>
-    <button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
-      Back to Main View
-    </button>
+<div style="display: block; height: 100%; width: 100%;">
+  <!-- Filter Controls Section -->
+  <div class="filter-section" *ngIf="hasActiveFilters()">
+    <!-- Base Filters -->
+    <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
+      <h4>Base Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of baseFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onBaseFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onBaseFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'base-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Drilldown Filters -->
+    <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+      <h4>Drilldown Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of drilldownFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onDrilldownFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onDrilldownFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'drilldown-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Layer Filters -->
+    <div class="filter-group" *ngIf="hasActiveLayerFilters()">
+      <h4>Layer Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onLayerFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onLayerFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'layer-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Clear Filters Button -->
+    <div class="filter-actions">
+      <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
+    </div>
+  </div>
+  
+  <!-- Header row with chart title and drilldown navigation -->
+  <div class="clr-row header-row">
+    <div class="clr-col-6">
+      <h3 class="chart-title">{{charttitle || 'Radar Chart'}}</h3>
+    </div>
+    <div class="clr-col-6" style="text-align: right;">
+      <!-- Add drilldown navigation controls -->
+      <button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
+        <cds-icon shape="arrow" direction="left"></cds-icon>
+        Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
+      </button>
+    </div>
+  </div>
+  
+  <!-- Show current drilldown level -->
+  <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
+    <div class="clr-col-12">
+      <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
+        <div class="alert-items">
+          <div class="alert-item static">
+            <div class="alert-icon-wrapper">
+              <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
+            </div>
+            <span class="alert-text">
+              Drilldown Level: {{currentDrilldownLevel}} 
+              <span *ngIf="drilldownStack.length > 0">
+                (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
  </div>
  
  <!-- No data message -->
@@ -16,7 +285,7 @@
  </div>
  
  <!-- Chart display -->
-  <div *ngIf="!noDataAvailable">
+  <div *ngIf="!noDataAvailable" style="position: relative; height: calc(100% - 50px);">
    <canvas baseChart
      [datasets]="radarChartData"
      [labels]="radarChartLabels"
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/radar-chart/radar-chart.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/radar-chart/radar-chart.component.scss
@@ -0,0 +1,192 @@
+.filter-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+}
+
+.filter-group {
+  margin-bottom: 15px;
+  
+  h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-weight: 600;
+  }
+}
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-item {
+  flex: 1 1 300px;
+  min-width: 250px;
+  padding: 10px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.filter-label {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #555;
+  font-size: 14px;
+}
+
+.filter-input {
+  width: 100%;
+  
+  .filter-text-input,
+  .filter-select,
+  .filter-date {
+    width: 100%;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .filter-select {
+    height: 34px;
+  }
+}
+
+.multiselect-container {
+  position: relative;
+}
+
+.multiselect-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  min-height: 34px;
+  
+  .multiselect-label {
+    flex: 1;
+    font-size: 14px;
+  }
+  
+  .multiselect-value {
+    color: #666;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+  
+  .dropdown-icon {
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover {
+    border-color: #999;
+  }
+}
+
+.multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  
+  .checkbox-group {
+    padding: 8px;
+    
+    .checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      
+      .checkbox-label {
+        margin: 0;
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.date-range {
+  .date-input-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .date-separator {
+    margin: 0 5px;
+    color: #777;
+  }
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .toggle-label {
+    margin: 0;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+
+.filter-actions {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+  
+  .btn {
+    font-size: 13px;
+  }
+}
+
+// New header row styling
+.header-row {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  
+  .chart-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .filter-controls {
+    flex-direction: column;
+  }
+  
+  .filter-item {
+    min-width: 100%;
+  }
+  
+  .header-row {
+    .chart-title {
+      font-size: 16px;
+    }
+  }
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/radar-chart/radar-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/radar-chart/radar-chart.component.ts
@@ -1,5 +1,7 @@
 import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+import { FilterService } from '../../common-filter/filter.service';
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-radar-chart',
@@ -61,16 +63,41 @@ export class RadarChartComponent implements OnInit, OnChanges {
  
  // Flag to prevent infinite loops
  private isFetchingData: boolean = false;
+  
+  // Subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];

-  constructor(private dashboardService: Dashboard3Service) { }
+  // Add properties for filter functionality
+  private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
+  private documentClickHandler: ((event: MouseEvent) => void) | null = null;
+  private filtersInitialized: boolean = false;
+
+  constructor(
+    private dashboardService: Dashboard3Service,
+    private filterService: FilterService
+  ) { }

  ngOnInit(): void {
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );
+    
    this.fetchChartData();
  }

  ngOnChanges(changes: SimpleChanges): void {
    console.log('RadarChartComponent input changes:', changes);
    
+    // Initialize filter values if they haven't been initialized yet
+    if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
+      this.initializeFilterValues();
+      this.filtersInitialized = true;
+    }
+    
    // Check if any of the key properties have changed
    const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
    const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
@@ -93,7 +120,317 @@ export class RadarChartComponent implements OnInit, OnChanges {
      this.fetchChartData();
    }
  }
+  
+  // Initialize filter values with proper default values based on type
+  private initializeFilterValues(): void {
+    console.log('Initializing filter values');
+    
+    // Initialize base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.value === undefined || filter.value === null) {
+              switch (filter.type) {
+                case 'multiselect':
+                  filter.value = [];
+                  break;
+                case 'date-range':
+                  filter.value = { start: null, end: null };
+                  break;
+                case 'toggle':
+                  filter.value = false;
+                  break;
+                default:
+                  filter.value = '';
+              }
+            }
+          });
+        }
+      });
+    }
+    
+    console.log('Filter values initialized:', {
+      baseFilters: this.baseFilters,
+      drilldownFilters: this.drilldownFilters,
+      drilldownLayers: this.drilldownLayers
+    });
+  }

+  // Check if there are active filters
+  hasActiveFilters(): boolean {
+    return (this.baseFilters && this.baseFilters.length > 0) || 
+           (this.drilldownFilters && this.drilldownFilters.length > 0) || 
+           this.hasActiveLayerFilters();
+  }
+
+  // Check if there are active layer filters for current drilldown level
+  hasActiveLayerFilters(): boolean {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      return layerIndex < this.drilldownLayers.length && 
+             this.drilldownLayers[layerIndex].filters && 
+             this.drilldownLayers[layerIndex].filters.length > 0;
+    }
+    return false;
+  }
+
+  // Get active layer filters for current drilldown level
+  getActiveLayerFilters(): any[] {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      if (layerIndex < this.drilldownLayers.length && 
+          this.drilldownLayers[layerIndex].filters) {
+        return this.drilldownLayers[layerIndex].filters;
+      }
+    }
+    return [];
+  }
+
+  // Get filter options for dropdown/multiselect filters
+  getFilterOptions(filter: any): string[] {
+    if (filter.options) {
+      if (Array.isArray(filter.options)) {
+        return filter.options;
+      } else if (typeof filter.options === 'string') {
+        return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
+      }
+    }
+    return [];
+  }
+
+  // Check if an option is selected for multiselect filters
+  isOptionSelected(filter: any, option: string): boolean {
+    if (!filter.value) {
+      return false;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.includes(option);
+    }
+    
+    return filter.value === option;
+  }
+
+  // Handle base filter changes
+  onBaseFilterChange(filter: any): void {
+    console.log('Base filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle drilldown filter changes
+  onDrilldownFilterChange(filter: any): void {
+    console.log('Drilldown filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle layer filter changes
+  onLayerFilterChange(filter: any): void {
+    console.log('Layer filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle multiselect changes
+  onMultiSelectChange(filter: any, option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filter.value as array if it's not already
+    if (!Array.isArray(filter.value)) {
+      filter.value = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!filter.value.includes(option)) {
+        filter.value.push(option);
+      }
+    } else {
+      // Remove option from array
+      filter.value = filter.value.filter((item: string) => item !== option);
+    }
+    
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle date range changes
+  onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
+    filter.value = dateRange;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle toggle changes
+  onToggleChange(filter: any, checked: boolean): void {
+    filter.value = checked;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Toggle multiselect dropdown visibility
+  toggleMultiselect(filter: any, context: string): void {
+    const filterId = `${context}-${filter.field}`;
+    if (this.isMultiselectOpen(filter, context)) {
+      this.openMultiselects.delete(filterId);
+    } else {
+      // Close all other multiselects first
+      this.openMultiselects.clear();
+      this.openMultiselects.set(filterId, context);
+      
+      // Add document click handler to close dropdown when clicking outside
+      this.addDocumentClickHandler();
+    }
+  }
+
+  // Add document click handler to close dropdowns when clicking outside
+  private addDocumentClickHandler(): void {
+    if (!this.documentClickHandler) {
+      this.documentClickHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        // Check if click is outside any multiselect dropdown
+        if (!target.closest('.multiselect-container')) {
+          this.openMultiselects.clear();
+          this.removeDocumentClickHandler();
+        }
+      };
+      
+      // Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
+      setTimeout(() => {
+        document.addEventListener('click', this.documentClickHandler!);
+      }, 0);
+    }
+  }
+
+  // Remove document click handler
+  private removeDocumentClickHandler(): void {
+    if (this.documentClickHandler) {
+      document.removeEventListener('click', this.documentClickHandler);
+      this.documentClickHandler = null;
+    }
+  }
+
+  // Check if multiselect dropdown is open
+  isMultiselectOpen(filter: any, context: string): boolean {
+    const filterId = `${context}-${filter.field}`;
+    return this.openMultiselects.has(filterId);
+  }
+
+  // Get count of selected options for a multiselect filter
+  getSelectedOptionsCount(filter: any): number {
+    if (!filter.value) {
+      return 0;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.length;
+    }
+    
+    return 0;
+  }
+
+  // Clear all filters
+  clearAllFilters(): void {
+    // Clear base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.type === 'multiselect') {
+              filter.value = [];
+            } else if (filter.type === 'date-range') {
+              filter.value = { start: null, end: null };
+            } else if (filter.type === 'toggle') {
+              filter.value = false;
+            } else {
+              filter.value = '';
+            }
+          });
+        }
+      });
+    }
+    
+    // Close all multiselect dropdowns
+    this.openMultiselects.clear();
+    
+    // Refresh data
+    this.fetchChartData();
+  }
+  
  fetchChartData(): void {
    // Set flag to prevent recursive calls
    this.isFetchingData = true;
@@ -126,7 +463,49 @@ export class RadarChartComponent implements OnInit, OnChanges {
          filterParams = JSON.stringify(filterObj);
        }
      }
-      console.log('Base filter parameters:', filterParams);
+      
+      // Add common filters to filter parameters
+      const commonFilters = this.filterService.getFilterValues();
+      console.log('Common filters from service:', commonFilters);
+      
+      if (Object.keys(commonFilters).length > 0) {
+        // Merge common filters with base filters
+        const mergedFilterObj = {};
+        
+        // Add base filters first
+        if (filterParams) {
+          try {
+            const baseFilterObj = JSON.parse(filterParams);
+            Object.assign(mergedFilterObj, baseFilterObj);
+          } catch (e) {
+            console.warn('Failed to parse base filter parameters:', e);
+          }
+        }
+        
+        // Add common filters using the field name as the key, not the filter id
+        Object.keys(commonFilters).forEach(filterId => {
+          const filterValue = commonFilters[filterId];
+          // Find the filter definition to get the field name
+          const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+          if (filterDef && filterDef.field) {
+            const fieldName = filterDef.field;
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[fieldName] = filterValue;
+            }
+          } else {
+            // Fallback to using filterId as field name if no field is defined
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[filterId] = filterValue;
+            }
+          }
+        });
+        
+        if (Object.keys(mergedFilterObj).length > 0) {
+          filterParams = JSON.stringify(mergedFilterObj);
+        }
+      }
+      
+      console.log('Final filter parameters:', filterParams);
      
      // Log the URL that will be called
      const url = `chart/getdashjson/radar?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
@@ -298,6 +677,35 @@ export class RadarChartComponent implements OnInit, OnChanges {
      }
    }
    
+    // Add common filters to drilldown filter parameters
+    const commonFilters = this.filterService.getFilterValues();
+    if (Object.keys(commonFilters).length > 0) {
+      // Merge common filters with drilldown filters
+      const mergedFilterObj = {};
+      
+      // Add drilldown filters first
+      if (filterParams) {
+        try {
+          const drilldownFilterObj = JSON.parse(filterParams);
+          Object.assign(mergedFilterObj, drilldownFilterObj);
+        } catch (e) {
+          console.warn('Failed to parse drilldown filter parameters:', e);
+        }
+      }
+      
+      // Add common filters
+      Object.keys(commonFilters).forEach(key => {
+        const value = commonFilters[key];
+        if (value !== undefined && value !== null && value !== '') {
+          mergedFilterObj[key] = value;
+        }
+      });
+      
+      if (Object.keys(mergedFilterObj).length > 0) {
+        filterParams = JSON.stringify(mergedFilterObj);
+      }
+    }
+    
    // Log the URL that will be called
    const url = `chart/getdashjson/radar?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
    console.log('Drilldown data URL:', url);
@@ -321,7 +729,6 @@ export class RadarChartComponent implements OnInit, OnChanges {
          this.noDataAvailable = data.chartLabels.length === 0;
          this.radarChartLabels = data.chartLabels;
          // For radar charts, we need to ensure the data is properly formatted
-          // Each dataset should have a data array with numeric values
          this.radarChartData = data.chartData.map(dataset => ({
            ...dataset,
            data: dataset.data ? dataset.data.map(value => {
@@ -358,6 +765,7 @@ export class RadarChartComponent implements OnInit, OnChanges {
        this.noDataAvailable = true;
        this.radarChartLabels = [];
        this.radarChartData = [];
+        // Keep current data in case of error
      }
    );
  }
@@ -436,7 +844,7 @@ export class RadarChartComponent implements OnInit, OnChanges {
      if (this.currentDrilldownLevel === 0) {
        // Store original data before entering drilldown mode
        this.originalRadarChartLabels = [...this.radarChartLabels];
-        this.originalRadarChartData = [...this.radarChartData];
+        this.originalRadarChartData = JSON.parse(JSON.stringify(this.radarChartData));
        console.log('Stored original data for drilldown');
      }
      
@@ -504,6 +912,12 @@ export class RadarChartComponent implements OnInit, OnChanges {
  }

  public chartHovered(e: any): void {
-    console.log(e);
+    console.log('Radar chart hovered:', e);
+  }
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+    // Clean up document click handler
+    this.removeDocumentClickHandler();
  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component.html
@@ -1,13 +1,282 @@
-<div style="display: block">
-  <!-- Drilldown mode indicator -->
-  <div *ngIf="currentDrilldownLevel > 0" style="background-color: #e0e0e0; padding: 5px; margin-bottom: 10px; border-radius: 4px; text-align: center;">
-    <span style="font-weight: bold; color: #333;">Drilldown Level: {{currentDrilldownLevel}}</span>
-    <button (click)="navigateBack()" style="margin-left: 10px; padding: 2px 8px; background-color: #007cba; color: white; border: none; border-radius: 3px; cursor: pointer;">
-      Back to Level {{currentDrilldownLevel - 1}}
-    </button>
-    <button (click)="resetToOriginalData()" style="margin-left: 10px; padding: 2px 8px; background-color: #dc3545; color: white; border: none; border-radius: 3px; cursor: pointer;">
-      Back to Main View
-    </button>
+<div style="display: block; height: 100%; width: 100%;">
+  <!-- Filter Controls Section -->
+  <div class="filter-section" *ngIf="hasActiveFilters()">
+    <!-- Base Filters -->
+    <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
+      <h4>Base Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of baseFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onBaseFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onBaseFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'base-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Drilldown Filters -->
+    <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+      <h4>Drilldown Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of drilldownFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onDrilldownFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onDrilldownFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'drilldown-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Layer Filters -->
+    <div class="filter-group" *ngIf="hasActiveLayerFilters()">
+      <h4>Layer Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onLayerFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onLayerFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'layer-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Clear Filters Button -->
+    <div class="filter-actions">
+      <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
+    </div>
+  </div>
+  
+  <!-- Header row with chart title and drilldown navigation -->
+  <div class="clr-row header-row">
+    <div class="clr-col-6">
+      <h3 class="chart-title">{{charttitle || 'Scatter Chart'}}</h3>
+    </div>
+    <div class="clr-col-6" style="text-align: right;">
+      <!-- Add drilldown navigation controls -->
+      <button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
+        <cds-icon shape="arrow" direction="left"></cds-icon>
+        Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
+      </button>
+    </div>
+  </div>
+  
+  <!-- Show current drilldown level -->
+  <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
+    <div class="clr-col-12">
+      <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
+        <div class="alert-items">
+          <div class="alert-item static">
+            <div class="alert-icon-wrapper">
+              <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
+            </div>
+            <span class="alert-text">
+              Drilldown Level: {{currentDrilldownLevel}} 
+              <span *ngIf="drilldownStack.length > 0">
+                (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
  </div>
  
  <!-- No data message -->
@@ -16,9 +285,10 @@
  </div>
  
  <!-- Chart display -->
-  <div *ngIf="!noDataAvailable">
+  <div *ngIf="!noDataAvailable" style="position: relative; height: calc(100% - 70px); min-height: 300px;">
    <canvas baseChart
      [datasets]="scatterChartData"
+      [options]="scatterChartOptions"
      [type]="scatterChartType"
      (chartHover)="chartHovered($event)"
      (chartClick)="chartClicked($event)">
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component.scss
@@ -0,0 +1,192 @@
+.filter-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+}
+
+.filter-group {
+  margin-bottom: 15px;
+  
+  h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-weight: 600;
+  }
+}
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-item {
+  flex: 1 1 300px;
+  min-width: 250px;
+  padding: 10px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.filter-label {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #555;
+  font-size: 14px;
+}
+
+.filter-input {
+  width: 100%;
+  
+  .filter-text-input,
+  .filter-select,
+  .filter-date {
+    width: 100%;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .filter-select {
+    height: 34px;
+  }
+}
+
+.multiselect-container {
+  position: relative;
+}
+
+.multiselect-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  min-height: 34px;
+  
+  .multiselect-label {
+    flex: 1;
+    font-size: 14px;
+  }
+  
+  .multiselect-value {
+    color: #666;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+  
+  .dropdown-icon {
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover {
+    border-color: #999;
+  }
+}
+
+.multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  
+  .checkbox-group {
+    padding: 8px;
+    
+    .checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      
+      .checkbox-label {
+        margin: 0;
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.date-range {
+  .date-input-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .date-separator {
+    margin: 0 5px;
+    color: #777;
+  }
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .toggle-label {
+    margin: 0;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+
+.filter-actions {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+  
+  .btn {
+    font-size: 13px;
+  }
+}
+
+// New header row styling
+.header-row {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  
+  .chart-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .filter-controls {
+    flex-direction: column;
+  }
+  
+  .filter-item {
+    min-width: 100%;
+  }
+  
+  .header-row {
+    .chart-title {
+      font-size: 16px;
+    }
+  }
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
-import { ChartData,ChartDataset } from 'chart.js';
+import { ChartData,ChartDataset,ChartOptions } from 'chart.js';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+import { FilterService } from '../../common-filter/filter.service';
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-scatter-chart',
@@ -34,9 +36,20 @@ export class ScatterChartComponent implements OnInit, OnChanges {
  // Multi-layer drilldown configuration inputs
  @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations

-  constructor(private dashboardService: Dashboard3Service) { }
+  constructor(
+    private dashboardService: Dashboard3Service,
+    private filterService: FilterService
+  ) { }

  ngOnInit(): void {
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );
+    
    // Initialize with default data
    this.fetchChartData();
  }
@@ -44,6 +57,12 @@ export class ScatterChartComponent implements OnInit, OnChanges {
  ngOnChanges(changes: SimpleChanges): void {
    console.log('ScatterChartComponent input changes:', changes);
    
+    // Initialize filter values if they haven't been initialized yet
+    if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
+      this.initializeFilterValues();
+      this.filtersInitialized = true;
+    }
+    
    // Check if any of the key properties have changed
    const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
    const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
@@ -94,6 +113,89 @@ export class ScatterChartComponent implements OnInit, OnChanges {
      ],
    },
  ];
+  
+  public scatterChartOptions: any = {
+    responsive: true,
+    maintainAspectRatio: false,
+    scales: {
+      x: {
+        type: 'linear',
+        position: 'bottom',
+        title: {
+          display: true,
+          text: 'X Axis'
+        },
+        ticks: {
+          autoSkip: true,
+          maxTicksLimit: 10,
+          callback: function(value: any) {
+            if (typeof value === 'number') {
+              // Format large numbers for better readability
+              if (Math.abs(value) >= 1000000) {
+                return (value / 1000000).toFixed(1) + 'M';
+              } else if (Math.abs(value) >= 1000) {
+                return (value / 1000).toFixed(1) + 'K';
+              }
+              return value.toString();
+            }
+            return value;
+          }
+        },
+        grid: {
+          display: true,
+          color: 'rgba(0, 0, 0, 0.1)'
+        }
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'Y Axis'
+        },
+        ticks: {
+          autoSkip: true,
+          maxTicksLimit: 10,
+          callback: function(value: any) {
+            if (typeof value === 'number') {
+              // Format large numbers for better readability
+              if (Math.abs(value) >= 1000000) {
+                return (value / 1000000).toFixed(1) + 'M';
+              } else if (Math.abs(value) >= 1000) {
+                return (value / 1000).toFixed(1) + 'K';
+              }
+              return value.toString();
+            }
+            return value;
+          }
+        },
+        grid: {
+          display: true,
+          color: 'rgba(0, 0, 0, 0.1)'
+        }
+      }
+    },
+    plugins: {
+      legend: {
+        display: true,
+        position: 'top',
+      },
+      tooltip: {
+        callbacks: {
+          label: function(context: any) {
+            return `(${context.parsed.x}, ${context.parsed.y})`;
+          }
+        }
+      }
+    },
+    layout: {
+      padding: {
+        left: 15,
+        right: 15,
+        top: 15,
+        bottom: 60  // Add padding at the bottom to ensure X-axis visibility
+      }
+    }
+  };
+
  public scatterChartType: string = 'scatter';
  
  // Multi-layer drilldown state tracking
@@ -107,6 +209,417 @@ export class ScatterChartComponent implements OnInit, OnChanges {
  // Flag to prevent infinite loops
  private isFetchingData: boolean = false;
  
+  // Subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+
+  // Add properties for filter functionality
+  private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
+  private documentClickHandler: ((event: MouseEvent) => void) | null = null;
+  private filtersInitialized: boolean = false;
+  
+  // Initialize filter values with proper default values based on type
+  private initializeFilterValues(): void {
+    console.log('Initializing filter values');
+    
+    // Initialize base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.value === undefined || filter.value === null) {
+              switch (filter.type) {
+                case 'multiselect':
+                  filter.value = [];
+                  break;
+                case 'date-range':
+                  filter.value = { start: null, end: null };
+                  break;
+                case 'toggle':
+                  filter.value = false;
+                  break;
+                default:
+                  filter.value = '';
+              }
+            }
+          });
+        }
+      });
+    }
+    
+    console.log('Filter values initialized:', {
+      baseFilters: this.baseFilters,
+      drilldownFilters: this.drilldownFilters,
+      drilldownLayers: this.drilldownLayers
+    });
+  }
+
+  // Check if there are active filters
+  hasActiveFilters(): boolean {
+    return (this.baseFilters && this.baseFilters.length > 0) || 
+           (this.drilldownFilters && this.drilldownFilters.length > 0) || 
+           this.hasActiveLayerFilters();
+  }
+
+  // Check if there are active layer filters for current drilldown level
+  hasActiveLayerFilters(): boolean {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      return layerIndex < this.drilldownLayers.length && 
+             this.drilldownLayers[layerIndex].filters && 
+             this.drilldownLayers[layerIndex].filters.length > 0;
+    }
+    return false;
+  }
+
+  // Get active layer filters for current drilldown level
+  getActiveLayerFilters(): any[] {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      if (layerIndex < this.drilldownLayers.length && 
+          this.drilldownLayers[layerIndex].filters) {
+        return this.drilldownLayers[layerIndex].filters;
+      }
+    }
+    return [];
+  }
+
+  // Get filter options for dropdown/multiselect filters
+  getFilterOptions(filter: any): string[] {
+    if (filter.options) {
+      if (Array.isArray(filter.options)) {
+        return filter.options;
+      } else if (typeof filter.options === 'string') {
+        return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
+      }
+    }
+    return [];
+  }
+
+  // Check if an option is selected for multiselect filters
+  isOptionSelected(filter: any, option: string): boolean {
+    if (!filter.value) {
+      return false;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.includes(option);
+    }
+    
+    return filter.value === option;
+  }
+
+  // Handle base filter changes
+  onBaseFilterChange(filter: any): void {
+    console.log('Base filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle drilldown filter changes
+  onDrilldownFilterChange(filter: any): void {
+    console.log('Drilldown filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle layer filter changes
+  onLayerFilterChange(filter: any): void {
+    console.log('Layer filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle multiselect changes
+  onMultiSelectChange(filter: any, option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filter.value as array if it's not already
+    if (!Array.isArray(filter.value)) {
+      filter.value = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!filter.value.includes(option)) {
+        filter.value.push(option);
+      }
+    } else {
+      // Remove option from array
+      filter.value = filter.value.filter((item: string) => item !== option);
+    }
+    
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle date range changes
+  onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
+    filter.value = dateRange;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Handle toggle changes
+  onToggleChange(filter: any, checked: boolean): void {
+    filter.value = checked;
+    // Refresh data when filter changes
+    this.fetchChartData();
+  }
+
+  // Toggle multiselect dropdown visibility
+  toggleMultiselect(filter: any, context: string): void {
+    const filterId = `${context}-${filter.field}`;
+    if (this.isMultiselectOpen(filter, context)) {
+      this.openMultiselects.delete(filterId);
+    } else {
+      // Close all other multiselects first
+      this.openMultiselects.clear();
+      this.openMultiselects.set(filterId, context);
+      
+      // Add document click handler to close dropdown when clicking outside
+      this.addDocumentClickHandler();
+    }
+  }
+
+  // Add document click handler to close dropdowns when clicking outside
+  private addDocumentClickHandler(): void {
+    if (!this.documentClickHandler) {
+      this.documentClickHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        // Check if click is outside any multiselect dropdown
+        if (!target.closest('.multiselect-container')) {
+          this.openMultiselects.clear();
+          this.removeDocumentClickHandler();
+        }
+      };
+      
+      // Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
+      setTimeout(() => {
+        document.addEventListener('click', this.documentClickHandler!);
+      }, 0);
+    }
+  }
+
+  // Remove document click handler
+  private removeDocumentClickHandler(): void {
+    if (this.documentClickHandler) {
+      document.removeEventListener('click', this.documentClickHandler);
+      this.documentClickHandler = null;
+    }
+  }
+
+  // Check if multiselect dropdown is open
+  isMultiselectOpen(filter: any, context: string): boolean {
+    const filterId = `${context}-${filter.field}`;
+    return this.openMultiselects.has(filterId);
+  }
+
+  // Get count of selected options for a multiselect filter
+  getSelectedOptionsCount(filter: any): number {
+    if (!filter.value) {
+      return 0;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.length;
+    }
+    
+    return 0;
+  }
+
+  // Clear all filters
+  clearAllFilters(): void {
+    // Clear base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.type === 'multiselect') {
+              filter.value = [];
+            } else if (filter.type === 'date-range') {
+              filter.value = { start: null, end: null };
+            } else if (filter.type === 'toggle') {
+              filter.value = false;
+            } else {
+              filter.value = '';
+            }
+          });
+        }
+      });
+    }
+    
+    // Close all multiselect dropdowns
+    this.openMultiselects.clear();
+    
+    // Refresh data
+    this.fetchChartData();
+  }
+  
+  // Transform data to scatter chart format
+  private transformToScatterData(labels: any[], data: any[]): ChartDataset[] {
+    // For scatter charts, we need to transform the data into scatter format
+    // Scatter charts expect data in the format: {x: number, y: number}
+    console.log('Transforming data to scatter format:', { labels, data });
+    
+    // If we have the expected scatter data format, return it as is
+    if (data && data.length > 0 && data[0].data && data[0].data.length > 0 && 
+        typeof data[0].data[0] === 'object' && data[0].data[0].hasOwnProperty('x') && 
+        data[0].data[0].hasOwnProperty('y')) {
+      return data;
+    }
+    
+    // Transform the data properly for scatter chart
+    // Assuming labels are x-values and data[0].data are y-values
+    if (labels && data && data.length > 0 && data[0].data) {
+      const yValues = data[0].data;
+      const label = data[0].label || 'Dataset 1';
+      
+      // Create scatter points from labels (x) and data (y)
+      const scatterPoints = [];
+      const minLength = Math.min(labels.length, yValues.length);
+      
+      for (let i = 0; i < minLength; i++) {
+        // Convert to numbers if they're strings
+        const x = typeof labels[i] === 'string' ? parseFloat(labels[i]) : labels[i];
+        const y = typeof yValues[i] === 'string' ? parseFloat(yValues[i]) : yValues[i];
+        
+        // Only add valid points
+        if (!isNaN(x) && !isNaN(y)) {
+          scatterPoints.push({ x, y });
+        }
+      }
+      
+      // Generate different colors for each point to avoid all points showing the same color
+      const backgroundColors = [];
+      const borderColors = [];
+      
+      for (let i = 0; i < scatterPoints.length; i++) {
+        // Generate a color based on the point index for variety
+        const hue = (i * 137.508) % 360; // Use golden angle to spread colors
+        backgroundColors.push(`hsla(${hue}, 70%, 50%, 0.6)`);
+        borderColors.push(`hsla(${hue}, 70%, 40%, 1)`);
+      }
+      
+      // Create a single dataset with all scatter points
+      const scatterDatasets: ChartDataset[] = [
+        {
+          data: scatterPoints,
+          label: label,
+          pointRadius: 8,
+          pointHoverRadius: 10,
+          backgroundColor: backgroundColors,
+          borderColor: borderColors,
+          borderWidth: 1,
+          pointHoverBackgroundColor: 'rgba(255, 99, 132, 1)',
+        }
+      ];
+      
+      console.log('Transformed scatter data:', scatterDatasets);
+      return scatterDatasets;
+    }
+    
+    // Otherwise, create a default scatter dataset
+    const scatterDatasets: ChartDataset[] = [
+      {
+        data: [
+          { x: 1, y: 1 },
+          { x: 2, y: 3 },
+          { x: 3, y: -2 },
+          { x: 4, y: 4 },
+          { x: 5, y: -3 },
+        ],
+        label: 'Dataset 1',
+        pointRadius: 10,
+        backgroundColor: [
+          'red',
+          'green',
+          'blue',
+          'purple',
+          'yellow',
+          'brown',
+          'magenta',
+          'cyan',
+          'orange',
+          'pink'
+        ],
+      }
+    ];
+    
+    return scatterDatasets;
+  }
+
  fetchChartData(): void {
    // Set flag to prevent recursive calls
    this.isFetchingData = true;
@@ -139,7 +652,49 @@ export class ScatterChartComponent implements OnInit, OnChanges {
          filterParams = JSON.stringify(filterObj);
        }
      }
-      console.log('Base filter parameters:', filterParams);
+      
+      // Add common filters to filter parameters
+      const commonFilters = this.filterService.getFilterValues();
+      console.log('Common filters from service:', commonFilters);
+      
+      if (Object.keys(commonFilters).length > 0) {
+        // Merge common filters with base filters
+        const mergedFilterObj = {};
+        
+        // Add base filters first
+        if (filterParams) {
+          try {
+            const baseFilterObj = JSON.parse(filterParams);
+            Object.assign(mergedFilterObj, baseFilterObj);
+          } catch (e) {
+            console.warn('Failed to parse base filter parameters:', e);
+          }
+        }
+        
+        // Add common filters using the field name as the key, not the filter id
+        Object.keys(commonFilters).forEach(filterId => {
+          const filterValue = commonFilters[filterId];
+          // Find the filter definition to get the field name
+          const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+          if (filterDef && filterDef.field) {
+            const fieldName = filterDef.field;
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[fieldName] = filterValue;
+            }
+          } else {
+            // Fallback to using filterId as field name if no field is defined
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[filterId] = filterValue;
+            }
+          }
+        });
+        
+        if (Object.keys(mergedFilterObj).length > 0) {
+          filterParams = JSON.stringify(mergedFilterObj);
+        }
+      }
+      
+      console.log('Final filter parameters:', filterParams);
      
      // Log the URL that will be called
      const url = `chart/getdashjson/scatter?tableName=${this.table}&xAxis=${this.xAxis}&yAxes=${yAxisString}${this.connection ? `&sureId=${this.connection}` : ''}`;
@@ -165,11 +720,19 @@ export class ScatterChartComponent implements OnInit, OnChanges {
            // Scatter charts expect data in the format: {x: number, y: number}
            this.noDataAvailable = data.chartLabels.length === 0;
            this.scatterChartData = this.transformToScatterData(data.chartLabels, data.chartData);
+            
+            // Update chart options with axis titles
+            this.updateChartOptionsWithAxisTitles();
+            
            console.log('Updated scatter chart with data:', this.scatterChartData);
          } else if (data && data.labels && data.datasets) {
            // Handle the original expected format as fallback
            this.noDataAvailable = data.labels.length === 0;
            this.scatterChartData = data.datasets;
+            
+            // Update chart options with axis titles
+            this.updateChartOptionsWithAxisTitles();
+            
            console.log('Updated scatter chart with legacy data format:', this.scatterChartData);
          } else {
            console.warn('Scatter chart received data does not have expected structure', data);
@@ -197,6 +760,20 @@ export class ScatterChartComponent implements OnInit, OnChanges {
    }
  }
  
+  // Update chart options with axis titles
+  private updateChartOptionsWithAxisTitles(): void {
+    // Update X axis title
+    if (this.scatterChartOptions.scales && this.scatterChartOptions.scales.x) {
+      this.scatterChartOptions.scales.x.title.text = this.xAxis || 'X Axis';
+    }
+    
+    // Update Y axis title
+    if (this.scatterChartOptions.scales && this.scatterChartOptions.scales.y) {
+      const yAxisLabel = Array.isArray(this.yAxis) ? this.yAxis[0] : this.yAxis;
+      this.scatterChartOptions.scales.y.title.text = yAxisLabel || 'Y Axis';
+    }
+  }
+  
  // Fetch drilldown data based on current drilldown level
  fetchDrilldownData(): void {
    console.log('Fetching drilldown data, current level:', this.currentDrilldownLevel);
@@ -287,24 +864,34 @@ export class ScatterChartComponent implements OnInit, OnChanges {
      }
    }
    
-    // Convert drilldownFilters to filter parameters for drilldown level
-    let drilldownFilterParams = '';
-    if (this.drilldownFilters && this.drilldownFilters.length > 0) {
-      const filterObj = {};
-      this.drilldownFilters.forEach(filter => {
-        if (filter.field && filter.value) {
-          filterObj[filter.field] = filter.value;
+    // Add common filters to drilldown filter parameters
+    const commonFilters = this.filterService.getFilterValues();
+    if (Object.keys(commonFilters).length > 0) {
+      // Merge common filters with drilldown filters
+      const mergedFilterObj = {};
+      
+      // Add drilldown filters first
+      if (filterParams) {
+        try {
+          const drilldownFilterObj = JSON.parse(filterParams);
+          Object.assign(mergedFilterObj, drilldownFilterObj);
+        } catch (e) {
+          console.warn('Failed to parse drilldown filter parameters:', e);
+        }
+      }
+      
+      // Add common filters
+      Object.keys(commonFilters).forEach(key => {
+        const value = commonFilters[key];
+        if (value !== undefined && value !== null && value !== '') {
+          mergedFilterObj[key] = value;
        }
      });
-      if (Object.keys(filterObj).length > 0) {
-        drilldownFilterParams = JSON.stringify(filterObj);
+      
+      if (Object.keys(mergedFilterObj).length > 0) {
+        filterParams = JSON.stringify(mergedFilterObj);
      }
    }
-    console.log('Drilldown filter parameters:', drilldownFilterParams);
-    
-    // Use drilldown filters if available, otherwise use layer filters
-    const finalFilterParams = drilldownFilterParams || filterParams;
-    console.log('Final filter parameters:', finalFilterParams);
    
    // Log the URL that will be called
    const url = `chart/getdashjson/scatter?tableName=${actualApiUrl}&xAxis=${drilldownConfig.xAxis}&yAxes=${drilldownConfig.yAxis}${this.connection ? `&sureId=${this.connection}` : ''}`;
@@ -312,7 +899,7 @@ export class ScatterChartComponent implements OnInit, OnChanges {
    
    // Fetch data from the dashboard service with parameter field and value
    // Backend handles filtering, we just pass the parameter field and value
-    this.dashboardService.getChartData(actualApiUrl, 'scatter', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, finalFilterParams).subscribe(
+    this.dashboardService.getChartData(actualApiUrl, 'scatter', drilldownConfig.xAxis, drilldownConfig.yAxis, this.connection, parameterField, parameterValue, filterParams).subscribe(
      (data: any) => {
        console.log('Received drilldown data:', data);
        if (data === null) {
@@ -325,7 +912,6 @@ export class ScatterChartComponent implements OnInit, OnChanges {
        // Handle the actual data structure returned by the API
        if (data && data.chartLabels && data.chartData) {
          // For scatter charts, we need to transform the data into scatter format
-          // Scatter charts expect data in the format: {x: number, y: number}
          this.noDataAvailable = data.chartLabels.length === 0;
          this.scatterChartData = this.transformToScatterData(data.chartLabels, data.chartData);
          console.log('Updated scatter chart with drilldown data:', this.scatterChartData);
@@ -349,33 +935,6 @@ export class ScatterChartComponent implements OnInit, OnChanges {
    );
  }
  
-  // Transform chart data to scatter chart format
-  private transformToScatterData(labels: string[], datasets: any[]): ChartDataset[] {
-    // For scatter charts, we need to transform the data into scatter format
-    // Scatter charts expect data in the format: {x: number, y: number}
-    
-    // This is a simple transformation - in a real implementation, you might want to
-    // create a more sophisticated mapping based on your data structure
-    return datasets.map((dataset, index) => {
-      // Create scatter data points
-      const scatterData = labels.map((label, i) => {
-        // Use x-axis data as x coordinate, y-axis data as y coordinate
-        const xValue = dataset.data[i] || 0;
-        const yValue = i < datasets.length ? (datasets[i].data[index] || 0) : 0;
-        
-        return { x: xValue, y: yValue };
-      });
-      
-      return {
-        data: scatterData,
-        label: dataset.label || `Dataset ${index + 1}`,
-        backgroundColor: dataset.backgroundColor || `rgba(${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, ${Math.floor(Math.random() * 255)}, 0.6)`,
-        borderColor: dataset.borderColor || 'rgba(0, 0, 0, 1)',
-        pointRadius: dataset.pointRadius || 5
-      };
-    });
-  }
-  
  // Reset to original data (go back to base level)
  resetToOriginalData(): void {
    console.log('Resetting to original data');
@@ -436,16 +995,18 @@ export class ScatterChartComponent implements OnInit, OnChanges {
      // Get the index of the clicked element
      const clickedIndex = e.active[0].index;
      
-      // Get the label of the clicked element
-      // For scatter charts, we might not have labels in the same way as other charts
-      const clickedLabel = `Point ${clickedIndex}`;
+      // Get the dataset index
+      const datasetIndex = e.active[0].datasetIndex;
      
-      console.log('Clicked on scatter point:', { index: clickedIndex, label: clickedLabel });
+      // Get the data point
+      const dataPoint = this.scatterChartData[datasetIndex].data[clickedIndex];
+      
+      console.log('Clicked on scatter point:', { datasetIndex, clickedIndex, dataPoint });
      
      // If we're not at the base level, store original data
      if (this.currentDrilldownLevel === 0) {
        // Store original data before entering drilldown mode
-        this.originalScatterChartData = [...this.scatterChartData];
+        this.originalScatterChartData = JSON.parse(JSON.stringify(this.scatterChartData));
        console.log('Stored original data for drilldown');
      }
      
@@ -487,9 +1048,10 @@ export class ScatterChartComponent implements OnInit, OnChanges {
        // Add this click to the drilldown stack
        const stackEntry = {
          level: nextDrilldownLevel,
+          datasetIndex: datasetIndex,
          clickedIndex: clickedIndex,
-          clickedLabel: clickedLabel,
-          clickedValue: clickedLabel // Using label as value for now
+          dataPoint: dataPoint,
+          clickedValue: dataPoint // Using data point as value for now
        };
        
        this.drilldownStack.push(stackEntry);
@@ -513,6 +1075,12 @@ export class ScatterChartComponent implements OnInit, OnChanges {
  }

  public chartHovered(e: any): void {
-    console.log(e);
+    console.log('Scatter chart hovered:', e);
  }
-}  
+
+  ngOnDestroy(): void {
+    this.subscriptions.forEach(sub => sub.unsubscribe());
+    // Clean up document click handler
+    this.removeDocumentClickHandler();
+  }
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.html
@@ -1,27 +1,307 @@
-<table class="table">
-  <thead>
-  <th class="c-col">#</th>
-  <th>Item</th>
-  <th></th>
-  </thead>
-  <tr class="ui basic segment" *ngFor="let todo of todoList; let i = index">
-      <td class="c-col">{{i + 1}}</td>
-      <td>{{todo}}</td>
-      <td style="text-align:right">
-          <a routerLink="." (click)="removeTodo(i)">
-              <clr-icon shape="times"></clr-icon>
-          </a>
-      </td>
-  </tr>
-  <tr>
-      <td></td>
-      <td>
-        <input [(ngModel)]="todo" placeholder="Add Todo" class="clr-input">
-      </td>
-      <td style="text-align:right">
-          <a  routerLink="." color='primary' (click)="addTodo(todo)">
-              <clr-icon shape="plus"></clr-icon>
-          </a>
-      </td>
-  </tr>
-</table>
+<div class="to-do-chart-container">
+  <!-- Filter Controls Section -->
+  <div class="filter-section" *ngIf="hasActiveFilters()">
+    <!-- Base Filters -->
+    <div class="filter-group" *ngIf="baseFilters && baseFilters.length > 0">
+      <h4>Base Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of baseFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onBaseFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onBaseFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'base-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'base-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Drilldown Filters -->
+    <div class="filter-group" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+      <h4>Drilldown Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of drilldownFilters" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onDrilldownFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onDrilldownFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'drilldown-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'drilldown-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Layer Filters -->
+    <div class="filter-group" *ngIf="hasActiveLayerFilters()">
+      <h4>Layer Filters</h4>
+      <div class="filter-controls">
+        <div *ngFor="let filter of getActiveLayerFilters()" class="filter-item">
+          <div class="filter-label">{{ filter.field }} ({{ filter.type || 'text' }})</div>
+          
+          <!-- Text Filter -->
+          <div *ngIf="!filter.type || filter.type === 'text'" class="filter-input">
+            <input type="text" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onLayerFilterChange(filter)"
+                   [placeholder]="filter.field"
+                   class="clr-input filter-text-input">
+          </div>
+          
+          <!-- Dropdown Filter -->
+          <div *ngIf="filter.type === 'dropdown'" class="filter-input">
+            <select [(ngModel)]="filter.value" 
+                    (ngModelChange)="onLayerFilterChange(filter)"
+                    class="clr-select filter-select">
+              <option value="">Select {{ filter.field }}</option>
+              <option *ngFor="let option of getFilterOptions(filter)" [value]="option">{{ option }}</option>
+            </select>
+          </div>
+          
+          <!-- Multi-Select Filter - Updated to show key first, then dropdown on click -->
+          <div *ngIf="filter.type === 'multiselect'" class="filter-input multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+              <span class="multiselect-label">{{ filter.field }}</span>
+              <span class="multiselect-value" *ngIf="getSelectedOptionsCount(filter) > 0">
+                ({{ getSelectedOptionsCount(filter) }} selected)
+              </span>
+              <clr-icon shape="caret down" class="dropdown-icon"></clr-icon>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+              <div class="checkbox-group">
+                <div *ngFor="let option of getFilterOptions(filter); let i = index" class="checkbox-item">
+                  <input type="checkbox" 
+                         [checked]="isOptionSelected(filter, option)" 
+                         (change)="onMultiSelectChange(filter, option, $event)"
+                         [id]="'layer-' + filter.field + '-' + i" 
+                         class="clr-checkbox">
+                  <label [for]="'layer-' + filter.field + '-' + i" class="checkbox-label">{{ option }}</label>
+                </div>
+              </div>
+            </div>
+          </div>
+          
+          <!-- Date Range Filter -->
+          <div *ngIf="filter.type === 'date-range'" class="filter-input date-range">
+            <div class="date-input-group">
+              <input type="date" 
+                     [(ngModel)]="filter.value.start" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: $event, end: filter.value.end })"
+                     placeholder="Start Date"
+                     class="clr-input filter-date">
+              <span class="date-separator">to</span>
+              <input type="date" 
+                     [(ngModel)]="filter.value.end" 
+                     (ngModelChange)="onDateRangeChange(filter, { start: filter.value.start, end: $event })"
+                     placeholder="End Date"
+                     class="clr-input filter-date">
+            </div>
+          </div>
+          
+          <!-- Toggle Filter -->
+          <div *ngIf="filter.type === 'toggle'" class="filter-input toggle">
+            <input type="checkbox" 
+                   [(ngModel)]="filter.value" 
+                   (ngModelChange)="onToggleChange(filter, $event)"
+                   clrToggle 
+                   class="clr-toggle">
+            <label class="toggle-label">{{ filter.field }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <!-- Clear Filters Button -->
+    <div class="filter-actions">
+      <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">Clear All Filters</button>
+    </div>
+  </div>
+  
+  <!-- Header row with chart title and drilldown navigation -->
+  <div class="clr-row header-row">
+    <div class="clr-col-6">
+      <h3 class="chart-title">{{charttitle || 'To Do Chart'}}</h3>
+    </div>
+    <div class="clr-col-6" style="text-align: right;">
+      <!-- Add drilldown navigation controls -->
+      <button class="btn btn-sm btn-link" *ngIf="drilldownEnabled && drilldownStack.length > 0" (click)="navigateBack()">
+        <cds-icon shape="arrow" direction="left"></cds-icon>
+        Back to {{drilldownStack.length > 1 ? 'Previous Level' : 'Main Data'}}
+      </button>
+    </div>
+  </div>
+  
+  <!-- Show current drilldown level -->
+  <div class="clr-row" *ngIf="drilldownEnabled && drilldownStack.length > 0">
+    <div class="clr-col-12">
+      <div class="alert alert-info" style="padding: 8px 12px; margin-bottom: 12px;">
+        <div class="alert-items">
+          <div class="alert-item static">
+            <div class="alert-icon-wrapper">
+              <cds-icon class="alert-icon" shape="info-circle"></cds-icon>
+            </div>
+            <span class="alert-text">
+              Drilldown Level: {{currentDrilldownLevel}} 
+              <span *ngIf="drilldownStack.length > 0">
+                (Clicked on: {{drilldownStack[drilldownStack.length - 1].clickedLabel}})
+              </span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  
+  <!-- Existing content -->
+  <div class="todo-table-container">
+    <table class="table todo-table">
+      <thead>
+      <th class="c-col">#</th>
+      <th>Item</th>
+      <th></th>
+      </thead>
+      <tr class="ui basic segment" *ngFor="let todo of todoList; let i = index">
+          <td class="c-col">{{i + 1}}</td>
+          <td>{{todo}}</td>
+          <td style="text-align:right">
+              <a (click)="removeTodo(i)" class="remove-button">
+                  <clr-icon shape="times"></clr-icon>
+              </a>
+          </td>
+      </tr>
+    </table>
+  </div>
+  <div class="add-todo-section">
+    <input [(ngModel)]="todo" (keyup.enter)="addTodo(todo)" placeholder="Add Todo" class="clr-input todo-input">
+    <button (click)="addTodo(todo)" class="btn btn-primary add-button">
+      <clr-icon shape="plus"></clr-icon> Add
+    </button>
+  </div>
+</div>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.scss
@@ -0,0 +1,289 @@
+// To Do Chart specific styles
+.to-do-chart-container {
+  padding: 20px;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.todo-table-container {
+  flex: 1;
+  overflow-y: auto;
+  max-height: 400px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  margin-bottom: 20px; // Add margin at the bottom for spacing
+  
+  .todo-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 0;
+    
+    th, td {
+      padding: 12px;
+      text-align: left;
+      border-bottom: 1px solid #ddd;
+    }
+    
+    th {
+      background-color: #f2f2f2;
+      font-weight: bold;
+      position: sticky;
+      top: 0;
+      z-index: 10;
+    }
+    
+    tr:hover {
+      background-color: #f5f5f5;
+    }
+    
+    .c-col {
+      width: 50px;
+    }
+    
+    // Add padding at the bottom of the table body
+    tbody {
+      tr:last-child td {
+        padding-bottom: 20px; // Extra padding for the last row
+      }
+    }
+  }
+}
+
+.add-todo-section {
+  display: flex;
+  gap: 10px;
+  margin-top: 15px;
+  padding: 20px; // Increased padding all around
+  border-top: 1px solid #eee;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+  
+  .todo-input {
+    flex: 1;
+    padding: 12px; // Increased padding for better touch targets
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .add-button {
+    white-space: nowrap;
+    padding: 12px 20px; // Increased padding for better touch targets
+  }
+}
+
+.remove-button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 8px; // Increased padding for better touch targets
+  border-radius: 3px;
+  color: #dc3545;
+  
+  &:hover {
+    background-color: #e0e0e0;
+  }
+}
+
+.filter-section {
+  margin-bottom: 20px;
+  padding: 15px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+}
+
+.filter-group {
+  margin-bottom: 15px;
+  
+  h4 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+    font-weight: 600;
+  }
+}
+
+.filter-controls {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-item {
+  flex: 1 1 300px;
+  min-width: 250px;
+  padding: 10px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+}
+
+.filter-label {
+  font-weight: 500;
+  margin-bottom: 8px;
+  color: #555;
+  font-size: 14px;
+}
+
+.filter-input {
+  width: 100%;
+  
+  .filter-text-input,
+  .filter-select,
+  .filter-date {
+    width: 100%;
+    padding: 6px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+  
+  .filter-select {
+    height: 34px;
+  }
+}
+
+.multiselect-container {
+  position: relative;
+}
+
+.multiselect-display {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 6px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: white;
+  cursor: pointer;
+  min-height: 34px;
+  
+  .multiselect-label {
+    flex: 1;
+    font-size: 14px;
+  }
+  
+  .multiselect-value {
+    color: #666;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+  
+  .dropdown-icon {
+    flex-shrink: 0;
+    transition: transform 0.2s ease;
+  }
+  
+  &:hover {
+    border-color: #999;
+  }
+}
+
+.multiselect-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: white;
+  border: 1px solid #ccc;
+  border-top: none;
+  border-radius: 0 0 4px 4px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  
+  .checkbox-group {
+    padding: 8px;
+    
+    .checkbox-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      
+      .checkbox-label {
+        margin: 0;
+        font-size: 14px;
+        cursor: pointer;
+      }
+    }
+  }
+}
+
+.date-range {
+  .date-input-group {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  
+  .date-separator {
+    margin: 0 5px;
+    color: #777;
+  }
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  
+  .toggle-label {
+    margin: 0;
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+
+.filter-actions {
+  margin-top: 15px;
+  padding-top: 15px;
+  border-top: 1px solid #eee;
+  
+  .btn {
+    font-size: 13px;
+  }
+}
+
+// New header row styling
+.header-row {
+  margin-bottom: 15px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid #eee;
+  
+  .chart-title {
+    margin: 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+  }
+}
+
+// Responsive design
+@media (max-width: 768px) {
+  .filter-controls {
+    flex-direction: column;
+  }
+  
+  .filter-item {
+    min-width: 100%;
+  }
+  
+  .header-row {
+    .chart-title {
+      font-size: 16px;
+    }
+  }
+  
+  .add-todo-section {
+    flex-direction: column;
+  }
+  
+  .to-do-chart-container {
+    padding: 15px; // Adjust padding for mobile
+  }
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component.ts
@@ -1,4 +1,7 @@
 import { Component, OnInit, Input, OnChanges, SimpleChanges } from '@angular/core';
+import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+import { FilterService } from '../../common-filter/filter.service';
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-to-do-chart',
@@ -21,15 +24,49 @@ export class ToDoChartComponent implements OnInit, OnChanges {
  @Input() datasource: string;
  @Input() fieldName: string;
  @Input() connection: number; // Add connection input
+  // Drilldown configuration inputs
+  @Input() drilldownEnabled: boolean = false;
+  @Input() drilldownApiUrl: string;
+  @Input() drilldownXAxis: string;
+  @Input() drilldownYAxis: string;
+  @Input() drilldownParameter: string; // Add drilldown parameter input
+  @Input() baseFilters: any[] = []; // Add base filters input
+  @Input() drilldownFilters: any[] = []; // Add drilldown filters input
+  // Multi-layer drilldown configuration inputs
+  @Input() drilldownLayers: any[] = []; // Array of drilldown layer configurations
+  
+  // Multi-layer drilldown state tracking
+  drilldownStack: any[] = []; // Stack to track drilldown navigation history
+  currentDrilldownLevel: number = 0; // Current drilldown level (0 = base level)
+  originalTodoList: string[] = [];

-  constructor() { }
-
+  constructor(
+    private dashboardService: Dashboard3Service,
+    private filterService: FilterService
+  ) { }
+  
  ngOnInit(): void {
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchToDoData();
+      })
+    );
+    
+    // Initialize with default data
+    this.fetchToDoData();
  }
  
  ngOnChanges(changes: SimpleChanges): void {
    console.log('ToDoChartComponent input changes:', changes);
    
+    // Initialize filter values if they haven't been initialized yet
+    if (!this.filtersInitialized && (changes.baseFilters || changes.drilldownFilters || changes.drilldownLayers)) {
+      this.initializeFilterValues();
+      this.filtersInitialized = true;
+    }
+    
    // Check if any of the key properties have changed
    const xAxisChanged = changes.xAxis && !changes.xAxis.firstChange;
    const yAxisChanged = changes.yAxis && !changes.yAxis.firstChange;
@@ -46,26 +83,119 @@ export class ToDoChartComponent implements OnInit, OnChanges {
  
  data: any;
  todo: string;
-  todoList = ['todo 1'];
+  todoList: string[] = [];
+  
+  // Add properties for filter functionality
+  private openMultiselects: Map<string, string> = new Map(); // Map of filterId -> context
+  private documentClickHandler: ((event: MouseEvent) => void) | null = null;
+  private filtersInitialized: boolean = false;
+  
+  // Subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
  
  fetchToDoData(): void {
    // If we have the necessary data, fetch to-do data from the service
-    if (this.table) {
-      console.log('Fetching to-do data for:', { table: this.table });
+    if (this.table && this.xAxis) {
+      console.log('Fetching to-do data for:', { table: this.table, xAxis: this.xAxis, connection: this.connection });
      
-      // For to-do chart, we might want to fetch data differently
-      // This is a placeholder implementation - you may need to adjust based on your API
-      console.log('To-do chart would fetch data from table:', this.table);
+      // Convert baseFilters to filter parameters
+      let filterParams = '';
+      if (this.baseFilters && this.baseFilters.length > 0) {
+        const filterObj = {};
+        this.baseFilters.forEach(filter => {
+          if (filter.field && filter.value) {
+            filterObj[filter.field] = filter.value;
+          }
+        });
+        if (Object.keys(filterObj).length > 0) {
+          filterParams = JSON.stringify(filterObj);
+        }
+      }
      
-      // In a real implementation, you would connect to your service here
-      // For now, we'll just keep the default to-do list
+      // Add common filters to filter parameters
+      const commonFilters = this.filterService.getFilterValues();
+      console.log('Common filters from service:', commonFilters);
+      
+      if (Object.keys(commonFilters).length > 0) {
+        // Merge common filters with base filters
+        const mergedFilterObj = {};
+        
+        // Add base filters first
+        if (filterParams) {
+          try {
+            const baseFilterObj = JSON.parse(filterParams);
+            Object.assign(mergedFilterObj, baseFilterObj);
+          } catch (e) {
+            console.warn('Failed to parse base filter parameters:', e);
+          }
+        }
+        
+        // Add common filters using the field name as the key, not the filter id
+        Object.keys(commonFilters).forEach(filterId => {
+          const filterValue = commonFilters[filterId];
+          // Find the filter definition to get the field name
+          const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+          if (filterDef && filterDef.field) {
+            const fieldName = filterDef.field;
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[fieldName] = filterValue;
+            }
+          } else {
+            // Fallback to using filterId as field name if no field is defined
+            if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+              mergedFilterObj[filterId] = filterValue;
+            }
+          }
+        });
+        
+        if (Object.keys(mergedFilterObj).length > 0) {
+          filterParams = JSON.stringify(mergedFilterObj);
+        }
+      }
+      
+      console.log('Final filter parameters:', filterParams);
+      
+      // Fetch data from the dashboard service
+      this.dashboardService.getChartData(this.table, 'todo', this.xAxis, '', this.connection, '', '', filterParams).subscribe(
+        (data: any) => {
+          console.log('Received to-do chart data:', data);
+          if (data === null) {
+            console.warn('To-do chart API returned null data. Check if the API endpoint is working correctly.');
+            this.todoList = [];
+            return;
+          }
+          
+          // Handle the actual data structure returned by the API
+          if (data && data.chartLabels) {
+            // Use chartLabels as the todo items
+            this.todoList = data.chartLabels;
+          } else if (data && data.labels) {
+            // Fallback to labels if chartLabels is not available
+            this.todoList = data.labels;
+          } else {
+            console.warn('To-do chart received data does not have expected structure', data);
+            this.todoList = [];
+          }
+        },
+        (error) => {
+          console.error('Error fetching to-do chart data:', error);
+          this.todoList = [];
+        }
+      );
    } else {
-      console.log('Missing required data for to-do chart:', { table: this.table });
+      console.log('Missing required data for to-do chart:', { table: this.table, xAxis: this.xAxis });
+      // Initialize with default data if no table is specified
+      if (this.todoList.length === 0) {
+        this.todoList = ['Sample Task 1', 'Sample Task 2', 'Sample Task 3'];
+      }
    }
  }

  public addTodo(todo: string) {
-    this.todoList.push(todo);
+    if (todo && todo.trim() !== '') {
+      this.todoList.push(todo.trim());
+      this.todo = ''; // Clear the input field
+    }
  }

  public removeTodo(todoIx: number) {
@@ -73,4 +203,353 @@ export class ToDoChartComponent implements OnInit, OnChanges {
        this.todoList.splice(todoIx, 1);
    }
  }
+  
+  // Navigate back to previous drilldown level
+  navigateBack(): void {
+    console.log('Navigating back, current stack:', this.drilldownStack);
+    console.log('Current level:', this.currentDrilldownLevel);
+    
+    if (this.drilldownStack.length > 0) {
+      // Remove the last entry from the stack
+      const removedEntry = this.drilldownStack.pop();
+      console.log('Removed entry from stack:', removedEntry);
+      
+      // Update the current drilldown level
+      this.currentDrilldownLevel = this.drilldownStack.length;
+      console.log('New level after pop:', this.currentDrilldownLevel);
+      console.log('Stack after pop:', this.drilldownStack);
+      
+      if (this.drilldownStack.length > 0) {
+        // Fetch data for the previous level
+        console.log('Fetching data for previous level');
+        this.fetchToDoData();
+      } else {
+        // Back to base level
+        console.log('Back to base level, resetting to original data');
+        this.todoList = [...this.originalTodoList];
+      }
+    } else {
+      // Already at base level, reset to original data
+      console.log('Already at base level, resetting to original data');
+      this.todoList = [...this.originalTodoList];
+    }
+  }
+  
+  // Initialize filter values with proper default values based on type
+  private initializeFilterValues(): void {
+    console.log('Initializing filter values');
+    
+    // Initialize base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.value === undefined || filter.value === null) {
+          switch (filter.type) {
+            case 'multiselect':
+              filter.value = [];
+              break;
+            case 'date-range':
+              filter.value = { start: null, end: null };
+              break;
+            case 'toggle':
+              filter.value = false;
+              break;
+            default:
+              filter.value = '';
+          }
+        }
+      });
+    }
+    
+    // Initialize layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.value === undefined || filter.value === null) {
+              switch (filter.type) {
+                case 'multiselect':
+                  filter.value = [];
+                  break;
+                case 'date-range':
+                  filter.value = { start: null, end: null };
+                  break;
+                case 'toggle':
+                  filter.value = false;
+                  break;
+                default:
+                  filter.value = '';
+              }
+            }
+          });
+        }
+      });
+    }
+    
+    console.log('Filter values initialized:', {
+      baseFilters: this.baseFilters,
+      drilldownFilters: this.drilldownFilters,
+      drilldownLayers: this.drilldownLayers
+    });
+  }
+
+  // Check if there are active filters
+  hasActiveFilters(): boolean {
+    return (this.baseFilters && this.baseFilters.length > 0) || 
+           (this.drilldownFilters && this.drilldownFilters.length > 0) || 
+           this.hasActiveLayerFilters();
+  }
+
+  // Check if there are active layer filters for current drilldown level
+  hasActiveLayerFilters(): boolean {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      return layerIndex < this.drilldownLayers.length && 
+             this.drilldownLayers[layerIndex].filters && 
+             this.drilldownLayers[layerIndex].filters.length > 0;
+    }
+    return false;
+  }
+
+  // Get active layer filters for current drilldown level
+  getActiveLayerFilters(): any[] {
+    if (this.currentDrilldownLevel > 1 && this.drilldownLayers && this.drilldownLayers.length > 0) {
+      const layerIndex = this.currentDrilldownLevel - 2; // -2 because level 1 is base drilldown
+      if (layerIndex < this.drilldownLayers.length && 
+          this.drilldownLayers[layerIndex].filters) {
+        return this.drilldownLayers[layerIndex].filters;
+      }
+    }
+    return [];
+  }
+
+  // Get filter options for dropdown/multiselect filters
+  getFilterOptions(filter: any): string[] {
+    if (filter.options) {
+      if (Array.isArray(filter.options)) {
+        return filter.options;
+      } else if (typeof filter.options === 'string') {
+        return filter.options.split(',').map(opt => opt.trim()).filter(opt => opt);
+      }
+    }
+    return [];
+  }
+
+  // Check if an option is selected for multiselect filters
+  isOptionSelected(filter: any, option: string): boolean {
+    if (!filter.value) {
+      return false;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.includes(option);
+    }
+    
+    return filter.value === option;
+  }
+
+  // Handle base filter changes
+  onBaseFilterChange(filter: any): void {
+    console.log('Base filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchToDoData();
+  }
+
+  // Handle drilldown filter changes
+  onDrilldownFilterChange(filter: any): void {
+    console.log('Drilldown filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchToDoData();
+  }
+
+  // Handle layer filter changes
+  onLayerFilterChange(filter: any): void {
+    console.log('Layer filter changed:', filter);
+    // Refresh data when filter changes
+    this.fetchToDoData();
+  }
+
+  // Handle multiselect changes
+  onMultiSelectChange(filter: any, option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filter.value as array if it's not already
+    if (!Array.isArray(filter.value)) {
+      filter.value = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!filter.value.includes(option)) {
+        filter.value.push(option);
+      }
+    } else {
+      // Remove option from array
+      filter.value = filter.value.filter((item: string) => item !== option);
+    }
+    
+    // Refresh data when filter changes
+    this.fetchToDoData();
+  }
+
+  // Handle date range changes
+  onDateRangeChange(filter: any, dateRange: { start: string | null, end: string | null }): void {
+    filter.value = dateRange;
+    // Refresh data when filter changes
+    this.fetchToDoData();
+  }
+
+  // Handle toggle changes
+  onToggleChange(filter: any, checked: boolean): void {
+    filter.value = checked;
+    // Refresh data when filter changes
+    this.fetchToDoData();
+  }
+
+  // Toggle multiselect dropdown visibility
+  toggleMultiselect(filter: any, context: string): void {
+    const filterId = `${context}-${filter.field}`;
+    if (this.isMultiselectOpen(filter, context)) {
+      this.openMultiselects.delete(filterId);
+    } else {
+      // Close all other multiselects first
+      this.openMultiselects.clear();
+      this.openMultiselects.set(filterId, context);
+      
+      // Add document click handler to close dropdown when clicking outside
+      this.addDocumentClickHandler();
+    }
+  }
+
+  // Add document click handler to close dropdowns when clicking outside
+  private addDocumentClickHandler(): void {
+    if (!this.documentClickHandler) {
+      this.documentClickHandler = (event: MouseEvent) => {
+        const target = event.target as HTMLElement;
+        // Check if click is outside any multiselect dropdown
+        if (!target.closest('.multiselect-container')) {
+          this.openMultiselects.clear();
+          this.removeDocumentClickHandler();
+        }
+      };
+      
+      // Use setTimeout to ensure the click event that opened the dropdown doesn't immediately close it
+      setTimeout(() => {
+        document.addEventListener('click', this.documentClickHandler!);
+      }, 0);
+    }
+  }
+
+  // Remove document click handler
+  private removeDocumentClickHandler(): void {
+    if (this.documentClickHandler) {
+      document.removeEventListener('click', this.documentClickHandler);
+      this.documentClickHandler = null;
+    }
+  }
+
+  // Check if multiselect dropdown is open
+  isMultiselectOpen(filter: any, context: string): boolean {
+    const filterId = `${context}-${filter.field}`;
+    return this.openMultiselects.has(filterId);
+  }
+
+  // Get count of selected options for a multiselect filter
+  getSelectedOptionsCount(filter: any): number {
+    if (!filter.value) {
+      return 0;
+    }
+    
+    if (Array.isArray(filter.value)) {
+      return filter.value.length;
+    }
+    
+    return 0;
+  }
+
+  // Clear all filters
+  clearAllFilters(): void {
+    // Clear base filters
+    if (this.baseFilters) {
+      this.baseFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear drilldown filters
+    if (this.drilldownFilters) {
+      this.drilldownFilters.forEach(filter => {
+        if (filter.type === 'multiselect') {
+          filter.value = [];
+        } else if (filter.type === 'date-range') {
+          filter.value = { start: null, end: null };
+        } else if (filter.type === 'toggle') {
+          filter.value = false;
+        } else {
+          filter.value = '';
+        }
+      });
+    }
+    
+    // Clear layer filters
+    if (this.drilldownLayers) {
+      this.drilldownLayers.forEach(layer => {
+        if (layer.filters) {
+          layer.filters.forEach((filter: any) => {
+            if (filter.type === 'multiselect') {
+              filter.value = [];
+            } else if (filter.type === 'date-range') {
+              filter.value = { start: null, end: null };
+            } else if (filter.type === 'toggle') {
+              filter.value = false;
+            } else {
+              filter.value = '';
+            }
+          });
+        }
+      });
+    }
+    
+    // Close all multiselect dropdowns
+    this.openMultiselects.clear();
+    
+    // Refresh data
+    this.fetchToDoData();
+  }
+  
+  ngOnDestroy(): void {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    this.subscriptions.forEach(subscription => subscription.unsubscribe());
+    
+    // Remove document click handler if it exists
+    this.removeDocumentClickHandler();
+  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/index.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/index.ts
@@ -0,0 +1 @@
+export * from './unified-chart.component';
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.html
@@ -0,0 +1,365 @@
+<div class="chart-container" *ngIf="!noDataAvailable && !isLoading">
+  <!-- Back button for drilldown navigation -->
+  <div class="drilldown-back" *ngIf="currentDrilldownLevel > 0">
+    <button class="btn btn-sm btn-secondary" (click)="navigateBack()">
+      <clr-icon shape="arrow" dir="left"></clr-icon>
+      Back
+    </button>
+    <span class="drilldown-level">Level: {{ currentDrilldownLevel }}</span>
+  </div>
+
+  <!-- Chart title -->
+  <div class="chart-title" *ngIf="charttitle">
+    <h4>{{ charttitle }}</h4>
+  </div>
+
+  <!-- Render different chart types based on chartType input -->
+  <div class="chart-wrapper">
+    <!-- Bar Chart -->
+    <div *ngIf="chartType === 'bar'">
+      <canvas baseChart
+        [data]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'bar'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Line Chart -->
+    <div *ngIf="chartType === 'line'">
+      <canvas baseChart
+        [data]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'line'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Pie Chart -->
+    <div *ngIf="chartType === 'pie'">
+      <canvas baseChart
+        [data]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'pie'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Doughnut Chart -->
+    <div *ngIf="chartType === 'doughnut'">
+      <canvas baseChart
+        [data]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'doughnut'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Bubble Chart -->
+    <div *ngIf="chartType === 'bubble'">
+      <canvas baseChart
+        [datasets]="bubbleChartData"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'bubble'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Radar Chart -->
+    <div *ngIf="chartType === 'radar'">
+      <canvas baseChart
+        [data]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'radar'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Polar Area Chart -->
+    <div *ngIf="chartType === 'polar'">
+      <canvas baseChart
+        [data]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'polarArea'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Scatter Chart -->
+    <div *ngIf="chartType === 'scatter'">
+      <canvas baseChart
+        [datasets]="chartData"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'scatter'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+
+    <!-- Default/Unknown Chart Type -->
+    <div *ngIf="!['bar', 'line', 'pie', 'doughnut', 'bubble', 'radar', 'polar', 'scatter'].includes(chartType)">
+      <canvas baseChart
+        [data]="chartData"
+        [labels]="chartLabels"
+        [options]="chartOptions"
+        [legend]="chartLegend"
+        [chartType]="'bar'"
+        (chartClick)="chartClicked($event)"
+        (chartHover)="chartHovered($event)">
+      </canvas>
+    </div>
+  </div>
+
+  <!-- Base Filters -->
+  <div class="filters-section" *ngIf="baseFilters && baseFilters.length > 0">
+    <h5>Filters</h5>
+    <div class="filters-container">
+      <div class="filter-item" *ngFor="let filter of baseFilters; let i = index">
+        <!-- Text Filter -->
+        <div *ngIf="filter.type === 'text'" class="filter-text">
+          <label>{{ filter.field }}</label>
+          <input type="text" [(ngModel)]="filter.value" (ngModelChange)="onBaseFilterChange(filter)" 
+                 class="form-control" placeholder="Enter {{ filter.field }}">
+        </div>
+
+        <!-- Dropdown Filter -->
+        <div *ngIf="filter.type === 'dropdown'" class="filter-dropdown">
+          <label>{{ filter.field }}</label>
+          <select [(ngModel)]="filter.value" (ngModelChange)="onBaseFilterChange(filter)" class="form-control">
+            <option value="">Select {{ filter.field }}</option>
+            <option *ngFor="let option of getFilterOptions(filter)" [value]="option">
+              {{ option }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Multiselect Filter -->
+        <div *ngIf="filter.type === 'multiselect'" class="filter-multiselect">
+          <label>{{ filter.field }}</label>
+          <div class="multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'base')">
+              <span *ngIf="getSelectedOptionsCount(filter) === 0">Select {{ filter.field }}</span>
+              <span *ngIf="getSelectedOptionsCount(filter) > 0">
+                {{ getSelectedOptionsCount(filter) }} selected
+              </span>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'base')">
+              <div class="multiselect-option" *ngFor="let option of getFilterOptions(filter)">
+                <input type="checkbox" 
+                       [checked]="isOptionSelected(filter, option)"
+                       (change)="onMultiSelectChange(filter, option, $event)"
+                       id="base-{{ filter.field }}-{{ option }}">
+                <label [for]="'base-' + filter.field + '-' + option">{{ option }}</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Date Range Filter -->
+        <div *ngIf="filter.type === 'date-range'" class="filter-date-range">
+          <label>{{ filter.field }}</label>
+          <div class="date-range-inputs">
+            <input type="date" [(ngModel)]="filter.value.start" (ngModelChange)="onDateRangeChange(filter, filter.value)" 
+                   class="form-control" placeholder="Start Date">
+            <input type="date" [(ngModel)]="filter.value.end" (ngModelChange)="onDateRangeChange(filter, filter.value)" 
+                   class="form-control" placeholder="End Date">
+          </div>
+        </div>
+
+        <!-- Toggle Filter -->
+        <div *ngIf="filter.type === 'toggle'" class="filter-toggle">
+          <label>{{ filter.field }}</label>
+          <div class="toggle-switch">
+            <input type="checkbox" [(ngModel)]="filter.value" (ngModelChange)="onToggleChange(filter, $event.target.checked)" 
+                   id="toggle-{{ filter.field }}">
+            <label [for]="'toggle-' + filter.field" class="toggle-label">
+              <span class="toggle-slider"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Drilldown Filters -->
+  <div class="filters-section" *ngIf="drilldownFilters && drilldownFilters.length > 0 && currentDrilldownLevel > 0">
+    <h5>Drilldown Filters</h5>
+    <div class="filters-container">
+      <div class="filter-item" *ngFor="let filter of drilldownFilters; let i = index">
+        <!-- Text Filter -->
+        <div *ngIf="filter.type === 'text'" class="filter-text">
+          <label>{{ filter.field }}</label>
+          <input type="text" [(ngModel)]="filter.value" (ngModelChange)="onDrilldownFilterChange(filter)" 
+                 class="form-control" placeholder="Enter {{ filter.field }}">
+        </div>
+
+        <!-- Dropdown Filter -->
+        <div *ngIf="filter.type === 'dropdown'" class="filter-dropdown">
+          <label>{{ filter.field }}</label>
+          <select [(ngModel)]="filter.value" (ngModelChange)="onDrilldownFilterChange(filter)" class="form-control">
+            <option value="">Select {{ filter.field }}</option>
+            <option *ngFor="let option of getFilterOptions(filter)" [value]="option">
+              {{ option }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Multiselect Filter -->
+        <div *ngIf="filter.type === 'multiselect'" class="filter-multiselect">
+          <label>{{ filter.field }}</label>
+          <div class="multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'drilldown')">
+              <span *ngIf="getSelectedOptionsCount(filter) === 0">Select {{ filter.field }}</span>
+              <span *ngIf="getSelectedOptionsCount(filter) > 0">
+                {{ getSelectedOptionsCount(filter) }} selected
+              </span>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'drilldown')">
+              <div class="multiselect-option" *ngFor="let option of getFilterOptions(filter)">
+                <input type="checkbox" 
+                       [checked]="isOptionSelected(filter, option)"
+                       (change)="onMultiSelectChange(filter, option, $event)"
+                       id="drilldown-{{ filter.field }}-{{ option }}">
+                <label [for]="'drilldown-' + filter.field + '-' + option">{{ option }}</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Date Range Filter -->
+        <div *ngIf="filter.type === 'date-range'" class="filter-date-range">
+          <label>{{ filter.field }}</label>
+          <div class="date-range-inputs">
+            <input type="date" [(ngModel)]="filter.value.start" (ngModelChange)="onDateRangeChange(filter, filter.value)" 
+                   class="form-control" placeholder="Start Date">
+            <input type="date" [(ngModel)]="filter.value.end" (ngModelChange)="onDateRangeChange(filter, filter.value)" 
+                   class="form-control" placeholder="End Date">
+          </div>
+        </div>
+
+        <!-- Toggle Filter -->
+        <div *ngIf="filter.type === 'toggle'" class="filter-toggle">
+          <label>{{ filter.field }}</label>
+          <div class="toggle-switch">
+            <input type="checkbox" [(ngModel)]="filter.value" (ngModelChange)="onToggleChange(filter, $event.target.checked)" 
+                   id="drilldown-toggle-{{ filter.field }}">
+            <label [for]="'drilldown-toggle-' + filter.field" class="toggle-label">
+              <span class="toggle-slider"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Layer Filters -->
+  <div class="filters-section" *ngIf="hasActiveLayerFilters()">
+    <h5>Layer Filters</h5>
+    <div class="filters-container">
+      <div class="filter-item" *ngFor="let filter of getActiveLayerFilters(); let i = index">
+        <!-- Text Filter -->
+        <div *ngIf="filter.type === 'text'" class="filter-text">
+          <label>{{ filter.field }}</label>
+          <input type="text" [(ngModel)]="filter.value" (ngModelChange)="onLayerFilterChange(filter)" 
+                 class="form-control" placeholder="Enter {{ filter.field }}">
+        </div>
+
+        <!-- Dropdown Filter -->
+        <div *ngIf="filter.type === 'dropdown'" class="filter-dropdown">
+          <label>{{ filter.field }}</label>
+          <select [(ngModel)]="filter.value" (ngModelChange)="onLayerFilterChange(filter)" class="form-control">
+            <option value="">Select {{ filter.field }}</option>
+            <option *ngFor="let option of getFilterOptions(filter)" [value]="option">
+              {{ option }}
+            </option>
+          </select>
+        </div>
+
+        <!-- Multiselect Filter -->
+        <div *ngIf="filter.type === 'multiselect'" class="filter-multiselect">
+          <label>{{ filter.field }}</label>
+          <div class="multiselect-container">
+            <div class="multiselect-display" (click)="toggleMultiselect(filter, 'layer')">
+              <span *ngIf="getSelectedOptionsCount(filter) === 0">Select {{ filter.field }}</span>
+              <span *ngIf="getSelectedOptionsCount(filter) > 0">
+                {{ getSelectedOptionsCount(filter) }} selected
+              </span>
+            </div>
+            <div class="multiselect-dropdown" *ngIf="isMultiselectOpen(filter, 'layer')">
+              <div class="multiselect-option" *ngFor="let option of getFilterOptions(filter)">
+                <input type="checkbox" 
+                       [checked]="isOptionSelected(filter, option)"
+                       (change)="onMultiSelectChange(filter, option, $event)"
+                       id="layer-{{ filter.field }}-{{ option }}">
+                <label [for]="'layer-' + filter.field + '-' + option">{{ option }}</label>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Date Range Filter -->
+        <div *ngIf="filter.type === 'date-range'" class="filter-date-range">
+          <label>{{ filter.field }}</label>
+          <div class="date-range-inputs">
+            <input type="date" [(ngModel)]="filter.value.start" (ngModelChange)="onDateRangeChange(filter, filter.value)" 
+                   class="form-control" placeholder="Start Date">
+            <input type="date" [(ngModel)]="filter.value.end" (ngModelChange)="onDateRangeChange(filter, filter.value)" 
+                   class="form-control" placeholder="End Date">
+          </div>
+        </div>
+
+        <!-- Toggle Filter -->
+        <div *ngIf="filter.type === 'toggle'" class="filter-toggle">
+          <label>{{ filter.field }}</label>
+          <div class="toggle-switch">
+            <input type="checkbox" [(ngModel)]="filter.value" (ngModelChange)="onToggleChange(filter, $event.target.checked)" 
+                   id="layer-toggle-{{ filter.field }}">
+            <label [for]="'layer-toggle-' + filter.field" class="toggle-label">
+              <span class="toggle-slider"></span>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Clear Filters Button -->
+  <div class="clear-filters" *ngIf="hasActiveFilters()">
+    <button class="btn btn-sm btn-outline" (click)="clearAllFilters()">
+      Clear All Filters
+    </button>
+  </div>
+</div>
+
+<!-- No Data Available Message -->
+<div class="no-data-message" *ngIf="noDataAvailable && !isLoading">
+  <p>No data available for the selected filters.</p>
+  <button class="btn btn-sm btn-primary" (click)="fetchChartData()">Retry</button>
+</div>
+
+<!-- Loading Indicator -->
+<div class="loading-indicator" *ngIf="isLoading">
+  <div class="spinner"></div>
+  <p>Loading chart data...</p>
+</div>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.scss
@@ -0,0 +1,262 @@
+.chart-container {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  padding: 10px;
+}
+
+.drilldown-back {
+  display: flex;
+  align-items: center;
+  margin-bottom: 10px;
+  
+  .drilldown-level {
+    margin-left: 10px;
+    font-size: 14px;
+    color: #666;
+  }
+}
+
+.chart-title {
+  text-align: center;
+  margin-bottom: 15px;
+  
+  h4 {
+    margin: 0;
+    color: #333;
+  }
+}
+
+.chart-wrapper {
+  position: relative;
+  height: calc(100% - 100px);
+  min-height: 300px;
+}
+
+.filters-section {
+  margin-top: 20px;
+  padding: 15px;
+  border: 1px solid #e0e0e0;
+  border-radius: 4px;
+  background-color: #f9f9f9;
+  
+  h5 {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: #333;
+  }
+}
+
+.filters-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+
+.filter-item {
+  flex: 1 1 200px;
+  min-width: 150px;
+  
+  label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: 500;
+    color: #555;
+  }
+  
+  .form-control {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 14px;
+  }
+}
+
+.filter-text,
+.filter-dropdown,
+.filter-date-range {
+  .form-control {
+    height: 36px;
+  }
+}
+
+.date-range-inputs {
+  display: flex;
+  gap: 10px;
+  
+  .form-control {
+    flex: 1;
+  }
+}
+
+.filter-multiselect {
+  position: relative;
+  
+  .multiselect-container {
+    position: relative;
+  }
+  
+  .multiselect-display {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    background-color: white;
+    cursor: pointer;
+    min-height: 36px;
+    display: flex;
+    align-items: center;
+  }
+  
+  .multiselect-dropdown {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    background-color: white;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+    z-index: 1000;
+    max-height: 200px;
+    overflow-y: auto;
+  }
+  
+  .multiselect-option {
+    padding: 8px 12px;
+    border-bottom: 1px solid #eee;
+    
+    &:last-child {
+      border-bottom: none;
+    }
+    
+    &:hover {
+      background-color: #f5f5f5;
+    }
+    
+    input[type="checkbox"] {
+      margin-right: 8px;
+    }
+    
+    label {
+      margin: 0;
+      font-weight: normal;
+      cursor: pointer;
+    }
+  }
+}
+
+.filter-toggle {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  
+  .toggle-switch {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 24px;
+  }
+  
+  .toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+  }
+  
+  .toggle-label {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    transition: .4s;
+    border-radius: 24px;
+  }
+  
+  .toggle-slider {
+    position: absolute;
+    content: "";
+    height: 16px;
+    width: 16px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: .4s;
+    border-radius: 50%;
+  }
+  
+  input:checked + .toggle-label {
+    background-color: #2196F3;
+  }
+  
+  input:checked + .toggle-label .toggle-slider {
+    transform: translateX(26px);
+  }
+}
+
+.clear-filters {
+  margin-top: 15px;
+  text-align: center;
+}
+
+.no-data-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  text-align: center;
+  color: #666;
+  
+  p {
+    margin-bottom: 15px;
+    font-size: 16px;
+  }
+}
+
+.loading-indicator {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 300px;
+  
+  .spinner {
+    width: 40px;
+    height: 40px;
+    border: 4px solid #f3f3f3;
+    border-top: 4px solid #3498db;
+    border-radius: 50%;
+    animation: spin 1s linear infinite;
+    margin-bottom: 15px;
+  }
+  
+  p {
+    margin: 0;
+    color: #666;
+  }
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+// Responsive adjustments
+@media (max-width: 768px) {
+  .filters-container {
+    flex-direction: column;
+  }
+  
+  .filter-item {
+    min-width: 100%;
+  }
+  
+  .chart-wrapper {
+    min-height: 250px;
+  }
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.spec.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.spec.ts
@@ -0,0 +1,21 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UnifiedChartComponent } from './unified-chart.component';
+
+describe('UnifiedChartComponent', () => {
+  let component: UnifiedChartComponent;
+  let fixture: ComponentFixture<UnifiedChartComponent>;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [UnifiedChartComponent]
+    });
+    fixture = TestBed.createComponent(UnifiedChartComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardnew/gadgets/unified-chart/unified-chart.component.ts
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerall/dashrunnerall.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerall/dashrunnerall.component.html
@@ -11,6 +11,9 @@
          <h3>{{ 'all_dashboard' | translate }}</h3>
        </div>
        <div class="clr-col-4" style="text-align: right;">
+          <button class="btn btn-success" [routerLink]="['/cns-portal/shield-dashboard']">
+            <clr-icon shape="shield"></clr-icon>Shield Dashboard
+          </button>
          <button id="add" class="btn btn-primary"  (click)="gotoadd()">
            <clr-icon shape="plus"></clr-icon>{{ 'dashboard_builder' | translate }}
          </button>
@@ -111,7 +114,4 @@
          <button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary" >{{'DELETE' |translate}}</button>
        </div>
      </div>
-    </clr-modal>
-   
-  
-  
+    </clr-modal>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerall/dashrunnerall.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerall/dashrunnerall.component.ts
@@ -12,23 +12,23 @@ import { ModulesetupService } from 'src/app/services/builder/modulesetup.service
  styleUrls: ['./dashrunnerall.component.scss']
 })
 export class DashrunnerallComponent implements OnInit {
-  addModall:boolean = false;
-  selected:any[] = [];
+  addModall: boolean = false;
+  selected: any[] = [];
  loading = false;
-  data:any;
-  id:any;
-  moduleId:any;
+  data: any;
+  id: any;
+  moduleId: any;
  modalDelete = false;
-  rowSelected :any= {};
+  rowSelected: any = {};
  rows: any[];
  projectname;
  projectId;
  error;
  constructor(
-    private router : Router,
-    private route: ActivatedRoute,private dashboardService : Dashboard3Service,
+    private router: Router,
+    private route: ActivatedRoute, private dashboardService: Dashboard3Service,
    // private wireframeservice : WireframeService,
-    private excel: ExcelService,private mainService: ModulesetupService,
+    private excel: ExcelService, private mainService: ModulesetupService,
    private toastr: ToastrService,) { }

  ngOnInit(): void {
@@ -42,41 +42,46 @@ export class DashrunnerallComponent implements OnInit {
    // this.getprojectName(this.projectId);
  }

-  getprojectName(id){
+  getprojectName(id) {
    this.mainService.getProjectModules(id).subscribe((data) => {
      console.log(data);
-      this.projectname=data.items[0]['projectName'];
+      this.projectname = data.items[0]['projectName'];
      console.log(this.projectname);
    });
  }


-  getdashboard()
-  {
-    this.dashboardService.getAllDash().subscribe((data) =>{
+  getdashboard() {
+    this.dashboardService.getAllDash().subscribe((data) => {
      this.data = data;
      this.rows = this.data;
      console.log(data);
-      this.error="No data Available";
+      this.error = "No data Available";
      console.log(this.error);
    });
  }

-  openModal()
-  {
+  openModal() {
    this.addModall = true;
  }
-  gotoadd()
-  {
-      this.router.navigate(['../../dashboardbuilder'],{relativeTo:this.route});
+  gotoadd() {
+    this.router.navigate(['../../dashboardbuilder'], { relativeTo: this.route });
  }
-  goToEdit(id:number)
-  {
-     this.router.navigate(['../dashrunner/'+id],{relativeTo:this.route});
+  //  for runner line navigation
+  //  goToEditData(id: number){
+  //   this.router.navigate(['../editdata/'+id],{relativeTo:this.route});
+  // }
+  goToEdit(id: number) {
+    // Navigate to editnewdash component instead of dashrunnerline
+    // Pass a query parameter to indicate this is from dashboard runner
+    this.router.navigate(['../../dashboardbuilder/editdashn/' + id], {
+      relativeTo: this.route,
+      queryParams: { fromRunner: true }
+    });
  }

-  goToEditData(id: number){
-    this.router.navigate(['../editdata/'+id],{relativeTo:this.route});
+  goToEditData(id: number) {
+    this.router.navigate(['../editdata/' + id], { relativeTo: this.route });
  }

  onExport() {
@@ -84,29 +89,28 @@ export class DashrunnerallComponent implements OnInit {
      moment().format('YYYYMMDD_HHmmss'))
  }

-  gotoAction(){
-    this.router.navigate(["../../actions"], { relativeTo: this.route, queryParams: { m_id: this.moduleId,pname:this.projectname } });
+  gotoAction() {
+    this.router.navigate(["../../actions"], { relativeTo: this.route, queryParams: { m_id: this.moduleId, pname: this.projectname } });
  }
-  gotoRepo(){
+  gotoRepo() {
    this.router.navigate(["../../modulecard"], { relativeTo: this.route, queryParams: { p_id: this.projectId } });
  }

-  onDelete(row){
+  onDelete(row) {
    this.rowSelected = row;
    console.log(this.rowSelected);
    this.modalDelete = true;
  }
-  delete(id)
-  {
-     this.modalDelete = false;
-     console.log("in delete  "+id);
-     this.dashboardService.deleteField(id).subscribe((data)=>{
+  delete(id) {
+    this.modalDelete = false;
+    console.log("in delete  " + id);
+    this.dashboardService.deleteField(id).subscribe((data) => {
      console.log(data);
      this.ngOnInit();
-     });
-     if (id) {
+    });
+    if (id) {
      this.toastr.success('Deleted successfully');
-          }
+    }
  }
  // openModal()
  // {
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component.ts
@@ -3,6 +3,10 @@ import { DashrunnerService } from '../dashrunner.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-bar-runner',
@@ -24,8 +28,19 @@ export class BarRunnerComponent implements OnInit {
  JsonData;

  barData;
-  constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+  ConnectionId: number; // Add ConnectionId property
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+
+  constructor(
+    private Dashtestservive:DashrunnerService,
+    private route: ActivatedRoute,
+    private dashboardService: Dashboard3Service,
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService
+  ) { }

  barChartLabels: any[] = [];
  barChartType: string = 'bar';
@@ -47,6 +62,13 @@ export class BarRunnerComponent implements OnInit {
      this.editId = this.route.snapshot.params.id;
      console.log(this.editId);

+      // Subscribe to filter changes
+      this.subscriptions.push(
+        this.filterService.filterState$.subscribe(filters => {
+          // When filters change, refresh the chart data
+          this.fetchChartData();
+        })
+      );

      this.dashboardService.getById(this.editId).subscribe((data)=>{
        console.log(data);
@@ -74,22 +96,62 @@ export class BarRunnerComponent implements OnInit {
            this.YAxis = ChartObject[i].yAxis;
            this.showlabel = ChartObject[i].showlabel;
            this.barChartLegend = ChartObject[i].chartlegend;
+            this.ConnectionId = ChartObject[i].connection; // Add connection ID
            console.log(this.TableName);
-            this.Dashtestservive.getChartData(this.TableName,"Bar Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-              console.log(Ldata);
-              this.JsonData = Ldata;
-              this.barChartData = this.JsonData.barChartData;
-              this.barChartLabels = this.JsonData.barChartLabels;
-              
-             },(error) => {
-              console.log(error);
-             });
+            // Fetch data with filters
+            this.fetchChartData();
            break; // No need to continue the loop once the correct placeholder is found
          }
        }
      });
  }
   
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('BarRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Bar Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.barChartData = this.JsonData.barChartData;
+        this.barChartLabels = this.JsonData.barChartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+
  generatePDFFile(){
    this.buttonClicked.emit();
    const content = this.contentContainerRef.nativeElement;
@@ -97,5 +159,17 @@ export class BarRunnerComponent implements OnInit {

    this.Dashtestservive.generatePDF(content, filename);
  }
-
-}
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('BarRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('BarRunnerComponent destroyed and cleaned up');
+  }
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component.ts
@@ -5,6 +5,10 @@ import { ChartConfiguration,  ChartDataset,  ChartOptions } from 'chart.js';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 import { DashrunnerService } from '../dashrunner.service';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-bubble-runner',
@@ -25,9 +29,15 @@ export class BubbleRunnerComponent implements OnInit {
  JsonData;
  lineChartNoLabels: [] = [];
  ChartLegend = false;
+  ConnectionId: number; // Add ConnectionId property
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
  
  constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }
    
  public bubbleChartOptions: ChartConfiguration['options'] = {
    // scales: {
@@ -87,6 +97,13 @@ export class BubbleRunnerComponent implements OnInit {
    this.editId = this.route.snapshot.params.id;
    console.log(this.editId);

+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );

    this.dashboardService.getById(this.editId).subscribe((data)=>{
      console.log(data);
@@ -112,22 +129,62 @@ export class BubbleRunnerComponent implements OnInit {
          this.YAxis = ChartObject[i].yAxis;
          this.showlabel = ChartObject[i].showlabel;
          this.ChartLegend = ChartObject[i].chartlegend;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
          console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Bubble Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.JsonData = Ldata;
-            this.bubbleChartData = this.JsonData.bubbleChartData;
-            // this.radarChartLabels = this.JsonData.radarChartLabels;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchChartData();
          break; // No need to continue the loop once the correct placeholder is found
        }
      }
    });
  }
-
+  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('BubbleRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Bubble Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.bubbleChartData = this.JsonData.bubbleChartData;
+        // this.radarChartLabels = this.JsonData.radarChartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
  generatePDFFile(){
    this.buttonClicked.emit();
    const content = this.contentContainerRef.nativeElement;
@@ -135,6 +192,19 @@ export class BubbleRunnerComponent implements OnInit {

    this.Dashtestservive.generatePDF(content, filename);
  }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('BubbleRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('BubbleRunnerComponent destroyed and cleaned up');
+  }


 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.html
@@ -0,0 +1,73 @@
+<div class="compact-filter">
+  <div class="filter-header" (click)="toggleFilter()">
+    <span class="filter-label" *ngIf="filterLabel">{{ filterLabel }}</span>
+    <span class="filter-key" *ngIf="!filterLabel && filterKey">{{ filterKey }}</span>
+    <span class="filter-type">({{ filterType }})</span>
+    <clr-icon shape="caret down" class="expand-icon" *ngIf="!isExpanded"></clr-icon>
+    <clr-icon shape="caret up" class="expand-icon" *ngIf="isExpanded"></clr-icon>
+  </div>
+
+  <div class="filter-content" *ngIf="isExpanded">
+    <!-- Text Filter -->
+    <div class="filter-control" *ngIf="filterType === 'text'">
+      <input type="text" 
+             [(ngModel)]="filterValue" 
+             (ngModelChange)="onFilterValueChange($event)"
+             [placeholder]="filterLabel || filterKey"
+             class="clr-input compact-input">
+    </div>
+
+    <!-- Dropdown Filter -->
+    <div class="filter-control" *ngIf="filterType === 'dropdown'">
+      <select [(ngModel)]="filterValue" 
+              (ngModelChange)="onFilterValueChange($event)"
+              class="clr-select compact-select">
+        <option value="">{{ filterLabel || filterKey }}</option>
+        <option *ngFor="let option of filterOptions; let i = index" [value]="option">{{ option }}</option>
+      </select>
+    </div>
+
+    <!-- Multi-Select Filter -->
+    <div class="filter-control" *ngIf="filterType === 'multiselect'">
+      <div class="multiselect-container">
+        <div class="checkbox-group">
+          <div *ngFor="let option of filterOptions; let i = index" class="checkbox-item">
+            <input type="checkbox" 
+                   [checked]="isOptionSelected(option)" 
+                   (change)="onMultiSelectChange(option, $event)"
+                   [id]="'checkbox-' + filterKey + '-' + i" 
+                   class="clr-checkbox">
+            <label [for]="'checkbox-' + filterKey + '-' + i" class="checkbox-label">{{ option }}</label>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Date Range Filter -->
+    <div class="filter-control date-range" *ngIf="filterType === 'date-range'">
+      <div class="date-input-group">
+        <input type="date" 
+               [(ngModel)]="filterValue.start" 
+               (ngModelChange)="onDateRangeChange({ start: $event, end: filterValue.end })"
+               placeholder="Start Date"
+               class="clr-input compact-date">
+        <span class="date-separator">to</span>
+        <input type="date" 
+               [(ngModel)]="filterValue.end" 
+               (ngModelChange)="onDateRangeChange({ start: filterValue.start, end: $event })"
+               placeholder="End Date"
+               class="clr-input compact-date">
+      </div>
+    </div>
+
+    <!-- Toggle Filter -->
+    <div class="filter-control toggle" *ngIf="filterType === 'toggle'">
+      <input type="checkbox" 
+             [(ngModel)]="filterValue" 
+             (ngModelChange)="onToggleChange($event)"
+             clrToggle 
+             class="clr-toggle">
+      <label class="toggle-label">{{ filterLabel || filterKey }}</label>
+    </div>
+  </div>
+</div>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.scss
@@ -0,0 +1,149 @@
+.compact-filter {
+  display: block;
+  min-width: 200px;
+  max-width: 300px;
+  margin: 8px;
+  padding: 0;
+  background: #ffffff;
+  border: 1px solid #d7d7d7;
+  border-radius: 4px;
+  font-size: 14px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  
+  .filter-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 12px 15px;
+    cursor: pointer;
+    background: #f8f8f8;
+    border-bottom: 1px solid #eaeaea;
+    border-radius: 4px 4px 0 0;
+    
+    &:hover {
+      background: #f0f0f0;
+    }
+    
+    .filter-label, .filter-key {
+      font-weight: 500;
+      color: #333333;
+      flex-grow: 1;
+    }
+    
+    .filter-type {
+      font-size: 12px;
+      color: #666666;
+      margin: 0 8px;
+      background: #eaeaea;
+      padding: 2px 8px;
+      border-radius: 12px;
+    }
+    
+    .expand-icon {
+      width: 16px;
+      height: 16px;
+      color: #666666;
+    }
+  }
+  
+  .filter-content {
+    padding: 15px;
+    
+    .filter-control {
+      margin-bottom: 12px;
+      
+      &:last-child {
+        margin-bottom: 0;
+      }
+      
+      &.date-range {
+        .date-input-group {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          
+          .date-separator {
+            font-size: 14px;
+            color: #666666;
+          }
+        }
+      }
+      
+      &.toggle {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+      }
+    }
+  }
+  
+  .compact-input,
+  .compact-select,
+  .compact-date {
+    width: 100%;
+    padding: 8px 12px;
+    font-size: 14px;
+    border: 1px solid #d7d7d7;
+    border-radius: 4px;
+    background: #ffffff;
+    
+    &:focus {
+      outline: none;
+      border-color: #0072ce;
+      box-shadow: 0 0 0 1px #0072ce;
+    }
+  }
+  
+  .compact-select {
+    height: 36px;
+  }
+  
+  .multiselect-container {
+    max-height: 200px;
+    overflow-y: auto;
+    border: 1px solid #d7d7d7;
+    border-radius: 4px;
+    padding: 10px;
+    background: #ffffff;
+  }
+  
+  .checkbox-group {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  
+  .checkbox-item {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    
+    .clr-checkbox {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+    
+    .checkbox-label {
+      font-size: 14px;
+      margin: 0;
+      cursor: pointer;
+      color: #333333;
+    }
+  }
+  
+  .toggle-label {
+    margin: 0;
+    font-size: 14px;
+    color: #333333;
+  }
+  
+  .clr-toggle {
+    margin: 0;
+  }
+}
+
+// Host styling
+:host {
+  display: block;
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component.ts
@@ -0,0 +1,245 @@
+import { Component, OnInit, Input, Output, EventEmitter, OnChanges, SimpleChanges } from '@angular/core';
+import { FilterService, Filter } from '../../../dashboardnew/common-filter/filter.service';
+
+@Component({
+  selector: 'app-compact-filter-runner',
+  templateUrl: './compact-filter-runner.component.html',
+  styleUrls: ['./compact-filter-runner.component.scss']
+})
+export class CompactFilterRunnerComponent implements OnInit, OnChanges {
+  @Input() filterKey: string = '';
+  @Input() filterType: string = 'text';
+  @Input() filterOptions: string[] = [];
+  @Input() filterLabel: string = '';
+  @Input() apiUrl: string = '';
+  @Input() connection: number | undefined;
+  @Output() filterChange = new EventEmitter<any>();
+  
+  selectedFilter: Filter | null = null;
+  filterValue: any = '';
+  availableFilters: Filter[] = [];
+  availableKeys: string[] = [];
+  availableValues: string[] = [];
+  isExpanded: boolean = false; // Add expansion state
+  
+  constructor(
+    private filterService: FilterService
+  ) {
+    console.log('=== COMPACT FILTER RUNNER CONSTRUCTOR CALLED ===');
+  }
+
+  ngOnInit(): void {
+    console.log('=== COMPACT FILTER RUNNER DEBUG INFO ===');
+    console.log('Component initialized with inputs:');
+    console.log('- filterKey:', this.filterKey);
+    console.log('- filterType:', this.filterType);
+    console.log('- filterOptions:', this.filterOptions);
+    console.log('- filterLabel:', this.filterLabel);
+    console.log('- apiUrl:', this.apiUrl);
+    console.log('- connection:', this.connection);
+    console.log('========================================');
+    
+    // Register this filter with the filter service
+    this.registerFilter();
+    
+    // Subscribe to filter definitions to get available filters
+    this.filterService.filters$.subscribe(filters => {
+      this.availableFilters = filters;
+      console.log('Available filters updated:', filters);
+      this.updateSelectedFilter();
+    });
+    
+    // Subscribe to filter state changes
+    this.filterService.filterState$.subscribe(state => {
+      console.log('Filter state updated:', state);
+      if (this.selectedFilter && state.hasOwnProperty(this.selectedFilter.id)) {
+        this.filterValue = state[this.selectedFilter.id];
+        console.log('Filter value updated for', this.selectedFilter.id, ':', this.filterValue);
+      }
+    });
+  }
+  
+  ngOnChanges(changes: SimpleChanges): void {
+    console.log('=== COMPACT FILTER RUNNER CHANGES DEBUG ===');
+    console.log('Component inputs changed:', changes);
+    
+    // If filterKey or filterType changes, re-register the filter
+    if (changes.filterKey || changes.filterType || changes.filterOptions) {
+      console.log('Re-registering filter due to input changes');
+      this.registerFilter();
+    }
+    console.log('==========================================');
+  }
+  
+  // Toggle filter expansion
+  toggleFilter(): void {
+    this.isExpanded = !this.isExpanded;
+  }
+  
+  // Register this filter with the filter service
+  registerFilter(): void {
+    console.log('Registering filter with key:', this.filterKey, 'type:', this.filterType);
+    
+    if (this.filterKey) {
+      // Get current filter values from the service
+      const currentFilterValues = this.filterService.getFilterValues();
+      console.log('Current filter values from service:', currentFilterValues);
+      
+      // Create a filter definition for this compact filter
+      const filterDef: Filter = {
+        id: `${this.filterKey}`,
+        field: this.filterKey,
+        label: this.filterLabel || this.filterKey,
+        type: this.filterType as any,
+        options: this.filterOptions,
+        value: this.filterValue // Use the current filter value
+      };
+      
+      console.log('Created filter definition:', filterDef);
+      
+      // Get current filters
+      const currentFilters = this.filterService.getFilters();
+      console.log('Current filters from service:', currentFilters);
+      
+      // Check if this filter is already registered
+      const existingFilterIndex = currentFilters.findIndex(f => f.id === filterDef.id);
+      console.log('Existing filter index:', existingFilterIndex);
+      
+      if (existingFilterIndex >= 0) {
+        // Preserve the existing filter configuration
+        const existingFilter = currentFilters[existingFilterIndex];
+        console.log('Found existing filter:', existingFilter);
+        
+        // Preserve the existing filter value if it exists in the service
+        if (currentFilterValues.hasOwnProperty(existingFilter.id)) {
+          filterDef.value = currentFilterValues[existingFilter.id];
+          this.filterValue = filterDef.value; // Update local value
+          console.log('Using value from service:', filterDef.value);
+        } else if (existingFilter.value !== undefined) {
+          // Fallback to existing filter's value if no service value
+          filterDef.value = existingFilter.value;
+          this.filterValue = filterDef.value;
+          console.log('Using value from existing filter:', filterDef.value);
+        }
+        
+        // Preserve other configuration properties
+        filterDef.label = existingFilter.label;
+        filterDef.options = existingFilter.options || this.filterOptions;
+        
+        // Update existing filter
+        currentFilters[existingFilterIndex] = filterDef;
+        console.log('Updated existing filter:', filterDef);
+      } else {
+        // For new filters, check if there's already a value in the service
+        if (currentFilterValues.hasOwnProperty(filterDef.id)) {
+          filterDef.value = currentFilterValues[filterDef.id];
+          this.filterValue = filterDef.value; // Update local value
+          console.log('Using value from service for new filter:', filterDef.value);
+        }
+        
+        // Add new filter
+        currentFilters.push(filterDef);
+        console.log('Added new filter:', filterDef);
+      }
+      
+      // Update the filter service with the new filter list
+      this.filterService.setFilters(currentFilters);
+      
+      // Update the selected filter reference
+      this.selectedFilter = filterDef;
+      console.log('Selected filter set to:', this.selectedFilter);
+    } else {
+      console.log('No filterKey provided, skipping filter registration');
+    }
+  }
+  
+  updateSelectedFilter(): void {
+    console.log('Updating selected filter. Filter key:', this.filterKey, 'Available filters:', this.availableFilters);
+    if (this.filterKey && this.availableFilters.length > 0) {
+      this.selectedFilter = this.availableFilters.find(f => f.field === this.filterKey) || null;
+      console.log('Found selected filter:', this.selectedFilter);
+      if (this.selectedFilter) {
+        // Get current value for this filter from the service
+        const currentState = this.filterService.getFilterValues();
+        console.log('Current state from service:', currentState);
+        const filterValue = currentState[this.selectedFilter.id];
+        if (filterValue !== undefined) {
+          this.filterValue = filterValue;
+        } else if (this.selectedFilter.value !== undefined) {
+          // Use the filter's default value if no service value
+          this.filterValue = this.selectedFilter.value;
+        } else {
+          // Use the current filter value as fallback
+          this.filterValue = this.filterValue || '';
+        }
+        
+        console.log('Updated selected filter value:', this.filterValue);
+      }
+    }
+  }
+  
+  onFilterValueChange(value: any): void {
+    console.log('Filter value changed:', value);
+    
+    if (this.selectedFilter) {
+      this.filterValue = value;
+      this.filterService.updateFilterValue(this.selectedFilter.id, value);
+      this.filterChange.emit({ filterId: this.selectedFilter.id, value: value });
+      
+      // Update the filter definition in the service to reflect the new value
+      const currentFilters = this.filterService.getFilters();
+      const filterIndex = currentFilters.findIndex(f => f.id === this.selectedFilter.id);
+      if (filterIndex >= 0) {
+        currentFilters[filterIndex].value = value;
+        this.filterService.setFilters(currentFilters);
+      }
+    }
+  }
+  
+  onToggleChange(checked: boolean): void {
+    this.onFilterValueChange(checked);
+  }
+  
+  onDateRangeChange(dateRange: { start: string | null, end: string | null }): void {
+    this.onFilterValueChange(dateRange);
+  }
+  
+  // Handle multi-select changes
+  onMultiSelectChange(option: string, event: any): void {
+    const checked = event.target.checked;
+    
+    // Initialize filterValue as array if it's not already
+    if (!Array.isArray(this.filterValue)) {
+      this.filterValue = [];
+    }
+    
+    if (checked) {
+      // Add option to array if not already present
+      if (!this.filterValue.includes(option)) {
+        this.filterValue.push(option);
+      }
+    } else {
+      // Remove option from array
+      this.filterValue = this.filterValue.filter((item: string) => item !== option);
+    }
+    
+    // Emit the change
+    this.onFilterValueChange(this.filterValue);
+  }
+  
+  // Add method to check if an option is selected for checkboxes (needed for proper UI rendering)
+  isOptionSelected(option: string): boolean {
+    console.log('Checking if option is selected:', option, 'Current filter value:', this.filterValue);
+    if (!this.filterValue) {
+      return false;
+    }
+    
+    // Ensure filterValue is an array for multiselect
+    if (!Array.isArray(this.filterValue)) {
+      this.filterValue = [];
+      return false;
+    }
+    
+    return this.filterValue.includes(option);
+  }
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunner.service.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunner.service.ts
@@ -160,7 +160,27 @@ getlinechart(): any[] {
    return this._http.get(url);
  }

-
+  // New method to support filters
+  public getChartDataWithFilters(tableName: string, jobType: string, xAxis:any, yAxes:any, sureId: number | undefined, parameterField: string, parameterValue: string, filterParams: string): Observable<any> {
+    let url = `${baseUrl}/chart/getdashjson/${jobType}?tableName=${tableName}&xAxis=${xAxis}&yAxes=${yAxes}`;
+    
+    // Add sureId if provided
+    if (sureId) {
+      url += `&sureId=${sureId}`;
+    }
+    
+    // Add parameter field and value if provided
+    if (parameterField && parameterValue) {
+      url += `&parameter=${encodeURIComponent(parameterField)}&parameterValue=${encodeURIComponent(parameterValue)}`;
+    }
+    
+    // Add filter parameters if provided
+    if (filterParams) {
+      url += `&filters=${encodeURIComponent(filterParams)}`;
+    }
+    
+    return this._http.get(url);
+  }

  //////////////////////////////////////////////
  
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.html
@@ -26,7 +26,14 @@
        <!-- <span><button class="btn btn-primary" (click)="Export(item.name)">Export</button></span> -->
        <!-- <span><app-line-runner (buttonClicked)="generatePDFFile()"></app-line-runner></span> -->
        <!-- <h4 style="margin-top: 10px; margin-left: 10px;">{{ item.charttitle }}</h4> -->
-        <ndc-dynamic class="no-drag" [ndcDynamicComponent]="item.component" (moduleInfo)="display($event)"></ndc-dynamic>
+        
+       
+        
+        <ndc-dynamic class="no-drag" 
+                     [ndcDynamicComponent]="item.component" 
+                     [ndcDynamicInputs]="getComponentInputs(item)"
+                     (moduleInfo)="display($event)">
+        </ndc-dynamic>
      </gridster-item>
    </gridster>
  </div>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/dashrunnerline.component.ts
@@ -17,6 +17,10 @@ import { BubbleRunnerComponent } from './bubble-runner/bubble-runner.component';
 import { ScatterRunnerComponent } from './scatter-runner/scatter-runner.component';
 import { PolarRunnerComponent } from './polar-runner/polar-runner.component';
 import { RadarRunnerComponent } from './radar-runner/radar-runner.component';
+// Add FilterService import
+import { FilterService } from '../../dashboardnew/common-filter/filter.service';
+// Add CompactFilterRunnerComponent import
+import { CompactFilterRunnerComponent } from './compact-filter-runner/compact-filter-runner.component';

@Component({
  selector: 'app-dashrunnerline',
@@ -44,10 +48,13 @@ export class DashrunnerlineComponent implements OnInit {
  { name: "Radar Chart", componentInstance: RadarRunnerComponent },
  { name: "Grid View", componentInstance: GridRunnerComponent },
  { name: "To Do Chart", componentInstance: TodoRunnerComponent },
+  { name: "Compact Filter", componentInstance: CompactFilterRunnerComponent }, // Add Compact Filter Runner
 ];

  constructor(private Dashtestservive:DashrunnerService, private dashboardService: Dashboard3Service,private route: ActivatedRoute,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }

  ngOnInit(): void {

@@ -288,4 +295,54 @@ dashboard_name = "Dashtest";
    console.log('Button clicked in SomeComponent');
    // Add your custom logic here when the button is clicked in SomeComponent
  }
+  
+  // Method to provide inputs for dynamic components based on their type
+  getComponentInputs(item: any): any {
+    const inputs: any = {};
+    
+    // Common inputs for all components
+    if (item.table !== undefined) inputs.table = item.table;
+    if (item.xAxis !== undefined) inputs.xAxis = item.xAxis;
+    if (item.yAxis !== undefined) inputs.yAxis = item.yAxis;
+    if (item.connection !== undefined) inputs.connection = item.connection;
+    if (item.charttitle !== undefined) inputs.charttitle = item.charttitle;
+    if (item.chartlegend !== undefined) inputs.chartlegend = item.chartlegend;
+    if (item.showlabel !== undefined) inputs.showlabel = item.showlabel;
+    
+    // Compact Filter specific inputs
+    if (item.name === 'Compact Filter') {
+      console.log('=== COMPACT FILTER INPUTS DEBUG ===');
+      console.log('Item data for compact filter:', item);
+      
+      if (item.filterKey !== undefined) inputs.filterKey = item.filterKey;
+      if (item.filterType !== undefined) inputs.filterType = item.filterType;
+      if (item.filterLabel !== undefined) inputs.filterLabel = item.filterLabel;
+      if (item.filterOptions !== undefined) inputs.filterOptions = item.filterOptions;
+      if (item.table !== undefined) inputs.apiUrl = item.table; // Use table as API URL for compact filter
+      if (item.connection !== undefined) inputs.connection = item.connection ? parseInt(item.connection, 10) : undefined;
+      
+      console.log('Final inputs for compact filter:', inputs);
+      console.log('==============================');
+    }
+    
+    // Grid View specific inputs
+    if (item.name === 'Grid View') {
+      if (item.baseFilters !== undefined) inputs.baseFilters = item.baseFilters;
+    }
+    
+    // Chart specific inputs
+    if (item.name.includes('Chart') && item.name !== 'Compact Filter') {
+      if (item.baseFilters !== undefined) inputs.baseFilters = item.baseFilters;
+      if (item.drilldownEnabled !== undefined) inputs.drilldownEnabled = item.drilldownEnabled;
+      if (item.drilldownApiUrl !== undefined) inputs.drilldownApiUrl = item.drilldownApiUrl;
+      if (item.drilldownXAxis !== undefined) inputs.drilldownXAxis = item.drilldownXAxis;
+      if (item.drilldownYAxis !== undefined) inputs.drilldownYAxis = item.drilldownYAxis;
+      if (item.drilldownParameter !== undefined) inputs.drilldownParameter = item.drilldownParameter;
+      if (item.drilldownFilters !== undefined) inputs.drilldownFilters = item.drilldownFilters;
+      if (item.drilldownLayers !== undefined) inputs.drilldownLayers = item.drilldownLayers;
+    }
+    
+    console.log('Component inputs for', item.name, ':', inputs);
+    return inputs;
+  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component.ts
@@ -5,6 +5,10 @@ import { ChartDataset, ChartType,   } from 'chart.js';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-doughnut-runner',
@@ -33,10 +37,16 @@ export class DoughnutRunnerComponent implements OnInit {
    "chartLabels": ["Project", "Repository", "Wireframe"]
  }
  doughnutChartType: ChartType = 'doughnut';
+  ConnectionId: number; // Add ConnectionId property
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
  
    
    constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-      private router : Router,) { }
+      private router : Router,
+      // Add FilterService to constructor
+      private filterService: FilterService) { }
  ngOnInit(): void {
    this.doughnutChartData = this.doughnutData.chartData;
    this.doughnutChartLabels = this.doughnutData.chartLabels;
@@ -44,6 +54,14 @@ export class DoughnutRunnerComponent implements OnInit {
    this.editId = this.route.snapshot.params.id;
    console.log(this.editId);

+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );
+
    this.dashboardService.getById(this.editId).subscribe((data)=>{
      console.log(data);
      this.workflowLine = data.dashbord1_Line[0].model;
@@ -70,22 +88,62 @@ export class DoughnutRunnerComponent implements OnInit {
          this.YAxis = ChartObject[i].yAxis;
          this.showlabel = ChartObject[i].showlabel;
          this.doughnutChartLegend = ChartObject[i].chartlegend;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
          console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Doughnut Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.JsonData = Ldata;
-            this.doughnutChartData = this.JsonData.chartData;
-            this.doughnutChartLabels = this.JsonData.chartLabels;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchChartData();
          break; // No need to continue the loop once the correct placeholder is found
        }
      }
    });
  }
-
+  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('DoughnutRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Doughnut Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.doughnutChartData = this.JsonData.chartData;
+        this.doughnutChartLabels = this.JsonData.chartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
  generatePDFFile(){
    // this.buttonClicked.emit();
    const content = this.contentContainerRef.nativeElement;
@@ -93,6 +151,19 @@ export class DoughnutRunnerComponent implements OnInit {

    this.Dashtestservive.generatePDF(content, filename);
  }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('DoughnutRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('DoughnutRunnerComponent destroyed and cleaned up');
+  }



--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.html
@@ -39,16 +39,35 @@
      </div> -->
      <div><button class="btn btn-primary" (click)="generatePDFFile()">Export</button></div>
      <div style="max-height: 400px; overflow: auto; padding: 10px;">
-      <table class="table">
+      <!-- Debug information -->
+      <div *ngIf="false" style="background-color: #f0f0f0; padding: 10px; margin-bottom: 10px;">
+        <h4>Debug Information</h4>
+        <p><strong>TableName:</strong> {{ TableName }}</p>
+        <p><strong>XAxis:</strong> {{ XAxis }}</p>
+        <p><strong>YAxis:</strong> {{ YAxis }}</p>
+        <p><strong>Rows:</strong> {{ rows?.length }} items</p>
+        <p><strong>Headers:</strong> {{ getHeaders() | json }}</p>
+        <div *ngIf="error"><strong>Error:</strong> {{ error }}</div>
+      </div>
+      
+      <div *ngIf="error" class="error_mess">
+        {{ error }}
+      </div>
+      
+      <table class="table" *ngIf="rows && rows.length > 0; else noData">
        <thead>
          <tr>
            <th *ngFor="let co of getHeaders();let i=index">{{co}}</th>
          </tr>
        </thead>
        <tbody>
-          <tr *ngFor="let item of rows?.slice()?.reverse()">
+          <tr *ngFor="let item of rows">
            <td *ngFor="let key of getHeaders()">{{item[key]}}</td>
          </tr>
        </tbody>
      </table>
+      
+      <ng-template #noData>
+        <p *ngIf="!error">No data available</p>
+      </ng-template>
      </div>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component.ts
@@ -3,6 +3,10 @@ import { DashrunnerService } from '../dashrunner.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-grid-runner',
@@ -26,86 +30,191 @@ export class GridRunnerComponent implements OnInit {
  public DashtestboardArray: DashboardContentModel[] = [];
  workflowLine;
  TableName;
+  ConnectionId: number; // Add ConnectionId property
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];

  constructor(
-    private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router
+    private Dashtestservive:DashrunnerService,
+    private route: ActivatedRoute,
+    private dashboardService: Dashboard3Service,
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService
  ) { }

  ngOnInit(): void {

    this.editId = this.route.snapshot.params.id;
-    console.log(this.editId);
+    console.log('GridRunner: Component initialized with editId:', this.editId);
    // this.getbyId();

-    this.dashboardService.getById(this.editId).subscribe((data)=>{
-      console.log(data);
+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        console.log('GridRunner: Filter state changed:', filters);
+        // When filters change, refresh the grid data
+        this.fetchGridData();
+      })
+    );
+
+    this.dashboardService.getById(this.editId).subscribe((data) => {
+      console.log('GridRunner: Received dashboard data:', data);
      this.workflowLine = data.dashbord1_Line[0].model;
-      const dash = JSON.parse(this.workflowLine) ;
+      const dash = JSON.parse(this.workflowLine);
      // this.DashtestboardArray = dash.dashboard;
      // console.log(this.DashtestboardArray);

      const ChartObject = dash.dashboard.filter(obj => obj.name === "Grid View");
-      console.log(ChartObject);
+      console.log('GridRunner: ChartObject for Grid View:', ChartObject);
      for (let i = 0; i < ChartObject.length; i++) {
        const ids = this.Dashtestservive.getgridview();
+        console.log('GridRunner: Current gridview ids:', ids);
+        console.log('GridRunner: Checking chartid:', ChartObject[i].chartid);
        // console.log(ids);
        if (ids.includes(ChartObject[i].chartid)) {
          // If the chartid is already in the ids array, continue to the next iteration
+          console.log('GridRunner: Skipping chartid as it already exists:', ChartObject[i].chartid);
          continue;
        }
+        console.log('GridRunner: Adding new chartid:', ChartObject[i].chartid);
        this.Dashtestservive.setgridview(ChartObject[i].chartid);
-        const id = ids[i];
-        console.log(id);
-      
-        if (ChartObject[i].chartid === id) {
-          this.TableName = ChartObject[i].table;
-          this.XAxis = ChartObject[i].xAxis;
-          this.YAxis = ChartObject[i].yAxis;
-          console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Grid View",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.rows = Ldata;
-            this.rowdata = this.rows
-            
-           },(error) => {
-            console.log(error);
-           });
-          break; // No need to continue the loop once the correct placeholder is found
-        }
+
+        this.TableName = ChartObject[i].table;
+        this.XAxis = ChartObject[i].xAxis;
+        this.YAxis = ChartObject[i].yAxis;
+        // Add connection ID if available
+        this.ConnectionId = ChartObject[i].connection;
+        console.log('GridRunner: TableName:', this.TableName);
+        console.log('GridRunner: XAxis:', this.XAxis);
+        console.log('GridRunner: YAxis:', this.YAxis);
+        console.log('GridRunner: ConnectionId:', this.ConnectionId);
+        // Fetch data with filters
+        this.fetchGridData();
+        break; // No need to continue the loop once the correct placeholder is found
      }
+    }, (error) => {
+      console.log('GridRunner: Error fetching dashboard data:', error);
    });
  }

+  // Fetch grid data with filter support
+  fetchGridData(): void {
+    console.log('fetching grid data ...')
+    if (this.TableName) {
+      console.log('GridRunner: Fetching data for TableName:', this.TableName, 'XAxis:', this.XAxis, 'YAxis:', this.YAxis);
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;

-  
-//dynamic table
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();

+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];

-getTableData(id){
-}
-getHeaders() {
-let headers: string[] = [];
-if(this.rows) {
-  this.rows.forEach((value) => {
-    Object.keys(value).forEach((key) => {
-      if(!headers.find((header) => header == key)){
-        headers.push(key)
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
      }

-    })
+      console.log('GridRunner: Final filter object to send to API:', filterObj);

-  })
-}
-return headers;
-}
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "grid", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
+        console.log('GridRunner: Received data from API:', Ldata);

-generatePDFFile(){
-  this.buttonClicked.emit();
-  const content = this.contentContainerRef.nativeElement;
-  const filename = 'gridview.pdf'; // You can provide any desired filename here
+        // Handle the actual data structure returned by the API
+        if (Ldata && Ldata.chartData) {
+          this.rows = Ldata.chartData;
+          this.rowdata = this.rows;
+        } else if (Ldata && Ldata.data) {
+          // Handle the original expected format as fallback
+          this.rows = Ldata.data;
+          this.rowdata = this.rows;
+        } else if (Array.isArray(Ldata)) {
+          // Handle case where data is directly an array
+          this.rows = Ldata;
+          this.rowdata = this.rows;
+        } else {
+          console.warn('GridRunner: Received data does not have expected structure', Ldata);
+          this.rows = [];
+          this.rowdata = [];
+        }

-  this.Dashtestservive.generatePDF(content, filename);
-}
-}
+        // Log the structure of the received data
+        if (this.rows) {
+          console.log('GridRunner: Rows length:', this.rows.length);
+          if (this.rows.length > 0) {
+            console.log('GridRunner: First row structure:', this.rows[0]);
+          }
+        } else {
+          console.log('GridRunner: No data received');
+        }
+      }, (error) => {
+        console.log('GridRunner: Error fetching data:', error);
+        this.error = error;
+      });
+    } else {
+      console.log('GridRunner: Missing TableName or XAxis');
+    }
+  }

+
+  //dynamic table
+
+
+  getTableData(id) {
+  }
+  getHeaders() {
+    let headers: string[] = [];
+    if (this.rows) {
+      console.log('GridRunner: Getting headers from rows:', this.rows);
+      this.rows.forEach((value) => {
+        Object.keys(value).forEach((key) => {
+          if (!headers.find((header) => header == key)) {
+            headers.push(key)
+          }
+        })
+      })
+    }
+    console.log('GridRunner: Computed headers:', headers);
+    return headers;
+  }
+
+  generatePDFFile() {
+    this.buttonClicked.emit();
+    const content = this.contentContainerRef.nativeElement;
+    const filename = 'gridview.pdf'; // You can provide any desired filename here
+
+    this.Dashtestservive.generatePDF(content, filename);
+  }
+
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('GridRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+
+    console.log('GridRunnerComponent destroyed and cleaned up');
+  }
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component.ts
@@ -7,6 +7,10 @@ import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 import { jsPDF } from 'jspdf';
 import domtoimage from 'dom-to-image';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';
@Component({
  selector: 'app-line-runner',
  templateUrl: './line-runner.component.html',
@@ -54,8 +58,14 @@ export class LineRunnerComponent implements OnInit {
   lineChartLegend = false;
  lineChartPlugins = [];
  lineChartType = 'line';
+  ConnectionId: number; // Add ConnectionId property
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
  constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }

  ngOnInit(): void {

@@ -65,6 +75,13 @@ export class LineRunnerComponent implements OnInit {
      this.editId = this.route.snapshot.params.id;
      console.log(this.editId);

+      // Subscribe to filter changes
+      this.subscriptions.push(
+        this.filterService.filterState$.subscribe(filters => {
+          // When filters change, refresh the chart data
+          this.fetchChartData();
+        })
+      );

      this.dashboardService.getById(this.editId).subscribe((data)=>{
        console.log(data);
@@ -92,16 +109,10 @@ export class LineRunnerComponent implements OnInit {
            this.YAxis = ChartObject[i].yAxis;
            this.showlabel = ChartObject[i].showlabel;
            this.lineChartLegend = ChartObject[i].chartlegend;
+            this.ConnectionId = ChartObject[i].connection; // Add connection ID
            console.log(this.TableName);
-            this.Dashtestservive.getChartData(this.TableName,"Line Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-              console.log(Ldata);
-              this.JsonData = Ldata;
-              this.lineChartData = this.JsonData.chartData;
-              this.lineChartLabels = this.JsonData.chartLabels;
-              
-             },(error) => {
-              console.log(error);
-             });
+            // Fetch data with filters
+            this.fetchChartData();
            break; // No need to continue the loop once the correct placeholder is found
          }
        }
@@ -128,6 +139,52 @@ export class LineRunnerComponent implements OnInit {
  //     }
  }
  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('LineRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Line Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.lineChartData = this.JsonData.chartData;
+        this.lineChartLabels = this.JsonData.chartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
  generatePDFFile(){
    this.buttonClicked.emit();
    const content = this.contentContainerRef.nativeElement;
@@ -165,5 +222,18 @@ export class LineRunnerComponent implements OnInit {
  //     console.error('Error generating PDF:', error);
  //   }
  // }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('LineRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('LineRunnerComponent destroyed and cleaned up');
+  }

 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component.ts
@@ -3,6 +3,10 @@ import { DashrunnerService } from '../dashrunner.service';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';


@Component({
@@ -23,9 +27,15 @@ export class PieRunnerComponent implements OnInit {
  showlabel;
  JsonData;
  lineChartNoLabels: any[] = [];
+  ConnectionId: number; // Add ConnectionId property
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
  
  constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }

  public pieChartLabels: string[] = ['SciFi', 'Drama', 'Comedy'];
  public pieChartData: number[] = [30, 50, 20];
@@ -39,6 +49,13 @@ export class PieRunnerComponent implements OnInit {
    this.editId = this.route.snapshot.params.id;
    console.log(this.editId);

+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );

    this.dashboardService.getById(this.editId).subscribe((data)=>{
      console.log(data);
@@ -66,22 +83,62 @@ export class PieRunnerComponent implements OnInit {
          this.YAxis = ChartObject[i].yAxis;
          this.showlabel = ChartObject[i].showlabel;
          this.ChartLegend = ChartObject[i].chartlegend;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
          console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Pie Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.JsonData = Ldata;
-            this.pieChartData = this.JsonData.pieChartData;
-            this.pieChartLabels = this.JsonData.pieChartLabels;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchChartData();
          break; // No need to continue the loop once the correct placeholder is found
        }
      }
    });
  }
-
+  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('PieRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Pie Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.pieChartData = this.JsonData.pieChartData;
+        this.pieChartLabels = this.JsonData.pieChartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
  generatePDFFile(){
    this.buttonClicked.emit();
    const content = this.contentContainerRef.nativeElement;
@@ -89,4 +146,17 @@ export class PieRunnerComponent implements OnInit {

    this.Dashtestservive.generatePDF(content, filename);
  }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('PieRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('PieRunnerComponent destroyed and cleaned up');
+  }
 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component.ts
@@ -4,6 +4,10 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 // import { Label } from 'ng2-charts';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-polar-runner',
@@ -23,9 +27,15 @@ export class PolarRunnerComponent implements OnInit {
  showlabel;
  JsonData;
  lineChartNoLabels: any[] = [];
+  ConnectionId: number; // Add ConnectionId property
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
  
  constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }

  public polarAreaChartLabels: string[] = [ 'Download Sales', 'In-Store Sales', 'Mail Sales', 'Telesales', 'Corporate Sales' ];
  public polarAreaChartData: any = [
@@ -41,6 +51,13 @@ export class PolarRunnerComponent implements OnInit {
    this.editId = this.route.snapshot.params.id;
    console.log(this.editId);

+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );

    this.dashboardService.getById(this.editId).subscribe((data)=>{
      console.log(data);
@@ -66,22 +83,62 @@ export class PolarRunnerComponent implements OnInit {
          this.YAxis = ChartObject[i].yAxis;
          this.showlabel = ChartObject[i].showlabel;
          this.ChartLegend = ChartObject[i].chartlegend;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
          console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"PolarArea Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.JsonData = Ldata;
-            this.polarAreaChartData = this.JsonData.polarAreaChartData;
-            this.polarAreaChartLabels = this.JsonData.polarAreaChartLabels;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchChartData();
          break; // No need to continue the loop once the correct placeholder is found
        }
      }
    });
  }
-
+  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('PolarRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "PolarArea Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.polarAreaChartData = this.JsonData.polarAreaChartData;
+        this.polarAreaChartLabels = this.JsonData.polarAreaChartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
  generatePDFFile(){
    this.buttonClicked.emit();
    const content = this.contentContainerRef.nativeElement;
@@ -89,5 +146,18 @@ export class PolarRunnerComponent implements OnInit {

    this.Dashtestservive.generatePDF(content, filename);
  }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('PolarRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('PolarRunnerComponent destroyed and cleaned up');
+  }

 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component.ts
@@ -4,6 +4,10 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 // import { Label } from 'ng2-charts';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-radar-runner',
@@ -24,9 +28,15 @@ export class RadarRunnerComponent implements OnInit {
  JsonData;
  lineChartNoLabels: any[] = [];
  ChartLegend = false;
+  ConnectionId: number; // Add ConnectionId property
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
  
  constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }

  public radarChartLabels: string[] = [
    "Eating",
@@ -50,6 +60,13 @@ export class RadarRunnerComponent implements OnInit {
    this.editId = this.route.snapshot.params.id;
    console.log(this.editId);

+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );

    this.dashboardService.getById(this.editId).subscribe((data)=>{
      console.log(data);
@@ -75,22 +92,62 @@ export class RadarRunnerComponent implements OnInit {
          this.YAxis = ChartObject[i].yAxis;
          this.showlabel = ChartObject[i].showlabel;
          this.ChartLegend = ChartObject[i].chartlegend;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
          console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Radar Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.JsonData = Ldata;
-            this.radarChartData = this.JsonData.radarChartData;
-            this.radarChartLabels = this.JsonData.radarChartLabels;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchChartData();
          break; // No need to continue the loop once the correct placeholder is found
        }
      }
    });
  }
-
+  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('RadarRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Radar Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.radarChartData = this.JsonData.radarChartData;
+        this.radarChartLabels = this.JsonData.radarChartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
  generatePDFFile(){
    this.buttonClicked.emit();
    const content = this.contentContainerRef.nativeElement;
@@ -98,5 +155,18 @@ export class RadarRunnerComponent implements OnInit {

    this.Dashtestservive.generatePDF(content, filename);
  }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('RadarRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('RadarRunnerComponent destroyed and cleaned up');
+  }

 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component.ts
@@ -5,6 +5,10 @@ import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 // import { Label } from 'ng2-charts';
 import { ChartDataset } from 'chart.js';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-scatter-runner',
@@ -25,9 +29,15 @@ export class ScatterRunnerComponent implements OnInit {
  JsonData;
  lineChartNoLabels: any[] = [];
  ChartLegend = false;
+  ConnectionId: number; // Add ConnectionId property
+  
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
  
  constructor(private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router,) { }
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }

  public scatterChartLabels: string[] = [ 'Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running' ];

@@ -69,6 +79,13 @@ export class ScatterRunnerComponent implements OnInit {
    this.editId = this.route.snapshot.params.id;
    console.log(this.editId);

+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the chart data
+        this.fetchChartData();
+      })
+    );

    this.dashboardService.getById(this.editId).subscribe((data)=>{
      console.log(data);
@@ -94,22 +111,62 @@ export class ScatterRunnerComponent implements OnInit {
          this.YAxis = ChartObject[i].yAxis;
          this.showlabel = ChartObject[i].showlabel;
          this.ChartLegend = ChartObject[i].chartlegend;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
          console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Scatter Chart",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.JsonData = Ldata;
-            this.scatterChartData = this.JsonData.scatterChartData;
-            this.scatterChartLabels = this.JsonData.scatterChartLabels;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchChartData();
          break; // No need to continue the loop once the correct placeholder is found
        }
      }
    });
  }
-
+  
+  // Fetch chart data with filter support
+  fetchChartData(): void {
+    if (this.TableName && this.XAxis && this.YAxis) {
+      // Convert YAxis to string if it's an array
+      const yAxisString = Array.isArray(this.YAxis) ? this.YAxis.join(',') : this.YAxis;
+      
+      // Get filter parameters from common filters
+      const commonFilters = this.filterService.getFilterValues();
+      const filterDefinitions = this.filterService.getFilters();
+      
+      // Build filter object using field names as keys
+      const filterObj = {};
+      Object.keys(commonFilters).forEach(filterId => {
+        const filterValue = commonFilters[filterId];
+        
+        // Find the filter definition to get the field name
+        const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+        
+        if (filterDef && filterDef.field) {
+          const fieldName = filterDef.field;
+          if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+            filterObj[fieldName] = filterValue;
+          }
+        }
+      });
+      
+      // Convert to JSON string for API call
+      let filterParams = '';
+      if (Object.keys(filterObj).length > 0) {
+        filterParams = JSON.stringify(filterObj);
+      }
+      
+      console.log('ScatterRunner: Final filter object to send to API:', filterObj);
+      
+      // Fetch data from the dashboard service with filters
+      this.Dashtestservive.getChartDataWithFilters(this.TableName, "Scatter Chart", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
+        console.log(Ldata);
+        this.JsonData = Ldata;
+        this.scatterChartData = this.JsonData.scatterChartData;
+        this.scatterChartLabels = this.JsonData.scatterChartLabels;
+      },(error) => {
+        console.log(error);
+      });
+    }
+  }
+  
  generatePDFFile(){
    this.buttonClicked.emit();
    const content = this.contentContainerRef.nativeElement;
@@ -117,5 +174,18 @@ export class ScatterRunnerComponent implements OnInit {

    this.Dashtestservive.generatePDF(content, filename);
  }
+  
+  ngOnDestroy() {
+    // Unsubscribe from all subscriptions to prevent memory leaks
+    console.log('ScatterRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+    this.subscriptions.forEach(subscription => {
+      if (subscription && !subscription.closed) {
+        subscription.unsubscribe();
+      }
+    });
+    this.subscriptions = [];
+    
+    console.log('ScatterRunnerComponent destroyed and cleaned up');
+  }

 }
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component.ts
@@ -3,6 +3,10 @@ import { DashrunnerService } from '../dashrunner.service';
 import { DashboardContentModel } from 'src/app/models/builder/dashboard';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
+// Add FilterService import
+import { FilterService } from '../../../dashboardnew/common-filter/filter.service';
+// Add Subscription import
+import { Subscription } from 'rxjs';

@Component({
  selector: 'app-todo-runner',
@@ -12,19 +16,21 @@ import { Dashboard3Service } from 'src/app/services/builder/dashboard3.service';
 export class TodoRunnerComponent implements OnInit {
  @ViewChild('contentContainer') contentContainerRef!: ElementRef;
  @Output() buttonClicked = new EventEmitter<void>();
-  constructor( private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
-    private router : Router) { }
-
-    loading = false;
-    givendata;
-    error;
-    XAxis;
-    YAxis;
  
-    editId;
-    public DashtestboardArray: DashboardContentModel[] = [];
-    workflowLine;
-    TableName;
+  // Add subscriptions to unsubscribe on destroy
+  private subscriptions: Subscription[] = [];
+
+  loading = false;
+  givendata;
+  error;
+  XAxis;
+  YAxis;
+
+  editId;
+  public DashtestboardArray: DashboardContentModel[] = [];
+  workflowLine;
+  TableName;
+  ConnectionId: number; // Add ConnectionId property

  list;
  data: any;
@@ -34,11 +40,25 @@ export class TodoRunnerComponent implements OnInit {
    listName: "title123",
    List:['todo 1','todo 2'],
  }
+  
+  constructor( private Dashtestservive:DashrunnerService,private route: ActivatedRoute,private dashboardService: Dashboard3Service,
+    private router : Router,
+    // Add FilterService to constructor
+    private filterService: FilterService) { }
+
  ngOnInit(): void {
    this.editId = this.route.snapshot.params.id;
    console.log(this.editId);
    // this.getbyId();

+    // Subscribe to filter changes
+    this.subscriptions.push(
+      this.filterService.filterState$.subscribe(filters => {
+        // When filters change, refresh the todo data
+        this.fetchTodoData();
+      })
+    );
+
    this.dashboardService.getById(this.editId).subscribe((data)=>{
      console.log(data);
      this.workflowLine = data.dashbord1_Line[0].model;
@@ -63,15 +83,10 @@ export class TodoRunnerComponent implements OnInit {
          this.TableName = ChartObject[i].table;
          this.XAxis = ChartObject[i].xAxis;
          this.YAxis = ChartObject[i].yAxis;
+          this.ConnectionId = ChartObject[i].connection; // Add connection ID
          console.log(this.TableName);
-          this.Dashtestservive.getChartData(this.TableName,"Todo List",this.XAxis,this.YAxis).subscribe((Ldata) => {
-            console.log(Ldata);
-            this.todoList.listName = Ldata.listName;
-            this.todoList.List = Ldata.List;
-            
-           },(error) => {
-            console.log(error);
-           });
+          // Fetch data with filters
+          this.fetchTodoData();
          break; // No need to continue the loop once the correct placeholder is found
        }
      }
@@ -100,4 +115,58 @@ generatePDFFile(){

  this.Dashtestservive.generatePDF(content, filename);
 }
+
+// Fetch todo data with filter support
+fetchTodoData(): void {
+  if (this.TableName && this.XAxis && this.YAxis) {
+    // Get filter parameters from common filters
+    const commonFilters = this.filterService.getFilterValues();
+    
+    // Build filter object using field names as keys
+    const filterObj = {};
+    Object.keys(commonFilters).forEach(filterId => {
+      const filterValue = commonFilters[filterId];
+      
+      // Find the filter definition to get the field name
+      const filterDef = this.filterService.getFilters().find(f => f.id === filterId);
+      
+      if (filterDef && filterDef.field) {
+        const fieldName = filterDef.field;
+        if (filterValue !== undefined && filterValue !== null && filterValue !== '') {
+          filterObj[fieldName] = filterValue;
+        }
+      }
+    });
+    
+    // Convert to JSON string for API call
+    let filterParams = '';
+    if (Object.keys(filterObj).length > 0) {
+      filterParams = JSON.stringify(filterObj);
+    }
+    
+    console.log('TodoRunner: Final filter object to send to API:', filterObj);
+    
+    // Fetch data from the dashboard service with filters
+    this.Dashtestservive.getChartDataWithFilters(this.TableName, "Todo List", this.XAxis, this.YAxis, this.ConnectionId, '', '', filterParams).subscribe((Ldata) => {
+      console.log(Ldata);
+      this.todoList.listName = Ldata.listName;
+      this.todoList.List = Ldata.List;
+    },(error) => {
+      console.log(error);
+    });
+  }
 }
+
+ngOnDestroy() {
+  // Unsubscribe from all subscriptions to prevent memory leaks
+  console.log('TodoRunnerComponent ngOnDestroy called, unsubscribing from', this.subscriptions.length, 'subscriptions');
+  this.subscriptions.forEach(subscription => {
+    if (subscription && !subscription.closed) {
+      subscription.unsubscribe();
+    }
+  });
+  this.subscriptions = [];
+  
+  console.log('TodoRunnerComponent destroyed and cleaned up');
+}
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/report-build/reportbuildquery/reportbuildquery.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/report-build/reportbuildquery/reportbuildquery.component.ts
@@ -254,7 +254,7 @@ export class ReportbuildqueryComponent implements OnInit {
  name;
  databaseName;
  databasename(val) {
-    console.log(val);
+    console.log('connection  ', val);
    this.databaseName = val.name;
    this.selecteddatabase = val.conn_string;
    console.log(this.selecteddatabase);
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/report-build2/report-build2add/report-build2add.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/report-build2/report-build2add/report-build2add.component.html
@@ -23,6 +23,18 @@
          <label for="workflow_name">{{'ACTIVE'| translate}}</label>
          <input type="checkbox" formControlName="active"  clrToggle value="billable" name="billable" />
        </div>
+        
+        <!-- SureConnect Dropdown -->
+        <div class="clr-col-md-4 clr-col-sm-12">
+          <label for="sureConnectId">SureConnect Connection</label>
+          <select formControlName="sureConnectId" class="clr-select">
+            <option value="">-- Select SureConnect --</option>
+            <option *ngFor="let conn of sureconnectData" [value]="conn.id">
+              {{conn.connection_name || conn.id}}
+            </option>
+          </select>
+        </div>
+
 <!-- 
        <div class="clr-col-md-4 clr-col-sm-12">
            <label for="url">Get URL</label>
@@ -76,4 +88,4 @@
      <button type="submit" class="btn btn-primary" [disabled]="!entryForm.valid" (click)="onSubmit()">{{'SUBMIT' | translate}}</button>
    </div>
  </form>
-</div>
+</div>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/report-build2/report-build2add/report-build2add.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/report-build2/report-build2add/report-build2add.component.ts
@@ -4,6 +4,8 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { ReportBuilderService } from 'src/app/services/api/report-builder.service';
+import { SureconnectService } from '../../dashboardnew/sureconnect/sureconnect.service';
+
@Component({
  selector: 'app-report-build2add',
  templateUrl: './report-build2add.component.html',
@@ -11,8 +13,12 @@ import { ReportBuilderService } from 'src/app/services/api/report-builder.servic
 })
 export class ReportBuild2addComponent implements OnInit {
  public entryForm: FormGroup;
+  // Add sureconnect data property
+  sureconnectData: any[] = [];
+
  constructor(private _fb: FormBuilder, private router: Router,private toastr: ToastrService,
-    private route: ActivatedRoute,private reportBuilderService: ReportBuilderService) { }
+    private route: ActivatedRoute,private reportBuilderService: ReportBuilderService,
+    private sureconnectService: SureconnectService) { }

  ngOnInit(): void {
    this.entryForm = this._fb.group({
@@ -20,9 +26,23 @@ export class ReportBuild2addComponent implements OnInit {
      description:[null],
      active:[null],
      isSql:[false],
+      // Add sureConnectId field to the form
+      sureConnectId: [null],
      Rpt_builder2_lines: this._fb.array([this.initLinesFormReport()]),
    });
-  
+    
+    // Load sureconnect data
+    this.loadSureconnectData();
+  }
+
+  // Add method to load sureconnect data
+  loadSureconnectData() {
+    this.sureconnectService.getAll().subscribe((data: any[]) => {
+      this.sureconnectData = data;
+      console.log('Sureconnect data loaded:', this.sureconnectData);
+    }, (error) => {
+      console.log('Error loading sureconnect data:', error);
+    });
  }

  initLinesFormReport() {
@@ -68,4 +88,4 @@ export class ReportBuild2addComponent implements OnInit {
    this.router.navigate(["../all"], { relativeTo: this.route });
  }

-}
+}
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/report-build2/report-build2all/report-build2all.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/report-build2/report-build2all/report-build2all.component.html
@@ -6,70 +6,87 @@

 <div class="dg-wrapper">
  <div class="clr-row">
-      <div class="clr-col-4">
-          <h3><b>{{'REPORT_BUILDER_2' | translate}}</b></h3>
-      </div>
-      <div class="clr-col-8" style="text-align: right;">
-        <button id="add" class="btn btn-primary" (click)="gotorunner()">
-            <clr-icon shape="grid-view"></clr-icon>{{'REPORT_RUNNER' | translate}}
-        </button>
-        
-        <button id="add" class="btn btn-primary" (click)="goToAdd()">
-            <clr-icon shape="plus"></clr-icon>{{'ADD' | translate}}
-        </button>
+    <div class="clr-col-4">
+      <h3><b>{{'REPORT_BUILDER_2' | translate}}</b></h3>
    </div>
-</div>
+    <div class="clr-col-8" style="text-align: right;">
+      <button id="add" class="btn btn-primary" (click)="gotorunner()">
+        <clr-icon shape="grid-view"></clr-icon>{{'REPORT_RUNNER' | translate}}
+      </button>

-<clr-datagrid [clrDgLoading]="loading">
+      <button id="add" class="btn btn-primary" (click)="goToAdd()">
+        <clr-icon shape="plus"></clr-icon>{{'ADD' | translate}}
+      </button>
+    </div>
+  </div>
+
+  <clr-datagrid [clrDgLoading]="loading">
    <clr-dg-placeholder><ng-template #loadingSpinner><clr-spinner>{{'LOADING' | translate}}</clr-spinner></ng-template>
-    <div *ngIf="error;else loadingSpinner">{{error}}</div></clr-dg-placeholder>
-  
-  
+      <div *ngIf="error;else loadingSpinner">{{error}}</div>
+    </clr-dg-placeholder>
+
+
    <clr-dg-column [clrDgField]="''"><ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'GO_TO' | translate}}
-  </ng-container></clr-dg-column>
-  <clr-dg-column [clrDgField]="'name'"><ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'REPORT_NAME' | translate}}
-  </ng-container></clr-dg-column>
-  <clr-dg-column [clrDgField]="'description'"><ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'REPORT_DESCRIPTION' | translate}}
-  </ng-container></clr-dg-column>
-  <clr-dg-column [clrDgField]="'active'"><ng-container *clrDgHideableColumn="{hidden: false}">
-      {{'ACTIVE' | translate}}
-  </ng-container></clr-dg-column>
-  <clr-dg-column><ng-container *clrDgHideableColumn="{hidden: false}">
-      <clr-icon shape="bars"></clr-icon>{{'ACTION' | translate}}
-  </ng-container></clr-dg-column>
-  
-      <clr-dg-row *clrDgItems="let user of gridData?.slice()?.reverse();" [clrDgItem]="user">
-        <clr-dg-cell><span class="label label-light-blue" style="display: inline;margin-left: 10px; cursor: pointer;"  (click)="goToLines(user)"> {{'SET_UP' | translate}}</span></clr-dg-cell>
-        <clr-dg-cell id="word">{{user.reportName}}</clr-dg-cell>
-        <clr-dg-cell id="word">{{user.description}}</clr-dg-cell>
-        <clr-dg-cell id="word">{{user.active}}</clr-dg-cell>
-        <clr-dg-cell>
-          <a href="javascript:void(0)" style="padding-right: 10px;" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm tooltip-top-left">
-            <span style="cursor: pointer;"><clr-icon shape="trash" (click)="onDelete(user)" class="red is-error" style="color: red;"></clr-icon></span>
-            <span class="tooltip-content"> {{'DELETE' | translate}}</span>
-            </a>
-          <clr-signpost>
-            <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span>
-                    <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
-                        <h5 style="margin-top: 0">{{'WHO_COLUMN' | translate}}</h5>
-                        <div>{{'ACCOUNT_ID' | translate}}: <code class="clr-code">{{user.accountId}}</code></div>
-                        <div>{{'CREATED_AT' | translate}}: <code class="clr-code">{{user.createdAt | date}}</code></div>
-                        <div>{{'CREATED_BY' | translate}}: <code class="clr-code">{{user.createdBy}}</code></div>
-                        <div>{{'UPDATED_AT' | translate}}: <code class="clr-code">{{user.updatedAt | date}}</code></div>
-                        <div>{{'UPDATED_BY' | translate}}: <code class="clr-code">{{user.updatedBy}}</code></div>
-                    </clr-signpost-content>
-          </clr-signpost>
-          
-            <!-- <span style="cursor: pointer;"><clr-icon shape="form" (click)="goToLines(user.id)" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span> -->
-          </clr-dg-cell>
-        <clr-dg-action-overflow>
-          <!-- <button class="action-item" (click)="goToEdit(user.id)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button> -->
-        </clr-dg-action-overflow>
-  
-        <!-- <clr-dg-row-detail *clrIfExpanded >
+        {{'GO_TO' | translate}}
+      </ng-container></clr-dg-column>
+
+    <clr-dg-column [clrDgField]="'name'"><ng-container *clrDgHideableColumn="{hidden: false}">
+        {{'REPORT_NAME' | translate}}
+      </ng-container></clr-dg-column>
+    <clr-dg-column [clrDgField]="'description'"><ng-container *clrDgHideableColumn="{hidden: false}">
+        {{'REPORT_DESCRIPTION' | translate}}
+      </ng-container></clr-dg-column>
+
+    <clr-dg-column [clrDgField]="''"><ng-container *clrDgHideableColumn="{hidden: false}">
+        Sureconnect
+      </ng-container></clr-dg-column>
+
+    <clr-dg-column [clrDgField]="'active'"><ng-container *clrDgHideableColumn="{hidden: false}">
+        {{'ACTIVE' | translate}}
+      </ng-container></clr-dg-column>
+
+
+
+
+    <clr-dg-column><ng-container *clrDgHideableColumn="{hidden: false}">
+        <clr-icon shape="bars"></clr-icon>{{'ACTION' | translate}}
+      </ng-container></clr-dg-column>
+
+    <clr-dg-row *clrDgItems="let user of gridData?.slice()?.reverse();" [clrDgItem]="user">
+      <clr-dg-cell><span class="label label-light-blue" style="display: inline;margin-left: 10px; cursor: pointer;"
+          (click)="goToLines(user)"> {{'SET_UP' | translate}}</span></clr-dg-cell>
+      <clr-dg-cell id="word">{{user.reportName}}</clr-dg-cell>
+      <clr-dg-cell id="word">{{user.description}}</clr-dg-cell>
+
+      <clr-dg-cell id="word">{{user.sureconnect_name}}</clr-dg-cell>
+      <clr-dg-cell id="word">{{user.active}}</clr-dg-cell>
+      <clr-dg-cell>
+        <a href="javascript:void(0)" style="padding-right: 10px;" role="tooltip" aria-haspopup="true"
+          class="tooltip tooltip-sm tooltip-top-left">
+          <span style="cursor: pointer;"><clr-icon shape="trash" (click)="onDelete(user)" class="red is-error"
+              style="color: red;"></clr-icon></span>
+          <span class="tooltip-content"> {{'DELETE' | translate}}</span>
+        </a>
+        <clr-signpost>
+          <span style="cursor: pointer;" clrSignpostTrigger><clr-icon shape="help" class="success"
+              style="color: rgb(0, 130, 236);"></clr-icon></span>
+          <clr-signpost-content [clrPosition]="'left-middle'" *clrIfOpen>
+            <h5 style="margin-top: 0">{{'WHO_COLUMN' | translate}}</h5>
+            <div>{{'ACCOUNT_ID' | translate}}: <code class="clr-code">{{user.accountId}}</code></div>
+            <div>{{'CREATED_AT' | translate}}: <code class="clr-code">{{user.createdAt | date}}</code></div>
+            <div>{{'CREATED_BY' | translate}}: <code class="clr-code">{{user.createdBy}}</code></div>
+            <div>{{'UPDATED_AT' | translate}}: <code class="clr-code">{{user.updatedAt | date}}</code></div>
+            <div>{{'UPDATED_BY' | translate}}: <code class="clr-code">{{user.updatedBy}}</code></div>
+          </clr-signpost-content>
+        </clr-signpost>
+
+        <!-- <span style="cursor: pointer;"><clr-icon shape="form" (click)="goToLines(user.id)" class="success" style="color: rgb(0, 130, 236);"></clr-icon></span> -->
+      </clr-dg-cell>
+      <clr-dg-action-overflow>
+        <!-- <button class="action-item" (click)="goToEdit(user.id)">Edit <clr-icon shape="edit" class="is-error"></clr-icon></button> -->
+      </clr-dg-action-overflow>
+
+      <!-- <clr-dg-row-detail *clrIfExpanded >
          <table class="table">
            <tr>
              <td class="td-title">actionName: </td>
@@ -77,26 +94,26 @@
            </tr>
          </table>
        </clr-dg-row-detail> -->
-      </clr-dg-row>
-  
-      <clr-dg-footer>
-        <clr-dg-pagination #pagination [clrDgPageSize]="10">
-          <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'USERS_PER_PAGE' | translate}}</clr-dg-page-size>
-          {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
-          of {{pagination.totalItems}} users
-        </clr-dg-pagination>
-      </clr-dg-footer>
-    </clr-datagrid>
-  </div>
-  
-  <clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
-  
-    <div class="modal-body" *ngIf="rowSelected.id">
-      <h1 class="delete">{{'DELETE_CONFIRMATION' | translate}}</h1>
-      <h2 class="heading">{{rowSelected.id}}</h2>
-      <div class="modal-footer">
-        <button type="button" class="btn btn-outline" (click)="modaldelete = false">{{'CANCEL' | translate}}</button>
-      <button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary" >{{'DELETE' | translate}}</button>
-      </div>
+    </clr-dg-row>
+
+    <clr-dg-footer>
+      <clr-dg-pagination #pagination [clrDgPageSize]="10">
+        <clr-dg-page-size [clrPageSizeOptions]="[10,20,50,100]">{{'USERS_PER_PAGE' | translate}}</clr-dg-page-size>
+        {{pagination.firstItem + 1}} - {{pagination.lastItem + 1}}
+        of {{pagination.totalItems}} users
+      </clr-dg-pagination>
+    </clr-dg-footer>
+  </clr-datagrid>
+</div>
+
+<clr-modal [(clrModalOpen)]="modaldelete" [clrModalSize]="'lg'" [clrModalStaticBackdrop]="true">
+
+  <div class="modal-body" *ngIf="rowSelected.id">
+    <h1 class="delete">{{'DELETE_CONFIRMATION' | translate}}</h1>
+    <h2 class="heading">{{rowSelected.id}}</h2>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-outline" (click)="modaldelete = false">{{'CANCEL' | translate}}</button>
+      <button type="submit" (click)="delete(rowSelected.id)" class="btn btn-primary">{{'DELETE' | translate}}</button>
    </div>
-  </clr-modal>
+  </div>
+</clr-modal>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/report-build2/report-build2edit/report-build2edit.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/report-build2/report-build2edit/report-build2edit.component.html
@@ -1,13 +1,13 @@
 <div class="container">
-    <h3 style="font-weight: 300;display: inline;"><b>REPORT SET UP - Project Details Report ({{ReportData.id}})</b></h3>
-    <span class="label label-light-blue" style="display: inline;margin-left: 10px;">Edit Mode</span>
-    <hr />
-    <form [formGroup]="entryForm">
-        <div class="clr-row">
-            <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12">
-                <div>
-                    <div class="clr-row">
-                        <!-- <div class="clr-col-md-4 clr-col-sm-12">
+  <h3 style="font-weight: 300;display: inline;"><b>REPORT SET UP - Project Details Report ({{ReportData.id}})</b></h3>
+  <span class="label label-light-blue" style="display: inline;margin-left: 10px;">Edit Mode</span>
+  <hr />
+  <form [formGroup]="entryForm">
+    <div class="clr-row">
+      <div class="clr-col-lg-12 clr-col-md-12 clr-col-sm-12">
+        <div>
+          <div class="clr-row">
+            <!-- <div class="clr-col-md-4 clr-col-sm-12">
                            <div class="clr-col-sm-12">
                            <label for="projectName">Connection Name</label>
                            <select  formControlName="conn_name" name="conn_name" [(ngModel)]="nodeEditProperties.conn_name" id="service"   class="clr-dropdown">
@@ -24,55 +24,70 @@
                                </select>
                            </div>
                        </div> -->
-                        <div class="clr-col-md-4 clr-col-sm-12">
-                            <label for="url">Get URL</label>
-                            <div> <input type="text" class="clr-input" formControlName="url" name="url" [(ngModel)]="nodeEditProperties.url"  placeholder="Enter Url"   style="width: 76%">&nbsp;<span><button  class="btn btn-icon btn-primary" (click)="getkeys()">
-                                <clr-icon shape="view-list"></clr-icon>
-                              </button></span></div>
-                        </div>
-                        <div class="clr-col-md-4 clr-col-sm-12">
-                            <label for="workflow_name">Include Date filter</label>
-                            <input type="checkbox" formControlName="date_param_req" name="date_param_req" [(ngModel)]="nodeEditProperties.date_param_req"  clrToggle  />
-                          </div>
-                        <div class="clr-col-md-4 clr-col-sm-12">
-                            <label>Standard Parameters</label>
-                                <clr-combobox-container style="margin-top: 0; padding-top: 0;">
-                                  <!-- <label style="padding-bottom: 5px; padding-top:0px; font-weight: lighter;" class="p1">Select Left Side Filter</label> -->
-                                <clr-combobox  formControlName="std_param_html" name="std_param_html" [(ngModel)]="nodeEditProperties.std_param_html"   clrMulti="true"
-                                   required>
-                                    <ng-container *clrOptionSelected="let selected">
-                                      {{selected}}
-                                    </ng-container>
-                                    <clr-options>
-                                      <clr-option *clrOptionItems="let state of keysfromurl" [clrValue]="state">
-                                        {{state}}
-                                      </clr-option>
-                                    </clr-options>
-                                  </clr-combobox>
-                                  </clr-combobox-container>
-                    
-                        </div>
-                        <div class="clr-col-md-4 clr-col-sm-12">
-                            <label>List</label>
-                              <select>
-                                <option value="">Choose from list</option>
-                                <option></option>
-                              </select>
-                    
-                        </div>
-                        <!-- <div class="clr-col-md-4 clr-col-sm-12">
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label for="url">Get URL</label>
+              <div> <input type="text" class="clr-input" formControlName="url" name="url"
+                  [(ngModel)]="nodeEditProperties.url" placeholder="Enter Url" style="width: 76%">&nbsp;<span><button
+                    class="btn btn-icon btn-primary" (click)="getkeys()">
+                    <clr-icon shape="view-list"></clr-icon>
+                  </button></span></div>
+            </div>
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label for="workflow_name">Include Date filter</label>
+              <input type="checkbox" formControlName="date_param_req" name="date_param_req"
+                [(ngModel)]="nodeEditProperties.date_param_req" clrToggle />
+            </div>
+
+            <!-- SureConnect Dropdown -->
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label for="sureConnectId">SureConnect Connection</label>
+              <select formControlName="sureConnectId" class="clr-select">
+                <option value="">-- Select SureConnect --</option>
+                <option *ngFor="let conn of sureconnectData" [value]="conn.id">
+                  {{conn.name || conn.id}}
+                </option>
+              </select>
+            </div>
+
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label>Standard Parameters</label>
+              <clr-combobox-container style="margin-top: 0; padding-top: 0;">
+                <!-- <label style="padding-bottom: 5px; padding-top:0px; font-weight: lighter;" class="p1">Select Left Side Filter</label> -->
+                <clr-combobox formControlName="std_param_html" name="std_param_html"
+                  [(ngModel)]="nodeEditProperties.std_param_html" clrMulti="true" required>
+                  <ng-container *clrOptionSelected="let selected">
+                    {{selected}}
+                  </ng-container>
+                  <clr-options>
+                    <clr-option *clrOptionItems="let state of keysfromurl" [clrValue]="state">
+                      {{state}}
+                    </clr-option>
+                  </clr-options>
+                </clr-combobox>
+              </clr-combobox-container>
+
+            </div>
+            <div class="clr-col-md-4 clr-col-sm-12">
+              <label>List</label>
+              <select>
+                <option value="">Choose from list</option>
+                <option></option>
+              </select>
+
+            </div>
+            <!-- <div class="clr-col-md-4 clr-col-sm-12">
                            <div class="clr-col-sm-12">
                                <label for="description" class="d1">Adhoc Parameter String (html)</label>
                                <textarea id="t1" cols="10" rows="3" formControlName="adhoc_param_html" placeholder="Enter Description" name="adhoc_param_html" [(ngModel)]="nodeEditProperties.adhoc_param_html" style="width:100%">
                                </textarea>
                            </div>
                        </div> -->
-                    </div>
-                </div>
-            </div>
+          </div>
        </div>
-        <br>
-        <!-- <div class="clr-row" style="padding-left:10px;">
+      </div>
+    </div>
+    <br>
+    <!-- <div class="clr-row" style="padding-left:10px;">
            <div class="clr-col-md-4 clr-col-sm-12">
                <label for="description" class="d1">Column String (html)</label>
                <textarea id="t1" cols="10" rows="3" formControlName="column_str" placeholder="Enter Description" name="column_str" [(ngModel)]="nodeEditProperties.column_str" style="width:100%">
@@ -85,11 +100,10 @@
                </textarea>
            </div>
        </div> -->
-      <br>
-      <div class="center">
-        <button type="button" class="btn btn-outline" (click)="back()">BACK</button>
-        <button type="submit" form-control class="btn btn-primary" (click)="onSubmit()">UPDATE</button>
-      </div>
-    </form>
-  </div>
-  
+    <br>
+    <div class="center">
+      <button type="button" class="btn btn-outline" (click)="back()">BACK</button>
+      <button type="submit" form-control class="btn btn-primary" (click)="onSubmit()">UPDATE</button>
+    </div>
+  </form>
+</div>
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/report-build2/report-build2edit/report-build2edit.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/report-build2/report-build2edit/report-build2edit.component.ts
@@ -3,6 +3,7 @@ import { FormBuilder, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
 import { ToastrService } from 'ngx-toastr';
 import { ReportBuilderService } from 'src/app/services/api/report-builder.service';
+import { SureconnectService } from '../../dashboardnew/sureconnect/sureconnect.service';


@Component({
@@ -13,67 +14,87 @@ import { ReportBuilderService } from 'src/app/services/api/report-builder.servic
 export class ReportBuild2editComponent implements OnInit {
  public entryForm: FormGroup;
  updated = false;
-  ReportData:any = {};
+  ReportData: any = {};
  id: number;
  nodeEditProperties = {
-    std_param_html:'',
-    adhoc_param_html:'',
+    std_param_html: '',
+    adhoc_param_html: '',
    // column_str:'',
    // conn_name:'',
-    date_param_req:'',
+    date_param_req: '',
    // folderName:'',
-    url:'',
+    url: '',
+    // Add sureConnectId property
+    sureConnectId: null,
+
+  };
+  // Add sureconnect data property
+  sureconnectData: any[] = [];

-};
  constructor(private router: Router,
-    private route: ActivatedRoute,private reportBuilderService: ReportBuilderService,
-    private toastr: ToastrService,  private _fb: FormBuilder) { }
+    private route: ActivatedRoute, private reportBuilderService: ReportBuilderService,
+    private toastr: ToastrService, private _fb: FormBuilder,
+    private sureconnectService: SureconnectService) { }

  ngOnInit(): void {
    this.id = this.route.snapshot.params["id"];
    console.log("update with id = ", this.id);

    this.entryForm = this._fb.group({
-      std_param_html : [null],
-      adhoc_param_html:[null],
+      std_param_html: [null],
+      adhoc_param_html: [null],
      // column_str:[null],
      // conn_name:[null],
-      date_param_req:[null],
+      date_param_req: [null],
      // folderName:[null],
-      url:[null],
-      });
+      url: [null],
+      // Add sureConnectId to form
+      sureConnectId: [null],
+    });

+    // Load sureconnect data first, then load report data
+    this.loadSureconnectData();
    this.getById(this.id);
    this.listoddatabase();
  }
-  databaselist;
-  listoddatabase(){
-    this.reportBuilderService.getdatabse().subscribe((data)=>{
-      this.databaselist=data;
-      console.log(this.databaselist)
-    },(error) => {
-      console.log(error);
-      if(error){
-     }
+
+  // Add method to load sureconnect data
+  loadSureconnectData() {
+    this.sureconnectService.getAll().subscribe((data: any[]) => {
+      this.sureconnectData = data;
+      console.log('Sureconnect data loaded:', this.sureconnectData);
+    }, (error) => {
+      console.log('Error loading sureconnect data:', error);
    });
-  
+  }
+
+  databaselist;
+  listoddatabase() {
+    this.reportBuilderService.getdatabse().subscribe((data) => {
+      this.databaselist = data;
+      console.log(this.databaselist)
+    }, (error) => {
+      console.log(error);
+      if (error) {
+      }
+    });
+
  }
  builderLine;
  lineId;
-  builderLineData:any[] = [];
+  builderLineData: any[] = [];
  getById(id: number) {
    this.reportBuilderService.getrbDetailsById(id).subscribe(
      (data) => {
        console.log(data);
        this.ReportData = data;

-        
+
        this.builderLine = this.ReportData.rpt_builder2_lines;
        this.lineId = this.builderLine[0].id
-        console.log("line data ",this.lineId, this.builderLine);
-        if(this.builderLine[0].model != '')
-        {
-          this.builderLineData = JSON.parse(this.builderLine[0].model) ;
+        console.log("line data ", this.lineId, this.builderLine);
+        if (this.builderLine[0].model != '') {
+          this.builderLineData = JSON.parse(this.builderLine[0].model);
          console.log(this.builderLineData);

          this.nodeEditProperties.std_param_html = this.builderLineData[0].std_param_html;
@@ -82,6 +103,11 @@ export class ReportBuild2editComponent implements OnInit {
          // this.nodeEditProperties.conn_name = this.builderLineData.conn_name;
          this.nodeEditProperties.date_param_req = this.builderLineData[0].date_param_req;
          this.nodeEditProperties.url = this.builderLineData[0].url;
+          // Set sureConnectId if it exists in the data
+          this.nodeEditProperties.sureConnectId = this.builderLineData[0].sureConnectId || null;
+
+          // Update form with loaded data
+          this.entryForm.patchValue(this.nodeEditProperties);
        }
      },
      (err) => {
@@ -92,51 +118,56 @@ export class ReportBuild2editComponent implements OnInit {

  stdparams;
  keysfromurl;
-  getkeys(){
-    if(this.nodeEditProperties.url !== null){
-      this.reportBuilderService.getcolumnDetailsByurl(this.nodeEditProperties.url).subscribe(data =>{
-        console.log(data);
+  getkeys() {
+    if (this.nodeEditProperties.url !== null) {
+      this.reportBuilderService.getcolumnDetailsByurl(this.nodeEditProperties.url).subscribe(data => {
+        console.log('coloum list data ', data);
        this.keysfromurl = data;
-        this.nodeEditProperties.adhoc_param_html =  this.keysfromurl;
+        this.nodeEditProperties.adhoc_param_html = this.keysfromurl;
      })
-    }else{
+    } else {
      this.toastr.error("URL is required");
    }
  }
-  
+

  listBuilder_Lines = {
-    model:{}
+    model: {}
  }
  update() {

-  
+
    this.builderLineData[0] = {
      std_param_html: this.nodeEditProperties.std_param_html,
      adhoc_param_html: this.nodeEditProperties.adhoc_param_html,
      date_param_req: this.nodeEditProperties.date_param_req,
      url: this.nodeEditProperties.url,
+      // Add sureConnectId to the data
+      sureConnectId: this.nodeEditProperties.sureConnectId,
    };

    this.builderLineData[0].std_param_html = this.nodeEditProperties.std_param_html;
-     this.builderLineData[0].adhoc_param_html = this.nodeEditProperties.adhoc_param_html;
+    this.builderLineData[0].adhoc_param_html = this.nodeEditProperties.adhoc_param_html;
    //  this.builderLineData.column_str =  this.nodeEditProperties.column_str;
    //  this.builderLineData.conn_name = this.nodeEditProperties.conn_name ;
    this.builderLineData[0].date_param_req = this.nodeEditProperties.date_param_req;
    this.builderLineData[0].url = this.nodeEditProperties.url;
+    // Add sureConnectId to the data
+    this.builderLineData[0].sureConnectId = this.nodeEditProperties.sureConnectId;
+
    console.log(this.builderLineData);
    // this.builderLineData.splice(1);
    console.log(this.builderLineData);
    let tmp = JSON.stringify(this.builderLineData); //.replace(/\\/g, '')
    this.listBuilder_Lines.model = tmp;
-console.log(this.listBuilder_Lines);
+    console.log(this.listBuilder_Lines);

    this.reportBuilderService.updaterbLineData(this.listBuilder_Lines, this.lineId).subscribe(
      (data) => {
        console.log(data);
        if (data) {
          this.toastr.success('Update successfully');
-       }
+        }
        this.router.navigate(["../../all"], { relativeTo: this.route });
        //this.router.navigate(["../../all"],{ relativeTo: this.route, queryParams: { p_id: this.projectId } });
      },
@@ -149,6 +180,8 @@ console.log(this.listBuilder_Lines);

  onSubmit() {
    this.updated = true;
+    // Update nodeEditProperties with form values including sureConnectId
+    Object.assign(this.nodeEditProperties, this.entryForm.value);
    this.update();
  }

@@ -156,4 +189,4 @@ console.log(this.listBuilder_Lines);
    this.router.navigate(["../../all"], { relativeTo: this.route });
  }

-}
+}   
--- a/frontend/angular-clarity-master/src/app/modules/main/builder/report-runner/reportrunneredit2/reportrunneredit2.component.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/builder/report-runner/reportrunneredit2/reportrunneredit2.component.ts
--- a/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.html
+++ b/frontend/angular-clarity-master/src/app/modules/main/layout/layout.component.html
@@ -39,6 +39,14 @@
        </div>
      </a>

+      <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
+        routerLink="/cns-portal/shield-dashboard">
+        <div class="nav-icon-wrapper">
+          <clr-icon shape="shield" solid></clr-icon>
+          <span class="nav-tooltip">Shield Dashboard</span>
+        </div>
+      </a>
+
      <a href="javascript://" class="nav-link nav-icon modern-nav-icon" routerLinkActive="active"
        routerLink="/cns-portal/rerunner/all" (click)="getName()">
        <div class="nav-icon-wrapper">
@@ -122,27 +130,27 @@
              <a href="javascript://" clrDropdownItem (click)="switchLanguage('en')" class="modern-lang-item">
                <clr-icon shape="globe" class="lang-icon"></clr-icon>
                <span>English</span>
-                <div class="lang-flag">ðºð¸</div>
+                <div class="lang-flag">🇺🇸</div>
              </a>
              <a href="javascript://" clrDropdownItem (click)="switchLanguage('hi')" class="modern-lang-item">
                <clr-icon shape="globe" class="lang-icon"></clr-icon>
-                <span>à¤¹à¤¿à¤¨à¥à¤¦à¥</span>
-                <div class="lang-flag">ð®ð³</div>
+                <span>हिन्दी</span>
+                <div class="lang-flag">🇮🇳</div>
              </a>
              <a href="javascript://" clrDropdownItem (click)="switchLanguage('ta')" class="modern-lang-item">
                <clr-icon shape="globe" class="lang-icon"></clr-icon>
-                <span>à®¤à®®à®¿à®´à¯</span>
-                <div class="lang-flag">ð®ð³</div>
+                <span>தமிழ்</span>
+                <div class="lang-flag">🇮🇳</div>
              </a>
              <a href="javascript://" clrDropdownItem (click)="switchLanguage('pa')" class="modern-lang-item">
                <clr-icon shape="globe" class="lang-icon"></clr-icon>
-                <span>à¨ªà©°à¨à¨¾à¨¬à©</span>
-                <div class="lang-flag">ð®ð³</div>
+                <span>ਪੰਜਾਬੀ</span>
+                <div class="lang-flag">🇮🇳</div>
              </a>
              <a href="javascript://" clrDropdownItem (click)="switchLanguage('ml')" class="modern-lang-item">
                <clr-icon shape="globe" class="lang-icon"></clr-icon>
-                <span>à´®à´²à´¯à´¾à´³à´</span>
-                <div class="lang-flag">ð®ð³</div>
+                <span>മലയാളം</span>
+                <div class="lang-flag">🇮🇳</div>
              </a>
            </clr-dropdown-menu>
          </clr-dropdown>
--- a/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/main-routing.module.ts
@@ -1,3 +1,26 @@
+import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
+
+import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
+
+
+import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
+import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
+import { StateComponent } from './BuilderComponents/testdata/State/State.component';
+import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
+import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
+import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
+import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
+import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
+import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
+import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
+import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
+import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
+import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
+import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
+import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
+import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
+import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
+

 import { SequencegenaratorComponent } from './fnd/sequencegenarator/sequencegenarator.component';
 import { Component, NgModule } from '@angular/core';
@@ -82,6 +105,17 @@ import { MappingruleallComponent } from './datamanagement/mappingrule/mappingrul
 import { MappingruleaddComponent } from './datamanagement/mappingrule/mappingruleadd/mappingruleadd.component';
 import { MappingruleeditComponent } from './datamanagement/mappingrule/mappingruleedit/mappingruleedit.component';
 import { Stepper_workflowComponent } from './BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component';
+import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/allapiregistery.component';
+import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
+import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
+import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
+import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
+import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
+import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
+import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
+import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
+import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
+import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
 import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
 import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
 import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
@@ -89,9 +123,9 @@ import { Data_lakeComponent } from './builder/dashboardnew/Data_lake/Data_lake.c
 import { SureconnectComponent } from './builder/dashboardnew/sureconnect/sureconnect.component';
 import { EditsureconnectComponent } from './builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component';
 import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.component';
-// import { QueryComponent } from './superadmin/query/query.component';
-// import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
-// import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
+import { QueryComponent } from './superadmin/query/query.component';
+import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
+import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';



@@ -125,11 +159,13 @@ const routes: Routes = [
      { path: 'about', component: AboutComponent },
      { path: 'setupicon', component: SetupiconComponent },
      { path: 'myworkspace', component: MyworkspaceComponent },
-       { path: 'theme-customization', component: ThemeCustomizationComponent },
-       { path: 'datalake', component: Data_lakeComponent },
-             { path: 'sureconnect', component: SureconnectComponent },
-             { path: 'oauth', component: OauthComponent },
-             { path: 'editconnect/:id', component: EditsureconnectComponent },
+      { path: 'theme-customization', component: ThemeCustomizationComponent },
+      { path: 'datalake', component: Data_lakeComponent },
+      { path: 'sureconnect', component: SureconnectComponent },
+      { path: 'oauth', component: OauthComponent },
+      { path: 'editconnect/:id', component: EditsureconnectComponent },
+
+


      {
@@ -143,9 +179,9 @@ const routes: Routes = [


          //SUPER ADMIN
-          // { path: 'query', component: QueryComponent, canActivate: [AuthGuard], data: { roles: [Role.Admin] } },
-          // { path: 'reportQuery/:id/queryadd', component: QueryaddComponent, canActivate: [AuthGuard], data: { roles: [Role.Admin] } },
-          // { path: 'reportQuery/queryedit/:id', component: QueryeditComponent, canActivate: [AuthGuard], data: { roles: [Role.Admin] } },
+          { path: 'query', component: QueryComponent, canActivate: [AuthGuard], data: { roles: [Role.Admin] } },
+          { path: 'reportQuery/:id/queryadd', component: QueryaddComponent, canActivate: [AuthGuard], data: { roles: [Role.Admin] } },
+          { path: 'reportQuery/queryedit/:id', component: QueryeditComponent, canActivate: [AuthGuard], data: { roles: [Role.Admin] } },



@@ -188,6 +224,12 @@ const routes: Routes = [
          { path: 'schedule/:id', component: ScheduleComponent },
        ]
      },
+      
+      // Shield Dashboard
+      {
+        path: 'shield-dashboard',
+        loadChildren: () => import('./builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard-routing.module').then(m => m.ShieldDashboardRoutingModule)
+      },

      {
        path: 'dashboardrunner', component: DashboardrunnerComponent,
@@ -236,8 +278,20 @@ const routes: Routes = [
        ],
      },
      { path: 'SequenceGenerator', component: SequencegenaratorComponent },
-      { path: 'apiregistery', component: ApiregisteryComponent },

+      // Api registery
+
+      {
+        path: 'apiregistery', component: ApiregisteryComponent,
+        children: [
+          { path: '', redirectTo: 'all', pathMatch: 'full' },
+          { path: 'all', component: AllapiregisteryComponent },
+          { path: 'add', component: AddapiregisteryComponent },
+          { path: 'edit/:id', component: EditapiregisteryComponent },
+          { path: 'line/:id', component: ApiregisterylineComponent },
+
+        ],
+      },

      // DATA MANAGEMENT

@@ -270,18 +324,186 @@ const routes: Routes = [

      // buildercomponents

+
+
+
+
+
+
+
+      { path: 'Country', component: CountryComponent },
+
+
+      { path: 'Adv3', component: Adv3Component },
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      { path: 'Ad10', component: Ad10Component },
+
+
+      { path: 'Childform', component: ChildformComponent },
+
+
+      { path: 'District', component: DistrictComponent },
+
+
+      { path: 'State', component: StateComponent },
+
+
+      { path: 'Country', component: CountryComponent },
+
+
+      { path: 'Ad9', component: Ad9Component },
+
+
+      { path: 'Ad8', component: Ad8Component },
+
+
+      { path: 'Ad7', component: Ad7Component },
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+      { path: 'Ad6', component: Ad6Component },
+
+
+      { path: 'Adv5', component: Adv5Component },
+
+
+      { path: 'Support', component: SupportComponent },
+
+
+      { path: 'Adv3', component: Adv3Component },
+
+
      { path: 'tokenregistery', component: Token_registeryComponent },

+
+      { path: 'Defatest', component: DefatestComponent },
+
+
+      { path: 'Country', component: CountryComponent },
+
+
+      { path: 'Defatest', component: DefatestComponent },
+
+      { path: 'Test2', component: Test2Component },
+
+
+      { path: 'Country', component: CountryComponent },
+
+
+
+      { path: 'Test2', component: Test2Component },
+
+      { path: 'Childform', component: ChildformComponent },
+
+
+      { path: 'District', component: DistrictComponent },
+
+
+      { path: 'State', component: StateComponent },
+
+
+      { path: 'Country', component: CountryComponent },
+
+
+      { path: 'Ad9', component: Ad9Component },
+
+
+      { path: 'Ad8', component: Ad8Component },
+
+
+      { path: 'Ad7', component: Ad7Component },
+
+
+      { path: 'Ad6', component: Ad6Component },
+
+
+      { path: 'Adv5', component: Adv5Component },
+
+
+      { path: 'Adv4', component: Adv4Component },
+
+
+      { path: 'Support', component: SupportComponent },
+
+
+      { path: 'Adv3', component: Adv3Component },
+
+
+      { path: 'Dv2', component: Dv2Component },
+
+
+      { path: 'Adv1', component: Adv1Component },
+
+
+      { path: 'Basicp3', component: Basicp3Component },
+
+
+      { path: 'Basicp2', component: Basicp2Component },
+
+
+      { path: 'Basicp1', component: Basicp1Component },
+      { path: 'cust', component: Customer_informationComponent },
+
+      { path: 'Order_summary', component: Order_summaryComponent },
+
+
+      { path: 'Types', component: TypesComponent },
+
+
+      { path: 'Product', component: ProductComponent },
+
+
+      { path: 'Manufacturer', component: ManufacturerComponent },
+
+
+      { path: 'Deployment_type', component: Deployment_typeComponent },
+
+
+
+
      { path: 'Stepper_workflow', component: Stepper_workflowComponent },


-
-
-
-
-
-
-
      { path: '**', component: PageNotFoundComponent },

    ]
--- a/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
+++ b/frontend/angular-clarity-master/src/app/modules/main/main.module.ts
@@ -1,3 +1,25 @@
+import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
+
+import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
+
+import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
+import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
+import { StateComponent } from './BuilderComponents/testdata/State/State.component';
+import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
+import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
+import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
+import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
+import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
+import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
+import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
+import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
+import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
+import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
+import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
+import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
+import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
+import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
+


 import { CommonModule } from '@angular/common';
@@ -74,6 +96,9 @@ import { RadarChartComponent } from './builder/dashboardnew/gadgets/radar-chart/
 import { ScatterChartComponent } from './builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component';
 import { ToDoChartComponent } from './builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component';
 import { ScheduleComponent } from './builder/dashboardnew/schedule/schedule.component';
+import { CommonFilterComponent } from './builder/dashboardnew/common-filter/common-filter.component';
+import { ChartWrapperComponent } from './builder/dashboardnew/common-filter/chart-wrapper.component';
+import { CompactFilterComponent } from './builder/dashboardnew/common-filter/compact-filter.component';
 import { AddextensionComponent } from './fnd/extension/addextension/addextension.component';
 import { AllextensionComponent } from './fnd/extension/allextension/allextension.component';
 import { EditextensionComponent } from './fnd/extension/editextension/editextension.component';
@@ -91,6 +116,9 @@ import { RadarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/r
 import { ScatterRunnerComponent } from './builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component';
 import { TodoRunnerComponent } from './builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component';

+// Import CompactFilterRunnerComponent
+import { CompactFilterRunnerComponent } from './builder/dashboardrunner/dashrunnerline/compact-filter-runner/compact-filter-runner.component';
+
 import { ApiregisteryComponent } from './fnd/apiregistery/apiregistery.component';

 import { BulkimportComponent } from './datamanagement/bulkimport/bulkimport.component';
@@ -106,18 +134,34 @@ import { MappingruleaddComponent } from './datamanagement/mappingrule/mappingrul
 import { MappingruleallComponent } from './datamanagement/mappingrule/mappingruleall/mappingruleall.component';
 import { MappingruleeditComponent } from './datamanagement/mappingrule/mappingruleedit/mappingruleedit.component';
 import { Stepper_workflowComponent } from './BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component';
+import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/allapiregistery.component';
+import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
+import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
+import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
+import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
+import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
+import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
+import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
+import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
+import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
+import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
 import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
 import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
 import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
+import { QueryComponent } from './superadmin/query/query.component';
+import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
+import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
+
+import { FieldTypesModule } from '../../shared/components/field-types/field-types.module';
+import { SharedModule } from '../../shared/shared.module';
 import { Data_lakeComponent } from './builder/dashboardnew/Data_lake/Data_lake.component';
 import { CronJobBuilderComponent } from './builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component';
 import { SureconnectComponent } from './builder/dashboardnew/sureconnect/sureconnect.component';
 import { EditsureconnectComponent } from './builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component';
 import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.component';

-// import { QueryComponent } from './superadmin/query/query.component';
-// import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
-// import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
+// Import Shield Dashboard Module
+import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.module';

@NgModule({
  declarations: [
@@ -128,71 +172,58 @@ import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.c
    UsermaintanceaddComponent, UsermaintanceeditComponent,
    SubmenuComponent, ModulesComponent, SessionloggerComponent,
    DashboardnewComponent, EditformnewdashComponent, EditnewdashComponent, ScheduleComponent,
-    DoughnutChartComponent, LineChartComponent, RadarChartComponent, BarChartComponent, BubbleChartComponent, DynamicChartComponent, ScatterChartComponent, PolarChartComponent, PieChartComponent, FinancialChartComponent, ToDoChartComponent, GridViewComponent,
+    CommonFilterComponent, ChartWrapperComponent, CompactFilterComponent, DoughnutChartComponent, LineChartComponent, RadarChartComponent, BarChartComponent, BubbleChartComponent, DynamicChartComponent, ScatterChartComponent, PolarChartComponent, PieChartComponent, FinancialChartComponent, ToDoChartComponent, GridViewComponent,
    DashrunnerlineComponent, BarRunnerComponent, LineRunnerComponent, DoughnutRunnerComponent, GridRunnerComponent, PieRunnerComponent, PolarRunnerComponent, RadarRunnerComponent, ScatterRunnerComponent, TodoRunnerComponent, BubbleRunnerComponent,
+    // Add CompactFilterRunnerComponent to declarations
+    CompactFilterRunnerComponent,
    ReportBuildComponent, ReportbuildeditComponent, ReportbuildqueryComponent, ReportBuild2Component, ReportBuild2editComponent,
-    // QueryComponent, QueryaddComponent, QueryeditComponent,
+    QueryComponent, QueryaddComponent, QueryeditComponent,
    ExtensionComponent,
    AllextensionComponent,
-    AddextensionComponent, EditextensionComponent, ApiregisteryComponent,
-    DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent,
-    MappingruleallComponent, MappingruleaddComponent, MappingruleeditComponent,
-    ThemeCustomizationComponent,
+    AddextensionComponent, EditextensionComponent, ApiregisteryComponent, AllapiregisteryComponent, AddapiregisteryComponent, EditapiregisteryComponent,
+
+    ApiregisterylineComponent,
+    DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent,
+    MappingruleaddComponent,
+    MappingruleeditComponent, Stepper_workflowComponent, Customer_informationComponent,
    Data_lakeComponent,
-        SureconnectComponent,
-        EditsureconnectComponent,
-        OauthComponent,
-        CronJobBuilderComponent,
+    SureconnectComponent,
+    EditsureconnectComponent,
+    OauthComponent,
+    CronJobBuilderComponent,
+    //  FileUploadListComponent,


    // buildercomponents


-
+    ThemeCustomizationComponent,
+    Ad10Component,
    Token_registeryComponent,
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-    Stepper_workflowComponent,
-
-
-
-
-
+    DefatestComponent,
+    Test2Component,
+    Order_summaryComponent,
+    TypesComponent,
+    ProductComponent,
+    ManufacturerComponent,
+    Deployment_typeComponent,
+    ChildformComponent,
+    DistrictComponent,
+    StateComponent,
+    CountryComponent,
+    Ad9Component,
+    Ad8Component,
+    Ad7Component,
+    Ad6Component,
+    Adv5Component,
+    Adv4Component,
+    SupportComponent,
+    Adv3Component,
+    Dv2Component,
+    Adv1Component,
+    Basicp3Component,
+    Basicp2Component,
+    Basicp1Component,
  ],
  imports: [
    QRCodeModule,
@@ -212,6 +243,9 @@ import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.c
    NgChartsModule,
    NgxChartsModule,
    DynamicModule,
+    FieldTypesModule,
+    SharedModule,
+    ShieldDashboardModule,
  ],
  providers: [
    CookieService,
--- a/frontend/angular-clarity-master/src/app/modules/main/main.module.ts.tmp
+++ b/frontend/angular-clarity-master/src/app/modules/main/main.module.ts.tmp
@@ -0,0 +1,252 @@
+import { Ad10Component } from './BuilderComponents/angulardatatype/Ad10/Ad10.component';
+
+import { DefatestComponent } from './BuilderComponents/defu/Defatest/Defatest.component';
+
+import { ChildformComponent } from './BuilderComponents/stpkg/Childform/Childform.component';
+import { DistrictComponent } from './BuilderComponents/testdata/District/District.component';
+import { StateComponent } from './BuilderComponents/testdata/State/State.component';
+import { CountryComponent } from './BuilderComponents/testdata/Country/Country.component';
+import { Ad9Component } from './BuilderComponents/angulardatatype/Ad9/Ad9.component';
+import { Ad8Component } from './BuilderComponents/angulardatatype/Ad8/Ad8.component';
+import { Ad7Component } from './BuilderComponents/angulardatatype/Ad7/Ad7.component';
+import { Ad6Component } from './BuilderComponents/angulardatatype/Ad6/Ad6.component';
+import { Adv5Component } from './BuilderComponents/angulardatatype/Adv5/Adv5.component';
+import { Adv4Component } from './BuilderComponents/angulardatatype/Adv4/Adv4.component';
+import { SupportComponent } from './BuilderComponents/angulardatatype/Support/Support.component';
+import { Adv3Component } from './BuilderComponents/angulardatatype/Adv3/Adv3.component';
+import { Dv2Component } from './BuilderComponents/angulardatatype/Dv2/Dv2.component';
+import { Adv1Component } from './BuilderComponents/angulardatatype/Adv1/Adv1.component';
+import { Basicp3Component } from './BuilderComponents/angulardatatype/Basicp3/Basicp3.component';
+import { Basicp2Component } from './BuilderComponents/angulardatatype/Basicp2/Basicp2.component';
+import { Basicp1Component } from './BuilderComponents/angulardatatype/Basicp1/Basicp1.component';
+
+
+
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { ClarityModule } from '@clr/angular';
+
+import { MainPageComponent } from '../main/fnd/main-page/main-page.component';
+import { MainRoutingModule } from './main-routing.module';
+import { PageNotFoundComponent } from './page-not-found/page-not-found.component';
+// import { AboutComponent } from '../main/admin/about/about.component';
+// import { LayoutComponent } from './layout/layout.component';
+import { HelperModule } from 'src/app/pipes/helpers.module';
+import { PasswordResetComponent } from '../main/admin/password-reset/password-reset.component';
+import { UserComponent } from '../main/admin/user/user.component';
+
+
+import { AllMenuGroupComponent } from '../main/admin/menu-group/all/all-menu-group.component';
+import { EditMenuGroupComponent } from '../main/admin/menu-group/edit/edit-menu-group.component';
+import { MenuGroupComponent } from '../main/admin/menu-group/menu-group.component';
+import { ReadOnlyMenuGroupComponent } from '../main/admin/menu-group/read-only/readonly-menu-group.component';
+import { AddMenurComponent } from '../main/admin/menu-register/add-menur/add-menur.component';
+import { AllMenurComponent } from '../main/admin/menu-register/all-menur/all-menur.component';
+import { EditMenurComponent } from '../main/admin/menu-register/edit-menur/edit-menur.component';
+import { MenuRegisterComponent } from '../main/admin/menu-register/menu-register.component';
+import { ReadonlyMenurComponent } from '../main/admin/menu-register/readonly-menur/readonly-menur.component';
+import { ProfileSettingComponent } from '../main/admin/profile-setting/profile-setting.component';
+import { UsermaintanceaddComponent } from '../main/admin/usermaintanceadd/usermaintanceadd.component';
+import { UsermaintanceeditComponent } from '../main/admin/usermaintanceedit/usermaintanceedit.component';
+
+import { DragDropModule } from '@angular/cdk/drag-drop';
+import { HttpClientModule } from '@angular/common/http';
+import { CodemirrorModule } from "@ctrl/ngx-codemirror";
+import { NgxChartsModule } from '@swimlane/ngx-charts';
+import { GridsterModule } from 'angular-gridster2';
+import { DynamicModule } from 'ng-dynamic-component';
+import { NgChartsModule } from 'ng2-charts';
+import { CKEditorModule } from 'ng2-ckeditor';
+
+import { UserRegistrationComponent } from '../main/admin/user-registration/user-registration.component';
+
+import { QRCodeModule } from 'angularx-qrcode';
+import { TagInputModule } from 'ngx-chips';
+import { CookieService } from 'ngx-cookie-service';
+import { ImageCropperModule } from 'ngx-image-cropper';
+import { ModulesComponent } from './admin/modules/modules.component';
+import { SessionloggerComponent } from './admin/sessionlogger/sessionlogger.component';
+import { SubmenuComponent } from './admin/submenu/submenu.component';
+
+import { WireframeService } from 'src/app/services/builder/wireframe.service';
+import { ReportBuildComponent } from './builder/report-build/report-build.component';
+import { ReportbuildeditComponent } from './builder/report-build/reportbuildedit/reportbuildedit.component';
+import { ReportbuildqueryComponent } from './builder/report-build/reportbuildquery/reportbuildquery.component';
+import { ReportBuild2Component } from './builder/report-build2/report-build2.component';
+import { ReportBuild2editComponent } from './builder/report-build2/report-build2edit/report-build2edit.component';
+import { ReportRunnerComponent } from './builder/report-runner/report-runner.component';
+import { ReportrunnereditComponent } from './builder/report-runner/reportrunneredit/reportrunneredit.component';
+import { Reportrunneredit2Component } from './builder/report-runner/reportrunneredit2/reportrunneredit2.component';
+
+
+import { DashboardnewComponent } from './builder/dashboardnew/dashboardnew.component';
+import { EditformnewdashComponent } from './builder/dashboardnew/editformnewdash/editformnewdash.component';
+import { EditnewdashComponent } from './builder/dashboardnew/editnewdash/editnewdash.component';
+import { BarChartComponent } from './builder/dashboardnew/gadgets/bar-chart/bar-chart.component';
+import { BubbleChartComponent } from './builder/dashboardnew/gadgets/bubble-chart/bubble-chart.component';
+import { DoughnutChartComponent } from './builder/dashboardnew/gadgets/doughnut-chart/doughnut-chart.component';
+import { DynamicChartComponent } from './builder/dashboardnew/gadgets/dynamic-chart/dynamic-chart.component';
+import { FinancialChartComponent } from './builder/dashboardnew/gadgets/financial-chart/financial-chart.component';
+import { GridViewComponent } from './builder/dashboardnew/gadgets/grid-view/grid-view.component';
+import { LineChartComponent } from './builder/dashboardnew/gadgets/line-chart/line-chart.component';
+import { PieChartComponent } from './builder/dashboardnew/gadgets/pie-chart/pie-chart.component';
+import { PolarChartComponent } from './builder/dashboardnew/gadgets/polar-chart/polar-chart.component';
+import { RadarChartComponent } from './builder/dashboardnew/gadgets/radar-chart/radar-chart.component';
+import { ScatterChartComponent } from './builder/dashboardnew/gadgets/scatter-chart/scatter-chart.component';
+import { ToDoChartComponent } from './builder/dashboardnew/gadgets/to-do-chart/to-do-chart.component';
+import { ScheduleComponent } from './builder/dashboardnew/schedule/schedule.component';
+import { CommonFilterComponent } from './builder/dashboardnew/common-filter/common-filter.component';
+import { ChartWrapperComponent } from './builder/dashboardnew/common-filter/chart-wrapper.component';
+import { AddextensionComponent } from './fnd/extension/addextension/addextension.component';
+import { AllextensionComponent } from './fnd/extension/allextension/allextension.component';
+import { EditextensionComponent } from './fnd/extension/editextension/editextension.component';
+import { ExtensionComponent } from './fnd/extension/extension.component';
+
+import { BarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/bar-runner/bar-runner.component';
+import { BubbleRunnerComponent } from './builder/dashboardrunner/dashrunnerline/bubble-runner/bubble-runner.component';
+import { DashrunnerlineComponent } from './builder/dashboardrunner/dashrunnerline/dashrunnerline.component';
+import { DoughnutRunnerComponent } from './builder/dashboardrunner/dashrunnerline/doughnut-runner/doughnut-runner.component';
+import { GridRunnerComponent } from './builder/dashboardrunner/dashrunnerline/grid-runner/grid-runner.component';
+import { LineRunnerComponent } from './builder/dashboardrunner/dashrunnerline/line-runner/line-runner.component';
+import { PieRunnerComponent } from './builder/dashboardrunner/dashrunnerline/pie-runner/pie-runner.component';
+import { PolarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/polar-runner/polar-runner.component';
+import { RadarRunnerComponent } from './builder/dashboardrunner/dashrunnerline/radar-runner/radar-runner.component';
+import { ScatterRunnerComponent } from './builder/dashboardrunner/dashrunnerline/scatter-runner/scatter-runner.component';
+import { TodoRunnerComponent } from './builder/dashboardrunner/dashrunnerline/todo-runner/todo-runner.component';
+
+import { ApiregisteryComponent } from './fnd/apiregistery/apiregistery.component';
+
+import { BulkimportComponent } from './datamanagement/bulkimport/bulkimport.component';
+import { BulkimportaddComponent } from './datamanagement/bulkimport/bulkimportadd/bulkimportadd.component';
+import { BulkimportallComponent } from './datamanagement/bulkimport/bulkimportall/bulkimportall.component';
+import { BulkimporteditComponent } from './datamanagement/bulkimport/bulkimportedit/bulkimportedit.component';
+import { BulkimporteditlineComponent } from './datamanagement/bulkimport/bulkimporteditline/bulkimporteditline.component';
+import { BulkimportlineComponent } from './datamanagement/bulkimport/bulkimportline/bulkimportline.component';
+import { DatamanagementComponent } from './datamanagement/datamanagement/datamanagement.component';
+import { DatamananementworkflowComponent } from './datamanagement/datamananementworkflow/datamananementworkflow.component';
+import { MappingruleComponent } from './datamanagement/mappingrule/mappingrule.component';
+import { MappingruleaddComponent } from './datamanagement/mappingrule/mappingruleadd/mappingruleadd.component';
+import { MappingruleallComponent } from './datamanagement/mappingrule/mappingruleall/mappingruleall.component';
+import { MappingruleeditComponent } from './datamanagement/mappingrule/mappingruleedit/mappingruleedit.component';
+import { Stepper_workflowComponent } from './BuilderComponents/stepperworkflow/Stepper_workflow/Stepper_workflow.component';
+import { AllapiregisteryComponent } from './fnd/apiregistery/allapiregistery/allapiregistery.component';
+import { AddapiregisteryComponent } from './fnd/apiregistery/addapiregistery/addapiregistery.component';
+import { EditapiregisteryComponent } from './fnd/apiregistery/editapiregistery/editapiregistery.component';
+import { ApiregisterylineComponent } from './fnd/apiregistery/Apiregisteryline/Apiregisteryline.component';
+import { Customer_informationComponent } from './BuilderComponents/angulardatatype/Customer_information/Customer_information.component';
+import { Deployment_typeComponent } from './BuilderComponents/angulardatatype/Deployment_type/Deployment_type.component';
+import { ManufacturerComponent } from './BuilderComponents/angulardatatype/Manufacturer/Manufacturer.component';
+import { Order_summaryComponent } from './BuilderComponents/angulardatatype/Order_summary/Order_summary.component';
+import { ProductComponent } from './BuilderComponents/angulardatatype/Product/Product.component';
+import { TypesComponent } from './BuilderComponents/angulardatatype/Types/Types.component';
+import { Test2Component } from './BuilderComponents/testdata/Test2/Test2.component';
+import { Token_registeryComponent } from './fnd/Token_registery/Token_registery.component';
+import { MyworkspaceComponent } from './admin/myworkspace/myworkspace.component';
+import { ThemeCustomizationComponent } from './theme-customization/theme-customization.component';
+// import { QueryComponent } from './superadmin/query/query.component';
+// import { QueryaddComponent } from './superadmin/queryadd/queryadd.component';
+// import { QueryeditComponent } from './superadmin/queryedit/queryedit.component';
+
+import { FieldTypesModule } from '../../shared/components/field-types/field-types.module';
+import { SharedModule } from '../../shared/shared.module';
+import { Data_lakeComponent } from './builder/dashboardnew/Data_lake/Data_lake.component';
+import { CronJobBuilderComponent } from './builder/dashboardnew/Data_lake/cron-job-builder/cron-job-builder.component';
+import { SureconnectComponent } from './builder/dashboardnew/sureconnect/sureconnect.component';
+import { EditsureconnectComponent } from './builder/dashboardnew/sureconnect/editsureconnect/editsureconnect.component';
+import { OauthComponent } from './builder/dashboardnew/sureconnect/oauth/oauth.component';
+
+// Import Shield Dashboard Module
+import { ShieldDashboardModule } from './builder/dashboardnew/gadgets/shield-dashboard/shield-dashboard.module';
+
+@NgModule({
+  declarations: [
+    MainPageComponent, PageNotFoundComponent, UserComponent, PasswordResetComponent,
+    MyworkspaceComponent,
+    ReportRunnerComponent, ReportrunnereditComponent, Reportrunneredit2Component, MenuGroupComponent, AllMenuGroupComponent, EditMenuGroupComponent, ReadOnlyMenuGroupComponent, UserRegistrationComponent,
+    MenuRegisterComponent, AddMenurComponent, EditMenurComponent, AllMenurComponent, ReadonlyMenurComponent, ProfileSettingComponent,
+    UsermaintanceaddComponent, UsermaintanceeditComponent,
+    SubmenuComponent, ModulesComponent, SessionloggerComponent,
+    DashboardnewComponent, EditformnewdashComponent, EditnewdashComponent, ScheduleComponent,
+    CommonFilterComponent, ChartWrapperComponent, DoughnutChartComponent, LineChartComponent, RadarChartComponent, BarChartComponent, BubbleChartComponent, DynamicChartComponent, ScatterChartComponent, PolarChartComponent, PieChartComponent, FinancialChartComponent, ToDoChartComponent, GridViewComponent,
+    DashrunnerlineComponent, BarRunnerComponent, LineRunnerComponent, DoughnutRunnerComponent, GridRunnerComponent, PieRunnerComponent, PolarRunnerComponent, RadarRunnerComponent, ScatterRunnerComponent, TodoRunnerComponent, BubbleRunnerComponent,
+    ReportBuildComponent, ReportbuildeditComponent, ReportbuildqueryComponent, ReportBuild2Component, ReportBuild2editComponent,
+    // QueryComponent, QueryaddComponent, QueryeditComponent,
+    ExtensionComponent,
+    AllextensionComponent,
+    AddextensionComponent, EditextensionComponent, ApiregisteryComponent, AllapiregisteryComponent, AddapiregisteryComponent, EditapiregisteryComponent,
+
+    ApiregisterylineComponent,
+    DatamanagementComponent, DatamananementworkflowComponent, BulkimportComponent, BulkimportallComponent, BulkimportaddComponent, BulkimporteditComponent, BulkimportlineComponent, BulkimporteditlineComponent, MappingruleComponent, MappingruleallComponent,
+    MappingruleaddComponent,
+    MappingruleeditComponent, Stepper_workflowComponent, Customer_informationComponent,
+    Data_lakeComponent,
+    SureconnectComponent,
+    EditsureconnectComponent,
+    OauthComponent,
+    CronJobBuilderComponent,
+    //  FileUploadListComponent,
+
+
+    // buildercomponents
+
+
+    ThemeCustomizationComponent,
+    Ad10Component,
+    Token_registeryComponent,
+    DefatestComponent,
+    Test2Component,
+    Order_summaryComponent,
+    TypesComponent,
+    ProductComponent,
+    ManufacturerComponent,
+    Deployment_typeComponent,
+    ChildformComponent,
+    DistrictComponent,
+    StateComponent,
+    CountryComponent,
+    Ad9Component,
+    Ad8Component,
+    Ad7Component,
+    Ad6Component,
+    Adv5Component,
+    Adv4Component,
+    SupportComponent,
+    Adv3Component,
+    Dv2Component,
+    Adv1Component,
+    Basicp3Component,
+    Basicp2Component,
+    Basicp1Component,
+  ],
+  imports: [
+    QRCodeModule,
+    CommonModule,
+    FormsModule,
+    ReactiveFormsModule,
+    ClarityModule,
+    HelperModule,
+    MainRoutingModule,
+    DragDropModule,
+    HttpClientModule,
+    ImageCropperModule,
+    TagInputModule,
+    CodemirrorModule,
+    CKEditorModule,
+    GridsterModule,
+    NgChartsModule,
+    NgxChartsModule,
+    DynamicModule,
+    FieldTypesModule,
+    SharedModule,
+    ShieldDashboardModule,
+  ],
+  providers: [
+    CookieService,
+    WireframeService,
+
+
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class MainModule { }
--- a/frontend/angular-clarity-master/src/app/services/fnd/alerts.service.ts
+++ b/frontend/angular-clarity-master/src/app/services/fnd/alerts.service.ts
@@ -69,4 +69,13 @@ export class AlertsService {
      }
      return this.apiRequest.get(apiUrl);
    }
+    
+    // Get values for a specific key from API
+    public getValuesFromUrl(url: string, sureId: number | undefined, key: string): Observable<any> {
+      let apiUrl = `chart/getValue?apiUrl=${url}&key=${key}`;
+      if (sureId) {
+        apiUrl += `&sureId=${sureId}`;
+      }
+      return this.apiRequest.get(apiUrl);
+    }
 }
Author	SHA1	Message	Date
Gaurav Kumar	3e70f85644	dashboard	2025-10-31 17:19:18 +05:30
Gaurav Kumar	482805b5cf	Update editnewdash.component.ts	2025-10-31 17:17:01 +05:30
Gaurav Kumar	ffda17e6b1	unified	2025-10-31 16:35:15 +05:30
Gaurav Kumar	7396843bc6	Update report-build2all.component.html	2025-10-31 16:03:37 +05:30
Gaurav Kumar	4f75ecb3e0	builder	2025-10-31 15:51:28 +05:30
Gaurav Kumar	7c1a487114	dashboard	2025-10-31 10:47:43 +05:30
Gaurav Kumar	47e9fb92e3	Update compact-filter.component.ts	2025-10-30 12:46:39 +05:30
Gaurav Kumar	7f735dcada	Update editnewdash.component.ts	2025-10-30 12:29:22 +05:30
Gaurav Kumar	bd315f42a3	compact	2025-10-29 17:55:05 +05:30
Gaurav Kumar	e8c1f46430	Update editnewdash.component.html	2025-10-29 17:30:13 +05:30
Gaurav Kumar	fa96ca81bd	runner	2025-10-29 17:18:26 +05:30
Gaurav Kumar	c384f44c0c	doughnut	2025-10-29 17:01:50 +05:30
Gaurav Kumar	50df914ca9	pie	2025-10-29 16:52:45 +05:30
Gaurav Kumar	e0bd888c45	polr	2025-10-29 16:14:45 +05:30
Gaurav Kumar	02b82fcaf8	Update polar-chart.component.ts	2025-10-29 16:07:59 +05:30
Gaurav Kumar	557afc348f	bubble	2025-10-29 15:55:01 +05:30
Gaurav Kumar	1dec787062	Update bubble-chart.component.ts	2025-10-29 15:50:08 +05:30
Gaurav Kumar	8853cf75cf	Update bubble-chart.component.ts	2025-10-29 15:42:21 +05:30
Gaurav Kumar	ad57f11f8a	bubble	2025-10-29 15:34:10 +05:30
Gaurav Kumar	9b775a8c63	fin	2025-10-29 12:59:20 +05:30
Gaurav Kumar	cf4fc1be93	todo	2025-10-29 12:21:24 +05:30
Gaurav Kumar	4c135c4901	to do	2025-10-29 12:16:54 +05:30
Gaurav Kumar	0b738ca7ca	scatter	2025-10-29 11:35:09 +05:30
Gaurav Kumar	1b17bb706d	scatter	2025-10-29 11:11:36 +05:30
Gaurav Kumar	f740076d60	bar chart	2025-10-28 17:04:02 +05:30
Gaurav Kumar	bedcc0822d	chart	2025-10-28 16:31:45 +05:30
Gaurav Kumar	87810acc9e	line	2025-10-28 15:41:36 +05:30
Gaurav Kumar	96b90e5dbd	barchart	2025-10-28 15:32:37 +05:30
Gaurav Kumar	ced99e0940	grid view	2025-10-28 15:11:40 +05:30
Gaurav Kumar	4f82ae8698	grid view	2025-10-28 12:40:01 +05:30
Gaurav Kumar	e6779e8f34	filter	2025-10-28 12:29:10 +05:30
Gaurav Kumar	82425d5377	Update editnewdash.component.html	2025-10-28 12:13:15 +05:30
Gaurav Kumar	2995328ec1	compact filter	2025-10-27 20:36:22 +05:30
Gaurav Kumar	afc2c1f8a1	filter with runner	2025-10-27 20:12:22 +05:30
Gaurav Kumar	418b02acd7	checkbox multislect filter, in edit new dash	2025-10-27 19:02:47 +05:30
Gaurav Kumar	cdd752469c	builder	2025-10-27 18:48:16 +05:30